@charset "utf-8";
.pcbr{display:none;}
.ptbr{display:block;}
.tbbr{display:block;}
.tmbr{display:block;}
.mbbr{display:none;}
.pc_view{display:none !important;}
.pt_view{display:block !important;}
.t_view{display:block !important;}
.tm_view{display:block !important;}
.m_view{display:none !important;}
.dn{display:none;}
#wrap{overflow-x:hidden;}
* {font-family:"Wix Madefor Display","Noto Sans KR","돋움",dotum,sans-serif;box-sizing:border-box;}

html.hidden{overflow:hidden !important;}

#header{transform:translateY(-100px);transition:transform 0.6s;}
#header.open{transform:translateY(0);transition:transform 0.6s;}
#header.nav-up{transform:translateY(-100px);transition:transform 0.6s;}
#header.nav-down{transform:translateY(0);transition:transform 0.6s;}

/*nav*/
#nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 3001;
}
#nav.unvs{opacity:0;visibility:hidden;}
#nav.vs{opacity:1;visibility:visible;transition:opacity 0.4s ease;}

#nav .nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
border:1px solid rgba(0,0,0,0.6);
  box-sizing:border-box;
  cursor: pointer;
  position: relative;
  transform-origin:center;
}

#nav .nav-dot.active {
	 transform:scale(1.5);
  border:1px solid #000;

}
/*intro*/
#intro{
	position:fixed;left:0;top:0;z-index:3000;
	width:100%;height:100%;
	background:#fff;
}
#intro .intro_imgs{
	position: absolute;
	top:0;left:0;bottom:0;right:0;
	margin:auto;
	transform:scale(0.3);
	overflow:hidden;
	clip-path: inset(0 0 0 0 round 4vw);
}


#intro .intro_imgs .img1,
#intro .intro_imgs .img2,
#intro .intro_imgs .sec1{display: block;width:100%;position: absolute;width:100%;height:100%;top:0;left:0;transform:translateY(100%);
transition:transform 0.6s ease;
clip-path: inset(0 0 0 0 round 4vw);
} 
 #intro .intro_imgs .img1{z-index:1;}
#intro .intro_imgs .img2{z-index:2;}
#intro .intro_imgs .sec1{z-index:3;} 


#intro.start .intro_imgs .img1{transform:translateY(0%);transition:transform 0.55s ease;}
#intro.start .intro_imgs .img2{transform:translateY(0%);transition:transform 0.55s ease;transition-delay:0.25s;}
#intro.start .intro_imgs .sec1{transform:translateY(0%);transition:transform 0.55s ease;transition-delay:0.55s;}


#intro.start .intro_imgs{
 animation-name:  introAni;animation-duration: 1s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:1s; 
}

#intro.end .intro_imgs .img1,
#intro.end .intro_imgs .img2,
#intro.end .intro_imgs .sec1{clip-path: inset(0 0 0 0 round 0);transition:clip-path 0.4s ease;}

@keyframes introAni{
0%{transform:scale(0.3);clip-path: inset(0 0 0 0 round 4vw);}
100%{transform:scale(1);clip-path: inset(0 0 0 0 round 0);}
}

@media screen and (max-width:990px){
	#intro.start .intro_imgs{height:56.25%;}
	@keyframes introAni{
	0%{transform:scale(0.3);clip-path: inset(0 0 0 0 round 4vw);}
	100%{transform:scale(1);height:100%;clip-path: inset(0 0 0 0 round 0);}
	}
}

section .titlearea .subtit{
	font-size:clamp(16px,3vw,20px);color:#000;font-weight: 700;text-transform: uppercase;
}
section .titlearea .tit{
	font-size:clamp(32px,7vw,50px);color:#000;font-weight: 600;
}
section .titlearea .desc{
	font-size:clamp(20px,2.8vw,24px);color:#666666;font-weight: 300;
}

 .more_btn{
	overflow:hidden;position: relative;
	width:180px;height:54px;border-radius:16px;background: #8bb928;
	display: flex;align-items:center;justify-content:center;
}
.more_btn>span{color:rgba(255,255,255,0.6);font-size:12px;position: relative;z-index:10;transition:all 0.5s ease-in-out;}
.more_btn>i{
position: relative;z-index:10;transition:all 0.5s ease-in-out;
background: url(/images/main/more_btn_arr.png)no-repeat center;width:13px;height:10px;display: inline-block;margin-left: 10px;
}
 .more_btn:before{
	position: absolute;content:'';
	width:100%;height:100%;
	background: #fff;
	top:0;left:0;
	width:0;transition:width 0.4s ease-in-out;
 }
  .more_btn:hover:before{width:100%;transition:width 0.4s ease-in-out;}
  .more_btn:hover>span{color:#8bb928;transition:all 0.5s ease-in-out;font-weight: 500;}
  .more_btn:hover>i{background: url(/images/main/more_btn_arr_hover.png)no-repeat center;transition:all 0.5s ease-in-out;}
/**.sec4 .business .txtSlider .swiper-slide .more_btn:hover>span{color:#8bb928;transition:all 0.5s ease-in-out;font-weight: 500;}
.sec4 .business .txtSlider .swiper-slide .more_btn:hover>i{background: url(/images/main/more_btn_arr_hover.png)no-repeat center;transition:all 0.5s ease-in-out;}
**/
/*sec1*/
.sec1{
	width:100%;height:100vh;position: relative;overflow:hidden;
}
.sec1 .visual{width:100%;height:100vh;position: relative;overflow:hidden;}
.sec1 .visual .swiper-slide{
	position: relative;
	width:100%;height:100%;background: #000;
}
.sec1 .visual .swiper-slide .bg{
	position: absolute;
	z-index:-1;
	top:50%;left:50%;transform:translate(-50%, -50%);
	width:100%;height:100%;
	background: url(/images/main/sec1_bg3.jpg)no-repeat center / cover;
}
.sec1 .visual .swiper-slide.slide2 .bg{background: url(/images/main/sec1_bg2.jpg)no-repeat right 30% center / cover;}
.sec1 .visual .swiper-slide.slide3 .bg{background: url(/images/main/sec1_bg1.jpg)no-repeat center / cover;}
.sec1 .visual .swiper-slide .titlearea{
	width:100%;
	padding:0 3.125vw;
	position: absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
}
.sec1 .visual .swiper-slide .titlearea h2{
	font-family: "Wix Madefor Display";
	font-size:clamp(46px,7vw,65px);color:#fff;font-weight: 500;
	white-space:nowrap;line-height: 1.1em;
	margin-bottom: 30px;
}
.sec1 .visual .swiper-slide .titlearea h2>div{
	overflow:hidden;height:auto;
}
.sec1 .visual .swiper-slide .titlearea h2>div>span{
display: block;
}
.sec1 .visual .swiper-slide .titlearea p{
	font-size:clamp(20px,2vw,24px);color:#fff;font-weight: 400;font-family: "Noto Sans KR";
}

.sec1 .visual .vpaging{
	position: absolute;
	width:100%;
	box-sizing:border-box;
	padding:0 3.125vw;
	top:auto;
	bottom:60px;
	left:0;
	z-index:100;
	display: flex;align-items:center;justify-content:space-between;
}
.sec1 .visual .vpaging>span{
display: block;width:calc((100% - 60px) / 3);
width:auto;
height:auto;
border-radius:0;
width:100%;
position: relative;
background: 0;
opacity:1;
font-size:clamp(20px,2.5vw,28px);color:transparent;font-weight: 800;
-webkit-text-stroke: 1px rgba(255,255,255,0.4);
padding-bottom: 20px;
}
.sec1 .visual .vpaging>span.swiper-pagination-bullet-active{color:#fff;-webkit-text-stroke: 1px #fff;font-weight: 700;}
.sec1 .visual .vpaging>span:before{
	position: absolute;
	content:'';
	width:100%;
	height:2px;
	background: rgba(255,255,255,0.3);
	bottom:0;left:0;
}
.sec1 .visual .vpaging>span:after{
position: absolute;
	content:'';
	width:0%;
	height:2px;
	background: rgba(255,255,255,1);
	bottom:0;left:0;
}
.sec1 .visual .vpaging>span.swiper-pagination-bullet-active:after{
	width:100%;
	transition:width 3s linear;
}

#custom_cursor {
	width:120px;height:120px;
	position: fixed;
	top: -10px;
	left: -10px;
	z-index: 15000;
	cursor:none;
	pointer-events: none;
}
.custom_cursor_inner {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hoverwrap{
	overflow:hidden;
	width:120px;height:120px;	
	transition:transform 0.6s ease;
}
.hoverwrap .hover{
	overflow:hidden;
	position:relative;z-index:100;
	width:100%;height:100%;
	margin:0 auto;border-radius:50%;
	background: #083e8e;cursor:pointer;
}

.hoverwrap .hover .circle{
	display:block;content:"";
	width:0px;height:0px;
	background:#8bb928;
	position:absolute;left:0px;top:0px;
	border-radius:50%;
	pointer-events: none;
	cursor:pointer;
}
.hoverwrap .hover span{position:relative;z-index:10;}
.explode-circle{animation: explode 0.6s forwards;}
.desplode-circle{animation: desplode 0.6s forwards;}
@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background:#8bb928;
  }
  100% {
    width:400px;
    height:400px;
    margin-left: -140px;
    margin-top: -140px;
    background:#8bb928;
  }
}

@keyframes desplode {
  0% {
    width: 400px;
    height: 400px;
    margin-left: -140px;
    margin-top: -140px;
    background:#8bb928;
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
   background:#8bb928;
  }
}

.hoverwrap .ctr{
	position: absolute;width:100%;
	top:50%;left:50%;
	transform:translate(-50%, -50%);
	height:auto;z-index:100;
	display: flex;align-items:center;justify-content:center;
}
.hoverwrap .ctr .nums{font-size:14px;color:#ffffff;font-weight: 400;font-family: "Wix Madefor Display";display: flex;align-items:center;
margin:0 15px;}
.hoverwrap .ctr .nums .bar{margin:0 8px;
	width:1px;height:10px;background: #fff;display: block;
}
.hoverwrap .ctr>div:not(.nums){
display: block;
width:9px;height:15px;
background: url(/images/main/visual_nex_btn.png)no-repeat center / cover;
}
.hoverwrap .ctr>div.vprev{
transform:rotate(-180deg);
}
.hoverwrap .ctr>div:not(.nums).dn{opacity:0;}

.sec1 .vnav{
	position: absolute;
    display: block;
    width: 50%;
    top: 0;
    height: 100%;
    z-index:20;
    opacity: 1;
    visibility: visible;
    transition: .3s;
}
.sec1 .vnav>span{opacity:0;visibility:hidden;;}
.sec1 .vnav.vprev-area{left:0;}
.sec1 .vnav.vnext-area{right:0;}
.sec1 .swiper-button-disabled{display:none !important;}
/* .sec1 .first-slide .vnav.vnext-area{width:100%;}
.sec1 .last-slide .vnav.vprev-area{width:100%;} */

/*sec2*/
.sec2{
position: relative;overflow:hidden;
/* margin-top: -100vh; */
}
.sec2 .intro-wrap{}
.sec2 .sticky{
	position: sticky;
	top:0;left:0;width:100%;height:100vh;background: #8ebc2b;
	/* opacity:0;visibility:hidden; */
	display: flex;align-items:center;justify-content:center;
}
.sec2 .sticky .wave{
position: absolute;top:0;left:0;width:100%;height:100%;
z-index:50;
}
.sec2 .sticky .wave .rects{
	position: absolute;
	top:0%;
	left:50%;
	width:100%;height:100%;
	transform:translateX(-50%);
}
.sec2 .sticky .wave .rects .rect{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) rotate(45deg);
	border:1px solid rgba(255,255,255,0.5);
	border-radius:20%;
	width:10vw;
	height:10vw;
	/* opacity:0; */
	/* transform:rotate(45deg); */
}
.sec2 .sticky .wave .rects .rect:nth-child(2){width:20vw;height:20vw;}
.sec2 .sticky .wave .rects .rect:nth-child(3){width:30vw;height:30vw;}
.sec2 .sticky .wave .rects .rect:nth-child(4){width:40vw;height:40vw;}
.sec2 .sticky .heading{
	position: relative;z-index:100;
	transform:rotate(45deg);
	border-radius:20%;
	width:100%;height:100%;
	/* max-width:919px;
	max-height:919px; */
	background: #fff;
	z-index:2;
	margin:0 auto;
	width:100vw;height:100vw;
	clip-path: inset(100% round 140px);
}
.sec2 .sticky  .txtarea{
	position: absolute;
	top:50%;left:50%;
	width:100%;height:100%;
	transform:translate(-50%, -50%) rotate(-45deg);
	display: flex;flex-direction:column;
	justify-content:center;align-items:center;
}
.sec2 .sticky  .txtarea .para{
	font-size:clamp(64px,9vw,120px);font-weight: bold;color:#000;
	white-space:nowrap;
	line-height: 1.2em;
}
.sec2 .sticky  .txtarea h5{margin-top: 40px;margin-bottom: 25px;font-size:clamp(17px,3.3vw,30px);color:#111111;font-weight: 700;}
.sec2 .sticky  .txtarea p{line-height: 1.7em;text-align: center;
font-size:clamp(15px,2.5vw,22px);color:#666666;font-weight: 350;}


/*sec3*/
.sec3{
	position: relative;
	width:100%;
	max-width:100vw;
	padding:160px 3.125vw;
	background: #f1f1f2;overflow:hidden;
}
.sec3 .bg{
	position: absolute;
	top:0;right:0;
	width:100%;height:100%;
	background: url(/images/main/sec3_tech_bg.jpg)no-repeat center / cover;
}
.sec3 .titlearea .tit{position: relative;margin-top:40px;margin-bottom: 20px;}
.sec3 .titlearea .tit>div{position: relative;display: inline-block;}
.sec3 .titlearea .tit sub{
	position: absolute;font-size:16px;
	white-space:nowrap;font-weight: 600;
	bottom:-15px;left:50%;transform:translateX(-50%);color:#000;
	
}
.sec3 .listwrap{margin-top: 120px;}
.sec3 .listwrap ul{
	display: flex;flex-wrap:wrap;gap:0  4vw;justify-content:space-between;
	
}
.sec3 .listwrap ul li{
	position: relative;
	width:calc((100% - 4vw) / 2);
	padding:70px 0 95px;
}
.sec3 .listwrap ul li:before{
	position: absolute;content:'';
	top:0;
	width:100%;height:1px;background: #acacae;
}
.sec3 .listwrap ul li:nth-child(odd):before{left:0;}
.sec3 .listwrap ul li:nth-child(even):before{right:0;}
.sec3 .listwrap ul li .num{
	display: flex;align-items:end;
}
.sec3 .listwrap ul li .num>.count{
font-family: "Wix Madefor Display";
	font-size:clamp(48px,8.5vw,80px);
	font-weight: bold;color:#000;
}
.sec3 .listwrap ul li .num>.unit{
	margin-left: 12px;
	font-family: "Wix Madefor Display";
	font-size:clamp(32px,4.5vw,40px);font-weight: bold;color:#000;
	padding-bottom: 12px;
}
.sec3 .listwrap ul li .txt{
	margin-top:40px;
	font-size:clamp(20px,2.8vw,24px);
	color:#000;line-height: 1.5em;
	font-weight: 500;
}

/*sec4*/
.sec4{position: relative;width:100%;overflow:hidden;}
.sec4 .titlearea{
	position: absolute;top:0;left:0;z-index:30;
	padding:86px 3.125vw 0;
	color:#fff;
}
.sec4 .titlearea .subtit {font-size:clamp(16px,3vw,20px)color:#fff;font-weight: 500;}
.sec4 .business_g{
	position: relative;width:100%;min-height:100vh;
	display: flex;
}
.sec4 .business_g>.box{
width: 25%;
padding-left: 3.125vw;padding-right: 3.125vw;
background-size: cover;
transition: width 0.3s ease;
background-position: center;
position: relative;
box-sizing:border-box;
background-repeat: no-repeat;
padding-top:170px;
}
.sec4 .business_g>.box:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}
.sec4 .business_g>.box .tit{
font-size:32px;color:#fff;font-weight: bold;font-family: var(--font1);  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.sec4 .business_g>.box .desc{
margin-top: 35px;font-size:18px;color:#fff;font-weight: 400;font-family: var(--font1); 
line-height: 1.6em;word-wrap:normal;word-break:keep-all;
padding-right: 1vw;
opacity:0;visibility:hidden;transform:translateY(40px);
}
.sec4 .business_g>.box:nth-child(1){
background-position: left 38% center;
}
.sec4 .business_g>.box:nth-child(3){
background-position: left 42% center;
}
.sec4 .business_g>.box .more_btn{
position: absolute;bottom:60px;right:3.125vw;
}
.sec4 .business_g>.box:hover{width:40%;}
.sec4 .business_g>.box:hover:before{opacity: 0;}
.sec4 .business_g>.box:hover .desc{opacity:1;visibility:visible;transform:translateY(0px);transition: all 0.3s ease-in-out;}

@media screen and (max-width:1200px){
	.sec4 .titlearea{padding-top: 60px;}
	.sec4 .business_g{flex-direction:column;}
	.sec4 .business_g>.box{padding-top: 120px;width:100%;height:400px;transition:height 0.6s ease;}
	.sec4 .business_g>.box:hover{width:100%;height:450px;transition:height 0.6s ease;}
}

/*sec5*/
.sec5{
width:100%;max-width:100vw;
background: url(/images/main/sec5_bg.png)no-repeat center top / cover;
box-sizing:border-box;
padding:120px 3.125vw 180px;
}
.sec5 .titlearea .tit{
	margin:40px auto 28px;
}
.sec5 .listwrap{
	width:100%;
	margin:80px auto 220px;
}
.sec5 .listwrap>ul{
	display: flex;flex-wrap:wrap;
	gap:0.88vw;box-sizing:border-box;
}
.sec5 .listwrap>ul>li{
width:calc((100vw - 3.125vw * 2 - 25px * 2 ) / 3);
height:calc((100vw - 3.125vw * 2 - 25px * 2 ) / 3);
width:30vw;
height:30vw;
max-width:584px;max-height:584px;
box-sizing:border-box;
position: relative;
overflow:hidden;
display: flex;flex-direction:column;justify-content:center;
padding:0 3.6vw;
}

@media screen and (min-width:1920px){
	.sec5 .listwrap>ul{justify-content:center;gap:0.88vw;}
	.sec5 .listwrap>ul>li{width:30vw;
height:30vw;max-width:584px;max-height:584px;}
}
.sec5 .listwrap>ul>li>.bg{
	position: absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;height:100%;
	object-fit:cover;
	background: url(/images/main/sec5_img1.png)no-repeat center / cover;
}
.sec5 .listwrap>ul>li:nth-child(3)>.bg{background: url(/images/main/sec5_img2.png)no-repeat center / cover;}
.sec5 .listwrap>ul>li:nth-child(4)>.bg{background: url(/images/main/sec5_img3.png)no-repeat center / cover;}
.sec5 .listwrap>ul>li:nth-child(5)>.bg{background: url(/images/main/sec5_img4.png)no-repeat center / cover;}
.sec5 .listwrap>ul>li:nth-child(2){border-radius:10px 292px 292px 10px;}
.sec5 .listwrap>ul>li:nth-child(3){border-radius:292px 292px 10px 10px;}
.sec5 .listwrap>ul>li:nth-child(4){border-radius:10px 10px 292px 292px;}
.sec5 .listwrap>ul>li:nth-child(5){border-radius:292px 10px 10px 292px;}
.sec5 .listwrap>ul>li .txts{
	position: relative;z-index:20;
}
.sec5 .listwrap>ul>li .txts .icon{}
.sec5 .listwrap>ul>li .txts p{
	margin-top:20px;
	font-size:clamp(20px,2.4vw,26px);color:#fff;font-weight: 500;font-family: "Noto Sans KR";
}
.sec5 .sustain-section{
	overflow:hidden;
	width:100%;position: relative;
/* 	height:950px; */
	box-sizing:border-box;
	
	
}
.sec5 .sustain-section .conarea{
	border-radius:20px;width:100%;position: relative;box-sizing:border-box;
	height:700px;overflow:hidden;padding:0 3.6vw;padding-top: 160px;padding-bottom: 60px;
}
.sec5 .sustain-section .absolute-wrap{
	overflow:hidden;position: absolute;bottom:0;left:0;right:0;top:0;box-sizing:border-box;
}
.sec5 .sustain-section .absolute-bg-wrap{
	position: absolute;bottom:0;left:0;right:0;top:0;box-sizing:border-box;
}
.sec5 .sustain-section .bg{
	background: url(/images/main/sec5_bg2.png)no-repeat center / cover;
	position: absolute;
	top:50%;left:50%;
	transform:translate(-50%, -50%);
	width:100%;height:100%;
	border-radius:20px;
	background-position: 50% 50%;
}
.sec5 .sustain-section .titlearea{
	position: absolute;
	width:100%;height:100%;
	z-index:30;padding:0 3.6vw;box-sizing:border-box;padding-top: 120px;padding-bottom: 35px;
}
.sec5 .sustain-section .titlearea .subtit{font-size:clamp(16px,3vw,20px);color:#111;font-weight: 700;}
.sec5 .sustain-section .titlearea .tit{color:#111111;}
.sec5 .sustain-section .titlearea .slogan{
display: block;
	font-size:clamp(22px,3.25vw,30px);color:#222222;font-weight:600;margin-bottom: 25px;
}
.sec5 .sustain-section .titlearea .desc{
	font-size:clamp(16px,3vw,20px);color:#666666;font-weight: 400;line-height: 1.65em;
}
.sec5 .sustain-section .titlearea .more_btn{
	position: absolute;bottom:40px;right:3.6vw;
}


@media screen and (max-width:1200px){
	.sec5 .listwrap>ul{justify-content:center;gap:1.7vw;}
	.sec5 .listwrap>ul>li{width:40vw;height:40vw;}
}
@media screen and (max-width:990px){
	.sec5 .listwrap>ul{justify-content:center;gap:1.7vw;}
	.sec5 .listwrap>ul>li{width:43vw;height:43vw;}
}


/*sec6*/
.sec6{width:100%;box-sizing:border-box;background: #f2efe9;padding:150px 3.125vw;padding-bottom: 120px;}
.sec6 .titlearea{position: relative;}
.sec6 .titlearea .tit{margin-top: 40px;}
.sec6 .titlearea .slogan{
	color:#222;font-size:clamp(22px,3.25vw,30px);font-weight: bold;font-family: "Noto Sans KR";display: block;margin-top: 15px;
}
.sec6 .titlearea .more_btn{
position: absolute;right:0;bottom:0;
}
.sec6 .conarea{margin-top: 70px;}
.sec6 .press{overflow:hidden;position: relative;}
.sec6 .press ul{
width: 100%;
box-sizing: border-box;
border-top: 2px solid #000000;
}
.sec6 .press .item{
	width:100%;
	border-bottom:1px solid #dadada;
}
.sec6 .press .item>a{width:100%;display: flex;align-items:center;justify-content:space-between;padding:30px 30px;}
.sec6 .press .item .date{width:100px;}
.sec6 .press .item .date .day{display: block;text-align: center;font-size:64px;color:#8bb928;font-weight: 700;}
.sec6 .press .item .date .ym{display: block;text-align: center;font-size:17px;color:#8bb928;font-weight: 400;margin-top: -10px;}
.sec6 .press .item .tit{width:calc(100% - 100px - 70px);padding:0 10%;padding-left: 3vw;font-size:22px;color:#000000;font-weight: 700;
overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    box-sizing: border-box;
    display: -webkit-box;
    height:1.6em;
	font-family: "Noto Sans KR";
}
.sec6 .press .item .arr{position: relative;width:70px;height:70px;border-radius:50%;background: #8bb928;border:1px solid #8bb928;}
.sec6 .press .item .arr .icon{position: absolute;width:19px;height: 14px;
content:'';top:50%;left:50%;transform:translate(-50%, -50%);background: url(/images/main/news_arr.png)no-repeat center;}

.sec6 .press .item:hover .arr{background: #fff;border:1px solid rgba(255,255,255,0.4);transition:all 0.1s;}
.sec6 .press .item:hover .arr .icon{background: url(/images/main/news_arr_hover.png)no-repeat center;transition:all 0.1s;}

/*sec7*/
.sec7{
box-sizing:border-box;width:100%;padding:0 3.125vw 120px;background: #f2efe9;
display: flex;justify-content:space-between;
}
.sec7 .boxwrap{width:calc((100% - 9.37vw) / 2);position: relative;}
.sec7 .boxwrap .titlearea{margin-bottom: 45px;position: relative;}
.sec7 .boxwrap .titlearea .slogan{
	color:#222;font-size:clamp(22px,3.25vw,30px);font-weight: bold;font-family: "Noto Sans KR";display: block;margin-top: 15px;
}
.sec7 .boxwrap .titlearea .desc{
	font-size:clamp(16px,3vw,20px);
	color:#666666;
	font-weight: 300;font-family: "Noto Sans KR";
	margin-top: 6px;
}
.sec7 .boxwrap .titlearea a{
position: absolute;bottom:0;right:0;
}
.sec7 .boxwrap .img{position: relative;width:100%;
aspect-ratio: 16 / 9;
border-radius:20px;overflow:hidden;margin-bottom: 30px;}
.sec7 .boxwrap .img>a{
display: block;width:100%;height: 100%;
}
.sec7 .boxwrap .img>a>img{
	width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;
}
.sec7 .boxwrap .img:hover>img{transform:scale(1.1);transition:transform 0.6s ease;}
.sec7 .boxwrap:before{
	position: absolute;content:'';
	width:1px;right:-4.6vw;background: #c2bfba;
	top:3.64vw;height:calc(100% - 160px);
}
.sec7 .boxwrap .img .play{
position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);
border:0;outline:0;background: 0;
background: url(/images/common/play_btn.png)no-repeat center / cover;
width:min(5.9vw, 113px);aspect-ratio: 1 / 1;
}
.sec7 .boxwrap .img .play:before{
position: absolute;content:'PLAY';
top:110%;left:50%;transform:translateX(-50%);
font-size:17px;color:#fff;font-weight: 600;font-family: "Wix Madefor Display";font-style:normal;
}
.sec7 .boxwrap .txts{
	display: flex;align-items:center;justify-content:space-between;
}

.sec7 .boxwrap .txts .tit{
	color:#666666;font-size:19px;font-weight: 350;
}
/*videopop*/
.vpop {
     display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index:4100;
    background: #fff;
    max-width: 1240px;
    width: 94%;
    transform: translate(-50%,-50%);
	
}
.vpop .conwrap{
	position: relative;
	background: #000;
	overflow: hidden;
	/* height:96vh; */
	height:0;
    box-sizing: border-box;
    padding: 0;
	padding-top: 56.25%;
}
.vpop .conwrap iframe{
position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);
width:100%;height:100%;

}

.vpop .btn_close{
	outline:none;
	border:none;background: transparent;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 10px;
    width: 44px;
    height: 44px;
	display:flex;justify-content:center;align-items:center;
}
.vpop .btn_close img{width:100%;height:100%;}



@media screen and (max-width:1200px){
	.sec7{flex-direction:column;gap:60px;}
	.sec7 .boxwrap{width:100%;}
	.sec7 .boxwrap:before{display: none;}
	.sec7 .boxwrap .img .play{width:min(9vw, 113px);}
}


.sec8{
width:100%;position: relative;
box-sizing:border-box;
	padding:0 3.6vw;
	padding-bottom: 80px;
	padding-top: 50px;
	background: #f2efe9;
}
.sec8:before{
position: absolute;content:'';
bottom:0;left:0;
width:100%;height:70%;
background: #d7d1c6;
}
.sec8 .titlewrap .subtit{
	font-size: 20px;
	color: #000;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 50px;
}
.sec8 .conarea{
	border-radius:20px;
	width:100%;position: relative;
	/* height:100vh;
	min-height:700px; */
	height:60vh;
	min-height:600px;
	overflow:hidden;
box-sizing:border-box;
}
.sec8 .absolute-wrap{
	overflow:hidden;position: absolute;bottom:0;left:0;right:0;top:0;box-sizing:border-box;
}
.sec8 .absolute-bg-wrap{
	position: absolute;bottom:0;left:0;right:0;top:0;box-sizing:border-box;
}
.sec8 .bg{
	background: #d7d1c6 url(/images/main/sec8_bg.png)no-repeat center top / cover;
	position: absolute;
	top:0;left:0;
	width:100%;height:120%;
	width:100vw;
object-fit: cover;
background-position: 50% 50%;
border-radius:20px;
}
.sec8 .titlearea{
	position: absolute;
	width:100%;height:100%;
	z-index:30;
	display: flex;flex-direction:column;justify-content:center;
	padding:60px 3.125vw 60px 3.6vw; 
	box-sizing:border-box;
}
.sec8 .titlearea .subtit{font-size:clamp(16px,3vw,20px);color:#fff;font-weight: 600;}
.sec8 .titlearea .tit{color:#fff;margin:40px 0 22px;font-size:clamp(32px,7vw,50px);}
.sec8 .titlearea .slogan{
display: block;
	font-size:clamp(20px,2.8vw,24px);color:#fff;font-weight:600;margin-bottom: 20px;
}
.sec8 .titlearea .more_btn{
	position: absolute;bottom:40px;right:3.125vw;
}


/*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;}
.fadeImgLeft.in-view{animation-name: fadeImgRight;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;}
 
  @keyframes bgScale{
   0%{transform:scale(1.15);}
   100%{transform:scale(1);}
  }
 @keyframes clipPathScale{
   0%{clip-path:inset(0);}
   100%{clip-path:inset(100%);}
  }
@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%, 90px, 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%);}
}

/*sec1*/
.sec1 .visual .swiper-slide .bg{transform:translateX(calc(-50% + 100px)) translateY(calc(-50% + 30px)) scale(1.3);transition:transform 2.5s ease;}
.sec1.on .visual .swiper-slide-active .bg{transform:translateX(-50%) translateY(-50%) scale(1);transition:transform 2.5s ease;}
.sec1 .visual .swiper-slide .titlearea h2>div>span{opacity:0;transform:translateY(100%);transition:opacity 0.6s ease-in-out, transform 0.8s ease-in-out;}
.sec1.on .visual .swiper-slide-active .titlearea h2>div>span{opacity:1;transform:translateY(0%);transition:opacity 0.6s ease-in-out, transform 0.8s ease-in-out;}
.sec1.on .visual .swiper-slide-active .titlearea h2>div:nth-child(2)>span{transition-delay:0.15s;}
.sec1 .visual .swiper-slide .titlearea p{opacity:0;transform:translateY(100%);transition:opacity 0.6s ease-in-out, transform 0.8s ease-in-out;}
.sec1.on .visual .swiper-slide-active .titlearea p{opacity:1;transform:translateY(0%);transition:opacity 0.6s ease-in-out, transform 0.8s ease-in-out;transition-delay:0.3s;}
.sec1 .visual .vpaging{bottom:-100px;opacity:0;}
.sec1.on .visual .vpaging{bottom:60px;opacity:1;transition:all 1s ease-in-out;transition-delay:0.1s;}
.hoverwrap{opacity:0;}
.hoverwrap.on{opacity:1;transition:opacity 0.6s ease;;transition-delay:0.1s;}

/*sec3*/
.sec3>.titlearea .subtit,
.sec3>.titlearea .tit,
.sec3>.titlearea .desc{
opacity:0;
}
.sec3>.titlearea.in-view .subtit,
.sec3>.titlearea.in-view .tit,
.sec3>.titlearea.in-view .desc{
animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec3>.titlearea.in-view .tit{animation-delay:0.1s;}
.sec3>.titlearea.in-view .desc{animation-delay:0.2s;}

.sec3 .listwrap ul li{opacity:0;}
.sec3 .listwrap ul li .num,
.sec3 .listwrap ul li .txt{opacity:0;}
.sec3 .listwrap ul li.in-view{
	animation-name: sec3Left;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec3 .listwrap ul li.in-view .num,
.sec3 .listwrap ul li.in-view .txt{
	animation-name: fadeLeft;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.1s;
}
.sec3 .listwrap ul li.in-view .txt{animation-delay:0.2s;}
.sec3 .listwrap ul li:nth-child(even).in-view{
	animation-name: sec3Right;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.2s;
}
.sec3 .listwrap ul li:before{width:0;}
.sec3 .listwrap ul li.in-view:before{width:100%;transition:width 1s ease-in-out;transition-delay:0.1s;}
.sec3 .listwrap ul li:nth-child(even).in-view:before{transition-delay:0.3s;}




@keyframes sec3Left{
 0%{transform:translate3d(-150px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
@keyframes sec3Right{
 0%{transform:translate3d(150px, 0, 0);opacity:0;}
  100%{transform:translate3d(0px, 0, 0);opacity:1;}
}
/*sec4*/
 .sec4>.titlearea .subtit{opacity:0;}
 .sec4>.titlearea.in-view .subtit{
 animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
 }
  .sec4 .business_g .box .tit{opacity:0;}
    .sec4 .business_g.in-view .box .tit{
	 animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	}
.sec4 .business_g.in-view .box:nth-child(2) .tit{animation-delay:0.1s;}
.sec4 .business_g.in-view .box:nth-child(3) .tit{animation-delay:0.2s;}

/*sec5*/
.sec5>.titlearea .subtit,
.sec5>.titlearea .tit,
.sec5>.titlearea .desc{
opacity:0;
}
.sec5>.titlearea.in-view .subtit,
.sec5>.titlearea.in-view .tit,
.sec5>.titlearea.in-view .desc{
animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec5>.titlearea.in-view .tit{animation-delay:0.1s;}
.sec5>.titlearea.in-view .desc{animation-delay:0.2s;}

.sec5 .listwrap>ul>li:nth-child(2){opacity:0;}
.sec5 .listwrap>ul>li.in-view:nth-child(2){
animation-name:  list2Ani;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec5 .listwrap>ul>li:nth-child(3){opacity:0;}
.sec5 .listwrap>ul>li.in-view:nth-child(3){
animation-name:  list3Ani;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}

.sec5 .listwrap>ul>li:nth-child(4){opacity:0;}
.sec5 .listwrap>ul>li.in-view:nth-child(4){
animation-name:  list4Ani;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec5 .listwrap>ul>li:nth-child(5){opacity:0;}
.sec5 .listwrap>ul>li.in-view:nth-child(5){
animation-name:  list5Ani;animation-duration: 1.2s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}

@keyframes list2Ani{
	0%{opacity:0;transform:translateX(calc(100% + 25px));}
	60%{opacity:1;transform:translateX(0);}
	100%{opacity:1;transform:translateX(0) ;}
}
@keyframes list3Ani{
	0%{opacity:0;transform:translateY(50px);}
	60%{opacity:1;transform:translateY(0);}
	100%{opacity:1;transform:translateY(0);}
}
@keyframes list4Ani{
	0%{opacity:0;transform:translateY(50px);}
	60%{opacity:1;transform:translateY(0);}
	100%{opacity:1;transform:translateY(0);}
}
@keyframes list5Ani{
	0%{opacity:0;transform:translateX(calc(-100% - 25px));}
	60%{opacity:1;transform:translateX(0);}
	100%{opacity:1;transform:translateX(0);}
}


.sec5 .listwrap>ul>li>.bg{transform:scale(1.1);transition:transform 1s ease-in-out;}
.sec5 .listwrap>ul>li.in-view>.bg{transform:scale(1);transition:transform 1.2s ease-in-out;}
.sec5 .listwrap>ul>li:hover>.bg{transform:scale(1.1);transition:transform 1s ease-in-out;}

.sec5 .listwrap>ul>li .txts .icon,
.sec5 .listwrap>ul>li .txts p{opacity:0;}
.sec5 .listwrap>ul>li.in-view .txts .icon,
.sec5 .listwrap>ul>li.in-view .txts p{
animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.7s;
}
.sec5 .listwrap>ul>li.in-view .txts p{animation-delay:0.8s;}
/*sec6*/
.sec6 .titlearea .subtit,
.sec6 .titlearea .tit{opacity:0;}
.sec6 .titlearea.in-view .subtit,
.sec6 .titlearea.in-view .tit,
.sec6 .titlearea.in-view .slogan{
animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}
.sec6 .titlearea.in-view .tit{animation-delay:0.1s;}
.sec6 .titlearea.in-view .slogan{animation-delay:0.2s;}
.sec6 .press{opacity:0;}
.sec6 .press.in-view{animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.2s;}/*sec7*/
.sec7{}
.sec7 .boxwrap .titlearea,
.sec7 .boxwrap .img,
.sec7 .boxwrap .txts{opacity:0;}
.sec7 .boxwrap .titlearea.in-view,
.sec7 .boxwrap .img.in-view,
.sec7 .boxwrap .txts.in-view{
animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
}

/*sec2 motion*/
@keyframes rectAni{
0%{transform:translate(-50%, -50%) rotate(-320deg) scale(1);}
98%{transform:translate(-50%, -50%) rotate(45deg) scale(2);}
100%{opacity:0;}
}
.sec2 .sticky .wave .rects .rect{
/* transform:translate(-50%, -50%) rotate(45deg) scale(1); */
transform:translate(-50%, -50%) rotate(-320deg) scale(1);
}
.sec2.on .sticky .wave .rects .rect{
animation-name: rectAni;animation-duration: 3s;animation-fill-mode:forwards;animation-timing-function: ease;
animation-delay:0s;
}
.sec2.on .sticky .heading{
clip-path:inset(0% round 140px);transition:clip-path 2s ease;
}
.sec2 .sticky .txtarea .para.right{transform:scale(1.2) translateX(50%);}
.sec2 .sticky .txtarea .para.left{transform:scale(1.2) translateX(-50%);}
.sec2.on .sticky .txtarea .para.right{transform:scale(1) translateX(0%);transition:all 1.1s ease-in-out;transition-delay:0.4s;}
.sec2.on .sticky .txtarea .para.left{transform:scale(1) translateX(0%);transition:all 1.1s ease-in-out;transition-delay:0.4s;}

.sec2 .sticky .txtarea h5{opacity:0;transform:translateY(60px);}
.sec2 .sticky .txtarea p{opacity:0;transform:translateY(60px);}
.sec2.on .sticky .txtarea h5{opacity:1;transform:translateY(0px);transition:all 1s ease-in-out;transition-delay:0.6s;}
.sec2.on .sticky .txtarea p{opacity:1;transform:translateY(0px);transition:all 1s ease-in-out;transition-delay:0.7s;}
.sec2.on .sticky{
animation: bgChange 0.8s ease-in-out;animation-fill-mode:forwards;animation-delay:0.8s;
}


@keyframes bgChange{
0%{}
100%{background-color:#fff;}
}