.container { } .container .aboutUs,.container .certificate{ display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; padding: 75px 0; } .container .aboutUs img { margin-right: 45px; width: 497px; height: 329px; object-fit: cover; } .container .textContent{ position: relative; max-width: 642px; } .container .textContent.next{ margin-left: 16px; max-width: 265px; } .container .textContent h1{ margin: 22px 0; font-size: 24px; font-family: PingFang; font-weight: bold; color: #333333; line-height: 25px; } .container .textContent p{ font-size: 14px; font-family: PingFang; font-weight: 500; color: #666666; line-height: 25px; } .container .textContent .watchBtn{ position: absolute; bottom: 0; width: 122px; height: 40px; background: #004080; border-radius: 20px; font-size: 16px; font-family: PingFang; font-weight: 500; color: #FFFFFF; line-height: 40px; text-align: center; cursor: pointer; } .container .textContent .watchBtn.next { bottom: 36px; } .container .certificate{ background: #F5F5F5; } .container .certificate.noSlide{ display: none; } .container .certificate .ccImg{ margin: 0 16px; width: 274px; } .container .certificate .ccImg img{ width: 100%; height: 379px; object-fit: cover; } .container .certificate .ccImg img:hover, .news .newsContent .newsBox:hover, .answer .answerContent .answerBox:hover{ box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); } .container .certificate .ccImg h2{ margin: 15px 0 0 0; font-size: 16px; font-family: PingFang; font-weight: 500; color: #333333; line-height: 18px; text-align: center; } .container .certificate .ccImg:nth-child(1){ margin-left: 0; } .container .product{ margin: 80px 0 128px; } .container .modularTitle{ text-align: center; } .container .modularTitle h1{ font-size: 24px; font-family: PingFang; font-weight: bold; color: #333333; line-height: 26px; } .container .modularTitle .line { position: relative; margin: 18px auto 0; width: 173px; height: 1px; background: #ABABAB; } .container .modularTitle .line::after{ content: ''; position:absolute; top: -1px; left: 50%; width: 45px; height: 3px; background: #004080; transform: translateX(-50%); } .product .productContent { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 40px; } .product .productContent .productImg{ width: 337px; height: 300px; border-radius: 10px; overflow: hidden; } .product .productContent .productImg img{ width: 100%; height: 100%; object-fit: cover; } .product .productContent .productText { max-width: 790px; margin-right: 56px; } .product .productContent .productText h1{ margin-top: 30px; font-size: 24px; font-family: PingFang; font-weight: 500; color: #003687; line-height: 25px; } .product .productContent .productText h2{ margin: 26px 0 20px; font-size: 20px; font-family: PingFang; font-weight: 500; color: #333333; line-height: 32px; } .product .productContent .productText p{ font-size: 20px; font-family: PingFang; font-weight: 500; color: #666666; line-height: 37px; } .product .productContent .productText .productBtn{ margin-top: 40px; width: 122px; height: 40px; background: #004080; border-radius: 20px; font-size: 16px; font-family: PingFang; font-weight: 500; color: #FFFFFF; line-height: 40px; text-align: center; cursor: pointer; } .news{ padding: 65px 0 90px; background: #F5F5F5; } .news .newsContent,.answer .answerContent{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 48px auto 0; width: 1200px; } .news .newsContent.noSlide{ display: none; } .news .newsContent .newsBox{ display: flex; margin: 0 0 20px; width: 583px; height: 310px; background: #FFFFFF; } .news .newsContent .newsBox img{ width: 50%; height: 100%; object-fit:cover; } .news .newsContent .newsBox .newsText{ position: relative; padding: 26px; width: 50%; } .news .newsContent .newsBox .newsText h1{ margin:7px 0 20px; font-size: 16px; font-family: PingFang; font-weight: 800; color: #333333; line-height: 22px; } .news .newsContent .newsBox .newsText p{ font-size: 14px; font-family: PingFang; font-weight: 500; color: #666666; line-height: 25px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; max-height: 125px; } .news .newsContent .newsBox .newsText .newsBtn { position: absolute; bottom: 30px; width: 114px; height: 32px; background: #004080; border-radius: 16px; font-size: 16px; font-family: PingFang; font-weight: 500; color: #FFFFFF; line-height: 32px; text-align: center; cursor: pointer; } .answer { margin: 62px 0 94px; } .answer .answerContent { margin-top: 35px; } .answer .answerContent .answerBox{ margin: 10px 0px; padding: 30px; box-sizing: border-box; width: 578px; min-height: 165px; background: #FFFFFF; box-shadow: 0px 2px 21px 0px rgba(155,155,155,0.1600); } .answer .answerContent .answerBox .icon{ float: left; margin-right: 12px; width: 29px; height: 33px; } .answer .answerContent .answerBox .icon img{ width: 100%; } .answer .answerContent .answerBox p{ height: 50; overflow: hidden; max-width: 450px; font-size: 17px; font-family: PingFang; font-weight: bold; color: #004080; line-height: 30px; } .answer .answerContent .answerBox div + div{ margin-top: 8px; } .answer .answerContent .answerBox div + div p{ color: #666666; line-height: 25px; } .formPart { background-image: url('../images/web/bg2.png'); padding: 90px 0; background-color: rgba(0,64,128,0.7000); } .formPart .form { padding-top: 42px; margin: 0 auto; max-width: 1200px; background: #fff; } .formPart .form .formContent{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 56px 50px 60px 54px; } .formPart .form .formContent .formText .icon{ width: 28px; min-width: 28px; height: 22px; } .formPart .form .formContent .formText h1, .formPart .form .formContent .formText p{ font-size: 14px; font-family: PingFang; font-weight: bold; color: #333333; line-height: 22px; } .formPart .form .formContent .formText h1{ min-width: 42px; } .formPart .form .formContent .formText p{ color: #666666; } .formPart .form .formContent .formText div + div{ margin-top: 18px; } .formPart .form .formContent .formInput{ margin: 0 auto; width: 568px; } .formPart .form .formContent .formInput input{ width: 275px; height: 32px; border: 1px solid #E5E5E5; box-sizing: border-box; } .formPart .form .formContent .formInput textarea { margin-top: 8px; width: 100%; height: 68px; border: 1px solid #E5E5E5; box-sizing: border-box; resize: none; } .formPart .form .formContent .formInput .f-c-w{ display: flex; justify-content: space-between; flex-wrap: wrap; } .formPart .form .formContent .formInput input:focus, .formPart .form .formContent .formInput textarea:focus{ outline:none; } .formPart .form .formContent .formInput .sendBtn{ margin-top: 5px; width: 100%; height: 31px; background: #004080; font-size: 14px; font-family: PingFang; font-weight: bold; color: #FFFFFF; line-height: 31px; text-align: center; cursor: pointer; } @media only screen and (max-width:1200px ){ .container .aboutUs, .container .certificate,.news{ padding: 26px 0; } .container .product,.answer{ margin: 26px 0; } .formPart{ padding: 0; } .container .aboutUs img{ display: none; margin: 0 20px; width: 100%; height: 100%; } .container .textContent{ margin: 0 20px; } .container .textContent .watchBtn{ position: relative; margin-top: 30px; } .container .certificate{ display: none; } .container .certificate.noSlide{ display: flex; } .container .certificate .ccImg{ margin-bottom: 30px; } .container .certificate .ccImg:nth-child(1), .container .certificate .ccImg{ margin: 20px auto; } .container .textContent .watchBtn.next { bottom: 0; } .product .productContent .productText{ margin: 0 20px 40px; word-break: break-all; } .news .newsContent + .newsContent{ margin-top: 0; } .news .newsContent, .answer .answerContent{ justify-content: center; width: auto; } .formPart .form .formContent .formInput{ width: auto; } .formPart .form .formContent .formInput input{ margin: 10px auto 0; width: 100%; } .news .newsContent{ display: none; } .news .newsContent.noSlide{ margin-top: 48px; display: flex; } .answer .answerContent .answerBox, .news .newsContent .newsBox { flex-direction: column; height: auto; width: auto; margin-left: 10px; margin-right: 10px; } .news .newsContent .newsBox img{ width: 100%; } .news .newsContent .newsBox .newsText{ width: auto; } .news .newsContent .newsBox .newsText .newsBtn{ position: relative; bottom: 0; margin-top: 20px; } .formPart .form .formContent .formText h1{ min-width: auto ; white-space:nowrap; } .product .productContent .productText h2, .product .productContent .productText p{ display: none; } .product .productContent .productText .productBtn{ display: none; } }