@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{
    font-size:14px;
    font-family: 'Noto Sans TC',Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun;
    color:#333;
    position:relative;
/*    background-color: #f6f6f6;*/
    /*overflow-y: hidden; */
}

body:after{
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: linear-gradient( #59b6c4 0%, #2f274e 100%);
    z-index: -1;
}

a{ color:#333;}a:hover{ color:#333;}
* {
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}

/*   html{
    overflow-y: hidden;
    position:static;
} */

body{
	width: 100%;
	overflow-x: hidden;
	/*font-family: 'Montserrat',Microsoft JhengHei;*/
	animation-name: fade-in;
	animation-duration:1s;
	animation-timing-function:ease-in;
}
/*@keyframes fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity: 1;
    }
}
*/


.bg{
    position: fixed;
}

.bg_01{
    position: fixed;
    top: 20%;
    left: 10px;
    opacity: .2;
    width: 80px;
}

.bg_01 { -webkit-animation: bg_auto01 2s linear infinite;
                     animation: bg_auto01 2s linear infinite;}

@-webkit-keyframes bg_auto01 {
    0% {
    }
    50%{
        opacity: .0;
    }
    100% {
    }
}


.bg_02{
    position: fixed;
    bottom: 55%;
    right: 10px;
    opacity: .2;
    width: 120px;
}

.bg_02 { -webkit-animation: bg_auto01 3s linear infinite;
                     animation: bg_auto01 3s linear infinite;}

@-webkit-keyframes bg_auto01 {
    0% {
    }
    50%{
        opacity: .0;
    }
    100% {
    }
}

.bg_03{
    position: fixed;
    top: 5%;
    right: 10px;
    opacity: .2;
    width: 60px;
}

.bg_03 { -webkit-animation: bg_auto01 1.5s linear infinite;
                     animation: bg_auto01 1.5s linear infinite;}

@-webkit-keyframes bg_auto01 {
    0% {
    }
    40%{
        opacity: .0;
    }
    100% {
    }
}

.all_box{
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
/*    border-bottom: 20px #ddd solid;*/
}

.all_box.full{
    border-bottom: 0px #ddd solid;
}


.box_01{
/*    background-color:#0a8877 ;*/
    text-align: center;
    padding: 50px 0 150px 0;
    position: relative;
}

.box_01_btn{
    /*position: absolute;*/
/*    background-color:#fdca41 ;*/
    border-radius: 20px;
    /*bottom: 30px;*/
    /*left: 22%;*/
    transform: translateX(-50%);
    color: #fff;
    padding: 15px 25px;
    /*width: 200px;*/
    width: 100%;
    font-size: 20px;
/*    font-weight: 700;*/
    cursor: pointer;
    background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
    box-shadow: 0 0 1px 0px #ffffff;
/*    border: 3px #fff solid;*/
}

.box_02_btn {
    background-image: unset !important;
    /*left: 78% !important;*/
    /*width: 200px !important;*/
    width: 100% !important;
    background-color: #fdca41 !important;
    color: #FFF !important;
    /*background-image: linear-gradient(to top, #fd9541 0%, #fdca41 100%) !important;*/
}


.box_01_btn { -webkit-animation: btn_auto 2s linear infinite;
                     animation: btn_auto 2s linear infinite;}

@-webkit-keyframes btn_auto {
    0% {
        box-shadow: 0 0 1px 0px #ffffff;
    }
    50%{
        box-shadow: 0 0 15px 0px #ffffff;
    }
    100% {
        box-shadow: 0 0 1 0 #ffffff;
    }
}


.box_bottom{
    position: absolute;
    bottom: -1px;
    width: 100%;
}

.all_title_01{
    text-align: center;
    margin: 30px auto;
}

.all_title_01 h2{
    font-size: 36px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
}

.all_title_01 p{
    font-size: 22px;
    color: #ffffff8a;
    font-weight: 700;
}

.all_title_01 h4{
    font-size: 18px;
    color: #ffffff8a;
    font-weight: 700;
    margin-bottom: 4vh;
}

.all_title_01 h5{
    font-size: 20px;
    color: #fddb41;
    font-weight: 700;
    line-height: 32px;
}

.img_box{
    width: 90%;
    height: 40vh;
    margin: 0 auto;
}

.img_box.style02{
    width: 90%;
    height: 35vh;
}

.img_box.style03{
    width: 90%;
    height: 35vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2vh;
}


.img_box img{
    width: auto!important;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}


.svg_img{
    width: 280px;
    max-width: 95%;
    margin: auto;
    -webkit-animation: img_auto 5s linear infinite;
    animation: img_auto 5s linear infinite;
}

@-webkit-keyframes img_auto {
    0% {
        transform: scale(1);
    }
    20% {
        opacity: .7;
    }
    40%{
        transform: scale(0.97);
    }

    60% {
        opacity: 1;
    }

    80% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}




.box_01.style02 {
    padding: 20px 0 20px 0;
    border-bottom: 1px #ffffff2b solid;
}

.svg_img_02{
    position: absolute;
    width: 120px;
    right: 3%;
    bottom: 5px;
}



/*===============*/

.all_box_02{
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
}

.box_02 {
    width: 100%;
    padding: 30px 20px;
    background-color: #ffffff40;
    border-radius: 20px;
    box-shadow: 0px 4px 0px #ffffff63;
    margin: 10px auto;
}

.box_02 p {
    padding-left: 30px;
    position: relative;
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
}

.box_02 p:after {
    content: "";
    left: 0;
    top: 4px;
    background-color: #f3e89d;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;
}

.box_02 p:nth-last-child(1){
    margin-bottom: 0px;
}

/*===================*/

.box_03{
    margin: 40px auto;
    width: 100%;
}

.box_04{
    margin: 20px auto 40px auto;
    width: 100%;
}

.box_03 h3,.box_04 h3{
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

.ul_01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.ul_01 li {
    width: calc(50% - 10px);
    background-color: #fff8c4;
    border-radius: 20px;
    box-shadow: 0px 3px 0px 1px #c9c397;
    margin: 10px 0;
}

.ul_01 li a{
    display: block;
    font-size: 18px;
    padding: 30px 20px;
    color: #666;
}


.ul_02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.ul_02 li{
    width: 100%;
    background-color: #fff8c4;
    border-radius: 20px;
    box-shadow: 0px 3px 0px 1px #c9c397;
    margin: 5px 0;
}

.ul_02 li a{
    display: block;
    font-size: 18px;
    padding: 20px 100px 20px 20px;
    color: #666;
    position: relative;
}

.ul_02 li a span {
    background-color: #fdca41;
    height: calc(100% - 10px);
    padding: 10px;
    color: #fff;
    font-size: 16px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
    display: flex;
    align-items: center;
}



/*==================*/

.full_box01{
/*    background-color:#0a8877 ;*/
    height: 100vh;
    padding: 10px 0;
}

/*.full_box01 .svg_img{
    max-height: 35vh;
}*/


.select_time_ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    margin: 10vh auto;
}

.select_time_ul li {
    width: calc(50% - 10px);
    border-radius: 20px;
    border: 1px #ffffff5c solid;
    box-shadow: 0 0 20px #ffffff36;
}

.select_time_ul li:nth-child(1){
    background-color:#fff1 ;
}

.select_time_ul li:nth-child(2){
    background-color:#fff1 ;
}

.select_time_ul li a{
    display: block;
    font-size: 18px;
    padding: 30px 20px;
    color: #fff;
    text-align: center;
}

.select_time_ul li a h3 {
    font-size: 90px;
    font-family: 'Poppins', sans-serif;
    line-height: 90px;
}

.select_time_ul li a p {
    font-size: 24px;
    line-height: 30px;
}

/*=========================*/


.full_box02{
/*    background-color:#0a8877 ;*/
    height: 100vh;
    padding: 10px 0;
    position: relative;
}


.full_box02 .all_title_01 h2{
    margin-bottom: 2vh;
}





.time_box{
    text-align: center;
    margin: 2vh auto;
}

.text{
    width: 100%;
    color: #fff;
    font-size: 90px;
    font-family: 'Poppins', sans-serif;
    line-height: 90px;
}

.msg{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #0009;
    display: none;
}

.msg.active{
    display: block;
}


.msg_box{
    position: absolute;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;

}


.msg_box p{
    font-size: 18px;
    margin-bottom: 20px;
}

.msg_box a{
    font-size: 16px;
    display: block;
    background-color: #fea57d;
    color: #fff;
    width: 100px;
    border-radius: 20px;
    padding: 10px 0;
    margin: 0 auto;
}