@charset "utf-8";
/* CSS Document */
.title { text-align:center; font-size:45px; font-weight:bold; color:#FFF; margin:20px 0; display:block; }
#about { width:100%; padding:5% 3%; display:block;    overflow: hidden; margin: 0 auto;}
#about img { width:50%; float:left; margin-right:10px;}
#about article { margin:10px; float:left; width:45%;}
#about article .title { color:#C80101; text-align:left;}
#about article p { margin-bottom:10px;}
#about article a {
	display: inline-block;
    padding: 15px;
    border: 1px solid #F00;
    color: #F00;
	text-transform:uppercase;
	margin-top:20px;
}
#about article a:hover { background-color:#F00; color:#FFF;}

/* for slide_box */
#pro-list {background:url(../images/bg-pro.png) center 30% no-repeat,#C0D7E9; background-size:cover;}
.main{
	position: relative;
    top: 10px;
    left: 0;
    width: 100%;
    height: 450px;
	margin:0 auto;
	
}
.slide_move{
	position: absolute;
	top: 25%;
	left: 0;
}
.main li{
	position: absolute;
	top: 0;
	left: 0;
	width:230px;
	height:250px;
	list-style: none;
	overflow:hidden;
	text-align:center;
}
.main li img {
	width: 230px;
	height: 200px;
	border:1px solid #999;
	margin-bottom:10px;
}
.main li a {color: #036; font-size:medium; font-weight:bold; text-transform:capitalize;}
.main li:hover img { box-shadow:3px 3px 10px #036;}

.dot{color: red;}
#dot_1{position: relative;left: 40px;}
.con{display: none;}
.main .arrow { position:absolute; top:40%; padding:20px 30px; background-color:#036; color:#FFF; opacity:0.2; font-size:xx-large;}
.main .left { left:0;}
.main .right { right:0%;}
.main .arrow:hover { opacity:1;}


@media screen and (max-width:960px) {
	.main { width:100%;}
} 

@media screen and (max-width:760px) {
	#about img, #about article { width:100%; margin:0;}
	
	
}

@media screen and (max-width:560px) {
	.title { font-size: xx-large;}
	.main { width:510px;}
	.main .arrow { padding:2% 5%; top:45%;}
	.main .left { left:-20%;}
	.main .right { right:-20%;}
}

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