@charset "utf-8";

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

/* ******************** 공용 ******************** */
a:link {color:#666;}
a:visited {color:#666;}
a:hover {color:#000;}
a:active {color:#000;}
#gotop {z-index:2000; position:fixed; display:none; width:35px; height:35px; right:20px; border-radius:3px; bottom:40px;}
body {font-family:'NotoSansKR' !important; font-size:16px; line-height:1.6; font-weight:300; color:#666; word-break:keep-all;}

input:focus {outline:0 !important;}


/* ******************** 데스크탑 (992~) ******************** */
@media screen and (min-width: 992px), print{
	.mobile {display:none !important;}	
	
	/*header::*/
	header {}
	header .wrap {width:1200px; margin:20px auto; overflow:hidden; position:relative;}
	header .wrap>div {vertical-align:top;}
	header .wrap>div.head h1 {float:left;}
	header .wrap>div.head h1 a {display:inline-block;}
	header .wrap>div.head h1 a img {display:block; height:100%;}

	header .wrap .searchBox.pc {position:absolute; left:50%; top:0; transform:translateX(-50%);}
	header .wrap .searchBox.pc .search {}
	header .wrap .searchBox.pc form {}
	header .wrap .searchBox.pc form>div {}
	header .wrap .searchBox.pc form>div>* {}
	header .wrap .searchBox.pc .search_input {position:relative; width:325px; height:50px;}
	header .wrap .searchBox.pc .search_input input {position:absolute; top:0; left:0; width:100%; height:50px; padding:12px 60px 12px 25px;font-size:14px; letter-spacing:-.5px; border-radius:50px; border:2px solid #d4d9e7;}
	header .wrap .searchBox.pc .search_input input:focus {outline:none; border:2px solid #d4d9e7 !important;}
	header .wrap .searchBox.pc .search_input button {
		position:absolute; top:50%; right:28px; z-index:9; background:url(../images/common/i_search.png)center no-repeat;
		display:block; width:20px; height:20px; transform:translateY(-50%); cursor:pointer;
	}
	
	header .wrap .side.pc {position:absolute; right:0; top:0;}
	header .wrap .side.pc ul {overflow:hidden; padding:11px 0;}
	header .wrap .side.pc ul li {float:left; padding:7px 0;}
	header .wrap .side.pc ul li+li {padding-left:20px;}
	header .wrap .side.pc ul li a {
		position:relative; font-weight:400; display:block; width:100%;
		font-size:13px; letter-spacing:-1px; line-height:1;
	}
	header .wrap .side.pc ul li.company a {border-radius:50px; background:#5975a6; color:#fff; padding:7px 18px 7px 27px; margin-top:-7px; transition:all .2s;}
	header .wrap .side.pc ul li.company a:before {content:''; display:block; width:7px; height:2px; position:absolute; left:12px; top:50%; transform:translateY(-50%); background:#fff;}
	header .wrap .side.pc ul li.company a:hover{background:#ff9000;}
	header .wrap .side.pc ul li.mypage a {padding-left:33px;}
	header .wrap .side.pc ul li.mypage a:before {
		content:''; display:block; width:27px; height:27px; border:1px solid #e5e5e5; border-radius:50%;
		position:absolute; left:0; top:50%; transform:translateY(-50%);
		background:#f5f5f5 url(../images/common/i-user.png)center no-repeat;
	}
	
	form.searchBox_mo {display:none !important;}
	
	/*gnb::*/
	nav.mobile {visibility:hidden;}
	nav.pc {border-top:1px solid #e8e8e8;}
	nav.pc .gnb {width:1200px; margin:0 auto; border-right:1px solid #e8e8e8;}
	nav.pc .gnb>ul {float:left; overflow:hidden;}
	nav.pc .gnb>ul>li {float:left;}
	nav.pc .gnb>ul>li>a {position:relative; display:block; width:100%; color:#000; font-weight:400; line-height:1; padding:22px 0;}
	nav.pc .gnb>ul>li>a:hover {text-decoration:none !important;}
	nav.pc .gnb>ul>li ul { z-index:1000; display:none; position:absolute; margin-top:-1px; border:1px solid #000; background:#fff; padding:30px 40px 30px 25px;}
	nav.pc .gnb>ul>li ul li {line-height:1;}
	nav.pc .gnb>ul>li ul li+li {padding-top:12px;}
	nav.pc .gnb>ul>li ul li a {display:inline-block; color:#000; font-size:15px; border-bottom:1px solid rgba(255,255,255,0); font-weight:400;}
	nav.pc .gnb>ul>li ul li.on a,
	nav.pc .gnb>ul>li ul li a:hover {border-bottom-color:#ff9000; color:#ff9000;}
	
	nav.pc .gnb>ul:first-child>li+li {margin-left:20px;}
	nav.pc .gnb>ul>li.allMenu>a {
		z-index:999; color:#ff9000; padding-left:60px; padding-right:30px; border-right:1px solid #e8e8e8; border-left:1px solid #e8e8e8;
		position:relative; background:url(../images/common/allMenu-pc.png)30px center no-repeat; text-decoration:none !important;
	}
	nav.pc .gnb>ul>li.allMenu>a:before {content:''; display:none; width:100%; height:1px; background:#000; position:absolute; top:0; left:0;}
	nav.pc .gnb>ul>li.allMenu.on>a {background-image:url(../images/common/i-close.png); color:#000; border-color:#000; border-bottom-color:#fff; background-color:#fff;}
	nav.pc .gnb>ul>li.allMenu.on>a:before {display:block;}
	nav.pc .gnb>ul>li.on ul {display:block;}
	
	nav.pc .gnb>ul:last-child {float:right;}
	nav.pc .gnb>ul:last-child>li>a {padding:22px 30px;background-position:30px center; background-repeat:no-repeat; padding-left:60px;  border-left:1px solid #e8e8e8;}
	nav.pc .gnb>ul:last-child>li.cart>a {background-image:url(../images/common/i-cart.png);}
	nav.pc .gnb>ul:last-child>li.customer>a {background-image:url(../images/common/i-customer.png);}
	nav.pc .gnb>ul:last-child>li.dataroom>a {color:#0066cc; padding-right:40px; background-image:url(../images/common/i-dataroom.png);}
	
	/*서브 상단 배경::*/
	[class*="subTop"] {position:relative; max-width:100% !important; height:250px; overflow:hidden; background-color:#ecf0f4;}
	[class*="subTop"] .cover {position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.8);}
	[class*="subTop"] .subTit {padding:82px 0; text-align:center;}
	[class*="subTop"] .subTit h2 {
		position:relative; z-index:9; color:#fff; font-size:36px; font-weight:400; letter-spacing:-1px; font-family:'NanumSquare';
		line-height:1.2;
	}
	[class*="subTop"] {background:url(../images/slider/slider_banner_1.jpg)top no-repeat;}
	
	/*lnb::*/
	.lnb {width:100%; background:#5975a6;}
	.lnb:after {content:""; display:block; width:100%; height:10px; background:#e5e5e5;  box-shadow:0px 5px 5px rgba(0,0,0,.2) inset;}
	.lnb ul {width:1200px; margin:0 auto; border-left:1px solid rgba(0,0,0,.2); border-right:1px solid rgba(0,0,0,.2);}
	.lnb ul li {display:table-cell; color:#fff; padding:0 20px 0 27px; font-size:14px; background:url(../images/shop/sub-arrow.png)0px center no-repeat;}
	.lnb ul li a {width:100%; display:block; padding-left:28px; color:#fff;}
	.lnb ul li:first-child {padding:19.5px 24px 19.5px 35px; background:none;}
	.lnb ul li:first-child a {background:url(../images/shop/i-home.png)left center no-repeat;}
	
	/*.lnb.fixOn {position:fixed !important;top:0 !important;}*/
	
	
	/*컨텐츠::*/
	.contents {width:100%; padding:50px 0 70px;}
	.contents [class*="-wrap"] {width:1200px; margin:0 auto;}
	
	
	/* footer */
	footer {}
	footer .footer-bar {background:#393b47;}
	footer .footer-bar>div  {width:1200px; margin:0 auto; border-right:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2);}
	footer .footer-bar>div>ul {float:left; overflow:hidden; padding-left:25px;}
	footer .footer-bar>div>ul li {float:left; padding:25px;}
	footer .footer-bar>div>ul li a {display:block; width:100%; color:#ccc; line-height:1; font-size:14px;}
	footer .footer-bar>div>ul li.acc a {color:#fff; font-weight:400;}
	footer .footer-bar>div div {float:right; border-left:1px solid rgba(255,255,255,.2); position:relative;}
	footer .footer-bar>div div>a {display:block; padding:25px 165px 25px 20px; line-height:1; color:#ccc; font-size:14px; background:url(../images/common/arrow_down.png)calc(100% - 20px) center no-repeat;}
	footer .footer-bar>div div>a.on {color:#fff;}
	footer .footer-bar>div div ul {display:none; position:absolute; bottom:65px; right:0;}
	footer .footer-bar>div div ul.on {display:block;}
	footer .footer-bar>div div ul li {float:left; width:100%; line-height:1; background:#393b47;}
	footer .footer-bar>div div ul li+li {border-top:1px solid rgba(255,255,255,.2);}
	footer .footer-bar>div div ul li a {display:block; color:#ccc; padding:25px 20px; line-height:1.4; }
	footer .footer-bar>div div ul li a:hover {color:#fff;}
	
	footer .footer-wrap {width:1200px; margin:0 auto; overflow:hidden; padding:35px 0;}
	footer .footer-logo {padding-bottom:3px;}
	footer .footer-info {overflow:hidden;}
	footer .footer-info address {float:left;}
	footer .footer-info address p {font-size:14px; font-weight:400; overflow:hidden; letter-spacing:-.5px; line-height:2;}
	footer .footer-info address p span {}
	footer .footer-info address p span+span {padding-left:15px;}
	footer .footer-info address p.copy {}
	footer .footer-account {float:right; overflow:hidden; padding-left:53px; position:relative; letter-spacing:-.5px;}
	footer .footer-account:before {
		content:''; display:block; width:44px; height:44px; border:1px solid #e5e5e5; border-radius:50%; background:#f5f5f5 url(../images/common/account.png)center no-repeat;
		position:absolute; left:0; top:calc(50% - 22px);
	}
	footer .footer-account p:first-child  {color:#000; font-weight:500;}
	footer .footer-account p span {padding-left:10px;}
	
}




/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	.pc {display:none !important;}
	/* body {overflow-x:hidden;} */
	/* body.mainType {margin-top:55px;} */
	
	header {width:100%;}
	header .wrap {z-index:100; position:absolute; left:0; top:0; width:100%; line-height:1; box-shadow:0 5px 5px rgba(0,0,0,.1); background-color:#fff; text-align:center; overflow:hidden;}
	header .head {}
	header .wrap .gnbView {}
	header .wrap .gnbView a {position:absolute; left:0; top:0; display:block; width:55px; height:55px; border-right:1px solid #e8e8e8; background:url(../images/common/allMenu-mo.png) center no-repeat;}
	header .wrap h1 {display:inline-block;}
	header .wrap h1 a {display:inline-block; width:100%; padding:13px 50px;}
	header .wrap h1 a img {height:30px;}
	
	header .side.mobile {z-index:999; position:absolute; top:0; right:0;}
	header .side.mobile a {width:55px; height:55px; display:block; border-left:1px solid #e8e8e8;}
	header .side.mobile a.login {background:url(../images/common/i-login.png)center /20px no-repeat;}
	header .side.mobile a.logout {background:url(../images/common/i-logout.png)center /20px no-repeat;}
	/* header .side.mobile a.searchBtn {position:absolute;top:0; right:55px;background:url(../images/common/i_search_666.png)center no-repeat;} */
	
	/*gnb*/
	nav.pc {display:none;}
	nav.mobile {z-index:9999999; position:fixed; top:0; width:60%; height:100%; overflow:hidden; box-shadow:0 !important; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; overflow:hidden; background-color:#5975a6; color:#fff;  border-bottom:1px solid rgba(255,255,255,.3);}
	nav.mobile .closeWrap .gnbClose {display:block; width:55px; height:55px; background:url(../images/common/icon_x_fff.png) no-repeat center; border-right:1px solid rgba(255,255,255,.3); float:left;}
	nav.mobile .closeWrap aside {float:left;}
	nav.mobile .closeWrap aside a { display:inline-block; padding:0 20px; color:#fff; font-size:12px; letter-spacing:0; height:55px; line-height:55px;}
	nav.mobile .closeWrap aside a+a {padding-left:0;}
	.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; 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:12px 20px; font-size:16px; font-weight:400; color:#5975a6; border-bottom:1px solid #e4e4e4; background:#fff;}
	nav.mobile .gnb>ul>li>a:hover {color:#5975a6;} 
	nav.mobile .gnb>ul>li.on>a {background:#5975a6; color:#fff;}
	nav.mobile .gnb>ul>li>ul {display:none; position:relative;}
	nav.mobile .gnb>ul>li>ul:after {content:''; display:none; height:4px; background:#eee; box-shadow:3px 3px 3px #e5e5e5 inset;}
	nav.mobile .gnb>ul>li.on ul:after {display:block;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {
		display:block; padding:8px 20px 8px 35px; font-size:15px; color:#000; letter-spacing:-.5px; border-bottom:1px solid #f5f5f5;
		position:relative;
	}
	nav.mobile .gnb>ul>li>ul>li a:before {
		position:absolute; top:19px; left:25px;
		display:block; content:"";
		width:3px; height:3px; background:transparent;
	}
	nav.mobile .gnb>ul>li>ul>li a:hover:before,
	nav.mobile .gnb>ul>li>ul>li.on a:before {background:#5975a6;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#5975a6;}
	
	/* 검색박스 */
	.searchBox.mobile {float:left; width:100%; padding:10px; background:#5975a6; border-top:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3); box-shadow:0 5px 5px rgba(0,0,0,.1);}
	.searchBox.mobile .search_input {width:100%; height:100%; position:relative;}
	.searchBox.mobile .search_input>* {vertical-align:middle;}
	.searchBox.mobile .search_input input {width:100%; height:40px; color:#5975a6; border:1px solid #5975a6; padding:6px 10px; padding-right:50px; border-radius:0;}
	.searchBox.mobile .search_input button {
		position:absolute; top:50%; right:20px; z-index:9; background:url(../images/common/i_search_acc.png)center no-repeat;
		display:block; width:20px; height:20px; transform:translateY(-50%); cursor:pointer;
	}
	
	
	
	
	
	.headerH {height:118px ! important;}
	
	/*컨텐츠::*/
	.contents {width:100%;}
	.contents [class*="-wrap"] {width:100%; padding:50px 20px;}

	
	
	
	/* footer */
	footer {}
	footer .footer-bar {background:#393b47;}
	footer .footer-bar>div  {width:100%;}
	footer .footer-bar>div>ul {float:left; overflow:hidden;}
	footer .footer-bar>div>ul li {float:left; padding:25px;}
	footer .footer-bar>div>ul li a {display:block; width:100%; color:#ccc; line-height:1; font-size:14px;}
	footer .footer-bar>div>ul li.acc a {color:#fff; font-weight:400;}
	footer .footer-bar>div div {position:relative; width:100%; float:left; border-top:1px solid rgba(255,255,255,.2);}
	footer .footer-bar>div div>a {display:block; padding:25px 165px 25px 20px; line-height:1; color:#ccc; font-size:14px; background:url(../images/common/arrow_down.png)calc(100% - 20px) center no-repeat;}
	footer .footer-bar>div div>a.on {color:#fff;}
	footer .footer-bar>div div ul {display:none; width:100%; position:absolute; bottom:65px; right:0;}
	footer .footer-bar>div div ul.on {display:block;}
	footer .footer-bar>div div ul li {float:left; width:100%; line-height:1; background:#393b47;}
	footer .footer-bar>div div ul li+li {border-top:1px solid rgba(255,255,255,.2);}
	footer .footer-bar>div div ul li a {display:block; color:#ccc; padding:25px 0 25px 20px; line-height:1;}
	footer .footer-bar>div div ul li a:hover {color:#fff;}
	
	footer .footer-wrap {width:100%; overflow:hidden; padding:35px 20px; text-align:center;}
	footer .footer-logo {padding-bottom:3px;}
	footer .footer-info {overflow:hidden;}
	footer .footer-info address {text-align:center;}
	footer .footer-info address p {font-size:14px; font-weight:400; overflow:hidden; letter-spacing:-.5px; line-height:2;}
	footer .footer-info address p span {display:inline-block; padding:0 7.5px;}
	footer .footer-info address p.copy {}
	footer .footer-account {display:inline-block; text-align:left; overflow:hidden; padding-left:53px; position:relative; letter-spacing:-.5px; margin-top:20px;}
	footer .footer-account:before {
		content:''; display:block; width:44px; height:44px; border:1px solid #e5e5e5; border-radius:50%; background:#f5f5f5 url(../images/common/account.png)center no-repeat;
		position:absolute; left:0; top:calc(50% - 22px);
	}
	footer .footer-account p:first-child  {color:#000; font-weight:500;}
	footer .footer-account p span {padding-left:10px;}

	
}





/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width:767px) {
	.pc {display:none !important;}
	
	/*컨텐츠::*/
	.contents [class*="-wrap"] {width:100%; padding:30px 20px;}
	
	/*gnb*/
	nav.mobile {width:80% !important;}
	nav.mobile .closeWrap aside a {padding:0 15px;}
	
	/* footer */
	footer {}
	footer .footer-bar {background:#393b47;}
	footer .footer-bar>div  {width:100%;}
	footer .footer-bar>div>ul {width:100%; overflow:hidden; text-align:center;}
	footer .footer-bar>div>ul li {float:left; width:50%; padding:0; border-bottom:1px solid rgba(255,255,255,.2);}
	footer .footer-bar>div>ul li a {display:block; width:100%; padding:20px; color:#ccc; line-height:1;}
	footer .footer-bar>div>ul li:nth-child(even) {border-left:1px solid rgba(255,255,255,.2);}
	footer .footer-bar>div>ul li.acc a {color:#fff; font-weight:400;}
	footer .footer-bar>div div {position:relative; border-top:0;}
	footer .footer-bar>div div>a {display:block; padding:20px 165px 20px 20px; line-height:1; color:#ccc; font-size:14px; background:url(../images/common/arrow_down.png)calc(100% - 20px) center no-repeat;}
	footer .footer-bar>div div>a.on {color:#fff;}
	footer .footer-bar>div div ul {display:none; width:100%; position:absolute; bottom:55px; right:0;}
	footer .footer-bar>div div ul.on {display:block;}
	footer .footer-bar>div div ul li {float:left; width:100%; line-height:1; background:#393b47;}
	footer .footer-bar>div div ul li+li {border-top:1px solid rgba(255,255,255,.2);}
	footer .footer-bar>div div ul li a {display:block; color:#ccc; padding:20px 0 20px 20px; line-height:1;}
	footer .footer-bar>div div ul li a:hover {color:#fff;}
	
	
}