html { background: #FFFFFF; } html body { overflow: auto; } header { height: 80px; background: #FFFFFF; position: fixed; top: 0; left: 0; right: 0; line-height: 80px; z-index: 555; min-width: 1200px; } header .logo { display: inline-block; width: 205px; margin-top: 18px; } header .logo img { width: 100%; } header .logo_cpan { display: inline-block; font-weight: bold; font-size: 22px; color: #333333; margin-left: 18.75%; } header .logo_cpan > img { width: 42px; margin-right: 12px; margin-left: 40px; } header .logo_cpan span { margin-top: 30px; display: inline-block; float: right; line-height: 1; } header .right { float: right; margin-right: 19.74%; font-weight: 400; font-size: 18px; } header .right a { color: #555555; position: relative; } header .right a:after { content: ''; height: 1px; position: absolute; bottom: 0; left: 0; right: 0; background: #555555; } header .right a + a { margin-left: 30px; } main { background: #FBFCFF; padding-top: 80px; } main .content_1 { height: 60px; line-height: 60px; background: #FBF1CC; font-size: 20px; color: #B47800; text-align: center; } main .content_1 span { color: #FF0000; } main .content_2 { text-align: center; position: relative; padding-top: 1px; } main .content_2 .title { font-weight: bold; font-size: 60px; color: #000000; margin-top: 115px; position: relative; z-index: 1; } main .content_2 .title img { width: 102px; margin-right: 10px; } main .content_2 .doc { font-size: 24px; color: #333333; line-height: 50px; margin-top: 33px; position: relative; z-index: 1; } main .content_2 .img_1 { width: 414px; margin-top: 34px; position: relative; z-index: 1; } @-webkit-keyframes scaleAnimation { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleAnimation { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } to { -webkit-transform: scale(1); transform: scale(1); } } main .content_2 .download_btn { width: 548px; height: 140px; display: block; margin: 46px auto 0; position: relative; overflow: initial; } main .content_2 .download_btn .btn_1 { width: 100%; height: 100%; -o-object-fit: none; object-fit: none; -o-object-position: left; object-position: left; -webkit-animation: scaleAnimation 1s infinite; animation: scaleAnimation 1s infinite; } main .content_2 .download_btn:hover .btn_1 { -o-object-position: right; object-position: right; } @-webkit-keyframes scaleAnimation2 { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 50% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scaleAnimation2 { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 50% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.9); transform: scale(0.9); } } main .content_2 .download_btn .icon_1 { position: absolute; width: 123px; bottom: -22px; right: -34px; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-animation: scaleAnimation2 1s infinite; animation: scaleAnimation2 1s infinite; } main .content_2 .p_1 { font-size: 20px; color: #666666; line-height: 36px; text-align: center; margin-top: 28px; position: relative; z-index: 1; } main .content_2 .p_1 span { color: #FF6600; } main .content_2 .img_2 { width: 1180px; margin-top: 69px; position: relative; z-index: 1; } main .content_2 .bg { position: absolute; width: 100%; left: 0; top: 0; } main .content_3 { overflow: hidden; } main .content_3 .p_2 { font-weight: bold; font-size: 44px; color: #333333; text-align: center; margin-top: 53px; } main .content_3 .ul_1 { margin-top: 81px; text-align: center; } main .content_3 .ul_1 .li_1 { display: inline-block; text-align: left; margin-top: 38px; margin-left: 50px; line-height: 1; } main .content_3 .ul_1 .li_1:first-child { margin-top: 0; } main .content_3 .ul_1 .li_1 div { display: inline-block; width: 620px; overflow: hidden; height: 44px; line-height: 44px; } main .content_3 .ul_1 .li_1 a { position: relative; color: #000000; font-size: 28px; float: left; } main .content_3 .ul_1 .li_1 a:hover { color: #FF6600; } main .content_3 .ul_1 .li_1 a:hover:after { content: ''; height: 1px; position: absolute; bottom: 0; left: 0; right: 0; background: #FF6600; } main .content_3 .ul_1 .li_1 .icon_2 { width: 37px; margin-right: 15px; float: left; margin-top: 4px; } main .content_3 .ul_1 .li_1 .icon_3 { width: 26px; margin-left: 12px; float: left; margin-top: 8px; } main .content_3 .download_btn { margin: 101px auto 30px; display: block; text-align: center; line-height: 100px; width: 494px; height: 100px; background: -webkit-gradient(linear, left top, right top, from(#27DEA0), to(#1ECD7D)); background: linear-gradient(90deg, #27DEA0 0%, #1ECD7D 100%); -webkit-box-shadow: 4px 3px 10px 1px rgba(0, 193, 85, 0.4); box-shadow: 4px 3px 10px 1px rgba(0, 193, 85, 0.4); border-radius: 50px 50px 50px 50px; font-weight: bold; font-size: 34px; color: #FFFFFF; } main .content_3 .download_btn:hover { background: -webkit-gradient(linear, right top, left top, from(#27DEA0), to(#1ECD7D)); background: linear-gradient(270deg, #27DEA0 0%, #1ECD7D 100%); } main .content_4 { overflow: hidden; text-align: center; } main .content_4 .p_2 { font-weight: bold; font-size: 44px; color: #333333; text-align: center; margin-top: 48px; } main .content_4 .p_3 { font-size: 24px; color: #333333; margin-top: 40px; } main .content_4 .img_3 { width: 1184px; margin-top: 60px; } main .content_4 .box_1 { margin-top: 78px; text-align: center; } main .content_4 .box_1 .box_2 { width: 466px; font-size: 24px; color: #333333; line-height: 44px; text-align: left; } main .content_4 .box_1 .box_2 p { font-size: 24px; } main .content_4 .box_1 .box_2 p + p { margin-top: 50px; } main .content_4 .box_1 .box_3 { width: 510px; float: right; margin-left: 173px; } main .content_4 .box_1 div { display: inline-block; } main .content_5 { text-align: center; margin-top: 89px; } main .content_5 .icon_4 { width: 232px; } main .content_5 .box_content { display: inline-block; margin-top: 142px; } main .content_5 .box_content:first-child { margin-top: 90px; } main .content_5 .box_content .text { float: left; width: 466px; margin-right: 116px; text-align: left; margin-top: 89px; } main .content_5 .box_content .text .title { font-weight: bold; font-size: 32px; color: #333333; } main .content_5 .box_content .text .doc { font-size: 22px; color: #666666; line-height: 44px; margin-top: 40px; } main .content_5 .box_content img { width: 592px; } main .content_5 .box_4 .text { float: right; margin-left: 78px; margin-right: 0; margin-top: 79px; width: 484px; } main .content_5 .box_5 .text { margin-right: 88px; margin-top: 23px; width: 515px; } main .content_5 .box_6 .text { float: right; margin-left: 78px; margin-right: 0; margin-top: 78px; width: 467px; } main .content_5 .box_7 .text { margin-top: 87px; margin-right: 65px; width: 523px; } main .content_5 .download_btn { display: block; width: 494px; height: 100px; background: -webkit-gradient(linear, left top, right top, from(#27DEA0), to(#1ECD7D)); background: linear-gradient(90deg, #27DEA0 0%, #1ECD7D 100%); -webkit-box-shadow: 4px 3px 10px 1px rgba(0, 193, 85, 0.4); box-shadow: 4px 3px 10px 1px rgba(0, 193, 85, 0.4); border-radius: 50px; font-weight: bold; font-size: 34px; color: #FFFFFF; line-height: 100px; margin: 120px auto 0; } main .content_5 .download_btn:hover { background: -webkit-gradient(linear, right top, left top, from(#27DEA0), to(#1ECD7D)); background: linear-gradient(270deg, #27DEA0 0%, #1ECD7D 100%); } main .content_6 { text-align: center; margin-top: 90px; } main .content_6 .icon_5 { width: 245px; } main .content_6 .comment { margin-top: 90px; } main .content_6 .comment .carousel-box { margin: 0 auto 0; width: 1152px; position: relative; } main .content_6 .comment .carousel-box .comment_list { width: 3312px; } main .content_6 .comment .carousel-box .left { position: absolute; top: 180px; left: -70px; width: 21px; height: 36px; cursor: pointer; z-index: 99; } main .content_6 .comment .carousel-box .left img { width: 100%; height: 100%; -o-object-fit: none; object-fit: none; -o-object-position: left; object-position: left; } main .content_6 .comment .carousel-box .left:hover img { -o-object-position: right; object-position: right; } main .content_6 .comment .carousel-box .right { position: absolute; top: 180px; right: -70px; width: 21px; height: 36px; cursor: pointer; z-index: 99; } main .content_6 .comment .carousel-box .right img { width: 100%; height: 100%; -o-object-fit: none; object-fit: none; -o-object-position: left; object-position: left; } main .content_6 .comment .carousel-box .right:hover img { -o-object-position: right; object-position: right; } main .content_6 .comment_card { float: left; width: 374px; margin-right: 15px; } main .content_7 { margin-top: 90px; } main .content_7 .box_8 { width: 1200px; position: relative; margin: 0 auto; } main .content_7 .box_8 img { width: 100%; } main .content_7 .box_8 .box_9 { position: absolute; top: 39px; left: 199px; text-align: center; } main .content_7 .box_8 .box_9 p { font-size: 22px; color: #102C4D; } main .content_7 .box_8 .box_9 p span { color: #FF0000; } main .content_7 .box_8 .box_9 div { display: inline-block; margin-top: 32px; } main .content_7 .box_8 .box_9 .download_btn { width: 294px; height: 68px; display: inline-block; position: relative; overflow: initial; } main .content_7 .box_8 .box_9 .download_btn img { width: 100%; height: 100%; -o-object-fit: none; object-fit: none; -o-object-position: left; object-position: left; } main .content_7 .box_8 .box_9 .download_btn:hover img { -o-object-position: right; object-position: right; } main .content_7 .box_8 .box_9 .download_btn:last-child { float: right; } main .content_7 .box_8 .box_9 .download_btn + .download_btn { margin-left: 86px; } footer { text-align: center; font-size: 14px; color: #333333; margin-top: 88px; padding-bottom: 68px; } footer p + p { margin-top: 10px; }