@charset "utf-8";

@import url("owl.carousel.min.css");

/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , "微軟正黑體";}
input[type="number"]::-webkit-inner-spin-button ,
input[type="date"]::-webkit-inner-spin-button{-webkit-appearance:none;}
button{padding:0; cursor:pointer;}

body{background:#f5e6ce; overflow-x:hidden; font-family:arila,"微軟正黑體";}
#ascrail2000{z-index:2 !important;}
#ascrail2000-hr{display:none;}
#all.active{position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}

/* header */
#header{position:relative; width:96%; margin:0 auto; padding-right:130px; box-sizing:border-box;}
#header:after{content:""; display:block; clear:both;}
#logo{float:left; width:254px; height:55px; margin-top:7px; background:url(../images/logo.png) no-repeat; text-indent:-9999px; background-size: 100%;}
#navigation{float:right;}
#navigation > li{position:relative; display:inline-block;}
#navigation > li > a{position:relative; display:block; padding:25px 20px; font-size:18px; color:#5d5d5d; letter-spacing:1px; text-align:center; transition:all .3s;font-weight: bold;}
#navigation > li > a:before{content:""; position:absolute; left:0; bottom:0; display:block; width:0; height:6px; background:#7b5634; transition:all .3s;}
#navigation > li.sub > a:after{content:""; display:inline-block; width:0; height:0; margin-left:10px; border-style:solid; border-width:5px 3.5px 0 3.5px; border-color:#dfcdaa transparent transparent transparent; vertical-align:middle;}

#navigation > li:hover > a{color:#252525;}
#navigation > li:hover > a:before{width:100%;}
#navigation > li.sub:hover > a:after{border-top-color:#dfcdaa;}
#navigation > li:hover .sub-menu > li > a{animation:link 1s .3s; -webkit-animation:link 1s .3s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}

#navigation .sub-menu{position:absolute; left:0; top:100%; display:none; width:100%; background:#FFF; z-index:2;}
#navigation .sub-menu > li{position:relative;}
#navigation .sub-menu > li > a{display:block; padding:15px 20px 15px 10px; background:#faf7f4; border-bottom:1px solid #c3b69e; font-size:16px; color:#7b5634; letter-spacing:.5px; opacity:0; transition:all .3s;}
#navigation .sub-menu > li.sub > a:after{content:""; position:absolute; right:10px; top:50%; display:block; width:0; height:0; margin-top:-3.5px; border-style:solid; border-width:3.5px 0 3.5px 5px; border-color:transparent transparent transparent #c3b69e; transition:all .3s;}
#navigation .sub-menu > li:last-child > a{border:none;}

#navigation .sub-menu > li:hover > a{background:#dccdb2;}
#navigation .sub-menu > li:hover > a:after{border-left-color:#FFF;}
#navigation .sub-menu > li:hover .third-menu > a{animation:link 1s .3s; -webkit-animation:link 1s .3s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}

#navigation .third-menu{position:absolute; left:100%; top:0; display:none; width:100%; background:#FFF; z-index:2;}
#navigation .third-menu a{display:block; padding:15px 10px; background:#b8a98d; border-bottom:1px solid #9e9178; font-size:16px; color:#FFF; letter-spacing:.5px; opacity:0; transition:all .3s; transition:all .3s;}
#navigation .third-menu a:last-child{border:none;}
#navigation .third-menu a:hover{background:#FFF; color:#666;}

@keyframes link{
from{opacity:0;}
to{opacity:1;}	
}

@-webkit-keyframes link{
from{opacity:0;}
to{opacity:1;}	
}

#top-link{position:absolute; right:0; top:20px; overflow:hidden}
#top-link a{float:left; display:block; width:30px; height:30px; margin:0 5px; background:url(../images/top_link.png) #666; border-radius:50%; text-indent:-9999px; transition:all .3s;}
#top-link a.line{background-position:left top;}
#top-link a.fb{background-position:center top;}
#top-link a.home{background-position:right top;}
#top-link a:hover{background-color:#312e33; transform:rotate(360deg); -webkit-transform:rotate(360deg);}

/* mobile */
#mask{position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:9;}

#mobi-btn{position:absolute; right:0; top:17px; display:none; width:40px; height:40px; background:#312e33; border-radius:50%;}
#mobi-btn:before ,
#mobi-btn hr ,
#mobi-btn:after{content:""; position:absolute; left:10px; display:block; width:20px; height:3px; margin:0; background:#FFF; border:none; border-radius:3px;}
#mobi-btn:before{top:11px;}
#mobi-btn hr{top:18px;}
#mobi-btn:after{top:25px;}

#mobile{position:absolute; left:-250px; top:0; width:250px; min-height:100%; background:url(../images/upload/index_about_bg.jpg); z-index:10;}

#mobile .link{padding:20px 0; text-align:center;}
#mobile .link a{position:relative; display:inline-block; width:40px; height:40px; margin:0 10px; background: #000; border-radius:50%; text-indent:-9999px; transition:all .3s;}
#mobile .link a:before{content:""; position:absolute; left:5px; top:5px; display:block; width:30px; height:30px; background:url(../images/top_link.png);}
#mobile .link a.line:before{background-position:left top;}
#mobile .link a.fb:before{background-position:center top;}
#mobile .link a.home:before{background-position:right top;}

#mobile .navi a{display:block; padding:15px 20px; font-size:16px;}

#mobile .navi > li > a{position:relative; border-bottom:1px solid #423f45; color:#FFF;}
#mobile .navi > li.sub > a{padding-right:30px;}
#mobile .navi > li.sub > a:after{content:""; position:absolute; right:20px; top:50%; display:block; width:0; height:0; margin-top:-5px; border-style:solid; border-width:5px 0 5px 7px; border-color:transparent transparent transparent #666; transition:all .3s;}
#mobile .navi li.sub.active > a:after{transform:rotate(90deg);}

#mobile .navi .sub-menu{display:none; background:#333;}
#mobile .navi .sub-menu > li > a{position:relative; border-bottom:1px solid #5c5861; color:#FFF;}
#mobile .navi .sub-menu > li.sub > a{padding-right:30px;}
#mobile .navi .sub-menu > li.sub > a:after{content:""; position:absolute; right:20px; top:50%; display:block; width:0; height:0; margin-top:-5px; border-style:solid; border-width:5px 0 5px 7px; border-color:transparent transparent transparent #CCC; transition:all .3s;}

#mobile .navi .third-menu{display:none; background:#FFF;}
#mobile .navi .third-menu a{color:#312e33;}

/* footer */
#footer{margin-top:50px; border-top:1px solid #999;}
#footer .links{padding:15px 0; font-size:16px; letter-spacing:1px; text-align:center;}
#footer .links a{display:inline-block; margin:5px 0; color:#333; transition:all .3s;}
#footer .links a:after{content:"|"; display:inline-block; padding:0 30px; color:#CCC; cursor:default}
#footer .links a:last-child:after{display:none;}
#footer .links a:hover{color:#d9261e;}

#footer .copyright{font-size:13px; color:#787878; line-height:25px; text-align:center;}
#footer .copyright a{color:#c2c2c2; transition:all .3s;}
#footer .copyright a:hover{color:#999;}

#footer.active .contact li{animation:footer 1s forwards; -webkit-animation:footer 1s forwards;}

/* gotop */
#gotop ,
#gotop:before{display:block; width:63px; height:41px; background:url(../images/gotop.png);}
#gotop{position:relative; margin:50px auto; text-indent:-9999px;}
#gotop:before{content:""; position:absolute; left:0; top:0; transition:all .5s;}
#gotop:hover:before{transform:scale(3,3); -webkit-transform:scale(3,3); opacity:0;}

/* 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;}

@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;   font-size:36px; color:#5d5d5d; 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; display: none;}
#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:98%;}
#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:#ac0c06;}






/* RWD */
@media screen and (max-width:1100px){
/* header */
#navigation > li > a{padding:25px 10px;}
/* 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;}
}