:root {
    --submit-color: #1d73b9; /*  005092  */
    --primary-color: #1d73b9; /*  005092  */
    --primary-color2: #1d73b9; /*  005092  */

    --BODY_BACK: #F5F6F7;
    --BODY_FONT: #06131D;
    --TOP_BACK: #123c73; 
    --TOP_FONT: #bdc3c7; 
    --CODE: #bdc3c7; 
    --NAVI_ON_BACK: transparent;
    --NAVI_ON_FONT: #3a3a3a;


    --AI_BODY_BACK: #12417e;
}

@media screen {
}

@media print {
}
html{
    font-size: 10pt !important;  
    font-family: 'Nanum Gothic', Arial, sans-serif !important;
}
@media screen and (max-width: 767.98px),
screen\9 {
}



  
  body {
      -ms-overflow-style: none;
      font-family: 'Nanum Gothic', Arial, sans-serif;
      margin: 20px;
      background-color: #efefef;
      color: var(--BODY_FONT);;
  }
  
  #menu li a{
    color: #9aa3ad;
    text-decoration: none !important;
    font-size: 1.4rem !important;
  }
 
  a:hover {
    text-decoration: underline;
  }
  
  .displayNone{
    display: none !important;
  }
  
  .wrapper {
    font-size: 15px !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .content-top   {
    background-image:  url("/img/backimg01.png"), linear-gradient(90deg, rgba(6,17,26,1) 0%, rgba(6,17,26,1) 90%, rgba(19,52,78,1) 100%);  
    background-repeat: no-repeat;
    height: 400px;
  }
  .content-wrapper {
    flex: 1;
    justify-items: center;
    /*background-image:linear-gradient(180deg, #12417e 30%, #E7F3FB 60%, #ffffff 70%);*/
    
  }
  .content-wrapper .content-body .box{
    display: flex;
    flex-direction: column;
    max-width: 1300px;
    border-radius: 50px;
    /*border-bottom: #ded7d7 1px solid;*/
    box-shadow: 5px 5px 5px rgba(199, 199, 199, 0.5);
    background-color: rgba(255,255,255,1.0);
    margin: 1rem 1rem 3rem 1rem;
    padding: 5rem;
  
  }
  .content-wrapper .content-body .box > .title {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 70px;
    justify-content: space-between;
    padding-left: 10px;
  }
  
  #plant-content > .title {
    color: #127a7e;/* rgb(249, 106, 25); */
    font-weight: 600;;
  }
  #ai-content > .title {
    color: #127e53;/*rgb(25, 156, 249);*/
    font-weight: 600;;
  }
  #software-content > .title {
    color: #7a7e12;/* rgb(25, 156, 249); rgb(166 221 87); */
    font-weight: 600;;
  }
  #contact-content > .title {
    color: #123c73;/* rgb(249, 106, 25); */
    font-weight: 600;;
  }
  .content-wrapper .content-body .box > .content{
    display: flex;
    flex-direction: row;
    word-break: auto-phrase;
    margin: 10px;
  }
  
  
  footer {
    background-color: var(--TOP_BACK);
    color: var(--TOP_FONT);
    text-align: center;
    padding: 5px;
    position: relative;
    bottom: 0;
    width: 100%;
  }
  .topMenu {
    display: flex;
    height: 120px;
    background-color: #12417e !important; /* 158dba */
    color: #333;
    padding: 0px 20px;
  }
  .topMenu > div 
  {
    max-width: 1300px;
  }
  .toplogo {
    color: #000;
  }
  
  .search-bar {
      display: flex;
      justify-content: left;
      width: 50%;
  }
  
  .search-bar input {
      /*height: 45px;*/
      padding: 10px 10px 10px 30px;
      width: 80%;
      max-width: 800px;
      border: none;
      background-color: #ededed;
      border-radius: 25px 0 0 25px;
      outline: none;
      font-size: 1.4rem;
      color: #333;
  }
  
  .search-bar button {
      height: 45px;
      padding: 10px 20px;
      border: none;
      background-color: #ededed;
      border-radius: 0 25px 25px 0;
      cursor: pointer;
      font-size: 1.4rem;
  }
  
  
  
  .mainTitleBtn{
    font-size: 1rem;
    color: #fff;
    background-color: #0d223f;
    border-radius: 5px;
    align-content: center;
    text-align: center;
    width: 70px;
    height: 30px;
  }
  
  .devCode {
    font-size: 1rem;
    background-color: #333;
    padding: 20px;
    color: var(--CODE); 
    overflow: auto;
    height: 400px;        
    width: 50%;
    white-space: pre;
  }
  
  /* plant start */
  #plant-content > .content .description{
    font-size: 1.3rem;
    text-align: left;
  }
  .plantArchi,.plantArchi2{
    background-color: #f0f0f0;
    display: flex;           
    flex-direction: row;
    justify-content: center;
    border: #c7c7c7 1px solid;
  }
  .plantArchi .area1{
    display: flex;           
    flex-direction: column;
    justify-content: center;
    width: 50%;
    margin: 20px;
  }
  .plantArchi2 .area1{
    display: flex;           
    flex-direction: column;
    justify-content: center;
    width: 70%;
    margin: 10px;
  }
  .plantArchi .area1 .body{
    display: flex;           
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  .plantArchi .area1 .head{
    text-align: center;
  }
  .plantArchi .area1 .body .container ,
  .plantArchi .area1 .body .unit ,
  .plantArchi .area1 .body .multi 
  {
    width: 35%;
    margin: 1px;
  }
  .plantArchi .area1 .container .title {
    background-image: linear-gradient(90deg, #e3e3e3 60%, #adadad 100%);
    color: #30A5DA;
    margin: 10px;
    border-radius: 40px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    border-left: #30A5DA 10px solid;
  }
  .plantArchi .area1 .unit .title {
    background-image: linear-gradient(90deg, #e3e3e3 60%, #adadad 100%);
    color: #8030D1;
    margin: 10px;
    border-radius: 40px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    border-left: #8030D1 10px solid;
  }
  .plantArchi .area1 .multi .title {
    background-image: linear-gradient(90deg, #e3e3e3 60%, #adadad 100%);
    color: #9cc115;
    margin: 10px;
    border-radius: 40px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    border-left: #b0d330 10px solid;
  }
  .plantArchi .area1 .body .desc {
    margin: 10px;
    border-radius: 10px;
    justify-content: start;
    align-items: start;
    padding-left: 20px;
    font-size: 1.3rem;
  }
  .plantArchi .area1 .container .desc {
    color: #73a20e;
  }
  .plantArchi .area1 .unit .desc {
    color: #39104f;
  }
  .plantArchi .area1 .multi .desc {
    color: #10344f;
  }
  .plantArchi .area1 .container .desc .txt{
    padding-left: 10px;
    border-left: #89BF11 1px solid;
  }
  .plantArchi .area1 .unit .desc .txt{
    padding-left: 10px;
    border-left: #39104f 1px solid;
  }
  .plantArchi .area1 .multi .desc .txt{
    padding-left: 10px;
    border-left: #10344f 1px solid;
  }
  /* plant end */
  
  /* AI start */
  #ai-content > .content,
  #ai-content .segmentation,
  #ai-content .classification
  {
    width: 99%;
    margin-bottom: 20px;
  }
  
  #ai-content > .content{
    background-color: #fff !important;
    border: #c7c7c7 0px solid;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-direction: column;
  }
  #ai-content > .content .img{
    border:20px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #cde9d3 100%);
    border-image-slice: 1;
  }
  #ai-content > .content .description{
    font-size: 1.3rem;
    width: 100%;
    padding: 15px;
  }
  .segmentation .head,
  .classification .head,
  .machinelearning .head
  {
    display: flex;
    justify-content: center;
  }
  .segmentation .head div,
  .classification .head div,
  .machinelearning .head div
  {
    width: 300px;
    text-align: center;
    background-color: #354e76;
    font-size: 1.4rem;
    color: #fff;
    padding: 10px 30px 10px 30px;
    border-radius: 50px;
    margin-top: 20px;
  }
  .segmentation .body,
  .classification .body
  {
    display: flex;           
    flex-direction: column;
    justify-content: center;
    width: 100%;
    border: #c7c7c7 0px solid;
    margin: 10px;
  }
  .segmentation .body .img ,
  .classification .body .img 
  {
    border:20px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #cde9d3 100%);
    border-image-slice: 1;
  }
  .segmentation .body .desc,
  .classification .body .desc
  {
    font-size: 1.3rem;
    background-color: #fff;
    word-break: auto-phrase;
    width: 100%;
    padding: 20px 15px 0px 15px;
  }
  .segmentation .body .img,
  .classification .body .img
  {
    display: flex;           
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  .classification .body .img
  {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .segmentation .body .footh ,
  .classification .body .footh ,
  .machinelearning .body .footh {
    justify-items: end;
  }
  .segmentation .body .footh div,
  .classification .body .footh div,
  .machinelearning .body .footh div{
    justify-items: end;
    width: 200px;
    background-color: rgb(25, 156, 249);;
    color: #fff;
    text-align: center;
  }
  .segmentation .body .foot div,
  .classification .body .foot div,
  .machinelearning .body .foot div{
    width: 200px;
    background-color: rgb(189, 189, 189);;
    color: #fff;
    text-align: center;
  }
  
  /* AI end */
  
  /* software start */
  #software-content .ai .head ,
  #software-content .lis .head,
  #software-content .gene .head,
  #software-content .mis .head,
  #software-content .mlt .head
  {
    display: flex;
    justify-content: center;
  }
  #software-content .ai .head div,
  #software-content .lis .head div,
  #software-content .gene .head div,
  #software-content .mis .head div,
  #software-content .mlt .head div
  {
    width: 100%;
    text-align: center;
    background-color: #fff;
    font-size: 2.2rem;
    font-weight: 600;
    color: #354e76;
    padding: 10px 30px 10px 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin-top: 30px;
  }
  
  #software-content .ai .body,
  #software-content .lis .body,
  #software-content .gene .body,
  #software-content .mis .body
  {
    display: flex;
    flex-direction: column;
  }
  #software-content .ai .head div,
  #software-content .lis .head div,
  #software-content .gene .head div,
  #software-content .mis .head div
  {
    margin: 50px 10px 0px 10px;
  }
  #software-content .ai .body .img,
  #software-content .lis .body .img,
  #software-content .gene .body .img,
  #software-content .mis .body .img
  {
    display: flex;
    flex-direction: row;
  }
  #software-content .ai .body .desc div {
    margin: 0px 10px 10px 10px;
    border:20px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  #software-content .ai .body .img div {
    margin: 10px 10px 10px 10px;
    border:15px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  #software-content .lis .body .desc div {
    margin: 0px 10px 10px 10px;
    border:20px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  #software-content .lis .body .img div {
    margin: 10px 10px 10px 10px;
    border:15px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  #software-content .gene .body .desc div {
    margin: 0px 10px 10px 10px;
    border:20px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  #software-content .gene .body .img div {
    margin: 10px 10px 10px 10px;
    border:15px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  #software-content .mis .body .desc div {
    margin: 0px 10px 10px 10px;
    border:20px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  #software-content .mis .body .img div {
    margin: 10px 10px 10px 10px;
    border:15px solid;
    border-image:linear-gradient(90deg, #e7e7e7 0%, #e9e4cd 100%);
    border-image-slice: 1;
  }
  /* software end */
  
  
  
   /* 반응형 처리 */
   @media (max-width: 1024px) {
      .search-bar {
          display: flex;
          justify-content: left;
          width: 280px;
      }
      .plantArchi{   
        flex-direction: column;      
      }
      .plantArchi .area1{
        width: 95%;
      }
      .devCode {
        font-size: 0.6rem;
        background-color: #333;
        padding: 20px;
        color: var(--CODE); 
        overflow: auto;
        height: 400px;        
        width: 100%;
        white-space: pre-wrap;
      }
      .plantArchi .area1 .container .title ,
      .plantArchi .area1 .unit .title ,
      .plantArchi .area1 .multi .title 
      {
        margin: 1px;
        border-radius: 10px;
        height: 80px;
        font-size: 0.8rem;
      }
      .content-wrapper .content-body .segmentation .body .desc,
      .content-wrapper .content-body .classification .body .desc
      {
          width: 100%;
      }
  
      .content-wrapper .content-body .box > .content ,
      .content-wrapper .content-body .segmentation .body ,
      .content-wrapper .content-body .classification .body 
      {
          display: flex;
          flex-direction: column;
      }
  }
   @media (max-width: 768px) {
    #menu{
      display: flex;
    }
      .topMenu a {
          width: 3rem;
      }
      .topMenu #menu-toggle {
          font-size: 1.5rem;
      }
      .topMenu a svg > g:nth-child(2) {
          /*display: none;*/
      }
      #mobile-menu {
          position: fixed; /* 화면 전체를 기준으로 메뉴 표시 */
          top: 50px; /* 헤더 아래에 표시되도록 조정 */
          left: 0;
          width: 100vw; /* 전체 화면 너비 */
          max-height: 90vh; /* 화면을 넘어가지 않도록 */
          overflow-y: auto; /* 스크롤 가능하도록 */
        }
  }