@charset "utf-8";

.banner {
    position: relative;
}

.banner .gp-img-responsive {
    padding-bottom: 30.208%;
}

.slick-dots {
    width: 1300px;
    margin: 0 auto;
    text-align: right;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    vertical-align: middle;
}

.slick-dots li {
    display: inline-block;
    vertical-align: middle;
}

.slick-dots li button {
    background: rgba(0, 0, 0, 0) url(../2022images/dots_icon.png) no-repeat;
    background-size: cover;
    width: 23px;
    height: 40px;
    border: none;
    outline: none;
    color: #fff;
    margin-left: 30px;
    transition: all 0.3s ease;
    font-size: 0;
}

.slick-dots li.slick-active button {
    background: url(../2022images/dots_icon_hover.png) no-repeat;
    background-size: cover;
}

.content {
    margin-top: 50px;
    position: relative;
}

.row01 {
    padding-bottom: 50px;
}

.modeTitle {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
    max-height: 30px;
    overflow: hidden;
}

.modeTitle a {}

.modeTitle .title {
    display: inline-block;
    line-height: 30px;
    font-weight: bold;
    padding-left: 37px;
    position: relative;
    vertical-align: text-bottom;
}

.modeTitle .title::before {
    content: '';
    display: block;
    width: 37px;
    height: 39px;
    background: url(../2022images/title_before.png) no-repeat;
    position: absolute;
    left: 0px;
    top: 0px;
}

.modeTitle .more {
    color: #999;
    display: inline-block;
    vertical-align: text-bottom;
    line-height: 45px;
}

/* row01 */
.mode01 {
    float: left;
    width: 53.333%;
}

.mode01 .gp-img-responsive {
    padding-bottom: 56.25%;
}

.mode01 a {
    position: relative;
}

.mode01>a::after, .mode01 ul a::after {
    content: '';
    display: block;
    width: 100%;
    height: 35px;
    background: url(../2022images/black_bg.png) no-repeat;
    position: absolute;
    left: 0px;
    bottom: 0;
}

.mode01>a {
    display: block;
    margin-bottom: 20px;
}

.mode01>a::after {
    height: 80px;
}

.mode01 .articleName {
    color: #fff;
    width: 100%;
    padding: 0 30px;
    position: absolute;
    bottom: 30px;
    left: 0px;
    line-height: 18px;
    z-index: 1;
}

.mode01 .gp-avg-xxs-3 {
    margin-left: -10px;
    margin-right: -10px;
    overflow: hidden;
}

.mode01 .gp-avg-xxs-3 a {
    display: block;
    margin: 0 10px;
}

.mode01 .gp-avg-xxs-3 .articleName {
    bottom: 13px;
    padding: 0 20px;
}

.mode02 {
    float: right;
    width: 43.3333%;
}

.mode02 .gp-img-responsive {
    padding-bottom: 56.25%;
}

.mode02 .lf {
    float: left;
    width: 46.153%;
}

.mode02 .rt {
    float: right;
    width: 49.23%;
}

.mode02 ul:nth-of-type(1) .date {
    width: 119px;
    margin-bottom: 15px;
    padding: 10px 13px;
    background-color: #165168;
    border-radius: 15.5px;
    line-height: 14px;
    color: #fff;
}

.mode02 ul:nth-of-type(1) .date span:first-child {
    padding-right: 15px;
    position: relative;
}

.mode02 ul:nth-of-type(1) .date span:first-child::after {
    content: '';
    display: block;
    width: 1px;
    height: 27px;
    background-color: #FFF;
    position: absolute;
    right: 8px;
    top: -3px;
}

.mode02 ul:nth-of-type(1) .articleName {
    margin-bottom: 10px;
    line-height: 28px;
}

.mode02 ul:nth-of-type(1) .summary {
    line-height: 26px;
    color: #666666;
}

.mode02 ul li {
    overflow: hidden;
}

.mode02 ul:nth-of-type(1) li {
    margin-bottom: 55px;
}

.mode02 ul:nth-of-type(1) li:last-child, .mode02 ul:nth-of-type(2) li:last-child {
    margin-bottom: 0px;
}

.mode02 ul:nth-of-type(2) {
    margin-top: 30px;
}

.mode02 ul:nth-of-type(2) li {
    margin-top: 30px;
}

.pill .articleName {
    padding-left: 30px;
    position: relative;
    line-height: 18px;
    transition: all 0.3s ease;
}

.pill li:hover .articleName {
    text-indent: 0.4em;
}

.mode02 ul:nth-of-type(2) .articleName {
    margin-bottom: 12px;
}

.pill .articleName::before {
    content: '';
    display: block;
    width: 20px;
    height: 16px;
    background: url(../2022images/pill_icon.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0px;
    top: 2px;
}

.mode02 ul:nth-of-type(2) .date {
    color: #999999;
    line-height: 14px;
    margin-left: 30px;
}

.row02 {
    background: url(../images/row02_bg.png) no-repeat top center;
    background-size: 100% auto;
    padding: 50px 0;
}

.row02 .date {
    color: #999;
    padding-left: 5px;
}

.row02 ul {
    padding: 0 30px;
    background-color: #fff;
    box-shadow: 0px 10px 20px 0px rgba(24, 82, 106, 0.15);
}

/* .row02 ul li:first-child a{ padding-top: 0; } */
.row02 li a {
    display: block;
    padding: 30px 0;
    border-bottom: 1px dashed #dcdcdc;
}

.row02 ul li:last-child a {
    border-bottom: none;
}

.mode03 {
    float: left;
    width: 48.33%;
}

.mode04 {
    float: right;
    width: 48.33%;
}

.row03 {
    padding-bottom: 50px;
}

.row03 ul {
    padding-top: 20px;
}

.row03 li a {
    display: block;
    padding-left: 15px;
    position: relative;
    line-height: 18px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.row03 li:hover a {
    text-indent: 0.4em;
}

.row03 li a::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #18526a;
    position: absolute;
    left: 0px;
    top: 8px;
}

.row03 li:last-child a {
    margin-bottom: 0;
}

.row03 li:hover a {
    color: #18526a;
}

.row03 .gp-img-responsive {
    padding-bottom: 56.248%;
}

.mode05, .mode06, .mode07 {
    width: 31.1333%;
}

.mode05 {
    float: left;
}

.mode06 {
    float: left;
    margin-left: 4%;
}

.mode07 {
    float: right;
}

.mode08 {
    margin-left: -25px;
    margin-right: -25px;
    padding-bottom: 65px;
}

.mode08 a {
    display: block;
    margin: 0 25px;
}

.mode08 .gp-img-responsive {
    padding-bottom: 56.296%;
}

.mode08 .name {
    width: 88.3%;
    margin: 0 auto;
    position: relative;
    top: -15px;
    line-height: 28px;
    padding: 10px 0;
    color: #18526a;
    text-align: center;
    background-color: #f1f7fa;
    border-radius: 5px;
    box-shadow: 0px 10px 20px rgba(24, 82, 106, 0.15);
}

.floatRight {
    position: absolute;
    top: 0px;
    right: 50px;
    width: 120px;
    background-size: cover;
    /*  padding-top: 20px; */
    overflow-x: clip;
    background-color: #f8fbfc;
    box-shadow: 8px 10px 20px rgba(0, 0, 0, 0.15);
}

.floatRight::before {
    content: '';
    display: block;
    width: 160px;
    height: 314px;
    background-color: #f8fbfc;
    border-radius: 80px 80px 0 0;
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}

.floatRight ul {
    position: relative;
    z-index: 10;
    padding: 0 15px;
}

.floatRight li a {
    display: block;
    width: 120px;
    text-align: center;
    line-height: 16px;
    margin: 15px 0 20px -15px;
    position: relative;
}

.floatRight li a::after {
    content: '';
    display: block;
    width: 90px;
    height: 1px;
    background-color: #18526a;
    position: absolute;
    left: 15px;
    bottom: 0px
}

.icon {
    position: relative;
}

.icon::before {
    content: '';
    display: block;
    width: 100%;
}

.icon1::before {
    height: 26px;
    background: url(../2022images/icon01.png) no-repeat center;
}

.floatRight li:nth-of-type(1) a {
    padding-bottom: 15px;
}

.floatRight li:nth-of-type(1) a::after {
    bottom: -5px;
}

.icon2::before {
    height: 30px;
    background: url(../2022images/icon02.png) no-repeat center;
}

.floatRight li:nth-of-type(2) a {
    padding-bottom: 20px;
}

.floatRight li:nth-of-type(2) a::after {
    bottom: 0px;
}

.icon3::before {
    height: 32px;
    background: url(../2022images/icon03.png) no-repeat center;
}

.icon4::before {
    height: 32px;
    background: url(../2022images/close.png) no-repeat center;
}

.floatRight li:nth-of-type(3) a {
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.floatRight li:nth-of-type(3) a::after {
    bottom: 0;
}

.floatRight li:nth-of-type(4) a {
    padding-bottom: 20px
}

.active .floatRight {
    position: fixed;
    top: 27px
}


@keyframes TurnY {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes TurnY {
    0% {
        -webkit-transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
    }
}

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

    100% {
        transform: scale(1.1);
    }
}

@keyframes scaleImg {
    0% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.1);
    }
}



/* 响应式样式 */
@media screen and (max-width:1900px) {}

@media screen and (max-width:1860px) {
    .floatRight {
        right: 10px;
    }
}

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

@media screen and (max-width:1480px) {
    .mode02 .gp-ellipsis-2 {
        -webkit-line-clamp: 1;
    }

    .mode02 ul:nth-of-type(1) li {
        margin-bottom: 30px;
    }
}

@media screen and (max-width:1400px) {
    .slick-dots {
        width: 90%;
    }
}

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

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

@media screen and (max-width:1100px) {
    .mode02 ul:nth-of-type(2) li {
        margin-top: 15px;
    }
}

@media screen and (max-width:1080px) {
    .mode01, .mode02 {
        width: 100%;
    }

    .mode02 {
        margin-top: 30px;
    }
}

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

@media screen and (max-width:997px) {
    .gp-avg-xxs-4>li {
        width: 50%;
    }

    .slick-dots li button {
        width: 17px;
        height: 30px;
        margin-left: 20px;
    }

    .floatRight {
        display: none;
    }
}

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

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

@media screen and (max-width:768px) {
    .mode05, .mode06, .mode07 {
        width: 100%;
        margin-top: 30px;
    }

    .mode06 {
        margin-left: 0;
    }

    .row02 {
        padding: 10px 0;
    }

    .mode03, .mode04 {
        width: 100%;
        margin-top: 30px;
    }
}

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

@media screen and (max-width:540px) {
    .gp-avg-xxs-4>li {
        width: 100%;
    }

    .mode08 {
        padding-bottom: 30px;
    }

    .mode01 .gp-avg-xxs-3>li {
        width: 100%;
        margin-bottom: 20px;
    }

    .mode02 .lf, .mode02 .rt {
        width: 100%;
    }

    .mode02 .rt {
        margin-top: 15px;
    }

    .mode02 ul:nth-of-type(1) .articleName {
        margin-bottom: 0px;
    }

    .mode02 ul:nth-of-type(1) .date {
        margin-bottom: 10px;
    }

    .slick-dots {
        display: none;
    }

    .content {
        margin-top: 30px;
    }
}

@media screen and (max-width:414px) {
    .row02 .date {
        float: none;
        margin-bottom: 10px;
    }

    .row02 li a {
        padding: 15px 0;
    }

    .content {
        margin-top: 30px;
    }

    .row01 {
        padding-bottom: 30px;
    }

    .row02 {
        background: none;
        border-top: 1px dashed #165168;
    }
}

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

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