html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-weight:normal;background: transparent;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
audio,canvas,progress,video {display: inline-block;vertical-align: baseline;}
audio:not([controls]) {display: none;height: 0;}
ul, li, dl, dt, dd, ol {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
border{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
a{text-decoration: none; color: inherit;}
a:active,a:hover {outline: 0;}
hr{display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1rem 0;padding: 0;}
input, select {vertical-align: middle;}
button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}
button{cursor: pointer;overflow: visible;}
input[type="radio"] {vertical-align: text-bottom;box-sizing: border-box;padding: 0;}
input[type="checkbox"] {vertical-align: bottom;box-sizing: border-box; padding: 0; }
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
.clear{clear: both;}
input,button,select,textarea{outline:none}
 *:focus { outline: none; }

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


html,body{width: 100%;height: 100%;min-width: 320px;}
html{font-family: Helvetica,arial,Microsoft JhengHei,"微軟正黑體",sans-serif;font-size: 16px;}
body{font-size:1rem;background-color: #000;-webkit-text-size-adjust: none;}


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

/*index*/
#slider{width:100%;height: 90%;position: relative;}
#slider ul{position: absolute;color: #fff;z-index: 99;bottom: 15%;left: 10%;background-color:rgba(0,0,0,.9); padding: 1rem;}
#slider ul>li{font-size: 2.5rem;}
#slider ul>li+li{font-size: 1rem;color: #ff9000;}



.index_down i{;font-size: 1.5rem;margin-left: 1px;}







/*menu*/
.menu{height: 4rem;background-color:rgba(100,100,100,.85);z-index: 100;width: 100%;position: fixed;top: 0px;}
.menu_main{background-color:rgba(255,255,255,1);}
.menu h1{float: left;margin: .1rem;height: 60px;background: url(../images/tailong.png) no-repeat;background-size: contain;width: 201px;text-indent: -5000px;}
/*menu_b*/
#menu_b{float: right;margin-right: .8rem; color: #fff;}
#menu_b dt{height: 4rem; display: inline-block;line-height: 4rem;padding:0rem .6rem;}
#menu_b dd{display: inline-block;margin-left: 1rem;}
#menu_b dt:hover{border-bottom: 7px solid #adadad;color: #fff;box-sizing: border-box;}
#menu_b button{background-color: #005639;color: #fff;border-radius: 50rem;border: 0px;width: 2rem;height: 2rem;margin-top: .9rem;}
#menu_b button:hover{background-color: #82a90d;}
#menu_b dt:hover>ul{display: block;}
#menu_b ul{position: absolute;padding: 1rem 2rem;line-height: 2.5rem;background-color: #adadad;color: #70614c;display: none;}
#menu_b dt ul li:hover{color: #fff;}
/*menu_s*/
#menu_s{display: none;top: 0px;width: 100%;text-align: right;margin-top: -1px;}
.menu_s_btn{background-image: url(../images/menu_s_btn1.png);border: 0px;height: 2.5rem;width: 2.5rem;margin: .8rem;border-radius: 50rem;}
.menu_s_btn2{background-image: url(../images/menu_s_btn2.png);}
#menu_s div{position: fixed;width: 100%;height: 100%;display: none;}
#menu_s ul{background-color: #222;color: #fff;text-align: left;}
#menu_s ul li{line-height: 3rem;border-bottom: 1px dotted #fff; text-align: center;}
#menu_s ol{border-top: 1px solid #fff;background-color: #adadad;display: none;}
#menu_s ol li{border-top: 1px solid #fff;border-bottom: 0px;text-indent: 3rem;}
#menu_s .search{vertical-align: middle;padding: 1rem 0px;text-align: left;}
#menu_s .search input{height: 2.6rem; color:#003f28;text-indent: 1rem;border-radius: 0px;}
#menu_s .search button{height: 3rem; background-color: #82a90d;margin: auto;border: 0px;line-height: 2rem;width: 5rem;margin-left: -.25rem;margin-bottom: 1px;margin-left: .2rem;}
#menu_s .search li{display: inline-block;text-indent: 0px;border-bottom: 0px;text-align: center;vertical-align:baseline;}


/*index_news*/
.index_news{background-color: #333;min-height: 20rem;text-align: center;padding: 3rem;color: #fff;}
.index_news .title{font-size: 1.5rem;}
.index_news .title li{line-height: 2.5rem; display: inline-block;padding: 0px;margin: 0px;width: auto;}

.index_news .news{width: 90%;margin: 1rem auto;}
.index_news .news li{width: 11.875rem;position: relative;margin: 1rem;display: inline-block;}
.index_news .news li:hover>img{opacity: .3;}
.index_news .news li:hover>p{display: block;}
.index_news .news li p{position: absolute;top: 40px;margin: 0 auto;width: 90%;text-align: center;left: 5%;display: none;color: #ff9000;}
.index_news .news li p+p{top: 70px;color: #fff;}
.index_news .news li img{width: 100%;height:auto;}


/*footer*/
footer{height: 4rem;background-color: #ff9000;color: #fff;position: relative;}

.footerleft{position: absolute;line-height: 4rem;}
.footerleft dt,.footerleft dd{float: left;margin: 0px .5rem; text-align: center;}
.footerleft i{padding: .3rem; border-radius: 50rem;margin-right: .5rem;width: 1rem;}

.footermenu{width: auto; text-align: center;line-height: 4rem;padding-left: 7rem;font-size: .875rem;}
.footermenu li{display: inline-block;width: auto;margin: 0px .5rem;}
.footermenu li:hover{color: #222;}

.sp{position: absolute;vertical-align: middle;right: 1rem;top: 1rem;}
.sp li{display: inline-block;margin: .4rem;vertical-align: top;}
.sp li div{height: 1.25rem;}

.copyright{background-color: #000;color: #ccc;text-align: center;font-size: .875rem;position: relative;padding: 1rem 0px;}
.copyright ul{position: absolute;bottom: 0px;right: 0px;}
.copyright li{width: 4rem;height: 4rem;float: left;}
.copyright .fb{background:url(../images/splink.jpg);}
.copyright .youtube{background:url(../images/splink.jpg) -64px;}
.copyright .order{background:url(../images/splink.jpg) -128px;}



/*main*/
.main{background-color: #222;width: 100%;min-height: 20rem;margin-top: 4rem;padding: 4rem 0px;}
.content{background-color: #fff;margin: 0 auto;width: 85%;margin: 0 auto;min-height: 20rem;max-width: 83.125rem;padding: 2rem;border-radius: 1rem;}

/*breadcrumb*/
.breadcrumb{color: #999;border-bottom: 1px solid #ccc;padding-bottom: 1rem;margin-bottom: 1.5rem;}
.breadcrumb a:after{content: ">";margin: 0px .3rem;}
.breadcrumb a:last-child:after{content: "";}

/*submenu*/
.submenu{line-height: 2rem;margin: 2rem 0px;color: #666;height: 2rem;}
.submenu li{float: left;padding-right: 1rem;}
.submenu li:after{content: "|";padding-left: 1rem;}
.submenu li:first-child:before{content: "|";padding-right: 1rem;}
.submenu li a:hover,.submenu .here{color: #82a90d;}
/*submenu_m*/
.submenu_m{margin: 2rem 0px;display: none;}
.submenu_m select{width: 100%;line-height: 1.5rem;color: #fff;background-color: #003f28;border: 0px;border-radius: 0px;height: 2rem;}




/*caselist*/
.caselist {overflow: hidden;}
.caselist dl{width: 32%;float: left;border: 1px solid #ccc;box-sizing:border-box;margin-bottom: 2%;}
.caselist dl:nth-child(3n+2){margin: 0px 2% 2%;}
.caselist dl img{width: 100%;}
.caselist dl dt{height: auto;}
.caselist dl dd{padding: 1rem;font-size: .875rem;color: #999;}
.caselist dl dd p{font-weight: bold;margin-bottom: .6rem;font-size: 1rem;color: #333;}


/*pagenumber*/
.pagenumber{padding: 2rem 0px 1rem; width: 100%;clear: both;text-align: center;}
.pagenumber li{display: inline-block;height: 2rem;line-height: 2rem;padding: 0px .8rem;border: 1px solid #ccc;margin-bottom: 1rem;}
.pagenumber li:hover{color: #fff;background-color: #333;}



/*case*/
.case{width: 100%;}
.case dl{margin: 1rem 0px;line-height: 1.5rem;color: #333;}
.case dl dt{margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #ccc; font-size: .875rem;color: #999;}
.case dl dt p{font-weight: bold;margin-bottom: .6rem;font-size: 1rem;color: #333;}
.case dl .sp2{float: right;height: 20px;margin: 1rem 0px;vertical-align: middle;}
.case dl .sp2 li{float: left;margin-right: .5rem;}
.casebtns{margin-top: 2rem;}
.casebtns button{margin-right: .3rem;padding:.5rem 1rem; border: 0;background-color: #888;color: #fff;}



/*contact*/
.contact dl{vertical-align: top;overflow: hidden;color: #222;}
.contact dt{float: left;width: 330px;}
.contact dd{float: left; border-left: 1px solid #ccc;padding-left: 2rem;vertical-align: top;}
.contact li{margin: 1rem 0px; vertical-align: top;}
.contact li input{height: 2rem;}
.contact li textarea{vertical-align: top;}
.contact li select{margin-right: .5rem;line-height: 2rem;}
.contact li button{background-color: #222;color: #fff;padding: .5rem 1rem;border: 0px;}   


/*--faq--*/

.problem{border: 0.063rem solid #dfdfdf; padding: 1.875rem;}
.problem ul{margin-bottom: 3.125rem;}
.problem .add{color: #222; font-weight: bold; background-image: url("../images/faq1.jpg"); background-repeat: no-repeat; background-position: 0 0.188rem; padding-left: 1.250rem; cursor: pointer;}
.problem ul li div{display: none; color: #555555; border-top: 0.063rem solid #dfdfdf; padding-top: 1.563rem; margin-top: 1.250rem; line-height: 1.5;}
.problem .less{background-image: url("../images/faq2.jpg");}


/*print*/

.print dl{margin-bottom: 2rem;color: #666;}
.print dt{color: #222;font-weight: bold;padding-bottom: .6rem;border-bottom: 1px solid #ccc;}
.print dd{padding-top: .6rem;}

.print .subtitle{color:#ff9000;padding-top: 30px;}

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

@-webkit-keyframes index_down{
    0%{opacity: 1;bottom: 10%;}
	50%{opacity: .5;bottom: 12%;}
    100%{opacity: 1;bottom: 10%;}
}


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


@media only screen and (max-width:1000px){
/*index*/   
#slider{width: auto;max-height: 400px;margin-top: 4rem;}     
    
.index_down{display: none;}    
#menu_b{display: none;}
#menu_s{display: block;}
    
/*footer*/
.footerleft{position: static;line-height: 4rem;width: 100%;}
.footerleft dt,.footerleft dd{float: none;margin: 0px; text-align: center;}
.footerleft dd{background-color: #ff9000;}
.footerleft dt i{background-color: #222;}
    
.footermenu{width: auto; text-align: center;line-height: 3rem;padding-left: 0rem;background-color: #000;padding: 1rem 0px;}
.footermenu li{width:20%;color: #ccc;}
.footermenu li:hover{color: #ff9000;}

.sp{position: static;vertical-align: middle;right: 0rem;top: 0rem;background-color: #000;padding:4px;text-align: center;}
.sp li{display: inline-block;margin: 0rem;vertical-align: top;}
.sp li div{height: 1.25rem;}
    
.copyright{background-color: #222; color: #ccc;text-align: center;font-size: .875rem;position: relative;}
.copyright ul{position: absolute;top: 0px;right: 50%;margin-right: -6rem;}
.copyright li{width: 4rem;height: 4rem;float: left;}
.copyright .fb{background:url(../images/splink.jpg);}
.copyright .youtube{background:url(../images/splink.jpg) -64px;}
.copyright .order{background:url(../images/splink.jpg) -128px;}

/*main*/    
.main{background-color: #fff;width: 100%;min-height: 20rem;margin-top: 0rem;padding: 5rem 0px;}
.content{background-color: #fff;margin: 0 auto;width: 90%;margin: 0 auto;min-height: 20rem;max-width: 83.125rem;padding: 1rem;}    
    
/*breadcrumb*/
.breadcrumb{color: #666;border-bottom: 3px solid #222;padding-bottom: 1rem;}    

/*submenu*/
.submenu{display: none;}    
/*submenu_m*/
.submenu_m{display: block;}
    
    


    
/*caselist*/    
.caselist dl{width: 49%;min-height: 17rem;}
.caselist dl:nth-child(3n+2){margin: 0px 0px 2%;}
.caselist dl:nth-child(2n+1){margin-right: 2%;}

/*case*/
.case .slider{max-width: 100%;}
    
/*contact*/
.contact dl{vertical-align: top;overflow: hidden;color: #222;}
.contact dt{float: none;width: 100%;}
.contact dd{float: none; border-left: 0px;padding-left: 0rem;vertical-align: top;}
.contact li{margin: 1rem 0px; vertical-align: top;}
.contact li input{height: 2rem;width: 100%;box-sizing:border-box;}
.contact li textarea{vertical-align: top;width: 100%;box-sizing:border-box;}
.contact li select{line-height: 2rem;width: auto;box-sizing:border-box;margin: .5rem 0px;}   

    
}



@media only screen and (max-width:420px){
 
#slider{width: auto;max-height: 200px;}    
#slider ul{display: none;}
    
/*index_news*/
.index_news .news li p{position:static;top: 200px;margin: 10px auto;width: 90%;text-align: center;left: 5%;display: block;color: #ff9000;}
  
    
 
/*caselist*/    
.caselist dl{width: 100%;}
.caselist dl:nth-child(3n+2){margin: 0px 0px 2%;}
.caselist dl:nth-child(2n+1){margin-right: 0%;}
       
/*pagenumber*/
.pagenumber{padding: 2rem 0px 1rem; width: 100%;clear: both;text-align: center;}
.pagenumber li{display: inline-block;height: 2rem;line-height: 2rem;padding: 0px .4rem;border: 1px solid #ccc;margin-bottom: 1rem;}
.pagenumber li:hover{color: #fff;background-color: #333;}

  
}


@media only screen and (max-height:330px){

#menu_s ul li{width: 50%;float: left;background-color: #222;}

    
}