@charset "utf-8";
/* CSS Document */
@import url("grid.css");
@import url("nav.css");

/*basic*/
*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}

html, body{
	font-family: 'Noto Sans TC', sans-serif, 'Noto Sans', sans-serif;;
	color: rgba(90,90,90,1);
}

h1, h2, h3{
	font-weight:normal;
}

a {
	color: rgba(90,90,90,1);
	text-decoration:none;
}

::-moz-selection{
    color: rgba(255,255,255,1);
    background: rgba(150,82,95,1);	
}

::selection{
    color: rgba(255,255,255,1);
    background: rgba(150,82,95,1);	
}


/*header*/
header{
	position:relative;
	padding-top:10px;
	width:100%;
	background: rgba(255,255,255,1);
	z-index:1000;
	border-bottom:solid 1px rgba(220,220,220,.8);
	text-align:center;
}

section{
	width:70%;
	margin:auto;
}

.submain, .submain2, .submain3, .submain4, .submain5, .submain6, .submain7, .submain8{
	position:relative;
	width:100%;
	background:rgba(255,231,231,1) url(../images/banner/ex.jpg);
	background-position: -250px -150px;
	padding:100px 0px 0px 0px;
}

.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,.5);
	line-height:1.2em;
}

.subspace{
	box-sizing: border-box;
	padding: 0px 0px;
}

.logo{
	display:inline-block;
	width:100%;
}


/*mv*/
main{
	position:relative;
	width:100wh;
	height:600px;
	overflow:hidden;
}

#vsize{
	min-width:100%;
	min-height:100%;
	position:absolute;
	top:-280px;
}


/*title*/
article{
	width:70%;
	padding:50px 30px 30px 0px;
	margin:auto;
}

article a:hover{
	color:rgba(180,180,180,1);
}

/*card*/
.card, .scard, .bcard{
	width:100%;
	height:100%;
	box-sizing:border-box;
}

.scard{
	padding:10px;
	margin-bottom:20px;
}

.card, .bcard{
	padding:10px;
	margin:0px 10px;
}

.card img, .bcard img{
	width:100%;
	height:auto;
}

.card img, .bcard img{
	width:100%;
	
	-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, .bcard: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 */
}

.ncard:hover img{
	-ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Safari */
    transform: scale(1,1); /* Standard syntax */
}

.card h3, .bcard h3{
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
	line-height: 2em;	
}

.card:hover h3, .bcard:hover h3{
	text-decoration:none;
}

.card p, .bcard p{
	color: rgba(90,90,90,.5);
	font-family:'Lato', sans-serif;
	letter-spacing: 1px;
	line-height: 1.5em;
}

.imgbox{
	width:100%;
	overflow:hidden;
	position:relative;
}

.imgbox img{
	width:100%;
	float:left;
}

.linecard{
	width:100%;
	padding:0px 0px 30px;
}

.r_cont{
	width:85%;
	margin: auto;
	border-top:	solid 5px rgba(150,82,95,1);
}

p{
	line-height:2em;
	margin-bottom:10px;
}

.r_cont p{
	line-height:1.5em;	
}

.imgb{
	width:100%;
	overflow:hidden;
	position:relative;
	padding:50px 0px 50px;
}

.imgb img{
	width:100%;
	float:left;
}


/*paragraph*/

.para_pad{
	padding-right:0px;
}

.pa_jus{
	text-align: justify;
	text-justify:inter-ideograph;
}

.b_line{
	display:inline-block;
	width:100%;
	padding:0px 0px 20px;
	border-bottom:solid 1px rgba(90,90,90,.5);	
}

/*pjbox*/
#mainpj{
	width:100%;
}

.pjbox{
	position:relative;
	width:100%;
	height:auto;
	text-align:center;
	overflow:hidden;
}

.pjbox img{
	width:100%;
}

.pj_tx{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

.morebt{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	padding:10px 20px;
	background:#C03;
}

.pjbox:hover .morebt{
	opacity: 1;	
}

.pjbox:hover .pj_tx{
	opacity: .3;	
}

.shbox{
	position:relative;
	display: inline-block;
	width:100%;
	text-align:center;
	overflow:hidden;
	padding:10px;
}

.sh_tx{
	position:absolute;
	left:50%;
	bottom:40%;
	color:rgba(255,255,255,1);
	transform: translate(-50%,-50%);
	opacity: 1;
}

.sh_tx h3{
	font-size:2em;
	color:rgba(255,255,255,.8);
}

.imgbox{
	width:100%;
	overflow:hidden;
}

.shbox img{
	float:left;
	width:100%;

	-ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Safari */
    transform: scale(1,1); /* Standard syntax */
	
	transition: transform 1s ease-in-out;
	-webkit-transition: transform 1s ease-in-out;
}

.shbox:hover img{
	cursor: pointer;		
	-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 */
}

.shmorebt{
	position:absolute;
	top:60%;
	left:50%;
	transform: translate(-50%,-50%);
	color:rgba(255,255,255,1);
	padding:5px 20px;
	border:solid 1px rgba(255,255,255,1);
	cursor:pointer;
	opacity: 1;
}

.shmorebt:hover{
	background:rgba(255,255,255,1);
	color:rgba(90,90,90,.5);
}

.databox{
	padding:0px 20px 20px;
}

.databox h1{
	font-size:2em;
	line-height:3em;
	border-bottom:solid 1px rgba(220,220,220,1);	
}

.databox h2{
	font-size:1.5em;
	line-height:3em;
	border-bottom:solid 1px rgba(220,220,220,1);	
}

.databox p{
	font-size:1.2em;
	line-height:2em;
	padding:20px 0px;	
}

.databox span{
	color:	rgba(255,255,255,1);
	background: rgba(0,0,0,0.5);
	padding:0px 5px 5px;
}

.databox .dataimg{
	display:inline-block;
	padding:10px;
}

/*image swipe*/
.imgswip{
	position:relative;
	float:left;
	width:100%;
	height:auto;
	padding:20px;
	/*background:rgba(180, 180, 180, .2);*/
}

.imgswbox{
	position:relative;
	width:90%;
	margin:auto;
}

.bg_img, .sm_img{
	float:left;
	display:inline-block;
	overflow:hidden;
}

.bg_img{
	position:relative;
}

.bbox{
	width:auto;
	height:auto;
	/* margin:0px 10px 10px; */
	background: rgba(180, 180, 180, .2);
	opacity:1;
}

/* 
.bcon{
	position:absolute;
	left:0;
	top:0;
	display:none;
}
*/

.bcon img, .bbox img{
	float:left;
	width:100%;
}

.bbox:hover{
	opacity:0.5;
	cursor:pointer;
}

/* .ch_bg{
	opacity:0.5;
} */

.debox{
	padding:0px 20px;
	border-bottom:solid 1px rgba(220,220,220,1);
}

.debox h2{
	float:left;
	font-size:1.5em;
	line-height:3em;
	width:auto;
}

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

.p_regular{
	 background: rgba(89,60,50,1);
}

.text_w{
	color: rgba(255,255,255,1);	
}

.text_o{/*orange red*/
	color: rgba(150,82,95,1);
}

.text_gr{/*grey blue*/
	color: rgba(64,92,99,1);	
}

.tx_bg{
	background:	rgba(64,92,99,1);
}


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

.text_small{
	font-size:12px;
}

.text_mid{
	font-size:14px;
}

.text_rg{
	font-size:20px;
	font-weight:500;
}

.text_mg{
	font-size:24px;
	font-weight:500;
}

.text_lg{
	font-size:26px;
	font-weight:500;
}

.text_xlg{
	font-size:28px;
	font-weight:500;
}

.date{
	font-family:"Times New Roman", Times, serif;
  	font-style: normal;
	padding:10px 0px;
	word-wrap:break-word;
}

.title_o, .title_gr{
	width:100%;
	line-height:1.2em;
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:solid 2px rgba(150,82,95,1);	
}

.title_gr{
	border-bottom:solid 2px rgba(64,92,99,1);	
}

.detail_o, .detail_gr{
	width:100%;
	padding-bottom:10px;
	border-bottom:solid 5px rgba(150,82,95,1);	
}

.detail_gr{
	border-bottom:solid 5px rgba(64,92,99,1);	
}

.tx_pad{
	padding:10px 0px;	
}


/*===============font===============*/

.text_si{
	font-family: 'Noto Serif TC', serif;
	font-weight:700;
}


/*==============up & down arrow===============*/

#morede:hover, #morech:hover{
	cursor:pointer;
}

#moredecon, #morechcon{
	display:none;
}

.moredebox, .morechbox{
	position:relative;
	display:inline;
	margin:0px 20px;
}

.moredebox i, .morechbox i{
	position: absolute;
	left:0;
	top:0;
	line-height:4em;
}

.moredebox i:nth-child(1), .morechbox i:nth-child(1){
	display:none;
}


/*==============all button===============*/

.blackbt{
	display:inline;
}

.blackbt a{
	display:inline-block;
	padding:5px 20px;
	margin:5px;
	border:solid 1px rgba(0,0,0,1);
	color:rgba(0,0,0,1);
	font-size:1.2em;
}

.blackbt a:hover{
	border:solid 1px rgba(0,0,0,1);
	background:rgba(0,0,0,1);
	color:rgba(255,255,255,1);
}

a.chk{
	background:rgba(0,0,0,1);
	color:rgba(255,255,255,1);
}

#burbt:hover{
	cursor:pointer;	
}

#burbt img{
	width:80%;
	padding:20px;
	float:right;
}

a.r_btn, a.r_btn:visited{
	display:block;
	box-sizing: border-box;
	width:100%;
	padding:10px;
	margin:20px 0px;
	text-align:center;
	background: rgba(253,232,231,.8);
	border:solid 2px rgba(253,232,231,1);
	border-radius:5px;
	color:rgba(90,90,90,1);
	display:none;
}

a.r_btn:hover, a.r_btn:active{
	background: rgba(253,232,231,1);
	background-size: 40px 20px;
	color:rgba(0,0,0,.8);
	transition: all .3s linear;
}

a.reg_btn, a.reg_btn:visited{
	display:block;
	box-sizing: border-box;
	width:100%;
	padding:10px;
	margin:20px 0px;
	text-align:center;
	background: rgba(186,199,190,.3);
	border:solid 1px rgba(186,199,190,1);
	border-radius:5px;
	color:rgba(90,90,90,1);
	display:none;
}

a.reg_btn:hover, a.reg_btn:active{
	background: rgba(64,92,99,1);
	background-size: 40px 20px;
	color:rgba(255,255,255,1);
	transition: all .3s linear;
}

a.sregs_btn, a.sregs_btn:visited{
	position:fixed;
	z-index:100000;
	bottom:20px;
	right:20px;
	box-sizing: border-box;
	padding:10px;
	text-align:center;
	background: rgba(227,156,113,1);
	color: rgba(255,255,255,1);
	border-radius:10px;
	display:none;
}

a.sreg_btn:hover, a.sreg_btn:active{
	background: rgba(243,201,142,1);	
	color:rgba(255,255,255,1);
}

a.sregs_btn, a.sregs_btn:visited, a.sregs2_btn, a.sregs2_btn:visited, a.sregs3_btn, a.sregs3_btn:visited, a.sregs4_btn, a.sregs4_btn:visited{
	position:fixed;
	z-index:100000;
	bottom:20px;
	right:20px;
	box-sizing: border-box;
	padding:10px;
	text-align:center;
	background: rgba(186,199,190,1);
	color: rgba(255,255,255,1);
	border-radius:20px;
	display:none;
}

a.sreg_btn:hover, a.sreg_btn:active, a.sreg2_btn:hover, a.sreg2_btn:active, a.sreg3_btn:hover, a.sreg3_btn:active, a.sreg4_btn:hover, a.sreg4_btn:active, a.sregs_btn:hover, a.sregs_btn:active, a.sregs2_btn:hover, a.sregs2_btn:active, a.sregs3_btn:hover, a.sregs3_btn:active, a.sregs4_btn:hover, a.sregs4_btn:active{
	background: rgba(0,79,43,1);	
	color:rgba(255,255,255,1);
}

a.sregs2_btn, a.sregs2_btn:visited{
	bottom:90px;
}

a.sregs3_btn, a.sregs3_btn:visited{
	bottom:140px;
}

a.bt_gy{
	display:block;
	width:50%;
	padding:3px;
	text-align:center;
	background: rgba(215,211,209,1);
}

a.bt_gy:hover{
	background: rgba(215,211,209,.8);
}

/*======sublist===============*/

.trinav_gr{
	width:100%;
	padding:0px 10px 10px 0px;
	box-sizing:border-box;
}

.trinav_gr a{
	display: inline-block;
	box-sizing:border-box;
	padding:5px 25px;
	margin:5px;
	color: rgba(90,90,90,1);
	background: rgba(255,255,255,1);
	border:solid 1px rgba(64,92,99,1);
}

.trinav_gr a:hover, a.onnav_gr{
	color: rgba(255,255,255,1);
	background: rgba(64,92,99,1);
}

/*==============bgcolor===============*/
.lightbg, .lightbg_o{
	box-sizing: border-box;
	padding:15px;
}

.lightbg_o{
	background: rgba(150,82,95,.1);
}


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

footer{
	height:auto;
	padding:50px;
	margin-top:100px;
	border-top:solid 1px rgba(220,220,220,1);
}

footer img{
	display:block;
	width:60%;
	margin:auto;
	padding-bottom:20px;
}

footer h4, footer h5{
	display:block;
	padding:0;
	margin:0;
	font-weight:normal;
}

footer ul{
	padding:0;
	list-style: none;
}

footer li{
	display:inline-block;
	padding:20px 30px 20px 0px;
}

footer a{
	color:rgba(0,0,0,1);
}

footer a:hover{
	color:rgba(150,150,150,1);
}


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

.logo{
	display:inline-block;
	width:60%;
}

.sh_tx{
	opacity: 0;
}

.shmorebt{
	opacity: 0;
}

.shbox:hover .shmorebt{
	opacity: 1;
}

.shbox:hover .sh_tx{
	opacity: 1;
}

.bbox{
	margin:0px 10px 10px;
}

/*card*/
.card, .bcard{
	padding:10px;
	margin:20px;
}

.scard{
	padding:30px;
}

.para_pad{
	padding-right:0px;
}

.date{
	padding:15px 0px;	
}

.submain, .submain2, .submain3, .submain4, .submain5, .submain6, .submain7, .submain8{
	background-position: left;
}

}

@media only screen and (min-width: 1200px) {
.logo{
	display:inline-block;
	width:30%;
}

#burbt{
	display:none;	
}

.mv iframe{
	height:250px;	
}

/*card*/
.card{
	padding:30px;
	margin:50px;
}

.scard{
	padding:60px;
}

.bcard{
	padding:10px;
	margin:20px 20px;
}

.subspace{
	box-sizing: border-box;
	padding: 50px 0px;
}

.para_pad{
	padding-right:30px;
}

.date{
	padding:15px 0px;	
}

a.r_btn{
	display:block;	
}

a.reg_btn{
	display:block;	
}

a.sreg_btn{
	display:none;	
}

.submain, .submain2, .submain3, .submain4, .submain5, .submain6, .submain7, .submain8{
	background-position: center;
}

}

/*rwd影片*/
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display: block;	

}

.video-container::before {
  display: block;
  content: "";
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  border: 0;
}