<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Cache-Control" content="no-transform"/>
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes"/>
  <title>恺睿科技 - 首页</title>
  <link rel="icon" href="./images/index/logo.png" type="image/x-icon"/>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/jSlider.min.css">
  <script src="./js/jquery.js"></script>
  <script src="./js/home.js"></script>
  <style type="text/css">
    .service, .case, .advantage, .partner, .about, .index_foot {
      z-index: 1;
      background: #fff;
    }

    .service .title_box {
      padding: 1.1rem 0;
    }

    .case .title_box {
      padding: .44rem 0 1.14rem 0;
    }

    .advantage .title_box, .about .title_box {
      padding: 1.12rem 0 .5rem 0;
    }

    /*region*/
    /*顶部banner图*/
    .banner {
      position: fixed;
      z-index: -1;
      top: 0;
    }

    #slider1 {
      width: 100%;
      height: 7.64rem;
    }

    .banner1 {
      position: relative;
    }

    .banner1 .left_txt {
      width: 5.93rem;
      position: absolute;
      left: 1.75rem;
      top: 2.88rem;
    }

    .banner1 .left_txt .txt {
      text-align: center;
      margin-top: .26rem;
      margin-bottom: .43rem;
      font-size: .32rem;
      color: #fff;
    }

    .banner1 .left_txt .btn {
      width: 3rem;
      height: .8rem;
      line-height: .8rem;
      border: 1px solid #fff;
      cursor: pointer;
      display: block;
      font-size: .32rem;
      color: #fff;
      border-radius: .1rem;
      background: transparent;
      text-align: center;
      margin: 0 auto;
    }

    /*endregion*/

    /*region*/
    /*服务*/
    .service {
      margin-top: 7.64rem;
    }

    .service_item {
      width: 12.02rem;
      margin: 0 auto;
    }

    .service_item .item {
      position: relative;
    }

    .service_item .item .img_box {
      width: 2.76rem;
      height: 2.76rem;
      background: url("./images/index/circular.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .active_item {
      border-radius: .1rem;
      box-shadow: 0 .2rem .2rem 0 rgba(34, 23, 20, 0.45);
      width: 3.56rem;
      height: 4.5rem;
      background: #fff;
      overflow: hidden;
      position: absolute;
      top: -.6rem;
      left: -.45rem;
      transition: all 0.8s;
      opacity: 0;
    }

    .item:hover .active_item {
      opacity: 1;
      animation: zoom 0.5s;
    }

    .active_item .top_box {
      height: 2.13rem;
      background: linear-gradient(150deg, rgba(23, 223, 249, 1) 0%, rgba(1, 183, 233, 1) 100%);
      color: #fff;
      text-align: center;
    }

    .active_item .top_box > img {
      margin: .2rem 0;
    }

    .active_item .top_box .m_top13 {
      margin-top: .13rem;
    }

    .active_item .bottom_box {
      padding-top: .3rem;
    }

    .active_item .bottom_box > div {
      width: 2.6rem;
      margin: 0 auto;
      font-size: .2rem;
      color: #666;
      line-height: .3rem;
    }

    .top_20 {
      top: -.2rem !important;
    }

    .w75 {
      width: .75rem;
    }

    .w46 {
      width: .46rem;
    }

    .w56 {
      width: .56rem;
    }

    .w77 {
      width: .77rem;
    }

    .w91 {
      width: .91rem;
    }

    .w100 {
      width: 1rem;
    }

    .w80 {
      width: .8rem;
    }

    .w86 {
      width: .86rem;
    }

    .w163 {
      width: 1.63rem;
    }

    .w141 {
      width: 1.41rem;
    }

    .w126 {
      width: 1.26rem;
    }

    .service_item .item .txt {
      margin-top: .54rem;
      margin-bottom: .7rem;
    }

    /*endregion*/

    /*region*/
    /*项目展示*/
    .case .case_content {
      position: relative;
    }

    .case .case_content .img_box {
      width: 100%;
      height: 9.5rem;
      overflow: hidden;
      position: relative;
    }

    .case .case_content .img_box > img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      z-index: 0;
      opacity: 0;
      transition: all 1s;
    }

    .case .case_content .img_box .img_active {
      z-index: 1 !important;
      opacity: 1;
    }

    .case .menu_box {
      background: url("./images/index/case_menu.png") no-repeat;
      background-size: 100% 100%;
      width: 3.08rem;
      height: 6.83rem;
      /*width: 4rem;*/
      /*height: 6.84rem;*/
      position: absolute;
      left: 0;
      top: 1.32rem;
      z-index: 5;
    }

    .case .menu_box .menu_time {
      font-size: .18rem;
      line-height: .18rem;
      color: #fff;
      padding-left: .22rem;
      cursor: pointer;
      display: block;
      width: .9rem;
      position: absolute;
    }

    .case .menu_box .menu_time:after {
      content: ' ';
      display: inline-block;
      width: .1rem;
      height: .1rem;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      left: 0;
      top: 27%;
    }

    .case .menu_box .menu_time:before {
      content: ' ';
      display: inline-block;
      width: .18rem;
      height: .18rem;
      border-radius: 50%;
      border: 1px solid #fff;
      background: transparent;
      position: absolute;
      left: -.05rem;
      opacity: 0;
      transition: all 0.5s;
    }

    .case .menu_box .menu_time:hover {
      /*opacity: 1;*/
    }

    .case .menu_box .txt_active {
      font-size: .22rem;
    }

    .case .menu_box .txt_active:before {
      animation: zoom 0.5s;
      opacity: 1 !important;
    }

    .backstage {
      left: .48rem;
      top: -.08rem;
    }

    .website {
      left: 2.08rem;
      top: .8rem;
    }

    .medical {
      left: 3rem;
      top: 2.38rem;
    }

    .express {
      left: 3rem;
      bottom: 2.45rem;
    }

    .wechat {
      left: 2.1rem;
      bottom: .86rem;
    }

    .e-commerce {
      left: .55rem;
      bottom: -.05rem;
    }

    /*endregion*/

    /*region*/
    /*平台优势*/
    .advantage .con .left {
      width: 5rem;
      height: 5rem;
      box-sizing: border-box;
      position: relative;
      background: url("./images/index/advantage.png") no-repeat;
      background-size: 100% 100%;
    }

    .advantage .con .left .txt_box {
      position: absolute;
      /*top: 0;*/
      width: 100%;
      height: 100%;
      padding: 0 .6rem;
      background: rgba(82, 26, 191, 0.53);
    }

    .advantage .con .left .img {
      width: 1.16rem;
      height: 1.16rem;
      display: block;
      margin: 0 auto;
      margin-top: 1rem;
    }

    .advantage .con .left .txt {
      margin-top: .35rem;
      font-size: .18rem;
      color: #fff;
      line-height: .3rem;
    }

    .advantage .con .right {
      width: 7rem;
    }

    .advantage .con .right > div {
      width: 3.5rem;
      height: 2.5rem;
      color: #fff;
      cursor: pointer;
      position: relative;
    }

    .advantage .con .right > div:hover .con_box {
      opacity: 0;
    }

    .advantage .con .right > div:hover .advantage_active {
      opacity: 1;
      width: 100%;
      height: 100%;
    }

    .advantage .con .right .con_box {
      padding-top: .22rem;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      opacity: 1;
      transition: all 1s;
    }

    .advantage .con .right .con_box > img {
      width: 1.14rem;
      height: 1.14rem;
    }

    .advantage .con .right .con_box .title {
      margin-top: .25rem;
    }

    .advantage_one {
      background: rgba(255, 77, 47, 1);
    }

    .advantage_tow {
      background: rgba(87, 175, 255, 1);
    }

    .advantage_three {
      background: rgba(160, 217, 0, 1);
    }

    .advantage_four {
      background: rgba(255, 209, 0, 1);
    }

    .advantage_active {
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      opacity: 0;
      transition: all 1s;
    }

    .margin_t20 {
      margin-top: .2rem;
    }

    .advantage_active .desc {
      width: 3.14rem;
      margin: 0 auto;
      margin-top: .18rem;
      text-align: left;
      line-height: .22rem;
    }

    .advantage_active .bg {
      opacity: 0.5;
      width: 100%;
      height: 100%;
    }

    .advantage_active .top_content {
      padding-top: .2rem;
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }

    .advantage_active .top_content > img {
      width: .71rem;
      height: .71rem;
    }

    .advantage_one .advantage_active .bg {
      background: url("./images/index/advantage_bg1.png") no-repeat 100% 100%;
    }

    .advantage_tow .advantage_active .bg {
      background: url("./images/index/advantage_bg2.png") no-repeat 100% 100%;
    }

    .advantage_three .advantage_active .bg {
      background: url("./images/index/advantage_bg3.png") no-repeat 100% 100%;
    }

    .advantage_four .advantage_active .bg {
      background: url("./images/index/advantage_bg4.png") no-repeat 100% 100%;
    }

    /*endregion*/

    /*关于我们*/
    .about_con {
      width: 100%;
      height: 4.79rem;
      background: url("./images/index/about_bg.png");
      background-size: 100% 100%;
    }

    /*region*/
    /*合作伙伴*/
    .partner {
      padding-top: 1.15rem;
    }

    .w1200 {
      width: 12rem;
      margin: 0 auto;
    }

    .partner .title_box {
      margin-bottom: .43rem;
    }

    .partner_item {
      width: 3.7rem;
      height: 2.4rem;
      background: rgba(93, 125, 231, 0.5);
      margin-bottom: .45rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .partner_item > div {
      width: 100%;
      height: 100%;
      opacity: 0.5;
    }

    .partner_item > img {
      position: absolute;
    }

    .partner1 {
      background: url("./images/index/partner1.png") no-repeat;
      background-size: 100% 100%;
    }

    .partner2 {
      background: url("./images/index/partner2.png") no-repeat;
      background-size: 100% 100%;
    }

    .partner3 {
      background: url("./images/index/partner3.png") no-repeat;
      background-size: 100% 100%;
    }

    .partner4 {
      background: url("./images/index/partner4.png") no-repeat;
      background-size: 100% 100%;
    }

    .partner5 {
      background: url("./images/index/partner5.png") no-repeat;
      background-size: 100% 100%;
    }

    .partner6 {
      background: url("./images/index/partner6.png") no-repeat;
      background-size: 100% 100%;
    }

    /*endregion*/

    /*底部样式*/
    .index_foot {
      height: 10.8rem;
    }

    /*region*/
    /*自定义动画*/
    @keyframes zoom {
      from {
        transform: scale(0.8, 0.8);
        filter: alpha(opacity=0);
      }
       to {
        transform: scale(1, 1);
        filter: alpha(opacity=100);
      }
    }

    /*endregion*/
    .w_140 {
      width: 1.4rem;
    }

    .w_210 {
      width: 2.1rem;
    }

    .w_297 {
      width: 2.97rem;
    }

    .w_76 {
      width: .76rem;
    }

    .w_127 {
      width: 1.27rem;
    }

    /*移动端样式*/
    @media screen and (max-width: 750px) {
      .header {
        display: none;
      }
    }
  </style>
</head>
<body>
<div class="index">
  <div onmouseover="showMenu()" onmouseout="hideMenu()">
    <div class="small_menu"></div>
    <div class="header box align-center space-between">
      <div class="logo box align-center">
        <img src="./images/index/logo.png" class="S50">
        <div class="logo_title center">
          <p class="f28">恺睿信息科技</p>
          <p class="f20 mp8">IT KAI RUI</p>
        </div>
      </div>
      <ul class="nav center box align-center">
        <li>
          <a class="menu_active" target="_parent" href="index.html">
            首页
          </a>
        </li>
        <li>
          <a target="_parent" href="service.html">
            专属服务
          </a>
        </li>
        <li>
          <a target="_parent" href="project.html">
            项目展示
          </a>
        </li>
        <li>
          <a target="_parent" href="advantage.html">
            平台优势
          </a>
        </li>
        <li>
          <a target="_parent" href="contact.html">
            联系我们
          </a>
        </li>
        <li>
          <a target="_parent" href="about.html">
            关于我们
          </a>
        </li>
      </ul>
      <div class="tel box align-center">
        <img src="./images/index/tel.png" class="S32 tel_icon">
        <span class="f24">400-661-9523</span>
      </div>
    </div>
  </div>
  <div class="banner">
    <div class="jSlider" id="slider1">
      <div class="banner1">
        <img src="./images/index/bg.png">
        <div class="left_txt">
          <img src="./images/index/banner_txt.png">
          <p class="txt">专注互联网APP高端服务</p>
          <a href="#foot" class="btn scroll">免费咨询</a>
        </div>
      </div>
      <div><img src="./images/index/case6.png"></div>
    </div>
  </div>
  <div class="service">
    <div class="title_box">
      <p class="index_title">全网立体式服务</p>
      <p class="index_title_e">SERVICE</p>
    </div>
    <div class="service_item box space-around flex-wrap">
      <div class="item">
        <div class="img_box">
          <img src="./images/index/ios.png" class="w75"/>
        </div>
        <div class="txt f20 gray center">IOS APP开发</div>

        <div class="active_item hide">
          <div class="top_box">
            <img src="./images/index/ios_active.png" class="w46"/>
            <p class="f20 center">恺睿信息科技</p>
            <p class="f16 center m_top13">IOS APP开发</p>
          </div>
          <div class="bottom_box">
            <div>
              专注于高端型IOS系统开发，提供优质的IOS APP开发设计方案服务.实现面对面人机交互，全方位增强品牌友好度。
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="img_box">
          <img src="./images/index/android.png" class="w77"/>
        </div>
        <div class="txt f20 gray center">Android开发</div>

        <div class="active_item hide">
          <div class="top_box">
            <img src="./images/index/android_active.png" class="w46"/>
            <p class="f20 center">恺睿信息科技</p>
            <p class="f16 center m_top13">Android 开发</p>
          </div>
          <div class="bottom_box">
            <div>
              针对主流的android系统，提供一站式APP咨询、策划、开发服务.实现面对面人机交互，全方位增强品牌友好度.
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="img_box">
          <img src="./images/index/phone.png" class="w91"/>
        </div>
        <div class="txt f20 gray center">手机网站开发</div>

        <div class="active_item hide">
          <div class="top_box">
            <img src="./images/index/phone_active.png" class="w56"/>
            <p class="f20 center">恺睿信息科技</p>
            <p class="f16 center m_top13">手机网站开发</p>
          </div>
          <div class="bottom_box">
            <div>
              结合行业特征，提供定制手机站,深入理解用户需求与移动端特性,独立打造视觉效果,保证最佳触屏体验.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="service_item box space-around flex-wrap">
      <div class="item">
        <div class="img_box">
          <img src="./images/index/computer.png" class="w163"/>
        </div>
        <div class="txt f20 gray center">网站开发</div>

        <div class="active_item top_20 hide">
          <div class="top_box">
            <img src="./images/index/computer_active.png" class="w100"/>
            <p class="f20 center">恺睿信息科技</p>
            <p class="f16 center m_top13">网站开发</p>
          </div>
          <div class="bottom_box">
            <div>
              从市场的角度和客户的需求出发，融合视觉美学及有效策略，设计出符合企业的品牌网站开发您所需要的功能开发，满足网站用户的需求，解决网站更新朝流.
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="img_box">
          <img src="./images/index/qrcode.png" class="w141"/>
        </div>
        <div class="txt f20 gray center">微信公众号开发</div>

        <div class="active_item top_20 hide">
          <div class="top_box">
            <img src="./images/index/qrcode_active.png" class="w86"/>
            <p class="f20 center">恺睿信息科技</p>
            <p class="f16 center m_top13">微信公众号开发</p>
          </div>
          <div class="bottom_box">
            <div>
              对微信进行深入开发，量身定制适合您企业产品和服务的公众号及小程序应用模块。让用户更方便参与企业互动活动.
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="img_box">
          <img src="./images/index/UI.png" class="w126"/>
        </div>
        <div class="txt f20 gray center">用户界面设计</div>

        <div class="active_item top_20 hide">
          <div class="top_box">
            <img src="./images/index/UI_active.png" class="w80"/>
            <p class="f20 center">恺睿信息科技</p>
            <p class="f16 center m_top13">用户界面设计</p>
          </div>
          <div class="bottom_box">
            <div>
              极致的界面和图标设计，以较具创造力的视觉设计传递品牌价值,严格遵循业内设计规范适配不同设备，您的所想就是客户的所见.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="case">
    <div class="title_box">
      <p class="index_title">经典项目展示</p>
      <p class="index_title_e">SHOWCASE</p>
    </div>
    <div class="case_content">
      <div class="img_box">
        <img src="./images/index/case1.png" class="backstage_img"/>
        <img src="./images/index/case2.png" class="website_img"/>
        <img src="./images/index/case3.png" class="medical_img"/>
        <img src="./images/index/case4.png" class="express_img"/>
        <img src="./images/index/case5.png" class="wechat_img"/>
        <img src="./images/index/case6.png" class="e-commerce_img"/>
      </div>
      <div class="menu_box">
        <span class="menu_time backstage" onmouseover="hoverCase('backstage','backstage_img')">云HIS</span>
        <span class="menu_time website" onmouseover="hoverCase('website','website_img')">企业官网</span>
        <!--<span class="menu_time backstage" onmouseover="hoverCase('backstage', 'backstage_img')">后台系统</span>-->
        <span class="menu_time medical" onmouseover="hoverCase('medical','medical_img')">智能穿戴</span>
        <span class="menu_time express" onmouseover="hoverCase('express','express_img')">快递运输</span>
        <span class="menu_time wechat" onmouseover="hoverCase('wechat','wechat_img')">管理系统</span>
        <span class="menu_time e-commerce" onmouseover="hoverCase('e-commerce', 'e-commerce_img')">电商平台</span>
      </div>
    </div>
  </div>
  <div class="advantage">
    <div class="title_box">
      <p class="index_title">平台优势</p>
      <p class="index_title_e">platform advantage</p>
    </div>
    <div class="con box justify-center">
      <div class="left">
        <div class="txt_box">
          <img src="./images/index/logo@115.png" class="img"/>
          <div class="txt">
            杭州恺睿信息科技有限公司成立于2016年，注册资金100万。公司主要运用先进的云计算技术为医院提供智慧医疗服务，已与全国多家医院达成合作。我们同时还为其他企业提供数字平台建设与数字产品设计运营的全产业链服务，从设计制作到开发运营的一站式开发服务。公司以“专注产品，用心服务”为核心价值。
          </div>
        </div>
      </div>
      <div class="right box flex-wrap center">
        <div class="advantage_one">
          <div class="con_box">
            <img src="./images/index/advantage1.png"/>
            <p class="f18 center title">精准的策划服务</p>
          </div>

          <div class="advantage_active">
            <div class="bg"></div>
            <div class="top_content">
              <img src="./images/index/advantage_one.png"/>
              <p class="f18 center margin_t20">精准的策划服务</p>
              <div class="f14 desc">凭借丰富的网站策划知识及先进的网站设计水平，开发团队完全能胜任各种网站（互联网应用程序）的设计开发工作。</div>
            </div>
          </div>
        </div>
        <div class="advantage_tow">
          <div class="con_box">
            <img src="./images/index/advantage2.png"/>
            <p class="f18 center title">完美的网页设计</p>
          </div>

          <div class="advantage_active">
            <div class="bg"></div>
            <div class="top_content">
              <img src="./images/index/advantage_tow.png"/>
              <p class="f18 center margin_t20">完美的网页设计</p>
              <div class="f14 desc">我们提供个性化的网站建设服务，以用户体验为实施指导原则，为客户建设一个用户体验价值高的商业网络平台.</div>
            </div>
          </div>
        </div>
        <div class="advantage_three">
          <div class="con_box">
            <img src="./images/index/advantage3.png"/>
            <p class="f18 center title">专业的技术</p>
          </div>

          <div class="advantage_active">
            <div class="bg"></div>
            <div class="top_content">
              <img src="./images/index/advantage_three.png"/>
              <p class="f18 center margin_t20">专业的技术</p>
              <div class="f14 desc">我们将以个性化的的创意策划、成熟的网站建设技术、杰出的多媒体网站设计能力让您的产品获得与众不同、脱颖而出的风格与形象</div>
            </div>
          </div>
        </div>

        <div class="advantage_four">
          <div class="con_box">
            <img src="./images/index/advantage4.png"/>
            <p class="f18 center title">24小时回应并处理</p>
          </div>

          <div class="advantage_active">
            <div class="bg"></div>
            <div class="top_content">
              <img src="./images/index/advantage_four.png"/>
              <p class="f18 center margin_t20">24小时回应并处理</p>
              <div class="f14 desc">根据客户具体情况制定系列专业和规范的客户服务和保障体系，提供专业的服务.</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="partner">
    <div class="title_box">
      <p class="index_title">合作伙伴</p>
      <p class="index_title_e">Cooperation company</p>
    </div>
    <!--<div class="box space-between w1200">-->
      <!--<div class="partner_item">-->
        <!--<div class="partner1"></div>-->
        <!--<img src="./images/index/partner1_logo.png" class="w_140"/>-->
      <!--</div>-->
      <!--<div class="partner_item">-->
        <!--<div class="partner2"></div>-->
        <!--<img src="./images/index/partner2_logo.png" class="w_210"/>-->
      <!--</div>-->
      <!--<div class="partner_item">-->
        <!--<div class="partner3"></div>-->
        <!--<img src="./images/index/partner3_logo.png" class="w_210"/>-->
      <!--</div>-->
    <!--</div>-->
    <div class="box space-between w1200">
      <div class="partner_item">
        <div class="partner4"></div>
        <img src="./images/index/partner4_logo.png" class="w_297"/>
      </div>
      <div class="partner_item">
        <div class="partner5"></div>
        <img src="./images/index/partner5_logo.png" class="w_76"/>
      </div>
      <div class="partner_item">
        <div class="partner6"></div>
        <img src="./images/index/partner6_logo.png" class="w_127"/>
      </div>
    </div>
  </div>
  <div class="about_box">
    <div class="about">
      <div class="title_box">
        <p class="index_title">关于我们</p>
        <p class="index_title_e">about us</p>
      </div>
    </div>
    <div class="about_con"></div>
  </div>
  <iframe id="foot" src="./common/foot.html" width="100%" frameborder="0" scrolling="no" class="index_foot"></iframe>
</div>
</div>

<script src="./js/jquery.jSlider.min.js"></script>
<script type="text/javascript" src="./js/saparallax.js"></script>
<script type="text/javascript">
	let height = document.getElementById('slider1').clientHeight
	window.onscroll = function () {
		if (window.scrollY > height) {
			$('.header').addClass('header_hide')
			$('.small_menu').addClass('show_small_menu')
		} else {
			$('.header').removeClass('header_hide')
			$('.small_menu').removeClass('show_small_menu')
		}
	}
	let ctime = ''

	// 显示头部菜单
	function showMenu () {
		clearTimeout(ctime)
		setTimeout(() => {
			$('.header').removeClass('header_hide')
			$('.small_menu').removeClass('show_small_menu')
		}, 1000)
	}

	// 隐藏头部菜单
	function hideMenu () {
		if (window.scrollY > height) {
			ctime = setTimeout(() => {
				$('.header').addClass('header_hide')
				$('.small_menu').addClass('show_small_menu')
			}, 1000)
		}
	}

	function showActive (className) {
		$('.' + className).removeClass('hide')
	}

	function hideActive (className) {
		$('.' + className).addClass('hide')
	}

	let case_menu_img_active = 'backstage'
	let case_menu_txt_active = 'backstage_img'

	function hoverCase (txt_name, img_name) {
		$('.' + case_menu_img_active).removeClass('img_active')
		$('.' + case_menu_txt_active).removeClass('txt_active')
		case_menu_txt_active = txt_name
		case_menu_img_active = img_name
		$('.' + case_menu_img_active).addClass('img_active')
		$('.' + case_menu_txt_active).addClass('txt_active')
	}

	hoverCase('backstage', 'backstage_img')
</script>
</body>
</html>
