@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"위노베이트"; font-size:12px; line-height:15px;}

.bullet-item {margin-bottom: var(--padding-40);}
.bullet-item .bullet-list {position:relative; padding-left:13px; margin-top:var(--padding-30);  font-size: var(--font-size-18); font-weight: 500;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left: 0; top: clamp(7px, calc( 10 / var(--inner) * 100vw ), 10px); width: clamp(3px, calc( 4 / var(--inner) * 100vw ), 4px); height: clamp(3px, calc( 4 / var(--inner) * 100vw ), 4px); background: var(--color-secondary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}
.bulletitem2 { padding-left: 0.7em; text-indent: -0.7em;}

.bg-gray {background:#F8F8F8;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 100  / var(--inner) * 100vw ), 100px) 0;}
.subsec-pdt {padding-top: clamp(40px, calc( 85  / var(--inner) * 100vw ), 85px);}

.radiobx {display: flex; flex-wrap: wrap;}
.radiobx .item {display: flex;align-items: center; min-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.radiobx .item:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}

.subsectitle {display: inline-block; padding-bottom: var(--padding-25); position: relative; font-size: var(--font-size-40); font-weight: bold;}
.subsectitle::after {content: ''; position: absolute; bottom: 0; left: 0; width: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); height: 2px; background: var(--color-secondary);}
.mb-40 {margin-bottom: var(--padding-40);}
.bullet-txt {margin-bottom: var(--padding-30); padding-left: 13px; position: relative; font-size: var(--font-size-18); font-weight: 500;}
.bullet-txt::before {content: ''; position: absolute; left: 0; top: clamp(7px, calc( 10 / var(--inner) * 100vw ), 10px); width: clamp(3px, calc( 4 / var(--inner) * 100vw ), 4px); height: clamp(3px, calc( 4 / var(--inner) * 100vw ), 4px); background: var(--color-secondary); border-radius: 50%;}

.secflx-wrap {display: flex;flex-direction: column;gap: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.secflx-item {display: flex;flex-wrap: wrap; gap: 30px;}
.secflx-item .titlebx {flex: 1 0 clamp(140px, calc( 195 / var(--inner) * 100vw ), 195px); max-width: clamp(140px, calc( 195 / var(--inner) * 100vw ), 195px);}
.secflx-item .slidebx {flex: 1 0 auto; width: 1%; }
.secflx-item .slidecont {position: relative;  }
.secflx-item .slidecont-inner {padding: var(--padding-30); background: #FAFAFA; border-radius: 24px; overflow: hidden;box-shadow: 0 0 clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px) 0 rgba(0, 0, 0, 0.10);}
.secflx-item .slidecont .swiper {overflow: visible;}
.slidecont .swiper-slide {padding: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.slidecont .ginner {display: block; padding:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); position: relative; background: #fff; border-radius:24px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10); letter-spacing: -0.7px;} 
.slidecont .ginner:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:0 solid var(--color-secondary); border-radius:24px; }
.slidecont .ginner .recommend {position: absolute; top: var(--padding-20); right: var(--padding-15); width: clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px); height: auto;}
.slidecont .mbps {display: flex;gap: 10px; align-items: baseline; line-height: 1;}
.slidecont .mbps .num {font-size: var(--font-size-40); font-weight: 800; color: var(--color-secondary);}
.slidecont .mbps .dec {font-size: var(--font-size-24); font-weight: 600; }
.slidecont .textbx {margin:var(--padding-20) 0 var(--padding-50);}
.slidecont .textbx .txt1 {font-size: var(--font-size-20); font-weight: 500; color: var(--color-body); line-height: 1.4;}
.slidecont .textbx .txt2 {margin-top: 6px; font-size: var(--font-size-16); font-weight: 600; color: #686868; line-height: 1.5; font-weight: 400;}
.slidecont .price {font-size: var(--font-size-22); font-weight: 600; color: var(--color-secondary); line-height: 1.27;}
.slidecont .ginner.active:after {border-width: 3px;}
.slidecont .btn-arrow {width: 40px; height: 40px; margin-top: 0; top: 50%; transform: translateY(-50%);}
.slidecont .btn-arrow:after {display: none;}
.slidecont .btn-arrow svg {color: #000;}
.slidecont .swiper-button-prev {left: -50px;}
.slidecont .swiper-button-next {right: -50px;}
.slidecont .swiper-button-disabled {display: none !important;}

.checklabelbx {margin-top:var(--padding-45);}
.checklabelbx .check-wrap {display:flex; flex-wrap:wrap; gap:var(--padding-40); }
.checklabelbx .checkbox-item {display:flex; align-items:center; gap:10px; position:relative;}
.checklabelbx .checkbox-item-router {position: relative;}
.checklabelbx .checkbox-item-router .router-label {position: absolute; top: -30px; left: 50%; transform: translateX(-50%); display:inline-block; padding:4px clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); background:#E8EDFF; border-radius:4px; font-size:var(--font-size-12); font-weight:500; color:var(--color-secondary); white-space: nowrap;}
.checklabelbx .checkbox-item-router .router-label::before {content:''; position:absolute; top:100%; left:10px;  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #E8EDFF;}
.checklabelbx .checkbox-item-router .checkbox-input {position:absolute; width:0; height:0; opacity:0; z-index:-1;}
.checklabelbx .checkbox-item-router .checkbox-label {display:flex; align-items:center; position:relative; padding-left:clamp(24px, calc( 28 / var(--inner) * 100vw ), 28px); font-size:var(--font-size-16); font-weight:500; color:var(--color-dark); cursor:pointer;}
.checklabelbx .checkbox-input {position:absolute; width:0; height:0; opacity:0; z-index:-1;}
.checklabelbx .checkbox-label {display:flex; align-items:center; position:relative; padding-left:clamp(24px, calc( 28 / var(--inner) * 100vw ), 28px); font-size:var(--font-size-16); font-weight:500; color:var(--color-dark); cursor:pointer;}
.checklabelbx .checkbox-label::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:clamp(18px, calc( 20 / var(--inner) * 100vw ), 20px); height:clamp(18px, calc( 20 / var(--inner) * 100vw ), 20px); background-color:#fff; border:2px solid #ddd; border-radius:4px; transition:all 0.2s;}
.checklabelbx .checkbox-input:checked + .checkbox-label::before {background-color:var(--color-secondary); border-color:var(--color-secondary); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:12px;}
.checklabelbx .checkbox-item-router2 {display:none;}

/* 툴팁 공통 */
.tooltip-btn {display:flex; align-items:center; justify-content:center; position: relative; flex: 1 0 clamp(18px, calc( 20 / var(--inner) * 100vw ), 20px); max-width:clamp(18px, calc( 20 / var(--inner) * 100vw ), 20px); width:clamp(18px, calc( 20 / var(--inner) * 100vw ), 20px); height:clamp(18px, calc( 20 / var(--inner) * 100vw ), 20px); padding:0; border:none; border-radius:50%; background:var(--color-secondary); color:#fff; cursor:pointer;  line-height: 1;}
.toolflx {display: flex;align-items: center;gap: 10px;}
.tooltip-content {display:none; position:absolute; top:100%; left:-18px; margin-top:10px; padding:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px) clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); min-width:clamp(180px, calc( 260 / var(--inner) * 100vw ), 260px); background:var(--color-secondary); border-radius:var(--border-radius-10); font-size:var(--font-size-12); line-height:1.5; color:#fff; z-index:10; box-shadow:0 4px 12px rgba(0,0,0,0.15); text-align: left;}
.tooltip-content::before {content:''; position:absolute; bottom:100%; left:clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--color-secondary);}
.tooltip-btn.active .tooltip-content {display:block;}
.toolflx.ty2 .tooltip-content {left: initial; right: -18px;}
.toolflx.ty2 .tooltip-content::before {left: initial; right: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px);}

.total-item {display:none; padding: var(--padding-55) var(--padding-20); border-radius:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); text-align: center; background: var(--color-secondary); color: #fff;}
.total-item.active {display:block;}
.total-item .total-txt1 {font-size: var(--font-size-36); font-weight: 500;  }
.total-item .notice {padding-top: var(--padding-20); font-size: var(--font-size-16);color: rgba(255, 255, 255, 0.60);}

.subsec1_2 {background: url(../images/sub/subsec1_2-bg.png) no-repeat center center / cover; text-align: center; color: #ffff;}
.bgtext .txt1 {font-size:var(--font-size-48); font-weight: 700; }
.bgtext .txt2 {padding-top: var(--padding-25); font-size: var(--font-size-18); }

.info-card .info-card-link {display:flex; align-items: center; gap:var(--padding-40); position: relative; border-radius:16px; border: 1px solid #ddd; overflow: hidden;}
.info-card-image {position: absolute; left: 0; top: 0; width:clamp(200px, calc( 300 / var(--inner) * 100vw ), 300px); height:100%;}
.info-card-image img {width:100%; height:100%; object-fit:cover;}
.info-card-content {flex:1; padding:var(--padding-40) 0; margin-left: clamp(220px, calc( 340 / var(--inner) * 100vw ), 340px); padding-right: 20px;}
.info-card-title {font-size:var(--font-size-24); font-weight:700; color:var(--color-dark);}
.info-card-text {margin-top: var(--padding-20); font-size:var(--font-size-16); line-height:1.6; color:var(--color-body); line-height: 1.5; max-height: clamp(65px, calc( 72 / var(--inner) * 100vw ), 72px); overflow-y: auto;}

.combinationbx {padding: var(--padding-40) 10px; border: 1px solid #ddd;border-radius: 16px;}
.combinationbx .tblscroll {max-width: 1050px; width: 100%; margin: 0 auto; overflow-x: auto;}
.combination-table + .combination-table {margin-top: var(--padding-40);}
.combination-table {border-collapse:separate; table-layout:fixed; width:100%;}
.combination-table td {border: 5px solid #fff;  font-size: var(--font-size-20); font-weight: 500; text-align: center; border-radius: 8px; letter-spacing: -0.8px; }
.combination-table .commpd {padding:var(--padding-25) var(--padding-15); border-radius: 8px;}
.combination-table td .under {display: inline-block; padding-bottom: 2px; border-bottom: 1px solid var(--color-secondary);}
.combination-table .flow-box-primary {background:var(--color-secondary); color:#fff; font-weight: bold;}
.combination-table .flow-box-secondary {display: block;  position: relative; background:rgba(23, 66, 255, 0.03); color:var(--color-secondary); }
.combination-table .flow-box-border {background:#fff; color:var(--color-secondary); border:1px solid #ddd; border-radius: 8px;}


.discount-table {border-top: 1px solid #242424; border-bottom: 1px solid #242424;}
.discount-table th,
.discount-table td { padding: var(--padding-20) var(--padding-15); text-align: center;}
.discount-table thead th { font-size: var(--font-size-18); font-weight: 500;  border-right: 1px solid #ddd; border-bottom: 1px solid #242424;}
.discount-table thead th:last-child {border-right: 0;}
.discount-table tbody td {background: #fff; font-size: var(--font-size-16); text-align: center; border-top: 1px solid #ddd; border-right: 1px solid #ddd;}
.discount-table tbody td:last-child {border-right: 0;}
.discount-table tbody tr:first-child td {border-top: 0;}
.discount-table tbody td a {color: var(--color-secondary); text-decoration: underline; font-weight: 500;}
.discount-table .bg1 {background: rgba(23, 66, 255, 0.03) !important;}
.discount-table .bg2 {background: #f8f8f8 !important;}
.discount-table .toolflx {justify-content: center;}
.discount-table-wrap.ty2 thead th {background: rgba(23, 66, 255, 0.02);}

.has-link {display: inline-block; text-decoration: underline; font-weight: 500; color: var(--color-secondary);}
.discount-table-wrap + .bullet-item {margin-top: var(--padding-30);}
.info-card + .bullet-item {margin-top: var(--padding-40);}

.subsec1_5 {background: url(../images/sub/subsec1_5-bg.jpg) no-repeat center center / cover; text-align: center; color: #ffff;}
.subsec1_5 .inquirybx {margin-top: var(--padding-40);}
.subsec1_5 .btn-pack {display: inline-flex;align-items: center;gap: var(--padding-15); padding: 0 25px !important; font-size: var(--font-size-18) !important; color: #fff !important; border-color: #fff !important; background: transparent !important; } 
.subsec1_5 .btn-pack:hover {border-color: var(--color-secondary) !important; background: var(--color-secondary) !important; color: #fff !important;}