@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Serif+KR&display=swap");
@import url(/reset.css);
/* ----header---- */
@import url(./header.css);
/* ----footer----- */
@import url(./footer.css);

h1,
h2,
h3,
h4 {
  font-family: "Black Han Sans", sans-serif;
  font-family: "Noto Serif KR", serif;
}

.visual {
  height: 1259px;
  background-image: url(../images/ruins_img03.png);
  background-position: center;
}

/*-------tap menu-------- */
.tab_menu {
  max-width: 1400px;
  margin: auto;
  padding-top: 100px;

 
}
.tab_menu .tab {
  display: flex;
  height: 70px;
  background-color: #fff;
 
}
.tab_menu .tab li {
  flex: 1;
  border: 1px solid #ddd;
}
.tab_menu ul.tab li:hover {
  border-color: #e23e58;
}
.tab_menu ul.tab li.active {
  background: #e23e58;
  color: white;
}

.tab_menu ul.tab li a {
  display: block;
  height: inherit;
  text-align: center;
  line-height: 70px;
  font-size: 18px;
  font-weight: bold;
}

/* ----section---- */

section.map {
  max-width: 860px;
  margin: 80px auto;
  text-align: center;

}
section .mapinfo > * {
  display: inline-block;
  vertical-align: middle;
}
section.map figure img {
  width: 100%;
  box-shadow: 0px 10px 20px rgb(0 0 0 / 30%);
}

.mapinfo{
  margin-bottom: 20px;
}

/* .visual {
  height: 1350px;
  background: url(../images/ruins_img03.png);
  background-size: cover;
  padding: 8rem 8rem;
} */

/* ------main------ */
section.main {
  max-width: 1240px;
  margin: auto;
  margin-top: 100px;
  
}
article {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;
}
article .desc {
  width: 43%;
  border-top: 1px solid #e23e58;
  padding-top: 10px;
}

article .desc span{
  color: #e23e58;
  font-family: "Noto Serif KR", serif;
  font-size: 20px;

}

article .desc h2{
  margin: 20px 0 30px 0;
  font-size: 2rem;
  font-weight: 800;
}

article .desc p{
  font-size: 20px;
  line-height: 35px;
  color: #555;
  position: relative;
}

article .desc p::before{
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 50px;
  height: 1px;
  background-color: #000;
}

article .thumnail {
  width: 50%;
}
article .thumnail img {
  width: 100%;
  vertical-align: top;
}
/* vertical-align 글자정렬 */

article:nth-child(odd) .desc {
  order: 2;
}
/* 홀수의 글은 2번째로 */
article:nth-child(odd) .thumnail {
  order: 1;
}

p.end{
  text-align: right;
  padding: 20px;
}
/* 홀수의 이미지는 1번째로 */

@media screen and (max-width: 521px) {
  header {
    height: 60px;
  }
  header nav{display: none;}
  header h1 img {
    height: 25px;
  }
  nav ul {
    flex-direction: column;
  }
  .visual {
    height: 90vh;
  }
  .tab_menu {
    padding-top: 30px;
  }
  .visual section.map {
    width: 90%;
  }

  section.main {
    margin-top: 20px;
  }
  section.main article {
    flex-wrap: wrap;
  }
  section.main .col1 {
    width: 100%;
  }
  section.main .col2 {
    width: 100%;
    padding-right: 0px;
  }
  section.main .col2 h2 {
    margin: 10px 0px 20px;
  }
  section.main .col2 span {
    font-size: 20px;
  }
  section.main .col2 p {
    font-size: 17px;
  }
}