@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 */
body{background: #f2ccbf;}
header{background:url(../images/2_data.header.jpg)no-repeat;padding-bottom: 19.79%;background-size: cover;}

main{background: #f2ccbf;box-sizing: border-box;padding-top:70px;display: flex;justify-content: center;}

main>div{box-sizing: border-box;text-align: center;}

main>div .head{font-size: 30px;margin-bottom: 45px;}
main>div .head::before{content:'--------------------------';margin-right:10px;}
main>div .head::after{content:'--------------------------';margin-left:10px;}

main>div .sele{width: 90%;margin: 0 auto 20px auto;position: relative;}
main>div .sele::after{content:'\f078';font-family:"Font Awesome 5 Free";font-weight: 900;display: inline-block;z-index: 99;position: absolute;top:calc((100% - 14px)/2);right:15px;}

main>div select{font-size: 30px;border: 0;border-radius: 8px;box-sizing: border-box;padding:15px;color: #333333;width: 100%;}
/*移除箭頭樣式*/
main>div select{appearance:none;-moz-appearance:none;-webkit-appearance:none;position: relative;}

main .dataPage_submit{background: #433733;color: #fff;border: 0;font-size: 30px;border-radius: 10px;padding:15px 55px;margin-top: 40px;cursor: pointer;text-decoration: none;display: inline-block;}
main .dataPage_submit:hover{color: #ffd35a;}
main .dataPage_submit:active{transform: translateY(5px);}

/* 過場動畫 */
.transitionAnim{width: 100%;height: 300px;display: flex;justify-content: center;align-items: center;}
.transitionAnim>span{background: #433733;width: 20px;height: 20px;border-radius: 99em;display: block;margin: 0 20px;}
.transitionAnim>span:nth-child(1){animation: tranAnim 1.5s linear infinite;animation-delay: 0s;animation-fill-mode: both;}
.transitionAnim>span:nth-child(2){animation: tranAnim 1.5s linear infinite;animation-delay: .2s;animation-fill-mode: both;}
.transitionAnim>span:nth-child(3){animation: tranAnim 1.5s linear infinite;animation-delay: .4s;animation-fill-mode: both;}
@keyframes tranAnim {
    0%{opacity: 0;}
    50%{opacity: 1;}
    100%{opacity: 0;}
}



/* other */
@media(max-width:950px){
    main>div .head::before{content:'---------------------';margin-right:10px;}
    main>div .head::after{content:'---------------------';margin-left:10px;}
}

/* table */
@media(max-width:768px){
    main>div .head::before{content:'----------------';margin-right:10px;}
    main>div .head::after{content:'----------------';margin-left:10px;}
}

/* phone */
@media(max-width:600px){
    header{background:url(../images/2_data.header-mobile.jpg)no-repeat;padding-bottom:37.77%;background-size: cover;}
    
    main{padding:40px 0;}
    main>div{width: 90%;}
    main>div .head{display: flex;align-items: center;justify-content: center;width: 100%;}
    main>div .head::before{content:'';display:inline-block;width: 5%;height:2px;background: #000; margin-right:5px;}
    main>div .head::after{content:'';display:inline-block;width: 5%;height:2px;background: #000; margin-left:5px;}
    main>div .sele{width: 80%;}
    main>div select{font-size: 20px;}
    main .dataPage_submit{margin-top:20px;font-size: 24px;font-weight: bold;color: #ffd35a;}
}