@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !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;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pdt {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.subsec-tit {margin-bottom: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}

.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);}

.slidecontnon.border-top {padding-top:20px; border-top: 2px solid var(--color-primary);}

.sub1_2_1 .flxWrap {margin:clamp(-20px, calc( -20 / var(--inner) * 100vw ), -6px);}
.sub1_2_1 .commbx {flex: 1 0 50%; max-width: 50%; padding:clamp(6px, calc( 20 / var(--inner) * 100vw ), 20px); letter-spacing: -0.5px;}
.sub1_2_1 .commbx .inner {display: flex; justify-content: center; position: relative; padding:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius: 24px;box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08); height: 100%;}
.sub1_2_1 .commbx:first-child .inner {padding-top: clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px);}
.sub1_2_1 .commbx .notice {position: absolute; left: clamp(12px, calc( 40 / var(--inner) * 100vw ), 40px); top: clamp(12px, calc( 40 / var(--inner) * 100vw ), 40px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; line-height: -0.5px; color: var(--color-primary);}
.sub1_2_1 .inwid {max-width: 520px; width: 100%; margin: 0 auto;}
.sub1_2_1 .commbx .title {margin-bottom: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; text-align: center;}
.sub1_2_1 .group + .group {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.sub1_2_1 .calcitem {display: flex; align-items: center; gap: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.sub1_2_1 .calcitem:not(:last-child) {margin-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.sub1_2_1 .calcitem .input {height: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}

.sub1_2_1 .namebx {flex: 0 0 clamp(110px, calc( 160 / var(--inner) * 100vw ), 160px); max-width: clamp(110px, calc( 160 / var(--inner) * 100vw ), 160px);}
.sub1_2_1 .nameflx {display: flex; align-items: center; gap:0  clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px);  padding:0 10px; height: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); border: 1px solid #ddd; border-radius:32px;}
.sub1_2_1 .nameflx .text {font-size: clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: var(--color-primary);}
.sub1_2_1 .widheight {display: inline-flex;align-items: center;justify-content: center;width:clamp(28px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(28px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(13px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; border-radius: 50%;} 
.sub1_2_1 .calcitem:nth-child(1) .widheight {background: #F5E1E2; color: var(--color-primary);}
.sub1_2_1 .calcitem:nth-child(2) .widheight {background: var(--color-primary); color: #fff;}

.sub1_2_1 .nameflx.ty2 {padding: 0 clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); gap: 0 clamp(6px, calc( 20 / var(--inner) * 100vw ), 20px);}
.sub1_2_1 .nameflx.ty2 svg {flex: 1 0 clamp(22px, calc( 32 / var(--inner) * 100vw ), 32px); max-width: clamp(22px, calc( 32 / var(--inner) * 100vw ), 32px); height: clamp(22px, calc( 32 / var(--inner) * 100vw ), 32px);}
.sub1_2_1 .nameflx.bg1 {background: #FBF5F5; border-color: #FBF5F5;}
.sub1_2_1 .nameflx.bg1 .text {color: var(--color-primary);}
.sub1_2_1 .nameflx.bg2 {background: var(--color-primary); border-color: var(--color-primary);}
.sub1_2_1 .nameflx.bg2 .text {color: #fff;}

.sub1_2_1 .inputbx {flex: 1 1 auto; min-width: 0; width: 1%;}
.sub1_2_1 .input-wrap {display: flex; align-items: center; border-bottom: 1px solid #ddd; height: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); max-width: 100%;}
.sub1_2_1 .input-field {flex: 1; min-width: 0; border: 0; background: transparent; font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); color:var(--color-body); font-weight: 600; outline: none; text-align: center;}
.sub1_2_1 .input-field::-webkit-inner-spin-button,
.sub1_2_1 .input-field::-webkit-outer-spin-button {-webkit-appearance: none; appearance: none; margin: 0;}
.sub1_2_1 .input-field[type=number] {-moz-appearance: textfield; appearance: textfield;}
.sub1_2_1 .unit {padding-left: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px); font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); color: #999; font-weight: 600;}
.sub1_2_1 .btn-calc {display: flex;align-items: center;justify-content: center; height: clamp(44px, calc( 60 / var(--inner) * 100vw ), 60px); width: 100%; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: var(--color-primary); font-weight: 600; border: 1px solid var(--color-primary); background: transparent; border-radius: 8px;}

.tblbix table {border-top: 2px solid #686868;}
.tblbix th,
.tblbix td {padding:clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px) 10px; text-align: center; letter-spacing: -0.5px; color: var(--color-body); border-bottom: 1px solid #ddd;}
.tblbix th:not(:last-child),
.tblbix td:not(:last-child) {border-right: 1px solid #ddd;}
.tblbix th {background: #FBF5F5; font-weight: 600; color: #222;}

.comtopbg {height: clamp(260px, calc( 500 / var(--inner) * 100vw ), 500px); max-width: 1920px; width: 100%; margin: 0 auto; text-align: center; color: #fff; letter-spacing: -0.5px;}
.comtopbg .contain {display: flex; align-items: center; justify-content: center; height: 100%;}
.comtopbg.bg1 {background: url(../images/sub/sub2_1-bg.jpg) no-repeat 50% 50% / cover;}
.comtopbg.bg2 {background: url(../images/sub/sub2_2-bg.jpg) no-repeat 50% 50% / cover;}

.comtopbg .title {display: inline-block; padding:0 clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px); position: relative; font-size: clamp(28px, calc( 56 / var(--inner) * 100vw ), 56px); font-weight: 600;} 
.comtopbg .title::after,
.comtopbg .title::before {content: ''; position: absolute; top: 0; width:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); height: clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px);}
.comtopbg .title::before {right: 0; background: url(../images/sub/quo2.png) no-repeat 0 0 / contain;}
.comtopbg .title::after {left: 0; background: url(../images/sub/quo1.png) no-repeat 0 0 / contain;}
.comtopbg .txt1 {padding-top: clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; line-height: 1.7;}
.comtopbg .txt2 {padding-top: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; line-height: 1.77;}
.comtopbg .txt3 {font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;  line-height: 1.43;}

.sub2_1 .cert-list {display: flex; gap: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); flex-wrap: wrap;}
.sub2_1 .cert-item {flex: 1 0 calc(33.333% - clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) * 2 / 3); display: flex; flex-direction: column; gap: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); padding: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); background: #fff; border-radius: 24px; box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);}
.sub2_1 .cert-icon {display: flex; align-items: center; justify-content: center; width: clamp(50px, calc( 88 / var(--inner) * 100vw ), 88px); height: clamp(50px, calc( 88 / var(--inner) * 100vw ), 88px);}
.sub2_1 .cert-icon img {width: 100%; height: 100%; object-fit: contain;}
.sub2_1 .cert-txt {display: flex; flex-direction: column; gap: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); }
.sub2_1 .cert-title {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; line-height: 1.58;}
.sub2_1 .cert-desc { font-weight: 400; color: var(--color-body); line-height: 1.875;}

.location-area {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.location-wrap {display: flex; gap: clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px); align-items: center; justify-content: space-between; flex-wrap: wrap;}
.location-txt {display: flex; flex-direction: column; gap: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);flex: 1 0 auto; width: 1%;}
.location-sub-title {display: flex; gap: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); padding-left: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); align-items: center;}
.location-dot {display: block; width: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); height: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); background: var(--color-primary); border-radius:  clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px) 2px clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px) clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px); flex-shrink: 0;}
.location-title {font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; line-height: 1.44;}
.location-info {display: flex; flex-direction: column;  padding: clamp(20px, calc( 48 / var(--inner) * 100vw ), 48px); gap: clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px); background: #fff; border: 1px solid #ddd; border-radius: clamp(12px, calc( 24 / var(--inner) * 100vw ), 24px);}
.location-info-item {display: flex; gap: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); align-items: center;}
.location-icon {width:clamp(12px, calc( 24 / var(--inner) * 100vw ), 24px); height: clamp(12px, calc( 24 / var(--inner) * 100vw ), 24px);}
.location-icon img {width: 100%; height: 100%; object-fit: contain;}
.location-label { font-weight: 600; line-height: 1.88; color: var(--color-primary);}
.location-divider {width: 1px; height: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); background: #ddd;}
.location-value { font-weight: 400; line-height: 1.88; color: var(--color-body);}
.location-map {flex: 1 0 clamp(400px, calc( 1000 / var(--inner) * 100vw ), 1000px); max-width: clamp(400px, calc( 1000 / var(--inner) * 100vw ), 1000px); overflow: hidden; border-radius: clamp(12px, calc( 24 / var(--inner) * 100vw ), 24px);}
.location-map iframe {width: 100%; height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px);}

.sub1_2_1 .namebx:lang(en) {flex: 0 0 clamp(120px, calc( 180 / var(--inner) * 100vw ), 180px); max-width: clamp(120px, calc( 180 / var(--inner) * 100vw ), 180px);}
.location-info-item:lang(en) {flex-direction: column; gap: 10px; align-items: flex-start;}
.location-info-item .flxWrap {align-items: center; gap: clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); flex-wrap: nowrap;}