/*
Theme Name:nctu-soc
Theme URI: http://wordpress.org/
Description: 交大理學院佈景主題
Version:1.0
Author:TaiTC
Author URI:http://wordpress.org
Tags:Wordpress
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

li li, li p, li span, li p span, p span{font-size:1em} /* 歸零 */
*{font-family:'Noto Sans TC', '微軟正黑體', sans-serif;font-size:1em;margin:0;padding:0;-webkit-font-smoothing: antialiased;}
body{overflow: hidden; font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;font-size:100%;margin:0;padding:0; -webkit-font-smoothing: antialiased;}
img {border:none;}
a{font-family:'Noto Sans TC', '微軟正黑體', sans-serif; text-decoration:none; color:#646464;}
.clear_both{
    clear: both;
}
/** adjust font size **/

@media screen and (max-width: 1023px){
    body{ font-size: 75%; }
}
@media screen and (min-width: 1024px) and (max-width: 1087px){
    body{ font-size: 80%; }
}
@media screen and (min-width: 1088px) and (max-width: 1151px){
    body{ font-size: 85%; }
}
@media screen and (min-width: 1152px) and (max-width: 1215px){
    body{ font-size: 90%; }
}
@media screen and (min-width: 1216px) and (max-width: 1279px){
    body{ font-size: 95%; }
}
@media screen and (min-width: 1280px) and (max-width: 1343px){
    body{ font-size: 100%; }
}
@media screen and (min-width: 1344px) and (max-width: 1407px){
    body{ font-size: 105%; }
}
@media screen and (min-width: 1408px) and (max-width: 1471px){
    body{ font-size: 110%; }
}
@media screen and (min-width: 1472px) and (max-width: 1535px){
    body{ font-size: 115%; }
}
@media screen and (min-width: 1536px) and (max-width: 1599px){
    body{ font-size: 120%; }
}
@media screen and (min-width: 1600px) and (max-width: 2000px){
    body{ font-size: 120%; }
}
@media screen and (min-width: 2001px) and (max-width: 4000px){
    body{ font-size: 180%; }
}
@media screen and (min-width: 4001px) {
    body{ font-size: 280%; }
}

/*
::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background: rgba(150,150,150,0.8);
}
*/

/***font***/
.en_version{
    display: none;
}
.title{
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-size: 3.75em; /*50px 5em*/
    font-weight: 500;
    letter-spacing: 0.075em; /*0.1em*/
}
.subtitle{
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-size: 2.375em; /*38px 3.166em*/
    font-weight: 400;
    letter-spacing: 0.075em; /*0.1em*/ 
}
.subtitled{
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-size: 1.125em;/*18px 1.5em*/
    font-weight: 350;
    line-height: 2.125em; /*2.833em*/
    letter-spacing: 0.075em; /*1.2px 0.1em*/
}
.text{
    font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
    font-size: 0.75em; /*12px 1em*/
    font-weight: 350;
    line-height: 1.375em; /*22px 1.833em*/
    letter-spacing: 0.03125em;  /* 0.5px 0.05em*/
}
h1 { 
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h3 { 
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h4 { 
    display: block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h5 { 
    display: block;
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h6 { 
    display: block;
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

/************header***********/
#header{
	position: fixed;
	left: 0px;
	width: 8vw;
	height: 100%;
	background-color: rgba(255,255,255,0.45);
	z-index: 10;
	transition: width 2s;
	-webkit-transition: width 2s;
}
#header:hover{
	width: 22vw;
}
#header-block-link{
	position: fixed;
	top: 0px;
	left:0px;
	width: 8vw;
	height: 22.5vh;
	transition: width 2s;
	-webkit-transition: width 2s;
    border: solid 0px green;
}
#header:hover #header-block-link{
	width: 20vw;
}
#header-block0{
	position: fixed;
	top: 0px;
	left:0px;
	width: 8vw;
	height: 22.5vh;
}
#header-block1{  /*藍色色塊*/
	position: absolute;
	bottom: 0px;
	left:0px;
	width: 8vw;
	height: 22.5vh;
	background: #002D5A;
	transition:  width 1.5s, height 1s;
	-webkit-transition:  width 1.5s, height 1s;
}
#header:hover #header-block1{
	width: 18vw;
	height: 3.3vh;
}
#header-block2{   /*理*/ 
	position:fixed;
	top: 3.125vh;
	line-height: 4vh;
	left: 1vw;
	font-size:2em;
	color:white;
	transition: color 2s,top 2s,left 2s,font-size 2.3s ease-out;
	-webkit-transition: color 2s,top 2s,left 2s,font-size 2s ease-out;
}
#header:hover #header-block2{
	top: 12vh;
	left: 4vw;
	font-size: 2.4em;
	color: black;
	transition: color 2s,top 2s,left 2s,font-size 2.3s ease-in;
	-webkit-transition: color 2s,top 2s,left 2s,font-size 2s ease-in;
}
#header-block3{   /*學*/
	position:fixed;
	top: 8.125vh;
	line-height: 4vh;
	left: 1vw;
	font-size:2em;
	color:white;
	transition: color 2s,top 2s,left 2s,font-size 2.3s ease-out;
	-webkit-transition: color 2s,top 2s,left 2s,font-size 2s ease-out;
}
#header:hover #header-block3{
	top: 12vh;
	left: 9vw;
	font-size: 2.4em;
	color: black;
	transition: color 2s,top 2s,left 2s,font-size 2.3s ease-in;
	-webkit-transition: color 2s,top 2s,left 2s,font-size 2s ease-in;
}
#header-block4{   /*院*/
	position:fixed;
	top: 13.125vh;
	line-height: 4vh;
	left: 1vw;
	font-size:2em;
	color:white;
	transition: color 2s,top 2s,left 2s,font-size 2.3s ease-out;
	-webkit-transition: color 2s,top 2s,left 2s,font-size 2s ease-out;
}
#header:hover #header-block4{
	top: 12vh;
	left: 14vw;
	font-size: 2.4em;
	color: black;
	transition: color 2s,top 2s,left 2s,font-size 2.3s ease-in;
	-webkit-transition: color 2s,top 2s,left 2s,font-size 2s ease-in;
}
#header-block5{   /*國立交通大學*/
	position:fixed;
	top: 8vh;
    line-height: 2vh;
	left: -30vw;
	font-size:1.2em;
	letter-spacing: 0.2em; 
	color: rgba(0,0,0,0);
}
#header:hover #header-block5{
	color: black;
	left: 4vw;
	transition: color 2s,left 0s;
	transition-delay: 1s;
	-webkit-transition: color 2s,left 0s;
	-webkit-transition-delay: 1s;
}
#header-block6{   /*The College of Science*/
	position:fixed;
	top: 19vh;
	left: -30vw;
	font-size:0.7em;
	letter-spacing: 0.1em; 
    line-height: 3.3vh;
	color: #002D5A;
}
#header:hover #header-block6{
	color: white;
	left: 4vw;
	transition: color 2s,left 0s;
	transition-delay: 1s;
	-webkit-transition: color 2s,left 0s;
	-webkit-transition-delay: 0.8s;
}
#header-block7{   /*The College of Science(直)*/ 
	position:fixed;
	top: 3.125vh;
	left: 4vw;
	font-size:0.8em;
	line-height: 4vh;
	color:white;
	transition: left 0s;
	transition-delay: 1.5s;
}
#header:hover #header-block7{
	left: -200px;
	transition: left 0s;
	transition-delay: 0s;
}
#menu{
	display: none;
}
#header-icon0 {
	position: fixed;
	top: 24vh;
	left:0px;
}

.header-icon{
	position: relative;
    margin-top: 3vh;
	/*margin-top: 25px;
	margin-bottom: 35px;*/
	left: 2.5vw;
	vertical-align: middle;
	height: 3vw;
	opacity: 0.5;
	transition: left 2s,opacity 2s;
	-webkit-transition: left 2s,opacity 2s;
    background-size: contain;
    background-repeat:no-repeat;
    background-position:left center;
    cursor:pointer;
}
#header:hover .header-icon{
	opacity: 1;
	left: 4vw;
}
.header-icon1{background-image:url(image/icon/icon_01.png);}
.header-icon2{background-image:url(image/icon/icon_02-01.png);}
.header-icon3{background-image:url(image/icon/icon_03-01.png);}
.header-icon4{background-image:url(image/icon/icon_04-01.png);}
.header-icon5{background-image:url(image/icon/icon_05-01.png);}
.header-icon6{background-image:url(image/icon/icon_06-01.png);}
.header-text{
	position: relative;
	left:-30vw;
	font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	font-weight: 250;
	font-size: 1.45em;
	letter-spacing: 0.075em;
	line-height: 3vw;
	color: rgba(0,0,0,0);
	transition: color 1.5s, left 0s;
	transition-delay: 0s;
	-webkit-transition: color 1.5s, left 0s;
	-webkit-transition-delay: 0s;
}
#header:hover .header-text{
	left:4vw;
	color: #000000;
	transition: color 1.5s, left 0s;
	transition-delay: 1s;
	-webkit-transition: color 1.5s, left 0s;
	-webkit-transition-delay: 1s;
}
/*
#nav{
	display: none;
	a {display: none;}
	ul{li{a{display:none;}}}
}
input.trigger{display: none;}
label{ display: none;}
.menu_text{
	display: none;
}
*/
#header-foot{
	position: fixed;
	left: -30vw;
	bottom: 0px;
	height: 19vw;
	width: 18vw;
	/*background: #00FF00;*/
	background-image: url(image/nctu_logo_s.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left bottom;
	opacity: 0;
	transition:opacity 1s;
	transition-delay: 0s;
	-webkit-transition: opacity 1s;
	-webkit-transition-delay: 0s;
}
#header:hover #header-foot{
	opacity:1;
    left: 0;
	transition:opacity 1s;
	transition-delay: 1s;
	-webkit-transition: opacity 1s;
	-webkit-transition-delay: 1s;
}
/*
#header .box{
	z-index: 11;
	padding: 0px;
	width: 120px;
	height: 100%;
	display:inline-block;
}
#header .box-icon{

}
#header .box-text{
	position: fixed;
	left:120px;
	top: 0px;
	width: 0px;
	height: 100%;
	background: rgba(255,255,255,0.3);
	display:none;
}
#header .box:hover .box-text{
	display: block;
	width: 180px;
	transition: width 2s;
}*/
.dropbtn { display: none;}
.dropdown { display: none;}
.dropdown-content { display: none;}
.mymenubuttoncontainer { display: none;}
.menu_text { display: none;}
.v-menu-btn { display: none;}
.v-menu { display: none;}
.v-menu-content { display: none;}
.formobile{ display: none;} /*AnnieDisplayNone*/


.nav_menu{
    position: fixed;
    top: 0px;
    right: 5vw;
    height: 3.9vmin;
    width:52vmin;
    overflow-y: hidden;
    /*border:solid 1px black;*/
}
.nav_menu:hover{
    overflow-y: visible;
}
.nav_menu ul {
    float:right;
    list-style: none;
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    height: 23.4vmin;
    /*border:solid 1px red;*/
}
.nav_menu li {
    counter-increment: item;
    font-weight: 350;
    font-size: 1.1em;
    letter-spacing: 0.1rem;
    color: #000000;
    text-decoration: none;
}
.nav_menu li:before {
    content: "0" counter(item);
    text-align: center;
    line-height: 3.9vmin;
    display: inline-block;
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    width: 5.2vmin;
    height: 3.9vmin;
    font-weight: 350;
    font-size: 0.75em;
    letter-spacing: 0.1rem;
    color: #000000;
    margin-bottom: -39vmin;
    background: rgba(255,255,255,.4);
}
.nav_menu ul:hover{
    background: rgba(255,255,255,0.4);
}
.nav_menu ul:hover li::before{
    background: rgba(0,0,0,0);
    margin-bottom: 0px;
}
.nav_menu li:hover{
    background: rgba(0,0,0,0.7);
    color: white;
    transition: all .5s ease-in-out;
}
.nav_menu li:hover::before{
    color: white;
}
.nav_menu a{
    font-weight: 350;
    font-size: 1em;
    letter-spacing: 0.1rem;
    color: #000000;
}
.nav_menu li:hover a{
    color: white;
}

/*
#nav_menu_2 ul:hover li:nth-child(2){
    background: rgba(0,0,0,0.7);
    color: white;
    transition: all .5s ease-in-out;
}
#nav_menu_2 ul:hover li:nth-child(2):before{
    background: rgba(0,0,0,0.0);
}
#nav_menu_2 li:nth-child(2):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_2 li:nth-child(2) a{
    color: white;
}
 */

#nav_menu_1 ul:hover li:nth-child(1):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_1 li:nth-child(1):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_1 li:nth-child(1) a{
    color: white;
}
#nav_menu_1 ul:hover li:nth-child(1) a{
    color:black;
}
#nav_menu_1 ul:hover li:nth-child(1):hover::before{
    color: white;
}
#nav_menu_1 ul:hover li:nth-child(1):hover a{
    color:white;
}

#nav_menu_2 ul:hover li:nth-child(2):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_2 li:nth-child(2):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_2 li:nth-child(2) a{
    color: white;
}
#nav_menu_2 ul:hover li:nth-child(2) a{
    color:black;
}
#nav_menu_2 ul:hover li:nth-child(2):hover::before{
    color: white;
}
#nav_menu_2 ul:hover li:nth-child(2):hover a{
    color:white;
}

#nav_menu_3 ul:hover li:nth-child(3):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_3 li:nth-child(3):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_3 li:nth-child(3) a{
    color: white;
}
#nav_menu_3 ul:hover li:nth-child(3) a{
    color:black;
}
#nav_menu_3 ul:hover li:nth-child(3):hover::before{
    color: white;
}
#nav_menu_3 ul:hover li:nth-child(3):hover a{
    color:white;
}

#nav_menu_4 ul:hover li:nth-child(4):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_4 li:nth-child(4):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_4 li:nth-child(4) a{
    color: white;
}
#nav_menu_4 ul:hover li:nth-child(4) a{
    color:black;
}
#nav_menu_4 ul:hover li:nth-child(4):hover::before{
    color: white;
}
#nav_menu_4 ul:hover li:nth-child(4):hover a{
    color:white;
}

#nav_menu_5 ul:hover li:nth-child(5):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_5 li:nth-child(5):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_5 li:nth-child(5) a{
    color: white;
}
#nav_menu_5 ul:hover li:nth-child(5) a{
    color:black;
}
#nav_menu_5 ul:hover li:nth-child(5):hover::before{
    color: white;
}
#nav_menu_5 ul:hover li:nth-child(5):hover a{
    color:white;
}

#nav_menu_6 ul:hover li:nth-child(6):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_6 li:nth-child(6):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_6 li:nth-child(6) a{
    color: white;
}
#nav_menu_6 ul:hover li:nth-child(6) a{
    color:black;
}
#nav_menu_6 ul:hover li:nth-child(6):hover::before{
    color: white;
}
#nav_menu_6 ul:hover li:nth-child(6):hover a{
    color:white;
}

#nav_menu_7 ul:hover li:nth-child(7):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_7 li:nth-child(7):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_7 li:nth-child(7) a{
    color: white;
}
#nav_menu_7 ul:hover li:nth-child(7) a{
    color:black;
}
#nav_menu_7 ul:hover li:nth-child(7):hover::before{
    color: white;
}
#nav_menu_7 ul:hover li:nth-child(7):hover a{
    color:white;
}

#nav_menu_8 ul:hover li:nth-child(8):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_8 li:nth-child(8):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_8 li:nth-child(8) a{
    color: white;
}
#nav_menu_8 ul:hover li:nth-child(8) a{
    color:black;
}
#nav_menu_8 ul:hover li:nth-child(8):hover::before{
    color: white;
}
#nav_menu_8 ul:hover li:nth-child(8):hover a{
    color:white;
}

#nav_menu_9 ul:hover li:nth-child(9):before{
    background: rgba(0,0,0,0.0);
    color:black;
}
#nav_menu_9 li:nth-child(9):before{
    background: rgba(0,0,0,0.7);
    color: white;
}
#nav_menu_9 li:nth-child(9) a{
    color: white;
}
#nav_menu_9 ul:hover li:nth-child(9) a{
    color:black;
}
#nav_menu_9 ul:hover li:nth-child(9):hover::before{
    color: white;
}
#nav_menu_9 ul:hover li:nth-child(9):hover a{
    color:white;
}


/*  end of news list */
/* single */

/* end of single */



.news_text-container{
    position: absolute;
    top: 22.5vh; /*18%*/
    left: 26vw; /*20%*/
    width: 65vw;
    height: 70vh;
    border: solid 0px black;
}
.nt-title{
    line-height: 6vh;
    border: solid 0px black;
    color: #505050;
	margin-bottom: 1vh;
}
.nt-tag{
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 1vh;
    background-image: url(image/btn/Label.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.nt-tag_text{
    float:left;
    line-height: 20px;
    margin-top: 1vh;
    margin-left: 8px;
    margin-right: 22px;
    color: #505050;
}
hr.nt-hr{
    border: 0;
    background: #323232;
    height:1px;
    width: 100%;
    margin-top: 1vh;
    margin-bottom: 1vh;
}
.nt-button_block{
    float:right;
}
.nt-circle{
    width: 7.7vmin;
    height: 7.7vmin;
    border-radius: 50%;
    border: solid 1px black;
    line-height: 7.7vmin;
    text-align: center;
    cursor: pointer;
	margin-top: 0.5vh;
}
.nt-btn{
    float: left;
    width: 2.2vmin;
    height: 2.2vmin;
    margin-top: 1.4vmin;
}
.nt-a{
    background-image: url(image/btn/text_01.svg);
    background-size: contain;
    margin-left: 1px;
}
.nt-plus{
    cursor: pointer;
    background-image: url(image/btn/text_02.svg);
    background-size: contain;
    margin-left: 0.55vmin;
}.nt-plus:hover{ background-image: url(image/btn/text_02_rv.svg); }
.nt-minus{
    cursor: pointer;
    background-image: url(image/btn/text_03.svg);
    background-size: contain;
    margin-left: 0.55vmin;
}.nt-minus:hover{ background-image: url(image/btn/text_03_rv.svg); }
#nt-content-wrapper{
    position: relative;
    float: left;
    width: 100%;
    height: 50vh;
    margin-top: 1.5vh;
    border: solid 0px orange;
    overflow-y: hidden;
}
.nt-content{
    width: 98%;
    border: solid 0px blue;
    font-size: 0.75em; /*12px 1em*/
    font-weight: 350;
    line-height: 1.375em; /*22px 1.833em*/
    letter-spacing: 0.03em;  /*0.5px 0.05em*/
    text-align: justify;
    color: #505050;
}
.nt-content a{
    color: #646464;
}
.nt-image{
    float: left;
    width: 37vw;
    height: 50px;
    margin-top: 1vh;
    margin-bottom: 1vh;
    border: solid 0px green;
}
.nt-img{
    width: 50px;   /*another wiay: max-width*/
    height: 50px;
    box-shadow: 3px 3px 15px gray;
}

#test{
	position: relative;
	left: 300px;
	top: 300px;
	width: 500px;
	height: 500px;
	background: #777777;
}