.banner { position: relative; } .banner .div_cont { position: absolute; bottom: 0; left: 0; z-index: 10; width: 100%; } .banner .div_cont .cont { width: 560px; height: 190px; background: url(/uploads/image/tpimages/ind_4.png) no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 38px 0 0 54px; } .banner .div_cont .cont .top { margin-bottom: 22px; } .banner .div_cont .cont .te { font-size: 30px; color: #ffffff; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .banner .div_cont .cont .te img { width: 21px; height: 21px; margin-right: 50px; } .banner .div_cont .rt { position: absolute; right: 60px; bottom: 66px; font-size: 30px; color: #fff; } .banner .div_cont .rt .en { margin-bottom: 10px; } .banner .div_cont .rt .cn { font-size: 26px; font-weight: 100; } .banner .div_cont .rt .cn span { font-weight: 400; } .con_nav { margin-top: 50px; text-align: center; } .con_nav ul li { display: inline-block; width: 160px; line-height: 50px; text-align: center; margin: 0px 10px; font-size: 15px; background: #e6e6e6; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .con_nav ul li.cur,.con_nav ul li:hover { background: #009b4c; } .con_nav ul li.cur a,.con_nav ul li:hover a { color: #fff; } .con_nav ul li a { display: block; color: #333333; } .ind_a { padding: 144px 0 316px 0; background: url(/uploads/image/tpimages/ind_9.png) no-repeat center center; } .ind_a .lt { float: left; width: 530px; } .ind_a .lt .videobox { position: relative; } .ind_a .lt .videobox .videomask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.2); z-index: 23; } .ind_a .lt .videobox .bfbtn { width: 18.3019%; max-width: 90px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 33; cursor: pointer; } .ind_a .lt .videobox .videoimg { position: relative; z-index: 22; } .ind_a .lt .videobox .br { position: absolute; width: 57.1698%; right: -47.1698%; bottom: -21.4516%; z-index: 1; } .ind_a .rt { float: right; width: 540px; } .ind_a .rt .mk_title { margin: 112px 0 50px 0; } .ind_a .rt .text { padding-left: 125px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #000000; line-height: 33px; margin-bottom: 55px; text-align: justify; } .ind_a .rt .btnbox { padding-left: 125px; } .ind_a .rt .btnbox .morebtn i { z-index: 0; } .ind_b { /*padding-top: 102px;*/ position: relative; background-color: #ede8e2; } .ind_b .mk_title { text-align: center; margin-bottom: 75px; } .ind_b #qwswiper { position: absolute; padding: 22px 0; width: 100%; left: 0; bottom: 200px; z-index: 1; } .ind_b #qwswiper .swiper-slide { max-width: 1260px !important; width: 90% !important; -webkit-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.2); } .ind_b #qwswiper .btncontrol { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 2px; z-index: 12; } .ind_b #qwswiper .btncontrol .btn { overflow: hidden; width: 80px; height: 50px; background-color: #000000; position: absolute; top: 50%; cursor: pointer; } .ind_b #qwswiper .btncontrol .btn span { display: block; height: 12px; width: 12px; margin: 19px auto; -webkit-transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .ind_b #qwswiper .btncontrol .qwprev { left: 0; } .ind_b #qwswiper .btncontrol .qwprev span { background: url(/uploads/image/tpimages/ind_13.png) no-repeat left center; } .ind_b #qwswiper .btncontrol .qwnext { right: 0; } .ind_b #qwswiper .btncontrol .qwnext span { background: url(/uploads/image/tpimages/ind_12.png) no-repeat right center; } .ind_b #qwswiper .btncontrol .btn:hover span { width: 32px; } .ind_b .wrap1260 .side { display: none; padding: 75px 93px 66px 93px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 940px; background: url(/uploads/image/tpimages/ind_14.png) no-repeat 100% #fff; } .ind_b .wrap1260 .side .title { font-size: 48px; color: #000000; margin-bottom: 57px; } .ind_b .wrap1260 .side .name { color: #bc8e7b; font-size: 30px; /* margin-bottom: 25px; */ margin-bottom: 440px; } .ind_b .wrap1260 .side .desc { display: none; color: #666666; font-size: 16px; margin-bottom: 440px; line-height: 28px; height: 56px; overflow: hidden; } .ind_b .wrap1260 .side .mukuaibox { background: #fff; width: 380px; padding: 90px 47px 50px 47px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 25px; -webkit-box-shadow: 0px 0px 12px 1px #dfdfdf; -moz-box-shadow: 0px 0px 12px 1px #dfdfdf; box-shadow: 0px 0px 12px 1px #dfdfdf; position: relative; z-index: 99; } .ind_b .wrap1260 .side .mukuaibox .abox { margin-bottom: 40px; } .ind_b .wrap1260 .side .mukuaibox .ht { position: relative; color: #000000; font-size: 18px; margin-bottom: 16px; } .ind_b .wrap1260 .side .mukuaibox .ht::after { content: ""; display: block; width: 120px; height: 2px; position: absolute; left: -140px; top: 50%; margin-top: -1px; background: #000; } .ind_b .wrap1260 .side .mukuaibox .havebox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ind_b .wrap1260 .side .mukuaibox .havebox .iconbox .ac { display: none; } .ind_b .wrap1260 .side .mukuaibox .havebox .actbox .ac { display: block; } .ind_b .wrap1260 .side .mukuaibox .havebox .actbox .no { display: none; } .ind_b .wrap1260 .side .mukuaibox .to { margin: 0 auto; } .ind_b .wrap1260 .actslide { display: block; } .ind_c { padding: 117px 0 100px 0; background: url(/uploads/image/tpimages/ind_27.png) no-repeat right top; } .ind_c .mk_title { text-align: center; margin-bottom: 55px; } .ind_c .casebox #caseswiper { margin-bottom: 50px; } .ind_c .casebox #caseswiper #casesp { display: none; } .ind_c .casebox #caseswiper .swiper-slide { position: relative; overflow: hidden; } .ind_c .casebox #caseswiper .swiper-slide .imgbox img { width: 100%; } .ind_c .casebox #caseswiper .swiper-slide .mask { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .ind_c .casebox #caseswiper .swiper-slide .mask .info_box { width: 100%; position: absolute; left: 0; bottom: 20px; } .ind_c .casebox #caseswiper .swiper-slide .mask .info_box .tl { text-align: center; color: #ffffff; font-size: 24px; padding: 0 10px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 30px; } .ind_c .casebox #caseswiper .swiper-slide .mask .info_box .btn { width: 150px; height: 45px; background-color: #ffffff; text-align: center; color: #bc8e7b; line-height: 45px; margin: 0 auto; font-size: 16px; } .ind_c .casebox #caseswiper .swiper-slide:hover .mask { top: 0; } .ind_c .casebox .btnbox .morebtn { margin: 0 auto; } .ind_d { margin: 0 0 50px 0; overflow: hidden; } .ind_d .casewrap { position: relative; width: 90%; margin: 0 auto; } .ind_d .casewrap .mk_title { margin-bottom: 60px; text-align: center; } .ind_d .casewrap .cont { position: relative; } .ind_d .casewrap .cont .rt { float: right; width: 71.7834%; background: url(/uploads/image/tpimages/ind_19.png) no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100%; background-size: 100%; position: relative; margin-right: -10%; } .ind_d .casewrap .cont .rt .parbox { position: absolute; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ind_d .casewrap .cont .rt .parbox .name { white-space: nowrap; text-align: center; position: absolute; bottom: -40px; left: 50%; -webkit-transform: translatex(-50%); -moz-transform: translatex(-50%); -ms-transform: translatex(-50%); transform: translatex(-50%); color: #888888; font-size: 12px; } .ind_d .casewrap .cont .rt .parbox:nth-child(1) { left: 40.3%; top: 25.2%; } .ind_d .casewrap .cont .rt .parbox:nth-child(2) { left: 62.5%; top: 33.8%; } .ind_d .casewrap .cont .rt .parbox:nth-child(3) { left: 63.5%; top: 57.8%; } .ind_d .casewrap .cont .rt .parbox:nth-child(4) { left: 69.3%; top: 24.5%; } .ind_d .casewrap .cont .rt .parbox:nth-child(5) { left: 70.8%; top: 34.8%; } .ind_d .casewrap .cont .rt .parbox:nth-child(6) { left: 85.7%; top: 45%; } .ind_d .casewrap .cont .rt .parimg { position: absolute; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ind_d .casewrap .cont .rt .parimg:nth-child(7) { left: 90%; top: 63%; } .ind_d .casewrap .cont .parlogobox { display: none; } .ind_d .casewrap .cont .rt::before { content: ""; display: block; padding-top: 49.6894%; width: 100%; } .ind_d .casewrap .cont .lt { position: absolute; left: 0; top: 0; } .ind_d .casewrap .cont .lt .title { color: #444444; font-size: 32px; padding-bottom: 25px; position: relative; margin-bottom: 22px; } .ind_d .casewrap .cont .lt .title::after { position: absolute; right: 0; bottom: 0; width: 800px; height: 2px; background: #e5e5e5; } .ind_d .casewrap .cont .lt .text { width: 468px; font-family: microsoftyahei; line-height: 28px; color: #888888; margin-bottom: 62px; } .ind_d .casewrap .cont .lt .numbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .ind_d .casewrap .cont .lt .numbox .num { text-align: center; margin-right: 68px; } .ind_d .casewrap .cont .lt .numbox .num .top { color: #21212b; margin-bottom: 15px; } .ind_d .casewrap .cont .lt .numbox .num .top .big { font-size: 48px; } .ind_d .casewrap .cont .lt .numbox .num .top .sup { font-size: 12px; } .ind_d .casewrap .cont .lt .numbox .num .te { color: #444444; font-size: 12px; } .ind_d .casewrap .cont .lt .numbox .num:last-child { margin-right: 0; } .ind_e { border-top: 1px solid #ddd; } .ind_e .e_wrap { width: 86.4583%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .ind_e .e_wrap .mkbox { width: 33.3333%; text-align: center; overflow: hidden; padding: 120px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ind_e .e_wrap .mkbox .iconbox { width: 55px; height: 55px; overflow: hidden; margin: 0px auto 38px auto; } .ind_e .e_wrap .mkbox .iconbox img { display: block; -webkit-transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .ind_e .e_wrap .mkbox .en { color: #bc8e7b; font-size: 48px; margin-bottom: 18px; } .ind_e .e_wrap .mkbox .cn { font-size: 24px; line-height: 33px; color: #000000; margin-bottom: 62px; } .ind_e .e_wrap .mkbox .line { width: 40px; height: 1px; background: #000; margin: 0 auto 26px auto; } .ind_e .e_wrap .mkbox .btnbox .morebtn { margin: 0 auto; } .ind_e .e_wrap .mkbox:nth-child(2) { border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .ind_e .e_wrap .mkbox:hover .iconbox .no { margin-top: -55px; } @media screen and (max-width: 1366px) { .ind_a { padding: 144px 0 280px 0; } .ind_a .lt { width: 420px; } } @media screen and (max-width: 1024px) { .ind_a { padding: 60px 0 180px 0; -webkit-background-size: 1400px 1400px; -moz-background-size: 1400px; background-size: 1400px; } .ind_a .lt { width: 300px; } .ind_a .lt .videobox .br { right: -39%; } .ind_a .rt { width: 450px; } .ind_a .rt .text { padding-left: 60px; } .ind_a .rt .btnbox { padding-left: 60px; } .ind_b { padding-top: 60px; } .ind_b .mk_title { margin-bottom: 60px; } .ind_b .wrap1260 .side { width: 700px; padding: 60px; } .ind_b .wrap1260 .side .title { font-size: 42px; margin-bottom: 40px; } .ind_b .wrap1260 .side .desc { margin-bottom: 200px; } .ind_b .wrap1260 .side .mukuaibox .to { height: 44px; line-height: 44px; } .ind_c { -webkit-background-size: 750px 750px; -moz-background-size: 750px; background-size: 750px; padding: 60px 0; -webkit-background-size: 650px 650px; -moz-background-size: 650px; background-size: 650px; } .ind_c .casebox #caseswiper { padding-bottom: 20px; margin-bottom: 30px; } .ind_c .casebox #caseswiper #casesp { display: block; bottom: 0; } .ind_c .casebox #caseswiper #casesp .swiper-pagination-bullet-active { background: #bc8e7b; } .ind_d .casewrap { width: 90%; } .ind_d .casewrap .mk_title { margin-bottom: 40px; } .ind_d .casewrap .cont .rt { width: 100%; float: none; margin-right: 0; margin-bottom: 40px; } .ind_d .casewrap .cont .lt { position: static; text-align: center; } .ind_d .casewrap .cont .lt .text { margin: 0 auto 40px auto; } .ind_d .casewrap .cont .lt .numbox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 768px) { .banner .swiper-slide { height: 100%; height: 100vh; } .banner .swiper-slide img { max-width: 200%; height: 100%; } .banner .div_cont .rt { display: none; } .banner .div_cont .wrap1260 { width: 100%; } .banner .div_cont .cont { width: 100%; height: auto; padding: 20px; } .banner .div_cont .cont .te { font-size: 24px; } .ind_a { padding: 60px 0; -webkit-background-size: auto 100%; -moz-background-size: auto 100%; background-size: auto 100%; } .ind_a .rt { width: 100%; } .ind_a .rt .mk_title { margin: 0px 0 20px 0; } .ind_a .rt .text { padding-left: 0; font-size: 14px; line-height: 28px; margin-bottom: 30px; } .ind_a .rt .btnbox { padding-left: 0; margin-bottom: 40px; } .ind_a .lt { width: 100%; } .ind_a .lt .videobox .br { display: none; } .ind_b .mk_title { margin-bottom: 40px; } .ind_b #qwswiper { padding-top: 0; position: static; } .ind_b #qwswiper .btncontrol { display: none; } .ind_b .wrap1260 .side { width: 100%; padding: 40px 20px; } .ind_b .wrap1260 .side .title { font-size: 24px; margin-bottom: 20px; } .ind_b .wrap1260 .side .name { font-size: 18px; } .ind_b .wrap1260 .side .desc { font-size: 14px; line-height: 28px; margin-bottom: 20px; } .ind_b .wrap1260 .side .mukuaibox { width: 100%; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-bottom: 0; } .ind_b .wrap1260 .side .mukuaibox .ht::after { display: none; } .ind_c .casebox #caseswiper { padding-bottom: 40px; } .ind_d .casewrap .cont .lt .title { font-size: 20px; padding-bottom: 0; margin-bottom: 40px; } .ind_d .casewrap .cont .lt .text { width: 100%; } .ind_d .casewrap .cont .lt .numbox { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .ind_d .casewrap .cont .lt .numbox .num { margin-right: 0; } .ind_d .casewrap .cont .lt .numbox .num .top .big { font-size: 30px; } .ind_d .casewrap .cont .rt .parimg { display: none; } .ind_d .casewrap .cont .parlogobox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .ind_d .casewrap .cont .parlogobox .parimg { width: 30%; margin-bottom: 30px; margin-right: 5%; } .ind_d .casewrap .cont .parlogobox .parimg img { width: 100%; } .ind_d .casewrap .cont .parlogobox .parimg:nth-child(3n) { margin-right: 0; } .ind_e .e_wrap { width: 100%; } .ind_e .e_wrap .mkbox:nth-child(2) { border-left: none; border-right: none; } .ind_e .e_wrap .mkbox { padding: 40px 0; width: 100%; border-bottom: 1px solid #ddd; } .ind_e .e_wrap .mkbox .iconbox { margin: 0px auto 10px auto; } .ind_e .e_wrap .mkbox .en { margin-bottom: 0; } .ind_e .e_wrap .mkbox .cn { font-size: 20px; margin-bottom: 30px; } .ind_e .e_wrap .mkbox .line { margin-bottom: 30px; } }