@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 .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}

.bg-gray {background:#F9F9F9;}

.tabwrap {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tablist {display: flex; gap: clamp(6px, calc( 18 / var(--inner) * 100vw ), 18px); overflow-x: auto;}
.tabitem .link {display: inline-flex; align-items: center;justify-content: center; padding: 0 clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); height: clamp(38px, calc( 45 / var(--inner) * 100vw ), 45px); font-weight: 600; color:var(--color-body); background: #F0F0F0; border-radius: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.tabitem.active .link {color: #fff; background: var(--color-primary);}
.tabitem:hover .link {color: #fff; background: var(--color-primary);}

/* 견적설치비 팝업 */
.blocker {z-index: 1000 !important;}
.modal {padding:clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px) 0; max-width: 1400px;width: 100%; border-radius: 0;}
.modal-content .contain {max-width: 1300px !important;}
.modal-content .toptext .title {font-size:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); font-weight: bold; line-height: 1.2;}
.modal-content .toptext .desc {margin-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); padding:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); line-height:1.625; background: #F9F9F9; color:var(--color-body);}
.popsection {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.popsection .intitle {margin-bottom: clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: 600; color: var(--color-body); line-height: 1;}
.modal-content .flxWrap {align-items: center;}
.popsection .dec {font-size: 15px; color:var(--color-body);}
.popsec1 .imgbx {flex: 1 0 26%; max-width: 26%; margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.popsec1 .images {position:relative; padding-bottom:100%; overflow:hidden;}
.popsec1 .images img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:100% !important; height:auto !important; max-width:100%; max-height:100%; object-fit:cover;}
.popsec1 .textbx {flex: 1 0 auto; width: 1%;}
.popsec1 .cate {display: block; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-primary); line-height: 1;}
.popsec1 .tit {margin-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600;}
.popsec1 .selecbx {padding-top: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); max-width: 660px; width: 100%; }
.popsec2 .radioitem + .radioitem {margin-top: clamp(20px, calc( 25 / var(--inner) * 100vw ), 25px) ;}
.popsec2 .radioitem {display: flex; flex-wrap: wrap;}
.popsec2 .radioitem .name {flex: 1 0 clamp(130px, calc( 145 / var(--inner) * 100vw ), 145px); max-width: clamp(130px, calc( 145 / var(--inner) * 100vw ), 145px); font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px); font-weight: 600;} 
.popsec2 .radioitem .btnbx {flex: 1 0 auto; width: 1%;}
.popsec2 .radioflx {display: flex; flex-wrap: wrap; gap:10px clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.popsec2 .radioflx .item { font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);}
.popsec2 .notice {margin-top: 15px; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #FD8239;}
.inputbx + .dec {padding-top:10px;}
.modal-content .bg-gray {margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); padding: clamp(25px, calc( 60 / var(--inner) * 100vw ), 60px)  0;}
.modal-content .bg-gray .leftbx {flex: 1 0 44%; max-width: 44%; padding: 0 15px; font-size: clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight: bold; color: var(--color-body);text-align: center;}
.modal-content .bg-gray .leftbx .txt1 {display: inline-block; padding-right:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.modal-content .bg-gray .rightbx {flex: 1 0 auto; width: 1%;color: var(--color-body); line-height:1.625;}
.sec5fix .item + .item {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.modal-content .buttons .btn-pack {font-size:clamp(14px, calc( 24 / var(--inner) * 100vw ), 24px) !important; height: clamp(40px, calc( 77 / var(--inner) * 100vw ), 77px) !important; line-height: clamp(38px, calc( 75 / var(--inner) * 100vw ), 75px) !important; min-width: 100% !important; border-color: var(--color-primary) !important; background: #fff !important; color: var(--color-primary) !important; }

/* 설치비 자동 계산 서비스 */
.modal-calculate {padding:clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px) clamp(16px, calc(80 / var(--inner) * 100vw ), 80px); max-width:900px; width:100%; border-radius:0;}
.calculate-heading {text-align:center; margin-bottom:clamp(30px, calc(60 / var(--inner) * 100vw ), 60px);}
.calculate-heading h2 {margin-bottom:clamp(15px, calc(30 / var(--inner) * 100vw ), 30px); font-size:clamp(20px, calc(42 / var(--inner) * 100vw ), 42px);  line-height: 1.3; letter-spacing: -0.03em;}
.calculate-heading .box {padding:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(13px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height: 1.55; background: #F9F9F9;}
.calculate-content:after {content:''; display:block; border-bottom:1px solid #ddd; margin:clamp(30px, calc(60 / var(--inner) * 100vw ), 60px) 0;}
.calculate-content:last-child:after {display: none;}
.calculate-title {position:relative; margin-bottom:clamp(15px, calc(30 / var(--inner) * 100vw ), 30px); padding-left:12px; font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); color: var(--color-body); letter-spacing: -0.03em; font-weight:600; line-height: 1;}
.calculate-title:before {content:''; position:absolute; top:0; left:0; width:clamp(2px, calc(4 / var(--inner) * 100vw ), 4px); height:100%; background: var(--color-primary);}
.calculate-brand {display:flex; border:1px solid #ddd; border-radius:100px; padding:5px; gap:2px;}
.calculate-brand .calculate-checkbox {flex:1;}
.calculate-brand .calculate-checkbox input {display: none;}
.calculate-brand .calculate-checkbox label {display: block; width:100%; height:100%; padding:.8em; cursor:pointer; text-align:center; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color:#666; font-weight: 500; line-height:1.3; background: #fff; border-radius:100px; transition:all .3s;}
.calculate-brand .calculate-checkbox input:checked + label {background: var(--color-primary); color: #fff;}
.calculate-items {display:grid; grid-template-columns:repeat(2, 1fr); gap:40px 20px;}
.calculate-item.wide {grid-column: 1 / -1;}
.calculate-item .calculate-label {margin-bottom:clamp(6px, calc(10 / var(--inner) * 100vw ), 10px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-body); line-height:1.3;}
.calculate-item .input {display:block; width:100%; height:clamp(40px, calc(56 / var(--inner) * 100vw ), 56px); padding:clamp(4px, calc(12 / var(--inner) * 100vw ), 12px) clamp(10px, calc(20 / var(--inner) * 100vw ), 20px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 17px); color:#777; line-height:1.5;}
.calculate-item textarea.input {height:clamp(90px, calc(230 / var(--inner) * 100vw ), 230px);}
.calculate-item .input-box {position:relative;}
.calculate-item .input-box .input { padding-right:3em;}
.calculate-item .input-box span {position:absolute; top:50%; right:clamp(10px, calc(20 / var(--inner) * 100vw ), 20px); -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color:#777; line-height: 1;}
.calculate-item .input-group {display:flex; gap:10px;}
.calculate-item .input-group .input {flex: 1 0 auto; width: 1%;}
.calculate-item .input-group .btn-pack.medium {min-width:90px; height:clamp(40px, calc(56 / var(--inner) * 100vw ), 56px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); display:flex; align-items: center; justify-content: center; line-height:1.3;}
.calculate-item .select-options {display:flex; flex-wrap: wrap; gap:5px; margin-top:clamp(8px, calc(12 / var(--inner) * 100vw ), 12px);}
.calculate-item .select-option {display:flex; align-items: center; gap:8px; background:#EAF7FC; padding:clamp(6px, calc(10 / var(--inner) * 100vw ), 10px) clamp(10px, calc(20 / var(--inner) * 100vw ), 20px); border-radius:100px;}
.calculate-item .select-option .option-name {font-size:clamp(13px, calc( 16 / var(--inner) * 100vw ), 16px); color:var(--color-primary); line-height:1.3;}
.calculate-item .select-option .option-delete {position:relative; width:14px; height:14px; background:none; border:0;}
.calculate-item .select-option .option-delete:before,
.calculate-item .select-option .option-delete:after { content:" "; position:absolute; top:6px; left:0; width:100%; height:2px; background:#454545; } 
.calculate-item .select-option .option-delete:before { transform:rotate(45deg); } 
.calculate-item .select-option .option-delete:after { transform:rotate(-45deg); } 
.calculate-note {margin-bottom:clamp(8px, calc(15 / var(--inner) * 100vw ), 15px); color: var(--color-body); line-height:1.55;}
.calculate-result {display:flex; flex-direction: column; color:#777; font-size:14px; line-height:1.3; padding:19px; border: 1px solid #DDD; background: #F9F9F9;}
.calculate-result dl {display:flex; justify-content:space-between; border-bottom:1px solid #ddd; padding:clamp(8px, calc(12 / var(--inner) * 100vw ), 12px) 0;}
.calculate-result dl.total {font-size:18px; font-weight: 600; color: var(--color-primary); border-bottom:0;}
.calculate-submit .btn-pack {display:block; width:100%;}


/* 고객지원 */
.board-form .radiolist {display: flex; flex-wrap: wrap; gap: 0 40px;}
.board-form .radiolist .item {display: flex; align-items: center; height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}