html, body { font-family: "gothamrounded-book"; } a { text-decoration: none; } ul { padding: 0; } li { list-style: none; padding: 0; } .rel{ position: relative; } .abs { position: absolute; } .clear::after { content: ""; display: block; clear: both; } .inline-block { display: inline-block; } .left { float: left; } .floor1 { position: relative; color: #fff; } .floor1 video { width: 100%; height: 100%; position: relative; object-fit: cover; object-position: center center; } .floor1_box { width: 800px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .floor1_box_top { font-size: 30px; margin-bottom: 30px; } .floor1_box_top div { display: inline-block; } .floor1_box_top span { display: inline-block; width: 100px; height: 1px; border-radius: .5px; background: #fff; vertical-align: middle; margin: 0 15px; } .floor1_box_bottom { font-size: 20px; } .floor1_icon { width: 64px; position: absolute; left: 50%; margin-left: -25px; bottom: 20px; animation: down 1.2s infinite; cursor: pointer; } @keyframes down { 0% { bottom: 40px; } 50% { bottom: 20px; } 100% { bottom: 40px; } } .floor2_top { background: #1F5EA2; color: #fff; } .floor2_top_row { height: 230px; margin: auto; } .floor2_top_row_left { font-size: 20px; width: 400px; line-height: 230px; ; } .floor2_top_row_left img { width: 49px; } .floor2_top_row_right { width: calc(100% - 400px); text-align: left; } .floor2_top_row_right>div { position: relative; width: calc(33% - 6px); text-align: center; padding-top: 50px; } .floor2_top_row_right>div::before { content: ""; display: block; position: absolute; left: 0; top: 80px; width: 3px; height: 66px; background: #545454; } .floor2_top_row_right>div:last-child::after { content: ""; display: block; position: absolute; right: 0; top: 80px; width: 3px; height: 66px; background: #545454; } .floor2_bottom { margin: auto; } .floor2_bottom_tit { color: #435DC6; font-size: 38px; margin-top: 50px; } .floor2_bottom_subtit { font-size: 16px; color: #545454; margin: 15px 0; } .floor2_bottom_subtit_line { width: 70px; height: 3px; background: #435DC6; margin: auto; } .solution_list { margin-top: 30px; padding-left: 0; } .solution_list li { width: 420px; float: left; margin: 75px; list-style-type: none; padding-left: 0; } .solution_list li a { display: block; text-decoration: none; } .solution_list li .figure { background-color: #eee; height: 280px; display: block; line-height: normal; overflow: hidden; position: relative; } .solution_list li .figure .mark { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(51, 155, 235, .2); background: #eb6123\9; filter: alpha(opacity=20); z-index: 20; opacity: 0; transform: skewX(45deg); visibility: hidden; transition: 360ms; } .solution_list li f.igure .mark:before { content: ""; width: 100%; height: 0%; border-left: 3px solid #339beb; border-right: 3px solid #339beb; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; } .solution_list li .figure .mark:after { content: ""; width: 0%; height: 100%; border-top: 3px solid #339beb; border-bottom: 3px solid #339beb; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; } .solution_list li .figure .mark b { display: block; width: 46px; height: 46px; position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px; z-index: 30; } .solution_list li .figure .mark b:before { content: ""; width: 100%; height: 1px; background: #339beb; position: absolute; left: 0; top: 23px; transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); } .solution_list li .figure .mark b:after { content: ""; width: 1px; height: 100%; background: #339beb; position: absolute; left: 23px; top: 0; transform: translateY(-200px); -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); } .solution_list li .figure img { display: block; width: 420px; height: 280px; transition: 424ms linear; } .solution_list li p { display: block; color: #5d5d5d; font-size: 14px; line-height: normal; margin-top: 14px; transition: 350ms; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .solution_list li:hover .figure .mark { opacity: 1; transform: skewX(0); visibility: visible; } .solution_list li:hover .figure .mark:before { height: 100%; transition: 330ms 200ms; } .solution_list li:hover .figure .mark:after { width: 100%; transition: 330ms 200ms; } .solution_list li:hover .figure img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); } .solution_list li:hover .figure .mark b:before { transition: 355ms 180ms; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); } .solution_list li:hover .figure .mark b:after { transition: 355ms 240ms; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); } .solution_list li:hover p { color: #339beb; } .floor3_box { color: #fff; margin: auto; text-align: left; padding: 30px 0; font-family: cursive; } .floor3_tit { font-size: 38px; margin-bottom: 20px; } .floor3_main { font-size: 18px; line-height: 40px; border-bottom: 1px solid #fff; } .floor3_left { width: 120px; } .floor3_right { width: calc(100% - 120px); } .floor3_right_col { width: calc(100% - 120px); text-align: center; /* border-top: 1px solid #fff; border-bottom: 1px solid #fff; */ } .floor3_right_col1 { width: 120px; position: relative; } .floor3_right_col1::after { content: ""; display: block; position: absolute; right: 0; top: 0; background: #fff; width: 1px; height: 40px; } .floor3_right_col2 { width: calc(100% - 120px); } .floor3_right_col2 div { width: 50%; text-align: center; } .floor4_main { margin: 50px auto 0; } .floor4_ul { padding: 0; margin-top: 40px; } .floor4_ul li { list-style: none; padding: 0; width: 50%; float: left; padding: 8px 12px; box-sizing: border-box; } .floor4_ul li a { border: 1px solid #e5e5e5; display: block; width: 100%; padding: 10px 35px 10px 120px; position: relative; height: 110px; box-sizing: border-box; } .floor4_ul li .time { display: block; width: 96px; height: 96px; position: absolute; left: 35px; top: 50%; margin-top: -48px; border-radius: 50%; padding: 18px 0 0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; border: 1px solid #d7d7d7; box-shadow: 0 0 0 1px #fff; width: 70px; height: 70px; left: 25px; padding: 10px 0 0; margin-top: -35px; box-sizing: border-box; color: #3f3f3f; } .floor4_ul li:hover .time { background: #477E9A; color: #fff; } .floor4_ul li .time div { line-height: 24px; font-size: 20px; height: 24px; } .floor4_ul li .time p { line-height: 20px; font-size: 14px; height: 20px; margin: 0 auto; overflow: hidden; } .floor4_txt { text-align: left; } .floor4_txt .title { color: #000; font-size: 16px; line-height: 24px; height: 24px; padding: 0 50px 0 0; overflow: hidden; } .floor4_ul li:hover .title { color: #477E9a } .floor4_txt p { color: #666; font-size: 14px; margin: 13px 0 0; line-height: 24px; height: 48px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .floor4_more{ position: relative; border:1px solid #E5E5E5; padding: 15px 24px; width: 320px; margin: 40px auto 0; cursor: pointer; } /* .floor4_more:hover{ background: #4093fe; color:#fff; } */ .floor4_more img{ position: absolute; right:105px; top:14px; width: 20px; transform: rotate(-90deg); transition: all .45s; } .floor4_more:hover img{ right: 85px; } .advantage_tit { margin-bottom: 60px; } .advantage_tit h2 { font-weight: bold; color: #333; margin-bottom: 25px; } .advantage_tit h5 { padding: 0 180px; line-height: 28px; color: #333; } .advantage_list { display: flex; justify-content: space-between; flex-wrap: wrap; } .advantage_list li { width: 30%; text-align: center; overflow: hidden; box-shadow: 0 0 14px 0 rgba(121, 141, 173, .32); padding: 15px; margin-bottom: 28px; } .advantage_list li .advantage_img { width: 54px; height: 54px; line-height: 54px; background: #7B8CAD; border-radius: 50%; overflow: hidden; margin: 15px auto; } .advantage_list li h2 { font-size: 20px; font-weight: bold; color: #1D1D1F; } .advantage_list li p { color: #000; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 24px; height: 72px; padding: 0 5px; } .floor5 { margin-top: 50px; position: relative; } .floor5_img { position: absolute; top: 30%; width: 450px; transform: rotate(16deg); left: 50%; margin-left: -225px; } .floor6 { text-align: left; } .floor6_title { margin-top: 50px; color: #333; position: relative; padding: 78px 20px 40px; border-bottom: 1px #e4e4e4 solid; border-top: 1px #e4e4e4 solid; margin-bottom: 40px; } .floor6_mapicon { position: absolute; left: 50%; top: -25px; transform: translateX(-20px); padding: 0 10px; background: #fff; cursor: pointer; } .floor6_mapicon img { width: 40px; } .floor6_title h3 { font-size: 24px; font-weight: bold; } .floor6_title p { font-size: 16px; line-height: 32px; ; } .floor6_title .bold { font-weight: bold; } .floor6_map { width: 100%; height: 400px; }