@charset "utf-8";

@keyframes bb {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, 3px);
        opacity: 1;
    }

    80% {
        transform: translate(-50%, 10px);
        opacity: 1;
    }

    90% {
        transform: translate(-50%, 10px);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, 10px);
        opacity: 0;
    }
}


/* banner */
.banner {
    width: 100%;
    z-index: 1;
    position: relative;
}

.down {
    content: '';
    display: block;
    width: 44px;
    height: 26px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: 0px;
    background: url(../images/down.png) no-repeat;
    z-index: 20;
    animation: bb 2s linear 0s infinite;
}

.swiper-slide::before {
    content: '';
    display: block;
    width: 100%;
    height: 149px;
    background: url(../images/banner_before.png) repeat-x;
    position: absolute;
    top: 0px;
    z-index: 4;
}

.swiper-slide::after {
    content: '';
    display: block;
    width: 100%;
    height: 79px;
    background: url(../images/banner_after.png) repeat-x;
    position: absolute;
    bottom: -3px;
    z-index: 4;
}

.swiper-slide {
    width: 100%;
    position: relative;
}

.swiper-slide a {
    display: block;
    width: 100%;
}

/* .swiper-slide a img{ width: auto; height: 100vh;} */

.swiper-slide .gp-img-responsive {
    /* padding-bottom: 40.1%; */
    padding-bottom: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    background-position: center center;
    /* background-size: 100% 100%; */
}


.swiper-slide .title {
    position: absolute;
    width: 60%;
    left: 50%;
    bottom: 60px;
    margin-left: -680px;
    color: #fff;
    line-height: 36px;
    z-index: 10;
    transition: all 0.6s ease;
}

.swiper-pageBox {
    position: absolute;
    /* min-width: 310px; */
    height: 33px;
    top: auto;
    bottom: 48px;
    /* left: 50%; */
    right: 8.334vw;
    /* margin-left: 360px; */
    text-align: right;
    /* background: url(../images/banner_prev.png) no-repeat; */
    display: block;
    z-index: 9999;
}
.swiper-pageBox > div{
    display: inline-block;
    position: static;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: '';
}

.swiper-button-prev,
.swiper-button-next {
    width: 35px;
    height: 33px;
    /* top: 100%; */
    background: url(../images/banner_next.png) no-repeat;
    background-position: center 90%;
    top: 10%;
}

.swiper-button-prev {
    background: url(../images/banner_prev.png) no-repeat;
    background-position: center 90%;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    transform: scale(1.1);
}

.swiper-pagination.swiper-pagination-bullets {
    /* width: 150px; */
    color: #fff;
    background: none;
    text-align: justify;
    left: 25%;
    /* display: flex; */
    /* display: flex; */
    justify-content: space-between;
}

.swiper-pagination.swiper-pagination-bullets>span:last-child {
    margin-right: 0;
}
.swiper-pagination-bullet {
    height: 33px;
    background: none;
    /* margin-right: 60px; */
    position: relative;
    vertical-align: middle;
    line-height: 33px;
    font-size: 1.8rem;
    opacity: .8;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet{
    padding: 0 15px;
    margin-right: 45px;
}
.aLine{
    margin: 0 15px;
}

.swiper-pagination-bullet:last-child::after {
    content: '';
    width: 0px;
    height: 0px;
}

.swiper-pagination-bullet::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #fff;
    top: 30%;
    right: -30px;
    vertical-align: middle;
    margin-top: 7px;
}

.swiper-pagination-bullet-active {
    font-size: 3rem;
    line-height: 36px;
}

.aLine {
    display: inline-block;
    width: 15px;
    height: 1px;
    background-color: #fff;
    vertical-align: middle;
    /* margin-top: 8.5%; */
    margin-top: 0;
}

.indexContent{ position:fixed;left:0%;top:100%;bottom:0;right:0;background:#fff;overflow:hidden;transition:top 0.7s cubic-bezier(0.5,0,0.2,1) 0s;z-index:1;overflow:auto;outline:none;}
.indexContent.visibal{ top: 0;}

/* mode01 */
.mode01 {
    width: 100%;
    background: url(../images/mode01_left_bg.png) no-repeat;
    background-position: center left;
    overflow: hidden;
}
.mode01 .content .info{ padding-left: 0px;}

.modeTitle {
    padding-top: 80px;
    position: relative;
    padding-bottom: 10px;
}

.modeTitle::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: #8b1c2a;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -20px;
}

.modeTitle span {
    display: block;
    line-height: 36px;
    text-align: center;
    height: 33.8px;
}

.modeTitle .en {
    color: #999;
    height: 33.8px;
    text-transform: uppercase;
    line-height: 36px;
}

.modeTitle .zh {
    margin-top: 14px;
    margin-bottom: 7px;
    color: #000;
    line-height: 36px;
}

.content {
    padding-top: 64px;
}

.leftBox {
    width: 58.3%;
    float: left;
}

.rightBox {
    width: 41.7%;
    float: right;
}

.content li {
    overflow: hidden;
}

.content .img {
    width: 37.55%;
    float: left;
    padding-bottom: 21.14%;
}

.content .info {
    width: 59%;
    float: right;
    padding-left: 30px;
}

.info .artTitle {
    margin: 20px 0px;
    font-weight: bold;
    line-height: 25px;
    height: 49px;
}

.info .summary {
    margin-bottom: 32px;
    line-height: 26px;
    min-height: 52px;
}

.info .date {
    padding-left: 23px;
    position: relative;
}

.info .date::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 14px;
    background: url(../images/date-icon.png);
    position: absolute;
    left: 0px;
    top: 2px;
}

.mode01 .content li {
    margin-bottom: 50px;
}

.redBox {
    margin-left: 60px;
    width: calc(100% + 4.791vw);
    background: url(../images/mode01_right_bg.png) no-repeat;
    background-size: cover;
    padding: 10px 0px 40px 30px;
    box-sizing: border-box;
    overflow: hidden;
}

.redBox li {
    padding-top: 40px;
}

.redBox .date {
    width: 60px;
    height: 55px;
    float: left;
    color: #fff;
    transition: all .3s ease;
}
.mode01 .content .rightBox li:hover .date{ transform: scale(1.05);}

.redBox .date span {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.redBox .date .day {
    height: 24px;
    line-height: 30px;
    padding-bottom: 20px;
}

.redBox .date .nianYue {
    height: 16px;
    line-height: 16px;
}

.listTitle {
    width: calc(100% - 60px - 4.92vw);
    margin-left: 90px;
    color: #fff;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 30px;
    /* border-bottom: 1px solid #fff; */
    position: relative;
    transition: all .4s ease;
    min-height: 60px;
}
.mode01 .content .rightBox li:hover .listTitle{
    transform: scale(1.01);
    text-indent: .3em;
}
.redBox li{ position: relative;}
.redBox li::after{
    content: '';
    display: block;
    width: calc(100% - 60px - 4.92vw);
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0px;
    left: 90px;
    z-index: 99;
}

.mode01 .content .rightBox li {
    width: calc(100% - 4.791vw);
    margin-bottom: 0px;
    overflow: hidden;
}

.button {
    margin-bottom: 80px;
}

.button a {
    display: block;
    width: 109px;
    height: 45px;
    margin: 0 auto;
    background-color: #8b1c2a;
    color: #fff;
    text-align: center;
    line-height: 45px;
    transition: all .2s ease;
}
.button a:hover{
    background-color: #fff;
    font-weight: bold;
    color: #94070a;
    text-shadow: .8px .8px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);/*firefox*/
    -webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);/*webkit*/
}

/* mode02 */
.mode02 {
    width: 100%;
    background: url(../images/mode02_bg.png) no-repeat;
    background-position: center top;
    background-size: 100% auto;
    overflow: hidden;
    padding-bottom: 80px;
}

.mode02 .en,
.mode02 .zh {
    color: #fff;
}

.mode02 .content {
    margin-top: 50px;
    /* padding-top: 80px; */
    padding-top: 30px;
    border-top: 5px solid #8b1c2a;
    background-color: #fff;
    opacity: .95;
}

.leftTitle {
    width: 75px;
    float: left;
}

.row .leftTitle{
    padding-top: 50px;
}

.leftTitle a {
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    padding: 36px 0px 36px 50px;
    text-align: center;
    position: relative;
    margin-top: 5px;
    color: #94070a;
}

.leftTitle a::before,
.leftTitle a::after {
    content: '';
    display: block;
    width: 15px;
    height: 21px;
    background: url(../images/mode02_title_icon.png) no-repeat;
    position: absolute;
    top: 5px;
    right: 9px;
}

.leftTitle a::after {
    top: auto;
    left: 2px;
    bottom: 5px;
}

.row ul {
    width: calc(100% - 75px);
    float: right;
    padding-bottom: 54px;
    border-bottom: 1px solid #d2d2d2;
    margin-top: 50px;
}

.row ul li {
    width: 50%;
    border-right: 1px solid #dcdcdc;
    float: left;
    padding-left: 50px;
    box-sizing: border-box;
}

.row ul li:last-child {
    border-right: none;
}

.row .article {
    margin-right: 50px;
    font-weight: bold;
    margin-bottom: 19px;
}

.mode02 .content .info {
    width: 100%;
}

/* .mode02 .info span{ */
.info span {
    display: block;
    margin-bottom: 22px;
    padding-left: 35px;
    position: relative;
    max-height: 17.8px;
}

.mode02 .info span::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0px;
    top: -2px;
}

.mode02 .info .people::before {
    background: url(../images/mode02_people_icon.png) no-repeat;
}

.mode02 .info .time::before {
    background: url(../images/mode02_time_icon.png) no-repeat;
}

.mode02 .info .addr::before {
    background: url(../images/mode02_addr_icon.png) no-repeat;
}

.row1 {
    padding-top: 50px;
    /* margin-bottom: 80px; */
}

.picTitle {
    display: block;
    /* width: calc(100% - 75px); */
    width: 100%;
    float: right;
}

.picTitle .leftBox {
    padding-left: 50px;
    box-sizing: border-box;
}

.row1 .leftBox {
    /* width: 64.125%; */
    width: 67.27%;
}

.row1 .leftBox::after {
    content: '';
    display: block;
    clear: both;
}

.row1 .rightBox {
    /* width: calc(100% - 64.125%); */
    width: 20%;
    padding-bottom: 11.2%;
    margin-right: 80px;
}

.row1 ul {
    border-bottom: none;
}

.row1 .article {
    margin-top: 20px;
    height: 20px;
    line-height: 20px;
}

.row1 .summary {
    margin-bottom: 30px;
    height: 41.4px;
}

.row1 .info span {
    display: inline-block;
}

.row1 .info .time {
    margin-right: 50px;
}

.row1 ul li:nth-of-type(odd) {
    width: 50%;
    box-sizing: border-box;
    padding-right: 50px;
}

.row1 ul li:nth-of-type(even) {
    width: 50%;
    box-sizing: border-box;
    padding-right: 50px;
}

.row1 .leftTitle {
    padding-top: 110px;
}

.row1 .button {
    margin-top: 26px;
}

.row1 .button a {
    width: 327px;
    height: 58px;
    line-height: 58px;
    position: relative;
    padding-left: 45px;
    box-sizing: border-box;
}
.row1 .button a:hover::before{
    background: url(../images/calendar_red.png) no-repeat;
}

.row1 .button a::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background: url(../images/calendar.png) no-repeat;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -75px;
}

.conBox {
    overflow: hidden;
}
.row1 .conBox ul{ width: 100%;}



/* mode03 */
.mode03 {
    margin: 0 auto;
    /* width: 1920px; */
    width: 100%;
    /* margin-top: 80px; */
    background: url(../images/mode03_bg.png) no-repeat;
    background-position: left top;
    background-size: 72.55% 100%;
}

.modeContainer {
    position: relative;
}

.mode03 .modeTitle {
    padding-top: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.mode03 .modeTitle::after {
    left: auto;
    bottom: auto;
    top: 98px;
    right: 0px;
}

.mode03 .modeTitle span {
    text-align: right;
}

.mode03 .modeTitle .img {
    margin-top: 28px;
    padding-bottom: 57.33%;
}

.mode03 ul {
    padding-top: 75px;
    width: 65.625%;
    margin-left: -25px;
}

.mode03 ul li {
    width: 33.3%;
    float: left;
    padding: 0 25px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.mode03 ul li a {
    /* margin: 0 25px; */
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #d59797;
}

@media screen and (min-width:996px) {
    .mode03 ul li:nth-of-type(4) a,
    .mode03 ul li:nth-of-type(5) a,
    .mode03 ul li:nth-of-type(6) a{
        border: none;
    }
}

.mode03 .title {
    color: #fff;
    line-height: 28px;
    margin-bottom: 10px;
    word-wrap: break-word;
    min-height: 56px;
}

.mode03 .date {
    color: #fff;
    line-height: 14px;
    padding-left: 24px;
    position: relative;
    margin-bottom: 31px;
}

.mode03 .date::before {
    content: '';
    display: block;
    width: 12px;
    height: 14px;
    background: url(../images/date-icon2.png) no-repeat;
    position: absolute;
    top: -1px;
    left: 0px;
}

.mode03 .modeContainer {
    padding-bottom: 50px;
}

.mode03 .button {
    margin-bottom: 0px;
}

.mode03 .button a {
    margin: 0px 0px 0px 470px;
    background-color: #fff;
    color: #8b1c2a;
}

/* mode04 */
.mode04 {
    overflow: hidden;
}

.mode04 ul {
    width: calc(100% + 50px);
    margin-left: -25px;
    overflow: hidden;
}

.mode04 li {
    width: 25%;
    float: left;
    margin-top: 50px;
}

.mode04 li a {
    display: block;
    padding: 0 25px;
}

.mode04 li a:after {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background-color: #94070a;
}

.mode04 .img {
    padding-bottom: 56.7%;
}

.mode04 li .title {
    font-weight: bold;
    line-height: 30px;
    margin: 14px 0px 4px 0px;
}

.mode04 li .summary {
    line-height: 26px;
    margin-bottom: 15px;
}

.mode04 .button {
    margin-top: 50px;
}

li img {
    width: 100%;
}


/* 自适应 */

@media screen and (max-width:1600px) {
}

@media screen and (max-width:1400px) {
    .info .artTitle{ margin: 10px 0;}
    .info .summary{ margin-bottom: 15px;}.swiper-slide .title{ margin-left: -600px;}
    .swiper-pageBox{ margin-left: 280px;}
    .redBox li{ padding-top: 25px;}
    .listTitle{ margin-bottom: 20px;}
    .mode03 .modeTitle{ width: 35%;}
}

@media screen and (max-width:1240px) {
    .swiper-slide .title{ margin-left: -550px;}
    .swiper-pageBox{ margin-left: 250px;}
    .row1 .summary{ height: auto;}
    .mode02 .content{ padding-top: 25px;}
    .row ul{ margin-top: 30px; padding-bottom: 30px;}
    .modeTitle{ padding-top: 50px;}
    .button{ margin-bottom: 50px;}
    .mode03 ul li a{ margin: 0 10px;}
}
@media screen and (max-width:1100px) {
    .swiper-slide .title{ margin-left: -500px;}
    .swiper-pageBox{ margin-left: 200px;}
    .row1 .summary,.info span{ margin-bottom: 15px;}
    .mode03{ margin-top: 50px;}
    .ftTop .left{ padding-left: 7px; }
    .ftTop .center{ width: 36%;}
    .ftTop .right{ padding-left: 7px;}
}

@media screen and (max-width:996px) {
    .swiper-slide .gp-img-responsive {
        padding-bottom: 40.1%;
        height: 100%;
        background-position: center center;
    }
    .indexContent{ position: relative;}
    .swiper-pageBox{ display: none;}
    .swiper-slide .title{ margin-left: -350px;}
    .content,.modeTitle{ padding-top: 40px;}
    .leftBox,.rightBox{ float: none; width: 100%;}
    .redBox{ margin-left: 0px;}
    .row1 .leftBox{ float: left;}
    .row1 .rightBox{ float: right;}
    .button{ margin-top: 20px; margin-bottom: 30px;}
    .redBox .date{ height: 60px;}
    .row1 ul li:nth-of-type(odd),.row1 ul li:nth-of-type(even){ width: 100%;}
    .mode03 .modeTitle .img{ display: none;}
    .mode03 .modeTitle{ position: relative; margin: 0 auto;}
    .mode03 .modeTitle span{ text-align: center; color: #fff;}
    .mode03 .modeTitle::after{ right: 50%; margin-right: -20px;}
    .mode03{ background-size: cover; padding-top: 30px;}
    .mode03 ul,.redBox{ width: 100%; margin: 0 auto;}
    .mode03 .button a{ margin: 0 auto;}
    .mode03 ul li,.mode04 li{ width: 50%;}
    .mode03 ul li a{ width: 95%;}
    .gp-container{ width: 100%;margin-left: 0px;}
    .swiper-slide .title,.mode03 .modeTitle{ width: 90%;}
    .ftTop .center{ width: 80%;}
}

@media screen and (max-width:710px) {
    .swiper-slide .title{ margin-left: -250px;}
}

@media screen and (max-width:768px) {
    .row ul li{ width: 100%; margin-bottom: 20px;}
    .row1 .leftBox,.row1 .rightBox{ float: none; width: 85%; padding-left: 0px; margin-left: 50px; }
    .row1 .rightBox{ padding-bottom: 48%;}
}

@media screen and (max-width:540px) {
    .swiper-slide .title,.down,.swiper-slide::before,.swiper-slide::after{ display: none;}
    .swiper-pageBox{ display: block; margin-left: -50px; bottom: 20px; /* max-width: 260px; */}
    .swiper-pagination-bullet{ padding: 0 10px;}
    .aLine{ margin: 0 10px;}
    .leftTitle{ float: none; width: 100%; text-align: center;}
    .row .leftTitle{ padding-top: 30px;}
    .leftTitle a{
        padding: 0;
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
    }
    .leftTitle a::before, .leftTitle a::after{ right: -20px;}
    .leftTitle a::after{ left: -20px;}
    .row ul{ margin-left: 0px; padding-left: 0px; width: 100%;}
    .row1{ padding-top: 0px;}
    .row ul li{ padding-left: 20px;}
    .row1 .leftBox, .row1 .rightBox{ margin-left: 20px;}
    .mode03 .modeTitle,.mode03 ul li{ width: 100%;}
}

@media screen and (max-width:480px) {
    .info .artTitle{ margin: 0;}
    .info .summary{ margin: 0;}
    .mode03 ul li, .mode04 li{ width: 100%;}
    .mode03 ul, .redBox{ padding-top: 30px;}
    .swiper-pageBox{ margin-left: -100px;}
    .swiper-pagination-bullet-active{ font-size: 2.4rem;}
}

@media screen and (max-width:414px) {
    .content .img,.content .info{ float: none; width: 100%;}
    .content .img{ padding-bottom: 56.5%;}
    .content .info{ padding-left: 0;}
    .modeTitle .zh{ margin-top: 5px; margin-bottom: 0px;}
    .mode03 ul, .redBox{ padding: 0;}
    .listTitle{ margin-left: 10px;}
    .swiper-pagination-bullet{ padding: 0 5px;}
    .aLine{ margin: 0 5px;}
    .swiper-button-prev, .swiper-button-next{ background-position: center 85%;}
}

@media screen and (max-width:320px) {
    .row1 .summary, .info span{ margin-bottom: 24px;}
    .row1 .button a{ width: 60%;}
}