/* banner START */

*{box-sizing: border-box;}

.wide{

    margin: 0 auto;

    width: 1200px;

}

.img-center{

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

}



@keyframes trans0{

    100%{

        transform: translate(0, 0);

        opacity: 1;

    }

}

.trans0{

    animation: trans0 1s forwards;

}



.index-banner{

    position: relative;

    padding-top: 33.8%;

    height: 0;

    width: 100%;

    overflow: hidden;

}

.index-banner .swiper-container{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

.index-banner .swiper-slide img{

    max-width: 100%;

    max-height: 100%;

}

.index-banner .swiper-pagination-bullet{

    width: 15px;

    height: 15px;

    opacity: 1;

    border: 1px solid #fff;

    background: rgba(255, 255, 255, 1);

}

.index-banner .swiper-pagination-bullet-active{

    background: rgba(255, 255, 255, 0);

}

.index-banner .swiper-container-vertical>.swiper-pagination-bullets{

    right: 75px;

}

.index-banner .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{

    margin: 12px 0;

}



.index-banner .swiper-slide .banner-text{

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    padding: 0 10%;

    height: 100%;

    /*background: rgba(0, 0, 0, .5);*/

    display: flex;

    justify-content: center;

    -webkit-justify-content: center;

    text-align: center;

    flex-direction: column;

    -webkit-flex-direction: column;

    transition: all .5s;

    transition-delay: .4s;

    transform: translate(-100%, 0);

    opacity: 0;

}

.index-banner .swiper-slide-active .banner-text{

    transform: translate(0, 0);

    opacity: 1;

}

.index-banner .swiper-slide .banner-text h4{

    font-size: 46px;

    letter-spacing: 5px;

    color: #ffffff;

    font-family: 思源黑体;

    font-weight: bold;

}

.index-banner .swiper-slide .banner-text p{

    margin-top: 26px;

    margin-bottom: 206px;

    font-size: 18px;

    line-height: 28px;

    letter-spacing: 1px;

    color: #f7f7f7;

    font-family: 思源黑体;

    font-weight: lighter;

    text-align: center;

}

.index-banner .swiper-slide .banner-text .more{

    margin: 0 auto;

    display: block;

    width: 176px;

    height: 44px;

    line-height: 44px;

    border: solid 1px #ffffff;

    border-radius: 44px;

    text-align: center;

    letter-spacing: 1px;

    color: #ffffff;

    font-size: 18px;

    font-family: 思源黑体;

}

.index-banner .swiper-slide .banner-text .more:hover{

    background: #ffffff;

    color: #77c526;

}

/* banner END */



/* 宏日嘉 */

.index-sec1{

    position: relative;

    height: 260px;

    background: #e5e5e5;

}

.index-sec1 .about-link{

    position: absolute;

    bottom: 48px;

    left: 0;

    right: 0;

    margin: 0 auto;

    display: inline-block;

    width: 130px;

    height: 36px;

    line-height: 36px;

    border: solid 1px #da251c;

    font-size: 16px;

    letter-spacing: 1px;

    color: #da251c;

    text-align: center;

    transform: translate(0, 50px);

    opacity: 0;

    animation-delay: .3s;

}

.index-sec1 .about-link:hover{

    background: #d92219;

    color: #fff;

}

.index-sec1 .index-sec1-con{

    position: absolute;

    top: -68px;

    left: 0;

    right: 0;

    margin: 0 auto;

    padding: 16px 15% 36px;

    background: #fff;

    text-align: center;

    transform: translate(0, 50px);

    opacity: 0;

    z-index: 9;

}

.index-sec1 .index-sec1-con h3{

    margin-bottom: 10px;

    font-size: 30px;

    letter-spacing: 2px;

    color: #333333;

    font-weight: bolder;

}

.index-sec1 .index-sec1-con p{

    font-size: 16px;

    line-height: 28px;

    letter-spacing: 1px;

    color: #888888;

}



/* 宏日嘉 end */





/* 公共样式 START */

.item_top {

    width: 100%;

    padding: 40px 0;

    background: #333;

    color: #999;

    font-size: 16px;

    text-align: center;

    transform: translate(0, 50px);

}

.item_top h3 {

    font-size: 30px;

    color: #fff; 

    margin-bottom: 18px;

}

/* 公共样式 END */





/* brand START */

.brand {

    position: relative;

}

.brand .brand_center {

    width: 1200px;

    margin: auto;

    padding: 80px 0;

    overflow: hidden;

}

.brand .brand_center .brand_top {

    display: flex;

    /* align-items: center; */

    justify-content: space-between;

    overflow: hidden;

}

.brand .brand_center .brand_top .brand-img {

    position: relative;

    padding-top: 37.5%;

    width: 31.6%;

    overflow: hidden;

    transform: translate(-100%, 0);

    opacity: 0;

}

.brand .brand_center .brand_top .brand-img:nth-child(2){

    animation-delay: .3s;

}

.brand .brand_center .brand_top .brand-img:nth-child(3){

    animation-delay: .6s;

}

.brand .brand_center .brand_top .brand-img img {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    max-width: 100%;

    max-height: 100%;

}

.brand .brand_center .brand_top .brand-img span {

    position: absolute;

    width: 100%;

    bottom: 13%;

    left: 0;

    text-align: center;

    color: #ffffff;

    font-size: 20px;

    font-weight: bold;

}

.brand .brand_center .brand_bottom {

    margin-top: 180px;

    position: relative;

    display: flex;

    justify-content: flex-end;

}

.brand .brand_center .brand_bottom .brand_bottom_img {

    width: 690px;

    position: absolute;

    left: 0;

    top: -100px;

    transform: translate(50%, 0);

    opacity: 0;

    z-index: 3;

}

.brand_bottom .brand_bottom_img img{

    max-width: 100%;

}

.brand .brand_center .brand_bottom .brand_bottom_text {

    position: relative;

    width: 320px;

    height: 395px;

    background: #eee;

    box-sizing: content-box;

    padding-left: 280px;

    padding-right: 95px;

    display: flex;

    flex-direction: column;

    /* align-items: center; */

    text-align: center;

    justify-content: center;

    color: #333;

    transform: translate(-50%, 0);

    opacity: 0;

}

.brand .brand_center .brand_bottom .brand_bottom_text::after{

    content: "";

    display: block;

    position: absolute;

    top: 30px;

    left: 30px;

    width: calc(100% - 60px);

    height: calc(100% - 60px);

    border: 2px solid rgb(51,51,51);

    z-index: -1;

}

.brand .brand_center .brand_bottom .brand_bottom_text>* {

    margin: 3px 0;

}

.brand .brand_center .brand_bottom .brand_bottom_text>span:nth-child(1) {

    font-size: 18px;

}

.brand .brand_center .brand_bottom .brand_bottom_text strong:nth-child(2) {

    font-size: 48px;

}

.brand .brand_center .brand_bottom .brand_bottom_text strong:nth-child(2) span {

    color: #d92219;

}

.brand .brand_center .brand_bottom .brand_bottom_text>span:nth-child(3) {

    font-size: 16px;

    color: #888;

}

.brand .brand_center .brand_bottom .brand_bottom_text a:nth-child(4) {

    font-size: 14px;

    padding: 12px 0;

    border: 1px solid #333;

    border-radius: 38px;

    margin: 0 auto;

    margin-top: 15px;

    transition: all .5s;

    width: 124px;

}

.brand .brand_center .brand_bottom .brand_bottom_text a:nth-child(4):hover{

    background: #333;

    color: #eee;

}

/* brand END */





/* value START */

.value {

    position: relative;

}

.value .value_center {

    width: 1200px;

    margin: auto;

    padding: 55px 0;

}

.value .value_center ul {

    display: flex;

    justify-content: space-between;

}

.value .value_center ul li {

    transform: translate(0, 50px);

    opacity: 0;

    width: 31%;

    background: #f6f6f6;

    display: flex;

    flex-direction: column;

}

.value .value_center ul li:nth-child(2){

    flex-direction: column-reverse;

    animation-delay: .2s;

}

.value .value_center ul li:nth-child(3){

    animation-delay: .4s;

}

.value .value_center ul li .img-wrapper {

    position: relative;

    padding-top: 75.2%;

    width: 100%;

}

.value .value_center ul li .img-wrapper img{

    max-width: 100%;

    max-height: 100%;

}

.value .value_center ul li .value-text {

    display: flex;

    flex-direction: column;

    /* align-items: center; */

    justify-content: center;

    padding: 25px 30px 36px;

    /*background: #f6f6f6;*/

    font-size: 14px;

    color: #666;

    line-height: 24px;

    transition: all .5s;

}

.value .value_center ul li .value-text span:nth-child(1) {

    font-size: 24px;

    color: #333;

    margin-bottom: 14px;

}

.value .value_center ul li:hover .value-text{

    box-shadow: 0 2px 8px #ddd;

}

/* value END */





/* news START */

.news {

    position: relative;

}

.news .news_center {

    width: 1200px;

    margin: auto;

    padding: 72px 0;

    overflow: hidden;

}

.news .news_center .news_top {

    display: flex;

    justify-content: space-between;

    /* align-items: center; */

}

.news .news_center .news_top .news_top_img {

    width: 553px;

    margin-right: 60px;

    transform: translate(-100%, 0);

    opacity: 0;

}

.news .news_center .news_top .news_top_img img{

    max-width: 100%;

}

.news .news_center .news_top ul {

    overflow: hidden;

    flex: 1;

}

.news .news_center .news_top ul li{

    transform: translate(0, 50px);

    opacity: 0;

}

.news .news_center .news_top ul li:first-child a{

    padding: 0 20px 14px 0;   

}

.news .news_center .news_top ul li a {

    display: flex;

    flex-direction: column;

    color: #888;

    padding: 14px 20px 14px 0;

    border-bottom: 1px solid #ececec;

    font-size: 16px;

}

.news .news_center .news_top ul li a span.title {

    color: #333;

    margin-bottom: 5px;

}

.news .news_center .news_top ul li a:hover span.title {

    color: #d92219;

}

.news .news_center .news_top ul li a span.description {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

}

.news .news_center .news_middle {

    padding: 40px 0;

}

.news .news_center .news_middle ul {

    display: flex;

    justify-content: space-between;

}

.news .news_center .news_middle ul li {

    width: 30%;

    transform: translate(0, 50px);

    opacity: 0;

}

.news .news_center .news_middle ul li div {

    display: flex;

    justify-content: space-between;

     align-items: center; 

    border-bottom: 1px solid #dcdcdc;

    padding-bottom: 5px;

}

.news .news_center .news_middle ul li div h4 {

    font-size: 18px;

    color: #333;

    font-weight: normal;

}

.news .news_center .news_middle ul li div a {

    padding-right: 15px;

    font-size: 12px;

    color: #999;

    display: flex;

    /* align-items: center; */

    background: url(../images/icon/arr03.png) no-repeat right center;

}

.news .news_center .news_middle ul li div a:hover{

    color: #d92219;

    background: url(../images/icon/arr03a.png) no-repeat right center;

}

.news .news_center .news_middle ul li div img {

    height: 12px;

    margin-left: 3px;

}

.news .news_center .news_middle ul li ul {

    font-size: 14px;

    color: #888;

    display: flex;

    flex-direction: column;

}

.news .news_center .news_middle ul li ul li {

    width: 100%;

    margin-top: 10px;

    line-height: 23px;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}

.news .news_center .news_middle ul li ul li a {

    display: flex;

    justify-content: space-between;

    position: relative;

    padding-left: 12px;

}

.news .news_center .news_middle ul li ul li a::after {

    content: '';

    display: block;

    width: 5px;

    height: 5px;

    background: #d92219;

    position: absolute;

    left: 0;

    top: 9px;

}

.news .news_center .news_middle ul li ul li a span {

    overflow: hidden;

    text-overflow:ellipsis;

    white-space: nowrap;

    width: 65%;

}

.news .news_center .news_middle ul li ul li a i {

    flex: 1;

    text-align: right;

}

.news .news_center .news_middle ul ul li a:hover {

    color: #d92219;

}

.news .news_center .news_middle .about_video_li{

    height: 100%;

}

.news .news_center .news_middle .index-video {

    position: relative;

    margin-top: 15px;

    padding-bottom: 0;

    border: none;

    display: block;

    text-align: center;

}

.news .news_center .news_middle .index-video img{

    margin-left: 0;

    height: auto;

    max-width: 100%;

}

.news .news_center .news_middle .index-video .play-btn{

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    width: 54px;

    height: 54px;

    background: url(/images/icon/play02.png);

    cursor: pointer;

}



.news .news_center .news_bottom {

    margin-top: 125px;

    position: relative;

    display: flex;

    justify-content: flex-start;

    text-align: center;

}

.news .news_center .news_bottom .news_bottom_img {

    width: 57.5%;

    position: absolute;

    right: 0;

    top: -100px;

    transform: translate(100%, 0);

    opacity: 0;

    z-index: 3;

}

.news .news_center .news_bottom .news_bottom_img img{

    max-width: 100%;

}

.news .news_center .news_bottom .news_bottom_text {

    position: relative;

    width: 320px;

    height: 395px;

    background: #eee;

    box-sizing: content-box;

    padding-right: 280px;

    padding-left: 95px;

    display: flex;

    flex-direction: column;

    /* align-items: center; */

    justify-content: center;

    color: #333;

    transform: translate(-100%, 0);

    opacity: 0;

}

.news .news_center .news_bottom .news_bottom_text::after{

    content: "";

    display: block;

    position: absolute;

    top: 30px;

    left: 30px;

    width: calc(100% - 60px);

    height: calc(100% - 60px);

    border: 2px solid rgb(51,51,51);

    z-index: -1;

}

.news .news_center .news_bottom .news_bottom_text>* {

    margin: 3px 0;

}

.news .news_center .news_bottom .news_bottom_text>span:nth-child(1) {

    font-size: 18px;

}

.news .news_center .news_bottom .news_bottom_text strong:nth-child(2) {

    font-size: 40px;

}

.news .news_center .news_bottom .news_bottom_text strong:nth-child(2) span {

    color: #d92219;

}

.news .news_center .news_bottom .news_bottom_text>span:nth-child(3) {

    font-size: 16px;

}

.news .news_center .news_bottom .news_bottom_text a:nth-child(4) {

    font-size: 14px;

    padding: 12px 0;

    border: 1px solid #333;

    border-radius: 38px;

    margin: 0 auto;

    margin-top: 15px;

    transition: all .5s;

    width: 124px;

}

.news .news_center .news_bottom .news_bottom_text a:nth-child(4):hover{

    background: #333;

    color: #eee;

}

/* news END */



/* 视频弹窗 */

.video-pop { display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100; }

.video-pop .video { position: absolute; top: 50%; left: 50%; width: 700px; height: 480px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.video-pop .video #video-box{

    width: 100%;height: 100%;

}

.video-pop .video video { width: 100%; height: 100%; }

.close-video{

    position: absolute;

    right: -20px;

    top: -20px;

    width: 40px;

    height: 40px;

    line-height: 40px;

    border-radius: 50%;

    box-shadow: 0 5px 10px #aaa;

    text-align: center;

    background: #fff;

    font-size: 18px;

    cursor: pointer;

}

/* 视频弹窗 end */





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

    .wide{

        padding-left: 20px;

        padding-right: 20px;

        width: 100%;

    }

    .index-banner .swiper-slide .banner-text h4{

        font-size: 38px;

    }

    .index-banner .swiper-slide .banner-text p{

        margin-top: 22px;
        font-size: 16px;
        margin-bottom: 120px;

        line-height: 24px;

    }

    .index-banner .swiper-container-vertical>.swiper-pagination-bullets{

        right: 50px;

    }

    .index-sec1 .index-sec1-con{

        top: -26px;

        padding: 16px 12% 30px;

    }

    .index-sec1 .about-link{

        bottom: 28px;

    }

    

    .brand .brand_center{

        width: 100%;

        padding-left: 20px;

        padding-right: 20px;

    }



    .brand .brand_center .brand_bottom{

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap;

    }

    .brand .brand_center .brand_bottom .brand_bottom_img{

        width: 57.5%;

    }



    .value .value_center{

        width: 100%;

        padding: 40px 20px;

    }



    .news .news_center{

        width: 100%;

        padding-left: 20px;

        padding-right: 20px;

    }

}



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

    .index-banner{

        height: 346px;

        padding-top: 0;

    }

    .index-banner .swiper-slide img{

        position: absolute;

        max-width: none; 

        max-height: none; 

        height: 100%;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }



    .item_top{

        padding: 20px;

        transform: translate(0, 50px);

    }

    .item_top h3{

        margin-bottom: 10px;

        font-size: 26px;

    }

    .brand .brand_center .brand_top .brand-img span{

        font-size: 28px;

    }

    .brand .brand_center{

        padding-top: 50px;

        padding-bottom: 50px;

    }

    .brand .brand_center .brand_bottom{

        margin-top: 40px;

        justify-content: center;

    }

    .brand .brand_center .brand_bottom .brand_bottom_img{

        position: static;

        width: 690px;

    }

    .brand .brand_center .brand_bottom .brand_bottom_text{

        padding: 0;

        width: 690px;

    }



    .news .news_center .news_bottom{

        margin-top: 0;

        justify-content: center;

        flex-wrap: wrap;

    }

    .news .news_center .news_bottom .news_bottom_text{

        padding: 0;

        width: 690px;

    }

    .news .news_center .news_bottom .news_bottom_img{

        position: static;

        width: 690px;

        order: -1;

    }

    .news .news_center{

        padding: 40px 20px;

    }

    .news .news_center .news_top .news_top_img{

        width: 45.8%;

        margin-right: 30px;

    }



    .news .news_center .news_top ul li:last-child{

        display: none;

    }

    .news .news_center .news_middle ul li ul li:last-child{

        display: none;

    }

}



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

    .index-banner .swiper-container-vertical>.swiper-pagination-bullets{

        right: 20px;

    }

    .index-banner .swiper-slide .banner-text h4{

        font-size: 32px;

    }

    .index-banner .swiper-slide .banner-text p{
        font-size: 14px;
        margin-bottom: 155px;

    }

    .index-sec1{

        padding-bottom: 25px;

        height: auto;

        text-align: center;

    }

    .index-sec1 .index-sec1-con{

        position: static;

        padding: 15px 5% 30px;

    }

    .index-sec1 .about-link{

        margin-top: 25px;

        position: static;

    }

    .brand .brand_center .brand_top .brand-img span{

        font-size: 26px;

    }

    .brand .brand_center{

        padding-top: 40px;

        padding-bottom: 40px;

    }



    .brand .brand_center .brand_top{

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap;

    }

    .brand .brand_center .brand_top .brand-img{

        margin-bottom: 20px;

        padding-top: 56.7%;

        width: 48%;

    }

    .brand .brand_center .brand_bottom .brand_bottom_text{

        padding: 30px;

        height: 320px;

        box-sizing: border-box;

        text-align: center;

    }

    .brand .brand_center .brand_bottom .brand_bottom_text strong:nth-child(2){

        font-size: 38px;

    }



    .news .news_center .news_bottom .news_bottom_text strong:nth-child(2){

        font-size: 38px;

    }

    .news .news_center .news_bottom .news_bottom_text{

        padding: 30px;

        height: 320px;

        box-sizing: border-box;

    }



    .news .news_center .news_top{

        flex-wrap: wrap;

        justify-content: center;

    }

    .news .news_center .news_top .news_top_img{

        margin-right: 0;

        margin-bottom: 20px;

        width: 552px;   

    }

    .news .news_center .news_top ul{

        flex: none;

        width: 552px;

        max-width: 100%;

    }



    .news .news_center .news_middle>ul{

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap;

    }

    .news .news_center .news_middle>ul>li{

        margin-bottom: 20px;

        width: 46%;

    }

    .news .news_center .news_middle>ul>li:nth-child(2){

        display: none;

    }



    .video-pop .video {

        width: 90%;

        height: 30%;

    }

    .close-video{

        right: -15px;

    }

}



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

    .index-sec1 .index-sec1-con h3{

        font-size: 24px;

    }

    .index-banner .swiper-pagination-bullet{

        width: 12px;

        height: 12px;

    }

    .brand .brand_center .brand_top .brand-img span{

        font-size: 24px;

    }

    .brand .brand_center .brand_bottom .brand_bottom_text{

        outline-offset: -20px;

    }

    .brand .brand_center .brand_bottom .brand_bottom_text strong:nth-child(2){

        font-size: 32px;

    }



    .value .value_center{

        padding: 40px 20px 20px;

    }

    .value .value_center ul{

        flex-wrap: wrap;

        -webkit-flex-wrap: wrap;

    }

    .value .value_center ul li{

        margin-bottom: 20px;

        width: 48%;

    }

    .value .value_center ul li:nth-child(2){

        flex-direction: column;

    }

    .value .value_center ul li .value-text span:nth-child(1){

        font-size: 22px;

    }



    .value .value_center ul li .value-text{

        padding: 24px 20px 24px;

    }



    .news .news_center .news_bottom .news_bottom_text{

        outline-offset: -20px;

    }

    .news .news_center .news_bottom .news_bottom_text strong:nth-child(2){

        font-size: 32px;

    }

    



    .news .news_center .news_middle>ul>li{

        width: 100%;

    }

}



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

    .index-banner .swiper-slide .banner-text h4{

        font-size: 28px;

    }

    .index-banner .swiper-container-vertical>.swiper-pagination-bullets{

        right: 12px;

    }

    .index-banner .swiper-slide .banner-text .more{

        width: 170px;

        height: 36px;

        line-height: 36px;

        border-radius: 36px;

    }

    .brand .brand_center .brand_top .brand-img{

        padding-top: 118.9%;

        width: 100%;

    }

    .news .news_center .news_bottom .news_bottom_text{

        padding: 60px 30px;

        height: auto;

    }

}



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

    .value .value_center ul li{

        width: 100%;

    }

}