.section .title{ width: 70%; max-width: 400px; margin: 0 auto 10px;}
.section .desc{ text-align: center; margin: 0 auto 30px;}
.section .btn-big{ display: block; width: 75%; max-width: 380px; margin: 0 auto; background: url("../img/btn_bg.png") no-repeat; background-size: 100% auto; position: relative;}
.section .btn-big img{ position: relative; z-index: 2; transition: transform ease-out 0.3s;}
.section .btn-big:hover img{ transform: scale(1.05); transition: transform ease-out 0.3s;}
.section .btn-big::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-size: auto 100%; z-index: 1;
    animation: kvFlash ease-out 2s both infinite; 
    background: url("../img/kv_flash.png") 50% 50% no-repeat;
    -webkit-mask: url("../img/btn_bg.png") 50% 50% no-repeat;
    mask: url("../img/btn_bg.png") no-repeat;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
}

.section .flex{ display: flex; flex-wrap: wrap; justify-content: center;}
.section .flex.reverse{ flex-direction: row-reverse;}
.section .flex .box{ width: 50%; display: flex; flex-direction: column; }
.section .flex .box.pic{ justify-content: flex-end; }
.section .flex .box.pic .player{ width: 100%; }
.section .flex .box.info{ justify-content: center; padding: 50px 0; }
/*.section .flex .box.video{ width: 46%; margin: 0 2% 50px; }*/
.section .flex .box.video{ width: 50%; margin: 0 2% 50px; }

.pc{ display: block;}
.mb{ display: none;}


#kv .bg{ background-color: #cfebff; overflow: hidden;}
#kv .bg img{ width: 100%; max-width: 100%; /*animation: kvZoomIn ease-in-out 1s;*/ }
#kv .bg img.kvZoomIn{ animation-name: kvZoomIn; animation-timing-function: ease-in; animation-duration: 1s; }
#kv .inner{ width: 50%; max-width: 980px; top: 5%; left: 0; position: absolute;}

#kv .inner .text{ width: 100%; max-width: 893px; }
#kv .player{ width: 50%; max-width: 900px; bottom: 0; left: 46%; position: absolute; }
#kv .player .item{ top: 0; left: 0; position: absolute;}
#kv .player img.kvZoomIn{ animation-name: kvZoomIn; animation-timing-function: ease-out; animation-duration: 0.5s; }
#kv .player img:nth-child(1){ animation-delay: 0.6s; }
#kv .player img:nth-child(2){ animation-delay: 0.7s; }
#kv .player img:nth-child(3){ animation-delay: 0.8s; }
#kv .player img:nth-child(4){ animation-delay: 0.9s; }
#kv .tip{ width: 20%; max-width: 130px; aspect-ratio: 1 / 1; border-radius: 100%; background: url("../img/kv_tip.png") no-repeat; background-size: 100% auto; bottom: 5%; left: 50%; transform: translateX(-50%); position: absolute; box-shadow: 0 0 5px rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; transition: all ease-out 0.3s; }
#kv .tip:hover{  box-shadow: 0 0 10px rgba(0,0,0,0.6); transition: all ease-out 0.3s; }
#kv .tip::before{ content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 8px 0 8px; border-color: #fff600 transparent transparent transparent; position: relative; margin-top: 50%; animation: arrow linear 1s infinite;}


#p1{ background: linear-gradient(120deg, #082557 0%, #082557 25%, #103470 25%, #103470 85%, #114277 85%, #114277 100%);}
#p1 .container{ width: 100%; padding: 50px 0 0;}
#p1 .desc{ color: #ffffff; text-align: left; margin-bottom: 0; }
#p1 .desc p + p{ margin-top: 15px;}
#p1 .desc p a{ color: #FFF; text-decoration: underline;}
#p1 .flex { width: 100%; max-width: 800px; margin: 0 auto 50px;}
#p1 .flex .box.pic{ /*width: 37%;*/ justify-content: center;}
#p1 .flex .box.pic .title{ margin: 0 auto;}
#p1 .flex .box.pic .logo{ width: 90%; max-width: 250px; margin: 0 auto;}
#p1 .flex .box.info{ /*width: 63%;*/ padding: 0 0 0 20px; line-height: 1.8;}
#p1 .pic-list{ width: 100%; max-width: 1920px; margin: 0 auto; display: flex;}
#p1 .pic-list figure { flex: 1; margin: 0; overflow: hidden;}
#p1 .pic-list figure img{ transition: transform ease-out 0.3s;}
#p1 .pic-list figure:hover img{ transform: scale(1.1); transition: transform ease-out 0.3s;}


#p2{ background: #ffffff url("../img/bg_p2.jpg") top center no-repeat; background-size: cover; padding: 50px 0 100px;}
#p2 .container{ width: 90%; max-width: 1200px;}
#p2 .desc{ color: #103470;}
#p2 h2{ color: #103470; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 2px; margin-bottom: 15px;}
#p2 .video-container { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.25%; border: #103470 solid 2px;} 
#p2 .video-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#p2 .playlist-container{ max-width: 600px; margin: 30px auto 15px; position: relative;}
#p2 .playlist-container + .playlist-container{ margin-top: 50px;}
#p2 .playlist-container .video-container{ margin: 0 auto 10px;}
#p2 .playlist-container .menu{ display: flex; justify-content: center;}
#p2 .playlist-container .menu li{ width: 32%; background-color: #103470; cursor: pointer; transform: skewX(-15deg); margin: 0 5px;; transition: all ease-out 0.3s;}
#p2 .playlist-container .menu li:hover,
#p2 .playlist-container .menu li.active{ background-color: #18a8b0; transition: all ease-out 0.3s;}
#p2 .playlist-container .menu li span{ display: block; color: #fff; font-size: 20px; line-height: 1.2; text-align: center; padding: 10px 0; font-weight: 400; transform: skewX(15deg);}
#p2 .playlist-container .menu li span strong{ font-weight: 700;}
#p2 .playlist-container .btn{ position: absolute; width: 50px; height: 100px; top: 45%; transform: translateY(-50%); cursor: pointer; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: all ease-out 0.3s;}
#p2 .playlist-container .btn:hover{ opacity: 0.75; transition: all ease-out 0.3s;}
#p2 .playlist-container .btn.prev{ left: -50px; background-image: url("../img/icon_prev.png");}
#p2 .playlist-container .btn.next{ right: -50px; background-image: url("../img/icon_next.png");}


#p3{ background: #103470 url("../img/bg_p3.png") left bottom no-repeat; background-size: 60% auto; }
#p3 .container{ width: 90%; max-width: 1200px;}
#p3 .desc{ color: #ffffff;}
#p3 .btn-popup{ background-color: #0b1f44; border: #58719a solid 1px; }
#p3 .btn-popup:hover{ border: #fff solid 1px; }
#p3 .flex .box.pic .player{ transform: scale(1.05); transform-origin: bottom center; position: relative; z-index: 2;}

#p4{ background: #bee7fd url("../img/bg_p4.png") center top no-repeat; background-size: 100% auto; position: relative; padding-bottom: 50px;}
#p4::before{ content: ''; width: 100%; height: 100%; background: url("../img/bg_p4_bottom.png") center bottom no-repeat; background-size: 100% auto; pointer-events: none; position: absolute; bottom: 0; left: 0;}
#p4 .container{ width: 90%; max-width: 1200px;}
#p4 .subtitle{ width: 90%; max-width: 410px; margin: 0 auto 15px;}
#p4 .desc{ color: #000000; width: 90%; max-width: 380px; }
#p4 .desc strong{ color: #103470; }

#p5{ background: #18a8b0 url("../img/bg_p5.png") 100% 110% no-repeat; background-size: 50% auto; padding-top: 50px;}
#p5 .container{ width: 90%; max-width: 1200px;}
#p5 .subtitle{ width: 90%; max-width: 410px; margin: 0 auto 15px;}
#p5 .desc{ color: #000000; }
#p5 .desc strong{ color: #103470; }
#p5 .flex .box.pic .player{ transform: scale(1.15); transform-origin: top left; position: relative; z-index: 2; margin-top: 2%;}

#p6{ background: #e7e7e7 url("../img/bg_p6.png") left bottom no-repeat; background-size: 60% auto; position: relative; z-index: 1; padding-top: 2%; }
#p6 .container{ width: 90%; max-width: 1200px;}
#p6 .subtitle{ width: 90%; max-width: 400px; margin: 0 auto 15px;}
#p6 .desc{ color: #000000;}
#p6 .flex .box.pic .player{ transform: scale(1.3); transform-origin: bottom right;}

#p7{ background: #18a8b0 url("../img/bg_p7.png") 80% 100% no-repeat; background-size: 40% auto;}
#p7 .container{ width: 90%; max-width: 1200px; }

#p8{ background-color: #114579; padding: 50px 0 20px;}
#p8 .container{ width: 95%; max-width: 1100px; margin: 0 auto; }
#p8 .label{ text-align: center; position: relative; margin-bottom: 10px;}
#p8 .label::before{ content: ''; width: 70%; height: 1px; background-color: #fff; left: 15%; top: 50%; position: absolute; z-index: 1;}
#p8 .label span{ display: inline-block; padding: 3px 15px 5px; color: #fff; font-size: 18px; letter-spacing: 2px; position: relative; z-index: 2;}
#p8 .label span::before{ content: ''; width: 100%; height: 100%; background-color: #114579; left: 0; top: 0; position: absolute; z-index: -1; }
#p8 .list{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 10px auto;}
#p8 .list li{ width: 23%; margin: 0 1% 30px;}
#p8 .list li img{ width: 100%; max-width: 180px; height: auto; margin: 0 auto;}


@media screen and (max-width: 1200px) {
#kv .tip{ max-width: 100px; bottom: 17%; }
}

@media screen and (max-width: 1000px) {

}

@media screen and (max-width: 809px) {
.section .btn-big{ background-size: 90% auto; background-position: 50% 50%;}
.section .btn-big::before{ 
    background: url("../img/kv_flash.png") 50% 50% no-repeat;
    -webkit-mask: url("../img/btn_bg.png") 50% 50% no-repeat; 
	-webkit-mask-size: 90% auto; mask-size: 90% auto;
    mask: url("../img/btn_bg.png") 50% 50% no-repeat; 
	mask-size: 90% auto; mask-size: 90% auto;
}
	
.section .flex{ display: block; margin: 0 auto;}
.section .flex .box{ width: 100%; display: block; }
.section .flex .box.pic .player{ width: 80%; max-width: 400px; margin: 0 auto;}
.section .flex .box.video{ width: 100%; max-width: 600px; margin: 0 auto 30px; }
	
.pc{ display: none;}
.mb{ display: block;}
	
#kv .inner{ width: 100%; height: 100%; top: 0; left: 0;}
#kv .inner .slogan{ margin-top: 7%; }
#kv .inner .text{ position: absolute; bottom: 0; }
#kv .player{ width: 100%; bottom: 16.35%; left: 0; }
	
#p1 .flex .box.pic{ width: 100%; }
#p1 .flex .box.pic .logo{ width: 60%; max-width: 300px; }
#p1 .flex .box.info{ width: 100%; padding: 50px 8% 0; }
#p1 .pic-list { display: block; }
#p1 .pic-list figure:hover img{ transform: none; transition: none;}
    
#p2{ padding: 50px 0;}
#p2 h2{ font-size: 26px; letter-spacing: 0;}
#p2 .playlist-container .menu li{ transform: none; }
#p2 .playlist-container .menu li span{ font-size: 18px; transform: none;}
#p2 .playlist-container .btn{ display: none;}	
	
#p3{ background: #103470 url("../img/bg_p3.png") left bottom no-repeat; background-size: 90% auto; }
#p3 .flex .box.pic .player{ transform: none; max-width: 230px; margin: 0 auto 0 0;}

#p4{ padding-bottom: 20px;}
	
#p5{ background: #18a8b0 url("../img/bg_p5.png") center bottom no-repeat; background-size: 100% auto; padding-top: 0; }
#p5 .flex .box.pic .player{ transform: scale(1.15); margin: 0 0 0 auto; }
	
#p6{ background: #e7e7e7 url("../img/bg_p6.png") left bottom no-repeat; background-size: 100% auto; padding-top: 0;}
#p6 .flex .box.pic .player{ transform: none; margin: 0 auto 0 0;}
	
#p7{ background: #18a8b0 url("../img/bg_p7.png") center bottom no-repeat; background-size: 90% auto;}


#p8 .list{ width: 100%; max-width: 500px;}
#p8 .list li{ width: 48%; }    
       
}

@media screen and (max-width: 480px) {


#p2 .container{ width: 100%;}
#p2 .flex{ width: 90%;  }
#p2 .playlist-container .video-container{ width: 90%;}
#p2 .playlist-container .menu{ overflow: auto; overflow-y: hidden; padding: 0 5%; gap: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
#p2 .playlist-container .menu::-webkit-scrollbar { display: none; }	
#p2 .playlist-container .menu li{ flex: 0 0 40%; min-width: 150px; }
#p2 .playlist-container .menu li span{ font-size: 16px; }

#p8 .label span{ font-size: 17px;}
#p8 .list li{ width: 98%; }  
}


@keyframes kvFlash {
    0% { background-position: -600px 50%; }
    100% { background-position: 400px 50%; }
}
@keyframes kvZoomIn{
    0%{ transform: scale(1.2,1.2); opacity: 0;}
    100%{ transform: scale(1,1); opacity: 1;}
}
@keyframes arrow{
    0% { top: 7px; opacity: 1; }
    50% { top: 0; opacity: 0.7; }
	100% { top: 7px; opacity: 1; }
}