*{ margin:0px; padding:0px;}
body {margin:0px;width:100%;padding:0px;font:12px/1.6 '΢ÈíÑźÚ','Microsoft Yahei','helvetica','arial';color:#333;background:#fff;}
html,body{height:100%;}
ul,ul li,ol{list-style:none;}
img{border:none; vertical-align:top}
a{color:#333333;}
button,span,div,a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.bdbox{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0em;-webkit-border-radius:0m;-moz-border-radius:0em;padding:0px;border:0px; font-family:'Microsoft Yahei';}
.clear{clear: left;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} 
.clearfix{display:inline-block;*zoom:1;}
.fl{float:left}
.fr{float:right}
.font14{font-size:14px;}
.center{text-align:center}
.wrap{width:1200px;position:relative;overflow:hidden;margin:0px auto}

/* header */
#header{width:100%;height:134px;margin:0px auto;background:url(https://m.graceyerika.com/img/topbg.jpg) repeat-x top #fff;}
.hdtop{height:36px;line-height:34px;}
.hdtop i{width:18px;height:16px;display:inline-block;background:url(https://m.graceyerika.com/img/email.png) no-repeat center;vertical-align:middle;margin-right:2px}
.hdtop i.tel{ background-image:url(https://m.graceyerika.com/img/tel.png)}
.hdbox{width:1200px;position:relative;margin:0px auto;height:98px}
.hdbox .logo{height:56px;position:absolute;left:0px;top:21px;}
.hdbox .nav{height:100px;width:820px;margin:0px auto;position:absolute;left:382px;top:0px;}
.hdbox .nav li{float:left;position:relative;width:102px;overflow:hidden}
.hdbox .nav li a{width:102px;font-size:14px;display:block;text-align:center;padding:39px 0px 33px; font-weight:bold;border-bottom:4px solid #fff;background:#fff;}
.hdbox .nav li .on{background:#C9231B;border-color:#333333;color:#fff}
.sub{display:none;background:#C9231B;width:176px; position:absolute;top:98px;padding:0px; z-index:999}
.sub a{color:#fff;border-bottom:1px solid #333;padding:7px 22px; display:block}
.sub a:hover{ text-decoration:underline}

/* banner */
#banner{width:100%;min-width:1200px;height:550px;overflow:hidden;margin:0px auto;position:relative;background:#eee;}
#banner .carousel-item{ position:relative}
#banner .carousel-item .label{position:absolute;z-index:100;color:#fff;letter-spacing:1px;top:234px;left:884px;font-size:28px;text-shadow: 0px 1px 2px #444;}
#banner .carousel-item .label font{font-size:22px}

/* search */
#search{height:130px; overflow:hidden}
#search .shbox{margin-top:40px;width:1020px}
#search .fl{width:482px;position:relative;height:52px;overflow:hidden}
#search .ipt{width:400px;border-top:1px solid #ccc;height:17px; border-bottom:1px solid #ccc;padding:16px 80px 16px 2px; outline:none}
#search .shbtn{ position:absolute;top:12px;background:#C9231B; color:#fff;padding:5px 20px;width:70px;right:4px; z-index:100; border:none; cursor:pointer; outline:none}
#search .shbtn:active{background:#BB0000}
#search .fr{width:480px;position:relative;border-top:1px solid #ccc;padding-left:2px; border-bottom:1px solid #ccc;height:20px;padding:14px 0px 15px;overflow:hidden;text-align:left}
#search .fr b{color:#C9231B}
#search .fr a{margin:0px 11px 0px 6px}
#search .fr a:hover{color:#C9231B; text-decoration:underline; }

/* container */
.container{width:100%;margin:0px auto}
.container .title{width:100%;padding:68px 0px 75px;text-align:center}

/* fb */
#fb{height:580px;}
#fbbox{width:100%;height:550px;overflow:hidden;margin:0px auto; text-align:center; position:relative}
#fbbox div{width:1920px;position:absolute;left:50%;margin-left:-960px;top:0px;;height:100%;text-align:center}

/* crane */
#crane{height:800px;}
#crane .title{padding-top:20px}
#cranebox{width:100%;height:550px;overflow:hidden;margin:0px auto; text-align:center; position:relative}
#cranebox div{width:1920px;position:absolute;left:50%;margin-left:-960px;top:0px;;height:100%; text-align:center}

/* products */
#products{height:696px;background:url(https://m.graceyerika.com/img/pro_bg.jpg) repeat-y center}
#products .probox{position:relative;overflow:hidden;margin:0px auto}
#products .probox ul{height:500px;}
#products .probox ul li {WIDTH: 215px; FLOAT: left;position:absolute; z-index:100}
#products .probox ul li a{width: 215px;display: inline-block; height: 187px;}
#products .probox ul li a img{position:absolute;left:0px;top:0px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
#products .probox ul li ._off{filter:alpha(opacity=0);opacity:0;}
#products .probox ul li ._off2{ display:none}
#products .probox ul li ._on{}
#products .probox ul li ._on2{block}
#products .probox ul li .sm{ font-size:18px; font-weight:bold;width:100%; display:block; position:absolute; z-index:99; top:51px;left:0px; text-align:center; color:#454545; background:url(https://m.graceyerika.com/img/pbg2.png) no-repeat center bottom;height:50px}
#products .probox ul li .more{color:#C9231B; font-weight:bold;width:96%; display:block; position:absolute; z-index:99; top:119px;left:0px;text-align:center; font-size:10px;padding-left:4%;}
#products .probox ul li:hover ._off{filter:alpha(opacity=100); opacity: 1.0;}
#products .probox ul li:hover ._off2{display:block}
#products .probox ul li:hover ._on{filter:alpha(opacity=0);opacity: 0;}
#products .probox ul li:hover ._on2{ display:none}
#products .probox ul li:hover .sm{color:#fff;background:url(https://m.graceyerika.com/img/pbg1.png) no-repeat center bottom}
#products .probox ul li:hover .more{color:#fff}
#products .pro1 {top:0px;left:165px;}
#products .pro2 {top:0px;left:493px;}
#products .pro3 {top:0px;left:822px;}
#products .pro4 {top:95px;left:0px;}
#products .pro5 {top:95px;left:657px;}
#products .pro6 {top:95px;left:329px;}
#products .pro7 {top:95px;right:0px;}
#products .pro8 {top:190px;left:165px;}
#products .pro9 {top:190px;left:493px;}
#products .pro10 {top:190px;left:822px;}
#products .probox ul li img {width:215px;height:187px;}

/* wlw */
#wlw{height:800px;}
#wlwbox{width:100%;height:600px;overflow:hidden;margin:0px auto; text-align:center; position:relative}
#wlwbox .changeBox_a1{width:1200px;height:100%;position:relative;margin:0px auto;}
#wlwbox .changeBox_a1 .changeDiv{position:absolute;top:0px;left:-350px;display:none;width:1920px;height:600px; overflow:hidden;}
#wlwbox .ul_change_a1{position:absolute;right:500px;bottom:18px;height:17px;overflow:hidden;z-index:100;width:200px; text-align:center;padding:0px;vertical-align:top}
#wlwbox .ul_change_a1 li{position:relative;margin:0px 3px; width:14px;height:14px;overflow:hidden; clear:left;vertical-align:top;}
#wlwbox .ul_change_a1 li{display:inline-block;zoom:1;*display:inline;}
#wlwbox .ul_change_a1 span{}
#wlwbox .ul_change_a1 span.on{}
#wlwbox #prev,#wlwbox #next{ position:absolute;height:86px;width:35px;color:#fff;top:30%;z-index:999; cursor:pointer}
#wlwbox #prev:hover,#wlwbox #next:hover{background-color:#BB0000}
#wlwbox #prev{left:0px;background:url(https://m.graceyerika.com/img/prev.png) no-repeat 6px center #C9231B}
#wlwbox #next{right:0px;background:url(https://m.graceyerika.com/img/next.png) no-repeat 10px center #C9231B}

/* about */
#about{height:683px;background:url(https://m.graceyerika.com/img/about_bg.jpg) repeat-y center}
#about .title{padding-bottom:60px}
#about .probox{position:relative;overflow:hidden;margin:0px auto}
#about .fl{width:640px; overflow:hidden;}
#about .fl h2{ font-size:26px;color:#C9231B; line-height:145%}
#about .abnav{width:100%;height:32px; overflow:hidden;margin-top:22px}
#about .abnav li{width:120px;height:32px;margin-right:10px;float:left;;background:#A2A2A0;color:#fff; cursor:pointer; font-weight:bold; text-align:center; line-height:31px; font-size:14px}
#about .abnav li.on{background:#C9231B;}
#about .fr{padding-top:25px;width:480px; text-align:right}
#about .abcontent{width:620px;height:110px;overflow:hidden;margin-top:18px;padding:0px 1px;color:#444;}
#about .abcontent li{width:100%;height:100%; display:none; font-size:14px; line-height:210%;}
#about .abcontent li.on{display:block}
#about .abcontent li a{ font-weight:bold; color:#C9231B}
#about .abcontent li a:hover{ text-decoration:underline}

/* cert */
#cert{height:540px; text-align:center}
#cert .title{padding-bottom:55px}
.certlist{position:relative;margin:0px auto 45px;padding:0px;text-align:center;}
.certlist .Box_con {position: relative;width:1060px;margin:0px auto;}
.certlist .Box_con .btnl {position: absolute;}
.certlist .Box_con .btn {display: block;height: 86px;width:35px;position: absolute;top: 70px;cursor: pointer;}
.certlist .Box_con .btnl {background:url(https://m.graceyerika.com/img/prev.png) no-repeat 6px center #C9231B;left: -66px;}
.certlist .Box_con .btnr {background:url(https://m.graceyerika.com/img/next.png) no-repeat 10px center #C9231B;right: -66px;}
.certlist .Box_con .btn:hover {background-color:#C1221A}
.certlist .Box_con .conbox {position: relative;overflow: hidden;}
.certlist .Box_con .conbox ul {position: relative;list-style: none; display:block; overflow:hidden;height:225px;}
.certlist .Box_con .conbox ul li{float:left;width:250;height:225px;padding-right: 20px;overflow: hidden;}
.certlist .Box_con .conbox ul li .ibox{width:248px;height:168px;padding:10px 0px;border:1px solid #E6E7E7; overflow:hidden; display:block; text-align:center}
.certlist .Box_con .conbox ul li .ibox img{height:178px;max-width:228px;max-height:168px;}
.certlist .Box_con .conbox ul li:hover .ibox{border-color:#C9231B}
.certlist .Box_con .conbox ul li span{width:250px;height:35px; font-weight:bold; font-size:13px;background:#333333;text-align:center; display:block; line-height:34px}
.certlist .Box_con .conbox ul li span a{color:#fff}
.certlist .Box_con .conbox ul li span :hover{ text-decoration:underline}
.certlist .Box_con .conbox ul li:first-child {margin-left: 0;}
			
.certlist .BoxSwitch {margin-top: 30px;text-align: center; display:none}
.certlist .BoxSwitch span {display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;width: 30px;height: 3px;background: #ccc;margin: 0 5px;cursor: pointer;}
.certlist .BoxSwitch span.cur {background: red;}
.cert-more{ font-size:14px; color:#fff;padding:7px 20px; background:#C9231B;margin:0px auto; font-weight:bold}
.cert-more:hover{ text-decoration:underline}

/* news */
#news{height:462px;background:url(https://m.graceyerika.com/img/news_bg.jpg) repeat-y top center}
#news .title{padding-bottom:56px}
#news .newslist{position:relative;overflow:hidden;margin:0px auto;height:300px}
#news .newslist .nbox{width:575px;}
#news .newslist .ntit{background:#C9231B;padding:5px 0px 7px; width:100%; position:relative}
#news .newslist .ntit a{ color:#fff; position:absolute;right:10px;top:6px; font-size:15px}
#news .newslist .ntit a:hover{ text-decoration:underline}

#news .newslist .ntit h3{ color:#fff; font-size:16px;margin:0px 18px;}
#news .newslist ul{ background:#fff;padding:16px 18px 20px;}
#news .newslist ul li{height:32px; line-height:32px; position:relative;font-size:14px; background:url(https://m.graceyerika.com/img/news-hot.jpg) no-repeat left center;padding-left:19px;}
#news .newslist ul li span{ position:absolute;right:0px; color:#999}
#news .newslist ul li a{color:#555;}
#news .newslist ul li a:hover{text-decoration:underline}

/*------footer------*/
#footer{width:100%;height:400px;position:relative;overflow:hidden;text-align:center;background:url(https://m.graceyerika.com/img/ftbg.jpg)}
#footer .ftbox{width:1040px;height:271px;background:url(https://m.graceyerika.com/img/ftLOGO2.png) no-repeat top;margin-top:50px;padding-top:76px; color:#ccc; font-size:15px;}
#footer .ftbox .ftct{width:23%;margin:0px 0.8%; float:left;border-left:1px solid #4C4C4C;height:170px; line-height:240%; }
#footer .ftbox .ftct:first-child{border:0px;}
#footer .ftbox .ftbt{width:100%; float:left;margin-top:46px}
#footer .ftbox p{margin-top:15px}
#footer .ftbox .wxqrcode{margin-top:30px;height:111px; text-align:center}
#footer .ftbox a{color:#999;}

/* customer */
.customer{width:56px; position:fixed;right:6px;top:50%;margin-top:-160px; z-index:1000}
.customer a{ cursor:pointer; position:relative;display:block;width:56px;height:56px;margin:2px 0px; overflow:hidden}
.customer a div{position:absolute; -webkit-transition: all 0.18s ease;-moz-transition: all 0.18s ease;-o-transition: all 0.18s ease;transition: all 0.18s ease;right:56px;width:160px; display:block;opacity:0;text-align:center;overflow:hidden;height:26px;padding:15px 0px; color:#fff;background:#C9231B;font-size:16px; }
.customer a.rn_qq{background:url(https://m.graceyerika.com/img/icon_qq.png) no-repeat #787878; background-size:100%}
.customer a.rn_weixin{ background:url(https://m.graceyerika.com/img/icon_weixin.png) no-repeat #787878; background-size:100%}
.customer a.rn_tel{ background:url(https://m.graceyerika.com/img/icon_tel.png) no-repeat #787878; background-size:100%}
.customer a.rn_top{ background:url(https://m.graceyerika.com/img/icon_top.png) no-repeat #787878; background-size:100%;}
.customer a:hover{ background-color:#C9231B; overflow:visible}
.customer a:hover div{opacity:1;}
.customer a.rn_weixin div{top:-58px;height:130px;padding:15px 0px;}
.customer a.rn_weixin img{width:130px;height:130px;}

/* fdlink */
#fdlink{padding:0px 0px 20px}
#fdlink.container .title{padding:38px 0px 25px}
#fdlink.container .title h2{font-size:24px}
#fdlink ul{width:96%;min-height:42px;text-align:center;margin:0px auto 20px; line-height:195%}
#fdlink ul li{ float:left}
#fdlink ul a{margin:0px 8px; color:#666; font-size:14px}
#fdlink ul a:hover{ color:#C9231B; text-decoration:underline}

/* delay */
.delay1{animation-delay:0.1s;-moz-animation-delay:0.1s;-webkit-animation-delay:0.1s;-o-animation-delay:0.1s;}
.delay2{animation-delay:0.2s;-moz-animation-delay:0.2s;-webkit-animation-delay:0.2s;-o-animation-delay:0.2s;}
.delay3{animation-delay:0.3s;-moz-animation-delay:0.3s;-webkit-animation-delay:0.3s;-o-animation-delay:0.3s;}
.delay4{animation-delay:0.4s;-moz-animation-delay:0.4s;-webkit-animation-delay:0.4s;-o-animation-delay:0.4s;}
.delay5{animation-delay:0.5s;-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;-o-animation-delay:0.5s;}
.delay6{animation-delay:0.6s;-moz-animation-delay:0.6s;-webkit-animation-delay:0.6s;-o-animation-delay:0.6s;}
.delay7{animation-delay:0.7s;-moz-animation-delay:0.7s;-webkit-animation-delay:0.7s;-o-animation-delay:0.7s;}
.delay8{animation-delay:0.8s;-moz-animation-delay:0.8s;-webkit-animation-delay:0.8s;-o-animation-delay:0.8s;}
/*.ani{opacity:0.0!important;-webkit-transform:translateY(40px)!important;transform:translateY(40px)!important;-webkit-transition-timing-function:cubic-bezier(.41,.2,.38,.8)!important;transition-timing-function:cubic-bezier(.41,.2,.38,.8)!important;-webkit-transition-property:opacity,-webkit-transform!important;transition-property:opacity,transform!important;-webkit-transition-duration:.6s!important;transition-duration:.6s!important}
.ani.fadeInUp{opacity:1.0!important;-webkit-transform:translateY(0) translateZ(0)!important;transform:translateY(0) translateZ(0)!important}
*/
.ani {-webkit-animation-duration:0.6s;animation-duration: 0.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;opacity: 0;-webkit-animation-timing-function:cubic-bezier(.41,.2,.38,.8)!important;animation-timing-function:cubic-bezier(.41,.2,.38,.8)!important;}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}