@charset "utf-8";

/* 비쥬얼 */
.visual-main{overflow:hidden; }
.visual-main__list{position:relative;}
.visual-main .box{ display:block; }
.visual-main img{ width: 100%; }
.visual-main .swiper_page{ position:absolute; left:11.45833333%; bottom:11.5%; display:flex; align-items:center; gap:10px; z-index:1;}
.visual-main .swiper_page .swiper-pagination-bullet{ margin: 0; width:8px; height:8px; border-radius:50%; background:0; border: 1px solid #ffffff80; box-sizing: border-box; transition:background 0.5s ease; opacity:1;}
.visual-main .swiper_page .swiper-pagination-bullet-active{background:#fff;}

/* 공통 */
[data-main] h2{ font-family: var(--font-nexon); font-size:clamp(30px, calc( 36 / var(--inr) * 100vw ), 36px); }
/* 슬라이드 컨트롤 */
[data-main] .swiper-control{ display: flex; gap: 10px; }
[data-main] .swiper-control .swiper_page{display:flex; justify-content:center; align-items:center; width:auto; margin-top:35px;}
[data-main] .swiper-pagination-bullet{opacity:1; width:14px; height:14px; box-sizing:border-box; background-color:#b5b5b5; border:1px solid #b5b5b5; border-radius:100%;}
[data-main] .swiper-pagination-bullet-active{background-color:#fff;}
[data-main] .swiper-control button{ width:52px; height:52px; background: #fff no-repeat 50% / 8px; border: 1px solid #e5e5e5; }
[data-main] .swiper-control button.swiper_prev{ background-image: url('/images/common/swiper-prev.svg');}
[data-main] .swiper-control button.swiper_next{ background-image: url('/images/common/swiper-next.svg');}
@media screen and (max-width:480px){
	[data-main] .swiper-control .swiper_page{margin-top:20px;}
	[data-main] .swiper-pagination-bullet{width:10px; height:10px;}
}

/* navigation */
.mNav{ padding: clamp(70px, calc( 100 / var(--inr) * 100vw ), 100px) 0 clamp(70px, calc( 95 / var(--inr) * 100vw ), 95px); text-align: center; font-size: clamp(14px, calc( 18 / var(--inr) * 100vw ), 18px); font-weight: 500; }
.mNav .inr{ display: grid; gap: 3em 0; }
.mNav a{ display: block; }
.mNav .icon{ --iconSize: clamp(70px, calc( 126 / var(--inr) * 100vw ), 126px); position: relative; margin: 0 auto clamp(12px, calc( 20 / var(--inr) * 100vw ), 20px); display: block; width: var(--iconSize); height: var(--iconSize); background: no-repeat 50% / cover; border-radius: 50%; box-sizing: border-box; }
.mNav .i1{ background-image: url('/images/main/mNav-1.png'); }
.mNav .i2{ background-image: url('/images/main/mNav-2.png'); }
.mNav .i3{ background-image: url('/images/main/mNav-3.png'); }
.mNav .i4{ background-image: url('/images/main/mNav-4.png'); }
.mNav .i5{ background-image: url('/images/main/mNav-5.png'); }
.mNav .i6{ background-image: url('/images/main/mNav-6.png'); }
.mNav .i7{ background-image: url('/images/main/mNav-7.png'); }
.mNav .i8{ background-image: url('/images/main/mNav-8.png'); }
@media(hover:hover){
	.mNav a:hover .icon::before{ content: ''; position: absolute; inset: 0; border: 0.33333333em solid var(--primary); border-radius: inherit; }
}
@media(min-width:1280px){
	.mNav .inr{ display: flex; justify-content: space-between; }
}
@media(max-width:1279px) and (min-width:768px){
	.mNav .inr{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:767px){
	.mNav .inr{ grid-template-columns: repeat(4, 1fr); max-width: max(360px, 80%); }
}

/* best */
.mBest{ padding: clamp(70px, calc( 120 / var(--inr) * 100vw ), 120px) 0 70px; background: linear-gradient(180deg, #f7f7f7 49.71751412%, #0000 49.71751412%); }
.mBest .inr{ display: flex; flex-wrap: wrap; display: grid; grid-template-columns: 1fr auto; gap: 39px; }
.mBest h2{ flex: 1; }
.mBest .swiper-control{ justify-self: end; }
.mBest .swiper{ grid-column: 1 / 3; width: 100%; }
.mBest .swiper-scroll{ grid-column: 1 / 3; margin-top: 38px; height: 2px; background: #e5e5e5; }
.mBest .swiper-scrollbar-drag{ background: #202020; border-radius: 0; }

/* new */
.mNew{ padding: 70px 0 0; }
.mNew ul{ margin-top: 39px; }

/* customer */
.mCustomer{ margin-top: clamp(60px, calc( 98 / var(--inr) * 100vw ), 98px); border-top: 1px solid #eaeaea; padding-top: clamp(60px, calc( 95 / var(--inr) * 100vw ), 95px); display: grid; gap: 60px clamp(20px, calc( 74 / var(--inr) * 100vw ), 74px); }
.mCustomer section{ display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 23px; }
.mCustomer h2{ font-size: clamp(20px, calc( 26 / var(--inr) * 100vw ), 26px); }
.mCustomer .more{ position: relative; top: 2px; font-family: var(--font-nexon); font-weight: 700; color: #777; }
.mCustomer ul{ grid-area: 2 / 1 / 3 / 3; }
.mCustomer .date{ font-size: 0.83333333em; }
.mCustomer .head{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; }
.mCustomer .body{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }
@media(min-width:1280px){
	.mCustomer{ grid-template-columns: 728fr 678fr; align-items: start; }
}

/* notice */
.mNotice{ display: grid; gap: 24px; font-size: 18px; letter-spacing: 0; }
.mNotice *{ letter-spacing: inherit; }
.mNotice a{ display: block; padding: 12% 14% 18%; border: 1px solid #e5e5e5; box-sizing: border-box; }
.mNotice .date{ font-weight: 600; color: #101010; }
.mNotice .head{ margin: 36px 0 14px; color: #202020; }
.mNotice .body{ font-size: 0.83333333em; line-height: 1.66666667; color: #999; }
@media(hover:hover){
	.mNotice a:hover{ background: var(--primary); border-color: #0064ff; color: #fff; }
	.mNotice a:hover *{ color: inherit; }
}
@media(min-width:768px){
	.mNotice{ grid-template-columns: 1fr 1fr; }
}

/* faq */
.mFaq{ display: grid; gap: 1.16666667em; background: #f9f9f9; padding: 6.6% 5.6% 6.6% 7.1%; border: 1px solid #e5e5e5; font-size: clamp(16px, calc( 18 / var(--inr) * 100vw ), 18px); font-weight: 500; color: #101010; }
.mFaq a{ display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2ch; }
.mFaq .head::before{ content: '·'; margin-right: 1.3ch; color: #999; }
.mFaq .date{ letter-spacing: 0; color: #999; }
@media(hover:hover){
	.mFaq a:hover .head{ color: var(--primary); }
}
@media(max-width:767px){
	.mFaq .date{ display: none; }
}

/* inquiry */
.mInquiry{ margin-top: clamp(70px, calc( 130 / var(--inr) * 100vw ), 130px); padding: clamp(70px, calc( 96 / var(--inr) * 100vw ), 96px) 0 clamp(70px, calc( 100 / var(--inr) * 100vw ), 100px); background: #2e2e2e url('/images/main/mInquiry-bg.jpg') no-repeat 50% / cover; font-size: clamp(14px, calc( 18 / var(--inr) * 100vw ), 18px); }
.mInquiry .inr{ display: grid; gap: 50px 5%; }
.mInquiry .info{ line-height: 1.77777778; color: #fff; }
.mInquiry .wrapTitle{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px; } 
.mInquiry .subTitle{ color: #d6d6d6; }
.mInquiry [href^="tel:"]{ margin-bottom: 0.41666667em; display: inline-block; font-size: clamp(30px, calc( 36 / var(--inr) * 100vw ), 36px); font-weight: 700; letter-spacing: 0; }
.mInquiry .location{ margin-top: 1.77777778em; display: flex; align-items: center; justify-content: space-between; max-width: 394px; height: 4.11111111em; padding: 1em 2.7777777em; background: color-mix(in srgb, currentColor 5%, #0000); border: 1px solid color-mix(in srgb, currentColor 32%, #0000); box-sizing: border-box; font-weight: 500; letter-spacing: .025em; }
.mInquiry .location::after{ content: ''; display: block; width: 0.38888889em; height: 0.38888889em; border: solid currentColor; border-width: 1px 1px 0 0; transform: translateX(-1px) rotate(45deg); }
.mInquiry form{ display: grid; align-items: start; padding: 65px 9.5% 70px 8.4%; background: #fff; }
.mInquiry .item{ display: grid; align-items: baseline; gap: 0.11111111em 0; padding-bottom: 0.55555556em; border-bottom: 1px solid #e4e4e4; }
.mInquiry label{ font-weight: 600; color: #000; }
.mInquiry label:has(+[required])::after{ content: '*'; position: relative; top: -0.16666667em; left: 0.11111111em; color: #f00; }
.mInquiry :is([type="text"], [type="file"], textarea){ padding-inline: 0; border-color: #0000; }
.mInquiry :is([type="file"]){height:auto;}
.mInquiry *::placeholder{ color: #b8b8b8; }
.mInquiry textarea{ height: 4.22222222em; }
.mInquiry .bottom{ display: flex; flex-wrap: wrap; align-items: center; gap: 2em 0.88888889em; }
.mInquiry .bottom [type="checkbox"]{ width: 1.05555556em; height: 1.05555556em; }
.mInquiry [type="submit"]{ display: flex; align-items: center; justify-content: center; width: 100%; height: 4.11111111em; background: #000; color: #fff; }
@media(min-width:768px){
	.mInquiry form{ grid-template: 72px 72px 72px 72px 72px 110px 72px/ 9.85fr 11fr }
	.mInquiry :where(.item:not(:nth-child(1), :nth-child(2)), .bottom){ grid-column: 1 / 3; }
	.mInquiry .item:has([type="text"], [type="file"], textarea){ grid-template-columns: 11ch 1fr; }
	.mInquiry .bottom{ margin-top: 1.22222222em; }
}
@media(min-width:1280px){
	.mInquiry .inr{ grid-template-columns: 466fr 940fr; }
	.mInquiry .wrapTitle{ margin: 55px 0 165px; white-space: nowrap; }
	.mInquiry .subTitle{ position: relative; top: 0.11111111em; }
}
@media(max-width:767px){
	.mInquiry form{ gap: 20px; }
}

/* distributor */
.mDistributor{ contain: content; }
.mDistributor .inr{ display: grid; gap: 20px 0; padding: clamp(40px, calc( 74 / var(--inr) * 100vw ), 74px) 0 clamp(34px, calc( 64 / var(--inr) * 100vw ), 64px); }
.mDistributor h2{ font-size: clamp(20px, calc( 26 / var(--inr) * 100vw ), 26px); }
.mDistributor .swiper-slide{ display: flex; align-items: center; width: auto; }
@media(min-width:768px){
	.mDistributor .inr{ grid-template-columns: 13.6ch 1fr; }
}