@font-face {
  font-family: "KBO-Dia-Gothic_bold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff")
    format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "NanumSquareNeo-Variable";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}

h1,
h2,
h3,
p,
dl,
dd,
button,
fieldset,
form,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p {
  color: inherit;
  font: inherit;
}

fieldset {
  border: none;
}

label,
input {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

button {
  font: inherit;
  background-color: #fff;
  border: 0;
}

/* --------css 적용-------- */

.a11y-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color: #e6c1a3;
  font-family: "NanumSquareNeo-Variable";
}

.container {
  width: 390px;
  min-width: 360px;
  height: fit-content;
  margin: auto auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------header------- */

.bbq-logo {
  /* width: 390px; */
  width: 100%;
  height: 360px;
  text-align: center;
  background-image: url("./img/bbq.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.bbq-logo p {
  margin-top: 150px;

  font-family: "KBO-Dia-Gothic_bold";
  font-size: 4.5rem;
  line-height: 80px;
  text-shadow: 5px 5px 0 #c74d27;

  /* position: absolute; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
}

.fes7 {
  display: inline-block;
  width: 200px;

  font-family: "NanumSquareNeo-Variable";
  font-size: 1.1rem;
  line-height: 30px;

  background-color: #c74d27;
  color: white;
}

/* --------main------- */

.bbq-content::before {
  content: "";

  border-bottom: 60px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;

  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.bbq-content {
  width: 100%;
  height: calc(925px + 150px);
  /* height: fit-content; */
  line-height: 35px;

  margin: -30px 30px 10px;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 7px 7px 0px 0px #e56e48;

  position: relative;

  color: #4fc1ff;
  background-color: white;
  box-sizing: border-box;
  z-index: 10;
}

.bbq-sub {
  font-size: 1.5rem;
  font-weight: bold;
}

.bbq-sub strong {
  color: #2f64be;
}

.bbq-info {
  width: fit-content;
  box-sizing: border-box;
  margin: 0 auto;
}

.bbq-sub span,
.bbq-info + span {
  display: inline-block;
  color: #ff6ec5;

  font-size: 1.5rem;
  font-weight: bold;
  margin: 10px 0;
}

dd,
dt {
  display: inline;
}

.bbq-content dl {
  line-height: 30px;
}

.bbq-content dt {
  font-size: 1.1rem;
  font-weight: bold;
  padding-left: 0.5rem;
}

.bbq-content dd {
  color: #bd5c4b;
  font-weight: bold;
  padding-left: 0.2rem;
}

/* main - submit section */
.sect-submit {
  grid-area: left;
  padding: 20px 0 25px;
}

.sect-submit h3 {
  color: #bd5c4b;
  font-size: 1.3rem;
  font-weight: bold;
}

.sect-submit .form {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.form label {
  color: #4d5a61;
  font-size: 1rem;
  font-weight: bold;
}

.form .input {
  width: 100%;
  height: 45px;
  font-size: 0.8rem;
  color: #000;
  padding-left: 8px;
  background-color: #fff;
  border: 1px solid #c4c4c4;
  border-bottom: 2px solid #a0acb1;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}

.form .input::placeholder {
  color: #767676;
}

.form .input:hover {
  border: 1px solid #f76d00;
  border-bottom: 2px solid #f76d00;
}

.form .input:focus {
  outline: 1px solid #f76d00;
}

/* 개인정보 미입력 경고 */
[class^="warnning"] {
  display: none;
  color: #f4492e;
  font-size: 0.8rem;
  padding-left: 5px;
}

/* 메일 전송 완료 알림 */
.sect-submit .form .alert-container {
  display: none;
  width: 100%;
  height: fit-content;
  margin: 5px 0 0;
  background-color: #d4e7c5;
  box-sizing: border-box;
  border-radius: 5px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.sect-submit .form .alert-container > p {
  display: inline-block;
  width: 100%;
  font-size: 6px;
  font-weight: 400;
  line-height: 20px;
  color: #638f41;
  padding-left: 10px;
  box-sizing: border-box;
}

.close-button {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(./img/close.png);
  background-size: 50%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: transparent;
}

.closeButton:hover {
  cursor: pointer;
  background-color: rgb(140, 164, 120, 0.3);
  border-radius: 5px;
}

.closeButton:focus-visible {
  cursor: pointer;
  background-color: rgb(140, 164, 120, 0.6);
  border-radius: 5px;
  outline: 2px solid rgb(119, 130, 111);
}

.closeButton:focus {
  background-color: rgb(140, 164, 120, 0.6);
  border-radius: 5px;
}

.form p::after:active + .btn {
  margin-top: 10px;
}

.btn {
  width: 100%;
  font-size: 14px;
  color: #fff;
  border-radius: 5px;
  background-color: #f76d00;
  overflow: hidden;
  margin-top: 15px;
}

.form .btn:hover {
  cursor: pointer;
}

.form .btn:focus-visible {
  border: 1px solid #fff;
  outline: 2px solid #f76d00;
}

/* main - map section */

.sect-map {
  width: 100%;
  height: 300px;
  grid-area: right;
}

.sect-map h3 {
  color: #bd5c4b;
  font-size: 1.3rem;
  font-weight: bold;
  /* font-weight: 400; */
  line-height: 20px;
}

.sect-map strong {
  /* display: inline-block; */
  color: #4d5a61;
  font-size: 0.8rem;
  font-weight: bold;
  position: relative;
  padding-left: 20px;
}

.sect-map strong::before {
  content: "";
  /* display: inline-block; */
  width: 18px;
  height: 18px;
  background-image: url(./img/location.svg);
  background-size: contain;
  background-repeat: no-repeat;
  /* background-position: 0px 4px; */
  position: absolute;
  left: 0;
  top: -1px;
}

.sect-map #map {
  width: 95%;
  height: 60%;
  margin: 0 auto;
  background-color: royalblue;
  border-radius: 5px;
}

/* SVG FIRE */

.mo-fire {
  width: 60vw;
  max-width: 762px;
  height: fit-content;

  position: fixed;
  /* bottom: -50px; */
  bottom: -90px;

  z-index: 200;
  opacity: 95%;
}

.click-fire {
  z-index: 0;
}

/* width 0 ~ 720px 까지 */
@media (max-width: 720px) {
  .mo-fire {
    width: 400px;
    bottom: -50px;
  }
}

#svg-view {
  width: 100%;
  left: 0px;
}

.mo-fire svg {
  width: 100%;
  margin: auto;
  height: auto;
}
.flame {
  animation-name: flameDisappear;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.5;
  transform-origin: 45% 45% 0;
}
.flame.one {
  animation-delay: 1s;
  animation-duration: 3s;
}
.flame.two {
  animation-duration: 5s;
  animation-delay: 1s;
}

.flame-main {
  animation-name: flameMovement;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.flame-main.one {
  animation-duration: 2.2s;
  animation-delay: 1s;
}
.flame-main.two {
  animation-duration: 2s;
  animation-delay: 1s;
}
.flame-main.three {
  animation-duration: 2.1s;
  animation-delay: 3s;
}
.flame-main.four {
  animation-duration: 3.2s;
  animation-delay: 4s;
}
.flame-main.five {
  animation-duration: 2.5s;
  animation-delay: 5s;
}
@keyframes flameMovement {
  50% {
    transform: scale(0.98, 1) translate(0, 2px) rotate(-1deg);
  }
}
@keyframes flameDisappear {
  0% {
    transform: translate(0) rotate(180deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-10px, -40px) rotate(180deg);
    opacity: 0;
  }
}

/* width 0 ~ 420px 까지 */
@media (max-width: 420px) {
  .container {
    width: 100vw;
  }

  .bbq-logo {
    width: 85vw;
  }

  .bbq-content {
    width: 85vw;
    height: calc(925px + 170px);
  }

  .bbq-sub {
    font-size: 1.1rem;
  }

  .bbq-sub span,
  .bbq-info+span {
    font-size: 1.1rem;
  }

  .bbq-content dt {
    font-size: 1rem;
    padding-left: 0.4rem;
  }

  .bbq-content dd {
    padding-left: 0.2rem;
    font-size: 0.9rem;
  }

}

/* width 1060px ~ 부터 */
@media (min-width: 1060px) {
  .bbq-content {
      height: calc(925px + 260px);
    }
}