@charset "utf-8";
/* in Sehee S&D(http://sehee.co.kr/) 2020-10-06 */
/* Reset */
html,body{min-height:100%;    }
body{background:#fff;overflow-y:scroll;overflow-y:none}
body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,fieldset,input,button,textarea,select,address{margin:0;padding:0}
body,table,input,textarea,select,button{font-family: 'Noto Sans KR', sans-serif, Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;font-size:17px;line-height:1.7;}
header,footer,section,article,nav,aside,figure,figcaption{display:block}
ul,li,ol,dl{list-style:none}
a{color:#363636;text-decoration:none; /* font-weight:bold */}
img{border:0}
hr{display:none}
.header img, .lnb img, .footer img,.front .content img,.contentTitle img{display:block}

/* Skip to Content Button */
.skipToContent{display:block;width:120px;z-index:1;position:absolute;left:50%;top:10px;margin:0 0 0 -60px}
.skipToContent a{display:block;height:1px;overflow:hidden;text-indent:-1000px;cursor:default}
.skipToContent a:focus,.skipToContent a:active{height:12px;text-align:center;text-indent:0;padding:7px 0;background:#666;color:#fff;border-radius:15px}

/* IE6 PNG bug fix */
.png24{tmp:expression(setPng24(this))}

/* for Screen Reader */
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}

/* Layout */
body{background:#fff}
.wrap{width:100%;margin:0 auto;position:relative;}
.header{position:relative;height:80px;   /*  border-bottom: 1px solid #eee; */     z-index: 10;}
.headerWrap{position:relative;    width: 100%;background:#fff}
/* .front .headerWrap{background:none;} */
.mainVisual{width:100%;height:600px}
.mainVisual img{display:block}
.subVisual{width:1200px;margin:0 auto}
.subVisual img{display:block}
.front .body{margin-top:50px}
.body{padding:0 0 80px 0;zoom:1;width:1200px;margin:0 auto}
.body.popup{width:1000px;}
.body.popup .contentBody img{width:970px;}
.body:after{content:"";display:block;clear:both}
.content.popup{width:1000px;}
.content:after{content:"";display:block;clear:both}
.footer{background:#777;width:100%;/* min-width:1253px */}
.header_mark1{position:absolute;left:30px;top:30px}
.header_mark2{position:absolute;right:0px;top:50px}
.utilmenu{position:absolute;right:2%;top:33px;overflow:hidden;z-index:2}
.utilmenu ul{margin-left:-1px;overflow:hidden;}
.utilmenu ul:after{content:"";display:block;clear:both}
.utilmenu li{float:left;/* padding:0 12px; */zoom:1; }
.utilmenu a{display:block;float:left;margin:0;overflow:hidden;color:#696969;font-size:12px;font-weight:normal;font-family:Arial,NBG}
.utilmenu a:hover {color:#da5724;}
.utilmenu a:before {content: "|"; margin-right: 5px; margin-left: 5px; color:#696969;}
.utilmenu .util_cart{padding:0 0 0 12px}
.utilmenu .util_cart a{padding:0 0 0 19px;background:url(../images/ico/util_cart.gif) no-repeat left 2px}
.pcView{display: inline-block;    text-align: center;}
.moView{display:none;}

/*font*/
.price ,p.prodiprice{
    font-family: 'Lato', sans-serif;
}
.sub-tit {margin:20px 0 80px 0;font-size:40px;font-weight:600; color:#181818; text-align:center;}

@media (max-width:800px){
/* .sub-tit {font-size:25px;font-weight:600; color:#000;} */
.sub-tit {display:none;}
section.content > div {margin-top: 50px;}
}
/* .fc-white {color: #fff !important;} */

/* subTop */
.logo{display: inline-block; width: 110px; margin: 13px 0 13px 2%;vertical-align: top;    position: absolute;    left: 0;}
.logo a img{max-width: 100%; height: auto;}
#sub-visual {position: relative;height: 200px;text-align: center;padding: 20px 0;}

@media(max-width:1038px){
#sub-visual{margin-top:60px;}
}
#sub-visual:before {position:absolute; top:0px; left:0px; content:""; display:block; width:100%; height:100%;z-index:1;}


@media (max-width: 800px){
#sub-visual.bg1 {background-size:cover !important;}
#page-navi  ul li:nth-child(3) {font-size:18px; font-weight:600; }
}

#sub-visual h1 {position:relative; font-size: 35px; font-weight:500; color:white; /* text-shadow:2px 2px 4px rgba(12, 12, 12, 0.62); */z-index:5; /* animation:dipper-jiggle 1.2s ease-in-out; */    margin-top: 53px;top:0;transition: all 1s linear;opacity:1}
#sub-visual h1.tit_ani{top:35px;opacity:0}
#sub-visual .ad-txt {position:relative; font-size:18px;  font-weight:300; color:#fff; /*text-shadow:2px 2px 4px rgba(12, 12, 12, 0.62);*/ z-index:5;top:0;transition: all 1.5s linear;opacity:1}
#sub-visual .ad-txt.sub_ani {top:35px;opacity:0}
#page-navi {position:relative; height:50px;}
#page-navi  ul li {float:left; padding:0 20px;  line-height:50px; }
#page-navi i.fas.fa-home {color: #000; font-size: 1.24rem; display: inline-block; vertical-align: inherit;}
#page-navi  ul li .home {display:inline-block; /*width:19px; height:17px;  background:url('../images/sub/home_icon.png') no-repeat; */ text-indent:-9999em; vertical-align:middle; }
#page-navi  ul li:nth-child(3) {background:url('../images/sub/left_menu_arrow.png') no-repeat left 19px; }
#page-navi  ul li:nth-child(2) {background:url('../images/sub/left_menu_arrow.png') no-repeat left 19px; }
@media (max-width: 460px){
#page-navi  ul li {font-size:15px !important;}
#page-navi i.fas.fa-home {font-size:1rem;}
}
@media (max-width:414px) {
#page-navi ul li {padding: 0 8px 0 12px;}
}
@media (max-width:349px) {
#page-navi ul li:nth-child(3) {display: block; position: absolute; top: 26px; margin-left: 50px;}
}
/* @media (max-width:351px) {
#page-navi i.fas.fa-home {font-size:1rem;}
#page-navi ul li:nth-child(1) {font-size: 1rem;}
#page-navi ul li:nth-child(1), #page-navi ul li:nth-child(2) {padding-right: 3%;}
#page-navi ul li {padding: 0 0 0 4%; font-size: 0.95rem;}
#page-navi ul li:nth-child(3) {font-size: 0.98rem; padding-right: 0;}
}
@media (max-width:300px) {
#page-navi ul li:nth-child(1), #page-navi ul li:nth-child(2) {padding-right: 4px;}
#page-navi ul li {padding: 0px 0 0 8px;}
} */
/* 메뉴 */
/* .gnb{position:absolute;top:5px;z-index:10} */
.gnb{display: inline-block;}
#gnb {  width: 1200px;  height:75px;overflow: hidden;transition: all 1.5s; border:none;}
#gnb.on{height:330px;transition: all 1.5s;/* border-bottom:1px solid #eee; */  }
@media (max-width:1440px){
    .gnb {margin-left: 0;}
}
.gnb .li_menu.on{
	/* border-bottom:3px solid #000;    */
    font-weight:bold;
	}
.gnb .li_menu{
	margin-top:30px;height: 48px;cursor:pointer;
	}
.gnb .li_icon{
	width: 50px;
    margin-top: 20px;
    padding: 10px 0;
	}
.gnb .li_icon.cart{
	margin : 0 20px;margin-top: 20px;
	}
.gnb .li_icon.all_menu img{float:right;}
.gnb ul:after{content:"";display:block;clear:both}
.gnb li{float:left;font-size:18px;font-weight:650;width: 240px;text-align:center;}
.gnb li.menu7{margin:0}
/* .gnb ul ul{display:none;} */
/*.g_hover{display:block !important; width:150px; position:absolute;top:78px;background:#fff;border-top:3px solid #48cae0;font-weight:normal;text-align:center;z-index:10;}
.g_hover li{
	text-align:left;
	padding:10px 0;margin:0;/* text-indent:15px;text-align:center
	} */
#gnb.on .downmenu{display:block;}
.downmenu{ margin:20px 0; box-sizing:border-box;display:none;transition:0.3s all;}
.downmenu.on{border-top:1px solid #48cae0;box-sizing:border-box; margin-top:19px; }
/* .downmenu a{font-size:14px;} */
.downmenu li{padding:7px 0;}
.downmenu li:hover{
	background:#f0f6f7;
	}
.downmenu li:hover a{text-decoration: none;}
.gnb ul li.menu3 ul{width:182px}
.gnb ul li.menu6 ul{width:194px}
.gnb ul ul li{float:none;margin:0px 0;font-size:16px;}
.gnb_li{font-size:15px !important;}

@media(max-width:1500px) and (min-width:1200px){
	#gnb{margin-left:110px;}
	.gnb li {width:15vw}
}
@media(max-width:1200px){
	.header{
		width:100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: white;
		z-index: 10000;
		height: auto;
		border:0;
	}
	.headerWrap{width:100%;}
	.headerWrap .moMenu{
		    position: absolute;
    top: 50%;
	transform: translateY(-50%);
    right: 5%;
    width: 30px;
    height: 30px;
    overflow: hidden;
	}
	.headerWrap button{    background: url(/common/images/menu_all.svg) no-repeat;cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 0;
    display: block;
    background-size: 100%;
	border: 0;}
	.headerWrap .memMenu{
		    position: absolute;
    top: 18px;
    right: 5%;
	}
	.headerWrap .memMenu a:nth-child(1){ margin-right: 7px;}
	.headerWrap .headTop{
		border-bottom:1px solid #eee;
	}
	.headerWrap .headTop h1{
		text-align: left;
    	padding: 10px 0;
	}
	.headerWrap .headTop h1 img {
	    vertical-align: sub;
		display: inline-block;
		width: 100px;
		margin-left:5%;		
	}
	.headerWrap .headBot{
		padding: 15px 0;
    border-bottom: 1px solid #EEE;
    background: #fff;
	}
	.headerWrap .headBot .headMenu {
		display: inline-flex;
		width: 100%;
	}
	.headerWrap .headBot .headMenu li{
		width:25%;
		padding: 0 3vw 0 3vw;
		text-align: center;
		font-size: 18px !important;
	}
	.headerWrap.pcView{display:none;}
    .headerWrap.moView{display:block;}
    .headerWrap .menu_on{
        position:fixed;
        top:0;
        width:80%;
        height:100%;
        background:#fff;   
        z-index:100;
        overflow-y:scroll;
        right:-100%;
    }
    .headerWrap .menu_on .menu_util{
        padding: 15px 0;
            padding-top: 70px;
        height: auto;
        width: 100%;
        border-bottom: 1px solid #a9a9a9;
	}
    .headerWrap .menu_on .menu_util .login_menu{text-align:center;margin-bottom:30px;}
    
    .headerWrap .menu_on .menu_util li {float:none}
    .headerWrap .menu_on .menu_util .login_li, .headerWrap .menu_on .menu_util .join_li {
    display: inline-block;
    width: 45%;
    padding: 11px 0px;
    font-size: 3vw;
    text-align: center;
    border: 1px solid #000;
    }
    .headerWrap .menu_on .menu_util .join_li:after{clear:both; float:none;}
    .headerWrap .menu_on .menu_util .log_li{margin-right:5%;}
    .menu_close{
		width: 30px;
		height: 40px;
        position: absolute;
        top: 10px;
		right: 10px;
		cursor: pointer;
    }
	.menu_close img {
		width: 100%;
	}
	.headerWrap .menu_on .menu_util .other_menu {text-align:center;width:100%;}
    .headerWrap .menu_on .menu_util .other_menu p{width: 32%;
    display: inline-block;
    padding-top: 11vw;
    background-repeat: no-repeat !important;
    background-size: 34% !important;
    background-position: center top !important;
    font-size: 3vw;}
    .headerWrap .menu_on .menu_util .other_menu p.my_li{
        background:url(../images/menu_mypage.png)
    }
    .headerWrap .menu_on .menu_util .other_menu p.order_li{
        background:url(../images/menu_order.png);
        background-size: 45% !important;
    }
    .headerWrap .menu_on .menu_util .other_menu p.cart_li{
        background:url(../images/menu_cart2.png)
    }
    .headerWrap .menu_li .menuList  p.menu_1dept{
        color:#000;
        font-size:18px;
        padding:15px 0;
        padding-left: 15px;
        border-bottom: 1px solid #a9a9a9;font-weight: 600;
    }
	.headerWrap .menu_li .menuList p.menu_1dept i{    color: #000;
    float: right;
    margin-right: 5%;    line-height: inherit;transform: rotate(0);}
	.headerWrap .menu_li .menuList p.menu_1dept i.rotation{
	-webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     transform: rotate(180deg);}
    .headerWrap .menu_li .menuList  div.menu_2dept p{
        padding:15px 25px;font-size:18px;
        background:#eee;
        border-bottom: 1px solid #fff;;
    }
}

@media(max-width:800px){
	.headerWrap .headBot{
		padding: 12px 0;
    overflow-x: scroll;
	}
	.headerWrap .headBot .headMenu {
		display: inline-flex;
		width: 110%;
	}
	.headerWrap .headBot .headMenu li{
		padding: 0 3vw 0 3vw;
		text-align: center;
		font-size:20px !important;
		font-weight: bold;
    }
    .headerWrap .menu_on{
        width:90%;
    }
}

@media(max-width:500px){
	.headerWrap .headTop h1 img {
		width: 80px;
	}
	.headerWrap .moMenu {top: 50%;     transform: translateY(-50%);width:25px;height:25px;right:5%;}
	.headerWrap .memMenu {top:15px;right: 3%;}
	.headerWrap .memMenu img{width:35px;height:35px;}
	.headerWrap .headBot .headMenu li{
		padding: 0 2%;
		text-align: center;
		font-size: 15px !important;
	}

}

@media(max-width:360px){
	.headerWrap .headBot .headMenu li {
		width:30%;
		padding:0;
	}
}


.sitemap_wrap{display: none; width: 1120px; position: fixed; background:#fff; z-index:4; left: 50%; transform: translateX(-50%); top: 82px;}
.black_bg{display: none; position: fixed; content: ""; width: 100%; height: 100%; background-color:rgba(0, 0,0, 0.8); top:0; left: 0; z-index:3;}
.sitemap_close {height: 38px; width: 38px; display: block; background: #fff; position: absolute; top: 5px; right: 5px; z-index: 120; font-size: 0;}
.sitemap_close a {height: 100%; width: 100%; display: block; position: relative;}
.sitemap_close a:before, .sitemap_close a:after {content: ''; width: 33px; height: 3px; display: block; position: absolute; top: 18px; left: 3px; background: #333; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}
.sitemap_close a:after {width: 3px; height: 33px; left: 18px; top: 3px;}
.sitemap_list {text-align: center; margin: 65px 40px;}
.sitemap_list > li {margin-bottom: 40px; width: 24%;  margin-right: 4%; display: inline-block; vertical-align: text-top; text-align: left;}
.sitemap_list > li:nth-child(n+4) {margin-bottom: 0;}
.sitemap_list > li > a {border-top: 1px solid #000; border-bottom: 1px solid #d4d4d4; font-size: 1.2rem; font-weight:600; display: block; padding: 10px 0 10px 0; text-align: center; color: #242d58;}
.sitemap_list .dot-list {padding-left: 16px; font-size: 1rem; padding-top: 16px; padding-right: 16px; font-weight: 600;}
.sitemap_list .dot-list li {margin: 10px 0;}
.sitemap_list > li:nth-child(3n) {margin-right: 0;}
.sitemap_list .dot-list li:nth-child(1) {margin-top: 0;}
.sitemap_list li:nth-child(6) .dot-list li {font-weight: 600;}
.download1, .download2{height:21px; width:3px; display:block; position:relative; float: right; font-size: 0; right: 7px;} 
.download1:before{content:''; height:0; width:0; display:block; border:6px transparent solid; border-top-color:#242d58; position:absolute; top:11px; left:-5px; }
.download1:after{content:''; height:6px; width:3.5px; display:block; background:#242d58; position:absolute; top:5px; left:-1px;}
.download2:before{content:''; height:0; width:18px; display:block; border-bottom:3px #242d58 solid; position:absolute; bottom:0px; left:-1px; }
.utilmenu_moView{position: absolute; left: 4%; bottom: 0;}
.utilmenu_moView li{display: inline-block;}
.utilmenu_moView a {display: block; float: left; margin: 0; overflow: hidden; color: #696969; font-size: 12px; font-weight: normal; font-family: Arial, NBG;}
.utilmenu_moView a:before {content: "|"; margin-right: 5px; margin-left: 5px;}

@media (max-width:1200px){
    .utilmenu  {right: 10%;}
	.utilmenu_moView{display: block;}
}

@media (max-width: 470px){
	.utilmenu  {right: 16%;}
	.utilmenu li:nth-child(4), .utilmenu li:nth-child(5) {display: none;}
}

@media (min-width:1201px){
    .utilmenu_moView{display: none;}
}



/* Contents */
/* .contentTitle{position:relative;height:170px;border-bottom:1px solid #c5c5c5;margin:0 0 40px 0}
.contentRoute{text-align:left;position:absolute;left:0;top:38px;padding-left:15px;background:url(../images/bg/bullet_route.gif) no-repeat left 2px;font-size:13px}
.contentRoute span{font-weight:bold} */
h3.main_tit {
    
	font-size:30px;
	text-align:center;
	margin-bottom: 50px;
	font-weight: bold;
}
h3.main_tit::after{
	content: "";
    display: block;
    width: 45px;
	border-bottom: 2px solid #000;
	margin:0 auto;
	margin-top: 25px;}

/* Sidebar */
.lnb{margin:0 0 50px 0}
.lnb h2{position:absolute;left:0;top:110px}
.lnb ul{padding-bottom:11px;zoom:1;overflow:hidden}
.lnb ul:after{content:"";display:block;clear:both}
.lnb li{border:1px solid #cacaca;float:left;width:145px;text-align:center;margin:0 10px 0 0}
.lnb li a{display:block;padding:8px 0;font-size:15px;color:#777}
.lnb li.active{border:1px solid #c20828}
.lnb li.active a{color:#c20828;font-weight:bold}
.lnb li.menu44{border:1px solid #a3a3a3}
.lnb li.menu44 a{color:#fff;font-weight:bold;background:#a3a3a3}
.lnb li.menu44.active{border:1px solid #c20828}
.lnb li.menu44.active a{color:#c20828;background:#fff}


/* Footer */
.footer { }
.footer .f_Div{
    width:1200px; margin:0 auto;}
.footer .f_Div .f_total{
    background: url(/common/images/w-logo.svg);
    background-size: 15%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 70%;
    padding: 35px 0;
    padding-left: 30%;
	background-position-x: 8%;}
.footerLink{margin:0 auto;}
.footerLink ul{/* margin-left:-10px; */overflow:hidden;/* height:25px */}
.footerLink ul:after{content:"";display:block;clear:both}
.footerLink li{float:left;font-size:17px;/* margin-left:-10px; *//* background:url(../images/bg/footlink_bar.gif) no-repeat left; *//* padding:0 20px; */color:#fff}
.footerLink li::after {content: '|'; clear: both; margin: 0 1em 0 1em;}
.footerLink li:nth-child(4)::after {content: ''; margin: 0;}
.footerLink li a{color:#fff;font-weight:normal}
.footerLink li a:hover {color: #21a2d9;}
/* .footerLink li.point a{color:#ffe400} */

.footerWrap{margin:15px auto 0px auto}
.footerWrap:after{content:"";display:block;clear:both}
address{color:#000;line-height:21px;float:left;font-size: 14px;word-break: keep-all;width: 100%; margin-bottom: 8px;}
address p {line-height: 2em;}
address p span:nth-child(n+2) {margin-left: 15px;}
address p > span span {margin-left: 15px;}

@media(max-width:1200px){
.footer .f_Div {width:100%;}
.footer .f_Div .f_total{background-position-x: 5%; padding-left: 24%;}
}

@media (max-width:800px) {
    .footer .f_Div .f_total {padding-left:0; margin-left: 5%; background: none; width: 90%; margin-right: 5%;}
}

@media (max-width:500px) {
    .footerLink li {font-size: 14px;}
    address {font-size: 13px;}
}

.footerWrap_m {display:none;}
.footerLink ul {margin-bottom: 15px;}

@media (min-width:994px) {
	.footerWrap_pc address p:nth-child(2) span:nth-child(3) {display: block; margin: 0;}
	.footerWrap_pc address p:nth-child(3) span:nth-child(3) {display: inline-block; position: relative; left: -15px;}
	.footerWrap_pc address p:nth-child(3) span:nth-child(4) {position: relative; left: -15px;}
}

@media (max-width:993px) {
	.footerWrap_pc address p:nth-child(2) span:nth-child(2) {display: inline-block; position: relative; left: -15px;}
	.footerWrap_pc address p:nth-child(2) span:nth-child(3) {position: relative; left: -15px;}
}

@media (max-width:838px) {
	.footerWrap_pc address p:nth-child(1) span:nth-child(3) {display: block; margin: 0;}
}

@media (max-width:800px) {
	.footerWrap_pc {display:none;}
	.footerWrap_m {display:block;}
	.footerWrap_m address p:nth-child(-n+3) {margin-bottom: 10px;}
	.footerWrap_m address p:nth-child(2) span:nth-child(1), address p:nth-child(3) span:nth-child(1), address p:nth-child(2) span:nth-child(2), address p:nth-child(3) span:nth-child(2) {display: block;}
	.footerWrap_m address p:nth-child(2) span:nth-child(2), address p:nth-child(3) span:nth-child(2), address p:nth-child(2) span:nth-child(3), address p:nth-child(3) span:nth-child(3) {margin-left: 0;}
	.footerWrap_m address p:nth-child(3) {border-top: 1px solid #545454; padding-top: 10px;}
	.footerWrap_m address p a {color: #b1b1b1;}
}

@media (max-width:652px) {
	.footerWrap_m address p:nth-child(1) span:nth-child(3) {display: block; margin: 0;}
}

@media (max-width:550px) {
	.footerWrap_m address p:nth-child(3) span:nth-child(5) {display: block; margin: 0;}
}

@media (max-width:350px) {
	.footerWrap_m address p:nth-child(1) span:nth-child(2) {display: block; margin: 0;}
}

@media (max-width:336px) {
	.footerWrap_m address p:nth-child(3) span:nth-child(4) {display: block; margin: 0;}
}

@media (max-width:316px) {
	.footerWrap_m address p:nth-child(2) span:nth-child(4) {display: block; margin: 0;}
}
