@charset "utf-8";
/* CSS Document */
/*--reset--*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}
ol, ul {
	list-style:none;
}
caption, th {
	text-align:left;
}
/*h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}*/
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
}

html {
	min-height: 100%;
	_height:100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	_height:100%;
	height: 100%;
}
a{text-decoration:none;}
/*--reset_END--*/

/*--共用版型--*/
body{ font-family:"微軟正黑體";}
   
/*背景漸層色*/  
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #BDEAEF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #BDEAEF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #BDEAEF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #BDEAEF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #BDEAEF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #BDEAEF 100%);

/*背景漸層色*/ 
 
  }
#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;    
    padding: 10px 15px;    
    font-size: 20px;
    background: #777;
    color: white;
    cursor: pointer;
}
html,body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
#DIV_PARENT {
    position: relative;
    background:rgba(0,0,0,0);
	// 這個DIV是提供定位點的父區塊，一般設為 relative
    // 提供定位點的父區塊，因為只提供定位點，一般不設定寬度與高度
} 

.clear_b{
	clear:both;
}	

.bg { width:100%; position: relative; margin:0; padding:0;}
.pp { position: fixed; z-index: -1; width: 100%; height: 559px; top:82px;}
.pp1_1 { width: 100%; height: 559px; }

.pp2 { width: 100%; text-align: center; margin-top: 100vh; background-color: white; padding:30px 0; }
.pp_title { font-size: 25px; font-family: 華康粗圓體,華康細圓體,Microsoft JhengHei,Comic Sans MS,arial,helvetica,sans-serif,DFKai-sb,MingLiU; }
.pp_btitle { font-size: 15px; font-family: MV Boli,Arial; margin:10px 0;}
.pp2_img { display: inline-block; margin:0px 15px; position: relative; z-index: 20; overflow: hidden; -webkit-box-shadow: 4px 4px 10px rgba(20%,20%,40%,0.5); -moz-box-shadow: 4px 4px 10px rgba(20%,20%,40%,0.5); box-shadow: 4px 4px 10px rgba(20%,20%,40%,0.5); }
.pp2_img_mobile { display: none; }
.pp2_img a::before { content: ""; position: absolute; top:-50%; right: 50%; bottom: -50%; left:50%; background: rgba(0,0,0,0.5); transition:all .5s ease; transform:rotate(45deg); }
.pp2_img a:hover:before { right: -30%; left: -30%; }
.pp2_img img { width: 240px; height: 290px; }
.comname { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; }
.comname h3 { width: 80%; position: relative; padding: 15px; color: white; font-size: 16px; line-height: 110%; word-break: break-all; border-bottom: 1px solid rgba(0,0,0,0.3); background: transparent; margin: 25px auto 0px auto; -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); transform: translate(200px, -200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-transform: uppercase; text-align: center; letter-spacing: 1px; }
.pp2_img:hover h3 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; top:20%; }
.comname p.more { font-size: 12px; display: inline-block; overflow: hidden; position: relative; text-align: center; text-decoration: none; padding:7px 14px; background: black; color:white; text-transform: uppercase; box-shadow: 0 0 1px #000; -webkit-transform: translate(0px, 100px); -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); transform: translate(0px, 500px); -webkit-transition: all 0.2s 0.1s ease-in-out; -moz-transition: all 0.2s 0.1s ease-in-out; -o-transition: all 0.2s 0.1s ease-in-out; -ms-transition: all 0.2s 0.1s ease-in-out; transition: all 0.2s 0.1s ease-in-out; }
.pp2_img:hover p.more { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 80px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; }
.pp_more { width: 60%; margin:30px auto; text-align: right; }
.pp_more img:hover { -moz-transform:translateX(30px);
-webkit-transform:translateX(30px);
-o-transform:translateX(30px);
-ms-transform:translateX(30px);
transform:translateX(30px); 
-moz-transition: all 200ms ease-out;
-webkit-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}

.pp3 { width: 100%; padding:30px 0; text-align: center; background: url(../img/pp3bg.png) no-repeat; background-size: cover; }
.pp3_img_box { width: 47%; margin:0px auto 20px; }
.pp3_img { display: inline-block; margin:10px 15px; width: 200px; height: 154px; position: relative; -webkit-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5); -moz-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5); box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5); }
.pp3_img:hover { opacity: 0.8; }
.pp3_white { width:100%; white-space:nowrap; overflow: hidden; letter-spacing: 1.2px; font-size: 17px; color:black; text-shadow:1px 1px rgba(255,255,255,0.8); padding:5px 0; position: absolute; bottom: 0; left:0; background: rgba(255,255,255,0.8); font-family: 華康粗圓體,華康細圓體,Microsoft JhengHei,Comic Sans MS,arial,helvetica,sans-serif,DFKai-sb,MingLiU;}

.pp4 { width: 100%; padding:30px 0 15px; text-align: center; background: white;}
.pp4_img_box { width: 100%; margin:0px auto; }
.pp4_img_li { width: 300px; margin:0px 1.5%; display: inline-block; vertical-align: top;}
.pp4_img { width: 190px; height: 190px; margin:0px auto; border-radius: 100%; overflow: hidden; }
.pp4_img:hover { opacity: 0.8; 
-moz-transition: all 200ms ease-out;
-webkit-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.Mr_su { margin:20px 0px; font-size: 21px; letter-spacing: 3px; font-family: 華康粗圓體,華康細圓體,Microsoft JhengHei,Comic Sans MS,arial,helvetica,sans-serif,DFKai-sb,MingLiU; }
.Mr_su_eng { font-size: 21px; margin-bottom: 20px; color:#0f5cc5; font-family: Arial; letter-spacing:3px; }
.Mr_su_con { font-family: DFKai-sb,Microsoft JhengHei; line-height: 1.4; letter-spacing: 2px; opacity: 0.75; }
.pp4_sub { width: 270px; margin:25px auto 5px; }
.pp4_sub img:hover { opacity: 0.8; }
.swiper-container { display: none; }

.pp5 { width: 100%; padding:30px 0; text-align: center; background: url(../img/pp5.jpg) no-repeat; }
.pp5_title { font-size: 25px; color:#f5efef; text-shadow:1px 1px rgba(0,0,0,0.8); font-family: 華康粗圓體,華康細圓體,Microsoft JhengHei,Comic Sans MS,arial,helvetica,sans-serif,DFKai-sb,MingLiU; }
.pp5_btitle { font-size: 15px; font-family: MV Boli,Arial; margin:10px 0; color:#f5efef; text-shadow:1px 1px rgba(0,0,0,0.8);}
.pp5_img_box { width: 100%; margin:0px auto; padding:50px 0 60px;}
.pp5_img { width: 265px; height:80px; padding:50px 0; margin:0px 0.5%; border-radius: 5px; display: inline-block; -webkit-box-shadow: 0 0 15px white; -moz-box-shadow: 0 0 15px white; box-shadow: 0 0 15px white; }
.pp5_img:hover { opacity: 0.8; }
.pp5_img_title { color:white; font-size: 22px; text-shadow:1px 1px rgba(0,0,0,0.8); font-family: Calibri,華康細圓體,Microsoft JhengHei,Comic Sans MS,arial,helvetica,sans-serif,DFKai-sb,MingLiU;}
.pp5_img_solid { width: 70%; margin:15px auto; border:1.8px solid white; -webkit-box-shadow: 1px 1px 10px black; -moz-box-shadow: 1px 1px 10px black; box-shadow: 1px 1px 10px black; }

.pp6 { width: 100%; padding:30px 0; text-align: center; background: white; }
.pp6_anews { width: 60%; margin: 10px auto 0px; padding: 5px 0; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.5); position: relative;}
.pp6_anews a:hover { opacity: 0.85; }
.pp6_img { float: right; }
.pp6_date { font-size: 18px; font-family: Eras Bold ITC,Hobo Std,Arial; }
.pp6_newstit { font-size: 18px; margin:5px 0px 0px 5px; line-height: 1.5; letter-spacing: 2px; color:#27678a; display: inline-block; font-family: 華康粗圓體,華康細圓體,Microsoft JhengHei,Comic Sans MS,arial,helvetica,sans-serif,DFKai-sb,MingLiU; }
.news_more { width: 200px; margin:20px auto 10px; }
.news_more:hover { opacity: 0.8; }
.gotop_ { position: fixed; bottom:2%; right:2%; cursor: pointer; background: white; border-radius: 100%; }












@media screen and (max-width: 1400px){
	.pp3_img_box { width: 60%;}
}
@media screen and (max-width: 1150px){
	.pp3_img_box { width: 100%; }
	.pp_more { width: 80%; }
	.pp4_img_li { margin:0px 1%; }
	.pp5_img { width: 233px; height: 63px; }
	.pp3_img_box { width: 75%; }
}
@media screen and (max-width: 1000px){
	.pp { height:auto; }
	.pp1_1 { height:auto; }
	.pp2 { margin-top: 40vh; }
	.pp3_img_box { width: 93%; }
	.pp4_img_li { width: 265px; }
	.pp5_img_box { width: 93%; }
	.pp5_img { width: 265px; height: 80px; margin:15px 2%; }
}

@media screen and (max-width: 880px){
	.pp2 { margin-top: 40vh; }
	.pp2_img img { width: 200px; height: 250px; }
	.pp_more { width: 90%; }
	.pp3_img_box { width: 100%; }
	.pp3_img { margin:8px 10px; }
	.pp4_img_li { display: none; }
	.pp5_img_box { padding:20px 0 30px; }
	.swiper-container { display: block; }
}
@media screen and (max-width: 720px){
	.pp2 { margin-top: 40vh; }
	.pp2_img { display: none; }
	.pp2_img_mobile { display: block; margin:0px 15px; position: relative; z-index: 20; overflow: hidden; }
	.pp2_img_mobile a::before { content: ""; position: absolute; top:-50%; right: 50%; bottom: -50%; left:50%; background: rgba(0,0,0,0.5); transition:all .5s ease; transform:rotate(45deg); }
	.pp2_img_mobile a:hover:before { right: -30%; left: -30%; }
	.pp2_img_mobile img { width: 240px; height: 290px; }
	.comname { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; }
	.comname h3 { width: 80%; position: relative; padding: 15px; color: white; font-size: 16px; line-height: 110%; word-break: break-all; border-bottom: 1px solid rgba(0,0,0,0.3); background: transparent; margin: 25px auto 0px auto; -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); transform: translate(200px, -200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-transform: uppercase; text-align: center; letter-spacing: 1px; }
	.pp2_img_mobile:hover h3 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; top:20%; }
	.comname p.more { font-size: 12px; display: inline-block; overflow: hidden; position: relative; text-align: center; text-decoration: none; padding:7px 14px; background: black; color:white; text-transform: uppercase; box-shadow: 0 0 1px #000; -webkit-transform: translate(0px, 100px); -moz-transform: translate(0px, 100px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); transform: translate(0px, 500px); -webkit-transition: all 0.2s 0.1s ease-in-out; -moz-transition: all 0.2s 0.1s ease-in-out; -o-transition: all 0.2s 0.1s ease-in-out; -ms-transition: all 0.2s 0.1s ease-in-out; transition: all 0.2s 0.1s ease-in-out; }
	.pp2_img_mobile:hover p.more { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 80px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; }
	.pp_more { width: 60%; margin:30px auto; text-align: right; }
	.pp_more img:hover { -moz-transform:translateX(30px);
	-webkit-transform:translateX(30px);
	-o-transform:translateX(30px);
	-ms-transform:translateX(30px);
	transform:translateX(30px); 
	-moz-transition: all 200ms ease-out;
	-webkit-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	}
	.pp2_img img { width: 160px; height: 210px; }
	.pp2_img:hover h3 { top:10%; }
	.pp2_img:hover p.more { transform: translate(0px, 50px); }
	.pp4_img { width: 150px; height: 150px; }
	.pp5_img_box { width: 100%; }
	.pp5_img { width: 233px; height: 63px; margin:15px 2%; }
	.pp6_anews { width: 80%; }
}
@media screen and (max-width: 550px){
	.pp2 { margin-top: 50vh; }
	.pp2_img img { width: 140px; height: 190px; }
	.pp_more { width: 85%; }
	.pp5_img { width: 183px; height: 75px; padding:40px 0;}
}
@media screen and (max-width: 480px){
	.pp2 { margin-top: 40vh; }
	.pp3_img { margin:7px 5px; width: 145px; height: 92px; }
	.pp5_img { width: 233px; height: 75px; }
	.pp6_newstit { font-size: 15px; }
	.pp6_img { display: none; }
}

@media screen and (max-width: 400px){
	.pp2 { margin-top: 40vh; }
}