@charset "utf-8";
/* 簡單流變媒體
   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性
   http://www.alistapart.com/articles/fluid-images/ 
*/

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {
	width:100%;
}
body, main, footer{ font-family: "微軟正黑體", "Arial", sans-serif;}
input:focus, textarea:focus, select:focus, option:focus{ outline: none;}

form{width: 100%;}

a:active,
a:visited,
a:hover { outline: 0; text-decoration:none;}

.display-style{ display: -webkit-flex; display: flex; flex-wrap: wrap;}

/* 行動版面: 480px 以下。 */
.max-width-style{width: 100%; margin: auto 0;}

.index-top-box-bg{width: 100%; margin: 92px 0 0;}
   .index-top-box{ align-items: stretch; width: 100%; margin: 0;}
      .index-top-box-runimg{ width: 100%; margin: 0;}
         .index-top-box-runimg img{ width: 100%; margin: 0;}
      .index-top-box-right{ width: 100%; margin: 0; background-color: #000;}
         .index-top-box-right-news{ width: 100%; margin: 0 0 18px; padding: 18px 10px 0; box-sizing: border-box;}
            .index-top-box-right-news h3{ width: 100%; margin: 0; padding: 0 10px; box-sizing: border-box; font-size: 1.15em; font-weight: bolder; letter-spacing: 1px; color: #FFF;}
            .index-top-box-right-news hr{ width: 100px; height: 1px; margin: 12px 0 0; background-color: #FFF; border: none;}
            .index-top-box-right-news-content{ width: 100%; margin: 0;}
               .index-top-box-right-news-content a{ width: 100%; margin: 0; padding: 20px 10px; box-sizing: border-box; color: #FFF; border-bottom: 1px #FFF solid; transition: 0.25s ease-in-out;}
                  .index-top-box-right-news-content a h6{ width: 100%; margin: 0 0 10px; font-size: 13px;}
                  .index-top-box-right-news-content a p{ width: 100%; margin: 0; font-size: 0.9em; font-weight: bolder;overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
                  .index-top-box-right-news-content a:visited{ color: #FFF;}
                  .index-top-box-right-news-content a:hover{ color: #FFF; background-color: #635f77;}
                  .index-top-box-right-news-content a:active{ color: #FFF;}
            .index-top-box-right-news-button{ justify-content: flex-end; align-items: center; width: 100%; margin: 25px 0 0; font-size: 1em; font-style:oblique; color: #AAA; transition: 0.25s ease-in-out;}
               .index-top-box-right-news-button i{ margin-left: 5px !important; transition: 0.25s ease-in-out;}
               .index-top-box-right-news-button:visited{ color:#EEE;}
               .index-top-box-right-news-button:hover{ color: #FFF;}
               .index-top-box-right-news-button:hover > i{ margin-left: 9px;}
               .index-top-box-right-news-button:active{ color: #EEE;}
         .index-top-box-right-ytvideo{ width: 100%; margin: 18px 0 0;}
            .owl-carousel-ytvideo iframe{ width: 100%; height: 30vh; margin: 0;}

.exhibition-pic-box-bg{ width: 100%; margin: 35px 0 0;}
   .exhibition-pic{ width: 100%; margin: 0 0 35px;}
      .exhibition-pic-box-pc{ align-items: stretch; display: none; width: 100%; margin: 0;}
         .exhibition-pic-box-pc-title{ width: 220px; margin: 0; background-color: #000; position: relative;}
            .exhibition-pic-box-pc-title p, .exhibition-pic-box-pc-title h2{ width: 100%; margin: 0; padding:8px 10px; box-sizing: border-box; text-align:justify; text-justify:distribute-all-lines; text-align-last:justify; font-size: 2.25em; font-weight: bolder; letter-spacing: 3px;}
            .exhibition-pic-box-pc-title p{ color: #FFF; background-color: #898989;}
            .exhibition-pic-box-pc-title h2{ color: #535353; transition: 0.25s ease-in-out;}
            .exhibition-pic-box-pc-title h2:hover{ color: #FFF; background-color: #898989; cursor: pointer;}
            .exhibition-pic-box-pc-title a{ position: absolute; bottom: 5px; justify-content: flex-end; width: 90%; margin: 12px 5%; font-size: 1em; font-style:oblique; color: #AAA; transition: 0.25s ease-in-out;}
               .exhibition-pic-box-pc-title a i{ margin-left: 5px !important; transition: 0.25s ease-in-out;}
               .exhibition-pic-box-pc-title a:visited{ color:#EEE;}
               .exhibition-pic-box-pc-title a:hover{ color: #FFF;}
               .exhibition-pic-box-pc-title a:hover > i{ margin-left: 9px;}
               .exhibition-pic-box-pc-title a:active{ color: #EEE;}
         .exhibition-pic-box-pc-content{ align-items: center; width: calc(100% - 220px); margin: 0;}
      .exhibition-pic-box-ph{ display: inline-block; width: 100%; margin: 0;}
         .exhibition-pic-box-ph h2{ width: 90%; margin: 0 5% 3px; font-size: 1.35em; font-weight: bolder; line-height: 1em; letter-spacing: 3px; color: #333;}
         .exhibition-pic-box-ph-content{ width: 100%; margin: 0;}
         .exhibition-pic-box-ph-amore{ justify-content: flex-end; width: 96%; margin: 6px 2% 0; font-size: 1em; font-style:oblique; color: #000; transition: 0.25s ease-in-out;}
            .exhibition-pic-box-ph-amore i{ margin-left: 5px !important; transition: 0.25s ease-in-out;}
            .exhibition-pic-box-ph-amore:visited{ color:#000;}
            .exhibition-pic-box-ph-amore:hover{ color: #635f77;}
            .exhibition-pic-box-ph-amore:hover > i{ margin-left: 9px;}
            .exhibition-pic-box-ph-amore:active{ color: #000;}

   .exhibition-pic-box-item{ width: 100%; margin: 0; position: relative;}
      .exhibition-pic-box-item-img{ width: 100%; height: 300px; background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px #DDD solid;}
      .exhibition-pic-box-item img{ width: 100%; margin: 0;}
      .exhibition-pic-box-item-text{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 20px 13px; box-sizing: border-box; color: #FFF; background-color: rgba( 0, 0, 0, 0.8); opacity: 0; transition: 0.25s ease-in-out;}
         .exhibition-pic-box-item-text h3{ width: 100%; margin: 0 0 10px; font-size: 15px; letter-spacing: 1px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;}
         .exhibition-pic-box-item-text h6{ width: 100%; margin: 0; font-size: 14px; font-style:oblique;}
      .exhibition-pic-box-item:hover > .exhibition-pic-box-item-text{ opacity: 1;}

.date-introduction-bg{ width: 100%; margin: 0 0 100px;}
   .date-introduction{ justify-content: space-between; align-items: stretch; width: 100%; margin: 0; padding: 0 1%; box-sizing: border-box;}
      .date-introduction-on-campus{ width: 100%; margin: 0 0 16px; padding: 12px 15px; box-sizing: border-box; background-color: #efefef; position: relative;}
         .date-introduction-on-campus h2{ width: 100%; margin: 0; font-size: 1.35em; font-weight: bolder; line-height: 1em; letter-spacing: 3px; color: #555;}
         .date-introduction-on-campus p{ width: 100%; margin: 16px 0; font-size: 1em; font-weight: bolder; line-height: 1.5em; color: #555;}
         .date-introduction-on-campus-detailed{ width: 100%; margin: 0 0 50px;}
            .date-introduction-on-campus-detailed-box{ align-items: flex-start; width: 100%; margin: 5px 0; font-size: 14px; line-height: 1.5em; color: #555;}
               .date-introduction-on-campus-detailed-box span{ width: 50px; margin: 0;}
               .date-introduction-on-campus-detailed-box h3{ width: calc(100% - 50px); margin: 0;}
         .date-introduction-on-campus .date-introduction-button{ position: absolute; bottom: 12px; left: calc(50% - 50px);}
      .date-introduction-date-table{ width: 100%; margin: 0;}
      .date-introduction-off-campus{ width: 100%; margin: 0;}
         .date-introduction-off-campus-box{ align-items: center; width: 100%; margin: 0; padding: 20px 8px; box-sizing: border-box; color: #555; border-bottom: 1px #000 solid; transition: 0.25s ease-in-out;}
            .date-introduction-off-campus-box:hover{ color: #FFF; background-color: #635f77;}
            .date-introduction-off-campus-box-img{ width: 45px; margin: 0 5px 0 0;}
            .date-introduction-off-campus-box-text{ width: calc(100% - 50px); margin: 0;}
               .date-introduction-off-campus-box-text h6{ width: 100%; margin: 0 0 5px; font-size: 13px; font-style:oblique;}
               .date-introduction-off-campus-box-text h3{ width: 100%; margin: 0; font-size: 15px; font-weight: bolder; line-height: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
         .date-introduction-off-campus .date-introduction-button{ margin: 8px 0 0;}

.date-introduction-button{ justify-content: center; align-items: center; width: 100px; margin: 0; padding: 8px; box-sizing: border-box; font-size: 0.9em; font-weight: bolder; letter-spacing: 2px; color: #FFF; background-color: #000; transition: 0.25s ease-in-out;}
   .date-introduction-button:visited{ color: #FFF;}
   .date-introduction-button:hover{ color: #FFF; background-color: #635f77;}
   .date-introduction-button:active{ color: #FFF;}
   

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

      .exhibition-pic-box-item{ width: 100%; margin: 0;}
         .exhibition-pic-box-item-img{ height: 150px;}
         .exhibition-pic-box-item-text{ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 12px 8px;}
            .exhibition-pic-box-item-text h3{ width: 100%; margin: 0 0 8px; font-size: 13px; letter-spacing: 1px; -webkit-line-clamp: 6;}
            .exhibition-pic-box-item-text h6{ width: 100%; margin: 0; font-size: 12px;}

}

/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
   .index-top-box-bg{width: 100%; margin: 92px 0 0;}
      .index-top-box{ width: 100%; margin: 0;}
         .index-top-box-runimg{ width: 100%; margin: 0;}
            .index-top-box-runimg img{ width: 100%; margin: 0;}
         .index-top-box-right{ width: 100%; margin: 0;}
            .index-top-box-right-news{ width: 100%; margin: 0 0 25px; padding: 18px 10px 0;}
               .index-top-box-right-news h3{ width: 100%; margin: 0; padding: 0 10px; font-size: 1.25em;}
               .index-top-box-right-news hr{ width: 120px; height: 1px; margin: 15px 0 0;}
               .index-top-box-right-news-content{ width: 100%; margin: 0;}
                  .index-top-box-right-news-content a{ width: 100%; margin: 0; padding: 25px 12px;}
                     .index-top-box-right-news-content a h6{ width: 100%; margin: 0 0 12px; font-size: 14px;}
                     .index-top-box-right-news-content a p{ width: 100%; margin: 0; font-size: 1em;}
               .index-top-box-right-news-button{ width: 100%; margin: 25px 0 0; font-size: 1em;}
                  .index-top-box-right-news-button i{ margin-left: 5px !important;}
                  .index-top-box-right-news-button:hover > i{ margin-left: 9px;}
            .index-top-box-right-ytvideo{ width: 100%; margin: 25px 0 0;}
               .owl-carousel-ytvideo iframe{ width: 100%; height: 40vh; margin: 0;}

   .exhibition-pic-box-bg{ width: 100%; margin: 40px 0 0;}
      .exhibition-pic{ width: 100%; margin: 0 0 40px;}
         .exhibition-pic-box-ph{ width: 100%; margin: 0;}
            .exhibition-pic-box-ph h2{ width: 96%; margin: 0 2% 6px; font-size: 1.5em;}
            .exhibition-pic-box-ph-content{ width: 100%; margin: 0;}
            .exhibition-pic-box-ph-amore{ width: 98%; margin: 10px 1% 0; font-size: 1.05em;}

      .exhibition-pic-box-item{ width: 100%; margin: 0;}
         .exhibition-pic-box-item-img{ height: 240px;}
         .exhibition-pic-box-item-text{ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 25px 16px;}
            .exhibition-pic-box-item-text h3{ width: 100%; margin: 0 0 12px; font-size: 15px; letter-spacing: 1px; -webkit-line-clamp: 8;}
            .exhibition-pic-box-item-text h6{ width: 100%; margin: 0; font-size: 14px;}


   .date-introduction-bg{ width: 100%; margin: 0 0 60px;}
      .date-introduction{ width: 100%; margin: 0; padding: 0 2%;}
         .date-introduction-on-campus{ width: 100%; margin: 0 0 20px; padding: 18px 30px;}
            .date-introduction-on-campus h2{ width: 100%; margin: 0; font-size: 1.65em;}
            .date-introduction-on-campus p{ width: 100%; margin: 20px 0; font-size: 1em;}
            .date-introduction-on-campus-detailed{ width: 100%; margin: 0 0 60px;}
               .date-introduction-on-campus-detailed-box{ width: 100%; margin: 6px 0; font-size: 14px;}
                  .date-introduction-on-campus-detailed-box span{ width: 50px; margin: 0;}
                  .date-introduction-on-campus-detailed-box h3{ width: calc(100% - 50px); margin: 0;}
            .date-introduction-on-campus .date-introduction-button{ bottom: 20px; left: calc(50% - 50px);}
         .date-introduction-date-table{ width: 100%; margin: 0 0 10px;}
         .date-introduction-off-campus{ width: 100%; margin: 0;}
            .date-introduction-off-campus-box{ width: 100%; margin: 0; padding: 18px 6px;}
               .date-introduction-off-campus-box-img{ width: 50px; margin: 0 4px 0 0;}
               .date-introduction-off-campus-box-text{ width: calc(100% - 54px); margin: 0;}
                  .date-introduction-off-campus-box-text h6{ width: 100%; margin: 0 0 8px; font-size: 13px;}
                  .date-introduction-off-campus-box-text h3{ width: 100%; margin: 0; font-size: 0.85em;}
            .date-introduction-off-campus .date-introduction-button{ margin: 10px 0 0;}

   .date-introduction-button{ width: 100px; margin: 0; padding: 10px 8px; font-size: 1em;}
}


@media only screen and (min-width: 576px) {
   .index-top-box-bg{width: 100%; margin: 117px 0 0;}
}

@media only screen and (min-width: 681px) { 
   .date-introduction-bg{ width: 100%; margin: 0 0 80px;}
      .date-introduction{ width: 100%; margin: 0; padding: 0 3%;}
         .date-introduction-on-campus{ width: 100%; margin: 0 0 25px; padding: 18px 35px;}
            .date-introduction-on-campus h2{ width: 100%; margin: 0; font-size: 1.65em;}
            .date-introduction-on-campus p{ width: 100%; margin: 20px 0; font-size: 1em;}
            .date-introduction-on-campus-detailed{ width: 100%; margin: 0 0 60px;}
               .date-introduction-on-campus-detailed-box{ width: 100%; margin: 6px 0; font-size: 14px;}
                  .date-introduction-on-campus-detailed-box span{ width: 50px; margin: 0;}
                  .date-introduction-on-campus-detailed-box h3{ width: calc(100% - 50px); margin: 0;}
            .date-introduction-on-campus .date-introduction-button{ bottom: 20px; left: calc(50% - 50px);}
         .date-introduction-date-table{ width: 270px; margin: 0;}
         .date-introduction-off-campus{ width: calc(98% - 270px); margin: 0;}
            .date-introduction-off-campus-box{ width: 100%; margin: 0; padding: 20px 6px;}
               .date-introduction-off-campus-box-img{ width: 50px; margin: 0 4px 0 0;}
               .date-introduction-off-campus-box-text{ width: calc(100% - 54px); margin: 0;}
                  .date-introduction-off-campus-box-text h6{ width: 100%; margin: 0 0 8px; font-size: 13px;}
                  .date-introduction-off-campus-box-text h3{ width: 100%; margin: 0; font-size: 0.85em;}
            .date-introduction-off-campus .date-introduction-button{ margin: 10px 0 0;}

   .date-introduction-button{ width: 100px; margin: 0; padding: 10px 8px; font-size: 1em;}
}


/* 桌面版面: 768px 到1024繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 769px) {
   .index-top-box-bg{width: 100%; margin: 117px 0 0;}
      .index-top-box{ width: 100%; margin: 0;}
         .index-top-box-runimg{ width: 100%; margin: 0;}
            .index-top-box-runimg img{ width: 100%; margin: 0;}
         .index-top-box-right{ width: 100%; margin: 0;}
            .index-top-box-right-news{ width: 100%; margin: 0 0 25px; padding: 18px 10px 0;}
               .index-top-box-right-news h3{ width: 100%; margin: 0; padding: 0 10px; font-size: 1.25em;}
               .index-top-box-right-news hr{ width: 120px; height: 1px; margin: 15px 0 0;}
               .index-top-box-right-news-content{ width: 100%; margin: 0;}
                  .index-top-box-right-news-content a{ width: 100%; margin: 0; padding: 25px 12px;}
                     .index-top-box-right-news-content a h6{ width: 100%; margin: 0 0 12px; font-size: 14px;}
                     .index-top-box-right-news-content a p{ width: 100%; margin: 0; font-size: 1em;}
               .index-top-box-right-news-button{ width: 100%; margin: 25px 0 0; font-size: 1em;}
                  .index-top-box-right-news-button i{ margin-left: 5px !important;}
                  .index-top-box-right-news-button:hover > i{ margin-left: 9px;}
            .index-top-box-right-ytvideo{ width: 100%; margin: 35px 0 0;}
               .owl-carousel-ytvideo iframe{ width: 100%; height: 60vh; margin: 0;}

   .exhibition-pic-box-bg{ width: 100%; margin: 45px 0 0;}
      .exhibition-pic{ width: 100%; margin: 0 0 45px;}
         .exhibition-pic-box-ph{ width: 100%; margin: 0;}
            .exhibition-pic-box-ph h2{ width: 96%; margin: 0 2% 6px; font-size: 1.65em;}
            .exhibition-pic-box-ph-content{ width: 100%; margin: 0;}
            .exhibition-pic-box-ph-amore{ width: 98%; margin: 10px 1% 0; font-size: 1.15em;}

      .exhibition-pic-box-item{ width: 100%; margin: 0;}
         .exhibition-pic-box-item-img{ height: 255px;}
         .exhibition-pic-box-item-text{ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 25px 20px;}
            .exhibition-pic-box-item-text h3{ width: 100%; margin: 0 0 12px; font-size: 16px; letter-spacing: 1px; -webkit-line-clamp: 7;}
            .exhibition-pic-box-item-text h6{ width: 100%; margin: 0; font-size: 15px;}
   
   .date-introduction-bg{ width: 100%; margin: 0 0 80px;}
      .date-introduction{ width: 100%; margin: 0; padding: 0 3%;}
         .date-introduction-on-campus{ width: 100%; margin: 0 0 25px; padding: 18px 35px;}
            .date-introduction-on-campus h2{ width: 100%; margin: 0; font-size: 1.65em;}
            .date-introduction-on-campus p{ width: 100%; margin: 20px 0; font-size: 1em;}
            .date-introduction-on-campus-detailed{ width: 100%; margin: 0 0 60px;}
               .date-introduction-on-campus-detailed-box{ width: 100%; margin: 6px 0; font-size: 14px;}
                  .date-introduction-on-campus-detailed-box span{ width: 50px; margin: 0;}
                  .date-introduction-on-campus-detailed-box h3{ width: calc(100% - 50px); margin: 0;}
            .date-introduction-on-campus .date-introduction-button{ bottom: 20px; left: calc(50% - 50px);}
         .date-introduction-date-table{ width: 280px; margin: 0;}
         .date-introduction-off-campus{ width: calc(98% - 280px); margin: 0;}
            .date-introduction-off-campus-box{ width: 100%; margin: 0; padding: 20px 8px;}
               .date-introduction-off-campus-box-img{ width: 60px; margin: 0 8px 0 0;}
               .date-introduction-off-campus-box-text{ width: calc(100% - 68px); margin: 0;}
                  .date-introduction-off-campus-box-text h6{ width: 100%; margin: 0 0 8px; font-size: 14px;}
                  .date-introduction-off-campus-box-text h3{ width: 100%; margin: 0; font-size: 0.9em;}
            .date-introduction-off-campus .date-introduction-button{ margin: 10px 0 0;}

   .date-introduction-button{ width: 100px; margin: 0; padding: 10px 8px; font-size: 1em;}
}

@media only screen and (min-width: 992px) {
   .date-introduction-bg{ width: 100%; margin: 0 0 80px;}
      .date-introduction{ width: 100%; margin: 0; padding: 0;}
         .date-introduction-on-campus{ width: 25%; margin: 0; padding: 18px;}
            .date-introduction-on-campus h2{ width: 100%; margin: 0; font-size: 1.85em;}
            .date-introduction-on-campus p{ width: 100%; margin: 20px 0; font-size: 1em; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
            .date-introduction-on-campus-detailed{ width: 100%; margin: 0 0 60px;}
               .date-introduction-on-campus-detailed-box{ width: 100%; margin: 6px 0; font-size: 14px;}
                  .date-introduction-on-campus-detailed-box span{ width: 50px; margin: 0;}
                  .date-introduction-on-campus-detailed-box h3{ width: calc(100% - 50px); margin: 0;}
            .date-introduction-on-campus .date-introduction-button{ bottom: 20px; left: calc(50% - 50px);}
         .date-introduction-date-table{ width: 28%; margin: 0;}
         .date-introduction-off-campus{ width: 44%; margin: 0;}
            .date-introduction-off-campus-box{ width: 100%; margin: 0; padding: 20px 8px;}
               .date-introduction-off-campus-box-img{ width: 60px; margin: 0 8px 0 0;}
               .date-introduction-off-campus-box-text{ width: calc(100% - 68px); margin: 0;}
                  .date-introduction-off-campus-box-text h6{ width: 100%; margin: 0 0 8px; font-size: 14px;}
                  .date-introduction-off-campus-box-text h3{ width: 100%; margin: 0; font-size: 1em;}
            .date-introduction-off-campus .date-introduction-button{ margin: 10px 0 0;}

   .date-introduction-button{ width: 100px; margin: 0; padding: 10px 8px; font-size: 1em;}
}
/* 桌面版面: 1025px 到1440繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1025px) {

   .index-top-box-bg{width: 100%; margin: 117px 0 0;}
      .index-top-box{ width: 100%; margin: 0;}
         .index-top-box-runimg{ width: 100%; margin: 0;}
            .index-top-box-runimg img{ width: 100%; margin: 0;}
         .index-top-box-right{ width: 100%; margin: 0;}
            .index-top-box-right-news{ width: 100%; margin: 0 0 25px; padding: 18px 10px 0;}
               .index-top-box-right-news h3{ width: 100%; margin: 0; padding: 0 10px; font-size: 1.25em;}
               .index-top-box-right-news hr{ width: 120px; height: 1px; margin: 15px 0 0;}
               .index-top-box-right-news-content{ width: 100%; margin: 0;}
                  .index-top-box-right-news-content a{ width: 100%; margin: 0; padding: 25px 12px;}
                     .index-top-box-right-news-content a h6{ width: 100%; margin: 0 0 12px; font-size: 14px;}
                     .index-top-box-right-news-content a p{ width: 100%; margin: 0; font-size: 1em;}
               .index-top-box-right-news-button{ width: 100%; margin: 25px 0 0; font-size: 1em;}
                  .index-top-box-right-news-button i{ margin-left: 5px !important;}
                  .index-top-box-right-news-button:hover > i{ margin-left: 9px;}
            .index-top-box-right-ytvideo{ width: 100%; margin: 35px 0 0;}
               .owl-carousel-ytvideo iframe{ width: 100%; height: 60vh; margin: 0;}

   .exhibition-pic-box-bg{ width: 100%; margin: 50px 0 0;}
      .exhibition-pic{ width: 100%; margin: 0 0 50px;}
         .exhibition-pic-box-ph{ width: 100%; margin: 0;}
            .exhibition-pic-box-ph h2{ width: 96%; margin: 0 2% 6px; font-size: 1.85em;}
            .exhibition-pic-box-ph-content{ width: 100%; margin: 0;}
            .exhibition-pic-box-ph-amore{ width: 100%; margin: 10px 0 0; font-size: 1.15em;}

      .exhibition-pic-box-item{ width: 100%; margin: 0;}
         .exhibition-pic-box-item-img{ height: 260px;}
         .exhibition-pic-box-item-text{ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 35px 20px;}
            .exhibition-pic-box-item-text h3{ width: 100%; margin: 0 0 12px; font-size: 16px; letter-spacing: 1px; -webkit-line-clamp: 9;}
            .exhibition-pic-box-item-text h6{ width: 100%; margin: 0; font-size: 15px;}

   .date-introduction-bg{ width: 100%; margin: 0 0 100px;}
      .date-introduction{ width: 100%; margin: 0; padding: 0;}
         .date-introduction-on-campus{ width: 23%; margin: 0; padding: 18px;}
            .date-introduction-on-campus h2{ width: 100%; margin: 0; font-size: 1.85em;}
            .date-introduction-on-campus p{ width: 100%; margin: 20px 0; font-size: 1em;}
            .date-introduction-on-campus-detailed{ width: 100%; margin: 0 0 60px;}
               .date-introduction-on-campus-detailed-box{ width: 100%; margin: 6px 0; font-size: 14px;}
                  .date-introduction-on-campus-detailed-box span{ width: 50px; margin: 0;}
                  .date-introduction-on-campus-detailed-box h3{ width: calc(100% - 50px); margin: 0;}
            .date-introduction-on-campus .date-introduction-button{ bottom: 20px; left: calc(50% - 50px);}
         .date-introduction-date-table{ width: 29%; margin: 0;}
         .date-introduction-off-campus{ width: 45%; margin: 0;}
            .date-introduction-off-campus-box{ width: 100%; margin: 0; padding: 20px 8px;}
               .date-introduction-off-campus-box-img{ width: 60px; margin: 0 8px 0 0;}
               .date-introduction-off-campus-box-text{ width: calc(100% - 68px); margin: 0;}
                  .date-introduction-off-campus-box-text h6{ width: 100%; margin: 0 0 8px; font-size: 14px;}
                  .date-introduction-off-campus-box-text h3{ width: 100%; margin: 0; font-size: 1em;}
            .date-introduction-off-campus .date-introduction-button{ margin: 10px 0 0;}

   .date-introduction-button{ width: 100px; margin: 0; padding: 10px 8px; font-size: 1em;}
}


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

   .exhibition-pic-box-bg{ width: 100%; margin: 35px 0 0;}
      .exhibition-pic{ width: 100%; margin: 0 0 35px;}
         .exhibition-pic-box-pc{ display: flex; width: 100%; margin: 0;}
            .exhibition-pic-box-pc-title{ width: 180px; margin: 0;}
               .exhibition-pic-box-pc-title p, .exhibition-pic-box-pc-title h2{ width: 100%; margin: 0; padding:6px 10px; font-size: 2em;}
               .exhibition-pic-box-pc-title a{ bottom: 5px; width: 90%; margin: 10px 5%; font-size: 1em;}
            .exhibition-pic-box-pc-content{ width: calc(100% - 180px); margin: 0;}
         .exhibition-pic-box-ph{ display: none;}

      .exhibition-pic-box-item{ width: 20%; margin: 0;}
         .exhibition-pic-box-item-img{ height: 210px;}
         .exhibition-pic-box-item-text{ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 16px 12px;}
            .exhibition-pic-box-item-text h3{ width: 100%; margin: 0 0 12px; font-size: 16px; letter-spacing: 1px; -webkit-line-clamp: 6;}
            .exhibition-pic-box-item-text h6{ width: 100%; margin: 0; font-size: 15px;}


}

/* 桌面版面: 1441px 到最大樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1441px) {

   .index-top-box-bg{width: 100%; margin: 117px 0 0;}
      .index-top-box{ width: 100%; margin: 0;}
         .index-top-box-runimg{ width: calc(100% - 280px); margin: 0;}
            .index-top-box-runimg img{ width: 100%; margin: 0;}
         .index-top-box-right{ width: 280px; margin: 0;}
            .index-top-box-right-news{ width: 100%; margin: 0 0 20px; padding: 18px 10px 0;}
               .index-top-box-right-news h3{ width: 100%; margin: 0; padding: 0 10px; font-size: 1.25em;}
               .index-top-box-right-news hr{ width: 120px; height: 1px; margin: 15px 0 0;}
               .index-top-box-right-news-content{ width: 100%; margin: 0;}
                  .index-top-box-right-news-content a{ width: 100%; margin: 0; padding: 20px 12px;}
                     .index-top-box-right-news-content a h6{ width: 100%; margin: 0 0 10px; font-size: 14px;}
                     .index-top-box-right-news-content a p{ width: 100%; margin: 0; font-size: 0.9em;}
               .index-top-box-right-news-button{ width: 100%; margin: 25px 0 0; font-size: 1em;}
                  .index-top-box-right-news-button i{ margin-left: 5px !important;}
                  .index-top-box-right-news-button:hover > i{ margin-left: 9px;}
            .index-top-box-right-ytvideo{ width: 100%; margin: 25px 0 0;}
               .owl-carousel-ytvideo iframe{ width: 100%; height: 30vh; margin: 0;}   

   .exhibition-pic-box-bg{ width: 100%; margin: 50px 0 0;}
      .exhibition-pic{ width: 100%; margin: 0 0 50px;}
         .exhibition-pic-box-pc{ width: 100%; margin: 0;}
            .exhibition-pic-box-pc-title{ width: 220px; margin: 0;}
               .exhibition-pic-box-pc-title p, .exhibition-pic-box-pc-title h2{ width: 100%; margin: 0; padding:8px 10px; font-size: 2.25em;}
               .exhibition-pic-box-pc-title a{ bottom: 5px; width: 90%; margin: 12px 5%; font-size: 1em;}
            .exhibition-pic-box-pc-content{ width: calc(100% - 220px); margin: 0;}

      .exhibition-pic-box-item{ width: 20%; margin: 0;}
         .exhibition-pic-box-item-img{ height: 275px;}
         .exhibition-pic-box-item-text{ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 25px 18px;}
            .exhibition-pic-box-item-text h3{ width: 100%; margin: 0 0 25px; font-size: 16px; letter-spacing: 1px; -webkit-line-clamp: 7;}
            .exhibition-pic-box-item-text h6{ width: 100%; margin: 0; font-size: 15px;}

   .date-introduction-bg{ width: 100%; margin: 0 0 100px;}
      .date-introduction{ width: 100%; margin: 0; padding: 0;}
         .date-introduction-on-campus{ width: 23%; margin: 0; padding: 18px;}
            .date-introduction-on-campus h2{ width: 100%; margin: 0; font-size: 2em;}
            .date-introduction-on-campus p{ width: 100%; margin: 20px 0; font-size: 1.05em;}
            .date-introduction-on-campus-detailed{ width: 100%; margin: 0 0 60px;}
               .date-introduction-on-campus-detailed-box{ width: 100%; margin: 6px 0; font-size: 15px;}
                  .date-introduction-on-campus-detailed-box span{ width: 50px; margin: 0;}
                  .date-introduction-on-campus-detailed-box h3{ width: calc(100% - 50px); margin: 0;}
            .date-introduction-on-campus .date-introduction-button{ bottom: 20px; left: calc(50% - 60px);}
         .date-introduction-date-table{ width: 23%; margin: 0;}
         .date-introduction-off-campus{ width: 50%; margin: 0;}
            .date-introduction-off-campus-box{ width: 100%; margin: 0; padding: 20px 8px;}
               .date-introduction-off-campus-box-img{ width: 60px; margin: 0 8px 0 0;}
               .date-introduction-off-campus-box-text{ width: calc(100% - 68px); margin: 0;}
                  .date-introduction-off-campus-box-text h6{ width: 100%; margin: 0 0 8px; font-size: 14px;}
                  .date-introduction-off-campus-box-text h3{ width: 100%; margin: 0; font-size: 1em;}
            .date-introduction-off-campus .date-introduction-button{ margin: 10px 0 0;}

   .date-introduction-button{ width: 120px; margin: 0; padding: 12px 8px; font-size: 1.05em;}

}
@media only screen and (min-width: 1601px) {
   .max-width-style{width: 1600px; margin: auto calc(50% - 800px);}
      .index-top-box-runimg{ width: calc(100% - 300px); margin: 0;}
      .index-top-box-right{ width: 300px; margin: 0;}

}