.section1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 7.2rem;
    padding: .35rem .5rem;
    margin-bottom: .75rem
}

@media (max-width: 767px) {
    .section1 {
        height: 4rem;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: .5rem
    }
}

.section1 .bg-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: .4rem
}

@media (max-width: 767px) {
    .section1 .bg-img {
        border-top-right-radius: 0;
        border-top-left-radius: 0
    }
}

.section1 .bg-img:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.section1 .bg-img b {
    display: block;
    width: 100%;
    height: 101%;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0
}

.section2 {
    margin-bottom: .6rem
}

@media (max-width: 767px) {
    .section2 {
        margin-bottom: .4rem
    }
}

.section2 .container {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

@media (max-width: 767px) {
    .section2 .container {
        display: block
    }
}

.section2 .container h1 {
    color: #000;
    font-weight: 700;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: .2rem;
    margin-bottom: 0;
    font-size: .4rem
}

@media (max-width: 767px) {
    .section2 .container h1 {
        margin-right: 0;
        margin-bottom: .2rem
    }
}

@media (max-width: 1024px) {
    .section2 .container h1 {
        font-size: 26px
    }
}

@media (max-width: 991px) {
    .section2 .container h1 {
        font-size: 22px
    }
}

@media (max-width: 767px) {
    .section2 .container h1 {
        font-size: .4rem
    }
}

.section2 .container .desc {
    width: 50%;
    font-size: .22rem
}

@media (max-width: 1024px) {
    .section2 .container .desc {
        width: 70%
    }
}

@media (max-width: 767px) {
    .section2 .container .desc {
        width: 100%
    }
}

@media (max-width: 1024px) {
    .section2 .container .desc {
        font-size: 18px
    }
}

@media (max-width: 991px) {
    .section2 .container .desc {
        font-size: 16px
    }
}

@media (max-width: 767px) {
    .section2 .container .desc {
        font-size: .3rem
    }
}

.section3 .cont {
    border-radius: .3rem;
    background-color: #fff;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    padding: .35rem .35rem .35rem 1rem;
    margin-bottom: 1.1rem
}

@media (max-width: 991px) {
    .section3 .cont {
        display: block;
        padding-top: .8rem
    }
}

@media (max-width: 767px) {
    .section3 .cont {
        padding-top: .3rem
    }
}

@media (max-width: 991px) {
    .section3 .cont {
        padding-right: 1rem
    }
}

@media (max-width: 767px) {
    .section3 .cont {
        padding-right: .3rem
    }
}

@media (max-width: 991px) {
    .section3 .cont {
        padding-bottom: .8rem
    }
}

@media (max-width: 767px) {
    .section3 .cont {
        padding-bottom: .3rem;
        padding-left: .3rem;
        margin-bottom: .5rem
    }
}

.section3 .cont .text {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 45%;
    margin-bottom: 0
}

@media (max-width: 991px) {
    .section3 .cont .text {
        width: 100%;
        margin-bottom: .6rem
    }
}

@media (max-width: 767px) {
    .section3 .cont .text {
        margin-bottom: .4rem
    }
}

.section3 .cont .text h3 {
    color: #000;
    font-weight: 700;
    font-size: .3rem
}

@media (max-width: 1024px) {
    .section3 .cont .text h3 {
        font-size: 22px
    }
}

@media (max-width: 991px) {
    .section3 .cont .text h3 {
        font-size: 20px
    }
}

@media (max-width: 767px) {
    .section3 .cont .text h3 {
        font-size: .36rem
    }
}

.section3 .cont .text .desc {
    margin-top: .6rem
}

@media (max-width: 991px) {
    .section3 .cont .text .desc {
        margin-top: .3rem
    }
}

@media (max-width: 767px) {
    .section3 .cont .text .desc {
        margin-top: .3rem
    }
}

.section3 .cont .text .desc p {
    position: relative;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    cursor: pointer;
    padding-left: .25rem
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p {
        padding-left: 20px
    }
}

.section3 .cont .text .desc p:not(:last-child) {
    margin-bottom: .1rem
}

.section3 .cont .text .desc p:before {
    content: "";
    border-radius: 50%;
    position: absolute;
    left: 0;
    display: none;
    top: .12rem;
    border: .03rem solid #c9c9c9;
    width: .14rem;
    height: .14rem
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p:before {
        display: block
    }
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p:before {
        top: 9px
    }
}

@media (max-width: 767px) {
    .section3 .cont .text .desc p:before {
        top: 8px
    }
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p:before {
        border-width: 2px
    }
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p:before {
        width: 10px
    }
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p:before {
        height: 10px
    }
}

.section3 .cont .text .desc p svg {
    position: absolute;
    left: 0;
    display: block;
    top: .11rem;
    width: .16rem;
    height: .16rem
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p svg {
        display: none;
        top: 7px
    }
}

@media (max-width: 767px) {
    .section3 .cont .text .desc p svg {
        top: 6px
    }
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p svg {
        width: 14px;
        height: 14px
    }
}

.section3 .cont .text .desc p svg rect {
    stroke: #c9c9c9;
    fill: none;
    rx: 50;
    ry: 50;
    x: 2;
    y: 2;
    width: -webkit-calc(100% - 4px);
    width: -moz-calc(100% - 4px);
    width: calc(100% - 4px);
    height: -webkit-calc(100% - 4px);
    height: -moz-calc(100% - 4px);
    height: calc(100% - 4px);
    stroke-width: 3px
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p svg rect {
        stroke-width: 2px
    }
}

.section3 .cont .text .desc p svg rect + rect {
    stroke: #df0434;
    stroke-dasharray: 103px;
    stroke-dashoffset: 103px
}

.section3 .cont .text .desc p.active {
    color: #000;
    font-weight: 700;
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03)
}

@media (max-width: 1024px) {
    .section3 .cont .text .desc p.active {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.section3 .cont .text .desc p.active:before {
    border-color: #df0434
}

.section3 .cont .text .desc p.active svg rect + rect {
    -webkit-animation: circle 5s linear;
    -moz-animation: circle 5s linear;
    animation: circle 5s linear
}

@-webkit-keyframes circle {
    0% {
        stroke-dashoffset: 103px
    }
    50% {
        stroke-dashoffset: 51px
    }
    to {
        stroke-dashoffset: 0
    }
}

@-moz-keyframes circle {
    0% {
        stroke-dashoffset: 103px
    }
    50% {
        stroke-dashoffset: 51px
    }
    to {
        stroke-dashoffset: 0
    }
}

@keyframes circle {
    0% {
        stroke-dashoffset: 103px
    }
    50% {
        stroke-dashoffset: 51px
    }
    to {
        stroke-dashoffset: 0
    }
}

.section3 .cont .img {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-radius: .15rem;
    position: relative;
    overflow: hidden;
    width: 52%;
    height: 27vw
}

@media (max-width: 991px) {
    .section3 .cont .img {
        width: 100%;
        height: 50vw
    }
}

.section3 .cont .img .swiper {
    width: 100%;
    height: 100%
}

.section3 .cont .img .swiper:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.section3 .cont .img .swiper .swiper-slide {
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain
}

.section3 .cont .img .swiper-pagination {
    width: 100%;
    bottom: .34rem
}

@media (max-width: 767px) {
    .section3 .cont .img .swiper-pagination {
        bottom: .1rem
    }
}

.section3 .cont .img .swiper-pagination .swiper-pagination-bullet {
    -webkit-transform: background-color .3s;
    -moz-transform: background-color .3s;
    -ms-transform: background-color .3s;
    transform: background-color .3s;
    background-color: hsla(0, 0%, 100%, .6)
}

.section3 .cont .img .swiper-pagination .swiper-pagination-bullet:after {
    display: none
}

.section3 .cont .img .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #df0434
}

.section4 .sec4-title {
    color: #000;
    font-weight: 700;
    font-size: .3rem
}

@media (max-width: 1024px) {
    .section4 .sec4-title {
        font-size: 22px
    }
}

@media (max-width: 991px) {
    .section4 .sec4-title {
        font-size: 20px
    }
}

@media (max-width: 767px) {
    .section4 .sec4-title {
        font-size: .36rem
    }
}

.section4 .pro-list {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: .3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

@media (max-width: 767px) {
    .section4 .pro-list {
        margin-top: 0
    }
}

.section4 .pro-list li {
    border-radius: .3rem;
    background-color: hsla(0, 0%, 100%, .6);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    height: 23.43vw;
    width: 32.2%;
    margin-top: .3rem
}

@media (max-width: 991px) {
    .section4 .pro-list li {
        height: 40vw
    }
}

@media (max-width: 767px) {
    .section4 .pro-list li {
        height: 70vw
    }
}

@media (max-width: 991px) {
    .section4 .pro-list li {
        width: 49%
    }
}

@media (max-width: 767px) {
    .section4 .pro-list li {
        width: 100%
    }
}

.section4 .pro-list li:not(.other-more):hover {
    background-color: #fff;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    box-shadow: 0 0 20px rgba(0, 0, 0, .1)
}

.section4 .pro-list li .item-show {
    height: 100%;
    cursor: pointer
}

.section4 .pro-list li .item-show:hover .item-img img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}

.section4 .pro-list li .item-show .item-img {
    height: 80%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.section4 .pro-list li .item-show .item-img img {
    display: block;
    max-width: 80%;
    max-height: 85%;
    width: auto;
    height: auto;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

.section4 .pro-list li .item-show .item-text {
    text-align: center;
    color: #000;
    font-weight: 700;
    margin-top: .15rem
}

.section4 .pro-list li.other-more {
    background-color: rgba(0, 0, 0, 0)
}

.section4 .pro-list li.other-more a {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    font-size: .16rem
}

@media (max-width: 1024px) {
    .section4 .pro-list li.other-more a {
        font-size: 14px
    }
}

@media (max-width: 767px) {
    .section4 .pro-list li.other-more a {
        font-size: .26rem
    }
}

.section4 .pro-list li.other-more a .a-cont {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    color: #000
}

.section4 .pro-list li.other-more a .a-cont .icon {
    margin-right: .2rem;
    margin-top: .1rem
}

.section4 .pro-list li.other-more a .a-cont .icon img {
    display: block;
    height: auto;
    width: .64rem
}

@media (max-width: 1024px) {
    .section4 .pro-list li.other-more a .a-cont .icon img {
        width: 50px
    }
}

.section4 .pro-list .placeholder {
    width: 32.2%
}

@media (max-width: 991px) {
    .section4 .pro-list .placeholder {
        width: 49%
    }
}

@media (max-width: 767px) {
    .section4 .pro-list .placeholder {
        width: 100%
    }
}

.fancybox-bg {
    background-color: #fff
}

.fancybox-caption {
    color: #333;
    background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, .85)), color-stop(50%, hsla(0, 0%, 100%, .3)), color-stop(65%, hsla(0, 0%, 100%, .15)), color-stop(75.5%, hsla(0, 0%, 100%, .075)), color-stop(82.85%, hsla(0, 0%, 100%, .037)), color-stop(88%, hsla(0, 0%, 100%, .019)), to(rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(bottom, hsla(0, 0%, 100%, .85), hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, .15) 65%, hsla(0, 0%, 100%, .075) 75.5%, hsla(0, 0%, 100%, .037) 82.85%, hsla(0, 0%, 100%, .019) 88%, rgba(0, 0, 0, 0));
    background: -moz-linear-gradient(bottom, hsla(0, 0%, 100%, .85), hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, .15) 65%, hsla(0, 0%, 100%, .075) 75.5%, hsla(0, 0%, 100%, .037) 82.85%, hsla(0, 0%, 100%, .019) 88%, rgba(0, 0, 0, 0));
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .85), hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, .15) 65%, hsla(0, 0%, 100%, .075) 75.5%, hsla(0, 0%, 100%, .037) 82.85%, hsla(0, 0%, 100%, .019) 88%, rgba(0, 0, 0, 0))
}

/*# sourceMappingURL=08dced1f8f81d317c36ae77d9c995088.css.map*/