@import url("reset.css");
@import url("font-awesome.css");
@import url("../styleShare.css");


/* 基本設定 */
*{box-sizing: border-box; }
html,body{font-size: 18px;}
body{font-family: Arial, Helvetica, sans-serif,"微軟正黑體", "新細明體";	color: #666666;vertical-align:middle;background:#f1f1f1 url(../images/mapBg.png) no-repeat; background-position: center 500px; background-size: contain}
a{ text-decoration:none; color:#000;
}
a:hover{filter:alpha(opacity=50); /* IE */-moz-opacity:0.5; /* Moz + FF */opacity: 0.5; }




/* 頁首 */
#HEADER{ display: block; width:100%; height:300px; position:relative; overflow:hidden;}
#H1{ display:block; width:30rem; height:70px; background:url(../images/logoTitle.png) center center no-repeat; background-size:contain; text-indent:-9999px;margin-top:2rem;}
#H2{display: none;font:800 1.2rem  "Times New Roman", Times, serif;color:#000;text-shadow:0px 0px 5px #fff;padding-bottom: 1rem}
#H3{display: none;	max-width:1024px;color:rgba(0,0,0,0.8); font:0.8rem  Arial,"微軟正黑體","新細明體" ; line-height:1.2rem;text-align: center}
#WITHEZONE{display: flex;flex-direction: column; justify-content: center;align-items: center; width:100%; height:300px;
background:linear-gradient(183deg, rgba(255, 255, 255, 0.9)0%, rgba(255, 255, 255, 0)100%); 
background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.9)0%, rgba(255, 255, 255, 0)100%); 
background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.9)0%, rgba(255, 255, 255, 0)100%); 
background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.9)0%, rgba(255, 255,2550, 0)100%); }



/* 三區塊 */
#BOXZONE2 {}
#BOXZONE2 .Stittle01{ margin-bottom:0; border-bottom:none}
#BOXZONE2 ul{ display:flex;justify-content: space-around; flex-wrap: wrap }
#BOXZONE2 li{display:flex;flex-direction: column; flex-basis: 30%;flex-grow: 1;flex-shrink: 0; position:relative;margin:0 1rem 0;padding:0.5rem;}
#BOXZONE2 ol { background-color: rgba(255,255,255,0.8);border-top:rgba(0,102,102,0.8) 1px solid;padding: 2rem  2rem  6rem  2rem;height: 100%;}
#BOXZONE2 ol li{  border:0 none; margin:0 0 10px 0;position:relative;padding:0}

#BOXZONE2 ol li i{ width:20px; position:absolute; top:0 ; left:0}
#BOXZONE2 ol li a{ display:block; margin-left:20px;}
.boxtype1{margin:0 10px; padding:0 10px 20px 10px;;border:#666 1px solid;background-color:#fff;border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}
.listtypeNews {background: url(../images/point1.png) left top no-repeat;padding:0 0 10px 40px;}
.listtypeLink {background: url(../images/point2.png) left top no-repeat;padding:0 0 30px 40px; }
.more{ display:block; background:url(../images/more.png); width:37px; height:37px; margin:auto; text-indent:-9999px; position:absolute; bottom:30px; left:50%; margin-left:-16px;}
.more:hover{ background-position:bottom}

.showpage{ display:block; text-align:center;}
.showpage img{ border:rgba(0,102,102,1) 1px solid;box-shadow: 2px 2px 5px #ccc; -webkit-box-shadow: 2px 2px 5px #ccc; -moz-box-shadow: 2px 5px 5px #ccc; margin-bottom:15px;}

.jobbg{ background:url(../images/jobbg.png) center center no-repeat; background-size: cover}

/* 選單 */




#MENU{ display: none; width:50px; height:50px; font-size:20px; background-color:rgba(0,0,0,0.8);border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;position: fixed; top:4rem; right:2rem; color:#fff; line-height:50px; text-align:center;cursor: pointer; z-index:110;}

#MENUCLOSE{ display: block;  width:40px; height:40px; position: fixed; top:50px; right:30px; color:#fff; line-height:40px; text-align:center;cursor: pointer; z-index:110;}

#MAIN_NAV{ display:block; width:12rem;  background-color:rgba(0, 0, 0, 0.5); position: fixed; top:50px; right:30px;border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:10px 20px 20px 20px;color:#fff; z-index:100; }
#MAIN_NAV ul{}
#MAIN_NAV li{ font:17px "微軟正黑體", "新細明體", Arial; line-height:24px;cursor: pointer;}
#MAIN_NAV ol{ display: none;  padding:10px 0 10px 10px;  background-color: rgba(0,102,102,0.8);border-radius: 5px;-webkit-border-radius:5px;-moz-border-radius: 5px; }
#MAIN_NAV ol li{font:15px "微軟正黑體", "新細明體", Arial;line-height:18px; padding-bottom:5px;}
#MAIN_NAV a{  color:#fff;}
#MAIN_NAV a:hover{}
#MAIN_NAV h3{ color:rgba(255,255,255,0.5); font:30px "Times New Roman", Times, serif; padding-bottom:10px;}


/*20190328新增選單*/


/* 小選單 */
#SMENU{ position:absolute; top:20px; right:0; width:130px; border-left:#72183e 1px solid; padding:0 0 100px 0; }
#SMENU a{ display:inline-block; font:15px  "新細明體", Arial; line-height:20px; color:#666; padding-left:15px; margin-bottom:10px;}
.set{ border-left:#72183e 3px solid}



/* 三區時間 */
#TIMEALL{ display:none; width:100%; text-align:center; position:absolute; bottom:30px;justify-content: center;}
#TIMEALL li{  width:120px;height: 120px; font:18px Arial, Helvetica, sans-serif;background-color:#000;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px; color:#fff; padding-top:40px;filter:alpha(opacity=50); /* IE */-moz-opacity:0.5; /* Moz + FF */opacity: 0.5; margin:0 10px}
#TIMEALL li p{font:12px Arial, Helvetica, sans-serif;}

/* 登入 */
#LOGIN { color:#fff;line-height:20px;}

/* 內容 */
#CONTENT{display: block; width:100%; margin:auto; position:relative; }
.wordbox{ display:block; padding: 20px 160px 20px 50px}




/*adbanner*/
#OTHERLINK{ display:block; width:100%; overflow:auto;  text-align:center}
#OTHERLINK li{ display:block; float:left; width:calc(100%/3 - 22px); padding:5px 10px;}

/* 清除float */
.clearfloat{
clear:both;height:0;font-size:1px;line-height:0;}

/* 捲軸css*/
.Scroll {margin: 10px 5px 0px 0px;}


/*幻燈片*/
.changeBox_a1{float:left;width:100%;height:380px;padding:0;position:relative;top:0;}
.changeBox_a1 a{filter:alpha(opacity=100); /* IE */-moz-opacity:1; /* Moz + FF */opacity:1;}
.changeBox_a1 .a_bigImg{position:absolute;top:0;left:50%; margin-left:0;display:none; min-width:1024px;}
.a_last,.a_next{position:absolute;top:50%;width:40px;height:50px; background:url(../images/next.png) no-repeat;text-indent:-999em;overflow:hidden;}
.a_last{left:30px;background-position:0 0;}
.a_last:hover{filter:alpha(opacity=50); /* IE */-moz-opacity:0.5; /* Moz + FF */opacity:0.5;}
.a_next{right:30px;background-position:100% 0;}
.a_next:hover{filter:alpha(opacity=50); /* IE */-moz-opacity:0.5; /* Moz + FF */opacity:0.5;}

/*過期的最新消息*/
.fontcolorGray{ color:rgba(0,0,0,0.2)}

/*隱藏*/
.showhide{display:block}
.hideshow{display: none}
.toggle { display:none; background-color:#72183e ;width:20px; height:20px; padding:5px;  position:absolute; top:5px; left:10px;;z-index:400;border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; cursor:pointer}


/*滑動換圖*/
.viewerbg {background-color: rgba(255,255,255,0.8);border-top:rgba(0,102,102,0.8) 1px solid;height:100%; position:relative;padding: 1rem 0 2.5rem 0}
.viewerbox {width:300px;  font-size:15px; clear:both; margin:auto; overflow:hidden;}
.viewerboxFrame {display: flex; width:calc(100%*5); }
.viewerbox  img {width: 300px;   border:0;}
.viewerbox  a {display:block;  width:300px; height:100%; }
.viewerbox  p{ font-size:1.1em}
.btnbox1{ display:block; position:absolute; left:40px; top:calc(50% - 10px); cursor:pointer; font-size:3em}
.btnbox2{ display:block; position:absolute; right:40px; top:calc(50% - 10px); cursor:pointer; font-size:3em}


.viewerboxFrame2 {display: flex; width:calc(100%*5); }





@media (max-width: 1024px) {



	
	}



@media (max-width: 800px) {
	.showhide{display: none}
	.hideshow{ display: block}
	.toggle { display: block; position:fixed} 
		
	.goTOP{ right:1em; }

	#TOPBARUL{ left:10px}
	#TOPBARUL li{ padding:0 5px}
	#INPUTBOX{  margin-left:0; width:10em; }
	
	/* 頁首 */
	#HEADER{   min-height:400px;}
	#H1{ display:block; width:360px; height:70px; position:absolute; top:130px; left:calc(100%/2 - 180px) ; background:url(../images/logoTitle.png) center center no-repeat; background-size:contain; text-indent:-9999px;}
	#H2{display: none}
	#H3{ display:none}
	
	/* 三區時間 */
	#TIMEALL{ display:none; width:100%; text-align:center; position:absolute; bottom:30px;}
	#TIMEALL li{ display:inline-block; width:90px;height:65px;font:18px Arial, Helvetica, sans-serif; background-color:#000;border-radius:45px;-webkit-border-radius:45px;-moz-border-radius:45px; color:#fff; padding-top:25px;filter:alpha(opacity=50); /* IE */-moz-opacity:0.5; /* Moz + FF */opacity: 0.5; margin:0 10px}
	#TIMEALL li p{font:12px Arial, Helvetica, sans-serif;}

	
	/* 選單 */
	#MENU{width:45px; height:45px; font-size:24px; background-color:rgba(0,0,0,0.5);border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;position: fixed; top:0; right:0;  line-height:45px;}
	#MENUCLOSE{ display:none;width:45px; height:45px; font-size:24px; position: fixed; top:0; right:0;  line-height:45px;}
	
	#MAIN_NAV{ display: none; top:45px; right:0; height:calc(100% - 75px);border-radius:0;-webkit-border-radius:0;-moz-border-radius:0; overflow:auto}
	
	/* 三區塊 */
	#BOXZONE2 li{ float: none; width:100%;}
	#BOXZONE2 ol {padding:40px 10px;}
	#BOXZONE2 ol li{ font:1.5em  Arial, "微軟正黑體";  line-height:1.8em;width:100% ; }
	/*多行省略...*/
	.line_ellipsis p{ font:1em  Arial, "微軟正黑體"}

	
	#viewer { width:250px;height:350px;}
	#viewerFrame {width:calc(100%*3);clear:both; }
	#viewer img { width:100%; height:100%;  display:inline; border:0;}
	#viewer a {display:block; float:left; width:250px; height:350px;}
	#btn1{left:10px; }
	#btn2{ right:10px;}

.viewerboxFrame, .viewerboxFrame2 { width: calc(100% * 5) !important; }
	}