html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	font-family:"微軟正黑體" !important;
}
.clearfix{clear:both;}


/*===========================桌機版================================*/

/* header */
header{background:url(../images/header.jpg)no-repeat;background-size: cover;background-position: center; width: 100%;height: 0;padding-bottom:51%;position: relative;}
.header{position: absolute;bottom: 0;display:flex;flex-direction: column;align-items: center; width: 100%;margin-bottom:2vw;}
.header nav{width: 500px;margin: 0 auto;}
.header a{display: block;width:100%;color: #fff;text-decoration: none;font-size:32px;background:linear-gradient(#009ee2,#004bdd);margin-bottom:10px;text-align: center;box-sizing:border-box;padding:0.5vw 2vw;border: 2px solid #fff;border-radius: 10px;}
.header a i{transition:all 1.5s;}
.header a:first-child{background:linear-gradient(#ffb300,#ff7002);}
.header a:hover i{transform: translateX(20px);}
.header a:first-child:active{border:2px solid gray;background:linear-gradient(#C28800,#C25400);}
.header a:active{border:2px solid gray;background: linear-gradient(#0076A8,#0036A3);}

/* main */

/* main01 */
.main01bkg{background: #c80018;padding:80px 0;}
.main01{width: 950px;margin: 0 auto;text-align: center;}
.main01 h2{color: #fff;font-size: 60px;text-align: center;margin-bottom: 50px;}
.main01 ul{display: flex;justify-content: space-between;margin-bottom: 50px;}
.main01 ul li{width: 30%;display: flex;flex-flow: column;justify-content:space-between;}
.main01 ul p{font-weight:bold;display:flex;justify-content: center;align-items: center;text-align: center;height:120px;background: #fff;border-radius: 10px;box-sizing:border-box;padding:20px;font-size: 27px;}
.main01 ul img{width: 270px;filter: drop-shadow(0px 0px 0px #fff);}

.main01 a{transition:all .5s;background: #ffe100;text-decoration: none;padding: 0.5em 1.7em;font-size: 30px;border-radius: 10px;color:#c80018;font-weight: bold;}
.main01>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main01>a:active{background:#7A0000;color: #fff;}

/*main02*/
.main02bkg{background: #004993;padding: 80px 0;overflow: hidden;}
.main02{width: 950px;margin: 0 auto;}
.main02>p{color: #fff;font-size: 40px;float: left;margin-top:5%;}
.main02 span{display: block;}
.six{position: relative;height:500px;margin-bottom: 60px;}
.sixtop{text-align: center;position: absolute;right:245px;top:-5px;width: 288px;box-sizing: border-box;}
.sixright{z-index: 20;text-align: center;position: absolute;right:-10px;top:137px;width: 288px;box-sizing: border-box;}
.sixleft{text-align: center;position: absolute;right:500px;top:137px;width: 288px;height: 200px;box-sizing: border-box;}
.sixdown{text-align: center;position: absolute;right:245px;bottom:20px;width: 288px;height: 200px;box-sizing: border-box;}
.six-1{height: 0;width:170px;border-left:80px solid transparent;border-right: 80px solid transparent;border-bottom: 140px solid #fff;}
.six-2{height: 0;width:170px;border-left:80px solid transparent;border-right: 80px solid transparent;border-top: 140px solid #fff;}
.sixdown .six-1{border-bottom: 140px solid #007fff;}
.sixdown .six-2{border-top: 140px solid #007fff;}
.sixright .six-1{border-bottom: 140px solid #007fff;}
.sixright .six-2{border-top: 140px solid #007fff;}
.darts{position: absolute;top: 0;right: 0px;z-index: 5;}
.dart{position: absolute;top: 100px;left:-5px;z-index: 5;}

/* .shut{animation:shut 0.8s;display:block}
@keyframes shut{
0%   {top: 60px;left:-1000px;}
100% {top: 100px;left:-5px;}
} */

.chance{color: #183194;font-weight: bold;font-size: 23px;margin-top: 10px;line-height:1.3;}
.chanceAdd{color: #c30d23;font-weight: bold;font-size: 25px;line-height:1.3;}
.chanceContent{font-size: 18px;line-height: 1.3;font-weight: bold;}

.focus{margin-top: 60px;font-size: 28px;color: #fff;font-weight: bold;margin-bottom: 10px;}
.six-mobile{display: none;}
.six-1>.get{position: relative;background: #fdd000;color: #d6001a;text-decoration: none;font-size: 22px;padding:10px 13px;font-weight: bold;border-radius: 10px;}
.six-1>.get:hover{box-shadow:0 0 15px 4px #FFDB3D;}
.six-1>.get:active{background:#8A7000;color: #fff;}

/* main03 */
.main03bkg{padding: 80px 0;position: relative;overflow: hidden;}
.main03bkg>img{position: absolute;height:70%;z-index:-1;}
.main03bkg .pentagon-1{transform: translateX(-100px)translateY(300px);animation:rora-1 8s linear infinite;}
.main03bkg .pentagon-2{transform: translateX(1500px)translateY(-30px);animation:rora-2 8s linear infinite;}
@keyframes rora-1{
    from { transform:translateX(-100px)translateY(300px)rotateZ(0);}
    to{ transform:translateX(-100px)translateY(300px)rotateZ(360deg);}
}
@keyframes rora-2{
    from { transform:translateX(1500px)translateY(-30px)rotateZ(360deg);}
    to{ transform:translateX(1500px)translateY(-30px)rotateZ(0deg);}
}

.main03{width:1000px;margin: 0 auto;text-align: center;}
.main03 h3{font-size: 50px;font-weight: bold;margin-bottom:40px;}
.main03 ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
.main03 ul li{display:flex;flex-wrap: wrap;justify-content: space-around;width:49%;background: #ffe2e2;margin-bottom:2%;box-sizing: border-box;padding:20px 10px 20px 20px;}
.main03 ul .head{width: 100%;text-align: left;font-size: 25px;margin-bottom: 10px;font-weight: bold;line-height: 1.2;}
.main03 ul .head p:first-child{color:#c30d23;}
.main03 ul .head p:nth-child(2){color: #004993;}
.main03 ul img{width:35%;}
.main03 ul li .content{width:60%;text-align: left;line-height: 1.3;font-size: 18px;margin-top: 10px;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;box-sizing: border-box;}
.main03 ul .content p{margin-bottom: 10px;}
.main03 ul li a{font-weight: bold;color:#fff;background:#004993;border-radius: 10px;padding:8px 20px;display: inline;text-decoration: none;}
.main03 ul a i{transition: all .5s;}
.main03 ul a:hover i{transform: translateX(10px);}
.main03 ul a:active{background:#fff;color: #004993;border: 1px solid #004993; }
.main03>p{font-size: 26px;color: #c38d5a;font-weight: bold;margin-bottom: 30px;}
.main03>a{font-size: 30px;color: #fff;background: #d6001a;text-decoration: none;padding: 0.3em 2em;border-radius: 10px;}
.main03>a:hover{box-shadow: 0 0 15px#FF384F;}
.main03>a:active{box-shadow:none;background:#B50D20; }

/* main04 */
.main04bkg{background: #f0f0f0;padding:80px 0;}
.main04{width:1000px;margin: 0 auto;text-align: center;}
.main04 h4{font-weight: bold;font-size: 50px;margin-bottom: 50px;}
.main04>div{display: flex;justify-content: flex-end;}
.main04 ul{width: 66%;}
.main04 ul li{display: flex;justify-content: space-around;align-items: center; margin-bottom: 20px;font-size: 28px;}
.main04 ul .plus-left{width:27%;color: #fff;box-sizing: border-box;padding:15px;font-weight: bold;border-radius: 10px;}
.main04 ul .plus-right{width:62%;background: #fff;box-sizing: border-box;padding:15px 10px;border-radius: 10px;font-weight: bold;}

.main04 .circle{ transform: scale(0)rotate(0deg);width:330px;height: 330px; background: #004993;border-radius: 99em;box-sizing: border-box;padding:30px 20px;color: #ffde00;font-weight: bold;font-size: 18px;line-height: 1.5;}
.main04 .circle span{font-size: 24px;}
.main04 .bigRo{animation: bigRo .8s linear;transform: scale(1)rotate(360deg);}
@keyframes bigRo{
  from{transform: scale(0)rotate(0deg);}
  to{transform: scale(1)rotate(360deg);}
}

.main04 .circle .first-img{width: 75%;transform: translateX(40px)rotateZ(48deg);transition:all .5s;}
.main04 .circle :nth-child(2){transform: translateX(-40px);}
.main04 .circle .ko{transform: translateX(40px)translateY(22px)rotateZ(0deg);}

.main04>p{font-size: 26px;font-weight: bold;margin-bottom: 30px;}
.main04>a{font-size: 30px;color: #fff;background: #d6001a;text-decoration:none;padding: 0.3em 2em;border-radius: 10px;}
.main04>a:hover{box-shadow: 0 0 15px#FF384F;}
.main04>a:active{box-shadow:none;background:#B50D20; }

/* main05 */
.main05bkg{background: #13b5b1;padding:80px 0;position: relative;z-index:0;overflow: hidden;}
.main05bkg>img{position: absolute;width: 500px;}
.main05bkg .pentagon-1{transform: translateX(0vw)translateY(300px);z-index: -1;}
.main05bkg .pentagon-2{transform: translateX(60vw)translateY(-30px);z-index: -1;}
.main05bkg .pentagon-1{animation:rora-3 10s linear infinite;}
.main05bkg .pentagon-2{animation:rora-4 10s linear infinite;}
@keyframes rora-3{
    from { transform:translateX(0vw)translateY(300px)rotateZ(0); }
    to{ transform:translateX(0vw)translateY(300px)rotateZ(360deg); }
}
@keyframes rora-4{
    from { transform:translateX(60vw)translateY(-30px)rotateZ(360deg); }
    to{ transform:translateX(60vw)translateY(-30px)rotateZ(0deg); }
}
.main05{width:1000px;margin: 0 auto;text-align: center;}
.main05 h5{font-size: 50px;color: #fff;font-weight: bold;margin-bottom:30px;}
.main05 ul{width: 100%;}
.main05 ul li{display: flex;justify-content: space-between;background:#fff;border-radius: 10px;box-sizing: border-box;padding: 25px;margin-bottom: 20px;}
.main05 ul .name{font-size: 30px;font-weight: bold;margin-bottom: 30px;}
.main05 ul .name span{color: #ff0000;}
.main05 ul .content{text-align: left;font-size: 18px;}
.main05 ul .content p{margin-bottom:0px;line-height: 1.5;}
.main05>p{font-size: 26px;color: #ffea00;font-weight: bold;margin-bottom: 10px;}
.main05>a{font-size: 30px;color: #fff;background: #d6001a;text-decoration: none;line-height:2;border-radius: 10px;padding: 0.2em 1.5em;}
.main05>a:hover{box-shadow: 0 0 15px#FF384F;}
.main05>a:active{box-shadow:none;background:#B50D20; }

/* main06 */
.main06bkg{padding:80px 0;}
.main06{width:800px;margin: 0 auto;text-align: center;}
.main06 h6{font-size: 50px;font-weight: bold;margin-bottom: 30px;}
.main06 ul{display: flex;flex-wrap: wrap;justify-content: space-between;overflow: hidden;}
.main06 ul li{font-weight: bold;line-height: 1.1; width: 45%;display: flex;background: #f0f0f0;margin-bottom: 30px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;transition:all .3s;}
.main06 ul .left{transform: translateX(-400px);}
.main06 ul .right{transform: translateX(400px);}
.main06 ul li.show{transform: translateX(0px);}
.main06 ul .square{color: #fff;width: 25%;font-size: 32px;padding: 15px;}
.main06 ul .rectangle{width: 75%;font-size:21px;padding:15px;text-align: left;}
.main06 ul .rectangle span{color: #c38100;}
.main06>p{font-size: 26px;color: #c38100;font-weight: bold;margin-bottom: 30px;}
.main06>a{font-size: 30px;color: #fff;background: #d6001a;text-decoration: none;padding: 0.3em 2em;border-radius: 10px;}
.main06>a:hover{box-shadow: 0 0 15px#FF384F;}
.main06>a:active{box-shadow:none;background:#B50D20; }

/* footer */
footer{background:#183194;padding: 40px 0;}
.footer{width: 850px;margin: 0 auto;display: flex;}
.footer>img{margin-right: 10px;}
.footer div{width:70%;}
.footer div>a{font-size: 22px;font-weight: bold;text-decoration: none; padding:10px 20px; background: #fff;color: #c30d23;border-radius: 10px;display: block;width: 100%;position: relative;margin-bottom:15px;}
.footer div>a i{position: absolute;right: 10px;}
.footer div>a:active{box-shadow:0 0 15px 4px gray inset;}

.footer ul{display:flex;justify-content: space-around;}
.footer ul li{border-left:1px solid #3157ed;padding-left: 15px;}
.footer ul li:first-child{border: 0;}
.footer ul a{color:#fff;font-size: 20px;text-decoration: none;position: relative;}
.footer ul a::after{content: '';background: #fff;width: 0;height: 1px;transition: all.5s;position: absolute;bottom:0;left: 51%;}
.footer ul a:hover::after{left: 0;width: 100%;}
.footer ul a:active{color: #999999;}
.footer ul a:active::after{transition:all 0s; background: #999999;}

/*=====其他版型=====*/
@media(max-width:1080px){
.main02{width:90%;}
}
@media(max-width:1050px){
.header{margin-bottom: 1.5vw;}

.main01{width: 98%;}

.main02{width: 82%;}
.main02>p{float: none;margin-bottom: 50px;text-align: center;}
.main02>p span{display: inline;}

.main03{width: 98%;}

.main04{width: 98%;}
.main04 h4{font-size: 44px;}
.main04 .circle {width: 300px;height: 300px;}
.main04 .circle :nth-child(2){width: 75%;}
.main04 .circle span{font-size: 20px;}

.main05{width: 98%;}

}
/*===========================平版================================*/
@media(max-width:768px){
/* header */
.header{margin-bottom: 1vw;}
.header nav{width: 350px;}
.header a{font-size: 22px;}

/* main */
/* main01 */
.main01 ul img{width: 100%;}

/* main02 */
.main02{width: 98%;}
.main02>p{margin:0;text-align: center;float: none;line-height: 1.2;}
.six{margin-top:30px;margin-bottom:0; }
.sixtop{top: 15px;right:235px;}
.sixleft{right:470px;}
.sixright{right:0px;}
.sixdown{bottom:40px;right:235px;}
.six-1{height: 0;width:170px;border-left:60px solid transparent;border-right: 60px solid transparent;border-bottom: 120px solid #fff;}
.six-2{height: 0;width:170px;border-left:60px solid transparent;border-right: 60px solid transparent;border-top: 120px solid #fff;}
.sixdown .six-1{border-bottom:120px solid #007fff;}
.sixdown .six-2{border-top:120px solid #007fff;}
.sixright .six-1{border-bottom:120px solid #007fff;}
.sixright .six-2{border-top:120px solid #007fff;}
    
/* main03 */
.main03 ul li{padding: 10px;}
.main03 ul li .content{width: 55%;font-size: 16px;}
.main03 ul img{width: 40%;height: 145px;}
    
/* main04 */
.main04 h4{font-size: 38px;}
.main04>div{display: flex;flex-wrap: wrap;}
.main04 .circle{height: 302px;order: 1;margin: 0 auto 20px auto;}
.main04 ul {width: 100%;order: 2;}
    
/* main05 */
.main05 ul .name span{display: block;}
@keyframes rora-3{
    from { transform:translateX(-20vw)translateY(300px)rotateZ(0); }
    to{ transform:translateX(-20vw)translateY(300px)rotateZ(360deg); }
}
    
/* main06 */
.main06{width: 98%;}
.main06 ul li{width: 48%;}
    
/* footer */
.footer{width: 95%;}
.footer div>a{width: auto;}


}
/*===========================行動版================================*/
@media(max-width:767px){
/* header */
header{background:url(../images/header-mobile.jpg)no-repeat;background-size: cover;width: 100%;height: 0;padding-bottom: 90%;position: relative;}
.header{width: 100%;}
.header nav{width:70%;}
.header a{font-size: 16px;padding: 0.6vw 2.2vw;}
/* main */

/* main01 */
.main01 h2{font-size: 11vw;}
.main01 ul{display:block;width: 98%;margin:0 auto 30px auto;}
.main01 ul li{width: 100%;margin-bottom: 20px;}
.main01 ul img{width: 70%;display: block;margin: 0 auto;}
.main01 a{font-size: 22px;padding: 0.3em 1.3em;}

/* main02 */
.main02bkg{padding:40px 0;}
.main02>p{margin-bottom: 30px;font-size: 8vw;font-weight: bold;}
.main02 .six{display: none;}
.main02 .six-mobile{display: block;}
.main02 .six-mobile div{position: static;margin: 0 auto;border-radius: 10px;padding:0.5em 1em;margin-bottom: 10px;}
.main02 .sixleft{background: #fff;width: 80%;}
.main02 .sixtop{background:#fff;width: 80%;}
.main02 .sixdown{height:150px;padding: 0 1em 0 1em;width: 90%;}
.main02 .focus{margin-top:10px;font-weight: normal;font-size: 20px;}
.main02 .sixdown .get{background: #fdd000;color: #d6001a;text-decoration: none;font-size: 22px;padding: 10px 13px;font-weight: bold;border-radius: 10px;}
.main02 .chance{margin-top: 0;}
    
/* main03 */
.main03 h3{font-size: 7vw;}
.main03 ul li{width: 100%;}
.main03 ul .head {font-size: 20px;text-align: center;}
.main03 ul li:nth-child(3){order: 4;}
.main03 ul .head span{display: block;font-size: 28px;}
.main03 ul .head span::after{content: '';}
.main03 ul .content p{margin: 0;line-height: 1.5;}
.main03>p{font-size: 22px;line-height:4;margin-bottom:10px;}
.main03>a{font-size: 22px;}
    
/* main04 */
.main04 h4{font-size:24px;}
.main04 h4 span{display: block;}
.main04>div{display: block;}
.main04 ul{width: 100%;}
.main04 ul li{display: block;margin-bottom: 30px;width: 80%;margin:30px auto 30px auto;padding-top:30px;border-top:1px solid #999999;}
.main04 ul li:first-child{border: 0;}
.main04 ul .plus-left{margin: 0 auto;width: 100%;}
.main04 ul li i{margin: 0 auto;}
.main04 ul .plus-right{margin: 0 auto;width: 100%;}
.main04 .circle{width: 250px;height: 250px;margin: 0 auto;font-size: 16px;padding: 20px;transform: scale(1);}
.main04 .circle span {font-size: 16px;}
.main04>p{margin-top: 40px;font-size: 22px;}

/* main05 */

.main05bkg {padding:50px 0;overflow: hidden;}
@keyframes rora-4{
    from { transform:translateX(60vw)translateY(0px)rotateZ(360deg); }
    to{ transform:translateX(60vw)translateY(0px)rotateZ(0deg); }
}
.main05 h5{font-size: 28px;}
.main05 ul li{display: block;}
.main05 ul .name {text-align: center;}
.main05 ul li .name{font-size:18px;line-height:1.5;margin:10px 0;}
.main05 ul .name span{display: block;font-size:24px;}
.main05>p{font-size:18px;}
.main05>a {font-size:22px;}
    
/* main06 */
.main06bkg{padding:50px 0;}
.main06 h6{font-size:30px;}
.main06 ul{display: block;}
.wrap .main06 ul li{transform: translateX(0);width: 100%;}
.main06 ul .square{width:30%;padding: 10px;}
.main06 ul .rectangle {padding: 10px;}
.main06>p{font-size: 20px;}
.main06>a {font-size: 22px;}
    
/* footer */
.footer{display: block;}
.footer img{display: block;margin: 0 auto;}
.footer div{width:100%;margin: 0 auto;}
.footer div>a{display: block; width:95%;margin:15px 0;font-size: 16px;padding:10px;}
.footer ul{flex-wrap: wrap;justify-content:space-around;}
.footer ul li{text-align: center;padding: 5px;}
.footer ul li a{display: block;font-size:1vw;}

}