@charset "utf-8";

/*main*/
.main_con1{
  float: left;
  box-sizing: border-box;
  width: 100%;
  height: 1000px;
  background: url('../images/img_main.png') no-repeat center / cover;
  position: relative;
  top: 0;
  left: 0;
  z-index: -1;
}
  .main_txt{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--sub-color-1);
  }
    .main_txt > *{
      width: 100%;
      text-align: center;
    }
    .main_txt > span{
      font: 4rem 'PaperlogyBold';
    }
    .main_txt > div{
      font: 1.556rem 'Paperlogy';
    }
      .main_txt div span{
        font-family: 'PaperlogySemiBold';
      }
/*scroll css*/      
.arrow_down {
  z-index: 1;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
  overflow: hidden;
}

.text_scroll_down {
  letter-spacing: 0.5rem;
  font-size: 12px; 
  color: #fff;
  margin-bottom: 8px;
  animation: fadeIn 2s infinite;
  text-align: center;
  padding-left: 14px;
}

.scroll_down_wrap {
  width: 1px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  position: relative;
  z-index: -1;
}

.scroll_down {
  width: 2px;
  height: 25px;
  background-color: rgba(255, 255, 255, 1);
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollDown 2s infinite;
  z-index: 99;
  overflow: hidden;
}
.inner{
    float: left;
    box-sizing: border-box;
    width: 1400px;
}
/*main_con2*/
.main_con2, .main_con3, .main_con4, .main_con5{ 
  float: left;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.main_con2{
  padding: 150px 0;
  background: var(--bg-color-2);
}
.main_con2::before{
  content: '';
  position: absolute;
  width: 217px;
  height: 217px;
  background: url('../images/deco_dna.png') center no-repeat;
  top: -5%;
  left: 5%;
}
  .main_con2 .inner{
    display: flex;
    justify-content: space-between;
    height: 471px;
  }
  .main_con2 .inner > div{
    float: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
  }
  .inner p{
    float: left;
    box-sizing: border-box;
    width: 100%;
    line-height: 26px;
  }

  .btn_viewmore{
    float: left;
    box-sizing: border-box;
    font: 1rem/59px 'PaperlogySemiBold';
    cursor: pointer;
  }
  .btn_viewmore::before{
    content: '';
    float: right;
    box-sizing: border-box;
    width: 49px;
    height: 59px;
    margin: 0 0 5px 5px;
    background: url('../images/btn_viewmore.svg') center no-repeat;
  }
  .btn_viewmore:hover{
    color: var(--main-color);
    transition: 0.35s linear;
  }
    .main_con2 .left .bottom{
      display: flex;
      gap: 27px;
    }
      .main_con2 .left .bottom li{
        width: calc((100% / 3) - 27px);
        cursor: pointer;
      }
    .main_con2 .left .bottom .tit{
      position: relative;
      width: 100%;
      margin-bottom: 14px;
      border-bottom: 1px solid #BBBBBB;
      color: var(--gray-color-4);
      font: 1.222rem/58px 'PaperlogySemiBold';
    }
    .main_con2 .left .bottom .con{
      color: var(--gray-color-4);
      line-height: 27px;
    }
    .main_con2 .left .bottom li.on .tit{
      color: var(--font-color);
    }
    .main_con2 .left .bottom li.on .con{
      color: var(--gray-color-3);
      line-height: 27px;
    }
    .main_con2 .left .bottom li.on .tit::before{
      content: '';
      float: left;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background: var(--main-color);
    }
    .main_con2 .left .bottom li:hover .tit{
      color: var(--font-color);
      transition: 0.35s linear;
    }
    .main_con2 .left .bottom li:hover .con{
      color: var(--gray-color-3);
      transition: 0.35s linear;
    }
  .main_con2 .right div{
    float: left;
    box-sizing: border-box;
    width: 100%;
    height: 471px;
    display: none;
    border-radius: 8px 8px 8px 80px;
  }
  .main_con2 .right div:nth-of-type(1){
    background: url('../images/img_main_aihealth1.png') center no-repeat;
  }
  .main_con2 .right div:nth-of-type(2){
    background: url('../images/img_main_aihealth2.png') center no-repeat;
  }
  .main_con2 .right div:nth-of-type(3){
    background: url('../images/img_main_aihealth3.png') center no-repeat;
  }
/*main_con3*/
.main_con3{
  position: relative;
  padding-bottom: 200px;
  background: #fff;
}
.main_con3::before{
  content: '';
  background: #FFF url('../images/main_3_bg.png') center / cover no-repeat;
  float: left;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 938px;
  z-index: -10;
  opacity: 0.7;
}
  .online_tec_tab{
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 100%;
    padding: 120px 0;
    justify-content: space-between;
    font: 1.111rem 'PaperlogyMedium';
    color: var(--gray-color-3);
  }
    .online_tec_tab li{
      padding-bottom: 15px;
      border-bottom: 1px solid #C9C9C9;
      cursor: pointer;
    }
    .online_tec_tab li.on{
      font-family: 'PaperlogySemiBold';
      border-bottom: 2px solid var(--main-color);
      color: var(--main-color);
      width: 440px;
    }
    .online_tec_tab li:hover{
      font-family: 'PaperlogySemiBold';
      color: var(--main-color);
      transition: linear 0.35s;
    }
  .main_con3 .bottom{
    float: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 456px;
  }
  .online_tec_img{
    float: left;
    box-sizing: border-box;
    width: 524px;
    height: 457px;
    margin: 0 40px 0 50px;
  }
  .online_tec_img span{
    float: left;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: none;
  }
  .online_tec_img span:first-child{
    background: url('../images/online_tec_img1.png') center no-repeat;
  }
  .online_tec_img span:nth-of-type(2){
    background: url('../images/online_tec_img2.png') center no-repeat;
  }
  .online_tec_img span:nth-of-type(3){
    background: url('../images/online_tec_img3.png') center no-repeat;
  }
  .online_tec_con{
    float: left;
    box-sizing: border-box;
    position: relative;
    width: calc(75% - 614px)
  }
    .online_tec_con > *{
      float: left;
      box-sizing: border-box;
      width: 100%;
    }
    .online_tec_con .tit{
      font: 2.222rem 'PaperlogySemiBold';
    }
    .online_tec_con2, .online_tec_con3 .tit{
      font-size: 1.667rem;
    }
    .online_tec_con .con{
      font: 1rem/28px 'Paperlogy';
    }
    .online_tec_con .btn_viewmore{
      width: initial;
    }
  .online_tec_con{
    display: none;
  }
  .online_tec_con1::before{
    content: '01';
    font: 4.833rem 'PaperlogyExtraBold';
    color: #F3F6FE;
    position: absolute;
    top: -100px;
    right: 0;
  }
  .online_tec_con2::before{
    content: '02';
    font: 4.833rem 'PaperlogyExtraBold';
    color: #F3F6FE;
    position: absolute;
    top: -100px;
    right: 0;
  }
  .online_tec_con3::before{
    content: '03';
    font: 4.833rem 'PaperlogyExtraBold';
    color: #F3F6FE;
    position: absolute;
    top: -100px;
    right: 0;
  }
/*main_con4*/
.main_con4{
  height: 914px;
  background: url('../images/main_con4_bg.png') center no-repeat;
}
  .main_con4 .inner > .top, 
  .main_con4 .inner > .top h2{
    color: var(--sub-color-1);
  }
  .main_con4 > .inner > .top h3::before{
    display: none;
  }
  .main_con4 > .inner > .top h3{
    padding: 0;
  }
  .main_con4 .inner{
    position: relative;
  }
    .main_con4 .inner > .top p{
      position: absolute;
      width: initial;
      top: 52px;
      right: 0;
    }
    .main_con4 .inner .bottom{
      float: left;
      box-sizing: border-box;
      width: 100%;
      padding: 29px 36px;
      background: var(--sub-color-1);
      border-radius: 15px;
    }
    .main_con4 .bottom > *{
      float: left;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 50%;
      height: 471px;
    }
      .main_con4 .bottom .right{
        background: url('../images/main_con4_right.png') center no-repeat;
        image-rendering: pixelated;
        border-radius: 15px;
      }
    .main_con4 .bottom h3{
      font: 2.222rem 'PaperlogySemiBold';
    }
.main_con5{
  background: var(--sub-color-1);
  padding-bottom: 200px;
}
  .main_con5 .con_wrap{
    float: left;
    box-sizing: border-box;
    width: 100%;
    height: 472px;
    display: flex;
    gap: 30px;
  }
  .main_con5 h2{
    text-align: left;
  }
  .main_con5 .left{
    float: left;
    box-sizing: border-box;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .main_con5 .right{
    float: left;
    box-sizing: border-box;
    width: calc(60% - 30px);
    width: 1061px;
    overflow: hidden;
  }
  .main_con5 h3{
    font: 2.222rem 'PaperlogySemiBold';
    padding: 0;
  }
  .main_con5 h3::before{
    display: none;
  }
  .main_con5 .main_news_btn{
    display: flex;
    gap: 15px;
  }
    .main_con5 .main_news_btn > span{
      float: left;    
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border-radius: 100px;
      border: 1px solid var(--gray-color-4); 
      color: var(--gray-color-3);
      cursor: pointer;
    }
    .main_con5 .main_news_btn .prev{
      background: url('../images/btn_main_prev.svg') center no-repeat;
    }
    .main_con5 .main_news_btn .next{
      background: url('../images/btn_main_next.svg') center no-repeat;
    }
    .main_con5 .main_news_btn .prev:hover{
      background: url('../images/btn_main_prev_on.svg') center no-repeat;
      transition: linear 0.35s;
    }
    .main_con5 .main_news_btn .next:hover{
      background: url('../images/btn_main_next_on.svg') center no-repeat;
      transition: linear 0.35s;
    }
    .main_con5 .main_news_btn > span:hover{
      border: 1px solid var(--font-color);
      transition: linear 0.35s;
    }
  .slide_wrap{
    float: left;    
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
  }
    .slide_wrap li{
      float: left;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 408px;
      height: 100%;
      padding: 35px;
      background: #F3F3F3;
      border-radius: 15px;
      cursor: pointer;
    }
      .slide_wrap li .notice{
        padding: 5px 10px;
        border-radius: 14px;
        background: #5C88F2;
        color: var(--sub-color-1);
        font: 1rem 'PaperlogySemiBold';
      }
      .slide_wrap li .tit{
        float: left;
        box-sizing: border-box;
        width: 100%;
        font: 1.444rem 'PaperlogySemiBold'; 
        word-break: auto-phrase;
      }
      .slide_wrap li .con{
        float: left;
        box-sizing: border-box;
        width: 100%;
        font: 1rem/27px 'Paperlogy';
        color: var(--gray-color-3);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;

      }
      .slide_wrap li .date{
        float: left;
        box-sizing: border-box;
        font: 1rem 'PaperlogyBold';
        color: var(--gray-color-3);
      }
      .slide_wrap .btn_slide_go{
        float: left;
        box-sizing: border-box;
        font: 1rem 'PaperlogySemiBold';
        color: var(--main-color);
      }
    .slide_wrap li:hover, 
    .slide_wrap li.on{
      background: #2B53B4;
      color: var(--sub-color-1);
      transition: 0.35s linear;
    }
    .slide_wrap li:hover .notice, 
    .slide_wrap li.on .notice{
      background: #EDF2FF;
      color: var(--main-color);
      transition: 0.35s linear;
    }
    .slide_wrap li:hover .con, 
    .slide_wrap li:hover .date, 
    .slide_wrap li:hover .btn_slide_go,   
    .slide_wrap li.on .con, 
    .slide_wrap li.on .date, 
    .slide_wrap li.on .btn_slide_go{
      color: var(--sub-color-1);
      transition: 0.35s linear;
    }

/* 부모 컨테이너 */
.swiper-container-wrapper {
  position: relative;
  overflow: hidden;
  width: 100vw; /* 화면 너비에 맞춤 */
  max-width: 1920px; /* 최대 너비 설정 (옵션) */
  margin: 0 auto;
}

/* 슬라이드 컨테이너 */
.swiper-container {
  position: relative;
  width: 100%;
}

/* 슬라이드 */
.swiper-slide {
  width: calc(25% - 20px); /* 4개의 슬라이드가 한 줄에 나타나도록 설정 */
  min-width: 408px; /* 최소 너비 */
  overflow: hidden;
}

/*메인화면 나타나는 css 추가*/
.hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.show {
  opacity: 1;
  transform: translateY(0);
}

/*스크롤 프레임*/

@keyframes scrollDown {
  0% {
    transform: translate(-50%, 5px);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 20px);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, 35px);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/*AI 헬스케어 모델 기술지원*/
.sub02 {
  background: url(../images/banner02.png)  no-repeat center / cover;
}
.supoprt_cont, 
.support_how{
  display: flex ;
  flex-direction: column;
  align-items: center;
  float: left;
  box-sizing: border-box;
  width: 100%;
  gap: 40px;
}
  .support_wrap{
    float: left;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    gap: 20px;
  }
    .support_wrap > div{
      float: left;
      box-sizing: border-box;
      width: calc(50% - 10px);
      min-height: 371px;
      padding: 43px 56px;
      border-radius: 8px;
      color: var(--sub-color-1);
    }
    .support_wrap .left{
      background: var(--main-color);
    }
    .support_wrap .right{
      background: var(--sub-color-2);
    }
      .support_wrap .left .icon{
        background: url('../images/icon_support01.png') center no-repeat;
        height: 100px;
      }
      .support_wrap .right .icon{
        background: url('../images/icon_support02.png') center no-repeat;
        height: 100px;
      }
      .support_wrap > div > span{
        float: left;
        box-sizing: border-box;
        width: 100%;
        text-align: center;
      }
      .support_wrap > div .tit{
        margin: 40px 0 30px 0;
        font: 1.333rem 'PaperlogySemiBold';
      }
  .support_how ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    float: left;
    box-sizing: border-box;
    width: 100%;
    padding: 50px 40px;
    border-radius: 8px;
    border: 1px solid var(--gray-color-1);
    box-shadow: 3px 4px 4px 0px rgba(51, 106, 239, 0.15);
  }
    .support_how li.how_con{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 17px;
    }
    .support_how .how_arrow{
      float: left;
      width: 15px;
      height: 15px;
      background: url('../images/how_arrow.svg') center no-repeat;
    }
.support_who{
  float: left;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 40px;
}
  .support_who > div{
    float: left;
    box-sizing: border-box;
    width: calc(50% - 20px);
  }
    .support_who .left .tit{
      padding: 15px 0;
      background: #DFEDFF;
      border: 1px solid var(--point1);
      color: var(--main-color);
      border-radius: 100px;
      text-align: center;
    }
    .support_who .right .tit{
      padding: 15px 0;
      background: #EFF3FE;
      border: 1px solid #BECDF8;
      color: var(--sub-color-2);
      border-radius: 100px;
      text-align: center;
    }
    .support_who .tit{
      font: 1.222rem 'PaperlogyBold';
    }
    .support_who > div *{
      float: left;
      box-sizing: border-box;
      width: 100%;
    }
    .support_who .con{
     /* height: 100%;
      max-height: 150px;*/
      padding: 26px 40px;
      border-radius: 8px;
      box-shadow: 3px 4px 4px 0px rgba(51, 106, 239, 0.15);
      font: 1.111rem 'PaperlogyMedium';
    }
    .support_who .left .con{
      border: 1px solid var(--point1);
    }
    .support_who .right .con{
      border: 1px solid #BECDF8;
    }
.btn_alone .btn_right{
  max-width: 378px;
}