.section{ font-size: 16px; } .sec1{ padding: 11.15% 0 6.51%;/*214 0 125*/ } .sec1 .inner{ -webkit-display: flex; -webkit-align-items: flex-end; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: flex-end; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .sec1 .text-box{ width: 54%; } .sec1 h3{ background-image: -webkit-linear-gradient(left, #003f86, #0b83d0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #003f86; display: inline-block; font-size: 3em; line-height: 1.75; font-weight: bold; margin-bottom: 5.078125%;/*39*/ } .sec1 p{ font-size: 1.125em; color: #333; line-height: 1.78; text-indent: 2em; text-align: justify; margin-bottom: 0.56em; } .sec1 p:last-child{ margin-bottom: 0; } .sec1 .img-box{ width: 37.64%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: transform 1.5s; transition: transform 1.5s; } .sec1 .img-box.actived{ -webkit-transform: scale(1); transform: scale(1); } .sec2{ background-color: #f8f8f8; padding: 7.92% 0 8.333%;/*152 0 160*/ } .sec2 .inner{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row-reverse; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; flex-wrap: wrap; } .sec2 .text-box{ width: 47%; } .sec2 h3{ color: #333; display: inline-block; font-size: 3em; line-height: 1.542; font-weight: bold; margin-bottom: 6.4%;/*43*/ } .sec2 p{ font-size: 1.125em; color: #333; line-height: 1.78; text-indent: 2em; text-align: justify; margin-bottom: 0.56em; } .sec2 p:last-child{ margin-bottom: 0; } .sec2 .img-box{ width: 36.111%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: transform 1.5s; transition: transform 1.5s; } .sec2 .img-box.actived{ -webkit-transform: scale(1); transform: scale(1); } .sec3{ padding: 8.333% 0 7.92%;/*160 0 152*/ } .sec3 .inner{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .sec3 .text-box{ width: 42.57%; } .sec3 h3{ color: #333; display: inline-block; font-size: 3em; line-height: 1.542; font-weight: bold; margin-bottom: 8.32%;/*51*/ } .sec3 p{ font-size: 1.125em; color: #333; line-height: 1.78; text-indent: 2em; text-align: justify; margin-bottom: 0.56em; } .sec3 p:last-child{ margin-bottom: 0; } .sec3 ul{ margin-top: 23%;/*120*/ white-space: nowrap; opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: transform 1s 0.5s, opacity 1s 0.5s; transition: transform 1s 0.5s, opacity 1s 0.5s; } .sec3 .img-box.actived ul{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .sec3 li{ color: #333; display: inline-block; vertical-align: top; margin-right: 10%; } .sec3 li:last-child{ margin-right: 0; } .sec3 h4{ font-size: inherit; color: #0c67ba; font-weight: normal; margin-bottom: 1em; } .sec3 h4 b{ font-size: 2em; vertical-align: baseline !important; font-weight: 500; } .sec3 h5{ font-size: 0.875em; color: inherit; font-weight: normal; } .sec3 .img-box{ width: 520px; max-width: 52%; } .sec3 .img-box .bg{ -webkit-transform: scale(0); transform: scale(0); -webkit-transition: transform 1.5s; transition: transform 1.5s; } .sec3 .img-box.actived .bg{ -webkit-transform: scale(1); transform: scale(1); } .sec4{ background-color: #f8f8f8; padding: 8.177% 0 10.42%;/*157 0 200*/ } .sec4 ul{ border-top: 1px solid #eaeaea; margin-bottom: 7.43%;/*107*/ } .sec4 ul li{ border-bottom: 1px solid #eaeaea; } .sec4 ul .flex-box{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row; display: flex; align-items: center; justify-content: space-between; flex-direction: row; position: relative; font-size: 1.125em; height: 4em; padding-left: 1.5em; padding-right: 1.9em; } .sec4 ul .flex-box p{ color: #333; font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 3em; -webkit-flex-grow: 1; flex-grow: 1; } .sec4 ul .flex-box .time{ color: #666; font-size: inherit; -webkit-flex-shrink: 0; flex-shrink: 0; } @media only screen and (min-width:1024px){ .sec4 ul .flex-box:hover p{ color: #0c67ba; } .sec4 ul .flex-box:hover .time{ color: #0c67ba; } } @media only screen and (max-width:1366px){ .section{ font-size: 14px; } } @media only screen and (max-width:1024px){ .section{ font-size: 0.625rem; } .sec1{ padding: 10% 0 15%;/*214 0 125*/ } .sec1 .inner{ -webkit-display: block; display: block; } .sec1 .text-box{ width: 100%; margin-bottom: 10%; } .sec1 h3{ margin-bottom: 5%;/*39*/ } .sec1 .img-box{ width: 100%; } .sec2{ padding: 10% 0;/*152 0 160*/ } .sec2 .inner{ -webkit-display: block; display: block; } .sec2 .text-box{ width: 100%; } .sec2 .img-box{ width: 70%; margin: 10% auto 0; } .sec3{ padding: 10% 0;/*160 0 152*/ } .sec3 .inner{ -webkit-display: block; display: block; } .sec3 .text-box{ width: 100%; } .sec3 ul{ margin-top: 10%;/*120*/ } .sec3 li{ margin-right: 7%; } .sec3 .img-box{ max-width: 100%; } .sec3 .img-box img{ width: 70%; margin: 10% auto 0; display: block; } .sec4{ padding: 10% 0;/*157 0 200*/ } .sec4 ul .flex-box{ padding-left: 1em; padding-right: 1em; } .sec4 ul .flex-box p{ margin-right: 1em; } }