.aboutroll, .intro, .icons { max-width: 1080px; margin: 0 auto; } .aboutroll { text-align: center; margin: 0 auto; } .aboutroll .col-4 { padding: 5px; } .aboutroll .item { background: #D7D7D7; padding: 20px 0; border-radius: 5px; } .aboutroll .item:hover { background: #9DC914; } .aboutroll .item h6 { font-weight: bold; } .aboutroll .item h6 b { vertical-align: text-top; font-size: 0.8em; } .aboutroll .item p { font-size: 14px; } .aboutroll .rollnum, .aboutroll .rollnum .numItem, .aboutroll .item h6 span { height: 36px; line-height: 36px; } .aboutroll .item h6, .aboutroll .rollnum .nums span { font-size: 30px; } .aboutroll .rollnum .numItem { width: 18px; } @media (max-width: 768px) { .aboutroll .item h6, .aboutroll .rollnum .nums span { font-size: 20px; } } .intro { padding-top: 50px; font-size: 17px; text-align: center; } .intro h3 { text-align: center; border-bottom: 3px solid #9DC914; display: inline-block; margin: 0 auto; line-height: 50px; } .intro h5 { padding: 20px 0 50px 0; text-align: center; color: #555 } .intro p { text-align: left; color: #666 } .intro img { max-width: 100%; } .icons div { padding-top: 20px; } .history { display: flex; background: url(../img/about/process-bg.png) center center no-repeat; background-size: 100%; } .history li { text-align: center; background: url(../img/about/process-dot.png) center 268px no-repeat; padding-top: 350px; cursor: pointer; font-size: 14px; position: relative; } .history li em { font-style: normal; font-size: 36px; font-weight: bold; border-bottom: 3px solid #FAC752; display: inline-block; } .history li:nth-child(even) { transform: rotate(180deg); } .history li:nth-child(even) em, .history li:nth-child(even) p, .history li:nth-child(even) img { transform: rotate(180deg); } .history li img{ display: none; position: absolute; top:0; left:0; z-index: 9; max-width: none; transition: all 300ms; } .history li:hover img{ display: block; } @media(max-width:720px){ .history { overflow-x: auto; } .history li:hover img{ display: none; } }