@charset "utf-8";
/* CSS Document */
html, body {font-size: 12px;margin: 0px;padding: 0px;text-decoration: none;font-family:Arial;background: #fff;text-align: center;-webkit-text-size-adjust: none;}
a {	color: #666666;text-decoration: none;outline: 0px none; star:expression(this.onFocus=this.blur());}
a:hover, a:active { color: #ffa200;}
* { margin: 0px;padding: 0px;list-style: none;}
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0px;}
form {margin: 0px;}
img {border: 0px none;text-align-last: center;vertical-align: middle;_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);}
center {text-align: left;	color: #999;height: 50px;}
#dhtmltooltip {z-index: 100;visibility: hidden;	position: absolute;text-align: left;border: 1px solid #ccc;}
#clear, .clear {clear: both;float: none;background: none;width: inherit !important;	height: inherit !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0px;}
html::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #ddd;}
html::-webkit-scrollbar {width: 8px;background-color: #ddd;}
html::-webkit-scrollbar-thumb {background-color:#999;}
.fl-left{ float:left;}
.fl-right{ float:right;}


/*

head

-----------------------------------------------------------------*/
#head{ position:fixed; z-index:1001; width:100%;}
#head .wrap{ position:relative; width:1200px; margin:0px auto;}
#head .wrap .logo{ position:absolute; z-index:999; left:0px; top:30px;}
#head .wrap .menu{ position:absolute; z-index:999; right:80px; top:30px; margin:0px; text-align:left;}
#head .wrap .menu>li{float:left; position:relative;}
#head .wrap .menu>li:after{position:absolute; left:0; width:0; height:3px; bottom:0; font-size:0; background:#FFA201; content:''; display:block; transition:all .18s;}
#head .wrap .menu>li.A:after{width:100%;}
#head .wrap .menu>li>a{font-size:16px; color:#979797; line-height:60px; display:inline-block; padding:0 20px; transition:line-height .35s,height .35s,color .25s;}
#head .wrap .menu>li.A>a{color:#FFA201;}
#head .wrap .menu>li>div{min-width:160px; background:#f7f7f7; box-shadow:0px 2px 3px rgba(0,0,0,.2); position:absolute; left:0; top:60px; display:none; transition:top .35s;}
#head .wrap .menu>li>div>a{display:block; height:45px; line-height:44px; border-bottom:1px solid #eee; padding:8px 50px 8px 20px; font-size:13px; transition:all .35s; white-space:nowrap; position:relative; overflow:hidden;}
#head .wrap .menu>li>div>a img{ height:100%; width:auto; margin-right:10px;}
#head .wrap .menu>li>div>a:after{content:''; display:block; width:20px; height:20px; position:absolute; background:url(../images/arrow.png?6) no-repeat center center; right:35px; top:22px; filter:alpha(opacity=0); opacity:0; transition:all .5s;}
#head .wrap .menu>li>div>a:last-child{border-bottom:0px none;}
#head .wrap .menu>li>div>a:hover{background:#FFA201; color:#fff; border-bottom:1px solid #fff;}
#head .wrap .menu>li>div>a:hover:after{right:20px; filter:alpha(opacity=60); opacity:.6;}
#head .wrap .menu>li>div>a:last-child:hover{border-bottom:0px none;}
#head .wrap .btn-search{ position:absolute; z-index:999; right:40px; top:50px; cursor:pointer;}
#head .wrap .btn-search img{ height:22px; width:auto;}
#head .wrap .btn-language{ position:absolute; z-index:999; right:0px; top:45px; cursor:pointer;}
#head .wrap .btn-menu{display:none;}
#head .bg{ position:absolute;z-index:1; left:0px; top:-65px; width:100%; height:60px; background:rgba(255,255,255,.9); box-shadow:0px 2px 3px rgba(0,0,0,.1);}
#menuWap{ display:none;}
#search{ display:none; position:fixed; z-index:99; left:50%; top:100px; width:1100px; margin-left:-550px;}
#search form{ width:200px; height:30px; float:right; border:1px solid #ddd; background:#fff; box-shadow:0px 2px 3px rgba(0,0,0,.2); overflow:hidden;}
#search input[type="text"]{float:left;height:30px;line-height:30px;padding-left:10px;width:80%;border:0px; font-family:微软雅黑; background:none;color:#666;box-sizing:border-box;overflow:hidden;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ccc;}
#search button{	float:left;width:20%;height:30px;border:none;background: url(../images/go.png) no-repeat center center;background-size:20px auto;color:#fff;cursor:pointer;box-sizing:border-box;overflow:hidden;}


@media only screen and (max-width: 900px){
  #head .wrap{ width:100%;}
  #head .wrap .logo{ left:0px; top:12px; width:100%; text-align:center;}
  #head .wrap .logo img{ height:36px; width:auto;}
  #head .wrap .menu{ display:none;}
  #head .wrap .btn-search{ right:auto; left:20px; top:20px;}
  #head .wrap .btn-menu{ display:block;position:absolute; z-index:1000; right:20px; top:20px;}
  #head .wrap .btn-menu img{ height:22px; width:auto;}
  #head .wrap .btn-language{ display:none;}
  #head .bg{ top:0px;}
  #search{ display:none; position:fixed; z-index:99; left:0%; top:60px; width:90%; margin-left:0; padding:5%;background: rgba(0,155,76,.9);}
  #search form{ width:100%; height:30px; float:right; border:1px solid #ddd; box-shadow:0px 2px 3px rgba(0,0,0,.2); overflow:hidden;}
  #menuWap {display:none;position:fixed;z-index: 999; left:0;top: 60px;width: 100%;height: auto;background: rgba(0,155,76,.9);box-shadow:0px 1px 2px rgba(0,0,0,.2);}
  #menuWap ul { overflow: hidden;}
  #menuWap ul>li { position:relative;display: block;width: 78%;padding: 15px 0px;text-align: left;margin: 0px auto;border-bottom: 1px solid rgba(255,255,255,.3);}
  #menuWap ul>li img{position:absolute;z-index:9;right:10px;top:18px;width:18px;height:auto;}
  #menuWap ul>li>a {display:block; font-size: 14px;padding:0px 5px; color:rgba(255,255,255,.8);}
  #menuWap ul>li.A>a{ color:rgba(255,255,255,.8) !important;}
  #menuWap ul>li>div{ display:none; padding:10px 0px;}
  #menuWap ul>li>div a{display:block;padding:5px;font-size:12px; color:rgba(255,255,255,.5);}
  #menuWap ul>li:last-child{ border:0px !important;}
  #menuWap .language{ background:#fff; width:100%; padding:5px 0px; text-align:center;}
  #menuWap .language a{ color:#ff3300;}
}






/* end*/



/*

banner

-----------------------------------------------------------------*/

#banner{background:#eee; height:auto; overflow:hidden;}
#banner .swiper-container{width:100%; height:100%;}
#banner .swiper-slide{ width:100%; height:100%; overflow:hidden; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#banner .swiper-slide img{max-width:none;}
#banner .mc-box{ position:absolute; z-index:999; width:700px; height:380px; margin-top:50px; text-align:left;}
#banner .ml240{margin-left:240px;}
#banner .ml50{margin-left:-240px;}
#banner .mc-box .t-name{ display:block; padding:10px 0px; font-size:16px;font-style: italic; text-transform:uppercase; color:#FFA201; opacity:.8;}
#banner .mc-box .t-ad{ display:block; padding:5px 0px; font-size:36px; font-weight:bold; text-transform:uppercase; color:#FFA201;}
#banner .mc-box .t-view{ padding:20px 0px;}
#banner .mc-box .t-view a{ display:inline-block; padding:13px 25px; background:rgba(255,255,255,.5); border:2px solid rgba(255,255,255,.3); color:#FFA201; font-size:14px;font-style: italic;transform: skew(-10deg); transition:all .35s;}
#banner .mc-box .t-view a:hover{ border:2px solid #FFA201; background:none;}
#banner .swiper-container-horizontal>.swiper-pagination-bullets{bottom:25px;}
#banner .swiper-pagination-bullet{width:13px; height:13px; background:#fff; opacity:1; transition:all .2s;}
#banner .swiper-pagination-bullet:hover{opacity:.5;}
#banner .swiper-pagination-bullet-active{background:#4db23f; opacity:1 !important;}
#banner .swiper-button-prev,#banner .swiper-button-next{width:50px; height:50px; background-size:50px 50px; transition:all .2s;}
#banner .swiper-button-prev,#banner .swiper-container-rtl .swiper-button-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAx0lEQVRoge3aMQrCQBRF0Y+4DxuX4VKzB7fgCrKBVDa2dilzLaKFiYIzIP85vlMGAu9CijBJhBCgYzYCh+w9VYCeZ33J/dtvDSsBDBGxX1w+Z2ypBgysDdm7ijhChSNUOEKFI1Q4QsWbiKKXwFTADri+iOiyt33sHjE6IpsjVDhChSOUsD6ykYnYZA9I0cyjFeEYXY5R5RhVLcZcmoiJaOQE5cExqhyjyjGqHKPKMar+IeaYvasKcFqE/M4XriXmH88mKn48uwHHhY37FtUzgAAAAABJRU5ErkJggg==');}
#banner .swiper-button-next,#banner .swiper-container-rtl .swiper-button-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAvklEQVRoge3aMQrCQBCF4cWLeAZ7j5o7eAVPkAuksrG1S+mfQkSM2WJEnLfL+7pAAvNDijDZUgKAIzDzMESelQKMvBuzZ3raBe+/rK4PwPSrYf4KmPjkmHSOUeUYVY5R5RhVvcWsPzKbjhk2Ym7APnu2sErM7JhsjlHlGFWOUVWJCa2aousgq+ni1XKECkeocISKniOurUW0v0lxhApHqHCECkeocISKXiJOzUeUsvkH6pw901d4HTy7I3bwbAFEQY4GwbRw2gAAAABJRU5ErkJggg==');}
#banner .swiper-button-prev:hover,#banner .swiper-button-next:hover{opacity:.6;}


@media (max-width:768px){
  #banner{ height:360px; }
  #banner .swiper-slide img{ flex:none; height:100%; width:auto; }
  #banner .swiper-button-prev,
  #banner .swiper-button-next{ display:none;}
  #banner .swiper-container-horizontal > .swiper-pagination-bullets{ bottom:16px; }
  #banner .swiper-pagination-bullet{ width:10px; height:10px; }
  #banner .mc-box{ width:70%; height:200px; margin-top:60px;}
  #banner .ml240, #banner .ml50{margin-left:0px;}
  #banner .mc-box .t-name{ display:none;}
  #banner .mc-box .t-ad{ font-size:20px;}
  #banner .mc-box .t-view{ padding:5px 0px;}
  #banner .mc-box .t-view a{ padding:5px 15px; border:1px solid rgba(255,255,255,.3); font-size:12px;}

}

@media (max-width:380px){
  #banner{ height:250px;}
  #banner .mc-box{ width:80%;}
  #banner .mc-box .t-ad{ font-size:16px;}
}
/* end*/


/*

main

-----------------------------------------------------------------*/
#main{ position:relative; width:100%; height:auto; margin:0px auto;}
#main .consultation{ position:absolute; z-index:10; width:1200px; height:130px; left:50%; margin-left:-600px; margin-top:-70px; background:#ece4d1; box-shadow: 0 15px 30px 0 rgba(0,0,0,.05);}
#main .consultation .text{ position:absolute; left:30px; top:45px; font-size:32px; font-weight:bold; color:#FFA201;}
#main .consultation .text img{ margin-right:12px; width:35px; height:auto;}
#main .consultation .btn{ position:absolute; right:30px; top:43px; text-align:right;}
#main .consultation .btn a{ display:inline-block; margin-left:5px; padding:12px 30px; background:#fff; color:#FFA201; font-size:16px; transition:all .35s;}
#main .consultation .btn a:hover{ background:#ccc;}
#main .consultation .btn a.A{ background:#FFA201 !important; color:#fff !important;}
#main .product{ width:100%; min-height:500px; margin:0px auto; background:#fff url("../images/main-product-bg.jpg") no-repeat top center;}
#main .product .tit{ width:1200px; margin:0px auto; padding:150px 0 50px 0; text-align:center;color:#FFA201; font-size:30px; font-weight:bold;}
#main .product .tit>span{ font-weight:normal;}
#main .product .text{ display:none; position:relative; width:1200px; padding:150px 0px; margin:0px auto;}
#main .product .text .text-left{ position:absolute; left:15px; text-align:left; color:#FFA201; font-size:40px; font-weight:bold;}
#main .product .text .text-left span{ font-weight:normal;}
#main .product .text .text-right{ position:absolute; right:30px; text-align:left; width:520px; color:#FFA201; padding-top:30px; font-size:16px; line-height:25px;}
#main .product .box-container{ position:relative; width:1200px; margin:0px auto; padding:30px 0px;}
#main .product .box-container .box{ float:right;position:relative; overflow:hidden;}
#main .product .box-container .purpose{ float:left; width:245px; padding:130px 0px; text-align:left; font-size:14px; color:#999; line-height:23px;}
#main .product .box-container .purpose h3{ display:block; padding:20px 0px; font-size:20px; font-weight:normal; color:#FFA201;}
#main .product .box-container .purpose a{ display:inline-block; font-size:16px; background:#ece4d1; color:#FFA201; padding:12px 30px; margin-top:30px; transition:all .35s;}
#main .product .box-container .purpose a:hover{ background:#FFA201; color:#fff;}
#main .product .box-container .bg{width:50%; height:260px; position: absolute; left:0px; bottom:0px;z-index:30;background:rgba(0,0,0,.5);}
#main .product .box-container .t1{ font-size:16px; color:#fff; text-align:left; padding:30px 50px;}
#main .product .box-container .t2{ font-size:34px; font-weight:700; color:#fff; text-align:left; text-transform:uppercase; padding:0px 50px;}
#main .product .box-container .box-pagination{ position:absolute; z-index:100; width:850px; right:0px; bottom:20px; text-align:left;}
#main .product .box-container .box-pagination .swiper-pagination-bullet{ width:15px; height:15px; margin-right:8px; opacity:1; background:none !important; border:2px solid #ffa200;}
#main .product .box-container .box-pagination .swiper-pagination-bullet-active{ background:#ffa200 !important;}
#main .application{ width:100%; height:580px; margin:0px auto;}
#main .application .box-container{ position:relative; margin:140px auto; overflow:hidden; background:#FFA201;}
#main .application .box-container .img{ float:left; width:69%; max-width:1300px; overflow:hidden;}
#main .application .box-container .img img{ width:100%; height:auto;}
#main .application .box-container .container{ position:relative; float:right; width:31%; height:580px;background:#FFA201 url("../images/application-bg.png") no-repeat top right;}
#main .application .box-container .container .icon{ background:rgba(255,255,255,.9); border-radius:100%; margin:140px auto 30px auto; width:100px; height:100px;}
#main .application .box-container .container .text{ width:70%; margin:20px auto 50px auto; color:rgba(255,255,255,.8); font-size:16px; line-height:25px;}
#main .application .box-container .container .text h3{ display:block; margin-bottom:10px; color:#ffa200;}
#main .application .box-container .container .view{ position:absolute; left:50%; bottom:130px; width:100px; margin-left:-50px;text-align:center; transition:all .35s;}
#main .application .box-container .container .view a{ display:block; font-size:14px; font-weight:normal; padding:10px 0px; color:rgba(255,255,255,.5); border-top:2px solid rgba(255,255,255,.5); border-bottom:2px solid rgba(255,255,255,.5); transition:all .35s;}
#main .application .box-container .container .view a:hover{ color:#ffa200; border-top:2px solid rgba(255,255,255,.8); border-bottom:2px solid rgba(255,255,255,.8);}
#main .application .box-container .container .view:hover{bottom:125px;}
#main .application .box-container .box-pagination{ position:absolute; z-index:100; right:0px; width:30%; height:80px; bottom:0px;}
#main .application .box-container .box-pagination .swiper-pagination-bullet{ width:12px; height:12px; margin:0px 5px; background:rgba(255,255,255,.3); opacity:1;}
#main .application .box-container .box-pagination .swiper-pagination-bullet-active{ width:12px; height:12px; margin:0px 3px; background:#ffa200;}
#main .about{ width:100%; margin:0px auto; padding:120px 0px; background:#f3f9f7;}
#main .about .wrap{ width:1200px; margin:0px auto;}
#main .about .wrap .container{ float:left; width:60%; text-align:left;}
#main .about .wrap .container .title{ padding:10px 0px;}
#main .about .wrap .container .title h2{ display:block; margin-top:20px; color:#FFA201; font-size:40px; font-weight:bold;}
#main .about .wrap .container .title h3{ display:block; padding:10px 0px; color:#FFA201; font-size:16px; font-weight:normal; text-transform:uppercase; opacity:.8;}
#main .about .wrap .container .text{ position:relative; padding:10px 0px; font-size:16px; line-height:28px; color:#777;}
#main .about .wrap .container .text p{ text-indent:2em; margin-bottom:20px;}
#main .about .wrap .container .text i{ font-size:60px; color:#ccc; position:absolute; top:15px; left:0px;}
#main .about .wrap .container .view{ text-align:left; padding:15px 0px;}
#main .about .wrap .container .view a{ display:inline-block; font-size:14px; background:#FFA201; color:#fff; padding:15px 30px; transition:all .35s;}
#main .about .wrap .container .view a:hover{ background:#ece4d1; color:#FFA201;}
#main .about .wrap .img{ position:relative; float:right; width:30%; text-align:right; box-shadow:0px 20px 30px rgba(0,0,0,.2);}
#main .about .wrap .img:after{ position:absolute; bottom:50px; right:0px; margin-right:-80px; width:180px; height:50px; line-height:50px; background: #ffa200; text-align:center; color:#fff; font-size:18px; content:"FRYIC TECH"}
#main .advantage{ width:100%; margin:0px auto; background:#fff; padding:100px 0px;}
#main .advantage .wrap{ width:1200px; margin:0px auto;}
#main .advantage .wrap .title{ float:left; width:35%; text-align:left;}
#main .advantage .wrap .title h2{ display:block; padding:0px; color:#FFA201; font-size:36px; font-weight:bold;}
#main .advantage .wrap .title h3{ display:block; padding:0px; color:#FFA201; font-size:36px; font-weight:normal;}
#main .advantage .wrap .title h4{ display:block; padding:30px 0px; color:#999; font-size:13px; font-weight:normal;}
#main .advantage .wrap .container{ width:50%; float:right; text-align:right;}
#main .advantage .wrap .container .item{ display:inline-block; float:left; width:33.3%; text-align:center; color:#bbb; font-size:14px;}
#main .advantage .wrap .container .item img{ display:block; margin:0px auto 10px auto;}
#main .feedback{ width:100%; height:700px; margin:0px auto; background:url("../images/main-feedback-bg.jpg") no-repeat; background-attachment:fixed; background-position:top center;}
#main .feedback .text{ width:600px; margin:0px auto; padding:125px 0px 50px 0px; font-size:14px; line-height:24px; color:#666;}
#main .feedback .text h2{ display:block; color:#FFA201; font-size:36px; margin-bottom:20px;}
#main .feedback .text h2 span{ font-weight:normal;}
#main .feedback .text a{ display:none;}
#main form{ width:770px;margin:0px auto;}
#main form input{ display:block;float:left; width:29.8%; border:0px; background:#fff; padding:12px 10px; margin-right:10px; margin-bottom:15px;}
#main form input:nth-child(3){ margin-right:0px;}
#main form textarea{  display:block; margin:15px auto; width:97%; height:110px; padding:10px;font-family:Arial;  border:0px; background:#fff;}
#main form a{ display:block; padding:12px 0px; background:#FFA201; color:#fff; font-size:14px; transition:all .35s;}
#main input::-webkit-input-placeholder, #main textarea::-webkit-input-placeholder { color: #ccc;}
#main form a:hover{ opacity:.9;}

@media only screen and (max-width: 1460px){
  #main .product .tit{ width:90%; padding:150px 0 30px 0;font-size:24px;}
  #main .product .tit>span{ font-weight:normal;}
  #main .application .box-container .container{ height:440px;}
  #main .application .box-container .container .icon{ margin:50px auto 30px auto;}
  #main .application .box-container .container .text{ font-size:14px; line-height:20px;}
  #main .application .box-container .container .view{ bottom:70px;}
  #main .application .box-container .container .view:hover{bottom:70px;}
  #main .application .box-container .box-pagination{ height:50px;}
}

@media only screen and (max-width: 900px){
  #main .consultation{ width:90%; height:120px; margin-left:-45%;margin-top:-30px;}
  #main .consultation .text{ position:relative; left:auto; top:auto; padding:20px 0px; font-size:20px;}
  #main .consultation .btn{ position:relative; right:auto; top:auto; text-align:center;}
  #main .product .text{ position:relative; width:90%; padding:150px 0px 20px 0px; margin:0px auto;}
  #main .product .text .text-left{ left:auto; font-size:20px;width:100%; margin:0px auto;}
  #main .product .text .text-right{ position:relative; right:auto; width:100%; padding-top:60px; font-size:12px; line-height:18px; margin:0px auto;}
  #main .product .box-container{ width:90%;}
  #main .product .box-container .box{ float:none;}
  #main .product .box-container .box img{ width:100%;height:auto;}
  #main .product .box-container .purpose{ position:absolute; z-index:999; left:20px; bottom:10px; float:none; width:100%; padding:0px;}
  #main .product .box-container .purpose h3{ display:none; padding:20px 0px; font-size:20px; font-weight:normal; color:#FFA201;}
  #main .product .box-container .purpose span{ display:none;}
  #main .product .box-container .purpose a{ display:inline-block; font-size:13px; background:#FFA201; color:#fff; padding:3px 10px; margin-top:0px; transition:all .35s;}
  #main .product .box-container .purpose a:hover{ background:#FFA201; color:#fff;}
  #main .product .box-container .bg{width:100%; height:100px;}
  #main .product .box-container .t1{ display:none;}
  #main .product .box-container .t2{ font-size:18px; padding:10px 20px;}
  #main .product .box-container .box-pagination{ width:100%; right:10px; bottom:16px; text-align:right;}
  #main .product .box-container .box-pagination .swiper-pagination-bullet{ width:10px; height:10px; margin-right:4px;}
  #main .application{ width:100%; height:auto; margin:0px auto;}
  #main .application .box-container{ margin:50px auto 0px auto;}
  #main .application .box-container .img{ float:none; width:100%;}
  #main .application .box-container .container{ padding:20px 0px; float:none; width:100%; height:400px;}
  #main .application .box-container .container .icon{ margin:0px auto 30px auto;}
  #main .application .box-container .container .icon img{width:100%; height:auto;}
  #main .application .box-container .container .text{ width:70%; margin:20px auto; font-size:14px; line-height:20px;}
  #main .application .box-container .container .text h3{ display:block; margin-bottom:10px; color:#ffa200;}
  #main .application .box-container .container .view{ position:relative; left:auto; bottom:auto; width:100px; margin:0px auto;text-align:center; transition:all .35s;}
  #main .application .box-container .container .view a{ font-size:12px;border:2px solid rgba(255,255,255,.5);}
  #main .application .box-container .box-pagination{ right:0px; width:100%; height:80px; bottom:0px; text-align:center;}
  #main .about{ width:100%; padding:30px 0px;}
  #main .about .wrap{ width:90%; margin:0px auto;}
  #main .about .wrap .container{ float:none; width:100%;}
  #main .about .wrap .container .title{ text-align:center;}
  #main .about .wrap .container .title h2{ font-size:30px;}
  #main .about .wrap .container .title h3{ font-size:12px;}
  #main .about .wrap .container .text{ font-size:14px; line-height:20px;}
  #main .about .wrap .container .view{ text-align:center; padding:15px 0px;}
  #main .about .wrap .container .view a{ display:inline-block; font-size:12px; background:#FFA201; color:#fff; padding:10px 30px; transition:all .35s;}
  #main .about .wrap .container .view a:hover{ background:#ece4d1; color:#FFA201;}
  #main .about .wrap .img{ display:none;}
  #main .advantage{ width:100%; }
  #main .advantage .wrap{ width:90%; margin:0px auto;}
  #main .advantage .wrap .title{ float:none; width:100%; text-align:center;}
  #main .advantage .wrap .title h2{ font-size:26px;}
  #main .advantage .wrap .title h3{ font-size:20px;}
  #main .advantage .wrap .title h4{ font-size:12px;}
  #main .advantage .wrap .container{ width:100%; float:none; text-align:center;}
  #main .advantage .wrap .container .item{ width:33.3%; font-size:12px;}
  #main .advantage .wrap .container .item img{ width:80%; height:auto;}
  #main .feedback{ width:100%; height:auto; }
  #main .feedback .text{ width:90%; padding:100px 0px; line-height:18px;}
  #main .feedback .text h2{ font-size:26px; margin-bottom:15px;}
  #main .feedback .text a{ display:block; width:140px; margin:10px auto; padding:6px 0px; background:#FFA201; color:#fff; font-size:12px; transition:all .35s;}
  #main form{ display:none;}
}

@media only screen and (max-width: 380px){
  #main .consultation{ height:150px;}
  #main .consultation .text{ position:relative; left:auto; top:auto; padding:20px 0px; font-size:18px;}
  #main .consultation .btn{ position:relative; right:auto; top:auto; text-align:center;}
  #main .consultation .btn a{ padding:8px 20px; font-size:14px; }
}
/* end*/



/*

location

-----------------------------------------------------------------*/

#location{ position:relative; z-index:99;width:100%; margin:0px auto; height:50px; margin-top:-50px; background:rgba(0,0,0,.3);}
#location .wrap{ width:1200px; margin:0px auto; position:relative;}
#location .wrap .title{ position:absolute; right:0;bottom:0px;background:#ffa200; color:#fff; font-size:20px; min-width:160px; padding:0px 20px; height:60px; line-height:60px;}
#location .wrap .title img{ display:inline-block; height:36px; width:auto; margin-right:5px;}
#location .wrap .path{ width:100%; margin:0px auto; text-align:left; font-size:13px; height:50px; line-height:50px; color:rgba(255,255,255,.9);}
#location .wrap .path a{ color:rgba(255,255,255,.9); transition:all .35s;}
#location .wrap .path a:hover{ text-decoration:underline;color:#ffa200;}
#location .wrap .path img{ display:inline-block; height:18px; width:auto; margin:0px 5px;}

@media only screen and (max-width: 900px){
  #location .wrap{ width:100%;}
  #location .wrap .title{ display:none;}
  #location .wrap .path{ width:90%;}
}


/* end*/


/*

title

-----------------------------------------------------------------*/

#title{ position:relative;width:100%; max-width:1200px; padding:50px 0px; background:url("../images/title-bar.png") repeat-x; background-position: center center; margin:30px auto; text-align:left;}
#title h2{ position:relative; display:inline-block; margin-left:10px; padding:0px 15px;font-size:30px; font-weight:normal; color:#ffa200; background:#fff;}
#title .logoname{position:absolute; right:5px; bottom:35px; opacity:.1;}

@media only screen and (max-width: 900px){
  #title{ width:90%;}
  #title h2{ font-size:25px;}
  #title .logoname{ height:12px; width:auto;}
}

/* end*/



/*

about

-----------------------------------------------------------------*/
#about{width:100%; max-width:1200px; margin:0px auto; padding-bottom:100px;}
#about .img{ float:right; margin:0px 30px;}
#about .text{ width:100%; text-align:left; padding:0px 5px;}
#about .text p{ font-size:14px; line-height:24px; margin-bottom:20px; color:#666;}

@media only screen and (max-width: 900px){
  #about{width:90%;}
  #about .img{ float:none; margin:0px 0px 30px 0px;}
}
/* end*/



/*

certificate

-----------------------------------------------------------------*/
#certificate{ display:none; width:100%; margin:0px auto; padding-bottom:100px; background:#ddd url("../images/certificate-bg.jpg") no-repeat; background-position:top center;}
#certificate .title{ text-align:center; margin:0px auto; width:800px; font-size:12px; color:#888; line-height:21px; padding:50px 0px;}
#certificate .title h3{ display:block; padding:15px 0px; color:#ffa200; font-size:35px; font-weight:normal;}
#certificate .box-wrap{ position:relative; width:100%;max-width:1200px; margin:0px auto; padding:20px 0px;}
#certificate .box-wrap .swiper-container{ width:1000px; margin:0px auto;}
#certificate .box-wrap .swiper-slide{ position:relative; background:#fff; box-shadow:3px 2px 5px rgba(0,0,0,0.2); overflow:hidden;}
#certificate .box-wrap .swiper-slide a:after{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5) url("../images/icon-zoom.png") no-repeat; background-position:50% 3%; background-size:50px auto; content:''; opacity:0; transition:all .35s;}
#certificate .box-wrap .swiper-slide img{ width:100%; height:auto; transition:all 2s;}
#certificate .box-wrap .swiper-slide:hover img{transform:scale(1.2);}
#certificate .box-wrap .swiper-slide:hover a:after{ opacity:1;background-position:50% 50%;}


@media only screen and (max-width: 900px){
  #certificate .title{ width:90%;}
  #certificate .title h3{ font-size:25px;}
  #certificate .title span{ display:none;}
  #certificate .box-wrap{ width:90%;}
  #certificate .box-wrap .swiper-container{ width:50%;}
  #certificate .swiper-button-next, #certificate .swiper-button-prev {width: 16px;height: 26px;-moz-background-size: 16px 26px;-webkit-background-size: 16px 26px;background-size: 16px 26px;}
}


/* end*/


/*

news

-----------------------------------------------------------------*/
#news{width:100%; max-width:1200px; margin:0px auto; padding-bottom:100px;}
#news a{ position: relative;display:inline-block; float:left;width: 22.8%; height:350px; border:1px solid #ddd; margin:1%;text-align: center; overflow:hidden; transition:all .35s;}
#news a .img{position:relative; float:none; width:100%; height:auto; margin:0px auto; overflow:hidden;}
#news a .img img{ width:100%; height:auto; transition:all 1.5s;}
#news a .img:after{ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; content:''; background:rgba(0,0,0,.5) url("../images/icon-plus.png") no-repeat; background-size:32px 32px; background-position:center center; transition:all .35s;}
#news a .container{ position: relative;float:none; width:90%; margin:20px auto 10px auto; text-align:left;}
#news a .container .name{ margin:15px auto; font-size:14px; font-weight:600; line-height:20px; color:#ffa200;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#news a .container .text{font-size:12px; color:#666; line-height:18px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
#news a .container .time{ position:relative; margin-top:-40px;}
#news a .container .time span{ display:inline-block; width:80px; height:28px; line-height:28px; text-align:center; background:#ffa200; color:#fff;}
#news a:hover .img:after{ opacity:1;}
#news a:hover .img img{transform:scale(1.5);}
#news a:hover{ box-shadow:0px 2px 5px rgba(0,0,0,.3); background:#f7f7f7; transform:translateY(-10px);}


@media only screen and (max-width: 900px){
  #news{ width:90%;}
  #news a{ width: 47.0%; height:260px;}
}

@media only screen and (max-width: 360px){
  #news a{ width: 100%; margin:0px auto 30px auto;height:auto;}
  #news a .container .text{ display:none;}
}






/* end*/




/*

products

-----------------------------------------------------------------*/
#products{width:100%; max-width:1200px; margin:0px auto; padding-bottom:100px;}
#products .catalog{ margin:0px auto;}
#products .catalog li {position: relative;display:inline-block; float:left;width: 23%; height:auto; margin:1%;text-align: center;}
#products .catalog li .img { position: relative; display: block;margin: 0px auto;width: 92%;height: auto;overflow: hidden;border: 1px solid rgba(0,0,0,0.1);background: rgba(255,255,255,1);text-align: center; transition:all .35s;}
#products .catalog li .img:after{ position:absolute; left:50%; bottom:0; width: 100%; height:0; margin-left:-50%; content:''; background:#ffa200 url("../images/icon-zoom.png") no-repeat; background-position: center center; background-size:24px auto; transition:all .35s;}
#products .catalog li .img img {display: inline-block;width: 100%;height: auto;margin: 0 auto; transition:all .35s;}
#products .catalog li .name { display: block;width: 90%;font-size: 14px;line-height: 20px;padding: 10px 0px;margin: 0px auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#products .catalog li:hover .img:after{ height:30px;}
#products .catalog li:hover .img img{ opacity:.8;}
#products .type{ border:1px solid #eee; background:#ffffee; text-align:center; color:#999; font-size:16px; padding:15px 0px; margin:20px auto;}
#products .type h3{ color:#ffa200; font-weight:normal; display:inline-block;}
#products .products{ margin:0px auto;}
#products .products li {position: relative;display:inline-block; float:left;width: 18%; height:auto; margin:1%;text-align: center; cursor:pointer; overflow:hidden;}
#products .products li a{ display:block;}
#products .products li:after{ position:absolute; left:0; top:0; width:100%; height:82.4%; border-right:0px;content:''; opacity:0; transition:all .35s;}
#products .products li .img { position: relative; display: block;margin: 0px auto;width: 99%;height: auto;overflow: hidden;border: 1px solid rgba(0,0,0,0.1);background: #ffa200;text-align: center; transition:all .35s;}
#products .products li .img:after{ position:absolute; right:0; top:0; width: 0; height:100%; content:''; background:rgba(0,0,0,0) url("../images/icon-zoom.png") no-repeat; background-position: center center; background-size:34px auto; transition:all .35s;}
#products .products li .img img {display: inline-block;width: 94%;height: auto;margin: 3% auto; transition:all .35s;}
#products .products li .name { display: block;width: 90%;font-size: 14px;line-height: 20px;padding: 10px 0px;margin: 0px auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#products .products li .drawing{ position:absolute; z-index:9; top:0; left:0; opacity:0; height:82.4%; background:#fff; border:2px solid rgba(0,155,76,1); border-left:0px; transition:all .35s;}
#products .products li .drawing img{ height:100%; width:auto;}
#products .products li:hover{ overflow:inherit;}
#products .products li:hover:after{ opacity:1;}
#products .products li:hover .name{ color:#ffa200;}
#products .products li:hover .img:after{ width:100%;}
#products .products li:hover .img img{ opacity:.8;}
#products .products li:hover .drawing{ left:99%; opacity:1;}
#products .products li:nth-child(5n):after{ border-left:0px;border-right:2px solid rgba(0,155,76,1);}
#products .products li:nth-child(5n) .drawing{ border-left:2px solid rgba(0,155,76,1); border-right:0px;}
#products .products li:nth-child(5n):hover .drawing{ right:99%; left:auto;}
#proview{ position: relative; width:80%; max-width: 1000px; margin:40px auto; padding-bottom:50px;}
#proview .return {position: absolute; bottom: -65px; right: 0; cursor: pointer;}
#proview .img{ margin: 0 auto;  text-align:left;}
#proview .img img{ display: block; margin: 0 auto; 
	/*border:1px solid #ddd; box-shadow:0px 2px 5px rgba(0,0,0,.3);*/
}
#proview .container{ float:right; width:550px; text-align:left;}
#proview .container .title{ padding:10px 0px;}
#proview .container .title h2{ color:#ffa200; font-size:30px; font-weight:bold;}
#proview .container .title a{ display:inline-block; font-size:12px; color:rgba(0,0,0,.5);}
#proview .container .drawing{ margin:0px auto;}
#proview .container .drawing img{ max-width:100%; width:auto;}
#proview .text{ margin:0px auto; padding:20px 0px;}
#proview .text table{ border-top:1px solid #ddd; border-left:1px solid #ddd;margin:0px auto; width:100%;}
#proview .text td{ color:#666; font-size:14px; padding:8px; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
#proview .text .tableWap{ overflow:hidden; overflow-x:auto;}
#proview .url{position:fixed; z-index:999; left:50%; bottom:0; width:50%; margin-left:-25%; text-align:center;}
#proview .url a{ display:inline-block; background:rgba(0,0,0,.5); height:50px; padding:0px 20px; color:#fff; transition:all .35s;}
#proview .url a img{ height:100%; width:auto;}
#proview .url a:hover{ background:rgba(0,0,0,.8);}
#proview .detail p {
  line-height: 2;
}
#proview .detail div {
  line-height: 2;
}


@media only screen and (max-width: 900px){
  #products{width:90%;}
  #products .catalog li {width: 48%; margin:1%;}
  #products .type{ font-size:12px;}
  #products .type h3{ color:#ffa200; font-weight:normal; display:inline-block;}
  #products .products li {width: 31.2%; margin:1%;}
  #proview{ width:90%; margin:20px auto; padding-bottom:30px;}
  #proview .img{ float:none; width:100%; text-align:center;}
  #proview .img img{ width:98.6%;}
  #proview .container{ float:none; width:100%; }
  #proview .container .title{ display:none;}

  #proview .url{position:fixed; z-index:999; left:50%; bottom:0; width:80%; margin-left:-40%; text-align:center;}
  #proview .url a{ display:inline-block; background:rgba(0,0,0,.5); height:30px; padding:0px 20px; color:#fff; transition:all .35s;}
  #proview .url a img{ height:100%; width:auto;}
  #proview .url a:hover{ background:rgba(0,0,0,.8);}
}

@media only screen and (max-width: 360px){
  #products .products{ margin:0px auto;}
  #products .products li {width: 48%; margin:1%;}
  #products .products li .img { width: 98.6%;}

}



/* end*/









/*

view

-----------------------------------------------------------------*/
#view{width:100%; max-width:1200px; margin:0px auto; padding-bottom:100px;}
#view .title{ font-size:21px; color:#ffa200; padding:20px;}
#view .time{ font-size:12px; color:#999; padding:10px;}
#view .text{ min-height:360px; font-size:14px; line-height:24px; margin:0px auto; padding:20px 10px; text-align:left; color:#666;}
#view .url{ margin:0px auto;text-align:center;}
#view .url a{ display:inline-block; background: rgba(0,155,76,.9); height:25px; padding:5px 20px; color:#fff; transition:all .35s;}
#view .url a img{ height:100%; width:auto;}
#view .url a:hover{ background:rgba(0,0,0,.8);}

@media only screen and (max-width: 900px){
  #view{width:90%;}
}
/* end*/




/*

service

-----------------------------------------------------------------*/


#service{width:100%; max-width:1200px; margin:0px auto; padding-bottom:100px;}
#service .img{ width:270px; text-align:center;}
#service .text{ width:880px; padding:5px 0px; text-align:left; font-size:14px; color:#666; line-height:18px;}
#service .text p{ margin-bottom:30px;}
#service .text strong{ color:#ffa200; font-size:18px; margin-bottom:5px;}

@media only screen and (max-width: 900px){
  #service{width:90%;}
  #service .img{ display:none;}
  #service .text{ width:100%; float:none;}
}

/* end*/






/*

feedback

-----------------------------------------------------------------*/


#feedback{width:100%; background:url("../images/feedback-bg.jpg") no-repeat; background-position:top center; background-size:cover cover; margin:0px auto; padding-bottom:100px;}
#feedback .wrap{ width:100%; max-width:1100px; padding:100px 0px 20px 0px; margin:0px auto;}
#feedback .img{ width:380px; text-align:left;}
#feedback form{ float:right; width:600px; padding:10px 0px; text-align:left;}
#feedback input, #feedback textarea{ display:block; width:450px; border:1px solid #ccc; background:#fff; padding:10px; margin-bottom:10px;}
#feedback .btnSubmit{ display:inline-block; padding:12px 30px; margin-top:10px; font-size:14px; background:#ffa200; color:#fff;}



@media only screen and (max-width: 900px){
  #feedback .wrap{ width:90%; padding:50px 0px;}
  #feedback .img{ display:none;}
  #feedback form{ float:none; width:100%;}
  #feedback input, #feedback textarea{ width:95.8%; padding:10px 2%;}
  #feedback .btnSubmit{ display:block; text-align:center;}
}




/* end*/






/*

contact

-----------------------------------------------------------------*/


#contact{width:100%; max-width:1200px; margin:0px auto; padding-bottom:100px;}
#contact .img{ width:45%; text-align:left;}
#contact .img img{width:100%; height:auto; margin-left:10px;}
#contact .text{ width:50%; text-align:left;}
#contact .text h2{ display:block; margin:10px 0px 25px 0px; font-size:30px; text-transform:uppercase; color:#ffa200;}
#contact .text p{ display:block; margin-bottom:10px;font-size:14px; line-height:21px; color:#666;}

@media only screen and (max-width: 900px){
  #contact{width:90%;}
  #contact .img{ float:none; width:100%;}
  #contact .img img{ margin:0px;}
  #contact .text{ float:none; width:100%;}
  #contact .text h2{ font-size:26px;}
}


/* end*/




/*

solution

-----------------------------------------------------------------*/


#solution{width:100%; max-width:1200px; margin:0px auto; padding-bottom:100px;}
#solution a{ position: relative;display:block; width:46%; float:left; margin:2%; overflow:hidden;background:#eee; transition:all .35s;}
#solution a .img{position:relative; float:none; width:100%; height:auto; margin:0px auto; overflow:hidden;}
#solution a .img img{ width:100%; height:auto; transition:all 1.5s;}
#solution a .container{ position: relative;float:none; width:90%; margin:20px auto 10px auto; text-align:left;}
#solution a .container .icon{ position:absolute; right:10px; bottom:60px; background:#fff; width:100px; height:100px; overflow:hidden; border-radius:100%; transition:all .35s;}
#solution a .container .name{ margin:15px auto; font-size:16px; font-weight:600; line-height:20px; color:#ffa200;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#solution a .container .text{padding-bottom:10px;font-size:12px; color:#666; line-height:18px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
#solution a:hover .img img{transform:scale(1.5);}
#solution a:hover{ box-shadow:0px 2px 5px rgba(0,0,0,.3); background:#ffa200; transform:translateY(-10px);}
#solution a:hover .container .name{ color:#fff;}
#solution a:hover .container .text{ color:rgba(255,255,255,.8);}
#solution a:hover .container .icon{ transform:rotate(20deg); }


@media only screen and (max-width: 900px){
  #solution{width:90%;}
  #solution a{ width:100%; float:none; margin:0px auto 20px auto!important;}
  #solution a .container .icon{ width:70px; height:70px; bottom:80px;}
  #solution a .container .icon img{ width:100%; height:auto;}
}


/* end*/






/*

quick

-----------------------------------------------------------------*/
#quick{ display:none; position:fixed; z-index:1000; right:0px; top:30%; background:rgba(0,0,0,.5); width:130px; height:110px; overflow:hidden; transition:all .35s;}
#quick .btn{ position:relative; text-align:right; padding:20px 15px; font-size:15px; color:#fff; line-height:20px; cursor:pointer;}
#quick .btn img{ position:absolute; right:90px; top:50px; width:20px; height:auto;animation: aniLeftright 1.5s infinite;}
#quick .btn .A{right:100px; transform: rotate(90deg);animation: aniTondown 1.5s infinite;}
#quick .container{ display:none; width:90%; margin:0px auto;}
#quick .container a{ display:block; width:49.5%; float:left; height:auto; padding:13px 0px; font-size:12px; color:#fff; border:1px solid rgba(255,255,255,.2); margin-top:-1px; margin-left:-1px; transition:all .35s;}
#quick .container a img{ display:block; width:100px; margin:0px auto; transition:all .35s;}
#quick .container a:hover{ background:rgba(255,255,255,.05);}
#quick .container a:hover img{ transform:scale(1.2);}
#quick:hover{ background:rgba(0,0,0,.6);}
@media only screen and (max-width: 900px){
  #quick{ right:-130px;}
}

@keyframes aniLeftright {
  0% {right:90px;}
  50% {right:95px;}
  100% {right:90px;}
}
@keyframes aniTondown {
  0% {top:50px;}
  50% {top:55px;}
  100% {top:50px;}
}
/* end*/




/*

page

-----------------------------------------------------------------*/

#page{ width:100%; max-width:1200px; margin:0px auto; color:#999; padding:0px 0px 100px 0px;}
#page .wap{ display:none;}

@media only screen and (max-width: 900px){
  #page{ width:90%;}
  #page .pc{ display:none;}
  #page .wap{ display:block; font-size:12px;}
  #page .wap .pagepn, #page .wap .thispage{ font-size:12px;}
}
/* end*/





/*

foot

-----------------------------------------------------------------*/
#foot{ position:relative; width:100%; min-height:500px; background:#ece4d1; margin:0px auto; padding:30px 0px;}
#foot .container{ position:relative; left:50%; margin-left:-600px; margin-top:-70px; width:1200px; height:320px; overflow:hidden; background:#f3f9f7;box-shadow: 0 15px 30px 0 rgba(0,0,0,.05);}
#foot .container h2{ display:block; color:#FFA201; font-size:36px; line-height:32px; margin-bottom:25px;}
#foot .container .sns{float:left; text-align:left; width:480px; padding:60px;}
#foot .container .sns a{ display:inline-block; width:36px; height:36px; margin:0px 5px; background:#FFA201; border-radius:100%; transition:all .35s;}
#foot .container .sns a img{ width:100%; height:auto;}
#foot .container .address{ float:left;text-align:left; width:210px; padding:60px; line-height:30px; font-size:16px; color:#888;}
#foot .container .call{ float:left;text-align:left; width:200px; padding:60px 60px 60px 0px; line-height:20px; font-size:14px; color:#888;}
#foot .container .call img{ width:40px; height:auto; margin-right:10px;}
#foot .container .call a{  display:inline-block;font-size:12px; color:#FFA201;}
#foot .logo{ width:600px; margin:0px auto; padding:50px 0px; font-size:14px; color:#777; line-height:20px; text-align:center;}
#foot .logo img{ display:block; margin:30px auto;}
#foot .copyright{ width:1200px; margin:0px auto; font-size:14px; color:#777; text-align:center; padding:30px; text-align:center; border-top:1px solid rgba(0,0,0,.1);}
#foot .copyright a{ color:#FFA201;}



@media only screen and (max-width: 900px){
  #foot{ min-height:auto; height:auto;}
  #foot .container{ width:90%;margin-left:-45%; margin-top:-70px;height:auto;}
  #foot .container h2{ font-size:21px; line-height:25px; margin-bottom:15px; text-align:center;}
  #foot .container .sns{ float:none;width:80%; padding:10%; text-align:center;}
  #foot .container .sns a{ width:26px; height:26px;}
  #foot .container .address{ display:none; float:none;width:80%; padding:10%; line-height:20px; font-size:12px; margin:0px auto;}
  #foot .container .call{ display:none; float:none;width:80%; padding:10%; line-height:20px; font-size:12px; margin:0px auto;}
  #foot .logo{ width:80%; padding:30px 0px; font-size:12px; line-height:16px;}
  #foot .logo img{ display:block; margin:20px auto; width:100%;  height:auto;}
  #foot .copyright{ width:90%; font-size:12px; padding:20px 0px;}
  #foot .copyright a{ display:block;}
}






/* end*/