#header-banner { width: 100%; margin-top:109px; } #header-banner img { width: 100%; } .hiddenplay{ display: none; } .item-tt { height: 155px; color: #000000; text-align: center; line-height: 155px; font-family: "microsoft yahei"; } .item-tt text { font-weight: bold; } .container-info { display: flex; } .item-num { font-size: 40px; opacity: 0.2; font-weight: bold; font-family: 'microsoft yahei'; } .item-num div>div:first-child { color: #252d97; font-size: 22px; font-weight: bold; font-family: 'microsoft yahei'; } .item-num div { position: relative; top: -15px; padding-top: 25px; background: f5f6f7; } .flex-item{ font-size: 12px; } .button-cont { position: absolute; top: 50%; width: 100%; height: 100%; line-height: 100%; text-align: center; } .button-cont img { opacity: 0.5; filter:alpha(opacity=40); /* 针对 ie8 以及更早的版本 */ width: 10%; } @font-face {font-family: "iconfont"; src: ; /* ie9 */ src: format('embedded-opentype'), /* ie6-ie8 */ format('woff2'), format('woff'), format('truetype'), /* chrome, firefox, opera, safari, android, ios 4.2 */ format('svg'); /* ios 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 90px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-arrow-:before { content: "\e628"; position: absolute; color: #000; left: 50%; top: 50%; transform: translatey(-50%) translatex(-50%); z-index: 99; opacity: 0.5; } .video-container{ position: relative; } .video-content{ position: fixed; display: flex; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; z-index: 100; } .video-content div{ width: 50%; margin: 0 auto; } .video-content video{ width: 100%; } .hiddenplay{ visibility: hidden; } .item{ width: 90%; margin: 0 auto; } .item .animate-box .image-popup img{ width: 100%; margin-bottom: 20px; } /* effect 2: move up */ .grid.effect-2 li.animate { -webkit-transform: translatey(200px); transform: translatey(200px); -webkit-animation: moveup 5s ease forwards; animation: moveup 5s ease forwards; } @-webkit-keyframes moveup { 0% { } 100% { -webkit-transform: translatey(0); opacity: 1; } } @keyframes moveup { 0% { } 100% { -webkit-transform: translatey(0); transform: translatey(0); opacity: 1; } } /**响应式处理**/ @media (max-width: 768px) { .item-tt { font-size: 32px; height: 100px; line-height: 100px; } .item-num { font-size: 28px; } .iconfont { font-size: 35px; } .container-info { flex-wrap: wrap; } .container-info .flex-left, .flex-right { display: flex; justify-content: center; } #header-banner { margin-top: 0; } #header-banner img { margin-top: 55px; } .button-cont img { transform: translatey(-50%); } .flex-item { margin: 10px; flex: 1; } .item-num div>div:first-child { font-size: 14px; } .item-num div>div:last-child { font-size: 12px; } .video-content div{ width: 80%; } .grid li { width: 100%; padding: 10px 25px; } } @media (min-width: 768px) and (max-width: 1475px) { .item-tt { font-size: 50px; } .container-info { height: 292px; } .flex-item { width: 40%; margin: 0 auto; margin-top: 60px; } .container-info .flex-left, .flex-right { flex: 1; display: flex; } .container{ width: 60%; margin: 0 auto; } .button-cont img { transform: translatey(-50%); } .flex-left .flex-item:first-child { margin-left: 0 !important; } .flex-right .flex-item:last-child { margin-right: 0 !important; } .item-num div>div:first-child { font-size: 22px; height: 2em; } #fh5co-board{ column-count: 2; -webkit-column-count: 2; } .item-num div>div:last-child { font-size: 1.2em; } } @media (min-width: 1475px) { .item-tt { font-size: 50px; } .container-info { height: 292px; } .flex-item { width: 40%; margin: 0 auto; margin-top: 60px; } .button-cont img { transform: translatey(-50%); } .container-info .flex-left, .flex-right { flex: 1; display: flex; } .flex-left .flex-item:first-child { margin-left: 0 !important; } .flex-right .flex-item:last-child { margin-right: 0 !important; } .container{ width: 60%; margin: 0 auto; } .item-num div>div:first-child { font-size: 22px; } #fh5co-board{ column-count: 2; -webkit-column-count: 2; } .item-num div>div:last-child { font-size: 1.2em; } }