body,p,div{ margin: 0; font-size: 14px; } @media screen and (min-width:1200px) and (max-width:1440px){ .right_back{ /* right: calc((100% - 1680px) / 2); */ } } .big_container{ /* width: 100%; height: 100vh; */ min-width: 1200px; } header{ position: fixed; left: 0px; top: 0px; width: calc(100% - 56px); z-index: 99; min-width: 1144px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 28px; opacity: 1; background-color: #ffffffb3; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: none; transition: background-color .3s ease-in-out; background: linear-gradient(90deg, rgba(243, 246, 254, 0) 0%, #F3F6FE 100%); } header .left{ display: flex; align-items: center; font-family: Alimama ShuHeiTi; font-size: 22px; font-weight: bold; line-height: normal; letter-spacing: 0px; font-variation-settings: "opsz" auto; background: linear-gradient(0deg, #000000, #000000), linear-gradient(90deg, #93B6F9 13%, #5D8CF0 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } header .right{ display: flex; justify-content: flex-end; } header .right div{ width: 88px; height: 36px; text-align: center; line-height: 36px; margin-left: 24px; border-radius: 4px; font-family: Microsoft YaHei UI; color: #3D3D3D; font-size: 14px; } header .right .activebtn{ font-weight: bold; font-variation-settings: "opsz" auto; color: #5B6FF6; text-align: center; line-height: 36px; background: #F4F5FA; } .page{ width: 100%; padding-top: 64px; position: relative; /* display: flex; flex-direction: column; justify-content: center; */ /* height: 2000px; */ /* margin: 0 auto; */ } .left_back{ width: 300px; height: 454px; background-image: linear-gradient(90deg, rgb(250, 250, 250) 0%, rgba(250, 250, 250, 0) 100%); /* background: linear-gradient(90deg, #FAFAFA 0%, rgba(243, 246, 254, 0) 100%); */ position: absolute; top: 0; z-index: 24; left: calc((100% - 1920px) / 2); } .right_back{ width: 300px; height: 454px; position: absolute; top: 0; z-index: 24; right: calc((100% - 1920px) / 2); background-image: linear-gradient(-90deg, rgb(250, 250, 250) 0%, rgba(250, 250, 250, 0) 100%); /* background: linear-gradient(90deg, rgba(243, 246, 254, 0) 0%, #F3F6FE 100%); */ } .bottom_back{ width: 1276px; height: 58px; background: linear-gradient(0deg, #F3F6FE 0%, rgba(243, 246, 254, 0) 100%); } .topViedo{ position: relative; width: 1920px; left: 50%; top: 0; transform: translate(-50%); /* width: 100%; position: absolute; height: 454px; left: 0; top: 0; */ } .bb{ position: relative; height: 454px; } .aa{ position: absolute !important; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; background-color: rgb(250, 250, 250); /* background-image: var(--pc-background-image); background-color: var(--background-color); */ background-size: 1920px auto; background-position: center top; background-repeat: no-repeat; } .top_viedo{ position: absolute; left: 0; top: 0; width: 100%; /* height: 454px; */ /* background-color: rgb(250, 250, 250); */ } .top_viedo,.bottom_viedo{ /* width: 100%; */ } .bottom_viedo{ /* height: 100%; object-fit: cover; */ position: fixed; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .bottomViedo{ width: 100%; position: absolute; left: 0; top: 0px; height: 1380px; min-height: 800px; z-index: -1; overflow: hidden; } .main_page{ position: absolute; margin: 0 auto; width: 100%; min-width: 1200px; z-index: 66; top: 64px; } .main_content{ /* padding: 42px 129px; border-radius: 10px; background: rgba(255, 255, 255, 0.9); */ margin: 0 auto; margin-top: 82px; display: flex; flex-direction: column; align-items: center; /* min-width: 1004px; max-width: 1378px; */ /* background-image: url(); */ } .main_title_back{ background-color: transparent !important; /* padding: 0 !important; */ height: 168px; position: relative; } .main_content .step_back{ margin-bottom: 12px ; padding: 10px 0; width: 100%; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); display: flex; justify-content: center; } .main_content .stickyStep{ position: sticky; top: 64px; opacity: 1; z-index: 9; background: rgba(255, 255, 255, 0.5); box-sizing: border-box; border-width: 0px 0px 1px 0px; border-style: solid; border-image: linear-gradient(270deg, rgba(114, 119, 244, 0) 8%, #7177F4 47%, rgba(117, 119, 245, 0) 89%) 0 0 1 0; backdrop-filter: blur(20px); } .main_content .step_back .step_line{ min-width: 70px; max-width: 258px; margin: 0 44px; height: 0; margin-top: 27px; border: 0.5px solid #D8D8D8; } .main_title{ display: flex; flex-direction: column; text-align: left; min-width: 744px; max-width: 1118px; position: absolute; left: 0; top: 0; /* justify-content: center; */ /* align-items: center; */ } .main_title .title1 img{ /* display: flex; */ width: 325px; height: 61px; /* justify-content: space-between; align-items: center; font-family: Alimama ShuHeiTi; font-size: 50px; font-weight: bold; line-height: normal; letter-spacing: 0px; font-variation-settings: "opsz" auto; background: linear-gradient(90deg, #4689FA 8%, #606CF4 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; */ } .main_title .title2{ font-size: 46px !important; font-weight: bold; margin: 12px 0 16px 0; } .main_title .title2 span:nth-child(1){ color: #121519; font-size: 42px; } .main_title .title2 .shortSpan{ font-family: Alimama ShuHeiTi; font-weight: bold; font-variation-settings: "opsz" auto; background: linear-gradient(263deg, #756DF7 9%, #4B8BFB 35%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .main_title .title3{ font-size: 18px; font-weight: bold; color: #73787E; } .step_main{ width: 60%; display: flex; /* background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); */ justify-content: center; padding: 12px 164px; } .step_main dt>img{ width: 28px; height: 28px; } .step_line{ flex: 1; } .step_main .nor_step_title{ font-size: 16px; font-weight: normal; color: #626573; height: 20px; margin-bottom: 14px; } .step_main .nor_step_title +span{ } .step_main .active_step_title{ font-size: 16px; font-weight: bold; color: #3D3D3D; } .step_main dl{ display: flex; } .step_main dd{ display: flex; flex-direction: column; line-height: 27px; margin: 0 0 0 12px; font-size: 14px; font-weight: 400; color: #626573; } .main_select{ /* width: 750px; */ padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto; margin-bottom: 48px; } .main_select li{ margin-right: 15px; display: flex; /* padding-left: 12px; */ padding: 7px 10px; border: 1px solid #C4CCFF; align-items: center; position: relative; margin-top: 15px; border-radius: 8px; background: rgba(255, 255, 255, 0.5); cursor: pointer; line-height: 30px; box-sizing: border-box; font-size: 16px; } .main_select .active_select{ border: 1px solid #5B6FF6; } li .li_icon{ width: 30px; height: 30px; } li span{ margin-left: 10px; /* height: 20px; */ display: inline-block; } li .select_icon{ width: 14px; height: 14px; margin-left: 10px; opacity: 0; /* display: none; */ /* position: absolute; right: 0; top: 0; */ } .active_select .select_icon{ opacity: 1; /* display: block; */ } .backColor2{ display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 42px 130px; width: 60%; min-width: 744px; max-width: 1118px; margin: 0 130px; border-radius: 8px; opacity: 0.9; background: rgba(255, 255, 255, 0.9); } .my_form{ /* margin: 0 auto; */ width: 100%; } .my_form .formOne{ display: flex; /* width: 750px; */ justify-content: space-between; margin-bottom: 48px; } .custom-select { position: relative; /* width: 200px; */ } .placeBox{ position: absolute; left: 0; top: 0; width: 162px; display: flex; font-size: 14px; line-height: 18px; justify-content: space-between; padding: 13px 12px; background-color: #fff; color: #A5ABAF; border: 1px solid #E8E8E8; border-radius: 6px; } .placeBox img{ width: 18px; height: 18px; } /* 这里可以添加更多样式来美化自定义下拉菜单 */ #project_select{ border-radius: 6px; background: #FFFFFF; border: 1px solid #E8E8E8; padding: 14px 12px; height: 46px; width: 186px; margin-right: 22px; } .oneRight{ flex: 1; display: flex; flex-direction: row; align-items: center; background-color: #fff; border: 1px solid #E8E8E8; padding: 4px 4px 4px 12px; border-radius: 6px; position: relative; } .oneRight img{ width: 18px; height: 18px; } .oneRight input{ flex: 1; border: none; padding-left: 12px; color: #1F2225; height: 32px; } .oneRight input::placeholder{ color:#8C919D; } .oneRight input:focus-visible{ outline: none; } .aititlePos{ display: none; position: absolute; left: 0px; top: 48px; /* width: 910px; */ width: calc(100% - 28px); height: 168px; /* 自动布局 */ display: flex; flex-direction: column; align-items: flex-end; padding: 16px 14px; gap: 12px; border-radius: 8px; opacity: 0; background: #FFFFFF; border: 1px solid #E8E8E8; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); } .posBack{ /* 自动布局子元素 */ /* position: static; left: 14px; top: 16px; */ /* width: 882px; */ height: 106px; /* 自动布局 */ display: flex; flex-direction: column; align-items: center; padding: 28px 18px; gap: 14px; align-self: stretch; z-index: 0; border-radius: 8px; opacity: 1; background: linear-gradient(180deg, #EDF1FE 0%, #FCFDFF 119%); } .posFooter{ display: flex; justify-content: flex-end; color: #8C919D; font-size: 14px; } .startBtn{ color: #5B6FF6; margin-left: 20px; } .normal_recommend_title,.recommend_title{ width: 82px; margin-left: 12px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-radius: 6px; padding: 8px 12px; cursor: pointer; } .recommend_title{ background: #FFF5ED; color: #FF7800; } .inputText{ color: #525252; } .warnInputText{ color: #FF4D4F; } .formItem{ display: flex; justify-content: space-between; margin-bottom: 24px; color: #1F2225; line-height: 34px; } .formItem .formLeft{ width: 70px; text-align: left; display: flex; } .formItem .requiredIcon{ width: 8px; height: 8px; margin-top: 13px; margin-left: 4px; } .formItem .formRight{ flex: 1; margin-left: 12px; } .educationRight{ display: flex; align-items: center; } .educationRight img{ width: 18px; height: 18px; margin-right: 3px; } .educationRight+p{ font-size: 12px; line-height: 18px; color: #9E9E9E; } .education{ display: flex; align-items: center; margin-right: 24px; } .btn_result{ width: 200px; height: 50px; font-size: 15px; border: none; color: #FFFFFF; line-height: 50px; text-align: center; border-radius: 8px; margin-top: 30px; background: linear-gradient(270deg, #6C69F5 0%, #3467E5 100%); } .btn_result + p{ margin-top: 12px; font-size: 12px; line-height: 18px; display: flex; align-items: center; color: #8C919D; } .btn_result + p>img{ margin-right: 8px; } .textAreaRight{ display: flex; } #side_textarea{ flex: 1; /* width: 100%; */ padding: 14px 12px; /* width: 664px; */ height: 65px; border-radius: 6px; background: #FFFFFF; border: 1px solid #E8E8E8; } #side_textarea::placeholder{ color: #8C919D; } .footer{ background: #FAFAFC; margin-top: 50px; } .footer .footerbox{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px 200px; background: transparent; margin: 0 auto; } .footerbox .left_top{ display: flex; justify-content: flex-start; width: 100%; align-items: center; font-family: Alimama ShuHeiTi; font-size: 22px; font-weight: bold; line-height: normal; letter-spacing: 0px; font-variation-settings: "opsz" auto; background: linear-gradient(0deg, #000000, #000000), linear-gradient(90deg, #93B6F9 13%, #5D8CF0 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; position: absolute; top: 0; left: 0; } .footerbox .main_footer{ color: #9E9E9E; font-size: 12px; display: flex; justify-content: space-between; height: 53px; position: relative; padding-top: 50px; width: 100%; min-width: 880px; } .main_footer .right{ width: 262px; margin-left: 145px; height: 53px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; line-height: 26px; } .main_footer .left{ flex: 1; /* min-width: 473px; */ } .noempty{ flex: 1; min-width: 145px; } .main_footer .left p:nth-child(1){ margin-bottom: 8px; } .main_footer p{ font-size: 12px; margin: 0; text-align: left; width: 100%; } footer{ /* position: absolute; left: 0px; top: 938px; */ width: calc(100%); /* 自动布局 */ display: flex; font-size: 12px; flex-direction: row; justify-content: center; align-items: center; height: 55px; /* padding: 50px 70px; */ background: #FAFAFC; line-height: 32px; box-sizing: border-box; border-width: 1px 0px 0px 0px; border-style: solid; border-color: #D8D8D8; } footer span{ display: inline-block; margin-left: 12px; } footer a{ display: inline-block; margin-right: 3px; color: black; text-decoration: none; }