@charset "utf-8";

/* header */
#header{position:relative; z-index:90; background:#fff;}
#header nav{text-align:center;margin-left: 260px; font-family:"Pretendard", Sans-serif;}
#header .logo{position:relative; top:-10px; display:inline-block;}
#header .logo > a{display:block; width:191px; height:34px; background:url(../images/common/logo.png) no-repeat 50% 0 / 100% 100%; font-size:0px; vertical-align:middle;}
#header .inr{position:relative; max-width:1400px; margin:0 auto;}
#header .header_top{position:relative; background:#fff;}
#header .header_top .inr{padding:36px 0px;}
#header nav .gnb > li{display:inline-block; position:relative;}
#header nav .gnb > li > a{display:inline-block;margin-left:50px;padding: 17.5px 0;font-size: 17px;color:#222;font-weight: 300;line-height:1em;box-sizing:border-box;}
#header nav .gnb > li > a.on{color:#0b327a;}
#header nav .gnb > li:first-child > a{margin-left:33px;}
#header nav .gnb > li > ul{opacity:0; visibility:hidden; position:absolute; top:35px; 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 .gnb > li > ul > li{padding:2px 0px;}
#header nav .gnb > li > ul > li > a{display:inline-block; font-size:14px; color:#444; transition:0.3s ease;}
#header nav .gnb > li > ul > li > a:hover{color:#0b327a;}
#header nav .gnb > li > ul > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}
.header_search{vertical-align:bottom; display:inline-block; margin-left:84px; width:413px; height:50px; border:2px solid #1d75df; border-radius:50px; box-sizing:border-box; overflow:hidden;}
.header_form{ position: relative; display: flex; max-width: 420px; width: 100%; height: 50px; background: #fff; border:none; box-sizing: border-box; }
.header_form__input{ flex: 1; width: 1px; padding: 0 22px; border: 0; font-size: 14px; line-height: 1; outline:none;}
.header_form__input::placeholder{ color: #8f8f8f; }
.header_form__btn{ position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 100%; fill:none;stroke: #1d75df;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px; background:#fff;}
.header_form__btn svg{ height: 21px; }

.area_util{position:absolute; right:0px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
.area_util ul > li{position:relative; display:inline-block; padding:0 32px;}
.area_util ul > li:last-child{padding-right:0;}
.area_util ul > li:before{content:''; position:absolute; top:7px; left:10px; width:1px; height:14px; background:#e7e7e7;}
.area_util ul > li:first-child:before{display:none;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{opacity:1;position:absolute;bottom:0;right: -24px;display:inline-block;padding: 0 12px;background:#6b6b6b;border-radius:50px;font-size:12px; font-weight:200; color: #fff;white-space:nowrap;transition:0.3s ease; font-family: "Pretendard", sans-serif;}
.area_util [data-util]:before{content:''; display:block; width:30px; height:25px; margin:0 auto 3px; background-repeat:no-repeat; background-position:50% 0;}
.area_util [data-util="login"]:before{background-image:url(../images/common/icon_login.svg);}
.area_util [data-util="logout"]:before{background-image:url(../images/common/icon_login.svg);}
.area_util [data-util="join"]:before{background-image:url(../images/common/img_util_join.png);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/img_util_mypage.png);}
.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:-12px; top:-2px; padding:2px 6px; background:#2276d8; border-radius:100%; font-size:10px; color:#fff; font-family: "Pretendard", sans-serif;}
/*.area_util ul > li > a:hover span{opacity:1; transform:translateX(-50%) translateY(0px);}*/
.area_util_nav{}
.area_util_nav ul > li{position:relative; margin:0 20px;}
.area_util_nav ul > li:last-child{margin-right:0;}
.area_util_nav ul > li:before{content:''; position:absolute; top:19px; right:-20px; width:1px; height:13px; background:#e7e7e7;}
.area_util_nav ul > li:last-child:before{display:none;}
.area_util_nav ul > li > a{display:block; padding:17px 0 18px; font-size:15px; font-weight:300; color:#c4c4c4; line-height:1em; word-break:keep-all;}


.header_bottom{position:relative; background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee; box-sizing:border-box;}
.header_bottom .btn-menu-wrap{position:relative; width:260px;}
.header_bottom .btn-menu{position: absolute;width:100%;height: 54px;background:#1e77d5;padding:0 16px;box-sizing:border-box;top: -1px;}
.header_bottom .btn-menu .btn-menu__txt{font-size:18px; font-weight:bold; color:#fff; line-height:1em; word-break:keep-all;}
.header_bottom .btn-menu-wrap ul{display:none;position:absolute;top: 53px;left:0;width:100%;border:1px solid #1e77d5;padding:30px;box-sizing:border-box;background:#fff;border-radius:0 0 20px 20px;z-index:90;text-align:left;}
.header_bottom .btn-menu-wrap.active ul{z-index:-1;}
body.main .header_bottom .btn-menu-wrap ul{display:block;}
.header_bottom .btn-menu-wrap ul > li{margin-bottom:25px;}
.header_bottom .btn-menu-wrap ul > li:last-child{margin:0;}
.header_bottom .btn-menu-wrap ul > li > a{font-size:15px; font-weight:400; color:#222; line-height:1em; word-break:keep-all;}
.header_bottom .btn-menu .btn-menu__icon{ position:absolute; top:50%; left:16px; display: inline-block; width: 20px; height: 14px; transform:translateY(-50%); }
.header_bottom .btn-menu .btn-menu__bar{ position: absolute; inset: 0; margin: auto; display: block; height: 2px; background:#fff; transition:all 0.3s ease;}
.header_bottom .btn-menu .btn-menu__bar:nth-child(1){ transform: translateY(-6px); }
.header_bottom .btn-menu .btn-menu__bar:nth-child(2){ transform-origin: right; }
.header_bottom .btn-menu .btn-menu__bar:nth-child(3){ transform: translateY(6px); }
.header_bottom .btn-menu.active .btn-menu__bar:nth-child(1){transform:rotate(-45deg);}
.header_bottom .btn-menu.active .btn-menu__bar:nth-child(3){transform:rotate(45deg);}
.header_bottom .btn-menu.active .btn-menu__bar:nth-child(2){display:none;}


.header_bottom nav{display:inline-block;}
.area_util_nav{position:absolute; top:0; right:0;}
.area_util_nav ul{display:flex;}

#header .btn_menu{display:none; position:absolute; top:50%; right:0px; z-index:91; width:58px; height:58px; 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:19px; height:12px; 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: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;}


.m_gnb{display:none; position:absolute; top:178px; width:100%; padding:45px 0; border-top:1px solid #1e77d5; border-bottom:1px solid #1e77d5; background:#fff; z-index:100; box-sizing:border-box; font-family:"Pretendard", Sans-serif;}
.m_gnb.active{display:block;}
.m_gnb_list > ul{display:flex; flex-wrap: wrap;}
.m_gnb_list > ul > li{margin:0 0 50px; width:calc(100% / 7);  text-align:left;}
.m_gnb_list > ul > li > a{position:relative; display:block; margin:0 0 15px; font-size:17px; font-weight:600; color:#222; line-height:1em; word-break:keep-all; }
.m_gnb_list > ul > li > ul{}
.m_gnb_list > ul > li > ul > li{margin:0 0 5px;}
.m_gnb_list > ul > li > ul > li > a{font-size:16px; font-weight:500; color:#343434; line-height:1em; word-break:keep-all;}
.m_gnb_list > ul > li > ul ul{padding:6px 0 12px 2px;}
.m_gnb_list > ul > li > ul ul a{font-weight:300; color:#787878;}
.m_gnb_list > ul > li > ul ul a::before{content:"-"; display:inline-block; padding-right:6px; color:#9f9f9f;}
.m_gnb_list.board{padding-top:45px; border-top:1px solid #eee; box-sizing:border-box;}
.m_gnb_list.board > li{margin:0;}
.m_gnb .btn_close{ position: absolute; top: 20px; right:20px; width: 24px; height: 24px; background:#fff;}
.m_gnb .btn_close::before,
.m_gnb .btn_close::after{ content: ''; position: absolute; inset: 0; margin: auto; height: 2px; background: currentColor; }
.m_gnb .btn_close::before{ transform: rotate(45deg); }
.m_gnb .btn_close::after{ transform: rotate(-45deg); }
.cover{ position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index:-1; }
.cover:not(.active){ visibility: hidden; opacity: 0; }

/* 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;}
#footer .top{overflow:hidden; height:70px; box-sizing:border-box; border-top:1px solid #efefef; border-bottom:1px solid #efefef;}
#footer .top .inr{max-width:1400px; margin:0 auto;}
#footer .top .inr:after{content:''; display:block; clear:both;}
#footer .top .inr > div{display: flex; align-items: center; width:100%; height:70px; box-sizing:border-box; color:#222;}
#footer .top h2{display:inline-block; font-size:16px;}
#footer .story > a{display:inline-block; margin-left:25px; color:#fff; font-size:14px; font-weight:100;}
#footer .notice{position:relative;}
#footer .notice h2{width:87px; padding:4px 5px 5px; font-weight:600; color:#fff; background:#1e77d5; box-sizing:border-box; border-radius:5px; text-align:center;}
#footer .notice .bx-wrapper{width:calc(100% - 117px); width:-webkit-calc(100% - 117px); height:100%; margin-left:30px;}
#footer .notice .bx-viewport{height:100%; }
#footer .notice .list{width:calc(100% - 22px) !important;}
#footer .notice .list li{width:100%; height:70px;}
#footer .notice .list a{display: flex; align-items: center; height:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#222; font-size:14px; font-weight:100;}
#footer .notice .list a .date{width:113px; margin-right:25px; padding:8px 5px 10px; border:1px solid #eee; box-sizing:border-box; border-radius:50px; text-align:center; font-size:14px; font-weight:300; color:#9f9f9f; line-height:1em; word-break:keep-all;}
#footer .notice .list a .subject{width:calc(100% - 128px); width:-webkit-calc(100% - 128px); font-size:17px; font-weight:400; color:#1f1f1f; line-height:1em; word-break:keep-all;}
#footer .notice .bx-controls{position:absolute; right:0px; top:0px; width:22px; height:100%; box-sizing:border-box; background:#fff;}
#footer .notice .bx-controls > div{display:flex; flex-direction: column; align-items:center; justify-content: center; height:100%; padding:0 10px;}
#footer .notice .bx-controls > div:after{content:''; display:block; clear:both;}
#footer .notice .bx-controls a{position:relative; display:block; width:22px; height:16px; text-align:center; color:#aaa; font-size:13px;transition:0.3s ease; text-indent:-9999px;}
#footer .notice .bx-controls a:after{content:''; position:absolute; top:0; left:0; width:22px; height:16px; background:url(../images/common/icon_down.svg)no-repeat center; background-size:contain; opacity:0.4;}
#footer .notice .bx-controls a.bx-prev:after{transform:rotate(-180deg);}


#content .area_info h2{margin-bottom:10px; font-size:17px; font-weight:600; color:#222;}
.area_info{padding:40px 0; background:#f2f3f5;}
.area_info:after{content:''; display:block; clear:both;}
.area_info .inr{width:1400px; display:flex; margin:0 auto;}
.area_info .inr > div{position:relative; width:50%; box-sizing:border-box;}
.area_info .inr > div:before{content:''; position:absolute; top:50%; right:0; width:1px; height:100%; background:#dedfe1; transform:translateY(-50%);}
.area_info .inr > div:last-child:before{display:none;}
.area_info .inr > div h2{display:block; margin:0 0 10px; font-size:17px; font-weight:700; color:#222; line-height:1em; word-break:keep-all;}
.area_info .customer{padding-right:70px;}
.area_info .customer .customer_info{display:flex; align-items: center; justify-content: space-between;}
.area_info .customer a{display:inline-block; font-size:40px; font-weight:700; line-height:1.3em; color:#1c76d6; font-family: 'Montserrat', "Pretendard", sans-serif;}
.area_info .customer ul{position:relative; width:calc(100% - 235px); background:#fff; margin-left:40px; padding:25px 25px 25px 80px; box-sizing:border-box; border-radius:10px;}
.area_info .customer ul:before{content:''; position:absolute; top:30px; left:30px; width:28px; height:22px; background:url(../images/common/icon_notice.svg)no-repeat center; background-size:contain;}
.area_info .customer ul li i,
.area_info .customer ul li span{display:inline-block; vertical-align:middle; color:#6b6b6b; font-size:15px; font-weight:400; font-family:"Pretendard", sans-serif;}
.area_info .customer ul li{margin:0 0 3px;}
.area_info .customer ul li:last-child{margin:0;}
.area_info .customer ul li span{margin-left:7px;}
.area_info .account{padding-left:70px;}
.area_info .account p{display:block; padding:5px 0 0; font-size:15px; font-weight:400; color:#222; line-height:1em; word-break:keep-all;}
.area_info .account .account_number{margin-top:20px; font-size:25px; font-weight:700; line-height:1.3em; color:#1c76d6; font-family: 'Montserrat', "Pretendard", sans-serif;}
.area_info .account .account_info{margin-top:10px; display:flex;}
.area_info .account .account_info > li{position:relative; font-size:15px; font-weight:400; color:#222; line-height:1em; word-break:keep-all; margin-right:40px;}
.area_info .account .account_info > li:before{content:''; position:absolute; top:2px; right:-21px; width:1px; height:14px; background:#222;}
.area_info .account .account_info > li:last-child:before{display:none;}
.area_info .bank{width:505px; border-left:1px solid #e8e8e8; padding-left:45px;}
.area_info .bank em{display:block; font-size:35px; font-weight:600; line-height:1.3em; color:#111;}
.area_info .bank ul{margin-top:10px;}
.area_info .bank ul li i,
.area_info .bank ul li span{display:inline-block;}
.area_info .bank ul li i:before{content:''; display:inline-block; width:23px; height:21px; margin-right:5px; margin-top:-2px; vertical-align:middle; background:url(../images/main/img_bank.png) no-repeat 50% 0;}
.area_info .bank ul li span{margin-left:10px; padding-left:10px; border-left:1px solid #ddd;}
.area_info .category{width:335px; border-left:1px solid #e8e8e8; padding-left:45px;}
.area_info .category .site{width:70%;}
.area_info .category li{float:left; width:50%; margin-top:10px;}
.area_info .category li > a{display:inline-block; color:#666;}
.area_info .category li > a:hover{color:#0b327a;}
.area_info .category li ul{display:none;}

.area_shopList *[data-category-location="tab"] .web > li > a{padding:10px !important;}
*[data-shop-list="default"] > li > a .price, 
*[data-shop-list="default"] > li > a .sold{margin-top:5px !important; font-family:'Montserrat', "Pretendard", sans-serif;}
*[data-shop-list="default"] > li .img{position:relative; border-radius:20px; overflow:hidden;}
*[data-shop-list="default"] > li > a > em{margin-top:20px !important; font-size: 17px; font-weight: 600 !important; color: #292929; line-height:1.3em; font-family:'Montserrat', "Pretendard", sans-serif;}
*[data-shop-list="default"] > li > a .price i:last-child{font-size: 18px; text-decoration: none; color: #292929;}




#footer .bottom{padding:40px 0 60px 0; text-align:left; background:#222;}
#footer .bottom .inr{width:1400px; margin:0 auto;}
#footer .bottom .ft_logo{margin:0 0 20px;}
#footer .bottom .ft_logo img{height:23px;}

#footer .bottom .link{padding-bottom:40px;}
#footer .bottom .link > li{display:inline-block; position:relative; padding:0 30px;}
#footer .bottom .link > li:before{content:''; display:block; position:absolute; top:60%; left:0px; width:1px; height:15px; margin-top:-6px; background:#4e4e4e;}
#footer .bottom .link > li:nth-of-type(1):before{display:none;}
#footer .bottom .link > li > a{display:inline-block; font-size:15px; color:#777; font-weight:300; transition:0.3s ease;}
#footer .bottom .link > li > a strong{font-weight:400;}
#footer .bottom .link > li.private a{color:#bababa;}
#footer .bottom .link > li:first-child{padding-left:0;}
#footer .sns{margin:30px 0 20px; text-align:center;}
#footer .sns > li{display:inline-block; margin:0 7px;}
#footer .sns > li > a{display:inline-block; position:relative; font-size:0px;}
#footer .sns > li > a:before{content:''; display:block; width:45px; height:45px; margin:0 auto; background-repeat:no-repeat; background-position:50% 0; background-size:auto 100%;}
#footer .sns > li [data-sns="face"]:before{background-image:url(../images/common/img_face.png);}
#footer .sns > li [data-sns="instar"]:before{background-image:url(../images/common/img_instar.png);}
#footer .sns > li [data-sns="blog"]:before{background-image:url(../images/common/img_blog.png);}
#footer .sns > li [data-sns="kakao"]:before{background-image:url(../images/common/img_kakao.png);}
#footer .copy{font-family:"Pretendard", Sans-serif;}
#footer .copy span{position:relative; display:inline-block; margin:0 37px 0 0; font-size:15px; font-weight:300; color:#fff; opacity:0.7;}
#footer .copy span:before{content:''; position:absolute; top:4px; right:-20px; width:1px; height:13px; background:rgba(255,2555,255,0.2);}
#footer .copy span.fax:before,
#footer .copy span.tno:before{display:none;}
#footer .copy span a{display:inline-block; color:#fff; font-size:14px; font-weight:300;}
#footer .copy span i{display:inline-block; font-weight:400; color:#fff; opacity:0.4; margin:0 0 5px;}
#footer .copy p{margin-top:15px; font-size:13px; color:#fff; font-weight:200; opacity:0.4;}

.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:1500px){
	#header .inr{width:90%;}
	#footer .top .inr,
	.area_info .inr{width:90%;}
	#footer .bottom .inr{width:90%;}
}
@media screen and (max-width:1400px){
	.area_info .customer a{font-size:36px;}
	.area_info .customer ul{width:calc(100% - 220px); padding:25px 20px 25px 70px}
	.area_info .customer{padding-right:50px;}
	.area_info .account{padding-left:50px;}
}
@media screen and (max-width:1300px){
	.header_search{margin-left:40px;}
	.header_bottom .btn-menu-wrap{width:220px;}
	#header nav{margin-left:220px;}
	.area_info .customer .customer_info{display:block;}
	.area_info .customer a{font-size:30px;}
	.area_info .customer a br{display:none;}
	.area_info .customer ul{margin-left:0; margin:15px 0 0; padding:15px 15px 15px 60px; width:100%;}
	.area_info .customer ul:before{top:20px; left:20px;}
}
@media screen and (max-width:1200px){
	.header_bottom .btn-menu-wrap{width:190px;}
	.header_bottom .btn-menu-wrap ul{padding:20px;}
	.header_bottom .btn-menu-wrap ul > li{margin-bottom:15px;}
	.header_search{margin-left:20px;}
	#header nav{margin-left:190px;}
}

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

	/*#header .logo > a{background-image:url(../images/common/logo@x2.png);}*/
	#header .logo{position:absolute; top:45px; left:0;}
	#header .header_top .inr{text-align:center;}
	#header .btn_menu{display:block; z-index:-966;}
	
	/*
	#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;}	
	#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: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; top:0px; left:-80%; z-index:10; width:80%; height:100%; background:#fff; transition:0.7s ease;}
	#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_bottom .btn-menu-wrap{}
	body.main .header_bottom .btn-menu-wrap ul{display:none;}
	.header_bottom .btn-menu{width:54px;}
	.header_bottom .btn-menu .btn-menu__txt{display:None;}
	#header nav{margin-left:54px;}
	.m_gnb{position:fixed; top:0; left:0; bottom:0; width:400px; overflow-y:scroll; border-top:none; border-bottom:none;}
	.m_gnb_list > ul{display:block;}
	.m_gnb_list > ul > li{width:100%; margin:0;}
	.m_gnb_list > ul > li > a{margin:0; padding:13px 0;}
	.m_gnb_list > ul > li > ul{display:none; background:#f9f9f9; padding:12px; box-sizing:border-box; }
	.m_gnb_list > ul > li > ul > li:last-child{margin:0;}
	.m_gnb_list > ul > li > ul > li > a{color:#666;}
	.m_gnb_list > ul > li > a.open::before{ content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right:0; width: 12px; height: 7px; background: url('/images/common/menu_button.svg') no-repeat 50% 0; transition: all .4s ease 0s; background-size: 100%; opacity:0.5;}
	.m_gnb_list > ul > li > a.active::before{ transform: translateY(-50%) rotate(180deg); }
	.m_gnb .btn_close{top: 15px; right:15px;}
	.cover{z-index:1;}

	#footer{margin-top:30px;}
	#footer .copy span{margin:0 25px 0 0;}
	#footer .copy span:before{right:-14px;}

/*
	#footer .top .inr{padding-right:0px;}
	#footer .top .inr > div.story{display:none;}
	#footer .top .inr > div{float:none; width:100%;}
	#footer .notice h2{padding-left:0px; border-left-width:0px;}	
	#footer .notice .bx-wrapper{width:auto; margin-left:5%;}
	#footer .notice .list{width:auto !important;}
	#footer .notice .list li{width:calc(100% - 220px) !important;}
*/
	.lnb{margin:0 auto 30px;}
}

@media screen and (max-width:900px){
	#header .inr{width:94%;}
	#header .logo{position:relative; top:0; left:0;}
	#header .header_top .inr{padding:25px 0 20px;}
	#footer .top .inr,
	.area_info .inr{width:94%;}
	#footer .bottom .inr{width:94%;}

	#header .logo{display:block;}
	.area_util{top:30px; transform:none;}
	.header_search{margin-left:0; margin-top:20px; width:100%;}
	.header_form{max-width:100%;}
	#header nav .gnb > li > a{margin-left:20px;}
}
@media screen and (max-width:768px){
	.m_gnb_list > ul > li > ul{display:none;}
	.area_util_nav ul > li{margin:0 10px;}
	.area_util_nav ul > li:before{top:20px; right:-9px; height:10px;}
	.area_util_nav ul > li > a{font-size:14px;}
	.area_info .customer{padding-right:20px;}
	.area_info .account{padding-left:20px;}
	.m_gnb{width:300px;}
	#header .m_gnb .inr{width:100%;}
	#header .m_gnb .m_gnb_list{width:90%; margin:0 auto;}
	#footer .notice h2{width:75px; font-size:15px;}
	#footer .notice .bx-wrapper{width:calc(100% - 87px); width:-webkit-calc(100% - 87px); margin-left:12px;}
	#footer .notice .list a .date{display:none; width:90px; font-size:13px; margin-right:12px;}
	#footer .notice .list a .subject{font-size:16px; width:100%;}
	#footer .copy br{display:none;}
}
@media screen and (max-width:750px){
	#footer .bottom{padding:35px 0 30px;}
	#footer .bottom .logo{width:270px; height:33px;}
	#footer .bottom .link{margin-top:20px;}
	#footer .bottom .link > li{padding:0 15px;}
	#footer .bottom .link > li > a{font-size:14px;}
	#footer .sns{margin:20px 0 10px;}
	#footer .copy span{font-size:13px;}

	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}
}
@media screen and (min-width:651px){
    .m_gnb .area_util_nav ul{display: none;}
}
@media screen and (max-width:650px){
	.area_util_nav ul{display:none;}
	.m_gnb{padding:0 0 15px;}
    .m_gnb .area_util_nav{position: relative; background:#1e77d5;}
	.m_gnb .area_util_nav ul{display: flex;}
	.m_gnb .area_util_nav ul li a{color:#fff;}
	.m_gnb .area_util_nav ul > li:before{background:rgba(255,255,255,0.2); right:-11px; top:19px;}
	.m_gnb .btn_close{top:14px; background:transparent; z-index:90;}
	.m_gnb .btn_close::before, .m_gnb .btn_close::after{background:#fff;}
	#header .m_gnb .m_gnb_list{margin:10px auto 0;}
	#header .m_gnb .m_gnb_list .m_gnb_list.board{margin:0; width:100%; padding-top:7px;}
    #header nav{margin-left:0; width:100%;}
    
}
@media screen and (max-width:600px){
	.area_info{padding:25px 0;}
	.area_info .inr{display:block;}
	.area_info .inr > div{width:100%;}
	.area_info .customer{padding-right:0px; padding-bottom:20px;}
	.area_info .account{padding-left:0px; padding-top:20px;}
	.area_info .inr > div:before{top:unset; bottom:0; width:100%; height:1px; transform:none;}
}
@media screen and (max-width:550px){
	#header .logo > a{width:142px; height:25px;}
	#header .header_top .inr{padding:20px 0 15px;}
	.area_util{top:20px; right:10px;}
	.area_util ul > li{padding:0 20px;}
	.area_util [data-util]:before{height:24px;}
	.area_util [data-util="basket"] i{right:-10px;}
	.area_util ul > li > a span{padding:2px 9px; line-height:1em; right:-21px;}
	.header_search{margin-top:15px; height:45px;}
	.header_form{height:42px;}
	.header_form__btn{width:50px;}
	.m_gnb_list > ul > li > a{padding:12px 0; font-size:16px;}
	.m_gnb_list > ul > li > ul{padding:10px; }
	.m_gnb_list > ul > li > ul > li{margin:0 ;}
	.m_gnb_list > ul > li > ul > li > a{font-size:14px; display: block; padding: 6px 0;}
	.m_gnb_list.board{padding-top:20px;}
	.m_gnb .btn_close{top:12px; right:10px;}

	*[data-shop-list="default"] > li .img{border-radius:12px;}

	#footer .copy span{display:block;}
	#footer .copy span:before{display:none;}
	#footer .copy p{margin-top:10px;}
}
@media screen and (max-width:480px){
	#header .header_bottom .inr{width:100%;}
	#footer .bottom .link > li{padding:0 5px;}
	#footer .bottom .link > li > a{font-size:13px;}
	#footer .sns > li{margin:0 3px;}
	#footer .sns > li > a:before{width:35px; height:35px;}
	#footer .copy span{font-size:12px;}

	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}

@media screen and (max-width:450px){
   
    #header nav .gnb{display: flex; padding-left: 54px; box-sizing: border-box; justify-content: space-evenly;}
    #header nav .gnb > li:first-child > a{margin-left: 0}
	#header nav .gnb > li > a{font-size:15px; margin-left:0;}

    .header_bottom .btn-menu{height: 52px;}

}
@media screen and (max-width:400px){
	
	#footer .top,
	#footer .top .inr > div{height:60px;}
	#footer .notice h2{display:none;}
	#footer .notice .bx-wrapper{width:100%; margin-left:0;}
	#footer .notice .list li{width:100%; height:60px;}
	#footer .notice .list a .subject{line-height:1.4em;}


}

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

@media screen and (max-width:300px){
	#header .btn_menu{overflow:hidden; width:40px;}
	.area_util{right:45px;}
	.area_util ul > li{margin:0 4px;}
}