html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
figure,
figcaption {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
}

@font-face {
  font-family: 'H_bold';
  src: url('./images/HurmeGeometricSans_No3_5_Semibold.otf') format('opentype');
}

#s101q .time_8s {
  transition: all 0.8s ease;
}
#s101q .translateY {
  transform: translateY(3.90625vw);
  opacity: 0;
}

#s101q .translate_X {
  transform: translateX(-3.90625vw);
  opacity: 0;
}

#s101q .translateX {
  transform: translateX(3.90625vw);
  opacity: 0;
}

#s101q .active .translateY {
  transform: translateY(0);
  opacity: 1;
}

#s101q .active .translate_X,
#s101q .active .translateX {
  transform: translateX(0);
  opacity: 1;
}

#s101q .section {
  position: relative;
}

#s101q img {
  width: 100%;
}

#s101q .white {
  color: #FFFFFF;
}

@media screen and (min-width: 1081px) {
  #s101q {
    .mob {
      display: none;
    }

    .title {
      font-size: 3.125vw;
      font-weight: 600;
      line-height: 100%;
      color: #000000;
    }

    .subtitle {
      font-size: 1.25vw;
      font-weight: 400;
      line-height: 100%;
      color: #000000;
    }

    .screen1 {
      .sub {
        position: absolute;
        left: 8.5938vw;
        top: 21.8359vw;
        display: flex;
        flex-direction: column;
        gap: 3.125vw;

        .top {
          display: flex;
          flex-direction: column;
          gap: 1.5625vw;

          img {
            width: 12.5391vw;
          }

          p {
            font-size: 3.5156vw;
            font-weight: 600;
            line-height: 100%;
            color: #000000;
          }
        }

        .bottom {
          display: flex;
          flex-direction: row;
          gap: 1.5625vw;

          p {
            font-weight: 400;
            font-size: 1.0156vw;
            line-height: 100%;
            color: #000000;
          }

          p:nth-child(2) {
            position: relative;
          }

          p:nth-child(2)::before {
            content: '';
            position: absolute;
            width: .0781vw;
            height: .9766vw;
            top: .1172vw;
            left: -0.7813vw;
            background-color: #000000;
          }

          p:nth-child(2)::after {
            content: '';
            position: absolute;
            width: .0781vw;
            height: .9766vw;
            top: .1172vw;
            right: -0.7422vw;
            background-color: #000000;
          }
        }
      }
    }

    .screen2 {
      margin: 10.1563vw 0 12.5vw 0;

      .list {
        display: flex;
        flex-direction: column;
        gap: .9375vw;
        align-items: center;

        .top {
          display: flex;
          flex-direction: row;
          gap: .9375vw;

          .box {
            width: 38.5938vw;
            position: relative;
          }

          p {
            font-size: 1.5625vw;
            font-weight: 600;
            line-height: 100%;
            color: #000000;
          }

          .box1 {
            .sub {
              display: flex;
              flex-direction: column;
              gap: .7813vw;
              position: absolute;
              top: 5.4688vw;
              left: 1.5625vw;

              img {
                width: 5.5078vw;
              }
            }
          }

          .box2 {
            p {
              position: absolute;
              left: 0;
              right: 0;
              top: 1.25vw;
              text-align: center;
            }
          }
        }

        .bottom {
          display: flex;
          flex-direction: row;
          gap: .9375vw;

          .box {
            width: 18.8281vw;
            position: relative;

            p {
              position: absolute;
              left: 0;
              right: 0;
              top: 1.0938vw;
              text-align: center;
              font-size: 1.25vw;
              font-weight: 600;
              line-height: 100%;
            }
          }

          .left {
            display: flex;
            flex-direction: row;
            gap: .9375vw;
          }

          .right {
            display: flex;
            flex-direction: row;
            gap: .9375vw;

            .box2 {
              p {
                left: 1.1719vw;
                top: 4.4141vw;
                text-align: left;
                line-height: 130%;
              }
            }
          }
        }
      }
    }

    .screen3 {
      .sub {
        position: absolute;
        top: 9.375vw;
        right: 10.9375vw;
        display: flex;
        flex-direction: column;
        gap: 1.5625vw;

        p {
          color: #FFFFFF;
          text-align: right;
        }
      }
    }

    .screen4 {
      padding: 17.1875vw 0 12.5vw;

      .sub {
        position: absolute;
        top: 12.5vw;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5625vw;

        p {
          text-align: center;
        }
      }
    }

    .screen5 {
      .sub {
        display: flex;
        flex-direction: column;
        gap: 1.5625vw;

        p {
          text-align: center;
        }
      }

      img {
        width: 78.125vw;
        margin: auto;
        margin-top: 4.6875vw;
      }
    }

    .screen6 {
      padding: 3.125vw 0 12.5vw 0;

      .list {
        display: flex;
        flex-direction: row;
        gap: 4.6875vw;
        justify-content: center;

        .box {
          width: 36.7188vw;
          height: 40.625vw;
          background-color: #F5F5F5;
          border-radius: 2.3438vw;
          display: flex;
          flex-direction: column;
          gap: 2.3438vw;

          .bottom {
            display: flex;
            flex-direction: column;
            gap: 1.1719vw;
            margin-left: 2.3438vw;

            p {
              font-size: 1.0938vw;
              font-weight: 400;
              line-height: 100%;
              color: #000000;
            }

            .tit {
              font-size: 1.6406vw;
              font-weight: 600;
            }
          }
        }
      }
    }

    .screen7 {
      background: linear-gradient(180deg, #FFFFFF 15%, #EBF5F0 100%);

      p {
        text-align: center;
      }

      img {
        width: 56.4063vw;
        display: block;
        margin: auto;
        margin-top: 7.8125vw;
      }

      .list {
        display: flex;
        flex-direction: row;
        padding: 6.25vw 0 4.8438vw 0;

        .box {
          display: flex;
          flex-direction: column;

          .icon {
            width: 8.9063vw;
          }

          p {
            font-size: 1.25vw;
            font-weight: 600;
            line-height: 100%;
            color: #000000;
          }
        }

        .box1 {
          padding: 0 4.2578vw 0 9.5703vw;

          .icon {
            margin: 0 6.3672vw 2.3438vw 6.4063vw;
          }
        }

        .box2 {
          .icon {
            margin: 0 .8984vw 2.3438vw .9375vw;
          }
        }

        .box3 {
          padding: 0 9.0625vw 0 9.375vw;

          .icon {
            margin: 0 1.2891vw 2.3438vw 1.2891vw;
          }
        }

        .box4 {
          padding-right: 12.5vw;

          .icon {
            margin: 0 1.2109vw 2.3438vw 1.2109vw;
          }
        }
      }
    }

    .screen8 {
      display: flex;
      flex-direction: row;
      background-color: #000000;

      .sub {
        display: flex;
        flex-direction: column;
        gap: 1.5625vw;
        padding: 14.8438vw 0 20vw 10.9375vw;
      }

      img {
        width: 39.4141vw;
      }
    }
  }
}

@media screen and (max-width: 1080px) {
  #s101q {
    .pc {
      display: none;
    }

    .title {
      font-size: 5.5556vw;
      font-weight: 600;
      line-height: 100%;
      color: #000000;
    }

    .subtitle {
      font-size: 2.5926vw;
      font-weight: 400;
      line-height: 100%;
      color: #000000;
    }

    .screen1 {
      .sub {
        display: flex;
        flex-direction: column;
        gap: 2.2222vw;
        position: absolute;
        left: 0;
        right: 0;
        top: 5.5556vw;
        align-items: center;

        .top {
          img {
            width: 71.1111vw;
            margin: auto;
          }
        }

        .bottom {
          display: flex;
          flex-direction: row;
          gap: 3.7037vw;

          p {
            font-size: 2.4074vw;
            font-weight: 400;
            color: #000000;
            line-height: 100%;
          }

          p:nth-child(2) {
            position: relative;
          }

          p:nth-child(2)::before {
            content: '';
            position: absolute;
            width: .1852vw;
            height: 1.9444vw;
            left: -1.8519vw;
            top: .463vw;
            background-color: #000000;
          }

          p:nth-child(2)::after {
            content: '';
            position: absolute;
            width: .1852vw;
            height: 1.9444vw;
            right: -1.8519vw;
            top: .463vw;
            background-color: #000000;
          }
        }
      }
    }

    .screen2 {
      padding: 16.6667vw 0 16.6667vw 0;

      .list {
        display: flex;
        flex-direction: column;
        gap: 1.8519vw;
        align-items: center;
        .top{
          display: flex;
          flex-direction: row;
          gap: 1.8519vw;
          .box{
            width: 43.5185vw;
            position: relative;
            .sub{
              img{
                width: 37.4074vw;
                position: absolute;
                left: 0;
                right: 0;
                top: 2.963vw;
                margin: auto;
              }
            }
            p{
              position: absolute;
              left: 0;
              right: 0;
              top: 2.963vw;
              text-align: center;
              font-size: 2.963vw;
              font-weight: 600;
              line-height: 100%;
            }
          }
        }
        .bottom{
          display: flex;
          flex-direction: column;
          gap: 1.8519vw;
          .box{
            width: 43.5185vw;
            position: relative;
            p{
              font-size: 2.963vw;
              font-weight: 600;
              line-height: 100%;
              position: absolute;
              left: 0;
              right: 0;
              top: 2.5926vw;
              text-align: center;
            }
          }
          .left{
            display: flex;
            flex-direction: row;
            gap: 1.8519vw;
          }
          .right{
            display: flex;
            flex-direction: row;
            gap: 1.8519vw;
            .box2{
              p{
                left: 2.7778vw;
                top: 10.463vw;
                text-align: left;
                line-height: 120%;
              }
            }
          }
        }
      }
    }
    .screen3{
      .sub{
        padding: 0 0 11.1111vw 5.5556vw;
        display: flex;
        flex-direction: column;
        gap: 5.5556vw;
      }
    }
    .screen4{
      .sub{
        position: absolute;
        left: 5.5556vw;
        top: 29.6296vw;
        display: flex;
        flex-direction: column;
        gap: 5.5556vw;
      }
    }
    .screen5{
      padding: 29.6296vw 0 7.4074vw 0;
      .sub{
        display: flex;
        flex-direction: column;
        gap: 5.5556vw;
        padding: 0 0 11.1111vw 5.5556vw;
      }
    }
    .screen6{
      .list{
        display: flex;
        flex-direction: column;
        gap: 7.4074vw;
        align-items: center;
        .box{
          width: 88.8889vw;
          height: 96.2963vw;
          background-color: #F5F5F5;
          border-radius: 5.5556vw;
          display: flex;
          flex-direction: column;
          gap: 5.5556vw;
          .bottom{
            display: flex;
            flex-direction: column;
            gap: 2.7778vw;
            padding-left: 5.5556vw;
            p{
              font-size: 2.5926vw;
              font-weight: 400;
              line-height: 100%;
              color: #000000;
            }
            .tit{
            font-size: 3.8889vw;
            font-weight: 600;
          }
          }
        }
      }  
    }
    .screen7{
      background: linear-gradient(180deg, #FFFFFF 15%, #EBF5F0 100%);
      .title{
        padding: 29.6296vw 0 11.1111vw 5.5556vw;
      }
      img{
        width: 88.9861vw;
        display: block;
        margin: auto;
      }
      .list{
        display: flex;
        flex-direction: row;
        gap: 7.4074vw;
        justify-content: center;
        padding: 11.1111vw 0 7.4074vw 0;
        .icon{
          width: 12.963vw;
        }
        .box{
          display: flex;
          flex-direction: column;
          gap: 1.8519vw;
          p{
            font-size: 1.8519vw;
            font-weight: 600;
            line-height: 100%;
            color: #000000;
            text-align: center;
          }
        }
        .box1{
          .icon{
            margin: 0 1.8519vw 0 1.9444vw;
          }
        }
        .box2{
          .icon{
            margin: 0 1.4815vw 0 1.4815vw;
          }
        }
        .box3{
          .icon{
            margin: 0 2.037vw 0 2.037vw;
          }
        }
        .box4{
          .icon{
          margin: 0 1.8519vw 0 2.037vw;
          }
        }
      }
    }
    .screen8{
      background-color: #000000;
      .sub{
        padding: 20.3704vw 0 11.1111vw 5.5556vw;
        display: flex;
        flex-direction: column;
        gap: 5.5556vw;
      }
      img{
        width: 89.1009vw;
        margin: auto;
      }
    }
  }
}