body{
	background-color: #fff;
}

.slides {
    padding: 0;
    width: 1000px;
    height: 800px;
    display: block;
    margin: 0 auto;
    position: relative;
	text-align:center;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
		position: absolute;

    opacity: 0;
    width: 913px;
    height: 514px;
    display: block;
    background-size: cover;
		margin-left: 42px;
		margin-top: 38px;

    transform: scale(0);
    /*transition: opacity .7s ease-in-out;*/
		z-index: 500;
}

input:checked + .outside-container > .slide-container > .slide {
    opacity: 1;
    transform: scale(1);
    /*transition: opacity .7s ease-in-out;*/
}

.nav-dots {
	width: 100%;
	height: 30px;
	top: 30px;
	text-align: center;
}

.nav-dots .nav-dot {
	width: 30px;
	height: 30px;
	margin: 0px 1px 0px 1px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(246, 110, 0, 0.5);
	color:#FFF;
	line-height: 30px;
	font-size: 1em;
	z-index: 700;
}


.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(246, 110, 0, 0.8);
}

input#img-1:checked ~ .nav-dots-text label#img-dot-1,
input#img-2:checked ~ .nav-dots-text label#img-dot-2,
input#img-3:checked ~ .nav-dots-text label#img-dot-3,
input#img-4:checked ~ .nav-dots-text label#img-dot-4,
input#img-5:checked ~ .nav-dots-text label#img-dot-5,
input#img-6:checked ~ .nav-dots-text  label#img-dot-6 {
	background: rgba(246, 110, 0, 1);/*紅 rgba(200, 10, 0, 1)*/
	transform: scale(1.5);
	transition: transform 0.3s ease-in-out;

}

.line-background{
	position: relative;
	width: 15%;
	height: 10px;
	background:rgb(70, 126, 154);
	display: inline-block;
	overflow: hidden;
}

.line-background .line{
	position: absolute;

	width: 100%;
	height: 100%;
	background:#164157;
	display: inline-block;
	left:-100%;
}

input#img-1:checked ~ .nav-dots-text label#img-dot-1 + .line-background > .line,
input#img-2:checked ~ .nav-dots-text label#img-dot-2 + .line-background > .line,
input#img-3:checked ~ .nav-dots-text label#img-dot-3 + .line-background > .line,
input#img-4:checked ~ .nav-dots-text label#img-dot-4 + .line-background > .line,
input#img-5:checked ~ .nav-dots-text label#img-dot-5 + .line-background > .line,
input#img-6:checked ~ .nav-dots-text label#img-dot-6 + .line-background > .line {
	transition: left .4s ease-in-out;
	left:0;
}



.outside-container{
	background-image:url('../images/SmartRobot/screen.png');
	background-repeat: no-repeat;
	background-size: cover;
	width: 1000px;
	height: 797px;
	position: absolute;
	top: 150px;
	margin:auto;

	overflow: hidden;
}

.nav-dots-text{
	margin: 50px 0;
}

.nav-text div{
	margin:10px 0;
	display: inline-block;
}

.nav-text p{
	margin: 5px 40px;
	font-size: 18px;
	color:rgb(70, 126, 154);
}

.nav-text .small{
	font-size: 16px;
	margin-top:-16px;
}

input#img-1:checked ~ .nav-dots-text .nav-text .text1 p,
input#img-2:checked ~ .nav-dots-text .nav-text .text2 p,
input#img-3:checked ~ .nav-dots-text .nav-text .text3 p,
input#img-4:checked ~ .nav-dots-text .nav-text .text4 p,
input#img-5:checked ~ .nav-dots-text .nav-text .text5 p{
	color:#000;
}

.slide .prev,
.slide .next{
	position:absolute;
	z-index: 600;
	width:10%;
	height: 100%;
	font-size: 160px;
	line-height: 500px;
	background-color: rgba(173, 159, 159, 0.25);

	color: #fff;
	text-shadow: 0 0 15px rgba(105, 99, 99, 1);

	opacity: 0;
	transition: opacity 0.3s;
}

.slide .prev:hover,
.slide .next:hover{
	opacity: 1;
	transition: opacity 0.3s;
	cursor:pointer;
}

.slide .prev{
	left:0;
}

.slide .next{
	right:0;
}

@media screen and (max-width: 1200px) {
   		.slides{
			width:600px;

		}

		.slide{
			width: 365px;
	    	height: 206px;

			margin-left: 17px;
			margin-top: 15px;
		}

		.outside-container{
			width: 400px;
			height: 312px;
			margin-left: 100px;
		}

		.nav-dots .nav-dot {
			width: 15px;
			height: 15px;
			line-height: 15px;
			font-size: 14px;
		}

		.line-background{
			height: 5px;
		}

		.nav-text p{
			margin: 5px 5px;
			font-size: 10px;
		}

		.nav-text .small{
			font-size: 8px;
		}

		/*#section4{
			height: 800px;
		}*/

		.slide .prev,
		.slide .next{
			font-size: 80px;
			line-height: 200px;
		}

}
@media screen and (max-width: 640px) {
   		.slides{
			width:360px;

		}

		.slide{
			width: 328px;
	    	height: 185px;

			margin-left: 15px;
			margin-top: 13px;
		}

		.outside-container{
			width: 360px;
			height: 280px;
			margin-left: 0px;
		}

		.nav-dots .nav-dot {
			width: 15px;
			height: 15px;
			line-height: 15px;
			font-size: 14px;
		}

		.line-background{
			height: 5px;
		}

		.nav-text p{
			margin: 5px 5px;
			font-size: 10px;
		}

		.nav-text .small{
			font-size: 8px;
		}

		/*#section4{
			height: 800px;
		}*/

		.slide .prev,
		.slide .next{
			font-size: 80px;
			line-height: 185px;
		}	
}