body, html { height: 100%; } * { margin: 0; padding: 0; } @font-face { font-family: 'pingfang'; src: url('../font/pingfang.ttf') format('truetype'); } body { background: url(../images/bg.jpg) no-repeat center center; font-family: "pingfang"; } .el-header { height: 8%; min-width: 1366px; min-height: 61px; background: url(../images/head_bg.png) no-repeat center center; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 30px; } .el-main { height: 100%; width: 100%; /* border: 1px solid red; */ } .main { height: 100%; } .left_div_item { height: 100%; /* border: 1px solid red; */ display: flex; justify-content: center; align-items: center; } .left_div_item_child { height: 95%; width: 95%; background-color: rgba(128, 255, 255, 0.145098039215686); position: relative; } .left_div_item_child_1 { height: 95%; width: 97.5%; background-color: rgba(128, 255, 255, 0.145098039215686); position: relative; } .right_div_item { height: 100%; /* border: 1px solid orange; */ display: flex; justify-content: center; align-items: center; } .right_div_item_child { height: 98.5%; width: 98.2%; background-color: rgba(128, 255, 255, 0.145098039215686); } .angle_left_up { position: absolute; top: -2px; left: -2px; } .angle_left_down { position: absolute; left: -2px; bottom: -2px; } .angle_right_up { position: absolute; right: -2px; top: -2px; } .angle_right_down { position: absolute; right: -2px; bottom: -2px; } .div_title { color: #81D3F8; font-size: 12px; display: flex; align-items: center; margin-left: 30px; height: 20%; } .div_1_content { height: 80%; } .div_1_item { display: flex; height: 50%; align-items: center; } .div_left_1_icon { position: relative; margin-left: 30px; } .div_left_1_text { display: flex; align-items: center; margin: -10px 0 0 25px; } .div_left_1_num { display: flex; align-items: center; margin: -10px 0 0 45px; } .text_color_1 { color: #01DFF4; } .text_color_2 { color: #F7BB39; } .circle-icon { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); align-items: center; } .div_2_content { height: 80%; display: flex; justify-content: center; align-items: center; } ul, ul li { list-style: none; } ul.wrap { width: 260px; /* margin: 200px auto; */ display: flex; flex-wrap: wrap; color: #00FFFF; margin-top: -30px; } ul.wrap li { width: 130px; height: 70px; line-height: 70px; text-align: center; margin-left: -1px; margin-top: -1px; box-sizing: border-box; } ul.wrap li:nth-child(2n+1) { margin-left: 0px; } .div_3_content { height: 80%; display: flex; justify-content: center; align-items: center; } .div_4_content { height: 80%; /* display: flex; justify-content: center; align-items: center; */ } .div_right_title { color: #81D3F8; font-size: 12px; display: flex; align-items: center; margin-left: 30px; height: 5.7%; } .div_right_content { height: 94%; } .div_options { display: flex; align-items: center; color: #81D3F8; font-size: 14px; margin-left: 30px; } .div_right_items { /* margin-top: 20px; */ } .div_right_item { margin-top: 20px; padding: 0 20px; margin-bottom: 30px; } .item_title { background-color: rgba(129, 211, 248, 0.305882352941176); color: #FFF; font-size: 14px; padding: 8px 0 8px 20px; } .item_content { display: flex; align-items: center; margin-top: 18px; margin-left: 20px; color: #81D3F8; font-size: 14px; width: 100%; } .item_content_text { margin-left: 10px; }