tml { overflow: auto; } body { overflow-x: hidden; overflow-y: auto; position: relative; width: 100%; } body, dd, div, dl, dt, h1, h2, h3, h4, input, li, ol, p, table, ul { margin: 0; padding: 0; font-weight: 400; } input { outline: 0; } table { width: auto; border-collapse: collapse; border-spacing: 0; } li { list-style: none; vertical-align: bottom; } em, i { font-style: normal; } a { outline: 0; text-decoration: none; } a:hover { outline: 0; text-decoration: underline; } img { border: 0; } .hidden { display: none; } .hide_txt { text-indent: -9999em; font-size: 0; line-height: 0; } .clearfixed:after { display: block; content: ""; visibility: hidden; clear: both; height: 0; } .clearfixed { zoom: 1; } .wrap, .wrap input, .wrap textarea { font: 12px/1.5 \5fae\8f6f\96c5\9ed1, sans-serif; font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "甠o徟栄", tahoma, arial, simsun, "媅SO"; } .wrap { width: 100%; zoom: 1; transform-origin: center top; margin: 0 auto; } .wrapper { width: 100%; position: relative; } .content { width: 1200px; margin: 0 auto; zoom: 1; position: relative; } .about_page .content { width: 100%; } .events_sec .content { height: auto; background: url("../images/main_1.jpg"); padding-top: 86px; padding-bottom: 100px; background-repeat: no-repeat; background-position: top center; background-attachment: fixed; } .events_sec h3 { background: url("../images/ic_events.png") no-repeat -40px -132px; width: 334px; height: 115px; margin: 0 auto; } .events_list { padding-top: 10px; width: 80%; margin: 0 auto; } .events_list .ic_time { display: block; background: url("../images/ic_events.png") no-repeat -428px -30px; width: 38px; height: 68px; margin: 0 auto; } .events_list .ic_arr { display: block; background: url("../images/ic_events.png") no-repeat -476px -38px; width: 38px; height: 59px; margin: 0 auto; position: relative; top: -14px; } .events_list ul { position: relative; } .events_list li { position: relative; height: 98px; } .events_list .ic_events { position: absolute; width: 51px; height: 98px; top: 0; overflow: hidden; } .events_list .txt_events { font-size: 18px; line-height: 22px; color: #fff; position: absolute; white-space: wrap; top: -12px; text-shadow: 0 0 8px #1890ff; } .events_list .txt_events strong { display: block; font-size: 30px; line-height: 34px; font-weight: 400; } .events_list .right_li { margin-left: 50%; } .events_list .right_li .ic_events { left: -7px; background: url("../images/ic_events.png") no-repeat -396px -116px; } .events_list .right_li .txt_events { left: 56px; } .events_list .left_li { text-align: right; width: 50%; } .events_list .left_li .ic_events { right: -7px; } .events_list .left_li .ic_events i { position: absolute; top: 0; right: 0; width: 51px; height: 98px; background: url("../images/ic_events.png") no-repeat -460px -116px; } .events_list .left_li .txt_events { right: 56px; } .events_list .ic_time { animation: enttime_effect 1s ease both; -webkit-animation: enttime_effect 1s ease both; } @keyframes enttime_effect { 0%, 18%, 45%, 72% { transform: translateY(0); height: 32px; } 36% { transform: translateY(-10px); height: 32px; } 54% { transform: translateY(-5px); height: 32px; } 100% { height: 68px; } } @-webkit-keyframes enttime_effect { 0%, 18%, 45%, 72% { -webkit-transform: translateY(0); height: 32px; } 36% { -webkit-transform: translateY(-10px); height: 32px; } 54% { -webkit-transform: translateY(-5px); height: 32px; } 100% { height: 68px; } } .events_list li:nth-child(1) .ic_events { animation: entic_effect 0.8s 1s linear both; -webkit-animation: entic_effect 0.8s 1s linear both; } .events_list li:nth-child(2) .ic_events { animation: entic_effect 0.8s 1.8s linear both; -webkit-animation: entic_effect 0.8s 1.8s linear both; } .events_list li:nth-child(3) .ic_events { animation: entic_effect 0.8s 2.6s linear both; -webkit-animation: entic_effect 0.8s 2.6s linear both; } .events_list li:nth-child(4) .ic_events { animation: entic_effect 0.8s 3.4s linear both; -webkit-animation: entic_effect 0.8s 3.4s linear both; } .events_list li:nth-child(5) .ic_events { animation: entic_effect 0.8s 4.2s linear both; -webkit-animation: entic_effect 0.8s 4.2s linear both; } .events_list li:nth-child(6) .ic_events { animation: entic_effect 0.8s 5s linear both; -webkit-animation: entic_effect 0.8s 5s linear both; } .events_list li:nth-child(7) .ic_events { animation: entic_effect 0.8s 5.8s linear both; -webkit-animation: entic_effect 0.8s 5.8s linear both; } .events_list li:nth-child(8) .ic_events { animation: entic_effect 0.8s 6.6s linear both; -webkit-animation: entic_effect 0.8s 6.6s linear both; } .events_list li:nth-child(9) .ic_events { animation: entic_effect 0.8s 7.4s linear both; -webkit-animation: entic_effect 0.8s 7.4s linear both; } .events_list li:nth-child(10) .ic_events { animation: entic_effect 0.8s 8.2s linear both; -webkit-animation: entic_effect 0.8s 8.2s linear both; } @keyframes entic_effect { 0% { width: 20px; height: 24px; opacity: 0; } 40% { width: 20px; height: 24px; opacity: 1; } 100% { width: 51px; height: 98px; } } @-webkit-keyframes entic_effect { 0% { width: 20px; height: 24px; opacity: 0; } 40% { width: 20px; height: 24px; opacity: 1; } 100% { width: 51px; height: 98px; } } .events_list li:nth-child(1) .txt_events { animation: enttxt_effect 0.8s 1s linear both; -webkit-animation: enttxt_effect 0.8s 1s linear both; } .events_list li:nth-child(2) .txt_events { animation: enttxt_effect 0.8s 1.8s linear both; -webkit-animation: enttxt_effect 0.8s 1.8s linear both; } .events_list li:nth-child(3) .txt_events { animation: enttxt_effect 0.8s 2.6s linear both; -webkit-animation: enttxt_effect 0.8s 2.6s linear both; } .events_list li:nth-child(4) .txt_events { animation: enttxt_effect 0.8s 3.4s linear both; -webkit-animation: enttxt_effect 0.8s 3.4s linear both; } .events_list li:nth-child(5) .txt_events { animation: enttxt_effect 0.8s 4.2s linear both; -webkit-animation: enttxt_effect 0.8s 4.2s linear both; } .events_list li:nth-child(6) .txt_events { animation: enttxt_effect 0.8s 5s linear both; -webkit-animation: enttxt_effect 0.8s 5s linear both; } .events_list li:nth-child(7) .txt_events { animation: enttxt_effect 0.8s 5.8s linear both; -webkit-animation: enttxt_effect 0.8s 5.8s linear both; } .events_list li:nth-child(8) .txt_events { animation: enttxt_effect 0.8s 6.4s linear both; -webkit-animation: enttxt_effect 0.8s 6.4s linear both; } .events_list li:nth-child(9) .txt_events { animation: enttxt_effect 0.8s 7.4s linear both; -webkit-animation: enttxt_effect 0.8s 7.4s linear both; } .events_list li:nth-child(10) .txt_events { animation: enttxt_effect 0.8s 8.2s linear both; -webkit-animation: enttxt_effect 0.8s 8.2s linear both; } @keyframes enttxt_effect { 0% { transform: translateY(-10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes enttxt_effect { 0% { -webkit-transform: translateY(-10px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } .events_list .ic_arr { animation: entarr_effect 0.6s 8.2s linear both; -webkit-animation: entarr_effect 0.6s 8.2s linear both; } @keyframes entarr_effect { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes entarr_effect { 0% { opacity: 0; } 100% { opacity: 1; } } .top { top: 34px !important; font-size: 15px !important; } .dev_title { margin: 0 auto; color: #fff; font-size: 32px; width: 240px; text-align: center; } .dev_title span { } .dev_title p { font-size: 14px; color: #999; } @media screen and (max-width: 1440px) { .events_list .txt_events strong { font-size: 24px; } .top { top: 28px !important; font-size: 14px !important; } .events_list li { position: relative; height: 68px; } .events_sec .content { padding-top: 50px; } } @media screen and (max-width: 992px) { .dev_title p { font-size: 12px !important; } .top { line-height: 18px !important; font-size: 12px !important; } }