@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:none;}
.tbbr{display:block;}
.tmbr{display:none;}
.mbbr{display:none;}
.pc_view{display:none !important;}
.pt_view{display:none !important;}
.t_view{display:block !important;}
.tm_view{display:block !important;}
.m_view{display:none !important;}
.dn{display:none;}
html.hidden{overflow:hidden;}
#wrap{overflow:hidden;}
#container{background: #e9e9e9;}
* {font-family:"Poppins", "Pretendard", "Noto Sans KR", "돋움",dotum,sans-serif;box-sizing:border-box;}
._e{
overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;
-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;
}
._e2{
display: -webkit-box;
-webkit-line-clamp: 2; /* 두 줄까지만 표시 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.innerwrap{
	width: 94%;
	max-width: 1760px;
	margin: 0 auto;
	box-sizing: border-box;
}

section .titlearea{position: relative;box-sizing:border-box;padding-right: 150px;margin-bottom: 75px;}
section .titlearea .cate{font-size:18px;color:#000;font-weight: 500;font-family: "Poppins";letter-spacing:-0.02em;}
section .titlearea .tit{
color:#222;font-weight: 600;font-family: "Pretendard";font-size:36px;line-height: 1.4;margin-top: 50px;
}
section .titlearea .more_btn{
display: flex;align-items:center;
position: absolute;bottom:10px;right:0;
}
section .titlearea .more_btn>span{font-size:13px;color:rgba(34,34,34,0.8);font-weight:400;font-family: "Poppins";letter-spacing:-0.02em;}
section .titlearea .more_btn>i{
width: 50px;height: 50px;display: block;margin-left: 13px;
background: url(/images/main/more_btn_arr.png)no-repeat center / cover;
transition:all 0.4s;
}
section .titlearea .more_btn:hover>i{
transform:rotate(-45deg);
}
/*sec1 visual*/
.sec1{position: relative;width:100vw;height:100vh;background:#8caa9f;
overflow:hidden;
background:#fff;}
.visual{
	overflow:hidden;
	position:relative;
	width:100vw;height:100vh;
}
.visual .swiper-slide{width:100%;height:100%;}
.visual .swiper-slide .vwrap{
position: relative;
width:100%;height:100%;
}
.visual .swiper-slide .vwrap video{
position: absolute;width:100%;height:100%;top:50%;left:50%;
transform:translate(-50%, -50%);
object-fit:cover;
}
/* .visual .swiper-slide .bg{
width:100%;height:100%;
background: url(/images/main/sec1_visual1.jpg)no-repeat center / cover;

-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
  
  transform:scale(1.25);
}
.visual .swiper-slide.swiper-slide-active .bg{
transition:all 5s ease-in-out;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%);
 transform:scale(1);
}
.visual .slide2 .bg{
background: url(/images/main/sec1_visual2.jpg)no-repeat center / cover;
}
.visual .slide3 .bg{
background: url(/images/main/sec1_visual3.jpg)no-repeat center / cover;
} */
.visual .ctr{
position: absolute;z-index:100;
max-width:200px;
left:50%;transform:translateX(-50%);
bottom:60px;width:100%;
display: flex;align-items:center;justify-content:center;
}
.visual .vbtn{
width:12px;height:21px;
background: url(/images/main/sec1_vprev.png)no-repeat center;
cursor:pointer;
}
.visual .vnext{
background: url(/images/main/sec1_vnext.png)no-repeat center;
}
.visual .ctr .vpaging{
margin:0 30px;width:auto;
}
.visual .ctr .vpaging>span{
opacity:1;
border:1px solid #fff;background: 0;width:10px;height:10px;margin:0 10px;box-sizing:border-box;
}
.visual .ctr .vpaging>span.swiper-pagination-bullet-active{background: #fff;}
.visual .ctr{
position: absolute;z-index:100;
max-width:200px;
left:50%;transform:translateX(-50%);
bottom:60px;width:100%;
display: flex;align-items:center;justify-content:center;
}

.sec1 .txtarea{
position: absolute;z-index:300;width:94%;
top:0%;left:50%;transform:translateX(-50%);
box-sizing:border-box;max-width:1760px;
}
.sec1 h2.title{
font-size:min(10.42vw, 200px);color:#fff;font-family: "Poppins";font-weight: 500;line-height: 1.2em;
position: absolute;letter-spacing:-0.025em;
}
.sec1 .t1{top:250px;left:-0.52vw;}
.sec1 .t2{top:calc(250px + 12vw);left:-0.52vw;}
.sec1 .t3{top:500px;right:0.52vw;text-align: right;}
.sec1 .t4{top:calc(500px + 12vw);right:0.52vw;text-align: right;}
.sec1 h2.title>span{

font:inherit;
font-family: "Poppins";font-weight: 500;line-height: 1.2em;
letter-spacing:-0.025em;
color:#000;
display: block;
position: absolute;
left: 0;
top: 0;
clip-path:polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%);
/* clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); */
display: none;
}
.sec1 .txt{
color:#fff;font-family: "Poppins";font-weight: 500;line-height: 1.2em;
position: absolute;font-size:max(1.35vw, 26px);
top: calc(200px + 30vw);
left:0;
}

.sec1 .intro{
position: absolute;
z-index:500;
top:0;left:0;
width:100vw;
height:100%;
background: url(/images/main/sec1_intro_back_bg.jpg)no-repeat center / cover;
/* clip-path: circle(100% at 50% 100%); */
}
.sec1 .intro>img{width:100%;height:100%;object-fit:cover;}
.sec1 .intro h2.title,
.sec1 .intro .txt{
color:#000;
}

/*sec2*/
.sec2{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.sec2 .innerwrap{padding:0 8vw;}
.sec2 h3{
color:#222222;font-family: "Poppins";font-size:min(9vw, 130px);font-weight: 500;letter-spacing:-0.025em;
line-height: 1.1em;
position: relative;
color: #d2d2d2;
-webkit-text-stroke: 1px #e9e9e9;
paint-order: stroke fill;
}
.sec2 h3>span.grad{
width: 100%;
height:120%;
-webkit-text-stroke: 1px transparent;
font: inherit;
position: absolute;
display: block;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
top:0;left:0;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
/* clip-path: polygon(0px 0px, 50% 0px, 0% 100%, 0px 50%); */
background: #222;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
paint-order: stroke fill;
}
.sec2 .txt{
color:#555555;font-size:16px;font-weight: 350;font-family: "Noto Sans KR";margin-top: 10px;line-height: 1.5;
}
.sec2 .area{display: flex;justify-content:space-between; flex-direction: column;margin:30px auto 0;}
.sec2 .area .img{
overflow:hidden;
border-radius:10px; 
height: 30vw;
max-height: 300px;
width: 100%;
margin-bottom: 30px;
}

.sec2 .area .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
}

/*sec3*/
.sec3{padding-bottom: 250px;}
.sec3 .product{position: relative;width:100%;overflow:hidden;padding-top: 10px;}
.sec3 .pd{
width:350px !important;
overflow:hidden;border-radius:10px;
transition:all 0.4s ease;
}

.sec3 .pd .thumb{
width:100%;
/* aspect-ratio: 1 / 1; */
}
.sec3 .pd .info{
width:100%;background: #d6ddd3;
height:150px;
transition:all 0.4s ease;
}
.sec3 .pd .info>a{
display: flex;align-items:center;justify-content:space-between;
padding:45px 30px;width:100%;height:100%;
box-sizing:border-box;
}
.sec3 .pd .info .pdtitle{
color:#111;font-weight: 600;font-family: "Pretendard";font-size:20px;
width:calc(100% - 50px);
box-sizing:border-box;
padding-right: 2vw;
}
.sec3 .pd .info .arr{
width: 50px;height: 50px;display: block;
background: url(/images/main/sec3_info_arr.png)no-repeat center / cover;
transition:all 0.3s ease;
}

.sec3 .pdscroll{
margin-top: 40px;
display: block !important;
width: 100%;
height: 2px;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
border-radius: 0;
}
.sec3 .pdscroll .swiper-scrollbar-drag {
        height: 3px;
        background: #000;
        border-radius: 0;
}
.sec3 .pd:hover{
transform:translateY(-10px);
}
.sec3 .pd:hover .info{
background: #468a5b;
}
.sec3 .pd:hover .info .arr{
transform:rotate(45deg);
}

/*sec4*/
.sec4{position: relative;}
.sec4:before{
position: absolute;content:'';
width:100%;height:100%;
z-index:200;
}
.sec4 .social{
display: flex;
gap:20px;
}
.sec4 .social>li{
transition:all 0.8s ease;
flex: 1;
will-change: flex;

}
.sec4 .social>li:hover{ flex: 1.4;}
.sec4 .social>li .top{
border-top: 1px dashed #747474; 
border-bottom: 0;
border-left: 0;
padding:40px 2.08vw;
padding-right: 50px;
position: relative;
height: 350px;
}

.sec4 .social>li:last-child .top:before{display: none;}
.sec4 .social>li .top:before{
position: absolute;
content:'';
right:-2px;
top:0;
width:1px;
height:100%;
box-sizing:border-box;
border-right: 1px dashed #747474; 
}
.sec4 .social>li .top .more_btn{
position: absolute;
bottom:40px;right:2.08vw;
opacity:0;visibility:hidden;
transition:all 0.4s ease;
}
.sec4 .social>li:hover .top .more_btn{opacity:1;visibility:visible;}
.sec4 .social>li .top .more_btn>i{
width: 50px;height: 50px;display: block;
background: url(/images/main/more_btn_arr.png)no-repeat center / cover;
transition:transform 0.2s ease;
}
.sec4 .social>li .top .more_btn:hover>i{
transform:rotate(-45deg);
}
.sec4 .social>li .top .icon{margin-bottom: 50px;height:45px;}
.sec4 .social>li:hover .top .icon>img{

animation-name:  iconRotate;animation-duration: 0.6s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
@keyframes iconRotate{
0%{transform:rotateY(-270deg);}
100%{transform:rotateY(0deg);}
}
.sec4 .social>li .top .tit{font-size:30px;color:#111111;font-weight: 600;font-family: "Pretendard";margin-bottom: 20px;}
.sec4 .social>li .top .txt{color:#666666;font-size:18px;font-family: "Pretendard";font-weight: 400;line-height: 1.6em;  max-width: 18vw;
word-break:keep-all;word-wrap:normal;}
.sec4 .social>li .img{height:300px;position: relative;width:100%;overflow:hidden;
padding:0 0.5px;
border-radius:10px;
}
.sec4 .social>li .img img{
position: absolute;
top:0;left:0;
height:100%;max-width:unset;
width:auto;transition:all 1.2s ease-in-out;transition-delay:0s;
}
.sec4 .social>li:hover .img img{
transform:scale(1.2);
}

@media screen and (max-width: 900px) {
    .sec4 .social {
        flex-direction: column;
    }
	
	.sec4 .social>li .top{
	height: auto;
	}
	
	.sec4 .social>li .top:before {
	content: none;
	}
	
	.sec4 .social>li .top .txt {
	        max-width: none;
	}
	
	.sec4 .social>li .img {
		height: 400px;
	}
	
	.sec4 .social>li .img img {
		width: 100%;
		object-fit: cover;
	}
}

/*sec5*/
.sec5{
position: relative;
padding-top: 280px;

}
.sec5 .bg_icon{
position: absolute;
bottom:0;left:0;
width: 50%;
}
.sec5 .strlist{
display: flex;flex-wrap:wrap;gap:20px 1.04vw;;
}
.sec5 .strlist>li{
width:calc((100% - 1.04vw * 2) / 3);
aspect-ratio: 1 / 1;
position: relative;
overflow:hidden;border-radius:10px;
cursor:pointer;
}
.sec5 .strlist>li:nth-child(4){
margin-left:calc((100% - 1.04vw * 2) / 3 + 1.04vw);
}

.sec5 .strlist>.title_box{
display: flex;flex-direction:column;
align-items:center;justify-content:center;
}
.sec5 .strlist>.title_box .cate{
text-align: center;color:#000;font-size:19px;font-family: "Poppins";
font-weight: 500;text-transform: uppercase;margin-bottom: 40px;
}
.sec5 .strlist>.title_box .tit{
font-family: "Pretendard";color:#000;font-weight: 600;font-size:min(3.5vw, 36px);	text-align: center;line-height: 1.3em;
}
.sec5 .strlist>.box .bg{
position: absolute;content:'';
top:0;left:0;
width:100%;height: 100%;
z-index:1;
background: url(/images/main/sec5_img1.jpg)no-repeat center / cover;
transition:transform 1s ease;

}
.sec5 .strlist>.box:before{
	position: absolute;content:'';
	width:100%;height:100%;
	transition:opacity 0.6s ease;
	display: block;
	box-sizing:border-box;
	background: rgba(0,0,0,0.3);
	bottom:0;left:0;
	z-index:3;
	backdrop-filter:blur(7px);
	opacity:0;
	border-radius:10px;
	overflow:hidden;
}
.sec5 .strlist>.box:hover .bg{/* transform:scale(1.05); */}
.sec5 .strlist>.box:hover:before{
	opacity:1;
}
.sec5 .strlist>.box .bg2{
background: url(/images/main/sec5_img2.jpg)no-repeat center / cover;
}
.sec5 .strlist>.box .bg3{
background: url(/images/main/sec5_img3.jpg)no-repeat center / cover;
}
.sec5 .strlist>.box .bg4{
background: url(/images/main/sec5_img4.jpg)no-repeat center / cover;
}
.sec5 .strlist>.box .text_g{
position: relative;
z-index:10;
display: flex;flex-direction:column;justify-content:flex-end;
width:100%;height:100%;
padding:min(2.5vw,30px);
}
.sec5 .strlist>.box .text_g>p{
line-height: 1.6em;
color:rgba(255,255,255,0.8);font-family: "Pretendard";font-size:min(2vw, 18px);font-weight: 400;
opacity:0;
transform:translateY(40px);
transition:all 0.5s ease;
}
.sec5 .strlist>.box:hover .text_g>p{
opacity:1;
transform:translateY(0px);
}
.sec5 .strlist>.box .text_g>strong{
margin-top: 30px;
display: block;color:#fff;font-family: "Pretendard";font-size:min(2.7vw, 30px);font-weight: 600;
}

/*sec6*/
.sec6{padding:250px 0;}
.sec6 .text_g{display: flex;justify-content:space-between;}
.sec6 .text_g h3{
font-size:max(70px, 8.75vw);
color:#000;font-weight: 500;font-family: "Poppins";
letter-spacing:-0.025em;
}
/*sec7*/
.sec7{padding-bottom: 250px;}
.sec7 .press{position: relative;width:100%;overflow:hidden;padding-top: 10px;}
.sec7 .press .list{
width:350px !important;background: #f7f7f7;
overflow:hidden;border-radius:10px;border:1px solid #d0d0d0;
transition:all 0.4s ease;
}
.sec7 .press .list:hover{
transform:translateY(-10px);
}
.sec7 .press .list .thumb{border-radius:10px;overflow:hidden;height: 288px;}
.sec7 .press .list .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sec7 .press .list .info{
width:100%;background: #f7f7f7;
padding:30px 1.56vw;
box-sizing:border-box;
}
.sec7 .press .list .info .tit{margin-bottom: 20px;}
.sec7 .press .list .info .tit>a{
position: relative;
color:#222222;font-size:20px;font-weight: 600;font-size:24px;font-family: "Pretendard";
}
.sec7 .press .list .info .tit>a:before{
	position: absolute;content:'';
	width:0%;height:2px;background: #000;
	bottom:0px;left:0;
	transition:width 0.4s ease;
}
.sec7 .press .list .info .tit>a:hover:before{
width:100%;
}
.sec7 .press .list .info .txt{margin-bottom: 35px;
color:#666666;font-size:18px;font-family: "Pretendard";
}
.sec7 .press .list .info .date{color:#666666;font-size:17px;font-family: "Pretendard";}
.sec7 .prscroll{
margin-top: 40px;
display: block !important;
width: 100%;
height: 2px;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
border-radius: 0;
}
.sec7 .prscroll .swiper-scrollbar-drag {
        height: 3px;
        background: #000;
        border-radius: 0;
}
.sec7 .titlearea .more_btn:hover>i{
transform:rotate(-45deg);
}
/*sec8*/
.sec8{
display: flex;height:960px;overflow:hidden;
}
.sec8>div{width:50%;height:100%;}
.sec8>.imgarea>img{
width:100%;aspect-ratio: 96 / 98;overflow:hidden;
height: 100%;object-fit:cover;
}
.sec8>.txtarea{
position: relative;
background: #468a5b;
padding:100px 1.04vw 80px 4.17vw;
display: flex;flex-direction:column;
justify-content:space-between;
}
.sec8>.txtarea .svg{
position: absolute;
top:55%;
left:0;transform:translateY(-50%);
}

.sec8>.txtarea .svg svg {
width: 100%;
}

.sec8>.txtarea .titlearea {
padding-right:0;
}
.sec8>.txtarea .titlearea,
.sec8>.txtarea .descarea{position: relative;z-index:20;}
.sec8>.txtarea .cate{color:#fff;}
.sec8>.txtarea .tit{color:#fff;font-family: "Poppins";font-size:min(4vw, 50px);font-weight: 500;letter-spacing:-0.03em;white-space:normal;}
.sec8>.txtarea h5{color:#fff;font-size:30px;font-weight: 600;line-height: 1.4em;}
.sec8>.txtarea .more_btn{
display: flex;align-items:center;margin-top: 40px;
}
.sec8 .more_btn>span{font-size:13px;color:rgba(255,255,255,0.8);font-weight:400;font-family: "Poppins";letter-spacing:-0.02em;}
.sec8 .more_btn>i{
width: 50px;height: 50px;display: block;margin-left: 13px;
background: url(/images/main/more_btn_arr_wht.png)no-repeat center / cover;
transition:all 0.4s;
}
.sec8 .more_btn:hover>i{
transform:rotate(-45deg);
}
/*motion*/
.fadeLeft, .fadeRight, .fadeUp, .fadeIn, .fadeImgRight{opacity:0;}
.imgAni{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.imgAni.in-view{animation-name: imgAni; animation-duration:1.25s;animation-fill-mode:forwards;}
.fadeLeft.in-view{animation-name: fadeLeft;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeRight.in-view{animation-name: fadeRight;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeUp.in-view{animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeIn.in-view{animation-name: fadeIn;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
.fadeImgRight.in-view{animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
 .sub_visual .bg, .sub_visual .sub_tit{opacity:0;}
.sub_visual.in-view .bg{opacity:1;animation: bgScale 1.5s ease;animation-fill-mode:forwards;}
.sub_visual.in-view .sub_tit{animation: fadeLeft 0.9s ease;animation-fill-mode:forwards;}
  
  @keyframes bgScale{
   0%{transform:scale(1.15);}
   100%{transform:scale(1);}
  }
@keyframes fadeLeft{
 0%{transform:translate3d(-100px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes fadeRight{
 0%{transform:translate3d(70%, 0, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeUp{
0%{transform:translate3d(0%, 100px, 0);opacity:0;}
  100%{transform:translate3d(0%, 0, 0);opacity:1;}
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes imgAni{
0%{clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}

}
@keyframes fadeImgRight{
0%{opacity:0;clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
100%{opacity:1;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}
@keyframes fadeImgLeft{
0%{opacity:0;clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);}
100%{opacity:1;clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);}
}

.visual{opacity:0;}
.visual.visible{opacity:1;
/* animation-name: visualAni; animation-duration:2.2s;animation-fill-mode:forwards; */
animation-name: down-enter; animation-duration:1.1s;animation-fill-mode:forwards;
}
.sec1 .intro>.plant{
transform:translateY(10%);
opacity:0;
transition:transform 1s ease, opacity 1.1s ease;
}
.sec1 .intro.in-view>.plant{
transform:translateY(0%);
opacity:1;transition-delay:0.8s;
}
.sec1 .intro .t1{
top:250px;
opacity:0;
filter:blur(18px);
transform:scale(0.95);
transition:all 1.1s ease;
}
.sec1 .intro.in-view .t1{
top:250px;
opacity:1;
transform:scale(1);
filter:blur(0px);
}
.sec1 .intro .t2 {
top: 450px;
opacity:0;
filter:blur(18px);
transform:scale(0.95);
transition:all 1.1s ease;
}
.sec1 .intro.in-view .t2 {
top: calc(250px + 12vw);
opacity:1;
filter:blur(0px);
transform:scale(1);
transition-delay:0.1s;
}
.sec1 .intro .t3 {
top:350px;
right:-1vw;
transform:scale(0.95);
opacity:0;
filter:blur(18px);
transition:all 1.1s ease;
}
.sec1 .intro.in-view .t3 {
top: 500px ;
right: 0.52vw;
opacity:1;
filter:blur(0px);
transform:scale(1);
transition-delay:0.2s;
}
.sec1 .intro .t4 {
top: 750px;
opacity:0;
transform:scale(0.95);
filter:blur(18px);
transition:all 1.1s ease;
}
.sec1 .intro.in-view .t4 {
top: calc(500px  + 12vw);
opacity:1;
filter:blur(0px);
transform:scale(1);
transition-delay:0.3s;
}
.sec1 .intro .txt{
top:700px;
opacity:0;
filter:blur(18px);
transition:all 1.1s ease;
}
.sec1 .intro.in-view .txt {
top: calc(200px + 30vw);
opacity:1;
filter:blur(0px);
transition-delay:0.4s;
}
.sec1 .intro.end{
animation-name: down-leave; animation-duration:1.1s;animation-fill-mode:forwards;
}
/* @keyframes introAni{
0%{clip-path: circle(100% at 50% 100%);}
100%{clip-path: circle(0% at 50% 100%);}
}
@keyframes visualAni{
0%{filter:blur(20px);clip-path: circle(100% at 50% 100%);}
50%{filter:blur(20px);clip-path: circle(0% at 50% 100%);}
100%{filter:blur(0px);clip-path: circle(100% at 50% 100%);}
} */
@keyframes down-enter {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}

@keyframes down-enter2{
  0% { clip-path: inset(0); }
  50% { clip-path: inset(100% 0 0 0);filter:blur(10px); }
   100% { clip-path: inset(0);filter:blur(0px); }
}

@keyframes down-leave {
  0% { clip-path: inset(0);filter:blur(0px); }
  100% { clip-path: inset(100% 0 0 0); filter:blur(10px);}
}

/* .sec1 .visual .t1{
top:250px;
opacity:0;
filter:blur(13px);
transform:scale(0.95);
transition:all 1s ease;
}
.sec1 .visual.on .t1{
top:100px;
opacity:1;
transform:scale(1);
filter:blur(0px);
}
.sec1 .visual .t2 {
top: 450px;
opacity:0;
filter:blur(13px);
transform:scale(0.95);
transition:all 1s ease;
}
.sec1 .visual.on .t2 {
top: 320px;
opacity:1;
filter:blur(0px);
transform:scale(1);
transition-delay:0.1s;
}
.sec1 .visual .t3 {
top:520px;
right:-1vw;
transform:scale(0.95);
opacity:0;
filter:blur(13px);
transition:all 1s ease;
}
.sec1 .visual.on .t3 {
top: 400px;
right: 0.52vw;
opacity:1;
filter:blur(0px);
transform:scale(1);
transition-delay:0.2s;
}
.sec1 .visual .t4 {
top: 750px;
opacity:0;
transform:scale(0.95);
filter:blur(13px);
transition:all 1s ease;
}
.sec1 .visual.on .t4 {
top: 600px;
opacity:1;
filter:blur(0px);
transform:scale(1);
transition-delay:0.3s;
}
.sec1 .visual .txt{
top:700px;
opacity:0;
filter:blur(10px);
transition:all 1s ease;
}
.sec1 .visual.on .txt {
top: 570px;
opacity:1;
filter:blur(0px);
transition-delay:0.4s;
} */
.sec1 .visual .ctr{
bottom:-60px;
opacity:0;
transition:all 1s ease;
}
.sec1 .visual.on .ctr{
bottom:60px;
opacity:1;
transition-delay:0.1s;
}
@keyframes nav-up{
0%{transform:translateY(0%);}
50%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}

#header.nav-up{animation-name: nav-up; animation-duration:2s;animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
}

/*sec2motion*/
 .sec2 .move1,
.sec2 .move2,
.sec2 .move3,
.sec2 .move4{
opacity:0;
}
.sec2.in-view .move1,
.sec2.in-view .move2,
.sec2.in-view .move3,
.sec2.in-view .move4{
 animation: fadeLeft 1.2s cubic-bezier(.5, 0, .5, 1);
  animation-fill-mode: forwards;
   animation-direction:alternate;
   animation-delay:0.1s;
}
/* .sec2.in-view .move2{animation-delay:0.2s;}
.sec2.in-view .move3{animation-delay:0.3s;}
.sec2.in-view .move4{animation-delay:0.4s;} */

/* .sec2 .move1 span.char,
.sec2 .move2 span.char,
.sec2 .move3 span.char{display: inline-block;opacity:0;}
.sec2 .move4{opacity:0;transform:translateX(-80px);transition:all 1s;}
.sec2.in-view .move1 span.char,
.sec2.in-view .move2 span.char,
.sec2.in-view .move3 span.char{
 animation: sec2_tit_ani 0.6s cubic-bezier(.5, 0, .5, 1);
  animation-fill-mode: forwards;
   animation-direction:alternate;
   animation-delay:calc(0.2s + var(--char-index) * 30ms);
}
.sec2.in-view .move2 span.char{animation-name:sec2_tit_ani_Right;}
.sec2.in-view .move2 span.char{animation-delay:calc(0.4s + var(--char-index) * 30ms);}
.sec2.in-view .move3 span.char{animation-delay:calc(0.6s + var(--char-index) * 30ms);}
.sec2.in-view .move4{opacity:1;transform:translateX(0);transition-delay:0.7s;} */
@keyframes sec2_tit_ani{
    0%{ transform:translate3d(-50px, 0px, 0) rotate(0deg);opacity:0;}
    100%{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1;}
}
@keyframes sec2_tit_ani_Right{
    0%{ transform:translate3d(50px, 0px, 0) rotate(0deg);opacity:0;}
    100%{transform:translate3d(0, 0, 0) rotate(0deg);opacity:1;}
}
.sec2 .area .img{
transform:scale(1.1);
transition:all 1.1s;
filter:blur(10px);
}
.sec2.in-view .area .img{transform:scale(1);filter:blur(0px);}
/*sec3motion*/
.sec3 .titlearea .cate,
.sec3 .titlearea .tit,
.sec3 .titlearea .more_btn{opacity:0;transform:translateY(100px);transition:all 1.2s;}
.sec3 .titlearea.in-view .cate,
.sec3 .titlearea.in-view .tit,
.sec3 .titlearea.in-view .more_btn{opacity:1;transform:translateY(0px);}
.sec3 .titlearea.in-view .tit{transition-delay:0.1s;}
.sec3 .titlearea.in-view .more_btn{transition-delay:0.2s;}
.sec3 .product{opacity:0;transform:translateY(100px);transition:all 1.2s;}
.sec3 .product.in-view{
opacity:1;transform:translateY(0px);transition-delay:0.4s;
}
/*sec4motion*/
.sec4 .titlearea .cate,
.sec4 .titlearea .tit,
.sec4 .titlearea .more_btn{opacity:0;transform:translateY(100px);transition:all 1.2s;}
.sec4 .titlearea.in-view .cate,
.sec4 .titlearea.in-view .tit,
.sec4 .titlearea.in-view .more_btn{opacity:1;transform:translateY(0px);}
.sec4 .titlearea.in-view .tit{transition-delay:0.1s;}
.sec4 .titlearea.in-view .more_btn{transition-delay:0.2s;}
.sec4 .social>li{opacity:0;}
.sec4 .social.in-view>li{
animation-name: sec4_item; animation-duration:1.2s;animation-fill-mode:forwards;
animation-timing-function: ease-in-out;animation-delay:0.4s;
}
.sec4 .social.in-view>li:nth-child(2){animation-delay:0.5s;}
.sec4 .social.in-view>li:nth-child(3){animation-delay:0.6s;}
@keyframes sec4_item{
0%{transform:translateY(60%);opacity:0;}
100%{transform:translateY(0%);opacity:1;}
}
.sec4.in-view:before{
width:0%;
transition:width 1.25s;transition-delay:1.3s;
}

/*sec5 motion*/
.sec5 .bg_icon{
transform:translate(-150px, 150px);
opacity:0;
transition:all 1s ease;
}
.sec5 .bg_icon.in-view{
transform:translate(0px, 0px);
opacity:1;
transition-delay:0.3s;
}
.sec5 .strlist>li{
opacity:0;
/* transform:translateY(100px);
transition:all 1s; */
backface-visibility: hidden;
/* transition:all 1s; */
/* transform-style: preserve-3d;
    perspective: 1000px; */
}
.sec5 .strlist>li.in-view{
/* transform-style: preserve-3d;
      opacity:1;
    transition-property: transform, opacity;
    transition-duration: 1s;
    transition-timing-function: ease-in-out; */
animation-name: listRotateY;animation-duration: 1.25s;animation-fill-mode:forwards;animation-timing-function: ease;
 transform-origin:left center;
}

.sec5 .strlist>li.in-view:nth-child(3){animation-name:listRotateX;transform-origin:center top;animation-delay:0.1s;}
.sec5 .strlist>li.in-view:nth-child(4){animation-name: listRotateY2; transform-origin:right center;animation-delay:0.1s;}
.sec5 .strlist>li.in-view:nth-child(5){animation-name: listRotateX2;transform-origin:center bottom;animation-delay:0.2s;}
/* .sec5 .strlist>li:nth-child(1).in-view{animation-delay:0.2s;}
.sec5 .strlist>li:nth-child(3).in-view{animation-delay:0.3s;}
.sec5 .strlist.in-view>li:nth-child(4){animation-delay:0.4s;}
.sec5 .strlist.in-view>li:nth-child(5){animation-delay:0.5s;} */
.sec5 .strlist>.title_box .cate,
.sec5 .strlist>.title_box .tit{
opacity:0;
transform:translateY(80px);
transition:all 1s;
}
.sec5 .strlist.in-view>.title_box.in-view .cate,
.sec5 .strlist.in-view>.title_box.in-view .tit{
opacity:1;
transform:translateY(0px);
transition-delay:0.1s;
}
.sec5 .strlist.in-view>.title_box.in-view .tit{transition-delay:0.2s;}
@keyframes listRotateY{
0%{opacity:0;transform:rotateY(-20deg);}
100%{opacity:1;transform:rotateY(0deg);}
}
@keyframes listRotateY2{
0%{opacity:0;transform:rotateY(20deg);}
100%{opacity:1;transform:rotateY(0deg);}
}
@keyframes listRotateX{
0%{opacity:0;transform:rotateX(60deg);}
100%{opacity:1;transform:rotateX(0deg);}
}
@keyframes listRotateX2{
0%{opacity:0;transform:rotateX(-60deg);}
100%{opacity:1;transform:rotateX(0deg);}
}
/*sec6 motion*/
.sec6 .time1,
.sec6 .time2,
.sec6 .time3,
.sec6 .time4{
opacity:0;
}
.sec6 .text_g.in-view .time1,
.sec6 .text_g.in-view .time2,
.sec6 .text_g.in-view .time3,
.sec6 .text_g.in-view .time4{
animation: sec6_tit_ani 1.3s ease;
  animation-fill-mode: forwards;
   animation-direction:alternate;
   animation-delay:0.3s;
}
.sec6 .text_g.in-view .time3,
.sec6 .text_g.in-view .time4{
animation-name:sec6_tit_ani_Right;
animation-delay:0.3s;
}
/* .sec6 .time1 span.char,
.sec6 .time2 span.char,
.sec6 .time3 span.char,
.sec6 .time4 span.char{display: inline-block;opacity:0;}
.sec6 .time1 span.char,
.sec6 .time2 span.char,
.sec6 .time3 span.char{display: inline-block;opacity:0;}

.sec6.in-view .time1 span.char,
.sec6.in-view .time2 span.char,
.sec6.in-view .time3 span.char,
.sec6.in-view .time4 span.char{
 animation: sec6_tit_ani 0.6s cubic-bezier(.5, 0, .5, 1);
  animation-fill-mode: forwards;
   animation-direction:alternate;
   animation-delay:calc(0.2s + var(--char-index) * 30ms);
} */
/* .sec6.in-view .time2 span.char,
.sec6.in-view .time4 span.char{animation-name:sec6_tit_ani_Right;} */

/* .sec6.in-view .time2 span.char{animation-delay:calc(0.5s + var(--char-index) * 30ms);}
.sec6.in-view .time3 span.char{animation-delay:calc(1s + var(--char-index) * 30ms);}
.sec6.in-view .time4 span.char{animation-delay:calc(1.5s + var(--char-index) * 30ms);}
*/
@keyframes sec6_tit_ani{
    0%{ transform:translate3d(-10vw, 0px, 0) rotate(0deg) scale(1.1);opacity:0;filter:blur(5px);}
    100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1); opacity:1;filter:blur(0px);}
}
@keyframes sec6_tit_ani_Right{
    0%{ transform:translate3d(10vw, 0px, 0) rotate(0deg) scale(1.1);opacity:0;filter:blur(5px);}
    100%{transform:translate3d(0, 0, 0) rotate(0deg) scale(1);opacity:1;filter:blur(0px);}
} 
/*sec7 motion*/
.sec7 .titlearea .cate,
.sec7 .titlearea .tit,
.sec7 .titlearea .more_btn{opacity:0;transform:translateY(100px);transition:all 1.2s;}
.sec7 .titlearea.in-view .cate,
.sec7 .titlearea.in-view .tit,
.sec7 .titlearea.in-view .more_btn{opacity:1;transform:translateY(0px);}
.sec7 .titlearea.in-view .tit{transition-delay:0.1s;}
.sec7 .titlearea.in-view .more_btn{transition-delay:0.2s;}
.sec7 .press{opacity:0;transform:translateY(100px);transition:all 1.2s;}
.sec7 .press.in-view{
opacity:1;transform:translateY(0px);transition-delay:0.4s;
}

/*sec8 motion*/
.sec8>.imgarea{position: relative;}
.sec8>.imgarea:before{
position: absolute;content:'';
width:100%;height:100%;
background: rgba(70,138,91,1);
z-index:50;
top:0;left:0;
transition:width 0.8s;
}
.sec8>.imgarea:after{
position: absolute;content:'';
width:100%;height:100%;
background: rgba(255,255,255,0.5);
z-index:49;
top:0;left:0;
transition:width 0.8s;
}
.sec8>.imgarea.in-view:before,
.sec8>.imgarea.in-view:after{
width:0%;
}
.sec8>.imgarea.in-view:after{transition-delay:0.2s;}
.sec8>.txtarea .cate,
.sec8>.txtarea .tit,
.sec8>.txtarea h5,
.sec8>.txtarea .more_btn{
opacity:0;
transform:translateY(100px);
transition:all 1.2s;
}
.sec8>.txtarea.in-view .cate,
.sec8>.txtarea.in-view .tit,
.sec8>.txtarea.in-view h5,
.sec8>.txtarea.in-view .more_btn{
opacity:1;
transform:translateY(0px);transition-delay:0.2s;
}
.sec8>.txtarea.in-view .tit{transition-delay:0.4s;}
.sec8>.txtarea.in-view h5{transition-delay:0.6s;}
.sec8>.txtarea.in-view .more_btn{transition-delay:0.8s;}
/*svg animation*/
.sec8 .ani-path{
 stroke: rgba(255,255,255,0.7);
stroke-width: 1;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;

/* 경로의 총 길이만큼 대시 설정 */
stroke-dasharray: 2478;
stroke-dashoffset: 2478;


}
.sec8>.txtarea.in-view .ani-path{stroke-dasharray: 0;
/* 애니메이션 적용 */
animation: drawPath 3.35s ease-in-out forwards;
}
@keyframes drawPath {
	to {
		stroke-dashoffset: 0;
	}
}