/* ************************ 공용 ************************ */
html,body {word-break: keep-all; font-family:'NEXON'; width:100%; position:static; font-size:16px; font-weight:400; color:#333;}
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:#00aa90;
    --blue:#253551;
	--blue2: #0097d7;
	--line:#e7e9ec;
}


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

	/*헤더*/
	header {z-index:900; position:fixed; width:300px; height:100%; top:0; padding-left: 20px; background-color:#fff; box-shadow:2px 0px 7px rgba(0,0,0,.1) !important;}
	header:before {z-index: 999; position: absolute; top: 0; left: 0px; display: inline-block; width: 20px; height: 100%; background: linear-gradient( to bottom, #8cc463 10%, #5ebb72 15%, #00aa90 95%, #00aa90); content: "" !important;}
    header .head .wrap {text-align: center;}
    header .head .wrap .imgWrap {padding: 40px 0;}
    header .head .wrap .imgWrap img {height: 50px;}
    header .head .wrap h1 {font-family: 'S-CoreDream-6Bold'; font-size: 19px; color: var(--base); padding-bottom: 5px; letter-spacing: -1px;}
	header .head .wrap p {color: #858d91; font-family: 'S-CoreDream-4Regular'; font-size: 11px;}
    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;}
	nav.pc .gnb .gnb_home {line-height: 1; display: inline-block; width: 100%; text-align: center; letter-spacing: 1px; padding: 18px 0; margin-top: 80px; color: #000;}
	nav.pc .gnb a.on {color: var(--base);}
	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; letter-spacing: 1px; text-align:center; padding:18px 0; color: #000;}
	nav.pc .gnb>ul>li.on>a {color: var(--base);}
    nav.pc .gnb>ul>li>ul {
		position:fixed; left:300px; 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;
	}
	nav.pc .gnb>ul>li.on>ul {width:200px; opacity:1;}
    nav.pc .gnb>ul>li:after {content: ''; position: absolute; right: 0px; top: 50%; width: 0px; height: 1px; background: var(--base); transition: .3s ease;}
    nav.pc .gnb>ul>li.on:after {width: 50px; transition: .5s;}

    nav.pc .gnb>ul>li .depth2_company {padding-top: 328px;}
    nav.pc .gnb>ul>li .depth2_product {padding-top: 380px;}
    nav.pc .gnb>ul>li .depth2_business {padding-top: 430px;}
    nav.pc .gnb>ul>li .depth2_support {padding-top: 483px;}
    nav.pc .gnb>ul>li .depth2_commu {padding-top: 537px;}
    
    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: 60px; opacity:0; padding:10px 0px 2px 0px; color:#fff; font-size:14px;}
    nav.pc .gnb>ul>li.on>ul>li a {opacity:1; margin-left: 40px;}
    nav.pc .gnb>ul>li>ul>li a:before {position: absolute; left:-10px; top: 18px; display: inline-block; width: 3px; height: 3px; background: #fff; content: "";}
	nav.pc .gnb>ul>li>ul>li:last-child {margin-bottom:20px;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:var(--base); border-bottom: 1px solid var(--base);}
	nav.pc .gnb>ul>li>ul>li.on a {color: var(--base); border-bottom: 1px solid var(--base);}
	
	.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: 15px; left: 0; width: 100%; display:block; height:40px;}
	header aside>.familySite {position:relative; display: inline-block; width:100%; font-size:12px;}
	header aside>.familySite>a {color: #000;
		position:relative; display:block; height:100%; padding:20px; padding-left: 40px;
		border-top:1px solid #e7e7e7; background:#fff url(../images/common/arrow_down2.png) no-repeat calc(100% - 20px) 50%;
	}
	header aside>.familySite>ul {position:absolute; display:none; width:100%; bottom:calc(100% - 11px); left:0; border:1px solid #eee; background-color:#fff; box-shadow:0 -1px 3px rgba(0,0,0,.05);}
	header aside>.familySite>ul.on {display:block;}
	header aside>.familySite>ul li+li {border-top:1px solid #eee;}
	header aside>.familySite>ul li a {display:block; padding:20px; padding-left: 40px; line-height:1.3;}
	
	/*footer*/
	footer {padding:30px 100px; background-color:var(--blue); font-size:14px; line-height:1.2; color:rgba(255,255,255,.6);}
	footer a {color:#fff !important;}
	footer address {margin:0;}
	footer address span+span {margin-left:20px;}
	footer .copy {margin-top:10px; font-size:12px;}

	/*서브페이지*/
    .contents {position: relative; padding-left: 300px; /*min-width: 1400px;*/}
    .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(--base) !important; border-bottom: 1px solid var(--base); padding-bottom: 5px;}
    
    .sub-tit-wrap {width: 100%; padding: 30px 0; background: var(--base) url(../images/common/lnb-bg.jpg) no-repeat center/cover;}
    .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/i-menu.png) 50% 50% no-repeat; background-size:35%; border-radius:0;}
    header .head .wrap a {padding-left:20px; display: flex; align-items: center; gap: 10px;}
    header .head .wrap h1 {font-family: 'S-CoreDream-6Bold'; font-size: 16px; color: #000; letter-spacing: -1px; padding-top: 5px;}
    /*header .head .wrap h1:before {position:absolute; bottom:0; left:0; display:inline-block; content:""; width:100%; height:5px; background: linear-gradient( to right, #8cc463 10%, #5ebb72 15%, #00aa90 95%, #00aa90);}*/
    header .head .wrap p {display: none;}
    header .head .wrap .imgWrap {height: 1.2rem;}
	header .head .wrap .imgWrap img {height: 100%;}
    header .familySite {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_gnbclose.png) 50% 50% no-repeat; 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: #5ebb72;}
	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(--base);}


	/*footer*/
	footer {padding:25px !important; background-color:#222; color:#999; text-align:left; overflow:hidden;}
	footer ul li {margin-bottom:15px;}
	footer .wrap {position:relative; width:100%; padding:0;}
	footer .wrap>* {padding:0; margin:0;}
	footer address {font-size:14px;}
	footer address span {display:inline-block; padding-right:10px;}



	/* 서브페이지 */
	.contents-wrap {padding: 40px;}
	.sub-top {display: none;}
    .sub-tit {width: 100%; color: #fff; text-align: center; background: var(--base) url(../images/common/lnb-bg.jpg) no-repeat center/cover; padding:20px 40px;}

}


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

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