.sec1{ padding: 9.375% 0; overflow: hidden; } .sec1 .inner{ width: 1244px; } .sec1 li{ -webkit-display: flex; -webkit-align-items: flex-start; -webkit-justify-content: flex-start; -webkit-flex-direction: row; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; padding-bottom: 6.35%; font-size: 16px; background-repeat: repeat-y; background-size: 4.375em; background-image: url(../images/history_sec1_line.png); background-position: 10.0625em 0; } .sec1 li:last-child{ padding-bottom: 0; } .sec1 h3{ font-size: 1.875em; color: #fff; background-color: #0c67ba; width: 4.3em; height: 1.9em; line-height: 1.9; text-align: center; -webkit-flex-shrink: 0; flex-shrink: 0; } .sec1 h3.hide{ opacity: 0; visibility: hidden; } .sec1 .line{ -webkit-flex-shrink: 0; flex-shrink: 0; margin: 1.75em 2em 0; width: 4.375em; height: 1px; background-color: #0c67ba; position: relative; } .sec1 li:first-child .line::before,.sec1 li:last-child .line::before{ content: ""; position: absolute; left: 0; width: 100%; height: 100vh; background-color: #fff; } .sec1 li:first-child .line::before{ bottom: 1px; } .sec1 li:last-child .line::before{ top: 1px; } .sec1 .text-box{ -webkit-flex-grow: 1; flex-grow: 1; background-color: #f4f4f4; padding: 3% 4.823%;/*38 60 36*/ -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; -webkit-transition: transform 1s,opacity 1s; transition: transform 1s,opacity 1s; } .sec1 li.actived .text-box{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .sec1 h5{ font-size: 1.5em; color: #0c67ba; margin-bottom: 2.44%;/*21*/ } .sec1 p{ font-size: 1.125em; color: #333333; line-height: 1.78; } @media only screen and (max-width:1024px){ .sec1{ padding: 3rem 0; } .sec1 li{ padding-bottom: 1.5rem; font-size: 0.5625rem; } }