/* 轮播图 */
.banner_wrap{width: 100%;height: 400px;position: relative;}
.banner_wrap .swiper-container{width: 100%;position: relative;height: 400px;min-width: 1200px;}
.banner_wrap .swiper-container .swiper-slide{width: 100%;position: relative;height: 100%;overflow: hidden;}
.banner_wrap .swiper-container .swiper-slide img{position: absolute;top: 0%;left: 50%;transform: translateX(-50%);height: 100%;max-width: inherit;}

/* 轮播点 */
.pagination {
  position: absolute;
  z-index: 20;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin: 0 5px;
  opacity: 0.8;
  border: 1px solid #00a8b3;
  cursor: pointer;
}
.swiper-active-switch {
  background: #00a8b3;
}
  /* 轮播箭头 */
.banner_wrap .swiper_btn{display: block;position:absolute;width:44px;height: 44px;z-index: 999;opacity:0;transition: all 0.5s;}
.banner_wrap .swiper_btn svg{width: 100%;height: 100%;display: block;}
.banner_wrap .leftbtn{left: 32px;top: 50%;transform: translate(-16px,-50%);}
.banner_wrap .rightbtn{right: 32px;top: 50%;transform: translate(16px,-50%);}
.banner_wrap:hover .leftbtn{opacity: 1;transform: translate(0px,-50%);}
.banner_wrap:hover .rightbtn{opacity: 1;transform: translate(0px,-50%);}

/* 课程遮罩层 */
.mask_wrap{width: 100%;margin: 64px 0px;}
.mask_wrap .mask_posi{width: 1200px;min-height: 300px;background: #fff;border-radius: 12px;padding: 32px;box-sizing: border-box;margin: 0 auto;}
.mask_wrap .mask_posi .mask_con{width: 100%;}
.mask_wrap .mask_posi .mask_con::-webkit-scrollbar { width: 0 !important }
.mask_wrap .mask_posi .mask_con .mask_title{letter-spacing: 6px;color: #2cb7c0;width: 100%;font-size: 24px;text-align: center;margin-bottom: 16px;}
.mask_wrap .mask_posi .mask_con .mask_min_title{font-size: 18px;color: #666;text-align: center;margin-bottom: 16px;}
.mask_wrap .mask_posi .mask_con .color_text{font-size: 18px;color: #00a8b3;line-height: 1.5em;margin-bottom: 16px;}
.mask_wrap .mask_posi .mask_con .mask_text{font-size: 18px;color: #666;line-height: 1.5em;margin-bottom: 16px;}
.mask_wrap .mask_posi .mask_con .mask_text .mask_a{font-size: 18px;display: inline-block;line-height: 1.5em;}
.mask_wrap .mask_posi .mask_con .color_text{color: #00a8b3;}
.mask_wrap .mask_posi .mask_con img{max-width: 100%;display: block;margin: 32px auto;}

.mask_wrap .mask_posi .mask_con .mask_color_div{width: 100%;margin-bottom: 16px;line-height: 1.5em;font-size: 16px;color: #666;}
.mask_wrap .mask_posi .mask_con .mask_color_div b{color:#00a8b3;line-height: 1.5em;font-size: 16px;font-weight: normal;}

.mask_wrap .mask_posi .mask_con .mask_flex{width: 100%;margin-bottom: 16px;}
.mask_wrap .mask_posi .mask_con .mask_flex .mask_flex_svg{width: 80px;height: 80px;float: left;padding: 16px;box-sizing: border-box;margin-right: 12px;border-radius: 50%;}
.mask_wrap .mask_posi .mask_con .mask_flex .mask_flex_svg svg{display: block;width: 100%;height: 100%;}
.mask_wrap .mask_posi .mask_con .mask_flex .mask_flex_text{max-width: 727px;float: left;display: table;min-height: 80px;}
.mask_wrap .mask_posi .mask_con .mask_flex .mask_flex_text .mask_flex_table{width: 100%;display: table-cell;vertical-align:middle;}
.mask_wrap .mask_posi .mask_con .mask_flex .mask_flex_text h5{font-size: 18px;color: #00a8b3;line-height: 1em;font-weight: normal;margin-bottom: 8px;}
.mask_wrap .mask_posi .mask_con .mask_flex .mask_flex_text p{font-size: 14px;color: #000;line-height: 1.5em;}

.mask_wrap .mask_posi .mask_con .mask_flex_color_g .mask_flex_svg{background: #ebf7f7;}
.mask_wrap .mask_posi .mask_con .mask_flex_color_y .mask_flex_svg{background: #fff6eb;}
.mask_wrap .mask_posi .mask_con .mask_flex_color_b .mask_flex_svg{background: #dcecff;}
.mask_wrap .mask_posi .mask_con .mask_flex_color_g .mask_flex_text h5{color: #00919a;}
.mask_wrap .mask_posi .mask_con .mask_flex_color_y .mask_flex_text h5{color: #dd7b00;}
.mask_wrap .mask_posi .mask_con .mask_flex_color_b .mask_flex_text h5{color: #4f8ae4;}

.mask_wrap .mask_posi .mask_con .mask_flex_new{width: 100%;}
.mask_wrap .mask_posi .mask_con .mask_flex_new .mask_flex_div{width: 48%;float: left;}
.mask_wrap .mask_posi .mask_con .mask_flex_new .mask_flex_div img{display: block;width: 100%;margin: 0px;}
.mask_wrap .mask_posi .mask_con .mask_flex_new .mask_flex_div p{font-size: 14px;color: #00a8b3;width: 100%;text-align: center;margin-top: 12px;}
.mask_wrap .mask_posi .mask_con .mask_flex_new .mask_flex_div:first-child{margin-right: 4%;}

.mask_wrap .mask_posi .mask_con .float_div{margin-left: 2%;}
.mask_wrap .mask_posi .mask_con .float_div .float_con{width: 32%;float: left;}
.mask_wrap .mask_posi .mask_con .float_div .float_con .float_con_title{padding: 12px 8px;box-sizing: border-box;width: 100%;font-size: 15px;color: #fff;text-align: center;}
.mask_wrap .mask_posi .mask_con .float_div .float_con p{font-size: 14px;color: #666;padding: 8px 16px;box-sizing: border-box;width: 100%;line-height: 1.5em;border-right: 1px dashed;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(1){margin-top: 88px;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(1) .float_con_title{background: #4fc7c8;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(1) p{border-color: #4fc7c8;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(2){margin-top: 44px;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(2) .float_con_title{background: #ea5d73;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(2) p{border-color: #ea5d73;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(3) .float_con_title{background: #0094d0;}
.mask_wrap .mask_posi .mask_con .float_div .float_con:nth-of-type(3) p{border-color: #0094d0;}

.mask_wrap .mask_posi .mask_close{width: 32px;height: 32px;box-sizing: border-box;border-radius: 50%;position: absolute;right: -42px;top: -32px;cursor: pointer;border: 1px solid #fff;transform: rotate(45deg);}
.mask_wrap .mask_posi .mask_close::after{content: "";display: block;width: 60%;height: 1px;border-radius: 1px;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.mask_wrap .mask_posi .mask_close::before{content: "";display: block;width: 1px;height: 60%;border-radius: 1px;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

.mask_wrap .mask_posi .mask_con .mask_text_big{width: 100%;padding: 16px;box-sizing: border-box;border: 1px solid #00a8b3;border-radius: 4px;margin-top: 64px;}
/* .mask_wrap .mask_posi .mask_con .mask_text_big .mask_text_img{width: 300px;height: 200px;padding: 4px;box-sizing: border-box;background: #f3fbfb;border-radius: 4px;} */
.mask_wrap .mask_posi .mask_con .mask_text_big .mask_text_img img{border-radius: 4px;display: block;margin: auto;width: 402px;}
.mask_wrap .mask_posi .mask_con .mask_text_big .color_text{margin-bottom: 8px !important;}
.mask_wrap .mask_posi .mask_con .mask_text_big .mask_title_div{width: 100%;margin-bottom: 16px;}
.mask_wrap .mask_posi .mask_con .mask_text_big .mask_title_div span{display: block;font-size: 20px;line-height: 1em;padding: 18px 0px;width: 60%;text-align: center;border-radius: 8px;color: #fff;background: #00a8b3;margin: -46px auto 0px;}

.mask_wrap .mask_posi .mask_con .color_one{border-color: #ee813f !important;}
.mask_wrap .mask_posi .mask_con .color_one .mask_title_div span{background: #ee813f !important;}
.mask_wrap .mask_posi .mask_con .color_one .color_text{color: #ee813f !important;}

.mask_wrap .mask_posi .mask_con .color_two{border-color: #1b98e7 !important;}
.mask_wrap .mask_posi .mask_con .color_two .mask_title_div span{background: #1b98e7 !important;}
.mask_wrap .mask_posi .mask_con .color_two .color_text{color: #1b98e7 !important;}

.mask_wrap .mask_posi .mask_con .color_three{border-color: #e06b7d !important;}
.mask_wrap .mask_posi .mask_con .color_three .mask_title_div span{background: #e06b7d !important;}
.mask_wrap .mask_posi .mask_con .color_three .color_text{color: #e06b7d !important;}
.mask_wrap .mask_posi .mask_con .color_three .mask_text .mask_a{color: #e06b7d;text-decoration: underline;}

.mask_flex_btn{width: 100%;margin: 32px 0px;}
.mask_flex_btn .mask_flex_btn_con{width: 32.33%;float: left;margin-right: 1.5%;font-size: 20px;color: #fff;padding: 16px 0px;text-align: center;border-radius: 6px;margin-bottom: 1.5%;height: 60px;line-height: 60px;}
.mask_flex_btn .mask_flex_btn_con:nth-of-type(3n){margin-right: 0;}
.mask_flex_btn .mask_flex_btn_con:nth-of-type(1){background-color: rgb(255, 229, 182,0.5);color: #e09200;} 
.mask_flex_btn .mask_flex_btn_con:nth-of-type(2){background-color: rgb(163, 224, 228,0.5);color: #00939d;}
.mask_flex_btn .mask_flex_btn_con:nth-of-type(3){background-color: rgb(173, 218, 246,0.5);color: #0085d9;}
.mask_flex_btn .mask_flex_btn_con:nth-of-type(4){background-color: rgb(223, 203, 241,0.5);color: #9139e1;margin-bottom: 0;}
.mask_flex_btn .mask_flex_btn_con:nth-of-type(5){background-color: rgb(244, 202, 208,0.5);color: #ef5970;margin-bottom: 0;}
.mask_flex_btn .mask_flex_btn_con:nth-of-type(6){background-color: rgb(249, 210, 186,0.5);color: #df641a;margin-bottom: 0;}


/* 服务案例遮罩层 */
.img_mask{width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999;background: rgba(0, 0, 0, 0.5);display: none;opacity: 0;}
.img_mask .img_mask_con{width: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 4px;}

.img_mask .img_mask_con .case_mask_con{width: 100%;height: 100%;padding: 4px;box-sizing: border-box;display: flex;align-items: center;}
.img_mask .img_mask_con .case_mask_con img{display: block;width: 100%;max-height: 100%;border-radius: 4px;}

.img_mask .img_mask_con .img_mask_close{width: 32px;height: 32px;box-sizing: border-box;border-radius: 50%;position: absolute;right: -42px;top: -32px;cursor: pointer;border: 1px solid #fff;transform: rotate(45deg);}
.img_mask .img_mask_con .img_mask_close::after{content: "";display: block;width: 60%;height: 1px;border-radius: 1px;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.img_mask .img_mask_con .img_mask_close::before{content: "";display: block;width: 1px;height: 60%;border-radius: 1px;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

/* 服务形式-动画 */
/* 遮罩层出现效果 */
@keyframes run_opa{
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes run_opa_hide{
  0%{opacity: 1;}
  100%{opacity: 0;}
}
.mask_show{display: block;animation: run_opa 0.5s linear forwards ;z-index: 9999999;}
.mask_hide{animation: run_opa_hide 0.5s linear forwards ;}

.mask_aa {
  color: #00a8b3;
  text-decoration:underline;
  font-size: 18px;
  line-height: 1.8em;
}
.mask_aa:hover {
  color: #fff;
  background-color: #00a8b3;
  margin: 20px;
}