@charset "utf-8";

body *{word-break:keep-all; box-sizing:border-box;}

/* header */
#header .inr{position:relative; max-width:1400px; margin:0 auto; box-sizing:border-box;}
#header .top_menu{border-bottom:1px solid #e6e6e6;}
#header .top_menu ul{display:flex; padding:12px 0; justify-content:flex-end;}
#header .top_menu ul li+li{margin-left:35px;}
#header .top_menu ul li a{font-size:15px; color:#333; transition:0.2s ease;}
#header .top_menu ul li a:hover{color:#ff0000; font-weight:bold;}
#header .inr_top{padding:15px 0; height:88px;}
#header h1.logo{position:absolute; left:0; cursor:pointer;}
#header h1.logo a{display:block; position:relative; width:200px;}
#header h1.logo a img{width:100%;}
#header .search_wrap{position:relative; margin:0 auto; padding-top:8px; width:400px;}
#header .search_wrap input[type="text"]{width:100%;height:40px;background:0; border:0; border-bottom:1px solid #111; outline:0; position:relative;right: 0;top: 0;}
#header .search_wrap .button{position:absolute; margin-left:-20px; bottom:10px; min-width:20px; height:19px; line-height:30px; background:url(/images/common/icon_search.png)no-repeat 50% 50%; border:0; font-size:0;}
#header .area_login{position:absolute; right:0; top:38px; font-size:0;}
#header .area_login li{display:inline-block;}
#header .area_login li a{display:block; position:relative; margin:0 10px; width:30px;}
#header .area_login li:last-child a{margin-right:0;}
#header .area_login li a i{position:absolute; top:-5px; right:-2px; width:17px; height:17px; background:#000; border-radius:50%; text-align:center; font-size:12px; line-height:16px; color:#fff;}
#header .area_login li a:before{content:''; display:block; position:absolute; top:0; left:0; width:30px; height:21px;}
#header .area_login .login a:before{background:url(/images/common/icon_login.png)no-repeat 50% 50%; background-size:contain;}
#header .area_login .my a:before{background:url(/images/common/icon_my.png)no-repeat 50% 50%; background-size:contain;}
#header .area_login .cart a:before{background:url(/images/common/icon_cart.png)no-repeat 50% 50%; background-size:contain;}
#header .area_login .deliver a:before{background:url(/images/common/icon_deliver.png)no-repeat 50% 50%; background-size:contain;}

#header nav{width:100%; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
.btn_menu{position:absolute; z-index:90; width:45px; height:45px; right:20px; top:14px; text-align:center;}
.btn_menu{display:none;}
.btn_menu span{display:block; width:24px; height:1px; margin: 0 auto; background:#222; text-align:center;}
.btn_menu span:nth-child(1){margin-top:14px;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}
#header nav .area_login, #header nav .search_wrap{display:none;}
#header .gnb{display:flex; justify-content:space-between; width:1400px; margin:auto;}
#header .gnb > li{position:relative;}
#header nav .gnb > li:before{content:''; display:none; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:2px; background:#ff0000; z-index:91;}
#header nav .gnb > li:hover:before{display:block;}
#header nav .gnb > li:hover > a{opacity:0.6; transition:0.3s ease 0s;}
#header nav .gnb > li > a{display:block; padding:20px 10px; font-size:16px; color:#1e1e1e; font-weight:500; text-align:center;}
#header .gnb > li > ul::after{content:""; display:block; clear:both; overflow:hidden;}
#header .gnb > li > ul > li > a{display:block; padding:6px 0; line-height:1.65; font-size:16px; font-weight:300; letter-spacing:-1px; transition:all 0.3s ease;}
#header .gnb > li > ul > li > a:hover{color:#7de2ab}
#header .gnb > li > ul > li > a.on{color:#00b4cb}
#header .bg{display:block; width:100%; height:0; position:absolute; top:100px; left:0; z-index:1; background-color:#fff; border-bottom:1px solid #f1f1f1; transition: height 0.3s ease 0s;}
#header.active .bg{height:170px;}
#header.active .gnb > li > ul{height:280px; border:0;}
#header.active .gnb > li > ul > li > a{color:#000;}
#header.active nav .gnb > li > ul{min-width:auto; left:0;}

#header nav .gnb > li:hover > ul{display:block; transition:0.4s ease;}
#header nav .gnb > li > ul{display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:90; width:100%; min-width:150px; text-align:center; text-align:left;transition:0.4s ease;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; background:#fff; border:1px solid #e6e6e6;}
#header nav .gnb > li > ul > li{position:relative;}
#header nav .gnb > li > ul > li > a{position:relative; display:block; width:100%; padding:10px 0; text-align:center; font-size:14px; color:#444; transition:0.3s ease;}
#header nav .gnb > li > ul > li:hover > a{color:#000; background:#f5f5f5;}

.menu_top p{margin-top:10px; color:#949494;}
#header .m_gnb h1{float:none;  margin-top:34px; padding-left:25px;}
.m_gnb > ul > li:nth-child(12),
#header .gnb > li:nth-child(12){display:none;}
/* .m_area_util{margin-top:40px;overflow:hidden;  padding:20px; box-sizing:border-box; background:#4c4c4c;}
.m_area_util a{display:inline-block; width: 49%; height:31px; box-sizing: border-box; padding:5px 0; margin:2px 0px; border:1px solid #fff; vertical-align:middle; color:#fff; text-align:center; font-size:14px;} */
.m_gnb{z-index:999; overflow-y:auto; position:fixed; top:0px; right:-100%; width:280px; height:100%; background:#fff; transition:all 0.5s ease-out 0s;}
.m_gnb.active{right:0;}
.m_gnb > ul > li > a{display:block; position:relative; padding:10px 25px; color:#000; transition:all 0.3s ease 0s;}
.m_gnb > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(../images/main/menu_button.png) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active{}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#f5f5f5; }
/* .m_gnb > ul > li > ul > li{border-bottom:1px solid #555;} */
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:10px 25px; font-size:14px; color:#444; }
.gnb_mo{ margin:auto; padding:0 0; box-sizing:border-box; width:100%;}
.gnb_mo > li:first-child{border-top:1px solid #e6e6e6; padding-top:10px;}

.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:30px; right:-100%; width:24px; height:23px; font-size:0px; transition:0.8s;}
.m_gnb.active .btn_close{opacity:1; right:15px;}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:1px; background:#333; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:1px; background:#333; bottom: 9px; transform:rotate(-45deg);}

.cover{position: fixed; width: 100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, 0.6); z-index:89; display:none;}
.cover.active{display:block;}

/* quick_menu */
.quick_wrap{position:fixed; top:50%; right:-95px; z-index:9999; height:278px; width:95px; background-color:rgb(170, 170, 170, 0.2); border-top-left-radius:20px; border-bottom-left-radius:20px; transform:translateY(-50%); transition:0.3s;}
.quickopen{right:0px; transition:0.3s;}
.quick_wrap i{display:block; font-size:12px; text-align:center; color:#222;}
.quick_wrap .quick_btn{position:absolute; top:50%; left:-62px; transform:translateY(-50%) rotate(90deg); width:100px; height:25px; color:#fff; font-size:12px; background:#ff6666; text-align:center; line-height:25px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; cursor:pointer;}
.quick_wrap .quick_list{margin:20px 0 0 20px;}
.quick_wrap .quick_list li a{display:block; padding-top:6px; width:55px; height:55px; background:#fff; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,0.15); box-sizing:border-box;}
.quick_wrap .quick_list li a span{display:block; margin:0 auto 3px; width:31px;}
.quick_wrap .quick_list li+li{margin-top:6px;}

/* footer */
#footer{margin-top:100px; padding:50px 0; background:#f5f5f5; position:relative;}
#footer .wrap{position:relative; width:1400px; margin:auto;}
#footer .footer_top{clear:both; overflow:hidden;}
#footer .footer_top ul{float:left; margin-bottom:30px;}
#footer .footer_top ul li{float:left; line-height: 30px; margin-right:20px; color:#fff; font-size:15px; font-weight:500; cursor:pointer; transition:0.3s ease 0s;}
#footer .footer_top ul li:hover{opacity:0.6;}
#footer .footer_top ul li a{color:#666;}
#footer .footer_top .sns{position:absolute; right:0; top:0; display:flex; flex-direction:row; flex-wrap:nowrap;}
#footer .footer_top .sns a{display:block; margin-left:6px;}

#footer .f_logo{position:absolute; right:0; top:0;}
#footer .address span{display:inline-block; color:#888; margin:0 25px 5px 0; font-weight:300; font-size:14px;}
#footer .address span em{font-weight:500; margin-right:5px;}
#footer .address span a{display:inline-block; color:#555;}
#footer .address span:last-child{margin-top:30px;}
#footer .copy{margin-top:30px; text-transform:uppercase; font-size:14px; font-weight:300; color:#aeaeae;}
#footer .copy em{font-weight:500; color:#666;}

#footer .top_btn{position:absolute; right:1%; top:-30px;}
#footer .top_btn a{display:block; padding-top:26px; position:relative; width:55px; height:55px; background:#222; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,0.15); cursor:pointer; font-size:12px; color:#fff; text-align:center; box-sizing:border-box;}
#footer .top_btn a:before{content:''; display:block; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:16px; height:8px; background:url(/images/common/top.png)no-repeat 50%;}


#header h1.logo a img {
	bottom: 8px;
	position: relative;
}

/* kakao-floatingbutton */
.kakao-contener {
	position: fixed;
	bottom: 100px;
	right: 40px;
	z-index: 999999;
}
.kakao-link {
	text-decoration: none;
	position: relative;
	display: block;
	width: 80px;
	height: 80px;
	padding: 10px 5px;
	background: #f9e100;
	border-radius: 15px;
	box-sizing: border-box;
} 
.kakao-link>span {
	display: block;
	width: 40px;
	height: 42px;
	margin: 0 auto;
	background: url(/images/common/icon_ch.png)no-repeat 50% 50%;
}
.kakao-link>p {
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	color: #222;
	font-weight: 800;
	margin-top: 3px;
	letter-spacing:-1px;
}
/* kakao-floatingbutton - end */


@media screen and (max-width:1400px){
	#header .inr{max-width:96%;}
	#header nav .gnb, #footer .wrap{width:96%;}

  #footer{margin-top:60px;}
}

@media screen and (max-width:1200px){
	.kakao-contener {
		bottom: 40px;
		right: 40px;
	}

	#footer .f_logo{display:none;}
}

@media screen and (max-width:1024px){
    #header{border-bottom:1px solid #e6e6e6;}
    #header .top_menu ul{padding:8px 0;}
    #header .top_menu ul li+li{margin-left:30px;}
    #header .top_menu ul li a{font-size:14px;}
	#header .inr_top{height:83px;}
	#header h1.logo a{width:180px;}
	#header h1.logo a img{width:100%;}
	#header .area_login, #header .search_wrap{display:none;}
	.btn_menu{display:block;}
	#header nav{display:none;}
	#header .m_gnb .area_login, #header .m_gnb .search_wrap{display:block;}
	#header .search_wrap{margin-top:20px;width:81%; padding-top:0;}
	#header .area_login{position:static; padding:25px; margin-bottom:20px; width:100%;}
	#header .area_login li a{padding:0; margin:0 13px;}
	.btn_menu{top:62px;}


	#footer{padding:40px 0;}
	#footer .footer_top ul{margin-bottom:20px;}
	#footer .address span{font-size:13px;}
	#footer .address span:last-child{margin-top:20px;}
	#footer .copy{margin-top:20px;font-size:12px;}
}

@media screen and (max-width:767px){
	.kakao-contener {
		bottom: 30px;
		right: 25px;
	}

	div[class*="area_"] .title{font-size:22px;}

    #header .top_menu ul li a{font-size:13px;}
	#header .inr_top{height:64px; padding:10px 0;}
	#header h1.logo a{width:150px;}
	.btn_menu{top:51px;}

}


@media screen and (max-width:600px){

    #header .top_menu ul{padding:6px 0;}
    #header .top_menu ul li+li{margin-left:22px;}
    #header .inr_top{height:58px;}
    #header h1.logo a{width:130px;}
    .btn_menu{top:42px;}
    
	#footer .footer_top ul li{margin-right:15px;}
}