@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: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%;}

.bg-gray {background:#fafafa;}
#contArea.viewcon {max-width: 1060px;}

.tabwrap {margin-bottom: 60px;}
.tabitem {display: flex;justify-content: center;flex-wrap: wrap;margin:-5px -15px;}
.tablist {padding: 5px 15px;}
.tablist .link {display: block;position: relative; font-weight: bold;color: #999999;}
.tablist .link:after {position: absolute; content: ''; left: 0; bottom: 0; width: 0; height: 1px; background:var(--color-primary);}
.tablist .link.active {color:var(--color-primary); }
.tablist .link.active:after {width: 100%;}

.portitem.items {display: flex; flex-wrap: wrap; margin:-30px -6px;}
.portlist.item {flex: 1 0 25%; max-width: 25%; padding: 30px 6px;}
.portlist.item .images {position:relative; padding-bottom:76.47%; overflow:hidden;}
.portlist.item .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.portlist.item .textbx {margin-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); text-align: center; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}

.viewtitbx {margin-bottom: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.viewtitbx .title {font-size:clamp(20px, calc( 34 / var(--inner) * 100vw ), 34px); font-weight: bold; text-align: center;}
.mngitem {display: flex; justify-content: center; margin:0 -20px; padding-top: clamp(18px, calc( 35 / var(--inner) * 100vw ), 35px);}
.mngitem .name {display: block; padding:0 clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); position: relative; color: #888888; font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);}
.mngitem .name:after {position: absolute; content: ''; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #ddd;}
.mngitem .name:last-child:after {display: none;}
.mngitem .txt {display: inline-block; padding-left: clamp(18px, calc( 22 / var(--inner) * 100vw ), 22px);}
.mngitem .type1 .txt {background: url(../images/sub/viewicn1.png) no-repeat left center; background-size: clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px) auto;}
.mngitem .type2 .txt {background: url(../images/sub/viewicn2.png) no-repeat left center; background-size: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px) auto;}
.incontentbx .youtube {position:relative; padding-bottom:65%; overflow:hidden;}
.incontentbx .youtube iframe {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}

.incontentbx + .incontentbx {margin-top: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); padding-top: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); border-top: 1px solid #ddd;}

.intitbx {margin-bottom:clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.intitbx.type2 {margin-bottom:clamp(40px, calc( 85 / var(--inner) * 100vw ), 85px);}
.intitbx .intitle {font-size: clamp(24px, calc( 36 / var(--inner) * 100vw ), 36px); font-weight: bold;}
.intitbx .flxWrap {align-items: center; justify-content: space-between; }
.intitbx .indec {color: #999999;}

.topintro {margin-bottom: clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px);}
.guideitem + .guideitem {margin-top: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); padding-top: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); border-top: 1px solid #ddd;}
.guideitem {display: flex; flex-wrap: wrap;margin:-10px -5px;}
.guidelist {flex: 1 0 50%; max-width: 50%; display: flex;padding:10px 5px;}
.guidelist .numbx {flex: 1 0 36px; max-width: 36px;margin-top: clamp(1px, calc( 3 / var(--inner) * 100vw ), 3px);}
.guidelist .num {display: inline-flex;align-items: center;justify-content: center;width: clamp(22px, calc( 24 / var(--inner) * 100vw ), 24px); height: clamp(22px, calc( 24 / var(--inner) * 100vw ), 24px); border-radius: 50%; color: #fff; font-weight: bold;background: #000; line-height: 1;}
.guidelist .title { margin-bottom:10px;font-size:clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold;}
.guidelist .desc {display: block;font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #505050; line-height: 1.6;}
.guidelist .subinfoitem {margin-top:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.guidelist .subinfolist + .subinfolist {margin-top: 8px;}
.guidelist .subinfolist {display: flex; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #505050;}
.subinfolist .fname {flex: 1 0 clamp(70px, calc( 85 / var(--inner) * 100vw ), 85px); max-width: clamp(70px, calc( 85 / var(--inner) * 100vw ), 85px); font-weight: bold;}
.subinfolist .ftxt {flex: 1 0 auto; width: 1%;}

.inconwrap + .inconwrap {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); border-top: 1px solid #ddd;}
.inconwrap .flxWrap {flex-direction: row-reverse;align-items: center;}
.inconwrap .imgbx {flex:1 0 850px; max-width: 850px;}
.inconwrap .textbx {flex: 1 0 auto; width: 1%; padding-right: clamp(15px, calc( 60 / var(--inner) * 100vw ), 60px); letter-spacing: -0.5px;}
.inconwrap .subtit {margin-bottom: clamp(20px, calc( 47 / var(--inner) * 100vw ), 47px); font-size: clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: bold; }
.inconwrap .insubtit { font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold;}
.inconwrap .miditem {padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); }
.inconwrap .midlist {display: flex; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #505050;}
.inconwrap .midlist + .midlist {margin-top: 12px;}
.inconwrap .midlist .name {flex: 1 0 clamp(90px, calc( 115 / var(--inner) * 100vw ), 115px); max-width: clamp(90px, calc( 115 / var(--inner) * 100vw ), 115px); font-weight: bold;}
.inconwrap .midlist .txt {flex: 1 0 auto; width: 1%;}
.inconwrap .subtit + .prcbx {padding-top: 0;}
.inconwrap .prcbx {padding-top:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.inconwrap .price {display: block; padding-top: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold; color: #cc3c54;}
.inconwrap .pricedec {display: block; padding-top:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);color: #999999; line-height: 1.7;}
.inconwrap .pricedec span {display: block;}
.inconwrap + .telbx {margin-top: clamp(50px, calc( 120  / var(--inner) * 100vw ), 120px);}
.gallerybx + .gallerybx {padding-top:clamp(50px, calc( 120  / var(--inner) * 100vw ), 120px);}
.gallerybx .subtit {margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(20px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: bold; }
.subgallery {display: flex;flex-wrap: wrap;margin:-30px -12px;}
.subgallerylist {flex: 1 0 33.33%; max-width: 33.33%; padding: 30px 12px;}
.subgallerylist .images {position:relative; padding-bottom:76.44%; overflow:hidden;}
.subgallerylist .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;}
.subgallerylist.wid-6 {flex: 1 0 50%; max-width: 50%;}
.subgallerylist.wid-6 .images {padding-bottom:54.60%; }
.subgallerylist .textbx {margin-top:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);text-align: center;}
.subgallerylist .gtit {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #505050;}
.subgallerylist .gsubtit {display: block; padding-top: 5px; color: #999;}
.subgallerylist .gprice {display: block; padding-top:12px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #cc3c54;}
.telbx {background: url(../images/sub/telbg.png) no-repeat 50% 50% /cover; height: clamp(60px, calc( 130 / var(--inner) * 100vw ), 130px); border-radius:65px;}
.telbx .btn-tel {display: flex; align-items: center; justify-content: center; height: 100%; color: #fff;}
.telbx .tt {margin-right: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); padding-left: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); font-size:clamp(16px, calc( 26 / var(--inner) * 100vw ), 26px); background: url(../images/sub/tel.png) no-repeat left center; background-size: clamp(14px, calc( 24 / var(--inner) * 100vw ), 24px) auto;}
.telbx .number {font-size:clamp(18px, calc( 36 / var(--inner) * 100vw ), 36px); font-family: var(--font-play); font-weight: bold;}

.designbx {text-align: center;}
.designbx .txtimg img {width: clamp(280px, calc( 439 / var(--inner) * 100vw ), 439px);}
.designbx .img {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.contact .flxWrap {flex-direction: row-reverse;}
.contact .imgbx {flex: 1 0 726px; max-width: 726px;margin-left: clamp(10px, calc( 50 / var(--inner) * 100vw ), 50px);}
.contact .textbx {flex: 1 0 auto; width: 1%; }
.contact .contaclist + .contaclist  {margin-top: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);}
.contact .contaclist {display: flex;}
.contact .contaclist .name {flex:1 0 clamp(85px, calc( 95 / var(--inner) * 100vw ), 95px); max-width: clamp(85px, calc( 95 / var(--inner) * 100vw ), 95px); font-weight: bold;}
.contact .contaclist .text {flex: 1 0 auto; width: 1%; color: #787878;}
.contact .cnsnsitem {display: flex;align-items: center;}
.contact .cnsnslist {padding-right:clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px);}
.contact .cnsnslist:last-child {padding-right: 0;}
.contact .linkitem {display: flex; margin: -5px; padding-top: clamp(25px, calc( 70 / var(--inner) * 100vw ), 70px);}
.contact .linklist {padding: 5px;}
.contact .linklist .link {display: flex;align-items: center;justify-content: center;width: clamp(170px, calc( 226 / var(--inner) * 100vw ), 226px); height: clamp(48px, calc( 80 / var(--inner) * 100vw ), 80px);}
.contact .linklist .txt {display: inline-block;padding-left:clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold; color: #fff;}
.contact .linklist img {width: clamp(22px, calc( 40 / var(--inner) * 100vw ), 40px);}
.contact .linklist.list1 .link {background: #ffeb3b;}
.contact .linklist.list2 .link {background: #40a539;}
.contact .linklist.list1 .txt {color: #3e2723;}