
.side_scroll{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: url(../images/side_scroll_bg.png) no-repeat center/cover;display: flex;align-items: center;z-index: 1000;left: 100%;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;}
.side_scroll.on{left: 0;}
.side_scroll .con{position: relative;width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 0 190px 23px;}

.side_scroll .lll{position: relative;padding: 0 30px 0 0;background: url(../images/side_scroll_prev.png) no-repeat right center/22px auto;color: #fff;font-size: 22px;width: 1em;box-sizing: content-box;cursor: pointer;}

.side_scroll_title{display: block;border-left: 1px solid #e0c28f;padding: 0 0 0 27px;/* margin: 0 100px 0 0; */}
.side_scroll_title img{display: block;width: 100px;}

.index_0a{width: calc(100% - 200px);}

/* .index_0a1{display: none;}
.index_0a1:first-child{display: block;} */

.index_0a1{overflow: hidden;position: relative;padding: 0 70px 0 6px;}
.index_0a1.on{-webkit-animation: sideswiper .5s ease-in-out;animation: sideswiper .5s ease-in-out;}
@-webkit-keyframes sideswiper{
    0% {opacity: 0;top: 50px;}
    100% {opacity: 1;top: 0;}
}
@keyframes sideswiper{
    0% {opacity: 0;top: 50px;}
    100% {opacity: 1;top: 0;}
}
.index_0a1 .swiper{overflow: hidden;}
.index_0a1 ul{margin: 0 0;}
.index_0a1 .item{margin: 0 31px;background: #e0c28f;padding: 8px 8px 13px;display: block;/* height: 327px; */}
.index_0a1 .title{margin: 0 10px;line-height: 44px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.index_0a1 .item:hover .title{color: #282828;font-weight: bold;}

.index_0a1 .swiper_menu{text-align: center;padding: 0 2px;font-size: 0;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.index_0a1 .arrow{width: 26px;height: 44px;background: no-repeat center/cover;display: inline-block;vertical-align: top;margin: 0 9px;cursor: pointer;opacity: .4;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;}
.index_0a1 .prev{left: 0px;background-image: url(../images/side_scroll_prev.png);}
.index_0a1 .next{right: 0px;background-image: url(../images/side_scroll_next.png);}
.index_0a1 .arrow:hover{opacity: 1;}

.index_0a2{margin: 113px 334px -174px 274px;position: relative;}
.index_0a2 ul{margin: 0 0;display: flex;justify-content: space-between;position: relative;}
.index_0a2 ul::before{content: '';display: block;position: absolute;top: 0;left: 40px;right: 40px;background: url(../images/side_scroll_ruler.png) no-repeat center/100% 100%;height: 29px;}
.index_0a2 li{width: auto;}
.index_0a2 .item{margin: 0 0;font-family: 'Noto Serif SC';font-weight: bold;color: #e0c28f;padding: 40px 0 0;position: relative;cursor: pointer;}
.index_0a2 li.active .item::before{content: '';background: url(../images/side_scroll_ico.png) no-repeat center/cover;width: 38px;height: 31px;position: absolute;left: 50%;transform: translateX(-50%);top: 13px;}

.index_0a2 .arrow{width: 16px;height: 18px;background: no-repeat center;display: inline-block;vertical-align: top;margin: 0 0 1px;cursor: pointer;position: absolute;top: 10px;opacity: .5;}
.index_0a2 .prev{left: -16px;}
.index_0a2 .prev::before{content: '';position: absolute;border-right: 16px solid #e0c28f;border-top: 9px solid transparent;border-bottom: 9px solid transparent;left: 0;top: 0;}
.index_0a2 .next{right: -16px;}
.index_0a2 .next::before{content: '';position: absolute;border-left: 16px solid #e0c28f;border-top: 9px solid transparent;border-bottom: 9px solid transparent;left: 0;top: 0;}
.index_0a2 .arrow:hover{}

@media screen  and (max-width:1480px){
    .side_scroll .con{padding-bottom: 100px;}
    .side_scroll_title img{width: 60px;}

    .index_0a{width: calc(100% - 160px);}
    .index_0a1 .item{margin: 0 15px;}
    
    .index_0a2{margin: 60px 264px -100px 204px;}
}
@media screen  and (max-width:996px){
	.side_scroll .con{flex-direction: column;position: relative;padding: 0;height: 100%;justify-content: flex-start;}
    .side_scroll .lll{position: absolute;left: 0;top: 50%;transform: translateY(-50%);color: #282828;background: #fff;padding: 10px;border-radius: 0 5px 5px 0;}
    
    .side_scroll_title{border: none;padding: 0;margin: 20px 0 20px;}
    
    .index_0a{width: calc(100% - 80px);}
    .index_0a1{padding-right: 40px;}
    .index_0a1 .arrow{width: 13px;height: 22px;margin: 0 5px;}

    .index_0a2{margin: 20px auto 0;width: 400px;}
    .index_0a2 .tip{font-size: 16px;}
    .index_0a2 ul::before{left: 25px;right: 25px;height: 20px;}
    .index_0a2 li.active .item::before{width: 26px;height: 18px;top: 6px;}
    .index_0a2 .item{padding-top: 26px;}
    .index_0a2 .arrow{top: 4px;}

}
@media screen and (max-width:768px){
    .side_scroll .lll{ font-size: 20px;}

}
@media screen and (max-width:480px){
	.index_0a2{width: 100%;}
    .index_0a2 ul::before{left: 20px;right: 20px;height: 16px;}
    .index_0a2 .tip{font-size: 14px;}
    .side_scroll .lll{ top: 10%; font-size: 18px;}

}
@media screen and (max-width:380px){
    .index_0a{width: calc(100% - 40px);}
    .index_0a1{padding: 0 0 0 20px;}
    .index_0a1 .swiper_menu{display: none;}
    
}