body { font-family: 微軟正黑體; font-size: 1.1rem; }
.container > p { padding: 0 20px; text-align: justify; font-size: 1.1em; color: #333; }


/*header*/
.header { text-align: center; background: #99D1FF; }
.header > .container { position: relative;  }
.header > .container > div > img { max-width: 100%; }
.header > .container > .logo { position: absolute; left: 1.5%; top: 1%; }
.header > .container > .logo > img { max-height: 30px; }
@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
    .hidden-lg { display: none !important; }
}


/*menu*/
#sec0 { background: #363433; padding: 15px 0; }
#sec0 > .container > .menu ul { list-style: none; margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; padding-left: 0; }
#sec0 > .container > .menu ul > li { flex: 0 0 auto; cursor: pointer; padding: 0 25px; margin: 10px 0; line-height: 1.5; font-size: 1.2em; font-weight: bold; color: #fff; position: relative; }
#sec0 > .container > .menu ul > li:hover { color: #197ebd; }
#sec0 > .container > .menu ul > li > div:nth-child(1) { text-align: left; text-indent: -2.4em; margin-left: 2.4em; margin-bottom: 10px; }
#sec0 > .container > .menu ul > li > div:nth-child(2) { text-align: center; }
@media (min-width: 992px) {
    #sec0 > .container > .menu ul > li { width: 20%; }
    #sec0 > .container > .menu ul > li:nth-child(-n+4)::after { content: ""; width: 3px; height: 130px; display: inline-block; position: absolute; right: 0; top: calc(50% - 60px); background: #fff; }
}
@media (min-width: 768px) and (max-width: 991px) {
    #sec0 > .container > .menu ul > li { width: 50%; padding: 0 15px 0 25px; display: flex; }
    #sec0 > .container > .menu ul > li:nth-child(odd)::after { content: ""; width: 3px; height: 60px; display: inline-block; position: absolute; right: 0; top: calc(50% - 30px); background: #fff; }
}
@media (min-width: 461px) and (max-width: 767px) {
    #sec0 > .container > .menu ul > li {  width: 50%; }
    #sec0 > .container > .menu ul > li:nth-child(odd)::after { content: ""; width: 3px; height: 90px; display: inline-block; position: absolute; right: 0; top: calc(50% - 45px); background: #fff; }
}
@media (max-width: 460px) {
    #sec0 > .container > .menu ul > li { width: 100%; display: flex; }
    #sec0 > .container > .menu ul > li:nth-child(-n+4) { border-bottom: 1px solid #fff; }
}
@media (max-width: 400px) {
    #sec0 > .container > .menu ul > li { padding: 0; }
}

/*藍背景配色*/
.bg1 { background: url(../img/bg1.jpg); }
.bg1 strong { color: #ea5455; }
.bg1 strong.blue { color: #07689f; }
.bg1 h2 { margin-bottom: 20px; }
.bg1 h2 > div:nth-child(1) { 
    width: 90px; height: 85px;
    background: url(../img/Q-bg1.png) no-repeat; 
    background-size: cover;
    margin-right: 5px; 
    text-align: center;
    line-height: 85px;
    color: #2d4059;
    font-family: Arial;
}
.bg1 h2 > div:nth-child(2) { padding-top: 5px; color: #2d4059; }
.bg1 h2 > div:nth-child(2) > span { background: #e5f4ff; border: 4px dashed #3590c9; border-radius: 15px; padding: 10px 25px; display: inline-block; }
.bg1 h2 > div:nth-child(2) > span:hover { box-shadow: 2px 4px 8px #888; position: relative; top: -2px; }
@media (min-width: 576px) {
    .bg1 h2 { display: flex; }
    .bg1 h2 > div:nth-child(2) { width: calc(100% - 90px); }
}
.bg1 h3 { text-align: center; font-weight: bold; margin: 2rem 0; }
.bg1 h3 > span { border-bottom: 4px solid #187ebe; color: #187ebe; padding: 3px 18px; display: inline-block; }

/*白背景配色*/
.bg2 { background: url(../img/bg2.jpg); }
.bg2 h2 { margin-bottom: 20px; }
.bg2 h2 > div:nth-child(1) { 
    width: 90px; height: 85px; 
    background: url(../img/Q-bg1.png) no-repeat; 
    background-size: cover;
    margin-right: 5px; 
    text-align: center;
    line-height: 85px;
    color: #2d4059;
    font-family: Arial;
}
.bg2 h2 > div:nth-child(2) { padding-top: 5px; }
.bg2 h2 > div:nth-child(2) > span { background: #e5f4ff; border: 4px dashed #3590c9; border-radius: 15px; padding: 10px 25px; display: inline-block; }
.bg2 h2 > div:nth-child(2) > span:hover { box-shadow: 2px 4px 8px #888; position: relative; top: -2px; }
@media (min-width: 576px) {
    .bg2 h2 { display: flex; }
    .bg2 h2 > div:nth-child(2) { width: calc(100% - 90px); }
}


/*圓角框*/
.roundframe { border-radius: 40px; padding: 0 30px 5px; margin-top: 70px; }
.roundframe > h3 { text-align: center; }
.roundframe > h3 > span { color: #fff; border-radius: 40px; padding: 12px 25px 12px 30px; display: inline-block; position: relative; top: -20px; }
.roundframe > h3 > span > i { font-size: 42px; margin-right: 15px; vertical-align: text-bottom; }
.roundframe > h4 { text-align: center; font-weight: bold; margin-bottom: 20px; }

/*配色1-紅*/
.RF1 { background: #fff0f0; box-shadow: 0 0 12px #888; }
.RF1 > h3 > span { background: #ea5455; }
.RF1 > h4 { color: #ea5455; }
.RF1 strong { color: #ea5455; }
.RF1 strong.blue { color: #07689f; }

/*配色2-藍*/
.RF2 { background: #e5f4ff; box-shadow: 0 0 12px #888; }
.RF2 > h3 > span { background: #07689f; }
.RF2 > h4 { color: #07689f; }
.RF2 strong { color: #ea5455; }
.RF2 strong.blue { color: #07689f; }

/*表格*/
.table th, 
.table td { padding: 5px; text-align: center; vertical-align: middle; font-size: 0.95rem; line-height: 1.5; }
.table td { background: #fff; }

/*---------------------sec01--------------------------*/

#chart1 { display: flex; flex-wrap: wrap; justify-content: space-around; }
#chart1 > div > h5 { background: #666; color: #fff; font-weight: bold; text-align: center; padding: 5px; margin-bottom: 0; }
#chart1 > div > img { max-width: 100%; }
#chart1 > div:nth-child(-n+3) { width: 30%; text-align: center; }
#chart1 > div:nth-child(3) { position: relative; }
#chart1 > div:nth-child(3) > div {
    border: 5px solid red;
    border-radius: 12px;
    position: absolute;
    width: 86%;
    height: 14.5%;
    left: 7%;
    bottom: 1%;
}
#chart1 > div:nth-child(3) > .arrow { position: absolute; left: 44%; bottom: -11%; }
#chart1 > div:nth-child(4) { width: 100%; text-align: right; margin-top: 55px; margin-bottom: 55px; }
#chart1 > div:nth-child(4) > span { display: inline-block; background: #ea5455; color: #fff; padding: 10px 15px; box-shadow: 2px 2px 6px #999; font-size: 1.1em; font-weight: bold; line-height: 1.5; }
#chart1 > div:nth-child(4) > span > strong { color: yellow; }
@media (max-width: 1199px) {
    #chart1 > div:nth-child(3) > i { font-size: 70px; bottom: -13%; }
}
@media (max-width: 991px) {
    #chart1 > div:nth-child(3) > i { font-size: 60px; bottom: -15%; }
    #chart1 > div:nth-child(4) { margin-top: 40px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    #chart1 > div:nth-child(3) > .arrow { width: 13.5%; }
}
@media (max-width: 767px) {
    #chart1 > div:nth-child(-n+3) { width: 90%; background: #ececec; margin-bottom: 30px; }
    #chart1 > div:nth-child(3) > i { font-size: 88px; bottom: -14.5%; }
    #chart1 > div:nth-child(3) > .arrow { height: 14.2%; }
    #chart1 > div:nth-child(4) { text-align: center; margin-top: 30px; }
}


#chart2 > div:nth-child(1) { position: relative; }
#chart2 > div:nth-child(1) > .fm {
    border: 5px solid red;
    border-radius: 12px;
    position: absolute;
    width: 72%;
    left: 21%;
    z-index: 3;
}
#chart2 > div:nth-child(1) > .pic { max-width: 100%; border: 8px solid #fff; box-shadow: 1px 1px 8px #aaa; margin-bottom: 30px; }
#chart2 > div:nth-child(1) > .arrow { position: absolute; left: 93%; bottom: 16.5%; transform: rotate(-90deg); z-index: 3; }
#chart2 > div:nth-child(1) > .pa { padding: 10px 15px; font-size: 1.1em; font-weight: bold; line-height: 1.5; text-align: center; background: #ea5455; color: #fff; box-shadow: 2px 2px 6px #999; z-index: 2; }
#chart2 > div:nth-child(1) > .ph { color: #555; font-weight: bold; line-height: 1.5; z-index: 2; }
#chart2 > div:nth-child(1) > .ph > i { vertical-align: text-top; }
#chart2 > div:nth-child(2) > table { width: 100%; z-index: 1; margin-bottom: 1rem; }
#chart2 > div:nth-child(2) > table tr th, 
#chart2 > div:nth-child(2) > table tr td { text-align: center; padding: 4px 5px; border: 1px solid #dee2e6; }
#chart2 > div:nth-child(2) > table tr th { background: #666; color: #fff; }
#chart2 > div:nth-child(2) > table tr th:nth-child(2) { min-width: 5em; }
/*#chart2 > div:nth-child(2) > table tr:nth-child(n+2) td:nth-child(1) { padding: 8px 5px; }*/
#chart2 > div:nth-child(2) > table tr td { background: #fff; color: #333; }
#chart2 > div:nth-child(2) > table tr td > img { height: 70px; }
@media (min-width: 992px) {
    #chart2 > div:nth-child(1) > .fm { top: 56%; height: 39%; }
    #chart2 > div:nth-child(1) > .pa { font-size: 1em; }
    #chart2 > div:nth-child(1) > .pa { position: absolute; left: 102.5%; bottom: 14%; width: 66.4%; }
    #chart2 > div:nth-child(1) > .ph { position: absolute; left: 104%; bottom: 3%; width: 66.4%; }
}
@media (max-width: 991px) {
    #chart2 > div:nth-child(1) { margin-bottom: 2em; }
    #chart2 > div:nth-child(1) > .arrow { left: 50%; top: 72%; transform: rotate(0deg); }
    #chart2 > div:nth-child(1) > .fm { top: 47%; height: 34%; }
}
@media (min-width: 768px) and (max-width: 991px){
    #chart2 > div:nth-child(1) > .arrow { top: 79.8%; }
}
@media (max-width: 767px) {
    #chart2 > div:nth-child(1) > .fm { top: 42%; height: 31%; }
}
@media (max-width: 575px) {
    #chart2 > div:nth-child(1) { margin-bottom: 13em; }
    #chart2 > div:nth-child(1) > .arrow { top: 92%; }
    #chart2 > div:nth-child(1) > .fm { top: 55%; height: 39%; }
    #chart2 > div:nth-child(1) > .pa { width: calc(100% - 30px); position: absolute; left: 15px; top: 104%; }
    #chart2 > div:nth-child(1) > .ph { width: calc(100% - 30px); position: absolute; left: 15px; top: calc(100% + 7em); }
}
@media (max-width: 428px) {
    #chart2 > div:nth-child(1) > .ph { top: calc(100% + 8em); }
}

/*---------------------sec02--------------------------*/

#sec02 > .container > p > a { border: 1px solid #ea5455; color: #ea5455; font-weight: bold; padding: 0px 10px; margin: 0 5px; border-radius: 6px; display: inline-block; }
#sec02 > .container > p > a:hover { background: #ea5455; color: #fff; }

#sec02 .roundframe p { padding: 0 15px; text-align: justify; /*font-size: 1.1em;*/ color: #333; }
#sec02 .roundframe > ol { list-style: none; padding-left: 0; color: #333; }
#sec02 .roundframe > ol > li img { width: 100%; max-width: 500px; border: 8px solid #fff; box-shadow: 1px 1px 8px #aaa; margin-bottom: 35px; }
#sec02 .roundframe > ol > li > h4 { color: #2d4059; font-weight: bold; font-size: 1.3rem; }
#sec02 .roundframe > ol > li > h4 > i { margin-right: 5px; vertical-align: text-bottom; }
#sec02 .roundframe > ol > li h5 { text-align: center; font-weight: bold; color: #07689f; margin-bottom: 15px; }
#sec02 .roundframe > ol > li h5 > span { margin: 0 auto; padding: 2px 12px; border-bottom: 2px solid #07689f; }
#sec02 .roundframe > .button { text-align: center; }
#sec02 .roundframe > .button > a > img { max-width: 100%; }

/*---------------------sec03--------------------------*/
#sec03 > .container > .source > span, 
#sec03 > .container > p > a { color: #ea5455; }
#sec03 > .container > p > a:hover { text-decoration: underline; }
#sec03 #school { display: flex; justify-content: space-around; flex-wrap: wrap; }
#sec03 #school > img { width: 100%; max-width: 355px; max-height: 515px; margin-bottom: 1rem; box-shadow: 2px 2px 8px; }
#sec03 .table th { background: #268AC9; color: #fff; }
#tb2 { min-width: 500px; }
@media (min-width: 768px) {
    #tb2 td:nth-child(3) { min-width: 17em; text-align: left; }
}
/*企業採認*/
#comp > div { margin: 0 auto 15px; padding: 1rem 25px 0 50px; background: #e5f4ff; border-left: 5px solid #268AC9; border-right: 5px solid #268AC9; border-radius: 30px; }
#comp > div > ul { padding-left: 0; margin-bottom: 0; font-size: 0.95rem; display: flex; flex-wrap: wrap; justify-content: space-between; }
#comp > div > ul > li { padding: 0 0em; line-height: 1.5; }
#comp > div > ul > li > h5 { font-weight: bold; color: #ea5455; }
@media (min-width: 992px) {
    #comp > div > ul > li { width: calc(50% - 20px); }
}

/*考生見證*/
#witness { display: flex; flex-wrap: wrap; }
#witness > div { width: calc(50% - 40px); box-shadow: 0 0 10px #999; border-radius: 15px; background: #fff; padding: 25px 30px 5px; margin: 20px; }
#witness > div > h5 { font-weight: bold; color: #555; text-align: center; }
#witness > div > p { font-size: 1rem; }
@media (max-width: 991px) {
    #witness > div { width: 100%; margin: 15px 0; }
}

/*---------------------sec04--------------------------*/

#sec04 { color: #666; }
#sec04 > .container > p { font-weight: bold; }
#sec04 > .container > p > img { width: 100%; max-width: 400px; }
#sec04 > .container > h3 { text-align: center; font-weight: bold; margin: 2rem 0; }
#sec04 > .container > h3 > span { border-bottom: 4px solid #187ebe; color: #187ebe; padding: 3px 25px; }
#sec04 h4 { font-weight: bold; color: #2d4059; }

#tb3 { min-width: 510px; }
#tb3 th { background: #268AC9; color: #fff; }
#tb3 td a { color: #ea5455; font-weight: bold; text-decoration: underline; }
#tb3 td a:hover { font-size: 1.1em; }
#tb3 td:nth-child(3) { font-size: 1em; font-weight: bold; }

/*報名管道*/
#pipeline > div { margin-bottom: 20px; }
#pipeline > div > a > div > img { width: 100%; max-width: 230px; border-radius: 50%; }
#pipeline > div > a > div > img:hover { width: 106%; max-width: 244px; box-shadow: 0 0 12px #888; }
#pipeline > div > a > div > h5 { color: #ea5455; font-weight: bold; margin-top: 10px; }
#pipeline > div > a > div > p { font-size: 0.95rem; line-height: 1.5; color: #666; }
@media (max-width: 991px) {
    #pipeline > div:nth-child(n+2) > a > div > p { text-align: left; }
}
@media (min-width: 480px) and (max-width: 991px) {
    #pipeline > div > a > div > img:hover { position: relative; left: -3%; }
}
@media (min-width: 480px) and (max-width: 767px) {
    #pipeline > div > a { display: flex; align-items: center; width: 100%; }
    #pipeline > div > a > div { width: 50%; padding: 0 15px; }
    #pipeline > div > a > div > h5 { text-align: left; }
    #pipeline > div:nth-child(1) > a > div > p { text-align: left; }
}

#ExamTime, 
#SProject { max-width: 804px; margin: 0 auto; }
/*到校-申請流程*/
#SP-Flow { margin-bottom: 30px; }
#SP-Flow > span > img { max-width: 100%; }
@media (min-width: 768px) {
    #SP-Flow > span:nth-child(2) { position: relative; left: -18px; }
}
@media (max-width: 991px) {
    #SP-Flow { text-align: center; }
    #SP-Flow > span:nth-child(2) { left: -16px; }
    #SP-Flow > span > img { height: 80px; }
}
/*到校-好康*/
#SP-Feature > div:nth-child(1) { display: flex; }
#SP-Feature > div:nth-child(1) > div > img { margin-right: 15px; }
#SP-Feature .col-md-6 > div { display: flex; margin-bottom: 10px; }
#SP-Feature .col-md-6 > div > div > img { max-width: 115px; }
#SP-Feature h5 { font-weight: bold; color: #444; }
#SP-Feature h5 > span { font-size: 2.1em; font-family: Arial Black; font-style: italic; margin-right: 6px; }
@media (max-width: 460px) {
    #SP-Feature > div:nth-child(1) { flex-wrap: wrap; }
    #SP-Feature > div:nth-child(1) > div { width: 100%; }
}
/*到校-聯絡*/
#SP-Contact { padding: 15px 30px; background: #efefef; font-size: 1rem; }
#SP-Contact > p { font-weight: bold; }

/*-----------------------------------------------*/

/*回到頂端*/
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}
.back-to-top > i { transform: rotate(-90deg); }