@charset "utf-8";@font-face {
    font-family: Kunminghaiouti;
    src: url('fonts/Kunminghaiouti.ttf');
    font-style: normal
}

a {
    display: block
}

.banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0
}

.banner .slick video,.banner .slick img {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover
}

.banner video::-webkit-media-controls {
    display: none !important
}

.banner video {
    pointer-events: none
}

.banner ul li a {
    display: block;
    position: relative;
    overflow: hidden
}

.banner .slick-slide.slick-current a img {
    animation: img_scale 8s linear
}

.banner>ul::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 1
}

@keyframes img_scale {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

.banner .slick-dots {
    bottom: .4rem;
    right: 2.1rem;
    width: auto;
    z-index: 2
}

.banner .slick-dots li {
    width: .39rem;
    height: .3rem;
    background: url(../images/ban-dots.png) no-repeat center center;
    background-size: 100%;
    transition: all 0.5s;
    margin: 0 .1rem
}

.banner .slick-dots li.slick-active {
    background: url(../images/ban-dotsa.png) no-repeat center center;
    background-size: .32rem
}

.ban-lk {
    position: absolute;
    left: 2.1rem;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    z-index: 2
}

.ban-lk a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: .16rem 0;
    width: 3.17rem;
    transition: all 0.5s
}

.ban-lk a p {
    font-size: .22rem;
    color: #ffffff
}

.ban-lk a.on {
    padding: .32rem 0
}

.ban-lk a:nth-child(1) {
    background: url(../images/ban-lkbg1.jpg) no-repeat;
    background-size: cover
}

.ban-lk a:nth-child(2) {
    background: url(../images/ban-lkbg2.jpg) no-repeat;
    background-size: cover
}

.ban-lk a img {
    width: .4rem;
    margin-right: .2rem
}

.s1-l .more {
    position: relative;
    transform: none;
    margin-left: .2rem;
    display: inline-block
}

.s1 {
    padding-top: 1.5rem;
    padding-bottom: .8rem;
    background: url(../images/s1-bg.png) no-repeat left top;
    background-size: 60%
}

.s1-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.s1-l {
    width: 7.9rem;
    margin-right: .4rem
}

.s1-tx {
    margin-bottom: .4rem
}

.s1-tx h3 {
    font-family: 'sy';
    font-size: .4rem;
    color: #842F27;
    margin-bottom: .5rem
}

.s1-tx p {
    font-size: .22rem;
    line-height: .45rem;
    color: #333333;
    text-align: justify
}

.s1-num h3 {
    color: #842F27;
    line-height: 1;
    font-size: .2rem;
    margin-bottom: .15rem
}

.s1-num h3 b {
    font-size: .36rem;
    font-family: 'sy'
}

.s1-num p {
    font-size: .18rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.s1-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.s1-line {
    height: .67rem;
    border-left: .01rem solid #DFC0BE
}

.s1-r {
    flex: 1;
    min-width: 0;
    position: relative
}

.s1-r::before {
    content: '';
    position: absolute;
    width: 96%;
    height: 88%;
    background: url(../images/s1-rline.png) no-repeat;
    background-size: 100% 100%;
    top: .3rem;
    right: -0.4rem
}

.s1-ban .pic {
    padding-top: 4rem
}

.s1-ban a {
    position: relative
}

.s1-ban a::before {
    content: '';
    width: .6rem;
    height: .6rem;
    background: url(../images/s1-play.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.s1-ban>ul {
    padding-bottom: .67rem
}

.s1-r p {
    font-weight: normal;
    color: #333333;
    font-size: .3rem;
    position: absolute;
    left: .4rem;
    bottom: 0;
    font-family: 'sy'
}

.s1-ban .slick-prev {
    width: .5rem;
    height: .5rem;
    background: url(../images/s1-l.png) no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    top: auto;
    transform: none;
    left: 5rem;
    transition: all 0.5s
}

.s1-ban .slick-next {
    width: .5rem;
    height: .5rem;
    background: url(../images/s1-r.png) no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    top: auto;
    transform: none;
    right: .3rem;
    transition: all 0.5s
}

.s1-ban .slick-arrow:hover {
    transform: scale(1.05)
}

.s2 {
    padding-bottom: 1.2rem
}

.s2-box {
    padding-top: .8rem
}

.tit {
    margin-bottom: .5rem;
    text-align: center;
    position: relative
}

.more a {
    font-size: .18rem;
    color: #696969;
    padding-right: .38rem;
    background: url(../images/more-line.png) no-repeat right center;
    background-size: .3rem;
    position: relative;
    font-family: 'sy';
    transition: all 0.5s
}

.more {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.more::before {
    content: '';
    width: 1rem;
    height: .55rem;
    background: url(../images/more.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: -0.13rem;
    bottom: -0.15rem
}

.more:hover:before {
    transform: rotateY(180deg);
    transition: all 0.8s
}

.more:hover a {
    color: #842F27
}

.tit-c {
    position: relative;
    display: inline-block
}

.tit-c h2 b {
    color: #842F27;
    font-size: .42rem;
    line-height: .5rem;
    display: block;
    font-family: Kunminghaiouti;
    font-weight: normal;
    width: 1rem;
}

.tit-c h2 b:last-child {
    color: #333333;
    margin-left: .77rem
}

.tit-c span {
    color: #757575;
    font-size: .16rem;
    max-width: 1rem;
    position: absolute;
    left: -0.1rem;
    top: .6rem;
    text-align: left;
    font-family: 'sy'
}

.s9 .tit-c span,.s1 .tit-c span {
    line-height: 1
}

.s2 .tit-c span {
    color: #C29469
}

.s2 .tit-c::after {
    background: url(../images/tit1.png) no-repeat;
    background-size: 100%
}

.tit-c::after {
    content: '';
    position: absolute;
    right: -0.6rem;
    top: -0.3rem;
    width: 1.2rem;
    height: .66rem;
    background: url(../images/tit3.png) no-repeat;
    background-size: 100%
}

.s2 .tit {
    margin-bottom: 1rem;
    text-align: center
}

.s2-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.s2-l {
    width: 72%
}

.s2-l .pic {
    padding-top: 7rem
}

.s2-r {
    flex: 1;
    min-width: 0;
    background: url(../images/s2-rbg.jpg) no-repeat;
    background-size: cover;
    padding: .2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.s2-r ul li a {
    color: #FFFFFF;
    font-size: .24rem;
    position: relative;
    line-height: 0.65rem;
    padding-left: .58rem;
    background: url(../images/s2-jt.png) no-repeat left center;
    background-size: 0;
    transition: all 0.6s
}

.s2-r ul li {
    position: relative;
    padding-left: .8rem
}

.s2-r ul li:last-child {
    margin-bottom: 0
}

.s2-r ul li::before {
    content: '';
    width: 5.05rem;
    height: 100%;
    position: absolute;
    background: url(../images/s2-tbg.png) no-repeat right center;
    background-size: 0% 100%;
    right: 0;
    top: 0;
    transition: all 0.6s
}

.s2-r ul li.on::before {
    right: .3rem;
    background-size: 100% 100%
}

.s2-r ul li.on a {
    color: #5F315F;
    font-weight: 600;
    background-size: .34rem
}

.s2-c {
    position: relative;
    z-index: 2
}

.s2-box {
    position: relative
}

.s2-bg {
    width: 16.11rem;
    height: 100%;
    background: url(../images/s2-bg.png) no-repeat;
    background-size: 96% 85%;
    position: absolute;
    top: -1rem;
    left: -0.36rem
}

.s2-more a {
    font-size: .2rem;
    color: #ffffff;
    position: relative
}

.s2-more {
    text-align: center;
    padding-top: .13rem;
    padding-bottom: .23rem;
    background: url(../images/more.png) no-repeat center center;
    background-size: auto 100%
}

.s3 {
    padding-top: 1.3rem;
    padding-bottom: .6rem;
    background: url(../images/s3-bg.png) no-repeat center top;
    background-size: cover
}

.s3-lt .pic {
    padding-top: 140%
}

.s3-tx {
    text-align: center;
    margin-top: .15rem
}

.s3-tx h3 {
    font-family: 'sy';
    color: #ffffff;
    font-size: .22rem;
    margin-bottom: .08rem
}

.s3-tx p {
    font-family: 'sy';
    color: #ffffff;
    font-size: .14rem
}

.s3 .tit-c span,.s3 .tit-c h2 b {
    color: #ffffff
}

.s3 .tit-c::after {
    background: url(../images/tit2.png) no-repeat;
    background-size: 100%
}

.s3 .more a {
    color: #ffffff
}

.s3-lt a:hover img {
    transform: scale(1)
}

.s3-p {
    padding: .2rem;
    transition: all 0.5s
}

.s3-lt a {
    padding-top: .7rem;
    transition: all 0.5s
}

.s3-lt ul li a.scale {
    padding-top: 0
}

.s3-lt ul li a.scale .s3-p {
    background: url(../images/s3-tbg.png) no-repeat;
    background-size: 100% 100%
}

.s3-arrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.s3-prev {
    width: .48rem;
    height: .47rem;
    background: url(../images/s3-l.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    transition: all 0.5s
}

.s3-prev:hover {
    background: url(../images/s3-lh.png) no-repeat;
    background-size: 100% 100%
}

.s3-next {
    width: .48rem;
    height: .47rem;
    background: url(../images/s3-r.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    transition: all 0.5s
}

.s3-next:hover {
    background: url(../images/s3-rh.png) no-repeat;
    background-size: 100% 100%
}

.s3-arrow {
    margin-top: .4rem
}

.s3-arrow img {
    width: 2.63rem;
    display: block;
    margin: 0 .55rem
}

.s4 {
    padding-top: 1.39rem;
    padding-bottom: 1.3rem;
    background: url(../images/s3-bg.png) no-repeat center top;
    background-size: 100%
}

.s4 .more a {
    color: #ffffff
}

.s4 .tit-c h2 b {
    color: #ffffff
}

.s4 .tit-c span {
    color: #ffffff
}

.s4 .tit-c::after {
    background: url(../images/tit2.png) no-repeat;
    background-size: 100%
}

.s4-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.s4-l {
    width: 57%
}

.s4-l .pic {
    padding-top: 5.93rem
}

.s4-r {
    width: 42.4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.s4-r a,.s4-l a {
    position: relative
}

.s4-r a::before,.s4-l a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1
}

.s4-l .slick-dots {
    text-align: right;
    padding-bottom: .2rem;
    padding-right: .2rem
}

.s4-l .slick-dots li {
    width: .18rem;
    height: .18rem;
    background: url(../images/s4-d.png) no-repeat center center;
    background-size: .09rem
}

.s4-l .slick-dots li.slick-active {
    background: url(../images/s4-da.png) no-repeat center center;
    background-size: 100%
}

.s4-tx {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .2rem;
    width: 100%;
    z-index: 2
}

.s4-tx p {
    color: #ffffff;
    font-size: .18rem;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.s4-top .pic {
    padding-top: 3.65rem
}

.s4-bot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.s4-bot>a {
    width: 49.3%
}

.s4-bot .pic {
    padding-top: 2.2rem
}

.s5-lt ul {
    display: flex;
    justify-content: space-between
}

.s5-lt ul li.on {
    width: 50%
}

.s5-lt ul li {
    width: 12.5%;
    transition: all 0.5s
}

.s5-p {
    height: 5.51rem;
    background-position: center center;
    background-size: cover
}

.s5-lt ul li a {
    position: relative
}

.s5-lt ul li a h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    z-index: 3;
    font-size: .3rem;
    font-family: 'sy';
    width: .36rem;
    line-height: 1.2;
    text-align: center;
    max-height: 100%;
    overflow: hidden
}

.s5-lt ul li a h3 span {
    display: block
}

.s5-lt ul li.on a h3 {
    opacity: 0
}

.s5-lt ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9
}

.s5-lt ul li:nth-child(1) a::after {
    background-color: #294238
}

.s5-lt ul li:nth-child(2) a::after {
    background-color: #CAA579
}

.s5-lt ul li:nth-child(3) a::after {
    background-color: #C8B298
}

.s5-lt ul li:nth-child(4) a::after {
    background-color: #5F315F
}

.s5-lt ul li:nth-child(5) a::after {
    background-color: #842F27
}

.s5-lt ul li.on a::after {
    opacity: 0
}

.s5-lt ul li:nth-child(1) {
    clip-path: polygon(0% 0%, 100% 2.5%, 100% 97.5%, 0% 100%)
}

.s5-lt ul li:nth-child(2) {
    clip-path: polygon(0% 2.5%, 100% 0%, 100% 100%, 0% 97.5%)
}

.s5-lt ul li:nth-child(3) {
    clip-path: polygon(0% 0%, 100% 2.5%, 100% 97.5%, 0% 100%)
}

.s5-lt ul li:nth-child(4) {
    clip-path: polygon(0% 2.5%, 100% 0%, 100% 100%, 0% 97.5%)
}

.s5-lt ul li:nth-child(5) {
    clip-path: polygon(0% 0%, 100% 2.5%, 100% 97.5%, 0% 100%)
}

.s6 {
    margin: 1rem 0
}

.s6-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.s6-ban .pic {
    padding-top: 4.6rem
}

.s6-ban {
    width: 62%
}

.s6-ban a {
    background: url(../images/s6-lbg.png) no-repeat left 7.35rem top;
    background-size: auto 100%
}

.s6-lt {
    flex: 1;
    min-width: 0
}

.s6-ban .pic {
    width: 7.35rem;
    padding-top: 4.6rem
}

.s6-ban ul li a {
    display: flex;
    flex-wrap: wrap
}

.s6-tx {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative
}

.s6-tx h3 {
    color: #232323;
    font-size: .24rem;
    letter-spacing: .03rem;
    font-family: 'sy';
    width: .7rem;
    height: 4rem;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    display: block;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  /*  display: -webkit-box;*/
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.s6-tx p {
    font-family: 'sy';
    color: #6A6A6A;
    font-size: .18rem;
    position: absolute;
    left: -0.1rem;
    top: 0.7rem;
    transform: rotate(90deg)
}

.s6-ban .slick-dots {
    text-align: right;
    padding-bottom: .2rem;
    padding-right: 2.23rem
}

.s6-ban .slick-dots li {
    width: .18rem;
    height: .18rem;
    background: url(../images/s4-d.png) no-repeat center center;
    background-size: .09rem
}

.s6-ban .slick-dots li.slick-active {
    background: url(../images/s4-da.png) no-repeat center center;
    background-size: 100%
}

.s6-lt {
    background: #FFFFFF
}

.s6-lt ul li {
    position: relative;
    border-bottom: .01rem dashed #D1D1D1;
    transition: all 0.5s
}

.s6-lt ul li:hover {
    border-color: transparent
}

.s6-lt ul li:last-child {
    border-color: transparent
}

.s6-lt ul li::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 101%;
    background: #5F315F;
    transition: all 0.5s
}

.s6-lt ul li:hover:before {
    width: 100%
}

.s6-lt ul li a {
    padding: .2rem .3rem;
    position: relative;
    z-index: 2
}

.s6-lt ul li:hover h3 {
    color: #ffffff
}

.s6-lt ul li:hover p {
    color: rgba(255, 255, 255, 0.6)
}

.s6-lt ul li h3 {
    font-size: .18rem;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: .11rem;
    transition: all 0.5s
}

.s6-lt ul li p {
    font-size: .14rem;
    color: #999999;
    height: .36rem;
    line-height: .18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: all 0.5s
}

.side-nav.on {
    transform: translate(0%, -50%)
}

.side-nav:hover {
    width: 1.15rem;
    height: 5rem
}

.side-nav {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    z-index: 99;
    background: url(../images/side-bg.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    padding: .2rem .15rem;
    padding-bottom: 0;
    transition: all 0.5s;
    overflow: hidden;
    text-align: center;
    width: .98rem;
    height: 4.2rem;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3))
}

.side-lg img {
    width: .66rem;
    margin: 0 auto;
    display: block;
    transition: all 0.5s
}

.side-nav h2 {
    font-family: 'sy';
    line-height: 1.2;
    font-size: .26rem;
    color: #FFFFFF;
    width: .36rem;
    text-align: center;
    margin: .2rem auto;
    padding-bottom: .52rem;
    background: url(../images/side-i2.png) no-repeat center bottom;
    background-size: 100%;
    transition: all 0.5s
}

.side-nav ul {
    position: absolute;
    transform: translateX(-100%);
    transition: all 0.5s;
    margin: .1rem 0
}

.side-nav ul li:last-child a {
    border-color: transparent
}

.side-nav ul li a {
    line-height: .5rem;
    font-size: .16rem;
    color: #ffffff;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
    font-family: 'sy';
    transition: all 0.5s
}

.side-nav:hover .side-lg img {
    width: .76rem
}

.side-nav:hover h2 {
    opacity: 0;
    position: absolute;
    transform: translateX(-100%)
}

.side-nav:hover ul {
    position: static;
    transform: translateX(0%)
}

.side-nav ul li a:hover {
    opacity: 0.7
}

.s7 {
    padding-top: 1rem;
    padding-bottom: 1.7rem;
    background: url(../images/s7-bg.png) no-repeat center bottom;
    background-size: cover
}

.s7 .tit-c span,.s7 .tit-c h2 b {
    color: #ffffff
}

.s7 .tit-c::after {
    background: url(../images/tit2.png) no-repeat;
    background-size: 100%
}

.s7 .more a {
    color: #ffffff
}

.s7-lt ul li a {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: .25rem;
    padding-bottom: .6rem;
    margin: 0 .15rem;
    transition: all 0.5s
}

.s7-lt ul li a:hover {
    background: url(../images/s7-tbg.png) no-repeat center center;
    background-size: 100% 100%;
    border-color: transparent;
    box-shadow: 0 0 .1rem 0 rgba(0, 0, 0, 0.3)
}

.s7-lt ul li a:hover p {
    color: #5F315F
}

.s7-lt ul li a:hover span,.s7-lt ul li a:hover b {
    margin-bottom: .1rem;
    color: #5F315F
}

.s7-lt ul li a h3 {
    margin-bottom: .1rem
}

.s7-lt ul li a h3 b {
    font-family: 'sy';
    font-size: .24rem;
    color: #ffffff;
    margin-right: .05rem
}

.s7-lt ul li a h3 span {
    font-size: .16rem;
    color: rgba(255, 255, 255, 0.6)
}

.s7-lt p {
    font-size: .18rem;
    color: #FFFFFF;
    line-height: .32rem;
    height: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.s8 .tit {
    text-align: left
}

.s8 .more {
    right: -3.3rem
}

.s8 {
    padding-top: 1.3rem;
    padding-bottom: 1rem
}

.s8 .tit-c span {
    color: #757575
}

.s8-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.s8-lt {
    width: 56%;
    position: relative;
    z-index: 2
}

.s8-tx h3 {
    color: #333333;
    font-size: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: .05rem
}

.s8-pic {
    position: absolute;
    right: 0;
    bottom: 1rem;
    width: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s
}

.s8-lt ul li.on .s8-pic {
    bottom: 0;
    opacity: 1;
    visibility: visible
}

.s8-pic .pic {
    padding-top: 130%
}

.s8-date span {
    color: #907F54;
    font-size: .2rem;
    display: block
}

.s8-date {
    margin-right: .3rem;
    padding-right: .3rem
}

.s8-lt ul li:last-child a {
    border-color: transparent
}

.s8-lt ul li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: .3rem 0;
    padding-right: 0.8rem;
    border-bottom: .01rem dashed #9F9F9F;
    position: relative;
    z-index: 2
}

.s8-lt ul li.on .s8-date {
    border-color: #EBDDDC
}

.s8-lt ul li.on p {
    background: url(../images/s8-wz2.png) no-repeat left center;
    background-size: .2rem;
    color: #ffffff
}

.s8-lt ul li.on h3,.s8-lt ul li.on span {
    color: #fff
}

.s8-lt ul li.on a {
    border-color: transparent
}

.s8-lt ul li.on {
    z-index: 2
}

.s8-lt ul li {
    padding: 0 .25rem;
    padding-right: 1rem;
    position: relative
}

.s8-lt ul li::before {
    content: '';
    background: #5F315F;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 102%;
    width: 0%;
    transition: all 0.6s
}

.s8-lt ul li.on:before {
    width: 100%
}

.s8-tx {
    flex: 1;
    min-width: 0
}

.s8-date {
    margin-bottom: .08rem;
    border-right: 1px solid #842F27
}

.s8-tx p {
    color: #907F54;
    font-size: .18rem;
    padding-left: .27rem;
    background: url(../images/s8-wz.png) no-repeat left center;
    background-size: .2rem
}

.s8-r {
    flex: 1;
    min-width: 0;
    position: relative
}

.s8-r img {
    position: absolute;
    left: -0.25rem;
    bottom: 0.3rem;
    width: 9.05rem;
    height: 6.84rem;
    display: block
}

.s9 {
    padding-bottom: 1.5rem;
    background: url(../images/s9-bg.png) no-repeat center bottom;
    background-size: 100%
}

.s9-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    position: relative
}

.s9-ban1 {
    margin-right: .15rem;
    width: 4rem
}

.s9-ban1 .pic {
    padding-top: 2.26rem
}

.s9-ban2 {
    flex: 1;
    min-width: 0
}

.s9-ban2 .pic {
    padding-top: 56.4%
}

.s9-ban2 ul li a {
    margin: 0 .15rem
}

.s9-prev {
    position: absolute;
    top: 60%;
    left: -0.25rem;
    transform: translateY(-50%);
    width: .5rem;
    height: .5rem;
    background: url(../images/s1-l.png) no-repeat;
    background-size: 100% 100%;
    transition: all 0.5s;
    cursor: pointer
}

.s9-next {
    position: absolute;
    top: 60%;
    right: -0.1rem;
    transform: translateY(-50%);
    width: .5rem;
    height: .5rem;
    background: url(../images/s1-r.png) no-repeat;
    background-size: 100% 100%;
    transition: all 0.5s;
    cursor: pointer
}

.s9-arrow>div:hover {
    transform: translateY(-50%) scale(1.05)
}

.index {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99;
    background: url(../images/index-bg.png) repeat-y;
    background-size: 100%
}

@media screen and (max-width: 1200px) {
    .side-nav {
        transform: translate(0%, -50%);
        display: none
    }

    .s1-tx h3 {
        font-size: .32rem;
        margin-bottom: .2rem
    }

    .banner .slick video, .banner .slick img {
        height: auto
    }

    .banner {
        position: relative
    }

    .ban-lk {
        left: 0
    }

    .index {
        position: static;
        padding: 0
    }

    .banner .slick-dots {
        right: .1rem
    }

    .s1 {
        padding: .3rem 0
    }

    .s1-l {
        width: 100%;
        margin: 0;
        margin-bottom: .3rem
    }

    .s1-r {
        flex: auto;
        width: 100%
    }

    .s1-data {
        justify-content: center
    }

    .s1-line {
        margin: 0 .5rem
    }

    .s1-ban .pic {
        padding-top: 64%
    }

    .s1-r::before {
        display: none
    }

    .s1-r p {
        left: 0;
        bottom: 0
    }

    .s1-ban .slick-prev {
        left: auto;
        right: 1rem
    }

    .s1-ban .slick-next {
        right: 0rem
    }

    .s2-box {
        padding-top: .3rem
    }

    .s2 .tit {
        margin-bottom: .3rem
    }

    .s2-r ul li::before {
        width: 4.2rem
    }

    .s2 {
        padding-bottom: .5rem
    }

    .s4 {
        padding-top: 1rem;
        padding-bottom: .5rem
    }

    .s6-ban {
        width: 100%;
        margin: 0;
        margin-bottom: .3rem
    }

    .s6-tx {
        flex: auto;
        width: 100%;
        background: #ffffff;
        padding: .2rem
    }

    .s6-ban .pic {
        padding-top: 64%
    }

    .s6-tx h3 {
        width: 100%;
        height: auto;
        writing-mode: inherit;
        font-size: .2rem
    }

    .s6-tx p {
        position: static;
        transform: none;
        text-align: left;
        width: 100%;
        margin-bottom: .1rem
    }

    .s6-lt {
        flex: auto;
        width: 100%
    }

    .s6-ban .slick-dots {
        padding-right: .2rem;
        padding-bottom: 1.5rem
    }

    .s6-ban .pic {
        width: 100%
    }

    .s6-ban a {
        background-size: 0
    }

    .s6 {
        margin: .5rem 0
    }

    .s7 {
        padding: .5rem 0;
        padding-bottom: .8rem
    }

    .s8 {
        padding: .5rem 0
    }

    .s8-r img {
        width: 100%;
        height: auto;
        right: 0;
        left: 0
    }

    .s9-ban1 {
        display: none
    }

    .s9-prev {
        left: 0;
        top: 50%
    }

    .s9-next {
        right: 0;
        top: 50%
    }

    .s9 {
        padding-bottom: .8rem
    }

    .s3 {
        padding-bottom: .3rem
    }

    .s2-r {
        padding-top: .3rem;
        padding-bottom: .5rem
    }

    .s2-r ul li::before {
        width: 100%
    }

    .s2-r ul li {
        padding-left: .3rem
    }

    .s2-r ul li a {
        line-height: .6rem;
        font-size: .2rem
    }

    .s2-r {
        flex: auto;
        width: 100%;
        padding: .2rem 0
    }

    .s2-r ul li.on::before {
        background: #ffffff
    }

    .s2-l .pic {
        padding-top: 54%
    }

    .s2-l {
        width: 100%;
        margin: 0
    }
}

@media screen and (max-width: 1024px) {
    .ban-lk a {
        width: auto;
        padding: .2rem
    }

    .ban-lk a.on {
        padding: .2rem .1rem
    }

    .ban-lk a img {
        width: .2rem;
        margin-right: .1rem
    }

    .ban-lk a p {
        font-size: .16rem
    }

    .s4-l .pic {
        padding-top: 64%
    }

    .s4-c>div {
        width: 100%;
        margin: 0;
        margin-bottom: .15rem
    }

    .s4-top {
        margin-bottom: .15rem
    }

    .s4-top .pic {
        padding-top: 57%
    }

    .s4-bot .pic {
        padding-top: 68%
    }

    .s8-lt {
        width: 100%
    }

    .s8-r {
        display: none
    }
        .s8-lt ul li.on .s8-pic{
    display: none;
}
.s8-lt ul li{
    padding-right: 0;
}
}

@media screen and (max-width: 768px) {
    .banner .slick-dots {
        bottom: .2rem
    }

    .banner .slick-dots li {
        width: .29rem;
        height: .25rem;
        margin: 0 .1rem
    }

    .s4 {
        padding-top: 0.8rem;
        position: relative
    }

    .s4 .w15 {
        position: relative;
        z-index: 2
    }

    .s4::before {
        content: '';
        position: absolute;
        top: 1rem;
        width: 100%;
        height: 2rem;
        background: url(../images/s4-bg.png) repeat-y;
        background-size: 100%
    }

    .s1-line {
        margin: 0 .3rem
    }

    .s1-num h3 b {
        font-size: .24rem
    }

    .s5-p {
        height: 3.6rem
    }

    .s5-lt ul li a h3 {
        font-size: .2rem
    }

    .tit {
        margin-bottom: .3rem
    }
}

@media screen and (max-width: 640px) {
    .s8-date span {
        font-size: .16rem
    }

    .s8-tx h3 {
        font-size: .16rem
    }

    .s8-date {
        padding-right: .15rem;
        margin-right: .15rem
    }

    .s8-lt ul li a {
        padding: .2rem 0;
        padding-right: 0
    }

    .s8-pic {
        width: 1rem
    }
}

@media screen and (max-width: 480px) {
    .tit-c::after {
        background-size: 80% !important;
        top: -0.1rem
    }

    .ban-lk {
        width: 1.2rem
    }

    .ban-lk a.on, .ban-lk a {
        padding: .1rem;
        width: 100%
    }

    .ban-lk a img {
        width: .15rem;
        margin-right: .05rem
    }

    .tit {
        text-align: left
    }

    .s3-lt {
        max-width: 80%;
        margin: 0 auto
    }

    .banner .slick-dots li {
        margin: 0 .05rem
    }

    .s3-lt a {
        padding-top: 0 !important
    }

    .s1-num {
        width: 33.33%
    }

    .s3-arrow img {
        width: 1.6rem;
        margin: 0 .2rem
    }

    .s1-line {
        display: none
    }

    .s1-num p {
        font-size: .16rem
    }
}