@charset "utf-8";
body{color:#090a0b; font-size:16px}
/* html{font-size:1rem} */

#header{height: 106px; background-color: #fff; width: 100%; position: relative; z-index: 10;}
#header .inner{max-width: 1240px; width: 100%;  background-color: #fff; height: 100%; margin:  0 auto;  box-sizing: border-box; padding: 0 20px; position: relative; z-index: 9;}

h1.logo{position: absolute; left: 20px; top: 50%; margin-top: -31px;}
h1.logo a{height: 62px; line-height: 62px; font-size:20px;}
h1.logo a img{margin-right: 12px; height: 62px;}

nav ul.gnb {text-align: center;}
nav ul.gnb > li{display: inline-block; vertical-align: middle; position: relative;}
nav ul.gnb > li > a{padding: 0 50px; display: block; line-height: 106px;}

#header nav .gnb {font-size:19px}
#header nav .gnb > li.active ul{opacity:1; visibility:visible;top:90px ; z-index:10; transition-delay:0s, 0s, 0s;}
/* #header nav .gnb > li:last-child ul{left:65%;} */
#header nav .gnb > li > a{transition:all 0.3s ease 0s; line-height: 111px; }
#header nav .gnb > li > a:hover{color:#d42b2b}
#header nav .gnb > li ul{display:none; position:absolute; z-index: 6; opacity:0; visibility:hidden; top:80px; left: 50%; transform: translateX(-50%); width:100%; padding:8px 17px; background:#d42b2b; border:1px solid #d42b2b; box-shadow:15px 20px 29px 0px rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;}
#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
#header nav .gnb > li ul > li > a{display:block; color:#fff; position:relative; padding:10px 0px; /* background:#fff; */ border-top:1px solid #e1e1e1; font-size:15px; text-align:left; transition:all 0.3s ease 0s;}
#header nav .gnb > li ul > li > a:hover{opacity:0.5;}
#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}

#header .btn_menu{}
#header .btn_menu{position:absolute;top:50%;margin-top: -12px;right:20px;z-index:9999;width:23px;height:24px;font-size:0px;display: none;transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block; position:absolute; left:0px; width:100%; height:2px; background:#000;}
#header .btn_menu > span:nth-of-type(1){top:5px;}
#header .btn_menu > span:nth-of-type(2){top:50%; margin-top:-1px; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:17px;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
/* #header .btn_menu.active{position:fixed; top:25px; transform:rotate(180deg);} */
#header .btn_menu.active > span:nth-of-type(1){top:10px; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10px; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn_close{position:fixed; opacity:0; visibility:hidden; top:0px; left:0px; z-index:99; width:-webkit-calc(100% - 320px); width:100%; height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}

.area_util{position:absolute; right:20px; top:50%; /* margin-top:2px;  */transform:translateY(-50%); -webkit-transform:translateY(calc(-50%));}
.area_util ul > li{display:inline-block;/*  margin:0 17px; */ vertical-align: middle; }
.area_util ul > li + li{margin-left: 30px;}
.area_util ul > li > a{display:inline-block; position:relative; vertical-align: middle; }
.area_util ul > li > a span{opacity:0; position:absolute; bottom:-20px; left:50%; display:inline-block; padding:0 10px; background:#f1f1f1; border-radius:50rem; font-size:12px; color:#444; white-space:nowrap; transform:translateX(-50%) translateY(-20px); transition:0.4s ease;}
.area_util ul > li.search button{display: block; width: 19px; height: 19px; background: url(../images/common/icon_util01.svg); background-size: cover; background-repeat: no-repeat; font-size:0; position: relative; top: 2px;}
.area_util [data-util="login"]{width: 22px; height: 22px; background-image:url(../images/common/icon_util02.svg); background-size: cover; background-repeat: no-repeat; }
.area_util [data-util="logout"]{width: 22px; height: 23px; top: 2px; background-image:url(../images/common/icon_logout.svg); background-size: cover; background-repeat: no-repeat; }

.area_util [data-util="join"]{width: 22px; height:22px; background-image:url(../images/common/icon_util02.svg); background-size: cover;  background-repeat: no-repeat;}
.area_util [data-util="mypage"]{ width: 21px; height:19px;  background-image:url(../images/common/icon_util02.svg); background-size: cover;  background-repeat: no-repeat;}
.area_util [data-util="basket"]{width: 22px; height: 22px; background-image:url(../images/common/icon_util03.svg); background-size: cover; background-repeat: no-repeat; }
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:-10px; top:-8px; padding:2px 6px; background:#d42b2b; border-radius:100%; font-size:10px; color:#fff;}
/* .area_util li.logout{position: absolute;  right: 0; top: -32px; z-index: 2;} */
/* .area_util li.logout a{font-size:12px; background:#e4e4e4; border-radius: 40px; display: block; padding:4px 12px} */
.area_util ul > li > a:hover span{opacity:1; transform:translateX(-50%) translateY(0px);}

#searchBarForm{}
.area_search{position: absolute; top: 80px; left: 0; width: 100%;opacity: 0;visibility: hidden;transition: all .2s;box-sizing: border-box;border: 1px solid #d1d1d1;background-color: #ffffff; height: 80px;border-top: 1px solid #eee;z-index: 9;display: flex;justify-content: center;align-items: center; }
.area_search .input_box{max-width:360px;width: 90%;margin: 0 auto;position: relative;height: 45px;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;border:2px solid #fff;background-color: #e6e6e6;border-radius: 50px;overflow: hidden;}
.area_search .input_box input{width:calc(100% - 62px);background-color: transparent;border: 0;height: 44px;box-sizing: border-box;padding: 8px 20px;font-size: 12px;}
.area_search .input_box button{background-color: transparent; margin-right: 20px; width: 21px; height: 21px; background: url(../images/common/icon_search.png); background-size: cover; background-repeat: no-repeat; font-size:0; position: relative;text-align: center;}
.area_search.show{opacity: 1; visibility: visible;top: 106px;}



@media all and (min-width:1023px){

}


/* footer */
#footer{background-color:#2d2d2d; position: relative; z-index: 1;}
.footer_top,.footer_bottom{text-align: center;}
.footer_top{height: 48px; border-bottom: 1px solid #353535;}
.footer_top a{vertical-align: middle; font-size:14px; color:#fff; opacity: 0.5; padding: 0 45px; font-weight: 300; line-height: 49px;}
.footer_bottom{padding:40px 0}
.footer_bottom a.logo{display: block; margin-bottom: 20px;}
.footer_bottom a.tel{display: block; color:#fff; font-family:'Kanit',sans-serif; font-size:18px; margin-bottom:17px;}
.footer_bottom address span{color:#999; margin:3px 0; display: inline-block;}
.footer_bottom address span + span{margin-left: 26px;}
.footer_bottom address span em{color:#fff; font-weight: 300; margin-left: 10px;}
.footer_bottom p.copyright{font-size:12px; font-weight: 300; color:#fff; opacity: 0.14; font-family: 'Open Sans',sans-serif; margin-top: 24px;}

@media all and (max-width:1024px){
    body{font-size:15px}
    #header{height: 114px;}
    h1.logo{top: 12px; margin-top:0;}
    h1.logo a{line-height: 52px; height: 52px;}
    h1.logo a img{height: 52px;}
    .area_util{top: 24px; transform: none;}
	 #header .btn_menu, 
	#header .btn_close{
    display: block;
    opacity: 0;
    z-index: -1;
}
    #header nav {position: absolute; width: 100%; text-align: center; bottom: 0; left:0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
    #header nav a.book{display: none;}
    #header nav .gnb > li > a{line-height: 40px; padding:0 14px}
    /* #header nav{position: fixed; right: -100%; top: 0; background: #fff; width: 100%; height: 100vh; z-index: 300;}
    #header nav .gnb {left: 0; top: 80px; position: relative; z-index: 11; text-align: left;} 
    #header nav .gnb > li{display: block; padding: 10px 22px; font-size:20px}
    #header nav .gnb > li > ul{display: none;}
    #header nav .gnb > li > ul > li{font-size: 16px; display: block; padding: 4px 8px;}
    nav ul.gnb > li > a{line-height: inherit; padding:0} */
    body.active #header nav{right: 0;}

    /* .area_util{right: 72px;} */
    .area_util ul > li + li{margin-left: 16px;}
    
    nav ul.gnb{width: 100%;;}
    nav ul.gnb > li{width: 25%; box-sizing: border-box; float: left;}
    nav ul.gnb > li + li{border-left: 1px solid #ddd;}
    #header nav .gnb > li ul,#header nav .gnb > li.active ul{top: 40px; box-sizing: border-box;}
    /* #header nav .gnb > li:nth-child(4){pointer-events: none;} */

#header nav .gnb > li a.active +  ul {
    opacity: 1;
    visibility: visible;
}
}
@media all and (max-width:640px){
    .footer_top, .footer_bottom{text-align: left;}
    .footer_top a{padding:0 20px }
    .footer_bottom{padding:30px 20px}
    .footer_bottom address span{display: block; font-size:13px}
    .footer_bottom address span + span{margin-left: 0;}
    .footer_bottom address br{display: none;}
   
}
@media all and (max-width:480px){
    #header nav .gnb > li > a{font-size:14px}
}
@media all and (max-width:360px){
    
}