@charset "utf-8";
.pcbr{display:block;}
.ptbr{display:block;}
.tbbr{display:none;}
.tmbr{display:none;}
.mbbr{display:none;}
.pc_view{display:block !important;}
.pt_view{display:block !important;}
.t_view{display:none !important;}
.tm_view{display:none !important;}
.m_view{display:none !important;}
.dn{display:none;}
html{font-size:100%; /*1rem = 16px 브라우저기준설정*/}
html.hidden,body.hidden{overflow:hidden !important;}
#wrap{overflow-x:hidden;}
* {font-family:"Wix Madefor Display","Noto Sans KR","돋움",dotum,sans-serif;box-sizing:border-box;}

/*header*/
/* .head h1 .logo a{width:197px;height:36px;} */
.head h1 .logo a img{/* opacity:1; */}

header.on .head .nav>ul>li>a:hover{
text-decoration:underline;
text-underline-offset:3px;
}
.head h1 .logo{position: absolute; top: 50%; transform: translateY(-50%);}




.font-tit{
font-family: "Titillium Web", sans-serif;
  font-weight:400;
  font-style: normal;
}
.innerwrap{
max-width:1560px;width:94%;margin:0 auto;
}

section .titlearea .cate{
font-family: "Wix Madefor Display";font-size:20px;color:#111;font-weight: bold;
}
section .titlearea .desc{font-size:42px;color:#111;font-weight: bold;font-family: "Noto Sans KR";}
section .titlearea .desc span{font:inherit;color:#134582;}
section .more{
display: flex;align-items:center;color:#666666;font-size:14px;font-weight:500;
}
section .more.wht{color:rgba(255,255,255,0.7);font-weight: 400;}
section .more>i{
display: block;background: url(/images/main/more_btn.png)no-repeat center / contain;
width: 46px;height: 46px;margin-left: 12px;transition:transform 0.4s ease;
}
section .more.wht>i{
display: block;background: url(/images/main/more_btn_wht.png)no-repeat center / contain;}
section .more:hover>i{transform:rotate(-45deg);transition:transform 0.4s ease;}

/*sec1*/
.sec1{
	background: #134582;
}
.sec1 .slogarea{
background: var(--bg);
padding-top:17.5rem;
padding-bottom: 3.75rem;
width:100%;overflow:hidden;
}
.sec1 .slogarea .inner{
	padding-left:5.625rem;
	padding-right: 5.625rem;
}
.sec1 .slogarea .slogwrap{
	position: relative;
	display: flex;align-items:center;justify-content:flex-end;
	/* justify-content:space-between; */
}
.sec1 .slogarea .slogwrap .logo{
/* width:73.5%; */
width:0;
/* width:calc(66.623vw - 1px); */
}
/* .sec1 .slogarea .slogwrap .line{
	display: block;
    height: 150px;
    width: 1px;
    background: rgba(255,255,255,0.2);
} */
.sec1 .slogarea .slogwrap .titles{
	position: relative;/* width:calc(100% - 73.5%); */
	width:calc(100% - 64.323vw - 2.2vw);
	padding-left: 2.2vw;box-sizing:border-box;
}
.sec1 .slogarea .slogwrap .titles .line{
	display: block;
    position: absolute;
    height: 100%;
    width: 1px;
    background: rgba(255,255,255,0.2);
    top: 0;left:0;

}
.sec1 .slogarea .slogwrap .titles .title{
	font-size:2.6vw;font-style:italic;font-weight: 200;color:#fff;line-height: 1.23;
	white-space:nowrap;
}
.sec1 .mainBgarea{
background: var(--bg);position: relative;
width:100%;position: relative;
}
.sec1 .mainBgarea .door{
	width: 5.625rem;
    position: absolute;
    background: var(--bg);
    top: 0;
    height: 100%;
    z-index: 2;
}
.sec1 .mainBgarea .door.right{
	right:0;
	transform-origin:right;
}
.sec1 .mainBgarea .door.left{
	left:0;
	transform-origin:left;
}
.sec1 .mainBgarea .conarea{
display: flex;align-items:center;justify-content:center;
}
.sec1 .mainBgarea .imgarea{
position: relative;
width: 100%;
height: 0px;
overflow: hidden;
display: inline-block;
padding-bottom: 60%;
/* padding-bottom:66.67%; */
/* padding-bottom: 46.87%; */
/*모션전*/
z-index: 1;
}
.sec1 .mainBgarea .imgarea .main-desc{
position: absolute;z-index:10;
bottom: 20%;left:44vw;
transform:translateY(-50%);
width:100%;
padding-left:calc(5.625rem * 2) ;/* padding-bottom:7.5rem; */
}

.sec1 .mainBgarea .imgarea .main-desc>p{
	font-size:min(2.5vw, 45px);color:rgba(255,255,255,0.9);
font-family: 'NanumSquare';font-style:italic;font-weight: 600;
line-height: 1.4em;
transform:scale(1.1);
filter:blur(7px);
opacity:0;
}
.sec1 .mainBgarea .imgarea .main-desc strong{
font-family: "NanumSquareAceb";font-size:min(3vw, 49px);font-weight: 600;
line-height: 1.55em;
}
.sec1 .mainBgarea .imgarea .bg{
	position: absolute;
	top:50%;left:50%;
	transform:translate(-50%, -50%) scale(1.2);
	width:100%;height:100%;z-index:1;
	background: url(/images/main/sec1_img.jpg)no-repeat center / cover;
}
.sec1 .mainBgarea .imgarea .bg .video_wrap{
position: relative;width: 100%;height: 100%;
}
.sec1 .mainBgarea .imgarea .bg .video_wrap video{
position: absolute;width:100%;height:100%;top:50%;left:50%;
transform:translate(-50%, -50%);
object-fit:cover;
}

/*sec2*/
.sec2{
width:100%;max-width:100vw;height:100vh;
position: relative;overflow:hidden;
}
.sec2 .aniArea{
width:100%;height:100%;position: relative;
background: var(--bg);
display: flex;align-items:center;justify-content:center;
}
.sec2 .aniArea .svg_g{position: relative;}
.sec2 .aniArea .svg_g .svg{
position: absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);
}
.sec2 .aniArea .svg_g .svg:nth-child(1){
width:795px;height:795px;
}
.sec2 .aniArea .svg_g .svg:nth-child(1)>svg{
width:795px;height:795px;opacity:0.3;
animation:rotateSvg1 25s linear infinite;animation-delay:0.1s;
}
.sec2 .aniArea .svg_g .svg:nth-child(2){
width:1045px;height:1045px;
}
.sec2 .aniArea .svg_g .svg:nth-child(2)>svg{
width:1045px;height:1045px;opacity:0.3;
animation:rotateSvg2 30s linear infinite;
}
.sec2 .aniArea .absolute{
	position: absolute;
	top:50%;left:50%;
	transform:translate(-50%, -50%);
}
/*흰배경*/
.sec2 .whiteBg{
position: absolute;
top:0;left:0;
width:100%;height: 100%;
clip-path:circle(0 at 50%);
}
.sec2 .whiteBg .titlearea .heading{
position: absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);
}
.sec2 .whiteBg .titlearea h2{
text-align: center;
font-size:clamp(100px, 6.25vw, 120px);
font-family: "Wix Madefor Display";color:#134582;font-weight: bold;
line-height: 1.3em;
}
.sec2 .whiteBg .titlearea .heading1{display: flex;align-items:center;}
.sec2 .whiteBg .titlearea .heading1 .plus{}
/* .sec2 .whiteBg .titlearea .heading1 .txtLeft{transform:translateX(-300px);}
.sec2 .whiteBg .titlearea .heading1 .txtRight{transform:translateX(300px);} */
.sec2 .whiteBg .titlearea .heading2{opacity:0;}
/*파란배경*/
.sec2 .blueBg .txtarea h2{
text-align: center;
font-size:clamp(40px, 2.6vw, 50px);
font-family: "Noto Sans KR";color:#fff;font-weight: bold;
line-height: 1.5em;
}
/*모션 초기상태*/
.sec2 .blueBg .svg_g{transform:scale(0.5);}
.sec2 .blueBg .txtarea h2 span.char{opacity:0;}

@keyframes rotateSvg1{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}
@keyframes rotateSvg2{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(-360deg);}
}

/*sec3*/
.sec3{
position: relative;
width:100%;background: url(/images/main/sec3_bg.jpg)no-repeat left bottom  / cover;
}

.sec3:after{
background: rgba(255,255,255,0.3);
	backdrop-filter: blur(10px);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity .3s;
    width: 100%;
}
.sec3 .conarea{
display: flex;justify-content:space-between;position: relative;
padding:180px 0 140px;
}
.sec3 .ln{
position: absolute;
top:0;left:0%;
width:1px;height:100%;
background: #d8d8d8;
}
.sec3 .ln2{left:25%;}
.sec3 .ln3{left:100%;}
.sec3 .titlearea{width:25%;position: relative;z-index:40;}
.sec3 .titlearea .desc{margin-bottom: 60px;margin-top: 20px;}
.sec3 .listarea{width:75%;}
.sec3 .listarea ul{
display: flex;flex-wrap:wrap;justify-content:space-between;
gap:50px 1.3vw;
}
.sec3 .listarea ul>li{
width:calc((100% - 1.3vw * 2) / 3);
position: relative;z-index:10;
/* pointer-events:none !important;
cursor:none !important; */
}

.sec3 .listarea ul>li.on{
z-index:1;
}

/* .sec3.on:after{
opacity:1;z-index:1;transition: opacity .3s;transition-delay:0.1s;
} */
.sec3 .listarea ul>li>a{display: block;width:100%;height: 100%;}
.sec3 .listarea ul>li .bg{position: relative;width: 100%;border-radius:20px;overflow:hidden;aspect-ratio:372 / 290;}
.sec3 .listarea ul>li .bg video{
	position: absolute;width:100%;height:100%;top:50%;left:50%;
transform:translate(-50%, -50%);
object-fit:cover;
}
.sec3 .listarea ul>li .bg img{
transform:scale(1);transition:all 0.6s ease;
width:100%;height: 100%;object-fit:cover;
}
.sec3 .listarea ul>li .info{
margin-top: 30px;transition:all 0.4s;
}
.sec3 .listarea ul>li .info>dt{font-family: "Noto Sans KR";font-size:30px;color:#000;font-weight: bold;}
.sec3 .listarea ul>li .info>dd{font-size:18px;color:#666666;font-weight: 400;margin-top: 12px;}
.sec3 .listarea ul>li:hover .bg img{
transform:scale(1.15);
transform-origin:center;
transition:all 0.6s ease;
}
.sec3 .listarea ul>li:hover .info{
transform:scale(1.15);
transform-origin:left center;

}

/*sec4*/
.sec4{width:100%;padding:210px 0;}
.sec4 .titlearea{display: flex;align-items:end;justify-content:space-between;}
.sec4 .titlearea .desc{margin-top: 35px;}
.sec4 .list4{
display: flex;flex-wrap:wrap;
gap:50px 1.56vw;margin-top: 70px;
}
.sec4 .list4>li{
width:calc((100% - 1.56vw * 2 ) / 3);
 aspect-ratio: 1 / 1;
 max-width:500px;
 position: relative;
 padding:2.3vw 1.8vw; 
 overflow:hidden;
 border-radius:20px;
}
.sec4 .list4>li>a{display: flex;align-items:end;width:100%;height: 100%;}
.sec4 .list4>li .bg{width: 100%;border-radius:20px;overflow:hidden;
position: absolute;top:0;left:0;
height:100%;z-index:-1;
transition:transform 0.6s ease;
}
.sec4 .list4>li .bg video{
	position: absolute;width:100%;height:100%;top:50%;left:50%;
transform:translate(-50%, -50%);
object-fit:cover;
}

.sec4 .list4>li .txtwrap h5{font-family: "Noto Sans KR";font-size:30px;color:#fff;font-weight: bold;}
.sec4 .list4>li .txtwrap p{
font-size:18px;color:#fff;font-weight: 400;margin-top: 20px;
}
.sec4 .list4>li:hover .bg{
transform:scale(1.15);
transition:transform 0.6s ease;
}
.sec4 .list4>li .txtwrap{transition:all 0.4s;}
.sec4 .list4>li:hover .txtwrap{
transform:translateY(-30px);
}


/*sec5*/
.sec5{
position: relative;
width:100%;
min-height:880px;
height:calc(100vh - 110px);
overflow:hidden;
}
.sec5 .bg{
position: absolute;top:-2%;left:0;
height:104%;z-index:-1;width:100%;
background: url(/images/main/sec5_bg.jpg)no-repeat center / cover;
}
.sec5 .bg video{
	position: absolute;width:100%;height:100%;top:50%;left:50%;
	transform:translate(-50%, -50%);
	object-fit:cover;
}

.sec5 .conarea{
display: flex;justify-content:space-between;height: 100%;align-items:start;
}
.sec5 .titlearea{width:40%;position: relative;z-index:10;padding-top: 100px;}
.sec5 .titlearea .cate, .sec5 .titlearea .cate + .desc{color:#fff;}
.sec5 .titlearea .cate{font-weight: 500;}
.sec5 .titlearea .desc{font-weight: 600;margin:38px 0;font-family: "Wix Madefor Display";}
.sec5 .titlearea .txt{
font-family: "Noto Sans KR";font-weight: 500;color:#fff;font-size:20px;margin-bottom: 30px;
}
.sec5 .circlearea{
position: absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);
width:1100px;
aspect-ratio: 1 / 1;
display: flex;align-items:center;justify-content:center;
}
.sec5 .circlearea:before{
	position: absolute;content:'';
	background: url(/images/page/sec5_circle_border.png)no-repeat center / cover;
	width: 100%;height: 100%;
	box-sizing:border-box;border-radius:50%;
	/* animation:rotateCircle 5s linear infinite; */
}
.sec5 .circlearea .inner_c{
width:560px;aspect-ratio: 1 / 1;box-sizing:border-box;border-radius:50%;

display: flex;align-items:center;justify-content:center;
position: relative;
}
.sec5 .circlearea .inner_c:before{
position: absolute;content:'';
box-sizing:border-box;border-radius:50%;
width: 100%;height: 100%;
/* animation:rotateCircle 3s linear infinite;animation-direction:alternate; */
border:1px solid #ffffff;
}
.sec5 .circlearea .inner_c .center-slog{
font-size:24px;color:#fff;text-align: center;font-weight: bold;font-family: "Wix Madefor Display";
overflow:hidden;position: relative;
}
.sec5 .circlearea .inner_c .center-slog>span{
display: block;
/* animation: textYAni 1s linear infinite;animation-direction:alternate; */
}
@keyframes textYAni{
0%{transform:translateY(100%);opacity:0;}
100%{transform:translateY(0%);opacity:1;}
}

.sec5 .circlearea .inner_c .list5>li{
background: rgba(19,69,130,0.65);
width:250px;aspect-ratio: 1 / 1;
border-radius:50%;
padding:1.2vw 2vw;
display: flex;flex-direction:column;align-items:center;justify-content:center;
position: absolute;
transform:translate(-50%, -50%);
transition:all 0.4s ease;
}
.sec5 .circlearea .inner_c .list5>li:hover{
transform:translate(-50%, -50%) scale(1.1);
background: rgba(19,69,130,1);
backdrop-filter:blur(10px);
transition:all 0.4s ease;
}
.sec5 .circlearea .inner_c .list5>li:nth-child(1){
top:0;left:50%;

}
.sec5 .circlearea .inner_c .list5>li:nth-child(2){
top:100%;left:50%;
}
.sec5 .circlearea .inner_c .list5>li:nth-child(3){
top:50%;left:0%;
}
.sec5 .circlearea .inner_c .list5>li:nth-child(4){
top:50%;left:100%;
}
.sec5 .circlearea .inner_c .list5>li .tit{font-size:28px;text-align: center;color:#fff;font-weight: 500;font-family: "Noto Sans KR";}
.sec5 .circlearea .inner_c .list5>li .txt{
font-size:17px;color:rgba(255,255,255,0.8);font-weight: 400;font-family: "Noto Sans KR";
line-height: 1.5em;;margin-top: 12px;text-align: center;letter-spacing:-0.02em;
}

@keyframes rotateCircle{
0%{transform:scale(1.2) rotate(0);}
50%{transform:scale(0.9) rotate(180deg);}
100%{transform:scale(1.2) rotate(360deg);}
}

/*sec6 news*/
.sec6{padding-top: 200px;background: #f1f1f1;padding-bottom: 100px;}
.sec6 .titlearea{display: flex;align-items:center;justify-content:space-between;}
.sec6 .titlearea .desc{margin-top: 35px;}
.sec6 .conarea{margin-top: 60px;}
.sec6 .press{overflow:hidden;padding-top: 5px;padding-bottom: 65px;position: relative;}

.sec6 .press .item{
	/* width:calc((100% - 36px * 3) / 4) !important; */
	width:372px !important;
	/* aspect-ratio: 1/ 1; */
	position: relative;transition:transform 0.4s ease;
	padding-top: 5px;
	border-radius:20px;
	border:1px solid #cdcdcd;
	box-sizing:border-box;
	padding:60px 1.56vw 50px;
}
@media screen and (min-width:1920px){
	.sec6 .press .item{width:calc((100% - 36px * 3) / 4) !important; }
}

.sec6 .press .item:hover{
transform:translateY(-5px);transition:transform 0.4s ease;
}

.sec6 .press .item .thumb{
	width:100%;overflow:hidden;height:220px;margin-bottom: 45px;border-radius:20px;
}
.sec6 .press .item .thumb>img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}
.sec6 .press .item:hover .thumb>img{transform:scale(1.1);transition:transform 0.4s ease;}

.sec6 .press .item .tit{}
.sec6 .press .item .tit{
display: -webkit-box;
    -webkit-line-clamp: 2; /* 두 줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	word-break:keep-all;word-wrap:normal;
	font:inherit;font-size:30px;color:#000;font-weight: 600;line-height: 1.4em;
	font-family: "Noto Sans KR";letter-spacing:-0.02em;
	

}
.sec6 .press .item .tit>a:hover{
text-decoration: underline;
text-underline-offset:6px;
text-decoration-thickness: 2px;
}
.sec6 .press .item .txt{
display: -webkit-box;
    -webkit-line-clamp: 2; /* 두 줄까지만 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	font-size:18px;color:#666;font-weight:400;line-height: 1.65em;letter-spacing:-0.02em;font-family: "Noto Sans KR";
	margin-top: 30px;
}
.sec6 .press .item .info{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-top: 30px;
}
.sec6 .press .item .info .comp{
	position: relative;
	padding-right: 31px;
	font-size: 18px;
	font-weight: 700;
	color: #134582;
}
.sec6 .press .item .info .comp:after{
	content: "";
	position: absolute;
	right: 16px;
	top: 8px;
	width: 1px;
	height: 13px;
	background: #ccc;
}
.sec6 .press .item .date{font-size:17px;color:#000;font-weight: 550;font-family: "Wix Madefor Display";letter-spacing:-0.025em;}
.sec6 .press .ctr{
display: flex;align-items:center;justify-content:space-between;
position: absolute;
left:0;bottom:0;
width:100%;
}
.sec6 .press .ctr .btns{width:100px;display: flex;align-items:center;justify-content:center;gap:1.7vw;
}
.sec6 .press .ctr .btns>.btn{
display: block;width:12px;height:22px;
background: url(/images/main/sec6_prev.png)no-repeat center / contain;
cursor:pointer;
}
.sec6 .press .ctr .btns>.btn.next{background: url(/images/main/sec6_next.png)no-repeat center / contain;}
.sec6 .press .progress-bar{    
	display: block !important;
    width: calc(100% - 100px);
    height:4px;
    background: #d9d9d9; 
	border-radius:0;
}
.sec6 .press .progress-bar .swiper-scrollbar-drag{
	height:4px;cursor:pointer;
	background:#000000;
	border-radius:0;
}

/*sec7*/
.sec7{background: #f1f1f1;padding-top: 100px;}
.sec7>.titlearea .desc{margin-top:35px;}
.sec7 .boxwrap{
display: flex;justify-content:space-between;margin-top: 70px;
}
.sec7 .boxwrap>.box{
z-index:50;
width:50%;height:700px;position: relative;
padding-left:9.3vw;
padding-top:7.8vw;overflow:hidden;
}
.sec7 .boxwrap>.box .bg{width: 100%;overflow:hidden;
position: absolute;top:0;left:0;
height:100%;z-index:-1;
/* background: url(/images/main/sec7_img1.jpg)no-repeat center / cover; */
}
.sec7 .boxwrap>.box:nth-child(2) .bg{/* background: url(/images/main/sec7_img2.jpg)no-repeat center / cover; */}
.sec7 .boxwrap>.box .bg video{
	position: absolute;width:100%;height:100%;top:50%;left:50%;
transform:translate(-50%, -50%);
object-fit:cover;
}
.sec7 .boxwrap>.box .titlearea .cate, .sec7 .boxwrap>.box .titlearea .desc{color:#fff;}
.sec7 .boxwrap>.box .titlearea .cate{font-size:20px;font-weight: 500;}
.sec7 .boxwrap>.box .titlearea .desc{font-size:36px;margin-top: 30px;font-weight: 600;margin-bottom: 40px;}

@media screen and (max-width: 1600px){
.sec7 .boxwrap>.box{padding-left: 4vw;}
}



.sec8{
	padding: 100px 0;
	background: #f1f1f1;
}
.sec8 .conwrap{
	display: flex;
	justify-content: space-between;
	height: 640px;
}
.sec8 .conwrap .imgwrap{
	width:54%;
	height: 100%;
	border-radius: 36px;
	overflow: hidden;
}
.sec8 .conwrap .imgwrap video{
	width:  100%;
	height: 100%;
	object-fit: cover;
}
.sec8 .conwrap .txtwrap{
	width: 44%;
	height: 100%;
	border-radius: 36px;
	background: url(/images/main/sec8_txtwrap_bg.jpg) no-repeat center / cover;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.sec8 .conwrap .txtwrap > div{
	width: 100%;
}
.sec8 .conwrap .txtwrap .slg{
	font-size: 36px;
	font-weight: 600;
	line-height: 1.3em;
	color: #fff;
	padding: 0 50px;
	margin-bottom: 50px;
}
.sec8 .conwrap .txtwrap .rolling-wrap{
	position: relative;
	display: flex;
	overflow: hidden;
	height: 60px;
}
.sec8 .conwrap .txtwrap .rolling-wrap{
	gap: 10px;
}
.sec8 .conwrap .txtwrap .rolling-wrap + .rolling-wrap{
	margin-top: 10px;
}
.sec8 .conwrap .txtwrap .rolling-wrap .rolling-list{
	position: absolute;
	left: 0;
	top: 0;
}
.sec8 .conwrap .txtwrap .rolling-wrap .rolling-list ul {
	padding : 0px;
	display: flex;
	  width: max-content;
}
.sec8 .conwrap .txtwrap .rolling-wrap .rolling-list ul li { 
	box-sizing: border-box; 
	display: flex; 
	align-items: center; 
	flex-shrink: 0; 
	padding: 0 5px;
}

.rolling-list.original {
	animation: rollingleft1 40s linear infinite;
}
.rolling-list.clone {
	animation: rollingleft2 40s linear infinite;
}
@keyframes rollingleft1 {
	0% { transform: translateX(0); }
	50% { transform: translateX(-100%); }
	50.01% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}
@keyframes rollingleft2 {
	0% { transition: translateX(0); }
	100% { transform: translateX(-200%); }
}


.rolling-wrap.right .rolling-list.original {
  animation: rollingRight1 40s linear infinite;
}
.rolling-wrap.right .rolling-list.clone {
  animation: rollingRight2 40s linear infinite;
}

@keyframes rollingRight1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(100%); }
  50.01% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes rollingRight2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(200%); }
}






/*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: cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.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%);}
}


section .titlearea .cate,
section .titlearea .desc,
section .more{opacity:0;}
section .titlearea.in-view .cate,
section .titlearea.in-view .desc,
section .more.in-view{
animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/*sec3*/
.sec3 .ln{height:0;}
.sec3.in-view .ln{animation:lineAni 2.5s infinite ease-in-out;}
.sec3.in-view .ln1{animation-delay:1s;}
.sec3.in-view .ln2{animation-delay:1.5s;}
.sec3.in-view .ln3{animation-delay:2s;}
@keyframes lineAni{
0%{height:0;}
100%{height:100%;}
}
.sec3 .listarea .list3>li{opacity:0;}
.sec3 .listarea .list3.in-view>li{
animation-name: fadeUp;animation-duration: 0.6s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.2s;
}
.sec3 .listarea .list3.in-view>li:nth-child(2){animation-delay:0.3s;}
.sec3 .listarea .list3.in-view>li:nth-child(3){animation-delay:0.4s;}
.sec3 .listarea .list3.in-view>li:nth-child(4){animation-delay:0.5s;}
.sec3 .listarea .list3.in-view>li:nth-child(5){animation-delay:0.6s;}
.sec3 .listarea .list3.in-view>li:nth-child(6){animation-delay:0.7s;}

/*sec4*/
.sec4 .list4>li{opacity:0;}
.sec4 .list4.in-view>li{
animation-name: fadeUp;animation-duration: 0.8s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
animation-delay:0.2s;
}
.sec4 .list4.in-view>li:nth-child(2){animation-delay:0.3s;}
.sec4 .list4.in-view>li:nth-child(3){animation-delay:0.4s;}

/*sec5*/
.sec5 .titlearea .txt{opacity:0;}
.sec5 .titlearea.in-view .txt{
animation-name: fadeUp;animation-duration: 0.9s;animation-fill-mode:forwards;animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sec5 .circlearea{opacity:0;transform:translate(-50%, -50%) scale(0.3);}
.sec5.in-view .circlearea{
opacity:1;transform:translate(-50%, -50%) scale(1);transition:all 1.5s;
}
.sec5 .circlearea .inner_c .center-slog{opacity:0;transform:translateY(80px);}
.sec5.in-view .circlearea .inner_c .center-slog{
opacity:1;transform:translateY(0px);transition:all 1s 0.2s;
}
.sec5 .circlearea .inner_c .list5>li{opacity:0;transform:translate(-50%, -50%) rotateY(180deg);}
.sec5.in-view .circlearea .inner_c .list5>li{
opacity:1;transform:translate(-50%, -50%) rotateY(0deg);transition:all 0.8s;
}
/* .sec5.in-view .circlearea .inner_c .list5>li:nth-child(2){transition-delay:0.3s;}
.sec5.in-view .circlearea .inner_c .list5>li:nth-child(3){transition-delay:0.4s;}
.sec5.in-view .circlearea .inner_c .list5>li:nth-child(4){transition-delay:0.5s;} */
/* .sec5 .list5>li{position: relative;}

.sec5 .list5>li{left:50%;opacity:0;}
.sec5 .list5>li.in-view{left:0%;opacity:1;transition:all 1s ease-in-out;transition-delay:0.2s;}
.sec5 .list5>li:nth-child(3){left:-50%;opacity:0;}
.sec5 .list5>li.in-view:nth-child(3){left:-100%;opacity:1;transition:all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);;transition-delay:0.4s;}
.sec5 .list5>li:nth-child(1).in-view{transition-delay:0.3s;}
.sec5 .list5>li:nth-child(2).in-view{transition-delay:0.3s;}
.sec5 .list5>li:nth-child(4).in-view{transition-delay:0.45s;} */

/*sec6*/
.sec6 .conarea{opacity:0;}
.sec6 .conarea.in-view{
animation-name: fadeUp;animation-duration: 1s;animation-fill-mode:forwards;animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-delay:0.2s;
}

/*sec7*/
.sec7 .boxwrap>.box .bg{
transform:scale(1.2);filter:grayscale(100);
}
.sec7 .boxwrap>.box.in-view .bg{
transform:scale(1);filter:grayscale(0);
transition:all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);;
transition-delay:0.1s;
}
.sec7 .boxwrap>.box:hover .bg{
transform:scale(1.2);
transition:all 0.6s ease;

}
.sec7 .boxwrap>.box .titlearea{transition:all 0.4s ease;}
.sec7 .boxwrap>.box:hover .titlearea{
transform:translateX(30px);

}