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

body{
	background: #124074;
	overflow: hidden;
}
.second-bk{
    width: 100%;
	height: 990px;
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
	z-index: 1;	
    background:url(../images/second-bk.jpg) no-repeat center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
	animation:secbk 1s ease-out;		
}
@keyframes secbk{
	0%{
		opacity:0;
		-webkit-transform: translate(0,150px);
		-moz-transform: translate(0,150px);
		-o-transform: translate(0,150px);
		transform: translate(0,150px);	
	}
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.second-body-container{
    width: 100%;
	height: 990px;
	display: block;
	float: left;
	position: relative;
	z-index: 2;			
}
.second-inner-box{
	width: 1123px;
	margin: 0 auto;
	display:block;	
}
.second-inner-box ul{
	width: 100%;
	display:block;
	float: left;
	list-style-type: none;	
}
.second-inner-box ul li{
	width: 100%;
	display:block;
	float: left;
	list-style-type: none;	
}
.main-logo{
	margin-top: 188px;
	animation:logo 1s ease-out;	
}
@keyframes logo{
	0%{
		opacity:0;
		-webkit-transform: translate(0,-150px);
		-moz-transform: translate(0,-150px);
		-o-transform: translate(0,-150px);
		transform: translate(0,-150px);	
	}
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.main-logo img{
	width: 100%;
	height: auto;
	max-width: 1123px;
}
.service{
	width: 300px;
	left: 22%;
	top: 22%;
	position: absolute;
	z-index: 5;
	font-family: 'Open Sans', sans-serif;
	font-size: 35px;
	color: #fff;
	animation: ourservice 1.5s ease-out;	
}
@keyframes ourservice{
	0%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.service-title-a{
	width: 45%;
	display: block;
	float: left;
	-webkit-transform: translate(20px,0);
    -moz-transform: translate(20px,0);
    -o-transform: translate(20px,0);	
    transform: translate(20px,0);
	animation: titlea 1.8s ease-out;
}
@keyframes titlea{
	0%{
		opacity:0;
		-webkit-transform: translate(-200px,0);
		-moz-transform: translate(-200px,0);
		-o-transform: translate(-200px,0);
		transform: translate(-200px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-200px,0);
		-moz-transform: translate(-200px,0);
		-o-transform: translate(-200px,0);
		transform: translate(-200px,0);	
	}	
	100%{
	opacity:1;
	-webkit-transform: translate(20px,0);
    -moz-transform: translate(20px,0);
    -o-transform: translate(20px,0);	
    transform: translate(20px,0);
	}
}
.icon-1{
	width: 97px;
	display: block;
	float: left;
	margin-right: 10px;
}
.icon-1 img{
	width: 100%;
	height: auto;
	max-width: 97px;
}
.icon-1-title-a{
	width: 75%;
	display: block;
	float: left;
}
.icon-1-title-a ul{
	width: 100%;
	display: block;
	float: left;
	list-style-type: none;	
}
.icon-1-title-a ul li{
	width: 100%;
	display: block;
	float: left;
	list-style-type: none;	
}
.inter-word1{
	font-family: 'Open Sans', sans-serif;
	font-size: 35px;
	color: #fff;
	margin-top: 8px;
	
}
.inter-word2{
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 40px;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 22px;
	
}
.inter-space{
	margin-top: 30px;
}
.service-title-b{
	width: 55%;
	display: block;
	float: left;
	-webkit-transform: translate(40px,0);
    -moz-transform: translate(40px,0);
    -o-transform: translate(40px,0);	
    transform: translate(40px,0);
    animation: titleb 1.8s ease-out;
}
@keyframes titleb{
	0%{
		opacity:0;
		-webkit-transform: translate(200px,0);
		-moz-transform: translate(200px,0);
		-o-transform: translate(200px,0);
		transform: translate(200px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(200px,0);
		-moz-transform: translate(200px,0);
		-o-transform: translate(200px,0);
		transform: translate(200px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(40px,0);
		-moz-transform: translate(40px,0);
		-o-transform: translate(40px,0);	
		transform: translate(40px,0);
	}
}
.icon-2{
	width: 96px;
	display: block;
	float: left;
	margin-right: 10px;
}
.icon-2 img{
	width: 100%;
	height: auto;
	max-width: 97px;
}
.icon-1-title-b{
	width: 80%;
	display: block;
	float: left;
}
.icon-1-title-b ul{
	width: 100%;
	display: block;
	float: left;
	list-style-type: none;	
}
.icon-1-title-b ul li{
	width: 100%;
	display: block;
	float: left;
	list-style-type: none;	
}
.inter-word3{
	font-family: 'Open Sans', sans-serif;
	font-size: 35px;
	color: #fff;
	margin-top: 8px;
	
}
.inter-word4{
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 40px;
}
.second-arrow{
	margin-top: 80px;
	text-align: center;
	animation:sk 1.5s ease-out;
}
@keyframes sk{
  0% {
    opacity: 0;
	-webkit-transform: translate(0,-80px);
    -moz-transform: translate(0,-80px);
    -o-transform: translate(0,-80px);
    transform: translate(0,-80px); 
  }
  40% {
    opacity: 0;
	-webkit-transform: translate(0,-80px);
    -moz-transform: translate(0,-80px);
    -o-transform: translate(0,-80px);
    transform: translate(0,-80px); 
  }
 100% {
   opacity: 1;
	-webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0); 
  }
}
.second-arrow img{
	width: 30px;
	height: auto;
	max-width: 30px;
	-webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0); 
	-o-transition: arrow 1.4s infinite ease-in-out;
	-moz-transition: arrow 1.4s infinite ease-in-out;
    -webkit-animation: arrow 1.4s infinite ease-in-out;
    animation: arrow 1.4s infinite ease-in-out;
}
@keyframes arrow{
  0% {

	-webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0); 
  }
  50% {

	-webkit-transform: translate(0,-30px);
    -moz-transform: translate(0,-30px);
    -o-transform: translate(0,-30px);
    transform: translate(0,-30px); 
  }

   100% {

	-webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0); 
  }
}







@media only screen and (max-width: 1680px){
.service{
	width: 320px;
	left: 20%;
	top: 20%;	
}
}
@media only screen and (max-width: 1440px){
.service{
	width: 320px;
	left: 12%;
	top: 20%;
	font-size: 30px;	
}
.main-logo{
	margin-top: 118px;
	animation:logo 1s ease-out;	
}
.inter-word1{
	font-size: 30px;
	margin-top: 15px;
	
}
.inter-word2{
	font-size: 20px;
	line-height: 40px;
}
.inter-word3{
	font-size: 30px;
	margin-top: 15px;
	
}
.inter-word4{
	font-size: 20px;
	line-height: 40px;
}
}
@media only screen and (max-width:1366px) and (max-height:1024px){
.service{
	width: 320px;
	left: 12%;
	top: 27%;
	font-size: 30px;	
}
.main-logo{
	margin-top: 238px;
}
.second-bk{
    width: 100%;
	height: 1024px;		
}	
}
@media only screen and (max-width:1366px) and (max-height:768px){
.service{
	width: 270px;
	left: 16%;
	top: 17%;
	font-size: 28px;	
}
.second-inner-box{
	width: 980px;
	margin: 0 auto;
}	
.main-logo{
	margin-top: 78px;
}
.inter-space{
	margin-top: 15px;
}
.inter-word1{
	font-size: 28px;
	margin-top: 15px;
	
}
.inter-word2{
	font-size: 20px;
	line-height: 40px;
}
.inter-word3{
	font-size: 28px;
	margin-top: 15px;
	
}
.inter-word4{
	font-size: 20px;
	line-height: 40px;
}
.second-arrow{
	margin-top: 50px;
}
.second-arrow img{
	width: 27px;
	height: auto;
	max-width: 30px;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 19px;
	
}
}
@media only screen and (max-width: 1280px){
.service{
	width: 220px;
	left: 12%;
	top: 17%;
	font-size: 28px;	
}
.second-inner-box{
	width: 980px;
	margin: 0 auto;
}	
}
@media only screen and (max-width:1024px) and (max-height:1366px){
.service{
	width: 220px;
	left: 7%;
	top: 32%;
	font-size: 28px;	
}
.main-logo{
	margin-top: 408px;
}
.second-inner-box{
	width: 940px;
	margin: 0 auto;
}
.second-bk{
    width: 100%;
	height: 1366px;	
}
.second-body-container{
    width: 100%;
	height: 1366px;		
}
.service-title-a{
	width: 42%;
}
.service-title-b{
	width: 58%;
}
.icon-1-title-a{
	width: 70%;
	display: block;
	float: left;
}
.icon-1{
	width: 94px;
	margin-right: 10px;
}
.icon-2{
	width: 94px;
	margin-right: 10px;
}
.second-arrow{
	margin-top: 200px;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 16px;
	
}
}
@media only screen and (max-width:1024px) and (max-height:768px){
.main-logo{
	margin-top: 118px;
}
.service{
	width: 220px;
	left: 9%;
	top: 20%;
	font-size: 28px;	
}
.second-inner-box{
	width: 900px;
	margin: 0 auto;
}
.second-arrow{
	margin-top: 50px;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 15px;
	
}
}
@media only screen and (max-width: 900px){
.main-logo{
	margin-top: 500px;
}
.second-inner-box{
	width: 900px;
	margin: 0 auto;
	height: 1600px;
}
.second-bk{
    width: 100%;
	height: 1600px;	
}
.second-body-container{
    width: 100%;
	height: 1600px;		
}
.service{
	width: 220px;
	left: 74%;
	top: 26%;
	font-size: 28px;	
}
.service-title-a{
	top: 52%;
	left: 190px;
	width: 70%;
	display: block;
	float: none;
	position: absolute;
	z-index: 14px;
	-webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);	
    transform: translate(0,0);
	animation: titlea 1.8s ease-out;
}
@keyframes titlea{
	0%{
		opacity:0;
		-webkit-transform: translate(-200px,0);
		-moz-transform: translate(-200px,0);
		-o-transform: translate(-200px,0);
		transform: translate(-200px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-200px,0);
		-moz-transform: translate(-200px,0);
		-o-transform: translate(-200px,0);
		transform: translate(-200px,0);	
	}	
	100%{
	opacity:1;
	-webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);	
    transform: translate(0,0);	
	}
}
.service-title-b{
	top: 60%;
	left: 190px;	
	width: 70%;
	display: block;
	float: none;
	position: absolute;
	z-index: 14px;
	-webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);	
    transform: translate(0,0);
	animation: titleb 1.8s ease-out;	
}
@keyframes titleb{
	0%{
		opacity:0;
		-webkit-transform: translate(200px,0);
		-moz-transform: translate(200px,0);
		-o-transform: translate(200px,0);
		transform: translate(200px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(200px,0);
		-moz-transform: translate(200px,0);
		-o-transform: translate(200px,0);
		transform: translate(200px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);	
		transform: translate(0,0);
	}
}
.second-arrow{
	margin-top: 470px;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 22px;
	
}
}
@media only screen and (max-width: 800px){
.main-logo{
	margin-top: 400px;
}
.second-inner-box{
	width: 800px;
	margin: 0 auto;
	height: 1280px;
}
.second-bk{
    width: 100%;
	height: 1280px;	
}
.second-body-container{
    width: 100%;
	height: 1280px;		
}
.service{
	width: 220px;
	left: 74%;
	top: 26%;
	font-size: 30px;	
}
.service-title-a{
	top: 54%;
	left: 150px;
	width: 70%;
}
.service-title-b{
	top: 64%;
	left: 150px;	
	width: 70%;
}
.icon-2{
	width: 90px;
	margin-right: 10px;
}
.second-arrow{
	margin-top: 400px;
}
}
@media only screen and (max-width: 768px){
.service{
	width: 220px;
	left: 74%;
	top: 14%;
	font-size: 28px;	
}
.second-inner-box{
	width: 768px;
	margin: 0 auto;
	height: 1024px;
}
.second-bk{
    width: 100%;
	height: 1024px;	
}
.second-body-container{
    width: 100%;
	height: 1024px;	
}
.main-logo{
	margin-top: 200px;
}
.service-title-a{
	top: 45%;
	left: 115px;
	width: 70%;
}
.service-title-b{
	top: 57%;
	left: 115px;	
	width: 70%;
}

.second-arrow{
	margin-top: 300px;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 20px;
	
}
}
@media only screen and (max-width: 600px){
.second-inner-box{
	width: 600px;
	margin: 0 auto;
	height: 960px;
}
.second-bk{
    width: 100%;
	height: 960px;	
}
.second-body-container{
    width: 100%;
	height: 960px;	
}
.service{
	width: 180px;
	left: 60%;
	top: 15%;
	font-size: 30px;	
}
.service-title-a{
	top: 42%;
	left: 55px;
	width: 90%;
}
.service-title-b{
	top: 54%;
	left: 55px;	
	width: 90%;
}
}

@media only screen and (max-width: 480px){
.second-inner-box{
	width: 414px;
	margin: 0 auto;
	height: 800px;
}
.second-bk{
    width: 100%;
	height: 800px;	
}
.second-body-container{
    width: 100%;
	height: 800px;	
}
.main-logo{
	margin-top: 220px;
}
.service{
	width: 180px;
	left: 62%;
	top: 20%;
	font-size: 25px;	
}
.inter-word1{
	font-size: 20px;
	margin-top: 5px;
	
}
.inter-word2{
	font-size: 17px;
	line-height: 35px;
}
.inter-word3{
	font-size: 20px;
	margin-top: 5px;
	
}
.inter-word4{
	font-size: 17px;
	line-height: 35px;
}
.icon-1{
	width: 64px;
	margin-right: 10px;
}
.icon-2{
	width: 61px;
	margin-right: 10px;
}
.service-title-a{
	top: 47%;
	left: 35px;
	width: 90%;
}
.service-title-b{
	top: 59%;
	left: 35px;	
	width: 90%;
}
.second-arrow{
	margin-top: 230px;
}
.second-arrow img{
	width: 22px;
	height: auto;
	max-width: 30px;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 17px;
	
}	
}
@media only screen and (max-width: 414px){
.main-logo{
	margin-top: 180px;
}
.service{
	width: 180px;
	left: 58%;
	top: 18%;
	font-size: 23px;	
}
.service-title-a{
	top: 42%;
	left: 35px;
	width: 90%;
}
.service-title-b{
	top: 52%;
	left: 39px;	
	width: 90%;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 15px;
	
}
}
@media only screen and (max-width: 375px){
.main-logo{
	margin-top: 140px;
}
.service{
	width: 130px;
	left: 63%;
	top: 17%;
	font-size: 21px;	
}
.second-inner-box{
	width: 375px;
	margin: 0 auto;
	height: 667px;
}
.second-bk{
    width: 100%;
	height: 667px;	
}
.second-body-container{
    width: 100%;
	height: 667px;	
}
.service-title-a{
	top: 41%;
	left: 0px;
	width: 100%;
}
.service-title-b{
	top: 53%;
	left: 0px;	
	width: 100%;
}
.icon-1{
	width: 16%;
	margin-right: 2%;
	margin-left: 5%;
}
.icon-1-title-a{
	width: 77%;
}
.icon-2{
	width: 16%;
	margin-right: 2%;
	margin-left: 5%;
}
.icon-1-title-b{
	width: 77%;
}
.second-arrow{
	margin-top: 200px;
}
.inter-word1{
	font-size: 19px;
	margin-top: 10px;
	
}
.inter-word2{
	font-size: 16px;
	line-height: 30px;
}
.inter-word3{
	font-size: 19px;
	margin-top: 10px;
	
}
.inter-word4{
	font-size: 16px;
	line-height: 30px;
}	
}
@media only screen and (max-width: 360px){
.service{
	width: 130px;
	left: 60%;
	top: 19%;
	font-size: 22px;	
}
.main-logo{
	margin-top: 170px;
}
.second-inner-box{
	width: 360px;
	margin: 0 auto;
	height: 640px;
}
.second-bk{
    width: 100%;
	height: 640px;	
}
.second-body-container{
    width: 100%;
	height: 640px;	
}
.second-arrow{
	margin-top: 200px;
}
.service-title-a{
	top: 46%;
	left: 0px;
	width: 100%;
}
.service-title-b{
	top: 57%;
	left: 0px;	
	width: 100%;
}	
}
@media only screen and (max-width: 320px) and (max-height:568px){
.main-logo{
	margin-top: 130px;
}
.service{
	width: 130px;
	left: 60%;
	top: 15%;
	font-size: 20px;	
}
.second-inner-box{
	width: 320px;
	margin: 0 auto;
	height: 568px;
}
.second-bk{
    width: 100%;
	height: 568px;	
}
.second-body-container{
    width: 100%;
	height: 568px;	
}
.inter-word1{
	font-size: 17px;
	margin-top: 5px;
	
}
.inter-word2{
	font-size: 15px;
	line-height: 30px;
}
.inter-word3{
	font-size: 17px;
	margin-top: 5px;
	
}
.inter-word4{
	font-size: 15px;
	line-height: 30px;
}
.service-title-a{
	top: 43%;
	left: 0px;
	width: 100%;
}
.service-title-b{
	top: 56%;
	left: 0px;	
	width: 100%;
}
.inter-chinese{
	font-family: "微軟正黑體";
	font-size: 13px;
	
}
}
@media only screen and (max-width: 320px) and (max-height:480px){
.service{
	width: 130px;
	left: 60%;
	top: 8%;
	font-size: 20px;	
}
.main-logo{
	margin-top: 80px;
}
.service-title-a{
	top: 33%;
	left: 0px;
	width: 100%;
}
.service-title-b{
	top: 45%;
	left: 0px;	
	width: 100%;
}
.second-arrow{
	margin-top: 170px;
}	
}