@charset "UTF-8";
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6, p,a, em, img,
b, u, i, center,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, details, figcaption, figure,footer, header, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse:clapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

/* ===== desktop ===== */
/* header */
header{background:url(../images/header.jpg)no-repeat;width: 100%;padding-bottom:36.45%;background-size: cover;position: relative;overflow: hidden;}


/* nav */
nav{background: #003343;}
nav ul{display: flex;justify-content: center;}
nav ul li{box-sizing:border-box;}
nav ul li a{color:#fff;text-decoration: none;font-size: 25px;border-left:1px solid #fff;display: block;padding:15px 50px;font-weight: bold;}
nav ul li:first-child a{border: 0;}
nav ul li a:hover{color: #fed618;}

/* main */
.graduation{background:#eee8dc;padding:30px 0;}

/* Q1:企管系，畢業作什麼好？ */
.Q1{box-sizing: border-box;padding:20px calc((100% - 1200px)/2);text-align: center;}
.Q1 .h2{display: flex;justify-content:center;align-items: flex-end;}
.Q1 .h2 img:first-child{transform: translateY(32px);}
.Q1 .h2 img:last-child{margin-left:15px;}
.Q1 .content{background: #fff;box-sizing: border-box;padding:50px;border-radius: 10px;text-align: left;line-height: 1.6;}
.Q1 .content .head{display: flex;align-items: center;background: #f9f0f7;border: 1px solid #ca6fb4;margin-bottom: 30px;}
.Q1 .content .head .light{background:#d38ac1;width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;}
.Q1 .content .head p{font-family:'Noto Sans TC',sans-serif; color: #ca6fb4;box-sizing: border-box;padding: 0 20px;font-size:28px;}
.Q1 .content>p:nth-child(2){font-size: 24px;color: #003343;font-weight: bold;}
.Q1 .content>p{box-sizing: border-box;padding:0 50px;font-size: 21px;color: #000;}
.Q1 .content span{color: #ff5f8f;text-decoration: underline;font-weight: bold;}
.Q1 .content ul{display: flex;justify-content:center;margin:100px 0 40px 0;transform: scale(0.9);}
.Q1 .content ul li:nth-child(even){transform: translateY(25%);}
.Q1 .content ul li:nth-child(odd){transform: translateY(-25%);}
.Q1 .content ul img{width:120%;}
/* Q1:企管系，畢業作什麼好？ */

/* Q2:畢業學長姐，大都從事何種工作？ */
.Q2{box-sizing: border-box;padding:20px calc((100% - 1200px)/2);text-align: center;}
.Q2 .h2{display: flex;justify-content:center;align-items: flex-end;}
.Q2 .h2 img:last-child{margin-left:15px;}
.Q2 .content{background: #fff;box-sizing: border-box;padding:50px;border-radius: 10px;text-align: left;line-height: 1.6;}
.Q2 .content{background: #fff;box-sizing: border-box;padding:50px;border-radius: 10px;text-align: left;line-height: 1.6;}
.Q2 .content .head{display: flex;align-items: center;background: #f9f0f7;border: 1px solid #ca6fb4;margin-bottom: 30px;}
.Q2 .content .head .light{background:#d38ac1;width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;}
.Q2 .content .head p{font-family:'Noto Sans TC',sans-serif; color: #ca6fb4;box-sizing: border-box;padding: 0 20px;font-size:28px;}
.Q2 .content>p{box-sizing: border-box;padding:0 50px;font-size: 21px;color: #000;}
.Q2 .content>table{box-sizing: border-box;margin:20px 50px;border: 1px solid #29bbca;font-size: 18px;}
.Q2 .content>table thead td{background: #ddfcff;color:#000;text-align: center;font-weight: bold;}
.Q2 .content>table tbody td:first-child{background: #ddfcff;color:#000;text-align: center;font-weight: bold;vertical-align: middle;}
.Q2 .content>table td{border: 1px solid #29bbca;box-sizing: border-box;padding:10px;line-height:1.5;vertical-align: top;}
.Q2 .desktopTable{display: block;}
.Q2 .mobileTable{display: none;}
.Q2 .tit{font-size: 22px;color: #ff5f8f;font-weight: bold;}
.Q2 .tit span{font-size:30px;}
.Q2 .but{box-sizing: border-box;padding:0 80px 20px 80px;font-size: 21px;}
.Q2 .but span{font-weight: bold;color: #ff5f8f;}
.Q2 .knowMore{text-align: center;margin-top: 10px;}
.Q2 .knowMore p{margin-bottom: 10px;font-size: 18px;}
.Q2 .knowMore a{font-size:30px;color: #fff;background: #29bbca;text-decoration: none;box-sizing: border-box;padding: 5px 40px;font-family: 'Noto Sans TC', sans-serif;}
/* Q2:畢業學長姐，大都從事何種工作？ */

/* Q3:企管系最適合的公職/國營工作？ */
.Q3{box-sizing: border-box;padding:20px calc((100% - 1200px)/2);text-align: center;}
.Q3 .h2{display: flex;justify-content:center;align-items: flex-end;}
.Q3 .h2 img:nth-child(2){margin-left:15px;}
.Q3 .content{background: #fff;box-sizing: border-box;padding:50px;border-radius: 10px;text-align: left;line-height: 1.6;}
.Q3 .content .head{display: flex;align-items: center;background: #f9f0f7;border: 1px solid #ca6fb4;margin-bottom: 30px;}
.Q3 .content .head .light{background:#d38ac1;width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;}
.Q3 .content .head p{font-family:'Noto Sans TC',sans-serif; color: #ca6fb4;box-sizing: border-box;padding: 0 20px;font-size:28px;}
.Q3 .content>p{box-sizing: border-box;padding:0 50px;font-size: 21px;color: #000;line-height: 1.3;}
.Q3 .content span{color: #ff5f8f;font-weight: bold;}
.Q3 .know{text-align: center;margin:30px 0;}
.Q3 .know .tit{display:inline;font-size: 30px;border: 1px solid #000;padding:10px 30px;border-radius: 50px;}
.Q3 .know>p{width: 100%;line-height: 1.6;margin:20px 0;font-size: 18px;}
.Q3 .know ul{display: flex;justify-content: space-between;align-items: stretch; box-sizing: border-box;padding:10px;margin-top:30px;}
.Q3 .know ul li{width: 23%;border-radius: 10px;overflow: hidden;}
.Q3 .top{box-sizing: border-box;padding:20px 30px;background: #29bbca;}
.Q3 .down{position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;}
.Q3 .down{color: #fff;font-weight: bold;font-size: 30px;font-family:'Noto Sans TC',sans-serif;line-height: 1.2;box-sizing: border-box;padding:20px 30px;background: #29bbca;}
.Q3 .down a{text-decoration: none;color: #fff;display: block;}
.Q3 .down i{margin: 10px 0 20px 0; color: #94dde5;display:flex;flex-flow: column;align-items: center;justify-content: center;}
.Q3 .down i span{position: relative;width:50px;height:30px;animation: UpDown 1.5s linear infinite;}
.Q3 .down i span::before{content:'';background:#94dde5;width:60%;height:8px;display: block;transform: rotateZ(40deg);position: absolute;bottom: 0;left:1px;}
.Q3 .down i span::after{content:'';background:#94dde5;width:60%;height:8px;display: block;transform: rotateZ(-40deg);position: absolute;bottom: 0;right:1px;}
.Q3 .down i span:nth-child(1){animation-delay: 0;}
.Q3 .down i span:nth-child(2){animation-delay: 0.2s;}
.Q3 .down i span:nth-child(3){animation-delay: 0.4s;}
@keyframes UpDown{
0%{transform:translateY(-5px);opacity: 0;}
25%{transform:translateY(0px);opacity: 1;}
100%{transform:translateY(5px);opacity: 0;}
}
.Q3 .close-work{content:'';display: block;width: 0;height: 0;border-style: solid;border-width:15px 20px 0 20px;border-color:#26ABBA transparent;position: absolute;top: 0;left:calc((100% - 40px)/2);}
.Q3 .work .theme{font-size: 24px;line-height: 2;border-bottom: 1px dashed #29bbca;font-family:'Noto Sans TC',sans-serif;text-align: center;}
.Q3 .work p:nth-child(2){margin: 10px 0;font-size: 18px;}
.Q3 .top{height: 25%;}
.Q3 .work{background: #faf4e9;padding:20px 30px;box-sizing: border-box;position: relative;text-align: left;color: #29bbca;border-bottom-left-radius: 10px;border-bottom-right-radius:10px;height: 75%;}
.Q3 .knowMore{text-align: center;margin-top: 10px;}
.Q3 .knowMore p{margin-bottom: 10px;font-size: 18px;}
.Q3 .knowMore a{font-size:30px;color: #fff;background: #ff5f8f;text-decoration: none;box-sizing: border-box;padding: 5px 40px;font-family: 'Noto Sans TC', sans-serif;}
/* Q3:企管系最適合的公職/國營工作？ */

/* 考試機會多&招考缺額多 */
.chance{background:url(../images/chance-bkg.jpg);padding:60px calc((100% - 1200px)/2);text-align: center;}
.chance h2{font-family: 'Noto Sans TC', sans-serif;font-weight: bold;color: #003343;font-size: 40px;}
.chance h2 span{margin: 0 15px;}
.chance h2 span::before{content:"\f14a";display: inline-block;line-height: 1;font-family:"Font Awesome 5 Free";font-weight: 400;}
.chance ul{display: flex;justify-content: space-between;margin:50px 0;}
.chance ul li{width: 18%;}
.chance ul img{width: 100%;}

.chance>p{font-size:24px;margin:30px 0;}
.chance>a{font-size: 30px;color: #fff;background: #ff5f8f;text-decoration: none;box-sizing: border-box;padding:6px 50px;font-family: 'Noto Sans TC', sans-serif;}
.chance>a::before{content:'\f0a4';display: inline-block;font-family: "Font Awesome 5 Free";line-height: 1;font-weight: 400;margin-right: 5px;}
/* 考試機會多&招考缺額多 */

/* 幸福見證 考取推薦 */
.prove{background color:aliceblue;padding:100px calc((100% - 1200px)/2);text-align: center;background-size: cover;}
.proveB{background color:aliceblue;padding:100px calc((100% - 1200px)/2);text-align: center;background-size: cover;}
.prove h2{font-family:'Noto Sans TC',sans-serif;font-size:40px;color: #003343;font-weight: bold;margin-bottom: 20px;}
.prove ul{display: flex;justify-content:space-between;flex-wrap: wrap;}
.prove ul li{width:48%;background:rgb(201, 202, 202,.5);color: #fff;border-radius: 10px;box-sizing: border-box;padding:30px;text-align: left;line-height: 1.6;margin:20px 0;}
.prove ul .tit{font-size: 30px;background: #ec6941;text-align: center;padding:5px 0;border-radius: 50px;font-family:'Noto Sans TC',sans-serif;}
.prove ul .tit img{transform: translateY(5px);}
.prove ul .name{font-size:24px;color: #003343;font-family:'Noto Sans TC',sans-serif;box-sizing: border-box;padding: 0 10px;margin: 20px 0;line-height: 1.3;}
.prove ul .name span{display: block;}
.prove ul div{margin: 20px 0 0 0;background: #fff;border-radius: 10px;font-family:'Noto Sans TC',sans-serif;color: #003343;box-sizing: border-box;padding:10px 20px 20px 20px;font-size: 18px;line-height: 1.6;}
.prove ul div p:first-child{color: #ec6941;font-size: 22px;font-weight: bold;line-height: 2;}

.prove .knowMore p{font-size:24px;margin:30px 0;}
.prove .knowMore a{font-size: 30px;color: #fff;background: #ff5f8f;text-decoration: none;box-sizing: border-box;padding:6px 50px;font-family: 'Noto Sans TC', sans-serif;}
.prove .knowMore a::before{content:'\f0a4';display: inline-block;font-family: "Font Awesome 5 Free";line-height: 1;font-weight: 400;margin-right: 5px;}
/* 幸福見證 考取推薦 */

/* 快速上榜課程推薦 */
.course{background:url(../images/course-bkg.jpg);padding:80px calc((100% - 1200px)/2) 100px calc((100% - 1200px)/2);text-align: center;}
.course h2{font-family:'Noto Sans TC',sans-serif;font-weight: bold;font-size: 40px;color: #003343;display: inline-block;}
.course .forword{margin: 10px 0 30px 0;color: #003343;}
.course>span{font-size: 30px;font-family:'Noto Sans TC',sans-serif;padding:10px 30px;box-sizing: border-box;box-sizing: border-box;display: inline-block;background: #bdce2c;border:2px dashed #fff;border-radius: 50px;color: #003343;}
.course ul{display: flex;justify-content: space-between;}
.course ul li{width:32%;box-sizing: border-box;padding: 40px 30px;background: #fff;border-radius: 10px;margin: 20px 0;}
.course ul img{width:45%;transform: translateY(5px);}
.course ul li:nth-child(1) .head{background: #29bbca;}
.course ul li:nth-child(2) .head{background: #fea82b;}
.course ul li:nth-child(3) .head{background: #d38ac1;}
.course ul .head{color: #fff;font-size: 28px;padding: 10px 20px;box-sizing: border-box;border-radius: 10px;margin-bottom: 20px;}
.course ul p{width: 100%;font-size: 24px;color: #003343;font-family:'Noto Sans TC',sans-serif;text-align: left;line-height:1.6;}
.course ul span{color:#ff6996;}
.course>p{font-size:24px;margin:30px 0;}
.course>a{font-size: 24px;color: #fff;background: #ff5f8f;text-decoration: none;box-sizing: border-box;padding:8px 50px;font-family: 'Noto Sans TC', sans-serif;}
.course>a::before{content:'\f0a4';display: inline-block;font-family: "Font Awesome 5 Free";line-height: 1;font-weight: 400;margin-right: 5px;}
/* 快速上榜課程推薦 */

/* 志光專業10大輔考規劃 */
.plane{background:#fff;padding:80px calc((100% - 1200px)/2);text-align: center;}
.plane h2{font-family:'Noto Sans TC',sans-serif;font-size:40px;color: #ec6941;background: #fff;border: 1px solid #ec6941;display: inline-block;margin: 30px 0;border-radius:50px;padding:10px 30px;}
.plane .forword{line-height: 1.3;width: 80%;font-size: 22px;margin:10px auto 20px auto;color: #333333;}
.plane ul{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top:40px;}
.plane ul li{width: 17%;margin-bottom:40px;}
.plane ul .tit{font-size:23px;color: #29bbca;font-weight: bold;line-height: 2;}
.plane ul p{text-align: left;line-height: 1.6;font-size: 18px;}
.plane>p{font-size:20px;margin:10px auto 20px auto;line-height: 1.3;width: 80%;}
.plane>a{font-size:22px;color: #fff;background: #29bbca;text-decoration: none;box-sizing: border-box;padding:5px 40px;font-family: 'Noto Sans TC', sans-serif;}
.plane>a::before{content:'\f0a4';display: inline-block;font-family: "Font Awesome 5 Free";line-height: 1;font-weight: 400;margin-right: 5px;}
/* 志光專業10大輔考規劃 */

/* 多元學習模式 */
.learn{padding:80px calc((100% - 1100px)/2);text-align: center;background: #eee8dc;}
.learn h2{font-size:40px;color: #003343;font-weight: bold;}
.learn>span{font-size:24px;line-height: 2;font-weight: bold;color:#666666;}
.learn ul{display: flex;justify-content: space-between;margin-top:50px;}
.learn ul li{width: 23%;line-height:0;}
.learn ul li img{width: 100%;}
.learn ul li span{font-size:28px;display: block;line-height:1.6;background:#fea82b;color: #fff; font-weight: bold;}
.learn ul li p{line-height: 2;margin-top:10px;}
.learn>a:hover{color: #ff72bb;background: #fff;box-sizing: border-box;border: 1px solid #ff72bb;margin:9px 0;}
/* 多元學習模式 */

/* footer */
footer{background:#003343;padding: 50px calc((100% - 1024px)/2);display: flex;box-sizing: border-box;justify-content: space-between;align-items: center;}
.footer{width: 100%;margin-left:20px;}
.footer>a{background: #fff;color: #003343;text-decoration: none;padding:10px 15px;border-radius: 10px;font-size: 22px;font-weight: bold;width: 100%;display: flex;justify-content: space-between; width: 100%;box-sizing: border-box;}
.footer>a::after{content:'\f054';font-family: "Font Awesome 5 Free";display: inline-block;font-weight: bold;}
.footer>a:active{box-shadow:4px 4px 4px #333 inset;}
.footer ul{display:flex;margin-top: 20px;}
.footer ul li{border-right:1px solid #fff;}
.footer ul li:last-child{border: 0;}
.footer ul a{color: #fff;text-decoration: none;font-size: 20px;padding: 0 10px;position: relative;}
.footer ul a::after{content:'';display: block;width: 0;height: 1px;background: #fff;position: absolute;bottom: 0;left: 45%;transition: all .5s;}
.footer ul a:hover::after{left: 0;width: 100%;}

/* ===== other ===== */
@media(max-width:1250px){
/* nav */
nav ul li a{padding:15px 20px;}

/* main */
.graduation{padding:60px 1%;}

/* Q1:企管系，畢業作什麼好？ */
.Q1{width: 100%;}
.Q1 .h2 img:nth-child(1){width: 25%;}
.Q1 .h2 img:nth-child(2){width: 74%;}
.Q1 .content{padding:30px 20px;}
/* Q1:企管系，畢業作什麼好？ */

/* Q2:畢業學長姐，大都從事何種工作？ */
.Q2{width: 100%;}
.Q2 .h2 img:nth-child(1){width: 74%;}
.Q2 .h2 img:nth-child(2){width: 25%;}
.Q2 .content{padding:30px 20px;}
/* Q2:畢業學長姐，大都從事何種工作？ */

/* Q3:企管系最適合的公職/國營工作？ */
.Q3{width: 100%;}
.Q3 .h2 img:nth-child(1){width: 25%;}
.Q3 .h2 img:nth-child(2){width: 74%;}
.Q3 .content{padding:30px 20px;}
.Q3 .down{padding: 20px 1%;}
/* Q3:企管系最適合的公職/國營工作？ */

/* 考試機會多&招考缺額多 */
.chance{padding: 60px 1%;}
/* 考試機會多&招考缺額多 */

/* 幸福見證 考取推薦 */

/* 幸福見證 考取推薦 */

/* 快速上榜課程推薦 */
.course{padding:50px 1% 80px 1%;}
.course ul li{padding: 30px 20px;}
.course ul p{font-size: 2vw;}
.course ul .head{font-size:2vw;padding: 10px;}
/* 快速上榜課程推薦 */

/* 志光專業10大輔考規劃 */
.plane{padding:80px 1%;}
.plane .forword{width: 100%;font-size: 22px;}
.plane ul li{width: 18%;}
.plane ul .tit{font-size:2vw;}
.plane ul li img{width:80%;}
/* 志光專業10大輔考規劃 */

/* 幸福見證 考取推薦 */
.prove{padding:80px 1%;}
.prove ul li{padding:20px;}
.prove ul .name{font-size:2vw;}
.prove ul .name span{font-size:3vw;}
.prove ul .sub {font-size: 22px;}
.prove ul div{margin: 15px 0;}
.prove ul li>p{font-size: 18px;}
/* 幸福見證 考取推薦 */

/* 多元學習模式 */
.learn{padding:30px 1% 60px 1%;}
/* 多元學習模式 */

/* footer */
footer{padding: 50px 1%;}
.footer{margin-left: 10px;}
.footer>a{box-sizing: border-box;}
.footer ul a{font-size: 19px;padding: 0 8px;}
}

/* ===== table ===== */
@media(max-width:768px){
/* nav */
nav ul li a{padding: 15px 10px;font-size: 3vw;padding:10px;}

/* main */
.graduation{padding:20px 1%;}
/* Q1:企管系，畢業作什麼好？ */
.Q1 .h2 img:first-child {transform: translateY(3vw);}
.Q1 .h2 img:last-child{margin: 0;}
.Q1 .content>p{padding: 0;}
.Q1 .content .head p{font-size: 3.2vw;}
/* Q1:企管系，畢業作什麼好？ */

/* Q2:畢業學長姐，大都從事何種工作？ */
.Q2 .h2 img:last-child{margin: 0;}
.Q2 .content>p{padding: 0;}
.Q2 .content>table{margin: 0;}
.Q2 .but{padding:30px 0 0 0;}
.Q2 .knowMore{margin-top: 25px;}
.Q2 .knowMore p{font-size:16px;}
.Q2 .knowMore a{font-size: 24px;padding:5px 30px;}
/* Q2:畢業學長姐，大都從事何種工作？ */

/* Q3:企管系最適合的公職/國營工作？ */
.Q3 .h2 img:nth-child(2){margin: 0;}
.Q3 .content{padding: 30px 20px;}
.Q3 .know{margin: 30px 0 10px 0;}
.Q3 .know .tit{font-size:3vw;}
.Q3 .know ul{flex-wrap: wrap;}
.Q3 .know ul li{width: 48%;margin-bottom: 20px;height: 300px;}
.Q3 .top{padding:20px 10px 10px 10px;height:auto;}
.Q3 .top img{max-width: 150px;}
.Q3 .down{padding: 0;}
.Q3 .down i{margin: 0;}
.Q3 .work{height:100%;}
.Q3 .knowMore{margin: 0;}
.Q3 .knowMore p{font-size:16px;}
.Q3 .knowMore a{font-size: 24px;padding:5px 30px;}
/* Q3:企管系最適合的公職/國營工作？ */

/* 考試機會多&招考缺額多 */
.chance>p {font-size: 20px;margin: 30px 0 20px 0;}
.chance>a{padding: 6px 50px;font-size:3vw;}
/* 考試機會多&招考缺額多 */

/* 幸福見證 考取推薦 */
.prove ul li{text-align: center;}
.prove ul .tit{font-size:3vw;display: inline-block;padding:5px 25px;}
.prove ul .tit img{margin:0 5px;width: 30px;height: 30px;}
.prove ul .name{font-size:3vw;text-align: center;margin: 10px 0;}
.prove ul .name span{font-size:unset;display:unset;margin-left: 20px;}
.prove ul div{margin-bottom: 0;}
/* 幸福見證 考取推薦 */

/* 快速上榜課程推薦 */
.course {padding: 50px 1% 60px 1%;}
.course .forword{width: 100%;margin: 20px 0;font-size: 24px;}
.course>span{padding:8px 30px;font-size:3.5vw;}
.course ul{margin:30px 0;}
.course ul li {padding:20px 10px;margin: 0;}
.course ul .head{text-align: center;padding:10px 0;font-size: 2.5vw;margin-bottom: 10px;}
.course ul p {font-size: 2.2vw;}
.course>p {font-size: 20px;margin: 30px 0 20px 0;}
.course>a{padding: 6px 50px;}
/* 快速上榜課程推薦 */

/* 志光專業10大輔考規劃 */
.plane{padding:60px 1%;}
.plane .forword{font-size: 18px;}
.plane ul li img{width: 70%;}
.plane ul .tit{font-size: 2.2vw;}
.plane ul p{font-size: 16px;}
/* 志光專業10大輔考規劃 */

/* 幸福見證 考取推薦 */
.prove {padding:60px 5%;}
.prove ul{flex-wrap: wrap;}
.prove ul li{width:100%;margin:15px 0;}
.prove ul li:last-child{margin-bottom: 0;}
.prove ul li>div p:nth-child(2){text-align: left;}
.prove ul li:nth-child(1)>p:nth-child(3){display: none;}
.prove ul li:nth-child(2)>p:nth-child(3){display: none;}
.prove ul .sub{font-size:2.2vw;}
.prove ul div span{font-size:2.1vw;}
.prove>p{font-size:2.4vw;}

.prove .knowMore{margin: 0;}
.prove .knowMore p{font-size:20px;}
.prove .knowMore a{font-size: 20px;padding:5px 30px;}
/* 幸福見證 考取推薦 */

/* 多元學習模式 */
.learn ul{margin-top: 20px;}
.learn ul li{width: 24%;}
.learn ul li span{font-size:3vw;margin-bottom: 10px;}
.learn ul li p{font-size:2vw;line-height: 1.2;text-align: left;}

/* 多元學習模式 */
/* footer */
footer{flex-wrap: wrap;justify-content: center;padding:30px 1%;}
.footer{margin-left: 0;margin-top: 30px;}
.footer>a{width: 90%;margin: 0 auto;}
.footer ul{flex-wrap: wrap;width:100%;margin:20px auto 5px auto;}
.footer ul li{width:17%;padding:0 1%;margin-bottom: 10px;}
.footer ul a {font-size: 3vw;padding:5px 10px;display: block;width: 100%;height: 100%;box-sizing: border-box;text-align: center;}    
}

/* ===== phone ===== */
@media(max-width:767px){
/*header*/
header{background:url(../images/header-mobile.jpg)no-repeat;width: 100%;height: 0;padding-bottom:144%;background-size: cover;}
header div{display: none !important;}
header img{display: none !important;}
/* nav */
nav ul{flex-wrap: wrap;}
nav ul li{width: 100%;}
nav ul li a{border-left:0;border-top:1px solid #fff;font-size:5vw;padding:10px;text-align: center;}

/* main */
.graduation{padding:30px 4%;}
/* Q1:企管系，畢業作什麼好？ */
.Q1 .h2{margin: 10px 0;}
.Q1 .h2 img:first-child{display: none;}
.Q1 .h2 img:nth-child(2){width: 100%;}
.Q1 .content .head{margin-bottom:10px;}
.Q1 .content .head p{padding:0 10px;font-size:5vw;line-height: 1.2;}
.Q1 .content ul{margin:20px 0;transform: scale(1);}
.Q1 .content>p {font-size:6vw;}
/* Q1:企管系，畢業作什麼好？ */

/* Q2:畢業學長姐，大都從事何種工作？ */
.Q2 .h2{margin: 10px 0;}
.Q2 .h2 img:nth-child(1){width: 100%;}
.Q2 .h2 img:last-child{display: none;}
.Q2 .content .head{margin-bottom: 20px;}
.Q2 .content .head p{font-size:5vw;line-height: 1.2;}
.Q2 .content>table{margin: 20px 0;}
.Q2 .desktopTable{display:none;}
.Q2 .mobileTable{display:block;}
.Q2 .content>table tbody td:first-child{line-height: 1.2;}
.Q2 table tbody tr:first-child td{background: #ddfcff;color: #000;text-align: center;font-weight: bold;vertical-align: middle;}
.Q2 .content>table td {vertical-align: middle;}
.Q2 .content>table span{display: block;}
.Q2 .but{padding: 0;}
.Q2 .content>p{font-size:6vw;}
/* Q2:畢業學長姐，大都從事何種工作？ */

/* Q3:企管系最適合的公職/國營工作？ */
.Q3 .h2{margin: 10px 0;}
.Q3 .h2 img:nth-child(1){display: none;}
.Q3 .h2 img:nth-child(2){width:100%;}
.Q3 .content{padding:20px 10px;}
.Q3 .content .head p{font-size: 5vw;}
.Q3 .content>p{width: 100%;padding: 0;}
.Q3 .know ul{margin: 0;}
.Q3 .know ul li{width:100%;height: 350px;}
.Q3 .know .tit{display: block;box-sizing: border-box;padding:5px 10px;font-size:6vw;line-height: 1.2;}
.Q3 .know>p{font-size: 16px;margin: 10px 0;}
.Q3 .work{padding:10px 10px;font-size:6vw;}
.Q3 .work p:nth-child(2){margin-top: 0;font-size:8vw;}

.Q3 .knowMore{margin: 0;}
.Q3 .knowMore p{font-size:16px;}
.Q3 .knowMore a{font-size: 20px;padding:5px 30px;}
/* Q3:企管系最適合的公職/國營工作？ */

/* 考試機會多&招考缺額多 */
.chance {padding:40px 1%;}
.chance h2{line-height: 1.3;}
.chance h2 span{display: block;}
.chance ul{flex-wrap: wrap;justify-content:flex-start; width:90%;margin:30px auto 0 auto;}
.chance ul li{margin:10px 0;width:50%;}
.chance ul li:nth-child(even){transform: translateY(50%);}
.chance>p{font-size:6vw;margin: 30px 0;}
.chance>a{padding: 6px 40px;font-size:8vw;}
/* 考試機會多&招考缺額多 */

/* 幸福見證 考取推薦 */
.prove{padding: 50px 1%;}
.prove h2{font-size:10vw;line-height: 1.2;}
.prove ul .tit {font-size: 7vw;display:block;padding: 5px 20px;}
.prove .head{font-size:8vw;padding:8px 35px;margin:20px 0;}
.prove>p{font-size: 6vw;}
.prove>p br{display: none;}
.prove ul{width: 96%;margin:0 auto;}
.prove ul li{width: 100%;margin-bottom:30px;text-align: center;padding: 20px 10px;}
.prove ul li:last-child{margin-bottom: 0}
.prove ul .name{font-size:5vw;text-align: center;}
.prove ul .name span {margin-left:10px;}
.prove ul div{padding: 10px;}
.prove ul div p:first-child{line-height:1.3;margin-bottom: 10px;font-size:5vw;}

.prove .knowMore{margin: 0;}
.prove .knowMore p{font-size:16px;}
.prove .knowMore a{font-size: 20px;padding:5px 30px;}
/* 幸福見證 考取推薦 */

/* 快速上榜課程推薦 */
.course{padding:50px 3%;}
.course h2{font-size: 11vw;}
.course .forword{text-align: center;}
.course>span{font-size: 7vw;padding:5px 25px;}
.course ul{flex-wrap: wrap;}
.course ul li:last-child{margin-bottom: 0;}
.course ul li{width: 100%;margin-bottom: 20px;padding: 20px;}
.course ul .head{font-size:6vw;}
.course ul p {font-size: 6vw;}
/* 快速上榜課程推薦 */

/* 志光專業10大輔考規劃 */
.plane h2{font-size:8vw;padding:8px 20px;margin: 10px 0;}
.plane ul li{width: 49%;}
.plane ul .tit{font-size:6vw;}
.plane>p{margin-top: 0;}
/* 志光專業10大輔考規劃 */

/* 多元學習模式 */
.learn{padding: 30px 1%;}
.learn h2{font-size:9vw;line-height: 1.2; font-weight: bold;}
.learn h2 span{display: block;}
.learn>span{font-size:5vw;}
.learn ul{flex-wrap: wrap;width:85%; margin:30px auto 0 auto;}
.learn ul li{width:95%;margin: 0 auto 40px auto;}
.learn ul li p{font-size: 20px;}
.learn ul li span{font-size:6vw;}
/* 多元學習模式 */

/* footer */
footer{padding:40px 1%;}
footer>img{width:50%;margin: 0 auto;}
.footer{margin-top:20px;}
.footer>a{font-size:4.3vw;width: 96%;padding:8px 10px;}
.footer ul li{width: 31%;}
.footer ul a {font-size: 5vw;}
}

.TOP-WEB {
	text-decoration:none;
    color:  #FF3;
    font-size: 25px;
    text-align:center;
    background-color:#000;
}
.add {
	font-size: 16px;
	color: #FF9;
	background-color: #000;
    text-align: center;
}
.add2 {
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    text-align: center;
}
.add3 {
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align: center;
}

.Stay{  
	text-align:center; 
	margin:0 auto;
	padding:2% auto;
	font-size: 30px;
}

.footer {
	font-family: "微軟正黑體";
	font-size: 16px;
	color: #FF9;
	background-color: #000;
	text-align:center;
    padding:0 auto;
	
}
.footer2 {
	font-family: "微軟正黑體";
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    
}
.footer3 {
	font-family: "微軟正黑體";
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align:center; 
   
}