.visualArea {position:relative; height:499px; overflow:hidden; max-width:980px; margin:0 auto;}
.visualArea .rollArea {position:relative;z-index:3;}
.visualArea .rollArea li {width:100%; height:499px;overflow:hidden;}
.visualArea .rollArea li div.img1 {width:100%; height:100%; background:url(../img/main/slider1.png) no-repeat 50% 40%; background-size:contain;}
.visualArea .rollArea li div.img2 {width:100%; height:100%; background:url(../img/main/slider2.png) no-repeat 50% 40%; background-size:contain;}
.visualArea .rollArea li div.img3 {width:100%; height:100%; background:url(../img/main/slider3.png) no-repeat 50% 40%; background-size:contain;}

.bx-pager {position:absolute;left:60px;bottom:55px;z-index:3;overflow:hidden; }
.bx-pager-item {float:left;}
.bx-pager-item a {text-indent:-9999em;display:block;width:24px; height:4px; margin:0 2px; background:url(../img/main/sp_page.gif) no-repeat 0 0px;}
.bx-pager-item a.active {background-position:0px -4px;}



@media only screen and (max-width:1023px) {
.visualArea, .visualArea .rollArea li{height:440px;}
.visualArea{background:url(../img/main/bg_slider.jpg) repeat-x 0% 0%; }
}

@media only screen and (max-width:880px) {
.visualArea, .visualArea .rollArea li{height:390px;}
}

@media only screen and (max-width:767px) {
.visualArea, .visualArea .rollArea li{height:370px;}
.bx-pager {left:50%; margin-left:-42px; bottom:15px;}
}


@media only screen and (max-width:480px) {
.visualArea, .visualArea .rollArea li{height:260px;}
}


@media only screen and (max-width:320px) {
.visualArea, .visualArea .rollArea li{height:200px;}
}