@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ 最新消息分類色對應 ************/
.news-sort-type-1 { background-color: #304FAB;} /*一般消息*/
.news-sort-type-2 { background-color: #410952;} /*演講公告*/
.news-sort-type-3 { background-color: #FFA200;} /*獎學金*/
.news-sort-type-4 { background-color: #103C82;} /*榮譽榜*/
.news-sort-type-5 { background-color: #80735A;} /*招生/徵才*/
.news-sort-type-6 { background-color: #06B780;} /*活動花絮*/
/* 顏色組合同上 */
.news-date-type-1 { color: #304FAB;}
.news-date-type-2 { color: #410952;}
.news-date-type-3 { color: #FFA200;}
.news-date-type-4 { color: #103C82;}
.news-date-type-5 { color: #80735A;}
.news-date-type-6 { color: #06B780;}

/************ 研究分類色 ************/
.rp-sort-type-1 { background-color: #1A3F5B;} /*系統*/
.rp-sort-type-2 { background-color: #80735A;} /*聯網*/
.rp-sort-type-3 { background-color: #103C82;} /*訊息學*/
.rp-sort-type-4 { background-color: #FFA200;} /*電磁*/


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


img[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}

.page-scholarship-sec1-con .content .infor-box .linkto { clear: both; width: 160px; margin: 20px 0 0 0;}
.page-scholarship-sec1-con .content .infor-box .linkto a { width: 100%; padding: 3px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 14px; background-color: #00C8FF; display: block;}


@media screen and (min-width: 1600px) {

  #gotop-bt { width: 60px; height: 60px; border-radius: 100%; background-color: #1D253E; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 50px; right: 20px; cursor: pointer; z-index: 10000;}
  #gotop-bt span.icon { color: #fff; font-size: 2em;}


  /************ header + nav ************/

  header { width: 100%; position: relative;}

  .header-top-logo { width: 200px; position: absolute; top: 7px; left: calc(50% - 780px);}
  .header-top-logo img { width: 100%; height: auto;}

  .header-top-bar { width: 100%; height: 47px; padding: 7px calc(50% - 780px); box-sizing: border-box; background-color: #000; display: flex; justify-content: flex-end; align-items: center;}
  .header-top-bar .top-nav-mo-icon { display: none;}
  .header-top-bar ul.top-nav-mo { display: none;}
  .header-top-bar ul.top-nav { padding: 0; margin: 0; color: #FF9200; font-size: 0.9em; line-height: 1em; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
  .header-top-bar ul.top-nav li { padding: 0 10px; margin: 0; border-right: 1px #FF9200 solid;}
  .header-top-bar ul.top-nav li:last-child { border-right: 0;}
  .header-top-bar ul.top-nav li a { color: #FF9200; text-decoration: none;}
  .header-top-bar ul.top-nav li a:hover { border-bottom: 1px #FF9200 solid;}
  .header-top-bar .top-search { padding: 2px 0; margin: 0 20px; color: #151C51; background-color: #fff;}
  .header-top-bar .top-search form { display: flex; justify-content: flex-start; align-items: center;}
  .header-top-bar .top-search input[type=search] { padding: 3px 5px; border: 0; color: #151C51; background-color: #fff; box-sizing: border-box;}
  .header-top-bar .top-search input[type=button] { width: 30px; height: 22px; color: #151C51; background-image: url("../images/header_top_search_icon.png"); background-repeat: no-repeat; background-size: 22px 22px; background-position: center top; border: 0; background-color: #fff; cursor: pointer;}
  .header-top-bar .top-social { display: flex; justify-content: center; align-items: center;}
  .header-top-bar .top-social img.icon { width: 30px; height: 30px; margin: 0 5px;}

  .header-bt-bar { clear: both; width: 100%; padding: 20px calc(50% - 780px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-bt-bar .ntcu-logo { width: 400px;}
  .header-bt-bar .ntcu-logo img { width: 366px; height: auto;}

  nav#header-nav-mo { display: none;}

  nav#header-nav-pc { width: calc(100% - 400px);}
  nav#header-nav-pc ul#nav-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#header-nav-pc ul#nav-list li { height: 53px; padding: 10px; margin: 0; box-sizing: border-box; position: relative; cursor: pointer;}
  nav#header-nav-pc ul#nav-list li.longer { width: 160px;}
  nav#header-nav-pc ul#nav-list li.longer a { width: 160px;}
  nav#header-nav-pc ul#nav-list li.shorter { width: 90px;}
  nav#header-nav-pc ul#nav-list li.shorter a { width: 90px;}
  nav#header-nav-pc ul#nav-list li a { height: 53px; padding: 13px 0 0 40px; box-sizing: border-box; color: #265384; font-size: 1.1rem; font-weight: 500; line-height: 1em; text-decoration: none; display: block;}
  nav#header-nav-pc ul#nav-list li a:hover { background-image: url("../images/nav_mouseover.jpg"); background-repeat: no-repeat; background-size: 130px 33px; background-position: left center;}
  nav#header-nav-pc ul#nav-list li a.sel { background-image: url("../images/nav_mouseover.jpg"); background-repeat: no-repeat; background-size: 130px 33px; background-position: left center;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup { clear: both; width: 130px; padding: 0; margin: 0; background-color: rgba(16,60,130,0.5); list-style: none; display: none; position: absolute; top: 53px; left: 20px; z-index: 9999;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li { width: 130px; height: auto; padding: 0; margin: 0; border-bottom: 1px #000024 solid;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li:last-child { border-bottom: 0;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li a { width: 100%; height: auto; padding: 10px 0; margin: 0; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.2em; text-align: center; text-decoration: none; background-image: none; display: block;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li a:hover { color: #FFE5B4; background-color: #103C82; background-image: none;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%;}

  img.hp-banner { width: 96%; margin: 0 2%; height: auto;}


  /************ secetion #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 50px 0 0 0;}

  .page-hp-sec-1-con { width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; position: relative;}
  .page-hp-sec-1-con .content { width: 100%; padding: 40px 30px 75px 30px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative;}
  .page-hp-sec-1-con .content .sub-title { margin: 25px 0 40px 330px; display: flex; justify-content: flex-start; align-items: center;}
  .page-hp-sec-1-con .content .sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-1-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box { width: calc(100% / 4 - 30px); margin: 0 15px;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box:hover { -moz-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3);}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a { width: 100%; padding: 35px 40px 0 40px; text-decoration: none; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: block;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.line-icon { width: 45px; height: auto;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.en { color: #808080; font-size: 0.9rem; font-weight: 300; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.cn { color: #000; font-size: 1.8rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.intro { color: #3A5BA0; font-size: 1.2rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.arrow-icon { width: 25px; height: auto; float: right;}
  .page-hp-sec-1-con .blue-block { width: calc(50% - 740px + 320px); height: 370px; background-color: #1D253E; display: block; position: absolute; top: 40px; left: 0; z-index: 1;}

  .page-hp-sec-1-con .content .pro-technology-list-mo { display: none;}
  .page-hp-sec-1-con .content .pro-technology-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box { width: calc(25% - 30px); margin: 0 15px; background-color: #fff; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box a { text-decoration: none;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style1 { border: 5px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style2 { border: 5px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style3 { border: 5px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style4 { border: 5px #FF9200 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title { width: 100%; padding: 30px 20px 20px 20px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style1 { color: #fff; background-color: #1A3F5B;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style2 { color: #000; background-color: #80735A;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style3 { color: #fff; background-color: #103C82;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style4 { color: #000; background-color: #FF9200;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title span.en { opacity: 0.5; padding: 0 0 15px 0; font-size: 1.2em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title span.cn { font-size: 2.6rem; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor { width: 100%; padding: 15px 40px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text { width: 100%; padding: 15px 0; color: #3A5BA0; font-size: 1.6rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style1 { border-bottom: 2px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style2 { border-bottom: 2px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style3 { border-bottom: 2px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style4 { border-bottom: 2px #FF9200 solid;}

  .more-pro-tech-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .more-pro-tech-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-pro-tech-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; position: relative;}

  img.hp-topnews-banner { width: 57vw; height: auto; position: absolute; top: 0; right: 0;}

  .page-hp-sec-2-con { width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box;}
  .page-hp-sec-2-con .content { width: 100%; padding: 9vw 70px 70px 70px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-hp-sec-2-con .content .sub-title { margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-hp-sec-2-con .content .sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-2-con .content .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-2-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  .page-hp-sec-2-con .content .top-news-list { clear: both; width: 100%;}
  .page-hp-sec-2-con .content .top-news-list .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-2-con .content .top-news-list .news-list .sort { width: 200px; padding: 12px; color: #fff; font-size: 1.2rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .date { width: 180px; padding: 12px; font-size: 1.4rem; font-weight: 500; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title { width: calc(100% - 200px - 180px); padding: 10px; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a { color: #414141; font-size: 1.2rem; line-height: 1.3em; text-decoration: none;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a:hover { color: #043B6F;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}

  .more-news-bt { clear: both; width: 150px; float: right;}
  .more-news-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-news-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; padding: 60px 0 100px 0; background-image: url("../images/hp_sec3_bg.png"); background-repeat: no-repeat; background-size: 750px auto; background-position: right bottom; position: relative;}

  .hp-sec3-blue-block { width: 100%; height: 400px; background-color: #1D253E; display: block; position: absolute; top: 60px; left: 0; z-index: 1;}

  .page-hp-sec-3-con { width: 100%; padding: 40px calc(50% - 740px) 0 calc(50% - 740px); box-sizing: border-box; position: relative; z-index: 2;}
  .page-hp-sec-3-con .sub-title { width: 100%; margin: 0 0 50px 0; display: flex; justify-content: center; align-items: center;}
  .page-hp-sec-3-con .sub-title span.cn { color: #fff; font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-3-con .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-3-con .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  
  .latest-articles-list-mo { display: none;}
  .latest-articles-list { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .latest-articles-list .article-box { width: calc(100% / 3 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .latest-articles-list .article-box a { width: 100%; text-decoration: none; display: block;}
  .latest-articles-list .article-box a .pic { width: 100%; height: 360px; overflow: hidden;}
  .latest-articles-list .article-box a .pic img { width: 100%; height: auto;}
  .latest-articles-list .article-box a .date { width: 100%; padding: 0 30px 10px 30px; box-sizing: border-box;}
  .latest-articles-list .article-box a .date span { color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; float: left;}
  .latest-articles-list .article-box a .date .sort { width: 120px; padding: 6px 0; color: #FFA200; font-size: 1.1em; line-height: 1em; text-align: center; border-radius: 14px; background-color: #FFE5B4; float: right;}
  .latest-articles-list .article-box a .teachers { clear: both; width: 100%; padding: 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list .article-box a .name { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list .article-box a img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .latest-articles-list .article-box a .title { clear: both; width: 100%; height: 100px; padding: 20px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .latest-articles-list .article-box a .title p { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .latest-articles-list .article-box a .excerpt { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: right; box-sizing: border-box;}
  .latest-articles-list .article-box a .intro { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #808080; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .hp-sec3-more-bt { clear: both; width: 70%; margin: 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: center; align-items: center;}
  .hp-sec3-more-bt img.arrow-lf { width: 60px; height: auto;}
  .hp-sec3-more-bt img.arrow-rt { width: 60px; height: auto;}
  .hp-sec3-more-bt .more-bt { width: 100px;}
  .hp-sec3-more-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .hp-sec3-more-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ page banner ************/

  .page-banner-box { clear: both; width: 100%; position: relative;}
  .page-banner-box img { width: 100%; height: auto;}
  .page-banner-box .text { width: 400px; color: #fff; font-size: 3rem; font-weight: 300; line-height: 1.4em; position: absolute; bottom: 40px; left: calc(50% - 740px);}


  /************ section#page-about1 ************/

  section#page-about1-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about1_sec1_bg.png"); background-repeat: no-repeat; background-size: 815px auto; background-position: left bottom; position: relative; z-index: 1;}

  .bread-crumbs { width: calc(100% - 40px); position: absolute; top: 0; left: 0; z-index: 2;}
  .bread-crumbs img.bg { width: 580px; height: auto;}
  .bread-crumbs span.path { color: #767676; font-size: 0.9rem; line-height: 1.2em; position: absolute; top: 25px; left: 277px;}
  .bread-crumbs span.path a { color: #767676; text-decoration: none;}
  .bread-crumbs span.path a:hover { border-bottom: 1px #767676 dashed;}

  .page-about1-sec1-con { clear: both; width: 100%; padding: 80px 170px 125px 170px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about1-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}

  .page-sub-title { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center;}
  .page-sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}


  section#page-about1-sec2 { clear: both; width: 100%; background-image: url("../images/page_about1_sec2_bg.png"); background-repeat: no-repeat; background-size: 810px auto; background-position: right bottom; position: relative; z-index: 2;}

  .page-about1-sec2-block { clear: both; width: 100%; height: 230px; padding: 0 calc(50% - 740px) 0 0; box-sizing: border-box; background-color: #0D3255;}
  .page-about1-sec2-block img.banner { width: 1100px; height: auto; margin: -60px 0 0 0; float: right;}

  .page-about1-sec2-con { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; position: relative; z-index: 1;}
  .page-about1-sec2-con .content { clear: both; width: 100%; padding: 30px 170px 40px 170px; box-sizing: border-box; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph; background-color: rgba(231,238,246,0.5);}
  .page-about1-sec2-con .content img.pic1 { width: 620px; height: auto; margin: 30px 0 0 0;}
  
  .page-about1-sec2-con .content img.pic2 { width: 400px; height: auto; margin: 0 0 20px 20px; float: right;}
  .page-about1-sec1-con .content img.pic3 { max-width: 100%; height: auto; margin: 0 0 40px 0;}


  /************ section#page-about2 ************/

  section#page-about2-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative; z-index: 1;}

  .page-about2-sec1-con { clear: both; width: 100%; padding: 80px 80px 0 80px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about2-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 1em; text-align: justify; text-justify: inter-ideograph; border-left: 4px #FFA200 solid; box-sizing: border-box;}
  .page-about2-sec1-con .content .stitle-box { clear: both; width: 100%; min-height: 64px; background-image: url("../images/page_about2_stitle_bg.png"); background-repeat: no-repeat; background-size: 349px auto; background-position: left top;}
  .page-about2-sec1-con .content .stitle-box .title { width: calc(100% - 349px); padding: 0 0 0 0; float: right;}
  .page-about2-sec1-con .content .stitle-box .title span { padding: 9px 20px 10px 0; color: #fff; font-size: 1.4em; font-weight: 600; line-height: 1.4em; background-color: #FFA200; display: block;}
  .page-about2-sec1-con .content .text-con { clear: both; width: 100%; padding: 30px 100px 60px 100px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text .icon { width: 35px;}
  .page-about2-sec1-con .content .text-con .big-text .list { width: calc(100% - 35px);}
  .page-about2-sec1-con .content .text-con .text-1 { width: calc(100% - 434px);}
  .page-about2-sec1-con .content .text-con .text-1 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-1 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-1 { width: 434px; padding: 0 0 0 80px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-1 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-1 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-2 { width: calc(100% - 520px);}
  .page-about2-sec1-con .content .text-con .text-2 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-2 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-2 { width: 520px; padding: 0 0 0 50px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-2 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-2 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-3 { width: calc(100% - 420px);}
  .page-about2-sec1-con .content .text-con .text-3 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-3 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-3 { width: 420px; padding: 0 0 0 70px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-3 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-3 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-5 { width: calc(100% - 480px);}
  .page-about2-sec1-con .content .text-con .text-5 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-5 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-5 { width: 480px; padding: 0 0 0 40px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-5 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-5 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}


  /************ section#page-about3 ************/

  section#page-about3-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-about3-sec1-con { clear: both; width: 100%; padding: 80px 20px 30px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about3-sec1-con .content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about3-sec1-con .content .alumni-news-box { width: calc(100% / 3 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a { width: 100%; text-decoration: none; display: block;}
  .page-about3-sec1-con .content .alumni-news-box a .pic { width: 100%;}
  .page-about3-sec1-con .content .alumni-news-box a .pic img { width: 100%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .date { width: 100%; padding: 10px 30px; color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a img.line { width: 90%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .title { width: 100%; padding: 10px 30px; color: #414141; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a .intro { width: 100%; padding: 0 30px 30px 30px; color: #414141; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .page-content-video { clear: both; width: 80%; margin: 0 auto;}


  /************ section#page-signup ************/

  section#page-signup-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title span.top-title { width: 100%; font-size: 2.2rem; font-weight: 300; line-height: 1.2em; text-align: center;}

  .page-signup-sec1-con { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-signup-sec1-con .content { clear: both; width: 100%;}
  .page-signup-sec1-con .content .signup-notice { width: 80%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}
  .page-signup-sec1-con .content .signup-notice .notice-title { width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .page-signup-sec1-con .content .signup-login { clear: both; width: 80%; margin: 60px auto 0 auto; text-align: center;}
  .page-signup-sec1-con .content .signup-login input[type=text] { width: 180px; padding: 5px 10px; color: #414141; font-size:1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; border-radius: 8px;}
  .page-signup-sec1-con .content .signup-login input[type=button] { width: 180px; padding: 5px 10px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .page-signup-sec1-con .content .signup-login input[type=button]:hover { background-color: #666;}

  .signup-sub-title { clear: both; width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .signup-sub-title span.small { font-size: 1rem;}

  .signup-form-table { clear: both; width: 100%; font-size: 1.1rem;}
  .signup-form-table input[type=text].style1 { width: 200px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}
  .signup-form-table input[type=text].style2 { width: 100px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}

  .signup-form-bt { clear: both; width: 100%; padding: 40px 0 0 0; text-align: center;}
  .signup-form-bt input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-form-bt input[type=button]:hover { background-color: #666;}


  #page-signup-show { clear: both; width: 100%;}
  #page-signup-show .signup-show-sub-title { width: 100%; padding: 30px 0; font-size: 1.4rem; text-align: center;}
  #page-signup-show .signup-show-sub-title span.small { font-size: 1rem;}

  .signup-signature { clear: both; width: 100%; margin: 60px 0; font-size: 1.2rem; display: flex; justify-content: flex-start; align-items: center;}
  .signup-signature .column-lf { width: 60%; display: flex; justify-content: flex-start;}
  .signup-signature .column-rt { width: 40%; display: flex; justify-content: flex-end;}
  .signup-signature .column-lf span.underline, 
  .signup-signature .column-rt span.underline { width: 200px; border-bottom: 1px #414141 solid; display: block;}

  .signup-goback-print { clear: both; width: 100%; text-align: center;}
  .signup-goback-print input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-goback-print input[type=button]:hover { background-color: #666;}


  /************ section#page-about4 ************/

  section#page-about4 { clear: both; width: 100%; background-image: url("../images/page_about4_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 1150px; position: relative; z-index: 1;}

  .page-about4-sec1 { clear: both; width: 100%; padding: 40px calc(50% - 740px) 80px calc(50% - 740px); box-sizing: border-box; position: relative; z-index: 1;}  
  .page-about4-sec1 .group-top-pic { width: 100%;}
  .page-about4-sec1 .group-top-pic img { margin: 0 auto;}

  .page-about4-sec2 { clear: both; width: 100%; padding: 40px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-about4-sec2 .group-title { clear: both; width: 100%; margin: -40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-about4-sec2 .group-title .title-box { width: 35%; height: 265px; padding: 40px 20px 0 calc(50% - 740px + 40px); color: #fff; font-size: 2.6rem; font-weight: 600; line-height: 1.2em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .title-box img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-about4-sec2 .group-title .title-box.style1 { background-color: #1A3F5B;}
  .page-about4-sec2 .group-title .title-box.style2 { background-color: #80735A;}
  .page-about4-sec2 .group-title .title-box.style3 { background-color: #103C82;}
  .page-about4-sec2 .group-title .title-box.style4 { background-color: #FF9200;}
  .page-about4-sec2 .group-title .infor-box { width: 65%; height: 265px; padding: 50px calc(50% - 740px) 0 60px; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .infor-box.style1 { border-bottom: 3px #1A3F5B solid;}
  .page-about4-sec2 .group-title .infor-box.style2 { border-bottom: 3px #80735A solid;}
  .page-about4-sec2 .group-title .infor-box.style3 { border-bottom: 3px #103C82 solid;}
  .page-about4-sec2 .group-title .infor-box.style4 { border-bottom: 3px #FF9200 solid;}
  .page-about4-sec2 .group-title .infor-box span.title { font-size: 1.4rem; font-weight: 600;}
  .page-about4-sec2 .group-teachers { clear: both; width: 100%; padding: 0 calc(50% - 740px); margin: -40px 0 0 0; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list { width: 100%; padding: 100px 40px 40px 40px; box-sizing: border-box; background-color: rgba(226,240,217,0.5);}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-1 { clear: both; width: 170px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-1 { width: 170px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-2 { clear: both; width: 315px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-2 { width: 315px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table { clear: both; width: 100%; padding: 20px 0 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box { width: calc(100% / 6 - 10px); margin: 0 5px 20px 5px;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box a { color: #414141; text-decoration: none;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic { width: 100%; height: 290px; overflow: hidden; display: flex; justify-content: center;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic img { width: auto; height: 100%;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .name { width: 100%; padding: 10px 0; font-size: 1.1rem; line-height: 1em; text-align: center;}


  a.about4-spotlight { 
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 20px;
    position: relative;
    transition: all .3s linear;
    text-decoration: none;
    overflow: hidden;
    float: right;
  }
  
  a.about4-spotlight > p{
    position: relative;
    z-index: 1;
  }
  a.about4-spotlight::before{
      content: "";
      width: 0%;
      height: 100%;
      display: block;
      background-color: #FF9200;
      position: absolute;
      top: 0;
      right: 0;
      transition: all .3s ease;
  }
  a.about4-spotlight:hover{
      color: #fff;
  }
  a.about4-spotlight:hover::before{
      width: 100%;
  }


  /************ section#page-news ************/

  section#page-news-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-news-sec1-con { clear: both; width: 100%; padding: 50px 0 80px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-news-sec1-con .news-sort-all { display: none;}
  .page-news-sec1-con ul.news-sort-nav { width: 100%; padding: 30px 0 30px 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-news-sec1-con ul.news-sort-nav li { width: 145px; padding: 0; margin: 0 10px 10px 10px;}
  .page-news-sec1-con ul.news-sort-nav li a { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; display: block;}
  
  .page-news-top-news-con-mo { display: none;}
  .page-news-top-news-con { width: 100%; padding: 0 0 0 calc(50% - 740px + 75px); box-sizing: border-box; position: absolute; top: 360px; left: 0; z-index: 3;}
  .page-news-top-news-con a { width: 100%; text-decoration: none; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-news-top-news-con .pic { width: 400px; height: 270px; overflow: hidden;}
  .page-news-top-news-con .pic img { width: 100%; height: auto;}
  .page-news-top-news-con .text-con { width: calc(100% - 400px); padding: 0 calc(50% - 740px + 200px + 150px) 0 30px; box-sizing: border-box; background-color: #FFE5B4;}
  .page-news-top-news-con .text-con .sort-date { width: 100%; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-top-news-con .text-con .sort-date .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .page-news-top-news-con .text-con .sort-date .date { width: calc(100% - 200px); padding: 0 0 0 30px; color: #1A3F5B; font-size: 1.4em; line-height: 1em; box-sizing: border-box;}
  .page-news-top-news-con .text-con .title { width: 100%; padding: 20px 0; color: #414141; font-size: 1.4rem; font-weight: 600; line-height: 1.1em;}
  .page-news-top-news-con .text-con .text { width: 100%; color: #414141; font-size: 1rem; line-height: 2.2em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 4; /*行數*/-webkit-box-orient: vertical; white-space: normal;}
  
  .page-news-sec1-con .content { clear: both; width: 100%; padding: 0 75px; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-sec1-con .content .news-list .sort { width: 200px; padding: 12px; color: #fff; font-size: 1.2rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .date { width: 180px; padding: 12px; font-size: 1.4rem; font-weight: 500; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title { width: calc(100% - 200px - 180px); padding: 10px; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title a { color: #414141; font-size: 1.2rem; line-height: 1.3em; text-decoration: none;}
  .page-news-sec1-con .content .news-list .title a:hover { color: #043B6F;}
  .page-news-sec1-con .content .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}


  .page-numbers { clear: both; width: 70%; margin: 60px auto 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-numbers img.arrow-lf { width: 40px; height: auto;}
  .page-numbers img.arrow-rt { width: 40px; height: auto;}
  .page-numbers ul.page-num { width: calc(100% - 120px); padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .page-numbers ul.page-num li { padding: 0; margin: 5px;}
  .page-numbers ul.page-num li a { width: 30px; height: 30px; color: #FFA200; font-size: 0.8rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 100%; background-color: #FFE5B4; display: flex; justify-content: center; align-items: center;}
  .page-numbers ul.page-num li a:hover { color: #FFE5B4; background-color: #FFA200;}
  .page-numbers ul.page-num li a.sel { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-news-content ************/

  .page-news-con-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}

  .page-news-con-top-title-mo { display: none;}
  .page-news-con-top-title { width: 100%; padding: 0 0 0 calc(50% - 740px + 75px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: absolute; top: 80px; left: 0; z-index: 3;}
  .page-news-con-top-title .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center;}
  .page-news-con-top-title .title { width: calc(100% - 200px); padding: 12px 20px; box-sizing: border-box; font-size: 1.2rem; font-weight: 600; line-height: 1.2em; background-color: #FFE5B4;}
  .page-news-con-top-title .date-author { width: 100%; padding: 10px 0;}
  .page-news-con-top-title .date-author span.date { padding: 0 20px 0 0; font-size: 1.4rem; font-weight: 500; line-height: 1em;}
  .page-news-con-top-title .date-author span.author { font-size: 1rem;}

  .page-news-con-sec1-con .content { clear: both; width: 100%; padding: 120px 75px 60px 75px; font-size: 1.2rem; line-height: 1.8em; text-align: justify; box-sizing: border-box;}
  .page-news-con-sec1-con .content a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-news-con-sec1-con .content img { width: 50%; height: auto; margin: 0 auto 30px auto;}
  .page-news-con-sec1-con .content .pic-text { clear: both; width: 50%; margin: -20px auto 40px auto; font-size: 0.9rem; line-height: 1.1em; text-align: center;}
  .page-news-con-sec1-con .content .download-share { clear: both; width: 100%; padding: 30px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-news-con-sec1-con .content .download-share .download { padding: 0 5px; box-sizing: border-box;}
  .page-news-con-sec1-con .content .download-share .download a { text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-con-sec1-con .content .download-share .download a img { width: 26px; height: auto; margin: 0 15px 0 0;}
  .page-news-con-sec1-con .content .download-share .download a span { padding: 5px 0 0 0; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-con-sec1-con .content .download-share .share img { width: 40px; height: auto;}

  .news-video-box { clear: both; width: 70%; margin: 30px auto;}

  table { width: 100%; line-height: 1.2em; border: 1px #ccc solid;}


  /************ section#page-members ************/

  section#page-members-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-members-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .page-members-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-members-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .search-choice-box span input[type=search] { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .members-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-sec1-con .members-list .members-box { width: calc(100% / 5 - 20px); margin: 0 10px 20px 10px; background-color: rgba(231,238,246,0.5);}
  .page-members-sec1-con .members-list .members-box .pic { width: 100%; height: 330px; background-color: #031F35; display: flex; justify-content: center; overflow: hidden;}
  .page-members-sec1-con .members-list .members-box .pic img { width: auto; height: 100%;}
  .page-members-sec1-con .members-list .members-box .name { width: 100%; padding: 10px 20px; box-sizing: border-box; text-align: center;}
  .page-members-sec1-con .members-list .members-box .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box img.line-oran { clear: both; width: calc(100% - 60px); height: auto; margin: 0 auto;}
  .page-members-sec1-con .members-list .members-box .intro { clear: both; width: 100%; padding: 10px 20px; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box;}
  .page-members-sec1-con .members-list .members-box .intro .title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem;}
  .page-members-sec1-con .members-list .members-box .intro .caption { width: 100%; margin: 0 0 5px 0;}
  .page-members-sec1-con .members-list .members-box .intro .column { width: 100%; margin: 0 0 10px 0;/* word-break: break-all; overflow-wrap: break-word;*/ display: block;}
  .page-members-sec1-con .members-list .members-box .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}


  /************ section#page-members-con ************/

  section#page-members-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-sub-title2 { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-sub-title2 .cn { width: 100%; margin: 0 0 10px 0; font-size: 2.8em; font-weight: 300; line-height: 1em; text-align: center;}
  .page-sub-title2 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title2 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-members-con-sec1-con { clear: both; width: 100%; padding: 80px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-con-sec1-con .content-top { width: 100%; padding: 0 calc(50% - 740px) 0 calc(50% - 740px); box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor { width: 100%; padding: 0 70px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex; justify-content: flex-start; align-items: stretch;}
  .page-members-con-sec1-con .content-top .member-infor .pic { width: 600px; height: 400px; background-color: #031F35; display: flex; justify-content: center; overflow: hidden;}
  .page-members-con-sec1-con .content-top .member-infor .pic img { width: auto; height: 100%;}
  .page-members-con-sec1-con .content-top .member-infor .infor { width: calc(100% - 600px); padding: 20px 30px; box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name { width: 100%; padding: 10px 30px; box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor img.line { clear: both; width: 450px; height: auto; margin: 0 0 0 30px;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro { clear: both; width: 100%; padding: 10px 30px; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .title { width: 100%; margin: 0 0 30px 0; font-size: 1.4rem;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .caption { width: 90px; margin: 0 10px 15px 0; text-align: right;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column { width: calc(100% - 100px); margin: 0 0 10px 0; word-break: break-all; overflow-wrap: break-word; display: block;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .member-detail-tab { clear: both; width: 100%; padding: 20px calc(50% - 740px); box-sizing: border-box; background-color: #1D253E;}
  .page-members-con-sec1-con .member-detail-tab img.line { width: 92%; height: auto; margin: 0 auto;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li { padding: 0; margin: 0 10px 10px 10px;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a { padding: 3px 20px; color: #fff; font-size: 1.4em; line-height: 1em; text-align: center; text-decoration: none; border: 1px #3391FD solid;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a:hover { background-color: #3391FD;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a.sel { background-color: #3391FD;}

  .page-members-con-sec1-con .content-bottom { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box;}
  .page-members-con-sec1-con .content-bottom ul.detail-content { width: 100%; padding: 40px 70px; margin: 0; box-sizing: border-box; list-style: none; background-color: rgba(231,238,246,0.5); display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li { width: 100%; padding: 0; margin: 0 0 20px 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar { width: 100%; border-bottom: 1px #FFA200 solid; display: flex; justify-content: space-between; align-items: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-up { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: none; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-down { display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-down { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-up { display: flex;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle { width: 320px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 { width: 440px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 { width: 660px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table { clear: both; width: 100%; padding: 20px 0; font-size: 1.2rem; line-height: 1.8em; text-align: justify; display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .detail-list-table { display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table { clear: both; width: 100%; padding: 20px 10px 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .sub-title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; text-align: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor { width: calc(100% / 3 - 20px); margin: 0 10px 20px 10px; padding: 5px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic { width: 30%;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic img { width: 100%; height: auto;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro { width: 70%; font-size: 0.9rem; line-height: 1.2em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul { width: 100%; padding: 0 0 0 24px; margin: 0; list-style: disc; box-sizing: border-box; display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul li { padding: 0; margin: 0 0 5px 0; word-wrap: break-word; word-break: break-all;}


  .page-members-back-bt { clear: both; width: 60%; margin: 40px auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-members-back-bt img.arrow-lf { width: 60px; height: auto;}
  .page-members-back-bt img.arrow-rt { width: 60px; height: auto;}
  .page-members-back-bt .more-bt { width: 100px;}
  .page-members-back-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .page-members-back-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-lab ************/

  section#page-lab-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-lab-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .page-lab-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-lab-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}

  .page-lab-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-lab-list-table .lab-list-box { width: calc(100% / 3 - 30px); padding: 10px; margin: 0 15px 30px 15px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-lab-list-table .lab-list-box:hover { -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); -webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2);}
  .page-lab-list-table .lab-list-box .photo { width: 100%; height: 220px; overflow: hidden;}
  .page-lab-list-table .lab-list-box .photo img { width: 100%; height: auto;}
  .page-lab-list-table .lab-list-box .photo a { width: 100%; height: 100%; display: block;}
  .page-lab-list-table .lab-list-box .intro { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; line-height: 2em;}
  .page-lab-list-table .lab-list-box .intro .title { width: 100%; padding: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2em;}
  .page-lab-list-table .lab-list-box .intro a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  .lab-articles-list { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .lab-articles-list .article-box { width: calc(100% / 3 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .lab-articles-list .article-box .pic { width: 100%; height: 270px; overflow: hidden;}
  .lab-articles-list .article-box .pic img { width: 100%; height: auto;}
  .lab-articles-list .article-box .teachers { clear: both; width: 100%; padding: 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box .name { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .lab-articles-list .article-box .title { clear: both; width: 100%; height: 140px; padding: 20px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.4em; box-sizing: border-box; overflow-wrap: break-word; word-break: break-all;}
  .lab-articles-list .article-box .title p { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
  .lab-articles-list .article-box .title p a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  /************ section#page-lab-con ************/

  section#page-lab-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_lab_con_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-lab-con-banner { clear: both; width: 100%; background-color: #031F35; position: relative;}
  .page-lab-con-banner img.banner-bg { width: 78vw; height: auto; margin: 0 auto;}
  .page-lab-con-banner .lab-title { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}
  .page-lab-con-banner .lab-title span { padding: 1vw 3vw; color: #000; font-size: 2.2vw; font-weight: 700; line-height: 1em; text-align: center; background-color: rgba(247,255,255,0.5);}

  .page-lab-con-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-con-sec1-con .lab-con-title { width: 100%; padding: 40px 0 10px calc(50% - 740px + 110px); box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-title span.caption { color: #1A3F5B; font-size: 1.8em; font-weight: 300; line-height: 1em;}
  .page-lab-con-sec1-con .lab-con-title span.name { font-size: 2.2em; line-height: 1em;}
  .page-lab-con-sec1-con img.line { clear: both; width: 825px; height: auto;}

  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor { clear: both; width: 100%; padding: 50px 110px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo { width: 240px;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo img { width: 100%; height: auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor { width: calc(100% - 240px); padding: 0 0 0 40px; font-size: 1.1rem; line-height: 1.8em; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-cn { font-size: 2rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-en { font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor hr { width: 100%; margin: 20px 0; border: 1px #eee solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}
  
  .page-lab-con-sec1-con ul.lab-con-tab { clear: both; width: 100%; padding: 0 calc(50% - 740px); margin: 10px 0; box-sizing: border-box; list-style: none; background-color: rgba(255,229,180,0.5); display: flex; justify-content: center; flex-wrap: wrap;}
  .page-lab-con-sec1-con ul.lab-con-tab li { padding: 0; margin: 0;}
  .page-lab-con-sec1-con ul.lab-con-tab li a { padding: 20px; color: #FFA200; font-size: 1.2rem; line-height: 1em; text-decoration: none; display: block;}
  .page-lab-con-sec1-con ul.lab-con-tab li a:hover { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  .page-lab-con-sec1-con ul.lab-con-tab li a.sel { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  
  .page-lab-con-sec1-con .lab-con-detail { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content { width: 100%; padding: 40px 20px; box-sizing: border-box; border-top: 15px #031F35 solid; background-color: rgba(231,238,246,0.5);}
  .page-lab-con-sec1-con .lab-con-detail .content div { display: none; font-size: 1.2rem; line-height: 1.8em; text-align: justify;}

  .page-lab-con-sec1-con .lab-con-detail .content div table a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full { width: 100%; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-1 { width: 120px; padding: 15px 10px; color: #FF9200; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-2 { width: calc(100% - 220px); padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 { width: 100px; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a { width: 100%; padding: 5px 0; color: #FF9200; font-size: 1rem; line-height: 1rem; text-align: center; text-decoration: none; border-radius: 16px; background-color: #FFE5B4; display: block;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a:hover { color: #fff; background-color: #FF9200;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle { width: 290px; padding: 10px 0 10px 10px; margin: 0 0 30px 0; color: #fff; font-size: 2rem; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle img { width: 140px; height: auto; margin: 0 10px 0 0;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box { clear: both; width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box img.icon { width: 100px; height: auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box span.title { padding: 8px 20px 8px 10px; margin: 0 0 0 -18px; color: #000; font-size: 1.6em; font-weight: 500; line-height: 1.2em; background-color: #FFA200;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle { clear: both; width: 100%; margin: 0 0 20px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle img.title { width: auto; height: 50px;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-2 { width: 25%; padding: 15px 10px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-2 { width: 90%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-2 { width: 90%; padding: 15px 10px; box-sizing: border-box;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full { width: 100%; color: #031F35; font-weight: 600; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-2 { width: 30%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-3 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-4 { width: 35%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-5 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full { width: 100%; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full:nth-child(odd) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-2 { width: 30%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-3 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-4 { width: 35%; padding: 15px 10px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 a { padding: 8px 10px; color: #fff; text-align: center; text-decoration: none; border-radius: 6px; background-color: #356588; display: block;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-1 { width: 8%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-2 { width: 75%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-3 { width: 17%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-1 { width: 8%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-2 { width: 75%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 { width: 17%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .list-year { clear: both; width: 100%; padding: 0 0 30px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list { clear: both; width: 100%; padding: 0 0 0 80px; margin: 0 0 40px 0; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list .list { width: 100%; padding: 13px 0; border-bottom: 1px #B3B3B3 solid;}

  .page-lab-con-sec1-con .lab-con-detail .content ul { list-style-type: circle;}
  .page-lab-con-sec1-con .lab-con-detail .content ul li { padding: 0 0 20px 0;}

  .lab-con-members-list-table { clear: both; width: 100%; margin: 0 0 40px 0; display: flex !important; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor { width: calc(50% - 20px); padding: 10px; margin: 0 10px 20px 10px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex !important; justify-content: flex-start; align-items: flex-start;}
  .lab-con-members-list-table .teacher-master-infor .photo { width: 47%; height: 380px; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .teacher-master-infor .photo img { width: auto; height: 100%;}  
  .lab-con-members-list-table .teacher-master-infor .intro { width: 53%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .teacher-master-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6rem;}
  .lab-con-members-list-table .teacher-master-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con p { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 { width: calc(100% - 50px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float2 { width: 120px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 { width: calc(100% - 120px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}

  .lab-con-members-list-table .researcher-infor { width: calc(100% / 2 - 20px); padding: 10px; margin: 0 10px 20px 10px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex !important; justify-content: flex-start; align-items: flex-start;}
  .lab-con-members-list-table .researcher-infor .photo { width: 47%; height: 380px; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .researcher-infor .photo img { width: auto; height: 100%;}  
  .lab-con-members-list-table .researcher-infor .intro { width: 53%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .researcher-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6rem;}
  .lab-con-members-list-table .researcher-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .researcher-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con p.text { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 { width: calc(100% - 50px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float2 { width: 120px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 { width: calc(100% - 120px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  
  .lab-con-members-list-table .student-infor { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px 20px 10px; background-color: rgba(231,238,246,0.5); box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .photo { clear: both; width: 100%; height: 380px; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .student-infor .photo img { width: auto; height: 100%;}
  .lab-con-members-list-table .student-infor .intro { width: 100%; padding: 10px; font-size: 1.2rem; line-height: 1.6rem; box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .intro .name { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2rem; text-align: center;}
  .lab-con-members-list-table .student-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .student-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .student-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .student-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 { width: calc(100% - 50px); margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}


  /************ section#page-admissions ************/

  section#page-admissions-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 120% auto; background-position: center -20vw; position: relative; z-index: 1;}

  .page-admissions-sec1-con { clear: both; width: 100%; padding: 0 120px 80px 120px; box-sizing: border-box;}
  .page-admissions-sec1-con .content { clear: both; width: 100%; padding: 80px 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-admissions-sec1-con .content .column-half { width: 600px; margin: 0 50px; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-admissions-sec1-con .content .column-half img.title { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box { width: 100%; margin: -80px 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links { width: 90px; margin: 0 13px; position: relative;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links img { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a { width: 100%; height: 100%; padding: 90px 0 0 23px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: flex-start; position: absolute; top: 0; left: 0;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a span { color: #fff; font-size: 2em; line-height: 1em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a:hover span { color: #FFA200;}

  .page-admissions-sec2-con { clear: both; width: 100%; padding: 0 0 80px 0; box-sizing: border-box;}
  .page-admissions-sec2-con .content { clear: both; width: 100%; padding: 80px 0;}
  .page-admissions-sec2-con .content .stitle-box { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-admissions-sec2-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-admissions-sec2-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2em; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-admissions-sec2-con .content .content-text { clear: both; width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  .page-admissions-sec2-con .content .content-text a { color: #3391FD; text-decoration: none;}
  .page-admissions-sec2-con .content .content-text a:hover { color: #103C82;}
  
  ul.chinese-num { width: 100%; padding: 0 0 0 60px; margin: 0; box-sizing: border-box; list-style-type:cjk-ideographic; display: block;}
  ul.chinese-num li { width: 100%; padding: 0; margin: 0;}


  /************ section#page-scholarship ************/

  section#page-scholarship-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: no-repeat; background-size: 120% auto; background-position: center -20vw; position: relative; z-index: 1;}

  .page-scholarship-sec1-con { clear: both; width: 100%; padding: 0 0 80px 0; box-sizing: border-box;}
  .page-scholarship-sec1-con .content { clear: both; width: 100%; padding: 80px 0 0 0;}
  .page-scholarship-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-scholarship-sec1-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-scholarship-sec1-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2em; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-scholarship-sec1-con .content .infor-box { width: 100%; padding: 25px 160px 0 100px; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}
  .page-scholarship-sec1-con .content .infor-box button.linkto { clear: both; margin: 20px 0 0 0; padding: 3px 30px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 14px; background-color: #00C8FF; cursor: pointer;}
  .page-scholarship-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-scholarship-sec1-con .content img.pic { clear: both; width: 75%; height: auto; margin: 60px auto 0 auto;}

  
  /************ section#page-research ************/

  section#page-research-sec1 { clear: both; width: 100%; padding: 40px calc(50% - 740px) 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-research-sec1-con { clear: both; width: 100%; padding: 40px 0 60px 0; box-sizing: border-box;}
  .page-research-sec1-con .research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-research-sec1-con .research-list-table .column-full { width: calc(100% / 4 - 10px); margin: 0 5px 20px 5px;}
  .page-research-sec1-con .research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .page-research-sec1-con .research-list-table .column-full a:hover { background-color: rgba(255,255,255,0.4);}
  .page-research-sec1-con .research-list-table .column-full .column-1 { width: 100%; height: 200px; overflow: hidden;}
  .page-research-sec1-con .research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .page-research-sec1-con .research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .page-research-sec1-con .research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .page-research-sec1-con .research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}

  .research-plan-sort-icon { display: none;}
  
  ul.research-plan-sort-nav { clear: both; width: 100%; padding: 0; margin: 0 0 40px 0; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  ul.research-plan-sort-nav li { width: 140px; padding: 0; margin: 0 10px 20px 10px;}
  ul.research-plan-sort-nav li a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; text-decoration: none; border-radius: 8px; background-color: #1A3F5B; display: block;}
  ul.research-plan-sort-nav li a:hover { background-color: #103C82;}
  ul.research-plan-sort-nav li a.sel { background-color: #80735A;}


  .hp-research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-research-list-table .column-full { width: calc(100% / 4 - 10px); margin: 0 5px 20px 5px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .hp-research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .hp-research-list-table .column-full a:hover { background-color: rgba(255,255,255,0.4);}
  .hp-research-list-table .column-full .column-1 { width: 100%; height: 200px; overflow: hidden;}
  .hp-research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .hp-research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .hp-research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .hp-research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}


  /************ section#page-research-con ************/

  section#page-research-con-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-research-con-sec1-con { clear: both; width: 100%; padding: 40px 0 60px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-research-con-sec1-con .content { width: 100%; padding: 40px; font-size: 1.2rem; line-height: 1.8em; text-align: justify; box-sizing: border-box;}
  .page-research-con-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-research-con-sec1-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-research-con-sec1-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2rem; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-research-con-sec1-con .content .infor-box { width: 100%; padding: 25px 160px 0 100px; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box img.pic { clear: both; width: 75%; height: auto; margin: 30px auto 0 auto;}
  .page-research-con-sec1-con .content .infor-box .pic-text { clear: both; width: 75%; padding: 20px 0 30px 0; margin: 0 auto; font-size: 0.8rem; line-height: 1.2em; text-align: center;}


  /************ section#page-course-plan ************/

  section#page-course-plan-sec1 { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title3 { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center;}
  .page-sub-title3 span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title3 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title3 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-course-plan-sec1-con { clear: both; width: 100%; padding: 40px 0 40px 0; box-sizing: border-box; position: relative;}
  .page-course-plan-sec1-con .content { clear: both; width: 100%; padding: 40px calc(50% - 740px) 0 calc(50% - 740px); margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}
  .page-course-plan-sec1-con .content img.course-pc { width: 94%; height: auto; margin: 0 auto 40px auto;}
  .page-course-plan-sec1-con .content img.course-mo { display: none;}
  .page-course-plan-sec1-con .content img.intro-course-pc { width: 70%; height: auto; margin: 0 auto;}
  .page-course-plan-sec1-con .content img.intro-course-mo { display: none;}
  .page-course-plan-sec1-con .content img.pic { clear: both; width: 800px; height: auto; margin: 40px 0 0 3%;}
  
  .page-course-plan-sec1-con .blue-block-bg { width: 100%; height: 105px; background-color: #3A5BA0; display: block; position: absolute; bottom: 160px; left: 0; z-index: 1;}
  
  .page-course-plan-sec1-con .content .text-content { clear: both; width: 90%; margin: 0 auto; font-size: 1.2rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}
  .page-course-plan-sec1-con .content .text-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg { width: 100%; padding: 0; margin: 20px 0; list-style-type: none; display: block;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li { width: 100%; padding: 15px 20px; margin: 0 0 10px 0; box-sizing: border-box; font-size: 1.2rem;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(1) { background-color: rgba(4,144,200,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(2) { background-color: rgba(89,199,243,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(3) { background-color: rgba(219,226,240,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(4) { background-color: rgba(191,218,167,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(5) { background-color: rgba(56,132,199,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(6) { background-color: rgba(226,168,78,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(7) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(8) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}
  .page-course-plan-sec1-con .content .text-content .title { width: 100%; margin: 0 0 20px 0; font-size: 2rem; font-weight: 600; line-height: 1.2em;}
  .page-course-plan-sec1-con .content .text-content ul.dot li { padding: 0; margin: 0;}

  img.page-course-plan-list { clear: both; width: 100%; margin: 40px 0 0 0;}

  .page-feature-sec2-title-1 { clear: both; width: 100%; margin: 0 0 40px 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-feature-sec2-title-1 .line-lf { width: calc(50% - 100px); padding: 30px 0 0 0; display: flex; justify-content: flex-end; overflow: hidden;}
  .page-feature-sec2-title-1 .line-lf img { width: auto; height: 56px}
  .page-feature-sec2-title-1 .line-rt { width: calc(50% - 100px); margin: -30px 0 0 0; overflow: hidden;}
  .page-feature-sec2-title-1 .line-rt img { width: auto; height: 59px;}
  .page-feature-sec2-title-1 .title { width: 200px; color: #2B6490; font-size: 3em; font-weight: 600; line-height: 1em; text-align: center;}

  .page-feature-sec2-content { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-feature-sec2-content .column-lf { width: 50%; padding: 0 0 0 calc(50% - 730px); margin: 0 0 120px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-lf .title-lf { width: 520px; padding: 5px 0; margin: 0 auto 30px auto; color: #fff; font-size: 1.8em; line-height: 1.2em; text-align: center; border-radius: 20px; background-color: #0084B4;}
  .page-feature-sec2-content .column-lf img.con-list-1 { clear: both; width: 718px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .column-rt { width: 50%; padding: 0 calc(50% - 740px) 0 0; margin: 0 0 120px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-rt .title-rt { width: 590px; padding: 5px 0; margin: 90px auto 35px auto; color: #fff; font-size: 1.8em; line-height: 1.2em; text-align: center; border-radius: 40px; background-color: #1D2088;}
  .page-feature-sec2-content .column-rt img.con-list-2 { clear: both; width: 735px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .banner { clear: both; width: 100%; padding: 0 calc(50% - 770px); box-sizing: border-box;}
  .page-feature-sec2-content .banner img { width: 100%; height: auto;}


  /************ section#page-course-online ************/

  section#page-course-online-sec1 { clear: both; width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-course-online-sec1-con { clear: both; width: 100%; padding: 50px 0 60px 0;}
  .page-course-online-sec1-con .content { width: 100%; padding: 30px calc(50% - 740px); background-image: url("../images/page_course_onling_bg.png"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-course-online-sec1-con .content .course-title { clear: both; width: 100%; padding: 30px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .page-course-online-sec1-con .content .course-title:first-child { padding: 0 0 30px 0;}
  
  .course-online-list-table { clear: both; width: 100%; background-color: rgba(231,238,246,0.5);}
  .course-online-list-table .caption-full { width: 100%; color: #1A3F5B; font-size: 1.6rem; font-weight: 300; line-height: 1em; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .course-online-list-table .caption-full .caption-1 { width: 25%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-2 { width: 35%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-3 { width: 26%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-4 { width: 14%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full { width: 100%; color: #1A3F5B; font-size: 1.1rem; line-height: 1.4em; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .course-online-list-table .column-full:nth-child(odd) { background-color: #fff;}
  .course-online-list-table .column-full .column-1 { width: 25%; padding: 20px; font-weight: 500; box-sizing: border-box;}
  .course-online-list-table .column-full .column-2 { width: 35%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-3 { width: 26%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 { width: 14%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 a { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; background-color: #356588; display: block;}
  .course-online-list-table .column-full .column-5 { width: 100%; padding: 20px; font-size: 0.9rem; line-height: 1.6em; border-top: 1px #ccc dashed; box-sizing: border-box; word-break: break-all;}
  .course-online-list-table .column-full .column-5 a { color: #FFA200; text-decoration: none;}


  /************ section#page-download ************/

  section#page-download-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 740px); box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 120% auto; background-position: center -20vw; position: relative; z-index: 1;}

  .page-download-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-download-sec1-con .content { clear: both; width: 100%; padding: 40px 0;}
  .page-download-sec1-con .content .stitle-box { width: 296px; margin: 0 auto; position: relative;}
  .page-download-sec1-con .content .stitle-box img.bg { width: 100%; height: auto;}
  .page-download-sec1-con .content .stitle-box span { color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1em; position: absolute; top: 6px; left: 100px;}
  .page-download-sec1-con .content ul.download-list { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: block;}
  .page-download-sec1-con .content ul.download-list li { width: 100%; padding: 0; margin: 50px auto;}
  .page-download-sec1-con .content ul.download-list li a { width: 900px; height: 74px; padding: 6px 0 0 90px; color: #fff; font-size: 1.8em; font-weight: 500; line-height: 1.2em; text-decoration: none; background-image: url("../images/page_download_list_bg.png"); background-repeat: no-repeat; background-size: 900px auto; box-sizing: border-box; display: block;}
  .page-download-sec1-con .content ul.download-list li a:hover { color: #FF9200;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list { width: 100%; padding: 30px 40px 0 120px; margin: 0; list-style: disc; display: block; box-sizing: border-box;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li { width: 100%; padding: 0; margin: 0; font-size: 1.1rem; line-height: 1.8em;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a { color: #414141; text-decoration: none;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a:hover { border-bottom: 1px #414141 dashed;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sitemap-con { clear: both; width: 100%; padding: 90px 0 60px 0; box-sizing: border-box; position: relative;}
  .page-sitemap-con .content { clear: both; width: 100%; padding: 0 calc(50% - 740px) 80px calc(50% - 740px); margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}

  ul.sitemap-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul.sitemap-list li { padding: 0; margin: 0 10px 30px 10px;}
  ul.sitemap-list li a { text-decoration: none;}
  ul.sitemap-list li span.nav { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1em; background-color: #265384;}
  ul.sitemap-list li a:hover span.nav { color: #FF9200;}
  ul.sitemap-list li ul.popup { padding: 0; margin: 20px 0 0 0; list-style: none; display: block;}
  ul.sitemap-list li ul.popup li { padding: 0; margin: 0;}
  ul.sitemap-list li ul.popup li a { color: #265384; font-size: 1.2rem; font-weight: 500; line-height: 2em; text-decoration: none;}
  ul.sitemap-list li ul.popup li a:hover { border-bottom: 1px #265384 solid;}
    

  /************ footer ************/

  footer { clear: both; width: 100%; border-bottom: 20px #265384 solid;}

  .footer-nav { width: 100%; padding: 20px calc(50% - 700px); box-sizing: border-box; background-color: #1D253E;}
  .footer-nav ul.nav-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start;}
  .footer-nav ul.nav-list li { padding: 0; margin: 0 25px; color: #FFA200; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .footer-nav ul.nav-list li a { color: #FFA200; text-decoration: none;}
  .footer-nav ul.nav-list li a:hover { border-bottom: 2px #FFA200 solid;}
  .footer-nav ul.nav-list li ul.nav-list-pop { clear: both; padding: 0 0 0 5px; margin: 0; list-style: none; display: block;}
  .footer-nav ul.nav-list li ul.nav-list-pop li { padding: 0; margin: 10px 0; font-size: 1rem; font-weight: normal; line-height: 1.2em;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a { color: #fff; text-decoration: none;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a:hover { border-bottom: 1px #fff solid;}

  .footer-infor { clear: both; width: 100%; padding: 20px calc(50% - 500px); box-sizing: border-box; background-color: #E6E6E6; display: flex; justify-content: flex-start; align-items: center;}
  .footer-infor .qrcode-box { width: 170px;}
  .footer-infor .qrcode-box img { width: 90%; height: auto;}
  .footer-infor .address-nav { width: calc(100% - 170px); position: relative;}
  .footer-infor .address-nav .address-mo { display: none;}
  .footer-infor .address-nav .address { width: 100%; font-size: 1.1rem; font-weight: 500; line-height: 1.8em;}
  .footer-infor .address-nav .address a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
    
  .footer-social-icon { width: 120px; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; right: 60px;}
  .footer-social-icon img { width: 28px; height: auto; margin: 0 3px;}


}

@media screen and (min-width: 1280px) and (max-width: 1599px) {

  #gotop-bt { width: 60px; height: 60px; border-radius: 100%; background-color: #1D253E; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 50px; right: 20px; cursor: pointer; z-index: 10000;}
  #gotop-bt span.icon { color: #fff; font-size: 2em;}


  /************ header + banner + nav ************/

  header { width: 100%; position: relative;}

  .header-top-logo { width: 200px; position: absolute; top: 7px; left: 10px;}
  .header-top-logo img { width: 100%; height: auto;}

  .header-top-bar { width: 100%; height: 47px; padding: 7px 10px; box-sizing: border-box; background-color: #000; display: flex; justify-content: flex-end; align-items: center;}
  .header-top-bar .top-nav-mo-icon { display: none;}
  .header-top-bar ul.top-nav-mo { display: none;}
  .header-top-bar ul.top-nav { padding: 0; margin: 0; color: #FF9200; font-size: 0.9em; line-height: 1em; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
  .header-top-bar ul.top-nav li { padding: 0 10px; margin: 0; border-right: 1px #FF9200 solid;}
  .header-top-bar ul.top-nav li:last-child { border-right: 0;}
  .header-top-bar ul.top-nav li a { color: #FF9200; text-decoration: none;}
  .header-top-bar ul.top-nav li a:hover { border-bottom: 1px #FF9200 solid;}
  .header-top-bar .top-search { padding: 2px 0; margin: 0 20px; color: #151C51; background-color: #fff;}
  .header-top-bar .top-search form { display: flex; justify-content: flex-start; align-items: center;}
  .header-top-bar .top-search input[type=search] { padding: 3px 5px; border: 0; color: #151C51; background-color: #fff; box-sizing: border-box;}
  .header-top-bar .top-search input[type=button] { width: 30px; height: 22px; color: #151C51; background-image: url("../images/header_top_search_icon.png"); background-repeat: no-repeat; background-size: 22px 22px; background-position: center top; border: 0; background-color: #fff; cursor: pointer;}
  .header-top-bar .top-social { display: flex; justify-content: center; align-items: center;}
  .header-top-bar .top-social img.icon { width: 30px; height: 30px; margin: 0 5px;}

  .header-bt-bar { clear: both; width: 100%; padding: 20px 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-bt-bar .ntcu-logo { width: 250px;}
  .header-bt-bar .ntcu-logo img { width: 250px; height: auto;}

  nav#header-nav-mo { display: none;}

  nav#header-nav-pc { width: calc(100% - 250px);}
  nav#header-nav-pc ul#nav-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#header-nav-pc ul#nav-list li { height: 53px; padding: 10px 0; margin: 0; box-sizing: border-box; position: relative; cursor: pointer;}
  nav#header-nav-pc ul#nav-list li.longer { width: 160px;}
  nav#header-nav-pc ul#nav-list li.longer a { width: 160px;}
  nav#header-nav-pc ul#nav-list li.shorter { width: 90px;}
  nav#header-nav-pc ul#nav-list li.shorter a { width: 90px;}
  nav#header-nav-pc ul#nav-list li a { height: 53px; padding: 13px 0 0 40px; box-sizing: border-box; color: #265384; font-size: 1.1rem; font-weight: 500; line-height: 1em; text-decoration: none; display: block;}
  nav#header-nav-pc ul#nav-list li a:hover { background-image: url("../images/nav_mouseover2.jpg"); background-repeat: no-repeat; background-size: 120px 20px; background-position: 13px center;}
  nav#header-nav-pc ul#nav-list li a.sel { background-image: url("../images/nav_mouseover2.jpg"); background-repeat: no-repeat; background-size: 120px 20px; background-position: 13px center;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup { clear: both; width: 110px; padding: 0; margin: 0; background-color: rgba(16,60,130,0.5); list-style: none; display: none; position: absolute; top: 50px; left: 20px; z-index: 9999;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li { width: 110px; height: auto; padding: 0; margin: 0; border-bottom: 1px #000024 solid;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li:last-child { border-bottom: 0;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li a { width: 100%; height: auto; padding: 10px 0; margin: 0; color: #fff; font-size: 1rem; font-weight: 300; line-height: 1.2em; text-align: center; text-decoration: none; background-image: none; display: block;}
  nav#header-nav-pc ul#nav-list li ul#nav-popup li a:hover { color: #FFE5B4; background-color: #103C82; background-image: none;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%;}

  img.hp-banner { width: 96%; margin: 0 2%; height: auto;}


  /************ secetion #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 50px 0 0 0;}

  .page-hp-sec-1-con { width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; position: relative;}
  .page-hp-sec-1-con .content { width: 100%; padding: 40px 30px 75px 30px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative;}
  .page-hp-sec-1-con .content .sub-title { margin: 25px 0 40px 330px; display: flex; justify-content: flex-start; align-items: center;}
  .page-hp-sec-1-con .content .sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-1-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box { width: calc(100% / 4 - 30px); margin: 0 15px;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box:hover { -moz-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3);}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a { width: 100%; padding: 35px 40px 0 40px; text-decoration: none; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: block;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.line-icon { width: 45px; height: auto;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.en { color: #808080; font-size: 0.9rem; font-weight: 300; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.cn { color: #000; font-size: 1.8rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.intro { color: #3A5BA0; font-size: 1.2rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.arrow-icon { width: 25px; height: auto; float: right;}
  .page-hp-sec-1-con .blue-block { width: calc(50% - 740px + 320px); height: 370px; background-color: #1D253E; display: block; position: absolute; top: 40px; left: 0; z-index: 1;}

  .page-hp-sec-1-con .content .pro-technology-list-mo { display: none;}
  .page-hp-sec-1-con .content .pro-technology-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box { width: calc(25% - 30px); margin: 0 15px; background-color: #fff; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box a { text-decoration: none;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style1 { border: 5px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style2 { border: 5px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style3 { border: 5px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style4 { border: 5px #FF9200 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title { width: 100%; padding: 30px 15px 20px 15px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style1 { color: #fff; background-color: #1A3F5B;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style2 { color: #000; background-color: #80735A;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style3 { color: #fff; background-color: #103C82;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style4 { color: #000; background-color: #FF9200;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title span.en { opacity: 0.5; padding: 0 0 15px 0; font-size: 1.2em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title span.cn { font-size: 2.2rem; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor { width: 100%; padding: 15px 20px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text { width: 100%; padding: 15px 0; color: #3A5BA0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style1 { border-bottom: 2px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style2 { border-bottom: 2px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style3 { border-bottom: 2px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style4 { border-bottom: 2px #FF9200 solid;}


  .more-pro-tech-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .more-pro-tech-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-pro-tech-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; position: relative;}

  img.hp-topnews-banner { width: 55vw; height: auto; position: absolute; top: 0; right: 0;}

  .page-hp-sec-2-con { width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box;}
  .page-hp-sec-2-con .content { width: 100%; padding: 7.7vw 70px 70px 70px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-hp-sec-2-con .content .sub-title { margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-hp-sec-2-con .content .sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-2-con .content .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-2-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  .page-hp-sec-2-con .content .top-news-list { clear: both; width: 100%;}
  .page-hp-sec-2-con .content .top-news-list .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-2-con .content .top-news-list .news-list .sort { width: 200px; padding: 12px; color: #fff; font-size: 1.2rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .date { width: 180px; padding: 12px; font-size: 1.4rem; font-weight: 500; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title { width: calc(100% - 200px - 180px); padding: 10px; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a { color: #414141; font-size: 1.2rem; line-height: 1.3em; text-decoration: none;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a:hover { color: #043B6F;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}

  .more-news-bt { clear: both; width: 150px; float: right;}
  .more-news-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-news-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; padding: 60px 0 100px 0; background-image: url("../images/hp_sec3_bg.png"); background-repeat: no-repeat; background-size: 750px auto; background-position: right bottom; position: relative;}

  .hp-sec3-blue-block { width: 100%; height: 400px; background-color: #1D253E; display: block; position: absolute; top: 60px; left: 0; z-index: 1;}

  .page-hp-sec-3-con { width: 100%; padding: 40px calc(50% - 600px) 0 calc(50% - 600px); box-sizing: border-box; position: relative; z-index: 2;}
  .page-hp-sec-3-con .sub-title { width: 100%; margin: 0 0 50px 0; display: flex; justify-content: center; align-items: center;}
  .page-hp-sec-3-con .sub-title span.cn { color: #fff; font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-3-con .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-3-con .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  
  .latest-articles-list-mo { display: none;}
  .latest-articles-list { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .latest-articles-list .article-box { width: calc(100% / 3 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .latest-articles-list .article-box a { width: 100%; text-decoration: none; display: block;}
  .latest-articles-list .article-box a .pic { width: 100%; height: 290px; overflow: hidden;}
  .latest-articles-list .article-box a .pic img { width: 100%; height: auto;}
  .latest-articles-list .article-box a .date { width: 100%; padding: 0 30px 10px 30px; box-sizing: border-box;}
  .latest-articles-list .article-box a .date span { color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; float: left;}
  .latest-articles-list .article-box a .date .sort { width: 120px; padding: 6px 0; color: #FFA200; font-size: 1.1em; line-height: 1em; text-align: center; border-radius: 14px; background-color: #FFE5B4; float: right;}
  .latest-articles-list .article-box a .teachers { clear: both; width: 100%; padding: 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list .article-box a .name { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list .article-box a img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .latest-articles-list .article-box a .title { clear: both; width: 100%; height: 100px; padding: 20px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .latest-articles-list .article-box a .title p { padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .latest-articles-list .article-box a .excerpt { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: right; box-sizing: border-box;}
  .latest-articles-list .article-box a .intro { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #808080; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .hp-sec3-more-bt { clear: both; width: 70%; margin: 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: center; align-items: center;}
  .hp-sec3-more-bt img.arrow-lf { width: 60px; height: auto;}
  .hp-sec3-more-bt img.arrow-rt { width: 60px; height: auto;}
  .hp-sec3-more-bt .more-bt { width: 100px;}
  .hp-sec3-more-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .hp-sec3-more-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ page banner ************/

  .page-banner-box { clear: both; width: 100%; position: relative;}
  .page-banner-box img { width: 100%; height: auto;}
  .page-banner-box .text { width: 400px; color: #fff; font-size: 3rem; font-weight: 300; line-height: 1.4em; position: absolute; bottom: 40px; left: calc(50% - 600px);}


  /************ section#page-about1 ************/

  section#page-about1-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about1_sec1_bg.png"); background-repeat: no-repeat; background-size: 815px auto; background-position: left bottom; position: relative; z-index: 1;}

  .bread-crumbs { width: calc(100% - 40px); position: absolute; top: 0; left: 0; z-index: 2;}
  .bread-crumbs img.bg { width: 580px; height: auto;}
  .bread-crumbs span.path { color: #767676; font-size: 0.9rem; line-height: 1.2em; position: absolute; top: 25px; left: 277px;}
  .bread-crumbs span.path a { color: #767676; text-decoration: none;}
  .bread-crumbs span.path a:hover { border-bottom: 1px #767676 dashed;}

  .page-about1-sec1-con { clear: both; width: 100%; padding: 80px 100px 125px 100px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about1-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}

  .page-sub-title { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center;}
  .page-sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}


  section#page-about1-sec2 { clear: both; width: 100%; background-image: url("../images/page_about1_sec2_bg.png"); background-repeat: no-repeat; background-size: 810px auto; background-position: right bottom; position: relative; z-index: 2;}

  .page-about1-sec2-block { clear: both; width: 100%; height: 230px; padding: 0 calc(50% - 600px) 0 0; box-sizing: border-box; background-color: #0D3255;}
  .page-about1-sec2-block img.banner { width: 1100px; height: auto; margin: -60px 0 0 0; float: right;}

  .page-about1-sec2-con { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; position: relative; z-index: 1;}
  .page-about1-sec2-con .content { clear: both; width: 100%; padding: 30px 100px 40px 100px; box-sizing: border-box; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph; background-color: rgba(231,238,246,0.5);}
  .page-about1-sec2-con .content img.pic1 { width: 620px; height: auto; margin: 30px 0 0 0;}

  .page-about1-sec2-con .content img.pic2 { width: 400px; height: auto; margin: 0 0 20px 20px; float: right;}
  .page-about1-sec1-con .content img.pic3 { max-width: 90%; height: auto; margin: 0 0 40px 0;}


  /************ section#page-about2 ************/

  section#page-about2-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative; z-index: 1;}

  .page-about2-sec1-con { clear: both; width: 100%; padding: 80px 40px 0 40px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about2-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 1em; text-align: justify; text-justify: inter-ideograph; border-left: 4px #FFA200 solid; box-sizing: border-box;}
  .page-about2-sec1-con .content .stitle-box { clear: both; width: 100%; min-height: 64px; background-image: url("../images/page_about2_stitle_bg.png"); background-repeat: no-repeat; background-size: 349px auto; background-position: left top;}
  .page-about2-sec1-con .content .stitle-box .title { width: calc(100% - 349px); padding: 0 0 0 0; float: right;}
  .page-about2-sec1-con .content .stitle-box .title span { padding: 9px 20px 10px 0; color: #fff; font-size: 1.4em; font-weight: 600; line-height: 1.4em; background-color: #FFA200; display: block;}
  .page-about2-sec1-con .content .text-con { clear: both; width: 100%; padding: 30px 40px 60px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text .icon { width: 35px;}
  .page-about2-sec1-con .content .text-con .big-text .list { width: calc(100% - 35px);}
  .page-about2-sec1-con .content .text-con .text-1 { width: calc(100% - 434px);}
  .page-about2-sec1-con .content .text-con .text-1 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-1 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-1 { width: 434px; padding: 0 0 0 80px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-1 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-1 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-2 { width: calc(100% - 520px);}
  .page-about2-sec1-con .content .text-con .text-2 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-2 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-2 { width: 520px; padding: 0 0 0 50px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-2 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-2 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-3 { width: calc(100% - 420px);}
  .page-about2-sec1-con .content .text-con .text-3 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-3 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-3 { width: 420px; padding: 0 0 0 70px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-3 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-3 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-5 { width: calc(100% - 480px);}
  .page-about2-sec1-con .content .text-con .text-5 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-5 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-5 { width: 480px; padding: 0 0 0 40px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-5 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-5 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}


  /************ section#page-about3 ************/

  section#page-about3-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-about3-sec1-con { clear: both; width: 100%; padding: 80px 20px 30px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about3-sec1-con .content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about3-sec1-con .content .alumni-news-box { width: calc(100% / 3 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a { width: 100%; text-decoration: none; display: block;}
  .page-about3-sec1-con .content .alumni-news-box a .pic { width: 100%;}
  .page-about3-sec1-con .content .alumni-news-box a .pic img { width: 100%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .date { width: 100%; padding: 10px 30px; color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a img.line { width: 90%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .title { width: 100%; padding: 10px 30px; color: #414141; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a .intro { width: 100%; padding: 0 30px 30px 30px; color: #414141; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .page-content-video { clear: both; width: 80%; margin: 0 auto;}


  /************ section#page-signup ************/

  section#page-signup-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title span.top-title { width: 100%; font-size: 2.2rem; font-weight: 300; line-height: 1.2em; text-align: center;}

  .page-signup-sec1-con { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-signup-sec1-con .content { clear: both; width: 100%;}
  .page-signup-sec1-con .content .signup-notice { width: 80%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}
  .page-signup-sec1-con .content .signup-notice .notice-title { width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .page-signup-sec1-con .content .signup-login { clear: both; width: 80%; margin: 60px auto 0 auto; text-align: center;}
  .page-signup-sec1-con .content .signup-login input[type=text] { width: 180px; padding: 5px 10px; color: #414141; font-size:1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; border-radius: 8px;}
  .page-signup-sec1-con .content .signup-login input[type=button] { width: 180px; padding: 5px 10px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .page-signup-sec1-con .content .signup-login input[type=button]:hover { background-color: #666;}

  .signup-sub-title { clear: both; width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .signup-sub-title span.small { font-size: 1rem;}

  .signup-form-table { clear: both; width: 100%; font-size: 1.1rem;}
  .signup-form-table input[type=text].style1 { width: 200px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}
  .signup-form-table input[type=text].style2 { width: 100px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}

  .signup-form-bt { clear: both; width: 100%; padding: 40px 0 0 0; text-align: center;}
  .signup-form-bt input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-form-bt input[type=button]:hover { background-color: #666;}


  #page-signup-show { clear: both; width: 100%;}
  #page-signup-show .signup-show-sub-title { width: 100%; padding: 30px 0; font-size: 1.4rem; text-align: center;}
  #page-signup-show .signup-show-sub-title span.small { font-size: 1rem;}

  .signup-signature { clear: both; width: 100%; margin: 60px 0; font-size: 1.2rem; display: flex; justify-content: flex-start; align-items: center;}
  .signup-signature .column-lf { width: 60%; display: flex; justify-content: flex-start;}
  .signup-signature .column-rt { width: 40%; display: flex; justify-content: flex-end;}
  .signup-signature .column-lf span.underline, 
  .signup-signature .column-rt span.underline { width: 200px; border-bottom: 1px #414141 solid; display: block;}

  .signup-goback-print { clear: both; width: 100%; text-align: center;}
  .signup-goback-print input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-goback-print input[type=button]:hover { background-color: #666;}


  /************ section#page-about4 ************/

  section#page-about4 { clear: both; width: 100%; background-image: url("../images/page_about4_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 1000px; position: relative; z-index: 1;}

  .page-about4-sec1 { clear: both; width: 100%; padding: 40px calc(50% - 600px) 80px calc(50% - 600px); box-sizing: border-box; position: relative; z-index: 1;}  
  .page-about4-sec1 .group-top-pic { width: 100%;}
  .page-about4-sec1 .group-top-pic img { margin: 0 auto;}

  .page-about4-sec2 { clear: both; width: 100%; padding: 40px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-about4-sec2 .group-title { clear: both; width: 100%; margin: -40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-about4-sec2 .group-title .title-box { width: 38%; height: 265px; padding: 40px 20px 0 calc(50% - 600px + 40px); color: #fff; font-size: 2.6rem; font-weight: 600; line-height: 1.2em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .title-box img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-about4-sec2 .group-title .title-box.style1 { background-color: #1A3F5B;}
  .page-about4-sec2 .group-title .title-box.style2 { background-color: #80735A;}
  .page-about4-sec2 .group-title .title-box.style3 { background-color: #103C82;}
  .page-about4-sec2 .group-title .title-box.style4 { background-color: #FF9200;}
  .page-about4-sec2 .group-title .infor-box { width: 62%; height: 265px; padding: 50px calc(50% - 600px) 0 60px; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .infor-box.style1 { border-bottom: 3px #1A3F5B solid;}
  .page-about4-sec2 .group-title .infor-box.style2 { border-bottom: 3px #80735A solid;}
  .page-about4-sec2 .group-title .infor-box.style3 { border-bottom: 3px #103C82 solid;}
  .page-about4-sec2 .group-title .infor-box.style4 { border-bottom: 3px #FF9200 solid;}
  .page-about4-sec2 .group-title .infor-box span.title { font-size: 1.4rem; font-weight: 600;}
  .page-about4-sec2 .group-teachers { clear: both; width: 100%; padding: 0 calc(50% - 600px); margin: -40px 0 0 0; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list { width: 100%; padding: 100px 40px 40px 40px; box-sizing: border-box; background-color: rgba(226,240,217,0.5);}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-1 { clear: both; width: 170px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-1 { width: 170px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-2 { clear: both; width: 315px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-2 { width: 315px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table { clear: both; width: 100%; padding: 20px 0 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box { width: calc(100% / 6 - 10px); margin: 0 5px 20px 5px;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box a { color: #414141; text-decoration: none;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic { width: 100%; height: 240px; overflow: hidden; display: flex; justify-content: center;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic img { width: auto; height: 100%;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .name { width: 100%; padding: 10px 0; font-size: 1.1rem; line-height: 1em; text-align: center;}


  a.about4-spotlight { 
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 20px;
    position: relative;
    transition: all .3s linear;
    text-decoration: none;
    overflow: hidden;
    float: right;
  }
  
  a.about4-spotlight > p{
    position: relative;
    z-index: 1;
  }
  a.about4-spotlight::before{
      content: "";
      width: 0%;
      height: 100%;
      display: block;
      background-color: #FF9200;
      position: absolute;
      top: 0;
      right: 0;
      transition: all .3s ease;
  }
  a.about4-spotlight:hover{
      color: #fff;
  }
  a.about4-spotlight:hover::before{
      width: 100%;
  }


  /************ section#page-news ************/

  section#page-news-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-news-sec1-con { clear: both; width: 100%; padding: 50px 0 80px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-news-sec1-con .news-sort-all { display: none;}
  .page-news-sec1-con ul.news-sort-nav { width: 100%; padding: 30px 0 30px 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-news-sec1-con ul.news-sort-nav li { width: 145px; padding: 0; margin: 0 10px 10px 10px;}
  .page-news-sec1-con ul.news-sort-nav li a { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; display: block;}
  
  .page-news-top-news-con-mo { display: none;}
  .page-news-top-news-con { width: 100%; padding: 0 0 0 calc(50% - 600px + 75px); box-sizing: border-box; position: absolute; top: 360px; left: 0; z-index: 3;}
  .page-news-top-news-con a { width: 100%; text-decoration: none; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-news-top-news-con .pic { width: 380px; height: 270px; overflow: hidden;}
  .page-news-top-news-con .pic img { width: auto; height: 100%;}
  .page-news-top-news-con .text-con { width: calc(100% - 380px); padding: 0 calc(50% - 600px + 150px) 0 30px; box-sizing: border-box; background-color: #FFE5B4;}
  .page-news-top-news-con .text-con .sort-date { width: 100%; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-top-news-con .text-con .sort-date .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .page-news-top-news-con .text-con .sort-date .date { width: calc(100% - 200px); padding: 0 0 0 30px; color: #1A3F5B; font-size: 1.4em; line-height: 1em; box-sizing: border-box;}
  .page-news-top-news-con .text-con .title { width: 100%; padding: 20px 0; color: #414141; font-size: 1.4rem; font-weight: 600; line-height: 1.1em;}
  .page-news-top-news-con .text-con .text { width: 100%; color: #414141; font-size: 1rem; line-height: 2.2em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;}
  
  .page-news-sec1-con .content { clear: both; width: 100%; padding: 0 75px; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-sec1-con .content .news-list .sort { width: 200px; padding: 12px; color: #fff; font-size: 1.2rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .date { width: 180px; padding: 12px; font-size: 1.4rem; font-weight: 500; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title { width: calc(100% - 200px - 180px); padding: 10px; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title a { color: #414141; font-size: 1.2rem; line-height: 1.3em; text-decoration: none;}
  .page-news-sec1-con .content .news-list .title a:hover { color: #043B6F;}
  .page-news-sec1-con .content .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}


  .page-numbers { clear: both; width: 70%; margin: 60px auto 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-numbers img.arrow-lf { width: 40px; height: auto;}
  .page-numbers img.arrow-rt { width: 40px; height: auto;}
  .page-numbers ul.page-num { width: calc(100% - 120px); padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .page-numbers ul.page-num li { padding: 0; margin: 5px;}
  .page-numbers ul.page-num li a { width: 30px; height: 30px; color: #FFA200; font-size: 0.8rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 100%; background-color: #FFE5B4; display: flex; justify-content: center; align-items: center;}
  .page-numbers ul.page-num li a:hover { color: #FFE5B4; background-color: #FFA200;}
  .page-numbers ul.page-num li a.sel { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-news-content ************/

  .page-news-con-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}

  .page-news-con-top-title-mo { display: none;}
  .page-news-con-top-title { width: 100%; padding: 0 0 0 calc(50% - 600px + 75px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: absolute; top: 80px; left: 0; z-index: 3;}
  .page-news-con-top-title .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center;}
  .page-news-con-top-title .title { width: calc(100% - 200px); padding: 12px 20px; box-sizing: border-box; font-size: 1.2rem; font-weight: 600; line-height: 1.2em; background-color: #FFE5B4;}
  .page-news-con-top-title .date-author { width: 100%; padding: 10px 0;}
  .page-news-con-top-title .date-author span.date { padding: 0 20px 0 0; font-size: 1.4rem; font-weight: 500; line-height: 1em;}
  .page-news-con-top-title .date-author span.author { font-size: 1rem;}

  .page-news-con-sec1-con .content { clear: both; width: 100%; padding: 120px 75px 60px 75px; font-size: 1.2rem; line-height: 1.8em; text-align: justify; box-sizing: border-box;}
  .page-news-con-sec1-con .content a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-news-con-sec1-con .content img { width: 55%; height: auto; margin: 0 auto 30px auto;}
  .page-news-con-sec1-con .content .pic-text { clear: both; width: 55%; margin: -20px auto 40px auto; font-size: 0.9rem; line-height: 1.1em; text-align: center;}
  .page-news-con-sec1-con .content .download-share { clear: both; width: 100%; padding: 30px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-news-con-sec1-con .content .download-share .download { padding: 0 5px; box-sizing: border-box;}
  .page-news-con-sec1-con .content .download-share .download a { text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-con-sec1-con .content .download-share .download a img { width: 26px; height: auto; margin: 0 15px 0 0;}
  .page-news-con-sec1-con .content .download-share .download a span { padding: 5px 0 0 0; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-con-sec1-con .content .download-share .share img { width: 40px; height: auto;}

  .news-video-box { clear: both; width: 70%; margin: 30px auto;}

  table { width: 100%; line-height: 1.2em; border: 1px #ccc solid;}


  /************ section#page-members ************/

  section#page-members-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-members-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .page-members-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-members-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .search-choice-box span input[type=search] { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .members-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-sec1-con .members-list .members-box { width: calc(100% / 4 - 20px); margin: 0 10px 20px 10px; background-color: rgba(231,238,246,0.5);}
  .page-members-sec1-con .members-list .members-box .pic { width: 100%; height: 330px; background-color: #031F35; display: flex; justify-content: center; overflow: hidden;}
  .page-members-sec1-con .members-list .members-box .pic img { width: auto; height: 100%;}
  .page-members-sec1-con .members-list .members-box .name { width: 100%; padding: 10px 20px; box-sizing: border-box; text-align: center;}
  .page-members-sec1-con .members-list .members-box .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box img.line-oran { clear: both; width: calc(100% - 60px); height: auto; margin: 0 auto;}
  .page-members-sec1-con .members-list .members-box .intro { clear: both; width: 100%; padding: 10px 20px; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box;}
  .page-members-sec1-con .members-list .members-box .intro .title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem;}
  .page-members-sec1-con .members-list .members-box .intro .caption { width: 100%; margin: 0 0 5px 0;}
  .page-members-sec1-con .members-list .members-box .intro .column { width: 100%; margin: 0 0 10px 0; /*word-break: break-all; overflow-wrap: break-word;*/ display: block;}
  .page-members-sec1-con .members-list .members-box .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}


  /************ section#page-members-con ************/

  section#page-members-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-sub-title2 { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-sub-title2 .cn { width: 100%; margin: 0 0 10px 0; font-size: 2.8em; font-weight: 300; line-height: 1em; text-align: center;}
  .page-sub-title2 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title2 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-members-con-sec1-con { clear: both; width: 100%; padding: 80px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-con-sec1-con .content-top { width: 100%; padding: 0 calc(50% - 600px) 0 calc(50% - 600px); box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor { width: 100%; padding: 0 70px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex; justify-content: flex-start; align-items: stretch;}
  .page-members-con-sec1-con .content-top .member-infor .pic { width: 600px; height: 400px; background-color: #031F35; display: flex; justify-content: center; overflow: hidden;}
  .page-members-con-sec1-con .content-top .member-infor .pic img { width: auto; height: 100%;}
  .page-members-con-sec1-con .content-top .member-infor .infor { width: calc(100% - 600px); padding: 20px 30px; box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name { width: 100%; padding: 10px 30px; box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor img.line { clear: both; width: 450px; height: auto; margin: 0 0 0 30px;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro { clear: both; width: 100%; padding: 10px 30px; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .title { width: 100%; margin: 0 0 30px 0; font-size: 1.4rem;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .caption { width: 90px; margin: 0 10px 15px 0; text-align: right;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column { width: calc(100% - 100px); margin: 0 0 10px 0; word-break: break-all; overflow-wrap: break-word; display: block;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .member-detail-tab { clear: both; width: 100%; padding: 20px calc(50% - 600px); box-sizing: border-box; background-color: #1D253E;}
  .page-members-con-sec1-con .member-detail-tab img.line { width: 92%; height: auto; margin: 0 auto;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li { padding: 0; margin: 0 10px 10px 10px;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a { padding: 3px 20px; color: #fff; font-size: 1.4em; line-height: 1em; text-align: center; text-decoration: none; border: 1px #3391FD solid;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a:hover { background-color: #3391FD;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a.sel { background-color: #3391FD;}

  .page-members-con-sec1-con .content-bottom { width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box;}
  .page-members-con-sec1-con .content-bottom ul.detail-content { width: 100%; padding: 40px 70px; margin: 0; box-sizing: border-box; list-style: none; background-color: rgba(231,238,246,0.5); display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li { width: 100%; padding: 0; margin: 0 0 20px 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar { width: 100%; border-bottom: 1px #FFA200 solid; display: flex; justify-content: space-between; align-items: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-up { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: none; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-down { display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-down { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-up { display: flex;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle { width: 320px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 { width: 440px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 { width: 660px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table { clear: both; width: 100%; padding: 20px 0; font-size: 1.2rem; line-height: 1.8em; text-align: justify; display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .detail-list-table { display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table { clear: both; width: 100%; padding: 20px 10px 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .sub-title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; text-align: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor { width: calc(100% / 3 - 20px); margin: 0 10px 20px 10px; padding: 5px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic { width: 30%;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic img { width: 100%; height: auto;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro { width: 70%; font-size: 0.9rem; line-height: 1.2em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul { width: 100%; padding: 0 0 0 24px; margin: 0; list-style: disc; box-sizing: border-box; display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul li { padding: 0; margin: 0 0 5px 0; word-wrap: break-word; word-break: break-all;}


  .page-members-back-bt { clear: both; width: 60%; margin: 40px auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-members-back-bt img.arrow-lf { width: 60px; height: auto;}
  .page-members-back-bt img.arrow-rt { width: 60px; height: auto;}
  .page-members-back-bt .more-bt { width: 100px;}
  .page-members-back-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .page-members-back-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-lab ************/

  section#page-lab-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-lab-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .page-lab-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-lab-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}

  .page-lab-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-lab-list-table .lab-list-box { width: calc(100% / 3 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-lab-list-table .lab-list-box:hover { -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); -webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2);}
  .page-lab-list-table .lab-list-box .photo { width: 100%; height: 180px; overflow: hidden;}
  .page-lab-list-table .lab-list-box .photo img { width: 100%; height: auto;}
  .page-lab-list-table .lab-list-box .photo a { width: 100%; height: 100%; display: block;}
  .page-lab-list-table .lab-list-box .intro { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; line-height: 2em;}
  .page-lab-list-table .lab-list-box .intro .title { width: 100%; padding: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2em;}
  .page-lab-list-table .lab-list-box .intro a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  .lab-articles-list { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .lab-articles-list .article-box { width: calc(100% / 3 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .lab-articles-list .article-box .pic { width: 100%; height: 220px; overflow: hidden;}
  .lab-articles-list .article-box .pic img { width: 100%; height: auto;}
  .lab-articles-list .article-box .teachers { clear: both; width: 100%; padding: 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box .name { clear: both; width: 100%; padding: 0 30px 10px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .lab-articles-list .article-box .title { clear: both; width: 100%; height: 140px; padding: 20px 30px; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.4em; box-sizing: border-box; overflow-wrap: break-word; word-break: break-all;}
  .lab-articles-list .article-box .title p { padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
  .lab-articles-list .article-box .title p a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  /************ section#page-lab-con ************/

  section#page-lab-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_lab_con_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-lab-con-banner { clear: both; width: 100%; background-color: #031F35; position: relative;}
  .page-lab-con-banner img.banner-bg { width: 84vw; height: auto; margin: 0 auto;}
  .page-lab-con-banner .lab-title { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}
  .page-lab-con-banner .lab-title span { padding: 1vw 3vw; color: #000; font-size: 2.6vw; font-weight: 700; line-height: 1em; text-align: center; background-color: rgba(247,255,255,0.5);}

  .page-lab-con-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-con-sec1-con .lab-con-title { width: 100%; padding: 20px 0 10px calc(50% - 600px + 110px); box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-title span.caption { color: #1A3F5B; font-size: 1.8em; font-weight: 300; line-height: 1em;}
  .page-lab-con-sec1-con .lab-con-title span.name { font-size: 2.2em; line-height: 1em;}
  .page-lab-con-sec1-con img.line { clear: both; width: 825px; height: auto;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box { clear: both; width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box img.icon { width: 100px; height: auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box span.title { padding: 8px 20px 8px 10px; margin: 0 0 0 -18px; color: #000; font-size: 1.6em; font-weight: 500; line-height: 1.2em; background-color: #FFA200;}

  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor { clear: both; width: 100%; padding: 50px 110px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo { width: 240px;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo img { width: 100%; height: auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor { width: calc(100% - 240px); padding: 0 0 0 40px; font-size: 1.1rem; line-height: 1.8em; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-cn { font-size: 2rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-en { font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor hr { width: 100%; margin: 20px 0; border: 1px #eee solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .people-list { clear: both; padding: 20px calc(50% - 600px + 110px); font-size: 1.2rem; font-weight: 300; line-height: 2em; background-color: rgba(231,238,246,0.5);}
  .page-lab-con-sec1-con .people-list span.title { color: #103C82; font-size: 1.8rem;}
  
  .page-lab-con-sec1-con ul.lab-con-tab { clear: both; width: 100%; padding: 0 calc(50% - 600px); margin: 10px 0; box-sizing: border-box; list-style: none; background-color: rgba(255,229,180,0.5); display: flex; justify-content: center; flex-wrap: wrap;}
  .page-lab-con-sec1-con ul.lab-con-tab li { padding: 0; margin: 0;}
  .page-lab-con-sec1-con ul.lab-con-tab li a { padding: 20px; color: #FFA200; font-size: 1.2rem; line-height: 1em; text-decoration: none; display: block;}
  .page-lab-con-sec1-con ul.lab-con-tab li a:hover { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  .page-lab-con-sec1-con ul.lab-con-tab li a.sel { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  
  .page-lab-con-sec1-con .lab-con-detail { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content { width: 100%; padding: 40px 20px; box-sizing: border-box; border-top: 15px #031F35 solid; background-color: rgba(231,238,246,0.5);}
  .page-lab-con-sec1-con .lab-con-detail .content div { display: none; font-size: 1.2rem; line-height: 1.8em; text-align: justify;}

  .page-lab-con-sec1-con .lab-con-detail .content div table a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full { width: 100%; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-1 { width: 120px; padding: 15px 10px; color: #FF9200; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-2 { width: calc(100% - 220px); padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 { width: 100px; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a { width: 100%; padding: 5px 0; color: #FF9200; font-size: 1rem; line-height: 1rem; text-align: center; text-decoration: none; border-radius: 16px; background-color: #FFE5B4; display: block;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a:hover { color: #fff; background-color: #FF9200;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle { width: 290px; padding: 10px 0 10px 10px; margin: 0 0 30px 0; color: #fff; font-size: 2rem; line-height: 1em; font-weight: 300; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle img { width: 140px; height: auto; margin: 0 10px 0 0;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle { clear: both; width: 100%; margin: 0 0 20px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle img.title { width: auto; height: 50px;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-2 { width: 25%; padding: 15px 10px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-2 { width: 90%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-2 { width: 90%; padding: 15px 10px; box-sizing: border-box;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full { width: 100%; color: #031F35; font-weight: 600; text-align: center; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-3 { width: 30%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-4 { width: 35%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-5 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full { width: 100%; text-align: center; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full:nth-child(odd) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-3 { width: 30%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-4 { width: 35%; padding: 15px 10px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 a { padding: 8px 10px; color: #fff; text-align: center; text-decoration: none; border-radius: 6px; background-color: #356588; display: block;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .list-year { clear: both; width: 100%; padding: 0 0 30px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list { clear: both; width: 100%; padding: 0 0 0 80px; margin: 0 0 40px 0; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list .list { width: 100%; padding: 13px 0; border-bottom: 1px #B3B3B3 solid;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-1 { width: 8%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-2 { width: 75%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-3 { width: 17%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-1 { width: 8%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-2 { width: 75%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 { width: 17%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content ul { list-style-type: circle;}
  .page-lab-con-sec1-con .lab-con-detail .content ul li { padding: 0 0 20px 0;}


  .lab-con-members-list-table { clear: both; width: 100%; margin: 0 0 40px 0; display: flex !important; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor { width: calc(50% - 20px); padding: 10px; margin: 0 10px 20px 10px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex !important; justify-content: flex-start; align-items: flex-start;}
  .lab-con-members-list-table .teacher-master-infor .photo { width: 46%; height: 300px; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .teacher-master-infor .photo img { width: auto; height: 100%;}
  .lab-con-members-list-table .teacher-master-infor .intro { width: 54%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .teacher-master-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6rem;}
  .lab-con-members-list-table .teacher-master-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con p.text { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 { width: calc(100% - 50px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float2 { width: 120px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 { width: calc(100% - 120px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}

  .lab-con-members-list-table .researcher-infor { width: calc(100% / 2 - 20px); padding: 10px; margin: 0 10px 20px 10px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex !important; justify-content: flex-start; align-items: flex-start;}
  .lab-con-members-list-table .researcher-infor .photo { width: 46%; height: 300px; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .researcher-infor .photo img { width: auto; height: 100%;}  
  .lab-con-members-list-table .researcher-infor .intro { width: 54%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .researcher-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6em;}
  .lab-con-members-list-table .researcher-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .researcher-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con p.text { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float1 { width: 50px; padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 { width: calc(100% - 50px); margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float2 { width: 120px; padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 { width: calc(100% - 120px); margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  
  .lab-con-members-list-table .student-infor { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px 20px 10px; background-color: rgba(231,238,246,0.5); box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .photo { clear: both; width: 100%; height: 300px; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .student-infor .photo img { width: auto; height: 100%;}
  .lab-con-members-list-table .student-infor .intro { width: 100%; padding: 10px; font-size: 1.2rem; line-height: 1.6rem; box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .intro .name { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2rem; text-align: center;}
  .lab-con-members-list-table .student-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .student-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .student-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .student-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 { width: calc(100% - 50px); margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}


  /************ section#page-admissions ************/

  section#page-admissions-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 150% auto; background-position: center -24vw; position: relative; z-index: 1;}

  .page-admissions-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-admissions-sec1-con .content { clear: both; width: 100%; padding: 80px 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-admissions-sec1-con .content .column-half { width: 600px; margin: 0 50px; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-admissions-sec1-con .content .column-half img.title { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box { width: 100%; margin: -80px 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links { width: 90px; margin: 0 13px; position: relative;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links img { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a { width: 100%; height: 100%; padding: 90px 0 0 23px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: flex-start; position: absolute; top: 0; left: 0;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a span { color: #fff; font-size: 2em; line-height: 1em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a:hover span { color: #FFA200;}

  .page-admissions-sec2-con { clear: both; width: 100%; padding: 0 0 80px 0; box-sizing: border-box;}
  .page-admissions-sec2-con .content { clear: both; width: 100%; padding: 80px 0;}
  .page-admissions-sec2-con .content .stitle-box { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-admissions-sec2-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-admissions-sec2-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2em; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-admissions-sec2-con .content .content-text { clear: both; width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  .page-admissions-sec2-con .content .content-text a { color: #3391FD; text-decoration: none;}
  .page-admissions-sec2-con .content .content-text a:hover { color: #103C82;}
  
  ul.chinese-num { width: 100%; padding: 0 0 0 60px; margin: 0; box-sizing: border-box; list-style-type:cjk-ideographic; display: block;}
  ul.chinese-num li { width: 100%; padding: 0; margin: 0;}


  /************ section#page-scholarship ************/

  section#page-scholarship-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: no-repeat; background-size: 150% auto; background-position: center -24vw; position: relative; z-index: 1;}

  .page-scholarship-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-scholarship-sec1-con .content { clear: both; width: 100%; padding: 80px 0 0 0;}
  .page-scholarship-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-scholarship-sec1-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-scholarship-sec1-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2em; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-scholarship-sec1-con .content .infor-box { width: 100%; padding: 25px 160px 0 100px; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}
  .page-scholarship-sec1-con .content .infor-box button.linkto { clear: both; margin: 20px 0 0 0; padding: 3px 30px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 14px; background-color: #00C8FF; cursor: pointer;}
  .page-scholarship-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-scholarship-sec1-con .content img.pic { clear: both; width: 75%; height: auto; margin: 60px auto 0 auto;}


  /************ section#page-research ************/

  section#page-research-sec1 { clear: both; width: 100%; padding: 40px calc(50% - 600px) 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-research-sec1-con { clear: both; width: 100%; padding: 40px 0 60px 0; box-sizing: border-box;}
  .page-research-sec1-con .research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-research-sec1-con .research-list-table .column-full { width: calc(100% / 4 - 10px); margin: 0 5px 20px 5px;}
  .page-research-sec1-con .research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .page-research-sec1-con .research-list-table .column-full a:hover { background-color: rgba(255,255,255,0.4);}
  .page-research-sec1-con .research-list-table .column-full .column-1 { width: 100%; height: 180px; overflow: hidden;}
  .page-research-sec1-con .research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .page-research-sec1-con .research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .page-research-sec1-con .research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .page-research-sec1-con .research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}

  .research-plan-sort-icon { display: none;}

  ul.research-plan-sort-nav { clear: both; width: 100%; padding: 0; margin: 0 0 40px 0; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  ul.research-plan-sort-nav li { width: 140px; padding: 0; margin: 0 10px 20px 10px;}
  ul.research-plan-sort-nav li a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; text-decoration: none; border-radius: 8px; background-color: #1A3F5B; display: block;}
  ul.research-plan-sort-nav li a:hover { background-color: #103C82;}
  ul.research-plan-sort-nav li a.sel { background-color: #80735A;}


  .hp-research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-research-list-table .column-full { width: calc(100% / 4 - 10px); margin: 0 5px 20px 5px;}
  .hp-research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .hp-research-list-table .column-full a:hover { background-color: rgba(255,255,255,0.4);}
  .hp-research-list-table .column-full .column-1 { width: 100%; height: 180px; overflow: hidden;}
  .hp-research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .hp-research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .hp-research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .hp-research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}


  /************ section#page-research-con ************/

  section#page-research-con-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-research-con-sec1-con { clear: both; width: 100%; padding: 40px 0 60px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-research-con-sec1-con .content { width: 100%; padding: 40px; font-size: 1.2rem; line-height: 1.8em; text-align: justify; box-sizing: border-box;}
  .page-research-con-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-research-con-sec1-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-research-con-sec1-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2rem; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-research-con-sec1-con .content .infor-box { width: 100%; padding: 25px 160px 0 100px; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box img.pic { clear: both; width: 75%; height: auto; margin: 30px auto 0 auto;}
  .page-research-con-sec1-con .content .infor-box .pic-text { clear: both; width: 75%; padding: 20px 0 30px 0; margin: 0 auto; font-size: 0.8rem; line-height: 1.2em; text-align: center;}


  /************ section#page-course-plan ************/

  section#page-course-plan-sec1 { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title3 { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center;}
  .page-sub-title3 span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title3 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title3 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-course-plan-sec1-con { clear: both; width: 100%; padding: 40px 0 40px 0; box-sizing: border-box; position: relative;}
  .page-course-plan-sec1-con .content { clear: both; width: 100%; padding: 40px calc(50% - 600px) 0 calc(50% - 600px); margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}
  .page-course-plan-sec1-con .content img.course-pc { width: 100%; height: auto; margin: 0 auto 40px auto;}
  .page-course-plan-sec1-con .content img.course-mo { display: none;}
  .page-course-plan-sec1-con .content img.intro-course-pc { width: 80%; height: auto; margin: 0 auto;}
  .page-course-plan-sec1-con .content img.intro-course-mo { display: none;}
  .page-course-plan-sec1-con .content img.pic { clear: both; width: 700px; height: auto; margin: 40px 0 0 0;}
  
  .page-course-plan-sec1-con .blue-block-bg { width: 100%; height: 105px; background-color: #3A5BA0; display: block; position: absolute; bottom: 140px; left: 0; z-index: 1;}

  .page-course-plan-sec1-con .content .text-content { clear: both; width: 100%; margin: 0 auto; font-size: 1.2rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}
  .page-course-plan-sec1-con .content .text-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg { width: 100%; padding: 0; margin: 20px 0; list-style-type: none; display: block;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li { width: 100%; padding: 15px 20px; margin: 0 0 10px 0; box-sizing: border-box; font-size: 1.2rem;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(1) { background-color: rgba(4,144,200,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(2) { background-color: rgba(89,199,243,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(3) { background-color: rgba(219,226,240,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(4) { background-color: rgba(191,218,167,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(5) { background-color: rgba(56,132,199,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(6) { background-color: rgba(226,168,78,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(7) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(8) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}
  .page-course-plan-sec1-con .content .text-content .title { width: 100%; margin: 0 0 20px 0; font-size: 2rem; font-weight: 600; line-height: 1.2em;}
  .page-course-plan-sec1-con .content .text-content ul.dot li { padding: 0; margin: 0;}

  img.page-course-plan-list { clear: both; width: 100%; margin: 40px 0 0 0;}

  .page-feature-sec2-title-1 { width: 100%; margin: 30px 0 60px 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-feature-sec2-title-1 .line-lf { width: calc(50% - 100px); padding: 30px 0 0 0; display: flex; justify-content: flex-end; overflow: hidden;}
  .page-feature-sec2-title-1 .line-lf img { width: auto; height: 56px}
  .page-feature-sec2-title-1 .line-rt { width: calc(50% - 100px); margin: -30px 0 0 0; overflow: hidden;}
  .page-feature-sec2-title-1 .line-rt img { width: auto; height: 59px;}
  .page-feature-sec2-title-1 .title { width: 200px; color: #2B6490; font-size: 3em; font-weight: 600; line-height: 1em; text-align: center;}

  .page-feature-sec2-content { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-feature-sec2-content .column-lf { width: 50%; padding: 0 0 0 calc(50% - 600px); margin: 0 0 120px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-lf .title-lf { width: 520px; padding: 5px 0; margin: 0 auto 30px auto; color: #fff; font-size: 1.8em; line-height: 1.2em; text-align: center; border-radius: 20px; background-color: #0084B4;}
  .page-feature-sec2-content .column-lf img.con-list-1 { clear: both; width: 518px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .column-rt { width: 50%; padding: 0 calc(50% - 600px) 0 0; margin: 0 0 120px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-rt .title-rt { width: 590px; padding: 5px 0; margin: 90px auto 35px auto; color: #fff; font-size: 1.8em; line-height: 1.2em; text-align: center; border-radius: 40px; background-color: #1D2088;}
  .page-feature-sec2-content .column-rt img.con-list-2 { clear: both; width: 535px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .banner { clear: both; width: 100%; padding: 0 calc(50% - 620px); box-sizing: border-box;}
  .page-feature-sec2-content .banner img { width: 100%; height: auto;}


  /************ section#page-course-online ************/

  section#page-course-online-sec1 { clear: both; width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-course-online-sec1-con { clear: both; width: 100%; padding: 50px 0 60px 0;}
  .page-course-online-sec1-con .content { width: 100%; padding: 30px calc(50% - 600px); background-image: url("../images/page_course_onling_bg.png"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}
  
  .page-course-online-sec1-con .content .course-title { clear: both; width: 100%; padding: 30px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .page-course-online-sec1-con .content .course-title:first-child { padding: 0 0 30px 0;}
  
  .course-online-list-table { clear: both; width: 100%; background-color: rgba(231,238,246,0.5);}
  .course-online-list-table .caption-full { width: 100%; color: #1A3F5B; font-size: 1.6rem; font-weight: 300; line-height: 1em; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .course-online-list-table .caption-full .caption-1 { width: 25%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-2 { width: 35%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-3 { width: 25%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-4 { width: 15%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full { width: 100%; color: #1A3F5B; font-size: 1.1rem; line-height: 1.4em; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .course-online-list-table .column-full:nth-child(odd) { background-color: #fff;}
  .course-online-list-table .column-full .column-1 { width: 25%; padding: 20px; font-weight: 500; box-sizing: border-box;}
  .course-online-list-table .column-full .column-2 { width: 35%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-3 { width: 25%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 { width: 15%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 a { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; background-color: #356588; display: block;}
  .course-online-list-table .column-full .column-5 { width: 100%; padding: 20px; font-size: 0.9rem; line-height: 1.6em; border-top: 1px #ccc dashed; box-sizing: border-box; word-break: break-all;}
  .course-online-list-table .column-full .column-5 a { color: #FFA200; text-decoration: none;}


  /************ section#page-download ************/

  section#page-download-sec1 { clear: both; width: 100%; padding: 0 calc(50% - 600px); box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 150% auto; background-position: center -24vw; position: relative; z-index: 1;}

  .page-download-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box; overflow: hidden;}
  .page-download-sec1-con .content { clear: both; width: 100%; padding: 40px 0 50px 0;}
  .page-download-sec1-con .content .stitle-box { width: 296px; margin: 0 auto; position: relative;}
  .page-download-sec1-con .content .stitle-box img.bg { width: 100%; height: auto;}
  .page-download-sec1-con .content .stitle-box span { color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1em; position: absolute; top: 6px; left: 100px;}
  .page-download-sec1-con .content ul.download-list { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: block;}
  .page-download-sec1-con .content ul.download-list li { width: 100%; padding: 0; margin: 50px auto;}
  .page-download-sec1-con .content ul.download-list li a { width: 900px; height: 74px; padding: 6px 0 0 90px; color: #fff; font-size: 1.8em; font-weight: 500; line-height: 1.2em; text-decoration: none; background-image: url("../images/page_download_list_bg.png"); background-repeat: no-repeat; background-size: 900px auto; box-sizing: border-box; display: block;}
  .page-download-sec1-con .content ul.download-list li a:hover { color: #FF9200;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list { width: 100%; padding: 30px 40px 0 120px; margin: 0; list-style: disc; display: block; box-sizing: border-box;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li { width: 100%; padding: 0 0 20px 0; margin: 0; font-size: 1.1rem; line-height: 1.2em;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a { color: #414141; text-decoration: none;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a:hover { border-bottom: 1px #414141 dashed;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sitemap-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box; position: relative;}
  .page-sitemap-con .content { clear: both; width: 100%; padding: 90px 40px 80px 40px; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}

  ul.sitemap-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul.sitemap-list li { padding: 0; margin: 0 10px 30px 10px;}
  ul.sitemap-list li a { text-decoration: none;}
  ul.sitemap-list li span.nav { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1em; background-color: #265384;}
  ul.sitemap-list li a:hover span.nav { color: #FF9200;}
  ul.sitemap-list li ul.popup { padding: 0; margin: 20px 0 0 0; list-style: none; display: block;}
  ul.sitemap-list li ul.popup li { padding: 0; margin: 0;}
  ul.sitemap-list li ul.popup li a { color: #265384; font-size: 1.2rem; font-weight: 500; line-height: 2em; text-decoration: none;}
  ul.sitemap-list li ul.popup li a:hover { border-bottom: 1px #265384 solid;}


  /************ footer ************/

  footer { clear: both; width: 100%; border-bottom: 20px #265384 solid;}

  .footer-nav { width: 100%; padding: 20px 40px; box-sizing: border-box; background-color: #1D253E;}
  .footer-nav ul.nav-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start;}
  .footer-nav ul.nav-list li { padding: 0; margin: 0 15px; color: #FFA200; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .footer-nav ul.nav-list li a { color: #FFA200; text-decoration: none;}
  .footer-nav ul.nav-list li a:hover { border-bottom: 2px #FFA200 solid;}
  .footer-nav ul.nav-list li ul.nav-list-pop { clear: both; padding: 0 0 0 5px; margin: 0; list-style: none; display: block;}
  .footer-nav ul.nav-list li ul.nav-list-pop li { padding: 0; margin: 10px 0; font-size: 1rem; font-weight: normal; line-height: 1.2em;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a { color: #fff; text-decoration: none;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a:hover { border-bottom: 1px #fff solid;}

  .footer-infor { clear: both; width: 100%; padding: 20px calc(50% - 500px); box-sizing: border-box; background-color: #E6E6E6; display: flex; justify-content: flex-start; align-items: center;}
  .footer-infor .qrcode-box { width: 170px;}
  .footer-infor .qrcode-box img { width: 90%; height: auto;}
  .footer-infor .address-nav { width: calc(100% - 170px); position: relative;}
  .footer-infor .address-nav .address-mo { display: none;}
  .footer-infor .address-nav .address { width: 100%; font-size: 1.1rem; font-weight: 500; line-height: 1.8em;}
  .footer-infor .address-nav .address a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
    
  .footer-social-icon { width: 120px; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; right: 60px;}
  .footer-social-icon img { width: 28px; height: auto; margin: 0 3px;}


}

@media screen and (min-width: 768px) and (max-width: 1279px) {

  #gotop-bt { width: 60px; height: 60px; border-radius: 100%; background-color: #1D253E; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 50px; right: 20px; cursor: pointer; z-index: 10000;}
  #gotop-bt span.icon { color: #fff; font-size: 2em;}


  /************ header + banner + nav ************/

  header { width: 100%; position: relative;}

  .header-top-logo { width: 100%; padding: 10px 0 0 0; background-color: #000;}
  .header-top-logo img { width: 200px; height: auto; margin: 0 auto;}

  .header-top-bar { clear: both; width: 100%; padding: 7px 20px; box-sizing: border-box; background-color: #000; display: flex; justify-content: space-between; align-items: center; position: relative;}
  .header-top-bar .top-nav-mo-icon { width: 40px; color: #FF9200; font-size: 1.4em; line-height: 1em; text-align: center; cursor: pointer;}
  .header-top-bar ul.top-nav { display: none;}
  .header-top-bar ul.top-nav-mo { width: 300px; padding: 40px; margin: 0; box-sizing: border-box; color: #FF9200; font-size: 1.1em; line-height: 1em; background-color: #000; list-style: none; display: none; position: absolute; top: 43px; left: -300px; z-index: 99999;}
  .header-top-bar ul.top-nav-mo li { padding: 20px; margin: 0; border-bottom: 1px #FF9200 solid;}
  .header-top-bar ul.top-nav-mo li:last-child { border-bottom: 0;}
  .header-top-bar ul.top-nav-mo li a { color: #FF9200; text-decoration: none;}  
  .header-top-bar .top-search { padding: 2px 0; margin: 0 20px; color: #151C51; background-color: #fff;}
  .header-top-bar .top-search form { display: flex; justify-content: flex-start; align-items: center;}
  .header-top-bar .top-search input[type=search] { padding: 3px 5px; border: 0; color: #151C51; background-color: #fff; box-sizing: border-box;}
  .header-top-bar .top-search input[type=button] { width: 30px; height: 22px; color: #151C51; background-image: url("../images/header_top_search_icon.png"); background-repeat: no-repeat; background-size: 22px 22px; background-position: center top; border: 0; background-color: #fff; cursor: pointer;}
  .header-top-bar .top-social { display: flex; justify-content: center; align-items: center;}
  .header-top-bar .top-social img.icon { width: 30px; height: 30px; margin: 0 5px;}

  .header-bt-bar { clear: both; width: 100%; padding: 20px 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-bt-bar .ntcu-logo { width: 300px;}
  .header-bt-bar .ntcu-logo img { width: 300px; height: auto;}

  nav#header-nav-pc { display: none;}

  nav#header-nav-mo { width: calc(100% - 300px);}
  nav#header-nav-mo .nav-icon-open { width: 50px; color: #265384; font-size: 2.4em; text-align: center; float: right;}
  nav#header-nav-mo ul#nav-list { clear: both; width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: #265384; list-style: none; display: none; position: absolute; top: 184px; left: 0; z-index: 99999;}
  nav#header-nav-mo ul#nav-list li { padding: 0; margin: 0; text-align: center;}
  nav#header-nav-mo ul#nav-list li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.4em; font-weight: 600; line-height: 1em; text-decoration: none; display: block;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup { width: 100%; padding: 10px; margin: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.2); list-style: none; display: none;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.2) solid;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup li:last-child { border-bottom: 0;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.4rem; font-weight: 300; line-height: 1.2em; text-align: center; text-decoration: none; display: block;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%;}

  img.hp-banner { width: 96%; margin: 0 2%; height: auto;}


  /************ secetion #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 50px 0 0 0;}

  .page-hp-sec-1-con { width: 100%; position: relative;}
  .page-hp-sec-1-con .content { width: 100%; padding: 40px 40px 75px 40px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative;}
  .page-hp-sec-1-con .content .sub-title { margin: 25px 0 40px 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-hp-sec-1-con .content .sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-1-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box { width: calc(100% / 2 - 30px); margin: 0 15px 15px 15px;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box:hover { -moz-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3);}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a { width: 100%; padding: 35px 40px 0 40px; text-decoration: none; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: block;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.line-icon { width: 45px; height: auto;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.en { color: #808080; font-size: 0.9rem; font-weight: 300; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.cn { color: #000; font-size: 1.8rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.intro { color: #3A5BA0; font-size: 1.2rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.arrow-icon { width: 25px; height: auto; float: right;}
  .page-hp-sec-1-con .blue-block { width: calc(40px + 20vw); height: 500px; background-color: #1D253E; display: block; position: absolute; top: 120px; left: 0; z-index: 1;}

  .page-hp-sec-1-con .content .pro-technology-list-mo { display: none;}
  .page-hp-sec-1-con .content .pro-technology-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box { width: calc(50% - 30px); margin: 0 15px 30px 15px; background-color: #fff; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box a { text-decoration: none;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style1 { border: 5px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style2 { border: 5px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style3 { border: 5px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box.style4 { border: 5px #FF9200 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title { width: 100%; padding: 30px 15px 20px 15px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style1 { color: #fff; background-color: #1A3F5B;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style2 { color: #000; background-color: #80735A;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style3 { color: #fff; background-color: #103C82;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title.style4 { color: #000; background-color: #FF9200;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title span.en { opacity: 0.5; padding: 0 0 15px 0; font-size: 1.2em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .top-title span.cn { font-size: 2.2rem; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor { width: 100%; padding: 15px 20px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text { width: 100%; padding: 15px 0; color: #3A5BA0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style1 { border-bottom: 2px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style2 { border-bottom: 2px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style3 { border-bottom: 2px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list .technology-box .infor .text.style4 { border-bottom: 2px #FF9200 solid;}


  .more-pro-tech-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .more-pro-tech-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-pro-tech-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; position: relative;}

  img.hp-topnews-banner { width: 100%; height: auto;}

  .page-hp-sec-2-con { width: 100%;}
  .page-hp-sec-2-con .content { width: 100%; padding: 40px 40px 70px 40px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-hp-sec-2-con .content .sub-title { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-hp-sec-2-con .content .sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-2-con .content .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-2-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  .page-hp-sec-2-con .content .top-news-list { clear: both; width: 100%;}
  .page-hp-sec-2-con .content .top-news-list .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-hp-sec-2-con .content .top-news-list .news-list .sort { width: 200px; padding: 12px; color: #fff; font-size: 1.2rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .date { width: 180px; padding: 12px; font-size: 1.4rem; font-weight: 500; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title { clear: both; width: 100%; padding: 10px; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a { color: #414141; font-size: 1.2rem; line-height: 1.3em; text-decoration: none;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a:hover { color: #043B6F;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}

  .more-news-bt { clear: both; width: 150px; float: right;}
  .more-news-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-news-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; padding: 30px 0 100px 0; background-image: url("../images/hp_sec3_bg.png"); background-repeat: no-repeat; background-size: 750px auto; background-position: right bottom; position: relative;}

  .hp-sec3-blue-block { width: 100%; height: 400px; background-color: #1D253E; display: block; position: absolute; top: 30px; left: 0; z-index: 1;}

  .page-hp-sec-3-con { width: 100%; padding: 40px 40px 0 40px; box-sizing: border-box; position: relative; z-index: 2;}
  .page-hp-sec-3-con .sub-title { width: 100%; margin: 0 0 50px 0; display: flex; justify-content: center; align-items: center;}
  .page-hp-sec-3-con .sub-title span.cn { color: #fff; font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-3-con .sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-hp-sec-3-con .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}
  
  .latest-articles-list-mo { display: none;}
  .latest-articles-list { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .latest-articles-list .article-box { width: calc(100% / 2 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .latest-articles-list .article-box a { width: 100%; text-decoration: none; display: block;}
  .latest-articles-list .article-box a .pic { width: 100%; height: 33.5vw; overflow: hidden;}
  .latest-articles-list .article-box a .pic img { width: 100%; height: auto;}
  .latest-articles-list .article-box a .date { width: 100%; padding: 0 30px 10px 30px; box-sizing: border-box;}
  .latest-articles-list .article-box a .date span { color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; float: left;}
  .latest-articles-list .article-box a .date .sort { width: 120px; padding: 6px 0; color: #FFA200; font-size: 1.1em; line-height: 1em; text-align: center; border-radius: 14px; background-color: #FFE5B4; float: right;}
  .latest-articles-list .article-box a .teachers { clear: both; width: 100%; padding: 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list .article-box a .name { clear: both; width: 100%; padding: 0 5% 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list .article-box a img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .latest-articles-list .article-box a .title { clear: both; width: 100%; height: 100px; padding: 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .latest-articles-list .article-box a .title p { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .latest-articles-list .article-box a .excerpt { clear: both; width: 100%; padding: 0 5% 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: right; box-sizing: border-box;}
  .latest-articles-list .article-box a .intro { clear: both; width: 100%; padding: 0 0 10px 0; color: #808080; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .hp-sec3-more-bt { clear: both; width: 80%; margin: 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: center; align-items: center;}
  .hp-sec3-more-bt img.arrow-lf { width: 60px; height: auto;}
  .hp-sec3-more-bt img.arrow-rt { width: 60px; height: auto;}
  .hp-sec3-more-bt .more-bt { width: 100px;}
  .hp-sec3-more-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .hp-sec3-more-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ page banner ************/

  .page-banner-box { clear: both; width: 100%; overflow: hidden; position: relative;}
  .page-banner-box img { width: 140%; height: auto; margin: 0 0 0 -10%;}
  .page-banner-box .text { width: 400px; color: #fff; font-size: 3rem; font-weight: 300; line-height: 1.4em; position: absolute; bottom: 40px; left: 40px;}


  /************ section#page-about1 ************/

  section#page-about1-sec1 { clear: both; width: 100%; background-image: url("../images/page_about1_sec1_bg.png"); background-repeat: no-repeat; background-size: 815px auto; background-position: left bottom; position: relative; z-index: 1;}

  .bread-crumbs { width: calc(100% - 40px); position: absolute; top: 0; left: 0; z-index: 2;}
  .bread-crumbs img.bg { width: 580px; height: auto;}
  .bread-crumbs span.path { color: #767676; font-size: 0.9rem; line-height: 1.2em; position: absolute; top: 25px; left: 240px;}
  .bread-crumbs span.path a { color: #767676; text-decoration: none;}
  .bread-crumbs span.path a:hover { border-bottom: 1px #767676 dashed;}

  .page-about1-sec1-con { clear: both; width: 100%; padding: 80px 40px 125px 40px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about1-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}

  .page-sub-title { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center;}
  .page-sub-title span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}


  section#page-about1-sec2 { clear: both; width: 100%; background-image: url("../images/page_about1_sec2_bg.png"); background-repeat: no-repeat; background-size: 810px auto; background-position: right bottom; position: relative; z-index: 2;}

  .page-about1-sec2-block { clear: both; width: 100%; height: 16vw; background-color: #0D3255;}
  .page-about1-sec2-block img.banner { width: 80%; height: auto; margin: -60px 40px 0 0; float: right;}

  .page-about1-sec2-con { clear: both; width: 100%; position: relative; z-index: 1;}
  .page-about1-sec2-con .content { clear: both; width: 100%; padding: 30px 40px 40px 40px; box-sizing: border-box; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph; background-color: rgba(231,238,246,0.5);}
  .page-about1-sec2-con .content img.pic1 { width: 46vw; height: auto; margin: 30px 0 0 0;}

  .page-about1-sec2-con .content img.pic2 { width: 35vw; height: auto; margin: 0 0 20px 20px; float: right;}
  .page-about1-sec1-con .content img.pic3 { max-width: 90%; height: auto; margin: 0 0 40px 0;}


  /************ section#page-about2 ************/

  section#page-about2-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; position: relative; z-index: 1;}

  .page-about2-sec1-con { clear: both; width: 100%; padding: 80px 40px 0 40px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about2-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 1em; text-align: justify; text-justify: inter-ideograph; border-left: 4px #FFA200 solid; box-sizing: border-box;}
  .page-about2-sec1-con .content .stitle-box { clear: both; width: 100%; min-height: 64px; background-image: url("../images/page_about2_stitle_bg.png"); background-repeat: no-repeat; background-size: 349px auto; background-position: left top;}
  .page-about2-sec1-con .content .stitle-box .title { width: calc(100% - 349px); padding: 0 0 0 0; float: right;}
  .page-about2-sec1-con .content .stitle-box .title span { padding: 7px 20px 7px 0; color: #fff; font-size: 1.4em; font-weight: 600; line-height: 1.6em; background-color: #FFA200; display: block;}
  .page-about2-sec1-con .content .text-con { clear: both; width: 100%; padding: 30px 20px 60px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text .icon { width: 35px;}
  .page-about2-sec1-con .content .text-con .big-text .list { width: calc(100% - 35px);}
  .page-about2-sec1-con .content .text-con .text-1 { width: calc(100% - 334px);}
  .page-about2-sec1-con .content .text-con .text-1 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-1 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-1 { width: 334px; padding: 0 0 0 80px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-1 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-1 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-2 { width: calc(100% - 420px);}
  .page-about2-sec1-con .content .text-con .text-2 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-2 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-2 { width: 420px; padding: 0 0 0 50px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-2 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-2 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-3 { width: calc(100% - 320px);}
  .page-about2-sec1-con .content .text-con .text-3 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-3 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-3 { width: 320px; padding: 0 0 0 70px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-3 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-3 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-5 { width: calc(100% - 380px);}
  .page-about2-sec1-con .content .text-con .text-5 .small-text { width: 100%; font-size: 1.1rem; line-height: 2.2em;}
  .page-about2-sec1-con .content .text-con .text-5 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-5 { width: 380px; padding: 0 0 0 40px; box-sizing: border-box;}
  .page-about2-sec1-con .content .text-con .pic-5 img { width: 100%; height: auto;}
  .page-about2-sec1-con .content .text-con .pic-5 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}


  /************ section#page-about3 ************/

  section#page-about3-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-about3-sec1-con { clear: both; width: 100%; padding: 80px 40px 30px 40px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about3-sec1-con .content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about3-sec1-con .content .alumni-news-box { width: calc(100% / 2 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a { width: 100%; text-decoration: none; display: block;}
  .page-about3-sec1-con .content .alumni-news-box a .pic { width: 100%;}
  .page-about3-sec1-con .content .alumni-news-box a .pic img { width: 100%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .date { width: 100%; padding: 10px 30px; color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a img.line { width: 90%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .title { width: 100%; padding: 10px 30px; color: #414141; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a .intro { width: 100%; padding: 0 30px 30px 30px; color: #414141; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .page-content-video { clear: both; width: 80%; margin: 0 auto;}


  /************ section#page-signup ************/

  section#page-signup-sec1 { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title span.top-title { width: 100%; font-size: 2.2rem; font-weight: 300; line-height: 1.2em; text-align: center;}

  .page-signup-sec1-con { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-signup-sec1-con .content { clear: both; width: 100%;}
  .page-signup-sec1-con .content .signup-notice { width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}
  .page-signup-sec1-con .content .signup-notice .notice-title { width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .page-signup-sec1-con .content .signup-login { clear: both; width: 80%; margin: 60px auto 0 auto; text-align: center;}
  .page-signup-sec1-con .content .signup-login input[type=text] { width: 180px; padding: 5px 10px; color: #414141; font-size:1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; border-radius: 8px;}
  .page-signup-sec1-con .content .signup-login input[type=button] { width: 180px; padding: 5px 10px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .page-signup-sec1-con .content .signup-login input[type=button]:hover { background-color: #666;}

  .signup-sub-title { clear: both; width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .signup-sub-title span.small { font-size: 1rem;}

  .signup-form-table { clear: both; width: 100%; font-size: 1.1rem;}
  .signup-form-table input[type=text].style1 { width: 200px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}
  .signup-form-table input[type=text].style2 { width: 100px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}

  .signup-form-bt { clear: both; width: 100%; padding: 40px 0 0 0; text-align: center;}
  .signup-form-bt input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-form-bt input[type=button]:hover { background-color: #666;}


  #page-signup-show { clear: both; width: 100%;}
  #page-signup-show .signup-show-sub-title { width: 100%; padding: 30px 0; font-size: 1.4rem; text-align: center;}
  #page-signup-show .signup-show-sub-title span.small { font-size: 1rem;}

  .signup-signature { clear: both; width: 100%; margin: 60px 0; font-size: 1.2rem;}
  .signup-signature .column-lf { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start;}
  .signup-signature .column-rt { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start;}
  .signup-signature .column-lf span.underline, 
  .signup-signature .column-rt span.underline { width: 200px; border-bottom: 1px #414141 solid; display: block;}

  .signup-goback-print { clear: both; width: 100%; text-align: center;}
  .signup-goback-print input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-goback-print input[type=button]:hover { background-color: #666;}


  /************ section#page-about4 ************/

  section#page-about4 { clear: both; width: 100%; background-image: url("../images/page_about4_bg.jpg"); background-repeat: no-repeat; background-size: 160% auto; background-position: center 70vw; position: relative; z-index: 1;}

  .page-about4-sec1 { clear: both; width: 100%; padding: 40px 40px 80px 40px; box-sizing: border-box; position: relative; z-index: 1;}  
  .page-about4-sec1 .group-top-pic { width: 100%;}

  .page-about4-sec2 { clear: both; width: 100%; padding: 40px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-about4-sec2 .group-title { clear: both; width: 100%; margin: -40px 0 0 0;}
  .page-about4-sec2 .group-title .title-box { width: 60%; padding: 40px 20px 50px 40px; color: #fff; font-size: 2.6rem; font-weight: 600; line-height: 1.2em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .title-box img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-about4-sec2 .group-title .title-box.style1 { background-color: #1A3F5B;}
  .page-about4-sec2 .group-title .title-box.style2 { background-color: #80735A;}
  .page-about4-sec2 .group-title .title-box.style3 { background-color: #103C82;}
  .page-about4-sec2 .group-title .title-box.style4 { background-color: #FF9200;}
  .page-about4-sec2 .group-title .infor-box { width: 100%; padding: 40px; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .infor-box.style1 { border-bottom: 3px #1A3F5B solid;}
  .page-about4-sec2 .group-title .infor-box.style2 { border-bottom: 3px #80735A solid;}
  .page-about4-sec2 .group-title .infor-box.style3 { border-bottom: 3px #103C82 solid;}
  .page-about4-sec2 .group-title .infor-box.style4 { border-bottom: 3px #FF9200 solid;}
  .page-about4-sec2 .group-title .infor-box span.title { font-size: 1.4rem; font-weight: 600;}
  .page-about4-sec2 .group-teachers { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list { width: 100%; padding: 40px; box-sizing: border-box; background-color: rgba(226,240,217,0.5);}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-1 { clear: both; width: 170px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-1 { width: 170px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-2 { clear: both; width: 315px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-2 { width: 315px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table { clear: both; width: 100%; padding: 20px 0 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box { width: calc(100% / 4 - 10px); margin: 0 5px 20px 5px;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box a { color: #414141; text-decoration: none;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic { width: 100%; height: 28vw; overflow: hidden; display: flex; justify-content: center;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic img { width: auto; height: 100%;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .name { width: 100%; padding: 10px 0; font-size: 1.1rem; line-height: 1em; text-align: center;}


  a.about4-spotlight { 
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 20px;
    position: relative;
    transition: all .3s linear;
    text-decoration: none;
    overflow: hidden;
    float: right;
  }
  
  a.about4-spotlight > p{
    position: relative;
    z-index: 1;
  }
  a.about4-spotlight::before{
      content: "";
      width: 0%;
      height: 100%;
      display: block;
      background-color: #FF9200;
      position: absolute;
      top: 0;
      right: 0;
      transition: all .3s ease;
  }
  a.about4-spotlight:hover{
      color: #fff;
  }
  a.about4-spotlight:hover::before{
      width: 100%;
  }


  /************ section#page-news ************/

  section#page-news-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-news-sec1-con { clear: both; width: 100%; padding: 50px 0 80px 0; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-news-sec1-con .news-sort-all { display: none;}
  .page-news-sec1-con ul.news-sort-nav { width: 100%; padding: 30px 40px 30px 40px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-news-sec1-con ul.news-sort-nav li { width: 145px; padding: 0; margin: 0 10px 10px 10px;}
  .page-news-sec1-con ul.news-sort-nav li a { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; display: block;}
  
  .page-news-top-news-con { display: none;}
  .page-news-top-news-con-mo { width: 100%; }
  .page-news-top-news-con-mo a { width: 100%; text-decoration: none; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-news-top-news-con-mo .pic { width: 280px; height: 270px; overflow: hidden;}
  .page-news-top-news-con-mo .pic img { width: auto; height: 100%;}
  .page-news-top-news-con-mo .text-con { width: calc(100% - 280px); padding: 0 30px; box-sizing: border-box; background-color: #FFE5B4;}
  .page-news-top-news-con-mo .text-con .sort-date { width: 100%; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-top-news-con-mo .text-con .sort-date .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .page-news-top-news-con-mo .text-con .sort-date .date { width: calc(100% - 200px); padding: 0 0 0 30px; color: #1A3F5B; font-size: 1.4em; line-height: 1em; box-sizing: border-box;}
  .page-news-top-news-con-mo .text-con .title { width: 100%; padding: 20px 0; color: #414141; font-size: 1.4rem; font-weight: 600; line-height: 1.1em;}
  .page-news-top-news-con-mo .text-con .text { width: 100%; color: #414141; font-size: 1rem; line-height: 2.2em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;}
  
  .page-news-sec1-con .content { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-sec1-con .content .news-list .sort { width: 200px; padding: 12px; color: #fff; font-size: 1.2rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .date { width: 180px; padding: 12px; font-size: 1.4rem; font-weight: 500; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title { width: calc(100% - 200px - 180px); padding: 10px; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title a { color: #414141; font-size: 1.2rem; line-height: 1.3em; text-decoration: none;}
  .page-news-sec1-con .content .news-list .title a:hover { color: #043B6F;}
  .page-news-sec1-con .content .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}


  .page-numbers { clear: both; width: 90%; margin: 60px auto 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-numbers img.arrow-lf { width: 40px; height: auto;}
  .page-numbers img.arrow-rt { width: 40px; height: auto;}
  .page-numbers ul.page-num { width: calc(100% - 120px); padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .page-numbers ul.page-num li { padding: 0; margin: 5px;}
  .page-numbers ul.page-num li a { width: 30px; height: 30px; color: #FFA200; font-size: 0.8rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 100%; background-color: #FFE5B4; display: flex; justify-content: center; align-items: center;}
  .page-numbers ul.page-num li a:hover { color: #FFE5B4; background-color: #FFA200;}
  .page-numbers ul.page-num li a.sel { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-news-content ************/

  .page-news-con-sec1-con { clear: both; width: 100%; padding: 125px 0 60px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}

  .page-news-con-top-title-mo { display: none;}
  .page-news-con-top-title { width: 100%; padding: 0 0 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: absolute; top: 80px; left: 0; z-index: 3;}
  .page-news-con-top-title .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center;}
  .page-news-con-top-title .title { width: calc(100% - 200px); padding: 12px 20px; box-sizing: border-box; font-size: 1.2rem; font-weight: 600; line-height: 1.2em; background-color: #FFE5B4;}
  .page-news-con-top-title .date-author { width: 100%; padding: 10px 0;}
  .page-news-con-top-title .date-author span.date { padding: 0 20px 0 0; font-size: 1.4rem; font-weight: 500; line-height: 1em;}
  .page-news-con-top-title .date-author span.author { font-size: 1rem;}

  .page-news-con-sec1-con .content { clear: both; width: 100%; padding: 120px 40px 60px 40px; font-size: 1.2rem; line-height: 1.8em; text-align: justify; box-sizing: border-box;}
  .page-news-con-sec1-con .content a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-news-con-sec1-con .content img { width: 70%; height: auto; margin: 0 auto 30px auto;}
  .page-news-con-sec1-con .content .pic-text { clear: both; width: 70%; margin: -20px auto 40px auto; font-size: 0.9rem; line-height: 1.1em; text-align: center;}
  .page-news-con-sec1-con .content .download-share { clear: both; width: 100%; padding: 30px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-news-con-sec1-con .content .download-share .download { padding: 0 5px; box-sizing: border-box;}
  .page-news-con-sec1-con .content .download-share .download a { text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-con-sec1-con .content .download-share .download a img { width: 26px; height: auto; margin: 0 15px 0 0;}
  .page-news-con-sec1-con .content .download-share .download a span { padding: 5px 0 0 0; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-con-sec1-con .content .download-share .share img { width: 40px; height: auto;}

  .news-video-box { clear: both; width: 70%; margin: 30px auto;}

  table { width: 100%; font-size: 1rem; line-height: 1.2em; border: 1px #ccc solid;}


  /************ section#page-members ************/

  section#page-members-sec1 { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-members-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-members-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-members-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .search-choice-box span input[type=search] { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .members-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-sec1-con .members-list .members-box { width: calc(100% / 3 - 20px); margin: 0 10px 20px 10px; background-color: rgba(231,238,246,0.5);}
  .page-members-sec1-con .members-list .members-box .pic { width: 100%; height: 260px; background-color: #031F35; display: flex; justify-content: center; overflow: hidden;}
  .page-members-sec1-con .members-list .members-box .pic img { width: auto; height: 100%;}
  .page-members-sec1-con .members-list .members-box .name { width: 100%; padding: 10px 20px; box-sizing: border-box; text-align: center;}
  .page-members-sec1-con .members-list .members-box .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box img.line-oran { clear: both; width: calc(100% - 60px); height: auto; margin: 0 auto;}
  .page-members-sec1-con .members-list .members-box .intro { clear: both; width: 100%; padding: 10px 20px; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box;}
  .page-members-sec1-con .members-list .members-box .intro .title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem;}
  .page-members-sec1-con .members-list .members-box .intro .caption { width: 100%; margin: 0 0 px 0;}
  .page-members-sec1-con .members-list .members-box .intro .column { width: 100%; margin: 0 0 10px 0; /*word-break: break-all; overflow-wrap: break-word;*/ display: block;}
  .page-members-sec1-con .members-list .members-box .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}


  /************ section#page-members-con ************/

  section#page-members-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-sub-title2 { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-sub-title2 .cn { width: 100%; margin: 0 0 10px 0; font-size: 2.8em; font-weight: 300; line-height: 1em; text-align: center;}
  .page-sub-title2 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title2 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-members-con-sec1-con { clear: both; width: 100%; padding: 80px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-con-sec1-con .content-top { width: 100%;}
  .page-members-con-sec1-con .content-top .member-infor { width: 100%; padding: 0 40px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex; justify-content: flex-start; align-items: stretch;}
  .page-members-con-sec1-con .content-top .member-infor .pic { width: 340px; height: 380px; background-color: #031F35; display: flex; justify-content: center; overflow: hidden;}
  .page-members-con-sec1-con .content-top .member-infor .pic img { width: auto; height: 100%;}
  .page-members-con-sec1-con .content-top .member-infor .infor { width: calc(100% - 340px); padding: 20px 0; box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name { width: 100%; padding: 10px 20px; box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor img.line { clear: both; max-width: 100%; width: 450px; height: auto; margin: 0 0 0 20px;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro { clear: both; width: 100%; padding: 10px 20px; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .title { width: 100%; margin: 0 0 30px 0; font-size: 1.4rem;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .caption { width: 90px; margin: 0 10px 15px 0; text-align: right;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column { width: calc(100% - 100px); margin: 0 0 10px 0; word-break: break-all; overflow-wrap: break-word; display: block;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .member-detail-tab { clear: both; width: 100%; padding: 20px 40px; box-sizing: border-box; background-color: #1D253E;}
  .page-members-con-sec1-con .member-detail-tab img.line { width: 92%; height: auto; margin: 0 auto;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li { padding: 0; margin: 0 10px 10px 10px;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a { padding: 3px 20px; color: #fff; font-size: 1.4em; line-height: 1em; text-align: center; text-decoration: none; border: 1px #3391FD solid;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a:hover { background-color: #3391FD;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a.sel { background-color: #3391FD;}

  .page-members-con-sec1-con .content-bottom { width: 100%;}
  .page-members-con-sec1-con .content-bottom ul.detail-content { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; list-style: none; background-color: rgba(231,238,246,0.5); display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li { width: 100%; padding: 0; margin: 0 0 20px 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar { width: 100%; border-bottom: 1px #FFA200 solid; display: flex; justify-content: space-between; align-items: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-up { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: none; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-down { display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-down { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-up { display: flex;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle { width: 320px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: center; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 { width: 440px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: center; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 { width: 440px; padding: 10px 0 10px 10px; color: #fff; font-size: 2em; font-weight: 300; line-height: 1em; display: flex; justify-content: center; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table { clear: both; width: 100%; padding: 20px 0; font-size: 1.2rem; line-height: 1.8em; text-align: justify; display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .detail-list-table { display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table { clear: both; width: 100%; padding: 20px 10px 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .sub-title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; text-align: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor { width: calc(100% / 3 - 20px); margin: 0 10px 20px 10px; padding: 5px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic { width: 30%;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic img { width: 100%; height: auto;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro { width: 70%; font-size: 0.9rem; line-height: 1.2em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul { width: 100%; padding: 0 0 0 24px; margin: 0; list-style: disc; box-sizing: border-box; display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul li { padding: 0; margin: 0 0 5px 0; word-wrap: break-word; word-break: break-all;}


  .page-members-back-bt { clear: both; width: 80%; margin: 40px auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-members-back-bt img.arrow-lf { width: 50px; height: auto;}
  .page-members-back-bt img.arrow-rt { width: 50px; height: auto;}
  .page-members-back-bt .more-bt { width: 100px;}
  .page-members-back-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .page-members-back-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-lab ************/

  section#page-lab-sec1 { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-lab-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .page-lab-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-lab-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}

  .page-lab-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-lab-list-table .lab-list-box { width: calc(100% / 2 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-lab-list-table .lab-list-box:hover { -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); -webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2);}
  .page-lab-list-table .lab-list-box .photo { width: 100%; height: 21vw; overflow: hidden;}
  .page-lab-list-table .lab-list-box .photo img { width: 100%; height: auto;}
  .page-lab-list-table .lab-list-box .photo a { width: 100%; height: 100%; display: block;}
  .page-lab-list-table .lab-list-box .intro { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; line-height: 2em;}
  .page-lab-list-table .lab-list-box .intro .title { width: 100%; padding: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2em;}
  .page-lab-list-table .lab-list-box .intro a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  .lab-articles-list { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .lab-articles-list .article-box { width: calc(100% / 2 - 10px); margin: 0 5px 10px 5px; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .lab-articles-list .article-box .pic { width: 100%; height: 25vw; overflow: hidden;}
  .lab-articles-list .article-box .pic img { width: 100%; height: auto;}
  .lab-articles-list .article-box .teachers { clear: both; width: 100%; padding: 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box .name { clear: both; width: 100%; padding: 0 5% 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .lab-articles-list .article-box .title { clear: both; width: 100%; height: 140px; padding: 20px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.4em; box-sizing: border-box; overflow-wrap: break-word; word-break: break-all;}
  .lab-articles-list .article-box .title p { padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
  .lab-articles-list .article-box .title p a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  /************ section#page-lab-con ************/

  section#page-lab-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_lab_con_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-lab-con-banner { clear: both; width: 100%; background-color: #031F35; position: relative;}
  .page-lab-con-banner img.banner-bg { width: 100%; height: auto; margin: 0 auto;}
  .page-lab-con-banner .lab-title { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}
  .page-lab-con-banner .lab-title span { padding: 1vw 3vw; color: #000; font-size: 3.4vw; font-weight: 700; line-height: 1em; text-align: center; background-color: rgba(247,255,255,0.5);}

  .page-lab-con-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-con-sec1-con .lab-con-title { width: 100%; padding: 20px 0 10px 40px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-title span.caption { color: #1A3F5B; font-size: 1.8em; font-weight: 300; line-height: 1em;}
  .page-lab-con-sec1-con .lab-con-title span.name { font-size: 2.2em; line-height: 1em;}
  .page-lab-con-sec1-con img.line { clear: both; max-width: 90%; width: 825px; height: auto;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box { clear: both; width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box img.icon { width: 100px; height: auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box span.title { padding: 8px 20px 8px 10px; margin: 0 0 0 -18px; color: #000; font-size: 1.6em; font-weight: 500; line-height: 1.2em; background-color: #FFA200;}

  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor { clear: both; width: 100%; padding: 20px 0; margin: 10px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo { width: 240px;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo img { width: 100%; height: auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor { width: calc(100% - 240px); padding: 0 0 0 40px; font-size: 1.1rem; line-height: 1.8em; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-cn { font-size: 2rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-en { font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor hr { width: 100%; margin: 20px 0; border: 1px #eee solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .people-list { clear: both; padding: 20px 40px; font-size: 1.2rem; font-weight: 300; line-height: 2em; background-color: rgba(231,238,246,0.5);}
  .page-lab-con-sec1-con .people-list span.title { color: #103C82; font-size: 1.8rem;}
  
  .page-lab-con-sec1-con ul.lab-con-tab { clear: both; width: 100%; padding: 0; margin: 10px 0; list-style: none; background-color: rgba(255,229,180,0.5); display: flex; justify-content: center; flex-wrap: wrap;}
  .page-lab-con-sec1-con ul.lab-con-tab li { padding: 0; margin: 0;}
  .page-lab-con-sec1-con ul.lab-con-tab li a { padding: 20px; color: #FFA200; font-size: 1.2rem; line-height: 1em; text-decoration: none; display: block;}
  .page-lab-con-sec1-con ul.lab-con-tab li a:hover { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  .page-lab-con-sec1-con ul.lab-con-tab li a.sel { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  
  .page-lab-con-sec1-con .lab-con-detail { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content { width: 100%; padding: 40px 20px; box-sizing: border-box; border-top: 15px #031F35 solid; background-color: rgba(231,238,246,0.5);}
  .page-lab-con-sec1-con .lab-con-detail .content div { display: none; font-size: 1.2rem; line-height: 1.8em; text-align: justify;}

  .page-lab-con-sec1-con .lab-con-detail .content div table a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full { width: 100%; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-1 { width: 120px; padding: 15px 10px; color: #FF9200; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-2 { width: calc(100% - 220px); padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 { width: 100px; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a { width: 100%; padding: 5px 0; color: #FF9200; font-size: 1rem; line-height: 1rem; text-align: center; text-decoration: none; border-radius: 16px; background-color: #FFE5B4; display: block;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a:hover { color: #fff; background-color: #FF9200;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle { width: 290px; padding: 10px 0 10px 10px; margin: 0 0 30px 0; color: #fff; font-size: 2rem; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle img { width: 140px; height: auto; margin: 0 10px 0 0;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle { clear: both; width: 100%; margin: 0 0 20px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle img.title { width: auto; height: 50px;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-2 { width: 25%; padding: 15px 10px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-2 { width: 90%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-2 { width: 90%; padding: 15px 10px; box-sizing: border-box;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full { width: 100%; color: #031F35; font-weight: 600; text-align: center; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-3 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-4 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-5 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full { width: 100%; text-align: center; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full:nth-child(odd) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-3 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-4 { width: 40%; padding: 15px 10px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 a { padding: 8px 10px; color: #fff; text-align: center; text-decoration: none; border-radius: 6px; background-color: #356588; display: block;}
  
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .list-year { clear: both; width: 100%; padding: 0 0 30px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list { clear: both; width: 100%; padding: 0 0 0 80px; margin: 0 0 40px 0; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list .list { width: 100%; padding: 13px 0; border-bottom: 1px #B3B3B3 solid;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-2 { width: 65%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-3 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-1 { width: 10%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-2 { width: 65%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content ul { list-style-type: circle;}
  .page-lab-con-sec1-con .lab-con-detail .content ul li { padding: 0 0 20px 0;}

  
  .lab-con-members-list-table { clear: both; width: 100%; margin: 0 0 40px 0; display: flex !important; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor { width: calc(100% - 20px); padding: 10px; margin: 0 10px 20px 10px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); display: flex !important; justify-content: flex-start; align-items: flex-start;}
  .lab-con-members-list-table .teacher-master-infor .photo { width: 46%; height: 50vw; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .teacher-master-infor .photo img { width: auto; height: 100%;}  
  .lab-con-members-list-table .teacher-master-infor .intro { width: 54%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .teacher-master-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6rem;}
  .lab-con-members-list-table .teacher-master-infor .intro img.master-line { clear: both; width: 80%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con p.text { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 { width: calc(100% - 50px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float2 { width: 120px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 { width: calc(100% - 120px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}

  .lab-con-members-list-table .researcher-infor { width: calc(50% - 20px); padding: 10px; margin: 0 10px 20px 10px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .lab-con-members-list-table .researcher-infor .photo { width: 100%; height: 50vw; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .researcher-infor .photo img { width: auto; height: 100%;}  
  .lab-con-members-list-table .researcher-infor .intro { width: 100%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .researcher-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6rem; text-align: center;}
  .lab-con-members-list-table .researcher-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .researcher-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con p.text { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 { width: calc(100% - 50px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float2 { width: 120px; margin: 0 0 10px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 { width: calc(100% - 120px); padding: 3px 0 0 0; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  
  .lab-con-members-list-table .student-infor { width: calc(100% / 2 - 20px); padding: 10px; margin: 0 10px 20px 10px; background-color: rgba(231,238,246,0.5); box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .photo { clear: both; width: 100%; height: 50vw; background-color: #000; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .student-infor .photo img { width: auto; height: 100%;}
  .lab-con-members-list-table .student-infor .intro { width: 100%; padding: 10px; font-size: 1.2rem; line-height: 1.6rem; box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .intro .name { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2rem; text-align: center;}
  .lab-con-members-list-table .student-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .student-infor .intro .detail .title { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .student-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .student-infor .intro .detail .title-float1 { width: 50px; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 { width: calc(100% - 50px); margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}


  /************ section#page-admissions ************/

  section#page-admissions-sec1 { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 300% auto; background-position: center -50vw; position: relative; z-index: 1;}

  .page-admissions-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-admissions-sec1-con .content { clear: both; width: 100%; padding: 80px 0 60px 0;}
  .page-admissions-sec1-con .content .column-half { width: 500px; margin: 0 auto 40px auto; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-admissions-sec1-con .content .column-half img.title { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box { width: 100%; margin: -80px 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links { width: 90px; margin: 0 13px; position: relative;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links img { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a { width: 100%; height: 100%; padding: 90px 0 0 23px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: flex-start; position: absolute; top: 0; left: 0;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a span { color: #fff; font-size: 2em; line-height: 1em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a:hover span { color: #FFA200;}

  .page-admissions-sec2-con { clear: both; width: 100%; padding: 0 0 80px 0; box-sizing: border-box;}
  .page-admissions-sec2-con .content { clear: both; width: 100%; padding: 80px 0;}
  .page-admissions-sec2-con .content .stitle-box { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-admissions-sec2-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-admissions-sec2-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2em; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-admissions-sec2-con .content .content-text { clear: both; width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  .page-admissions-sec2-con .content .content-text a { color: #3391FD; text-decoration: none;}
  .page-admissions-sec2-con .content .content-text a:hover { color: #103C82;}
  
  ul.chinese-num { width: 100%; padding: 0 0 0 60px; margin: 0; box-sizing: border-box; list-style-type:cjk-ideographic; display: block;}
  ul.chinese-num li { width: 100%; padding: 0; margin: 0;}


  /************ section#page-scholarship ************/

  section#page-scholarship-sec1 { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: no-repeat; background-size: 300% auto; background-position: center -50vw; position: relative; z-index: 1;}

  .page-scholarship-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-scholarship-sec1-con .content { clear: both; width: 100%; padding: 80px 0 0 0;}
  .page-scholarship-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-scholarship-sec1-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-scholarship-sec1-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2em; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-scholarship-sec1-con .content .infor-box { width: 100%; padding: 25px 0 0 50px; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}
  .page-scholarship-sec1-con .content .infor-box button.linkto { clear: both; margin: 20px 0 0 0; padding: 3px 30px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 14px; background-color: #00C8FF; cursor: pointer;}
  .page-scholarship-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-scholarship-sec1-con .content img.pic { clear: both; width: 85%; height: auto; margin: 60px auto 0 auto;}


  /************ section#page-research ************/

  section#page-research-sec1 { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 140% auto; background-position: center top; position: relative; z-index: 1;}

  .page-research-sec1-con { clear: both; width: 100%; padding: 80px 0 60px 0; box-sizing: border-box;}
  .page-research-sec1-con .research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-research-sec1-con .research-list-table .column-full { width: calc(100% / 3 - 10px); margin: 0 5px 20px 5px;}
  .page-research-sec1-con .research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .page-research-sec1-con .research-list-table .column-full a:hover { background-color: rgba(255,255,255,0.4);}
  .page-research-sec1-con .research-list-table .column-full .column-1 { width: 100%; height: 16vw; overflow: hidden;}
  .page-research-sec1-con .research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .page-research-sec1-con .research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .page-research-sec1-con .research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .page-research-sec1-con .research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}

  .research-plan-sort-icon { display: none;}

  ul.research-plan-sort-nav { clear: both; width: 100%; padding: 0; margin: 0 0 40px 0; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  ul.research-plan-sort-nav li { width: 140px; padding: 0; margin: 0 10px 20px 10px;}
  ul.research-plan-sort-nav li a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; text-decoration: none; border-radius: 8px; background-color: #1A3F5B; display: block;}
  ul.research-plan-sort-nav li a:hover { background-color: #103C82;}
  ul.research-plan-sort-nav li a.sel { background-color: #80735A;}


  .hp-research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-research-list-table .column-full { width: calc(100% / 3 - 10px); margin: 0 5px 20px 5px;}
  .hp-research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .hp-research-list-table .column-full a:hover { background-color: rgba(255,255,255,0.4);}
  .hp-research-list-table .column-full .column-1 { width: 100%; height: 16vw; overflow: hidden;}
  .hp-research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .hp-research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .hp-research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .hp-research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}


  /************ section#page-research-con ************/

  section#page-research-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-research-con-sec1-con { clear: both; width: 100%; padding: 40px 0 60px 0; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-research-con-sec1-con .content { width: 100%; padding: 40px; font-size: 1.2rem; line-height: 1.8em; text-align: justify; box-sizing: border-box;}
  .page-research-con-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-research-con-sec1-con .content .stitle-box img.icon { width: 130px; height: auto;}
  .page-research-con-sec1-con .content .stitle-box span.title { padding: 11px 20px 11px 10px; margin: 0 0 0 -18px; color: #000; font-size: 2rem; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-research-con-sec1-con .content .infor-box { width: 100%; padding: 25px 40px 0 40px; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box img.pic { clear: both; width: 90%; height: auto; margin: 30px auto 0 auto;}
  .page-research-con-sec1-con .content .infor-box .pic-text { clear: both; width: 90%; padding: 20px 0 30px 0; margin: 0 auto; font-size: 0.8rem; line-height: 1.2em; text-align: center;}


  /************ section#page-course-plan ************/

  section#page-course-plan-sec1 { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title3 { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center;}
  .page-sub-title3 span.cn { font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title3 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title3 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-course-plan-sec1-con { clear: both; width: 100%; padding: 40px 0 40px 0; box-sizing: border-box; position: relative;}
  .page-course-plan-sec1-con .content { clear: both; width: 100%; padding: 40px 40px 0 40px; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}
  .page-course-plan-sec1-con .content img.course-pc { width: 100%; height: auto; margin: 0 auto 40px auto;}
  .page-course-plan-sec1-con .content img.course-mo { display: none;}
  .page-course-plan-sec1-con .content img.intro-course-pc { width: 90%; height: auto; margin: 0 auto;}
  .page-course-plan-sec1-con .content img.intro-course-mo { display: none;}
  .page-course-plan-sec1-con .content img.pic { clear: both; width: 500px; height: auto; margin: 40px 0 0 0;}
  
  .page-course-plan-sec1-con .blue-block-bg { width: 100%; height: 70px; background-color: #3A5BA0; display: block; position: absolute; bottom: 110px; left: 0; z-index: 1;}

  .page-course-plan-sec1-con .content .text-content { clear: both; width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}
  .page-course-plan-sec1-con .content .text-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg { width: 100%; padding: 0; margin: 20px 0; list-style-type: none; display: block;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li { width: 100%; padding: 15px 20px; margin: 0 0 10px 0; box-sizing: border-box; font-size: 1.2rem;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(1) { background-color: rgba(4,144,200,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(2) { background-color: rgba(89,199,243,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(3) { background-color: rgba(219,226,240,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(4) { background-color: rgba(191,218,167,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(5) { background-color: rgba(56,132,199,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(6) { background-color: rgba(226,168,78,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(7) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(8) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}
  .page-course-plan-sec1-con .content .text-content .title { width: 100%; margin: 0 0 20px 0; font-size: 2rem; font-weight: 600; line-height: 1.2em;}
  .page-course-plan-sec1-con .content .text-content ul.dot li { padding: 0; margin: 0;}

  img.page-course-plan-list { clear: both; width: 100%; margin: 40px 0 0 0;}

  .page-feature-sec2-title-1 { width: 100%; margin: 30px 0 60px 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-feature-sec2-title-1 .line-lf { width: calc(50% - 100px); padding: 30px 0 0 0; display: flex; justify-content: flex-end; overflow: hidden;}
  .page-feature-sec2-title-1 .line-lf img { width: auto; height: 56px}
  .page-feature-sec2-title-1 .line-rt { width: calc(50% - 100px); margin: -30px 0 0 0; overflow: hidden;}
  .page-feature-sec2-title-1 .line-rt img { width: auto; height: 59px;}
  .page-feature-sec2-title-1 .title { width: 200px; color: #2B6490; font-size: 3em; font-weight: 600; line-height: 1em; text-align: center;}

  .page-feature-sec2-content { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-feature-sec2-content .column-lf { width: 100%; padding: 0 40px; margin: 0 0 30px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-lf .title-lf { width: 520px; padding: 5px 0; margin: 0 auto 30px auto; color: #fff; font-size: 1.8em; line-height: 1.2em; text-align: center; border-radius: 20px; background-color: #0084B4;}
  .page-feature-sec2-content .column-lf img.con-list-1 { clear: both; max-width: 100%; width: 718px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .column-rt { width: 100%; padding: 0 40px; margin: 0 0 90px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-rt .title-rt { width: 590px; padding: 5px 0; margin: 90px auto 35px auto; color: #fff; font-size: 1.8em; line-height: 1.2em; text-align: center; border-radius: 40px; background-color: #1D2088;}
  .page-feature-sec2-content .column-rt img.con-list-2 { clear: both; max-width: 100%; width: 735px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .banner { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}
  .page-feature-sec2-content .banner img { width: 100%; height: auto;}


  /************ section#page-course-online ************/

  section#page-course-online-sec1 { clear: both; width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-course-online-sec1-con { clear: both; width: 100%; padding: 50px 0 60px 0;}
  .page-course-online-sec1-con .content { width: 100%; padding: 30px 40px; background-image: url("../images/page_course_onling_bg.png"); background-repeat: repeat-y; background-size: 150% auto; background-position: left top; box-sizing: border-box;}
  
  .page-course-online-sec1-con .content .course-title { clear: both; width: 100%; padding: 30px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .page-course-online-sec1-con .content .course-title:first-child { padding: 0 0 30px 0;}
  
  .course-online-list-table { clear: both; width: 100%; background-color: rgba(231,238,246,0.5);}
  .course-online-list-table .caption-full { width: 100%; color: #1A3F5B; font-size: 1.4rem; font-weight: 300; line-height: 1em; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .course-online-list-table .caption-full .caption-1 { width: 25%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-2 { width: 30%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-3 { width: 30%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-4 { width: 15%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full { width: 100%; color: #1A3F5B; font-size: 1rem; line-height: 1.4em; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .course-online-list-table .column-full:nth-child(odd) { background-color: #fff;}
  .course-online-list-table .column-full .column-1 { width: 25%; padding: 20px; font-weight: 500; box-sizing: border-box;}
  .course-online-list-table .column-full .column-2 { width: 30%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-3 { width: 30%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 { width: 15%; padding: 20px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 a { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; background-color: #356588; display: block;}
  .course-online-list-table .column-full .column-5 { width: 100%; padding: 20px; font-size: 0.9rem; line-height: 1.6em; border-top: 1px #ccc dashed; box-sizing: border-box; word-break: break-all;}
  .course-online-list-table .column-full .column-5 a { color: #FFA200; text-decoration: none;}


  /************ section#page-download ************/

  section#page-download-sec1 { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 300% auto; background-position: center -50vw; position: relative; z-index: 1;}

  .page-download-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-download-sec1-con .content { clear: both; width: 100%; padding: 40px 0;}
  .page-download-sec1-con .content .stitle-box { width: 296px; margin: 0 auto; position: relative;}
  .page-download-sec1-con .content .stitle-box img.bg { width: 100%; height: auto;}
  .page-download-sec1-con .content .stitle-box span { color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1em; position: absolute; top: 6px; left: 100px;}
  .page-download-sec1-con .content ul.download-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-download-sec1-con .content ul.download-list li { width: 100%; padding: 0; margin: 50px auto;}
  .page-download-sec1-con .content ul.download-list li a { width: 86vw; height: 7vw; padding: 0.8vw 0 0 10vw; color: #fff; font-size: 2.4vw; font-weight: 500; line-height: 1.2em; text-decoration: none; background-image: url("../images/page_download_list_bg.png"); background-repeat: no-repeat; background-size: 86vw auto; box-sizing: border-box; display: block;}
  .page-download-sec1-con .content ul.download-list li a:hover { color: #FF9200;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list { width: 100%; padding: 3vw 3vw 0 12vw; margin: 0; list-style: disc; display: block; box-sizing: border-box;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li { width: 100%; padding: 0; margin: 0; font-size: 2vw; line-height: 4vw;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a { color: #414141; text-decoration: none;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a:hover { border-bottom: 1px #414141 dashed;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sitemap-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box; position: relative;}
  .page-sitemap-con .content { clear: both; width: 100%; padding: 90px 40px 80px 40px; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}

  ul.sitemap-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul.sitemap-list li { padding: 0; margin: 0 10px 40px 10px;}
  ul.sitemap-list li a { text-decoration: none;}
  ul.sitemap-list li span.nav { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1em; background-color: #265384;}
  ul.sitemap-list li a:hover span.nav { color: #FF9200;}
  ul.sitemap-list li ul.popup { padding: 0; margin: 20px 0 0 0; list-style: none; display: block;}
  ul.sitemap-list li ul.popup li { padding: 0; margin: 0;}
  ul.sitemap-list li ul.popup li a { color: #265384; font-size: 1.2rem; font-weight: 500; line-height: 2em; text-decoration: none;}
  ul.sitemap-list li ul.popup li a:hover { border-bottom: 1px #265384 solid;}


  /************ footer ************/

  footer { clear: both; width: 100%; border-bottom: 20px #265384 solid;}

  .footer-nav { width: 100%; padding: 20px 40px; box-sizing: border-box; background-color: #1D253E;}
  .footer-nav ul.nav-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .footer-nav ul.nav-list li { padding: 0; margin: 0 20px 20px 20px; color: #FFA200; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .footer-nav ul.nav-list li a { color: #FFA200; text-decoration: none;}
  .footer-nav ul.nav-list li a:hover { border-bottom: 2px #FFA200 solid;}
  .footer-nav ul.nav-list li ul.nav-list-pop { clear: both; padding: 0 0 0 5px; margin: 0; list-style: none; display: block;}
  .footer-nav ul.nav-list li ul.nav-list-pop li { padding: 0; margin: 10px 0; font-size: 1rem; font-weight: normal; line-height: 1.2em;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a { color: #fff; text-decoration: none;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a:hover { border-bottom: 1px #fff solid;}

  .footer-infor { clear: both; width: 100%; padding: 20px 40px; box-sizing: border-box; background-color: #E6E6E6;}
  .footer-infor .qrcode-box { width: 170px; margin: 0 auto 30px auto;}
  .footer-infor .qrcode-box img { width: 100%; height: auto;}
  .footer-infor .address-nav { width: 700px; margin: 0 auto; position: relative;}
  .footer-infor .address-nav .address-mo { display: none;}
  .footer-infor .address-nav .address { width: 100%; font-size: 1.1rem; font-weight: 500; line-height: 1.8em; text-align: center;}
  .footer-infor .address-nav .address a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
    
  .footer-social-icon { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .footer-social-icon img { width: 28px; height: auto; margin: 0 3px;}


}

@media screen and (max-width: 767px) {

  #gotop-bt { width: 40px; height: 40px; border-radius: 100%; background-color: #1D253E; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 50px; right: 20px; cursor: pointer; z-index: 10000;}
  #gotop-bt span.icon { color: #fff; font-size: 1.4em;}


  /************ header + banner + nav ************/

  header { width: 100%;}

  .header-top-logo { width: 100%; padding: 10px 0 0 0; background-color: #000;}
  .header-top-logo img { width: 200px; height: auto; margin: 0 auto;}

  .header-top-bar { width: 100%; padding: 7px 20px; box-sizing: border-box; background-color: #000; display: flex; justify-content: space-between; align-items: center; position: relative;}
  .header-top-bar .top-nav-mo-icon { width: 40px; color: #FF9200; font-size: 1.4em; line-height: 1em; text-align: center; cursor: pointer;}
  .header-top-bar ul.top-nav { display: none;}
  .header-top-bar ul.top-nav-mo { width: 300px; padding: 40px; margin: 0; box-sizing: border-box; color: #FF9200; font-size: 1.1em; line-height: 1em; background-color: #000; list-style: none; display: none; position: absolute; top: 40px; left: -300px; z-index: 99999;}
  .header-top-bar ul.top-nav-mo li { padding: 20px; margin: 0; border-bottom: 1px #FF9200 solid;}
  .header-top-bar ul.top-nav-mo li:last-child { border-bottom: 0;}
  .header-top-bar ul.top-nav-mo li a { color: #FF9200; text-decoration: none;}
  .header-top-bar .top-search { padding: 2px 0; margin: 0 20px; color: #151C51; background-color: #fff;}
  .header-top-bar .top-search form { display: flex; justify-content: flex-start; align-items: center;}
  .header-top-bar .top-search input[type=search] { width: 100px; padding: 3px 5px; border: 0; color: #151C51; background-color: #fff; box-sizing: border-box;}
  .header-top-bar .top-search input[type=button] { width: 30px; height: 22px; color: #151C51; background-image: url("../images/header_top_search_icon.png"); background-repeat: no-repeat; background-size: 22px 22px; background-position: center top; border: 0; background-color: #fff; cursor: pointer;}
  .header-top-bar .top-social { display: flex; justify-content: center; align-items: center;}
  .header-top-bar .top-social img.icon { width: 26px; height: auto; margin: 0 3px;}

  .header-bt-bar { clear: both; width: 100%; padding: 20px 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-bt-bar .ntcu-logo { width: 250px;}
  .header-bt-bar .ntcu-logo img { width: 250px; height: auto;}

  nav#header-nav-pc { display: none;}

  nav#header-nav-mo { width: calc(100% - 250px);}
  nav#header-nav-mo .nav-icon-open { width: 50px; color: #265384; font-size: 2.4em; text-align: center; float: right;}
  nav#header-nav-mo ul#nav-list { clear: both; width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: #265384; list-style: none; display: none; position: absolute; top: 178px; left: 0; z-index: 99999;}
  nav#header-nav-mo ul#nav-list li { padding: 0; margin: 0; text-align: center;}
  nav#header-nav-mo ul#nav-list li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.4em; font-weight: 600; line-height: 1em; text-decoration: none; display: block;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup { width: 100%; padding: 10px; margin: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.2); list-style: none; display: none;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.2) solid;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup li:last-child { border-bottom: 0;}
  nav#header-nav-mo ul#nav-list li ul#nav-popup li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.4rem; font-weight: 300; line-height: 1.2em; text-align: center; text-decoration: none; display: block;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%;}

  img.hp-banner { width: 96%; margin: 0 2%; height: auto;}


  /************ secetion #hp-sec-1 ************/

  section#hp-sec-1 { clear: both; width: 100%; padding: 50px 0 0 0;}

  .page-hp-sec-1-con { width: 100%; position: relative;}
  .page-hp-sec-1-con .content { width: 100%; padding: 30px 20px 75px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative;}
  .page-hp-sec-1-con .content .sub-title { margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-hp-sec-1-con .content .sub-title span.cn { width: 100%; padding: 0 0 10px 0; font-size: 2.4em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .sub-title img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-hp-sec-1-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1em; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box { width: 100%; margin: 0 0 15px 0;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box:hover { -moz-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); -webkit-box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3); box-shadow:4px 4px 8px 4px rgba(20%,20%,40%,0.3);}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a { width: 100%; padding: 35px 40px 0 40px; text-decoration: none; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: block;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.line-icon { width: 45px; height: auto;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.en { color: #808080; font-size: 0.9rem; font-weight: 300; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.cn { color: #000; font-size: 1.8rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a span.intro { color: #3A5BA0; font-size: 1.2rem; font-weight: 500; line-height: 1.1em;}
  .page-hp-sec-1-con .content .bright-spot-list .spot-box a img.arrow-icon { width: 25px; height: auto; float: right;}
  .page-hp-sec-1-con .blue-block { width: calc(20px + 20vw); height: 400px; background-color: #1D253E; display: block; position: absolute; top: 180px; left: 0; z-index: 1;}

  .page-hp-sec-1-con .content .pro-technology-list { display: none;}
  .page-hp-sec-1-con .content .pro-technology-list-mo { width: 90%; margin: 0 auto; position: relative; z-index: 2;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box { width: 90%; margin: 0 auto 15px auto; background-color: #fff; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box a { text-decoration: none;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box.style1 { border: 5px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box.style2 { border: 5px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box.style3 { border: 5px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box.style4 { border: 5px #FF9200 solid;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title { width: 100%; padding: 30px 15px 20px 15px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title.style1 { color: #fff; background-color: #1A3F5B;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title.style2 { color: #000; background-color: #80735A;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title.style3 { color: #fff; background-color: #103C82;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title.style4 { color: #000; background-color: #FF9200;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title span.en { opacity: 0.5; padding: 0 0 15px 0; font-size: 1.2em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .top-title span.cn { font-size: 2.2rem; line-height: 1em;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .infor { width: 100%; padding: 15px 20px; box-sizing: border-box;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .infor .text { width: 100%; padding: 15px 0; color: #3A5BA0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .infor .text.style1 { border-bottom: 2px #1A3F5B solid;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .infor .text.style2 { border-bottom: 2px #80735A solid;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .infor .text.style3 { border-bottom: 2px #103C82 solid;}
  .page-hp-sec-1-con .content .pro-technology-list-mo .technology-box .infor .text.style4 { border-bottom: 2px #FF9200 solid;}


  .more-pro-tech-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .more-pro-tech-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-pro-tech-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-2 ************/

  section#hp-sec-2 { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.hp-topnews-banner { width: 140%; height: auto; margin: 0 0 0 -20%;}

  .page-hp-sec-2-con { width: 100%;}
  .page-hp-sec-2-con .content { width: 100%; padding: 40px 20px 70px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-hp-sec-2-con .content .sub-title { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-hp-sec-2-con .content .sub-title span.cn { width: 100%; padding: 0 0 10px 0; font-size: 2.4em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-2-con .content .sub-title img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-hp-sec-2-con .content .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1em; line-height: 1.1em;}
  .page-hp-sec-2-con .content .top-news-list { clear: both; width: 100%;}
  .page-hp-sec-2-con .content .top-news-list .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-hp-sec-2-con .content .top-news-list .news-list .sort { width: 160px; padding: 12px; color: #fff; font-size: 1rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .date { width: calc(100% - 160px); padding: 12px; font-size: 1rem; font-weight: 500; line-height: 1em; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title { clear: both; width: 100%; padding: 10px; box-sizing: border-box;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a { color: #414141; font-size: 1.1rem; line-height: 1.3em; text-decoration: none;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a:hover { color: #043B6F;}
  .page-hp-sec-2-con .content .top-news-list .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}

  .more-news-bt { clear: both; width: 150px; margin: 0 auto;}
  .more-news-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .more-news-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ secetion #hp-sec-3 ************/

  section#hp-sec-3 { clear: both; width: 100%; padding: 30px 0 100px 0; background-image: url("../images/hp_sec3_bg.png"); background-repeat: no-repeat; background-size: 750px auto; background-position: right bottom; position: relative;}

  .hp-sec3-blue-block { width: 100%; height: 300px; background-color: #1D253E; display: block; position: absolute; top: 30px; left: 0; z-index: 1;}

  .page-hp-sec-3-con { width: 100%; padding: 40px 20px 0 20px; box-sizing: border-box; position: relative; z-index: 2;}
  .page-hp-sec-3-con .sub-title { width: 100%; margin: 0 0 50px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-hp-sec-3-con .sub-title span.cn { width: 100%; padding: 0 0 10px 0; color: #fff; font-size: 2.4em; font-weight: 300; line-height: 1em;}
  .page-hp-sec-3-con .sub-title img { width: 140px; height: auto; margin: 0 10px 0 0;}
  .page-hp-sec-3-con .sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1em; line-height: 1.1em;}
  
  .latest-articles-list { display: none;}
  .latest-articles-list-mo { clear: both; width: 90%; margin: 0 auto 70px auto;}
  .latest-articles-list-mo .article-box { width: 100%; margin: 0 0 10px 0; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .latest-articles-list-mo .article-box a { width: 100%; text-decoration: none; display: block;}
  .latest-articles-list-mo .article-box a .pic { width: 100%; height: 60vw; overflow: hidden;}
  .latest-articles-list-mo .article-box a .pic img { width: 100%; height: auto;}
  .latest-articles-list-mo .article-box a .date { width: 100%; padding: 0 30px 10px 30px; box-sizing: border-box;}
  .latest-articles-list-mo .article-box a .date span { color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; float: left;}
  .latest-articles-list-mo .article-box a .date .sort { width: 120px; padding: 6px 0; color: #FFA200; font-size: 1.1em; line-height: 1em; text-align: center; border-radius: 14px; background-color: #FFE5B4; float: right;}
  .latest-articles-list-mo .article-box a .teachers { clear: both; width: 100%; padding: 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list-mo .article-box a .name { clear: both; width: 100%; padding: 0 5% 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .latest-articles-list-mo .article-box a img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .latest-articles-list-mo .article-box a .title { clear: both; width: 100%; height: 100px; padding: 20px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .latest-articles-list-mo .article-box a .title p { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .latest-articles-list-mo .article-box a .excerpt { clear: both; width: 100%; padding: 0 5% 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: right; box-sizing: border-box;}
  .latest-articles-list-mo .article-box a .intro { clear: both; width: 100%; padding: 0 5% 10px 5%; color: #808080; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .hp-sec3-more-bt { clear: both; width: 100%; margin: 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: center; align-items: center;}
  .hp-sec3-more-bt img.arrow-lf { width: 60px; height: auto;}
  .hp-sec3-more-bt img.arrow-rt { width: 60px; height: auto;}
  .hp-sec3-more-bt .more-bt { width: 100px;}
  .hp-sec3-more-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .hp-sec3-more-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ page banner ************/

  .page-banner-box { clear: both; width: 100%; overflow: hidden; position: relative;}
  .page-banner-box img { width: 240%; height: auto; margin: 0 0 0 -30%;}
  .page-banner-box .text { width: 100%; padding: 0 20px; color: #fff; font-size: 2rem; font-weight: 300; line-height: 1.4em; position: absolute; bottom: 20px; left: 0; box-sizing: border-box;}


  /************ section#page-about1 ************/

  section#page-about1-sec1 { clear: both; width: 100%; background-image: url("../images/page_about1_sec1_bg.png"); background-repeat: no-repeat; background-size: 815px auto; background-position: left bottom; position: relative; z-index: 1;}

  .bread-crumbs { width: calc(100% - 20px); position: absolute; top: 0; left: 0; z-index: 2;}
  .bread-crumbs img.bg { width: 280px; height: auto;}
  .bread-crumbs span.path { color: #767676; font-size: 0.9rem; line-height: 1.2em; position: absolute; top: 10px; left: 120px;}
  .bread-crumbs span.path a { color: #767676; text-decoration: none;}
  .bread-crumbs span.path a:hover { border-bottom: 1px #767676 dashed;}

  .page-about1-sec1-con { clear: both; width: 100%; padding: 60px 20px 80px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about1-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}

  .page-sub-title { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-sub-title span.cn { width: 100%; margin: 0 0 10px 0; font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}


  section#page-about1-sec2 { clear: both; width: 100%; background-image: url("../images/page_about1_sec2_bg.png"); background-repeat: no-repeat; background-size: 810px auto; background-position: right bottom; position: relative; z-index: 2;}

  .page-about1-sec2-block { clear: both; width: 100%; overflow: hidden;}
  .page-about1-sec2-block img.banner { width: 140%; height: auto; margin: 0 0 0 -30%;}

  .page-about1-sec2-con { clear: both; width: 100%; position: relative; z-index: 1;}
  .page-about1-sec2-con .content { clear: both; width: 100%; padding: 30px 20px 40px 20px; box-sizing: border-box; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph; background-color: rgba(231,238,246,0.5);}
  .page-about1-sec2-con .content img.pic1 { width: 100%; height: auto; margin: 30px 0 0 0;}

  .page-about1-sec2-con .content img.pic2 { width: 100%; height: auto; margin: 0 0 20px 0; float: right;}
  .page-about1-sec1-con .content img.pic3 { max-width: 100%; height: auto; margin: 0 0 40px 0;}


  /************ section#page-about2 ************/

  section#page-about2-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: center center; position: relative; z-index: 1;}

  .page-about2-sec1-con { clear: both; width: 100%; padding: 60px 20px 0 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about2-sec1-con .content { clear: both; width: 100%; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph; border-left: 4px #FFA200 solid; box-sizing: border-box;}
  .page-about2-sec1-con .content .stitle-box { clear: both; width: 100%; min-height: 64px; background-image: url("../images/page_about2_stitle_bg.png"); background-repeat: no-repeat; background-size: 349px auto; background-position: left top;}
  .page-about2-sec1-con .content .stitle-box .title { clear: both; width: 100%; padding: 75px 0 0 0;}
  .page-about2-sec1-con .content .stitle-box .title span { padding: 9px 20px 9px 0; color: #fff; font-size: 1.4em; font-weight: 600; line-height: 1.6em; background-color: #FFA200;}
  .page-about2-sec1-con .content .text-con { clear: both; width: 100%; padding: 30px 20px 60px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; line-height: 1.6em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-about2-sec1-con .content .text-con .big-text .icon { width: 35px;}
  .page-about2-sec1-con .content .text-con .big-text .list { width: calc(100% - 35px);}
  .page-about2-sec1-con .content .text-con .text-1 { width: 100%;}
  .page-about2-sec1-con .content .text-con .text-1 .small-text { width: 100%; font-size: 1.1rem; line-height: 2em;}
  .page-about2-sec1-con .content .text-con .text-1 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-1 { clear: both; width: 100%; margin: 30px 0 0 0;}
  .page-about2-sec1-con .content .text-con .pic-1 img { width: 334px; max-width: 100%; height: auto; margin: 0 auto;}
  .page-about2-sec1-con .content .text-con .pic-1 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-2 { width: 100%;}
  .page-about2-sec1-con .content .text-con .text-2 .small-text { width: 100%; font-size: 1.1rem; line-height: 2em;}
  .page-about2-sec1-con .content .text-con .text-2 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-2 { clear: both; width: 100%; margin: 30px 0 0 0;}
  .page-about2-sec1-con .content .text-con .pic-2 img { width: 370px; max-width: 100%; height: auto; margin: 0 auto;}
  .page-about2-sec1-con .content .text-con .pic-2 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-3 { width: 100%;}
  .page-about2-sec1-con .content .text-con .text-3 .small-text { width: 100%; font-size: 1.1rem; line-height: 2em;}
  .page-about2-sec1-con .content .text-con .text-3 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-3 { clear: both; width: 100%; margin: 30px 0 0 0;}
  .page-about2-sec1-con .content .text-con .pic-3 img { width: 320px; max-width: 100%; height: auto; margin: 0 auto;}
  .page-about2-sec1-con .content .text-con .pic-3 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}
  .page-about2-sec1-con .content .text-con .text-5 { width: 100%;}
  .page-about2-sec1-con .content .text-con .text-5 .small-text { width: 100%; font-size: 1.1rem; line-height: 2em;}
  .page-about2-sec1-con .content .text-con .text-5 .author { width: 100%; font-size: 1rem; line-height: 2em; text-align: right;}
  .page-about2-sec1-con .content .text-con .pic-5 { clear: both; width: 100%; margin: 30px 0 0 0;}
  .page-about2-sec1-con .content .text-con .pic-5 img { width: 380px; max-width: 100%; height: auto; margin: 0 auto;}
  .page-about2-sec1-con .content .text-con .pic-5 .intro { width: 100%; margin: 10px 0 0 0; color: #767676; font-size: 0.8rem; line-height: 1.1em; text-align: center;}


  /************ section#page-about3 ************/

  section#page-about3-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: center top; position: relative; z-index: 1;}

  .page-about3-sec1-con { clear: both; width: 100%; padding: 60px 20px 30px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-about3-sec1-con .content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about3-sec1-con .content .alumni-news-box { width: 100%; margin: 0 0 10px 0; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a { width: 100%; text-decoration: none; display: block;}
  .page-about3-sec1-con .content .alumni-news-box a .pic { width: 100%;}
  .page-about3-sec1-con .content .alumni-news-box a .pic img { width: 100%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .date { width: 100%; padding: 10px 30px; color: #B3B3B3; font-size: 1rem; line-height: 1.7em; letter-spacing: 0.1em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a img.line { width: 90%; height: auto;}
  .page-about3-sec1-con .content .alumni-news-box a .title { width: 100%; padding: 10px 30px; color: #414141; font-size: 1.4rem; font-weight: 500; line-height: 1.2em; box-sizing: border-box;}
  .page-about3-sec1-con .content .alumni-news-box a .intro { width: 100%; padding: 0 30px 30px 30px; color: #414141; font-size: 1.1rem; line-height: 1.2em; box-sizing: border-box;}

  .page-content-video { clear: both; width: 100%; margin: 0 auto;}


  /************ section#page-signup ************/

  section#page-signup-sec1 { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title span.top-title { width: 100%; font-size: 2.2rem; font-weight: 300; line-height: 1.2em; text-align: center;}

  .page-signup-sec1-con { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-signup-sec1-con .content { clear: both; width: 100%;}
  .page-signup-sec1-con .content .signup-notice { width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  .page-signup-sec1-con .content .signup-notice .notice-title { width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .page-signup-sec1-con .content .signup-login { clear: both; width: 80%; margin: 60px auto 0 auto; text-align: center;}
  .page-signup-sec1-con .content .signup-login input[type=text] { width: 180px; padding: 5px 10px; color: #414141; font-size:1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; border-radius: 8px;}
  .page-signup-sec1-con .content .signup-login input[type=button] { width: 180px; padding: 5px 10px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .page-signup-sec1-con .content .signup-login input[type=button]:hover { background-color: #666;}

  .signup-sub-title { clear: both; width: 100%; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 1.4rem; font-weight: 500; background-color: #FF9200; display: block;}
  .signup-sub-title span.small { font-size: 1rem;}

  .signup-form-table { clear: both; width: 100%; font-size: 1.1rem;}
  .signup-form-table input[type=text].style1 { width: 200px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}
  .signup-form-table input[type=text].style2 { width: 100px; padding: 5px 10px; margin: 5px 10px; border: 1px #ccc solid; border-radius: 8px; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; box-sizing: border-box;}
  .signup-form-table span.column { width: 100%; display: block;}

  .signup-form-bt { clear: both; width: 100%; padding: 40px 0 0 0; text-align: center;}
  .signup-form-bt input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-form-bt input[type=button]:hover { background-color: #666;}


  #page-signup-show { clear: both; width: 100%;}
  #page-signup-show .signup-show-sub-title { width: 100%; padding: 30px 0; font-size: 1.4rem; text-align: center;}
  #page-signup-show .signup-show-sub-title span.small { font-size: 1rem;}

  .signup-signature { clear: both; width: 100%; margin: 60px 0; font-size: 1.1rem;}
  .signup-signature .column-lf { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .signup-signature .column-rt { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .signup-signature .column-lf span.underline, 
  .signup-signature .column-rt span.underline { width: 140px; border-bottom: 1px #414141 solid; display: block;}

  .signup-goback-print { clear: both; width: 100%; text-align: center;}
  .signup-goback-print input[type=button] { padding: 8px 30px; margin: 20px 5px 0 5px; color: #fff; font-size:1.1rem; text-align: center; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #444; border-radius: 8px; cursor: pointer;}
  .signup-goback-print input[type=button]:hover { background-color: #666;}


  /************ section#page-about4 ************/

  section#page-about4 { clear: both; width: 100%; background-image: url("../images/page_about4_bg.jpg"); background-repeat: no-repeat; background-size: 200% auto; background-position: center 100vw; position: relative; z-index: 1;}

  .page-about4-sec1 { clear: both; width: 100%; padding: 40px 0 80px 0; position: relative; z-index: 1;}  
  .page-about4-sec1 .group-top-pic { width: 100%;}

  .page-about4-sec2 { clear: both; width: 100%; padding: 40px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-about4-sec2 .group-title { clear: both; width: 100%; margin: -40px 0 0 0;}
  .page-about4-sec2 .group-title .title-box { width: 100%; padding: 40px 20px 50px 20px; color: #fff; font-size: 2rem; font-weight: 600; line-height: 1.2em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .title-box img.icon { width: 45px; height: auto; margin: 0 0 20px 0;}
  .page-about4-sec2 .group-title .title-box.style1 { background-color: #1A3F5B;}
  .page-about4-sec2 .group-title .title-box.style2 { background-color: #80735A;}
  .page-about4-sec2 .group-title .title-box.style3 { background-color: #103C82;}
  .page-about4-sec2 .group-title .title-box.style4 { background-color: #FF9200;}
  .page-about4-sec2 .group-title .infor-box { width: 100%; padding: 40px 20px; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}
  .page-about4-sec2 .group-title .infor-box.style1 { border-bottom: 3px #1A3F5B solid;}
  .page-about4-sec2 .group-title .infor-box.style2 { border-bottom: 3px #80735A solid;}
  .page-about4-sec2 .group-title .infor-box.style3 { border-bottom: 3px #103C82 solid;}
  .page-about4-sec2 .group-title .infor-box.style4 { border-bottom: 3px #FF9200 solid;}
  .page-about4-sec2 .group-title .infor-box span.title { font-size: 1.2rem; font-weight: 600;}
  .page-about4-sec2 .group-teachers { clear: both; width: 100%;}
  .page-about4-sec2 .group-teachers .teachers-list { width: 100%; padding: 40px 20px; box-sizing: border-box; background-color: rgba(226,240,217,0.5);}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-1 { clear: both; width: 170px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-1 { width: 170px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .sub-title-2 { clear: both; width: 315px; padding: 15px 0; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 1em; text-align: center; background-color: #767676; box-sizing: border-box;}
  .page-about4-sec2 .group-teachers .teachers-list img.icon-2 { width: 315px; height: auto; margin: 7px 0 0 0;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table { clear: both; width: 100%; padding: 20px 0 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box { width: calc(100% / 2 - 10px); margin: 0 5px 20px 5px;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box a { color: #414141; text-decoration: none;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic { width: 100%; height: 59vw; overflow: hidden; display: flex; justify-content: center;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .pic img { width: auto; height: 100%;}
  .page-about4-sec2 .group-teachers .teachers-list .teachers-table .teacher-box .name { width: 100%; padding: 10px 0; font-size: 1.1rem; line-height: 1em; text-align: center;}


  a.about4-spotlight {
    clear: both;
    width: 150px;
    height: 40px;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 20px;
    position: relative;
    transition: all .3s linear;
    text-decoration: none;
    overflow: hidden;
  }
  
  a.about4-spotlight > p{
    position: relative;
    z-index: 1;
  }
  a.about4-spotlight::before{
      content: "";
      width: 0%;
      height: 100%;
      display: block;
      background-color: #FF9200;
      position: absolute;
      top: 0;
      right: 0;
      transition: all .3s ease;
  }
  a.about4-spotlight:hover{
      color: #fff;
  }
  a.about4-spotlight:hover::before{
      width: 100%;
  }


  /************ section#page-news ************/

  section#page-news-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: left top; position: relative; z-index: 1;}

  .page-news-sec1-con { clear: both; width: 100%; padding: 30px 20px 80px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}
  .page-news-sec1-con .news-sort-all { width: 80%; padding: 30px 20px 0 20px; margin: 0 auto 40px auto; box-sizing: border-box;}
  .page-news-sec1-con .news-sort-all .sort-bt { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; background-color: #444; border-radius: 6px; cursor: pointer;}
  .page-news-sec1-con ul.news-sort-nav { width: 80%; padding: 0 20px 40px 20px; margin: 0 auto; box-sizing: border-box; list-style: none; display: none;}
  .page-news-sec1-con ul.news-sort-nav li { width: 100%; padding: 0; margin: 0 0 10px 0;}
  .page-news-sec1-con ul.news-sort-nav li a { width: 100%; padding: 8px 0; color: #fff; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; display: block;}
  
  .page-news-top-news-con { display: none;}
  .page-news-top-news-con-mo { width: 100%; }
  .page-news-top-news-con-mo a { width: 100%; text-decoration: none;}
  .page-news-top-news-con-mo .pic { width: 100%;}
  .page-news-top-news-con-mo .pic img { width: 100%; height: auto;}
  .page-news-top-news-con-mo .text-con { width: 100%; padding: 20px; box-sizing: border-box; background-color: #FFE5B4;}
  .page-news-top-news-con-mo .text-con .sort-date { width: 100%; border-bottom: 1px #B3B3B3 solid;}
  .page-news-top-news-con-mo .text-con .sort-date .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.6em; font-weight: 600; text-align: center;}
  .page-news-top-news-con-mo .text-con .sort-date .date { width: 100%; padding: 10px 30px; color: #1A3F5B; font-size: 1.4em; line-height: 1em; box-sizing: border-box;}
  .page-news-top-news-con-mo .text-con .title { width: 100%; padding: 20px 0; color: #414141; font-size: 1.4rem; font-weight: 600; line-height: 1.1em;}
  .page-news-top-news-con-mo .text-con .text { width: 100%; color: #414141; font-size: 1rem; line-height: 2.2em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;}
  
  .page-news-sec1-con .content { clear: both; width: 100%;}
  .page-news-sec1-con .content .news-list { width: 100%; margin: 20px 0; border-bottom: 1px #B3B3B3 solid;}
  .page-news-sec1-con .content .news-list .sort { width: 200px; padding: 12px; color: #fff; font-size: 1.2rem; font-weight: 600px; line-height: 1em; text-align: center; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .date { width: 100%; padding: 12px; font-size: 1.4rem; font-weight: 500; line-height: 1em; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title { width: 100%; padding: 10px; box-sizing: border-box;}
  .page-news-sec1-con .content .news-list .title a { color: #414141; font-size: 1.2rem; line-height: 1.3em; text-decoration: none;}
  .page-news-sec1-con .content .news-list .title a:hover { color: #043B6F;}
  .page-news-sec1-con .content .news-list .title a span.pin-to-top { padding: 0 10px; color: #fff; border-radius: 10px; background-color: #ff0000;}


  .page-numbers { clear: both; width: 100%; margin: 60px auto 0 auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-numbers img.arrow-lf { width: 40px; height: auto;}
  .page-numbers img.arrow-rt { width: 40px; height: auto;}
  .page-numbers ul.page-num { width: calc(100% - 120px); padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .page-numbers ul.page-num li { padding: 0; margin: 5px;}
  .page-numbers ul.page-num li a { width: 30px; height: 30px; color: #FFA200; font-size: 0.8rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 100%; background-color: #FFE5B4; display: flex; justify-content: center; align-items: center;}
  .page-numbers ul.page-num li a:hover { color: #FFE5B4; background-color: #FFA200;}
  .page-numbers ul.page-num li a.sel { color: #FFE5B4; background-color: #FFA200;}

  .page-numbers2 { clear: both; width: calc(100% - 40px); margin: 60px 20px 0 20px; box-sizing: border-box; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-numbers2 img.arrow-lf { width: 40px; height: auto;}
  .page-numbers2 img.arrow-rt { width: 40px; height: auto;}
  .page-numbers2 ul.page-num { width: calc(100% - 120px); padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .page-numbers2 ul.page-num li { padding: 0; margin: 5px;}
  .page-numbers2 ul.page-num li a { width: 30px; height: 30px; color: #FFA200; font-size: 0.8rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 100%; background-color: #FFE5B4; display: flex; justify-content: center; align-items: center;}
  .page-numbers2 ul.page-num li a:hover { color: #FFE5B4; background-color: #FFA200;}
  .page-numbers2 ul.page-num li a.sel { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-news-content ************/

  .page-news-con-sec1-con { clear: both; width: 100%; padding: 60px 20px 60px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5); position: relative; z-index: 1;}

  .page-news-con-top-title { display: none;}
  .page-news-con-top-title-mo { width: 100%; padding: 30px 0 0 0;}
  .page-news-con-top-title-mo .sort { width: 200px; padding: 5px 0; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center;}
  .page-news-con-top-title-mo .title { width: 100%; padding: 12px 20px; box-sizing: border-box; font-size: 1.2rem; font-weight: 600; line-height: 1.2em; background-color: #FFE5B4;}
  .page-news-con-top-title-mo .date-author { width: 100%; padding: 10px 0;}
  .page-news-con-top-title-mo .date-author span.date { padding: 0 20px 0 0; font-size: 1.4rem; font-weight: 500; line-height: 1em;}
  .page-news-con-top-title-mo .date-author span.author { font-size: 1rem;}

  .page-news-con-sec1-con .content { clear: both; width: 100%; padding: 40px 0 60px 0; font-size: 1.2rem; line-height: 1.8em; text-align: justify; box-sizing: border-box;}
  .page-news-con-sec1-con .content a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-news-con-sec1-con .content img { width: 100%; height: auto; margin: 0 auto 30px auto;}
  .page-news-con-sec1-con .content .pic-text { clear: both; width: 100%; margin: -20px auto 40px auto; font-size: 0.9rem; line-height: 1.1em; text-align: center;}
  .page-news-con-sec1-con .content .download-share { clear: both; width: 100%; padding: 30px 0 0 0;}
  .page-news-con-sec1-con .content .download-share .download { padding: 5px; box-sizing: border-box;}
  .page-news-con-sec1-con .content .download-share .download a { text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-con-sec1-con .content .download-share .download a img { width: 26px; height: auto; margin: 0 15px 0 0;}
  .page-news-con-sec1-con .content .download-share .download a span { padding: 5px 0 0 0; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-con-sec1-con .content .download-share .share img { width: 40px; height: auto;}

  .news-video-box { clear: both; width: 100%; margin: 30px auto;}

  table { width: 100%; font-size: 0.8rem; line-height: 1.2em; border: 1px #ccc solid;}


  /************ section#page-members ************/

  section#page-members-sec1 { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-members-sec1-con { clear: both; width: 100%; padding: 60px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-members-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-members-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .search-choice-box span input[type=search] { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}
  .page-members-sec1-con .members-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-sec1-con .members-list .members-box { width: 100%; margin: 0 0 20px 0; background-color: rgba(231,238,246,0.5);}
  .page-members-sec1-con .members-list .members-box .pic { width: 100%; height: 260px; background-color: #031F35; display: flex; justify-content: center; overflow: hidden;}
  .page-members-sec1-con .members-list .members-box .pic img { width: auto; height: 100%;}
  .page-members-sec1-con .members-list .members-box .name { width: 100%; padding: 10px 20px; box-sizing: border-box; text-align: center;}
  .page-members-sec1-con .members-list .members-box .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-sec1-con .members-list .members-box img.line-oran { clear: both; width: calc(100% - 60px); height: auto; margin: 0 auto;}
  .page-members-sec1-con .members-list .members-box .intro { clear: both; width: 100%; padding: 10px 20px; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box;}
  .page-members-sec1-con .members-list .members-box .intro .title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem;}
  .page-members-sec1-con .members-list .members-box .intro .caption { width: 100%; margin: 0 0 5px 0;}
  .page-members-sec1-con .members-list .members-box .intro .column { width: 100%; margin: 0 0 10px 0; /*word-break: break-all; overflow-wrap: break-word;*/ display: block;}
  .page-members-sec1-con .members-list .members-box .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}


  /************ section#page-members-con ************/

  section#page-members-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center 360px; position: relative; z-index: 1;}

  .page-sub-title2 { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-sub-title2 .cn { width: 100%; margin: 0 0 10px 0; font-size: 2.8em; font-weight: 300; line-height: 1em; text-align: center;}
  .page-sub-title2 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title2 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-members-con-sec1-con { clear: both; width: 100%; padding: 60px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-members-con-sec1-con .content-top { width: 100%;}
  .page-members-con-sec1-con .content-top .member-infor { width: 100%; padding: 0 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-members-con-sec1-con .content-top .member-infor .pic { width: 100%;}
  .page-members-con-sec1-con .content-top .member-infor .pic img { width: 100%; height: auto;}
  .page-members-con-sec1-con .content-top .member-infor .infor { width: 100%; padding: 20px 0;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name { width: 100%; padding: 10px 0; box-sizing: border-box;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.cn { color: #414141; font-size: 1.8rem; font-weight: 600; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor .name span.en { color: #414141; font-size: 1.2rem; font-weight: 300; line-height: 1.2em;}
  .page-members-con-sec1-con .content-top .member-infor .infor img.line { clear: both; max-width: 100%; width: 450px; height: auto;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro { clear: both; width: 100%; padding: 10px 0; color: #414141; font-size: 1rem; line-height: 1.2em; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .title { width: 100%; margin: 0 0 30px 0; font-size: 1.4rem;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .caption { width: 90px; margin: 0 10px 15px 0; text-align: right;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column { width: calc(100% - 100px); margin: 0 0 10px 0; word-break: break-all; overflow-wrap: break-word; display: block;}
  .page-members-con-sec1-con .content-top .member-infor .infor .intro .column a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .member-detail-tab { clear: both; width: 100%; padding: 20px 0; background-color: #1D253E;}
  .page-members-con-sec1-con .member-detail-tab img.line { width: 92%; height: auto; margin: 0 auto;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li { padding: 0; margin: 0 10px 10px 10px;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a { padding: 3px 20px; color: #fff; font-size: 1.4em; line-height: 1em; text-align: center; text-decoration: none; border: 1px #3391FD solid;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a:hover { background-color: #3391FD;}
  .page-members-con-sec1-con .member-detail-tab ul.detail-tab li a.sel { background-color: #3391FD;}

  .page-members-con-sec1-con .content-bottom { width: 100%;}
  .page-members-con-sec1-con .content-bottom ul.detail-content { width: 100%; padding: 40px 20px; margin: 0; box-sizing: border-box; list-style: none; background-color: rgba(231,238,246,0.5); display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li { width: 100%; padding: 0; margin: 0 0 20px 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar { width: 100%; border-bottom: 1px #FFA200 solid; display: flex; justify-content: space-between; align-items: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-up { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: none; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-down { display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .icon-down { width: 36px; height: 36px; color: #fff; font-size: 1.1rem; border-radius: 100%; background-color: #FFA200; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .stitle-bar .icon-up { display: flex;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle { width: 275px; padding: 10px 0 10px 10px; color: #fff; font-size: 1.6em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle img { width: 120px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 { width: 275px; padding: 10px 0 10px 10px; color: #fff; font-size: 1.6em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-2 img { width: 120px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 { width: 275px; padding: 10px 0 10px 10px; color: #fff; font-size: 1.6em; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .stitle-bar .stitle-3 img { width: 120px; height: auto; margin: 0 10px 0 0;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table { clear: both; width: 100%; padding: 20px 0; font-size: 1.2rem; line-height: 1.8em; text-align: justify; display: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li:nth-child(-n+3) .detail-list-table { display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table { clear: both; width: 100%; padding: 20px 10px 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .sub-title { width: 100%; margin: 0 0 20px 0; font-size: 1.4rem; font-weight: 600; text-align: center;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor { width: calc(100% / 3 - 20px); margin: 0 10px 20px 10px; padding: 5px; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic { width: 30%;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .pic img { width: 100%; height: auto;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro { width: 70%; font-size: 0.9rem; line-height: 1.2em; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul { width: 100%; padding: 0 0 0 24px; margin: 0; list-style: disc; box-sizing: border-box; display: block;}
  .page-members-con-sec1-con .content-bottom ul.detail-content li .detail-list-table .member-books-list-table .book-infor .intro ul li { padding: 0; margin: 0 0 5px 0; word-wrap: break-word; word-break: break-all;}


  .page-members-back-bt { clear: both; width: 94%; margin: 40px auto; background-image: url("../images/hp_sec3_more_line.png"); background-repeat: repeat-x; background-position: center center; display: flex; justify-content: space-between; align-items: center;}
  .page-members-back-bt img.arrow-lf { width: 40px; height: auto;}
  .page-members-back-bt img.arrow-rt { width: 40px; height: auto;}
  .page-members-back-bt .more-bt { width: 100px;}
  .page-members-back-bt .more-bt a { width: 100%; padding: 10px 0; color: #FFA200; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #FFE5B4; display: block;}
  .page-members-back-bt .more-bt a:hover { color: #FFE5B4; background-color: #FFA200;}


  /************ section#page-lab ************/

  section#page-lab-sec1 { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: left top; position: relative; z-index: 1;}

  .page-lab-sec1-con { clear: both; width: 100%; padding: 60px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-sec1-con .search-choice-box { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .page-lab-sec1-con .search-choice-box span { padding: 0 0 10px 0; font-size: 1.1rem; line-height: 1em;}
  .page-lab-sec1-con .search-choice-box span select { width: 140px; padding: 4px 6px; margin: 0 20px 0 10px; color: #414141; font-size:1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; box-sizing: border-box; border: 1px #5F5E5E solid; background-color: #fff;}

  .page-lab-list-table { clear: both; width: 90%; margin: 0 auto;}
  .page-lab-list-table .lab-list-box { width: 100%; padding: 10px; margin: 0 0 30px 0; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-lab-list-table .lab-list-box:active { -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); -webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2); box-shadow:4px 4px 3px rgba(20%,20%,40%,0.2);}
  .page-lab-list-table .lab-list-box .photo { width: 100%; height: 40vw; overflow: hidden;}
  .page-lab-list-table .lab-list-box .photo img { width: 100%; height: auto;}
  .page-lab-list-table .lab-list-box .photo a { width: 100%; height: 100%; display: block;}
  .page-lab-list-table .lab-list-box .intro { width: 100%; padding: 10px 0 0 0; font-size: 0.9rem; line-height: 2em;}
  .page-lab-list-table .lab-list-box .intro .title { width: 100%; padding: 0 0 10px 0; font-size: 1.1rem; font-weight: 600; line-height: 1.2em;}
  .page-lab-list-table .lab-list-box .intro a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  .lab-articles-list { clear: both; width: 90%; margin: 0 auto 70px auto;}
  .lab-articles-list .article-box { width: 100%; margin: 0 0 10px 0; border: 1px #767676 solid; background-color: #fff; box-sizing: border-box;}
  .lab-articles-list .article-box .pic { width: 100%; height: 45vw; overflow: hidden;}
  .lab-articles-list .article-box .pic img { width: 100%; height: auto;}
  .lab-articles-list .article-box .teachers { clear: both; width: 100%; padding: 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box .name { clear: both; width: 100%; padding: 10px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; box-sizing: border-box;}
  .lab-articles-list .article-box img.line { clear: both; width: 90%; height: auto; margin: 0 auto;}
  .lab-articles-list .article-box .title { clear: both; width: 100%; height: 140px; padding: 20px 5%; color: #414141; font-size: 1.2rem; font-weight: 500; line-height: 1.4em; box-sizing: border-box; overflow-wrap: break-word; word-break: break-all;}
  .lab-articles-list .article-box .title p { padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
  .lab-articles-list .article-box .title p a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


  /************ section#page-lab-con ************/

  section#page-lab-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_lab_con_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: center top; position: relative; z-index: 1;}

  .page-lab-con-banner { clear: both; width: 100%; background-color: #031F35; position: relative; overflow: hidden;}
  .page-lab-con-banner img.banner-bg { width: 160%; height: auto; margin: 0 0 0 -30%;}
  .page-lab-con-banner .lab-title { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}
  .page-lab-con-banner .lab-title span { padding: 1vw 3vw; color: #000; font-size: 5vw; font-weight: 700; line-height: 1.2em; text-align: center; background-color: rgba(247,255,255,0.5);}

  .page-lab-con-sec1-con { clear: both; width: 100%; padding: 60px 0 60px 0; box-sizing: border-box; position: relative; z-index: 1;}
  .page-lab-con-sec1-con .lab-con-title { width: 100%; padding: 20px 20px 10px 20px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-title span.caption { color: #1A3F5B; font-size: 1.8em; font-weight: 300; line-height: 1em;}
  .page-lab-con-sec1-con .lab-con-title span.name { font-size: 2.2em; line-height: 1em;}
  .page-lab-con-sec1-con img.line { clear: both; max-width: 90%; width: 825px; height: auto;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box { clear: both; width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box img.icon { width: 100px; height: auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-member-stitle-box span.title { padding: 8px 20px 8px 10px; margin: 0 0 0 -18px; color: #000; font-size: 1.6em; font-weight: 500; line-height: 1.2em; background-color: #FFA200;}

  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor { clear: both; width: 100%; padding: 20px 0; margin: 10px 0 0 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo { width: 100%; margin: 0 0 30px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .photo img { width: 240px; height: auto; margin: 0 auto;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor { width: 100%; font-size: 1rem; line-height: 1.8em; word-break: break-all; overflow-wrap: break-word;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-cn { font-size: 2rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor span.name-en { font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor hr { width: 100%; margin: 20px 0; border: 1px #eee solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-lab-con-sec1-con .lab-con-detail .content .professor-infor .infor a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .people-list { clear: both; padding: 20px; font-size: 1.2rem; font-weight: 300; line-height: 2em; background-color: rgba(231,238,246,0.5);}
  .page-lab-con-sec1-con .people-list span.title { color: #103C82; font-size: 1.8rem;}
  
  .page-lab-con-sec1-con ul.lab-con-tab { clear: both; width: 100%; padding: 0; margin: 10px 0; list-style: none; background-color: rgba(255,229,180,0.5); display: flex; justify-content: center; flex-wrap: wrap;}
  .page-lab-con-sec1-con ul.lab-con-tab li { padding: 0; margin: 0;}
  .page-lab-con-sec1-con ul.lab-con-tab li a { padding: 20px; color: #FFA200; font-size: 1.2rem; line-height: 1em; text-decoration: none; display: block;}
  .page-lab-con-sec1-con ul.lab-con-tab li a:hover { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  .page-lab-con-sec1-con ul.lab-con-tab li a.sel { padding: 30px 20px; margin: -10px 0; color: #fff; background-color: #031F35;}
  
  .page-lab-con-sec1-con .lab-con-detail { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content { width: 100%; padding: 40px 20px; box-sizing: border-box; border-top: 15px #031F35 solid; background-color: rgba(231,238,246,0.5);}
  .page-lab-con-sec1-con .lab-con-detail .content div { display: none; font-size: 1.2rem; line-height: 1.8em; text-align: justify;}

  .page-lab-con-sec1-con .lab-con-detail .content div table a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full { width: 100%; border-bottom: 1px #B3B3B3 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-1 { width: 100%; padding: 15px 10px; color: #FF9200; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-2 { width: 100%; padding: 0 10px 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 { width: 100%; padding: 0 10px 15px 10px; box-sizing: border-box; display: flex; justify-content: flex-end;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a { width: 100px; padding: 5px 0; color: #FF9200; font-size: 1rem; line-height: 1rem; text-align: center; text-decoration: none; border-radius: 16px; background-color: #FFE5B4; display: block;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-new-table .column-full .column-3 a:hover { color: #fff; background-color: #FF9200;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle { width: 290px; padding: 10px 0 10px 10px; margin: 0 0 30px 0; color: #fff; font-size: 2rem; font-weight: 300; line-height: 1em; display: flex; justify-content: flex-start; align-items: center; background-color: #FFA200;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-sub-stitle img { width: 140px; height: auto; margin: 0 10px 0 0;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle { clear: both; width: 100%; margin: 0 0 20px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-stitle img.title { width: auto; height: 50px;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-2 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .caption-full .caption-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-1 { width: 20%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-2 { width: 25%; padding: 15px 10px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-3 { width: 40%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-people-table .column-full .column-4 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-1 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .caption-full .caption-2 { width: 85%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-1 { width: 15%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-issue-table .column-full .column-2 { width: 85%; padding: 15px 10px; box-sizing: border-box;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full { width: 100%; color: #031F35; font-weight: 600; text-align: center; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-1 { width: 20%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-2 { width: 20%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-3 { width: 20%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-4 { width: 40%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .caption-full .caption-5 { display: none!important;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full { width: 100%; text-align: center; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full:nth-child(odd) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-1 { width: 20%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-2 { width: 20%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-3 { width: 20%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-4 { width: 40%; padding: 15px 5px; word-break: break-all; overflow-wrap: break-word; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 { width: 100%; padding: 15px 5px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-course-table .column-full .column-5 a { padding: 8px 0; color: #fff; text-decoration: none; border-radius: 6px; text-align: center; background-color: #356588; display: block;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list { clear: both; width: 100%;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .list-year { clear: both; width: 100%; padding: 0 0 30px 0;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list { clear: both; width: 100%; padding: 0 0 0 20px; margin: 0 0 40px 0; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-list .plan-list .list { width: 100%; padding: 13px 0; border-bottom: 1px #B3B3B3 solid;}

  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table { clear: both; width: 100%; border: 1px #767676 solid;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full { width: 100%; font-weight: 600; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-1 { width: 13%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-2 { width: 62%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .caption-full .caption-3 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full:nth-child(even) { background-color: #fff;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-1 { width: 13%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-2 { width: 62%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 { width: 25%; padding: 15px 10px; box-sizing: border-box;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}
  .page-lab-con-sec1-con .lab-con-detail .content .lab-con-plan-table .column-full .column-3 a:hover { color: #103C82; border-bottom: 1px #103C82 dashed;}

  .page-lab-con-sec1-con .lab-con-detail .content ul { list-style-type: circle;}
  .page-lab-con-sec1-con .lab-con-detail .content ul li { padding: 0 0 20px 0;}

  
  .lab-con-members-list-table { clear: both; width: 100%; margin: 0 0 40px 0; display: flex !important; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor { width: calc(100% - 10px); padding: 5px; margin: 0 5px 20px 5px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .lab-con-members-list-table .teacher-master-infor .photo { width: 100%; height: 260px; background-color: #031F35; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .teacher-master-infor .photo img { width: auto; height: 100%;}  
  .lab-con-members-list-table .teacher-master-infor .intro { width: 100%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .teacher-master-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6rem;}
  .lab-con-members-list-table .teacher-master-infor .intro img.master-line { clear: both; width: 80%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con p.text { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float1 { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .title-float2 { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .teacher-master-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}

  .lab-con-members-list-table .researcher-infor { width: calc(100% - 10px); padding: 5px; margin: 0 5px 20px 5px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .lab-con-members-list-table .researcher-infor .photo { width: 100%; height: 260px; background-color: #031F35; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .researcher-infor .photo img { width: auto; height: 100%;}
  .lab-con-members-list-table .researcher-infor .intro { width: 100%; padding: 10px; box-sizing: border-box;}
  .lab-con-members-list-table .researcher-infor .intro .name { width: 100%; font-size: 1.8rem; font-weight: 600; line-height: 1.6rem;}
  .lab-con-members-list-table .researcher-infor .intro img.master-line { clear: both; width: 80%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .researcher-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con p.text { width: 100%; padding: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float1 { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .title-float2 { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 { width: 100%; margin: 0 0 10px 0; font-size: 1rem; line-height: 1.2em; text-align: left;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .researcher-infor .intro .detail .con-float2 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  
  .lab-con-members-list-table .student-infor { width: calc(100% - 10px); padding: 5px; margin: 0 5px 20px 5px; background-color: rgba(231,238,246,0.5); box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .photo { clear: both; width: 100%; background-color: #031F35; height: 260px; display: flex !important; justify-content: center; align-items: flex-start; overflow: hidden;}
  .lab-con-members-list-table .student-infor .photo img { width: auto; height: 100%;}
  .lab-con-members-list-table .student-infor .intro { width: 100%; padding: 10px; font-size: 1.2rem; line-height: 1.6rem; box-sizing: border-box;}
  .lab-con-members-list-table .student-infor .intro .name { width: 100%; font-size: 1.4rem; font-weight: 500; line-height: 1.2rem; text-align: center;}
  .lab-con-members-list-table .student-infor .intro img.master-line { clear: both; width: 100%; height: auto; margin: 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .lab-con-members-list-table .student-infor .intro .detail .title { width: 100%;}
  .lab-con-members-list-table .student-infor .intro .detail .con { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}
  .lab-con-members-list-table .student-infor .intro .detail .con a:hover { border-bottom: 1px #414141 dashed;}
  .lab-con-members-list-table .student-infor .intro .detail .title-float1 { width: 100%;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 { width: 100%; margin: 0 0 10px 0;}
  .lab-con-members-list-table .student-infor .intro .detail .con-float1 a { color: #414141; text-decoration: none; overflow-wrap: break-word; word-break: break-all;}


  /************ section#page-admissions ************/

  section#page-admissions-sec1 { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 600% auto; background-position: center -110vw; position: relative; z-index: 1;}

  .page-admissions-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-admissions-sec1-con .content { clear: both; width: 100%; padding: 60px 0 60px 0;}
  .page-admissions-sec1-con .content .column-half { width: 100%; margin: 0 auto 40px auto; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-admissions-sec1-con .content .column-half img.title { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box { width: 100%; margin: -50px 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links { width: 90px; margin: 0 10px; position: relative;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links img { width: 100%; height: auto;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a { width: 100%; height: 100%; padding: 90px 0 0 23px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: flex-start; position: absolute; top: 0; left: 0;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a span { color: #fff; font-size: 2em; line-height: 1em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
  .page-admissions-sec1-con .content .column-half .links-list-box .links a:hover span { color: #FFA200;}

  .page-admissions-sec2-con { clear: both; width: 100%; padding: 0 0 80px 0; box-sizing: border-box;}
  .page-admissions-sec2-con .content { clear: both; width: 100%; padding: 80px 0;}
  .page-admissions-sec2-con .content .stitle-box { width: 100%; margin: 0 0 40px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-admissions-sec2-con .content .stitle-box img.icon { width: 90px; height: auto;}
  .page-admissions-sec2-con .content .stitle-box span.title { padding: 5px 20px 6px 10px; margin: 0 0 0 -18px; color: #000; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; background-color: #FFA200;}
  .page-admissions-sec2-con .content .content-text { clear: both; width: 100%; font-size: 1rem; line-height: 1.8em;}
  .page-admissions-sec2-con .content .content-text a { color: #3391FD; text-decoration: none;}
  .page-admissions-sec2-con .content .content-text a:hover { color: #103C82;}
  
  ul.chinese-num { width: 100%; padding: 0 0 0 40px; margin: 0; box-sizing: border-box; list-style-type:cjk-ideographic; display: block;}
  ul.chinese-num li { width: 100%; padding: 0; margin: 0;}


  /************ section#page-scholarship ************/

  section#page-scholarship-sec1 { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: no-repeat; background-size: 600% auto; background-position: center -110vw; position: relative; z-index: 1;}

  .page-scholarship-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-scholarship-sec1-con .content { clear: both; width: 100%; padding: 60px 0 0 0;}
  .page-scholarship-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-scholarship-sec1-con .content .stitle-box img.icon { width: 90px; height: auto;}
  .page-scholarship-sec1-con .content .stitle-box span.title { padding: 5px 20px 6px 10px; margin: 0 0 0 -18px; color: #000; font-size: 1.6em; font-weight: 500; line-height: 1.2em; background-color: #FFA200;}
  .page-scholarship-sec1-con .content .infor-box { width: 100%; padding: 25px 0 0 0; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}
  .page-scholarship-sec1-con .content .infor-box button.linkto { clear: both; margin: 20px 0 0 0; padding: 3px 30px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 14px; background-color: #00C8FF; cursor: pointer;}
  .page-scholarship-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-scholarship-sec1-con .content img.pic { clear: both; width: 100%; height: auto; margin: 60px auto 0 auto;}


  /************ section#page-research ************/

  section#page-research-sec1 { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: left top; position: relative; z-index: 1;}

  .page-research-sec1-con { clear: both; width: 100%; padding: 60px 0 60px 0; box-sizing: border-box;}
  .page-research-sec1-con .research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-research-sec1-con .research-list-table .column-full { width: 100%; margin: 0 0 20px 0;}
  .page-research-sec1-con .research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .page-research-sec1-con .research-list-table .column-full a:active { background-color: rgba(255,255,255,0.4);}
  .page-research-sec1-con .research-list-table .column-full .column-1 { width: 100%; height: 48vw; overflow: hidden;}
  .page-research-sec1-con .research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .page-research-sec1-con .research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .page-research-sec1-con .research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .page-research-sec1-con .research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}

  .research-plan-sort-icon { clear: both; width: 80%; padding: 10px 0; margin: 0 auto 30px auto; color: #fff; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; border-radius: 8px; background-color: #444; cursor: pointer;}

  ul.research-plan-sort-nav { clear: both; width: 80%; padding: 0; margin: 0 auto 40px auto; list-style: none; display: none;}
  ul.research-plan-sort-nav li { width: 100%; padding: 0; margin: 0 0 10px 0;}
  ul.research-plan-sort-nav li a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center; text-decoration: none; border-radius: 8px; background-color: #1A3F5B; display: block;}
  ul.research-plan-sort-nav li a:hover { background-color: #103C82;}
  ul.research-plan-sort-nav li a.sel { background-color: #80735A;}


  .hp-research-list-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-research-list-table .column-full { width: 100%; margin: 0 0 20px 0;}
  .hp-research-list-table .column-full a { width: 100%; padding: 10px; box-sizing: border-box; color: #414141; font-size: 1.2rem; line-height: 1.6em; text-decoration: none; display: block;}
  .hp-research-list-table .column-full a:active { background-color: rgba(255,255,255,0.4);}
  .hp-research-list-table .column-full .column-1 { width: 100%; height: 48vw; overflow: hidden;}
  .hp-research-list-table .column-full .column-1 img { width: 100%; height: auto;}
  .hp-research-list-table .column-full .column-2 { width: 100%; padding: 10px 0; color: #fff; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #fff solid;}
  .hp-research-list-table .column-full .column-3 { width: 100%; padding: 10px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .hp-research-list-table .column-full .column-4 { width: 100%; font-size: 0.9rem; line-height: 1.2em;}


  /************ section#page-research-con ************/

  section#page-research-con-sec1 { clear: both; width: 100%; background-image: url("../images/page_about2_sec1_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: center top; position: relative; z-index: 1;}

  .page-research-con-sec1-con { clear: both; width: 100%; padding: 40px 20px 60px 20px; box-sizing: border-box; background-color: rgba(231,238,246,0.5);}
  .page-research-con-sec1-con .content { width: 100%; padding: 40px 0; font-size: 1.2rem; line-height: 1.8em; text-align: justify;}
  .page-research-con-sec1-con .content .stitle-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-research-con-sec1-con .content .stitle-box img.icon { width: 90px; height: auto;}
  .page-research-con-sec1-con .content .stitle-box span.title { padding: 5px 20px 6px 10px; margin: 0 0 0 -18px; color: #000; font-size: 1.6em; font-weight: 500; line-height: 1.2; background-color: #FFA200;}
  .page-research-con-sec1-con .content .infor-box { width: 100%; padding: 25px 0 0 0; margin: 0 0 35px 0; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box hr { clear: both; width: 100%; margin: 25px 0 0 0; border-bottom: 1px #00C8FF solid; box-sizing: border-box;}
  .page-research-con-sec1-con .content .infor-box img.pic { clear: both; width: 100%; height: auto; margin: 30px auto 0 auto;}
  .page-research-con-sec1-con .content .infor-box .pic-text { clear: both; width: 100%; padding: 20px 0 30px 0; margin: 0 auto; font-size: 0.8rem; line-height: 1.2em; text-align: center;}


  /************ section#page-course-plan ************/

  section#page-course-plan-sec1 { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sub-title3 { clear: both; width: 100%; padding: 0 0 0 20px; margin: 40px 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-sub-title3 span.cn { width: 100%; margin: 0 0 10px 0; font-size: 2.8em; font-weight: 300; line-height: 1em;}
  .page-sub-title3 img { width: 180px; height: auto; margin: 0 10px;}
  .page-sub-title3 span.en { color: rgba(51,145,253,0.5); font-size: 1.2em; line-height: 1.1em;}

  .page-course-plan-sec1-con { clear: both; width: 100%; padding: 60px 0 40px 0; box-sizing: border-box; position: relative;}
  .page-course-plan-sec1-con .content { clear: both; width: 100%; padding: 0 20px; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}
  .page-course-plan-sec1-con .content img.course-mo { width: 100%; height: auto; margin: 0 auto 40px auto;}
  .page-course-plan-sec1-con .content img.course-pc { display: none;}
  .page-course-plan-sec1-con .content img.intro-course-mo { width: 90%; height: auto; margin: 0 auto;}
  .page-course-plan-sec1-con .content img.intro-course-pc { display: none;}
  .page-course-plan-sec1-con .content img.pic { clear: both; width: 80%; height: auto; margin: 40px 0 0 0;}
  
  .page-course-plan-sec1-con .blue-block-bg { width: 100%; height: 10vw; background-color: #3A5BA0; display: block; position: absolute; bottom: 18vw; left: 0; z-index: 1;}

  .page-course-plan-sec1-con .content .text-content { clear: both; width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 2em; text-align: justify; text-justify: inter-ideograph;}
  .page-course-plan-sec1-con .content .text-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg { width: 100%; padding: 0; margin: 20px 0; list-style-type: none; display: block;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li { width: 100%; padding: 15px 20px; margin: 0 0 10px 0; box-sizing: border-box; font-size: 1.2rem;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-100-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-140-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-160-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li .w-170-2 { width: 100%;}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(1) { background-color: rgba(4,144,200,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(2) { background-color: rgba(89,199,243,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(3) { background-color: rgba(219,226,240,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(4) { background-color: rgba(191,218,167,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(5) { background-color: rgba(56,132,199,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(6) { background-color: rgba(226,168,78,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(7) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.colorbg li:nth-child(8) { background-color: rgba(209,119,46,0.4);}
  .page-course-plan-sec1-con .content .text-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; box-sizing: border-box; list-style-type: disc; display: block;}
  .page-course-plan-sec1-con .content .text-content .title { width: 100%; margin: 0 0 20px 0; font-size: 2rem; font-weight: 600; line-height: 1.2em;}
  .page-course-plan-sec1-con .content .text-content ul.dot li { padding: 0; margin: 0;}

  img.page-course-plan-list { clear: both; width: 100%; margin: 40px 0 0 0;}

  .page-feature-sec2-title-1 { width: 100%; margin: 30px 0 60px 0; display: flex; justify-content: center; align-items: flex-start;}
  .page-feature-sec2-title-1 .line-lf { width: calc(50% - 80px); padding: 30px 0 0 0; display: flex; justify-content: flex-end; overflow: hidden;}
  .page-feature-sec2-title-1 .line-lf img { width: auto; height: 56px}
  .page-feature-sec2-title-1 .line-rt { width: calc(50% - 80px); margin: -30px 0 0 0; overflow: hidden;}
  .page-feature-sec2-title-1 .line-rt img { width: auto; height: 59px;}
  .page-feature-sec2-title-1 .title { width: 160px; color: #2B6490; font-size: 2.4em; font-weight: 600; line-height: 1em; text-align: center;}

  .page-feature-sec2-content { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-feature-sec2-content .column-lf { width: 100%; padding: 0 20px; margin: 0 0 30px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-lf .title-lf { max-width: 100%; width: 520px; padding: 5px 0; margin: 0 auto 30px auto; color: #fff; font-size: 1.4em; line-height: 1.2em; text-align: center; border-radius: 20px; background-color: #0084B4;}
  .page-feature-sec2-content .column-lf img.con-list-1 { clear: both; max-width: 100%; width: 718px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .column-rt { width: 100%; padding: 0 20px; margin: 0 0 90px 0; box-sizing: border-box;}
  .page-feature-sec2-content .column-rt .title-rt { max-width: 100%; width: 590px; padding: 5px 0; margin: 90px auto 35px auto; color: #fff; font-size: 1.4em; line-height: 1.2em; text-align: center; border-radius: 40px; background-color: #1D2088;}
  .page-feature-sec2-content .column-rt img.con-list-2 { clear: both; max-width: 100%; width: 735px; height: auto; margin: 0 auto;}
  .page-feature-sec2-content .banner { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}
  .page-feature-sec2-content .banner img { width: 100%; height: auto;}


  /************ section#page-course-online ************/

  section#page-course-online-sec1 { clear: both; width: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  .page-course-online-sec1-con { clear: both; width: 100%; padding: 30px 0 60px 0;}
  .page-course-online-sec1-con .content { width: 100%; padding: 30px 20px; background-image: url("../images/page_course_onling_bg.png"); background-repeat: repeat-y; background-size: 200% auto; background-position: left top; box-sizing: border-box;}
  
  .page-course-online-sec1-con .content .course-title { clear: both; width: 100%; padding: 30px 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .page-course-online-sec1-con .content .course-title:first-child { padding: 0 0 30px 0;}
  
  .course-online-list-table { clear: both; width: 100%; background-color: rgba(231,238,246,0.5);}
  .course-online-list-table .caption-full { width: 100%; color: #1A3F5B; font-size: 1rem; font-weight: 300; line-height: 1em; border-bottom: 2px #1A3F5B solid; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch;}
  .course-online-list-table .caption-full .caption-1 { width: 25%; padding: 20px 5px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-2 { width: 35%; padding: 20px 5px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-3 { width: 25%; padding: 20px 5px; box-sizing: border-box;}
  .course-online-list-table .caption-full .caption-4 { width: 15%; padding: 20px 5px; box-sizing: border-box;}
  .course-online-list-table .column-full { width: 100%; color: #1A3F5B; font-size: 0.8rem; line-height: 1.4em; border-bottom: 1px #356588 solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .course-online-list-table .column-full:nth-child(odd) { background-color: #fff;}
  .course-online-list-table .column-full .column-1 { width: 25%; padding: 20px 5px; font-weight: 500; box-sizing: border-box;}
  .course-online-list-table .column-full .column-2 { width: 35%; padding: 20px 5px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-3 { width: 25%; padding: 20px 5px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 { width: 15%; padding: 20px 5px; box-sizing: border-box;}
  .course-online-list-table .column-full .column-4 a { width: 100%; padding: 8px 0; color: #fff; line-height: 1em; text-align: center; text-decoration: none; border-radius: 6px; background-color: #356588; display: block;}
  .course-online-list-table .column-full .column-5 { width: 100%; padding: 20px 5px; font-size: 0.7rem; line-height: 1.6em; border-top: 1px #ccc dashed; box-sizing: border-box; word-break: break-all;}
  .course-online-list-table .column-full .column-5 a { color: #FFA200; text-decoration: none;}


  /************ section#page-download ************/

  section#page-download-sec1 { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-image: url("../images/page_admissions_bg.jpg"); background-repeat: repeat-y; background-size: 600% auto; background-position: center -110vw; position: relative; z-index: 1;}

  .page-download-sec1-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box;}
  .page-download-sec1-con .content { clear: both; width: 100%; padding: 30px 0 50px 0;}
  .page-download-sec1-con .content .stitle-box { width: 240px; margin: 0 auto; position: relative;}
  .page-download-sec1-con .content .stitle-box img.bg { width: 100%; height: auto;}
  .page-download-sec1-con .content .stitle-box span { color: #fff; font-size: 2rem; font-weight: 500; line-height: 1em; position: absolute; top: 5px; left: 80px;}
  .page-download-sec1-con .content ul.download-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-download-sec1-con .content ul.download-list li { width: 100%; padding: 0; margin: 30px auto;}
  .page-download-sec1-con .content ul.download-list li a { width: 86vw; height: 7vw; padding: 0.8vw 0 0 10vw; color: #fff; font-size: 2.8vw; font-weight: 500; line-height: 1.2em; text-decoration: none; background-image: url("../images/page_download_list_bg.png"); background-repeat: no-repeat; background-size: 86vw auto; box-sizing: border-box; display: block;}
  .page-download-sec1-con .content ul.download-list li a:hover { color: #FF9200;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list { width: 100%; padding: 5vw 3vw 0 14vw; margin: 0; list-style: disc; display: block; box-sizing: border-box;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li { width: 100%; padding: 0 0 3vw 0; margin: 0; font-size: 3.2vw; line-height: 4.5vw;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a { color: #414141; text-decoration: none;}
  .page-download-sec1-con .content ul.download-list li ul.dl-files-list li a:hover { border-bottom: 1px #414141 dashed;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/page_course_plan_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: center top; position: relative; z-index: 1;}

  .page-sitemap-con { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box; position: relative;}
  .page-sitemap-con .content { clear: both; width: 100%; padding: 70px 20px 40px 20px; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}

  ul.sitemap-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul.sitemap-list li { width: calc(50% - 20px); padding: 0; margin: 0 10px 40px 10px;}
  ul.sitemap-list li a { text-decoration: none;}
  ul.sitemap-list li span.nav { padding: 5px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; line-height: 1em; background-color: #265384;}
  ul.sitemap-list li a:hover span.nav { color: #FF9200;}
  ul.sitemap-list li ul.popup { width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: block;}
  ul.sitemap-list li ul.popup li { width: 100%; padding: 0; margin: 0 0 10px 0;}
  ul.sitemap-list li ul.popup li a { color: #265384; font-size: 1.2rem; font-weight: 500; line-height: 1.2; text-decoration: none;}
  ul.sitemap-list li ul.popup li a:hover { border-bottom: 1px #265384 solid;}


  /************ footer ************/

  footer { clear: both; width: 100%; border-bottom: 20px #265384 solid;}

  .footer-nav { width: 100%; padding: 20px; box-sizing: border-box; background-color: #1D253E;}
  .footer-nav ul.nav-list { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .footer-nav ul.nav-list li { width: 50%; padding: 0; margin: 0 0 20px 0; color: #FFA200; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  .footer-nav ul.nav-list li a { color: #FFA200; text-decoration: none;}
  .footer-nav ul.nav-list li a:hover { border-bottom: 2px #FFA200 solid;}
  .footer-nav ul.nav-list li ul.nav-list-pop { clear: both; padding: 0 0 0 5px; margin: 0; list-style: none; display: block;}
  .footer-nav ul.nav-list li ul.nav-list-pop li { padding: 0; margin: 10px 0; font-size: 1rem; font-weight: normal; line-height: 1.2em;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a { color: #fff; text-decoration: none;}
  .footer-nav ul.nav-list li ul.nav-list-pop li a:hover { border-bottom: 1px #fff solid;}

  .footer-infor { clear: both; width: 100%; padding: 20px; box-sizing: border-box; background-color: #E6E6E6;}
  .footer-infor .qrcode-box { width: 170px; margin: 0 auto 30px auto;}
  .footer-infor .qrcode-box img { width: 100%; height: auto;}
  .footer-infor .address-nav { width: 100%; margin: 0 auto; position: relative;}
  .footer-infor .address-nav .address { display: none;}
  .footer-infor .address-nav .address-mo { width: 100%; font-size: 1.1rem; font-weight: 500; line-height: 1.8em; text-align: center;}
  .footer-infor .address-nav .address-mo a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
    
  .footer-social-icon { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; align-items: center;}
  .footer-social-icon img { width: 28px; height: auto; margin: 0 3px;}
  

}


@media print {

  #page-signup-show { clear: both; width: 100%; padding: 30px 0 0 0; line-height: 1.1em;}
  #page-signup-show .signup-show-sub-title { width: 100%; padding: 10px 0; font-size: 1.1rem; line-height: 1em; text-align: center;}
  #page-signup-show .signup-show-sub-title span.small { font-size: 0.7rem; line-height: 1em;}

  .page-sub-title { width: 100%; text-align: center;}
  .page-sub-title span.top-title { width: 100%; font-size: 1.4rem; font-weight: 300; text-align: center;}

  #page-signup-show table { font-size: 0.8rem; box-sizing: border-box;}

  .signup-signature { clear: both; width: 100%; margin: 10px 0; font-size: 0.9rem;}
  .signup-signature .column-lf { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start;}
  .signup-signature .column-rt { width: 100%; padding: 10px 0; display: flex; justify-content: flex-start;}
  .signup-signature .column-lf span.underline, 
  .signup-signature .column-rt span.underline { width: 200px; border-bottom: 1px #414141 solid; display: block;}

  .signup-goback-print { display: none;}

}