*{ margin: 0; padding: 0; } @-webkit-keyframes zoomIn { from { opacity: 0; transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%,0,0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%,0,0) } to { opacity: 1; transform: none } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0,100%,0) } to { opacity: 1; transform: none } } .fadeInLeft { animation-name: fadeInLeft; animation-duration: 1.25s; } .fadeInRight { animation-name: fadeInRight; animation-duration: 1.25s; } .fadeInUp { animation-name: fadeInUp; animation-duration: 1.25s; } .zoomIn{ animation-name: zoomIn; animation-duration: 1.25s; } .fadeIn { animation-name: fadeIn; -webkit-animation-duration: 2s; animation-duration: 2s; } .zoomIns{ -webkit-animation: zoomIns 0.5s 0s ease; } .zoomInss{ -webkit-animation: zoomInss 0.5s 0s ease; } @-webkit-keyframes zoomIns { 0%{ -webkit-transform:scale(0.6); opacity: 0; } 100%{ -webkit-transform:scale(1); opacity: 1; } } /* @-webkit-keyframes zoomInnn2 { 0%{ -webkit-transform:scale(1.6); opacity: 0; } 100%{ -webkit-transform:scale(1); opacity: 1; } } */ h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } li{ list-style:none; cursor: pointer; } a{ text-decoration: none; cursor: pointer; } .wrap .top_tab { position: absolute; width: 100%; margin-top: 0px; margin-bottom: 0px; top: 0px; z-index: 9999; } .wrap .top_tab .top_tab_a{ transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; margin-top: 0px; padding: 0% 3% 0% 3%; z-index: 9999; min-height: 90px; display: flex; align-items: center; position: relative; box-sizing: border-box; } .wrap .top_tab .top_tab_a .left { width: 80%; align-content: flex-end; align-items: flex-end; } .wrap .top_tab .top_tab_a .left .left_a a{ display: inline-block; } .wrap .top_tab .top_tab_a .left .left_a a img{ width: 90px; vertical-align: middle; display: inline-block; height: auto; max-width: 100%; border: none; box-shadow: none; } .wrap .top_tab .top_tab_a .right { width: 20%; } .wrap .top_tab .top_tab_a .right .right_a{ text-align: right; } .wrap .top_tab .top_tab_a .right .right_a a{ font-family: "Talfel Sans", tafel sans; font-size: 17px; font-weight: bold; fill:#e6ff2b; color:#e6ff2b; background-color: #000c36; border-style: solid; padding: 12px 24px; border-width: 0px 0px 0px 0px; border-color: #E6FF2B00; border-radius: 0px 0px 0px 0px; display: inline-block; line-height: 1; } .wrap .conert .conert_image{ /* background-image: url(./image/image_25.jpg); */ background-position: 0px 14%; background-repeat: no-repeat; background-size: cover; height: 660px; } .wrap .conert .conert_image .top_image_bag { background-color: #000000; opacity: 0.4; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; height: 660px; width: 100%; top: 0; left: 0; position: absolute; } .wrap .conert .conert_image .top_image { display: flex; position: relative; align-content: center; } .wrap .conert .conert_image .top_image .top_image_left{ width: 50%; /* min-height: 60vh; */ } .wrap .conert .conert_image .top_image .top_image_left .top_image_left_text{ position: relative; padding: 10% 13% 10% 13%; width: 100%; text-align: left; margin-top: 90px; } .wrap .conert .conert_image .top_image .top_image_left h2{ color: #fafff2; font-family: "Noto Sans SC", tafel sans; font-size: 100px; font-weight: bold; font-style: italic; text-shadow: 0px 0px 0px rgba(12,12,12,0.3); margin: 0px 0px 0px -8px; } .wrap .conert .conert_image .top_image .top_image_left h2:before { background: #767676; content: "\020"; display: block; height: 2px; margin: 1rem 0; width: 1em; } .wrap .conert .conert_image .top_image .top_image_right{ width: 50%; min-height: 1px; } .wrap .middle{ background-color: #000c36; padding: 20px 0px 100px 0px; } .wrap .middle .middle_con{ max-width: 1140px; margin: auto; padding: 10px; } .wrap .middle .middle_con .middle_con_top_pc { font-size: 16px; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif; line-height: 1.8; } .wrap .middle .middle_con .middle_con_top_pc p{ padding: 16px 0; } .wrap .middle .middle_con .middle_con_top_text { max-width: 950px; margin: auto; display: flex; padding: 100px 0; } .wrap .middle .middle_con .middle_con_top_text .middle_con_top_text_left h3{ font-family: "Noto Sans SC", tafel sans; font-size: 42px; font-weight: bold; color: #fff; } .wrap .middle .middle_con .middle_con_top_text .middle_con_top_text_left{ width: 33.33%; margin-top: 80px; } .wrap .middle .middle_con .middle_con_top_text .middle_con_top_text_left_middle{ width: 33.33%; padding: 35px; margin-top: 80px; } .wrap .middle .middle_con .middle_con_top_text .middle_con_top_text_left_right{ width: 33.33%; padding: 35px; } .wrap .middle .middle_con .middle_con_top_text img{ width: 100%; } .wrap .middle .middle_con img:hover { transform: scale(1.1); } .wrap .middle .middle_con .middle_con_middle_title { max-width: 950px; margin: auto; } .wrap .middle .middle_con .middle_con_middle_title img{ width: 100%; } .wrap .middle .middle_con .middle_con_middle_title h2{ color: #fff; font-family: "Noto Sans SC", tafel sans; font-size: 42px; font-weight: bold; } .wrap .middle .middle_con .middle_con_middle_title h2:before { background: #767676; content: "\020"; display: block; height: 2px; margin: 1rem 0; width: 1em; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con{ display: flex; align-items: center; padding: 50px 0; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con .middle_con_middle_title_con_left{ width: 50%; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con .middle_con_middle_title_con_right{ width: 50%; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con .padding_l{ padding-left: 30px; } .wrap .middle .middle_con .middle_con_time_pc { max-width: 900px; margin: auto; position: relative; } .wrap .middle .middle_con .middle_con_time_pc .middle_con_time_con{ display: flex; align-items: center; margin-bottom: 20px; } .wrap .middle .middle_con .middle_con_time_pc .middle_con_time_con h5{ color: #fff; padding: 40px 0; font-size: 22px; } .wrap .middle .middle_con .middle_con_time_pc .middle_con_time_con .text_right{ text-align: right; padding-right: 40px; } .wrap .middle .middle_con .middle_con_time_pc .middle_con_time_con .text_left{ padding-left: 40px; } .wrap .middle .middle_con .middle_con_time_pc .middle_con_time_con .text_width{ min-width: 400px; max-width: 400px; } .wrap .middle .middle_con .middle_con_time_pc .middle_con_time_con .middle_con_time_con_middle{ min-height: 4em; min-width: 4em; line-height: 4em; background-color: #e6ff2b; border-radius: 999px; z-index: 9; } .wrap .middle .middle_con .middle_con_time_pc .middle_con_time_x { width: 3px; background: #fff; position: absolute; height: 94%; left: 470px; top: 30px; } .wrap .middle .middle_con .middle_con_time_h5 { width: 100%; position: relative; display: none; } .wrap .middle .middle_con .middle_con_time_h5 .middle_con_time_con{ display: flex; position: relative; align-items: center; } .wrap .middle .middle_con .middle_con_time_h5 .middle_con_time_con .middle_con_time_con_middle{ min-height: 4em; min-width: 4em; line-height: 4em; background-color: #e6ff2b; border-radius: 999px; z-index: 9; } .wrap .middle .middle_con .middle_con_time_h5 .middle_con_time_con .middle_con_time_con_middle_text{ font-size: 20px; font-weight: 600; padding: 40px; } .wrap .middle .middle_con .middle_con_time_h5 .middle_con_time_con .middle_con_time_con_middle_text .middle_con_time_con_left{ margin-top: 20px; } .wrap .middle .middle_con .middle_con_time_h5 .middle_con_time_con p{ color: #fff; } .wrap .middle .middle_con .middle_con_time_h5 .middle_con_time_x { width: 3px; background: #fff; position: absolute; height: 94%; left: 30px; top: 60px; } .wrap .more{ background-color: #000c36; } .wrap .more .more_con{ max-width: 1140px; margin: auto; text-align: center; } .wrap .more .more_con .more_top { padding: 30px; } .wrap .more .more_con .more_top h2{ color: #ffffff; font-family: "Noto Sans SC", tafel sans; font-size: 45px; font-weight: bold; } .wrap .more .more_con .more_top h2:before { background: #767676; content: "\020"; display: block; height: 2px; width: 1em; margin: 1em 0; } .wrap .more .more_con .more_button{ padding: 20px 0 150px; } .wrap .more .more_con .more_button a{ font-size: 16px; padding: 15px 30px; border-radius: 4px; fill: #000c36; color: #000c36; background-color: #e6ff2b; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #fff; font-weight: 600; } .bottom_nav { background-color: #000c36; } .bottom_nav .bottom_nav_conert { display: flex; margin-right: auto; margin-left: auto; position: relative; max-width: 1140px; padding: 10px; text-align: center; padding-bottom: 60px; } .bottom_nav .bottom_nav_conert_c { width: 33.33%; } .bottom_nav .bottom_nav_conert_c .bottom_nav_conert_c_span{ padding: 20px 0 60px; } .bottom_nav .bottom_nav_conert_c .bottom_nav_conert_c_ul { width: 100%; } .bottom_nav .bottom_nav_conert_c .bottom_nav_conert_c_ul ul li{ line-height: 2.5; font-size: 1.3em; font-weight: 700; } .bottom_nav .bottom_nav_conert_c .bottom_nav_conert_c_ul ul li a span{ color: #fff; } .bottom_nav .bottom_nav_conert_c .bottom_nav_conert_c_ul ul li a span:hover{ color: #e6ff2b; } .bottom_nav .bottom_nav_conert_c .bottom_nav_conert_c_span svg:hover{ transform: scale(1.1); transition-duration: .3s; transition-property: transform; } .bottom_nav .bottom_tab { padding: 30px 0; } .bottom_nav .bottom_tab .text h6{ font-size: 1em; } .nav_box{ position: fixed; bottom: 0; left: 0; z-index: 9999; background-color: #000c36; height: 100vh; width: 100vw; overflow: auto; display: none; } .nav_box .nav_box_wrap .backspace { cursor: pointer; position: absolute; top: 20px; /* margin-top: 0; */ right: 40px; opacity: 1; z-index: 9999; pointer-events: all; display: block; } .nav_box .backspace .eicon{ /* color: #e6ff2b; */ } .nav_box .nav_box_wrap { display: flex; } .nav_box .nav_box_wrap .left { padding: 66px; } .nav_box .nav_box_wrap .left .left_image .left_image_one{ text-align: justify; color: #e6ff2b; font-family: "Noto Sans SC", tafel sans; font-size: 14px; font-weight: 600; line-height: 25px; letter-spacing: 6px; margin-bottom: 30px; } .nav_box .nav_box_wrap .left .left_image .left_image_two{ text-align: justify; color: #2cbcac; font-family: "Noto Sans SC", tafel sans; font-size: 14px; margin-bottom: 30px; font-weight: 600; line-height: 25px; letter-spacing: 6px; } .nav_box .nav_box_wrap .left .left_ul .left_ul_one .left_ul_one_li{ line-height: 2.5; font-size: 1.3em; font-weight: 700; } .nav_box .nav_box_wrap .left .left_ul .left_ul_one .left_ul_one_li a span{ color: #fff; } .nav_box .nav_box_wrap .left .left_ul .left_ul_one .left_ul_one_li a span:hover{ color: #e6ff2b; } .nav_box .nav_box_wrap .left .left_ul .left_ul_one .left_ul_one_li .left_ul_one_li_ul{ display: none; margin-left: 20px; } .nav_box .nav_box_wrap .right { padding: 60px 0; width: 70%; } .nav_box .nav_box_wrap .right .right_cont .right_image{ text-align: justify; color: #e6ff2b; font-family: "Noto Sans SC", tafel sans; font-size: 14px; font-weight: 600; line-height: 25px; letter-spacing: 6px; text-align: center; } .nav_box .nav_box_wrap .right .right_cont .right_image2{ text-align: justify; color: #2cbcac; font-family: "Noto Sans SC", tafel sans; font-size: 14px; font-weight: 600; line-height: 25px; letter-spacing: 6px; text-align: center; } .nav_box .nav_box_wrap .right .right_cont .right_image img{ width: 130px; } .nav_box .nav_box_wrap .right .right_cont{ display: flex; margin-bottom: 40px; } .nav_box .nav_box_wrap .right .right_cont .right_cp { clear: both; width: 1100px; padding: 0 160px 0 120px; margin-top: 40px; } .nav_box .nav_box_wrap .right .right_cont .right_cp .cp_cont{ float: left; text-align: center; font-weight: 600; font-size: 14px; color: #fff; padding: 10px 20px; } .nav_box .nav_box_wrap .right .right_cont .right_cp .cp_cont img{ width: 120px; height: 120px; } .nav_box .nav_box_wrap .right .right_cont .right_cp .cp_cont:hover{ color: #e6ff2b; } .cp_conet_h5{ position: fixed; bottom: 0; left: 0; z-index: 99999; background-color: #000c36; height: 100vh; width: 100vw; overflow: auto; display: none; } .cp_conet_h5 .backspace{ cursor: pointer; position: fixed; top: 20px; /* margin-top: 0; */ left: 20px; opacity: 1; z-index: 99999; pointer-events: all; display: block; } .cp_conet_h5_cp{ clear: both; display: inline-block; margin: 30px 0 0 30px; } .cp_conet_h5_cp .cp_conet_h5_cp_cont{ float: left; text-align: center; font-weight: 600; font-size: 14px; color: #fff; padding: 10px 15px; } .cp_conet_h5_cp .cp_conet_h5_cp_cont img{ width: 80px; height: 80px; } .cp_conet_h5_cp .cp_conet_h5_cp_cont:hover{ color: #e6ff2b; } .wx_code{ display: none; } .wx_code .wx_code_none{ display: flex; width: 640px; height: 100vh; align-items: center; overflow: auto; background: #000c36; position: fixed; bottom: 0; left: 50%; transform: translate(-50%,0); z-index: 99999; } .wx_code img{ width: 100%; } .wx_code .wx_code_left { width: 50%; padding: 30px; text-align: center; color: #fff; font-family: "Notosans思源黑体", tafel sans; font-size: 24px; font-weight: 700; } .wx_code .wx_code_left img{ max-width: 83%; } .wx_code .wx_code_right { width: 50%; padding:30px; } .wx_code .backspace { position: absolute; top: 25px; right: 25px; cursor: pointer; } .dy_code{ display: none; } .dy_code .dy_code_none{ display: flex; width: 640px; height: 100vh; align-items: center; overflow: auto; background: #000c36; position: fixed; bottom: 0; left: 50%; transform: translate(-50%,0); z-index: 99999; } .dy_code .backspace { position: absolute; top: 25px; right: 25px; cursor: pointer; } .dy_code .dy_code_img{ width: 65%; padding: 20px; margin: auto; } .dy_code .dy_code_img img{ width: 100%; } .middle .middle_con .middle_con_top_pc_en p{ color: #fff; font-size: 24px; margin: 30px 0; } .middle .middle_con .middle_con_top_pc_en .tow{ display: flex; padding: 20px 0; } .middle .middle_con .middle_con_top_pc_en .tow .three_left{ width: 50%; } .middle .middle_con .middle_con_top_pc_en .tow .three_right{ width: 50%; } .middle .middle_con .middle_con_top_pc_en .tow .three_right img{ width: 100%; padding: 20px; box-sizing: border-box; } .middle .middle_con .middle_con_top_pc_en h2{ font-size: 42px; color: #fff; } .middle .middle_con .middle_con_top_pc_en h2:before { background: #767676; content: "\020"; display: block; height: 2px; margin: 1rem 0; width: 1em; } @media(max-width: 767px) { .wrap .top_tab { position: fixed; } .wrap .top_tab .top_tab_a .left{ width:60%; } .wrap .top_tab .top_tab_a .right{ width: 40%; } .wrap .conert .conert_image .top_image .top_image_left .top_image_left_text{ text-align: left; padding: 0px 0px 0px 0px; } .wrap .conert .conert_image .top_image .top_image_left .top_image_left_text h2{ font-size: 3em; } .wrap .conert .conert_image .top_image .top_image_right { width: 5%; } .wrap .conert .conert_image .top_image .top_image_left { width: 95%; } .bottom_nav .bottom_nav_conert{ max-width: 767px; } .bottom_nav .bottom_nav_conert .bottom_nav_conert_cspan{ width: 100%; } .nav_box .nav_box_wrap { height: 100vh; width: 250px; } .nav_box .nav_box_wrap .backspace { right: 55%; transform: translate(-50%,0); } .nav_box .nav_box_wrap .left { background-color: #000c36; padding:40px; } .nav_box .nav_box_wrap .right { display: none; } .nav_box{ background: #000c3600; } .wrap .middle { padding: 20px 0 0; } .wrap .conert .conert_image{ /* background-position: 0px 51%; */ background-position: -314px 0px; } .wrap .conert .conert_image .top_image { top: 45%; transform: translate(0,-50%); } .wx_code .wx_code_none{ flex-direction: column; z-index: 999; } .wx_code .wx_code_none .backspace { top: 15%; right: 25%; } .wx_code .wx_code_none .wx_code_left { width: 40%; } .wx_code .wx_code_none .wx_code_right { width: 40%; } .dy_code .dy_code_img{ width: 50%; padding-top: 80px; margin: 0 auto; } .dy_code .dy_code_none { z-index: 999; } .dy_code .dy_code_none .backspace { top: 12%; right: 25%; } .wrap .middle .middle_con .middle_con_top_text { flex-direction: column; align-items: center; padding: 30px 0; } .wrap .middle .middle_con .middle_con_top_text .middle_con_top_text_w{ width: 100%; } .wrap .middle .middle_con .middle_con_top_text .middle_con_top_text_w { padding: 35px 0; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con { flex-direction: column-reverse; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con .middle_con_middle_title_con_left { width: 100%; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con .middle_con_middle_title_con_right { width: 100%; } .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con .middle_con_middle_title_con_left img{margin-top: 20px;} .wrap .middle .middle_con .middle_con_middle_title .middle_con_middle_title_con .padding_l{ padding: 0; } .wrap .middle .middle_con .middle_con_time_pc{ display: none; } .wrap .middle .middle_con .middle_con_time_h5{ display: block; } .middle .middle_con .middle_con_top_pc_en .tow { flex-direction: column; } .middle .middle_con .middle_con_top_pc_en .tow .three_right { width: 100% !important; } .middle .middle_con .middle_con_top_pc_en .tow .three_left { width: 100% !important; } .middle .middle_con .middle_con_top_pc_en .tow .three_right img{ width: 100%; padding: 20px 0 0 0 !important; box-sizing: border-box; } } @media(min-width: 768px) { .wrap .top_tab .top_tab_a .left{ width:60%; } .wrap .top_tab .top_tab_a .right{ width: 40%; } .nav_box .nav_box_wrap .left { width: 30%; } .nav_box .nav_box_wrap .left_image { display: none; } .nav_box .nav_box_wrap { align-items: center; } } @media (max-width: 1024px){ .bottom_nav .bottom_nav_conert{ max-width: 1024px; justify-content: space-evenly; flex-wrap: wrap; } }