.section{ font-size: 16px; } .sec1{ padding: 8.333% 0 6.67%;/*160 0 128*/ } .sec1 .flex-box{ -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; } .sec1 .text-box{ width: 53%; } .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: 36.111%; -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); } .sec1 h3{ color: #333; font-size: 1.5em; margin-bottom: 6.458%;/*93*/ } .sec1 ul{ text-align: center; -webkit-display: flex; -webkit-align-items: flex-start; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row; flex-wrap: wrap; font-size: 1.125em; color: #333; } .sec1 ul::after{ content: ""; } .sec1 ul li{ opacity: 0; -webkit-transform: translate3d(0,25%,0); transform: translate3d(0,25%,0); -webkit-transition-property: transform,opacity; -webkit-transition-duration: 1s,1s; transition-property: transform,opacity; transition-duration: 1s,1s; } .sec1 ul li:nth-child(1){ -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .sec1 ul li:nth-child(2){ -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .sec1 ul li:nth-child(3){ -webkit-transition-delay: 0.75s; transition-delay: 0.75s; } .sec1 ul li:nth-child(4){ -webkit-transition-delay: 1s; transition-delay: 1s; } .sec1 ul li:nth-child(5){ -webkit-transition-delay: 1.25s; transition-delay: 1.25s; } .sec1 ul.actived li{ opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .sec1 ul img{ width: auto; height: 3.22em; margin-bottom: 4.66em; } .sec1 h5{ font-size: inherit; color: inherit; font-weight: normal; line-height: 1.78; } .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 5%;/*160 0 128*/ } .sec1 .flex-box{ -webkit-display: block; display: block; } .sec1 .text-box{ width: 100%; } .sec1 .img-box{ width: 70%; margin: 10% auto; } .sec1 h3{ margin-bottom: 8%;/*93*/ } .sec1 ul li{ margin-bottom: 10%; } .sec1 ul img{ margin-bottom: 2.33em; } .sec4{ padding: 10% 0;/*157 0 200*/ } .sec4 ul .flex-box p{ margin-right: 1em; } }