:root{
  --txtClr: #585858;
}
.grid_lay{
  grid-column-gap:2rem !important;
}
.bd_t_none{border-top: none !important}
.bd_t_black1{border-top: 1px solid #000;}
.bd_b_none{border-bottom: none !important}
.bd_b_none:before{display : none;}
.bg_black{background-color:#222;}
.page-container .h2-group img{
  display: inline-block;
  width : 21.25rem;
  margin-bottom: .5rem;
}
.aitothefield_txt_img{
  display:block;
  width : 21.25rem;
  aspect-ratio: 340/38;
  mask: url("../img/future-agriculture/aitothefield_txt.svg") no-repeat center / cover;
  background: #EF4023;
}
.future-story{
  padding-bottom: 0;
}
.w_half{
  width : 50% !important;
}
.banner2{
  position: relative;
  .txt_wrap{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    column-gap: 2rem;
    position: absolute;
    width : 100%;
    height: 100%;
    color:var(--black1);
    h4{
      font-size: 2rem;
    }
    p{
      margin-top : 1rem;
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 150%;
    }
    span{
      display : block;
      margin-top : 1rem;
      font-size:0.875rem;
      opacity: .7;
    }
    small{font-size: 0.75rem}
  }
  .txt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 7/-1;
    padding-right : 3.75rem;
  }
}
.txt_banner{
  padding: 86px 0;
  background-color: #222222;
  color: var(--white1);
}


.aitothefield{
  .txt_bg_box{
    position: relative;
    color: #fff;
    img{
      top: 0; left: 0;
      width: 100%;
      height:100%;
      z-index : -1;
    }
    .txt{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 50%;top: 50%;
      transform: translate(-50%,-50%);
      z-index : 10;
      height: 100%;
      width : 100%;
    }
    a{
      display : flex;
      justify-content: center;
      align-items: center;
      width : max-content;
      height: max-content;
      margin: 0 auto;
      padding: 1rem 3.125rem;
      border-radius: 56px;
      border: 1px solid #fff;
      transition: background-color .3s ease, color .3s ease;
    }
    a:hover{
      background: #fff;
      color: #000;
    }
  }
  .arti2{
    ul{
      display:flex;
      justify-content: space-between;
      position: relative;
    }
    ul:after{
      content:"";
      width : 100%;
      height: 1px;
      background:#aaa;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index : -1;
    }
    li{
      display: flex;
      flex-direction: column;
      align-items: center;
      width : 15rem;
      padding-top: 2.188rem;
      aspect-ratio: 1;
      border-radius: 50%;
      border: solid+1px#aaa;
      background: var(--white1);
    }
    img{
      width : 7.875rem;
      height: 7.375rem;
      margin-bottom : 0.313rem;
    }
    p{
      color: var(--txtClr);
    }
  }
  .clr_box{
    display:grid;
    grid-template-columns:subgrid;
    row-gap: 2rem;
    li{grid-column: span 3;}
    h5{
      color: #fff;
      border-radius:0.625rem;
      text-align: center;
    }
    li:nth-child(3n+1){--clr:#EF4023}
    li:nth-child(3n+2){--clr:#0280BC}
    li:nth-child(3n+3){--clr:#45AFAE}
    li:nth-child(3n+1) h5{background:var(--clr)}
    li:nth-child(3n+2) h5{background:var(--clr)}
    li:nth-child(3n+3) h5{background:var(--clr)}
  }
  .link_box{
    display:grid;
    grid-template-columns:subgrid;
    row-gap: 2rem;
    li{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      grid-column: span 3;
      position: relative;
      height: 24.625rem;
      text-align: center;
      border-radius:0.625rem;
      overflow: hidden;
    }
    h5{
      margin-bottom : 0.25rem;
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--white1);
    }
    p{
      font-size: 1.25rem;
      font-weight: 600;
    }
    a{
      display: flex;
      justify-content: center;
      align-items: center;
      width : 11rem;
      height: 3.5rem;
      margin: 1.875rem auto 0;
      border-radius: 3.5rem;
      border: solid+1px#fff;
      font-size: 1rem;
      font-weight: 700;
      color: var(--white1);
      transition: .35s ease-in-out;
    }
    a:hover{
      color: #000;
      background-color: var(--white1);
    }
    a:hover + img{
      transform: translate(-50%,-50%) scale(1.1);
    }
    img{
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      z-index : -1;
      width : 100%;
      height: 100%;
      object-fit: cover;
      transition: .4s ease-in-out;
    }
  }
  .arti4 .clr_box h5{
    padding: 2.625rem 0;
  }
  .arti5{
    .clr_box h5{
      margin-bottom : 0.625rem;
      padding: 1rem 0;
    }
    .clr_box >li > div{
      position: relative;
      height:calc(100% - 4.875rem);
      padding-bottom: 3.5rem;
      border-radius:0.625rem;
      border:solid+1px#aaa;
    }
    .txt{
      min-height: 4.5rem;
      margin-top : 1rem;
    }
    p{
      padding: 0 1.25rem;
      text-indent:-.5em;
      margin-left: 1em;
    }
    a{
      display: flex;
      align-items: center;
      gap: 4px;
      position: absolute;
      left: 50%;
      bottom: 1rem;
      transform: translateX(-50%);
      width : max-content;
      font-size: 1rem;
      font-weight: 700;
      color: var(--clr);
      transition: .2s ease-in-out;
    }
    a:after{
      width:1.875rem;
      height: 0.75rem;
      content:"";
      mask: url("/img/future-agriculture/link_arrow.svg") no-repeat center / cover;
      background:var(--clr);
    }
    a:hover{opacity: .4}
  }
  .arti6{
    .ico_box{
      display:flex;
      justify-content:center;
      flex-wrap: wrap;
      gap: 2rem;
      margin: 0 auto;
    }
    img{
      width : 9.125rem;
      aspect-ratio: 1/1;
      filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.10));
    }
    p{
      padding-top: 0.625rem;
      font-size: 1.25rem;
      font-weight: 700;
      text-align: center;
    }
  }
}

.aiprecisionfarming{

  .page-hd{
    height:calc(320px + 112px)
  }
  .banner_wrap{
    height: 20rem;
  }
  .banner_wrap .txt_wrap{
    max-width : 100%;
    width : calc(100% - 7.5rem);
  }
  .sec_cont2{
    .banner_wrap.banner1 img{
      transform: scaleX(-1);
    }
    article{padding: 3.75rem 5rem}
    article>div{gap: 3.25rem;}
    .item_bx{
      position: relative;
      height: 100%;
      padding: 1.75rem 1.25rem 2.5rem;
      p{min-height: 3rem}
      img:not(.step_arrow){margin-top: 1.875rem;width : 100%; aspect-ratio: 275/197;}
    }
    .sec_farming_cont5 em{
      position:absolute;
      top:50%;left:50%;
      transform:translate(-50%,-50%);
    }
    .sec_farming_cont6{
      h4{
        width : max-content;
        height: max-content;
        border-radius: 50px;
        font-size: 1.5rem;
        font-weight: 700;
        color:var(--white1);
        padding: 0.25rem 1rem;
      }
      h4.black{background:#000}
      h4.primary{background:#EF4023}
      img{
        width : calc(50% - 16px);
        height: max-content;
      }
      section:not(.sec_farming_cont6)  .step_arrow{
        position: static;
        transform: none;
        width: 6.875rem;
        height: 2rem;
        margin: 0 auto;
      }
    }
  }
  section:not(.sec_farming_cont6) .step_arrow{
    position:absolute;
    top:50%; right:-5rem;
    width : 6.875rem;
    height:2rem;
    transform: translateY(-50%) rotate(-90deg);
    margin: 0;
  }
  ul.list-img a{width : 100%;}
}

.aifacilityfarming{
  article[class*="platform_arti"]{
    background:var(--white1);
    padding: 3.75rem 5rem;

    .item{
      flex: 1;
      min-height: 100%;
      padding: 30px 1.25rem;
      border-top: solid+1px#000;
      background: var(--white3);
    }
    h5{
      font-size: 1.25rem;
    }
    .item dl{
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: solid+1px#e6e6e6;
    }
    .item dd{
      font-size: 1rem;
      color: #585858;
      line-height: 150%;
    }

    .col4{
      flex-wrap: wrap;
      .item{flex: none; width: calc(50% - 1rem);}
    }
  }
}

.robotics{
  article[class*=robotics_arti]{
    background: var(--white1);
    padding: 3.75rem 5rem;
  }
  .business_compo{
    .cont{
      border-radius: 0.625rem;
      overflow: hidden;
      background: #f5f5f5;
    }
    .cont:not(.md_fd_col){
      height: 100%;
      .txt_box{height: 100%}
    }
    .sm_row{
      max-width : 48rem;
      margin: 0 auto;

      img{
        width : 18.75rem;
        max-width : max-content;
      }
    }
    .large{
      .img_box{
        width : calc(100% - 26rem);
        img{
          height: 100%;
          object-fit: cover;
        }
      }
      .txt_box{
        max-width : 26rem;
        padding: 1.875rem;
      }
    }
    .txt_box{
      background-color: #f5f5f5;
      width : 100%;
      padding: 1.875rem 1.875rem 2.5rem;
    }
    .txt_box p{
      font-size: 1rem;
      line-height: 150%;
      color: #585858;
    }
    .txt_box strong{
      display : block;
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 140%;
      margin-bottom : 0.625rem;
    }
  }
  .step_arrow2{width : 18.75rem}
  .prd_img1{width : 30rem}
  .robotics_arti1{
    .video_wrap{
      display : flex;
      align-items: center;
      width : calc(100% - 22rem);
      background-color: #F5F5F5;
    }
    .video_wrap + ul img{
      aspect-ratio: 292/183;
      width : 18.25rem;
    }
    ul li .dp_f img{
      width : 100%;
    }
  }
}

.aiconnect{
  article[class*="arti_connect"]{
    padding: 3.75rem 5rem;
  }
  .prod-smart li>div{
    border-right: none;
  }
  .prod-smart li:nth-of-type(2n+1)>div{
    padding-left: 0;
    border-right : 1px solid #efefef;
  }
  .prod-smart li:nth-of-type(2n+2)>div{
    padding-right : 0;
  }
  .connect_img01{
    width : calc(100% - 40px);
    max-width: 625px;
    margin: 0 auto;
  }
  #mj_list.list-step li{
    width : 208px;
    border-radius: 0;
  }
  #mj_list.list-step li div{border-radius: 0}
  .fs_small{
  }
}

@media all and (max-width:1024px){
  .tb_fd_col{
    flex-direction: column !important;
  }
  .aiprecisionfarming{
    .page-hd{
      height:30vw
    }
  }
  .page-container .h2-group img{
    width : 17.25rem;
  }
  .robotics{
    .business_compo{
      .large{
        .img_box{
          width : 100%;
        }
        .txt_box{
          max-width : 100%;
        }
      }
    }
  }
}
@media all and (max-width: 768px){
  .banner2{
    .txt_wrap{
      position: relative;
      z-index : 1;
      display:block;
      padding: 40px 16px;
      h4{font-size:20px;}
      p{
        margin-top:10px;
        font-size:14px;
      }
    }
    .txt{padding-right : 0;}
    img{
      position: absolute;
      top: 0; left: 0;
      z-index : 0;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .aitothefield{
    .txt_bg_box{
      img{object-fit: cover;}
      a{
        padding: 10px 20px;
      }
    }
    .arti2{
      ul{
        flex-direction: column;
        align-items: center;
        gap: 40px;
      }
      ul:after{
        top: 0; left: 50%;
        width : 1px;
        height: 100%;
        transform: translateX(-50%);
      }
      li{
        width : 240px;
        padding-top: 34px;
      }
      img{
        margin-bottom : 10px;
      }
    }
    .clr_box{
      row-gap: 20px;
      li{height: max-content}
      li:nth-child(3n+1){
        order:1;
      }
      li:nth-child(3n+2){
        order:2;
      }
      li:nth-child(3n+3){
        order:3;
      }
    }
    .arti5{
      .txt{
        min-height: 63px;
        margin-top : 16px;
      }
    }
    .clr_box >li > div{
      height: max-content;
      padding-bottom : 56px;
      border-radius: 10px;
    }
    .clr_box > li > div.title_box{
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      position: relative;
      border:none;
      height:160px;
      margin: 0 0 20px;
      padding: 0;
      text-align: center;
      font-weight: 700;
      border-radius: 10px;
      overflow: hidden;
      img{
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        z-index : -1;
        width : 100%;
        height: 100%;
        object-fit: cover;
      }
      strong{
        font-size: 20px;
        color:var(--white1);
      }
      p{
        font-size: 14px;
        color: #EF4023;
      }
    }
    .arti6 {
      .ico_box{
        gap: 16px 10px;
        width : 100%;
        padding: 0 20px;
      }
      li{width : 70px;}
      img{
        width : 100%;
        aspect-ratio: 1/1;
      }
      p{
        font-size: 14px;
      }
    }
  }

  .aiprecisionfarming{
    section:not(.sec_farming_cont6) .step_arrow{
      top: auto;
      right: auto;
      left:50%;
      bottom: -32px;
      transform:translateX(-50%);
      width : 45px;
      height: 16px;
    }
    .banner_wrap .txt_wrap{
      width : calc(100% - 32px);
      h3{
        text-indent:-1em;
        margin-left: 1em;
      }
    }
    & .sec_cont2{
      .item_bx{
        padding: 20px 16px;
        border-radius:10px;
        p{min-height: max-content}
        img:not(.step_arrow){margin-top: 20px}
      }
      article{
        padding: 40px 0;
        &>div{padding: 0 20px;}
      }
      .sec_farming_cont5 em{
        position: static;
        transform:none;
      }
      & .sec_farming_cont6{
        h4{
          padding: 4px 16px;
          font-size:18px;
        }
        img{
          width : 100%;
        }
      }
    }
  }

  .aifacilityfarming{
    article[class*="platform_arti"]{
      padding: 40px 16px;
      .item{
        padding: 20px 16px;
        margin-bottom : 0;
        dl{
          margin-top : 10px;
          padding-top : 10px;
        }
        dd{font-size: 14px;}
      }
      h5{font-size: 16px;}
      .col4 .item{
        flex: 1;
        width : 100%;
      }
    }
  }

  .txt_banner{
    padding: 40px 0;
  }

  .robotics{
    article[class*=robotics_arti]{
      padding: 60px 16px;
    }
    .banner2{
      .txt_wrap{position: absolute}
      img{position: relative;}
    }
    .business_compo{
      .sm_row{
        max-width : 100%;
        img{
          width : 100%;
          max-width : 100%;
        }
      }
      .large{
        .img_box{
          width : 100%;
          img{
            height: 100%;
            object-fit: cover;
          }
        }
        .txt_box{
          max-width : 100%;
          padding: 1.875rem;
        }
      }
      .txt_box{
        background-color: #f5f5f5;
        width : 100%;
        padding: 20px 16px;
      }
      .txt_box p{
        font-size: 14px;
      }
      .txt_box strong{
        font-size: 16px;
        margin-bottom : 10px;
      }
    }
    .step_arrow2{width : 220px}
    .prd_img1{ width : 100%}
    .prd_group li{
      max-width : 50%;
      flex:50% !important;
    }
    .prd_group.col2 li{
      max-width : 100%;
      flex: 100% !important;
    }
  }

  .aiconnect{
    .banner2{
      .txt_wrap{position: absolute}
      img{position: relative;}
    }
    article[class*="arti_connect"]{
      padding: 40px 20px;
    }
    .prod-smart ol{
      padding: 0;
    }
    .prod-smart li:nth-of-type(2n+1)>div{
      border-right : none;
    }
  }
  .sect-story{
    padding: 40px 20px 60px;
    .container{padding: 0}
  }


  .aitothefield_txt_img{
    display:block;
    width : 184px;
  }

  .robotics .robotics_arti1 .video_wrap{
    width : 100%;
  }
}
@media screen and (max-width: 575px) {
  .aiprecisionfarming .page-hd {
    height: 180px;
    padding: 20px;
  }
}