* { font-weight: normal; } a { text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; outline: none; } .allmain { padding: 100px 0; } .allmain_li { margin: 15px 0; } .allmain_box { position: relative; overflow: hidden; } .allmainimg { position: relative; overflow: hidden; width: 100%; height: auto; display: block; padding-top: 66%; } .allmainimg img { width: 100%; vertical-align: middle; position: absolute; top: 0; left: 0; object-fit: cover; height: 100%; } .allmain_cover { opacity: 0; transform: scale(1.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--rootColor); z-index: 999; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .allmain_txt { width: 80%; margin: 0 auto; opacity: 0; visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); z-index: 9999; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .allmain_txt h3 { font-size: 26px; color: #fff; font-weight: bold; text-align: center; margin-bottom: 20px; text-align: center; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; z-index: 9999; } .allmain_txt p { font-size: 16px; color: #fff; text-align: center; line-height: 28px; z-index: 9999; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .allmain_li:hover .allmain_txt { opacity: 1; visibility: visible; transform: translate(-50%, -50%); } .allmain_li:hover .allmain_cover { // transform: scale(0.9); opacity: 0.9; } .allmainflex { width: 100%; } .brand { background: url(/img/home/img5.jpg) no-repeat 50% 50%; background-size: 100%; padding: 100px 0; position: relative; // z-index: -1; } .brandcover { background-color: transparent; background-image: linear-gradient(300deg, #000000BD 83%, var(--rootColor) 60%); opacity: 0.95; z-index: 9; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .brand_txt { display: flex; flex-direction: column; align-items: center; z-index: 99; width: 45%; margin: 0 auto; } .brand_txt h2 { margin-bottom: 30px; font-size: 48px; text-transform: uppercase; font-weight: bold; color: #fff; text-align: center; z-index: 99; line-height: 58px; } .brand_txt p { font-size: 18px; color: #fff; text-align: center; line-height: 28px; z-index: 99; } .brand_more { display: block; padding: 15px 60px; background-color: var(--rootColor); text-align: center; font-size: 20px; font-weight: bold; color: #fff; margin: 50px auto 0 auto; z-index: 99; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .brand_more:hover { padding: 15px 90px; transform: scale(1.1); color: #fff; } .brand_txt a { z-index: 99; } .bcard { background: url(/img/home/img2.jpg) no-repeat 50% 50%; background-size: 100%; padding: 100px 0 100px 0; position: relative; } // .bcard_li { // position: absolute; // top: 0; // left: 0; // width: 100%; // height: 100%; // background-color: #000; // opacity: 0.8; // } .bcardcover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; } .bcard_title { display: flex; flex-direction: column; align-items: center; margin-bottom: 60px; z-index: 9; } .bcard_title span { font-size: 24px; color: var(--rootColor); font-weight: bold; text-transform: uppercase; text-align: center; display: block; margin-bottom: 15px; z-index: 9; } .bcard_title h2 { font-size: 48px; color: #fff; font-weight: bold; text-transform: uppercase; text-align: center; z-index: 9; } .bcard_box { display: flex; justify-content: flex-start; } .bcardicon { display: block; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background-color: var(--rootColor); margin-right: 15px; text-align: center; } .bcardicon i { font-size: 40px; color: #fff; text-align: center; } .bcard_txt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .bcard_txt h3 { font-size: 24px; color: #fff; margin-bottom: 10px; font-weight: bold; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bcard_txt p { font-size: 16px; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bcard_more { display: flex; justify-content: flex-start; align-items: center; margin-top: 15px; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .bcard_more h4 { font-size: 18px; color: var(--rootColor); font-weight: bold; } .bcard_more i { font-size: 18px; color: var(--rootColor); margin-left: 15px; font-weight: bold; } .bcard_li { margin-bottom: 60px; } .bcard_more:hover { margin-left: 30px; } .number { background-color: var(--rootColor); } .number_con { background-color: var(--rootColor); // box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5); padding: 30px 30px 20px; // margin-bottom: -20px; position: relative; z-index: 999; } .number_con ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; align-items: center; } .number_con li { // width: calc((100% - 20px) / 4); overflow: hidden; display: flex; // flex-direction: column; justify-content: center; flex-wrap: wrap; align-items: center; margin-bottom: 15px; } .number_con li i { color: var(--rootColor); font-weight: bold; text-align: center; } .number_con li span { padding-left: 1px; margin-right: 5px; background-color: #fff; border-radius: 50%; border: 1px solid var(--rootColor); font-weight: bold; width: 20px; height: 20px; line-height: 20px; font-family: "impact"; display: block; } .number_con li p { font-size: 20px; font-weight: bold; text-align: center; color: #fff; margin-bottom: 0; } .videocard { padding: 100px 0; } .videocard_title span { font-size: 24px; color: var(--rootColor); font-weight: bold; text-transform: uppercase; } .videocard_title h2 { font-size: 48px; color: #0B2154; font-weight: bold; text-transform: uppercase; margin: 15px 0; } .videocard_title p { font-size: 16px; color: #666; line-height: 28px; } .videocard_list { margin-top: 30px; } .videocard_list ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .videocard_list li { display: flex; justify-content: flex-start; margin-bottom: 15px; width: 48%; overflow: hidden; } .videocard_list li span { margin-top: 5px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; border: 1px solid var(--rootColor); margin-right: 15px; } .videocard_list li i { font-size: 16px; color: var(--rootColor); text-align: center; } .videocard_list li p { font-size: 16px; color: #0B2154; flex: 1; } .videocard_right_img img { width: 100%; } .videoimgbtn { cursor: pointer; position: relative; } .videoimgbtn img { width: 100%; vertical-align: middle; } .videocardflex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .videoplay { animation: scale2 2s infinite; position: absolute; top: 10%; left: 10%; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; border: 2px solid var(--rootColor); } .point2 { position: absolute; top: 8%; left: 8%; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background-color: var(--rootColor); } .point2 i { font-size: 35px; text-align: center; color: #fff; position: absolute; top: 50%; left: 60%; transform: translate(-60%, -50%); z-index: 99; } .videomain { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999999999999999999999; } .videoclose { position: absolute; top: 50px; right: 50px; } .videoclose img { width: 50px; height: 50px; display: block; } .videobox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .videobox video { width: 100%; } .videobbb { animation: scale2 2s infinite; position: absolute; top: 40%; left: 40%; transform: translate(-50%, -50%); width: 130px; height: 130px; line-height: 130px; border-radius: 50%; border: 2px solid var(--rootColor); } @keyframes scale2 { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); } } .acard { padding: 100px 0; } .acardflex { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .acard_right { align-self: flex-end; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 30px; } .acardimg { box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1); } .acardimg img { width: 100%; vertical-align: middle; } .acard_list { margin-top: 30px; margin-bottom: 30px; } .acard_list ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .acard_list li { width: 31%; overflow: hidden; box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1); position: relative; } .acardli { padding: 15px 10px; display: flex; flex-direction: column; align-items: center; } .acardlicover { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background-color: var(--rootColor); transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .acardli i { font-size: 50px; color: var(--rootColor); text-align: center; z-index: 999; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .acardli p { z-index: 999; font-size: 18px; text-align: center; font-weight: bold; text-transform: uppercase; margin-top: 10px; color: #0B2154; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .acard_list li:hover .acardlicover { height: 100%; } .acard_list li:hover .acardli i, .acard_list li:hover .acardli p { color: #fff; } // .acard_list ul li:nth-child(2) .acardlicover { // height: 100%; // } // .acard_list ul li:nth-child(2) .acardli i, // .acard_list ul li:nth-child(2) .acardli p { // color: #fff; // } .blog { padding: 100px 0; } .blog_title { display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; } .blog_title span { font-size: 24px; color: var(--rootColor); font-weight: bold; display: block; margin-bottom: 15px; text-transform: uppercase; } .blog_title h2 { font-size: 48px; color: #0B2154; font-weight: bold; text-transform: uppercase; } .blogflex { display: flex; flex-wrap: wrap; } .blog_box { position: relative; box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1); height: 100%; background-color: #fff; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .blog_img { position: relative; overflow: hidden; width: 100%; height: auto; display: block; padding-top: 67%; } .blog_img img { width: 100%; vertical-align: middle; position: absolute; top: 0; left: 0; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .blog_txt { padding: 30px 20px; } .blog_txt h3 { font-size: 20px; color: #0B2154; font-weight: bold; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog_txt p { margin: 15px 0 30px 0; font-size: 16px; color: #666; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog_more { display: flex; justify-content: flex-start; align-items: center; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; } .blog_more span { font-size: 18px; color: var(--rootColor); font-weight: bold; } .blog_more i { font-size: 18px; color: var(--rootColor); font-weight: bold; margin-left: 15px; } .blog_li { position: relative; } .blogtime { background-color: var(--rootColor); padding: 5px 30px; display: flex; flex-direction: column; align-items: center; position: absolute; top: 35%; left: 0; z-index: 9; } .blogtime span { font-size: 18px; color: #fff; font-weight: bold; } .blogtime p { font-size: 16px; color: #fff; margin-top: 5px; } .blog_li:hover .blog_img img { transform: scale(1.2); } .blog_li:hover .blog_box { background-color: var(--rootColor); } .blog_li:hover .blog_txt h3, .blog_li:hover .blog_txt p, .blog_li:hover .blog_more span, .blog_li:hover .blog_more i { color: #fff; } .blog_more:hover { margin-left: 30px; } .partners_flex { display: flex; justify-content: space-evenly; flex-wrap: wrap; } .partners_li { margin: 10px; width: 200px; align-items: center; display: flex; align-items: center; // box-shadow: 0px 0px 6px #555; border-radius: 10px; } .partners_li img { line-height: auto; width: 100%; } .Home-main { overflow: hidden; }