*{ 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 } } .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_12.jpg); */ background-position: 0px 51%; 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: 800px; margin: auto; } .wrap .middle .middle_con .middle_con_item .accordion{ border-bottom: 1px solid #e6ff2b; padding: 60px 30px 40px 30px; cursor: pointer; color: #fff; } .wrap .middle .middle_con .middle_con_item .active { border:none; color: #e6ff2b; } .wrap .middle .middle_con .middle_con_item .accordion p{ font-family: "Noto Sans SC", tafel sans; font-size: 25px; font-weight: bold; } .zhuan{ transform: rotate(180deg); } .wrap .middle .middle_con .middle_con_item .panel{ line-height: 1.8; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; color: #fff; } .wrap .middle .middle_con .middle_con_item .panel div{ padding: 0 40px 39px 40px; border-bottom: 1px solid #e6ff2b; } .wrap .middle .middle_con .middle_con_item .panel p{ font-family: "Noto Sans SC", tafel sans; font-size: 18px; font-weight: normal; text-shadow: 0px 0px 10px rgba(0,0,0,0.3); } .wrap .middle .middle_con .middle_con_item .panel li{ list-style: disc; font-family: "Noto Sans SC", tafel sans; font-size: 18px; font-weight: normal; text-shadow: 0px 0px 10px rgba(0,0,0,0.3); color: #fff; } .wrap .middle .middle_con .middle_button{ text-align: center; padding: 115px 0 0; } .wrap .middle .middle_con .middle_button a{ fill: #000c36; color: #000c36; background-color: #e6ff2b; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #fafff2; font-size: 16px; padding: 15px 30px; border-radius: 4px; 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%; } @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 100px; } .wrap .conert .conert_image{ /* background-position: 0px 51%; */ background-position: -323px 0px; } .wrap .conert .conert_image .top_image { top: 45%; transform: translate(0,-50%); } .wrap .middle .middle_con .middle_con_item .accordion { padding: 40px 10px 20px; } .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%; } } @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; } }