/* MEDIA - MEDIUM */
/* @media all and(max-width: 1024px) 에서 all(screen->all)은 기본값이라 적지 않아도 되고, and는 type이 없으니 적지 않아도 무방하다! */

header.section .inner {
  max-width: none;
  height: auto;
  padding: 0 20px;
}

header .menu-group,
header .sign-group {
  float: none;
}

header .menu-group {
  display: block;
}

header .logo {
  padding: 12px 0;
}

header .main-menu {
  display: block;
  margin-bottom: 10px;
}

header .main-menu li {
  border-top: 1px solid #e5e5e5;
}
header .main-menu li a {
  padding: 16px 0;
}

header .sign-group {
  display: block;
  padding: 10px 0 20px;
}

header .btn-group {
  display: block;
}

header .btn-group .btn {
  justify-content: center;
}

header .btn-group .sign-in {
  margin-right: 0;
  margin-bottom: 12px;
}

#search-form {
  margin-top: 12px;
  margin-right: 0;
}

#search {
  width: 100%;
  height: 42px;
  text-align: center;
}

header .sub-menu {
  margin-top: 12px;
  margin-right: 0;
  justify-content: center;
}

header .toggle {
  display: none;
}

header .toggle.on {
  display: block;
}

#toggle-btn {
  display: block;
}

/* VISUAL */
.section--visual {
  background-image: url("../img/bg-small.jpg");
}

.section--visual .inner {
  display: block;
  max-width: none;
  padding: 80px 20px;
}

.section--visual .summary {
  text-align: center;
  margin-right: 0;
  margin-bottom: 50px;
}

#sign-form {
  width: auto;
  max-width: 500px;
  margin: 0 auto;
}

/* FEATURE */
.section--feature .summary {
  padding: 66px 20px 0 20px;
}

.section--feature .tiles li {
  max-width: 50%;
}

.section--feature .tiles li:nth-child(2) {
  border-right: none;
}

.section--feature .tiles li img {
  padding: 14px 30% 24px;
}

/* WHERE IS */
.section--where-is .inner {
  max-width: none;
  padding: 80px 20px 0 20px;
}

/* PRICING CARD */
.section--pricing .inner {
  max-width: none;
  padding: 80px 20px;
}

.section--pricing .card .cell2 {
  font-size: 20px;
}

/* FOOTER */
footer .inner {
  padding: 50px 20px;
}

footer .logo {
  display: none;
}