.spirit {
    max-width: 1400px;
    margin: 50px auto;
    width: 60%;
    min-width: 608px;
    min-height: 321px;
}

/* .spirit .top{
    display: none;
} */
.top {
    display: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    background-color: transparent;
}
.top_right a:hover{
    color:red;
    font-size: 30px;
}
.logo {
    width: 40%;
}

.logo img {
    width: 100%;
}

.more {
    font-size: 1.125rem
        /* 18/16 */
    ;
    position: absolute;
    margin-left: 29%;
    margin-bottom: 3%;
    color: #c0c0c0;
}

.more:hover {
    color: red;
}

.content {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 30px;
}

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

.content_start {
    float: left;
    position: relative;
    overflow: hidden;
    width: 40%;
    height: 50vh;
    max-width: calc(1400px*0.4);
    max-height: 278px;
    display: flex;
    align-items: center;
}

.content_start ul {
    width: 400%;
    height: 100%;
}

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

.content_start ul li {
    width: 25%;
    height: 100%;
    float: left;
    transition: all 1s;
}
.content_start ul li a{
    width: 100%;
    height: 100%;
}
.content_start ul li img {
    width: 100%;
    height: 100%;
}

.c_pic {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.c_pic ul {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.5s ease;
    margin: 0;
    padding: 0;
}

.c_pic ul li {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.c_pic ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content_end {
    float: right;
    /* background-color: yellow; */
    /* display: none; */
    /* width:24.75rem 380/16; */
    width: 50%;
    max-height: 300px;
}

.content_end ul li {
    width: 100%;
    min-height: 25px;
    max-height: 55px;
    /* background-color: green; */
    margin-top: 3px;
    border-bottom: 2px solid #dcdcdc;
}

.content_end ul li a::before {
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: red;
    border-radius: 50%;
    margin: 0px 5px
}

.content_end ul li a {
    width: 100%;
    display: inline-block;
    min-height: 25px;
    max-height: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content_end ul li a:hover {
    color: red;
}

.front, .next {
    display: none;
}

.phone1 {
    width: 100%;
    height: 100%;
}

.e_top {
    font-size: 1.3rem
        /* 13/16 */
    ;
    font-weight: 700;
    /* line-height: 2.5rem 40/16;   */
    border-bottom: 2px solid #e7e7e7;
    margin-bottom: .625rem
        /* 10/16 */
    ;
    box-sizing: border-box;
}

.e_top span:hover {
    color: #a82b2a;
}

.cl {
    width: 100%;
    height: 0.625rem
        /* 10/16 */
    ;
}

@keyframes touch {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.e_top:hover::after {
    content: "";
    display: block;
    height: 2px;
    background-color: #bb1312;
    animation: touch 1.2s;
}

.e_top:hover {
    border-bottom: none;
}

.e_bottom li {
    width: 100%;
    height: 2.5rem
        /* 40/16 */
    ;
}

.e_paper li a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: black;
    float: left;
    margin-top: .5125rem
        /* 5/16 */
    ;
}

.e_paper li a {
    display: inline-block;
    width: 100%;
}

.s_text {
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 85%;
    font-size: .875rem
        /* 14/16 */
    ;
    margin-left: .3125rem
        /* 5/16 */
    ;
}

.s_text:hover {
    color: #bb1b1a;
}

.e_paper li a:hover::before {
    background-color: #b61d1c;
}

.e_paper li a:hover {
    color: #b61d1c;
}

.s_time {
    float: right;
    font-size: .875rem
        /* 14/16 */
    ;
}

.dynamic {
    min-width: 608px;
    min-height: 321px;
}

.dynamic .top {
    display: none;
}

.dy_content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* min-height: 10.9375rem 175/16 */
    ;
}

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

.dy_start {
    float: left;
    display: flex;
    display: none;
    justify-content: space-around;
    width: 60%;
    min-height: 10.625rem
        /* 170/16 */
    ;
}

.img_1 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 46%;
    min-height: 10.625rem;
    overflow: hidden;
}

#pic1 {
    background: no-repeat;
    background-image: url(../image/12.jpg);
    background-size: 100% 100%;
    background-position: center center;
    transition: all 1s linear;
}

#pic1:hover {
    background-size: 110% 110%;
    background-position: center center;
    transition: all 1s;
}

#pic2 {
    background: no-repeat;
    background-image: url(../image/22.jpg);
    background-size: 100% 100%;
    background-position: center center;
    transition: all 1s linear;
}

#pic2:hover {
    background-size: 110% 110%;
    background-position: center center;
    transition: all 1s;
}

.img_img {
    width: 100%;
    height: 80%;
}

.img_1 a:hover {
    color: red;
}

.dy_end {
    display: none;
    float: right;
    width: 38%;
    min-height: 11.25rem
        /* 180/16 */
    ;
}

.dy_text {
    width: 100%;
    height: 45%;
    min-height: 5.3125rem
        /* 85/16 */
    ;
    border-bottom: 2px solid #e7e7e7;
    margin-bottom: 10px;
}

.dy_text:hover {
    border-bottom: none;
}

.dy_text:hover h5 {
    color: red;
}

.dy_text:hover::after {
    content: "";
    display: block;
    height: 2px;
    background-color: #bb1312;
    animation: touch 1.2s;
}

.t_time {
    color: red;
    font-size: 9px;
    line-height: 18px;
    margin-bottom: 5px;
}

.dy_text span {
    color: #777777;
    font-size: 12px;
}

.dy_text:hover .t_time span {
    color: #d41c1b;
}

.t_index {
    display: inline-block;
    width: 11%;
    min-width: 1.875rem
        /* 30/16 */
    ;
    min-height: 1.25rem
        /* 20/16 */
    ;
    background-color: #d00100;
    text-align: center;
    color: white;
    font-size: 9px;
}

.img_1 img {
    width: 100%;
    height: 80%;
}

.dy_picture {
    width: 100%;
    background-color: aqua;
    overflow: hidden;
}

.dy_picture img {
    width: 100%;
    height: 100%;
}

.pic_title {
    width: 100%;
    height: 20%;
    min-height: 2.1875rem
        /* 35/16 */
    ;
    background-color: white;
    font-size: .75rem
        /* 12/16 */
    ;
    line-height: 15px;
}

.pic_title2 {
    display: none;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 4px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.3);
}

.pic_title2 a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: white;
    text-indent: 2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pointers {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

.pointers ul li {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pointers ul li.active {
    background: #fff;
}

.theory {
    position: relative;
    width: 85%;
    margin: 50px auto;
    /* min-height:19.375rem 310/16; */
    overflow: hidden;
    max-width: 1800px;
    min-width: 861px;
    min-height: 385px;
}

.theory .top {
    display: flex;
}

.theory .logo {
    width: 30%;
}

.theory .more {
    margin-left: 21.5%;
    margin-bottom: 2%;
}

.point {
    display: block;
    margin: 0 auto;
    width: 50px;
    min-height: 20px;
}

.point ul li {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 10px;
    background-color: #c5c3c4;
    box-sizing: border-box;
}

.theory ul {
    /* display: none; */
    /* position: absolute; */
    width: 300%;
    height: 100%;
    height: 19.375rem
        /* 310/16 */
    ;
}

.theory2 {
    position: relative;
    width: 85%;
    margin: 50px auto;
    /* min-height:19.375rem 310/16; */
    overflow: hidden;
    max-width: 1800px;
    min-width: 861px;
    min-height: 385px;
}

.theory2 .top {
    display: flex;
}

.theory2 .logo {
    width: 30%;
}

.theory2 .more {
    margin-left: 21.5%;
    margin-bottom: 2%;
}

.theory2 ul {
    /* display: none; */
    /* position: absolute; */
    width: 300%;
    height: 100%;
    height: 19.375rem
        /* 310/16 */
    ;
}

.point ul {
    width: 100%;
    height: 10px;
}

.point ul::after {
    content: '';
    display: block;
    clear: both;
}

.point ul li:nth-child(1) {
    border: 1px solid rgb(196, 37, 46);
}

.th_father {
    display: flex;
    float: left;
    flex-wrap: wrap;
    width: 33.3%;
    min-height: 19.375rem
        /* 310/16 */
    ;
    justify-content: space-around;
    overflow: hidden;
    transition: all 1s;
}

.th_father2 {
    display: flex;
    float: left;
    flex-wrap: wrap;
    width: 33.3%;
    min-height: 19.375rem
        /* 310/16 */
    ;
    justify-content: space-around;
    overflow: hidden;
    transition: all 1s;
}

/* .granfather:hover li:nth-child(2) {
    transform: translateX(-100%);
}

.granfather:hover li:nth-child(1) {
    transform: translateX(-100%);
} */

.grandfather {
    display: none;
}

.th_father>div {
    width: 30%;
    min-height: 90px;
    height: 100%;
    border: 1px solid #e7e7e7;
    margin-top: 30px;
}

.th_father2>div {
    width: 30%;
    min-height: 90px;
    height: 100%;
    border: 1px solid #e7e7e7;
    margin-top: 30px;
}

.th_content {
    width: 100%;
    min-height: 50px;
    margin-top: 20px;
}

.th_time {
    float: left;
    width: 20%;
    height: 100%;
    min-height: 50px;
    border-right: 2px solid #e7e7e7;
    text-align: center;
    line-height: 20px;
}

.th_time p:nth-child(1) {
    font-size: 12px;
    color: #dc5958;
}

.th_time p:nth-child(2) {
    font-size: 18px;
    color: red;
}

.th_text {
    float: right;
    width: 72%;
    height: 100%;
    min-height: 50px;
    margin-right: 15px;
}

.th_direc {
    width: 25px;
    height: 6px;
    background-color: red;
    margin-left: 7%;
    margin-top: 20px;
}

.th:hover {
    background-color: red;
    border-radius: 0px 0px 20px 0px;
}

.th:hover .th_direc {
    background-color: #f2dd47;
}

.th:hover .th_time p {
    color: white;
}

.recommend {
    width: 76%;
    min-height: 100px;
    min-width: 560px;
    max-width: 1400px;
    margin: 50px auto;
}

.recommend .top {
    display: none;
}

.recommend .logo {
    width: 32%;
}

.recommend .more {
    margin-left: 23%;
    margin-bottom: 2.5%;
}

.re_content {
    display: flex;
    display: none;
    align-items: center;
    justify-content: space-around;
}

.re_pic {
    width: calc(100%/7);
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    transition: all 1s;
    background-color: red;
}

.re_pic a {
    display: block;
    min-height: 200px;
    width: 100%;
    height: 100%;
}

.re_pic:nth-child(1) {
    background: no-repeat;
    background-image: url(../image/gongchan.png);
    background-size: 100%;
    background-position: center center;
}

.re_pic:nth-child(2) {
    background: no-repeat;
    background-image: url(../image/renmin.png);
    background-size: 100%;
    background-position: center center;
}

.re_pic:nth-child(3) {
    background: no-repeat;
    background-image: url(../image/xinghua.jpg);
    background-size: 100%;
    background-position: center center;
}

.re_pic:nth-child(4) {
    background: no-repeat;
    background-image: url(../image/qiushi.png);
    background-size: 100%;
    background-position: center center;
}

.re_pic:nth-child(5) {
    background: no-repeat;
    background-image: url(../image/guangming.png);
    background-size: 100%;
    background-position: center center;
}

.re_pic:nth-child(6) {
    background: no-repeat;
    background-image: url(../image/nanfang.png);
    background-size: 100%;
    background-position: center center;
}

.re_pic:hover {
    background-size: 120%;
}

@media screen and (max-width:1025px) {
    .theory .logo {
        width: 29%;
    }

    .recommend .logo {
        width: 32%;
    }

    .theory .more {
        margin-left: 22%;
        margin-bottom: 2.3%;
    }

    .recommend .more {
        margin-left: 24%;
        margin-bottom: 2.5%;
    }

    .more {
        margin-left: 30%;
        margin-bottom: 3.5%;
    }

    .th_direc {
        margin-left: 5%;
    }
}

@media screen and (min-width:1400px) {
    .content_end ul li {
        height: 35px;
    }

    .content_end ul li a {
        line-height: 35px;
    }
}

@media screen and (max-width:1400px) {
    .content_start {
        height: 37vh;
    }
}

@media screen and (max-width:1200px) {
    .content_start {
        height: 42vh;
    }
}

@media screen and (max-width:1000px) {
    .content_start {
        height: 50vh;
        max-height: 238px;
    }
}

@media screen and (max-width:800px) {
    .content_start {
        max-height: 238px;
    }
}

.theory .granfather, .theory2 .granfather {
    transition: transform 0.5s ease;
}

.theory .point ul li, .theory2 .point ul li {
    transition: background-color 0.3s ease;
}

.theory .point ul li.active, .theory2 .point ul li.active {
    background: #000;
}