@charset "utf-8";

/* header */
#header .inr,
#footer .inr{position:relative; margin:auto; padding:27px 20px; max-width:1320px; width:100%;}

#header .left_logo{display:block; width:196px;}
#header .left_logo.mo{display:none;}
#header .left_logo img{width:100%;}
#header .logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
#header .logo > a{display:block; width:228px;}
#header .logo > a img{width:100%;}
.area_util.mo{display:none;}
.area_util{position:absolute; right:20px; top:50%; transform:translateY(-50%);}
.area_util ul{display:flex;}
.area_util ul > li{display:inline-block;}
.area_util ul > li+li{margin-left:22px;}
.area_util ul > li > a{display:block; font-size:14px; color:#4f4f4f; transition:0.3s ease;}
.area_util ul > li > a:hover{color:#aaa;}
.area_util ul > li > a i{display:inline-block; margin-left:4px; vertical-align:middle; width:18px; height:18px; line-height:18px; border-radius:50%; color:#fff; font-size:11px; background:var(--point); text-align:center;}

#header .bottom{border-top:1px solid #e1e1e1;}
#header .bottom .inr{display:flex; padding:0 20px; justify-content:space-between; align-items:center;}
#header nav{width:calc(100% - 280px);}
#header nav .gnb > ul{display:flex;}
#header nav .gnb > ul > li{position:relative;}
#header nav .gnb > ul > li+li{margin-left:50px;}
#header nav .gnb > ul > li > a{display:block; padding:17px 10px; padding-bottom:20px; font-size:23px; color:#111; font-family:'SCoreDream'; font-weight:500; transition:0.3s ease;}
#header nav .gnb > ul > li > a:hover,
#header nav .gnb > ul > li > a.on{color:#f47321;}
#header nav .gnb > ul > li:first-child > a{margin-left:0px;}
#header nav .gnb > ul > li > ul{display:none; position:absolute; top:71px; left:50%; transform:translateX(-50%); padding:20px 25px; z-index:90; width:100%; min-width:165px; box-sizing:border-box; background:#fff; border:1px solid #e1e1e1; text-align:left;}
#header nav .gnb > ul > li > ul > li+li{margin-top:8px;}
#header nav .gnb > ul > li > ul > li > a{display:inline-block; font-size:18px; color:#333; transition:0.3s ease;}
#header nav .gnb > ul > li > ul > li > a:hover{opacity:0.6;}
#header nav .gnb > ul > li > ul > li > ul{display:none;}
/*#header nav .gnb > ul > li.active > ul{opacity:1; visibility:visible;}*/
#header nav .gnb > ul > li.menu_gift a{color:#fff; padding:17px 40px; background:var(--point); font-weight:600; height:100%;}
#header nav .gnb > ul > li.menu_gift a:hover,
#header nav .gnb > ul > li.menu_gift a.on{background:#81b00f; opacity:1; color:#fff;}
#header nav .gnb > ul > li.menu_gift a:before{content:''; display:inline-block; vertical-align:middle; margin:-7px 7px 0 0; width:26px; height:28px; background:url(../images/common/img_gift.png)no-repeat center/contain;}

#header .btn_menu{display:none; position:absolute; top:50%; right:2%; z-index:91; width:40px; height:40px; font-size:0px; text-align:center; transform:translateY(-50%); transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:28px; height:18px; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2px; background:#222; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:28px;}
#header .btn_menu span:after{content:''; width:28px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:8px; width:28px; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .btn_menu em{display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:22px; height:18px; margin:-8px 0 0 -11px; transform:translateX(22px); transition:transform 0.5s ease 0.5s;}
#header .btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#222; transform:rotate(0);}
#header .btn_menu em i:nth-of-type(1){top:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
#header .btn_menu em i:nth-of-type(2){bottom:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
#header .btn_menu.active{background:#fff; border-radius:50%;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-28px);}
#header .btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
#header .btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
#header .btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
#header .btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
#header .btn_menu.active em i:nth-of-type(1){top:7px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:9px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}

.area_search.mo{display:none;}
.area_search{position:relative;}
.area_search input[type="text"]{margin:0; padding:5px 45px 5px 20px; color:#333; font-size:15px; width:280px; height:36px; border:2px solid #e8e8e8; outline:none; border-radius:18px;}
.area_search input::placeholder{color:#bbb;}
.area_search input[type="submit"]{margin:0; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:16px; height:16px; background:url(../images/common/icon_search.png)no-repeat center/contain; border:none; outline:none;}

/* shop */
 *[data-shop-list="default"] > li > a .percent{padding:10px 15px !important; margin-top:0px !important;}
 *[data-shop-list="default"] > li > a > em{font-size:18px;}

/* footer */
#footer{margin-top:45px;}
#footer .link{display:flex; position:relative; justify-content:center; padding:20px 0;}
#footer .link:before,
#footer .link:after{content:''; display:block; position:absolute; left:0; width:100%; height:1px; background:linear-gradient(to right, #fff, #ddd, #ddd, #fff);}
#footer .link:before{top:0;}
#footer .link:after{bottom:0;}
#footer .link li+li{margin-left:25px;}
#footer .link li a{display:block; color:#333; font-size:15px; transition:0.2s ease;}
#footer .link li:hover a{opacity:0.6;}
#footer .info{padding:45px 0; text-align:center;}
#footer .info .copy span{display:inline-block; margin:3px 14px; font-size:15px; color:#888;}
#footer .info .copy span a{color:#888;}
#footer .info p{margin-top:25px; font-size:12px; color:#aaa;}
#footer .info p b{color:#111;}


.lnb{max-width:1200px; margin:0 auto 50px;}
.lnb > ul{text-align:center;}
.lnb > ul > li{display:inline-block; margin:0 5px;}
.lnb > ul > li > a{display:inline-block; display:flex; flex-direction:column; justify-content:center; min-width:140px; height:50px; box-sizing:border-box; border:1px solid #e7e7e7; font-size:14px; text-align:center;}
.lnb > ul > li > a.on{border-color:#222; color:#222;}



@media screen and (max-width:1280px){
	#header .inr,
    #footer .inr{padding:20px 2%;}
    #header .left_logo{width:165px;}
    #header .logo > a{width:190px;}
    #header nav{width:calc(100% - 210px);}
    #header nav .gnb > ul{margin-left:-20px;}
    #header nav .gnb > ul > li+li{margin-left:35px;}
    #header nav .gnb > ul > li > a{font-size:18px;}
    #header nav .gnb > ul > li.menu_gift a{padding:17px 30px;}
    #header nav .gnb > ul > li.menu_gift a:before{width:20px; height:24px;}
    .area_search input[type="text"]{width:210px;}
}

@media screen and (max-width:1024px){
    #header{position:fixed; left:0; top:0; width:100%; z-index:999; background:#fff; height:72px;}
    #header .inr{padding:0 2% !important;}
    #header .top, #header .inr{height:100%;}
    #header .left_logo{width:120px; position:absolute; left:2%; top:50%; transform:translate(0,-50%);}
    #header .logo > a{width:135px;}
    #header .bottom{border-bottom:1px solid #e1e1e1;}
    
	#header .btn_menu{display:block;}
	
    #header .bottom{border-top:0;}
    #header .bottom .inr{display:block; padding:0 !important;}
    #header nav{width:auto;}
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; z-index:90; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}
    #header .area_menu_all .gnb > ul{display:block; margin-left:0;}
    #header .area_menu_all .gnb > ul > li+li{margin-left:0;}
	#header .area_menu_all .gnb > ul > li:not(.gnb_cate){display:block;}
	#header .area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); font-size:0px; transition:0.3s ease;}
	#header .area_menu_all .gnb{overflow-y:auto; position:absolute; top:0px; left:-80%; z-index:10; width:80%; height:100%; background:#fff; transition:0.7s ease;}
	#header .area_menu_all .gnb > ul li{position:relative;}
	#header .area_menu_all .gnb > ul > li{display:block; padding:0px; border-bottom:1px solid #e9e9e9;}
	#header .area_menu_all .gnb > ul > li > a{float:none; display:block; width:auto; padding:15px 40px 15px 15px !important; margin-left:0px; font-size:18px; text-align:left;}
	#header .area_menu_all .gnb > ul > li > ul{float:none; opacity:1; visibility:visible; position:static; left:auto; transform:none; width:auto; padding:10px 5px; background:#f5f5f5; border-width:0px; transition:none;}
	#header .area_menu_all .gnb > ul > li > ul > li{display:block; margin:0px;}
	#header .area_menu_all .gnb > ul > li > ul > li:hover > a,
	#header .area_menu_all .gnb > ul > li > ul > li:focus > a{color:#444;}
	#header .area_menu_all .gnb > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all .gnb > ul > li > ul > li.active > a,
	#header .area_menu_all .gnb > ul > li > ul > li.active:hover > a,
	#header .area_menu_all .gnb > ul > li > ul > li.active:focus > a{color:#f2483b;}
	#header .area_menu_all .gnb > ul > li > ul > li > a{display:block; width:auto; padding:10px 40px 10px 10px; font-size:16px;}
	#header .area_menu_all .gnb > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all .gnb > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all .gnb > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all .gnb > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all .gnb > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all .gnb > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
	#header .area_menu_all .open{display:block; position:absolute; right:5px; top:12px; width:35px; height:35px; background:transparent; font-size:0px;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:2px; margin-top:-6px; background:#cfcece;}
	#header .area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-5px;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}

	#header .area_menu_all.active,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active .gnb{left:0px;}
	
    .area_search.pc{display:none;}
	.area_search.mo{display:block; margin:auto; padding:20px 0; width:80%;}
    .area_search.mo input[type="text"]{width:100%;}
    
    .area_util.pc{display:none;}
    .area_util.mo{display:block; position:relative; padding:20px 0 40px; transform:none; top:auto; right:auto;}
    .area_util.mo ul{justify-content:center;}
    
/*    #header .left_logo.pc{display:none;}*/
/*    #header .left_logo.mo{display:block; margin:40px auto 0;}*/
	
	.lnb{margin:0 auto 30px;}
    
    #footer .link{padding:15px 0;}
    #footer .link li+li{margin-left:20px;}
    #footer .link li a{font-size:14px;}
    #footer .info{padding:20px 0;}
    #footer .info .copy span{margin:2px 7px; font-size:13px;}
    #footer .info .copy > br{display:none;}
    #footer .info p{margin-top:20px;}
}


@media screen and (max-width:767px){
    #header{height:60px;}
    #header .left_logo{width:100px;}
    #header .logo > a{width:100px;}
    
    #header .btn_menu{right:1%;}
    #header .btn_menu span{width:22px; height:14px;}
    #header .btn_menu span i{top:6px; width:22px;}
    #header .btn_menu span:before,
    #header .btn_menu span:after{width:22px;}
    #header .btn_menu em{width:19px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(19px);}
    #header .btn_menu.active em i:nth-of-type(1){top:6px;}
    #header .btn_menu.active em i:nth-of-type(2){bottom:8px;}
    
    #header .area_menu_all .gnb > ul > li > a{font-size:16px;}
    #header nav .gnb > ul > li.menu_gift a:before{margin:-6px 5px 0 0; width:17px; height:20px;}
    #header .area_menu_all .gnb > ul > li > ul > li > a{font-size:15px;}
    .area_util.mo{padding:10px 0 30px;}
    
    #footer .link li+li{margin-left:15px;}
    #footer .link li a{font-size:13px;}
    #footer .info{padding:10px 0;}
    #footer .info .copy span{margin:2px 4px; font-size:12px;}
}

@media screen and (max-width:480px){
	#header .left_logo{width:90px;}
}

/*


@media screen and (max-width:400px){
	#footer .top .inr > div{height:60px;}
	#footer .notice .bx-wrapper{margin-left:3%;}
	#footer .notice .bx-controls{width:90px;}
	#footer .notice .bx-controls > div{padding:0px;}
	#footer .notice .list li{width:calc(100% - 150px) !important;}
}

@media screen and (max-width:320px){
	.area_util ul > li{margin:0 8px;}
	*[data-shop-list="default"] > li > a .percent{height:50px !important; padding:7px 10px !important;}
}

@media screen and (max-width:300px){
	#header .btn_menu{overflow:hidden; width:40px;}
	.area_util{right:45px;}
	.area_util ul > li{margin:0 4px;}
}*/