@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:420px !important;}
.root_daum_roughmap .wrap_map {height:420px !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:16px; margin-top:2px; line-height:1.6; color: #555555; transform: rotate(-0.1deg);}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:7px; height:1px; background:#555555;}

.bg-gray {background:#fafafa;}
.bg-gray2 {background:#f5f4f2;}

.topbg + .subsecwrap {padding-top: clamp(60px, calc( 130 / var(--inner) * 100vw ), 130px);}
.est01img + .subsecwrap {padding-top: clamp(60px, calc( 130 / var(--inner) * 100vw ), 130px);}
.subsecwrap + .subsecwrap {padding-top:clamp(60px, calc( 130 / var(--inner) * 100vw ), 130px);}
.subsecwrap + .subsecwrap2 {padding-top: clamp(90px, calc( 290 / var(--inner) * 100vw ), 290px);}
.subsecwrap3 {padding: clamp(60px, calc( 130 / var(--inner) * 100vw ), 130px) 0;}
.topbg {position: relative; height: clamp(350px, calc( 700 / var(--inner) * 100vw ), 700px);}
.topbg .textbx {padding-left:var(--container-space); padding-right:var(--container-space);  position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); max-width: 1460px; width: 100%; color: #fff;}
.topbg .textbx .title {font-size: clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; letter-spacing: 20px; font-family: var(--font2);}
.topbg .textbx .text {padding-top: 12px; letter-spacing: -0.5px; line-height: 1.5; transform: rotate(-0.1deg); font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}
.topbg .inbx {width: 100%; margin-left: auto;}

.topbg.bg1 {background: url(../images/sub/top-bg1.jpg) no-repeat 50% bottom; background-size: cover;}
.topbg.bg2 {background: url(../images/sub/top-bg2.jpg) no-repeat 50% bottom; background-size: cover;}
.topbg.bg3 {background: url(../images/sub/top-bg3.jpg) no-repeat 50% bottom; background-size: cover;}
.topbg.bg4 {background: url(../images/sub/top-bg4.jpg) no-repeat 50% bottom; background-size: cover;}
.topbg.bg1 .textbx {top: 60%;}
.topbg.bg1 .inbx {max-width: 900px; }
.topbg.bg2 .textbx {top: 52%;}
.topbg.bg2 .inbx {max-width: 855px; }
.topbg.bg3 .textbx {top: 45%;}
.topbg.bg3 .inbx {max-width: 585px; }
.topbg.bg4 .textbx {top: 62%;}
.topbg.bg4 .inbx {max-width: 660px; }

.textlist .desc {transform: rotate(-0.1deg);}

.downimgitem {display: flex;  align-items: flex-end; position: relative;}
.downimglist { margin-right: clamp(10px, calc( 34 / var(--inner) * 100vw ), 34px);}
.downimglist:nth-child(1) {flex: 1 0 600px; max-width: 600px;}
.downimglist:nth-child(2) {flex: 1 0 250px; max-width: 250px;}
.downimglist:nth-child(3) {flex: 1 0 auto; width: 1%; margin-right: 0;}
.downimglist.textlist {position: absolute; top: 32%; width: 100%;}
.downimglist .descbx { max-width: 50%; width: 100%; margin-left: auto; color: #333;}
.downimglist .name {font-size: clamp(20px, calc( 36 / var(--inner) * 100vw ), 36px); font-weight: 400;}
.downimglist .desc {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) ; line-height: 1.5; transform: rotate(-0.1deg); font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}

.downimgitem2 {display: flex;  align-items: flex-end; }
.downimglist2 { margin-right: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.downimgitem2 .wid1 {flex: 1 0 auto; width: 1%; }
.downimgitem2 .wid2 {flex: 1 0 1000px; max-width: 1000px; margin-right:0;}
.downimgitem2.reverse {flex-direction: row-reverse;}
.downimgitem2.reverse .wid1 {margin-right:0; margin-left:clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}


.rightimgitem {display: flex;flex-wrap: wrap; position: relative;}
.rightimglist {margin-right:clamp(10px, calc( 34 / var(--inner) * 100vw ), 34px) ;}
.rightimglist:nth-child(1) {flex: 1 0 1000px; max-width: 1000px;}
.rightimglist:nth-child(2) {flex: 1 0 auto; width: 1%; margin-right: 0;}
.rightimglist .second {margin-top: clamp(12px, calc( 37 / var(--inner) * 100vw ), 37px); text-align: right;} 
.rightimglist.textlist {position: absolute; bottom: 2%; width: 100%;} 
.rightimglist .descbx { max-width: 50%; width: 100%; color: #333;}
.rightimglist .name {font-size: clamp(20px, calc( 36 / var(--inner) * 100vw ), 36px); font-weight: 400;}
.rightimglist .desc {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) ; line-height: 1.5; transform: rotate(-0.1deg); font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}

.centerimgitem {display: flex; align-items: center; flex-wrap: wrap;}
.centerimglist {flex: 1 0 600px; max-width: 600px; margin-right: clamp(20px, calc( 140 / var(--inner) * 100vw ), 140px);}
.centerimgitem .textlist {flex:1 0 auto; width: 1%; }
.centerimgitem .icn img {height: clamp(30px, calc( 38 / var(--inner) * 100vw ), 38px);}
.centerimgitem .name {font-size: clamp(20px, calc( 36 / var(--inner) * 100vw ), 36px); font-weight: 400; color: #333333;}
.centerimgitem .desc {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) ; line-height: 1.5; transform: rotate(-0.1deg); font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}
.centerimgitem.reverse {flex-direction: row-reverse;}
.centerimgitem.reverse .centerimglist {margin-right: 0;margin-left: clamp(20px, calc( 140 / var(--inner) * 100vw ), 140px);}
.centerimgitem + .leftimglist {padding-top: clamp(20px, calc( 33 / var(--inner) * 100vw ), 33px);}

.pdtypecontain .bigbox {flex: 1 0 580px; max-width: 580px; margin-right:clamp(20px, calc( 94 / var(--inner) * 100vw ), 94px);}
.pdtypecontain .typebox {display: flex; flex-wrap: wrap; flex: 1 0 auto; width: 1%; padding-top: clamp(5px, calc( 14 / var(--inner) * 100vw ), 14px);}
.pdtypecontain .typeitem {flex: 1 0 50%; max-width: 50%; padding-right: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.typelist {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.typelist:first-child {padding-top: 0;}
.typelist .inner {display: flex;}
.typelist .smallicn {flex: 1 0 clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); max-width: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); margin-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.typelist .smalltext {flex: 1 0 auto; width: 1%; font-size: 14px; transform: rotate(-0.1deg);}
.typelist .name {display: block;  font-weight: bold; color: #333; }
.typelist .dec {padding-top: 10px; color: #555; line-height: 1.7;}

.subsecbg {margin:clamp(60px, calc( 150 / var(--inner) * 100vw ), 150px) 0; padding: clamp(50px, calc( 130 / var(--inner) * 100vw ), 130px) 0; background: url(../images/sub/bslab-bg.jpg) no-repeat 50% 50%; background-size: cover; text-align: center; color: #fff;} 
.subsecbg.bg2 {background: url(../images/sub/est05-bg.jpg) no-repeat 50% 50%; background-size: cover;}
.subsecbg .boxtt {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 400; transform: rotate(-0.1deg);}
.icnitem {display: flex; justify-content: center; flex-wrap: wrap; padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); margin: -12px;}
.icnlist {flex: 1 0 20%; max-width: 20%; padding: 12px;}
.icnlist .icn img {height: clamp(32px, calc( 49 / var(--inner) * 100vw ), 49px);}
.icnlist .text {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); }
.icnlist span,
.icnlist strong {display: block; transform: rotate(-0.1deg);}
.icnlist strong {padding-top: 5px;}

.bslabflx {display: flex; flex-wrap: wrap;}
.bslabflx .imgbx {flex:1 0 580px; max-width: 580px;}
.bslabflx .textbx {flex: 1 0 auto; width: 1%; padding-right: clamp(20px, calc( 120 / var(--inner) * 100vw ), 120px); padding-top: clamp(30px, calc( 52 / var(--inner) * 100vw ), 52px);} 
.bslabflx .inbx +.inbx {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.bslabflx .text + .text {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.bslabflx .text {color: #555; transform: rotate(-0.1deg); line-height: 1.5;}
.bslabflx .bullet-item {padding-left: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}

/* 제품 */
.pdtitem {display: flex; flex-wrap: wrap; margin: -2px;}
.pdtlist {flex: 1 0 16.66%; max-width: 16.66%; padding: 2px; margin-bottom: clamp(25px, calc( 90 / var(--inner) * 100vw ), 90px);}
.pdtlist .imgbx {position: relative;}
.pdtlist .image {position:relative; padding-bottom:182.60%; overflow:hidden;}
.pdtlist .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.pdtlist .hoverbx {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5); opacity: 0; transition: all .3s;}
.pdtlist .hoverbx img {width: clamp(20px, calc( 31 / var(--inner) * 100vw ), 31px);}
.pdtlist .textbx {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center; color: #000000;  font-family: var(--font2);}
.pdtlist .eng {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;  letter-spacing: -1.2px;color:#555;}
.pdtlist .kor {padding-top: 5px; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 500; transform: rotate(-0.1deg);  font-family: var(--font1);color:#555;}
.pdtlist .click {display: flex; align-items: center; justify-content: center; margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); height: clamp(25px, calc( 30 / var(--inner) * 100vw ), 30px); border: 0 solid #ccc; color: #555; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight: 500; }
.pdtlist .link:hover .hoverbx {opacity: 1;}
.pdtlist .link:hover .click {border-width: 1px; color: #000;}

/* 갤러리 */
.gallerytit {margin-bottom:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); font-size:clamp(18px, calc( 30 / var(--inner) * 100vw ), 30px); font-weight:bold; text-align:center;}
.galleryitem {display: flex; flex-wrap: wrap; margin:0 -2px;}
.gallerylist {flex: 1 0 33.33%; max-width: 33.33%; padding: 0 2px; margin-bottom:clamp(25px, calc( 90 / var(--inner) * 100vw ), 90px);}
.gallerylist .imgbx {position: relative;}
.gallerylist .image {position:relative; padding-bottom:71.98%; overflow:hidden;}
.gallerylist .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.gallerylist .textbx {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center;}
.gallerylist .eng {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #000; font-family:var(--font2);}
.gallerylist .hoverbx {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5); opacity: 0; transition: all .3s;}
.gallerylist .hoverbx img {width: clamp(20px, calc( 31 / var(--inner) * 100vw ), 31px);}
.gallerylist .link:hover .hoverbx {opacity: 1;}

/* 문의 */
.inquirywrap .real-cont {border-top: 1px solid #e8e8e8;}
.contactwrap .infobx {flex:1 0 740px; max-width: 740px; padding-right: clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px); padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.contactwrap .formbx {flex: 1 0 auto; width: 1%;}
.contactwrap .ttbx {padding-bottom: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); color: #333;}
.contactwrap .tt {font-size: clamp(20px, calc( 46 / var(--inner) * 100vw ), 46px); font-family:var(--font2); }
.contactwrap .subtt {padding-top: clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); transform: rotate(-0.1deg);}
.contactwrap .icninfolist {display: flex; align-items: center;}
.contactwrap .icninfolist + .icninfolist {margin-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.icninfolist .icn {margin-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.icninfolist .icn img {width: clamp(38px, calc( 50 / var(--inner) * 100vw ), 50px);}
.icninfolist .name,
.icninfolist .info {display: block; font-family: var(--font2); font-weight: bold; color: #333; line-height: 1.3;}
.icninfolist .info.num {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}
.contactwrap .btn-pack.large {min-width: 100%; transform: rotate(-0.1deg); background: #000; font-size: 16px;}
.contactwrap .input {height: clamp(38px, calc( 52 / var(--inner) * 100vw ), 52px);}

/* 견적내어보기 */
.estimate-front {display:flex; justify-content:space-between; gap:clamp(32px, calc(40 / var(--inner) * 100vw ), 40px); padding-top:clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px);}
.estimate-front .image {width:75%; max-width:900px;}
.estimate-front .image img {width:100%;}
.estimate-front .content {display:flex; flex-direction: column; text-align:right; gap:clamp(24px, calc(52 / var(--inner) * 100vw ), 52px);}
.estimate-front .title {font-size:var(--font-size-20); color:#333; line-height:1.3em;}
.estimate-front .texture {flex:1 1 auto; min-height:0; height:1%;}
.estimate-front .texture .tt {display:flex; align-items:center; justify-content:flex-end; gap:var(--padding-20); margin-bottom:var(--padding-20); font-weight:700;}
/*.estimate-front .texture .tt:before {content:''; width:80%; max-width:100px; height:1px; background:#000;}*/
.estimate-front .texture .imgname {word-break:break-all;}
.estimate-front .texture .items {display:grid; grid-template-columns:repeat(8, 1fr); gap:6px;}
.estimate-front .texture .item {display:block; position:relative; width:40px; border:0; cursor:pointer;}
.estimate-front .texture .item img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.estimate-front .texture .item:before {content:''; display:block; padding-bottom:100%;}
.estimate-front .texture .item.active:after {content:''; position:absolute; inset:0; border:2px solid #959595; z-index:2;}
.estimate-front .btn {display:inline-block; color:#333;}
.estimate-front .btn:before {content:''; display:inline-block; width:35px; height:35px; margin:-.2em 10px 0 0; background:url('/images/sub/icon-calculating.png') 50% 50%/contain no-repeat; vertical-align:middle;}

.estimate-example {display:flex; justify-content:space-between; align-items:center; gap:clamp(24px, calc(140 / var(--inner) * 100vw ), 40px); padding:clamp(20px, calc(100 / var(--inner) * 100vw ), 100px) 0 clamp(30px, calc( 65 / var(--inner) * 100vw ), 65px);}
.estimate-example .image {width:55%; max-width:750px;}
.estimate-example .content {width:45%; max-width:600px; display:flex; flex-direction:column; padding:0 clamp(0px, calc(50 / var(--inner) * 100vw ), 50px);}
.estimate-example .title {margin-bottom:1em; font-size:var(--font-size-20); color:#333; line-height:1.3em;}
.estimate-example .table .tt {margin:0 0 10px 10px; font-size:18px; color:#333; line-height:1.3em;}
.estimate-example .table table {width:100%;}
.estimate-example .table table:not(:last-child) {margin-bottom:clamp(24px, calc(40 / var(--inner) * 100vw ), 40px);}
.estimate-example .table table td {width:100%; padding:6px; background:#ededed; border:3px solid #fff; color:#333; line-height:1.5em; text-align:center;}
.estimate-example .table table td:first-child {width:36%;}
.estimate-example .table tr td:first-child {border-left:0;}
.estimate-example .table tr td:last-child {border-right:0;}
.estimate-example .table tr:first-child td {border-top:0;}
.estimate-example .table tr:last-child td {border-bottom:0;}

.estimate-go-front {display:block; margin-bottom:clamp(40px, calc(90 / var(--inner) * 100vw ), 90px); padding:clamp(12px, calc(24 / var(--inner) * 100vw ), 24px); background:#ededed; text-align:center; font-weight:800; color:#333;}
.estimate-go-front:hover {background:#ddd;}
.estimate-go-front:before {content:''; display:inline-block; width:35px; height:35px; margin:-.2em clamp(10px, calc(24 / var(--inner) * 100vw ), 24px) 0 0; background:url('/images/sub/icon-desktop.png') 50% 50%/contain no-repeat; vertical-align:middle;}

.estimate-form {display:flex; gap:clamp(40px, calc(68 / var(--inner) * 100vw ), 68px); color:#333;}
.estimate-form .col {width:100%;}
.estimate-form.st2 .col:first-child {padding-top:33px;}
.estimate-form .input {display:block; width:100%; height:clamp(40px, calc(52 / var(--inner) * 100vw ), 52px); border-color:#cccccc;}
.estimate-form .group {margin-bottom:4px;}
.estimate-form .tt {margin:40px 0 10px 10px; font-size:18px; color:#333; line-height:1.3em;}
.estimate-form .tt:first-child {margin-top:0;}
.estimate-form .text {margin-top:clamp(10px, calc(20 / var(--inner) * 100vw ), 20px); margin-left:clamp(10px, calc(20 / var(--inner) * 100vw ), 20px);}
.estimate-form .check {color:#555; padding-top:clamp(15px, calc(30 / var(--inner) * 100vw ), 30px); padding-bottom:clamp(20px, calc(40 / var(--inner) * 100vw ), 40px);}
.estimate-form .submit {display:block; width:100%; height:clamp(45px, calc(52 / var(--inner) * 100vw ), 52px); background:#000; border:0; color:#fff; transition:.4s; cursor:pointer;}
.estimate-form .submit:hover {background:#333;}

.btn-go-contact {display:block; margin-top:clamp(50px, calc(110 / var(--inner) * 100vw ), 110px); padding:clamp(12px, calc(24 / var(--inner) * 100vw ), 24px); background:#ededed; text-align:center; font-weight:800; color:#333;}
.btn-go-contact:hover {background:#ddd;}
.btn-go-contact:before {content:''; display:inline-block; width:35px; height:35px; margin:-.2em clamp(10px, calc(24 / var(--inner) * 100vw ), 24px) 0 0; background:url('/images/sub/icon-qa.png') 50% 50%/contain no-repeat; vertical-align:middle;}

.showroom.mgt130 {margin-top:clamp(50px, calc(130 / var(--inner) * 100vw ), 130px);}
.showroom.mgt110 {margin-top:clamp(50px, calc(110 / var(--inner) * 100vw ), 110px);}
.showroom.mgt40 {margin-top:clamp(10px, calc(40 / var(--inner) * 100vw ), 40px);}
.showroom .flex {display:flex; gap:clamp(10px, calc(40 / var(--inner) * 100vw ), 40px);}
.showroom .flex.end {justify-content:flex-end;}
.showroom .large {width:72.5%;}
.showroom .middle {width:53%;}
.showroom .small {width:25.715%;}