@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:20px; 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:5px; width:8px; height: 8px; 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:#fafafa;}
.subsec-pd + .subsec-pd {padding-top: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);} 
.insectitbx {margin-bottom: 30px;}
.insectitbx .sectit {font-size: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight:600 ;}
.insectitbx.ty2 {margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.insectitbx.ty2 .sectit {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:600 ;}

.shadow {box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);}
.dotxt {display: inline-flex; align-items: center; justify-content: center; margin-bottom: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); padding: 0 clamp(20px, calc( 25 / var(--inner) * 100vw ), 25px); min-width:clamp(90px, calc( 122 / var(--inner) * 100vw ), 122px); height: clamp(40px, calc( 46 / var(--inner) * 100vw ), 46px); border-radius: 32px; background:var(--color-primary); color: #fff; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}
.mt30 {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.mt40 {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.inmargintop {margin-top:  clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) ;}

.sub01_sec1 {background: url(../images/sub/sub01-img1.png) no-repeat right center; background-size: clamp(30px, calc( 800 / var(--inner) * 100vw ), 800px) auto;}
.sub01_sec1 .inner {padding: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px) clamp(20px, calc( 75 / var(--inner) * 100vw ), 75px); border-radius: 24px; }
.sub01_sec1 .title {font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight:700;}
.sub01_sec1 .decbx {margin-top: clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px);}
.sub01_sec1 .dec {color: #333; line-height:1.875;}
.sub01_sec1 .dec + .dec {padding-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}

.sub01_sec2 .inner {padding: 60px; border-radius:24px ; background: #fff;}
.sub01_sec2 .head {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #ddd;}
.sub01_sec2 .head .namebx {display: flex; align-items: center;}
.sub01_sec2 .head .name {padding-right: 38px; font-size:30px; font-weight: bold;color:var(--color-primary);}
.sub01_sec2 .head .subbx {margin:-10px;}
.sub01_sec2 .head .sub {display: inline-flex; align-items: center; justify-content: center; padding: 10px; position: relative;; font-size: 20px; font-weight: 600; color: #333;}
.sub01_sec2 .head .sub:not(:last-child):after {position: absolute;content: '';right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height:14px; background: #ddd;}
                     
.sub01_sec2 .introitem {display: flex; line-height: 1.875;}
.sub01_sec2 .introitem .tit {flex: 1 0 clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px);max-width: clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px); font-weight: 700;}
.sub01_sec2 .introitem .infotxt {flex: 1 0 auto; width: 1%; color: #333;}

.cost-card-row { display: flex; flex-wrap: wrap; width: 100%; margin: -7px;}
.cost-card {flex: 1 0 33.33%; max-width: 33.33%; padding: 7px; }
.cost-card .inner {padding: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); background: #ffffff; height: 100%; border-radius: 24px; border: 1px solid #dddddd;}
.cost-card-title { display: flex; align-items: center;  }
.cost-card-title h3 { font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color: #222222; margin: 0; line-height:1.6; }
.cost-card-flag {margin-right: 10px; width: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius: 50%; overflow: hidden; }
.cost-card-in {display: flex; align-items: center; padding: 10px clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); margin-top: 10px;  width: 100%; min-height: clamp(44px, calc( 50 / var(--inner) * 100vw ), 50px); background: #f1f2f3; border-radius: 16px; letter-spacing: -0.6px;}
.cost-card-in .label {flex: 1 clamp(65px, calc( 82 / var(--inner) * 100vw ), 82px); max-width: clamp(65px, calc( 82 / var(--inner) * 100vw ), 82px); font-weight: 500; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: #666666; text-transform: uppercase;}
.cost-card-in .price {flex: 1 0 auto; width: 1%; font-weight: 600; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-primary);}
.cost-card-in.final { background: rgba(34, 172, 57, 0.1); }
.cost-card-in.final .label {color: var(--color-primary);}
.cost-card.w-100 {flex: 1 0 100%; max-width: 100%;}
.cost-card.w-100 .inner {padding:40px 20px; text-align: center; font-size: 20px; font-weight: 600;color: var(--color-primary);} 

.procedure-grid { display: flex; flex-wrap: wrap; margin: -10px;}
.procedure-card {flex: 10 25%; max-width: 25%; padding: 10px;}
.procedure-card .inner {display: flex; flex-direction: column; align-items: center; padding: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px) clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); background: #ffffff; height: 100%;border-radius: 16px; border: 1px solid #dddddd;  }
.procedure-card .step-number {display: flex; align-items: center; justify-content: center; background: rgba(34, 172, 57, 0.16); height: clamp(28px, calc( 32 / var(--inner) * 100vw ), 32px); width: clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 32px;  font-weight: 600; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-primary); }
.procedure-card .step-title {font-weight: 500; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: #333333; text-align: center; line-height: 1.6; } 
.procedure-card .step-number + .step-title {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.procedure-grid.ty2 .inner {display: flex; align-items: center; justify-content: center; min-height: clamp(120px, calc( 182 / var(--inner) * 100vw ), 182px); }
.procedure-grid.ty2 .step-title {color: var(--color-primary); font-weight: 600;}

.countrybx {padding: clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px) 0 ; background: rgba(34, 172, 57, 0.1); border-radius: 16px;}
.contrylist {display: flex; flex-wrap: wrap; margin:-25px -10px;}
.contryitem {flex: 1 0 14.28%; max-width: 14.28%; padding:25px 10px;}
.contryitem .inner {display: flex; flex-direction: column; align-items: center; text-align: center; text-align: center;}
.contryitem .img { margin-bottom: clamp(8px, calc( 10 / var(--inner) * 100vw ), 10px);width: clamp(45px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 4px; overflow: hidden;}
.contryitem .name {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 500; color: #333;}

.inquirywrap .btn-pack.large {min-width: clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px); height: clamp(44px, calc( 60 / var(--inner) * 100vw ), 60px); line-height: clamp(42px, calc( 58 / var(--inner) * 100vw ), 58px); border-radius: 8px;}

/* 영문 */
.cost-card-in .label:lang(en) {flex: 1 0 clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px); max-width: clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px);}
.procedure-card .step-title:lang(en) {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.radioflx .radiobox:lang(en) {flex: 1 0 clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px); max-width: clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px);}