/* COMMON */
:root{
--primaryColor-1000:rgba(247, 150, 36, 1);
--primaryColor-900:rgba(247, 150, 36, 0.9);
--primaryColor-800:rgba(247, 150, 36, 0.8);
--primaryColor-700:rgba(247, 150, 36, 0.7);
--primaryColor-600:rgba(247, 150, 36, 0.6);
--primaryColor-500:rgba(247, 150, 36, 0.5);
--primaryColor-400:rgba(247, 150, 36, 0.4);
--primaryColor-300:rgba(247, 150, 36, 0.3);
--primaryColor-200:rgba(247, 150, 36, 0.2);
--primaryColor-100:rgba(247, 150, 36, 0.1);

--blackColor-1000:#000;
--blackColor-900:#999;
--blackColor-800:#888;
--blackColor-700:#777;
--blackColor-600:#666;
--blackColor-500:#555;
--blackColor-400:#444;
--blackColor-300:#333;
--blackColor-200:#222;
--blackColor-100:#111;

--blackColor:rgb(0, 0, 0);
--whiteColor:rgb(255, 255, 255);
}

.wrap{min-width:1440px; position:relative;}

.centerWrap{width:100%; max-width:1280px; margin:0 auto;}

main{padding:0 0 60px;}

.display-pc{display:block;}
.display-m{display:none;}

@media (max-width:1024px) {
.wrap{min-width:auto;}
.centerWrap{padding:0 16px;}

main{padding:24px 0 60px;}
.main-body main{padding:16px 0 60px;}

.display-pc{display:none;}
.display-m{display:block;}
}
@media (max-width:768px) {

}


/* IMG */
.img-wrap{}
.img-wrap img.img-normal{}
.img-wrap img.img-active{display:none;}
.img-wrap:hover img.img-normal{display:none;}
.img-wrap:hover img.img-active{display:block;}
.img-wrap.active img.img-normal{display:none;}
.img-wrap.active img.img-active{display:block;}

img.img-horizontal{width:100%!important; height:auto!important;}
img.img-vertical{width:auto!important; height:100%!important;}


/* 로그인 / 회원가입 */
.login-wrap{position:relative;}
.login-wrap #login-bg{width:100%; min-height:100vh; display:block; position:absolute; inset:0; pointer-events:none; z-index:0;}
.login-wrap .login-content{min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1;}

.login-wrap .login-form-wrap{flex:1; width:100%; max-width:540px; display:flex; justify-content:center; align-items:center; margin:60px auto;}
.login-wrap .login-form{flex:1; display:flex; flex-direction:column; background:#fff; border-radius:8px; box-shadow:2px 4px 16px rgba(0, 0, 0, 0.075); padding:40px;}
.login-wrap .login-form .login-head{display:flex; flex-direction:column; align-items:center; gap:24px; margin:0 0 36px;}
.login-wrap .login-form .login-head img{width:152px; display:block;}
.login-wrap .login-form .login-head .login-tab{width:100%; display:flex; background:#f7f7f7; border-radius:50px; overflow:hidden;}
.login-wrap .login-form .login-head .login-tab li{flex:0 50%;}
.login-wrap .login-form .login-head .login-tab li a{display:flex; justify-content:center; align-items:center; font-size:15px; font-weight:500; line-height:1; color:var(--blackColor-500); padding:16px 8px;}
.login-wrap .login-form .login-head .login-tab li a.active{background:var(--blackColor-300); border-radius:50px; color:#fff;}

.login-wrap .login-form .login-body{display:flex; flex-direction:column; gap:32px;}
.login-wrap .login-form .login-body .login-box{display:flex; flex-direction:column; gap:10px;}
.login-wrap .login-form .login-body .login-box h4{font-size:13px; font-weight:400; line-height:1.35; color:#777; text-align:center;}
.login-wrap .login-form .login-body .login-box .loginMember{display:flex; gap:12px;}
.login-wrap .login-form .login-body .login-box .loginMember label{flex:1; display:flex; justify-content:; align-items:center; padding:0; margin:0; position:relative; cursor:pointer;}
.login-wrap .login-form .login-body .login-box .loginMember label input{position:absolute; left:-9999px;}
.login-wrap .login-form .login-body .login-box .loginMember label span{flex:1; display:flex; align-items:center; gap:4px; font-size:15px; color:#555; background:#f9f9f9; border:1px solid #ddd; border-radius:8px; padding:16px;}
.login-wrap .login-form .login-body .login-box .loginMember label input:checked + span,
.login-wrap .login-form .login-body .login-box .loginMember label:hover span,
.login-wrap .login-form .login-body .login-box .loginMember label:focus span{color:var(--primaryColor-1000); border:1px solid var(--primaryColor-1000);}
.login-wrap .login-form .login-body .login-box .loginMember label input:checked + span img.img-normal,
.login-wrap .login-form .login-body .login-box .loginMember label:hover span img.img-normal,
.login-wrap .login-form .login-body .login-box .loginMember label:focus span img.img-normal{display:none;}
.login-wrap .login-form .login-body .login-box .loginMember label input:checked + span img.img-active,
.login-wrap .login-form .login-body .login-box .loginMember label:hover span img.img-active,
.login-wrap .login-form .login-body .login-box .loginMember label:focus span img.img-active{display:block;}

.login-wrap .login-form .login-body .join-tab-wrap{display:flex; flex-direction:column; align-items:center; gap:16px;}
.login-wrap .login-form .login-body .join-tab-wrap p{font-size:15px; font-weight:400; line-height:1.3; color:var(--blackColor-200);}
.login-wrap .login-form .login-body .join-tab-wrap dl{display:flex; gap:4px;}
.login-wrap .login-form .login-body .join-tab-wrap dl dt,
.login-wrap .login-form .login-body .join-tab-wrap dl dd{font-size:13px; font-weight:400; line-height:1.3; color:var(--blackColor-200);}
.login-wrap .login-form .login-body .join-tab-wrap dl dt{}
.login-wrap .login-form .login-body .join-tab-wrap dl dd{flex:0 264px; word-break:keep-all;}
.login-wrap .login-form .login-body .join-tab-wrap strong{}
.login-wrap .login-form .login-body .join-tab{width:100%; display:flex; gap:8px;}
.login-wrap .login-form .login-body .join-tab li{flex:1;}
.login-wrap .login-form .login-body .join-tab li a{width:100%; height:; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; font-size:16px; font-weight:400; line-height:1; color:var(--blackColor-500); background:#fff; border:1px solid var(--blackColor-800); border-radius:8px; outline:none; padding:16px 8px;}
.login-wrap .login-form .login-body .join-tab li a:hover{color:var(--primaryColor-1000); border:1px solid var(--primaryColor-1000);}
.login-wrap .login-form .login-body .join-tab li a strong{font-weight:700;}
.login-wrap .login-form .login-body .join-tab hr{border-color:#ddd; opacity:1; margin:8px 0;}

.login-wrap .login-form .login-body .login-box .login-box-item{background:#f9f9f9; border:1px solid #eee; border-radius:8px; position:relative;}
.login-wrap .login-form .login-body .login-box .login-box-item label{height:100%; display:flex; align-items:center; gap:4px; font-size:15px; color:#555; padding:8px 16px; position:absolute; top:50%; transform:translate(0, -50%); z-index:0;}
.login-wrap .login-form .login-body .login-box .login-box-item::focus-within label{opacity:0; visibility:hidden; pointer-events:none;}
.login-wrap .login-form .login-body .login-box .login-box-item input:not(:placeholder-shown) + label{opacity:0; visibility:hidden; pointer-events:none;}
.login-wrap .login-form .login-body .login-box .login-box-item input{width:100%; height:52px; font-size:15px; background:none; border:none; border-radius:8px; outline:none; padding:12px; position:relative; z-index:1;}
.login-wrap .login-form .login-body .login-box .login-box-item input::placeholder{opacity:0; color:#888;}
.login-wrap .login-form .login-body .login-box .login-box-item input:focus::placeholder{opacity:1;}
.login-wrap .login-form .login-body .login-box .login-box-item input:focus{color:#333; background:#fff; border:1px solid var(--primaryColor-1000); box-shadow:0 0 0 3px rgba(0, 96, 128, 0.1);}
.login-wrap .login-form .login-body .login-box .login-guide{display:flex;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-l{flex:1;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r{}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r ul{display:flex; list-style:none; margin:0;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r ul li{display:flex; align-items:center;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r ul li + li{}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r ul li + li:before{content:""; width:1px; height:14px; display:block; background:#ccc; margin:0 12px;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r ul li a{display:block; font-size:14px; font-weight:400; line-height:1; color:#777;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r ul li a:hover{color:var(--primaryColor-1000);}

.login-wrap .login-form .login-body .login-btn-wrap{display:flex; flex-direction:column; gap:8px;}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn{width:100%; height:54px; font-size:16px; font-weight:700; line-height:1; border:none; outline:none; border-radius:8px;}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn.login-btn-type01{color:#fff; background:var(--primaryColor-1000);}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn.login-btn-type01:hover{background:var(--primaryColor-900);}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn.login-btn-type02{color:var(--primaryColor-1000); background:#fff; border:1px solid var(--primaryColor-1000);}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn.login-btn-type02:hover{color:var(--primaryColor-900); border:1px solid var(--primaryColor-900);}
.login-wrap .login-form .login-body .login-btn-wrap hr{border-color:#ddd; opacity:1; margin:8px 0;}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn-group{display:flex; gap:8px;}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn.login-btn-type03{flex:1 50%; color:var(--blackColor-500); background:#fff; border:1px solid var(--blackColor-800);}
.login-wrap .login-form .login-body .login-btn-wrap .login-btn.login-btn-type03:hover{color:var(--blackColor-300); border:1px solid var(--blackColor-300);}

.login-wrap .login-form .login-body .login-find{display:flex; justify-content:center; margin:24px 0 0;}
.login-wrap .login-form .login-body .login-find a{display:flex; align-items:center; font-size:12px; font-weight:400; line-height:1; color:#555;}
.login-wrap .login-form .login-body .login-find a:hover{color:var(--primaryColor-1000);}
.login-wrap .login-form .login-body .login-find a + a:before{content:"/"; display:block; font-size:12px; font-weight:400; line-height:1; color:#ccc; margin:0 12px;}

.login-wrap .login-footer{margin:auto;}
.login-wrap .login-footer .copyright{width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 0 24px;}
.login-wrap .login-footer .copyright address{display:flex; flex-direction:column; align-items:center; gap:4px; margin:0;}
.login-wrap .login-footer .copyright address p{display:flex; flex-wrap:wrap; row-gap:8px; font-size:11px; line-height:1.3; color:var(--blackColor-700);}
.login-wrap .login-footer .copyright address p span + span:before{content:"/"; font-size:10px; margin:0 8px;}
.login-wrap .login-footer .copyright strong{font-size:11px; font-weight:500; line-height:1; color:var(--blackColor-500);}

@media (max-width:1024px) {

}
@media (max-width:768px) {
.login-wrap .login-form{padding:24px 16px; margin:0 16px;}
.login-wrap .login-form .login-head{margin:0 0 24px;}
.login-wrap .login-form .login-head img{width:124px;}
.login-wrap .login-form .login-head .login-tab li a{font-size:14px; padding:12px 8px;}

.login-wrap .login-form .login-body{gap:24px;}
.login-wrap .login-form .login-body .login-box .loginMember label span{font-size:14px; padding:12px;}

.login-wrap .login-form .login-body .join-tab-wrap dl dd{flex:1;}
.login-wrap .login-form .login-body .join-tab li a{gap:4px; font-size:14px;}

.login-wrap .login-form .login-body .login-box .login-box-item label{font-size:14px; padding:4px 12px;}
.login-wrap .login-form .login-body .login-box .login-box-item input{height:46px; font-size:14px;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-l .form-check{}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-l .form-check span{font-size:12px;}
.login-wrap .login-form .login-body .login-box .login-guide .login-guide-r ul li a{font-size:13px;}

.login-wrap .login-form .login-body .login-btn-wrap .login-btn{height:48px; font-size:14px;}
.login-wrap .login-form .login-body .login-btn-wrap hr{margin:2px 0;}
}


/* HEADER */
header{display:flex; flex-direction:column;}

header .header-m{display:none;}

header .headerTop-wrap{width:100%; background:var(--blackColor-200);}
header .headerTop{height:38px; display:flex;}
header .headerTop ul{flex:1; display:flex; align-items:center; gap:24px;}
header .headerTop ul.headerTop-l{}
header .headerTop ul.headerTop-r{justify-content:flex-end;}
header .headerTop ul li{}
header .headerTop ul li a{display:flex; justify-content:center; align-items:center; font-size:12px; line-height:1; color:rgba(255,255,255,0.7);}
header .headerTop ul li a:hover{color:var(--primaryColor-1000);}

header .headerBottom-wrap{border-bottom:1px solid #e5e5e5; /*margin:0 0 20px;*/}
.main-body header .headerBottom-wrap{border:0; margin:0;}
header .headerBottom{display:flex; align-items:center; gap:40px; padding:24px 0;}
header .headerBottom .header-logo{flex:0 160px;}
header .headerBottom .header-logo img{}

header .headerBottom .header-gnb{flex:1; display:flex; align-items:center; gap:;}
header .headerBottom .header-gnb > li{position:relative;}
header .headerBottom .header-gnb > li > a{display:flex; justify-content:center; align-items:center; gap:2px; padding:16px 20px;}
header .headerBottom .header-gnb > li > a img{}
header .headerBottom .header-gnb > li > a p{font-size:18px; font-weight:500; line-height:1; color:var(--blackColor-300);}
header .headerBottom .header-gnb > li > a:hover p{color:var(--primaryColor-1000);}

header .headerBottom .header-gnb > li.on > .category-area{display:flex;}
header .headerBottom .header-gnb > li .category-area{width:860px; max-height:438px; display:none; background:#fff; border:1px solid #ccc; border-radius:16px; box-shadow:0 6px 8px 0 rgba(0,0,0,0.25); padding:20px 0; position:absolute; top:100%; left:0; z-index:10;}
header .headerBottom .header-gnb > li .category-area.noDepth{width:auto;}
header .headerBottom .header-gnb > li .category-area ul{flex:1; display:flex; flex-direction:column; padding:0 16px; overflow-y:auto;}
header .headerBottom .header-gnb > li .category-area ul + ul{border-left:1px solid #eee;}
header .headerBottom .header-gnb > li .category-area ul li{}
header .headerBottom .header-gnb > li .category-area ul li + li{}
header .headerBottom .header-gnb > li .category-area ul li a{display:flex; align-items:center; border-radius:50px; padding:14px 16px;}
header .headerBottom .header-gnb > li .category-area ul li a:hover,
header .headerBottom .header-gnb > li .category-area ul li.on a{background:var(--primaryColor-100);}
header .headerBottom .header-gnb > li .category-area ul li a p{flex:1; font-size:16px; font-weight:400; line-height:1; color:var(--blackColor-200);}
header .headerBottom .header-gnb > li .category-area ul li a:hover p{font-weight:500;}
header .headerBottom .header-gnb > li .category-area ul li a i{display:none; font-size:12px; color:var(--blackColor-200);}
header .headerBottom .header-gnb > li .category-area ul li a:hover i{display:block;}
header .headerBottom .header-gnb > li .category-area ul:last-of-type li a i{display:none;}
html .category-area ul::-webkit-scrollbar{width:4px;}
html .category-area ul::-webkit-scrollbar-track{background-color:; margin:0;}
html .category-area ul::-webkit-scrollbar-thumb{background-color:#a1a1a1; border-radius:20px;}


header .headerBottom .header-quick{display:flex; align-items:center; gap:32px;}
header .headerBottom .header-quick .header-searchArea{}
header .headerBottom .header-quick .header-searchArea .searchArea{width:320px; height:42px; display:flex; background:#F7F7F7; border-radius:50px; padding:0 10px 0 0;}
header .headerBottom .header-quick .header-searchArea .searchArea input{width:100%; background:none; border:none; outline:none; font-size:14px; font-weight:400; line-height:1; color:var(--blackColor-300); padding:4px 24px;}
header .headerBottom .header-quick .header-searchArea .searchArea button{width:42px; height:42px; display:flex; justify-content:center; align-items:center; background:none; border:none;}
header .headerBottom .header-quick .header-searchArea .searchArea button img{}
header .headerBottom .header-quick ul{display:flex; align-items:center; gap:32px;}
header .headerBottom .header-quick ul li{}
header .headerBottom .header-quick ul li a{position:relative;}
header .headerBottom .header-quick ul li a img{}
header .headerBottom .header-quick ul li a span{width:17px; height:17px; display:flex; justify-content:center; align-items:center; background:#FFF5EA; border-radius:50px; font-size:11px; font-weight:400; line-height:1; color:var(--primaryColor-1000); position:absolute; top:-6px; right:-6px;}

@media (max-width:1024px) {
header{border-bottom:1px solid #e5e5e5; position:sticky; top:0; left:0; z-index:1000;}
header .headerTop-wrap{display:none;}
header .headerBottom-wrap{display:none;}
header .header-m{width:100%; height:60px; display:flex; align-items:center; background:#fff; position:relative; padding:4px 24px;}
header .header-m .header-m-logo{flex:1;}
header .header-m .header-m-logo a{width:120px; display:block;}
header .header-m .header-m-logo a img{}

header .header-m button{width:60px; height:100%; display:flex; justify-content:center; align-items:center; position:absolute; top:50%; left:0; transform:translate(0, -50%);}
header .header-m h1{font-size:18px; font-weight:500; line-height:1; color:#222; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

header .header-m ul{flex:1; display:flex; justify-content:flex-end; gap:16px;}
header .header-m ul li{}
header .header-m ul li a{}
header .header-m ul li a img{}
}

@media (max-width:768px) {
header .header-m{padding:4px 16px;}
header .header-m .header-m-logo a{width:96px;}
}


/* FOOTER */
footer{width:100%; background:#f8f8f8;}
footer .footer{display:flex; justify-content:space-between; padding:60px 0;}
footer .footer .footer-l{display:flex; flex-direction:column; gap:32px;}
footer .footer .footer-l img{width:160px;}
footer .footer .footer-l .footer-l-info{display:flex; flex-direction:column; gap:24px;}
footer .footer .footer-l .footer-l-info ul{display:flex; align-items:center; gap:16px;}
footer .footer .footer-l .footer-l-info ul li{}
footer .footer .footer-l .footer-l-info ul li a{display:block; font-size:14px; font-weight:500; line-height:1; color:var(--blackColor-500);}
footer .footer .footer-l .footer-l-info ul li a:hover{color:var(--primaryColor-1000);}
footer .footer .footer-l .footer-l-info address{display:flex; flex-direction:column; gap:8px; margin:0;}
footer .footer .footer-l .footer-l-info address p{display:flex; flex-wrap:wrap; gap:16px; row-gap:8px; font-size:13px; line-height:1.3; color:var(--blackColor-700);}
footer .footer .footer-l .footer-l-info address p span{}
footer .footer .footer-l .footer-l-info strong{font-size:14px; line-height:1; color:var(--blackColor-700);}
footer .footer .footer-r{display:flex; flex-direction:column; gap:24px}
footer .footer .footer-r h3{flex:0; font-size:16px; font-weight:700; line-height:1; color:var(--blackColor-300);}
footer .footer .footer-r ul{display:flex; flex-direction:column; gap:16px;}
footer .footer .footer-r ul li{flex:1;}
footer .footer .footer-r ul li a{display:block; font-size:14px; font-weight:400; line-height:1; color:var(--blackColor-300);}
footer .footer .footer-r ul li a:hover{color:var(--primaryColor-1000);}


.fix-quick{display:block; position:fixed; right:32px; bottom:32px; z-index:1000;}
.fix-quick ul{display:flex; flex-direction:column; gap:8px;}
.fix-quick ul li{}
.fix-quick ul li a{width:44px; height:44px; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #eee; border-radius:50px; box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.fix-quick ul li a img{}


.m-fix-bar{display:none;}
.m-fix-quick{display:none;}

@media (max-width:1024px) {
footer .footer{padding:40px 0;}
footer .footer .footer-l{flex:1; gap:24px;}
footer .footer .footer-l img{width:140px;}
footer .footer .footer-r{display:none;}

.fix-quick{display:none;}

.m-fix-bar{width:100%; height:60px; display:block; background:#fff; box-shadow:0 0 12px rgba(0,0,0,0.08); position:sticky; bottom:0; left:0; z-index:1020;}
.m-fix-bar ul{height:100%; display:flex; justify-content:center; align-items:center;}
.m-fix-bar ul li{flex:1 20%; max-width:74px; height:100%;}
.m-fix-bar ul li a{height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;}
.m-fix-bar ul li a .m-bar-img{position:relative;}
.m-fix-bar ul li a .m-bar-img img{}
.m-fix-bar ul li a .m-bar-img .m-bar-count{width:14px; height:14px; display:flex; justify-content:center; align-items:center; background:#EAF1FE; border-radius:50px; font-size:10px; line-height:1; color:var(--primaryColor-1000); position:absolute; top:-4px; right:-8px;}
.m-fix-bar ul li a p{font-size:10px; line-height:1; color:var(--blackColor-300);}

.m-fix-quick{display:block; position:fixed; right:12px; bottom:84px; z-index:1030;}
.m-fix-quick ul{display:flex; flex-direction:column; gap:8px;}
.m-fix-quick ul li{}
.m-fix-quick ul li a{width:44px; height:44px; display:flex; justify-content:center; align-items:center; background:#fff; border-radius:50px; box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.m-fix-quick ul li a img{}
}

@media (max-width:768px) {
footer .footer .footer-l img{width:120px;}
footer .footer .footer-l .footer-l-info{}
footer .footer .footer-l .footer-l-info ul li a{font-size:13px;}
footer .footer .footer-l .footer-l-info address{gap:6px;}
footer .footer .footer-l .footer-l-info address p{flex-direction:column; gap:6px; font-size:12px;}
footer .footer .footer-l .footer-l-info strong{font-size:13px;}
}


/* OFFcanvas */
.offcanvas.offcanvas-side{width:80%; max-width:336px; z-index:1200;}
.offcanvas.offcanvas-side .side-close{position:absolute; top:18px; right:-44px;}
.offcanvas.offcanvas-side .side-close img{}
.offcanvas.offcanvas-side .side-close.side-close-r{left:-44px; right:auto;}

.offcanvas.offcanvas-side .offcanvas-side-vertical{height:100%; display:flex; flex-direction:column; overflow-y:auto;}
.offcanvas.offcanvas-side .offcanvas-side-vertical::-webkit-scrollbar{width:4px;}
.offcanvas.offcanvas-side .offcanvas-side-vertical::-webkit-scrollbar-track{background-color:#ccc; margin:0;}
.offcanvas.offcanvas-side .offcanvas-side-vertical::-webkit-scrollbar-thumb{background-color:var(--blackColor-500); border-radius:20px;}


.offcanvas.offcanvas-bottom{height:auto; max-height:60vh; border-radius:8px 8px 0 0;}
.offcanvas.offcanvas-bottom:before{content:""; display:block; width:34px; height:3px; background:#ddd; border-radius:50px; margin:12px auto;}

.offcanvas.offcanvas-bottom .offcanvas-header{border-bottom:1px solid #ddd;}
.offcanvas.offcanvas-bottom .offcanvas-title{width:100%; display:flex; align-items:center;}
.offcanvas.offcanvas-bottom .offcanvas-title h2{flex:1; font-size:16px; font-weight:500; line-height:1; color:var(--blackColor-300); text-align:center;}
.offcanvas.offcanvas-bottom .offcanvas-title i{font-size:18px; color:#888;}
.offcanvas.offcanvas-bottom .offcanvas-title i:hover{color:var(--primaryColor-1000);}


.offcanvas.offcanvas-bottom.offcanvas-bottom-radio ul{display:flex; flex-direction:column; gap:16px;}
.offcanvas.offcanvas-bottom.offcanvas-bottom-radio ul li{}
.offcanvas.offcanvas-bottom.offcanvas-bottom-radio ul li label{}


.offcanvas-backdrop.show{opacity:0.7;}


/* M SIDE */
#offcanvas-side-menu{background:#F5F5F5;}

.offcanvas-side section{width:100%; background:#fff; border-bottom:1px solid #eee;}
.offcanvas-side section + section{margin:10px 0 0;}

.offcanvas-side .side-header{padding:18px 16px;}
.offcanvas-side .side-header ul{display:flex; justify-content:center; gap:40px;}
.offcanvas-side .side-header ul li{}
.offcanvas-side .side-header ul li a{display:flex; align-items:center; gap:4px;}
.offcanvas-side .side-header ul li a img{}
.offcanvas-side .side-header ul li a p{font-size:14px; color:var(--blackColor-300); white-space:nowrap;}
.offcanvas-side .side-header ul li a:hover p{color:var(--primaryColor-1000);}


.offcanvas-side .side-menu{flex:1; padding:18px 16px; overflow-y:auto;}
.offcanvas-side .side-menu .package-menu{display:flex; flex-direction:column; gap:18px;}/* 1차 */
.offcanvas-side .side-menu .package-menu + .package-menu{border-top:1px solid #eee; padding:16px 0 0; margin:16px 0 0;}
.offcanvas-side .side-menu .package-menu .package-item{}
.offcanvas-side .side-menu .package-menu .package-item .package-line{display:flex; align-items:center;}
.offcanvas-side .side-menu .package-menu .package-item .package-line a{flex:1;}
.offcanvas-side .side-menu .package-menu .package-item .package-line button{background:none; border:none; padding:6px 8px; transition:transform 0.3s; cursor:pointer;}
.offcanvas-side .side-menu .package-menu .package-item.open > .package-line button{transform:rotate(90deg);}

.offcanvas-side .side-menu .package-menu .package-item .package-sub{max-height:0; overflow:hidden; opacity:0; transition:0.3s;}

/* 1차 text */
.offcanvas-side .side-menu .package-menu > .package-item > .package-line > a{font-size:16px; font-weight:700; color:#222; padding:4px 0;}

/* 2차 */
.offcanvas-side .side-menu .package-menu .package-item.open > .package-sub{max-height:1000px; display:flex; flex-direction:column; gap:8px; padding:8px 0 0 14px; opacity:1;}
/* 2차 text */
.offcanvas-side .side-menu .package-menu .package-item > .package-sub > .package-item a{font-size:14px; font-weight:500; color:var(--blackColor-300); padding:6px 0;}

/* 3차 */
.offcanvas-side .side-menu .package-menu .package-item.open > .package-sub > .package-item.open > .package-sub{gap:4px; padding:4px 0 4px 14px;}
/* 3차 text */
.offcanvas-side .side-menu .package-menu .package-item > .package-sub > .package-item > .package-sub a{font-size:13px; font-weight:400; color:#444; padding:4px 0;}

/* 4차 */
.offcanvas-side .side-menu .package-menu .package-item.open > .package-sub > .package-item.open > .package-sub > .package-item.open > .package-sub{gap:0; padding:4px 0 4px 12px;}
/* 4차 text */
.offcanvas-side .side-menu .package-menu .package-item > .package-sub > .package-item > .package-sub > .package-item > .package-sub a{font-size:12px; font-weight:400; color:var(--blackColor-500); padding:4px 0;}


.offcanvas-side .side-quick{}
.offcanvas-side .side-quick ul.side-quick-list{height:140px; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:#eee; border-bottom:1px solid #eee;;}
.offcanvas-side .side-quick ul.side-quick-list li{background:#fff;}
.offcanvas-side .side-quick ul.side-quick-list li a{height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;}
.offcanvas-side .side-quick ul.side-quick-list li a .side-quick-img{position:relative;}
.offcanvas-side .side-quick ul.side-quick-list li a .side-quick-img span{width:14px; height:14px; display:flex; justify-content:center; align-items:center; background:#EAF1FE; border-radius:50px; font-size:10px; line-height:1; color:var(--primaryColor-1000); position:absolute; top:-4px; right:-8px;}
.offcanvas-side .side-quick ul.side-quick-list li a .side-quick-img img{}
.offcanvas-side .side-quick ul.side-quick-list li a p{font-size:12px; line-height:1; color:var(--blackColor-300);}
.offcanvas-side .side-quick ul.side-quick-list li a:hover p{color:var(--primaryColor-1000);}

.offcanvas-side .side-quick ul.side-set-list{display:flex; justify-content:center; align-items:center; padding:12px 0;}
.offcanvas-side .side-quick ul.side-set-list li{}
.offcanvas-side .side-quick ul.side-set-list li {}


/* MOBILE SEARCH */
#m-search-area{width:100%; height:0; max-height:100dvh; background:#fff; position:fixed; top:0; left:0; z-index:1010;}
#m-search-area.show{height:100%;}
#m-search-area section{height:100%; display:flex; flex-direction:column; gap:32px; padding:20px;}
#m-search-area section .m-search-box{width:100%; display:flex; align-items:center; gap:10px;}
#m-search-area section .m-search-box .m-search-input{flex:1; display:flex; align-items:center; gap:12px; background:#f5f5f5; border-radius:50px; padding:0 16px 0 0; position:relative;}
#m-search-area section .m-search-box .m-search-input input{width:100%; font-size:13px; color:#222; background:none; border:none; outline:none; padding:12px 12px 12px 16px;}
#m-search-area section .m-search-box .m-search-input button{min-width:20px;}

#m-search-area section .m-search-box .m-search-input .searchImg-frame{width:calc(100% + 2px); display:none; flex-direction:column; background:#fff; border:1px solid #e5e5e5; border-radius:20px; box-shadow:0 8px 16px 0 rgba(27, 46, 94, 0.15); position:absolute; top:-1px; left:-1px; padding:14px 16px; z-index:10;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-head{display:flex; margin:0 0 12px;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-head h2{width:100%; display:flex; justify-content:center; font-size:14px; line-height:1; color:var(--blackColor-300); position:relative;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-head h2 button{width:20px; height:20px; position:absolute; top:50%; right:0; transform:translate(0, -50%); padding:0;}

#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body{}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body label{width:100%; display:flex; flex-direction:column; align-items:center; border:1px dashed #ddd; border-radius:12px; padding:12px; cursor:pointer;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body label input{font-size:0; position:absolute; opacity:0;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body label img{}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body label strong{display:block; font-size:16px; font-weight:500; line-height:1.2; color:var(--blackColor-300); text-align:center; word-break:keep-all; margin:10px 0 0;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body label small{display:block; font-size:11px; font-weight:400; line-height:1.2; color:#777; text-align:center; word-break:keep-all; margin:8px 0 0;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body label p{display:block; font-size:12px; font-weight:500; line-height:1; color:var(--blackColor-500); text-align:center; border:1px solid #ddd; border-radius:50px; padding:8px 12px; margin:20px 0 0;}
#m-search-area section .m-search-box .m-search-input .searchImg-frame .searchImg-frame-body label p:hover{border:1px solid var(--blackColor-500);}

#m-search-area section .m-search-box a{font-size:22px; line-height:1; color:var(--blackColor-500);}


#m-search-area section .m-search-lately{display:flex; flex-direction:column; gap:10px;}
#m-search-area section .m-search-lately h2{font-size:16px; font-weight:500; line-height:1; color:var(--blackColor-300);}
#m-search-area section .m-search-lately ul{height:100%; max-height:420px; display:flex; flex-direction:column; overflow-y:auto;}
#m-search-area section .m-search-lately ul li{border-bottom:1px solid #eee;}
#m-search-area section .m-search-lately ul li a{display:flex; align-items:center; font-size:13px; line-height:1; color:var(--blackColor-300); white-space:nowrap; text-overflow:ellipsis; padding:14px 0; overflow:hidden;}
#m-search-area section .m-search-lately ul li a:before{content:""; display:block; width:3px; min-width:3px; height:3px; background:#276EF1; border-radius:50px; margin:0 10px 0 0;}


/* LNB */
.horizon-inner{width:100%; display:flex; align-items:flex-start;}
.horizon-inner .lnb-wrap{flex:0 220px; max-width:220px; border:1px solid #ddd; border-radius:8px; padding:24px 32px;}
.horizon-inner .lnb-wrap h2{display:block; font-size:20px; font-weight:700; line-height:1; color:#222;}
.horizon-inner .lnb-wrap .lnb-items{display:flex; flex-direction:column; gap:36px; border-top:1px solid #ddd; padding:24px 0 0; margin:24px 0 0;}
.horizon-inner .lnb-wrap .lnb-items dl{display:flex; flex-direction:column; gap:16px;}
.horizon-inner .lnb-wrap .lnb-items dl dt{font-size:15px; font-weight:700; line-height:1; color:var(--blackColor-300);}
.horizon-inner .lnb-wrap .lnb-items dl dd{}
.horizon-inner .lnb-wrap .lnb-items dl dd a{display:block; font-size:14px; font-weight:400; line-height:1; color:var(--blackColor-500);}
.horizon-inner .lnb-wrap .lnb-items dl dd a.on{font-weight:500; color:var(--primaryColor-1000);}
.horizon-inner .lnb-wrap .lnb-items dl dd a:hover{color:var(--primaryColor-1000);}

.horizon-inner .inner-contents{width:calc(100% - 220px); min-height:340px; padding:0 0 0 60px;}

@media (max-width:768px) {
.horizon-inner-my{flex-direction:column-reverse;}

.horizon-inner .lnb-wrap{flex:1; width:calc(100% + 32px); max-width:none; border-top:8px solid #f3f3f3; border-width:8px 0 0; border-radius:0; position:relative; left:-16px; padding:16px;}
.horizon-inner .lnb-wrap h2{display:none;}
.horizon-inner .lnb-wrap .lnb-items{gap:0; border:none; padding:0; margin:0;}
.horizon-inner .lnb-wrap .lnb-items dl{}
.horizon-inner .lnb-wrap .lnb-items dl + dl{border-top:1px solid #e5e5e5; padding:18px 0 0; margin:20px 0 0;}

.horizon-inner .inner-contents{width:100%; padding:0 0 40px;}
}


/* VISUAL */
.mainVisual-warp{}
.mainVisual-warp .mainVisual{display:flex; gap:20px;}
.mainVisual-warp .mainVisual .swiper{border-radius:16px;}
.mainVisual-warp .mainVisual .swiper .swiper-pagination{}
.mainVisual-warp .mainVisual .swiper .swiper-pagination-bullet{width:24px; height:2px; background:#000; border-radius:0; opacity:0.5; margin:0 3px;}
.mainVisual-warp .mainVisual .swiper .swiper-pagination-bullet-active{background:var(--primaryColor-1000); opacity:1;}

.mainVisual-warp .mainVisual .mainVisual-l{flex:1 0 840px;}
.mainVisual-warp .mainVisual .mainVisual-l .swiper-slide{}

.mainVisual-warp .mainVisual .mainVisual-r{flex:1 0 420px;}
.mainVisual-warp .mainVisual .mainVisual-r .swiper-slide{}

.mainVisual-warp .mainVisual .swiper-slide a{display:block; position:relative;}
.mainVisual-warp .mainVisual .swiper-slide a .visual-bg{width:100%; height:; position:relative; left:0; top:0; background-size:cover;}
.mainVisual-warp .mainVisual .swiper-slide a .visual-bg.visual-bg-pc{display:block;}
.mainVisual-warp .mainVisual .swiper-slide a .visual-bg.visual-bg-mb{display:none;}

@media (max-width:1024px) {
.mainVisual-warp .mainVisual .mainVisual-l{flex:1 50%;}
.mainVisual-warp .mainVisual .mainVisual-r{flex:1 50%;}
}

@media (max-width:768px) {
.mainVisual-warp .mainVisual{flex-direction:column; gap:8px;}
.mainVisual-warp .mainVisual .mainVisual-l{flex:none; width:100%;}
.mainVisual-warp .mainVisual .mainVisual-r{flex:none; width:100%;}
}


/* TABLE PC */
.d-table{width:100%; display:table; border-collapse:collapse; text-align:left; border-top:1px solid #222; position:relative;}
.d-table th,
.d-table td{min-height:62px; font-size:14px; vertical-align:middle; word-wrap:break-word; word-break:break-all; padding:20px;}
.d-table thead th{font-weight:500; color:#222; text-align:center; border-bottom:1px solid #ddd; padding:8px 0;}
.d-table tbody tr{border-bottom:1px solid #eee;}
.d-table tbody tr:last-child{border-bottom:1px solid #ddd;}
.d-table tbody .th{background:#ccc; color:#222; font-weight:500;}
.d-table .not-found-tr td{color:#999; text-align:center; padding:60px 0;}


.d-table .chk{width:60px; min-width:60px; padding:0;}
.d-table .chk label{margin:auto;}

.d-table .order-no{}
.d-table .order-no p{font-size:14px; color:var(--blackColor-200);}
.d-table .order-no p small{display:block; font-size:13px;}

.d-table .pay-info strong{display:flex; font-weight:500; white-space:nowrap;}

.d-table .item-name{}
.d-table .item-name .nameBox{display:flex; align-items:center; gap:16px;}
.d-table .item-name .nameBox .thumb{width:110px; height:110px; border:1px solid #eee; border-radius:8px; cursor:pointer; overflow:hidden;}
.d-table .item-name .nameBox .thumb img{width:100%;}
.d-table .item-name .nameBox .product{flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.d-table .item-name .nameBox .product .company{display:inline-block; border:1px solid #ddd; border-radius:50px; font-size:12px; line-height:1; color:var(--blackColor-300); padding:5px 10px;}
.d-table .item-name .nameBox .product .name{display:block; font-size:15px; font-weight:500; line-height:1.35; color:var(--blackColor-200); word-break:keep-all; cursor:pointer;}
.d-table .item-name .nameBox .option{width:100%; display:flex; flex-direction:column; gap:8px;}
.d-table .item-name .nameBox .option .option-name{display:flex; font-size:13px; font-weight:400; line-height:1.35; color:var(--blackColor-800);}
.d-table .item-name .nameBox .option .option-name.option-name-vertical{flex-direction:column;}
.d-table .item-name .nameBox .option .option-name p{flex:1;}
.d-table .item-name .nameBox .option .option-name button{display:flex; font-size:16px; color:var(--blackColor-500);}
.d-table .item-name .nameBox .option .option-name button:hover{color:var(--primaryColor-1000);}

.d-table .item-name .nameBox .option .option-select{background:#f5f5f5; border-radius:8px; padding:16px;}
.d-table .item-name .nameBox .option .option-select .option-select-item{display:flex; flex-direction:column; gap:6px;}
.d-table .item-name .nameBox .option .option-select .option-select-item + .option-select-item{border-top:1px dashed #d5d5d5; padding:10px 0 0; margin:12px 0 0;}

.d-table .item-name .nameBox .option .option-qty{display:flex; align-items:center; gap:12px;}

.d-table .item-name .nameBox .option .option-price{display:inline-flex; align-items:center; font-size:14px; font-weight:500; color:var(--blackColor-200);}
.d-table .item-name .nameBox .option .option-price .point_data{font-size:12px; font-weight:400; color:var(--blackColor-500);}
.d-table .item-name .nameBox .option .option-price .point_data:before{content:"/"; display:inline-block; margin:0 8px;}

.d-table .item-name .nameBox .option .item-count{padding:0 32px;}
.d-table .item-name .nameBox .option .item-count [class*="btn-"]{width:32px;}
.d-table .item-name .nameBox .option .item-count .input-num{width:40px; height:28px; font-size:13px;}
.d-table .item-name .nameBox .option .item-count .btn-minus:after{width:7px;}
.d-table .item-name .nameBox .option .item-count .btn-plus:after{width:7px;}
.d-table .item-name .nameBox .option .item-count .btn-plus:before{height:7px;}

.d-table .total{}
.d-table .total p{font-size:16px; font-weight:500; line-height:1; color:var(--blackColor-300); text-align:center;}

.d-table .item-del{}
.d-table .item-del button{display:flex; font-size:18px; color:var(--blackColor-500); margin:auto;}
.d-table .item-del button:hover{color:var(--primaryColor-1000)}


.d-table.d-table-cartTotal{margin:100px auto 0;}
.d-table.d-table-cartTotal td{position:relative;}
.d-table.d-table-cartTotal td.totalDelivery{}
.d-table.d-table-cartTotal td.totalDelivery:before{content:"\f067"; font-family:'Line Awesome Free'; font-weight:900; width:25px; height:25px; display:flex; justify-content:center; align-items:center; background:var(--blackColor-500); border-radius:50px; font-size:16px; line-height:1; color:var(--whiteColor); position:absolute; top:50%; left:0; transform:translate(-50%, -50%);}
.d-table.d-table-cartTotal td.totalDelivery .totalDelivery-box{width:50%; display:flex; flex-direction:column; align-items:center; gap:8px; margin:auto;}
.d-table.d-table-cartTotal td.totalDelivery .totalDelivery-box p{width:100%; display:flex; align-items:baseline; gap:8px;}
.d-table.d-table-cartTotal td.totalDelivery .totalDelivery-box p span{flex:1; font-size:13px; line-height:1.3; text-align:left;}
.d-table.d-table-cartTotal td.totalPrice{}
.d-table.d-table-cartTotal td.totalPrice:before{content:"\f52c"; font-family:'Line Awesome Free'; font-weight:900; width:25px; height:25px; display:flex; justify-content:center; align-items:center; background:var(--primaryColor-1000); border-radius:50px; font-size:16px; line-height:1; color:var(--whiteColor); position:absolute; top:50%; left:0; transform:translate(-50%, -50%);}
.d-table.d-table-cartTotal td p{font-size:22px; font-weight:500; line-height:1; color:var(--blackColor-200); text-align:center;}
.d-table.d-table-cartTotal td strong{display:block; font-size:28px; font-weight:700; line-height:1; color:var(--blackColor-200); text-align:center;}


/* TABLE MOBILE */
.d-table{}
.d-table .tr{display:flex; flex-wrap:wrap; align-items:flex-start; position:relative;}
.d-table .th,
.d-table .td{display:flex; flex-direction:column; justify-content:center; word-wrap:break-word; word-break:break-all; padding:12px 0;}

.d-table .thead{font-weight:500; color:var(--blackColor-200);}
.d-table .thead .tr{border-bottom:1px solid #ddd;}
.d-table .thead .th{font-weight:500; padding:8px 0;}

.d-table .tbody{position:relative; padding:0 0 12px;}
.d-table .tbody .tr{border-bottom:1px solid var(--blackColor-200);}
.d-table .tbody .tr:last-child{border-bottom:1px solid var(--blackColor-200);}
.d-table .tbody .th{font-weight:500; color:var(--blackColor-200); background:#ccc;}


.d-table .tbody .not-found-tr .td{flex-basis:100%; color:#999; text-align:center; padding:60px 0;}

.d-table .td.chk{width:100%; flex-direction:row; min-width:auto; padding:0; margin:12px 0 0;}
.d-table .td.chk label{margin:0;}
.d-table .td.chk .form-check{flex:1;}

.d-table .order-no{}
.d-table .order-no p{}
.d-table .order-no p small{}
.d-table .order-no strong{font-size:14px; font-weight:500; color:var(--primaryColor-1000);}

.d-table .td.item-name .nameBox{align-items:flex-start; gap:12px;}
.d-table .td.item-name .nameBox .thumb{width:80px; height:80px;}
.d-table .td.item-name .nameBox .product .company{font-size:11px; padding:4px 8px;}
.d-table .td.item-name .nameBox .product .name{font-size:14px;}
.d-table .td.item-name .nameBox .product .order-value{display:flex; font-size:14px; font-weight:500; color:var(--primaryColor-1000);}
.d-table .td.item-name .nameBox .option .option-name{gap:8px;}

.d-table .td.item-name .nameBox .option .option-select{padding:12px;}
.d-table .td.item-name .nameBox .option .option-select .option-select-item{gap:6px;}

.d-table .td.item-name .nameBox .option .option-qty{flex-direction:column; align-items:flex-start; gap:4px;}

.d-table .td.item-name .nameBox .option .option-price{font-size:16px;}

.d-table .d-table-LRline{flex:1; display:flex; flex-direction:column; gap:12px;}
.d-table .d-table-LRline dl{display:flex; gap:16px;}
.d-table .d-table-LRline dl dt,
.d-table .d-table-LRline dl dd{font-size:13px; color:var(--blackColor-300);}
.d-table .d-table-LRline dl dt{flex:1 0 auto;}
.d-table .d-table-LRline dl dd{}
.d-table .d-table-LRline dl dd strong{font-weight:500;}


.list-table{overflow-x:auto; padding-bottom:2px;}
.list-table::-webkit-scrollbar{height:3px;}
.list-table::-webkit-scrollbar-track{background-color:transparent;}


.d-table .d-table-btns{}
.d-table .d-table-btns p{width:80px; height:32px; font-size:14px; font-weight:500; text-align:center;}
.d-table .d-table-btns .btns-normal{width:80px; height:32px; display:flex; justify-content:center; align-items:center; font-size:13px; line-height:1; color:var(--blackColor-300); text-align:center; border:1px solid #ddd; border-radius:8px; margin:0 auto; cursor:pointer;}
.d-table .d-table-btns .btns-normal + .btns-normal{margin-top:4px;}
.d-table .d-table-btns .btns-del{}

@media (max-width:1024px){
.d-table th,
.d-table td{padding:12px;}
.d-table .th,
.d-table .td{padding:12px 0;}
.d-table .td + .td{}

.d-table .order-no{width:100%; flex-direction:row; background:#f7f7f7; padding:12px;}
.d-table .order-no p{flex:1; font-size:13px;}
.d-table .order-no p small{display:inline; font-size:12px;}

.d-table .pay-info{width:100%; font-size:13px;}
.d-table .pay-info strong{font-size:14px;}

.d-table .item-name .nameBox .option .option-name{font-size:12px;}
.d-table .td.item-name .nameBox .option .option-price{font-size:15px;}

.d-table .d-table-btns{width:100%; flex-direction:row; justify-content:flex-end; gap:4px; border-top:1px solid #e5e5e5;}
.d-table .d-table-btns .btns-normal{width:auto; min-width:64px; height:28px; font-size:12px; font-weight:500; padding:4px 8px; margin:0;}
.d-table .d-table-btns .btns-normal + .btns-normal{margin:0;}
}


/* GRID */
.search-box{display:flex; gap:4px; margin:;}
.search-box select{height:38px; display:flex; align-items:center; border:1px solid #E0E6EB; border-radius:8px; padding:4px 12px;}

.search-box .date-box{display:flex; align-items:center; border:1px solid #E0E6EB; border-radius:8px; padding:4px 12px;}
.search-box .date-box input{width:80px; border:none; text-align:center;}
.search-box .date-box span{font-size:18px; font-weight:500; margin:0 16px;}

.search-box .form-check-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:4px 12px;}
/*
.search-box .form-check .form-check-input{margin-top:0.25rem;}
*/

.search-box .entry{height:38px; display:flex; align-items:center; background:#fff; border:1px solid #E0E6EB; border-radius:8px;}
.search-box .entry input[type="text"]{flex:1; width:100%; height:100%; background:transparent; border:none; outline:none; padding:4px 12px;}
.search-box .entry input::placeholder{color:#A1A1A1;}
.search-box .entry select{flex:1; width:100%; background:transparent; border:none; outline:none; padding:4px 12px;}

.search-box .entry.input-group{}
.search-box .entry.input-group .input-group-text{height:100%; font-size:13px; border-width:0 1px 0 0; border-radius:8px 0 0 8px;}

.search-box .entry .btn-reset{display:flex;}

.search-box .entry .btn-search{width:36px; height:36px; display:flex; justify-content:center; align-items:center; padding:4px;}
.search-box .entry .btn-search img{width:18px;}
.search-box .entry .btn-search img.search-icon{display:block;}
.search-box .entry .btn-search img.search-icon-on{display:none;}
.search-box .entry .btn-search:hover img.search-icon{display:none;}
.search-box .entry .btn-search:hover img.search-icon-on{display:block;}

.search-box .entry .btn-close{width:36px; height:36px; display:flex; justify-content:center; align-items:center; padding:4px;}
.search-box .entry .btn-close img.search-close{display:none;}
.search-box .entry .btn-close img.search-close-on{display:none;}
.search-box .entry .btn-close.btn-close-view img.search-close{display:block;}
.search-box .entry .btn-close.btn-close-view img.search-close-on{display:none;}
.search-box .entry .btn-close.btn-close-view:hover img.search-close{display:none;}
.search-box .entry .btn-close.btn-close-view:hover img.search-close-on{display:block;}

.search-box strong{font-size:14px; font-weight:500; line-height:1; color:#222; padding:0 12px;}


/* Form */
.form-control{height:40px; font-size:15px; color:var(--blackColor-300); border:1px solid #DBE0E5; border-radius:8px;}
.form-control:hover{background-color:#f9f9f9;}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#eee;}
.form-control::file-selector-button{
    padding:0.875rem 0.75rem;
    margin:-0.625rem -0.75rem;
    margin-inline-end:0.75rem;
    color:var(--blackColor-500);
    background-color:#F4F7FA;
    pointer-events:none;
    border-color:inherit;
    border-style:solid;
    border-width:0; border-inline-end-width:1px; border-radius:0;
    transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-select{width:100%; height:40px; display:inline-block; font-size:14px; border:1px solid #DBE0E5; border-radius:8px; padding:4px 12px;}

.form-check-wrap{display:flex; flex-wrap:wrap; align-items:center; column-gap:24px; row-gap:14px;}
.form-check{display:flex; align-items:center; gap:6px; padding-left:18px; /*margin-right:16px;*/}
.form-check.form-check-empty{width:18px;}
.form-check input.form-check-input{min-width:18px; max-width:18px; height:18px; display:block; background:#fff; border:1px solid #ccc; border-radius:6px; appearance:none; margin-left:-18px; margin-right:0;}
.form-check input.form-check-input[type=radio]{border-radius:50px;}
.form-check input.form-check-input:checked[type="checkbox"]{background:var(--primaryColor-1000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M12.0136 4.69966C12.2739 4.4397 12.6957 4.43956 12.956 4.69966C13.2164 4.95998 13.2163 5.38264 12.956 5.64302L7.29975 11.3002C7.17485 11.425 7.0056 11.4954 6.82905 11.4956C6.6523 11.4956 6.48239 11.4252 6.35737 11.3002L3.52827 8.47114C3.26826 8.21084 3.26823 7.78904 3.52827 7.52876C3.78862 7.26841 4.21128 7.26841 4.47163 7.52876L6.82807 9.8852L12.0136 4.69966Z' fill='white'/%3E%3C/svg%3E") no-repeat center; border-color:var(--primaryColor-1000);}
.form-check input.form-check-input:checked[type="radio"]{background:var(--primaryColor-1000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Crect width='8' height='8' rx='4' fill='white'/%3E%3C/svg%3E") no-repeat center; border-color:var(--primaryColor-1000);}
.form-check span{font-size:14px; font-weight:400; line-height:1; color:var(--blackColor-300); margin:-2px 0 0;}

.form-address-wrap{width:100%; display:flex; flex-direction:column;}
.form-address-wrap .form-address-btn{display:flex; border-bottom:1px dashed #ddd; padding:0 0 18px; margin:0 0 20px;}
.form-address-wrap .form-address{width:100%; display:flex; flex-direction:column; gap:8px;}
.form-address-wrap .form-address .form-address-t{max-width:320px; display:flex; gap:8px;}
.form-address-wrap .form-address .form-address-b{width:100%; max-width:648px; display:flex; gap:8px;}
.form-address-wrap .form-address .form-address-b.form-address-b-lg input{max-width:none;}

@media (max-width:1024px){
.form-control{font-size:14px;}

.form-check span{font-size:13px;}

.form-address-wrap .form-address-btn{flex-wrap:wrap; gap:16px;}
.form-address-wrap .form-address-btn button{display:none;}
.form-address-wrap .form-address .form-address-t{max-width:none;}
.form-address-wrap .form-address .form-address-b{flex-direction:column;}
}


/* BTN */
.btn-wrap{width:100%; display:flex; justify-content:center; gap:8px; margin:40px auto 0;}
.btn-wrap.btn-wrap-center{max-width:;}

.btn{flex:1 0; max-width:220px; padding:12px 8px;}
.btn.btn-lg{font-size:18px; font-weight:500;}

.btn.btn-outline{border-radius:8px; font-size:16px; font-weight:400;}
.btn.btn-outline.btn-outline01{border:1px solid #A1A1A1; color:var(--blackColor-300);}
.btn.btn-outline.btn-outline02{border:1px solid var(--primaryColor-500); color:var(--primaryColor-1000);}
.btn.btn-outline.btn-outline03{}

.btn.btn-fill{border-radius:8px; font-size:16px; font-weight:400;}
.btn.btn-fill.btn-fill01{background:var(--blackColor-300); color:#fff;}
.btn.btn-fill.btn-fill02{background:var(--primaryColor-1000); color:#fff;}
.btn.btn-fill.btn-fill03{background:var(--primaryColor-100); border:1px solid var(--primaryColor-300); color:var(--primaryColor-1000);}


.btn-custom{display:inline-flex; align-items:center; font-size:13px; font-weight:500; line-height:1; white-space:nowrap; border-radius:8px; padding:10px 16px; transition:0.35s;}
.btn-type01{background:var(--primaryColor-100); border:1px solid var(--primaryColor-100); color:var(--primaryColor-1000);}
.btn-type01:hover, .btn-type01:focus{background:var(--primaryColor-900); color:#fff;}
.btn-type02{background:#ddd; color:var(--blackColor-500);}
.btn-type02:hover, .btn-type02:focus{background:var(--blackColor-300); color:#fff;}


.btn-box{display:flex; align-items:center; margin:0 0 16px;}
.btn-box .btn-box-l{justify-content:flex-start;}
.btn-box .btn-box-r{justify-content:flex-end;}
.btn-box ul{flex:1 0 50%; display:flex; justify-content:flex-end; gap:4px;}
.btn-box ul li{font-size:13px; line-height:1; color:var(--blackColor-300);}
/*.btn-box ul li a{font-size:13px; line-height:1; color:var(--blackColor-300);}*/
.btn-box ul li input[type="file"]{height:auto; font-size:13px; line-height:1; padding:4px 8px;}
.btn-box ul li input[type="file"]::file-selector-button{background-color:#ddd;}
.btn-box ul li strong{font-weight:500;}
.btn-box ul li button{height:100%;}


.form-btn01{width:100%; max-width:124px; display:inline-flex; justify-content:center; align-items:center; font-size:14px; font-weight:500; color:var(--blackColor-300); border:1px solid #888; border-radius:8px;}
.form-btn01:hover{border:1px solid var(--blackColor-300);}
.form-btn01.form-btn-sm{max-width:80px;}


@media (max-width:768px) {
.btn-wrap{flex-direction:column;}

.btn{max-width:none;}

.btn-custom{font-size:12px; padding:8px 12px;}


.btn-box{margin:0 0 8px;}


.form-btn01{max-width:104px; font-size:13px;}
}


/* PRODUCT LIST */
.product-list > ul{display:flex; flex-wrap:wrap; margin:-10px -10px 0;}
.product-list > ul > li{flex:20%; max-width:20%; padding:10px 10px;}
.product-list a{}
.product-list a .img-area{width:100%; aspect-ratio:1 / 1; border:1px solid #e5e5e5; border-radius:6px; position:relative; overflow:hidden;}
/* .product-list a .img-area:before{content:""; width:100%; height:100%; display:block; background:rgba(0,0,0,0.05); position:absolute; z-index:1;} */
.product-list a .img-area > img{width:100%; height:100%; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); object-fit:cover; transition:0.5s ease;}
.product-list a:hover .img-area > img{transform:translate(-50%, -50%) scale(1.1);}

.product-list a .desc-area{display:flex; flex-direction:column; gap:12px; padding:16px;}
.product-list a .desc-area dt{display:flex; flex-direction:column; gap:8px;}
.product-list a .desc-area dt .item-company{font-size:14px; font-weight:400; line-height:1; color:var(--blackColor-900);}
.product-list a .desc-area dt .item-name{height:2.7rem; font-size:16px; font-weight:400; line-height:1.35; color:var(--blackColor-300); word-wrap:break-word; text-overflow:ellipsis;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.product-list a .desc-area dd{display:flex; flex-direction:column; gap:12px;}
.product-list a .desc-area dd .item-price{font-size:22px; font-weight:700; line-height:1; color:var(--blackColor-300);}
.product-list a .desc-area dd .item-certify{}
.product-list a .desc-area dd .item-certify ul{display:flex; flex-wrap:wrap; gap:4px;}
.product-list a .desc-area dd .item-certify ul li{width:24px; height:24px;}
.product-list a .desc-area dd .item-certify ul li img{width:100%;}
.product-list a .desc-area dd .item-certify ul li em{width:100%; height:100%; background-size:cover;}
@media (max-width:1024px){
.product-list > ul > li{flex:33.33%; max-width:33.33%;}

.product-list a .desc-area dt .item-company{font-size:13px;}
.product-list a .desc-area dt .item-name{font-size:15px;}
.product-list a .desc-area dd .item-price{font-size:20px;}
}
@media (max-width:768px) {
.product-list > ul > li{flex:50%; max-width:50%; padding:8px 8px;}

.product-list a .desc-area{gap:8px; padding:12px 12px;}
.product-list a .desc-area dt .item-company{font-size:12px;}
.product-list a .desc-area dt .item-name{font-size:14px;}
.product-list a .desc-area dd{gap:8px;}
.product-list a .desc-area dd .item-price{font-size:16px;}
.product-list a .desc-area dd .item-certify ul li{width:20px; height:20px;}
}


/* 상품상세페이지 */
.m-buy-wrap{width:100%; display:none; background:#fff; border:none; box-shadow:0 0 16px rgba(0, 0, 0, 0.1); position:fixed; left:0; bottom:0; margin:0; z-index:1100;}
.m-buy-wrap .m-buy-area{z-index:1110;}
.m-buy-wrap .m-buy-area .m-buy-area-item{display:flex; flex-direction:column; gap:12px; padding:0 12px;}
.m-buy-wrap .m-buy-area .m-buy-area-item .m-buy-area-option{display:flex; flex-direction:column; gap:4px;}
.m-buy-wrap .m-buy-area .m-buy-area-item .m-buy-area-option h3{font-size:14px; color:var(--blackColor-300);}
.m-buy-wrap .m-buy-area .m-buy-area-item .m-buy-area-option select{}

.m-buy-wrap .m-buy-area .m-buy-area-item .selectArea{background:#f3f3f3; padding:12px;}
.m-buy-wrap .m-buy-area .m-buy-area-item .selectArea .selectArea-t p{font-size:15px;}
.m-buy-wrap .m-buy-area .m-buy-area-item .selectArea .selectArea-b strong{font-size:14px;}

.m-buy-wrap .m-buy-btn{display:flex; gap:4px; padding:12px;}

.m-buy-wrap .m-buy-btn button{flex:1 0; border-radius:8px; font-size:14px; font-weight:500; padding:12px 12px;}
.m-buy-wrap .m-buy-btn button.buy-btn-type02{flex:0 auto; border:1px solid var(--primaryColor-1000); color:var(--primaryColor-1000);}
.m-buy-wrap .m-buy-btn button.buy-btn-type01{flex:1; background:var(--primaryColor-1000); color:#fff;}
.m-buy-wrap .m-buy-area .m-buy-btn button.buy-btn-type02{flex:1 auto;}
.m-buy-wrap .m-buy-area .m-buy-btn button.buy-btn-type01{flex:1 auto;}

@media (max-width:1024px) {
.m-buy-wrap{display:block;}
}


/* JOIN */
.input-cont-wrap{display:flex; flex-direction:column; gap:16px;}
.input-cont-wrap + .input-cont-wrap{border-top:1px solid #ccc; padding:40px 0 0; margin:40px 0 0;}
.join-agree-title{font-size:18px; font-weight:500; line-height:1; color:var(--blackColor-100);}

.agree-box-wrap{display:flex; flex-direction:column; background:#f7f7f7; border:1px solid #eee; border-radius:8px; padding:24px;}
.agree-box{display:flex; flex-direction:column; gap:8px;}
.agree-box + .agree-box{border-top:1px solid #e5e5e5; padding:28px 0 0; margin:28px 0 0;}
.agree-box h5{font-size:14px; font-weight:500; line-height:1; color:var(--blackColor-300);}
.agree-box .agree-cont{height:108px; background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:16px;}
.agree-box .agree-cont .agree-view{width:100%; height:100%; font-size:14px; line-height:1.5; color:#777; overflow-y:auto;}
.agree-box .agree-cont .agree-view::-webkit-scrollbar{width:4px;}
.agree-box .agree-cont .agree-view::-webkit-scrollbar-track{background-color:; margin:0;}
.agree-box .agree-cont .agree-view::-webkit-scrollbar-thumb{background-color:#ccc; border-radius:20px;}
.agree-box .agree-cont .agree-view .policy-wrap{}

.agree-box ul{display:flex; flex-direction:column; gap:12px;}
.agree-box ul li{}
.agree-box ul li label{align-items:flex-start;}
.agree-box ul li label p{font-size:14px; font-weight:400; line-height:1.3; color:var(--blackColor-300); letter-spacing:-0.05rem; margin:-1px 0 0;}
.agree-box ul li label:hover p{font-weight:500;}


.input-cont{display:flex; flex-direction:column; gap:40px;}
.input-cont dl{display:flex; flex-direction:column; gap:8px;}
.input-cont dl dt{display:flex; font-size:16px; font-weight:400; line-height:1; color:#333;}
.input-cont dl dt.must{}
.input-cont dl dt.must:after{content:"*"; display:inline; font-size:16px; line-height:1; color:red;}
.input-cont dl dt .required{display:inline-block; color:#de0000;}
.input-cont dl dd{flex:1; display:flex; flex-direction:column; align-items:; gap:8px;}
.input-cont dl dd > label{flex:1; display:flex; gap:8px;}
.input-cont dl dd > label .input-title{min-width:76px; max-width:76px; display:inline-flex; gap:6px; align-items:center; font-size:13px; line-height:1; color:var(--blackColor-500);}
.input-cont dl dd input:not([type="checkbox"]):not([type="radio"]),
.input-cont dl dd textarea,
.input-cont dl dd select{width:100%; height:52px; display:flex; align-items:center; gap:4px; font-size:15px; color:var(--blackColor-300); background:; border:1px solid #ddd; border-radius:8px; outline:none; padding:6px 12px; transition:border-color 0.2s;}
.input-cont dl dd input[type="file"]{height:auto!important;}
.input-cont dl dd input::-webkit-outer-spin-button,
.input-cont dl dd input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.input-cont dl dd input::placeholder{font-size:15px; color:#a1a1a1;}
.input-cont dl dd textarea{min-height:100px;}
.input-cont dl dd:focus-within input,
.input-cont dl dd:focus-within select{box-shadow: 0 0 0 0.25rem var(--primaryColor-100);}

.input-cont dl dd .form-wrap{display:flex; align-items:center; gap:8px;}
.input-cont dl dd .form-wrap > *{flex:1 auto;}
.input-cont dl dd .tip{font-size:12px; line-height:1.35; color:var(--blackColor-500);}
/*
.input-cont dl dd > label button{flex:0 162px; min-width:162px; font-size:15px; font-weight:500; color:var(--blackColor-300);}
*/
.input-cont dl dd.error{flex-direction:column;}

.input-cont dl.error dd{border:1px solid red;}
.input-cont dl.error .error-message{font-size:12px; color:red; margin:2px 0 0;}

@media (max-width:1024px) {
.input-cont dl dd input:not([type="checkbox"]):not([type="radio"]),
.input-cont dl dd textarea,
.input-cont dl dd select{font-size:14px;}
}
@media (max-width:768px) {
.input-cont-wrap + .input-cont-wrap{padding:32px 0 0; margin:32px 0 0;}
.join-agree-title{font-size:16px;}

.agree-box-wrap{padding:16px;}
.agree-box + .agree-box{padding:24px 0 0; margin:24px 0 0;}
.agree-box .agree-cont{padding:12px;}
.agree-box .agree-cont .agree-view{font-size:12px; line-height:1.35;}

.agree-box ul li label{align-items:center;}
.agree-box ul li label p{font-size:13px;}

.input-cont dl dt{font-size:14px;}
.input-cont dl dd input:not([type="checkbox"]):not([type="radio"]),
.input-cont dl dd textarea,
.input-cont dl dd select{height:42px; font-size:13px;}
.input-cont dl dd input::placeholder{font-size:13px;}
}


/* CONTENTS */
main section{padding:60px 0; margin:auto;}
main section:first-of-type{}
main section + section{}

.contents-wrap{display:flex; flex-direction:column;}

.contentsTitle{display:flex; align-items:baseline;}
.contentsTitle h3{flex:1; font-size:30px; font-weight:700; line-height:1; color:var(--blackColor-100); margin:0 0 32px;}
.contentsTitle h3 strong{color:var(--primaryColor-1000);}
.contentsTitle h4{flex:1; font-size:20px; font-weight:500; line-height:1; color:var(--blackColor-100); margin:0 0 12px;}
.contentsTitle h4 strong{color:var(--primaryColor-1000);}
.contentsTitle a{display:flex; align-items:center; gap:8px;}
.contentsTitle a p{font-size:16px; font-weight:400; line-height:1; color:var(--blackColor-500);}
.contentsTitle a:hover p{color:var(--primaryColor-1000);}
.contentsTitle a img{}

@media (max-width:1024px) {
main section{padding:40px 0;}

.contentsTitle h3{font-size:28px; margin:0 0 24px;}
.contentsTitle h4{font-size:18px; margin:0 0 8px;}
.contentsTitle a{gap:6px;}
.contentsTitle a p{font-size:14px;}
.contentsTitle a img{width:21px;}
}

@media (max-width:768px) {
.contentsTitle h3{font-size:24px;}
.contentsTitle a{gap:4px;}
.contentsTitle a p{font-size:12px;}
.contentsTitle a img{width:19px;}
}


/* CONTENTS - 공공기관 우선구매 */
.certify-list{}
.certify-list ul{display:flex; justify-content:space-between;}
.certify-list ul li{flex:1 0; max-width:98px;}
.certify-list ul li a{display:flex; flex-direction:column; gap:6px;}
.certify-list ul li a .certify-img{width:98px; height:98px; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #ddd; border-radius:100px; padding:32px 16px; overflow:hidden;}
.certify-list ul li a .certify-img img{height:100%;}
.certify-list ul li a p{flex:1; font-size:14px; font-weight:400; line-height:1.25; color:var(--blackColor-300); text-align:center;}
.certify-list ul li a:hover p{font-weight:500; color:var(--primaryColor-1000)}
@media (max-width:1024px) {
.certify-list ul{justify-content:flex-start; flex-wrap:wrap; gap:24px;}
.certify-list ul li{max-width:110px;}
.certify-list ul li a .certify-img{width:110px; height:110px;}
.certify-list ul li a .certify-img img{max-height:32px;}
}
@media (max-width:768px) {
.certify-list ul{gap:16px;}
.certify-list ul li{flex:1 0 25%; max-width:calc((100% - (16px * 3)) / 4);}
.certify-list ul li a .certify-img{width:100%; height:100%; position:relative; padding:100% 0 0;}
.certify-list ul li a .certify-img img{height:100%; max-height:32px; display:block; position:absolute; top:50%; transform:translate(0, -50%);}
}
@media (max-width:420px) {
.certify-list ul li{flex:1 0 33.33%; max-width:calc((100% - (16px * 2)) / 3);}
}



/* CONTENTS - 공익장터 추천상품 */
.recommend-list{width:100%; display:flex; flex-direction:column; gap:40px; overflow:visible;}
.recommend-list .swiper-slide{/*flex:0 0 calc((100% - (20px * 4)) / 5); max-width:calc((100% - (20px * 4)) / 5);*/}
.recommend-list .swiper-scrollbar{height:1px!important; background:#D8D8D8!important; position:relative!important;}
.recommend-list .swiper-scrollbar .swiper-scrollbar-drag{background:#000;}
@media (max-width:1024px) {
.recommend-list .swiper-slide{}
}


/* CONTENTS - 배너 */
.banner-controls{}
.banner-controls .swiper-button-prev,
.banner-controls .swiper-button-next{width:40px; height:40px; background:rgba(255, 255, 255, 0.35); backdrop-filter:blur(4px); border:1px solid rgba(0,0,0,0.05); border-radius:50px; top:auto; bottom:50px;}
.banner-controls .swiper-button-prev{left:-20px;}
.banner-controls .swiper-button-next{right:-20px;}
.banner-controls .swiper-button-prev:after,
.banner-controls .swiper-button-next:after{width:7px; height:12px; font-size:0; position:relative; top:1px;}
.banner-controls .swiper-button-prev:after{content:url("/img/swiperArrow-l.svg");}
.banner-controls .swiper-button-next:after{content:url("/img/swiperArrow-r.svg"); left:2px;}

/* CONTENTS - 배너01 */
.groupBanner-wrap{position:relative;}
.groupBanner{width:100%;}
.groupBanner .swiper-slide{}
.groupBanner .swiper-slide a{display:block; border-radius:8px; overflow:hidden;}
.groupBanner .swiper-slide a img{width:100%; display:block;}

.groupBanner-wrap .banner-controls .swiper-button-prev,
.groupBanner-wrap .banner-controls .swiper-button-next{top:50%; bottom:inherit; margin-top:inherit; transform:translate(0, -50%);}

@media (max-width:1024px) {
.banner-wrap ul li{flex:0 0 calc((100% - (20px * 1)) / 2);}
}

/* CONTENTS - 배너02 */
.bigBanner-wrap{position:relative;}
.bigBanner-wrap .swiper-slide{}
.bigBanner-wrap .swiper-slide a{display:block; border-radius:8px; overflow:hidden;}
.bigBanner-wrap .swiper-slide a img{width:100%; display:block;}

.bigBanner-wrap .banner-controls .swiper-button-prev,
.bigBanner-wrap .banner-controls .swiper-button-next{top:auto; bottom:50px;}

@media (max-width:1024px) {
.bigBanner-wrap .banner-controls .swiper-button-prev,
.bigBanner-wrap .banner-controls .swiper-button-next{bottom:24%;}
}


/* CONTENTS - 공익장터 BEST상품 */
.best-list{display:flex; gap:20px;}
.best-list .best-list-bestItem{flex:0 0 714px;}
.product-list.best-list .best-list-bestItem a .desc-area .item-name{font-size:22px;}
.product-list.best-list .best-list-bestItem a .desc-area .item-price{font-size:28px;}
.product-list.best-list .best-list-bestItem a .desc-area .item-certify ul li{width:32px; height:32px;}
.product-list.best-list > ul{}
.product-list.best-list > ul > li{flex:50%; max-width:50%;}
.best-list .bestItem-num{width:68px; height:68px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:; background:#FFF5EA; border-radius:120px; position:absolute; top:14px; left:14px; z-index:1;}
.best-list .bestItem-num span{font-size:13px; font-weight:500; line-height:1; color:var(--primaryColor-1000);}
.best-list .bestItem-num h4{font-size:28px; font-weight:500; line-height:1; color:var(--primaryColor-1000);}
.best-list .best-list-bestItem .bestItem-num{width:118px; height:118px; gap:; background:var(--primaryColor-1000); top:28px; left:28px;}
.best-list .best-list-bestItem .bestItem-num span{font-size:20px; color:var(--whiteColor);}
.best-list .best-list-bestItem .bestItem-num h4{font-size:48px; color:var(--whiteColor);}

@media (max-width:1024px) {
.best-list{flex-direction:column;}
.best-list .best-list-bestItem{flex:1;}
.product-list.best-list .best-list-bestItem a .desc-area .item-name{font-size:20px;}
.product-list.best-list .best-list-bestItem a .desc-area .item-price{font-size:24px;}
.best-list .bestItem-num{top:16px; left:16px;}
.best-list .best-list-bestItem .bestItem-num{width:98px; height:98px; top:16px; left:16px;}
.best-list .best-list-bestItem .bestItem-num span{font-size:18px;}
.best-list .best-list-bestItem .bestItem-num h4{font-size:40px;}
}

@media (max-width:768px) {
.product-list.best-list .best-list-bestItem a .desc-area .item-name{font-size:18px;}
.product-list.best-list .best-list-bestItem a .desc-area .item-price{font-size:22px;}
}


/* CONTENTS - 카테고리별 인기상품 */
.categoryBest-list{display:flex; flex-direction:column; gap:32px;}

.categoryBest-tab{display:flex; flex-direction:column; align-items:center;}
.categoryBest-tab-parent{width:100%; display:flex; gap:; position:relative; overflow-x:auto; -ms-overflow-style:none;}
.categoryBest-tab-parent::-webkit-scrollbar{display:none;}
.categoryBest-tab-parent li{}
.categoryBest-tab-parent li a{display:flex; justify-content:center; align-items:center; font-size:16px; line-height:1; color:var(--blackColor-500); white-space:nowrap; padding:0 12px 16px; position:relative;}
.categoryBest-tab-parent li a:hover{color:var(--blackColor-200);}
.categoryBest-tab-parent li.on a{font-weight:700; color:var(--blackColor-200);}
.categoryBest-tab-parent li.on a:after{content:""; width:100%; height:1px; display:block; background:var(--blackColor-200); position:absolute; bottom:0; z-index:1;}
.categoryBest-tab-child{width:100%; margin:14px 0 0;}
.categoryBest-tab-child li{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.categoryBest-tab-child li a{display:flex; justify-content:center; align-items:center; font-size:13px; line-height:1; color:var(--blackColor-500); white-space:nowrap; border:1px solid #ddd; border-radius:50px; padding:7px 11px;}
.categoryBest-tab-child li a:hover,
.categoryBest-tab-child li a.on{color:#fff; background:var(--primaryColor-1000); border:1px solid var(--primaryColor-1000);}
.categoryBest-tab hr{width:100vw; border:1px solid #ddd; border-width:1px 0 0; margin:0; opacity:1;}

@media (max-width:1024px) {
.categoryBest-tab-parent{width:100vw;}
.categoryBest-tab-parent li a{font-size:15px; padding:0 12px 14px;}
.categoryBest-tab-child{margin:12px 0 0;}
.categoryBest-tab-child li{gap:6px; row-gap:4px;}
.categoryBest-tab-child li a{font-size:12px; padding:5px 10px;}
}

@media (max-width:768px) {
.categoryBest-tab-parent li a{font-size:14px; padding:0 10px 12px;}
.categoryBest-tab-child{margin:10px 0 0;}
}


/* CONTENTS - 브랜드스토리 */
.story-list{width:100%; display:flex; flex-direction:column; gap:40px;}
.story-list .swiper-slide{}
.story-list .swiper-slide a{height:320px; display:block; border-radius:8px; overflow:hidden;}
.story-list .swiper-slide a .story-info{width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 90% 100% ); padding:20px;}
.story-list .swiper-slide a .story-info img{width:32px; display:block; border-radius:50px;}
.story-list .swiper-slide a .story-info p{font-size:16px; line-height:1; color:#fff;}

.story-list .swiper-scrollbar{height:1px!important; background:#D8D8D8!important; position:relative!important;}
.story-list .swiper-scrollbar{height:1px!important; background:#D8D8D8!important; position:relative!important;}
.story-list .swiper-scrollbar .swiper-scrollbar-drag{background:#000;}

@media (max-width:1024px) {
.story-list .swiper-slide{padding-top:75%;}
.story-list .swiper-slide a{width:100%; height:100%; position:absolute; top:0; left:0;}
}

@media (max-width:1024px) {
.story-list .swiper-slide a .story-info{padding:16px;}
.story-list .swiper-slide a .story-info p{font-size:14px;}
}


/* CONTENTS - 멤버 */
.member-list{width:100%;}
.member-list.swiper .swiper-wrapper{-webkit-transition-timing-function:linear; transition-timing-function:linear}
.member-list.swiper .swiper-slide{flex:1 0 308px;}
.member-list.swiper .swiper-slide .member-item{width:100%; height:72px; display:flex; align-items:center; gap:24px; background:#f7f7f7; border:1px solid #eee; border-radius:8px; padding:8px 24px;}
.member-list.swiper .swiper-slide .member-item p{flex:1; font-size:14px; line-height:1.25; color:var(--blackColor-300);}
.member-list.swiper .swiper-slide .member-item img{width:100%; max-width:120px;}

@media (max-width:1024px) {
.member-list.swiper .swiper-slide{flex:1 0 240px;}
.member-list.swiper .swiper-slide .member-item{height:62px; padding:6px 16px;}
.member-list.swiper .swiper-slide .member-item p{font-size:13px;}
.member-list.swiper .swiper-slide .member-item img{max-width:100px;}
}


/* 장바구니 / 주문 */
.order-box{width:calc(100% + 32px); display:flex; flex-direction:column; border-top:8px solid #f3f3f3; position:relative; left:-16px; padding:16px;}
.order-box .order-box-total{border-bottom:1px solid #e5e5e5; padding:12px 0;}
.order-box .order-box-total dl{display:flex; align-items:baseline;}
.order-box .order-box-total dl dt{flex:1; font-size:18px; font-weight:700; color:var(--blackColor-200);}
.order-box .order-box-total dl dd{font-size:20px; font-weight:700; color:var(--blackColor-200);}
.order-box .order-box-list{display:flex; flex-direction:column; gap:8px;}
.order-box .order-box-list dl{display:flex;}
.order-box .order-box-list dl dt{flex:1; font-size:13px; font-weight:400; color:var(--blackColor-500);}
.order-box .order-box-list dl dd{font-size:13px; font-weight:400; color:var(--blackColor-500);}


.order-info{border-top:1px solid var(--blackColor-200); border-bottom:1px solid #ddd;}
.order-info dl{display:flex;}
.order-info dl + dl{border-top:1px solid #eee;}
.order-info dl dt,
.order-info dl dd{padding:20px;}
.order-info dl dt{flex:0 240px;}
.order-info dl dt.order-address-title{display:;}
.order-info dl dt.order-address-title p{flex:;}
.order-info dl dt.order-address-title button{display:none;}
.order-info dl dd{flex:1; display:flex;}

.order-info dl dd input[type="text"],
.order-info dl dd input[type="password"],
.order-info dl dd input[type="num"]{width:100%; max-width:320px;}
.order-info dl dd select{width:100%;}

.order-info dl dd textarea{width:100%; min-height:100px; display:flex; align-items:center; gap:4px; font-size:14px; color:var(--blackColor-300); background:; border:1px solid #ddd; border-radius:8px; outline:none; padding:6px 12px; transition:border-color 0.2s;}

.order-info dl dd .form-wrap{width:100%; max-width:320px; display:flex; align-items:center; gap:8px;}
.order-info dl dd .form-wrap > span{font-size:12px; color:var(--blackColor-500);}

.order-info dl dd .totalPrice-wrap{display:flex; align-items:baseline;}
.order-info dl dd .totalPrice-wrap .totalPrice{display:flex; align-items:center; gap:8px;}
.order-info dl dd .totalPrice-wrap .totalPrice p{display:flex; align-items:baseline; font-size:16px; line-height:1; color:var(--blackColor-300);}
.order-info dl dd .totalPrice-wrap .totalPrice p small{font-size:12px; color:var(--blackColor-500);}
.order-info dl dd .totalPrice-wrap .totalPrice .totalPrice-calc{display:flex;}
.order-info dl dd .totalPrice-wrap .totalPrice .totalPrice-calc:before{display:block; font-size:14px; line-height:1; color:var(--blackColor-300); margin:0 8px 0 0;}
.order-info dl dd .totalPrice-wrap .totalPrice .totalPrice-plus:before{content:"+";}
.order-info dl dd .totalPrice-wrap .totalPrice .totalPrice-minus:before{content:"-";}
.order-info dl dd .totalPrice-wrap strong{font-size:20px; font-weight:500; line-height:1; color:var(--primaryColor-1000)}

.order-info dl dd .orderWay{display:flex; flex-direction:column; gap:16px;}
.order-info dl dd .orderWay li{display:flex; gap:12px;}
.order-info dl dd .orderWay li strong{font-size:14px; font-weight:500; line-height:1; color:var(--blackColor-300);}
.order-info dl dd .orderWay li label{margin:0;}

@media (max-width:1024px){
.order-info{padding:24px 0;}
.order-info dl{flex-direction:column; gap:8px;}
.order-info dl + dl{padding:24px 0 0; margin:24px 0 0;}
.order-info dl dt,
.order-info dl dd{padding:0;}
.order-info dl dt{flex:0; font-size:14px;}
.order-info dl dt.order-address-title{display:flex; align-items:baseline;}
.order-info dl dt.order-address-title p{flex:1;}
.order-info dl dt.order-address-title button{display:block;}

.order-info dl dd input[type="text"],
.order-info dl dd input[type="password"],
.order-info dl dd input[type="num"]{max-width:none;}

.order-info dl dd .form-wrap{max-width:none;}

.order-info dl dd .orderWay{gap:8px;}
.order-info dl dd .orderWay li{flex-direction:column; flex-wrap:wrap; border:1px solid #e5e5e5; border-radius:8px; padding:12px 16px;}
.order-info dl dd .orderWay li strong{}
}


/* 마이페이지 회원정보 */
.inner-460{width:100%; max-width:460px; margin:0 auto;}
@media (max-width:1024px) {
.inner-460{margin:0 auto;}
}


/* FAQ */
table.board_faq{width:100%; border-top:1px solid var(--primaryColor-1000);}
table.board_faq td{vertical-align:middle; border-bottom:1px solid #ddd; padding:12px 8px 12px 24px;}
/*table.board_faq img{vertical-align:middle; margin-right:5px;}*/
table.board_faq .subject{}
table.board_faq .subject .faq_Qbox{display:flex;}
table.board_faq .subject .faq_Qbox .faq_q{width:28px; font-size:16px; font-weight:700; color:var(--primaryColor-1000);}
table.board_faq .subject .faq_Qbox a{flex:1 0; display:block; font-size:16px; color:var(--blackColor-300);}

table.board_faq .answer{background:#f8f8f8; padding:12px 8px 12px 24px;}
table.board_faq .answer .faq_Abox{display:flex;}
table.board_faq .answer .faq_Abox .faq_a{width:28px; font-size:16px; font-weight:700; color:#888;}
table.board_faq .answer .faq_Abox .faq_a_cont{flex:1 0; color:var(--blackColor-300);}
table.board_faq .answer .faq_Abox .faq_a_cont span{}

@media(max-width:768px) {
	table.board_faq {border-width:2px 0 0 0 !important;}
	/* table.board_faq .subject, table.board_faq .subject.down {background-position: right 10px top 18px;} */
	table.board_faq .subject .faq_Qbox a, table.board_faq .answer .faq_Abox .faq_a_cont {padding-right: 15%;}
	table.board_faq .subject .faq_Qbox a, table.board_faq .subject .faq_Qbox a.down {background-position: right 20px top 12px;}
	table.board_faq .subject, table.board_faq  td.answer {padding-left:20px !important;}
	table.board_faq .subject {border-width:0 0 1px 0 !important;}
	table.board_faq  td.answer {border:none !important;}
	table.board_faq .subject .faq_Qbox .faq_q, table.board_faq .answer .faq_Abox .faq_a {width:10%; font-size:18px;}
	table.board_faq .subject .faq_Qbox a, table.board_faq .answer .faq_Abox .faq_a_cont {width:90%;}
}


/* COUNT */
.item-count{position:relative; display:inline-block; background:#fff; border:1px solid #e5e5e5; border-radius:8px; text-align:center; padding:0 36px;}
.item-count .input-num{width:48px; height:34px; font-size:14px; color:var(--blackColor-300); text-align:center; vertical-align:middle;
appearance:none; background:transparent; border:1px solid #e5e5e5; border-width:0 1px; outline:none;}
.item-count .input-num::-webkit-outer-spin-button,
.item-count .input-num::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.item-count [class*="btn-"]{position:absolute; top:0; width:36px; height:100%; font-size:0; vertical-align:middle;}
.item-count [class*="btn-"]:before,
.item-count [class*="btn-"]:after{content:""; width:1px; height:1px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#888;}
.item-count .btn-minus{left:0;}
.item-count .btn-minus:after{width:9px;}
.item-count .btn-minus:before{display:none;}
.item-count .btn-plus{right:0;}
.item-count .btn-plus:after{width:9px;}
.item-count .btn-plus:before{height:9px;}
@media (max-width:1024px) {
.item-count{border-radius:6px; padding:0 34px;}
.item-count .input-num{width:54px; height:30px; font-size:13px;}
.item-count [class*="btn-"]{width:34px;}
.item-count .btn-minus:after{width:8px;}
.item-count .btn-plus:after{width:8px;}
.item-count .btn-plus:before{height:8px;}
}