@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* 1) main visual */
/* main */
.main-visual {z-index:2; width: 100%;height: calc(var(--vh, 1vh) * 100); min-height: 100%; overflow:hidden;}
.main-visual .swiper-wrapper {height: 100%!important; justify-content: space-between;}
.main-visual .swiper-slide {position: relative; height: 100% !important;}
.main-visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: #000 no-repeat 50% 50% / cover; z-index: -2;}
.main-visual .s1::before{ background-image: url('/images/main/visual_img01.jpg'); }
.main-visual .s2::before{ background-image: url('/images/main/visual_img01.jpg'); }
/* text */
.main-visual .text {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main-visual .text h2 {font-size: 62rem; font-weight:700; line-height: 1.35em; }
.main-visual .text em {display:block; font-size:24rem; font-weight:500; color:#222b27; font-family: var(--font-eng); margin-bottom: 35rem;}
.main-visual .text .color {color: var(--color-point);}
html[lang="en"] .main-visual .text h2{font-size:52rem;}

/* control */
.mainVis_control {display: inline-flex; align-items: center; font-size: 15rem; z-index: 30; font-weight: 600;position: absolute; bottom: 10%; left: 50%; transform: translate(-50%,-50%); }
.mainVis__btn {flex-shrink: 0; position: relative; width: 70rem; height: 70rem; margin-right: 20rem; border-radius: 50%; background: transparent;}
.mainVis__btn::before{ content: ''; position: absolute; inset: 0;  border: 5rem solid color-mix(in srgb, currentColor 20%, #0000); border-radius: 50%; }
.mainVis__btn::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 8rem; height: 10rem; background: currentColor; }
.mainVis__btn.isPlay::after{ clip-path: polygon(0 100%, 0 0, 3rem 0, 3rem 100%, 5rem 100%, 5rem 0, 100% 0, 100% 100%); }
.mainVis__btn:not(.isPlay)::after{ clip-path: polygon(0 100%, 0 0, 100% 50%); }
.mainVis__circle{ --progress: 0; position: absolute; inset: 0; width: 70rem; height: 70rem; stroke-width: 5rem; stroke: #000; fill: none; stroke-dashoffset: 0; stroke-dasharray: 0; transform: rotate(-90deg); }
.aniPlay .mainVis__circle { stroke-dashoffset: calc(var(--totalLength) * (1 - var(--progress))); stroke-dasharray: var(--totalLength); }
.mainVis__pager{ justify-content: center; font-weight: 500;  display: flex; align-items: center; margin: 0 10rem;}
.mainVis__dot {display: block; width: 3rem; height: 3rem; border-radius: 50%; background: #b5b5b5; margin: 0 15rem;}
.main-visual .swiper-pagination-current,
.main-visual .swiper-pagination-total{ display: inline-block; width: 1ch; }
.main-visual .swiper-pagination-total{ opacity: .5; }
.pager-box {display: flex; align-items: center;}
.pager-box i {display: flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; cursor: pointer;}
.pager-box i.prev {transform: rotate(180deg);}
.pager-box i img {width: 100%; max-width: 100%; object-fit: contain;}


@media (max-width:1080px){
    .main-visual .text h2 {font-size: 52rem; } 
	html[lang="en"] .main-visual .text h2{font-size:40rem;}
}
@media (max-width:768px){
    .main-visual .text {z-index: 10;}
    .main-visual .text h2 {font-size: 40rem;}
    .main-visual .text em {font-size:20rem; margin-bottom:25rem}
    .main-visual .s1::before{ background-image: url('/images/main/visual_img01_mob.jpg'); }
    .main-visual .s2::before{ background-image: url('/images/main/visual_img01_mob.jpg'); }
	html[lang="en"] .main-visual .text h2{font-size:35rem;}
}
@media (max-width:480px){
    .main-visual .swiper-slide::after{content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.6); z-index: -1;}
    .main-visual .text h2 {font-size:22rem;}
    .main-visual .text em {font-size:16rem; margin-bottom:20rem;}
    .mainVis_control {display: inline-flex; align-items: center; font-size: 15rem; font-weight: 600;position: absolute; bottom: 10%; left: 50%; transform: translate(-50%,-50%); }
    .mainVis__btn {width: 55rem; height: 55rem}
    .mainVis__btn::before{  border: 5rem solid color-mix(in srgb, currentColor 10%, #0000);  }
    .mainVis__circle{width: 55rem; height: 55rem; stroke-width: 5rem}
    .mainVis__pager {margin: 0 8rem;}
    .mainVis__dot {margin: 0 10rem;}
	html[lang="en"] .main-visual .text h2{font-size:22rem;}
}

@media (prefers-reduced-motion: no-preference){
	.main-visual .swiper-slide-active::before{ animation: slide_bg 3s both; }
	.main-visual .swiper-slide-active .text > *{ animation: visual_txt .8s .3s both;}
	.main-visual .swiper-slide-active .text > *:nth-child(2){ animation-delay: .6s;}
	.main-visual .swiper-slide-active .text > *:nth-child(3){ animation-delay: .9s;}
    @keyframes slide_bg{
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes visual_txt{
		0%{ transform: translateY(30rem); clip-path: inset(0 0 100%); }
		100%{ transform: translateY(0); clip-path: inset(0); }
	}
}

/* main */
.mainTit {display: flex; align-items: flex-end; flex-wrap: wrap; gap: 25rem; line-height: 1;}
.mainTit h2 {font-size: var(--font60);}
.mainTit p {font-size: var(--font18); opacity: 0.8; line-height: 1.5;}
.show_mo {display: none;}

/* product */
[data-main="product"] {padding: 100rem 0 130rem; background-image: url(/images/main/pro_bg.jpg); background-position: 50% 50%; background-size: cover;}
[data-main="product"] .mainTit {color: var(--color-white); margin-bottom: 50rem;}
[data-main="product"] .proList {display: grid; grid-template-columns: repeat(3,1fr); gap: 50rem;}
[data-main="product"] .proCont {position: relative; display: flex; align-items: flex-end; border-radius: 15rem; overflow: hidden; width: 100%; aspect-ratio: 48/62; background-size: cover; background-color: var(--color-point); background-repeat: no-repeat; background-position: 50% 50%; transition:0.5s ease;}
[data-main="product"] .proCont.pr1 {background-image: url(/images/main/pro1.jpg);}
[data-main="product"] .proCont.pr2 {background-image: url(/images/main/pro2.jpg);}
[data-main="product"] .proCont.pr3 {background-image: url(/images/main/pro3.jpg);}
[data-main="product"] .proCont .text {width: 100%; text-align: center; color: var(--color-white); z-index: 10; padding: 30rem 30rem 80rem 30rem; box-sizing: border-box;}
[data-main="product"] .proCont .text p {font-size: 35rem; font-weight: 700;}
[data-main="product"] .proCont .text span {display: block; font-size: var(--font18); line-height: 1.5; margin-top: 20rem;}
[data-main="product"] .proCont img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0;left: 0;}
[data-main="product"] .proCont::before {content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:40%; background-image:linear-gradient(0deg, rgba(0,146,72,1) 10%, rgba(0,146,72,0) 100%); transform:translateY(0); transition:0.5s ease;}
[data-main="product"] .proCont:hover::before {height: 100%; background-image:linear-gradient(0deg, rgba(0,123,61,1) 10%, rgba(0,123,61,0.6) 100%);}
[data-main="product"] .proCont .over {background:rgba(0,123,61,0.5); opacity: 0; display: flex; z-index: 10; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; transition: .3s; width: 100%;height: 100%;}
[data-main="product"] .proCont .over i { color: var(--color-white); font-size: 20rem; width: 147rem; height: 147rem; display: flex; align-items: center; justify-content: center; background: url(/images/main/pro_over.png) no-repeat; background-size: contain; background-position: 50% 50%;}

/* news */
[data-main="news"] {overflow-x: hidden; padding: 100rem 0; background: var(--color-white); border-radius: 30rem 30rem 0 0; margin-top: -30rem;} 
[data-main="news"] .inr {display: grid; grid-template-columns: repeat(2,1fr); gap: 100rem; align-items: start;}
[data-main="news"] .newsBox .title {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 55rem;}
[data-main="news"] .newsBox .list {border-top: 2rem solid #eee;}
[data-main="news"] .newsBox .list li:nth-child(n+5) {display: none;}
[data-main="news"] .newsBox .list a {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 40rem; box-sizing: border-box; letter-spacing: -0.015em; border-bottom: 2rem solid #eee; } 
[data-main="news"] .newsBox .list p {width: 70%; font-size: var(--font20); font-weight: 600;}
[data-main="news"] .newsBox .list em {opacity: 0.7; font-weight: 600;}
[data-main="news"] .newsBox .more {opacity: 0.4; font-weight: 600;}
[data-main="news"] .newsBox .more i { margin-left: 12rem;}
[data-main="news"] .certBox {position: relative; display: flex; align-items: flex-end; width: 100%; height: 560rem; background: url(/images/main/certi_img.jpg) no-repeat 50% 100% / cover; color: var(--color-white); border-radius: 20rem; overflow: hidden;}
[data-main="news"] .certBox::before {content: ''; position: absolute; top: 0;left: 0; width: 100%;height: 100%; background: rgba(0, 0, 0, 0.3); transition: .3s; opacity: 0; }
[data-main="news"] .certBox .text {padding: 0 50rem 80rem; z-index: 5;}
[data-main="news"] .certBox .text em {display: inline-block; font-size: 14rem; padding: 7rem 17rem; background: rgba(255, 255, 255, 0.15); border-radius: 30rem; border: 1rem solid rgba(255, 255, 255, 0.5);}
[data-main="news"] .certBox .text p {font-size: var(--font50); font-weight: 700; margin: 22rem 0 30rem;}
[data-main="news"] .certBox .text span {display: block; font-size: var(--font18); line-height: 1.6;}
[data-main="news"] .ko_board_noData{border-width:0; color:#aaa;}
/* hover */
[data-main="product"] .proCont:hover .over {opacity: 1;} 
[data-main="news"] .newsBox .list a:hover {color: var(--color-point);}
[data-main="news"] .newsBox .list a:hover em {opacity: 1;}
[data-main="news"] .newsBox .list a::before {content: ''; position: absolute; left: 0; bottom: -2rem; width:0; height: 2rem; background: var(--color-point); transition: .3s;}
[data-main="news"] .newsBox .list a:hover::before {width: 100%;}
[data-main="news"] .certBox:hover::before {opacity: 1;}
[data-main="news"] .newsBox .more:hover {opacity: 1;}

@media (max-width:1280px){
    [data-main="news"] .inr {gap: 50rem;}
    [data-main="news"] .newsBox .list a {padding: 30rem 20rem}
    [data-main="product"] .proCont .text {padding: 30rem 30rem 60rem 30rem;}
}
@media (max-width:1080px){
    .mainTit h2 {font-size:45rem;}
    [data-main="product"] .proList {gap: 30rem;}
    [data-main="product"] .proCont {border-radius: 8rem;}
    [data-main="product"] .proCont .text {padding: 20rem 20rem 40rem 20rem;}
    [data-main="product"] .proCont .text p {font-size: 30rem;}
    [data-main="product"] .proCont .text span {margin-top: 15rem; font-size: 16rem;}
    [data-main="news"] .inr {gap: 35rem;}
    [data-main="news"] .newsBox .list p {font-size: 18rem;}
    [data-main="news"] .newsBox .title {margin-bottom: 30rem;}
    [data-main="news"] .certBox {height: 100%; border-radius: 15rem;}
    [data-main="news"] .certBox .text {padding: 0 30rem 50rem;}
    [data-main="news"] .certBox .text p {font-size: 35rem; margin: 20rem 0;}
    [data-main="news"] .mainTit {flex-direction: column; align-items: flex-start; gap: 20rem; margin-bottom: 0;}
}
@media (max-width:768px){
    .mainTit {flex-direction: column; align-items: flex-start;}
    [data-main="product"] {padding: 100rem 0;}
    [data-main="product"] .mainTit {align-items: center;}
    [data-main="product"] .proList {grid-template-columns: repeat(1,1fr);}
    [data-main="product"] .proCont::before {height: 60%;}
    [data-main="product"] .proCont {aspect-ratio: 48/50;}
    [data-main="product"] .proCont .text {padding: 50rem 40rem; text-align: left;}
    [data-main="product"] .proCont .text p {font-size: 25rem;}
    [data-main="news"] .newsBox .title {align-items: center;}
    [data-main="news"] {padding: 80rem 0; border-radius: 20rem 20rem 0 0; margin-top: -20rem;}
    [data-main="news"] .inr {grid-template-columns: repeat(1,1fr);}
    [data-main="news"] .newsBox .list a {padding: 25rem 10rem; font-size: 15rem;}
    [data-main="news"] .certBox {height: 500rem;}
    [data-main="news"] .certBox .text p {font-size: 30rem;}
}
@media (max-width:480px){
    .mainTit h2 {font-size: 35rem;}
    [data-main="product"] {padding: 80rem 0;}
    [data-main="product"] .proList {gap: 20rem;}
    [data-main="product"] .mainTit {margin-bottom: 30rem;}
    [data-main="product"] .mainTit p {text-align: center;}
    [data-main="product"] .proCont .text {padding: 35rem 25rem;}
    [data-main="product"] .proCont .text p {font-size: 22rem;}
    [data-main="product"] .proCont .text span {font-size: 15rem; margin-top: 15rem;}
    [data-main="product"] .show_mo {display: block;}
    [data-main="product"] .proCont .over i {width: 110rem; height: 110rem; }
    [data-main="news"] .newsBox .list li:nth-child(n+4) {display: none;}
    [data-main="news"] {padding: 60rem 0; margin-top: 0; border-radius: 0;}
    [data-main="news"] .mainTit {align-items: center; gap: 15rem;}
    [data-main="news"] .newsBox .list a {flex-direction: column; align-items: flex-start;gap: 10rem; padding: 20rem 0;}
    [data-main="news"] .newsBox .list p {font-size: 15rem; width: 100%;}
    [data-main="news"] .newsBox .list em {font-size: 14rem; opacity: 0.5; width: 100%;}
    [data-main="news"] .newsBox .title {flex-direction: column; justify-content: center;}
    [data-main="news"] .newsBox .more {font-size: 13rem; display: inline-flex; align-items: center; padding: 10rem 12rem; background: #ddd; border-radius: 30rem; margin-top: 15rem;}
    [data-main="news"] .certBox {height: 350rem; border-radius: 10rem;}
    [data-main="news"] .certBox .text {padding: 0 25rem 35rem;}
    [data-main="news"] .certBox .text em {font-size: 13rem; padding: 5rem 12rem;}
    [data-main="news"] .certBox .text p {font-size: 25rem; margin: 15rem 0;}
    [data-main="news"] .certBox .text span {font-size: 15rem;}
    [data-main="news"] .newsBox .more:hover {background: var(--color-point); color: var(--color-white); opacity: 1;}
}