/* COMMON */
.body__container {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

a {
  text-decoration: none;
}

/* BTN */
.btn {
  display: flex;
  position: relative;
  align-items: center;
  padding: 0 12px;
  height: 34px;

  color: #333;
  background: #eee linear-gradient(to bottom, #fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 4px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  box-sizing: border-box;
}

.btn:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.07);
}

/* INPUT TEXT */
.input--text {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  outline: none;
  font-size: 16px;
}
.input--text:focus {
  border-color: #51a7e8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075),
    0 0 5px rgba(81, 167, 232, 0.5);
}

.btn.btn--primary {
  border: 1px solid #65b836;
  color: #fff;
  background: #55a532 linear-gradient(#91dd70, #55ae2e);
}
/* FLOAT CLEARFIX */
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}
.float--left {
  float: left;
}
.float--right {
  float: right;
}

/* SUMMARY */
.summary {
  position: relative;
}
.summary__title {
  margin-bottom: 18px;
  font-size: 38px;
  font-weight: 300;
  line-height: 1.25;
}
.summary__description {
  color: #767676;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.5;
}

/* SECTION & WRAPPER*/
.section {
  position: relative;
}

.section .wrapper {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
  /* padding과 border가 들어갔을 때 요소가 커지는데, 이를 방지하기 위해 border-box를 사용한다.  */
}

/* HEADER */
header {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
}
header .wrapper {
  height: 78px;
}

header .menu-group {
  display: flex;
  align-items: center;
  height: 100%;
}
header .logo {
  margin-right: 10px;
}
header .logo a {
  /* a태그는 inline */
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("../img/logo.svg");
  /* 들여쓰기 */
  text-indent: -9999px;
}
header .logo a:hover {
  background-image: url("../img/logo_on.svg");
}
header .main-menu {
  display: flex;
}

header .main-menu li a {
  /* inline style인 a 태그는 위, 아래(padding)를 가질 수 없다. 
  so, display:block 옵션 설정 */
  display: block;
  padding: 10px;
  color: #3c4146;
}

header .main-menu li a:hover {
  color: #4078c5;
}

/* order를 이용해서 순서를 역순으로  */
header .sign-group {
  display: flex;
  align-items: center;
  height: 100%;
}

header .btn-group {
  display: flex;
  order: 2;
}

header .btn-group .sign-in {
  margin-right: 4px;
}

header .search-form {
  margin-right: 12px;
  order: 1;
}
header .search {
  width: 160px;
  font-size: 14px;
}
/* submit 버튼을 css로 숨기려고 했을 때, 일일이 클래스를 지정하면 번거롭기 때문에 형제 요소 선택자와 속성 선택자를 사용 */
header .search + [type="submit"] {
  display: none;
}
header .sub-menu {
  display: flex;
}

header .sub-menu li a {
  display: block;
  padding: 8px;
  color: #3c4146;
  font-size: 13px;
}

header .sub-menu li a:hover {
  color: #4078c0;
}

header .toggle-btn {
  display: none;
}

/* VISUAL */

.section--visual {
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  /* background-size는 배경의 사이즈를 전체 영역으로 조정 */
}

/* 배경 어둡게 설정 */
.section--visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.section--visual .wrapper {
  display: flex;
  padding: 160px 0;
}

.section--visual .summary {
  /* flex-items 속성 */
  flex: 1;
  margin-right: 90px;
}

.section--visual .summary__title {
  color: #fff;
  font-size: 54px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.025), 0 1px 25px rgba(0, 0, 0, 0.75);
}

.section--visual .summary__description {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.025), 0 1px 25px rgba(0, 0, 0, 0.75);
}

.sign-form {
  width: 340px;
  margin-top: 16px;
}

.sign-form li {
  margin-bottom: 17px;
}

.sign-form li:last-child {
  margin-bottom: 0;
}

.sign-form .input--text {
  width: 100%;
  height: 40px;
}
.sign-form .caption {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
}

.sign-form [type="submit"] {
  justify-content: center;
  width: 100%;
  height: 62px;
  padding: 0 25px;
}

/* FEATURE */

.section--feature {
  padding-top: 66px;
  background: #f5f5f5;
}

.section--feature .summary {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.section--feature .video {
  max-width: 650px;
  margin: 50px auto;
}
.section--feature .video .video-ratio {
  position: relative;
  height: 0;
  padding-top: 56.25%;
}
.section--feature .video .video-ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section--feature .tiles {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.section--feature .tiles .wrapper {
  max-width: 1200px;
}

.section--feature .tiles ul {
}

.section--feature .tiles li {
  float: left;
  width: 25%;
  padding: 34px 24px;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  line-height: 1.5;
  box-sizing: border-box;
}

.section--feature .tiles li:last-child {
  border-right: none;
}

.section--feature .tiles li img {
  max-width: 100%;
  padding: 14px 10% 24px;
  box-sizing: border-box;
}

.section--feature .tiles li h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}

.section--feature .tiles li p {
  color: #767676;
  font-size: 14px;
}

/* WHERE IS*/
.section--where-is {
}
.section--where-is .wrapper {
  padding-top: 80px;
}
.section--where-is .map {
  width: 100%;
  height: 400px;
  margin-top: 40px;
  border-bottom: none;
  box-shadow: 0 0 20px rgba(0, 0, 0.2);
  box-sizing: border-box;
}

/* PRICING CARD */

.section--pricing {
  /* 그라디언트 */
  background: linear-gradient(#f5f5f5, #ffff);
}
.section--pricing .wrapper {
  padding: 80px 0;
}

.section--pricing .card {
  display: flex;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-sizing: border-box;
}
.section--pricing .card .cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.section--pricing .card .cell1 .btn {
  height: 50px;
  font-size: 16px;
}

.section--pricing .card .cell2 {
  /* cell2가 가변할 수 있도록 flex grow를 1로 설정 */
  /* 버튼은 고정되어야 하고 텍스트는 가변해야 하기 때문 */
  flex: 1;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  border-left: 1px solid #e5e5e5;
}

/* FOOTER */
footer {
}

footer .wrapper {
  padding: 50px 0;
  border-top: 1px solid #e5e5e5;
}

footer .footer-links {
  display: flex;
}

footer .footer-links li {
  color: #767676;
  margin-right: 10px;
  font-size: 12px;
}

footer .footer-links li a {
  color: #4078c0;
}

footer .footer-links li a:hover {
  text-decoration: underline;
}

footer .logo {
  /* 부모 요소를 기준으로 가운데 배치하는 코드 */
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* 로고 가운데 정렬 */
  margin: auto;
}

footer .logo:hover svg {
  fill: #4078c0;
}

/* 반응형 작업 */
@media (max-width: 1024px) {
  /* 우선 순위 문제로 인해 일치 선택자를 사용 */
  header.section .wrapper {
    /* 기존 header .wrapper에 있던 max-width 초기화 */
    max-width: none;
    /* height는 그 안에 들어있는 content 내용에 맞게 늘어날 수 있도록 */
    height: auto;
    padding: 0 20px;
  }
  header .menu-group,
  header .sign-group {
    /* float 초기화 */
    float: none;
  }

  /* menu-group 반응형 */

  header .menu-group {
    display: block;
  }

  header .main-menu {
    display: block;
    margin-bottom: 10px;
  }
  header .logo {
    padding: 12px 0;
  }

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

  header .main-menu li a {
    padding: 16px 0;
  }

  /* sign-group 반응형 */
  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-bottom: 12px;
    margin-right: 0;
  }

  header .search-form {
    margin-top: 10px;
    margin-right: 0;
  }
  header .search {
    width: 100%;
    height: 42px;
    text-align: center;
  }
  header .sub-menu {
    justify-content: center;
    margin-top: 12px;
    margin-right: 0;
  }
  header .toggle {
    display: none;
  }
  header .toggle.on {
    /* 만약 toggle 버튼이 생긴다면 다시 화면에 나타나게 */
    display: block;
  }

  header .toggle-btn {
    display: block;
    position: absolute;
    width: 18px;
    height: 24px;
    top: 16px;
    right: 20px;
    cursor: pointer;
  }

  /* VISUAL */
  .section--visual {
    background-image: url("../img//bg-small.jpg");
  }
  .section--visual .wrapper {
    display: block;
    max-width: none;
    padding: 80px 20px;
  }
  .section--visual .summary {
    text-align: center;
    margin-right: 0;
    margin-bottom: 50px;
  }
  .section--visual .sign-form {
    width: auto;
    max-width: 500px;
    margin: 0 auto;
  }
  /* FEATURE */
  .section--feature .summary {
    padding: 66px 20px 0 20px;
  }
  .section--feature .tiles li {
    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 .wrapper {
    max-width: none;
    padding: 80px 20px 0 20px;
  }
  /* PRICING CARD */
  .section--pricing .wrapper {
    max-width: none;
  }
  .section--pricing .card .cell2 {
    font-size: 20px;
  }
  /* FOOTER */
  footer .wrapper {
    padding: 50px 20px;
  }
  footer .logo {
    display: none;
  }
}