@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:url(../images/footer_bg2.jpg) bottom no-repeat ; 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; margin:0 auto; padding-right:130px; box-sizing:border-box; background:url(../images/brillant.jpg) }

#header:after{content:""; display:block; clear:both;}

#logo{float:left; width:300px; height:35px; margin-left:15px; background:url(../images/logo.png) no-repeat; background-size:300px auto; text-indent:-9999px; cursor:pointer;    margin: 15px 0 0 20px;}

#header:before{ content:""; width:100%; height:5px; position:absolute; bottom:0;background: #bc3323; /* Old browsers */

background: -moz-linear-gradient(left, #bc3323 0%, #fb593f 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left, #bc3323 0%,#fb593f 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right, #bc3323 0%,#fb593f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc3323', endColorstr='#fb593f',GradientType=1 ); /* IE6-9 */}





#navigation{float:right;}

#navigation > li{position:relative; display:inline-block;}

#navigation > li > a{position:relative; display:block; padding:25px 30px; font-size:18px; color:#010101; letter-spacing:1px; text-align:center; transition:all .3s;}

#navigation > li > a:before{content:""; position:absolute; left:0; bottom:0; display:block; width:0; height:6px; background:#e94e3b; 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:#010101 transparent transparent transparent; vertical-align:middle;}



#navigation > li:hover > a{color:#e94e3b;}

#navigation > li:hover > a:before{width:100%;}

#navigation > li.sub:hover > a:after{border-top-color:#e94e3b;}

#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:#fff; border-bottom:1px solid #ccc; font-size:16px; color:#000000; 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 #666; transition:all .3s;}

#navigation .sub-menu > li:last-child > a{border:none;}



#navigation .sub-menu > li:hover > a{background:#b5b5b6; color:#fff;}

#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:262px; background:#FFF; z-index:2;}

#navigation .third-menu a{display:block; padding:15px 10px; background:#fff; border-bottom:1px solid #ccc; font-size:16px; color:#000000; letter-spacing:.5px; opacity:0; transition:all .3s; transition:all .3s; line-height: 25px;}

#navigation .third-menu a:last-child{border:none;}

#navigation .third-menu a:hover{background:#b5b5b6; color:#fff;}



@keyframes link{

from{opacity:0;}

to{opacity:1;}	

}



@-webkit-keyframes link{

from{opacity:0;}

to{opacity:1;}	

}



#top-link{position:absolute; right:15px; top:20px; overflow:hidden}

#top-link a{float:left; display:block; width:30px; height:30px; margin:0 5px; background:url(../images/top_link.png) #e94e3b; 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:#333; 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:15px; top:17px; display:none; width:40px; height:40px; background:#e94e3b; 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) no-repeat #000a1c;; z-index:10;     background-position: center bottom; }



#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:#e94e3b;}

#mobile .navi .sub-menu > li > a{position:relative; border-bottom:1px solid #fb705e; 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:#182441; 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:#797979;}



#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; border-bottom:1px solid #fff;}



/* 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 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; border-left:5px solid #192244; font-size:36px; color:#192244; 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:#3c546e; border-radius:50%; font-size:16px; color:#FFF; line-height:100px; letter-spacing:1px; text-align:center; transition:all .3s;}

#back:hover{background:#182441;}



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

#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;}



#product-info .item{ min-height:auto;}

#product-info .item img{}



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





/* editor */

.editor img{ max-width:100%; height:auto;}

.editor iframe{ width:100%;}



.btn-link{display:inline-block; text-align:center; text-decoration:none; box-shadow:0 2px 1px #5e4c2d; margin:40px 0; background:#b79f6f; padding:10px 20px; border-radius:5px; font-size:20px; color:#fff; line-height:24px; letter-spacing:2px; font-weight:bold; transition:all .3s;}

.btn-link:hover{ background:#333;}





/* news */

#news .main{position:relative; margin-bottom:25px; padding-left:430px; box-shadow:0 1px 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; font-size:22px; color:#182441; 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 #b79f6f; display:none;}

#news .main dd p{font-size:16px; color:#666; 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:#182441; color:#FFF; border-color:#182441;}



#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 .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:#3c546e; 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:#cdb785;}



/* team */

#team dl{ overflow:hidden;}

#team dt{ float:left; width:46%;}

#team dt img{ display:block; max-width:100%; height:auto;}

#team dd{ float:right; width:50%; margin:1%;}

#team dd h1{ color:#b79f6f; margin:20px 0; line-height:48px;}

#team dd h2{ color:#555; margin-bottom:20px; line-height:36px;}

#team dd h3{ color:#555; margin:20px 0 10px 0;}

#team dd ul{ list-style:disc; margin:10px 0 20px 18px;}



/* information */

.information { overflow:hidden;}

.information dl{ float:left; width:29%; border-left:1px solid #b79f6f; padding:1% 2%; letter-spacing:.5px;}

.information dt{ font-size:20px; font-weight:bold; color:#b79f6f; line-height:30px; padding:10px 0;}

.information dd{ font-size:14px; color:#555; line-height:24px; padding:10px 0;}







/* 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 */
#header{ height:70px;}
#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;}

.information dl{ width:100%; border:0; padding:10px 0; height:inherit !important; text-align:center;}

.information dt, .information dd{ padding:5px 0;}

/* team */

#team dt{ float:left; width:100%;}

#team dt img{ max-width:70%;}

#team dd{ float:left; width:100%; margin:1% 0;}

}



@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;}

/* editor */

#editor iframe{ width:100%;}

}



@media screen and (max-width:480px){

#logo{background-size: 250px; background-position: bottom left; width: 250px;}

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

/* team */

#team dt img{ max-width:100%;}

}