/*
*** common ***/
#main {position:relative; width:100%; min-width:1680px; margin:0 auto;}
#main h1.tit {font-weight:600; font-size:48px; color:#111; line-height:54px;}
#main p.subtit {margin:20px 0 40px; font-weight:400; font-size:20px; color:#333; line-height:28px; letter-spacing:-0.5px;}

/*
*** section1 ***/
.section1 {position:relative; width:100%; height:800px; overflow:hidden;}
.section1 .sl1-subtit {margin:180px 0 55px; opacity:0;}
.section1 .sl1-tit {opacity:0;}
.section1 .sl1-txt {width:1200px; margin:40px 0 10px; font-weight:700; font-size:30px; color:#1e1e1e; text-align:center; opacity:0;}
.section1 .sl1-subtxt {width:1200px; font-size:22px; color:#666; text-align:center; opacity:0;}
.section1 .sl1-subtxt span {position:relative; top:2px; font-weight:600; font-size:27px; color:#1e1e1e;}
.section1 .sl-ani {top:180px; left:0;}
.section1 .sl-txt {width:1200px; margin-bottom:12px; font-weight:700; font-size:30px; color:#1e1e1e; opacity:0;}
.section1 .sl-subtxt {width:1200px; font-size:22px; color:#666; opacity:0;}
.section1 .sl-tit {margin-top:35px; opacity:0; position: relative; z-index: 9;}
.section1 .sl-btn {margin-top:45px; opacity:0;}
.section1 .sl-btn a {display:inline-block; width:220px; height:60px; text-align:center;}
.section1 .sl-btn a:nth-child(2) {border-left:0;}
.section1 .sl2-btn a {border:1px solid #ff7381; font-weight:600; font-size:20px; color:#ff7381; line-height:60px;}
.section1 .sl3-btn a {border:1px solid #32b782; font-weight:600; font-size:20px; color:#32b782; line-height:60px;}
.section1 .sl4-btn a {border:1px solid #000; font-weight:600; font-size:20px; color:#000; line-height:60px;}
.section1 .sl5-btn a {border:1px solid #62a1ff; font-weight:600; font-size:20px; color:#62a1ff; line-height:60px;}
.section1 .sl5-hash {margin-top:45px; opacity:0;}
.section1 .sl5-hash div {height:44px; margin:5px 0;}
.section1 .sl5-hash div span {margin-right:5px; padding:10px 15px; background:#afbccf; border-radius:100px; font-size:20px; color:#fff;}
.section1 .sl6-btn a {border:1px solid #000; font-weight:600; font-size:20px; color:#000; line-height:60px;}
.section1 .sl7-btn a {border:1px solid #000; font-weight:600; font-size:20px; color:#000; line-height:60px;}
.section1 .sl8-btn a {border:1px solid #be1fc2; font-weight:600; font-size:20px; color:#be1fc2; line-height:60px;}
.section1 .sl9-btn a {border:1px solid #632fd1; font-weight:600; font-size:20px; color:#632fd1; line-height:60px;}


.section1 .sl-img {top:0; right:-200px;  opacity:0;}
.section1 .swiper-slide-active .fade-up1 {animation:fade-up .5s .6s forwards;}
.section1 .swiper-slide-active .fade-up2 {animation:fade-up .5s .7s forwards;}
.section1 .swiper-slide-active .fade-down1 {animation:fade-down .5s .3s forwards;}
.section1 .swiper-slide-active .fade-down2 {animation:fade-down .5s .4s forwards;}
.section1 .swiper-slide-active .fade-down3 {animation:fade-down .5s .5s forwards;}
.section1 .swiper-slide-active .fade-left {animation:fade-left .5s .3s forwards;}

.swiper-nav {display:flex; bottom:80px; left:50%; transform:translateX(-50%); z-index:1; height:15px;}
.swiper-pagination {position:relative !important; bottom:1px !important; width:100px !important; font-weight:600; font-size:17px; color:#adacb0;}
.swiper-pagination .swiper-pagination-current {font-weight:700; color:#682ed0;}
.swiper-pagination .line {display:inline-block; width:12px; height:3px; margin:0 4px 4px; background:#ccc;}
.next1 {width:11px; height:15px; margin-right:15px; background:url('/_images/main/nav-next.png'); cursor:pointer; transition:all .3s;}
.prev1 {width:11px; height:15px; margin-left:20px; background:url('/_images/main/nav-prev.png'); cursor:pointer; transition:all .3s;}
.next1:hover {background:url('/_images/main/nav-next_over.png');}
.prev1:hover {background:url('/_images/main/nav-prev_over.png');}
.swiper-play-puase {width:11px; height:15px; cursor:pointer;}
.swiper-play-puase .swiper-play {display:none; width:11px; height:15px; background:url('/_images/main/nav-play.png'); transition:all .3s;}
.swiper-play-puase .swiper-puase {display:block; width:11px; height:15px; background:url('/_images/main/nav-puase.png'); transition:all .3s;}
.swiper-play-puase .swiper-play:hover {background:url('/_images/main/nav-play_over.png');}
.swiper-play-puase .swiper-puase:hover {background:url('/_images/main/nav-puase_over.png');}
.pagination-progress {width:150px !important; height:3px; margin-top:6px;}
.pagination-progress .swiper-pagination-bullet {position:absolute; width:150px; height:3px; background:#b7b7ba; ; border-radius:0;}
.pagination-progress .swiper-pagination-bullet-active {position:absolute; z-index:2; background:#682ed0; border-radius:0; animation:progress 4.6s ease-in alternate forwards;}

@keyframes fade-up {from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);}}
@keyframes fade-down {from {opacity:0; transform:translateY(-30px);} to {opacity:1; transform:translateY(0);}}
@keyframes fade-left {from {opacity:0; transform:translateX(80px);} to {opacity:1; transform:translateX(0);}}
@keyframes progress {0% {width:0;} 95%,100% {width:150px;}}
/*** section1-1 ***/
.section1_1 {position:relative; padding-top:100px; text-align:center;}
.card-item{display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
.card-item li{width: 100%; flex: 1; height: 240px; border-radius: 10px; overflow: hidden; font-size: 30px; color: #fff; font-weight: 600; position: relative; display: flex; align-items: center; justify-content: center;}
.card-item li.bg_01{background: url('/_images/main/card_bg_01.jpg')no-repeat center center/cover;}
.card-item li.bg_01 .card_num{font-size: 20px; font-weight: 500; color: #ff9172; background: rgba(255,255,255,.5); border-radius: 10px; position: absolute; left: 30px; top: 40px; padding: 10px;}
.card-item li.bg_02{background: url('/_images/main/card_bg_02.jpg')no-repeat center center/cover;}
.card-item li.bg_02 .card_num{font-size: 20px; font-weight: 500; color: #7a39ef; background: rgba(255,255,255,.5); border-radius: 10px; position: absolute; left: 30px; top: 40px; padding: 10px;}
.card-item li .hover-card{background: rgba(0, 0, 0, .8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 22px; font-weight: 600; color: #fff; line-height: 140%;	display:none;}
.card-item li:hover .hover-card{display:flex;}
.card-item li.bg_01 .hover-card i.link{width: 32px; height: 32px; border-radius: 32px; background-color: #ff9172; position: absolute; right: 30px; bottom: 30px}
.card-item li.bg_02 .hover-card i.link{width: 32px; height: 32px; border-radius: 32px; background-color: #7a39ef; position: absolute; right: 30px; bottom: 30px}
.card-item li:hover .hover-card i.link::before{content: ''; display: block; width: 31px; height: 11px; background: url('/_images/main/icon_cardLink.png')no-repeat center center; position: absolute; top: 8px; left: -10px;}
/*
*** section2 ***/
.section2 {position:relative; padding:100px 0; text-align:center;}
.contents {width:100%; padding:10px 0; text-align:center; overflow:hidden;}
.contents .swiper-slide {position:relative; filter:blur(2px); opacity:0; transition:all .3s;}
.contents .swiper-slide .play {position:absolute; opacity:0; transition:all .3s;}
.contents .swiper-slide.swiper-slide-active {filter:blur(0);}
.contents .swiper-slide.on,
.contents .swiper-slide.swiper-slide-prev,
.contents .swiper-slide.swiper-slide-active,
.contents .swiper-slide.swiper-slide-next,
.contents .swiper-slide.swiper-slide-next + .swiper-slide,
.contents .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide {opacity:1;}
.contents .swiper-slide.swiper-slide-active .play {opacity:1;}
.next2 {top:380px; right:-80px; width:22px; height:41px; background:url('/_images/main/nav-next2.png'); cursor:pointer; transition:all .3s;}
.prev2 {top:380px; left:-80px; width:22px; height:41px; background:url('/_images/main/nav-prev2.png'); cursor:pointer; transition:all .3s;}
.next2:hover {background:url('/_images/main/nav-next2_over.png');}
.prev2:hover {background:url('/_images/main/nav-prev2_over.png');}

.video-wrap {display:inline-block; width:500px; height:317px;}
.video-wrap img {width:100%; height:100%;}
.video-wrap img.play {width:auto;}
.video-wrap .video {position:absolute; top:0; left:50%; transform:translateX(-50%); width:500px; height:317px; z-index:10; background:#000;}
.video-wrap .video iframe {width:500px; height:317px; border:0;}
.description {position:absolute; top:10px; right:370px; z-index:-1; width:325px; height:297px; padding:40px 30px; background:#692fd1; border-radius:0 10px 10px 0; box-shadow:5px 5px 20px rgba(161,112,249,.7); text-align:left; opacity:0; transition:all .3s;}
.description h3 {margin-bottom:15px; font-weight:500; font-size:20px; color:#fff; line-height:27px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.description li {margin:3px 0 0 16px; padding-left:3px; list-style:decimal; font-weight:300; font-size:14px; color:#ddd4ec; line-height:20px;}

.description .txt_wrap {width:250px; height:125px; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; font-weight:300; font-size:14px; color:#ddd4ec; line-height:20px; word-break:keep-all;}
.description .txt_wrap div {width:100%; margin-top:3px; font-weight:300; font-size:14px; color:#ddd4ec; line-height:20px; word-break:keep-all;}
/*
*** section3 ***/
.section3 {position:relative; width:100%; height:615px; background:#d7dbfa;}
.tab-wrap {position:absolute; top:95px; left:50%; transform:translateX(-50%);}
.tab-wrap .tab {display:flex; position:relative;}
.tab-wrap .tab a {width:150px; height:50px; margin:0 3px; background:#fff; border-radius:100px; font-weight:700; font-size:17px; color:#222; text-align:center; line-height:50px;  transition:all .3s;}
.tab-wrap .tab a.on {background:#222; color:#fff;}

.cont {visibility:hidden; position:absolute; top:150px; left:50%; transform:translateX(-50%); width:94.6%; height:400px;}
.cont.on {visibility:visible;}
.cont .lectures {width:100%; height:400px; margin:0 auto; padding-top:35px; overflow:hidden;}
.cont .lectures .swiper-slide {width:280px !important; height:330px; margin:0 10px; background:#fff; border-radius:10px; box-shadow:0px 5px 10px 2px rgba(135,137,173,.3); transition:all .3s;}
.cont .lectures .swiper-slide:hover {transform:translateY(-10px); box-shadow:0px 15px 20px -3px rgba(135,137,173,.5);}

.lectures .lec-thumb {display:block; margin:15px 0 0 15px;width:250px;height:155px;}
.lectures .swiper-slide p {height:66px; padding:20px; font-weight:400; font-size:17px; color:#111; line-height:22px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.btn-flex {display:flex; align-items:center; justify-content: center;position:absolute; bottom:0; width:280px; height:66px; border-top:1px solid #eee;}
.btn-flex .divider {width:2px;}
.btn-flex .disabled {pointer-events:none; cursor:default;}
.btn-flex .btn-watch {width:139px; height:65px; background:url('/_images/main/btn-watch.png') center top no-repeat; cursor:pointer; transition:all .3s;}
.btn-flex .btn-watch_01 {width:139px; height:65px; background:url('/_images/main/btn-watch01.png') center top no-repeat; cursor:pointer; transition:all .3s;}
.btn-flex .btn-view {width:139px; height:65px; background:url('/_images/main/btn-view.png') center top no-repeat; cursor:pointer; transition:all .3s;}
.btn-flex .btn-watch:hover {background:url('/_images/main/btn-watch_over.png') center top no-repeat; transition:all .3s;}
.btn-flex .btn-watch_01:hover {background:url('/_images/main/btn-watch01_over.png') center top no-repeat; transition:all .3s;}
.btn-flex .btn-view:hover {background:url('/_images/main/btn-view_over.png') center top no-repeat; transition:all .3s;}
.next3 {position:absolute; right:200px; top:50%; transform:translateY(-50%); z-index:1; width:70px; height:70px; background:url('/_images/main/nav-next3.png'); border-radius:100px; cursor:pointer; opacity:0; box-shadow:0px 20px 20px rgb(0 0 0 / 20%); transition:all .3s;}
.prev3 {position:absolute; left:200px; top:50%; transform:translateY(-50%); z-index:1; width:70px; height:70px; background:url('/_images/main/nav-prev3.png'); border-radius:100px; cursor:pointer; opacity:0; box-shadow:0px 20px 20px rgb(0 0 0 / 20%); transition:all .3s;}
.next3:hover {background:url('/_images/main/nav-next3_over.png');}
.prev3:hover {background:url('/_images/main/nav-prev3_over.png');}

/*
*** section4 ***/
.section4 {position:relative; width:100%; padding:80px 0;}
.sec4-img1, .sec4-img2 {opacity:0;}
.sec4-img1 {margin-bottom:-120px;}
.sec4-img1 div:nth-child(1), .sec4-img2 div:nth-child(2) {width:628px;}
.sec4-img1 div:nth-child(2), .sec4-img2 div:nth-child(1) {width:572px; padding-left:120px;}
.sec4-img1 div:nth-child(1) img {margin-left:-130px;}
.sec4-btn1 {display:block; position:relative; width:220px; height:50px; padding-left:20px; border:1px solid #682ed0; border-radius:5px; font-weight:600; font-size:18px; color:#682ed0; line-height:50px;}
.sec4-btn2 {display:block; position:relative; width:220px; height:50px; padding-left:20px; border:1px solid #eea693; border-radius:5px; font-weight:600; font-size:18px; color:#dc5632; line-height:50px;}
.sec4-arr1, .sec4-arr2 {bottom:21px; right:20px;}
.sec4-img1.on,.sec4-img2.on {animation:fade-up .8s .2s forwards;}
.sec4-btn1:hover .sec4-arr1, .sec4-btn2:hover .sec4-arr2 {animation:movLeft .5s cubic-bezier(.5, 0, 1, 1) infinite alternate;}
@keyframes movLeft {from {transform:translateX(0) rotate(.002deg);} to {transform:translateX(5px) rotate(.002deg);}}
@keyframes fade-up {from {opacity:0; transform:translateY(50px);} to {opacity:1; transform:translateY(0);}}

/*
*** section5 ***/
.section5 {position:relative; width:100%; background:url('/_images/main/sec5-bg.jpg') center top no-repeat; display: none;}
.section5 .tit-transf {top:120px;}
.section5 .tit:after {content:''; position:absolute; top:-20px; left:0; width:40px; height:5px; background:#000;}
.section5 .tit span {font-weight:600;}
.section5 .subtit {top:280px; left:4px;}
.txt-box {top:120px; left:475px; width:640px;}
.txt-box h3 {margin-bottom:10px; font-weight:700; font-size:29px;}
.txt-box p {font-size:18px; color:#666; line-height:24px;}
.txt-box p span {font-weight:700; color:#222;}
.sec5-more1 {top:120px; left:430px; z-index:1;}
.sec5-more2 {top:120px; right:300px; z-index:1;}
.sec5-more1:before {content:''; position:absolute; top:-4px; left:-4px; z-index:-1; width:38px; height:38px; background:#682ed0; border-radius:50%; opacity:.6; animation:scale-up 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
.sec5-more2:before {content:''; position:absolute; top:-4px; left:-4px; z-index:-1; width:38px; height:38px; background:#11dde0; border-radius:50%; opacity:.6; animation:scale-up 1.8s 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
@keyframes scale-up {0% {opacity:.6; transform:scale(.7);} 50%,100% {opacity:0; transform:scale(1.3);}}		

.circle-wrap {display:none; top:-20px; width:380px; height:380px; margin-left:-175px;}
.circle-wrap p {top:50%; transform:translateY(-50%); width:380px; font-weight:500; font-size:22px; color:#fff; text-align:center; line-height:36px;}
.circle-wrap p span {font-weight:600; font-size:30px; color:#f3eb95;}
.circle-wrap p a {display:block; margin-top:20px; font-weight:600; font-size:17px; color:#000;}
.circle-wrap p a i {position:absolute; bottom:-10px; left:50%; margin-left:-56px;}
.circle1 {width:380px; height:380px; background:#682ed0; border-radius:50%; opacity:.8;}
.circle2 {width:380px; height:380px; background:#00b0b2; border-radius:50%; opacity:.8;}

/*
*** section6 ***/
.section6 {position:relative; width:100%; padding:100px 0 80px; text-align:center;}


/**** section7 ***/
.section7 {position:relative; width:100%; padding-top: 100px;}
.section7 .titletop{display: flex; align-items: flex-end; justify-content: space-between;}
.section7 p.subtit{margin: 20px 0 0 !important;}
.section7 .subtit span.red{color: #ff0000;}
.section7 .subtit span.Purple{color: #7d1eff;}

.tab-wrap_v2 {}
.tab-wrap_v2 .tab_v2 {display:flex; position:relative;}
.tab-wrap_v2 .tab_v2 a {width:150px; height:50px; margin:0 3px; background:#e6e6e6; border-radius:100px; font-weight:700; font-size:17px; color:#222; text-align:center; line-height:50px;  transition:all .3s;}
.tab-wrap_v2 .tab_v2 a.on {background:#222; color:#fff;}

.tab_cnt {display: none; margin-top: 40px;}
.tab_cnt.active {display: block;}

.eco_list{width: 280px !important; height: 330px; margin: 0 10px; background: #fff; border-radius: 10px; box-shadow: 0px 5px 10px 2px rgba(135,137,173,.3); transition: all .3s;}
.eco_list:hover {transform: translateY(-10px); box-shadow: 0px 15px 20px -3px rgba(135,137,173,.5);}
.eco_list .lec-thumb {display: block; margin: 15px 0 0 15px; width: 250px; height: 155px;}
.eco_list p {padding: 12px 20px; font-weight: 400; font-size: 17px; color: #111; line-height: 22px;}
.eco_list p span{display: block; font-weight: 400; font-size: 14px; color: #111111; line-height: 22px;}

.eco_list_first{width: 280px !important;height: 330px;padding: 20px 20px 20px 20px;margin: 0 10px;background: linear-gradient(180deg, #7d1eff 0%, #c158ff 100%);border-radius: 10px; position: relative;}
.eco_list_first h2{font-size: 22px; color: #fff; padding: 0 10px; line-height: 1.4;}	
.eco_list_first h2 strong{font-size: 30px; font-weight: 700; margin: 10px 0 24px; display: block;}	
.eco_list_first p{font-size: 16px; color: #fff; opacity: 0.85; padding: 0 10px; line-height: 1.4;}	
.eco_list_first a.btn_link{background-color: #fff; border-radius: 4px; font-size: 22px; color: #692fd1; font-weight: 600; display: flex; justify-content: space-between; align-items: center; padding: 18px 30px; position: absolute; bottom: 20px; width: 86%;}
.eco_list_first a.btn_link i{display: flex;}
.eco_list_first a.btn_link:hover i{animation: movLeft .5s cubic-bezier(.5, 0, 1, 1) infinite alternate;}