/*CSS reset*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,sub,sup,i,ol,ul,li,table,tbody,tfoot,thead,tr,th,td,article,aside,footer,header,menu,nav,section{margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
article,aside,footer,header,menu,nav,section{display: block;}
body{line-height: 1;font-family:"微軟正黑體" !important;}
ol,ul{list-style: none;}
table{border-collapse: collapse;border-spacing:0;}

/* ========== desktop ========== */
.wrap{display: flex;flex-flow: column;height:969px;}
/* header */
header{background:url(../images/header-bkg.jpg)no-repeat;width: 100%;height:55%;background-size:cover;position: relative;background-position: 50% 0;}
.header-tit{background: url(../images/header-title.png)no-repeat;width: 100%;height: 100%;background-size:cover;position: absolute;top: 0;left: 0;background-position: 50%;z-index: 5;}
.header-1{background: url(../images/header-1.png)no-repeat;width: 100%;height: 100%;background-size:cover;position: absolute;top: 0;left: 0;background-position: 50%;z-index: 0;}
.header-2{background: url(../images/header-2.png)no-repeat;width: 100%;height: 100%;background-size:cover;position: absolute;top: 0;left: 0;background-position: 50%;z-index: 10;}
.header-3{background: url(../images/header-3.png)no-repeat;width: 100%;height: 100%;background-size:cover;position: absolute;top: 0;left: 0;background-position: 50%;z-index: 0;}
.header-4{background: url(../images/header-4.png)no-repeat;width: 100%;height: 100%;background-size:cover;position: absolute;top: 0;left: 0;background-position: 50%;z-index: 10;}
.header-content{width: 100%;height: 30%;background-size:cover;position: absolute;bottom: 0;left: 0;background-position: 50%;z-index: 10;box-sizing: border-box;text-align: center;}
.header-content p{font-size: 42px;font-weight: bold;letter-spacing:20px;margin-bottom:10px;}
.header-content>div{display: inline-block;font-size: 44px;background: #fff;border:2px solid #c84641;padding: 5px 10px;box-sizing: border-box;color: #3d9b61;font-weight: bold;letter-spacing:10px;}
.header-content>div span{color: #5f67ae;}

/* main */
main{height:45%;width: 100%;background: #f18e7b;box-sizing: border-box;padding:40px calc((100% - 1000px)/2);display: flex;flex-wrap: wrap;align-items: center;}

main .join{display: flex;justify-content: space-between;margin-bottom:40px;}

main .join{justify-content:space-around;}
main .join a{width: 20%;}
main .join a img{width:100%;}

main .join a{position: relative;display: inline-block;text-decoration: none;}
/* main .join a img{width: 220px;} */
main .join a img{width: 100%;}
main .join a span{position: absolute;bottom:-10px;left: 10%; width:80%;margin:0 auto;text-align: center;background: #fff;color:#c84641;border:3px solid #c84641;border-radius: 50px;font-weight: bold;display:block;font-size:34px;box-sizing: border-box;padding:7px 0;}

main>p{font-size: 30px;font-weight:bold;text-align: center;box-sizing: border-box;padding: 0 14%;line-height:1.6;}
main>p span{color: #fff;}

/* footer */
footer{background:#000;color: #fff;padding:30px 0;}
footer ul{display: flex;justify-content:center;margin: 0 auto;}
footer ul li{border-right: 1px solid #fff;}
footer ul li:last-child{border: 0;}	
footer ul a{color: #fff;text-decoration: none;display: block;box-sizing:border-box;padding: 5px 10px;text-align: center;}
footer p a{color: #fff;margin-left: 10px;}
footer p{text-align: center;line-height: 2;}


/* ========== other ========== */
@media(max-width:1024px){
    main>p{padding:0 5%;}
/* footer */
footer ul{display: flex;flex-wrap: wrap;}
footer ul li{width: 16%;margin-bottom: 10px;}
}



/* ========== ipad ========== */
@media(max-width:768px){
/* header */   
header{height:50%;}
.wrap{height:1024px;}
.header-tit{background: url(../images/header-title.png)no-repeat;background-size:170%;background-position: center 30%;}
.header-1{background: url(../images/header-1.png)no-repeat;background-size:170%;background-position: center 30%;}
.header-2{background: url(../images/header-2.png)no-repeat;background-size:170%;background-position: center 30%;}
.header-3{background: url(../images/header-3.png)no-repeat;background-size:170%;background-position: center 30%;}
.header-4{background: url(../images/header-4.png)no-repeat;background-size:170%;background-position: center 30%;}
.header-content{height: 35%;}

/* main */
main{height: 50%;padding:15% calc((100% - 1000px)/2);}
main>p{padding:0 3%;}
main .join a span{padding: 5px 0;font-size: 24px;}
/* footer */
footer ul a{font-size:2.5vw;}
}



/* ========== phone ========== */
@media(max-width:600px){
.wrap{display: block;}
.wrap{height:auto;}
/* header */
header{height:0;padding-bottom: 140%;}
.header-tit{background: url(../images/header-m.png)no-repeat;background-size:cover;background-position:0 0;}
.header-1{display: none;}
.header-2{display: none;}
.header-3{display: none;}
.header-4{display: none;}
.header-content{height: auto;bottom:8%;}
.header-content p{font-size: 30px;}
.header-content>div{font-size: 30px;letter-spacing: 10px;letter-spacing:5px;}

/* main */
main .join{flex-wrap: wrap;margin-bottom:20px;}
main .join a{width:40%;margin-bottom:30px;}
main>p{padding:0 1%;font-size:22px;line-height: 1.3;text-align: left;}
/* footer */
footer ul li{width: 33%;}
footer ul li a{font-size: 5vw;font-weight: bold;}
footer ul li:nth-child(3){border: 0;}
footer ul li:nth-child(6){border: 0;}
footer ul li:nth-child(9){border: 0;}

footer p{text-align: center;line-height:1.3;margin-top: 10px;}
}

@media(max-width:450px){
footer>p{font-size: 2vw;}
}