/* 모바일메뉴 */

@media screen and (max-width: 1024px) {
  /* 헤더 */
 .title h1 {
    font-size: 2.5rem;
}
.title h3{
    padding: 0 1rem;
}
     .header {
      display: none;
    }

    #header {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background-color:#fff;
    }

    #menu-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: white;
      z-index: 999;
      display: none;
      flex-direction: column;
      padding-left: 20px;
      padding-top: 50px;
    }

    #header-subdiv {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }

    #logo-container {
      width: 50%;
	  height:35px;
	  text-align:left;
	  display:block;
	  position:relative;
    }
	
	#header img {
	  width:auto;
      height: 35px;
	  position:absolute;
	  top:50%;
	  left:20px;
	  transform:translateY(-50%);
    }

    #hamburger-menu {
      cursor: pointer;
      width: 50%;
      display: flex;
      justify-content: flex-end;
    }

    #hamburger-menu span {
      width: 30px;
      height: 3px;
      background-color: #000;
      position: absolute;
      transition: 0.4s ease-in-out;
      cursor: none;
      caret-color: transparent;
      outline: none;
    }

    #hamburger-menu span:nth-child(1) {
      top: 15px;
    }

    #hamburger-menu span:nth-child(2) {
      top: 25px;
    }

    #hamburger-menu span:nth-child(3) {
      top: 35px;
    }

    #hamburger-menu.open span {
      background-color: black;
    }

    #hamburger-menu.open span:nth-child(1) {
      top: 25px;
      transform: rotate(135deg);
    }

    #hamburger-menu.open span:nth-child(2) {
      opacity: 0;
    }

    #hamburger-menu.open span:nth-child(3) {
      top: 25px;
      transform: rotate(-135deg);
    }

    ul,
    li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
    }
	
	#menu-container {
	  padding:45px 0 0 0;
    }

    #menu-container .menu-list {
      background: white;
	  border-bottom:1px solid #ddd;
    }
	
	#menu-container .menu-list > li {
	  border-top:1px solid #ddd;
	  padding:0 20px;
    }

    .accordion-toggle > a, .accordion-toggle > span {
      display: block;
      font-size: 15px;
      color: black;
      padding: 15px 0;
    }

    .accordion-toggle:first-child > a {
      margin-top: 20px;
    }

    .submenu {
      display: none;
      padding-left: 15px;
    }

    .submenu li a {
      font-size: 16px;
      padding: 8px 0;
      color: #767676;
    }
	
	.m-submenu {
      display: none;
	  background-color:#f6f6f6;
    }

    .m-submenu li a {
      font-size: 16px;
      padding: 8px 15px;
      color: #767676;
	  border-top:1px solid #ddd;
	  display:block;
    }

    .accordion-toggle.open .submenu {
      display: block;
    }

    .auth-buttons {
       width: 100%;
       margin: 0;
       padding: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
    }

    .auth-buttons a {
      text-align: center;
      padding: 0 25px;
      font-size: 15px;
      border-radius: 40px;
	  height:40px;
	  line-height:40px;
    }

    .login-btn {
      background-color: #f0f0f0;
      color: #333;
    }

    .signup-btn {
      background-color: #333;
      color: #fff;
    }
}

@media screen and (max-width: 768px) {
  /* main-banenr */
  .banner1 {
    height: 100vh;
    line-height: 1.4;
  }
  
  .banner-txt {
	position: absolute;
	z-index: 2;
	font-size: 3.75rem;
	padding: 0 20px;
	transform: translate(0%, 100%);
	transition: transform 0.6s ease-out;
	margin-bottom: 4rem;
	width:100%;
	display:block;
  }
  .banner-txt.active {
	transform: translate(0%, 0%);
  }
  .banner-txt h1 {
    font-size: 2rem;
  }
  
  .banner-txt p {
    font-size: 13px;
  }
  
  .banner-txt div a {
	font-size: 13px;
	height:40px;
	line-height:40px;
	padding:0 10px;
  }
  
  .banner_cnt ul {
	min-width:100%;
	width:100%;
	top:-80px;
	padding:15px;
	border-radius:0px;
	border:0px;
  }
  .banner_cnt ul li {
	width:25%;
  }
  .banner_cnt ul li h2 {
	font-size: 24px;
	margin-bottom:5px;
  }
  .banner_cnt ul li p {
	font-size: 13px;
  }

  .line1 {
    display: block; /* 모바일에서 첫 번째 줄을 보여줌 */
    text-align: center; /* 가운데 정렬 */
  }

  .line2 {
    display: block; /* 모바일에서 두 번째 줄을 보여줌 */
    text-align: center;
    margin-top: 10px; /* 두 번째 줄에 마진 추가 */
  }
  .banner-txt span {
    font-size: 1rem;
  }
  
  
/* content-1 */
.content-1 {
  width: 100%;
  margin-bottom: 6rem;
  padding:50px 0;
}

.content-1 .title {
  text-align: center;
  margin-bottom: 1rem;
}
.content-1 ul {
  width: 100%;
  display:grid; grid-template-columns:repeat(2, 1fr); column-gap:4px; row-gap:4px;
}

.content-1 ul li {
  width: auto;
  border-radius: 15px;
  background-color:#f6f6f6;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding:10px;
  box-sizing:border-box;
  border:1px solid #ddd;
}
.content-1 ul li h2 {
  color:#333;
  font-size: 21px;
  line-height:32px;
}
.content-1 ul li p {
  color:#666;
  font-size:13px;
  line-height:18px;
}
.content-1 ul li div {
  min-height:30px;
}
.content-1 ul li a {
  color:#666;
}


/* content-2 */
.content-2 {
  padding: 5rem 0;
}
.content-2 ul {
  display:grid; 
  grid-template-columns:repeat(2, 1fr); 
  column-gap:14px; 
  row-gap:14px;
}
.content-2 ul li {
  border-radius:10px;
  overflow:hidden;
  background-color:#fff;
  box-sizing:0 0 10px rgba(0,0,0,0.1);
}
.content-2 ul li img {
  width:100%;
}
.content-2 ul li div {
  padding:25px;
}
.content-2 ul li div h2 {
  font-size:16px;
  font-weight:500;
  color:#333;
  margin-bottom:15px;
}
.content-2 ul li div p {
  font-size:13px;
  color:#666;
}


/* content-3 */
.content-3 {
  padding: 5rem 0;
  background-color: #f6f6f6;
}
.content-3 ul {
  display:grid; 
  grid-template-columns:repeat(2, 1fr); 
  column-gap:14px; 
  row-gap:14px;
}
.content-3 ul li {
  border-radius:10px;
  overflow:hidden;
  background-color:#fff;
  box-sizing:0 0 10px rgba(0,0,0,0.1);
  padding:0px;
}
.content-3 ul li img {
  width:100%;
  margin:0px;
}
.content-3 ul li div {
  padding:15px;
  background-color:#09F;
  color:#fff;
  text-align:center;
  border-radius:0 0 10px 10px;
  margin-top:-5px;
}
.content-3 ul li div h2 {
  font-size:16px;
  font-weight:500;
  color:#fff;
}
.content-3 ul li p {
  font-size:13px;
  color:#333;
  text-align:center;
  padding:20px 0;
}



.content-0 { padding:50px 0; background:#f6f6f6 url(/main/img/main/barner.png) no-repeat right center / auto 100%; }
.content-0 .title {  }
.content-0 .title h2 { color:#222; margin:20px 0; font-size:21px; }
.content-0 .title p { color:#C90; }
.content-0 .title a { display:block; width:150px; font-size:13px; }

.content-4 { padding:50px 0; }
.content-4 .title {  }
.content-4 .title h1 { color:#222; text-align:center; font-size:24px; }
.content-4 .title p { color:#C90; text-align:center; }
.content-4 ul { display:grid; grid-template-columns:repeat(2, 1fr); column-gap:14px; row-gap:14px; }
.content-4 ul li { border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.1); background-color:#fff; text-align:center; }

.content-5 { padding:50px 0; background-color:#f6f6f6; }
.content-5 .title h1 { color:#222; font-size:27px; text-align:center; }
.content-5 .title p { color:#C90; text-align:center; }
.content-5 .faqbox { margin-bottom:20px; display:block; }
.content-5 .faqbox > div { width:100%; border-radius:12px; padding:40px; background:#000 url(/main/img/main/faq.png) no-repeat bottom right / auto 70%; }
.content-5 .faqbox > div p { font-size:15px; color:#999; margin-bottom:20px; text-align:center; }
.content-5 .faqbox > div h2 { font-size:27px; color:#fff; text-align:center; }
.content-5 ul { width:100%; }
.content-5 ul li { background-color:#fff; border-radius:10px; margin-bottom:5px; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.content-5 ul li h2 { font-size:15px; color:#333; height:auto; line-height:18px; padding:10px 20px; position:relative; margin:0 25px 0 0; }
.content-5 ul li h2 span { display:inline-block; position:absolute; top:50%; right:15px; width:20px; height:10px; background:url(/main/img/bottom.png) no-repeat center; transform:translateY(-50%); }
.content-5 ul li div { font-size:15px; padding:20px; background-color:#f6f6f6; display:none; }

.content-6 { background-color:#111; border-bottom:1px solid #222; padding:50px 20px; }
.content-6 .title h1 { color:#fff; font-size:27px; text-align:center; }
.content-6 .title p { color:#C90; text-align:center; }
.content-6 ul { display:grid; grid-template-columns:repeat(1, 1fr); column-gap:14px; row-gap:14px; }
.content-6 ul li { border-radius:10px; padding:30px; background-color:#222; }
.content-6 ul li h3 { font-size:21px; color:#fff; }
.content-6 ul li p { font-size:15px; color:#666; padding:30px 0; }
.content-6 ul li a { font-size:16px; color:#C90; }



.svisual h2 { width:100%; padding:0px; margin:-5px auto 5px; font-size:28px; font-weight:bolder; color:#fff; }
.svisual p { margin:auto 50px; color:#fff; font-size:13px; word-break:keep-all; }
  

  .brand-value-list {
    flex-direction: column;
    align-items: center;
  }

  .brand-value-list li {
    width: 100%;
    max-width: 90%;
    height: 360px;
  }

  .text-wrap {
    text-align: center;
    padding: 1.5rem;
  }

  .text-wrap h2 {
    font-size: 1.4rem;
  }

  .text-wrap p {
    font-size: 0.95rem;
  }

  /* content-2 */
  .txt-left {
    width: 100%;
    text-align: center;
    margin: 0;
    padding-bottom: 20px;
	align-items: center;
  }
  .txt-left h3 {
    font-size: 1rem;
}
	.txt-box h2 {
    font-size:1.2rem;
}
  #inner2 {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }
  .sub-banner > .title > h3 {
    padding: 16px;
  }
  
  
  footer .footer {
	text-align:left;
	padding:70px 0 40px;
	position:relative;
  }
  
  footer .footer div {
	text-align:center;
	display:inline-block;
	position:absolute;
	top:10px;
	left:50%;
	transform:translateX(-50%);
  }
}

/* footer */
@media screen and (max-width: 1200px) {
  /* 화면 너비가 1200px 이하일 때 */
  .footer {
    width: 100%; /* 100%로 너비를 조정 */
    max-width: 1300px; /* 1300px 이상이면 고정 크기 */
    padding: 1rem;
  }

  /* info는 중앙 정렬 */
  .info {
    justify-content: center;
    margin-top: 2rem;
    align-items: center;
  }

  /* 하위 항목들 정보들도 중앙 정렬 */
  ul.info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
    /* 화면 너비가 768px 이하일 때 */
    .footer {
        padding: 10px;
        height: auto;
    }

    .footer h1 {
        font-size: 1.5rem;
        padding: 1rem 0 2rem 0;
    }

    .footer h2 {
        font-size: 1.8rem;
    }

    ul.info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .info {
        justify-content: center;
        margin-top: 2rem;
        align-items: center;
    }

    ul.info li {
        margin-bottom: 0;
    }

    .footer ul {
        flex-direction: column;
        gap: 15px;
    }
}