* {
   margin: 0;
   padding: 0;
   border: 0;
   outline: none;
   list-style: none;
   font-family: "黑体";
}

a:hover {
   text-decoration: none;
   cursor: pointer;
}

.bai {
   width: 100vw;
   height: 100vh;
   position: fixed;
   left: 0;
   top: 0;
   background: #fff;
   z-index: 9999999999;
}

#app {
   text-align: center;
}

.autoW {
   width: 1300px;
}

.df_c {
   display: flex;
   justify-content: center;
   align-items: center;
}

.df_b {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nav_bar {
   display: block;
}


/* 右边 */
.box {
   position: fixed;
   z-index: 999;
   width: 40px;
   top: 60vh;
   right: 6px;
   display: flex;
   flex-direction: column;
   background: #FFFFFF;
   justify-content: space-around;
   align-items: center;
}

.box_li {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 42px;
   border: 1px solid #EBECEF;
}

.box_li img {
   width: 17px;
   object-fit: fill;
}

.show_ma img {
   width: 19px;
   object-fit: fill;
}

.show_top img {
   width: 15px;
   object-fit: fill;
}

.box_phone {
   width: 226px;
   height: 166px;
   background: #fff;
   position: absolute;
   top: -124px;
   right: -232px;
}

.box_phone_li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 66px;
   background: #1677FF;
   font-size: 17px;
   font-family: Source Han Sans CN;
   font-weight: 500;
   color: #FFFFFF;
   padding: 0 27px;
}

.box_phone_li img {
   width: 13px;
   height: 13px;
}

.box_phone_li2 {
   display: flex;
   align-items: center;
   height: 100px;
   padding: 0 0 0 27px;
}

.sw {
   box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.2);
}

.show_top {
   display: none;
}

/* Navigation  导航栏*/
.menu {
   background: #fff;
   height: 60px;
   box-shadow: 0px 12px 27px -8px rgba(27, 30, 57, 0.1);
   position: fixed;
   left: 0;
   top: 0;
   z-index: 999;
   width: 100%;
}

ul, ol {
   margin-bottom: 0;
}

.nav_li {
   display: flex;
   justify-content: center;
   align-items: center;
}

.nav_li>li {
   min-width: 70px;
}

.nav_li>li>a {
   text-transform: uppercase;
   color: #444;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 4px 0px;
   margin: 11px 30px;
   border-bottom: 2px solid transparent;
   position: relative;
   font-family: none;
}

.nav_li>li>a::after {
   content: "";
   display: none;
   width: 32px;
   height: 3px;
   border-radius: 50px;
   position: absolute;
   left: 16px;
   bottom: -2px;
   background: #1677FF;
}

.menu li>a:hover:after {
   display: block;
}


/* 轮播图 */
#genghuanbanner {
   width: 100%;
}

#myCarousel {
   padding-top: 60px;
}

.carousel-indicators {
   position: absolute;
   left: 50%;
   z-index: 15;
   width: 60%;
   padding-left: 0;
   margin-left: -30%;
   text-align: center;
   list-style: none;
   display: flex;
   justify-content: center;
   align-items: center;
}

.carousel-indicators li {
   text-indent: -999px;
   cursor: pointer;
   width: 18px;
   height: 18px;
   margin: 0;
   background: transparent;
   margin-left: 5px;
   border: 1px solid transparent;
   border-radius: 50% !important;
   display: flex;
   justify-content: center;
   align-items: center;
}

.carousel-indicators .active {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 18px;
   height: 18px;
   border: 1px solid #fff;
   margin: 0;
   margin-left: 5px;
   border-radius: 50% !important;
   position: relative;
   background: transparent;
   /*没有这边框，切换的时候指针不会变白 */
}

.dian {
   background: #fff;
   width: 4px;
   height: 4px;
   border-radius: 50px;
}

.carousel_btn {
   position: absolute;
   top: 0;
   width: 5%;
   font-size: 20px;
   text-align: center;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.carousel_btn>div {
   width: 30px;
   height: 30px;
   border-radius: 50px;
   background: rgba(0, 0, 0, 0.3);
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 40px;
}

.left {
   left: 0;
}

.right {
   right: 0;
}

.carousel_btn>div:hover {
   background: #1D79FC;
}

.carousel_btn img {
   width: 6px;
   height: calc(16px / 3 * 2);
}

#services-section, #works-section, #about-section, #about-active {
   width: 1300px;
   height: auto;
   padding: 0;
   margin: 0;
}

#contact-section {
   width: 100%;
   padding: 0;
   margin: 0;
   height: auto;
}

.cen_box {
   width: 100%;
   display: flex;
   justify-content: center;
}

.title {
   padding: 60px 0 30px;
   position: relative;
}

.title_fu {
   padding: 31px 0 30px;
}

.xian {
   width: 30px;
   height: 1px;
   background: #e82650;
   position: absolute;
   bottom: 60px;
   left: 50%;
   margin-left: -15px;
}

.title h2 {
   font-weight: 400;
   font-size: 30px;
   color: #333;
   margin: 0;
   margin-bottom: 17px;
}

.fu_title {
   font-size: 16px;
   color: #CCCCCC;
   letter-spacing: 0.5px;
   font-weight: 300;
}

/* 多端直播 */
.duo_live {
   width: 1300px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.duo_live .duo_live_li {
   width: 637px;
   position: relative;
   margin-top: 50px;
   cursor: pointer;
}

.duo_live_li:nth-child(1), .duo_live_li:nth-child(2) {
   margin-top: 0;
}

.duo_live .up_live_img {
   width: 637px;
   height: 418px;
   object-fit: cover;
}

.live_dec {
   padding: 24px;
   margin: 0;
   height: 171px;
}

.up_live_tit {
   font-size: 19px;
   font-family: Source Han Sans CN;
   font-weight: 500;
   color: #333333;
   margin-bottom: 19px;
}

.up_live_txt {
   font-size: 16px;
   font-family: Source Han Sans CN;
   color: #999999;
   text-align: left;
   letter-spacing: 0.5px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   word-break: break-all;
   line-height: 28px;
}

.ma_img {
   display: none;
   position: absolute;
   width: 637px;
   height: 418px;
   left: 0;
   top: 0;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.5);
}

.ma_img img {
   width: 38%;
   object-fit: fill;
}

.duo_live_li:hover .ma_img {
   display: flex;
}

.duo_live_li:hover .live_dec {
   background: #1677FF;
}

.duo_live_li:hover .up_live_tit {
   color: #fff;
}

.duo_live_li:hover .up_live_txt {
   color: #fff;
}


/* 程序开发 */

.page_guide_slider {
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.works_section_wen {
   width: 332px;
   background: #F4F5F8;
   padding: 26px;
}

.work_tit {
   text-align: left;
   font-size: 18px;
   font-family: Source Han Sans CN;
   font-weight: 400;
   color: #333333;
   margin-bottom: 21px;
}

.work_txt {
   font-size: 16px;
   font-family: Source Han Sans CN;
   font-weight: 400;
   line-height: 28px;
   color: #999999;
   text-align: justify;
}

.works_section_li {
   width: 948px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.page_guide_item_image {
   width: 464px;
   height: 464px;
   margin-top: 18px;
   position: relative;
   cursor: pointer;
}

.page_guide_item_image .img {
   width: 464px;
   height: 464px;
   object-fit: fill;
}

.page_guide_item_image:hover .work_hei {
   opacity: 1;
}

.page_guide_item_image:hover .work_hei img {
   margin-top: 20px;
}

.work_hei {
   width: 100%;
   height: 100%;
   display: flex;
   opacity: 0;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   left: 0;
   top: 0;
   z-index: 66;
   color: #fff;
   transition: all 0.4s;
}

.work_hei img {
   width: 60%;
   margin-top: 10px;
   margin-bottom: 20%;
   transition: all 0.4s;
}

.page_guide_item_image:nth-child(1) {
   margin-top: 0;
}

.page_guide_item_image:nth-child(2) {
   margin-top: 0;
}

/* 视频制作 */
.video_list {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
}

.video_li {
   width: calc((1300px - 45px) / 4);
   margin-right: 15px;
   cursor: pointer;
   position: relative;
}

.video_li:hover .video_tit {
   transition: all 0.4s;
   margin: 14px 0 29px;
   color: #1677ff;
}

.bofang {
   width: 40px;
   height: 40px;
   position: absolute;
   transition: all 0.4s;
   left: 50%;
   top: -50%;
   margin-left: -20px;
   margin-top: -20px;
}

.video_meng {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: 0;
   top: 0;
   width: calc((1300px - 45px) / 4);
   height: calc((1300px - 45px) / 4 / 280 * 158);
   z-index: 66;
   background: transparent;
   overflow: hidden;
}

.out_line {
   transition: all 0.4s;
   width: 100%;
   height: 100%;
   outline: 1px solid transparent;
   display: flex;
   justify-content: center;
   align-items: center;
}

.video_li:hover .bofang {
   display: block;
   top: 50%;
}

.video_li:hover .video_meng {
   background: rgba(22, 119, 255, 0.7);
}

.video_li:hover .out_line {
   transform: scale(0.9);
   outline: 1px solid #c1dbff;
}

.video_li:nth-child(4n) {
   margin-right: 0;
}

.video_img {
   width: calc((1300px - 45px) / 4);
   height: calc((1300px - 45px) / 4 / 280 * 158);
}

.video_tit {
   margin: 18px 0 29px;
   font-size: 17px;
   font-family: Source Han Sans CN;
   color: #333333;
}

.play_video_box {
   position: fixed;
   width: 100vw;
   height: 100vh;
   left: 0;
   top: 0;
   z-index: 99999999;
   display: none;
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.5);
}

.video_con {
   position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   height: 34.16vw;
   width: 61.45vw;
   background: #000;
}

.video_bg {
   height: 34.16vw;
   width: 42.6vw;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.play_video {
   max-width: 42.6vw;
   max-height: 34.16vw;
   cursor: pointer;
   object-fit: contain;
   margin: 0 auto;
}

video:focus {
   outline: none;
}

.video_bai {
   position: absolute;
   right: 0;
   top: 0;
   width: 18.85vw;
   height: 34.16vw;
   background: #fff;
   z-index: 99;
}

.video_title {
   height: 34.16vw;
   width: 18.85vw;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   font-family: Source Han Sans CN;
   font-weight: 500;
   color: #333333;
   background: #fff;
}

.video_close {
   cursor: pointer;
   position: absolute;
   right: 23px;
   top: 23px;
   width: 18px;
   height: 18px;
   display: block;
   font-size: 18px;
   z-index: 999999;
   flex: 1;
   color: #999;
   font-weight: bold;
   font-size: x-large;
}

/* 活动执行 */
.huo_dong {
   width: 1300px;
   display: flex;
   justify-content: space-between;
}

.huo_box {
   width: 642px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.h_img {
   width: 313px;
   object-fit: fill;
   margin-top: 16px;
   overflow: hidden;
   cursor: pointer;
}

.h_img_x {
   transition: all 0.4s;
   width: 313px;
   object-fit: fill;
   transform: scale(1.02);
}

.h_img:hover .h_img_x {
   transform: scale(1.07);
}

.h_img:nth-child(1) {
   margin-top: 0;
}

.h_img:nth-child(2) {
   margin-top: 0;
}

.h_txt {
   text-align: justify;
   background: #F4F5F8;
   padding: 28px 30px;
   width: 642px;
   font-size: 16px;
   line-height: 28px;
   font-family: Source Han Sans CN;
   font-weight: 400;
   color: #8A8B8E;
}

/* 联系我们 */
#dituContent {
   width: 1300px;
   height: 450px;
   border: #ccc solid 1px;
   display: inline-block;
   min-width: 755px;
}

.container {
   background-color: rgba(0, 0, 0, 0.60);
   color: white;
   width: 1300px;
   text-align: center;
   min-width: 755px;
}

.bottom_box {
   width: 100%;
   background: #F6F8F9;
   padding: 52px 0;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 1072px;
}

.bottom_box_li {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 0 25px;
}

.img_box {
   width: 62px;
   height: 62px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.bottom_img1 {
   width: 58px;
   height: 58px;
}

.bottom_img2 {
   width: 62px;
   height: 52px;
}

.bottom_img3 {
   width: 61px;
   height: 56px;
}

.bottom_t1 {
   font-size: 18px;
   color: #1677FF;
   margin: 17px 0 15px;
}

.bottom_t2 {
   font-size: 16px;
   color: #686E78;
}

.bottom_t3 {
   visibility: hidden;
}

.foot {
   line-height: 54px;
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 2px;
   width: 1098px;
}

.foot a {
   color: #1677FF;
}

#beian a {
   color: #686E78;
}

.shu {
   color: #ced3da;
   margin: 0 20px;
}