@charset "UTF-8";

/* header */
header {
  position: fixed;
  left: 50%;
  top: 7rem;
  margin-left: -70rem;
  transition: all 0.4s ease-in-out;


  >.inwrap {
    display: flex;
    flex-direction: column;
    gap: 8rem;

    .logo_area {

      a {
        display: block;

        img {
          max-width: 180px;
        }

        img.main {
          display: none;
        }
      }

    }

    nav {
      .lnb {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        transition: all 0.4s ease-in-out;

        >li {
          font-size: 1.8rem;
          border-bottom: 1px solid var(--C6C3C2);

          b {
            font-family: "Urbanist", sans-serif;
            font-size: 2rem;
            letter-spacing: 0;
            padding: 2rem 0;
            display: inline-block;
          }


          >a {
            padding: 2rem 0;
            display: block;
            line-height: 1;
            position: relative;
            /* border-bottom: 1px solid var(--C6C3C2); */
            transition: all 0.4s ease-in-out;


            span {
              display: inline-block;
              position: relative;

              &:after {
                content: '';
                position: absolute;
                top: -20px;
                height: 5px;
                width: 5px;
                border: 2px solid var(--color_main);
                border-radius: 100px;
                right: -15px;
                z-index: 0;
                -webkit-transition: all 0.5s;
                -moz-transition: all 0.5s;
                -ms-transition: all 0.5s;
                -o-transition: all 0.5s;
                transition: all 0.5s;
                transform: scale(0);
              }
            }
          }

          &:hover,
          &.active {
            >a {
              font-weight: 600;
              color: var(--000);

              span {
                &:after {
                  transform: scale(1);
                }
              }

            }
          }

          &.tel {
            text-align: center;

            a {
              font-size: 1.25em;
              font-weight: 600;
              color: var(--000);
              display: flex;
              justify-content: center;
              gap: 1rem;

              i {
                &:before {
                  margin: 0;
                }
              }
            }
          }
        }
      }

      .menu_wrap {
        position: fixed;
        right: 4rem;
        top: 4rem;
        width: 5rem;
        height: 5rem;
        cursor: pointer;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        margin-top: -8rem;

        #menu_but {

          &:before,
          &:after,
          span {
            content: '';
            width: 5rem;
            height: 3px;
            display: block;
            background: var(--color_main);
            position: relative;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            margin-top: 1rem;
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin:
              center center;
          }

          span {}
        }

      }

      .sns {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;

        li {
          a {
            display: block;

            i {
              background: var(--000);
              color: var(--fff);
              font-size: 3rem;
              border-radius: 100%;
              line-height: 5.2rem;
              height: 5.2rem;
              display: inline-block;
              width: 5.2rem;
              text-align: center;
            }

            span {
              display: none;
            }
          }
        }
      }
    }
  }

  &.f_nav {
    top: 4rem;
  }

  &.open {}
}

@media (max-width: 1400px) {}

/* subLayout */
.subWrap {
  max-width: 1400px;
  margin: 33rem auto 10rem auto;
  padding-left: 25rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  .page_tit {
    position: absolute;
    z-index: 2;
    margin-top: 10rem;
    top: 0;


    h1 {
      font-size: 5.4rem;
      color: var(--color_main);
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 2rem;
      margin-bottom: 2rem;
      font-family: 'Gyeonggi';
      letter-spacing: -.5rem;
      
      
      
      
      
      
      
      
      
      
      

      &:after {
        content: '';
        display: inline-block;
        width: 2rem;
        height: 2rem;
        border: .8rem solid var(--color_main);
        border-radius: 100%;
      }
    }

    .sub_nav {
      display: flex;
      gap: 2rem;

      li {
        a {
          font-size: 1.8rem;
          border: 1px solid var(--000);
          border-radius: 10rem;
          display: block;
          padding: 1rem 3rem;
          transition: all 0.4s ease-in-out;
          background: var(--fff);
          color: var();
        }

        &:hover,
        &.active {
          a {
            background: var(--000);
            color: var(--fff);
          }
        }
      }
    }

    &.f_nav {
      position: fixed;
      top: -15rem;
      background: var(--fff);
      width: 100%;
      padding-bottom: 3rem;

      h1 {
        margin-top: -5rem;
        margin-bottom: 5rem;
      }
    }
  }

  >section {
    .sub_tit {
      font-family: 'GounBatang';
      color: var(--color_main);
      font-size: 4rem;
      padding-top: 10rem;
      margin-bottom: 8rem;
      position: relative;
      margin-top: 5rem;

      span {
        background: var(--fff);
        padding-right: 2rem;

        &:after {
          content: '';
          display: block;
          width: 1.8rem;
          height: 1.8rem;
          border: .6rem solid var(--color_main);
          border-radius: 10rem;
          background: var(--fff);
          position: absolute;
          right: 0;
          top: 82%;
          transform: translate(0%, -50%);
        }
      }

      &:after {
        content: '';
        display: block;
        width: 100%;
        height: .2rem;
        background: var(--color_main);
        position: absolute;
        top: 82%;
        z-index: -1;
        transform: translate(0%, -50%);
      }
    }

    .sub_tit2 {
      font-size: 4rem;
      padding-top: 10rem;
      margin-bottom: 5rem;
      font-family: 'Pretendard';
      padding-left: 5rem;
      margin-top: 5rem;

      &:before,
      &:after {
        content: '';
        position: absolute;
        display: block;
        background: var(--000);
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 10rem;
        position: absolute;
        left: 0;
        margin-top: 5rem;
        transform: translate(0%, -50%);
        top: 50%;
      }

      &:after {
        /* margin-top: -3.6rem; */
        /* margin-left: 1.2rem; */
        transform: translate(80%, -50%);
      }
    }

    p {
      font-size: 2.4rem;
      line-height: 2;
      margin-top: 3em;


      &+P {
        margin-top: 1.5em;
      }
    }

    .flex_center {
      display: flex;
      justify-content: center;
      gap: 2rem;
    }

    h4 {
      font-size: 3.6rem;
      font-weight: 800;
      margin-top: 5rem;
      line-height: 1.8;
      margin-bottom: .5em;
    }

    ul.dotList {
      font-size: 2.4rem;
      line-height: 2;

      li {
        padding-left: 1.8rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        
        
        &:before{
          content:'';
          background: var(--000);
          display: inline-block;
          width: .8rem;
          height: .8rem;
          border-radius: 10rem;
        }
      }
    }
  }
}

@media (max-width: 1400px) {
  .subWrap {
    padding: 0 5rem;
    margin-top: 22rem;
    .page_tit {
      margin-top: 4rem;
      &.f_nav {
        position: fixed;
        top: -9rem;
        background: var(--fff);
        width: 100%;
        padding-bottom: 3rem;
        h1 {
          margin-top: -5rem;
          margin-bottom: 5rem;
        }
      }
    }

    >section {
      >img {
        width: 100%;
      }
      .sub_tit2{
        font-size:3rem;
        padding-left: 3.5rem;
        
        
        
        
        
        
        
        &:before {
          /* margin-top: 1.5rem; */
        }

        &:after {
          /* margin-top: -2.7rem; */
          /* margin-left: 1rem; */
        }
      }
    }
  }
}


@media (max-width: 768px) {
  .subWrap {
    padding: 0 3rem;

    .page_tit {
      margin-top: 3rem;

      h1 {
        gap: 1rem;

      }

      &.f_nav {
        top: -8.5rem;
        padding-bottom: 2.5rem;
      }

      .sub_nav {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;


        >li {
          a {
            text-align: center;
            padding: .5rem 2rem;
          }
        }
      }

    }

    >section {
      p {
        margin-top: 2em;
        line-height: 1.6;
        
        &+p {
          margin-top: 2em;
        }
      }

      .sub_tit {
        font-size: 3.2rem;
        padding-top: 3rem;
        margin-bottom: 4rem;
        margin-top: 3rem;

        span {
          padding-right: 1rem;

          &:after {
            width: 10px;
            height: 10px;
            border: 2px solid var(--color_main);
            bottom: -2px;
            top: auto;
          }
        }

        &:after {
          height: 1px;
          bottom: 12px;
          top: auto;
        }
      }

      .sub_tit2 {
        padding-top: 5rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding-left: 3.5rem;
        font-size: 3.4rem;
        position: relative;
        
        

        &:before,
        &:after{
                  margin-top: 2.4rem;
                  /* margin-top: 1.5rem; */
        }

        &:after {
          /* margin-top: -3.3rem; */
          /* margin-left: 1rem; */
        }
      }
      ul.dotList {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        
        
        
        li{
          line-height:1.2;
          padding: 0;
          position: relative;
          display: flex;
          align-items: flex-start;
          
          &:before{
           content:'-';
           width: auto;
           height: auto;
           background:none;
           top: 1px;
           position: relative;
          }  
        }
        
        
      }
      .roundBorder{
        margin-top: 3rem;
        margin-bottom: 2rem;
      }
    }
  }
}

/* about */
.about {
  #one {
    .imgWrap {
      position: relative;

      >ul {
        position: absolute;
        z-index: 1;
        color: var(--fff);
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding-left: 5rem;
        gap: 3rem;
        font-size: 2.4rem;

        li {
          display: flex;
          gap: 2rem;
          align-items: center;
          font-weight: 500;

          span {
            display: inline-block;
            background: var(--fff);
            color: var(--color_main);
            padding: .5rem 2rem;
            border-radius: 10rem;
            font-weight: 700;
          }
        }
      }
    }
  }

  #two {
    .imgWrap {
      position: relative;
      width: 100%;

      img {
        width: 100%;
      }

      >.text {
        position: absolute;
        display: flex;
        justify-content: center;
        height: 100%;
        gap: 4rem;
        font-size: 2.4rem;
        flex-direction: column;
        width: 50%;
        left: 50%;

        h3 {
          font-size: 5.5rem;
          font-weight: 800;
          font-family: GounBatang;

          span {
            font-size: .7em;
          }
        }

        ul {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;

          li {
            font-size: 2.4rem;
          }
        }

        h5 {
          font-family: GounBatang;
          font-size: 3rem;
          padding-top: 6rem;
          border-top: 1px solid var(--color_main);
          margin-top: 2rem;
        }
      }
    }
  }

  #three {
    .imgWrap {
      >ul {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        >li {
          >ul {
            display: flex;
            gap: 1rem;

            li {
              flex: 1;

              img {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  #four {
    >div {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4rem;


      >div {
        flex: 1;
        gap: 2rem;
        display: flex;
        flex-direction: column;

        dl {
          font-size: 3.2rem;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 1rem 2rem;

          dt {
            width: 16rem;

            span {
              background: var(--000);
              color: var(--fff);
              display: inline-block;
              width: 1.5em;
              height: 1.5em;
              line-height: 1.5em;
              text-align: center;
              border-radius: 10rem;
            }


          }

          dd {
            display: flex;
            align-items: center;

            i {
              margin-left: 1rem;
            }

            span {
              font-size: .8em;
            }
          }
        }

        &+div {
          dl {
            dt {
              width: auto;
            }
          }
        }
      }
    }
  }

  #five {
    .sub_tit2 {
      padding-top: 0;
      margin-top: 0;
      margin-bottom: 2rem;
      font-size: 3rem;
      
      
      &:before, &:after{
        margin-top:0;
      }
    }

    #about_map {
      width: 100%;
      height: 48rem;
      border: 1px solid var(--C6C3C2);
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-bottom: 3rem;
    }
  }
}

@media (max-width: 1400px) {
  .about{
    
  }
    
}

@media (max-width: 768px) {
  .about{
    #one{
      .imgWrap{
        ul{
          display: flex;
          padding: 0;
          width: 100%;
          
          li{
            
            flex-direction: column;
          }
        }  
      }
      
    }
    #two{
      .imgWrap{
        > .text{
          position:relative;
          background: #F2EDE9;
          width: auto;
          left: 0;
          padding: 5rem 3rem 0;
          text-align: center;
          gap: 3rem;
          
          
          h5{
            padding-top: 4rem;
          }
        }
      }
    }
    #four{
      > div {
        display: flex;
        flex-direction: column;
      }
    }
    #five{
      .sub_tit2{
        font-size: 2.5rem;
        padding-left: 0;
        
        &:before,
        &:after{
          display:none;
        }
      }
      #about_map{
        height: 30rem;
      }
    }
  }
  
}


/* child */
.child {
  #one{
    ul{
      display: flex;
      gap: 2rem;
    }
  }
}

@media (max-width: 1400px) {}

@media (max-width: 768px) {}


/* gums */
.gums {
  #one{
    ul{
      display: flex;
      gap: 2rem;
    }
  }
  #two{
    ul{
      display: flex;
      gap: 2rem;
      
      li{
        text-align:center;
        img{
          display:block;
        }
        h5{
          font-size: 2.6rem;
          font-weight:800;
          margin-top:2rem;
        }
        p{
          line-height: 1.3;
          margin-top: 1rem;
        }
      }
    }
  }
  #threeTwo{
    .imgWrap{
      position: relative;
      ul{
        position: absolute;
        right: 4rem;
        top: 50%;
        transform: translate(0px, -50%);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        
        
        
        
        
        
        
        
        li {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          border: .5rem solid var(--5C5C5C);
          
          
          
          
          
          
          
          
          &:nth-child(2){
            border-color: var(--kakaoYellow);
            position: relative;
            
            
            &:before{
              content: '\E88F';
              font-family: 'icon_font';
              width: 5rem;
              height: 5rem;
              line-height: 5.3rem;
              border-radius: 10rem;
              background: var(--fff);
              font-size: 7rem;
              text-align: center;
              position: absolute;
              left: 50%;
              top: 0;
              transform: translate(-50%, -70%);
            }
          }
          img{
            display:block;
            max-width: 30rem;
          }
        }
      }
    }
  }
}

@media (max-width: 1400px) {
  .gums {
    #two {
      ul {
        gap:1rem;
        li{
          h5{
            font-size: 2.2rem;
          }
          p{
            font-size: 2rem;
          }
        }
      }
    }
    #threeTwo{
      .imgWrap {
        ul{
          li{
            img{
              max-width: 25vw;
            }
          }
        }  
      }
      
      
    }
  }
}

@media (max-width: 768px) {
  .gums {
    #two {
      ul {
        gap:1rem;
        flex-wrap: wrap;
        
        li{
          max-width: calc( 50% - .5rem);
        }
      }
    }
    #threeTwo{
      .imgWrap {
        ul{
          position: initial;
          display: flex;
          flex-direction: row;
          transform: translate(0px, 0%);
          margin-top: 2rem;
          li{
            img{
              max-width:100%;
             
            }
            &:nth-child(2){
              &:before{
                left: 0;
                top: 50%;
                transform: translate(-50%, -50%) rotate(-90deg);
              }
            }
          }
        }  
      }
      
      
    }
  }
  
}

/* tooth */
.tooth {
  #one{
    ul{
      display: flex;
      gap: 2rem;
    }
  }
  #two{
    ul{
      display: flex;
      gap: 2rem;
      
      li{
        text-align:center;
        img{
          display:block;
        }
        h5{
          font-size: 2.6rem;
          font-weight:800;
          margin-top:2rem;
        }
        p{
          line-height: 1.3;
          margin-top: 1rem;
        }
      }
    }
  }
  #three{
    ul{
      display: flex;
      gap: 2rem;
    }
    .roundBorder{
      line-height: 2;
      border-radius: 2rem;
      padding: 2rem;
      display: block;
    }
  }  
  #four{
    ul{
      display: flex;
      gap: 5rem;
      justify-content: center;
      li{
        text-align:center;
        img{
          display:block;
          max-width: 26rem;
        }
        h5{
          font-size: 2.6rem;
          font-weight:800;
          margin-top:2rem;
        }
        p{
          line-height: 1.3;
          margin-top: 1rem;
        }
      }
    }
  }  
}

@media (max-width: 1400px) {}

@media (max-width: 768px) {
  .tooth {
    #two{
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
            width: calc(50% - 1rem);
        }
      }
    }
    #four{
      ul{
        gap:1rem;
        li{
          img{
            max-width:100%;
          }
        }
        
      }
    }
  }
}



  /*table*/
.subWrap{
  &.story{
    margin: 24rem auto 10rem auto;

}
table {
  &.line {
    width: 100%;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
    background: var(--fff);

    th {
      padding: 2rem 0;
      text-align: center;
      vertical-align: middle;
      font-size: 2rem;
      background: var(--000);
      color: var(--fff);
    }

    td {
      padding: 2rem 1rem;
      border-bottom: 1px solid var(--C6C3C2);
      font-size: 2rem;
    }
  }

  &.list {
    tr {
      td {
        text-align: center;
        vertical-align: middle;

        b {
          font-size: 1.4rem;
          color: var(--fff);
          font-weight: 400;
          margin-left: 10px;
          background: var(--color_main);
          padding: .2rem 1rem;
          border-radius: 10rem;
        }
      }

      &.notice {
        td {
          text-align: left;
          padding-left: 2rem;
          color: var(--color_sub2);
          text-align: center;


          a {
            color: var(--color_sub2);
          }

        }
      }
    }
  }
  &.view{
    tr{
      th{
        display:flex;
        padding: 10px 20px;
        text-align: left;
        justify-content: space-between;
        
        div{
          
        }
      }
      td {
        padding: 80px 20px;
        line-height: 2em;
      }
      .board_con {
        padding: 5rem;
        text-align: justify;
        p{
          margin: 0;
          line-height: 1.8;
          font-size: 2rem;
        }
      }
    }
    
  }
  &.bf_list {
    border-top: 1px solid var(--C6C3C2);
    th {
      border-bottom:1px solid var(--C6C3C2);
      background: var(--aaa);
    }
  }
}
  .btn_wrap {
    text-align: right;
    
    
    a {
      background: var(--color_main);
      color: var(--fff);
      display: inline-block;
      padding: 0 2rem;
    }
  }
}


table.view .board_con .bf_box img {
  border-radius: 0
}

table.view .board_con .bf_box ul li:first-child:after {
  margin-top: -30px;
}

/*counsel*/
/* colgroup .num {
  width: 100px;
}

colgroup .sort {
  width: 180px;
}

colgroup .review {
  width: 180px;
}

colgroup .photo {
  width: 150px;
}

colgroup .arrow {
  width: 60px;
}

colgroup .name {
  width: 100px;
}

colgroup .date {
  width: 140px;
}

colgroup .answer {
  width: 140px;
} */

/*paging*/
.paging {
  text-align: center;

  li {
    display: inline-block;
    border: 1px solid #ddd;
    width: 30px;
    height: 30px;
    line-height: 30px;
    vertical-align: top;

    a {
      display: block
    }
    &:hover,
    &.active {
      background: var(--000);
      color: #fff;
      border: 1px solid var(--000);
      a{
        color:var(--fff);
      }
    }
  }
}


.paging li a:before {
  font-family: 'icon_font';
  font-size: 11px;
  position: relative;
  display: inherit;
}

.paging li:first-child a:before {
  content: '\E878\E878';
}

.paging li:nth-child(2) a:before {
  content: '\E878';
}

.paging li:nth-last-child(2) a:before {
  content: '\E877';
}

.paging li:last-child a:before {
  content: '\E877\E877';
}


/*list_search*/
.list_search {
  display:flex;
  justify-content: flex-end;
  font-size: 2rem;
  label {
    display:none;
  }
  >input[type="text"] {
    border-right: 0;
    border: 1px solid var(--000);
    border-radius: 10rem 0 0 10rem;
    font-size: 2rem;
    padding: .5rem 2rem;
    border-right: 0;
  }
  >button[type="submit"] {
    background: var(--fff);
    border: 1px solid var(--000);
    border-left: 0;
    cursor: pointer;
    border-radius: 0 10rem 10rem 0;
    border-left: 0;
    padding: 0 1.5rem;
    font-size: 2rem;
  }
}

.subList{
  display: block;
  padding-left: 2rem;
  &::before{
    content: '-';
    margin-left: -2rem;
    margin-right: 1rem;
  }
}

@media (max-width: 768px) {
  .subWrap {
    &.story{
      margin: 14rem auto 10rem auto;
    }
  }
  .list_search{
  justify-content: center;
  }
  
}