body,html,.wrapmain{ height: 100%; width: 100%;  font-family: Arial,  "黑体", sans-serif;  -webkit-overflow-scrolling : touch;}
.wrapmain{ overflow: auto; }
.middleNavWrapper {
    background: #FFF;
    overflow: hidden;
    margin: 20px -15px;
}

.middleNav {
    margin: 0;
    padding: 0
}

.middleNavWrapper .middleNav .middleNav {
    float: left;
    color: #757575;
    font-size: 16px;
    font-family: Arial,  "黑体", sans-serif;
}

.middleNavWrapper .middleNav .middleNav_active {
    color: #0c0c0c;
}

#banner {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    width: 100%;
}
#banner img{
    width: 100%;
}
#cyln img,#fwzc img, #cpjs img,#xgpj img{ width: 100%; }
.top_buy{ margin-bottom: 40px; }
.top_buy img{ width: 100%; }
.top_buy1,.top_buy2{ float: left; width: 50%; padding: 0 2%; position: relative; }
.top_buy_btn{ position: absolute; left: 58%; top: 55%; width: 30.5%; background: url(../../img/ottaipnu/top_buy_bg.jpg) no-repeat; background-size: 100% 100%; }
.top_buy_btn:hover{  background-image: url(../../img/ottaipnu/top_buy_bg_n.jpg);}

.cyxz{ position: absolute;position: absolute;left: 63%;top: 36%; text-decoration: underline !important; }
.cyxz:hover{ text-decoration: underline !important; }

.zhezhaostc table{ width: 100%; margin: 20px 0 0}
.zhezhaostc table td{ border: 1px solid #d3d3d3; color: #595757; padding-left: 15px; line-height: 30px; vertical-align: middle;}
.zhezhaostc table .top_tb{ background: #595757; color: #fff; border-color: #595757; }
.zhezhaostc table tr:first-child{ background: #595757; color: #fff; border-color: #595757; }



.xiala_buy{ position: absolute; width: 8em; display: none; z-index: 2; min-width: 100%; }
.xiala_buy ul{padding: 0; margin: 0; text-align: center; }
.xiala_buy li{  background: #f5f5f5; border-bottom: 1px solid #666; }
.xiala_buy li a{ font-size: 12px;color: #000;line-height: 2em; }

.footer-ba img{ width: auto }
.nav_li ul{ padding: 0; margin: 0; }
.nav_li ul li{ padding: 0; float: left; width: 22%; margin: 0 1.5%; text-align: center; background: url(../../img/ottaipnu/li.jpg) no-repeat center center; background-size: 100% auto;}
.nav_li ul li a { width: 100%; display: block; color: #333333; font-size: 20px; font-weight: bold; letter-spacing: 5px}
.nav_li ul li:hover{ background-image: url(../../img/ottaipnu/li_now.jpg);}
.ot_title span{font-weight: bold;  padding: 10px 35px 20px 70px; background: url(../../img/ottaipnu/title.jpg) no-repeat center center; background-size: 100% 100%; display: inline-block; }
.ot_title {text-align: center;z-index: 9; position: relative; }
.intro{ position: absolute; }
.intro p{ font-size: 16px; }
#cyln{ margin-top: 30px; }
#cyln .part1{width: 80%; margin: 0 auto; background: url(../../img/ottaipnu/cyln_part1.jpg) no-repeat top center; background-size: 100% 100%; margin-top: -85px; position: relative; }
#cyln .part1 .intro{ width: 45%; top: 15%; left: 4%; font-size: 16px; line-height: 1.6em; }
.intro p{ margin-bottom: 10px;font-family:  "黑体" }
#cyln .part1 .intro2{ width:41.2%; position: absolute; top: 65.4%; left: 29%; font-size: 16px; line-height: 1.7em; }
#cyln .part1 .intro2 p img{ width: 40%;  }
#cyln .part1 .intro2 p{ font-family:  "黑体" }
.intro2_img{ text-align: center; margin-bottom: 30px; }
.lm_intro{ width: 80.8%; margin: 20px auto 20px; position: relative; }
.lm_more{ position: absolute; width: 10.7%; left: 54%; top: 59%;  }
.lm_intro img{ width: 100%; }
#cyln .part2{  width: 80%; margin: 40px auto 0; position: relative; }
#xgpj .part4{  width: 80%; margin: 0px auto 20px; position: relative;text-align: right; padding-top: 10px; }
#xgpj .part4 img{ width: 90%; float: right;  }
#cyln .part2 .intro{ width: 39.5%; position: absolute; top: 11%; left: 58%; font-size: 16px; line-height: 1.6em; }

#xgpj .part4{ font-size: 16px; }
#xgpj .part4 .part4_info{  position: absolute; top: 0; left: 0; text-align: left; }
/*
.pt_title.pp{ display: inline-block; }
.pt_title { position: relative; display: inline-block;border-top: 2px solid #000;border-bottom: 2px solid #000;font-size: 16px; padding: 0 3em; line-height: 43px; font-weight: bold; margin-bottom: 10px;  }
.pt_title:before{ position: absolute; left: 0; content: url(/common/new/img/ottaipnu/pt_title_l.jpg); top: -2px; bottom: -2px; }
.pt_title:after{ position: absolute; right: 0; content: url(/common/new/img/ottaipnu/pt_title_r.jpg); top: -2px; bottom: -2px; }
*/
#cpjs .part1{ width: 80%; margin: 40px auto 20px; position: relative; }
.flower{ position: absolute; top: -30px; left: 10.7% }
#cpjs{ margin-top: 40px; position: relative; }
.intro_left,.intro_right{ float: left; position: relative;}
.intro_left{ width: 51%; background: url(../../img/ottaipnu/cpjs_part1_l.png) no-repeat center 7%;  background-size: 100% auto; }
.intro_left img{ width: 100% }
.intro_left .intro_left_pro{ width: 48%; float: left;  background-size: 100% 100%; cursor: pointer;}
.intro_left .intro_left_pro1{ margin-left: 25.6%; background-image: url(../../img/ottaipnu/cpjs_part1_l1.png); margin-bottom: 20px;}
.intro_left .intro_left_pro2{ background-image: url(../../img/ottaipnu/cpjs_part1_l2.png);}
.intro_left .intro_left_pro3{ margin-left: 4%; background-image: url(../../img/ottaipnu/cpjs_part1_l3.png);}

.intro_left_pro1:hover{ background-image: url(../../img/ottaipnu/cpjs_part1_l1z.png); }
.intro_left_pro2:hover{ background-image: url(../../img/ottaipnu/cpjs_part1_l2z.png);}
.intro_left_pro3:hover{ background-image: url(../../img/ottaipnu/cpjs_part1_l3z.png);}

.intro_right{  width: 49%; padding: 0 0 0 30px;  position: relative;  }
.intro_right p{ font-size: 16px; }
.boxBtns{ position: absolute; left: 5%; bottom: 5%; width: 90%; background: url(../../img/ottaipnu/right_line.png) no-repeat; background-position: 61% 73%;margin-left: 5%; background-size: 24.7%; }
.boxBtns div{ position: absolute; background-size: 100% 100%; cursor: pointer;}
.boxBtns .wdsj{ width: 40.23%; background-image: url(../../img/ottaipnu/wdsj.png); left: 1%; top: 1%; }
.boxBtns .sjms{ width: 35.3%; background-image: url(../../img/ottaipnu/sjms.png); left: 21.89%; bottom:0  }
.boxBtns .zmms{ width: 34.59%; background-image: url(../../img/ottaipnu/zmms.png); right: 0; top: 13.6%}
.boxBtns .wdsj.active{background-image: url(../../img/ottaipnu/wdsj_z.png); }
.boxBtns .sjms.active{background-image: url(../../img/ottaipnu/sjms_z.png); }
.boxBtns .zmms.active{background-image: url(../../img/ottaipnu/zmms_z.png); }
.intro_left.index1{ background-image: url(../../img/ottaipnu/mode1_ph.jpg); }
.intro_left.index2{ background-image: url(../../img/ottaipnu/mode2_ph.jpg); }
.intro_left.index3{ background-image: url(../../img/ottaipnu/mode3_ph.jpg); }
.l-gif{ position: absolute;width: 40%;left: 30.5%;top: 30%;}
.intro_left.index3 .l-gif{ width: 30%; left: 34.5%; top: 26%;  }
#cpjs .part2{ width: 80%; margin: 40px auto 20px; position: relative;  }
.part2 .l-gif{width: 39.3%;left: 44%;top: 0; }
#cpjs .part2 .intro{ top: 26%; left: 1%; width: 38%; }
#xgpj .part1{width: 80%; margin: 40px auto 0px; position: relative; margin-top: -100px;  }
#xgpj .part2{width: 80%; margin: 0px auto 20px; position: relative; }
#xgpj .part3{width: 80%; margin: 0px auto 20px; position: relative; }
#xgpj .part1 .intro{ top: 22%; left: 0; width: 42%; }
#xgpj .part2 .intro{ top: 20%; left: 0; width: 42%; }
#xgpj .part1 .intro .pt_title{ margin-top: 20px; }
#xgpj .part1 .intro .bz{ font-size: 14px !important; color: #666 }
#fwzc .part1{width: 80%; margin: 40px auto 20px; position: relative; margin-top: -10px;  }
#fwzc{ margin-bottom: 40px; }
.cpfh{ position: absolute; right: 0; bottom: 0; font-size: 16px; text-decoration: underline !important; display: none}
.cpfh:hover{ text-decoration: underline !important; color:#000000 }
.index1,.index2,.index3{ display: none }
.font_b{ font-weight: bold; }
/*.fwzc_btn{ position: absolute;width: 26%; background: url(../../img/ottaipnu/fwzc_btn.png) no-repeat center center; background-size: 100% 100%; }
.fwzc_btn:hover{background-image: url(../../img/ottaipnu/fwzc_btn_n.png); }
.fwzc_btn a{ width: 100%; top: 0; bottom: 0; display: block; }
.fwzc_btn.cjwt{  left: 0%; top: 17% }
.fwzc_btn.fwzc{  left: 35%; top: 30% }
.fwzc_btn.scxz{  left: 22%; top: 66% }*/
.footban{ margin: 40px auto }
.footban img{ width: 100%; }


.zhezhaostc{
    display: none;
    position: fixed;
    width: 70%;
    left: 15%;
    right: 15%;
    top: 10%;
    bottom: 10%;
    height: 80%;
    background: #fff;
    z-index: 99;
    padding: 15px;
    box-shadow: 0 0 10px #888888;
}
.zhezhaostc .kuang{
    width: 100%;
    height: 100%;
    border: 1px solid #d1d1d1;
    padding: 20px 30px;
    overflow-y: auto;
    overflow-x: hidden;
}
.zhezhaostc .kuang p{
    color: #333;
    font-family:  "黑体", Arial, sans-serif;
    margin:0;
    line-height: 1.5em;
}
.zhezhaostc .kuang h2{
    margin: 0;
    margin-bottom: 20px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
}
.zhezhaostc .closezz{
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
}
.zhezhaostc_bg{ width: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 98; display: none }
.mm{ display: none; }
.pp{ display: block }


#xgpj .part3 .tb_title{ background: #979899; font-size: 16px; font-weight: bold; color: #fff; border: none; }
#xgpj .part3 li{ line-height: 40px; border-bottom: 1px solid #cccccc; padding-left: 14px; font-size: 14px; }
#xgpj .part3 ul{ padding: 0; margin: 0;  }
#xgpj .part3 .jbgg,#xgpj .part3 .fw{ float: left; width: 60%; }
#xgpj .part3 .dc,#xgpj .part3 .bd{ float: left; width: 40%; }
#xgpj .part3 li span{ width: 4em; text-align: left; display: inline-block; color: #000; font-weight: bold;}
#xgpj .part3 .jbgg li span{ width: 6em;}
@media(max-width: 1199px){
    #cyln .part1 .intro,.intro_right p,#cyln .part1 .intro2,#cyln .part2 .intro,#xgpj .part4,.cpfh,.intro p{ font-size: 15px; }
    .intro2_img{ margin-bottom: 20px; }
}

@media(max-width: 992px){
    #cyln .part1,#cyln .part2,#cpjs .part1,#cpjs .part2,#xgpj .part4,#xgpj .part1,#xgpj .part3,#xgpj .part2,#fwzc .part1{ width: 95%; margin-left: auto; margin-right: auto; }
    #xgpj .part1 .intro .pt_title{ margin-top: 15px; }
    .middleNavWrapper {
        margin: 20px 0px;
    }
/*    .nav_li ul li:hover{ background-image: url(../../img/ottaipnu/li.jpg);}
    .fwzc_btn:hover{ background-image: url(../../img/ottaipnu/fwzc_btn.png);}
*/}
@media(max-width: 700px){
    .mm{ display: block; }
    .pp{ display: none }
    .top_buy1,.top_buy2{ width: 100%; margin-bottom: 20px; }
    .top_buy{ margin-bottom: 0; }  
    #xgpj .part4 img{ width: 100%; }
    .pt_title { border: 0; padding: 0; margin-bottom: 10px; line-height: 1em } 
    #xgpj .part4 .part3_info{ width: 52% }
    .pt_title:before { content: "" } 
    .pt_title:after { content: "" } 
    .pt_title.pp{ display: none; }
    .zhezhaostc{
        width: 90%;
        left: 5%;
        right: 5%;
        top: 10%;
        bottom: 10%;
        height: 80%;
    }
    .zhezhaostc .kuang{
        padding: 20px;
    }
    #cyln .part1 .intro,.intro_right p,#cyln .part1 .intro2,#xgpj .part2,#xgpj .part4,#cyln .part2 .intro,.cpfh,.intro p{ font-size: 14px; line-height: 1.5em; margin-bottom: 8px; }
    .middleNavWrapper{
        display: none;
    }
    #banner{ margin-bottom: 20px; }
    .nav_li ul li{ width: 40%; margin: 5px 5%;  }
    .nav_li ul li a{ font-size: 16px; }
    .ot_title{ font-size: 18px; }
    .ot_title span{ padding: 8px 30px 15px 55px; }
    #cyln{ margin-top: 15px; }
    #cyln .part1{ margin-top: 0;background-position: center bottom; background-size: 100% auto; background-image: url(../../img/ottaipnu/cyln_part1_m.jpg);}
    #cyln .part1 .intro{ position: relative; width: 100%; top: 0; left: 0 }
    #cyln .part1 .intro2{ left: 16%; top:70.5%; width: 72%;  }
    #cyln .part1 .intro2 p img{ width: 60% }
    #cyln .part1 .intro2 p{ line-height: 1.6em }
    .lm_more{ width: 24%; left: 15%; top: 45%; }
    #cyln .part2{ margin: 15px auto; }
    #cyln .part2 .intro{ position: static; width: 100% }
    #cpjs{ margin: 0 auto }
    #cpjs .part1{ margin-top: 20px; margin-bottom: 0; }
    .intro_left{ width: 100%;}
    .intro_left_pro{ background: none !important }
    .intro_left_pro p{ line-height: 2em; text-align: center; color: #757575; margin: 0; }
    #cpjs .part1 .info{float: left; width: 100%;}
    .intro_left_pro:hover{ background: none }
    .intro_left .intro_left_pro1{ margin-bottom: 5px; }
    .l-gif3 .l-gif{ width: 30%; left: 34.5%; top: 26%; }
    .flower_m{ width: 30%; margin-bottom: 20px; }
    #cpjs .part1 .info .qh_title{ font-size: 18px; padding-bottom: 15px; margin-top: 15px; font-weight: bold;text-align: center; background: url(../../img/ottaipnu/qh_line.jpg) no-repeat center bottom; background-size: 35% auto}
    #cpjs .part1 .info p{ margin-bottom: 5px; }
    #cpjs .part1 .info{ margin-bottom: 30px; }
    #cpjs .part2{ margin-top: 0px; }
    #cpjs .part2 .intro{ position: static; width: 100%; margin-top: 15px; }
    #cpjs .part2 .l-gif{ width: 88%; left: 3.7%; top: 6.15%; }
    #xgpj .part1 .intro{ position: static;width: 100%; margin-top: 15px; margin-bottom: -8px;  }
    #xgpj .part1{ margin: 0 auto; }
    #fwzc{ margin-bottom: 20px;  }
    #fwzc .part1{ margin-top: 30px; margin-bottom: 0px; }
    .fwzc_btn{ position: static; float: left; width: 46.67%; margin-bottom: 15px;}
    .fwzc_btn.cjwt{ margin-left: 27%;  }
    .fwzc_btn.fwzc{ margin-right: 6%; }
    .footban{ margin: 20px auto; }

    #xgpj .part3 li{ line-height: 30px; font-size: 12px; }
    #xgpj .part3 .jbgg,#xgpj .part3 .fw,#xgpj .part3 .dc,#xgpj .part3 .bd{ float: left; width: 100%; }
    #xgpj .part3 li span{ width: 3em;  color: #000; font-weight: bold;}
    #xgpj .part3 .jbgg li span{ width: 5em;}
    #xgpj .part3 .tb_title{ background: #e3ebed; color: #4d4d4d; border: none; font-size: 14px;}


}
@media(max-width: 400px){
    .nav_li ul li a{ letter-spacing: 2px }
    #xgpj .part3 li span{ margin-bottom: 1px; float: left; }
}