/**********************************************************************************************************************
 * 메인페이지
 ***********************************************************************************************************************/
#main{
  width:100%;
  .box {
    position: relative;
    overflow: hidden;
    .box-link{
      width:100%;
      height:100%;
      position:absolute;
      left:0;
      top:0;
    }
  }

  .main-top {
    @include display-flex();
    align-items: stretch;
    justify-content: space-between;
    @include display-xs(){
      flex-direction: column;
    }
    .line-01 {
      width:REM(169px);
      .label-wrap {
        display: none;
      }
      @include display-xs(){
        .label-wrap {
          display: initial;
        }
        #nav {
          .menu-list,
          .family-list {
            display: none;
          }
        }
      }
    }
    .line-02 {
      width:REM(416px);
      @include display-flex();
      flex-direction: column;
      .top{
        border:REM(1px) solid #C8C8C8FF;
        border-radius: REM(15px);
        width:REM(417px);
        height:REM(234px);
        overflow: hidden;
        background-size: cover;
        position:relative;
      }
      .bottom {
        margin-top:REM(12px);
        @include display-flex();
        justify-content: space-between;
        align-items: stretch;
        .left {
          position: relative;
          border-radius: REM(15px);
          width: REM(229px);
          height: REM(229px);
          background-color:#33CC99FF;
          overflow:hidden;
          border:REM(1px) solid #C8C8C8FF;
          .link {
            width: 100%;
            height:100%;
            padding:REM(15px);
            @include display-flex();
            align-items: flex-start;
            flex-direction: column;
            .title {
              font-size:REM(36.83px);
              font-weight:$font-weight-extra-bold;
              line-height:1.15;
              color:#fff;
              font-family: $font-family-base;
              padding-bottom:REM(28px);
              position:relative;
              &:before{
                content:"";
                width:REM(66px);
                height:REM(5px);
                background-color:#fff;
                position:absolute;
                left:0;
                bottom:REM(12px);
              }
            }
            .date{
              display: block;
              margin-bottom:REM(12px);
              > dd {
                font-size:REM(18.25px);
                color:#fff;
              }
            }
            .info {
              padding:0;
              li {
                font-size:REM(15.23px);
                color:#fff;
                margin-bottom:REM(5px);
                line-height: 1;
              }
            }
          }
        }
        .right{
          .box {
            border:REM(1px) solid #C8C8C8FF;
            border-radius: REM(15px);
            position:relative;
            background-size:cover;
            overflow:hidden;
            &.top{
              width: REM(179px);
              height: REM(107px);
              overflow: hidden;
            }
            &.bottom{
              width: REM(179px);
              height: REM(111px);
              overflow: hidden;
            }
          }
        }
      }
      @include display-xs(){
        width:100%;
        position:relative;
        .top {
          width:100%;
          height:REM(368px  / 3);
          border-radius: REM(20px / 3);
        }
        .bottom {
          flex-direction: row-reverse;
          margin-top:REM(20px / 3);
          background-position: center;
          .left {
            border-radius: REM(20px / 3);
            width: REM(310px / 3);
            height: REM(367px / 3);
            border:REM(1px) solid #C8C8C8FF;
            .link {
              padding:REM(20px / 3);
              @include display-flex();
              align-items: flex-start;
              flex-direction: column;
              .title {
                font-size:REM(53px / 3);
                font-family: $font-family-base;
                padding-bottom:REM(50px / 3);
                position:relative;
                &:before{
                  width:REM(98px / 3);
                  height:REM(10px / 3);
                  background-color:#fff;
                  bottom:REM(24px / 3);
                }
              }
              .date{
                margin-bottom:REM(15px / 3);
                > dd {
                  font-size:REM(27px / 3);
                }
              }
              .info {
                li {
                  font-size:REM(22px / 3);
                  margin-bottom:REM(10px / 3);
                }
              }
            }
          }
          .right{
            .box {
              border-radius: REM(20px / 3);
              &.top{
                width: REM(335px / 3);
                height: REM(235px / 3);
                overflow: hidden;
                position:absolute;
                right:0;
                top:REM(775px / 3);
              }
              &.bottom{
                width: REM(318px / 3);
                height: REM(367px / 3);
                overflow: hidden;
                margin-top:0;
              }
            }
          }
        }
      }
    }
    .line-03 {
      width:REM(191px);
      @include display-flex();
      flex-direction: column;
      .top {
        border:REM(1px) solid #C8C8C8FF;
        border-radius: REM(15px);
        width: REM(191px);
        height: REM(351px);
        overflow: hidden;
        background-size: cover;
        background-position: center center;
      }
      .bottom {
        border-radius: REM(15px);
        border:REM(1px) solid #C8C8C8FF;
        width: REM(192px);
        height: REM(112px);
        background-color:#FFB400FF;
        margin-top:REM(12px);
        .link {
          @include display-flex();
          flex-direction: column;
          padding:REM(10px) REM(10px);
        }
        .title{
          font-size:REM(18px);
          font-weight:$font-weight-extra-bold;
          line-height:1.15;
          color:#fff;
          font-family: $font-family-base;
          padding-bottom:REM(28px);
          position:relative;
          letter-spacing: REM(-1px);
          &:before{
            content:"";
            width:REM(66px);
            height:REM(5px);
            background-color:#fff;
            position:absolute;
            left:0;
            bottom:REM(12px);
          }
        }
        .sub-text{
          font-size:REM(18.36px);
          line-height: REM(21px);
          width:100%;
          height: REM(42px);
          min-height:REM(42px);
          color:#fff;
          word-wrap: break-word;
          word-break: keep-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          min-width: 0;
        }
      }
      @include display-xs(){
        width:100%;
        margin-top:REM(20px / 3);
        flex-direction: row;
        justify-content: space-between;
        .top {
          border-radius: REM(20px / 3);
          width: REM(300px / 3);
          height: REM(530px / 3);
        }
        .bottom {
          border-radius: REM(20px / 3);
          width: REM(335px / 3);
          height: REM(276px / 3);
          margin-top:REM(20px / 3);
          align-self: flex-end;
          box-sizing: border-box;
          .link {
            padding:REM(20px / 3);
          }
          .title{
            font-size:REM(51px  / 3);
            padding-bottom:REM(56px / 3);
            word-wrap: break-word;
            word-break: keep-all;

            &:before{
              content:"";
              width:REM(107px / 3);
              height:REM(7px / 3);
              background-color:#fff;
              position:absolute;
              left:0;
              bottom:REM(24px / 3);
            }
          }
          .sub-text{
            font-size:REM(22px / 3);
            line-height: REM(30px / 3);
            height: REM(60px / 3);
            min-height:REM(60px / 3);
            color:#fff;
          }
        }
      }
    }
  }
  .main-center {
    margin:REM(15px) 0 REM(50px) 0;
    .line-banner{
      border:REM(1px) solid #C8C8C8FF;
      width:100%;

      border-radius: REM(12px);
      background-position: center center;
      overflow: hidden;
      background-size: cover;
      &.pc {
        height:REM(71px);
      }
      &.mobile {
        display: none;
      }

    }
    @include display-xs(){
      margin:REM(20px / 3) 0;
      .line-banner{
        width:100%;
        border-radius: REM(20px / 3);
        background-size: contain;
        &.pc {
          display: none;
        }
        &.mobile {
          display: block;
          height:REM(295px / 3);
          background-size: cover;
        }
      }
    }
  }
  .family-list.mobile {
    display: none;
    @include display-xs(){
      @include display-flex();
      justify-content: center;
      width:100%;
      padding:REM(30px / 3) 0;
      border-radius: REM(20px / 3);
      position:relative;
      background-color:#fff;
      border:REM(1px) solid #cccccc;
      margin-bottom:REM(80px / 3);
      .item{
        a {
          @include display-flex();
          align-items: center;
          justify-content: space-between;
          position:relative;
          padding-left:REM(55px / 3);
          font-size:REM(27px / 3);
          height:REM(40px / 3);
          line-height:1;
          font-weight:700;
          &:after{
            content:"";
            position:absolute;
            left:0;
            top:50%;
            transform: translate(0, -50%);
            background-size: contain;
            width:REM(45px / 3);
            height:REM(45px / 3);
          }
        }
        &.tv {
          > a {
            &:after{
              @include background-image('../images/common/tv.png')
            }
          }
        }
        &.instagram {
          margin-left:REM(50px / 3);
          > a {
            &:after{
              @include background-image('../images/common/instagram.png')
            }
          }
        }
        &.blog {
          margin-left:REM(50px / 3);
          > a {
            &:after{
              @include background-image('../images/common/blog.png')
            }
          }
        }
      }
    }
  }
  .main-bottom {
    @include display-flex();
    justify-content: space-between;
    position:relative;
    z-index:1;
    @include display-xs(){
      flex-direction: column;
    }
    .title-box {
      @include display-flex();
      align-items: center;
      justify-content: space-between;
      border-bottom:REM(1px) solid #02205b;
      padding-bottom:REM(10px);
      margin-bottom:REM(10px);
      @include display-xs(){
        justify-content: flex-end;
        padding-bottom:REM(20px / 3);
        margin-bottom:0;
      }
    }
    .slide-title {
      font-size:REM(20px);
      line-height:1;
      color:#02205b;
      @include display-xs(){
        display: none;
      }
    }
    .control-box {
      @include display-flex();
      align-items: center;
      justify-content: space-between;
      .btn {
        background-color:#fff;
        width:REM(24px);
        height:REM(24px);
        border-radius: REM(24px);
        border:none;
        @include display-flex();
        align-items: center;
        justify-content: center;
        margin-left:REM(15px);
        line-height:1;
        padding:0;
        color:#02205b;
        &.btn-right{
          margin-left:REM(5px);
        }
        .icon {
          font-size:REM(24px);
        }
        &:active,
        &:hover,
        &:focus,
        &:focus-visible,
        &:focus-within{
          width:100%;
          outline: none;
          background-color: #d5d8e1;
          cursor: pointer;
          overflow:hidden;
        }
      }
      .swiper-pagination {
        position:relative;
        left:0;
        transform: translate(0);
        height:REM(24px);
        bottom: 0;
        @include display-flex();
        align-items: center;
        overflow: initial;
      }
      .swiper-pagination-bullet{
        background-color:#8b93ae;
        width:REM(7px);
        height:REM(7px);
        &.swiper-pagination-bullet-active {
          width:REM(18px);
          border-radius: REM(9px);
          background-color:#02205b;
        }
      }
      @include display-xs(){
        .btn {
          width:REM(42px / 3);
          height:REM(42px / 3);
          border-radius: REM(42px / 3);
          margin-left:REM(26px / 3);
          &.btn-right{
            margin-left:REM(15px / 3);
          }
          .icon {
            font-size:REM(38px / 3);
          }
        }
        .swiper-pagination {
          height:REM(42px / 3);
        }
        .swiper-pagination-bullet{
          width:REM(12px / 3);
          height:REM(12px / 3);
          &.swiper-pagination-bullet-active {
            width:REM(28px / 3);
            border-radius: REM(14px / 3);
          }
        }
      }
    }
    .left-slide{
      width:REM(416px);
      .swiper-container {
        width:REM(416px);
        height:REM(375px);
        overflow:hidden;
      }
      .recent-list {
        .swiper-slide {
          padding:REM(12px) 0;
          height: REM(78px) !important;
          border-bottom:REM(1px) solid #26356b;
          box-sizing: border-box;
          .link {
            @include display-flex();
            width: 100%;
            position:relative;
            min-width: 0;
            &:after{
              content:"\e5e1";
              font-family: 'Material Symbols Outlined';
              font-weight: normal;
              font-style: normal;
              line-height: 1;
              letter-spacing: normal;
              text-transform: none;
              display: inline-block;
              white-space: nowrap;
              word-wrap: normal;
              direction: ltr;
              -webkit-font-feature-settings: 'liga';
              -webkit-font-smoothing: antialiased;
              font-size:REM(30px);
              position:absolute;
              right:0;
              font-weight:200;
              top:50%;
              transform: translate(0,-50%);
            }
          }
          .date{
            font-size:REM(12.75px);
            font-weight:$font-weight-semi-bold;
            line-height:1;
            color:#02205b;
            flex-shrink: 0;
            .big{
              display: block;
              font-size:REM(30px);
              font-weight:$font-weight-bold;
              text-align: center;
              margin-top:REM(5px);
            }
          }
          .notice-text {
            margin-left:REM(15px);
            @include display-flex();
            justify-content: space-evenly;
            flex-direction: column;
            color:#02205b;
            flex:1;
            min-width:0;

            .label{
              display: block;
              font-size:REM(12.75px);
              line-height:1;
              color:#02205b;

              a {
                color:inherit;
              }
            }
            .title{
              width:100%;
              padding-right:REM(50px);
              font-size:REM(15.75px);
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              margin-bottom:0;
              margin-top:REM(5px);
              a {
                color:inherit;
              }
            }
          }
        }
      }

      @include display-xs(){
        width:100%;
        .swiper-container {
          width:100%;
          height:REM(624px / 3);
          overflow:hidden;
        }
        .recent-list {
          .swiper-slide {
            padding:REM(25px / 3) 0;
            height: REM(126px / 3) !important;
            .link {
              @include display-flex();
              width: 100%;
              position:relative;
              &:after{
                font-size:REM(60px / 3);
              }
            }
            .date{
              font-size:REM(21.73px / 3);
              .big{
                font-size:REM(54.32px / 3);
              }
            }
            .notice-text {

              margin-left:REM(35px / 3);
              .label{
                font-size:REM(24px / 3);
              }
              .title{
                font-size:REM(30px / 3);
                padding-right:REM(50px / 3);
              }
            }
          }
        }
      }
    }
    .right-slide{
      width:REM(360px);
      overflow: hidden;
      .swiper-slide {
        width:REM(175px) !important;
        height:REM(315px);
        border-radius: REM(15px);
        border:none;
        background-size: cover;
        overflow: hidden;
        &.swiper-slide{
          margin-right:REM(8px);
        }
        &:last-child {
          margin-right:0;
        }
      }
      .swiper-slide.full {
        width:100% !important;
        height:REM(195px);
        border-radius: REM(20px);
      }
      .btn-more{
        display: none;
      }
      @include display-xs(){
        width:100%;
        .title-box {
          display: none;
        }
        .swiper-slide {
          width:REM(317px / 3) !important;
          height:REM(584px / 3);
          border-radius: REM(20px / 3);
          &.swiper-slide{
            margin-right:REM(13px / 3);
          }
          &:last-child {
            margin-right:0;
          }
        }
        .swiper-slide.full {
          width:100% !important;
          height:REM(390px / 3);
          border-radius: REM(45px / 3);
        }
        .btn-more {
          display: block;
          font-size:REM(27px / 3);
          border:REM(1px / 3) solid #7D7D7DFF;
          color:#7D7D7DFF;
          width: 100%;
          height: REM(79px / 3);
          margin:REM(37px / 3) 0 REM(57px / 3) 0;

        }
      }
    }
  }
  @include display-xs(){
    #nav .search-box .search-form {
      .input {
        padding:REM(5px / 3) REM(70px / 3) REM(5px / 3) REM(45px / 3);
      }
      .label-wrap {
        display: none;
      }
    }

  }
}