/*
 * @Autor: chenqinglong
 * @Date: 2021-10-25 10:55:11
 * @LastEditors: 蜻蜓队长 1770815539@163.com
 * @LastEditTime: 2022-11-03 11:03:12
 * @Introduce: 
 * @FilePath: \135editor\webroot\css\categories\index-style.css
 */

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

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

/* 第一屏 */
.One_screen {position: relative;}
.One_screen .One_content{text-align: center;position: absolute;bottom: calc(50vh - 270px);left: 0;right: 0;}
.One_content img{width: 96px;}
.One_content h4{margin: 67px 0 37px;font-size: 30px;font-weight: bold;color: #FFFFFF;line-height: 36px;}
.One_content p{font-size: 16px;font-weight: 400;color: #FFFFFF;line-height: 36px;margin: 0;}
.One_btn{margin: 67px 0 0;display: flex;justify-content: center;}
.One_btn a{font-size: 16px;font-weight: 400;color: #FFFFFF;line-height: 48px;max-width: 150px;width: 100%;height: 48px;background: rgba(98,102,119,0.7);border-radius: 24px;margin: 0 30px;padding: 0;}
.One_btn .guide{background-image: linear-gradient(90deg, 
    #fc9632 0%, 
    #fd6842 53%, 
    #fd3a51 100%), 
linear-gradient(
    #fcf6e6, 
    #fcf6e6);}
/* .One_btn .guide:hover{background: linear-gradient(90deg, #ffa54b, #ff586c);} */
.One_btn .button:hover{background: rgba(98,102,119,1);}
/* 无缝隙滚动 */
.One_mask{background: #000; opacity: 0.75;position: absolute;top: 0;}
#seamless_slide,.One_mask{display: flex; justify-content: space-between;overflow: hidden;height: 120vh;width: 100%;background: #000;}
#seamless_slide .slide_main{flex: 1;height: 100%;position: relative;}
#seamless_slide .slide_main+.slide_main{margin: 0 0 0 10px;}
#seamless_slide .slide_list{width: 100%;height: 100%;position: absolute;} /* -webkit-transition: 0.1s;transition: 0.1s; */
#seamless_slide .slide_list>div{height: auto;max-height: 350px;overflow: hidden;background: #333;width: 100%;}
#seamless_slide .slide_list>div+div{margin: 10px 0 0;}
#seamless_slide .slide_list>div img{height: auto;display: block;width: 100%;}
/* 第二屏 教程 */
.Two_screen{padding: 60px 0 54px;background: #f6f6f6;}
/* .Two_screen .section-title h3{color: #000;}
.Two_screen .section-title h4{color: #333;} */
.Two_screen .tour-video{border-radius: 0;}
.Two_screen .tab-content{border: 21px solid #fff;border-radius: 10px 10px 0 0;padding: 20px 20px 0 20px;background: #F6F6F6;max-width: 1000px;margin: 20px auto 0;}
.Two_screen .desk{max-width: 1200px;margin: -20px auto;height: 50px;background: #fff;width: 100%;border-radius: 0 0 50px 50px;}
.Two_screen .tab-content-button{margin: 60px auto 0;}
.Two_screen .page-back-btn{padding: 9px 58px;}

/* 第三屏 模板欣赏 */
.Three_screen{padding: 66px 0 14px;}
.Three_screen .section-button{margin: 50px auto;text-align: center;}
.Three_screen .page-back-btn{padding: 9px 58px;}
.Three_screen .single-model .model-image a{display: block;}
/* 轮播左右箭头 */
.Three_screen .owl-theme .owl-controls .owl-nav div{position:absolute;top:50%;width:50px;height:50px;margin:0;padding:0;border-radius:50%;background: #fff;border: 1px solid #ddd;color: #ddd;font:35px/50px "宋体";}
.Three_screen .owl-theme .owl-controls .owl-nav .owl-prev{left:-70px;}
.Three_screen .owl-theme .owl-controls .owl-nav .owl-next{right:-70px;}
.Three_screen .owl-theme .owl-controls .owl-nav .owl-prev:before{content:"<";margin: 0 5px 0 0;}
.Three_screen .owl-theme .owl-controls .owl-nav .owl-next:before{content:">";margin: 0 0 0 5px;}

/* 第四屏 产品 */
.Four_screen{padding: 66px 0 58px;
    background: url('https://bdn.135editor.com/files/202110/images/product_bj.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.Four_screen .section-title h3{color: #fff;}
.Four_screen .section-title h4{color: #ddd;}
.Four_screen .section-title{margin-bottom: 80px;}
.Four_screen .single-case-item{background: #fff;}
.Four_screen .single-case-image{padding: 20px 10px 0;}
.Four_screen .case-content h3{font-size: 24px;}
.Four_screen .case-content p{font-size: 16px;}
.Four_screen .unique{display: flex;align-items: center;font-size: 16px;font-weight: bold;}
.Four_screen .unique a{background: linear-gradient(to right, #fe5365 0%,#fc682f 100%);padding: 2px 20px;border-radius: 50px;font-size: 14px;color: #fff;font-weight: 400;}
.Four_screen .unique a+a{margin: 0 0 0 15px;}

/* 第五屏 业务 */
.Five_screen{background: #F3F3F3;padding: 76px 0 94px;}
.Five_screen .Five_content{justify-content: space-between;margin-top: 85px;}
.Five_screen .Five_content>div{background: #fff;border-radius: 10px;width: 32%;position: relative;}
.Five_screen .service-icon{position: absolute;top: -40px;box-shadow: 0px 2px 35px 0px rgba(202, 202, 202, 0.24);border-radius: 50%;background: #fff;width: 112px;height: 112px;left: calc(50% - 56px);display: flex;align-items: center;justify-content: center;}
.Five_screen .serviace-info{padding: 80px 25px 67px;}
.Five_screen .serviace-info h3{margin: 0 0 20px;font-size: 22px;}
.Five_screen .serviace-info p{padding: 0;margin: 5px 0 0;font-size: 16px;}

/* 第六屏 合作方 */
.Six_screen{padding: 87px 0 50px;}

/* 第七屏 邀请好友 */
.seven_screen{height: 400px;display: flex;align-items: center;justify-content:center;
    background: url('https://bdn.135editor.com/files/202110/images/friend_bj.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    letter-spacing: 0.1em;
}
.seven_content{text-align: center;}
.seven_screen h4{font-size: 26px;font-weight: 400;color: #FFFFFF;line-height: 36px;}
.seven_screen a{
    width: 255px;
    height: 60px;
    background: linear-gradient(90deg, #FC9632, #FD3B51);
    box-shadow: 0px 4px 6px 0px rgb(253 59 81 / 40%);
    border-radius: 33px;
    font-size: 22px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 60px;
    text-shadow: 0px 3px 0px rgb(253 59 81 / 40%);
    margin: 40px 0 0;
}

/* 合作伙伴 */
.eight_screen{min-height: 250px;padding: 50px 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) {

    /* 第二屏 */
    .Two_screen .desk{display: none;}
    .Two_screen .tab-content{border-radius: 10px;padding: 10px;border: 10px solid #fff;margin: 10px;}
    .Two_screen .tab-content-button{margin: 30px auto 0;}

    /* 第四屏 */
    .Four_screen .unique{font-size: 14px;}
    .Four_screen .unique a{padding: 2px 15px;border-radius: 50px;font-size: 14px;}
}

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

    /* 第四屏 */
    .Four_screen .unique{justify-content: space-between;}
    .Four_screen .unique span{display: none;}
    .Four_screen .unique a{padding: 2px 10px;border-radius: 50px;font-size: 12px;}
}

/* 小于750 */
@media only screen and (max-width: 750px) {
    /* 标题 */
    body .mubanRukou .title_box h3,
    body .hot_calendar .text_box h3,
    body .operation_tool_box .content_box .title_box h3,
    body .livable_products .content_box .title_box h3,
    body .famous_organization .content_box .title_box h3{
      font-size: 20px;
    }
    /* 描述 */
    body .mubanRukou .title_box h4,
    body .hot_calendar .text_box div,
    body .livable_products .content_box .title_box h4,
    body .famous_organization .content_box .title_box h4,
    body .operation_tool_box .content_box .title_box h4{
      font-size: 17px;
      padding-top: 0;
    }
    /* 标题盒子 */
    body .hot_calendar .text_box,
    body .operation_tool_box .content_box .title_box,
    body .livable_products .content_box .title_box,
    body .famous_organization .content_box .title_box{
      padding-bottom: 0;
      margin-bottom: 10px;
    }
    body .livable_products .content_box{
      transform: scale(1);
    }
    body .operation_tool_box .content_box > div{
        transform: scale(1);
    }
    body .one_banner .content_box ul,
    body .one_banner .content_box .button_box{
        transform: scale(1);
    }
    body .famous_organization .swiper_box{
        transform: scale(0.9);
    }
    body .content_box{
      width: 90%;
    }
    body .main-wrapper .hero-slider-1{
      padding-top: 0 !important;
    }
    /* 第一屏 */
    body .one_banner .swiper{
      overflow-x: hidden ;
    }
    body .one_banner .content_box .button_box h1{
      font-size: 1.2em ;
      margin-bottom: 22px;
    }
    body .one_banner .content_box .button_box .spread{
      width: 120px;
      height: 34px;
      line-height: 34px;
      margin-top: 12px;
      font-size: 16px;
    }
    body .one_banner .content_box ul li .right .bottom{
      padding: 0 16px;
      line-height: inherit;
      width: inherit;
      height: inherit;
    }
    body .one_banner .content_box ul{
      display: flex;
      flex-direction: column;
      position: initial;
    }
    body .one_banner .content_box ul li{
      width: 100%;
      height: auto;
      padding: 16px 10px;
      margin-top: 20px;
      margin-right: 0;
    }
    body .one_banner .content_box ul li:hover{
      margin-top: 20px;
    }
    body .one_banner .content_box ul li .right .txt{
      font-size: 1.2em;
    }
    body .one_banner .swiper-button-left,
    body .one_banner .swiper-button-right{
      display: none ;
    }
    body .one_banner .content_box .button_box{
      position: initial ;
    }
    body .one_banner .mySwiper img{
      height: 180px;
    }
    
    /* 热点日历 */
    .hot_calendar{
      /* display: none; */
    }
    body .hot_calendar,
    body .mubanRukou{
      padding-top: 30px !important;
    }

    /* 运营工具 */
    .operation_tool_box > img{
      display: none;
    }
    body .operation_tool_box .content_box{
      top: 0 !important;
    }
    body .operation_tool_box .content_box,
    body .operation_tool_box .content_box > div{
      position: inherit;
      top: 0;
    }
    body .operation_tool_box .list > div{
      flex-wrap: wrap;
      align-content: center;
      flex-direction: row;
      justify-content: center;
    }
    body .operation_tool_box .list > div > div{
      padding: 2px 16px;
      background-color: #eef4ff;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 12px;
    }
    body .operation_tool_box .content_box .list_box > div{
      margin-bottom: 20px;
    }
    body .operation_tool_box .title{
      margin-bottom: 20px;
    }
    body .operation_tool_box .title span{
      margin-left: 6px;
      font-size: 14px;
    }
    body .operation_tool_box .title img{
      transform: scale(0.8);
    }

    /* 更多好用产品 */
    .livable_products > img{
      display: none;
    }
    body .livable_products .function_box{
      padding: 0;
      /* border-right: 1px solid #f00; */
      border-radius: 0;
      margin-right: 0;
    }
    body .livable_products .content_box,
    body .livable_products .content_box > div{
      position: inherit;
    }
    body .livable_products .content_box > div{
      top: 0 !important;
    }
    body .livable_products .function_box .list .logo{
      height: 30px;
      margin-bottom: 20px;
      padding-bottom: 0;
    }
    body .livable_products .function_box .list .logo img{
      transform: scale(0.8);
    }
    body .livable_products .function_box .list .logo span{
      font-size: 14px;
    }
    body .livable_products .function_box .list .skip{
      width: 120px;
      height: inherit;
      line-height: inherit;
      font-size: 12px;
    }
    body .livable_products .content_box .function_max_box{
      justify-content: space-evenly;
      margin-top: 0 !important;
      transform: scale(1) !important;
    }
    body .livable_products .function_box:hover{
      box-shadow: inherit;
    }

    /* 他们都在用 */
    .famous_organization{
      /* display: none; */
      padding-bottom: 0 !important;
      margin-top: 0 !important;
    }
    .famous_organization .swiper_box{
      overflow: hidden;
    }
    body #seamless_swiper1,
    body #seamless_swiper2,
    body #seamless_swiper3{
      margin-bottom: 0 !important;
    }
    .famous_organization .content_box > div{
      position: inherit !important;
      top: 0 !important;
    }

    /* 第六屏 */
    .Six_screen{padding: 50px 0 35px;}
    .Six_screen .container{padding: 0;}
    
    /* 第七屏 */
    .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)}
}