﻿body { font-family: 微軟正黑體; font-size: 1.1rem; }
a { color: #e74208; }
a:hover { color: #9d2d05; }
.container > p { padding: 0 20px; text-align: justify; font-size: 1.1em; color: #333; }
.section { padding: 7em 0; }


/*header*/
.header { text-align: center; background: #FBC463; }
.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: 50px; }
@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: #f5a050; 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: #630; position: relative; }
#sec0 > .container > .menu ul > li:hover { color: #fff; }
#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: 25%; }
    #sec0 > .container > .menu ul > li:nth-child(-n+3)::after { content: ""; width: 3px; height: 90px; display: inline-block; position: absolute; right: 0; top: calc(50% - 45px); background: #f9bc7f; }
}
@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: #f9bc7f; }
}
@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: #f9bc7f; }
}
@media (max-width: 460px) {
    #sec0 > .container > .menu ul > li { width: 100%; display: flex; }
    #sec0 > .container > .menu ul > li:nth-child(-n+3) { border-bottom: 1px solid #f9bc7f; }
}
@media (max-width: 400px) {
    #sec0 > .container > .menu ul > li { padding: 0; }
}

/*黃背景配色*/
.bg1 { background: url(../img/AcademicPortfolio/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/AcademicPortfolio/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: #fffaee; border: 4px dashed #ffd460; 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 #f07b3f; color: #f07b3f; padding: 3px 18px; display: inline-block; }

/*白背景配色*/
.bg2 { background: url(../img/AcademicPortfolio/bg2.jpg); }
.bg2 h2 { margin-bottom: 20px; }
.bg2 h2 > div:nth-child(1) { 
    width: 90px; height: 85px; 
    background: url(../img/AcademicPortfolio/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: #fff0f0; border: 4px dashed #fbb2b2; 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; }

/*配色3-灰*/
.RF3 { background: #f8f8f8; border: 5px solid #ddd; }
.RF3 > h3 > span { background: #777; }
.RF3 > h4 { color: #555; }
.RF3 strong { color: #ea5455; }
.RF3 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: #555; 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 { position: relative; margin-bottom: 3em; }
#chart2 > .fm {
    border: 5px solid red;
    border-radius: 12px;
    position: absolute;
    width: 72%;
    height: 27%; 
    z-index: 3;
}
#chart2 > .arrow { position: absolute; left: 50%; transform: rotate(0deg); z-index: 3; }
#chart2 > .pic { max-width: 100%; border: 8px solid #fff; box-shadow: 1px 1px 8px #aaa; margin-bottom: 30px; }
#chart2 > .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 > .ph { color: #555; font-weight: bold; line-height: 1.5; z-index: 2; }
#chart2 > .ph > i { vertical-align: text-top; }
@media (min-width: 576px) {
    #chart2 > .fm { top: 42%; left: 21%; }
    #chart2 > .arrow { top: 67.5%; }
}
@media (min-width: 768px) {
    #chart2 > .fm { top: 50%; left: 21%; }
    #chart2 > .arrow { top: 75.5%; }
}
@media (min-width: 992px) {
    #chart2 { text-align: center; }
    #chart2 > .fm { top: 55.5%; left: 21%; }
    #chart2 > .arrow { top: 81.5%; }
}
@media (min-width: 1200px) {
    #chart2 > .fm { width: 640px; top: 55.5%; left: 26.5%; }
    #chart2 > .arrow { top: 81.5%; }
}
@media (max-width: 575px) {
    #chart2 > .fm { bottom: calc(6em + 19%); left: 20%; height: 23%; }
    #chart2 > .arrow { bottom: calc(6em + 11%); }
}
@media (max-width: 408px) {
    #chart2 > .fm { bottom: calc(8em + 22%); left: 20%; height: 20%; }
    #chart2 > .arrow { bottom: calc(8em + 13%); }
}
@media (max-width: 332px) {
    #chart2 > .fm { bottom: calc(10em + 21%); left: 20%; height: 20%; }
    #chart2 > .arrow { bottom: calc(10em + 12%); }
}

#chart3 > div > table { width: 100%; z-index: 1; margin-bottom: 35px; }
#chart3 > div > table tr th, 
#chart3 > div > table tr td { text-align: center; padding: 4px 5px; border: 1px solid #dee2e6; }
#chart3 > div > table tr th { background: #555; color: #fff; }
#chart3 > div > table tr:nth-child(1) td { height: 75px; }
#chart3 > div > table tr:nth-child(n+2) td { width: 33.3%; }
#chart3 > div > table tr td { background: #fff; color: #333; }
#chart3 > div > table tr td > img { width: 100%; max-width: 199px; }



/*---------------------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 .table th { background: #f5a050; color: #fff; }
#tb1 td:nth-child(3) { min-width: 6em; }
#tb2 td:nth-child(1) { min-width: 6em; }
#tb2 td:nth-child(2) { min-width: 8em; }
#tb2 td:nth-child(3) { min-width: 8em; }
#tb2 td:nth-child(4) { min-width: 5em; }

/*企業採認*/
#comp { text-align: center; }
#comp > div { margin: 0 auto 15px; border-left: 5px solid #f5a050; border-right: 5px solid #f5a050; border-radius: 30px; }
#comp > div > ul { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; font-size: 0.95rem; }
#comp > div > ul > li { padding: 0 0em; margin: 5px 0; line-height: 1.3; }
@media (min-width: 450px) {
    #comp > div > ul > li { min-width: 24em; }
}
@media (max-width: 540px) {
    #comp > div { padding: 0 15px; }
}
#compPic { text-align: center; }
#compPic > img { width: 100%; max-width: 910px; margin: 0 auto 15px; }

/*國寫*/
#writing { margin-top: 45px; }
#writing > div:nth-child(-n+2) { margin-bottom: 45px; }
#writing > div:nth-child(3)    { margin-bottom: 25px; }
#writing > div { background: #fff; color: #555; line-height: 1.6; box-shadow: 2px 4px 8px #888; border: 4px solid #ffc690; border-radius: 30px; padding: 0 25px 10px; height: 100%; }
#writing > div > h4 { position: relative; top: -20px; text-align: center; margin-bottom: 0; }
#writing > div > h4 > span { background: #f5a050; color: #fff; font-weight: bold; border-radius: 40px; padding: 12px 25px 12px 30px; margin: 0 auto; display: inline-block; }
#writing > div > div > div > h5 { background: #fffaee; color: #d67600; font-weight: bold; padding: 0.1em 0.5em; text-align: center; }

/*考生見證*/
#witness { display: flex; flex-wrap: wrap; justify-content: center; }
#witness > div { width: calc(50% - 40px); box-shadow: 0 0 10px #999; border-radius: 15px; background: #fff; color: #555; padding: 25px 30px 5px; margin: 20px; }
#witness > div > h5 { font-weight: bold; text-align: center; }
#witness > div > p  { font-size: 1rem; line-height: 1.6; }
@media (max-width: 991px) {
    #witness > div { width: 100%; margin: 15px 0; }
}

/*考生見證-影片*/
.video-container { position: relative; margin-bottom: 1rem; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*---------------------sec04--------------------------*/

#sec04 { color: #555; }
#sec04 > .container > p { font-weight: bold; }
#sec04 > .container > p > img { width: 200px; }
#sec04 > .container > h3 { text-align: center; font-weight: bold; margin: 2rem 0; }
#sec04 > .container > h3 > span { border-bottom: 4px solid #ea5455; color: #ea5455; padding: 3px 25px; }
#sec04 h4 { font-weight: bold; color: #222; }

/*報名場次*/
#tb3 { min-width: 510px; }
#tb3 th { background: #ea5455; 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(2) { font-size: 1em; font-weight: bold; }
#tb3 tr.finish td { color: #999; }

/*報名管道*/
#pipeline > div { margin-bottom: 20px; }
#pipeline > div > a:hover { text-decoration: none; }
#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: #555; }
#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 .col-md-6 > div > div > ul .red { color: #ea5455; font-size: 1.2em; }
#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; font-weight: bold; }
#SP-Contact > span { display: inline-block; margin-right: 1em; }

/*-----------------------------------------------*/

/*回到頂端*/
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}
.back-to-top > i { transform: rotate(-90deg); }