@charset "utf-8";

body{position:relative;}
body:before,
body:after{content:''; display:block; position:absolute; top:0; width:1px; height:100%; background:rgba(20,20,21,0.05); z-index:-100;}
body:before{left:calc(100% / 3);}
body:after{right:calc(100% / 3);}

/* header */
#header{position:fixed; width:100%; top:0; left:0; height:100%; z-index:100; pointer-events:none;}
#header .inr{position:relative; margin:0 auto; padding:40px 0; height:100%; width:95%; pointer-events:none;}
#header .logo{display:inline-block;}
#header .logo > a{display:block; width:212px; pointer-events:auto;}
#header .logo > a img{width:100%;}
.area_util{position:absolute; right:0px; top:28px; height:50px; box-shadow:8px 8px 20px 5px rgba(92,92,177,0.25); z-index:99; pointer-events:auto; background:#fff; border-radius:25px;}
.area_util > ul{display:flex; padding:0 70px 0 20px; font-size:0; height:100%; background:#fff; border-radius:25px;}
.area_util > ul > li{display:inline-block; margin:0 10px;}
.area_util > ul > li > a{display:inline-block; position:relative; margin-top:16px; padding:0 10px; pointer-events:auto; cursor:pointer;}
.area_util [data-util]:before{content:''; display:block; width:18px; height:18px; background-repeat:no-repeat; background-position:50% 0; background-size:contain;}
.area_util [data-util="search"]:before{background-image:url(../images/common/icon_search.svg);}
.area_util .search_wrap.active [data-util="search"]:before{background-image:url(../images/common/icon_close.svg);}
.area_util [data-util="login"]:before{background-image:url(../images/common/icon_log.svg);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/icon_log.svg);}
.area_util [data-util="basket"]:before{background-image:url(../images/common/icon_cart.svg);}
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:1px; top:-5px; width:18px; height:18px; text-align:center; line-height:18px; background:var(--dark); border-radius:50%; font-size:10px; color:#fff;}
.area_util > ul > li > a:hover span{opacity:1; transform:translateX(-50%) translateY(0px);}
.area_util > ul > li.search_wrap{display:flex; pointer-events:auto;}
.area_util > ul > li.search_wrap .box{position:relative; margin:7px 0 0 0; height:35px; background:#f1f1f1; width:0; border-radius:20px; transition:0.5s ease;}
.area_util > ul > li.search_wrap.active .box{margin-right:15px; width:190px;}
.area_util > ul > li.search_wrap .box input[type="text"]{padding:2px 45px 2px 15px; border:none; outline:none; height:30px; background:transparent; width:100%;}
.area_util > ul > li.search_wrap .box input[type="submit"]{opacity:0; visibility:hidden; position:absolute; top:2px; right:10px; width:30px; height:30px; font-size:0; background:none; background-image:url(../images/common/icon_search.svg); background-repeat:no-repeat; background-size:18px; background-position:center; border:none; outline:none; transition:0.5s ease;}
.area_util > ul > li.search_wrap.active .box input[type="submit"]{opacity:1; visibility:visible;}
.area_util .log_after{position:relative;}
.area_util .log_after ul{/*opacity:0; visibility:hidden;*/ position:absolute; top:0; left:50%; transform:translateX(-50%); padding:0 24px; width:140px; background:var(--dark); border-bottom-left-radius:20px; border-bottom-right-radius:20px; height:0; transition:0.5s ease; z-index:-1;}
.area_util .log_after ul:before{content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:30px; height:11px; background:url(../images/common/menu_open.svg)no-repeat center/contain;}
.area_util .log_after ul li{opacity:0; transition:0.3s ease; transition-duration:0.5s;}
.area_util .log_after ul li+li{margin-top:10px;}
.area_util .log_after ul li a{display:block; position:relative; padding-left:15px; font-size:14px; color:#fff; transition:0.3s ease; font-weight:700;}
.area_util .log_after ul li a:before{content:''; display:block; position:absolute; top:8px; left:0; width:5px; height:5px; background:#fff; border-radius:50%;}
.area_util .log_after ul li a:hover{opacity:0.6;}
.area_util .log_after.active ul{opacity:1; visibility:visible; padding:30px 24px 20px; top:50px; height:auto;}
.area_util .log_after.active ul li{opacity:1;}
.area_util.mo{display:none; pointer-events:auto;}

#header .btn_menu{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; pointer-events:auto; background:var(--dark); border-radius:50%;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:22px; height:16px; 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:#fff; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:14px;}
#header .btn_menu span:after{content:''; width:14px;}
#header .btn_menu span:before{right:4px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:4px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:7px; width:22px; 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:19px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(19px); transition:transform 0.5s ease 0.5s;}
#header .btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#fff; 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,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-22px);}
#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:7px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#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; pointer-events:auto;}	
#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; padding-top:120px; top:0px; right:-360px; z-index:10; width:360px; height:100%; background:#fff; transition:0.7s ease;}
#header .area_menu_all .gnb > ul li{position:relative;}
#header .area_menu_all .gnb > ul > li.mt{margin-top:30px;}
#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 50px; margin-left:0px; font-size:18px; text-align:left; font-weight:800; color:var(--dark); transition:0.3s ease;}
#header .area_menu_all .gnb > ul > li > a:hover{color:var(--main);}
#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:#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; border-bottom:1px solid #d8d8d8;}
#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{right:2.5%;}

#header .main_nav{position:absolute; top:50%; left:0; transform:translateY(-50%); pointer-events:auto;}
#header .main_nav li+li{margin-top:25px;}
#header .main_nav li a{display:block; font-size:14px; font-weight:800; color:#aaa; transition:0.3s ease;}
#header .main_nav li a:hover{color:var(--main);}

#header .sns{display:flex; position:absolute; bottom:40px; left:0; pointer-events:auto;}
#header .sns li+li{margin-left:24px;}
#header .sns li a{display:block; position:relative; height:18px; opacity:1; transition:0.3s ease;}
#header .sns li a:hover{opacity:0.3;}
#header .sns li a img{height:100%;}

#header .btn_top{display:block; position:absolute; bottom:40px; right:0; width:50px; height:50px; border-radius:50%; box-shadow:6px 6px 20px 5px rgba(92,92,177,0.25); pointer-events:auto; background:#fff; transition:0.3s ease;}
#header .btn_top:before{content:''; display:block; position:absolute; margin-top:2px; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:9px; height:9px; border-top:2px solid var(--dark); border-left:2px solid var(--dark);}
#header .btn_top:hover{background:var(--dark);}
#header .btn_top:hover:before{border-color:#fff;}



/* footer */
#footer{padding:80px 0; background:#111;}
#footer .inr{position:relative; margin:auto; width:1320px;}
#footer .top{display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:35px; border-bottom:1px solid rgba(255,255,255,0.25);}
#footer .top .f_logo{display:block; width:212px;}
#footer .top .f_logo img{width:100%;}
#footer .top .link{display:flex;}
#footer .top .link li+li{margin-left:25px;}
#footer .top .link li a{display:block; font-size:14px; color:#fff; opacity:0.8; transition:0.3s ease;}
#footer .top .link li a:hover{opacity:0.4;}
#footer .bottom{margin-top:35px;}
#footer .bottom .copy{font-size:0;}
#footer .bottom .copy span{display:inline-block; margin:0 20px 5px 0; font-size:13px; color:#fff; opacity:0.6;}
#footer .bottom .copy span a{display:inline-block; color:#fff;}
#footer .bottom .copy p{margin-top:20px; font-size:12px; color:#999; text-transform:uppercase;}
#footer .bottom .copy p strong{color:#fff;}


.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:1620px){   
    #footer{padding:80px 180px;}
    #footer .inr{width:100%;}
}


@media screen and (max-width:1400px){
    #header .inr{width:94%;}
    #header .main_nav{display:none;}
    
    #footer{padding:80px 3%;}
}

@media screen and (max-width:1024px){
	.lnb{margin:0 auto 30px;}
    
    #header .inr{padding:25px 0;}
    #header .logo > a{width:180px;}
    #header .sns{display:none;}
    .area_util{top:14px;}
    
    #footer{padding:60px 3%;}
    #footer .top{padding-bottom:25px;}
    #footer .top .f_logo{width:180px;}
    #footer .bottom{margin-top:25px;}
}

@media screen and (max-width:767px){
    #header .logo > a{width:160px;}
    .area_util.pc > ul{display:none;}
    .area_util.mo{display:block; bottom:0; top:auto; width:100%; height:60px;}
    .area_util.mo > ul{border-radius:0; padding:0; justify-content:space-evenly;}
    .area_util.mo > ul > li > a{margin-top:20px;}
    .area_util.mo [data-util="home"]:before{background-image:url(../images/common/icon_home.svg);}
    .area_util.mo .log_after{position:static;}
    .area_util.mo .log_after ul{top:auto; bottom:0; width:100%;}
    .area_util.mo .log_after.active ul{padding:30px 30px 35px; top:auto; bottom:60px; width:100%; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:20px;}
    .area_util.mo .log_after ul:before{display:none;}
    .area_util.mo .log_after.active [data-util="mypage"]:before{background-image:url(../images/common/icon_close.svg);}
    .area_util.mo .log_after ul li+li{margin-top:12px;}
    .area_util.mo .log_after > a,
    .area_util.mo .search_wrap > a{position:relative;}
    .area_util.mo .log_after.active > a:after,
    .area_util.mo .search_wrap.active > a:after{content:''; display:block; position:absolute; bottom:38px; left:50%; transform:translateX(-50%) rotate(180deg); width:30px; height:11px; background:url(../images/common/menu_open.svg)no-repeat center/contain;}
    .area_util.mo .search_wrap.active > a:after{bottom:60px;}
    .area_util.mo > ul > li.search_wrap .box{position:absolute; margin:0; padding:30px 30px 70px; left:0; bottom:-50px; width:100%; border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:20px; background:var(--dark); z-index:-1;}
    .area_util.mo > ul > li.search_wrap.active .box{width:100%; bottom:60px;}
    .area_util.mo > ul > li.search_wrap .box input[type="text"]{background:#f1f1f1; border-radius:20px; height:34px;}
    .area_util > ul > li.search_wrap .box input[type="submit"]{top:33px; right:40px;}
    
    #header .btn_top{bottom:70px; width:40px; height:40px;}
    
    #header .btn_menu{width:40px; height:40px;}
    #header .area_menu_all .gnb{padding:60px 0 100px; width:320px;}
    #header .area_menu_all .gnb > ul > li > a{padding:8px 40px; font-size:16px;}
    #header .area_menu_all .gnb > ul > li.mt{margin-top:20px;}

	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}
    
    #footer{padding:50px 3% 110px;}
    #footer .top{display:block;}
    #footer .top .f_logo{margin:0 auto 20px; width:160px;}
    #footer .top .link{justify-content:center;}
    #footer .top .link li+li{margin-left:20px;}
    #footer .top .link li a{font-size:13px;}
    #footer .bottom .copy{text-align:center;}
    #footer .bottom .copy > br{display:none;}
    #footer .bottom .copy span{margin:2px 9px; font-size:12px;}
    #footer .bottom .copy p{font-size:11px;}
}