body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, section, article, footer {
  padding: 0;
  margin: 0;
}
body {
  background: #fff;
  font-family: Roboto, Verdana, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu;
}
/* Reset */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Clearfix hack */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
section, article, footer {
  display: block;
}
img {
  border: 0;
  display: block;
  margin: 0 auto;
}
ul, ol, li {
  list-style-type: none;
  list-style-image: none;
}
a:link, a:visited {
  text-decoration: none;
  outline: 0;
}
a:hover {
  text-decoration: none;
  outline: 0;
}
.wrap {
  display: block;
  position: relative;
  width: 100%;
  
}
/*- Header --------------------------------------------------------------------------*/

.hdr {
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, 0);
	z-index: 1;
	padding: 20px;
}
.hd-logo {
display: inline-block;
  idth: 144px;
  margin-right: 15px;
}
.hd-logo a img{ max-width: 100%;}

.share_area{
	display:block;
	width:70px;
	height:25px;
	float:right;
	margin-top:0;
}
.img_f a,.img_f a:hover ,.img_l a ,.img_l a:hover{
	float:left;
	margin:0 5px;
	width:25px;
	height:25px;
	text-indent:-9999px;	
	}

.img_f a{background:url(../img/fbs.png) no-repeat 0 0; opacity: .8;}
.img_f a:hover{background:url(../img/fbs.png) no-repeat 0 0;opacity: 1; transition: opacity .5s ease;}
.img_l a{background:url(../img/line.png) no-repeat 0 0;opacity: .8;}
.img_l a:hover{ background:url(../img/line.png) no-repeat 0 0;opacity: 1;transition: opacity .5s ease;} 

.cov_kv{  width: 100%; margin:  0 auto; }
.cov_kv_m{ display: none;}
.cov_kv img,.cov_kv_m img{ max-width: 100%;}

.main_txt{ position: absolute;z-index: 2; width: 874px; left:50%; margin-left: -437px; top:225px;}
.case01{position: absolute;z-index: 3; width: 378px; left:8%;  top:320px;}
.case02{position: absolute;z-index: 4; width: 440px; right:4%;  top:80px;}
.case03{position: absolute;z-index: 5; width: 316px; right:15%;  top:660px;}
.main_txt img,.case01 img,.case02 img,.case03 img{ max-width: 100%;}

/*Section02*/
.page_cont{display: block; overflow: hidden; width: 100%; background: url("../img/earth.png") no-repeat 400px 0;}
.content{display: block; overflow: hidden; width: 1200px; margin: 20px auto;}
.content h3{ font-size: 40px; line-height: 50px; color: #000; text-align: center;}
.content h3 span{ font-size:48px; color: #b70303;}
.content h4{ font-size: 24px; line-height: 40px; color: #333; font-weight: normal; margin-top: 50px;}
.content h4 span{ color: #000; font-weight:600;}

.area_tt{ display: block; width: 400px; margin: 30px auto; border-bottom: 2px solid #b70303;border-top: 2px solid #b70303; padding: 10px 0 5px 0;}
.area_tt img{ display: inline-block; margin-right: 15px;}
.area_tt p{ display: inline-block; font-size: 48px; color: #000; font-weight: 600;line-height: 1.5; vertical-align: top; letter-spacing: 2px;}

.article{display: block; overflow: hidden; width: 1200px; margin: 0 auto;}
.article ul{}
.article li{ display: inline-block; width: calc( 33.33% - 25px ); margin: 10px; position: relative; overflow: hidden; height: 300px;}
.article li a img{max-width: 100%; background: #000; opacity: .85;}
.art_txt{ display: block; width: 75%; position: absolute;   z-index: 99; left: 15px; top:150px; padding: 10px;background: #fff; }
.art_line{ width: 40px; height: 3px; background: #b70303; margin: 5px 0 10px 0;}
.art_txt p ,.art_txt p a{  color:rgba(0,0,0,.85);font-size: 20px; line-height: 30px; text-decoration: none;}
.art_txt p a:hover{  color: #b70303;/*text-decoration: underline;*/ transition:  color 0.65s ease-out;}
.art_pic{ display: block; width: 100%;background: #000;}
.art_pic a img{ max-width: 100%; opacity: .85;transition:  opacity 0.5s ease-out;}
.art_pic a:hover img{ max-width: 100%; opacity: 1; transition:  opacity 0.5s ease-out;}

.gry_hd{display: block; overflow: hidden; width: 100%;}
.gry_hd img{max-width: 100%;}

/*footer*/
.footer{display: block; overflow: hidden; width:100%; background-color: #ececed;  padding-top: 20px;}
.spr{width: 1000px; overflow: hidden; margin: 0 auto; }
.spr li{ display: inline-block; margin: 4px 17px; width:calc( 25% - 41px );}
.spr li a img{max-width: 100%;}
.footer h6 {color: rgba(0,0,0,1); font-size: 2rem; line-height: 1.2;  text-align: center;}
.footer p{color: rgba(0,0,0,1); font-size: 1rem; line-height: 1.5;  text-align: center; margin-top: 15px;}

/*RWD  ========================================================================================*/
@media screen and (max-width:1600px) {
.main_txt{  width: 750px; left:50%; margin-left: -375px; top:225px;}
.case01{width: 300px; left:8%;  top:320px;}
.case02{width: 400px; right:4%;  top:80px;}
.case03{width: 270px; right:15%;  top:560px;}
}

@media screen and (max-width:1440px) {
.main_txt{  width: 720px; left:50%; margin-left: -360px; top:200px;}
.case01{width: 270px; left:6%;  top:280px;}
.case02{width: 360px; right:3%;  top:70px;}
.case03{width: 250px; right:15%;  top:500px;}
}

@media screen and (max-width:1366px) {
.main_txt{  width: 650px; left:50%; margin-left: -325px; top:180px;}
.case03{width: 250px; right:15%;  top:460px;}
}

@media screen and (max-width:1280px) {
.case01{width: 250px; left:6%;  top:240px;}
.case02{width: 330px; right:3%;  top:70px;}
.case03{width: 240px; right:15%;  top:430px;}
.content{display: block; overflow: hidden; width: 90%; margin: 20px auto;}
.content h3{ font-size:36px; line-height: 50px;}
.content h3 span{ font-size:42px; }
.content h4{ font-size: 20px; line-height: 36px; margin-top: 40px;}
	
.area_tt{ display: block; width: 325px; margin: 30px auto;  padding: 10px 0 5px 0;}
.area_tt img{ margin-right: 12px; width: 60px;}
.area_tt p{ font-size: 40px; line-height: 1.35; }
}

@media screen and (max-width:1200px) {
.main_txt{  width: 600px; left:50%; margin-left: -300px; top:170px;}
.case03{width: 230px; right:15%;  top:405px;}
.article{ width: 90%; margin: 0 auto;}
.article li{ display: inline-block; width: calc( 33.33% - 25px ); margin: 10px; position: relative; overflow: hidden; height: 280px;}
.art_txt{ display: block; width: 80%;  left: 15px; top:130px; padding: 10px; }
}

@media screen and (max-width:1024px) {
.hd-logo {width: 120px; margin-right: 15px;}
.main_txt{ width: 500px; left:50%; margin-left: -250px; top:140px;}
.case01{width: 200px; left:6%;  top:190px;}
.case02{width: 250px; right:5%;  top:60px;}
.case03{width: 190px; right:15%;  top:350px;}
.content h3{ font-size:32px; line-height: 50px;}
.content h3 span{ font-size:36px; }
.art_txt p ,.art_txt p a{ font-size: 18px; line-height: 28px;}
.spr{width: 90%; overflow: hidden; margin: 0 auto; }
}

@media screen and (max-width:768px) {
.hd-logo {width: 100px; margin-right: 12px;}
.main_txt{ width: 350px; margin-left: -175px; top:120px;}
.case01{width: 160px; left:6%;  top:140px;}
.case02{width: 200px; right:5%;  top:60px;}
.case03{width: 160px; right:15%;  top:260px;}
.content h3{ font-size:24px; line-height: 50px;}
.content h3 span{ font-size:28px; }
.content h4{ font-size: 18px; line-height: 30px; margin-top: 36px;}
.area_tt{ display: block; width: 280px; margin: 40px auto 10px auto;  padding: 10px 0 5px 0;}
.area_tt img{ margin-right: 12px; width: 50px;}
.area_tt p{ font-size: 34px; line-height: 1.35; }
.article li{ display: inline-block; width: calc( 33.33% - 25px ); margin: 10px; position: relative; overflow: hidden; height: 220px;}
.art_txt{ display: block; width: 80%;  left: 10px; top:80px; padding: 8px; }
.art_txt p ,.art_txt p a{ font-size: 16px; line-height: 24px;}
}

@media screen and (max-width:640px) {

}

@media screen and (max-width:480px) {
.hd-logo {width: 80px; margin-right: 12px;}
.cov_kv,.main_txt,.case01,.case02,.case03{ display: none; }
.cov_kv_m{ display: block; width: 100%; margin:  0 auto; }
.hdr {padding: 12px;}
.page_cont{display: block; overflow: hidden; width: 100%; background: none;}
.article li{ display: block; width: 90%; margin: 20px auto ; position: relative; height: 260px;}
.art_txt{ display: block; width: 85%;  left: 15px; top:150px; padding: 10px;  overflow: auto}
.art_txt p ,.art_txt p a{ font-size: 18px; line-height: 26px;}
.spr li{ display: inline-block; margin: 4px 10px; width:calc( 25% - 25px );}
.footer p{ width: 90%; font-size: .9rem; line-height: 1.5;   margin: 15px auto 0 auto;}
}

@media screen and (max-width:430px) {
.content h3{ font-size:24px; line-height: 40px;}
.article li{ display: block; width: 90%; margin: 20px auto ; position: relative; height: 240px;}
.art_txt{ display: block; width: 80%;  left: 10px; top:130px; padding: 10px;  }
}
@media screen and (max-width:415px) {

}
@media screen and (max-width:390px) {
.article li{ display: block; width: 90%; margin: 20px auto ; position: relative; height: 240px;}
.art_txt{ display: block; width: 85%;  left: 10px; top:130px; padding: 8px;  }
}

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

}

@media screen and (max-width:360px) {
.content h3{ font-size:22px; line-height: 36px;}
.content h3 span{ font-size:25px; }
.article li{ height: 210px;}
.art_txt{  width: 85%;  left: 10px; top:110px; padding: 8px;  }
.art_txt p ,.art_txt p a{ font-size: 17px; line-height: 24px;}
}

@media screen and (max-width:320px) {
.article li{ height: 190px;}
.art_txt{  width: 90%;  left: 8px; top:100px; padding: 8px; }
.art_txt p ,.art_txt p a{ font-size: 16px; line-height: 22px;}
}