@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
html, body { font-size: 16px; height: 100%; }
:root { --main:#E88156; --main-pastel:#eb946f; --main-light:#fdf3ee; --green: #27AE60; --yellow:#FCC65A; --red:#EB4949;
    --white: #FFF; --dark: #323232; --gray:#828282; --dark-gray:#585858; --light-gray:#d5d5d5; --lightest-gray:#F7F7F7; --warm-gray:#A79E9A; --lightest-warm-gray:#edeceb;}
body { position: relative; display: flex; margin: 0; justify-content: space-between; flex-direction: column;background: url('../img/village-bg.svg') bottom center no-repeat, #FFFBF7; background-size: contain; background-attachment: fixed;
     font-family:'Noto Sans TC','Microsoft JhengHei', Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.75; letter-spacing: 1px; color: var(--dark); z-index: 0;}
a{ text-decoration: none;}
p{ font-size: 16px; margin: 0; line-height: 1.75;}
.form-control::placeholder { color: #A4A4A4;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #A4A4A4;}
::-moz-placeholder { /* Firefox 19+ */ color: #A4A4A4;}
:-ms-input-placeholder { /* IE 10+ */ color: #A4A4A4; }
:-moz-placeholder { /* Firefox 18- */ color: #A4A4A4;}

.t-primary{ color: var(--main);}
.t-white{ color: var(--white);}
.t-dark{ color: var(--dark);}
.t-dark-gray{ color: var(--dark-gray);}
.t-gray{ color: var(--gray);}
.t-red{ color: var(--red);}

.btn {
    display: inline-block; padding: 8px 40px; vertical-align: middle; border-radius:8px; -webkit-user-select: none; -moz-user-select: none; user-select: none;
    background-color: transparent; border: 1px solid transparent; font-size:20px; line-height: 1.5; color: var(--dark); text-align: center; text-decoration: none;
}
.btn:focus{ box-shadow: none;  border: 1px solid transparent; background: var(--main);}
.btn:hover{ border: 1px solid transparent;}
.btn-primary { color: var(--white); background-color: var(--main); border-color: var(--main);}
.btn-primary:hover{ background-color: var(--main-pastel);  color: var(--white);}
.btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: var(--warm-gray); border-color: var(--warm-gray); opacity: 1;}
.btn-link{ border: none; background: transparent; text-decoration: none;}
button .btn{ width: 100%;}

header{ display: flex; height: 80px; margin-bottom: 40px; background: var(--main);}
header .logo img{ width: 100%; max-width: 310px; min-height: 61px;}
nav{ display: flex; align-items: center;}
.main{ flex-grow: 1;}
.container{ max-width: 1200px;}

/* cat choice */
.test-title:after{ content: ""; position: absolute; top:0; left: 0; transform: translate(-50%,50%); width: 40px; height: 2px; background: var(--gray);}
.step-title span{ position: relative; display: inline-block; width: auto; margin:40px auto 20px;font-size: 24px; color: var(--dark); font-weight: 700;}
.step-title span:before{ content: ""; position: absolute; left: -35%; top: 20px; width: 55px; height: 1px; background: var(--dark-gray);}
.step-title span:after{ content: ""; position: absolute; right: -35%; top: 20px; width: 55px; height: 1px; background: var(--dark-gray);}
.center-deco{ display: inline-block; }
/* .center-deco:after{ content: ""; position: absolute; right: 50%; bottom: -15px; width: 40px; height: 2px; background: var(--gray); transform: translate(50%,0%);} */
.radio-wrap{ display: inline-block;}
.radio-custom { opacity: 0; position: absolute;}
.radio-custom, .radio-custom-label { display: inline-block; vertical-align: middle; cursor: pointer;}
.radio-custom-label { position: relative; width: 100%;}
.radio-custom + .radio-custom-label:before {
    content: ''; position: absolute; top: -2px; right:0; display: inline-block; width: 48px; height: 48px; padding: 2px;
    background-color:#fae6dd; text-align: center; vertical-align:top; border-radius: 50%;
}
.box-checked .radio-custom-label:before ,.radio-custom:checked + .radio-custom-label:before ,.choice-card:hover .radio-custom-label:before{ content:"\f00c"; background: var(--yellow); font: var(--fa-font-solid); font-size: 32px; color: var(--white); line-height: 1.4; }
.choice-card input[type="radio"]{ -webkit-appearance: none; appearance: none; border-radius: 50%; background-color:#fae6dd; margin: 0; width: 48px; height: 48px;}
.choice-card-wrap,.choice-card .content{ display: flex;}
.choice-card{ width: 100%; padding: 20px 40px; border: 5px solid var(--main-light); box-shadow: 0 10px 8px rgba(178, 78, 37, .15); background: var(--main-light); border-radius: 8px; cursor: pointer;}
.choice-card:hover{ -moz-transform:translateY(0.55em); -webkit-transform:translateY(0.55em); -o-transform:translateY(0.55em); -ms-transform:translateY(0.55em); transform:translateY(0.55em); }
.choice-card-wrap .choice-card:first-child{ margin-right: 20px;}
.box-checked{ background: var(--main); border: 5px solid var(--yellow);}
.box-checked .txt{ color: var(--white);}
.choice-card img{ float: left; vertical-align: top; max-width: 180px; margin-right: 5%;}
.choice-card .name{ display: inline-block; border-radius: 8px; font-size: 20px; color: var(--main); background: var(--white); padding: 4px 15px;}
.choice-card .txt{ margin: 15px 0; font-size: 24px; font-weight: bold; line-height: 1.3;}
.choice-card .infor{ display: flex; justify-content: space-between; padding: 20px 0; background: var(--white); border-radius: 8px;}
.choice-card .infor p{ font-size: 18px;}
.choice-card .infor > div{ display: inline-block; width: 100%; padding: 0 10px; text-align: center;}
.choice-card .infor > div:first-child{ border-right:1px solid var(--light-gray) ;}

/* survey */
.card{ width: 100%; flex-direction: row; padding: 40px; background: var(--white); border: none; box-shadow: 0 5px 20px rgb(151 151 151 / 25%); border-radius: 8px;}
.resend{ font-size: 16px; color: var(--gray); }
.class-type .form-check{ margin-top: 20px; margin-left: 0; margin-bottom: 0; padding-right: 6%; line-height: 1.7;}
.register-tip{ font-size: 14px; line-height: 1.5;}
.infor-card{ display: flex; justify-content: space-between; max-width: 750px; margin: 0 auto 0;}
.infor-card form { display: inline-block; width: 100%;}
.input-group{ display: flex;}
.input-group .btn{ font-size: 16px; line-height: 1.875; padding: 8px 30px;}
.infor-card .character{ max-width: 240px; margin-right: 40px; align-self: center;}
.form-control,.form-select{ padding: 12px; border: none; outline: none; background:var(--lightest-gray); border-radius: 8px; font-size: 16px;}
.form-check-label{ margin-left: 15px; font-size: 16px; color: var(--dark); line-height: 1; vertical-align: middle;}
.form-check .form-check-input{ float: left; width: 18px; height: 18px; border: 1px solid var(--main); border-radius: 3px;}
.form-check-input:checked { position: relative; background-color: transparent; border-color:var(--main); color: var(--main);}
.form-check-input:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20' xml:space='preserve'%3E%3Cpath style='fill:none;stroke:%23e88156;stroke-width:3;stroke-linecap:round;stroke-linejoin:round' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-left-radius:8px; border-bottom-left-radius: 8px;}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-right: -1px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
.input-group .btn { margin-left: 10px;}
.form-select{ padding: 14px; border-color: #F5F5F5; outline: none; background-color: #F5F5F5; background-image: url("data:image/svg+xml,%3Csvg width='16' height='8' viewBox='0 0 16 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.378174 0L7.87817 7.5L15.3782 0H0.378174Z' fill='%23E88156'/%3E%3C/svg%3E%0A"); background-position: right 0.9375rem center; background-repeat: no-repeat; border-radius: 8px; font-size: 1rem; line-height: 1;}
.form-select option{ color: var(--dark);}
.study-need h2{ font-size: 20px;}
.study-need .form-check-label { margin-left: 25px; vertical-align: text-bottom;}
.study-need .form-check-input{ margin-top: 9px;}

/* test */
.exam-card { display: flex; flex-direction: column; padding:50px 70px;}
.exam-card .progress{ width: 100%; border-radius: 10px;}
.exam-card .progress-bar{ background: var(--main); border-radius: 10px;}
.progress-wrap p{ font-size: 14px; color: var(--main); white-space: nowrap;}
.question-content{ font-size: 18px; font-weight: 700; color: var(--dark);}
.question-list{ list-style-type: none; padding: 0;}
.question-list li{ padding: 15px; margin-top:2rem; background:var(--lightest-gray); border-radius: 8px; cursor: pointer;}
.question-list li.active{ background: rgba(232, 129, 86, 0.2); color: var(--main);}
.question-list p{ display: inline; margin-left: 10px;}
.bullets{ display: inline-block; width: 36px; height: 36px; background: var(--main); border-radius: 50%; font-size: 18px; color: var(--white); line-height: 36px; text-align: center;}
.test-warp { width: 100%;}
.test-warp .talk-wrap{ display: flex; justify-content: center; align-items: center;}
.test-warp .talk-wrap .txt{ position: relative; padding: 20px; border-radius: 8px; background: var(--white); }
.test-warp .talk-wrap .txt:before{ content: ""; position: absolute; top: 0; bottom: 0; left: -20px; width: 0; height: 0; transform: translate(0%,100%);
    border-style: solid; border-width: 15px 26px 15px 0; border-color: transparent var(--white) transparent transparent;}
.test-warp .talk-wrap .txt p{ width: auto;}

.fishbone-progress{ display: flex; align-items: baseline; position: relative; max-width: 435px; margin: 0 auto 0;}
.fishbone-progress > div{ display: inline-block;}
.fishbone-progress .count-down { width: 100%; font-size: 13px; color: var(--main); white-space: nowrap;}
.fishbone{ position: absolute; top: 5px; left: 35px; list-style-type: none;}
.fishbone li{ position: relative; display: inline-block; width: 20px; height: 20px;}
.fishbone li:nth-child(odd){ width: 0; height: 0; margin-right: -16px;
    border-style: solid; border-width: 0 0 20px 16px; border-color: transparent transparent var(--main-pastel) transparent;}
.fishbone li:nth-child(even){ width: 0; height: 0; top: 33px;
    border-style: solid; border-width: 20px 16px 0 0; border-color: var(--main-pastel) transparent transparent transparent;}
.fishbone li.remove-bone:nth-child(odd){ border-color: transparent transparent var(--lightest-warm-gray) transparent;}
.fishbone li.remove-bone:nth-child(even){ border-color: var(--lightest-warm-gray) transparent transparent transparent;}

/* score */
.score-card{ max-width: 880px; flex-direction:column; margin: 0 auto 0; padding: 20px 30px 40px; border: solid 10px var(--main-pastel); border-radius: 15px;}
.card-deco{ position: relative; width: 100%; z-index: 0;}
.card-deco > div{ z-index: 1; text-align: center;}
.card-deco:before{ content: ""; position: absolute; top: 35px; width: 100%; height: 1px; background: #f8d9cc; text-align: center; z-index: -1;}
.card-deco:after{ content: ""; position: absolute; top: 40px; width: 100%; height: 1px; background: #f8d9cc; text-align: center; z-index: -1;}
.card-deco i{ background: var(--white); font-size: 64px; color:#f8d9cc; z-index: 1; }

.circle-bar{  position: relative; display: inline-block; } 
.circle-bar .chart p{ width: 100%; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; line-height: 1; color: var(--gray);}
.circle-bar .chart .percentage{ display: block; font-size: 72px; color: var(--main); font-weight: 700; line-height: 1;}
.score-card .content { justify-content: space-between; align-items: self-start; margin: 0 20px;}
.score-card .content > div:first-child{ max-width: 500px;}
.score-card .content p{ font-size: 15px;}
.score-card .character img{ max-width:250px;}
.score-card .txt{ margin-left: 25px;}
.score-card .txt p { margin-bottom: 15px; padding-left: 15px; border-left: 5px solid var(--dark); font-size: 30px; font-weight: bold; line-height: 1;}
.score-card .txt p span{ margin-top: 10px; font-size: 20px;}
.score-card .more{ padding-bottom: 15px; font-size: 14px; color: var(--dark);}
.score-card .more:hover{ color: var(--gray);}
.score-card .more i{ vertical-align: sub; font-size: 24px; color: var(--green);}

.score-list { display: flex; flex-direction: column; list-style-type: none; padding: 0; border-top: 1px solid var(--lightest-warm-gray);}
.score-list .item{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;
     padding: 15px 25px; background: var(--lightest-gray); margin-top: 15px; border-radius: 8px;}
.score-list .item ul{ padding-right: 0; list-style-type: none; font-size: 14px; }
.score-list .item ul i{ color: var(--warm-gray);} 
.item-detail{ display: flex; align-items: center;}
.item-detail > p{ min-width: 140px; padding: 5px 10px; background: var(--main);
     font-size: 18px; font-weight: bold; color: var(--white); text-align: center;}
.item-score{ max-width: 175px; width: 100%; border-left: 1px solid var(--light-gray); padding-left: 15px;}
.item-score p{ display: inline-block; float: right; margin-left: 5px; color: var(--main); line-height: 1; text-align: left;}
.item-score > span:first-child{ font-size: 14px; color: var(--gray); line-height: 3; vertical-align: top;} 
.item-score .percent{ font-size: 48px; color: var(--main); font-weight: bold;} 

.score-wrap .message{ flex-direction: column; align-items: center;}
.qr-box{ display: flex; align-items: center; padding: 15px 20px; background: var(--main-light); border-radius: 8px;}
.qr-box .qr-code{ border: 8px solid var(--white);}
.qr-box p{ text-align: left; color: var(--main); font-weight: bold; line-height: 1.4;}

/* answers list */
.nav{ padding: 0;}
.nav-pills .nav-link{ background: none; color: var(--light-gray); border-bottom: 3px solid var(--light-gray); border-radius: 0; font-size: 15px; font-weight: 600;}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background: none; border-bottom: 3px solid var(--main); color: var(--main); border-radius: 0;}
.answers-table { width: 100%; overflow-x: auto;}
.tab-content .answers-table table{width: 100%; min-width: 640px;}
.answers-table caption{ text-align: center;}
.answers-table .s-title{ width: 15%; font-size: 15px; color: var(--dark);} 
.answers-table tbody tr:first-child{ background: var(--main-light);}
.answers-table table td{ padding: 10px;text-align: center;}
.answers-table i{ color:var(--warm-gray)}
.student-answers{ color: var(--green); }
.ans-modal .modal-header{ border-bottom: none;}
.ans-modal .btn-close{ margin: 10px 10px 5px 0; align-self: flex-end;}
.ans-modal .modal-body { padding:0 2rem 2rem;}
.ans-modal .que{ display: flex; padding: 10px 15px; margin-bottom: 10px; background: var(--main-light); font-size: 18px; }
.ans-modal .que p{ margin-left: 5px;}
.ans-modal ul{ margin: 0; margin-left: 6px; list-style: none; line-height: 2;}
.ans-modal ul i{ margin-right: 3px; margin-left: -3px;}
.ans-modal .wrong-ans,.ans-modal .wrong-ans i{  margin-left: -12px; color: var(--red);}
.ans-modal .right-ans,.ans-modal .right-ans i{ margin-left: -12px; color: var(--green);}
.ans-detail i:hover{ color: var(--main);}
.ans-modal .txt{ margin: 20px 0 0; padding: 15px; background: var(--lightest-gray); }
.ans-modal .txt i{ margin-right: 5px; color: var(--gray)}
.modal-open { padding-right: 0!important; overflow-y: scroll!important;}

/* footer */
footer{  width: 100%; padding: 20px; margin-top: 60px; background: var(--dark); color: var(--white); text-align: left;}
.cpyright-text{ font-size: 13px;}
.social-icon{ width: 30px;}
.social-icon img{ max-width: 30px; width: 100%;}

/* rwd */
@media (min-width: 576px){
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
}
@media (max-width: 1199.98px) { 
    .choice-card{ padding: 20px;}
    .choice-card img { max-width: 170px;}
    .choice-card .infor span{ font-size: 14px;}
}
@media (max-width: 991.98px) { 
    .choice-card{ padding: 15px;}
    .choice-card img { max-width: 130px;}
    .choice-card .infor{ padding: 15px 0;}
    .choice-card .txt{ font-size: 20px;}
    
 }
 @media (max-width: 874px) { 
    .choice-card-wrap .choice-card:first-child{ margin-right: 0px;}
    .choice-card-wrap{ flex-direction: column;}    
    .choice-card { justify-content: center; margin-bottom: 20px;}
    .choice-card img { max-width: 160px;}
    .score-card .character img { max-width: 190px; }
 }

@media (max-width: 767.98px) { 
    body { background: url('../img/village-bg-m.svg') bottom center no-repeat,#FFFBF7; background-attachment: fixed;}
    .infor-card .character,.test-warp .talk-wrap{ display: none;}
    .fishbone-progress { display: none;}
    .score-card .content{ flex-direction: column;}
    .score-card .content > div:first-child{ max-width: 100%;}
    .score-card .character{ display: none;}
    .item-score{ width: 100%; padding-left: 0; text-align: left; border-left:none;}
    .score-list .item{ flex-direction: column; }
    .score-list .item ul{ padding: 0; margin: 20px 0; padding-left: 0;}
    .item-detail { flex-direction: column; align-self: stretch;}
    .item-detail > p{ min-width: 100%;}
    .item-score { text-align: center;}
    .item-score p{ float: none; }
}

@media (max-width: 575.98px) {
    .class-type .form-check { padding-right: 10%;}
    .form-control{ font-size: 15px;}
    .exam-card{ padding: 30px;}
    .score-card .txt{ margin-top: 0; margin-left: 0; text-align: center;}
    .score-card .txt p{ padding-left:0; border: none;}
    .ans-modal .txt{ margin-top: 20px; text-align: left;}
    .cpyright-text{ font-size: 12px;}
}

@media (max-width: 480px) {
    .score-card{ padding: 20px 20px 40px;}
    .choice-card img { float: none; max-width: 120px; margin-bottom: 20px;}
}