@charset "utf-8"; /*index*/ .index-unit p{ font-size:16px; line-height:26px; text-align: center; width:90%; margin:auto; } .huibg{ background-color: var(--main-hui-color); } .piclist a{ display: block; border:1px solid var(--main-white-color); border-radius: 8px; margin-bottom:20px; } .piclist a .imgarea{ display: flex; justify-content: center; align-items: center; } .piclist a span{ display: flex; justify-content: center; align-items: center; padding:10px; } .piclist img{ max-width: 100%; margin:auto; border-radius: 8px; } .piclist a:hover{ background-color: var(--main-yellow-color); border:1px solid var(--main-yellow-color); } @media screen and (min-width: 993px) { .piclist{ display: flex; flex-wrap: wrap; } } @media screen and (max-width: 992px) { .piclist{ } } /*---------------*/ .index-service .col-md-4 a{height:444px;} .index-service .col-md-6 a{height:207px;} .index-service a{ display: block; border-radius: 8px; position: relative; background-position: center center; background-repeat: no-repeat !important; background-size:cover !important; } .index-service .col-md-6{ margin-bottom:30px; } .index-service a img{ border-radius: 8px; max-width: 100%; margin:auto; } .index-service div[class*="col-md"] .service-tit{ display: flex; justify-content: center; align-items: center; position: absolute; bottom:0; left:0; padding:15px; background-color:var(--main-yellow-color); width:100%; border-bottom-right-radius:8px; border-bottom-left-radius:8px; } .index-service div[class*="col-md"] a:hover .service-tit{ color:var(--main-white-color); background-color:var(--main-blue-color); } @media screen and (min-width: 993px) { } @media screen and (max-width: 992px) { .index-service .col-md-4 a { margin-left:15px; margin-right:15px; margin-bottom:20px; } } /*--------*/ .vide-bg{ position: relative; height:600px; overflow: hidden; background-position: center right; background-repeat: no-repeat; background-color: #253c8b; z-index: 0; } #index_video{ position: absolute; width:100%; top:-20%; left:0; z-index:0; } .vide-bg .v-bg{ position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.7); z-index: 10; } .video-font{ z-index: 1000; color:#fff; height:600px; } .video-font .video-font-area{ padding:20px; z-index: 0; } .play-video{ font-size:66px; margin:20px 10px 10px 0px; cursor: pointer; color:var(--main-yellow-color); } .play-video:hover{ color:var(--main-white-color);} .videoplay-bg{ background-color: rgba(0,0,0,0.8); position: fixed; height:100%; width:100%; z-index: 1000; top:0; left:0; display: none; } .videoplay-bg #index_video{ position: absolute; top:10%; } .videoplay-bg #index_video .videoclose{ position: absolute; width:30px; height:30px; color:var(--main-white-color); top:0; right:-30px; display: flex; align-items: center; justify-content: center; border-radius: 30px; cursor: pointer; } .videoplay-bg #index_video .videoclose:hover{ color:var(--main-black-color); background-color: var(--main-yellow-color);; } #index_video video{ position: absolute; width:100%; top:0; left:0; } @media screen and (min-width: 993px) { .vide-bg{ background-size:contain; background-image: url( "../images/video-bg.png"); } .video-font{ display: flex; align-items: center; font-size:46px; } .videoplay-bg #index_video{ left:24%; width:52%; height:500px; } #index_video video{ height:500px; } } @media screen and (max-width: 992px) { .vide-bg{ background-size:cover; background-image: url( "../images/video-bg-2.png"); } .video-font{ display: flex; align-items: center; font-size:36px; } .videoplay-bg #index_video{ width:80%; left:10%; } #index_video video{ } } /*--------------*/ .index-webinar{ font-size:22px; } .index-webinar div[class*="col-md"]{ text-align: center; } .index-webinar div[class*="col-md"] .webinar-name{ font-size:24px; margin-bottom:10px; } .index-webinar .persoon-pic{ width:200px; height:200px; border-radius: 200px; display: block; margin:auto auto 20px auto; } @media screen and (min-width: 993px) { .index-webinar{ display: flex; align-items: center; justify-content: center; } } @media screen and (max-width: 992px) { .index-webinar{ display: table; } }