@charset "utf-8";
/* ==================================================
   EMW_251128 Stylesheet
   區塊順序：
   1) 基礎與容器
   2) Hero / Top Banner
   3) 前言 Opening
   4) 主題標題 Title Bar
   5) 課程亮點 Highlights
   6) 誰適合 Who For
   7) 課程大綱 Outline（表格）
   8) 課程洽詢 / 活動資訊 Contact / Info
   9) 注意事項 Notice
   10) RWD（1024 / 800 / 768 / 580 / 500 / 480 / 390）
================================================== */

/* 1) 基礎與容器 */
#EMW_251128 {
  max-width: 1200px;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

/* 2) Hero / Top Banner */
#EMW_251128 .EMW-topBanner {
  width: 100%;
  max-width: 1200px;
  height: 450px;
  position: relative;
  background-color: #111;
  background-image: url(../css/css-img/EMW-251128_topBanner.jpg);
  background-size: auto 100%;
  background-position: center bottom;
}
/* Top Banner 文字 */
#EMW_251128 .EMW-topBanner-text { position: absolute; left: 80px; bottom: 80px; }
#EMW_251128 .EMW-topBanner-text > h1 {
  font-size: 48px; line-height: 58px; color: #fff; margin-left: -20px; font-weight: bolder; padding-bottom: 0;
}
#EMW_251128 .EMW-topBanner-text > h2 {
  font-size: 44px; line-height: 54px; font-weight: normal; color: #fff; margin-bottom: 10px; padding: 0; border-bottom: none !important;
}

/* 3) 前言 Opening */
#EMW_251128 .EMW-opening {
  width: 84%; max-width: 1200px; margin: 0 auto; padding: 80px 8%; background-color: #E9F8FF; border-radius: 0 0 50px 50px;
}
#EMW_251128 .EMW-opening > h2 {
  max-width: 820px; margin: 0 auto 30px; font-size: 36px; line-height: 46px; color: #000; font-weight: bold; text-align: center; padding: 0; border-bottom: none !important;
}
#EMW_251128 .EMW-opening > p {
  max-width: 820px; margin: 0 auto 20px; font-size: 18px; line-height: 28px; font-weight: normal; text-align: justify;
}
#EMW_251128 .EMW-opening > p > b { font-weight: bold; color: #008CD6; }
#EMW_251128 .EMW-opening > p:last-child { margin-bottom: 0; }

/* 4) 主題標題 Title Bar */
#EMW_251128 .EMW-title {
  width: 100%; max-width: 1200px; background-color: #008cd6; margin: 80px auto 50px; border-radius: 0 50px 0 0;
  background-image: url(../css/css-img/EMW-251128_title-icon.png); background-size: auto 100%; background-position: 35px 0; background-repeat: no-repeat;
}
#EMW_251128 .EMW-title > h2 { font-size: 36px; line-height: 70px; font-weight: bold; color: #fff; margin-left: 120px; margin-bottom: 0; padding: 0; border-bottom: none !important; }

/* 5) 課程亮點 Highlights */
#EMW_251128 .EMW_courseHL { width: 90%; max-width: 820px; margin: 0 auto 40px; display: table; }
/* 圖 */
#EMW_251128 .EMW_courseHL_icon { float: left; width: 12%; }
#EMW_251128 .EMW_courseHL_icon > img { width: 100%; }
/* 文 */
#EMW_251128 .EMW_courseHL_text { float: left; width: 85%; margin-left: 3%; }
#EMW_251128 .EMW_courseHL_text > h3 { font-size: 24px; line-height: 28px; color: #E57B03; font-weight: bold; }
#EMW_251128 .EMW_courseHL_text > p { font-size: 18px; line-height: 28px; text-align: justify; color: #222; font-weight: normal; margin-top: 15px; padding-top: 15px; border-top: 1px solid #DAE1EE; }

/* 6) 誰適合 Who For */
#EMW_251128 .EMW_whoFor { width: 90%; max-width: 1200px; margin: 0 auto; display: table; }
#EMW_251128 .EMW_whoFor_box { width: 30%; margin-right: 5%; float: left; }
#EMW_251128 .EMW_whoFor_box:last-child { margin-right: 0; }
#EMW_251128 .EMW_whoFor_icon { text-align: center; }
#EMW_251128 .EMW_whoFor_icon > img { width: 100%; max-width: 300px; }
#EMW_251128 .EMW_whoFor_text { width: 100%; margin: 0 auto; }
#EMW_251128 .EMW_whoFor_text > h3 { font-size: 24px; line-height: 34px; font-weight: bold; color: #000; margin: 20px auto 15px; text-align: center; }
#EMW_251128 .EMW_whoFor_text > h3 > b { font-style: italic; font-weight: bold; color: #008CD6; letter-spacing: 1px; display: inline-block; }
#EMW_251128 .EMW_whoFor_text > p { font-size: 18px; line-height: 28px; color: #222; text-align: justify; margin-bottom: 10px; }

/* 7) 課程大綱 Outline（表格） */
#EMW_251128 .EMW_outline { width: 100%; max-width: 1200px; background-color: #f5f5f5; margin: -50px auto 80px; border-radius: 0 0 50px 50px; display: table; }
#EMW_251128 .EMW_outline .EMW_outline_table { width: 95%; max-width: 1100px; margin: 50px auto 50px; background-color: #fff; }
#EMW_251128 .EMW_outline .EMW_outline_table tr { border-bottom: 1px solid #537ac3; }
/* Row hover 配色 */
#EMW_251128 .EMW_outline .EMW_outline_table tr:hover .outline-title { background-color: #00345e; transition: all 0.3s; }
#EMW_251128 .EMW_outline .EMW_outline_table tr:hover .outline-time { background-color: #c2eeff; transition: all 0.3s; }
#EMW_251128 .EMW_outline .EMW_outline_table tr:hover .outline-info { background-color: #e9f8ff; transition: all 0.3s; }
/* 上下午主題 */
#EMW_251128 .outline-title { font-size: 24px; line-height: 54px; text-align: center; font-weight: bold; background-color: #004280; color: #fff; border-radius: 10px 10px 0 0; }
/* 時間欄 */
#EMW_251128 .outline-time { font-size: 24px; line-height: 34px; color: #004280; font-weight: bold; text-align: center; vertical-align: middle; width: 20%; border-right: 1px solid #537ac3; background-color: #e9f8ff; padding: 30px 10px; }
#EMW_251128 .outline-info { padding: 30px; }
#EMW_251128 .outline-info > h4 { font-size: 20px; line-height: 20px; margin-bottom: 10px; font-weight: bold; color: #004280; }
#EMW_251128 .outline-info > p { font-size: 18px; line-height: 28px; color: #222; }

/* 8) 課程洽詢 / 活動資訊 */
#EMW_251128 .EMW-contact-info { width: 90%; max-width: 1000px; margin: 0 auto 80px; display: table; }
#EMW_251128 .EMW-contact-infoBox { width: 50%; float: left; }
#EMW_251128 .EMW-contact-infoBox > h3 { font-size: 28px; line-height: 38px; font-weight: bold; color: #004280; margin-bottom: 20px; padding-left: 55px; }
/* icon 樣式 */
#EMW_251128 .EMW-contact-infoBox > h3.title-icon_1,
#EMW_251128 .EMW-contact-infoBox > h3.title-icon_2 { background-size: auto 100%; background-position: 0 0; background-repeat: no-repeat; }
#EMW_251128 .EMW-contact-infoBox > h3.title-icon_1 { background-image: url(../css/css-img/EMW-251128_contact-icon_1.png); }
#EMW_251128 .EMW-contact-infoBox > h3.title-icon_2 { background-image: url(../css/css-img/EMW-251128_contact-icon_2.png); }
#EMW_251128 .EMW-contact-infoBox > ul { padding-left: 30px; margin-left: 24px; border-left: 1px solid #89aad9; }
#EMW_251128 .EMW-contact-infoBox > ul li { font-size: 18px; line-height: 28px; color: #222; font-weight: normal; font-style: normal; }
#EMW_251128 .EMW-contact-infoBox > ul li a { font-weight: bold; color: #004280; }
#EMW_251128 .EMW-contact-infoBox > ul li a:hover { background-color: #e9f8ff; text-decoration: none; }

/* 9) 注意事項 Notice */
#EMW_251128 .EMW_notice { width: 90%; max-width: 1100px; margin: 0 auto 80px; color: #666; }
#EMW_251128 .EMW_notice > .title { font-size: 22px; line-height: 22px; font-weight: bold; margin-bottom: 20px; }
#EMW_251128 .EMW_notice > ul { font-size: 15px; line-height: 25px; }
#EMW_251128 .EMW_notice > ul li { list-style: disc; list-style-position: outside; margin-left: 18px; text-align: justify; }

/* 10) RWD 響應式 */
/* --- 1024 --- */
@media only screen and (max-width:1024px) {
  /* Hero */
  #EMW_251128 .EMW-topBanner { height: 45vw; min-height: 350px; }
  #EMW_251128 .EMW-topBanner-text { left: 6vw; bottom: 6vw; }
  #EMW_251128 .EMW-topBanner-text > h1 { font-size: 40px; line-height: 45px; }
  #EMW_251128 .EMW-topBanner-text > h2 { font-size: 36px; line-height: 41px; }
  /* Opening */
  #EMW_251128 .EMW-opening { padding: 50px 8%; border-radius: 0 0 30px 30px; }
  #EMW_251128 .EMW-opening > h2 { margin: 0 auto 20px; font-size: 32px; }
  #EMW_251128 .EMW-opening > p { margin: 0 auto 20px; }
  /* Who For */
  #EMW_251128 .EMW_whoFor_icon > img { width: 90%; max-width: 250px; }
  /* Contact */
  #EMW_251128 .EMW-contact-infoBox > h3 { font-size: 24px; }
}

/* --- 800 --- */
@media only screen and (max-width:800px) {
  #EMW_251128 .EMW_whoFor_box { width: 80%; margin: 0 auto 30px; float: none; display: table; }
  #EMW_251128 .EMW_whoFor_box:last-child { margin: 0 auto 0; }
}

/* --- 768 --- */
@media only screen and (max-width:768px) {
  /* Title Bar */
  #EMW_251128 .EMW-title { margin: 50px auto 30px; border-radius: 0 30px 0 0; background-position: 25px 0; }
  #EMW_251128 .EMW-title > h2 { font-size: 28px; line-height: 28px; padding: 12px 0 10px; margin-left: 80px; }
  /* Contact */
  #EMW_251128 .EMW-contact-infoBox > h3 { margin-bottom: 10px; }
  #EMW_251128 .EMW-contact-infoBox { width: 100%; float: none; margin-bottom: 30px; }
  #EMW_251128 .EMW-contact-infoBox:last-child { margin-bottom: 0; }
  #EMW_251128 .EMW_outline { margin-top: -30px; border-radius: 0 0 30px 30px; }
  #EMW_251128 .EMW-contact-infoBox > ul { margin-left: 18px; padding-left: 20px; }
  #EMW_251128 .EMW_outline .EMW_outline_table { margin: 2.5% auto; }
  #EMW_251128 .outline-time { font-size: 22px; padding: 10px 10px; width: 25%; }
  #EMW_251128 .outline-info { padding: 20px; }
  #EMW_251128 .outline-info > h4 { line-height: 1.3em; }
  #EMW_251128 .outline-title { font-size: 21px; line-height: 60px; }
}

/* --- 580 --- */
@media only screen and (max-width:580px) {
  #EMW_251128 .EMW-opening > h2 { font-size: 28px; }
  #EMW_251128 .EMW_whoFor_box { width: 100%; }
}

/* --- 500 --- */
@media only screen and (max-width:500px) {
  #EMW_251128 .EMW-opening > h2 { font-size: 26px; }
}

/* --- 480 --- */
@media only screen and (max-width:480px) {
  #EMW_251128 .EMW-topBanner { min-height: 250px; }
  #EMW_251128 .EMW-topBanner-text > h1 { font-size: 28px; line-height: 30px; }
  #EMW_251128 .EMW-topBanner-text > h2 { font-size: 21px; margin-bottom: 0; }

  #EMW_251128 .EMW-opening > h2 { font-size: 23px; }
  #EMW_251128 .EMW-title > h2 { font-size: 24px; margin-left: 70px; }
  #EMW_251128 .EMW_courseHL_text > h3 { font-size: 22px; }
  #EMW_251128 .EMW_whoFor_text > h3 { font-size: 22px; }
  #EMW_251128 .outline-info > h4 { font-size: 20px; }
  #EMW_251128 .outline-title { font-size: 21px; }
  #EMW_251128 .outline-time { font-size: 18px; }

  #EMW_251128 .EMW_notice > .title { font-size: 20px; margin-bottom: 15px; }
  #EMW_251128 .EMW-opening > p { font-size: 16px; margin-bottom: 15px; }
  #EMW_251128 .EMW_courseHL_text > p { font-size: 16px; line-height: 26px; }
  #EMW_251128 .EMW_whoFor_text > p { font-size: 16px; line-height: 26px; }
  #EMW_251128 .outline-info > p { font-size: 16px; line-height: 26px; }

  #EMW_251128 .EMW-contact-infoBox > h3 { font-size: 18px; padding-left: 35px; }
  #EMW_251128 .EMW-contact-infoBox > ul { padding-left: 13px; margin-left: 13px; }
  #EMW_251128 .EMW-contact-infoBox > ul li { font-size: 15px; }
  #EMW_251128 .EMW_notice > ul { font-size: 14px; }

  #EMW_251128 .EMW-opening { padding: 30px 8%; }
  #EMW_251128 .EMW-title { background-position: 20px 0; }
  #EMW_251128 .EMW_courseHL { margin-bottom: 30px; }
  #EMW_251128 .EMW_outline { margin-bottom: 50px; }
  #EMW_251128 .EMW-contact-info { margin-bottom: 50px; }
  #EMW_251128 .EMW_notice { margin-bottom: 50px; }
}

/* --- 390 --- */
@media only screen and (max-width:390px) {
  #EMW_251128 .EMW-contact-infoBox > ul li { font-size: 14px; }
}