@charset "utf-8";
/* CSS Document index */ :root {}
/*內頁共同元件*/
/*麵包屑調整*/
.breadcrumb {
  margin-top: 25px;
  color: #666;
  font-size: 90%;
  background-color: #EBEBEB;
  padding:5px 25px;
  letter-spacing: 2px;
  border-radius: 10px;
}
/*標題區*/
.inside-banner-area{
  position: relative;
  margin-top: 120px;
  padding-bottom: 17.5%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
.inside-title{
  position: absolute;
  bottom:30%;
  left: calc(50% - 750px);
  width: fit-content;
  padding:0 30px 0;
}
.inside-title .stitle{
  font-size: 325%;
  letter-spacing: 1rem;
  color:#FFF;
  text-shadow:4px 4px 7px rgba(0, 0, 0, .25) ;
  line-height: 150%;
}
.inside-title .stitle.short{
  font-size: 320%;
  letter-spacing: 0.25rem;
}
.inside-title .stitle.short.mlem-1{
  margin-left: -5rem;
}
.inside-title .e-stitle{
  font-size: 100%;
  color: #CACACA;
  text-align: right;
  text-shadow:2px 2px 3px rgba(0, 0, 0, .25) ;
}
/*內頁主資料區*/
.inside-content-area{
  padding: 10px 0 40px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: fixed;
}
/*頁數選擇器*/
.choose-btns .first, .choose-btns .end {
    width: 40px !important;
    line-height: 1.5;
    font-weight: 900;
    color: #FFF;
    font-size: 1rem;
    padding: 8px !important;
    background-color: #00A2B2;
    border-radius: 8px !important;
}
.choose-btns .active {
    background-color: #CAFFFF;
    border: 0;
    border-radius: 8px !important;
}
/*最新消息*/
.inside-content-area.news{
  background-image: url(../images/inside/bg_news-list.jpg);
}
.inside-news-line{
  display: flex;
  padding: 40px 0;
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: auto;
  background-image: url(../images/icon/bg_line-dark.png);
}
/*按鈕方式*/
.inside-news-line .photo-news{
  width: 100%;
  padding-bottom: 55.2%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid #FFFFFF50;
  box-shadow: 1px 1px 8px 0 #00000050;
  transition: all .5s;
}
.inside-news-line .photo-news:hover{
  background-size: 125% 125%;
}
/*圖片方式*/
.inside-news-line .photo{
  border: 1px solid #FFFFFF50;
  box-shadow: 1px 1px 8px 0 #00000050;
  transition: all .5s;
}
.inside-news-line .photo:hover{
  transform: scale(1.1);
}
.inside-news-line .content{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 25px;
}
.inside-news-group > .inside-news-line:nth-child(odd) > .content{
  border-left:6px solid #FFFF66 ;
}
.inside-news-group > .inside-news-line:nth-child(even) > .content{
  border-left:6px solid #99CCFF ;
}
.inside-news-line .content-title{
  font-size: 125%;
  padding:10px 0;
}
.inside-news-line .content-title a{
  color:#003399;
}
.inside-news-line .content-title a:hover{
  color:#0d6efd;
}
.inside-news-line .content-intro{
  font-size: 95%;
  padding:10px 20px;
  font-weight: 500;
}
.inside-news-line .content-footer{
  padding: 5px 40px 5px 20px;
  display: flex;
  justify-content: space-between;
} 
.inside-news-line .content-footer-date{
  font-size: 85%;
  font-weight: 500;
} 
.inside-news-line .content-footer-date i{
  margin-right: 0.25rem;
} 
.inside-news-line .content-footer-detail a{
  position: relative;
  color: #666666;
}
.inside-news-line .content-footer-detail a:hover{
  color: #0d6efd;

} 
.inside-news-line .content-footer-detail a:after{
    position: absolute;
    top: 10px;
    right: -15px;
    content: "";
    width: 12px;
    height: 12px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/icon/icon_orange-detail.svg);
}
/*最新消息內頁*/
.inside-content-area.news-content
{
  background-image: url(../images/inside/bg_news-content.jpg);
}
.news-content-title{
  margin-top:10px;
  padding: 0 15px;
  border-left: 5px solid #8ECB00;
  color:#212121;
  letter-spacing: 1px;
  font-size: 145%;
  line-height: 125%;
}
.news-content-box{
  margin:30px;
  background-color: #FFFFFF80;
  padding: 4% 5% 5%;
  border-radius: 54px;
  box-shadow: 3px 3px 8px 0 rgba(0,0,0,.35);
  line-height: 175%;
}
.news-content-box .date{
  text-align:right;
  font-size: 95%;
  font-weight: 500;
  padding-bottom: 10px;
  }
.news-content-box .date i{
  margin-right: 0.25rem;
  }
.news-content-box img{
    width: 100%;
    padding: 1%;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #FFF;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.5);
}
.back-btn{
  color:#FFF;
  font-weight: 600;
  font-size: 125%;
  letter-spacing: 2px;
  background-color: #00A2B2;
  width: 250px;
  transition: all .5s;
}
.back-btn:hover{
  color:#FFF;
  background-color: #348046;
}
/*計畫簡介*/
.about-content{
  padding: 10px;
  line-height: 175%;
}
.about-block{
  padding: 20px 0 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url(../images/inside/bg_about01.jpg);
}
.about-factor-box{
  margin: 10px;
  padding:15px;
  border-radius:0 27px 27px 27px ;
  border:1px solid #99CCFF;
  background-color: #FFFFFF;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, .35);
    background-size: 90px 90px;
    background-repeat: no-repeat;
    background-position: top left;
    height: 250px;
}
#af01{
    background-image: url(../images/inside/bg_factor-no01.png);
    }
#af02{
    background-image: url(../images/inside/bg_factor-no02.png);
    }
#af03{
    background-image: url(../images/inside/bg_factor-no03.png);
    }
#af04{
    background-image: url(../images/inside/bg_factor-no04.png);
    }
#af05{
    background-image: url(../images/inside/bg_factor-no05.png);
    }
#af06{
    background-image: url(../images/inside/bg_factor-no06.png);
    }
.about-factor-box .photo{
    background-size: auto 95%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 46.875%;
}

#af05.about-factor-box, #af06.about-factor-box{
  display: flex;
}
#af05.about-factor-box .content{
  flex:0 0 67.5%;
}
#af06.about-factor-box .content{
  flex:0 0 75%;
}

#af01.about-factor-box .photo{
    background-image: url(../images/inside/photo_factor01.png);
}
#af02.about-factor-box .photo{
    background-image: url(../images/inside/photo_factor02.png);
}
#af03.about-factor-box .photo{
    background-image: url(../images/inside/photo_factor03.png);
}
#af04.about-factor-box .photo{
    background-image: url(../images/inside/photo_factor04.png);
}
#af05.about-factor-box .photo{
  flex:0 0 32.5%;
    background-position: center center;
    background-size: 80%;
    padding: 0;
    background-image: url(../images/inside/photo_factor05.png);
}
#af06.about-factor-box .photo{
  flex:0 0 25%;
    background-position: center center;
    background-size: 80%;
    padding: 0;
    padding-bottom: auto;
    background-image: url(../images/inside/photo_factor06.png);
}
.about-document-box{
  padding:20px;
  border:6px solid #99CCFF90;
  border-radius: 27px;
  line-height: 175%;
  background-color: #FFF;
}
.about-document-box .stitle{
  font-size: 110%;
  color:#003399;
  line-height: 200%;
}
.about-document-box .stitle:before{
    content: "■";
    color: #66CC00;
    font-size: 125%;
    margin-right: 0.25rem;
}
.about-document-line > ol > li:nth-child(odd){
  background-color: #E5E5E590;
}
.about-document-box.notice{
    font-size: 110%;
    border-color: #FFCC6690;
    padding-top: 10%;
    height: 184px;
    line-height: 200%;
}
.about-document-box.notice span{
  color:#003399;
}
.document-photo{
  margin-top: -125px;
}
.about-application-box{
  margin: 10px;
  padding:15px;
  border-radius:27px ;
  border:1px solid #99CCFF;
  background-color: #FFFFFF;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, .35);
    height: 250px;
}
.about-application-box .photo{
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 30%;
}
#ad01.about-application-box .photo{
    background-image: url(../images/inside/photo_application01.png);
}
#ad02.about-application-box .photo{
    background-image: url(../images/inside/photo_application02.png);
}
#ad03.about-application-box .photo{
    background-image: url(../images/inside/photo_application03.png);
}
.about-document-line .notice{
  color:#000000;
  font-size: 115%;
  letter-spacing: 2px;
  line-height: 150%;
  margin:15px 0;
}
/*歷年獲補助名單*/
.inside-content-area.about-award{
  background-image: url(../images/inside/bg_news-list.jpg);
}
/*下載專區*/
.inside-content-area.download{
  background-image: url(../images/inside/bg_download.jpg);
}
.download-menu-box{
    position: sticky;
    margin:-50px 30px 25px;
    padding: 60px 25px 35px;
    border-radius: 32px;
    box-shadow: 0 0 15px 0 #00000030;
    background-color: #FFFFFF;
    background-image: url(../images/inside/bg_download-menu.png);
    background-repeat: no-repeat;
    background-position: 70% 25px;
    background-size: 75%;
}
.btn-smenu-download{
  color: #007E88;
  font-size: 125%;
  font-weight: 600;
  margin: 10px 0;
  text-align: center;
  letter-spacing: 0.5rem;
  width: 100%;
  padding:15px;
  border: 0;
  background-color: #FFF;
  border-bottom: 1px solid #CCCCCC;
  background-image: url(../images/icon/icon-download-corner.png);
  background-repeat: no-repeat;
  background-position: 95% 25px;
  background-size: auto;
  transition: all .5s;
}
.btn-smenu-download.active, .btn-smenu-download:hover{
  background-color: #F5F5F5;
  border-left: 6px solid #00A2B2;
}
#ladder-switch button{
  color:#999999;
  font-size: 110%;
  background-color:#FFFFFF ;
  border:1px solid #CCCCCC!important;
  border-radius: 0;
  letter-spacing: 0.25rem;
  padding:10px 25px!important;
  background-image: url(../images/icon/icon-download-switch.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto;
  transition: all .5s;
}
#ladder-switch button:hover, #ladder-switch button.active{
  transform: scaleY(1.1) translateY(-2px);
  font-size: 110%;
  background-color:#009999 ;
  color:#FFF;
  border:1px solid #CCCCCC!important;
  background-image: url(../images/icon/icon-download-switch_active.png);
}
#ladder-switch .nav-link:before{
  display: none;
}
.download-line-title{
  display: flex;
  padding:5px 5%;
  border-bottom: 2px solid #999999;
}
.download-line-title div{
  display: flex;
  align-items: center;
}
.download-line-title .stitle{
  flex:0 0 80%;

}
.download-line-title .photo{
  flex:0 0 20%;

}
.download-line{
  display: flex;
  padding:10px 5%;
  border-bottom: 1px solid #DEE2E6;
}
.download-line:nth-child(odd){
  background-color: #EFEFEF99;
}
.download-line:nth-child(even){
  background-color: #FFFFFF99;
}
.download-line div{
  display: flex;
  align-items: center;
}
.download-line .stitle{
  flex:0 1 80%;

}
.download-line .photo{
  flex:1 0 20%;
  padding: 0 15px;

}
.download-line .photo img{
  width:45px;
  margin:0 5px;
  transition: all .5s;
}
.download-line .photo img:hover{
  transform: scale(1.2);
}
.download-stitle{
    font-size: 110%;
    color: #003399;
    line-height: 200%;
}
.download-stitle:before{
    content: "■";
    color: #66CC00;
    font-size: 125%;
    margin-right: 0.25rem;
}
/*成果彙編*/
.inside-content-area.result
{
  background-image: url(../images/inside/bg_result.jpg);
}
/*網站導覽*/
.banner-area.sitemap {
  background-image: url(../images/construction/bg_case-content.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 60vw auto;
}
.sitemap * > :before {
  content: attr(data-site);
  position: absolute;
  margin-left: -25px
}
.sitemap2 * > :before {
  content: attr(data-site2);
  position: absolute;
  margin-left: -35px
}
.sitemap2 .add {
  padding-left: 70px !important
}
.sitemap2 .add:before {
  margin-left: -46px !important
}
.sitemap3 * > :before {
  content: attr(data-site3);
  position: absolute;
  margin-left: -58px;
}
.sitemap3 {
  padding-left: 55px !important;
  font-weight: 500;
  font-size: 95%;
}
.sitemap3 :before {
  margin-left: -54px !important;
  font-weight: 400;
}
.sitemap a {
  padding-left: 20px
}
.sitemap3 a {
  color: #999
}
.sitemap .box {
  display: inline-block;
  vertical-align: top;
  width: calc(100% / 2 - 50px);
  margin-right: 30px;
  margin-bottom: 30px;
  background: rgba(230, 230, 230, 0.5);
  border-radius: 15px;
  padding-bottom: 15px;
}
.sitemap .box > a, .sitemap .box > span {
  display: block;
  background-color: #348046;
  line-height: 1.5;
  margin-bottom: 15px;
  text-decoration: none;
  padding: 10px 20px 10px 50px;
  color: #DDD;
  border-radius: 15px 15px 0 0;
}
.sitemap .box a {
  color: #FFF;
}
.sitemap .box a:hover {
  color: #f6a101;
}
.sitemap .box > ul li a, .sitemap .box > ul li span {
  padding-left: 60px;
  margin-bottom: 5px;
  color: #007489;
  text-decoration: none;
  display: flex;
  padding-right: 10px
}
.sitemap .box > ul li span {
  color: #000;
}
.sitemap .box > ul li a:hover {
  color: #f6a101;
}
.sitemap .box > ul li ul a {
  padding-left: 90px;
  padding-right: 10px
}
.list_style * > :before {
  content: attr(data-list);
  position: absolute;
  margin-left: -40px
}
.low_style * > :before {
  content: attr(data-low);
  position: absolute;
  margin-left: -80px
}
.listnone {
  list-style: none;
}
/*1600******************************************************************************************************************************************************/
@media only screen and (max-width: 1600px) {
  /*內頁標題*/
  .inside-title{
  bottom:25%;
  left: 25px;
  padding:0;
}
.inside-title .stitle.short.mlem-1{
  margin-left: -10px;
}
}
/*1400-992**************************************************************************************************************************************************/
@media only screen and (max-width: 1399.98px) {}
@media only screen and (max-width: 1199.98px) {
.document-photo {
    margin-top: -30px;
}
.about-document-box.notice {
    padding-top: 5%;
}
#af05.about-factor-box, #af06.about-factor-box {
  flex-direction: column;
    height: 370px;
}
#af05.about-factor-box .photo, #af06.about-factor-box .photo {
background-size: auto 95%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 20%;
}
/*下載專區*/
.download-menu-box {
    position: sticky;
    margin: -50px 10px 10px;
    padding: 50px 15px 15px;
    border-radius: 20px;
    background-position: 70% 25px;
    background-size: 75%;
}
.btn-smenu-download {
    font-size: 125%;
    margin: 5px 0;
    text-align: center;
    letter-spacing: 0.5rem;
    padding: 15px;
}
}
@media only screen and (max-width: 991.98px) {
/*內頁標題*/
.inside-banner-area {
    margin-top: 85px;
    padding-bottom: 20%;
    background-position: left center;
}
.inside-title .stitle {
    font-size: 225%;
    letter-spacing: 0.5rem;
    color: #FFF;
    text-shadow: 4px 4px 7px rgba(0, 0, 0, .25);
    line-height: 150%;
}
.inside-title .stitle.short {
    font-size: 220%;
    letter-spacing: 0.125rem;
}
/*計畫介紹*/
.about-factor-box{
  height: auto!important;
  min-height: 252px;
}
.about-factor-box .photo{
  flex:auto!important;
  background-size: auto 100px!important;
  height: 100px!important;
  padding: 0!important;
}
  /*網站導覽*/
  .sitemap .box {
    display: inline-block;
    vertical-align: top;
    width: calc(100% / 2 - 20px);
    margin-right: 10px;
    margin-bottom: 30px;
    border-radius: 15px;
    padding-bottom: 20px;
  }
}
/*768******************************************************************************************************************************************************/
@media only screen and (max-width: 767.98px) {

  .inside-banner-area {
    margin-top: 85px;
    padding-bottom: 22.5%;
}
.inside-title .stitle {
    font-size: 200%;
    letter-spacing: 0.5rem;
    color: #FFF;
    text-shadow: 4px 4px 7px rgba(0, 0, 0, .25);
    line-height: 150%;
}
.inside-title .stitle.short {
    font-size: 195%;
    letter-spacing: 0.125rem;
    color: #FFF;
    text-shadow: 4px 4px 7px rgba(0, 0, 0, .25);
    line-height: 150%;
}
.inside-content-area{
  background-size: cover;
}
/*最新消息內頁*/
.news-content-title{
  font-size: 120%;
  line-height: 150%;
}
.news-content-box {
  font-size: 90%;
    margin: 15px 0;
    padding: 25px;
    border-radius: 20px;
    line-height: 175%;
    background-color: transparent;
}
.news-content-box img {
    width: 100%;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #FFF;
    box-shadow: 2px 2px 10px 0 rgba(0,0,0,.2);
}
/*檔案下載*/
.download-menu-box {
  margin-top:10px;
    position: sticky;
    background-size: auto;
}
  /*網站導覽*/
  .sitemap {
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  .sitemap .box {
    width: 100%;
  }
  .construction-main-photo.sitemap {
    padding: 0 5%;
  }
}
/* 專管系統 */
.home-btn {
    font-size: 1em /*15p x*/;
    color: #FFF;
    background-color: #348046;
}
.home-btn:hover,
.home-btn:focus,
.home-btn.focus,
.home-btn:active,
.home-btn.active,
.open > .dropdown-toggle.btn-warning {
    color: #FFF;
    background-color: #00A2B2;
}
/*******************************************************************************************************************************************************


行動版面開始


********************************************************************************************************************************************************/
/* 桌面版面: 559px 最大*/
@media only screen and (max-width: 575.98px) {
  /*麵包屑調整*/
.breadcrumb {
  font-size: 85%;
  letter-spacing: 0;
  border-radius: 0;
  font-weight: 500;
}
    .inside-banner-area {
    padding-bottom: 35%;
}
.inside-title {
  left: 15px;
    bottom: 25%;
}
.inside-title .stitle {
    font-size: 150%;
    letter-spacing: 0.125rem;
    color: #FFF;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .25);
    line-height: 125%;
}
.inside-title .stitle.short {
    font-size: 150%;
    letter-spacing: 1px;
}
.inside-title .stitle.short.mlem-1 {
    font-size: 145%;
    letter-spacing: 0;
}
.inside-title .e-stitle {
    font-size: 75%;
    color: #CACACA;
    text-align: right;
    text-shadow: none;
    line-height: 125%;
}
/*最新消息*/
.inside-news-line .content-title{
  font-size: 110%;
  padding:10px 0;
}
.inside-news-line .content-intro {
    font-size: 90%;
    padding: 5px;
    font-weight: 500;
}
.inside-news-line .content-footer {
    padding: 5px 20px 5px 5px;
}
/*最新消息內頁*/
.news-content-box {
    margin: 15px 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
/*計畫簡介*/
.about-content,
.about-factor-box .content,
.about-document-box .about-document-line,
.about-application-box .content{
  font-size: 90%;
  }
  .about-factor-box{
    min-height: auto;
  }
.about-document-box {
    padding: 15px 10px;
}
.about-document-box.notice{
  margin:30px 10px;
  height: auto;
}
.about-application-box{
  height: auto;
}
/*下載專區*/
.download-menu-box {
    margin-top: 0;
    background-image: none;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}
.download-line-title {
    padding: 5px 0;
}
.btn-smenu-download {
    flex: 1 0 45%;
    font-size: 110%;
    margin: 5px;
    text-align: center;
    letter-spacing: 0.5rem;
    padding: 10px;
    border: 1px solid #CCC;
    opacity: .6;
}
.btn-smenu-download.active {
    opacity: 1;
}
#pills-tabContent{
    padding: 0 15px;
    }
#ladder-switch button {
    width: 100%;
    margin: 0 15px;
    font-size: 100%;
    background-color: #FFFFFF;
    letter-spacing: 0;
    padding: 10px 25px !important;
    transition: all .5s;
}
.download-line-title {
    font-size: 80%;
}
.download-line {
  padding: 10px 0 10px 10px;
}
.download-line .stitle {
    font-size: 90%;
}
.download-line .photo img {
    width: 35px;
    margin: 0 1px;;
}
}