@charset "UTF-8";



/*table*/
table.line {
    colgroup{
      .num {
        width:10rem;
      }
    .date{
      width:14rem;
    }
      .answer{
        width:14rem;
      }
  }
  
  
  
  
  
  
  
  border-top: 5px solid var(--color_1);
  width: 100%;
  margin-top: 8rem;
  
  
  
  
  
  

  thead {
    tr {
      th {
        font-weight: 600;
        color: var(--font_333);
        padding: 2rem 0;
        text-align: center;
        border-bottom: 1px solid var(--line);
        vertical-align: middle;
        font-size: 2rem;
        /* background: var(--bg); */
        border-bottom: 2px solid var(--font_666);
        width: auto;
      }
    }
  }

  tbody {
    tr {
      td {
        padding: 20px 10px;
        border-bottom: 1px solid var(--line);

        span {
         
          &.ing,
          &.end {
            background: var(--color_1);
            color: var(--fff);
            display: inline-block;
            padding: .4rem 2rem;
            border-radius: 10rem;
            font-weight: 700;
          }

          &.end {
            background: var(--font_666);
          }
        }

        img {
            height: auto !important;
            width: 100%;
          }

     
      }
    }
  }

}
 table.view{
     strong{
       font-weight:800;
     }

        thead{
          tr{
            th {
              text-align: left;
              padding: 2rem;
              
              
              
              
              > div{
                display: flex;
                font-size: 1.6rem;
                justify-content: flex-end;
                gap: 3rem;
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                p{
                  display:flex;
                  align-items: center;
                  gap: 1rem;
                 
                  em{
                    opacity:.6;
                    font-size:1.6rem;
                    display: inline-block;
                  }
               
                }
              }
              
            }
          }
        }
        tbody{
          tr{
            td{
              > div.view_con{
                padding: 5rem 1rem;
                font-size: 1.8rem;
                text-align: left;
                
                .bf_box{
          max-width: 80rem;
          margin: 0 auto 6rem auto;
                }
              }
            }
          }
        
        
        }
     
      & + .btn_wrap {
        margin-top: 5rem;
        display: flex;
        gap: 1rem;
        justify-content: center;

        a{
          background: var(--color_1);
          border: 0;
          color: var(--fff);
          padding: .5rem 4rem;
          border-radius: 5rem;
          font-size: 2.4rem;
          font-weight: 700;
          cursor: pointer;
          &.delete {
            background: var(--color_2);
          }
          &.cancel {
            background: var(--gray);
          }
        }
      }
    }
@media (max-width: 768px) {
  table.line {
    margin-top: 4rem;

    colgroup {
      .subject {
        width: calc(100% - 10rem);
      }
      .num{
        width:5rem;
      }
      .answer {
        width: 8rem;
      }
    }

    thead {
      tr {
        th {
          font-size: 1.6rem;
          padding: 1rem 0;
        }
      }
    }

    tbody {
      tr {
        td {
          padding: 1rem 0;


          span {

            &.ing,
            &.end {
              padding: .5rem .8rem;
              font-size: 1.1rem;
              line-height: 1;
            }
          }
        }
      }
    }
  }

  table.view {
    thead{
      tr{
      th{
        padding:1rem;
      }  
      }
      
    }
    tbody{
      tr{
        td{
          > div.view_con{
            padding: 2rem 1rem;
            font-size: 1.6rem;
            .bf_box{
             margin: 0 auto 3rem auto;
            }
          }
        }
      }
    }
    & + .btn_wrap {
      margin-top:3rem;

        a{font-size: 1.8rem;padding: .5rem 2rem;}
      }
  }
}

/* paging */
.paging {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 4rem;
  /* font-size: 2rem; */
  margin-bottom: 4rem;





  li {
    display: block;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 10rem;
    
    

    &:hover,
    &.active {
      background: var(--color_1);
      color: var(--fff);

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

    a {
      display: block;
      font-weight: 800;
    }

    &:nth-child(1) a,
    &:nth-child(2) a,
    &:nth-last-child(1) a,
    &:nth-last-child(2) a {
      cursor: pointer;
      font-weight: 400;
      &:before {
        font-size: 3rem;
        content: '\e819';
        font-family: 'icon-font';
        display: block;
      }
    }

    &:nth-child(1) a,
    &:nth-child(2) a {
      &:before {
        transform: rotate(180deg);
      }
    }

    &:nth-child(1) a,
    &:nth-last-child(1) a {
      &:before {
        content: '\e819\e819';
        letter-spacing: -.75em;
      }

    }

    &:nth-child(1) a:before {
      margin-right: -2rem;
    }

    &:last-child a:before {
      margin-left: -2rem;
    }
  }
}

@media (max-width: 768px) {
  .paging {
    font-size: 1.3rem;
    gap: .5rem;

    >li {
      width: 2.8rem;
      height: 2.8rem;
      line-height: 2.8rem;
          &:nth-child(1), &:nth-child(2), &:nth-last-child(1), &:nth-last-child(2) {
            a{
            &:before {
                font-size: 2rem;
              }  
            }
            
          }

    }
  }

}

/*list_search*/
.list_search {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 70rem;
  margin: 0 auto;
  margin-top: 4rem;
  
  
  
  

  >input[type="text"] {
    padding: 0;
    margin-left: 2rem;
    border: 0;
  }

  >input[type="submit"] {
    background: var(--color_1);
    border: 0;
    color: var(--fff);
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1.6rem;
    font-weight: 700;
  }
}

@media (max-width: 768px) {
  .list_search {
    padding: .6rem;

    >input[type="submit"] {
      font-size: 1.4rem;
      padding: .8rem 1.5rem;
    }
  }

}

.bf_box {
    > ul{
      display:flex;  
      a{
      display:flex;  
      }
      li{
        width: 50%;
        /* float: left; */
        padding: 1px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        line-height: 0;
        
        
        
        > div{
          position:relative;
          &:before {content:'\E8D1';font-family: 'icon-font';position: absolute;z-index: 1;font-size: 2em;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;} 
        }
        
              img{
            width:100%;
          }
        &:first-child:after {
              content: '\E819';
              font-family: 'icon-font';
              position: absolute;
              background: var(--fff);
              font-size: 4em;
              width: 6rem;
              height: 6rem;
              border-radius: 100px;
              text-align: center;
              line-height: 6rem;
              top: calc( 50% - 6rem);
              color: #546475;
              right: -31px;
              z-index: 2;
              border: 1px solid var(--line);
              display: flex;
              align-items: center;
              justify-content: center;
            }
        &:last-child img {
          border-radius: 0 2rem 0 0;
        }
        &:first-child img {
          border-radius: 2rem 0 0 0;
        }
        &:last-child>div {
          border-radius: 0 2rem 0 0;
          overflow: hidden;
          position: relative;
        }
        &:last-child img.blur {
          opacity: .5;
        }
        &:last-child>div:after {
          content: '';
          background: rgba(255, 255, 255, 0.4);
          display: block;
          position: absolute;
          z-index: 1;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          width: 100%;
          line-height: 100%;
          text-align: center;
        }
        p {
          background: var(--line);
          line-height: 3em;
          text-align: center;
          border-radius: 0 0 0 2rem;
          letter-spacing: 0;
          font-weight: 800;
          color: var(--font_333);
        }
        &:last-child p {
          background: var(--color_1);
          color: #fff;
          display: flex;
          border-radius: 0 0 2rem 0;
          justify-content: center;
        }
        
      } 
        
    }
  }
@media (max-width: 768px) {
  .bf_box {
     > ul{
        li{
         width: 100%;
         &:first-child:after{
            width: 4rem;
            height: 4rem;
            line-height: 4rem;
            font-size: 3.5rem;
            right: -21px;
            top: calc(50% - 3.5rem);
            
          }
         > div{
           &:before{
             font-size: 2rem;
           }
           
           
         }
         p{
             line-height: 2.4em;
         }
       }
       
     }
  }

}

#sub {
  main {

    &.counsel {
      .subTit {
        margin-bottom:2rem;
          + p {
            display:flex;
            justify-content: flex-end;
            
           a {
            line-height: 1.2;
            font-weight: 800;
            font-size: 2rem;
            position: relative;
            background: var(--color_4);
            color: var(--fff);
            padding: 1rem 2rem;
            border-radius: 10rem;
          } 
            + table.line {
              margin-top: 2rem;
            }
          }

      
      }
    }

    &.counsel_write {
      .line {
        color: var(--font_333);

        tbody {
          tr {
            td {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 1rem;

              p {
                display: flex;
                align-items: center;
                gap: 1rem;
                width: 100%;
                
                

                label {
                  font-size: 2rem;
                  min-width: 12rem;
                  font-weight: 700;
                  
                  
                  + a{
                    font-size:2rem;
                    font-weight: 700;
                  }
                }
                span{
                   display:flex;
                   align-items: center;
                   gap: .5rem;
                }
                input[type="text"],
                input[type="tel"],
                input[type="password"],
                textarea {
                  padding: .5rem 1rem;
                  height: 4rem;
                  border-radius: 1rem;
                }

                textarea {
                  height: 20rem;
                }

                input[type="tel"] {
                  width: 10rem;
                }

                #name,
                #sMail_1 {
                  width: 25rem;
                }
                em {
                  display: flex;
                  width: 44rem;
                }

              }
            }
          }
        }

      }

      .btn_wrap {
        margin-top: 5rem;
        display: flex;
        gap: 1rem;
        justify-content: center;

        input[type="submit"], a {
          background: var(--color_1);
          border: 0;
          color: var(--fff);
          padding: .5rem 4rem;
          border-radius: 5rem;
          font-size: 2.4rem;
          font-weight: 700;
          cursor: pointer;
          

          &.cancel {
            background: var(--gray);
          }
        }
      }
    }

   /* 전후 사진 */
    &.bf_board{
      .board_cate {
        margin: 8rem auto 5rem;
        max-width: 120rem;
        text-align: center;
        display: flex;
        border-left: 1px solid var(--line);
        
        li{
          border: 1px solid var(--line);
          border-left: 0;
          background: var(--gray_2);
          width: 12.5%;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          float: left;
          
          a{
            display: block;
            padding: 1.5rem 0;
            font-size: 1.8rem;
            color: var(--font_222);
            line-height: 1.2em;
            font-weight: 600;
          }
          &.active, &:hover{
            background: #fff;
            font-weight: 800;
            
            
            
            

            a {
              color: var(--fff);
              background: var(--color_1);
            }
          }
      }
     }
     .bf_list{
       display:flex;
       flex-wrap: wrap;
       gap: 2rem 2%;
       
       > li{
         width:49%;
         h4 {
                text-align: center;
                font-size: 2rem;
                margin: 1rem;
                font-weight: 700;
                a{
                  color: var(--font_222); 
                }
              }
         .bf_box{
           > ul{
             width:100%;
             > a{
               width:100%;
             }
            
           }
           
         }
       }
             
     }

    }

    /* 원장님 칼럼 */
    .photo_board{
      ul.photo_board_list{
        display: flex;
        gap: 3rem;
        flex-wrap: wrap;
       
        > li {
       width: calc(33.3333% - 2rem);
       background: var(--gray_2);
       border-radius: 5rem;
       overflow: hidden;
       
          img{
              display:block;
            }
            h4{
            font-size: 2rem;
            margin: 2rem;
            text-align: left;
            font-weight: 600;
            color: var(--font_333);
            display: -webkit-box;
            display: -ms-flexbox;
            max-height: 85px;
            overflow:hidden;
            vertical-align:top;
            text-overflow: ellipsis;
            word-break:break-all;
            -webkit-box-orient:vertical;
            -webkit-line-clamp: 2;
            }
       }
      }
    }
  }
}

b.new{
  background: var(--color_4);
  color:var(--fff);
  font-size: 1.2rem;
  padding: .5rem 1rem;
  border-radius: 100px;
  margin-left: 1rem;
  vertical-align: middle;
  display: inline-block;
}

/*agree*/
.agree {line-height: 1.5em;max-width: 800px;margin: 0 auto;text-align: left;
h4 {font-size: 1.25em;margin-bottom: 2rem;margin-top: 2em;border-top: 1px solid #ddd;padding-top: 40px;font-weight: 600;color: var(--font_333);}
ul {margin-bottom: 10px;
  li:before {content:'■';margin-right:10px;font-size:.6em;vertical-align: middle;display: inline-block;margin-top: -6px;}
}
}


@media (max-width: 768px) {
  #sub {
    main {
      &.counsel{
        .subTit{
          + p{
            a{
              font-size: 1em;
              padding: 1rem 1.5rem;
            }
          }
        }
      }
    /* 상담/예약신청 */
      &.counsel_write {
        .line{
          tbody{
            tr{
              td{
                flex-direction: column;
                border: 0;
                padding-bottom: 0;
                
                
                p{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                border-bottom: 1px solid var(--line);
                padding-bottom: 1rem;
                em{
                  width:100%;
                }
                label{
                  flex:1 0 0;
                  text-align: left;
                  font-size: 1.6rem;
                  + a{
                    font-size:1.6rem;
                  }
                }
                  
                input[type="text"], input[type="tel"], input[type="password"], textarea, select{
                  font-size:1.6rem;
                }
                input[type="tel"]{
                  width: 30%;
                }
                
                
                  #name{
                    width: 100%;
                  }
                  #sMail_1{
                  width: calc( 40% );
                  }
                }
                
              }
            }
          }
        }
        .btn_wrap{
          margin-top: 2rem;
          input[type="submit"] , a{
            font-size:1.8rem;
            padding: .5rem 2rem;
            font-weight: 800;
          }
        }
      }
      
      /* 전후 사진 */
      &.bf_board{
        .board_cate{
          margin: 4rem auto 3rem;
          display: flex;
          flex-wrap: wrap;
          border-top: 1px solid var(--line);
          
          li{
            width: 25%;
            border-top: 0;
            
            a{
              font-size: 1.2rem;
              padding: 1rem 0;
            }
          }
        }
        .bf_list{
          flex-direction: column;
          gap: 1rem;
          
          
          
          
          
          li{
            width: 100%;
            
            h4{
                font-size:1.6rem;
              }
          }
        }
      }

      .photo_board{
      ul.photo_board_list{
        gap:1rem;

        > li {
          width: calc(50% - .5rem);
          border-radius: 2rem;

          h4{
          margin: 1rem;
          font-size: 1.4rem;
          line-height: 1.4;
        }
       }
      }
    }

    }


  }
b.new{
  display:none;
}

}