@charset "utf-8";

@import url("grid.css");

@import url("banner.css");

@import url("nav.css");

/* CSS Document */

@font-face {

  font-family: 'Noto Sans';

  font-style: normal;

  font-weight: 100;

  src: url('../fonts/noto-sans-v6-latin-regular.eot'); /* IE9 Compat Modes */

  src: local('Noto Sans'), local('NotoSans'),

       url('../fonts/noto-sans-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/noto-sans-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/noto-sans-v6-latin-regular.woff') format('woff'), /* Modern Browsers */

       url('../fonts/noto-sans-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/noto-sans-v6-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */

}



html, body{

	padding:0;

	margin:0;

	font-family:'Noto Sans', 'Noto Sans TC', sans-serif;

	font-style:normal;

	font-weight: 300;	

	line-height:1.5em;

	box-sizing:border-box;

	color:rgba(89,60,50,1);

}



*,*:before,*:after{

	box-sizing:inherit;

}



a {

	color: rgba(81,53,102,1);

	text-decoration:none;

}



::-moz-selection{

    color: rgba(255,255,255,1);

    background: rgba(89,60,50,1);

}



::selection{

    color: rgba(255,255,255,1);

    background: rgba(89,60,50,1);

}



/*===============color===============*/



.p_regular{

	 background: rgba(89,60,50,1);

}



.p_half{

	 background: rgba(89,60,50,.5);

}



.gr_regular{

	 background: rgba(33,167,149,1);

}



.gr_half{

	 background: rgba(33,167,149,.5);

}



.gy_regular{

	 background: rgba(48,47,48,1);

}



.gy_half{

	 background: rgba(48,47,48,.5);

}



.w_regular{

	 background: rgba(255,255,255,1);	

}



.red_regular{

	 background: rgba(232,44,12,1);	

}



.bl_regular{

	 background: rgba(45,49,255,1);	

}



.text_w{

	color: rgba(255,255,255,1);	

}



.text_p{

	color: rgba(89,60,50,1);	

}



.text_rd{

	color: rgba(191,30,46,1);	

}



.text_gy{

	color: rgba(48,47,48,1);	

}


.text_gr{

    color: rgba(136,122,115,.8);    

}

hr{

	border: 0;

    height: 0;

    border-top: 1px solid rgba(0, 0, 0, 0.1);

	padding:0;

	margin:0;

}



mark{

	padding:5px 0px;

	color: rgba(191,30,46,1);

	font-weight:bold;

	background:none;

}



strong{

	font-weight:700;	

}



/*=============bg_color=================*/



.bg_w{

	background: rgba(255,255,255,1);	

}



.bg_g{

	background: rgba(245,244,243,1);	

}



/*=============text_size=================*/



.text_small{

	font-size:12px;

}



.text_mid{

	font-size:14px;

}



.text_rg{

	font-size:20px;

	font-weight:500;

}



.text_lg{

	font-size:24px;

	font-weight:500;

}



.text_slg{

	font-size:36px;

	font-weight:700;

}



/*=============paragraph_size=================*/



.pa_jus{

	text-align: justify;

	text-justify:inter-ideograph;

}



/*===============a button===============*/



a.bt_gy{

	display:block;

	width:100%;

	padding:3px;

	text-align:center;

	background: rgba(215,211,209,1);

}



a.bt_gy:hover{

	background: rgba(215,211,209,.8);

}



a.bt_rd{

	display:block;

	width:100%;

	padding:3px;

	text-align:center;

	border:solid 1px rgba(191,30,46,1);

}



a.bt_rd:hover{

	border:solid 1px rgba(255,255,255,1);

	background: rgba(255,255,255,1);

}



a.bt_rd_b{

	display:block;

	width:100%;

	padding:3px;

	text-align:center;

	border:solid 1px rgba(191,30,46,1);

}



a.bt_rd_b:hover{

	border:solid 1px rgba(245,244,243,1);

	background: rgba(245,244,243,1);

}



a.bt_br{

	display:block;

	text-align:center;

	padding:3px 0px;

	background: rgba(89,60,50,1);

}



a.bt_br:hover{

	background: rgba(89,60,50,.8);

}



a.tx_g{

	color: rgba(48,47,48,1);

}



a.tx_g:hover{

	color: rgba(33,167,149,1);

}



.cont a{

	color: rgba(191,30,46,1);

}



a.text_w{

	color: rgba(255,255,255,1);

}



/*===============border===============*/

.bd_t{

	border-top:solid 2px rgba(191,30,46,1);	

}



.bd_bt{

	border-bottom:solid 2px rgba(191,30,46,1);	

}



.bd_btt{

	border-top:solid 2px rgba(191,30,46,1);

	border-bottom:solid 2px rgba(191,30,46,1);

	padding:10px 0px;

}



.bd_rd{

	border:solid 2px rgba(245,244,243,1);

    border-radius: 15px;

}



.bd_r{

	border:solid 2px rgba(232,44,12,.2);

    border-radius: 15px;

}



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



.subnav{

	width:100%;

	margin:auto;

	text-align:center;

	box-sizing:border-box;

	padding:20px;	

}



.subnav ul{

	padding:0;

	margin:0;

	list-style: none;

}



.subnav li{

	position:relative;

	display: inline;

	box-sizing:border-box;

	font-size:18px;

	font-weight:400;

}



.subnav li a{

	display: inline-block;

	box-sizing:border-box;

	padding:10px 20px;

	margin:10px;

	color: rgba(191,30,46,1);

	background: rgba(255,255,255,1);

	line-height:1.5em;

}



.subnav li a:hover{

	background: rgba(191,30,46,1);

	color: rgba(255,255,255,1);

}



.subnav a.onnav{

	background: rgba(191,30,46,1);

	color: rgba(255,255,255,1);

}



.mob{

	display:block;	

}



.com{

	display:none;	

}



/*===============banner================*/



main{

	position:relative;

	width:100%;

	height:auto;

	overflow:hidden;

	box-sizing:border-box;

	padding:80px 0px 0px 0px;

}



main img{

	width:100%;

}



.submain, .submain2, .submain3, .submain4, .submain5, .submain6, .submain7, .submain8, .submain9{

	position:relative;

	width:100%;

	background:rgba(245,244,243,1) url(../images/bg1.png) center;

	padding:100px 0px 0px 0px;

}



.submain2{

	background:rgba(245,244,243,1) url(../images/bg2.png) center;

}



.submain3{

	background:rgba(245,244,243,1) url(../images/bg3.png) center;

}



.submain4{

	background:rgba(245,244,243,1) url(../images/bg4.png) center;

}



.submain5{

	background:rgba(245,244,243,1) url(../images/bg5.png) center;

}



.submain6{

	background:rgba(245,244,243,1) url(../images/bg6.png) center;

}



.submain7{

	background:rgba(245,244,243,1) url(../images/bg7.png) center;

}



.submain8{

	background:rgba(245,244,243,1) url(../images/bg8.png) center;

}



.submain9{

	background:rgba(245,244,243,1) url(../images/bg9.png) center;

}



.subtext{

	box-sizing: border-box;

	padding: 100px 0px;

	color: rgba(255,255,255,1);

	font-size: 42px;

	text-align: center;

	text-shadow: 1px 1px 3px rgba(0,0,0,.8);

	line-height:1.2em;

}



.subspace{

	box-sizing: border-box;

	padding: 0px 0px;

}



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



section{

	position:relative;

	width:80%;

	margin:auto;

}



.bigsize{

	width:95%;

	padding-top:20px;

}



.submenu{

	width:100%;

	padding:10px;

	-webkit-filter: opacity(80%); /* Safari 6.0 - 9.0 */

    filter: opacity(80%);

}



.submenu:hover{

	-webkit-filter: opacity(100%); /* Safari 6.0 - 9.0 */

    filter: opacity(100%);

	cursor:pointer;

}



.submenu a{

	display:block;

	width:100%;

	color:rgba(255,255,255,1);

	font-size:24px;

	text-align:right;

}



.submenu img{

	width:auto;

	height:30px;

	float:left;

}



#sublink article{

	box-sizing:border-box;

	padding:20px;

}



#subabout{

	width:100%;

	box-sizing:border-box;

	padding:20px 0px 40px 0px;

	margin:20px 0px;

}





#subabout article{

	box-sizing:border-box;

	padding:30px;

}



.subab{

	width:100%;

	height:auto;

}



.subab img{

	display:block;

	margin:auto;

	padding-top:30px;

	width:70%;

}



.subab h1{

	font-size:32px;

	color: rgba(81,53,102,1);

}



#actives article{

	box-sizing:border-box;

	display: inline-table;

	padding:20px;

}



#act_in article{

	box-sizing:border-box;

	display: inline-table;

	padding:20px;

	width:100%;

}



#act_ins article{

	box-sizing:border-box;

	display: inline-table;

    vertical-align: top;

	padding:20px;

	width:100%;

}

#tag article{
    box-sizing:border-box;
    display: inline-table;
    vertical-align: top;
    padding:20px;
    width:100%;
}

#act_mv article{

	box-sizing:border-box;

	display: inline-table;

	padding:20px;

	width:100%;

}



#act article{

	box-sizing:border-box;

	display: inline-table;

    vertical-align: top;

	padding:20px;

	width:100%;

}



#pub article{

	box-sizing:border-box;

	display: inline-table;

    vertical-align: top;

	padding:20px;

	width:100%;

}

#facu article{
    box-sizing:border-box;
    display: inline-table;
    padding:20px;
    width:49%;
}

#facu article{

	box-sizing:border-box;

	display: inline-table;

	padding:20px;

	width:49%;

}



.card, .card_side, .card_side_b{

	width:100%;

	height:100%;

	background:	rgba(245,244,243,1);

	overflow:hidden;

}



.card img, .card_side img{

	width:100%;

	float:left;

	-ms-transform: scale(1,1); /* IE 9 */

    -webkit-transform: scale(1,1); /* Safari */

    transform: scale(1,1); /* Standard syntax */

	

	transition: transform 3s;

	-webkit-transition: transform 3s;	

}



.card:hover img, .card_side:hover img{

	-ms-transform: scale(1.1,1.1); /* IE 9 */

    -webkit-transform: scale(1.1,1.1); /* Safari */

    transform: scale(1.1,1.1); /* Standard syntax */

}



.card_side_b img{

	width:100%;

}



.card_fa{

	width:100%;

	height:100%;

	overflow:hidden;

	text-align:center;

}



.card_side{

	width:80%;

	background: none;

}



.card_side_b{

	width:100%;

	background: none;

}



.card_noscale{

	width:100%;

	height:100%;

	overflow:hidden;

}



.card_noscale img{

	width:100%;

}



.imgbox{

	width:100%;

	overflow:hidden;

	position:relative;

}



.img_text{

	position: absolute;

	top: 25%;

	left: 50%;

	-ms-transform: translate(-50%, -50%);/* IE 9 */

	-webkit-transform: translate(-50%, -50%); /* Safari */

	transform: translate(-50%, -50%);

	color: rgba(255,255,255,1);

	z-index:10;

	width:100%;

	text-align:center;

}



.cirimg img{

	width:100%;

	overflow:hidden;

	border-radius: 50%;

	border:solid 0px;

}



.cirimgs img{

	width:100%;

	overflow:hidden;

	border-radius: 50%;

	border:solid 0px;

	padding:20px;

}



.cont{

	margin:20px;

	height:100%;

}

.cont_noneimg{
    height:100%;
    padding:20px;
    box-sizing:border-box;
    text-align: justify;
    text-justify: auto;　/*IE*/
}


.cont h2{

	font-size:32px;

	font-family:Georgia, "Times New Roman", Times, serif;	

}



.cont h3{

	font-size:24px;	

}



.cont_nm{

	margin:20px;

	margin-left:0px;

	height:100%;

}



.floatr{

	width:100%;

	height:auto;

	display:inline-block;

	text-align:right;	

}



#movies .mv{

	margin:auto;

	text-align:center;

}



#movies iframe{

	width:80%;

	height:300px;	

}



#movies h1{

	font-size:28px;	

}



#movies article{

	box-sizing:border-box;

	padding:30px;

}



#subtitle{

	width:100%;	

}



.stitle{

	padding:0px 30px;

}



.stitle h1{

	font-size:24px;

	padding:0;

	margin:0;

	padding-top:20px;

}



#project p{

	padding:0;

	margin:0;

}



.ac_c{

	width:85%;

	margin:auto;	

}



.ac_c article{

	padding:0;	

}



.ac_c h1{

	padding:0;

	margin:0;

	font-size:32px;	

}



.ac_c img{

	width:100%;	

}



.text_center{

	text-align:center;

	padding:20px;	

}



.text_cen{

	text-align:center;

	color:rgba(191,30,46,1);

}



#detail .card_side_b{

	width:100%;

	box-sizing:border-box;

	padding:20px;

}



#detail .card_noscale{

	width:100%;

	box-sizing:border-box;

	padding:20px;

}



#refdesign .card{

	background:#eeebf0;	

}



#refdesign div img{

	width:100%;

}



#faq h1{

	font-size:24px;	

}



#faq article{

	box-sizing:border-box;

	padding:30px;

}



#title{

	box-sizing:border-box;

	padding:0px 20px;

}



#title article{

	box-sizing:border-box;

	padding:20px 0px 0px 0px;

	line-height:1em;

}



.btp{

	box-sizing:border-box;

	padding:10px 0px;

}



#projects{

	width:100%;

	height:auto;

	padding:30px 0px 0px;

}



.pj_tx{

	position: absolute;

	top: 50%;

	left: 50%;

	-ms-transform: translate(-50%, -50%);/* IE 9 */

	-webkit-transform: translate(-50%, -50%); /* Safari */

	transform: translate(-50%, -50%);

	width:100%;

	box-sizing:border-box;

	text-align:center;

	color:rgba(255,255,255,1);

}



.pp{

	height:auto;

	position:relative;

}



.pp:hover{

	cursor:pointer;	

}



.pp img{

	width:100%;

}



.fadebox{

	  position: absolute;

	  top: 50%;

	  left: 50%;

	  -ms-transform: translate(-50%, -50%);/* IE 9 */

	  -webkit-transform: translate(-50%, -50%); /* Safari */

	  transform: translate(-50%, -50%);

	  -webkit-transition: 0.5s ease; /* Safari */

	  transition: 0.5s ease;

	  opacity: 0;

	  display:none;

}



.fadebox .linktext{

	display:block;

	padding: 16px 32px;

	color:#fff;

	text-decoration:none;

	background: rgba(191,30,46,1);

}



.tx_de{

	display:block;

	font-size:14px;

}



#leftbox{

	box-sizing:border-box;

	padding:10px 10px;

}



.subbox{

	display:none;

}



.num{

	width:100%;

	box-sizing:border-box;

	padding:50px;

	text-align:center;	

}



.num a{

	display: inline-block;

	width:22px;

	color: rgba(191,30,46,1);

	background: rgba(255,255,255,1);

}



.num a:hover, a.onnum{

	color: rgba(255,255,255,1);

	background: rgba(191,30,46,1);

}



.trinav, .trinav_s, .trinav_n{

	width:100%;

	box-sizing:border-box;

	padding:50px;

	padding-bottom:0px;

}



.trinav_s{

	padding:10px;

}



.trinav_n{

	padding:0px;

}



.trinav a{

	display: inline-block;

	box-sizing:border-box;

	padding:5px 25px;

	margin:5px;

	color: rgba(191,30,46,1);

	background: rgba(255,255,255,1);

	border:solid 1px rgba(191,30,46,1);

}



.trinav_n a{

	display: inline-block;

	box-sizing:border-box;

	padding:5px 25px;

	margin:5px;

	color: rgba(191,30,46,1);

	background: rgba(255,255,255,1);

	border:solid 1px rgba(191,30,46,1);

}



.trinav_s a{

	width: 100%;

	display: inline-block;

	box-sizing:border-box;

	padding:10px;

	margin-top:5px;

	color: rgba(191,30,46,1);

	background: rgba(255,255,255,1);

	border:solid 1px rgba(191,30,46,1);

}



.trinav a:hover, .trinav_s a:hover, .trinav_n a:hover, a.onnum{

	color: rgba(255,255,255,1);

	background: rgba(191,30,46,1);

}



#main_v{

	width:100%;

}



#re_tb{

	width:100%;	

}



#re_tb tr:nth-child(even){

	background: rgba(245,244,243,1);

}



#re_tb th{

	padding:10px 0px;

	border-top:solid 1px rgba(191,30,46,1);

	border-bottom:solid 1px rgba(191,30,46,1);

}



#re_tb td{

	text-align:center;

	padding:10px 5px;

	border-bottom:solid 1px rgba(245,244,243,1);

}



#re_tb .txt_l{

	text-align:left;

}



#acal iframe{

	width:300px;

	height:300px;

}



/*==============footer===============*/



footer{

	background: rgba(212,212,212,1);

	height:auto;

	padding:20px;

}



footer img{

	display:block;

	width:60%;

	margin:auto;

	padding-bottom:20px;

}



footer h4,footer h5{

	display:block;

	padding:0;

	margin:0;

	font-weight:normal;

	color:rgba(89,60,50,1);

}



footer ul{

	padding:0;

	display:none;

	list-style: none;

	margin-bottom: 40px;

	

}



footer a{

	color:rgba(89,60,50,1);

}



footer li{

	display:inline-block;

	margin-right:10px;

}



/*==============other rwd===============*/



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

main{

	padding:87px 0px 0px 0px;

}



#act article{

	width:33%;

}



#act_mv article{

	width:49%;

}



#act_in article{

	width:49%;

}



#act_ins article{

	width:32.5%;

}



#pub article{

	width:33%;

}



#facu article{

	width:24%;

}



.tx_de{

	display:none;

}



.subtext{

	text-align:left;	

}



footer img{

	display:block;

	width:50%;

	padding-bottom:0px;

}



#acal iframe{

	width:720px;

	height:720px;

}



.mob{

	display:none;	

}



.com{

	display:block;	

}



}



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

main{

	padding:100px 0px 0px 0px;

}



#rightbox{

	min-height:1500px;	

}



#act article{

	width:33%;

}



#act_mv article{

	width:33%;

}



#act_in article{

	width:24.7%;

}



#act_ins article{

	width:16.3%;

}



#pub article{

	width:24%;

}



#facu article{

	width:19%;

}



.fadebox{

	display: block;	

}



.tx_de{

	display:block;

	font-size: 16px;

}



.pp:hover img{

	  opacity: .2;

}



.pp:hover .fadebox{

  	  opacity: 1;

}



.pp:hover .pj_tx{

  	  opacity: .5;

	  color:#630;

}



.pj_tx{

	top: 20%;

	left: 0%;

	-ms-transform: translate(0%, 0%);/* IE 9 */

	-webkit-transform: translate(0%, 0%); /* Safari */

	transform: translate(0%, 0%);

}



.subspace{

	box-sizing: border-box;

	padding: 100px 0px;

}



.subnav{

	width:80%;

	float:right;	

}



.subbox{

	width:80%;

	float:right;

	display:block;

	text-align:left;

	box-sizing:border-box;

	padding:20px;	

}



.subnav li{

	display: block;

}



.subnav li a{

	display:block;

	margin:12px 0px;

	width:100%;

	text-align:left;

}



#acal iframe{

	width:800px;

	height:600px;

}



footer ul{

	display:block;

}





}