@charset "utf-8";


/* ********************************* PC over : 1025 ~  ********************************* */

/* ******************** 공용 ******************** */
main .inner {max-width:1400px; margin:0 auto; padding:120px 0;}

/**** 메인슬라이드 ****/
main .main-visual {height:calc(100vh - 80px); position:relative;}
main .main-visual .swiper-slide {}
main .main-visual .slogan {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; text-align:center; z-index:2; color:#fff; line-height:1.3;} 
main .main-visual .slogan dt {font-family: 'NEXONLV1'; font-size:70px; font-weight:700; width: 80%; margin: 0 auto;}
main .main-visual .slogan dd {margin-top:45px;}
main .main-visual h2 {font-size:50px; font-weight:400; position:absolute;left:50%; top:15vh; width:100%; transform:translateX(-50%); text-align:center; z-index:2; color:#fff; line-height:1.4;}
main .visual-swiper {width:100%; height:100%; overflow-x:hidden;}
main .visual-swiper img {width:100%; height:100%; object-fit:cover;}
main .swiper-pagination {bottom:60px;}
main .swiper-pagination-bullet {width:20px; height:20px; background:transparent; border-radius:50%; border:3px solid #fff; opacity:1;}
main .swiper-pagination-bullet-active {background:#fff;}


/**** 제품슬라이드 ****/
main .part2 h3 {font-family:'NEXONLV1'; text-align:center; font-size:48px; color:var(--green);}
main .part2 p.slogan {font-size:18px; text-align:center; margin-top: 10px;}
main .part2 .product_slide {margin-top:50px;}
main .part2 .product_slide ul {margin:0 -12.5px; position:relative;}
main .part2 .product_slide .slick-arrow {position:absolute; top:50%; transform:translateY(-50%); text-indent:-9999px; border:2px solid var(--border1); border-radius:50%; height:80px; width:80px;}
main .part2 .product_slide .slick-arrow:hover {border:2px solid var(--green); filter:invert(49%) sepia(12%) saturate(2482%) hue-rotate(86deg) brightness(87%) contrast(92%); }
main .part2 .product_slide .slick-prev {left:-100px; background:url(../images/main/prod_slide_prev.png) no-repeat center;}
main .part2 .product_slide .slick-next {right:-100px; background:url(../images/main/prod_slide_next.png) no-repeat center;}
main .part2 .product_slide ul li {border:1px solid var(--border1); margin:20px 12.5px; border-radius:15px; overflow:hidden; text-align:center; box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 11px 0px;}

main .part2 .product_slide ul li .img {padding:20px; background:#f7f7f7; transition:all 0.2s;}
main .part2 .product_slide ul li .img img {width:100%; height:100%; object-fit:contain; aspect-ratio:1/1; mix-blend-mode: multiply; transition:all 0.2s;}
main .part2 .product_slide ul li:hover .img {background:#fff;}
main .part2 .product_slide ul li:hover .img img {transform:scale(1.05);}
main .part2 .product_slide ul li .text {padding:25px; color:#000; transition:all 0.2s;}
main .part2 .product_slide ul li .text dt {font-size:22px; font-weight:600; line-height: 1.3;   overflow: hidden; white-space: normal; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; word-break: break-all;}
main .part2 .product_slide ul li .text dd {margin-top:5px;}
main .part2 .product_slide ul li:hover .text {color:#fff; background:var(--green);}

/* 제품슬라이드탭 */
main .tabVer { position:relative; text-align: center; margin-top: 50px;}
main .tabVer:after {content:""; display:block; width:100%; height:1px; background:#e1e1e1; position:absolute; top:10px;}
main .tabVer h4 {text-align:center; padding:0 40px; font-family:'NEXONLV1'; font-weight:700; color:#000; background:#fff; position:relative; z-index:3; display:inline-block; margin:0 auto;}
main .tabVer .swiper-slide {position:relative; text-align:center;}
main .tabVer .scrollable {width: 100%; display: flex; text-align:center; flex-wrap:wrap; justify-content: center; -ms-overflow-style: none; justify-content:center; row-gap:15px; margin-top:25px;}
main .tabVer .scrollable::-webkit-scrollbar {display: none;}
main .tabVer .scrollable li {display: inline-block; margin:0 22.5px; cursor:pointer; width:auto;
text-align:center; font-weight:500; user-select: none; line-height: 1; padding-bottom:4px; position:relative;}
main .tabVer .scrollable li.on {color:var(--green);}
main .tabVer .scrollable li:hover a {color:var(--green);}
main .tabVer .scrollable li:hover:before {content:""; display:block; width:100%; height:2px; background:var(--green); position:absolute; bottom:-3px;}
main .tabVer .scrollable li.on:before {content:""; display:block; width:100%; height:2px; background:var(--green); position:absolute; bottom:-3px;}


/* 공지사항 */
main .part3 {background:url(../images/main/part3_bg.webp) no-repeat center/cover; }
main .part3 .tit {display:flex; justify-content:space-between;}
main .part3 .tit h3 {font-family:'NEXONLV1'; color:#fff; font-size:36px;}
main .part3 .tit a.btn {display:inline-block; color:#fff; font-size:14px; padding:5px 20px; border:1px solid #9c9c9c; background:rgba(0,0,0,0.6); border-radius:2rem; line-height: 30px; }
main .part3 .list {display:grid; grid-template-columns:repeat(3,1fr); gap:90px; margin-top:60px;}
main .part3 .list a {color:#fff;}
main .part3 .list a dt {font-size:24px; font-weight:600; overflow: hidden; white-space: normal;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; padding-top:27px; position:relative; transition:all 0.2s;}
main .part3 .list a dt:before {content:""; display:block; position:absolute; height:2px; width:100px; background:#32ab59; top:0;}
main .part3 .list a:hover dt {color:#32ab59;}
main .part3 .list a dd {margin-top:25px; overflow: hidden; white-space: normal;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
main .part3 .list a span {display:block; margin-top:35px;}

/* 하단 메뉴링크 */
main .part4 .inner {padding:80px 0; display:flex; justify-content:space-between; gap:90px;}
main .part4 .inner article {display:flex; flex-direction:column; justify-content:space-between; padding-left:70px; position:relative; column-self:center;}
main .part4 .inner article:nth-of-type(3) {padding-left:77px;}
main .part4 .inner article dt {font-family:'NEXONLV1'; color:#000; font-size:20px; font-weight:600; line-height: 1;}
main .part4 .inner article dd {margin-top:10px;}
main .part4 .inner article:nth-of-type(1):before {content:""; display:block; position:absolute; width:45px; height:45px; background:url(../images/main/i-link_estimate.png) no-repeat center/contain; left:0; top:0;}
main .part4 .inner article:nth-of-type(2):before {content:""; display:block; position:absolute; width:45px; height:45px; background:url(../images/main/i-link_as.png) no-repeat center/contain; left:0; top:0;}
main .part4 .inner article:nth-of-type(3):before {content:""; display:block; position:absolute; width:56px; height:45px; background:url(../images/main/i-link_reference.png) no-repeat center/contain; left:0; top:0;}
main .part4 .inner article a.btn { margin-top:20px; position:relative; color:#000; font-weight:200; font-size:14px;}

main .part4 .inner article a.btn i {position:absolute; width:80px; height:1px; background:#ccc; bottom:-7px; left:0; transition:all 0.2s;}
main .part4 .inner article a.btn i:after { content: ""; position: absolute; left: 60px; bottom: -1px; width: 15px; border-top: 1px solid #ccc; transform: rotate(45deg) translateY(-9px); opacity:1; transition:0.2s;}
main .part4 .inner article a.btn:hover i { width:130px; background:var(--green);}
main .part4 .inner article a.btn:hover i:after {border-top: 1px solid var(--green); left:110px;}
main .part4 .inner article a.btn:hover {color:var(--green);}

/* ********************************* 테블릿 : ~ 1024 ********************************* */
@media screen and (max-width:1024px), print{
main .inner {padding:80px 30px;}

/**** 메인슬라이드 ****/
main .main-visual {height:60vh;}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom:5vh;}
main .main-visual .slogan dt {font-size:45px;}


/* 제품슬라이드탭 */
main .tabVer { position:relative;}
main .tabVer .swiper-slide {position:relative; text-align:center;}
main .tabVer .scrollable {width: 100%; white-space: nowrap; overflow:visible; display:flex; flex-wrap:wrap; -ms-overflow-style: none;}
main .tabVer .scrollable::-webkit-scrollbar {display: none;}
main .tabVer .scrollable li {display: inline-block; margin:0 10px; cursor:pointer; width:auto;
text-align:center; font-weight:300; user-select: none; font-size:16px;}
main .tabVer .scrollable li.on {color:var(--green);}
main .tabVer .scrollable li.on:before {content:""; display:block; width:100%; height:2px; background:var(--green); position:absolute; bottom:-3px;}

main .part2 h3 {font-size:36px}
main .part2 p.slogan {font-size:16px;}
main .part2 .product_slide {margin-top: 30px;}
main .part2 .product_slide ul {padding:0 30px;}
main .part2 .product_slide ul li {margin: 20px 7.5px;}
main .part2 .product_slide ul li .text {padding:20px;}
main .part2 .product_slide ul li .text dt {font-size:18px;}
main .part2 .product_slide .slick-arrow {width:40px; height:40px;}
main .part2 .product_slide .slick-prev {left:-12px; background-size: 10px;}
main .part2 .product_slide .slick-next {right:-12px; background-size: 10px;}
main .tabVer {margin-top:30px;}

main .part3 .tit h3 {font-size:30px;}
main .part3 .tit a.btn {padding: 2px 15px;}
main .part3 .list {margin-top:40px; grid-template-columns: repeat(1, 1fr); gap:50px;}
main .part3 .list a dt {font-size: 20px; padding-top: 20px;}
main .part3 .list a dd {margin-top:15px;}
main .part3 .list a span {margin-top: 25px;}

main .part4 .inner {padding:60px 30px; gap:3vw;}
main .part4 .inner article {padding-left:60px;}
main .part4 .inner article dt {font-size:18px;}
main .part4 .inner article:nth-of-type(3) {padding-left:67px;}
main .part4 .inner article:nth-of-type(1):before {width:40px;}
main .part4 .inner article:nth-of-type(2):before {width:40px;}
main .part4 .inner article:nth-of-type(3):before {width:47px;}

}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
main .inner	{padding:60px 30px;}

main .tabVer {display:none;}

main .tabVer .scrollable {width: 100%; white-space: nowrap; overflow-x:auto; display:flex; flex-wrap:wrap; -ms-overflow-style: none;}	
main .tabVer .scrollable li.on {border-bottom:2px solid var(--green);}
main .tabVer .scrollable li.on:before {display:none;}
	
/**** 메인슬라이드 ****/
main .main-visual {height:50vh;}
main .main-visual .slogan {padding:0 30px; top:45%;}
main .main-visual .slogan dt {font-size:clamp(24px, 4vw, 36px);}
main .main-visual .slogan dd {margin-top:20px;}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom:3vh;}
main .swiper-pagination-bullet {width:15px; height: 15px;}
main .part2 p.slogan {display:none;}

/* 제품슬라이드탭 */ 
main .part2 h3 {font-size:24px; text-align:left;}
main .part2 .product_slide {margin-top:20px;}
main .part2 .product_slide ul {padding:0; margin:0 -7.5px;}
main .part2 .product_slide .slick-arrow {top:-35px; width: 35px; height: 35px;}
main .part2 .product_slide .slick-next {right:6px;}
main .part2 .product_slide .slick-prev {right:48px; left:auto;}
main .part2 .product_slide ul li {margin:0 7.5px; box-shadow:none;}
main .part2 .product_slide ul li .img {padding:10px;}
main .part2 .product_slide ul li .text {min-height:101px; padding: 15px 10px;}
main .part2 .product_slide ul li .text dt {-webkit-line-clamp: 2; font-size:16px;}
main .part2 .product_slide ul li .text dd {font-size:15px;}
main .tabVer {margin-top:20px;}
main .tabVer .scrollable {flex-wrap:nowrap; justify-content: start; margin-top: 15px;}

main .part3 .tit {align-items: flex-end;}
main .part3 .tit h3 {font-size:24px;}
main .part3 .list {gap:30px;}
main .part3 .list a dt {font-size:16px;}
main .part3 .list a dd {display:none;}
main .part3 .list a span {margin-top:10px; font-size:14px;}
main .part3 .list a dt:before {width:60px;}



main .part4 .inner {padding:40px 30px 55px; gap:3vw; justify-content:center; display:grid;grid-template-columns:repeat(3,1fr);} 
main .part4 .inner article {padding-left:0px; padding-top:50px; text-align: center;}
main .part4 .inner article dt {font-size:16px; line-height:1.3;}
main .part4 .inner article:nth-of-type(1):before {width:30px; left:50%; transform:translateX(-50%);}
main .part4 .inner article:nth-of-type(2):before {width:30px; left:50%; transform:translateX(-50%);}
main .part4 .inner article:nth-of-type(3):before {width:37px; left:50%; transform:translateX(-50%);}
main .part4 .inner article:nth-of-type(3) {padding-left:0px;}
main .part4 .inner article dd {display:none;}
main .part4 .inner article a.btn {margin-top:8px;}
main .part4 .inner article a.btn i {left: 54%; bottom:-10px; transform: translateX(-50%); width: 70px;}
main .part4 .inner article a.btn i:after {left:51px;}
main .part4 .inner article a.btn:hover i { width:100px; background:var(--green);}
main .part4 .inner article a.btn:hover i:after {border-top: 1px solid var(--green); left:80px;}
}