@media (max-width: 768px) {
  :root {
    --scale-ratio: calc(100dvw / 640px);
  }

  .pc-show {
    display: none !important;
  }
  .pc-f-show {
    display: none !important;
  }
  .pc-t-show {
    display: none !important;
  }

  .m-show {
    display: block !important;
  }
  .m-f-show {
    display: flex !important;
  }
  .m-t-show {
    display: table !important;
  }

  #hd,
  #wrapper,
  #ft {
    min-width: auto;
  }

  #hd_wrapper {
    padding: 20px;
  }

  #logo {
    height: 24px;
  }

  #gnb_open {
    background: transparent;
    border: 0;
  }

  #gnb_open img {
    width: 20px;
  }

  #gnb_1dul {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    /* min-height: 60vh; */
    background: #333;
    opacity: 0;
    transition: top 0.3s, opacity 0.4s;
    z-index: 999;
  }

  #gnb_1dul.on {
    top: 64px;
    opacity: 1;
  }

  #gnb_1dul .gnb_1dli {
    opacity: 0;
    transition: 1.1s all 0.5s border;
  }

  #gnb_1dul.on .gnb_1dli {
    opacity: 1;
    border-bottom: 1px solid #fff;
  }

  #gnb_1dul.on .gnb_1dli:first-child {
    border-top: 1px solid #fff;
  }

  #gnb .gnb_1dli {
    float: none;
  }

  #gnb .gnb_1da::after {
    position: absolute;
    content: "";
    right: 20px;
    top: 50%;
    width: 20px;
    height: 20px;
    background: url(../img/arrow_right.png) no-repeat center;
    transform: translateY(-50%);
  }

  #gnb .blog_btn {
    position: relative;
    top: 2px;
    margin-left: 0;
    margin-right: 10px;
  }

  #gnb .blog_btn img {
    width: auto;
    height: 28px;
  }

  #wrapper {
    margin-top: 64px;
  }

  .sec01 {
    position: relative;
  }

  .sec01 .txt {
    font-family: "GmarketSans";
    position: absolute;
    top: 10vw;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
  }

  .sec01 .txt * {
    font-family: "GmarketSans";
  }

  .sec01 .txt h4 {
    font-size: 4.375vw;
  }

  .sec01 .txt h3 b {
    font-size: 11.5vw;
  }

  .sec01 .txt h3 {
    margin-top: 2.375vw;
    font-size: 10vw;
    line-height: 12.5vw;
  }

  .sec02 {
    padding: 9.25vw 0 8.25vw;
    background: #f8f3ec;
  }

  .sec02 .flex-box {
    flex-direction: column;
    row-gap: 6.25vw;
  }

  .sec02 .img img {
    width: 40.625vw;
  }

  .sec02 .txt {
    text-align: center;
  }

  .sec02 .sub-tit {
    font-size: 4.6875vw;
  }

  .sec02 .tit {
    font-size: 17.1875vw;
    margin-top: calc(22px * var(--scale-ratio));
    margin-bottom: 3.375vw;
  }

  .sec02 .desc {
    padding: 3.4375vw 7.8125vw;
    font-size: 5.3125vw;
    line-height: 7.8125vw;
    border-radius: 5vw;
    background: #dbd2cb;
  }

  .sec02 .txt p {
    margin-top: 2.25vw;
    font-size: 3.125vw;
  }

  .sec03 .flex-box {
    flex-direction: column;
  }

  .sec03 .flex-box .left img {
    width: 42.1875vw;
    margin: 0 auto;
  }

  .sec03 .left {
    letter-spacing: 0;
  }

  .sec03 .flex-box .left .sub-tit {
    margin: 5.9375vw 0 3.4375vw;
    font-size: 3.75vw;
  }

  .sec03 .flex-box .tit {
    font-size: 10.3125vw;
    line-height: 9.0625vw;
    margin-bottom: 6.25vw;
  }

  .sec03 .right {
    text-align: center;
  }

  .sec03 .tit b {
    font-size: 6.875vw;
  }

  .sec03 .right img {
    width: 82.8125vw;
  }

  .sec03 .flex-box .left .desc {
    padding: 3.4375vw 7.8125vw;
    font-size: 5.3125vw;
    line-height: 7.8125vw;
    border-radius: 5vw;
    background: #dbd2cb;
  }

  .sec03 .right .desc {
    margin-top: 2.65625vw;
    margin-bottom: 6.25vw;
    font-size: 2.65625vw;
    line-height: 4.21875vw;
  }

  .sec04 .row .col.col01 {
    padding: 0;
  }

  .sec04 .tit,
  .sec04 .col01 .tit {
    top: 2.34375vw;
    left: 2.34375vw;
    color: #000;
    letter-spacing: -0.05em;
    font-size: 2.34375vw;
    font-weight: 500;
  }

  .sec04 .tit-wrap {
    padding: 10.9375vw 0 7.8125vw;
    text-align: center;
    background: #fcf8f3;
    color: #333;
  }

  .sec04 .tit-wrap .tit1 {
    font-weight: 300;
    font-size: 4.6875vw;
  }

  .sec04 .tit-wrap .sub-tit {
    margin-top: calc(22px * var(--scale-ratio));
    font-size: 11.40625vw;
    font-weight: 700;
  }

  .sec04 .row .col {
    width: 33.333%;
  }

  .sec04 .icon-wrap li a {
    padding: 10px 0;
  }

  .sec04 .icon-wrap li img {
    width: 5vw;
  }

  .sec04 .icon-wrap li p {
    margin-top: 1.5625vw;
    font-size: 2.65625vw;
  }

  .sec04 .row:last-child .col:last-child {
    width: 35.5%;
  }

  #ft .ft-logo {
    height: 28px;
    margin-bottom: 30px;
  }

  #ft .ft-info h3 {
    font-size: 16px;
  }

  #ft .ft-info p {
    margin-bottom: 0;
    font-size: 12px;
  }

  #ft .ft-info-flex {
    column-gap: 7px;
  }
  #ft_copy {
    margin-top: 10px;
    font-size: 12px;
  }
}