@font-face {
    font-family: jiangxizhuokai;
    src: url(../fonts/jiangxizhuokai.689deaa7.woff2)
}
.index {
    flex-direction: column
}
.index > .swiper {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center
}
.index > .swiper .swiper-item {
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    min-width: 1920px
}
.index > .swiper > .circle {
    display: flex;
    position: absolute;
    bottom: 20px;
    z-index: 2
}
.index > .swiper > .circle .circle-item {
    margin: 0 8px;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer
}
.index > .swiper > .circle .circle-item.swipeSelect {
    background-color: #97262c
}
.index > .video {
    width: 100%
}
.index > .video .title {
    width: 100%;
    height: 68px;
    background-image: url("../ysimg/changtiao.png");
    background-size: 100% 100%;
    font-size: 25px;
    font-family: jiangxizhuokai;
    display: flex;
    align-items: center;
    justify-content: center
}
.index > .video .title .left {
    color: #fff;
    padding-right: 100px
}
.index > .video .title .right {
    color: #000;
    padding-left: 100px
}
.index > .video video {
    width: 100%
}
.index > .main {
    display: flex;
    align-items: center;
    flex-direction: column
}
.index > .main > .title {
    writing-mode: vertical-lr;
    line-height: 40px
}
.index > .main > .lang, .index > .main > .title {
    color: #97262c;
    font-size: 30px;
    border-bottom: 2px solid #d4d0cf;
    padding: 30px 24px 20px
}
.index > .main > .lang {
    writing-mode: horizontal-tb
}
.index > .main > .explain {
    color: #7e706d;
    padding: 18px 0 30px
}
.index > .main .main-contain {
    display: flex;
    justify-content: center
}
.index > .main .main-contain .material {
    position: relative;
    width: 384px;
    background-color: gray;
    height: 683px;
    color: #fff;
    z-index: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-right: 38px
}
.index > .main .main-contain .material:last-child {
    margin-right: 0
}
.index > .main .main-contain .material > img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2
}
.index > .main .main-contain .material .detail {
    opacity: 0;
    position: relative;
    z-index: 3;
    padding: 0 16px;
    font-size: 14px;
    transition: all 1s
}
.index > .main .main-contain .material .attr {
    transition: all 1s;
    position: relative;
    top: 143px;
    z-index: 3;
    writing-mode: vertical-lr;
    font-size: 20px;
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px
}
.index > .main .main-contain .material .attr:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: #26110c;
    opacity: .4
}
.index > .main .main-contain .material:hover .detail {
    opacity: 1
}
.index > .main .main-contain .material:hover .attr {
    border: 1px solid #ffcd00
}
.index > .main .main-contain .material:hover .attr:after {
    opacity: .88
}
.index > .main .main-contain .material:hover:after {
    opacity: .8
}
.index > .main .main-contain .material:after {
    transition: all 1s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: #000;
    opacity: 0
}
.index > .main > .classification {
    width: 100%;
    min-height: 300px;
    display: flex
}
.index > .main > .classification .classification-item {
    flex: 1;
    position: relative;
    transition: flex 1s;
    overflow: hidden;
    display: flex
}
.index > .main > .classification .classification-item img {
    transition: all 1s
}
.index > .main > .classification .classification-item .img2 {
    position: relative;
    top: 0;
    left: -70%;
    z-index: 1
}
.index > .main > .classification .classification-item .img1 {
    position: absolute;
    top: 0;
    left: -70%;
    z-index: 0
}
.index > .main > .classification .classification-item .button {
    display: none
}
.index > .main > .classification .classification-item .class-content {
    position: absolute;
    height: 100%;
    top: 5%;
    left: 20px;
    z-index: 10;
    display: flex;
    transition: all 1s
}
.index > .main > .classification .classification-item .class-content .classification-pro {
    display: none;
    text-align: start;
    color: #5b524d;
    font-size: 18px;
    border-left: 1px solid #918a84;
    height: 90%
}
.index > .main > .classification .classification-item .class-content .classification-pro div {
    writing-mode: vertical-rl;
    padding: 0 10px;
    border-right: 1px solid #918a84
}
.index > .main > .classification .classification-item .class-content .title-button {
    display: flex;
    flex-direction: column;
    padding-left: 20px
}
.index > .main > .classification .classification-item .class-content .title-button .classification-title {
    position: absolute;
    writing-mode: vertical-lr;
    padding: 0 0 200px;
    color: #fff;
    font-size: 24px
}
.index > .main > .classification .classification-item.series {
    flex: 2.5
}
.index > .main > .classification .classification-item.series img {
    left: 0
}
.index > .main > .classification .classification-item.series .img2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0
}
.index > .main > .classification .classification-item.series .img1 {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1
}
.index > .main > .classification .classification-item.series .button {
    position: absolute;
    transform: rotate(180deg);
    right: 30px;
    top: 45%;
    z-index: 5;
    cursor: pointer;
    overflow: hidden;
    padding: 10px 10px;
    display: flex;
    border: none;
    background-color: #eb0029;
    border-radius: 50%
}
.index > .main > .classification .classification-item.series .button img {
    position: relative;
    top: 0;
    left: 0;
    height: 20px
}
.index > .main > .classification .classification-item.series .class-content {
    left: 70px
}
.index > .main > .classification .classification-item.series .class-content .classification-pro {
    display: flex
}
.index > .main > .classification .classification-item.series .class-content .title-button .classification-title {
    left: 120px;
    color: #5b524d
}
.index > .main > .classification .classification-item.series .class-content .title-button button {
    display: none
}
.index > .main > .classification .classification-item.series:after {
    opacity: 0
}
.index > .main > .classification .classification-item:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: #000;
    opacity: .3
}
.index .process {
    padding: 88px 0;
    width: 100%
}
.index .process .process-main {
    position: relative;
    height: 400px;
    display: flex;
    justify-content: center;
    background-image: url(../ysimg/sybg2.jpg);
    background-size: 100% 100%
}
.index .process .process-main .process-container {
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    display: flex
}
.index .process .process-main .process-container .process-item {
    width: 306px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: all 1s
}
.index .process .process-main .process-container .process-item button {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    top: 76px;
    display: flex;
    color: #fff;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: none;
    font-size: 30px;
    align-items: center;
    justify-content: center;
    font-family: jiangxizhuokai
}
.index .process .process-main .process-container .process-item button img {
    width: 100%;
    height: 100%
}
.index .process .process-main .process-container .process-item .process-pro {
    position: absolute;
    z-index: 2;
    top: 187px;
    width: 200px;
    font-size: 14px;
    color: #fff
}
.index .process .process-main .process-container .process-item:hover .poster {
    transform: rotateY(180deg);
    z-index: 1
}
@keyframes trans {
    0% {
        transform: rotateY(180deg)
    }
    to {
        transform: rotateY(0deg)
    }
}
.index .process .process-main .process-container .process-item:hover:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .6
}
.index .news {
    margin: 0 auto;
    text-align: left;
    padding: 0 0 112px
}
.index .news .news-title {
    border-left: 4px solid #e6000c;
    padding-left: 10px;
    font-size: 20px;
    color: #000
}
.index .news .news-container {
    display: flex;
    align-items: center;
    padding: 36px 0 0
}
.index .news .news-container .news-poster {
    width: 580px
}
.index .news .news-container .news-poster img {
    width: 100%
}
.index .news .news-container .news-content {
    padding-left: 32px
}
.index .news .news-container .news-content .news-item {
    display: flex;
    align-items: center;
    padding: 0 0 36px;
    color: #000
}
.index .news .news-container .news-content .news-item:last-child {
    padding: 0
}
.index .news .news-container .news-content .news-item .news-data {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 16px;
    border-right: 1px solid #d4d0cf
}
.index .news .news-container .news-content .news-item .news-data .news-day {
    font-size: 18px
}
.index .news .news-container .news-content .news-item .news-data .news-year {
    font-size: 16px;
    color: #52403e
}
.index .news .news-container .news-content .news-item .news-con {
    cursor: pointer;
    padding: 16px 0 16px 16px
}
.index .news .news-container .news-content .news-item .news-con .news-con-detail {
    width: 444px;
    color: #52403e;
    padding: 6px 0 0;
    font-size: 14px
}