* { padding: 0; margin: 0; box-sizing: border-box; /* font-family: "Noto Sans TC", "Sans-serif"; */ }
html, body { scroll-behavior: smooth; scroll-snap-type: y proximity; /* a *//* y mandatory */ }
a { text-decoration: none; }
hr { height: 2px; background-color: #333; }
img { width:100%; height: auto;}
i { padding-right: 10px;}
ul, ol, li { list-style-type:none; }
p { line-height:1.5em; text-align: justify; padding-block:5px; }

.row { display: flex; flex-wrap: wrap; flex-direction: row; }

.f-x-center { justify-content: center; }
.f-x-between { justify-content: space-between;}
.f-y-center { align-items: center; }
.f-y-baseline { align-items: baseline; }


/* ==========================  header  ============================================== */

#header { position: fixed; left:0; top:0; z-index: 9999; 
    width:100%; height:80px; background-color: rgba(0, 0, 0, 0.7); padding-inline:20px; }
    img#logo { width: 70px; height: auto; }
    ul#nav { }	
	ul#nav li { border-right:1px solid #FFF; } /*與中文版不同*/
	ul#nav li:nth-child(7) { border-right:none; } /*與中文版不同*/
    ul#nav li a { color: #FFF; padding-inline: 10px; transition: 600ms; }
    ul#nav li a:hover { font-size: 18px; font-weight: bold; }
    #english { position: absolute; bottom:-10px; right:120px; z-index:999; }   
    #english a { display: block; height: 20px; padding-inline: 10px;
        text-align: center; line-height: 20px; color:#FFF;
        background-color: #000; border:1px #FFF solid; border-radius: 20px;  }
    #english a:hover { background-color:#E1E1E1; color:#000; }
    #download { position: absolute; bottom:-20px; right:70px; z-index:888; }
    #download a { display:block; width:40px; height: 40px;  
        text-align:center; line-height: 40px; color:#FFF; 
        background-color:#000; border-radius:50%; border:1px #FFF solid; }
    #download a:hover { background-color:#E1E1E1; color:#000; }
    #download i#down { padding: 0; }

#header4Mobile { display: none; }
#nav4Mobile { display: none; }

 /* ==========================  section  ============================================== */

section { width: 90%; margin: auto; padding-top: 85px; padding-bottom:50px; /* min-height: 100vh; */
    scroll-snap-align: start; /* a */ }
section h1 { font-size: 32px; text-align: center; padding:15px; }
section h3 { padding-block:10px; }



/* ======== 沿革  =================== */
section#history>div { width:80%; margin:auto; }
    section#history p.year { width:10%; }
    section#history p.history { width:90%; }


/* ======== 研究人力  =================== */
section#human>div { width:70%; margin: auto; text-align: center; }    
	section#human .chart { width:50%; }
	section#human .chart img { max-width:400px; }
	section#human .categoryList { width:50%; }
		section#human .dot { width:20px; height:20px; border-radius:10px; }	
		section#human .category { padding:10px 0 10px 30px; font-size:20px;  }	
		section#human .c01 { background-color:#4472c4; }
		section#human .c02 { background-color:#ed7d31; }
		section#human .c03 { background-color:#a5a5a5; }
		section#human .c04 { background-color:#ffc000; }
		section#human .c05 { background-color:#5b9bd5; }
		section#human .c06 { background-color:#70ad47; }
		section#human .c07 { background-color:#264478; }
   
/* ======== 重要研究計畫  =================== */
section#project>div { width:70%; margin: auto;  }
    section#project .subProject { padding-block:5px; align-items: center; }
	section#project .number { width:10%; }
    section#project .proTitle { font-size: 20px; width:70%; }
    section#project span.PI { font-size: 14px; font-style: italic;  }
    
    .subProject div.more { width:20%; font-size: 18px; text-align: center;   }
    .subProject div.more a { display: block; padding:2px 5px; color:#00F; background-color: rgba(71, 159, 171, 0.5); border-radius: 11px; }
    .subProject div.more a:hover { color:#00F; }

/* ======== 研究成果、研究設施、教育及延伸計畫  =================== */
.subAchievement, .subFacility, .subEducation { width:calc(94% / 3); margin:1%; padding:10px; border:#CCC 1px solid; 
    border-radius: 10px; }

.subFacility a.website, .subEducation a.website { display:block; padding:2px 5px; font-size: 14px; color:#00F; background-color: rgba(71, 159, 171, 0.5); border-radius: 9px; }
.subFacility a.website:hover, .subEducation a.website:hoverr { color:#00F; }


/* ======== 研究成果  =================== */
.subAchievement { position:relative; padding-bottom: 60px; }
p.achiTitle { font-size:18px; font-weight: bold; }
span.publish { font-size: 12px; font-style: italic;} 
.publication { position: absolute; left:0; bottom:20px; padding:2px 10px 2px 5px; 
    color:#FFF; background-color: rgba(71, 159, 171, 0.5); 
    border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.publication a { color:#00F; text-decoration: underline; }
.publication a:hover { color:#00F; }
    

/* ======== 研究設施  =================== */
#subFacilitySGC { width:64%; }
#subFacilitySGC .imgofASGC { width:48%; }


/* ======== 三大組研究方向  =================== */
section#research {}


    .tabs .tab-links { text-align: center; font-weight: bold; margin-bottom:20px; }
    .tabs .tab-links li { background-color: #CCC; padding-block: 2px; }
    .tabs .tab-links li a { color:#a7a4a4; }

    .tabs .tab-links li.active { background-color: #333; color: #FFF; }
    .tabs .tab-links li.active a { color: #FFF; }
    .tabs .tab-links li:hover.active { color: #FFF; }
    
    .tabs .tab-links .tab-group { width:calc(100% / 3); }

    .tabs .tab-content .tab { display: none; border-top-left-radius: 10px; border-top-right-radius: 10px;}
    .tabs .tab-content .active { display: block;  }

    .subGroup { margin:1%; padding:10px; border-radius: 10px; border:#CCC 1px solid; }
	.subGroup .PI { font-size:14px; font-style:italic; }
    .smallGroup { padding:20px; } 
    .smallGroup ul, .smallGroup li { list-style-type:disc; list-style-position: outside; line-height: 2em; }
	.smallGroup ul, .smallGroup li { list-style-type:disc; list-style-position: outside; line-height: 2em; }
    
    #research figure { padding:10px; }
    #research figure img { max-height:150px; width:auto; }
    #research figure figcaption { font-size: 12px;}

/* ==========================  footer  ============================================== */
footer { background-color: #333; color: #FFF; text-align: center; font-size: 14px; 
    padding-block: 10px; margin-top:30px; }

@media (max-width:1000px){ 
section#human>div { width:90%; }
section#project>div { width:90%; }
ul#nav li a { padding-inline: 4px; }  /*與中文版不同*/

@media (max-width:900px){   

    #header { display:none; }
    #english { display:none; }
    #header4Mobile { position: fixed; display: block; padding-inline: 10px; padding-block: 5px; z-index: 99999;
        width:100%; background-color: rgba(0, 0, 0, 0.7); }
        div#logo4Mobile { width: 70px; height:70px; }
            div#logo4Mobile img { width: 100%; height:auto; } 
        #headerTitle { font-size: 30px; font-weight: bold; color:#FFF; }
        
        #hanburger a { display:block; width:50px; height: 50px;  
            text-align:center; line-height: 50px; color:#FFF; 
            background-color:#000; border-radius:5px; border:1px #FFF solid; }
        #hanburger a:hover { background-color:#E1E1E1; color:#000; }
        #hanburger i#list { padding: 0; }
        
        #english4Mobile { position: absolute; bottom:-10px; right:120px; }   
        #english4Mobile a { display: block; height: 20px; padding-inline: 10px;
            text-align: center; line-height: 20px; color:#FFF;
            background-color: #000; border:1px #FFF solid; border-radius: 20px;  }
        #english4Mobile a:hover { background-color:#E1E1E1; color:#000; }

    ul#nav4Mobile { display: none; }
    ul#nav4Mobile li  { border-top:solid 1px #FFF; }
    ul#nav4Mobile li a { display:block; width:100%; height: 40px; 
        text-align: center; color:#FFF; line-height: 40px; transition: 600ms; }
    ul#nav4Mobile li a:hover { background-color:#E1E1E1; color:#000; }

    section { width: 95%; padding-top:90px; }
    section h1 { font-size: 28px; }
    section#history>div { width:95%; }
    section#history p.year { width:15%; }
    section#history p.history { width:85%; }   
   
    section#human .categoryList {  }
    section#human .categoryList .category { padding-block:7px; }
	
    section#project { padding-top:100px; } 
    section#project>div { width:95%; }
	
		section#project .number { width:100%; }
        section#project .proTitle { width:100%; }        
        section#project .more { width:100%; border-radius: 0px;  }   
		
	.subAchievement, .subFacility, .subEducation { width:calc(96% / 2); }
	#subFacilitySGC { width:100%; }
	#subFacilitySGC .imgofASGC { width:49%; }
		
    
	#research .smallGroup ul { padding-left:20px; }
    #research figure { flex:1 1 auto; }
	#research figure img { max-width:100%; height:auto; }
	
}

@media (max-width:600px){ 
    section { padding-top: 75px; padding-bottom:20px; }
	
	section#project .subProject { margin-bottom:20px; }
	
	section#human>div { flex-direction:column; }
	section#human .chart { width:100%; }
	section#human .chart img { max-width:350px;  }
	section#human .categoryList { width:100%; padding:30px 0 0 20px; font-size:16px; }
	
	.subAchievement, .subFacility, .subEducation { width:100%; }
    #subFacilitySGC { width:100%; }
    #subFacilitySGC .imgofASGC { width:100%; }        
}