@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; color: #686868;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:8px; width:3px; height: 3px; background:#686868; 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-pd {padding: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}
.subsectitbx {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.subsectitbx .subsec-tit {font-size: var(--font-size-30); font-weight: 700;  line-height: 1.1;}

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

.sub1_1_1 .topimg {position: relative; margin-bottom: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.sub1_1_1 .topimg:after {position: absolute; content: ''; left: 50%; top: clamp(-50px, calc( -50 / var(--inner) * 100vw ), -25px); transform: translateX(-50%); width:2px; height: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); background: var(--color-primary);}
.sub1_1_1 .bottomtext .dec {font-size: var(--font-size-18); color: var(--color-body); line-height: 1.55;}
.sub1_1_1 .bottomtext .dec + .dec {margin-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}

.brand-core-list {display:flex;flex-wrap: wrap;}
.brand-core-item {position:relative; flex:1 0 33.33%; max-width: 33.33%; height:clamp(300px, calc( 700 / var(--inner) * 100vw ), 700px); overflow:hidden;}
.brand-core-img {position:absolute; top:0; left:0; width:100%; height:100%;}
.brand-core-img img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; min-width:100%; min-height:100%;}
.brand-core-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.2); z-index:1;}
.brand-core-text {position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); height:clamp(220px, calc( 260 / var(--inner) * 100vw ), 260px); display:flex; flex-direction:column; justify-content: space-between; padding:15px; z-index:2; color:#fff; text-align:center; width: 100%; letter-spacing: -0.5px;}
.brand-core-title {text-align:center; margin-bottom:15px;}
.brand-core-subtitle {line-height:1; margin-bottom:11px;}
.brand-core-maintitle {font-size:var(--font-size-40); font-weight:600; line-height:1.05;}
.brand-core-desc {font-size:var(--font-size-18); line-height:1.55;}

.sub1_1_3 .bg {position: relative; background: url(../images/sub/sub1_1_3-bg.jpg) no-repeat center center / cover; height: clamp(250px, calc( 460 / var(--inner) * 100vw ), 460px);}
.sub1_1_3 .title {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); font-size: var(--font-size-80); font-weight: 600; line-height: 1; color: #fff; text-align: center;font-family: var(--font-source);}

.sub1_1_4 .flxWrap {align-items: center; gap:clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px);}
.sub1_1_4 .imgbx {width:clamp(300px, calc( 500 / var(--inner) * 100vw ), 500px);}
.sub1_1_4 .textbx {flex: 1;}
.sub1_1_4 .dec {font-size:var(--font-size-18); line-height:1.55;color: var(--color-body);}
.sub1_1_4 .dec + .dec {margin-top:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); }

.tabwrap {margin-bottom:clamp(45px, calc( 110 / var(--inner) * 100vw ), 110px);}
.tabwrap .tablist {display: flex;justify-content: center; gap:clamp(15px, calc( 80 / var(--inner) * 100vw ), 80px);}
.tabwrap .tablink {display: block; padding-bottom: 2px; color: #242424; font-weight: 500;}
.tabwrap .tabitem.active .tablink {color: var(--color-primary); border-bottom: 2px solid var(--color-primary);}

.benefits-list {display:flex; flex-direction:column; gap:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.benefits-number {margin-bottom: 40px; padding-bottom: 40px; font-size:var(--font-size-30); font-weight:700; color:var(--color-primary); line-height:1; border-bottom: 1px solid #ddd;}
.benefits-content {display:flex; gap:clamp(30px, calc( 180 / var(--inner) * 100vw ), 180px); align-items:center; flex-wrap: wrap; padding: 0 clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.benefits-icon {width:clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px);}
.benefits-icon img {width:clamp(120px, calc( 160 / var(--inner) * 100vw ), 160px);}
.benefits-text {flex:1; }
.benefits-quote {font-size:var(--font-size-20); font-weight:700; color:var(--color-body); line-height:1.4; letter-spacing:-0.5px; margin-bottom:clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px);}
.benefits-desc {font-size:var(--font-size-18); color:var(--color-body); line-height:1.556; letter-spacing:-0.45px;}


.review-list {display: flex;flex-wrap: wrap; margin: 0 -20px;}
.review-item {flex: 1 0 33.33%; max-width:33.33%; padding:0 20px; margin-bottom: 30px;} 
.review-item .inner {display: block; border: 1px solid #ddd;border-radius: 16px; overflow: hidden; height: 100%; background: #fff; transition: all 0.3s;}
.review-item .image { position:relative;padding-bottom:90.22%; overflow:hidden;}
.review-item .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.review-item .textbx {padding: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px) clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);}
.review-item .text {color: var(--color-body); font-size:var(--font-size-16); line-height:1.3; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:2; min-height:calc(var(--font-size-16) * 1.3 * 2);}
.review-item .title {margin-top: clamp(12px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: var(--font-size-22); font-weight: 500; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:1;}
.review-item .star-box {margin-bottom:10px;}
.review-item .inner:hover {border-color: var(--color-primary);  box-shadow: 0 4px 16px 0 rgba(142, 97, 58, 0.25);}

input[type="file"].file-input {color: transparent;}
input[type="file"].file-input.has-file {color: var(--color-body);}


/* 추가작업 */
.selected-options-area > ul > li + li {margin-top:15px;}
.opt-name {display:flex; justify-content:space-between; margin-bottom:9px;}
.opt-name .name {font-size:var(--font-size-15); font-weight:400; line-height:1.4em; color:#454545; margin-top:-3px;}
.opt-name .del {display:inline-block; position:relative; width:16px; height:16px; overflow:hidden; text-indent: -999em;}
.opt-name .del:before,
.opt-name .del:after {content:" "; position:absolute; top:7px; left:0; width:100%; height:2px; background:#989898;}
.opt-name .del:before {transform:rotate(45deg);}
.opt-name .del:after {transform:rotate(-45deg);}
.opt-count {display: flex;align-items: center; justify-content: space-between;}

.modal {padding: clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px) clamp(15px, calc( 60 / var(--inner) * 100vw ), 60px); max-width: 1320px;}
.modal .pop-title {margin-bottom:20px; font-size:var(--font-size-24); font-weight: 600; }
.modal .board-form table th {text-align: center;}
.modal textarea.input {height: 250px !important;}

.modal.ty2 {max-width: 770px; padding: 0;}
.modal.ty2 .head {padding:var(--padding-50); border-bottom: 1px solid #ddd;}
.modal.ty2 .headtitle {font-size:var(--font-size-30); font-weight: bold; line-height:1.2;}
.modal.ty2 .body {padding:var(--padding-30) var(--padding-50);}

.modal-coupon-list {display:flex; flex-direction:column; gap:var(--padding-20); max-height: clamp(320px, calc( 600 / var(--inner) * 100vw ), 600px); overflow-y: auto;}
.modal-coupon-item {border:1px solid #ddd; border-radius:clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); padding:var(--padding-40);}
.modal-coupon-content {display:flex; gap:var(--padding-40); align-items:center;}
.modal-coupon-text {display:flex; flex-direction:column; gap:var(--padding-30); flex:1;}
.modal-coupon-title {font-size:var(--font-size-20); font-weight:600; color:#242424; line-height:1;}
.modal-coupon-info {display:flex; flex-direction:column; gap:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px);}
.modal-coupon-discount {font-size:var(--font-size-18); font-weight:500; color:var(--color-primary); line-height:1;}
.modal-coupon-expiry {font-size:var(--font-size-16); color:#686868; line-height:1;}
.modal-coupon-apply-btn {width:clamp(75px, calc( 88 / var(--inner) * 100vw ), 88px); height:clamp(32px, calc( 36 / var(--inner) * 100vw ), 36px); padding:var(--padding-10); border:1px solid var(--color-primary); border-radius:8px; background:#fff; color:var(--color-primary); font-size:var(--font-size-16); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal-coupon-apply-btn:hover {background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.modal-coupon-item.noncoupon {border: 0;}
.noncoupon .svg {margin-bottom:var(--padding-20);}
.noncoupon .svg svg {width:clamp(70px, calc( 140 / var(--inner) * 100vw ), 140px);}
.noncoupon .dec {color:#686868; line-height:1.75;}