

/* kv */
.kv{ background-image: url(../img/home/kv.jpg);}
.kv-title h2{ font-size: 80px;font-weight: 400;margin-top: 0px;margin-bottom: 0px;}

/* svg */
.svg{ display: flex; justify-content: space-between; padding-top: 100px;}
.svg-left{ flex: 1;}
.svg-left .item-header{ font-size: 32px;}
.svg-left .item-body{ font-size: 18px; margin-top: 20px; line-height: 30px; padding-right: 40px;}
.svg-right{ width: 40%;}
.svg-right img{ width: 100%; max-width: 489px;}


  /* Digital */
  .digital{ display: flex; justify-content: space-between; align-items: start;}
  .digital .left{ flex: 1;}
  .digital-img{ border-radius: 18px;}

  .digital .item-header, .products-header .item-header{ font-size: 32px; font-family: 'Inter-Black'; line-height: 48px;}
  .digital .item-body, .products-header .item-body{ font-size: 18px; margin-top: 40px; line-height: 30px;}

  .digital.creator-economy, .digital.code-tech{ margin-top: 150px;}
  .digital.code-tech{ margin-bottom: 100px;}

  .digital.creator-economy .right { width: 50%;}
.creator-economy .item-footer{ margin-top: 50px;}

.code-tech .right{ width: 50%;}
  .code-tech-btn-group{ display: flex; justify-content: space-between;}
  .code-tech .left p{max-width: 480px; margin-right: 20px;}
  .code-tech-btn-group .item-box{ width: 48%; aspect-ratio: 32/40;}
  .code-tech-btn-group .item-box a{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 18px;}
  .code-tech-btn-group .item-box.vdna a{ color: var(--color-orange); border: 3px solid var(--color-orange); box-shadow: 0 0 10px 0  rgba(255, 102, 0, 0.2);}
  .code-tech-btn-group .item-box.vdna a:hover{animation: vdnaItemHover 0.5s linear 0s infinite alternate; border: 3px solid rgba(255, 102, 0, .8);}


  @keyframes vdnaItemHover
{
    0% { box-shadow: 0 0 10px 0  rgba(255, 102, 0, 0.2);}
    100% { box-shadow: 0 0 50px 0  rgba(255, 102, 0, 0.5);}
}

  .code-tech-btn-group .item-box.digital-watermark a{ color: #0099ff; border: 3px solid #0099ff; box-shadow: 0 0 10px 0  rgba(0, 153, 255, 0.2);}
  .code-tech-btn-group .item-box.digital-watermark a:hover{animation: watermarkItemHover 0.5s linear 0s infinite alternate; border: 3px solid rgba(0, 153, 255, .8);}
  @keyframes watermarkItemHover
{
    0% { box-shadow: 0 0 10px 0  rgba(0, 153, 255, 0.2);}
    100% { box-shadow: 0 0 50px 0  rgba(0, 153, 255, 0.5);}
}
  .code-tech-btn-group .item-box a span{ display: block;}
  .code-tech-btn-group .item-box a span:nth-child(1){ padding-top: 50px;}
  .code-tech-btn-group .item-box a span:nth-child(2){ font-size: 48px; text-align: center;}
  .code-tech-btn-group .item-box a span:nth-child(3){ padding-bottom: 50px; text-decoration: underline;}
  .code-tech-btn-group .item-box.digital-watermark a span:nth-child(2){ font-size: 48px;}

  /* solutions */
  .solutions-header{ margin-top: 100px;}
  .solutions-list .item-rows{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: -50px;}
  .solutions-list .item{ width: calc(100%/2 - 50px);  margin-left: 50px; margin-top: 120px; border: 1px solid #CCC;}

  .solutions-list .item .item-content{ padding: 30px; }
  .solutions-list .item .item-img{ height: 80px; border-bottom: 1px solid #CCC; position: relative; background-image: url(../img/home/line-blue.png); background-size: cover;}
  .solutions-list .item .item-img span{display: block; overflow: hidden; width: 100%; height: 200px;  position: absolute; left: 0; bottom: 0;}
  .solutions-list .item .item-img img{ width: auto; height: 100%; transition: all .5s; position: absolute; left: 40px; bottom: -20px;}

  .solutions-list .item.right .item-img{ background-image: url(../img/home/line-orange.png);}
  .solutions-list .item:hover .item-img img{ bottom: -10px;}

  .solutions-list .item-content p:nth-child(1){ font-size: 26px; font-family: 'Inter-Black';}
  .solutions-list .item-content p:nth-child(1) em{ position: relative;}
  .solutions-list .item-content p:nth-child(2){ margin-top: 40px; font-size: 18px; line-height: 30px;}
  .solutions-list .item-content p:nth-child(3){ margin-top: 10px; text-align: right;}
  .solutions-list .item-content p:nth-child(3) a{ color: #333;}
  .solutions-list .item-content p:nth-child(3) a:hover{ text-decoration: underline; color: var(--color-blue);}


  /* products */
  .products{ margin-top: 150px;}
  .products-header .item-body{ margin-top: 20px;}
  .products-list{ margin-top: 50px; display: flex; justify-content: space-between;}
  .products-list .item{width: 20%; height: 700px; overflow: hidden; transition: all .5s; background-size: auto 100%; background-position: center;}
  .products-list .item:hover{ width: 40%;}

  .products-list .item a{display: block; color: #FFF; width: 100%; height: 100%; position: relative;}
  
  .products-list .item-content p{ position: absolute; padding-right: 30px;}
  .products-list .item .title{ font-size: 40px; font-family: 'Helvetica-Neue-UltraLight'; transition: all .5s; left: 30px; top: 12%;}
  .products-list .item:hover .title{ font-size: 60px;  height: 200px;}

  .products-list .item .desc{opacity: 0; left: 60px; bottom: 30%; font-size: 18px; font-family: 'Inter-Black'; transition: all .5s;}
  .products-list .item:hover .desc{ opacity: 1; left: 30px;}

  .products-list .item .learn-more{ font-size: 1rem; opacity: 0; right: 0; bottom: 10%;  transition: all .5s;}
  .products-list .item:hover .learn-more{opacity: 1; right: 30px;}

  .products-list .video-tracker{ background-image: url(../img/home/products/1.jpg);}
  .products-list .api{ background-image: url(../img/home/products/2.jpg);}
  .products-list .rights-id{ background-image: url(../img/home/products/3.jpg);}
  .products-list .channel-id{ background-image: url(../img/home/products/4.jpg);}
  .products-list .vobile-insights{ background-image: url(../img/home/products/5.jpg);}
  .products-list .web3{ background-image: url(../img/home/products/6.jpg);}
  .products-list .cash_distribution{ background-image: url(../img/home/products/7.jpg);}


  /* gif */
.gif{ display: flex; justify-content: space-between; padding: 150px 0;}
.gif-left{ width: 40%;}
.gif-left img{ width: 100%; max-width: 489px;}
.gif-right{ flex: 1;}
.gif-right .item-header{ font-size: 32px;}
.gif-right .item-body{ font-size: 18px; margin-top: 20px; line-height: 30px; padding-right: 40px;}


  /* talk */
  .talk{ text-align: center; color:var(--color-blue); padding: 100px 0;}
  .talk.full-bg .wrap{ max-width: 1200px;}
  .talk-header{ font-size: 32px; font-family: 'Inter-Black';}
  .talk-body{ font-size: 24px; margin-top: 30px; line-height: 40px;}
  .talk-footer{ margin-top: 80px;}
  .talk-footer a{ display: inline-block; font-family: 'Inter-Black'; background-color:var(--color-blue); padding: 0 57px; border-radius: 56px; height: 56px; line-height: 56px; font-size: 20px; color: #FFF;}
  .talk-footer a:hover{ opacity: .8;}

  @media screen and (max-width: 1920px) {
    .kv{ background-size: auto 100%; }
  }

  @media screen and (max-width: 1380px) {
    .digital-img{ width: 100%;}
    .digital.creator-economy .right {
      flex: 1;
      margin-left: 100px;
    }
    .code-tech .right{ width: auto; flex: 1;}
    .code-tech-btn-group .item-box a span:nth-child(2) {
      font-size: 40px;
    }
    .code-tech-btn-group .item-box.digital-watermark a span:nth-child(2) {
      font-size: 40px;
    }
    .code-tech-btn-group .item-box a{ min-width: 250px; height: 380px;}


  }
  @media screen and (max-width: 1100px) {

    .code-tech-btn-group .item-box a {
      min-width: 200px;
      height: 360px;
    }
    .code-tech-btn-group .item-box a span:nth-child(2) {
      font-size: 36px;
    }
    .code-tech-btn-group .item-box.digital-watermark a span:nth-child(2) {
      font-size: 36px;
    }
    .digital.creator-economy, .digital.code-tech {
      margin-top: 100px;
  }
  .digital.code-tech{margin-bottom: 0;}

  }
  @media screen and (max-width: 980px) {
    .kv-title h2{ font-size: 60px;margin-top: 0px;}

  }

@media screen and (max-width: 640px) {
  .kv {
    background-image: url(../img/home/kv-m.jpg);
    background-size: cover;
  }
  .kv-title h2{ font-size: 40px;margin-top: 0px;}


  /* svg */
  .svg{flex-direction: column; padding-top: 50px;}
  .svg-left{ order: 2; margin-top: 20px;}
  .svg-left .item-header{ font-size: 20px; line-height: 24px;}
  .svg-left .item-body{ font-size: 16px; margin-top: 20px; line-height: 24px; padding: 0;}
  .svg-right{ width: 100%; text-align: center;}
  .svg-right img{ width: 60%;}

  /* digital */
  .digital-img {
    border-radius: 10px;
  }
  .digital.creator-economy, .digital.code-tech {
    margin-top: 50px;
  }
  .creator-economy .item-footer{ margin-top: 30px;}
  .digital{ flex-direction: column;}

  .digital .left img{ display: block; width: 100%;}
  .digital .right {
    margin-top: 30px;
    width: 100%;
  }
  .digital.creator-economy .right {
    width: 100%;
}
  .digital.creator-economy .right{margin-left: 0;}
  .digital .item-header, .products-header .item-header {
    font-size: 20px;
    line-height: 22px;
    padding-top: 18px;
  }
  .digital .item-body, .products-header .item-body {
    font-size: 16px;
    margin-top: 18px;
    line-height: 24px;
  }

  .code-tech-btn-group .item-box a span:nth-child(2) {
    font-size: 30px;
  }
  .code-tech-btn-group .item-box.digital-watermark a span:nth-child(2) {
    font-size: 28px;
  }
  .code-tech-btn-group .item-box {
    width: calc(50% - 10px);
}
  .code-tech-btn-group .item-box a {
    height: 240px;
    border-radius: 10px;
    min-width: 150px;
  }
  .code-tech-btn-group .item-box img{ width: 50px;}
  .code-tech-btn-group .item-box.vdna a {
    border: 2px solid var(--color-orange);
    box-shadow: 0 0 5px 5px rgba(255, 102, 0, 0.2);
  }
  .code-tech-btn-group .item-box.digital-watermark a {
    border: 2px solid #0099ff;
    box-shadow: 0 0 5px 5px rgba(0, 153, 255, 0.2);
  }
  .code-tech-btn-group .item-box a span:nth-child(1) {
    padding-top: 18px;
  }
  .code-tech-btn-group .item-box a span:nth-child(3) {
    padding-bottom: 18px;
  }

  /* solutions */
  .solutions-list .item-rows {
    display: block;
    margin-left: 0;
  }
  .solutions-header {
    margin-top: 50px;
}
.solutions-list .item {
  width: 100%;
  margin-left: 0;
  margin-top: 60px;
}
.solutions-list .item .item-img span {
  height: 120px;
}
.solutions-list .item .item-img img {
  left: 20px;
}
.solutions-list .item .item-content {
  padding: 20px;
}
.solutions-list .item-content p:nth-child(1) {
  font-size: 18px;
}
.solutions-list .item-content p:nth-child(2) {
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
}

  

  /* products */
  .products {
    margin-top: 50px;
  }

  .products-list{margin-top: 50px; flex-direction: column;}
  .products-list .video-tracker{ background-image: url(../img/home/products-m/1.jpg);}
  .products-list .api{ background-image: url(../img/home/products-m/2.jpg);}
  .products-list .rights-id{ background-image: url(../img/home/products-m/3.jpg);}
  .products-list .channel-id{ background-image: url(../img/home/products-m/4.jpg);}
  .products-list .vobile-insights{ background-image: url(../img/home/products-m/5.jpg);}
  .products-list .web3{ background-image: url(../img/home/products-m/6.jpg);}

  .products-list .item {
    background-size: cover;
    padding: 0 30px;
    width: 100%;
    height: 120px;
    margin-top: 3px;
  }
  .products-list .item:hover{ width: 100%;}

  .products-list .item a{display: block; color: #FFF; width: 100%; height: 100%; position: relative;}
  
  .products-list .item-content p{ padding-right: 0;}
  .products-list .item .title{ font-size: 32px; left: 0; top: 10px;}
  .products-list .item:hover .title{ font-size: 32px;  height: auto;}

  .products-list .item .desc{opacity: 1; left: 0; bottom: 50px; font-size: 15px;}
  .products-list .item:hover .desc{ opacity: 1; left: 0;}

  .products-list .item .learn-more,.products-list .item:hover .learn-more{ font-size: 13px; opacity: 1; right: 0; bottom: 10px;}



 
  /* gif */
.gif{ flex-direction: column; padding:50px 15px;}
.gif-left{ width: 100%; text-align: center;}
.gif-left img{ width: 100%;}
.gif-right{ flex: 1;}
.gif-right .item-header{ font-size: 20px; line-height: 24px;}
.gif-right .item-body{ font-size: 16px; margin-top: 20px; line-height: 24px; padding-right: 0;}
 
  

/* talk */
.talk {
  padding: 60px 0;
}
.talk-header {
  font-size: 22px;
}
.talk-body {
  font-size: 16px;
  margin-top: 18px;
  line-height: 24px;
  margin-left: auto;
  margin-right: auto;

}
.talk-footer {
  margin-top: 40px;
}
.talk-footer a {
  padding: 0 40px;
  border-radius: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
}


  
}
   
