/* 대형 화면 (1600px 이하) */
@media (max-width: 1600px) {
  header .logo-header {
    height: 32px;
  } 
  section.promotion,
  section.difference .wrap-contents .contents,
  section.withyou .wrap-contents,
  section.branch .wrap-contents,
  section.review .contents {
    flex-direction: column;
  }
  section.difference .wrap-contents .contents .content.main {
    min-height:900px;
  }
  section.withyou .wrap-contents .contents {
    min-height:900px;
  }
  main {
    overflow: hidden;
  }

  section.difference .wrap-contents .contents.ads .icons {
    justify-content: space-around;
  }
  section.difference .wrap-contents .contents.ads .icons .wrap-icon {
    padding-left:0 !important;
    padding-right:0 !important;
  }
  section.branch .wrap-tags .tags {
    justify-content: start;
    overflow: auto;
  }

  div.branch-container {
    padding:0;
  }
  section.album {
    flex-direction: column;
    height:auto;
  }
  section.album > div.main {
    min-height:702px;
  }
  section.album > div.main img {
    height:702px;
  }
  section.album > div.sub > div img {
    height:331px;
  }
  section.album > div.sub {
    min-height:702px;
  }
  section.information .branch-default {
    margin-bottom:30px;
  }
  section.information .branch-default span {
    font-size:var(--font-size-t2) !important;
  }
  section.information .branch-type {
    margin-bottom:0;
  }

  .tools-container {
    padding: 0 56px;
    min-width: auto;
  }

  div.level-container {
    min-width:788px;
  }
  div.level-container section {
    margin-bottom:40px;
  }
  section.level-description {
    flex-direction: column;
  }
  section.level-description .item:first-child {
    min-height:660px;
  }

  .level-simulator-container,
  .price-simulate-container {
    width:800px;
  }

  .carezone-container .container {
    padding:0 56px;
  }
  section.carezone-source .container .wrap-source {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap:40px;
  }
}

/* 1024px 모바일형 헤더 표시*/
@media (max-width: 1024px) {
  nav .hamburger {
    display:flex;
  }
  nav ul.desktop {
    display:none;
  }
  nav.mobile .wrap-mobile {
    display:flex;
  }
}

/* 소형 화면 (973px 이하) */
@media (max-width: 973px) {
  section.carezone-source .container .wrap-source {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
  }
  section.carezone-report .wrap-report {
    flex-direction: column;
    justify-content: space-between;
    gap:50px;
  }
  section.carezone-report .wrap-reports > .wrap-report:nth-child(odd) {
    flex-direction: inherit;
  }
  section.carezone-system .systems {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
  }
  
}

/* 소형 화면 (768px 이하) */
@media (max-width: 900px) {
  :root {
    --border-radius: 12px;

    --font-size-t1: 28px;
    --line-height-t1: 38px;
    --font-size-t2: 18px;
    --line-height-t2: 26px;
    --font-size-t3: 17px;
    --line-height-t3: 26px;
  
    --font-size-b1: 16px;
    --line-height-b1: 24px;
    --font-size-b2: 15px;
    --line-height-b2: 22px;
  
    --tag-radius: 100px;
  }
  br.desktop {display:none;}
  br.mobile {display:inline;}

  main {
    margin:0 20px;
  }
  main > .container {
    margin:0 !important;
  }
  main section {
    margin-bottom:120px;
  }
  main section .wrap-title {
    margin-bottom:20px;
  }
  main section:last-child {
    margin-bottom: 70px;
  }

  header {
    padding:0 20px;
  }
  header .logo-header {
    height:26px;
  }
  header .container {
    height:60px;
  }

  footer .container {
    padding:0 20px;
  }
  footer .line ul {
    gap:20px;
  }

  section.promotion {
    margin-top:0px;
    gap:30px;
  }
  section.promotion .wrap-main {
    min-height:322px;
    padding:20px;
  }
  section.promotion > div {
    flex: 1;
  }
  section.promotion .wrap-sub {
    flex-direction: column;
    gap:20px;
  }
  section.promotion .wrap-sub .sub {
    flex:1;
    min-height:322px;
    padding:20px;
  }
  section.promotion .wrap-sub .sub:first-child {
    display: none;
  }
  section.promotion .mobile {
    display: flex;
  }
  section.promotion .mobile .tag {
    padding:6px 12px;
    font-size: 17px;
    background-color: rgba(17, 17, 17, .5);
    border:0;
    color:white;
  }

  section.difference .wrap-contents {
    gap:30px;
  }
  section.difference .wrap-contents .contents .content.main {
    min-height:322px;
  }
  section.difference .wrap-contents .contents .content.main .wrap-tag:nth-child(2),
  section.difference .wrap-contents .contents .content.main .wrap-tag:nth-child(3) {
    margin-top: 75px;
  }
  section.difference .wrap-contents .contents .content.main .wrap-tag:nth-child(1) .tag {
    margin-right: 7%;
  }
  section.difference .wrap-contents .contents .content.main .wrap-tag:nth-child(2) .tag {
    margin-left: 7%;
  }
  section.difference .wrap-contents .contents .content.main .wrap-tag:nth-child(3) .tag {
    margin-left: 0;
  }


  section.difference .wrap-contents .contents {
    gap:30px;
  }
  section.difference .wrap-contents .contents .content {
    gap:30px;
    box-shadow:none;
    border:0;
  }
  section.difference .wrap-contents .contents .content.list {
    padding:0;
    gap:20px;
  }
  section.difference .wrap-contents .contents .content.list .item {
    gap:14px;
  }
  section.difference .wrap-contents .contents .content.list .item .thumbnail {
    width: 125px;
    height: 125px;
  }
  section.difference .wrap-contents .contents.ads {
    min-height:322px;
  }
  section.difference .wrap-contents .contents.ads .icons .wrap-icon .icon {
    width:118px;
    height:118px;
    gap:14px;
  }
  section.difference .wrap-contents .contents.ads .icons .wrap-icon .icon img {
    width:50px;
    height:50px;
  }
  section.difference .wrap-contents .contents.ads .icons .wrap-icon:nth-child(1) {
    margin-top:92px;
  }
  section.difference .wrap-contents .contents.ads .icons .wrap-icon:nth-child(2) {
    margin-top:50px;
  }
  section.difference .wrap-contents .contents.ads .description {
    margin-bottom:20px;
  }
  section.withyou .wrap-contents {
    gap:30px;
  }
  section.withyou .wrap-contents .contents:last-child {
    padding:0;
    background-image: none;
  }
  section.withyou .wrap-contents .contents:last-child .content.title {
    display:none;
  }
  section.withyou .wrap-contents .contents .content.box ul {
    padding:0;
    gap:20px;
  }
  section.withyou .wrap-contents .contents .content.box ul li {
    gap:14px;
  }
  section.withyou .wrap-contents .contents .content.box ul li img {
    width:80px;
    height:80px;
  }
  section.withyou .wrap-contents .contents .content.box ul li .wrap-image {
    flex-shrink: 0;
  }
  section.withyou .wrap-contents .contents .content.box .wrap-description {
    gap:5px;
    word-break: keep-all;
    text-align:left;
  }
  section.withyou .wrap-contents .contents {
    min-height:322px;
    padding:20px;
  }
  section.branch {
    gap:30px;
  }
  section.branch .wrap-contents {
    gap:20px;
  }
  section.branch .wrap-contents .contents {
    gap:20px;
  }
  section.branch .wrap-contents .contents .content {
    gap:20px;
  }
  section.branch .wrap-contents .contents .content .item {
    height:156px;
    padding:14px;
  }
  section.branch .wrap-contents .contents .content .item.blog {
    background-size: 50px 50px;
    background-position: calc(100% - 14px) calc(100% - 14px);
  }
  section.branch .wrap-contents .contents .content .item.blog .title {
    margin-bottom:0;
  }
  .read-more {
    width:24px;
    height:24px;
    background-size: 14px 14px;
  }
  section.branch .wrap-contents .contents .content.big .item {
    height:322px;
  }
  section.branch .wrap-contents .contents .content .item.branch .wrap-call {
    display:flex;
  }

  section.review .contents {
    gap:20px;
  }
  section.review .contents .content {
    padding:20px;
    gap:10px;
  }
  section.review .wrap-writer {
    gap:20px;
  }
  section.review .wrap-writer .wrap-name {
    gap:5px;
  }
  
  /* 지점안내 */
  div.branch-container section {
    margin-bottom:50px;
  }

  section.album > div.main,
  section.album > div.sub {
    min-height:332px;
  }

  section.album,
  section.album > div.sub,
  section.album > div.sub .bottom {
    gap:20px;
  }
  section.album > div.sub {
    gap:20px;
  }
  section.information .branch-selector {
    display:none;
  }

  section.information .branch-tags,
  section.information .branch-default,
  section .branch-section-title {
    margin-bottom:30px;
  }
  section.album, section.album > div.sub, section.album > div.sub .bottom {
    gap:10px;
  }
  section.service .container {
    grid-template-columns: repeat(2, minmax(0px, 1fr)); /* 컬럼 개수 자동 조정 */
    gap: 38px 20px; /* 요소 간 간격 */
  }
  section.information .branch-information table th {
    width:130px;
  }
  section.service .item {
    gap:10px;
  }
  section.personnel .personnel-item {
    flex-basis: auto;
    gap:10px;
  }
  section.personnel .wrap-icon {
    width:70px;
    height:70px;
  }
  section.personnel .wrap-icon img,
  section.service .item .icon {
    width:30px;
    height:30px;
  }
  section.personnel .personnel-info {
    gap:5px;
  }
  section.map #map {
    height:332px;
  }
  section.information .branch-default span {
    font-size:var(--font-size-t1) !important;
  }
  section.information .branch-tags .tag {
    font-size:15px;
  }
  section.information .branch-type {
    margin-top:20px;
  }

  .tools-container {
    padding:20px 0 0;
  }
  section.tools {
    margin-bottom:20px;
  }
  section.tools .container {
    flex-direction: column;
    gap:20px;
  }
  section.tools .item {
    padding:14px;
    gap:26px;
    background-position: calc(100% - 14px) calc(100% - 14px);
    background-size: 50px 50px;
  }
  section.tools .item .line p:first-child {
    margin-bottom:0;
  }
  .tools-container section.title p.title {
    text-align:center;
    margin-bottom:10px;
  }
  .tools-container section.title {
    margin-bottom:20px;
  }
  section.tools-information .container {
    padding:20px;
    height: auto;
    gap:10px;
  }
  
  main > .container:has(.level-container) {
    margin:20px;

  }
  div.level-container {
    min-width:100%;
  }
  section.level-description .item {
    padding:30px;
  }
  section.level-description .item:first-child {
    min-height:322px;
    max-height:322px;
  }
  div.level-container section {
    margin-bottom:20px;
  }
  div.level-container section.title p.title {
    margin-bottom:10px;
  }
  div.level-container section:last-child {
    margin-bottom:90px;
  }
  div.level-container section {
    gap:30px;
  }
  section.level-description .item:last-child {
    border:0;
    padding:0;
    box-shadow: none;
  }
  section.level-description .item ul {
    gap:30px;
  }
  section.level-buttons .container a:first-child {
    display:none;
  }

  .level-simulator-container,
  .price-simulate-container {
    width:100%;
  }
  .level-simulator-container .wrap-title {
    margin-bottom:20px;
  }
  .level-simulator-container .wrap-wizard {
    margin-bottom:50px;
  }
  .level-simulator-container .wrap-wizard ul li .wrap-icon {
    width:52px;
    height:52px;
  }
  .level-simulator-container .wrap-wizard ul li .wrap-icon img {
    width:30px;
    height:30px;
  }
  .level-simulator-container .wrap-title .subtitle {
    text-align:center;
  }
  .level-simulator-container .wrap-question:last-child {
    margin-bottom:0;
  }
  .level-simulator-container .wrap-question .question-title {
    margin-bottom:20px;
  }
  .wrap-questions .wrap-answer {
    padding-top:0;
    gap:10px;
  }
  .wrap-questions .wrap-answer .answer {
    padding: 7px 15px;
    text-align: center;
  }
  .level-simulator-container .wrap-question {
    margin-bottom:50px;
  }
  .level-simulator-container section {
    margin-bottom:50px;
  }
  .level-simulator-container section.wrap-controller {
    gap:10px;
  }
  .level-simulator-container section.wrap-controller button {
    min-width:90px;
    padding:10px 0;
  }
  section.wrap-level-result .wrap-grade .description p {
    text-align:center;
  }
  section.wrap-level-result .wrap-information ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  section.wrap-level-result .wrap-information ul li {
    padding:20px;
  }
  section.wrap-level-result .wrap-information .title .left img {
    width:16px;
    height:16px;
  }
  section.wrap-level-result .wrap-information {
    margin-bottom:20px;
  }
  section.wrap-level-result .wrap-description {
    padding:20px;
    text-align:center;
    margin-bottom:50px;
  }
  section.wrap-level-result .wrap-buttons {
    gap:10px;
  }
  section.wrap-level-result .wrap-buttons a {
    min-width:90px;
    padding:10px 0;
    height:52px;
  }

  .price-simulate-container section.test .wrap-title .title {
    margin-bottom:10px;
  }
  .price-simulate-container section.test .wrap-title .description {
    text-align:center;
    margin-bottom: 20px;
  }
  .price-simulate-container section.test .wrap-title .wrap-image {
    background-size: 100% auto;
  }
  .price-simulate-container section.test .wrap-title .wrap-image img {
    width:115px;
    height:115px;
    margin-bottom:0;
  }
  .price-simulate-container section.test .wrap-question {
    margin-bottom:50px;
  }
  .price-simulate-container section.test .wrap-question .title {
    margin-bottom:20px;
  }
  .price-simulate-container section.test .wrap-question ul {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap:12px;
  }
  .price-simulate-container section.test .wrap-question:nth-child(2) ul {
    grid-template-columns: repeat(1, minmax(100px, 1fr));
  }
  .price-simulate-container section.test .wrap-question ul li {
    padding:14px;
  }
  .price-simulate-container section.test .wrap-controller {
    gap:10px;
  }
  .price-simulate-container section.test .wrap-controller a, 
  .price-simulate-container section.test .wrap-controller button {
    min-width:30%;
    padding:10px 0;
    height:52px;
  }
  .price-simulate-container section.test {
    margin-bottom:70px;
  }
  .price-simulate-container section.result .wrap-title {
    margin-bottom:20px;
  }
  .price-simulate-container section.result .wrap-title .subtitle {
    margin-bottom:10px;
  }
  .price-simulate-container section.result .wrap-title .title {
    margin-bottom:20px;
  }
  .price-simulate-container section.result .wrap-title .wrap-image img {
    width:115px;
    height:115px;
  }
  .price-simulate-container section.result .wrap-price {
    margin-bottom:20px;
  }
  .price-simulate-container section.result .wrap-price .price {
    margin-bottom:10px;
  }
  .price-simulate-container section.result .wrap-detail {
    margin-bottom:20px;
    padding:20px;
    gap:14px;
  }
  .price-simulate-container section.result .wrap-description {
    margin-bottom:50px;
    padding:20px;
  }
  .price-simulate-container section.result .wrap-controller {
    gap:16px;
  }
  .price-simulate-container section.result .wrap-controller a {
    min-width:30%;
    height:52px;
  }
  main:has(.carezone-container) {
    margin:0;
  }
  .carezone-container .container {
    padding:0 20px;
  }
  .carezone-container section.title .wrap-image {
    padding:30px;
    height:322px;
  }
  .carezone-container section.title p.title {
    margin-bottom:10px;
  }
  .carezone-container section.title p.subtitle {
    margin-bottom:20px;
  }
  section.carezone-image {
    height:250px;
    padding-bottom:30px;
  }
  section.carezone-image p {
    margin-bottom:0;
  }
  section.carezone-image p:last-child {
    display:none;
  }
  .carezone-container .container .section-header .subtitle {
    margin-bottom:10px;
  }
  .carezone-container .container .section-header {
    margin-bottom:20px;
  }
  section.carezone-source .container .wrap-source .source {
    padding:14px;
  }
  section.carezone-source .container .wrap-source .source .wrap-info {
    margin-bottom:3px;
  }
  section.carezone-source .container .wrap-source .source .wrap-info .title {
    margin-bottom:3px;
  }
  section.carezone-source .container .wrap-source .source .footer img {
    width:60px;
    height:60px;
  }
  section.carezone-source .container .wrap-source .source .footer .cycle::before {
    top: -2px;
  }
  section.carezone-source .container .wrap-source {
    gap:20px;
  }
  section.carezone-report .wrap-report .info .title {
    margin-bottom:20px;
  }
  section.carezone-report .wrap-report .info .desc {
    margin-bottom:10px;
  }
  section.carezone-report .wrap-report .info .effect::before {
    top:0;
  }
  section.carezone-report .wrap-report {
    gap:20px;
  }
  section.carezone-report .wrap-reports {
    gap:40px;
  }
  section.carezone-report .wrap-report .info .title img {
    width:24px;
    height:24px;
  }
  section.carezone-system .systems {
    gap:20px;
  }
  section.carezone-system .systems .system {
    padding:14px;
  }
  section.carezone-system .systems .system hr {
    display:none;
  }
  section.carezone-system .systems .system .title {
    margin-bottom:10px;
  }
  section.carezone-system .systems .system .title span {
    display:block;
    margin-bottom:10px;
  }
  section.carezone-system .systems .system .contents {
    flex-direction: row;
    gap:20px;
  }
  section.carezone-system .systems .system .contents img {
    width:72px;
    height:72px;
  }
  section.carezone-link {
    gap:20px;
  }
  section.carezone-link a {
    width:287px;
    height:52px;
  }
}

/* 초소형 화면 (480px 이하) */
@media (max-width: 480px) {
  header .logo-header,
  header.sticky .logo-header, 
  header:has(nav.mobile) .logo-header {
    height:20px;
  }

  nav.mobile .wrap-list {
    padding-top:0;
  }
  nav.mobile .wrap-mobile .copyright {
    font-size:13px;
  }

  section.difference .wrap-contents .contents .content.main .wrap-tag:nth-child(3) .tag {
    margin-left:43px;
  }
  section.difference .wrap-contents .contents.ads .icons .wrap-icon .icon {
    width: 110px;
    height: 110px;
    gap: 0px;
  }

  footer .container {
    padding: 0 20px;
    gap:10px;
    margin-bottom:20px;
  }
  .footer-menu {
    display:none;
  }
  footer .copyright {
    font-size:13px !important;
  } 
  
}