@font-face{
    font-family: 'shan';
    src:url('SourceHanSansCN-Medium.otf');
}

@font-face{
    font-family: 'bod';
    src:url('BodoniBT-Bold.otf');
}

@font-face{
    font-family: 'ado';
    src:url('AdobeKaitiStd-Regular.otf');
}


.topcolor{background: #f7f7f7; overflow: hidden; margin-top: 110px;}

.jiud_menu{width: 100%; height: 76px; position: relative; margin-top: 90px; margin-bottom: 40px;}
.jiud_back{display: block; width: 380px; height: 76px; background-image: linear-gradient(to right, #f28d28 , #fd644f); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 25px;}
.jiud_back span{display: block; width: 53px; height: 30px; background: url(../images/jiud_back.png) no-repeat center; background-size: cover; margin-right: 16px; transition: all 0.5s;}
.jiud_back:hover span{margin-right: 30px;}
.jiud_back p{font-family: "shan"; font-size: 26px; color: #fff; line-height: 76px;}
.jiud_menu .flex{height: 76px; justify-content: flex-end; align-items: center;}
.jiud_tabs a{display: inline-block; padding: 6px 20px; background: #e7e7e7; font-family: "shan"; font-size: 18px; color: #666; line-height: 1; margin: 4px;}
.jiud_tabs a.active, .jiud_tabs a:hover{background-image: linear-gradient(to right, #fc686f , #ff924d); color: #fff;}

.jiud_ban{position: relative; display: none;}
.jiud_ban:first-child{display: block;}
.jdtext{width: calc(100% - 80px); padding: 30px 40px; margin: 25px auto; background-image: linear-gradient(to right, #f9d1cc , #f6dcc1);}
.jdtext h3{font-family: "shan"; font-size: 30px; color: #666; line-height: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.jdtext p{font-family: "shan"; font-size: 18px; color: #666; line-height: 30px; margin-top: 15px;}
.jiud_ban .jiud_left, .jiud_ban .jiud_right{width: 56px; height: 56px; position: absolute; top: 40%; z-index: 10; background-position: center; background-size: cover;}
.jiud_ban .jiud_left{left: -100px; background-image: url(../images/jiud_left.png);}
.jiud_ban .jiud_right{right: -100px; background-image: url(../images/jiud_right.png);}

.jiud_pbox{margin: 40px 0; overflow: hidden;}
.jiud_pic{margin-left: 150px; padding: 15px; overflow: hidden; float: left;}
.jp_lf{width: 380px; height: 640px; float: left; margin-right: 20px; position: relative;}
.jp_md{width: 380px; height: 640px; float: left; margin-right: 20px; position: relative;}
.jp_rt{width: 200px; height: 640px; float: left; position: relative;}
.jp{position: absolute; transition: all 0.5s;}
.jp img{display: block; width: 100%; height: 100%; object-fit: cover;}
.jp p{width: 100%; background: rgba(0,0,0,.45); font-family: "shan"; font-size: 16px; color: #fff; line-height: 32px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 10px; position: absolute; left: 0; bottom: 0; z-index: 10; opacity: 0; visibility: hidden;  transition: all 0.5s;}
.jp:hover{box-shadow: 0 0 15px #000;}
.jp:hover p{opacity: 1; visibility: visible;}
.jp1{width: 380px; height: 310px; left: 0; top: 0;}
.jp2{width: 180px; height: 310px; left: 0; bottom: 0;}
.jp3{width: 180px; height: 145px; right: 0; bottom: 165px;}
.jp4{width: 180px; height: 145px; right: 0; bottom: 0;}
.jp5{width: 380px; height: 145px; left: 0; top: 0;}
.jp6{width: 180px; height: 145px; left: 0; top: 165px;}
.jp7{width: 180px; height: 145px; right: 0; top: 165px;}
.jp8{width: 380px; height: 310px; left: 0; bottom: 0;}
.jp9{width: 200px; height: 145px; left: 0; top: 0;}
.jp10{width: 200px; height: 310px; left: 0; top: 165px;}
.jp11{width: 200px; height: 145px; left: 0; bottom: 0;}
.jiu_pcon{width: calc(100% - 1200px); height: 670px; padding: 15px 0; float: right; position: relative;}
.jiu_pcon h3{font-family: "shan"; font-size: 30px; color: #666; line-height: 40px;}
.jiu_pcon p{font-family: "shan"; font-size: 24px; color: #666; line-height: 30px; margin-top: 90px;}
.jiu_pcon span{font-family: "shan"; font-size: 100px; color: #dadada; line-height: 1; font-weight: bold; position: absolute; left: 0; bottom: 85px;}
.jiu_pcon .bback{width: 100%; height: 70px; background-image: linear-gradient(to right, #f28e27 , #fb6a49); position: absolute; left: 0; bottom: 15px;}

.linebox{padding-left: 25px;position: relative;}
.sline{width: 2px;height: calc(100% - 35px);background: rgba(0,55,160,.5);position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.sline:before{content: "";width: 8px;height: 8px;background: #0037a0;border-radius: 50%;position: absolute;left: -3px;top: -4px;}
.sline:after{content: "";width: 8px;height: 8px;background: #0037a0;border-radius: 50%;position: absolute;left: -3px;bottom: -4px;}
.jdtext .linebox{padding-left: 20px;}
.jdtext .sline{height: 45px; top: 15px; transform: unset;}

.jiud_fbox{padding: 40px 0; overflow: hidden;}
.jiud_fbox .container{position: relative;}
.jiud_fbox .container:before{content: ""; width: 6px; height: 100%; background: url(../images/jddot.png) repeat-y center; position: absolute; left: 3px; top: 0; z-index: 2;}
.jiud_fenlb{width: 100%; margin-bottom: 70px;}
.jiud_fentit{height: 30px; position: relative;}
.jiud_fentit p{font-family: "shan"; font-size: 24px; color: #333; line-height: 30px; float: left; background: #fff; padding-right: 12px; padding-left: 40px; position: relative;}
.jiud_fentit p:before{content: ""; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to right, #fc6c6b , #ff8e50); position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3;}
.jiud_fentit div{width: 1920px; height: 30px; background: url(../images/jddot.png) repeat-x center; position: absolute; left: 0; top: 0; z-index: -1;}
.jiud_fenfl{width: 100%; display: flex; justify-content: space-between;}
.jiud_fentab{width: 18%;}
.jiud_fentab a{display: block; font-family: "shan"; font-size: 16px; color: #666; line-height: 30px; margin-top: 30px; padding-left: 40px; position: relative;
}
.jiud_fentab a:before{content: ""; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to right, #fc6c6b , #ff8e50); position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3;}
.jiud_fentab a.on, .jiud_fentab a:hover{color: #fb6c48;}
.jiud_fensbox{width: 80%; margin-top: 20px;}
.fens_ban{position: relative; width: 1030px; max-width: 100%; margin: auto; padding-bottom: 60px; display: none;}
.fens_ban:first-child{display: block;}
.fens_ban .swiper-slide{position: relative;}
.fens_ban .swiper-slide p{width: 100%; height: 40px; background: #f4872d; font-family: "shan"; font-size: 14px; color: #fff; line-height: 40px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: absolute; left: 0; bottom: 0; z-index: 10; display: none;}
.fens_ban .swiper-slide:hover p{display: block;}
.fens_ban .fens_left, .fens_ban .fens_right{width: 38px; height: 55px; position: absolute; top: 40%; background-position: center; background-size: cover; z-index: 1;}
.fens_ban .fens_left{left: -50px; background-image: url(../images/fens_left.png);}
.fens_ban .fens_right{right: -50px; background-image: url(../images/fens_right.png);}
.fens_ban .fens_page{position: absolute; left: 0; bottom: 0; font-size: 0; line-height: 1;}
.fens_ban .fens_page .swiper-pagination-bullet{border: 1px solid #f4872d; background: unset; margin: 0 5px; opacity: 1;}
.fens_ban .fens_page .swiper-pagination-bullet-active{background: #f4872d;}

@media(max-width: 1600px){
    .jiud_pic{margin-left: 50px;}
    .jiu_pcon{width: calc(100% - 1100px);}
    .jiu_pcon span{font-size: 80px;}
}
@media(max-width: 1500px){
    .jiud_pic{width: 1030px; float: unset; margin: auto;}
    .jiu_pcon{
        width: 1030px;
        float: unset;
        margin: auto;
        height: auto;
        max-width: 100%;
        padding: 15px;
    }
    .jiu_pcon p{
        margin: 10px 0;
    }
    .jiu_pcon span, .jiu_pcon .bback{
        position: unset;
    }
}

@media(max-width: 1200px){
    .jiud_menu{
        margin-top: 60px;
        margin-bottom: 30px;
        height: auto;
    }
    .jiud_back{
        position: unset;
    }
    .jiud_ban .jiud_left{
        left: -60px;
    }
    .jiud_ban .jiud_right{
        right: -60px;
    }
}

@media(max-width: 992px){
    .jiud_pic{
        max-width: 100%;
    }
    .jp_lf, .jp_md{
        margin-bottom: 20px;
    }
    .jiud_fbox .container:before{
        content: unset;
    }
    .jiud_fenfl{
        display: block;
    }
    .jiud_fentit p{
        padding-left: 30px;
    }
    .jiud_fentab{
        width: 100%;
    }
    .jiud_fentab a{
        display: inline-block;
        margin-top: 20px;
        padding-left: 25px;
        padding-right: 20px;
    }
    .jiud_fensbox{
        width: 100%;
    }
    .jiud_fenlb{
        margin-bottom: 40px;
    }
}

@media(max-width: 768px){
    .topcolor{
        margin-top: 0;
    }
    .jiud_menu{
        margin-top: 40px;
    }
    .jiud_back{
        max-width: 80%;
        height: 60px;
    }
    .jiud_menu .flex{
        height: auto;
        margin-top: 20px;
    }
    .jiud_ban .jiud_left{
        left: 0;
    }
    .jiud_ban .jiud_right{
        right: 0;
    }
    .jiud_tabs a{
        font-size: 16px;
    }
    .jiud_tabs a{
        font-size: 6px 15px;
    }
    .jdtext{
        width: 100%;
        margin-top: 0;
        padding: 20px;
    }
    .jdtext h3{
        font-size: 22px;
    }
    .jdtext p{
        font-size: 15px;
        line-height: 25px;
    }
    .jp_lf, .jp1, .jp_md, .jp5, .jp8{
        max-width: 100%;
    }
    .jp2, .jp3, .jp4, .jp6, .jp7{
        max-width: 48%;
    }
    .jiud_fentab a{
        padding-left: 20px;
        margin-top: 0;
    }
    .fens_ban{
        padding-bottom: 0;
    }
    .fens_ban .fens_left{
        left: 0;
    }
    .fens_ban .fens_right{
        right: 0;
    }
    .jiu_pcon span{
        font-size: 60px;
    }
    .jiu_pcon .bback{
        height: 50px;
    }
}