@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.doc-tit {position:relative; margin-bottom:var(--space-30); padding-left:26px; font-weight:600; font-size: var(--font-size-28); color: var(--color-dark); line-height:1em;} 
.doc-tit:before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; background-color: var(--color-secondary);} 

.doc-cnt {padding-bottom:var(--space-160);} 
.doc-cnt:last-child {padding-bottom:0;} 

.mb120 {margin-bottom:var(--space-120) !important;} 

.pt0 {padding-top:0 !important;} 
.pb0 {padding-bottom:0 !important;} 

.txt-primary {color: var(--color-primary) !important;} 
.txt-second {color: var(--color-secondary) !important;} 

.txt-grey {color: #888888 !important;} 
.txt-wht {color: #fff !important;} 

.bg-grey {background-color: #f9f9f9;} 

.flex-wrap {display:flex;} 
.flex-wrap .flex {flex: 1 1 auto; width:1%; min-width:0;} 

.dot-list > li {position:relative; padding-left:10px;} 
.dot-list > li:before {content:"·"; position:absolute; top:-2px; left:0;} 
.dot-list > li strong {font-weight:600;} 

/* subtap */
.subtap-wrap .subtap {margin-bottom: var(--space-80);} 
.subtap-wrap .subtap ul {display:flex; flex-wrap:wrap; justify-content: center; gap: var(--space-20);} 
.subtap-wrap .subtap ul li {flex:1; width: 100%; max-width: 180px;} 
.subtap-wrap .subtap ul li a {border:1px solid #ddd; border-radius:50vh; display:block; text-align:center; font-size:var(--font-size-18); font-weight:500; line-height:50px;} 
.subtap-wrap .subtap ul li:hover a , 
.subtap-wrap .subtap ul li.active a {background: var(--color-primary); color: #fff;} 

/* 브랜드정보 */
.partner-list ul li {display:flex; align-items: center; margin-bottom:var(--space-20); padding:var(--space-25) var(--space-30); border-radius: 8px; border: 1px solid #ddd;} 
.partner-list ul li:last-child {margin-bottom:0;} 
.partner-list .logo {width:13.5%;} 
.partner-list .tit {width:18.333%; font-weight:600; font-size: var(--font-size-22); color: var(--color-dark); letter-spacing: -0.025em; padding:0 var(--space-60);} 
.partner-list .txt {flex: 1 1 auto; min-width:0; width:1%; padding:0 var(--space-40);} 

.btn-catalog {display:flex; justify-content: center; align-items: center; width: var(--width-140-100); height: clamp(34px, calc( 50 / var(--inner) * 100vw ), 50px ); color: #fff; font-weight:600; border-radius: 8px; background-color: rgb(55, 90, 255);} 
.btn-catalog img {display:inline-block; margin-left:var(--space-20); height:clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px );} 

.reference-wrap {position:relative; height:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px ); margin-bottom:var(--space-60);} 
.reference-wrap p {position: absolute; left:0; bottom:0; font-size: var(--font-size-14); letter-spacing: -0.03em; color: #878787; line-height:1.57em;} 
.reference-wrap p img {display:inline-block; margin-right:7px;} 

.btn-down {position: absolute; top:0; left:50%; transform: translateX(-50%); display:flex; justify-content: center; align-items: center; width:clamp(130px, calc( 200 / var(--inner) * 100vw ), 200px );   height:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px ); font-weight:600; font-size: clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px );; letter-spacing: -0.03em; color: var(--color-primary); border: 1px solid var(--color-primary);} 
.btn-down img {margin-left:11px;  height:clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px );} 

/* 적용사례 */
.ex-wrap {display:flex; align-items: center;} 
.ex-wrap .ex-slide {width:40%;} 

.swiper-slide {border: 1px solid #ddd;} 

.exSwiper {position:relative; padding-bottom:20px;} 
.swiper-pagination-bullet {bottom:-20px; width: var(--space-100); height: 4px; opacity: 1; background: #cdcdcd; border-radius: 0;} 
.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, 
.swiper-pagination-fraction {top: auto; bottom: -8px;} 
.swiper-pagination-bullet-active {background: var(--color-primary);} 

.swiper-button-lock {display: block;} 
.swiper-button-next, 
.swiper-button-prev {position: absolute; width: 15px; height: 25px; color: #242424;} 
.swiper-button-next:after, 
.swiper-button-prev:after {font-size: 25px; color: #242424; font-weight: 600;} 
.swiper-button-next {right: var(--space-25);} 
.swiper-button-prev {left: var(--space-25);} 

.ex-wrap .info {width:60%; padding-left:var(--space-60);} 
.ex-wrap .info .tit {font-weight:600; font-size: var(--font-size-24); line-height:1em; letter-spacing: -0.025em; color: var(--color-primary);} 
.ex-wrap .info .desc {margin-top:var(--space-20); font-size: var(--font-size-18); letter-spacing: -0.025em; line-height:1.56em;} 

figure figcaption {margin-bottom:var(--space-30); text-align:center; font-weight:600; font-size: var(--font-size-28); color: var(--color-dark); letter-spacing: -0.025em; line-height:1.68em;}