@media screen and (max-width: 810px){
  .container {max-width: 100%; padding: 0 30px;}
  header {height: 60px;}
  .logo {width: 120px;}
  .inquiry-btn {width: 170px; height: 40px; font-size: 14px;}

  .visual {height: 555px; background-position: right;}
  .tit-box img.tit {width: 455px; height: auto; margin-bottom: 10px;}
  .tit-box .tit {font-size: 30px; margin-bottom: 10px;}
  .tit-box .sub {font-size: 14px;}

  .input-box input:not([type="checkbox"]),.calculate-btn {height: 45px; font-size: 14px;}
  .input-box label {font-size: 14px;}

  section {padding: 40px 0 40px;}

  .coupon-area .coupon .txt-tit {margin-bottom: 10px; font-size: 20px;}
  .coupon-area .coupon .img-box {width: 215px;}

  .tit-box {margin-bottom: 30px;}
  .coupon-area .coupon .txt-sub {margin: 10px 0 5px; font-size: 15px;}
  .txt-area dl dt, dd {font-size: 14px;}

  .content-area ul li .child-box .img-box {width: 100px;}
  .content-area ul li .child-box .txt-box .txt-tit {font-size: 16px;}
  .content-area ul li .child-box .txt-box .txt-sub {font-size: 14px;}
  .content-area ul li .child-box {padding: 15px 0 30px;}

  .description {margin-top: 14px; font-size: 14px;}

  .logo_collection2 ul li,.img-list ul li {width: calc(100% / 2);}

  .popup-area {width: 600px;}
}

@media screen and (max-width: 607px) {
  .container,header {padding: 0 20px;}
  .popup-area {width: 400px;}
  .popup-area .hd-tit_box .hd-tit {font-size: 20px; margin-bottom: 5px;;}
  .popup-area .hd-tit_box .hd-sub {font-size: 12px;}
  .popup-area .close-btn {width: 15px; height: 15px;}
  .popup-area .close-btn .close img {width: 100%; height: auto;}
  .popup-area .popup-hd {margin-bottom: 20px;}

  .input-box {flex-flow: column;}
  .popup-area .input-box input:not([type="checkbox"]) {margin-right: 0; margin-bottom: 10px;}
  .popup-area .input-box:last-of-type {flex-flow: row;}
  .input-box input[type="checkbox"]:checked ~ label::before {width: 15px; height: 15px;}
  .input-box label::before {width: 15px; height: 15px;}
  .popup-area .coupon-area .coupon {flex-flow: column; padding: 10px;}
  .coupon-area .coupon .img-box {width: 100%; margin-right: 0; margin-bottom: 10px;}
  .coupon-area .coupon .txt-tit {font-size: 16px;}
  .coupon-area .coupon .txt-sub {font-size: 14px;}
  .txt-area dl dt, dd {font-size: 12px;}
  .coupon-area .coupon .txt-box {width: 100%;}

  .tit-box img.tit {width: 380px;}

  .input-box:last-of-type {flex-flow: row;}

  .logo_collection ul li {width: calc(100% / 2);}
  .logo_collection ul li .child-box {padding: 22.1px 15px;}
  .logo_collection ul li .child-box .txt {font-size: 16px;}

  .coupon-area .coupon {flex-flow: column;}

  .logo_collection2 ul li .child-box {height: 180px;}

  .logo_collection2 ul li:nth-child(1) .child-box .img-box {width: 120px; height: auto;}
  .logo_collection2 ul li:nth-child(2) .child-box .img-box {width: 90px; height: auto;}
  .logo_collection2 ul li:nth-child(3) .child-box .img-box {width: 100px; height: auto;}
  .logo_collection2 ul li:nth-child(4) .child-box .img-box {width: 110px; height: auto;}
  .logo_collection2 ul li:nth-child(5) .child-box .img-box {width: 120px; height: auto;}
  .logo_collection2 ul li:nth-child(6) .child-box .img-box {width: 116px; height: auto;}
  .logo_collection2 ul li:nth-child(7) .child-box .img-box {width: 110px; height: auto;}
  .logo_collection2 ul li:nth-child(8) .child-box .img-box {width: 120px; height: auto;}
  .logo_collection2 ul li:nth-child(9) .child-box .img-box {width: 90px; height: auto;}
  .logo_collection2 ul li .child-box .more-btns .more-btn {margin-top: 20px; height: 30px; font-size: 14px;}
  .procedure-area ul {flex-wrap: wrap; justify-content: flex-start; gap: 20px 0;}
  .procedure-area ul .circle {width: 130px; height: 130px; font-size: 14px;}
  .img-list ul li .child-box button {height: 30px; font-size: 14px;}

  footer {padding: 30px 0;}
  .f-tit_box {flex-flow: column; align-items: flex-start;}
  .f-tit_box .f-tit {margin-bottom: 5px; font-size: 16px;}
  .f-tit_box .f-sub {font-size: 14px;}
  .logo_address-area {flex-flow: column-reverse; align-items: flex-start;}
  .logo_address-area address {width: 100%; margin-bottom: 20px; text-align: left; font-size: 14px; line-height: 1.5;}
}

@media screen and (max-width: 400px) {
  .tit-box img.tit {width: 100%;}

  .logo_collection ul {margin: 0; gap: 10px;}
  .logo_collection ul li {width: 100%; padding: 0;}
  .tit-box .tit {font-size: 20px;}
  .tit-box .sub {font-size: 12px;}

  .content-area ul {margin: 0;}
  .content-area ul li {width: 100%; padding: 0;}

  .procedure-area ul {justify-content: center;}
  .procedure-area ul .circle {width: 150px; height: 150px;}
  .procedure-area ul .arrow {width: 100%; display: flex; justify-content: center;}
  .procedure-area ul .arrow img {width: 25px; transform: rotate(90deg);}

  .logo_collection2 ul, .img-list ul {margin: 0; gap: 20px;}
  .logo_collection2 ul li, .img-list ul li {width: 100%; padding: 0;}

  .popup-area {width: 300px;}
  .popup-area .hd-tit_box .hd-tit {font-size: 16px;}
  .popup-area .hd-tit_box .hd-sub {font-size: 10px;}
  .popup-area .input-box input:not([type="checkbox"]),.input-box input:not([type="checkbox"]), .calculate-btn {height: 35px; font-size: 13px;}
  .coupon-area .coupon .txt-tit {font-size: 14px;}
  .coupon-area .coupon .txt-sub {font-size: 13px;}
  .coupon-area .coupon dl {align-items: center;}
}