@charset "utf-8";
/* CSS Document */
 @import url("owl.carousel.min.css");
 @import url("reset.css");
 @import url("header.css");
 @import url("footer.css");
 @import url("gotop.css");
 @import url("rwd.css");
 

/* banner */
#banner img{display:block; width:100%; height:auto;}

/* container */
#container{position:relative; width:90%; max-width:1120px; margin:0 auto; padding:20px 0; opacity:0; animation:container 1s .2s forwards;min-height:50vh; }

@keyframes container{
from{top:100px; opacity:0;}
to{top:0; opacity:1;}
}

/* path */
#path{margin-bottom:25px; font-size:14px; color:#666; letter-spacing:1px;}
#path a{color:#666; transition:all .3s;}
#path a:hover{color:#000;}
#path .home:before{content:""; display:inline-block; width:24px; height:24px; margin-right:15px; background:url(../images/path_icon.png); vertical-align:middle;} 
#path span.focus{color:#a5a5a5;}
#path span:before{content:"/"; padding:0 15px;}

/* main-title */
#main-title{position:relative; margin-bottom:35px; padding-right:150px;}
#main-title span{display:inline-block; padding:0 10px; background:#f7b41f; border-left:5px solid #eb6800; font-size:36px; color:#FFF; font-weight:bold;}

/* page */
#page{padding-top:50px; font-size:16px; line-height:30px; text-align:center;}
#page a{display:inline-block; width:30px; margin:0 3px; border-radius:50%; color:#666; transition:all .3s;}
#page a.num{color:#666;}
#page a.num:hover{background:#e6e4e3;}
#page a.num.active{background:#ac0c06; color:#FFF;}
#page a.first ,
#page a.prev ,
#page a.next , 
#page a.last{background:url(../images/page.png); text-indent:-9999px;}
#page a.first{background-position:left top;}
#page a.prev{background-position:-30px top;}
#page a.next{background-position:-60px top;}
#page a.last{background-position:right top;}
#page a.first:hover ,
#page a.prev:hover ,
#page a.next:hover , 
#page a.last:hover{background-color:#e6e4e3;}
#page select{display:none; width:100px; height:30px; padding:5px; font-size:16px; color:#666; box-sizing:border-box;}

/* font-resize */
#font-resize{position:absolute; right:0; top:10px;}
#font-resize a{display:inline-block; width:34px; height:34px; margin:0 5px; background:url(../images/font_resize.png) #a5a5a5; border-radius:50%; text-indent:-9999px; transition:all .3s;}
#font-resize a.small{background-position:left top;}
#font-resize a.medium{background-position:center top;}
#font-resize a.large{background-position:right top;}
#font-resize a:hover ,
#font-resize a.active{background-color:#333;}

/* keyword */
#keyword{position:relative; float:right; max-width:230px; padding-right:40px; box-sizing:border-box;}
#keyword input{display:block; width:100%; height:40px; padding:5px 15px; background:none; border:none; border-bottom:1px solid #5c5c5c; font-size:15px; color:#333; letter-spacing:.5px; box-sizing:border-box;}
#keyword button{position:absolute; right:0; top:0; width:40px; height:40px; background:url(../images/search.png) center center no-repeat; border:none; text-indent:-9999px; transition:all .3s;}
#keyword button:hover{opacity:.6;}

/* editor */
#editor{min-height:300px; margin:20px 0 50px 0; font-size:100%; color:#555; letter-spacing:1px; line-height:30px;}
#editor.product{min-height:inherit;}
#editor.small{font-size:80%;}
#editor.medium{font-size:100%;}
#editor.large{font-size:120%;}
#editor img{display:block; max-width:100%; height:auto;}
#editor a:hover{ transition:all .3s; opacity:.6;}

/* back */
#back{display:block; width:100px; height:100px; margin:50px auto 0 auto; background:#333; border-radius:50%; font-size:16px; color:#FFF; line-height:100px; letter-spacing:1px; text-align:center; transition:all .3s;}
#back:hover{background:#999;}

/* about */
#about .wrap{position:relative; margin-bottom:4.375em; padding-right:265px;}
#about .wrap:before{content:""; position:absolute; right:0; top:0; display:block; width:225px; height:481px; background:url(../images/upload/about.png);}
#about .wrap h2 ,
#about .wrap h3{font-size:1.375em; line-height:2.813em; letter-spacing:1px; font-style:italic;}
#about .wrap h2{color:#9a0b07;}
#about .wrap h3{color:#000;}
#about .wrap p{padding-top:1.875em; font-size:1em; color:#666; line-height:1.875em; letter-spacing:1px;}

#about .year{margin-bottom:50px; padding:0 30px; box-sizing:border-box;}
#about .year .item{position:relative; padding:20px 20px;}
#about .year .item:before{content:""; position:absolute; left:0; top:97px; display:block; width:100%; height:1px; background:#bcb0b6;}
#about .year .item dt{position:relative; width:135px; height:135px; margin:0 auto 30px auto; text-align:center; cursor:crosshair; box-sizing:border-box;}
#about .year .item dt span{position:relative; display:block; font-family:"Times New Roman", Times, serif; font-size:30px; color:#d9261e; letter-spacing:.5px; transition:all .3s; z-index:1;}
#about .year .item dt:before{content:""; position:relative; display:block; width:45px; height:45px; margin:30px auto 10px auto; background:url(../images/upload/year.png); z-index:1;}
#about .year .item dt:after{content:""; position:absolute; left:0; top:-20px; display:block; width:100%; height:100%; background:#363435; border-radius:10px; transform:rotate(45deg); -webkit-transform:rotate(45deg); transition:all 1s; z-index:0}

#about .year .year-1:before{width:50%; left:50%;}
#about .year .year-6:before{width:50%;}

#about .year .year-1 dt:before{background-position:left top;}
#about .year .year-2 dt:before{background-position:-45px top;}
#about .year .year-3 dt:before{background-position:-90px top;}
#about .year .year-4 dt:before{background-position:-135px top;}
#about .year .year-5 dt:before{background-position:-180px top;}
#about .year .year-6 dt:before{background-position:right top;}

#about .year dd{text-align:center;}
#about .year dd h2{margin-bottom:25px; font-size:24px; color:#000; letter-spacing:1px; font-weight:normal; font-style:italic;}
#about .year dd p{font-size:15px; color:#666; line-height:30px; letter-spacing:1px; transition:all .3s;}

#about .year .item:hover dt span{color:#FFF;}
#about .year .item:hover dt:after{background:#d9261e; transform:rotate(135deg); -webkit-transform:rotate(135deg);}
#about .year .item:hover dd p{color:#999;}

#about .year .owl-nav > div{position:absolute; top:50%; width:20px; height:33px; margin-top:-20px; background:url(../images/arrow.png); text-indent:-9999px; transition:all .3s}
#about .year .owl-nav .owl-prev{left:0; background-position:left top;}
#about .year .owl-nav .owl-next{right:0; background-position:right top;}
#about .year .owl-nav > div:hover{opacity:.6;}

#about .more{text-align:center;}
#about .more p{margin-bottom:20px; font-size:20px; color:#363435; line-height:30px; letter-spacing:1px; font-weight:bold; font-style:italic;}
#about .more a{display:block; width:280px; margin:0 auto; background:#363435; border-radius:30px; font-size:18px; color:#FFF; line-height:65px; letter-spacing:1px; transition:all .3s;}
#about .more a:after{content:">"; padding-left:5px;}
#about .more a:hover{background:#d9261e;}

/* product */
#product{overflow:hidden;}
#product dl{float:left; width:32.33%; margin:1% 0; overflow:hidden;}
#product dl:nth-child(3n-1){margin:1% 1.5%;}
#product dl a{position:relative; display:block;}
#product dl a:before{content:""; position:absolute; left:20px; right:20px; top:20px; bottom:20px; display:block; border:1px solid #FFF; opacity:0; transform:scale(1.5,1.5); -webkit-transform:scale(1.5,1.5); transition:all .3s; z-index:1;}
#product dl a:after{content:""; position:absolute; right:20px; bottom:20px; display:block; width:38px; height:38px; background:url(../images/link.png); border:1px solid #FFF; box-sizing:border-box; opacity:0; transition:all .3s .3s; z-index:2}
#product dt{position:relative;}
#product dt img{display:block; width:100%; height:auto;}
#product dt p{position:absolute; left:0; bottom:0; width:100%; padding:10px 45px 10px 10px; background:rgba(49,46,51,.7); font-size:18px; color:#FFF; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box; transition:all 1s;}
#product dl.new dt p:after{content:"N"; position:absolute; right:10px; top:10px; width:25px; height:25px; background:#d9261e; border-radius:50%; font-size:12px; color:#FFF; line-height:25px; letter-spacing:0; font-weight:bold; font-style:italic; text-align:center;;}
#product dt:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(49,46,51,.7); opacity:0; transition:all .3s;}
#product dd{position:absolute; left:0; top:100%; width:100%; padding:0 60px; color:#FFF; text-align:center; letter-spacing:1px; box-sizing:border-box; opacity:0; transition:all .3s .3s;}
#product dd h2{font-size:24px; font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#product dd p{height:48px; margin:10px auto; overflow:hidden; font-size:17px; line-height:24px;}
#product dd:after{content:"- Read more -"; font-size:13px; color:rgba(255,255,255,.8); font-style:italic;}

#product dl a:hover:before{transform:scale(1,1); -webkit-transform:scale(1,1); opacity:1;}
#product dl a:hover:after{opacity:1;}
#product dl a:hover dt p{bottom:-100px;}
#product dl a:hover dt:before{opacity:1;}
#product dl a:hover dd{top:50%; opacity:1;}

/* product-info */
#product-info{margin-bottom:30px; padding-bottom:60px; border-bottom:1px solid #333;}
#product-info .slide{position:relative; max-width:900px; margin:0 auto 20px auto; padding:0 105px; box-sizing:border-box;}
#product-info .slide .owl-nav > div{position:absolute; top:50%; width:48px; height:70px; margin-top:-35px; background:url(../images/product_info_arrow.png); text-indent:-9999px; transition:all .3s;}
#product-info .slide .owl-nav .owl-prev{left:0; background-position:left top;}
#product-info .slide .owl-nav .owl-next{right:0; background-position:right top;}
#product-info .slide .owl-nav > div:hover{opacity:.6;}
#product-info .slide .owl-dots{padding:15px 0; text-align:center;}
#product-info .slide .owl-dots .owl-dot{display:inline-block; width:14px; height:14px; margin:0 8px; background:#b8b8b8; border-radius:50%;}
#product-info .slide .owl-dots .owl-dot.active{background:#ac0c06;}

#product-info .title{font-size:30px; color:#333; letter-spacing:1px; text-align:center;}
#product-info .title span{display:inline-block; padding-bottom:15px; border-bottom:1px solid #333;}
#product-info .editor{padding:20px 0; font-size:16px; color:#666; line-height:30px; letter-spacing:1px; text-align:center;}
#product-info .link{text-align:center;}
#product-info .link a{display:inline-block; padding:10px 20px; border:1px solid #333; border-radius:20px; font-size:14px; color:#333; transition:all .3s;}
#product-info .link a:before{content:""; display:inline-block; width:14px; height:14px; margin-right:10px; background:url(../images/url.png); vertical-align:middle;}
#product-info .link a:hover{background:#FFF;}

#other-product .title{margin-bottom:20px; font-size:30px; color:#333; letter-spacing:1px;}


/* editor */
#editor iframe{ width:100%;}
.editor img{ max-width:100%; height:auto;}
.editor iframe{ width:100%;}



/* news */
#news .main{position:relative; margin-bottom:25px; padding-left:430px; box-shadow:3px 3px 0 rgba(0,0,0,.2);}
#news .main dt{position:absolute; left:0; top:0; width:430px;}
#news .main dt img{display:block; width:100%; height:auto;}
#news .main dd{min-height:271px; padding:0 30px; background:#FFF;}
#news .main dd h2{position:relative; margin-bottom:20px; padding-left:70px; font-size:22px; color:#ac0c06; letter-spacing:1px;}
#news .main dd h2 span{display:block; padding-top:10px; font-size:14px; color:#6f7277; font-weight:normal;}
#news .main dd h2:before{content:""; position:absolute; left:0; top:0; display:block; width:60px; height:60px; background:url(../images/news_icon.png) center center no-repeat #ac0c06;}
#news .main dd p{font-size:16px; color:#222; line-height:30px;}
#news .main dd .more{display:inline-block; margin:20px 0; padding:10px 20px; border:1px solid #666; border-radius:20px; font-size:13px; color:#666; transition:all .3s;}
#news .main dd .more:after{content:">"; margin-left:5px;}
#news .main dd .more:hover{background:#666; color:#FFF;}

#news .list{overflow:hidden;}
#news .list ul{width:48%;}
#news .list ul.left{float:left;}
#news .list ul.right{float:right;}
#news .list li{position:relative; padding-left:130px; border-bottom:1px solid #b5b5b5; border-top:1px solid #FFF; line-height:60px; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box;}
#news .list li:first-child{border-top:none;}
#news .list li span{position:absolute; left:0; top:0; font-size:14px; color:#838283;}
#news .list li a{font-size:17px; color:#333; transition:all 1s;}
#news .list li a:hover{color:#ac0c06; letter-spacing:3px;}

/* contact */
#contact{}
#contact .editor{margin-bottom:50px; padding-bottom:50px; border-bottom:1px dotted #aaa9a9;}
#contact .editor .info{text-align:center;}
#contact .editor .info i{display:block; font-size:22px; color:#ac0c06; line-height:36px; letter-spacing:1px; font-weight:bold; text-align:center;}

#contact .editor .info .wrap{max-width:768px; margin:0 auto; padding:35px 0; overflow:hidden;}
#contact .editor .info .wrap li{float:left; display:block; width:48%; margin:0 1%; padding:15px 0; border:3px solid #999; letter-spacing:1px; box-sizing:border-box;}
#contact .editor .info .wrap li h2{font-size:12px; color:#999;}
#contact .editor .info .wrap li h2:before{content:""; display:inline-block; width:20px; height:20px; margin-right:10px; background:url(../images/footer_icon.png); vertical-align:middle;}
#contact .editor .info .wrap li.phone h2:before{background-position:left top;}
#contact .editor .info .wrap li.time h2:before{background-position:right top;}
#contact .editor .info .wrap li p{font-size:36px; color:#555;}
#contact .editor .info .wrap li span{font-size:15px; color:#666;}
#contact .editor .info .wrap li span:before{content:"[ ";}
#contact .editor .info .wrap li span:after{content:" ]";}

#contact .editor .info > h2{margin-bottom:25px; font-size:30px; color:#111; letter-spacing:1px; font-weight:normal;}
#contact .editor .info > h2:before ,
#contact .editor .info > h2:after{content:"/"; padding:0 20px; color:#999;}

#contact .editor .info p{font-size:18px; color:#333;}
#contact .editor .info p span{display:inline-block; margin:0 10px; font-weight:bold;}
#contact .editor .info p span:before{content:""; position:relative; top:-3px; display:inline-block; width:31px; height:31px; margin-right:5px; background:url(../images/contact.png); vertical-align:middle;}
#contact .editor .info p span.line{color:#40bc37;}
#contact .editor .info p span.line:before{background-position:left top;}
#contact .editor .info p span.skype{color:#369db6;}
#contact .editor .info p span.skype:before{background-position:right top;}
#contact .editor .info p b{color:#ac0c06;}

#contact form h2{margin-bottom:25px; font-size:30px; color:#111; letter-spacing:1px; font-weight:normal; text-align:center;}
#contact form h2:before ,
#contact form h2:after{content:"/"; padding:0 20px; color:#999;}
#contact form p{margin-bottom:50px; font-size:18px; color:#333; letter-spacing:1px; text-align:center;}
#contact form ul{overflow:hidden;}
#contact form li{position:relative; width:46%; padding:15px 0 15px 110px; box-sizing:border-box;}
#contact form li:nth-child(odd){float:left;}
#contact form li:nth-child(even){float:right;}
#contact form li span{position:absolute; left:0; top:23px; display:block; font-size:18px; color:#333;}
#contact form li input{display:block; width:100%; padding:10px 30px 10px 10px; background:none; border:none; border-bottom:1px solid #999; font-size:18px; color:#333; box-sizing:border-box;}

#contact form li.verify{padding-left:310px;}
#contact form li.verify .code{position:absolute; top:15px; left:110px; display:inline-block; width:180px; height:40px; transition:all .3s;}
#contact form li.verify .code img{display:block; width:100%; height:100%; border:1px solid #999;}
#contact form li.verify .code:hover{opacity:.6;}

#contact form li.msg{width:100%; padding-left:0;}
#contact form li.msg span{position:static; margin-bottom:10px;}
#contact form li textarea{display:block; width:100%; height:150px; padding:10px; border:1px solid #999; font-size:18px; color:#333; box-sizing:border-box;}

#contact form li.need input ,
#contact form li.need textarea{background:url(../images/alert.png) 98% center no-repeat transparent;}
#contact form li.need.verify input{background-position:95% center;}
#contact form li.need.msg textarea{background-position:99% center;}

#contact form .btn{padding-top:40px; text-align:center;}
#contact form .btn button{display:inline-block; width:160px; margin:10px 5px; background:#363435; border:none; border-radius:25px; font-size:16px; color:#FFF; line-height:40px; letter-spacing:1px; transition:all .3s;}
#contact form .btn button:hover{background:#eb6800;}






/* RWD */
@media screen and (max-width:1100px){
/* header */
#navigation > li > a{padding:25px 15px;}
/* news */
#news .main{padding:0; box-shadow:none;}
#news .main dt{position:static; width:100%;}
}

@media screen and (max-width:1000px){
/* header */
#navigation{display:none;}
#top-link{display:none;}
/* mobile */
#mobi-btn{display:block;}
/* about */
#about .year{padding:0;}
/* contact */
#contact form li{float:none !important; width:100%;}
#contact form li.need.verify input{background-position:97% center;}
#contact form li.need.msg textarea{background-position:98% center;}
}

@media screen and (max-width:768px){
/* footer */
#footer{padding-top:15px;}
#footer .links{display:none;}
/* gotop */
#gotop{margin:30px auto;}
/* editor */
#editor{min-height:inherit;}
/* about */
#about .wrap{padding:0}
#about .wrap:before{display:none;}
/* product */
#product dl{width:49%;}
#product dl:nth-child(3n-1){margin:1% 0;}
#product dl:nth-child(odd){margin-right:1%;}
#product dl:nth-child(even){margin-left:1%;}
/* product-info */
#product-info .slide{padding:0;}
#product-info .slide .owl-nav{display:none;}
/* news */
#news .list ul{float:none !important; width:100%;}
/* contact */
#contact .editor .info .wrap li{float:none; width:100%; max-width:375px; margin:10px auto;}
}

@media screen and (max-width:600px){
/* main-title */
#main-title{padding-right:0;}
#main-title span{padding:10px; font-size:25px; line-height:35px;}
/* font-resize */
#font-resize{position:static; margin-top:30px;}
/* keyword */
#keyword{float:none; margin-top:30px; max-width:none;}
/* product-info */
#product-info .item{ min-height:auto;}
#product-info .item img{ min-height:260px;}
}

@media screen and (max-width:480px){
/* banner */
#banner{display:none;}
/* page */
#page .num{display:none;}
#page select{display:inline-block;}
#keyword{float:none; margin-top:30px; max-width:none;}
/* product */
#product dl{float:none; width:100%; margin:15px auto !important;}
/* contact */
#contact form li.verify{padding-left:110px;}
#contact form li.verify .code{position:static; width:150px;}
}