@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;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

.bg-gray {background:#fafafa;}
.bg-blue {background: #F8FAFF;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: var(--padding-80) 0;}

.subsec-titbx {margin-bottom: var(--padding-45);}
.subsec-titbx .sec-title {font-size:var(--font-size-28); 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);}

.tabwrap {margin-bottom: var(--padding-80); text-align: center;}
.tabwrap ul {display: inline-flex; justify-content: center; padding: var(--padding-10); background: #F9F9F9; border: 1px solid #ddd; border-radius: 16px;}
.tabwrap ul a {display: inline-flex;align-items: center;justify-content: center;width: clamp(120px, calc( 230 / var(--inner) * 100vw ), 230px); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); font-size: var(--font-size-18); border-radius:8px; color: #999; font-weight: 600;}
.tabwrap ul li.active a {background: var(--color-primary); color: #fff;}

.commtopbg { padding: var(--padding-120) 16px; margin-bottom: var(--padding-80); border-radius: 24px; overflow: hidden; color: #fff;}
.commtopbg.bg1 {background: url(../images/sub/sub2_1-bg.jpg) no-repeat center center; background-size: cover;}
.commtopbg.bg2 {background: url(../images/sub/sub6_1-bg.jpg) no-repeat center center; background-size: cover; min-height: clamp(280px, calc( 560 / var(--inner) * 100vw ), 560px); display: flex; flex-direction: column; justify-content: center;}
.commtopbg .textbx {text-align: center; letter-spacing: -0.7px;}
.commtopbg .txt1 {font-size:var(--font-size-48); font-weight:700; margin-bottom: var(--padding-40);}
.commtopbg .txt2 {display: inline-block; font-size:var(--font-size-28); font-weight:600; margin-bottom: var(--padding-45);}
.commtopbg .txt2 .highlight {display: inline-block; position: relative; }
.commtopbg .txt2 .highlight::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--padding-20); background: #88EDF4; opacity: 0.48; z-index: -1;}
.commtopbg .txt3 {margin-bottom:var(--padding-50); font-size: var(--font-size-20); line-height:1.7; font-weight: 500;}
.commtopbg .btn-more {background: rgba(255,255,255,0.32);}
.commtopbg .btn-more .txt {color: #fff;}
.commtopbg .btn-more:hover .txt {color: var(--color-primary);}

.sub2_1_2 .badgebx {text-align: center; margin-bottom: var(--padding-40);}
.sub2_1_2 .badge {display: inline-flex;align-items: center;justify-content: center;padding: 10px 24px; font-size: var(--font-size-18); font-weight: 600; background: var(--color-primary); border-radius: 24px; color: #ffff;}

.recommend-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--padding-20);}
.recommend-item {display: flex; flex-direction: column; align-items: center; padding: var(--padding-40); background: #fff; border-radius: 16px; border: 1px solid #ddd; text-align: center;}
.recommend-icon {margin-bottom: var(--padding-30); text-align: center;}
.recommend-icon img {width: clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px);}
.recommend-text {font-size: var(--font-size-20); font-weight: 600; line-height: 1.5;}
.recommend-dec {margin-top:var(--padding-20); color: var(--color-body);}

.process-list {display: flex; flex-wrap: wrap; gap:var(--padding-45) clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px); overflow: hidden;}
.process-item {display: flex; flex-direction: column; align-items: center; flex:1 0 calc((100% - 4 * clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px)) / 5); max-width: calc((100% - 4 * clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px)) / 5); padding: var(--padding-40) var(--padding-20); position: relative;border: 1px solid #ddd; letter-spacing: -0.6px; border-radius: 24px; background: #fff;}
.process-item:not(:last-child)::after {content: ''; position: absolute; right: calc(-1 * clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px) / 2 - 10px); top: 50%; transform: translateY(-50%); width: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); height:  clamp(14px, calc( 22 / var(--inner) * 100vw ), 22px); background: url(../images/sub/arrow.png) no-repeat center center; background-size: contain;}
.process-icon {margin-bottom: var(--padding-30); }
.process-icon img {width: clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px); }
.process-text {font-size: var(--font-size-20); font-weight: 600;line-height: 1.5; text-align: center;}
.process-dec {margin-top: var(--padding-20); line-height: 1.87; text-align: center; color: var(--color-body);}

.process-list.ty2 .process-item {flex:1 0 calc((100% - 2 * clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px)) / 3); max-width: calc((100% - 2 * clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px)) / 3);}

.sub2_1_4 .faq-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding-20);}
.sub2_1_4 .faq-item {padding: var(--padding-40) var(--padding-24); background: #fff; border-radius: 16px; border: 1px solid #ddd;}
.sub2_1_4 .faq-question {display: flex; align-items: center; gap: var(--padding-20); padding: 0 var(--padding-24); margin-bottom: var(--padding-30);}
.sub2_1_4 .faq-badge {display: flex; align-items: center; justify-content: center; flex: 1 0 clamp(28px, calc( 32 / var(--inner) * 100vw ), 32px); max-width: clamp(28px, calc( 32 / var(--inner) * 100vw ), 32px); height: clamp(28px, calc( 32 / var(--inner) * 100vw ), 32px); background: var(--color-primary); border-radius: 50%; color: #fff; font-weight: 600;}
.sub2_1_4 .faq-q-text {flex: 1; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7;}
.sub2_1_4 .faq-answer {display: flex; align-items: flex-start; gap: var(--padding-20); padding: var(--padding-24); background: #FAFAFA; border-radius: 16px; min-height: 105px;}
.sub2_1_4 .faq-answer .faq-badge {background: #fff; color: var(--color-primary);}
.sub2_1_4 .faq-a-text { font-weight: 600; color: var(--color-body); line-height: 1.78;} 


.sub2_1_5 .form-wrap {padding: var(--padding-45); border-radius: 24px; border: 1px solid var(--line-line, #DDD); background: var(--basics-ffffff, #FFF);}
.sub2_1_5 .form-in {display: flex; gap: var(--padding-30); }
.sub2_1_5 .form-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--padding-24); flex: 1; letter-spacing: -0.7px;}
.sub2_1_5 .form-row {display: flex; gap: 0;}
.sub2_1_5 .form-label {width: clamp(100px, calc( 120 / var(--inner) * 100vw ), 120px); font-weight: 500; line-height: 1.5;}
.sub2_1_5 .form-input {flex: 1;}
.sub2_1_5 .form-input input {width: 100%; height: clamp(38px, calc( 48 / var(--inner) * 100vw ), 48px); padding: 0 var(--padding-20); border: 1px solid #ddd; border-radius: 8px; color: #222; background: #fff;}
.sub2_1_5 .form-input input::placeholder {color: #999;}
.sub2_1_5 .form-right {display: flex; flex-direction: column; width: clamp(200px, calc( 481 / var(--inner) * 100vw ), 481px);}
.sub2_1_5 .form-check {display: flex; gap: var(--padding-12); margin-bottom: var(--padding-30);}
.sub2_1_5 .form-check-item {display: flex; align-items: center;}
.form-check-item  {display:flex; align-items:center; gap:10px; color:var(--color-body);}
.form-check-item .checkbox {margin-top:0;}
.form-check-item .pop_privacy {display:inline-flex; align-items:center; justify-content:center; padding:4px 6px; color:var(--color-body); font-size:var(--font-size-12); border-radius:4px; border:1px solid #ddd; line-height:1;}
.sub2_1_5 .form-submit-btn {width: 100%; height: clamp(50px, calc( 64 / var(--inner) * 100vw ), 64px);  border: 1px solid #ddd; border-radius: 8px; color: #fff; color: #999; font-size: var(--font-size-18); font-weight: 600; cursor: pointer; line-height: 1.5;}
.sub2_1_5 .form-submit-btn:hover {background: #0d3fd3;}

.subform-wrap + .subform-wrap {margin-top: var(--padding-80);}

.sub7_1_2 .recommend-icon img {width: clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px);}

.galleryitem {position:relative;}
.galleryitem .image {border-radius:var(--border-radius-24); position:relative; padding-bottom:57.59%; overflow:hidden;}
.galleryitem .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%; object-fit : cover;}
.galleryitem .textbx {display: flex; align-items: center; gap:var(--padding-16); margin-top:8px; padding: var(--padding-24) var(--padding-40); border: 1px solid #ddd; border-radius: var(--border-radius-24);}
.galleryitem .num {display: flex;align-items: center;justify-content: center; flex: 1 0 clamp(25px, calc( 32 / var(--inner) * 100vw ), 32px); max-width: clamp(25px, calc( 32 / var(--inner) * 100vw ), 32px); height: clamp(25px, calc( 32 / var(--inner) * 100vw ), 32px); background: var(--color-primary); border-radius: 50%; color: #fff; font-weight: 600;}
.galleryitem .title {flex: 1; font-size:var(--font-size-20); font-weight:600; }
.controlpaging {display:flex; align-items:center; padding-top:var(--padding-45);}
.controlpaging .swiper-pagination {position:initial; height:clamp(3px, calc( 5 / var(--inner) * 100vw ), 5px); border-radius:3px;}
.controlpaging .swiper-pagination-progressbar-fill {background:var(--color-primary); border-radius:3px;}
.swiper-pagination-progressbar {background: #DFE5FF;}
.btncontrol {display:flex; align-items:center; padding-right:var(--padding-40);}
.btncontrol .btn-arrow {margin-top:0; margin-right:8px; position:initial; transform: translateY(0); width:clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px); height:clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px); border-radius:50%;  border:1px solid #ddd; transition: all 0.3s;}
.btncontrol .btn-arrow:last-child {margin-right:0;}
.btncontrol .btn-arrow svg {color: #ddd; width:clamp(20px, calc( 28 / var(--inner) * 100vw ), 28px);}
.btncontrol .btn-arrow:hover {background:var(--color-primary); border-color:var(--color-primary);}
.btncontrol .btn-arrow:hover svg {color: #fff;}

.partners-grid {display: grid; grid-template-columns: repeat(6, 1fr); gap:var(--padding-45) var(--padding-20);}
.partners-grid .images {display: flex;align-items: center;justify-content: center; padding:var(--padding-10); height: 86px; border: 1px solid #ddd; border-radius: 16px;}
.partners-grid .images img {height: 100%; object-fit: scale-down;}
.partners-grid .name {margin-top: var(--padding-20); font-size: var(--font-size-20); font-weight: 600; text-align: center;}

.manufacture-wrap {margin-bottom: var(--padding-80);}
.manufacture-wrap .title {margin-bottom:var(--padding-40); font-size:var(--font-size-28); font-weight:600; line-height: 1;}
.manufacture-grid {display: grid; grid-template-columns: repeat(7 , 1fr); gap:var(--padding-10) ;}
.manufacture-grid .grid-item {display: inline-flex; align-items: center;justify-content: center; gap: 10px;  height: clamp(45px, calc( 80 / var(--inner) * 100vw ), 80px); border: 1px solid #eee; border-radius: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); }
.manufacture-grid .txt {font-size:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color: #222;} 
.manufacture-grid img {height: clamp(24px, calc( 40 / var(--inner) * 100vw ), 40px); object-fit: contain;}
.manufacture-grid .grid-item.on {border-color: var(--color-primary); background: #F8FAFF;}