/* ************************ 공용 ************************ */
html,body {word-break: keep-all; font-family:'NEXON'; width:100%; position:static; font-size:16px; font-weight:400; color:#666;}
section {position:relative; width:100%;}
section.contents_box {position:relative; padding:0; padding-left:220px; height:100%; text-align:center; background-color:#fff; box-shadow:2px 0px 7px rgba(0,0,0,.5) !important;}
.contents_box .top {
	z-index:-1;  width:100%; height:200px; 
	background-position:50%;
	background-size:cover;
	background-repeat:no-repeat;
	background-color:#000;
}

section.contents_box .contents {display:inline-block; max-width:1200px; width:100%; padding:0; font-weight:normal; color:#666; line-height:1.8; text-align:left; margin-top:140px;}
section.contents_box .contents>div {padding:0;}
section.contents_box .contents img {max-width:100%; height:auto;}
#gotop {background:url(../images/common/arrow_up.png) no-repeat 50%;}

:root{
	--base:#0f489a;
    --blue:#0b499c;
	--blue2:#0f489a;
	--line:#e7e9ec;
	--green:#44a879;
	--green2:#50f0b3;
	--text:rotate(.03deg);
}


/* ************************ 데스크탑 (992~) ************************ */
@media (min-width: 992px){
	.mobile {display:none !important;}

	/*헤더*/
	header {z-index:900; position:fixed; width:270px; height:100%; top:0; background-color:#fff; box-shadow:2px 0px 7px rgba(0,0,0,.1) !important;}
    header .head .wrap {text-align:center;}
    header .head .wrap .imgWrap {padding:50px 0 20px;}
    header .head .wrap .imgWrap img {}
    header .head .wrap h1 {font-family:'NanumSquare'; font-size:14px; font-weight:800; color:#000; padding-bottom:5px; letter-spacing:-0.025em; transform:rotate(0.03deg);}
	header .head .wrap p {font-family:'NanumSquare'; font-size:10px; font-weight:800; color:#666; letter-spacing:-0.025em; transform:rotate(0.03deg);}
    header .mCSB_outside {margin-left: 20px; height: 100%;}

    header .mCSB_container {height: 100% !important;}

	/*gnb*/
	nav.mobile {visibility:hidden}
	nav.pc {}
	nav.pc .wrap {position:relative; display:block; max-width:1200px; margin:0 auto;}
	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%;}
	nav.pc .navbg .dep1 {height:60px; background-color:#fff;}
	nav.pc .navbg .dep2 {height:100%; background-color:rgba(0,0,0,.85);}
	nav.pc .gnb {position:relative; display:block; max-width:1200px; font-size: 16px; font-weight:500; font-size:18px; font-weight:500;}
	nav.pc .gnb .gnb_home {line-height: 1; display:inline-block; width: 100%; text-align: center; padding: 18px 0; margin-top:45px; color:#000; transform:rotate(0.03deg);}
	nav.pc .gnb a.on {color:var(--green);}
	nav.pc .gnb a:hover,nav .navWrap a:focus {color:#00aa90;}
	nav.pc .gnb>ul {margin:0 !important; padding-left: 0;}
	nav.pc .gnb>ul>li {z-index:0; position:relative; display:flex; justify-content:center; padding:0 !important;}
	nav.pc .gnb>ul>li.on {z-index:10;}
	nav.pc .gnb>ul>li>a {line-height: 1; display:inline; text-align:center; padding:15px 0; color:#000; transform:rotate(0.03deg);}
	nav.pc .gnb>ul>li.on>a {color:var(--green);}
    nav.pc .gnb>ul>li>ul {
		position:fixed; left:270px; top:0; width:0px; height:100%; overflow:hidden; background:var(--blue) url(../images/common/gnb-bg.png) no-repeat top left;
		opacity:0; transition:all 0.5s ease; box-shadow:20px 0px 10px rgba(0,0,0,.1);
	}
	nav.pc .gnb>ul>li.on>ul {width:294px; opacity:1;}

    nav.pc .gnb>ul>li .depth2_company {padding-top:328px;}
    nav.pc .gnb>ul>li .depth2_product {padding-top:375px;}
    nav.pc .gnb>ul>li .depth2_business {padding-top:423px;}
    nav.pc .gnb>ul>li .depth2_support {padding-top:472px;}
    nav.pc .gnb>ul>li .depth2_commu {padding-top:520px;}
    
    nav.pc .gnb>ul>li>ul>li a {position:relative; display:inline-block; letter-spacing:1px; margin-bottom:7px; border-bottom:1px solid transparent; margin-left:50px; opacity:0; padding:10px 0px 2px 0px; color:#fff; font-size:16px; font-weight:400; transition:.2s;}
    nav.pc .gnb>ul>li.on>ul>li a {opacity:1;}
    nav.pc .gnb>ul>li>ul>li a:before {position:absolute; display:block; left:-20px; top:18px; opacity:0; width:10px; height:2px; background:var(--green2); content:""; transition:.2s;}
	nav.pc .gnb>ul>li>ul>li.on a:before {position:absolute; left:-20px; top:18px; display:inline-block; width:10px; height:2px; background:var(--green2); content:"";}
	nav.pc .gnb>ul>li>ul>li:last-child {margin-bottom:20px;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:var(--green2);}
	nav.pc .gnb>ul>li>ul>li.on a {color:var(--green2);}
	nav.pc .gnb>ul>li>ul>li a:hover:before {opacity:1;}
	
	.btnWrap {position:fixed; bottom:20px; left:20px; width:180px;}
	.btnWrap>ul>li {width:100%; margin-bottom:3px; border:1px solid #999; border-radius:2px; text-align:center;}
	.btnWrap>ul>li a {display:block; padding:7px 0; color:#999; font-size:12px;}
	.btnWrap>ul>li:hover {background:#999;}
	.btnWrap>ul>li:hover a {color:#000;}


    header aside {position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:block;}
	header aside ul {}
	header aside ul li+li {margin-top:20px;}
	header aside ul li a {display:block;}
	
	/*footer*/
	footer {display:flex !important; padding:30px 100px; border-top:5px solid var(--blue2); background-color: #fff; font-size:14px; font-weight:400; line-height:1; color:#666; justify-content:space-between;}
	footer strong {font-size:16px; font-weight:800; color:#000; letter-spacing:-0.08em; display:block; padding-bottom:10px; transform:rotate(0.03deg);}
	footer a {color:#666;}
	footer address span {display:inline-block;}
	footer address span+span {margin-left:20px;}
	footer address .email {padding-top:10px;}
	footer address .copy {margin-top:12px;}
	footer .goTop {border:1px solid #dbdce7; border-radius:3rem; padding:12px 25px 12px 38px; color:var(--blue); font-size:10px; font-weight:500; height:35px; background:url(../images/common/i-top.png)no-repeat 25px center;}

	/*서브페이지*/
    .contents {position:relative; padding-left:270px;}
    .contents-wrap {position: relative; max-width: 1200px; width: 100%; margin: 0 auto; padding: 100px 0;}
	
    .sub-top-wrap {position:sticky; z-index:800; top:-30px; background:#fff; border-bottom: 1px solid #eee; box-shadow:2px 0px 7px rgba(0,0,0,.1) !important;}
	.sub-top {width: 100%; max-width: 1200px; margin: 0 auto; margin-bottom: 0; display: flex; height: 100px; align-items: flex-end; padding-bottom: 25px; gap: 50px;}
	.sub-top li a {color: #000; font-size: 14px; letter-spacing: 1px;}
	.sub-top li:first-child a {font-weight: bold; font-size: 16px; letter-spacing: 0;}
	.sub-top li.on a {color: var(--blue) !important; border-bottom: 1px solid var(--blue); padding-bottom:5px;}
    
    .sub-tit-wrap {width:100%; padding:30px 0; background:linear-gradient(90deg, rgba(11,72,156,1) 0%, rgba(62,182,162,1) 100%);}
    .sub-tit {width:100%; max-width:1200px; margin:0 auto; color:#fff;}
	.sub-tit {width:100%; height:100%; font-size:13px; display:flex; align-items:center; justify-content:space-between;}
	.sub-tit h3 {font-size:36px; font-weight:bold;}
	.sub-tit .location span {padding:0 15px;}
    .sub-tit .location span:before {display:inline-block; width:6px; height:10px; padding-right:20px; content:""; background:url(../images/common/lnb-arrow.png) no-repeat;}
    .sub-tit .location span:after {display:inline-block; width:6px; height:10px; padding-left: 22px; content:""; background:url(../images/common/lnb-arrow.png) no-repeat right;}

	/*컨텐츠*/
	section.contents_box {position:relative; padding:0 0 100px 220px;}
	section.contents_box .contents {position:relative;}
	.contents_box .top>div {max-width:1200px; margin:0 auto; position:relative;}
	section.contents_box .top>div h3 {padding-top:80px; font-size:36px; font-weight:400; color:#fff; line-height:1.6; margin:0 !important;}
	section.contents_box .top>div .location {font-size:12px; color:#fff; position:absolute; right:0; top:25px; line-height:1; margin:0;}
	section.contents_box .top>div .location span {position:relative; padding:0 20px;}
	section.contents_box .top>div .location span:before {position:absolute; top:8px; left:8px; display:inline-block; content:""; width:3px; height:3px; border-radius:100px; background:#fff;}
	section.contents_box .top>div .location span:after {position:absolute; top:8px; right:8px; display:inline-block; content:""; width:3px; height:3px; border-radius:100px; background:#fff;}
}


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

	section.contents_box .contents {margin-top:0;}
	.pc {display:none !important;}

	/*헤더*/
	header {position:relative; left:0; top:0; height:70px;}
	header .head {position:relative; display:flex; align-items:center; width:100%; height:70px; padding-bottom:5px;}
	header .head .gnbView {position:absolute; display:block; width:60px; height:70px; right:0; top:0; background:url(../images/common/icon_gnbView.png); background-size:22px; background-repeat:no-repeat; background-position:center; border-radius:0;}
    header .head .wrap a {padding-left:20px; display:flex; align-items:center; gap:6px;}
    header .head .wrap h1 {font-size:16px; font-weight:700; color:#000; letter-spacing:-1px; transform:rotate(0.03deg);}
    header .head .wrap p {display:none;}
    header .head .wrap .imgWrap {height:1.6rem;}
	header .head .wrap .imgWrap img {height:100%;}
    header aside ul li {display:none;}

	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:80%; height:100%; overflow:hidden; background:#fff; box-shadow:5px 0px 10px rgba(0,0,0,.7) !important;}
	nav.mobile .closeWrap {position:relative; height:70px; background: #fff; color:#000; border-bottom: 4px solid #eee;}
	nav.mobile .closeWrap .gnbClose {display:block; width:70px; height:70px; background:url(../images/common/icon_close.png) no-repeat center; background-size:17px; border-left: 1px solid #efefef;}
	nav.mobile .closeWrap>a {display:inline-block; float:right; height:50px; color:#fff; font-size:11px; line-height:1;}
	nav.mobile .closeWrap>a.language {padding:18px 10px 0 10px; color:#fff; border-right:1px solid rgba(0,0,0,.2)}
	nav.mobile .closeWrap>a.home {float:right; padding:18px 20px 0 20px; border-left:1px solid rgba(255,255,255,.1)}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}
	nav.mobile .closeWrap aside {position:absolute; top:50%; transform:translateY(-50%); margin-left:20px; font-weight:500;}
	nav.mobile .closeWrap aside a {color:#666; font-size: 14px;}

	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb .home {display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333;}
	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto;}
    nav.mobile .gnb .gnb_home {display: none;}
    nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:18px 20px; color:#000; border-bottom:1px solid #ddd; font-size:16px; background:#fff; font-weight:400;}

	nav.mobile .gnb>ul>li.on>a {color:#fff; background:var(--green);}
	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 35px; font-size:14px; color:#666; border-bottom:1px solid #eee; background:#f9f9f9; font-weight:400;}
	
	nav.mobile .gnb>ul>li>ul>li.on a {color:var(--dark);}
	
	nav.mobile .gnb>ul>li>ul>li a:before {display:block; content:""; width:3px; height:3px; background:var(--dark); border-radius:50%; position:absolute; top:22px; left:22px;}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0; border-bottom: 6px solid #eee;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:var(--green);}


	/*footer*/
	footer {padding:25px; border-top:5px solid var(--blue2); text-align:left; font-size:14px; font-weight:400; line-height:1.4; color:#666;}
	footer strong {font-size:16px; font-weight:800; color:#000; letter-spacing:-0.08em; display:block; padding-bottom:5px; transform:rotate(0.03deg);}
	footer address {font-size:14px;}
	footer address span {display:inline-block; padding-right:10px;}
	footer a {color:#666;}
	footer .goTop {display:block; border:1px solid #dbdce7; border-radius:3rem; padding:12px; color:var(--blue); font-size:10px; font-weight:500; height:35px; background:url(../images/common/i-top.png)no-repeat 25px center; text-align:center; margin-top:20px;}
	

	/* 서브페이지 */
	.contents-wrap {padding:40px;}
	.sub-top {display:none;}
    .sub-tit {width:100%; color:#fff; text-align:center; background:linear-gradient(90deg, rgba(11,72,156,1) 0%, rgba(62,182,162,1) 100%); padding:20px 40px;}
	.sub-tit h3 {font-size:24px; font-weight:bold;}
	.sub-tit .location {margin-top:10px;}
	.sub-tit .location span {font-size:14px; padding:0 10px;}
    .sub-tit .location span:before {display:inline-block; width:6px; height:10px; padding-right:20px; content:""; background:url(../images/common/lnb-arrow.png) no-repeat;}
    .sub-tit .location span:after {display:inline-block; width:6px; height:10px; padding-left: 22px; content:""; background:url(../images/common/lnb-arrow.png) no-repeat right;}

}


/* ************************ 모바일 이하(~767) ************************ */
@media (max-width: 767px) {

	/* 서브페이지 */
	.contents-wrap {padding:20px;}
	
	
}