 @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:10px; margin-top:5px; line-height:1.3; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.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:#454545; border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}

.mt80 {margin-top:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px) !important;}

.bg-gray {background:#f9f9f9;}

.contentwrap {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0;}
.contitle {margin-bottom: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px);font-weight: bold;}
.contitle .titsmall {display: inline-block; margin-left: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(13px, calc( 16 / var(--inner) * 100vw ), 16px); line-height: 1.4; font-weight: 400; color: #454545;}
.consubtit {margin-bottom: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.nortext {color: #454545; line-height: 1.4;}
.contitle.type2 {margin-bottom: clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px);}
.contitle.type3 {margin-bottom: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}

.bgtextwrap {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0; background-size: cover !important; color: #fff; }
.bgtextwrap .small {display: block;font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 500; color:var(--color-primary);}
.bgtextwrap .tit {margin-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px);font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); line-height: 1.4; font-weight: bold;}
.bgtextwrap.bg1 {background:url(../images/sub/bgtext1.jpg) no-repeat 50% 50%;}
.bgtextwrap.bg2 {background:url(../images/sub/bgtext2.jpg) no-repeat 50% 50%;}

.greeting-wrap {overflow: hidden;}
.greeting-wrap .flxWrap {align-items: center;}
.greeting-wrap .imgbx {flex: 1 0 500px; max-width: 500px; margin-right: clamp(10px, calc( 75 / var(--inner) * 100vw ), 75px);}
.greeting-wrap .greeting-tit {flex: 1 0 auto; width: 1%;}
.greeting-wrap .greeting-tit .eng {display: block;font-weight: 500; color:var(--color-primary); letter-spacing: 4px;}
.greeting-wrap .greeting-tit .tit {margin-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px);font-size: clamp(22px, calc( 36 / var(--inner) * 100vw ), 36px); line-height: 1.4; font-weight: 500;}
.greeting-wrap .greeting-tit .sub-tit {margin-top: clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px);font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.greeting-wrap .greeting-tit .decbx {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); line-height: 1.6; color: #454545;letter-spacing: -0.5px;}
.greeting-wrap .greeting-tit .dec {margin-top: 10px;}
.greeting-wrap .greeting-tit .last {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.greeting-wrap .greeting-tit .bigtxt {font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); line-height: 1.4; font-weight: 600;}
.greeting-wrap .signbx {display: flex; align-items: center; justify-content: flex-end; margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.greeting-wrap .signbx .naem {margin-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.4; font-weight: 600; }
.greeting-wrap .signbx img {width: clamp(120px, calc( 181 / var(--inner) * 100vw ), 181px);}
 
.bordertxt {padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); margin-bottom: 10px; position: relative; border:1px solid #ddd;}
.bordertxt:after {position: absolute; content: ''; left: 0; top: 0; width:4px; height: 100%; background:var(--color-primary);}

.ordiflx1.flxWrap .imgbx {flex:1 0 580px; max-width: 580px; margin-right: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.ordiflx1.flxWrap .textbx {flex:1 0 auto; width: 1%;}

.checklist + .checklist {margin-top:clamp(14px, calc( 23 / var(--inner) * 100vw ), 23px);}
.checklist {padding-left: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); position: relative; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.6;} 
.checklist::before {position: absolute; content: ''; left: 0; top: 3px; width: clamp(18px, calc( 25 / var(--inner) * 100vw ), 25px); height: clamp(16px, calc( 23 / var(--inner) * 100vw ), 23px);  background: url(../images/sub/check.png) no-repeat; background-size: contain;}

.law-section {line-height: 1.4;}
.law-title {margin-bottom: 10px; color: var(--color-primary); font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;  }
.law-desc {color: #454545; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); }
.lowcon {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.law-btn { display: inline-flex; align-items: center; justify-content: center; width: clamp(105px, calc( 120 / var(--inner) * 100vw ), 120px); height: clamp(34px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); border-radius: 5px; font-weight: 500; border: none; background:var(--color-primary);color: #fff;}
.law-box {padding-top: 15px; color: #454545; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); }

.ordibg1 {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0; background:url(../images/sub/ordi-bg1.jpg) no-repeat 50% 50%; background-size: cover; color: #fff;}
.ordiflx2.flxWrap {flex-direction: row-reverse; justify-content: space-between;}
.ordiflx2.flxWrap .textbx {width: 65%;}
.ordiflx2.flxWrap .title {font-size:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px);}
.ordiflx2.flxWrap .descbx {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.ordiflx2.flxWrap .desc {margin-top: 10px; line-height: 1.4; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.ordiflx2.flxWrap .desc + .desc {margin-top: 10px;}

.placeitem {display: flex; flex-wrap: wrap; margin:-20px;}
.placelist {flex: 1 0 33.33%; max-width: 33.33%; padding:20px;}
.placelist .textbx {padding-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); text-align: center;}
.placelist .title {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; }

.ordibg2 {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0 clamp(70px, calc( 160 / var(--inner) * 100vw ), 160px); background:url(../images/sub/ordi-bg2.jpg) no-repeat 50% 50%; background-size: cover; color: #fff;}
.ordibg2 .subtit {font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight:bold; }
.ordibg2 .maintit {margin-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(26px, calc( 60 / var(--inner) * 100vw ), 60px); font-weight: 700; line-height: 1.2;}
.ordibg2 .arrowflx {justify-content: flex-start; margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.ordibg2 .arrowflx .btn-more {min-width: clamp(150px, calc( 240 / var(--inner) * 100vw ), 240px); }
.ordibg2 .arrowflx .btn-more svg {color: #fff;}

.law-table {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.law-table table {border-bottom: 1px solid #ddd;}
.law-table th, 
.law-table td { padding: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px) 10px; border-right: 1px solid #ddd; border-top: 1px solid #ddd; text-align: center; color: #454545;}
.law-table th:last-child, 
.law-table td:last-child {border-right: none; }
.law-table th { background: #f9f9f9; font-weight: bold; }
.highlight {display: inline-block; padding:0 clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); position: relative; }
.highlight:before {position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: clamp(8px, calc( 13 / var(--inner) * 100vw ), 13px); background: rgba(213, 174, 61, 0.3);z-index: -1;}
.table-wrap .lastext {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.law-table .tabletit {margin-bottom:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold;}

.flxWrap.fricflx1 {align-items: center;}
.flxWrap.fricflx1 .imgbx {flex: 1 0 581px; max-width: 581px; margin-right: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.flxWrap.fricflx1 .textbx {flex: 1 0 auto; width: 1%;}
.fricitem {display: flex; flex-wrap: wrap; margin:-20px; padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.fricitem .friclist {flex: 1 0 33.33%; max-width: 33.33%; padding:20px;}

.exampitem {display: flex; flex-wrap: wrap;margin:-20px;}
.exampitem .examplist {flex: 1 0 50%; max-width: 50%; padding:20px;}
.exampitem .images {position: relative;}
.exampitem .images img {width: 100%;}
.exampitem .images:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.exampitem .textbx {padding:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) 0; text-align: center; background: var(--color-primary); color: #fff;}
.exampitem .text {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 700; }
.exampitem .examplist .bullet-item {padding-top:20px;}
.exampitem .examplist .bullet-list + .bullet-list {margin-top:clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px);}

.exampitem.type2 .examplist {flex: 1 0 25%; max-width: 25%; padding:20px;}
.exampitem.type2 .inner {border-radius:24px; overflow: hidden; box-shadow:0 8px 16px 0 rgba(0,0,0,.16);}
.exampitem.type2 .images:after {border-top-left-radius: 24px; border-top-right-radius: 24px;}

.material-list { display: flex; flex-wrap: wrap; margin: -10px; }
.material-item {flex: 1 0 25%; max-width: 25%; padding:10px;}
.material-item .inner { display: flex; align-items: center; justify-content: center; padding: clamp(12px, calc( 19 / var(--inner) * 100vw ), 19px) 10px; background: #f7efd8; border-radius: 8px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 700; width: 100%; }

.certitem {display: flex; flex-wrap: wrap; margin:-20px;}
.certitem .certlist {flex: 1 0 25%; max-width: 25%; padding:20px;}

.methodwrap {max-width: 1920px; width: 100%; margin:0 auto; background: #f6f6f6;}
.methodwrap .imgbx {flex: 1 0 960px; max-width: 960px;}
.methodwrap .textbx {flex: 1 0 auto; width: 1%; padding:clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);}
.methodwrap .textbx .inner {max-width: 640px; width: 100%;}
.methodwrap .textbx .title {font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 700; }
.methodwrap .textbx .sub-dec {margin-top: 7px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.4;}
.methodwrap .textbx .checkitembx {margin-top: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.methodwrap .textbx .checktit {display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px; padding: 8px 0; min-width: clamp(200px, calc( 300 / var(--inner) * 100vw ), 300px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; border-radius: 20px;background: #000;color: #fff;}
.methodwrap .checklist + .checklist {margin-top: clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px);}
.methodwrap .checklist {padding-left: clamp(25px, calc( 35 / var(--inner) * 100vw ), 35px);}
.methodwrap .checklist::before {top: 4px; width: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); height: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px);}

.materialicn-list {display: flex;flex-wrap: wrap; margin:-20px;}
.materialicn-item {flex: 1 0 25%; max-width: 25%; padding:20px;}
.materialicn-item .inner {display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px 10px; border-radius: 24px; height: clamp(160px, calc( 270 / var(--inner) * 100vw ), 270px); box-shadow:0 8px 16px 0 rgba(0,0,0,.16);}
.materialicn-item img {width: clamp(70px, calc( 100 / var(--inner) * 100vw ), 100px);}
.materialicn-item .text {margin-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 700; text-align: center;}

.comcaseitem {display: flex; flex-wrap: wrap; margin: -20px;}
.comcaselist {flex: 1 0 33.33%; max-width: 33.33%; padding:20px;}
.comcaselist {border-radius:24px; overflow: hidden;}
.comcaselist .text {margin-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500; text-align: center;}


.btn-arrow {margin-top:0;top: 35%; width:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); height:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius:50%;  border:1px solid #ddd; transition: all 0.3s;}
.btn-arrow::after {display: none;}
.btn-arrow svg {width: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px); height: clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px); color: #242424;}
.btn-arrow:hover {background:var(--color-primary); border-color:var(--color-primary);}
.btn-arrow:hover svg {color: #fff;}
.swiper-button-prev.btn-arrow {left: 50%; transform: translate(-600px, -50%);} 
.swiper-button-next.btn-arrow {right: 50%; transform: translate(600px, -50%);}
.slidecont {position:relative; max-width:1920px; width:100%; margin:0 auto; padding: 0 16px; padding-bottom:  clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.slidecont .ginner {display:block;}
.slidecont .image {position:relative; padding-bottom:66.66%; overflow:hidden; border-radius:clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px);}
.slidecont .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%; object-fit : cover;}
.slidecont .textbx {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); text-align:center;width: 80%; margin:0 auto; opacity: 0; transition: all 0.3s;}
.slidecont .title {font-size:clamp(17px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:700; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:1;}
.slidecont .desc {padding-top:10px; font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color:#454545;line-height: 1.4; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:3;}
.slidecont .textbx {opacity: 1;}

.chkralist {display: flex;flex-wrap:wrap; margin: 0 -20px;}
.chkralist .item {display: flex; align-items: center; padding: 5px 20px;}
.chkralist .item .input {height: 30px;}
.chkralist .etc {display: flex; align-items: center;}
.chkralist .etcinput {margin-left:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.chkralist .etcinput input {max-width: clamp(120px, calc( 140 / var(--inner) * 100vw ), 140px); width: 100%;}