@charset "UTF-8";


#sub {
  /* 원데이 임플란트 */
  .total_01 {
    .section01{
      .inwrap{
        .flex{
          display:flex;
          align-items: center;
        }
        .checkList{
          margin-bottom:0;
          li{
            min-width: 35rem;
          }
        }
      }
    }
    .section02 {
      .inwrap {
        >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 {
      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 {
        .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: 51rem;
            .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;
            }

            P {
              font-size: 2rem;
              font-weight: 600;
              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);
              }
            }
          }
        }
      }
    }
  }
  
  /* 충치치료 */
  .total_02{
    .section03{
      .inwrap{
        .num_list{
          max-width: 1060px;
          margin: 0 auto;
        }
      }
    }
    .section04{
      .inwrap{
        .flex{
          display: flex;
          justify-content: center;
          li{
            border-radius: 2rem;
            /* overflow:hidden; */
            
            span.num{
              position: absolute;
              background: var(--color_1);
              color: var(--fff);
              font-size: 3rem;
              width: 5rem;
              height: 5rem;
              line-height: 5rem;
              border-radius: 10rem;
              transform: translate(-50%,-50%);
            }
            img{
              border-radius: 2rem 2rem 0 0;
              display: block;
            }
            p{
              background: var(--bg2);
              padding: 2rem 0;
              font-size: 1.8rem;
              line-height: 1.4;
              color: var(--font_222);
              display: flex;
              justify-content: center;
              align-items: center;
              height: 90px;
              border-radius: 0 0 2rem 2rem;
            }
            &:nth-child(2){
              span.num{
                background:var(--color_2);
              }
            }
            &:nth-child(3){
              span.num{
                background:var(--color_3);
              }
            }
            &:nth-child(4){
              span.num{
                background:var(--color_4);
              }
            }
          }
          & + h4 {
            margin-top:5rem;
          }
        }
      }
    }
    .section05{
      .inwrap{
        .left_img{
          text-align: left;
          > li{
            > ul{
              display:flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 3rem;
              > li{
                    h4{font-size: 2.4rem;font-weight: 800;color: var(--color_1);}
                    p{
                      font-size: 2rem;
                      margin-top: .5rem;
                    }
                &:nth-child(2){
                  h4{
                    color:var(--color_2);
                  }
                }
                &:nth-child(3){
                  h4{
                    color:var(--color_4);
                  }
                }
              }
            }
          }
          
        }
      }
    }

  }
}



@media screen and (max-width: 767px) {
  #sub {
    /* 원데이 임플란트 */
    .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: 5rem;
                height: 5rem;
                line-height: 4rem;
              }

              h4 {
                font-size: 2rem;
              }

              P {
                font-size: 1.4rem;
              
              }
              &:nth-child(2){
                .num{
                
                }
              }
              &:nth-child(3){
                .num{
                
                }
              }
              &:nth-child(4){
                .num{
                
                }
              }
            }
          }
        }
      }
    }
    
    /* 충치치료 */
    .total_02{
      .section02{
        .inwrap{
          .num_list{
            li{
              flex-direction: column;
              padding: 2rem 0;
              gap: 1rem;
              
              img{
                max-width: 20rem;
              }
              h4{
                font-size: 2rem;
                text-align: center;
                margin-bottom: 1rem;
              }
              p{
                font-size: 1.4rem;
                text-align: justify;
              }
            }
          }
        }
      }
      .section03{
        .inwrap{
           .num_list{
            li{
              flex-direction: column;
              padding: 2rem 0;
              gap: 1rem;
              
              img{
                max-width: 20rem;
              }
              h4{
                font-size: 2rem;
                text-align: center;
                margin-bottom: 1rem;
              }
              p{
                font-size: 1.4rem;
                text-align: justify;
              }
            }
          }
        }
      }
      .section04{
        .inwrap{
          .flex{
            flex-wrap: wrap;
            flex-direction: row;
            gap: 3rem 1rem;
            margin-top: 4rem;
            
            
            li{
              width: calc(50% - 5px);
              span.num{
                font-size: 2rem;
                width: 4rem;
                height: 4rem;
                line-height: 4rem;
                font-weight: 800;
              }
              p{
                font-size: 1.4rem;
              }
            }
            & + h4{
              margin-top: 2rem;
            }
          }
        }
      }

      .section05{
        .inwrap{
          .left_img{
            flex-direction: column;
            margin-top: 0;
            gap: 2rem;
            
            > li{
              img{
                border-radius:3rem;
              }

              > ul{
                gap:2rem;
                > li{
                  h4{
                    font-size: 2rem;
                    text-align: center;
                  }
                  p{
                    font-size: 1.4rem;
                    text-align: justify;
                  }
                }
              }
            }
          }
        }
      }

      .section06{
        .inwrap{
          .flex{
            li{
              p{
                padding: 1rem 0;
                height: 6.5rem;
              }
            }
          }
        }
      }
    }
  }
}