/* RESET */

@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NatsuzemiMaruGothicBlack';
    src: url('../font/NatsuzemiMaruGothicBlack.ttf');
    font-weight: normal;
    font-style: normal;
}



*{padding: 0; margin: 0; box-sizing: border-box; color: #333; font-size: 12px; font-family: "GmarketSansMedium";}
a {list-style: none; text-decoration: none; color: #333;}
ul {list-style: none;}
li {list-style: none;}

h1, h1 span {font-size: 70px; font-family: "yg-jalnan"}
h2, h2 span {font-size: 50px; font-family: "yg-jalnan";}
h3, h3 span {font-size: 40px; font-family: "yg-jalnan";}
h4, h4 span {font-size: 30px; font-family: "yg-jalnan";}
h5, h5 span {font-size: 24px; font-family: "yg-jalnan";}
h6, h6 span {font-size: 20px; font-family: "yg-jalnan";}

/* HEADER */
.header {width: 100%; height: 70px; background: #fff; box-shadow: 3px 3px 10px rgba(0,0,0,.15); padding: 20px 15px; position: fixed; top: 0; z-index: 1000;}
.nav {width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 250px auto 120px;}
.logo img {height: 30px;}

.main_menu {height: 100%; display: flex; gap: 25px;align-items: center;}
.main_menu a {font-size: 14px; font-family: "GmarketSansMedium";}

.lang_menu {position: relative;}
.lang_change {width: 100%; border: 1px solid #ddd; border-radius: 15px; height: 30px;}
.lang_menu_country {position: absolute; display: none; gap: 15px; align-items: center; top: 30px; background: #fff; box-shadow: 5px 5px 5px rgba(0,0,0,.1); border-radius: 15px; padding: 15px; width: 100%;}
.lang_menu_country.on {display: grid;}
.lang_menu li a {font-size: 14px;}

.menu_open {display: none;}
.m_menu {display: none;}

/* SNS MENU */
.sns_menu {position: fixed; top: 50%; right: 15px; transform: translateY(-50%); z-index: 1000; height: auto;}
.sns_menu ul {}
.sns_menu ul li {width: 50px; height: 50px; margin: 15px 0;}
.sns_menu ul li a {width: 100%; height: 100%; background: #fff; display: block; border-radius: 25px; padding: 10px; box-shadow: 3px 3px 10px rgba(0,0,0,.15);}

/* LANG KEY */
.lang_ko {display: block;}
.lang_en {display: none;}

/* CONTAINER */
.container {width: 100%;}
.container.landing {padding: 0; max-width: none;}
.section {width: 100%;}
.inner {width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 15px;}

.content {width: 100%;}

/* FOOTER */
.footer {padding: 15px;}

.footer .store_link {display: flex; gap: 15px; padding: 15px 0; position: relative; border-top: 1px solid #999;}
.footer .store_link a {display: flex; gap: 5px; border: 1px solid #999; padding: 5px 15px; border-radius: 20px; font-weight: 700;}
.footer .store_link a img {width: 20px;}

.footer_menu {display: flex; gap: 15px; margin-bottom: 10px; position: relative;}

.footer .copyright {font-weight: 700;}

/* BOTTOM MENU*/
.bottom_menu {position: fixed; bottom: 30px; z-index: 1; left: 50%; transform: translateX(-50%);}
.bottom_menu .store_link {width: auto; display: flex; gap: 15px; margin-top: 30px;}
.bottom_menu .store_link li a {width: 220px; background: #fff; display: flex; padding: 15px 20px; border-radius: 30px; gap: 20px; align-items: center; font-size: 16px; font-weight: 700; box-shadow: 3px 3px 15px rgba(0,0,0,.15);}
.bottom_menu .store_link li a img {width: 30px;}

.bottom_menu .store_link li.prebook_link a {background: linear-gradient(90deg, #ff7392, #709ef0); color: #fff; justify-content: center; font-weight: 500; width: auto; padding: 10px 50px;}

.prebook_link {animation: prebook_link 3s infinite;}


/* 오늘 하루 보지 않기 팝업 */
button {
  border: 0;
  background: none;
  cursor:pointer;
}

.main_popup {
  position: fixed;
  z-index: 1005;
  box-shadow: 0px 13px 20px rgba(0,0,0,.15);
  top: 30px;
  left: 30px;
  display: none;
  width: calc(100% - 60px);
  max-width: 500px;
  overflow: hidden;
  border-radius: 15px;

  &.on {
    display: block;
    background-color: #fff;
  }

  .img_wrap {
    display:grid;
    justify-content:center;
    align-items:center;
    height: calc(100vh - 100px);
    overflow-y: scroll;
  }
  
  .img_wrap a {width: 100%;}
  .img_wrap img {display: block; width: 100%;}

  .btn_wrap {display: grid; grid-template-columns: auto 50px ; padding: 10px; background: #333;}
  .btn_today_close {text-align: left; color: #eee;}
  .btn_today_close span {text-align: left; color: #eee;}
  .btn_close {text-align: right; color: #eee;}

/* 
  .btn_close {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 17px;
    right: 17px;
    font-size: 0;
    border: 0;
    background: none;

    &::before {
      content: "";
      width: 2px;
      height: 32px;
      background-color: #333;
      position: absolute;
      top: 0;
      left: 15px;
      transform: rotate(45deg);
    }
    &::after {
      content: "";
      width: 32px;
      height: 2px;
      background-color: #333;
      position: absolute;
      top: 15px;
      left: 0;
      transform: rotate(45deg);
    }
  }

  .btn_today_close {
    width: 100%;
    height: 45px;
    background-color: #333;
    text-align: center;
    color: #fff;
    font-size: 14px;
    display: block;
  }
  .btn_today_close span {
    display: block;
    line-height: 40px;
    vertical-align: bottom;
    opacity: 0.8;
    color: #fff;
  } */

  @media (max-width: 520px) {
    .main_popup {width: calc(100% - 30px); left: 15px; top: 65px;}
    .img_wrap {height: calc(100vh - 150px);}
    .btn_today_close span {font-size: 10px;}
    .btn_close {font-size: 10px;}
  }
  
}

/* PRIVACY */
.section.privacy { padding: 100px 0;}
.section.privacy h4 {margin-bottom: 20px; }

@media (max-width: 768px) {
  h1 {font-size: 50px; line-height: 1.3;}
  h2 {font-size: 30px; line-height: 1.3;}
  h3 {font-size: 24px; line-height: 1.3;}
  h4 {font-size: 20px; line-height: 1.3;}
  h5 {font-size: 16px; line-height: 1.3;}
  h6 {font-size: 14px; line-height: 1.3;}
  
  /* HEADER */
  .header {height: 50px; padding: 15px 15px;}
  .nav {grid-template-columns: auto 20px; gap: 15px;}
  .logo img {height: 20px;}
  .main_menu {display: none;}
  .lang_menu {display: none;}
  .lang_menu li a {font-size: 12px;}
  .menu_open {width: 20px; height: 20px; position: relative; display: block;}
  .menu_open div {width: 100%; height: 2px; background: #333; position: absolute;}
  .menu_open div:first-child {top: 0;}
  .menu_open div:nth-child(2) {top: 50%;}
  .menu_open div:last-child {bottom: 0;}

  .m_menu {position: fixed; right: -210px; width: 200px; height: 100vh; background: #fff; z-index: 2; padding: 65px 15px 0; box-shadow: 0 -5px 10px rgba(0,0,0,.1); transition: .2s; display: block;}
  .m_menu.on {right: 0;}
  .m_menu .main_menu {display: block; height: auto;}
  .m_menu .main_menu li {margin-bottom: 10px;}
  .m_menu .lang_menu {display: block;}
  /* SNS MENU */
  .sns_menu {}
  .sns_menu ul li {width: 30px; height: 30px; margin: 10px 0 0;}
  .sns_menu ul li a {padding: 7px;}

      /* BOTTOM MENU*/
      .bottom_menu {bottom: 15px; left: unset; right: 15px; transform: none;}
      .bottom_menu .store_link {display: block;}
      .bottom_menu .store_link li {margin-top: 10px;}
      .bottom_menu .store_link li a {font-size: 14px; width: 200px; height: 40px; padding: 10px;}
      .bottom_menu .store_link li a img {height: 20px;}
  
      .bottom_menu .store_link li.prebook_link a {font-size: 16px; padding: 15px 30px;}
}