@charset "utf-8";
.pcbr{display:none;}
.tbbr{display:none;}
.mbbr{display:block;}
.dn{display:none;}




/* visual */
#visual{
	overflow:hidden;
	width:100%;
	position:relative;
}
#visual .conwrap{width:100%;}
.visualSection{
	position:relative;
	width:100%;height:100vh;
	background:#000;
}
.visualSection:nth-child(1) ~ .visualSection{}
.visualSection .bg{
	position:absolute;left:50%;top:50%;
	width:100%;height:100%;
	transform:translate(-50%,-50%);
}
.visualSection .bg.bgP{display:none;}
.visualSection .bg.bgM{display:block;}
.visualSection .bg:after{
	display:block;content:"";
	width:100%;height:100%;
	background:rgba(0,0,0,0.6);
	position:absolute;left:0;top:0;
}
.visualSection:nth-child(1) .bg{display:block;width:auto;height:100%;aspect-ratio:9/16;}
.visualSection:nth-child(1) .bg>div{width:100%;height:100%;}
.visualSection:nth-child(1) .bg>div.bgP{display:none;}
.visualSection:nth-child(1) .bg>div.bgM{display:block;}
.visualSection .bg iframe{
	position:relative;z-index:10;
	width:100%;height:100%;
	object-fit:cover;
}
.visualSection .bg .screen{
	position:absolute;left:0;top:0;z-index:11;
	width:100%;height:100%;
}
.visualSection .txtwrap{
	position:absolute;left:0;top:50%;
	box-sizing:border-box;
	width:100%;
	padding:0 3%;
	transform:translateY(-50%);
}
.visualSection .txtwrap .slg{
	opacity:0;
	transform:translateY(60px);
	font-family:"Manrope";font-size:44px;color:#fff;font-weight:700;
}
.visualSection .txtwrap .txt{
	opacity:0;
	transform:translateY(60px);
	margin-top:20px;font-size:17px;color:#fff;
}

.visualSection.act .txtwrap .slg{opacity:1;transform:translateY(0);transition:all 1.4s 0.2s;}
.visualSection.act .txtwrap .txt{opacity:1;transform:translateY(0);transition:all 1.4s 0.4s;}



.visualSection .txtwrap2{
	position:absolute;left:0;top:0;z-index:10;
	display:flex;flex-wrap:wrap;align-content:space-between;
	box-sizing:border-box;
	width:100%;height:100%;
	padding:10vh 3% 26vh;
}
.visualSection .txtwrap2 .title{width:100%;height:24vh;font-size:8vw;font-weight:600;color:#fff;text-align:right;line-height:1.2em;}
.visualSection .txtwrap2 .benefit{width:100%;margin:5vh 0;text-align:right;}
.visualSection .txtwrap2 dl{display:inline-flex;}
.visualSection .txtwrap2 dl dt{
	display:flex;align-items:center;justify-content:center;
	width:60px;height:60px;
	border-radius:50%;background:#ff3c42;
	font-size:17px;color:#fff;font-weight:500;text-align:center;
}
.visualSection .txtwrap2 dl dd{margin-left:25px;}
.visualSection .txtwrap2 dl dd ul{display:flex;}
.visualSection .txtwrap2 dl dd ul li{margin-left:13px;width:60px;text-align:center;}
.visualSection .txtwrap2 dl dd ul li:first-child{margin:0;}
.visualSection .txtwrap2 dl dd ul li .icon{
	width:60px;height:60px;
	background:#fff;
	border-radius:10px;
}
.visualSection .txtwrap2 dl dd ul li .tit{
	display:flex;align-items:center;justify-content:center;
	margin-top:10px;
	width:100%;height:42px;
	font-size:11px;color:#fff;
}
.visualSection.v3 .txtwrap2 dl dd ul li .tit{height:60px;align-items:flex-start;}
.visualSection.v4 .txtwrap2 dl dd ul li .tit{height:60px;align-items:flex-start;}
.visualSection .txtwrap2 .btmArea{
	position:absolute;left:3%;bottom:60px;z-index:10;
	box-sizing:border-box;
	width:94%;
	padding:3vh 0;
	border-top:2px solid rgba(255,255,255,0.4);
}
.visualSection .txtwrap2 .btmArea .slg{font-size:18px;color:#fff;line-height:1.5em;}
.visualSection .txtwrap2 .btmArea a{
	display:flex;align-items:center;justify-content:center;
	height:55px;
	padding:0 29px;margin-top:20px;
	background:#000;
	border-radius:30px;
	font-size:14px;color:#fff;font-weight:500;
}
.visualSection .txtwrap2 .btmArea a i{
	display:inline-block;
	width:10px;height:10px;
	margin-left:11px;
	background:url(/images/common/btnMore_arr.png) no-repeat;
}






#wrap{overflow:hidden;}



/* sec1 */
.sec1{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
	background:#0b0b0b;
}
.sec1 .bg{}
.sec1 .bg .line1{
	width:100%;height:20%;
	border-bottom:1px solid #858585;
	position:absolute;left:0;top:0;
	transform-origin:left;
	transform:scaleX(0);opacity:0.5;
}
.sec1 .bg .line2{
	width:100%;height:20%;
	border-bottom:1px solid #858585;
	position:absolute;left:0;top:20%;
	transform-origin:left;
	transform:scaleX(0);opacity:0.5;
}
.sec1 .bg .line3{
	width:100%;height:20%;
	border-bottom:1px solid #858585;
	position:absolute;left:0;top:40%;
	transform-origin:left;
	transform:scaleX(0);opacity:0.5;
}
.sec1 .bg .line4{
	width:100%;height:20%;
	border-bottom:1px solid #858585;
	position:absolute;left:0;top:60%;opacity:0.5;
	transform-origin:left;
	transform:scaleX(0);
}
.sec1 .bg .circle1{
	height:60%;aspect-ratio:1/1;
	border-radius:50%;
	position:absolute;left:-60%;top:20%;opacity:0.5;
}
.sec1 .bg .circle1 svg{
	width:100%;height:100%;
	transform:rotate(-90deg);
}
.sec1 .bg .circle1 .inner{
	height:37%;aspect-ratio:1/1;border-radius:50%;
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
}
.sec1 .bg .circle1>svg circle{
	stroke-dasharray:1000;
	stroke-dashoffset:1000;
}
.sec1 .bg .circle1 .inner svg circle{
	stroke-dasharray:350;
	stroke-dashoffset:350;
}

 @keyframes dash {
   0% { stroke-dashoffset:1000; }
   100% { stroke-dashoffset: 0; }
 }
  @keyframes dash2{
   0% { stroke-dashoffset:350; }
   100% { stroke-dashoffset: 0; }
 }

 .sec1 .bg .circle2{
	height:110%;aspect-ratio:1/1;
	border-radius:50%;
	position:absolute;right:-145%;top:-70%;opacity:0.5;
}
.sec1 .bg .circle2 svg{
	width:100%;height:100%;
	transform:rotate(-90deg);
}
.sec1 .bg .circle2 .inner{
	height:75%;aspect-ratio:1/1;border-radius:50%;
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
}
.sec1 .bg .circle2>svg circle{
	stroke-dasharray:2800;
	stroke-dashoffset:-2800;
}
.sec1 .bg .circle2 .inner svg circle{
	stroke-dasharray:2100;
	stroke-dashoffset:-2100;
}

 @keyframes dash3 {
   0% { stroke-dashoffset:-2800; }
   100% { stroke-dashoffset: 0; }
 }
  @keyframes dash4{
   0% { stroke-dashoffset:-2100; }
   100% { stroke-dashoffset: 0; }
 }




.sec1 .bg .line1.in-view{transform:scaleX(1);transition:all 2s;}
.sec1 .bg .line2.in-view{transform:scaleX(1);transition:all 2s 0.1s;}
.sec1 .bg .line3.in-view{transform:scaleX(1);transition:all 2s 0.2s;}
.sec1 .bg .line4.in-view{transform:scaleX(1);transition:all 2s 0.3s;}
.sec1 .bg .circle1.in-view>svg>circle{animation:2s dash;animation-fill-mode:forwards;}
.sec1 .bg .circle1.in-view>.inner svg circle{animation:2s dash2;animation-fill-mode:forwards;}
.sec1 .bg .circle2.in-view>svg>circle{animation:4s dash3 0.4s;animation-fill-mode:forwards;}
.sec1 .bg .circle2.in-view>.inner svg circle{animation:4s dash4 0.4s;animation-fill-mode:forwards;}

.sec1 .conwrap{
	position:relative;z-index:10;
	display:flex;align-items:center;justify-content:center;box-sizing:border-box;
	width:100%;height:100%;
	padding:0 3%;
	text-align:center;
}
.sec1 .conwrap .en{font-family:"Manrope";font-size:4vh;color:#fff;font-weight:700;line-height:1.15em;}
.sec1 .conwrap .en>div{overflow:hidden;perspective:800px;}
.sec1 .conwrap .en>div>span{display:inline-block;transform:translateY(100%) skew(-15deg);}
.sec1 .conwrap .en>div.in-view>span{transform:translateY(0) skew(0);}
.sec1 .conwrap .en>div.t1.in-view>span{transition:all 1.4s;}
.sec1 .conwrap .en>div.t2.in-view>span{transition:all 1.4s 0.1s;}
.sec1 .conwrap .en>div.t3.in-view>span{transition:all 1.4s 0.2s;}
.sec1 .conwrap .kr{margin:40px 0 25px;font-size:20px;color:#fff;font-weight:600;}
.sec1 .conwrap p{font-size:14px;color:rgba(255,255,255,0.64);line-height:1.7em;}




.sec2{
	overflow:hidden;
	position:relative;
	display:flex;align-items:flex-start;
	width:100%;height:100vh;
	box-sizing:border-box;
	padding:35vh 3% 0;
}
.sec2 .titlearea{position:absolute;left:3%;top:7.5em;}
.sec2 .titlearea h3{font-family:"Manrope";font-size:1.4em;color:#ff3c42;font-weight:600;}
.sec2 .titlearea h4{margin-top:20px;font-size:2.5em;color:#000;font-weight:700;}
.sec2 .merit{
	box-sizing:border-box;
	position:absolute;left:50%;bottom:0;
	transform:translateX(-50%);
	width:132em;height:60vh;
}
.sec2 .merit .circleLine{
	position:absolute;left:0;top:0;
	box-sizing:border-box;
	width:100%;aspect-ratio:1/1;
	border:1px solid #ccc;
	border-radius:50%;
}
.sec2 .merit .circle{
	position:absolute;z-index:10;
	width:100%;aspect-ratio:1/1;
}
.sec2 .merit .circle ul{display:none;}
.sec2 .merit .meritSwiper{display:block;width:100vw;margin-top:-40px;padding:20px 10px;}
.sec2 .merit .meritSwiper{}
.sec2 .merit .meritSwiper .swiper-slide{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
	padding:0 5%;
}

.sec2 .merit .meritSwiper .swiper-slide .num{
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;
	margin:0 auto 0;
	background:#e7e7e7;
	border-radius:50%;
	font-family:"Manrope";font-size:20px;font-weight:700;text-align:center;	
	transition:all 0.4s;
}
.sec2 .merit .meritSwiper .swiper-slide .dot{display:inline-block;margin-top:13px;padding:0 6px;background:#fff;}
.sec2 .merit .meritSwiper .swiper-slide .dot>div{
	width:11px;height:11px;
	margin:0 auto;
	background:#434343;
	border-radius:50%;
	transition:all 0.4s;
}
.sec2 .merit .meritSwiper .swiper-slide .line{
	display:block;
	width:1px;height:3.5vh;
	margin:12px auto 15px;
	background:#ccc;
	opacity:0;transition:all 1.0s;
}
.sec2 .merit .meritSwiper .swiper-slide .tit{font-size:2.2em;color:#000;font-weight:700;opacity:0;transition:all 1.0s;text-align:center;}
.sec2 .merit .meritSwiper .swiper-slide .txt{
	margin-top:10px;
	height:48px;
	font-size:16px;color:#000;line-height:1.5em;opacity:0;transition:all 1.0s;text-align:center;
}
.sec2 .merit .meritSwiper .swiper-slide .img{
	overflow:hidden;
	display:inline-block;
	max-width:580px;width:100%;
	margin:20px 0 0;
	border-radius:10px;
	opacity:0;
	transition:all 1.0s;
}

.sec2 .merit .meritSwiper .swiper-slide-active .num{background:#ff3c42;color:#fff;}
.sec2 .merit .meritSwiper .swiper-slide-active .dot>div{background:#ff3c42;}
.sec2 .merit .meritSwiper .swiper-slide-active .line{opacity:1;}
.sec2 .merit .meritSwiper .swiper-slide-active .tit{opacity:1;}
.sec2 .merit .meritSwiper .swiper-slide-active .txt{opacity:1;}
.sec2 .merit .meritSwiper .swiper-slide-active .img{opacity:1;}





.sec3{
	overflow:hidden;
	position:relative;
	width:100%;
	padding:100px 3% 0;
	background:#f9f9f9;
}
.titlearea{}
.titlearea h3{font-family:"Manrope";font-size:1.4em;color:#ff3c42;font-weight:600;}
.titlearea h4{margin-top:20px;font-size:2.5em;color:#000;font-weight:700;}

.sec3 .bg{
	width:47vh;height:40vh;
	background:url(/images/main/sec3_bg.png) no-repeat;
	background-size:contain;
	position:absolute;right:-3%;bottom:0;
	opacity:0.5;
}
.sec3 .conwrap{position:relative;z-index:10;margin:40px 0 0;}
.sec3 .conwrap .magazine{
	overflow:hidden;
	position:relative;
	width:100%;
	margin:0 auto;
}
.sec3 .conwrap .magazine .pht{
	position:relative;
	overflow:hidden;
	width:100%;height:48vh;	
	border-radius:15px;
}
.sec3 .conwrap .magazine .pht ul{}
.sec3 .conwrap .magazine .pht ul li{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	opacity:0;
	transition:all 1s;
}
.sec3 .conwrap .magazine .pht ul li.on{opacity:1;z-index:10;}
.sec3 .conwrap .magazine .pht ul li img{width:100%;height:100%;object-fit:cover;}
.sec3 .conwrap .magazine .info{
	position:relative;z-index:100;
	box-sizing:border-box;
	width:100%;height:64vh;
	padding:40px 0 0 0;	
}
.sec3 .conwrap .magazine .info ul{}
.sec3 .conwrap .magazine .info ul li{
	position:absolute;left:0%;top:40px;z-index:50;
	width:100%;height:100%;
	opacity:0;
	transition:all 1s;
}
.sec3 .conwrap .magazine .info ul li.on{opacity:1;z-index:100;}
.sec3 .conwrap .magazine .info .area{}
.sec3 .conwrap .magazine .info .area span{
	display:inline-flex;align-items:center;justify-content:center;
	height:39px;
	padding:0 13px;
	background:#ff3c42;border-radius:10px;
	font-size:16px;color:#fff;font-weight:500;text-align:center;
}
.sec3 .conwrap .magazine .info .name{margin:25px 0 35px;font-size:36px;color:#000;font-weight:700;}
.sec3 .conwrap .magazine .info .msg{font-size:16px;color:#222;line-height:1.6em;}
.sec3 .conwrap .magazine .info .msg strong{display:block;font-size:22px;font-weight:700;margin-bottom:10px;}
.sec3 .conwrap .magazine .info .btns{
	display:flex;flex-wrap:wrap;justify-content:space-between;
	width:100%;
	margin-top:40px;
}
.sec3 .conwrap .magazine .info .btns .link{display:flex;justify-content:space-between;width:100%;}
.sec3 .conwrap .magazine .info .btns .link a{font-size:12px;}
.sec3 .conwrap .magazine .info .btns .link a:nth-child(1){width:49%;}
.sec3 .conwrap .magazine .info .btns .link a:nth-child(2){width:49%;}
.sec3 .conwrap .magazine .info .btns .ctr{width:100%;margin-bottom:20px;}
.sec3 .conwrap .magazine .info .btns .ctr a{
	display:inline-block;
	border:1px solid #222;border-radius:50%;
}
.sec3 .conwrap .list{
	overflow:hidden;
	position:relative;z-index:50;
	width:100%;height:0;
	visibility:hidden;
}
.sec3 .conwrap .list .magazineList{}
.sec3 .conwrap .list .magazineList .swiper-slide{
	overflow:hidden;
	width:312px;
	border-radius:10px;
}




/* sec4 */
.sec4{
	overflow:hidden;
	position:relative;
	width:100%;
	padding:100px 3%;
	background:#fff;
}
.sec4 .conwrap{margin:80px 0 0;}
.sec4 .conwrap .program{}
.sec4 .conwrap .program .swiper-slide{position:relative;width:300px;}
.sec4 .conwrap .program .swiper-slide>img{}
.sec4 .conwrap .program .swiper-slide .numbering{
	position:absolute;left:25px;top:0;
	width:calc(100% - 50px);	
	border-bottom:1px solid rgba(255,255,255,0.3);
}
.sec4 .conwrap .program .swiper-slide .numbering>div{
	display:flex;
	width:186px;
	padding:20px 0;
	border-right:1px solid rgba(255,255,255,0.3);
}
.sec4 .conwrap .program .swiper-slide .numbering>div .num{
	font-family:"Manrope";font-size:40px;color:#fff;font-weight:600;line-height:1em;
}
.sec4 .conwrap .program .swiper-slide .numbering>div .tit1{
	margin-top:10px;margin-left:10px;
	font-size:14px;color:#fff;line-height:1em;
}
.sec4 .conwrap .program .swiper-slide .txtInfo{
	position:absolute;left:0;bottom:0;
	padding:0 30px 30px;
}
.sec4 .conwrap .program .swiper-slide .txtInfo .tit2{font-size:24px;color:#fff;font-weight:600;}
.sec4 .conwrap .program .swiper-slide .txtInfo .txt{margin-top:25px;font-size:14px;color:#fff;line-height:1.7em;}
.sec4 .conwrap .icons{	
	display:none;
	box-sizing:border-box;
	width:95%;
	margin:55px 0 0;
}
.sec4 .conwrap .icons ul{display:flex;flex-wrap:wrap;justify-content:space-between;}
.sec4 .conwrap .icons ul li{text-align:center;cursor:pointer;}
.sec4 .conwrap .icons ul li .icon{
	box-sizing:border-box;
	overflow:hidden;
	width:98px;height:98px;
	border-radius:15px;
	transition:all 0.4s;
}
.sec4 .conwrap .icons ul li .icon1{background:#f9f9f9 url(/images/main/sec4_icon1.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon2{background:#f9f9f9 url(/images/main/sec4_icon2.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon3{background:#f9f9f9 url(/images/main/sec4_icon3.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon4{background:#f9f9f9 url(/images/main/sec4_icon4.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon5{background:#f9f9f9 url(/images/main/sec4_icon5.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon6{background:#f9f9f9 url(/images/main/sec4_icon6.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon7{background:#f9f9f9 url(/images/main/sec4_icon7.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon8{background:#f9f9f9 url(/images/main/sec4_icon8.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon9{background:#f9f9f9 url(/images/main/sec4_icon9.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon10{background:#f9f9f9 url(/images/main/sec4_icon10.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon11{background:#f9f9f9 url(/images/main/sec4_icon11.png) no-repeat center;}
.sec4 .conwrap .icons ul li .icon12{background:#f9f9f9 url(/images/main/sec4_icon12.png) no-repeat center;}

.sec4 .conwrap .icons ul li.on .icon1{background:#ff3c42 url(/images/main/sec4_icon1_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon2{background:#ff3c42 url(/images/main/sec4_icon2_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon3{background:#ff3c42 url(/images/main/sec4_icon3_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon4{background:#ff3c42 url(/images/main/sec4_icon4_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon5{background:#ff3c42 url(/images/main/sec4_icon5_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon6{background:#ff3c42 url(/images/main/sec4_icon6_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon7{background:#ff3c42 url(/images/main/sec4_icon7_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon8{background:#ff3c42 url(/images/main/sec4_icon8_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon9{background:#ff3c42 url(/images/main/sec4_icon9_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon10{background:#ff3c42 url(/images/main/sec4_icon10_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon11{background:#ff3c42 url(/images/main/sec4_icon11_hover.png) no-repeat center;}
.sec4 .conwrap .icons ul li.on .icon12{background:#ff3c42 url(/images/main/sec4_icon12_hover.png) no-repeat center;}

.sec4 .conwrap .icons ul li .tit{margin-top:15px;font-size:17px;color:#555;font-weight:500;transition:all 0.4s;}
.sec4 .conwrap .icons ul li.on .tit{color:#000;font-weight:700;}




/* sec5 */
.sec5{
	overflow:hidden;
	position:relative;
	width:100%;
	padding:100px 3% 0;
	background:#f9f9f9;
}
.sec5 .titlearea{position:relative;}
.sec5 .titlearea a{margin-top:20px;}
.sec5 .conwrap{
	width:100%;
	margin:80px 0 0;
}
.sec5 .conwrap .vodarea{	
	position:relative;
	width:100%;
	aspect-ratio:1253/751;
}
.sec5 .conwrap .vodarea ul{}
.sec5 .conwrap .vodarea ul li{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	opacity:0;
	transition:all 1s;
}
.sec5 .conwrap .vodarea ul li.on{opacity:1;}
.sec5 .conwrap .vodarea ul li .vod{
	overflow:hidden;border-radius:10px;	
}
.sec5 .conwrap .vodarea ul li .vod img{width:100%;}
.sec5 .conwrap .vodarea ul li .btnPlay{
	position:absolute;left:50%;top:50%;z-index:10;
	box-sizing:border-box;
	transform:translate(-50%,-50%);
	width:80px;height:80px;
	background:url(/images/main/btn_play.png) no-repeat center;
	background-size:cover;
	border:2px solid #fff;border-radius:50%;
	cursor:pointer;
}
.sec5 .conwrap .vodarea ul li .btnPlay::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    pointer-events: none;opacity:0;
    animation: wooferWave1 2.5s ease-out infinite;
}
.sec5 .conwrap .vodarea ul li .btnPlay::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;opacity:0;
    animation: wooferWave2 2.5s ease-out infinite 0.8s;
}
.sec5 .conwrap .vodarea ul li .btnPlay:hover::before {
    animation: wooferWaveHover1 1.8s ease-out infinite;
}
.sec5 .conwrap .vodarea ul li .btnPlay:hover::after {
    animation: wooferWaveHover2 1.8s ease-out infinite 0.6s;
}
@keyframes wooferWaveHover1 {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0.7;
    }
    100% {
        width: 140px;
        height: 140px;
        opacity: 0;
    }
}
@keyframes wooferWaveHover2 {
    0% {
        width: 120px;
        height: 120px;
        opacity: 0.9;
    }
    100% {
        width: 160px;
        height: 160px;
        opacity: 0;
    }
}

.sec5 .conwrap .infoarea{
	overflow:hidden;
	display:flex;flex-wrap:wrap;align-content:space-between;flex-direction:column-reverse;
	position:relative;
	box-sizing:border-box;
	width:100%;
}
.sec5 .conwrap .infoarea > ul{
	overflow:hidden;
	position:relative;
	width:100%;height:25vh;
}
.sec5 .conwrap .infoarea > ul li{
	position:absolute;left:0;top:0;
	width:100%;
	background:#f9f9f9;
	opacity:0;
	transition:all 1s;
}
.sec5 .conwrap .infoarea > ul li.on{opacity:1;}
.sec5 .conwrap .infoarea > ul li .title{
	padding:40px 0;
	font-size:20px;color:#000;font-weight:700;line-height:1.5em;
}
.sec5 .conwrap .infoarea > ul li .detail{}
.sec5 .conwrap .infoarea > .ctr{display:flex;width:100%;margin-top:20px;}
.sec5 .conwrap .infoarea > .ctr .mediaPrev{
	width:48px;height:48px;
	margin-right:10px;
	border:1px solid #111;border-radius:50%;
}
.sec5 .conwrap .infoarea > .ctr .mediaNext{
	width:48px;height:48px;
	border:1px solid #111;border-radius:50%;
}
.sec5 .conwrap .infoarea > .mediaListWrap{position:relative;width:50vw;visibility:hidden;height:0;}
.sec5 .conwrap .infoarea > .mediaListWrap .mediaList{margin-top:20px;}
.sec5 .conwrap .infoarea > .mediaListWrap .mediaList .swiper-slide{
	overflow:hidden;
	width:80px;
	border-radius:10px;
}
.sec5 .conwrap .infoarea > .mediaListWrap .mediaList .swiper-slide-active {
	
}




/* sec6 */
.sec6{box-sizing:border-box;padding:60px 3% 80px;}
.sec6 .textSlide{
	overflow:hidden;
	font-family:"Manrope";font-size:7vh;font-weight:700;color:#222;
	white-space:nowrap;
}
.sec6 .textSlide .txt{animation:textSlideRAni 1.4s ease-in-out;transform:translateX(30%);}
.sec6 .textSlide.act .txt{animation:textSlideAni 1.4s ease-in-out;animation-fill-mode:forwards;}

@keyframes textSlideAni{
	0%{transform:translateX(30%);}
	50%{transform:translateX(-60%);}
	100%{transform:translateX(-125%);}
}
@keyframes textSlideRAni{
	0%{transform:translateX(-30%);}
	50%{transform:translateX(60%);}
	100%{transform:translateX(125%);}
}

.sec6 .titlearea{position:relative;margin:80px 0 80px;}
.sec6 .titlearea a{margin-top:20px;}
.sec6 .nn{box-sizing:border-box;width:100%;}
.sec6 .nn .swiper-slide{width:300px;}
.sec6 .nn .swiper-slide .thumb{overflow:hidden;position:relative;border-radius:10px;height:34vh;}
.sec6 .nn .swiper-slide .thumb img{
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);
	width:100%;height:100%;object-fit:cover;
}
.sec6 .nn .swiper-slide .tit{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin:25px 0;
	font-size:20px;color:#000;font-weight:600;
}
.sec6 .nn .swiper-slide .txt{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom:20px;
	font-size:14px;color:#333;line-height:1.7em;
}
.sec6 .nn .swiper-slide .date{font-size:14px;color:#888;}
.sec6 .nn .ctr{display:flex;justify-content:space-between;align-items:center;margin:30px 0 0;}
.sec6 .nn .ctr .swiper-scrollbar{
	width:calc(100% - 120px);height:1px;
	background:#d0d0d0;
}
.sec6 .nn .ctr .paging{display:flex;align-items:center;width:100px;}
.sec6 .nn .ctr .nnPrev{
	width:38px;height:38px;margin-right:5px;
	border:1px solid #222;border-radius:50%;
}
.sec6 .nn .ctr .nnNext{
	width:38px;height:38px;
	border:1px solid #222;border-radius:50%;
}




#bgBlack{
	display:none;
	position:fixed;left:0;top:0;z-index:3000;
	width:100%;height:100%;
	background:rgba(0,0,0,0.7);
}
/* layerPop */
.layerPop{
	display:none;
	position:fixed;left:50%;top:50%;z-index:5000;
	width:94%;max-width:1200px;
	transform:translate(-50%,-50%);
}
.layerPop .btnClose{margin-bottom:10px;text-align:right;cursor:pointer;}


.layerPop.video .vod{width:100%;height:340px;}
.layerPop.video .vod iframe{width:100%;height:100%;}




/**/

.titlearea h3{opacity:0;transform:translateY(40px);transition:all 1s;}
.titlearea h4{}
.titlearea h4 span{position:relative;display:block;color:#fff;}
.titlearea h4 span:before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.titlearea.in-view h3{opacity:1;transform:translateY(0px);}
.titlearea.in-view h4 span:before{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}


.titlearea.in-view h4 span:nth-child(1):before{transition-delay:0.4s;}
.titlearea.in-view h4 span:nth-child(2):before{transition-delay:0.8s;}