@charset "utf-8";

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

/* ************************ 공용 ************************ */
a {text-decoration:none !important;  cursor:pointer; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important;}
a:link {text-decoration:none; color:#555;}
a:visited {text-decoration:none; color:#555;}
a:hover {text-decoration:none; color:#000;}
a:active {text-decoration:none; color:#555;}
a,img {transition:all .1s linear;	-webkit-transition:all .1s linear; -moz-transition:all .1s linear;}



body {
	position:static; width:100%; min-width:320px;
	font-family:"NotoSansKR","arial"; font-size:16px; font-weight:400; letter-spacing:-0.7px; line-height:1.6; color:#000; word-break:break-word;
}


.arial {font-family:"arial"}
.clear:after {clear:both; content:''; display:block;}

/*2020-11-27 parkjd 게시판에 라디오버튼 안나와서 주석처리
input {
	box-shadow:none; 
	-webkit-appearance: none;
    -webkit-border-radius: 0;
}
*/
textarea {
	box-shadow:none; 
	-webkit-appearance: none;
    -webkit-border-radius: 0;
}


body.eng {letter-spacing:0}
body.chi {letter-spacing:1px}
body.jap {letter-spacing:1px}


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

	html,body {}
	.mobile {display:none !important;}

	/*헤더*/
	header {z-index:9999999; position:absolute; top:0; width:100%; height:70px; border-bottom:1px solid rgba(255, 255, 255, .2); background-color:rgba(0, 0, 0, .2);
		transition:all .5s ease !important; -webkit-transition:all .5s ease !important; -moz-transition:all .5s ease !important;
	}
	header .inner {position:relative; max-width:1720px;margin:0 auto;}
	header .logo {position:relative; float:left;}
	header .logo a {display:inline-block; margin-top:15px;}


	/*gnb*/
	nav.mobile {visibility:hidden}
	header nav.pc {float:left; padding-left:103px; width:calc(100% - 157px); visibility:hidden; position:relative; height:100%; overflow:visible !important}
	header nav.pc .gnb {position:relative; width:100%; height:100%; text-align:left !important;}
	header nav.pc .gnb a {color:#fff; line-height:1;}
	header nav.pc .gnb>ul {height:100%;}
	header nav.pc .gnb>ul>li {position:relative; float:left; height:100%;}
	header nav.pc .gnb>ul>li>a {position:relative; display:inline-block; width:100%; padding:10px 0; margin:16px 0; font-size:16px; font-weight:500; line-height:1; letter-spacing:-.5px; border:0;}
	header nav.pc .gnb>ul>li.on>a:after {position:absolute; left:0; bottom:0; content:''; display:inline-block; width:100%; height:2px; background:#fff}
	header nav.pc .gnb>ul>li>ul {
		display:none; position:absolute; padding-top:20px; left:0; width:1000px !important;
		transition:all .5s ease !important; -webkit-transition:all .5s ease !important; -moz-transition:all .5s ease !important;
	}

	header nav.pc.eng .gnb>ul>li>ul {width:1200px !important}
	header nav.pc.eng .gnb>ul>li:last-child>ul {width:900px !important}

	header nav.pc .gnb>ul>li>ul.on {display:block;}
	header nav.pc .gnb>ul>li>ul>li {float:left; margin-right:40px;}
	header nav.pc .gnb>ul>li>ul>li a {position:relative;display:inline-block; padding:0; color:#000; font-size:16px;  font-weight:300; letter-spacing:-.5px; line-height:1.6;}
	header nav.pc .gnb>ul>li>ul>li a:hover {color:#3852b7}
	header nav.pc .gnb>ul>li>ul>li a:hover:after {position:absolute; left:0; bottom:0; content:''; display:inline-block; width:100%; height:2px; background:#3852b7}
	header nav.pc .gnb>ul>li>ul>li.on a {color:#3852b7}
	header nav.pc .gnb>ul>li>ul>li.on a:after {position:absolute; left:0; bottom:0; content:''; display:inline-block; width:100%; height:2px; background:#3852b7}
	.depth02-bg {display:none; position:absolute; left:0; top:70px; width:100%; height:60px; background:#fff; z-index:999999}


	/* 사이드 메뉴 */
	header .side {position:absolute; height:70px; right:0; top:0;}
	header .side>ul {height:100%;}
	header .side>ul:after {clear:both; content:''; display:block;}
	header .side>ul>li {position:relative; float:left; display:inline-block; padding:0 30px; border-right:1px solid rgba(255, 255, 255, .2)}
	header .side>ul>li>a {position:relative; display:block; padding:24px 0px; font-size:12px; color:#fff; font-weight:500; transition:all .5s ease !important; -webkit-transition:all .5s ease !important; -moz-transition:all .5s ease !important;}
	
	header .side>ul>li.language>a {padding-right:60px; background:url(../images/common/i-down.png) no-repeat right center;}
	header .side>ul>li.shopping>a {padding-left:30px; background:url(../images/common/i-shopping.png) no-repeat left center;}

	header .side>ul>li ul {position:absolute; left:0; top:70px; width:100%; display:none;}
	header .side>ul>li ul li {background:#fff; width:100%; border-bottom:1px solid #e5e5e5;}
	header .side>ul>li ul li a {display:block; padding:10px 30px; font-size:12px; font-weight:300; color:#000;}


	
	/*footer*/
	footer {position:relative; padding: 20px 0 15px !important; letter-spacing:-0.1px; background:#f9f9f9; }
	footer>div {position:relative; max-width:1720px; margin:0 auto;}
	footer address {display:inline-block;}
	footer address:after {clear:both; content:''; display:block;}
	footer address h2 {float:left;}
	footer address>div {float:left; display:inline-block; padding-left:118px; padding-top:5px;}
	footer address span {margin-right:30px; font-weight:300; color:#666; font-size:14px;}
	footer ul {position:relative; float:right;}
	footer ul li {float:left; margin-left:30px;}
	footer ul li a {display:inline-block;}
	
	
	/*컨텐츠*/
	.contents-wrap {min-height:545px; padding:60px 0}
	.contents-wrap .inner {width:1200px; margin:0 auto}
	.contents-wrap img {max-width:100%;}
	.contents-wrap .sub-title-wrap {text-align:center;  padding-bottom:40px; border-bottom:1px solid #e5e5e5;}
	.contents-wrap .sub-title-wrap.border-n {padding-bottom:0; border-bottom:none;}
	.contents-wrap .sub-title-wrap h2 {font-size:30px; font-weight:700; color:#000}
	.contents-wrap .sub-section {margin-top:40px}
	.contents-wrap .ss-section {margin-top:15px}
	.contents-wrap .ss-title {position:relative; margin-bottom:25px; padding-left:30px; font-size:24px; font-weight:700}
	.contents-wrap .ss-title:before {position:absolute; left:0; top:3px; content:''; display:inline-block; width:17px; height:17px; background:url(../images/common/ss_title.png) no-repeat left center}

	.contents-wrap .ss-title02 {position:relative; margin-bottom:30px; font-size:24px; font-weight:700; text-align:center}
	.contents-wrap .ss-title02:before {position:relative; content:''; display:block; width:17px; height:17px; margin:0 auto; margin-bottom:15px; background:url(../images/common/ss_title.png) no-repeat left center}

	.contents-wrap .ss-list {}
	.contents-wrap .ss-list .ss-list-title {position:relative; display:inline-block; padding-left:30px; font-weight:400; line-height:1}
	.contents-wrap .ss-list .ss-list-title:before {position:absolute; left:15px; top:5px; content:''; display:inline-block; width:3px; height:3px; background:#000;}
	.contents-wrap .ss-list .ss-list-gray {display:inline-block; margin-left:15px; padding-left:15px; color:#000; font-weight:300; border-left:1px solid #e5e5e5;}



	/* 서브 탭 */
	.sub-tab {margin-top:40px; border:1px solid #e5e5e5;}
	.sub-tab ul li {float:left; width:33.33%; border-right:1px solid #e5e5e5;}
	.sub-tab ul li:nth-child(3n) {border-right:none;}
	.sub-tab ul li a {display:block; padding:12px 10px; text-align:center; color:#000; line-height:1.4;}
	.sub-tab ul li.on {background:#3852b7;}
	.sub-tab ul li.on a {color:#fff; }

	
	
	/*서브메뉴*/
	.sub_visual {position:relative; width:100%; height:350px; background-size:cover;}
	.sub_visual section {padding-top:170px; font-family:'arial'; color:#fff; text-transform:uppercase; text-align:center;}
	.sub_visual h2 {font-size:47px; font-weight:900;}
	.sub_visual p {margin-top:15px; font-size:16px;}

	/* 각 서브 상단 */
	.sub_visual.company {background:url(../images/common/sub-visual01.jpg) no-repeat center}
	.sub_visual.business {background:url(../images/common/sub-visual02.jpg) no-repeat center}
	.sub_visual.tech {background:url(../images/common/sub-visual03.jpg) no-repeat center}
	.sub_visual.community {background:url(../images/common/sub-visual04.jpg) no-repeat center}


	.lnb.fixOn {position:fixed; width:100%; top:65px; background:#f5f5f5; box-shadow:0 2px 5px rgba(0,0,0,.1) !important; z-index:99999999}
	.lnb.fixOn .inner {}
	.lnb {display:none; position:relative; width:100%; margin-top:-65px; height:65px; }
	.lnb .inner {width:1200px; height:100%; margin:0 auto; overflow:hidden; background:#f5f5f5;}
	.lnb:after {clear:both; content:''; display:block;}
	.lnb .inner>a {float:left; display:block; width:65px; height:100%; background:#3852b7 url(../images/common/i-home.png) no-repeat center}
	.lnb ul {float:left; width:calc(100% - 65px); padding:25px 0; overflow:hidden;}
	.lnb ul li {float:left; height:100%; padding:0 30px; line-height:1; border-right:1px solid #e5e5e5}
	.lnb ul li a {line-height:1; color:#000}
	.lnb ul li.on a {color:#3852b7;}
	.lnb ul li a:hover {color:#3852b7;}
	.lnb ul li:last-child {border-right:none;}


	
}


/* ************************ 데스크탑 (992~) ************************ */
@media (min-width: 992px) and (max-width: 1199px), print {

	header nav.pc {padding-left:35px}
	header nav.pc .gnb>ul>li {padding-right:35px !important}
	header .side>ul>li {padding:0 20px}
	header .side>ul>li.shopping>a {text-indent:-9999999px; padding-left:20px;}

}

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

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

	/*헤더*/
	header {z-index:9999; position:absolute; width:100%; left:0; top:0; }
	header .head {z-index:100; position:absolute; left:0; top:0; width:100%; height:60px; text-align:center; overflow:hidden; line-height:1; background-color:transparent; border-bottom:1px solid rgba(255, 255, 255, .2); background:rgba(0, 0, 0, .2)}
	header .head h1 {display:inline-block;}
	header .head h1 a {display:inline-block; margin-top:15px;}
	header .head h1 a img {display:block; height:30px; font-size:0; line-height:0;}

	header .head .shopping {position:absolute; right:0; top:0; width:60px; height:60px; border-left:1px solid rgba(255, 255, 255, .2); background:url(../images/common/i-shopping.png) no-repeat center}

	header .head .gnbView {position:absolute; display:block;left:0; top:0; width:60px; height:60px; border-right:1px solid rgba(255, 255, 255, .2); background:url(../images/common/i-menu.png) no-repeat center}
	header .head .gnbView>div {position:absolute; left:50%; top:50%;}
	header .head .gnbView .bar {position:relative; display:block; width:20px; height:2px; margin-left:-50%; background:#000; border:0;}
	header .head .gnbView .bar:before,
	header .head .gnbView .bar:after {
		content:""; position:absolute; display:inline-block; width:20px; height:2px; background:#000; border:0;
	}
	header .head .gnbView .bar:before {margin-top:-7px;}
	header .head .gnbView .bar:after {margin-top:7px;}

	
	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:50%; height:100%; padding-bottom:20px;overflow:hidden; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; width:100%; background-color:#fff; border-bottom:1px solid #eee;}
	nav.mobile .closeWrap>aside:after {
		content:""; position:absolute;display:block; height:10px; width:100%;
		 box-shadow:0 5px 10px rgba(0,0,0,.1) inset;
	}
	nav.mobile .closeWrap .gnbClose {position:absolute; right:0; top:0; width:60px; height:60px; z-index:999; background:url(../images/common/i-x.png) no-repeat center; border-left:1px solid #e5e5e5}
	nav.mobile .closeWrap .gnbClose>div {position:relative; left:50%; top:50%;}
	nav.mobile .closeWrap .gnbClose>div .bar {
		position:relative; display:block; width:25px; height:1px; margin-left:-23%; background:#000;
		transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg);
	}
	nav.mobile .closeWrap .gnbClose>div .bar:after {content:""; position:absolute; left:0; top:0;display:block; width:25px; height:1px; background:#000;transform:rotate(-45deg); -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg);}
	nav.mobile .closeWrap>aside {position:relative; height:60px; padding:0 20px; color:#000; line-height:60px; background:#3852b7}
	nav.mobile .closeWrap>aside a {color:#fff}
	nav.mobile .closeWrap>aside:after {content:""; position:absolute; left:0; display:block; height:10px; width:100%;box-shadow:0 5px 10px rgba(0,0,0,.1) inset;}

	/* 사이드 메뉴 - GNB 오픈 후 */
	nav.mobile .closeWrap .side {float:right;}
	nav.mobile .closeWrap .side li {margin-left:20px; padding:0;}
	nav.mobile .closeWrap .side a {position:relative; display:block; height:60px; color:#000; font-size:10px; line-height:1; letter-spacing:.5px; padding-top:5px;}	
	nav.mobile .closeWrap .side a.on {color:#1fb3ec ;}	


	/* 사이드 메뉴 - 언어 */
	nav.mobile .lang {position:relative; width:100%; margin-top:10px; padding:5px 20px 15px; background:#f5f5f5}
	nav.mobile .lang:after {clear:both; content:''; display:block;}
	nav.mobile .lang li {float:left; display:inline-block; padding:0 10px;}
	nav.mobile .lang li:first-child {padding-left:0;}
	nav.mobile .lang li a {position:relative; padding-left:10px; font-size:14px; color:#000}
	nav.mobile .lang li a:before {position:absolute; left:0; top:9px; content:''; display:inline-block; width:3px; height:3px; background:#000}
	nav.mobile .lang li a.on {color:#3852b7}
	nav.mobile .lang li a.on:before {background:#3852b7}

	.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%; overflow-y:auto; padding-bottom:20px; 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:20px; font-size:16px; color:#000; border-bottom:1px solid #eee; background:#fff;}
	nav.mobile .gnb>ul>li>a:hover {color:#3852b7;}
	nav.mobile .gnb>ul>li.on>a {color:#3852b7; font-weight:600; border-color:#3852b7;}
	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 {
		position:relative; display:block; padding:15px 20px 13px 33px;
		font-size:15px; color:#888; letter-spacing:-.5px; border-bottom:1px solid #f7f7f7;
		background:url(../images/common/dot_m.png) no-repeat #fff 30px 22px; background-size:3px;
	}
	nav.mobile .gnb>ul>li>ul>li a:before {
		content:""; position:absolute; left:22px; top:26px;
		display:block; width:3px; height:3px; background:#ddd;
	}
	nav.mobile .gnb>ul>li>ul>li:last-child:after {
		content:""; display:block; height:10px; box-shadow:0 5px 10px rgba(0,0,0,.1) inset;
	}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#000; background-color:#f5f5f5;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#000; font-weight:500;}


	.chi nav.mobile .closeWrap>aside a {letter-spacing:-0.1px;}
	.chi nav.mobile .gnb>ul>li>a{letter-spacing:-0.1px;}
	.chi nav.mobile .lang li a {letter-spacing:-0.1px;}

	.jap nav.mobile .closeWrap>aside a {letter-spacing:-0.1px;}
	.jap nav.mobile .gnb>ul>li>a{letter-spacing:-0.1px;}
	.jap nav.mobile .lang li a {letter-spacing:-0.1px;}
	

	/*footer*/
	footer {position:relative; padding:30px 0 !important; background:#f9f9f9; letter-spacing:-0.1px;}
	footer>div {padding:0 20px; }
	footer address {}
	footer address h2 {margin-bottom:15px;}
	footer address span {display:block; margin-right:30px; font-weight:300; color:#666}
	footer ul {position:absolute; right:20px; top:60px}
	footer ul li {float:left; margin-left:15px;}
	footer ul li a {display:inline-block;}
	footer ul li a img {height:25px;}
	
	


	/*서브메뉴*/
	.sub_visual {position:relative; width:100%; height:230px; background-size:cover;}
	.sub_visual section {padding-top:110px; font-family:'arial'; color:#fff; text-transform:uppercase; text-align:center;}
	.sub_visual h2 {font-size:35px; font-weight:900;}
	.sub_visual p {margin-top:10px; font-size:16px;}

	/* 각 서브 상단 */
	.sub_visual.company {background:url(../images/common/sub-visual01.jpg) no-repeat center}
	.sub_visual.business {background:url(../images/common/sub-visual02.jpg) no-repeat center}
	.sub_visual.tech {background:url(../images/common/sub-visual03.jpg) no-repeat center}
	.sub_visual.community {background:url(../images/common/sub-visual04.jpg) no-repeat center}


	/*컨텐츠*/
	.contents-wrap {min-height:500px; padding:60px 0}
	.contents-wrap .inner {padding:0 20px}
	.contents-wrap .sub-title-wrap {text-align:center;  padding-bottom:30px; border-bottom:1px solid #e5e5e5;}
	.contents-wrap .sub-title-wrap.border-n {padding-bottom:0; border-bottom:none;}
	.contents-wrap .sub-title-wrap h2 {font-size:27px; font-weight:700; color:#000}
	.contents-wrap .sub-section {margin-top:30px}
	.contents-wrap .ss-section {margin-top:30px}
	.contents-wrap .ss-title {position:relative; margin-bottom:20px; padding-left:30px; font-size:20px; font-weight:700}
	.contents-wrap .ss-title:before {position:absolute; left:0; top:0; content:''; display:inline-block; width:17px; height:17px; background:url(../images/common/ss_title.png) no-repeat left center}

	.contents-wrap .ss-title02 {position:relative; margin-bottom:30px; font-size:24px; font-weight:700; text-align:center}
	.contents-wrap .ss-title02:before {position:relative; content:''; display:block; width:17px; height:17px; margin:0 auto; margin-bottom:15px; background:url(../images/common/ss_title.png) no-repeat left center}

	.contents-wrap .ss-list {}
	.contents-wrap .ss-list .ss-list-title {position:relative; display:inline-block; padding-left:30px; font-weight:400; line-height:1}
	.contents-wrap .ss-list .ss-list-title:before {position:absolute; left:15px; top:5px; content:''; display:inline-block; width:3px; height:3px; background:#000;}
	.contents-wrap .ss-list .ss-list-gray {display:inline-block; margin-left:15px; padding-left:15px; color:#000; font-weight:300; border-left:1px solid #e5e5e5;}

	

	
	/*서브메뉴*/
	.lnb {display:none;}


	/* 서브 탭 */
	.sub-tab {position:relative; z-index:99; margin-top:30px;}
	.sub-tab>p {display:block; color:#fff; height:45px; padding:10px 20px; background:#3852b7 url(../images/common/i-down02.png) no-repeat right 20px center}
	.sub-tab ul {display:none; position:absolute;left:0; top:45px; width:100%; border:1px solid #e5e5e5; box-shadow:5px 5px 10px rgba(0, 0, 0, .07)}
	.sub-tab ul.on {display:block;}
	.sub-tab ul li {float:none; width:100%; border-bottom:1px solid #e5e5e5; border-right:none;}
	.sub-tab ul li:last-child {border-bottom:none;}
	.sub-tab ul li a {display:block; padding:10px 20px; color:#000; text-align:left; line-height:normal; background:#f5f5f5}
	.sub-tab ul li.on a {color:#000; background:#dfe4f8;}



	
}


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

	nav.mobile {width:70%;}

	footer address span {display:block; margin-right:0;}
	footer address br {display:none;}
	footer ul {position:relative; right:auto; top: auto; margin-top:30px;}
	footer ul:after {clear:both; content:''; display:block;}
	footer ul li {margin-left:0; margin-right:15px}


	/*서브메뉴*/
	.sub_visual {position:relative; width:100%; height:230px; background-size:cover;}
	.sub_visual section {padding-top:115px; font-family:'arial'; color:#fff; text-transform:uppercase; text-align:center;}
	.sub_visual h2 {font-size:27px; font-weight:900;}
	.sub_visual p {padding:0 40px; margin-top:10px; font-size:14px; font-weight:100;}

	/* 각 서브 상단 */
	.sub_visual.company {background:url(../images/common/sub-visual01.jpg) no-repeat center}
	.sub_visual.business {background:url(../images/common/sub-visual02.jpg) no-repeat center}
	.sub_visual.tech {background:url(../images/common/sub-visual03.jpg) no-repeat center}
	.sub_visual.community {background:url(../images/common/sub-visual04.jpg) no-repeat center}


	/*컨텐츠*/
	.contents-wrap {min-height:410px; padding:40px 0}
	.contents-wrap .inner {padding:0 20px}
	.contents-wrap .sub-title-wrap {text-align:center;  padding-bottom:30px; border-bottom:1px solid #e5e5e5;}
	.contents-wrap .sub-title-wrap.border-n {padding-bottom:0; border-bottom:none;}
	.contents-wrap .sub-title-wrap h2 {font-size:24px; font-weight:700; color:#000}
	.contents-wrap .sub-section {margin-top:30px}
	.contents-wrap .ss-section {margin-top:20px}
	.contents-wrap .ss-title {position:relative; margin-bottom:15px; padding-left:20px; font-size:18px; font-weight:700; line-height:1.5}
	.contents-wrap .ss-title:before {position:absolute; left:0; top:3px; content:''; display:inline-block; width:15px; height:15px; background:url(../images/common/ss_title.png) no-repeat left top 2px; background-size:13px;}

	.contents-wrap .ss-title02 {position:relative; margin-bottom:30px; font-size:24px; font-weight:700; text-align:center}
	.contents-wrap .ss-title02:before {position:relative; content:''; display:block; width:17px; height:17px; margin:0 auto; margin-bottom:15px; background:url(../images/common/ss_title.png) no-repeat left center}

	.contents-wrap .ss-list {}

	.contents-wrap .ss-list .ss-list-title {position:relative; display:block; padding-left:20px; font-weight:400; line-height:1}
	.contents-wrap .ss-list .ss-list-title:before {position:absolute; left:10px; top:5px; content:''; display:inline-block; width:3px; height:3px; background:#000;}
	.contents-wrap .ss-list .ss-list-gray {display:block; margin-left:0; padding:10px 20px 0; color:#666; font-weight:300; border-left:none;}


	/* 서브 탭 */
	.ss-tab-area .tab-wrap .tab-contents {padding: 30px 20px 20px;}


	/*footer*/
	footer {position:relative; padding:40px 0; background:#f9f9f9; }
	footer img {height:37px}
	footer address h2 {margin-bottom:15px;}
	footer address {font-size:14px;}



}