@charset "UTF-8";



/* ==================================================================
    서브 공통 스타일
===================================================================== */




.dot {
  position:relative;
  &:before ,
  &:after {
   content:'“';
   font-size:2em;
   position:absolute;
   transform:translate(-150%,-10%);
   font-weight: 400;
   color: var(--pointcolor);
  }
   &:after {
   content:'”';
     transform:translate(50%,20%);
  }
}

h3{
  font-size:4.5rem;
}
h4{
  font-size:4rem;
}
h5{
  font-size:3.5rem;
}
@media (max-width: 768px) {
  h3{
    font-size:3.5rem;
  }
  h4{
    font-size:3rem;
  }
  h5{
    font-size:2.6rem;
  }
}

/* cirbox */
.cirbox {
  height: 100%;
  background: transparent;
  border: 1px solid rgba(var(--pointcolor-rgb), 0.2);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1 / 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: -1;
}
@media (max-width: 768px) {
  .cirbox {
    display: none;
  }

}

/* top_section */
.top_section {
  display: flex;
  margin-top: -8rem;

  >li {
    width: 100%;
    flex: 1;

    >img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .flex_center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      height: 100%;

      h6 {
        color: var(--point2color);
        font-family: "Cormorant Garamond", serif;
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: 1rem;
        text-transform: capitalize;
      }
    }

    h2 {
      font-size: 3.6rem;
      font-weight: 600;
      margin-bottom: 2rem;
      line-height: 1.2;
      color: var(--color_sub);
    }

    h3 {
      background: rgba(190, 183, 171, 0.2);
      padding: 0.5rem 1.5rem;
      width: fit-content;
      margin-bottom: 5rem;
      font-weight: 400;
    }

    p {
      line-height: 1.5;
      font-size: 1.8rem;
      font-weight: 300;
    }
  }
}

@media (max-width: 768px) {
  .top_section {
    flex-direction: column;
    gap: 5rem;
    margin-top: 0;
    padding-left: 2rem;
    padding-right: 2rem;

    >li {
      >img {
        margin-left: calc(-2rem - 5vw);
        margin-right: calc(-2rem - 5vw);
        width: calc(100% + 2rem + 20vw);
        max-width: 100vw;
      }

      .flex_center {
        h6 {
          font-size: 1.8rem;
        }
      }

      h3 {
        font-size: 2rem;
      }

      h2 {
        font-size: 3.5rem;
      }

      p {
        /* font-size: 1.8rem; */
      }
    }
  }
}


/* sub_title */
.sub_title {
  text-align: center;
  margin-bottom: 7rem;

  h6 {
    color: var(--point2color);
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 1rem;
    text-transform: capitalize;
  }

  h2 {
    font-size: 3.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  p {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.5;
    margin-top: 0;
  }


}

@media (max-width: 768px) {
  .sub_title {
    margin-bottom: 5rem;

    h6 {
      font-size: 2rem;
    }

    h2 {
      line-height: 1.2;
    }
  }
}

/* flexHoverList */
.flexHoverList {
  display: flex;
  gap: 2rem;
  margin-top: 7rem;
  flex-wrap: wrap;
  justify-content: center;

  >li {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    .imgbox {
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: 0.5s;
      }

      &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        z-index: 1;
        background: #fff;
        content: "";
        transition: 1s;
        width: 100%;
        height: 15rem;
      }
    }

    .txt {
      position: absolute;
      z-index: 2;
      transition: 0.5s;
      left: 4rem;
      top: 4rem;
    }

    h4 {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--point2color);
      font-family: "Cormorant Garamond", serif;
      font-size: 2rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: capitalize;
    }

    h3 {
      font-size: 3.5rem;
      margin-bottom: 8rem;
    }

    p {
      font-size: 1.6rem;
      font-weight: 300;
      line-height: 1.5;
    }

    .h_txt {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff !important;
      z-index: 3;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      transition: 0.5s;
      display: flex;
      align-items: center;
      justify-content: center;

      h3 {
        color: var(--fff);
        margin-bottom: 2rem;
      }

      h2 {
        margin-bottom: 4rem;
        font-size: 4rem;
      }

      p {
        font-size: 1.8rem;
      }
    }

    &:hover {
      .imgbox {
        img {
          transform: scale(1.2);
        }

        &:after {
          height: 0;
        }
      }

      .txt {
        opacity: 0;
      }

      .h_txt {
        opacity: 1;
        visibility: visible;
      }
    }

    &:nth-child(2n) {

      .imgbox {
        &:after {
          width: 26rem;
          height: 100%;
        }
      }

      .txt {
        top: auto;
        bottom: 4rem;

        h3 {
          margin-bottom: 4rem;
        }

      }

      &:hover {
        .imgbox {
          &:after {
            width: 0;
            height: 100%;
          }
        }
      }

    }
  }


}

@media (max-width: 768px) {
  .flexHoverList {
    gap: 3rem;
    margin-top: 5rem;
    flex-direction: column;

    >li {
      .imgbox {
        &:after {
          height: 11rem;
        }

      }

      .txt {
        top: 2rem;
        left: 2rem;

        h3 {
          margin-bottom: 4rem;
        }
      }
      &:nth-child(2n) {
        .imgbox{
          &:after{
          width: 19rem;
        }
        }
        
      }
    }
  }
}

/* imgLeft */
.imgLeft {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
  

  >li {
    flex: 1;
    padding: 5rem;
    i.icon-seoul_logo{
      color: var(--aaa);
      font-size: 55rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
      opacity: .2;
    }
    > ul{
      list-style: disc;
      margin-top: 3rem;
      li {
        /* border-bottom: 1px solid var(--point2color); */
        padding: 1rem 0;
        font-size: 2rem;
        display: flex;
        align-items: center;
        
        
        &:before {
          content:'';
          width: .8rem;
          height: .8rem;
          background: var(--color_main);
          border-radius:100%;
          display:inline-block;
          margin-right: 1rem;
        }
      }
    }
      img{
          border-radius:4rem;
        }
        h3{
          color: var(--color_main);
          font-weight: 800;
        }
        h4{
          color: var(--000);
          em{
            position:relative;
            display: inline-block;
            
            
            
            &:before{
              content:'';
              background: var(--color_main);
              color: var(--fff);
              width: 100%;
              display: block;
              height: .6em;
              background: var(--color_sub4);
              display: inline-block;
              position: absolute;
              z-index: -1;
              bottom: 0;
            }
          }
        }
        p{
          font-size: 2.4rem;
          line-height: 1.5;
          em{
            background: var(--color_main);
            color: var(--fff);
          }
        }
    &:first-child{
      border-right: 1px solid rgba(var(--pointcolor-rgb), 0.2);
    }

    img {
      display: block;
      
    }
     > div {
      padding: 5rem;
      display: flex;
      flex-direction: column;
      h4{
        font-size: 2.9rem;
        margin-bottom: 2rem;
        b.color{
          color: var(--color_sub);
        }
      }
      > p{
        font-size: 2rem;
        margin-top: 0;
        margin-bottom: 2rem;
        line-height: 1.5;
      }

    }


  }

  &.imgRight{
    flex-direction: row-reverse;
      > li{
        position:relative;
        
        
        &:first-child{
          border-right:0;
          border-left: 1px solid rgba(var(--pointcolor-rgb), 0.2);
        }
      }
 
      
  }
}

@media (max-width: 768px) {
  .imgLeft {
    flex-direction: column;
    padding: 8rem 0;
    gap: 4rem;
    
    >li {
      padding: 0;
      width: 100%;
      
      img{
        width: 100%;
      }
      
      
      i.icon-seoul_logo{
        font-size: 30rem;
        right: 0;
        /* top: 0; */
        /* transform: translate(0px, 0px); */
        /* left: auto; */
      }

      > ul{
        margin-top:1rem;
        
      }
      &:first-child{
        border:0;

      }
      > div{
        padding: 0;
        > p{
          font-size: 1.8rem;
          margin-top: 0;
          margin-bottom: 1rem;
          line-height: 1.5;
        }
      }
      h4{
        font-size: 3rem;
      }
    p{
      font-size: 2rem;
    }
    
      
    }

    &.imgRight{
      display: flex;
      flex-direction: column;
      > li{
        &:first-child{
          border:0;
        }
      }
    }
  }
}


/* stepList */
.stepList {
  display: flex;
  /* gap: 5rem; */
  justify-content: center;
  flex-wrap: wrap;
  

  >li {
    flex: 1;
    max-width: 400px;
    text-align: center;
    border-left: 1px solid rgba(var(--pointcolor-rgb), 0.2);
    
    img {
      /* border: 1px solid var(--point2color); */
      border-radius: 100rem !important;
      margin: 0 auto;
      max-width: 20rem;
      display: block;
      /* margin-bottom: 2rem; */
    }
    &:first-child {
      border-left: 0;
    }

    h3 {
      font-size: 2.4rem;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }

    p {
      font-size: 1.8rem;
      font-weight: 300;
      line-height: 1.5;
      margin-bottom: 2rem;
    }
  }
}

@media (max-width: 768px) {
  .stepList {
    > li{
      padding:0 2rem;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 50%;
      flex: auto;
      
      
      img {
        max-width: 100%;
      }
      &:nth-child(odd){
        border-left:0;
      }
       &:nth-child(n+3){
         border-top:1px solid rgba(var(--pointcolor-rgb), 0.2);
       }
    }
  }
    }


/* dot_list */
.dot_list{
  padding:5rem;
  dl{
    dt{
      font-size: 2.8rem;
      color: var(--000);
      font-weight: 600;
      margin-top: 3rem;
      line-height: 1.2;
      margin-bottom: 1rem;
      display: flex;
      align-items: flex-start;
      
      > span {
        display:flex;
        margin-top: .8rem;
        
        
        
        
        
        
        
        
        
        &:before{
          content:'';
          display:inline-block;
          width: 1.5rem;
          height: 1.5rem;
          background: var(--color_main);
          border-radius: 100%;
          margin-right: 1rem;
        }
      }
      /* &:before{
          content:'';
          display:inline-block;
          width: 1.5rem;
          height: 1.5rem;
          background: var(--color_main);
          border-radius: 100%;
          margin-right: 1rem;
        } */
    }
    dd{
      font-size: 2.4rem;
      padding-left: 2.5rem;
      border-bottom: 1px solid rgba(var(--pointcolor-rgb), 0.2);
      padding-bottom: 3rem;
    }
  }

  > li{
    font-size: 2rem;
    padding-left: 2.5rem;
    border-bottom: 1px solid rgba(var(--pointcolor-rgb), 0.2);
    padding: 1.5rem 3rem;
    display: flex;
    align-items: center;
    text-align: left;
    
    
    > span {
      display:flex;
       &:before{
          content:'';
          display:inline-block;
          width: .5rem;
          height: .5rem;
          background: var(--fff);
          border-radius: 100%;
          margin-right: 1rem;
        } 
    }
    
  }
  @media (max-width: 768px) {
    padding:0;
    margin-top: 8rem;
    > li{
      padding: 1.5rem;
      font-size: 1.8rem;
      display: flex;
      align-items: flex-start;
      > span{
        padding-top:1rem;
        &:before{
        }  
      }
      
    }
    dl{
      dt{
        /* line-height: 1.2; */
        margin-bottom: 1.5rem;
        font-size: 2.4rem;
        span{
          margin-top: .6rem;
        }
      }
      dd{
        font-size: 2rem;
      }
    }
  }
}
.BGsub_title{
  margin-bottom: 4rem;
    span{
      background: var(--color_main);
      color: var(--fff);
      border-radius: 10rem;
      padding: 1rem 4rem;
      display: inline-block;
    }
 
  }

.bg_section{
  background: url(/html/main/images/win_case_BG.jpg) center;
  text-align: center;
  background-size: cover;
  color: var(--fff);

  >.inwrap {
    .title {
      * {
        color: var(--fff) !important;
      }
    }
  }
}

.dlList{
  display:flex;
  gap: 1rem;
  
  > div{
    background:var(--fff);
    border-radius: 3rem;
    overflow: hidden;
    flex: 1;
    
    dt{
    background: var(--pointcolor);
    color: var(--fff);
    padding: 2rem 0;
    font-size: 2.5rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    dd{
      padding: 3rem 2rem;
      text-align: left;
      font-size: 2rem;
      line-height: 1.4;
      font-weight: 300;
      color: var(--000);
    }
  }
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 2rem;
      > div {
        dt{
          font-size: 2.4rem;
          height: auto;
          padding: 1.5rem 0;
        }
          dd{
            padding: 2rem;
          }
      }
    }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes pulse-ring-small {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}


/* ==================================================================
    ABOUT
===================================================================== */

/* 의료진소개 */
.attorney_lee {
  .section01 {
    .inwrap {
      .titleBanner {
        padding-top: 10rem;

        h5 {
          font-size: 2.6rem;
          font-weight: 100;
          color: var(--pointcolor);
          letter-spacing: 1em;
        }

        p {
          font-size: 2.6rem;
          line-height: 1.6;
        }
      }
    }

    /* 모바일 (해상도 768px 이하) */
    @media (max-width: 768px) {
      .inwrap {
        .titleBanner {
          padding-top: 8rem;

          h5 {
            font-size: 2rem;
            letter-spacing: .5em;
          }

          p {
            font-size: 2rem;
            line-height: 1.6;
          }
        }
      }
    }

    .section02 {
      >.inwrap {
        padding-left: 10%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        h4 {
          text-align: left;
          padding: 0 9rem;
        }

      }

    }
  }
  /* 모바일 (해상도 768px 이하) */
  @media (max-width: 768px) {
    .section02{
      .dot_list{
        margin-top:3rem;
      }
    }
  }
  
}

/* 리엘의 가치 */

.value{
  .section01{
    .core_value{
      padding: 10rem 0;
      
      .title{
        h4{
          font-size: 3.8rem;
          color: var(--pointcolor);
          font-family: "Lora", serif;
          text-transform: uppercase;
        }
      }
      ul{
        display: flex;
        justify-content: center;
        gap: 2rem;
        color: var(--fff);
        max-width: 120rem;
        li{
          background: #ae9d86;
          aspect-ratio: 1 / 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          border-radius: 100rem;
          
          
          b{
            font-size: 30rem;
            position: absolute;
            opacity: .2;
          }
          h5{
            font-size: 3rem;
            span{
              font-size:3em;
              font-weight: 800;
            }
          }
          p{
            font-size: 3rem;
            font-weight: 600;
            margin-top: 0;
          }
          &:nth-child(2){
            background:#a28e72;
          }
          &:nth-child(3){
            background: #cbb494;
          }
        }
      }
    }
    .imgLeft{
      &.itemTop{
        align-items: stretch;
      }
      > li {
        h4{
          font-size: 3rem;
          line-height: 1;
          
          b{
            font-size: 7rem;
          }
          em{
            position:relative;
            display: inline-block;
            &:before{
              content:'';
              background: var(--color_main);
              color: var(--fff);
              width: 100%;
              display: block;
              height: .6em;
              background: var(--color_sub4);
              display: inline-block;
              position: absolute;
              z-index: -1;
              bottom: 0rem;
            }
          }
        }
        h5{
          font-size: 2.6rem;
          color: var(--000);
          margin-top: 3rem;
        }
        p{
          font-size:2rem;
        }
        dl{
          margin-top:2rem;
          dt{
            font-size: 2.8rem;
            color: var(--000);
            font-weight: 600;
            margin-top: 3rem;
            line-height: 2;
            display: flex;
            align-items: center;
            &:before{
              content:'';
              display:inline-block;
              width: 1.5rem;
              height: 1.5rem;
              background: var(--pointcolor);
              border-radius: 100%;
              margin-right: 1rem;
            }
          }
          dd{
            font-size:2rem;
            line-height: 1.5;
            padding-left: 2.5rem;
          }
        }
      }
    }

  }
  .section02{
    margin-top: -10rem;
    
    
    
    
    .inwrap{
      h4{
        font-size: 4.2rem;
      }
      p{
        font-size: 3rem;
        line-height: 1.6;
      }
    }
  }

    /* 모바일 (해상도 768px 이하) */
    @media (max-width: 768px) {
      .section01{
        .core_value{
          .title{
            h4{
              font-size: 2.4rem;
              margin-top: 1rem;
            }
          }
          ul{
            flex-direction: column;
            align-items: center;
            li{
              width: 100%;
              aspect-ratio: 1 / 0.4;
              
              > b{
              font-size: 14rem;
              left: 0;
              }
              h5{
                font-size: 3rem;
                line-height: 1;
                span{
                  font-size:1.5em;
                }
                
              }
              p{
                font-size: 2.4rem;
                margin-top: 1rem;
              }
            }
          }
        }
        .imgLeft{
          > li{
            h4{
              b{
                font-size:2em;
              }
            }
            h5{
                font-size: 2.2rem;
              }
              
          }
        }
      }
      .section02{
        margin-top: -8rem;
        .inwrap{
          h4{
            font-size: 3rem;
          }
          p{
            font-size: 2rem;
          }
        }
      }
      
    }
  
      
}

/*  오시는길 */
.location {
  .section01 {
    .inwrap{
      position:relative;
      > h4{
        color: var(--000);
      }
      h3{
        margin-top: 3rem;
        margin-bottom: 6rem;
        color: var(--color_main);
      }
      #map2 {
        width: 100%;
        height: 600px;
        border: 1px solid #d3d3d3;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 30px;
        position: relative;
      }

      .bus {
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        right: 30px;
        margin-top: -210px;
        z-index: 10;
        border-radius: 20px;
        padding: 40px;
        border: 1px solid #ccc;
        h5{
          font-size:2.4rem;
        }
        span {
          background: #5abee7;
          color: #fff;
          padding: 5px;
          display: inline-block;
          margin-right: 5px;
          line-height: 1em;
          width: 15px;
          height: 15px;
          line-height: 15px;
          border-radius: 100px;
          &+span {
            background: #7c8945
          }
          &.nine {
            background: #8c8621;
          }
        }
      }

      a {
        margin-top: 40px;
        display: inline-flex;
        background: var(--color_main);
        padding: 10px 40px;
        color: #fff;
        font-weight: 400;
        margin: 40px 10px 20px;
        min-width: 160px;
        font-size: 20px;
        justify-content: center;
        &+a {
          background: var(--pointcolor);
        }
      }

    }
  }

  /* 모바일 (해상도 768px 이하) */
  @media (max-width: 768px) {
      .section01 {

        .inwrap{
          h4{
            font-size: 2.6rem;
          }
          h3{
            margin-top: 2rem;
            margin-bottom: 4rem;
          }          
          #map2 {
            height: 200px;
            border-radius: 15px;
          }
  
          .bus {
            position: initial;
            margin: 20px 0 0;
            border: 0;
            padding: 0;
            p{
              font-size: 2rem;
              margin-top: 1rem;
            }
          }
           a {
            min-width: 73px;
            margin: 20px 5px 0;
            padding: 5px 20px;
            font-size: 2rem;
          }
        }
  }
}
}