html, body { margin: 0; padding: 0; font-size: 14px; font-family: "Microsoft YaHei", Arial; color: #3d3d3d; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } html { max-width: 100%; } .page-common-style a, .page-common-style img, .page-common-style button, .page-common-style input, .page-common-style textarea, .page-common-style div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .page-common-style ol li, .page-common-style ul li { cursor: default; } .page-common-style p { text-align: left; } .page-common-style .text-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .page-common-style .max-w-1440 { max-width: 1440px; margin: 0 auto; } .page-common-style .min-w-1280 { min-width: 1264px; } .page-common-style ul { list-style: none; padding: 0; margin: 0; } .page-common-style .clearfix::after { content: " "; display: block; clear: both; height: 0; } .page-common-style .color-primary { color: #f26b1f; } .page-common-style .icon-arrow-rt, .page-common-style .icon-arrow-r, .page-common-style .icon-arrow-rt-white { display: inline-block; width: 14px; height: 14px; margin-left: 10px; background-image: url(../../img/home/arrow-top-right.svg); background-position: center; background-repeat: no-repeat; } .page-common-style .icon-arrow-r { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .page-common-style .icon-arrow-rt-white { background-image: url(../../img/home/icon-arrow-rt-white.svg); } .page-common-style .common-section-head .title { font-size: 48px; font-weight: bold; color: #212121; line-height: 65px; margin-top: 0; margin-bottom: 30px; } .page-common-style .common-section-head .title .sub-title { font-size: 28px; line-height: 40px; margin: 0; margin-top: 12px; } .page-common-style .common-section-head .title::after { content: ""; display: block; width: 97px; height: 4px; margin-top: 20px; background: -webkit-gradient( linear, left top, left bottom, from(#f26b1f), to(#ff9800) ); background: linear-gradient(to bottom, #f26b1f, #ff9800); } .page-common-style .common-section-head .sub-title-desc { font-size: 18px; font-weight: 400; color: #757575; line-height: 32px; margin: 0; } .page-common-style .btn-card-link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 336px; background-color: rgba(255, 255, 255, 0.6); border-radius: 2px; overflow: hidden; border: 1px solid #fff; padding: 14px 20px; text-decoration: none; margin-top: 110px; } .page-common-style .btn-card-link .link-text { font-weight: bold; color: #212121; line-height: 26px; font-size: 22px; display: inline-block; position: relative; z-index: 2; } .page-common-style .btn-card-link .link-icon-wrapper { position: relative; top: 0; z-index: 2; display: inline-block; width: 50px; height: 50px; background-color: #212121; border-radius: 50%; text-align: center; } .page-common-style .btn-card-link .link-icon-wrapper .icon-arrow-rt { -webkit-transition: 0.4s ease all; transition: 0.4s ease all; position: relative; z-index: 4; margin-left: 0; height: 100%; vertical-align: middle; } .page-common-style .btn-card-link .link-icon-wrapper::after { content: ""; width: 100%; height: 100%; background-color: #f88011; border-radius: 50%; position: absolute; -webkit-transform: scale(0.02); transform: scale(0.02); top: -1px; left: -1px; display: inline-block; -webkit-transition: 0.4s ease all; transition: 0.4s ease all; } .page-common-style .btn-card-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 1; background: linear-gradient(141deg, #454545 0%, #212121 100%); -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .page-common-style .btn-card-link:hover::after { height: 100%; } .page-common-style .btn-card-link:hover .link-text { color: #fff; } .page-common-style .btn-card-link:hover .link-icon-wrapper::after { -webkit-transform-origin: center 50%; transform-origin: center 50%; -webkit-transform: scale(1); transform: scale(1); } .page-common-style .btn-card-link:hover .link-icon-wrapper .icon-arrow-rt { -webkit-transform-origin: center 50%; transform-origin: center 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .page-common-style .btn-hover-transition { position: relative; } .page-common-style .btn-hover-transition .btn-text { position: relative; z-index: 2; } .page-common-style .btn-hover-transition::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 1; background: #fff; -webkit-transition: 0.4s ease all; transition: 0.4s ease all; } .page-common-style .btn-hover-transition:hover::after { height: 100%; } .page-common-style .btn-hover-transition:hover .btn-text { color: #f26b1f; } .page-common-style .page-detail-banner { /* ! 鎴戜滑鐨勪紭鍔?(涓轰粈涔堥€夋嫨鎴戜滑 | 鎶€鏈笌淇′换) 鍏敤banner閮ㄥ垎浠g爜 */ width: 100%; background-color: #333; max-height: 770px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; } .page-common-style .page-detail-banner .banner-img { width: 100%; opacity: 0; } .page-common-style .page-detail-banner .banner-default { display: block; min-height: 390px; } .page-common-style .page-detail-banner .banner-sm { min-height: 200px; display: none; } .page-common-style .section-upgrade { /* ! 搴曢儴鍗冲埢鍗囩骇锛岃幏鍙栬В鍐虫柟妗堥儴鍒嗗叕鐢ㄦ牱寮 */ height: 280px; margin-top: 70px; background-color: linear-gradient(225deg, #ff9800 0%, #f26b1f 100%); background-image: url(../../img/home/section-upgrade-bg.jpg); background-repeat: no-repeat; background-size: cover; } .page-common-style .section-upgrade .upgrade-wrapper { color: #ffffff; font-weight: bold; text-align: center; overflow: hidden; height: 100%; } .page-common-style .section-upgrade .upgrade-title { font-size: 48px; line-height: 65px; margin-top: 64px; margin-bottom: 46px; } .page-common-style .section-upgrade .btn-upgrade { display: inline-block; padding: 16px 46px; border: 1px solid #ffffff; border-radius: 2px; font-size: 22px; line-height: 20px; cursor: pointer; } @media (max-width: 1460px) { .max-w-1440 { padding-left: 24px; padding-right: 24px; } }