@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:clamp(12px, calc( 19 / var(--inner) * 100vw ), 19px); line-height:1.5;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:clamp(8px, calc( 10 / var(--inner) * 100vw ), 10px); width:5px; height: 5px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}

.bg-blue {background:#F5F7FA ;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0;}
.sub-title2 {margin-bottom: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); letter-spacing: -0.5px;}
.sub-title2 .maintit {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold;}
.sub-title2 .maindec {padding-top: clamp(12px, calc( 25  / var(--inner) * 100vw ), 25px); color: var(--color-body); line-height: 1.87;}

.sub1_1 .flxWrap {align-items: center;}
.sub1_1 .imgbx {flex: 1 0 49%; max-width: 49%;}
.sub1_1 .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.5px;}
.sub1_1 .flxWrap:not(.reverse) .imgbx {margin-right: clamp(10px, calc( 160 / var(--inner) * 100vw ), 160px);}
.sub1_1 .flxWrap.reverse {flex-direction: row-reverse;}
.sub1_1 .flxWrap.reverse .imgbx {margin-left: clamp(10px, calc( 160 / var(--inner) * 100vw ), 160px);}
.sub1_1 .num {display: flex; align-items: center;justify-content: center; width: clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px); height: clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px); border-radius: 50%; background: #E1E6F0; color: var(--color-primary); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 700; line-height: 1;}
.sub1_1 .tit {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold; line-height: 1.4;}
.sub1_1 .descbx {padding-top: clamp(25px, calc( 56 / var(--inner) * 100vw ), 56px);}
.sub1_1 .dec + .dec  {padding-top: clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px);}
.sub1_1 .dec {line-height: 1.87; color: var(--color-body );}

.sub1_1_2 {padding: clamp(60px, calc( 150 / var(--inner) * 100vw ), 150px) 0; background: url(../images/sub/sub1_1-bg.jpg) no-repeat 50% 50% /cover; color: #fff; text-align: center; letter-spacing: -0.5px;}
.sub1_1_2 .txt1 {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold; text-align: center;} 
.sub1_1_2 .txt1 .que {display: inline-block; padding: 0 clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); position: relative;}
.sub1_1_2 .txt1 .que:before ,
.sub1_1_2 .txt1 .que:after {position: absolute; content: ''; top: 0; width:clamp(13px, calc( 17 / var(--inner) * 100vw ), 17px); height: clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px); background-size: contain !important;}
.sub1_1_2 .txt1 .que:before {left: 0; background: url(../images/sub/que-img1.png) no-repeat;}
.sub1_1_2 .txt1 .que:after {right: 0; background: url(../images/sub/que-img2.png) no-repeat;}
.sub1_1_2 .txt2 {padding-top:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; line-height: 1.7;}

.profile-content {display:flex; align-items:center; justify-content:space-between; flex-direction: row-reverse; flex-wrap: wrap; gap:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.profile-text {display:flex; flex-direction:column; gap:clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px); flex:1 0 auto; width: 1%;}
.greeting {font-size:clamp(22px, calc( 36 / var(--inner) * 100vw ), 36px); font-weight:bold; line-height:1.4; }
.profile-info {display:flex; flex-direction:column; gap:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.profile-info .name-section {display:flex; align-items:flex-end; gap:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.profile-info .name {font-size:clamp(19px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight:600; }
.profile-info .position {font-size:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:600; color:var(--color-primary);}
.contact-info {display:flex; flex-direction:column; gap:clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px);}
.contact-item {display:flex; align-items:center;}
.contact-label {display:flex; align-items:center; gap:clamp(8px, calc( 10 / var(--inner) * 100vw ), 10px); flex: 1 0 clamp(90px, calc( 165 / var(--inner) * 100vw ), 165px); max-width: clamp(90px, calc( 165 / var(--inner) * 100vw ), 165px);}
.contact-label .icon {width:clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); height:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);}
.contact-label .icon svg {width:100%; height:100%;}
.contact-label span {font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; color:var(--color-body);}
.contact-value {padding-bottom: 2px; flex: 1 0 auto; width: 1%; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color:var(--color-body);}
.profile-image {flex:1 0 clamp(300px, calc( 400 / var(--inner) * 100vw ), 400px); max-width:clamp(300px, calc( 400 / var(--inner) * 100vw ), 400px);}
.profile-items {margin-top: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.profile-items .titbx,
.profile-items .textbx {padding-top: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.profile-items .titbx {flex:1 0 clamp(220px, calc( 480 / var(--inner) * 100vw ), 480px); max-width: clamp(220px, calc( 480 / var(--inner) * 100vw ), 480px); position: relative; font-size:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600;}
.profile-items .titbx:after {position: absolute; content: ''; left: 0; top: 0; width:clamp(160px, calc( 400 / var(--inner) * 100vw ), 400px); height: 2px; background:#686868;}
.profile-items .textbx {flex:1 0 auto; width: 1%; position: relative;} 
.profile-items .textbx:after {position: absolute; content: ''; left: 0; top: 0; width:100%; height: 1px; background:#ddd;}

.process-step {width:100%; position: relative;}
.process-step:not(:last-child) {padding-bottom: clamp(30px, calc( 96 / var(--inner) * 100vw ), 96px);}
.process-step:not(:last-child):after {position: absolute; content: ''; bottom: clamp(2px, calc( 20 / var(--inner) * 100vw ), 20px); left: 50%; transform: translateX(-50%); width: clamp(26px, calc( 56 / var(--inner) * 100vw ), 56px); height: clamp(26px, calc( 56 / var(--inner) * 100vw ), 56px); background: url(../images/sub/arrow.png) no-repeat center center / contain;}
.step-card {display:flex; align-items:center; flex-wrap: wrap; background:#fff; border:1px solid #ddd; border-radius:clamp(12px, calc( 24 / var(--inner) * 100vw ), 24px); padding:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); height:100%; }
.step-number {display:flex; align-items:center; justify-content:center;margin-right:clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px);background:var(--color-primary); color:#fff; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; padding:clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px) clamp(15px, calc( 21 / var(--inner) * 100vw ), 21px); border-radius:clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); width:clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px); height:clamp(45px, calc( 80 / var(--inner) * 100vw ), 80px);  }
.step-content {display:flex; align-items:center; flex-wrap: wrap; gap:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); flex:1 0 auto; width: 1%;}
.step-icon {flex: 1 0 clamp(65px, calc( 144 / var(--inner) * 100vw ), 144px); max-width: clamp(65px, calc( 144 / var(--inner) * 100vw ), 144px);}
.step-text {flex:1 0 auto; width: 1%;}
.step-title {margin-bottom: clamp(15px, calc( 21 / var(--inner) * 100vw ), 21px); font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:bold;  }
.detail-item + .detail-item {margin-top: 12px;}
.detail-item {display:flex; align-items: center; padding-left: 15px; line-height: 1.87; position: relative;}
.detail-item:after {position:absolute; content:''; left:0; top:11px; width:5px; height: 5px; background:var(--color-primary); border-radius: 50%;}
.detail-label {margin-right: 10px; padding-right: 10px; font-weight: 600; position: relative; white-space: nowrap;}
.detail-label:after {position: absolute; content: ''; right: 0 ; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #ddd;}
.detail-item .detail-txt {color:var(--color-body); }

.commimglist {display: flex; flex-wrap: wrap; margin: -20px;}
.commimgitem {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.commimgitem .images {position: relative; border-radius:clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px); overflow: hidden;}
.commimgitem .images img {width: 100%;}
.commimgitem .txt {position: absolute; left: 0; top: 0; padding:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); width: 100%; font-size: clamp(17px, calc( 28 / var(--inner) * 100vw ), 28px); color: #fff; font-weight: bold; letter-spacing: -0.5px;}
.commimglist.ty2 .commimgitem {flex:1 0 33.33%; max-width: 33.33%;}

.sub3flxwrap {display: flex; flex-wrap: wrap; align-items: center; flex-direction: row-reverse;}
.sub3flxwrap .imgbx {flex: 1 0 52%; max-width: 52%; margin-left: clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px);}
.sub3flxwrap .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.8px;}
.sub3flxwrap .tit {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold; line-height: 1.4;}
.sub3flxwrap .decbx {padding-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.sub3flxwrap .decbx .dec {line-height: 1.87; color: var(--color-body );}
.sub3flxwrap .decbx .dec + .dec  {padding-top: clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px);}
.sub3flxwrap .linkbx {padding-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.sub3flxwrap .linkbx .btn-link {display: inline-flex; align-items: center; justify-content: center; padding: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); border:1px solid var(--color-primary); color: var(--color-primary); font-weight: 600; border-radius:8px; text-align: center; line-height: 1.2;}