.page-pagepiling-wrap{width: 100%; height: 100%}
.section{overflow: hidden}

#pp-nav li a:before{display: block; width: 40px; font-size: 13px; color: #fff; font-weight: 100; position: absolute; bottom: 0; left: 0; margin: 0 0 -6px -40px; opacity: 0; transition: all ease .4s; -webkit-transition: all ease .4s}
#pp-nav li:nth-child(1) a:before{content: "首页"}
#pp-nav li:nth-child(2) a:before{content: "关于"}
#pp-nav li:nth-child(3) a:before{content: "产品"}
#pp-nav li:nth-child(4) a:before{content: "资讯"}
#pp-nav li:nth-child(5) a:before{content: "联系"}
#pp-nav li:nth-child(6) a:before{content: "全景"}

#pp-nav li a.active:before{opacity: 1}

.title{margin-bottom: 30px; text-align: center}
.title h3{font-size: 18px; color: #fff;}
.title p{font-size: 14px; color: #dedede; font-family: 'novecento_sans_widenormal'}


/*----section1----*/
.section01{background: #f0f0f0}
/*----banner----*/
.section01 .banner{width: 100%; height: 100%; display: block}
.section01 .banner a{width: 100%; height: 100%;}
.section01 .banner .img{width: 100%; height: 100%; background-position: center; background-size: cover}


/*----section2----*/
.section02{background: url("../image/bg5.jpg") no-repeat center;}
.section02 .section_about{width: 70%; height: 76%; position: relative; background: #212121}
.section02 .section_about .section_about_con{position: relative; top: 22%;}
.section02 .section_about .section_about_con .about_img_bor{width: 960px; height: 340px; position: absolute; top: 0; right: -100px; border: 1px solid #c8161e}
.section02 .section_about .section_about_con .about_img{width: 936px; height: 316px; margin: 11px; overflow: hidden}
.section02 .section_about .section_about_con .about_img img{width: 100%}
.section02 .section_about .section_about_con .about_txt{width: 860px; position: absolute; top: 380px; right: 0}
.section02 .section_about .section_about_con .about_txt h3{font-size: 16px; color: #fff; margin-bottom: 16px; font-family: Microsoft JhengHei }
.section02 .section_about .section_about_con .about_txt p{position: relative; font-size: 13px; color: #999; padding-right: 50px; line-height: 26px; transition: all .4s; -webkit-transition: all .4s; font-family: 'novecento_sans_widenormal'}
.section02 .section_about .section_about_con .about_txt p:before{content: ""; display: block; width: 2px; height: 42px; position: absolute; top: 4px; left: -20px; background: #c8161e; transition: all .3s; -webkit-transition: all .3s; opacity: 0}
.section02 .section_about .section_about_con .about_txt:hover p{transform: translateX(20px); -webkit-transform: translateX(20px)}
.section02 .section_about .section_about_con .about_txt:hover p:before{opacity: 1}

/*----section3----*/
.section03{background: url("../image/bg6.jpg") no-repeat center;}
.section03 .section03_con{width: 86%; margin: 0 auto; position: relative; z-index: 2}

.section03 .section03_con .title{display: none}

.section03 .section03_con .section03_link{width: 100%; margin-bottom: 50px; text-align: right}
.section03 .section03_con .section03_link a{position: relative; display: inline-block; font-size: 13px; padding: 6px 12px; color: #999; margin-left: 10px; transition: all .4s; -webkit-transition: all .4s}
.section03 .section03_con .section03_link a:after{content: ""; display: block; width: 1px; height: 6px; position: absolute; top: 50%; right: 0; margin-top: -3px; margin-right: -5px; background: #999}
.section03 .section03_con .section03_link a:hover{background: #c8161e; color: #fff;}

.section03 .section03_con .section03_list{width: 100%;}
.section03 .section03_con .section03_list .list{list-style: none; margin-right: -1%}
.section03 .section03_con .section03_list .list li{width: 24%; float: left; position: relative; margin-right: 1%}
.section03 .section03_con .section03_list .list li .img{width: 100%; overflow: hidden;}
.section03 .section03_con .section03_list .list li .img img{width: 100%; display: block; float: none; transition: all .4s; -webkit-transition: all .4s}
.section03 .section03_con .section03_list .list li:hover .img img{transform: scale(1.1); -webkit-transform: scale(1.1)}
.section03 .section03_con .section03_list .list li .text{width: 100%; position: relative; border-top: 1px solid rgba(0,0,0,.1)}
.section03 .section03_con .section03_list .list li .text h3{font-size: 16px; color: #f0f0f0; padding: 20px 0 8px 10px;}
.section03 .section03_con .section03_list .list li .text h3:after{content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 20px; right: 30px; background: url("../image/right_img.png") no-repeat; background-size: cover; transition: all .4s; -webkit-transition: all .4s; opacity: 0}
.section03 .section03_con .section03_list .list li:hover .text h3:after{opacity: 1; right: 10px}
.section03 .section03_con .section03_list .list li .text span{display: block; width: 0; margin-top: 16px; height: 1px; background: rgba(255,255,255,.3); transition: all .5s; -webkit-transition: all .5s}
.section03 .section03_con .section03_list .list li:hover .text span{width: 100%}

.section03 .mark{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../image/makr_bg.png") repeat}

/*----section4----*/
.section04{background: url("../image/bg3.jpg") no-repeat center;}
.section04 .section04_con{width: 100%; height: 100%; position: relative; background: url("../image/makr_bg.png") repeat}
.section04 .section04_con:before{content: ""; display: block; width: 1px; height: 100%; background: rgba(255,255,255,.2); position: absolute; top: 60px; left: 50%}

.section04 .section04_con .section04_list{width: 1180px; margin: 0 auto; padding-top: 14%}
.section04 .section04_con .section04_list .list{list-style: none;}

.section04 .section04_con .section04_list .list li{width: 46%; margin-bottom: 50px; position: relative; border: 1px solid rgba(255,255,255,.1); transition: all .4s; -webkit-transition: all .4s}
.section04 .section04_con .section04_list .list li:before{content: ""; display: block; width: 8px; height: 8px; background: #000; border: 2px solid rgba(255,255,255,.4); border-radius: 100px; position: absolute; bottom: 32px}
.section04 .section04_con .section04_list .list li .news_con{width: 100%; padding: 40px; background: #2b2b2b}
.section04 .section04_con .section04_list .list li .news_con .img{width: 28%; height: 76px; margin-right: 4%; overflow: hidden}
.section04 .section04_con .section04_list .list li .news_con .img img{width: 100%}
.section04 .section04_con .section04_list .list li .news_con .text{width: 66%;}
.section04 .section04_con .section04_list .list li .news_con .text h3{font-size: 15px; color: #e0e0e0; margin-bottom: 16px}
.section04 .section04_con .section04_list .list li .news_con .text p{font-size: 12px; color: #777}

.section04 .section04_con .section04_list .list li:nth-child(1) {float: left; margin-top: 13%}
.section04 .section04_con .section04_list .list li:nth-child(1):before{right: -52px}
.section04 .section04_con .section04_list .list li:nth-child(2) {float: right}
.section04 .section04_con .section04_list .list li:nth-child(2):before{left: -52px}
.section04 .section04_con .section04_list .list li:nth-child(3) {float: right}
.section04 .section04_con .section04_list .list li:nth-child(3):before{left: -52px}

.section04 .section04_con .section04_list .list li .data{padding: 10px 40px; position: relative; background: #232323; transition: all .4s; -webkit-transition: all .4s}
.section04 .section04_con .section04_list .list li .data h2{font-size: 36px; color: #c8161e; font-family:'novecento_sans_widelight'; transition: all .4s; -webkit-transition: all .4s}
.section04 .section04_con .section04_list .list li .data p{font-size: 16px; color: #999; font-family: 'novecento_sans_widelight'; transition: all .4s; -webkit-transition: all .4s }
.section04 .section04_con .section04_list .list li .data span{display: block; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); position: absolute; right: 40px; top: 24px}
.section04 .section04_con .section04_list .list li .data span i{position: absolute; font-size: 24px; color: #929090; top: 6px; left: 15px; }

.section04 .section04_con .section04_list .list li:hover{transform: translateY(-10px); -webkit-transform: translateY(-10px); border: 1px solid #c8161e}
.section04 .section04_con .section04_list .list li:hover:before{border: 2px solid #c8161e}
.section04 .section04_con .section04_list .list li:hover .data{background: #c8161e}
.section04 .section04_con .section04_list .list li:hover .data h2{color: #f0f0f0}
.section04 .section04_con .section04_list .list li:hover .data p{color: #f0f0f0}
.section04 .section04_con .section04_list .list li:hover .data span i{color: #f0f0f0}

/*----section5----*/
.section05{background: url("../image/map.jpg") no-repeat center;}
.section05 .section05_con{width: 100%; height: 100%}
.section05 .section05_con .title{width: 1100px; margin: 0 auto; font-size: 36px; color: #c8161e; padding-top: 24%; padding-bottom: 10%; box-sizing: border-box;  font-family:'novecento_sans_widelight' }
.section05 .section05_con .section05_contact{width: 100%; margin: 0 auto; padding: 4% 20% 0 20%; background: #212121}

.section05 .section05_con .section05_contact .section05_left{width: 50%; position: relative }
.section05 .section05_con .section05_contact .section05_left .line{display: block; width: 1px; height: 90%; position: absolute; top: 0; right: 0; margin-right: 50px; background: rgba(255,255,255,.6)}
.section05 .section05_con .section05_contact .section05_left .list{margin-bottom: 24px;}
.section05 .section05_con .section05_contact .section05_left span i{display: block; float: left; width: 20px; height: 20px; color: #f0f0f0; font-size: 22px; padding: 10px; border: 1px solid #fff; border-radius: 100px}
.section05 .section05_con .section05_contact .section05_left .add{float: left; margin-left: 20px}
.section05 .section05_con .section05_contact .section05_left p{font-size: 13px; color: #f0f0f0; line-height: 20px;}
.section05 .section05_con .section05_contact .section05_left strong{font-size: 26px; font-weight: normal; font-family: 'novecento_sans_widenormal'}

.section05 .section05_con .section05_contact .section05_right{width: 50%}
.section05 .section05_con .section05_contact .section05_right .gzh{float: left; width: 120px; height: 120px; margin-left: 40px; overflow: hidden}
.section05 .section05_con .section05_contact .section05_right .gzh img{width: 100%}
.section05 .section05_con .section05_contact .section05_right .ico{float: left; margin: 0 50px 20px 50px; position: relative}
.section05 .section05_con .section05_contact .section05_right .ico a{float: left; width: 34px; height: 34px; font-size: 20px; text-align: center; margin: 0 20px 0 0; background-size: cover; transition: all .2s; -webkit-transition: all .2s}

.section05 .section05_con .section05_contact .section05_right .ico .w_hover{position: relative}
.section05 .section05_con .section05_contact .section05_right .ico .ewm{width: 120px; height: 120px; position: absolute; top: -140px; left: 0; margin-left: -40px; overflow: hidden}
.section05 .section05_con .section05_contact .section05_right .ico .ewm .ewm_con{position: absolute; top: 100%; left: 0; transition: all .4s; -webkit-transition: all .4s; z-index: 99}
.section05 .section05_con .section05_contact .section05_right .ico .ewm img{float: none; width: 100%}
.section05 .section05_con .section05_contact .section05_right .ico .ewm .ewm_hover{top: 0}

.section05 .section05_con .section05_contact .section05_right .ico .w_dy{position: relative}
.section05 .section05_con .section05_contact .section05_right .ico .dy{width: 120px; height: 120px; position: absolute; top: -140px; left: 0; margin-left: 100px; overflow: hidden}
.section05 .section05_con .section05_contact .section05_right .ico .dy .dy_con{position: absolute; top: 100%; left: 0; transition: all .4s; -webkit-transition: all .4s; z-index: 99}
.section05 .section05_con .section05_contact .section05_right .ico .dy img{float: none; width: 100%}
.section05 .section05_con .section05_contact .section05_right .ico .dy .dy_hover{top: 0}

.section05 .section05_con .section05_contact .section05_right .list_3{float: left; margin-left: 50px}
.section05 .section05_con .section05_contact .section05_right .list_3 .list_4{list-style: none; margin-bottom: 10px; margin-left: -10px}
.section05 .section05_con .section05_contact .section05_right .list_3 .list_4 li{float: left; border-right: 1px solid #f0f0f0}
.section05 .section05_con .section05_contact .section05_right .list_3 .list_4 li a{padding: 0 10px; font-size: 12px; color: #f0f0f0}
.section05 .section05_con .section05_contact .section05_right .list_3 p{font-size: 12px; color: #f0f0f0; line-height: 20px}
.section05 .section05_con .section05_contact .section05_right .list_3 p a{display: inline-block; font-size: 12px; color: #f0f0f0;}

/*----section5----*/
.section06{background: url("../image/bg2.jpg") no-repeat center;}
.section06 .section_qj{width: 100%; height: 100%; background: rgba(0,0,0,.4)}
.section06 .section_qj_txt{width: 800px; height: 200px; margin: 0 auto; padding-top: 20%; text-align: center; }
.section06 .section_qj_txt h3{font-size: 26px; color: #fff; margin-bottom: 8px; font-family:'novecento_sans_widelight' }
.section06 .section_qj_txt p{font-size: 24px; color: #f0f0f0; font-family: Microsoft JhengHei}
.section06 .section_qj_txt .en{font-size: 18px; font-family: 'novecento_sans_widelight'}
.section06 .section_qj_txt .link_en{font-size: 14px}


/*----section----*/
.section{width: 100%; height: 100%; background-size: cover; overflow: hidden}
.section .link{position: relative; width: 120px; margin: 60px auto 0 auto; padding: 10px; font-size: 12px; color: #f0f0f0; text-align: center; border: 1px solid #f0f0f0; font-family: 'novecento_sans_widenormal'; transition: all .4s; -webkit-transition: all .4s}
.section .link span{display: block; position: absolute; background: #c8161e; transition: all .4s; -webkit-transition: all .4s; z-index: 2}
.section .link .span1{top: 0; left: -100%; width: 0; height: 2px; background: #c8161e; opacity: 0}
.section .link:hover .span1{left: 0; opacity: 1; width: 100%}
.section .link .span2{bottom: 0; right: -100%; width: 0; height: 2px; background: #c8161e; opacity: 0}
.section .link:hover .span2{right: 0; opacity: 1; width: 100%}
.section .link .span3{bottom: -100px; left: 0; width: 2px; height: 0; background: #c8161e; opacity: 0}
.section .link:hover .span3{bottom: 0; opacity: 1; height: 100%}
.section .link .span4{top: -100px; right: 0; width: 2px; height: 0; background: #c8161e; opacity: 0}
.section .link:hover .span4{top: 0; opacity: 1; height: 100%}

.section .link:hover{border: 1px solid #c8161e}



/*--------*/
.index_fix{width: 100%; position: fixed; left: 0; bottom: 0; padding: 0 0 20px 40px; z-index: 9}
.index_fix a{display: inline-block; font-size: 13px; color: #dedede; margin-right: 10px;}
.index_fix a.design{width: 64px; height: 16px; color: transparent; background: url("../image/power.png") no-repeat; background-size: cover}

.index_fixs{width: 120px; position: fixed; bottom: 4%; right: 40px; z-index: 9}
.index_fixs img{width: 100%;}

.page_footer{display: none}
.right_list{display: none}