@charset "UTF-8";
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css);
:root {
  --fff: #fff;
  --font_000: #000;
  --font_222: #222;
  --font_333: #333333;
  --font_666: #666666;
  --font-171921: #171921;
  --font-141414: #141414;
  --color_main: #0AADBC;
  --color_1: #28b7c4;
  --color_2: #2892c4;
  --color_3: #28c48f;
  --color_4: #9783c0;
  --main_color: #26a5bb;
  --font_color:#838383;
  --blue_bg: #e6f6ff;
  --bg: #ebe5e1;
  --bg2: #CEE5E8;
  --gray: #aaa;
  --yellow: #FECE63;
  --brown: #B5A498;
  --gray_2: #f5f5f5;
  --gray_3: #e3e3e3;
  --line: #d0d0d0;
}

html {
  font-size: 10px;
  font-family: 'Pretendard JP', sans-serif;
  letter-spacing:0;
}
body{
  
  color:var(--font_666);

}

h1,h2,h3,h4,h5,h6 {
    color: var(--font_666);
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Pretendard JP', sans-serif;
}
.dot {
  border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite;
  background: var(--color_1);
  display: inline-block;
  width: 5rem;
  height: 5rem;
  border-radius: 10rem;
  margin-bottom: 5rem;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 188, 212, 0.4);
    animation: pulse-ring 2s infinite;
  }
}
/*서브페이지*/
section.sub_visual {
  min-height: auto;
  height: 60rem;
  border-radius: 0 0 10rem 10rem;
  overflow: hidden;
  color: var(--fff);
  text-align: center;
  position: relative;

  >div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -35%);

    p {
      font-family: Poppins;
      font-size: 3rem;
      font-style: normal;
      font-weight: 700;
      text-transform: uppercase;
    }

    h1 {
      font-size: 7rem;
      font-weight: 800;
      color: var(--fff);
font-family: 'Pretendard JP', sans-serif;
    }
  }

  img {
    display: block;
  }
}

.flex {
  display: flex;
  gap: 2.4rem;

  img {
    border-radius: 5rem;
  }
}


  main {
    overflow: hidden;

    .inwrap {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
      > img{
        border-radius:5rem;
      }
    }

    .subTit {
      padding-top: 12rem;
      margin-bottom: 7rem;



      span.dot {
        width: 4.4rem;
        height: 4.4rem;
        display: block;
        margin: 5rem auto 4rem;
        background-color: var(--color_1);
        border-radius: 10rem;
      }

      p {
        font-weight: 600;
        line-height: 160%;
        font-size: 2.2rem;
        margin-top: 3rem;
        
        span {
          color: var(--color_1);
        }

        b {
          font-weight: 600;
          color: var(--font_333);
          
          &.color {
            color: var(--color_1);
          }
        }
      }

      h2 {
        font-size: 5rem;
        font-weight: 700;
        line-height: 130%;
        /* letter-spacing: -.08em; */
        color: var(--font_333);
        margin-top: 3rem;
        
        span{
          font-size: 4rem;
        }
        em{
          color:var(--color_1);
          font-weight: 600;
        }

      }
    }
  }

  h4.NotoSerifKR {
    font-size: 3rem;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.24rem;
    color: var(--font_333);
    margin-top: 3rem;
  }

  h5 {
    font-size: 2.8rem;
    color: var(--font_333);
    font-weight: 600;

    &.tit {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;

      &:before,
      &:after {
        content: '';
        width: 10rem;
        height: 2px;
        display: inline-block;
        background: var(--font_333);
      }

    }
  }
  h6{
    font-size:2.2rem;
    color: var(--font_222);
  }
  ul.checkList {
    display: flex;
    gap: 2.2rem;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 160%;
    letter-spacing: -0.12rem;
    /* max-width: 80rem; */
    flex-wrap: wrap;
    margin-top: 4rem;
    margin-bottom: 8rem;

    li {
      min-width: 42rem;
      color: var(--fff);
      display: flex;
      align-items: center;
      padding: 2rem;
      border-radius: 10rem;
      gap: 2rem;
      text-align: center;
      background: var(--color_1);
      font-weight: 500;
      i {
        font-size: 4.8rem;
      }

      span {
        flex: 1;
        margin-left: -3rem;
        letter-spacing: 0;
      }
      &:nth-child(2) {
        background: var(--color_2);
      }

      &:nth-child(3) {
        background: var(--color_3);
      }

      &:nth-child(4) {
        background: var(--color_4);
      }
    }
  }

  ul.photoList {
    display: flex;
    gap: 2rem;

    li {
      border: 1px solid var(--line);
      border-radius: 2.5rem;
      overflow: hidden;

      img {
        display: block;
      }

      h6 {
        /* background: var(--gray); */
        font-size: 1.8rem;
        padding: 1rem 0;
        font-weight: 600;
        /* color: var(--fff); */
      }

      p {
        padding: 2rem 1rem;
        font-weight: 800;
        color: var(--font_333);
        font-size: 1.8rem;
        /* background: var(--font_333); */
      }

    }
  }

  .left_img {
    margin-top: 4em;
    gap: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;


    >li {
      flex: 1;

      img {
        border-radius: 5rem;
        display: block;
        margin: 0 auto;
      }

      >ul.checkList {
        margin: 0;

        >li {
          width: 100%;
        }
      }
    }
  }


/* 모바일 반응형 */
@media (max-width: 768px) {
  html {
  /* font-size: 5px; */
}
  section.sub_visual {
    border-radius: 0 0 5rem 5rem;
    margin-top: 60px;
    height: 20rem;
    margin-bottom: -2rem;
    
    
    >div {
      width: 100%;
      transform: translate(-50%, -50%);

      p {
        font-size: 1.2rem;
        font-weight: 400;
      }

      h1 {
        font-size: 2.5rem;
      }
    }

    >img {
      min-height: 100%;
      object-fit: cover;
    }
  }


    main {
      .inwrap {
        margin: 0 1.5rem;
        
        
        
        
        
        > img{
          border-radius:2rem;
        }
      }

      .subTit {
        padding-top: 5rem;
        margin-bottom: 2rem;

        span.dot {
          width: 2.5rem;
          height: 2.5rem;
          margin-bottom: 2.5rem;
          margin-top: 2.5rem;
        }
        p {
          font-size: 1.2rem;
          margin-top: 2rem;
          letter-spacing: -.01em;
        }

        h2 {
          font-size: 2rem;
          margin-top: 2rem;
          letter-spacing: -.12em;
          
          
          
          span{
            font-size: 2rem;
          }
        }
        
      }

      h5 {
        font-size: 1.8rem;
        
        
        
        

        &.tit {
          gap: 1rem;





          &:before,
          &:after {
            width: 4rem;
          }
        }
      }

      h4.NotoSerifKR {
        font-size: 1.4rem;
      }


      .flex {
        gap: 1.4rem;
        display: flex;
        flex-direction: column;

        img {
          border-radius: 3rem;
        }
      }

      ul.checkList {
        margin-top: 2rem;
        margin-bottom: 4rem;
        font-size: 1.6rem;
        gap: 1rem;
        li {
          padding: 1rem;
          gap: 1rem;
          width: auto;
          min-width: 25rem;
          
          
          
          
          

          i {
            font-size: 2.4rem;
          }

          span {
            margin-left: -2rem;
          }

        }
      }
    }

    ul.photoList {
      display: flex;
      flex-wrap: wrap;

      li {
        border-radius:2rem;
        h6{
          font-size: 1.6rem;
          line-height: 1.4;
        }
      }
    }
 
}



.background-fixed {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* 코티코 주걱턱 솔루션 */

  main {
    &.orthodontic_01 {
      .section01{
        .inwrap{
          > p {
            
            line-height: 160%;
            font-size: 2.2rem;
            margin-top: 5rem;
          }
        }
      }
      .section04 {
          .flex {
            display: flex;
            justify-content: center;
            gap: 2.2rem;

            li {
              background: #F3F4FA;
              padding: 3rem 0 0 0;
              border-radius: 5rem;
              overflow: hidden;

              h4 {
                font-size: 2.4rem;
                font-weight: 800;
                padding-bottom: 2rem;
                line-height: 1.4;
                color: var(--font_222);
                height: 8rem;
                display: flex;
                align-items: center;
                justify-content: center;
              }

              p {
                background: var(--color_1);
                color: var(--fff);
                padding: 3rem 0;
                font-size: 1.8rem;
                /* font-weight: 600; */
                min-height: 102px;
                display: flex;
                align-items: center;
                justify-content: center;
              }

              img {
                border-radius: 0;
                display: block;
                width: 400px;
              }

              &:first-child {
                p {
                  background: var(--font_666);
                }
              }
            }
          }
        .playWrap {
          position: relative;

          i {
            position: absolute;
            color: var(--fff);
            font-size: 16rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          img {
            border-radius: 5rem;
            display: block;
          }
        }
      }

      .section05 {
        h4{
            color: var(--font_333);
            font-weight: 600;
          }
        .imgWrap {
          position: relative;
          margin-bottom: 4rem;
          
          h5 {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -150%);
            color: var(--fff);
            font-size: 3rem;
           line-height: 110%;

            span {
              font-size: 2.2rem;
              letter-spacing: 0;
            }
          }

          img {
            border-radius: 5rem;
            display: block;
          }

          
        }

        ul.checkList {
          margin-top: 2rem;
          margin-bottom: 0;

          li {
            min-width: 53rem;
          }

        }
      }

      .section06 {
        .inwrap {
          ul {
            display: flex;
            align-items: flex-end;
            gap: 2rem;

            li {
              div {
                position: relative;
                margin-bottom: -2.5rem;
              }

              p {
                font-size: 2.2rem;
                font-weight: 700;
                line-height: 140%;
                /* 30.8px */
                letter-spacing: -0.11rem;
                position: absolute;
                top: 60%;
                left: 50%;
                transform: translate(-55%, -160%);
              }

              &:nth-child(2) {
                p {
                  transform: translate(-53%, -121%);
                }
              }

              &:nth-child(3) {
                p {
                  transform: translate(-53%, -94%);
                }
              }

              >img {
                border-radius: 5rem;
                display: block;
              }
            }

            +div {
              margin-top: 4rem;
              display: flex;
              justify-content: center;
              gap: 2rem;

              a.viewMore-btn {
                font-weight: 800;
                width: 34rem;
                font-size: 2.4rem;
                /* transform: scale(1.2); */
                padding: .7em 2em;
              }
            }
          }
        }
      }
    }
  }


 footer{
  background-color: #f3f3f3;
  > ul{
    max-width:1200px;
    margin:0 auto;
    padding: 15rem 0;
    display:flex;
    justify-content: space-between;
    gap: 7rem;
    > li {
      > ul {
        > li {
          border-bottom:1px solid var(--line);
          padding: 2rem 0;
          gap: 1rem;
          display: flex;
          flex-direction: column;
          > h4{
            font-family: "LINE Seed JP", ui-sans-serif;
            color: var(--font-141414);
            font-weight: 800;
            font-size: 3rem;
          }
          > p{
            font-size: 2.3rem;
            color: #838383;
          }
          dl{
            display:inline-flex;
            flex-wrap: wrap;
            gap: 0 1rem;
 
            dt{
              width: 11rem;
            } 
            dd{
              width: 31rem;
              /* letter-spacing: -.2rem; */
            }
          }
          > div {
            display:flex;
            align-items: center;
            gap: 1rem;
            i{
              background:#39cc02;
              color: var(--fff);
              display: inline-block;
              width: 5.4rem;
              height: 5.4rem;
              line-height: 5.4rem;
              border-radius: 1rem;
              font-size: 4rem;
              text-align: center;
              &::before{
                content: '\E8AB' !important;
                font-family: 'icon_font'!important;
                margin: 0 !important;
                padding: 0 !important;
                margin-left: -3px !important;
              }
            }
            span{
              font-size: 2.4rem;
              color: #555;
              font-weight: 400;
            }
          }
          &:first-child{
            padding-top:0;
          }
          &:last-child{
            padding-bottom:0;
            border: 0;
          }
        }
      }
      &:first-child{
        flex:1;
      }
      &:last-child{
        flex: 1.5;
        #footMap{
          width: 100%;
          height: 100%;
          max-width: 1200px;
          margin: 0px auto;
          position: relative;
          overflow: hidden;
          border: 1px solid var(--line);
        }
      }
      
    }
  }
      address{
      padding: 30px 0;
      font-size: 14px;
      font-weight: 300;
      color: #999;
      line-height: 1.6;
      max-width: 100%;
      background: rgb(51, 51, 51);
      margin:0 auto;
        > div{
          max-width:1200px;
          margin:0 auto;
          text-align:center;
          span{
            margin:0 10px;
          }
          p{
            display:inline-block;
          }
        }

    }
  }


  @media (max-width: 768px) {
 
      main {
        &.orthodontic_01 {
          .section01{
              .inwrap{
                > p {
                  font-size: 1.2rem;
                  margin-top: 2.5rem;
                }
              }
            }
          .section04 {
            .flex{
                li{
                  border-radius:3rem;
                  padding-top: 01rem;
                  
                  h4{
                    font-size: 1.8rem;
                    padding-bottom: 0;
                  }
                  p{
                    padding: 2rem 0;
                    font-size: 1.4rem;
                    min-height: auto;
                  }
                }
              }
            .playWrap {
              i {
                font-size: 6rem;
              }

              img {
                border-radius: 3rem;
              }
            }
          }

          .section05 {
            .imgWrap {
              margin-bottom: 2rem;

              h5 {
                font-size: 1.3rem;
                left: 0;
                right: 0;
                transform: translate(0%, -130%);
                
                
                
                

                span {
                  font-size: 1rem;
                }
              }

              img {
                border-radius: 3rem;
              }


            }

            h4.NotoSerifKR {
              font-size: 2rem;
            }

            ul.checkList {
              li {
                min-width: 28rem;
                text-align: center;
                font-size: 14px;
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                

                span {
                  flex: 1;
                }
              }
            }
          }

          .section06 {
            .inwrap {
              ul {
                flex-direction: column;

                li {
                  >div {
                    p {
                      font-size: 1.6rem;
                    }

                    img {
                      width: 18rem;
                    }
                  }

                  >img {
                    border-radius: 3rem;
                  }
                }

                +div {
                  flex-direction: column;
                  margin-top: 2rem;
                  gap: 1rem;

                  a.viewMore-btn {
                    width: 100%;
                    font-size: 1.8rem;
                    padding: .7em 0;
                  }
                }
              }
            }
          }

          
        }

      }
   

        footer {
          > ul {
            flex-direction: column;
            padding: 5rem 2rem;
            gap: 3.5rem;
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            > li{
              > ul{
                > li{
                  gap: 1rem;
                  padding: 2rem 0;
                  
                  > div{
                    span{
                      font-size: 1.4rem;
                    }
                   i{
                     width: 3rem;
                     height: 3rem;
                     font-size: 2rem;
                     line-height: 3rem;
                   } 
                  }
                  
                  h4{
                    font-size: 2rem;
                  }
                  p{
                    font-size: 1.5rem;
                  }
                  dl{
                     font-size: 2.8rem;
                     max-width: 70rem;
                     
                    dt{
                      width: 9rem;
                      font-size: 1.4rem;
                    }
                    dd{
                      width: 19rem;
                      /* letter-spacing: -.5rem; */
                      margin-bottom: 1rem;
                      font-size: 1.4rem;
                      }
                    br{
                      display:none;
                    }
                    
                   
                  }

                }
              }
              &:last-child{
                #footMap{
                height: 25rem;
                }
              }
            }
          }
          address{
            padding: 2rem 2rem 8rem 2rem;
            font-size: 1.2rem;
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            

            > div{
              span{
                display:block;
              }
            }
          }
        
        }
    
  }



  /* FAQ */

#faq {
  border-bottom: 1px solid #6a6a6a;
  max-width: 1000px;
  margin: 0 auto;
  border-top: 5px solid var(--color_1);
  text-align: left;
  margin-bottom: 100px;
  
  > li{
    border-top: 2px solid var(--gray);
    &:first-child{
      border-top:0;
    }
    p {
      margin: 0
    }
  
    .faq_q {
      padding: 25px 20px;
      position: relative;
      z-index: 1;
      background: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 2.3rem;
      font-weight: 500;
      color: var(--font_333) !important;
    }
    .faq_a {
      display: none;
      padding: 25px 20px;
      border-top: 1px solid var(--gray_3);
      background: #fff;
      overflow: hidden;
      position: relative;
      display: flex;
      gap: 1rem;
      font-size: 1.8rem;
      > div {
        width:calc(100% - 50px);
      }
    }
      
    .faq_q::before,
    .faq_a::before {
      content: 'Q';
      font-size: 2.6rem;
      display: block;
      background: var(--color_4);
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 100%;
      color: #fff;
      text-align: center;
      font-weight: 600;
    }
    .faq_a::before {
      content: 'A';
      background: var(--color_2);
    }
  }
}


@media screen and (max-width: 768px) {

  #faq {
    margin-bottom:40px;
    >li {

      .faq_q {
        padding: 10px;
        padding-left: 50px;
        font-size: 15px;
        display: block;
      }

      .faq_q::before,
      .faq_a::before {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        margin-left: -40px;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
      }

      .faq_a::before {
        margin-top: 0px;
        top: 13px;
        transform: translateY(-0%);
      }

      .faq_a {
        padding: 10px;
        padding-left: 50px;

        >div {
          width: auto;
        }
      }

      p {
        font-size: 1.3rem;
      }
    }
  }
} 


/* 쁘띠라미 */
.aesthetic_02 {
  max-width: 1920px;
  padding: 0;
  text-align: center;
  margin-top: 0;

  h3, h4, h5, h6 {
    color: #35405d;
  }

  .section01 {
    img {
      display: block;
    }
  }

  section {
    padding: 100px 0;
  }

  .section_02 {
    background: #f7f7f7;

    .title {
      h3 {
        font-weight: 600;
        font-size: 2.5em;
        position: relative;
        font-family: 'Noto Serif JP';
        margin-bottom: .5em;

        img {
          position: absolute;
          margin-left: -30px;
          margin-top: -21px;
          z-index: 0;
        }

        span {
          z-index: 1;
          position: relative;
        }
      }
    }

    h4 {
      b {
        font-weight: 800;
      }
    }

    > ul {
      display: flex;
      justify-content: center;
      margin-top: 5rem;
      gap: 1em;
      margin-bottom: 5rem;

      img {
        border-radius: 20px;
      }

      > li {
        > div {
          display: flex;
          gap: 1em;
          justify-content: center;

          > img {
            
          }

          > h5 {
            width: 50%;
          }
        }

        > h4 {
          background: #e7e7e7;
          border-radius: 100px;
          margin: 20px 0;
          font-size: 24px;
          padding: 10px 0;
          font-weight: 500;

          img {
            position: absolute;
            right: -20px;
            bottom: -10px;
          }
        }

        &:last-child {
          > h4 {
            background: #fed4d8;
            position: relative;
            padding-right: 44px;
          }
        }

        h5 {
          font-size: 28px;
          font-weight: 500;
          line-height: 1.4;

          span {
            color: #bbbcbf;
            font-size: 24px;
            display: block;
            font-weight: 1000;
          }
        }
      }
    }

    > h4 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f9a8af;
      padding: 10px 40px 7px 40px;
      border-radius: 100px 0 0 100px;
      border: 5px solid #f66e79;
      color: #fff;
      font-size: 30px;
      font-weight: 800;

      img {
        margin-bottom: 5px;
        margin-right: 20px;
      }
    }
  }

  .title {
    h4 {
      font-size: 32px;
    }
  }

  .section_03 {
    background: linear-gradient(90deg, rgba(245, 230, 232, 1) 0%, rgba(237, 235, 235, 1) 50%, rgba(237, 242, 246, 1) 100%);

    .title {
      h4 {
        color: #4795ff;
        margin-bottom: 5px;
      }

      h3 {
        font-size: 50px;
        font-weight: 400;
        margin-top: .5em;
        margin-bottom: 1em;

        span {
          font-weight: 600;
          position: relative;
          display: inline-block;
          z-index: 5;

          &:after {
            content: '';
            width: 100%;
            height: 1em;
            display: block;
            background: var(--fff);
            position: absolute;
            top: 0;
            z-index: -1;
            margin: 0 auto;
          }
        }
      }
    }

    h5 {
      font-size: 30px;
      font-weight: 400;

      span {
        color: #ff5686;
        font-weight: 700;
        position: relative;
        display: inline-block;
        z-index: 1;

        &:after {
          content: '';
          background: #ffd4dd;
          display: inline-block;
          width: 100%;
          height: 82%;
          position: absolute;
          left: 0;
          z-index: -1;
        }
      }
    }

    .auto_height {
      max-width: 900px;
      width: 900px;
      height: 520px;
      margin: 10px auto 40px auto;
      position: relative;
      padding: 0;
      

      > div {
        position: absolute;
        z-index: 1;
        text-align: left;
        margin: 60px 40px;
        background: #fdd4d7;
        
        

        > h5 {
          color: #6653ef;
          margin-bottom: 16px;
        }

        > h3 {
          background: #fd2367;
          color: var(--fff);
          padding: 0 10px;
          font-weight: 800;
          margin-bottom: 20px;

          span {
            font-weight: 300;
          }
        }
      }
    }
  }

  .section_04 {
    background: url('../images/aesthetic_02_4_bg.jpg') #f0f6f8 center top;
    padding: 290px 0 120px;

    > ul {
      display: flex;
      justify-content: center;
      gap: 490px;
      align-items: center;
      position: relative;

      > li {
        &:first-child {
          text-align: left;
        }

        > h5 {
          border: 3px solid #35405d;
          display: inline-block;
          padding: 5px 20px 0;
          border-radius: 100px;
          margin-bottom: 5rem;
          font-weight: 800;
        }

        > h3 {
          font-size: 46px;
          font-weight: 400;
          letter-spacing: -4px;

          span {
            font-size: 50px;
            font-weight: 800;
          }
        }

        > ul {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 20px;
          max-width: 520px;
          position: absolute;
          margin-top: 113px;

          > li {
            span {
              font-size: 30px;
              font-family: 'GmarketSans';
              font-weight: 600;
              background: #35405d;
              color: var(--fff);
              padding: 10px 20px 0;
              display: inline-block;
            }
          }
        }
      }
    }
  }

  .section_05 {
    background: linear-gradient(180deg, rgba(255, 232, 234, 1) 0%, rgba(255, 217, 222, 1) 100%);

    .title {
      h3 {
        font-size: 54px;
        font-weight: 400;

        span {
          font-family: 'Noto Serif JP';
          color: #f97184;
          vertical-align: middle;
          font-weight: 800;
        }
      }

      h4 {
        background: #35405d;
        color: var(--fff);
        display: inline-block;
        padding: 10px 40px;
        border-radius: 100px;
        margin-top: .5em;
        margin-bottom: 50px;
      }
    }

    > ul {
      display: flex;
      justify-content: center;
      gap: 1em;
      position: relative;
      z-index: 1;

      > li {
        > img {
          display: block;
        }

        > div {
          background: #f97184;
          color: var(--fff);
          padding: 30px 0 20px 0;

          p {
            font-size: 20px;
            font-family: 'GmarketSans';
            line-height: 1.2;
            margin-bottom: 10px;
          }

          h5 {
            color: var(--fff);
            font-size: 30px;
            letter-spacing: -.01em;
          }
        }
      }
    }

    > img {
      position: absolute;
      z-index: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .section_06 {
    background: #f8f8f8;
    text-align: center;

    > ul {
      display: flex;
      justify-content: center;
      gap: 1em;

      img {
        display: block;
      }
    }

    > h5 {
      color: #bdc3c6;
      font-family: "Noto Serif KR", serif;
      font-weight: 400;
      margin: 5rem 0;
    }

    > ul.ul_one {
      margin-left: 122px;

      li:first-child {
        img {
          border-radius: 30px 0 0 30px;
        }
      }

      > li:last-child {
        position: relative;
        padding: 40px 50px;
        text-align: left;

        * {
          position: relative;
          z-index: 1;
        }

        &:after {
          content: '';
          background: var(--fff);
          display: block;
          height: 100%;
          position: absolute;
          width: 632px;
          z-index: 0;
          top: 0;
          border-radius: 0 30px 30px 0;
          left: 0;
        }

        img {
          margin-left: -10px;
          position: relative;
        }

        h3 {
          font-size: 42px;
          font-weight: 700;
          margin-bottom: .2em;
        }

        h6 {
          font-weight: 400;
        }
      }
    }

    > ul.ul_two {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      margin-bottom: 5em;

      > li {
        width: 632px;
        display: flex;
        align-items: center;
        background: #eeeff1;
        border-radius: 30px;
        position: relative;
        text-align: left;

        &:first-child,
        &:nth-child(4) {
          > div {
            position: absolute;
            color: var(--fff);
            text-align: center;
            left: 0;
            right: 0;

            h4 {
              color: var(--fff);
            }
          }
        }

        &:last-child {
          display: none;
        }

        &:nth-child(2) {
          img {
            position: absolute;
            right: 0;
            z-index: 1;
            margin-top: -30px;
          }
        }

        &:nth-child(3) {
          display: flex;
          justify-content: flex-end;

          > img {
            position: absolute;
            left: -20px;
          }

          ul {
            display: flex;
            justify-content: center;
            gap: 1em;
            margin-bottom: 1em;
          }
        }

        &:nth-child(5) {
          > img {
            position: absolute;
            left: -20px;
          }

          ul {
            display: flex;
            justify-content: center;
            gap: 1em;
            margin-bottom: 1em;
          }
        }

        > div {
          padding: 0 30px;
          color: #000;
        }

        > img {
          border-radius: 30px;
        }

        h4 {
          font-size: 30px;
          color: #000;
          font-weight: 600;

          em {
            color: var(--color_1);
          }
        }

        p {
          font-size: 17px;
          margin-top: 10px;
          margin-bottom: 0;
        }
      }
    }

    > ul.ul_three {
      display: flex;
      justify-content: space-between;
      max-width: 1282px;
      margin: 0 auto;
    }
  }

  .section_07 {
    background: url(../images/aesthetic_02_7_bg.jpg);

    h3 {
      color: var(--fff);
      font-size: 54px;
      margin: 10px;
      font-weight: 700;
    }

    h5 {
      color: var(--fff);
      font-size: 30px;
      font-weight: 400;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      max-width: 1200px;
      margin: 0 auto;
      justify-content: center;
      margin-top: 50px;

      li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        img {
          display: block;
        }
      }
    }

    > div {
      margin-top: 50px;

      span {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: var(--fff);
        border-radius: 10px;
        margin: 10px;

        &:first-child {
          background: none;
          border: 2px solid var(--fff);
          width: 4px;
          height: 4px;
        }
      }
    }
  }

  .section_08 {
    padding-top: 0;
    padding-bottom: 50px;
  }

  @media screen and (max-width: 767px) {

    section {
      padding: 50px 15px;
    }

    .title {
      h4 {
        font-size: 1em;
      }
    }

    .section01 {
      img.mobile {
        display: block !important;
      }
    }

    .section_02 {
      .title {
        h3 {
          font-size: 1.6em;
          letter-spacing: -.3px;

          img {
            width: 2.6em;
            margin-left: -14px;
            margin-top: -9px;
          }
        }
      }

      > ul {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 2em;
        margin-bottom: 2em;

        img {
          border-radius: 10px;
        }

        > li {
          width: calc(50% - 5px);

          &:first-child {
            width: 100%;
          }

          > div {
            gap: 10px;

            > img {
              width: calc(50% - 5px);
            }
          }

          > h4 {
            font-size: 1.2em;
            margin: 10px 0;

            img {
              width: 45px;
              right: -15px;
              bottom: -6px;
            }
          }

          &:last-child {
            > h4 {
              padding-right: 0;
            }
          }

          h5 {
            font-size: 1em;

            span {
              font-size: 1.1em;
            }
          }
        }
      }

      > h4 {
        font-size: 1em;
        border-width: 3px;
        padding: 10px 10px 7px 10px;
        display: flex;

        img {
          width: 50px;
          margin-right: 10px;
        }
      }
    }

    .section_03 {
      .title {
        h3 {
          font-size: 18px;
        }
      }

      .auto_height {
        width: auto;
        height: auto;
        padding-bottom: 56.32%;
        margin: 20px 0;

        div {
          margin: 7vw 4.5vw;

          h5 {
            font-size: 3vw;
            margin-bottom: 2vw;
          }

          h3 {
            font-size: 5vw;
            padding: 0 2vw;
            margin-bottom: 1vw;
          }
        }
      }

      h5 {
        font-size: 1em;
      }
    }

    .section_04 {
      padding: 50px 0;
      background-size: 770px;
      background-position: bottom center;
      background-repeat: no-repeat;

      > ul {
        gap: 0;
        display: flex;
        flex-direction: column;
        margin-left: 0;

        > li {
          > h5 {
            margin-bottom: 1em;
          }

          > h3 {
            font-size: 24px;
            margin-bottom: 0;

            span {
              font-size: 36px;
            }

            + img {
              width: 220px;
            }
          }

          &:first-child {
            text-align: center;
            margin-bottom: 72px;
          }

          > ul {
            position: relative;
            gap: 50px 0;
            margin-top: 0;
            margin-bottom: 60px;
            display: flex;
            justify-content: space-between;
            margin: 0 10px 60px;

            > li {
              width: 50%;
              text-align: left;

              &:nth-child(2n) {
                text-align: right;
              }

              span {
                font-size: 14px;
                padding: 7px 7px 2px;
              }
            }

            + img {
              display: none;
            }
          }
        }
      }
    }

    .section_05 {
      .title {
        h3 {
          font-size: 24px;

          span {
            font-size: 35px;
          }
        }

        h4 {
          margin-top: 1em;
          padding: 6px 15px;
          margin-bottom: 30px;
        }
      }

      > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        > li {
          width: calc(50% - 5px);

          > div {
            padding: 15px 0 5px;

            p {
              font-size: .9em;
              margin-bottom: 5px;
              letter-spacing: -.2px;
            }

            h5 {
              font-size: 20px;
            }
          }
        }
      }
    }

    .section_06 {
      > ul.ul_one {
        margin-left: 0;
        display: flex;
        flex-direction: column;

        li:first-child {
          img {
            border-radius: 20px 20px 0 0;
          }
        }

        > li:last-child {
          background: var(--fff);
          border-radius: 0 0 20px 20px;
          padding: 20px 0;
          text-align: center;

          img {
            margin: 0;
          }

          h3 {
            font-size: 24px;
            margin-top: 10px;
          }

          h6 {
            font-size: 14px;
            margin-top: 10px;
          }

          &:after {
            display: none;
          }
        }
      }

      > h5 {
        margin: 2em 0;
        font-size: 1.5rem;
      }

      > ul.ul_two {
        margin-bottom: 2em;

        > li {
          border-radius: 20px;

          &:nth-child(3) {
            display: none;
          }

          &:nth-child(5) {
            display: flex;
            justify-content: flex-end;

            > img {
              width: 160px;
              left: 0;
            }

            ul {
              gap: .5em;

              img {
                width: 70px;
              }
            }
          }

          &:nth-child(2) {
            img {
              width: 150px;
              margin-top: 40px;
            }
          }

          &:nth-child(3) {
            > img {
              width: 160px;
              left: 0;
            }

            ul {
              gap: .5em;

              img {
                width: 70px;
              }
            }
          }

          > div {
            padding: 20px 15px;
          }

          > img {
            border-radius: 20px;
          }

          h4 {
            font-size: 18px;
            letter-spacing: -1px;
          }

          p {
            font-size: 11px;
            margin-top: 5px;
          }
        }
      }

      > ul.ul_three {
        gap: .5em;
      }
    }

    .section_07 {
      h3 {
        font-size: 23px;
        margin: 0;
        margin-bottom: .4em;
        font-weight: 600;
      }

      h5 {
        font-size: 1em;
      }

      ul {
        margin-top: 2em;
        gap: 10px;

        li {
          width: calc(33.333333% - 7px);
          gap: 10px;

          &:first-child {
            width: 100%;
          }
        }
      }

      > div {
        margin-top: 2em;
      }
    }

    .section_08 {
      .inwrap {
        margin: 0;
      }
    }
  }
}


/* vod */
.auto_height {position: relative;width: 100%;height: 0;padding-bottom: 56.21%;margin-bottom: 0;}
.auto_height iframe, .auto_height video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
@media screen and (max-width:  768px) {
  .content_wrap p.auto_height {margin-bottom:0 }
}


  /* 원데이 임플란트 */
  
    .total_01 {
      .section01{
        .inwrap{
          .flex{
            display:flex;
            align-items: center;
          }
          .checkList{
            margin-bottom:0;
            li{
              min-width: 34rem;
            }
          }
        }
      }
      .section01{
        .inwrap{
          .subTit{
            h2{
              font-family: 'Noto Serif JP';
            }
          }
        }
      }
      .section02 {
        .inwrap {
          .subTit{
            h2{
              font-family: 'Noto Serif JP';
            }
          }
          >ul {
            li {
              display: inline-block;
  
              >h5 {
                background: #aaa;
                margin: 0 10px 20px;
                padding: 10px;
                color: #fff;
                border-radius: 50px;
              }
  
              &:last-child {
                >h5 {
                  background: var(--color_4);
                }
  
                ul {
                  >li {
                    >div {
                      border-color: var(--color_4);
                    }
  
                    &:after {
                      display: none;
                    }
                  }
                }
              }
  
              &:first-child {
                >ul {
                  >li {
                    position: relative;
                  }
                }
              }
  
              >ul {
                >li {
                  >div {
                    width: 150px;
                    height: 150px;
                    border: 5px solid #aaa;
                    margin: 0 20px;
                    border-radius: 100%;
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    padding: 42px 0px;
  
                    h5 {
                      line-height: 1.2;
                      font-size: 2.4rem;
                    }
                  }
  
                  &:after {
                    content: '\E819';
                    font-family: 'icon-font';
                    position: absolute;
                    right: -24px;
                    top: 50%;
                    font-size: 3em;
                    margin-top: -39px;
                    color: #aaa;
                  }
                }
              }
            }
          }
        }
      }
  
      .section03 {
        .subTit{
            h2{
              font-family: 'Noto Serif JP';
            }
          }
        table {
          width: 100%;
  
          th {
            padding: 10px;
            font-weight: 400;
            background: #aaa;
            border: 1px solid var(--line);
            color: var(--fff);
            font-size: 2rem;
            font-weight: 600;
          }
  
          tr {
            td {
              text-align: center;
              padding: 2rem 0;
              font-weight: 400;
              border: 1px solid var(--line);
              vertical-align: middle;
              font-weight: 800;
              color: var(--font_333);
              font-size: 2rem;
  
              &:first-child {
                font-size: 2rem;
                font-weight: 400;
                background: var(--font_666);
                color: #fff;
                border: 2px solid var(--font_666);
                font-weight: 800;
              }
            }
  
            &.day {
              td {
                &:first-child {
                  border: 3px solid var(--color_1);
                  background: var(--color_1);
                  border-right: 0;
                }
  
                &:nth-child(2) {
                  border: 3px solid var(--color_1);
                  -moz-box-sizing: border-box;
                  -webkit-box-sizing: border-box;
                  box-sizing: border-box;
                }
              }
            }
          }
        }
      }
  
      .section04 {
        .inwrap {
          .subTit{
            h2{
              font-family: 'Noto Serif JP';
            }
          }
          .checkList {
            gap:5rem 2.2rem;
            margin-bottom: 0;
            
            li {
              position: relative;
              display: flex;
              flex-direction: column;
              padding: 4rem 5rem 3rem;
              gap: 0;
              width: 100%;
              max-width: 48rem;
              
              .num {
                font-size: 4rem;
                font-family: "Poppins", sans-serif;
                background: var(--fff);
                color: var(--color_1);
                font-weight: 700;
                position: absolute;
                left: 50%;
                top: 0;
                display: block;
                width: 7rem;
                height: 7rem;
                line-height: 6rem;
                border-radius: 10rem;
                border: 5px solid var(--color_1);
                transform: translate(0%, -50%);
              }
  
              h4 {
                font-size: 3rem;
                color: var(--fff);
                font-weight: 700;
              }
  
              P {
                font-size: 2rem;
                font-weight: 400;
                line-height: 1.4;
                margin-top: 1rem;
              }
              &:nth-child(2){
                .num{
                  color: var(--color_2);
                  border-color: var(--color_2);
                }
              }
              &:nth-child(3){
                .num{
                  color: var(--color_3);
                  border-color: var(--color_3);
                }
              }
              &:nth-child(4){
                .num{
                  color: var(--color_4);
                  border-color: var(--color_4);
                }
              }
            }
          }
        }
      }
      .section05{
        .inwrap{
          .subTit{
            h2{
              font-family: 'Noto Serif JP';
            }
          }
        }

      }
    }



  @media screen and (max-width: 767px) {

    /* 원데이 임플란트 */
    .total_01 {
      .section01{
        .inwrap{
          .checkList{
            li{
              min-width: 100%;
            }
          }
        }
      }
      .section02 {
        .inwrap {
        > ul{
          > li{
            display:block;
            >
            h5{
              display: block;
            margin: 0;
            font-size: 1.6rem;
            width: 100%;
            }
            >
            ul{
              margin-bottom:20px;
              >
            li{
                margin-top:10px;
                
                >
            div{
                  width: 100px;
            height: 100px;
            margin: 0 15px 0 5px;
            padding: 28px 0;
            h5{
                        font-size: 1.6rem;
                  }
                }
              
              }
            }
            &:first-child{
              > ul{
                > li:after{
                  font-size: 3rem;
            right: -11px;
            margin-top: -2.5rem;
                }
              }
            }
            &:last-child{
              > ul{
                > li{
                    > div{
            margin-right:0;   
                  }
                }
              }
    
            }
          
          }
        }
        }
      }

      .section03 {
        table {
        th {
            padding: 5px 0;
            font-size: 1.4rem;
            vertical-align: middle;
            line-height: 1.2em;
          }

          tr {
            td {
              padding: 5px 0;
              font-size: 1.4rem;
              line-height: 1.2em;
              
              &:first-child {
              font-size: 1.4rem;
              }
            }

            &.day {
              td {
                &:first-child {
                
                }

                &:nth-child(2) {
                
                }
              }
            }
          }
        }
      }
      .section04 {
        .inwrap {
          .checkList {gap: 4rem 0rem;margin-top: 4rem;
            li {
              padding: 3rem 2rem 2rem;
              
              .num {
                font-size: 3rem;
                width: 4rem;
                height: 4rem;
                line-height: 4rem;
              }

              h4 {
                font-size: 2rem;
              }

              P {
                font-size: 1.4rem;
              
              }
              &:nth-child(2){
                .num{
                
                }
              }
              &:nth-child(3){
                .num{
                
                }
              }
              &:nth-child(4){
                .num{
                
                }
              }
            }
          }
        }
      }
    }

 
}


@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;
  }
}

/* 메인  */
.main {
  font-family: 'Spoqa Han Sans Neo', 'Spoqa Han Sans JP', sans-serif;
  h1,h2,h3,h4,h5,h6 {
  font-family: 'Spoqa Han Sans JP', sans-serif;
  }
  >section {
    .title{
      padding-top: 15rem;
      
      h2{
        color: var(--font-141414);
        font-size: 5rem;
        
        
        
        
        
        
        span{
          color: var(--color_main);
        }
        
      }
      h3{
        font-size: 3.6rem;
        color:#838383;
        font-weight: 300;
        margin-top: 1em;
        letter-spacing: -.05em;
      }
    }
    .subTitle{
      margin-bottom:6rem;
      
      
      
      
      .dots{
        margin-top: 12rem;
        margin-bottom: 2rem;
        display: flex;
        justify-content: center;
        gap: 3rem;
        
        span{
          display: inline-block;
          width: 2rem;
          height: 2rem;
          border-radius: 2rem;
          background-color: var(--color_main);
          position:relative;
          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 188, 212, 0.4);
            animation: pulse-ring 2s infinite;
          }
        }
      }
      h4{
        font-size: 3.6rem;
        color:var(--color_main);
        font-weight: 600;
      }
      h5{
        font-size: 3.2rem;
        font-weight: 300;
        color: var(--font_color);
        margin-top: .5em;
        margin-bottom: 5rem;
        }
    }
    .inwrap{
      padding: 0rem 0 15rem 0;
      margin: 0 auto;
    }
  }
  .main_visual {
    position: relative;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;

    .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 80%;
        animation: main_visual 4s forwards;
      }
    }

    > .inwrap {
      position: absolute;
      z-index: 1;
      bottom: 0rem;
      left: 50%;
      transform: translate(-50%, 0);
      width: 100%;
      text-align: left;
      
      h2 {
        font-weight: 300;

        b {
          display: block;
          font-weight: 800;
          color: var(--fff);
          font-size: 6.6rem;
        }

        span {
          display: block;
          color: #d5d5d5;
          font-size: 6rem;
        }
      }
    }

  }
  @media (max-width: 768px) {
    
    > section{
      .inwrap{
          margin: 0 2rem;
          padding: 0rem 0 7.5rem 0;
        }
      .title{
        padding-top: 7.5rem;
        h2{
          font-size: 2.3rem;
        }
        h3{
          font-size: 1.5rem;
        }
      }
      .subTitle{
        margin-bottom: 2rem;
        
        
        
        
        
        
        
        .dots{
        margin-top: 4rem;
        gap: 1.5rem;
        margin-bottom: 1rem;
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
          span{
            width: 1rem;
            height: 1rem;
          }
        }
        h4{
          font-size: 1.8rem;
        }
        h5{
          font-size: 1.6rem;
          margin-bottom: 2.5rem;
        }
      }
      }  
   
    
    .main_visual{
      .inwrap{
        bottom: 7rem;
        transform: translate(0%, 0);
        left: 0;
        
        
        
        
        
        
        
        
        
        
        
        h2{
          b{
            font-size: 3.3rem;
          }
          span{
            font-size: 3rem;
          }
        }
      }
    }
  }


  /* 통계 섹션 */
  .section01 {
    background-image: url(../images/main_section_01_BG.jpg);
    color: var(--fff);
    border-radius: 0;
    display: flex;
    align-items: center;
    min-height: 100vh;

    .content-wrap {
      width: 100%;

      .inwrap {
        display: flex;
        justify-content: space-between;
        align-items: center;

        >div {
          padding-top:15rem;
          ul {
            display:flex;
            flex-direction: column;
            gap: 5rem;

            li {
              text-align:left;
              p{
                display:flex;
                gap: 1rem;
              }

              strong {
                font-size: 15rem;
                font-weight: 800;
                line-height: 1.1;
                /* width: 36rem; */
                display: inline-block;
                font-family: "LINE Seed JP";
                letter-spacing: -.08em;
              }

              .plus {
                font-size: 15rem;
                font-weight: 700;
                line-height: 1.1;
              }

              span {
                font-size: 3.2rem;
                /* font-weight: 800; */
              }
            }
          }

          +div {
            text-align: right;

            h2 {
              font-weight: 800;
              color: var(--fff);
              margin-bottom: .5rem;
              font-size: 4.5rem;
            }

            h3 {
              font-size: 4rem;
              color: #c5e3e8;
            }
          }
        }
      }

    }

  }
  @media (max-width: 768px) {
    .section01 {
      .content-wrap {
        padding: 10rem 0;

        .inwrap {
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 4rem;
          
          >div {
            padding-top:0;
            >ul {
              display: flex;
              flex-direction: column;
              gap: 3rem;

              >li {
                display: flex;
                flex-direction: column;
                align-items: center;
                strong{
                  font-size: 7.5rem;
                }
                .plus {
                  font-size: 5rem;
                }

                span {
                  font-size: 2rem;
                }

              }
            }

            &+div {
              text-align: center;

              h2 {
                letter-spacing: 0;
                font-size: 2.3rem;
              }

              h3 {
                font-size: 2rem;
              }
            }
          }
        }
      }
    }


  }

  /* 파트너쉽 */
  .section02{
    .inwrap{
      ul{
        display: flex;
        margin-top: 8rem;
        justify-content: space-between;
        
        
        
        li{
          img{
            border:1px solid var(--main_color);
            border-radius: 10px;
            display: block;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
          }
          h4{
            font-size:2.6rem;
            font-weight:600;
            color: var(--font-141414);
            margin-top: 1em;
          }
          &:last-child{
            h4 {
              line-height:2.8em;
            }
          }
        }
      }
    }
  }
  @media (max-width: 768px) {
    .section02{
      .inwrap{
        ul{
          flex-wrap: wrap;
          gap: 2.5rem 1rem;
          margin-top: 4rem;
          
          
        li{
            width: calc( 50% - 1rem);
        h4{
              font-size: 1.6rem;
              margin-top: 1rem;
            }
          }
        }
    
        
      }
      
    }
  }

  /* section03 */
  .section03{
    background-image: url(../images/main_section_03_BG.jpg) ;
    padding:5rem 0;
    background-size: cover;
    h2{
      font-size: 4.5rem;
      color:#4a6e77;
    }
    h3{
      font-size: 4rem;
      color:#6d929b;
      margin-top: 2rem;
    }
  }
  @media (max-width: 768px) {
    .section03{
      
    }
  }

  /* section04 */
  .section04{
    .inwrap{
      > ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 5rem;
        &.grid{
          gap: 4.4rem;
        }
        > li {
          img{
            display: block;
          }
          p{
            background-color: var(--font_000);
            color:var(--fff);
            font-family: "LINE Seed JP", sans-serif;
            font-size: 3rem;
            padding: .8em 0;
            font-weight: 800;
          }
        }
      }
    }
  }
  @media (max-width: 768px) {
    .section04{
      .inwrap{
        > ul{
          margin-top: 2rem;
          
          
          
          
          
          
          
          > li{
            width: calc(50% - .5rem);
            
            
            p{
              padding: .3rem 0 .7rem 0;
              font-size: 1.5rem;
            }
          }
          &.grid{
            gap: 1rem;
          }
        }
      }
    }
  }

   /* section05 */
  .section05{
    background: #ecf5f7;
    .inwrap{
      > ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 5rem;
        gap: 5rem 0;
        
        > li {
          img{
            display: block;
          }
          ul{
            display: flex;
            gap: 1rem;
            
            li{
              position:relative;
              &:after {
                content: '\E819';
                font-family: 'icon-font';
                font-size: 6rem;
                background: var(--fff);
                border-radius: 10rem;
                position: absolute;
                top: 50%;
                display: block;
                width: 6rem;
                height: 6rem;
                line-height: 6rem;
                color: var(--main_color);
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
                transform: translate(59% , -100%);
                right: 0;
                z-index: 1;
              }
              &:last-child {
                &:after{
                  display:none;
                }
                p {
                  background-color: var(--color_main);
                }
              }
            }
          }
          p{
            background-color: #aac3d1;
            color:var(--fff);
            font-family: "LINE Seed JP", sans-serif;
            font-size: 3rem;
            padding: .8em 0;
            font-weight: 800;
          }
        }
      }
    }
  }
  @media (max-width: 768px) {
    .section05{
      .inwrap{
        > ul {
          margin-top:0;
          gap: 2rem 0;
          > li{
            > ul{
             li{
               p{
                 font-size: 1.5rem;
                 padding: .4em 0;
               }
               &:after{
                 font-size: 4rem;
                 width: 4rem;
                 height: 4rem;
                 line-height: 4rem;
               }
             }
            }
            > ul.threeList{
              > li{
                &:nth-child(2){
                  display:none;
                }
              }
            }
          }
        }
      }
    }
  }

   /* section06 */
  .section06{
    .inwrap{
      > ul {
        display: inline-flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 5rem;
        gap: 1.5rem;
        > li {
          position:relative;
          img{
            display: block;
          }
          > div{
            opacity:0;
            background: rgba(38, 165, 187, 0.70);
            color:var(--fff);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            transition: all 0.4s ease-in-out;
            cursor: pointer;
            
            h4{
              color:var(--fff);
              font-size: 3rem;
              font-weight: 600;
              margin-bottom: 1rem;
            }
            p{
              font-size: 2rem;
              font-weight: 400;
            }
          }
          &:hover{
            > div{
              opacity:1;
          }
        }
      }
    }
  .owl-carousel{
    margin-top: 5rem;
    .owl-stage-outer{
      
    }
    .owl-nav{
      position:absolute;
      width: 100%;
      top: 50%;
      font-size: 5rem;
      margin-top: -9rem;
      
      [class*=owl-]:hover{
        background:none;
        color: var(--color_1);
      }
      span {
        display:none;
      }
      .owl-prev {
        left: -70px;
        position: absolute;
        &:before{content:'\E81D';font-family:'icon-font';}
      }
      .owl-next {
        position: absolute;
        right: -70px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        
        &:after{content:'\E81D';font-family:'icon-font';}
      }
    }
  }
  .owl-dots{
      display:flex;
      gap:1rem;
      margin-top: 2rem;
    .owl-dot{
      opacity:.5;
      img{
        display:block;
       
      } 
      &.active{
        opacity:1;
      }
    }
  }
  }

  }
  @media (max-width: 768px) {
    .section06{
      .inwrap{
        ul{
          li{
            width:calc( 50% - 1rem);
            img{
              width:100%;
            }
            &.first-child{
              width:100%;
            }
          }
        }
        .owl-dots{
          display: flex;
          flex-wrap: wrap;
          gap: .5rem;
          margin-top: 1rem;
          
          .owl-dot{
            width: calc( 20% - .4rem);
          }
        }
      }
    }
  }  
}

@keyframes main_visual {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);

  }
 
}