:root {
  --wt1 :rgba(255,255,255,1);
  --bk1 :rgba(70,70,70,1);
  --gray1 :rgba(150,150,150,1);
  --line :rgba(55,192,49,1);
  --swiper-theme-color :rgba(255,255,255,0);
  --swiper-pagination-color :rgba(70,70,70,1);
}

/* ----- font ----- */
.lato-light { font-family: "Lato", sans-serif; font-weight: 300; font-style: normal }
.lato-bold { font-family: "Lato", sans-serif; font-weight: 700; font-style: normal }
.lato-black { font-family: "Lato", sans-serif; font-weight: 900; font-style: normal }


/* ----- color ----- */
body { background-color: var(--wt1)}
#wrapper { background-color: var(--wt1)}

.color-wt1 { color: var(--wt1) !important }
.color-bk1 { color: var(--bk1) !important }
.color-line { color: var(--line) !important }
.bg-color-wt1 { background-color: var(--wt1) !important }
.bg-color-bk1 { background-color: var(--bk1) !important }


/* ----- unique ----- */
.mkd-header-logo { font-size: 13px; letter-spacing: 0.2rem;
  font-family: "Lato", sans-serif; font-weight: 300; font-style: normal }
.mkd-wrap p { font-size: 13px; text-align: center; margin-bottom: 30px; color: var(--gray1);
  font-family: "Lato", sans-serif; font-weight: 300; font-style: normal }
.mkd-wrap p img { width: 100%; height: auto }


/* ----- header + mv ----- */
.header-nav-c1 { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 0 }
.hbg-c1 { display: flex; width: 50px; height: 50px; padding-right: 12px; padding-top: 2px; margin-right: 12px; margin-top: 12px;
  justify-content: flex-end; align-items: center; z-index: 100; cursor: pointer;
  background-color: var(--orange1); border-radius: 50px }
.hbg-c1 span,
.hbg-c1 span:before,
.hbg-c1 span:after { content: ''; display: block; height: 2px; width: 28px; background: var(--wt1); transition: .3s; position: absolute; z-index: 9999 }
.hbg-c1 span { background: rgba(255,255,255,0)}
.hbg-c1 span:before { bottom: 3px }
.hbg-c1 span:after { top: 3px }
.hbg-c1.op span { background: rgba(255,255,255,0)}
.hbg-c1.op span::before { bottom: 0; transform: rotate(45deg); background: var(--wt1)}
.hbg-c1.op span::after { top: 0; transform: rotate(-45deg); background: var(--wt1)}
.gnav-c1 { position: absolute; top:100%; right: -100%; background-color: var(--orange2); height: 100vh; width: 100%; transition: .4s ease-in-out; opacity: 0 }
.gnav-c1.active { right: 0; opacity: 1 }
.gnav-c1 ul li { margin-bottom: 35px; padding-left: 50px; white-space: nowrap; color: var(--wt1); text-align: left }