@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html {overflow: hidden; height: 100%;} */
/* body {overflow: auto; height: 100%;} */

/* ******************** 공용 ******************** */
body {font-family:'NotoSansKR' !important; font-size:16px; font-weight:300; line-height:1.6; color:#666; word-break:keep-all; letter-spacing:-.5px;}
body * {box-sizing:border-box;}
body label.hidden {position:absolute; left:-99999999999px;}

a {color:inherit; transition:all .2s;}



/* 폰트 */
.f_paybooc {font-family:'paybooc';}

select {
	padding-right:40px !important;
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
     background: url(../images/common/select_arrow.png) no-repeat right 10px center; /* 화살표 모양의 이미지 */
}
select::-ms-expand { display: none; } /* IE 10, 11의 네이티브 화살표 숨기기 */
select::focus {border:1px solid #3572c6; outline:none}

input[type='text'] {padding:6px 12px; border:1px solid #e5e5e5; -webkit-appearance: none;}

textarea {resize:none; border:1px solid #ddd;}


/* 서브배경 */
.lnb {background:center /cover no-repeat;}
.lnb.business {background-image:url(../images/bg/business.jpg)}

.lnb {background-image:url(../images/bg/business.jpg)}
.lnb.edu {background-image:url(../images/bg/edu.jpg)}
.lnb.volunteer {background-image:url(../images/bg/volunteer.jpg)}
.lnb.community {background-image:url(../images/bg/community.jpg)}
.lnb.intro {background-image:url(../images/bg/intro.webp)}
.lnb.together {background-image:url(../images/bg/together.webp)}
.lnb.member {background-image:url(../images/bg/member.jpg)}
.lnb.mypage {background-image:url(../images/bg/mypage.jpg)}



/* ************************ 데스크탑 (992~) ************************ */
@media screen and (min-width: 992px) {

	.mobile {display:none !important}

	header {position:absolute; left:0; top:0; width:100%; background:#fff; z-index:999999}
	header .head-wrap {position:relative; height:90px;}
	header .head-wrap .logo {float:left}
	header .head-wrap .logo a {display:flex; justify-content:center; align-items:center; height:90px;}
	header .head-wrap .logo a img {height:40px;}



	header .head-wrap aside {position:absolute; right:0; top:0; height:100%; padding:25px 0;}
	header .head-wrap aside>* {float:left;}
	header .head-wrap aside .head-login {display:inline-block;}
	header .head-wrap aside .head-login li {position:relative; float:left;}
	header .head-wrap aside .head-login li:last-child {padding-left:10px}
	header .head-wrap aside .head-login li a {padding:11px 0; display:inline-block; font-size:14px; font-weight:400; color:#000; line-height:1;}
	header .head-wrap aside .head-login li:first-child:after {display:none;}
	header .head-wrap aside .head-login li:first-child a {position:relative; padding:9px 20px 9px 20px; border:2px solid; color:#ff9d02; border-radius:50px;}
	header .head-wrap aside .head-login li:first-child a:hover {}
	/* header .head-wrap aside .head-login li:first-child a:before {content:''; display:block; width:11px; height:15px; background:url(../images/common/i-log.png)0 50% no-repeat;} */
	header .head-wrap aside .head-login li:first-child a i {display:inline-block; padding-right:5px;}
	header .head-wrap aside .head-login li:first-child a i img {margin-top:-3px;}
	header .head-wrap aside .lang {margin-right:10px;}
	header .head-wrap aside .lang a {display:inline-block; padding:9px 20px 9px 20px; border:2px solid #888; border-radius:50px; font-size:14px; font-weight:400; color:#222; line-height:1;}

	header .head-wrap .head-sns {margin-left:40px; display:inline-block;}
	header .head-wrap .head-sns li {float:left; margin-right:5px;}
	header .head-wrap .head-sns li:last-child {margin-right:0;}
	header .head-wrap .head-sns li a {display:inline-block;}

	nav.pc {position:relative; overflow:hidden; border-top:1px solid #eaeaea;box-shadow:0 5px 5px rgba(0, 0, 0, .05);}
	/* nav.pc .gnb {width:1400px;} */
	/* nav.pc .gnb>ul {position:relative; padding-left:70px;} */
	/* nav.pc .gnb>ul {position:relative; padding-left:3.6vw;} */
	nav.pc .gnb>ul {position:relative; display:flex; justify-content:center; flex-wrap:nowrap}
	nav.pc .gnb>ul:after {clear:both; content:''; display:block;}
	/* nav.pc .gnb>ul>li {position:relative; float:left;} */
	nav.pc .gnb>ul>li {position:relative; padding-right:6.2vw;}
	/* nav.pc .gnb>ul>li:last-child {padding-right:0 !important} */
	nav.pc .gnb>ul>li:nth-last-child(2) {padding-right:0 !important}
	nav.pc .gnb>ul>li.pcLast {padding-right:0 !important}
	nav.pc .gnb>ul>li>a {position:relative; display:block; height:100%; font-size:22px; font-weight:700; line-height:70px; color:#000;font-family:'paybooc';}
	nav.pc .gnb>ul>li:hover>a,
	nav.pc .gnb>ul>li.on>a	{color:#ff9d02}
	nav.pc .gnb>ul>li>ul {position:absolute; left:0; top:70px; padding-top:30px;}
	nav.pc .gnb>ul>li>ul>li {margin-bottom:5px;}
	nav.pc .gnb>ul>li>ul>li:last-child {margin-bottom:0}
	nav.pc .gnb>ul>li>ul>li a {position:relative; display:inline-block; font-weight:300; border-bottom:1px solid transparent; }
	nav.pc .gnb>ul>li>ul>li a:hover,
	nav.pc .gnb>ul>li>ul>li.on a {color:#ff9d02; border-bottom-color:#ff9d02;}
	nav.pc .gnb>ul>li>ul>li a:hover:before,
	nav.pc .gnb>ul>li>ul>li.on a:before {content:''; display:block; width:3px; height:3px; background:#009476; position:absolute; left:-8px; top:11px;}
	/* nav.pc .gnb>ul>li:nth-child(5) {padding-right:0 !important} */
	nav.pc .gnb>ul>li.mobile {display:none;}

	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%;}
	nav.pc .navbg .dep1 {height:70px; background:#fff;}
	nav.pc .navbg .dep2 {background:#fff;}


	.headerH.pc {height:160px;}


	/* lnb */
	.lnb {height:370px; position:relative;}
	.lnb .cover {position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.15);}
	.lnb-wrap {display:table; width:100%; height:100%; position:relative; text-align:center;}
	.lnb-text {display:table-cell; padding-bottom:34px; width:100%; vertical-align:middle; color:#fff; font-family:'paybooc';}
	.lnb-text h2 {font-size:24px; font-weight:700;}
	.lnb-text h2 span {padding:22px 0 15px; font-size:60px; font-weight:900; display:block;}
	.lnb-text p {font-size:18px; font-weight:500;}

	.lnb-menu {z-index:999; width:1400px; max-width:100%; position:absolute; left:50%; top:calc(100% - 80px); transform:translateX(-50%); background:#fff; border-radius:6px;}
	.lnb-menu>ul {}
	.lnb-menu>ul>li {float:left; border-right:1px solid #e5e5e5;}
	.lnb-menu>ul>li>a {}
	.lnb-menu>ul>li.home {}
	.lnb-menu>ul>li.home a {display:block; padding:0 35px 0 70px; font-size:14px; color:#000; background:url(../images/common/i-lnbHome.png)30px 50% no-repeat; line-height:60px; font-weight:400;}
	.lnb-menu>ul>li.menu {position:relative;}
	.lnb-menu>ul>li.menu>a {padding:0 40px 0 20px; display:block; line-height:60px; background:url(../images/common/lnb-arrow.png)right 20px center no-repeat; color:#000; font-weight:400; font-size:18px; color:#000;}
	.lnb-menu>ul>li.menu ul {display:none; width:100%; position:absolute; left:0; top:60px; background:#fff; box-shadow:0 5px 10px rgba(0,0,0,.2);}
	.lnb-menu>ul>li.menu ul li {}
	.lnb-menu>ul>li.menu ul li+li {border-top:1px solid #e5e5e5;}
	.lnb-menu>ul>li.menu ul li a {display:block; padding:0 20px; line-height:44px;}
	.lnb-menu>ul>li.menu ul li a:hover {background:#f9f9f9; color:#ff9d02;}
	.lnb-menu>ul>li.menu:hover ul {display:block;}
	.lnb-menu>ul>li.dep-1 {width:212px;}
	.lnb-menu>ul>li.dep-2 {width:255px;}
	.lnb-menu>ul>li.dep-2>a {color:#ff9d02;}
	.lnb-menu>ul>li.gotop {float:right; border:0;}
	.lnb-menu>ul>li.gotop a {display:block; width:80px; height:60px; background:url(../images/common/i-gotop)center no-repeat;}
	.lnb-menu.fixOn {position:fixed; top:5px; box-shadow:0 0 10px rgba(0,0,0,.2);}

	.subTitle {padding-top:90px;}
	.subTitle-text {float:left;}
	.subTitle-text>* {float:left;}
	.subTitle-text h3 {font-size:36px; font-weight:900; color:#000; padding-right:20px;}
	.subTitle-text p {position:relative; padding-top:15px;}
	.subTitle-text p:before {content:''; display:block; width:20px; height:3px; position:absolute; left:0; top:0; background:#8dcdaa;}
	.subTitle-navi {float:right;}
	.subTitle-navi li {float:left; font-size:14px; color:#999; padding-left:27px; position:relative; line-height:35px;}
	.subTitle-navi li+li {background:url(../images/common/tit-arrow.png)10px center no-repeat;}
	.subTitle-navi li:first-child { padding-left:45px;}
	.subTitle-navi li:first-child:before {content:''; display:block; width:35px; height:35px; background:#dddddd url(../images/common/i-titHome.svg)center /16px no-repeat; position:absolute; left:0; top:0; border-radius:50%;}


	[class*="-wrap"] {max-width:1400px; margin:0 auto;}
	.contents {padding:85px 0 100px;}
	.contents-wrap {}

	/* ***** footer ***** */
	.footer-banner {background:#1f3349}
	.footer-banner-wrap {position:relative; border-style:solid; border-color:rgba(255,255,255,.2); border-width:0 1px 0 1px;}
	.footer-banner-btn li {float:left; padding-left:30px;}
	.footer-banner-btn li a {display:block; color:#fff; font-size:14px; line-height:60px;}

	.footer-banner-site {position:absolute; right:0; top:0; display:inline-block; height:100%; border-left:1px solid rgba(255,255,255,.2);}
	.footer-banner-site>a {display:block; width:330px; padding:0 50px 0 20px; line-height:60px; color:#fff; background:url(../images/common/siteArrow.png)right 20px center no-repeat;font-size:14px;}
	.footer-banner-site .footer-site-list {display:none; position:absolute; left:0; bottom:60px; width:100%; z-index:999999; box-shadow:0 0 10px rgba(0,0,0,.05);}
	.footer-banner-site .footer-site-list li {width:100%;border-bottom:1px solid #e5e5e5}
	.footer-banner-site .footer-site-list li a {display:block; background:#fff; font-size:15px; padding:12px 20px; transition:all .3s}
	.footer-banner-site .footer-site-list li a:hover {color:#ff9d02; background:#f9f9f9;}
	.footer-banner-site:hover .footer-site-list {display:block;}

	footer {padding:50px 0 30px;}
	footer .footer-wrap {position:relative;}
	footer .footer-wrap>div {float:left;}
	footer .footer-logo {padding-right:35px;}
	footer .footer-logo h1 {margin-bottom:15px;}
	footer .footer-logo h1 img {height:40px;}

	footer .footer-inner {line-height:1;}
	footer .footer-inner address span {display:inline-block; color:#666; padding-right:15px; font-size:14px; line-height:1.8;}
	footer .footer-inner p.tit {padding-bottom:9px; color:#000; font-weight:400;}
	footer .footer-inner p.copy {color:#666; font-size:14px; font-weight:300; line-height:1.8;}

	footer .footer-sns {position:absolute; right:0; top:0;}
	footer .footer-sns li {float:left;margin-left:5px;}
	footer .footer-sns li a {display:block;}


	/* 이메일무단수집거부 */
	#layerPop {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, .5); z-index:10000000}
	#layerPop .wrap {position:absolute; left:0; top:0; display:table; width:100%; height:100%; text-align:center;}
	#layerPop .wrap .inner {display:table-cell; vertical-align:middle;}
	#layerPop .wrap .inner div {position:relative; display:inline-block; border-radius:10px; overflow:hidden; background:#fff}
	#layerPop .wrap .inner div h2 {display:block; width:100%; height:55px; padding:0 30px; line-height:55px; font-size:22px; font-weight:500; text-align:left; border-bottom:1px solid #ddd; background:#f9f9f9;}
	#layerPop .wrap .inner div a {position:absolute; right:0; top:0; width:55px; height:55px; border-left:1px solid #ddd; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../images/common/i-close.png) no-repeat center;}
	#layerPop .wrap .inner div p {padding:50px 30px; color:#000;}





}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

	.pc {display:none !important;}
	.mobile {display:block;}
	nav.mobile {visibility:visibility;}
	body {font-size:15px;}

	header {width:100%; height:55px;}
	header .head-wrap {z-index:100; position:absolute; left:0; top:0; width:100%; height:55px; padding:0 20px; overflow:hidden; line-height:1; background-color:#fff; box-shadow:0 5px 5px rgba(0,0,0,.1);}
	body.mainType header .head {top:50px;}
	header .head-wrap a.mobile {position:absolute; top:0; background-size:17px; width:55px; height:55px; background-repeat:no-repeat; background-position:center; cursor:pointer;}
	header .head-wrap a.gnbLogin {
		border-left:1px solid #efefef;
		background:url(../images/common/i-login.png) no-repeat center;
		right:55px;
		background-size:17px;
	}

	header .head-wrap a.gnbLogout {
		border-left:1px solid #efefef;
		background:url(../images/common/i-loginout.png) no-repeat center;
		right:55px;
		background-size:17px;
	}

	header .head-wrap a.left {
		border-left:1px solid #efefef;
		right:0;
		background:url(../images/common/i-menu.png) no-repeat center;
		background-size:17px;
	}

	header .head-wrap .gnbView {background-image:url(../images/common/icon_allmenu.png);}
	header .head-wrap .gnbView img {height:15px;}
	header .head-wrap .search {background-image:url(../images/common/i_search_total.png); right:45px !important;}
	header .head-wrap .login {background-image:url(../images/common/icon_login.png);}
	header .head-wrap .logout {background-image:url(../images/common/icon_login.png);}
	header .head-wrap h1 {display:block;}
	header .head-wrap h1 a {display:inline-block; padding-top:12px;}
	header .head-wrap h1 a img {height:32px;}


	/*gnb*/
	nav.pc {display:none;}
	nav.mobile {z-index:9999; position:fixed; top:0; width:80%; height:100%; overflow:hidden; box-shadow:0 !important; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px; background-color:#fff; color:#666; border-bottom:1px solid #efefef; padding-bottom:5px;}
	nav.mobile .closeWrap:after {content:''; display:block; width:100%; height:5px; background:#efefef; position:absolute; left:0; bottom:0; }
	nav.mobile .closeWrap .gnbClose {display:block; width:55px; height:55px; background:url(../images/common/i-close.png) no-repeat center; background-size:17px; border-left:1px solid #efefef; float:right; text-indent:100%; white-space:nowrap; overflow:hidden;}
	nav.mobile .closeWrap aside a {position:relative; float:left; display:inline-block; margin:0 3vw; color:#666; font-size:12px; letter-spacing:0; height:55px; line-height:55px; font-weight:400;}
	nav.mobile .closeWrap aside a.second {margin-left:0;}
	nav.mobile .closeWrap aside a.on {color:#00a950;}
	nav.mobile .closeWrap aside a.second:after {content:''; display:none; width:100%; height:1px; background:#00a950; position:absolute; left:0; bottom:18px;}
	nav.mobile .closeWrap aside a.on:after {display:block;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	nav.mobile .gnb {position:relative; width:100%; height:100%; padding:0; overflow-y:auto; text-align:left !important;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:13px 20px; font-size:16px; font-weight:400; color:#000; border-bottom:1px solid #e4e4e4; background:#fff;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {
		display:block; padding:12px 20px 12px 40px; font-size:16px; color:#000; border-bottom:1px solid #e5e5e5;
		position:relative; background:rgba(255,157,2,.05);
	}
	nav.mobile .gnb>ul>li>ul>li a:before {
		position:absolute; top:23px; left:25px;
		display:block; content:""; border-radius:50%;
		width:4px; height:4px; background:transparent;
	}

	nav.mobile .gnb>ul>li>a:hover {}
	nav.mobile .gnb>ul>li.on>a {color:#fff; background: #ff9d02;}
	nav.mobile .gnb>ul>li>ul>li a:hover:before,
	nav.mobile .gnb>ul>li>ul>li.on a:before {background:#009476;}
	nav.mobile .gnb>ul>li>ul>li a:hover,
	nav.mobile .gnb>ul>li>ul>li.on a {color:#009476;}

	/* lnb */
	.lnb {height:250px; position:relative;}
	.lnb .cover {position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.15);}
	.lnb-wrap {display:table; width:100%; height:100%; position:relative; text-align:center;}
	.lnb-text {display:table-cell; width:100%; vertical-align:middle; color:#fff; font-family:'paybooc';}
	.lnb-text h2 {font-size:21px; font-weight:700;}
	.lnb-text h2 span {padding:20px 0 12px; font-size:42px; font-weight:900; display:block;}
	.lnb-text p {font-size:17px; font-weight:500;}

	.subTitle {}
	.subTitle-wrap {position:relative; background:#fff; border-bottom:1px solid #ff9d02;}
	.subTitle-text {}
	.subTitle-text h3 {padding:18px 0; font-size:27px; font-weight:700; color:#ff9d02; text-align:center;}



	.contents {padding:70px 0 85px;}
	[class*="-wrap"] {padding:0 20px;}


	/* ***** footer ***** */
	.footer-banner {background:#1f3349}
	.footer-banner-wrap { padding:0;position:relative;}
	.footer-banner-btn li {float:left; padding-left:30px;}
	.footer-banner-btn li a {display:block; color:#fff; font-size:14px; line-height:60px;}

	.footer-banner-site {position:absolute; right:0; top:0; display:inline-block; height:100%; border-left:1px solid rgba(255,255,255,.2);}
	.footer-banner-site>a {display:block; width:330px; padding:0 50px 0 20px; line-height:60px; color:#fff; background:url(../images/common/siteArrow.png)right 20px center no-repeat;font-size:14px;}
	.footer-banner-site .footer-site-list {display:none; position:absolute; left:0; bottom:60px; width:100%; z-index:999999; box-shadow:0 0 10px rgba(0,0,0,.05);}
	.footer-banner-site .footer-site-list li {width:100%;border-bottom:1px solid #e5e5e5}
	.footer-banner-site .footer-site-list li a {display:block; background:#fff; font-size:15px; padding:12px 20px; transition:all .3s}
	.footer-banner-site .footer-site-list li a:hover {color:#ff9d02; background:#f9f9f9;}
	.footer-banner-site:hover .footer-site-list {display:block;}
	

	footer {padding:40px 0 25px; text-align:center;}
	footer .footer-wrap {position:relative;}
	footer .footer-logo {padding-right:35px;}
	footer .footer-logo h1 {margin-bottom:15px;}
	footer .footer-logo h1 img {height:40px;}

	footer .footer-inner {line-height:1;}
	footer .footer-inner address span {display:inline-block; color:#666; padding-right:15px; font-size:14px; line-height:1.8;}
	footer .footer-inner p.tit {padding-bottom:9px; color:#000; font-weight:400;}
	footer .footer-inner p.copy {color:#666; font-size:14px; font-weight:300; line-height:1.8;}

	footer .footer-sns {margin-top:15px;}
	footer .footer-sns li {display:inline-block; margin:0 2px;}
	footer .footer-sns li a {display:block;}




	/* 이메일무단수집거부 */
	#layerPop {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, .5); z-index:10000000}
	#layerPop .wrap {position:absolute; left:0; top:0; display:table; width:100%; height:100%; text-align:center;}
	#layerPop .wrap .inner {display:table-cell; vertical-align:middle;}
	#layerPop .wrap .inner div {position:relative; display:inline-block; border-radius:10px; overflow:hidden; background:#fff}
	#layerPop .wrap .inner div h2 {display:block; width:100%; height:55px; padding:0 30px; line-height:55px; font-size:22px; font-weight:500; text-align:left; border-bottom:1px solid #ddd; background:#f9f9f9;}
	#layerPop .wrap .inner div a {position:absolute; right:0; top:0; width:55px; height:55px; border-left:1px solid #ddd; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../images/common/i-close.png) no-repeat center;}
	#layerPop .wrap .inner div p {padding:50px 30px; color:#000;}






}





/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width:767px) {

	/* lnb */
	.lnb {height:180px;}
	.lnb-text h2 span {padding:12px 0 8px; font-size:32px;}
	.lnb-text p {font-size:16px;}
	
	.subTitle-wrap {}
	.subTitle-text h3 {padding:14px 0; font-size:22px;}

	.contents {padding:40px 0 55px;}
	
	/* ***** footer ***** */
	.footer-banner-btn {}
	.footer-banner-btn li {padding-left:0; width:50%; text-align:center;}
	.footer-banner-btn li:nth-child(2n) {border-left:1px solid rgba(255,255,255,.2);}
	.footer-banner-btn li:nth-child(2n)~li {border-top:1px solid rgba(255,255,255,.2);}
	.footer-banner-btn li a {line-height:50px;}

	.footer-banner-site {position:static; display:block; border:0; border-top:1px solid rgba(255,255,255,.2);}
	.footer-banner-site>a {width:100%;line-height:50px;}
	.footer-banner-site .footer-site-list {bottom:50px;}
	.footer-banner-site .footer-site-list li a {padding:8px 20px;}


	footer {padding:30px 0 20px;}
	footer .footer-logo h1 {margin-bottom:10px;}
	footer .footer-logo h1 img {height:30px;}
	footer .footer-inner p.tit {padding-bottom:5px;}
	footer .footer-inner address br {display:none;}
	footer .footer-inner address span {line-height:1.6;}
	footer .footer-sns {margin-top:10px;}




	/* 이메일무단수집거부 */
	#layerPop .wrap .inner {padding:0 20px;}
	#layerPop .wrap .inner div h2 {display:block; width:100%; height:55px; padding:0 20px; line-height:55px; font-size:18px;}
	#layerPop .wrap .inner div p {padding:30px; color:#000;}
	#layerPop .wrap .inner div p br {display:none;}







}