@charset "utf-8";

/* header */
#header nav{text-align:center;}
#header .logo{display:inline-block;}
#header .logo > a{display:block; width:229px; vertical-align:middle;}
#header .logo > a img{width:100%;}
#header .inr{position:relative; max-width:1400px; width:96%; margin:0 auto; }
#header .inr.top{position:relative; padding:40px 0; font-size:8px;}
#header .gnb_wrap{border-top:1px solid #e4e4e4;}
#header .gnb_wrap .inr{display:flex;}
#header nav{width:100%;}
#header nav .gnb{font-size:0;}
#header nav .gnb > ul > li{display:inline-block; margin-left:25px; position:relative;}
#header nav .gnb > ul > li:first-child{margin-left:0px;}
#header nav .gnb > ul > li:last-child{margin-left:70px;}
#header nav .gnb > ul > li:last-child:before{content:''; display:block; position:absolute; top:25px; left:-36px; width:1px; height:14px; background:#222;}
#header nav .gnb > ul > li > a{display:block; padding:20px 15px; font-size:17px; color:#222; font-weight:500; transition:0.3s ease;}
#header nav .gnb > ul > li > a:hover{color:#aaa;}
#header nav .gnb > ul > li > a.on{color:#118d9c;}
#header nav .gnb > ul > li > ul{opacity:0; visibility:hidden; position:absolute; top:65px; left:50%; transform:translateX(-50%); z-index:90; width:100%; min-width:160px; box-sizing:border-box; padding:20px; background:#fff; border:1px solid #ddd; text-align:left; transition:0.3s ease; border-radius:15px; box-shadow:10px 5px 29px rgba(0,0,0,0.2);}
#header nav .gnb > ul > li > ul > li{padding:2px 0px; margin:5px 0;}
#header nav .gnb > ul > li > ul > li > a{position:relative; padding-left:15px; display:block; font-size:15px; color:#222; transition:0.3s ease;}
#header nav .gnb > ul > li > ul > li > a:hover{color:#aaa;}
#header nav .gnb > ul > li > ul > li > a:before{content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:#ddd; transition:0.3s ease;}
#header nav .gnb > ul > li > ul > li > a:hover:before{background:#118d9c;}
#header nav .gnb > ul > li > ul > li > ul{display:none;}
#header nav .gnb > ul > li.active > ul{opacity:1; visibility:visible;}
#header .btn_all_menu{position:relative; width:22px; cursor:pointer;}
#header .btn_all_menu span{position:absolute; top:50%; transform:translateY(-50%); display:block; width:100%; height:2px; background:#222;}
#header .btn_all_menu span:nth-child(1){margin-top:-6px;}
#header .btn_all_menu span:nth-child(3){margin-top:6px;}
#header .all_menu{display:none; position:absolute; width:100%; border-top:1px solid #e4e4e4; background:#fff; box-shadow:0 20px 40px rgba(0,0,0,0.2); z-index:99;}
#header .all_menu ul.m1{display:flex; justify-content:space-between; margin:auto; padding:50px 0; max-width:1400px; width:96%;}
#header .all_menu ul.m1 > li{width:calc(100% / 9 - 40px);}
#header .all_menu ul.m1 > li > a{display:block; padding-bottom:15px; font-size:17px; color:#222; border-bottom:1px solid #e4e4e4; font-weight:500;}
#header .all_menu ul.m2{margin-top:12px;}
#header .all_menu ul.m2 > li{margin:3px 0;}
#header .all_menu ul.m2 > li > a{display:block; position:relative; padding:3px 0 3px 13px; font-size:14px; color:#222; transition:0.3s ease;}
#header .all_menu ul.m2 > li > a:before{content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:#ddd; transition:0.3s ease;}
#header .all_menu ul.m2 > li > a:hover{color:#aaa;}
#header .all_menu ul.m2 > li > a:hover:before{background:#118d9c;}
.area_util{position:absolute; right:0px; top:50%; transform:translateY(-50%);}
.area_util ul{display:inline-block;}
.area_util ul > li{display:inline-block; margin:0 17px;}
.area_util ul > li:last-child{margin-right:0;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{display:block; font-size:13px; color:#333;}
.area_util [data-util]:before{content:''; display:block; width:27px; height:27px; margin:0 auto 8px; background-repeat:no-repeat; background-position:50% 0;}
.area_util [data-util="login"]:before{background-image:url(../images/common/icon_log.png);}
.area_util [data-util="logout"]:before{background-image:url(../images/common/icon_log.png);}
.area_util [data-util="join"]:before{background-image:url(../images/common/icon_my.png);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/icon_my.png);}
.area_util [data-util="basket"]:before{background-image:url(../images/common/icon_cart.png);}
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:3px; top:-5px; width:19px; height:19px; background:#118d9c; border-radius:500%; font-size:11px; color:#fff; line-height:19px; text-align:center;}
.m_area_util{display:none;}
.btn_homepage{display:inline-block; vertical-align:bottom; margin-left:35px; padding:8px 22px; background:#118d9c; width:120px; height:60px; border-radius:30px; font-size:15px; font-weight:500; color:#fff !important; box-sizing:border-box; letter-spacing:0.5px; box-shadow:5px 5px 20px rgba(17,141,156,0.3); transition:0.5s ease;}
.m_btn_homepage{display:none;}
.btn_homepage:hover{background:#09626c;}
.btn_homepage img{display:inline-block; padding:6px 0 0px 5px; width:15px;}
.m_search_btn{display:none;}
/*#header .search_wrap{display:inline-block; position:relative; margin:0 0 3px 60px; vertical-align:bottom; width:360px;}*/
#header .search_wrap{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); vertical-align:bottom; width:360px;}
#header .search_wrap input[type="text"]{position:relative; padding:5px 60px 5px 25px; width:100%; height:60px; background:0; border:2px solid #dbdbdb; outline:0; box-sizing:border-box; border-radius:30px; font-size:15px; color:#222;}
#header .search_wrap input[type="text"]::placeholder{font-size:14px; color:#999;}
#header .search_wrap .btn_search{position:absolute; right:25px; top:22px; width:20px; height:20px; line-height:30px; background:url(/images/module/icon_search.png)no-repeat 50% 50%; border:0; font-size:0; background-size:contain;}

#header .btn_menu{display:none; position:absolute; top:50%; right:0px; z-index:91; width:50px; height:50px; 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:20px; height:15px; 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:20px;}
#header .btn_menu span:after{content:''; width:20px;}
#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:6px; width:20px; 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:20px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(20px); 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 span i{opacity:0;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-20px);}
#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:6px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:8px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}

/* 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; background:#071517;}
#footer .inr{position:relative; max-width:1400px; width:96%; margin:0 auto;}
#footer .link{display:flex; padding:35px 0; border-bottom:1px solid rgba(255,255,255,0.15);}
#footer .link li{position:relative;}
#footer .link li:before{content:''; display:block; position:absolute; top:1px; left:-25px; width:1px; height:18px; background:rgba(255,255,255,0.25);}
#footer .link li:first-child:before{display:none;}
#footer .link li a{display:block; color:#fff; font-size:14px;}
#footer .link li+li{margin-left:50px;}
#footer .info_wrap{display:flex; padding:45px 0;}
#footer .info_wrap h3{margin-bottom:20px; font-size:15px; color:#fff; font-weight:500;}
#footer .info_wrap .cs_center{padding-right:100px;border-right:1px solid rgba(255,255,255,0.25);}
#footer .info_wrap .cs_center .tel{display:block; margin-bottom:15px; font-size:25px; color:#fff; line-height:initial; font-family:'GmarketSansMedium';}
#footer .info_wrap .cs_center p{color:#c6c6c6; font-size:14px;}
#footer .info_wrap .cs_center p em{display:inline-block; margin-right:8px; color:#fff;}
#footer .info_wrap .copy{padding-left:100px; font-size:0;}
#footer .info_wrap .copy span{display:inline-block; margin:0 25px 4px 0; color:#bbb; font-size:13px;}
#footer .info_wrap .copy span a{display:inline-block; color:#bbb;}
#footer .info_wrap .copy span a.business_num{background:#494949; margin-left:3px; padding:1px 6px; border-radius:3px; cursor:pointer; transition:0.2s;}
#footer .info_wrap .copy span a.business_num:hover{background:#999; color:#fff;}
#footer .info_wrap .copy p{margin-top:20px; font-size:12px; color:#888;}
#footer .info_wrap .copy p strong{color:#fff; font-weight:600;}
#footer .quick{position:fixed; right:2%; bottom:40px; z-index:111;}
#footer .quick a{display:block; position:relative; width:50px; height:50px; border-radius:50%; cursor:pointer;}
#footer .quick a+a{margin-top:8px;}
#footer .quick a.scroll_btn{background:rgba(255,255,255,0.3); border:2px solid #ddd; transition:0.3s ease;}
#footer .quick a.scroll_btn:hover{border-color:#118d9c;}
#footer .quick a.scroll_btn:before{content:''; display:block; position:absolute; top:50%; left:50%; transform-origin:center; width:12px; height:12px; border-top:2px solid #ddd; border-right:2px solid #ddd; transition:0.3s ease;}
#footer .quick a.scroll_btn:hover:before{border-color:#118d9c;}
#footer .quick a.scroll_btn.up:before{margin-top:3px; transform:translate(-50%,-50%) rotate(-45deg);}
#footer .quick a.scroll_btn.down:before{margin-top:-3px; transform:translate(-50%,-50%) rotate(135deg);}
.business_img_wrap{display:none; position:fixed; top:0; left:0; width:100%; height:100vh; backdrop-filter:blur(8px); background:rgba(255,255,255,0.5); z-index:222;}
.business_img_wrap.active{display:block;}
.business_img_wrap .box{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:600px; width:90%; box-shadow:0 0 50px rgba(0,0,0,0.2);}
.business_img_wrap .box img{width:100%;}
.business_img_wrap .box .close{position:absolute; top:0; right:0; width:50px; height:50px; background:#071517; font-size:0;}
.business_img_wrap .box .close:before,
.business_img_wrap .box .close:after{content:''; display:block; position:absolute; top:50%; left:50%; transform-origin:center; width:2px; height:25px; background:#fff;}
.business_img_wrap .box .close:before{transform:translate(-50%,-50%) rotate(-45deg);}
.business_img_wrap .box .close:after{transform:translate(-50%,-50%) rotate(45deg);}
.screen_fix{overflow:hidden;}


/*lnb*/
.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:1400px){
    #header nav .gnb > ul > li{margin-left:18px;}
    #header nav .gnb > ul > li:last-child{margin-left:44px;}
    #header nav .gnb > ul > li:last-child:before{left:-20px;}
    #header nav .gnb > ul > li > a{padding:20px 5px; font-size:16px;}
    #header .all_menu ul.m1{flex-wrap:wrap; justify-content:flex-start; padding-top:0;}
    #header .all_menu ul.m1 > li{margin-top:50px; margin-right:50px; width:calc(100% / 5 - 40px);}
    #header .all_menu ul.m1 > li:nth-child(5n){margin-right:0;}
}

@media screen and (max-width:1180px){
    #header .search_wrap{margin-left:-60px;}
}

@media screen and (max-width:1024px){
    #header{position:fixed; top:0; left:0; width:100%; z-index:99; background:rgba(255,255,255,0.9); backdrop-filter:blur(5px); border-bottom:1px solid #ebebeb;}
    #header .inr.top{padding:20px 0; width:100% !important;}
    #header .logo{margin-left:3%;}
    #header .logo > a{width:150px;}
    
    #header .search_wrap{display:none; padding:40px 5%; top:88px; left:auto; transform:none; width:100%; margin-left:0; z-index:10; box-shadow:0 40px 30px rgba(0,0,0,0.2); background:#fff;}
    #header .search_wrap input[type="text"]{padding:5px 50px 5px 22px; height:50px; font-size:14px;}
    #header .search_wrap .btn_search{top:50%; right:calc(5% + 22px); width:18px; transform:translateY(-50%);}
    .m_search_btn{display:block; position:absolute; margin-top:1px; top:50%; right:60px; transform:translateY(-50%); width:20px; height:20px;}
    .m_search_btn:before{content:''; display:block; position:absolute; top:0; left:0; width:13px; height:13px; border-radius:50%; border:2px solid #222;}
    .m_search_btn:after{content:''; display:block; position:absolute; bottom:0px; right:2px; width:2px; height:8px; background:#222; transform:rotate(-45deg);}
    .m_search_btn.active:before{top:50%; left:50%; transform:translate(-50%,-50%) rotate(-45deg); width:2px; height:22px; border:none; background:#222; border-radius:0;}
    .m_search_btn.active:after{bottom:auto; right:auto; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); height:22px;}
    
    #header .btn_all_menu{display:none;}
    #header .gnb_wrap{border-top:0;}
    #header .gnb_wrap .inr{position:static; width:100% !important;}
	#header .btn_menu{display:block;}
    #header .btn_menu.active{right:10px; border-radius:50%; background:#fff;}
	
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; z-index:90; width:100%; height:100vh; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}	
	#header .area_menu_all > 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:100vh; 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; margin-left:0;}
    #header nav .gnb > ul > li:last-child{margin-top:34px; margin-left:0;}
    #header nav .gnb > ul > li:last-child:before{left:15px; top:-17px; width:calc(100% / 1 - 30px); height:1px; background:#ddd;}
	#header .area_menu_all .gnb > ul > li{display:block; padding:0px;}
	#header .area_menu_all .gnb > ul > li > a{float:none; display:block; width:auto; padding:10px 40px 10px 15px; margin-left:0px; font-size:17px; text-align:left;}
	#header .area_menu_all .gnb > ul > li > ul{float:none; opacity:1; visibility:visible; position:static; width:auto; margin:0 15px 15px; padding:0; background:#fff; border-width:0px; transition:none; transform:none; box-shadow: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:5px 40px 5px 13px; font-size:15px;}
	#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:5px; 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_util{display:none}
    .m_area_util{display:block; position:static; padding:30px 2%; transform:none;}
    .m_area_util [data-util]:before{background-size:contain; width:22px; height:22px;}
    .m_area_util [data-util="basket"] i{width:18px; height:18px; font-size:10px;}
    .m_area_util ul > li:first-child{margin-left:0;}
    .m_btn_homepage{display:block;}
    .btn_homepage{margin:30px auto 0; padding:14px 12px; width:80%; height:50px;} 
    .btn_homepage img{padding-top:7px; width:20px;}

	.lnb{margin:0 auto 30px;}
    
    #footer .link{padding:25px 0;}
    #footer .link li a{font-size:13px;}
    #footer .link li+li{margin-left:30px;}
    #footer .link li:before{top:2px; left:-16px; height:15px;}
    #footer .info_wrap{display:block; padding:35px 0;}
    #footer .info_wrap h3{margin-bottom:16px; font-size:14px;}
    #footer .info_wrap .cs_center{padding-bottom:35px; padding-right:0; border-right:0; border-bottom:1px solid rgba(255,255,255,0.25);}
    #footer .info_wrap .cs_center .tel{margin-bottom:10px; font-size:22px;}
    #footer .info_wrap .cs_center p{font-size:13px; line-height:1.8;}
    #footer .info_wrap .copy{padding-left:0; padding-top:35px;}
    #footer .info_wrap .copy span{margin:0 20px 3px 0; font-size:13px;}
    #footer .info_wrap .copy p{margin-top:12px;}
    .business_img_wrap .box{width:auto; height:80%;}
    .business_img_wrap .box img{width:auto; height:100%;}
    .business_img_wrap .box .close{width:40px; height:40px;}
    .business_img_wrap .box .close:before, .business_img_wrap .box .close:after{height:20px;}
    #footer .quick a{width:40px; height:40px;}
    #footer .quick a.scroll_btn:before{width:9px; height:9px;}
}

@media screen and (max-width:767px){
    #header .inr.top{padding:15px 0;}
    #header .logo > a{width:120px;}
    #header .search_wrap{top:68px;}
    
    #footer .info_wrap .copy > br{display:none;}
    #footer .info_wrap .copy span a.business_num{font-size:12px; padding:0 5px;}
}

@media screen and (max-width:750px){
	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}
}

@media screen and (max-width:480px){
	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}

@media screen and (max-width:400px){
    #footer .link li+li{margin-left:25px;}
    #footer .link li:before{left:-13px;}
    #footer .link li a{font-size:12px;}
}

@media screen and (max-width:300px){
	#header .btn_menu{overflow:hidden; width:40px;}
}