/*织梦58(dede58.com)做最好的织梦整站模板下载网站*/ body { font-family: 微软雅黑, "Open Sans", sans-serif; font-size: 16px; } input, select, textarea { font-family: 微软雅黑, "Open Sans", sans-serif; font-size: 1em; ; } .wrap { width: 96%; margin: 0 auto; max-width: 1200px; position: relative; } img, a { border: 0; } ul, li { list-style: none; } * { margin: 0; padding: 0; } .flt { float: left; width: 160px; } .frt { float: right; } .clear { clear: both; } .clear:after, .clear:before { content: ''; clear: both; display: table; } img { max-width: 100%; } .img { overflow: hidden; position: relative; } .img:before { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(255,255,255,0); z-index: 100; } /*.img:hover:before { top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid rgba(255,255,255,0.5); }*/ /*.img:hover { background: #000 } .img:hover img { opacity: .5; transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); }*/ .pos_cell { top: 50%; transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } *, *:after, *:before { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; } .video{ height:450px; } .modal, .fp_modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } .fp_modal { display: table; } .modal { transition: all 0s; -o-transition: all 0s; -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; background: rgba(0,0,0,0.7); } .fp_modal .cell { display: table-cell; vertical-align: middle; } .modal_cont { max-width: 990px; margin: 0 auto; width: 90%; background: #fff; position: relative; } .modal_cont .close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: url(../images/close.png) no-repeat center center #ccc; border-radius: 100%; cursor: pointer; } .modal_cont .box { padding: 45px; } /*----------header----------*/ .header { background: #1c1c1c; line-height: 70px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; } .logo img { vertical-align: middle; } .text .logo img { width: 25%; } .menu li { float: left; margin: 0 25px; } .menu li a { color: #c2c2c2; } .menu li.on a, .menu li a:hover { color: #fff; padding-bottom: 10px; border-bottom: 2px solid #e51d1d; } .banner { position: relative; } .banner_cur { left: 10%; right: 10%; position: absolute; top: 50%; margin-top: -20px; z-index: 100; } .banner_cur span { cursor: pointer; display: block; width: 46px; height: 46px; border-radius: 100%; border: 1px solid #fff; background-image: url(../images/cur1.png); background-repeat: no-repeat; background-position: center center; } .banner_cur span:hover { border-color: #e51d1d; background-color: rgba(0,0,0,0.2); } .banner_cur span.next { background-image: url(../images/cur2.png); } .banner .item { position: relative; font-family: Arial; } .banner .text { left: 0; width: 100%; z-index: 100; text-align: center; color: #fff; position: absolute; top: 50%; transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .banner .text h2 { font-size: 46px; font-weight: normal; } .banner .text p { font-size: 24px; margin: 2em 0; } .banner_search { max-width: 800px; margin: 0 auto; padding: 8px; background: rgba(0,0,0,0.15); border-radius: 3px; width: 90%; line-height: 48px; } .banner_search .box { background: #fff; border-radius: 2px; position: relative; padding-right: 147px; } .banner_search .btn { position: absolute; top: 0; right: 0; width: 147px; text-align: center; } .banner_search .btn a { line-height: 48px; width: 100%; display: block; color: #fff; background: rgba(229, 29, 29, 1); font-size: 16px; } .btn a:hover { background: #956d47; } .banner_search .btn span { display: inline-block; padding-right: 32px; background: url(../images/icon1.png) no-repeat right center; } .banner_search .span_tit { display: block; float: left; width: 72px; text-align: center; border-right: 1px solid #d5d5d5; font-size: 15px; font-weight: bold; color: #000; } .banner_search .div_input { padding-left: 20px; overflow: hidden; } .div_input input { width: 100%; border: 0; background: none; text-align: left; } .owl-theme .owl-dots .owl-dot span { width: 14px; height: 14px; /*background: url(../images/dots.png) no-repeat center center;*/ border-radius: 100%; background: none; margin-bottom: 15px; position: relative; border: 2px solid transparent; } .owl-theme .owl-dots .owl-dot span:after { content: ''; display: block; width: 4px; height: 4px; border-radius: 100%; background: #fff; content: ''; position: absolute; top: 50%; margin-top: -2px; left: 50%; margin-left: -2px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { border-color: #fff; background: none; } .details .owl-theme .owl-dots .owl-dot span:after { background: rgba(229, 29, 29, 1) } .details .owl-theme .owl-dots .owl-dot.active span, .details .owl-theme .owl-dots .owl-dot:hover span { border-color: rgba(229, 29, 29, 1); } .page1_text .img1 { text-align: right; width: 50%; float: right; } .page1_text .text { line-height: 30px; color: #878787; text-align: center; overflow: hidden; } .page1_text .text { padding: 80px 0; } .page_tit2 h3 { font-size: 48px; font-family: 'Times New Roman'; font-weight: normal; color: #000; line-height: 58px; } .page_tit2 h2 { font-size: 40px; font-weight: normal; color: #000; line-height: 58px; margin-bottom: 30px; } .page1_text .text p { height: 120px; overflow: hidden; max-width: 425px; margin: 0 auto; margin-bottom: 30px; } .btn a { color: #fff; display: block; line-height: 44px; width: 140px; text-align: center; background: rgba(229, 29, 29, 1); margin: 0 auto; } .page { overflow: hidden; padding: 60px 0; } .page:after { content: ''; display: block; clear: both; } .page.on { background: #f9f9f9; } .page_tit { margin-bottom: 40px; text-align: center; } .page_tit h3 { font-size: 30px; margin-bottom: 20px; font-weight: normal; } .page_tit h2 { font-size: 28px; } .page_tit p { color: #999; } .page_tit p span:before, .page_tit p span:after { display: inline-block; width: 30px; height: 1px; background: #999; vertical-align: middle; content: ''; margin: 0 2px; margin-bottom: 2px; } .page_tag ul li { margin-left: 0px; display: inline-block; margin-bottom:8px; } .page_tag { text-align: center; } .page_tag a { display: block; line-height: 30px; font-size:18px; padding: 0 24px; color: #1e1e1e; position: relative; } .page_tag .on a, .page_tag a:hover { background: rgba(229, 29, 29, 1); color: #fff; } .page_tag .on a:before, .page_tag a:hover:before { color: rgba(229, 29, 29, 1) } .page_tag a:before { /*content: '|';*/ content:""; display: block; position: absolute; left: -2px; } .page_tag li:first-child a:before { display: none; } .pro_list ul:after { content: ''; display: block; clear: both; } .pro_list li { width: 33.333%; float: left; text-align: center; } .pro_list h3 { font-size: 16px; color: #000; font-weight: normal; } .pro_list p { padding: 10px 0 15px; color: rgba(229, 29, 29, 1); background: no-repeat bottom center; } .pro_list a:hover p { background: url(../images/icon2.png) no-repeat bottom center; } .pro_list ul { margin-top: 20px; display: none; } .pro_list ul.on { display: block; } .pro_list ul.on li { animation-name: zoomIn; animation-duration: 1s; animation-fill-mode: both; } .about_list2 { max-width: 1100px; margin: 0 auto; border-top: 1px solid #e8e8e8; margin-top: 30px; padding-top: 30px; } .about_list2 ul li { width: 31.333%; margin: 0 1%; float: left; } .about_list2 ul { margin: 0 -1%; } .about_list2 .img { position: relative; } .about_list2 img { display: block; } .about_list2 .img p { position: absolute; bottom: 20px; left: 20px; right: 20px; line-height: 42px; background: #fff; text-align: center; height: 42px; } .about_list2 .img p span { display: block; height: 20px; border-bottom: 1px solid #000; margin: 0 14px; } .about_list2 .img p label { display: inline-block; padding: 0 10px; background: #fff; } .about_list2 .text { line-height: 28px; color: #333; margin-top: 10px; } .his_list { padding-top: 20px; position: relative; } .his_list .line { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 1px; background: #d3d3d3 } .his_list ul li { text-align: right; margin: 20px 0; width: 50%; padding-right: 50%; clear: both; position: relative; } .his_list ul li i { position: absolute; left: 50%; margin-left: -5px; top: 10px; width: 9px; height: 9px; border-radius: 100%; background: #d3d3d3 } .his_list ul li i:after { content: ''; display: block; position: absolute; left: 50%; margin-left: -80px; width: 60px; height: 1px; background: #d3d3d3; top: 4px; } .his_list ul li:nth-child(2n) i:after { margin-left: 20px; } .his_list ul li:nth-child(2n) { padding-right: 0; padding-left: 50%; text-align: left; } .his_list ul li .text { padding: 0 100px; line-height: 28px; color: #262626; } .his_list ul li .text h3 { font-size: 20px; color: #a2774f; font-weight: normal; margin-bottom: 10px; } .ry_list { max-width: 1034px; margin: 0 auto; } .ry_list li { width: 30.3%; float: left; margin: 10px 1.5%; text-align: center; line-height: 40px; } .ry_list li .img { border: 10px solid #efefef; max-width: 270px; margin: 0 auto; } .ry_list li:nth-child(3n+1) { clear: both; } .ry_list li .img img { display: block; } .td_list { max-width: 1100px; margin: 0 auto; } .td_list li { width: 25%; float: left; } .td_list li:hover .tit p span { width: 100%; } .td_list li .box { margin: 17px; } .td_list li .img { position: relative; } .td_list li .img img { display: block; } .td_list li .tit p { line-height: 56px; background: #1c1c1c; padding: 0 16px; font-size: 16px; color: #c09874; position: relative; } .td_list li .tit p span { position: absolute; display: block; width: 48px; height: 4px; background: rgba(229, 29, 29, 1); bottom: 0; right: 0; } .td_list li:nth-child(4n+1) { clear: both; } .td_list li .text { margin-top: 15px; line-height: 26px; color: #6c6c6c } .td_list li .text h3 { font-size: 20px; margin-bottom: 10px; color: #000 } .zp_p_list { max-width: 1120px; margin: 0 auto; line-height: 28px; color: #4c4c4c } .zp_p_list a { color: rgba(229, 29, 29, 1) } .bold { font-weight: bold; } .zp_p_list .list { border-bottom: 1px solid #ebefef; margin-bottom: 15px; padding-bottom: 15px; } .zp_p_list .list:last-child { border-bottom: 0 } .zp_p_list .list h3 { font-size: 20px; font-weight: normal; color: #000; margin-bottom: 5px; line-height: 40px; } .zp_p_list .text>ul>li { list-style: decimal; margin-left: 20px; } .zp_list .text>ul { max-width: 514px; } .zp_p_list .title { cursor: pointer; margin: 10px 0; line-height: 54px; border: 1px solid #e3e9ec; background: url(../images/icon12.png) no-repeat 98% center #f9f9f9; padding: 0 20px; } .zp_p_list .title span { display: inline-block; width: 23%; color: #000 } .zp_p_list .title span.span1 { font-size: 22px; } .zp_p_list .box { display: none; transition: all 0s; -o-transition: all 0s; -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; } .zp_p_list .on .title, .zp_p_list li:hover .title { background: url(../images/icon12-1.png) no-repeat 98% center rgba(229, 29, 29, 1); border-color: rgba(229, 29, 29, 1); } .zp_p_list .on .title span, .zp_p_list li:hover .title span { color: #fff; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .pro_list li:nth-child(3n+1) { clear: both; } .pro_list li a { display: block; margin: 8px; padding: 8px; } /*.pro_list li a:hover { box-shadow: 0 1px 50px rgba(0,0,0,0.1) } .pro_list li a:hover .img { background: #fff; }*/ .page_pro { padding: 0; background: #1c1c1c; position: relative; } .pro_owl { width: 50% } .pro_owl .owl-theme .owl-controls { width: auto; right: -60px; left: auto; width: 120px; } .pro_owl .owl-theme .owl-controls .owl-nav [class*=owl-] { display: block; float: left; width: 60px; height: 60px; margin: 0; padding: 0; background-image: url(../images/cur1.png); background-position: center center; background-repeat: no-repeat; border-radius: 0; background-color: #1c1c1c } .pro_owl .owl-theme .owl-controls .owl-nav .owl-next { background-image: url(../images/cur2.png); background-color: rgba(229, 29, 29, 1) } .page_pro .text { position: absolute; left: 55%; } .page_pro .text .box { max-width: 410px; } .page_tit2.on h3 { color: #fff; } .page_tit2.on h2 { color: #c09874; } .page_pro .text p { line-height: 32px; color: #696969; height: 96px; overflow: hidden; margin-bottom: 30px; } .page_pro .btn a { margin-left: 0; background: #0b0b0b; } .btn2 a span { display: inline-block; padding-right: 17px; background: url(../images/icon3.png) no-repeat right center; } .btn2 a:hover span { padding-right: 27px; } .service_list:after { content: ''; display: block; clear: both; } .service_list ul li { width: 20%; float: left; padding:8px; box-sizing: border-box; } .service_list a { display: block; margin: 7px; position: relative; } .service_list img { display: block; } .service_list .text { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; color: #fff; } .service_list .text h3 { font-size: 16px; font-weight: normal; } .service_list .text p { margin: 10px 0; background: bottom center no-repeat } .service_list .text .more { display: inline-block; padding-right: 10px; background: url(../images/icon4.png) no-repeat right center; } /*.service_list a:hover .img:before { background: #fff; opacity: .95; top: 20px; left: 20px; right: 20px; bottom: 20px; } .service_list a:hover .text { bottom: auto; top: 50%; transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); text-align: center; color: #000; z-index: 100 } .service_list a:hover .text h3 { color: #000; border-bottom: 1px solid #d7d7d7; margin: 0 20px; padding-bottom: 15px; } .service_list a:hover .text p { color: #7f7f7f; padding-bottom: 20px; background: url(../images/icon5.png) bottom center no-repeat; } .service_list a:hover .text span { display: none; }*/ .news_list ul li { width: 48%; padding: 25px 0; float: left; } .news_list ul li:nth-child(2n) { float: right; } .news_list a { display: block; } .news_list .img { width: 160px; height: 100px; float: left; margin-right: 20px; } .news_list .text { overflow: hidden; } .news_list .p_time { height: auto; color: #a1a1a1 } .news_list h3 { margin-top: 10px; font-size: 16px; color: #000; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news_list p { line-height: 20px; color: #999; height: 40px; overflow: hidden; } .news_list .line { width: 100%; height: 1px; background: #efefef; margin: 8px 0; } .news_list .line label { display: block; width: 13px; height: 1px; background: #000 } .news_list a:hover .line label { width: 100%; } /*----------织 梦 58 d e d e 5 8.c o m----------*/ .mainer { margin-top: 70px; } ul:after { content: ''; display: block; clear: both; } .btn_more { margin-top: 20px; text-align: center; } .btn_more a { display: inline-block; padding: 0 45px; line-height: 42px; border: 1px solid #b2b2b2; color: #999 } .btn_more a:hover { border-color: #e51d1d; color: #e51d1d } .div_pos { line-height: 65px; color: #515151; } .div_pos a { color: #000; } .div_pos a:hover { color: #e51d1d } .details .wrap { max-width: 1180px; } .details .tit { padding: 20px 0; border-bottom: 1px solid #e8e8e8; line-height: 30px; } .details .tit h2 { font-size: 20px; font-weight: normal; } .details .tit p { color: rgba(229, 29, 29, 1) } .details .tit span { color: #717171 } .details .text { line-height: 36px; color: #898989; padding: 20px 0; } .page_padd { padding-top: 0; } .page_tit3 { margin: 0 10px; padding-top: 30px; } .page_tit3 span { font-size: 20px; } .center { text-align: center; } .page_size { text-align: center; margin-top: 30px; } .page_size a { display: inline-block; width: 35px; height: 35px; line-height: 35px; vertical-align: middle; background-color: #515151; color: #fff; background-position: center center; background-repeat: no-repeat; margin: 5px 2px; padding: 0 6px; } .page_size a.prev { background-image: url(../images/cur3.png); } .page_size a.next { background-image: url(../images/cur4.png); } .page_size a:hover, .page_size a.on { background-color: rgba(229, 29, 29, 1); } /*----------footer----------*/ .footer { padding: 50px 0; color: #fff; line-height: 26px; background: url(../images/footer.jpg) no-repeat center center; background-size: cover; } .footer .wrap { max-width: 1000px; } .footer .text { overflow: hidden; } .footer .ewm img { display: block; margin-bottom: 15px; } .footer .ewm { text-align: center; width: 170px; } .footer .list { padding-top: 10px; } .footer .list ul li { margin: 15px 0; } .footer a { color: #fff; } .news_tag { text-align: center; padding: 50px 0; } .news_tag ul li { display: inline-block; } .news_tag a { display: block; padding: 0 16px; min-width: 72px; text-align: center; line-height: 30px; margin: 0 24px; background: #eee; font-size: 18px; color: #7e7e7e; } .news_tag li.on a, .news_tag a:hover { background: rgba(229, 29, 29, 1); color: #fff; } .page_news .list { max-width: 945px; margin: 0 auto; } .page_news .list .img { width: 471px; float: right; margin-left: 50px; } .page_news .list .text { border-top: 2px solid #000; padding-top: 30px; overflow: hidden; } .page_news .list li { margin-bottom: 40px; } .page_news .list li:after { content: ''; display: block; clear: both; } .page_news h3 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; } .page_news .list a:hover { color: rgba(229, 29, 29, 1) } .page_news .time { line-height: 20px; margin-bottom: 10px; padding-left: 25px; background: url(../images/icon6.png) no-repeat left center; color: #a8a8a8 } .page_news p { line-height: 27px; height: 81px; overflow: hidden; color: #737373; margin: 30px 0; } .page_news .btn a { background: none; border: 2px solid #000; color: #000; line-height: 34px; width: 120px; margin-left: 0 } .page_news .btn a:hover { background: #333; color: #fff; } /*----------custom----------*/ .news_details { background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1) } .news_details .box { width: 90%; margin: 0 auto; } .news_details .tit { padding: 55px 0; text-align: center; } .news_details .tit h2 { font-size: 36px; font-weight: normal; margin-bottom: 25px; color: black; } .news_details .tit p { font-size: 18px; color: #333; } .news_details .text { font-size: 16px; color: #414141; line-height: 28px } .news_details .text h3 { font-size: 18px; font-weight: bold; margin-top: 20px; margin-bottom: 5px; } .news_details .text img { margin: 10px auto 0; width: 100% !important; height: auto !important; } .text_cur { line-height: 70px; border-top: 1px solid #e8e8e8 } .text_cur span { max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text_cur a { color: #000; } .text_cur a:hover { color: rgba(229, 29, 29, 1); } .pro_list2 ul li { width: 25%; float: left; } .pro_list2 a { display: block; margin: 7px; font-size: 16px; } .pro_list2 ul { margin: 0 3px; margin-top: 20px; } .pro_list2 img { display: block; } .pro_list2 .img { margin-bottom: 20px; } .cont_list ul li { width: 33.333%; float: left; text-align: center; } .cont_list ul li .text { margin-top: 20px; color: #434343 } .cont_list ul li .text h3 { font-size: 16px; font-weight: normal; color: #000; margin-bottom: 10px; } .message { max-width: 710px; margin: 0 auto; } .message ul li { width: 50%; float: left; } .message ul li:last-child { width: 100%; } .message ul { margin-bottom: 30px; } .message .div_input { margin: 5px; line-height: 40px; border: 1px solid #e9e9e9; background: #fff; padding: 0 15px; } .div_input textarea { width: 100%; height: 150px; border: 0; background: none; resize: none; padding: 10px 0; } .banner .item img { display: block; } .about_tag { line-height: 80px; border-bottom: 1px solid #e8e8e8 } .about_tag ul li { width: 20%; float: left; text-align: center; } .about_tag ul li a { margin-left: -1px; border-left: 1px solid #e8e8e8; font-size: 16px; color: #222; display: block; } .about_tag ul li:first-child a { border-left: 0; } .about_tag ul li span { display: inline-block; padding-left: 50px; } .about_tag ul li span.span1 { background: url(../images/icon7.png) no-repeat left center; } .about_tag ul li span.span2 { background: url(../images/icon8.png) no-repeat left center; } .about_tag ul li span.span3 { background: url(../images/icon9.png) no-repeat left center; } .about_tag ul li span.span4 { background: url(../images/icon10.png) no-repeat left center; } .about_tag ul li span.span5 { background: url(../images/icon11.png) no-repeat left center; } .about_tag ul li.on a, .about_tag ul li a:hover { background: rgba(229, 29, 29, 1); } .about_tag ul li.on span, .about_tag ul li a:hover span { color: #fff; } .about_tag ul li.on span.span1, .about_tag ul li a:hover span.span1 { background: url(../images/icon7-1.png) no-repeat left center; } .about_tag ul li.on span.span2, .about_tag ul li a:hover span.span2 { background: url(../images/icon8-1.png) no-repeat left center; } .about_tag ul li.on span.span3, .about_tag ul li a:hover span.span3 { background: url(../images/icon9-1.png) no-repeat left center; } .about_tag ul li.on span.span4, .about_tag ul li a:hover span.span4 { background: url(../images/icon10-1.png) no-repeat left center; } .about_tag ul li.on span.span5, .about_tag ul li a:hover span.span5 { background: url(../images/icon11-1.png) no-repeat left center; } .about_d_text p { /* max-width: 790px;*/ margin: 0 auto; line-height: 32px; color: #6d6d6d; /*text-align: center;*/ } .about_list { /* max-width: 790px;*/ margin: 0 auto; } .about_list ul li { width: 33.333%; float: left; margin: 35px 0 } .about_list .box { margin: 10px; border: 1px solid #e7e7e7; text-align: center; padding: 35px 0; color: #ababab; } .about_list .box h3 { font-size: 56px; color: #323232; font-weight: normal; margin-bottom: 20px; } .menu_tel{display: none;} .menu-fl{ float: left; padding-left: 100px; } .home-tel{ float: right; color: #fff; } .home-tel p{ letter-spacing: 2px; font-weight: bold; } @media only screen and (max-width: 1400px) { } } .banner_cur { left: 5%; right: 5%; } .page_tit2 h2 { margin-bottom: 10px; } } @media only screen and (max-width: 1200px) { .page_tit2 h3 { font-size: 38px; } .page_tit2.on h2 { font-size: 30px; } .page_pro .text p { line-height: 25px; margin-bottom: 10px; height: 75px; } .his_list ul li .text { padding-left: 0 } .his_list ul li:nth-child(2n) .text { padding-left: 100px; padding-right: 0 } } @media only screen and (max-width: 900px) { .menu-fl{ padding-left: 0; } .home-tel{ display: none; } .menu_tel{ display: block; font-size: 20px; text-align: center; line-height: 60px; padding: 2px 0; background-color: #2e2e2e; margin: 12px 24px; color: #fff; margin-top:56px; letter-spacing: 2px; } .menu { position: fixed; top: 60px; left: -100%; width: 100%; height: 100%; background: #1c1c1c; } .menu ul li { float: none; display: block; border-bottom: 1px solid rgba(221,221,221,.1); padding: 0; } .menu ul li a { line-height: 45px; font-size: 18px; } .menu ul { padding-top: 10px; } .header .logo { position: relative; z-index: 1001; line-height: 60px; width: 40%; } .menu_wrap { position: absolute; top: 10px; width: 40px; height: 40px; background: url(../images/menu.png) no-repeat center center ; background-size: 25px auto; right: 5px; } .h_menu .menu_wrap { background: url(../images/menu-1.png) no-repeat center center; background-size: 25px auto; } .h_menu .menu { left: 0; } .header { line-height: 60px; } .mainer { margin-top: 60px; } .menu li.on a, .menu li a:hover { color: #fff } .banner .text h2 { font-size: 30px; } .banner .text p { font-size: 14px; } .banner_search { max-width: 500px; } .page1_text .text { padding: 20px 0; } .pro_owl { width: 80%; margin: 0 auto; } .page_pro { padding: 50px 0; } .page_pro .text { position: initial; top: auto; left: auto; right: auto; transform: none; width: 80%; margin: 0 auto; padding: 20px 0; } .page_pro .text .box { max-width: 100%; } .pro_owl .owl-theme .owl-controls { right: 0 } .service_list ul li { width: 50%; } .service_list ul li:nth-child(2n+1) { clear: both; } .service_list ul li img { width: 100%; } .about_tag ul li span { padding-left: 0; background: none !important } .about_tag { line-height: 60px; } .td_list li .box { margin: 5px; } .td_list li { width: 50%; } .td_list li:nth-child(2n+1) { clear: both; } .td_list li img { width: 100%; } .ry_list li { width: 47%; } .ry_list li:nth-child(3n+1) { clear: none; } .ry_list li:nth-child(2n+1) { clear: both; } .page_news .list .img { width: 300px; margin-left: 20px; } .page_news .list .text { padding-top: 20px; } .page_news p { margin-top: 0; height: 54px; margin-bottom: 10px } .page_news .time { margin-bottom: 0 } .page_news .list li { margin-bottom: 20px; } } @media only screen and (max-width: 800px) { .news_list ul li { width: 100%; padding: 10px 0; } } @media only screen and (max-width: 750px) { .text .logo img { width: 50%; } .banner .text h2 { font-size: 20px; } .banner .text p { margin: 1em; } .banner_cur { display: none; } .banner_search .btn { width: 100px; } .banner_search .box { padding-right: 100px; } .banner_search .span_tit { width: 50px; } .banner_search .div_input { padding-left: 10px; } .banner img { /*width: 150%;*/ /*margin-left: -25%;*/ max-width: initial; } .banner .img1 { overflow: hidden; } .page1_text .img1 { float: none; width: 100%; } .pro_list li:nth-child(3n+1) { clear: none; } .pro_list li { width: 50%; } .pro_list li:nth-child(2n+1) { clear: both; } .video{ height: 160px !important; } .pro_list li a { padding: 4px 2px; margin: 4px !important; } .footer .ewm { float: none; text-align: center; margin-bottom: 20px; display: none; } .footer .list ul li { margin: 5px 0; } .footer .ewm img { margin: 0 auto; margin-bottom: 10px; } .footer { text-align: center; } .page { padding: 20px 0; } .about_list ul li { margin: 20px 0; } .page_tit2 h3 { font-size: 25px; line-height: 20px; } .page_tit2 h2 { font-size: 30px; } .about_tag ul li a { font-size: 14px; } .about_tag { line-height: 40px; } .about_tag .wrap { width: 100%; } .about_list .box h3 { font-size: 30px; } .about_list .box { margin: 5px; } .page_tit h2 { font-size: 20px; } .about_list2 ul li { margin: 0 auto; width: 95%; margin-bottom: 15px; float: none; } .about_list2 img { width: 100%; } .his_list ul { padding-left: 50px; } .his_list ul li i { left: -40px } .his_list ul li { padding: 0 !important; width: 100%; text-align: left; } .his_list ul li .text { padding: 0 !important } .his_list .line { left: 10px; right: auto; } .his_list ul li i:after { margin-left: 10px !important; width: 20px !important; } .zp_p_list .title span { min-width: 47%; width: auto; } .zp_p_list .title { line-height: 30px; padding-top: 10px; padding-bottom: 10px; } .page_news .list .img { width: 150px; float: left; margin: 0 auto; margin-right: 10px; } .page_news p { height: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .page_news .list .text { padding-top: 10px; } .page_news .list .time { display: none; ; } .page_news .list .text { border-top: 0 } .page_news .btn a { border: 0; line-height: 20px; text-align: left; } .page_news .time { margin-bottom: 10px; } .page_news p { margin-bottom: 5px } .news_details .tit h2 { font-size: 26px; margin-bottom: 15px; } .news_details .tit { padding: 30px 0; } .pro_list2 ul li { width: 50%; } .page_news h3 { margin-bottom: 5px; } .pro_list2 .img { margin-bottom: 10px } .text_cur span { max-width: 100%; float: none; } .text_cur { line-height: 35px; padding: 10px 0; } .cont_list ul li { float: none; width: 100%; text-align: left; clear: both; margin-bottom: 10px; } .cont_list ul li:after { content: ''; display: block; clear: both; } .cont_list ul li .img1 { float: left; width: 60px; margin-right: 20px; } .cont_list ul li .text { margin-top: 0; padding-top: 10px; overflow: hidden; } .map { overflow: hidden; } .map img { width: 200%; margin-left: -50%; max-width: initial; } .full { display: none; } .page_tag a { padding: 0 16px; } .news_tag { padding: 20px 0; margin:0 16px; } .news_tag a{ margin:8px 4px; } .page_tit h3 { font-size: 24px; margin-bottom: 10px; } .page_tit { margin-bottom: 20px; } } .pro_list2 ul li p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .full { position: fixed; top: 50%; right: 0; z-index: 1001; } .full li a { display: block; width: 52px; height: 52px; margin-bottom: 1px; position: relative; background: rgba(0,0,0,0.5); z-index: 1; } .full li a:hover span, .full li a:hover label { background-color: rgba(229, 29, 29, 1) !important; } .full li:last-child a { border-bottom: 0; } .full li a span { display: block; width: 52px; height: 52px; position: relative; z-index: 100; background-position: center center; background-repeat: no-repeat; } .full li:nth-child(2) a, .full li:nth-child(1) a { z-index: 2; } .full li a label { display: block; width: 125px; white-space: nowrap; padding: 0 20px; position: absolute; line-height: 52px; color: #fff; z-index: -1; background: #000; bottom: 0; left: 100%; box-sizing: inherit; max-width: 300%; ; } .full li a:hover label { left: -145px; } .full li a .lbl_img { padding: 10px; height: auto; line-height: normal; } .full li a span.span1 { background-image: url(../images/full1.png); } .full li a span.span2 { background-image: url(../images/full2.png); } .full li a span.span3 { background-image: url(../images/full3.png); } .full li a span.span4 { background-image: url(../images/full4.png); } .about_us{ background: url(../images/about-bg.png) no-repeat center center; background-size: cover; } .show{ display: block; } .video-box{ display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000000; -webkit-transition: top .5s ease-in-out; -o-transition: top .5s ease-in-out; transition: top .5s ease-in-out; background: rgba(0, 0, 0, 0.4); } .video-bg{ width: 100%; max-width: 1200px; height: 100%; max-height: 675px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* background: #000;*/ } .video-close{ display: block; cursor: pointer; width: 40px; height: 40px; /* background-color: #be0000;*/ position: absolute; right: -34px; top: -34px; background:url(../images/close.png) no-repeat center center; background-size: 34px; z-index: 1000; } .video{ width:750px; height:450px; margin:0 auto; display: block; } @media only screen and (max-width: 750px){ .video{ width:100%; height:auto; } } .bg-black{ background:#111111; } /*拍摄花絮 */ .sj_img img{ display: block; cursor: pointer; } .tit{ display: block; margin-top:24px; font-size:16px; line-height:40px; color:#fff; font-weight: 100; text-align: center; } .sj_img .sub { width: 40px; height: 2px; display: block; margin: 8px auto; background: #e51d1d; } .t_an_a { width: 175px; display: block; margin:24px auto; height: 45px; line-height: 45px; border: 1px solid #c2c2c2;; padding: 0 30px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; color:#c2c2c2; } .t_an_b { width: 50%; text-align: center; float: left; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .t_an a:hover .t_an_c { padding-left: 25px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .t_an_c { box-sizing: border-box; width: 50%; float: left; padding-left: 15px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .t_an_c img{ margin-top: -8px; box-sizing: border-box; vertical-align: middle; border: 0; width:60px; } /*拍摄花絮end*/ /* 服务项目 经典案例 */ .pro_list li a{ position: relative; padding:0; margin:16px; overflow: hidden;; } .pro_list li a .pic_tit{ position: absolute; bottom: 0px; text-align: center; color: #fff; background: rgba(0,0,0,0.5); width: 100%; transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } .pro_list li .case_box_bg{ position: absolute; top: 0px; left: 0px; z-index: 9; width: 100%; height: 100%; background: rgba(0,0,0,0.6); text-align: center; opacity: 0; transition: 1s ease; -ms-transition: 1s ease; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; } .pro_list li .case_box { position: absolute; top: 35px; left: 35px; z-index: 11111; width: calc(100% - 40px); top: 20px; left: 20px; border: 1px solid #fff; height: calc(100% - 40px); text-align: center; opacity: 0; border: 1px solid #fff; -webkit-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); } .pro_list li a:hover .case_box{ opacity: 1; } .pro_list li a:hover .case_box_bg{ opacity: 1; } a{ cursor: pointer; } .pro_list li a img{ transition: 1s ease; -ms-transition: 1s ease; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; } .pro_list li a:hover img{ background: transparent; outline: none; /* text-decoration: none; -webkit-transition: 1s cubic-bezier(0.25,.46,.45,.94); transition: 1s cubic-bezier(0.25,.46,.45,.94); -webkit-transition-property: background-color,color; transition-property: background-color,color;*/ transition: 1s ease; -ms-transition: 1s ease; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); } .pro_list .case_box .case_title{ position: absolute; left: 5%; top: 45%; margin-top: 44px; width: 90%; text-align: center; font-weight: 300; letter-spacing: 0.075em; transform: matrix(1, 0, 0, 1, 0, 10); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1.000); color: #fff; font-size: 18px; line-height: 40px; } .pro_list .case_box a:hover .play_in span.line1 { width: 30px; } .pro_list .play_in { position: absolute; top: 45%; left: 0; width: 100%; margin-left: -10px; margin-top: -14px; text-align: center; } .pro_list .play_in span.line1 { width: 1px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: width 0.5s; -moz-transition: width 0.5s; transition: width 0.5s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .pro_list .play_in span.line2 { top: 31px; width: 0px; margin-left: -1px; -webkit-transform: rotate(-32deg); -moz-transform: rotate(-32deg); -ms-transform: rotate(-32deg); -o-transform: rotate(-32deg); transform: rotate(-32deg); -webkit-transition: width 0.5s; -moz-transition: width 0.5s; transition: width 0.5s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .pro_list .play_in span.line3 { top: 17px; width: 0px; margin-left: 23px; -webkit-transform: rotate(212deg); -moz-transform: rotate(212deg); -ms-transform: rotate(212deg); -o-transform: rotate(212deg); transform: rotate(212deg); -webkit-transition: width 0.5s; -moz-transition: width 0.5s; transition: width 0.5s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .pro_list .play_in span { height: 2px; } .pro_list a:hover .play_in span{ height:2px; } .pro_list li a:hover .play_in span.line1 { width: 30px; } .pro_list li a:hover .play_in span.line2 { width: 28px; } .pro_list li a:hover .play_in span.line3 { width: 28px; } .pro_list .play_in span { position: absolute; left: 50%; top: 1px; height: 0px; background: #fff; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; }