body{
	background-color: #fff;
}

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

.slides-mobile input { display: none; }

.slide-container-mobile { display: block; }

.slide-mobile {
	position: absolute;
    opacity: 0;
    width: 412px;
    height: 730px;
    display: block;
    background-size: cover;
	margin-left: 41px;
	margin-top: 154px;
    transform: scale(0);
    /*transition: opacity .7s ease-in-out;*/
	z-index: 500;
}

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

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

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


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

input#img2-1:checked ~ .nav2-dots-text label#img2-dot-1,
input#img2-2:checked ~ .nav2-dots-text label#img2-dot-2,
input#img2-3:checked ~ .nav2-dots-text label#img2-dot-3,
input#img2-4:checked ~ .nav2-dots-text label#img2-dot-4,
input#img2-5:checked ~ .nav2-dots-text label#img2-dot-5,
input#img2-6:checked ~ .nav2-dots-text label#img2-dot-6 {
	background: #164157;
	transform: scale(1.5);
	transition: transform 0.3s ease-in-out;

}

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

}

.line2-background,
.line3-background{
	position: relative;
	width: 10px;
	height: 100px;
	background:rgb(70, 126, 154);
	display: block;
	overflow: hidden;
	margin-left:10px;
}
.line2-background{
	background:rgba(246, 110, 0, 0.5);
}

.line2-background .line2,
.line3-background .line3{
	position: absolute;
	width: 100%;
	height: 100%;
	background:#164157;
	display: block;
	top:-100%;
}
.line2-background .line2{
	background:rgba(246, 110, 0, 0.8);
}

input#img2-1:checked ~ .nav2-dots-text label#img2-dot-1 + .line2-background > .line2,
input#img2-2:checked ~ .nav2-dots-text label#img2-dot-2 + .line2-background > .line2,
input#img2-3:checked ~ .nav2-dots-text label#img2-dot-3 + .line2-background > .line2,
input#img2-4:checked ~ .nav2-dots-text label#img2-dot-4 + .line2-background > .line2,
input#img2-5:checked ~ .nav2-dots-text label#img2-dot-5 + .line2-background > .line2,
input#img2-6:checked ~ .nav2-dots-text label#img2-dot-6 + .line2-background > .line2,
input#img3-1:checked ~ .nav3-dots-text label#img3-dot-1 + .line3-background > .line3,
input#img3-2:checked ~ .nav3-dots-text label#img3-dot-2 + .line3-background > .line3,
input#img3-3:checked ~ .nav3-dots-text label#img3-dot-3 + .line3-background > .line3,
input#img3-4:checked ~ .nav3-dots-text label#img3-dot-4 + .line3-background > .line3,
input#img3-5:checked ~ .nav3-dots-text label#img3-dot-5 + .line3-background > .line3,
input#img3-6:checked ~ .nav3-dots-text label#img3-dot-6 + .line3-background > .line3 {
	transition: top .4s ease-in-out;
	top:0;
}



.outside-container-mobile{
	background-image:url('../images/SmartRobot/screen-mobile.png');
	background-repeat: no-repeat;
	background-size: cover;
	width: 489px;
	height: 1030px;
	position: absolute;
	left:10%;
	top: 0px;
	margin:auto;
	overflow: hidden;
}

.nav2-dots-top,
.nav3-dots-top,
.nav2-text-top,
.nav3-text-top{
	height:150px;
}

.nav2-dots-text,
.nav3-dots-text{
	margin: 50px 0;
	margin-left:65%;
	margin-top:50px;
	width:320px;
}

.nav2-text div,
.nav3-text div{
	margin:10px 0;
	display: block;
}

.nav2-text p,
.nav3-text p{
	margin: -15px 40px 50px 40px;
	font-size: 18px;
	color:rgb(70, 126, 154);
}

.nav2-text .small,
.nav3-text .small{
	font-size: 16px;
	line-height: 2em;
	text-align:left;
}

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

.slide-mobile .prev,
.slide-mobile .next{
	position:absolute;
	z-index: 600;
	width:10%;
	height: 100%;
	font-size: 80px;
	line-height: 730px;
	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-mobile .prev:hover,
.slide-mobile .next:hover{
	opacity: 1;
	transition: opacity 0.3s;
	cursor:pointer;
}

.slide-mobile .prev{
	left:0;
}

.slide-mobile .next{
	right:0;
}

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

		.slide-mobile{
			width: 270px;
	    	height: 479px;
			margin-left: 15px;
			margin-top: 90px;
		}

		.outside-container-mobile{
			width: 300px;
			height: 630px;
			left:0%;
		}

		.nav2-dots-top,
		.nav3-dots-top,
		.nav2-text-top,
		.nav3-text-top{
			height:80px;
		}
		
		.nav2-dots .nav2-dot,
		.nav3-dots .nav3-dot {
			width: 15px;
			height: 15px;
			line-height: 15px;
			font-size: 14px;
		}
		
		.nav2-dots-text,
		.nav3-dots-text{
			margin: 50px 0;
			margin-left:65%;
			margin-top:50px;
			width:250px;
		}
		
		.line2-background,
		.line3-background{
			height: 93px;
			margin-left:4px;
		}

		.nav2-text p,
		.nav3-text p{
			margin: -15px 40px 50px 40px;
			font-size: 10px;
		}

		.nav2-text .small,
		.nav3-text .small{
			font-size: 12px;
		}

		.slide-mobile .prev,
		.slide-mobile .next{
			font-size: 40px;
			line-height: 479px;
		}

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

		.slide-mobile{
			width: 180px;
	    	height: 319px;
			margin-left: 10px;
			margin-top: 60px;
		}

		.outside-container-mobile{
			width: 200px;
			height: 420px;
			left:0%;
		}
		
		.nav2-dots-top,
		.nav3-dots-top,
		.nav2-text-top,
		.nav3-text-top{
			height:0px;
		}
		
		.nav2-dots-text,
		.nav3-dots-text{
			margin: 50px 0;
			margin-left:60%;
			margin-top:50px;
			width:140px;
		}
		
		.line2-background,
		.line3-background{
			height: 80px;
			margin-left:4px;
		}
		
		.slide-mobile .prev,
		.slide-mobile .next{
			font-size: 40px;
			line-height: 319px;
		}
		
		.nav2-text p,
		.nav3-text p{
			margin: -15px 20px 50px 20px;
			font-size: 18px;
			color:rgb(70, 126, 154);
		}
		.nav2-text .small,
		.nav3-text .small{
			line-height: 1.3em;
		}
		
		.section-slides-mobile{ height:900px;}
}