@charset "utf-8";

#wrap{min-width:320px; word-break:keep-all; box-sizing:border-box; overflow:hidden;}
.inr{position:relative; margin:0 auto; max-width:1298px; width: 92%;}
.inr2{position:relative; margin:0 auto; width:1080px;}
.inr_list{width:calc(100% - 20px); -webkit-width:calc(100% - 20px); /*float:right;*/}
.over{overflow:hidden;}
img{max-width:100%;}

/* header */
#header{ position: relative; background: #fff; /*transition: .5s;*/ z-index: 10; }
#header .header_top{ padding: 33px 0 43px }
#header .header_top .inr{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px }
#header .header_top .search{ max-width: 456px; width: 100%; padding: 4px; background: linear-gradient(to right, #19b14c 0%, #4e83c0 50%, #f7941e 100%); border-radius: 100px; }
#header .header_top .search fieldset{ overflow: hidden; display: flex; background: #fff; border-radius: 100px; }
#header .header_top .search input[type="text"]{ margin: 0; flex: 1; width: 1px; height: auto; padding: 13px 13px 13px 30px; border: 0; outline: 0; font-size: 15px; }
#header .header_top .search input[type="text"]::placeholder{ color: #a9a9a9 }
#header .header_top .search input[type="submit"]{ margin: 0; width: 47px; height: 47px; padding: 0; border: 0; font-size: 0; background: url(../images/common/icon_search.png) no-repeat 6px calc(50% - 1px) }
#header .header_bottom{ border: 1px solid #ededed; border-width: 1px 0; }
#header nav .gnb{ display: flex; gap: 1px; height: 53px; padding: 0 1px; background: #ededed }
#header nav .gnb > li{ display:flex; justify-content: center; align-items: center; flex: 1; position: relative; background: #fff }
#header nav .gnb > li.color_bg{background:#f7941e;}
#header nav .gnb > li.color_bg > a,
#header nav .gnb > li.color_bg > a.on{color:#fff;}
#header nav .gnb > li > a{display:inline-block; font-size:17px; color:#222; font-weight:400;}
#header nav .gnb > li > a.on{color: #f7941e;}
#header nav .sub_menu{opacity:0; visibility:hidden; position:absolute; top:100%; left:0px; z-index:90; width:100%; min-width:165px; box-sizing:border-box; padding:30px 25px; background:#fff; border:1px solid #222; text-align:left; transition:0.3s ease;}
#header nav .sub_menu > li{padding:2px 0px;}
#header nav .sub_menu > li > a{display:inline-block; font-size:14px; color:#444; transition:0.3s ease;}
#header nav .sub_menu > li > a:hover{color: #f7941e;}
#header nav .sub_menu > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}

.area_util{ display: flex; align-self: center; gap: 40px; position:relative; padding-top: 2px; font-family: 'Montserrat', 'Pretendard-Regular', 'Noto Sans KR' , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; }
.area_util > li > a{display:inline-block; position:relative; font-size: 14px; font-weight: 700; color: #a9a9a9 }
.area_util [data-util]:before{content:''; display: inline-block; width:10px; height:12px; margin-right: 7px; background:no-repeat 0 100% }
.area_util [data-util="login"]:before{background-image:url(../images/common/img_util_login.svg);}
.area_util [data-util="logout"]:before{background-image:url(../images/common/img_util_login.svg);}
.area_util [data-util="join"]:before{background-image:url(../images/common/img_util_join.svg);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/img_util_join.svg);}
.area_util [data-util="basket"]:before{ display: none; }
.area_util [data-util="basket"]{ color:  #f7941e }
.area_util [data-util="basket"] i{display:inline-block; position: relative; margin-left: 5px; bottom: 2px; padding: 0 4px 0 3px; font-size:11px; color:#fff;}
.area_util [data-util="basket"] i::before{ content: ''; position: absolute; inset: -1px 0 1px 0; background:  #f7941e; background:  #f7941e; border-radius: 6.5px; z-index: -1; }
.area_util > li > a:hover span{opacity:1; transform:translateX(-50%) translateY(-30px);}

.area_util > li:last-child{ display: none; }
#header .btn_menu{ display: inline-flex; justify-content: center; align-items: center; position:relative; z-index:91; width:20px; height:20px; background: 0; font-size:0px; text-align:center; transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; width:19px; height:12px; margin:0 auto; }
#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:19px;}
#header .btn_menu span:after{content:''; width:19px;}
#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:5px; width:19px; 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:#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:hover span i{opacity:0;}*/
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-19px);}
#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{ padding: 80px 0 89px; box-sizing: border-box; background: #515254; font-family: 'Noto Sans KR' , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; font-size: 14px; font-weight: 300; color:rgba(255, 255, 255, 0.3); }
#footer .inr{ display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 40px }
#footer .inr .title{ font-size: 15px; font-weight: 400; color: #fff }

#footer .info{ min-width: 270px }
#footer .info .title{ margin-bottom: 11px; }
#footer .info > a[href*=tel]{ display: inline-block; margin-right: 22px; font-family: 'Montserrat', 'Noto Sans KR' , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; font-size: 35px; font-weight: 700; color: #fff }
#footer .info_time{ margin-bottom: 22px }
#footer .info_time span{ display: inline-block; position: relative }
#footer .info_time span + span{ margin-left: 16px; padding-left: 17px }
#footer .info_time span + span::before{ content: ''; position: absolute; margin: auto; inset: 0 auto 0 0; width: 1px; height: 11px; background: #6b6c6d }
#footer .info .link a{ position: relative; padding-right: 17px; font-size: 14px; font-weight: 400; color: #fff;  }
#footer .info .link a::before{ content: ''; position: absolute; margin: auto; inset: 0 0 0 auto; width: 5px; height: 5px; border: 1.5px solid #fff; border-width: 1.5px 1.5px 0 0; transform: rotate( 45deg )}
#footer .info a + a{ margin-left: 34px }

#footer .copy .company{ margin: 0 7px 30px 0; bottom: 2px; padding: 0; }
#footer .copy span{ display:inline-block; position: relative; margin: 0 22px 6px 0; padding-right: 23px; font-size: 14px; font-weight: 300; }
#footer .copy span::before{ content: ''; position: absolute; margin: auto; inset: 0 0 0 auto; width: 1px; height: 11px; background: #6b6c6d }
#footer .copy span:nth-of-type(1)::before,
#footer .copy span:nth-of-type(2)::before,
#footer .copy span:nth-of-type(5)::before,
#footer .copy span:nth-of-type(8)::before{ display: none; }
#footer .copy span b{ font-weight: 400; }
#footer .copy span a{ color:rgba(255, 255, 255, 0.3);}
#footer .copy p{margin-top:18px; }

.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 (max-width:1279px){
	#header .header_top{ padding: 10px 0 }
	#header .header_top .logo img{ height: 36px }
	#header .header_top .search{ order: 3; max-width: none }
	#header .header_top .search input[type="text"]{ padding: 9.5px 13px 9.5px 30px }
	#header .header_top .search input[type="submit"]{ height: 40px }
	.area_util > li:last-child{ display: block; }

	#header .header_bottom{ border: 0 }
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0; z-index:90; width:100%; height:100vh; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s;}	
	#header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0; 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; display:block; position:absolute; top:0px; left:-80%; z-index:10; width:80%; height:100%; background:#fff; transition:0.7s ease; gap:inherit;}
	#header .area_menu_all > ul li{position:relative;}
	#header .area_menu_all > ul > li{display:block; padding:0px; border-bottom:1px solid #e9e9e9;}
	#header .area_menu_all > ul > li > a{float:none; display:block; width:auto; padding:10px 40px 10px 15px; margin-left:0px; font-size:18px; text-align:left;}
	#header .area_menu_all > 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 > ul > li > ul > li{display:block; margin:0px;}
	#header .area_menu_all > ul > li > ul > li:hover > a,
	#header .area_menu_all > ul > li > ul > li:focus > a{color:#444;}
	#header .area_menu_all > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul > li > ul > li.active > a,
	#header .area_menu_all > ul > li > ul > li.active:hover > a,
	#header .area_menu_all > ul > li > ul > li.active:focus > a{color:#f2483b;}
	#header .area_menu_all > ul > li > ul > li > a{display:block; width:auto; padding:10px 40px 10px 10px; border-bottom:1px solid #d8d8d8;}
	/* #header .area_menu_all > ul > li > ul > li > *{display:block; vertical-align: middle; }	 */
	#header .area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
	#header .area_menu_all > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all > 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;}
    #header .area_menu_all.active{background:rgba(0,0,0,0.5);}

	#footer .inr{ flex-direction: column; }
	#footer .inr .title{ margin-bottom: 5px; }
	#footer .info > a[href*=tel]{ font-size: 24px; }
	#footer .info_time{ display: inline-block; }

	#footer { padding: 50px 0 60px; }

	.lnb{margin:0 auto 30px;}
}

@media (max-width:1080px){
    .inr2{width:96%;}
}

@media (max-width:767px){
	*[data-shop-list="default"] > li > a .percent{height:59px !important;}

	.area_util{ gap: 20px }
	.area_util [data-util]{ font-size: 0; }
	.area_util [data-util]:before{ margin-right: 0 }
	.area_util [data-util="basket"] i{ margin-left: 0; bottom: 1px }

	#footer .info > a[href*=tel]{ font-size: 20px; }
	#footer .copy span{ margin-right: 15px; padding: 0 }
	#footer .copy span::before{ display: none; }

	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}
}

@media (max-width:480px){
	*[data-shop-list="default"] > li > a .percent{height:55px !important; padding:10px 13px !important;}
	
	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}

@media (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 (max-width:300px){
	#header .btn_menu{overflow:hidden; width:40px;}
	.area_util{right:45px;}
	.area_util ul > li{margin:0 4px;}
}