@charset "UTF-8";
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6, p,a, em, img,
b, u, i, dl, dt, dd, ol, ul, li,form, label, article, aside, nav {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit; vertical-align: baseline;}
article, aside,footer, header, menu, nav{display: block;}
body {line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
table {border-collapse:collapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

/* ===== desktop =====*/
.wrap{background: #352651;}
header{background:linear-gradient(#621f55,#352651);width: 100%;padding-bottom:40.625%;position: relative;}
.header{background: url(../images/header-1.png)no-repeat;background-size: contain;background-position: center 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;}
header::before{content:'';background: url(../images/header-2.png)no-repeat;background-size:contain;height: 100%;width: 50%;position: absolute;top:0;left: 0;animation:shle 1s ease-out;transform-origin: 100% center;}
@keyframes shle{
    from{transform: scale(0);}
    to{transform: scale(1);}
}
header::after{content:'';background: url(../images/header-3.png)no-repeat;background-size:contain;height: 100%;width: 50%;position: absolute;top:0;right:0;animation:shle 1s ease-out;transform-origin: 0 center;}
/*  */
main{padding: 0 calc((100% - 1100px)/2);box-sizing: border-box;}

.NO1{display: flex;justify-content: space-between;align-items: stretch; flex-wrap: wrap;padding: 0 calc((100% - 1020px)/2);}
.NO1 li{width:49%;text-align: center;position: relative;margin-top:200px;}
.NO1 .head{position: absolute;bottom:100%;left: 0;width: 100%;text-align: center;transform: translateY(30px);}
.NO1 .head em{font-size: 40px;font-weight: bold;color:#fdd000;}
.NO1 .head img{display: block;margin:10px auto 0px auto;}
.NO1 .content{background:#fdd000;box-sizing: border-box;padding: 40px 30px;height: 100%;border-radius: 20px;}
.NO1 .content span{background: #e50058;display: block;color: #fff;font-size: 32px;font-weight: bold;box-sizing: border-box;padding: 14px 30px;border-radius: 10px;margin:0 auto 10px auto;width: 90%;}
.NO1 .content p{text-align: left;font-size: 25px;font-weight: bold;color: #58176b;margin-top: 5px;}

.NO2{display: flex;justify-content: space-between;margin-top: 15px;margin-bottom:20px; padding: 0 calc((100% - 1020px)/2);}
.NO2 li{width: 49%;background: #fff;border:3px solid #fdd000;box-sizing: border-box;border-radius: 20px;padding: 20px;display: flex;justify-content:flex-start;align-items: flex-start;}
.NO2 li div{width: 100%;margin-left: 15px;}
.NO2 li .name{width: 100%;background: #e50058;color: #fff;font-size: 35px;font-weight: bold;box-sizing: border-box;padding: 15px;display: block;border-top-right-radius: 99em;border-bottom-right-radius: 99em;margin-bottom: 15px;}
.NO2 li .name span{color: #fdd000;}
.NO2 li p{font-size: 25px;font-weight: bold;color: #352651;}

.first{display: flex;flex-wrap: wrap;}
.first>div{width:16%;margin-right: 0.8%;text-align: center;border: 2px solid #fdd000;box-sizing: border-box;margin-top:120px;color: #fff;padding:55px 20px 30px 20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;position: relative;display: flex;flex-flow: column;}
.first>div:nth-child(6n){margin-right: 0;}
.first>div img{transform:translateY(40%);position: absolute;bottom: 100%;left:20%; width:60%;}
.first>div>p{font-size: 28px;margin-bottom: 15px;line-height: 1.2;}
.first>div>p span{display: block;}
.first>div .name{color: #fdd000;}
.first>div em{font-size:18px;display: block;height:25px;font-weight: bold;}
.first>div .name>p{font-size:30px; height:100%;font-weight: bold;}

.second{display: flex;flex-wrap: wrap;}
.second>div{width:16%;margin-right: 0.8%;text-align: center;border: 2px solid #fdd000;box-sizing: border-box;margin-top:120px;color: #fff;padding:55px 20px 30px 20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;position: relative;display: flex;flex-flow: column;}
.second>div:nth-child(6n){margin-right: 0;}
.second>div img{transform:translateY(40%);position: absolute;bottom: 100%;left:20%; width:60%;}
.second>div>p{font-size: 28px;margin-bottom: 15px;line-height: 1.2;}
.second>div>p span{display: block;}
.second>div .name{color: #fdd000;}
.second>div em{font-size:16px;display: block;height:25px;font-weight: bold;}
.second>div .name>p{font-size:30px; height:100%;font-weight: bold;}

main .time{font-size: 18px;color: #fff;text-align: center;margin-top: 30px;}

.action{display: flex;flex-wrap: wrap;align-items: center;margin-top: 45px;}
.action .head{margin-left: 10px;}
.action .head p:first-child{font-size: 55px;color: #fdd000;margin-bottom: 15px;}
.action .head p:nth-child(2){font-size: 30px;color: #fff;}
.action .form-box{background: #fff;box-sizing: border-box;padding:30px 140px 10px 140px;width: 100%;margin-top: 25px;}

footer{text-align: center;padding:35px 0 30px 0;}
footer p{color: #fdd000;line-height: 2;}

.gotop{position: fixed;bottom:30px;right:30px;z-index:99;width: 80px;height: 80px;text-decoration:none;background: #fabe00;color: #fff;font-weight: bold;display: flex;align-items: center;justify-content: center;border-radius: 99em;font-size: 28px;}

/* ===== other ===== */
@media(max-width:1100px){
    main{padding: 0 1%;}
    .first>div>p{font-size: 24px;}
    .first>div img{width: 80%;left: 10%;}
    .second>div>p{font-size: 24px;}
    .second>div img{width: 80%;left: 10%;}
}
@media(max-width:920px){
    .first{justify-content: flex-start;}
    .first>div:nth-child(6n){margin:120px 2.5% 0 2.5%;}
    .first>div{width: 20%;margin:120px 2.5% 0 2.5%;}
    .first>div img{width: 60%;left: 20%;}
    
    .second{justify-content: flex-start;}
    .second>div:nth-child(6n){margin:120px 2.5% 0 2.5%;}
    .second>div{width: 20%;margin:120px 2.5% 0 2.5%;}
    .second>div img{width: 60%;left: 20%;}

    .action .form-box{padding: 30px 100px 10px 100px;}

    .gotop{height: 60px;width: 60px;font-size: 22px;}
}

/* ===== table ===== */
@media (max-width: 768px){
    main {padding: 0 5%;}
    .first>div{width:24%;}    
    .first>div,.first>div:nth-child(6n){margin: 120px 0.5% 0 0.5%;}
    .first>div>p{font-size: 22px;}
    .first>div em{font-size: 15px;height:20px;}
    .first>div .name>p{font-size:25px;}

    .second>div{width:23%;}    
    .second>div,.second>div:nth-child(6n){margin: 120px 1% 0 1%;}
    .second>div>p{font-size: 22px;}
    .second>div em{font-size: 15px;height:20px;}
    .second>div .name>p{font-size:25px;}
    
    .NO1 .content {padding: 40px 20px;}
    .NO1 .content span{width: 100%;padding: 15px;font-size: 26px;}
    .NO1 .content p{font-size: 20px;}

    .NO2 li{flex-wrap: wrap;}
    .NO2 li img{width:20%;display:none;}
    .NO2 li div{margin-left: 0;width: 100%;clear: both;}
    .NO2 li .name{font-size:26px;display: flex;align-items: center;}
    .NO2 li .name::before{content:'';display:inline-block;background:url(../images/NO2.png)no-repeat;width:20%;padding-bottom:20%;background-size: cover;margin-right: 10px;}
    .NO2 li p{font-size: 22px;}

    .action>img{width: 25%;}
    .action .head{width: 75%;margin-left: 0;padding-left: 10px;box-sizing: border-box;}
    .action .head p:first-child{font-size: 48px;}
    .action .head p:nth-child(2){font-size: 22px;}

    footer p{font-size: 14px;}
}

/* ===== phone ===== */
@media(max-width:600px){
    header{background-position: center 0;padding-bottom:70%;}
    .NO1 li{width:90%;margin:50vw auto 0 auto;}
    .NO1 .head em{font-size:32px;}
    .NO1 .head img{width:60%;}
    .NO1 .content {padding:40px 15px 20px 15px;}
    .NO1 .content span{padding:10px;font-size: 22px;}
    .NO2{flex-wrap: wrap;}
    .NO2 li{width:90%;margin: 0 auto 15px auto;padding:20px 15px;}
    .NO2 li .name{padding:8px 10px;font-size: 21px;}
    .NO2 li .name::before{margin-right:3px;width: 16%;padding-bottom: 17%;}
    .NO2 li p{font-size: 20px;}

    .first>div, .first>div:nth-child(6n){margin:30vw 1% 0 1%;width: 48%;}
    .second>div, .second>div:nth-child(6n){margin:100px 1% 0 1%;width: 48%;}
    .second>div>p{font-size: 20px;}

    main .time{font-size: 14px;}

    .action>img{width: 20%;}
    .action .head{width: 80%;padding-left:5px;}
    .action .head p:first-child{font-size: 34px;}
    .action .head p:nth-child(2){font-size:16px;line-height: 1.2;}
    .action .form-box {padding:20px 20px 10px 20px;}

    footer p{line-height: 1.6;font-size: 12px;}
}