@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family: 'Noto Sans TC' , sans-serif;
	font-style: normal;
	vertical-align:baseline;
	text-decoration:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
body, html{
	overflow-anchor: none;
	width:100%;
	height: auto;
}
html{
	font-size: 20px;
	color: #fff;
}
.f_m, a.water, a.water.kb1, a.water.kb2{
	display: none;
}
.footer{
	background: #0b1c3b;
	width: 100%;
	padding: 25px 0;
	font-size: 16px;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
}
.footer a{
	color: #fff;
	margin-left: 35px;
}
.footer span{
	margin-left: 20px;
}
.kv{
	position: relative;
	background: url(../img/bg2.png) top center;
	width: 100%;
	height: 920px;
	overflow: hidden;
}
.kv > *{
	position: absolute;
}
a.logo{
	background: url(../img/logo.png) no-repeat;
	background-size: contain;
	width: 170px;
	height: 50px;
	top: 50px;
	z-index:15;
	left: calc(50% - 565px);
}
@keyframes kv_t1{
    0%  {filter: brightness(1.0);}
    60% {filter: brightness(1.2);}
    100%{filter: brightness(1.0);}
}


.kv_t1{
	background: url(../img/kv_t1.png) no-repeat;
	background-size: contain;
	width:456px;
	height:356PX;
	top:200px;
	left: calc(50% - 558px);
	z-index:0;
	animation-name: kv_t1;
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
}
.kv_t1a{
	background: url(../img/kv_t1a.png) no-repeat;
	background-size: contain;
	width: 63px;
	height: 72px;
	top: 312px;
	left: calc(50% - 159px);
	z-index: 3;
	animation-name: kv_star;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.kv_star{
	background: url(../img/kv_star.png) no-repeat;
	background-size: contain;
	width: 32px;
	height: 37px;
	top: 352px;
	z-index: 2;
	left: calc(50% - 113px);
	animation-name: kv_star;
	animation-duration: 1s;
	animation-delay: 0.4s;
	animation-iteration-count: infinite;
}
@keyframes kv_star{
    0%  {filter: brightness(1.3);transform: scale(1.0);}
    60% {filter: brightness(1.0);transform: scale(0.8);}
    100%{filter: brightness(1.3);transform: scale(1.0);}
}
.kv_t2{
	background: url(../img/kv_t2.png) no-repeat;
	background-size: contain;
	width: 433px;
	height: 62px;
	top: 384px;
	left: calc(50% - 567px);
}
@keyframes kv_t3{
    0%  {margin-top: 0;filter: brightness(1.0);}
    20% {margin-top: 3px;filter: brightness(1.2);}
    30% {margin-top: 0;filter: brightness(1.2);}
    40% {margin-top: 3px;filter: brightness(1.2);}
    60%{margin-top: 0;filter: brightness(1.0);}
}
.kv_t3{
	background: url(../img/kv_t3.png) no-repeat;
	background-size: contain;
	width: 422px;
	height: 75px;
	top: 442px;
	left: calc(50% - 570px);
	animation-name: kv_t3;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.kv_red{
	background: url(../img/kv_red.png) no-repeat;
	background-size: contain;
	width: 147px;
	height: 139px;
	top: 135px;
	left: calc(50% - 175px);
	z-index: 3;
}
.kv_fly{
	background: url(../img/kv_fly.png) no-repeat;
	background-size: contain;
	width: 236px;
	height: 78px;
	top: 135px;
	left: calc(50% - 215px);
	z-index: 4;
	animation-name: kv_c;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
@keyframes kv_c{
    0%  {margin: 0;}
    20% {margin: -10px 0 0 5px;}
    40% {margin: 15px 0 0 15px;}
    70% {margin: -5px 0 0 -10px;}
    90% {margin: 15px 0 0 -15px;}
    100%{margin: 0;}
}
.kv_c1{
	background: url(../img/kv_c1.png) no-repeat;
	background-size: contain;
	width: 1461px;
	height: 472px;
	top: 500px;
	left: calc(50% - 880px);
	z-index: 2;
}
.kv_c2{
	background: url(../img/kv_c2.png) no-repeat;
	background-size: contain;
	width: 1143px;
	height: 568px;
	top: 460px;
	left: calc(50% - 50px);
	z-index: 5;
}
.kv_c3{
	background: url(../img/kv_c3.png) no-repeat;
	background-size: contain;
	width: 650px;
	height: 192px;
	top: 610px;
	left: calc(50% - 80px);
	z-index: 7;
}
.kv_c4{
	background: url(../img/kv_c4.png) no-repeat;
	background-size: contain;
	width: 936px;
	height: 283px;
	top: 750px;
	left: calc(50% - 1190px);
	z-index: 1;
}
.kv_g1,.p1c1{
	background: url(../img/kv_g1.png) no-repeat;
	background-size: contain;
	width: 250px;
	height: 238px;
	top: 328px;
	left: calc(50% - 10px);
	z-index: 6;
}
.kv_g2,.p1b1{
	background: url(../img/kv_g2.png) no-repeat;
	background-size: contain;
	width: 320px;
	height: 602px;
	top: 480px;
	left: calc(50% + 320px);
	z-index: 4;
}
.kv_g3{
	background: url(../img/kv_g3.png) no-repeat;
	background-size: contain;
	width: 442px;
	height: 442px;
	top: 420px;
	left: calc(50% + 735px);
	z-index: 1;
}
.gg{
	width: 300px;
	top: 580px;
	left: calc(50% - 1000px);
}
.kv_p1{
	background: url(../img/kv_p1.png) no-repeat;
	background-size: contain;
	width: 334px;
	height: 531px;
	top: 210px;
	left: calc(50% - 10px);
	z-index: 6;
}
.kv_p2{
	background: url(../img/kv_p2.png) no-repeat;
	background-size: contain;
	width: 800px;
	height:763px;
	top: 60px;
	left: calc(50% - 119px);
	z-index:1;
}
@keyframes kv_arr{
    0%  {margin-top: 0}
    40% {margin-top: 5px}
    70%{margin-top: 0}
}
.kv_arr{
	background: url(../img/arr2.png) no-repeat;
	background-size: contain;
	width: 44px;
	height: 25px;
	top: 800px;
	left: calc(50% - 22px);
	z-index: 7;
	animation-name: kv_arr;
	animation-duration: 0.6s;
	animation-iteration-count: infinite;
}
@keyframes kv_bb{
    0%  {filter: brightness(1.0);}
    60% {filter: brightness(1.2);}
    100%{filter: brightness(1.0);}
}
a.kv_but,a.water{
	display: block;
	background: linear-gradient(to bottom, #e4ca80 0%,#d0a95e 100%);
	width: 220px;
	height: 40px;
	padding-top: 20px;
	border-radius: 30px;
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
	color: #000927;
	top: 620px;
	transition: 0.3s;
	z-index: 10;
	animation-name: kv_bb;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
a.kv_but.kb1{
	left: calc(50% - 570px);
}
a.kv_but.kb2{
	background: linear-gradient(to bottom, #d9eef9 0%,#7ab3cd 100%);
	left: calc(50% - 330px);
	animation-delay: 0.4s;
}
.p1{
	position: relative;
	background: url(../img/bg2.png) top center;
	width: 100%;
	padding-bottom: 70px;
	overflow: hidden;
	text-align: center;
}
.title1{
	background: url(../img/title1.png) no-repeat bottom;
	background-size: contain;
	width: 624px;
	height: 98px;
	padding-top: 50px;
	margin-left: calc(50% - 270px);
}
.p1a,.p1b,.p1c,.p1a > *,.p1b > *,.p1c > *{
	position: absolute;
}
.p1a{
	width: 700px;
	height: 200px;
	top: 10px;
	left: calc(50% - 960px);
}
.p1a1{
	background: url(../img/p1_g1.png) no-repeat bottom;
	background-size: contain;
	width: 606px;
	height: 200px;
	z-index: 2;
}
.p1a2{
	background: url(../img/p1_g2.png) no-repeat bottom;
	background-size: contain;
	width: 79px;
	height: 51px;
	top: 105px;
	left: 595px;
	z-index: 2;
	animation-name: kv_c;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}
.p1a3{
	background: url(../img/p1_c3.png) no-repeat bottom;
	background-size: contain;
	width: 136px;
	height: 93px;
	top: 68px;
	left: 518px;
	z-index: 1;
}
.p1b{
	width: 600px;
	height: 200px;
	top: 135px;
	left: calc(50% + 330px);
}
.p1b1{
	top: 58px;
	left: 0;
}
.p1b2{
	background: #ff3c22;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	left: 110px;
}
.p1b3,.p1c2{
	background: url(../img/p1_c1.png) no-repeat bottom;
	background-size: contain;
	width: 394px;
	height: 83px;
	top: 180px;
	left: 242px;
}
.p1b4,.p1c3,.p3_c3{
	background: url(../img/p1_c2.png) no-repeat bottom;
	background-size: contain;
	width: 416px;
	height: 111px;
	top: 255px;
	left: 400px;
	animation-name: kv_c;
	animation-duration: 13s;
	animation-iteration-count: infinite;
}
.p1c{
	width: 500px;
	height: 300px;
	top: 500px;
	left: calc(50% - 940px);
}
.p1c1{
	top: 0;
	left: 120px;
	z-index: 1;
}
.p1c2{
	transform: scaleY(-1);
	left: -90px;
	z-index: 2;
}
.p1c3{
	transform: scaleX(-1);
	top: 80px;
	left: -220px;
	z-index: 3;
	filter: brightness(0.85);
}
.p1cont{
	position: relative;
	width: 1100px;
	letter-spacing: 1px;
	padding-top: 120px;
	margin: 0 auto;
}
.p1cont ul{
	padding-left: 40px;
	text-align: left;
}
.p1cont ul li{
	margin-bottom: 50px;
}
.p1cont ul li span{
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	color: #fadd84;
	border-radius: 50px;
	border: 1px solid #fadd84;
	padding: 2px 15px 6px 20px;
	margin-right: 10px;
	letter-spacing: 2px;
}
.p1cont a{
	position: absolute;
}
.p1cont a.kv_but{
	top: 680px;
}
.p1cont a.kv_but.kb1{
	left: calc(50% - 250px);
}
.p1cont a.kv_but.kb2{
	left: calc(50% + 30px);
}
.warn{
	padding-top: 140px;
	letter-spacing: 2px;
}
.warn span{
	display: inline-block;
	background: url(../img/i.png) no-repeat;
	width: 25px;
	height: 25px;
	margin-right: 5px;
	vertical-align: sub;
}
.warn a{
	color:#fadd84;
	border-bottom: 1px solid #fadd84;
	margin-left: 20px;
}
.p2{
	position: relative;
	background: #263f67;
	width: 100%;
	height: 800px;
	overflow: hidden;
	text-align: center;
}
.p2title{
	position: relative;
	width: 826px;
	height: 81px;
	margin: 100px auto 50px auto;
}
.p2t1{
	position: relative;
	background: url(../img/p2_t1.png) no-repeat;
	width: 826px;
	height: 81px;
	z-index: 5;
}
@keyframes p2i{
    0%  {margin-top: 0;}
    20% {margin-top: 2px;}
    30% {margin-top: 0; }
    40% {margin-top: 4px;}
    60%{margin-top: 0;}
}
.p2i1{
	position: absolute;
	background: url(../img/p2_i1.png) no-repeat;
	background-size: contain;
	width: 83px;
	height: 90px;
	top: -45px;
	right: 118px;
	z-index: 1;
	animation-name: p2i;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
.p2i2{
	position: absolute;
	background: url(../img/p2_i2.png) no-repeat;
	background-size: contain;
	width: 113px;
	height: 114px;
	top: -55px;
	right: 5px;
	z-index: 1;
	animation-name: p2i;
	animation-duration: 2s;
	animation-delay: 0.5s;
	animation-iteration-count: infinite;
}
.p2cont{
	width: 1100px;
	margin: 0 auto;
}
.p2cont > div{
	display: inline-block;
	vertical-align: top;
}
.p2a{
	position: relative;
	width: 500px;
	margin-right: 60px;
}
.p2a > div{
	position: absolute;
	color: #dec06f;
	font-size: 20px;
}
.p2a > div span{
	color: #fff;
	font-size: 28px;
	display: block;
	font-weight: 500;
	margin-top: 20px;
}
.p2a > div.p2a4 span,.p2a > div.p2a7 span{
	margin-top: 35px;
}
.p2a1{
	background: url(../img/p2_i4.png) no-repeat;
	width: 301px;
	height: 297px;
	top: 100px;
	left: calc(50% - 175px);
}
.p2a2{
	background: url(../img/p2_d.png) no-repeat;
	width: 134px;
	height: 125px;
	top: 175px;
	left: calc(50% - 95px);
}
.p2a3,.p2a4,.p2a5,.p2a6,.p2a7{
	background: url(../img/p2_i3.png) no-repeat;
	width: 146px;
	height: 147px;
	top: -15px;
	left: calc(50% - 100px);
	animation-name: p2;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}
@keyframes p2{
    0%  {filter: brightness(1.0);}
    20% {filter: brightness(1.15);}
    30% {filter: brightness(1.0);}
    100%{filter: brightness(1.0);}
}
.p2a3{
	animation-delay: 2s;
}
.p2a4{
	top: 120px;
	left: calc(50% + 70px);
}
.p2a5{
	top: 320px;
	left: calc(50% + 12px);
	animation-delay: 0.5s;
}
.p2a6{
	top: 320px;
	left: calc(50% - 205px);
	animation-delay: 1s;
}
.p2a7{
	top: 120px;
	left: calc(50% - 270px);
	animation-delay: 1.5s;
}
.p2b{
	position: relative;
	width: 490px;
	margin-top: 70px;
	line-height: 1.8;
	text-align: justify;
	letter-spacing: 0.5px;
}
.p2b span{
	color: #dec06f;
}
.p2b a{
	position: absolute;
	display: block;
	background: linear-gradient(to bottom, #e4ca80 0%,#d0a95e 100%);
	width: 210px;
	height: 40px;
	padding-top: 20px;
	border-radius: 30px;
	line-height: 1;
	text-align: center;
	color: #000927;
	right: 0;
	top: 300px;
	transition: 0.3s;
}
.p2b a span,a.kv_but span{
	display: inline-block;
	background: url(../img/arr.png) no-repeat;
	width: 15px;
	height: 20px;
	margin-left: 5px;
	vertical-align: bottom;
}
a:hover{
	filter: brightness(1.2);
}
.p3{
	width: 100%;
	background: url(../img/bg2.png) ;
	padding: 80px 0;
	overflow: hidden;
}
.p3title{
	position: relative;
	font-size: 32px;
	background: #162e54;
	font-weight: 700;
	border-radius: 50px;
	border: 3px solid #f2d589;
	margin: 0 auto;
	width: fit-content;
	padding: 5px 35px 10px 40px;
	color: #f2d589;
	letter-spacing: 5px;
	z-index: 3;
}
.p3cont{
	position: relative;
	font-size: 18px;
	width: 850px;
	background: #162e54;
	border-radius: 30px;
	border: 3px solid #f2d589;
	margin: -25px auto 0 auto;
	padding: 80px 50px 50px 50px;
	line-height: 2;
	letter-spacing: 1px;
	text-align: justify;
	z-index: 2;
}
.p3cont a{
	color: #fff;
}
.p3cont > ul{
	list-style: url(../img/p3_d.png);
	padding-left: 20px;
}
.p3cont > ul span{
	color: #f2d589;
	font-weight: 700;
}
ul.p3a{
	list-style: decimal;
	padding-left: 25px;
}
ul.p3b{
	padding-left: 25px;
	text-indent: -26px;
}
.warn2{
	background: #0b1c3b;
	font-weight: 900;
	color: #f2d589;
	font-size: 16px;
	border-radius: 20px;
	padding: 20px;
	margin-top: 50px;
}
.warn2 span{
	font-size: 18px;
	display: block;
}
.p3bg{
	width: 100%;
	position: relative;
	z-index: 1;
}
.p3bg > *{
	position: absolute;
}
.p3_c1{
	background: url(../img/p3_c.png) no-repeat;
	background-size: contain;
	width: 416px;
	height: 111px;
}
.p3_c2{
	background: url(../img/p3_c2.png) no-repeat;
	background-size: contain;
	width: 394px;
	height: 83px;
}
.cc1{
	top: 50px;
	left: calc(50% + 580px);
}
.cc2{
	top: 470px;
	left: calc(50% - 1000px);
}
.cc3{
	top: 1100px;
	left: calc(50% + 310px);
	transform: scaleY(-1);
}
.cc4{
	top: 1580px;
	left: calc(50% - 700px);
}
.cc5{
	top: 2030px;
	left: calc(50% - 900px);
}
.cc6{
	top: 170px;
	left: calc(50% + 740px);
}
.cc7{
	top: 300px;
	left: calc(50% - 1160px);
	transform: scaleY(-1);
}
.cc8{
	top: 1200px;
	left: calc(50% + 490px);
}
.cc9{
	top: 1420px;
	left: calc(50% - 780px);
	transform: scale(-1);
}
.cc10{
	top: 2010px;
	left: calc(50% + 520px);
	transform: scaleX(-1);
}