﻿.scrollWrap, .scrollWrap > *{-webkit-box-sizing:border-box; box-sizing:border-box;}
body{margin:0; padding:0;}
.scrollWrap{max-width:1200px; margin:30px auto;}

.scrollWrap img{max-width:100%; height: auto; border:0;}
.scrollOutbox{
	position: relative;
	max-width: 100%;
	height:135px;
	margin: 0 auto;
	padding:16px 0;
	border-radius:5px;
	overflow:hidden;
	background-color:#fff;
}
.scrollable{
	position: relative;
	max-width: 1040px;
	margin:0 auto;
	overflow: hidden;
}
.scrollInbox{
	position: absolute;
	width: 20000em;
	top: 0;
	left: 0;
	margin: 0;/*test*/
	padding:0;
	list-style: none;
	overflow: hidden;
}
.scrollInbox > li{float: left; width:25%;}
.scrollInbox li a{
	display: block;
	height:100px;
	margin:0 5px;
	padding:15px 10px;
	text-decoration:none;
	border:1px solid #dce0e8;
	background: #f8f8f8;
	overflow:hidden;
}
.scrollInbox li a:hover{border:2px solid #8887f5;}


.scrollOutbox .scrollPrev, .scrollOutbox .scrollNext{
	position: absolute;
	width: 30px;
	height:135px;
	text-align:center;
	background-color:#8887f5;
	cursor: pointer;
}
.scrollOutbox .scrollPrev{
	left: 0;
	top: 0;
	border-radius: 5px 0 0 5px;
}
.scrollOutbox .scrollNext{
	right:0;
	top: 0;
	background-position: 30px 0;
	border-radius:0 5px 5px 0;
}
.scrollOutbox .scrollPrev i, .scrollOutbox .scrollNext i{font-size:24px; line-height:135px; color:#fff;}

@media screen and (min-width: 991px) and (max-width: 1200px) {
.scrollable{max-width:890px;}	
.scrollInbox li a{padding:15px 5px;}
#company ul li .rintro{width:52%; margin-left:1%;}
}

@media screen and (min-width: 768px) and (max-width: 990px) {	
/*.scrollable{}
.scrollInbox > li{width:33.33333333%;}
.scrollInbox li a{padding:10px 5px;}
#company ul li .rintro{width:52%; margin-left:1%;}*/
}

@media screen and (max-width: 767px){
/*.scrollWrap{width:100%; margin:10px 0;}
.scrollOutbox{height:84px; margin:0 auto; padding:15px 0; overflow:hidden;}
.scrollInbox{margin-left:20px;}
.scrollInbox li a{display: block; width: 137px; height: 54px; margin:0 2px;}
.scrollInbox li a p{padding:1px 0; font-size:16px; line-height:22px;}
.scrollOutbox .scrollPrev, .scrollOutbox .scrollNext{width:20px; height:84px;}
.scrollOutbox .scrollPrev i, .scrollOutbox .scrollNext i{line-height:84px; font-size:16px;}*/
}

@media screen and (min-width: 480px) and (max-width: 640px) {
#company ul li .rintro{width: 50%;}
}

@media screen and (max-width: 479px){
	.scrollInbox li a{width:80%; margin:0 auto;}

}