@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:70px calc((100% - 1024px)/2);text-align: center;}

.progressBar{width: 100%;margin-bottom: 20px;}
.progressBar p{text-align: left;margin-bottom:5px;font-size: 24px;color: #433733;}
.progress{overflow: hidden;height:20px;background: #fff;border-radius: 50px;position: relative;}
.progress span{height: 100%;width:0%;transition: all .5s;background: #433733;position: absolute;top: 0;left:0;}

.questionList{width: 100%;text-align: left;}

.question{display: none;}
.question .topic{background: #433733;color: #fff;font-size:30px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;box-sizing: border-box;padding: 20px 25px;margin-bottom:50px;}
.openQuestion{display: block;}

.ans{margin-bottom: 15px;display:inline-flex;align-items: center;position: relative;}
.ans input{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;margin: 0;}
.ans label{font-size: 30px;color: #333333;}

.ans label i{position: relative;font-size: 24px;margin-right: 5px;}
.ans label i::before{content:'\f111';font-family:"Font Awesome 5 Free";display: inline-block;font-weight:400;line-height: 1;}
.ans .clickInput i::after{content:'\f111';display: inline-block;font-family:'Font Awesome 5 Free';font-size:16px;font-weight: 900;position: absolute;top:9px;left:4px;}

main .NextQuestion{background: #433733;color: #fff;border: 0;font-size: 30px;border-radius: 10px;padding:10px 50px;margin-top: 40px;cursor: pointer;text-decoration: none;display: inline-block;}
main .NextQuestion:hover{color: #ffd35a;}
main .NextQuestion: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:1024px){
    main{padding:60px 6%;}
    .question{margin-bottom: 20px;}
    .question .topic{font-size: 26px;padding: 20px 2%;margin-bottom:20px;}
    .ans label{font-size: 26px;}
}

/* table */
@media(max-width:768px){
    main {padding: 60px 3%;}
    .question .topic{padding: 20px 2%;font-size:23px;}
    .ans label{font-size: 22px;}
    .ans label i{font-size: 20px;}
    .ans label i::before{content:'\f111';font-family:"Font Awesome 5 Free";display: inline-block;font-weight:400;line-height: 1;}
    .ans .clickInput i::after{content:'\f111';display: inline-block;font-family:'Font Awesome 5 Free';font-size:14px;font-weight: 900;position: absolute;top:8px;left:3px;}
}

/* phone */
@media(max-width:600px){
    header{background: url(../images/3_question.header-mobile.jpg)no-repeat;padding-bottom: 37.77%;background-size: cover;}
    main {padding:40px 3%;}
    .question .topic{font-size:6vw;border-radius:5px;font-weight: bold;padding:15px;line-height: 1.5;}
    .ans label{text-indent:-12px;margin-left:30px;line-height: 1.3;font-size:5vw;display: flex;align-items: center;}
    .ans label i{font-size: 5vw;margin-right: 0;}

    .ans .clickInput i::before{content:'\f058';display: inline-block;font-family:'Font Awesome 5 Free';font-size:5vw;font-weight:400;}
    .ans .clickInput i::after{content:'';display:none;}
    main .NextQuestion{margin-top:0;font-size:5vw;font-weight: bold;color: #ffd35a;}
    
}