.content{ width: 100%; margin-top: 22px; } .content_1{ margin: 0 auto; width: 1200px; box-sizing: border-box; display: flex; } .content_1_left{ /* overflow: hidden; */ width: 790px; /* margin-right: 410px; */ float: right; } .tiltle_div{ display: flex; width: 85%; height: 38px; justify-content: space-between; align-items:center; } /* 标题h2模板 */ .h2_mode{ display: flex; /* padding-bottom: 25px; */ align-items:baseline; /* hei */ } .h2_mode >h3{ font-size: 24px; font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif; font-weight:lighter ; font-style: normal; } .h2_mode p{ font-weight:lighter ; font-style: normal; font-size: 14px; font-family: PingFangSC-Regular,poppin,Tahoma,Arial,sans-serif; color: #999; margin-left: 10px; } .tiltle_div img{ width: 46px; height: 25px; } /* 左边内容 */ .content_1_left_content{ width: 820px; /* height: 820px; */ display: flex; flex-wrap: wrap; } /* 第一行左边图文模板 */ .content_1_left_content_img{ width: 173px; display: block; margin-bottom: 26px; transition: all ease 1s; margin-right: 20px; } .c1_l_img_div a{ overflow: hidden; position: relative; transition: all ease 1s; } .content_1_left_content_img img{ width: 173px; height: 173px; transition: all ease 1s; } .content_1_left_content_img a{ color: #333; font-weight: lighter; /* font-weight: 400; */ font-size: 14px; margin-top: 10px; display: block; transition: all ease 1s; } .content_1_left_content_img:hover .content_1_left_content_txt{ font-weight: bolder; } .content_1_left_content_img:hover .c1_l_img_div div{ display: block; transition: all ease 1s; /* opacity: 1; */ } .content_1_left_content_img:hover .c1_l_img_div img{ /* transition: all .5s linear 0s; */ transform: scale(1.1); transition: all ease 1s; } .icon-bofang{ font-size: 30px !important; color: #fff !important; margin-top:7px; margin-left: 10px; display: inline-block; } .c1_l_img_div div{ width: 50px; height: 50px; border-radius: 50%; background: #000; opacity: 0.5; position: absolute; top: 50%; left: 50%; margin-top: calc(-50px/2); margin-left: calc(-50px/2); display: none; transition: all ease 1s; } .content_1_right{ width: 330px; } .content_1_right_top{ width: 330px; display: flex; flex-wrap: wrap-reverse; margin-top: 20px; } .content_1_right a{ display: block; color: #333; /* font-weight: ligh; */ /* font-style: 12px; */ } .right_top_txt{ width: 105px; height: 42px; border-radius: 40px; margin-bottom: 15px; border:1px solid #ededed; text-align: center; line-height: 42px; transition: all 0.2s; font-size: 14px; } .right_top_txt:hover{ box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); } /* 第一行右边底下 */ .content_1_right_bottom{ width: 330px; margin-top: 10px; } .bottom_bg_div{ width: 50px; height: 50px; border-radius: 50%; background: rgb(234, 78, 27); box-shadow: 1 3px 4px 1 rgba(0,0,0,.1); } .bottom_bg_div{ width: 50px; height: 50px; border-radius: 50%; position: relative; } .right_bottom_bottom ul{ display: flex; flex-wrap: wrap-reverse; margin-top: 0px; /* margin-left: 0px; */ padding:0px; } .right_bottom_bottom ul li{ width: 25%; margin: 10px 0px; position: relative; box-sizing: border-box; } .bottom_bg_div i{ /* text-align: center; */ /* line-height: 26px; */ padding-top: 10px; padding-left: 13px; display: block; font-weight: bolder; } .bottom_shadow{ background: #000; opacity: .5; width: 50px; height: 50px; border-radius: 50%; top:0px; /* position; */ position: absolute; display: none; } .bottom_shadow+p{ color: #333; font-size: 14px; margin-top: 10px; } .icon-xianxingbolang{ font-size: 26px !important; color: #FFF } .right_bottom_bottom ul li:hover .bottom_shadow{ display: block; /* opacity: none; */ } /* 中间第二行 */ .content_2{ width: 100%; height: 300px; display: flex; } .c2_img{ display: flex; overflow: hidden; width: 1200px; height: 300px; margin:0 auto; } .c2_img img{ margin-left: 40px; position: relative; right: 600px; } .c2_click_l,.c2_click_r{ height: 64px; width: 64px; display: inline-block; } .c2_click_l{left: 70px; top: 20px; position: absolute; } .c2_click_l a,.c2_click_r a{ font-size: 100px; color:#ccc; font-weight: lighter; position: absolute; top: 780px; } .c2_click_r{ top: 20px; right: 70px; position: absolute; } .content_3{ width: 100%; margin-top: 60px; } .c3_content{ width: 1200px; margin:0 auto; /* display: flex; */ } .c3_r{ height: 40px; width: 40px; border-radius: 50%; background: #fff; position: relative;; top:-110px; right: -150px; } .h2_mode+div{ display: flex; } .c3_txt{ margin-top: 40px; } .content_4{} .content_5{} .content_6{} .content_7{}