@charset "utf-8";
/*product*/
.pro-banner { position:relative; z-index:10; }
.pro-banner li{ position:absolute; top:0; left:0; float:left; width:100%;vertical-align:top; }
.pro-banner li img { vertical-align:top; float:left; width:100%; height:auto;}
.pro-banner li .txt { position:absolute; z-index:14; left:0; top:68%; width:59.16%;height:23.5em; background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2);}
.ie7 .pro_tit{margin-top: 100px;}
.ie7 .pro-banner li .txt{margin-top:180px;}
.pro-banner li.curr .txt { }
.pro-banner li .inner { padding:5% 11%;}
.pro-banner li .txt .h2 { color:#414141; margin-bottom:0.3em;}
.pro-banner li .txt .h3 {  color:#00FF00;margin-bottom:0.5em;font-size: 1.4em;}
.pro-banner li .txt .h4 { color:#484848;line-height: 1.6;font-size: 1.1em;}
.pro_tit{ position:absolute; left:6.5%; top:44%; color:#00FF00;z-index:12; }
.pro-banner .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { z-index:20; bottom:100px; }
.pro-banner .bx-wrapper .bx-pager.bx-default-pager a:hover,
.pro-banner .bx-wrapper .bx-pager.bx-default-pager a.active {background: #fff; border:2px solid #00FF00;}
a.pro_more { display: block;width: 1.682em; height: 1.773em; margin-top:4em; background: url(../images/icon_pro_01.png) no-repeat center; background-size: cover;background-size:cover;-ms-behavior: url(../css/backgroundsize.min.htc);
    behavior: url(../css/backgroundsize.min.htc); transition:0.3s all; -webkit-transition:0.3s  all;}
a.pro_more:hover{ background: url(../images/icon_pro_01_cur.png) no-repeat center; background-size: cover;background-size:cover;-ms-behavior: url(../css/backgroundsize.min.htc);
    behavior: url(../css/backgroundsize.min.htc);}
q.pro_more { display: block;width: 1.682em; height: 1.773em; margin-top:4em; background: url(../images/icon_pro_01.png) no-repeat center; background-size: cover;background-size:cover;-ms-behavior: url(../css/backgroundsize.min.htc);
    behavior: url(../css/backgroundsize.min.htc); transition:0.3s all; -webkit-transition:0.3s  all;}
q.pro_more:hover{ background: url(../images/icon_pro_01_cur.png) no-repeat center; background-size: cover;background-size:cover;-ms-behavior: url(../css/backgroundsize.min.htc);
    behavior: url(../css/backgroundsize.min.htc);}

.product .ratio-img { background:none;}
.pro_b01 { padding:5% 2%;}
.pro_b01 li:first-child{ width:59.8%;}
.pro_b01 li{ float:left; width:20%; margin:3% 0 0; position:relative; text-align:center;*margin-left:-1px;}
.pro_b01 li .inner{ margin:0 10%; }
.pro_b01 li .inner img { width:3.727em; height:3.727em;}
.pro_b01 li .img { width:100%;transition:0.3s all; -webkit-transition:0.3s all;}
.pro_b01 li .img_on{ position:absolute; left:0; top:0; width:100%; opacity:0;filter:alpha(opacity=0); z-index:2;transition:0.3s all; -webkit-transition:0.3s all;}
.pro_b01 li:hover .img_on {opacity:1;filter:alpha(opacity=100);}
.pro_b01 li:hover .img { opacity:0;filter:alpha(opacity=0);}
.pro_b01 li h2 {margin:0.6em 0 0;height:2.6em; overflow:hidden; transition:0.3s all; -webkit-transition:0.3s all; font-weight:normal;}
.pro_b01 li:hover h2 { color:#00FF00;}

.pro_b02 { background:#F9F9F9; padding:0 2% 3%;}
.pro_b02 h3,.pro_b03 h3 {font-weight: normal; color:#00FF00; text-align:center; padding:2% 0 2%; }
.pro_b02 li{ float:left; width:20%; margin:2% 0; position:relative; text-align:center;*margin-left:-1px;}
.pro_b02 li .inner{ margin:0 10%; }
.pro_b02 li .inner img { width:3.727em; height:3.727em;}
.pro_b02 li .img { width:100%;transition:0.3s all; -webkit-transition:0.3s all;}
.pro_b02 li .img_on{ position:absolute; left:0; top:0; width:100%; opacity:0;filter:alpha(opacity=0); z-index:2;transition:0.3s all; -webkit-transition:0.3s all;}
.pro_b02 li:hover .img_on {opacity:1;filter:alpha(opacity=100);}
.pro_b02 li:hover .img { opacity:0;filter:alpha(opacity=0);}
.pro_b02 li h2 { height:2.6em; margin:0.6em 0 0; overflow:hidden;transition:0.3s all; -webkit-transition:0.3s all; font-weight:normal;}
.pro_b02 li:hover h2 {  color:#00FF00;}

.pro_b03 { padding:3% 2% 3%;}
.pro_3list li{ float:left; width:33.3%;position:relative;}
.pro_3list li .inner{ margin:0 2%; padding-bottom:4%; border-bottom:2px solid #DADADA;}
.pro_3list li h2 { height:2.6em;overflow:hidden; margin:5% 0 0;transition:0.3s all; -webkit-transition:0.3s all; font-weight:normal;}
.pro_3list li:hover h2 { color:#00FF00;}

.pro_3list1 {  margin:3% 0;}
.pro_3list1 li{ float:left; width:25%;margin:1% 0;*margin-left:-1px;position:relative;}
.pro_3list1 li .inner{margin:0 10%; text-align:center;}
.pro_3list1 li .img { width:100%;transition:0.3s all; -webkit-transition:0.3s all;}
.pro_3list1 li .img_on{ position:absolute; left:0; top:0; width:100%; opacity:0; filter:alpha(opacity=0);z-index:2;transition:0.3s all; -webkit-transition:0.3s all;}
.pro_3list1 li:hover .img_on {opacity:1;filter:alpha(opacity=100);}
.pro_3list1 li:hover .img { opacity:0;filter:alpha(opacity=0);}
.pro_3list1 li h2 { height:2.6em;overflow:hidden; margin:5% 0 0;transition:0.3s all; -webkit-transition:0.3s all; font-weight:normal;}
.pro_3list1 li:hover h2 { color:#00FF00;}
.pro_3list1 li .inner img { width:16.136em; height:4.545em;}



@media only screen and (max-width: 1200px) {
    .pro-banner li .txt {  height:20em;}
    a.pro_more {  margin-top:2em;}
    .pro_tit,.pro_b02 h3, .pro_b03 h3{font-size: 3em;}
}
@media only screen and (max-width: 1100px) {
    .pro_3list1 li .inner {  margin:0 2%;}
    .pro-banner .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom:50px;}
}
@media only screen and (max-width: 1000px) {
    .pro_b01 li:first-child { width:59.5%;}
    .pro_3list1 li .inner img {  width:14.1em; height:4.214em; }
	.pro_tit { top:35%;}
	.pro-banner li .txt { top:60%; }
}

@media only screen and (max-width: 767px) {
	.pro-banner li img { position:relative; float:none;}
    .pro-banner li .txt {  width:100%; position:relative; top:0;}
    .pro_tit {  top:auto;bottom:50%;}
    .pro-banner .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {  bottom:20px; }
    .pro_b01 li:first-child {  display:none;}
    .pro_b01 li,.pro_b02 li{  width:50%;}
    .pro_3list li,.pro_3list1 li { width:100%;margin:0 0 5%;}

	.pro-banner li { position:relative; float:none;}

}

@media only screen and (max-width: 400px) {
    .pro_tit {   top:auto;bottom:50%;}
}

/*英文*/
.pro-banner .bx-viewport{overflow: visible!important;}
.pro-banner li .txt .h3{font-size: 1em;}
.pro-banner li .txt .h4{line-height: 1.3;}
.pro-banner li .txt .h2,.pro_b02 h3, .pro_b03 h3{font-size: 3.2em!important;}
@media only screen and (min-width: 1200px) {
    .pro_tit{font-size: 5.18em!important;}
}
@media only screen and (max-width: 1440px) {
    .pro_tit{font-size: 3.2em!important;}
}
@media only screen and (max-width: 1100px) {
    .pro_b02 h3, .pro_b03 h3,.pro_tit{font-size: 3.8em!important;}
    .pro-banner li .txt .h2{font-size:  2.8em!important;}
}
@media only screen and (max-width: 767px) {
    .main_title{font-size: 2.2em!important;}
    .pro_tit,.pro-banner li .txt .h2,.pro_b02 h3, .pro_b03 h3{font-size: 2em!important;}
    .pro-banner li .txt .h2{font-size: 2em!important;}
}