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

/*----------------------------------------------------------------------*/
/*共用區塊*/
.IndexBlock { margin:auto; position:relative; letter-spacing:0.05em;}

/*首頁標題*/
.indexTitle h3{ font-size:180%; font-weight:normal; letter-spacing:.06em; color:#333;}

#IndexCenter{ overflow:hidden;}

/*----------------------------------------------------------------------*/
/*新聞發佈*/
.IndexNews .indexTitle > div{
    display:inline-block; 
    background-color:#dbc28c; 
    background-image:url(../images/bg_img2.png);
    padding:1.5rem 5.5rem 1.5rem 2rem;
}
.IndexNews .indexTitle h3{ position:relative; }
.IndexNews .indexTitle h3::after{ content:''; display:block; width:1px; height:100px; background-color:#333; 
    position:absolute; top:-75px; right:-42px; z-index:100;
}

.IndexNews .shape1{position:relative; top:0; right:-60px; }
.shape1::before{ width:7px; height:7px; top:13px; right:13px;}

.IndexNews .newsBlock::after{ content:''; display:block; clear:both;}
.IndexNews .newsBlock{ position:relative; width:100%; margin-bottom:2rem;}
.IndexNews .date{ font-style:italic; color:#000; }
.IndexNews .date i{ margin-right:5px;}

/*左.右最新消息*/
.IndexNews .block_half{  /*background:url(../images/bg_img1.jpg) no-repeat;*/ background-color:#f5f5f5; }
.IndexNews .block_half > div{ width:40%;  overflow:hidden;}
.IndexNews .block_half .item .date{ margin-bottom:10px; font-size:87.5%;}
.IndexNews .block_half .item .date i{ color:#999;}
.IndexNews .block_half .item{ padding:4rem 2rem; width:100%; box-sizing:border-box;}
.IndexNews .block_half .item .title{margin-bottom:20px;}
.IndexNews .block_half .item .title a{
	display:block;
    letter-spacing: 0.04em;
	font-style:italic;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 64px;
}

.IndexNews .block_half .item{ border-bottom:1px solid #ddd;}
.IndexNews .block_half .item:last-child{ border:none;}
.IndexNews .block_half .item a.btn{ color:#999; font-style:italic;}
.IndexNews .block_half .item a.btn i{ margin-left:10px;}
.IndexNews .block_half .item a.btn:hover{ color:#333; padding-left:8px;}
.IndexNews .block_half .item .title a, .IndexNews .block_half .item a.btn{
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.IndexNews .news_left{ background-position: left bottom; }
.IndexNews .news_right{background-position: right top; }

/*中間最新消息*/
.IndexNews .news_mid{ position:relative; z-index:10000; letter-spacing:0.05em;}
.IndexNews .news_mid > div{ position:relative;}
.IndexNews .news_mid .news_line{ width:103%; height:103%; position:absolute; top:-15px; left:-15px; z-index:99; 
	 border-top:1px solid #000;  border-left:1px solid #000;
}
.IndexNews .news_mid .news_line span{ padding:2px 10px; position:absolute; top:-23px; left:-20px; background-color:#f5f5f5; 
    font-family:'Didact Gothic', sans-serif; font-weight:bold; color:#000; font-size:150%;
}

.IndexNews .news_mid .news_hotbox{ width:100%; position:relative; }
.IndexNews .news_mid .news_hotbox > div{}
.IndexNews .news_mid .news_hotbox .img{
	padding-bottom: 75.47%;
	background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
	z-index:100;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.IndexNews .news_mid .news_hotbox .img a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -10000px;
}
.IndexNews .news_mid .news_hotbox .date{ position:absolute; bottom:35px; right:10px; z-index:999; background-color:#ffffff; padding:10px 30px 10px 20px; font-size:112.5%;
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.IndexNews .news_mid .news_hotbox:hover .date{ bottom:30px; right:15px;}
.IndexNews .news_mid .news_hotbox .title{ 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.IndexNews .news_mid .news_hotbox .title { position:absolute; bottom:-55px; left:20px; z-index:998; padding:30px 25px 25px 25px; 
	background-color:#e7c782; box-sizing:border-box; width:85%; font-size:137.5%; height:110px; }
.IndexNews  .news_mid .news_hotbox .title a{
	color:#000;
    display:block;
	font-style:italic;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 56px;
}
.IndexNews .news_mid .news_hotbox .title a:hover{ color:#333;}
.IndexNews .news_mid .news_hotbox:hover .title{ bottom:-50px; left:25px;}

.IndexNews .btn{ text-align:center; }
.IndexNews .btn a{ display:inline-block; line-height:60px; width:230px; height:60px; background-color:#fff; 
    border:1px solid #cbab68; color:#cbab68; position:relative; font-weight:900; 
}
.IndexNews .btn a span{ position:absolute; top:8px; right:-23px; display:block; width:42px; height:42px; 
    background-color:#cbab68; border:1px solid #cbab68;   
    transform:rotate(-45deg); 
    -webkit-transform:rotate(-45deg); 
    -moz-transform:rotate(-45deg);
}
.IndexNews .btn span i{ color:#fff; position:relative; top:-8px; left:0; font-size:106.3%; font-weight:300;
    transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    -moz-transform:rotate(45deg);
}
.IndexNews .btn a, .IndexNews .btn a span, .IndexNews .btn span i{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.IndexNews .btn a:hover{ background-color:#cbab68; color:#fff;}
.IndexNews .btn a:hover span{ background-color:#333; border:1px solid #333;}
.IndexNews .btn a:hover span i{ color:#fff; top:-8px; left:0;
    transform:rotate(405deg); 
    -webkit-transform:rotate(405deg); 
    -moz-transform:rotate(405deg);
}

/* 新聞發布裡面的影片media */
.IndexNews .show_mediaPopup:hover{ cursor: pointer; }
.IndexNews .show_mediaPopup .img{ position: relative; }
.IndexNews .show_mediaPopup .img::before{ content: ""; display: block; width: 60px; height: 60px; 
    background-image: url(../images/icon_play.png); background-repeat: no-repeat; z-index: 99;
    position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px;
    pointer-events: none;
}
.IndexNews .show_mediaPopup .img > a::before{ content: ""; display: block; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.IndexNews .show_mediaPopup .img > a:hover::before{ content: ""; display: block; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.3);
}

/* media影音區 (popup) */
.mediaPopupBox.popupBox > div{ background-color: transparent; box-shadow: none; }
.mediaPopupBox .close{ background-color: #fff; border: 1px solid #fff; color: #232222;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.mediaPopupBox .close:hover{ color: #232222; background-color: #f5f5f5; background-color: #f0f0f0;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.mediaPopupBox.popupBox .icon-close::before{ font-weight: 200; }
.mediaPopupBox .media_box{ width: 100%; height: 100%; background-color: #000; }
.mediaPopupBox .media_box video{ width: 100%; height: 100%; display: block; }

/*----------------------------------------------------------------------*/
/*產業服務*/
.IndexConsultingServices { 
	background-image:url(../images/bg_index_consulting_services.jpg); 
	background-position:center center; background-size:cover; color:#fff; 
	}
.IndexConsultingServices > div { padding:9vh 4vw 10vh 0; }
.IndexConsultingServices .cont { 
	padding-top:30px; padding-bottom:50px; padding-left:4vw; box-sizing:border-box; 
	background: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100%);
	transition-delay:0.9s; transform:translateX(-60%); opacity:0;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
	}
.IndexConsultingServices .title { 
	display:inline-block; border-bottom:8px solid #e7c782; margin-bottom:20px; 
	line-height:180%; text-shadow:1px 1px 8px rgba(0,0,0,0.6);
	}
.IndexConsultingServices .desc { line-height:180%; text-shadow:1px 1px 3px #000; }
.IndexConsultingServices .btns { padding-top:20px; }
.IndexConsultingServices .btns a { 
	display:inline-block; border:1px solid #fff; margin:10px 80px 10px 0; padding:0 60px; 
	background-color:rgba(0,0,0,0.2); position:relative; 
	line-height:60px; color:#fff; font-size:20px; font-weight:bold;
	}
.IndexConsultingServices .btns a:last-child { margin-right:0; }
.IndexConsultingServices .btns a span { 
	display:block; position:absolute; top:8px; right:-23px; width:42px; height:42px; 
    background-color:#fff; border:1px solid #fff;   
    -webkit-transform:rotate(-45deg); 
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg); 
	}
.IndexConsultingServices .btns a span::after { 
	content:"\f178"; display:block; position:absolute; top:0; left:0; width:42px; 
	font-family:'Font Awesome 5 Light'; text-align:center; color:#000; font-weight:300; line-height:42px;
    -webkit-transform:rotate(45deg); 
	-moz-transform:rotate(45deg);
	transform:rotate(45deg); 
	}
.IndexConsultingServices .btns a, .IndexConsultingServices .btns a span, .IndexConsultingServices .btns a span::after {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
	}
.IndexConsultingServices .btns a:hover { border:1px solid #e7c782; background-color:#e7c782; color:#000; }
.IndexConsultingServices .btns a:hover span { background-color:#000; border:1px solid #000; }
.IndexConsultingServices .btns a:hover span::after { 
	color:#fff; 
	-webkit-transform: rotate(405deg);
	-moz-transform: rotate(405deg);
	transform: rotate(405deg);
	}

/*動畫效果*/
.IndexConsultingServices.active .cont { transform:translateX(0); opacity:1; }


/*----------------------------------------------------------------------*/
/*關於我們*/

/*介紹區塊*/
.IndexAbout { width:100vw; margin-bottom:2rem; }
.IndexAbout::after{ content:''; display:block; clear:both; }
.IndexAbout .intro-box{ width:100%; background-color:#f5f5f5; display:table;}
.IndexAbout .intro-box > div{ box-sizing:border-box; margin:auto; display:table-cell; vertical-align:middle; 
     text-align:center; position:relative; padding:5rem 6rem 4rem 6rem;
}
.IndexAbout .intro-box > div::after{ content:''; display:block; width:1px; height:110px; background-color:#666; 
    position:absolute;top:-55px; left:50%;   
}
.IndexAbout .indexTitle{ margin-bottom:3rem;}
.IndexAbout .intro-box .desc{ line-height:200%; font-size:106.3%; margin-bottom:20px; }
.intro-box .about-point{ padding:30px 1.5rem; }
.intro-box .about-point span{ color:#bbb; font-size:200%;}
.intro-box .about-point .strong{ font-family:'Arial', sans-serif; font-weight:bolder; font-style:italic; font-size:300%; padding-right:10px;}
.intro-box .about-point .and{ padding-left:10px; padding-right:10px; font-size:150%; }

/*實驗室共用*/
.IndexAbout .col_half{ width:100%;}
.IndexAbout h4.title, .IndexAbout .tt_en{ font-family:'Century Gothic', 'Arial', sans-serif;}
.IndexAbout h4.title{ font-weight:bold; color:#444; font-size:143.8%;}
.IndexAbout .tt_cn{ font-size:118.5%; }
.IndexAbout .item{ position:relative; overflow:hidden; }
.IndexAbout .item > div{ display:table; width:100%; height:400px; padding:3rem 4rem;  transform:scale(1.01); box-sizing:border-box;
   background-size:cover; background-position: center right; background-repeat:no-repeat; 
}
.IndexAbout .item a{ display:table-cell; vertical-align:middle; width:100%; height:100%; position:relative; z-index:100; }
.IndexAbout .item a > *{ margin-bottom:5px; line-height:1.6;}
.IndexAbout .item img{ width:auto; height:100%; position:absolute;bottom:0; right:0; opacity:0; }
.IndexAbout .item:hover img{ opacity:1; }
.IndexAbout h4.title, .IndexAbout .tt_en, .IndexAbout .item a > *, .IndexAbout .item img, .IndexAbout .item > div{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.IndexAbout .col_half::after { content:''; display:block; clear:both; }
.IndexAbout .col_half .item{ width:50%; float:left; }
.IndexAbout .col_half .NCHC-box{ width:60%; }
.IndexAbout .col_half .TSRI-box{ width:40%; }

/* 一排4個排列 */
.IndexAbout .aboutBox{ display: flex; flex-wrap: wrap; padding-bottom: 3.125rem; }
.IndexAbout .aboutBox .item{ flex: 0 1 auto; }

/* 共用樣式設定 */
.IndexAbout .NCREE-box > div::before, .IndexAbout .NCHC-box > div::before, 
.IndexAbout .TIRI-box > div::before, .IndexAbout .TORI-box > div::before, 
.IndexAbout .NSPO-box > div::before{
    content:''; width:100%; height:100%; position:absolute; top:0; left:0; opacity:1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.IndexAbout .NCREE-box:hover > div::before, .IndexAbout .NCHC-box:hover > div::before, 
.IndexAbout .TIRI-box:hover > div::before, .IndexAbout .TORI-box:hover > div::before,
.IndexAbout .NSPO-box:hover > div::before, .IndexAbout .NLAC-box:hover > div::before,
.IndexAbout .TSRI-box:hover > div::before, .IndexAbout .STPI-box:hover > div::before{
    opacity:0;
}

/*NLAC國家實驗動物中心*/
.IndexAbout .NLAC-box{ background-color:#f0efe9; }
.IndexAbout .NLAC-box a > *{ color:#ffffff; }

/*NCREE國家地震工程研究中心*/
.IndexAbout .NCREE-box{ background-color:#9f363b; }
/*.IndexAbout .NCREE-box > div::before{ background-color:#9f363b; }*/
.IndexAbout .NCREE-box a > *{ color:#ffffff; }

/*NSPO國家太空中心*/
.IndexAbout .NSPO-box{ background-color:#cbdbe3;}
/*.IndexAbout .NSPO-box > div::before{ background-color:#cbdbe3; }*/
.IndexAbout .NSPO-box a > *{ color:#fff; }

/*NCHC國家高速網路與計算中心*/
.IndexAbout .NCHC-box{ background-color:#666;}
/*.IndexAbout .NCHC-box > div::before{ background-color:#888; }*/
.IndexAbout .NCHC-box a > *{ color:#eee; }

/*TSRI台灣半導體研究中心*/s
.IndexAbout .TSRI-box{ background-color:#6a6d73;}
.IndexAbout .TSRI-box a > *{ color:#fff; }

/*TIRI台灣儀器科技研究中心*/
.IndexAbout .TIRI-box{ background-color:#e6e3d3; }
/*.IndexAbout .TIRI-box > div::before{ background-color:#e6e3d3; }*/
.IndexAbout .TIRI-box a > *{ color:#ffffff; }

/*STPI科技政策研究與資訊中心*/
.IndexAbout .STPI-box{ background-color:#595959; }
.IndexAbout .STPI-box a > *{ color:#ffffff; }

/*TORI台灣海洋科技研究中心*/
.IndexAbout .TORI-box{ background-color:#6089ac; }
.IndexAbout .TORI-box a > *{ color:#ffffff; }

/*----------------------------------------------------------------------*/
/*研究發展*/
.IndexResearch{ background-color:#fff; position:relative; padding-bottom:2rem;}
.IndexResearch > div{ max-width:1600px;padding:1.5rem; margin:auto; box-sizing:border-box; text-align:center;}
.IndexResearch > div::after{ content:''; display:block; width:1px; height:100px; background-color:#333; 
    position:absolute; top:-5px; right:50%; margin-right:-1px; z-index:999;
}
.IndexResearch .shape1{ position:absolute; top:-35px; right:50%; z-index:998;}
.IndexResearch .shape1::after{ background-color:#cbab68; width:50px; height:50px; }
.IndexResearch .shape1::before{ top:20px; right:20px; width:10px; height:10px;}

.IndexResearch .indexTitle{ position:relative; display:inline-block; margin-top:3rem; margin-bottom:3rem; background-image:url(../images/bg_img1.jpg);
    padding:2rem 3rem;
}

/*研究發展共用區塊*/
.researchBlock{ overflow:hidden; width:100%; margin-top:2rem; margin-bottom:3rem;}
.researchBlock .item{ width:50%; height:320px; float:left; overflow:hidden;}
.researchBlock .item > div{ width:50%; height:100%; box-sizing:border-box; }
.researchBlock .item:nth-child(1) > div, .researchBlock .item:nth-child(2) > div{ float:left;}
.researchBlock .item:nth-child(3) > div, .researchBlock .item:nth-child(4) > div{ float:right;}

.researchBlock .img{ background-size:cover; background-position:center center; position:relative; 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.researchBlock .img:hover{transform:scale(1.02); }
.researchBlock .img::after{content:''; display:block; position:absolute; top:50%; right:-1px; 
    margin-top:-15px; z-index:99;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 15px 0;
    border-color: transparent #f0f0f0 transparent transparent;
}
.researchBlock .img a{ display:block; width:100%; height:100%; }

.researchBlock .cont { background-color:#f0f0f0; padding:3.5rem 1.5rem; position:relative;}
.researchBlock .cont::before{ 
	content:'00'; color:#e9e9e9; font-size:650%; position:absolute; 
    top:20px; right:30px; font-family:'Times New Roman', 'sans-serif'; font-style:italic; 
}
.researchBlock .title { display:block; font-size:1.375em; line-height:42px; position:relative; }
.researchBlock .title .icon { display:inline-block; margin-right:5px; vertical-align:middle; }
.researchBlock .title .icon img { max-width:42px;  max-height:42px; }
.researchBlock .desc {
    position:relative;
    display:block;
    z-index:99;    
    color:#333;
    letter-spacing:0.03em;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-height: 140px;
    font-size: 1.188em;
}

.researchBlock .earth-box .cont::before{ content:'01';}
.researchBlock .earth-box .img{ background-color:#000; }

.researchBlock .commu-box .cont::before{ content:'02';}
.researchBlock .commu-box .img{ background-color:#6a5444; }

.researchBlock .treatment-box .cont::before{ content:'03';}
.researchBlock .treatment-box .img{ background-color:#2c465c; }
.researchBlock .treatment-box .img::after, .researchBlock .policy-box .img::after{ 
    left:0; right:inherit; margin-left:-1px; border-width: 15px 0 15px 20px; 
    border-color:transparent transparent transparent #f0f0f0;
}

.researchBlock .policy-box .cont::before{ content:'04'; }
.researchBlock .policy-box .img{ background-color:#8f8f8f; }