html { font-family: PingFangSC-Regular, PingFang SC, MicrosoftYaHei-Bold, MicrosoftYaHei; } .navbar { padding: 0; } p { margin-bottom: 0; } button { outline: none; } .index-nav { position: fixed; top: 0px; width: 100%; height: 56px; z-index: 100; } .content { margin-top: 55px; } .index-nav .container-fluid { padding-left: 10.76%; padding-right: 10.76%; height: 80px; background: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); width: 100%; display: flex; justify-content: space-between; } .index-nav .navbar-header { flex: 1; height: 100%; } .navbar-nav { background: #fff; } .index-nav .navbar-brand { /* width: 100%; */ height: 100%; overflow: hidden; position: relative; display: inline-block; } .index-nav .navbar-brand img { /* width: 100%; */ height: 100%; } .navbar1 { top: 0px; } .index-nav .navbar .nav li { height: 80px; line-height: 80px; box-sizing: border-box; } .index-nav .navbar .nav .active > a { border-bottom: 4px solid #fb4747; color: #fb4747; } .index-nav .navbar .nav > li > a { height: 100%; background: #fff; font-size: 16px; color: #666; text-align: center; padding: 2px 0px; width: 80px; margin: 0 14px; box-sizing: border-box; } .txt-animate-delay h3 { font-size: 42px; color: #262626; font-weight: 600; margin-bottom: 15px; animation-delay: 0s; line-height: 54px; } .txt-animate-delay p:first-of-type { animation-delay: 0.1s; } .txt-animate-delay p:last-of-type { animation-delay: 0.2s; } /*banner*/ .banner { position: relative; } .banner img { width: 100%; } .u-banner-video { width: 100%; display: block; } .banner-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2; } .banner-info h2 { font-size: 42px; font-weight: 700; color: #ffffff; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; letter-spacing: 0; margin-bottom: 12px; } .banner-info p { font-size: 24px; color: #ffffff; font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", SimHei, Arial, Helvetica, sans-serif; line-height: 28px; letter-spacing: 0; } /*鏍囬*/ h3 { font-size: 32px; font-family: PingFangSC-Regular, PingFang SC, MicrosoftYaHei-Bold, MicrosoftYaHei; color: rgba(0, 0, 0, 0.85); text-align: center; } /*tab*/ .mytab .nav-tabs { width: 680px; margin: 0 auto; display: flex; justify-content: space-between; border-bottom: none; margin-bottom: 48px; } .mytab .nav-tabs li a { text-align: center; display: flex; flex-direction: column; align-items: center; } .mytab .nav-tabs li a { font-size: 20px; color: rgba(0, 0, 0, 0.75); } .mytab .nav-tabs li a:hover { text-decoration: none; } .mytab .nav-tabs li a.active { font-weight: bold; } .mytab .nav-tabs li a.active:after { content: ''; display: inline-block; width: 32px; height: 4px; background: rgba(251, 71, 71, 1); border-radius: 3px; margin-top: 8px; } .mytab .tab-content { width: 960px; } /*搴曢儴琛ㄥ崟鍙婁俊鎭?/ .part3 { margin-top: 150px; width: 100%; display: flex; justify-content: space-around; flex-wrap: nowrap; background: #fafafa; padding: 72px 0 60px; } .part3 .form-wrap h3 { font-size: 32px; color: #323437; text-align: center; margin-bottom: 64px; } .part3 .form-input .row { display: flex; justify-content: space-between; width: 1200px; margin-bottom: 48px; margin-right: 0; margin-left: 0; } .part3 .form-input .row span { color: rgba(0, 0, 0, 0.85); } .part3 .form-input .item-wrap { border: 1px solid rgba(219, 219, 219, 1); background: #fff; position: relative; } .part3 .form-input .row img { width: 16px; height: 16px; position: absolute; left: 10px; top: 11px; z-index: 3; } .part3 .form-input .row input, .input p { width: 360px; height: 38px; line-height: 38px; border: none; padding-left: 38px; margin-bottom: 0; } .divInput { border: 1px solid rgba(219, 219, 219, 1); cursor: pointer; } .input { position: relative; } .part3 .form-input .row .input img { position: absolute; top: 7px; left: 330px; width: 24px; height: 24px; } .input img { position: absolute; right: 34px; top: 48%; } .option { width: 100%; border: 1px solid rgba(219, 219, 219, 1); border-top: none; overflow: hidden; position: absolute; top: 41px; left: 0; background: #fff; z-index: 9; } .option ul { margin-bottom: 0; } .option ul li { width: 100%; height: 35px; cursor: pointer; line-height: 35px; padding-left: 10px; color: #606266; } .option ul li:hover { background-color: #f5f7fa; } .part3 .form-input .row input:focus, .part3 .form-input .row textarea:focus { border: none; outline: none; } .part3 .form-input textarea { width: 1200px; height: 120px; background: #fff; border-radius: 4px; outline: 0; padding: 6px; box-sizing: border-box; margin-bottom: 18px; resize: none; border: none; padding-left: 38px; } .part3 .form-input button { width: 120px; height: 38px; background: rgba(251, 71, 71, 1); border: none; outline: 0; cursor: pointer; color: rgba(50, 52, 55, 1); font-size: 14px; color: #fff; margin-left: 25px; } #inputCode { width: 142px; height: 38px; font-size: 14px; padding-left: 10px; background: rgba(250, 250, 250, 1); border: 1px solid rgba(219, 219, 219, 1); border-right: none; } #code { width: 100px; height: 40px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #c2c7ce; } input::-moz-placeholder, textarea::-moz-placeholder { color: #c2c7ce; } input:-moz-placeholder, textarea:-moz-placeholder { color: #c2c7ce; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #c2c7ce; } .footer-txt { background: rgba(24, 24, 24, 1); } .footer-top { display: flex; justify-content: center; padding: 40px; // width: 1000px; margin: auto; } .footer-top .footer-top-left { display: flex; justify-content: center; border-right: 1px solid rgba(255, 255, 255, 0.15); padding-right: 25px; height: 100px; } .footer-top-right ul li { position: relative; margin-right: 12px; width: 48px; height: 48px; } .footer-top .footer-top-left dl { font-size: 12px; color: #fff; width: 136px; } .footer-top .footer-top-left dt { margin-bottom: 14px; height: 20px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #ffffff; line-height: 20px; } .footer-top .footer-top-left dd { margin-bottom: 10px; } .footer-top .footer-top-left dd, .footer-top .footer-top-left dd a { // width: 59px; //height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(255, 255, 255, 0.65); line-height: 17px; } .footer-top .footer-top-right { // flex: 1 // width: 500px; } .footer-bottom { height: 60px; display: flex; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 12px; justify-content: center; background: rgba(24, 24, 24, 1); font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(255, 255, 255, 0.65); line-height: 60px; } .footer-bottom p { margin-bottom: 0; } .footer-bottom p a { color: rgba(255, 255, 255, 0.65); } .footer-icon1 img { width: 10px; height: 12px; margin-right: 7px; } .footer-icon2 img { width: 10px; height: 10px; margin-right: 7px; } .footer-icon3 img { width: 10px; height: 8px; margin-right: 7px; } .footer-top-right ul { display: flex; justify-content: center; align-items: center; height: 100%; padding-left: 40px; } .footer-top-right p { font-size: 12px; color: #fff; text-align: center; margin-top: 6px; } .footer-top-right img { position: absolute; width: 48px; height: 48px; } @keyframes animate1_1 { from { transform: translateX(0) translateY(0); } to { transform: translateX(0) translateY(-8px); } } @keyframes animate1_2 { from { transform: translateX(0) translateY(6px); } to { transform: translateX(0) translateY(10px); } } .animate1 { left: 70px; top: 268px; } .animate2 { left: 273px; top: 180px; } .animate3 { left: 250px; top: 224px; } .animate4 { left: 256px; top: 340px; } .animate5 { left: 297px; top: 273px; } .animate-img { position: absolute; } .animate1 img:first-child { width: calc(334px / 2); height: calc(198px / 2); position: absolute; transform: translateX(0) translateY(0); z-index: 3; animation: animate1_1 infinite 2s ease-out alternate; } .animate1 img:last-child { width: calc(334px / 2); height: calc(194px / 2); position: absolute; transform: translateX(0) translateY(6px); animation: animate1_2 infinite 2s ease-out alternate; } .animate2 img:first-child { width: calc(246px / 2); height: calc(148px / 2); position: absolute; transform: translateX(0) translateY(0); z-index: 3; animation: animate1_1 infinite 2s ease-out 0.2s alternate; } .animate2 img:last-child { width: calc(246px / 2); height: calc(144px / 2); position: absolute; transform: translateX(0) translateY(6px); animation: animate1_2 infinite 2s ease-out 0.2s alternate; } .animate3 img:first-child { width: calc(38px / 2); height: calc(68px / 2); position: absolute; transform: translateX(0) translateY(0); z-index: 3; animation: animate1_1 infinite 2s ease-out 0.6s alternate; } .animate3 img:last-child { width: calc(24px / 2); height: calc(18px / 2); position: absolute; top: 24px; left: 3px; transform: translateX(0) translateY(6px); animation: animate1_2 infinite 2s ease-out 0.6s alternate; } .animate4 img:first-child { width: calc(152px / 2); height: calc(94px / 2); position: absolute; transform: translateX(0) translateY(0); z-index: 3; animation: animate1_1 infinite 2s ease-out 1.2s alternate; } .animate4 img:last-child { width: calc(152px / 2); height: calc(88px / 2); position: absolute; top: 24px; left: 3px; transform: translateX(0) translateY(6px); animation: animate1_2 infinite 2s ease-out 1.2s alternate; } .animate5 img:first-child { width: calc(126px / 2); height: calc(74px / 2); position: absolute; transform: translateX(0) translateY(0); z-index: 3; animation: animate1_1 infinite 1.5s ease-out alternate; } .animate5 img:last-child { width: calc(128px / 2); height: calc(72px / 2); position: absolute; transform: translateX(0) translateY(6px); animation: animate1_2 infinite 1.5s ease-out alternate; } @font-face { font-family: DINPro-Regular; src: url('../css/fonts/DINPro-Regular.otf'); } @font-face { font-family: DIN-Light; src: url('../css/fonts/DIN-Light.otf'); } @font-face { font-family: DINCond-Black; src: url('../css/fonts/DINCond-Black.otf'); } @font-face { font-family: DINCond-Medium; src: url('../css/fonts/DINCond-Medium.otf'); } @font-face { font-family: DIN; src: url('../css/fonts/DINPro-Medium.otf'), url('../css/fonts/DINPro-Medium.ttf'); font-weight: 500; } .drag { width: 360px; height: 40px; line-height: 40px; background-color: #fff; border-radius: 4px; position: relative; border: 1px solid #d8d8d8; } .slider-bg { width: 40px; height: 100%; position: absolute; background-color: #19ac18; } .slider-text { position: absolute; width: 100%; height: 100%; text-align: center; user-select: none; color: rgba(0, 0, 0, 0.25); } .slider-btn { width: 40px; height: 39px; position: absolute; border-right: 1px solid #d8d8d8; border-radius: 4px; border-bottom: 1px solid #d8d8d8; cursor: move; text-align: center; user-select: none; color: #666; background: #fff url('../images/hk_arr.png') no-repeat center; background-size: 17px 17px; box-shadow: 2px 0 12px #d8d8d8; } video::-webkit-media-controls-enclosure { overflow: hidden; } video::-webkit-media-controls-panel { width: calc(100% + 30px); } .clearfix:after { content: '.'; clear: both; height: 0; visibility: hidden; display: block; } .clearfix { zoom: 1; } button:focus { outline: 0 !important; } .followus__icons__item__hover { position: absolute; left: -54.5px; top: -178px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); width: 160px; height: 160px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.2s; visibility: hidden; opacity: 0; } .footer-top-right ul li .u-img-logo-b { display: none; } // .footer-top-right ul li .u-img-logo-b{ // opacity: 0; // z-index: 1; // } .footer-top-right ul li:hover .followus__icons__item__hover { visibility: visible; opacity: 1; transition: all 0.2s; } .footer-top-right ul li:hover .u-img-logo-b { display: block; } .followus__icons__item__hover img { width: 100px; height: 100px; } .followus__icons__item__hover__qrcode { width: 100px; height: 100px; margin-bottom: 4px; } .followus__icons__item__hover__text { width: 84px; height: 20px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(0, 0, 0, 0.65); line-height: 20px; } .followus__icons__item__hover:after { content: ''; position: absolute; bottom: -6px; left: calc(50% - 6px); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; }