/* color */
/*
main_blue: #005bac
dark_blue: #3c5a72
deep_blue: #204051
black_blue: #242d3c
light_blue: #b8dff4

brown: #eabc28
dark_brown: #b78d18

gray: #c6c6c6
dark_gray: #a0a0a0
yellow: #eabc28
red: #d13b3b
orange: #ff7f00
green: #009944
light_green: #77b6a5
*/

html,body{
	position: relative;
	font-family: helvetica, ariel, 微軟正黑體;
	font-size: 16px;
	line-height: 20px;
	overflow-x: hidden;
}
ol,ul, li{
	color: #5e5e5e;
	line-height: 22px;
}
.big_title{
	font-size: 30px;
	font-weight: 800;
	color: #ff7f00;
	text-shadow: 2px 2px rgba(124,124,124,0.6);
}
.title{
	font-size: 24px;
	font-weight: 800;
	line-height: 32px;
}

.nav{
	height: 50px;
	background-color: #274456;
	position: fixed;
	right: 0;
	left: 0;
	z-index: 100
}
.row{
	position: relative;
	background-color: #fff;
}
.col{
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}


/* section1 */
.Sect1{
	width: 100%;
	/*margin: 40px 0px 0px 0px;*/
}
.index{
	width: 45%;
	padding: 20px;
	margin-top: 30px;
	margin-left: 40px;
	margin-bottom: 40px;
	border: 16px solid #005BAC;
	background-color: #204051;
	border-radius: 80px;
	box-sizing: border-box;
	color: #fff;
}
.hand{
	width: 100%;
	height: 30px;
	border-radius: 15px;
	background-color: #305066;
	transform: translateX(-20%);
}
.gear{
	width: 60px;
	height: 60px;
	border: 6px solid #C6C6C6;
	background-color: #204051;
	border-radius: 100%;
	box-sizing: border-box;
}
.pin{
	width: 24px;
	height: 24px;
	border-radius: 100%;
	background-color: #C6C6C6;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.gear1{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.gear2{
	position: absolute;
	right: 0%;
	top: 50%;
	transform: translate(0%,-50%);
}
.palm1{
	width: 30px;
	height: 80px;
	background-color: #305066;
	position: absolute;
	right: 0;
	transform: translateX(-50%);
}
.palm2{
	width: 30px;
	height: 60px;
	background-color: #305066;
	position: absolute;
	right: 50%;
	transform: translateX(50%);
}
.grab{
	width: 90px;
	height: 100px;
	border-top: 30px solid #305066;
	border-left: 30px solid #305066;
	border-right: 30px solid #305066;
	border-radius: 30px;
	position: absolute;
	right: 0;
	transform: translate(30%,50%);
}
.ball{
	width: 80px;
	height: 80px;
	background-color: #009944;
	border-radius: 40px;
	position: absolute;
	right: 0;
	transform: translate(13%,140%);
	opacity: 1;

	transition-duration: 0.3s;
	animation-timing-function: ease-in;

	animation: ball 3s infinite;
}
@keyframes ball{
	50% {
		transform: translate(13%,140%);
		opacity: 1;
	}
	75%{
		opacity: 0;
		transform: translate(13%,220%);
	}
	100%{
		opacity: 0;
		transform: translate(13%,220%);
	}
}
.ball:hover{
	animation: none;
	opacity: 0.9;
}
.ball:active{
	opacity: 0;
}
.download{
	width: 70px;
	font-size: 20px;
	line-height: 24px;
	color: #fff;
	font-weight: 600;
	position: absolute;
	top: 23%;
	left: 24%;
}


/* section2 */
/* box */
.Sect2_box{
	width: 50%;
	padding: 0px 60px;
	background-color: #fff;
	vertical-align: bottom;
}
.box{
	background-color: #EABC28;
	padding: 60px 60px 30px 40px;
	position: relative;
}
.box_shadow{
	background-color: #B78D18;
	width: 15%;
	height: 100%;
	position: absolute;
	right: 0;
}
/* lab */
.Sect2_empty{
	width: 8%;
	background-color: #fff;
}
.Sect2_lab{
	width: 23%;
	padding: 150px 10px;
	background-color: #ADADAD;
}
.lab_top{
	background-color: #C6C6C6;
}
.monitor{
	padding: 20px;
	background-color: #009944;
	width: 60%;
	border: 8px solid #242D3C;
	color: #fff;

	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
/* spin */
.spin{
	width: 50px;
	height: 50px;
	border: 5px solid #204051;
	border-radius: 100%;
	position: absolute;
	bottom: 10%;
	box-sizing: border-box;
}
.spin1{
	background-color: #af3a3a;
	left: 15%;
}
.spin2{
	background-color: #11815b;
	right: 15%;
}
.pick{
	width: 10px;
	height: 40px;
	border-radius: 5px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-90%);
}
.pick1{
	background-color: #d13b3b;
}
.pick2{
	background-color: #77b6a5;
}

/* doc */
.doc_title{
	font-size: 18px;
	font-weight: 800;
	color: #242d3c;
}
.doc:hover>.doc_title{
	color: #eabc28;
}
.doc{
	width: 80%;
	height: 70%;
	padding: 10px;
	background-color: #3c5a72;
	border-top: 4px solid #666;
	border-left: 4px solid #666;
	border-right: 4px solid #ccc;
	border-bottom: 4px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	overflow-x : hidden;
	overflow-y: scroll;
  	text-overflow : ellipsis;
	color: #204051;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;

	transition-duration: 0.5s;
	animation-timing-function: ease-in;
}
.doc:hover{
	color: #b8dff4;
	background-color: #242d3c;
}
.doc:active{
	opacity: 0.8;
}
.read{
	font-size: 14px;
	color: #666;
	text-align: right;
}
.doc:hover>.read{
	color: #fff;
}
.lab1{
	width: 100%;
	height: 60px;
	border-radius: 30px;
	background-color: #005BAC;
	transform: translateX(3%);
}
.lab2{
	width: 100%;
	height: 40px;
	background-color: #305066;
	transform: translateX(20%);
}
.lab3{
	width: 100%;
	height: 25px;
	background-color: #005BAC;
	transform: translateX(15%);
}


/* section3 */
.Sect3_L{
	width: 70%;
	margin: 40px 20px;
	border: 10px dashed #77b6a5;
	border-radius: 50px;
}
.Sect3_R{
	width: 20%;
	margin: 40px 20px;
	border: 10px dashed #77b6a5;
	border-radius: 50px;
}
.roop{
	width: 100%;
	/*height: 100%;*/
	padding: 30px;
	border: 20px solid #77b6a5;
	border-radius: 30px;
	box-sizing: border-box;
}
.book_now{
	font-size: 20px;
	text-align: right;
	color: #52bccd;
	animation-duration: 0.3s;
}
.book_now:hover{
	color: #eabc28;
}
.book{
	text-align: center;
}
.center{
	width: 80px;
	height: 80px;
	margin: 0 auto;
	margin-top: 20px;
	position: relative;
}
.click{
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-60%,-50%);
	/*border: 1px solid black;*/
}
.stick{
	width: 100%;
	height: 10px;
	background-color: #005bac;
	position: absolute;

	transition-duration: 0.3s;
	animation-timing-function: ease-in;
}
.stick1{
	left: 0;
	top: 30%;
}
.stick2{
	right: 0;
	bottom: 30%;
}
.click:hover>.stick{
	background-color: #ff7f00;
}
.click:hover>.stick1{
	width: 80%;
	top: 50%;
	transform: translateY(-50%);
}
.click:hover>.stick2{
	width: 80%;
	bottom: 45%;
	right: 20%;
	transform: rotate(90deg);
}
.dick{
	width: 10px;
	height: 50%;
	background-color: #005bac;
	position: absolute;

	transition-duration: 0.3s;
	animation-timing-function: ease-in;
}
.dick1{
	right: 0;
	top: 0;
	transform: skewX(25deg);
}
.dick2{
	right: 0;
	bottom: 0;
	transform: skewX(-25deg);
}
.click:hover>.dick{
	background-color: #ff7f00;
}
.click:hover>.dick1{
	width: 15px;
	right: -15%;
	transform: skewX(0deg);
}
.click:hover>.dick2{
	width: 15px;
	right: -15%;
	transform: skewX(0deg);
}


/* section4 */
.Sect4_video{
	width: 45%;
	height: 250px;
	/*padding: 60px;*/
	background-color: #005BAC;
}
.Sect4_mid{
	width: 10%;
	height: 250px;
	background-color: #005BAC;
}
.title4{
	text-align: center;
	margin: 0 auto;
	margin-top: 20px;
}
.video{
	background-color: #009944;
	width: 60%;
	height: 150px;
	border: 8px solid #242D3C;
	color: #fff;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.play{
	font-family: rockwell;
	font-size: 40px;
	letter-spacing: 2px;
	text-align: center;
	line-height: 150px;

	width: 100%;
	height: 100%;
	background-color: #204051;
	opacity: 0.9;
}
.play:hover{
	opacity: 0.1;
}
.png{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: hidden;
}
.png:hover{
	display: block;

}
.circle{
	width: 30px;
	height: 50px;
	margin: 0px auto;
	background-color: #77b6a5;
	border-radius: 16px;
	transform: translateY(-80px);
}
.bar{
	width: 10px;
	height: 60%;
	margin: 10px auto -20px auto;
	background-color: #305066;
	border-radius: 5px;
}


/* footer */
.footer{
	position: relative;
	height: 100px;
	background-color: #20313a;
}
.logo{
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

/* mobile style */
@media screen and (max-width: 768px) {

.Sect2_box,.Sect2_lab,.Sect4_video{
	width: 100%;
}
.Sect2_box{
	width: 90%;
}
.Sect2_empty{
	width: 0%;
}
.grab{
	width: 84px;
	transform: translate(30%,50%);
}
.box{
	padding: 60px 20px 10px 20px;
}
.box_shadow{
	width: 25%;
}
.doc_title{
	color: #eabc28;
}
.doc{
	color: #b8dff4;
	background-color: #242d3c;
}
.read{
	color: #fff;
}
.lab1{
	width: 140%;
	height: 30px;
	transform: translateX(-10%);
}
.lab2{
	width: 80%;
	transform: translateX(12%);
}
.lab3{
	width: 90%;
	transform: translateX(6%);
}
.Sect4_mid{
	width: 100%;
	height: 30px;
	background-color: #005BAC;
}
.title4{
	display: none;
}
.circle{
	width: 50px;
	height: 30px;
	margin: 60px auto;
	border-radius: 16px;
}
.bar{
	width: 60%;
	height: 10px;
	margin: 10px auto;
	background-color: #305066;
	border-radius: 5px;
}
.Sect3_L{
	width: 90%;
	margin: 20px;
}
.Sect3_R{
	width: 90%;
	margin: 20px;
}
.roop{
}