@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 100;
  font-style: normal;
  src: url("./assets/fonts/NotoSans-Thin.eot?") format("eot"),
  url("./assets/fonts/NotoSans-Thin.otf") format("opentype"),
  url("./assets/fonts/NotoSans-Thin.woff") format("woff"),
  url("./assets/fonts/NotoSans-Thin.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 200;
  font-style: normal;
  src: url("./assets/fonts/NotoSans-Light.eot?") format("eot"),
  url("./assets/fonts/NotoSans-Light.otf") format("opentype"),
  url("./assets/fonts/NotoSans-Light.woff") format("woff"),
  url("./assets/fonts/NotoSans-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 300;
  font-style: normal;
  src: url("./assets/fonts/NotoSans-DemiLight.eot?") format("eot"),
  url("./assets/fonts/NotoSans-DemiLight.otf") format("opentype"),
  url("./assets/fonts/NotoSans-DemiLight.woff") format("woff"),
  url("./assets/fonts/NotoSans-DemiLight.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 400;
  font-style: normal;
  src: url("./assets/fonts/NotoSans-Regular.eot?") format("eot"),
  url("./assets/fonts/NotoSans-Regular.otf") format("opentype"),
  url("./assets/fonts/NotoSans-Regular.woff") format("woff"),
  url("./assets/fonts/NotoSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 500;
  font-style: normal;
  src: url("./assets/fonts/NotoSans-Medium.eot?") format("eot"),
  url("./assets/fonts/NotoSans-Medium.otf") format("opentype"),
  url("./assets/fonts/NotoSans-Medium.woff") format("woff"),
  url("./assets/fonts/NotoSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 700;
  font-style: normal;
  src: url("./assets/fonts/NotoSans-Bold.eot?") format("eot"),
  url("./assets/fonts/NotoSans-Bold.otf") format("opentype"),
  url("./assets/fonts/NotoSans-Bold.woff") format("woff"),
  url("./assets/fonts/NotoSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Korean";
  font-weight: 900;
  font-style: normal;
  src: url("./assets/fonts/NotoSans-Bold.eot?") format("eot"),
  url("./assets/fonts/NotoSans-Bold.otf") format("opentype"),
  url("./assets/fonts/NotoSans-Bold.woff") format("woff"),
  url("./assets/fonts/NotoSans-Bold.woff2") format("woff2");
}

* {
    -webkit-appearance: none;
    -moz-appearance: none;
}

html {
  -webkit-text-size-adjust: none;
}

body,
input,
textarea,
button,
a,
.button,
.faux-button,
.wp-block-button__link,
.wp-block-file__button {
    font-family: "Noto Sans Korean", -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    color: #47372d;
}

section {
  margin: 0;
  padding: 0;
}
/*
 * header
 */
#site-header {
    background-color: #47372D;
}

#site-header .header-inner {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

#site-header .header-title {
  padding: 10px 30px 12px;
}

#site-header .header-title a {
    color: #FFF;
    display: block;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}

#site-header .header-title a:hover {
    text-decoration: none;
}

#site-header .header-title a > div {
  display: inline-block;
  vertical-align: middle;
}

#site-header .header-title .logo {
  width: 76px;
  margin-right: 10px;
}

/*
 * footer
 */

#site-footer {
    background-color: #FFF;
    margin: 0;
    padding: 20px 30px;
}

#site-footer .contact ul,
#site-footer .contact div {
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

#site-footer .contact ul {
  margin-right: 20px;
}

#site-footer .contact div {
  margin-right: 5px;
}

#site-footer .contact div img {
  width:20px;
}

#site-footer .contact li {
  color: #47372D;
  margin: 0 0 5px;
}
#site-footer .contact li,
#site-footer .contact a {
  font-size: 12px;
}

#site-footer .contact a:hover {
  text-decoration: none;
}

#site-footer .contact li:last-child {
  margin-bottom: 0;
}

#site-footer .contact li strong {
  font-weight: bold;
}


/*
 * menu
 */
ul.primary-menu {
  display: flex;
  letter-spacing: 0;
  justify-content: unset;
  margin: 0;
}

.primary-menu > li {
  margin: 0;
  width: 20%;
  padding:20px 0 60px 30px;
}

.primary-menu > li:hover {
  cursor: pointer;
  background: #FFF;
}

.primary-menu .icon {
  display: none;
}

.primary-menu a {
  font-weight: 600;
}

.primary-menu > li > a {
  font-size: 24px;
  line-height: 1;
}

.primary-menu a:hover {
  text-decoration: none;
}

.primary-menu .current-menu-parent > a {
  color: #FFF;
}

.primary-menu .current-menu-parent:hover > a {
  color: #47372d;
}

.primary-menu li.current-menu-item > a,
.primary-menu li.current-menu-item > .link-icon-wrapper > a {
  text-decoration: none;
}

.sub-menu li {
  padding-bottom: 15px;
}

.sub-menu li:last-child {
  padding-bottom: 0;
}
.sub-menu li a {
  padding: 0;
}

.primary-menu ul {
  background: #FFF;
  border-radius: 0;
  display: none;
  opacity: 1;
  color: inherit;
  top: 40px;
  left: 0;
  font-size: 20px;
  padding: 30px;
  width: 100%;
  position: absolute;
}

.primary-menu ul::after {
  border: 0;
}

.primary-menu li.menu-item-has-children:hover > ul,
.primary-menu li.menu-item-has-children:focus > ul,
.primary-menu li.menu-item-has-children.focus > ul {
    display: block;
}


/*
 * main
 */

html {
}

#site-content {
  min-height: calc(100vh - 323px);
}

#main h2 {
  font-size: 24px;
  margin:0;
}

#main .cover {
  margin-bottom: -1px;
  max-height: 800px;
  overflow: hidden;
}

#main .cover img {
    width: 100%;
}

#main .notice,
#main .photo-gallery {
  float: left;
  margin: 0;
  height: 400px;
}

#main .notice {
  background: #FFF;
  padding: 20px 30px;
  width: 40%;
}

#main .notice h2,
#main .photo-gallery h2 {
  margin-bottom: 50px;
}

#main .photo-gallery h2 {
  padding: 20px 0 0 30px;
}

#main .photo-gallery {
  background: #47372d;
  width: 60%;
}

#main .photo-gallery h2 {
  color: #FFF;
}
/*
 * entry
 */

.entry-content {
  padding: 0;
  font-size: 20px;
}

h1.entry-title {
  font-size: 48px;
}

.entry-content p, .entry-content li {
  line-height: 36px;
}

.singular .entry-header {
  padding: 30px;
}


#site-content.page {
  padding: 0;
}

.page .entry-content p {
  font-weight: bold;
}

.page section {
  padding:30px 30px 50px 30px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.page section:first-child {
  padding-top: 0;
}

.page section h2 {
  font-size: 48px;
  margin-bottom: 24px;
}

.page-about #people {
  background: #604d3f;
}

.page-about #people h2 {
  color: #c9bc9c;
}

.page-about #about,
.page-about #people p,
.page-about #location p,
.page-village {
  color: #FFF;
}

.page-about #about article {
  max-width: 902px;
}

.page-about #history {
  background: #FFF;
  color: #47372c;
}

.page-village #village p,
.page-village #art p,
.page-village #physical p,
.page-village #skill p {
  white-space: pre-wrap;
}

.page-about #history table {
  empty-cells: hide;
}

.page-about #history table,
.page-about #history table * {
  border: 0;
}

.page-about #history td {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.8;
  padding: 8px 0;
  vertical-align: top;
}

.page-about #history tr td:first-child {
  width: 160px;
}

.page-about #about {
  height: 400px;
  position: relative;
  background-image: url('./assets/images/section_about_about.jpg');
}

.page-village #about {
  background-image: url('./assets/images/section_village_about.jpg');
}

.page-village #village {
  background-image: url('./assets/images/section_about_about.jpg');
}

.page-village #skill {
  background-image: url('./assets/images/section_village_skill.jpg');
}

.page-village #physical {
  background-image: url('./assets/images/section_village_physical.jpg');
}

.page-village #art {
  background-image: url('./assets/images/section_village_art.jpg');
}


.page-about #about .logo {
  position: absolute;
  width: 330px;
  top: calc(50% - 165px);
  right: 30px;
}

.page-village #about article {
  max-width: 1184px;
}

.page-template-template-board .entry-content {
  padding: 0 30px;
}

.yotu-videos .yotu-video .yotu-video-thumb {
   -webkit-filter: brightness(78%) hue-rotate(42deg) saturate(22%) sepia(70%);
    filter: brightness(78%) hue-rotate(42deg) saturate(22%) sepia(70%);
}


@media screen and (max-width: 1200px) {
  .page-about #about .logo {
    display: none;
  }
}

@media screen and (max-width: 1080px) {
  #main .notice,
  #main .photo-gallery {
    width: 100%;
    height: auto;
  }

  .primary-menu {
    padding:15px 30px;
    display: block;
  }

  .primary-menu > li {
    padding: 0 0 30px 0;
    width: 100%;
  }

  .primary-menu > li:last-child {
    padding-bottom: 0;
  }

  .primary-menu > li:hover {
    background: inherit;
  }
  .primary-menu > li:hover > a {
    color: #FFF;
  }
  .primary-menu a {
  }

  .primary-menu ul {
    background: transparent;
    position: relative;
    padding: 0;
    top: 0;
    left: auto;
    right: auto;
    display: inline-block;
    width: auto;
  }

  .primary-menu > li > a {
  }

  .sub-menu li {
    display: inline-block;
    padding: 0 10px 0 0;
  }

  .primary-menu li.menu-item-has-children:hover > ul,
  .primary-menu li.menu-item-has-children:focus > ul,
  .primary-menu li.menu-item-has-children.focus > ul {
      display: block;
  }

  .primary-menu .current-menu-parent:hover > a {
    color: #FFFFFF;
  }

  .primary-menu li:hover > a,
  .primary-menu .current_page_item {
   color: #FFF;
  }
}



@media screen and (max-width: 600px) {
  .primary-menu ul {
    display: block;
  }

  .primary-menu li.menu-item-has-children:hover > ul,
  .primary-menu li.menu-item-has-children:focus > ul,
  .primary-menu li.menu-item-has-children.focus > ul {
    display: block;
  }

  #site-footer .contact > div {
    display: block;
  }

  #site-footer .contact > div:last-child {
    margin-top: 20px;
  }

  #site-footer {
    padding: 20px 10px;
  }

  #site-footer .contact ul {
    margin-right: 0;
  }
  #site-footer .contact .icon {
    display: none;
  }

  #site-footer .contact li a {
    display: block;
  }
}