@charset "utf-8";

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

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

input:focus,a:focus,button:focus {outline:none;}
			
body {
	position:static; width:100%; min-width:320px;
	font-family:"NanumGothic-Regular","돋움",sans-serif; font-size:16px; font-weight:normal; line-height:1.6; color:#666;
}
body > section {position:relative; display:block; width:100%; /* max-width:1200px; */ margin:0 auto;}
#gotop {z-index:888; position:fixed; width:35px; height:35px; border-radius:3px; bottom:40px; right:20px; background:url(../images/common/arrow_up.png) no-repeat 50% #fff; box-shadow:0 0 3px rgba(0,0,0,.3) !important; }

/* 컨텐츠 */
.contents img {/* max-width:100%; */ height:auto;}


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

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

	/* 헤더 스타일 */
    header {width:100%; height:100px; background-color:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); position:relative; z-index: 9999;}
	header.main {position:absolute;}
	header > .inner {position: relative; margin:0 auto; height:100%;}
    .headWrap {width: 100%; height: 100px; display:flex; align-items:center; justify-content:space-between; padding: 0 260px;}
	.head h1 {font-size: 16px; width:192px;}
	.head h1 a {color:#333; font-weight:bold;}
	nav.pc {}
    nav.pc .gnb>ul {display:flex;}
	nav.pc .gnb>ul>li {position: static;}
    nav.pc .gnb>ul>li+li {margin-left:40px;}
    nav.pc .gnb>ul>li>a {display:block; width:100%; font-size:16px; color:#333; font-family:"NanumGothic-Bold"; border-top:2px solid transparent; line-height:1; letter-spacing:-1px; position:relative; padding:42px 0;}
	nav.pc .gnb>ul>li>a:hover:before, nav.pc .gnb>ul>li.on>a:before {content:""; display:block; width:100%; height:2px; background:#ffaa01; position:absolute; top:35px;}
	nav.pc .gnb>ul>li>a:hover, nav.pc .gnb>ul>li.on>a { }
	
	/* 2단계 메뉴 (gnb > ul > li > ul) */
    nav.pc .gnb>ul>li>ul {position:absolute; top:100px; left:0; right:0; background-color:#fff; box-shadow:0 5px 10px rgba(0,0,0,0.1); border-top:1px solid #ddd; padding:10px 20px;
	max-height:0; opacity:0; visibility:hidden; transition:max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out; display:flex; justify-content:center; box-sizing:border-box; z-index:999;}
	header.sub nav.pc .gnb>ul>li.on>ul {max-height:300px; opacity:1; visibility:visible;}
	nav.pc .gnb>ul>li>ul>li {position:static; padding:0 15px; white-space:nowrap;}
	nav.pc .gnb>ul>li>ul>li.on>a {color:#ffaa01;}
	nav.pc .gnb>ul>li>ul>li>a {display:block; padding:8px 0; color:#666; transition:color 0.3s;}
    nav.pc .gnb > ul > li > ul > li > a:hover {color:#ffaa01;}
	
    /* 3단계 메뉴 (gnb > ul > li > ul > li > ul) */
    nav.pc .gnb > ul > li > ul > li > ul {position:absolute; top:60px; left:0; right:0;background-color:#fff; box-shadow:0 5px 10px rgba(0,0,0,0.1); border-top:1px solid #ddd;
    padding:10px 20px; max-height:0; overflow:hidden; opacity:0; visibility:hidden; transition:max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out; display:flex; justify-content:center; box-sizing:border-box; z-index:1002;}
    nav.pc .gnb ul ul ul li {padding:0 15px; white-space:nowrap;}
    nav.pc .gnb ul ul ul li a {display:block; padding:8px 0; color:#777; transition:color 0.3s;
	font-size:14px;}
	nav.pc .gnb ul ul ul li.on a {color:#ffaa01;}
    nav.pc .gnb ul ul ul li a:hover {color:#ffaa01;}
    nav.pc .gnb > ul > li:hover > ul {max-height: 300px;opacity:1;visibility:visible;}
    nav.pc .gnb > ul > li > ul > li:hover > ul {max-height:100px; opacity:1; visibility:visible;}
    header .side_btns .top {font-size:12px; display:flex; gap:10px;}
    header .side_btns .top a {display:inline-block; border:1px solid #ddd; padding:5px 10px;}
	header .side_btns .top a.i_shop {font-family:'NotoSansKR-Regular'; font-weight:bold;padding-left:33px; background:url(../images/common/i_shop.png) no-repeat 8px center;}
    header .side_btns .bottom {display:flex; justify-content:flex-end; font-size:10px; margin-top:8px;}
    header .side_btns .bottom a {display:inline-block; color:#000 !important; text-transform: uppercase; padding:0 8px; position:relative;}
	header .side_btns .bottom a+a:before {content:""; display:block; width:1px; height:10px; background:#ccc; position:absolute; left:-1px; top:3px;}
	
	
	/*footer*/
	footer {clear:both; max-width:100%; color:#666; text-align:left; background-color:#333; overflow:hidden; padding:50px 0 45px;}
	footer address {position:relative; display:block; max-width:1200px; margin:0 auto;}
	footer address>div {float:left;}
	footer address>div:first-child {width:15%;}
	footer address>div.txt {width:85%; font-size:12px; color:#ccc; line-height:1.7; padding-right:27%;}
	footer address>div.txt span {display:inline-block;}
	footer address>div.txt span.address {width:100%;}
	footer address>div.txt span.tel,
	footer address>div.txt span.fax,
	footer address>div.txt span.person {padding-right:20px; padding-left:0;}
	footer address>div.txt span br {display:none;}
	footer address>div.sns {position:absolute; top:0; right:0; line-height:1;}
	footer address>div.sns a {display:inline-block; width:29px; height:20px;}
	footer address>div.sns a+a {margin-left:20px;}
	footer address>div.sns a.fb {background:url(../images/common/i_fb.png)no-repeat center;}
	footer address>div.sns a.tw {background:url(../images/common/i_tw.png)no-repeat center;}
	footer address>div.sns a.in {background:url(../images/common/i_in.png)no-repeat center;}
	footer address>div.sns a.yt {background:url(../images/common/i_yt.png)no-repeat center;}
	
	/*modify2021*/
	 footer address>div.sns.modify2021 a.gp {background:url(../images/common/i_gp.png)no-repeat center; width:151px;}
	
	/*22-01-21수정*/
	footer address>div.gene {padding-top:120px;}
	
	/*컨텐츠*/
	.contents {max-width:1200px; margin:0 auto;}
}

/* ************************ 노트북 (992~1280) ************************ */
@media screen and (min-width:992px) and (max-width:1280px) {
	
	footer address>div.txt span.address {width:100%;}

}


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

	/* html,body {font-weight:400; font-size:15px;}	 */
	.pc {display:none !important;}
	
	/*헤더*/
	header.main {height:60px !important;} /**/
	header {z-index:999; width:100%; left:0; top:0;}
	header .head {width:100%; height:60px; overflow:hidden; line-height:1; border-bottom:1px solid #e9e9e9;}
	header .head h1 {/* text-align:center; */ margin:0 !important; display:block;}
	header .head h1 a {display:inline-block; padding:15px; text-align:center;}
	header .head h1 a img {display:block; height:30px; font-size:0; line-height:0;}
	header .gnbView {position:absolute; top:0; right:0; display:block; height:60px; width:60px; border-left:1px solid #e9e9e9; background:url(../images/common/icon_allmenu.png)no-repeat center; background-size:20px;}
	header .side ul li.mobile a {position:absolute; top:0; right:0; display:block; height:60px; width:60px; border-left:1px solid #e9e9e9; background:url(../images/common/icon_login.png)no-repeat center; background-size:20px;}

	
	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:100%; height:100%; overflow:hidden; box-shadow:-5px 0 5px rgba(0,0,0,.2) !important; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px; background-color:#003b5e; /* border-bottom:1px solid #fff; */}
	nav.mobile .closeWrap .gnbClose {display:block; float:right; width:60px; height:60px; text-align:center; background:url(../images/common/icon_gnbclose.png) 50% 50% no-repeat; background-size:20px; border-left:1px solid #20465d;}
	nav.mobile .closeWrap .home {position:absolute; display:block; top:0; left:0; padding:20px; color:#fff; font-size:12px;}
	nav.mobile .closeWrap .add {position:absolute; display:block; top:0; left:56px; padding:20px; font-size:12px; font-weight:bold; color:#ff8a00; letter-spacing:0;}
	nav.mobile .closeWrap .second {left:107px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.6);}
	
	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left; background:#fff;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:10px 20px; font-size:17px; color:#333; background:#fff; letter-spacing:-1px; text-align:center; border-bottom:1px solid #e9e9e9;}
	nav.mobile .gnb>ul>li>a:hover {color:#ff8a00;}
	nav.mobile .gnb>ul>li.on>a {color:#ff8a00; background:#fff; border-bottom:1px solid #e9e9e9;}
	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:8px 15px; font-size:15px; color:#999; letter-spacing:-.5px; border-bottom:1px solid #f9f9f9;
		background:#fff; text-align:center;
	}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#000; background-color:#f9f9f9;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#000;}
	

	/*footer*/
	footer {max-width:100%; color:#666; text-align:left; background-color:#333; overflow:hidden; padding:40px 30px 30px;}
	footer address {position:relative; display:block; max-width:1200px; margin:0 auto;}
	footer address>* {text-align:center;}
	footer address>div {float:left; width:100%;}
	footer address>div.txt {font-size:12px; color:#ccc; line-height:1.7; margin-top:10px;}
	footer address>div.txt span {display:inline-block; word-break:keep-all;}
	footer address>div.txt span.address {width:100%;}
	footer address>div.txt span.address br {display:none;}
	footer address>div.txt span+span {padding-left:20px;}
	footer address>div.sns {position:static; line-height:1; margin-top:20px;}
	footer address>div.sns a {display:inline-block; width:29px; height:20px;}
	footer address>div.sns a+a {margin-left:20px;}
	footer address>div.sns a.fb {background:url(../images/common/i_fb.png)no-repeat center;}
	footer address>div.sns a.tw {background:url(../images/common/i_tw.png)no-repeat center;}
	footer address>div.sns a.in {background:url(../images/common/i_in.png)no-repeat center;}
	footer address>div.sns a.yt {background:url(../images/common/i_yt.png)no-repeat center;}
	
		/*modify2021*/
		footer address>div.sns.modify2021 a.gp {background:url(../images/common/i_gp.png)no-repeat center; width:151px;}


	/*컨텐츠*/
	.contents {width:100%; margin:0; padding:0;}
}


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

	/*footer*/
	footer address>div.txt span.address br {display:block;}
	footer address>div.txt .person {display:inline-block; width:100%;}
	footer address>div.txt span+span {padding-left:0;}
	footer address>div.txt .tel {padding-right:10px;}
	footer address>div.txt .tel a {color:#ccc;}
	footer address>div.txt p {word-break:keep-all;}
	
	
}