/* h3{ font-size: 32px; } */ .bs_head{ position: absolute; } /* banner */ .realizer_banner{ height: 28.125vw; width: 100%; min-width: 1280px; min-height: 360px; background-size: cover; position: relative; } .realizer_banner_content{ position: absolute; top: 50%; left: 14.5%; transform: translateY(-50%); } .realizer_banner .btn{ width: 200px; } /* .bs_kind li{ display: inline-block; padding: 0 44px; border-right: 1px solid #EAEAEA; cursor: pointer; } .bs_kind a{ color: #333333; font-size: 16px; } .bs_kind li:last-child{ border: none; } */ /* 浜у搧绠€浠 */ .realizer_intro{ padding-top: 58px; } .realizer_intro_con{ width: 1200px; margin: 0 auto; /* margin-left: 556px; */ } .realizer_intro_con img{ width: 340px; height: 272px; } .intro_title{ /* width: 432px; margin: 0 auto; */ display: flex; align-items: center; justify-content: center; } .intro_title hr{ width: 98px; height: 1px; border: 0; background-color: #D8D8D8; } .intro_title h2{ margin: 0 25px; } .realizer_intro_con{ display: flex; align-items: center; margin-top: 48px; justify-content: flex-end; } .realizer_intro_show{ margin-left: 84px; } .realizer_intro_show p:first-child{ font-size: 20px; font-weight: bold; line-height: 26px; margin-bottom: 11px; } .realizer_intro_show p:last-child{ font-size: 16px; width: 598px; color: #666666; line-height: 24px; text-align: justify; text-justify: distribute; } .realizer_feats{ padding-top: 90px; margin-top: 64px; overflow: hidden; background: #F2F5F6; } .realizer_feats ul{ /* margin-top: 64px; */ padding-bottom: 136px; } .realizer_feats_item_con,.realizer_feats_item_amin{ width: 100%; height: 100%; } .realizer_feats_item_con{ z-index: 2; } .realizer_feats_item_show{ display: flex; justify-content: space-between; align-items: center; /* width: 66%; min-width: 1100px; */ width: 892px; height: 100%; margin: 0 auto; /* overflow: hidden; */ } .realizer_feats_img{ /* width: 44.7%; overflow: hidden; */ width: 380px; height: 380px; } .realizer_feats_img img{ width: 100%; } .realizer_feats_intro{ width: 380px; /* width: 45%; */ } .realizer_feats_intro hr{ border: 0; width: 72px; height: 4px; background: #2168FB; margin-bottom: 36px; margin-top: 26px; } .realizer_feats_intro p{ font-size: 16px; line-height: 34px; color: #666666; letter-spacing: 0.24px; } .realizer_feats_item01{ height: 293px; } .realizer_feats_item01 .realizer_feats_intro{ padding-top: 30px; } .realizer_feats_item02{ height: 263px; } .realizer_feats_item03{ height: 309px; } .realizer_feats_item04{ height: 362px; } .realizer_feats_item_amin{ overflow: hidden; } .realizer_feats_item_amin div{ border-radius: 50%; position: absolute; } .realizer_feats_amin01_1{ right: -380px; top: -450px; width: 960px; height: 960px; background: #EDFEFF; } .realizer_feats_amin01_2{ left: -180px; bottom: -220px; width: 500px; height: 500px; background: #DBFCFF; } .realizer_feats_item02{ /* background: linear-gradient(224deg, #E1F2FF 0%, #FFFFFF 100%); */ } .realizer_feats_amin02_1{ top: 67px; left: -100px; width: 900px; height: 900px; border-radius: 50%; background: #E6F4FF; } .realizer_feats_amin02_2{ top: 68px; left: 835px; width: 156px; height: 156px; background: #E6F4FF; border-radius: 50%; } .realizer_feats_amin03_1{ bottom: -68px; left: 356px; width: 238px; height: 238px; background: #DBFCFF; } .realizer_feats_amin03_2{ right: -280px; bottom: 66px; width: 1100px; height: 1100px; background: #DBFCFF; } .realizer_feats_amin04_1{ left: -180px; top: 145px; width: 960px; height: 960px; background: #E6F4FF; } .realizer_feats_amin04_2{ left: 740px; top: -170px; width: 332px; height: 332px; background: #E6F4FF; } /* 瑙嗛鏁欑▼ */ .dialog{ background-color: rgba(216, 216, 216, 0.486); width: 100%; height: 100%; position: fixed; z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; /* overflow: auto; */ margin: 0; display: none; } .dialog .video{ padding-top: 0px; height: 100%; padding-top: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .course{ padding-top: 100px; } .course .wheelBg{ width: 854px; height: 597px; /* background: url('../assets/img/wheelBg.png'); */ background-size: 100%; } .cou_con{ position: relative; display: flex; } .cou_icon{ /* border-top: 23px solid transparent; border-right: 10px solid transparent; border-bottom: 23px solid transparent; border-left: 40px solid #FFFFFF; */ width: 62px; height: 62px; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .cou_con p{ width: 100%; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); text-align: center; z-index: 100; font-size: 36px; color: #ffffff; } .re_video{ width: 100%; height: 100%; position: absolute; z-index: 2; } .poster-main .poster-btn{ background-color: #EEEEEE; border-radius: 50%; width: 30px!important; height: 30px!important; top: 50%!important; margin-top: -15px!important; display: flex; align-items: center; justify-content: center; } .poster-btn .icon{ fill: #8B8B8B; width: 14px; height: 14px; } .poster-prev-btn{ left: 12%!important; } .poster-next-btn{ right: 12%!important; } @media only screen and (max-width: 1440px) { .poster-prev-btn{ left: 10%!important; } .poster-next-btn{ right: 10%!important; } } .cou_con{ border-radius: 8px; } .wh_mg1{ border-radius: 12px; height: 100%; } .poster-list .showVideo{ height: 100%; } .poster-list .cou_con{ height: 100%; } .co_video{ position: relative; } #exit{ position: absolute; top: -40px; right: -40px; z-index: 2000; cursor: pointer; /* display: block; */ transition: all .2s; width: 40px; height: 40px; background-color: #999999; border-radius: 20px; display: flex; justify-content: center; align-items: center; } #exit:hover{ transform: rotateZ(90deg); } #exit .iconfont{ color: #ffffff; width: 40px; font-size: 26px; text-align: center; /* transition: all 2s; */ } .poster-item{ cursor: pointer; } .poster-main{ position: relative; margin: 40px auto; margin-bottom: 24px; } .poster-main .poster-list .poster-item{ position: absolute; left: 0; top: 0; } .poster-main .poster-btn{ position: absolute; top: 0; cursor: pointer; } .poster-main .poster-prev-btn{ left: 0; background-repeat: no-repeat; background-position: center center; } .poster-main .poster-next-btn{ right: 0; background-repeat: no-repeat; background-position: center center; } #carousel{ overflow: hidden; } .courseTitle{ text-align: center; font-size: 16px; color: #666666; } /* video */ .video-js .vjs-play-control{ outline: none; } .vjs-slider-horizontal .vjs-volume-level:before{ top: -0.5em; } .video-js .vjs-play-progress:before{ top: -0.5em; } .vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; position: absolute; top: 50%; left: 50%; outline: none; } .de_video .vjs-paused .vjs-big-play-button,.de_video .vjs-paused.vjs-has-started .vjs-big-play-button{ transform: translateX(14px); } .video-js .vjs-big-play-button{ font-size: 2.5em; line-height: 2.3em; height: 2.5em; width: 2.5em; -webkit-border-radius: 2.5em; -moz-border-radius: 2.5em; border-radius: 2.5em; background-color: #73859f; background-color: rgba(115,133,159,.5); border-width: 0.15em; margin-top: -1.25em; margin-left: -1.75em; } .video-js.vjs-playing .vjs-tech { pointer-events: auto; } /* 涓棿鐨勬挱鏀剧澶 */ .vjs-big-play-button .vjs-icon-placeholder { font-size: 1.63em; } /* 鍔犺浇鍦嗗湀 */ .vjs-loading-spinner { font-size: 2.5em; width: 2em; height: 2em; border-radius: 1em; margin-top: -1em; margin-left: -1.5em; } .co_video .video-js .vjs-big-play-button{ background-color: #999999!important; border-color: #999999; } /* 搴旂敤妗堜緥 */ #realizer_case{ padding: 100px 0 100px 0; } .realizer_case_swiper{ position: relative; /* width: 80vw; min-width: 1200px; */ width: 1280px; margin: 0 auto; margin-top: 40px; /* height: 222px; */ } .realizer_case_swiper .swiper-container{ /* width: 89%; */ width: 1133px; margin: 0 auto; } .realizer_case_swiper img{ width: 100%; } .realizer_case_swiper .swiper-button-prev:after, .realizer_case_swiper .swiper-button-next:after { content: ""; } .realizer_case_swiper .swiper-button-next, .realizer_case_swiper .swiper-button-prev{ width: 30px; height: 30px; background-color: #cccccc; border-radius: 50%; transition: all .3s; } .realizer_case_swiper .swiper-button-prev:hover,.realizer_case_swiper .swiper-button-next:hover{ background-color: #2168FB; } .realizer_case_swiper .swiper-button-prev{ left: 0; } .realizer_case_swiper .swiper-button-next{ right: 0; } .realizer_case_swiper .icon{ fill: #FFFFFF; width: 14px; }