@import url('../../css2%3Ffamily=EB+Garamond:ital@1&display=swap.css');
@font-face {
  font-family: 'TmonMonsori';
  src: url('../../gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'S-CoreDream';
  src: url('../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
button {
  background-color: transparent;
  border: none;
}
.ft-fv0 { font-family: 'EB Garamond';}
.ft-fv1 { font-family: 'TmonMonsori'; }
.ft-fv2 { font-family: 'S-CoreDream'; }
.fixed-nav {
  z-index: 99;
  position: fixed;
  bottom: 100px;
  right: 40px;
}
.ft-kakao-0 { color: #ffd700; }
.bg-clr-kakao-0 { background-color: #ffd700; }
.bg-clr-kakao-1 { background-color: #2b1c18; }


.ft-v0 { color: #e6c471; }
.ft-v1 { color: #e87b11; }
.ft-v2 { color: #901528; }
.ft-v3 { color: #950000; }
.ft-v4 { color: #bf0000; }
.ft-v5 { color: #5b7988; }
.ft-v6 { color: #915d29; }
.ft-v7 { color: #ffe8bb; }



.bg-clr-v0 { background-color: #f7f5ed; }
.bg-clr-v1 { background-color: #eb7070; }
.bg-clr-v2 { background-color: #61040d; }
.bg-clr-v3 { background-color: #f5efef; }
.bg-clr-v4 { background-color: #7b0813; }
.bg-clr-v5 { background-color: #851424; }
.bg-clr-v6 { background-color: #d1e4fb; }
.bg-clr-v7 { background-color: #f2e7dc; }
.bg-clr-v8 { background-color: #f88f28; }
.bg-clr-v9 { background-color: #c1737b; }
.bg-clr-v10 { background-color: #f24b1e; }
.bg-clr-v11 { background-color: #e85d19; }
.bg-clr-v12 { background-color: #1f2636; }
.bg-clr-v13 { background-color: #f7ebeb; }


.bg-bk-op5 { background-color: rgba(0,0,0, .5);}


.ft90 { font-size: 90px; }
.ft100 { font-size: 120px; }
.mx500 { max-width: 500px; }
.h48p { height: 48px;}
.main-section .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fff; }
.image-lt { background-position: 0% 50%; }

.line-style-01::before,
.line-style-01::after {
  content: '';
  position: relative;
  top: 50%;
  margin-top: -.5px;
  /* width: 100%; */
  flex: 1 0 auto;
  height: 1px;
  background-color: #000;
}
.line-style-02-right::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -100px;
  width: 200px;
  margin-top: -2px;
  border-top: 4px dotted #fff;
}
.line-style-02-bottom::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 200px;
  margin-left: -2px;
  border-left: 4px dotted #fff;
}

.img52 { padding-top: 52.8%; }
.img55 { padding-top: 55%; }
.img70 { padding-top: 70%; }
.img90 { padding-top: 90%; }
.img160 { padding-top: 160%; }
.bd-c0-6 { border: 6px solid #af0014; }
.bd-c1-6 { border: 4px solid #e7c3c3; }
.bd-wh-6 { border: 6px solid #fff; }
.mg-r200 { margin-right: 200px;}
.arrow-type-0 {
  width: 0; height: 0;
  border-left: 12px solid #e7c3c3;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.num-style-01 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -28px;
  right: -28px;
  width: 52px;
  height: 52px;
  background-color: #e87b11;
  border-radius: 1000px;
}
.bd-lt-bk { border-left: 1px solid #000; }
.bd-wh3 { border: 3px solid #fff; }
.w33-g5 { width: calc(33.3333% - 10px); }
.w230p { width: 230px; min-width: 230px; }
.txt-through { text-decoration: line-through;}
.rot-s{ transform: rotate(-15deg); }
.ps-ab-bt { position: absolute; left: 0; bottom: 0; }



@media screen and ( max-width: 800px ) {
  .m-ftl { font-size: 2em; }
  .m-ft35 { font-size: .9em; }
  .fixed-nav { bottom: 100px; right: 20px; }
  .m-mx-0 { max-width: none;}
  .m-w50p { width: 50px; min-width: 50px;}
  .m-w70p { width: 70px; min-width: 70px;}
  .m-mx100 { max-width: 100px; }
  .m-mx200 { max-width: 200px; }
  .m-w100p { width: 100px; min-width: 100px; }
  .num-style-01 {
    top: -20px;
    right: -20px;
    width: 38px;
    height: 38px;
  }
  .m-w25-g5 { width: calc(25% - 10px); }
  .m-w50-g5 { width: calc(50% - 10px); }
  .m-w100 { width: 100%; min-width: auto; }
  .m-image-ct { background-position: 50% 50%; }
  .m-bd-0 { border-left: none; border-top: none; border-right: none; border-bottom: none; }
  .line-style-02-right::after,
  .line-style-02-bottom::before { content: none;}
  .m-bd-tp-gr { border-top: 1px solid #ddd; }
}

@media screen and ( max-width: 480px ) {
  .m48-w33-g5 { width: calc(33.3333% - 10px); }
  .m48-w100 { width: 100%; min-width: auto; }
}