@charset "utf-8";

.inr{max-width: 1720px;width: 100%;box-sizing: border-box;margin: 0 auto;}
.inr.inr-narrow{max-width: 1560px;}

/* header */
#header{ overflow: clip visible; }
#header nav{text-align:center;}
#header .h_top{background-color: #090909;box-sizing: border-box;padding: 10px 0;}
.area_util{}
.area_util ul{display: flex;align-items: center;justify-content: flex-end;gap: 45px;opacity: 85%;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{opacity:1;vertical-align: middle;font-size:15px;font-weight: 400;color: #fff;white-space:nowrap;display: flex;align-items: center;gap: 8px;}
.area_util ul > li > a  i{width: 19px; height: 19px; vertical-align: middle; font-size: 11px; color: #fff; border-radius: 100%; background-color: #848484; display: inline-flex; text-align: center; line-height: 20px; justify-content: center;}

/* 로고 */
#header .logo > .logo_wrap{display:inline-block;width: 100px;}
#header .logo > .logo_wrap img{width: 100%; height: 100%;}
#header .counsult_wrap{display:flex;align-items: center;}
/* 기존 20240718 주석 khh
#header .counsult{display:inline-flex; justify-content:center; align-items:center; gap:5px; height:38px; margin-right:auto; margin-left:20px; padding:1px 25px; text-align:center; color:#fff; border-radius:50rem; background:rgb(240,131,49); background:linear-gradient(90deg, rgba(240,131,49,1) 0%, rgba(255,175,35,1) 100%);}
#header .counsult > span{display:inline-block; line-height:1cap;}
#header .counsult .label{flex:none; font-size:13px; font-weight:300;}
#header .counsult .cont{font-size:20px; font-weight:600;}
*/
#header .counsult{display:flex;flex-direction:column;justify-content:center;position:relative;margin-right:auto;padding-left:60px;}
#header .counsult:before{content:'';display:block;position:absolute;left:0;top: 50%;width: 45px;height: 45px;background: url(../images/common/ico-phonecell.svg) no-repeat 50% 50%;background-color: #f2f2f2;border-radius: 100rem;transform: translateY(-50%);}
#header .counsult > span{display:flex;line-height: 1.4;align-items: center;}
#header .counsult .label{font-size: 14px;font-weight: 700;gap: 8px;}
#header .counsult .label em{margin-left:5px;font-weight: 500;}
#header .counsult .cont{font-size:22px;font-weight: 800;color:#008756;}

#header .counsult_link{display:none;margin-left:10px}
#header .counsult_link > *{display:inline-block; line-height:1cap;}
#header .counsult_link i{display:flex; height:35px;}
#header .counsult_link i img{display:block; margin:0 auto; width:32px;}
#header .counsult_link .cont{display: block; font-size: 14px; color: #000; line-height: inherit;}


/* 메뉴 */
#header .h_mennu{border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding-inline: 20px;}
#header .h_mennu .inr{position:relative;}
#header .h_mennu .inr,#header nav{display: flex;}
#header .h_mennu .wrap_burger{display: inline-flex;align-items: center;justify-content: center;cursor: pointer;}

#header .h_mennu .wrap_burger .menu-burger {display: flex;align-items: center;gap: 15px;padding-right: 50px;border-right: 1px solid #e5e5e5;}
#header .h_mennu .wrap_burger .menu-burger > span { font-size: 14px; font-weight: 700; color: #777; }
#header .h_mennu .wrap_burger.open .menu-burger > span { /* color: #fff; */ }

/*
#header .h_mennu .burger{cursor: pointer; display: block;}
#header .h_mennu .burger span{width: 20px; height: 2px; background: #000; display: block}
#header .h_mennu .burger span + span{margin-top: 4px;}
*/
#header .h_mennu .burger{width:20px; height:20px; position:relative; margin-top:8px; -webkit-transform:rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;}

#header .h_mennu .burger span{display: block; position: absolute; height: 2px; width: 100%; background: #000; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}

#header .h_mennu .burger span:nth-child(1) {top: 0px;}
#header .h_mennu .burger span:nth-child(2) {top: 6px;}
#header .h_mennu .burger span:nth-child(3) {top: 12px;}
#header .wrap_burger.open{background-color: #fff;}
#header .wrap_burger.open .burger span{/* background: #fff; */}
#header .wrap_burger.open .burger span:nth-child(1) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -2px; left: 4px;}
#header .wrap_burger.open .burger span:nth-child(2) {width: 0%; opacity: 0;}
#header .wrap_burger.open .burger span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 12px; left: 4px;} 
#header .wrap_burger.open .header_banner{display:block; top:calc(100% + 1px); opacity: 1; visibility: visible; z-index: 99; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.header_banner .gnb > li:nth-last-child(3){ flex: 1; }
.header_banner .gnb > li:nth-last-child(1) > a,
.header_banner .gnb > li:nth-last-child(2) > a{ color: #008756; }
.header_banner .gnb.gnb02{ display: none; }
.header_banner .gnb.gnb02{position: absolute; right: 61px; bottom: 60px;}
.header_banner .gnb.gnb02 > li > a{color: #008756;}

#header nav {width: calc(100% - 80px);box-sizing: border-box;display: flex;justify-content: flex-end;gap: 40px;}
#header nav .gnb {display: flex;gap: 40px;justify-content: center;}
#header nav .gnb > li{position:relative;}
#header nav .gnb01 > li:nth-last-child(1),
#header nav .gnb01 > li:nth-last-child(2){ display: none; }
#header nav .gnb > li > a{font-size: 17px;color:#222;font-weight: 600;line-height:1.2;box-sizing: border-box;word-break:keep-all;min-height: 60px;display: flex;align-items: center;justify-content: center;}
#header nav .gnb > li > a.on{color:#0b327a;}
#header nav .gnb > li:first-child > a{margin-left:0px;}
#header nav .gnb > li > ul{opacity:0;visibility:hidden;position:absolute;left:50%;transform: translate(-50%, 0);z-index:90;width:100%;min-width:165px;box-sizing:border-box;padding:30px 20px;background:#fff;border:1px solid #e5e5e5;text-align:center;transition:0.3s ease;}
#header nav .gnb > li > ul > li{padding:2px 0px;}
#header nav .gnb > li > ul > li > a{display:block; padding:5px 0; font-size:15px; line-height:1.45; color:#848484; transition:0.3s ease;}
#header nav .gnb > li > ul > li > a:hover{color:#0b327a;}
#header nav .gnb > li > ul > li:first-child > a{padding-top:0;}
#header nav .gnb > li > ul > li:last-child > a{padding-bottom:0;}
#header nav .gnb > li > ul > li > ul{display:none;}
#header nav .gnb > li.active > ul{opacity:1; visibility:visible;}
#header nav .gnb.gnb01{}
/* 
#header nav .gnb.gnb01{ padding:0 15px; background: url(/images/common/bg_menubar.gif) no-repeat right center; }
#header nav .gnb.gnb01 > li:last-child{display:none;} 
#header nav .gnb.gnb02::before{content: ""; width: 1px; height: 18px; background-color: #e5e5e5; position: absolute; left: -45px; top: 50%; transform: translateY(-50%);}
*/
#header nav .gnb.gnb02{/* flex:none; *//* width:12%; */}
#header nav .gnb.gnb02 > li > a{color:#008756;font-weight: 700;}
#header nav .gnb i{display:block; height:46px; margin:0 auto 10px;}
#header nav .gnb i img{height:100%;}

#header .h_middle{padding:30px 0; box-sizing: border-box;}

#header .h_middle .left-side, #header .h_middle .right-side { display: flex; align-items: center; gap: 45px; }
#header .h_middle .top-nav-cta { display: flex; gap: 30px; padding-left: 15px;}
#header .h_middle .top-nav-cta .cta a { display: flex; flex-direction: column; gap: 15px; font-weight: 600; align-items: center; }
#header .h_middle .top-nav-cta .cta a i { display: flex; width: 80px; aspect-ratio: 1; background: #f7f7f7; align-items: center; justify-content: center; border-radius: 100rem; }
#header .h_middle .top-nav-cta .cta a i img { width: 100%; max-width: 32px; }

#header .h_middle .cta-member { display: flex; align-items: center; gap: 45px; }
#header .h_middle .cta-member .member { position: relative; display: flex; aspect-ratio: 1; max-width: 30px; align-items: center; justify-content: center; }
#header .h_middle .cta-member .member img { width: 100%; }
#header .h_middle .cta-member .member.cart i { position: absolute; background: #008756; display: flex; font-size: 11px; width: 20px; height: 20px; justify-content: center; align-items: center; color: #fff; border-radius: 100rem; top: -5px; right: -5px; font-weight: 600; line-height: 0; }

#header .h_middle .inr{display: flex; position: relative; justify-content: space-between; align-items:center;}
#header .searchBox{border: 2px solid #008756;box-sizing: border-box;width: 320px;height: 50px;background-color: #fff;position: relative;border-radius: 100rem;overflow: hidden;}
#header .searchBox form{width:100%;height: 100%;}
#header .searchBox button[type="submit"]{width: 22px;height: 22px;background: url(/images/common/icon-search.svg) no-repeat;background-size: contain;position: absolute;top: 50%;right: 25px;transform: translateY(calc(-50% + -0.5px));}
#header .searchBox input[type="text"]{height: 100%;border:none;outline: none;font-size: 17px;padding-left: 25px;margin: 0;}
#header .searchBox input::placeholder{color: #c1c1c1;}
.search-btn__mob{display:none;position:absolute;top:32px;right:8px;z-index:10;width:40px;height:40px;background: url(/images/common/icon_search.jpg) no-repeat 50% 50%;background-size:20px 22px;font-size:0;}
.search-btn__mob.active{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpolygon points='18.788 0 20 1.294 10 12 0 1.294 1.206 0 10 9.406 18.788 0'/%3E%3C/svg%3E"); background-size:20px 13px;}

#header .searchBox.btn{display:flex;}
/* 기존 20240718 주석 khh
#header .btn_kakao{display:flex; text-align:center; position:absolute; right:-170px; background-color: #fae100; color: #371c1d; line-height:1; border: none; padding:11px 20px 8px 24px; font-size: 16px; font-weight:600; cursor: pointer; border-radius:50px; animation: button-animation 5s infinite;}
#header .btn_kakao img{width:32px; margin-top:-5px; margin-right:6px; vertical-align:sub;}
*/
#header .btn_menu{display:none; position:absolute; top:-130px; right:0; z-index:89; width:58px; height:58px; font-size:0px; text-align:center; transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:26px; 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:#000; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:26px;}
#header .btn_menu span:after{content:''; width:26px;}
#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:50%; margin-top: -1px; width:26px; 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:26px; height:20px;  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:before{content:'메뉴열기'; display:none; position:absolute; top:52%; left:-100%; padding:0 10px; border:1px solid #999; border-radius:50rem; font-size:12px; font-weight:700; color:#111; transform:translateY(-50%);}
/*#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(-26px);}
#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:8px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:9px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active:before{content:'메뉴닫기';}
#header .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.web .mobile-menu {display: none;}
.quick-mobile {display: none;}

@media(max-width: 1130px){
    /* header mob */
    #header.mob {border-bottom: 1px solid #ddd;position: relative;width: 100%;z-index: 99;background: #fff;}
    #header.mob .header-web { padding-inline: 20px; height: 50px; position: relative; }
    #header.mob .h_top { display: none; }
    #header.mob .h_middle .inr { display: flex; flex-wrap: nowrap; justify-content: flex-end; }
    #header.mob .h_middle .top-nav-cta { display: none; }
    #header.mob .counsult_wrap { display: none; }
    #header.mob .h_middle .cta-member .member.profile { display: none; }
    #header.mob .search-btn__mob { display: block; position: relative; inset: unset; width: 20px; height: 20px; }
    #header.mob .searchBox { display: none; }
    #header.mob .searchBox.active {position: absolute;display: flex;top: 35px;left: 0;z-index: 999;background: #fff;padding: 0;border-radius: 0;height: 50px;width: 100vw;border: 1px solid #ddd;left: -20px;}
    #header.mob .h_middle .cta-member { gap: 15px; flex-direction: row-reverse; }
    #header.mob .h_mennu .wrap_burger { display: inline-flex; }
    #header.mob .h_mennu { position: absolute; top: 0; border: 0; padding: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
    #header.mob .h_mennu .wrap_burger .menu-burger > span { display: none; }
    #header.mob .h_mennu .wrap_burger .menu-burger { border: 0; padding: 0; }
    #header.mob .h_middle .left-side { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    #header.mob .logo { padding: 0; flex: unset; order: unset; }
    #header.mob .h_middle { height: 100%; display: flex; align-items: center; }
    #header.mob .h_middle .cta-member .member { max-width: 20px; }
    #header.mob .h_middle .cta-member .member.cart i { width: 16px; height: 16px; font-size: 10px; top: -10px; right: -10px; }
    #header.mob .area_menu_all {display: none;}
    #header.mob .header_banner {display: none !important;}

    #header.mob .h_mennu.open .mobile-menu { display: flex; border-bottom: 1px solid #ddd; flex-direction: column; }
    #header.mob .mobile-menu {position: absolute;width: 100vw;height: 100vh;top: 40px;left: -20px;z-index: 100;background: #fff;display: none;}
    #header.mob .mobile-menu .login-cta { display: flex; padding: 25px 12px; justify-content: space-between; background: #f8f8f8; border-bottom: 1px solid #ddd; align-items: center; }
    #header.mob .mobile-menu .login-cta > span { font-size: 18px; font-weight: 500; }
    #header.mob .mobile-menu .login-cta .cta { display: flex; gap: 5px; color: #008756; align-items: center; }
    #header.mob .mobile-menu .login-cta a { display: flex; color: #008756; }
    #header.mob .mobile-menu .area_util { position: relative; inset: unset; border-bottom: 1px solid #ddd; }
    #header.mob .mobile-menu .area_util ul { display: flex; justify-content: center; gap: 30px; padding-block: 20px; }
    #header.mob .mobile-menu .area_util ul a span { display: flex; flex-direction: column; color: #222; font-size: 14px;font-weight: 500; }
    #header.mob .mobile-menu .area_util ul a span::before { color: #008756; font-size: 25px; }
    #header.mob .mobile-menu .menu {display: flex;padding: 0 12px;padding-bottom: 100px;height: 100%;overflow: scroll;}
    #header.mob .mobile-menu .menu aside {display: block;padding-right: 30px;padding-top: 20px;min-width: 60px;border-right: 1px solid #ddd;}
    #header.mob .mobile-menu .menu aside ul { display: flex; flex-direction: column; gap: 20px; }
    #header.mob .mobile-menu .menu aside ul a { font-size: 13px; font-weight: 600; }
    #header.mob .mobile-menu .menu aside ul li:hover a { color: #008756; }
    #header.mob .mobile-menu .menu .gnb.gnb01 {position: relative;display: flex;gap: 20px 5px;padding-left: 15px;padding-block: 20px 50px; =: 100%;height: fit-content;flex-wrap: wrap;}
    #header.mob .mobile-menu .menu .gnb.gnb01 > li > ul { display: none; }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li.mob__none { display: none; }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li {position: relative;display: flex;flex-direction: column;gap: 10px;max-width: 75px;}
    #header.mob .mobile-menu .menu .gnb.gnb01 > li::before { content: ''; position: relative; background: url(/images/common/icon-cate-01.jpg) no-repeat center / cover; width: 75px; aspect-ratio: 1; border-radius: 5px; }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate002"]::before { background-image: url(/images/common/icon-cate-02.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate007"]::before { background-image: url(/images/common/icon-cate-03.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate045"]::before { background-image: url(/images/common/icon-cate-04.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate085"]::before { background-image: url(/images/common/icon-cate-05.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate049"]::before { background-image: url(/images/common/icon-cate-06.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate056"]::before { background-image: url(/images/common/icon-cate-07.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate060"]::before { background-image: url(/images/common/icon-cate-08.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate073"]::before { background-image: url(/images/common/icon-cate-09.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate086"]::before { background-image: url(/images/common/icon-cate-10.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate065"]::before { background-image: url(/images/common/icon-cate-11.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate068"]::before { background-image: url(/images/common/icon-cate-12.jpg); }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li a { font-size: 12px; text-align: center; font-weight: 600; word-break: auto-phrase; line-height: 1.5; }
    #header.mob .mobile-menu .menu .gnb.gnb01 > li[data-gnb="cate069"] { display: none; }

    .quick-mobile { display: block; position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; }
    .quick-mobile .list-cta { display: flex; height: 60px; background: #fff; border-top: 1px solid #ddd; }
    .quick-mobile .list-cta li {width: 100%;}
    .quick-mobile .list-cta li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 500; height: 100%; }
    .quick-mobile .list-cta li i { display: block; background: url(/images/common/icon-qm-mob-01.svg) no-repeat center / contain; height: 20px; width: 100%; }
    .quick-mobile .list-cta li.li02 i { background-image: url(/images/common/icon-qm-mob-02.svg) ; }
    .quick-mobile .list-cta li.li03 i { background-image: url(/images/common/icon-qm-mob-03.svg) ; }
    .quick-mobile .list-cta li.li04 i { background-image: url(/images/common/icon-qm-mob-04.svg) ; }

}

/* 카카오톡 상담 상단 */
.kakao-counsult{position:absolute; right:50%; margin-right:-400px;}
.kakao-counsult a i{display:none;}
.kakao-counsult .btn_kakao{display:flex; align-items:center; gap:10px; color: #3d1d1c; line-height:1; border: none; font-size: 16px; font-weight:600; cursor: pointer;}
.kakao-counsult .btn_kakao img{height:35px;}
.kakao-counsult .btn_kakao em{display:block; margin-top:2px;}
.kakao-counsult .btn_case{overflow:hidden; display:none; width:60px; height:60px; margin-bottom:5px; background:#309ef9; border-radius:100%; text-align:center;}
.kakao-counsult .btn_case img{width:86%;}
.kakao-counsult .btn_photo{overflow:hidden; display:none; width:60px; height:60px; margin-bottom:5px; background:#233ecd; border-radius:100%; text-align:center;}
.kakao-counsult .btn_photo img{width:80%;}
.kakao-counsult .btn_est{overflow:hidden; display:none; width:60px; height:60px; margin-top:5px; background:#008756; border-radius:100%; text-align:center;}
.kakao-counsult .btn_est img{width:55%;}
.kakao-counsult .btn_est span{display:none;}

/* 메뉴별 커스텀 */
[data-gnb="cate069"]{display:none;}

/* 모바일 메인노출 메뉴 */
.gnb-mob{display:none;}
.gnb-mob .list{display:grid; grid-template-columns:repeat(6, 1fr);}
.gnb-mob .list li{padding:15px 5px; border:1px solid #ebebeb; border-width:0px 1px 1px 0px;}
.gnb-mob .list li:nth-child(6n){border-right-width:0;}
.gnb-mob .list a{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; text-align:center; word-break:keep-all; line-height:1.2;}
.gnb-mob .list i{display:block; width:50px;}
.gnb-mob .mob__none{display:none;}
@media screen and (max-width:1130px){
	.gnb-mob{display:block;}
}
@media screen and (max-width:480px){
	.gnb-mob .list{display:grid; grid-template-columns:repeat(4, 1fr);}
	.gnb-mob .list li:nth-child(4n){border-right-width:0;}
	.gnb-mob .list li:nth-child(6n){border-right-width:1px;}
	.gnb-mob .list a{font-size:11px; font-weight:500;}
}
    
/* 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;}

/* icon */
.area_howto_order{display: flex; gap: 30px;}
.area_howto_order li{text-align: center;}
.area_howto_order li i{display:block; height:36px; margin-bottom:5px; text-align:center;}
.area_howto_order li img{height:100%;}
/* 기존 20240718 주석 khh
.area_howto_order li.print img{width: 32px;}
.area_howto_order li.guide img{width: 27px;}
.area_howto_order li.card img{width: 34px;}
.area_howto_order li.design img{width: 32px;}
 */
.area_howto_order li span{display: block; font-size: 14px; color: #888; font-weight:500;}

/* quck */
.area_quick{position: fixed;top: 50%;right: 30px;z-index: 222;width: 90px;transform: translateY(calc(-50% + 50px));-webkit-transform: translateY(calc(-50% + 50px));}
.area_quick em{display:block; padding:10px 0px; background-color:#000; border-radius:10px 10px 0 0; color:#fff; font-size:12px; font-weight:700; text-align:center;}
.area_quick a{display:flex;flex-direction:column;align-items:center;}
.quick-link,
.quick-banner{display:flex;flex-direction:column;gap:5px;}
.quick-banner{margin-top:10px;}
.quick-banner img{max-width:100%;}
.quick-banner a{overflow:hidden; border-radius:6px;}
.quick-banner a span{display:none;}
.quick-link{gap: 20px;padding-block: 35px;background: #fff;border: 2px solid #e5e5e5;border-radius: 15px;box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}
.quicktop {background: #333;height: 60px;border-radius: 15px;justify-content: center;margin-top: 10px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);}
.quick-link img{height: 20px;}
.quick-link a{text-align:center;font-size:13px;font-weight: 600;color: #333;}
.quick-link a span{display:block; margin-top:3px;}
.quick-link .card img{width:33px; height:auto;}
.quick-link .blog img{height:30px;}

.kakao-talk {position: fixed;bottom: 40px;right: 45px;z-index: 99;display: flex;flex-direction: column;}
.kakao-talk .quicktop { display: flex; align-items: center; justify-content: center; background: #0d0d0d; filter: invert(1); display: none; }
.kakao-talk .cta { display: flex; width: 60px; aspect-ratio: 1; background: #fee622; border-radius: 15px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); }

@media(max-width: 1024px){
    .kakao-talk { bottom: 80px; right: 20px; }
    .kakao-talk .quicktop { display: flex; border: 1px solid #1a1a1a; aspect-ratio: 1; height: fit-content;}
    .kakao-talk .cta {width: 45px;}
}

/* footer */
.footer { position: relative; background: #090909; }
.footer .footer-wrap { display: flex; justify-content: space-between; padding-block: 80px; }
.footer .footer-wrap .f_logo { display: flex; max-height: 35px; width: auto; }
.footer .footer-wrap .top .f_logo img { width: 100%; }
.footer .footer-wrap .footer-info { display: flex; gap: 120px; }
.footer .footer-wrap .footer-info > div { display: flex; flex-direction: column; font-size: 15px; color: rgb(255 255 255 / 60%); }
.footer .footer-wrap .footer-info > div .thumb-info { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 40px; }
.footer .footer-wrap .footer-info > div .link { display: flex; flex-direction: column; gap: 20px; line-height: 1; }
.footer .footer-wrap .footer-info > div a { color: #fff; opacity: 60%; }
.footer .footer-wrap .footer-info > div .info { line-height: 1.8; opacity: 60%; }
.footer .footer-wrap .footer-info > div.customer a { font-size: 25px; font-weight: 700; opacity: 1; }
.footer .footer-wrap .footer-info > div.customer ul { line-height: 1.8; opacity: 60%; }
.footer .footer-copy { position: relative; padding-block: 30px; border-top: 1px solid rgb(255 255 255 / 20%); }
.footer .footer-copy .inr { display: flex; justify-content: space-between; align-items: center; }
.footer .footer-copy p { font-size: 13px; color: #fff; opacity: 40%; }
.footer .footer-copy .cta { display: flex; gap: 15px; align-items: center; }
.footer .footer-copy .cta a { display: flex; width: 50px; aspect-ratio: 1; align-items: center; justify-content: center; background: rgb(255 255 255 / 15%); border-radius: 100rem; }
.footer .footer-copy .cta a img { max-width: 20px; }

@media (max-width: 1024px) {
    .footer .footer-wrap { padding-block: 60px; gap: 50px; }
    .footer .footer-wrap .footer-info { gap: 60px; }
    .footer .footer-wrap .footer-info > div { font-size: 14px; }
    .footer .footer-wrap .footer-info > div .thumb-info { margin-bottom: 25px; }
    .footer .footer-wrap .footer-info > div .link { gap: 15px; }
    .footer .footer-wrap .footer-info > div.customer a { font-size: 21px; }
    .footer .footer-copy { padding-block: 25px; }
}
@media (max-width: 768px) {
    .footer .footer-wrap { display: block; padding-block: 50px; }
    .footer .footer-wrap .f_logo { width: auto; max-height: 30px; margin-bottom: 40px; }
    .footer .footer-wrap .f_logo img { width: auto; max-width: 100%; height: 30px; }
    .footer .footer-wrap .footer-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
    .footer .footer-wrap .footer-info > div { font-size: 14px; }
    .footer .footer-wrap .footer-info > div .thumb-info { font-size: 13px; margin-bottom: 20px; }
    .footer .footer-wrap .footer-info > div .link { gap: 12px; }
    .footer .footer-wrap .footer-info > div.customer a { font-size: 20px; }
    .footer .footer-wrap .footer-info > div.customer ul { line-height: 1.7; }
    .footer .footer-copy { padding-block: 20px; }
    .footer .footer-copy .inr { gap: 20px; }
    .footer .footer-copy p { font-size: 11px; }
    .footer .footer-copy .cta { gap: 10px; }
    .footer .footer-copy .cta a { width: 42px; }
    .footer .footer-copy .cta a img { max-width: 17px; }
}
@media (max-width: 480px) {
    .footer .footer-wrap { padding-block: 40px; }
    .footer .footer-wrap .f_logo { max-height: 26px; margin-bottom: 35px; }
    .footer .footer-wrap .f_logo img { height: 26px; }
    .footer .footer-wrap .footer-info { grid-template-columns: 1fr; gap: 30px; }
    .footer .footer-wrap .footer-info > div { font-size: 13px; }
    .footer .footer-wrap .footer-info > div .thumb-info { font-size: 13px; margin-bottom: 15px; }
    .footer .footer-wrap .footer-info > div .link { gap: 10px; }
    .footer .footer-wrap .footer-info > div.customer a { font-size: 20px; }
    .footer .footer-wrap .footer-info > div.customer ul { line-height: 1.7; }
    .footer .footer-copy { padding-block: 18px; }
    .footer .footer-copy .inr { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
    .footer .footer-copy p { font-size: 10px; line-height: 1.5; }
    .footer .footer-copy .cta { gap: 8px; }
    .footer .footer-copy .cta a { width: 38px; }
    .footer .footer-copy .cta a img { max-width: 16px; }
}
@media (max-width: 360px) {
    .footer .footer-wrap { padding-block: 35px; }
    .footer .footer-wrap .f_logo { margin-bottom: 30px; }
    .footer .footer-wrap .footer-info { gap: 25px; }
    .footer .footer-wrap .footer-info > div { font-size: 12px; }
    .footer .footer-wrap .footer-info > div .thumb-info { font-size: 12px; }
    .footer .footer-wrap .footer-info > div.customer a { font-size: 18px; }
    .footer .footer-copy .inr { gap: 15px; }
    .footer .footer-copy p { font-size: 9px; }
}


.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 (min-width:1023px){
    .header_banner{ position: absolute; width: calc(100% - 40px); box-sizing: border-box; padding:60px; background-color: #fff; left: 20px;  z-index: -1; opacity: 0; visibility: hidden; top: 57px;}
    .header_banner .gnb > li {width:calc(100% / 7); padding-bottom: 60px;}
    .header_banner .gnb > li > a{font-weight: 600; color: #000; font-size: 17px; }
    .header_banner .gnb > li  ul > li{margin-top: 11px;}
    .header_banner .gnb > li  ul > li > a{color: #848484; display: inline-block; font-size:15px;}
	.header_banner .gnb a i{display:none;}
    .header_banner .gnb{display: flex; flex-wrap: wrap; }
}


@media screen and (max-width:1720px){
    #header .h_mennu .inr{padding: 0; margin: 0;}
    /* #header .gnb_scroll{overflow:hidden; width: 80%;} */
    
    #header nav .gnb{gap: 0;}
    #header nav .gnb.gnb01{ justify-content: space-between; /* white-space: nowrap; */ width:80%;  }
    /* #header nav .gnb > li + li{margin-left: 22px;} */

    #header nav .gnb.gnb02{width: 20%; justify-content: space-evenly; box-sizing: border-box; padding-right: 30px;}
    #header nav .gnb.gnb02::before{left: 0;}
    
    .header_banner{display: none;width: 100%!important;left: 0;border-bottom:1px solid #e5e5e5;}    
    .inr{padding:0 40px;}
    #footer .bottom .info{width: 42%;}
    .header_banner .gnb.gnb02{position: relative; right: inherit;; bottom: inherit;}
    
}
@media screen and (max-width:1570px){
    #header .searchBox{width:250px;}
	.kakao-counsult{margin-right:-360px;}
}

@media screen and (max-width:1440px){
    #header .gnb_scroll{width: 77%;}
    #header nav .gnb{gap: 20px;}
    #header nav .gnb.gnb01{padding-left: 24px;width: 100%;padding-right: 24px;}
    /* #header nav .gnb > li + li{margin-left: 52px;} */
    #header nav .gnb.gnb02{padding-left: 24px; /* margin-left: 24px; */ width: 15%;}
    #header nav .gnb > li > a{font-size: 15px;}
    #header nav .gnb.gnb02{padding-left: 18px; margin-left: 0; padding-right: 18px;}
    #header nav .gnb.gnb02 > li > a{font-size: 14px;}
	.header_banner .gnb > li{width: 20%;}
    #footer .bottom{gap: 24px; justify-content: space-between;}
    #footer .bottom .f_logo{width: 156px;}
    #footer .bottom,#footer .top{padding-left:  200px;}
    #footer .bottom .info{width: auto;}
	.area_howto_order{gap:15px;}
}
@media screen and (max-width:1380px){
    #header .counsult .cont{font-size:18px;}
    #header .searchBox{position:relative; left:auto; top:auto; transform:translate(0,0); width:330px;}
	.kakao-counsult{position:static; margin-right:20px; margin-left:20px;}
}
@media screen and (max-width:1334px){    
    .kakao-counsult .btn_kakao{font-size:14px; right:-144px; padding:11px 14px 8px 18px;}
}
@media screen and (max-width:1280px){    
    #header .counsult{margin-left: auto;}
    #header nav {gap: 10px;}
    #header .h_middle .top-nav-cta { gap: 10px; }
    #header .h_middle .top-nav-cta .cta a i { width: 50px; }
    #header .h_middle .top-nav-cta .cta a i img { max-width: 20px; }
}
@media screen and (max-width:1250px){
    #header nav{width: calc(100% - 60px);}
    #header .inr{padding-left:15px; padding-right:15px;}    
    #header .logo{left:15px; flex-direction:column; text-align:center; align-items: center;}    
    #header nav .gnb > li > a{font-size: 15px;}
    #header nav .gnb.gnb01{padding-left: 10px; padding-right: 10px;}
    #header nav .gnb.gnb02{/* justify-content: space-between;  */padding-right: 6px; padding-left: 10px;}
    .area_util{right:15px;}
    #footer .top .inr{padding-left:15px; padding-right:15px;}
    #header .h_mennu .wrap_burger{}
    #header .gnb_scroll{width: 74%;}
    /* #header nav .gnb > li + li{margin-left: 18px;} */
    .kakao-counsult .btn_kakao{padding:11px 14px 10px 18px;}
   
    /* #footer .bottom {flex-wrap: wrap; justify-content: flex-start;} */
    #footer .bottom, #footer .top{padding-left: 0;}
    #footer .bottom{padding-top: 80px;}
    #footer .bottom .f_logo{top: 26px;}
    #footer .customer a{font-size: 24px;}
    #footer .bank dl *{font-size: 18px;}
}
@media screen and (max-width:1190px){
    #header .searchBox{width:260px;}
}
@media screen and (max-width:1130px){
    .inr{padding:0 20px}
    #header{position: relative;}
    #header .logo{display:block; position:static; padding:10px 0px; transform:translateY(0);}
    #header .logo > .logo_wrap{height: auto;}
    #header .btn_menu{display:block; top:-155px;}
	#header .btn_menu:before{display:block;}
    #header .inr{box-sizing: border-box;}
    #header .h_middle .inr{padding:0; justify-content: space-between;}
    #header .h_middle{padding:0; box-sizing: border-box; position: relative;;}
    #header .h_middle .inr{flex-wrap:wrap; justify-content:left; align-items:stretch;}
    #header .counsult{margin:0;}
    #header .counsult_wrap{order:2; flex:0 1 calc(60% - 60px); justify-content:flex-end; margin:0; padding-right:60px;}

    #header .counsult_link{display:none; /*display:flex;*/ justify-content:center; align-items:center; margin:0; border-radius:0; width:50%; text-align:center; padding: 0 6px; height:100%; line-height:2.2; background-color: #ff6464; box-sizing: border-box;}
    #header .counsult_link i{display:inline-flex; height:20px; vertical-align: middle;}
    #header .counsult_link .cont{display:inline-flex; color:#fff; font-size:18px; font-weight:600;}
    #header .logo{order:1; flex:0 1 30%; text-align:left; padding:10px 0 10px 20px; box-sizing:border-box; }
    #header .searchBox{order:3; display:flex; align-items:center; width:50%; height:auto; padding-left:15px; margin-right:0; border:0; border-top:1px solid #ddd;}
    #header .searchBox form{flex:auto;display:flex;align-items:center;position:relative;/* border:1px solid #000; */}
    #header .searchBox,
    .area_howto_order{box-sizing:border-box; padding-top:10px; padding-bottom:10px;}
    .area_howto_order{order:4; display:grid; grid-template-columns:repeat(4, 1fr); gap:0 10px; width:50%; padding-left:20px; padding-right:15px; border-top:1px solid #ddd;}
    .area_howto_order li.print img{width: 27px;}
    .area_howto_order li.guide img{width: 26px;}
    .area_howto_order li.card img{width: 30px;}
    .area_howto_order li.design img{width: 29px;}
    
    #header .searchBox.btn{transform:none; top:36%;}										 
	.kakao-counsult{position:fixed; right:10px; top:auto; bottom:10px; z-index:100; margin:0;}
    .kakao-counsult .btn_kakao{flex-direction:column; align-items:center; text-align: center; justify-content:center; padding:0; width:60px; height:60px; background:#fade00; border-radius:50%; box-sizing: border-box; font-size:12px; transform:translateY(0);}
    .kakao-counsult .btn_kakao img{width:35px; height:auto;}
	.kakao-counsult .btn_kakao span{display:none;}
	.kakao-counsult .btn_case,
	.kakao-counsult .btn_photo{display:block;}
    .kakao-counsult .btn_est{display:flex; align-items: center; justify-content: center;}
    #header .h_mennu .wrap_burger{display: none;}
    #header .h_mennu{border-top: 0;}
    

    #header nav{flex-direction: column; justify-content: flex-start;}
    #header nav .gnb{flex-direction: column;}
    #header nav .gnb.gnb01,#header nav .gnb.gnb02{padding-left: 0; width: 100%; padding-right: 0;}
    #header nav .gnb > li + li{margin-left: 0;}
    #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 nav > ul > li:not(.gnb_cate){display:flex; flex-wrap:wrap; align-items:center;}
    #header .area_menu_all nav{overflow-y:auto; opacity:0; visibility:hidden;  position:absolute; top:0px; /* left:-80%; */ z-index:10; width:80%; height:100%; background:#fff; transition:0.7s ease;}
    #header .area_menu_all nav > ul li{position:relative;}
    #header .area_menu_all nav > ul > li{display:flex; flex-wrap:wrap; align-items:center; padding:0px; border-bottom:1px solid #e9e9e9;}
    #header .area_menu_all nav > ul > li > a{flex:0 1 100%; display:flex; align-items:center; width:auto; height:50px; box-sizing:border-box; padding:10px 40px 10px 15px; margin-left:0px; font-size:18px; text-align:left;}
	#header .area_menu_all nav > ul > li > a i{display:none;}
    #header .area_menu_all nav > ul > li > ul{flex:0 1 100%; opacity:1; visibility:visible; position:static; width:auto; margin:0 15px 15px; padding:10px 0; background:#f5f5f5; border-width:0px; text-align:left; transform:translateX(0); transition:none;}
    #header .area_menu_all nav > ul > li > ul > li{display:block; margin:0px;}
    #header .area_menu_all nav > ul > li > ul > li:hover > a,
    #header .area_menu_all nav > ul > li > ul > li:focus > a{color:#444;}
    #header .area_menu_all nav > ul > li > ul > li.only{width:100%;}
    #header .area_menu_all nav > ul > li > ul > li.active > a,
    #header .area_menu_all nav > ul > li > ul > li.active:hover > a,
    #header .area_menu_all nav > ul > li > ul > li.active:focus > a{color:#f2483b;}
    #header .area_menu_all nav > ul > li > ul > li > a{display:block; width:auto; padding:5px 40px 5px 10px; /* border-bottom:1px solid #d8d8d8; */}
    #header .area_menu_all nav > ul > li > ul > li > *{display:block; vertical-align:middle;}   
    #header .area_menu_all nav > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
    #header .area_menu_all nav > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
    #header .area_menu_all nav > ul > li > ul > li > ul{padding:10px 15px; background:#eaeaea; border-bottom:1px solid #d8d8d8;}
    #header .area_menu_all nav > ul > li > ul > li > ul > li{display:block;}
    #header .area_menu_all nav > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
    #header .area_menu_all .open{display:block; position:absolute; right:5px; top:12px; 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 nav,
    #header .area_menu_all.active .btn_close{opacity:1; visibility:visible; /* transition-delay:0s; */}
    #header .area_menu_all.active .gnb{left:0px;}

    .area_util{right:60px;}
    .search_btn_mo{display: block;}

    #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;}
    #footer{padding-top: 40px; padding-bottom: 76px;}
    #footer .bottom .f_logo{width: 145px;}
    #footer .bottom{flex-wrap: wrap; justify-content: left;}
    #footer .bottom .info{width: 100%;}
    #footer .bottom .info em{display: none;}
    #footer .customer, #footer .bank{}
    #footer .copy p{position: absolute; bottom: -50px; text-align: center; width: 100%;}
    #footer .bottom{padding-top: 30px;}
    #footer .bottom,#footer .bank dl,#footer .top .link{justify-content: center;}
    #footer .bottom .info{text-align: center;}
    #footer .bottom .f_logo{position: relative; top: 0; margin: 0 auto;}
    #footer .customer, #footer .bank{}

    .lnb{margin:0 auto 30px;}

    .area_quick{display: none;}
}

@media screen and (max-width:1024px){
	/* 레이어팝업 모바일 노출금지 추가 - 제거 khh
	.layerPop{display:none !important;}
	 */
	.layerPop{width:60% !important;}	   
}

@media screen and (max-width:768px){
	.kakao-counsult{display:flex; align-items:stretch; right:auto; left:0; bottom:0; width:100%; height:55px; box-sizing:border-box; border-top:1px solid #c96920; box-shadow:0 -5px 20px rgba(0,0,0,0.1);}
	.kakao-counsult > a{flex:1 1 0; display:flex !important; justify-content:center; align-items:center; gap:5px !important; width:auto !important; height:100% !important; margin:0 !important; background-color:#008756 !important; border-radius:0 !important; border-left:1px solid #c96920 !important; color:#fff !important;}
	.kakao-counsult > a span{font-size:14px; font-weight:500; color:#fff;}
	.kakao-counsult > a:first-child{border-left-width:0 !important;}
	.kakao-counsult > a i{display:block; font-size:20px; font-weight:normal;}
	.kakao-counsult	img{display:none;}
	.kakao-counsult .btn_kakao{flex-direction:row;}
	.kakao-counsult .btn_kakao em{display:none;}
	.kakao-counsult .btn_kakao span,
	.kakao-counsult .btn_est span{display:block;}
}

@media screen and (max-width:750px){
    *[data-shop-list="default"] > li > a .percent{height:59px !important;}
    #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 (max-width:640px){
    #header .logo{flex-direction:row; padding-left:15px; text-align:left;}
	#header .logo > .logo_wrap{width: auto;height: 25px;}
    .area_howto_order{width:100%; padding-left:15px;}
    #header .searchBox{display:none; position:absolute; right:140px; top:50%; z-index:10; width:200px; padding:0; background-color:transparent; border-top:0; transform:translateY(calc(-50% - 15px));}
    #header .searchBox form{background-color:#fff;}
    #header .searchBox input[type="text"]{height:40px;}
    #header .searchBox input[type="text"], 
    #header .searchBox input[type="text"]::placeholder{font-size: 15px;}
    #header .searchBox button[type="submit"]{width: 20px; height: 20px;}
    #header .counsult_wrap{flex:0 1 40%;}
	#header .counsult .label{flex-wrap:wrap; gap:3px;}
	#header .counsult .label em{flex:0 1 100%; display:block; margin-left:0;}
    .search-btn__mob{display:block; top:25px;}    
    #header .btn_menu{top:-140px; right:55px; width:40px; height:40px;}    
	#header .btn_menu:before{left:-156%;}
    #header .searchBox{right:70px;}
    #header .searchBox input[type="text"]{padding-left: 20px;}

    #header .searchBox{right:0; bottom:0; top:auto; width:100%; height:76px; padding:10px 15px; background-color:#fff; transform:translateY(0);}
    #header .searchBox{display:none;}
    #header .searchBox.active{display:flex;}
    #header .searchBox.btn{position: relative; order:4;}
}

@media screen and (max-width:480px){
    .area_util ul{gap:0}
    .area_util ul > li > a span{font-size: 12px;}

    .search-btn__mob{top:25px;}

    .area_howto_order{order:3; border-bottom:1px solid #ddd;}
    .area_util ul > li{margin:0 10px;}
    *[data-shop-list="default"] > li > a .percent{height:55px !important; padding:10px 13px !important;}

    #header .logo{flex:none;}
    #header .btn_menu{right:10px; top:-142px;}
	#header .btn_menu:before{display:none;}
    .search-btn__mob{right:55px;}
	#header .counsult_wrap{flex:auto; justify-content:flex-start; margin:0 0 0 10px; padding-right:0;}
    #header .counsult{height:40px; margin-left:0; padding-left:36px; gap:9px;}
    #header .counsult:before{width:27px; height:40px; top:0;}
	#header .counsult .label{margin-top:10px;}
    #header .counsult .cont{margin-top:-2px; font-size:14px;}
    .kakao-counsult .btn_kakao img{height:40px;}
    
    .search_btn_mo{display: block; top: 69px; right: 80px; width: 20px; height: 22px;background: url(/images/common/icon_search.jpg) no-repeat; background-size: cover; position: absolute; }
    .wrap_mo_search{display: block;opacity: 0;visibility:hidden;transition: all .3s;box-sizing: border-box;padding: 64px 24px 35px;position: fixed;top: 34px;left: 0;width: 100%;background-color: #fff;z-index: 0;}
    .wrap_mo_search.on{opacity: 1; visibility: visible; z-index: 9999;}
    .wrap_mo_search .search{width: 100%; border-bottom: 1px solid #000; height: 55px; display: flex; box-sizing: border-box; align-items: center; justify-content: space-between;}
    .wrap_mo_search .search input{border: none; outline: none; width: calc(100% - 40px);height: 100%; margin: 0;}
    .wrap_mo_search .search button{width: 20px; height: 20px; display: block; background: url(/images/common/icon_search.jpg) no-repeat; background-size: cover; }
    .wrap_mo_search .close{width: 20px;height: 20px;position: absolute;top: 20px;right: 24px;}
    .wrap_mo_search .close::before, .wrap_mo_search .close::after{content: "";width: 100%;height: 2px;background-color: #000;position: absolute;left: 0;top: 8px;}
    .wrap_mo_search .close::before{transform: rotate(45deg);}
    .wrap_mo_search .close::after{transform: rotate(-45deg);}

    #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{padding-left:10px; padding-right:10px;}
    #footer .copy span{font-size:12px;}
    #footer .bottom{flex-direction: column;}
    #footer .customer, #footer .bank{width: 100%;}
	#footer .bottom .info{margin-top:10px; text-align:left;}
	#footer .bottom .info span{margin-bottom:5px;}
    /* #footer .bottom .info span{display: none;} */
    #footer .bottom .info  br{display: none;}
    #footer .customer, #footer .bank{text-align: left;}
    #footer .bottom{padding: 15px 0 0; gap: 12px;}
    #footer .bottom, #footer .bank dl, #footer .top .link{justify-content: left;}
    #footer .bottom .f_logo{width: 115px; margin:0;}
    #footer .bank dl{display: inline-flex;}
    #footer .bank dl *{font-size: 15px;}
    #footer .bank span{font-size: 13px; margin-top: 3px;}
    #footer .copy p{font-size:13px; left: 0;}
    .lnb > ul > li{margin:2px 3px;}
    .lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}

@media screen and (max-width:400px){
    #footer .top .inr > div{height:60px;}
    #footer .notice .bx-wrapper{margin-left:3%;}
    #footer .notice .bx-controls{width:90px;}
    #footer .notice .bx-controls > div{padding:0px;}
    #footer .notice .list li{width:calc(100% - 150px) !important;}
}

@media screen and (max-width:380px){
	.kakao-counsult > a,
	.kakao-counsult .btn_kakao{flex-direction:column; gap:3px !important; line-height:1;}
}

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

    #header .counsult .cont{font-size:14px;}
    .area_util ul > li{margin:0 8px;}
    *[data-shop-list="default"] > li > a .percent{height:50px !important; padding:7px 10px !important;}

	.kakao-counsult > a span,
	.kakao-counsult .btn_kakao span{font-size:13px;}
}

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

    .area_util{right:45px;}
    .area_util ul > li{margin:0 4px;}
    .area_howto_order li span{font-size:12px; letter-spacing:-.5px;}
    #header .counsult_link{line-height:1; padding-top:10px;}
    #header .counsult_link .cont{font-size:14px; font-weight:300;}
    #header .counsult_link i{height:15px;}
    #header .counsult_link i img{width: auto;}
}

@media screen and (max-width:260px){
    .area_howto_order{gap:0 5px;}
}
@media screen and (max-width:208px){
    #header .counsult_link{padding-top:4px;}
}

@keyframes button-animation {
    0% {background-color: #fae100;}
    50% {background-color: #fab600; color: #111;}
    100% {background-color: #fae100; color: #371c1d;}
}