@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,700&display=swap" rel="stylesheet');
@import url(base.css);
@import url(font-awesome.min.css);
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { height: 100%; }

body, th, td, input { font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif; font-size: 16px; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6{ font-weight: 400;}
h1 { font-size: 34px; font-family: 'Noto Sans TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin: 0 0 1em;}
h2 { font-size: 30px; font-family: 'Noto Sans TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}
h3 { font-size: 24px; font-family: 'Noto Sans TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}
h4 { font-size: 20px; font-family: 'Noto Sans TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}
h5 { font-size: 17px; font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}
h6 { font-size: 16px; font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}


p,li { font-size: 15px; line-height: 1.8em; color: #333;  }
a:link, a:visited { text-decoration: none; cursor: pointer; }

.loadbar { position: fixed; background: #0099d7; width: 0; height: 4px; top: 0; left: 0; z-index: 2000; overflow: hidden; -webkit-transition: 400ms ease-in-out; -moz-transition: 400ms ease-in-out; -ms-transition: 400ms ease-in-out; -o-transition: 400ms ease-in-out; transition: 400ms ease-in-out; }
.loadbar.ed { width: 0!important; border: none; right: 0; left: inherit; opacity: 0; }

.imgLiquidCenter, .imgLiquidFill{ opacity: 0; 
-webkit-transition: opacity 400ms ease-in-out;
   -moz-transition: opacity 400ms ease-in-out;
  	-ms-transition: opacity 400ms ease-in-out;
     -o-transition: opacity 400ms ease-in-out;
	    	transition: opacity 400ms ease-in-out;
}
.imgLiquid_ready { opacity: 1; }

/*Element*/
.ie { position: fixed; width: 60%; height: 80%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #CCC; z-index: 9999; }
.ie h2, .ie h4 { color: #333 !important; }
.ie p { text-align: center; color: #333 !important; font-size: 13px; }
.ie a { color: #F36; }


/*Package*/
.inner-width { position: relative; max-width:1200px; margin: auto; }
.txt-width { position: relative; max-width:800px; margin: auto; padding: 0 15px;}
.btn_send{ display: inline-block; color: #0099d7; padding: 5px 25px; border-radius: 5px; font-weight: 700; font-size: 18px; border: solid 1px #0099d7; background:#FFF; 
	transition: 500ms ease-in-out;
}
.btn_send:hover, .btn_send:active{ border: solid 1px #FFF; background: #0099d7; color: #FFF;}

.fc_1{ color: #0099d7}

.more_bar{ padding: 30px 10px;}
.more_bar.center{ text-align: center;}
.more_bar a{ display: inline-block;
	transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550), opacity 500ms ease-in-out;
}
.more_bar a:hover{ transform: scale(1.1);}

.btn_more{ display: inline-block; color: #0099d7; padding: 5px 25px; border-radius: 5px; font-weight: 700; font-size: 18px; border: solid 1px #0099d7; background:#FFF; 
	transition: 500ms ease-in-out;
}
.btn_more:hover{ border: solid 1px #FFF; background: #0099d7; color: #FFF;}

.btn_more.c2{color: #FFF; background:#0099d7; }
.btn_more.c2:hover{  background: #FFF; color: #0099d7;}

.pager_bar { padding: 30px; text-align: center; }
.pager_bar.right {  text-align: right; }
.pager_bar a { display: inline-block; line-height: 28px; width: 28px; text-align: center; margin: 0 4px 0 0; color: #333; font-size: 14px; border: solid 1px #f2f2f2; border-radius: 50%;}
.pager_bar.white a { color: #FFF;}
.pager_bar a.con { width: auto; padding: 0 10px;  border-radius: 14px;}
.pager_bar a.arrow { color: #93B54B; }
.pager_bar a:hover, .pager_bar a.cur { color: #FFF; background: #93B54B; }
.pager_bar.white a:hover, .pager_bar.white a.cur { background: #FFF; color: #93B54B; }

/*BLOCK*/
#wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden;}
#header { position:fixed; z-index:10000; width:100%; padding: 0; left:0;
    transition: 300ms ease-in-out;
}
#header .bg{ position: absolute; top: 0; left: 0; width: 100%; background: rgba(255,255,255,1); height: 60px;
	transition: 300ms ease-in-out;
}
#content { position: relative;}
#footer { position:relative; color: #FFF; padding: 15px ; overflow: auto; margin: auto; box-sizing: border-box; z-index: 100; background: #0099d7;}
#footer .copyright{ color: #FFF; font-size: 12px; text-align: center; padding: 10px; box-sizing: border-box; line-height: 30px;}
.media_box{ color: #FFF; font-size: 12px; text-align: center; padding:30px 10px; box-sizing: border-box; line-height: 30px; background: #FFF;}
.media_box a img{ height: 30px; width: auto; margin: 10px}


.info_box{ position: relative; padding: 40px 0 0; overflow: auto; background: #0099d7;}
.info_box .links{ position: relative; text-align: center;}
.info_box .links a{ display: inline-block; padding: 20px 10px; font-size: 24px; color: #FFF;
	transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550), opacity 500ms ease-in-out;
}



#full_block{ position:relative; z-index:10; }
#full_block.bg{ background: #FFF url(../images/news_bg.jpg) fixed no-repeat; background-size: cover;}
#full_block.bg2{ background: #FFF url(../images/jobs_bg.jpg) fixed no-repeat; background-size: cover;}
/**logo**/
.logo { position: relative; position: absolute; top: 5px; left: 5px; z-index: 20;
    transition: 500ms ease-in-out;
}
.logo img { 
    transition: 500ms ease-in-out;
}
.logo img.s1{ width: 50px; float: left;}
.logo img.s2{ float: left; display: block; width: 184px; margin: 15px 0 0 20px;}

#header.ed .bg{ background: rgba(255,255,255,0.95); }


.tip_1{ position: absolute; width: 48px; height: 40px; background: #222f65; z-index: 100; margin: 15px 0 0 0;}
.tip_1::before{ display: block; content: ''; position: absolute; bottom: -12px; left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 24px 0 0;
	border-color: #222f65 transparent transparent transparent;
}
.tip_1::after{ display: block; content: ''; position: absolute; bottom: -12px; right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 12px 0;
	border-color: transparent  #222f65 transparent transparent;
}

.tip_2{ position: absolute; left: 50%; width: 48px; height: 60px; background: #222f65; z-index: 100; margin: 0 0 0 -24px;}
.tip_2::before{ display: block; content: ''; position: absolute; bottom: -12px; left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 24px 0 0;
	border-color: #222f65 transparent transparent transparent;
}
.tip_2::after{ display: block; content: ''; position: absolute; bottom: -12px; right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 12px 0;
	border-color: transparent  #222f65 transparent transparent;
}


/*TOPMENU*/
.top_menu{ position: absolute; right: 5px; top: 6px; width:100%; z-index: 10;
	transition: 400ms ease-in-out;
}
.top_menu ul{ list-style:none; margin:0; padding:0; display:block; box-sizing: border-box; text-align:right; 
	transition: 400ms ease-in-out;
}
.top_menu ul li{ position: relative; display: inline-block; text-align:center;  margin:2px 10px;}
.top_menu ul>li>a{ position:relative; display:block;  font-size:15px; font-weight: 700; color:#000; padding:8px 15px; margin: 0; 
    transition: 500ms ease-in-out;
}
.top_menu ul.m1>li>a::before{ display: block; content: ''; position: absolute; top: 100px; left: 50%;  margin: 0 0 0 -2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: transparent transparent #0099d7 transparent;
	transition: 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.top_menu ul>li>a:hover::before, .top_menu ul>li>a.cur::before, .top_menu ul>li.on>a::before, .top_menu ul.m1>li:hover>a::before{ position: absolute; top: 45px; border-width: 0 4px 7px 4px;}
.top_menu ul>li:hover>a, .top_menu ul li a.cur{ color: #0099d7; }

.top_menu ul.submenu{ position: absolute; top: 55px; left:50%; margin: 0 0 0 -70px; max-height: 0; overflow: hidden; background: #FFF; width: 140px; border-radius: 5px;
	transition: 500ms ease-in-out;
}
.top_menu .on ul.submenu{ max-height: 400px;}
.top_menu ul.submenu li{ display: block; margin: 4px; }
.top_menu ul.submenu li:first-child { border:none; }
.top_menu ul.submenu a{ display: block; text-align: left; color: #0099d7; padding: 5px; font-size: 15px; line-height: 18px; text-align: center;}
.top_menu ul.submenu a:hover{ background: #0099d7; color: #FFF;}

.pic_item{ float: left; width: calc(100% / 5 - 10px); border: 4px solid #7DCEF4; margin:5px; box-sizing: border-box;
	transition: 200ms ease-in-out;
}
.pic_item.s2{ width: calc(100% / 2 - 10px); }
a.pic_item:hover{ transform: scale(1.05);}
.pic_1{ text-align: left; margin-bottom: 30px;}
.pic_1 img{ max-width: 100%; width: 500px; height: auto;}
.pic_left{ float:left; margin: 0 20px 0 0; max-width: 400px;}
.pic_left img{ width: 100%; height: auto;}
.pic_right{ float:right; margin: 0 0 0 20px; max-width: 400px;}
.pic_right img{ width: 100%; height: auto;}
.pic_center{ text-align: center; margin: 0 auto; max-width: 300px;}
.pic_center img{ width: 100%; height: auto;}

/*BANNER*/
.top_banner { height: 770px; width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 100; background-color:#001f3e;}
.top_banner ul{ margin: 0; list-style: none; height: 770px; background-color: #0e1b29;}
.top_banner .item{ position: relative; display: block; height: 770px;}
.top_banner .pic{ display: block; height: 100%; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0;
	transition: opacity 800ms ease-in-out;
}
.top_banner .txt{ position: absolute; width: 100%; height: 100%; z-index: 100; box-sizing: border-box; padding: 0 0 0 0; }
.top_banner .txt img{ display: inline-block;}
.top_banner .txt h1{ color:#FFF; font-size: 54px; margin: 15% 0 0; font-weight: 700; text-align: right; letter-spacing: 0.1em;}
.top_banner .txt p{ color:#FFF; text-shadow: 0 0 5px rgba(0,0,0,0.5); font-size:20px;}
.top_banner .info{ position: absolute; bottom: 0; left: 0; width: 100%; height: auto; text-align: left; z-index: 100; box-sizing: border-box; padding: 20px;  background: rgba(0,153,215,0.8);}
.top_banner .info ul{ background: transparent; height: auto;}
.top_banner .info .mv{ display: block; border-radius: 5px; overflow: hidden; float: left; width: calc(50% - 100px); box-sizing: border-box; margin:0 50px; height: 300px;}
.top_banner .info .view{ float: left; width: 50%; box-sizing: border-box; padding: 30px;}
.top_banner .info .view h2{ font-size: 42px; color: #FFF; font-weight: 700; margin: 0 0 10px 0; line-height: 1.2em;}
.top_banner .info .view h2 span{ display: block; font-size: 30px; line-height: 1.4em;}
.top_banner .info .view p{ font-size: 15px; line-height: 24px; overflow: hidden; max-height: 72px;}

.page_banner { height: 310px; width: 100%; position: relative; top: 0; left: 0;  overflow: hidden; background-color:#000; border-bottom: 8px solid #0099d7; padding: 60px 0 0 0;}
.page_banner ul{ margin: 0; list-style: none; height: 770px; background-color: #0e1b29;}
.page_banner .item{ position: relative; display: block;}
.page_banner .pic{ display: block; height: 310px; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0; opacity: 0.4;
	transition: opacity 800ms ease-in-out;
}
.page_banner .txt{ position: absolute; width: 100%; height: auto; text-align: center; z-index: 100; box-sizing: border-box; padding: 100px 0 0 0; }
.page_banner .txt h1{ color:#FFF; font-size: 40px; font-weight: 700; line-height: 1.4em; margin: 5px 0 10px; text-align: center; letter-spacing: 0.1em;}
.page_banner .txt p{ color:#FFF; font-size: 20px; font-weight: 700; line-height: 1.2em; margin: 0; text-align: center; letter-spacing: 0.1em;}
.page_banner .txt h1 a{ color: #0099d7; padding: 0 10px 0 0;}

#path{ padding:5px; background: #656d4f; color: #FFF; font-size: 14px; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#path a{ color:#FFF;}


/*INDEX*/
.inx_pro_box{ position: relative; z-index: 100; margin: 0; padding: 0; box-sizing: border-box; }
.inx_pro_box .pic{ width: calc(50% - 160px); margin:40px 80px; float: left; height: 400px;}
.inx_pro_box .txt{ width: calc(50% - 80px); margin:100px 40px; float: left;}
.inx_pro_box .txt h3{ font-size: 18px; margin: 0 0 5px 0; line-height: 1.1em;}
.inx_pro_box .txt h4{ font-size: 50px; margin: 0 0 10px 0; line-height: 1.1em;}
.inx_pro_box.right{ background: #0099d7; color:#FFF;}
.inx_pro_box.right p{ color:#FFF;}
.inx_pro_box.right .pic{  width: calc(50% - 140px); float: right; height: 450px; margin:-40px 70px 40px; }
.inx_pro_box.page{ background: #0099d7; color:#FFF;}
.inx_pro_box.page p{ color:#FFF;}
.inx_pro_box.page .txt{ width: calc(50% - 80px); margin:40px;}
.inx_pro_box.page .pic{ width: calc(50% - 160px); margin:-60px 80px 0; float: left; height: 300px;}
.inx_pro_box.view .pic{ width: calc(100% - 160px); margin:-100px 80px 0; float: none; height: 340px;}
.inx_pro_box.view .txt{ width: calc(100% / 3 - 40px); margin:20px;}
.inx_pro_box.view .txt h4{ font-size: 20px; margin: 0 0 10px 0; line-height: 1.1em;}
.inx_pro_box.view .txt ul{ padding: 20px 0;}


.inx_rec_box{ position: relative; z-index: 100; margin: 0; padding: 80px 0; box-sizing: border-box; text-align: center; }
.inx_rec_box .bg{ position: absolute; background: url(../images/index/bg_rec.jpg) fixed; background-size: cover; z-index: -1; top:0; left: 0; width: 100%; height: 100%;}
.inx_rec_box h3{ font-size: 18px; margin: 0 0 5px 0; line-height: 1.1em;}
.inx_rec_box h4{ font-size: 50px; margin: 0 0 30px 0; line-height: 1.1em;}
.inx_rec_box ul{ position: relative; display: block; list-style: none; margin: 0;}
.inx_rec_box li{ position: relative; display: block; float: left; width: calc( 100% / 3 - 20px); margin: 10px; height: 320px; background: #000;}
.inx_rec_box li .pic{ height: 100%; opacity: 0.7;
	transition: opacity 400ms ease-in-out;
}
.inx_rec_box .txt{ position: absolute; padding: 30px; box-sizing: border-box; width: 100%; height: 100%; top:0; left: 0; color: #FFF; text-align: center;}
.inx_rec_box .txt::before{ position: absolute; top:0; right: 0; content: ''; display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: transparent #0099d7 transparent transparent;
	transition: 400ms ease-in-out;
}
.inx_rec_box .txt h3{ font-size: 18px; padding: 35% 0 0 0; line-height: 1.4em;
	transition: 400ms ease-in-out;
}
.inx_rec_box .txt p{ font-size: 14px; opacity: 0; color: #FFF;}
.inx_rec_box .txt .btn_more{ opacity: 0;}
.inx_rec_box li:hover .pic{ opacity: 0.1;}
.inx_rec_box li:hover .txt h3{ padding: 10% 0 0 0; margin: 0 0 30px 0; color: #0099d7;}
.inx_rec_box li:hover .txt p{  opacity: 1;}
.inx_rec_box li:hover .txt .btn_more{  opacity: 1;}
.inx_rec_box li:hover .txt::before{ border-width: 0 40px 40px 0;}
.inx_rec_box.page li{height: 240px;}
.inx_rec_box.page .txt h3{ padding: 20% 0 0 0;}


.inx_tec_box{ position: relative; z-index: 100; margin: 0; padding: 30px 0 0; box-sizing: border-box; text-align: center; background: #0099d7;}
.inx_tec_box h3{ font-size: 18px; margin: 0 0 5px 0; line-height: 1.1em; color: #FFF;}
.inx_tec_box h4{ font-size: 50px; margin: 0 0 30px 0; line-height: 1.1em; color: #FFF;}

/*-----*/

/*pro_box*/
.pro_box{ position: relative; padding:20px 0; overflow: hidden; z-index: 1;}
.pro_box ul{ display: block; margin: 0; list-style: none;}
.pro_box li{ display: block; width: 100%; }
.pro_box .item{ position: relative; margin: 0 0 60px 0;}
.pro_box .txt{ box-sizing: border-box;
	transition: 400ms ease-in-out;
}
.pro_box .txt p{ color: #FFF; margin: 0 10px;}

.pro_box .list{ position: relative; display: block; width: calc(100% / 3 - 20px); float:left; box-sizing: border-box; padding: 20px; margin: 100px 10px 0;
	transition: 400ms ease-in-out;
}
.pro_box .list:hover {  background: #0099d7;}
.pro_box .list .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: #FFF;}
.pro_box .list .pic{ position: absolute; bottom: 5%; left: 15%;  width: 70%; z-index: 100;
	transition: 400ms ease-in-out;
}
.pro_box .list .pic img{ max-width: 100%; display: block !important;}
.pro_box .list .name{ font-size: 20px;  margin: 200px 0 10px 0; font-weight: 700; color: #0099d7;}
.pro_box .list p{ font-size: 16px; color: #333; margin: 0; font-size: 14px;}
.pro_box .list:hover .pic{ transform: scale(1.1); bottom: 8%;	}
.pro_box .list:hover .name{ color:#FFF;}
.pro_box .list:hover p{ color:#FFF;}

.inner_box{ padding:60px 0; }
.inner_box.last{ padding:60px 0 0; }
.inner_box.bg_1{ background: #f2f2f2;}
.inner_box.notop{ padding: 0 0 100px 0;}
.inner_box.nobom{ padding: 100px 0 0 0;}
.inner_box .title{ color: #0099d7;}
.inner_box .title a{ padding: 0 10px 0 0;}
.inner_box .title_box h3{ position: relative; display:block; font-size:30px; line-height:42px; color:#4b4b4b; margin:0 0 40px 0;}
.inner_box>.date{ font-size:20px; color:#93B54B; font-weight: 300;}
.inner_box>h5{ font-size:20px; color:#93B54B; font-weight: 300; margin-top: -30px;}

.inner_box.index h3.index{ font-size: 18px; margin: 0 0 10px 0; line-height: 1.1em; text-align: center}
.inner_box.index h4.index{ font-size: 50px; margin: 0 0 50px 0; line-height: 1.1em; text-align: center}

.cols{ overflow: auto; margin: 0 0 20px 0;}
.cols .w33{ float: left; width: 33.33%;}
.cols .w66{ float: left; width: 66.66%;}
.cols .lw25{ float: left; width: 25%;}
.cols .lw75{ float: left; width: 75%;}
.cols .rw23{ float: right; width: 23%;}

.edit th, .edit td, .edit li{ font-size:14px;line-height:1.4em; color:#555;}
.edit li{ margin:0 0 10px 0;}
.edit th, .edit td{ padding:4px; border: solid 1px #CCC;}
.edit p{font-size:15px;line-height:1.8em; margin:0 0 15px 0; color:#555; }
.edit img{ max-width:100%; height:auto !important;}
.edit iframe{ max-width:100%; }
.edit ol, .edit ul{ margin:0 0 1em 3em; font-size:15px;}
.edit .mv{ max-width:640px; margin:0 auto 20px;}
.edit a{ color: #0096D6; text-decoration: underline;}

/*photos*/
.pho_box{ position: relative; padding: 40px 0;}
.pho_box ul{ display:block; list-style:none; margin:0;}
.pho_box a{ position: relative; display:block; float:left; width:calc( 100%/4 - 10px); height: 240px; overflow: hidden; box-sizing: border-box; margin: 5px;}
.pho_box a:nth-child(6n-5){ width:calc( 100%/2 - 10px); }
.pho_box a:nth-child(6n){ width:calc( 100%/2 - 10px); }
.pho_box a img{ position: absolute; display: block !important; top: 50%; left: 50%; opacity: 0; width: 0%; height: 0%;}
.pho_box a figure{ display: none;}
.pho_box a::before{ display: block; content: ''; position: absolute; background: #0099d7; opacity: 0; z-index: 1; width: 100%; height: 100%;
	transition: 500ms ease-in-out;
}
.pho_box.s2 a::before{ background: #222f65;}
.pho_box a::after{ display: block; position: absolute; color:#FFF; opacity: 0; z-index: 2; width: 100%; height: 240px; line-height: 240px; text-align: center; font-size: 24px;
	font-family: FontAwesome; font-weight: 900; content: "\f00e";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
}
.pho_box a:hover::before{ opacity: 0.7;}
.pho_box a:hover::after{ opacity: 1;}
.pho_box.s1 { padding: 20px 0;}
.pho_box.s1 a{ margin: 0;  width:calc( 100%/4) !important;}
.pho_box.s3 .item{ position: relative; display:block; float:left; width:calc( 100%/4 - 20px); height: 240px; overflow: hidden; box-sizing: border-box; margin: 10px;}

.forms_box{ position: relative; max-width: 600px; margin: 53px auto 0;}
.forms_box>h1{ font-size: 36px; color: #34af68; font-weight: 700; padding: 0;}
.forms_box img{ max-width:100%; margin:0 0 20px 0;}

.forms_box .t1 { position: relative; width: 100%; line-height: 32px; background: #FFF; border:solid 1px #CCC; margin: 0 0 10px 0; border-radius: 4px; box-sizing: border-box;}
.forms_box .t1::-webkit-datetime-edit-fields-wrapper{ text-indent: 8px; color: #545454; font-size: .95em;}

.forms_box .icon_id:after{ position:absolute; top:5px; right:5px; font-size:16px; color:#999; z-index: 100;
content: "\f0e0"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; margin:0 5px 0 0;}
.forms_box .icon_pw:after{ position:absolute; top:5px; right:9px; font-size:16px; color:#999; z-index: 100;
content: "\f023"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; margin:0 5px 0 0;}

.forms_box .t2 { width: 100%; height: 96px; background: #FFF; border:solid 1px #CCC; margin: 0 0 10px 0; border-radius: 4px; padding: 10px;
	font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif;
	color: #333;
    font-size: .95em;
}
.forms_box .nec{ font-size: 18px; font-weight: bold; color: #f0ba15;}
.forms_box label { position: relative; display: block; margin:  0;}
.forms_box label h3{ color: #0099d7; font-size: 18px; font-weight: bold; margin: 0 0 5px 0;}
.forms_box label h5{ color: #4b4b4b; font-size: 15px; font-weight: 400; margin: 0 0 5px 0;}
.forms_box label a{ color:#0099d7;}
.forms_box input[type="checkbox"]{ margin: 0 4px 0 0;}
.forms_box .cols{ margin: 0 -1%; overflow: auto;}
.forms_box .col2{ position: relative; margin: 0 1%; width: 48%; float: left;}
.forms_box .col3{ position: relative; margin: 0 1%; width: 31.33%; float: left;}
.forms_box .col4{ position: relative; margin: 0 1%; width: 23%; float: left;}

.forms_box .enter_bar{ padding:20px 0; text-align: center;}

.forms_box select { width: 100%; background: #FFF ;  border:solid 1px #CCC; border-radius: 0; height: 32px; font-size: .9em; margin: 0 0 10px 0; color: #545454; text-indent: 5px;}
.forms_box ::placeholder{ color: #545454;}
.forms_box input.file{ opacity:0; cursor:pointer; width: 100%; height: 40px;}
.forms_box em.tips{display: block; margin:-10px 0 20px 0; font-size: 13px; color: #666; padding: 0 2px;}

.forms_box .upload{ position:relative; background:#3c92d3; border-radius:4px; text-align:center; width:100%; overflow:hidden; }
.forms_box .upload:hover{ background:#6cb5ed;}
.forms_box .upload:before{ font-size:16px; content:'\f093  選擇上傳檔案';font-family: FontAwesome, 'Noto Sans TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; color:#FFF; position:absolute; top:0; left:0; width:100%;line-height:40px;  }
.forms_box .upload .done{ opacity:0; font-size:16px; font-family: FontAwesome ; color:#FFF; position:absolute; top:0; left:0; width:100%; line-height:40px; background:#999;  font-family: 'Noto Sans TC', Microsoft JhengHei, Arial, Helvetica, sans-serif;}
.forms_box input.file{ opacity:0; cursor:pointer;}

/*NEWS*/
.news_box{ position: relative; padding:80px 0; overflow: hidden; z-index: 1;}
.news_box .title{ position: relative;  margin: 0 0 1.5em 0; font-weight: 400; font-size: 30px; text-align: center;}
.news_box ul{ display: block; list-style: none; margin: 0;}
.news_box li{ position: relative; display: block; float: left; width: calc( 100%/3);}
.news_box.news li{ position: relative; display: block; float: left; width: calc( 100%/4);}
.news_box li a{ position: relative; display: block; margin: 10px; box-sizing: border-box; }
.news_box li a .pic{ width:100%; height: 240px;
	transition: opacity 400ms ease-in-out, -webkit-filter 400ms ease-in-out, transform 400ms ease-in;;
}

.news_box.news li a .pic{ height: 200px;}
.news_box.news li:nth-child(8n-7){ width: calc( 100%/2);}
.news_box.news li:nth-child(8n-7) a .pic{ height: 498px;}
.news_box.news li:nth-child(8n){ width: calc( 100%/2);}
.news_box li a .txt{ box-sizing: border-box; padding:15px 10px;}
.news_box li a .date{ position: absolute; bottom:90px; left:10px; color: #FFF; font-size: 24px; line-height: 24px; font-family: 'Teko', '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif;}
.news_box li a .txt h3 { margin: 0; color: #333; font-size: 16px; line-height: 20px; height: 40px; overflow: hidden; margin: 0 0 0.5em 0;}
.news_box li a .txt p{ color: #333; font-size: 14px; line-height: 20px; height: 60px; overflow: hidden; margin: 0;}
.news_box li:hover { z-index: 1;}
.news_box li a:hover h3{ color:#0099d7;}
.news_box li a:hover .date{ color:#0099d7;}
.news_box li.mix { display: none; }


/*new 20200615*/
.video_list{ max-width: 860px; margin: -150px auto 15px;}
.video { position: relative;
    padding-bottom: 56.25%;
}
.video iframe{  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}
.pho_list{ position: relative; max-width: 860px; margin: auto;}
.pho_list ul{ display: block; list-style: none; margin: 0;}
.pho_list li{ display: block; width: 100%; }
.pho_list a{ position: relative; display: block; width: 100%; background: #FFF;}
.pho_list a figure{  position: absolute; display: block; z-index: 1; bottom: 0; left: 0; width: 100%; box-sizing: border-box; background: rgba(0,0,0,0); color: #FFF; padding: 10px; text-align: center; opacity: 0;
	transition: 500ms ease-in-out;
}
.pho_list a img{ position: absolute; display: block !important; overflow: hidden; top: 50%; left: 50%; width: 0 !important; height: 0 !important;}
.pho_list a::before{ display: block; content: ''; background: rgba(1, 154, 214, 1); opacity: 0; z-index: 1; top: 0; left: 0%; width: 100%; padding: 0 0 56.25% 0;
	transition: 500ms ease-in-out;
}
.pho_list a::after{ display: block; position: absolute; color:#FFF; opacity: 0; z-index: 2; top: 50%; left:50%; margin: -12px 0 0 -12px; width: 100%; font-size: 24px;
	font-family: "FontAwesome"; font-weight: 900; content: "\f00e";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
	text-shadow: 0 0 0 10px rgba(0,0,0,0.2);
}
/* .pho_list a:hover figure{ background: rgba(0,0,0,0.6); opacity: 1;} */
.pho_list a:hover::before{ opacity: 0.8;}
.pho_list a:hover::after{ opacity:1;}


.pho_list .owl-theme .owl-nav{ position: absolute; width: 100%; bottom: initial; top: 50%; margin-top: -20px;}

.pho_list .owl-theme .owl-nav .owl-next {
    position: absolute;
    top: 0%;
    right: -40px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #0198d6;
	margin-top: -20px;
	margin: 0;
	padding: 0;
	border-radius: 0;
}
.pho_list .owl-theme .owl-nav .owl-next::after{ color: #FFF; font-size: 24px;
	font-family: "FontAwesome"; font-weight: 900; content: "\f105";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.pho_list .owl-theme .owl-nav .owl-prev {
    position: absolute;
    top: 0%;
    left: -40px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #0198d6;
	margin-top: -20px;
	margin: 0;
	padding: 0;
	border-radius: 0;
}
.pho_list .owl-theme .owl-nav .owl-prev::after{ color: #FFF; font-size: 24px;
	font-family: "FontAwesome"; font-weight: 900; content: "\f104";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.pho_list .owl-theme .owl-nav .disabled {
    opacity: 0.2;
}

/*RWD*/
.desk-show { display: block !important;}
.mobile-show { display: none !important; }
.peload{ opacity:0;
	transition: opacity 400ms ease-in-out;
}
.peload.ed{ opacity:1;}
.pehide.ed{ display:none;}
.phone_btn{ display: none;}

@media only screen and (max-width: 1280px) {
	.inner-width { box-sizing: border-box; padding: 0 10px;}
	
	.pic_item{ width: calc(100% / 4 - 10px);}
	.top_menu ul li{ margin:2px 5px;}

	.pho_list .owl-theme .owl-nav .owl-next { right: 0; }
	.pho_list .owl-theme .owl-nav .owl-prev { left: 0; }
}

@media only screen and (max-width: 1024px) {
	.top_banner .txt h1{ font-size: 40px; margin: 15% 5% 0 0;}
	.inx_rec_box li .pic{ opacity: 0.4;}
	.top_menu ul li{ margin:2px 0;}
	.top_menu ul>li>a{ padding: 8px;}
}


@media only screen and (max-width: 800px) {
	.desk-show { display: none!important; }
	.mobile-show { display: block!important; }

	h1 { font-size: 26px; }
	h2 { font-size: 22px; }
	h3 { font-size: 20px; }
	h4 { font-size: 15px; }
	h5 { font-size: 14px; }
	h6 { font-size: 14px; }

	/*MENU*/
	.menu_btn{ position: absolute; top:0; right:0; display:block; width:60px; height:60px; z-index:3000; cursor: pointer;} 
	.menu_btn>div{ position:absolute; width:24px; height:2px; background:#0099d7; left:12px;
		transition: 0.2s ease-in;
	}
	.menu_btn.on>div{ background: #FFF;}
	.menu_btn .m1{ top:20px;}
	.menu_btn .m2{ top:28px;}
	.menu_btn .m3{ top:36px; }
	.menu_btn:hover .m1,.menu_btn:hover .m2,.menu_btn:hover .m3{ width:24px;}
	.menu_btn.on .m1{  top:29px; width: 24px;
		transform: rotateZ(45deg);
	}
	.menu_btn.on .m2{ opacity: 0;
		width:0; left:50%;
	}
	.menu_btn.on .m3{  top:29px; width: 24px;
		transform: rotateZ(-45deg);
	}

	.top_menu{ padding: 60px 0 0 0;  background: #0099d7; position:fixed; top:0; right:-100%; width:270px;  z-index:100; height: 100%; box-sizing: border-box;
		transition: 400ms ease-in-out;
	}
	.top_menu ul{ list-style:none; margin:0; padding:0 20px; width:100%; display:block; box-sizing: border-box;
		transition: 400ms ease-in-out;
	}

	.top_menu ul>li{ display: inline; text-align:center; border-left:none; float: none; margin: 0;}

	.top_menu ul>li>a{ position:relative; display:block; font-weight: 400; color:#FFF; padding:20px; text-align: center; line-height: 1.2em; border-top:solid 1px #FFF; font-size: 15px;
		transition: 500ms ease-in-out;
	}
	.top_menu ul>li:first-child>a{ border: none;}
	.top_menu ul>li>a.cur, .top_menu ul>li>a:hover{ color: #FFF;}

	.top_menu.on{ right:0; overflow:auto; -webkit-overflow-scrolling: touch;}
	.top_menu_mask{ display:block; position:fixed; top:0; left:100%;; width:100%; height:100%; z-index:1; opacity:0; background: rgba(0,0,0,0.8);
		transition: opacity 400ms ease-in;
	}
	.top_menu_mask.on{ left:0; opacity:1;}
	
	.top_menu ul ul>li>a{ position:relative; display:block;  font-size:16px; color:#686868; padding:2px 40px; text-align: left; margin: 0 -30px;
		transition: 500ms ease-in-out;
	}
	
	.top_menu ul.submenu {
		max-height: 400px;
		position: relative;
		top: 0;
		left: 0;
		margin: 0 auto 10px;
		background: #001f3e;
		width: auto;
		border-radius: 5px;
		
	}
	.top_menu ul.submenu a{ border-color: #1a4e83; color:#FFF;}

	.top_banner{ height: 1024px;}
	.top_banner .item{ height: 1024px;}
	.top_banner .info .mv{ float: none; width: calc(100% - 100px); }
	.top_banner .info .view{ float: none; width:100%; text-align: center;}

	.inx_pro_box .pic {margin: 20px 80px; height: 300px; width: calc(50% - 80px);margin: 40px;}
	.inx_pro_box.right .pic { height: 300px; width: calc(50% - 80px); padding: 20px 0 0 0; margin: 0 40px 40px;}
	.inx_pro_box .txt  {margin: 40px;}

	.inx_rec_box li{ width: calc( 100% - 20px);}
	.inx_rec_box .txt{ width: 100%;}
	.inx_rec_box .txt h3{ padding: 15% 0 0 0;}

	.top_banner .info .view{ padding: 20px 0;}
	.top_banner .info .view h2{ font-size: 30px;}
	.top_banner .info .view h2 span{ font-size: 20px;}

	.page_banner .txt h1{ font-size: 30px;}
	.inx_pro_box.view .txt{ width: calc(100% - 40px);}
	.inx_pro_box.view .txt ul{ padding: 10px 0;}

	.inx_pro_box.page .txt{ width: calc(100% - 40px); margin: 20px;}
	.inx_pro_box.page .txt ul{ padding: 10px 0;}

	.inx_pro_box.page .pic {
		width: calc(100% - 80px);
		margin: -100px 40px 50px;
		height: 200px;
	}

	.pro_box .list { width: calc(100% / 2 - 20px); }

	.news_box.news li{ position: relative; display: block; float: left; width: calc( 100%/2);}

	.news_box.news li a .pic{ height: 200px;}
	.news_box.news li:nth-child(8n-7){ width: calc( 100%/2);}
	.news_box.news li:nth-child(8n-7) a .pic{ height: 498px;}
	.news_box.news li:nth-child(8n){ width: calc( 100%/2);}

	.pic_item{ width: calc(100% / 3 - 10px);}
	.pic_item.s2{ width: calc(100% - 10px); }
}
@media only screen and (max-width: 640px) {

	.inner-width{ padding: 0 20px;}

	.logo{ top: 10px; left:10px}
	.logo img.s1{ width: 40px;}
	.logo img.s2{ margin: 7px 0 0 20px;}

	.top_banner{ height:650px;}
	.top_banner .item{ height: 650px;}
	.top_banner .pic{background-position: 30% top !important;}
	.top_banner .txt h1 { font-size: 20px; margin:30% 5% 0 0;}
	.top_banner .info .mv { width: calc(100% ); margin:0 ; height: 140px;}
	.top_banner .info .view h2{ font-size: 22px;}
	.top_banner .info .view h2 span{ font-size: 16px;}

	.page_banner { height: 260px;}
	.page_banner .pic{ height: 260px;}
	.page_banner .txt{ padding: 90px 0 0 0;}

	.inx_pro_box{ padding: 20px 0;}
	.inx_pro_box .txt h4, .inx_rec_box h4, .inx_tec_box h4{ font-size: 30px;}
	.inx_pro_box .pic, .inx_pro_box .txt, .inx_pro_box.right .pic, .inx_pro_box.right .txt{ width: auto; float: none; margin: 10px; text-align: center;}
	.inx_rec_box{ padding: 30px 0;}

	.inx_pro_box.view .pic {
		width: calc(100%);
		margin: -80px 0 20px;
		height: 240px;
	}

	.inx_pro_box.view .txt {
		width: calc(100% - 10px);
		margin: 5px;
	}

	.inx_pro_box.view .txt h4{ font-size: 18px;}

	.pro_box .list { width: calc(100% - 20px);  margin: 20px 10px 0;}


	.news_box.news li{ position: relative; display: block; float: left; width: calc( 100%);}

	.news_box.news li a .pic{ height: 200px;}
	.news_box.news li:nth-child(8n-7){ width: calc( 100%);}
	.news_box.news li:nth-child(8n-7) a .pic{ height: 200px;}
	.news_box.news li:nth-child(8n){ width: calc( 100%);}

	.pic_item{ width: calc(100% / 2 - 10px);}

}
@media only screen and (max-width: 414px) {
	
}
@media only screen and (max-width: 375px) {

	.pic_item{ width: calc(100% - 10px);}

}
@media only screen and (max-width: 320px) {

}