@charset "utf-8";

/*首页banner 公用框架*/
.index_banner { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; height: 800px; overflow: hidden; background-color: #B7170E; }
.index_banner .arrow_w { max-width: 1920px; margin: 0 auto; top: 48%; position: absolute; left: 0; right: 0; z-index: 100; }
.index_banner:hover .arrow_w { display: block!important; }
.index_banner .pagination { width: 100%; margin: auto; position: absolute; z-index: 100; right: 0; display: inline-block; text-align: center; bottom: 20px; transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.index_banner .swiper-pagination-switch { width: 30px; height: 8px; display: inline-block; border-radius: 0px; background-color: #000; opacity: .2; margin: 0 10px; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; }
.index_banner .swiper-active-switch{ width: 30px; height: 30px; background-color: #000; opacity: .2; border-radius: 0px; }
.index_banner .arrow-left, .index_banner .arrow-right { display: block; cursor: pointer; position: absolute; top: 50%; z-index: 1000; color: #FFF; background: url(../images/banner_btn_arrow_left.png) no-repeat center center; font-size: 22px; opacity: 1; width: 38px; height: 80px; line-height: 80px; margin-top: -40px; text-align: center; transition: all 0.3s ease }
.index_banner .arrow-right { background: url(../images/banner_btn_arrow_right.png) no-repeat center center; }
.index_banner .arrow-right:hover, .index_banner .arrow-left:hover { color: #FFF; opacity: 1; }
.index_banner .arrow-right { right: -38px; }
.index_banner .arrow-left { left: -38px; }

@media screen and (max-width:970px) {
.index_banner .pagination { bottom: 0px; }
.index_banner .pagination { width: 100%; margin: auto; position: absolute; z-index: 100; right: 0; display: inline-block; text-align: center; bottom: 0px; }
.index_banner .swiper-pagination-switch {width: 10px;height: 6px;margin: 0 5px;background-color: #FFF;opacity: .5;border-radius: 0px;}
.index_banner .swiper-active-switch{ width: 10px; height: 6px;opacity: .8; }
.index_banner .arrow-left, .index_banner .arrow-right { width: 20px; height: 40px; line-height: 40px; margin-top: -20px; }
.index_banner .arrow-left, .index_banner .arrow-right { width: 20px; height: 40px; line-height: 40px; margin-top: -20px; }
.index_banner .arrow-left { left:0!important;;}
.index_banner .arrow-right{ right:0!important;;}
}
/*党建上线Banner index_banner_online*/
.index_banner_online { position: relative; background-color: #B7180F; width: 100%; min-width: 320px; margin: 0 auto; height: 800px; overflow: hidden; }
.index_banner_online_bg { width: 100%; height: 100%; max-width: 1920px; ; margin: 0 auto; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/index_banner_online_bg.png) no-repeat center center; background-size: cover; }

.index_banner_online { position: relative; background-color: #B7180F; width: 100%; min-width: 320px; margin: 0 auto; height: 800px; overflow: hidden; }
.beijing { width: 100%; height: 100%; max-width: 1920px; ; margin: 0 auto; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/index_banner_blue_img_4.png) no-repeat center center; background-size: cover; }
/*党建上线Banner 文案*/
.index_banner_online .index_banner_online_text { float: none; width: 100%; height: 100%; margin: auto; padding: 0; position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; }
.index_banner_online .index_banner_online_text .h1_w { height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 20; color: #fff; }
.index_banner_online .index_banner_online_text .h1_w { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: all 1.2s ease; transition: all 1.2s ease; }
.index_banner_online .index_banner_online_text .h1_1 { z-index: 10; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.index_banner_online .index_banner_online_text .h1_2 { z-index: 9; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.index_banner_online .index_banner_online_text .h1_3 { z-index: 8; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.index_banner_online .index_banner_online_text .h1_4 { z-index: 7; -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }
.swiper-slide-active .index_banner_online .index_banner_online_text .h1_w { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); animation-direction: reverse; }
.index_banner_online .index_banner_online_img { float: none; width: 100%; height: 100%; margin: auto; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; }
.index_banner_online .img_list { width: 100%; height: 100%; position: relative; z-index: 10; margin: 0 auto; }
.index_banner_online .img_list .img_w { opacity: 0; width: 100%; height: 100%; margin: auto; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: all 1.2s ease; transition: all 1.2s ease }
.index_banner_online .img_list .img_1 { z-index: 10; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.index_banner_online .img_list .img_2 { z-index: 9; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.index_banner_online .img_list .img_3 { z-index: 8; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.index_banner_online .img_list .img_4 { z-index: 7; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.index_banner_online .img_list .img_5 { z-index: 6; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.index_banner_online .img_list .img_6 { z-index: 5; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.index_banner_online .img_list .img_7 { z-index: 4; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.index_banner_online .img_list .img_8 { z-index: 3; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.swiper-slide-active .index_banner_online .img_list .img_w { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); animation-direction: reverse; }
/*--蓝色党建Banner dj_banner_red --*/

.dj_banner_red_bg { width: 100%; height: 100%; max-width: 1920px; ; margin: auto; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: #c9191f; background-size: cover; }
.dj_banner_red .dj_banner_red_text { width: 100%; height: 100%; margin: auto; padding: 0; position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; }
.dj_banner_red .dj_banner_red_text .h1_w { height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 20; color: #fff; }
.dj_banner_red .dj_banner_red_text .h1_w { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: all 1.2s ease; transition: all 1.2s ease }
.dj_banner_red .dj_banner_red_text .h1_2 { z-index: 10; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.dj_banner_red .dj_banner_red_text .h1_3 { z-index: 9; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.dj_banner_red .dj_banner_red_text .h1_1 { z-index: 8; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.dj_banner_red .dj_banner_red_text .h1_6 { z-index: 7; -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }
.dj_banner_red .dj_banner_red_text .h1_4 { z-index: 8; -webkit-transition-delay: 1s; transition-delay: 1s; }
.dj_banner_red .dj_banner_red_text .h1_5 { z-index: 8; -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }
.swiper-slide-active .dj_banner_red .dj_banner_red_text .h1_w { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); animation-direction: reverse; }
.dj_banner_red .index_banner_red_img { float: none; width: 100%; height: 100%; margin: auto; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; padding-left: 0px; padding-right: 0px; }
.dj_banner_red .img_list { width: 100%; height: 100%; position: relative; z-index: 10; margin: 0 auto; }
.dj_banner_red .img_list .img_w { opacity: 0; width: 100%; height: 100%; margin: auto; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: all 1.2s ease; transition: all 1.2s ease }
.dj_banner_red .img_list .img_1 { z-index: 10; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.dj_banner_red .img_list .img_2 { z-index: 9; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.dj_banner_red .img_list .img_3 { z-index: 8; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.dj_banner_red .img_list .img_4 { z-index: 7; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.dj_banner_red .img_list .img_5 { z-index: 6; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.dj_banner_red .img_list .img_6 { z-index: 5; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.dj_banner_red .img_list .img_7 { z-index: 4; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.dj_banner_red .img_list .img_8 { z-index: 3; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.swiper-slide-active .dj_banner_red .img_list .img_w { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); animation-direction: reverse; }
/*--蓝色党建Banner dj_banner_blue --*/
.dj_banner_blue_bg { width: 100%; height: 100%; max-width: 1920px; ; margin: auto; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/index_banner_blue_img_4.jpg) no-repeat center center; background-size: cover; }
.dj_banner_blue .dj_banner_blue_text { width: 100%; height: 100%; margin: auto; padding: 0; position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; }
.dj_banner_blue .dj_banner_blue_text .h1_w { height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 20; color: #fff; }
.dj_banner_blue .dj_banner_blue_text .h1_w { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: all 1.2s ease; transition: all 1.2s ease alternate }
.dj_banner_blue .dj_banner_blue_text .h1_1 { z-index: 10; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.dj_banner_blue .dj_banner_blue_text .h1_2 { z-index: 9; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.dj_banner_blue .dj_banner_blue_text .h1_3 { z-index: 8; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.dj_banner_blue .dj_banner_blue_text .h1_4 { z-index: 7; -webkit-transition-delay: 0.9s; transition-delay: 0.9s; }
.swiper-slide-active .dj_banner_blue .dj_banner_blue_text .h1_w { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); animation-direction: reverse; }
.dj_banner_blue .index_banner_blue_img { float: none; width: 100%; height: 100%; margin: auto; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; padding-left: 0px; padding-right: 0px; }
.dj_banner_blue .img_list { width: 100%; height: 100%; position: relative; z-index: 10; margin: 0 auto; }
.dj_banner_blue .img_list .img_w { opacity: 0; width: 100%; height: 100%; margin: auto; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); -webkit-transition: all 1.2s ease; transition: all 1.2s ease }
.dj_banner_blue .img_list .img_1 { z-index: 10; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.dj_banner_blue .img_list .img_2 { z-index: 9; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.dj_banner_blue .img_list .img_3 { z-index: 8; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.dj_banner_blue .img_list .img_4 { z-index: 7; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.dj_banner_blue .img_list .img_5 { z-index: 6; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.dj_banner_blue .img_list .img_6 { z-index: 5; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.dj_banner_blue .img_list .img_7 { z-index: 4; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.dj_banner_blue .img_list .img_8 { z-index: 3; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.swiper-slide-active .dj_banner_blue .img_list .img_w { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); animation-direction: reverse; }

/*-----BANNER公用-----*/
@media screen and (min-width:970px) {
.banner_pc { display: block; }
.banner_m { display: block; }
}

@media screen and (max-width:970px) {
.index_banner { height: auto; }
.index_banner .swiper-slide, .dj_banner { height: auto; }
.banner_pc { display: none; }
.banner_m { display: block; }
}

/*----首页PCBanner切换动效-----*/
 @-webkit-keyframes rollIn {
 0% {
opacity:0;
 -webkit-transform:translateX(-100%) rotate(-120deg)
}
 100% {
opacity:1;
 -webkit-transform:translateX(0px) rotate(0deg)
}
}

 @-moz-keyframes rollIn {
 0% {
opacity:0;
 -moz-transform:translateX(-100%) rotate(-120deg)
}
 100% {
opacity:1;
 -moz-transform:translateX(0px) rotate(0deg)
}
}

@-webkit-keyframes fadeInRight {
 0% {
opacity:0;
 -webkit-transform:translateX(20px)
}
 100% {
opacity:1;
 -webkit-transform:translateX(0)
}
}
 @-moz-keyframes fadeInRight {
 0% {
opacity:0;
 -moz-transform:translateX(20px)
}
 100% {
opacity:1;
 -moz-transform:translateX(0)
}
}


@media (min-width:970px) {
.index_banner .swiper-slide-active { 
-webkit-animation: rollIn 1s .2s ease both; -moz-animation: rollIn 1s .2s ease both; }
}

/*----首页移动Banner切换动效-----*/
@media (max-width:970px) {
.index_banner .swiper-slide-active { 
	-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
}

/*-----------扩展的动画库-----------*/

/*(banner01主标题)缩小放大震动动画*/
@-webkit-keyframes cx_text {
 0% {
opacity: 0.1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
 10% {
opacity: 0.8;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
}
 50% {
opacity: 0.6;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.2);
}
 80% {
opacity: 0.4;
transform: translate3d(0, 0, 0) rotate(0deg) scale(2.5);
}
 90% {
opacity: 0.2;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.2);
}
 100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
}
@-moz-keyframes cx_text {
 0% {
opacity: 0.1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
 10% {
opacity: 0.8;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1);
}
 50% {
opacity: 0.6;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.2);
}
 80% {
opacity: 0.4;
transform: translate3d(0, 0, 0) rotate(0deg) scale(2.5);
}
 90% {
opacity: 0.2;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.2);
}
 100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
}
@keyframes cx_text {
 0% {
opacity: 0.1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
 10% {
opacity: 0.8;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.2);
}
 50% {
opacity: 0.6;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.2);
}
 80% {
opacity: 0.4;
transform: translate3d(0, 0, 0) rotate(0deg) scale(2.5);
}
 90% {
opacity: 0.2;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1.2);
}
 100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
}

/*（镜头图标）缩小放大动画zoom_in*/
@-webkit-keyframes zoom_in {
 0% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
 10% {
opacity: 0.8;
transform: translate3d(0, 0px, 0) rotate(10deg) scale(0.7);
}
 35% {
opacity: 0.6;
transform: translate3d(0, 0px, 0) rotate(30deg) scale(0.4);
}
 50% {
opacity: 0.4;
transform: translate3d(0, 0, 0) rotate(360deg) scale(0);
}
 80% {
opacity: 0.2;
transform: translate3d(0, 0, 0) rotate(720deg) scale(1);
}
 90% {
opacity: 0.1;
transform: translate3d(0, 0, 0) rotate(3600deg) scale(6);
}
 100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(3600deg) scale(1);
}
}
@keyframes zoom_in {
 0% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
 10% {
opacity: 0.8;
transform: translate3d(0, 0px, 0) rotate(10deg) scale(0.7);
}
 35% {
opacity: 0.6;
transform: translate3d(0, 0px, 0) rotate(30deg) scale(0.4);
}
 50% {
opacity: 0.4;
transform: translate3d(0, 0, 0) rotate(360deg) scale(0);
}
 80% {
opacity: 0.2;
transform: translate3d(0, 0, 0) rotate(720deg) scale(1);
}
 90% {
opacity: 0.1;
transform: translate3d(0, 0, 0) rotate(3600deg) scale(6);
}
 100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(3600deg) scale(1);
}
}

/* （banner02 三个图层）往上推动动画*/
@-webkit-keyframes go_up {
 0% {
 opacity: 0;
transform: translate3d(0, 40px, 0)
}
 to {
 opacity: 1;
transform: translateZ(0)
}
}
@keyframes go_up {
 0% {
 opacity: 0;
 transform: translate3d(0, 40px, 0);
}
 to {
 opacity: 1;
transform: translateZ(0);
}
}

/*banner02 逆时针旋转动画*/
@keyframes circle-outer {
 from {
 transform:rotate(0deg)
}
 to {
 transform:rotate(360deg)
}
}
 @-webkit-keyframes circle_rotate {
 0% {
transform:rotate(0deg)
}
 10.7% {
transform:rotate(-90deg)
}
 25% {
transform:rotate(-90deg)
}
 35.7% {
transform:rotate(-180deg)
}
 50% {
transform:rotate(-180deg)
}
 60.7% {
transform:rotate(-270deg)
}
 75% {
transform:rotate(-270deg)
}
 85.7% {
transform:rotate(-360deg)
}
 100% {
transform:rotate(-360deg)
}
}
@-moz-keyframes circle_rotate {
 0% {
transform:rotate(0deg)
}
 10.7% {
transform:rotate(-90deg)
}
 25% {
transform:rotate(-90deg)
}
 35.7% {
transform:rotate(-180deg)
}
 50% {
transform:rotate(-180deg)
}
 60.7% {
transform:rotate(-270deg)
}
 75% {
transform:rotate(-270deg)
}
 85.7% {
transform:rotate(-360deg)
}
 100% {
transform:rotate(-360deg)
}
}
@-o-keyframes circle_rotate {
 0% {
transform:rotate(0deg)
}
 10.7% {
transform:rotate(-90deg)
}
 25% {
transform:rotate(-90deg)
}
 35.7% {
transform:rotate(-180deg)
}
 50% {
transform:rotate(-180deg)
}
 60.7% {
transform:rotate(-270deg)
}
 75% {
transform:rotate(-270deg)
}
 85.7% {
transform:rotate(-360deg)
}
 100% {
transform:rotate(-360deg)
}
}
@keyframes circle_rotate {
 0% {
 transform:rotate(0deg)
}
 10.7% {
 transform:rotate(-90deg)
}
 25% {
 transform:rotate(-90deg)
}
 35.7% {
 transform:rotate(-180deg)
}
 50% {
 transform:rotate(-180deg)
}
 60.7% {
 transform:rotate(-270deg)
}
 75% {
 transform:rotate(-270deg)
}
 85.7% {
 transform:rotate(-360deg)
}
 100% {
 transform:rotate(-360deg)
}
}
/*banner02 点动画，往右*/
@-moz-keyframes animate_float_right {
 0% {
 left: 50px;
 opacity: 0;
}
 50% {
 left: 120px;
 opacity: 1;
}
 70% {
 left: 120px;
 opacity: 0;
}
 100% {
 left: 50px;
 opacity: 0;
}
}
 @keyframes animate_float_right {
 0% {
 left: 50px;
 opacity: 0;
}
 50% {
 left: 120px;
 opacity: 1;
}
 70% {
 left: 120px;
 opacity: 0;
}
 100% {
 left: 50px;
 opacity: 0;
}
}
.category_banner { position: relative; width: 100%; height: 800px; overflow: hidden; background-color: #1f2733; }
.category_banner .arrow_w { margin: auto; top: 48%; position: absolute; left: 0; right: 0; z-index: 100; }
.category_banner:hover .arrow_w { display: block!important; }
.category_banner .pagination { width: 100%; margin: auto; position: absolute; z-index: 100; right: 0; display: inline-block; text-align: center; bottom: 30px; }
.category_banner .swiper-pagination-switch { width: 30px; height: 8px; display: inline-block; border-radius: 0px; background-color: #FFF; opacity: .6; margin: 0 5px; background: #FFF; }
.category_banner .swiper-active-switch { width: 30px; background-color: #11b88c; opacity: .9; border-radius: 0px; -moz-transition: opacity 0.3s ease-in, opacity 0.3s ease-out; -webkit-transition: opacity 0.3s ease-in, opacity 0.3s ease-out; transition: opacity 0.3s ease-in, opacity 0.3s ease-out; }
.category_banner .arrow-left, .category_banner .arrow-right { display: block; cursor: pointer; position: absolute; top: 50%; z-index: 1000; color: #FFF; background: url(../images/banner_btn_arrow_left.png) no-repeat center center; font-size: 22px; opacity: .8; width: 50px; height: 50px; line-height: 50px; text-align: center }
.category_banner .arrow-right { background: url(../images/banner_btn_arrow_right.png) no-repeat center center; }
.category_banner .arrow-right:hover, .category_banner .arrow-left:hover { color: #FFF; opacity: 1; }
.category_banner .arrow-right { right: -10% }
.category_banner .arrow-left { left: -10% }

@media screen and (max-width:1366px) {
.category_banner .arrow-right { right: 0% }
.category_banner .arrow-left { left: 0% }
}

@media screen and (max-width:1024px) {
.category_banner .arrow-right { right: 6% }
.category_banner .arrow-left { left: 6% }
}

@media screen and (max-width:768px) {
.category_banner .arrow-right { right: 4% }
.category_banner .arrow-left { left: 4% }
}

@media screen and (max-width:640px) {
.category_banner .arrow-right { right: 2%; background: none; border: 0px; }
.category_banner .arrow-left { left: 2%; background: none; border: 0px; }
}

@media screen and (max-width:320px) {
.category_banner .arrow-right { right: 1% }
.category_banner .arrow-left { left: 1% }
}