 html,body{margin: 0;padding: 0;font-family:Microsoft JhengHei; font-size:14px; color:rgba(85, 85, 85, 1); line-height:28px; } .pagebox{position:relative;width:1200px; margin:0px auto; }body{ overflow-x:hidden; font-size:15px; text-align:left !important; } .p_page .pre:hover{ background-color:rgba(219, 32, 49, 1)!important; } .p_page .next:hover{ background-color:rgba(219, 32, 49, 1)!important; } .p_page .next{ background-color:rgba(219, 32, 49, 1)!important; } .p_page .pageNum:hover{ background-color:rgba(219, 32, 49, 1)!important; } .p_page .pageNum.active{ background-color:rgba(219, 32, 49, 1)!important; } .p_page .pre .iconfont:before{ shadow-angle:0px;!important shadow-distance:0px;!important shadow-angle-ofInset:0px;!important shadow-distance-ofInset:0px;!important } .p_page .next .iconfont:before{ shadow-angle:0px;!important shadow-distance:0px;!important shadow-angle-ofInset:0px;!important shadow-distance-ofInset:0px;!important }  @import url(css.css); .navo { position: relative; width: auto; display: inline-block; border: none; } .btn-navo { position: fixed; top: 0px; right: 0px; background: #759446; border: none; padding: 13px 17px; margin:17px 20px 0px 0px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; cursor: pointer; z-index: 99999; } .btn-navo:focus { outline: 0; margin:17px 20px 0px 0px; } .icon-bar { display: block; margin: 6px 0; width: 26px; height: 3px; background-color: #ffffff; } .btn-navo:hover .icon-bar { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; background-color: #ffffff; } .navo-content { position: fixed; top: -100%; bottom: 0; left: 0; right: 0; background: rgba(192, 192, 192,0.5); display: block; height: 100%; z-index: 999; } .navo-list { list-style: none; padding: 0; position: relative; top: 30%; } .item-anchor:after { content: ""; position: absolute; width: 3px; height: 3px; left: 0; bottom: 0; z-index: 9; background: transparent; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .item-anchor { color: #fff; font-size: 30px; text-transform: uppercase; position: relative; text-decoration: none; padding: 10px; } .item-anchor:hover, .item-anchor:focus { color: #FCA311; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .item-anchor:hover:after, .item-anchor:focus:after{ width: 100%; background: #FCA311; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .navo-item { margin: 40px auto; text-align: center; } .animated { display: block; margin: 0 auto; } .animated:hover .icon-bar, .animated:focus .icon-bar{ background-color: #ffffff; } .animated:focus { cursor: pointer; z-index: 9999; } .middle { margin: 0 auto; } .icon-bar { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; z-index: 999999; } .animated .icon-bar { z-index: 999999; background-color: #FCA311; } .animated .top { -webkit-transform: translateY(7px) rotateZ(45deg); -moz-transform: translateY(7px) rotateZ(45deg); -ms-transform: translateY(7px) rotateZ(45deg); -o-transform: translateY(7px) rotateZ(45deg); transform: translateY(7px) rotateZ(45deg); } .animated .foot { -webkit-transform: translateY(-11px) rotateZ(-45deg); -moz-transform: translateY(-11px) rotateZ(-45deg); -ms-transform: translateY(-11px) rotateZ(-45deg); -o-transform: translateY(-11px) rotateZ(-45deg); transform: translateY(-11px) rotateZ(-45deg); } .animated .middle { width: 0; } @keyframes shownavo { from { top: -100%; } to { top: 0; } } @-webkit-keyframes shownavo { from { top: -100%; } to { top: 0; } } @-moz-keyframes shownavo { from { top: -100%; } to { top: 0; } } @-o-keyframes shownavo { from { top: -100%; } to { top: 0; } } .shownavo { -webkit-animation: shownavo 1s ease forwards; -moz-animation: shownavo 1s ease forwards; -o-animation: shownavo 1s ease forwards; animation: shownavo 1s ease forwards; } @keyframes hidenavo { from { top: 0; } to { top: -100%; } } @-webkit-keyframes hidenavo { from { top: 0; } to { top: -100%; } } @-moz-keyframes hidenavo { from { top: 0; } to { top: -100%; } } @-o-keyframes hidenavo { from { top: 0; } to { top: -100%; } } .hidenavo { -webkit-animation: hidenavo 1s ease forwards; -moz-animation: hidenavo 1s ease forwards; -o-animation: hidenavo 1s ease forwards; animation: hidenavo 1s ease forwards; } .hidden { display: none; }   a img{border:0} body{color:#333;text-align:center;font:20px "Microsoft JhengHei";} ul, ol, li{list-style-type:none;vertical-align:0} a{outline-style:none;color:#cccccc;text-decoration:none} a:hover{color:#D40000;text-decoration:none}  .servicesBox{width:1056px;height:270px;margin:0 auto;clear:both;line-height:18px;color:#999999;font-size:14px; padding-top:8%;} .servicesBox .serBox{cursor:pointer;border:1px solid #fff;display:inline;width:300px;height:250px;float:left;overflow:hidden;background-color:#ffffff;position:relative; margin:25px;} .servicesBox .serBoxOn{font-family:"Microsoft JhengHei";display:none;width:320px;height:270px;background:#7ab048;position:absolute;left:0px;top:0px;z-index:19;} .servicesBox .serBox .pic1{width:110px;height:110px;text-align:center;position:absolute;top:22px;right:91px;z-index:99;} .servicesBox .serBox .pic2{width:110px;height:110px;text-align:center;position:absolute;top:22px;left:-120px;z-index:99;} .servicesBox .serBox .txt1{width:198px;height:100px;color:#bbbbbb;position:absolute;top:145px;left:54px;z-index:99;} .servicesBox .serBox .txt2{width:198px;height:100px;color:#bbbbbb;position:absolute;top:145px;right:-194px;z-index:99;} .servicesBox .serBox span.tit{font-size:18px;display:block;text-align:center;} .servicesBox .serBox .txt1 .tit{color:#000000;line-height:30px;} .servicesBox .serBox .txt2 .tit{color:#fff;line-height:30px;font-family:"Microsoft JhengHei";} .servicesBox .serBox p{padding:0 10px;text-align:center;} 
