.content1 { width: 100%; height: 460px; background-image: url(/uploads/image/hptqimg/banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .black{ width: 1200px; margin: auto; text-align: center; } .title{ display: inline-block; } .title p:nth-of-type(1){ font-size: 46px; color: #ff4a60; } .title p.en_text{ font-size: 20px; color: #999999; } .title p.line{ position: relative; width: 440px; height: 1px; background: #efefef; margin-top: 6px; } .title p.line:before{ content: ''; position: absolute; left: 170px;top: -1px; display: inline-block; width: 100px; height: 3px; background: #ff4a60; } .black1{ padding: 114px 0; } .black1_con_p{ position: relative; } .black1_con_p:before{ content: ''; position: absolute; z-index: 1; left: 50px; width: 1100px; height: 300px; bottom: 0px; box-shadow: 0 24px 28px rgba(139,0,0,.1); } .black1_con{ position: relative; background: #fff; z-index: 2; width: 1150px; margin: 60px auto 0; box-shadow: 0 0 20px rgba(255,0,0,.1); padding: 20px; border-radius: 8px; } .black1_con > div{ display: inline-block; vertical-align: top; } .black1_con_l{ width: 690px; font-size: 0; } .black1_con_l img{ display: inline-block; } .black1_con_l img:nth-of-type(n 3){ margin-top: 10px; } .black1_con_l img:nth-of-type(2n 1){ margin-right: 10px; } .black1_con_r{ width: 380px; margin-left: 20px; font-size: 17px; padding-top: 24px; text-align: justify; line-height: 27px; } .black1_con_r p:nth-of-type(2){ margin-top: 45px; } .black2{ height: 415px; /*background: url(/uploads/image/hptqimg/b21.jpg) center no-repeat/cover;*/ /*background: url(/uploads/image/hptqimg/b21.jpg) no-repeat center / cover;*/ background-image: url(/uploads/image/hptqimg/b21.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .black2 .black{ display: flex; flex-wrap: wrap; justify-content: space-around; } .black2_con{ display: inline-block; width: 310px; text-align: center; margin-top: 48px; } .title_min{ display: inline-block; } .title_min p:nth-of-type(1){ font-size: 26px; color: #fff; } .title_min p.en_text{ font-size: 16px; color: #999999; } .title_min p.line{ position: relative; width: 150px; height: 1px; background: rgba(255,255,255,.3); margin-top: 6px; } .title_min p.line:before{ content: ''; position: absolute; left: 55px;top: -1px; display: inline-block; width: 40px; height: 3px; background: #ff4a60; } .black2_con_con{ margin-top: 10px; } .black2_con_con > p{ font-size: 18px; color: #fff; } .black3{ padding: 120px 0; } .black3 .black3_con{ position: relative; } .black3 .black3_con1{ margin-top: 50px; } .black3 .black3_con > div,.black3 .black3_con > img{ display: inline-block; vertical-align: top; width: 560px; } .black3 .black3_con > img{ width: 590px; margin: 0; } .black3_con_text{ position: relative; height: 180px; margin: 20px 13px 0; } .black3_con_text > div{ display: inline-block; vertical-align: middle; } .black3_con_text .temd{ display: inline-block; width: 0; height: 180px; vertical-align: top; vertical-align: middle; } .black3_con_text:before{ content: ''; position: absolute; top: 0;left: 20px; border: 15px solid #ff4a60; border-right: 15px solid #fff; border-bottom: 15px solid #fff; } .black3_con_text:after{ content: ''; position: absolute; right: 20px;bottom: 0; border: 15px solid #ff4a60; border-left: 15px solid #fff; border-top: 15px solid #fff; } .black3_con .title_min p:nth-of-type(1){ color: #ff4a60; } .black3_con .title_min p.line{ width: 340px; background: #efefef; } .black3_con .title_min p.line:before{ width: 60px; left: 140px; } .black3_con_text > div > p{ font-size: 18px; margin-top: 6px; } .black3_con2 .black3_con_text{ margin-top: 92px; } .black3_title2{ margin-top: 60px; } .black3_con3{ margin-top: 56px; padding: 0 30px; display: flex; justify-content: space-between; } .black3_con3_itemp{ position: relative; display: inline-block; width: 330px; vertical-align: top; } .black3_con3_itemp:before{ content: ''; position: absolute; z-index: 1; width: 300px; height: 196px; left: 15px; border-radius: 6px; box-shadow: 0 12px 20px rgba(139,0,0,.1); } .black3_con3_item{ position: relative; z-index: 2; height: 196px; overflow: hidden; border-radius: 6px; box-shadow: 0 0 20px rgba(255,0,0,.1); background-color: #fff; background-image: url(/uploads/image/hptqimg/b33.png); background-repeat: no-repeat; background-position: left bottom; } .black3_con3_item img{ position: absolute; left: 0; } .black3_con3_p{ font-size: 26px; color: #ff4a60; text-align: left; padding-left: 75px; padding-top: 19px; } .black3_con3_p:before{ content: ''; display: inline-block; width: 38px; height: 2px; background: #ff6d83; vertical-align: middle; margin-right: 8px; } .black3_con3_p:after{ content: ''; display: inline-block; width: 76px; height: 2px; background: #ff6d83; vertical-align: middle; margin-left: 8px; } .black3_con3_con{ padding: 10px 18px; font-size: 16px; text-align: justify; line-height: 24px; } .black3_con3_p2:after{ width: 49px; } .black4{ height: 560px; font-size: 0; background: url(/uploads/image/hptqimg/b41.jpg) no-repeat center; } .black4_l{ display: inline-block; width: 440px; margin-left: 25px; margin-right: 10px; padding-top: 60px; } .black4_l p.en_text{ color: rgba(255,255,255,.5); } .black4_l > p{ font-size: 15px; color: #500101; line-height: 27px; text-align: justify; margin-top: 11px; font-weight: bold; } .black4_r{ display: inline-block; height: 560px; } .black5{ padding: 120px 0; } .black5_con{ position: relative; margin-top: 40px; height: 420px; background: url(/uploads/image/hptqimg/b51.jpg) no-repeat center 14px; } .black5_con_img{ position: absolute; cursor: pointer; } .black5_con_img .main_img{ position: relative; z-index: 2; } .black5_con_img:before{ content: ''; display: block; position: absolute; width: 84%; height: 100%; left: 8%; bottom: 0; box-shadow: 0 5px 16px rgba(40,0,0,.3); } .b51{ position: absolute; z-index: 3; right: -16px;bottom: -20px; } .jm1{ top: 0;left: 40px; } .jm2{ top: 152px;left: 25px; } .jm3{ top: 60px;left: 230px; } .jm4{ top: 242px;left: 205px; } .jm5{ top: 8px;left: 386px; } .jm6{ top: 211px;left: 418px; } .jm7{ top: 10px;left: 566px; } .jm8{ top: 198px;left: 628px; } .jm9{ top: 31px;left: 815px; } .jm10{ top: 230px;right: 222px; } .jm11{ top: 70px;right: 40px; } .jm12{ top: 244px;right: 40px; } .black5_con .more{ position: absolute; width: 100%; left: 0;bottom: 0; text-align: center; } .black5_con .more span{ display: inline-block; cursor: pointer; font-size: 18px; padding: 8px 70px; border: 2px solid #999999; border-radius: 4px; background: #fff; } .black5_mask{ display: none; position: relative; z-index: 3; width: 34%; padding: 16px; margin: auto; background: rgba(0,0,0,.8); border-radius: 14px; box-shadow: 0 9px 20px rgba(40,0,0,.5); } .black5_mask p{ font-size: 16px; color: #fff; text-align: justify; margin-top: 6px; } .black6{ height: 495px; font-size: 0; background: url(/uploads/image/hptqimg/b61.jpg) center no-repeat; } .black6_l{ display: inline-block; vertical-align: top; width: 355px; margin-left: 25px; margin-right: 10px; padding-top: 60px; } .black6_l p.top_t{ color: rgba(255,255,255); } .black6_l p.en_text{ color: rgba(255,255,255,.5); } .black6_l p.line{ width: 355px; } .black6_l p.line:before{ left: 127px; } .black6_l > p{ font-size: 18px; color: #f7f7f7; line-height: 27px; text-align: justify; margin-top: 16px; } .black6_l .more{ text-align: center; color: #fff; } .black6_l .more span{ display: inline-block; padding: 4px 70px; cursor: pointer; border: 2px solid #fff; border-radius: 4px; color: #fff; } .black6_r{ display: inline-block; vertical-align: top; width: 766px; padding-top: 60px; margin-left: 20px; } .black6_r_con{ display: flex; justify-content: space-between; flex-wrap: wrap; } .black6_r_con img{ display: inline-block; margin: 8px 0; } .black7{ padding: 120px 0; } .black7_con{ margin-top: 60px; } .black7_item{ position: relative; display: inline-block; cursor: pointer; overflow: hidden; } .black7_mask_con{ position: absolute; width: 100%;height: 100%; left: 0;top: 0; background: rgba(0,0,0,.7); color: #fff; border-bottom: 4px solid red; } .black7_mask_con1{ padding: 6px 50px 0; top: 90%; } .black7_mask_con p:nth-of-type(1){ font-size: 18px; text-align: center; display: inline-block; padding: 0 50px 14px; border-bottom: 2px solid #fff; } .black7_mask_con p:nth-of-type(2){ font-size: 14px; margin-top: 10px; text-align: left; line-height: 23px } .black7_l{ display: inline-block; vertical-align: top; } .black7_r{ display: inline-block; vertical-align: top; width: 790px; margin-left: 5px; } .black7_r_con{ display: flex; justify-content: space-between; flex-wrap: wrap; } .black7_mask_con2{ top: 82%; padding: 0 12px; } .black7_mask_con2 p:nth-of-type(1){ width: 200px; padding: 5px 0 14px; } .black7_r_con .black7_item:nth-of-type(4),.black7_r_con .black7_item:nth-of-type(5){ margin-top: 10px; } .wcimg_new { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .3); text-align: center; display: none; z-index: 99; } .wcimg_new img { width: 470px; margin-top: 18%; }