﻿/* 清除内外边距 */

@charset "utf-8";








@charset "UTF-8";



/*!

Animate.css - http://daneden.me/animate

Licensed under the MIT license - http://opensource.org/licenses/MIT



Copyright (c) 2015 Daniel Eden

*/



.animated {

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}



.animated.infinite {

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

}



.animated.hinge {

    -webkit-animation-duration: 2s;

    animation-duration: 2s;

}



.animated.bounceIn,

.animated.bounceOut {

    -webkit-animation-duration: .75s;

    animation-duration: .75s;

}



.animated.flipOutX,

.animated.flipOutY {

    -webkit-animation-duration: .75s;

    animation-duration: .75s;

}



@-webkit-keyframes bounce {

    0%, 20%, 53%, 80%, 100% {

        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

        -webkit-transform: translate3d(0,0,0);

        transform: translate3d(0,0,0);

    }



    40%, 43% {

        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

        -webkit-transform: translate3d(0, -30px, 0);

        transform: translate3d(0, -30px, 0);

    }



    70% {

        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

        -webkit-transform: translate3d(0, -15px, 0);

        transform: translate3d(0, -15px, 0);

    }



    90% {

        -webkit-transform: translate3d(0,-4px,0);

        transform: translate3d(0,-4px,0);

    }

}


@charset "utf-8";

/*end*/


/**/

.tils{ position: relative;background:url(../images/tils.png) no-repeat center 0; height: 1247px; z-index: 5; margin-top: -116px; overflow: hidden;}

.tils_a{ overflow: hidden; padding: 17px 0 0; height: 100px; margin-bottom: 25px;}

.tils_a ul li{ float: left; width: 25%; padding-top: 31px;background:url(../images/tio_lin.jpg) no-repeat right 33px;}

.tils_a ul li img{ float: left; padding-left: 95px; padding-right: 10px; transition: all 0.2s;}

.tils_a ul li em{ display: inline-block; float: left;}

.tils_a ul li em i{ display: block; font-weight: bold; color: #333333; font-size: 26px; letter-spacing: 6px; padding-top: 3px; line-height: 100%;}

.tils_a ul li em span{ display: block; line-height: 100%; padding-top: 5px; font-size: 11px; font-family: Arial; color: #878787; text-transform: capitalize;}

.tils_a ul li:last-of-type{ background: none;}

.tils_a ul li:hover img{animation-duration: 1.25s;animation-name: flipInX;}

/**/

.tils_b{ overflow: hidden; height: 153px; margin: 0 42px 0 49px;}

.tils_b p{ float: left; width:623px; line-height: 45px; font-size: 14px; color: #333333; padding-left: 27px;background:url(../images/ti_hot.jpg) no-repeat 0 6px;}

.tils_b p a{ display: inline-block; color: #676767; font-size: 14px; margin-right: 22px;}

.tils_b p b{ padding-right: 20px;}

.tils_b p a:hover{color: #000; }

.tils_b em{ display: inline-block; float: right; width: 457px; height: 45px;background:url(../images/t_seach.jpg) no-repeat; overflow: hidden;}

.tils_b em input{ display: inline-block; float: left; padding-left: 26px; height: 45px; line-height: 45px; border: none; background: none; width: 365px; font-size: 15px;color: #999999; outline: none;}

.tils_b em button{ display: inline-block; float: right; cursor: pointer; outline: none; height: 45px; width: 65px; background: none; border: none;}



h2{ text-align: center; line-height: 100%;font-weight: normal;}

h2 i{ display: block; line-height: 100%; font-size: 42px; color: #333333; padding-bottom: 15px;}

h2 em{ display: inline-block; line-height: 100%; font-size: 26px; color: #333333; padding-left: 308px;background:url(../images/h2_l.png) no-repeat 0 10px;}

h2 em span{ display: inline-block; line-height: 100%; font-size: 18px; color: #333333; padding-right: 308px;background:url(../images/h2_r.png) no-repeat right 10px;}

.tils_c  h2 em span{ font-size: 26px;}



.tils_c p{ padding-top: 32px; height: 98px; color: #333333; font-size: 16px; margin: 0 54px; line-height: 32px; text-align: center;}

.tils_c h4{background:url(../images/t_bg2.jpg) no-repeat; width: 1117px; height: 517px; margin: 0 auto 61px; box-sizing: border-box; padding: 8px 0 0 8px; overflow: hidden;}

.tils_c h4 span{ display: block; overflow: hidden; font-size: 0; line-height: 0; width: 1101px;}


/**/

.brands{ overflow: hidden;background:url(../images/brands.jpg) no-repeat center 0; height: 470px;}

.brands h2{ padding-top: 20px; margin-bottom: 33px;}

.bra_o{ height: 167px;}

.bra_o ul li{ float: left; width: 139px; height: 139px; border-radius: 139px; overflow: hidden; border: 1px solid #d2d4d9; box-shadow: 3px 5px 11px rgba(0,0,0,0.12); margin-right: 35px;}

.bra_o ul li img{ width: 139px; height: 139px; border-radius: 139px; }

.bra_o ul li:last-of-type{ margin-right: 0;}



.bra_list{ overflow: hidden; margin-left: 552px;}

.bra_list ul li{ float: left; margin-right: 20px; transition: all 0.2s; width: 18px; height: 18px; background: #dbdbdb; border-radius: 18px; cursor: pointer;}

.bra_list ul li.cur{ background: #fff; width: 20px; height: 20px; box-sizing: border-box; border: 4px solid #1b519a;}

/**/

.ys{overflow: hidden;height: 550px;}

.ys h2{ margin-bottom: 27px;}

.ys_om{overflow: hidden;height: 524px;background:url(../images/ys_om3.jpg) no-repeat center 0;margin-bottom: -85px;box-sizing: border-box;padding-top: 86px;color: #fff;position: relative;width: 100%;overflow: hidden;}

.ys_om h3{line-height: 100%;/* padding-top: 74px; */height: 74px;font-weight: bold;background:url(../images/ys_no3.png) no-repeat;font-size: 24px;margin-bottom: 21px;}

.ys_om h3 i{ font-size: 40px; padding-right: 13px; display: inline-block;line-height: 100%;}

.ys_om p{ width: 553px; font-size: 16px; line-height: 30px; padding-bottom: 45px;}

.ys_om p i{ padding-left: 18px; display: block;background:url(../images/ys_i.png) no-repeat 0 10px; }

.ys_om h4 a{ display: inline-block; padding-left: 36px; height: 42px; line-height: 42px; width: 142px; text-align: left; border: 1px solid #a2abc2;font-weight: normal; font-size: 16px; color: #dee1e7;background:url(../images/ys_b.png) no-repeat 115px 16px; transition: all 0.2s;}

.ys_om h4 a:hover{ letter-spacing: 2px; color: #fff;}

.ys_lis{ width: 1200px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 0 19px  rgba(0,0,0,0.13); position:relative; z-index: 55;}

.ys_lis ul li{ float: left; width: 25%; box-sizing: border-box; text-align: center; padding-top: 22px; height: 160px; border-right: 1px solid #d7d7d7; background: #fafafa; cursor: pointer;}

.ys_lis ul li:last-of-type{ border-right: none;}

.ys_lis ul li b{ display: block; margin: 0 auto 4px; width: 68px; height: 58px; overflow: hidden;}

.ys_lis ul li b img{ display: block; transition: all 0.2s;}

.ys_lis ul li i{ display: inline-block; line-height: 100%; position: relative; font-size: 24px; color: #333333; font-weight: bold; padding: 0 42px;}

.ys_lis ul li i:before{ position: absolute; content: ""; left: 0; height: 1px; top: 49%; width: 31px;}

.ys_lis ul li i:after{ position: absolute; content: ""; right: 0; height: 1px; top: 49%; width: 31px;}

.ys_lis ul li span{ display: block; line-height: 100%; font-family: Arial; font-size: 12px; text-transform: capitalize; padding-top: 8px;}

.ys_lis ul li.cur b img:first-of-type{ margin-top: -58px;}

.ys_lis ul li.cur{ background: #2462b6;}

.ys_lis ul li.cur i{ color: #fff;}

.ys_lis ul li.cur i:before,.ys_lis ul li.cur i:after{ background: #fff;}

.ys_lis ul li.cur span{ color: #b6c5e1;}

/**/

.lic{ overflow: hidden;background:url(../images/lic.jpg) no-repeat center 0; height: 719px; padding-top: 29px; box-sizing: border-box;}

.lic h2{ margin-bottom: 38px;}

.lic h2 i{ padding-bottom: 0;}

.lic ul{ overflow: hidden; height: 421px; margin-left: 23px;}

.lic ul li{ float: left;background:url(../images/lc1.png) no-repeat; width: 140px; height: 153px;  margin-bottom: 69px; color: #00f6ff; font-weight: bold; font-size: 22px; text-align: center; box-sizing: border-box; padding-top: 45px;}

.lic ul li:nth-of-type(2){background:url(../images/lc2.png) no-repeat; margin-left: 116px;}

.lic ul li:nth-of-type(3){background:url(../images/lc3.png) no-repeat; margin-left: 115px;}

.lic ul li:nth-of-type(4){background:url(../images/lc4.png) no-repeat; margin-left: 113px;}

.lic ul li:nth-of-type(5){background:url(../images/lc5.png) no-repeat; margin-left: 122px;}

.lic ul li:nth-of-type(6){background:url(../images/lc6.png) no-repeat; margin-left: 125px;padding-top: 57px;}

.lic ul li:nth-of-type(7){background:url(../images/lc7.png) no-repeat; margin-left:118px;padding-top: 57px}

.lic ul li:nth-of-type(8){background:url(../images/lc8.png) no-repeat; margin-left:118px;padding-top: 57px}

.lic ul li:nth-of-type(9){background:url(../images/lc9.png) no-repeat; margin-left:112px;padding-top: 57px}

.lic ul li span{ display: block; padding-bottom: 5px;}



.lic h4{ overflow: hidden;}

.lic h4 em{ display: block; padding-left: 431px;font-weight: normal; line-height: 50px; margin-bottom: 20px;}

.lic h4 em span{ display: inline-block; width: 170px; font-size: 16px; color: #262626;text-align: center;font-weight: normal;    text-align: left;}

.lic h4 em a{ display: inline-block; padding-left: 34px; width: 133px; font-size: 16px; color: #fff; transition: all 0.2s;}

.lic h4 em a:hover{ letter-spacing: 2px;}

.lic h4 i{ display: block; margin-left: 337px; padding-left: 66px; font-weight: normal;background:url(../images/lic.png) no-repeat 0 3px; height: 50px; font-size: 15px; color: #343434; line-height: 100%;}

.lic h4 span{ display: block; font-weight: bold; line-height: 90%; padding-top: 9px; color: #333333; font-size: 32px; font-family: Arial;}

  
@keyframes move{

    0%{

        transform: translateY(0px);

    }

    100%{

        transform: translateY(10px);

    }

}





/**/

.pic img,.piy{transition: all 0.3s linear 0s;}

.pic img:hover{transform: scale(1.035);}

.piy:hover{transform: translateY(3px);}

/**/

/**/



@-webkit-keyframes fadeInDown1 {

    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }

    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }

}

@keyframes fadeInDown1 {

    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }

    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }

}

.fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 }

@-webkit-keyframes fadeInDown2 {

    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }

    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }

}

@keyframes fadeInDown2 {

    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }

    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }

}

.fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 }

@-webkit-keyframes fadeInLeft1 {

    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

@keyframes fadeInLeft1 {

    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }

@-webkit-keyframes fadeInLeft2 {

    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

@keyframes fadeInLeft2 {

    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

.fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 }

@-webkit-keyframes fadeInRight1 {

    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

@keyframes fadeInRight1 {

    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }

@-webkit-keyframes fadeInRight2 {

    from { -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

@keyframes fadeInRight2 {

    from { -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

.fadeInRight2 { -webkit-animation-name: fadeInRight2; animation-name: fadeInRight2 }

@-webkit-keyframes zoomLeft {

    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }

    50% { opacity: 1 }

}

@keyframes zoomLeft {

    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }

    50% { opacity: 1 }

}

.zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }

.zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }

@-webkit-keyframes fadeInUp1 {

    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

@keyframes fadeInUp1 {

    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }

@-webkit-keyframes fadeInUp2 {

    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

@keyframes fadeInUp2 {

    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }

    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }

}

.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }

@keyframes myfirst {

    0% { top: 0; left: 0 }

    25% { top: 10px; left: 0 }

    50% { top: 0; left: 0 }

    100% { top: 0; left: 0 }

}

@-moz-keyframes myfirst {

    0% { top: 0; left: 0 }

    25% { top: 10px; left: 0 }

    50% { top: 0; left: 0 }

    100% { top: 0; left: 0 }

}

@-webkit-keyframes myfirst {

    0% { top: 0; left: 0 }

    25% { top: 10px; left: 0 }

    50% { top: 0; left: 0 }

    100% { top: 0; left: 0 }

}

@-o-keyframes myfirst {

    0% { top: 0; left: 0 }

    25% { top: 10px; left: 0 }

    50% { top: 0; left: 0 }

    100% { top: 0; left: 0 }

}



/**/















































































































