@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:10px; line-height:1.3; 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:var(--color-1); border-radius: 50%;}

.bg-gray {background:#fafafa;}
.swiper-button-lock {display:none !important;}
.swiper-button-disabled {display:none !important;}

/* about */
.greetingwrap {display: flex; flex-wrap: wrap; padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.greetingwrap .titlebx {flex: 1 0 50%; max-width: 50%; padding: 0 30px; font-size: clamp(18px, calc( 38 / var(--inner) * 100vw ), 38px); font-weight: bold; line-height: 1.5;}
.greetingwrap .descbx {flex: 1 0 auto ; width: 1%;}
.greetingwrap .dec {line-height: 1.6; color: #454545;}
.greetingwrap .dec + .dec {padding-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}
.greetingwrap .dec .font-semi {color: #242424;}
.imgitemwrap {margin-top: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); padding-top: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px);; border-top: 1px solid #ddd;}
.greetitem {display: flex; flex-wrap: wrap; margin: -15px;} 
.greetlist {flex: 1 0 50%; max-width: 50%; padding: 15px;}
.greetlist .name {display: block; padding-top: clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); text-align: center; font-weight: 600;}

.histopbg {position: relative; background: url(../images/sub/histop.jpg) no-repeat; background-size: cover; height: clamp(200px, calc( 260 / var(--inner) * 100vw ), 260px); border-radius: 24px;}
.histopbg .textbx {padding: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); position: absolute; bottom: clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); left: clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); width: clamp(190px, calc( 260 / var(--inner) * 100vw ), 260px); background:rgba(187, 34, 38,0.8); color: #fff; border-radius: 12px; font-weight: bold;} 
.histopbg .tit {font-size: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); }
.histopbg .etc {padding-top: 10px; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: right;}
.history-wrap {margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); padding-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border-top:2px solid #000;}
.history-box  {position: relative;}
.history-detail-item {display: flex; }
.history-detail-item:last-child {padding-bottom:0;}
.history-detail-item .year { padding-right:clamp(15px, calc( 75 / var(--inner) * 100vw ), 75px); position:relative; font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:bold; flex: 1 0 220px; max-width:220px; line-height:1; text-align: right; color:var(--color-1);}
.history-detail-item .year::after {position: absolute; content: ""; top:2px; right:-11px; width:22px; height:22px; border-radius: 50%; background:url(../images/sub/dot.png) no-repeat; background-size: contain;  z-index: 2; }
.history-detail-item .cont-wrap {flex: 1 0 auto; width: 1%; padding-left:clamp(20px, calc( 115 / var(--inner) * 100vw ), 115px);}
.history-detail-item .cont {margin-bottom: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); padding-bottom: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); border-bottom: 1px solid #ddd;}
.history-detail-item .contlist {display: flex; margin-bottom:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px);}
.history-detail-item .contlist:last-child {margin-bottom:0;}
.history-detail-item .month {flex:1 0 clamp(35px, calc( 67 / var(--inner) * 100vw ), 67px); max-width: clamp(35px, calc( 67 / var(--inner) * 100vw ), 67px); font-weight: 600;}
.history-detail-item .textbx { flex: 1 0 auto; width: 1%; color:#454545;}
.history-detail-item .text {padding-left: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); position: relative;}
.history-detail-item .text::after {position: absolute; content: ''; left: 0; top: 9px; width: 3px; height: 3px; border-radius: 50%; background:var(--color-1);}
.progress-container {position:absolute; left:220px; top:10px; height:100%; width: 1px; background:#ddd;}
.progress-container .progress-bar { width:1px; background:var(--color-1);}

.brnadintro .introtext {font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 500; line-height: 1.4;}
.brnadintro .introimg {padding:clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 0;}
.blogoitem {display: flex; flex-wrap: wrap; margin: -20px -12px;}
.blogolist {flex: 1 0 20%; max-width: 20%; padding: 20px 12px;}
.blogolist .images {display: flex; align-items: center; justify-content: center; border-radius:10px; position:relative; overflow:hidden; height: clamp(70px, calc( 90 / var(--inner) * 100vw ), 90px); text-align: center;}
.blogolist .images img {height: 100%; object-fit: scale-down;}
.blogolist .images::after {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #ddd; border-radius:10px;}
.blogolist .name {display: block; padding-top:8px; text-align: center; color: #454545;}

.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:var(--color-1); font-weight:600; margin-bottom:6px;}
.directions .address-info .addr {color:#242424; font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:12px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:var(--color-1);}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}
@media (max-width: 1024px) {
	.root_daum_roughmap .wrap_map {height:300px !important;}
	.directions .address-info .addr {font-size:20px;}
	.directions .contact-info dl {padding:20px 0;}
	.directions .contact-info dt {padding-left:20px; width:140px;}
}
@media (max-width: 640px) {
	.root_daum_roughmap .wrap_map {height:250px !important;}	
	.directions {margin-top:30px;}
	.directions .address-info .addr {font-size:18px;}
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dl {padding:16px 0;}
	.directions .contact-info dt {padding-left:5px; width:110px;}
	.directions .contact-info dt svg {margin-right:10px;}
}

/* 상세버튼공통 */
.viewlink .linkcon {display:flex; justify-content: center; flex-wrap:wrap; margin:0 -5px; padding-top:30px;}
.viewlink .linkbx {flex:1 0 50%; max-width:50%; padding:0 5px;}
.viewlink .link {display:flex; align-items:center; justify-content:center; height:clamp(40px, calc( 62 / var(--inner) * 100vw ), 62px); border-radius:31px; font-weight:600; background: #f4f4f4; line-height: 1.1; color:#000 !important;}
.viewlink .link.border-b {border:1px solid #2c2c2c; color:#2c2c2c; background: #fff;}
.viewlink.type2 .linkbx {max-width: clamp(180px, calc( 245 / var(--inner) * 100vw ), 245px);}
.viewlink.type2 .linkcon {padding-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}

/* 탭공통 */
.tabwrap {padding-bottom: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); margin-bottom: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); border-bottom: 1px solid #ddd;}
.pdtab {display: flex; flex-wrap: wrap; margin: -6px;}
.pdlist {flex: 1 0 16.66%; max-width: 16.66%; padding: 6px;} 
.pdlink {display: flex; align-items: center; justify-content: center; padding: 0 10px; width: 100%; height: clamp(40px, calc( 48 / var(--inner) * 100vw ), 48px); border-radius: 8px; background: #eeeeee; color: #6c6c6c; font-weight: 500; text-align: center;}
.pdlink.active {background:var(--color-1); color: #fff;}

/* 제품 */
.pdslideWrap {margin-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); position: relative;}
.pdslideWrap .imgbx {flex:1 0 600px; max-width: 600px; margin-right: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.pdslideWrap .images {position:relative; padding-bottom:100%; overflow:hidden; border-radius: 20px;}
.pdslideWrap .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%; object-fit: contain;}
.pdslideWrap .textbx {flex: 1 0 auto; width: 1%; padding-top: clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px);}
.pdslideWrap .swiper-slide {padding: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.pdslideWrap .link {display: block; padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative; box-shadow: 3px 0 clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) rgba(0, 0, 0,0.3); border-radius: 24px; height: 680px;}
.pdslideWrap .numbx {position: absolute; right:clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); top: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); z-index: 1;}
.pdslideWrap .numbx:after {position: absolute; content: ''; right: -13px; top: -13px; background: url(../images/sub/pdcircle.png) no-repeat; background-size: contain; width: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); height: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); z-index: -1;} 
.pdslideWrap .numbx .num {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}
.pdslideWrap .titbx {padding-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); margin-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); border-bottom: 1px solid #ddd; }
.pdslideWrap .bottomlayer {max-height: clamp(180px, calc( 240 / var(--inner) * 100vw ), 240px); overflow-y: auto;}
.pdslideWrap .namebox {font-size: clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; line-height: 1.4;}
.pdslideWrap .sub {padding-top: clamp(10px, calc( 25 / var(--inner) * 100vw ), 25px); font-weight: 500; color: #6c6c6c;display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.pdslideWrap .desc {color: #6c6c6c; line-height: 1.6; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5;}
.pdslideWrap .link .btn-more {position: absolute; bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); right: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.pdslideWrap .link:hover .btn-more { background:var(--color-1); border-color: var(--color-1); color: #fff;}
.pdslideWrap .link:hover .btn-more .icn {background: url(../images/main/btn-arrow1.png) no-repeat; background-size: contain;}
.pdslideWrap .swiper-button-prev {left: 12%; background: none;}
.pdslideWrap .swiper-button-next {right: 12%; background: none;}
.pdslideWrap .btn-arrow3 {display: flex; align-items: center; justify-content: center; margin-top: 0; top: 50%; transform: translateY(-50%); background: #fff; width: clamp(25px, calc( 64 / var(--inner) * 100vw ), 64px); height: clamp(25px, calc( 64 / var(--inner) * 100vw ), 64px); border-radius: 50%; border: 1px solid #ddd;}
.pdslideWrap .btn-arrow3:after {display: none;}
.pdslideWrap .btn-arrow3 svg {color: #686868; width: clamp(16px, calc( 30 / var(--inner) * 100vw ), 30px);}
.pdslideWrap .btn-arrow3:hover {background:var(--color-1);}
.pdslideWrap .btn-arrow3:hover svg {color: #fff;}
.indescbx .indesc {color: #505050; line-height: 1.7;} 

.pdwrrapper {display:flex; flex-wrap:wrap;}
.pdwrrapper .slidebox {flex:1 0 600px; max-width:600px; margin-right:clamp(20px, calc( 90 / var(--inner) * 100vw ), 90px);}
.pdwrrapper .image {position:relative; padding-bottom:100%; overflow:hidden; border-radius: 20px; border: 1px solid #ddd;}
.pdwrrapper .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%; object-fit: contain;  }
.pdwrrapper .thumb-slide {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); padding-left: 1px;}
.pdwrrapper .thumb-slide .image:after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255,0.7);}
.pdwrrapper .swiper-slide-thumb-active .image {border-color: #242424;}
.pdwrrapper .swiper-slide-thumb-active .image:after {display: none;}
.pdwrrapper .pdtextbox {flex:1 0 auto; width:1%; display: flex; flex-direction: column; justify-content: space-between;}
.pdtextbox .titbx {padding-bottom: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);  margin-bottom: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); border-bottom: 1px solid #ddd;color:#000 !important;	}
.pdtextbox .namebox {padding-bottom: clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); border-bottom: 1px solid #ddd; font-size: clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; line-height: 1.4; color:#000 !important;}
.viewdetailbx {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);color:#000 !important;}
.viewdetailbx.type2 {padding-top: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px);}
.detailbx + .detailbx {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.detailbx .title {padding-bottom: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); margin-bottom:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 600; border-bottom: 1px solid #ddd;} 
.detailbx .title.type2 {font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px);}
.detailbx .detailtext {padding-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); border-bottom: 1px solid #ddd;}
.detailbx .text {line-height: 1.6; color: #454545;}
.viewtext .bullet-item .bullet-list {color:#000 !important;}
.viewdetailbx span,
.viewdetailbx div,
.viewdetailbx p ,
.viewdetailbx li,
.viewdetailbx table {color:#000 !important;}

/* notice */
.patentitem {display: flex; flex-wrap: wrap; margin: -20px -13px;}
.patentlist {flex: 1 0 25%; max-width: 25%; padding: 20px 13px;}
.patentlist .popimg {position:relative; padding-bottom:125%; }
.patentlist .popimg img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%; overflow:hidden; border-radius: 24px; border: 1px solid #ddd;}
.patentlist .tit {display: block; padding-top: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-weight: 500; color: #454545; text-align: center;}

.catalitem {display: flex; flex-wrap: wrap; padding: -20px -13px;} 
.catallist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px 13px;}
.catallist.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.catallist .clink {display:block; }
.catallist .thumbwrap {position: relative;}
.catallist .thumb {position:relative; padding-bottom:100%; margin-bottom:12px; overflow:hidden; border-radius: 24px;}
.catallist .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; }
.catallist .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd; border-radius: 24px;}
.catallist .tit {color:#454545; text-align: center; font-weight: 500;}
.catallist .hoverbx {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; background: linear-gradient( to bottom ,#fd7478, #e9b3b4); width: 100%; height: 100%; border-radius: 24px; opacity: 0.95; visibility: hidden;}
.catallist .hoverbx .text {display: flex; align-items: center; color: #fff;}
.catallist .hoverbx span {display: inline-block; padding-right: 12px; font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight: 500;}
.catallist .hoverbx img {vertical-align: middle;}
.catallist .clink:hover .hoverbx {visibility: visible;}

.catalflx {display: flex; flex-wrap: wrap;}
.catalflx .imgbx {flex: 1 0 600px; max-width: 600px; margin-right: clamp(20px, calc( 90 / var(--inner) * 100vw ), 90px);}
.catalflx .image {position:relative; padding-bottom:100%; overflow:hidden; border-radius: 20px; border: 1px solid #ddd;}
.catalflx .image img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%; object-fit: contain;  }
.catalflx .catextbx {padding-right: clamp(10px, calc( 100 / var(--inner) * 100vw ), 100px); flex: 1 0 auto; width: 1%; display: flex; flex-direction: column; justify-content: space-between;}
.catalflx .namebox {padding-bottom: clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); margin-bottom: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px); border-bottom: 1px solid #ddd; font-size: clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 700; color: #333; line-height: 1.4;}
.catextbx .viewlink .linkcon{justify-content: flex-start;}

.inquirywrap .buttons .cen .btn-pack {border-radius: 25px; font-weight: 400 !important; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px) !important;}