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

.inner-container{width:100%; max-width:1624px; padding:0 16px; margin:0 auto;}

main{padding:0 0 120px;}

.display-pc{display:block;}
.display-m{display:none;}
@media (max-width:1440px) {
.wrap{min-width:auto;}
}
@media (max-width:767px) {
.inner-container{padding:0 16px;}

main{padding:0 0 60px;}

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


.form-check{display:flex; align-items:center; padding-left:1.5rem;}
.form-check input.form-check-input{width:18px; height:18px; display:block; background:#fff; border:1px solid #ccc; border-radius:6px; appearance:none; margin-left:-1.5rem;}
.form-check input.form-check-input:checked{background:#276EF1 url(/assets/manage/img/check-icon.svg)no-repeat center; border-color:#276EF1;}

.form-sel{position:relative;}
.form-sel select{display:flex; align-items:center; font-size:12px; font-weight:400; color:#555; background:none; border:none; outline:none; padding:; appearance:none;}
.form-sel i{font-size:10px; color:#333; position:absolute; right:6px; top:50%; transform:translateY(-50%); pointer-events:none;}


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


/* BTN */
.btn-wrap{display:flex; gap:20px; margin:80px auto 0;}
.btn-wrap.btn-wrap-center{width:100%; max-width:420px;}

.btn{flex:1 1 220px; padding:14px 8px;}
.btn-lg{font-size:18px!important; font-weight:500!important;}

.btn.btn-outline{font-size:16px; font-weight:400;}
.btn.btn-outline.btn-outline01{border:1px solid #A1A1A1; border-radius:8px; color:#333;}
.btn.btn-outline.btn-outline02{}
.btn.btn-outline.btn-outline03{}

.btn.btn-fill{font-size:16px; font-weight:400;}
.btn.btn-fill.btn-fill01{background:#333; border-radius:8px; color:#fff;}
.btn.btn-fill.btn-fill02{background:#276EF1; border-radius:8px; color:#fff;}
.btn.btn-fill.btn-fill03{background:rgba(39, 110, 241, 0.1); color:#276EF1;}


.btn-allView{display:flex; align-items:center;}
.btn-allView p{font-size:13px; color:#888;}
.btn-allView img{margin:0 0 0 6px;}
.btn-allView img.allView-icon-on{display:none;}
.btn-allView:hover p{color:#276EF1;}
.btn-allView:hover img.allView-icon{display:none;}
.btn-allView:hover img.allView-icon-on{display:block;}

.btn-custom{display:inline-flex; align-items:center; font-size:13px; font-weight:500; line-height:1; white-space:nowrap; border-radius:8px; padding:9px 22px;}
.btn-type01{background:rgba(39,110,241,0.1); color:#276EF1;}
.btn-type01:hover, .btn-type01:focus{background:rgba(39,110,241,0.9); color:#fff;}
.btn-type02{background:#ddd; color:#555;}
.btn-type02:hover, .btn-type02:focus{background:#555; color:#fff;}


.btn-lg-type{min-width:134px; height:44px; display:inline-flex; justify-content:center; align-items:center; font-size:14px; font-weight:500; line-height:1; border:none; border-radius:8px; padding:9px 22px;}
.btn-lg-type01{background:#276EF1; color:#fff;}
.btn-lg-type02{background:#ddd; color:#555;}

.btn-status{background:#fff; border:1px solid #ddd; border-radius:8px; font-size:12px; font-weight:400; line-height:1; color:#555; padding:4px 8px;}
.btn-status01{}
.btn-status02{}
.btn-status03{}
.btn-status01.on{background:#DBF6E9; border:1px solid #DBF6E9; color:#10C469;}
.btn-status02.on{background:#E6E9F5; border:1px solid #E6E9F5; color:#5B69BC;}
.btn-status03.on{background:#FFE6E6; border:1px solid #FFE6E6; color:#FF5B5B;}

.btn-tool{display:inline-flex; align-items:center; font-size:12px; font-weight:400; line-height:1; border-radius:8px; padding:4px 8px;}
.btn-tool01{background:rgba(39,110,241,0.1); color:#276EF1;}
.btn-tool02{background:#ddd; color:#555;}


.btn-box{margin:0 0 16px;}
.btn-box .btn-box-l{float:left;}
.btn-box .btn-box-r{float:right;}
.btn-box ul{display:flex; justify-content:flex-end; gap:4px;}
.btn-box ul li{}
.btn-box ul li a{}



/* HEADER */
header{border-bottom:1px solid #eee;}
header .header-m{display:none;}

header .top-bar-wrap{height:34px; display:flex; align-items:center; background:#F4F4F4;}
header .top-bar{display:grid; grid-template-columns:1fr 1fr;}
header .top-bar .top-bar-setting{}
header .top-bar .top-bar-setting ul{display:flex; align-items:center; gap:32px;}
header .top-bar .top-bar-setting ul li{}
header .top-bar .top-bar-setting ul li select{min-width:64px; height:auto; padding:4px 8px;}
header .top-bar .top-bar-setting ul li a{display:flex; align-self:center; gap:4px;}
header .top-bar .top-bar-setting ul li a p{font-size:12px; font-weight:400; line-height:1; color:#555;}
header .top-bar .top-bar-setting ul li a:hover p{color:#276EF1;}
header .top-bar .top-bar-setting ul li a img{display:block;}
header .top-bar .top-bar-setting ul li a.lang-btn .lang-icon-on{display:none;}
header .top-bar .top-bar-setting ul li a.lang-btn:hover .lang-icon{display:none;}
header .top-bar .top-bar-setting ul li a.lang-btn:hover .lang-icon-on{display:block;}

header .top-bar .top-bar-user{display:flex; justify-content:flex-end;}
header .top-bar .top-bar-user ul{display:flex;}
header .top-bar .top-bar-user ul li{display:flex; align-items:center;}
header .top-bar .top-bar-user ul li + li{}
header .top-bar .top-bar-user ul li + li:before{content:""; display:block; width:1px; height:12px; background:#d9d9d9; margin:0 20px;}
header .top-bar .top-bar-user ul li a{display:flex; align-self:center;}
header .top-bar .top-bar-user ul li a p{font-size:12px; font-weight:400; line-height:1; color:#555;}
header .top-bar .top-bar-user ul li a:hover p{color:#276EF1;}


header .top-nav-wrap{background:#fff;}
header .top-nav-wrap .top-nav{display:flex;}
header .top-nav-wrap .top-nav .top-nav-menu{flex:1; display:flex; align-items:center; gap:34px;}
header .top-nav-wrap .top-nav .top-nav-menu .top-logo{}
header .top-nav-wrap .top-nav .top-nav-menu .top-logo a{display:block;}
header .top-nav-wrap .top-nav .top-nav-menu .top-logo a img{height:32px; display:block;}
header .top-nav-wrap .top-nav .top-nav-menu ul{display:flex; gap:;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li{position:relative;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li a{display:block; font-size:16px; font-weight:400; line-height:1; color:#333; padding:29px 30px;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li a:hover{font-weight:500; color:#276EF1;}

header .top-nav-wrap .top-nav .top-nav-menu ul > li.on > .category-area{display:flex;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area{width:740px; min-height:340px; max-height:560px; display:none; background:#fff; border:1px solid #eee; border-radius:0 0 8px 8px; box-shadow:0 8px 16px 0 rgba(27, 46, 94, 0.15); position:absolute; top:100%; left:0; z-index:10;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul{flex:1; display:flex; flex-direction:column; overflow-y:auto;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul + ul{border-left:1px solid #eee;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul li{}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul li + li{}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul li a{display:flex; font-size:14px; line-height:1; color:#222; padding:14px 20px;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul.category-1depth li a:hover,
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul.category-1depth li.on a{background:rgba(39, 110, 241, 0.1); color:#276EF1;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul:not(.category-1depth) li a:hover,
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul:not(.category-1depth) li.on a{color:#276EF1;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul li a p{flex-grow:1;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul li a i{font-size:12px;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li .category-area ul:last-of-type li a i{display:none;}

header .top-nav-wrap .top-nav .top-nav-tool{display:flex; justify-content:flex-end; align-items:center; gap:48px;}
header .top-nav-wrap .top-nav .top-nav-tool .top-search{display:flex; align-items:center; border:1px solid #e5e5e5; border-radius:50px; padding:0 6px; overflow:hidden;}
header .top-nav-wrap .top-nav .top-nav-tool .top-search input{width:222px; font-size:14px; color:#333; border:none; outline:none; padding:4px 16px;}
header .top-nav-wrap .top-nav .top-nav-tool .top-search input::placeholder{font-size:12px; color:#888;}
header .top-nav-wrap .top-nav .top-nav-tool .top-search button{width:38px; height:38px; display:flex; justify-content:center; align-items:center;}
header .top-nav-wrap .top-nav .top-nav-tool .top-search button img{}

header .top-nav-wrap .top-nav .top-nav-tool ul{display:flex; gap:24px;}
header .top-nav-wrap .top-nav .top-nav-tool ul li{}
header .top-nav-wrap .top-nav .top-nav-tool ul li a{display:flex; flex-direction:column; align-items:center; position:relative;}
header .top-nav-wrap .top-nav .top-nav-tool ul li a img{}
header .top-nav-wrap .top-nav .top-nav-tool ul li a p{display:; font-size:11px; line-height:1; color:#555; white-space:nowrap; position:absolute; top:85%; opacity:0; transition:0.25s;}
header .top-nav-wrap .top-nav .top-nav-tool ul li a:hover p{display:block; color:#276EF1; top:100%; opacity:1;}
@media (max-width:1440px) {
header .top-nav-wrap .top-nav .top-nav-menu{gap:20px;}
header .top-nav-wrap .top-nav .top-nav-menu ul > li a{font-size:15px; padding:26px 20px;}

header .top-nav-wrap .top-nav .top-nav-tool{gap:20px;}
header .top-nav-wrap .top-nav .top-nav-tool .top-search input{width:192px;}
header .top-nav-wrap .top-nav .top-nav-tool ul{gap:20px;}
header .top-nav-wrap .top-nav .top-nav-tool ul li a img{height:28px;}
}
@media (max-width:1024px) {

}
@media (max-width:767px) {
header{border-bottom:1px solid #e5e5e5; position:sticky; top:0; left:0; z-index:1000;}
header .top-bar-wrap{display:none;}
header .top-nav-wrap{display:none;}
header .header-m{width:100%; height:60px; display:flex; align-items:center; background:#fff; position:relative; padding:4px 16px;}
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{}
}


/* FOOTER */
footer{width:100%; border-top:1px solid #E5E5E5; padding:32px 0;}
.footer-inner{display:flex}
.footer-inner .footer-logo{}
.footer-inner .footer-logo img{height:32px; display:block;}

.footer-inner .footer-info{flex:1; display:flex; flex-direction:column; gap:24px; margin:0 0 0 146px;}
.footer-inner .footer-info ul{display:flex; align-items:center; gap:40px;}
.footer-inner .footer-info ul li{}
.footer-inner .footer-info ul li a{font-size:14px; font-weight:500; line-height:1; color:#555;}
.footer-inner .footer-info ul li a:hover{color:#276EF1;}
.footer-inner .footer-info address{display:flex; flex-direction:column; gap:8px;}
.footer-inner .footer-info address p{font-size:12px; font-weight:400; line-height:1; color:#777;}
.footer-inner .footer-info strong{font-size:12px; font-weight:400; line-height:1; color:#A1A1A1;}

.footer-inner .footer-link{display:flex; flex-direction:column; gap:24px;}
.footer-inner .footer-link select{height:42px; font-size:14px; color:#555; border:1px solid #e5e5e5; outline:none; border-radius:8px;}

.footer-inner .footer-link ul{display:flex; gap:16px;}
.footer-inner .footer-link ul li{}
.footer-inner .footer-link ul li a{display:block;}
.footer-inner .footer-link ul li a img{}

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

@media (max-width: 767px) {
footer{padding:24px 0;}
.footer-inner{flex-direction:column;}
.footer-inner .footer-logo{display:flex; justify-content:center;}
.footer-inner .footer-logo img{height:24px;}
.footer-inner .footer-info{gap:24px; padding:0 16px; margin:16px 0 0;}
.footer-inner .footer-info ul{justify-content:center; gap:32px;}
.footer-inner .footer-info ul li a{font-size:12px;}
.footer-inner .footer-info address{align-items:center; margin:0;}
.footer-inner .footer-info strong{text-align:center;}

.footer-inner .footer-link{align-items:center; gap:12px; padding:0 16px; margin:32px 0 0;}
.footer-inner .footer-link select{width:auto; min-width:200px; height:38px; font-size:13px;}
.footer-inner .footer-link ul{gap:16px;}
.footer-inner .footer-link ul li a{width:40px;}


.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:1000;}
.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:#276EF1; position:absolute; top:-4px; right:-8px;}
.m-fix-bar ul li a p{font-size:10px; line-height:1; color:#333;}

.m-fix-quick{display:block; position:fixed; right:12px; bottom:84px; z-index:1000;}
.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{}
}


/* M SIDE */
.side-area{background:#F5F5F5;}
.side-area.offcanvas.offcanvas-start{width:80%; max-width:336px;}
.side-area .side-close{position:absolute; top:18px; right:-44px;}
.side-area .side-close img{}

.side-area-vertical{overflow-y:auto;}
.side-area-vertical::-webkit-scrollbar{width:4px;}
.side-area-vertical::-webkit-scrollbar-track{background-color:#ccc; margin:0;}
.side-area-vertical::-webkit-scrollbar-thumb{background-color:#555; border-radius:20px;}

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

.side-area .side-header{padding:18px 16px;}
.side-area .side-header ul{display:flex; gap:24px;}
.side-area .side-header ul li{}
.side-area .side-header ul li a{display:flex; align-items:center; gap:2px;}
.side-area .side-header ul li a img{}
.side-area .side-header ul li a p{font-size:14px; line-height:1; color:#333;}


.side-area .side-menu{padding:18px 16px;}
.side-area .side-menu .package-menu{display:flex; flex-direction:column; gap:18px;}/* 1차 */
.side-area .side-menu .package-menu .package-item{}
.side-area .side-menu .package-menu .package-item .package-line{display:flex; align-items:center;}
.side-area .side-menu .package-menu .package-item .package-line a{flex:1;}
.side-area .side-menu .package-menu .package-item .package-line button{background:none; border:none; padding:8px 10px; transition:transform 0.3s; cursor:pointer;}
.side-area .side-menu .package-menu .package-item.open > .package-line button{transform:rotate(90deg);}

.side-area .side-menu .package-menu .package-item .package-sub{max-height:0; overflow:hidden; opacity:0; transition:0.3s;}
.side-area .side-menu .package-menu > .package-item > .package-line > a{font-size:16px; font-weight:700; color:#222; padding:4px 0;}/* 1차 text */
.side-area .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차 */
.side-area .side-menu .package-menu .package-item > .package-sub .package-line a{font-size:14px; font-weight:500; color:#333; padding:4px 0;}/* 2차 text */
.side-area .side-menu .package-menu .package-item.open > .package-sub .package-item.open .package-sub{gap:4px; padding:6px 0 4px 14px;}/* 3차 */
.side-area .side-menu .package-menu .package-item > .package-sub .package-sub a{font-size:13px; font-weight:400; color:#555; padding:4px 0;}/* 3차 text */

.side-area .side-menu .other-menu{display:flex; flex-direction:column; gap:12px; border-top:1px solid #eee; padding:18px 0 0; margin:18px 0 0;}
.side-area .side-menu .other-menu li{}
.side-area .side-menu .other-menu li a{display:block; font-size:15px; font-weight:400; color:#222; padding:3px 0;}
.side-area .side-menu .other-menu li a:hover{color:#276EF1;}


.side-area .side-quick{}
.side-area .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;;}
.side-area .side-quick ul.side-quick-list li{background:#fff;}
.side-area .side-quick ul.side-quick-list li a{height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;}
.side-area .side-quick ul.side-quick-list li a img{}
.side-area .side-quick ul.side-quick-list li a p{font-size:12px; line-height:1; color:#333;}
.side-area .side-quick ul.side-quick-list li a:hover p{color:#276EF1;}

.side-area .side-quick ul.side-set-list{display:flex; justify-content:center; align-items:center; gap:40px; padding:24px 0;}
.side-area .side-quick ul.side-set-list li{}
.side-area .side-quick ul.side-set-list li a{display:flex; align-items:center; gap:4px;}
.side-area .side-quick ul.side-set-list li a p{font-size:13px; line-height:1; color:#555;}
.side-area .side-quick ul.side-set-list li a img{}
.side-area .side-quick ul.side-set-list li a:hover p{color:#276EF1;}


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


/* BREAKCRUMB */
.contents-title-wrap{}
.contents-title-wrap .contents-title{position:relative;}
.contents-title-wrap .contents-title .breakcrumb{position:absolute; top:50%; left:0; transform:translate(0, -50%);}
.contents-title-wrap .contents-title .breakcrumb ul{display:flex;}
.contents-title-wrap .contents-title .breakcrumb ul li{display:flex; align-items:center;}
.contents-title-wrap .contents-title .breakcrumb ul li+li{}
.contents-title-wrap .contents-title .breakcrumb ul li+li:before{content:url("/assets/img/breakcrumb-arrow.svg"); display:block; margin:0 12px;}
.contents-title-wrap .contents-title .breakcrumb ul li a{display:block; font-size:12px; font-weight:200; line-height:1; color:#555;}
.contents-title-wrap .contents-title .breakcrumb ul li a img{display:block;}
.contents-title-wrap .contents-title .breakcrumb ul li .breakcrumb-home .breakcrumb-home-icon-on{display:none;}
.contents-title-wrap .contents-title .breakcrumb ul li .breakcrumb-home:hover .breakcrumb-home-icon{display:none;}
.contents-title-wrap .contents-title .breakcrumb ul li .breakcrumb-home:hover .breakcrumb-home-icon-on{display:block;}

.contents-title-wrap .contents-title h2{width:100%; height:182px; display:flex; justify-content:center; align-items:center; font-size:32px; font-weight:700; line-height:1; color:#222;}


/* VISUAL */
.main-visual-wrap{height:100%; margin:auto;}
.main-visual{width:100%; height:100%;}
.main-visual .swiper-slide{height:100%;}
.main-visual .swiper-slide a{height:100%;}
.main-visual .swiper-slide a img{width:100%; height:100%; display:block; object-fit:cover;}
.main-visual .swiper-slide a .parallax-bg{width:100%; height:; position:relative; left:0; top:0; background-size:cover;}

.main-visual .swiper-slide a .swiper-text{position:absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% + -13px)); z-index:10;}
.main-visual .swiper-slide a .swiper-text small{display:block; font-size:10px; font-weight:200; line-height:1; color:#fff; letter-spacing:0.35rem; margin:0 0 32px;}
.main-visual .swiper-slide a .swiper-text p{font-size:42px; font-weight:400; line-height:1.275; color:#fff;}
.main-visual .swiper-slide a .swiper-text p strong{display:block; font-weight:700;}


.main-visual .main-visual-control{}
.main-visual .main-visual-control .inner-container{position:relative;}
.main-visual .main-visual-control .main-visual-fraction{flex:1; display:flex; align-items:center; gap:22px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.03); border-radius:50px; box-shadow:4px 4px 12px rgba(0,0,0,0.1); position:absolute; left:0; bottom:52px; padding:8px 14px; z-index:10;}
.main-visual .main-visual-control .main-visual-fraction .swiper-button-prev,
.main-visual .main-visual-control .main-visual-fraction .swiper-button-next{width:auto; height:auto; position:relative; left:auto; right:auto; top:auto; bottom:auto; color:#fff; padding:4px; margin:0;}
.main-visual .main-visual-control .main-visual-fraction .swiper-button-prev:after,
.main-visual .main-visual-control .main-visual-fraction .swiper-button-next:after{font-size:8px;}
.main-visual .main-visual-control .main-visual-fraction .swiper-button-prev{margin:0;}
.main-visual .main-visual-control .main-visual-fraction .swiper-button-next{margin:0;}

.main-visual .main-visual-control .main-visual-fraction .main-visual-page{display:flex; align-items:center; gap:18px;}

.main-visual .main-visual-control .main-visual-fraction .swiper-pagination-fraction{width:auto; display:flex; align-items:center; gap:5px; font-size:9px; font-weight:100; line-height:1; color:rgba(255,255,255,0.6); position:relative; left:auto; right:auto; top:auto; bottom:auto;}
.main-visual .main-visual-control .main-visual-fraction .swiper-pagination-fraction .swiper-pagination-current{font-size:12px; font-weight:400; color:rgba(255,255,255,1);}
.main-visual .main-visual-control .main-visual-fraction .swiper-pagination-fraction .swiper-pagination-total{font-size:12px; font-weight:400;}

.main-visual .main-visual-control .main-visual-play{}
.main-visual .main-visual-control a{display:flex; justify-content:center; align-items:center;}
.main-visual .main-visual-control a img{}
.main-visual .main-visual-control a.main-visual-pause{}
.main-visual .main-visual-control a.main-visual-start{display:none;}
@media (max-width: 767px) {
.main-visual .swiper-slide a{display:block; padding-top:100%; position:relative;}
.main-visual .swiper-slide a .parallax-bg{height:100%!important; display:block; position:absolute; top:0; left:0;}

.main-visual .swiper-slide a .swiper-text{top:0; transform:translate(-50%, 0px); padding:24px;}
.main-visual .swiper-slide a .swiper-text small{letter-spacing:0.1rem; margin:0 0 16px;}
.main-visual .swiper-slide a .swiper-text p{font-size:24px;}

.main-visual .main-visual-control .main-visual-fraction{gap:16px; left:50%; bottom:20px; transform:translate(-50%, 0);}
.main-visual .main-visual-control .main-visual-fraction .main-visual-page{gap:16px;}
}


/* MAIN CONTENTS */
.main-contents{width:100%;}
.main-contents section{display:flex; flex-direction:column; gap:12px; margin:62px 0 0;}
.main-contents section + section{margin:80px 0 0;}

.main-contents section .main-header{display:flex;}
.main-contents section .main-header .main-header-title{flex:1;}
.main-contents section .main-header .main-header-title h1{font-size:28px; font-weight:700; line-height:1; color:#222;}

.main-contents section .main-header .main-header-tool{display:flex; justify-content:flex-end; gap:4px;}
.main-contents section .main-header .main-header-tool .allView-btn{display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #e5e5e5; border-radius:50px; padding:10px 16px;}
.main-contents section .main-header .main-header-tool .allView-btn p{font-size:12px; line-height:1; color:#555;}
.main-contents section .main-header .main-header-tool .allView-btn:hover{background:rgba(39, 110, 241, 0.1); border:1px solid rgba(39, 110, 241, 0.1);}
.main-contents section .main-header .main-header-tool .allView-btn:hover p{color:#276EF1;}

.main-contents section .main-body{}
@media (max-width: 767px) {
.main-contents section{margin:40px 0 0;}
.main-contents section .main-header .main-header-title h1{font-size:20px;}

.main-contents section .main-header .main-header-tool .allView-btn{padding:8px 10px;}
}


/* PROCESS */
.process-wrap{}
.process-wrap ul{display:flex; justify-content:center; align-items:center;}
.process-wrap ul li{display:flex; align-items:center;}
.process-wrap ul li + li{}
.process-wrap ul li + li:before{content:url("/assets/img/process-arrow.svg"); display:block; margin:0 20px;}
.process-wrap ul li .process-box{display:flex; flex-direction:column; gap:10px;}
.process-wrap ul li .process-box .process-icon{width:40px; height:40px; display:flex; justify-content:center; align-items:center; background:#F5F5F5; border-radius:50px;;}
.process-wrap ul li .process-box .process-icon img{}
.process-wrap ul li .process-box p{font-size:12px; font-weight:400; line-height:1; color:#777;}
.process-wrap ul li .process-box.active .process-icon{background:#333;}
.process-wrap ul li .process-box.active p{color:#333;}

.process-wrap ul li.join-item{display:none;}
.process-wrap ul li.request-item{display:none;}
.process-wrap.join-process ul li.join-item{display:flex;}
.process-wrap.request-process ul li.request-item{display:flex;}

.process-wrap.join-process ul li.request-item:first-of-type + li:before{display:none;}
.process-wrap.request-process ul li.join-item:first-of-type + li:before{display:none;}


/* LOGIN */
.login-box-wrap{}
.login-box{width:100%; max-width:460px; display:flex; flex-direction:column; gap:40px; margin:auto;}
.login-box .login-user{width:100%; background:#F7F7F7; border-radius:8px; padding:3px;}
.login-box .login-user ul{display:flex;}
.login-box .login-user ul li{flex:1 0 50%;}
.login-box .login-user ul li input{position:absolute; opacity:0;}
.login-box .login-user ul li label{height:48px; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:400; line-height:1; color:#888; border-radius:8px;}
.login-box .login-user ul li label:hover{font-weight:500; color:#333;}
.login-box .login-user ul li input:checked + label{background:#fff; font-weight:500; color:#333;}

.login-box .login-guide{display:flex; justify-content:center;}
.login-box .login-guide h1{font-size:16px; font-weight:500; color:#333;}

.login-box .login-enter{display:flex; flex-direction:column; gap:24px;}
.login-box .login-enter .login-input{}
.login-box .login-enter .login-input ul{display:flex; flex-direction:column; gap:8px;}
.login-box .login-enter .login-input ul li{display:flex; align-items:; gap:8px;}
.login-box .login-enter .login-input ul li label{flex:1; height:56px; display:flex; align-items:center; gap:4px; background:#fff; border:1px solid #ddd; border-radius:8px; padding:16px; transition:border-color 0.2s;}
.login-box .login-enter .login-input ul li:focus-within label{border-color:#276EF1;}
.login-box .login-enter .login-input ul li label img{}
.login-box .login-enter .login-input ul li label img.login-img-normal{}
.login-box .login-enter .login-input ul li label img.login-img-focus{display:none;}
.login-box .login-enter .login-input ul li:focus-within label img.login-img-normal{display:none;}
.login-box .login-enter .login-input ul li:focus-within label img.login-img-focus{display:block;}
.login-box .login-enter .login-input ul li label img{display:block;}
.login-box .login-enter .login-input ul li label input{width:100%; font-size:16px; color:#333; border:none; outline:none;}
.login-box .login-enter .login-input ul li label input::-webkit-outer-spin-button,
.login-box .login-enter .login-input ul li label input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.login-box .login-enter .login-input ul li label input::placeholder{font-size:16px; color:#a1a1a1;}

.login-box .login-enter .login-input ul li button{flex:0 132px; font-weight:500;}

.login-box .login-enter .login-input ul li.error label{border:1px solid red;}
.login-box .login-enter .login-input ul li.error .error-message{font-size:12px; color:red; margin:2px 0 0;}


.login-box .login-enter .login-utility{display:flex; align-items:center;}
.login-box .login-enter .login-utility .id-save{flex:1; display:flex;}
.login-box .login-enter .login-utility .id-save input{}
.login-box .login-enter .login-utility .id-save p{font-size:14px; font-weight:500; line-height:1; color:#555;}

.login-box .login-enter .login-utility ul{display:flex; align-items:center;}
.login-box .login-enter .login-utility ul li{display:flex; align-items:center;}
.login-box .login-enter .login-utility ul li + li{}
.login-box .login-enter .login-utility ul li + li:before{content:""; display:block; width:1px; height:12px; background:#d9d9d9; margin:0 12px;}
.login-box .login-enter .login-utility ul li a{display:block; font-size:14px; font-weight:400; line-height:1; color:#555;}
.login-box .login-enter .login-utility ul li a:hover{color:#276EF1;}

.login-box .login-enter .login-btn{flex:1 0 60px;}


/* JOIN */
.join-box{width:100%; max-width:460px; margin:auto;}
.join-box .join-input{display:flex; flex-direction:column; margin:80px 0 0;}
.join-box .btn-wrap{}
.join-box .btn-wrap .btn{flex:1 0 220px; height:60px;}


.join-agree-wrap{width:100%; display:flex; flex-direction:column; margin:80px auto 0;}

.join-agree-all{display:flex; flex-direction:column; gap:8px; border-bottom:2px solid #333; padding:0 0 32px; margin:0 0 32px;}
.join-agree-all label{}
.join-agree-all label p{font-size:18px; font-weight:500; color:#333;}
.join-agree-all strong{font-size:16px; font-weight:400; line-height:1; color:#555; text-indent:24px;}

.agree-box{display:flex; flex-direction:column; gap:32px;}
.agree-box li{display:flex; flex-direction:column; gap:12px;}
.agree-box li label{font-size:18px; font-weight:500; color:#333;}
.agree-box li .agree-cont{height:180px; border:1px solid #e5e5e5; padding:20px;}
.agree-box li .agree-cont .agree-view{width:100%; height:100%; font-size:14px; line-height:1.5; color:#777; overflow-y:auto;}
.agree-box li .agree-cont .agree-view::-webkit-scrollbar{width:4px;}
.agree-box li .agree-cont .agree-view::-webkit-scrollbar-track{background-color:; margin:0;}
.agree-box li .agree-cont .agree-view::-webkit-scrollbar-thumb{background-color:#ccc; border-radius:20px;}


.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:#1D2630;}
.input-cont dl dt .required{display:inline-block; color:#de0000;}
.input-cont dl dd{flex:1; display:flex; align-items:; gap:8px;}
.input-cont dl dd input,
.input-cont dl dd select{width:100%; height:56px; display:flex; align-items:center; gap:4px; font-size:16px; color:#333; background:#fff; border:1px solid #ddd; border-radius:8px; outline:none; padding:16px; transition:border-color 0.2s;}
.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:16px; color:#a1a1a1;}
.input-cont dl dd:focus-within input,
.input-cont dl dd:focus-within select{border-color:#276EF1;}

.input-cont dl button{flex:0 162px; font-weight:500;}

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


.join-comp{width:100%; display:flex; flex-direction:column; margin:80px auto 0;}
.join-comp .join-guide{text-align:center;}
.join-comp .join-guide h1{font-size:24px; font-weight:500; line-height:1.35; color:#333;}
.join-comp .join-guide h1 span{color:#276EF1;}

.join-comp ul{display:flex; flex-direction:column; margin:24px 0 0;}
.join-comp ul li{width:100%; height:60px; display:flex; justify-content:center; align-items:center; background:rgba(39,110,241,0.1); border-radius:8px;}
.join-comp ul li + li{margin:8px 0 0;}
.join-comp ul li p{font-size:18px; font-weight:400; line-height:1; color:#333;}
.join-comp ul li p strong{font-weight:500; color:#276EF1;}
.join-comp ul button{width:100%; height:60px; font-size:20px; font-weight:500; color:#fff; background:#276EF1; border-radius:8px; margin:16px 0 0;}


/* CATEGORY BOARD */
.category-board{}
.category-board ul{display:grid; grid-template-columns:repeat(10, 1fr); gap:20px;}
.category-board ul + ul{border-top:1px dashed #ccc; padding:24px 0 0; margin:24px 0 0;}
.category-board ul li{position:relative; padding:100% 0 0;}
.category-board ul li a{width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; background:#fff; border:1px solid #e5e5e5; border-radius:8px; position:absolute; top:0; left:0;}
.category-board ul li a:hover,
.category-board ul li a.active{background:rgba(39, 110, 241, 0.1); border:1px solid rgba(39, 110, 241, 0.1);}
.category-board ul li a img{}
.category-board ul li a p{font-size:12px; font-weight:400; line-height:1; color:#555;}
.category-board ul li a:hover p,
.category-board ul li a.active p{color:#276EF1;}
@media (max-width: 767px) {
.category-board{}
.category-board .inner-container{padding:0;}
.category-board ul{grid-template-columns:repeat(4, 1fr); gap:6px;}
.category-board ul + ul{padding:14px 0 0; margin:14px 0 0;}
.category-board ul li a{gap:4px;}
.category-board ul li a img{height:40px;}
}


/* CATEGORY LIST */
.category-list-wrap{margin:80px auto 0;}
.category-list-wrap .category-list{width:100%; display:flex;}

/* CATEGORY LIST - FILTER */
.category-list-wrap .category-list .filter-wrap{flex:0 0 252px; max-width:252px;}
.category-list-wrap .category-list .filter-wrap section{}
.category-list-wrap .category-list .filter-wrap section dl{display:flex; flex-direction:column; gap:14px;}
.category-list-wrap .category-list .filter-wrap section dl dt{display:flex; align-items:center;}
.category-list-wrap .category-list .filter-wrap section dl dt h3{flex:1; font-size:14px; font-weight:500; line-height:1; color:#1D2630;}
.category-list-wrap .category-list .filter-wrap section dl dt a{width:16px; height:16px; display:flex; justify-content: center; align-items: center;}
.category-list-wrap .category-list .filter-wrap section dl dt a img{transition:transform 0.2s ease;}
.category-list-wrap .category-list .filter-wrap section dl dt a.collapsed img{transform:rotate(0deg);}
.category-list-wrap .category-list .filter-wrap section dl dt a:not(.collapsed) img{transform:rotate(180deg);}

.category-list-wrap .category-list .filter-wrap section dl dd{/*max-height:188px; overflow-y:auto;*/}
.category-list-wrap .category-list .filter-wrap section dl dd::-webkit-scrollbar{width:4px;}
.category-list-wrap .category-list .filter-wrap section dl dd::-webkit-scrollbar-track{background-color:; margin:0;}
.category-list-wrap .category-list .filter-wrap section dl dd::-webkit-scrollbar-thumb{background-color:#ccc; border-radius:20px;}

.category-list-wrap .category-list .filter-wrap section dl dd .search-box{display:flex; align-items:center; border:1px solid #E0E6EB; border-radius:8px;}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box input[type="text"]{flex:1; width:100%; background:transparent; border:none; outline:none; padding:4px 12px;}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box input::placeholder{color:#A1A1A1;}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box .btn-search{flex:0 0 36px; width:36px; height:36px; display:flex; justify-content:center; align-items:center; padding:4px;}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box .btn-search img{}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box .btn-search img.search-icon{display:block;}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box .btn-search img.search-icon-on{display:none;}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box .btn-search:hover img.search-icon{display:none;}
.category-list-wrap .category-list .filter-wrap section dl dd .search-box .btn-search:hover img.search-icon-on{display:block;}

.category-list-wrap .category-list .filter-wrap section dl dd .filter-selected{width:100%; min-height:72px; display:flex; flex-wrap:wrap; gap:4px; background:#F4F7FA; border-radius:8px; padding:8px;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-selected li{}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-selected li a{height:26px; display:flex; align-items:center; gap:4px; background:rgba(39, 110, 241, 0.1); border-radius:8px; padding:6px 8px;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-selected li a p{font-size:12px; font-weight:500; line-height:1; color:#276EF1;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-selected li a span{display:flex;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-selected li a span img{}

.category-list-wrap .category-list .filter-wrap section dl dd .filter-check{display:grid; grid-template-columns:repeat(1, 1fr); gap:12px;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-check li{}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-check li label{display:flex; align-items:center; padding-left:1.5rem;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-check li label input{width:18px; height:18px; display:block; background:#fff; border:1px solid #ccc; border-radius:6px; appearance:none; margin-left:-1.5rem;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-check li label input:checked{background:#276EF1 url(/assets/manage/img/check-icon.svg)no-repeat center; border-color:#276EF1;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-check li label span{font-size:12px; font-weight:400; line-height:1; color:#333;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-check li label input:checked + span{color:#276EF1;}

.category-list-wrap .category-list .filter-wrap section dl dd .filter-box{display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li{}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li label{height:46px; display:flex; align-items:center; background:#fff; border:1px solid #E5E5E5; border-radius:8px; padding:4px 12px;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li label input{opacity:0;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li label input:checked{}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li label img{margin:0 4px 0 0;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li label span{font-size:12px; font-weight:400; line-height:1; color:#333;}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li label.checked{background:rgba(39, 110, 241, 0.1); border-color:rgba(39, 110, 241, 0.1);}
.category-list-wrap .category-list .filter-wrap section dl dd .filter-box li label.checked span{color:#276EF1;}

.category-list-wrap .category-list .filter-wrap section dl .filter-reset{height:46px; display:flex; justify-content:center; align-items:center; font-size:14px; font-weight:500; line-height:1; color:#276EF1; background:rgba(39, 110, 241, 0.1); border:none; border-radius:8px; padding:4px 12px;}

.category-list-wrap .category-list .filter-wrap section dl + dl{border-top:1px dashed #ccc; padding:24px 0 0; margin:24px 0 0;}


/* CATEGORY LIST - PRODUCT */
.category-list-wrap .category-list .product-list-wrap{width:calc(100% - 252px); display:flex; flex-direction:column; gap:12px; padding:0 0 0 48px;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool{display:flex; align-items:center;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool p{flex:1; font-size:13px; font-weight:400; line-height:1; color:#555;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool p strong{font-weight:500; color:#276EF1;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool ul{display:flex; align-items:center; gap:16px;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool ul li{}
.category-list-wrap .category-list .product-list-wrap .product-list-tool ul li a{display:block; font-size:12px; font-weight:400; line-height:1; color:#888; padding:4px;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool ul li a.active{font-weight:500; color:#222;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool ul li a:hover{font-weight:500; color:#222;}
.category-list-wrap .category-list .product-list-wrap .product-list-tool ul li select{height:30px; display:inline-block; font-size:12px; color:#222; border:1px solid #DBE0E5; border-radius:8px; padding-top:4px; padding-bottom:4px;}

.category-list-wrap .category-list .product-list-wrap .product-list > ul{display:flex; flex-wrap:wrap; margin:-10px -10px 0;}
.category-list-wrap .category-list .product-list-wrap .product-list.product-list01 > ul > li{}
.category-list-wrap .category-list .product-list-wrap .product-list.product-list02 > ul > li{}
.category-list-wrap .category-list .product-list-wrap .product-list.product-list03 > ul > li{}
.category-list-wrap .category-list .product-list-wrap .product-list.product-list04 > ul > li{}
.category-list-wrap .category-list .product-list-wrap .product-list.product-list05 > ul > li{}
.category-list-wrap .category-list .product-list-wrap .product-list.product-list06 > ul > li{}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li{flex:20%; max-width:20%; padding:10px 10px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a{}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a:hover{box-shadow:;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .img-area{width:100%; aspect-ratio:1 / 1; border:1px solid #e5e5e5; border-radius:6px; position:relative; overflow:hidden;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li 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;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a:hover .img-area > img{transform:translate(-50%, -50%) scale(1.1);}

.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .img-area ul{display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.9); border-radius:50px; box-shadow:0px 2px 4px rgba(0, 0, 0, 0.075); padding:4px 6px; position:absolute; top:0; right:12px; opacity:0; visibility:hidden; z-index:10; transition:0.5s;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a:hover .img-area ul{transition:.35s ease; visibility:visible; top:12px; opacity:1;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .img-area ul li{display:flex; align-items:center;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .img-area ul li button{}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .img-area ul li button img{}

.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area{display:flex; flex-direction:column; gap:12px; padding:10px 12px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-strong{display:flex; flex-direction:column; gap:4px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-strong .item-volumeSize{display:flex; align-items:stretch; font-size:13px; font-weight:400; line-height:1.35; color:#333;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-strong .item-volumeSize span{display:flex; align-items:center;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-strong .item-volumeSize span + span:before{content:""; width:1px; height:100%; display:block; background:#ddd; margin:0 12px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-strong .item-price{font-size:13px; font-weight:400; line-height:1.35; color:#333;}

.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light{display:flex; flex-direction:column; gap:4px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-company{display:flex; align-items:baseline; font-size:12px; font-weight:400; line-height:1.35; color:#888;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-company .company-grade{width:68px; height:12px; display:block;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-company .company-grade.company-grade01{background:url("/assets/img/company-grade01.svg")no-repeat center;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-company .company-grade.company-grade02{background:url("/assets/img/company-grade02.svg")no-repeat center;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-company .company-grade.company-grade03{background:url("/assets/img/company-grade03.svg")no-repeat center;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-company .company-grade.company-grade04{background:url("/assets/img/company-grade04.svg")no-repeat center;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-company .company-grade.company-grade05{background:url("/assets/img/company-grade05.svg")no-repeat center;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-ships{font-size:12px; font-weight:400; line-height:1.35; color:#888;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-light .item-ships span{}

.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust{display:flex; gap:12px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust li{}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust li img{}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust li img.item-sust-img{display:block;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust li img.item-sust-img-on{display:none;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust li.active{}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust li.active img.item-sust-img{display:none;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-sust li.active img.item-sust-img-on{display:block;}
@media (max-width: 1440px) {
.category-list-wrap .category-list .product-list-wrap .product-list > ul{margin:-10px -8px 0;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li{flex:25%; max-width:25%; padding:10px 8px;}
}
@media (max-width: 1280px) {
.category-list-wrap .category-list .filter-wrap{flex:0 0 232px; max-width:232px;}
.category-list-wrap .category-list .product-list-wrap{width: calc(100% - 232px); padding:0 0 0 32px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul{}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li{flex:33.33%; max-width:33.33%;}
}
@media (max-width: 767px) {
.category-list-wrap .category-list .product-list-wrap{width:100%; gap:12px; padding:0;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul{grid-template-columns:repeat(2, 1fr); gap:10px; row-gap:24px;}

.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-strong .item-volumeSize{flex-direction:column; gap:4px;}
.category-list-wrap .category-list .product-list-wrap .product-list > ul > li a .desc-area .desc-area-strong .item-volumeSize span + span:before{display:none;}
}

/* PACKAGE VIEW */
.view-wrap{display:flex; gap:80px; position:relative; margin-top:-40px;}
.view-wrap section{flex:1;}
.view-wrap .view-info{flex:1 0 1056px; display:flex; gap:56px;}
.view-wrap .view-info .view-info-l{flex:1 0 580px; display:flex; flex-direction:column; gap:24px;}
.view-wrap .view-info .view-info-l .package-img{display:flex; flex-direction:column; gap:8px;}
.view-wrap .view-info .view-info-l .package-img .package-img-swiper{width:100%; border:1px solid #e5e5e5; border-radius:8px;}
.view-wrap .view-info .view-info-l .package-img .package-img-swiper .swiper-slide{width:100%; display:flex; justify-content:center; align-items:center; aspect-ratio:1 / 1; position:relative; overflow:hidden;}

.view-wrap .view-info .view-info-l .package-img .package-img-swiper .swiper-slide .swiper-zoom-container{width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
.view-wrap .view-info .view-info-l .package-img .package-img-swiper .swiper-slide img{height:100%; display:block; object-fit:cover;}
/*
.view-wrap .view-info .view-info-l .package-img .package-img-swiper .swiper-slide .swiper-zoom-container{width:100%;}
.view-wrap .view-info .view-info-l .package-img .package-img-swiper .swiper-slide img{display:block;}
*/
.view-wrap .view-info .view-info-l .package-img .package-thumbnail-swiper{width:100%;}
.view-wrap .view-info .view-info-l .package-img .package-thumbnail-swiper .swiper-slide{aspect-ratio:1 / 1; border:1px solid #e5e5e5; border-radius:8px; position:relative; overflow:hidden;}
.view-wrap .view-info .view-info-l .package-img .package-thumbnail-swiper .swiper-slide img{height:100%; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); object-fit:cover;}

.view-wrap .view-info .view-info-l .package-img .package-zoom-btn{display:flex; gap:12px; background:#fff; border:1px solid #ddd; border-radius:50px; position:absolute; bottom:16px; left:50%; transform:translate(-50%, 0); padding:7px 12px; z-index:10;}
.view-wrap .view-info .view-info-l .package-img .package-zoom-btn button{display:flex; align-items:center;}
.view-wrap .view-info .view-info-l .package-img .package-zoom-btn button.zoom-out-btn{opacity:0.45;}
.view-wrap .view-info .view-info-l .package-img .package-zoom-btn button.zoom-in-btn{opacity:1;}
.view-wrap .view-info .view-info-l .package-img .package-zoom-btn button.zoom-out-btn.enabled{opacity:1;}
.view-wrap .view-info .view-info-l .package-img .package-zoom-btn button.zoom-in-btn.active{opacity:0.45;}
.view-wrap .view-info .view-info-l .package-img .package-zoom-btn button i{font-size:16px; color:#222;}

.view-wrap .view-info .view-info-l .view-company{display:flex; flex-direction:column; gap:22px; background:#F5F5F5; border-radius:8px; padding:24px 24px;}
.view-wrap .view-info .view-info-l .view-company .view-company-title{display:flex; align-items:baseline;}
.view-wrap .view-info .view-info-l .view-company .view-company-title h1{font-size:28px; font-weight:500; line-height:1; color:#222; margin:0 24px 0 0;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade{display:flex; margin:0 8px 0 0;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade .company-grade{width:68px; height:12px; display:block; margin:0 4px 0 0;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade .company-grade.company-grade01{background:url("/assets/img/company-grade01.svg")no-repeat center;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade .company-grade.company-grade02{background:url("/assets/img/company-grade02.svg")no-repeat center;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade .company-grade.company-grade03{background:url("/assets/img/company-grade03.svg")no-repeat center;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade .company-grade.company-grade04{background:url("/assets/img/company-grade04.svg")no-repeat center;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade .company-grade.company-grade05{background:url("/assets/img/company-grade05.svg")no-repeat center;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade strong{font-size:12px; font-weight:400; line-height:1; color:#222;}
.view-wrap .view-info .view-info-l .view-company .view-company-title .view-company-grade strong span{}
.view-wrap .view-info .view-info-l .view-company .view-company-title a{}
.view-wrap .view-info .view-info-l .view-company .view-company-title a img{}
.view-wrap .view-info .view-info-l .view-company .view-company-title a img.view-com-info-icon{display:block;}
.view-wrap .view-info .view-info-l .view-company .view-company-title a img.view-com-info-icon-on{display:none;}
.view-wrap .view-info .view-info-l .view-company .view-company-title a:hover img.view-com-info-icon{display:none;}
.view-wrap .view-info .view-info-l .view-company .view-company-title a:hover img.view-com-info-icon-on{display:block;}

.view-wrap .view-info .view-info-l .view-company .view-company-history{display:flex; flex-direction:column; gap:26px;}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl{display:flex; flex-direction:column;}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl dt{font-size:15px; font-weight:400; line-height:1; color:#333; margin:0 0 10px;}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl dd{display:flex; flex-wrap:wrap; font-size:15px; font-weight:500; line-height:1.3; color:#333;}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl dd + dd{margin:6px 0 0;}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl dd:before{content:"-"; display:block; font-size:15px; font-weight:500; line-height:1.3; color:#333; margin:0 4px 0 0;}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl dd span{display:flex; align-items:center;}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl dd span + span{}
.view-wrap .view-info .view-info-l .view-company .view-company-history dl dd span + span:before{content:"/"; display:block; font-size:12px; font-weight:400; line-height:1; color:#888; margin:0 8px;}


.view-wrap .view-info .view-info-r{}
.view-wrap .view-info .view-info-r article{}
.view-wrap .view-info .view-info-r article + article{border-top:1px solid #e5e5e5; padding:24px 0 0; margin:24px 0 0;}
.view-wrap .view-info .view-info-r .view-info-title{display:flex;}
.view-wrap .view-info .view-info-r .view-info-title p{flex:1; display:flex; flex-direction:column; gap:14px;}
.view-wrap .view-info .view-info-r .view-info-title p strong{font-size:28px; font-weight:700; line-height:1; color:#333;}
.view-wrap .view-info .view-info-r .view-info-title p small{font-size:16px; font-weight:400; line-height:1; color:#555;}
.view-wrap .view-info .view-info-r .view-info-title ul{display:flex; gap:12px;}
.view-wrap .view-info .view-info-r .view-info-title ul li{}
.view-wrap .view-info .view-info-r .view-info-title ul li a{}
.view-wrap .view-info .view-info-r .view-info-title ul li a img{}
.view-wrap .view-info .view-info-r .view-info-title ul li a img.view-info-icon{display:block;}
.view-wrap .view-info .view-info-r .view-info-title ul li a img.view-info-icon-on{display:none;}
.view-wrap .view-info .view-info-r .view-info-title ul li a:hover img.view-info-icon{display:none;}
.view-wrap .view-info .view-info-r .view-info-title ul li a:hover img.view-info-icon-on{display:block;}

.view-wrap .view-info .view-info-r .view-info-item{display:flex; flex-direction:column; gap:20px;}
.view-wrap .view-info .view-info-r .view-info-item dl{display:flex; justify-content:space-between; gap:24px;}
.view-wrap .view-info .view-info-r .view-info-item dl dt{font-size:16px; font-weight:400; line-height:1; color:#333; white-space:nowrap;}
.view-wrap .view-info .view-info-r .view-info-item dl dd{max-height:180px; font-size:16px; font-weight:500; line-height:1.45; color:#333; text-align:right; overflow-y:auto; transition:padding 0.2s;}
.view-wrap .view-info .view-info-r .view-info-item dl dd small{font-size:13px; font-weight:400; line-height:1.3; color:#555;}
.view-wrap .view-info .view-info-r .view-info-item dl dd::-webkit-scrollbar{width:4px;}
.view-wrap .view-info .view-info-r .view-info-item dl dd::-webkit-scrollbar-track{background-color:; margin:6px 0;}
.view-wrap .view-info .view-info-r .view-info-item dl dd::-webkit-scrollbar-thumb{background-color:#ccc; border-radius:20px;}
.view-wrap .view-info .view-info-r .view-info-item dl dd.has-scroll{padding:0 10px 0 0;}

.view-wrap .view-info .view-info-r .view-info-qty{}
.view-wrap .view-info .view-info-r .view-info-qty dl{display:flex; justify-content:space-between; gap:16px;}
.view-wrap .view-info .view-info-r .view-info-qty dl dt{}
.view-wrap .view-info .view-info-r .view-info-qty dl dd{}

.view-wrap .view-info .view-info-r .view-info-btn{}
.view-wrap .view-info .view-info-r .view-info-btn .btn-wrap{margin:0;}


.view-wrap .view-total{flex:1 100%; border:1px solid #E5E5E5; border-radius:8px;}
.view-wrap .view-total .view-total-title{display:flex; background:#F5F5F5; padding:16px 16px;}
.view-wrap .view-total .view-total-title h1{font-size:18px; font-weight:500; line-height:1; color:#333;}

.view-wrap .view-total-item{display:flex; flex-direction:column; gap:20px; padding:16px 16px;}
.view-wrap .view-total-item .view-total-item-vert{display:flex; flex-direction:column; gap:20px;}
.view-wrap .view-total-item .view-total-item-vert dl{display:flex; flex-direction:column; gap:8px;}
.view-wrap .view-total-item .view-total-item-vert dl dt{display:flex; align-items:center; gap:4px;}
.view-wrap .view-total-item .view-total-item-vert dl dt p{font-size:14px; font-weight:400; line-height:1; color:#333;}
.view-wrap .view-total-item .view-total-item-vert dl dt a{}
.view-wrap .view-total-item .view-total-item-vert dl dt a img{}
.view-wrap .view-total-item .view-total-item-vert dl dt a img.view-total-info-icon{display:block;}
.view-wrap .view-total-item .view-total-item-vert dl dt a img.view-total-info-icon-on{display:none;}
.view-wrap .view-total-item .view-total-item-vert dl dt a:hover img.view-total-info-icon{display:none;}
.view-wrap .view-total-item .view-total-item-vert dl dt a:hover img.view-total-info-icon-on{display:block;}
.view-wrap .view-total-item .view-total-item-vert dl dd{}
.view-wrap .view-total-item .view-total-item-vert dl dd ul{display:flex; flex-wrap:wrap; gap:6px;}
.view-wrap .view-total-item .view-total-item-vert dl dd ul li{}
.view-wrap .view-total-item .view-total-item-vert dl dd ul li a{display:flex; font-size:14px; font-weight:400; line-height:1; color:#39465F; border:1px solid #e5e5e5; border-radius:8px; padding:8px 14px;}
.view-wrap .view-total-item .view-total-item-vert dl dd ul li a.active{color:#276EF1; border:1px solid #276EF1;}

.view-wrap .view-total-item .view-total-item-horiz{display:flex; flex-direction:column; gap:12px;}
.view-wrap .view-total-item .view-total-item-horiz dl{min-height:34px; display:flex; justify-content:space-between; gap:16px;}
.view-wrap .view-total-item .view-total-item-horiz dl dt{font-size:14px; font-weight:500; line-height:1; color:#333;}
.view-wrap .view-total-item .view-total-item-horiz dl dd{}
.view-wrap .view-total-item .view-total-item-horiz dl dd .view-total-item-val{display:flex; gap:6px; align-items:center;}
.view-wrap .view-total-item .view-total-item-horiz dl dd .view-total-item-val b{display:flex; align-items:center; gap:6px;}
.view-wrap .view-total-item .view-total-item-horiz dl dd .view-total-item-val b span{font-size:14px; font-weight:500; line-height:1; color:#333;}
.view-wrap .view-total-item .view-total-item-horiz dl dd .view-total-item-val b input{width:110px; height:34px; font-size:14px; font-weight:500; color:#333; text-align:right; border:1px solid #e5e5e5; border-radius:8px; outline:none; padding:8px;}
.view-wrap .view-total-item .view-total-item-horiz dl dd .view-total-item-val b input::-webkit-outer-spin-button,
.view-wrap .view-total-item .view-total-item-horiz dl dd .view-total-item-val b input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.view-wrap .view-total-item .view-total-item-horiz dl dd .view-total-item-val strong{font-size:14px; font-weight:500; line-height:1; color:#333;}

.view-wrap .view-total-item .view-total-cost{background:rgba(39, 110, 241, 0.1); border-radius:6px; padding:16px 16px;}
.view-wrap .view-total-item .view-total-cost dl{display:flex; justify-content:space-between; gap:16px;}
.view-wrap .view-total-item .view-total-cost dl dt{font-size:16px; font-weight:500; line-height:1; color:#276EF1;}
.view-wrap .view-total-item .view-total-cost dl dd{display:flex; gap:6px;}
.view-wrap .view-total-item .view-total-cost dl dd p{font-size:16px; font-weight:500; line-height:1; color:#276EF1;}
.view-wrap .view-total-item .view-total-cost dl dd strong{font-size:16px; font-weight:500; line-height:1; color:#276EF1;}

/* PACKAGE VIEW - COMMON */
.view-wrap.view-common{}
.view-wrap.view-common .view-info{gap:62px;}
.view-wrap.view-common .view-info .view-info-l{flex:0 900px; flex-direction:row;}
.view-wrap.view-common .view-info .view-info-l .package-img{flex-direction:row; gap:12px;}
.view-wrap.view-common .view-info .view-info-l .package-img .package-thumbnail-swiper{order:0; width:88px;}
.view-wrap.view-common .view-info .view-info-l .package-img .package-thumbnail-swiper .swiper-slide{height:auto;}
.view-wrap.view-common .view-info .view-info-l .package-img .package-thumbnail-swiper .swiper-slide img{}
.view-wrap.view-common .view-info .view-info-l .package-img .package-img-swiper{order:1; max-width:800px;}

.view-wrap.view-common .view-info .view-info-r{flex:1;}


/* CART & REQUEST */
.cart-wrap{}
.cart-inner{width:100%; max-width:1200px; margin:auto;}
.cart-inner .cart-box{width:100%; display:flex; flex-direction:column; margin:80px auto 0;}
.cart-inner .cart-box .cart-table-wrap{}
.cart-inner .cart-box .cart-table-wrap-pc{}
.cart-inner .cart-box .cart-table-wrap-mb{}

.cart-inner .cart-box .cart-table-wrap .cart-table{}
.cart-inner .cart-box .cart-table-wrap .cart-table{width:100%; border-collapse:collapse;}
.cart-inner .cart-box .cart-table-wrap .cart-table tr th,
.cart-inner .cart-box .cart-table-wrap .cart-table tr td{vertical-align:middle; border:1px solid #e5e5e5; border-width:1px 0; padding:16px;}
.cart-inner .cart-box .cart-table-wrap .cart-table thead{}
.cart-inner .cart-box .cart-table-wrap .cart-table thead tr{}
.cart-inner .cart-box .cart-table-wrap .cart-table thead tr th{font-size:15px; font-weight:400; line-height:; color:#333;}
.cart-inner .cart-box .cart-table-wrap .cart-table tbody{}
.cart-inner .cart-box .cart-table-wrap .cart-table tbody tr{}
.cart-inner .cart-box .cart-table-wrap .cart-table tbody tr th{}
.cart-inner .cart-box .cart-table-wrap .cart-table tbody tr td{font-size:15px; font-weight:400; line-height:; color:#222; text-align:center;}


.request-wrap{}
.request-inner{width:100%; max-width:1200px; margin:auto;}
.request-inner .request-box{width:100%; display:flex; flex-direction:column; margin:80px auto 0;}
.request-inner .request-box .request-guide{text-align:center; margin:0 auto 80px;}
.request-inner .request-box .request-guide h1{font-size:24px; font-weight:500; line-height:1.35; color:#333;}
.request-inner .request-box .request-guide h1 span{color:#276EF1;}

.request-inner .request-box .request-table-wrap{}
.request-inner .request-box .request-table-wrap-pc{}
.request-inner .request-box .request-table-wrap-mb{}

.request-inner .request-box .request-table-wrap .request-table{width:100%; display:flex; flex-direction:column; gap:10px; border:1px solid #e5e5e5; border-width:1px 0; padding:24px 16px;}
.request-inner .request-box .request-table-wrap .request-table + .request-table{margin:-1px 0 0;}
.request-inner .request-box .request-table-wrap .request-table ul{display:flex; align-items:center;}
.request-inner .request-box .request-table-wrap .request-table ul li{flex:1 auto; display:flex;}
.request-inner .request-box .request-table-wrap .request-table ul li + li{}
.request-inner .request-box .request-table-wrap .request-table .comments-area{width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:#fff; border:1px solid #DBE0E5; border-radius:8px; padding:8px 12px; overflow:hidden;}
.request-inner .request-box .request-table-wrap .request-table .comments-area label{display:flex; justify-content:center; align-items:center; font-size:11px; line-height:1; color:#A1A1A1; background:#fff; border-radius:8px; padding:4px 8px;}
.request-inner .request-box .request-table-wrap .request-table .comments-area textarea{width:100%; font-size:14px; line-height:1.4; color:#333; background:none; border:none; outline:none; resize:none;}
.request-inner .request-box .request-table-wrap .request-table .comments-area.active{background:#F8F9FA;}
.request-inner .request-box .request-table-wrap .request-table .comments-area.active label{color:#276EF1; box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);}

.request-inner .request-box .request-table-wrap .request-table .comments-area-comp{width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:8px 8px 0;}
.request-inner .request-box .request-table-wrap .request-table .comments-area-comp dt{display:flex; justify-content:center; align-items:center; font-size:11px; line-height:1; color:#A1A1A1; border:1px solid #E5E5E5; border-radius:50px; padding:4px 8px;}
.request-inner .request-box .request-table-wrap .request-table .comments-area-comp dd{width:100%; font-size:14px; line-height:1.4; color:#333;}


.request-imgBox{display:flex; align-items:center; gap:24px;}
.request-imgBox img{width:108px; display:block; border:1px solid #e5e5e5; border-radius:8px;}
.request-imgBox p{color:#222;}
.request-imgBox:hover p{color:#276EF1;}


.cart-inner .cart-box .cart-table-wrap-mb{}
.cart-inner .cart-box .cart-table-wrap-mb ul{}
.cart-inner .cart-box .cart-table-wrap-mb ul li{}


/* COMPARE */
.compare-tab{}
.compare-tab ul{width:100%; display:flex; gap:12px; border-bottom:1px solid #E5E5E5;}
.compare-tab ul li{}
.compare-tab ul li a{display:block; font-size:16px; font-weight:400; line-height:1; color:#555; position:relative; padding:14px 16px;}
.compare-tab ul li a.active{font-weight:500; color:#276EF1;}
.compare-tab ul li a.active:after{content:""; width:100%; height:1px; display:block; background:#276EF1; position:absolute; bottom:0; left:50%; transform:translate(-50%, 1px); z-index:10;}

.compare-table-wrap{border-radius:8px; overflow-x:auto; margin:20px auto 0;}
.compare-table{width:100%;}
.compare-table tr{}
.compare-table tr th,
.compare-table tr td{border:1px solid #eee; position:relative; padding:24px;}
.compare-table tr th{width:240px; min-width:240px; font-size:16px; font-weight:400; line-height:1.25; color:#333; text-align:center; vertical-align:middle; background:#f5f5f5;}
.compare-table tr td{min-width:380px; max-width:380px; text-align:center; vertical-align:top;}
.compare-table tr:first-of-type td button{line-height:1; position:absolute; top:12px; right:12px; padding:8px 8px;}
.compare-table tr:first-of-type td button i{font-size:20px; color:#333;}
.compare-table tr:first-of-type td button:hover i{color:#276EF1;}
.compare-table tr td a{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.compare-table tr td a .compare-table-img{width:100%; max-width:200px; aspect-ratio:1 / 1; border:1px solid #e5e5e5; border-radius:6px; position:relative; overflow:hidden; margin:0 0 12px;}
.compare-table tr td a .compare-table-img img{height:100%; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); object-fit:cover; transition:0.5s ease;}
.compare-table tr td p{font-size:16px; font-weight:500; line-height:1.45; color:#333;}

.compare-table tr td .compare-action{display:flex; justify-content:center; gap:6px;}
.compare-table tr td .compare-action li{}
.compare-table tr td .compare-action li a{width:48px; height:48px; display:flex; justify-content:center; align-items:center; border:1px solid #ddd; border-radius:50px;}
.compare-table tr td .compare-action li a:hover{background:rgba(39, 110, 241, 0.1); border:1px solid rgba(39, 110, 241, 0.1);}
.compare-table tr td .compare-action li a img{}

.compare-empty{min-height:600px; display:flex; justify-content:center; align-items:center;}
.compare-empty .compare-empty-text{display:flex; flex-direction:column;}
.compare-empty .compare-empty-text img{height:60px;}
.compare-empty .compare-empty-text p{font-size:14px; line-height:1; color:#777; margin:16px 0 0;}


/* SEARCH */
.result-wrap{padding:80px 0 0;}
.result-box{width:100%; max-width:520px; display:flex; flex-direction:column; gap:16px; margin:auto;}
.result-box .result-search{display:flex; justify-content:center; align-items:center; border-bottom:1px solid #333;}
.result-box .result-search input{width:100%; font-size:20px; font-weight:500; color:#333; border:none; outline:none; padding:4px 12px;}
.result-box .result-search input::placeholder{font-size:12px; color:#888;}
.result-box .result-search button{width:44px; height:44px; display:flex; justify-content:center; align-items:center; padding:8px;}
.result-box .result-search button img{width:100%;}
.result-box p{font-size:20px; font-weight:400; line-height:1.25; color:#333; text-align:center;}
.result-box p strong{font-weight:500; color:#276EF1;}

.category-list-wrap .category-list .product-list-wrap.search-list{width:100%; padding:0;}


/* MY PAGE */
.my-wrap{}
.my-inner{width:100%; display:flex; align-items:flex-start;}
.my-inner .my-aside{flex:0 0 240px; max-width:240px; border:1px solid #e5e5e5; border-radius:8px; padding:0 24px;}

.my-inner .my-aside .my-profile{display:flex; flex-direction:column; align-items:center; gap:8px; border-bottom:1px solid #e5e5e5; padding:48px 0;}
.my-inner .my-aside .my-profile span{display:flex; justify-content:center; align-items:center; font-size:12px; line-height:1; color:#276EF1; background:rgba(39, 110, 241, 0.1); border-radius:50px; padding:4px 12px;}
.my-inner .my-aside .my-profile h1{font-size:28px; font-weight:700; line-height:1; color:#333; text-align:center;}
.my-inner .my-aside .my-profile h1 small{font-size:18px; font-weight:400;}

.my-inner .my-aside .my-menu{display:flex; flex-direction:column; padding:12px 0;}
.my-inner .my-aside .my-menu li{}
.my-inner .my-aside .my-menu li a{display:block; font-size:15px; font-weight:400; line-height:1; color:#a1a1a1; padding:10px 0;}
.my-inner .my-aside .my-menu li a.active{font-weight:500; color:#333;}
.my-inner .my-aside .my-menu li a:hover{color:#333;}


.my-inner .my-contents{width:calc(100% - 240px); padding:0 0 0 60px;}
.my-inner .my-contents section{display:flex; flex-direction:column; gap:20px;}
.my-inner .my-contents section + section{margin:80px 0 0;}

.my-inner .my-contents section .my-header{display:flex;}
.my-inner .my-contents section .my-header .my-header-title{flex:1;}
.my-inner .my-contents section .my-header .my-header-title h1{font-size:22px; font-weight:500; line-height:1; color:#333;}

.my-inner .my-contents section .my-header .my-header-tab{}
.my-inner .my-contents section .my-header .my-header-tab ul{width:100%; display:flex; gap:12px; border-bottom:1px solid #E5E5E5;}
.my-inner .my-contents section .my-header .my-header-tab ul li{}
.my-inner .my-contents section .my-header .my-header-tab ul li a{display:block; font-size:18px; font-weight:500; line-height:1; color:#333; position:relative; padding:14px 16px;}
.my-inner .my-contents section .my-header .my-header-tab ul li a.active{font-weight:500; color:#276EF1;}
.my-inner .my-contents section .my-header .my-header-tab ul li a.active:after{content:""; width:100%; height:1px; display:block; background:#276EF1; position:absolute; bottom:0; left:50%; transform:translate(-50%, 1px); z-index:10;}



.my-inner .my-contents section .my-header .my-header-tool{}
.my-inner .my-contents section .my-header .my-header-tool ul{display:flex; justify-content:flex-end; gap:4px;}
.my-inner .my-contents section .my-header .my-header-tool ul li{}
.my-inner .my-contents section .my-header .my-header-tool ul li a{}

.my-inner .my-contents section .my-body{}


/* MY PAGE DASHBOARD */
.my-state{}
.my-state ul{display:flex; gap:20px;}
.my-state ul li{flex:1;}
.my-state ul li a{display:flex; flex-direction:column; align-items:center; gap:16px; background:#f7f7f7; border-radius:8px; padding:30px 8px;}
.my-state ul li a:hover{background:rgba(39,110,241,0.1);}
.my-state ul li a .my-state-icon{width:80px; height:80px; display:flex; justify-content:center; align-items:center; background:#fff; border-radius:50px; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.my-state ul li a .my-state-icon img{display:;}

.my-state ul li a .my-state-text{display:flex; flex-direction:column; align-items:center; gap:8px;}
.my-state ul li a .my-state-text p{font-size:16px; font-weight:400; line-height:1; color:#555;}
.my-state ul li a .my-state-text strong{font-size:22px; font-weight:700; line-height:1; color:#333;}
.my-state ul li a:hover .my-state-text p{color:#276EF1;}
.my-state ul li a:hover .my-state-text strong{color:#276EF1;}

/* MY PAGE INFO */
.my-info{width:100%; max-width:460px; margin:80px auto 0;}

/* MY PAGE PACKAGE */
.my-inner .my-contents .category-list-wrap{margin:0;}
.my-inner .my-contents .category-list-wrap .category-list .filter-wrap{flex:0 0 240px; max-width:240px; border:1px solid #E5E5E5; border-radius:8px; padding:16px;}
.my-inner .my-contents .category-list-wrap .category-list .product-list-wrap{width:calc(100% - 240px); padding: 0 0 0 24px;}

.form-box{display:grid; grid-template-columns:repeat(auto-fit, minmax(calc(50% - 0.5px), 1fr)); gap:1px; background:#E0E6EB; border:1px solid #E0E6EB; margin:0 0 1.5rem;}
.form-box dl{display:flex; gap:1px; background:#E0E6EB;}
.form-box dl.full-width{grid-column:1 / -1;}
.form-box dl dt{flex:0 180px; display:flex; justify-content:center; align-items:center; background:#F9FBFC; padding:12px 8px;}
.form-box dl dd{flex:1; background:#fff; padding:8px; margin:0;}
.form-box dl dd p{font-size:16px; font-weight:400; line-height:1.35; color:#333; padding:8px 0; margin:0;}
.form-box .form-label{display:block; font-size:14px; font-weight:400; line-height:1; color:#1D2630;}
.form-box .form-label .required{display:inline-block; color:#de0000;}
.form-box .form-label .modify-check{display:inline-flex; align-items:center; gap:3px; font-size:13px; color:#555; margin:0 0 0 18px;}
.form-box .form-control{height:40px; font-size:12px; border:1px solid #DBE0E5; border-radius:8px;}
select.form-control:hover, .form-control:hover, .datatable-input:hover, .custom-select:hover, .dataTable-selector:hover, .dataTable-input:hover{background-color:#f9f9f9;}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button, .datatable-input:hover:not(:disabled):not([readonly])::file-selector-button, .custom-select:hover:not(:disabled):not([readonly])::file-selector-button, .dataTable-selector:hover:not(:disabled):not([readonly])::file-selector-button, .dataTable-input: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:#555;
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-box .form-text{font-size:16px; margin:0;}

.form-box .form-check-wrap{display:flex; flex-wrap:wrap; gap:2rem;}
.form-box .form-check{}
.form-box .form-check .form-check-input{margin-top:0.25rem;}
.form-box .form-check .form-check-label{}

.form-box .form-select{width:100%; height:42px; display:inline-block; border:1px solid #DBE0E5; border-radius:8px;}

.form-box textarea{width:100%; min-height:120px; display:inline-block; border:1px solid #DBE0E5; border-radius:8px;}


.upload-box{display:flex; gap:8px;}
.upload-box input{}
.upload-box .upload-box-img{flex:1 0 42px; max-height:42px; border:1px solid #eee; border-radius:8px; position:relative;}
.upload-box .upload-box-img img{height:100%; display:block; border-radius:8px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); overflow:hidden;}
.upload-box .upload-box-img a{display:block; font-size:14px; line-height:1; color:#333; position:absolute; top:0; right:0;}


/* PAGINATION */
.pagination{display:inline-flex; border:1px solid #e5e5e5; border-width:1px 0 0 1px; margin:32px auto 0;}
.pagination > *{border:1px solid #e5e5e5; border-width:0 1px 1px 0;}
.pagination .page-move{width:32px; height:32px; display:flex; justify-content:center; align-items:center;}
.pagination .page-move i{font-size:11px;}
.pagination .page{display:flex;}
.pagination .page a{width:32px; display:flex; justify-content:center; align-items:center; font-size:12px; color:#888;}
.pagination .page a + a{border-left:1px solid #e5e5e5;}
.pagination .page a.on{height:calc(100% + 2px); color:#276EF1; border:1px solid #276EF1; position:relative; top:-1px; left:0;}
.pagination a:hover{font-weight:500; color:#276EF1;}


/* COUNT */
.item-count{position:relative; display:inline-block; padding:0 36px; border:1px solid #e5e5e5; border-radius:8px; text-align:center;}
.item-count .input-num{width:44px; height:34px; font-size:15px; color:#333; 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;}