*{ padding: 0; margin: 0; } body{ background: #f9faff; } .banner a{ display: block; font-size: 0; } .banner a .imgs{ width: 100%; } .title_box, .center{ text-align: center; } .part_1 .title_box .sub_tit, .part_2 .title_box .sub_tit, .part_3 .title_box .sub_tit, .part_4 .title_box .sub_tit, .part_5 .title_box .sub_tit, .part_6 .title_box .sub_tit{ padding-top: 63px; padding-bottom: 17px; font-size: 14px; color: #000; line-height: 1; } .part_1 .title_box .sub_tit .highlight, .part_2 .title_box .sub_tit .highlight, .part_3 .title_box .sub_tit .highlight, .part_4 .title_box .sub_tit .highlight, .part_5 .title_box .sub_tit .highlight, .part_6 .title_box .sub_tit .highlight{ color: #092c88; font-weight: bold; } .part_1 .title_box .main_tit, .part_2 .title_box .main_tit, .part_3 .title_box .main_tit, .part_4 .title_box .main_tit, .part_5 .title_box .main_tit, .part_6 .title_box .main_tit{ margin-bottom: 76px; color: #172a88; font-size: 34px; font-weight: bold; position: relative; line-height: 1; } .part_1 .title_box .main_tit::after, .part_2 .title_box .main_tit::after, .part_3 .title_box .main_tit::after, .part_4 .title_box .main_tit::after, .part_5 .title_box .main_tit::after, .part_6 .title_box .main_tit::after{ content: ''; position: absolute; bottom: -25px; transform: translatex(-50%); left: 50%; width: 68px; height: 3px; background-color: #a0a0a0; } .part_1 .text, .part_2 .text, .part_3 .text{ margin: 0 auto; padding: 0 50px; line-height: 32px; color: #5a5858; font-size: 18px; } body{ font-family: '微软雅黑'; } .part_1 .list{ margin: 0 auto; margin-top: 38px; margin-bottom: 18px; width: 1250px; display: flex; align-items: center; justify-content: space-between; } .part_1 .list .item img{ width: 193px; } .part_1 .list .arrow img{ width: 20px; } .f20{ font-size: 20px; } .part_2, .part_4{ padding-bottom: 59px; background-color: #fff;; } .part_3 .text{ padding: 0; } .part_3 .list{ width:1200px; margin:0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .part_3 .list .item{ margin-bottom: 93px; display: flex; align-items: center; justify-content: center; } .part_3 .list .item img{ margin-right: 20px; width: 99px; } .part_3 .list .item .right .title{ font-size: 22px; line-height: 36px; } .part_3 .list .item .right .text{ line-height: 2; width: 420px; } .part_4 .list{ margin: 0 auto; width: 1200px; display: flex; align-items: baseline; justify-content: space-between; } .part_4 .list .item img{ margin: 0 auto; margin-bottom: 61px; display: block; width: 61px; } .part_4 .list .item .time{ font-size: 28px; font-weight: bold; color: #092d89; line-height: 1; } .part_4 .list .item .text{ padding-top: 27px; color: #595857; font-size: 18px; line-height: 30px; width: 288px; } .part_5{ margin-bottom: 74px; } .part_5 .wrapper .progress, .wrapper .progress{ margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: space-between; width: 1148px; height: 39px; } .part_5 .wrapper .progress::after, .wrapper .progress::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 98%; height: 1px; background-color: #a5a5a5; z-index: -1; } .part_5 .wrapper .progress_img, .wrapper .progress_img{ margin: 0 auto; display: flex; align-items: center; justify-content: space-between; width: 1170px; } .part_5 .wrapper .progress_img img, .wrapper .progress_img img{ margin-bottom: 14px; width: 62px; } .part_5 .wrapper .progress_detail, .wrapper .progress_detail{ margin: 0 auto; margin-top: 15px; display: flex; align-items: center; justify-content: space-between; width: 1170px; } .progress_detail .item .address{ margin-bottom: 8px; color: #000; font-size: 18px; line-height: 1; } .progress_detail .item .btn{ display: block; margin: 0 auto; margin-bottom: 15px; width: 69px; height: 18px; background: linear-gradient(to bottom, #4bbaa9, #205aa8, #052045); color: #fff; outline: none; border: none; box-shadow: 3px 2px 0 rgba(8, 1, 3, .2); } .progress_detail .item .date{ display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 18px; height: 18px; color: #595857; } .part_6{ background-image: url(/uploads/image/t2ximages/16.png); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 281px; color: #fff; } .part_6 .title_box .sub_tit, .part_6 .title_box .sub_tit .highlight, .part_6 .title_box .main_tit{ color: #fff; } .part_6 .title_box .main_tit::after{ width: 1200px; background-color: #f3f7f9; height: 0.5px; } .part_6 .title_box .main_tit{ margin-bottom: 43px; } .part_6 .text{ font-size: 28px; line-height: 1; } .part_6 .btn{ display: block; margin: 0 auto; margin-top: 21px; width: 203px; height: 43px; border: none; outline: none; font-size: 20px; border-radius: 22px; background: linear-gradient(to right, #4bbaa9, #205aa8); color: #fff; } .gc{ filter: grayscale(100%); -webkit-filter: grayscale(100%) } a { text-decoration: none; } .arrow{ animation: arrow linear 1.5s infinite alternate; } @keyframes arrow { 0% { transform: translatey(10px); opacity: 0; } 100% { transform: translatey(-10px); opacity: 1; } } .list .item:hover{ -webkit-transform: translatey(-3px); -ms-transform: translatey(-3px); transform: translatey(-3px); -webkit-box-shadow: 0 0 6px #999; box-shadow: 0 0 6px #999; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; } .mobile .part_1 .text, .mobile .part_2 .text, .mobile .part_3 .text{ font-size: 13px; padding-left: 16px; padding-right: 20px; line-height: 22px; } .mobile .part_1 .title_box .sub_tit, .mobile .part_2 .title_box .sub_tit, .mobile .part_3 .title_box .sub_tit, .mobile .part_4 .title_box .sub_tit, .mobile .part_5 .title_box .sub_tit, .mobile .part_6 .title_box .sub_tit{ padding-top: 55px; padding-bottom: 8px; font-size: 7px; } .mobile .part_1 .title_box .main_tit, .mobile .part_2 .title_box .main_tit, .mobile .part_3 .title_box .main_tit, .mobile .part_4 .title_box .main_tit, .mobile .part_5 .title_box .main_tit, .mobile .part_6 .title_box .main_tit{ font-size: 17px; } .mobile .part_1 .title_box .main_tit::after, .mobile .part_2 .title_box .main_tit::after, .mobile .part_3 .title_box .main_tit::after, .mobile .part_4 .title_box .main_tit::after, .mobile .part_5 .title_box .main_tit::after, .mobile .part_6 .title_box .main_tit::after{ bottom: -12.5px; width: 34px; height: 1.5px; } .mobile .part_1 .list{ display: block; width: auto; } .mobile .part_1 .list .item img{ margin-bottom: 7px; width: 291px; } .mobile .part_1 .title_box .main_tit, .mobile .part_2 .title_box .main_tit, .mobile .part_3 .title_box .main_tit, .mobile .part_4 .title_box .main_tit, .mobile .part_5 .title_box .main_tit, .mobile .part_6 .title_box .main_tit, .mobile .part_3 .list{ margin-bottom: 32px; } .mobile .part_2, .mobile .part_4{ padding-bottom: 25px; } .mobile .part_3 .list{ display: block; width:auto; } .mobile .part_3 .list .item img{ width: 45px; margin-right: 4px; } .mobile .part_3 .list .item .right .title{ font-size: 13px; font-weight: bold; line-height: 22px; } .mobile .part_3 .text, .mobile .part_3 .list .item .right .text{ width: 284px; padding: 0; line-height: 22px; } .mobile .part_3 .list{ padding: 0 19px; } .mobile .part_3 .list .item{ margin-bottom: 30px; padding-bottom: 17px; } .mobile .part_4 .list{ padding: 0; width:100%; display: block; } .mobile .part_4 .list .item{ padding: 0 34px; padding-bottom: 17px; display: flex; align-items: baseline; } .mobile .part_4 .list .item .time{ font-size: 14px; white-space: nowrap; } .mobile .part_4 .list .item .text{ padding-top: 0; padding-left: 9px; font-size: 13px; line-height: 22px; } .mobile .part_4 .imgs{ margin-top: 13px; } .mobile .part_4 .imgs img{ margin: 0 9px; width: 30px; } .mobile .part_5 .wrapper .progress, .wrapper .progress{ width: 90%; } .mobile .part_5 .wrapper .progress_img, .wrapper .progress_img{ width: 92%; } .mobile .part_5 .wrapper .progress_detail, .wrapper .progress_detail{ width: 95%; } .mobile .progress .dot{ width: 23px; } .mobile .part_5 .wrapper .progress_img img, .wrapper .progress_img img{ width: 31px; } .mobile .progress_detail .item .address, .mobile .progress_detail .item .date{ font-size: 10px; } .mobile .progress_detail .item .btn{ width: 41px; height: 10px; font-size: 7px; } .mobile .part_5 .wrapper .progress{ height: 23px; } .mobile .part_6 .text{ font-size: 14px; } .mobile .part_6 .btn{ width: 67px; height: 14px; font-size: 10px; } .mobile .part_6{ height: 139px; } .mobile .part_6 .title_box .sub_tit{ padding-top: 15px; }