﻿body { font-family: 微軟正黑體; font-size: 16px; line-height: 1.6; }
@media (min-width: 1200px) {
    .container { width: 970px; }
}
.section > .container > p { padding: 0 10px 0 1.6em; }
.section > .container > h2 { margin-top: 50px; margin-bottom: 25px; border-bottom: 2px solid #888; display: flex; justify-content: space-between; font-size: 1.5em; }
.section > .container > h2 > div:nth-child(1) { 
    min-width: 50%;
    height: 0;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #888;
    padding: 0 1.1em; 
    color: #fff;
    font-weight: bold;
    line-height: 40px;
}
.section > .container > h2 > div:nth-child(2) { display: none; text-align: right; padding: 0 0.8em; }
.section > .container > h2 > div:nth-child(2) > img { max-height: 40px; }
@media (max-width: 767px) {
    .section > .container > h2 > div:nth-child(2) { display: none; }
}
@media (max-width: 360px) {
    .section > .container > h2 { font-size: 1.3em; }
}

/*---------------------header-------------------------*/
#head { display: flex; align-items: center; height: 100%; }
#head .header { position: relative; }
#head .header > .bg > img { max-width: 100%; }
#head .header > ul:before { content: "快速選單"; display: block; text-align: center; border-bottom: 1px solid #888; margin-bottom: 0.5em; font-size: 1.1em; font-weight: bold; line-height: 1.9; }
#head .header > ul { position: absolute; left: calc(50% - 8em); padding: 1em 1.5em; background: #fff; box-shadow: 1px 1px 8px #999; border-radius: 12px; list-style: none; }
#head .header > ul > li { color: #333; }
#head .header > ul > li:hover { color: #B71C22; cursor: pointer; }
#head .header > p { position: absolute; left: calc(50% - 7.5em); color: #fff; }
@media (min-width: 769px) {
    #head .header { border: 3px solid #ccc; }
    #head .header > ul { top: 53%; font-size: 1.4em; }
    #head .header > p { bottom: 1%; font-size: 1.1em; }
}
@media (max-width: 768px) {
    #head .header > ul { top: 51.5%; font-size: 1.4em; }
    #head .header > p { bottom: 1%; font-size: 1.1em; }
}
@media (max-width: 767px) {
    #head > .container { padding: 0; }
    #head .header > ul { top: 41%; font-size: 1.1em; line-height: 2; }
    #head .header > p { bottom: 10%; font-size: 1em; }
}
@media (max-width: 360px) {
    #head .header > ul { top: 41%; font-size: 1em; }
    #head .header > p { bottom: 9%; font-size: 1em; }
}

/*---------------------sec01--------------------------*/
#sec01 .frame { border: 3px solid #ccc; border-radius: 25px; padding: 0 35px 20px; }
#sec01 .frame > h3 { position: relative; font-size: 1.3em; }
#sec01 .frame > h3 > hr { position: relative; top: 40px; z-index: 1; border-bottom: 4px dotted #999; }
#sec01 .frame > h3 > div { position: relative; z-index: 2; width: 214px; padding: 6px; border-radius: 10px; background: #c0504d; color: #fff; text-align: center; margin: 0 auto 20px; }
#sec01 .frame > p { text-indent: 2em; }
/*表格*/
#sec01 .table-striped > thead > tr > th { text-align: center; border: none; background: #e5b8b7; color: #632423; }
#sec01 .table-striped > tbody > tr > td { color: #333; }
#sec01 .table-striped > tbody > tr > td > a > img { box-shadow: 1px 2px 3px #999; }
@media (min-width: 768px) {
    #sec01 .table-striped { border-top: 1px solid #c0504d; border-bottom: 1px solid #c0504d; }
    #sec01 .table-striped > tbody > tr > td { vertical-align: middle; }
    #sec01 .table-striped > tbody > tr > td:nth-child(1) { text-align: center; min-width: 6.4em; }
    #sec01 .table-striped > tbody > tr > td:nth-last-child(-n+2) { text-align: center; min-width: 5.2em; }
    #sec01 .table-striped > tbody > tr:nth-child(even) > td { background: #f2dbdb; }
}
@media (max-width: 767px) {
    #sec01 .table-striped > thead { display: none; }
    #sec01 .table-striped > tbody > tr { display: block; background: #fff; margin-bottom: 20px; }
    #sec01 .table-striped > tbody > tr > td { display: flex; width: 100%; }
    #sec01 .table-striped > tbody > tr > td:before { font-weight: bold; }
    #sec01 .table-striped > tbody > tr > td:before { content: attr(data-label); min-width: 5.2em; }
    #sec01 .table-striped > tbody > tr > td:nth-child(1) { background: #e5b8b7; color: #632423; border-top: 1px solid #c0504d; border-bottom: 1px solid #c0504d; }
}
@media (max-width: 360px) {
    #sec01 .frame { padding: 0 25px; }
    #sec01 .frame > h3 { font-size: 1.2em; }
}

/*---------------------sec02--------------------------*/
#sec02 h3 { font-size: 1.5em; font-weight: bold; color: #B71C22; margin-top: 45px; margin-bottom: 20px; }
#sec02 .an_result > div.an_pic { text-align: center; }
#sec02 .an_result > div.an_pic > img { width: 360px; max-width: 100%; }
#sec02 .an_result > div.an_txt > div { display: block; width: 485px; max-width: 100%; margin: 0 auto; }
#sec02 .an_result > div.an_txt > div > .tit { background: #888; color: #fff; border-radius: 10px; width: 220px; padding: 5px; text-align: center; margin: 0 auto; position: relative; top: 110px; font-size: 1.1em; font-weight: bold; }
#sec02 .an_result > div.an_txt > div > .des { background: #fff; border: 3px solid #888; border-radius: 18px; padding: 35px; }
@media (max-width: 480px) {
    #sec02 .an_result > div.an_txt > div > .tit { top: 100px; }
    #sec02 .an_result > div.an_txt > div > .des { padding: 30px 25px 25px; }
}
@media (max-width: 360px) {
    #sec02 h3 { font-size: 1.3em; }
}

/*羊羊_公用css*/
#sec02 .h4 { font-size: 1.1em; line-height: 1.6; margin: 1.3em 0; }
#sec02 .frame2 { box-shadow: 0 0 8px #999; border-radius: 10px; padding: 15px 15px 5px; }
#sec02 .frame2 > ol { font-size: 1.3em; font-weight: bold; }
#sec02 .frame2 > ol > li:nth-child(-n+3)      { color: #00306C; }
#sec02 .frame2 > ol > li:nth-last-child(-n+2) { color: #613E00; }
#sec02 .frame2 > ol > li > img { width: 26px; margin: 0 5px; }
#sec02 .situ_high, 
#sec02 .situ_medium,
#sec02 .situ_low    { display: flex; align-items: center; }
#sec02 .situ_high   > .pic, 
#sec02 .situ_medium > .pic, 
#sec02 .situ_low    > .pic { position: relative; }

/*Q:什麼是作答診斷分析*/
@media (min-width: 993px) {
    #sec02 .situ .situ_high, 
    #sec02 .situ .situ_low { justify-content: flex-end; margin: 45px 0 30px; }
    #sec02 .situ .situ_low { flex-direction: row-reverse; }
    #sec02 .situ .situ_high > .pic { right: -15px; }
    #sec02 .situ .situ_low  > .pic { left: -25px; }
}
@media (max-width: 992px) {
    #sec02 .situ .situ_high, 
    #sec02 .situ .situ_low { justify-content: center; margin: 0 0 35px; }
    #sec02 .situ .situ_high > .pic, 
    #sec02 .situ .situ_low  > .pic { right: -15px; }
    #sec02 .situ .situ_high > .pic > img, 
    #sec02 .situ .situ_low  > .pic > img { max-width: 100%; }
    #sec02 .situ .situ_high > .frame2, 
    #sec02 .situ .situ_low  > .frame2 { padding: 15px 10px 5px; min-width: 11.2em; }
}

/*異常原因*/
#sec02 .situ_reason > img { margin: 0 auto; }

/*注意係數環狀圖解*/
#sec02 .jiugo_exp { font-size: 1.1em; }
#sec02 .jiugo_exp .green  { color: green; }
#sec02 .jiugo_exp .yellow { color: orange; }
#sec02 .jiugo_pic { text-align: center; }
#sec02 .jiugo_pic > div { margin: 0 auto; display: inline-block; position: relative; }
#sec02 .jiugo_pic > div > .jiugo { width: 71%; height: 86%; position: absolute; top: 12%; right: 5.5%; display: flex; flex-wrap: wrap; }
#sec02 .jiugo_pic > div > .jiugo > a { width: 50%; height: 33.3%; text-indent: 100%; white-space: nowrap; overflow: hidden; }
#sec02 .jiugo_pic > p { padding-left: 3em; font-size: 1.2em; font-weight: bold; }

/*-----------------sec03/sec04/sec05---------------------*/
/*雷達圖*/
.radar { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.radar > .level > ul { list-style: none; padding-left: 0; }
.radar > .level > ul > li > img { width: 35px; margin: 0 5px; }
.radar > .perf  > ul { list-style: none; padding-left: 0; }
.radar > .perf  > ul > li { margin: 10px 0; }
.radar > .perf  > ul > li > span { display: inline-block; width: 20px; height: 20px; margin: 0 8px; vertical-align: text-top; }
.radar > .perf  > ul > li:nth-child(1) > span { background: #f2dcdb; border: 3px solid #c0504d; }
.radar > .perf  > ul > li:nth-child(2) > span { background: #b9cde5; border: 3px dotted #4f81bd; }
.radar-note { text-align: center; font-weight: bold; }
@media (max-width: 992px) {
    .radar { flex-direction: column; }
    .radar > .level > ul > li, 
    .radar > .perf  > ul > li { float: left; display: block; margin: 0 6px; }
}
@media (min-width: 768px) {
    .radar-note { font-size: 1.2em; }
}
/*分析及建議*/
.suggest > h3 { font-weight: bold; margin-bottom: 0; }
.suggest > h3 > img { width: 40px; height: 40px; margin: 0 5px; vertical-align: text-bottom; }
.suggest > .row > div > h4 { background: #e5b8b7; color: #632423; border-top: 1px solid #c0504d; border-bottom: 1px solid #c0504d; padding: 10px; margin-top: 20px; }
.suggest > .row > div > p  { padding: 5px 10px 0; }
.suggest > .row > div > img { margin: 0 auto; }
@media (max-width: 360px) {
    .suggest > h3 { font-size: 1.3em; }
}

/*---------------------footer-------------------------*/
footer { padding: 20px 0; background: #000; color: #fff; font-size: 0.9em; }
footer > div { display: flex; align-items: center; }
footer > div > div:nth-child(1) { width: 36%; text-align: right; }
footer > div > div:nth-child(1) > a > img { width: 100%; max-width: 140px; }
footer > div > div:nth-child(2) { width: calc(64% - 15px); margin-left: 15px; }

/*----------------------------------------------------*/

/*回到頂端*/
.back-to-top { cursor: pointer; bottom: 20px; display:none; position: fixed; }
.back-to-top > i { font-size: 20px; }
@media (min-width: 1201px) {
    .back-to-top { right: calc(50% - 585px); }
}
@media (max-width: 1200px) {
    .back-to-top { right: calc(50% - 485px); }
}
@media (max-width: 992px) {
    .back-to-top { right: 20px; }
}
