@charset "UTF-8";

/* main_visual */
.main_visual {
  overflow: hidden;
  position: relative;
  z-index: 15;
  .owl-item {
    img {
      width: auto;
    }  
    .item {
      height: 100vh;      
      background-position: top center;
      .text {
        position: absolute;
        margin-top: 29rem;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-content: center;
        text-align: center;
        gap: 4rem;
        left: 50%;
        margin-left: -20rem;
        text-align: right;
        
        * {
          color: #fff;
        }
        h2{
          font-size: 7rem;
          line-height: 1.2;
          
          span{
            color: var(--color_sub3);
            font-weight: 600;
          }
        }
        p{
          font-size: 2rem;
          line-height: 1.4;
          margin: 0;
        }        
        ul{
          display: flex;
          gap: 2rem;
          font-size: 2rem;
          justify-content: flex-end;

          li{
            background: var(--fff);
            color: var(--color_sub2);
            padding: .5rem 2rem;
            border-radius: 2em;
            margin-top: 2rem;
            font-weight: 600;
          }
        }

      }
      .img {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        >div {
          background-position: top center;
          background-size: cover;
          transform: scale(1.2);
          -webkit-transition: all 5s;
          -moz-transition: all 5s;
          -ms-transition: all 5s;
          -o-transition: all 5s;
          transition: all 5s;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }        
      }
      &.visual_2{
        .text{
          right: 50%;
          margin-right: -20rem;
          text-align: left;
          margin-left: 0;
          left: auto;
        }
      }
    }
    &.active{
      .item {
        background-position: top center;
        .text {
          * {
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
          }
          h2{
            animation-delay: .3s;
            font-weight: 200;
          }
          p{
            animation-delay: .8s;
          }
          ul{
            animation-delay: 1.6s;
          }
        }
        .img{
          >div {
          transform: scale(1);
          z-index: 10;
        }
      }

    }
    }
  }
  
  /* 기본 dots 숨김 */
  .owl-dots {
  display: none !important;
  }

  /* nav 래퍼 - prev / counter / next 가로 정렬 */
  .owl-nav {
    position: absolute;
    bottom: 7rem;
    display: flex;
    gap: 3rem;
    margin: 0;
    justify-content: center;
    width: 100%;
    align-items: center;
    align-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2rem;

    /* 슬라이드 카운터 — JS로 삽입되는 요소 */
    .owl-counter {
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 0.08em;
      min-width: 5rem;
      text-align: center;
      pointer-events: none;
      user-select: none;
      em{
        min-width: 1.5rem;
        display: inline-block;
        &:first-child{
          color: var(--color_sub3);
        }
      }
    }
    button.owl-prev,
    button.owl-next {
      background: transparent !important;
      border: none !important;
      outline: none !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1;
      cursor: pointer;
      width: auto;
      height: auto;
      color: var(--fff);
      position: relative;
      
        &:after{
          content:'';
          width: 38px;
          height: 38px;
          border-radius: 50%;
          transition: all 0.4s ease-in-out;
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(1.4);
          border: 3px solid var(--fff);
          opacity: 0;
        }
      &:hover{
        &:after{
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }
      }
    }
  }
}


/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {

}
/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .main_visual {
    margin-top: 58px;
    padding-top: 0;
    .owl-item {
      .item{
        height:calc(100vh - 58px);
        .text {
          margin-top:5rem;
          left: 3rem;
          right: 3rem;
          margin: 5rem 0 0;
          gap: 2rem;
          align-items: flex-end;
          h2{
            font-size:5rem;
          }
          ul{
            display:flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 1rem;
            max-width: 230px;
            li{
              margin-top:0;
            }
          }
          }
        &.visual_2{
          .text{
            left: 3rem;
            right: 3rem;
            margin: 5rem 0 0;
            display: flex;
            align-items: flex-start;
            ul{
              justify-content: flex-start;
            }
          }
          .img{
            div{
              background-position: 70%;
            }
          }
        }
        }
      }
    .owl-nav {
       justify-content: flex-start;
       left: 3rem;
      }
    }
}



/* ==================================================================
    main layout
===================================================================== */

.wrap {
  > section.line{
    /* max-width: 150rem; */
    margin: 0 auto;
    padding: 15rem 0;
    width: calc(100% - 10rem);
    margin: 0 auto;
    border-right: 1px solid rgba(var(--pointcolor-rgb), 0.2);
    border-left: 1px solid rgba(var(--pointcolor-rgb), 0.2);
    >.inwrap{
      max-width: 150rem;
      margin: 0 auto;
    }
  }
}
/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {

}
/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .wrap {
    > section.line{
      padding: 8rem 0;
      width: calc(90%);
    }
  }
}




/* ========== board_cate ========== */
.board_cate {
  ul {
    text-align: center;
    display: flex;
    
    li {
      border: 1px solid #ddd;
      background: #f7f7f7;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      flex: 1;
      transition: all 0.4s ease-in-out;
      
      a {
        display: block;
        position: relative;
        padding: 1.5rem 1rem;
        font-size: 1.8rem;
        color: var(--color_sub2);
        text-align: center;
        line-height: 1.2em;
        font-weight: 400;
        transition: all 0.4s ease-in-out;
      }
      &.active{
        z-index: 2;
        border: 1px solid var(--color_sub2);
        background: var(--color_sub2);
        font-weight: 600;
        position: relative;
        a {
          color: var(--color_sub3);
        }
      }
      
      &:hover {
        z-index: 2;
        border: 1px solid var(--color_main);
        background: var(--color_sub3);
        font-weight: 600;
        position: relative;
        a {
          color: var(--color_sub2);
        }
      }

    }    
  }
}

/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {

}
/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .board_cate {
    ul{
      li{
        a{
          font-size: 2.2rem;
        }
      }
    }
  }
}


/* ========== main_bf ========== */
.main_bf{
  .inwrap{
    max-width: 150rem;
    margin:0 auto;
    .owl-carousel{
      margin-top: 6rem;
      text-align: center;
      .owl-stage-outer{
        .item{
          padding: 0 3rem;
          h4{
            font-size: 1.8em;
            margin-bottom: .5em;
            overflow: hidden;         /* 넘치는 글자 숨기기 */
            text-overflow: ellipsis;  /* ... 표시 */
            white-space: nowrap;
            text-align: left;
            a{
              color: #333;
            }
            span{
              color: var(--color_main);
              margin-right: 1rem;
            }
          }
          h5{
            margin-top: -3rem;
            display: flex;
            justify-content: space-between;
            letter-spacing: 0;
            color: #666;
            font-weight: 400;
            font-size: 1.6rem;
          }
          p{
            margin-top: 4rem;
            margin-bottom: 2rem;
          }
          .twentytwenty-container{
            > p{
              position: absolute;
              color: var(--fff);
              z-index: 21;
              font-size: 1.4rem;
              left: 0;
              right: 0;
              bottom: 4rem;
            }
          }
          .beforeLogin{
            position: absolute;
            z-index: 50;
            background: rgba(0, 0, 0, .7);
            color: var(--fff);
            left: 0;
            right: 0;
            bottom: 4rem;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            p{
              margin-top: 0;
              margin-bottom: 2rem;
              font-size: 2.4rem;
            }
            button{
              background: var(--color_sub3);
              border: 0;
              border-radius: 10rem;
              padding: 1rem 3rem;
              font-size: 2rem;
              color: var(--color_sub2);
              font-weight: 600;
              cursor: pointer;
            }
          }
        }
        
      }
      .owl-dots{
          display:flex;
          justify-content: center;
          gap: 1rem;
          button.owl-dot {
            width: 2rem;
            height: 2rem;
            background: var(--color_main);
            border-radius: 3rem;
            opacity:.3;
            &.active{
              opacity:1;
            }
          }
        }
    }
  }

}
/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {

}
/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .main_bf{
      padding: 5rem 15px;
      .inwrap{
        .board_cate{
          margin-bottom: 3rem;
        }
        .owl-carousel{
          margin-top: 3rem;
          .owl-dots{
            gap: 5px;
            
            & button.owl-dot {
              width: 14px;
              height: 14px;
            }
          }
          .owl-stage-outer{
            .item{
              padding:0;
              h4{
              }
              h5{
                font-size: 2.2rem;
                margin-top: -3.5rem;
                padding: 0 1rem;
              }
              p{
                margin-top: 5rem;
                font-size: 2.2rem;
              }
              .twentytwenty-container{
                > p{
                  font-size:11px;
                  bottom: 5rem;
                }

              }
              .twentytwenty-handle{
                height:100%;
              }
              .twentytwenty-left-arrow{
                &:before{
                  line-height: 5rem;
                }
              }
            }
          }
        }
      }
  }
}

/* ========== recommends ========== */
.recommends {
  text-align: center;
  .main_title {
  margin-bottom: 100px;
    h5 {
      font-size: 30px;
      span {
        font-weight: 700;
      }
    }
  }
  .recommends_wrap{
    position: relative;
    left: 0;
    right:0;
  }
  .owl-carousel {
    .owl-stage-outer {
      /* padding-bottom: 2rem; */
      overflow: visible;
      
      .item {
        transition: all 0.4s ease-in-out;
        > div{
          position: relative;
          transition: all 0.4s ease-in-out;
          img{
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            transition: all 0.4s ease-in-out;
          }
          a {
          opacity: 0;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 10;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 2.4rem;
          background: rgba(0, 0, 0, 0.3);
          transition: all 0.4s ease-in-out;
          h5 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            width: auto;
            text-align: center;
            transition: 0.45s;
            color: var(--fff);

              &:after,
              &:before {
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                content: "";
                mix-blend-mode: plus-lighter;
                background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0.5) 85%, transparent 95%, transparent);
                width: 110%;
                height: 2px;
              }
              &:after {
                top: -1.4rem;
              }
              &:before {
                bottom: -1.4rem;
              }
            }
          }
        }
            h4 {
            font-size: 1.5em;
            color: var(--color_sub2);
            font-weight: 600;
            margin-top: 2rem;
            transition: all 0.4s ease-in-out;
          }
        &:hover{
          transform: scale(1.1);
          z-index: 40;
          position: relative;
          
          > div{
          a {
            opacity: 1;
            border-radius: 6rem;
            
          }
          img{
            border-radius: 6rem;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
          }
        }
        }
      }
    }
  }
}

/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {

}
@media screen and (max-width: 768px) {
  .recommends{
    .owl-carousel{
      .owl-stage-outer {
        .item{
          h4{
            font-size: 3rem;
          }
          > div{
            a{
              h5{
                font-size: 3rem;
              }
            }
          }
        }        
      }
    }
  }
}

/* ========== mainPhoto ========== */
.mainPhoto{
  position: relative;
  .textLeft,
  .textRight{
    position: absolute;
    z-index: 10;
    left: 6rem;
    top: 21rem;
    h2{
      font-size: 5rem;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: -.35rem;
    }
    p{
      font-size: 1.8rem;
      line-height: 1.6;
      font-weight: 400;
      color: var(--444);
      margin-top: 3rem;
    }
  }
  .textRight{
    left:auto;
    right:6rem;
    top:auto;
    bottom: 25rem;
    text-align: right;
    
    h3{
      font-size: 4.4rem;
      line-height: 1.2;
      font-weight: 400;
      margin-top: 2rem;
    }
    h6{
      font-size: 2rem;
      font-weight: 400;
      color: var(--444);
    }

  }  
  .owl-carousel{
    position:relative;
    &:before,
    &:after{
      content:'';
      background: linear-gradient(270deg, rgba(240, 237, 229, 0.00) 0%, #F0EDE5 98%);
      height:100%;
      width: 60rem;
      display:block;
      position:absolute;
      left:0;
      top:0;
      z-index:10;
    }

    &:after{
      right:0;
      left:auto;
      transform: rotate(180deg);
    }
    .owl-item {
      .item {
      height: 100vh;      
        background-position: top center;
        .text {
          position: absolute;
          margin-top: 20rem;
          z-index: 1;
          display: flex;
          flex-direction: column;
          align-content: center;
          text-align: center;
          gap: 4rem;
          left: 50%;
          margin-left: -33rem;
          text-align: right;

        }
        .img {
          overflow: hidden;
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 0;
          >div {
            background-position: top center;
            background-size: cover;
            -webkit-transition: all 5s;
            -moz-transition: all 5s;
            -ms-transition: all 5s;
            -o-transition: all 5s;
            transition: all 5s;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
          }        
        }
      }
      &.active{
        .item {
        
          background-position: top center;
          .text {
            * {
              -webkit-animation-duration: 2s;
              animation-duration: 2s;
              -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
              -webkit-animation-name: fadeIn;
              animation-name: fadeIn;
            }
            h2{
              animation-delay: .3s;
            }
            p{
              animation-delay: .8s;
            }
            ul{
              animation-delay: 1.6s;
            }
          }
          .img{
            >div {
            transform: scale(1);
            z-index: 10;
          }
        }
          &.visual_2{
            .text{
              right: 50%;
              margin-right: -33rem;
              text-align: left;
              margin-left: 0;
              left: auto;
            }
          }
      }
      }
    }
  }

  /* dots 스타일 (첨부 이미지처럼 맞춤) */
  .custom-owl-dots {
      position: absolute;
      right: 6rem;
      top: 21rem;
      z-index: 10;
      font-size: 2rem;
      
      .owl-dot {
        display: block;
        cursor: pointer;
        border-bottom: 1px solid var(--aaa);
        padding: 1rem;
        
        span {

          font-weight: bold;
          transition: color 0.3s;
          margin-right: 1rem;
      }
      &.active,
      &:hover {
        color: var(--color_main);
        border-bottom: 1px solid var(--color_main);
        span {
          
        }
      }
    }
  }

}

/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {

}
/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .mainPhoto{
    
    .textLeft, .textRight{
      position: static;
      padding-left: 3rem;
      padding-right: 3rem;
    }
    .owl-carousel{
      .owl-nav{
        display:none;
      }
      .owl-item{
        .item{
          height: 60vw;
        }
      }
      &:before, 
      &:after{
        background: linear-gradient(180deg, rgba(240, 237, 229, 0.00) 0%, #F0EDE5 98%);
        height: 50%;
        width: 100%;
      }
       &:before{
         bottom: 0;
         top: auto;
       }
    }
    .custom-owl-dots{
      position: static;
      display: flex;
      margin-bottom: 4rem;
      .owl-dot{
        text-align:center;
        flex:1;
        border-left: 1px solid var(--aaa);
        border-bottom: 0;
        &:first-child{
          border-left: 0;
          }
        &.active, &:hover{
          border-bottom:0;
        }
      }
    }
  }
}