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

/*home clock*/
.clock{
	width:180px;
	height:60px;
	border: 1px solid #FF0000;
	color: white;
	padding-top: 15px;
	border-radius: 10px;
	background-color: #7CC623;
}
#Date{
	font-size: 16px;
	text-align: center;
}
.clock ul{
	display: flex;
	font-size: 20px;
	list-style: none;
	gap: 10px;
	justify-content: center;
}
.clock ul li{
	float:left;
}

/*comparison*/
.bgtrans1{
	width:1160px;
	height:350px;
	position:absolute;
	top:0;
	left:0;
	animation:bgtrans 15s linear infinite;
}
.bgtrans2{
	width:1160px;
	height:350px;
	position:absolute;
	top:0;
	left:1160px;
	animation:bgtrans 15s linear infinite;
}
@keyframes bgtrans{
	0%{transform: translateX(0);}
	100%{transform: translateX(-100%);}
}

/*advantage*/
.advantage{
	width:480px;
	height:480px;
	border-radius:50%;
	overflow:hidden;
	position:absolute;
	top:70px;
	left:100px;
	animation:advan 30s linear infinite;
}
.advantage:hover{
	animation-play-state:paused;
}
@keyframes advan{
	0%{transform:rotate(0);}
	100%{transform:rotate(-360deg);}
}

/*apple image show*/
.appleimg{
	width:1200px;
	height:auto;
	margin:auto;
	padding-bottom:120px;
	background: url(../images/bg4.png);
}
.showtitle1{
	width:1200px;
	height:50px;
	text-align:center;
	padding-top:30px;
}
.showtitle2{
	width:1200px;
	height:50px;
	text-align:center;
	word-spacing:15px;
}
.imgshow{
	width:930px;
	height:670px;
	margin:auto;
	position:relative;
	overflow:hidden;
}
ul, li, td{
	margin:0;
	padding:0;
	border:none;
	list-style:none;
}
.imgshow #picUl li{
	position:absolute;
	top:0;
	left:0;
}
.imgshow #picUl li img{
	width:830px;
}
.imgshow #tab{
	width:100px;
	height:100%;
	position:absolute;
	right:0;
	background-color:#7CC623;
}
.imgshow #tab li{
	width:100px;
	text-align:center;
	position:relative;
}
.imgshow #tab li a{
	text-decoration:none;
	color: #FFFFFF;
	font-size:16px;
	font-weight:bold;
	line-height:65px;
	display:block;
}
.imgshow #tab li span{
	width:0;
	height:0;
	display:block;
	position:absolute;
	top:50%;
	left:-15px;
	margin-top:-8px;
	border-width:8px;
	border-style:solid;
	border-color:transparent #FF9900 transparent transparent;
	display:none;
}
.imgshow #tab li.active{
	background: #FF9900;
}
.imgshow #tab li.active .on{
	display:block;
}

/*standard size color show*/
.stdtitle{
	width:1180px;
	height:50px;
	margin:auto;
	margin-top:50px;
}
.standard{
	width:1180px;
	height:400px;
	margin:auto;
	box-shadow:1px 1px 8px 3px #FAD2A0;
	border:2px solid #66CC00;
	margin-bottom:80px;
	border-radius:20px;
	position:relative;
	overflow: hidden;
}
#slideshow{
	width: 1000px;  
	height: 400px;
	margin: auto;
	overflow: hidden;
	position: relative;  
}
#slideshow img{
	width: 1000px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s linear;
}
#slideshow img.active{
	opacity: 1;
}

/*services flowchart*/
.charttitle{
	width:776px;
	height:48px;
}
.flowchart{
	width:776px;
	height:300px;
	position:relative;
	border:1px solid #FF0000;
	overflow:hidden;
}
.fchart1{
	width:1500px;
	height:300px;
	position:absolute;
	top:0;
	left:0;
	animation:ani 30s linear infinite;
}
.fchart2{
	width:1500px;
	height:300px;
	position:absolute;
	top:0;
	left:1500px;
	animation:ani 30s linear infinite;
}
.chart1,.chart2{
	width:750px;
	height:300px;
	float:left;
}
@keyframes ani{
	0%{ transform: translateX(0);}
	100%{transform: translateX(-100%);}
}

/*Gotop*/	
.scroll{
	width:40px;
	height:40px;
	border-radius:20px;
	overflow:hidden;
	background:url(../images/gotop.png);
	position:fixed;
	right:10px;
	bottom:30px;
	cursor:pointer;
}