.brandbox{position:relative; font-size:18px; height:900px;}
.brandbox span.No{display:block; width:64px; height:64px; border-radius:50%; font-size:36px; font-weight:bold;position:absolute; left:5%; top:100px;text-align:center; line-height:64px; color:#fff;}
span.one,span.two,span.six,span.seven{ background:#7f0579;}
span.three{ background:#2b5200}
span.four{ background:#008ab7}
span.five{ background:#fc8a00}
.brandbox span.step{display:block; position:absolute; top:103px; left:17%;font-size:16px; line-height:1.2;}
.brandbox span.step strong{font-size:32px;}
.col1{ color:#7f0579}
.col2{ color:#2b5200}
.col3{color:#008ab7}
.col4{color:#fc8a00;}
.col5{ color:#fff;}
.brandbox p{display:block; padding:0 10%;; position:absolute; left:0;}
.brand1 p{ bottom:30%;}
.brand2 p{bottom:20%;}
.brandbox ul.texts{ position:absolute;top:21%; padding:0 15%;}
.brand3 ul.texts li{ padding-bottom:10px;}
.brandbox .brimgs1{ width:300px; position:absolute; left:50%; margin-left:-150px; top:20%;}
.brandbox .brimgs2{ position:absolute; left:15%; height:235px; bottom:0;}
.brand3 .brimgs2 li{ float:left; margin-right:10px;}
.brand4 p{ top:20%;}
.brandbox .brimgs3,.brandbox .brimgs4,.brandbox .brimgs5,.brandbox .brimgs6,.brandbox .brimgs7,.brandbox .brimgs8{position: absolute;}
.brandbox .brimgs3{ bottom:125px;width:60%; left:20%;}
.brandbox .brimgs4{  width:60%; left:20%; bottom:0;}
.brandbox .brimgs5{ bottom:15%;width:60%; left:15%;}
.brandbox .brimgs6{  top:20%; left:10%;width:80%;}
.brandbox .brimgs7{  top:25%; left:10%; width:80%;}
.brandbox .brimgs8{  top:25%; left:10%;  width:80%;}
.brand5 p{ top:20%;}
.brand6 p{ color:#fff; top:20%;}
.brand1{ color:#fff; background:url(../images/brand/pic1.jpg) no-repeat center; background-size:100% 100%; width:100%; height}
.brand2,.brand4,.brand5{ background:#ebebeb; overflow:hidden; white-space:100px;}
.brand3{background:url(../images/brand/pic3.jpg) no-repeat center;background-size:100% 100%; color:#1e1d1d;}
.brand6{ background:#3b0137;}
.brand7{ background:url(../images/brand/pic7.jpg)  no-repeat center;background-size:100% 100%; }
#brandnav{ width: 100%; height: 50px; overflow: hidden; margin:20px 0;}
#brandnav a{ display: block; width: 33.33333%; height: 50px; text-align: center;line-height: 50px; float: left; color: #303030;font-size: 22px;}
#brandnav a.on{background-color: rgb(51, 51, 51); color: #fff;}
#animationp p{font-size: 18px; color: #262626;line-height: 1.7; margin: 10px 20px 20px;}
#environment img{ display: block; margin-bottom: 5px;}
@media screen and (max-width:480px){
	.brandbox{height:600px;}
	.brandbox span.No{width:45px; height:45px; font-size:24px; line-height:45px;top:75px;}
	.brandbox span.step{ top:78px; left:18%;font-size:14px; line-height:1.2;}
	.brandbox span.step strong{font-size:24px;}
	.brandbox p{padding:0 5%; font-size:14px;}
	.brand1 p{ bottom:25%;}
	.brand2 p{bottom:10%;}
	.brand4 p,.brand5 p,.brand6 p,.brand7 .brimgs6{ top:30%;}
	.brandbox .brimgs1{ width:200px; margin-left:-100px; top:25%;}
	.brand3 ul.texts{padding:0 5%; font-size:14px; top:25%;}
	.brand3 .brimgs2{height:135px; bottom:0;}
	.brandbox .brimgs3,.brandbox .brimgs4{ bottom:0;}
	.brandbox .brimgs5{bottom:10%;}
	.brand3 .brimgs2 li{ width:40%;}
	.brand7{ height:450px;}
	#brandnav{height: 40px; }
	#brandnav a{ height: 40px; line-height: 40px; font-size: 18px;}
	#animationp p{font-size: 15px; color: #262626;line-height: 1.7; margin: 5px 10px 20px;}
	
}
@media screen and (max-width:480px){
	.brand3 ul.texts{ font-size:12px;}
}
@media screen and (max-width:320px){
	.brandbox{height:500px;}
	.brandbox span.No{width:35px; height:35px; font-size:18px; line-height:35px;top:65px;}
	.brandbox span.step{ top:68px; left:18%;font-size:14px; line-height:1.2;}
	.brandbox span.step strong{font-size:18px;}
	.brandbox p{padding:0 5%; font-size:12px;}
	.brandbox .brimgs1{ width:150px; margin-left:-75px; top:25%;}
	.brand3 ul.texts{ font-size:12px; top:25%;}
	.brand3 .brimgs2{ height:115px;}
	.brand3 .brimgs2 li{ width:40%;}
	.brand6 .brimgs5{bottom:10%;}
}