/*
 * @Autor: chenqinglong
 * @Date: 2021-10-25 10:55:11
 * @LastEditors: chenqinglong
 * @LastEditTime: 2025-04-08 17:52:00
 * @Introduce: 
 * @FilePath: \WWW\135new\webroot\css\categories\index-style.css
 */

/* 隐藏返回顶部 */
#toTop {display: none !important;}

/* 导航 */
#top{position: fixed;left: 0;right: 0;z-index: 10;}

/* 第一屏 */
.One_screen {background: url('https://bcn.135editor.com/files/202503/images/home/bg_1.png') no-repeat;background-size: 100% 100%;height: 100%;width: 100%;padding-bottom: 400px;position: relative;}
.One_content{margin: 170px 0;position: relative;}
.One_content_title{font-weight: bold;font-size: 59px;color: #0B0B0B;line-height: initial;}
.One_content_title span{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.One_content_tag{background: url('https://bcn.135editor.com/files/202503/images/home/homec.gif') no-repeat;background-position: 100% 100%;padding: 13px 13px 13px 5px;background-size: 40%;}
.One_content_btn{margin: 70px 0 0;}
.One_content_btn>div+div{margin: 0 0 0 35px;}
.One_content_btn a{position: relative;border-radius: 66px; width: 223px; height: 66px;font-size: 18px;color: #333;}
.One_content_btn a:before { content: ""; width: 100%; height: 100%; padding: 1px; position: absolute; border-radius: 66px; background: linear-gradient(90deg, #1245FE 0%, #00AEFF 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.One_content_btn .active{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff;}
.One_content_btn .active:before{content: none;}
.One_content_btn a:hover{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff;transform: scale(1.1)!important;}
.One_content_btn a:hover:before{content: none;}
.One_content .float_img_all{position: absolute;font-size: 20px;color: #274D83;}
.One_content .float_img_all img{margin: 0 0 5px;}
.One_content .float_img_1{top: -70px;left: -150px;animation: float 3s ease-in-out infinite!important;}
.One_content .float_img_2{top: -60px;right: -150px;animation: float 3s ease-in-out infinite 1s!important;}
.One_content .float_img_3{bottom: -60px;left: -250px;animation: float 3s ease-in-out infinite 1s!important;}
.One_content .float_img_4{bottom: -50px;right: -230px;animation: float 3s ease-in-out infinite!important;}
.One_content .float_img_all img:hover{transform: scale(1.1)!important;}
/* 定义上下浮动的动画 */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* 第二，三屏 背景 */
.Two_Three_screen{background: url('https://bcn.135editor.com/files/202503/images/home/bj_2.png') no-repeat;background-size: 100% 100%;position: relative;}
.Two_Three_screen .Two_screen{margin-top: -400px;}

/* 第二屏 视频 */
.Two_screen{}
.Dacheng_content_title{font-weight: bold;font-size: 40px;color: #222222;line-height: initial;margin: 0 0 40px;}
.Dacheng_content_tab a+a{margin-left: 20px;}
.Dacheng_content_tab a{min-width: 164px;height: 50px;border-radius: 25px;border: 1px solid #C9D5E9;font-size: 20px;color: #414141!important;padding: 0 26.5px;cursor: pointer;}
.Dacheng_content_tab .active{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff!important;}
.Dacheng_content_tab a:hover{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff!important;transform: translateY(-3px) scale(1.1)!important;transition: 0.3s!important;}
.Dacheng_content{margin: 37px auto 0;padding: 12px;background: #fff;border-radius: 10px;box-shadow: 0 0 5px 5px #F1F5FF;width: 1050px;}
.Dacheng_content_video{width: 100%;display: block;}
.Dacheng_content_btn{position: relative;border-radius: 66px; width: 223px; height: 57px;font-size: 18px;color: #333!important;margin: 49px auto 0;}
.Dacheng_content_btn:before{content: ""; width: 100%; height: 100%; padding: 1px; position: absolute; border-radius: 66px; background: linear-gradient(90deg, #1245FE 0%, #00AEFF 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.Dacheng_content_btn:hover{transform: scale(1.1)!important;background: linear-gradient(90deg, #1245FE 0%, #00AEFF 100%);color: #fff!important;}

/* 第三屏 模板 */
.Three_screen{}
.Three_content_title{font-weight: bold;font-size: 40px;color: #222222;line-height: initial;margin: 130px 0 47px;}
.Three_content_tab{height: 65px;background: #F1F5FF;border-radius: 32px;border: 1px solid #C9D5E9;padding: 0 7px;margin: 0 0 3px;}
.Three_content_tab a+a{margin-left: 7px;}
.Three_content_tab a{font-size: 20px;color: #232323!important;min-width: 150px;border-radius: 32px;height: 51px;cursor: pointer;}
.Three_content_tab a.active, .Three_content_tab a:hover{background: #fff;box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.05);color: #2465F8!important;font-weight: bold;}
.Three_content_list{width: 263px;background: #FFFFFF;border-radius: 15px;overflow: hidden;margin: 43px 0 0;box-shadow: 2px 2px 10px 3px #f3f6fa;cursor: pointer;transition: 0.3s!important;}
.Three_content_list:hover{transform: scale(1.1)!important;}
.Three_content_list img{width: 100%;}
.Three_content_list_text{font-size: 14px;color: #636363;padding: 10px 15px 0;margin: 0 0 10px;line-height: initial;border-top: 1px solid #e4e9f2;}
.Three_screen .more_template{position: relative;border-radius: 66px; width: 223px; height: 57px;font-size: 18px;color: #333;margin: 49px auto 105px;}
.Three_screen .more_template:before { content: ""; width: 100%; height: 100%; padding: 1px; position: absolute; border-radius: 66px; background: linear-gradient(90deg, #1245FE 0%, #00AEFF 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.Three_screen .more_template:hover{transform: scale(1.1)!important;background: linear-gradient(90deg, #1245FE 0%, #00AEFF 100%);color: #fff!important;}

/* 第四屏 运营 */
.Four_screen{background: url('https://bcn.135editor.com/files/202503/images/home/bj_3.png') no-repeat;background-size: 100% 100%;position: relative;}
.Four_screen .content_box{margin: 0 auto;max-width: 1200px;}
.Four_operation_title{font-weight: bold;font-size: 40px;color: #222222;line-height: initial;margin: 120px 0 40px;}
.Four_operation_content{}
.Four_operation_content .Four_list_all+.Four_list_all{margin-left: 20px;}
.Four_operation_content .Four_list_all>div+div{margin-top: 22px;}
.Four_operation_content .Four_list h3{margin: 0 0 20px;font-weight: bold;font-size: 30px;}
.Four_operation_content .Four_list span{font-size: 18px;color: #636363;line-height: 34px;}
.Four_operation_content .Four_list img{position: absolute;right: 0;bottom: 0;}
.Four_operation_content .Four_list:hover{transform: scale(1.1)!important;}
.Four_operation_content .Four_list{width: 384px;background-color: #fff;border-radius: 20px;border: 1px solid #C9D5E9;padding: 50px 30px;position: relative;overflow: hidden;box-shadow: inset 0px 3px 0px 0px #FFFFFF;transition: 0.3s!important;}
.Four_understand{position: relative;border-radius: 66px; width: 223px; height: 57px;font-size: 18px;color: #333!important;margin: 50px auto 84px;}
.Four_understand:before { content: ""; width: 100%; height: 100%; padding: 1px; position: absolute; border-radius: 66px; background: linear-gradient(90deg, #1245FE 0%, #00AEFF 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.Four_understand:hover{transform: scale(1.1)!important;background: linear-gradient(90deg, #1245FE 0%, #00AEFF 100%);color: #fff!important;}

/* 第五 业务 */
.Five_screen{background: url('https://bcn.135editor.com/files/202503/images/home/bj_4.png') no-repeat;background-size: 100% 100%; position: relative;}
.Five_screen .content_box{margin: 0 auto;max-width: 1200px;}
.Four_more_title{font-weight: bold;font-size: 40px;color: #222222;line-height: initial;margin: 120px 0 50px;}
.Four_more_content{}
.Four_more_list{width: 222px;height: 272px;box-shadow: 0px 3px 10px -5px #cadbf2, inset 0px 3px 0px 0px #FFFFFF;border-radius: 20px;padding: 44px 20px 34px;transition: 0.5s !important;cursor: pointer;border: 1px solid transparent;  }
.Four_more_list span{font-size: 16px;color: #636363;line-height: 30px;}
.Four_more_btn{width: 131px;height: 40px;background: #F5F8FD;border-radius: 20px;font-size: 18px;color: #3465D3;}
.Four_more_list.active{border: 1px solid #98CBFB;}
.Four_more_list.active .Four_more_btn{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff;}
.Four_more_list:hover{border: 1px solid #98CBFB;transform: translateY(-20px) !important;transition: 0.5s !important;}
.Four_more_list:hover .Four_more_btn{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff;transform: scale(1.1)!important;}

/* 第六屏 他们都在用 */
#seamless_swiper1,#seamless_swiper2,#seamless_swiper3{display: none;height: 113px!important;}
.Five_screen .famous_organization{padding: 110px 0 115px;}
.Five_screen .famous_organization .swiper_box{transition: all 0.4s;}
.Five_screen .famous_organization .title_box{margin: 0 0 35px;}
.Five_screen .famous_organization .title_box h2{font-size: 40px;font-weight: bold;color: #222222;line-height: initial;margin: 0;}
.Five_screen .famous_organization .title_box h3{font-size: 18px;color: #797979;margin: 10px 0 0;}
.Five_screen .famous_organization .item+.item{margin-left: 20px;}
.Five_screen .famous_organization .item{box-shadow: 0px 3px 10px -5px #cadbf2;border-radius: 15px;}

/* 第七屏 */
.seven_screen{height: 394px;background: url('https://bcn.135editor.com/files/202503/images/home/bj_5.png') no-repeat;background-size: cover;background-position: 100% 100%;letter-spacing: 0.1em;}
.seven_content_title{font-weight: bold;font-size: 50px;color: #222222;margin: 0 0 50px;line-height: initial;}
.seven_content_title span{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.seven_content_btn{border-radius: 28px; width: 222px;height: 57px;font-weight: bold;font-size: 18px;background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff;}
.seven_content_btn:hover{background: linear-gradient(90deg, #00AEFF 0%, #1245FE 100%);color: #fff;transform: scale(1.1)!important;}

/* 合作伙伴 */
.eight_screen{min-height: 250px;padding: 70px 0;}
.eight_screen .bottomBar_title{display: flex;border-bottom: 1px solid #CCCCCC;}
.eight_screen .bottomBar_name{font-weight: bold;font-size: 18px;cursor: pointer;line-height: 30px;padding: 0 2px 10px;}
.eight_screen .bottomBar_name+.bottomBar_name{margin: 0 0 0 20px;}
.eight_screen .bottomBar_sign{border-bottom: 2px solid #FD3B51;}
.eight_screen2 .SmallTitle{display: flex;flex-wrap: wrap;margin: 15px 0 0;}
.eight_screen .SmallTitle{display: flex;flex-wrap: wrap;margin: 15px 0 0;}
.eight_screen .SmallTitle div{font-size: 16px;line-height: 30px; margin: 0 20px 0 0;}

/* 移动端开始使用 */
.fix-btn {position: fixed;left: 0;bottom: 0;z-index: 9;width: 100%;display: none;padding: 8px 16px;text-align: center;background-color: #fff;box-shadow: 0px -5px 12px #ddd;}
.fix-btn>a {display: block;width: 100%;text-decoration: none;border-radius: 10px;padding: 5px;color: #fff;font-size: 18px;letter-spacing: 4px;
    background: -moz-linear-gradient(left, #fe5365 0%, #fc682f 100%);
    background: -webkit-gradient(linear, top left, top right, color-stop(0%, #fe5365), color-stop(100%, #fc682f));
    background: -webkit-linear-gradient(left, #fe5365 0%, #fc682f 100%);
    background: -o-linear-gradient(left, #fe5365 0%, #fc682f 100%);
    background: -ms-linear-gradient(left, #fe5365 0%, #fc682f 100%);
    background: linear-gradient(to right, #fe5365 0%, #fc682f 100%);
}

/* 小于1200 */
@media only screen and (max-width: 1200px) {

    body .content_box{width: 96%;}

    .Dacheng_content_tab a{font-size: 18px;}
    .Five_screen .famous_organization{padding: 50px 0;}
}

/* 小于975 */
@media only screen and (max-width: 975px) {
    body .content_box{width: 96%;}

    .One_content{margin: 100px 0;}
    .One_content_title{font-size: 3em;}
    .One_content_btn a+a{margin: 0 0 0 25px;}
    .One_content .float_img_all{font-size: 14px;}
    .One_content .float_img_all img{width: 50%;}
    .One_content_btn a{width: 150px;height: 40px;font-size: 14px;}
    .One_content .float_img_1{top: -50px;left: 0px;}
    .One_content .float_img_2{top: -50px;right: 0px;}
    .One_content .float_img_3{bottom: 50px;left: -100px;}
    .One_content .float_img_4{bottom: 50px;right: -100px;}

    .Dacheng_content_title{font-size: 25px;margin: 0 0 15px;}
    .Dacheng_content_tab a{font-size: 14px;min-width: 100px;height: 35px;padding: 0 10px;}
    .Dacheng_content_tab a+a{margin-left: 10px;}
    .Dacheng_content_btn{width: 150px;height: 40px;font-size: 14px;}
    .Dacheng_content{width: 100%;}

    .Three_content_title{font-size: 25px;margin: 50px 0 15px;}
    .Three_content_tab{height: 50px;}
    .Three_content_tab a{font-size: 14px;min-width: 100px;height: 35px;}
    .Three_content>div{width: 24%;margin: 15px 0 0;}
    .Three_content_list{width: 100%;margin: 0;}
    .Three_content_list_text{font-size: 14px;}
    .Three_screen .more_template{width: 150px;height: 40px;font-size: 14px;margin: 25px auto 50px;}

    .Four_operation_title{font-size: 25px;margin: 50px 0 15px;}
    .Four_operation_content .Four_list{width: 100%;margin: 15px 0 0;padding: 20px 15px;}
    .Four_operation_content .Four_list_all+.Four_list_all{margin-left: 10px;}
    .Four_operation_content .Four_list h3{font-size: 20px!important;}
    .Four_operation_content .Four_list span{font-size: 14px;line-height: 25px;}
    .Four_operation_content .Four_list img{width: 50%;}

    .Four_understand{width: 150px;height: 40px;font-size: 14px;margin: 25px auto 50px;}

    .Five_screen .famous_organization .title_box h2{font-size: 25px;}
    .Five_screen .famous_organization .title_box h3{font-size: 14px;}
    .Five_screen .famous_organization{padding: 50px 0;}

    .Four_more_title{font-size: 25px;margin: 50px 0 15px;}
    .Four_more_content>div{width: 19%;margin: 15px 0 0;}
    .Four_more_list{width: 100%;margin: 0;padding: 20px 15px;}

    .seven_screen{height: 250px;}
    .seven_content_title{font-size: 30px;margin: 0 0 20px;}
    .seven_content_btn{width: 150px;height: 40px;font-size: 14px;}
}

/* 小于750 */
@media only screen and (max-width: 750px) {
    body .content_box{width: 90%;}
    body .main-wrapper .hero-slider-1{padding-top: 0 !important;}
    
    /* 第一屏 */
    .One_screen{padding-bottom: 0;}
    .One_content_tag {padding: 5px 5px 5px 0px;background-size: 40%;}
    .One_content {margin: 70px 0 50px;}
    .One_content_title{font-size: 1.2em ;}
    .One_content_btn>div+div{margin: 0 0 0 15px;}
    .One_content_btn a{width: 100px;height: 30px;font-size: 12px;}
    .One_content_btn a>span{display: none;}
    .One_content_btn {margin: 30px 0 0;}
    .One_content .float_img_all {font-size: 10px;}
    .One_content .float_img_all img{width: 30px;}
    .One_content .float_img_1 {top: -30px;left: 50px;}
    .One_content .float_img_2 {top: -30px;right: 50px;}
    .One_content .float_img_3 {bottom: 30px;left: 0;}
    .One_content .float_img_4 {bottom: 30px;right: 0;}

    /* 第二屏 */
    .Two_Three_screen .Two_screen{margin-top: 0;}
    .Dacheng_content_title{font-size: 20px;margin: 0 0 10px;}
    .Dacheng_content_tab{flex-wrap: wrap; justify-content: space-between;}
    .Dacheng_content_tab a+a {margin-left: 0px;}
    .Dacheng_content_tab a{font-size: 12px;height: 30px;margin-top: 10px;}
    .Dacheng_content_tab a:hover{transform: translateY(0px) scale(1)!important;}
    .Dacheng_content {margin: 25px 0 0;width: 100%;}
    .Dacheng_content_btn{width: 100px;height: 30px;font-size: 12px;margin: 30px auto 0;}

    /* 第三屏 */
    .Three_content_title{font-size: 20px;margin: 50px 0 15px;}
    .Three_content_tab{height: 35px;}
    .Three_content_tab a+a {margin-left: 0px;}
    .Three_content_tab a{font-size: 12px;height: 30px;min-width: initial;}
    .Three_content>div{width: 48%;margin: 15px 0 0;}
    .Three_content_list{width: 100%;margin: 0;}
    .Three_screen .more_template{width: 100px;height: 30px;font-size: 12px;margin: 25px auto 50px;}

    /* 第四屏 */
    .Four_operation_title{font-size: 20px;margin: 50px 0 15px;text-align: center;}
    .Four_understand{width: 100px;height: 30px;font-size: 12px;margin: 25px auto 50px;}
    .Four_operation_content{flex-direction: column; align-items: center;}
    .Four_operation_content .Four_list{width: 100%;}
    .Four_more_content>div{width: 100%;margin: 0;}
    .Four_operation_content .Four_list_all+.Four_list_all{margin-left: 0;margin-top: 20px;}
    .Four_operation_content .Four_list h3{font-size: 16px!important;margin: 0 0 10px;}
    .Four_operation_content .Four_list span{font-size: 12px;}

    /* 第五屏 */
    .Five_screen .famous_organization{padding: 50px 0;}
    .Five_screen .famous_organization .title_box h2{font-size: 20px;}
    .Five_screen .famous_organization .title_box h3{font-size: 12px;}
    #seamless_swiper1, #seamless_swiper2, #seamless_swiper3{height: 60px !important;}
    .Five_screen .Rotation_box{display: flex;align-items: center;}
    .Four_more_title{font-size: 20px;margin: 50px 0 15px;}
    .Four_more_list{width: 100%;margin: 15px 0 0;padding: 20px 15px;}
    .Four_more_content{flex-direction: column;}
    
    /* 第七屏 */
    .seven_screen{height: 200px;background-position: unset;display: none;}
    .seven_screen h4{font-size: 20px;margin: 0;}
    .seven_screen a{width: 100%;font-size: 18px;height: 45px;line-height: 45px;padding: 0 15px;margin: 15px 0 0;}

    /* 开始使用 */
    .fix-btn { display: block; }

    /* 合作伙伴 */
    .eight_screen{min-height: auto;padding: 30px 0;}
    .eight_screen .bottomBar_name{font-size: 12px;}
    .eight_screen .SmallTitle{ margin: 15px 0 0; }
    .eight_screen .SmallTitle div{margin: 0 15px 0 0;font-size: 12px;line-height: 25px;}
    .eight_screen .bottomBar_name+.bottomBar_name{margin: 0 0 0 10px;}

    .FirstDisplay {padding-bottom: 50px;}
}

/* 边框围绕效果 */
.surround:before,.surround:after{content:"";display:block;width: 0;height:0;border:1px solid transparent;box-sizing: border-box;position: absolute;border-radius: 2px;}

.surround:before{top:0;left:0;transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;}
.surround:after{right:0;bottom:0;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in ;}
.surround:hover{color: #FF6644;}
.surround:hover:before{width:100%;height:100%;transition:width 0.2s ease-in ,height 0.2s ease-in 0.2s;border-top-color:#FF6644;border-right-color:#FF6644;}
.surround:hover:after{width:100%;height:100%;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.4s,height 0.3s ease-in 0.6s;border-bottom-color:#FF6644;border-left-color:#FF6644;}


/* 四周扩散效果 */
.spread{position:relative;-webkit-transition: background-color .3s, color .3s;transition: background-color .3s, color .3s;}
.spread:before {content: '';position: absolute;top: -15px;left: -15px;bottom: -15px;right: -15px;background: inherit;z-index: -1;opacity: 0.5;-webkit-transform: scale3d(.6, .4, 1);transform: scale3d(.6, .4, 1); display:none\9;}
.spread:hover {background:#fa4d26; border-color:#fa4d26;-webkit-transition: background-color .1s .3s, color .1s .3s;transition: background-color .1s .3s, color .1s .3s;-webkit-animation: anim-moema-1 .3s forwards;animation: anim-moema-1 .3s forwards}
.spread:hover:before {-webkit-animation: anim-moema-2 .3s .3s forwards;animation: anim-moema-2 .3s .3s forwards;}
@-webkit-keyframes anim-moema-1 {
    60% {-webkit-transform:scale3d(.8, .8, 1);transform:scale3d(.8, .8, 1)}
    85% {-webkit-transform:scale3d(1.1, 1.1, 1);transform:scale3d(1.1, 1.1, 1)}
    100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}
}
@keyframes anim-moema-1 {
    60% {-webkit-transform:scale3d(.8, .8, 1);transform:scale3d(.8, .8, 1)}
    85% {-webkit-transform:scale3d(1.1, 1.1, 1);transform:scale3d(1.1, 1.1, 1)}
    100% {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}
}
@-webkit-keyframes anim-moema-2 {
    to {opacity:0;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}
}
@keyframes anim-moema-2 {
    to {opacity:0;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}
}