@font-face {
    font-family: 'iconfont';
    src: url('fonts/iconfont.eot');
    src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('fonts/iconfont.woff2') format('woff2'),url('fonts/iconfont.woff') format('woff'),url('fonts/iconfont.ttf') format('truetype'),url('fonts/iconfont.svg#iconfont') format('svg');
    font-weight: normal;
    font-style: normal
}
.wrap {
    width: 1334px;
    margin: 0 auto;
    box-sizing: border-box;
    zoom:1}

.wrap::after {
    content: "";
    display: block;
    clear: both
}
.banner_area{ min-width:960px;height:470px;position:relative; _width:100%;}
.banner_box .banner_cont{ height:470px;}
.banner_box .area{ height:470px; overflow:hidden; position:relative;}
.banner_area .on,.banner_area .on_delay{ z-index:9999}
.banner_area .on2{ z-index:999}
.banner_ui{ background-position:0 0; background-color:#004D8C}
.banner_logo{ background-position:0 -477px; background-color:#056E84}
.banner_lighting{ background-position:0 -964px; background-color:#240159}
.banner_ui .banner_cont{ background:url(../image/banner_bg.png) no-repeat center 0;}
.main_box{ position:relative; z-index:10000; width:960px; margin:0 auto;}
.main_cont{ position:absolute; right:40px; top:72px; width:260px;}
.main_cont h1,.main_cont h2{ width:190px; height:50px; text-indent:-9999em; overflow:hidden; background:url(../image/right_bt.png) no-repeat;margin: 0;
    padding: 0;
    font-weight: normal;}
.main_cont h2{ background-position:0 -50px; width:222px; height:32px;}
.xl_info{ color:#fff;  font-size:12px;font-family:Tahoma, Geneva, sans-serif; padding-left:4px; margin-top:13px;opacity:0.6;filter:alpha(opacity=60)}
.xl_info dt{ float:left;}
.xl_info dt,.xl_info dd{ height:18px; line-height:18px; overflow:hidden;}
.btn_download{ display:block; width:202px; height:66px; background:url(../image/right_bt.png) no-repeat 0 -97px; text-indent:-9999px; overflow:hidden; margin:37px 0 0 1px; margin-bottom:2px; _position:relative; _margin-top:0; _top:37px;}
.btn_download:hover{ background-position:0 -185px;}
.btn_txt{ color:#fff;opacity:0.6;filter:alpha(opactiy=60); margin-left:4px; _margin-top:37px;zoom:1;}
.btn_txt:hover{ color:#fff}

caption{
    margin: 0;
    padding: 0;
    font-size: 100%;
    border: 0;
    vertical-align: baseline
}

.caption {
    padding: 80px 0 50px;
    text-align: center
}

.caption h3 {
    font-size: 38px;
    font-weight: 600
}

.caption p {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 400
}

.caption ul {
    margin: 30px 0 20px;
    font-size: 0
}

.caption li {
    margin: 0 20px;
    padding: 0 2em;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 34px;
    border-radius: 20px;
    cursor: pointer;
    background: #e4e8eb;
    display: inline-block;
    vertical-align: top
}

.caption li.on,.caption li:hover {
    color: #fff;
    background: #3372e3
}

.zblogdesc {
    padding-bottom: 20px;
    background: #fff;
    position: relative;
    z-index: 1
}

.zblogdesclist {
    margin: 30px 0 80px;
    position: relative;
    zoom:1}

.zblogdesclist::after {
    content: "";
    display: block;
    clear: both
}

.zblogdesclist.right {
    margin-top: 100px
}

.zblogdesclist.right .zblogdescimg {
    float: left;
    display: inline;
    margin-right: 5%
}

.zblogdesclist.right .zblogdesctxt {
    width: 40%;
    right: 0
}

.zblogdesctxt {
    width: 40%;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.zblogdesctxt h4 {
    margin-bottom: 10px;
    font-size: 30px;
    color: #333
}

.zblogdesctxt p {
    margin-bottom: 20px;
    font-size: 16px;
    color: #888
}

.zblogdesctxt ul {
    margin: 40px 0 50px;
    line-height: 1.8
}

.zblogdesctxt li {
    font-size: 16px;
    color: #333
}

.zblogdesctxt .btn {
    padding: 0 2em;
    font-size: 18px;
    color: #fff;
    line-height: 44px;
    border-radius: 22px;
    background: #3372e3;
    display: inline-block
}

.zblogdesctxt .btn:hover {
    background: #4786f7
}

.zblogdescimg {
    width: 50%;
    float: right;
    display: inline;
    padding-top: 11px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    background: #efefef;
    overflow: hidden
}

.zblogdescimg i {
    width: 10px;
    height: 10px;
    margin-left: 34px;
    border-radius: 50%;
    background: #fbba56;
    position: relative;
    display: inline-block;
    vertical-align: top
}

.zblogdescimg i::before,.zblogdescimg i::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 0
}

.zblogdescimg i::before {
    background: #e86b5f;
    left: -18px
}

.zblogdescimg i::after {
    background: #61c356;
    left: 18px
}

.zblogdescimg span {
    width: 100%;
    height: 0;
    padding-bottom: 58%;
    text-align: center;
    overflow: hidden;
    position: relative;
    display: block
}

.zblogdescimg span img {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.zbpdesc {
    font-weight: 600
}

.zbpdesctitle {
    margin-top: 100px;
    font-size: calc(20px + 1vw);
    color: #333;
    text-align: center;
    line-height: 1.1;
    position: relative;
    z-index: 1
}

.zbpdesctitle::before {
    content: attr(data-title);
    font-size: 2em;
    color: #f1f1f1;
    text-transform: Uppercase;
    white-space: nowrap;
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%)
}

.zbpdescitem {
    padding-bottom: 100px;
    font-size: 20px
}

.zbpdescitem li {
    margin-top: 100px;
    padding-left: 240px;
    position: relative
}

.zbpdescitem li::before {
    content: attr(data-num);
    font-size: 180px;
    color: #f1f1f1;
    position: absolute;
    top: -80px;
    left: 0;
    z-index: 0
}

.zbpdescitem li strong {
    margin-bottom: 20px;
    font-size: calc(10px + 1vw);
    color: #333;
    display: inline-block;
    vertical-align: top
}

.zbpdescitem li p {
    font-size: 16px;
    color: #666;
    font-weight: 400;
    line-height: 1.8
}


.selling {
    padding-bottom: 50px;
    background: #f1f1f1 url(../image/sellingbg.jpg) no-repeat top center;
    background-size: cover;
    position: relative;
    z-index: 2
}

.sellinglist ul {
    margin-left: -2%;
    font-size: 0
}

.sellinglist li {
    width: 23%;
    margin: 0 0 2% 2%;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.05);
    background: #fff;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    transition: transform .42s cubic-bezier(.165, .84, .44, 1)
}

.sellinglist li a {
    padding: 40px 20px 30px;
    display: block
}

.sellinglist li a span {
    width: 100px;
    margin: 0 auto;
    font-size: 80px;
    color: #333;
    font-family: iconfont;
    display: block
}

.sellinglist li a strong {
    margin-top: 20px;
    font-size: 22px;
    color: #333;
    display: block
}

.sellinglist li a p {
    margin-top: 10px;
    font-size: 14px;
    color: #999
}

.sellinglist li:hover {
    box-shadow: 0 8px 16px rgba(51,114,227,0.1);
    background: linear-gradient(27deg, #3372e3, #65a4ff);
    transform: translateY(-10px)
}

.sellinglist li:hover span,.sellinglist li:hover strong,.sellinglist li:hover p {
    color: #fff
}

@media screen and (max-width: 1360px) {
    .wrap {
        width:auto;
        padding: 0 20px;
        box-sizing: border-box
    }

    .wrapper {
        width: 100%;
        min-width: 100%
    }

    .slideitem {
        width: 100%
    }

    .slidetop {
        font-size: 50px;
        line-height: 1
    }

    .slidedesc {
        padding: 20px 0 30px
    }

    .slidebtn a {
        line-height: 56px
    }

    .slide .swiper-button-prev,.slide .swiper-container-rtl .swiper-button-next {
        left: 10px
    }

    .slide .swiper-button-next,.slide .swiper-container-rtl .swiper-button-prev {
        right: 10px
    }

    .zbpitem {
        width: 100%
    }

    .downitem li a {
        font-size: 14px
    }

    .downitem li span {
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        display: -webkit-box
    }
}

@media screen and (max-width: 1100px) {
    .caption {
        padding: 50px 0 30px
    }

    .caption h3 {
        font-size: 32px
    }

    .selling {
        padding-bottom: 40px
    }

    .sellinglist li {
        width: 48%;
        text-align: left
    }

    .sellinglist li a {
        padding: 20px
    }

    .sellinglist li a span {
        width: auto;
        float: left;
        display: inline;
        margin-right: 12px;
        font-size: 32px
    }

    .sellinglist li a strong {
        margin-top: 2px
    }

    .zblogdescimg {
        width: 40%;
        float: left
    }

    .zblogdesctxt {
        width: 60%;
        margin-top: 26px;
        padding-left: 5%;
        position: static;
        display: inline-block;
        vertical-align: top;
        transform: translateY(0)
    }

    .zblogdesctxt h4 {
        font-size: 22px;
        font-weight: 600
    }

    .zblogdesctxt ul {
        margin: 20px 0 30px
    }

    .zblogdesctxt li {
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        display: -webkit-box
    }

    .zblogdesclist {
        margin: 30px 0
    }

    .zblogdesclist.right {
        margin-top: 50px
    }

    .zblogdesclist.right .zblogdescimg {
        margin: 0
    }

    .zblogdesclist.right .zblogdesctxt {
        width: 60%
    }