@charset "UTF-8";
:root {
  --font-10xl: clamp(1rem, calc(10vw + 5px), 6.2rem);
  --font-9xl: clamp(1rem, calc(9vw + 5px), 5.0rem);
  --font-8xl: clamp(1rem, calc(8vw + 5px), 4.2rem);
  --font-7xl: clamp(1rem, calc(7vw + 5px), 3.6rem);
  --font-6xl: clamp(1rem, calc(6vw + 5px), 3.0rem);
  --font-5xl: clamp(1rem, calc(5vw + 5px), 2.6rem);
  --font-4xl: clamp(1rem, calc(4vw + 5px), 2.2rem);
  --font-3xl: clamp(1rem, calc(4vw + 5px), 2.0rem);
  --font-2xl: clamp(1rem, calc(3vw + 5px), 1.8rem);
  --font-xl: clamp(1rem, calc(3vw + 5px), 1.6rem);
  --font-lg: clamp(1rem, calc(2vw + 5px), 1.4rem);
  --font-md: clamp(1rem, calc(2vw + 5px), 1.2rem);
  --font-sm: clamp(1rem, calc(1vw + 5px), 1.1rem);
  --font-xs: clamp(1rem, calc(1vw + 5px), 1.0rem);
  --font-xxs: clamp(1rem, calc(1vw + 5px), .8rem);
  --pc-leftbar-wd: 200px;
  --pc-leftbar200-wd: 200px;
  --pc-topbar-ht: 50px;
  --pc-btmbar-ht: 60px;
  --pc-main-padding:
    var(--pc-topbar-ht) 20px 20px var(--pc-leftbar-wd);
  --pc-body-max-wd: 768px;
  --pc-body-max-wd-2: 1200px;
  --pc-screen-padding: 30px;
  --pc-screen-padding-y20: 20px;
  --pc-body-min-width: 1270px;
  --pc_width_550: 550px;
  --m-padding-screen: 50px 30px 80px 30px;
  --m-padding-nohead: 0px 30px;
  --m-padding-50p-6w: 50px 6vw;
  --cl-border-thin: #EDEDED;
  --color-white: #fff;
  --back-darkgray: #222222;
  --back-vaguegray: #f3f3f3;
  --back-lightgray: #ececec;
  --color-black: #333;
  --color-darkgray: #333;
  --color-lightgray: #666;
  --color-gray: #75787b;
  --cl-text-b-245: rgb(245, 245, 245);
  --cl-text-b-235: rgb(235, 235, 235);
  --cl-text-b-230: rgb(230, 230, 230);
  --cl-text-b-200: rgb(200, 200, 200);
  --cl-text-b-180: rgb(180, 180, 180);
  --cl-text-b-150: rgb(150, 150, 150);
  --cl-text-b-120: rgb(120, 120, 120);
  --cl-text-b-70: rgb(70, 70, 70);
  --cl-text-b-40: rgb(40, 40, 40);
  --cl-text-b-20: rgb(20, 20, 20);
  --cl-text-b-10: rgb(10, 10, 10);
  --cl-text-b-0: rgb(0, 0, 0);
  --cl-ita-red-40: #ff5050;
  --cl-orange: #f3561d;
  --cl-ita-orange: #fd642d;
  --cl-main-orange: #FF5722;
  --cl-main-orange-vague-bg: #fff7f0;
  --cl-ita-green: #02a007;
  --cl-ita-yellow: #f9d71c;
  --cl-ita-yellow-vague: #fff9c0;
  --cl-baro-yellow: #ffef63;
  --cl-baro-yellow-light: #fff7b3;
  --cl-baro-dark: #252525;
  --cl-ita-green-mid: #008b04;
  --cl-ita-green-dark: #005822;
  --cl-ita-brightgreen: #00ff99;
  --color-gray-light: #bbb;
  --color-gray-disabled: #e8e8e8;
  --color-green: #53a318;
  --color-green-dark: #383;
  --font-size-small: .75rem;
  --font-size-default: .875rem;
  --subp_bcolor: black;
  --color_1365btn: #9c9c9c;
  --headerTopHeight: 60px;
  --NavBottomHeight: 55px;
  --CSV-Color: #005822;
  --CSV-BColor: #fff7ed;
  /* ------------------------------ 
   * 바로제로 컬러셋 
   --------------------------------*/
  --cl-baro: #EFFDFF;
  --cl-baro-green: #3ed27b;
  --cl-btn-r-40: #ff5050;
  --cl-btn-b-70: rgb(70, 70, 70);
  --cl-btn-bg-vague-itared: rgb(254, 237, 236);
  --cl-nie-p: #1e1e1e;
  --cl-nie-s: #2368ff;
  --nie-cl-leaf: #004f2d;
  --nie-cl-leaf-40: #004f2d59;
  --nie-cl-leaf-10: #004f2d17;
  --nie-cl-orange: #ED6D3D;
  --nie-cl-orange-10: #ed6c3d1f;
  --nie-cl-orange-40: #ed6c3d54;
  --nie-cl-orange-80: #ed6c3dc5;
  --nie-cl-purple: #C6ADD2;
  --nie-cl-green: #6FBA2C;
  --nie-cl-white-10: rgba(255, 255, 255, 0.1);
  --nie-cl-white-40: rgba(255, 255, 255, 0.4);
  --nie-cl-gray: #505050;
  --nie-cl-gray-10: #f2f2f2e7;
  --nie-cl-pink: #ff979d;
  --nie-cl-pink-80: #F9D2D4;
  --nie-cl-ivory-120: #fbb836;
  --nie-cl-ivory: #FCD68C;
  --nie-cl-blue-10: #00a7e421;
  --nie-cl-blue-40: #00a7e45b;
  --nie-cl-blue: #00A9E4;
  --nie-cl-sky: #C6D9FF;
  --cl-text-b-200: #b8b8b8;
  --nie-cl-snow: #ffffffe7;
  --nie-home-bg-statbox-: #74d578;
  --nie-page-bg-vaguegray: #f7f8f8;
  --nie-home-bg: #FCD68C;
  --nie-sub-padding1: 55px 6vw;
  --nie-main-padding: 50px 6vw 80px 6vw;
  --nie-main-padding-fullscroll: 50px 6vw 0px 6vw;
  --nie-main-padding-sm: 55px 3vw;
  --nie-home-stat-bg: #ed6d3db0;
  --nie-letter-spacing-5: -0.5px;
  --nie-letter-spacing-3: -0.3px;
  --nie-top-height: 50px;
  --nie-btm-menu-bg: #fff8e0;
  --nie-btm-menu-text: #f3561d;
  --nie-btm-menu-text-bg: #f5865e3d;
  --nie-shadow-toppanel: #00000024;
  --nie-bg-toppanel: rgba(255, 255, 255, 0.9);
  --nie-stamp-post-bg: #004f2d1a;
  --nie-btn-bg-vaguegray: #f7f8f8;
  --nie-dark-cl-leaf-70: rgba(0, 79, 45, 0.7);
  --nie-dark-cl-leaf-50: rgba(0, 79, 45, 0.5);
  --nie-dark-cl-leaf-30: rgba(0, 79, 45, 0.3);
  --admin-maincolor: #1A6DFF;
  --admin-mainbg: rgba(133, 189, 255, 0.15);
}

.font-xxs {
  font-size: var(--font-xxs);
  margin: 0.5em 0;
}

.font-xs {
  font-size: var(--font-xs) !important;
  margin: 0.5em 0;
}

.font-sm {
  font-size: var(--font-sm) !important;
  margin: 0.5em 0;
}

.font-md {
  font-size: var(--font-md) !important;
  margin: 0.5em 0;
}

.font-lg {
  font-size: var(--font-lg);
  margin: 0.5em 0;
}

.font-xl {
  font-size: var(--font-xl);
  margin: 0.5em 0;
}

.font-2xl {
  font-size: var(--font-2xl);
  margin: 0.5em 0;
}

.font-3xl {
  font-size: var(--font-3xl);
  margin: 0.5em 0;
}

.font-4xl {
  font-size: var(--font-4xl);
  margin: 0.5em 0;
}

.font-5xl {
  font-size: var(--font-5xl);
  margin: 0.5em 0;
}

.font-6xl {
  font-size: var(--font-6xl);
  margin: 0.5em 0;
}

.font-7xl {
  font-size: var(--font-7xl);
  margin: 0.5em 0;
}

.font-8xl {
  font-size: var(--font-8xl);
  margin: 0.5em 0;
}

.font-9xl {
  font-size: var(--font-9xl);
  margin: 0.5em 0;
}

.font-10xl {
  font-size: var(--font-10xl);
  margin: 0.5em 0;
}

.bg-cl-baro {
  background-color: var(--cl-baro);
}

.cl-baro {
  color: var(--cl-baro);
}

.cl-baro-green {
  color: var(--cl-baro-green);
}

.bg-baro-green {
  background: var(--cl-baro-green);
}

.letter-spacing-3 {
  letter-spacing: var(--nie-letter-spacing-3);
}

/* ------------------------------ 
 * SHADOW 
 --------------------------------*/
.box-shadow {
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}

.box-shadow-black {
  box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
}

.box-shadow-lg {
  box-shadow: 0px 0rem 2rem 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0rem 2rem 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 0rem 2rem 0px rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 992px) {
  .pc-none {
    display: none;
  }
}

/* ------------------------------ 
 *  pc size
 --------------------------------*/
@media screen and (min-width: 992px) {
  .pc-max-768 {
    max-width: var(--pc-body-max-wd);
    margin: 0 auto;
  }
}

@media screen and (min-width: 992px) {
  .pc-max-600 {
    max-width: 600px !important;
    margin: 0 auto;
  }
}

@media screen and (min-width: 992px) {
  .pc-max-1200 {
    max-width: 1200px !important;
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .mobile-none {
    display: none;
  }
}

.cl-brightgreen {
  color: var(--cl-ita-brightgreen);
}

.cl-nie-p {
  color: var(--cl-nie-p);
}

.cl-nie-s {
  color: var(--cl-nie-s);
}

.fs-10xl {
  font-size: var(--font-10xl);
}

.fs-9xl {
  font-size: var(--font-9xl);
}

.fs-8xl {
  font-size: var(--font-8xl);
}

.fs-7xl {
  font-size: var(--font-7xl);
}

.fs-6xl {
  font-size: var(--font-6xl);
}

.fs-5xl {
  font-size: var(--font-5xl);
}

.fs-4xl {
  font-size: var(--font-4xl);
}

.fs-3xl {
  font-size: var(--font-3xl);
}

.fs-2xl {
  font-size: var(--font-2xl);
}

.fs-xl {
  font-size: var(--font-xl);
}

.fs-lg {
  font-size: var(--font-lg);
}

.fs-md {
  font-size: var(--font-md);
}

.fs-sm {
  font-size: var(--font-sm);
}

.fs-xs {
  font-size: var(--font-xs);
}

@font-face {
  font-family: "Futura-Light";
  src: url("font/futura/Futura-Light.eot?#iefix") format("embedded-opentype"), url("font/futura/Futura-Light.woff") format("woff"), url("font/futura/Futura-Light.ttf") format("truetype"), url("font/futura/Futura-Light.svg#webfont") format("svg");
}
@font-face {
  font-family: "Futura-Bold";
  src: url("font/futura/Futura-Bold.eot?#iefix") format("embedded-opentype"), url("font/futura/Futura-Bold.woff") format("woff"), url("font/futura/Futura-Bold.ttf") format("truetype"), url("font/futura/Futura-Bold.svg#webfont") format("svg");
}
@font-face {
  font-family: "NotoSansKR-B";
  src: url("font/NotoSansKR-Bold.woff2") format("woff2"), url("font/NotoSansKR-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "NotoSansKR-M";
  src: url("font/NotoSansKR-Medium.woff2") format("woff2"), url("font/NotoSansKR-Medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Seoul-Biennale-Titling";
  src: url("font/seoul-biennale-titling-2350.woff2") format("woff2"), url("font/seoul-biennale-titling-2350.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
}
/* myadd*/
@font-face {
  font-family: "Seoul-Biennale-Titling2";
  src: url("font/seoul-biennale-titling-2350.woff2") format("woff2"), url("font/seoul-biennale-titling-2350.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-stretch: normal;
}
/* myadd*/
/* https://onlinefontconverter.com/   woff 변횐 */
@font-face {
  font-family: "NanumSquareR";
  src: url("font/NanumSquareR/NanumSquareR.eot");
  src: url("font/NanumSquareR/NanumSquareR.eot?#iefix") format("embedded-opentype"), url("font/NanumSquareR/NanumSquareR.svg#NanumSquareR") format("svg"), url("font/NanumSquareR/NanumSquareR.ttf") format("truetype"), url("font/NanumSquareR/NanumSquareR.woff") format("woff"), url("font/NanumSquareR/NanumSquareR.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "DSI-R";
  src: url("font/DS+R-Regular.woff2") format("woff2"), url("font/DS+R-Regular.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "DSI-B";
  src: url("font/DS+R-Bold.woff2") format("woff2"), url("font/DS+R-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
/* COLOR VARIABLES
============================================= */
/* GRADIENT LISTS
============================================= */
.hoverUp:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
}

.hover-bg-vaguegray:hover {
  background: var(--back-vaguegray);
}

.hover-scaleUp:hover {
  transform: scale(1.05);
}

@keyframes progresser {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes pop-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    z-index: -1;
  }
}
@keyframes move_x20 {
  0%, 100% {
    transform: translate3d(10px, 0, 0);
  }
  50% {
    transform: translate3d(-10px, 0, 0);
  }
}
@keyframes move_x5 {
  0%, 100% {
    transform: translate3d(5px, 0, 0);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes move_y15 {
  0%, 100% {
    transform: translate3d(0, 15px, 0);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes pop-out1 {
  0% {
    opacity: 0;
    z-index: -1;
  }
  1% {
    opacity: 0;
    z-index: 5;
  }
  50% {
    opacity: 1;
    z-index: 5;
  }
  90% {
    opacity: 0;
    z-index: 5;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
.close-css-white {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  margin-left: auto;
  background-color: var(--cl-text-b-40);
  border-radius: 50%;
}
.close-css-white:before, .close-css-white:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 15px;
  width: 2px;
  background-color: white;
}
.close-css-white:before {
  transform: rotate(45deg);
}
.close-css-white:after {
  transform: rotate(-45deg);
}

.close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.close-css:before, .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.close-css:before {
  transform: rotate(45deg);
}
.close-css:after {
  transform: rotate(-45deg);
}

/* ------------------------------ 
 * * drag-step-panel -- 드래그 스탭 패널 
 * itacity map 에서 사용
 --------------------------------*/
.horizontal-scroll {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.horizontal-scroll::-webkit-scrollbar {
  display: none;
}
.horizontal-scroll.active {
  cursor: grabbing;
}

.clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.clamp-4 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.clamp-5 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ------------------------------ 
 * MIXIN -- BUTTON 
 --------------------------------*/
/* ------------------------------ 
 * 기본 버튼 
 --------------------------------*/
.ita-btn--basic {
  background-color: black;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3rem;
  padding: 1rem 2.2rem 1rem 1.8rem;
  gap: 0.2rem;
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: 2rem;
  color: #ffffff;
  white-space: nowrap;
  /* ------------------------------ 
   * itared 
   --------------------------------*/
}
.ita-btn--basic.manual {
  background: transparent;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
  border-radius: 10px;
}
.ita-btn--basic.fill {
  background: var(--cl-btn-bg-vague-itared);
  border-radius: 3rem;
}
.ita-btn--basic.line {
  background: transparent;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
  border-radius: 3rem;
}
.ita-btn--basic.black {
  background-color: transparent;
  margin-top: auto;
  height: -moz-fit-content;
  height: fit-content;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--font-xl);
  font-weight: 700;
  color: black;
  padding: 1rem;
  white-space: nowrap;
}
.ita-btn--basic.black:hover {
  color: black;
  background: var(--cl-text-b-245);
}
.ita-btn--basic:hover {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
  transform: scale(1.03);
}
.ita-btn--basic.itared {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
}
.ita-btn--basic.itared:hover {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
  transform: scale(1.03);
}

/* ------------------------------ 
 * 기능별 버튼 
 --------------------------------*/
.ita-btn--select-InPanel {
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  color: var(--cl-ita-red-40);
  font-size: var(--font-xl);
  font-weight: 500;
  width: 100%;
  padding: 10px 0px;
  cursor: pointer;
  width: 100%;
  background: none;
  border-radius: 7px;
}
.ita-btn--select-InPanel.fill {
  background: var(--cl-btn-bg-vague-itared);
  border-radius: 10px;
}
.ita-btn--select-InPanel.line {
  background: none;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
  border-radius: 10px;
}
.ita-btn--select-InPanel.black {
  background: none;
  color: black;
  border: 1px solid black;
  border-radius: 10px;
}
.ita-btn--select-InPanel.black.fill {
  background: black;
  color: white;
}
.ita-btn--select-InPanel.black.line {
  background: none;
  color: black;
  border: 1px solid black;
}
.ita-btn--select-InPanel.black:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
}
.ita-btn--select-InPanel:hover {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}

.ita-btn--sospost-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--cl-text-b-40);
  font-size: var(--font-xl);
  font-weight: 600;
  width: 100%;
  padding: 12px 0px;
  cursor: pointer;
  width: 100%;
  background: none;
  border-radius: 7px;
}
.ita-btn--sospost-submit.fill {
  background: var(--cl-text-b-245);
  color: var(--cl-text-b-40);
}
.ita-btn--sospost-submit.fill:hover, .ita-btn--sospost-submit.fill:active {
  background: var(--cl-text-b-245);
  color: var(--cl-text-b-40);
}
.ita-btn--sospost-submit.itared-fill {
  background-color: var(--cl-ita-red-40);
  color: white;
}
.ita-btn--sospost-submit.itared-fill:hover, .ita-btn--sospost-submit.itared-fill:active {
  background-color: var(--cl-ita-red-40);
  color: white;
}
.ita-btn--sospost-submit.fill-itared {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
}
.ita-btn--sospost-submit.fill-itared:hover, .ita-btn--sospost-submit.fill-itared:active {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
}
.ita-btn--sospost-submit.itared {
  color: var(--cl-btn-r-40);
}
.ita-btn--sospost-submit.itared:hover, .ita-btn--sospost-submit.itared:active {
  color: var(--cl-btn-r-40);
}
.ita-btn--sospost-submit:hover {
  background: none;
  color: var(--cl-text-b-40);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}

.ita-btn--infopost-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--cl-text-b-40);
  font-size: var(--font-xl);
  font-weight: 600;
  width: 100%;
  padding: 12px 0px;
  cursor: pointer;
  width: 100%;
  background: none;
  border-radius: 7px;
  font-size: var(--font-xl);
}
.ita-btn--infopost-submit.fill {
  background: var(--cl-text-b-245);
  color: var(--cl-text-b-40);
}
.ita-btn--infopost-submit.fill:hover, .ita-btn--infopost-submit.fill:active {
  background: var(--cl-text-b-245);
  color: var(--cl-text-b-40);
}
.ita-btn--infopost-submit.itared-fill {
  background-color: var(--cl-ita-red-40);
  color: white;
}
.ita-btn--infopost-submit.itared-fill:hover, .ita-btn--infopost-submit.itared-fill:active {
  background-color: var(--cl-ita-red-40);
  color: white;
}
.ita-btn--infopost-submit.fill-itared {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
}
.ita-btn--infopost-submit.fill-itared:hover, .ita-btn--infopost-submit.fill-itared:active {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
}
.ita-btn--infopost-submit.itared {
  color: var(--cl-btn-r-40);
}
.ita-btn--infopost-submit.itared:hover, .ita-btn--infopost-submit.itared:active {
  color: var(--cl-btn-r-40);
}
.ita-btn--infopost-submit:hover {
  background: none;
  color: var(--cl-text-b-40);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}

.ita-btn--close-50 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--cl-ita-red-40);
  font-size: var(--font-xl);
  font-weight: 600;
  width: 100%;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  padding: 3px;
}
.ita-btn--close-50.fill {
  background: var(--cl-btn-bg-vague-itared);
  border-radius: 10px;
}
.ita-btn--close-50.line {
  background: none;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
  border-radius: 10px;
}
.ita-btn--close-50:hover {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}

.ita-btn--4 {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
}
.ita-btn--4.fill {
  background-color: white;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.373);
}
.ita-btn--4.line {
  background-color: transparent;
  border: 1px solid var(--cl-btn-b-70);
}
.ita-btn--4:hover {
  background-color: white;
}

.ita-btn--text {
  border-radius: 6px;
  padding: 3px 12px;
  display: flex;
  align-items: center;
  font-size: var(--font-xl);
  font-weight: 500;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  justify-content: center;
  cursor: pointer;
  background: none;
}
.ita-btn--text.itared {
  color: var(--cl-ita-red-40);
}
.ita-btn--text.fill {
  background-color: white;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.373);
}
.ita-btn--text.line {
  background-color: transparent;
  border: 1px solid var(--cl-btn-b-70);
}
.ita-btn--text:hover {
  background: var(--cl-btn-bg-vague-itared);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}

.ita-tabstyle-box {
  display: flex;
  align-items: center;
  width: 100%;
}
.ita-tabstyle-box .itatab-item {
  font-size: var(--font-lg);
  color: var(--cl-text-b-150);
  font-weight: 400;
  margin: 0;
  padding: 4px 10px;
  cursor: pointer;
  background: #f3f3f3;
}
.ita-tabstyle-box .itatab-item:hover {
  color: var(--cl-text-b-0);
}
.ita-tabstyle-box .itatab-item.active {
  background: var(--color-black);
  color: white;
  font-weight: 600;
}
.ita-tabstyle-box .itatab-item.active .active-highlight-green {
  color: #44ff4b;
}

.ita-tabstyle-line {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--cl-text-b-180);
}
.ita-tabstyle-line .itatab-item {
  font-size: var(--font-2xl);
  font-weight: 500;
  margin: 0;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--cl-text-b-120);
}
.ita-tabstyle-line .itatab-item:hover {
  color: var(--cl-text-b-0);
}
.ita-tabstyle-line .itatab-item.active {
  color: var(--cl-text-b-0);
  border-bottom: 2px solid var(--cl-text-b-0);
  font-weight: 600;
}

.ita-tab-content {
  display: none;
}
.ita-tab-content.active {
  display: block;
}
.ita-tab-content.visability-mode {
  display: block;
  position: absolute;
  visibility: hidden;
  overflow: hidden;
  width: 100%;
  height: 0;
}
.ita-tab-content.visability-mode.active {
  visibility: visible;
  height: auto;
  position: relative;
}

/* ------------------------------ 
 * circle 
 --------------------------------*/
.ita-horizontal-circle {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  padding: 5px 0;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.ita-horizontal-circle::-webkit-scrollbar {
  display: none;
}
.ita-horizontal-circle.active {
  cursor: grabbing;
}
.ita-horizontal-circle .tab-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ita-horizontal-circle .tab-item .icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid var(--cl-text-b-200);
}
.ita-horizontal-circle .tab-item .name {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 5px 0;
  color: var(--cl-text-b-120);
}
.ita-horizontal-circle .tab-item .loc {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 5px 0;
  color: var(--cl-text-b-120);
}
.ita-horizontal-circle .tab-item:hover {
  color: var(--cl-text-b-70);
  transform: translateY(-2px);
  transition: all 0.2s;
}
.ita-horizontal-circle .tab-item.active {
  color: var(--cl-text-b-0);
  border-bottom: 2px solid var(--cl-text-b-0);
  font-weight: 600;
}

/* ------------------------------ 
 * ita-input 버튼 
 --------------------------------*/
.input-basic {
  border-radius: 6px;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  border: none;
  color: var(--cl-text-b-40);
  background: var(--cl-text-b-245);
  padding: 12px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: var(--font-xl);
  position: relative;
  width: 100%;
}
.input-basic::-moz-placeholder {
  color: var(--cl-text-b-180);
}
.input-basic::placeholder {
  color: var(--cl-text-b-180);
}
.input-basic:focus {
  outline: none;
}
.input-basic:-internal-autofill-selected {
  background-color: var(--cl-text-b-245) !important;
  box-shadow: 0 0 0 100px var(--cl-text-b-245) inset !important;
  color: var(--cl-text-b-40) !important;
}
.input-basic:-webkit-autofill, .input-basic:-webkit-autofill:hover, .input-basic:-webkit-autofill:focus, .input-basic:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-text-b-40) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.input-basic.gray {
  background: var(--cl-text-b-245);
  color: var(--cl-text-b-40);
}

.textarea-basic {
  resize: none;
  border-radius: 12px;
  width: 100%;
  height: auto;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 30px 25px;
  overflow-y: auto;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  overflow: hidden;
  overflow-wrap: break-word;
  font-size: var(--font-2xl);
  position: relative;
  line-height: 1.5;
}
.textarea-basic::-moz-placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
.textarea-basic::placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
.textarea-basic:focus {
  outline: none;
}
.textarea-basic:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: rgba(2, 25, 41, 0.9019607843) !important;
}
.textarea-basic:-webkit-autofill, .textarea-basic:-webkit-autofill:hover, .textarea-basic:-webkit-autofill:focus, .textarea-basic:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgba(2, 25, 41, 0.9019607843) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ------------------------------ 
 * 임시저장 리스트 팝업 
 --------------------------------*/
.itapop-basicPanel {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  /* ------------------------------ 
   * 빈공간 클릭시 팝업 닫기 
   --------------------------------*/
  /* ------------------------------ 
   * 콘텐츠 영역
   --------------------------------*/
}
.itapop-basicPanel .popup-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.2705882353);
  z-index: 1;
}
.itapop-basicPanel .contents-pop {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 90%;
  gap: 10px;
  background-color: white;
  padding: 25px 20px 20px 20px;
  border-radius: 20px;
  box-shadow: 1px 1px 12px 1px rgba(0, 0, 0, 0.2);
  margin: auto;
  /* ------------------------------ 
   * title
   --------------------------------*/
  /* ------------------------------ 
   * content
   --------------------------------*/
  /* ------------------------------ 
   * 버튼 
   --------------------------------*/
  /* ------------------------------ 
   * pc 화면 
   --------------------------------*/
}
.itapop-basicPanel .contents-pop.no-padding {
  padding: 0 !important;
}
.itapop-basicPanel .contents-pop.gap-0 {
  gap: 0;
}
.itapop-basicPanel .contents-pop .title {
  text-align: left;
  font-size: var(--font-3xl);
  letter-spacing: -0.5px;
  line-height: 1.5;
  color: black;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.itapop-basicPanel .contents-pop .content {
  text-align: left;
  font-size: var(--font-xl);
  letter-spacing: -0.5px;
  line-height: 1.5;
  color: black;
  font-weight: 500;
  padding-bottom: 25px;
  overflow-y: auto;
  max-height: 50vh;
  height: -moz-max-content;
  height: max-content;
  width: 100%;
}
.itapop-basicPanel .contents-pop .button-box {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.itapop-basicPanel .contents-pop .button-box .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--cl-ita-red-40);
  font-size: var(--font-xl);
  font-weight: 600;
  width: 100%;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  padding: 3px;
}
.itapop-basicPanel .contents-pop .button-box .btn.fill {
  background: var(--cl-btn-bg-vague-itared);
  border-radius: 10px;
}
.itapop-basicPanel .contents-pop .button-box .btn.line {
  background: none;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
  border-radius: 10px;
}
.itapop-basicPanel .contents-pop .button-box .btn:hover {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}
@media screen and (min-width: 992px) {
  .itapop-basicPanel .contents-pop {
    width: 50%;
    max-width: 400px;
    bottom: 50%;
    transform: translateY(50%);
  }
}
.itapop-basicPanel.open {
  display: block;
}
.itapop-basicPanel .contents-pop {
  /* ------------------------------ 
   * 여러 pop 스타일 버튼 레이아웃
   --------------------------------*/
}
.itapop-basicPanel .contents-pop .content {
  max-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 10px;
  /* ------------------------------ 
   * 임시보관 문서모기
   --------------------------------*/
}
.itapop-basicPanel .contents-pop .content .sosp-temp-list-empty-text {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-70);
  margin-left: 10px;
  padding-bottom: 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.itapop-basicPanel .contents-pop .content .sosp-temp-list {
  padding: 15px 0;
  display: grid;
  gap: 8px;
  grid-template-columns: 25px 5fr 2fr;
  border-bottom: 1px solid rgba(169, 169, 169, 0.2196078431);
  justify-content: center;
  align-items: flex-start;
}
.itapop-basicPanel .contents-pop .content .sosp-temp-list .title {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-70);
  margin-left: 10px;
  padding-bottom: 0px;
  position: relative;
  display: flex;
  align-items: center;
}
.itapop-basicPanel .contents-pop .content .sosp-temp-list .title .docNo {
  position: absolute;
  left: -1px;
  top: 7px;
  margin-left: 7px;
  font-size: var(--font-md);
  color: black;
  font-weight: 700;
}
.itapop-basicPanel .contents-pop .content .sosp-temp-list .title .docDel {
  position: absolute;
  left: 6px;
  top: 13px;
  opacity: 0.5;
  margin-left: 7px;
  font-size: var(--font-md);
  color: black;
  font-weight: 700;
}
.itapop-basicPanel .contents-pop .content .sosp-temp-list .date {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 150px;
}
.itapop-basicPanel .contents-pop .button-box {
  display: flex;
  align-items: center;
  width: 100%;
}
.itapop-basicPanel .contents-pop .button-tempsave-box {
  display: grid;
  grid-template-columns: 3fr 2fr;
  width: 100%;
  gap: 10px;
}
.itapop-basicPanel .contents-pop .button-finish-box {
  display: grid;
  grid-template-columns: 3fr 2fr;
  width: 100%;
  gap: 10px;
}

.cssIcon {
  height: 25px;
  width: 25px;
  background-size: cover;
  cursor: pointer;
  flex: none;
  display: inline-block;
  border-radius: 0px !important;
  /* ------------------------------ 
  * 텍스트 
  --------------------------------*/
  /* ------------------------------ * 아이콘
   --------------------------------*/
}
.cssIcon.block {
  display: block;
}
.cssIcon.small {
  height: 15px;
  width: 15px;
}
.cssIcon.text {
  cursor: pointer;
  /* ------------------------------ 
   * 텍스트 스타일 
   --------------------------------*/
}
.cssIcon.text:after {
  content: attr(data-icontxt);
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
  /* padding-top: 2px; */
  position: absolute;
  letter-spacing: -1px;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
  text-align: center;
}
.cssIcon.text.sosp-finish:after {
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
}
.cssIcon.text.sosp-tempList:after {
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
}
.cssIcon.plusIcon {
  background: url(../public/img/nav_icon/plusIcon.svg?v=8) no-repeat center center;
}
.cssIcon.trashBasket {
  background: url(../public/img/nav_icon/trashBasket.svg?v=8) no-repeat center center;
}
.cssIcon.filterIcon {
  background: url(../public/img/nav_icon/filterIcon.svg?v=8) no-repeat center center;
}
.cssIcon.rotateRectIcon {
  background: url(../public/img/nav_icon/rotateRectIcon.svg?v=8) no-repeat center center;
}
.cssIcon.rotateRectIcon.white {
  background: url(../public/img/nav_icon/rotateRectIcon_white.svg?v=8) no-repeat center center;
}
.cssIcon.closeIcon {
  background: url(../public/img/nav_icon/closeIcon.svg?v=8) no-repeat center center;
}
.cssIcon.closeIcon.itared {
  background: url(../public/img/nav_icon/closeIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.closeIcon.white {
  background: url(../public/img/nav_icon/closeIcon_white.svg?v=10) no-repeat center center;
}
.cssIcon.logoutIcon {
  background: url(../public/img/nav_icon/logoutIcon.svg?v=8) no-repeat center center;
}
.cssIcon.utilityIcon {
  background: url(../public/img/nav_icon/utilityIcon.svg?v=8) no-repeat center center;
}
.cssIcon.flagIcon {
  background: url(../public/img/nav_icon/flagIcon.svg?v=8) no-repeat center center;
}
.cssIcon.flagIcon.fill.itared {
  background: url(../public/img/nav_icon/flagIcon_fill_itared.svg?v=8) no-repeat center center;
}
.cssIcon.checkCircle {
  background: url(../public/img/nav_icon/checkCircle.svg?v=8) no-repeat center center;
}
.cssIcon.checkCircle.itared {
  background: url(../public/img/nav_icon/checkCircle_itared.svg?v=8) no-repeat center center;
}
.cssIcon.checkCircle.fill {
  background: url(../public/img/nav_icon/checkCircle_fill.svg?v=8) no-repeat center center;
}
.cssIcon.checkBadge {
  background: url(../public/img/nav_icon/checkBadge.svg?v=8) no-repeat center center;
}
.cssIcon.checkBadge.itared {
  background: url(../public/img/nav_icon/checkBadge_itared.svg?v=8) no-repeat center center;
}
.cssIcon.checkBadge.fill {
  background: url(../public/img/nav_icon/checkBadge_fill.svg?v=8) no-repeat center center;
}
.cssIcon.arrowUpR {
  background: url(../public/img/nav_icon/arrowUpR.svg?v=8) no-repeat center center;
}
.cssIcon.arrowUpR.itared {
  background: url(../public/img/nav_icon/arrowUpR_itared.svg?v=8) no-repeat center center;
}
.cssIcon.arrowUpR.white {
  background: url(../public/img/nav_icon/arrowUpR_white.svg?v=8) no-repeat center center;
}
.cssIcon.clockIcon {
  background: url(../public/img/nav_icon/clock.svg?v=8) no-repeat center center;
}
.cssIcon.clockIcon.white {
  background: url(../public/img/nav_icon/clock_white.svg?v=8) no-repeat center center;
}
.cssIcon.chevronDown {
  background: url(../public/img/nav_icon/chevronDown.svg?v=8) no-repeat center center;
}
.cssIcon.chevronDown.itared {
  background: url(../public/img/nav_icon/chevronDown_itared.svg?v=8) no-repeat center center;
}
.cssIcon.chevronDown.white {
  background: url(../public/img/nav_icon/chevronDown_white.svg?v=8) no-repeat center center;
}
.cssIcon.chevronDown.small {
  background: url(../public/img/nav_icon/chevronDown_small.svg?v=8) no-repeat center center;
}
.cssIcon.chevronDown.small.itared {
  background: url(../public/img/nav_icon/chevronDown_small_itared.svg?v=8) no-repeat center center;
}
.cssIcon.chevronDown.small.white {
  background: url(../public/img/nav_icon/chevronDown_small_white.svg?v=8) no-repeat center center;
}
.cssIcon.handThumbsUp {
  background: url(../public/img/nav_icon/handThumbsUp.svg?v=8) no-repeat center center;
}
.cssIcon.handThumbsUp.itared {
  background: url(../public/img/nav_icon/handThumbsUp_itared.svg?v=8) no-repeat center center;
}
.cssIcon.searchIcon {
  background: url(../public/img/nav_icon/searchIcon.svg?v=8) no-repeat center center;
}
.cssIcon.searchIcon.white {
  background: url(../public/img/nav_icon/searchIcon_white.svg?v=8) no-repeat center center;
}
.cssIcon.searchIcon.itared {
  background: url(../public/img/nav_icon/searchIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.searchIcon.small {
  background: url(../public/img/nav_icon/searchIcon_small.svg?v=8) no-repeat center center;
}
.cssIcon.searchIcon.small.white {
  background: url(../public/img/nav_icon/searchIcon_small_white.svg?v=8) no-repeat center center;
}
.cssIcon.searchIcon.small.itared {
  background: url(../public/img/nav_icon/searchIcon_small_itared.svg?v=8) no-repeat center center;
}
.cssIcon.arrowR {
  background: url(../public/img/nav_icon/arrowR.svg?v=8) no-repeat center center;
}
.cssIcon.arrowR.white {
  background: url(../public/img/nav_icon/arrowR_white.svg?v=8) no-repeat center center;
}
.cssIcon.arrowR.itared {
  background: url(../public/img/nav_icon/arrowR_itared.svg?v=8) no-repeat center center;
}
.cssIcon.hashtagIcon {
  background: url(../public/img/nav_icon/hashtag.svg?v=8) no-repeat center center;
}
.cssIcon.hashtagIcon.white {
  background: url(../public/img/nav_icon/hashtag_white.svg?v=8) no-repeat center center;
}
.cssIcon.hashtagIcon.itared {
  background: url(../public/img/nav_icon/hashtag_itared.svg?v=8) no-repeat center center;
}
.cssIcon.pencilEdit {
  background: url(../public/img/nav_icon/pencilEditSquare.svg?v=8) no-repeat center center;
}
.cssIcon.pencilEdit.white {
  background: url(../public/img/nav_icon/pencilEditSquare_white.svg?v=8) no-repeat center center;
}
.cssIcon.atIcon {
  background: url(../public/img/nav_icon/atIcon.svg?v=8) no-repeat center center;
}
.cssIcon.atIcon.white {
  background: url(../public/img/nav_icon/atIcon_white.svg?v=8) no-repeat center center;
}
.cssIcon.atIcon.itared {
  background: url(../public/img/nav_icon/atIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.chevronLeft {
  background: url(../public/img/nav_icon/chevronL.svg?v=8) no-repeat center center;
}
.cssIcon.chevronLeft.white {
  background: url(../public/img/nav_icon/chevronL_white.svg?v=8) no-repeat center center;
}
.cssIcon.calendarIcon {
  background: url(../public/img/nav_icon/calendarIcon.svg?v=8) no-repeat center center;
}
.cssIcon.calendarIcon.fill {
  background: url(../public/img/nav_icon/calendarIcon_fill.svg?v=8) no-repeat center center;
}
.cssIcon.calendarIcon.itared {
  background: url(../public/img/nav_icon/calendarIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.deleteIcon {
  background: url(../public/img/nav_icon/deleteIcon.svg?v=8) no-repeat center center;
}
.cssIcon.deleteIcon.fill {
  background: url(../public/img/nav_icon/deleteIcon_fill.svg?v=8) no-repeat center center;
}
.cssIcon.photoIcon {
  background: url(../public/img/nav_icon/photoIcon.svg?v=8) no-repeat center center;
}
.cssIcon.photoIcon.fill {
  background: url(../public/img/nav_icon/photoIcon_fill.svg?v=8) no-repeat center center;
}
.cssIcon.cameraIcon {
  background: url(../public/img/nav_icon/cameraIcon.svg?v=8) no-repeat center center;
}
.cssIcon.cameraIcon.fill {
  background: url(../public/img/nav_icon/cameraIcon_fill.svg?v=8) no-repeat center center;
}
.cssIcon.mapPaperIcon {
  background: url(../public/img/nav_icon/mapPaperIcon.svg?v=8) no-repeat center center;
}
.cssIcon.mapPaperIcon.fill {
  background: url(../public/img/nav_icon/mapPaperIcon_fill.svg?v=8) no-repeat center center;
}
.cssIcon.mapPaperIcon.itared {
  background: url(../public/img/nav_icon/mapPaperIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.bookmarkIcon {
  background: url(../public/img/nav_icon/bookmark.svg?v=8) no-repeat center center;
}
.cssIcon.bookmarkIcon.fill {
  background: url(../public/img/nav_icon/bookmark_fill.svg?v=8) no-repeat center center;
}
.cssIcon.questionMarkCircle {
  background: url(../public/img/nav_icon/questionMarkCircle.svg?v=8) no-repeat center center;
}
.cssIcon.questionMarkCircle.fill {
  background: url(../public/img/nav_icon/questionMarkCircle_fill.svg?v=8) no-repeat center center;
}
.cssIcon.arrowUturnL {
  background: url(../public/img/nav_icon/arrowUturnL.svg?v=8) no-repeat center center;
}
.cssIcon.arrowLongR {
  background: url(../public/img/nav_icon/arrowLongR.svg?v=8) no-repeat center center;
}
.cssIcon.arrowLongR.white {
  background: url(../public/img/nav_icon/arrowLongR_white.svg?v=9) no-repeat center center;
}
.cssIcon.ellipsisH {
  background: url(../public/img/nav_icon/ellipsisH.svg?v=8) no-repeat center center;
}
.cssIcon.docIcon {
  background: url(../public/img/nav_icon/docIcon.svg?v=8) no-repeat center center;
}
.cssIcon.docIcon.fill, .cssIcon.docIcon.active {
  background: url(../public/img/nav_icon/docIcon_fill.svg?v=8) no-repeat center center;
}
.cssIcon.docCopy {
  background: url(../public/img/nav_icon/docCopy.svg?v=8) no-repeat center center;
}
.cssIcon.docCopy.itared {
  background: url(../public/img/nav_icon/docCopy_itared.svg?v=8) no-repeat center center;
}
.cssIcon.chatBubbleLeftIcon {
  background: url(../public/img/nav_icon/chatBubbleLeftIcon.svg?v=8) no-repeat center center;
}
.cssIcon.chatBubbleLeftIcon.active {
  background: url(../public/img/nav_icon/chatBubbleLeftIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.chatBLeftEllipse {
  background: url(../public/img/nav_icon/chatBLeftEllipse.svg?v=8) no-repeat center center;
}
.cssIcon.chatBLeftEllipse.white {
  background: url(../public/img/nav_icon/chatBLeftEllipse_white.svg?v=8) no-repeat center center;
}
.cssIcon.chatBLeftEllipse.itared {
  background: url(../public/img/nav_icon/chatBLeftEllipse_itared.svg?v=8) no-repeat center center;
}
.cssIcon.shareIcon {
  background: url(../public/img/nav_icon/shareIcon.svg?v=8) no-repeat center center;
}
.cssIcon.shareIcon.active {
  background: url(../public/img/nav_icon/shareIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.shareIcon.white {
  background: url(../public/img/nav_icon/shareIcon_white.svg?v=8) no-repeat center center;
}
.cssIcon.shareIcon.white.active {
  background: url(../public/img/nav_icon/shareIcon_white_focus.svg?v=8) no-repeat center center;
}
.cssIcon.bars3Icon {
  background: url(../public/img/nav_icon/bars3Icon.svg?v=8) no-repeat center center;
}
.cssIcon.bars3Icon.active {
  background: url(../public/img/nav_icon/bars3Icon.svg?v=8) no-repeat center center;
}
.cssIcon.bars3RIcon {
  background: url(../public/img/nav_icon/bars3RIcon.svg?v=8) no-repeat center center;
}
.cssIcon.bars3RIcon.active {
  background: url(../public/img/nav_icon/bars3RIcon.svg?v=8) no-repeat center center;
}
.cssIcon.signinIcon {
  background: url(../public/img/nav_icon/signinPageIcon.svg?v=8) no-repeat center center;
}
.cssIcon.signinIcon.active {
  background: url(../public/img/nav_icon/signinPageIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.signinIcon.fill.itagreen {
  background: url(../public/img/nav_icon/signinPageIcon_fill_itagreen.svg?v=8) no-repeat center center;
}
.cssIcon.adjustHIcon {
  background: url(../public/img/nav_icon/adjustH.svg?v=8) no-repeat center center;
}
.cssIcon.userIcon {
  background: url(../public/img/nav_icon/userIcon.svg?v=8) no-repeat center center;
}
.cssIcon.userIcon.white {
  background: url(../public/img/nav_icon/userIcon_white.svg?v=8) no-repeat center center;
}
.cssIcon.labelTagIcon {
  background: url(../public/img/nav_icon/labelTagIcon.svg?v=8) no-repeat center center;
}
.cssIcon.labelTagIcon.white {
  background: url(../public/img/nav_icon/labelTagIcon_white.svg?v=8) no-repeat center center;
}
.cssIcon.labelTagIcon.itared {
  background: url(../public/img/nav_icon/labelTagIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.feedIcon {
  background: url(../public/img/nav_icon/feedPageIcon.svg?v=8) no-repeat center center;
}
.cssIcon.feedIcon.active {
  background: url(../public/img/nav_icon/feedPageIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.squareIcon {
  background: url(../public/img/nav_icon/squarePageIcon.svg?v=8) no-repeat center center;
}
.cssIcon.squareIcon.active {
  background: url(../public/img/nav_icon/squarePageIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.rocketIcon {
  background: url(../public/img/nav_icon/rocketPageIcon.svg?v=8) no-repeat center center;
}
.cssIcon.rocketIcon.active {
  background: url(../public/img/nav_icon/rocketPageIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.plusCircleIcon {
  background: url(../public/img/nav_icon/plusCircle.svg?v=8) no-repeat center center;
}
.cssIcon.sparkles {
  background: url(../public/img/nav_icon/sparkles.svg?v=8) no-repeat center center;
}
.cssIcon.speaker_wave {
  background: url(../public/img/nav_icon/speaker_wave.svg?v=8) no-repeat center center;
}
.cssIcon.earthIcon {
  background: url(../public/img/nav_icon/earthPageIcon.svg?v=8) no-repeat center center;
}
.cssIcon.earthIcon.active {
  background: url(../public/img/nav_icon/earthPageIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.mapIcon {
  background: url(../public/img/nav_icon/mapPageIcon.svg?v=8) no-repeat center center;
}
.cssIcon.mapIcon.active {
  background: url(../public/img/nav_icon/mapPageIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.mapIcon.fill.itagreen {
  background: url(../public/img/nav_icon/mapPageIcon_fill_itagreen.svg?v=8) no-repeat center center;
}
.cssIcon.mapIcon.itared {
  background: url(../public/img/nav_icon/mapPageIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.mapIcon.white {
  background: url(../public/img/nav_icon/mapPageIcon_white.svg?v=8) no-repeat center center;
}
.cssIcon.heartIcon {
  background: url(../public/img/nav_icon/heartPageIcon.svg?v=8) no-repeat center center;
}
.cssIcon.heartIcon.active {
  background: url(../public/img/nav_icon/heartPageIcon_focus.svg?v=8) no-repeat center center;
}
.cssIcon.heartIcon.itared {
  background: url(../public/img/nav_icon/heartPageIcon_itared.svg?v=8) no-repeat center center;
}
.cssIcon.heartIcon.fill.itared {
  background: url(../public/img/nav_icon/heartPageIcon_fill_itared.svg?v=8) no-repeat center center;
}
.cssIcon.heartIcon.fill.itagreen {
  background: url(../public/img/nav_icon/heartPageIcon_fill_itagreen.svg?v=8) no-repeat center center;
}

/* ------------------------------ 
 * General 
 --------------------------------*/
button.glo1-border {
  border-radius: 15px;
  border: 1px solid var(--color-darkgray);
  outline: none;
  cursor: pointer;
  font-weight: 500;
  background: none;
  color: var(--color-darkgray);
  font-size: var(--font-lg);
  width: max-content;
  width: -moz-max-content;
  height: max-content;
  height: -moz-max-content;
  padding: 5px 10px;
}
button.glo1-border.white {
  color: white;
  border: 1px solid white;
}
button.glo1-border:hover, button.glo1-border:focus, button.glo1-border:active {
  background: var(--color-darkgray);
  color: white;
}
button.glo1-border.active {
  background: var(--color-darkgray);
  color: white;
}

button.glo1-widerect {
  border-radius: 10px;
  background: black;
  font-size: var(--font-xl);
  color: white;
  /* color: black; */
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -1px;
  width: 50px;
  height: 50px;
  font-weight: 500;
}
button.glo1-widerect .line {
  background: none;
  border: 1px solid black;
}
button.glo1-widerect:hover, button.glo1-widerect:focus, button.glo1-widerect:active {
  background: black;
  color: white;
}

/* ------------------------------ 
 * 탭 스타일   
 --------------------------------*/
.glo1-grid3 {
  display: grid;
  width: 100%;
  justify-content: center;
  align-items: center;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
}

.glo1-tab-link {
  position: relative;
  font-size: var(--font-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
       user-select: none !important;
  padding: 7px;
  cursor: pointer;
}
.glo1-tab-link.current {
  border-bottom: 1px solid var(--color-darkgray);
  font-weight: bold;
}

.glo1-tab-content {
  display: none;
  height: 100%;
}
.glo1-tab-content.current {
  display: grid;
  grid-template: "a" 1fr/1fr;
}
.glo1-tab-content.current .g1 {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
}
.glo1-tab-content.current .g2 {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}

/* 스피너 스타일 */
.glo1-loadmore-loader {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: glo1-loadmore-spin 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: glo1-loadmore-spin 2s linear infinite;
}

/* 스피너 회전 애니메이션 */
@keyframes glo1-loadmore-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
details.glo1 summary {
  cursor: pointer;
  outline: none;
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--color-darkgray);
  border-radius: 10px;
  background: none;
  color: var(--color-darkgray);
  width: max-content;
  width: -moz-max-content;
  height: max-content;
  height: -moz-max-content;
}
details.glo1 summary.white {
  color: white;
  border: 1px solid white;
}
details.glo1 summary:hover, details.glo1 summary:focus, details.glo1 summary:active {
  background: var(--color-darkgray);
  color: white;
}
details.glo1.open {
  display: none;
}

#userguideModal_integrated {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  z-index: 500;
}
#userguideModal_integrated .userguide_modal_content2 {
  display: grid;
  grid-template: "a" 70px "b" 1fr "c" 0px "d" 70px/1fr;
  background: var(--CSV-BColor);
  box-shadow: 0 0 1em 0 rgba(0, 30, 20, 0.6);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  color: rgb(46, 46, 46);
  line-height: 18px;
  font-size: 11px;
  align-items: center;
}
#userguideModal_integrated .userguide_modal_content2 > .ga {
  grid-area: a;
  display: flex;
  position: relative;
}
#userguideModal_integrated .userguide_modal_content2 > .gb {
  grid-area: b;
  display: flex;
  position: absolute;
}
#userguideModal_integrated .userguide_modal_content2 > .gc {
  grid-area: c;
  display: flex;
  position: relative;
}
#userguideModal_integrated .userguide_modal_content2 > .gd {
  grid-area: d;
  display: flex;
}
#userguideModal_integrated .userguide_modal_content2 .swiper_ug2 .swiper-slide {
  opacity: 1 !important;
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  -o-transform: scale(1) !important;
}
#userguideModal_integrated .ugintg-howto-name {
  color: var(--CSV-Color);
  letter-spacing: -1px;
  font-size: calc(10px + 2vw);
  text-align: center;
  font-weight: 500;
}
#userguideModal_integrated .userguide-container {
  z-index: 2;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#userguideModal_integrated .userguide_close_integrated {
  position: fixed;
  bottom: 0;
  margin: 11px auto;
  right: 0;
  left: 0;
  padding: 7px;
  font-size: calc(8px + 2vw);
  color: var(--CSV-Color);
  font-weight: 500;
  z-index: 5;
  text-align: center;
  cursor: pointer;
  width: 60px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
#userguideModal_integrated .userguide_close_integrated:hover, #userguideModal_integrated .userguide_close_integrated:focus {
  background: rgba(255, 255, 255, 0.253);
  text-decoration: none;
}
#userguideModal_integrated .phone-frame {
  background-color: #353535;
  border-radius: 30px;
  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045), 0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094), 0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
  width: 78vw;
  height: 78vh;
}
#userguideModal_integrated .phone-screen {
  align-items: center;
  justify-content: center;
  background: var(--CSV-BColor);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  perspective: 460px;
  position: relative;
  width: 100%;
}
#userguideModal_integrated .imageContainer {
  overflow: hidden;
  transform-origin: 100% 0;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
}
#userguideModal_integrated .imageContainer img.phone-image {
  max-width: 100%;
  height: 100%;
}
#userguideModal_integrated .imageContainer object.phone-image {
  max-width: 100%;
  height: 100%;
}
#userguideModal_integrated .imageContainer object.phone-image:focus {
  outline: none;
}
#userguideModal_integrated .active .imageContainer {
  transform: rotateX(-45deg);
}
#userguideModal_integrated .image {
  left: -76%;
  position: relative;
  width: 250%;
}
#userguideModal_integrated .overlay {
  background: linear-gradient(rgba(0, 0, 0, 0.1215686275) 0%, rgba(0, 0, 0, 0.6235294118) 80%, rgba(0, 0, 0, 0.7490196078) 100%);
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  top: 0;
  width: 100%;
}
#userguideModal_integrated .active .overlay {
  opacity: 1;
}
#userguideModal_integrated .button-menu {
  z-index: 5;
  border-radius: 50%;
  position: absolute;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
#userguideModal_integrated .button-menu1 {
  bottom: 25px;
  cursor: pointer;
  fill: none;
  height: 24px;
  /* left: 35px; */
  -webkit-tap-highlight-color: transparent;
  width: 24px;
}
#userguideModal_integrated .bg {
  fill: #282828;
}
#userguideModal_integrated .button-menu1:active .bg {
  fill: #555;
}
#userguideModal_integrated .line {
  stroke: #fff;
  stroke-width: 2;
  transition: stroke 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 50%;
}
#userguideModal_integrated .active .line1 {
  stroke: #50cea1;
  transform: translateX(-2.5px) translateY(3px) rotate(45deg);
}
#userguideModal_integrated .active .line2 {
  stroke: #50cea1;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
}
#userguideModal_integrated .active .line3 {
  stroke: #50cea1;
  transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
  -webkit-transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
  -moz-transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
  -ms-transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
  -o-transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
}
#userguideModal_integrated .active .button-menu {
  transform: translateY(-180px);
}
#userguideModal_integrated .menu {
  background: linear-gradient(#ffffff, transparent), linear-gradient(to top left, #00ff94, transparent), linear-gradient(to top right, #ffffff, transparent);
  background-blend-mode: screen;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  height: 192px;
  position: absolute;
  transform: translateY(192px);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
#userguideModal_integrated .option {
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  width: 26vw;
}
#userguideModal_integrated .option:active::after {
  background-color: #000;
  content: " ";
  opacity: 0.25;
  height: 100%;
  position: absolute;
  width: 100%;
}
#userguideModal_integrated .subject {
  height: calc(10px + 2vw);
  width: calc(10px + 2vw);
}
#userguideModal_integrated .active .menu {
  transform: translateY(0);
}
#userguideModal_integrated .english {
  font-size: calc(4px + 2vw);
  font-weight: 500;
  padding-top: 7px;
  letter-spacing: -0.5px;
}
#userguideModal_integrated .korean {
  font-size: calc(5px + 2vw);
  font-weight: 700;
  line-height: 1;
  color: black;
}

.ugintg-swiper-container {
  width: 100%;
  height: 100%;
}

.ugintg-tab-link.current {
  background: #1bc48b;
}

.ugintg-tab-content {
  display: none;
}
.ugintg-tab-content.current {
  display: block;
}

/* 팝업전체메뉴 */
.popup-plog {
  filter: url("#shadowed-goo");
}

.popup-plog-item,
.popup-plog-open-button {
  background: #171717;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  /* margin-left: -40px; */
  position: absolute;
  bottom: 0px;
  color: rgb(0, 0, 0);
  text-align: center;
  line-height: 50px;
  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms;
  box-shadow: 0px 2px 1px 1px rgba(6, 228, 139, 0.3803921569);
}

.popup-plog-open {
  display: none;
}

.hamburger {
  width: 25px;
  height: 3px;
  background: #06e48b;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: transform 200ms;
}

.hamburger-1 {
  transform: translate3d(0, -8px, 0);
}

.hamburger-2 {
  transform: translate3d(0, 0, 0);
}

.hamburger-3 {
  transform: translate3d(0, 8px, 0);
}

.popup-plog-open:checked + .popup-plog-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.popup-plog-open:checked + .popup-plog-open-button .hamburger-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.popup-plog-open:checked + .popup-plog-open-button .hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.popup-plog {
  position: fixed;
  right: 15px;
  bottom: 20px;
  width: 60px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
  z-index: 10;
}

.popup-plog-item {
  opacity: 0;
  display: none;
}

.popup-plog-item:hover {
  background: white;
  color: #00bcd4;
}

.popup-plog-item:nth-child(3) {
  transition-duration: 180ms;
}

.popup-plog-item:nth-child(4) {
  transition-duration: 180ms;
}

.popup-plog-item:nth-child(5) {
  transition-duration: 180ms;
}

.popup-plog-item:nth-child(6) {
  transition-duration: 180ms;
}

.popup-plog-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.popup-plog-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.popup-plog-open:checked + .popup-plog-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(0.9, 0.9) translate3d(0, 0, 0);
  -moz-transform: scale(0.9, 0.9) translate3d(0, 0, 0);
  -ms-transform: scale(0.9, 0.9) translate3d(0, 0, 0);
  -o-transform: scale(0.9, 0.9) translate3d(0, 0, 0);
}

.popup-plog-open:checked ~ .popup-plog-item {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: none;
}

.popup-plog-open:checked ~ .popup-plog-item:nth-child(3) {
  transition-duration: 190ms;
  transform: translate3d(0, -90px, 0);
  opacity: 1;
  -moz-transform: translate3d(0, -90px, 0);
  -ms-transform: translate3d(0, -90px, 0);
  -o-transform: translate3d(0, -90px, 0);
}

.popup-plog-open:checked ~ .popup-plog-item:nth-child(4) {
  transition-duration: 290ms;
  transform: translate3d(0, -180px, 0);
  opacity: 1;
  -moz-transform: translate3d(0, -180px, 0);
  -ms-transform: translate3d(0, -180px, 0);
  -o-transform: translate3d(0, -180px, 0);
}

.popup-plog-open:checked ~ .popup-plog-item:nth-child(5) {
  transition-duration: 390ms;
  transform: translate3d(0, -270px, 0);
  opacity: 1;
  -moz-transform: translate3d(0, -270px, 0);
  -ms-transform: translate3d(0, -270px, 0);
  -o-transform: translate3d(0, -270px, 0);
}

.popup-plog-open:checked ~ .popup-plog-item:nth-child(6) {
  transition-duration: 490ms;
  transform: translate3d(0, -360px, 0);
  opacity: 1;
  -moz-transform: translate3d(0, -360px, 0);
  -ms-transform: translate3d(0, -360px, 0);
  -o-transform: translate3d(0, -360px, 0);
}

/* end 팝업전체메뉴 */
.navmodal {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 8;
  background: rgba(5, 53, 28, 0.7882352941);
  display: none;
}

/*!
 * WickedCSS v1.0 (https://github.com/kristofferandreasen/wickedCSS)
 * Copyright 2015 Kristoffer Andreasen
 * MIT License
 */
.barrelRoll,
.fadeIn,
.floater,
.heartbeat,
.pulse,
.rollerLeft,
.rollerRight,
.rollerDown,
.rotateIn,
.rotateInLeft,
.rotateInRight,
.rotation,
.shake,
.sideToSide,
.slideDown,
.slideLeft,
.slideRight,
.slideUp,
.spinner,
.wiggle,
.zoomer,
.zoomerOut {
  visibility: visible !important;
}

.rotation {
  animation-name: rotation;
  -webkit-animation-name: rotation;
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.rotation,
.sideToSide {
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@keyframes rotation {
  from {
    transform: rotate(0) translateX(50%) rotate(0);
  }
  to {
    transform: rotate(360deg) translateX(50%) rotate(-360deg);
  }
}
.sideToSide {
  animation-name: sideToSide;
  -webkit-animation-name: sideToSide;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes sideToSide {
  0%, 100% {
    transform: translate(100%, 0);
  }
  50% {
    transform: translate(-100%, 0);
  }
}
.zoomer {
  animation-name: zoomer;
  -webkit-animation-name: zoomer;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1);
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1);
  animation-iteration-count: 1;
}

.zoomer,
.zoomerOut {
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1);
  animation-duration: 1s;
}
@keyframes zoomer {
  0% {
    transform: scale(0.3);
  }
  100% {
    transform: scale(1);
  }
}
.zoomerOut {
  animation-name: zoomerOut;
  -webkit-animation-name: zoomerOut;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1);
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.rollerRight,
.zoomerOut {
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
@keyframes zoomerOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
.spinner {
  animation-name: spinner;
  -webkit-animation-name: spinner;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pulse,
.spinner {
  animation-timing-function: linear;
  animation-duration: 2s;
}
@keyframes spinner {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
.pulse {
  animation-name: pulse;
  -webkit-animation-name: pulse;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.shake {
  animation-name: shake;
  -webkit-animation-name: shake;
  animation-duration: 0.4s;
  -webkit-animation-duration: 0.4s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

.barrelRoll,
.shake {
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-duration: 0.4s;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  16%, 50%, 83% {
    transform: translateX(-10px);
  }
  33%, 66% {
    transform: translateX(10px);
  }
}
.barrelRoll {
  animation-name: barrelRoll;
  -webkit-animation-name: barrelRoll;
  -webkit-animation-duration: 0.4s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
}

@keyframes barrelRoll {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.floater {
  animation-name: floater;
  -webkit-animation-name: floater;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
}

.floater,
.wiggle {
  animation-iteration-count: infinite;
}

@keyframes floater {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8%);
  }
}
.wiggle {
  animation-name: wiggle;
  -webkit-animation-name: wiggle;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
.pound {
  animation-name: pound;
  -webkit-animation-name: pound;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  visibility: visible !important;
}

.heartbeat,
.pound {
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes pound {
  to {
    transform: scale(1.2);
  }
}
.heartbeat {
  animation-name: heartbeat;
  -webkit-animation-name: heartbeat;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  10% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
  }
}
@keyframes heartbeat1 {
  0%, 100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  90% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
  }
  80% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
}
.rollerRight {
  animation-name: rollerRight;
  -webkit-animation-name: rollerRight;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.rollerLeft,
.rollerRight {
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

.rollerDown {
  animation-name: rollerDown;
  -webkit-animation-name: rollerDown;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes rollerRight {
  0% {
    transform: translateX(-200px) rotate(0);
    opacity: 0;
    -webkit-transform: translateX(-200px) rotate(0);
    -moz-transform: translateX(-200px) rotate(0);
    -ms-transform: translateX(-200px) rotate(0);
    -o-transform: translateX(-200px) rotate(0);
  }
  100% {
    transform: translateX(0) rotate(2turn);
    opacity: 1;
  }
}
@keyframes rollerDown {
  0% {
    opacity: 0.5;
    transform: translateY(-250px) rotate(0) scale(2);
    -webkit-transform: translateY(-250px) rotate(0) scale(2);
    -moz-transform: translateY(-250px) rotate(0) scale(2);
    -ms-transform: translateY(-250px) rotate(0) scale(2);
    -o-transform: translateY(-250px) rotate(0) scale(2);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(1turn) scale(1);
    -webkit-transform: translateY(0) rotate(1turn) scale(1);
    -moz-transform: translateY(0) rotate(1turn) scale(1);
    -ms-transform: translateY(0) rotate(1turn) scale(1);
    -o-transform: translateY(0) rotate(1turn) scale(1);
  }
}
.rollerLeft {
  animation-name: rollerLeft;
  -webkit-animation-name: rollerLeft;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.fadeOut,
.rollerLeft {
  -webkit-animation-fill-mode: forwards;
}

@keyframes rollerLeft {
  0% {
    transform: translateX(200px) rotate(0);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(-2turn);
    opacity: 1;
  }
}
.slideDown {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.slideDown70 {
  animation-name: slideDown70;
  -webkit-animation-name: slideDown70;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.slideDown,
.slideUp {
  animation-timing-function: ease;
  animation-duration: 0.5s;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDown70 {
  0% {
    transform: translateY(0%);
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
  }
  100% {
    transform: translateY(30%);
    opacity: 0;
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
  }
}
.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.slideUp70 {
  animation-name: slideUp70;
  -webkit-animation-name: slideUp70;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}
.slideUp70.open {
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
}

.slideUp90 {
  animation-name: slideUp90;
  -webkit-animation-name: slideUp90;
  animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}
.slideUp90.open {
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp70 {
  0% {
    transform: translateY(150px);
    opacity: 0.5;
    -webkit-transform: translateY(150px);
    -moz-transform: translateY(150px);
    -ms-transform: translateY(150px);
    -o-transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp90 {
  0% {
    transform: translateY(50px);
    opacity: 0.5;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.slideLeft70 {
  animation-name: slideLeft70;
  -webkit-animation-name: slideLeft70;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.slideLeft,
.slideRight {
  animation-timing-function: ease;
}

@keyframes slideLeft {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideLeft70 {
  0% {
    transform: translateX(30%);
    opacity: 0.7;
    -webkit-transform: translateX(30%);
    -moz-transform: translateX(30%);
    -ms-transform: translateX(30%);
    -o-transform: translateX(30%);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.slideRight {
  animation-name: slideRight;
  -webkit-animation-name: slideRight;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.slideRight70 {
  animation-name: slideRight70;
  -webkit-animation-name: slideRight70;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

@keyframes slideRight {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideRight70 {
  0% {
    transform: translateX(-30%);
    opacity: 0.7;
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    -ms-transform: translateX(-30%);
    -o-transform: translateX(-30%);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.fadeIn,
.fadeOut {
  animation-timing-function: ease;
  animation-duration: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeOut {
  animation-name: fadeOut;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.rotateInRight {
  animation-name: rotateInRight;
  -webkit-animation-name: rotateInRight;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.rotateInLeft,
.rotateInRight {
  animation-timing-function: ease-in-out;
}
@keyframes rotateInRight {
  from {
    transform: rotate(0) translateX(100%) rotate(0);
  }
  to {
    transform: rotate(360deg) translateX(0) rotate(-360deg);
  }
}
.rotateInLeft {
  animation-name: rotateInLeft;
  -webkit-animation-name: rotateInLeft;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.rotateIn,
.rotateInLeft {
  -webkit-animation-iteration-count: 1;
}
@keyframes rotateInLeft {
  from {
    transform: rotate(0) translateX(-100%) rotate(0);
  }
  to {
    transform: rotate(360deg) translateX(0) rotate(-360deg);
  }
}
.rotateIn {
  animation-name: rotateIn;
  -webkit-animation-name: rotateIn;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  animation-iteration-count: 1;
  transform-origin: center;
}
@keyframes rotateIn {
  0% {
    transform: rotate3d(0, 0, 1, -720deg);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.bounceIn {
  animation-name: bounceIn;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
section.section-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.trademark {
  position: absolute;
  z-index: 99;
  left: 50px;
  top: 50px;
  transition: all 0.25s ease;
}
.trademark:hover {
  transform: translate(0, -3px);
}

.mobile-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0px 20px 30px -30px #202637;
  transition: all 0.25s ease;
}

.notch {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  height: 26px;
  background-color: #EADBC9;
  z-index: 99;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  transform: translate(-50%, 0);
}

.top-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px 23px 0;
  position: fixed;
  width: 100%;
  z-index: 3;
  color: #1d1d1d;
}
.top-row .back {
  font-size: 17px;
  margin: 2px 2px 2px 29px;
}
.top-row .back:before {
  content: "\f190";
  font-family: FontAwesome;
  font-size: 25px;
  position: absolute;
  left: 31px;
  top: 24px;
}
.top-row .numinfo {
  font-size: 32px;
  font-family: "roboto";
}
.top-row .numinfo:after {
  content: "KM";
  font-family: "roboto";
  position: relative;
  font-size: 15px;
  margin-left: 5px;
}
.top-row .menu {
  cursor: pointer;
}
.top-row .menu span,
.top-row .menu span::before,
.top-row .menu span::after {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 6px;
  display: block;
  background-color: #FFF;
}
.top-row .menu span {
  position: relative;
  margin: 5px 0;
}
.top-row .menu span::before {
  position: absolute;
  left: 0;
  width: 14px;
  top: -8px;
}
.top-row .menu span::after {
  position: absolute;
  left: 0;
  bottom: -8px;
}

.swiper2 {
  position: absolute !important;
  bottom: 0px;
}

.slider-element-container {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
}
.slider-element-container #map3 {
  transition: all 0.55s ease;
}
.slider-element-container .swiper-container {
  width: 100%;
}
.slider-element-container .swiper-pagination-bullet {
  background-color: fade(#FFF, 90%);
}
.slider-element-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #F02B67;
}
.slider-element-container .swiper-slide {
  width: 100%;
  transition: all 0.35s ease;
  opacity: 0.3;
  height: 100%;
  transform: scale(0.85);
}
.slider-element-container .swiper-slide .juppics,
.slider-element-container .swiper-slide .w-record6 {
  transition: all 0.35s ease;
  opacity: 0;
}
.slider-element-container .swiper-slide .content {
  transition: all 0.35s ease;
  opacity: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.slider-element-container .swiper-slide .content .headline {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  color: #202637;
  margin-bottom: 15px;
}
.slider-element-container .swiper-slide .content .explain {
  font-size: 16px;
  line-height: 18px;
  font-weight: 300;
  color: #202637;
  margin-bottom: 15px;
}
.slider-element-container .swiper-slide .content .tag {
  padding: 4px 5px;
  background-color: #202637;
  color: #FFF;
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 40px;
  border-radius: 4px;
}
.slider-element-container .swiper-slide .content button.button {
  cursor: pointer;
  width: 100%;
  margin-top: auto;
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  color: #FFF;
  background-color: #F02B67;
  border-radius: 6px;
  border: 0 none;
  -webkit-appearance: none;
  box-shadow: 0 10px 10px -10px fade(#F02B67, 60%);
  transition: all 0.25s ease;
}
.slider-element-container .swiper-slide .content button.button:hover {
  transform: translate(0, -2px);
  box-shadow: 0 10px 10px -10px #F02B67;
}
.slider-element-container .swiper-slide .content button.button:focus {
  outline: 1px dashed #202637;
}
.slider-element-container .swiper-slide.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}
.slider-element-container .swiper-slide.swiper-slide-active .content,
.slider-element-container .swiper-slide.swiper-slide-active .juppics,
.slider-element-container .swiper-slide.swiper-slide-active .w-record6 {
  opacity: 1;
}

.slider-citypad-container {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
}
.slider-citypad-container .swiper-container {
  width: 100%;
}
.slider-citypad-container .swiper-slide {
  width: 100%;
  transition: all 0.35s ease;
  visibility: hidden;
  opacity: 0;
  height: 100%;
  transform: scale(0.5);
}
.slider-citypad-container .swiper-slide.swiper-slide-prev {
  opacity: 0.5;
  visibility: hidden;
  transform: scale(0);
}
.slider-citypad-container .swiper-slide.swiper-slide-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.slider-citypad-container .swiper-slide.swiper-slide-next {
  opacity: 0.5;
  visibility: hidden;
  transform: scale(0);
}

/* ------------------------------ 
 * 24-1-22 담배꽁초 슬라이드에 -- 빗물받이 추가 
 --------------------------------*/
.drainage-tabbox {
  top: -18px;
  left: 0;
  margin: auto;
  right: 0;
  position: absolute;
  z-index: 15;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  display: none;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
}
.drainage-tabbox.open {
  display: flex;
}
.drainage-tabbox .guide {
  font-size: var(--font-lg);
  color: rgb(80, 80, 80);
  font-weight: 500;
  letter-spacing: -0.5px;
}
.drainage-tabbox .item {
  background: white;
  padding: 5px 8px;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(15, 15, 15);
  gap: 3px;
  font-size: var(--font-lg);
  font-weight: 700;
  letter-spacing: -0.5px;
  cursor: pointer;
  box-shadow: 1px 1px 10px 1px rgb(221, 221, 221);
  -moz-box-shadow: 1px 1px 10px 1px rgb(221, 221, 221);
  -webkit-box-shadow: 1px 1px 10px 1px rgb(221, 221, 221);
  border: 1px solid #e7e7e7;
}
.drainage-tabbox .item .cssIcon {
  width: var(--font-xl);
  height: var(--font-xl);
  color: white;
}

/* ------------------------------ 
 * 빗물받이 전용 패널 
 --------------------------------*/
.plog-drainage-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 6vw;
  z-index: 300;
  height: calc(var(--vh, 1vh) * 100 - 60px);
}
.plog-drainage-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.plog-drainage-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.plog-drainage-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.plog-drainage-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.plog-drainage-panel .drag-head .close-css:before, .plog-drainage-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.plog-drainage-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.plog-drainage-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.plog-drainage-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.plog-drainage-panel .inner::-webkit-scrollbar {
  display: none;
}
.plog-drainage-panel .inner {
  max-height: calc(var(--vh, 1vh) * 100 - 130px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
}
.plog-drainage-panel .inner .mission_state {
  padding: 20px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.plog-drainage-panel .inner .divider-1-lightgray {
  height: 1px;
  background: lightgray;
  flex: none;
  margin: 10px 0;
}
.plog-drainage-panel .inner .section-div-title {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 10px 0;
  line-height: 1.7;
}
.plog-drainage-panel .inner .section-div-mark {
  font-size: var(--font-10xl);
  padding: 30px 0 0px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.plog-drainage-panel .inner .section-div-submit {
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.plog-drainage-panel .inner .section-div-submit button.btn {
  width: 100%;
  height: 50px;
  font-size: var(--font-2xl);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: white;
  background: var(--cl-ita-red-40);
  border-radius: 6px;
}
.plog-drainage-panel .inner .info {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--cl-text-b-120);
}
.plog-drainage-panel .inner .sosp--label {
  font-size: var(--font-4xl);
  font-weight: 600;
  padding: 14px 2px 4px 2px;
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -0.5px;
  margin-top: 10px;
  background: transparent;
  color: white;
  border-radius: 8px;
  text-align: left;
  line-height: 1.5;
  color: black;
}
.plog-drainage-panel .inner .sosp--display-seltag-box {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 8px;
       column-gap: 8px;
  row-gap: 5px;
  padding: 5px 0;
}
.plog-drainage-panel .inner .emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}
.plog-drainage-panel .inner .sosp--seltag-icon-text {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.plog-drainage-panel .inner .sosp--seltag-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border-radius: 8px 8px 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  padding: 5px 7px;
  color: var(--cl-ita-red-40);
  position: relative;
}
.plog-drainage-panel .inner .sosp--seltag-icon-box.selected {
  color: var(--cl-ita-red-40);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  position: relative;
}
.plog-drainage-panel .inner .sosp--open-taglist-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.plog-drainage-panel .inner .sosp--open-taglist-box button.sosp--btn {
  border-radius: 10px 10px 10px 10px;
  font-size: var(--font-xl);
  border: 2px solid;
  background: transparent;
  color: black;
  width: -moz-max-content;
  width: max-content;
  font-weight: 600;
  padding: 6px 12px;
  width: max-content;
}
.plog-drainage-panel .inner .sosp--open-taglist-box button.sosp--btn:focus, .plog-drainage-panel .inner .sosp--open-taglist-box button.sosp--btn:active {
  transform: scale(1.03);
}
.plog-drainage-panel .inner .drainage-pics-uploadBox {
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.plog-drainage-panel .inner .drainage-pics-uploadBox .drainage-img-upload-icon {
  width: 30px;
  height: 30px;
}
.plog-drainage-panel .inner .drainage-pics-uploadBox .drainage-imgs {
  padding: 5px 0;
}
.plog-drainage-panel .inner .drainage_photoUpload {
  padding: 10px 0;
}
.plog-drainage-panel .inner input.drainage-butt-num {
  width: 80px;
  height: 30px;
  border: 2px solid rgb(0, 0, 0);
  padding: 0 10px;
  font-size: var(--font-2xl);
  font-weight: 600;
  letter-spacing: -0.5px;
  text-align: right;
  border-radius: 10px;
}

/* ------------------------------ 
 * 빗물받이 전용 - 장소입력 패널 
 --------------------------------*/
.drainage-sosp-moretag-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 3vw !important;
  height: calc(var(--vh, 1vh) * 100 - 60px);
}
.drainage-sosp-moretag-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.drainage-sosp-moretag-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.drainage-sosp-moretag-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.drainage-sosp-moretag-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.drainage-sosp-moretag-panel .drag-head .close-css:before, .drainage-sosp-moretag-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.drainage-sosp-moretag-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.drainage-sosp-moretag-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.drainage-sosp-moretag-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.drainage-sosp-moretag-panel .inner::-webkit-scrollbar {
  display: none;
}
.drainage-sosp-moretag-panel .drag-head {
  padding: 0 10px;
}
.drainage-sosp-moretag-panel .drag-head .type-cnt {
  font-size: var(--font-3xl);
  color: var(--cl-ita-red-40);
  font-weight: bold;
  margin-right: 5px;
}
.drainage-sosp-moretag-panel .drag-head .close-text {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: rgb(255, 255, 255);
  cursor: pointer;
  background: #030303;
  padding: 5px 12px;
  border-radius: 6px;
}
.drainage-sosp-moretag-panel .inner {
  max-height: calc(var(--vh, 1vh) * 100 - 60px);
  overflow-y: auto;
}
.drainage-sosp-moretag-panel .inner.fixed-height {
  max-height: calc(var(--vh, 1vh) * 100 - 60px);
}
.drainage-sosp-moretag-panel .inner .guideline {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  padding: 10px 10px 10px 10px;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.drainage-sosp-moretag-panel .inner .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-150);
  line-height: 1.6;
  padding: 0 10px;
}
.drainage-sosp-moretag-panel .inner .tabbox {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}
.drainage-sosp-moretag-panel .inner .tabbox .sosp--tabitem {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  border-radius: 10px;
  padding: 5px 10px;
  letter-spacing: -0.3px;
  cursor: pointer;
}
.drainage-sosp-moretag-panel .inner .tabbox .sosp--tabitem:hover {
  color: var(--cl-ita-red-40);
}
.drainage-sosp-moretag-panel .inner .tabbox .sosp--tabitem.active {
  color: var(--cl-ita-red-40);
}
.drainage-sosp-moretag-panel .inner .content {
  display: flex;
  row-gap: 12px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  flex-wrap: wrap;
  padding: 20px 0px 40px 0;
  height: -moz-max-content;
  height: max-content;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-5);
}
.drainage-sosp-moretag-panel .inner .content .sosp--tag-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 0;
  background: white;
  padding: 5px 7px;
  color: var(--cl-text-b-40);
  position: relative;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.drainage-sosp-moretag-panel .inner .content .sosp--tag-icon-box.selected {
  border: 1px solid var(--cl-ita-red-40);
  color: white;
  background: var(--cl-ita-red-40);
  /* color: white; */
  position: relative;
}
.drainage-sosp-moretag-panel .inner .content .sosp--tag-icon-box.more {
  background: black;
  border: 1px solid black;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
}
.drainage-sosp-moretag-panel .inner .content .sosp--tag-icon-box .emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}
.drainage-sosp-moretag-panel .inner .content .sosp--tag-icon-box .sosp--tag-icon {
  width: 25px;
  height: 25px;
  padding: 3px;
  position: relative;
}
.drainage-sosp-moretag-panel .inner .content .sosp--tag-icon-box .sosp--tag-icon-text {
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.95px;
}
.drainage-sosp-moretag-panel .inner .content .sosp--tag-icon-box .sel-order {
  font-size: var(--font-md);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.horizontal-city-curTrashNum {
  display: none;
  top: 28px;
  position: absolute;
  right: 20px;
  z-index: 5;
  background: #00af80;
  padding: 2px 5px;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-lg);
  font-weight: 600;
}

.swiper-pagination-citykeypad {
  overflow: hidden;
  position: absolute;
  bottom: 10px;
  left: 4px;
  right: 4px;
  display: flex;
  text-align: center;
  justify-content: space-between;
  z-index: 50;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.swiper-pagination-citykeypad .swiper-pagination-bullet {
  width: -moz-fit-content;
  width: fit-content;
  width: auto;
  height: auto;
  padding: 4px 5px;
  color: #4b4b4b;
  display: inline-block;
  font-weight: 700;
  background: transparent;
  border-radius: 0px;
  font-size: var(--font-md);
  opacity: 1;
}
.swiper-pagination-citykeypad .swiper-pagination-bullet:hover, .swiper-pagination-citykeypad .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination-citykeypad .swiper-pagination-bullet-active {
  font-weight: 700;
  background: #00af80;
  border-radius: 5px;
  color: white;
}

.citypad-utilityBtn-box {
  top: -7px;
  position: absolute;
  right: 16px;
  left: auto;
}
.citypad-utilityBtn-box.right {
  left: 54px;
  right: auto;
}

.pad-vertical-box {
  position: absolute;
  left: 25%;
  right: auto;
}
.pad-vertical-box.right {
  left: auto;
  right: 25%;
}

.city-Trash-Counter {
  cursor: pointer;
  background: black;
  position: absolute;
  /* box-shadow: inset 0px 0px 7px 1px #dadada; */
  left: 25%;
  top: 46px;
  color: white;
  /* padding-top: 8px; */
  z-index: 15;
  border-radius: 20px;
  height: 55px;
  transform: translateX(-50%);
  width: 40px;
  overflow: hidden;
}

.swiper-button-prev-pad-vertical,
.swiper-button-next-pad-vertical {
  font-size: 18px;
  position: absolute;
  left: 25%;
  color: rgb(0, 0, 0);
  width: 50px;
  transform: translateX(-50%);
  height: 40px;
  z-index: 20;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-prev-pad-vertical:hover, .swiper-button-prev-pad-verticalfocus,
.swiper-button-next-pad-vertical:hover,
.swiper-button-next-pad-verticalfocus {
  outline: none;
}
.swiper-button-prev-pad-vertical.swiper-button-disabled,
.swiper-button-next-pad-vertical.swiper-button-disabled {
  opacity: 0.2;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev-pad-vertical {
  top: 100px;
  background-image: unset;
}

.swiper-button-next-pad-vertical {
  top: 6px;
  background-image: unset;
}

.slider-element-container-1 {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
}
.slider-element-container-1 #map3 {
  transition: all 0.55s ease;
}
.slider-element-container-1 .swiper-container {
  width: 100%;
}
.slider-element-container-1 .swiper-pagination-bullet {
  background-color: fade(#FFF, 90%);
}
.slider-element-container-1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #F02B67;
}
.slider-element-container-1 .swiper-slide {
  width: 100%;
  transition: all 0.35s ease;
  opacity: 1;
  height: 100%;
  transform: scale(0.5);
}
.slider-element-container-1 .swiper-slide .juppics,
.slider-element-container-1 .swiper-slide .w-record6 {
  transition: all 0.35s ease;
  opacity: 0;
}
.slider-element-container-1 .swiper-slide .content {
  transition: all 0.35s ease;
  opacity: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.slider-element-container-1 .swiper-slide .content .headline {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  color: #202637;
  margin-bottom: 15px;
}
.slider-element-container-1 .swiper-slide .content .explain {
  font-size: 16px;
  line-height: 18px;
  font-weight: 300;
  color: #202637;
  margin-bottom: 15px;
}
.slider-element-container-1 .swiper-slide .content .tag {
  padding: 4px 5px;
  background-color: #202637;
  color: #FFF;
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 40px;
  border-radius: 4px;
}
.slider-element-container-1 .swiper-slide .content button.button {
  cursor: pointer;
  width: 100%;
  margin-top: auto;
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  color: #FFF;
  background-color: #F02B67;
  border-radius: 6px;
  border: 0 none;
  -webkit-appearance: none;
  box-shadow: 0 10px 10px -10px fade(#F02B67, 60%);
  transition: all 0.25s ease;
}
.slider-element-container-1 .swiper-slide .content button.button:hover {
  transform: translate(0, -2px);
  box-shadow: 0 10px 10px -10px #F02B67;
}
.slider-element-container-1 .swiper-slide .content button.button:focus {
  outline: 1px dashed #202637;
}
.slider-element-container-1 .swiper-slide.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}
.slider-element-container-1 .swiper-slide.swiper-slide-active .content,
.slider-element-container-1 .swiper-slide.swiper-slide-active .juppics,
.slider-element-container-1 .swiper-slide.swiper-slide-active .w-record6 {
  opacity: 1;
}

@media screen and (max-height: 670px) {
  .mobile-container {
    transform: scale(1);
  }
}
.infobox-container {
  display: none;
}

@media screen and (min-width: 1024px) {
  .infobox-container {
    display: block;
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 99;
  }
  .infobox-container .infobox-toggle {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background: #E48873;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .infobox-container .social-media-links {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 80px;
    bottom: 15px;
  }
  .infobox-container .social-media-links a {
    margin: 0 15px;
    transition: all 0.25s ease;
  }
  .infobox-container .social-media-links a:hover {
    transform: translate(0, -2px);
  }
  .infobox-container .social-media-links a:hover svg path {
    fill: #E48873;
  }
  .infobox-container .infobox-detail-container {
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: 80px;
    min-width: 240px;
    right: 0;
    background: #FFF;
    border-radius: 12px;
    padding: 20px;
  }
  .infobox-container .infobox-detail-container.active {
    display: flex;
  }
  .infobox-container .infobox-detail-container h4 {
    font-family: "Source Sans Pro", sans-serif;
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 24px;
    font-weight: 600;
    color: #000;
  }
  .infobox-container .infobox-detail-container p {
    margin-bottom: 15px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #000;
  }
  .infobox-container .infobox-detail-container ul {
    list-style: none;
    padding: 0;
  }
  .infobox-container .infobox-detail-container ul li {
    display: block;
    list-style: none;
    padding: 0;
    margin-bottom: 6px;
  }
  .infobox-container .infobox-detail-container ul li:last-child {
    margin: 0;
  }
  .infobox-container .infobox-detail-container ul li a {
    display: block;
    width: 100%;
    padding: 5px 8px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    background-color: #F4F4F4;
    border-radius: 4px;
    color: #000;
    text-decoration: none;
    transition: all 0.25s ease;
  }
  .infobox-container .infobox-detail-container ul li a:hover {
    background-color: #E48873;
    color: #FFF;
  }
}
.main-content {
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  padding: 0 15px;
}

.mobile-container.image-3 {
  background-image: url("https://source.unsplash.com/j14sr5KkTJ0");
}
.mobile-container.image-2 {
  background-image: url("https://source.unsplash.com/Snzzz130BWc");
}
.mobile-container.image-1 {
  background-image: url("https://source.unsplash.com/b84nM5W-AF0");
}

/* Video Modal
-----------------------------------------*/
.video-modal,
.video-modal .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
}

.video-modal {
  overflow: hidden;
  position: fixed;
  opacity: 0;
  transform: translate(500%, 0%);
  transition: transform 0s linear 0s;
  /* using flexbox for vertical centering */
  /* Flexbox display */
  display: flex;
  /* Vertical alignment */
  align-items: center;
  transform-style: preserve-3d;
}

.video-modal .overlay {
  z-index: 0;
  background: rgba(0, 50, 29, 0.92);
  /* overlay color */
  opacity: 0;
  transition: opacity 0.2s ease-out 0.05s;
}

.video-modal-content {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  margin: 0 auto;
  overflow-y: visible;
  background: #000;
  width: calc(100% - 12em);
  height: 0;
  padding-top: calc((100% - 12em) * 0.5625);
  /* 16:9 calc */
}

/* Scaling to fit within the current Viewport size:
   When viewport aspect ratio is greater than 16:9
   work off the height instead of the width for calc */
@media (min-aspect-ratio: 16/9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778);
    /* 16:9 calc */
  }
}
/* Mobile Layout Tweaks - side margins reduced */
@media (max-width: 640px) {
  .video-modal-content {
    width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625);
    /* 16:9 calc */
  }
}
/* modal close button */
.close-video-modal {
  display: block;
  position: absolute;
  right: 12px;
  top: -44px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #000;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
}

/* show the modal: 
   add class to the body to reveal */
.show-video-modal .video-modal {
  opacity: 1;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}

.show-video-modal .video-modal .overlay {
  opacity: 1;
}

.show-video-modal .video-modal-content {
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}

/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 310). 

The 'supports' rule will only run if your browser supports CSS grid.

Flexbox and floats are used as a fallback so that browsers which don't support grid will still recieve a similar layout.

*/
.w-catch {
  display: grid;
  grid-template: "b" 115px "a" 1fr/1fr;
  /*15%fromthetopandcentered*/
  width: 100%;
  overflow: auto;
  max-height: -webkit-fill-available;
}
.w-catch > .ga {
  grid-area: a;
}
.w-catch > .gb {
  grid-area: b;
}
.w-catch > .gc {
  grid-area: c;
}
.w-catch > .gd {
  grid-area: d;
}

#catchimg1 {
  width: 100%;
  height: 100%;
  /* Profile Section */
  /* catch Section */
  /* Loader */
  /* Media Query */
  /* Spinner Animation */
  /*

  The following code will only run if your browser supports CSS grid.

  Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling. 

  */
}
#catchimg1 .w33 {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 293px));
  grid-template-rows: repeat(3, minmax(100px, 293px));
  gap: 3px;
}
#catchimg1 .w33 > * {
  display: grid;
}
#catchimg1 .catch_canvas_1 {
  display: grid;
  width: 100%;
  height: 100%;
}
#catchimg1 .container {
  max-width: 93.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}
#catchimg1 .btn {
  display: inline-block;
  font: inherit;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
#catchimg1 .btn:focus {
  outline: 0.5rem auto #4d90fe;
}
#catchimg1 .visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
#catchimg1 .profile {
  padding: 5rem 0;
}
#catchimg1 .profile::after {
  content: "";
  display: block;
  clear: both;
}
#catchimg1 .profile-image {
  float: left;
  width: calc(33.333% - 1rem);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 3rem;
}
#catchimg1 .profile-image img {
  border-radius: 50%;
}
#catchimg1 .profile-user-settings,
#catchimg1 .profile-stats,
#catchimg1 .profile-bio {
  float: left;
  width: calc(66.666% - 2rem);
}
#catchimg1 .profile-user-settings {
  margin-top: 1.1rem;
}
#catchimg1 .profile-user-name {
  display: inline-block;
  font-size: 3.2rem;
  font-weight: 300;
}
#catchimg1 .profile-edit-btn {
  font-size: 1.4rem;
  line-height: 1.8;
  border: 0.1rem solid #dbdbdb;
  border-radius: 0.3rem;
  padding: 0 2.4rem;
  margin-left: 2rem;
}
#catchimg1 .profile-settings-btn {
  font-size: 2rem;
  margin-left: 1rem;
}
#catchimg1 .profile-stats {
  margin-top: 2.3rem;
}
#catchimg1 .profile-stats li {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-right: 4rem;
  cursor: pointer;
}
#catchimg1 .profile-stats li:last-of-type {
  margin-right: 0;
}
#catchimg1 .profile-bio {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 2.3rem;
}
#catchimg1 .profile-real-name,
#catchimg1 .profile-stat-count,
#catchimg1 .profile-edit-btn {
  font-weight: 600;
}
#catchimg1 .catch {
  display: flex;
  flex-wrap: wrap;
  margin: -1rem -1rem;
  padding-bottom: 3rem;
}
#catchimg1 .catch-item {
  position: relative;
  flex: 1 0 14rem;
  margin: 1rem;
  color: #fff;
  cursor: pointer;
}
#catchimg1 .catch-item:hover .catch-item-info,
#catchimg1 .catch-item:focus .catch-item-info {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
#catchimg1 .catch-item-info {
  display: none;
}
#catchimg1 .catch-item-info ul {
  margin: 0;
}
#catchimg1 .catch-item-info li {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 600;
}
#catchimg1 .catch-item-likes {
  margin-right: 2.2rem;
}
#catchimg1 .catch-item-type {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2.5rem;
  text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
#catchimg1 .fa-clone,
#catchimg1 .fa-comment {
  transform: rotateY(180deg);
}
#catchimg1 .catch-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#catchimg1 .loader {
  width: 5rem;
  height: 5rem;
  border: 0.6rem solid #999;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin: 0 auto;
  animation: loader 500ms linear infinite;
}
@media screen and (max-width: 30rem) {
  #catchimg1 .profile {
    display: flex;
    flex-wrap: wrap;
    padding: 4rem 0;
  }
  #catchimg1 .profile::after {
    display: none;
  }
  #catchimg1 .profile-image,
  #catchimg1 .profile-user-settings,
  #catchimg1 .profile-bio,
  #catchimg1 .profile-stats {
    float: none;
    width: auto;
  }
  #catchimg1 .profile-image img {
    width: 7.7rem;
  }
  #catchimg1 .profile-user-settings {
    flex-basis: calc(100% - 10.7rem);
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
  }
  #catchimg1 .profile-user-name {
    font-size: 2.2rem;
  }
  #catchimg1 .profile-edit-btn {
    order: 1;
    padding: 0;
    text-align: center;
    margin-top: 1rem;
  }
  #catchimg1 .profile-edit-btn {
    margin-left: 0;
  }
  #catchimg1 .profile-bio {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
  #catchimg1 .profile-edit-btn,
  #catchimg1 .profile-bio,
  #catchimg1 .profile-stats {
    flex-basis: 100%;
  }
  #catchimg1 .profile-stats {
    order: 1;
    margin-top: 1.5rem;
  }
  #catchimg1 .profile-stats ul {
    display: flex;
    text-align: center;
    padding: 1.2rem 0;
    border-top: 0.1rem solid #dadada;
    border-bottom: 0.1rem solid #dadada;
  }
  #catchimg1 .profile-stats li {
    font-size: 1.4rem;
    flex: 1;
    margin: 0;
  }
  #catchimg1 .profile-stat-count {
    display: block;
  }
}
@keyframes loader {
  to {
    transform: rotate(360deg);
  }
}
@supports (display: grid) {
  #catchimg1 .profile {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(3, auto);
    grid-column-gap: 3rem;
    align-items: center;
  }
  #catchimg1 .profile-image {
    grid-row: 1/-1;
  }
  #catchimg1 .catch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-gap: 0rem;
  }
  #catchimg1 .profile-image,
  #catchimg1 .profile-user-settings,
  #catchimg1 .profile-stats,
  #catchimg1 .profile-bio,
  #catchimg1 .catch-item,
  #catchimg1 .catch {
    width: auto;
    margin: 0;
  }
  @media (max-width: 30rem) {
    #catchimg1 .profile {
      grid-template-columns: auto 1fr;
      grid-row-gap: 1.5rem;
    }
    #catchimg1 .profile-image {
      grid-row: 1/2;
    }
    #catchimg1 .profile-user-settings {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-gap: 1rem;
    }
    #catchimg1 .profile-edit-btn,
    #catchimg1 .profile-stats,
    #catchimg1 .profile-bio {
      grid-column: 1/-1;
    }
    #catchimg1 .profile-user-settings,
    #catchimg1 .profile-edit-btn,
    #catchimg1 .profile-settings-btn,
    #catchimg1 .profile-bio,
    #catchimg1 .profile-stats {
      margin: 0;
    }
  }
}

.graph_rank1 h3,
.graph_rank1 h6,
.graph_rank2 h3,
.graph_rank2 h6,
.graph_user h3,
.graph_user h6 {
  margin: 0;
  line-height: 1em;
}
.graph_rank1 h3,
.graph_rank2 h3,
.graph_user h3 {
  margin-bottom: 1em;
}
.graph_rank1 h6,
.graph_rank2 h6,
.graph_user h6 {
  padding: 0;
  justify-self: end;
  /* position: absolute; */
  /* top: 122px; */
  width: 88px;
  padding-right: 12px;
  text-align: right;
  /* float: left; */
  letter-spacing: -0.8px;
  line-height: 1.2em;
  font-family: "Roboto";
  font-size: 1.5em;
}
.graph_rank1 figure,
.graph_rank2 figure,
.graph_user figure {
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
}
.graph_rank1 .graphic,
.graph_rank2 .graphic,
.graph_user .graphic {
  padding-left: 30px;
}
.graph_rank1 .row,
.graph_rank2 .row,
.graph_user .row {
  margin-bottom: 0.5em;
  display: grid;
  grid-template: "a b c" 1fr/63px 14px 1fr;
}
.graph_rank1 .rank_ct,
.graph_rank2 .rank_ct,
.graph_user .rank_ct {
  line-height: 2em;
  width: 12px;
  text-align: center;
  height: 18px;
  color: white;
  background: black;
}
@keyframes expand {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand {
    from {
      width: 0%;
    }
    to {
      width: calc(100% - 75px);
    }
  }
}
@keyframes expand_vt {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand_vt {
    from {
      height: 0%;
    }
    to {
      height: calc(100% - 75px);
    }
  }
}
.graph_rank1 .chart,
.graph_rank2 .chart,
.graph_user .chart {
  overflow: hidden;
  width: 0%;
  animation: expand 1.5s ease forwards;
  -webkit-animation: expand 1.5s ease forwards;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  clear: both;
}
.graph_rank1 .text,
.graph_rank2 .text,
.graph_user .text {
  /* position: absolute; */
  position: relative;
  height: 16px;
  line-height: 1.6em;
  transform: translate(7px);
  /* background: #ffffff00; */
  letter-spacing: -1.2px;
  color: black;
  font-size: 1.2em;
  /* margin: auto; */
  font-weight: 700;
  overflow: hidden;
  font-family: "Roboto";
}
.graph_rank1 .row + .row .chart,
.graph_rank2 .row + .row .chart,
.graph_user .row + .row .chart {
  animation-delay: 0.2s;
}
.graph_rank1 .row + .row + .row .chart,
.graph_rank2 .row + .row + .row .chart,
.graph_user .row + .row + .row .chart {
  animation-delay: 0.4s;
}
.graph_rank1 .block,
.graph_rank2 .block,
.graph_user .block {
  display: block;
  height: 18px;
  width: 0;
  color: #fff;
  font-size: 0.75em;
  float: left;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity, 0.3s ease;
  cursor: pointer;
  margin-bottom: 3px;
}
.graph_rank1 .block:last-of-type,
.graph_rank2 .block:last-of-type,
.graph_user .block:last-of-type {
  border-radius: 0 0px 0px 0;
  -webkit-border-radius: 0 0px 0px 0;
  -moz-border-radius: 0 0px 0px 0;
  -ms-border-radius: 0 0px 0px 0;
  -o-border-radius: 0 0px 0px 0;
}
.graph_rank1 .block:nth-of-type(1),
.graph_rank1 .legend li:nth-of-type(1):before,
.graph_rank2 .block:nth-of-type(1),
.graph_rank2 .legend li:nth-of-type(1):before,
.graph_user .block:nth-of-type(1),
.graph_user .legend li:nth-of-type(1):before {
  background-color: #d9ecf2;
}
.graph_rank1 .block:nth-of-type(2),
.graph_rank1 .legend li:nth-of-type(2):before,
.graph_rank2 .block:nth-of-type(2),
.graph_rank2 .legend li:nth-of-type(2):before,
.graph_user .block:nth-of-type(2),
.graph_user .legend li:nth-of-type(2):before {
  background-color: #f56a79;
}
.graph_rank1 .block:nth-of-type(3),
.graph_rank1 .legend li:nth-of-type(3):before,
.graph_rank2 .block:nth-of-type(3),
.graph_rank2 .legend li:nth-of-type(3):before,
.graph_user .block:nth-of-type(3),
.graph_user .legend li:nth-of-type(3):before {
  background-color: #ff414d;
}
.graph_rank1 .block:nth-of-type(4),
.graph_rank1 .legend li:nth-of-type(4):before,
.graph_rank2 .block:nth-of-type(4),
.graph_rank2 .legend li:nth-of-type(4):before,
.graph_user .block:nth-of-type(4),
.graph_user .legend li:nth-of-type(4):before {
  background-color: #1aa6b7;
}
.graph_rank1 .block:nth-of-type(5),
.graph_rank1 .legend li:nth-of-type(5):before,
.graph_rank2 .block:nth-of-type(5),
.graph_rank2 .legend li:nth-of-type(5):before,
.graph_user .block:nth-of-type(5),
.graph_user .legend li:nth-of-type(5):before {
  background-color: #32e0c4;
}
.graph_rank1 .block:nth-of-type(6),
.graph_rank1 .legend li:nth-of-type(6):before,
.graph_rank2 .block:nth-of-type(6),
.graph_rank2 .legend li:nth-of-type(6):before,
.graph_user .block:nth-of-type(6),
.graph_user .legend li:nth-of-type(6):before {
  background-color: #0d7377;
}
.graph_rank1 .block:nth-of-type(7),
.graph_rank1 .legend li:nth-of-type(7):before,
.graph_rank2 .block:nth-of-type(7),
.graph_rank2 .legend li:nth-of-type(7):before,
.graph_user .block:nth-of-type(7),
.graph_user .legend li:nth-of-type(7):before {
  background-color: #45b224;
}
.graph_rank1 .block:nth-of-type(8),
.graph_rank1 .legend li:nth-of-type(8):before,
.graph_rank2 .block:nth-of-type(8),
.graph_rank2 .legend li:nth-of-type(8):before,
.graph_user .block:nth-of-type(8),
.graph_user .legend li:nth-of-type(8):before {
  background-color: #45B29D;
}
.graph_rank1 .block:nth-of-type(9),
.graph_rank1 .legend li:nth-of-type(9):before,
.graph_rank2 .block:nth-of-type(9),
.graph_rank2 .legend li:nth-of-type(9):before,
.graph_user .block:nth-of-type(9),
.graph_user .legend li:nth-of-type(9):before {
  background-color: #6a097d;
}
.graph_rank1 .block:hover,
.graph_rank2 .block:hover,
.graph_user .block:hover {
  opacity: 0.65;
}
.graph_rank1 .jvalue,
.graph_rank2 .jvalue,
.graph_user .jvalue {
  display: none;
  line-height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  font-family: roboto;
  letter-spacing: -1em;
  font-size: 0.5em;
}
.graph_rank1 .x-axis,
.graph_rank2 .x-axis,
.graph_user .x-axis {
  text-align: center;
  padding: 0.5em 0 2em;
}
.graph_rank1 .y-axis,
.graph_rank2 .y-axis,
.graph_user .y-axis {
  height: 20px;
  transform: translate(-32px, 170px) rotate(270deg);
  position: absolute;
  left: 0;
}
.graph_rank1 .legend,
.graph_rank2 .legend,
.graph_user .legend {
  margin: 0 auto;
  padding: 0;
  font-size: 0.9em;
}
.graph_rank1 .legend li,
.graph_rank2 .legend li,
.graph_user .legend li {
  display: inline-block;
  padding: 0.25em 1em;
  line-height: 1em;
}
.graph_rank1 .legend li:before,
.graph_rank2 .legend li:before,
.graph_user .legend li:before {
  content: "";
  margin-right: 0.5em;
  display: inline-block;
  width: 8px;
  height: 8px;
}
@media screen and (min-width: 768px) {
  .graph_rank1 h6,
  .graph_rank2 h6,
  .graph_user h6 {
    padding: 0;
    width: 75px;
    float: left;
    letter-spacing: -0.8px;
    line-height: 2.2em;
    font-size: 1.2em;
  }
  .graph_rank1 .block,
  .graph_rank2 .block,
  .graph_user .block {
    font-size: 1em;
  }
  .graph_rank1 .legend,
  .graph_rank2 .legend,
  .graph_user .legend {
    width: 50%;
  }
}

.row + .row .chart-vt {
  animation-delay: 0.2s;
}

.row + .row + .row .chart-vt {
  animation-delay: 0.4s;
}

.chart-vt {
  overflow: hidden;
  animation: expand_vt 1.5s ease forwards;
  -webkit-animation: expand_vt 1.5s ease forwards;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  padding-bottom: 1px;
}

.jvalue-vt {
  display: block;
  line-height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  font-family: roboto;
  font-size: 0.5em;
}

.block-vt {
  display: block;
  width: 100vw;
  color: #fff;
  font-size: 0.75em;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity, 0.3s ease;
  cursor: pointer;
}
.block-vt:last-of-type {
  border-radius: 0 0px 0px 0;
  -webkit-border-radius: 0 0px 0px 0;
  -moz-border-radius: 0 0px 0px 0;
  -ms-border-radius: 0 0px 0px 0;
  -o-border-radius: 0 0px 0px 0;
}

.block-vt:nth-of-type(1),
.legend-vt li:nth-of-type(1):before {
  background-color: #d9ecf2;
}

.block-vt:nth-of-type(2),
.legend-vt li:nth-of-type(2):before {
  background-color: #f56a79;
}

.block-vt:nth-of-type(3),
.legend-vt li:nth-of-type(3):before {
  background-color: #ff414d;
}

.block-vt:nth-of-type(4),
.legend-vt li:nth-of-type(4):before {
  background-color: #1aa6b7;
}

.block-vt:nth-of-type(5),
.legend-vt li:nth-of-type(5):before {
  background-color: #32e0c4;
}

.block-vt:nth-of-type(6),
.legend-vt li:nth-of-type(6):before {
  background-color: #0d7377;
}

.block-vt:nth-of-type(7),
.legend-vt li:nth-of-type(7):before {
  background-color: #45b224;
}

.block-vt:nth-of-type(8),
.legend-vt li:nth-of-type(8):before {
  background-color: #45B29D;
}

.block-vt:nth-of-type(9),
.legend-vt li:nth-of-type(9):before {
  background-color: #6a097d;
}

.block-vt:hover {
  opacity: 0.65;
}

.legend-vt {
  margin: 0 auto;
  padding: 0;
  font-size: 0.9em;
}

.legend-vt li {
  display: inline-block;
  padding: 0.25em 1em;
  line-height: 1em;
}

.legend-vt li:before {
  content: "";
  margin-right: 0.5em;
  display: inline-block;
  width: 8px;
  height: 8px;
}

.graph_rank h3,
.graph_rank h6 {
  margin: 0;
  line-height: 1em;
}
.graph_rank h3 {
  margin-bottom: 1em;
}
.graph_rank h6 {
  padding: 0;
  justify-self: end;
  /* position: absolute; */
  /* top: 122px; */
  width: 88px;
  padding-right: 12px;
  text-align: right;
  /* float: left; */
  letter-spacing: -0.8px;
  line-height: 1.2em;
  font-family: "Roboto";
  font-size: 1.5em;
}
.graph_rank figure {
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
}
.graph_rank .graphic {
  padding-left: 30px;
}
.graph_rank .row {
  margin-bottom: 0.5em;
  display: grid;
  grid-template: "a b c" 1fr/63px 14px 1fr;
}
.graph_rank .rank_ct {
  line-height: 2em;
  width: 12px;
  text-align: center;
  height: 18px;
  color: white;
  background: black;
}
@keyframes expand {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand {
    from {
      width: 0%;
    }
    to {
      width: calc(100% - 75px);
    }
  }
}
@keyframes expand_vt {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand_vt {
    from {
      height: 0%;
    }
    to {
      height: calc(100% - 75px);
    }
  }
}
.graph_rank .chart {
  overflow: hidden;
  width: 0%;
  animation: expand 1.5s ease forwards;
  -webkit-animation: expand 1.5s ease forwards;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  clear: both;
}
.graph_rank .text {
  border-bottom: 0.5px solid rgba(3, 134, 82, 0.231372549);
  position: relative;
  height: 22px;
  line-height: 23px;
  transform: translate(13px);
  /*background: #ffffff00;
  */
  letter-spacing: -0.8px;
  color: #4e4e4e;
  font-size: 1.1em;
  /*margin: auto;
  */
  font-weight: 700;
  overflow: hidden;
  font-family: nanumsquare;
  -webkit-transform: translate(13px);
  -moz-transform: translate(13px);
  -ms-transform: translate(13px);
  -o-transform: translate(13px);
}
.graph_rank .jupbag {
  position: absolute;
}
.graph_rank .row + .row .chart {
  animation-delay: 0.2s;
}
.graph_rank .row + .row + .row .chart {
  animation-delay: 0.4s;
}
.graph_rank .block {
  display: block;
  height: 22px;
  /*margin-left: 10px;
  */
  width: 0;
  max-width: calc(72vw - 110px);
  color: #fff;
  font-size: 0.75em;
  float: left;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity, 0.3s ease;
  cursor: pointer;
  transform: translateX(14px);
  -webkit-transform: translateX(14px);
  -moz-transform: translateX(14px);
  -ms-transform: translateX(14px);
  -o-transform: translateX(14px);
}
.graph_rank .block:last-of-type {
  border-radius: 0 0px 0px 0;
  -webkit-border-radius: 0 0px 0px 0;
  -moz-border-radius: 0 0px 0px 0;
  -ms-border-radius: 0 0px 0px 0;
  -o-border-radius: 0 0px 0px 0;
}
.graph_rank .block:nth-of-type(1),
.graph_rank .legend li:nth-of-type(1):before {
  background-color: #08d683;
}
.graph_rank .block:nth-of-type(2),
.graph_rank .legend li:nth-of-type(2):before {
  background-color: #016fc4;
}
.graph_rank .block:nth-of-type(3),
.graph_rank .legend li:nth-of-type(3):before {
  background-color: #1891c3;
}
.graph_rank .block:nth-of-type(4),
.graph_rank .legend li:nth-of-type(4):before {
  background-color: #3ac0da;
}
.graph_rank .block:nth-of-type(5),
.graph_rank .legend li:nth-of-type(5):before {
  background-color: #3dc6c3;
}
.graph_rank .block:nth-of-type(6),
.graph_rank .legend li:nth-of-type(6):before {
  background-color: #50e3c2;
}
.graph_rank .block:nth-of-type(7),
.graph_rank .legend li:nth-of-type(7):before {
  background-color: #50e390;
}
.graph_rank .block:nth-of-type(8),
.graph_rank .legend li:nth-of-type(8):before {
  background-color: #8ae350;
}
.graph_rank .block:nth-of-type(9),
.graph_rank .legend li:nth-of-type(9):before {
  background-color: #c7e350;
}
.graph_rank .block:hover {
  opacity: 0.65;
}
.graph_rank .jvalue {
  display: none;
  line-height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  font-family: roboto;
  letter-spacing: -1em;
  font-size: 0.5em;
}
.graph_rank .x-axis {
  text-align: center;
  padding: 0.5em 0 2em;
}
.graph_rank .y-axis {
  height: 20px;
  transform: translate(-32px, 170px) rotate(270deg);
  position: absolute;
  left: 0;
}
.graph_rank .legend {
  margin: 0 auto;
  padding: 0;
  font-size: 0.9em;
}
.graph_rank .legend li {
  display: inline-block;
  padding: 0.25em 1em;
  line-height: 1em;
}
.graph_rank .legend li:before {
  content: "";
  margin-right: 0.5em;
  display: inline-block;
  width: 8px;
  height: 8px;
}
@media screen and (min-width: 768px) {
  .graph_rank h6 {
    padding: 0;
    width: 75px;
    float: left;
    letter-spacing: -0.8px;
    line-height: 2.2em;
    font-size: 1.2em;
  }
  .graph_rank .block {
    font-size: 1em;
  }
  .graph_rank .legend {
    width: 50%;
  }
}

.row + .row .chart-vt {
  animation-delay: 0.2s;
}

.row + .row + .row .chart-vt {
  animation-delay: 0.4s;
}

.chart-vt {
  overflow: hidden;
  animation: expand_vt 1.5s ease forwards;
  -webkit-animation: expand_vt 1.5s ease forwards;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  padding-bottom: 1px;
}

.jvalue-vt {
  display: block;
  line-height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  font-family: roboto;
  font-size: 0.5em;
}

.block-vt {
  display: block;
  width: 100vw;
  color: #fff;
  font-size: 0.75em;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity, 0.3s ease;
  cursor: pointer;
}
.block-vt:last-of-type {
  border-radius: 0 0px 0px 0;
  -webkit-border-radius: 0 0px 0px 0;
  -moz-border-radius: 0 0px 0px 0;
  -ms-border-radius: 0 0px 0px 0;
  -o-border-radius: 0 0px 0px 0;
}

.block-vt:nth-of-type(1),
.legend-vt li:nth-of-type(1):before {
  background-color: #d9ecf2;
}

.block-vt:nth-of-type(2),
.legend-vt li:nth-of-type(2):before {
  background-color: #f56a79;
}

.block-vt:nth-of-type(3),
.legend-vt li:nth-of-type(3):before {
  background-color: #ff414d;
}

.block-vt:nth-of-type(4),
.legend-vt li:nth-of-type(4):before {
  background-color: #1aa6b7;
}

.block-vt:nth-of-type(5),
.legend-vt li:nth-of-type(5):before {
  background-color: #32e0c4;
}

.block-vt:nth-of-type(6),
.legend-vt li:nth-of-type(6):before {
  background-color: #0d7377;
}

.block-vt:nth-of-type(7),
.legend-vt li:nth-of-type(7):before {
  background-color: #45b224;
}

.block-vt:nth-of-type(8),
.legend-vt li:nth-of-type(8):before {
  background-color: #45B29D;
}

.block-vt:nth-of-type(9),
.legend-vt li:nth-of-type(9):before {
  background-color: #6a097d;
}

.block-vt:hover {
  opacity: 0.65;
}

.legend-vt {
  margin: 0 auto;
  padding: 0;
  font-size: 0.9em;
}

.legend-vt li {
  display: inline-block;
  padding: 0.25em 1em;
  line-height: 1em;
}

.legend-vt li:before {
  content: "";
  margin-right: 0.5em;
  display: inline-block;
  width: 8px;
  height: 8px;
}

.lev {
  position: absolute;
  letter-spacing: -0.6px;
}

.rank-container-grid-csv2 {
  display: grid;
  grid-template: "tab" 20px "a" 225px "u" 50px "b" 1fr/1fr;
  background: #ffffff;
  border-radius: 30px 30px 0 0;
}
.rank-container-grid-csv2 .g_tab {
  grid-area: tab;
}
.rank-container-grid-csv2 .toprank-ct-csv2 {
  grid-area: a;
  display: grid;
  grid-template: "r2 r1 r3" 1fr/1fr 1fr 1fr;
  grid-row-gap: 19px;
  grid-column-gap: 10px;
  margin-top: 6px;
  margin: 0px 20px 0 20px;
  height: 214px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}
.rank-container-grid-csv2 .toprank-ct-csv2 > :first-child {
  grid-area: r1;
}
.rank-container-grid-csv2 .toprank-ct-csv2 > :nth-child(2) {
  grid-area: r2;
  transform: translateY(17px);
  -webkit-transform: translateY(17px);
  -moz-transform: translateY(17px);
  -ms-transform: translateY(17px);
  -o-transform: translateY(17px);
}
.rank-container-grid-csv2 .toprank-ct-csv2 > :nth-child(3) {
  grid-area: r3;
  transform: translateY(17px);
  -webkit-transform: translateY(17px);
  -moz-transform: translateY(17px);
  -ms-transform: translateY(17px);
  -o-transform: translateY(17px);
}
.rank-container-grid-csv2 .userinfo-ct-csv2 {
  grid-area: u;
  display: grid;
  font-weight: bold;
  box-shadow: none;
  height: 70px;
  border-bottom: 1px solid gainsboro;
}
.rank-container-grid-csv2 .userinfo-ct-csv2 > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-container-grid-csv2 .rank-list-ct-csv2 {
  grid-area: b;
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 406px);
  overscroll-behavior: contain;
}
.rank-container-grid-csv2 .rank-list-ct-csv2 > :nth-child(odd) {
  background-color: none;
}
.rank-container-grid-csv2 .rank-list-ct-bar {
  grid-area: b;
  z-index: 2;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 421px);
  overscroll-behavior: contain;
}

.w14bb-list-2 {
  display: grid;
  grid-template: "a p b c d e " 1fr/24px 11px 38px 1fr 70px 6px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 13px;
  height: 50px;
  padding: 0px 20px;
  color: rgb(32, 32, 32);
  border-bottom: 0.5px solid gainsboro;
  border-radius: 0px;
}
.w14bb-list-2 > * {
  display: grid;
}
.w14bb-list-2 > .gfill {
  grid-row: 1/-1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 3/4;
  width: 100%;
  z-index: -1;
  height: 22px;
  background: #08d683;
}
.w14bb-list-2 > .ga {
  grid-area: a;
  justify-self: center;
  font-weight: 600;
  justify-items: center;
  align-items: center;
  /* font-size: small; */
}
.w14bb-list-2 > .gp {
  grid-area: p;
  justify-self: start;
}
.w14bb-list-2 > .gb {
  grid-area: b;
  justify-self: start;
  letter-spacing: -0.5px;
}
.w14bb-list-2 > .gc {
  grid-row: 1/-1;
  grid-column: 2/-1;
  justify-self: start;
  font-family: "Anton";
  font-weight: 100;
  width: 100%;
  background: rgba(255, 255, 255, 0.0705882353);
  border-radius: 25px 0 0 25px;
}
.w14bb-list-2 > .gd {
  grid-area: d;
  justify-self: end;
  font-family: "Anton";
  font-weight: 100;
}
.w14bb-list-2 > .gd2 {
  z-index: 2;
  grid-area: d;
  justify-self: end;
  font-family: "Anton";
  font-weight: 100;
}
.w14bb-list-2 > .gd3 {
  z-index: 3;
  grid-area: d;
  justify-self: right;
  font-family: "Barlow Semi Condensed";
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0px;
  color: #404040;
  font-size: 18px;
}

.uprofile_csv2 {
  z-index: 3;
  width: 30px;
  height: 30px;
  position: relative;
  top: 0px;
  left: 1px;
  /* background: #08d683; */
  /* border: 1px solid white; */
  border-radius: 50%;
  color: white;
  font-size: 15px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.graph_rank_csv2 h3,
.graph_rank_csv2 h6 {
  margin: 0;
  line-height: 1em;
}
.graph_rank_csv2 h3 {
  margin-bottom: 1em;
}
.graph_rank_csv2 h6 {
  padding: 0;
  justify-self: end;
  /* position: absolute; */
  /* top: 122px; */
  width: 88px;
  padding-right: 12px;
  text-align: right;
  /* float: left; */
  letter-spacing: -0.8px;
  line-height: 1.2em;
  font-family: "Roboto";
  font-size: 1.5em;
}
.graph_rank_csv2 figure {
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
}
.graph_rank_csv2 .graphic {
  padding-left: 30px;
}
.graph_rank_csv2 .row {
  margin-bottom: 0.5em;
  display: grid;
  grid-template: "a b c" 1fr/63px 14px 1fr;
}
.graph_rank_csv2 .rank_ct {
  line-height: 2em;
  width: 12px;
  text-align: center;
  height: 18px;
  color: white;
  background: black;
}
@keyframes expand {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand {
    from {
      width: 0%;
    }
    to {
      width: calc(100% - 75px);
    }
  }
}
@keyframes expand_vt {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand_vt {
    from {
      height: 0%;
    }
    to {
      height: calc(100% - 75px);
    }
  }
}
.graph_rank_csv2 .chart {
  overflow: hidden;
  width: 0%;
  animation: expand 1.5s ease forwards;
  -webkit-animation: expand 1.5s ease forwards;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  clear: both;
}
.graph_rank_csv2 .text {
  position: relative;
  height: 14px;
  line-height: 14px;
  transform: translate(13px);
  /*background: #ffffff00;
  */
  letter-spacing: -0.8px;
  color: #4e4e4e;
  font-size: 14px;
  /*margin: auto;
  */
  font-weight: 700;
  overflow: hidden;
  font-family: nanumsquare;
  -webkit-transform: translate(13px);
  -moz-transform: translate(13px);
  -ms-transform: translate(13px);
  -o-transform: translate(13px);
}
.graph_rank_csv2 .text span.spacing {
  width: 20px;
  display: inline-block;
  height: inherit;
  border-radius: 0 10px 10px 0;
}
.graph_rank_csv2 .jupbag {
  position: absolute;
}
.graph_rank_csv2 .row + .row .chart {
  animation-delay: 0.2s;
}
.graph_rank_csv2 .row + .row + .row .chart {
  animation-delay: 0.4s;
}
.graph_rank_csv2 .block {
  display: block;
  height: 14px;
  /*margin-left: 10px;
  */
  width: 0;
  max-width: calc(72vw - 110px);
  color: #fff;
  font-size: 0.75em;
  float: left;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity, 0.3s ease;
  cursor: pointer;
  transform: translateX(14px);
  -webkit-transform: translateX(14px);
  -moz-transform: translateX(14px);
  -ms-transform: translateX(14px);
  -o-transform: translateX(14px);
}
.graph_rank_csv2 .block:last-of-type {
  border-radius: 0 0px 0px 0;
  -webkit-border-radius: 0 0px 0px 0;
  -moz-border-radius: 0 0px 0px 0;
  -ms-border-radius: 0 0px 0px 0;
  -o-border-radius: 0 0px 0px 0;
}
.graph_rank_csv2 .block:hover {
  opacity: 0.65;
}
.graph_rank_csv2 .jvalue {
  display: none;
  line-height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  font-family: roboto;
  letter-spacing: -1em;
  font-size: 0.5em;
}
.graph_rank_csv2 .x-axis {
  text-align: center;
  padding: 0.5em 0 2em;
}
.graph_rank_csv2 .y-axis {
  height: 20px;
  transform: translate(-32px, 170px) rotate(270deg);
  position: absolute;
  left: 0;
}
.graph_rank_csv2 .legend {
  margin: 0 auto;
  padding: 0;
  font-size: 0.9em;
}
.graph_rank_csv2 .legend li {
  display: inline-block;
  padding: 0.25em 1em;
  line-height: 1em;
}
.graph_rank_csv2 .legend li:before {
  content: "";
  margin-right: 0.5em;
  display: inline-block;
  width: 8px;
  height: 8px;
}
@media screen and (min-width: 768px) {
  .graph_rank_csv2 h6 {
    padding: 0;
    width: 75px;
    float: left;
    letter-spacing: -0.8px;
    line-height: 2.2em;
    font-size: 1.2em;
  }
  .graph_rank_csv2 .block {
    font-size: 1em;
  }
  .graph_rank_csv2 .legend {
    width: 50%;
  }
}

.md_rankopt {
  display: none;
  position: fixed;
  z-index: 50;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 117, 68, 0.6392156863);
  /* Modal Content/Box */
  /* The Close Button */
}
.md_rankopt .md_rankopt_content {
  margin-top: 60px;
  width: auto;
  height: -moz-fit-content;
  height: fit-content;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 {
  display: grid;
  position: absolute;
  margin: 44px 0 0 0;
  background: rgba(62, 62, 62, 0.7215686275);
  font-family: "Noto Sans KR";
  width: 100px;
  right: 0;
  color: white;
  overflow: auto;
  z-index: 4;
  font-size: 1.5em;
  letter-spacing: -1px;
  z-index: 12;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 > * {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(169, 169, 169, 0.747);
  height: 40px;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 .tab-link-rank-1 {
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  line-height: 30px;
  display: grid;
  grid-template: "a b c d e" 1fr/1fr 1fr 1fr 1fr 30px;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 .tab-link-rank-1 > .ga {
  grid-area: a;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 .tab-link-rank-1 > .gb {
  grid-area: b;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 .tab-link-rank-1 > .gc {
  grid-area: c;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 .tab-link-rank-1 > .gd {
  grid-area: d;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 .tab-link-rank-1 > .ge {
  grid-area: e;
}
.md_rankopt .md_rankopt_content .toptitle-ct-1 .tab-link-rank-1.current {
  color: black;
}

.md_rankopt_open {
  text-align: right;
  right: 38px;
  position: absolute;
  font-size: 13px;
  color: #2b2b2b;
}
.md_rankopt_open:before {
  content: "\f080";
  font-family: FontAwesome;
  position: absolute;
  left: -18px;
  top: 0px;
  font-size: 12px;
  line-height: 17px;
}
.md_rankopt_open:after {
  position: absolute;
  font-family: FontAwesome;
  content: "\f105";
  /* height: 14px; */
  /* width: 16px; */
  font-size: 19px;
  right: -11px;
  top: -4px;
}
.md_rankopt_open:hover {
  opacity: 1;
  content: "\f107";
}

#md_rankopt_close {
  position: absolute;
  z-index: 50;
  width: 30px;
  height: 30px;
  top: 110px;
  /* left: 0; */
  right: 100px;
  /* margin: auto; */
  opacity: 1;
}
#md_rankopt_close:hover {
  opacity: 1;
}
#md_rankopt_close:before, #md_rankopt_close:after {
  position: absolute;
  /* left: 15px; */
  content: "";
  height: 30px;
  width: 2px;
  background-color: black;
}
#md_rankopt_close:before {
  transform: rotate(45deg);
}
#md_rankopt_close:after {
  transform: rotate(-45deg);
}

#md_alldata {
  display: none;
  position: fixed;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7098039216);
  /* Modal Content/Box */
  /* The Close Button */
}
#md_alldata #md_alldata_content {
  position: absolute;
  display: grid;
  grid-template: "a" 1fr "b" 1fr "c" 1fr "d" 1fr/1fr;
  background: white;
  margin: auto;
  right: 0;
  left: 0;
  top: 60px;
  width: 100%;
  height: 100%;
}
#md_alldata #md_alldata_content > .ga {
  grid-area: a;
}
#md_alldata #md_alldata_content > .gb {
  grid-area: b;
}
#md_alldata #md_alldata_content > .gc {
  grid-area: c;
}
#md_alldata #md_alldata_content > .gd {
  grid-area: d;
}

#md_alldata_close {
  z-index: 50;
  position: absolute;
  /* right: 39px; */
  top: 57px;
  /* left: 50px; */
  right: -15px;
  opacity: 1;
}
#md_alldata_close:hover {
  opacity: 1;
}
#md_alldata_close:before, #md_alldata_close:after {
  position: absolute;
  /* left: 15px; */
  content: "";
  height: 30px;
  width: 2px;
  background-color: rgb(255, 255, 255);
}
#md_alldata_close:before {
  transform: rotate(45deg);
}
#md_alldata_close:after {
  transform: rotate(-45deg);
}

.m_story_contents .menu-accordion {
  font-family: noto sans kr;
  letter-spacing: -1.7px;
  font-weight: 500;
  padding: 20px;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
  padding: 4rem 0 2rem 0;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.m_story_contents .menu-accordion-item {
  padding: 0.9rem 0.2rem;
  margin: 0;
  overflow: hidden;
  border: none;
  outline: none;
  border-bottom: 1.3px solid rgb(211.5, 211.5, 211.5);
}
.m_story_contents .menu-accordion-item .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  color: #303030;
  padding: 7px 0px 7px 33px;
}
.m_story_contents .menu-accordion-item .title .icon {
  position: absolute;
  display: inline;
  left: 26px;
  text-align: center;
  font-size: 15px;
}
.m_story_contents .menu-accordion-item .title i.fas {
  font-size: 0.9rem;
  color: #303030;
  transform: translateX(-50%) rotate(0);
  transition: transform 0.15s ease;
}
.m_story_contents .menu-accordion-item .paragraph {
  transition: 1s;
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: inherit;
  color: #303030;
  display: none;
  padding: 1rem 0;
}
.m_story_contents .menu-accordion-item.active .title i.fas {
  color: #1a9de1;
  transform: translateX(-50%) rotate(180deg);
  -webkit-transform: translateX(-50%) rotate(180deg);
  -moz-transform: translateX(-50%) rotate(180deg);
  -ms-transform: translateX(-50%) rotate(180deg);
  -o-transform: translateX(-50%) rotate(180deg);
}
.m_story_contents .menu-accordion-item.active .paragraph {
  display: block;
}

@media only screen and (max-width: 768px) {
  .m_story_contents .menu-accordion {
    padding: 5px 20px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    transition: 0.3s;
    font-size: 20px;
  }
}
.p-abs {
  position: absolute;
}

.p-rel {
  position: relative;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-warp {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.line-height-2 {
  line-height: 2;
}

.line-height-1-8 {
  line-height: 1.8;
}

.line-height-1-7 {
  line-height: 1.7;
}

.line-height-1-6 {
  line-height: 1.6;
}

.line-height-1-5 {
  line-height: 1.5;
}

.line-height-1-2 {
  line-height: 1.2;
}

.pre-line {
  white-space: pre-line;
}

.pre-wrap {
  white-space: pre-wrap;
}

.no-wrap {
  white-space: nowrap;
}

.word-break-all {
  word-break: break-all;
}

.word-break-words {
  word-break: break-word;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.visibility-hidden {
  visibility: hidden;
}

.h-100vh {
  height: calc(var(--vh, 1vh) * 100);
}

.border-0 {
  border-width: 0px;
}

.border-none {
  border: none !important;
}

.border-1 {
  border: 1px solid black !important;
  border-width: 1px;
}

.border-2 {
  border: 2px solid black !important;
  border-width: 2px;
}

.b-top-1 {
  border-top: 1px solid black !important;
}

.border-gray-120 {
  border: 1px solid var(--cl-text-b-120) !important;
  border-width: 1px;
}

.border-white-1 {
  border: 1px solid white !important;
  border-width: 1px;
}

.border-white-2 {
  border: 2px solid white !important;
  border-width: 2px;
}

.border-gray-180 {
  border: 1px solid var(--cl-text-b-180) !important;
  border-width: 1px;
}

.border-skeleton-1 {
  border: 1px solid rgb(235, 235, 235) !important;
  border-width: 1px;
}

.b-top-180 {
  border-top: 1px solid var(--cl-text-b-180) !important;
}

.b-top-skeleton-1,
.b-top-235 {
  border-top: 1px solid rgb(235, 235, 235) !important;
}

.b-bottom-black-1 {
  border-bottom: 1px solid black !important;
}

.b-bottom-245 {
  border-bottom: 1px solid var(--cl-text-b-245) !important;
}

.b-bottom-235,
.b-bottom-skeleton-1 {
  border-bottom: 1px solid rgb(235, 235, 235) !important;
}

.b-bottom-230 {
  border-bottom: 1px solid var(--cl-text-b-230) !important;
}

.b-bottom-200 {
  border-bottom: 1px solid var(--cl-text-b-200) !important;
}

.b-bottom-180,
.b-bottom-gray-1 {
  border-bottom: 1px solid var(--cl-text-b-180) !important;
}

.b-bottom-150 {
  border-bottom: 1px solid var(--cl-text-b-150) !important;
}

.b-bottom-120 {
  border-bottom: 1px solid var(--cl-text-b-120) !important;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-green-500 {
  color: rgb(16, 185, 129);
}

.text-gray-500 {
  color: rgb(107, 114, 128);
}

.bg-white {
  background: white !important;
}

.bg-gray-50 {
  background-color: rgb(249, 250, 251);
}

.bg-gray-100 {
  background-color: rgb(243, 244, 246);
}

.bg-gray-200 {
  background-color: rgb(229, 231, 235);
}

.bg-gray-300 {
  background-color: rgb(209, 213, 219);
}

.bg-gray-400 {
  background-color: rgb(156, 163, 175);
}

.bg-gray-500 {
  background-color: rgb(107, 114, 128);
}

.bg-gray-600 {
  background-color: rgb(75, 85, 99);
}

.bg-gray-700 {
  background-color: rgb(55, 65, 81);
}

.bg-gray-800 {
  background-color: rgb(31, 41, 55);
}

.bg-gray-900 {
  background-color: rgb(17, 24, 39);
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-min {
  width: -moz-min-content;
  width: min-content;
}

.h-min {
  height: -moz-min-content;
  height: min-content;
}

.h-max {
  height: -moz-max-content;
  height: max-content;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.w-auto {
  width: auto;
}

.w-screen {
  width: calc(var(--vw, 1vw) * 100);
}

.h-screen {
  height: calc(var(--vh, 1vh) * 100);
}

.rounded-sm {
  border-radius: 0.125rem !important;
  -webkit-border-radius: 0.125rem !important;
  -moz-border-radius: 0.125rem !important;
  -ms-border-radius: 0.125rem !important;
  -o-border-radius: 0.125rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
  -webkit-border-radius: 0.25rem !important;
  -moz-border-radius: 0.25rem !important;
  -ms-border-radius: 0.25rem !important;
  -o-border-radius: 0.25rem !important;
}

.rounded-md {
  border-radius: 0.375rem !important;
  -webkit-border-radius: 0.375rem !important;
  -moz-border-radius: 0.375rem !important;
  -ms-border-radius: 0.375rem !important;
  -o-border-radius: 0.375rem !important;
}

.rounded-lg {
  border-radius: 0.5rem !important;
  -webkit-border-radius: 0.5rem !important;
  -moz-border-radius: 0.5rem !important;
  -ms-border-radius: 0.5rem !important;
  -o-border-radius: 0.5rem !important;
}

.rounded-xl {
  border-radius: 0.75rem !important;
  -webkit-border-radius: 0.75rem !important;
  -moz-border-radius: 0.75rem !important;
  -ms-border-radius: 0.75rem !important;
  -o-border-radius: 0.75rem !important;
}

.rounded-2xl {
  border-radius: 1rem !important;
  -webkit-border-radius: 1rem !important;
  -moz-border-radius: 1rem !important;
  -ms-border-radius: 1rem !important;
  -o-border-radius: 1rem !important;
}

.rounded-3xl {
  border-radius: 1.5rem !important;
  -webkit-border-radius: 1.5rem !important;
  -moz-border-radius: 1.5rem !important;
  -ms-border-radius: 1.5rem !important;
  -o-border-radius: 1.5rem !important;
}

.rounded-full {
  border-radius: 9999px !important;
  -webkit-border-radius: 9999px !important;
  -moz-border-radius: 9999px !important;
  -ms-border-radius: 9999px !important;
  -o-border-radius: 9999px !important;
}

.rounded-full-border {
  border: 1px solid rgba(220, 220, 220, 0.6784313725) !important;
  border-radius: 9999px !important;
  -webkit-border-radius: 9999px !important;
  -moz-border-radius: 9999px !important;
  -ms-border-radius: 9999px !important;
  -o-border-radius: 9999px !important;
}

.rounded-record {
  border: 1px solid rgba(220, 220, 220, 0.568627451);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

.rounded-none {
  border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  -o-border-radius: 0px !important;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 2.1rem;
  line-height: 1.5;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 1.5;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1.5;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1.5;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 4.5rem;
}

.text-underline {
  text-decoration: underline;
}

.button-up,
.button-down {
  position: relative;
  padding: 5px;
  margin: 30px auto;
  background: #000;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: all 0.2s linear;
}

.button-down:hover {
  transform: translate3d(0, 10px, 0);
}

.button-up:hover {
  transform: translate3d(0, -10px, 0);
}

.button-up::after,
.button-down::after {
  content: "";
  position: absolute;
  left: 17px;
  z-index: 11;
  display: block;
  width: 25px;
  height: 25px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.button-up::after {
  top: 20px;
  transform: rotate(45deg);
}

.button-down::after {
  top: 10px;
  transform: rotate(225deg);
}

.arrow-right,
.arrow-left,
.long-arrow-right,
.long-arrow-left {
  display: block;
  margin: 30px auto;
  width: 25px;
  height: 25px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

.arrow-right,
.long-arrow-right {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
}

.arrow-left,
.long-arrow-left {
  transform: rotate(-45deg);
}

.long-arrow-right::after,
.long-arrow-left::after {
  content: "";
  display: block;
  width: 2px;
  height: 45px;
  background-color: black;
  transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}

.triangle-left,
.triangle-right,
.triangle-top,
.triangle-bottom {
  width: 0;
  height: 0;
  margin: 30px auto;
}

.triangle-left,
.triangle-right {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

.triangle-top,
.triangle-bottom {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
}

.triangle-right {
  border-left: 30px solid black;
}

.triangle-left {
  border-right: 30px solid black;
}

.triangle-top {
  border-bottom: 30px solid black;
}

.triangle-bottom {
  border-top: 30px solid black;
}

/* 
Animated skeleton screen using CSS.
[css3] :empty 가상 클래스
:empty 가상 클래스는 자식이 전혀 없는 요소에 적용하는 선택자입니다.
출처:  [지구별 안내서]
Create shapes using gradients that simulate solids.

Use `:empty` pseduo-class to show skeleton screen background only while container has no content (ex: for the "loading" state). When content is added to the container element, the pseudo-class selector won't match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine2 effect.
*/
.skloader_ploglist2 {
  margin: auto;
  width: 90%;
  /*changeheighttoseerepeat-ybehavior*/
  background-image: radial-gradient(circle 30px at 50px 50px, lightgray 99%, transparent 0), linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(lightgray 20px, transparent 0), linear-gradient(lightgray 20px, transparent 0);
  background-repeat: repeat-y;
  background-size: 100px 80px, 50px 80px, 150px 80px, 350px 80px, 300px 80px, 250px 80px;
  background-position: 0 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
  animation: shine2 1s infinite;
  -webkit-animation: shine2 1s infinite;
}

@keyframes shine2 {
  to {
    background-position: 0 0, 100% 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
  }
}
.skloader_ploglist:empty {
  margin: auto;
  width: 100%;
  /*changeheighttoseerepeat-ybehavior*/
  background-image: radial-gradient(circle 27px at 59px 59px, lightgray 99%, transparent 0), linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%), linear-gradient(lightgray 14px, transparent 0), linear-gradient(lightgray 14px, transparent 0);
  background-repeat: repeat-y;
  background-size: 100px 110px, 50px 78px, 189px 55px, 176px 110px, 298px 80px, 250px 80px;
  background-position: 0px 0px, 0 0px, 111px 24px, 111px 52px, 120px 84px, 120px 119px;
  animation: shine 1s infinite;
  -webkit-animation: shine 1s infinite;
}

@keyframes shine {
  to {
    background-position: 0px 0px, 100% 0px, 111px 24px, 111px 52px, 120px 84px, 120px 119px;
  }
}
@keyframes skeleton-gradient {
  0% {
    background-color: rgba(165, 165, 165, 0.1);
  }
  50% {
    background-color: rgba(165, 165, 165, 0.3);
  }
  100% {
    background-color: rgba(165, 165, 165, 0.1);
  }
}
/*해당되는 컴포넌트에 적용*/
.skload_item:empty {
  animation: skeleton-gradient 1.8s infinite ease-in-out;
  -webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
}

.sklo1:empty {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  animation: skeleton-gradient 1.8s infinite ease-in-out;
  -webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
}

/* ------------------------------ 
 * itacity v6 
 --------------------------------*/
/* 스켈레톤 로더 스타일 */
.ita-skeleton-loader {
  background: #f0f0f0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-v6 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 10px;
  -webkit-animation: loading-v6 1.5s infinite;
}

/* 애니메이션 효과 */
@keyframes loading-v6 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skt-container {
  width: 100%;
  height: 100%;
}

.skt {
  --lines: 1;
  --l-h: 20px;
  --l-gap: 10px;
  --g-gap: 15px;
  --c-w: 300px;
  --c-p: 10px;
  --bg:#ececec;
  --c-bg: transparent;
  --shine: rgba(255,255,255, 0.3);
  --t: 2s;
  --c-s: 40px;
  --c-pos: center;
  --rect-h: 80px;
  padding: var(--c-p);
  width: var(--c-w);
  position: relative;
  background: var(--c-bg);
  box-sizing: border-box !important;
  --ln:linear-gradient(#000, #000);
  --circle: radial-gradient(calc(var(--c-s) / 2) calc(var(--c-s) / 2) at 50% 50%,#000 98%,transparent 100%);
}
.skt::before, .skt::after {
  content: "";
  position: absolute;
  left: var(--c-p);
  top: var(--c-p);
  width: calc(100% - var(--c-p) * 2);
  height: calc(100% - var(--c-p) * 2);
}
.skt::before {
  background: var(--bg);
}
.skt::after {
  background: linear-gradient(to right, transparent 0 20%, var(--shine), transparent 80% 100%) -300% 0/80% 100% no-repeat;
  animation: s var(--t) linear infinite;
}
@keyframes s {
  to {
    background-position: 600% 0;
  }
}
.skt.no-animate::after {
  animation: none;
}
.skt.skt-line {
  height: calc(var(--l-h) * var(--lines) + var(--l-gap) * (var(--lines) - 1) + var(--c-p) * 2);
}
.skt.skt-line::before, .skt.skt-line::after {
  --m: linear-gradient(#000 0 var(--l-h),transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 0/100% calc(var(--l-h) + var(--l-gap));
  -webkit-mask: var(--m);
  mask: var(--m);
}
.skt.skt-circle {
  width: calc(var(--c-s) + var(--c-p) * 2);
  height: calc(var(--c-s) + var(--c-p) * 2);
}
.skt.skt-circle::before, .skt.skt-circle::after {
  --m: var(--circle) 0 50% / var(--c-s) var(--c-s) no-repeat;
  -webkit-mask: var(--m);
  mask: var(--m);
}
.skt.skt-circle-line {
  height: calc(var(--c-s) + var(--c-p) * 2);
}
.skt.skt-circle-line::before, .skt.skt-circle-line::after {
  --m: var(--circle) 0 50% / calc(var(--c-s)) calc(var(--c-s)),
          var(--ln) calc(var(--c-s) + var(--g-gap)) var(--c-pos)/100% var(--l-h);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skt.skt-circle-multi-line {
  height: calc(var(--l-h) * var(--lines) + var(--l-gap) * (var(--lines) - 1) + var(--c-p) * 2);
}
.skt.skt-circle-multi-line::before, .skt.skt-circle-multi-line::after {
  --m: var(--circle) 0 var(--c-pos) / calc(var(--c-s)) calc(var(--c-s)) no-repeat,
          linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) calc(var(--c-s) + var(--g-gap)) 0%/100% calc(var(--l-h) + var(--l-gap)) no-repeat repeat;
  -webkit-mask: var(--m);
  mask: var(--m);
}
.skt.skt-circle-multi-line.adapt-to-circle {
  height: calc(var(--c-s) + var(--c-p) * 2);
}
.skt.skt-circle-multi-line.adapt-to-circle::before, .skt.skt-circle-multi-line.adapt-to-circle::after {
  -webkit-mask-repeat: no-repeat, no-repeat space;
  mask-repeat: no-repeat, no-repeat space;
}
.skt.skt-rect {
  height: calc((var(--l-h) * var(--lines) + var(--l-gap) * (var(--lines) - 1) + var(--g-gap)) * clamp(0, var(--lines), 1) + var(--rect-h) + var(--c-p) * 2);
}
.skt.skt-rect::before, .skt.skt-rect::after {
  --m: var(--ln) 0 0/100% var(--rect-h) no-repeat,
          repeating-linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--rect-h) + var(--g-gap)) / 100% calc(100% - (var(--rect-h) + var(--g-gap))) no-repeat;
  -webkit-mask: var(--m);
  mask: var(--m);
}
.skt.skt-chart-line {
  --chart-btm: 40px;
  --chart-h: 200px;
  height: calc(var(--chart-h) + var(--c-p) * 2);
}
.skt.skt-chart-line::before, .skt.skt-chart-line::after {
  --m: var(--ln) 0 100% / 100% var(--chart-btm) no-repeat,
          linear-gradient(to left bottom,transparent 0 49.5%, #000 50% 100%) left 0 bottom var(--chart-btm) / calc((var(--c-w) / 10) * 2) calc(var(--chart-h) / 2) no-repeat,
          linear-gradient(to right bottom,transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 2) bottom var(--chart-btm) / calc((var(--c-w) / 10) * 3) calc(var(--chart-h) - var(--chart-btm)) no-repeat,
          linear-gradient(to left bottom,transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 5) bottom var(--chart-btm) / calc((var(--c-w) / 10) * 3) calc(var(--chart-h) - var(--chart-btm)) no-repeat,
          linear-gradient(to right bottom,transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 8) bottom var(--chart-btm) / calc((var(--c-w) / 10) * 2.5) calc(var(--chart-h) / 2.5) no-repeat;
  -webkit-mask: var(--m);
  mask: var(--m);
}
.skt.skt-chart-columns {
  --cols: 5;
  --col-w: 25px;
  --col-gap: 25px;
  --o-l: calc(var(--col-w) + var(--col-gap));
  --chart-h: 200px;
  height: calc(var(--chart-h) + var(--c-p) * 2);
  width: calc((var(--cols) - 1) * var(--o-l) + var(--col-w) + var(--c-p) * 2);
}
.skt.skt-chart-columns::before, .skt.skt-chart-columns::after {
  --m: var(--ln) 0 100% / var(--col-w) calc((var(--chart-h) / 10) * 4),
          var(--ln) calc(var(--o-l)) 100% / var(--col-w) calc((var(--chart-h) / 10) * 3),
          var(--ln) calc(var(--o-l) * 2) 100% / var(--col-w) calc((var(--chart-h) / 10) * 6),
          var(--ln) calc(var(--o-l) * 3) 100% / var(--col-w) calc((var(--chart-h) / 10) * 8),
          var(--ln) calc(var(--o-l) * 4) 100% / var(--col-w) calc((var(--chart-h) / 10) * 2),
          var(--ln) calc(var(--o-l) * 5) 100% / var(--col-w) calc((var(--chart-h) / 10) * 5),
          var(--ln) calc(var(--o-l) * 6) 100% / var(--col-w) calc((var(--chart-h) / 10) * 4),
          var(--ln) calc(var(--o-l) * 7) 100% / var(--col-w) calc((var(--chart-h) / 10) * 9),
          var(--ln) calc(var(--o-l) * 8) 100% / var(--col-w) calc((var(--chart-h) / 10) * 2),
          var(--ln) calc(var(--o-l) * 9) 100% / var(--col-w) calc((var(--chart-h) / 10) * 7);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skt.skt-card-1 {
  --card-h:150px;
  --g-gap: 30px;
  --c-s: 30px;
  --c-w-o:(var(--c-w) - var(--c-p) * 2);
  height: calc(var(--card-h) + var(--c-p) * 2);
  --r-x:calc((var(--c-w-o) / 4) + var(--g-gap));
  --l-x:calc((var(--c-w-o) / 4) + var(--g-gap) + var(--c-s) + var(--l-gap));
  --l-w: calc((var(--c-w-o) - (var(--c-w-o) / 4 + (var(--g-gap) * 2) + (var(--l-gap) * 2) + var(--c-s) * 2)) / 2);
}
.skt.skt-card-1::before, .skt.skt-card-1::after {
  --m: var(--ln) 0 0 / calc(var(--c-w-o) / 4) var(--card-h),
          var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) 0 / calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 5),
          var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) calc(var(--card-h) / 3) / calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 8),
          var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) calc(var(--card-h) / 1.8) / calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 8),
          var(--circle) var(--r-x) 100% / calc(var(--c-s)) calc(var(--c-s)),
          var(--ln) left var(--l-x) bottom calc((var(--c-s) - (var(--card-h) / 8)) / 2) / var(--l-w) calc(var(--card-h) / 8),
          var(--circle) calc(var(--l-x) + var(--l-w) + var(--g-gap)) 100% / calc(var(--c-s)) calc(var(--c-s)),
          var(--ln) left calc(var(--l-x) + var(--l-w) + var(--c-s) + var(--g-gap) + var(--l-gap)) bottom calc((var(--c-s) - (var(--card-h) / 8)) / 2) / var(--l-w) calc(var(--card-h) / 8);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skt.skt-card-2 {
  --f-l-w: 90%;
  --f-l-h: 25px;
  --f-l-c: var(--bg);
  --s-l-w: 70%;
  --s-l-h: 20px;
  --s-l-c: var(--bg);
  --s-l-m-t: 15px;
  height: calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap) + var(--l-h) * var(--lines) + var(--l-gap) * (var(--lines) - 1) + var(--c-p) * 2);
}
.skt.skt-card-2::before, .skt.skt-card-2::after {
  --top: calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap));
  --m: var(--ln) 0 0/var(--f-l-w) var(--f-l-h),
          var(--ln) 0 calc(var(--f-l-h) + var(--s-l-m-t)) / var(--s-l-w) var(--s-l-h),
          var(--ln) 0 var(--top) / 100% var(--l-h),
          var(--ln) 0 calc(var(--top) + (var(--l-h) + var(--l-gap))) / 100% var(--l-h),
          var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 2)) / 80% var(--l-h),
          var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 3)) / 100% var(--l-h),
          var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 4)) / 100% var(--l-h),
          var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 5)) / 80% var(--l-h);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skt.skt-card-2::before {
  background: linear-gradient(var(--f-l-c), var(--f-l-c)) 0 0/var(--f-l-w) var(--f-l-h) no-repeat, linear-gradient(var(--s-l-c), var(--s-l-c)) 0 calc(var(--f-l-h) + var(--s-l-m-t))/var(--s-l-w) var(--s-l-h) no-repeat, var(--bg);
}
.skt.skt-card-3 {
  --c-w: 100%;
  --c-s: 50px;
  --g-gap: 30px;
  --f-l-w: 200px;
  --f-l-h: 20px;
  --s-l-w: 130px;
  --s-l-h: 10px;
  --l-h: 10px;
  --lines: 3;
  --s-l-m-t: 10px;
  height: calc(var(--l-h) * var(--lines) + var(--l-gap) * (var(--lines) - 1) + var(--g-gap) + var(--c-s) + var(--f-l-h) + var(--s-l-h));
}
.skt.skt-card-3::before, .skt.skt-card-3::after {
  --m: var(--circle) 0 0/var(--c-s) var(--c-s),
      var(--ln) calc(var(--c-s) + var(--g-gap)) 0 / var(--f-l-w) var(--f-l-h),
      var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--f-l-h) + var(--s-l-m-t)) / var(--s-l-w) var(--s-l-h),
      repeating-linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--c-s) + var(--g-gap)) / 100% 100%;
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skt.skt-list {
  --bullet-ratio: 1.4;
  --b: calc(var(--l-h) * var(--bullet-ratio));
  --p: calc((var(--b) - var(--l-h)) / 2);
  height: calc(var(--b) + (var(--b) + var(--l-gap)) * (var(--lines) - 1) + var(--c-p) * 2);
}
.skt.skt-list::before, .skt.skt-list::after {
  --m: repeating-linear-gradient(#000 0 var(--b), transparent var(--b) calc(var(--b) + var(--l-gap))) 0 0 / var(--b) 100%,
       repeating-linear-gradient(transparent 0 var(--p), #000 var(--p) calc(var(--p) + var(--l-h)), transparent calc(var(--p) + var(--l-h)) calc(calc(var(--p) * 2 + var(--l-gap) + var(--l-h)))) calc(var(--b) + var(--g-gap)) 0 / calc(var(--c-w) - (var(--b) + var(--g-gap))) 100%;
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skt.skt-youtube {
  --g-gap: 10px;
  --rect-h: 150px;
  --c-s: 36px;
  height: calc(var(--rect-h) + var(--g-gap) + var(--l-gap) + var(--l-h) * 2 + var(--c-p) * 2);
}
.skt.skt-youtube::before, .skt.skt-youtube::after {
  --m: var(--ln) 0 0 / 100% var(--rect-h),
        var(--circle) 0 calc(var(--rect-h) + var(--g-gap)) / var(--c-s) var(--c-s),
        var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap)) / calc(((var(--c-w) - var(--c-p) * 2) - (var(--c-s) + var(--g-gap))) * 0.85) var(--l-h),
        var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap) + var(--l-h) + var(--l-gap)) / calc(((var(--c-w) - var(--c-p) * 2) - (var(--c-s) + var(--g-gap))) * 0.6) var(--l-h);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skt.skt-image {
  --i-w: 250px;
  height: var(--i-w);
  width: var(--i-w);
  --cw: calc((var(--i-w) - var(--c-p) * 2) / 12);
  --ch: calc(var(--i-w) / 12);
  --c-s: calc(var(--i-w) / 4);
}
.skt.skt-image::before, .skt.skt-image::after {
  --m: linear-gradient(to left top,#000 50%, transparent 50.5%) 0 100%/calc(var(--cw) * 2) calc(var(--ch) * 4),
       linear-gradient(to right top,#000 50%, transparent 50.5%) calc(var(--cw) * 2) 100%/calc(var(--cw) * 2) calc(var(--ch) * 4),
       linear-gradient(to left top,#000 50%, transparent 50.5%) calc(var(--cw) * 4) 100%/calc(var(--cw) * 4) calc(var(--ch) * 6),
       linear-gradient(to right top,#000 50%, transparent 50.5%) calc(var(--cw) * 8) 100%/calc(var(--cw) * 4) calc(var(--ch) * 6),
       var(--circle) left calc(var(--i-w) / 8) top calc(var(--i-w) / 8) / var(--c-s) var(--c-s);
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.rank_pageLoaderModal {
  display: none;
  width: 100%;
  background: white;
  z-index: 100;
  position: absolute;
  top: 110px;
  bottom: 55px;
}

.btn_ita {
  transition: color 0.7s;
  cursor: pointer;
}
.btn_ita.button-click, .btn_ita:focus {
  outline: none;
  color: #d1d1d1;
}
.btn_ita:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0;
}

/* effect a */
.button-effect-a:after {
  background: rgba(0, 124, 66, 0.1);
}
.button-effect-a.button-click:after {
  animation: anim-effect-a 0.3s forwards;
  -webkit-animation: anim-effect-a 0.3s forwards;
}

@keyframes anim-effect-a {
  0% {
    -webkit-transform: scale3d(0.3, 0.3, 1);
  }
  25%, 50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
  }
}
.button-effect-b:after {
  background: rgba(0, 124, 66, 0.1);
}
.button-effect-b.click_ef1:after {
  animation: anim-effect-a 0.3s forwards;
  -webkit-animation: anim-effect-a 0.3s forwards;
}

.click_ef1 {
  cursor: pointer;
  transition: color 0.7s;
  -webkit-transition: color 0.7s;
  -moz-transition: color 0.7s;
  -ms-transition: color 0.7s;
  -o-transition: color 0.7s;
}
.click_ef1:after {
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0;
}
.click_ef1:active {
  opacity: 1;
}

.top1_OpenBtn {
  position: relative;
  width: 15px;
  height: 40px;
  top: 0px;
  right: 4px;
  transition-duration: 0.5s;
}
.top1_OpenBtn .icon {
  transition-duration: 0.5s;
  position: absolute;
  height: 4px;
  width: 4px;
  top: 20px;
  right: 6px;
  background-color: #016537;
  border-radius: 4px;
}
.top1_OpenBtn .icon:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: inherit;
  content: "";
  top: -7px;
  border-radius: 4px;
}
.top1_OpenBtn .icon:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: inherit;
  content: "";
  top: 7px;
  border-radius: 4px;
}
.top1_OpenBtn.open .icon {
  transition-duration: 0.5s;
  background: transparent;
}
.top1_OpenBtn.open .icon:before {
  transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -moz-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -ms-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -o-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
}
.top1_OpenBtn.open .icon:after {
  transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -moz-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -ms-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -o-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
}
.top1_OpenBtn:hover {
  background: #fff;
  cursor: pointer;
}

.previousBtn {
  position: relative;
  width: 40px;
  height: 40px;
  top: 0px;
  right: 0px;
  transition-duration: 0.5s;
}
.previousBtn .icon {
  transition-duration: 0.5s;
  position: absolute;
  height: 2px;
  width: 18px;
  top: 20px;
  right: 6px;
  background-color: #016537;
  border-radius: 2px;
  right: 15px;
  background-color: black;
}
.previousBtn .icon:before {
  transition-duration: 0.5s;
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: inherit;
  content: "";
  top: -4px;
  border-radius: 2px;
  transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -moz-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -ms-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  -o-transform: rotateZ(45deg) scaleX(1.25) translate(5.5px, 5.5px);
  right: 11px;
  background-color: inherit;
}
.previousBtn .icon:after {
  transition-duration: 0.5s;
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: inherit;
  content: "";
  top: 0px;
  border-radius: 2px;
  transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -moz-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -ms-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  -o-transform: rotateZ(-45deg) scaleX(1.25) translate(2.5px, -2.5px);
  right: 11px;
  background-color: inherit;
}
.previousBtn.white .icon {
  background-color: white;
}
.previousBtn.white .icon:before {
  background-color: white;
}
.previousBtn.white .icon:after {
  background-color: white;
}
.previousBtn:hover {
  cursor: pointer;
}

.bottom_OpenBtn {
  width: calc(12px + 10vw);
  height: calc(12px + 10vw);
  background: url(../public/img/globe_navigation.svg) no-repeat center;
  background-size: cover;
  border-radius: 50%;
}

.KVnetwork_find_box {
  position: relative;
  padding: 8px 0;
  color: #00502b;
}

.KVnetFind-icon {
  position: absolute;
  left: 4vw;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  border-radius: 50%;
}

.KVnetfindInputBox {
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  justify-content: center;
  margin: 20px auto;
  display: flex;
  align-items: center;
  position: relative;
}
.KVnetfindInputBox .allKVnetFind {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-4xl);
  border-radius: 50%;
}

input#KVnetfindInput {
  border-radius: 50px;
  width: 90%;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
}
input#KVnetfindInput::-moz-placeholder {
  color: black;
}
input#KVnetfindInput::placeholder {
  color: black;
}
input#KVnetfindInput:focus {
  outline: none;
}
input#KVnetfindInput:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
input#KVnetfindInput:-webkit-autofill, input#KVnetfindInput:-webkit-autofill:hover, input#KVnetfindInput:-webkit-autofill:focus, input#KVnetfindInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

input#KVnetFind_input_SignPanel {
  border-radius: 10px;
  color: #00502b;
  width: 100%;
  height: 40px;
  border: none;
  background: rgb(245, 245, 245);
  padding: 0 10px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  font-weight: 500;
  position: relative;
  cursor: pointer;
}
input#KVnetFind_input_SignPanel::-moz-placeholder {
  color: #00502b !important;
}
input#KVnetFind_input_SignPanel::placeholder {
  color: #00502b !important;
}
input#KVnetFind_input_SignPanel:focus {
  outline: none;
}
input#KVnetFind_input_SignPanel:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: black !important;
}
input#KVnetFind_input_SignPanel:-webkit-autofill, input#KVnetFind_input_SignPanel:-webkit-autofill:hover, input#KVnetFind_input_SignPanel:-webkit-autofill:focus, input#KVnetFind_input_SignPanel:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.KVnetfind-resultList {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  overflow-x: hidden;
  overflow-y: auto;
  width: 90%;
  margin: 0 auto;
  max-height: calc(var(--vh, 1vh) * 100 - 190px);
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  flex-direction: column;
  border-radius: 25px;
  box-shadow: 0px 1px 10px 1px gainsboro;
}
.KVnetfind-resultList::first-child {
  background: aliceblue;
}
.KVnetfind-resultList li {
  border-top: 1px solid lightGrey;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  width: 100%;
}
.KVnetfind-resultList .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: var(--font-xl);
}
.KVnetfind-resultList .KVnet-profile {
  width: clamp(10px, 9vw, 35px);
  height: clamp(10px, 9vw, 35px);
  /* border: 1px solid #aeaeae; */
  border: 1px solid #e7e7e7;
  padding: 2px;
  border-radius: 50%;
}
.KVnetfind-resultList .KVnet-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  color: black;
}
.KVnetfind-resultList .KVnet-textbox .KVnet-title {
  opacity: 1;
  font-size: var(--font-xl);
  font-weight: 600;
}
.KVnetfind-resultList .KVnet-textbox .KVnet-type {
  opacity: 0.7;
  color: black;
  font-size: var(--font-lg);
  padding-top: 3px;
}
.KVnetfind-resultList .KVnet-select,
.KVnetfind-resultList .KVnet-custom {
  margin-left: auto;
  padding: 10px;
  border: 2px solid rgba(2, 2, 2, 0.6509803922);
  flex: none;
  border-radius: 15px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: var(--font-2xl);
  cursor: pointer;
}
.KVnetfind-resultList .KVnet-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

.KVnetfind-resultList-NE {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  overflow-x: hidden;
  overflow-y: auto;
  width: 90%;
  margin: auto;
  max-height: calc(var(--vh, 1vh) * 100 - 260px);
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.KVnetfind-resultList-NE:first-child {
  background: aliceblue;
}
.KVnetfind-resultList-NE li {
  border-top: 1px solid lightGrey;
  display: flex;
  align-items: center;
  padding: 15px 10px;
  width: 100%;
}
.KVnetfind-resultList-NE .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: var(--font-xl);
}
.KVnetfind-resultList-NE .KVnet-profile {
  width: clamp(10px, 9vw, 35px);
  height: clamp(10px, 9vw, 35px);
  /* border: 1px solid #aeaeae; */
  border: 1px solid #e7e7e7;
  padding: 8.5px;
  border-radius: 50%;
}
.KVnetfind-resultList-NE .KVnet-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  color: black;
}
.KVnetfind-resultList-NE .KVnet-textbox .KVnet-title {
  opacity: 1;
  font-size: var(--font-xl);
  font-weight: 600;
}
.KVnetfind-resultList-NE .KVnet-textbox .KVnet-type {
  opacity: 0.7;
  color: black;
  font-size: var(--font-lg);
  padding-top: 3px;
}
.KVnetfind-resultList-NE .KVnet-select,
.KVnetfind-resultList-NE .KVnet-custom {
  margin-left: auto;
  padding: 10px;
  border: 2px solid rgba(2, 2, 2, 0.6509803922);
  flex: none;
  border-radius: 15px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: var(--font-2xl);
  cursor: pointer;
}
.KVnetfind-resultList-NE .KVnet-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

.netfind_personal_easy {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  width: 90%;
  height: 75px;
  margin: 0 auto 20px auto;
  border-radius: 12px;
  border: 1px solid lightgrey;
  display: flex;
  align-items: center;
  padding: 15px 10px;
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.netfind_personal_easy .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: var(--font-xl);
}
.netfind_personal_easy .KVnet-profile {
  width: clamp(10px, 9vw, 35px);
  height: clamp(10px, 9vw, 35px);
  /* border: 1px solid #aeaeae; */
  border: 1px solid #e7e7e7;
  padding: 8.5px;
  border-radius: 50%;
}
.netfind_personal_easy .KVnet-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  color: black;
}
.netfind_personal_easy .KVnet-textbox .KVnet-title {
  opacity: 1;
  font-size: var(--font-xl);
  font-weight: 600;
}
.netfind_personal_easy .KVnet-textbox .KVnet-type {
  opacity: 0.7;
  color: black;
  font-size: var(--font-lg);
  padding-top: 3px;
}
.netfind_personal_easy .KVnet-select,
.netfind_personal_easy .KVnet-custom {
  margin-left: auto;
  padding: 10px;
  border: 2px solid rgba(2, 2, 2, 0.6509803922);
  flex: none;
  border-radius: 15px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: var(--font-2xl);
  cursor: pointer;
}
.netfind_personal_easy .KVnet-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

.btagwork_find_box {
  position: relative;
  padding: 8px 0;
  color: #00502b;
}

.btagFind-icon {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: 50%;
}

.btagfindInputBox {
  width: auto;
  justify-content: flex-start;
  margin: 5px 7px 20px 7px;
  display: flex;
  /* gap: 10px; */
  color: var(--cl-ita-green);
  align-items: center;
  border-radius: 8px;
  border: 2px solid;
  position: relative;
  background: var(--cl-ita-green);
}
.btagfindInputBox .prefix-hash {
  width: 30px;
  text-align: center;
  background: var(--cl-ita-green);
  /* height: 100%; */
  font-size: var(--font-3xl);
  font-weight: 600;
  color: white;
}
.btagfindInputBox .allbtagFind {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 2vw;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-4xl);
  border-radius: 50%;
}

input#btagfindInput {
  border: none;
  border-radius: 0 6px 6px 0;
  width: 100%;
  height: 50px;
  /* color: black; */
  color: var(--cl-ita-green);
  background: white;
  border-left: 2px solid var(--cl-ita-green);
  padding: 3px 15px;
  box-shadow: none;
  font-weight: 600;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
}
input#btagfindInput::-moz-placeholder {
  color: var(--cl-ita-green);
  opacity: 0.5;
}
input#btagfindInput::placeholder {
  color: var(--cl-ita-green);
  opacity: 0.5;
}
input#btagfindInput:focus {
  outline: none;
}
input#btagfindInput:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: var(--cl-ita-green) !important;
}
input#btagfindInput:-webkit-autofill, input#btagfindInput:-webkit-autofill:hover, input#btagfindInput:-webkit-autofill:focus, input#btagfindInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-ita-green) !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

input#btagFind_input_SignPanel {
  border-radius: 50px;
  color: #00502b;
  width: 100%;
  height: 35px;
  border: none;
  background: rgba(0, 119, 64, 0.1215686275);
  padding: 0 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  font-size: calc(2vw + 9px);
  position: relative;
}
input#btagFind_input_SignPanel::-moz-placeholder {
  color: #00502b !important;
}
input#btagFind_input_SignPanel::placeholder {
  color: #00502b !important;
}
input#btagFind_input_SignPanel:focus {
  outline: none;
}
input#btagFind_input_SignPanel:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: var(--cl-ita-green) !important;
}
input#btagFind_input_SignPanel:-webkit-autofill, input#btagFind_input_SignPanel:-webkit-autofill:hover, input#btagFind_input_SignPanel:-webkit-autofill:focus, input#btagFind_input_SignPanel:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-ita-green) !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.new-btag-enroll-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(255, 87, 34, 0.1098039216);
  border-top: 1px solid lightgrey;
  box-shadow: 0px -1px 10px 1px rgba(220, 220, 220, 0.795);
  -moz-box-shadow: 0px -1px 10px 1px rgba(220, 220, 220, 0.795);
  -webkit-box-shadow: 0px -1px 10px 1px rgba(220, 220, 220, 0.795);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.new-btag-enroll-panel.open {
  padding: 30px 20px;
  max-height: 1000px;
  transition: max-height 0.25s ease-out;
}
.new-btag-enroll-panel .btagEnroll_nameBox {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.new-btag-enroll-panel .btagEnroll_nameBox .name {
  font-size: var(--font-4xl);
  font-weight: 600;
  color: var(--cl-main-orange);
}
.new-btag-enroll-panel .btagEnroll_nameBox .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.new-btag-enroll-panel .btagEnroll_nameBox .close-css:before, .new-btag-enroll-panel .btagEnroll_nameBox .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.new-btag-enroll-panel .btagEnroll_nameBox .close-css:before {
  transform: rotate(45deg);
}
.new-btag-enroll-panel .btagEnroll_nameBox .close-css:after {
  transform: rotate(-45deg);
}
.new-btag-enroll-panel textarea.sosp_btag_intro {
  border-radius: 12px;
  width: 100%;
  height: 80px;
  color: black;
  background: white;
  padding: 12px 12px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
  letter-spacing: -1px;
}
.new-btag-enroll-panel textarea.sosp_btag_intro::-moz-placeholder {
  color: black;
}
.new-btag-enroll-panel textarea.sosp_btag_intro::placeholder {
  color: black;
}
.new-btag-enroll-panel textarea.sosp_btag_intro:focus {
  outline: none;
}
.new-btag-enroll-panel textarea.sosp_btag_intro:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: black !important;
}
.new-btag-enroll-panel textarea.sosp_btag_intro:-webkit-autofill, .new-btag-enroll-panel textarea.sosp_btag_intro:-webkit-autofill:hover, .new-btag-enroll-panel textarea.sosp_btag_intro:-webkit-autofill:focus, .new-btag-enroll-panel textarea.sosp_btag_intro:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
.new-btag-enroll-panel .btag-enroll-submit {
  margin-top: 10px;
  padding: 10px 20px;
  border: 1px solid var(--cl-main-orange);
  background: var(--cl-main-orange);
  color: white;
  font-size: var(--font-2xl);
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}
.new-btag-enroll-panel .btag-enroll-submit:hover {
  transform: scale(1.03);
}

.btagfind-resultList {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 0px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 1px 10px 1px rgb(233, 233, 233);
}
.btagfind-resultList li {
  border-top: 1px solid lightGrey;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px;
  width: 100%;
}
.btagfind-resultList li.enroll {
  flex-direction: row;
  align-items: center;
}
.btagfind-resultList li:first-child {
  border-top: none;
  background: rgba(2, 160, 7, 0.168627451);
}
.btagfind-resultList li .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: calc(1px + 3vw);
}
.btagfind-resultList li .btag-profile {
  width: 9vw;
  height: 9vw;
  /* border: 1px solid #aeaeae; */
  /* border: 1px solid #ff572259; */
  background: var(--cl-main-orange-vague-bg);
  text-align: center;
  line-height: 9vw;
  /* padding: 3px; */
  /* border: none; */
  border-radius: 8px;
  color: var(--cl-ita-green);
}
.btagfind-resultList li .btag-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  gap: 10px;
  width: 100%;
}
.btagfind-resultList li .btag-textbox .btag-title {
  opacity: 1;
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--cl-ita-green);
}
.btagfind-resultList li .btag-textbox .btag-title.black {
  color: var(--cl-text-b-40);
}
.btagfind-resultList li .btag-textbox .btag-intro {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  opacity: 0.7;
  line-height: 1.6;
  letter-spacing: -0.5px;
}
.btagfind-resultList li .btag-textbox .btag-intro.black {
  color: var(--cl-text-b-40);
}
.btagfind-resultList li .btag-textbox .btag-type {
  opacity: 0.5;
  color: black;
  font-size: calc(1px + 3vw);
}
.btagfind-resultList li .btag-enroll-textbox {
  display: flex;
  margin-left: 10px;
  gap: 10px;
}
.btagfind-resultList li .btag-enroll-textbox .btag-title {
  opacity: 1;
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--cl-main-orange);
}
.btagfind-resultList li .btag-enroll-textbox .btag-title.black {
  color: var(--cl-text-b-40);
}
.btagfind-resultList li .btag-select,
.btagfind-resultList li .btag-custom {
  margin-left: auto;
  padding: 8px 15px;
  border: 1px solid rgba(2, 2, 2, 0.6509803922);
  border-radius: 8px;
  color: #020202;
  font-size: var(--font-lg);
  cursor: pointer;
}
.btagfind-resultList li .btag-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

.dataChatwork_find_box {
  position: relative;
  padding: 8px 0;
  color: #00502b;
}

.dataChatFind-icon {
  position: absolute;
  left: 4vw;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  border-radius: 50%;
}

.dataChatfindInputBox {
  height: auto;
  width: auto;
  justify-content: center;
  display: flex;
  align-items: center;
  position: relative;
}
.dataChatfindInputBox .alldataChatFind {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 2vw;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6vw;
  border-radius: 50%;
}

input#dataChatfindInput {
  border-radius: 15px;
  width: 820px;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  font-size: var(--font-lg);
  position: relative;
}
input#dataChatfindInput::-moz-placeholder {
  color: black;
}
input#dataChatfindInput::placeholder {
  color: black;
}
input#dataChatfindInput:focus {
  outline: none;
}
input#dataChatfindInput:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
input#dataChatfindInput:-webkit-autofill, input#dataChatfindInput:-webkit-autofill:hover, input#dataChatfindInput:-webkit-autofill:focus, input#dataChatfindInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

input#dataChatFind_input_SignPanel {
  border-radius: 50px;
  color: #00502b;
  width: 100%;
  height: 35px;
  border: none;
  background: rgba(0, 119, 64, 0.1215686275);
  padding: 0 10vw;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  font-size: calc(2vw + 9px);
  position: relative;
}
input#dataChatFind_input_SignPanel::-moz-placeholder {
  color: #00502b !important;
}
input#dataChatFind_input_SignPanel::placeholder {
  color: #00502b !important;
}
input#dataChatFind_input_SignPanel:focus {
  outline: none;
}
input#dataChatFind_input_SignPanel:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: black !important;
}
input#dataChatFind_input_SignPanel:-webkit-autofill, input#dataChatFind_input_SignPanel:-webkit-autofill:hover, input#dataChatFind_input_SignPanel:-webkit-autofill:focus, input#dataChatFind_input_SignPanel:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.dataChatfind-resultList {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  width: 820px;
  margin: auto;
  max-height: calc(var(--vh, 1vh) * 100 - 190px);
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  flex-direction: column;
  border-radius: 25px;
  box-shadow: 0px 1px 10px 1px gainsboro;
}
.dataChatfind-resultList::first-child {
  background: aliceblue;
}
.dataChatfind-resultList li {
  border-top: 1px solid lightGrey;
  display: flex;
  align-items: center;
  padding: 2.5vh 20px;
  width: 100%;
}
.dataChatfind-resultList .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: calc(1px + 3vw);
}
.dataChatfind-resultList .dataChat-profile {
  width: 9vw;
  height: 9vw;
  /* border: 1px solid #aeaeae; */
  border: 1px solid #e7e7e7;
  padding: 3px;
  border-radius: 3vw;
}
.dataChatfind-resultList .dataChat-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 4vw;
  color: black;
}
.dataChatfind-resultList .dataChat-textbox .dataChat-title {
  opacity: 1;
  font-size: var(--font-md);
}
.dataChatfind-resultList .dataChat-textbox .dataChat-type {
  opacity: 0.7;
  color: black;
  font-size: calc(1px + 3vw);
  padding-top: 0.72px;
}
.dataChatfind-resultList .dataChat-select,
.dataChatfind-resultList .dataChat-custom {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid rgba(2, 2, 2, 0.6509803922);
  border-radius: 8px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: calc(3px + 3vw);
  cursor: pointer;
}
.dataChatfind-resultList .dataChat-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

.entrywork_find_box {
  position: relative;
  padding: 8px 0;
  color: #00502b;
}

.entryFind-icon {
  position: absolute;
  left: 4vw;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  border-radius: 50%;
}

.entryfindInputBox {
  height: -moz-fit-content;
  height: fit-content;
  width: auto;
  justify-content: center;
  margin: 20px auto;
  display: flex;
  align-items: center;
  position: relative;
}
.entryfindInputBox .allentryFind {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 2vw;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6vw;
  border-radius: 50%;
}

input#entryfindInput {
  border-radius: 50px;
  width: 820px;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  font-size: var(--font-lg);
  position: relative;
}
input#entryfindInput::-moz-placeholder {
  color: black;
}
input#entryfindInput::placeholder {
  color: black;
}
input#entryfindInput:focus {
  outline: none;
}
input#entryfindInput:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
input#entryfindInput:-webkit-autofill, input#entryfindInput:-webkit-autofill:hover, input#entryfindInput:-webkit-autofill:focus, input#entryfindInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

input#entryFind_input_SignPanel {
  border-radius: 50px;
  color: #00502b;
  width: 100%;
  height: 35px;
  border: none;
  background: rgba(0, 119, 64, 0.1215686275);
  padding: 0 10vw;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  font-size: calc(2vw + 9px);
  position: relative;
}
input#entryFind_input_SignPanel::-moz-placeholder {
  color: #00502b !important;
}
input#entryFind_input_SignPanel::placeholder {
  color: #00502b !important;
}
input#entryFind_input_SignPanel:focus {
  outline: none;
}
input#entryFind_input_SignPanel:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: black !important;
}
input#entryFind_input_SignPanel:-webkit-autofill, input#entryFind_input_SignPanel:-webkit-autofill:hover, input#entryFind_input_SignPanel:-webkit-autofill:focus, input#entryFind_input_SignPanel:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.entryfind-resultList {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  width: 820px;
  margin: auto;
  max-height: calc(var(--vh, 1vh) * 100 - 240px);
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  flex-direction: column;
  border-radius: 25px;
  box-shadow: 0px 1px 10px 1px gainsboro;
}
.entryfind-resultList::first-child {
  background: aliceblue;
}
.entryfind-resultList li {
  border-top: 1px solid lightGrey;
  display: flex;
  align-items: center;
  padding: 2.5vh 20px;
  width: 100%;
}
.entryfind-resultList .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: calc(1px + 3vw);
}
.entryfind-resultList .entry-profile {
  width: 9vw;
  height: 9vw;
  /* border: 1px solid #aeaeae; */
  border: 1px solid #e7e7e7;
  padding: 3px;
  border-radius: 3vw;
}
.entryfind-resultList .entry-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 4vw;
  color: black;
}
.entryfind-resultList .entry-textbox .entry-title {
  opacity: 1;
  font-size: var(--font-md);
}
.entryfind-resultList .entry-textbox .entry-type {
  opacity: 0.7;
  color: black;
  font-size: calc(1px + 3vw);
  padding-top: 0.72px;
}
.entryfind-resultList .entry-select,
.entryfind-resultList .entry-custom {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid rgba(2, 2, 2, 0.6509803922);
  border-radius: 8px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: calc(3px + 3vw);
  cursor: pointer;
}
.entryfind-resultList .entry-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

button.entryupdade--submit {
  display: none;
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  height: 50px;
  font-weight: 500;
  margin: 2vh 6vw;
}
button.entryupdade--submit.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
button.entryupdade--submit:focus, button.entryupdade--submit:active {
  background: black;
  color: white;
}

#extLifelist_subpage {
  /* 필요한 이미지 소스들 다운 */
}
#extLifelist_subpage .extLifefind-resultList {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(3, 1fr);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  padding: 30px 20px;
  width: 100%;
  row-gap: 12px;
}
#extLifelist_subpage .extLifefind-resultList .ext-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: calc(9px + 1vw);
  gap: 8px;
  margin-bottom: 16px;
}
#extLifelist_subpage .extLifefind-resultList .ext-card--img {
  width: 90%;
  padding: 0px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
#extLifelist_subpage .extLifefind-resultList .ext-card--img:focus, #extLifelist_subpage .extLifefind-resultList .ext-card--img:hover {
  background: antiquewhite;
}
#extLifelist_subpage .extLifefind-resultList .ext-card--textbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  word-break: keep-all;
  white-space: nowrap;
}
#extLifelist_subpage .extLifefind-resultList .ext-card--textbox .ext-card--name {
  font-size: var(--font-xl);
  padding-bottom: 5px;
  font-weight: 600;
}
#extLifelist_subpage .extLifefind-resultList .ext-card--textbox .ext-card--dist {
  font-size: calc(8px + 1vw);
}
#extLifelist_subpage .extLifefind-resultList .ext-card--view {
  padding: 5px 11px;
  border: 1px solid rgba(2, 2, 2, 0.6509803922);
  border-radius: 8px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: calc(3px + 3vw);
  cursor: pointer;
}
#extLifelist_subpage .extLifefind-resultList .ext-card--view:focus, #extLifelist_subpage .extLifefind-resultList .ext-card--view:hover {
  background: #000000;
  color: white;
}

#extLife_IDcard_subpage .subtab-page-content {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#extLife_IDcard_subpage .extLifeCard-tab-container {
  padding: 3vw 0vw;
  font-size: calc(8px + 2vw);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
#extLife_IDcard_subpage .extLifeCard-tab {
  padding-right: 16px;
  color: #7e7e7e;
  color: black;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  width: 100%;
  font-size: calc(9px + 3vw);
  display: flex;
  height: 50px;
  text-align: center;
  border-bottom: 1px solid gainsboro;
  padding: 6px 0px;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
#extLife_IDcard_subpage .extLifeCard-tab.current {
  color: #000;
  font-weight: 700;
  border-bottom: 1px solid black;
}
@keyframes CardfadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}
#extLife_IDcard_subpage .ext-idcard-container {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  height: calc(var(--vh, 1vh) * 100 - 60px);
  margin: auto;
  transform: translateY(-7vh);
  -webkit-transform: translateY(-7vh);
  -moz-transform: translateY(-7vh);
  -ms-transform: translateY(-7vh);
  -o-transform: translateY(-7vh);
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody {
  overflow-y: scroll;
  scrollbar-width: none;
  overflow-x: hidden;
  padding: 2vh 25px 2vh 25px;
  font-size: calc(10px + 1vw);
  transform: scale(0.75);
  border-radius: 30px;
  box-shadow: 1px 1px 13px 3px rgba(0, 0, 0, 0.1098039216);
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody.adopted {
  position: relative;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody.adopted:after {
  content: "🌟";
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody::-webkit-scrollbar {
  display: none;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody.not-activated {
  filter: saturate(0);
  -webkit-filter: saturate(0);
  opacity: 0.4;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody > * {
  padding: 5px 0;
  line-height: 1.6;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-grid {
  display: grid;
  grid-template: "title" 1fr "img" auto "desc" 1fr/1fr;
  height: 100%;
  width: 100%;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-grid .g-title {
  grid-area: title;
  z-index: 3;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-grid .g-img {
  grid-area: img;
  z-index: 3;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-grid .g-desc {
  grid-area: desc;
  z-index: 3;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-dist {
  font-size: calc(12px + 1vw);
  font-weight: 600;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-name {
  font-size: calc(30px + 3vw);
  line-height: 1.1;
  text-align: center;
  padding-top: 10px;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-danger {
  font-size: calc(12px + 1vw);
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-danger span {
  font-weight: bold;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-imgUrl {
  width: 60vw;
  height: 60vw;
  z-index: 3;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-desc {
  font-size: calc(8px + 4vw);
  white-space: pre-line;
  font-weight: 600;
  text-align: center;
  margin-bottom: 6vh;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-desc_long {
  font-size: 23px;
  white-space: pre-line;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-detailBox {
  padding: 20px 0;
  text-align: left;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-detailBox .extIDCard-detailTitle {
  font-size: calc(9px + 3vw);
  font-weight: 700;
  padding: 5px 0;
}
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-detailBox .extIDCard-habitat_desc,
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-detailBox .extIDCard-why_extinction,
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-detailBox .extIDCard-myth,
#extLife_IDcard_subpage .ext-idcard-container .ext-idcard-cardbody .extIDCard-detailBox .extIDCard-foodchain {
  font-size: calc(9px + 3vw);
  padding-bottom: 15px;
}
#extLife_IDcard_subpage button.extLife--select {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: none;
  font-size: 15px;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
  width: auto;
  letter-spacing: -1px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  height: 45px;
  position: absolute;
  z-index: 5;
  font-weight: 500;
  /* margin: 0vh 2vw; */
  width: 75%;
  right: 0;
  left: 0;
  margin: auto;
  bottom: 15px;
}
#extLife_IDcard_subpage button.extLife--select.line {
  background: var(--CSV-Color);
  border: 1px solid var(--CSV-Color);
  color: white;
}
#extLife_IDcard_subpage button.extLife--select:focus, #extLife_IDcard_subpage button.extLife--select:active {
  background: var(--CSV-Color);
  color: white;
}

#cert_ExtLife_SubPage {
  letter-spacing: -0.6px;
}
#cert_ExtLife_SubPage .ext-cert-container {
  width: 100%;
  background: #FFF7ED;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox {
  background: #FFF7ED;
  padding: 20px 4vw;
  width: 100%;
  margin-bottom: 70px;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-docBox-inner {
  padding: 20px 4vw;
  border: 1px solid gray;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-docnum {
  text-align: left;
  font-size: calc(8px + 1vw);
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-title {
  text-align: center;
  font-size: calc(17px + 1vw);
  padding: 30px 0 0 0;
  font-weight: 500;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-statsBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px 20px;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-statsBox .myExtLifeIcon {
  width: 30vw;
  height: 30vw;
  border-radius: 25px;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-statsBox .ext-cert-statsList {
  display: block;
  font-size: calc(10px + 1vw);
  padding-top: 10px;
  width: 100%;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-statsBox .ext-cert-statsList .ext-cert-statItem {
  width: 100%;
  display: block;
  padding: 3px 0;
  text-align: center;
  font-size: calc(9px + 1vw);
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-statsBox .ext-cert-statsList .ext-cert-statItem p {
  width: auto;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-divider {
  height: 2px;
  background: rgba(0, 0, 0, 0.4509803922);
  margin-bottom: 14px;
  width: 20px;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-commentBox {
  padding: 8px 4vw;
  position: relative;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-commentBox .ext-cert-comment {
  text-align: justify;
  display: block;
  color: #1d1d1d;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.65;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-commentBox .ext-cert-stampBox {
  position: absolute;
  bottom: -2vh;
  right: 4vw;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-commentBox .ext-cert-stampBox .ext-cert-stamp {
  width: 23vw;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-logoSignBox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .ext-cert-logoSignBox .ext-cert-logoSign {
  width: 100px;
  padding: 0 10px;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-docBox .certExt_date {
  padding: 5vh 0 10px 0;
  text-align: center;
  font-size: var(--font-xl);
  font-weight: 500;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-downloadBox {
  position: absolute;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-downloadBox .ext-cert-download {
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  height: 50px;
  font-weight: 500;
  margin: 10px 4vw;
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-downloadBox .ext-cert-download.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
#cert_ExtLife_SubPage .ext-cert-container .ext-cert-downloadBox .ext-cert-download:focus, #cert_ExtLife_SubPage .ext-cert-container .ext-cert-downloadBox .ext-cert-download:active {
  background: black;
  color: white;
}

.ext-cert-StampContainer {
  display: grid;
  align-items: flex-start;
  justify-content: center;
  grid-auto-rows: auto;
  grid-template-columns: repeat(3, 1fr);
  padding: 30px 25px;
  width: 100%;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  row-gap: 15px;
}
.ext-cert-StampContainer .ext-stamp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: calc(9px + 1vw);
  gap: 8px;
  margin-bottom: 16px;
}
.ext-cert-StampContainer .ext-stamp.myext {
  position: relative;
}
.ext-cert-StampContainer .ext-stamp.myext:after {
  content: "⭐";
  font-size: 20px;
  top: 3px;
  right: 8px;
  position: absolute;
}
.ext-cert-StampContainer .ext-stamp--img {
  width: 22vw;
  border: 2px solid var(--admin-maincolor);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  position: relative;
}
.ext-cert-StampContainer .ext-stamp--img.nostamp {
  background: rgba(221, 221, 221, 0.3803921569);
  opacity: 0.5;
  filter: saturate(0);
  -webkit-filter: saturate(0);
}
.ext-cert-StampContainer .ext-stamp--img.stamp {
  opacity: 1;
}
.ext-cert-StampContainer .ext-stamp--img.myExtlife {
  position: relative;
}
.ext-cert-StampContainer .ext-stamp--textbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  word-break: keep-all;
  white-space: nowrap;
}
.ext-cert-StampContainer .ext-stamp--textbox .ext-stamp--name {
  font-size: var(--font-xl);
  padding-bottom: 5px;
  font-weight: 600;
}
.ext-cert-StampContainer .ext-stamp--textbox .ext-stamp--dist {
  font-size: calc(8px + 1vw);
}
.ext-cert-StampContainer .ext-stamp--view {
  padding: 5px 11px;
  border: 1px solid rgba(2, 2, 2, 0.6509803922);
  border-radius: 8px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: calc(3px + 3vw);
  cursor: pointer;
}
.ext-cert-StampContainer .ext-stamp--view:focus, .ext-cert-StampContainer .ext-stamp--view:hover {
  background: #000000;
  color: white;
}

.extMain-Controller {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  display: grid;
  grid-template: "a b c " 1fr/1fr 1fr 1fr;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.extMain-Controller .ga {
  grid-area: a;
}
.extMain-Controller .gb {
  grid-area: b;
}
.extMain-Controller .gc {
  grid-area: c;
}
.extMain-Controller .extMain-adopt {
  display: none;
  position: absolute;
  bottom: 72px;
  right: 0;
  margin: auto;
  left: 0;
  background: linear-gradient(135deg, var(--CSV-Color), transparent);
  z-index: 100;
  font-weight: 300;
  font-size: 30px;
  width: 130px;
  height: 130px;
  border-radius: 10px;
  align-items: center;
  color: white;
  justify-content: center;
}

.extLife-chatContainer {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  position: absolute;
  top: 60px;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - 250px);
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}
.extLife-chatContainer::-webkit-scrollbar {
  display: none;
}
.extLife-chatContainer .extLife-chatBox {
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  letter-spacing: -0.5px;
}
.extLife-chatContainer .extLife-chatBox .extLife-chatBox-date {
  color: #7e7e7e;
  padding: 15px 0;
  text-align: center;
  font-size: calc(5px + 2vw);
}
.extLife-chatContainer .extLife-chatList {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
}
.extLife-chatContainer .extLife-chatList.self {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.extLife-chatContainer .extLife-chatList.self .extLife-chat-icon {
  display: none;
}
.extLife-chatContainer .extLife-chatList.self .extLife-chat-body .extLife-chat-text {
  margin-left: 0;
}
.extLife-chatContainer .extLife-chatList.self .extLife-chat-body .extLife-chat-text:after {
  border: none;
}
.extLife-chatContainer .extLife-chatList.self .extLife-chat-time {
  margin-top: auto;
  margin-right: 5px;
  margin-bottom: 1px;
}
.extLife-chatContainer .extLife-chatList .extLife-chat-icon {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.extLife-chatContainer .extLife-chatList .extLife-chat-body {
  display: flex;
  flex-direction: column;
  row-gap: 3px;
  margin-top: 2vw;
}
.extLife-chatContainer .extLife-chatList .extLife-chat-body .extLife-chat-name {
  margin-left: 3vw;
  font-size: calc(5px + 2vw);
  font-weight: 700;
}
.extLife-chatContainer .extLife-chatList .extLife-chat-body .extLife-chat-text {
  margin-left: 2vw;
  position: relative;
  background: rgba(255, 255, 255, 0.4117647059);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  max-width: 58vw;
  height: -moz-fit-content;
  height: fit-content;
  font-size: calc(8px + 2vw);
  line-height: 1.5;
  font-weight: 500;
  border: 1px solid #c2c2c2;
  padding: 9px 15px;
  box-shadow: 1px 1px 16px 1px rgba(0, 0, 0, 0.0784313725);
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.extLife-chatContainer .extLife-chatList .extLife-chat-body .extLife-chat-text:after {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-right-color: #c2c2c2;
  border-left: 0;
  border-top: 0;
  margin-top: -5px;
  margin-left: -9px;
  transform: rotate(17deg);
}
.extLife-chatContainer .extLife-chatList .extLife-chat-body .extLife-chat-text.key {
  background: yellow;
}
.extLife-chatContainer .extLife-chatList .extLife-chat-time {
  color: #7e7e7e;
  font-size: calc(3px + 2vw);
  margin-top: auto;
  margin-left: 5px;
  margin-bottom: 1px;
}
.extLife-chatContainer .extLife-chatList .extLife-chat-adoptBtn {
  background: white;
  border: 1px solid;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.extLife-chatContainer .extLife-chatList .chatCard {
  font-size: calc(8px + 2vw);
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-title {
  padding: 10px 0px;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-img {
  width: 100%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-listbox {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  row-gap: 5px;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-listbox .chatCard-list {
  display: flex;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-listbox .chatCard-list .chatCard-list-thumb {
  width: 10vw;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-listbox .chatCard-list .chatCard-list-text {
  margin-left: 5px;
  cursor: pointer;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-btnbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 9px 0;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-btnbox .chatCard-btn {
  width: auto;
  height: 42px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-btnbox .chatCard-btn.line {
  border: 1px solid gray;
}
.extLife-chatContainer .extLife-chatList .chatCard .chatCard-btnbox .chatCard-btn.fill {
  background: #ffffff;
  /* border: 1px solid grey; */
  border: 1px solid;
  font-weight: 700;
}
.extLife-chatContainer .extLife-chatList .datachat-btn {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
}

.dataChatList-modal {
  display: none;
  position: fixed;
  z-index: 550;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3490196078);
}
.dataChatList-modal .dataChatList-content {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  display: grid;
  grid-template: "a" 80px "b" 1fr/1fr;
  background-color: var(--CSV-BColor);
  color: var(--CSV-Color);
  height: 340px;
  padding: 10vw;
  left: 0;
  right: 0;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  border-radius: 30px 30px 0 0;
  -webkit-border-radius: 30px 30px 0 0;
  -moz-border-radius: 30px 30px 0 0;
  -ms-border-radius: 30px 30px 0 0;
  -o-border-radius: 30px 30px 0 0;
}
.dataChatList-modal .dataChatList-content > .ga {
  grid-area: a;
  color: white;
  font-size: 23px;
}
.dataChatList-modal .dataChatList-content > .g-body {
  grid-area: body;
}
.dataChatList-modal .dataChatList-content > .gb {
  grid-area: b;
}

.ext-datachat--more {
  font-size: calc(8px + 2vw);
  color: var(--CSV-Color);
  position: absolute;
  top: 0;
  margin: auto;
  left: 0;
  right: 0px;
  font-size: calc(5px + 2vw);
  padding: 0px 9px;
  border-radius: 4px;
  background: white;
  width: auto;
  color: var(--subp_bcolor);
}
.ext-datachat--more::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 6px);
  border-width: 6px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}
.ext-datachat--more.addstyle1 {
  background: var(--CSV-Color);
  padding: 5px 10px;
  color: white;
}
.ext-datachat--more.addstyle1::after {
  border-color: var(--CSV-Color) transparent transparent transparent;
}

.ext-datachat--img {
  width: 18vw;
  height: 18vw;
}

.ext-volCertInfo--img {
  width: 24vw;
  height: 24vw;
}

.dc_iconWd {
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-item {
  font-size: calc(8px + 2vw);
  padding: 12px 0;
  font-weight: 500;
  cursor: pointer;
  display: flex;
}

.ext_certimg_style {
  width: 85px;
  height: 85px;
  border-radius: 25px;
}

.swiper-pagination-extlife {
  z-index: 5;
  padding: 0 11vw;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11vh;
  text-align: center;
  overflow-x: auto;
  display: flex;
  white-space: nowrap;
  overflow-x: scroll;
  scrollbar-width: none;
}
.swiper-pagination-extlife::-webkit-scrollbar {
  display: none;
}
.swiper-pagination-extlife .swiper-pagination-bullet {
  width: auto;
  height: -moz-fit-content;
  height: fit-content;
  padding: 8px 16px;
  /* line-height: 2px; */
  /* display: flex; */
  /* display: inline-block; */
  font-weight: 500;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination-extlife .swiper-pagination-bullet:hover, .swiper-pagination-extlife .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination-extlife .swiper-pagination-bullet-active {
  font-weight: 700;
  background: gainsboro;
}

.swiper-navbtn-extlife-next-v {
  position: absolute;
  bottom: 5px;
  /* left: 0; */
  /* right: 0; */
  display: flex;
  font-size: 35px;
  width: 100%;
  margin: auto;
  justify-content: flex-end;
}

.top_username_csv4 {
  margin-top: 15px;
  font-size: calc(11px + 2vw);
  font-family: pretendard;
  letter-spacing: -0.7px;
  font-weight: 500;
  color: #085133;
}

.menu-bar-icon_csv4 {
  width: calc(9px + 3vw);
  height: calc(9px + 3vw);
  color: var(--CSV-Color);
  background: url(../public/img/util/top-right-menu.svg) center no-repeat;
  background-size: contain;
}

.draggable_plogBasket {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0px;
  left: calc(40vw - 27px);
  margin: 80px 10px;
  font-size: 20px;
  font-weight: 400;
  z-index: 10;
  height: 119px;
}

.icondemo_plogstart {
  width: 119px;
  height: 119px;
  background: url(../public/img/logo/plastic-bag_9.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 20px;
}
.icondemo_plogstart:hover {
  background-color: transparent;
}
.icondemo_plogstart:focus {
  outline: none;
  background-color: transparent;
}

.draggable_zone {
  z-index: 5;
  /* width: calc(12px + 3vw); */
  /* height: calc(12px + 3vw); */
  width: 119px;
  height: 119px;
  /* right: 0; */
  /* top: 0; */
  position: absolute;
}

.draggable_zone_icon {
  position: absolute;
  z-index: 6;
  width: 119px;
  height: 119px;
  background: url("../public/img/util/move.svg") center no-repeat;
  background-size: contain;
  transform-origin: top right;
  right: 1vw;
  top: -1vw;
  transform: scale(0.2);
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -o-transform: scale(0.2);
}

.draggable_zone_icon_popmsg {
  display: flex;
  position: absolute;
  background-color: #ff5454;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  padding: 10px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 3;
  top: -89px;
  justify-content: center;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.draggable_zone_icon_popmsg:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 70%;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #ff5454;
  border-bottom: 0;
  border-right: 0;
  margin-left: -6px;
  margin-bottom: -12px;
}

.ext-adopted-MarkBox {
  position: absolute;
  opacity: 0.8;
  margin: auto;
  top: 0;
  bottom: 20%;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ext-adopted-MarkBox .ext-adopted-Mark {
  width: 80vw;
}

.gotoadopt_btnstyle {
  margin-bottom: 145px;
  border-radius: 30px;
  background: #343434;
  color: white;
  padding: 14px 22px;
  font-size: 20px;
}

#volcert_subpage .volcert-container {
  display: block;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  width: 100%;
  font-size: calc(10px + 2vw);
  letter-spacing: -0.5px;
  color: var(--CSV-Color);
}
#volcert_subpage .vc-key-primary {
  font-weight: 500;
}
#volcert_subpage .vc-key-primary:after {
  content: "\f0d7";
  font-size: 15px;
  font-family: Fontawesome;
  position: relative;
  display: inline-block;
  right: -8px;
  top: 0px;
}
#volcert_subpage .vc-key-bold {
  font-weight: 500;
}
#volcert_subpage .vc-key-head-accordian {
  font-size: calc(7px + 2vw);
  text-align: right;
  justify-content: center;
  margin: 0 25px;
  height: 50px;
}
#volcert_subpage .vc-key-head-accordian .vc-key-row {
  padding: 5px 4vw;
  background: var(--CSV-BColor);
  color: var(--CSV-Color);
  border-radius: 5px;
}
#volcert_subpage .vc-key-accordian {
  font-size: calc(7px + 2vw);
  text-align: right;
  margin: 0 25px;
}
#volcert_subpage .vc-key-accordian .vc-key-noline,
#volcert_subpage .vc-key-accordian .vc-key70,
#volcert_subpage .vc-key-accordian .vc-key,
#volcert_subpage .vc-key-accordian .vc-key300,
#volcert_subpage .vc-key-accordian .vc-key200 {
  white-space: pre-line;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
#volcert_subpage .vc-key-accordian .vc-key-noline.ellipsis,
#volcert_subpage .vc-key-accordian .vc-key70.ellipsis,
#volcert_subpage .vc-key-accordian .vc-key.ellipsis,
#volcert_subpage .vc-key-accordian .vc-key300.ellipsis,
#volcert_subpage .vc-key-accordian .vc-key200.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#volcert_subpage .vc-key-accordian .snsurl-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  padding-left: 40px;
}
#volcert_subpage .vc-key-accordian .vc-key-row {
  padding: 5px 4vw;
}
#volcert_subpage .vc-key-accordian .vc-nokey-row {
  padding: 5px 4vw;
}
#volcert_subpage .vc-key-accordian .vc-key-append {
  font-size: calc(5px + 2vw);
  background: var(--CSV-BColor);
  opacity: 0;
  display: none;
  flex-direction: column;
  padding: 3px 4vw;
  border-radius: 10px;
  animation: fadeIn 0.4s ease-in-out;
}
#volcert_subpage .vc-key-accordian.active {
  transition: margin-bottom 1s;
  -webkit-transition: margin-bottom 1s;
  -moz-transition: margin-bottom 1s;
  -ms-transition: margin-bottom 1s;
  -o-transition: margin-bottom 1s;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 25px;
}
#volcert_subpage .vc-key-accordian.active .vc-key-row {
  background: var(--CSV-Color);
  height: 50px;
  color: white;
  font-weight: 500;
  border-radius: 10px 10px 0 0;
}
#volcert_subpage .vc-key-accordian.active .vc-key-append {
  opacity: 1;
  display: flex;
}

.vol-monthly-certify {
  /* text-align: right; */
  text-align: right;
  z-index: 50;
  text-align: center;
  font-size: 4vw;
  color: #000000;
  /* top: 16px; */
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  position: relative;
  letter-spacing: -0.8px;
  padding: 6px 28px 5px 13px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 25px;
  background: url(../public/img/util/arrowdown_black.svg) no-repeat 87% 48%;
  background-size: 11px 11px;
  /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
.vol-monthly-certify option {
  color: black;
}
.vol-monthly-certify option:hover, .vol-monthly-certify option:focus, .vol-monthly-certify option:active {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}
.vol-monthly-certify select::-ms-expand {
  display: none;
  /* 화살표 없애기 for IE10, 11*/
}

.vol-monthly-certify2 {
  /* text-align: right; */
  text-align: right;
  z-index: 50;
  text-align: center;
  font-size: 3.8vw;
  background: black;
  color: white;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  position: relative;
  letter-spacing: -0.8px;
  padding: 9px 13px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 25px;
  /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
.vol-monthly-certify2 option {
  color: black;
  background: white;
}
.vol-monthly-certify2 option:hover, .vol-monthly-certify2 option:focus, .vol-monthly-certify2 option:active {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}
.vol-monthly-certify2 select::-ms-expand {
  display: none;
  /* 화살표 없애기 for IE10, 11*/
}

.select-arrow-icon {
  margin-left: 5px;
  position: absolute;
  right: 0;
}
.select-arrow-icon:after {
  content: "\f0d7";
  font-size: 15px;
  font-family: Fontawesome;
  position: relative;
  display: inline-block;
  right: -4vw;
  top: 2vw;
}

.vol_monthlyCert_container {
  color: var(--CSV-Color);
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 25px;
  border-radius: 10px;
  font-size: calc(5px + 2vw);
}
.vol_monthlyCert_container .data-volmonth-no {
  font-size: calc(8px + 2vw);
}

.volmonth-1365time {
  font-size: calc(30px + 2vw);
  font-weight: 300;
  line-height: 1;
}
.volmonth-1365time.vol24 {
  font-size: calc(20px + 2vw);
}

.vc-pics-link {
  line-height: 1;
  margin: 2px;
  font-size: 11px;
  width: 18px;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  background: #8ddbab;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vc-key-noline {
  width: 16vw;
  height: 35px;
  position: relative;
}

.vc-key {
  width: 16vw;
  height: 35px;
  position: relative;
}

.vc-key300 {
  width: 26vw;
  height: 35px;
  position: relative;
}

.vc-picslink,
.vc-all_voltime,
.vc-info_user1365 {
  border-radius: 15px;
  padding: 2px 8px;
  color: #9d9d9d;
  border: 1px solid var(--CSV-Color);
  background: white;
}
.vc-picslink.cert,
.vc-all_voltime.cert,
.vc-info_user1365.cert {
  background: none;
  border: none;
  color: var(--CSV-Color);
  font-weight: 500;
}
.vc-picslink.no_cert,
.vc-all_voltime.no_cert,
.vc-info_user1365.no_cert {
  background: rgb(182, 182, 182);
}
.vc-picslink.no_reqpics,
.vc-all_voltime.no_reqpics,
.vc-info_user1365.no_reqpics {
  background: rgb(182, 182, 182);
  color: white;
}
.volcert-sns-list {
  font-size: calc(7px + 2vw);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 25px;
  height: 45px;
  padding: 5px 4vw;
}

.vc-key-snsurl {
  white-space: pre-line;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  width: 26vw;
}
.vc-key-snsurl.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.sns_review_open {
  font-size: calc(7px + 2vw);
  cursor: pointer;
  font-weight: 500;
}

.vol-norec-guide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  height: 175px;
  line-height: 2;
  font-size: 18px;
  padding: 40px;
  border-radius: 13px;
}

.certInfo_SubModalOpen {
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: calc(9px + 2vw);
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -0.5px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  height: 50px;
  font-weight: 500;
  margin: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engage-People-Modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 250;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Full height */
  overflow: hidden;
  /* Enable scroll if needed */
  align-items: center;
  /* background-color: rgb(0 0 0 / 40%); */
  background: rgba(0, 0, 0, 0.5);
}
.engage-People-Modal .engage-people-content {
  display: grid;
  position: absolute;
  grid-template: "a" 1fr "b" 2fr "d" 1fr/1fr;
  background: white;
  color: black;
  /*top: 15%;
  */
  left: 0;
  margin: auto;
  right: 0;
  border: 2px solid black;
  width: 90%;
  height: 70%;
  padding: 25px 10vw 25px 10vw;
  font-weight: 300;
  border-radius: 10px;
}
.engage-People-Modal .headtitle {
  line-height: 1.6;
  font-size: var(--font-3xl);
  letter-spacing: -0.8px;
  color: black;
}
.engage-People-Modal .subtitle {
  line-height: 1.6;
  font-size: var(--font-2xl);
  letter-spacing: -0.6px;
  text-align: justify;
  color: black;
}
.engage-People-Modal > .gx {
  grid-area: x;
}
.engage-People-Modal > .ga {
  grid-area: a;
}
.engage-People-Modal > .gb {
  grid-area: b;
}
.engage-People-Modal > .gd {
  grid-area: d;
}

.engage_sliderBox {
  height: 60px;
  background: black;
  width: 40px;
  margin: auto;
  color: white;
  border-radius: 12px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

/* The Close Button */
.engage-close {
  position: absolute;
  right: 0;
  opacity: 1;
}
.engage-close:hover {
  opacity: 1;
}
.engage-close:before, .engage-close:after {
  position: absolute;
  /* left: 15px; */
  content: "";
  height: 33px;
  width: 2px;
  background-color: white;
}
.engage-close:before {
  transform: rotate(45deg);
}
.engage-close:after {
  transform: rotate(-45deg);
}

button.engage-people-submit {
  font-size: 15px;
  background: none;
  color: black;
  border: 2px solid black;
  width: 100%;
  height: 50px;
  border-radius: 10px;
}
button.engage-people-submit:hover, button.engage-people-submit:focus {
  color: white;
  background: black;
}

.criteria_notice_modal {
  display: none;
  position: absolute;
  z-index: 500;
  padding: 25px;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.criteria_notice_content {
  background: white;
  padding: 15px;
  border: 1px solid;
}

.criteria_notice_Text {
  font-size: calc(2vw + 9px);
  line-height: 1.5;
  white-space: pre-line;
}

.criteria_notice_btn {
  font-size: calc(2vw + 12px);
  margin-top: 20px;
  padding: 10px 20px;
  background: #2c2c2c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.iwpics--box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
}

.iwpics--label {
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 12px 2px;
  width: 100%;
}

.iwpics--inputnone {
  display: inline-block;
  font-size: calc(2vw + 8px);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}

.iwpics_imgNum_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.iwpics_imgNum_style .iwpics_UploadNum {
  color: var(--CSV-Color);
  font-weight: 500;
}

.iwpics_postCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.iwpics_postCount_style .iwpics_postCount {
  color: var(--CSV-Color);
  font-weight: 500;
}

.iwpics_titleCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.iwpics_titleCount_style .iwpics_titleCount {
  color: var(--CSV-Color);
  font-weight: 500;
}

.iwpics-submit-box {
  display: flex;
  border-top: 1px solid gainsboro;
}

.iwpics_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 250;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}
.iwpics_cropmodal .croppie-container .cr-viewport,
.iwpics_cropmodal .croppie-container .cr-resizer {
  border: none !important;
}

/* Modal Content/Box */
.iwpics_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: var(--CSV-Color);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.iwpics_cropmodal-content > .ga {
  grid-area: a;
}
.iwpics_cropmodal-content > .gb {
  grid-area: b;
}
.iwpics_cropmodal-content > .gc {
  grid-area: c;
}

#itaway_map {
  width: 100%;
  max-height: 240px;
  height: 50vh;
}

.itawaylistcount_sup {
  position: relative;
  top: -0.7em;
  padding: 2px 5px;
  right: -2px;
  background: rgb(255, 210, 191);
  border-radius: 8px 8px 8px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1;
}

.main-itaway {
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  grid-template: "head" 60px "body" 1fr/1fr;
  z-index: 50;
  position: fixed;
}
.main-itaway > .main-back {
  grid-area: head;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 50;
}
.main-itaway .main-head {
  grid-area: head;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3vw;
  font-weight: 700;
  z-index: 30;
  background: white;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.main-itaway .main-head-right {
  grid-area: head;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  font-size: var(--font-2xl);
  margin-right: 25px;
  z-index: 30;
}
.main-itaway .main-body {
  grid-area: body;
  display: grid;
  background: white;
  grid-template: "tab" 50px "body" 1fr/1fr;
}
.main-itaway .main-body .g-tab {
  grid-area: tab;
  display: flex;
  align-items: center;
}
.main-itaway .main-body .g-body {
  grid-area: body;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 170px);
  position: relative;
}
.main-itaway .main-body .g-all {
  grid-row: 1/-1;
  grid-column: 1/-1;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 120px);
  position: relative;
}

.subtab-page-container {
  padding: 3vw 0vw;
  font-size: calc(8px + 2vw);
}

.itaway-tab {
  padding-right: 16px;
  color: #7e7e7e;
  color: black;
  font-family: pretendard;
  width: 100%;
  font-size: 13px;
  display: flex;
  height: 50px;
  text-align: center;
  border-bottom: 1px solid gainsboro;
  padding: 6px 0px;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.itaway-tab.current {
  color: #000;
  font-weight: 700;
  border-bottom: 1px solid black;
}

button.iw_chal_submit {
  background: var(--CSV-Color);
  font-size: calc(9px + 2vw);
  width: 100%;
  color: white;
  letter-spacing: -1px;
  height: 50px;
  border: 1px solid;
  border-radius: 10px;
  font-weight: 300;
  cursor: pointer;
}
button.iw_chal_submit:focus, button.iw_chal_submit:active {
  background: #222222;
  color: white;
}

.iw_title {
  font-size: calc(11px + 3vw);
  font-weight: 700;
  margin: 40px 0 20px;
  line-height: 1.5;
}

.iw_subTitle {
  font-size: calc(5px + 3vw);
  font-weight: 400;
  /* margin: 10px 0 20px; */
  color: #585858;
  line-height: 1.5;
  margin-left: auto;
}

.iw_title_chal {
  font-size: calc(11px + 3vw);
  font-weight: 700;
  margin: 10px 0;
  line-height: 1.5;
}

.iw_main_screen button.iw_loc_enroll_btn {
  cursor: pointer;
  background: var(--CSV-Color);
  font-size: calc(9px + 2vw);
  width: 100%;
  color: white;
  letter-spacing: -1px;
  height: 50px;
  border: 1px solid;
  border-radius: 10px;
  font-weight: 600;
}
.iw_main_screen button.iw_loc_enroll_btn:focus, .iw_main_screen button.iw_loc_enroll_btn:active {
  background: #222222;
  color: white;
}
.iw_main_screen .iw_section1 {
  padding: 0 20px;
}
.iw_main_screen .iw_block1 {
  padding: 3vw 3vw;
  font-size: var(--font-md);
  margin: 0vw;
  border-radius: 10px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.113);
  background: #f4f4f4;
  border: none;
}

button.iw_goto_btn {
  cursor: pointer;
  background: none;
  letter-spacing: -1px;
  padding: 6px 9px;
  font-weight: 600;
  position: relative;
  border-radius: 50px;
}
button.iw_goto_btn:before {
  font-family: FontAwesome;
  content: "\f239";
  color: black;
  font-size: 24px;
}
button.iw_goto_btn:after {
  position: absolute;
  font-family: pretendard;
  content: "출퇴근";
  color: #434343;
  font-size: 11px;
  bottom: -9px;
  left: 7px;
}
button.iw_goto_btn:focus, button.iw_goto_btn:active {
  background-color: none;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

button.iw_homeSearchBtn {
  cursor: pointer;
  background: var(--CSV-Color);
  font-size: calc(5px + 3vw);
  color: white;
  letter-spacing: -1px;
  width: 20%;
  height: 50px;
  border-radius: 10px;
  font-weight: 600;
}
button.iw_homeSearchBtn:focus, button.iw_homeSearchBtn:active {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.iw_locSet_guidetext {
  font-size: calc(5px + 3vw);
  font-weight: 500;
  display: block;
  line-height: 1.5;
  color: black;
}

label.iw_addressSearch_Label {
  font-size: calc(1vw + 14px);
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;
  color: black;
}

input.iw_addressSearch {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border: none;
  outline: none;
  width: 80%;
  height: 50px;
  font-size: calc(7px + 3vw);
  font-weight: 500;
  position: relative;
  color: black;
  background: #eeeeee;
  padding: 3px 20px;
  font-family: "pretendard";
  border-radius: 10px;
}
input.iw_addressSearch::-moz-placeholder {
  color: rgba(0, 0, 0, 0.434);
}
input.iw_addressSearch::placeholder {
  color: rgba(0, 0, 0, 0.434);
}
input.iw_addressSearch:focus, input.iw_addressSearch:active {
  outline: none;
}
input.iw_addressSearch:-internal-autofill-selected {
  background-color: #eeeeee !important;
  box-shadow: 0 0 0 100px #eeeeee inset !important;
  color: black !important;
}
input.iw_addressSearch:-webkit-autofill, input.iw_addressSearch:-webkit-autofill:hover, input.iw_addressSearch:-webkit-autofill:focus, input.iw_addressSearch:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.itaway_branch_container {
  margin: 5px 0;
}

.itaway_branch_select {
  /* text-align: right; */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border: none;
  outline: none;
  text-align: left;
  font-size: calc(7px + 3vw);
  color: #000000;
  width: 80%;
  height: 50px;
  font-family: "pretendard";
  padding: 3px 20px;
  font-weight: 500;
  border-radius: 10px;
  background: #eeeeee;
  /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
.itaway_branch_select option {
  color: black;
}
.itaway_branch_select option:hover, .itaway_branch_select option:focus, .itaway_branch_select option:active {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}
.itaway_branch_select select::-ms-expand {
  display: block;
  /* 화살표 없애기 for IE10, 11*/
}

button.iw_locPostBtn {
  cursor: pointer;
  background: var(--CSV-Color);
  font-size: calc(7px + 3vw);
  color: white;
  width: 100%;
  height: 60px;
  padding: 6px 9px;
  font-family: "pretendard";
  border: 1px solid;
  border-radius: 10px;
  font-weight: 500;
}
button.iw_locSet_edit {
  cursor: pointer;
  font-size: calc(5px + 3vw);
  color: black;
  letter-spacing: -1px;
  padding: 3px 7px;
  /* padding: 3px; */
  /* border: none; */
  background: none;
  font-weight: 700;
}
button.iw_locSet_edit:focus, button.iw_locSet_edit:active {
  color: black;
  background: none;
  background-color: none;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.iwmap-custom-infoWindow {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.32);
  padding: 10px 15px;
  text-align: center;
  width: 150px;
  position: absolute;
  font-size: 15px;
  font-weight: 500;
  transform: translate(-75px, -100px);
}

.iw_bottom_div {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  width: 100%;
}

.iw_locset_userinfo {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;
  color: black;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.tab-link-iw-box {
  /* display: grid; */
  display: flex;
  padding: 0 10px;
  height: 50px;
  gap: 17px;
  /* grid-template-columns: repeat(3, 1fr); */
  overflow: hidden;
  width: 100%;
  grid-auto-rows: auto;
  /* justify-content: center; */
  align-items: center;
  font-size: var(--font-xl);
  /* height: 40px; */
  /* place-items: center; */
  /* margin: 5px 0; */
  text-align: center;
}
.tab-link-iw-box .tab-link-iw {
  position: relative;
  /* padding: 7px; */
  padding: 5px 11px;
  cursor: pointer;
  box-sizing: content-box;
}
.tab-link-iw-box .tab-link-iw.current {
  /* padding: 7px 13px; */
  font-weight: bold;
  position: relative;
  border: 1px solid dimgrey;
  background: none;
  border-radius: 10px;
}

.tab-content-iw {
  display: none;
  height: calc(var(--vh, 1vh) * 100 - 110px);
  overflow-x: hidden;
  overflow-y: auto;
}
.tab-content-iw.current {
  display: block;
}

.iwpics_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 150;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.iwpics_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: var(--CSV-Color);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.iwpics_cropmodal-content > .ga {
  grid-area: a;
}
.iwpics_cropmodal-content > .gb {
  grid-area: b;
}
.iwpics_cropmodal-content > .gc {
  grid-area: c;
}

/* The Close Button */
.iwpics_cropmodal_close {
  color: white;
  font-size: 41px;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
  width: 30px;
  height: 30px;
  font-weight: normal;
  cursor: pointer;
}
.iwpics_cropmodal_close:hover, .iwpics_cropmodal_close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

button.iwChal_UploadBtn {
  display: none;
  background: none;
  background-color: none;
  font-size: calc(7px + 3vw);
  line-height: 0;
  display: flex;
  width: 33px;
  color: black;
  height: 33px;
  padding: 3px 6px;
  font-family: "pretendard";
  border: 2px solid;
  border-radius: 10px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
button.iwChal_UploadBtn:focus, button.iwChal_UploadBtn:active {
  outline: none;
  background: none;
  background-color: none;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.iwchal-picUpload-box {
  font-family: "pretendard";
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 20px;
  height: 100%;
}

.iwpics-pics-uploadBox {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: rgb(235, 235, 235);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.iwchal-mobitype-box {
  font-family: "pretendard";
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.iwchal-mobitype {
  font-family: "pretendard";
  background: rgb(245, 245, 245);
}

.iwchal_mobitype {
  font-family: "pretendard";
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45px;
  padding: 5px 15px;
  margin: 5px 0;
  background-color: #ffffff;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  cursor: pointer;
}
.iwchal_mobitype.isSelected {
  border: 2px solid #1e85fa;
  background: #eaf4ff;
}
.iwchal_mobitype .icon {
  font-size: var(--font-2xl);
  font-weight: 500;
  text-align: center;
}
.iwchal_mobitype .title {
  font-size: calc(5px + 3vw);
  font-weight: 700;
}
.iwchal_mobitype .tree {
  font-size: calc(7px + 3vw);
  font-weight: 500;
  /* margin-left: auto; */
  text-align: right;
}
.iwchal_mobitype .co2 {
  font-size: calc(7px + 3vw);
  font-weight: 500;
}

.iwchal_waytype {
  font-family: "pretendard";
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 5px 15px;
  margin: 5px 0;
  background-color: #ffffff;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  cursor: pointer;
}
.iwchal_waytype.isSelected {
  border: 2px solid #56a5ff;
  background: #eaf4ff;
}
.iwchal_waytype .icon {
  font-size: calc(15px + 1vw);
  font-weight: 500;
}
.iwchal_waytype .title {
  font-size: calc(7px + 3vw);
  font-weight: 700;
}
.iwchal_waytype .co2 {
  font-size: calc(7px + 3vw);
  font-weight: 500;
}

.iwchal_star-ratings {
  color: #aaa9a9;
  position: relative;
  unicode-bidi: bidi-override;
  width: -moz-max-content;
  width: max-content;
  -webkit-text-fill-color: transparent;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1.3px;
  -webkit-text-stroke-color: #2b2a29;
}

.iwchal_star-ratings-fill {
  color: #fff58c;
  padding: 0;
  position: absolute;
  z-index: 1;
  display: flex;
  top: 0;
  left: 0;
  overflow: hidden;
  -webkit-text-fill-color: gold;
}

.iwchal_star-ratings-base {
  z-index: 0;
  padding: 0;
}

.iw_user_st {
  padding: 20px 0px;
  font-size: calc(15px + 1vw);
  color: var(--CSV-Color);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3px;
}
.iw_user_st .iw_username {
  font-weight: 500;
}

.iw_user_locInfo_box {
  background: white;
  padding: 20px;
  border-radius: 15px;
  font-size: calc(7px + 3vw);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
}

.iw_user_locInfo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iw_user_locInfo_logo {
  display: flex;
}

.iw_user_loc_branch_box {
  font-size: calc(5px + 3vw);
  font-weight: 500;
  padding: 3px 0;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  color: black;
  flex-direction: column;
}

.iw_user_co2 {
  font-size: calc(5px + 3vw);
  font-weight: 500;
}

.iw_user_tree {
  font-size: calc(5px + 3vw);
  font-weight: 500;
}

.iw_user_km {
  font-size: calc(5px + 3vw);
  font-weight: 500;
}

.iw_chal_list {
  font-size: calc(7px + 3vw);
  font-weight: 500;
  padding: 3px 0;
  display: flex;
  align-items: center;
}

button.chal_iw_stepBtn {
  cursor: pointer;
  background: none;
  font-size: calc(23px + 1vw);
  color: var(--CSV-Color);
  gap: 3px;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 4px;
  font-family: "pretendard";
  font-weight: 500;
  border-radius: 50%;
}
button.chal_iw_stepBtn:disabled {
  background: rgb(235, 235, 235);
  color: rgb(79, 79, 79);
  border: 1px solid rgb(235, 235, 235);
  cursor: not-allowed;
}
button.chal_iw_stepBtn:focus, button.chal_iw_stepBtn:active {
  background: none;
  background-color: none;
  color: var(--CSV-Color);
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

button.iw_goto_login {
  cursor: pointer;
  background: none;
  font-size: var(--font-xl);
  color: var(--CSV-Color);
  gap: 3px;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 4px;
  font-family: "pretendard";
  font-weight: 600;
  border-radius: 50%;
}
button.iw_goto_login:disabled {
  background: rgb(235, 235, 235);
  color: rgb(79, 79, 79);
  border: 1px solid rgb(235, 235, 235);
  cursor: not-allowed;
}
button.iw_goto_login:focus, button.iw_goto_login:active {
  background: none;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.iw_stats_swiper {
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  overflow-x: hidden;
  position: relative;
}

.swiper-pagination-iw-statsTop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  text-align: center;
}
.swiper-pagination-iw-statsTop .swiper-pagination-bullet {
  width: 15px;
  height: 2px;
  /* padding: 3px 1px; */
  margin: 0 3px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: #c0dcff;
  border-radius: 2px;
  font-size: 11px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination-iw-statsTop .swiper-pagination-bullet:hover, .swiper-pagination-iw-statsTop .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination-iw-statsTop .swiper-pagination-bullet-active {
  font-weight: 900;
  background: #094fa3;
}

.iw_stats_box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* align-items: center; */
  /* justify-content: flex-start; */
  padding: 4vw;
  color: #094fa3;
  font-weight: 500;
  width: 100%;
  background: linear-gradient(138deg, #ffffff, rgba(23, 154, 215, 0.431372549));
  border-radius: 10px;
}
.iw_stats_box .iwchal_stat_treeSave_box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.iw_stats_box .iwchal_stat_treeSave_box .iwchal_stat_treeSave_img {
  background: url("../public/img/itaway/tree_co2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}
.iw_stats_box .iwchal_stat_treeSave_box .iwchal-st-number {
  font-size: calc(27px + 3vw);
  font-weight: 700;
}
.iw_stats_box .iwchal_stat_co2 {
  font-size: calc(5px + 3vw);
  font-weight: 500;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.swiper-container-iwmobtype {
  height: -moz-max-content;
  height: max-content;
}

.iw_mobitype_swipeCards {
  cursor: pointer;
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 1;
  border-radius: 8px;
}
.iw_mobitype_swipeCards .type_img {
  z-index: -1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.iw_mobitype_swipeCards .type_img:before {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.337254902), transparent);
  /* Replace with your desired colors and direction */
}
.iw_mobitype_swipeCards .type_icon {
  /* backdrop-filter: blur(7px); */
  display: flex;
  /* height: 36px; */
  font-size: calc(13px + 3vw);
  padding: 7px 5px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  /* border-radius: 50%; */
  border-radius: 30px;
}
.iw_mobitype_swipeCards .type_name {
  font-size: calc(5px + 3vw);
  font-weight: 700;
  color: black;
  padding: 1px 6px;
}
.iw_mobitype_swipeCards .type_co2 {
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
}
.iw_mobitype_swipeCards .type_count {
  border-radius: 3px;
  padding: 2px 6px;
  color: gray;
  font-size: calc(5px + 3vw);
  font-weight: 500;
}

.iw_mobitype_cardList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.iw_mobitype_cardList .iw_mobitype_cardItem {
  z-index: 1;
  cursor: pointer;
  display: flex;
  /* border: 1px solid black; */
  justify-content: space-between;
  align-items: center;
  box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.1490196078);
  width: 100%;
  height: 50px;
  gap: 3px;
  position: relative;
  width: 100%;
  padding: 13px;
  background: white;
  border-radius: 8px;
}
.iw_mobitype_cardList .iw_mobitype_cardItem .percent {
  z-index: -1;
  background: #249cff;
  position: absolute;
  margin: 0 -13px;
  height: 8%;
  bottom: 0;
  border-radius: 8px 0 0 8px;
}
.iw_mobitype_cardList .iw_mobitype_cardItem .type_icon {
  font-size: calc(17px + 1vw);
  font-weight: 500;
}
.iw_mobitype_cardList .iw_mobitype_cardItem .type_name {
  font-size: calc(7px + 3vw);
  font-weight: 700;
  margin-right: auto;
}
.iw_mobitype_cardList .iw_mobitype_cardItem .type_co2 {
  font-size: calc(5px + 3vw);
  font-weight: 500;
  margin-left: auto;
}
.iw_mobitype_cardList .iw_mobitype_cardItem .type_count {
  font-size: calc(7px + 3vw);
  font-weight: 500;
}

.small_initials_rank {
  background: var(--CSV-Color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50px;
}

.iw_UserRank_List {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.iw_UserRank_List .iw_UserRank_Item {
  cursor: pointer;
  display: flex;
  /* border: 1px solid black; */
  justify-content: space-between;
  align-items: center;
  box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.1490196078);
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 1;
  padding: 13px;
  background: white;
  border-radius: 10px;
}
.iw_UserRank_List .iw_UserRank_Item .percent {
  z-index: -1;
  background: #249cff;
  position: absolute;
  margin: 0 -13px;
  height: 8%;
  bottom: 0;
  border-radius: 8px 0 0 8px;
}
.iw_UserRank_List .iw_UserRank_Item .type_name {
  font-size: calc(7px + 3vw);
  font-weight: 700;
  margin-right: auto;
}
.iw_UserRank_List .iw_UserRank_Item .type_co2 {
  font-size: calc(5px + 3vw);
  font-weight: 500;
  margin-left: auto;
}
.iw_UserRank_List .iw_UserRank_Item .type_count {
  font-size: calc(7px + 3vw);
  font-weight: 500;
}

.tab-iwstat-lin-box {
  /* display: grid; */
  padding: 0px 5px 25px 5px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  align-items: center;
  font-size: calc(7px + 3vw);
  letter-spacing: -0.5px;
}
.tab-iwstat-lin-box .tab-iwstat-type {
  color: gray;
  font-weight: 500;
}
.tab-iwstat-lin-box .tab-iwstat-type.current {
  color: var(--CSV-Color);
  font-weight: 700;
}

.tab-content-iwstat {
  display: none;
  overflow-x: hidden;
}
.tab-content-iwstat.current {
  display: block;
}

.data-sht-Cnt-style {
  color: white;
  font-size: calc(2px + 3vw);
  font-weight: 500;
  padding-left: 1px;
}

.iw_iwshorts_swiper {
  height: calc(var(--vh, 1vh) * 100 - 60px);
  display: grid;
  grid-template: "a" auto "b" 100px/1fr;
  align-items: center;
  overflow-x: hidden;
  position: relative;
  color: white;
}
.iw_iwshorts_swiper .ga {
  grid-area: a;
}
.iw_iwshorts_swiper .gb {
  grid-area: b;
}
.iw_iwshorts_swiper .moreinfo {
  padding-top: 10px;
  position: absolute;
  right: 15px;
  /* bottom: -30px; */
  display: flex;
  gap: 5px;
}
.iw_iwshorts_swiper .moreinfo .item {
  font-size: calc(3px + 3vw);
  color: #8a8a8a;
}
.iw_iwshorts_swiper .notation {
  padding: 15px;
  display: flex;
  gap: 3px;
  justify-content: center;
  flex-direction: column;
}
.iw_iwshorts_swiper .notation .user_name {
  font-size: calc(7px + 3vw);
  font-weight: 500;
}
.iw_iwshorts_swiper .notation .branch {
  font-size: calc(7px + 3vw);
  font-weight: 500;
}
.iw_iwshorts_swiper .notation .type_count {
  font-size: calc(7px + 3vw);
  font-weight: 500;
}
.iw_iwshorts_swiper .notation .unit {
  font-size: 9px;
  color: #8a8a8a;
}
.iw_iwshorts_swiper .notation .type_co2 {
  font-size: var(--font-xl);
  font-weight: 500;
}
.iw_iwshorts_swiper .iwshorts {
  width: 100vw;
  height: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper-pagination_iwshorts {
  position: absolute;
  top: 18px;
  right: 12px;
  /* left: 0; */
  border-radius: 21px;
  width: -moz-max-content;
  width: max-content;
  color: #c7c7c7;
  margin: 0 auto;
  font-size: 16px;
  letter-spacing: -1px;
  /* height: 17px; */
  padding: 3px 2px;
  text-align: center;
  z-index: 10;
}
.swiper-pagination_iwshorts .swiper-pagination-current {
  color: #0ac703;
  font-weight: 600;
}
.swiper-pagination_iwshorts .swiper-pagination-total {
  color: #c7c7c7;
}

.iw-userChalList {
  width: 100%;
}
.iw-userChalList .collapse-toggle {
  padding: 10px 5px;
  font-size: calc(7px + 3vw);
  border-bottom: 1px solid darkgray;
  display: flex;
  align-items: center;
  gap: 10px;
}
.iw-userChalList .collapse-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 5px;
  font-size: calc(7px + 3vw);
}
.iw-userChalList .iw-userImgBox {
  position: relative;
  width: 60px;
  height: 60px;
}
.iw-userChalList .iw-nameBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1;
}
.iw-userChalList .iw-userChalItem {
  display: flex;
  gap: 8px;
  cursor: pointer;
}
.iw-userChalList .iw-userChalItem .type_img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
}
.iw-userChalList .iw-userChalItem .mobi_name {
  font-size: calc(5px + 3vw);
  font-weight: bold;
  color: black;
}
.iw-userChalList .iw-userChalItem .type_name {
  font-size: calc(5px + 3vw);
  color: gray;
}
.iw-userChalList .iw-userChalItem .way {
  font-size: calc(5px + 3vw);
  color: gray;
}
.iw-userChalList .iw-userChalItem .co2_name {
  font-size: calc(7px + 3vw);
  color: #1c8720;
  font-weight: bold;
}

.iwchal_personal_co2 {
  font-family: "pretendard";
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45px;
  padding: 5px 15px;
  margin: 5px 0;
  background-color: #ffffff;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  cursor: pointer;
}
.iwchal_personal_co2.isSelected {
  border: 2px solid #1e85fa;
  background: #eaf4ff;
}
.iwchal_personal_co2 .icon {
  font-size: var(--font-2xl);
  font-weight: 500;
  text-align: center;
}
.iwchal_personal_co2 .title {
  font-size: calc(5px + 3vw);
  font-weight: 700;
}
.iwchal_personal_co2 .tree {
  font-size: calc(7px + 3vw);
  font-weight: 500;
  /* margin-left: auto; */
  text-align: right;
}
.iwchal_personal_co2 .co2 {
  font-size: calc(5px + 3vw);
  font-weight: 500;
}

.iw-personal-info {
  display: flex;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #9ac9ff;
}
.iw-personal-info .setLabel {
  font-size: calc(7px + 3vw);
  font-weight: 500;
  color: #707070;
}
.iw-personal-info .setValue {
  font-size: calc(7px + 3vw);
  font-weight: 500;
  color: #0077ff;
  display: flex;
  align-items: center;
}

.main-rank-cj {
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  grid-template: "head" 60px "body" 1fr/1fr;
  z-index: 50;
  position: fixed;
}
.main-rank-cj .w14bb-list-2 > .gd3 {
  font-weight: 700 !important;
}
.main-rank-cj.tab-page-content {
  display: none;
}
.main-rank-cj.tab-page-content.current {
  display: grid;
}
.main-rank-cj > .main-back {
  grid-area: head;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 50;
}
.main-rank-cj .main-head {
  grid-area: head;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3vw;
  font-weight: 700;
  z-index: 30;
  background: white;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.main-rank-cj .main-head-right {
  grid-area: head;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  font-size: var(--font-2xl);
  margin-right: 25px;
  z-index: 30;
}
.main-rank-cj .main-body {
  grid-area: body;
  display: grid;
  background: white;
  grid-template: "tab" 50px "body" 1fr/1fr;
}
.main-rank-cj .main-body .g-tab {
  grid-area: tab;
  display: flex;
  align-items: center;
}
.main-rank-cj .main-body .g-body {
  grid-area: body;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 170px);
  position: relative;
}
.main-rank-cj .main-body .g-all {
  grid-row: 1/-1;
  grid-column: 1/-1;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 120px);
  position: relative;
}
.main-rank-cj .main-body .cj-ranktab-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  padding: 0px 6vw;
  border-bottom: 1px solid lightGrey;
  font-size: calc(6px + 3vw);
  font-weight: 600;
  position: relative;
  justify-items: center;
}
.main-rank-cj .main-body .cj-ranktab-box .cj-rank-tab {
  color: #a4a4a4;
  border: 1px solid #a4a4a4;
  padding: 7px 19px;
  font-size: calc(4px + 3vw);
  border-radius: 25px;
}
.main-rank-cj .main-body .cj-ranktab-box .cj-rank-tab.active {
  background: var(--CSV-Color);
  color: white;
  border: none;
}
.main-rank-cj .main-body .content-box {
  overflow-y: auto;
}
.main-rank-cj .main-body .content-box .cj-rank-content {
  display: none;
  height: -moz-max-content;
  height: max-content;
}
.main-rank-cj .main-body .content-box .cj-rank-content.active {
  display: block;
}
.main-rank-cj .main-body .content-box .cj-rank-content .info {
  font-size: calc(3px + 3vw);
  white-space: pre-line;
  padding: 7px 0;
  text-align: center;
  line-height: 1.65;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 {
  grid-area: b;
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 230px);
  overscroll-behavior: contain;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 > :nth-child(odd) {
  background-color: none;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .top {
  border-radius: 12px;
  height: 80px;
  margin: 4px 0px;
  background: rgba(76, 175, 80, 0.07);
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .medalsec-ct {
  z-index: 5;
  width: 37px;
  margin-top: -41px;
  margin-left: 36px;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 h3,
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 h6 {
  margin: 0;
  line-height: 1em;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 h3 {
  margin-bottom: 1em;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 h6 {
  padding: 0;
  justify-self: end;
  /* position: absolute; */
  /* top: 122px; */
  width: 88px;
  padding-right: 12px;
  text-align: right;
  /* float: left; */
  letter-spacing: -0.8px;
  line-height: 1.2em;
  font-family: "Roboto";
  font-size: 1.5em;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 figure {
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .graphic {
  padding-left: 30px;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .row {
  margin-bottom: 0.5em;
  display: grid;
  grid-template: "a b c" 1fr/63px 14px 1fr;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .rank_ct {
  line-height: 2em;
  width: 12px;
  text-align: center;
  height: 18px;
  color: white;
  background: black;
}
@keyframes expand {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand {
    from {
      width: 0%;
    }
    to {
      width: calc(100% - 75px);
    }
  }
}
@keyframes expand_vt {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  @keyframes expand_vt {
    from {
      height: 0%;
    }
    to {
      height: calc(100% - 75px);
    }
  }
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .chart {
  overflow: hidden;
  width: 0%;
  animation: expand 1.5s ease forwards;
  -webkit-animation: expand 1.5s ease forwards;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  clear: both;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .text {
  position: relative;
  height: 14px;
  line-height: 14px;
  transform: translate(13px);
  /*background: #ffffff00;
  */
  max-width: 620px;
  letter-spacing: -0.8px;
  color: #4e4e4e;
  font-size: 14px;
  /*margin: auto;
  */
  font-weight: 700;
  overflow: hidden;
  font-family: pretendard;
  -webkit-transform: translate(13px);
  -moz-transform: translate(13px);
  -ms-transform: translate(13px);
  -o-transform: translate(13px);
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .text span.spacing {
  width: 20px;
  display: inline-block;
  height: inherit;
  border-radius: 0 10px 10px 0;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .jupbag {
  position: absolute;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .row + .row .chart {
  animation-delay: 0.2s;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .row + .row + .row .chart {
  animation-delay: 0.4s;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .block {
  display: block;
  height: 14px;
  /*margin-left: 10px;
  */
  width: 0;
  max-width: calc(72vw - 110px);
  color: #fff;
  font-size: 0.75em;
  float: left;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity, 0.3s ease;
  cursor: pointer;
  transform: translateX(14px);
  -webkit-transform: translateX(14px);
  -moz-transform: translateX(14px);
  -ms-transform: translateX(14px);
  -o-transform: translateX(14px);
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .block:last-of-type {
  border-radius: 0 0px 0px 0;
  -webkit-border-radius: 0 0px 0px 0;
  -moz-border-radius: 0 0px 0px 0;
  -ms-border-radius: 0 0px 0px 0;
  -o-border-radius: 0 0px 0px 0;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .block:hover {
  opacity: 0.65;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .jvalue {
  display: none;
  line-height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  font-family: roboto;
  letter-spacing: -1em;
  font-size: 0.5em;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .x-axis {
  text-align: center;
  padding: 0.5em 0 2em;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .y-axis {
  height: 20px;
  transform: translate(-32px, 170px) rotate(270deg);
  position: absolute;
  left: 0;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .legend {
  margin: 0 auto;
  padding: 0;
  font-size: 0.9em;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .legend li {
  display: inline-block;
  padding: 0.25em 1em;
  line-height: 1em;
}
.main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .legend li:before {
  content: "";
  margin-right: 0.5em;
  display: inline-block;
  width: 8px;
  height: 8px;
}
@media screen and (min-width: 768px) {
  .main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 h6 {
    padding: 0;
    width: 75px;
    float: left;
    letter-spacing: -0.8px;
    line-height: 2.2em;
    font-size: 1.2em;
  }
  .main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .block {
    font-size: 1em;
  }
  .main-rank-cj .main-body .content-box .cj-rank-content .rank-list-ct-csv2 .graph_rank_csv2 .legend {
    width: 50%;
  }
}

.leaflet-container {
  transition: transform 0.3s ease;
}

.leaflet-zoom-animated {
  transform-origin: center center;
}

/* ----------------------
   *   itacity_map_style
 ------------------------ */
.itacity_map_section {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  /* ------------------------------ 
   * 마을 프로필 
   --------------------------------*/
}
.itacity_map_section .map_container {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}
.itacity_map_section .map_container .map_loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  font-size: var(--font-7xl);
  color: var(--cl-text-b-70);
  text-align: center;
  transform: translate(-50%, -50%);
}
.itacity_map_section .map_container .map_loader .caption {
  font-size: var(--font-2xl);
  font-weight: bold;
  color: var(--cl-text-b-70);
  padding: 10px 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.itacity_map_section .itacity_label {
  position: absolute;
  z-index: 50;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-12.5px, -25px);
}
.itacity_map_section .itacity-cityname-box {
  position: absolute;
  z-index: 50;
  top: 10px;
  left: 10px;
  padding: 14px 20px;
  background: var(--cl-ita-brightgreen);
  border-radius: 10px;
  box-shadow: 0 0.2rem 0.8rem rgb(220, 220, 220) rgb(237, 237, 237);
  -moz-box-shadow: 0 0.2rem 0.8rem rgb(220, 220, 220) rgb(237, 237, 237);
  -webkit-box-shadow: 0 0.2rem 0.8rem rgb(220, 220, 220) rgb(237, 237, 237);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--cl-text-b-70);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media screen and (min-width: 992px) {
  .itacity_map_section .itacity-cityname-box {
    top: 25px;
    left: 25px;
  }
}
.itacity_map_section .itacity-cityname-box .label-box {
  display: flex;
  align-items: center;
  gap: 3px;
}
.itacity_map_section .itacity-cityname-box .label-box .city_label {
  font-size: var(--font-md);
  font-weight: 600;
  border-radius: 8px 8px 8px 0;
  padding: 2px 6px;
  background: var(--cl-text-b-0);
  color: white;
  width: -moz-max-content;
  width: max-content;
}
.itacity_map_section .itacity-cityname-box .label-box .city_label_text {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 2px 6px;
  color: var(--cl-text-b-40);
  opacity: 0.5;
  width: -moz-max-content;
  width: max-content;
}
.itacity_map_section .itacity-cityname-box .city_name {
  display: flex;
  align-items: center;
  font-size: var(--font-4xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.itacity_map_section .itacity-cityname-box .ecoaddr {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--cl-text-b-70);
}
.itacity_map_section .itacity_profile {
  position: absolute;
  z-index: 50;
  top: 92px;
  left: 10px;
  padding: 14px 20px;
  background: var(--cl-ita-brightgreen);
  border-radius: 10px;
  box-shadow: 0 0.2rem 0.8rem rgb(220, 220, 220) rgb(237, 237, 237);
  -moz-box-shadow: 0 0.2rem 0.8rem rgb(220, 220, 220) rgb(237, 237, 237);
  -webkit-box-shadow: 0 0.2rem 0.8rem rgb(220, 220, 220) rgb(237, 237, 237);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--cl-text-b-70);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media screen and (min-width: 992px) {
  .itacity_map_section .itacity_profile {
    top: 25px;
    left: 25px;
  }
}
.itacity_map_section .itacity_profile .admin-cityaddr {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--cl-text-b-140);
}

/* Container for the images */
.avatar-group-style {
  display: flex;
  gap: -2rem;
}
.avatar-group-style .group-list {
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  margin-right: 2rem;
}

.icon_cityNow_label {
  border-radius: 30px;
  opacity: 5;
  height: 40px;
  width: 40px;
  animation: pulsate 1.5s ease-out 0s infinite normal forwards;
  z-index: 5;
}
.icon_cityNow_label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: var(--nie-btm-menu-text);
  opacity: 1;
  height: 5px;
  width: 5px;
  transform: translate(-50%, -50%);
}

.icon_cityplaceFocus_RingWave {
  border: 3px solid #ff0057;
  background: var(--nie-cl-blue);
  border-radius: 50%;
  opacity: 1;
  height: 80px;
  width: 80px;
  animation: pulsate 1.5s ease-out 0s infinite normal forwards;
  z-index: 100;
  transform: translate(-40px, -40px);
}
.icon_cityplaceFocus_RingWave::before {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: var(--nie-cl-orange);
  opacity: 1;
  height: 5px;
  width: 5px;
  transform: translate(-50%, -50%);
}

/* ----------------------
   * PAGE MAP - itagridmap
 ------------------------ */
.main-ita-map-container {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .main-ita-map-container {
    width: 100%;
  }
}

/* ----------------------
   * itacity_news
 ------------------------ */
.itacity_news {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  min-height: 100px;
  height: 100px;
  left: 15px;
  right: 15px;
}
.itacity_news .drag-head {
  width: 100%;
  border-radius: 25px 25px 0 0;
  display: flex;
  align-items: center;
}
.itacity_news .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: rgba(222, 222, 222, 0.2784313725);
  border-radius: 12px;
}
.itacity_news .drag-head.no-bar::before {
  display: none;
}
.itacity_news .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.itacity_news .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.itacity_news .drag-head .close-css:before, .itacity_news .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.itacity_news .drag-head .close-css:before {
  transform: rotate(45deg);
}
.itacity_news .drag-head .close-css:after {
  transform: rotate(-45deg);
}
@media screen and (min-width: 992px) {
  .itacity_news {
    right: 0;
    left: unset;
    width: 400px;
    height: 100%;
    min-height: unset;
  }
}
.itacity_news .inner {
  max-height: calc(var(--vh, 1vh) * 100 - 70px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  /* ------------------------------ 
  * 마을 프로펠
  --------------------------------*/
  /* ------------------------------ 
  * 마을 쓰레기 데이터 
  --------------------------------*/
}
.itacity_news .inner .titie-box {
  display: flex;
  align-items: center;
  padding: 10px 0px;
}
.itacity_news .inner .titie-box .title {
  font-size: var(--font-4xl);
  font-weight: 700;
}
.itacity_news .inner .titie-box .itagrid-analysis-count {
  padding-left: 5px;
  font-size: var(--font-4xl);
  font-weight: 700;
  color: var(--cl-main-orange);
}
.itacity_news .inner .summary-box,
.itacity_news .inner .litterData-list {
  padding: var(--font-3xl);
  background: #ffffff;
  margin-bottom: 15px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  border-radius: 10px;
}
.itacity_news .inner .summary-box .item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: space-between;
  padding: 4px 0;
  font-size: var(--font-lg);
}
.itacity_news .inner .summary-box .item .item_avatar {
  font-weight: 600;
  font-size: var(--font-2xl);
}
.itacity_news .inner .summary-box .item .item_username {
  font-weight: 600;
  font-size: var(--font-2xl);
}
.itacity_news .inner .litterData-list .item {
  gap: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 4px 0;
  font-size: var(--font-lg);
}
.itacity_news .inner .litterData-list .item .item_value {
  text-align: right;
}
.itacity_news .inner .litterData-list .item .item_value.bold {
  font-weight: 600;
}
.itacity_news .SOSData-list {
  padding: 10px 5px;
  margin-bottom: 15px;
  border-radius: 10px;
}
.itacity_news .SOSData-list .item {
  padding: 10px 0;
  display: flex;
  gap: 10px;
}
.itacity_news .SOSData-list .item img.item_pics_box {
  width: 70px;
  height: 70px;
  border-radius: 15px;
}
.itacity_news .SOSData-list .item .item_info_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.itacity_news .SOSData-list .item .item_info_box .item_title {
  font-size: var(--font-xl);
  font-weight: 600;
  width: 520px;
  padding: 3px 0;
}
.itacity_news .SOSData-list .item .item_info_box .item_title.bold {
  font-weight: 600;
}
.itacity_news .SOSData-list .item .item_info_box .item_title.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itacity_news .SOSData-list .item .item_info_box .item_link {
  font-size: calc(3px + 2vw);
  font-weight: 600;
}
.itacity_news .SOSData-list .item .item_info_box .item_category_box {
  display: flex;
  gap: 5px;
  align-items: center;
}
.itacity_news .SOSData-list .item .item_info_box .item_category_box .item_category_item_img {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f0f0f0;
}
.itacity_news .SOSData-list .item .item_info_box .item_category_box .item_category_item {
  font-size: calc(3px + 2vw);
  padding: 2px 4px;
  border-radius: 15px;
  background: #f0f0f0;
}
.itacity_news .SOSData-list .item .item_info_box .item_avatar_box {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: calc(3px + 3vw);
}
.itacity_news .SOSData-list .item .item_info_box .item_avatar_box .item_username {
  font-weight: 600;
  font-size: var(--font-sm);
  color: black;
}
.itacity_news .SOSData-list .item .item_info_box .item_addr {
  font-size: var(--font-md);
  font-weight: 600;
}
.itacity_news .playerData-list {
  padding: 10px 0 20px 0;
  display: flex;
  gap: 16px;
  align-items: center;
}
.itacity_news .playerData-list .item {
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.itacity_news .playerData-list .item .item_username {
  font-weight: 600;
  font-size: calc(3px + 3vw);
}
.itacity_news .playerData-list .item .item_avatar {
  font-weight: 600;
  color: white;
}

#drainage_map {
  width: 100%;
  height: calc(var(--vh, 1vh) * 50);
}

header.cityLabel-header-box.nav-down {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: white;
  border-bottom: 1px solid gainsboro;
  z-index: 100;
  position: fixed;
  top: 0;
  transition: top 0.3s ease-in-out 0.25s ease;
  /* 부드러운 이동을 위한 트랜지션 */
}
header.cityLabel-header-box.nav-down.nav-up {
  top: -60px;
}
header.cityLabel-header-box.nav-down .cityLabel-header-title {
  font-size: calc(5px + 3vw);
  font-weight: 600;
}
header.cityLabel-header-box.nav-down button.cityLabel-edit-btn {
  border-radius: 8px;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 600;
  background: gainsboro;
  font-size: calc(2vw + 3px);
  color: rgb(0, 0, 0);
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  /* font-weight: 500; */
  padding: 10px 10px;
}
header.cityLabel-header-box.nav-down button.cityLabel-edit-btn:focus, header.cityLabel-header-box.nav-down button.cityLabel-edit-btn:active {
  background: black;
  color: white;
}

.milestone-item-screen {
  display: block;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 1;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  /* ------------------------------ 
  * head 
  --------------------------------*/
  /* ------------------------------ 
  * body 
  --------------------------------*/
}
.milestone-item-screen > .inner {
  display: grid;
  grid-template: "back" 50px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -0.7px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.milestone-item-screen > .inner > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.milestone-item-screen > .inner > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 50px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 30;
}
.milestone-item-screen > .inner > .g-head {
  grid-area: back;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3vw;
  font-weight: 500;
  z-index: 10;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.milestone-item-screen > .inner > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 15px;
  font-size: var(--font-2xl);
  z-index: 5;
}
.milestone-item-screen > .inner > .g-body {
  grid-area: body;
  overflow: auto;
}
.milestone-item-screen > .inner > .g-body .g-body-tab {
  display: flex;
  align-items: center;
}
.milestone-item-screen > .inner > .g-all {
  display: block;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.milestone-item-screen > .inner > .g-btn {
  grid-area: btn;
}
.milestone-item-screen > .inner > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}
@media screen and (min-width: 992px) {
  .milestone-item-screen {
    max-width: var(--pc-body-max-wd);
    margin: auto;
    border: 1px solid lightgray;
    border-radius: 20px;
    box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
    -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
    -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  }
}
.milestone-item-screen .inner > .g-head {
  z-index: 3 !important;
}
.milestone-item-screen .inner > .g-all {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: calc(var(--vh, 1vh) * 100 - 60px) !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.milestone-item-screen .inner > .g-all::-webkit-scrollbar {
  display: none;
}
.milestone-item-screen .inner > .g-100vh {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.milestone-item-screen .inner > .g-100vh::-webkit-scrollbar {
  display: none;
}
.milestone-item-screen .g-back,
.milestone-item-screen .g-head,
.milestone-item-screen .g-head-right {
  color: white;
}
.milestone-item-screen .milst-container .milestone-content {
  /* ------------------------------ 
  * CONTENT BOX
  --------------------------------*/
  width: 100%;
  padding-bottom: 30px;
  padding: 0 20px 20px 20px;
  /* ------------------------------ 
   * 색인 
   --------------------------------*/
  /* ------------------------------ 
   * author-box 
   --------------------------------*/
  /* ------------------------------ 
   * avatar_builder 
   --------------------------------*/
  /* ------------------------------ 
   * B TAG 
   --------------------------------*/
  /* ------------------------------ 
  *  환경주소 short-URI
  --------------------------------*/
  /* ------------------------------ 
   * 행정주소 , time-box
   --------------------------------*/
  /* ------------------------------ 
  * 글내용 
  --------------------------------*/
  /* ------------------------------ 
   * 글내용 
   --------------------------------*/
  /* ------------------------------ 
     * taglist
     --------------------------------*/
  /* ------------------------------ 
   * 좋아요/댓글 
   --------------------------------*/
}
.milestone-item-screen .milst-container .milestone-content section.milestone {
  padding: 6px 20px;
  margin-left: -20px;
  margin-right: -20px;
  border-top: 1px solid gainsboro;
}
.milestone-item-screen .milst-container .milestone-content section.milestone.single {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.milestone-item-screen .milst-container .milestone-content section.milestone .title {
  letter-spacing: var(--nie-letter-spacing-3);
  font-size: var(--font-xl);
  font-weight: 600;
  align-items: center;
  display: flex;
  gap: 3px;
  padding: 5px 0;
}
.milestone-item-screen .milst-container .milestone-content section.milestone .info {
  padding: 5px 0px 5px 25px;
  display: flex;
  justify-content: flex-start;
}
.milestone-item-screen .milst-container .milestone-content section.milestone .info.start {
  justify-content: flex-start;
}
.milestone-item-screen .milst-container .milestone-content .title-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.milestone-item-screen .milst-container .milestone-content .author-box {
  padding: 10px 0 5px 0;
  color: var(--cl-text-b-40);
  font-weight: 600;
  font-size: var(--font-xl);
}
.milestone-item-screen .milst-container .milestone-content .avatar_builder {
  padding: 5px 0 5px 0;
}
.milestone-item-screen .milst-container .milestone-content .author-box {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-block;
  background: var(--cl-ita-red-40);
}
.milestone-item-screen .milst-container .milestone-content .author-box:hover, .milestone-item-screen .milst-container .milestone-content .author-box:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.milestone-item-screen .milst-container .milestone-content .b-tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  letter-spacing: var(--nie-letter-spacing-5);
}
.milestone-item-screen .milst-container .milestone-content .b-tag-box .b-tagitems {
  font-size: var(--font-xl);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 5px 12px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: var(--cl-ita-red-40);
}
.milestone-item-screen .milst-container .milestone-content .b-tag-box .b-tagitems:hover, .milestone-item-screen .milst-container .milestone-content .b-tag-box .b-tagitems:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.milestone-item-screen .milst-container .milestone-content .b-tag-box .phrase {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.milestone-item-screen .milst-container .milestone-content .ecoaddr-short-box {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 4px 0;
  opacity: 0.7;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.milestone-item-screen .milst-container .milestone-content .admin-addr,
.milestone-item-screen .milst-container .milestone-content .time-box {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 4px 0;
  opacity: 0.7;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.milestone-item-screen .milst-container .milestone-content .post-title {
  font-size: var(--font-4xl);
  font-weight: 600;
  color: black;
  width: 100%;
  position: relative;
  line-height: 1.8;
  letter-spacing: var(--nie-letter-spacing-5);
}
.milestone-item-screen .milst-container .milestone-content .posttext {
  font-size: var(--font-xl);
  font-weight: 400;
  color: black;
  width: 100%;
  padding: 15px 15px;
  position: relative;
  line-height: 1.9;
  border-radius: 6px;
  background: var(--cl-text-b-245);
  letter-spacing: var(--nie-letter-spacing-3);
  margin: 10px 0 15px 0;
}
.milestone-item-screen .milst-container .milestone-content .tag-box {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
  justify-content: flex-end;
  font-weight: 600;
  color: var(--cl-text-b-120);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.milestone-item-screen .milst-container .milestone-content .tag-box::-webkit-scrollbar {
  display: none;
}
.milestone-item-screen .milst-container .milestone-content .tag-box.active {
  cursor: grabbing;
}
.milestone-item-screen .milst-container .milestone-content .tag-box.no-padding {
  padding: 0;
}
.milestone-item-screen .milst-container .milestone-content .tag-box .tagitems {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  border-radius: 7px;
  padding: 7px 12px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.milestone-item-screen .milst-container .milestone-content .tag-box .tagitems.line {
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: none;
}
.milestone-item-screen .milst-container .milestone-content .tag-box .tagitems.fill {
  color: white;
  border-radius: 15px;
  box-shadow: none;
  border: none;
}
.milestone-item-screen .milst-container .milestone-content .tag-box .tagitems:hover, .milestone-item-screen .milst-container .milestone-content .tag-box .tagitems:active {
  transform: scale(1.03);
}
.milestone-item-screen .milst-container .milestone-content .tag-box.itared_highlight {
  color: var(--cl-ita-red-40);
  background: var(--cl-btn-bg-vague-itared);
}
.milestone-item-screen .milst-container .milestone-content .engagement-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 0;
}
.milestone-item-screen .milst-container .milestone-content .engagement-box .numStyle {
  font-size: var(--font-3xl);
  color: var(--cl-text-b-70);
}
.milestone-item-screen .milst-container .milestone-content .contribution-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
  gap: 5px;
}
.milestone-item-screen .milst-container .milestone-content .contribution-box .title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.milestone-item-screen .milst-container .milestone-content .contribution-box .title-box .title,
.milestone-item-screen .milst-container .milestone-content .contribution-box .title-box .count {
  font-size: var(--font-3xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
}
.milestone-item-screen .milst-container .milestone-content .contribution-box .content-box {
  padding: 20px 10px;
  border-radius: 10px;
  background: #f2f2f2;
  color: var(--cl-text-b-40);
}
.milestone-item-screen .milst-container .milestone-content .contribution-box .content-box .text {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}

/* ------------------------------ 
   *  MAP
   --------------------------------*/
.cityLabel-map-box {
  width: 100%;
  height: 300px;
}

/* ------------------------------ 
   * 지도보기 
   --------------------------------*/
.map-btn-box {
  position: absolute;
  bottom: 100px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.map-btn-box .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  background: black;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
}

/* ------------------------------ 
     * DATE BOX 
     --------------------------------*/
.date-box {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.date-box .timeago {
  padding: 5px 0;
  font-size: calc(3px + 2vw);
  font-weight: 500;
  color: var(--cl-text-b-70);
}
.date-box .updated {
  padding: 5px 0;
  font-size: calc(3px + 2vw);
  font-weight: 500;
  color: darkgrey;
}

/* ------------------------------ 
   * 행정주소 
   --------------------------------*/
.admin-addr {
  padding: 5px 0;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-140);
}

.milest-label-box {
  padding: 5px 10px;
  background: #f2f2f2;
  border-radius: 8px;
  margin: 10px 0;
}

.milest-text-post {
  padding: 5px 0;
  font-size: calc(3px + 3vw);
  font-weight: 500;
  color: rgb(51, 51, 51);
  line-height: 1.75;
}

/* ------------------------------ 
 * spacing 30px 
 --------------------------------*/
.cityLabel-divider {
  height: 1px;
  background: rgba(169, 169, 169, 0.3529411765);
  margin: 15px -6vw;
}

/* ------------------------------ 
  * 이미지  
  --------------------------------*/
.milestone-imgSwiper-box {
  width: 100%;
  position: relative;
  /* ------------------------------ 
   * 이미지 슬라이더 
   --------------------------------*/
  /* ------------------------------ 
   * 이미지 슬라이더 bullet 
   --------------------------------*/
  /* ------------------------------ 
  * 이미지 슬라이더 페이징 
  --------------------------------*/
}
.milestone-imgSwiper-box .milestone_img_swiper {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
.milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel {
  height: 0;
  padding-top: 150%;
  margin: 0;
  width: 100%;
}
.milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel.square {
  padding-top: 100%;
}
.milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel.pt-125 {
  padding-top: 125%;
}
@media screen and (min-width: 767px) {
  .milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel {
    padding-top: 100%;
  }
}
.milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 1;
}
.milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel.sdgs0-13:after {
  background: linear-gradient(0deg, rgba(58, 82, 36, 0.75) 0%, rgba(0, 0, 0, 0) 70%);
}
.milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel.sdgs0-10:after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
}
.milestone-imgSwiper-box .milestone_img_swiper figure.cityLabel .cityLabel_img {
  position: absolute;
  top: 0;
  left: 0;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.milestone-imgSwiper-box .swiper-pagination-sosfeed {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.milestone-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  /* padding: 3px 1px; */
  margin: 0 2.5px;
  display: inline-block;
  font-weight: 700;
  opacity: 1;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  outline: none;
}
.milestone-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet:hover, .milestone-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet:focus {
  outline: none;
}
.milestone-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet-active {
  background: white;
  opacity: 1;
}
.milestone-imgSwiper-box .swiper-pagination-milestone {
  position: absolute;
  right: 12px;
  bottom: 12px;
  text-align: center;
  z-index: 4;
  padding: 5px 10px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5215686275);
  border-radius: 20px;
  display: flex;
  gap: 4px;
  font-size: var(--font-lg);
  color: rgba(255, 255, 255, 0.8);
  /* ------------------------------ 
  * PAGE NUMBER TYPE 
  --------------------------------*/
  /* ------------------------------ 
   * BULLET TYPE 
   --------------------------------*/
}
.milestone-imgSwiper-box .swiper-pagination-milestone .swiper-pagination-current {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}
.milestone-imgSwiper-box .swiper-pagination-milestone .swiper-pagination-total {
  color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------ 
 * ecoaddr-position 
 --------------------------------*/
.ecoaddr-position {
  position: absolute;
  bottom: 10px;
  left: 0;
  z-index: 2;
  padding: 10px 20px;
  /* ------------------------------ 
   * ecoaddr-title-box - 3줄 환경주소 제목
  --------------------------------*/
}
.ecoaddr-position .ecoaddr-title-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ecoaddr-position .ecoaddr-title-box .word {
  font-size: var(--font-5xl);
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 0;
  opacity: 1;
  color: white;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.32);
  letter-spacing: -0.3px;
}

main.tagCategory-item-screen {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  padding: 60px 20px;
}
main.tagCategory-item-screen .tagCategory-img-box .tagCategory_img {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  border-radius: 15px;
}
main.tagCategory-item-screen .tagCategory-contents-box {
  height: -moz-max-content;
  height: max-content;
}
main.tagCategory-item-screen .tagCategory-contents-box article.tag-Label {
  padding: 20px 0;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-headline {
  padding: 5px 0;
  font-size: calc(7px + 3vw);
  font-weight: 600;
  margin: 0;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-post {
  padding: 5px 0;
  font-size: calc(3px + 3vw);
  font-weight: 500;
  color: rgb(51, 51, 51);
  line-height: 1.75;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-addr {
  padding: 5px 0;
  font-size: calc(3px + 3vw);
  font-weight: 500;
  color: darkgrey;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-title {
  padding: 10px 0;
  font-size: calc(5px + 3vw);
  font-weight: 600;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-like-box {
  display: flex;
  gap: 2px;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-like-box .tagCategory-like-icon {
  font-size: calc(3px + 3vw);
  color: #00a159;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-like-box .tagCategory-like-count {
  font-size: calc(3px + 3vw);
  color: #00a159;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-timeago {
  padding: 5px 0;
  font-size: calc(3px + 2vw);
  font-weight: 500;
  color: darkgrey;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-created {
  padding: 5px 0;
  font-size: calc(3px + 2vw);
  font-weight: 500;
  color: darkgrey;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-category-box {
  display: flex;
  width: 100%;
  gap: 5px;
  overflow-x: auto;
  flex-direction: column;
  align-items: flex-start;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-category-box .tagCategory-category-icon-box {
  display: flex;
  align-items: center;
  gap: 5px;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-category-box .tagCategory-category-icon-box .tagCategory-category-icon {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid rgba(0, 93, 51, 0.1647058824);
  background: white;
  position: relative;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-category-box .tagCategory-category-icon-box .tagCategory-category-icon.selected {
  border: 1px solid #35644f;
  background: rgba(0, 161, 89, 0.1647058824);
  position: relative;
}
main.tagCategory-item-screen .tagCategory-contents-box .tagCategory-category-box .tagCategory-category-icon-box .tagCategory-category-icon-text {
  font-size: var(--font-lg);
  font-weight: 500;
}
main.tagCategory-item-screen .tagCategory-divider {
  height: 1px;
  background: rgba(169, 169, 169, 0.3529411765);
}

.action-guide-screen {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - 60px);
  position: relative;
  /* ------------------------------ 
  * navigation hint arrowLongR 
  --------------------------------*/
  /* ------------------------------ 
  * explain-more
  --------------------------------*/
  /* ------------------------------ 
   * Swiper 
   --------------------------------*/
}
.action-guide-screen .share-button-box {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px;
  z-index: 100;
}
.action-guide-screen .direction-mark {
  position: absolute;
  top: 15px;
  left: 75px;
  z-index: 5;
}
.action-guide-screen .explain-more {
  position: absolute;
  top: 8px;
  right: 20px;
  z-index: 5;
}
.action-guide-screen .cssIcon.program-ot {
  width: 40px;
  height: 40px;
}
.action-guide-screen .itacity-program-helpPanel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 20px;
  z-index: 300;
}
.action-guide-screen .itacity-program-helpPanel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.action-guide-screen .itacity-program-helpPanel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.action-guide-screen .itacity-program-helpPanel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.action-guide-screen .itacity-program-helpPanel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.action-guide-screen .itacity-program-helpPanel .drag-head .close-css:before, .action-guide-screen .itacity-program-helpPanel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.action-guide-screen .itacity-program-helpPanel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.action-guide-screen .itacity-program-helpPanel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.action-guide-screen .itacity-program-helpPanel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.action-guide-screen .itacity-program-helpPanel .inner::-webkit-scrollbar {
  display: none;
}
.action-guide-screen .itacity-program-helpPanel .inner {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
}
.action-guide-screen .itacity-program-helpPanel .inner .mascot-box {
  display: flex;
  gap: 15px;
  align-items: center;
}
.action-guide-screen .itacity-program-helpPanel .inner .mascot-box .mascot {
  width: 85px;
  height: auto;
  padding: 10px 0;
}
.action-guide-screen .itacity-program-helpPanel .inner .mascot-box span.hello {
  color: var(--cl-text-b-40);
  display: inline-block;
  font-size: var(--font-2xl);
  padding: 20px 0;
  line-height: 1.6;
  white-space: nowrap;
}
.action-guide-screen .itacity-program-helpPanel .inner .mascot-box span.hello .strong {
  color: var(--nie-cl-leaf);
  font-weight: 800;
}
.action-guide-screen .itacity-program-helpPanel .inner .section-div-mark {
  font-size: var(--font-10xl);
  padding: 30px 0 0px 0;
}
.action-guide-screen .itacity-program-helpPanel .inner .content {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.action-guide-screen .itacity-program-helpPanel .inner .info-text {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--cl-ita-red-40);
  letter-spacing: var(--nie-letter-spacing-3);
}
.action-guide-screen .itacity-program-helpPanel .inner .mission_state {
  padding: 20px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.action-guide-screen .ita_action_swiper {
  padding: 45px 25px 20px 25px;
  height: 100%;
  /* ------------------------------ 
  * navigation arrows 
  --------------------------------*/
  /* ------------------------------ 
  * 이미지 슬라이더 페이징 
  --------------------------------*/
  /* ------------------------------ 
   * swiper--nav-next
   --------------------------------*/
}
.action-guide-screen .ita_action_swiper .swiper-slide {
  border-radius: 15px;
  padding: 10px 0;
}
.action-guide-screen .ita_action_swiper .swiper-nav-next-action,
.action-guide-screen .ita_action_swiper .swiper-nav-prev-action {
  position: absolute;
  top: 12px;
  /* width: 33px; */
  /* height: 44px; */
  /* right: 0; */
  /* margin-top: -6px; */
  z-index: 10;
  cursor: pointer;
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.action-guide-screen .ita_action_swiper .swiper-nav-next-action:hover, .action-guide-screen .ita_action_swiper .swiper-nav-next-actionfocus,
.action-guide-screen .ita_action_swiper .swiper-nav-prev-action:hover,
.action-guide-screen .ita_action_swiper .swiper-nav-prev-actionfocus {
  outline: none;
}
.action-guide-screen .ita_action_swiper .swiper-nav-next-action.swiper-button-disabled,
.action-guide-screen .ita_action_swiper .swiper-nav-prev-action.swiper-button-disabled {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.action-guide-screen .ita_action_swiper .swiper-nav-prev-action {
  left: 13px;
  right: auto;
  background-image: unset;
}
.action-guide-screen .ita_action_swiper .swiper-nav-prev-action:before {
  font-family: FontAwesome;
  content: "\f104";
  font-size: 35px;
}
.action-guide-screen .ita_action_swiper .swiper-nav-next-action {
  right: 13px;
  left: auto;
  background-image: unset;
}
.action-guide-screen .ita_action_swiper .swiper-nav-next-action:before {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 35px;
}
.action-guide-screen .ita_action_swiper .swiper-pagination_ita_action {
  position: absolute;
  left: 20px;
  top: 15px;
  text-align: center;
  z-index: 5;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.137254902);
  color: black;
  border-radius: 15px;
  display: flex;
  gap: 3px;
  font-size: var(--font-lg);
}
.action-guide-screen .ita_action_swiper .swiper-pagination_ita_action .swiper-pagination-current {
  color: black;
  font-weight: 700;
}
.action-guide-screen .ita_action_swiper .swiper-pagination_ita_action .swiper-pagination-total {
  color: black;
}
.action-guide-screen .ita_action_swiper .swiper--nav-next {
  position: absolute;
  bottom: 5px;
  /* left: 0; */
  /* right: 0; */
  display: flex;
  font-size: 35px;
  width: 100%;
  margin: auto;
  justify-content: flex-end;
}
.action-guide-screen .plogging,
.action-guide-screen .tagging,
.action-guide-screen .sdgszero,
.action-guide-screen .adopting,
.action-guide-screen .ecohack {
  border-radius: 10px;
  padding: 0 30px;
  height: 100%;
  position: relative;
  color: var(--cl-text-b-40);
}
.action-guide-screen .plogging .impact-box,
.action-guide-screen .tagging .impact-box,
.action-guide-screen .sdgszero .impact-box,
.action-guide-screen .adopting .impact-box,
.action-guide-screen .ecohack .impact-box {
  display: flex;
  opacity: 0.7;
  /* flex-direction: column; */
}
.action-guide-screen .plogging .impact-box details summary,
.action-guide-screen .tagging .impact-box details summary,
.action-guide-screen .sdgszero .impact-box details summary,
.action-guide-screen .adopting .impact-box details summary,
.action-guide-screen .ecohack .impact-box details summary {
  color: var(--cl-ita-red-40);
  cursor: pointer;
  outline: none;
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 4px 0px;
  /* border: 1px solid var(--cl-text-b-120); */
  border-radius: 8px;
  /* margin-top: 10px; */
  background: transparent;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  margin: 7px 0;
  border: none;
  font-weight: 700;
}
.action-guide-screen .plogging .impact-box details .text,
.action-guide-screen .tagging .impact-box details .text,
.action-guide-screen .sdgszero .impact-box details .text,
.action-guide-screen .adopting .impact-box details .text,
.action-guide-screen .ecohack .impact-box details .text {
  color: var(--cl-ita-red-40);
  opacity: 0.8;
  font-size: var(--font-xl);
  font-weight: 600;
  line-height: 1.6;
  padding: 5px 10px;
  border-left: 1px solid;
}
.action-guide-screen .plogging h2.mission-word,
.action-guide-screen .tagging h2.mission-word,
.action-guide-screen .sdgszero h2.mission-word,
.action-guide-screen .adopting h2.mission-word,
.action-guide-screen .ecohack h2.mission-word {
  font-size: var(--font-9xl);
  font-weight: 600;
  line-height: 135%;
  padding: 20px 0 10px 0;
  color: black;
}
.action-guide-screen .plogging h3.explain,
.action-guide-screen .tagging h3.explain,
.action-guide-screen .sdgszero h3.explain,
.action-guide-screen .adopting h3.explain,
.action-guide-screen .ecohack h3.explain {
  font-size: var(--font-3xl);
  font-weight: 600;
  line-height: 1.6;
  padding: 10px 0;
  opacity: 0.8;
}
.action-guide-screen .plogging h4.desc,
.action-guide-screen .tagging h4.desc,
.action-guide-screen .sdgszero h4.desc,
.action-guide-screen .adopting h4.desc,
.action-guide-screen .ecohack h4.desc {
  font-size: var(--font-xl);
  font-weight: 400;
  line-height: 1.6;
  padding: 10px 0;
  opacity: 0.7;
}
.action-guide-screen .plogging details summary,
.action-guide-screen .tagging details summary,
.action-guide-screen .sdgszero details summary,
.action-guide-screen .adopting details summary,
.action-guide-screen .ecohack details summary {
  cursor: pointer;
  outline: none;
  font-size: var(--font-xl);
  text-decoration: underline;
  font-weight: 500;
  padding: 4px 0px;
  border-radius: 8px;
  margin-top: 10px;
  background: transparent;
  color: var(--cl-text-b-40);
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
}
.action-guide-screen .plogging details p,
.action-guide-screen .tagging details p,
.action-guide-screen .sdgszero details p,
.action-guide-screen .adopting details p,
.action-guide-screen .ecohack details p {
  border: 1px solid var(--cl-text-b-120);
  background: transparent;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-120);
  line-height: 1.6;
  /* padding: 8px 0; */
  margin: 10px 0;
}
.action-guide-screen .plogging .entry,
.action-guide-screen .tagging .entry,
.action-guide-screen .sdgszero .entry,
.action-guide-screen .adopting .entry,
.action-guide-screen .ecohack .entry {
  position: absolute;
  bottom: 18px;
  right: 18px;
}
.action-guide-screen .plogging .entry .button,
.action-guide-screen .tagging .entry .button,
.action-guide-screen .sdgszero .entry .button,
.action-guide-screen .adopting .entry .button,
.action-guide-screen .ecohack .entry .button {
  border-radius: 50px;
  outline: none;
  cursor: pointer;
  border: none;
  height: 45px;
  font-weight: 500;
  background: none;
  color: var(--color-darkgray);
  font-size: var(--font-xl);
  padding: 0px 15px;
  color: white;
  background: var(--cl-ita-red-40);
  width: -moz-max-content;
}
.action-guide-screen .plogging .entry .button:focus, .action-guide-screen .plogging .entry .button:active,
.action-guide-screen .tagging .entry .button:focus,
.action-guide-screen .tagging .entry .button:active,
.action-guide-screen .sdgszero .entry .button:focus,
.action-guide-screen .sdgszero .entry .button:active,
.action-guide-screen .adopting .entry .button:focus,
.action-guide-screen .adopting .entry .button:active,
.action-guide-screen .ecohack .entry .button:focus,
.action-guide-screen .ecohack .entry .button:active {
  transform: scale(1.05);
}
.action-guide-screen .plogging .entry .button.disabled,
.action-guide-screen .tagging .entry .button.disabled,
.action-guide-screen .sdgszero .entry .button.disabled,
.action-guide-screen .adopting .entry .button.disabled,
.action-guide-screen .ecohack .entry .button.disabled {
  background: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
}
.action-guide-screen .plogging,
.action-guide-screen .adopting,
.action-guide-screen .sdgszero,
.action-guide-screen .ecohack,
.action-guide-screen .tagging {
  background-size: 40px 40px;
  color: rgb(0, 0, 0);
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.349) 1px, transparent 1px);
  background-color: rgba(255, 87, 34, 0.01);
}
.action-guide-screen .tagging {
  background-image: linear-gradient(to right, rgba(128, 128, 128, 0.1) 1px, rgba(37, 37, 37, 0.9607843137) 1px), linear-gradient(to bottom, rgba(128, 128, 128, 0.5) 1px, #252525 1px);
}
.action-guide-screen .tagging .impact-box details .text {
  color: white;
  opacity: 0.8;
}
.action-guide-screen .tagging h2.mission-word,
.action-guide-screen .tagging h3.explain,
.action-guide-screen .tagging h4.desc {
  color: white;
}
@media screen and (min-width: 767px) {
  .action-guide-screen .plogging {
    background: none;
  }
}

/* ------------------------------ 
 * 플로깅 중 - 거리계산 패널 
 --------------------------------*/
.timecalc-info-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 30px;
  z-index: 300;
}
.timecalc-info-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.timecalc-info-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.timecalc-info-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.timecalc-info-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.timecalc-info-panel .drag-head .close-css:before, .timecalc-info-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.timecalc-info-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.timecalc-info-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.timecalc-info-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.timecalc-info-panel .inner::-webkit-scrollbar {
  display: none;
}
.timecalc-info-panel .inner {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
}
.timecalc-info-panel .inner .info_style {
  white-space: pre-line;
  line-height: 1.8;
  font-size: var(--font-xl);
}

.main-trashnews-new-screen {
  height: calc(var(--vh, 1vh) * 100);
  overflow: auto;
}

.main-sospost-screen {
  overscroll-behavior: contain;
  display: block;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 1;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  letter-spacing: -0.3px;
}
.main-sospost-screen > .inner {
  display: grid;
  grid-template: "back" 50px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -0.7px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.main-sospost-screen > .inner > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.main-sospost-screen > .inner > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 50px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 30;
}
.main-sospost-screen > .inner > .g-head {
  grid-area: back;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3vw;
  font-weight: 500;
  z-index: 10;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.main-sospost-screen > .inner > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 15px;
  font-size: var(--font-2xl);
  z-index: 5;
}
.main-sospost-screen > .inner > .g-body {
  grid-area: body;
  overflow: auto;
}
.main-sospost-screen > .inner > .g-body .g-body-tab {
  display: flex;
  align-items: center;
}
.main-sospost-screen > .inner > .g-all {
  display: block;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.main-sospost-screen > .inner > .g-btn {
  grid-area: btn;
}
.main-sospost-screen > .inner > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}
.main-sospost-screen .inner > .g-head {
  z-index: 3 !important;
}

/* ------------------------------ 
   * 페이지 전체 컨테이너 
   --------------------------------*/
.sosp-page-container {
  background: white;
  color: black;
}

.sosp--section-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px 18vw 16px 16px;
}

.sosp--titlebox {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.sosp--titlebox.col {
  flex-direction: column;
  align-items: flex-start;
}

.sosp--label-checkbox-box {
  position: absolute;
  top: 15px;
  display: flex;
  align-items: center;
  padding: 3px 6px 3px 6px;
  border-radius: 12px;
}

.sosp--label-checkbox {
  display: inline-block;
  width: var(--font-xs);
  height: var(--font-xs);
  border: 1px solid rgb(99, 99, 99);
  border-radius: 50%;
  margin-right: 2px;
}
.sosp--label-checkbox.optional {
  boarder: none;
}
.sosp--label-checkbox.active {
  border: 2px solid #ff5f5f;
  background: #ff5f5f;
}

.is_req {
  display: inline-block;
  font-size: var(--font-md);
  font-weight: 500;
  margin-left: 2px;
  color: var(--cl-text-b-150);
}

.sosp--label {
  font-size: var(--font-4xl);
  font-weight: 600;
  padding: 14px 2px 4px 2px;
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -0.5px;
  margin-top: 10px;
  background: transparent;
  color: white;
  border-radius: 8px;
  text-align: left;
  line-height: 1.5;
  color: black;
}
.sosp--label .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  line-height: 1.5;
}

.sosp--sticky-section {
  background: white;
  z-index: 4;
  padding: 20px 30px;
  margin: 0 !important;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.sosp--sticky-section.no-padding {
  padding: 0 !important;
}

.sosp--picket-textbox {
  position: relative;
  z-index: 2;
  padding: 0px 0px;
  border-radius: 10px;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-2xl);
  font-weight: 600;
}
.sosp--picket-textbox .placeholder {
  color: white;
  opacity: 0.6;
  font-size: var(--font-2xl);
  font-weight: 400;
}
.sosp--picket-textbox .picket-curaddr {
  font-size: var(--font-2xl);
  font-weight: 500;
}
.sosp--picket-textbox .picket-author {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.swiper-slider-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.process-check-box {
  word-break: keep-all;
  position: absolute;
  top: 12px;
  right: 33px;
  transform: none;
  bottom: unset;
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 5px 5px;
  justify-content: space-between;
  align-items: space-between;
  z-index: 15;
}
.process-check-box .check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000000;
  height: 6px;
  width: 6px;
  opacity: 0.3;
  color: black;
  margin: 0 !important;
}
.process-check-box .check-dot.active {
  background: #ff5f5f;
  opacity: 1;
}

.swiper-pagination-sosp {
  word-break: keep-all;
  position: absolute;
  top: 10px;
  right: 0;
  transform: none;
  bottom: unset;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 5px;
  justify-content: center;
  align-items: space-between;
  z-index: 10;
}
.swiper-pagination-sosp .swiper-pagination-bullet {
  width: -moz-max-content;
  width: max-content;
  height: 20px;
  line-height: 20px;
  padding: 0px 8px 0px 14px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 500;
  background: white;
  border-radius: 7px 7px 7px 0;
  font-size: var(--font-lg);
  /* background: none; */
  opacity: 0.7;
  color: black;
  margin: 0 !important;
}
.swiper-pagination-sosp .swiper-pagination-bullet:hover, .swiper-pagination-sosp .swiper-pagination-bullet:focus {
  outline: none;
}
.swiper-pagination-sosp .swiper-pagination-bullet-active {
  font-weight: 600;
  background: var(--cl-text-b-150);
  color: white;
  opacity: 1;
}

.sosp--display-seltag-box {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 8px;
       column-gap: 8px;
  row-gap: 8px;
  padding: 5px 0;
}

.emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}

.sosp--seltag-icon-text {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
}

.sosp--seltag-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border-radius: 8px 8px 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  padding: 5px 7px;
  color: var(--cl-ita-red-40);
  position: relative;
}
.sosp--seltag-icon-box.selected {
  color: var(--cl-ita-red-40);
  border: 1px solid black;
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  position: relative;
}
.sosp--seltag-icon-box .selMark {
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
  font-weight: 700;
  width: 8px;
  height: 8px;
  color: black;
  background: var(--cl-ita-red-40);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.sosp--display-posttext {
  font-size: var(--font-xl);
  font-weight: 600;
  line-height: 1.6;
  padding: 5px 7px;
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--cl-text-b-70);
  background: rgba(163, 214, 235, 0.2509803922);
  position: relative;
  margin: 10px 0;
  /* border: 1px solid rgba(255, 87, 34, 0.1490196078); */
  border-radius: 8px 8px 8px 8px;
}

.sticky-section {
  position: sticky;
  top: 0;
  z-index: 5;
  background: white;
}

.sosp--display-btag-box {
  display: flex;
  -moz-column-gap: 8px;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
  padding: 15px 10px;
}
.sosp--display-btag-box .btag-item {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: #ffffff;
  background: #000000;
  padding: 8px 16px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px 10px 10px 0;
}
.sosp--display-btag-box .btag-item .emoji {
  margin-right: 2px;
  font-size: var(--font-2xl);
}
.sosp--display-btag-box .btag-item .tagname {
  font-size: var(--font-xl);
  font-weight: 600;
  color: #ffffff;
}
.sosp--display-btag-box .btag-item .delete {
  font-size: var(--font-2xl);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  border-radius: 50%;
}

.close-text {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: rgb(255, 255, 255);
  cursor: pointer;
  background: #030303;
  padding: 5px 12px;
  border-radius: 6px;
}

.sosp--tag-box-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sosp--tag-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 0;
  background: white;
  padding: 5px 7px;
  color: var(--cl-text-b-40);
  position: relative;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.sosp--tag-icon-box.selected {
  border: 1px solid var(--cl-ita-red-40);
  color: white;
  background: var(--cl-ita-red-40);
  /* color: white; */
  position: relative;
}
.sosp--tag-icon-box.more {
  background: black;
  border: 1px solid black;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
}
.sosp--tag-icon-box .emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}
.sosp--tag-icon-box .sosp--tag-icon {
  width: 25px;
  height: 25px;
  padding: 3px;
  position: relative;
}
.sosp--tag-icon-box .sosp--tag-icon-text {
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.95px;
}
.sosp--tag-icon-box .sel-order {
  font-size: var(--font-md);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.sosp--tagstat-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border: 1px solid #fff7f0;
  border-radius: 8px;
  background: #fff7f0;
  padding: 5px 7px;
  color: var(--cl-text-b-70);
  position: relative;
}
.sosp--tagstat-icon-box.selected {
  border: 1px solid var(--cl-ita-red-40);
  color: white;
  background: var(--cl-ita-red-40);
  /* color: white; */
  border-radius: 8px;
  position: relative;
}
.sosp--tagstat-icon-box.more {
  background: black;
  border: 1px solid black;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
}
.sosp--tagstat-icon-box .sosp--tagstat-bar {
  position: absolute;
  left: 0;
  height: 100%;
  background: var(--cl-ita-red-40);
}
.sosp--tagstat-icon-box .emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}
.sosp--tagstat-icon-box .sosp--tagstat-text {
  font-size: var(--font-xl);
  font-weight: 500;
  letter-spacing: -0.95px;
}
.sosp--tagstat-icon-box .sel-order {
  font-size: var(--font-md);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.sosp--map-box {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}

.sosp--mapStyle {
  width: 100%;
  height: 180px;
  border-radius: 6px;
}
.sosp--mapStyle.sosp-type {
  height: calc(var(--vh, 1vh) * 55);
  max-height: calc(var(--vh, 1vh) * 100 - 270px);
  border: 1px solid lightgray;
  border-radius: 0 0 20px 20px;
}
.sosp--mapStyle.new {
  height: calc(var(--vh, 1vh) * 100 - 170px);
}
@media screen and (min-width: 767px) {
  .sosp--mapStyle.new {
    height: 600px;
  }
}

.sosp_swiper {
  height: calc(var(--vh, 1vh) * 45);
  min-height: 270px;
}
.sosp_swiper.new {
  height: 100%;
}

.sosp--map-viewchange-box {
  z-index: 10;
  position: absolute;
  bottom: 30px;
  right: 9px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  flex-direction: column;
}
.sosp--map-viewchange-box .sosp--util-btn-box {
  width: 45px;
  height: -moz-max-content;
  height: max-content;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.sosp--map-viewchange-box .sosp--util-btn-box button {
  font-size: var(--font-md);
  color: black;
  border: none;
  border-radius: 50%;
}
.sosp--map-viewchange-box .sosp--util-btn-box.selected {
  background: white;
  color: black;
}
.sosp--map-viewchange-box .sosp--util-btn-box:focus, .sosp--map-viewchange-box .sosp--util-btn-box:active {
  transform: scale(1.03);
}

.sosp--find-curloc-guidebox {
  width: 100%;
  background: rgba(106, 255, 112, 0.1098039216);
  padding: 10px;
  margin: 10px 0;
  display: flex;
  color: #6aff70;
  gap: 10px;
  border-radius: 8px;
}
.sosp--find-curloc-guidebox .sosp--find-curloc-guide {
  font-size: var(--font-lg);
  font-weight: 500;
  line-height: 1.5;
}

.sosp--find-curloc-box,
.sosp--open-taglist-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.sosp--find-curloc-box button.sosp--btn,
.sosp--open-taglist-box button.sosp--btn {
  border-radius: 10px 10px 10px 0;
  font-size: var(--font-lg);
  border: 1px solid;
  background: transparent;
  background: var(--cl-text-b-40);
  color: white;
  width: -moz-max-content;
  width: max-content;
  font-weight: 600;
  padding: 9px 12px;
  width: max-content;
}
.sosp--find-curloc-box button.sosp--btn:focus, .sosp--find-curloc-box button.sosp--btn:active,
.sosp--open-taglist-box button.sosp--btn:focus,
.sosp--open-taglist-box button.sosp--btn:active {
  transform: scale(1.03);
}

.sosp--picket {
  background: #238cfa;
  color: white;
  z-index: 0;
  padding: 16px 14px;
  margin: 0 !important;
  border-bottom: 2px solid #238cfa;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.0784313725);
  position: relative;
  width: 145px;
  height: 180px;
  position: absolute;
  bottom: 32px;
  pointer-events: none;
  left: 6px;
}
.sosp--picket.no-padding {
  padding: 0 !important;
}

.sosp--picket-img {
  display: none;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  filter: brightness(0.4);
}

.sosp-curaddr {
  font-size: var(--font-xl);
  color: gray;
  margin-left: auto;
  padding-top: 15px;
}

.sosp--citycode-box {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: -moz-max-content;
  width: max-content;
  font-size: var(--font-sm);
  letter-spacing: -0.3px;
  z-index: 2;
  position: relative;
}
.sosp--citycode-box .prefix {
  display: none;
  background: #FF5722;
  font-weight: 600;
  padding: 2px 5px;
  width: -moz-max-content;
  width: max-content;
  border-radius: 4px;
}
.sosp--citycode-box .prefix.light {
  background: none;
  color: white;
  font-weight: 500;
  padding: 2px 5px;
  width: -moz-max-content;
  width: max-content;
  border-radius: 4px;
}
.sosp--citycode-box .sosp-citycode {
  display: none;
  opacity: 0.5;
  color: white;
}

.sosp--picket-btag-box {
  position: absolute;
  bottom: 18px;
  left: 15px;
  z-index: 2;
}
.sosp--picket-btag-box .picket-feature {
  font-size: var(--font-sm);
  background: var(--cl-ita-red-40);
  font-weight: 500;
  padding: 2px 5px;
  width: -moz-max-content;
  width: max-content;
  border-radius: 4px;
  color: white;
}
.sosp--picket-btag-box .placeholder {
  color: white;
  opacity: 0.6;
  font-size: var(--font-sm) !important;
}

.sosp--picket-avatar {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
}

.sosp-pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
  overflow-x: scroll;
  scrollbar-width: none;
}
.sosp-pics-uploadBox::-webkit-scrollbar {
  display: none;
}
.sosp-pics-uploadBox .sosp-upload-plus {
  position: relative;
  width: 65px;
  margin-right: 10px;
  border: 1px solid rgb(190, 190, 190);
  border-radius: 10px;
  cursor: pointer;
}
.sosp-pics-uploadBox .sosp-upload-div {
  position: relative;
  width: 65px;
  margin-right: 10px;
  border-radius: 10px;
}
.sosp-pics-uploadBox .sosp-upload-div .sosp-upload-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--cl-ita-red-40);
  border: 1px solid var(--cl-ita-red-40);
  font-weight: 600;
}
.sosp-pics-uploadBox .sosp-upload-div .sosp-upload-on {
  border-radius: 10px;
  width: 65px;
}

.sosp--inputnone {
  display: inline-block;
  font-size: calc(2vw + 8px);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}

.sosp_imgNum_style {
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: var(--font-xl);
  padding-right: 15px;
  display: flex;
  margin-left: auto;
  opacity: 0.5;
}
.sosp_imgNum_style .sosp_UploadNum {
  color: black;
  font-weight: 500;
}

input[type=date]::-webkit-calendar-picker-indicator {
  display: block;
}

input.sosp_title {
  border-radius: 6px;
  width: 100%;
  height: 30px;
  border: none;
  color: var(--cl-text-b-70);
  background: var(--back-lightgray);
  padding: 10px 15px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  position: relative;
  letter-spacing: -1px;
}
input.sosp_title::before {
  content: "#";
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 100%;
  border-right: 1px solid;
}
input.sosp_title::-moz-placeholder {
  color: var(--cl-text-b-70);
}
input.sosp_title::placeholder {
  color: var(--cl-text-b-70);
}
input.sosp_title:focus {
  outline: none;
}
input.sosp_title:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: var(--cl-text-b-70) !important;
}
input.sosp_title:-webkit-autofill, input.sosp_title:-webkit-autofill:hover, input.sosp_title:-webkit-autofill:focus, input.sosp_title:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-text-b-70) !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.sosp_category_box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

/* ------------------------------ 
 * (사용) 하단고정 
 --------------------------------*/
.sosp-submission-bottom {
  position: absolute;
  bottom: 10px;
  right: 30px;
  left: 30px;
  background: white;
  z-index: 50;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 6px;
}

/* ------------------------------ 
  * (미사용) 하단 submit - 슬라이더 형태로 사용하지 않음. 
  --------------------------------*/
.sosp--submit-box {
  position: relative;
  padding: 20px 18vw 20px 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sosp--submit-box .btn {
  border-radius: 10px 10px 10px 0;
  background: var(--cl-ita-red-40);
  font-size: var(--font-2xl);
  letter-spacing: -0.3px;
  color: white;
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -1px;
  width: max-content;
  padding: 5px 12px;
  height: 45px;
  font-weight: 700;
  border: 1px solid;
  cursor: pointer;
}

.sosp_cropmodal {
  display: none;
  /*Hiddenbydefault*/
  position: fixed;
  /*Stayinplace*/
  z-index: 250;
  /*Sitontop*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  /*Fullwidth*/
  height: calc(var(--vh, 1vh) * 100);
  /*Fullheight*/
  overflow: hidden;
  /*Enablescrollifneeded*/
  background-color: rgb(0, 0, 0);
  /*Fallbackcolor*/
  background-color: rgba(0, 0, 0, 0.4);
  /*Blackw/opacity*/
  transition: all 1s ease-in-out;
  /* Modal Content/Box */
}
.sosp_cropmodal .croppie-container .cr-viewport,
.sosp_cropmodal .croppie-container .cr-resizer {
  border: none !important;
}
.sosp_cropmodal .sosp_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: #272727;
  overflow: hidden;
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.sosp_cropmodal .sosp_cropmodal-content > .ga {
  grid-area: a;
}
.sosp_cropmodal .sosp_cropmodal-content > .gb {
  grid-area: b;
}
.sosp_cropmodal .sosp_cropmodal-content > .gc {
  grid-area: c;
}

.sosp-picket-style {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 288px;
  height: 132px;
  margin-left: -144px;
  text-align: left;
  overflow: hidden;
  font-size: 12px;
  font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
  line-height: 1.5;
}
.sosp-picket-style * {
  padding: 0;
  margin: 0;
}
.sosp-picket-style .info {
  width: 286px;
  height: 120px;
  border-radius: 5px;
  border-bottom: 2px solid #ccc;
  border-right: 1px solid #ccc;
  overflow: hidden;
  background: #fff;
}
.sosp-picket-style .info::after {
  content: "";
  position: absolute;
  margin-left: -12px;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 12px;
  background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
}
.sosp-picket-style .info:nth-child(1) {
  border: 0;
  box-shadow: 0px 1px 2px #888;
}
.sosp-picket-style .info .link {
  color: #5085BB;
}
.sosp-picket-style .info .img {
  position: absolute;
  top: 6px;
  left: 5px;
  width: 73px;
  height: 71px;
  border: 1px solid #ddd;
  color: #888;
  overflow: hidden;
}
.sosp-picket-style .info .title {
  padding: 5px 0 0 10px;
  height: 30px;
  background: #eee;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  font-weight: bold;
}
.sosp-picket-style .info .close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #888;
  width: 17px;
  height: 17px;
  background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png");
  cursor: pointer;
}
.sosp-picket-style .info .close:hover {
  color: var(--cl-ita-red-40);
}
.sosp-picket-style .info .body {
  position: relative;
  overflow: hidden;
}
.sosp-picket-style .info .info .desc {
  position: relative;
  margin: 13px 0 0 90px;
  height: 75px;
}
.sosp-picket-style .info .info .desc .ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sosp-picket-style .info .info .desc .ellipsis .jibun {
  font-size: 11px;
  color: #888;
  margin-top: -2px;
}

.sosp-moretag-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 10px !important;
}
.sosp-moretag-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.sosp-moretag-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.sosp-moretag-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.sosp-moretag-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.sosp-moretag-panel .drag-head .close-css:before, .sosp-moretag-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.sosp-moretag-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.sosp-moretag-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.sosp-moretag-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sosp-moretag-panel .inner::-webkit-scrollbar {
  display: none;
}
.sosp-moretag-panel .drag-head {
  padding: 0 10px;
}
.sosp-moretag-panel .drag-head .type-cnt {
  font-size: var(--font-3xl);
  color: var(--cl-ita-red-40);
  font-weight: bold;
  margin-right: 5px;
}
.sosp-moretag-panel .inner {
  max-height: calc(var(--vh, 1vh) * 100 - 80px);
  overflow-y: auto;
}
.sosp-moretag-panel .inner.fixed-height {
  height: calc(var(--vh, 1vh) * 100 - 80px);
}
.sosp-moretag-panel .inner .guideline {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  padding: 10px 10px 10px 10px;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.sosp-moretag-panel .inner .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-150);
  line-height: 1.6;
  padding: 0 10px;
}
.sosp-moretag-panel .inner .tabbox {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}
.sosp-moretag-panel .inner .tabbox .sosp--tabitem {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  border-radius: 10px;
  padding: 5px 10px;
  letter-spacing: -0.3px;
  cursor: pointer;
}
.sosp-moretag-panel .inner .tabbox .sosp--tabitem:hover {
  color: var(--cl-ita-red-40);
}
.sosp-moretag-panel .inner .tabbox .sosp--tabitem.active {
  color: var(--cl-ita-red-40);
}
.sosp-moretag-panel .inner .content {
  display: flex;
  row-gap: 12px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  flex-wrap: wrap;
  padding: 20px 0px 40px 0;
  height: -moz-max-content;
  height: max-content;
  font-size: var(--font-xl);
  font-weight: 500;
  overflow-x: hidden;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-5);
}

.sosp_postCount_style {
  letter-spacing: -1.1px;
  font-weight: 300;
  font-size: var(--font-xl);
  padding-right: 15px;
  color: var(--cl-text-b-150);
  display: flex;
  margin-left: auto;
}
.sosp_postCount_style .sosp_postCount {
  color: var(--cl-text-b-70);
  font-weight: 500;
}

.sosp_titleCount_style {
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
  margin-left: auto;
}
.sosp_titleCount_style .sosp_titleCount {
  color: black;
  font-weight: 500;
}

textarea.sosp_post {
  border-radius: 15px 15px 15px 15px;
  width: 95%;
  margin: auto;
  height: 100px;
  color: black;
  background: rgba(163, 214, 235, 0.2509803922);
  padding: 15px 12px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
  line-height: 1.75;
  min-height: 400px;
  word-break: break-all;
  resize: none;
  letter-spacing: -1px;
  border: 1px solid rgba(163, 214, 235, 0.3882352941);
}
textarea.sosp_post::-moz-placeholder {
  opacity: 0.4;
}
textarea.sosp_post::placeholder {
  opacity: 0.4;
}
textarea.sosp_post::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  color: white;
  margin-top: -1px;
  border-width: 16px;
  border-style: solid;
  border-radius: 3px;
}
textarea.sosp_post::-moz-placeholder {
  color: var(--cl-text-b-140);
}
textarea.sosp_post::placeholder {
  color: var(--cl-text-b-140);
}
textarea.sosp_post:focus {
  outline: none;
}
textarea.sosp_post:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: var(--cl-text-b-70) !important;
}
textarea.sosp_post:-webkit-autofill, textarea.sosp_post:-webkit-autofill:hover, textarea.sosp_post:-webkit-autofill:focus, textarea.sosp_post:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-text-b-70) !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

textarea.basic-post {
  width: 100%;
  font-size: var(--font-2xl);
  line-height: 1.7;
  height: auto;
  word-break: break-all;
  resize: none;
  /* 사용자가 직접 크기를 조절하지 못하도록 설정 */
  overflow: hidden;
  /* 스크롤바를 숨김 */
  box-sizing: border-box;
  /* 패딩과 보더를 포함한 크기 계산 */
}
textarea.basic-post::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  color: white;
  margin-top: -1px;
  border-width: 16px;
  border-style: solid;
  border-radius: 3px;
}
textarea.basic-post::-moz-placeholder {
  color: var(--cl-text-b-180);
}
textarea.basic-post::placeholder {
  color: var(--cl-text-b-180);
}
textarea.basic-post:focus {
  outline: none;
}
textarea.basic-post:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: var(--cl-text-b-70) !important;
}
textarea.basic-post:-webkit-autofill, textarea.basic-post:-webkit-autofill:hover, textarea.basic-post:-webkit-autofill:focus, textarea.basic-post:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-text-b-70) !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.sosp--btag-find-box {
  width: 100%;
}

/* ------------------------------ 
 * 등록전 미리보기 
 --------------------------------*/
.sosp-preview-panel {
  max-height: 0;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  width: 100%;
  padding: 25px 40px;
  height: 100%;
  background: #b3deff;
  color: var(--cl-text-b-40);
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* ------------------------------ 
   * inner 
   --------------------------------*/
  /* ------------------------------ 
     * btn-box
     --------------------------------*/
}
.sosp-preview-panel.open {
  display: grid;
  grid-template-rows: 1fr 50px;
  gap: 10px;
  max-height: 5000px;
  transition: max-height 0.3s ease-in-out;
}
.sosp-preview-panel .inner {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #f9f9f9;
  padding: 0 20px;
  overflow-y: auto;
  overflow-x: hidden;
  /* ------------------------------ 
   * head 
   --------------------------------*/
  /* ------------------------------ 
   * content 
   --------------------------------*/
}
.sosp-preview-panel .inner::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  margin-top: 0px;
  border-width: 24px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent var(--cl-ita-red-40) transparent;
}
.sosp-preview-panel .inner .head-box .title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  padding: 10px 0;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.sosp-preview-panel .inner .content {
  width: 100%;
  padding-bottom: 30px;
  /* ------------------------------ 
   * author-box 
   --------------------------------*/
  /* ------------------------------ 
   * avatar_builder 
   --------------------------------*/
  /* ------------------------------ 
   * B TAG 
   --------------------------------*/
  /* ------------------------------ 
   * 행정주소 , time-box
   --------------------------------*/
  /* ------------------------------ 
   * 글내용 
   --------------------------------*/
  /* ------------------------------ 
   * 이미지 슬라이더 
   --------------------------------*/
  /* ------------------------------ 
   * taglist
   --------------------------------*/
}
.sosp-preview-panel .inner .content .title-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.sosp-preview-panel .inner .content .author-box {
  padding: 10px 0 5px 0;
  color: var(--cl-text-b-40);
  font-weight: 600;
  font-size: var(--font-xl);
}
.sosp-preview-panel .inner .content .avatar_builder {
  padding: 10px 0 5px 0;
}
.sosp-preview-panel .inner .content .author-box {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-block;
  background: var(--cl-ita-red-40);
}
.sosp-preview-panel .inner .content .author-box:hover, .sosp-preview-panel .inner .content .author-box:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.sosp-preview-panel .inner .content .b-tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 0 5px 0;
  letter-spacing: var(--nie-letter-spacing-5);
}
.sosp-preview-panel .inner .content .b-tag-box .b-tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 4px 10px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: var(--cl-ita-red-40);
}
.sosp-preview-panel .inner .content .b-tag-box .b-tagitems:hover, .sosp-preview-panel .inner .content .b-tag-box .b-tagitems:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.sosp-preview-panel .inner .content .b-tag-box .phrase {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.sosp-preview-panel .inner .content .addr_full,
.sosp-preview-panel .inner .content .time-box {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 4px 0;
  opacity: 0.6;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sosp-preview-panel .inner .content .posttext {
  font-size: var(--font-lg);
  font-weight: 400;
  color: var(--cl-text-b-0);
  padding: 10px 10px 10px 10px;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-5);
  white-space: pre-line;
}
.sosp-preview-panel .inner .content figure.milestone {
  margin: 0;
}
.sosp-preview-panel .inner .content figure.milestone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.452) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 2;
}
.sosp-preview-panel .inner .content .sosp_miles_imgswiper {
  height: 100%;
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  /* ------------------------------ 
  * ecoaddr-title-box - 3줄 환경주소 
  --------------------------------*/
}
.sosp-preview-panel .inner .content .sosp_miles_imgswiper .milestone-img {
  width: 100%;
  height: 40vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  border-radius: 0;
  filter: brightness(0.9);
}
.sosp-preview-panel .inner .content .sosp_miles_imgswiper .ecoaddr-title-box {
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 2;
  font-size: var(--font-4xl);
  font-weight: 600;
  color: white;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-3);
}
.sosp-preview-panel .inner .content .swiper-pagination-sosp-preview {
  text-align: center;
  padding-top: 2px;
}
.sosp-preview-panel .inner .content .swiper-pagination-sosp-preview .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--cl-text-b-40);
  opacity: 0.1;
  border-radius: 50%;
  margin: 0px 1px;
}
.sosp-preview-panel .inner .content .swiper-pagination-sosp-preview .swiper-pagination-bullet-active {
  background: var(--cl-ita-red-40);
  opacity: 1;
}
.sosp-preview-panel .inner .content .tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  font-weight: 600;
  color: var(--cl-text-b-120);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.sosp-preview-panel .inner .content .tag-box .tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-ita-red-40);
  border-radius: 5px;
  padding: 3px 8px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: white;
}
.sosp-preview-panel .inner .content .tag-box .tagitems:hover {
  color: var(--cl-ita-red-40);
}
.sosp-preview-panel .inner .content .tag-box .tagitems.active {
  color: var(--cl-ita-red-40);
}
.sosp-preview-panel .btn-box {
  left: 40px;
  right: 40px;
  position: absolute;
  bottom: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 10px;
}

/* ------------------------------ 
 * 마일스톤 howto 가이드 패널
 --------------------------------*/
.milestone-guide-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 8vw;
  z-index: 300;
}
.milestone-guide-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.milestone-guide-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.milestone-guide-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.milestone-guide-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.milestone-guide-panel .drag-head .close-css:before, .milestone-guide-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.milestone-guide-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.milestone-guide-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.milestone-guide-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.milestone-guide-panel .inner::-webkit-scrollbar {
  display: none;
}
.milestone-guide-panel .inner {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
}
.milestone-guide-panel .inner .mascot-box {
  display: flex;
  gap: 15px;
  align-items: center;
}
.milestone-guide-panel .inner .mascot-box .mascot {
  width: 85px;
  height: auto;
  padding: 10px 0;
}
.milestone-guide-panel .inner .mascot-box span.hello {
  color: var(--cl-text-b-40);
  display: inline-block;
  font-size: var(--font-2xl);
  padding: 20px 0;
  line-height: 1.6;
  white-space: nowrap;
}
.milestone-guide-panel .inner .mascot-box span.hello .strong {
  color: var(--nie-cl-leaf);
  font-weight: 800;
}
.milestone-guide-panel .inner .section-div-mark {
  font-size: var(--font-10xl);
  padding: 30px 0 0px 0;
}
.milestone-guide-panel .inner .content {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.milestone-guide-panel .inner .info-text {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--cl-ita-red-40);
  letter-spacing: var(--nie-letter-spacing-3);
}
.milestone-guide-panel .inner .mission_state {
  padding: 20px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}

/* ------------------------------ 
 * 종료패널 
 --------------------------------*/
.search-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 25px 35px 35px 25px;
}
.search-section .sosfeed-mission-word {
  font-size: var(--font-5xl);
  font-weight: 700;
  color: var(--cl-text-b-40);
  line-height: 1.45;
  letter-spacing: -0.5px;
  padding: 20px;
  opacity: 0.4;
  padding: 0;
}
.search-section .sosfeed-search {
  margin-right: 0.2rem;
}

.search-bar-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid gainsboro;
}

/* ------------------------------ 
     * ITACITY - INFO
     --------------------------------*/
.cityname-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  font-size: var(--font-xl);
}
/* ------------------------------ 
     * SEARCH TAB BOX
     --------------------------------*/
.search-tab-box {
  width: 100%;
  height: 3rem;
  padding: 1rem 2rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-tom: 0.1rem solid var(--cl-text-b-245);
  border-bottom: 0.1rem solid var(--cl-text-b-245);
  margin: 1rem 0;
}
.search-tab-box .key {
  display: flex;
  align-items: center;
  font-size: var(--font-lg);
  color: white;
  font-weight: 500;
  /* opacity: 0.4; */
  padding: 10px;
  background: black;
  border-radius: 10px;
}

.feedtab-item {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 12px 8px;
  margin: 0;
  color: var(--cl-text-b-120);
  cursor: pointer;
  border-radius: 0px;
}
.feedtab-item:hover {
  color: var(--cl-text-b-40);
  transform: translateY(-2px);
  transition: all 0.2s;
}
.feedtab-item.active {
  color: black;
  border-bottom: 2px solid black;
  font-weight: 600;
}

/* ------------------------------ 
     * SEARCH TAB BOX
     --------------------------------*/
.dropdown-button-box {
  width: 100%;
  padding: 1rem 2.4rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
}
.dropdown-button-box .option-btn {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--font-xl);
  color: white;
  font-weight: 600;
  padding: 8px 13px;
  background: black;
  border-radius: 10px;
}
.dropdown-button-box .text {
  font-size: var(--font-xl);
  color: var(--cl-text-b-0);
  font-weight: 600;
}

/* ------------------------------ 
    * 검색결과와 순서를 보여주는 - TAB
       --------------------------------*/
.search-tab-order-box {
  width: 100%;
  height: 3rem;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
}
.search-tab-order-box .stats {
  display: flex;
  align-items: center;
  font-size: var(--font-lg);
  color: var(--cl-text-b-0);
  font-weight: 500;
  opacity: 0.4;
}
.search-tab-order-box .orderkey {
  display: flex;
  align-items: center;
  font-size: var(--font-lg);
  color: var(--cl-text-b-0);
  font-weight: 500;
  opacity: 0.8;
}

/* ------------------------------ 
   * LAYOUT CONTAINER 
   --------------------------------*/
.feed-layout-container {
  width: 100%;
  /* ------------------------------ 
   * CONTENT BOX
    --------------------------------*/
}
@media screen and (min-width: 767px) {
  .feed-layout-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    -moz-column-gap: 2px;
         column-gap: 2px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 992px) {
  .feed-layout-container {
    -moz-column-gap: 3px;
         column-gap: 3px;
    grid-template-columns: repeat(3, 1fr);
    max-width: var(--pc-body-max-wd-2);
    margin: 0 auto;
  }
}
.feed-layout-container .sosfeed-content-container {
  padding-bottom: 25px;
  width: 100%;
  display: grid;
  /* ------------------------------ 
      * 이미지  
      --------------------------------*/
  /* ------------------------------ 
     # ------------------------------
     # 일반정보 
     # ------------------------------
     --------------------------------*/
  /* ------------------------------ 
      *  환경주소 short-URI
      --------------------------------*/
  /* ------------------------------ 
       * avatar_builder 
       --------------------------------*/
  /* ------------------------------ 
       * B TAG 
       --------------------------------*/
  /* ------------------------------ 
       * 행정주소 , time-box
       --------------------------------*/
  /* ------------------------------ 
       * 글 제목
       --------------------------------*/
  /* ------------------------------ 
       * 글내용 
       --------------------------------*/
  /* ------------------------------ 
       * taglist
       --------------------------------*/
}
@media screen and (min-width: 992px) {
  .feed-layout-container .sosfeed-content-container {
    padding-bottom: 60px;
  }
}
.feed-layout-container .sosfeed-content-container > .div-left {
  grid-column: 1/2;
  width: 100%;
  overflow-x: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.feed-layout-container .sosfeed-content-container > .div-right {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .feed-layout-container .sosfeed-content-container {
    padding: 0 !important;
  }
}
.feed-layout-container .sosfeed-content-container .div-left {
  padding: 5px 0;
}
.feed-layout-container .sosfeed-content-container .div-left .icon {
  border: 2px solid black;
  border-radius: 50px;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box {
  width: 100%;
  position: relative;
  /* ------------------------------ 
     * 이미지 슬라이더 
     --------------------------------*/
  /* ------------------------------ 
     * 이미지 슬라이더 페이징 
     --------------------------------*/
  /* ------------------------------ 
     * ecoaddr-title-box - 3줄 환경주소 제목
     --------------------------------*/
  /* ------------------------------ 
       * main-btag 표시 
      --------------------------------*/
  /* ------------------------------ 
       * 더보기 버튼 
      --------------------------------*/
  /* ------------------------------ 
     * 좋아요/댓글 
     --------------------------------*/
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  /* ------------------------------ 
   * sosfeed 
   --------------------------------*/
  /* ------------------------------ 
   * zero feed 
   --------------------------------*/
}
@media screen and (min-width: 992px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper {
    border-radius: 4.2px;
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper figure.sosfeed {
  margin: 0px !important;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper figure.sosfeed {
    height: 600px;
    border-radius: 4.2px;
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper figure.sosfeed:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(500px, 125vw, 900px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 1;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .sosfeed_img {
  width: 100%;
  height: clamp(500px, 125vw, 900px);
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 767px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .sosfeed_img {
    height: 600px;
    border-radius: 4.2px;
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .sosfeed_img.square {
  height: clamp(500px, 125vw, 900px);
}
@media screen and (min-width: 767px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .sosfeed_img.square {
    width: 100%;
    height: 600px;
    border-radius: 4.2px;
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper figure.zerofeed {
  margin: 0px !important;
  width: 100%;
  height: clamp(300px, 100vw, 900px);
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper figure.zerofeed {
    height: 400px;
    border-radius: 4.2px;
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper figure.zerofeed:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vw;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: 1;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .zerofeed_img {
  width: 100%;
  height: clamp(300px, 100vw, 900px);
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 767px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .zerofeed_img {
    height: 400px;
    border-radius: 4.2px;
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .zerofeed_img.square {
  height: clamp(300px, 100vw, 900px);
}
@media screen and (min-width: 767px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .sosfeed_img_swiper .zerofeed_img.square {
    width: 100%;
    height: 400px;
    border-radius: 4.2px;
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .swiper-pagination-sosfeed {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  /* padding: 3px 1px; */
  margin: 0 2.5px;
  display: inline-block;
  font-weight: 700;
  opacity: 1;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  outline: none;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet:hover, .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet:focus {
  outline: none;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .swiper-pagination-sosfeed .swiper-pagination-bullet-active {
  background: white;
  opacity: 1;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-tag-box {
  position: absolute;
  bottom: 40px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 10px;
  z-index: 5;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-title-box {
  position: absolute;
  top: 20px;
  left: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 10px;
  z-index: 5;
  /* ------------------------------ 
   * author-box  
   --------------------------------*/
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-title-box .word {
  font-size: var(--font-5xl);
  font-weight: 600;
  /* font-weight: 500; */
  line-height: 1.45;
  padding: 0px 0;
  opacity: 1;
  color: white;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}
@media screen and (min-width: 992px) {
  .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-title-box .word {
    font-size: var(--font-4xl);
  }
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-title-box .word.author_by {
  font-size: var(--font-md);
  margin-top: 13px;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-title-box .author-box {
  font-size: var(--font-md);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 3px 3px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-block;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-title-box .author-box:hover, .feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .ecoaddr-title-box .author-box:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .main-btag-box {
  z-index: 5;
  position: absolute;
  bottom: 18px;
  left: 10px;
  color: white;
  font-size: var(--font-lg);
  font-weight: 500;
  align-items: center;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .see-more {
  z-index: 5;
  position: absolute;
  bottom: 0px;
  right: 0px;
  flex-direction: column;
  gap: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: var(--font-xl);
  margin: 20px;
  font-weight: 600;
  cursor: pointer;
  width: -moz-max-content;
  width: max-content;
  height: 40px;
  width: 40px;
  border: 2px solid white;
  /* border-radius: 7px; */
  border-radius: 30px;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .engagement-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 0;
}
.feed-layout-container .sosfeed-content-container .sosfeed-imgSwiper-box .engagement-box .numStyle {
  font-size: var(--font-4xl);
  color: var(--cl-text-b-70);
}
.feed-layout-container .sosfeed-content-container .generalInfo-box {
  padding: 3px 20px;
}
.feed-layout-container .sosfeed-content-container .ecoaddr-short-box {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  opacity: 1;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.feed-layout-container .sosfeed-content-container .avatar_builder {
  padding: 10px 0 5px 0;
}
.feed-layout-container .sosfeed-content-container .b-tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 0 5px 0;
  letter-spacing: var(--nie-letter-spacing-5);
}
.feed-layout-container .sosfeed-content-container .b-tag-box .b-tagitems {
  font-size: var(--font-xl);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 5px 12px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: var(--cl-ita-red-40);
}
.feed-layout-container .sosfeed-content-container .b-tag-box .b-tagitems:hover, .feed-layout-container .sosfeed-content-container .b-tag-box .b-tagitems:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.feed-layout-container .sosfeed-content-container .b-tag-box .phrase {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.feed-layout-container .sosfeed-content-container .admin-addr,
.feed-layout-container .sosfeed-content-container .time-box {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  opacity: 0.6;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.feed-layout-container .sosfeed-content-container .post-title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-0);
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  letter-spacing: var(--nie-letter-spacing-3);
}
.feed-layout-container .sosfeed-content-container .posttext {
  font-size: var(--font-lg);
  font-weight: 400;
  color: var(--cl-text-b-0);
  line-height: 1.7;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: var(--nie-letter-spacing-3);
}
.feed-layout-container .sosfeed-content-container .tag-section {
  display: flex;
  align-items: center;
  gap: 5px;
}
.feed-layout-container .sosfeed-content-container .tag-section .tag-item-container {
  padding: 1px 2px;
}
.feed-layout-container .sosfeed-content-container .tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 3px 0;
  align-items: center;
  font-weight: 600;
  color: var(--cl-text-b-120);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.feed-layout-container .sosfeed-content-container .tag-box .tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 4px 9px;
  letter-spacing: -0.1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
  background: rgba(0, 0, 0, 0.3411764706);
}
.feed-layout-container .sosfeed-content-container .tag-box .tagitems.border-white {
  border: 1px solid white;
}
.feed-layout-container .sosfeed-content-container .tag-box .tagitems:hover, .feed-layout-container .sosfeed-content-container .tag-box .tagitems:active {
  transform: scale(1.03);
}
.feed-layout-container .sosfeed-content-container .tag-box.itared_highlight {
  color: var(--cl-ita-red-40);
  background: var(--cl-btn-bg-vague-itared);
}
.feed-layout-container .sosfeed-content-container .contribution-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
  gap: 5px;
}
.feed-layout-container .sosfeed-content-container .contribution-box .title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feed-layout-container .sosfeed-content-container .contribution-box .title-box .title,
.feed-layout-container .sosfeed-content-container .contribution-box .title-box .count {
  font-size: var(--font-3xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
}
.feed-layout-container .sosfeed-content-container .contribution-box .content-box {
  padding: 20px 10px;
  border-radius: 10px;
  background: #f2f2f2;
  color: var(--cl-text-b-40);
}
.feed-layout-container .sosfeed-content-container .contribution-box .content-box .text {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}

.tagitems-basic {
  font-size: var(--font-lg);
  font-weight: 600;
  color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 4px 9px;
  letter-spacing: -0.1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
  background: rgba(0, 0, 0, 0.3411764706);
}
.tagitems-basic.border-white {
  border: 1px solid white;
}
.tagitems-basic:hover, .tagitems-basic:active {
  transform: scale(1.03);
}

/* ------------------------------ 
      * feed-top 
      --------------------------------*/
.feed-top-builder {
  font-size: var(--font-xl);
  display: flex;
  align-items: center;
  letter-spacing: var(--nie-letter-spacing-5);
  color: var(--cl-text-b-70);
}
.feed-top-builder .icon {
  border: 1px solid rgb(70, 70, 70);
  border-radius: 50px;
}
.feed-top-builder .text {
  color: var(--cl-text-b-40);
  font-weight: 700;
}
.feed-top-builder .timeago {
  font-weight: 500;
  color: var(--cl-text-b-150);
  font-size: var(--font-xl);
}
.feed-top-builder .timeago.black {
  color: var(--cl-text-b-40);
}
.feed-top-builder .link {
  margin-left: auto;
}

.backblur-30 {
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
}

.feed-jsloader-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
}
.feed-jsloader-screen .js-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: view-more-spin 0.3s linear infinite;
  margin: 0 auto;
}

.basic-time-box {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  opacity: 0.6;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ------------------------------
  # 검색 패널
  --------------------------------*/
.ita-search-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  z-index: 300;
  padding: 15px 15px 0 15px;
  height: 100%;
}
.ita-search-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.ita-search-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.ita-search-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.ita-search-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.ita-search-panel .drag-head .close-css:before, .ita-search-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.ita-search-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.ita-search-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.ita-search-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ita-search-panel .inner::-webkit-scrollbar {
  display: none;
}
.ita-search-panel .inner {
  max-height: calc(var(--vh, 1vh) * 100 - 70px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  padding-bottom: 20px;
  letter-spacing: var(--nie-letter-spacing-5);
  /* ------------------------------ 
     * 제목 
     --------------------------------*/
  /* ------------------------------ 
     * 검색항목 
     --------------------------------*/
}
.ita-search-panel .inner .head-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.ita-search-panel .inner .head-box .title {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
}
.ita-search-panel .inner .list-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.ita-search-panel .inner .list-box .item-box {
  border-bottom: 0.1rem solid var(--cl-text-b-245);
  padding: 1rem;
  border-radius: 0.8rem;
  font-size: var(--font-xl);
  color: var(--cl-text-b-70);
  cursor: pointer;
}
.ita-search-panel .inner .list-box .item-box:hover {
  background-color: var(--cl-item-hover);
}
.ita-search-panel .inner .list-box .item-box li.text {
  font-size: var(--font-xl);
  color: var(--cl-text-b-70);
}

/* ------------------------------
  # 검색 패널
  --------------------------------*/
/* ------------------------------ 
 * 검색창 
 --------------------------------*/
.feed-search-inputBox {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  position: relative;
}
.feed-search-inputBox input.feed-searchInput {
  width: 100%;
  height: 50px;
  color: black;
  background: #ffffff;
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
  border-radius: 10px;
}
.feed-search-inputBox input.feed-searchInput::-moz-placeholder {
  color: black;
  opacity: 0.5;
}
.feed-search-inputBox input.feed-searchInput::placeholder {
  color: black;
  opacity: 0.5;
}
.feed-search-inputBox input.feed-searchInput:-internal-autofill-selected {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 100px #ffffff inset !important;
  color: black !important;
}
.feed-search-inputBox input.feed-searchInput:-webkit-autofill, .feed-search-inputBox input.feed-searchInput:-webkit-autofill:hover, .feed-search-inputBox input.feed-searchInput:-webkit-autofill:focus, .feed-search-inputBox input.feed-searchInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
.feed-search-inputBox .search-allIcon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-4xl);
  border-radius: 50%;
}

header.club-header-box.nav-down {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: none;
  border-bottom: 1px solid gainsboro;
  z-index: 100;
  position: fixed;
  top: 0;
  transition: top 0.3s ease-in-out 0.25s ease;
  /* 부드러운 이동을 위한 트랜지션 */
}
header.club-header-box.nav-down.nav-up {
  top: -50px;
  background: white;
}
header.club-header-box.nav-down .club-header-title {
  font-size: var(--font-lg);
  font-weight: 600;
}
header.club-header-box.nav-down button.club-edit-btn {
  border-radius: 8px;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 600;
  background: gainsboro;
  font-size: calc(2vw + 3px);
  color: rgb(0, 0, 0);
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  /* font-weight: 500; */
  padding: 10px 10px;
}
header.club-header-box.nav-down button.club-edit-btn:focus, header.club-header-box.nav-down button.club-edit-btn:active {
  background: black;
  color: white;
}

.club-userStatus-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

main.club-item-screen {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  /* ------------------------------ */
}
main.club-item-screen article.club-article {
  padding: 20px 20px;
}
main.club-item-screen .club-bannerimg-box .club_img {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}
main.club-item-screen .club-avatar-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 125px;
  background: rgba(149, 149, 149, 0.1019607843);
  position: relative;
}
main.club-item-screen .club-avatar-box .club-avatar {
  position: absolute;
  right: 20px;
  top: 75px;
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
main.club-item-screen .club-profile-box {
  padding: 20px 20px 40px 20px;
}
main.club-item-screen .club-profile-box h1.club-mainTitle {
  padding: 5px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  margin: 0;
}
main.club-item-screen .club-profile-box .club-accountId {
  padding: 3px 0;
  font-size: var(--font-lg);
  color: var(--color-lightgray);
  font-weight: 500;
  margin: 0;
}
main.club-item-screen .club-profile-box .club-stats-box {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 300;
  margin: 0;
}
main.club-item-screen .club-profile-box .club-stats-box .club-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  gap: 5px;
}
main.club-item-screen .club-profile-box .club-stats-box .club-stat-label {
  font-size: var(--font-lg);
  font-weight: 400;
  color: var(--color-darkgray);
}
main.club-item-screen .club-profile-box .club-stats-box .club-stat-val {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-darkgray);
}
main.club-item-screen .club-profile-box .club-category-box {
  display: flex;
  padding: 5px 0;
  gap: 10px;
  overflow-x: auto;
}
main.club-item-screen .club-profile-box .club-category-box .club-category-text {
  padding: 5px 10px;
  color: var(--color-lightgray);
  font-size: var(--font-lg);
  border: 1px solid var(--color-lightgray);
  font-weight: 500;
  border-radius: 20px;
}
main.club-item-screen .club-notice-box {
  padding: 20px 20px 40px 20px;
}
main.club-item-screen .club-notice-box .club-notice-title {
  padding: 5px 0;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--color-darkgray);
}
main.club-item-screen .club-notice-box .club-notice-content {
  padding: 5px 0;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--color-darkgray);
}
main.club-item-screen .club-contents-box {
  height: -moz-max-content;
  height: max-content;
}
main.club-item-screen .club-contents-box .club-post {
  padding: 5px 0;
  font-size: var(--font-lg);
  font-weight: 500;
  color: rgb(51, 51, 51);
  line-height: 1.75;
}
main.club-item-screen .club-contents-box .club-addr {
  padding: 5px 0;
  font-size: var(--font-lg);
  font-weight: 500;
  color: gray;
}
main.club-item-screen .club-contents-box .club-title {
  padding: 10px 0;
  font-size: var(--font-lg);
  font-weight: 600;
}
main.club-item-screen .club-contents-box .club-like-box {
  display: flex;
  gap: 2px;
}
main.club-item-screen .club-contents-box .club-like-box .club-like-icon {
  font-size: var(--font-lg);
  color: #00a159;
}
main.club-item-screen .club-contents-box .club-like-box .club-like-count {
  font-size: var(--font-lg);
  color: #00a159;
}
main.club-item-screen .club-contents-box .club-timeago {
  padding: 5px 0;
  font-size: var(--font-lg);
  font-weight: 500;
  color: darkgrey;
}
main.club-item-screen .club-contents-box .club-created {
  padding: 5px 0;
  font-size: var(--font-lg);
  font-weight: 500;
  color: darkgrey;
}
main.club-item-screen .club-contents-box .club-socialLinks-box {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 0;
}
main.club-item-screen .club-contents-box .club-socialLinks-box .club-socialLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  padding: 5px 12px;
  border-radius: 10px;
  background: rgba(149, 149, 149, 0.1019607843);
  color: var(--color-darkgray);
  cursor: pointer;
  font-size: var(--font-lg);
}
main.club-item-screen .club-contents-box .club-socialLinks-box .club-socialLink:hover, main.club-item-screen .club-contents-box .club-socialLinks-box .club-socialLink:active {
  background: black;
  color: white;
}
main.club-item-screen .club-divider {
  height: 1px;
  background: rgba(169, 169, 169, 0.3529411765);
}

.club_idx_imgSwiper {
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  overflow-x: hidden;
  position: relative;
}
.club_idx_imgSwiper .swiper-pagination-club {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  text-align: center;
}
.club_idx_imgSwiper .swiper-pagination-club .swiper-pagination-bullet {
  width: 15px;
  height: 2px;
  /* padding: 3px 1px; */
  margin: 0 3px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: #c0dcff;
  border-radius: 2px;
  font-size: 11px;
  /* background: none; */
  opacity: 1;
}
.club_idx_imgSwiper .swiper-pagination-club .swiper-pagination-bullet:hover, .club_idx_imgSwiper .swiper-pagination-club .swiper-pagination-bulletfocus {
  outline: none;
}
.club_idx_imgSwiper .swiper-pagination-club .swiper-pagination-bullet-active {
  font-weight: 900;
  background: #094fa3;
}

#clubPOST_cudModal .clubp--box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
}
#clubPOST_cudModal .clubp--box .clubp--label {
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 12px 2px;
  width: 100%;
}
#clubPOST_cudModal .clubp--category-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow-x: auto;
}
#clubPOST_cudModal .clubp--category-box .clubp--category-icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
#clubPOST_cudModal .clubp--category-box .clubp--category-icon-box .clubp--category-icon {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid rgba(0, 93, 51, 0.1647058824);
  background: white;
  position: relative;
}
#clubPOST_cudModal .clubp--category-box .clubp--category-icon-box .clubp--category-icon.selected {
  border: 1px solid #35644f;
  background: rgba(0, 161, 89, 0.1647058824);
  position: relative;
}
#clubPOST_cudModal .clubp--category-box .clubp--category-icon-box .clubp--category-icon-text {
  font-size: calc(2vw + 3px);
  font-weight: 500;
}
#clubPOST_cudModal .clubp--find-curloc-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
#clubPOST_cudModal .clubp--find-curloc-box button.clubp--find-curloc-btn {
  border-radius: 8px;
  background: black;
  font-size: calc(2vw + 3px);
  color: white;
  width: -moz-max-content;
  width: max-content;
  font-weight: 500;
  padding: 5px 10px;
}
#clubPOST_cudModal .clubp--find-curloc-box button.clubp--find-curloc-btn:focus, #clubPOST_cudModal .clubp--find-curloc-box button.clubp--find-curloc-btn:active {
  background: black;
  color: white;
}
#clubPOST_cudModal .clubp--map-box {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}
#clubPOST_cudModal .clubp--map-box .clubp--mapStyle {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0px 0px 1px 3px rgba(0, 0, 0, 0.108);
}
#clubPOST_cudModal .clubp--map-box .clubp--map-viewchange-box {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
#clubPOST_cudModal .clubp--map-box .clubp--map-viewchange-box button.clubp--maptype-btn {
  border-radius: 15px;
  border: 1px solid;
  font-size: calc(2vw + 3px);
  color: black;
  width: -moz-max-content;
  width: max-content;
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  background: white;
}
#clubPOST_cudModal .clubp--map-box .clubp--map-viewchange-box button.clubp--maptype-btn.selected {
  background: black;
  color: white;
}
#clubPOST_cudModal .clubp--map-box .clubp--map-viewchange-box button.clubp--maptype-btn:focus, #clubPOST_cudModal .clubp--map-box .clubp--map-viewchange-box button.clubp--maptype-btn:active {
  background: black;
  color: white;
}
#clubPOST_cudModal .clubp--map-box .clubp--map-locdata-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
#clubPOST_cudModal .clubp--map-box .clubp--map-locdata-box .clubp--map-locdata {
  font-size: calc(3vw + 3px);
  font-weight: 500;
}
#clubPOST_cudModal .clubp-pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3vw 0;
  overflow-x: scroll;
  scrollbar-width: none;
}
#clubPOST_cudModal .clubp-pics-uploadBox::-webkit-scrollbar {
  display: none;
}
#clubPOST_cudModal .clubp-pics-uploadBox .clubp-upload-plus {
  position: relative;
  width: 85px;
  margin-right: 10px;
  border: 1px solid gainsboro;
  border-radius: 10px;
  cursor: pointer;
}
#clubPOST_cudModal .clubp-pics-uploadBox .clubp-upload-div {
  position: relative;
  width: 85px;
  margin-right: 10px;
  border: 1px solid gainsboro;
  border-radius: 10px;
}
#clubPOST_cudModal .clubp-pics-uploadBox .clubp-upload-div .clubp-upload-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--CSV-Color);
}
#clubPOST_cudModal .clubp-pics-uploadBox .clubp-upload-div .clubp-upload-on {
  border-radius: 10px;
  width: 85px;
}
#clubPOST_cudModal .clubp--inputnone {
  display: inline-block;
  font-size: calc(2vw + 8px);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}
#clubPOST_cudModal .clubp_imgNum_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#clubPOST_cudModal .clubp_imgNum_style .clubp_UploadNum {
  color: var(--CSV-Color);
  font-weight: 500;
}
#clubPOST_cudModal .clubp_postCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#clubPOST_cudModal .clubp_postCount_style .clubp_postCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#clubPOST_cudModal .clubp_titleCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#clubPOST_cudModal .clubp_titleCount_style .clubp_titleCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#clubPOST_cudModal .clubp--submit-box {
  display: flex;
  border-top: 1px solid gainsboro;
}
#clubPOST_cudModal textarea.clubp_post {
  border-radius: 8px;
  width: 100%;
  height: 100px;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: calc(2vw + 8px);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
  letter-spacing: -1px;
}
#clubPOST_cudModal textarea.clubp_post::-moz-placeholder {
  color: black;
}
#clubPOST_cudModal textarea.clubp_post::placeholder {
  color: black;
}
#clubPOST_cudModal textarea.clubp_post:focus {
  outline: none;
}
#clubPOST_cudModal textarea.clubp_post:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#clubPOST_cudModal textarea.clubp_post:-webkit-autofill, #clubPOST_cudModal textarea.clubp_post:-webkit-autofill:hover, #clubPOST_cudModal textarea.clubp_post:-webkit-autofill:focus, #clubPOST_cudModal textarea.clubp_post:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#clubPOST_cudModal input[type=date]::-webkit-calendar-picker-indicator {
  display: block;
}
#clubPOST_cudModal input.clubp_title {
  border-radius: 8px;
  width: 100%;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: calc(2vw + 8px);
  position: relative;
  letter-spacing: -1px;
}
#clubPOST_cudModal input.clubp_title::-moz-placeholder {
  color: black;
}
#clubPOST_cudModal input.clubp_title::placeholder {
  color: black;
}
#clubPOST_cudModal input.clubp_title:focus {
  outline: none;
}
#clubPOST_cudModal input.clubp_title:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#clubPOST_cudModal input.clubp_title:-webkit-autofill, #clubPOST_cudModal input.clubp_title:-webkit-autofill:hover, #clubPOST_cudModal input.clubp_title:-webkit-autofill:focus, #clubPOST_cudModal input.clubp_title:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#clubPOST_cudModal .clubp_category_box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
#clubPOST_cudModal button.clubp--submit {
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  height: 50px;
  font-weight: 500;
  margin: 2vh 6vw;
}
#clubPOST_cudModal button.clubp--submit.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
#clubPOST_cudModal button.clubp--submit:focus, #clubPOST_cudModal button.clubp--submit:active {
  background: black;
  color: white;
}

.clubp_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 250;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
  /* Modal Content/Box */
}
.clubp_cropmodal .croppie-container .cr-viewport,
.clubp_cropmodal .croppie-container .cr-resizer {
  border: none !important;
}
.clubp_cropmodal .clubp_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: var(--CSV-Color);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.clubp_cropmodal .clubp_cropmodal-content > .ga {
  grid-area: a;
}
.clubp_cropmodal .clubp_cropmodal-content > .gb {
  grid-area: b;
}
.clubp_cropmodal .clubp_cropmodal-content > .gc {
  grid-area: c;
}

/* ------------------------------ 
 # 태그 리스트 스크린 
 --------------------------------*/
.main-infolist-screen {
  display: block;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 1;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  /* ------------------------------ 
   * list
   --------------------------------*/
}
.main-infolist-screen > .inner {
  display: grid;
  grid-template: "back" 50px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -0.7px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.main-infolist-screen > .inner > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.main-infolist-screen > .inner > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 50px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 30;
}
.main-infolist-screen > .inner > .g-head {
  grid-area: back;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3vw;
  font-weight: 500;
  z-index: 10;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.main-infolist-screen > .inner > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 15px;
  font-size: var(--font-2xl);
  z-index: 5;
}
.main-infolist-screen > .inner > .g-body {
  grid-area: body;
  overflow: auto;
}
.main-infolist-screen > .inner > .g-body .g-body-tab {
  display: flex;
  align-items: center;
}
.main-infolist-screen > .inner > .g-all {
  display: block;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.main-infolist-screen > .inner > .g-btn {
  grid-area: btn;
}
.main-infolist-screen > .inner > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}
@media screen and (min-width: 992px) {
  .main-infolist-screen {
    padding-left: var(--pc-leftbar-wd);
  }
}
.main-infolist-screen .inner > .g-head {
  z-index: 3 !important;
  font-size: var(--font-xl);
  color: var(--cl-text-b-40);
}
.main-infolist-screen .list-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0px;
  letter-spacing: -0.3px;
  /* ------------------------------ 
   * total count 
   --------------------------------*/
  /* ------------------------------ 
  * list item 
  --------------------------------*/
}
.main-infolist-screen .list-box .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  line-height: 1.7;
  padding: 15px 20px;
}
.main-infolist-screen .list-box .mission-word .changeing-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  box-shadow: inset 0 -7px 0 rgba(83, 185, 255, 0.5019607843);
  /*-10px은 highlight의 두께*/
  font-weight: bold;
  overflow: hidden;
  /*ease-in-out대신에ease사용하여부드러운효과부여*/
  transition: background-color 0.5s ease;
}
.main-infolist-screen .list-box .totalcnt-box {
  padding: 10px 20px;
  font-size: var(--font-xl);
  border-top: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
}
.main-infolist-screen .list-box .totalcnt-box .totalcnt-num {
  font-weight: 600;
  color: var(--cl-ita-red-40);
}
.main-infolist-screen .list-box .totalcnt-box .totalcnt-text {
  font-weight: 500;
  color: var(--cl-text-b-120);
}
.main-infolist-screen .list-box .item {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  -moz-column-gap: 10px;
       column-gap: 10px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
}
.main-infolist-screen .list-box .item:hover, .main-infolist-screen .list-box .item:focus {
  background: #f0f0f0;
}
.main-infolist-screen .list-box .item .item-img {
  width: 50px;
  height: 50px;
  background: #f0f0f0;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-infolist-screen .list-box .item .item-title {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  padding-bottom: 5px;
}
.main-infolist-screen .list-box .item .item-desc {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-120);
}
.main-infolist-screen .list-box .item .item-count {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-ita-red-40);
}
.main-infolist-screen .list-box .item .item-link {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 10px;
  padding: 3px 6px;
  background-color: var(--cl-ita-red-40);
}

/* ------------------------------ 
 # 환경플러스 태그 등록 스크린 
 --------------------------------*/
.main-infopost-screen {
  overscroll-behavior: contain;
  display: block;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 1;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  letter-spacing: -0.3px;
  /* ------------------------------ 
   * 페이지 배너
   --------------------------------*/
  /* ------------------------------ 
   * 페이지 전체 컨테이너 
   --------------------------------*/
  /* ------------------------------ 
  * 정보 등록 패널 
  --------------------------------*/
  /* ------------------------------ 
  * (사용) 하단고정 
  --------------------------------*/
  /* ------------------------------ 
  * (미사용) 하단 submit - 슬라이더 형태로 사용하지 않음. 
  --------------------------------*/
}
.main-infopost-screen > .inner {
  display: grid;
  grid-template: "back" 50px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -0.7px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.main-infopost-screen > .inner > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.main-infopost-screen > .inner > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 50px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 30;
}
.main-infopost-screen > .inner > .g-head {
  grid-area: back;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3vw;
  font-weight: 500;
  z-index: 10;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.main-infopost-screen > .inner > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 15px;
  font-size: var(--font-2xl);
  z-index: 5;
}
.main-infopost-screen > .inner > .g-body {
  grid-area: body;
  overflow: auto;
}
.main-infopost-screen > .inner > .g-body .g-body-tab {
  display: flex;
  align-items: center;
}
.main-infopost-screen > .inner > .g-all {
  display: block;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.main-infopost-screen > .inner > .g-btn {
  grid-area: btn;
}
.main-infopost-screen > .inner > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}
.main-infopost-screen .inner > .g-head {
  z-index: 3 !important;
}
.main-infopost-screen .welcome-banner {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 50;
  position: absolute;
  display: none;
  background-color: white;
  border: 3px solid;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .main-infopost-screen .welcome-banner {
    width: 400px;
    height: 400px;
    margin: auto;
  }
}
.main-infopost-screen .welcome-banner.open {
  display: flex;
}
.main-infopost-screen .welcome-banner .banner-grid {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  width: 100%;
  gap: 10px;
  padding: 10px 20px;
  align-items: center;
  justify-content: center;
  color: var(--cl-text-b-0);
  font-size: var(--font-lg);
  font-weight: 500;
  letter-spacing: -0.3px;
}
.main-infopost-screen .welcome-banner .banner-grid .banner-title {
  font-size: var(--font-5xl);
  font-weight: 600;
  padding: 5px 0;
}
@media screen and (min-width: 992px) {
  .main-infopost-screen .welcome-banner .banner-grid .banner-title {
    font-size: var(--font-5xl);
  }
}
.main-infopost-screen .welcome-banner .banner-grid .banner-desc {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-text-b-0);
  opacity: 0.5;
}
.main-infopost-screen .welcome-banner .banner-grid .banner-img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 992px) {
  .main-infopost-screen .welcome-banner .banner-grid .banner-img {
    width: 100px;
    height: 100px;
  }
}
.main-infopost-screen .infop-page-container {
  background: white;
  color: black;
}
.main-infopost-screen .infop--section-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.6rem 5.6rem 1.6rem 1.6rem;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.main-infopost-screen .infop--titlebox {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.main-infopost-screen .infop--titlebox.col {
  flex-direction: column;
  align-items: flex-start;
}
.main-infopost-screen .infop--titlebox .infop--label-checkbox-box {
  position: absolute;
  top: 15px;
  display: flex;
  align-items: center;
  padding: 3px 6px 3px 6px;
  border-radius: 12px;
}
.main-infopost-screen .infop--titlebox .infop--label-checkbox-box .infop--label-checkbox {
  display: inline-block;
  width: var(--font-xs);
  height: var(--font-xs);
  border: 1px solid rgb(99, 99, 99);
  border-radius: 50%;
  margin-right: 2px;
}
.main-infopost-screen .infop--titlebox .infop--label-checkbox-box .infop--label-checkbox.optional {
  boarder: none;
}
.main-infopost-screen .infop--titlebox .infop--label-checkbox-box .infop--label-checkbox.active {
  border: 2px solid #ff5f5f;
  background: #ff5f5f;
}
.main-infopost-screen .infop--titlebox .infop--label-checkbox-box .is_req {
  display: inline-block;
  font-size: var(--font-md);
  font-weight: 500;
  margin-left: 2px;
  color: var(--cl-text-b-150);
}
.main-infopost-screen .infop--titlebox .infop--label {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 14px 2px 4px 2px;
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -0.5px;
  margin-top: 10px;
  background: transparent;
  color: white;
  border-radius: 8px;
  text-align: left;
  line-height: 1.5;
  color: black;
}
.main-infopost-screen .infop--titlebox .infop--label .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  line-height: 1.5;
}
.main-infopost-screen .infop--sticky-section {
  background: white;
  z-index: 4;
  padding: 20px 30px;
  margin: 0 !important;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.main-infopost-screen .infop--sticky-section.no-padding {
  padding: 0 !important;
}
.main-infopost-screen .infop--picket-textbox {
  position: relative;
  z-index: 2;
  padding: 0px 0px;
  border-radius: 10px;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-2xl);
  font-weight: 600;
}
.main-infopost-screen .infop--picket-textbox .placeholder {
  color: white;
  opacity: 0.6;
  font-size: var(--font-2xl);
  font-weight: 400;
}
.main-infopost-screen .infop--picket-textbox .picket-curaddr {
  font-size: var(--font-2xl);
  font-weight: 400;
}
.main-infopost-screen .infop--picket-textbox .picket-author {
  font-size: var(--font-xl);
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.main-infopost-screen .swiper-slider-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.main-infopost-screen .process-check-box {
  word-break: keep-all;
  position: absolute;
  top: 12px;
  right: 33px;
  transform: none;
  bottom: unset;
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 5px 5px;
  justify-content: space-between;
  align-items: space-between;
  z-index: 15;
}
.main-infopost-screen .process-check-box .check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000000;
  height: 6px;
  width: 6px;
  opacity: 0.3;
  color: black;
  margin: 0 !important;
}
.main-infopost-screen .process-check-box .check-dot.active {
  background: #ff5f5f;
  opacity: 1;
}
.main-infopost-screen .swiper-pagination-infop {
  word-break: keep-all;
  position: absolute;
  top: 10px;
  right: 0;
  transform: none;
  bottom: unset;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 5px;
  justify-content: center;
  align-items: space-between;
  z-index: 10;
}
.main-infopost-screen .swiper-pagination-infop .swiper-pagination-bullet {
  width: -moz-max-content;
  width: max-content;
  height: 20px;
  line-height: 20px;
  padding: 0px 8px 0px 14px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 500;
  background: white;
  border-radius: 7px 7px 7px 0;
  font-size: var(--font-lg);
  /* background: none; */
  opacity: 0.7;
  color: black;
  margin: 0 !important;
}
.main-infopost-screen .swiper-pagination-infop .swiper-pagination-bullet:hover, .main-infopost-screen .swiper-pagination-infop .swiper-pagination-bullet:focus {
  outline: none;
}
.main-infopost-screen .swiper-pagination-infop .swiper-pagination-bullet-active {
  font-weight: 600;
  background: var(--cl-text-b-150);
  color: white;
  opacity: 1;
}
.main-infopost-screen .infop--display-seltag-box {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 8px;
       column-gap: 8px;
  row-gap: 5px;
  padding: 5px 0;
}
.main-infopost-screen .emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}
.main-infopost-screen .infop--seltag-icon-text {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.main-infopost-screen .infop--seltag-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border-radius: 8px 8px 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  padding: 5px 7px;
  color: var(--cl-ita-red-40);
  position: relative;
}
.main-infopost-screen .infop--seltag-icon-box.selected {
  color: var(--cl-ita-red-40);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  position: relative;
}
.main-infopost-screen .infop--seltag-icon-box .selMark {
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
  font-weight: 700;
  width: 8px;
  height: 8px;
  color: black;
  background: var(--cl-ita-red-40);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.main-infopost-screen .infop--display-posttext {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-120);
  line-height: 1.5;
  padding: 5px 7px;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  border: 1px solid #fff7f0;
  color: var(--cl-text-b-70);
  background: #fff7f0;
  position: relative;
  margin: 10px 0;
  /* border: 1px solid rgba(255, 87, 34, 0.1490196078); */
  border-radius: 8px 8px 8px 0;
}
.main-infopost-screen .sticky-section {
  position: sticky;
  top: 0;
  z-index: 5;
  background: white;
}
.main-infopost-screen .infop--display-btag-box {
  display: flex;
  -moz-column-gap: 8px;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
  padding: 15px 10px;
}
.main-infopost-screen .infop--display-btag-box .btag-item {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: #ffffff;
  background: #000000;
  padding: 8px 16px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px 10px 10px 0;
}
.main-infopost-screen .infop--display-btag-box .btag-item .emoji {
  margin-right: 2px;
  font-size: var(--font-2xl);
  color: #ffffff;
}
.main-infopost-screen .infop--display-btag-box .btag-item .tagname {
  font-size: var(--font-xl);
  font-weight: 600;
  color: #ffffff;
}
.main-infopost-screen .infop--display-btag-box .btag-item .delete {
  font-size: var(--font-2xl);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  border-radius: 50%;
}
.main-infopost-screen .close-text {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: rgb(255, 255, 255);
  cursor: pointer;
  background: #030303;
  padding: 5px 12px;
  border-radius: 6px;
}
.main-infopost-screen .infop--tag-box-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.main-infopost-screen .infop--tag-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 0;
  background: white;
  padding: 5px 7px;
  color: var(--cl-text-b-40);
  position: relative;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.main-infopost-screen .infop--tag-icon-box.selected {
  border: 1px solid var(--cl-ita-red-40);
  color: white;
  background: var(--cl-ita-red-40);
  /* color: white; */
  position: relative;
}
.main-infopost-screen .infop--tag-icon-box.more {
  background: black;
  border: 1px solid black;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
}
.main-infopost-screen .infop--tag-icon-box .emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}
.main-infopost-screen .infop--tag-icon-box .infop--tag-icon {
  width: 25px;
  height: 25px;
  padding: 3px;
  position: relative;
}
.main-infopost-screen .infop--tag-icon-box .infop--tag-icon-text {
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.95px;
}
.main-infopost-screen .infop--tag-icon-box .sel-order {
  font-size: var(--font-md);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.main-infopost-screen .infop--tagstat-icon-box {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border: 1px solid #fff7f0;
  border-radius: 8px;
  background: #fff7f0;
  padding: 5px 7px;
  color: var(--cl-text-b-70);
  position: relative;
}
.main-infopost-screen .infop--tagstat-icon-box.selected {
  border: 1px solid var(--cl-ita-red-40);
  color: white;
  background: var(--cl-ita-red-40);
  /* color: white; */
  border-radius: 8px;
  position: relative;
}
.main-infopost-screen .infop--tagstat-icon-box.more {
  background: black;
  border: 1px solid black;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
}
.main-infopost-screen .infop--tagstat-icon-box .infop--tagstat-bar {
  position: absolute;
  left: 0;
  height: 100%;
  background: var(--cl-ita-red-40);
}
.main-infopost-screen .infop--tagstat-icon-box .emoji {
  margin-right: 4px;
  font-size: var(--font-xl);
}
.main-infopost-screen .infop--tagstat-icon-box .infop--tagstat-text {
  font-size: var(--font-xl);
  font-weight: 500;
  letter-spacing: -0.95px;
}
.main-infopost-screen .infop--tagstat-icon-box .sel-order {
  font-size: var(--font-md);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.main-infopost-screen .infop--map-box {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}
.main-infopost-screen .infop--mapStyle {
  width: 100%;
}
.main-infopost-screen .infop--mapStyle.infop-type {
  height: calc(var(--vh, 1vh) * 100);
}
.main-infopost-screen .infop_tagpanel {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  padding: 20px;
}
@media screen and (min-width: 992px) {
  .main-infopost-screen .infop_tagpanel {
    left: var(--pc-leftbar-wd);
  }
}
.main-infopost-screen .infop_tagpanel .infop_swiper {
  background: white;
  border-radius: 10px;
  height: calc(var(--vh, 1vh) * 30);
  min-height: 170px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
}
.main-infopost-screen .infop--map-viewchange-box {
  z-index: 10;
  position: absolute;
  top: 12px;
  right: 9px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  flex-direction: column;
  /* ------------------------------ 
  * 보기전환 
  --------------------------------*/
  /* ------------------------------ 
   * 카테고리 선택 버튼 
   --------------------------------*/
}
.main-infopost-screen .infop--map-viewchange-box .infop--util-btn-box {
  width: 45px;
  height: -moz-max-content;
  height: max-content;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.main-infopost-screen .infop--map-viewchange-box .infop--util-btn-box button {
  font-size: var(--font-md);
  color: black;
  border: none;
  border-radius: 50%;
}
.main-infopost-screen .infop--map-viewchange-box .infop--util-btn-box.selected {
  background: white;
  color: black;
}
.main-infopost-screen .infop--map-viewchange-box .infop--util-btn-box:focus, .main-infopost-screen .infop--map-viewchange-box .infop--util-btn-box:active {
  transform: scale(1.03);
}
.main-infopost-screen .infop--map-viewchange-box .infop--category-btn-box {
  width: 45px;
  height: -moz-max-content;
  height: max-content;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.main-infopost-screen .infop--map-viewchange-box .infop--category-btn-box button {
  font-size: var(--font-md);
  color: black;
  border: none;
  border-radius: 50%;
}
.main-infopost-screen .infop--map-viewchange-box .infop--category-btn-box.selected {
  background: white;
  color: black;
}
.main-infopost-screen .infop--map-viewchange-box .infop--category-btn-box:focus, .main-infopost-screen .infop--map-viewchange-box .infop--category-btn-box:active {
  transform: scale(1.03);
}
.main-infopost-screen .infop--find-curloc-guidebox {
  width: 100%;
  background: rgba(106, 255, 112, 0.1098039216);
  padding: 10px;
  margin: 10px 0;
  display: flex;
  color: #6aff70;
  gap: 10px;
  border-radius: 8px;
}
.main-infopost-screen .infop--find-curloc-guidebox .infop--find-curloc-guide {
  font-size: var(--font-lg);
  font-weight: 500;
  line-height: 1.5;
}
.main-infopost-screen .infop--find-curloc-box,
.main-infopost-screen .infop--open-taglist-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.main-infopost-screen .infop--find-curloc-box button.infop--btn,
.main-infopost-screen .infop--open-taglist-box button.infop--btn {
  border-radius: 10px 10px 10px 0;
  font-size: var(--font-lg);
  border: 1px solid;
  background: transparent;
  background: var(--cl-text-b-40);
  color: white;
  width: -moz-max-content;
  width: max-content;
  font-weight: 600;
  padding: 9px 12px;
  width: max-content;
}
.main-infopost-screen .infop--find-curloc-box button.infop--btn:focus, .main-infopost-screen .infop--find-curloc-box button.infop--btn:active,
.main-infopost-screen .infop--open-taglist-box button.infop--btn:focus,
.main-infopost-screen .infop--open-taglist-box button.infop--btn:active {
  transform: scale(1.03);
}
.main-infopost-screen .infop--picket {
  background: var(--cl-text-b-40);
  color: white;
  z-index: 2;
  padding: 18px 15px;
  margin: 0 !important;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.0784313725);
  position: relative;
  width: 145px;
  height: 165px;
  position: absolute;
  bottom: 28px;
  pointer-events: none;
  left: 0px;
  border-radius: 18px 18px 18px 4px;
}
.main-infopost-screen .infop--picket.no-padding {
  padding: 0 !important;
}
.main-infopost-screen .infop--picket-img {
  display: none;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  filter: brightness(0.4);
  border-radius: 25px 25px 25px 4px;
}
.main-infopost-screen .infop-curaddr {
  font-size: var(--font-xl);
  color: gray;
  margin-left: auto;
  padding-top: 15px;
}
.main-infopost-screen .infop--citycode-box {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: -moz-max-content;
  width: max-content;
  font-size: var(--font-sm);
  letter-spacing: -0.3px;
  z-index: 2;
  position: relative;
}
.main-infopost-screen .infop--citycode-box .prefix {
  display: none;
  background: #FF5722;
  font-weight: 600;
  padding: 2px 5px;
  width: -moz-max-content;
  width: max-content;
  border-radius: 4px;
}
.main-infopost-screen .infop--citycode-box .prefix.light {
  background: none;
  color: white;
  font-weight: 500;
  padding: 2px 5px;
  width: -moz-max-content;
  width: max-content;
  border-radius: 4px;
}
.main-infopost-screen .infop--citycode-box .infop-citycode {
  display: none;
  opacity: 0.5;
  color: white;
}
.main-infopost-screen .infop--picket-btag-box {
  position: absolute;
  bottom: 18px;
  left: 15px;
  z-index: 2;
}
.main-infopost-screen .infop--picket-btag-box .picket-feature {
  font-size: var(--font-sm);
  background: var(--cl-ita-red-40);
  font-weight: 500;
  padding: 2px 5px;
  width: -moz-max-content;
  width: max-content;
  border-radius: 4px;
  color: white;
}
.main-infopost-screen .infop--picket-btag-box .placeholder {
  color: white;
  opacity: 0.6;
  font-size: var(--font-sm) !important;
}
.main-infopost-screen .infop--picket-avatar {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
}
.main-infopost-screen .infop-pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
  overflow-x: scroll;
  scrollbar-width: none;
}
.main-infopost-screen .infop-pics-uploadBox::-webkit-scrollbar {
  display: none;
}
.main-infopost-screen .infop-pics-uploadBox .infop-upload-plus {
  position: relative;
  width: 50px;
  margin-right: 10px;
  border: 1px solid rgb(190, 190, 190);
  border-radius: 10px;
  cursor: pointer;
}
.main-infopost-screen .infop-pics-uploadBox .infop-upload-div {
  position: relative;
  width: 50px;
  margin-right: 10px;
  border-radius: 10px;
}
.main-infopost-screen .infop-pics-uploadBox .infop-upload-div .infop-upload-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 18px;
  cursor: pointer;
  padding: 10px 0;
  border-radius: 50%;
  background: white;
  color: var(--cl-ita-red-40);
  border: 1px solid var(--cl-ita-red-40);
  font-weight: 600;
}
.main-infopost-screen .infop-pics-uploadBox .infop-upload-div .infop-upload-on {
  border-radius: 10px;
  width: 50px;
}
.main-infopost-screen .infop--inputnone {
  display: inline-block;
  font-size: calc(2vw + 8px);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}
.main-infopost-screen .infop_imgNum_style {
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: var(--font-xl);
  padding-right: 15px;
  display: flex;
  margin-left: auto;
  opacity: 0.5;
}
.main-infopost-screen .infop_imgNum_style .infop_UploadNum {
  color: black;
  font-weight: 500;
}
.main-infopost-screen input[type=date]::-webkit-calendar-picker-indicator {
  display: block;
}
.main-infopost-screen input.infop_title {
  border-radius: 6px;
  width: 100%;
  height: 30px;
  border: none;
  color: var(--cl-text-b-70);
  background: var(--back-lightgray);
  padding: 10px 15px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  position: relative;
  letter-spacing: -1px;
}
.main-infopost-screen input.infop_title::before {
  content: "#";
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 100%;
  border-right: 1px solid;
}
.main-infopost-screen input.infop_title::-moz-placeholder {
  color: var(--cl-text-b-70);
}
.main-infopost-screen input.infop_title::placeholder {
  color: var(--cl-text-b-70);
}
.main-infopost-screen input.infop_title:focus {
  outline: none;
}
.main-infopost-screen input.infop_title:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: var(--cl-text-b-70) !important;
}
.main-infopost-screen input.infop_title:-webkit-autofill, .main-infopost-screen input.infop_title:-webkit-autofill:hover, .main-infopost-screen input.infop_title:-webkit-autofill:focus, .main-infopost-screen input.infop_title:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-text-b-70) !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
.main-infopost-screen .infop_category_box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.main-infopost-screen .infop-submission-bottom {
  position: absolute;
  bottom: 5px;
  right: 0px;
  left: 0px;
  padding: 10px 20px;
  z-index: 10;
}
@media screen and (min-width: 992px) {
  .main-infopost-screen .infop-submission-bottom {
    left: var(--pc-leftbar-wd);
  }
}
.main-infopost-screen .infop-submission-bottom .button-box {
  border-radius: 10px;
  background: white;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 6px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
}
.main-infopost-screen .infop--submit-box {
  position: relative;
  padding: 20px 18vw 20px 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-infopost-screen .infop--submit-box .btn {
  border-radius: 10px 10px 10px 0;
  background: var(--cl-ita-red-40);
  font-size: var(--font-2xl);
  letter-spacing: -0.3px;
  color: white;
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -1px;
  width: max-content;
  padding: 5px 12px;
  height: 45px;
  font-weight: 700;
  border: 1px solid;
  cursor: pointer;
}

.infop_cropmodal {
  display: none;
  /*Hiddenbydefault*/
  position: fixed;
  /*Stayinplace*/
  z-index: 250;
  /*Sitontop*/
  left: 0;
  top: 0;
  width: 100%;
  /*Fullwidth*/
  height: 100%;
  /*Fullheight*/
  overflow: auto;
  /*Enablescrollifneeded*/
  background-color: rgb(0, 0, 0);
  /*Fallbackcolor*/
  background-color: rgba(0, 0, 0, 0.4);
  /*Blackw/opacity*/
  transition: all 1s ease-in-out;
  /* Modal Content/Box */
}
.infop_cropmodal .croppie-container .cr-viewport,
.infop_cropmodal .croppie-container .cr-resizer {
  border: none !important;
}
.infop_cropmodal .infop_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: var(--CSV-Color);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.infop_cropmodal .infop_cropmodal-content > .ga {
  grid-area: a;
}
.infop_cropmodal .infop_cropmodal-content > .gb {
  grid-area: b;
}
.infop_cropmodal .infop_cropmodal-content > .gc {
  grid-area: c;
}

.infop-picket-style {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 288px;
  height: 132px;
  margin-left: -144px;
  text-align: left;
  overflow: hidden;
  font-size: 12px;
  font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
  line-height: 1.5;
}
.infop-picket-style * {
  padding: 0;
  margin: 0;
}
.infop-picket-style .info {
  width: 286px;
  height: 120px;
  border-radius: 5px;
  border-bottom: 2px solid #ccc;
  border-right: 1px solid #ccc;
  overflow: hidden;
  background: #fff;
}
.infop-picket-style .info::after {
  content: "";
  position: absolute;
  margin-left: -12px;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 12px;
  background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
}
.infop-picket-style .info:nth-child(1) {
  border: 0;
  box-shadow: 0px 1px 2px #888;
}
.infop-picket-style .info .link {
  color: #5085BB;
}
.infop-picket-style .info .img {
  position: absolute;
  top: 6px;
  left: 5px;
  width: 73px;
  height: 71px;
  border: 1px solid #ddd;
  color: #888;
  overflow: hidden;
}
.infop-picket-style .info .title {
  padding: 5px 0 0 10px;
  height: 30px;
  background: #eee;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  font-weight: bold;
}
.infop-picket-style .info .close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #888;
  width: 17px;
  height: 17px;
  background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png");
  cursor: pointer;
}
.infop-picket-style .info .close:hover {
  color: var(--cl-ita-red-40);
}
.infop-picket-style .info .body {
  position: relative;
  overflow: hidden;
}
.infop-picket-style .info .info .desc {
  position: relative;
  margin: 13px 0 0 90px;
  height: 75px;
}
.infop-picket-style .info .info .desc .ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.infop-picket-style .info .info .desc .ellipsis .jibun {
  font-size: 11px;
  color: #888;
  margin-top: -2px;
}

.infop-moretag-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 3vw !important;
}
.infop-moretag-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.infop-moretag-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.infop-moretag-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.infop-moretag-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.infop-moretag-panel .drag-head .close-css:before, .infop-moretag-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.infop-moretag-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.infop-moretag-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.infop-moretag-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.infop-moretag-panel .inner::-webkit-scrollbar {
  display: none;
}
.infop-moretag-panel .drag-head {
  padding: 0 10px;
}
.infop-moretag-panel .drag-head .type-cnt {
  font-size: var(--font-3xl);
  color: var(--cl-ita-red-40);
  font-weight: bold;
  margin-right: 5px;
}
.infop-moretag-panel .inner {
  max-height: calc(var(--vh, 1vh) * 100 - 150px);
  overflow-y: auto;
}
.infop-moretag-panel .inner.fixed-height {
  height: calc(var(--vh, 1vh) * 100 - 150px);
}
.infop-moretag-panel .inner .guideline {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  padding: 10px 10px 10px 10px;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.infop-moretag-panel .inner .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-150);
  line-height: 1.6;
  padding: 0 10px;
}
.infop-moretag-panel .inner .tabbox {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}
.infop-moretag-panel .inner .tabbox .infop--tabitem {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  border-radius: 10px;
  padding: 5px 10px;
  letter-spacing: -0.3px;
  cursor: pointer;
}
.infop-moretag-panel .inner .tabbox .infop--tabitem:hover {
  color: var(--cl-ita-red-40);
}
.infop-moretag-panel .inner .tabbox .infop--tabitem.active {
  color: var(--cl-ita-red-40);
}
.infop-moretag-panel .inner .content {
  display: flex;
  row-gap: 12px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  flex-wrap: wrap;
  padding: 20px 0px 40px 0;
  height: -moz-max-content;
  height: max-content;
  font-size: var(--font-xl);
  font-weight: 500;
  overflow-x: hidden;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-5);
}

.infop_postCount_style {
  letter-spacing: -1.1px;
  font-weight: 300;
  font-size: var(--font-xl);
  padding-right: 15px;
  color: var(--cl-text-b-150);
  display: flex;
  margin-left: auto;
}
.infop_postCount_style .infop_postCount {
  color: var(--cl-text-b-70);
  font-weight: 500;
}

.infop_titleCount_style {
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
  margin-left: auto;
}
.infop_titleCount_style .infop_titleCount {
  color: black;
  font-weight: 500;
}

textarea.infop_post {
  border-radius: 10px 10px 10px 0;
  width: 95%;
  margin: auto;
  height: 100px;
  color: black;
  background: #fcffcf;
  padding: 15px 12px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
  letter-spacing: -1px;
  border: 1px solid #f1f7a6;
}
textarea.infop_post::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  color: white;
  margin-top: -1px;
  border-width: 16px;
  border-style: solid;
  border-radius: 3px;
}
textarea.infop_post::-moz-placeholder {
  color: var(--cl-text-b-140);
}
textarea.infop_post::placeholder {
  color: var(--cl-text-b-140);
}
textarea.infop_post:focus {
  outline: none;
}
textarea.infop_post:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: var(--cl-text-b-70) !important;
}
textarea.infop_post:-webkit-autofill, textarea.infop_post:-webkit-autofill:hover, textarea.infop_post:-webkit-autofill:focus, textarea.infop_post:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--cl-text-b-70) !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.infop--btag-find-box {
  width: 100%;
}

/* ------------------------------ 
 * 등록전 미리보기 
 --------------------------------*/
.infop-preview-panel {
  max-height: 0;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  width: 100%;
  padding: 25px 40px;
  height: 100%;
  background: var(--cl-text-b-70);
  color: var(--cl-text-b-40);
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* ------------------------------ 
   * inner 
   --------------------------------*/
  /* ------------------------------ 
     * btn-box
     --------------------------------*/
}
.infop-preview-panel.open {
  display: grid;
  grid-template-rows: 1fr 50px;
  gap: 10px;
  max-height: 5000px;
  transition: max-height 0.3s ease-in-out;
}
.infop-preview-panel .inner {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #f9f9f9;
  padding: 0 20px;
  overflow-y: auto;
  overflow-x: hidden;
  /* ------------------------------ 
   * head 
   --------------------------------*/
  /* ------------------------------ 
   * content 
   --------------------------------*/
}
.infop-preview-panel .inner::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  margin-top: 0px;
  border-width: 24px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent var(--cl-ita-red-40) transparent;
}
.infop-preview-panel .inner .head-box .title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  padding: 10px 0;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.infop-preview-panel .inner .content {
  width: 100%;
  padding-bottom: 30px;
  /* ------------------------------ 
   * author-box 
   --------------------------------*/
  /* ------------------------------ 
   * avatar_builder 
   --------------------------------*/
  /* ------------------------------ 
   * B TAG 
   --------------------------------*/
  /* ------------------------------ 
   * 행정주소 , time-box
   --------------------------------*/
  /* ------------------------------ 
   * 글내용 
   --------------------------------*/
  /* ------------------------------ 
   * 이미지 슬라이더 
   --------------------------------*/
  /* ------------------------------ 
   * taglist
   --------------------------------*/
}
.infop-preview-panel .inner .content .title-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.infop-preview-panel .inner .content .author-box {
  padding: 10px 0 5px 0;
  color: var(--cl-text-b-40);
  font-weight: 600;
  font-size: var(--font-xl);
}
.infop-preview-panel .inner .content .avatar_builder {
  padding: 10px 0 5px 0;
}
.infop-preview-panel .inner .content .author-box {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-block;
  background: var(--cl-ita-red-40);
}
.infop-preview-panel .inner .content .author-box:hover, .infop-preview-panel .inner .content .author-box:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.infop-preview-panel .inner .content .b-tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 0 5px 0;
  letter-spacing: var(--nie-letter-spacing-5);
}
.infop-preview-panel .inner .content .b-tag-box .b-tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 4px 10px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: var(--cl-ita-red-40);
}
.infop-preview-panel .inner .content .b-tag-box .b-tagitems:hover, .infop-preview-panel .inner .content .b-tag-box .b-tagitems:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.infop-preview-panel .inner .content .b-tag-box .phrase {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.infop-preview-panel .inner .content .addr_full,
.infop-preview-panel .inner .content .time-box {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 4px 0;
  opacity: 0.6;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.infop-preview-panel .inner .content .posttext {
  font-size: var(--font-xl);
  font-weight: 400;
  color: var(--cl-text-b-0);
  padding: 10px 10px 10px 10px;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-5);
  white-space: pre-line;
}
.infop-preview-panel .inner .content figure.milestone {
  margin: 0;
}
.infop-preview-panel .inner .content figure.milestone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.452) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 2;
}
.infop-preview-panel .inner .content .infop_miles_imgswiper {
  height: 100%;
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  /* ------------------------------ 
  * ecoaddr-title-box - 3줄 환경주소 
  --------------------------------*/
}
.infop-preview-panel .inner .content .infop_miles_imgswiper .milestone-img {
  width: 100%;
  height: 40vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  border-radius: 0;
  filter: brightness(0.9);
}
.infop-preview-panel .inner .content .infop_miles_imgswiper .ecoaddr-title-box {
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 2;
  font-size: var(--font-4xl);
  font-weight: 600;
  color: white;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-3);
}
.infop-preview-panel .inner .content .swiper-pagination-infop-preview {
  text-align: center;
  padding-top: 2px;
}
.infop-preview-panel .inner .content .swiper-pagination-infop-preview .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--cl-text-b-40);
  opacity: 0.1;
  border-radius: 50%;
  margin: 0px 1px;
}
.infop-preview-panel .inner .content .swiper-pagination-infop-preview .swiper-pagination-bullet-active {
  background: var(--cl-ita-red-40);
  opacity: 1;
}
.infop-preview-panel .inner .content .tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  font-weight: 600;
  color: var(--cl-text-b-120);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.infop-preview-panel .inner .content .tag-box .tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-ita-red-40);
  border-radius: 5px;
  padding: 3px 8px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: white;
}
.infop-preview-panel .inner .content .tag-box .tagitems:hover {
  color: var(--cl-ita-red-40);
}
.infop-preview-panel .inner .content .tag-box .tagitems.active {
  color: var(--cl-ita-red-40);
}
.infop-preview-panel .btn-box {
  left: 40px;
  right: 40px;
  position: absolute;
  bottom: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 10px;
}

/* ------------------------------ 
 * 마일스톤 howto 가이드 패널
 --------------------------------*/
.milestone-guide-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 8vw;
  z-index: 300;
}
.milestone-guide-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.milestone-guide-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.milestone-guide-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.milestone-guide-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.milestone-guide-panel .drag-head .close-css:before, .milestone-guide-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.milestone-guide-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.milestone-guide-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.milestone-guide-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.milestone-guide-panel .inner::-webkit-scrollbar {
  display: none;
}
.milestone-guide-panel .inner {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
}
.milestone-guide-panel .inner .mascot-box {
  display: flex;
  gap: 15px;
  align-items: center;
}
.milestone-guide-panel .inner .mascot-box .mascot {
  width: 85px;
  height: auto;
  padding: 10px 0;
}
.milestone-guide-panel .inner .mascot-box span.hello {
  color: var(--cl-text-b-40);
  display: inline-block;
  font-size: var(--font-2xl);
  padding: 20px 0;
  line-height: 1.6;
  white-space: nowrap;
}
.milestone-guide-panel .inner .mascot-box span.hello .strong {
  color: var(--nie-cl-leaf);
  font-weight: 800;
}
.milestone-guide-panel .inner .section-div-mark {
  font-size: var(--font-10xl);
  padding: 30px 0 0px 0;
}
.milestone-guide-panel .inner .content {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.milestone-guide-panel .inner .info-text {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--cl-ita-red-40);
  letter-spacing: var(--nie-letter-spacing-3);
}
.milestone-guide-panel .inner .mission_state {
  padding: 20px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}

/* ------------------------------ 
 * 카테고리 패널 
 --------------------------------*/
.infop-category-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 8vw;
  z-index: 300;
}
.infop-category-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.infop-category-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.infop-category-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.infop-category-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.infop-category-panel .drag-head .close-css:before, .infop-category-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.infop-category-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.infop-category-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.infop-category-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.infop-category-panel .inner::-webkit-scrollbar {
  display: none;
}
.infop-category-panel .inner {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
  /* ------------------------------ 
   * cate-grid-box 
   --------------------------------*/
}
.infop-category-panel .inner .cate-grid-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.infop-category-panel .inner .cate-grid-box .cate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 15px 0;
}
.infop-category-panel .inner .cate-grid-box .cate-item .cate-icon {
  width: 40px;
  height: 40px;
  background: var(--cl-ita-red-40);
  border-radius: 10px;
  filter: saturate(0);
  opacity: 0.3;
}
.infop-category-panel .inner .cate-grid-box .cate-item .cate-name {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 3px 0;
  line-height: 1.6;
  text-align: center;
}
.infop-category-panel .inner .cate-grid-box .cate-item.selected .cate-icon {
  filter: saturate(1);
  opacity: 1;
}
.infop-category-panel .inner .section-div-mark {
  font-size: var(--font-10xl);
  padding: 30px 0 0px 0;
}
.infop-category-panel .inner .content {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.infop-category-panel .inner .info-text {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--cl-ita-red-40);
  letter-spacing: var(--nie-letter-spacing-3);
}
.infop-category-panel .inner .mission_state {
  padding: 20px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}

/* ------------------------------ 
 * 종료패널 
 --------------------------------*/
/* ------------------------------ 
  *
  * 새로운 우츨 리스트 형태의 정보등록 패널 24-05-01 
  *
  --------------------------------*/
/* ------------------------------ 
   * 페이지 전체 컨테이너 
   --------------------------------*/
.infop-page-container-list {
  /* ------------------------------ 
  * 등록하기 패널 
  --------------------------------*/
}
.infop-page-container-list .infop-tagpanel-list {
  position: absolute;
  top: unset;
  bottom: 50px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  padding: 20px;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* ------------------------------ 
  * 공통 섹션 스타일
  --------------------------------*/
}
@media screen and (min-width: 992px) {
  .infop-page-container-list .infop-tagpanel-list {
    position: absolute;
    top: 0;
    bottom: unset;
    left: unset;
    right: 0;
    width: 400px;
    height: calc(var(--vh, 1vh) * 100 - 100px);
    z-index: 10;
    padding: 20px;
  }
}
.infop-page-container-list .infop-tagpanel-list .infop--section-box-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.6rem 5.6rem 1.6rem 1.6rem;
  border: 1px solid var(--cl-text-b-0);
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list.col {
  flex-direction: column;
  align-items: flex-start;
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list .infop--label-checkbox-box {
  display: flex;
  align-items: center;
  padding: 3px 6px 3px 6px;
  border-radius: 12px;
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list .infop--label-checkbox-box .infop--label-checkbox {
  display: inline-block;
  width: var(--font-xs);
  height: var(--font-xs);
  border: 1px solid rgb(99, 99, 99);
  border-radius: 50%;
  margin-right: 2px;
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list .infop--label-checkbox-box .infop--label-checkbox.optional {
  boarder: none;
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list .infop--label-checkbox-box .infop--label-checkbox.active {
  border: 2px solid #ff5f5f;
  background: #ff5f5f;
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list .infop--label-checkbox-box .is_req {
  display: inline-block;
  font-size: var(--font-md);
  font-weight: 500;
  margin-left: 2px;
  color: var(--cl-text-b-150);
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list .infop--label {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 14px 2px 4px 2px;
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -0.5px;
  margin-top: 10px;
  background: transparent;
  color: white;
  border-radius: 8px;
  text-align: left;
  line-height: 1.5;
  color: black;
}
.infop-page-container-list .infop-tagpanel-list .infop--titlebox-list .infop--label .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
  line-height: 1.5;
}
.infop-page-container-list .infop-submission-bottom-list {
  position: absolute;
  top: unset;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  z-index: 10;
  padding: 20px;
}
@media screen and (min-width: 992px) {
  .infop-page-container-list .infop-submission-bottom-list {
    position: absolute;
    top: unset;
    bottom: 0;
    left: unset;
    right: 0;
    width: 400px;
    height: 100px;
    z-index: 10;
    padding: 20px;
  }
}
.infop-page-container-list .infop-submission-bottom-list .button-box {
  border-radius: 10px;
  background: white;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  gap: 6px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
}

.cityview-tab-content {
  display: none;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}
.cityview-tab-content.selected {
  display: block;
}

/* ------------------------------ 
* summary 
--------------------------------*/
.city-catalog-summary {
  padding: 1rem 2rem;
}
.city-catalog-summary .summary-box {
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  border-radius: 1rem;
  letter-spacing: var(--nie-letter-spacing-3);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem;
}
.city-catalog-summary .summary-box .stats {
  font-size: var(--font-lg);
  font-weight: 500;
  display: flex;
  color: var(--cl-text-b-150);
  align-items: center;
}
.city-catalog-summary .summary-box .stats .cssIcon {
  width: var(--font-xl);
  height: var(--font-xl);
  margin-right: 0.3rem;
}
.city-catalog-summary .summary-box .stats .sub {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-150);
  margin-left: 0.5rem;
}

/* ------------------------------ 
* header : 우리가 만드는 동네변화
--------------------------------*/
.search-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 2rem 2.5rem;
}
.search-section .catalog-mission-word {
  font-size: var(--font-5xl);
  font-weight: 700;
  color: var(--cl-text-b-40);
  line-height: 1.45;
  letter-spacing: -0.5px;
  padding: 20px;
  opacity: 0.4;
  opacity: 0.9;
  padding: 0;
}
.search-section .catalog-search {
  margin-right: 0.2rem;
}

/* ------------------------------ 
* LAYOUT CONTAINER 
--------------------------------*/
.catalog-layout-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  font-size: var(--font-lg);
}
@media screen and (min-width: 992px) {
  .catalog-layout-container {
    padding: var(--pc-screen-padding-y20);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 20px;
         column-gap: 20px;
    row-gap: 20px;
  }
}

/* ------------------------------ 
   * SEARCH TAB BOX - 사용
   --------------------------------*/
.city-tab-box {
  width: 100%;
  padding: 1rem 2rem;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
}
.city-tab-box::-webkit-scrollbar {
  display: none;
}
.city-tab-box.active {
  cursor: grabbing;
}
.city-tab-box .key {
  display: flex;
  align-items: center;
  font-size: var(--font-lg);
  color: var(--cl-text-b-0);
  border-radius: 0.5rem;
  padding: 0.8rem 1.4rem;
  font-weight: 500;
  opacity: 0.8;
  background-color: var(--cl-text-b-245);
  letter-spacing: var(--nie-letter-spacing-5);
}
.city-tab-box .key.selected {
  background-color: var(--cl-ita-green);
  color: white;
  opacity: 1;
  font-weight: 600;
}

/* ------------------------------ 
   * SEARCH TAB BOX - 미사용
   --------------------------------*/
.search-tab-box {
  width: 100%;
  height: 3rem;
  padding: 1rem 2rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-tom: 0.1rem solid var(--cl-text-b-245);
  border-bottom: 0.1rem solid var(--cl-text-b-245);
  margin: 1rem 0;
}
.search-tab-box .key {
  display: flex;
  align-items: center;
  font-size: var(--font-lg);
  color: var(--cl-text-b-0);
  font-weight: 500;
  opacity: 0.4;
}

/* ------------------------------ 
* 검색결과와 순서를 보여주는 - TAB
   --------------------------------*/
.search-tab-order-box {
  width: 100%;
  height: 3rem;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
}
.search-tab-order-box .stats {
  display: flex;
  align-items: center;
  font-size: var(--font-lg);
  color: var(--cl-text-b-0);
  font-weight: 500;
  opacity: 0.4;
}
.search-tab-order-box .orderkey {
  display: flex;
  align-items: center;
  font-size: var(--font-lg);
  color: var(--cl-text-b-0);
  font-weight: 500;
  opacity: 0.8;
}

/* ------------------------------ 
   * empty 
   --------------------------------*/
.mycity-item-empty {
  background-color: var(--cl-text-b-245);
  padding: 2rem;
  border-radius: 10rem;
  font-size: var(--font-xl);
}

/* ------------------------------ 
 *   이타시티 콘텐츠 컨테이너 - LAYOUT 
 --------------------------------*/
.my-itacity-layout {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2rem;
  /* ------------------------------ 
   # [ pc ] screen 
  --------------------------------*/
}
.my-itacity-layout .mycity-item-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 1rem;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.my-itacity-layout .mycity-item-box .mycity-item {
  /* ------------------------------ 
  * 나의 이타시티 - ITEM 
  --------------------------------*/
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  flex: none;
  padding: 1.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  align-items: flex-end;
  letter-spacing: var(--nie-letter-spacing-3);
}
.my-itacity-layout .mycity-item-box .mycity-item .city-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.my-itacity-layout .mycity-item-box .mycity-item .city-title .text_city {
  font-size: var(--font-7xl);
  color: var(--cl-ita-green);
  opacity: 0.7;
  margin-bottom: 1.5rem;
  font-weight: 300;
}
.my-itacity-layout .mycity-item-box .mycity-item .city-title .name_city {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--cl-text-b-40);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.my-itacity-layout .mycity-item-box .mycity-item .engage_type {
  width: clamp(10px, 3vw, 20px);
  height: clamp(10px, 3vw, 20px);
  border-radius: 10rem;
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--font-md);
  color: var(--cl-white);
  background: var(--cl-ita-red-40);
  padding: 0.5rem 1rem;
  transform: translateX(-50%);
}
.my-itacity-layout .mycity-item-box .mycity-item .addr {
  font-size: var(--font-md);
  color: var(--cl-text-b-40);
  opacity: 0.5;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.my-itacity-layout .mycity-item-box .mycity-item .stats-box {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.my-itacity-layout .mycity-item-box .mycity-item .stats-box .stats {
  font-weight: 500;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  font-size: var(--font-md);
  color: var(--cl-text-b-70);
}
.my-itacity-layout .mycity-item-box .mycity-item .stats-box .stats .cssIcon {
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.3rem;
}
.my-itacity-layout .mycity-item-box .mycity-link {
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: var(--font-xl);
}
@media screen and (min-width: 992px) {
  .my-itacity-layout {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 20px;
         column-gap: 20px;
    row-gap: 20px;
    padding: 0 20px;
  }
  .my-itacity-layout .mycity-item-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 1rem;
    box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
    -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
    -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  }
  .my-itacity-layout .mycity-item-box .mycity-item {
    /* ------------------------------ 
    * 나의 이타시티 - ITEM 
    --------------------------------*/
    width: 100%;
    height: -moz-max-content;
    height: max-content;
    display: flex;
    flex: none;
    flex-direction: column;
    padding: 1.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

.mycity-enroll-guide-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 8vw;
  z-index: 300;
}
.mycity-enroll-guide-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.mycity-enroll-guide-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.mycity-enroll-guide-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.mycity-enroll-guide-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.mycity-enroll-guide-panel .drag-head .close-css:before, .mycity-enroll-guide-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.mycity-enroll-guide-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.mycity-enroll-guide-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.mycity-enroll-guide-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mycity-enroll-guide-panel .inner::-webkit-scrollbar {
  display: none;
}
.mycity-enroll-guide-panel .inner {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
}
.mycity-enroll-guide-panel .inner .mascot-box {
  display: flex;
  gap: 15px;
  align-items: center;
}
.mycity-enroll-guide-panel .inner .mascot-box .mascot {
  width: 85px;
  height: auto;
  padding: 10px 0;
}
.mycity-enroll-guide-panel .inner .mascot-box span.hello {
  color: var(--cl-text-b-40);
  display: inline-block;
  font-size: var(--font-2xl);
  padding: 20px 0;
  line-height: 1.6;
  white-space: nowrap;
}
.mycity-enroll-guide-panel .inner .mascot-box span.hello .strong {
  color: var(--nie-cl-leaf);
  font-weight: 800;
}
.mycity-enroll-guide-panel .inner .section-div-mark {
  font-size: var(--font-10xl);
  padding: 30px 0 0px 0;
}
.mycity-enroll-guide-panel .inner .content {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.mycity-enroll-guide-panel .inner .info-text {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--cl-ita-red-40);
  letter-spacing: var(--nie-letter-spacing-3);
}
.mycity-enroll-guide-panel .inner .mission_state {
  padding: 20px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #ffffff;
  }
  40% {
    stroke: #ffffff;
  }
  66% {
    stroke: #ffffff;
  }
  80%, 90% {
    stroke: #ffffff;
  }
}
@keyframes color-black {
  100%, 0% {
    stroke: black;
  }
  40% {
    stroke: black;
  }
  66% {
    stroke: black;
  }
  80%, 90% {
    stroke: black;
  }
}
/* ------------------------------ 
 * mixin 
 --------------------------------*/
/* ------------------------------ 
 * 범용 스피너 
 --------------------------------*/
/* ------------------------------ 
 * class 
 --------------------------------*/
.ita-spinner-fullback {
  /*화면전체를어둡게합니다.*/
  display: none;
  z-index: 10;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.65);
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#20000000", endColorstr="#20000000");
}
.ita-spinner-fullback .ita-spinner {
  position: relative;
  margin: 0px auto;
  width: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ita-spinner-fullback .ita-spinner:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.ita-spinner-fullback .ita-spinner .circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.ita-spinner-fullback .ita-spinner .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

.ita-spinner-box {
  display: block;
  height: 40px;
  background: transparent;
}
.ita-spinner-box .ita-spinner {
  position: relative;
  margin: 0px auto;
  width: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ita-spinner-box .ita-spinner:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.ita-spinner-box .ita-spinner .circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.ita-spinner-box .ita-spinner .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

.ldld {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.ldld.running {
  visibility: visible;
  opacity: 1;
}
.ldld.dark {
  color: rgba(0, 0, 0, 0.5);
}
.ldld.light {
  color: rgba(255, 255, 255, 0.5);
}
.ldld.default:before, .ldld.full:before, .ldld.ldbtn:before, .ldld.bare:before {
  content: " ";
  display: block;
  background: 0;
  animation: ldld-default 0.5s ease-in-out infinite;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-color: currentColor transparent currentColor transparent;
}
.ldld.default {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
}
.ldld.default.sm, .ldld.default.ldbtn.sm {
  width: 16px;
  height: 16px;
}
.ldld.default.em-1, .ldld.default.ldbtn.em-1 {
  width: 1em;
  height: 1em;
}
.ldld.default.em-2, .ldld.default.ldbtn.em-2 {
  width: 2em;
  height: 2em;
}
.ldld.ldbtn {
  width: 32px;
  height: 32px;
}
.ldld.full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.ldld.full:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 48px;
  height: 48px;
}

@keyframes ldld-default {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.litterwork_find_box {
  position: relative;
  padding: 8px 0;
  color: #00502b;
}

.litterFind-icon {
  position: absolute;
  left: 4vw;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  border-radius: 50%;
}

.litterfindInputBox {
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  justify-content: center;
  margin: 20px auto;
  display: flex;
  align-items: center;
  position: relative;
}
.litterfindInputBox .alllitterFind {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  border-radius: 50%;
}

input#litterfindInput {
  border-radius: 50px;
  width: 85vw;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  font-size: calc(2vw + 7px);
  position: relative;
}
input#litterfindInput::-moz-placeholder {
  color: black;
}
input#litterfindInput::placeholder {
  color: black;
}
input#litterfindInput:focus {
  outline: none;
}
input#litterfindInput:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
input#litterfindInput:-webkit-autofill, input#litterfindInput:-webkit-autofill:hover, input#litterfindInput:-webkit-autofill:focus, input#litterfindInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

input#litterFind_input_SignPanel {
  border-radius: 50px;
  color: #00502b;
  width: 100%;
  height: 35px;
  border: none;
  background: rgba(0, 119, 64, 0.1215686275);
  padding: 0 10vw;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  font-size: calc(2vw + 9px);
  position: relative;
}
input#litterFind_input_SignPanel::-moz-placeholder {
  color: #00502b !important;
}
input#litterFind_input_SignPanel::placeholder {
  color: #00502b !important;
}
input#litterFind_input_SignPanel:focus {
  outline: none;
}
input#litterFind_input_SignPanel:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: black !important;
}
input#litterFind_input_SignPanel:-webkit-autofill, input#litterFind_input_SignPanel:-webkit-autofill:hover, input#litterFind_input_SignPanel:-webkit-autofill:focus, input#litterFind_input_SignPanel:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.litterfind-resultList {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  width: 95%;
  margin: auto;
  max-height: calc(var(--vh, 1vh) * 100 - 240px);
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  flex-direction: column;
  border-radius: 25px;
  box-shadow: 0px 1px 10px 1px gainsboro;
}
.litterfind-resultList::first-child {
  background: aliceblue;
}
.litterfind-resultList li {
  border-top: 1px solid lightGrey;
  display: flex;
  align-items: center;
  padding: 20px;
  width: 100%;
}
.litterfind-resultList .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: calc(1px + 3vw);
}
.litterfind-resultList .litter-profile {
  width: 9vw;
  height: 9vw;
  /* border: 1px solid #aeaeae; */
  border: 1px solid #e7e7e7;
  padding: 3px;
  border-radius: 3vw;
}
.litterfind-resultList .litter-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 4vw;
  color: black;
}
.litterfind-resultList .litter-textbox .litter-title {
  opacity: 1;
  font-size: var(--font-3xl);
  font-weight: 600;
}
.litterfind-resultList .litter-textbox .litter-type {
  opacity: 0.7;
  color: black;
  font-size: var(--font-lg);
  padding-top: 5px;
}
.litterfind-resultList .litter-select,
.litterfind-resultList .litter-custom {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid rgba(2, 2, 2, 0.6509803922);
  border-radius: 8px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: calc(3px + 3vw);
  cursor: pointer;
}
.litterfind-resultList .litter-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

button.litter_ex_submit {
  display: none;
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  height: 50px;
  font-weight: 500;
  margin: 10px 0;
}
button.litter_ex_submit.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
button.litter_ex_submit:focus, button.litter_ex_submit:active {
  background: black;
  color: white;
}

.litter-range-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80vw;
}
.litter-range-container .litter-box-minmax {
  margin-top: 25px;
  width: 80vw;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: #FFFFFF;
}
.litter-range-container .litter-box-minmax span:first-child {
  margin-left: 10px;
}
.litter-range-container .litter-range-slider {
  background-image: url(../public/img/litterMeasure/square.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform-origin: center center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 145px;
  height: 145px;
  line-height: 1;
  margin: 0 auto;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
.litter-range-container .litter-range-slider .litterR-bullet-label {
  font-weight: bold;
  font-style: normal;
  line-height: normal;
  font-size: 36px;
}
.litter-range-container .litter-range-slider .litterR-bullet-unit {
  font-size: 20px;
  margin-top: -2px;
  letter-spacing: 0.07em;
}
.litter-range-container .litterSlider-line {
  margin-top: 29px;
  width: 80vw;
  -webkit-appearance: none;
}
.litter-range-container .litterSlider-line:focus {
  outline: none;
}
.litter-range-container .litterSlider-line::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #ffffff;
  border-radius: 0px;
  border: 0px solid #010101;
}
.litter-range-container .litterSlider-line::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #ffffff;
  border-radius: 0px;
  border: 0px solid #010101;
}
.litter-range-container .litterSlider-line::-webkit-slider-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 42px;
  width: 22px;
  border-radius: 22px;
  background: rgb(255, 255, 255);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -20px;
}
.litter-range-container .litterSlider-line::-moz-range-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 42px;
  width: 22px;
  border-radius: 22px;
  background: rgb(255, 255, 255);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -20px;
}
.litter-range-container .litterSlider-line::-moz-focus-outer {
  border: 0;
}

.main-akkim-page {
  padding: 20px;
  background: #ffeaea;
}
@media screen and (min-width: 992px) {
  .main-akkim-page .inner {
    max-width: 760px;
    margin: 0 auto;
  }
}
.main-akkim-page .event-img-slide {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 8px;
}
.main-akkim-page .event-img-slide::-webkit-scrollbar {
  display: none;
}
.main-akkim-page .event-img-slide.active {
  cursor: grabbing;
}
.main-akkim-page .akkim-likebtn {
  display: block;
  height: 40px;
  width: 40px;
  background-size: cover;
}
.main-akkim-page .akkim-likebtn.liked svg {
  fill: var(--cl-ita-red-40);
}
.main-akkim-page .akkim-likecount {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: black;
}

.main-akkim-mappage {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}
@media screen and (min-width: 992px) {
  .main-akkim-mappage {
    max-width: 800px;
    margin: 0 auto;
  }
}
.main-akkim-mappage .goto-link {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  padding: 10px;
  cursor: pointer;
  background: white;
  border: 1px solid;
}

.akkim_map_style {
  height: calc(var(--vh, 1vh) * 100 - 300px);
  width: 100%;
  z-index: 1;
}
.akkim_map_style .map_loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 200;
  font-size: var(--font-9xl);
  color: var(--admin-maincolor);
  text-align: center;
  transform: translate(-50%, -50%);
}
.akkim_map_style .map_loader .caption {
  font-size: var(--font-2xl);
  font-weight: bold;
  color: var(--admin-maincolor);
  padding: 10px 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}

.akkim-visit--panel {
  display: none;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1411764706);
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}
.akkim-visit--panel.active {
  display: flex;
}
.akkim-visit--panel .inner-box {
  display: flex;
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.akkim-visit--panel .inner-box .icon {
  width: 80px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  margin: 0 auto;
}
.akkim-visit--panel .inner-box .loc {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 10px 0;
}
.akkim-visit--panel .inner-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 20px 0 30px 0;
  line-height: 1.6;
}
.akkim-visit--panel .inner-box button.btn {
  margin: 10px 0;
  width: 100%;
  height: 50px;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--admin-maincolor);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.akkim-visit--panel .inner-box button.btn.fill {
  background: var(--admin-maincolor);
  color: white;
  font-weight: 600;
  border: 1px solid var(--admin-maincolor);
}

/* ------------------------------ 
 * html list 
 --------------------------------*/
.akkim_place_list {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 20px;
}
.akkim_place_list .placeinfo {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 20px;
  border: 1px solid rgb(100, 100, 100);
  border-radius: 5px;
}
.akkim_place_list .placeinfo .name {
  font-size: var(--font-2xl);
  font-weight: 600;
}
.akkim_place_list .placeinfo .addr {
  font-size: var(--font-xl);
  opacity: 0.7;
}
.akkim_place_list .placeinfo .dis {
  font-size: var(--font-4xl);
  font-weight: 600;
  color: var(--admin-maincolor);
}

.main-baro-page {
  padding: 20px;
  background: #ffeaea;
}
@media screen and (min-width: 992px) {
  .main-baro-page .inner {
    max-width: 760px;
    margin: 0 auto;
  }
}
.main-baro-page .event-img-slide {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 8px;
}
.main-baro-page .event-img-slide::-webkit-scrollbar {
  display: none;
}
.main-baro-page .event-img-slide.active {
  cursor: grabbing;
}
.main-baro-page .baro-likebtn {
  display: block;
  height: 40px;
  width: 40px;
  background-size: cover;
}
.main-baro-page .baro-likebtn.liked svg {
  fill: var(--cl-ita-red-40);
}
.main-baro-page .baro-likecount {
  font-size: var(--font-2xl);
  font-weight: 600;
  color: black;
}
.main-baro-page .thankYouMessage {
  position: fixed;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main-baro-mappage {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}
@media screen and (min-width: 767px) {
  .main-baro-mappage {
    max-width: 768px;
    margin: 0 auto;
  }
}
.main-baro-mappage .goto-link {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  padding: 10px;
  cursor: pointer;
  background: white;
  border: 1px solid;
}

.baro_map_style {
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  z-index: 1;
}
.baro_map_style .map_loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 200;
  font-size: var(--font-9xl);
  color: var(--admin-maincolor);
  text-align: center;
  transform: translate(-50%, -50%);
}
.baro_map_style .map_loader .caption {
  font-size: var(--font-2xl);
  font-weight: bold;
  color: var(--admin-maincolor);
  padding: 10px 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}

.baro-visit--panel {
  display: none;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1411764706);
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}
.baro-visit--panel.active {
  display: flex;
}
.baro-visit--panel .inner-box {
  display: flex;
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.baro-visit--panel .inner-box .icon {
  width: 80px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  margin: 0 auto;
}
.baro-visit--panel .inner-box .loc {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 10px 0;
}
.baro-visit--panel .inner-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 20px 0 30px 0;
  line-height: 1.6;
}
.baro-visit--panel .inner-box button.btn {
  margin: 10px 0;
  width: 100%;
  height: 50px;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--admin-maincolor);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.baro-visit--panel .inner-box button.btn.fill {
  background: var(--admin-maincolor);
  color: white;
  font-weight: 600;
  border: 1px solid var(--admin-maincolor);
}

/* ------------------------------ 
 * html list 
 --------------------------------*/
.baro_place_list {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 10px;
}
.baro_place_list .placeinfo {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 20px;
  border: 1px solid rgb(100, 100, 100);
  border-radius: 5px;
}
.baro_place_list .placeinfo .name {
  font-size: var(--font-2xl);
  font-weight: 600;
}
.baro_place_list .placeinfo .addr {
  font-size: var(--font-xl);
  opacity: 0.7;
}
.baro_place_list .placeinfo .dis {
  font-size: var(--font-4xl);
  font-weight: 600;
  color: var(--admin-maincolor);
}

.baro-fillout-container {
  position: relative;
  display: block;
  border-radius: 20px 20px 0 0;
  z-index: 5;
  transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
}

/* ----------------------
   * barozero_panelinfo
 ------------------------ */
.barozero_panelinfo {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  border: 1px solid rgba(0, 0, 0, 0.1803921569);
  width: 100%;
  min-height: 120px;
  height: 120px;
  left: 0px;
  right: 0px;
}
.barozero_panelinfo .drag-head {
  width: 100%;
  border-radius: 25px 25px 0 0;
  display: flex;
  align-items: center;
}
.barozero_panelinfo .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: rgba(222, 222, 222, 0.2784313725);
  border-radius: 12px;
}
.barozero_panelinfo .drag-head.no-bar::before {
  display: none;
}
.barozero_panelinfo .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.barozero_panelinfo .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.barozero_panelinfo .drag-head .close-css:before, .barozero_panelinfo .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.barozero_panelinfo .drag-head .close-css:before {
  transform: rotate(45deg);
}
.barozero_panelinfo .drag-head .close-css:after {
  transform: rotate(-45deg);
}
@media screen and (min-width: 992px) {
  .barozero_panelinfo.pc-max-600 {
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
}
@media screen and (min-width: 992px) {
  .barozero_panelinfo.pc-max-768 {
    width: 100%;
    max-width: 768px;
    margin: auto;
  }
}
.barozero_panelinfo .drag-head {
  height: 120px;
  border-bottom: 1px solid gainsboro;
}
.barozero_panelinfo .inner {
  /* ------------------------------ 
     * 100px 이 보이는 높이이고, inner 는 30px 만큼 보인다.
     * 70px data-drag-head 를 기준으로 한다. 
  --------------------------------*/
  width: 100%;
  height: 100%;
  /* ------------------------------ 
  * sticky 영역 - 60px
  --------------------------------*/
  /* ------------------------------ 
   * 스크롤 리스트 영역 
   --------------------------------*/
  /* ------------------------------ 
  * 마을 프로펠
  --------------------------------*/
  /* ------------------------------ 
  * 마을 쓰레기 데이터 
  --------------------------------*/
}
.barozero_panelinfo .inner .scroll-list {
  max-height: calc(var(--vh, 1vh) * 100 - 170px);
  overflow-y: auto;
  overflow-x: hidden;
}
.barozero_panelinfo .inner .titie-box {
  display: flex;
  align-items: center;
  padding: 10px 0px;
}
.barozero_panelinfo .inner .titie-box .title {
  font-size: var(--font-4xl);
  font-weight: 700;
}
.barozero_panelinfo .inner .titie-box .itagrid-analysis-count {
  padding-left: 5px;
  font-size: var(--font-4xl);
  font-weight: 700;
  color: var(--cl-main-orange);
}
.barozero_panelinfo .inner .summary-box,
.barozero_panelinfo .inner .litterData-list {
  padding: var(--font-3xl);
  background: #ffffff;
  margin-bottom: 15px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  border-radius: 10px;
}
.barozero_panelinfo .inner .summary-box .item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: space-between;
  padding: 4px 0;
  font-size: var(--font-lg);
}
.barozero_panelinfo .inner .summary-box .item .item_avatar {
  font-weight: 600;
  font-size: var(--font-2xl);
}
.barozero_panelinfo .inner .summary-box .item .item_username {
  font-weight: 600;
  font-size: var(--font-2xl);
}
.barozero_panelinfo .inner .litterData-list .item {
  gap: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 4px 0;
  font-size: var(--font-lg);
}
.barozero_panelinfo .inner .litterData-list .item .item_value {
  text-align: right;
}
.barozero_panelinfo .inner .litterData-list .item .item_value.bold {
  font-weight: 600;
}
.barozero_panelinfo .SOSData-list {
  padding: 10px 5px;
  margin-bottom: 15px;
  border-radius: 10px;
}
.barozero_panelinfo .SOSData-list .item {
  padding: 10px 0;
  display: flex;
  gap: 10px;
}
.barozero_panelinfo .SOSData-list .item img.item_pics_box {
  width: 70px;
  height: 70px;
  border-radius: 15px;
}
.barozero_panelinfo .SOSData-list .item .item_info_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_title {
  font-size: var(--font-xl);
  font-weight: 600;
  width: 520px;
  padding: 3px 0;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_title.bold {
  font-weight: 600;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_title.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_link {
  font-size: calc(3px + 2vw);
  font-weight: 600;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_category_box {
  display: flex;
  gap: 5px;
  align-items: center;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_category_box .item_category_item_img {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f0f0f0;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_category_box .item_category_item {
  font-size: calc(3px + 2vw);
  padding: 2px 4px;
  border-radius: 15px;
  background: #f0f0f0;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_avatar_box {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: calc(3px + 3vw);
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_avatar_box .item_username {
  font-weight: 600;
  font-size: var(--font-sm);
  color: black;
}
.barozero_panelinfo .SOSData-list .item .item_info_box .item_addr {
  font-size: var(--font-md);
  font-weight: 600;
}
.barozero_panelinfo .playerData-list {
  padding: 10px 0 20px 0;
  display: flex;
  gap: 16px;
  align-items: center;
}
.barozero_panelinfo .playerData-list .item {
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.barozero_panelinfo .playerData-list .item .item_username {
  font-weight: 600;
  font-size: calc(3px + 3vw);
}
.barozero_panelinfo .playerData-list .item .item_avatar {
  font-weight: 600;
  color: white;
}

/* ------------------------------ 
 * 분리배출 자원 bullet 
 --------------------------------*/
.swiper-baro-what-pagination {
  position: relative;
  text-align: center;
}
.swiper-baro-what-pagination .swiper-pagination-bullet {
  font-size: var(--font-4xl);
  font-weight: 500;
  margin: 0;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--cl-text-b-70);
  background: transparent;
  border-radius: 0;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  opacity: 0.6;
}
.swiper-baro-what-pagination .swiper-pagination-bullet:hover, .swiper-baro-what-pagination .swiper-pagination-bulletfocus {
  color: var(--cl-text-b-70);
  transform: translateY(-2px);
  transition: all 0.2s;
  opacity: 1;
}
.swiper-baro-what-pagination .swiper-pagination-bullet-active {
  color: var(--cl-text-b-0);
  border-bottom: 2px solid var(--cl-text-b-0);
  font-weight: 600;
  opacity: 1;
}

.select-style.selected {
  background: var(--cl-baro-green) !important;
  color: white;
}

.col-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.baro-form-opdays-container .day-circle {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 4px;
  font-size: var(--font-xl);
  font-weight: 500;
  color: black;
  opacity: 0.5;
  background-color: #fff;
  transition: background-color 0.3s, color 0.3s;
  -webkit-transition: background-color 0.3s, color 0.3s;
  -moz-transition: background-color 0.3s, color 0.3s;
  -ms-transition: background-color 0.3s, color 0.3s;
  -o-transition: background-color 0.3s, color 0.3s;
}
.baro-form-opdays-container .day-circle:hover, .baro-form-opdays-container .day-circle.selected {
  background-color: var(--cl-baro-green);
  border: none;
  color: #fff;
  opacity: 1;
}

/* ------------------------------ 
 * hours input 
 --------------------------------*/
.hours-input {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

.exception-container {
  margin: 20px auto;
  max-width: 400px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  display: none;
}

.exception-container.visible {
  display: block;
}

.exception-day {
  margin-bottom: 10px;
}

/* ------------------------------ 
 * 등록 미리보기 
 --------------------------------*/
.baro-preview-panel {
  max-height: 0;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  width: 100%;
  padding: 25px 20px;
  height: 100%;
  background: var(--cl-ita-yellow-vague);
  color: var(--cl-text-b-40);
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* ------------------------------ 
   * inner 
   --------------------------------*/
  /* ------------------------------ 
     * btn-box
     --------------------------------*/
}
.baro-preview-panel.open {
  display: grid;
  grid-template-rows: 1fr 50px;
  gap: 10px;
  max-height: 5000px;
  transition: max-height 0.3s ease-in-out;
}
.baro-preview-panel .inner {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #ffffff;
  padding: 0 0px;
  overflow-y: auto;
  overflow-x: hidden;
  /* ------------------------------ 
   * head 
   --------------------------------*/
  /* ------------------------------ 
   * content 
   --------------------------------*/
}
.baro-preview-panel .inner .head-box .title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  padding: 10px 0;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.baro-preview-panel .inner .content {
  width: 100%;
  padding-bottom: 30px;
  /* ------------------------------ 
   * author-box 
   --------------------------------*/
  /* ------------------------------ 
   * avatar_builder 
   --------------------------------*/
  /* ------------------------------ 
   * B TAG 
   --------------------------------*/
  /* ------------------------------ 
   * 행정주소 , time-box
   --------------------------------*/
  /* ------------------------------ 
   * 글내용 
   --------------------------------*/
  /* ------------------------------ 
   * 이미지 슬라이더 
   --------------------------------*/
  /* ------------------------------ 
   * taglist
   --------------------------------*/
}
.baro-preview-panel .inner .content .title-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.baro-preview-panel .inner .content .author-box {
  padding: 10px 0 5px 0;
  color: var(--cl-text-b-40);
  font-weight: 600;
  font-size: var(--font-xl);
}
.baro-preview-panel .inner .content .avatar_builder {
  padding: 10px 0 5px 0;
}
.baro-preview-panel .inner .content .author-box {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-block;
  background: var(--cl-ita-red-40);
}
.baro-preview-panel .inner .content .author-box:hover, .baro-preview-panel .inner .content .author-box:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.baro-preview-panel .inner .content .b-tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 0 5px 0;
  letter-spacing: var(--nie-letter-spacing-5);
}
.baro-preview-panel .inner .content .b-tag-box .b-tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 4px 10px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: var(--cl-ita-red-40);
}
.baro-preview-panel .inner .content .b-tag-box .b-tagitems:hover, .baro-preview-panel .inner .content .b-tag-box .b-tagitems:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.baro-preview-panel .inner .content .b-tag-box .phrase {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.baro-preview-panel .inner .content .addr_full,
.baro-preview-panel .inner .content .time-box {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 4px 0;
  opacity: 0.6;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.baro-preview-panel .inner .content .posttext {
  font-size: var(--font-lg);
  font-weight: 400;
  color: var(--cl-text-b-0);
  padding: 10px 10px 10px 10px;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-5);
  white-space: pre-line;
}
.baro-preview-panel .inner .content figure.milestone {
  margin: 0;
}
.baro-preview-panel .inner .content .baro_miles_imgswiper {
  height: 100%;
  position: relative;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding-bottom: 20px;
  /* ------------------------------ 
  * ecoaddr-title-box - 3줄 환경주소 
  --------------------------------*/
}
.baro-preview-panel .inner .content .baro_miles_imgswiper .milestone-img {
  width: 100%;
  height: 40vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  border-radius: 0;
  filter: brightness(0.9);
}
.baro-preview-panel .inner .content .baro_miles_imgswiper .ecoaddr-title-box {
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 2;
  font-size: var(--font-4xl);
  font-weight: 600;
  color: white;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-3);
}
.baro-preview-panel .inner .content .swiper-pagination-sosp-preview {
  text-align: center;
  padding-top: 2px;
}
.baro-preview-panel .inner .content .swiper-pagination-sosp-preview .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--cl-text-b-40);
  opacity: 0.1;
  border-radius: 50%;
  margin: 0px 1px;
}
.baro-preview-panel .inner .content .swiper-pagination-sosp-preview .swiper-pagination-bullet-active {
  background: var(--cl-ita-red-40);
  opacity: 1;
}
.baro-preview-panel .inner .content .tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  font-weight: 600;
  color: var(--cl-text-b-120);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.baro-preview-panel .inner .content .tag-box .tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-ita-red-40);
  border-radius: 5px;
  padding: 3px 8px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: white;
}
.baro-preview-panel .inner .content .tag-box .tagitems:hover {
  color: var(--cl-ita-red-40);
}
.baro-preview-panel .inner .content .tag-box .tagitems.active {
  color: var(--cl-ita-red-40);
}
.baro-preview-panel .btn-box {
  left: 40px;
  right: 40px;
  position: absolute;
  bottom: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 10px;
}

/* ------------------------------ 
 * z-sdgs 
 --------------------------------*/
.main-sdgs0-container {
  overflow-x: hidden;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .main-sdgs0-container {
    max-width: var(--pc-body-max-wd);
    margin: 0 auto;
  }
}

.zerorecipe-feed-box {
  position: relative;
  background: white;
  border-radius: 4.2px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  white-space: normal;
  width: 300px;
}
.sdgs0-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 767px) {
  .sdgs0-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    /* 아이템 사이 간격 */
  }
}
@media screen and (min-width: 992px) {
  .sdgs0-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.2rem;
  }
}
@media screen and (min-width: 992px) {
  .sdgs0-list.pc-col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
  }
}
.sdgs0-list .sdgs0-card-item {
  aspect-ratio: 1/1;
  /* 정방형 비율 유지 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  color: white;
  padding: 5px;
  padding-bottom: 10px;
}
@media screen and (min-width: 767px) {
  .sdgs0-list .sdgs0-card-item {
    padding: 10px;
  }
}
@media screen and (min-width: 992px) {
  .sdgs0-list .sdgs0-card-item {
    padding-bottom: 20px;
  }
}
.sdgs0-list .sdgs0-card-no {
  letter-spacing: -2px;
  font-weight: 700;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: var(--font-5xl);
}
@media screen and (min-width: 767px) {
  .sdgs0-list .sdgs0-card-no {
    font-size: var(--font-7xl);
  }
}
@media screen and (min-width: 992px) {
  .sdgs0-list .sdgs0-card-no {
    font-size: var(--font-5xl);
  }
}
.sdgs0-list .sdgs0-card-title {
  letter-spacing: -0.5px;
  font-weight: 400;
  margin: 0;
  padding-left: 4px;
  font-size: var(--font-lg);
}
@media screen and (min-width: 767px) {
  .sdgs0-list .sdgs0-card-title {
    font-size: var(--font-2xl);
    padding-left: 6px;
  }
}
@media screen and (min-width: 992px) {
  .sdgs0-list .sdgs0-card-title {
    font-size: var(--font-xl);
    padding-left: 6px;
  }
}
.sdgs0-list .sdgs0-icon {
  width: 75px;
  height: 75px;
}
@media screen and (min-width: 767px) {
  .sdgs0-list .sdgs0-icon {
    width: 160px;
    height: 160px;
  }
}
@media screen and (min-width: 992px) {
  .sdgs0-list .sdgs0-icon {
    width: 85px;
    height: 85px;
  }
}

.zero-recipe-lazy:not([src]) {
  filter: blur(10px);
  -webkit-filter: blur(10px);
}

.zp-tagbox-style {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  color: var(--cl-text-b-0);
  position: relative;
}
.zp-tagbox-style.selected {
  opacity: 0.2;
}
.zp-tagbox-style.more {
  background: black;
  border: 1px solid black;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
}
.zp-tagbox-style .emoji {
  font-size: var(--font-xl);
}
.zp-tagbox-style .sosp--tag-icon {
  width: 25px;
  height: 25px;
  padding: 3px;
  position: relative;
}
.zp-tagbox-style .sosp--tag-icon-text {
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.95px;
}
.zp-tagbox-style .sel {
  font-size: var(--font-md);
  display: flex;
  position: absolute;
  top: -7px;
  right: -7px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  color: black;
  border: 1px solid black;
  background: #ffffff;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.zp-tagbox {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  border-radius: 7px;
  background: var(--back-vaguegray);
  padding: 5px 7px;
  color: var(--cl-text-b-0);
  position: relative;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.zp-tagbox.selected {
  border: 1px solid var(--cl-ita-red-40);
  color: white;
  background: var(--cl-ita-red-40);
  /* color: white; */
  position: relative;
}
.zp-tagbox.more {
  background: black;
  border: 1px solid black;
  padding: 5px 10px;
  color: white;
  font-weight: 700;
}
.zp-tagbox .emoji {
  font-size: var(--font-xl);
}
.zp-tagbox .sosp--tag-icon {
  width: 25px;
  height: 25px;
  padding: 3px;
  position: relative;
}
.zp-tagbox .sosp--tag-icon-text {
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.95px;
}
.zp-tagbox .sel-order {
  font-size: var(--font-md);
  display: flex;
  position: absolute;
  top: -9px;
  right: -9px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  color: black;
  border: 1px solid black;
  background: #78ff00;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

/* ------------------------------ 
 * 제로난이도 별점 
 --------------------------------*/
.levelIcon {
  opacity: 0.2;
  cursor: pointer;
  filter: grayscale(1);
  cursor: pointer;
  -webkit-filter: grayscale(1);
}
.levelIcon.lit {
  opacity: 1;
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

/* ------------------------------ 
 * 등록전 미리보기 
 --------------------------------*/
.zp-preview-panel {
  max-height: 0;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  width: 100%;
  padding: 45px 30px;
  height: 100%;
  background: black;
  color: var(--cl-text-b-40);
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* ------------------------------ 
   * inner 
   --------------------------------*/
}
.zp-preview-panel.open {
  display: grid;
  grid-template-rows: 1fr 50px;
  gap: 10px;
  max-height: 5000px;
  transition: max-height 0.3s ease-in-out;
}
.zp-preview-panel .inner {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #f9f9f9;
  padding: 0 0px;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* ------------------------------ 
   * head 
   --------------------------------*/
  /* ------------------------------ 
   * content 
   --------------------------------*/
}
.zp-preview-panel .inner::-webkit-scrollbar {
  display: none;
}
.zp-preview-panel .inner::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  margin-top: 0px;
  border-width: 24px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent var(--cl-ita-red-40) transparent;
}
.zp-preview-panel .inner .head-box .title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  padding: 10px 0;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.zp-preview-panel .inner .content {
  width: 100%;
  /* ------------------------------ 
   * author-box 
   --------------------------------*/
  /* ------------------------------ 
   * avatar_builder 
   --------------------------------*/
  /* ------------------------------ 
   * B TAG 
   --------------------------------*/
  /* ------------------------------ 
   * 행정주소 , time-box
   --------------------------------*/
  /* ------------------------------ 
   * 글내용 
   --------------------------------*/
  /* ------------------------------ 
   * 이미지 슬라이더 
   --------------------------------*/
  /* ------------------------------ 
   * taglist
   --------------------------------*/
}
.zp-preview-panel .inner .content .title-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.zp-preview-panel .inner .content .author-box {
  padding: 10px 0 5px 0;
  color: var(--cl-text-b-40);
  font-weight: 600;
  font-size: var(--font-xl);
}
.zp-preview-panel .inner .content .avatar_builder {
  padding: 10px 0 5px 0;
}
.zp-preview-panel .inner .content .author-box {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-block;
  background: var(--cl-ita-red-40);
}
.zp-preview-panel .inner .content .author-box:hover, .zp-preview-panel .inner .content .author-box:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.zp-preview-panel .inner .content .b-tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 0 5px 0;
  letter-spacing: var(--nie-letter-spacing-5);
}
.zp-preview-panel .inner .content .b-tag-box .b-tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 4px 10px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: var(--cl-ita-red-40);
}
.zp-preview-panel .inner .content .b-tag-box .b-tagitems:hover, .zp-preview-panel .inner .content .b-tag-box .b-tagitems:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.zp-preview-panel .inner .content .b-tag-box .phrase {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.zp-preview-panel .inner .content .addr_full,
.zp-preview-panel .inner .content .time-box {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 4px 0;
  opacity: 0.6;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.zp-preview-panel .inner .content .posttext {
  font-size: var(--font-lg);
  font-weight: 400;
  color: var(--cl-text-b-0);
  padding: 10px 10px 10px 10px;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-5);
  white-space: pre-line;
}
.zp-preview-panel .inner .content figure.milestone {
  margin: 0;
}
.zp-preview-panel .inner .content .zp_imgswiper {
  height: 100%;
  position: relative;
  /* ------------------------------ 
  * zeroaddr-title-box - 3줄 환경주소 
  --------------------------------*/
}
.zp-preview-panel .inner .content .zp_imgswiper .preview-sdgs0-img {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  border-radius: 0;
}
.zp-preview-panel .inner .content .zp_imgswiper .zeroaddr-title-box {
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 2;
  font-size: var(--font-4xl);
  font-weight: 600;
  color: white;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-3);
}
.zp-preview-panel .inner .content .swiper-pagination-zp-preview {
  text-align: center;
  padding-top: 2px;
}
.zp-preview-panel .inner .content .swiper-pagination-zp-preview .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: var(--cl-text-b-40);
  opacity: 0.1;
  border-radius: 50%;
  margin: 0px 2px;
}
.zp-preview-panel .inner .content .swiper-pagination-zp-preview .swiper-pagination-bullet-active {
  background: var(--cl-ita-red-40);
  opacity: 1;
}
.zp-preview-panel .inner .content .tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 10px 0;
  font-weight: 600;
  color: var(--cl-text-b-120);
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.zp-preview-panel .inner .content .tag-box .tagitems {
  font-size: var(--font-lg);
  font-weight: 600;
  background: var(--back-vaguegray);
  color: black;
  border-radius: 5px;
  padding: 3px 8px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.897);
}
.zp-preview-panel .inner .content .tag-box .tagitems:hover {
  color: var(--cl-ita-red-40);
}
.zp-preview-panel .inner .content .tag-box .tagitems.active {
  color: var(--cl-ita-red-40);
}

/* ------------------------------ 
     * btn-box
     --------------------------------*/
.btn-box {
  left: 0px;
  right: 0px;
  position: absolute;
  bottom: 0px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
}
.btn-box.col-1-2 {
  grid-template-columns: 1fr 2fr;
}

/* ------------------------------ 
# *  * * * * * 태그 입력창 
 --------------------------------*/
.tag-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 5px;
       column-gap: 5px;
}

.tag-block {
  letter-spacing: -0.3px;
  display: inline-block;
  background-color: #f0f0f0;
  padding: 8px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--font-xl);
  margin: 6px 0px;
  position: relative;
}

.tag-block .close-btn {
  cursor: pointer;
  color: #FF5722;
}

.tag-input {
  flex: 1;
  min-width: 100px;
  margin-left: 10px;
}

/* ------------------------------ 
 *  
 --------------------------------*/
.tag-block {
  /* 커스텀 태그 배경색 */
}
.tag-block .custom {
  background-color: #d1e7dd;
}
.tag-block .ref {
  background-color: #f0f0f0;
  /* 추천 태그 배경색 */
}

/* 깜박이는 입력창 효과 */
/* 깜박이는 커서 효과 */
.blinking-cursor::after {
  content: "|";
  /* 커서 모양 */
  animation: blink 1s step-end infinite;
  /* 애니메이션 효과 */
  color: black;
  /* 커서 색상 */
  font-weight: bold;
  margin-left: 2px;
  /* 커서와 텍스트 간격 */
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.zp--label-checkbox {
  display: inline-block;
  width: var(--font-xs);
  height: var(--font-xs);
  border: 1px solid rgb(100, 100, 100);
  border-radius: 50%;
}
.zp--label-checkbox.optional {
  boarder: none;
}
.level-mark-max {
  position: relative;
}
.level-mark-max::after {
  position: absolute;
  top: -20px;
  content: "높음";
  opacity: 0.5;
  font-size: var(--font-xl);
  font-weight: 400;
}

.level-mark-mid {
  position: relative;
}
.level-mark-mid::after {
  position: absolute;
  top: -20px;
  content: "중간";
  opacity: 0.5;
  font-size: var(--font-xl);
  font-weight: 400;
}

.level-mark-min {
  position: relative;
}
.level-mark-min::after {
  position: absolute;
  top: -20px;
  content: "낮음";
  opacity: 0.5;
  font-size: var(--font-xl);
  font-weight: 400;
}

/* ------------------------------ 
 * zsdgs0 gradient-border 
 --------------------------------*/
.gradient-border {
  position: relative;
  background: black;
  /* 내부 배경 */
  color: white;
  /* 텍스트 색상 */
  border-radius: 12px;
  /* 둥근 모서리 */
  padding: 10px;
  overflow: hidden;
  /* 내부에서 삐져나오는 요소 숨기기 */
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  margin: -2px;
  /* 보더 두께 조정 */
  border-radius: inherit;
  /* 버튼의 둥근 모서리에 맞춤 */
  background: linear-gradient(45deg, #ff4b2b, #ff416c);
  /* 원하는 그라데이션 */
}

.gradient-border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  border-radius: inherit;
  background: black;
  /* 내부 배경과 동일한 색 */
}

.helpcenter-container .common-style {
  background: black;
  color: white;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.helpcenter-container .helpcenter-shorts {
  padding: 0 20px;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2588235294);
  height: 60px;
  gap: 2px;
  align-items: center;
}
.helpcenter-container .tab-item {
  border-radius: 5px;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
}
.helpcenter-container .tab-item.selected {
  background: white;
  color: black;
  font-weight: bold;
}
.helpcenter-container .content {
  display: none;
}
.helpcenter-container .content.selected {
  display: block;
}
.helpcenter-container a {
  text-decoration: none;
  color: white;
}
.helpcenter-container .close {
  margin-left: auto;
  font-size: var(--font-2xl);
  /* opacity: 0.5; */
  color: #89ff00;
  font-weight: bold;
}
.helpcenter-container .tsc-smartplayer .media-wrapper {
  align-items: flex-start !important;
}
.helpcenter-container .tsc-smartplayer {
  height: calc(var(--vh, 1vh) * 100 - 60px) !important;
}

/*! My Framework Styles version 0.3.0. */
/*! update : 210904~ */
/* common def */
/* 이미지 preload */
.top-up {
  transform: translateY(-60px);
}

.top-up-50 {
  transform: translateY(-50px);
}

.bottom-down {
  transform: translateY(100px);
}

.bottom-down-60 {
  transform: translateY(60px);
}

.btn-crop-css {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background: var(--nie-cl-orange);
  color: white;
  font-size: var(--font-xl);
  font-weight: 600;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
}
.btn-crop-css.loading {
  z-index: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border: 4px solid var(--CSV-Color);
  border-radius: 50%;
  border-top: 4px solid white;
  width: 30px;
  height: 30px;
  animation: rotate 1.5s ease infinite;
}

.seo-blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

.btmenu-fixed-onscroll {
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
}

.page-title-box {
  padding: 20px 0;
  display: flex;
  align-items: center;
  width: 100%;
}
.page-title-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  display: flex;
}
.page-title-box .right {
  margin-left: auto;
  font-size: var(--font-xl);
}
.page-title-box .right .view-more {
  font-size: var(--font-xl);
  font-weight: 500;
  opacity: 1;
  letter-spacing: -0.4px;
  cursor: pointer;
}
.page-title-box .right .view-tab {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-title-box .right .view-tab .basic {
  font-weight: 600;
}
.page-title-box .right .view-tab .basic.active {
  color: var(--nie-cl-orange);
  font-weight: 600;
}
.page-title-box .right .view-tab .tabstyle-type-a {
  border-radius: 4px;
  font-weight: 500;
  color: var(--cl-text-b-200);
  font-size: var(--font-2xl);
}
.page-title-box .right .view-tab .tabstyle-type-a.white {
  color: white;
  border: 1px solid white;
}
.page-title-box .right .view-tab .tabstyle-type-a.active {
  color: var(--nie-cl-orange);
}

.overflow-hidden {
  overflow: hidden;
}

.nie-top-menu-box {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 5px;
  z-index: 80;
}
@media screen and (min-width: 992px) {
  .nie-top-menu-box {
    display: none;
  }
}
.nie-top-menu-box .brand-box {
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nie-top-menu-box .brand-box img.brand {
  -o-object-fit: cover;
     object-fit: cover;
  height: 27px;
  width: 27px;
  padding: 2px;
  border-radius: 50%;
}
.nie-top-menu-box h1.name {
  color: #039154;
  font-size: var(--font-xl);
  font-weight: 900;
  letter-spacing: var(--nie-letter-spacing-3);
}
.nie-top-menu-box .login-box {
  display: flex;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  margin-left: auto;
  margin-right: 6vw;
  padding: 5px 5px;
}
.nie-top-menu-box .login-box.np-not-logged {
  font-size: var(--font-lg);
  font-weight: bold;
  border-radius: 6px;
  border: 1px solid gainsboro;
}
.nie-top-menu-box .login-box.np-logged .avatar_icon_circle {
  background: transparent !important;
  color: #039154 !important;
  font-weight: bold !important;
  font-size: var(--font-lg) !important;
  border-radius: 15px 0 15px 0px;
  border: 2px solid #039154;
}
.leftBar--nieplace {
  display: none;
}
@media screen and (min-width: 992px) {
  .leftBar--nieplace {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--pc-leftbar-wd);
    border-right: 1px solid gainsboro;
    overflow-x: hidden;
    padding: 40px 20px;
  }
  .leftBar--nieplace .logo {
    display: flex;
    align-items: center;
    font-size: var(--font-xl);
    height: 50px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
  }
  .leftBar--nieplace ul.menu li {
    font-size: var(--font-xl);
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 10px;
  }
  .leftBar--nieplace ul.menu li:hover {
    background: var(--cl-text-b-245);
  }
  .leftBar--nieplace ul.menu li.active {
    background: var(--nie-btn-bg-vaguegray);
    color: var(--cl-nie-s);
    font-weight: bold;
  }
  .leftBar--nieplace .viewmore {
    margin-top: auto;
  }
  .leftBar--nieplace .viewmore button.btn {
    border-radius: 15px;
    outline: none;
    cursor: pointer;
    font-weight: 500;
    border: 1px solid var(--cl-text-b-40);
    background: transparent;
    color: var(--cl-text-b-40);
    font-size: var(--font-md);
    padding: 5px 10px;
  }
  .leftBar--nieplace .viewmore button.btn:hover {
    background: var(--cl-nie-s);
    color: white;
  }
  .leftBar--nieplace .account-box {
    position: absolute;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
  }
  .leftBar--nieplace .account-box p {
    font-size: var(--font-lg);
    color: black;
    font-weight: 600;
  }
  .leftBar--nieplace .account-box.signed-in .avatar_icon_circle {
    background: black !important;
    color: white !important;
    font-weight: bold !important;
    font-size: var(--font-md) !important;
    border-radius: 50%;
    border: 2px solid white !important;
  }
  .leftBar--nieplace .account-box .name {
    font-size: var(--font-sm);
    font-weight: 600;
  }
}

@media screen and (min-width: 992px) {
  .nie-bottom-menu-box {
    display: none;
  }
}
.nie-bottom-menu-box.bg {
  background-color: var(--nie-btm-menu-bg);
}
.nie-bottom-menu-box .mountain {
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  background-image: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/btm_navicon/background.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: transparent;
}
.nie-bottom-menu-box .gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 70px;
  z-index: 1;
  background: linear-gradient(0deg, white 0%, rgb(255, 255, 255) 20%);
  filter: blur(15px);
}

.nie-bottom-menu-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 5px;
  padding: 0 10px;
  z-index: 80;
  transition: 0.5s 0.25s ease;
}
@media screen and (min-width: 992px) {
  .nie-bottom-menu-box {
    display: none;
  }
}
.nie-bottom-menu-box .item-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 3;
  opacity: 0.6;
}
.nie-bottom-menu-box .item-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 3;
  opacity: 0.6;
}
.nie-bottom-menu-box .item-box.active {
  opacity: 1;
}
.nie-bottom-menu-box .item-box.active .title {
  background: var(--nie-btm-menu-text) !important;
  color: white !important;
}
.nie-bottom-menu-box .item-box.active .icon {
  height: 40px !important;
}
.nie-bottom-menu-box .item-box.active .icon.home {
  height: 70px !important;
}
.nie-bottom-menu-box .item-box .title {
  font-size: var(--font-md);
  font-weight: bold;
  padding: 4px 8px;
  color: var(--nie-btm-menu-text);
  background: var(--nie-btm-menu-text-bg);
  white-space: nowrap;
  border-radius: 10px;
}
.nie-bottom-menu-box .item-box .icon {
  background-repeat: no-repeat;
  background-size: cover;
  width: 50px;
  height: 23px;
}
.nie-bottom-menu-box .item-box .icon.feed {
  width: 50px;
  background-image: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/btm_navicon/feed.svg?v=1.0");
}
.nie-bottom-menu-box .item-box .icon.niemap {
  width: 50px;
  background-image: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/btm_navicon/map.svg?v=1.0");
}
.nie-bottom-menu-box .item-box .icon.home {
  width: 65px;
  height: 70px;
  background-image: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/btm_navicon/home.svg?v=1.0");
}
.nie-bottom-menu-box .item-box .icon.stour {
  width: 50px;
  background-image: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/btm_navicon/stamp.svg?v=1.0");
}
.nie-bottom-menu-box .item-box .icon.mypage {
  width: 50px;
  background-image: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/btm_navicon/mypage.svg?v=1.0");
}
@keyframes head_up {
  0% {
    transform: translate3d(0, 50px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.nieplace-guide-helpPanel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  padding: 20px 30px;
  z-index: 300;
}
.nieplace-guide-helpPanel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.nieplace-guide-helpPanel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.nieplace-guide-helpPanel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.nieplace-guide-helpPanel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.nieplace-guide-helpPanel .drag-head .close-css:before, .nieplace-guide-helpPanel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.nieplace-guide-helpPanel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.nieplace-guide-helpPanel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.nieplace-guide-helpPanel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nieplace-guide-helpPanel .inner::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .nieplace-guide-helpPanel {
    width: 400px;
    max-height: 66vh;
    margin: auto;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
  }
}
.nieplace-guide-helpPanel .inner {
  max-height: calc(var(--vh, 1vh) * 60 - 70px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  letter-spacing: var(--nie-letter-spacing-5);
}
.nieplace-guide-helpPanel .inner .mascot-box {
  display: flex;
  gap: 15px;
  align-items: center;
}
.nieplace-guide-helpPanel .inner .mascot-box .mascot {
  width: 85px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
}
.nieplace-guide-helpPanel .inner .mascot-box span.hello {
  color: var(--cl-text-b-40);
  display: inline-block;
  font-size: var(--font-2xl);
  padding: 20px 0;
  line-height: 1.6;
  white-space: nowrap;
}
.nieplace-guide-helpPanel .inner .mascot-box span.hello .strong {
  color: var(--nie-cl-leaf);
  font-weight: 800;
}
.nieplace-guide-helpPanel .inner .section-div-mark {
  font-size: var(--font-10xl);
  padding: 30px 0 0px 0;
}
.nieplace-guide-helpPanel .inner .content {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
}
.nieplace-guide-helpPanel .inner .info-text {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--cl-ita-red-40);
  letter-spacing: var(--nie-letter-spacing-3);
}
.nieplace-guide-helpPanel .inner .mission_state {
  padding: 20px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.7;
  text-align: justify;
  letter-spacing: var(--nie-letter-spacing-3);
}

.main-drawer-menu-container {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  height: 100%;
  border-left: 1px solid;
  width: 80%;
  background-color: white;
  z-index: 200;
}
.main-drawer-menu-container .item {
  padding: 20px 0;
  border-bottom: 1px solid var(--cl-text-b-120);
  text-align: center;
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--cl-text-b-40);
  line-height: 1.7;
}
.main-drawer-menu-container .sub-box {
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
  position: relative;
}
.main-drawer-menu-container .sub-box .sub {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid var(--cl-text-b-120);
  text-align: center;
  font-size: var(--font-md);
  font-weight: bold;
  color: var(--cl-text-b-40);
}
.main-drawer-menu-container .close-top {
  padding: 20px;
}

.utilPopPanel_container {
  /*닫혔을때높이를0으로설정*/
  position: fixed;
  bottom: 10px;
  right: 10px;
  left: 10px;
  z-index: 555;
  border-radius: 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}
.utilPopPanel_container.open {
  max-height: 1000px;
}
.utilPopPanel_container img.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--nie-cl-blue);
  transform: translate(10px, 20px);
  position: relative;
  z-index: 1;
}
.utilPopPanel_container .inner {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: white;
  padding: 25px 6vw;
  border: 2px solid var(--nie-cl-blue);
  border-radius: 15px;
  width: 100%;
}
.utilPopPanel_container .inner .util_popPanel_close {
  position: absolute;
  top: -14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  margin-left: auto;
  background-color: var(--cl-text-b-40);
  border-radius: 50%;
}
.utilPopPanel_container .inner .util_popPanel_close:before, .utilPopPanel_container .inner .util_popPanel_close:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 15px;
  width: 2px;
  background-color: white;
}
.utilPopPanel_container .inner .util_popPanel_close:before {
  transform: rotate(45deg);
}
.utilPopPanel_container .inner .util_popPanel_close:after {
  transform: rotate(-45deg);
}
.utilPopPanel_container .inner .msgbox {
  letter-spacing: var(--nie-letter-spacing-5);
}
.utilPopPanel_container .inner .msgbox .util_popPanel_title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 3px 0;
  /* text-align: center; */
  white-space: nowrap;
}
.utilPopPanel_container .inner .msgbox .util_popPanel_text {
  font-size: var(--font-xl);
  color: var(--cl-text-b-40);
  font-weight: 500;
  padding: 1px 0;
  line-height: 1.7;
}
.utilPopPanel_container .inner .util_popPanel_btn {
  background: var(--cl-text-b-40);
  color: white;
  font-size: var(--font-2xl);
  padding: 10px 12px;
  width: auto;
  margin-left: auto;
  border-radius: 40px;
}
.utilPopPanel_container.black .inner {
  background: black;
  color: white;
}
.utilPopPanel_container.black .inner .util_popPanel_btn {
  background: white;
  color: black;
}

@keyframes mapspin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 스피너 스타일 설정 */
.mapdata-loader-box {
  display: none;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  align-items: center;
  justify-content: center;
}
.mapdata-loader-box.open {
  display: flex;
}
.mapdata-loader-box .loader {
  border-radius: 50%;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--nie-cl-orange);
  border-radius: 50%;
  width: 33px;
  height: 33px;
  animation: mapspin 1s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal;
}
.mapdata-loader-box .loader.sm {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
}

.js-loader-simple {
  border: 2px solid #f3f3f3;
  border-top: 2px solid rgb(160, 160, 160);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: view-more-spin 0.3s linear infinite;
  margin: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.js-loader-box {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
}
.js-loader-box .js-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: view-more-spin 0.3s linear infinite;
  margin: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.js-loader-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.js-loader-screen .js-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: view-more-spin 2s linear infinite;
  margin: 0 auto;
}
@keyframes view-more-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.tabstyle-type-a {
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  color: var(--cl-text-b-200);
  font-size: var(--font-2xl);
}
.tabstyle-type-a.white {
  color: white;
  border: 1px solid white;
}
.tabstyle-type-a.active {
  color: var(--nie-cl-orange);
}

.niepop-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(35, 0, 73);
}
.niepop-container .confetti-container {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  z-index: 1;
}
.niepop-container .confetti-container .confetti {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 2;
}
.niepop-container .niepop-stamp-exist-box,
.niepop-container .niepop-stamp-success-box {
  z-index: 3;
  padding: 20px 6vw;
  width: 100%;
}
.niepop-container .niepop-stamp-exist-box .inner,
.niepop-container .niepop-stamp-success-box .inner {
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border-radius: 8px;
  text-align: center;
}
.niepop-container .niepop-stamp-exist-box .inner .stChar-icon,
.niepop-container .niepop-stamp-success-box .inner .stChar-icon {
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  padding: 20px 0;
}
.niepop-container .niepop-stamp-exist-box .inner .title,
.niepop-container .niepop-stamp-success-box .inner .title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 10px 0;
  text-align: center;
}
.niepop-container .niepop-stamp-exist-box .inner .content,
.niepop-container .niepop-stamp-success-box .inner .content {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 0;
  line-height: 1.7;
  text-align: center;
}
.niepop-container .niepop-stamp-exist-box .inner .btn-box,
.niepop-container .niepop-stamp-success-box .inner .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  gap: 15px;
}
.niepop-container .niepop-stamp-exist-box .inner .btn-box .close,
.niepop-container .niepop-stamp-success-box .inner .btn-box .close {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 10px 19px;
  background-color: white;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: 20px;
  cursor: pointer;
}
.niepop-container .niepop-stamp-exist-box .inner .btn-box .close:hover,
.niepop-container .niepop-stamp-success-box .inner .btn-box .close:hover {
  background-color: rgb(35, 0, 73);
  color: white;
}

.rounded-full {
  border-radius: 50%;
}

button.ita-border {
  border-radius: 20px;
  border: 1px solid var(--color-darkgray);
  outline: none;
  cursor: pointer;
  font-weight: 500;
  background: none;
  color: var(--color-darkgray);
  font-size: var(--font-lg);
  width: max-content;
  width: -moz-max-content;
  height: max-content;
  height: -moz-max-content;
  padding: 5px 10px;
}
button.ita-border.white {
  color: white;
  border: 1px solid white;
}
button.ita-border:hover, button.ita-border:focus, button.ita-border:active {
  background: var(--color-darkgray);
  color: white;
}
button.ita-border.active {
  background: var(--color-darkgray);
  color: white;
}
button.ita-border.lg {
  font-size: var(--font-lg);
}
button.ita-border.xl {
  font-size: var(--font-xl);
}
button.ita-border.xl-2 {
  font-size: var(--font-2xl);
  padding: 8px 20px;
}

.help_jspop_box .inner button.btn, .main-map-screen .niemap_is_navi_panel .content-box .btn-box .btn, .utilPopPanel_container .inner .util_popPanel_btn {
  border-radius: 15px;
  outline: none;
  cursor: pointer;
  font-weight: 500;
  background: var(--cl-text-b-40);
  color: white;
  font-size: var(--font-lg);
  padding: 5px 10px;
}
.help_jspop_box .inner button.btn:hover, .main-map-screen .niemap_is_navi_panel .content-box .btn-box .btn:hover, .utilPopPanel_container .inner .util_popPanel_btn:hover {
  background: var(--nie-cl-orange);
  color: white;
}

button.ita-fill {
  border-radius: 15px;
  outline: none;
  cursor: pointer;
  font-weight: 500;
  background: none;
  background: var(--nie-cl-orange);
  color: white;
  font-size: var(--font-lg);
  width: auto;
  height: -moz-max-content;
  height: max-content;
  padding: 5px 10px;
}
button.ita-fill.border {
  border: 1px solid var(--color-darkgray);
}
button.ita-fill.white {
  color: white;
  border: 1px solid white;
}
button.ita-fill.black {
  color: white;
  background: black;
}
button.ita-fill:hover, button.ita-fill:focus, button.ita-fill:active {
  background: var(--color-darkgray);
  color: white;
}
button.ita-fill.active {
  background: var(--color-darkgray);
  color: white;
}
button.ita-fill.lg {
  font-size: var(--font-lg);
}
button.ita-fill.xl {
  font-size: var(--font-xl);
}
button.ita-fill.xl-2 {
  font-size: var(--font-2xl);
  padding: 8px 20px;
}
button.ita-fill.w-full {
  width: 100%;
}
button.ita-fill.custom-1 {
  background: var(--color-darkgray);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: var(--font-2xl);
  padding: 12px 24px;
  width: 100%;
  font-weight: 600;
}
button.ita-fill.custom-1:hover {
  background: var(--color-black);
  color: white;
}
button.ita-fill.custom-2 {
  background: var(--nie-cl-white-10);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: var(--font-xl);
  padding: 8px 12px;
  width: 100%;
  font-weight: 600;
  height: 50px;
}
button.ita-fill.custom-2.dark {
  background: var(--nie-cl-white-10);
  color: white;
}
button.ita-fill.custom-2:active {
  background: var(--nie-dark-cl-leaf-30);
  color: white;
}
button.ita-fill.custom-3 {
  background: var(--color-black);
  opacity: 0.3;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: var(--font-xl);
  padding: 7px 10px;
  width: 100%;
  font-weight: 500;
}
button.ita-fill.custom-3:hover {
  background: var(--color-black);
  color: white;
}
button.ita-fill.custom-3.on {
  opacity: 1;
  background: var(--nie-dark-cl-leaf-30);
  color: #00ff74;
  background: var(--nie-dark-cl-leaf-70);
}
button.ita-fill.custom-4 {
  border-radius: 8px;
  background: none;
  opacity: 1;
  /* border: 1px solid; */
  color: white;
  cursor: pointer;
  font-size: var(--font-xl);
  padding: 10px 10px;
  font-weight: 500;
}
button.ita-fill.custom-4:active {
  background: var(--nie-dark-cl-leaf-30);
  color: white;
}
button.ita-fill.custom-5 {
  border-radius: 30px;
  background: var(--cl-text-b-40);
  opacity: 1;
  /* border: 1px solid; */
  color: white;
  cursor: pointer;
  font-size: var(--font-xl);
  padding: 8px 20px;
  font-weight: 500;
}

.main-home-screen {
  background-image: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/home_background/wallpaper.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% 90%;
  background-color: #f5fcff;
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  padding: var(--nie-main-padding);
}
.main-home-screen .short-notice-title {
  margin: 10px 0;
  background: white;
  color: var(--nie-btm-menu-text);
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 10px;
  border-radius: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  background: var(--nie-cl-orange-10);
  border: 1px solid var(--nie-cl-orange-40);
}
.main-home-screen .notice-latest {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cl-text-b-120);
}
.main-home-screen .notice-latest .title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.main-home-screen .notice-latest .date {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-120);
}
.main-home-screen .notice-link-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 80px;
  margin-bottom: 25px;
}
.main-home-screen .notice-link-banner img.content {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  /* width: 100%; */
  height: 80px;
  background-size: cover;
  background-color: #004f2d;
  border-radius: 10px;
  cursor: pointer;
}
.main-home-screen .product-title-box .title {
  font-size: var(--font-9xl);
  font-weight: bold;
  padding: 15px 0 30px 0;
}
.main-home-screen .product-title-box .img-logo-box {
  width: auto;
  height: 30px;
}
.main-home-screen .stats-box-brief {
  display: flex;
  align-items: center;
  gap: 5px;
}
.main-home-screen .stats-box-brief img.icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #76d5fd;
}
.main-home-screen .stats-box-brief .stat-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 10px;
  background: #dbf3fd;
  height: 50px;
  border-radius: 50px;
}
.main-home-screen .stats-box-brief .stat-box .stat {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-lg);
  gap: 3px;
}
.main-home-screen .stats-box-brief .stat-box .stat:nth-child(2) {
  border-left: 1px solid #76d5fd;
  border-right: 1px solid #76d5fd;
  padding: 0 16px;
}
.main-home-screen .stats-box-brief .stat-box .stat .title {
  font-size: var(--font-md);
}
.main-home-screen .stats-box-brief .stat-box .stat .val {
  font-size: var(--font-lg);
  font-weight: bold;
}
.main-home-screen .stats-box-brief .view-more {
  margin-left: auto;
  font-size: var(--font-lg);
  font-weight: bold;
  color: var(--cl-text-b-40);
  cursor: pointer;
}
.main-home-screen .expand-box {
  position: fixed;
  top: 165px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 90%;
}
.main-home-screen .expand-box .toggle-summary-text-new {
  display: none;
  padding: 16px 19px;
  background: white;
  box-shadow: 0px 0px 10px 1px rgba(163, 163, 163, 0.2509803922);
  border: 1px solid #76d5fd;
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
}
.main-home-screen .expand-box .toggle-summary-text-new.active {
  display: block;
}
.main-home-screen .expand-box .toggle-summary-text-new .title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-home-screen .expand-box .toggle-summary-text-new .info {
  font-weight: 500;
  white-space: pre-line;
  font-size: var(--font-xl);
  color: black;
  line-height: 1.8;
  letter-spacing: var(--nie-letter-spacing-5);
}
.main-home-screen .expand-box .toggle-record-container-new {
  display: none;
  max-height: 50vh;
  overflow-y: auto;
  margin: 5px auto;
  padding: 16px 19px;
  background: white;
  border-radius: 10px;
  color: black;
  box-shadow: 0px 0px 10px 1px rgba(163, 163, 163, 0.2509803922);
  border: 1px solid #76d5fd;
  letter-spacing: var(--nie-letter-spacing-3);
}
.main-home-screen .expand-box .toggle-record-container-new.active {
  display: block;
}
.main-home-screen .expand-box .toggle-record-container-new .title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-home-screen .expand-box .toggle-record-container-new .empty_msg {
  font-size: var(--font-lg);
  padding: 10px 0;
  text-align: center;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list {
  display: grid;
  grid-template-columns: 20px 1fr 35px 30px;
  align-items: center;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .avatar_icon_circle {
  background: transparent !important;
  color: #039154 !important;
  font-weight: bold !important;
  font-size: var(--font-md) !important;
  border-radius: 15px 0 15px 0px;
  border: 2px solid #039154;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .rank,
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .username,
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .step,
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .num_stamp {
  font-size: var(--font-lg);
  font-weight: 600;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .rank {
  text-align: center;
  font-weight: 700;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .num_stamp {
  margin-left: auto;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .list-box .list .username {
  overflow-x: hidden;
  width: 32vw;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .stamplist {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .stamplist::-webkit-scrollbar {
  display: none;
}
.main-home-screen .expand-box .toggle-record-container-new .record-box .stamplist .stamp {
  padding: 2px 6px;
  border-radius: 10px;
  background-color: rgb(238, 218, 159);
  border: 1px solid rgb(245, 215, 128);
  white-space: nowrap;
  color: black;
}
.main-home-screen .expand-box .toggle-record-container-new .niewalk-record-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 0;
  letter-spacing: var(--nie-letter-spacing-3);
}
.main-home-screen .expand-box .toggle-record-container-new .niewalk-record-box .list-box .stat-box {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
}
.main-home-screen .expand-box .toggle-record-container-new .niewalk-record-box .list-box .stat-box .kpi {
  font-size: var(--font-lg);
  font-weight: 700;
  opacity: 0.6;
  white-space: nowrap;
}
.main-home-screen .expand-box .toggle-record-container-new .niewalk-record-box .list-box .stat-box .val {
  font-size: var(--font-6xl);
  font-weight: 800;
  color: var(--nie-cl-orange-80);
}
.main-home-screen .expand-box .toggle-record-container-new .niewalk-record-box .list-box .stat-box .unit {
  font-size: var(--font-sm);
  font-weight: 700;
  opacity: 0.6;
  color: var(--nie-cl-orange);
}
.main-home-screen .stats-box {
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-top: 12px;
  height: 140px;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 1px rgba(163, 163, 163, 0.2509803922);
  border: 1px solid rgba(163, 163, 163, 0.3568627451);
  padding: 21px 15px;
  border-radius: 10px;
}
.main-home-screen .stats-box .progress-box {
  width: 100%;
}
.main-home-screen .stats-box .progress-box .title-panel {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: var(--font-xl);
  background: #ffffff;
  padding: 7px 10px;
  font-weight: bold;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  border-radius: 9px 0 9px 9px;
}
.main-home-screen .stats-box .progress-box .bar-box {
  margin-top: 7px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 15px;
  z-index: 2;
}
.main-home-screen .stats-box .progress-box .bar-box .bar-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: rgba(0, 79, 45, 0.0784313725);
  border: 1px solid rgba(0, 79, 45, 0.1490196078);
  z-index: 2;
  border-radius: 10px;
}
.main-home-screen .stats-box .progress-box .bar-box .bar-progress {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 24%;
  height: 15px;
  background-color: var(--nie-cl-leaf);
  border-radius: 10px;
  z-index: 3;
}
.main-home-screen .stats-box .progress-box .step-box {
  letter-spacing: var(--nie-letter-spacing-3);
  display: flex;
  padding: 5px 0;
  justify-content: space-between;
}
.main-home-screen .stats-box .progress-box .step-box .current_step {
  font-size: var(--font-md);
  font-weight: bold;
  padding: 0 5px;
}
.main-home-screen .stats-box .progress-box .step-box .goal_step {
  font-size: var(--font-md);
  padding: 0 5px;
}
.main-home-screen .record-append-box {
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.main-home-screen .record-append-box .view-summary-box {
  font-size: var(--font-xl);
  font-weight: 600;
  margin: 10px 0;
  width: 100%;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cl-text-b-40);
  border-radius: 12px;
  z-index: 10;
  cursor: pointer;
  text-align: center;
  padding: 8px 5px;
  color: black;
}
.main-home-screen .record-append-box .view-summary-box.active {
  background-color: var(--nie-cl-orange-80);
  color: #ffffff;
  border: 1px solid var(--nie-cl-orange-80);
}
.main-home-screen .record-append-box .view-ranking-box {
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  font-size: var(--font-xl);
  font-weight: 600;
  margin: 10px 0;
  width: 100%;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cl-text-b-40);
  border-radius: 12px;
  z-index: 10;
  cursor: pointer;
  text-align: center;
  padding: 5px;
  color: black;
}
.main-home-screen .record-append-box .view-ranking-box.active {
  background-color: var(--nie-cl-orange-80);
  color: #ffffff;
  border: 1px solid var(--nie-cl-orange-80);
}
.main-home-screen .toggle-summary-text {
  display: none;
  padding: 25px 15px;
  white-space: pre-line;
  font-size: var(--font-xl);
  font-weight: 600;
  background: rgb(255, 248, 224);
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  color: black;
  line-height: 1.7;
  letter-spacing: var(--nie-letter-spacing-3);
  width: 100%;
  box-shadow: 0px 0px 10px 1px rgba(163, 163, 163, 0.2509803922);
  border: 1px solid rgba(163, 163, 163, 0.3568627451);
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
}
.main-home-screen .toggle-summary-text.active {
  display: block;
}
.main-home-screen .toggle-record-container {
  display: none;
  height: calc(var(--vh, 1vh) * 33);
  overflow-y: auto;
  width: 100%;
  padding: 25px 15px;
  width: 100%;
  background: white;
  border-radius: 12px;
  color: black;
  box-shadow: 0px 0px 10px 1px rgba(163, 163, 163, 0.2509803922);
  border: 1px solid rgba(163, 163, 163, 0.3568627451);
  letter-spacing: var(--nie-letter-spacing-3);
}
.main-home-screen .toggle-record-container.active {
  display: block;
}
.main-home-screen .toggle-record-container .record-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}
.main-home-screen .toggle-record-container .record-box .list-box .list {
  display: grid;
  grid-template-columns: 26px 1fr 26vw 10vw;
  align-items: center;
}
.main-home-screen .toggle-record-container .record-box .list-box .list .avatar_icon_circle {
  background: transparent !important;
  color: #039154 !important;
  font-weight: bold !important;
  font-size: var(--font-md) !important;
  border-radius: 15px 0 15px 0px;
  border: 2px solid #039154;
}
.main-home-screen .toggle-record-container .record-box .list-box .list .username,
.main-home-screen .toggle-record-container .record-box .list-box .list .step,
.main-home-screen .toggle-record-container .record-box .list-box .list .num_stamp {
  font-size: var(--font-md);
  font-weight: 600;
}
.main-home-screen .toggle-record-container .record-box .list-box .list .username {
  overflow-x: hidden;
  width: 32vw;
}
.main-home-screen .toggle-record-container .record-box .stamplist {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main-home-screen .toggle-record-container .record-box .stamplist::-webkit-scrollbar {
  display: none;
}
.main-home-screen .toggle-record-container .record-box .stamplist .stamp {
  padding: 2px 6px;
  border-radius: 10px;
  background-color: rgb(238, 218, 159);
  border: 1px solid rgb(245, 215, 128);
  white-space: nowrap;
  color: black;
}
.main-home-screen .toggle-record-container .niewalk-record-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 0;
  letter-spacing: var(--nie-letter-spacing-3);
}
.main-home-screen .toggle-record-container .niewalk-record-box .list-box .stat-box {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
}
.main-home-screen .toggle-record-container .niewalk-record-box .list-box .stat-box .kpi {
  font-size: var(--font-lg);
  font-weight: 700;
  opacity: 0.6;
  white-space: nowrap;
}
.main-home-screen .toggle-record-container .niewalk-record-box .list-box .stat-box .val {
  font-size: var(--font-6xl);
  font-weight: 800;
  color: var(--nie-cl-orange-80);
}
.main-home-screen .toggle-record-container .niewalk-record-box .list-box .stat-box .unit {
  font-size: var(--font-sm);
  font-weight: 700;
  opacity: 0.6;
  color: var(--nie-cl-orange);
}

.goto-next-agreement-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 30px;
}
.goto-next-agreement-box .goto-next-agreement {
  align-items: center;
  justify-content: center;
}
.goto-next-agreement-box .goto-next-agreement .icon {
  font-size: var(--font-9xl);
}
.goto-next-agreement-box .goto-next-agreement .item {
  padding: 10px 0;
  font-size: var(--font-2xl);
  font-weight: bold;
  color: var(--nie-cl-orange);
}

.gps-aggreement-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  margin: auto;
  z-index: 200;
  background: white;
  padding: 30px 6vw;
  height: 100%;
  width: 100%;
  justify-content: space-around;
  flex-direction: column;
}
.gps-aggreement-box.active {
  display: flex;
}
.gps-aggreement-box .head-box {
  padding: 20px 0;
}
.gps-aggreement-box .head-box .title {
  font-size: var(--font-4xl);
  font-weight: bold;
  color: var(--nie-cl-orange);
  padding: 20px 0 30px 0;
  line-height: 1.5;
}
.gps-aggreement-box .head-box .sub-title {
  font-size: var(--font-2xl);
  font-weight: 500;
  letter-spacing: var(--nie-letter-spacing-5);
  line-height: 1.7;
  color: var(--cl-text-b-40);
  padding: 10px 0;
}
.gps-aggreement-box .gps-agree {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background-color: var(--nie-btn-bg-vaguegray);
  border-radius: 10px;
  border: 1px solid var(--nie-cl-orange-10);
  padding: 10px 13px;
  cursor: pointer;
}
.gps-aggreement-box .gps-agree:hover {
  background-color: var(--nie-cl-orange-10);
}
.gps-aggreement-box .gps-agree .icon {
  font-size: var(--font-9xl);
  color: var(--nie-cl-orange);
}
.gps-aggreement-box .gps-agree .text {
  padding: 10px 0;
  font-size: var(--font-xl);
  font-weight: bold;
  color: var(--nie-cl-orange);
}
.gps-aggreement-box .youare_onsite {
  width: 10px;
  height: 10px;
  background-color: var(--cl-text-b-120);
  border-radius: 50%;
}
.gps-aggreement-box .youare_onsite.active {
  background-color: var(--nie-cl-orange);
}

.pre-check-conatiner {
  display: none;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  background-color: white;
}
.pre-check-conatiner.active {
  display: block;
}

.main-gate-entry-screen {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  padding: var(--nie-main-padding);
  z-index: 190;
  background: white;
  overflow-y: auto;
}
.main-gate-entry-screen.active {
  display: block;
}
.main-gate-entry-screen .entry-ask-title-box {
  padding: 15px 0 30px 0;
}
.main-gate-entry-screen .entry-ask-title-box .title {
  font-size: var(--font-4xl);
  font-weight: bold;
  color: var(--nie-cl-orange);
}
.main-gate-entry-screen .entry-ask-box {
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 10px;
  justify-content: center;
}
.main-gate-entry-screen .entry-ask-box .item-box {
  display: flex;
  align-items: center;
  position: relative;
  height: 55px;
  padding: 15px 15px;
  background: #efefef;
  border-radius: 8px;
  cursor: pointer;
}
.main-gate-entry-screen .entry-ask-box .item-box:hover {
  color: white;
  background: var(--nie-cl-orange-40);
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.main-gate-entry-screen .entry-ask-box .item-box .percent-bg {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--nie-cl-orange-40);
  border-radius: 8px 0 0 8px;
  height: 55px;
  z-index: 2;
}
.main-gate-entry-screen .entry-ask-box .item-box .percent-num {
  font-size: var(--font-xl);
  padding: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  font-weight: bold;
  color: var(--nie-cl-orange-80);
}
.main-gate-entry-screen .entry-ask-box .item-box .text {
  padding: 0;
  border-radius: 8px;
  font-size: var(--font-2xl);
  font-weight: bold;
  background: none;
  z-index: 3;
  width: 100%;
  text-align: left;
  color: black;
  pointer-events: none;
  /* 커서 이벤트 비활성화 */
}

.main-map-screen {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
  /* ------------------------------ 
   * 리플렛 마커 z-index 조정 
   --------------------------------*/
  /* -------------------------------- 
  #맵P - PLACE그룹/타입별 - 팝업 html 구분    
    is_navi - type1(only title)
    ebus - type1(only title)
    cs - type1(only title)

    ex - type2(title, desc)

    *stp - type3(img, title, short_desc, `방문3회`,(버튼) )

  */
}
.main-map-screen .nieplace_map_style {
  height: 100%;
  width: 100%;
  z-index: 1;
}
.main-map-screen .map_loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  font-size: var(--font-9xl);
  color: var(--nie-cl-orange);
  text-align: center;
}
.main-map-screen .map_loader .caption {
  font-size: var(--font-2xl);
  font-weight: bold;
  color: var(--nie-cl-orange);
  padding: 10px 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-map-screen .map-control-box {
  position: absolute;
  right: 6vw;
  bottom: 95px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  z-index: 150;
}
.main-map-screen .map-control-box .map-curloc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-map-screen .map-control-box .map-curloc .loc-icon {
  width: -moz-max-content;
  width: max-content;
  max-height: 40px;
  height: 6vh;
  cursor: pointer;
  border-radius: 50%;
}
.main-map-screen .map-control-box .tour-helpcenter-openBtn-box {
  display: flex;
  justify-content: flex-end;
}
.main-map-screen .map-control-box .tour-helpcenter-openBtn-box .title {
  border-radius: 7px 0 7px 7px;
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 5px 12px;
  color: var(--nie-cl-leaf);
  cursor: pointer;
  color: white;
  background: rgba(0, 79, 45, 0.7019607843);
  -webkit-backdrop-filter: blur(26px);
          backdrop-filter: blur(26px);
}
.main-map-screen .map-control-box .tour-helpcenter-openBtn-box .title.active {
  background: var(--nie-cl-orange);
}
.main-map-screen .map-control-box .tour-helpcenter-openBtn-box button.tour-helpcenter-openBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6vh;
  height: 6vh;
  max-width: 7vh;
  max-height: 7vh;
  color: white;
  font-size: var(--font-xl);
  white-space: nowrap;
  background-color: var(--nie-btm-menu-text);
  cursor: pointer;
  border-radius: 50%;
  z-index: 300;
}
.main-map-screen .map-control-box .tour-helpcenter-openBtn-box button.tour-helpcenter-openBtn i.fa {
  pointer-events: none;
}
.main-map-screen .map-control-box .map-zoom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
}
.main-map-screen .map-control-box .map-zoom .zoom-icon {
  width: 8vw;
  height: -moz-max-content;
  height: max-content;
  cursor: pointer;
}
.main-map-screen .icon_gpsNow_RingWave {
  border: 2px solid var(--nie-btm-menu-text);
  background: #ffffff;
  border-radius: 30px;
  opacity: 1;
  height: 40px;
  width: 40px;
  animation: pulsate 1.5s ease-out 0s infinite normal forwards;
  z-index: 0;
  transform: translate(-20px, -20px);
}
.main-map-screen .icon_gpsNow_RingWave::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: var(--nie-btm-menu-text);
  opacity: 1;
  height: 5px;
  width: 5px;
  transform: translate(-50%, -50%);
}
.main-map-screen .icon_placeFocus_RingWave {
  border: 3px solid #ff0057;
  background: var(--nie-cl-blue);
  border-radius: 50%;
  opacity: 1;
  height: 80px;
  width: 80px;
  animation: pulsate 1.5s ease-out 0s infinite normal forwards;
  z-index: 100;
  transform: translate(-40px, -40px);
}
.main-map-screen .icon_placeFocus_RingWave::before {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: var(--nie-cl-orange);
  opacity: 1;
  height: 5px;
  width: 5px;
  transform: translate(-50%, -50%);
}
.main-map-screen .top-menu-box {
  width: 100%;
  position: absolute;
  z-index: 5;
  top: 20px;
}
.main-map-screen .top-menu-box .item-box {
  width: 100%;
  padding: 0 15px;
  display: flex;
  gap: 15px;
  overflow-y: hidden;
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* 요소들을 가로로 나란히 배치 */
}
.main-map-screen .top-menu-box .item-box::-webkit-scrollbar {
  display: none;
}
.main-map-screen .top-menu-box .item-box .item {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 6px 20px;
  color: var(--nie-cl-leaf);
  border: 1.5px solid var(--nie-cl-leaf);
  cursor: pointer;
  border-radius: 20px;
  background: white;
}
.main-map-screen .top-menu-box .item-box .item.active {
  background-color: var(--nie-cl-leaf);
  color: white;
}
.main-map-screen ._old_niemap_is_navi_panel {
  z-index: 20;
  background-color: white;
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  margin: auto;
  height: 200px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 선택 박스 내부의 옵션 스타일 */
}
.main-map-screen ._old_niemap_is_navi_panel.active {
  display: flex;
}
.main-map-screen ._old_niemap_is_navi_panel select {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  padding: 8px 12px;
  /* 선택 박스 내부 여백 */
  border: 1px solid #ccc;
  /* 테두리 스타일 및 색상 */
  border-radius: 4px;
  /* 테두리 모서리 둥글게 */
  font-size: 16px;
  /* 글꼴 크기 */
  width: 200px;
  /* 선택 박스 너비 */
  outline: none;
  /* 선택 박스 포커스 시 테두리 제거 */
}
.main-map-screen ._old_niemap_is_navi_panel select:focus {
  border-color: #007BFF;
  /* 포커스 시 테두리 색상 변경 */
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
  /* 포커스 시 그림자 효과 */
}
.main-map-screen ._old_niemap_is_navi_panel option {
  background-color: #fff;
  /* 옵션 배경색 */
  color: #333;
  /* 글꼴 색상 */
  /* 선택 박스 옵션 활성화 스타일 */
}
.main-map-screen ._old_niemap_is_navi_panel option:checked {
  background-color: #007BFF;
  /* 선택된 옵션 배경색 */
  color: #fff;
  /* 선택된 옵션 글꼴 색상 */
}
.main-map-screen ._old_niemap_is_navi_panel option:disabled {
  /* 선택 박스 비활성화 배경색 */
  color: rgba(153, 153, 153, 0.2666666667);
  /* 선택 박스 비활성화 글꼴 색상 */
}
.main-map-screen .niemap_ex_submenu,
.main-map-screen .niemap_cs_submenu {
  display: none;
  z-index: 120;
  margin-left: auto;
  width: -moz-max-content;
  width: max-content;
}
.main-map-screen .niemap_ex_submenu.active,
.main-map-screen .niemap_cs_submenu.active {
  display: block;
}
.main-map-screen .niemap_ex_submenu .submenu-toggle-btn-box,
.main-map-screen .niemap_cs_submenu .submenu-toggle-btn-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 10px;
}
.main-map-screen .niemap_ex_submenu .submenu-toggle-btn-box button.toggle,
.main-map-screen .niemap_cs_submenu .submenu-toggle-btn-box button.toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: white;
  color: var(--nie-cl-orange);
  width: 6vh;
  height: 6vh;
  max-width: 7vh;
  max-height: 7vh;
  border: 2px solid var(--nie-cl-orange);
  border-radius: 50%;
  font-size: var(--font-xl);
}
.main-map-screen .niemap_ex_submenu .submenu-toggle-btn-box button.toggle::after,
.main-map-screen .niemap_cs_submenu .submenu-toggle-btn-box button.toggle::after {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  font-size: var(--font-xl);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-map-screen .niemap_ex_submenu .submenu-toggle-btn-box button.toggle.active::after,
.main-map-screen .niemap_cs_submenu .submenu-toggle-btn-box button.toggle.active::after {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  font-size: var(--font-xl);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-map-screen .niemap_ex_submenu .submenu-box,
.main-map-screen .niemap_cs_submenu .submenu-box {
  max-height: 0;
  /*닫혔을때높이를0으로설정*/
  /* 초기에 닫힌 상태로 시작 */
  overflow: hidden;
  /* ease-in-out의 반대 */
  transition: max-height 0.3s cubic-bezier(0.9, 0, 0.1, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1vh;
}
.main-map-screen .niemap_ex_submenu .submenu-box.active,
.main-map-screen .niemap_cs_submenu .submenu-box.active {
  max-height: 1000px;
  transition: max-height 0.5s ease-in-out;
}
.main-map-screen .niemap_ex_submenu .submenu-box .submenu-list,
.main-map-screen .niemap_cs_submenu .submenu-box .submenu-list {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.main-map-screen .niemap_ex_submenu .submenu-box .submenu-list .subicon-box,
.main-map-screen .niemap_cs_submenu .submenu-box .submenu-list .subicon-box {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0.8;
}
.main-map-screen .niemap_ex_submenu .submenu-box .submenu-list .subicon-box.active,
.main-map-screen .niemap_cs_submenu .submenu-box .submenu-list .subicon-box.active {
  opacity: 1;
}
.main-map-screen .niemap_ex_submenu .submenu-box .submenu-list .subicon-box .subicon,
.main-map-screen .niemap_cs_submenu .submenu-box .submenu-list .subicon-box .subicon {
  width: 5.5vh;
  height: 5.5vh;
  max-width: 6.5vh;
  max-height: 6.5vh;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
}
.main-map-screen .niemap_ex_submenu .submenu-box .submenu-list .subicon-box .subicon.seeall,
.main-map-screen .niemap_cs_submenu .submenu-box .submenu-list .subicon-box .subicon.seeall {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--nie-cl-leaf);
  font-size: var(--font-2xl);
  border: 1px solid var(--nie-cl-leaf);
}
.main-map-screen .niemap_ex_submenu .submenu-box .submenu-list .title,
.main-map-screen .niemap_cs_submenu .submenu-box .submenu-list .title {
  border-radius: 7px 0 7px 7px;
  font-size: var(--font-md);
  font-weight: bold;
  padding: 5px 12px;
  color: var(--nie-cl-leaf);
  cursor: pointer;
  color: white;
  background: rgba(0, 79, 45, 0.7019607843);
  -webkit-backdrop-filter: blur(26px);
          backdrop-filter: blur(26px);
}
.main-map-screen .niemap_ex_submenu .submenu-box .submenu-list .title.active,
.main-map-screen .niemap_cs_submenu .submenu-box .submenu-list .title.active {
  background: var(--nie-cl-orange);
}
.main-map-screen .niemap_stp_submenu {
  display: none;
  z-index: 20;
  margin-left: auto;
  width: -moz-max-content;
  width: max-content;
}
.main-map-screen .niemap_stp_submenu.active {
  display: flex;
}
.main-map-screen .niemap_stp_submenu .icon-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.main-map-screen .niemap_stp_submenu .icon-box .icon {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 6px 20px;
  cursor: pointer;
  border-radius: 20px;
}
.main-map-screen .niemap_stp_submenu .icon-box .icon.stroad_sd {
  background-color: white;
  color: var(--nie-cl-orange);
  border: 2px solid var(--nie-cl-orange);
}
.main-map-screen .niemap_stp_submenu .icon-box .icon.stroad_sd.active {
  background-color: var(--nie-cl-orange);
  color: white;
}
.main-map-screen .niemap_stp_submenu .icon-box .icon.stroad_br {
  background-color: white;
  color: var(--nie-cl-blue);
  border: 2px solid var(--nie-cl-blue);
}
.main-map-screen .niemap_stp_submenu .icon-box .icon.stroad_br.active {
  background-color: var(--nie-cl-blue);
  color: white;
}
.main-map-screen .niemap_stp_submenu .icon-box .icon.all {
  background-color: white;
  color: var(--cl-text-b-40);
  border: 2px solid var(--cl-text-b-40);
}
.main-map-screen .niemap_stp_submenu .icon-box .icon.all.active {
  background-color: var(--cl-text-b-40);
  color: white;
}
.main-map-screen .leaflet-routing-container {
  display: none !important;
}
.main-map-screen .leaflet-popup-content-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.main-map-screen .leaflet-popup-content-wrapper,
.main-map-screen .leaflet-popup-tip {
  border: none !important;
  background: transparent !important;
  color: #fff;
  box-shadow: 0 3px 12px 0px rgba(90, 90, 90, 0.3215686275);
}
.main-map-screen .leaflet-popup-tip {
  display: none !important;
}
.main-map-screen .leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
}
.main-map-screen .leaflet-popup-content p {
  margin: 0 !important;
  padding: 0 !important;
}
.main-map-screen .leaflet-marker-icon.gpsNow {
  z-index: 0 !important;
  position: relative;
}
.main-map-screen .nie-map-placeicons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main-map-screen .nie-map-placeicons .icon-zone {
  width: 32px;
  height: 32px;
  position: relative;
}
.main-map-screen .nie-map-placeicons .icon-zone .is_finish_mark {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.main-map-screen .nie-map-placeicons .icon-zone .is_finish_mark.active {
  display: block;
}
.main-map-screen .nie-map-placeicons .icon-zone .is_finish_mark.sd {
  background-color: var(--nie-cl-orange);
}
.main-map-screen .nie-map-placeicons .icon-zone .is_finish_mark.br {
  background-color: var(--nie-cl-blue);
}
.main-map-screen .nie-map-placeicons .icon-zone.blocked {
  filter: grayscale(100%);
  opacity: 0.5;
}
.main-map-screen .nie-map-placeicons .title {
  color: var(--nie-cl-leaf);
  text-align: center;
  white-space: nowrap;
  font-size: 8px;
  font-weight: bold;
  padding: 3px 0 0px 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-map-screen .nie-map-placeicons .title.sd {
  color: var(--nie-cl-orange);
  font-size: 12px;
}
.main-map-screen .nie-map-placeicons .title.br {
  color: var(--nie-cl-blue);
  font-size: 12px;
}
.main-map-screen .nie-mapplace-popup-infobox {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: -moz-max-content;
  width: max-content;
  max-width: 270px;
  height: -moz-max-content;
  height: max-content;
  background: var(--nie-cl-leaf);
  color: white;
  padding: 12px 16px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  border-radius: 12px;
}
.main-map-screen .nie-mapplace-popup-infobox .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  pointer-events: none;
}
.main-map-screen .nie-mapplace-popup-infobox p.desc {
  font-size: var(--font-xl);
  line-height: 1.5;
  opacity: 0.8;
}
.main-map-screen .nie-mapplace-popup-infobox .share {
  position: absolute;
  top: 0%;
  z-index: 50;
  right: 0%;
  margin-right: -18px;
  margin-top: -18px;
  width: 36px;
  height: 36px;
  /* transform: translate(10px, 10px); */
  background: var(--nie-cl-orange);
  border: 1.5px solid white;
  color: white;
  display: flex;
  cursor: pointer;
  font-size: var(--font-md);
  padding: 3px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.main-map-screen .nie-mapplace-popup-infobox .tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  margin-top: -1px;
  border-width: 16px;
  border-style: solid;
  border-radius: 3px;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: clamp(10px, 62vw, 250px);
  height: -moz-max-content;
  height: max-content;
  color: white;
  padding: 16px 16px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  border-radius: 12px;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .finish-stp-mark-box {
  position: absolute;
  top: 10px;
  right: 10px;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .finish-stp-mark-box img.finish-stp-mark {
  width: 30vw;
  height: 30vw;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .stbook-icon {
  width: clamp(10px, 23vw, 100px);
  height: clamp(10px, 23vw, 100px);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .title {
  padding: 15px 0 5px 0;
  font-size: var(--font-3xl);
  white-space: nowrap;
  font-weight: bold;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp p.desc {
  font-size: var(--font-xl);
  line-height: 1.5;
  opacity: 0.8;
  -webkit-line-clamp: 2;
  text-align: center;
  letter-spacing: -0.5px;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .stat-box {
  padding: 15px 0 5px 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .stat-box .info {
  font-size: var(--font-xl);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp button.btn {
  background: white;
  color: var(--nie-cl-orange);
  cursor: pointer;
  border-radius: 30px;
  padding: 10px 15px;
  font-size: var(--font-xl);
  font-weight: 600;
  text-align: center;
  z-index: 5;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp button.btn:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp button.btn.toured {
  background: none;
  color: white !important;
  border: 1px solid white;
  pointer-events: none;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp.sd {
  background: var(--nie-cl-orange);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp.sd button.btn {
  color: var(--nie-cl-orange);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp.br {
  background: var(--nie-cl-blue);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp.br button.btn {
  color: var(--nie-cl-blue);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp.blocked {
  background: var(--cl-text-b-200);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp.blocked button.btn {
  color: var(--cl-text-b-40);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  margin-top: -1px;
  border-width: 16px;
  border-style: solid;
  border-radius: 3px;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .tooltip.sd {
  border-color: var(--nie-cl-orange) transparent transparent transparent;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .tooltip.br {
  border-color: var(--nie-cl-blue) transparent transparent transparent;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .tooltip.blocked {
  border-color: var(--cl-text-b-200) transparent transparent transparent;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .share {
  position: absolute;
  top: 0%;
  z-index: 50;
  right: 0%;
  margin-right: -16px;
  margin-top: -16px;
  width: 30px;
  height: 30px;
  /* transform: translate(10px, 10px); */
  background: var(--nie-cl-orange);
  border: 1px solid white;
  color: white;
  display: flex;
  font-size: var(--font-md);
  padding: 3px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .share.sd {
  background: var(--nie-cl-orange);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .share.br {
  background: var(--nie-cl-blue);
}
.main-map-screen .nie-mapplace-popup-infobox-stamp .share.blocked {
  background: var(--cl-text-b-200);
}
.main-map-screen .niemap_is_navi_panel {
  display: none;
  z-index: 50;
  background-color: var(--nie-bg-toppanel);
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  border-radius: 14px;
  margin: auto;
  height: -moz-max-content;
  height: max-content;
  border: 4px solid rgba(0, 79, 45, 0.568627451);
  box-shadow: 0 0 6px 1px var(--nie-shadow-toppanel);
  border-width: 0px 0px 0px 5px;
  max-height: 75vh;
  overflow-y: auto;
  margin: 0 4vw;
}
.main-map-screen .niemap_is_navi_panel.active {
  display: block;
}
.main-map-screen .niemap_is_navi_panel .header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
}
.main-map-screen .niemap_is_navi_panel .header-box .title {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--nie-cl-leaf);
  white-space: nowrap;
}
.main-map-screen .niemap_is_navi_panel .header-box .toggle-button {
  opacity: 0.8;
  width: 100px;
  text-align: right;
  cursor: pointer;
  font-size: var(--font-xl);
  color: var(--nie-cl-leaf);
}
.main-map-screen .niemap_is_navi_panel .header-box .toggle-button.up i.fa {
  transform: rotate(180deg);
}
.main-map-screen .niemap_is_navi_panel .content-box {
  display: none;
  gap: 12px;
  padding: 20px 20px;
  height: -moz-max-content;
  height: max-content;
  overflow-y: auto;
  letter-spacing: -0.4px;
  border-top: 1px dashed var(--cl-text-b-40);
  flex-direction: column;
  /* 선택 박스 내부의 옵션 스타일 */
}
.main-map-screen .niemap_is_navi_panel .content-box.active {
  display: flex;
}
.main-map-screen .niemap_is_navi_panel .content-box select {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  padding: 8px 12px;
  /* 선택 박스 내부 여백 */
  border: 1px solid var(--nie-cl-gray);
  /* 테두리 스타일 및 색상 */
  border-radius: 8px;
  /* 테두리 모서리 둥글게 */
  font-size: var(--font-2xl);
  /* 글꼴 크기 */
  /* 선택 박스 너비 */
  outline: none;
  font-weight: bold;
  /* 선택 박스 포커스 시 테두리 제거 */
}
.main-map-screen .niemap_is_navi_panel .content-box select:focus {
  border-color: #007BFF;
  background-color: rgba(0, 123, 255, 0.2274509804);
  /* 포커스 시 테두리 색상 변경 */
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
  /* 포커스 시 그림자 효과 */
}
.main-map-screen .niemap_is_navi_panel .content-box option {
  background-color: #fff;
  /* 옵션 배경색 */
  color: #333;
  /* 글꼴 색상 */
  /* 선택 박스 옵션 활성화 스타일 */
}
.main-map-screen .niemap_is_navi_panel .content-box option:checked {
  background-color: #007BFF;
  /* 선택된 옵션 배경색 */
  color: #fff;
  /* 선택된 옵션 글꼴 색상 */
}
.main-map-screen .niemap_is_navi_panel .content-box option:disabled {
  /* 선택 박스 비활성화 배경색 */
  color: rgba(153, 153, 153, 0.2666666667);
  /* 선택 박스 비활성화 글꼴 색상 */
}
.main-map-screen .niemap_is_navi_panel .content-box .btn-box {
  width: 100%;
  padding: 5px 0;
}
.main-map-screen .niemap_is_navi_panel .content-box .btn-box .btn {
  text-align: center;
  padding: 8px 12px;
  font-size: var(--font-2xl);
  color: white;
  border-radius: 8px;
}
.main-map-screen .niemap_is_navi_panel .content-box .btn-box .btn:hover {
  background-color: var(--nie-cl-orange);
}
.main-map-screen .niemap_ebus_panel,
.main-map-screen .niemap_cs_panel {
  display: none;
  height: max-content;
  z-index: 250;
  background-color: var(--nie-bg-toppanel);
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  border-radius: 14px;
  margin: auto;
  height: -moz-max-content;
  height: max-content;
  border: 4px solid rgba(0, 79, 45, 0.568627451);
  box-shadow: 0 0 6px 1px var(--nie-shadow-toppanel);
  border-width: 0px 0px 0px 5px;
  max-height: 75vh;
  overflow-y: auto;
  margin: 0 4vw;
}
.main-map-screen .niemap_ebus_panel.active,
.main-map-screen .niemap_cs_panel.active {
  display: block;
}
.main-map-screen .niemap_ebus_panel .header-box,
.main-map-screen .niemap_cs_panel .header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
}
.main-map-screen .niemap_ebus_panel .header-box .title,
.main-map-screen .niemap_cs_panel .header-box .title {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--nie-cl-leaf);
}
.main-map-screen .niemap_ebus_panel .header-box .toggle-button,
.main-map-screen .niemap_cs_panel .header-box .toggle-button {
  opacity: 0.8;
  font-size: var(--font-xl);
  color: var(--nie-cl-leaf);
}
.main-map-screen .niemap_ebus_panel .header-box .toggle-button.up,
.main-map-screen .niemap_cs_panel .header-box .toggle-button.up {
  transform: rotate(180deg);
}
.main-map-screen .niemap_ebus_panel .content-box,
.main-map-screen .niemap_cs_panel .content-box {
  display: none;
  gap: 14px;
  padding: 0px 20px;
  height: -moz-max-content;
  height: max-content;
  overflow-y: auto;
  letter-spacing: -0.4px;
  border-top: 1px dashed var(--cl-text-b-40);
  font-size: var(--font-xl);
  font-weight: bold;
  line-height: 1.7;
  opacity: 0.8;
  height: max-content;
}
.main-map-screen .niemap-ebus-panel {
  width: -moz-max-content;
  width: max-content;
}
.main-map-screen .niemap_cs_panel {
  border-color: var(--nie-cl-orange);
}
.main-map-screen .niemap_cs_panel .header-box .title {
  color: var(--nie-cl-orange) !important;
}
.main-map-screen .niemap_cs_panel .header-box .toggle-button {
  color: var(--nie-cl-orange) !important;
}

.main-stampbook-screen {
  position: relative;
  padding: var(--nie-main-padding);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  overflow-y: auto;
  /*

    # card-item 은 3가지가 있다. no-history, history, cheerup
  */
}
.main-stampbook-screen .view-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  /* height: 40px; */
  padding: 20px 0vw;
}
.main-stampbook-screen .view-box img.view-menu {
  width: 25px;
  height: 25px;
  opacity: 0.5;
}
.main-stampbook-screen .view-box img.view-menu.active {
  opacity: 1;
}
.main-stampbook-screen .stampbook-container {
  height: -moz-max-content;
  height: max-content;
}
.main-stampbook-screen .stampbook-container .title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 20px 0 20px 0;
  color: var(--cl-text-b-40);
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box {
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  align-items: center;
  justify-content: center;
  gap: 6vw;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box.open {
  display: grid;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 44vw;
  padding: 4vw;
  background-color: var(--nie-cl-pink-80);
  box-shadow: 2px 2px 0px 1px var(--nie-cl-pink);
  border: 1px solid var(--nie-cl-pink);
  border-radius: 12px;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item.today {
  background-color: var(--nie-cl-ivory);
  box-shadow: 2px 2px 0px 1px var(--nie-cl-ivory-120);
  border: 1px solid var(--nie-cl-ivory-120);
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item .stamp-icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  padding: 18px 0;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item .stamp-icons .icon {
  width: 16vw;
  height: -moz-max-content;
  height: max-content;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item .date {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 2px 0;
  white-space: nowrap;
  letter-spacing: -0.9px;
  opacity: 0.6;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item .step {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 2px 0;
  letter-spacing: -0.8px;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item.nohistory .stamp-icons {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  padding: 18px 0;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item.nohistory .date {
  opacity: 1;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item.cheerup {
  background-color: var(--nie-cl-snow);
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item.cheerup .stamp-icons {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  padding: 18px 0;
}
.main-stampbook-screen .stampbook-container .stamp-cardType-box .card-item.cheerup .date {
  opacity: 1;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box {
  display: none;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box.open {
  display: grid;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item {
  display: grid;
  grid-template-columns: 85px 4fr 4fr 1fr;
  align-content: center;
  align-items: center;
  justify-items: flex-end;
  cursor: pointer;
  height: 65px;
  padding: 0 3vw;
  background-color: var(--nie-cl-pink-80);
  box-shadow: 2px 2px 0px 1px var(--nie-cl-pink);
  border: 1px solid var(--nie-cl-pink);
  border-radius: 12px;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item.today {
  background-color: var(--nie-cl-ivory);
  box-shadow: 2px 2px 0px 1px var(--nie-cl-ivory-120);
  border: 1px solid var(--nie-cl-ivory-120);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .stamp-icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box {
  position: relative;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .num {
  border-radius: 9px;
  left: 0;
  right: 0px;
  top: -4px;
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  margin: auto;
  text-align: center;
  color: white;
  font-size: var(--font-sm);
  padding: 2px 4px;
  font-weight: 600;
  z-index: 5;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .num.sd {
  background: var(--nie-cl-orange);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .num.br {
  background: var(--nie-cl-blue);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .icon {
  width: 11vw;
  height: -moz-max-content;
  height: max-content;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .icon.yet {
  opacity: 0.6;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .date {
  font-size: var(--font-xl);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.9px;
  opacity: 0.6;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .step {
  font-size: var(--font-xl);
  font-weight: bold;
  letter-spacing: -0.8px;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  font-weight: bold;
  color: black;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item .arrow.up {
  transform: rotate(180deg);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container {
  display: none;
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 35px 10px 10px 10px;
  background-color: var(--nie-cl-pink-80);
  box-shadow: 2px 2px 0px 1px var(--nie-cl-pink);
  border: 1px solid var(--nie-cl-pink);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container.today {
  background-color: var(--nie-cl-ivory);
  box-shadow: 2px 2px 0px 1px var(--nie-cl-ivory-120);
  border: 1px solid var(--nie-cl-ivory-120);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container.open {
  display: flex;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .finish-mark-box,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .finish-mark-box {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .finish-mark-box .finish-mark,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .finish-mark-box .finish-mark {
  width: 28vw;
  height: 28vw;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group {
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  padding: 10px;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group .stamp-set,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group .stamp-set,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group .stamp-set .stamp,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group .stamp-set .stamp,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set .stamp,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set .stamp {
  width: 60px;
  height: -moz-max-content;
  height: max-content;
  box-shadow: 0px 0px 12px 1px var(--nie-cl-orange-40);
  border: 1px solid var(--nie-cl-orange-40);
  border-radius: 50px;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group .stamp-set .name,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group .stamp-set .name,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set .name,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set .name {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 1px 0;
  color: var(--nie-cl-orange);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .back-road-box,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .back-road-box {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .back-road-box .back-road,
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .back-road-box .back-road {
  border-radius: 100px;
  border: 6px solid var(--nie-cl-orange);
  width: 100%;
  height: 55%;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .btn-box .btn {
  font-size: var(--font-xl);
  font-weight: bold;
  color: var(--nie-cl-leaf);
  padding: 10px 20px;
  border-radius: 30px;
  background-color: white;
  border: 1px solid var(--nie-cl-leaf);
  cursor: pointer;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .btn-box .btn:hover {
  background-color: var(--nie-cl-leaf);
  color: white;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container {
  /* ------------------------------ 
   # 2024 - 10ROAD , 5/5 개씩 포함 버전 
   --------------------------------*/
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group {
  grid-template-columns: 1fr 1fr;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group {
  grid-template-columns: 1fr 1fr 1fr;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group {
  grid-template-columns: 1fr 1fr;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set .name {
  color: var(--nie-cl-blue);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group {
  grid-template-columns: 1fr 1fr 1fr;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set .name {
  color: var(--nie-cl-blue);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .back-road-box .back-road {
  border: 6px solid var(--nie-cl-blue);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item.nohistory .stamp-icons {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  padding: 18px 0;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item.nohistory .date {
  opacity: 1;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item.cheerup {
  background-color: var(--nie-cl-snow);
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item.cheerup .stamp-icons {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  padding: 18px 0;
}
.main-stampbook-screen .stampbook-container .stamp-listType-box .list-item.cheerup .date {
  opacity: 1;
}

.main-mypage-screen {
  position: relative;
  padding: var(--nie-main-padding);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  overflow-y: auto;
}

.main-mypage-screen {
  display: grid;
  grid-template-rows: 4fr 3fr 3fr;
}

.profile-container {
  position: relative;
  border-bottom: 1px dashed var(--nie-cl-leaf);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 0 40px 0;
}
.profile-container .img-box {
  border-radius: 50%;
}
.profile-container .nickname {
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 10px 0 0px 0;
}
.profile-container .account {
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--nie-cl-gray);
  padding: 5px 0;
}
.profile-container .feed-new-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 10px;
}
.profile-container .feed-new-box .feedcount,
.profile-container .feed-new-box .feedreply {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-md);
  padding: 5px 0;
  gap: 1px;
}
.profile-container .feed-new-box .feedcount .icon,
.profile-container .feed-new-box .feedreply .icon {
  opacity: 0.8;
}
.profile-container .feed-new-box .feedcount .text,
.profile-container .feed-new-box .feedreply .text {
  font-size: var(--font-xl);
}
.profile-container .feed-new-box .feedcount .num,
.profile-container .feed-new-box .feedreply .num {
  font-size: var(--font-xl);
  padding-right: 2px;
}
.profile-container .edit-box {
  position: absolute;
  bottom: 10px;
  right: 0;
}
.profile-container .edit-box .edit-btn {
  font-size: var(--font-md);
  font-weight: bold;
  padding: 10px 0;
  color: var(--nie-cl-leaf);
  border-radius: 15px;
  padding: 5px 12px;
  border: 1px solid var(--nie-cl-leaf);
}
.profile-container .edit-box .edit-btn:hover {
  background-color: var(--nie-cl-leaf);
  color: white;
}

.stampbook-linkguide-container {
  border-bottom: 1px dashed var(--nie-cl-leaf);
  position: relative;
  padding-bottom: 65px;
}
.stampbook-linkguide-container .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 15px 0;
}
.stampbook-linkguide-container .sub-title {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 10px 0;
}
.stampbook-linkguide-container .record-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stampbook-linkguide-container .record-box .icon {
  width: 70px;
  height: 70px;
}
.stampbook-linkguide-container .record-box .text-box {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 3px 0;
  letter-spacing: var(--nie-letter-spacing-3);
  /* ------------------------------ 
   * 수정 
   --------------------------------*/
}
.stampbook-linkguide-container .record-box .text-box .editbox {
  padding: 0 10px;
  display: flex;
  gap: 5px;
}
.stampbook-linkguide-container .record-box .text-box .text {
  font-size: var(--font-lg);
  font-weight: 700;
  padding: 3px 0;
  color: black;
}
.stampbook-linkguide-container .record-box .text-box .clock {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 2px 0;
  color: black;
  opacity: 0.6;
  letter-spacing: var(--nie-letter-spacing-3);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.stampbook-linkguide-container .record-box .btn-box {
  position: absolute;
  bottom: 10px;
  right: 0;
}
.stampbook-linkguide-container .record-box .btn-box .goto-stampbook-page-btn {
  font-size: var(--font-lg);
  font-weight: bold;
  padding: 10px 0;
  color: var(--nie-cl-leaf);
  border-radius: 20px;
  padding: 7px 18px;
  border: 1px solid var(--nie-cl-leaf);
  cursor: pointer;
}
.stampbook-linkguide-container .record-box .btn-box .goto-stampbook-page-btn:hover {
  background-color: var(--nie-cl-leaf);
  color: white;
}

.stampbook-stat-container {
  width: 100%;
}
.stampbook-stat-container .title-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0 20px 0;
}
.stampbook-stat-container .title-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
}
.stampbook-stat-container .title-box .guide {
  width: 25px;
  height: 25px;
  border: 2px solid var(--nie-cl-leaf);
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-md);
  font-weight: bold;
  color: var(--nie-cl-leaf);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stampbook-stat-container .stat-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}
.stampbook-stat-container .stat-box .level-icon {
  width: 16vw;
  height: -moz-max-content;
  height: max-content;
}
.stampbook-stat-container .stat-box .infos {
  display: flex;
  flex-direction: column;
}
.stampbook-stat-container .stat-box .infos .rec {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
  font-size: var(--font-xl);
  font-weight: bold;
}
.stampbook-stat-container .stat-box .infos .guidetext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0;
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--nie-cl-leaf);
}
.stampbook-stat-container .stat-box .infos .guidetext .val {
  font-weight: bold;
}

.stampbook-levelguide-container {
  display: none;
  position: absolute;
  bottom: 10px;
  padding: 20px 6vw;
  z-index: 10;
  width: 100%;
  left: 0;
  right: 0;
  transition: all 0.5s ease-in-out;
}
.stampbook-levelguide-container.open {
  display: block;
}
.stampbook-levelguide-container .stampbook-levelguide-panel {
  background: white;
  padding: 15px 15px;
  position: relative;
  border-radius: 15px;
  border: 2px solid var(--nie-cl-leaf);
  box-shadow: 2px 2px 0px 2px var(--nie-cl-leaf-40);
}
.stampbook-levelguide-container .stampbook-levelguide-panel .close {
  font-size: var(--font-4xl);
  position: absolute;
  top: 12px;
  right: 15px;
  cursor: pointer;
}
.stampbook-levelguide-container .stampbook-levelguide-panel .title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 6px 0;
}
.stampbook-levelguide-container .stampbook-levelguide-panel .subtitle {
  white-space: pre-line;
  color: var(--nie-cl-gray);
  padding-bottom: 20px;
}
.stampbook-levelguide-container .stampbook-levelguide-panel .level-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-end;
  justify-items: center;
}
.stampbook-levelguide-container .stampbook-levelguide-panel .level-list img.icon {
  width: 13vw;
  height: -moz-max-content;
  height: max-content;
}
.stampbook-levelguide-container .stampbook-levelguide-panel .level-list .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.stampbook-levelguide-container .stampbook-levelguide-panel .level-list .card .range {
  font-size: var(--font-sm);
  color: var(--nie-cl-gray);
  font-weight: 400;
  padding: 2px 0;
}
.stampbook-levelguide-container .stampbook-levelguide-panel .level-list .card .name {
  font-size: var(--font-md);
  color: var(--nie-cl-leaf);
  font-weight: 700;
  padding: 2px 0;
}

.main-stour-post-screen {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.main-stour-post-screen .back {
  position: absolute;
  background-color: var(--nie-stamp-post-bg);
  width: 100%;
  height: 100%;
  z-index: 1;
}
.main-stour-post-screen .name-box {
  position: absolute;
  z-index: 2;
  top: 80px;
  right: 0;
  margin: auto;
  left: 0;
  width: 90vw;
  padding: 10px 20px;
  text-align: center;
  color: black;
  font-size: var(--font-xl);
  font-weight: bold;
  background-color: var(--nie-cl-ivory);
  border-radius: 30px;
  letter-spacing: -0.8px;
  white-space: nowrap;
}
.main-stour-post-screen .character-box {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s;
  cursor: pointer;
}
.main-stour-post-screen .character-box .character {
  width: 80vw;
  height: 80vw;
}
.main-stour-post-screen .eat-box {
  bottom: 60px;
  z-index: 4;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}
.main-stour-post-screen .eat-box .eat {
  width: 85px;
  height: 85px;
  cursor: move;
}

.main-stour-screen {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  padding: var(--nie-main-padding);
  overflow-y: auto;
}
.main-stour-screen .tab-box {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  align-items: center;
  padding: 5px 0;
  background-color: white;
  gap: 10px;
  height: 50px;
  z-index: 10;
}
.main-stour-screen .tab-box .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  gap: 10px;
  padding: 8px 20px;
  font-size: var(--font-xl);
  color: var(--cl-text-b-120);
  border: 1px solid var(--cl-text-b-120);
  cursor: pointer;
}
.main-stour-screen .tab-box .tab:hover {
  background-color: var(--nie-cl-leaf);
  color: white;
  border: none;
  font-weight: bold;
}
.main-stour-screen .tab-box .tab.active {
  background-color: var(--nie-cl-leaf);
  color: white;
  border: none;
  font-weight: bold;
}
.main-stour-screen .stour-tab-container {
  display: none;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}
.main-stour-screen .stour-tab-container.info.active {
  display: block;
}
.main-stour-screen .stour-tab-container.info .info-box {
  letter-spacing: var(--nie-letter-spacing-3);
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 10px;
  background-color: var(--nie-btn-bg-vaguegray);
  border-radius: 15px;
  color: var(--nie-cl-leaf);
}
.main-stour-screen .stour-tab-container.info .info-box .title {
  text-align: center;
  line-height: 1.7;
  font-size: var(--font-5xl);
  font-weight: bold;
  padding: 2px 0;
}
.main-stour-screen .stour-tab-container.info .info-box .sub-title {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 0;
  white-space: nowrap;
}
.main-stour-screen .stour-tab-container.info .info-box .content {
  font-size: var(--font-md);
  opacity: 0.8;
  font-weight: 500;
  padding: 3px 0;
  white-space: pre-line;
}
.main-stour-screen .stour-tab-container.info .process-guide-box {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  background-color: var(--nie-cl-snow);
  border: 2px solid var(--nie-cl-leaf);
  border-radius: 15px;
}
.main-stour-screen .stour-tab-container.info .process-guide-box ol.guide-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.main-stour-screen .stour-tab-container.info .process-guide-box ol.guide-list li {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 4px 0;
  color: var(--nie-cl-leaf);
  list-style-type: decimal !important;
  list-style-position: inside;
  line-height: 1.8;
  letter-spacing: -1px;
  border-bottom: 1px dashed #c5c5c5;
}
.main-stour-screen .stour-tab-container.info .process-guide-box ol.guide-list li span.road {
  padding: 4px 9px;
  margin: 0 2px;
  border-radius: 10px;
  color: white;
  font-size: var(--font-sm);
  letter-spacing: 0px;
}
.main-stour-screen .stour-tab-container.info .process-guide-box ol.guide-list li span.road.sd {
  background: var(--nie-cl-orange);
}
.main-stour-screen .stour-tab-container.info .process-guide-box ol.guide-list li span.road.br {
  background: var(--nie-cl-blue);
}
.main-stour-screen .stour-tab-container.info .process-guide-box ol.guide-list li span.road.stbook {
  background: var(--cl-text-b-40);
  color: white;
}
.main-stour-screen .stour-tab-container.info .process-guide-box ol.guide-list li.sub {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 8px 0;
  color: var(--nie-cl-orange);
  list-style-type: none !important;
}
.main-stour-screen .stour-tab-container.info .tour-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 15px;
  padding: 15px 0;
}
.main-stour-screen .stour-tab-container.info .tour-btn-box .btn {
  width: 100%;
  padding: 10px 25px;
  text-align: center;
  font-size: var(--font-xl);
  font-weight: bold;
  border-radius: 8px;
  border: 1px solid var(--nie-cl-leaf);
  background-color: var(--nie-cl-leaf);
  color: white;
  cursor: pointer;
}
.main-stour-screen .stour-tab-container.info .tour-btn-box .btn:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}
.main-stour-screen .stour-tab-container.gift.active {
  display: block;
}
.main-stour-screen .stour-tab-container.gift {
  display: none;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
}
.main-stour-screen .stour-tab-container.gift.active {
  display: block;
}
.main-stour-screen .stour-tab-container.gift .section-title {
  font-size: var(--font-4xl);
  font-weight: bold;
  padding: 20px 0 10px 0;
}
.main-stour-screen .stour-tab-container.gift .intro-box {
  padding: 20px 10px;
  background-color: var(--nie-btn-bg-vaguegray);
  border-radius: 8px;
  text-align: center;
  color: var(--nie-cl-leaf);
}
.main-stour-screen .stour-tab-container.gift .intro-box .title {
  text-align: center;
  line-height: 1.7;
  font-size: var(--font-5xl);
  font-weight: bold;
  padding: 2px 0;
}
.main-stour-screen .stour-tab-container.gift .intro-box .title.sub {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 0;
}
.main-stour-screen .stour-tab-container.gift .tour-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 15px;
  padding: 15px 0;
}
.main-stour-screen .stour-tab-container.gift .tour-btn-box .btn {
  width: 100%;
  padding: 10px 25px;
  text-align: center;
  font-size: var(--font-xl);
  font-weight: bold;
  border-radius: 8px;
  border: 1px solid var(--nie-cl-leaf);
  background-color: var(--nie-cl-leaf);
  color: white;
  cursor: pointer;
}
.main-stour-screen .stour-tab-container.gift .tour-btn-box .btn:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}
.main-stour-screen .stour-tab-container.gift .present-now-box {
  padding: 10px 10px;
  border-bottom: 1px solid var(--cl-text-b-200);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.main-stour-screen .stour-tab-container.gift .present-now-box .item-box {
  text-align: center;
}
.main-stour-screen .stour-tab-container.gift .present-now-box .item-box .item {
  padding: 2px 0 8px 0;
  font-size: var(--font-xl);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: var(--nie-letter-spacing-3);
}
.main-stour-screen .stour-tab-container.gift .present-now-box .item-box .val {
  padding: 2px 0;
  font-size: var(--font-8xl);
  font-weight: 800;
  opacity: 0.7;
  color: var(--nie-btm-menu-text);
}
.main-stour-screen .stour-tab-container.gift .guide-box {
  padding: 5px 0;
}
.main-stour-screen .stour-tab-container.gift .guide-box .item.title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 10px 0;
}
.main-stour-screen .stour-tab-container.gift .guide-box .item {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 4px 0;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box {
  padding: 10px 10px;
  background: var(--nie-cl-blue-10);
  box-shadow: 0px 0px 1px 1px rgba(120, 120, 120, 0.3607843137);
  border-radius: 8px;
  margin: 12px 0;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box.cv {
  background: var(--nie-cl-orange-10);
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  border-radius: 50%;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .logo-box img.logo {
  width: 40vw;
  height: -moz-max-content;
  height: max-content;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .info-box {
  text-align: center;
  padding: 10px 0;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .info-box .title {
  font-size: var(--font-4xl);
  font-weight: bold;
  padding: 12px 0;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .info-box .sub-title-1 {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 5px 0;
  opacity: 0.7;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .info-box .sub-title-2 {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 5px 0;
  opacity: 0.7;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .maploc-box {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  padding: 5px;
  flex-direction: column;
  border-radius: 50%;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .btn-box .btn {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 10px 20px;
  color: var(--nie-cl-leaf);
  border-radius: 15px;
  padding: 5px 12px;
  border: 1px solid var(--nie-cl-leaf);
  cursor: pointer;
}
.main-stour-screen .stour-tab-container.gift .discount-info-box .btn-box .btn:hover {
  background-color: var(--nie-cl-leaf);
  color: white;
}

.stour-stamptour-guide-panel {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 20px;
  height: 70px;
  z-index: 10;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--nie-cl-gray-10);
  border-radius: 15px;
  font-size: var(--font-2xl);
  font-weight: bold;
}
.stour-stamptour-guide-panel.open {
  display: flex;
}
.stour-stamptour-guide-panel .mark {
  width: 10px;
  height: 10px;
  background-color: var(--nie-cl-orange);
  border-radius: 50%;
}
.niemap_stp_panel {
  display: none;
}
.niemap_stp_panel.active {
  display: block;
}

.stour-stampnow-panel-module {
  position: absolute;
  width: 100%;
  top: 70px;
  max-height: calc(var(--vh, 1vh) * 100 - 70px);
  overflow-y: auto;
  z-index: 180;
  left: 0;
}
.stour-stampnow-panel-module .stampbook-container {
  height: -moz-max-content;
  height: max-content;
  overflow-y: auto;
  padding: 0px 20px;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box {
  display: none;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box.open {
  display: grid;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item {
  display: grid;
  grid-template-columns: 3fr 1fr 12px;
  gap: 6px;
  align-content: center;
  align-items: center;
  justify-items: flex-start;
  cursor: pointer;
  padding: 14px 6vw;
  background: var(--nie-bg-toppanel);
  border: 1px solid var(--nie-cl-leaf);
  border-width: 0 0 0 5px;
  border-radius: 3px 12px 12px 3px;
  box-shadow: 0 0 6px 1px var(--nie-shadow-toppanel);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item.today {
  background-color: var(--nie-cl-ivory);
  box-shadow: 2px 2px 0px 1px var(--nie-cl-ivory-120);
  border: 1px solid var(--nie-cl-ivory-120);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .stamp-icons {
  display: flex;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* justify-content: center; */
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box {
  position: relative;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .num {
  border-radius: 50%;
  position: absolute;
  top: -10px;
  right: -10px;
  border-radius: 9px;
  color: white;
  font-size: var(--font-md);
  padding: 3px 5px;
  font-weight: 600;
  z-index: 5;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .num.sd {
  background: var(--nie-cl-orange);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .num.br {
  background: var(--nie-cl-blue);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .icon {
  width: clamp(10px, 9vw, 36px);
  height: -moz-max-content;
  height: max-content;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .stamp-icons .icon-box .icon.yet {
  opacity: 0.6;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .step-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .step-box .step {
  font-size: var(--font-4xl);
  font-weight: bold;
  letter-spacing: -0.8px;
  padding: 2px 0;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .step-box .date {
  font-size: var(--font-xl);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.9px;
  opacity: 0.6;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-2xl);
  font-weight: bold;
  color: black;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item .arrow.up {
  transform: rotate(180deg);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.9, 0, 0.1, 1);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
@media screen and (min-width: 992px) {
  .stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container {
    width: -moz-max-content;
    width: max-content;
    margin: auto;
  }
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container.open {
  max-height: 1000px;
  transition: max-height 0.2s cubic-bezier(0.9, 0, 0.1, 1);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box {
  max-height: 270px;
  height: calc(50vw + 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  background-color: #fff9f6;
  border: 3px solid var(--nie-cl-orange);
  border-radius: 20px;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .road-title,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .road-title {
  z-index: 2;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-5xl);
  font-weight: bold;
  padding: 5px 0;
  color: var(--nie-cl-orange);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .finish-mark-box,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .finish-mark-box {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .finish-mark-box .finish-mark,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .finish-mark-box .finish-mark {
  width: 28vw;
  height: 28vw;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group {
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group .stamp-set,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group .stamp-set,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group .stamp-set .stamp,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group .stamp-set .stamp,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set .stamp,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set .stamp {
  width: 60px;
  height: -moz-max-content;
  height: max-content;
  box-shadow: 0px 0px 12px 1px var(--nie-cl-orange-40);
  border: 1px solid var(--nie-cl-orange-40);
  border-radius: 50px;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group .stamp-set .name,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group .stamp-set .name,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set .name,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set .name {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 1px 0;
  color: var(--nie-cl-orange);
  white-space: nowrap;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .back-road-box,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .back-road-box {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .back-road-box .back-road,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .back-road-box .back-road {
  border-radius: 100px;
  border: 6px solid var(--nie-cl-orange);
  width: 90%;
  height: 40%;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .btn-box,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .btn-box {
  position: absolute;
  z-index: 5;
  bottom: -15px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .btn-box .btn,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .btn-box .btn {
  font-weight: bold;
  color: white;
  padding: 8px 16px;
  width: 100%;
  font-size: var(--font-lg);
  cursor: pointer;
  /* height: 33px; */
  text-align: center;
  background-color: var(--cl-text-b-40);
  border-radius: 12px;
  cursor: pointer;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .btn-box .btn:hover,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .btn-box .btn:hover {
  transform: scale(1.05);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .btn-box .btn.yet,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .btn-box .btn.yet {
  background-color: white;
  color: var(--nie-cl-orange);
  border: 3px solid var(--nie-cl-orange);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container {
  /* ------------------------------ 
     # 2024 - 10ROAD , 5/5 개씩 포함 버전 
   --------------------------------*/
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group.col-1,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group.col-1,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group.col-1,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group.col-1 {
  grid-template-columns: 1fr;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group.col-2,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group.col-2,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group.col-2,
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group.col-2 {
  grid-template-columns: 1fr 1fr;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box {
  margin-bottom: 15px;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .upper-stamp-group {
  grid-template-columns: 1fr 1fr;
  padding: 10px 10vw;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .sd-stamp-box .lower-stamp-group {
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0px 4vw;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box {
  margin-bottom: 120px;
  background-color: #eef8fc;
  border: 3px solid var(--nie-cl-blue);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .road-title {
  color: var(--nie-cl-blue);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group {
  grid-template-columns: 1fr 1fr;
  padding: 10px 10vw;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set .stamp {
  box-shadow: 0px 0px 12px 1px var(--nie-cl-blue-40);
  border: 1px solid var(--nie-cl-blue-40);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .upper-stamp-group .stamp-set .name {
  color: var(--nie-cl-blue);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group {
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0px 4vw;
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set .stamp {
  box-shadow: 0px 0px 12px 1px var(--nie-cl-blue-40);
  border: 1px solid var(--nie-cl-blue-40);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .lower-stamp-group .stamp-set .name {
  color: var(--nie-cl-blue);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .back-road-box .back-road {
  border: 6px solid var(--nie-cl-blue);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .btn-box .btn {
  background-color: var(--nie-cl-blue);
}
.stour-stampnow-panel-module .stampbook-container .stamp-listType-box .list-item-expand-container .br-stamp-box .btn-box .btn.yet {
  background-color: white;
  color: var(--nie-cl-blue);
  border: 3px solid var(--nie-cl-blue);
}

.main-login-screen {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}
.main-login-screen .kakaologin {
  background-color: var(--nie-cl-snow);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 15px;
}

.main-feed-screen {
  width: 100%;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  position: relative;
  padding: var(--nie-main-padding-fullscroll);
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
}
@media screen and (min-width: 992px) {
  .main-feed-screen {
    padding: 0 30px;
  }
}
.main-feed-screen .sticky {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}
.main-feed-screen .feed-scroll-container {
  height: -moz-max-content;
  height: max-content;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
  margin: 0 -6vw;
}
@media screen and (min-width: 992px) {
  .main-feed-screen .feed-scroll-container {
    margin: 0;
  }
}
.main-feed-screen .feed-scroll-container .feed-cardType-box {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 3px;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box.open {
  display: grid;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box {
  display: flex;
  flex-direction: column;
  width: -moz-max-content;
  width: auto;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .card-info-box {
  display: none;
  align-items: center;
  gap: 10px;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .card-info-box .user-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .card-info-box .name-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .card-info-box .name-box .name {
  font-size: var(--font-md);
  font-weight: bold;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 30vw;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .card-info-box .name-box .clock {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .img-box {
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .img-box::-webkit-scrollbar {
  display: none;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .img-box .social-box {
  color: white;
  position: absolute;
  bottom: 10px;
  left: 10px;
  gap: 8px;
  display: flex;
  align-items: center;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .img-box .social-box .like {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 0;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .img-box .social-box .reply {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 0;
}
.main-feed-screen .feed-scroll-container .feed-cardType-box .card-box .img-box .img {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.main-feed-screen .feed-scroll-container .feed-listType-box {
  display: none;
  flex-direction: column;
  justify-items: center;
  gap: 25px 0;
  margin: 0 6vw;
}
.main-feed-screen .feed-scroll-container .feed-listType-box.open {
  display: flex;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: white;
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .list-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .list-info-box .user-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .list-info-box .user-icon-box .logo {
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .list-info-box .name-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: black;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .list-info-box .name-box .name {
  font-size: var(--font-md);
  font-weight: bold;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 30vw;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .list-info-box .name-box .clock {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .list-info-box .share-icon {
  margin-left: auto;
  color: black;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .img-box {
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .img-box::-webkit-scrollbar {
  display: none;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .img-box .img {
  width: 70vw;
  height: 70vw;
  max-width: 400px;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid #bbbbbb;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .content-box {
  color: black;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .content-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
  line-height: 1.5;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .content-box .content {
  font-size: var(--font-lg);
  font-weight: 500;
  opacity: 1;
  letter-spacing: -0.4px;
  line-height: 1.7;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .social-box {
  color: black;
  display: flex;
  gap: 11px;
  padding-top: 10px;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .social-box .like {
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: var(--nie-cl-orange-10);
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .social-box .like::before {
  content: "";
  display: inline-block;
  width: var(--font-2xl);
  height: var(--font-2xl);
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_outline.svg") no-repeat center center;
  background-size: cover;
  margin-right: 10px;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .social-box .like.liked::before {
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_fill.svg") no-repeat center center;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .social-box .view {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 0;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .social-box .share-icon {
  width: 20px;
  height: 20px;
  margin-left: auto;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  cursor: pointer;
  margin: 0 2px;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .reply-box {
  background: var(--nie-cl-white-10);
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .reply-box .title-box .title {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .reply-box .title-box .val {
  font-size: var(--font-xl);
  font-weight: 500;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .reply-box .input-box {
  display: flex;
  align-items: center;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .reply-box .input-box .avatar {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-feed-screen .feed-scroll-container .feed-listType-box .list-box .reply-box .input-box .avatar input.reply {
  width: 100%;
  height: 40px;
  border: 1px solid var(--cl-text-b-120);
  padding: 0 10px;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  border-radius: 10px;
  margin-left: 10px;
}
@media screen and (min-width: 992px) {
  .main-feed-screen .feed-scroll-container .feed-listType-box {
    margin: 0;
  }
}

.main-feed-detail-screen {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  position: relative;
  padding: var(--nie-main-padding);
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - 50px);
  overflow-y: auto;
}
.main-feed-detail-screen .feed-listType-box {
  display: none;
  flex-direction: column;
  justify-items: center;
  gap: 25px 0;
}
.main-feed-detail-screen .feed-listType-box.open {
  display: flex;
}
.main-feed-detail-screen .feed-listType-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: white;
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
}
.main-feed-detail-screen .feed-listType-box .list-box .list-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-feed-detail-screen .feed-listType-box .list-box .list-info-box .user-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-feed-detail-screen .feed-listType-box .list-box .list-info-box .user-icon-box .logo {
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-feed-detail-screen .feed-listType-box .list-box .list-info-box .name-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: black;
}
.main-feed-detail-screen .feed-listType-box .list-box .list-info-box .name-box .name {
  font-size: var(--font-md);
  font-weight: bold;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 30vw;
}
.main-feed-detail-screen .feed-listType-box .list-box .list-info-box .name-box .clock {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-feed-detail-screen .feed-listType-box .list-box .list-info-box .share-icon {
  margin-left: auto;
  color: black;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.main-feed-detail-screen .feed-listType-box .list-box .img-box {
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
}
.main-feed-detail-screen .feed-listType-box .list-box .img-box::-webkit-scrollbar {
  display: none;
}
.main-feed-detail-screen .feed-listType-box .list-box .img-box .img {
  width: 70vw;
  height: 70vw;
  max-width: 400px;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid #bbbbbb;
}
.main-feed-detail-screen .feed-listType-box .list-box .content-box {
  color: black;
}
.main-feed-detail-screen .feed-listType-box .list-box .content-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
  line-height: 1.5;
}
.main-feed-detail-screen .feed-listType-box .list-box .content-box .content {
  font-size: var(--font-lg);
  font-weight: 500;
  opacity: 1;
  letter-spacing: -0.4px;
  line-height: 1.7;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
.main-feed-detail-screen .feed-listType-box .list-box .social-box {
  color: black;
  display: flex;
  gap: 11px;
  padding-top: 10px;
}
.main-feed-detail-screen .feed-listType-box .list-box .social-box .like {
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: var(--nie-cl-orange-10);
}
.main-feed-detail-screen .feed-listType-box .list-box .social-box .like::before {
  content: "";
  display: inline-block;
  width: var(--font-2xl);
  height: var(--font-2xl);
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_outline.svg") no-repeat center center;
  background-size: cover;
  margin-right: 10px;
}
.main-feed-detail-screen .feed-listType-box .list-box .social-box .like.liked::before {
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_fill.svg") no-repeat center center;
}
.main-feed-detail-screen .feed-listType-box .list-box .social-box .view {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 0;
}
.main-feed-detail-screen .feed-listType-box .list-box .social-box .share-icon {
  width: 20px;
  height: 20px;
  margin-left: auto;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  cursor: pointer;
  margin: 0 2px;
}
.main-feed-detail-screen .feed-listType-box .list-box .reply-box {
  background: var(--nie-cl-white-10);
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
}
.main-feed-detail-screen .feed-listType-box .list-box .reply-box .title-box .title {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
}
.main-feed-detail-screen .feed-listType-box .list-box .reply-box .title-box .val {
  font-size: var(--font-xl);
  font-weight: 500;
}
.main-feed-detail-screen .feed-listType-box .list-box .reply-box .input-box {
  display: flex;
  align-items: center;
}
.main-feed-detail-screen .feed-listType-box .list-box .reply-box .input-box .avatar {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-feed-detail-screen .feed-listType-box .list-box .reply-box .input-box .avatar input.reply {
  width: 100%;
  height: 40px;
  border: 1px solid var(--cl-text-b-120);
  padding: 0 10px;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  border-radius: 10px;
  margin-left: 10px;
}
.main-notice-screen {
  position: relative;
  padding: var(--nie-main-padding);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  height: calc(var(--vh, 1vh) * 100 - 50px);
  overflow-y: auto;
}
.main-notice-screen::after {
  content: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_outline.svg") url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_fill.svg");
  display: none;
}
.main-notice-screen .notice-link-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 80px;
  margin-bottom: 25px;
}
.main-notice-screen .notice-link-banner img.content {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  /* width: 100%; */
  height: 80px;
  background-size: cover;
  background-color: #004f2d;
  border-radius: 10px;
  cursor: pointer;
}
.main-notice-screen .notice-tab-box {
  position: sticky;
  top: 0;
  background: white;
  padding: 20px 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.main-notice-screen .notice-tab-box .title-box {
  font-size: var(--font-3xl);
  font-weight: bold;
}
.main-notice-screen .notice-tab-box .view-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-notice-screen .notice-tab-box .view-box .tabstyle-type-a {
  border-radius: 4px;
  font-weight: 500;
  color: var(--cl-text-b-200);
  font-size: var(--font-2xl);
}
.main-notice-screen .notice-tab-box .view-box .tabstyle-type-a.white {
  color: white;
  border: 1px solid white;
}
.main-notice-screen .notice-tab-box .view-box .tabstyle-type-a.active {
  color: var(--nie-cl-orange);
}
.main-notice-screen .sticky {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}
.main-notice-screen .notice-scroll-container {
  height: -moz-max-content;
  height: max-content;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
}
.main-notice-screen .notice-scroll-container .notice-listType-box {
  display: none;
  flex-direction: column;
  justify-items: center;
  gap: 25px 0;
}
.main-notice-screen .notice-scroll-container .notice-listType-box.open {
  display: flex;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: white;
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .list-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .list-info-box .user-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .list-info-box .user-icon-box .logo {
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .list-info-box .name-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: black;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .list-info-box .name-box .name {
  font-size: var(--font-md);
  font-weight: bold;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 30vw;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .list-info-box .name-box .clock {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .list-info-box .share-icon {
  margin-left: auto;
  color: black;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .img-box {
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .img-box::-webkit-scrollbar {
  display: none;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .img-box .img {
  width: 70vw;
  height: 70vw;
  max-width: 400px;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid #bbbbbb;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .content-box {
  color: black;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .content-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
  line-height: 1.5;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .content-box .content {
  font-size: var(--font-lg);
  font-weight: 500;
  opacity: 1;
  letter-spacing: -0.4px;
  line-height: 1.7;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .social-box {
  color: black;
  display: flex;
  gap: 11px;
  padding-top: 10px;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .social-box .like {
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: var(--nie-cl-orange-10);
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .social-box .like::before {
  content: "";
  display: inline-block;
  width: var(--font-2xl);
  height: var(--font-2xl);
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_outline.svg") no-repeat center center;
  background-size: cover;
  margin-right: 10px;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .social-box .like.liked::before {
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_fill.svg") no-repeat center center;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .social-box .view {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 0;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .social-box .share-icon {
  width: 20px;
  height: 20px;
  margin-left: auto;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  cursor: pointer;
  margin: 0 2px;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .reply-box {
  background: var(--nie-cl-white-10);
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .reply-box .title-box .title {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .reply-box .title-box .val {
  font-size: var(--font-xl);
  font-weight: 500;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .reply-box .input-box {
  display: flex;
  align-items: center;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .reply-box .input-box .avatar {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-notice-screen .notice-scroll-container .notice-listType-box .list-box .reply-box .input-box .avatar input.reply {
  width: 100%;
  height: 40px;
  border: 1px solid var(--cl-text-b-120);
  padding: 0 10px;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  border-radius: 10px;
  margin-left: 10px;
}

.main-notice-detail-screen {
  position: relative;
  padding: var(--nie-main-padding);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  overflow-y: auto;
}
.main-notice-detail-screen .notice-listType-box {
  display: none;
  flex-direction: column;
  justify-items: center;
  gap: 25px 0;
}
.main-notice-detail-screen .notice-listType-box.open {
  display: flex;
}
.main-notice-detail-screen .notice-listType-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: white;
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
}
.main-notice-detail-screen .notice-listType-box .list-box .list-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-notice-detail-screen .notice-listType-box .list-box .list-info-box .user-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-notice-detail-screen .notice-listType-box .list-box .list-info-box .user-icon-box .logo {
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-notice-detail-screen .notice-listType-box .list-box .list-info-box .name-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: black;
}
.main-notice-detail-screen .notice-listType-box .list-box .list-info-box .name-box .name {
  font-size: var(--font-md);
  font-weight: bold;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 30vw;
}
.main-notice-detail-screen .notice-listType-box .list-box .list-info-box .name-box .clock {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-notice-detail-screen .notice-listType-box .list-box .list-info-box .share-icon {
  margin-left: auto;
  color: black;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.main-notice-detail-screen .notice-listType-box .list-box .img-box {
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
}
.main-notice-detail-screen .notice-listType-box .list-box .img-box::-webkit-scrollbar {
  display: none;
}
.main-notice-detail-screen .notice-listType-box .list-box .img-box .img {
  width: 70vw;
  height: 70vw;
  max-width: 400px;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid #bbbbbb;
}
.main-notice-detail-screen .notice-listType-box .list-box .content-box {
  color: black;
}
.main-notice-detail-screen .notice-listType-box .list-box .content-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
  line-height: 1.5;
}
.main-notice-detail-screen .notice-listType-box .list-box .content-box .content {
  font-size: var(--font-lg);
  font-weight: 500;
  opacity: 1;
  letter-spacing: -0.4px;
  line-height: 1.7;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
.main-notice-detail-screen .notice-listType-box .list-box .social-box {
  color: black;
  display: flex;
  gap: 11px;
  padding-top: 10px;
}
.main-notice-detail-screen .notice-listType-box .list-box .social-box .like {
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: var(--nie-cl-orange-10);
}
.main-notice-detail-screen .notice-listType-box .list-box .social-box .like::before {
  content: "";
  display: inline-block;
  width: var(--font-2xl);
  height: var(--font-2xl);
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_outline.svg") no-repeat center center;
  background-size: cover;
  margin-right: 10px;
}
.main-notice-detail-screen .notice-listType-box .list-box .social-box .like.liked::before {
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_fill.svg") no-repeat center center;
}
.main-notice-detail-screen .notice-listType-box .list-box .social-box .view {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 0;
}
.main-notice-detail-screen .notice-listType-box .list-box .social-box .share-icon {
  width: 20px;
  height: 20px;
  margin-left: auto;
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  cursor: pointer;
  margin: 0 2px;
}
.main-notice-detail-screen .notice-listType-box .list-box .reply-box {
  background: var(--nie-cl-white-10);
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
}
.main-notice-detail-screen .notice-listType-box .list-box .reply-box .title-box .title {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
}
.main-notice-detail-screen .notice-listType-box .list-box .reply-box .title-box .val {
  font-size: var(--font-xl);
  font-weight: 500;
}
.main-notice-detail-screen .notice-listType-box .list-box .reply-box .input-box {
  display: flex;
  align-items: center;
}
.main-notice-detail-screen .notice-listType-box .list-box .reply-box .input-box .avatar {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-notice-detail-screen .notice-listType-box .list-box .reply-box .input-box .avatar input.reply {
  width: 100%;
  height: 40px;
  border: 1px solid var(--cl-text-b-120);
  padding: 0 10px;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  border-radius: 10px;
  margin-left: 10px;
}
.detail-page-topbar {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  padding: 0 4vw;
  align-items: center;
  border-bottom: 1px solid gainsboro;
}
.detail-page-topbar .back-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.detail-page-topbar .back-arrow:before, .detail-page-topbar .back-arrow:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.detail-page-topbar .back-arrow:before {
  transform: rotate(45deg);
}
.detail-page-topbar .back-arrow:after {
  transform: rotate(-45deg);
}
.detail-page-topbar .title-box {
  font-size: var(--font-xl);
  letter-spacing: var(--nie-letter-spacing-3);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.main-kakaolog-pop-container {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: white;
  width: 100%;
  height: 100%;
}
.main-kakaolog-pop-container .close-top {
  height: 56px;
  background: rgb(255, 255, 255);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0px 14px;
}
.main-kakaolog-pop-container .logo-box {
  padding: 50px 6vw 6vw 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main-kakaolog-pop-container .logo-box .logo {
  width: -moz-max-content;
  width: max-content;
  height: 70px;
}
.main-kakaolog-pop-container .logo-box p {
  font-weight: 700;
  font-size: var(--font-3xl);
  line-height: 1.5;
  text-align: center;
  color: #0a0a0a;
  margin: 10px 0 40px 0;
}
.main-kakaolog-pop-container .btn-box-kakaologin {
  padding: 0 30px;
}
.main-kakaolog-pop-container .btn-box-kakaologin .kakao-btn {
  cursor: pointer;
  width: 100%;
  padding: 14px 0;
  background: #fee500;
  border: 1px solid rgba(10, 10, 10, 0.1019607843);
  border-radius: 8px;
  font-weight: 700;
  font-size: calc(var(--font-xl));
  line-height: 160%;
  text-align: center;
  color: #0a0a0a;
  display: flex;
  justify-content: center;
}
.main-kakaolog-pop-container .btn-box-kakaologin .kakao-btn .icon {
  width: 28px;
  height: -moz-max-content;
  height: max-content;
}

.main-kakaologin-screen {
  padding: var(--nie-main-padding);
  background: var(--nie-page-bg-vaguegray);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.main-kakaologin-screen .divider-20 {
  height: 20px;
  border-bottom: 1px solid #d2d2d2;
  width: 100%;
}
.main-kakaologin-screen .kakao-box {
  padding-top: 20px;
}
.main-kakaologin-screen .kakao-box .guide-text {
  letter-spacing: var(--nie-letter-spacing-3);
  color: var(--cl-text-b-40);
  font-size: var(--font-xl);
  line-height: 1.8;
}
.main-kakaologin-screen .kakao-box .btn-box {
  padding: 10px 0;
}
.main-kakaologin-screen .kakao-box .btn-box .btn {
  width: 100%;
}
.main-kakaologin-screen .kakao-box .btn-box .btn:hover {
  transform: translateY(3px);
}
.main-kakaologin-screen .sign-in-box {
  position: relative;
  padding: 10px 0;
  width: 100%;
}
.main-kakaologin-screen .sign-in-box .item-group label {
  display: block;
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
}
.main-kakaologin-screen .sign-in-box .item-group input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: var(--font-md);
  font-weight: 500;
  border: 1px solid var(--cl-text-b-120);
  border-radius: 5px;
}
.main-kakaologin-screen .sign-in-box .btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}
.main-kakaologin-screen .sign-in-box .btn-group .btn {
  border-radius: 6px;
  width: 100%;
  height: 45px;
  font-size: var(--font-xl);
  font-weight: 500;
  color: black;
  background-color: #ececec;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}
.main-kakaologin-screen .sign-in-box .btn-group .btn:hover {
  transform: translateY(3px);
}
.main-kakaologin-screen .sign-in-box .help-box {
  display: flex;
  justify-content: space-around;
  padding: 30px 0;
}
.main-kakaologin-screen .sign-in-box .help-box p {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-40);
  letter-spacing: -0.4px;
  padding: 0 40px;
  white-space: nowrap;
  cursor: pointer;
}
.main-kakaologin-screen .sign-in-box .help-box p:nth-child(2) {
  border: 1px solid rgb(153, 153, 153);
  border-width: 0 1px 0 1px;
}
.main-kakaologin-screen .sign-in-box .info-box {
  padding: 10px 0;
}
.main-kakaologin-screen .sign-in-box .info-box .info {
  padding: 5px 0;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-40);
  letter-spacing: -0.4px;
}

.main-nieplace-signup-container {
  padding: var(--nie-main-padding);
  background: var(--nie-page-bg-vaguegray);
}
.main-nieplace-signup-container .sign-up-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 30px;
}
.main-nieplace-signup-container .sign-up-box .item-group label {
  display: block;
  font-size: var(--font-md);
  font-weight: 500;
  padding: 10px 0;
}
.main-nieplace-signup-container .sign-up-box .item-group input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: var(--font-md);
  font-weight: 500;
  border: 1px solid var(--cl-text-b-120);
  border-radius: 5px;
}
.pop-all-aggreement-box {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: white;
  width: 100%;
  height: 100%;
  z-index: 100;
  padding: 30px;
}
.visit-loc-info-panel {
  display: none;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1411764706);
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}
.visit-loc-info-panel.active {
  display: flex;
}
.visit-loc-info-panel .inner-box {
  display: none;
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.visit-loc-info-panel .inner-box.active {
  display: flex;
}
.visit-loc-info-panel .inner-box .icon {
  width: 80px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  margin: 0 auto;
}
.visit-loc-info-panel .inner-box .loc {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 10px 0;
}
.visit-loc-info-panel .inner-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 20px 0 30px 0;
  line-height: 1.6;
}
.visit-loc-info-panel .inner-box button.btn {
  margin: 10px 0;
  width: 100%;
  height: 50px;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--nie-cl-orange);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.visit-loc-info-panel .inner-box button.btn.fill {
  background: var(--nie-cl-orange);
  color: white;
  font-weight: 600;
  border: 1px solid var(--nie-cl-orange);
}

.help_pop_sitecheckin {
  display: none;
  position: fixed;
  z-index: 200;
  width: 100%;
  bottom: 0;
  padding: 30px 30px;
  background: white;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.1019607843);
}
.help_pop_sitecheckin.active {
  display: flex;
}
.help_pop_sitecheckin .inner {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.help_pop_sitecheckin .inner .icon {
  width: 80px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  margin: 0 auto;
}
.help_pop_sitecheckin .inner .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 20px 0;
}
.help_pop_sitecheckin .inner button.btn {
  width: 100%;
  height: 50px;
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--nie-cl-orange);
  background: white;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.help_pop_sitecheckin .inner button.btn.checkin {
  background-color: var(--nie-cl-orange);
  color: white;
}

.tour-helpcenter-panel-toggleType {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.9, 0, 0.1, 1);
  position: fixed;
  z-index: 135;
  width: 100%;
  bottom: 0;
  background: white;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.1019607843);
}
.tour-helpcenter-panel-toggleType.active {
  display: flex;
  flex-direction: column;
  max-height: 1000px;
  transition: max-height 0.5s ease-in-out;
}
.tour-helpcenter-panel-toggleType .inner {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px 0;
}
.tour-helpcenter-panel-toggleType .inner .icon {
  width: 40px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
  margin: 0 auto;
}
.tour-helpcenter-panel-toggleType .inner .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 20px 0;
}
.tour-helpcenter-panel-toggleType .inner .info {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 20px 0;
}
.tour-helpcenter-panel-toggleType .inner button.btn {
  width: 100%;
  height: 50px;
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--nie-cl-orange);
  background: white;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.tour-helpcenter-panel-toggleType .inner button.btn.checkin {
  background-color: var(--nie-cl-orange);
  color: white;
}

.tour-helpcenter-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  z-index: 300;
}
.tour-helpcenter-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.tour-helpcenter-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.tour-helpcenter-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.tour-helpcenter-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.tour-helpcenter-panel .drag-head .close-css:before, .tour-helpcenter-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.tour-helpcenter-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.tour-helpcenter-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.tour-helpcenter-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tour-helpcenter-panel .inner::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .tour-helpcenter-panel {
    width: 400px;
    max-height: 66vh;
    margin: auto;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
  }
}
.tour-helpcenter-panel .inner {
  max-height: calc(var(--vh, 1vh) * 60 - 70px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  justify-content: flex-start;
  padding-bottom: 20px;
  letter-spacing: var(--nie-letter-spacing-5);
}
.tour-helpcenter-panel .inner .mascot-box {
  display: flex;
  gap: 15px;
  align-items: center;
}
.tour-helpcenter-panel .inner .mascot-box .mascot {
  width: 85px;
  height: -moz-max-content;
  height: max-content;
  padding: 10px 0;
}
.tour-helpcenter-panel .inner .mascot-box span.hello {
  color: var(--cl-text-b-40);
  display: inline-block;
  font-size: var(--font-2xl);
  padding: 20px 0;
  line-height: 1.6;
  white-space: nowrap;
}
.tour-helpcenter-panel .inner .mascot-box span.hello .strong {
  color: var(--nie-cl-leaf);
  font-weight: 800;
}
.tour-helpcenter-panel .inner .general-status-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  align-items: center;
}
.tour-helpcenter-panel .inner .general-status-box .item {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 2px 0;
}
.tour-helpcenter-panel .inner .control-list-box {
  background: var(--cl-text-b-245);
  padding: 10px 20px;
  border-radius: 12px;
  margin: 8px 0;
}
.tour-helpcenter-panel .inner .control-list-box .control-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
}
.tour-helpcenter-panel .inner .control-list-box .control-item .title {
  font-size: var(--font-xl);
  font-weight: 700;
}
.tour-helpcenter-panel .inner .control-list-box .control-item h2.name {
  font-size: var(--font-xl);
  font-weight: 700;
  padding: 2px 0;
}
.tour-helpcenter-panel .inner .control-list-box .control-item .state {
  font-size: var(--font-xl);
  font-weight: 700;
  padding: 2px 0;
  color: var(--cl-text-b-120);
}
.tour-helpcenter-panel .inner .control-list-box .control-item .state.active {
  color: var(--nie-cl-orange);
}
.tour-helpcenter-panel .inner .control-list-box .control-item button.toggle-btn,
.tour-helpcenter-panel .inner .control-list-box .control-item button.show_curStaticPos,
.tour-helpcenter-panel .inner .control-list-box .control-item button.share_myPos {
  padding: 7px 12px;
  margin-left: auto;
  font-size: var(--font-xl);
  font-weight: 600;
  color: white;
  background: var(--nie-cl-orange);
  border: none;
  cursor: pointer;
  display: flex;
  gap: 1px;
  align-items: center;
  border-radius: 6px;
}
.tour-helpcenter-panel .inner .control-list-box .info-text {
  font-size: var(--font-lg);
  font-weight: 500;
  line-height: 1.5;
}
.tour-helpcenter-panel .inner .info-text {
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 10px 0 0 0;
  line-height: 1.6;
}

.stamp-tourlist-nearby {
  pointer-events: none;
}
.stamp-tourlist-nearby .item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  justify-content: space-between;
}
.stamp-tourlist-nearby .item .name {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 2px 0;
}
.stamp-tourlist-nearby .item .distance {
  font-size: var(--font-2xl);
  font-weight: 700;
  padding: 2px 0;
  color: var(--nie-cl-orange);
}

.stour-stamptour-reward-screen {
  display: none;
  width: 100%;
  padding: var(--nie-main-padding);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  overflow-y: scroll;
  overflow-x: hidden;
  flex-direction: column;
  gap: 10px;
}
.stour-stamptour-reward-screen.open {
  display: flex;
}
.stour-stamptour-reward-screen .section-title {
  font-size: var(--font-4xl);
  font-weight: bold;
  padding: 20px 0 10px 0;
}
.stour-stamptour-reward-screen .intro-box {
  padding: 20px 10px;
  background-color: var(--nie-cl-orange-10);
  border-radius: 8px;
}
.stour-stamptour-reward-screen .intro-box .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 10px 0;
}
.stour-stamptour-reward-screen .intro-box .title.sub {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 0;
}
.stour-stamptour-reward-screen .present-now-box {
  padding: 10px 10px;
  border-bottom: 1px solid var(--cl-text-b-200);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stour-stamptour-reward-screen .present-now-box .item-box {
  text-align: center;
}
.stour-stamptour-reward-screen .present-now-box .item-box .item {
  padding: 2px 0 8px 0;
  font-size: var(--font-xl);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: var(--nie-letter-spacing-3);
}
.stour-stamptour-reward-screen .present-now-box .item-box .val {
  padding: 2px 0;
  font-size: var(--font-8xl);
  font-weight: 800;
  opacity: 0.7;
  color: var(--nie-cl-orange);
}
.stour-stamptour-reward-screen .guide-box .item.title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 10px 0;
}
.stour-stamptour-reward-screen .guide-box .item {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 2px 0;
}
.stour-stamptour-reward-screen .discount-info-box {
  padding: 10px 10px;
  background: var(--nie-cl-blue-10);
  box-shadow: 0px 0px 1px 1px rgba(120, 120, 120, 0.3607843137);
  border-radius: 8px;
  margin: 12px 0;
}
.stour-stamptour-reward-screen .discount-info-box.cv {
  background: var(--nie-cl-orange-10);
}
.stour-stamptour-reward-screen .discount-info-box .logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  border-radius: 50%;
}
.stour-stamptour-reward-screen .discount-info-box .logo-box img.logo {
  width: 40vw;
  height: -moz-max-content;
  height: max-content;
}
.stour-stamptour-reward-screen .discount-info-box .info-box {
  text-align: center;
  padding: 10px 0;
}
.stour-stamptour-reward-screen .discount-info-box .info-box .title {
  font-size: var(--font-4xl);
  font-weight: bold;
  padding: 12px 0;
}
.stour-stamptour-reward-screen .discount-info-box .info-box .sub-title-1 {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 5px 0;
  opacity: 0.7;
}
.stour-stamptour-reward-screen .discount-info-box .info-box .sub-title-2 {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 5px 0;
  opacity: 0.7;
}
.stour-stamptour-reward-screen .discount-info-box .maploc-box {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  padding: 5px;
  flex-direction: column;
  border-radius: 50%;
}
.stour-stamptour-reward-screen .discount-info-box .btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
.stour-stamptour-reward-screen .discount-info-box .btn-box .btn {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 10px 20px;
  color: var(--nie-cl-leaf);
  border-radius: 15px;
  padding: 5px 12px;
  border: 1px solid var(--nie-cl-leaf);
  cursor: pointer;
}
.stour-stamptour-reward-screen .discount-info-box .btn-box .btn:hover {
  background-color: var(--nie-cl-leaf);
  color: white;
}

.stour-stamptour-reward-panel {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 20px;
  height: 70px;
  z-index: 10;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--nie-cl-gray-10);
  border-radius: 15px;
  font-weight: bold;
}
.stour-stamptour-reward-panel.open {
  display: flex;
}
.stour-stamptour-reward-panel .guide-box {
  padding: 10px;
}
.stour-stamptour-reward-panel .guide-box .title {
  font-size: var(--font-2xl);
}
.stour-stamptour-reward-panel .guide-box .msg-1 {
  font-size: var(--font-xl);
}
.stour-stamptour-reward-panel .discount-info-box .logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.stour-stamptour-reward-panel .discount-info-box .logo-box img.logo {
  width: clamp(10px, 10vw, 200px);
  height: -moz-max-content;
  height: max-content;
}
.stour-stamptour-reward-panel .discount-info-box .info-box .title {
  font-size: var(--font-2xl);
  font-weight: bold;
  padding: 10px 0;
}
.stour-stamptour-reward-panel .discount-info-box .info-box .sub-title-1 {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 0;
}
.stour-stamptour-reward-panel .discount-info-box .info-box .sub-title-2 {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 0;
}
.stour-stamptour-reward-panel .btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stour-stamptour-reward-panel .btn-box .btn {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 10px 20px;
  color: var(--nie-cl-leaf);
  border-radius: 15px;
  padding: 5px 12px;
  border: 1px solid var(--nie-cl-leaf);
  cursor: pointer;
}
.stour-stamptour-reward-panel .btn-box .btn:hover {
  background-color: var(--nie-cl-leaf);
  color: white;
}

.main-reward-store-screen {
  padding: var(--nie-main-padding);
  background: var(--nie-cl-blue-10);
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
}
.main-reward-store-screen.dark {
  background: black;
  color: white;
}
.main-reward-store-screen .header {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  background-color: var(--nie-cl-orange);
  color: white;
  height: 50px;
  padding: 0 30px;
}
.main-reward-store-screen .header .title {
  font-size: var(--font-3xl);
  font-weight: bold;
}
.main-reward-store-screen .header .title .help {
  font-size: var(--font-xl);
  cursor: pointer;
  padding: 0 2px;
}
.main-reward-store-screen .header .date {
  font-size: var(--font-xl);
}
.main-reward-store-screen .header.dark {
  background-color: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.231372549);
  color: white;
}
.main-reward-store-screen .storeinfo-box {
  padding: 20px 20px;
  text-align: center;
  box-shadow: 0px 0px 12px 1px rgba(120, 120, 120, 0.144);
  margin: 30px 0;
  background-color: white;
  border-radius: 8px;
}
.main-reward-store-screen .storeinfo-box.dark {
  padding: 20px 20px;
  text-align: center;
  border-radius: 12px;
  /* box-shadow: 0px 0px 1px 1px rgb(255 255 255 / 16%); */
  margin: 20px 0;
  background-color: #2392ff;
  color: black;
}
.main-reward-store-screen .storeinfo-box .banner-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.main-reward-store-screen .storeinfo-box .banner-box .logo {
  padding: 10px 0;
  width: 130px;
  height: -moz-max-content;
  height: max-content;
}
.main-reward-store-screen .storeinfo-box .banner-box .name {
  padding: 5px 0;
  font-size: var(--font-6xl);
  font-weight: bold;
  padding: 10px 0;
}
.main-reward-store-screen .storeinfo-box .reward {
  padding: 5px 0;
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 0;
}
.main-reward-store-screen .reward-datalist-refresh {
  margin: 10px 0;
  margin-left: auto;
}
.main-reward-store-screen .reward-search-box {
  background: white;
  z-index: 5;
  position: sticky;
  top: 0;
  padding: 10px 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 3fr 1fr;
}
.main-reward-store-screen .reward-search-box.dark {
  background: black;
}
.main-reward-store-screen .reward-search-box input.reward-search-input {
  width: 100%;
  padding: 0 10px;
  font-size: var(--font-xl);
  font-weight: 500;
  border: 1px solid var(--cl-text-b-120);
  border-radius: 6px;
}
.main-reward-store-screen .reward-search-box input.reward-search-input.dark {
  background: var(--nie-cl-white-10);
  color: white;
  border: 1px solid var(--nie-cl-white-40);
}
.main-reward-store-screen .reward-search-box input.reward-search-input.dark::-moz-placeholder {
  color: var(--nie-cl-white-40);
}
.main-reward-store-screen .reward-search-box input.reward-search-input.dark::placeholder {
  color: var(--nie-cl-white-40);
}
.main-reward-store-screen .reward-search-box input.reward-search-input::-moz-placeholder {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-reward-store-screen .reward-search-box input.reward-search-input::placeholder {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-reward-store-screen .reward-search-box .reward-search-btn {
  width: 100%;
  height: 40px;
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--nie-cl-orange);
  background: white;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.main-reward-store-screen .reward-datalist-box {
  z-index: 1;
  position: relative;
  padding: 20px 15px;
  margin: 20px 0;
  border-radius: 8px;
}
.main-reward-store-screen .reward-datalist-box.dark {
  background: var(--nie-cl-white-10);
  color: white;
}
.main-reward-store-screen .reward-datalist-box .rw-list {
  display: grid;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px dashed var(--nie-cl-white-40);
  font-size: var(--font-xl);
  gap: 20px;
  align-items: center;
  justify-items: flex-start;
}
.main-reward-store-screen .reward-datalist-box .rw-list .idkey {
  font-size: var(--font-3xl);
  font-weight: 700;
  white-space: nowrap;
}
.main-reward-store-screen .reward-datalist-box .rw-list .toggle-btn {
  font-size: var(--font-sm);
  color: white;
  font-weight: 400;
  padding: 2px;
}
.main-reward-store-screen .reward-datalist-box .rw-list .toggle-btn::after {
  content: "▼";
  font-size: var(--font-xl);
  font-weight: 700;
  white-space: nowrap;
  color: var(--cl-text-b-120);
  cursor: pointer;
}
.main-reward-store-screen .reward-datalist-box .rw-list .toggle-btn.active::after {
  content: "▲";
}
.main-reward-store-screen .reward-datalist-box .rw-list .item {
  font-size: var(--font-xl);
  opacity: 0.3;
  font-weight: normal;
  font-size: var(--font-md);
}
.main-reward-store-screen .reward-datalist-box .rw-list .item.on {
  opacity: 1;
  font-weight: bold;
}
.main-reward-store-screen .reward-datalist-box .rw-list .item span.num {
  color: var(--nie-cl-orange);
}
.main-reward-store-screen .reward-datalist-box .rw-list .got-list {
  display: none;
  width: 100%;
  gap: 10px;
  padding: 2px 0;
  font-size: var(--font-md);
  color: var(--cl-text-b-120);
}
.main-reward-store-screen .reward-datalist-box .rw-list .got-list .item-exist {
  color: var(--nie-cl-orange);
  font-weight: bold;
}
.main-reward-store-screen .reward-datalist-box .rw-list .got-list.active {
  display: flex;
  flex-direction: column;
}
.main-reward-store-screen .passward {
  padding: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  border-radius: 8px;
}
@media screen and (min-width: 992px) {
  .main-reward-store-screen .passward {
    width: 30%;
    margin: auto;
  }
}
.main-reward-store-screen .passward .admin-login {
  width: 100%;
}
.main-reward-store-screen .passward.dark {
  background: var(--nie-cl-white-10);
  color: white;
}
.main-reward-store-screen .passward label {
  display: block;
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 10px 0;
}
.main-reward-store-screen .passward input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: var(--font-2xl);
  font-weight: 500;
  border: 1px solid var(--cl-text-b-120);
  border-radius: 6px;
}

.reward-guide-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
}
.reward-guide-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.reward-guide-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.reward-guide-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.reward-guide-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.reward-guide-panel .drag-head .close-css:before, .reward-guide-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.reward-guide-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.reward-guide-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.reward-guide-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.reward-guide-panel .inner::-webkit-scrollbar {
  display: none;
}
.reward-guide-panel .inner {
  max-height: 60vh;
  overflow-y: auto;
}
.reward-guide-panel .inner .content {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  white-space: pre-line;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-5);
}

.help_jspop_box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  padding: 10px;
}
.help_jspop_box .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-radius: 8px;
  padding: 15px;
  position: relative;
}
.help_jspop_box .inner .close {
  position: absolute;
  top: -15px;
  right: -15px;
  padding: 10px;
  cursor: pointer;
  background: var(--nie-btm-menu-text);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.help_jspop_box .inner .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  padding: 10px 0;
}
.post-page-container {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 100;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #ffffff;
}
.post-page-container.open {
  display: block;
}
.post-page-container .post-grid {
  display: grid;
  grid-template: "back" 60px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -1px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.post-page-container .post-grid > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.post-page-container .post-grid > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 30;
}
.post-page-container .post-grid > .g-head {
  grid-area: back;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3vw;
  font-weight: 500;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.post-page-container .post-grid > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 25px;
  font-size: var(--font-2xl);
  z-index: 5;
}
.post-page-container .post-grid > .g-body {
  grid-area: body;
  overflow: auto;
}
.post-page-container .post-grid > .g-body .g-body-tab {
  display: flex;
  align-items: center;
}
.post-page-container .post-grid > .g-all {
  display: grid;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.post-page-container .post-grid > .g-btn {
  grid-area: btn;
}
.post-page-container .post-grid > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}
.post-page-container .section-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
}
.post-page-container .pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3vw 0;
  overflow-x: scroll;
  scrollbar-width: none;
}
.post-page-container .pics-uploadBox::-webkit-scrollbar {
  display: none;
}
.post-page-container .pics-uploadBox .upload-plus {
  position: relative;
  width: 85px;
  margin-right: 10px;
  border: 1px solid gainsboro;
  border-radius: 10px;
  cursor: pointer;
}
.post-page-container .pics-uploadBox .upload-div {
  position: relative;
  width: 85px;
  margin-right: 10px;
  border-radius: 10px;
}
.post-page-container .pics-uploadBox .upload-div .upload-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--CSV-Color);
}
.post-page-container .pics-uploadBox .upload-div .upload-on {
  border-radius: 10px;
  width: 85px;
}
.post-page-container .label {
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 12px 2px;
  width: 100%;
}
.post-page-container .inputnone {
  display: inline-block;
  font-size: calc(2vw + 8px);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}
.post-page-container .imgNum_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.post-page-container .imgNum_style .UploadNum {
  color: var(--CSV-Color);
  font-weight: 500;
}
.post-page-container .postCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.post-page-container .postCount_style .postCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
.post-page-container .titleCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.post-page-container .titleCount_style .titleCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
.post-page-container .submit-box {
  display: flex;
  border-top: 1px solid gainsboro;
}
.post-page-container textarea {
  border-radius: 8px;
  width: 100%;
  height: 500px;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: calc(2vw + 8px);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
  letter-spacing: -0.5px;
}
.post-page-container textarea::-moz-placeholder {
  color: black;
}
.post-page-container textarea::placeholder {
  color: black;
}
.post-page-container textarea:focus {
  outline: none;
}
.post-page-container textarea:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
.post-page-container textarea:-webkit-autofill, .post-page-container textarea:-webkit-autofill:hover, .post-page-container textarea:-webkit-autofill:focus, .post-page-container textarea:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
.post-page-container input {
  border-radius: 8px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  width: 100%;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: calc(2vw + 8px);
  position: relative;
  letter-spacing: -0.5px;
}
.post-page-container input::-moz-placeholder {
  color: black;
}
.post-page-container input::placeholder {
  color: black;
}
.post-page-container input:focus {
  outline: none;
}
.post-page-container input:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
.post-page-container input:-webkit-autofill, .post-page-container input:-webkit-autofill:hover, .post-page-container input:-webkit-autofill:focus, .post-page-container input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
.post-page-container button.submit {
  border-radius: 10px;
  background: var(--cl-text-b-40);
  font-size: var(--font-2xl);
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -0.5px;
  height: 50px;
  font-weight: 500;
  margin: 2vh 30px;
}
.post-page-container button.submit.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
.post-page-container button.submit:focus, .post-page-container button.submit:active {
  background: black;
  color: white;
}

.imgcrop-panel {
  display: none;
  position: fixed;
  z-index: 150;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 1s ease-in-out;
  /* Modal Content/Box */
}
.imgcrop-panel.open {
  display: block;
}
.imgcrop-panel .cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: var(--CSV-Color);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.imgcrop-panel .cropmodal-content > .ga {
  grid-area: a;
}
.imgcrop-panel .cropmodal-content > .gb {
  grid-area: b;
}
.imgcrop-panel .cropmodal-content > .gc {
  grid-area: c;
}
.imgcrop-panel .cropmodal_close {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
  color: white;
}
.imgcrop-panel .cropmodal_close:before, .imgcrop-panel .cropmodal_close:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.imgcrop-panel .cropmodal_close:before {
  transform: rotate(45deg);
}
.imgcrop-panel .cropmodal_close:after {
  transform: rotate(-45deg);
}

.reply-drag-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
}
.reply-drag-panel .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.reply-drag-panel .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.reply-drag-panel .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.reply-drag-panel .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.reply-drag-panel .drag-head .close-css:before, .reply-drag-panel .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.reply-drag-panel .drag-head .close-css:before {
  transform: rotate(45deg);
}
.reply-drag-panel .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.reply-drag-panel .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.reply-drag-panel .inner::-webkit-scrollbar {
  display: none;
}
.reply-drag-panel .inner {
  max-height: calc(var(--vh, 1vh) * 60 - 70px);
  overflow-y: auto;
}
.reply-drag-panel .inner .tab-box {
  height: 50px;
  border-bottom: 1px solid var(--cl-text-b-200);
}
.reply-drag-panel .inner .tab-box .tab {
  display: inline-block;
  padding: 10px 20px;
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-text-b-120);
  cursor: pointer;
}
.reply-drag-panel .inner .tab-box .tab.active {
  color: var(--cl-text-b-40);
  border-bottom: 2px solid var(--cl-text-b-40);
}
.reply-drag-panel .inner .reply-list {
  padding: 15px 0;
  font-size: var(--font-xl);
  font-weight: 500;
  white-space: pre-line;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-5);
}
.reply-drag-panel .inner .reply-list .item-box {
  padding: 15px 0;
}

.post-feedeco-btn-box {
  display: flex;
  position: fixed;
  bottom: 40px;
  right: 0;
  z-index: 600;
  padding: 6vw;
}

.post-btn-plus {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid;
  border-radius: 50%;
  color: var(--nie-btm-menu-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  z-index: 500;
  font-size: var(--font-md);
}
.post-btn-plus:hover {
  background: var(--nie-cl-orange-80);
  color: white;
}
.post-btn-plus:active {
  background: var(--nie-cl-orange-80);
  color: white;
}

/* 스피너 스타일 설정 */
.around_mapdata-loader-box {
  display: none;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  align-items: center;
  justify-content: center;
}
.around_mapdata-loader-box.open {
  display: flex;
}
.around_mapdata-loader-box .loader {
  border-radius: 50%;
  border: 1px solid #ffffff;
  border-top: 1px solid rgb(0, 255, 128);
  border-radius: 50%;
  width: 250px;
  height: 240px;
  animation: mapspin 1s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal;
}
.around_mapdata-loader-box .loader.sm {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
}

.js-loader-box {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
}
.js-loader-box .js-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: view-more-spin 0.3s linear infinite;
  margin: auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.js-loader-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.js-loader-screen .js-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: view-more-spin 0.5s linear infinite;
  margin: 0 auto;
}

/* ------------------------------ 
 *  그룹페이지
 --------------------------------*/
/* ------------------------------ 
 * admin - page 
 --------------------------------*/
/* Skeleton loader styles */
.pic-skeleton {
  display: block;
  height: 400px;
  width: 100%;
  /*Adjusttheheightbasedonyourimagesize*/
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite, skeleton-gradient 1.5s infinite;
}
.pic-skeleton.hidden {
  display: none;
}

@keyframes pic-skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes skeleton-gradient {
  0%, 100% {
    background: white;
  }
  50% {
    background: #e0e0e0;
  }
}
/* ------------------------------ 
 * 버튼 
 --------------------------------*/
.simple-button {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 8px 18px;
  background: transparent;
  color: var(--cl-text-b-40);
  border-radius: 18px;
  border: 1px solid rgb(189, 189, 189);
  cursor: pointer;
}
.simple-button.font-3xl {
  font-size: var(--font-3xl);
}
.simple-button.font-2xl {
  font-size: var(--font-2xl);
}
.simple-button.font-xl {
  font-size: var(--font-xl);
}
.simple-button.bg-gray-100 {
  background: rgb(235, 235, 235);
}
.simple-button.border-none {
  border: none !important;
}
.simple-button.rouded-sm {
  border-radius: 5px;
}
.simple-button.rouded-md {
  border-radius: 8px;
}
.simple-button.rouded-lg {
  border-radius: 12px;
}
.simple-button.rouded-xl {
  border-radius: 14px;
}
.simple-button.black {
  background: black;
  color: white;
}
.simple-button.bg-white--cl-admin {
  background: white;
  color: var(--admin-maincolor);
}
.simple-button.text {
  background: none;
  border: none;
  color: var(--cl-text-b-40);
  font-weight: 600;
}
.simple-button.text:hover, .simple-button.text:focus {
  background: rgb(235, 235, 235);
  color: var(--cl-text-b-40);
}
.simple-button.onlytext {
  background: none;
  border: none;
  padding: 0;
  color: var(--cl-text-b-40);
  font-weight: 500;
}
.simple-button.onlytext:hover, .simple-button.onlytext:focus {
  background: none;
  color: var(--cl-text-b-40);
}
.simple-button.cl-admin {
  background: var(--admin-maincolor);
  color: white;
}
.simple-button.xl-2 {
  padding: 15px 10px;
  font-size: var(--font-2xl);
}
.simple-button.xl {
  padding: 10px 10px;
  font-size: var(--font-xl);
}
.simple-button.lg {
  padding: 5px 10px;
}
.simple-button.sm {
  font-size: var(--font-md);
  padding: 2px 7px;
}
.simple-button.sm .cssIcon {
  width: 12px;
  height: 12px;
}
.simple-button.md {
  font-size: var(--font-md);
  padding: 5px 7px;
}
.simple-button.md .cssIcon {
  width: 12px;
  height: 12px;
}
.simple-button:hover, .simple-button:focus {
  transform: translateY(-2px);
  transition: all 0.2s;
}

.simple-button-lg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--cl-ita-red-40);
  font-size: var(--font-xl);
  background: var(--cl-btn-bg-vague-itared);
  font-weight: 600;
  width: 100%;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  padding: 3px;
  border-radius: 8px;
}
.simple-button-lg:hover, .simple-button-lg:focus {
  background: var(--cl-ita-red-40);
  color: white;
}
.simple-button-lg.fill {
  background: var(--cl-btn-bg-vague-itared);
}
.simple-button-lg.white-border {
  color: var(--cl-ita-red-40);
  border: 1px solid white;
  background: none;
}
.simple-button-lg.white-border:hover {
  background: var(--cl-btn-bg-vague-itared);
}
.simple-button-lg.white-vague-fill {
  color: var(--cl-ita-red-40);
  border: none;
  background: rgba(240, 248, 255, 0.15);
}
.simple-button-lg.white-vague-fill:hover {
  background: var(--cl-btn-bg-vague-itared);
}
.simple-button-lg.black-line {
  color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 0, 0);
  background: none;
}
.simple-button-lg.black {
  background: black;
  color: white;
}
.simple-button-lg.line {
  background: none;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
}
.simple-button-lg.line:hover, .simple-button-lg.line:focus {
  background: var(--cl-btn-r-40);
  color: white;
}
.simple-button-lg:hover, .simple-button-lg:focus {
  transform: translateY(-2px);
  transition: all 0.2s;
}

.sticky-top {
  position: sticky;
  top: 0;
}

/* ------------------------------ 
 * ( 0 ) 그룹 레이아웃 
 --------------------------------*/
.group-grid-layout {
  letter-spacing: var(--nie-letter-spacing-3);
}
@media screen and (min-width: 992px) {
  .group-grid-layout {
    display: grid;
    grid-template: "leftbar body" 1fr/var(--pc-leftbar-wd) 1fr;
    width: 100%;
    height: 100%;
    background: white;
  }
  .group-grid-layout .g-leftbar {
    grid-area: leftbar;
    width: var(--pc-leftbar-wd);
  }
  .group-grid-layout .g-top {
    grid-area: top;
    /* width: 100%; */
    position: absolute;
    left: var(--pc-leftbar-wd);
    right: 0;
    top: 0;
  }
  .group-grid-layout .g-body {
    grid-area: body;
    width: 100%;
    overflow-x: hidden;
  }
}

/* ------------------------------ 
 *   ( 3 ) 바디 
 --------------------------------*/
.main-group-page {
  position: relative;
  background: white;
  height: calc(var(--vh, 1vh) * 100);
  overflow-x: hidden;
  overflow-y: auto;
  color: black;
  display: block;
}
@media screen and (min-width: 992px) {
  .main-group-page {
    padding-top: 0;
    display: grid;
    grid-template: "center right" 1fr/1fr 100px;
  }
}
.main-group-page .g-center {
  padding: 0 10px;
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main-group-page .g-center::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .main-group-page .g-center {
    width: 100%;
    grid-area: center;
    padding: 0 20px;
    margin: 0 auto;
    max-width: var(--pc-body-max-wd-2);
  }
}
.main-group-page .g-rightside {
  display: none;
}
@media screen and (min-width: 992px) {
  .main-group-page .g-rightside {
    display: block;
    grid-area: right;
    padding: 0 40px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    position: fixed;
    right: 0;
    top: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 20px;
    width: 100px;
  }
}

/* ------------------------------ 
 * 1. 프로필 
 --------------------------------*/
.group-profile-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 25px 10px 5px 10px;
  gap: 15px;
  /* ------------------------------ 
   * 프로필 박스 
   --------------------------------*/
  /* ------------------------------ 
   * 초대장 
   --------------------------------*/
  /* ------------------------------ 
      * 소개 
      --------------------------------*/
  /* ------------------------------ 
   * 가입 버튼 박스 
   --------------------------------*/
  /* 더보기 기능을 위한 CSS */
}
.group-profile-section .g-profile-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  position: relative;
  /* ------------------------------ 
   * profile text box 
   --------------------------------*/
}
.group-profile-section .g-profile-box .avatar-style {
  width: 70px;
  height: 70px;
}
@media screen and (min-width: 992px) {
  .group-profile-section .g-profile-box {
    flex-direction: row;
    gap: 30px;
  }
  .group-profile-section .g-profile-box .avatar-style {
    width: 120px;
    height: 120px;
  }
}
.group-profile-section .g-profile-box .logo-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.group-profile-section .g-profile-box .logo-box .member-count-box {
  position: absolute;
  right: 0;
  top: 0;
}
.group-profile-section .g-profile-box .logo-box .member-count-box .count {
  border-radius: 50%;
  background: #000000;
  color: white;
  font-size: var(--font-2xl);
  padding: 3px 5px;
  font-weight: 600;
}
.group-profile-section .g-profile-box .logo-box .logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid lightgrey;
}
@media screen and (min-width: 992px) {
  .group-profile-section .g-profile-box .logo-box .logo {
    width: 120px;
    height: 120px;
  }
}
.group-profile-section .g-profile-box .group_role_status {
  font-size: var(--font-md);
  font-weight: 500;
  color: white;
  background: var(--cl-ita-green);
  padding: 5px 12px;
  border-radius: 15px;
}
.group-profile-section .g-profile-box .group-title-sect {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  width: 100%;
  /* ------------------------------ 
  * 이름, 멤버 상태 
  --------------------------------*/
  /* ------------------------------ 
  * 수정, 관리자 링크 
  --------------------------------*/
  /* ------------------------------ 
   * 계정 아이디 
   --------------------------------*/
  /* ------------------------------ 
  * 서머리 
  --------------------------------*/
}
.group-profile-section .g-profile-box .group-title-sect .name-box {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-5xl);
  font-weight: 600;
  margin: 0px;
  width: 100%;
  justify-content: space-between;
}
@media screen and (min-width: 992px) {
  .group-profile-section .g-profile-box .group-title-sect .name-box .gname {
    justify-content: flex-start;
    font-size: var(--font-6xl);
    max-width: 800px;
  }
}
.group-profile-section .g-profile-box .group-title-sect .editbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 8px 18px;
  background: transparent;
  color: var(--cl-text-b-40);
  border-radius: 18px;
  border: 1px solid rgb(189, 189, 189);
  cursor: pointer;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.font-3xl,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.font-3xl {
  font-size: var(--font-3xl);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.font-2xl,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.font-2xl {
  font-size: var(--font-2xl);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.font-xl,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.font-xl {
  font-size: var(--font-xl);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.bg-gray-100,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.bg-gray-100 {
  background: rgb(235, 235, 235);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.border-none,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.border-none {
  border: none !important;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.rouded-sm,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.rouded-sm {
  border-radius: 5px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.rouded-md,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.rouded-md {
  border-radius: 8px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.rouded-lg,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.rouded-lg {
  border-radius: 12px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.rouded-xl,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.rouded-xl {
  border-radius: 14px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.black,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.black {
  background: black;
  color: white;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.bg-white--cl-admin,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.bg-white--cl-admin {
  background: white;
  color: var(--admin-maincolor);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.text,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.text {
  background: none;
  border: none;
  color: var(--cl-text-b-40);
  font-weight: 600;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.text:hover, .group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.text:focus,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.text:hover,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.text:focus {
  background: rgb(235, 235, 235);
  color: var(--cl-text-b-40);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.onlytext,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.onlytext {
  background: none;
  border: none;
  padding: 0;
  color: var(--cl-text-b-40);
  font-weight: 500;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.onlytext:hover, .group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.onlytext:focus,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.onlytext:hover,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.onlytext:focus {
  background: none;
  color: var(--cl-text-b-40);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.cl-admin,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.cl-admin {
  background: var(--admin-maincolor);
  color: white;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.xl-2,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.xl-2 {
  padding: 15px 10px;
  font-size: var(--font-2xl);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.xl,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.xl {
  padding: 10px 10px;
  font-size: var(--font-xl);
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.lg,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.lg {
  padding: 5px 10px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.sm,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.sm {
  font-size: var(--font-md);
  padding: 2px 7px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.sm .cssIcon,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.sm .cssIcon {
  width: 12px;
  height: 12px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.md,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.md {
  font-size: var(--font-md);
  padding: 5px 7px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn.md .cssIcon,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link.md .cssIcon {
  width: 12px;
  height: 12px;
}
.group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn:hover, .group-profile-section .g-profile-box .group-title-sect .editbox .edit-btn:focus,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link:hover,
.group-profile-section .g-profile-box .group-title-sect .editbox .admin-link:focus {
  transform: translateY(-2px);
  transition: all 0.2s;
}
.group-profile-section .g-profile-box .group-title-sect .account_id {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--admin-maincolor);
}
.group-profile-section .g-profile-box .group-title-sect .group_summary {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-70);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.group-profile-section .g-profile-box .group-title-sect .group_summary .summary_item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.group-profile-section .g-profile-box .group-title-sect .group_summary .summary_item .summary_text {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-70);
}
.group-profile-section .g-profile-box .group-title-sect .group_summary .summary_item .summary_count {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.group-profile-section .g-profile-box .group-title-sect .group_summary .summary_item .cssIcon {
  width: 20px;
  height: 20px;
}
.group-profile-section .g-profile-box .group-title-sect .member_utility {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-profile-section .g-profile-box .group-title-sect .member_utility .group-join-btn {
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 8px 17px;
  background: var(--cl-text-b-40);
  color: white;
  border-radius: 7px;
  border: 1px solid rgb(189, 189, 189);
  cursor: pointer;
}
.group-profile-section .g-profile-box .group-title-sect .member_utility .group-join-btn:hover, .group-profile-section .g-profile-box .group-title-sect .member_utility .group-join-btn:focus {
  background: black;
  color: white;
  transform: translateY(-2px);
  transition: all 0.2s;
}
.group-profile-section .g-profile-box .group-title-sect .member_utility .group-join-btn .cssIcon {
  width: 20px;
  height: 20px;
}
.group-profile-section .invitation-box {
  padding: 5px 0;
}
.group-profile-section .introbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 0;
}
.group-profile-section .introbox .cssIcon {
  width: 20px;
  height: 20px;
  color: var(--cl-text-b-120);
}
.group-profile-section .intro-text {
  width: clamp(0px, 90%, 500px);
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.55;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-120);
}
.group-profile-section .group-join-buttonbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
}
@media screen and (min-width: 992px) {
  .group-profile-section .group-join-buttonbox {
    flex-direction: row;
    width: -moz-max-content;
    width: max-content;
    align-items: center;
    justify-content: center;
  }
}
.group-profile-section .subgroup-box.limited-subgroups .subgroup-item:nth-child(n+4) {
  display: none;
}
.group-profile-section .more-btn-container {
  text-align: center;
  flex: none;
}

.count-bullet {
  color: var(--admin-maincolor);
}
.count-bullet.fill {
  padding: 3px 8px;
  background: var(--admin-maincolor);
  color: white;
  border-radius: 15px;
}

/* ------------------------------ 
   * 공지 
   --------------------------------*/
.group-notice-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 20px 10px;
}

/* ------------------------------ 
 * 1. 서브그룹 
 --------------------------------*/
.group-subgroup-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 20px 10px;
}
.group-subgroup-section .subgroup-box {
  display: flex;
  flex: none;
  gap: 5px;
  max-width: 500px;
  align-items: center;
}
.group-subgroup-section .subgroup-box .subgroup-item {
  display: none;
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  border: 1px solid #dddddd;
  padding: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  background: #f8f8f8;
  cursor: pointer;
  border-radius: 20px;
}
.group-subgroup-section .subgroup-box .subgroup-item:hover, .group-subgroup-section .subgroup-box .subgroup-item:focus {
  background: #e8e8e8;
}
.group-subgroup-section .subgroup-box .subgroup-item .subgroup-logo {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #dddddd;
  padding: 0.3rem;
}
.group-subgroup-section .subgroup-box .subgroup-item .subgroup-name {
  font-size: var(--font-md);
  font-weight: 500;
  padding-right: 0.5rem;
}
.group-subgroup-section .subgroup-box .subgroup-item .subgroup-account_id {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-150);
}

.ita-feed-tab {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 0;
  z-index: 51;
  border-bottom: 1px solid lightgray;
}
.ita-feed-tab::-webkit-scrollbar {
  display: none;
}
.ita-feed-tab.active {
  cursor: grabbing;
}
.ita-feed-tab ul.category {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ita-feed-tab ul.category li.item {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--cl-text-b-120);
  margin: 0;
  border-radius: 0;
}
.ita-feed-tab ul.category li.item:hover {
  color: var(--cl-text-b-40);
  transform: translateY(-2px);
  transition: all 0.2s;
}
.ita-feed-tab ul.category li.item.active {
  color: black;
  border-bottom: 2px solid black;
  font-weight: 600;
}
.ita-feed-tab ul.sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ita-feed-tab ul.sort li.item {
  font-size: var(--font-md);
  font-weight: bold;
  padding: 10px 10px;
  cursor: pointer;
  color: var(--cl-text-b-120);
  margin: 0;
  border-radius: 50px;
}
.ita-feed-tab ul.sort li.item:hover {
  color: var(--cl-text-b-40);
}
.ita-feed-tab ul.sort li.item.active {
  color: var(--cl-text-b-40);
}

/* ------------------------------ 
 * 2. 활동피드
 --------------------------------*/
.group-feed-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  margin: 0 -10px;
}
.group-feed-section .group-feed-content {
  display: none;
  width: 100%;
}
.group-feed-section .group-feed-content.active {
  display: block;
}
.group-feed-section .nofeed {
  padding: 20px;
  font-size: var(--font-2xl);
}
.group-feed-section .plog-feed-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 767px) and (max-width: 991px) {
  .group-feed-section .plog-feed-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }
}
@media screen and (min-width: 992px) {
  .group-feed-section .plog-feed-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
  }
}
.group-feed-section .plog-feed-content .plog-feed-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* ------------------------------ 
       * ecoaddr-title-box - 3줄 환경주소 제목
       --------------------------------*/
  /* ------------------------------ 
     * 행정주소 , time-box
     --------------------------------*/
  /* ------------------------------ 
    * 이미지  
    --------------------------------*/
}
.group-feed-section .plog-feed-content .plog-feed-item .ecoaddr-title-box {
  position: absolute;
  top: 20px;
  left: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 10px;
  z-index: 5;
  /* ------------------------------ 
       * author-box  
       --------------------------------*/
}
.group-feed-section .plog-feed-content .plog-feed-item .ecoaddr-title-box .word {
  font-size: var(--font-5xl);
  font-weight: 600;
  /* font-weight: 500; */
  line-height: 1.45;
  padding: 0px 0;
  opacity: 1;
  color: white;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}
.group-feed-section .plog-feed-content .plog-feed-item .ecoaddr-title-box .word.author_by {
  font-size: var(--font-md);
  margin-top: 15px;
}
.group-feed-section .plog-feed-content .plog-feed-item .ecoaddr-title-box .author-box {
  font-size: var(--font-md);
  font-weight: 600;
  color: white;
  border-radius: 5px;
  padding: 3px 3px;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-block;
}
.group-feed-section .plog-feed-content .plog-feed-item .ecoaddr-title-box .author-box:hover, .group-feed-section .plog-feed-content .plog-feed-item .ecoaddr-title-box .author-box:active {
  color: white;
  background: var(--cl-ita-red-40);
  transform: scale(1.03);
}
.group-feed-section .plog-feed-content .plog-feed-item .admin-addr,
.group-feed-section .plog-feed-content .plog-feed-item .time-box {
  opacity: 0.5;
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--cl-text-b-40);
  padding: 4px 0;
  opacity: 0.8;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.group-feed-section .plog-feed-content .plog-feed-item .admin-addr .cssIcon,
.group-feed-section .plog-feed-content .plog-feed-item .time-box .cssIcon {
  width: 20px;
  height: 20px;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box {
  width: 100%;
  height: 100%;
  position: relative;
  /* ------------------------------ 
     * 이미지 슬라이더 
     --------------------------------*/
  /* ------------------------------ 
     * 이미지 슬라이더 - 페이징 
     --------------------------------*/
  /* ------------------------------ 
       * main-btag 표시 
      --------------------------------*/
  /* ------------------------------ 
       * 더보기 버튼 
      --------------------------------*/
  /* ------------------------------ 
     * 좋아요/댓글 
     --------------------------------*/
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed {
  margin: 0 0 0px 0 !important;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* ------------------------------ 
   *  수직 이미지 
   --------------------------------*/
  /* ------------------------------ 
   * 정방 이미지 
   --------------------------------*/
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed .plogfeed_img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 4px;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed .plogfeed_img.loaded {
  display: block;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed.vertical {
  height: 0;
  padding-top: 150%;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed.vertical .plogfeed_img {
  position: absolute;
  top: 0;
  left: 0;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed.vertical .plogfeed_img.loaded {
  display: block;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed.square {
  height: 0;
  padding-top: 100%;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed.square .plogfeed_img {
  position: absolute;
  top: 0;
  left: 0;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .plogfeed_img_swiper figure.plogfeed.square .plogfeed_img.loaded {
  display: block;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .swiper-pagination-plogfeed {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 5px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .swiper-pagination-plogfeed .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  /* padding: 3px 1px; */
  margin: 0 2.5px;
  display: inline-block;
  font-weight: 700;
  opacity: 1;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  outline: none;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .swiper-pagination-plogfeed .swiper-pagination-bullet:hover, .group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .swiper-pagination-plogfeed .swiper-pagination-bullet:focus {
  outline: none;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .swiper-pagination-plogfeed .swiper-pagination-bullet-active {
  background: white;
  opacity: 1;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .main-btag-box {
  z-index: 5;
  position: absolute;
  bottom: 18px;
  left: 10px;
  color: white;
  font-size: var(--font-lg);
  font-weight: 500;
  align-items: center;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .see-more {
  z-index: 5;
  position: absolute;
  bottom: 0px;
  right: 0px;
  flex-direction: column;
  gap: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: var(--font-xl);
  margin: 20px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  width: -moz-max-content;
  width: max-content;
  height: 30px;
  /* border-radius: 7px; */
  background: rgba(255, 255, 255, 0.144);
  border-radius: 30px;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .engagement-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 0;
}
.group-feed-section .plog-feed-content .plog-feed-item .plogfeed-imgSwiper-box .engagement-box .numStyle {
  font-size: var(--font-4xl);
  color: var(--cl-text-b-70);
}
.group-feed-section .plog-feed-content .plog-feed-item .like-comment-box {
  display: flex;
  align-items: center;
  gap: 15px;
}
.group-feed-section .plog-feed-content .plog-feed-item .like-comment-box .item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.group-feed-section .plog-feed-content .plog-feed-item .like-comment-box .item .num {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-text-b-70);
}

/* ------------------------------ 
 * 3. 멤버
 --------------------------------*/
.group-member-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.group-member-section .ita-feed-tab {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 0;
  z-index: 51;
}
.group-member-section .ita-feed-tab::-webkit-scrollbar {
  display: none;
}
.group-member-section .ita-feed-tab.active {
  cursor: grabbing;
}
.group-member-section .ita-feed-tab ul.category {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-member-section .ita-feed-tab ul.category li.item {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--cl-text-b-120);
  margin: 0;
  border-radius: 0;
}
.group-member-section .ita-feed-tab ul.category li.item:hover {
  color: var(--cl-text-b-40);
  transform: translateY(-2px);
  transition: all 0.2s;
}
.group-member-section .ita-feed-tab ul.category li.item.active {
  color: black;
  border-bottom: 2px solid black;
  font-weight: 600;
}
.group-member-section .ita-feed-tab ul.sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-member-section .ita-feed-tab ul.sort li.item {
  font-size: var(--font-md);
  font-weight: bold;
  padding: 10px 10px;
  cursor: pointer;
  color: var(--cl-text-b-120);
  margin: 0;
  border-radius: 50px;
}
.group-member-section .ita-feed-tab ul.sort li.item:hover {
  color: var(--cl-text-b-40);
}
.group-member-section .ita-feed-tab ul.sort li.item.active {
  color: var(--cl-text-b-40);
}
.group-member-section .nofeed {
  padding: 20px;
  font-size: var(--font-2xl);
}
.group-member-section .order-tab {
  display: flex;
  padding: 10px 0;
  align-items: center;
}
.group-member-section .order-tab .order-tabitem {
  font-size: var(--font-lg);
  font-weight: 400;
  padding: 8px 10px;
  color: black;
  opacity: 0.5;
  cursor: pointer;
}
.group-member-section .order-tab .order-tabitem.selected {
  opacity: 1;
  font-weight: 700;
  border-bottom: 1px solid black;
}
.group-member-section .order-tab .order-tabitem:hover, .group-member-section .order-tab .order-tabitem:focus {
  opacity: 1;
  font-weight: 500;
}
.group-member-section .member-list {
  width: 100%;
  display: grid;
  grid-template-columns: 45px 1fr 100px;
  gap: 5px;
  padding: 5px 20px;
  align-items: center;
  border-bottom: 1px solid rgb(225, 225, 225);
}

/* ------------------------------ 
 * 패널 
 --------------------------------*/
.panel--common-group {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: white;
  border-radius: 25px 25px 0 0;
  color: black;
  cursor: grab;
  padding: 20px 10px;
  box-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.1803921569);
  border: 1px solid rgba(128, 128, 128, 0.2588235294);
  background: var(--cl-text-b-245);
  padding: 20px 10px !important;
  height: calc(var(--vh, 1vh) * 100 - 50px);
}
.panel--common-group .drag-head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
}
.panel--common-group .drag-head::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  height: 4px;
  width: 40px;
  background: var(--color-gray);
  border-radius: 12px;
}
.panel--common-group .drag-head .title {
  font-size: var(--font-3xl);
  font-weight: bold;
  text-align: center;
}
.panel--common-group .drag-head .close-css {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  margin-left: auto;
}
.panel--common-group .drag-head .close-css:before, .panel--common-group .drag-head .close-css:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25px;
  width: 2px;
  background-color: var(--cl-text-b-40);
}
.panel--common-group .drag-head .close-css:before {
  transform: rotate(45deg);
}
.panel--common-group .drag-head .close-css:after {
  transform: rotate(-45deg);
}
.panel--common-group .inner {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.panel--common-group .inner::-webkit-scrollbar {
  display: none;
}
.panel--common-group.auto-height {
  height: -moz-max-content;
  height: max-content;
}
.panel--common-group.full-height {
  height: calc(var(--vh, 1vh) * 100);
}
.panel--common-group.rounded-none {
  border-radius: 0;
}
@media screen and (min-width: 992px) {
  .panel--common-group.pc-max-600 {
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
}
@media screen and (min-width: 992px) {
  .panel--common-group.pc-max-768 {
    width: 100%;
    max-width: 768px;
    margin: auto;
  }
}
@media screen and (min-width: 992px) {
  .panel--common-group.pc-w-full {
    width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .panel--common-group {
    padding: 20px 20px !important;
    width: 600px;
    height: -moz-max-content;
    height: max-content;
    min-height: 500px;
    left: 0;
    right: 0;
    margin: auto;
    top: 100px;
    bottom: 100px;
    border-radius: 25px;
  }
}
.panel--common-group .drag-head {
  padding: 0 10px;
}
.panel--common-group .drag-head .type-cnt {
  font-size: var(--font-3xl);
  color: var(--cl-ita-red-40);
  font-weight: bold;
  margin-right: 5px;
}
.panel--common-group .drag-head .close-text {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: rgb(255, 255, 255);
  cursor: pointer;
  background: #030303;
  padding: 5px 12px;
  border-radius: 6px;
}
.panel--common-group .inner {
  max-height: calc(var(--vh, 1vh) * 100 - 130px);
  overflow-y: auto;
}
.panel--common-group .inner.fixed-height {
  max-height: calc(var(--vh, 1vh) * 100 - 130px);
}
.panel--common-group .inner.fixed-height-70 {
  max-height: calc(var(--vh, 1vh) * 100 - 70px);
}
.panel--common-group .inner .guideline {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  padding: 10px 10px 10px 10px;
  line-height: 1.5;
  letter-spacing: var(--nie-letter-spacing-5);
}
.panel--common-group .inner .mission-word {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-150);
  line-height: 1.6;
  padding: 0 10px;
}
.panel--common-group .inner .group-search-box {
  flex-direction: column;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.panel--common-group .inner .group-search-box input.group-search-bar {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  width: 100%;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: var(--font-xl);
  font-weight: 500;
  border-radius: 12px;
}
.panel--common-group .inner .content {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  flex-wrap: wrap;
  padding: 20px 0px 40px 0;
  height: -moz-max-content;
  height: max-content;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-3);
  /* ------------------------------ 
   * 그룹 프로필 수정 패널 
   --------------------------------*/
  /* ------------------------------ 
   * 그룹 프로필  패널 
   --------------------------------*/
  /* ------------------------------ 
   * 그룹가입 리스트 패널 
   --------------------------------*/
}
.panel--common-group .inner .content .group-profile-edit-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0px 10px;
}
.panel--common-group .inner .content .group-profile-edit-box .item {
  padding: 15px 0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dddddd;
}
.panel--common-group .inner .content .group-profile-edit-box .item-column {
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-bottom: 1px solid #dddddd;
}
.panel--common-group .inner .content .group-profile-edit-box .logo_thumb {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 2px;
  border: 1px solid #dddddd;
  position: relative;
}
.panel--common-group .inner .content .group-profile-edit-box .logo {
  position: relative;
  width: 120px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #dddddd;
}
.panel--common-group .inner .content .group-profile-edit-box .img-update-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  align-items: center;
  display: flex;
  font-size: var(--font-lg);
  justify-content: center;
  border-radius: 50%;
  background: #ff5a5a;
  color: #ffffff;
}
.panel--common-group .inner .content .group-profile-edit-box .name {
  font-size: var(--font-2xl);
  font-weight: 600;
  opacity: 0.7;
  padding: 10px 0;
}
.panel--common-group .inner .content .group-profile-edit-box .account_id {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-150);
}
.panel--common-group .inner .content .group-profile-edit-box .intro {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 30px 0;
}
.panel--common-group .inner .content .group-profile-edit-box .info {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-ita-red-40);
  padding: 10px 0;
  white-space: pre-line;
  opacity: 0.7;
}
.panel--common-group .inner .content .group-report {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  padding: 10px 10px;
}
.panel--common-group .inner .content .group-report .logo_thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 2px;
  border: 1px solid #dddddd;
}
.panel--common-group .inner .content .group-report .logo {
  width: 120px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}
.panel--common-group .inner .content .group-report .name {
  font-size: var(--font-5xl);
  font-weight: 600;
  padding: 15px 0;
}
.panel--common-group .inner .content .group-report .account_id {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-150);
}
.panel--common-group .inner .content .group-report .intro {
  font-size: var(--font-xl);
  font-weight: 400;
  color: var(--cl-text-b-0);
  padding: 5px 0;
  white-space: pre-line;
  line-height: 1.8;
}
.panel--common-group .inner .content .group-listbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #dddddd;
  border-radius: 10px;
}
.panel--common-group .inner .content .group-listbox .logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.panel--common-group .inner .content .group-listbox .name {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 10px 0;
}
.panel--common-group .inner .content .group-listbox .account_id {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-150);
}

.trashnews-textbox {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: black;
  width: 100%;
  padding: 10px 15px;
  position: relative;
  line-height: 1.9;
  border: 2px solid black;
  border-radius: 6px;
  background: var(--cl-text-b-245);
  letter-spacing: var(--nie-letter-spacing-5);
  margin: 10px 0 15px 0;
  resize: none;
  height: auto;
  overflow-y: hidden;
}
.trashnews-textbox::after {
  content: "";
  position: absolute;
  /*right: 0; */
  bottom: -20px;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

/* ------------------------------ 
 * 쓰레기 뉴스 수정 패널 
  --------------------------------*/
.trashnews-edit-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0px 10px;
}
.trashnews-edit-box .item {
  padding: 15px 0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dddddd;
}
.trashnews-edit-box .item-column {
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
}
.trashnews-edit-box .news-pics {
  position: relative;
  width: 120px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #dddddd;
}
.trashnews-edit-box .img-update-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  align-items: center;
  display: flex;
  font-size: var(--font-lg);
  justify-content: center;
  border-radius: 50%;
  background: #ff5a5a;
  color: #ffffff;
}
.trashnews-edit-box .name {
  font-size: var(--font-2xl);
  font-weight: 600;
  opacity: 0.7;
  padding: 10px 0;
}
.trashnews-edit-box .account_id {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-150);
}
.trashnews-edit-box .intro {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  padding: 30px 0;
}
.trashnews-edit-box .info {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-ita-red-40);
  padding: 10px 0;
  white-space: pre-line;
  opacity: 0.7;
}

/* ------------------------------ 
 *  itapop-cardPanel
 --------------------------------*/
.itapop-cardPanel {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  /* ------------------------------ 
   * 빈공간 클릭시 팝업 닫기 
   --------------------------------*/
  /* ------------------------------ 
  * 그룹 초대장 
  --------------------------------*/
}
.itapop-cardPanel .popup-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.2705882353);
  z-index: 1;
}
.itapop-cardPanel .contents-pop {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 90%;
  gap: 10px;
  background-color: white;
  padding: 25px 20px 20px 20px;
  border-radius: 20px;
  box-shadow: 1px 1px 12px 1px rgba(0, 0, 0, 0.2);
  margin: auto;
  /* ------------------------------ 
   * title
   --------------------------------*/
  /* ------------------------------ 
   * content
   --------------------------------*/
  /* ------------------------------ 
   * 버튼 
   --------------------------------*/
  /* ------------------------------ 
   * pc 화면 
   --------------------------------*/
}
.itapop-cardPanel .contents-pop.no-padding {
  padding: 0 !important;
}
.itapop-cardPanel .contents-pop.gap-0 {
  gap: 0;
}
.itapop-cardPanel .contents-pop .title {
  text-align: left;
  font-size: var(--font-3xl);
  letter-spacing: -0.5px;
  line-height: 1.5;
  color: black;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.itapop-cardPanel .contents-pop .content {
  text-align: left;
  font-size: var(--font-xl);
  letter-spacing: -0.5px;
  line-height: 1.5;
  color: black;
  font-weight: 500;
  padding-bottom: 25px;
  overflow-y: auto;
  max-height: 50vh;
  height: -moz-max-content;
  height: max-content;
  width: 100%;
}
.itapop-cardPanel .contents-pop .button-box {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.itapop-cardPanel .contents-pop .button-box .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--cl-ita-red-40);
  font-size: var(--font-xl);
  font-weight: 600;
  width: 100%;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  padding: 3px;
}
.itapop-cardPanel .contents-pop .button-box .btn.fill {
  background: var(--cl-btn-bg-vague-itared);
  border-radius: 10px;
}
.itapop-cardPanel .contents-pop .button-box .btn.line {
  background: none;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
  border-radius: 10px;
}
.itapop-cardPanel .contents-pop .button-box .btn:hover {
  background: var(--cl-btn-bg-vague-itared);
  color: var(--cl-btn-r-40);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}
@media screen and (min-width: 992px) {
  .itapop-cardPanel .contents-pop {
    width: 50%;
    max-width: 400px;
    bottom: 50%;
    transform: translateY(50%);
  }
}
.itapop-cardPanel.open {
  display: block;
}
.itapop-cardPanel .content {
  padding-bottom: 0 !important;
  max-height: unset !important;
}
.itapop-cardPanel .invite-message-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.itapop-cardPanel .invite-message-card .card-img {
  width: 100%;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 992px) {
  .itapop-cardPanel .invite-message-card .card-img {
    height: 250px;
  }
}
.itapop-cardPanel .invite-message-card .msgbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 20px;
}
.itapop-cardPanel .invite-message-card .msgbox .headline {
  font-size: var(--font-4xl);
  font-weight: 600;
  line-height: 1.6;
}
.itapop-cardPanel .invite-message-card .msgbox .logo {
  width: 120px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}
.itapop-cardPanel .invite-message-card .guide-text {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  text-align: center;
}

/* ------------------------------ 
 * 초대하기 페이지 
 --------------------------------*/
.main-invitation-card {
  display: flex;
  flex-direction: column;
  height: calc(var(--vh, 1vh) * 100);
  letter-spacing: var(--nie-letter-spacing-3);
  justify-content: flex-end;
}
.main-invitation-card .card-invite-bannerimg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  z-index: 1;
  filter: brightness(0.35);
}
.main-invitation-card .card-body {
  gap: 50px;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  justify-content: space-between;
  text-align: center;
  z-index: 2;
  height: 100%;
}
.main-invitation-card .card-body .text-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* align-items: center; */
  justify-content: flex-end;
  /* text-align: center; */
  color: white;
  padding: 5px 20px;
}
.main-invitation-card .card-body .text-box .logo {
  width: 120px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}
.main-invitation-card .card-body .text-box .name {
  font-size: var(--font-6xl);
  font-weight: 600;
  line-height: 1.6;
  color: white;
  text-align: left;
}
.main-invitation-card .card-body .text-box .status-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-invitation-card .card-body .text-box .status-box .status-text {
  color: white;
  opacity: 0.8;
  font-size: var(--font-xl);
  font-weight: 500;
}
.main-invitation-card .card-body .button-box {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.main-invitation-card .card-body .button-box .action-btn {
  background: var(--admin-mainbg);
  color: var(--admin-maincolor);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--cl-ita-red-40);
  font-size: var(--font-xl);
  background: var(--cl-btn-bg-vague-itared);
  font-weight: 600;
  width: 100%;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  padding: 3px;
  border-radius: 8px;
  width: 90%;
}
.main-invitation-card .card-body .button-box .action-btn:hover, .main-invitation-card .card-body .button-box .action-btn:focus {
  background: var(--cl-ita-red-40);
  color: white;
}
.main-invitation-card .card-body .button-box .action-btn.fill {
  background: var(--cl-btn-bg-vague-itared);
}
.main-invitation-card .card-body .button-box .action-btn.white-border {
  color: var(--cl-ita-red-40);
  border: 1px solid white;
  background: none;
}
.main-invitation-card .card-body .button-box .action-btn.white-border:hover {
  background: var(--cl-btn-bg-vague-itared);
}
.main-invitation-card .card-body .button-box .action-btn.white-vague-fill {
  color: var(--cl-ita-red-40);
  border: none;
  background: rgba(240, 248, 255, 0.15);
}
.main-invitation-card .card-body .button-box .action-btn.white-vague-fill:hover {
  background: var(--cl-btn-bg-vague-itared);
}
.main-invitation-card .card-body .button-box .action-btn.black-line {
  color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 0, 0);
  background: none;
}
.main-invitation-card .card-body .button-box .action-btn.black {
  background: black;
  color: white;
}
.main-invitation-card .card-body .button-box .action-btn.line {
  background: none;
  color: var(--cl-btn-r-40);
  border: 1px solid var(--cl-btn-r-40);
}
.main-invitation-card .card-body .button-box .action-btn.line:hover, .main-invitation-card .card-body .button-box .action-btn.line:focus {
  background: var(--cl-btn-r-40);
  color: white;
}
.main-invitation-card .card-body .button-box .action-btn:hover, .main-invitation-card .card-body .button-box .action-btn:focus {
  transform: translateY(-2px);
  transition: all 0.2s;
}
.main-invitation-card .card-body .button-box .action-btn.fill {
  color: var(--admin-maincolor);
  background: white;
}
@media screen and (min-width: 992px) {
  .main-invitation-card {
    height: 100%;
    display: grid;
    justify-content: center;
    width: 100%;
  }
  .main-invitation-card .card-invite-bannerimg {
    height: 100%;
  }
  .main-invitation-card .card-body {
    width: 400px;
    justify-content: center;
    gap: 80px;
  }
}

.profileIcon-menu-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  z-index: 1;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid #dddddd;
  bottom: 120%;
}
.profileIcon-menu-content.open {
  display: block;
}
.profileIcon-menu-content .item {
  padding: 16px 16px;
  text-decoration: none;
  display: block;
  color: black;
  font-size: var(--font-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
.profileIcon-menu-content .item .cssIcon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  opacity: 0.7;
}
.profileIcon-menu-content .item:not(:first-child) {
  border-top: 1px solid #dddddd;
}
.profileIcon-menu-content .item:hover {
  background: #f1f1f1;
  border-radius: 8px;
}

.action-popmenu-content {
  display: none;
  position: fixed;
  bottom: 80px;
  width: 100%;
  left: 0;
  z-index: 100;
  right: 0;
  margin: auto;
  padding: 0 20px;
}
.action-popmenu-content.open {
  display: block;
}
.action-popmenu-content .item {
  padding: 16px 16px;
  text-decoration: none;
  display: block;
  color: black;
  font-size: var(--font-xl);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
.action-popmenu-content .item .cssIcon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  opacity: 0.7;
}
.action-popmenu-content .item:hover {
  background: #f1f1f1;
  border-radius: 8px;
}

.account-popmenu-content {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 0;
  z-index: 100;
  /* right: 0; */
  margin: auto;
  margin: 0 20px;
  background: white;
  border: 1px solid gainsboro;
  border-radius: 8px;
}
.account-popmenu-content.open {
  display: block;
}
.account-popmenu-content .item {
  padding: 16px 16px;
  text-decoration: none;
  display: block;
  color: black;
  font-size: var(--font-xl);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
.account-popmenu-content .item .cssIcon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  opacity: 0.7;
}
.account-popmenu-content .item:hover {
  background: #f1f1f1;
  border-radius: 8px;
}

/* ------------------------------ 
 * SOS 
 --------------------------------*/
.emptyfeed-introduction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px;
}
.emptyfeed-introduction .guideText {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  line-height: 1.7;
}

.news_banner {
  padding: 10px;
  background: #cbffcd;
  height: 50px;
  position: relative;
  font-weight: 600;
  font-size: var(--font-2xl);
  text-align: center;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news_banner:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
}

/* ------------------------------ 
 * plogging- detail  
 --------------------------------*/
.plogging-detail-screen {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #ffffff;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.plogging-detail-screen::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .plogging-detail-screen {
    height: 100%;
    width: 600px;
    margin: auto;
  }
}

.section-headTitle {
  font-size: var(--font-3xl);
  font-weight: 600;
  color: var(--cl-text-b-0);
  padding: 15px 0;
}

/* ------------------------------ 
 *main-search-screen
 --------------------------------*/
.main-search-screen {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #ffffff;
  overflow-y: auto;
  /* ------------------------------ 
   * 수직 스크롤 제어  
   --------------------------------*/
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main-search-screen::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .main-search-screen {
    width: var(--pc-body-max-wd);
    margin: auto;
  }
}
.main-search-screen .searchgroup-content {
  display: none;
  width: 100%;
}
.main-search-screen .searchgroup-content.active {
  display: block;
}
.main-search-screen .group-listbox {
  display: flex;
  flex-direction: column;
}
.main-search-screen .group-listbox .group-list {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 30px 20px 10px 20px;
  border-bottom: 1px solid gainsboro;
}
.main-search-screen .group-listbox .group-list .logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid lightgrey;
}
.main-search-screen .group-listbox .group-list .name {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 3px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.main-search-screen .group-listbox .group-list .intro {
  font-size: var(--font-lg);
  font-weight: 400;
  opacity: 0.7;
  /* padding: 3px 0; */
  line-height: 1.4;
  margin: 2px 1px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.main-search-screen .group-listbox .group-list .counter-bullet {
  border-radius: 14px;
  padding: 2px 5px;
  position: absolute;
  left: -2px;
  top: -4px;
  background: var(--admin-maincolor);
  width: -moz-max-content;
  width: max-content;
  color: white;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  gap: 3px;
}
.main-search-screen .group-listbox .group-list .counter-bullet.itagreen {
  background: var(--cl-ita-green);
}
.main-search-screen .group-listbox .group-list .counter-bullet .cssIcon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}
.main-search-screen .group-listbox .group-list .account_id {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-0);
  opacity: 0.5;
}
.main-search-screen .group-listbox .group-list:hover {
  background: #f8f8f8;
}

/* ------------------------------ 
 * 검색창 
 --------------------------------*/
.group-search-inputBox {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  position: relative;
}
.group-search-inputBox input.group-searchInput {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  color: black;
  background: rgba(149, 149, 149, 0.137254902);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
}
.group-search-inputBox input.group-searchInput::-moz-placeholder {
  color: black;
  opacity: 0.5;
}
.group-search-inputBox input.group-searchInput::placeholder {
  color: black;
  opacity: 0.5;
}
.group-search-inputBox input.group-searchInput:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.137254902) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.137254902) inset !important;
  color: black !important;
}
.group-search-inputBox input.group-searchInput:-webkit-autofill, .group-search-inputBox input.group-searchInput:-webkit-autofill:hover, .group-search-inputBox input.group-searchInput:-webkit-autofill:focus, .group-search-inputBox input.group-searchInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
.group-search-inputBox .search-allIcon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-4xl);
  border-radius: 50%;
}

.ita-skeleton {
  flex: none;
  /*더 suttle 하게*/
  background: linear-gradient(-90deg, #f7f7f7 25%, #eeeeee 50%, #f7f7f7 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 3px;
}
.ita-skeleton.circle {
  border-radius: 50%;
}

.grouplist-skeleton {
  display: inline-block;
  width: 100%;
  height: 20px;
  /*높이를원하는크기로조절하세요*/
  background: linear-gradient(-90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.grouplist-skeleton.circle {
  border-radius: 50%;
}
.grouplist-skeleton.rectangle {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  /* 사각형 간 간격 */
}
.grouplist-skeleton.rectangle-thin {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  /* 사각형 간 간격 */
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.fetch-morefeed-btn {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 8px 18px;
  background: transparent;
  color: var(--cl-text-b-40);
  border-radius: 18px;
  border: 1px solid rgb(189, 189, 189);
  cursor: pointer;
  background: white !important;
  color: #000000 !important;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 25px;
}
.fetch-morefeed-btn.font-3xl {
  font-size: var(--font-3xl);
}
.fetch-morefeed-btn.font-2xl {
  font-size: var(--font-2xl);
}
.fetch-morefeed-btn.font-xl {
  font-size: var(--font-xl);
}
.fetch-morefeed-btn.bg-gray-100 {
  background: rgb(235, 235, 235);
}
.fetch-morefeed-btn.border-none {
  border: none !important;
}
.fetch-morefeed-btn.rouded-sm {
  border-radius: 5px;
}
.fetch-morefeed-btn.rouded-md {
  border-radius: 8px;
}
.fetch-morefeed-btn.rouded-lg {
  border-radius: 12px;
}
.fetch-morefeed-btn.rouded-xl {
  border-radius: 14px;
}
.fetch-morefeed-btn.black {
  background: black;
  color: white;
}
.fetch-morefeed-btn.bg-white--cl-admin {
  background: white;
  color: var(--admin-maincolor);
}
.fetch-morefeed-btn.text {
  background: none;
  border: none;
  color: var(--cl-text-b-40);
  font-weight: 600;
}
.fetch-morefeed-btn.text:hover, .fetch-morefeed-btn.text:focus {
  background: rgb(235, 235, 235);
  color: var(--cl-text-b-40);
}
.fetch-morefeed-btn.onlytext {
  background: none;
  border: none;
  padding: 0;
  color: var(--cl-text-b-40);
  font-weight: 500;
}
.fetch-morefeed-btn.onlytext:hover, .fetch-morefeed-btn.onlytext:focus {
  background: none;
  color: var(--cl-text-b-40);
}
.fetch-morefeed-btn.cl-admin {
  background: var(--admin-maincolor);
  color: white;
}
.fetch-morefeed-btn.xl-2 {
  padding: 15px 10px;
  font-size: var(--font-2xl);
}
.fetch-morefeed-btn.xl {
  padding: 10px 10px;
  font-size: var(--font-xl);
}
.fetch-morefeed-btn.lg {
  padding: 5px 10px;
}
.fetch-morefeed-btn.sm {
  font-size: var(--font-md);
  padding: 2px 7px;
}
.fetch-morefeed-btn.sm .cssIcon {
  width: 12px;
  height: 12px;
}
.fetch-morefeed-btn.md {
  font-size: var(--font-md);
  padding: 5px 7px;
}
.fetch-morefeed-btn.md .cssIcon {
  width: 12px;
  height: 12px;
}
.fetch-morefeed-btn:hover, .fetch-morefeed-btn:focus {
  transform: translateY(-2px);
  transition: all 0.2s;
}
@media screen and (min-width: 767px) {
  .fetch-morefeed-btn {
    width: 15%;
    margin: 20px 10px;
  }
}

/* ------------------------------ 
 *  1365 서명
 --------------------------------*/
/* ------------------------------ 
 * 봉사인증서명 /1365/sign 
 --------------------------------*/
.vol-signature-screen {
  position: relative;
  background: #e9ff84;
  width: 100%;
}
.vol-signature-screen .sign-pagebody {
  padding: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.vol-signature-screen .sign-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.vol-signature-screen .container {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-top: 50px;
  width: 800px;
  border: 2px solid black;
  height: -moz-max-content;
  height: max-content;
  font-family: noto sans kr;
  letter-spacing: -0.5px;
  background: white;
  line-height: 1.7em;
  text-align: justify;
}
.vol-signature-screen #capture_area {
  padding: 70px 35px;
}
.vol-signature-screen #sig-canvas {
  touch-action: none;
  padding: 3;
  overscroll-behavior: contain;
}
.vol-signature-screen .sign-box {
  border: 2px dotted black;
  border-radius: 5px;
  padding: 0px;
}
.vol-signature-screen #sig-dataUrl {
  width: 100%;
}
.vol-signature-screen .docstyle {
  text-align: right;
  font-size: var(--font-lg);
}
.vol-signature-screen .pre-wrap {
  word-break: break-all;
  white-space: pre-line;
  font-size: var(--font-lg);
  line-height: 1.6;
}
.vol-signature-screen .sign-btn {
  position: fixed;
  right: 0;
  bottom: 100px;
}
@media screen and (min-width: 992px) {
  .vol-signature-screen .sign-btn {
    right: 30px;
    bottom: 200px;
    width: 100px;
  }
}
.vol-signature-screen .sign-btn-lng {
  width: 100px;
  height: 50px;
  display: flex;
  position: fixed;
  right: 0;
  bottom: 40px;
}
.vol-signature-screen #kor_ver {
  position: relative;
  background: white url("../public/img/util/Flag-South-Korea.jpg") no-repeat center;
  background-size: 110%;
  width: 40px;
  height: 40px;
  margin: 3px;
  margin-right: 6px;
  /* padding:5px; */
  border-radius: 50%;
  border: 1px solid;
  /* border: 1px solid #00000075; */
  /* box-shadow: 1px 1px gray; */
}
.vol-signature-screen #kor_ver:after {
  position: absolute;
  content: "KOR";
  font-size: 7px;
  bottom: -18px;
  left: 0;
  text-align: center;
  right: 0;
  margin: auto;
}
.vol-signature-screen #eng_ver {
  position: relative;
  background: white url("../public/img/util/global1.png") no-repeat center;
  background-size: contain;
  width: 40px;
  height: 40px;
  margin: 3px;
  margin-right: 6px;
  border-radius: 50%;
}
.vol-signature-screen #eng_ver:after {
  position: absolute;
  content: "GLOBAL";
  font-size: 7px;
  bottom: -18px;
  left: 0;
  text-align: center;
  right: 0;
  margin: auto;
}
.vol-signature-screen .title {
  text-align: center;
  margin-top: 46px;
  border-bottom: 2PX solid BLACK;
  padding: 12px;
  clear: both;
  font-size: var(--font-4xl);
  line-height: 1.5;
}
.vol-signature-screen .agree {
  text-align: center;
  margin-top: 30px;
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.6;
}
.vol-signature-screen .name-secion {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  margin-top: 20px;
  gap: 12px;
}
@media screen and (min-width: 767px) {
  .vol-signature-screen .name-secion {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
  }
}
.vol-signature-screen .sign-secion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  margin-top: 20px;
}
.vol-signature-screen .name-field {
  border: none;
  border: 1px solid black;
  background: none;
  border-radius: 3px;
  height: 40px;
  font-size: var(--font-xl);
  padding: 10px;
  width: 190px;
}
.vol-signature-screen .btn-retry {
  width: 100%;
  height: 60px;
  background: rgb(255, 255, 255);
  border-radius: 3px !important;
  color: black !important;
  font-size: 17px;
  padding: 0 10px;
  /* border:none !important; */
}
.vol-signature-screen .btn-signsubmit {
  width: 100%;
  height: 60px;
  background: black;
  border-radius: 0 !important;
  border: none !important;
  font-size: 17px;
  color: white;
  padding: 0 10px;
}
.vol-signature-screen .backbtn {
  color: #ffffff !important;
  padding: 8px 25px;
  font-size: 16px;
  background-color: #39af7b !important;
  border-color: #39af7b !important;
}
.vol-signature-screen .btn-signsubmit:hover,
.vol-signature-screen .btn-signsubmit:focus,
.vol-signature-screen .btn-signsubmit:active {
  color: #fff;
  background-color: #39af7b;
  border-radius: 0 !important;
  border: none !important;
}
.vol-signature-screen .sign-date {
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
}
.vol-signature-screen .signauth {
  display: none;
  background-color: #ff1200;
  color: #fff;
  height: 60px;
  width: 100%;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  margin: auto;
}
.vol-signature-screen .has_u_error {
  display: flex !important;
  /* height:60px; */
}
.vol-signature-screen .success_info {
  display: none;
  flex-direction: column;
  /* border: 1px solid black; */
  border-radius: 20px;
  background-color: white;
  color: #000000;
  height: 165px;
  z-index: 15;
  width: 100%;
  max-width: var(--pc-body-max-wd);
  font-size: 18px;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.vol-signature-screen input:-internal-autofill-selected {
  background-color: rgb(255, 255, 255) !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: -internal-light-dark(black, white) !important;
}
.vol-signature-screen input:-webkit-autofill,
.vol-signature-screen input:-webkit-autofill:hover,
.vol-signature-screen input:-webkit-autofill:focus,
.vol-signature-screen input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgb(0, 0, 0) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.vol-signature-screen .all_eng_class,
.vol-signature-screen #eng_text,
.vol-signature-screen #title_eng,
.vol-signature-screen #docnum_eng,
.vol-signature-screen #eng_name,
.vol-signature-screen #eng_sign,
.vol-signature-screen #eng_signinfo,
.vol-signature-screen #eng_agree,
.vol-signature-screen #ita_eng,
.vol-signature-screen #eng_signinfo,
.vol-signature-screen #eng_agree {
  display: none;
}
@media screen and (max-width: 991px) {
  .vol-signature-screen .container {
    width: 90%;
    position: relative;
  }
  .vol-signature-screen #capture_area {
    padding: 50px 10px;
  }
  .vol-signature-screen h1 {
    font-size: 25px;
  }
  .vol-signature-screen .sign-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 120px; */
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  .vol-signature-screen .signauth {
    display: none;
    background-color: #ff1200;
    color: #fff;
    height: 60px;
    width: 100%;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  .vol-signature-screen .has_u_error {
    display: flex !important;
    /* height:60px; */
  }
  .vol-signature-screen .sign-btn-lng {
    display: flex;
    position: absolute;
    left: 3%;
    top: 10px;
  }
}

/* ------------------------------ 
 * admin  
 --------------------------------*/
/* ------------------------------ 
 * [관리자] 1365 사인 
 --------------------------------*/
.admin-1365sign-screen {
  padding: 30px;
  min-height: 100vh;
  /* background-color: lightgrey; */
  background-image: linear-gradient(147deg, #ffffff 0%, rgba(19, 19, 19, 0.4784313725) 100%);
  /* background-image: linear-gradient(147deg, #d46fff 0%, #ff2525 100%) */
}
.admin-1365sign-screen .admin-sign-container {
  /* padding: 120px; */
  font-size: var(--font-3xl);
  width: 100%;
}
.admin-1365sign-screen .admin-sign-container .head_title {
  position: fixed;
  height: 100px;
  top: 0;
}
.admin-1365sign-screen .admin-sign-container .table-section {
  margin-top: 100px;
  width: 100%;
  font-size: var(--font-xl);
  /* background: lightgrey */
  /* height: 100%;
  overflow: scroll; */
}

/* ------------------------------ 
 * admin - page 
 --------------------------------*/
.admin-grid-layout {
  display: grid;
  grid-template: "leftbar top" 70px "leftbar body" 1fr/200px 1fr;
  width: 100%;
  height: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.admin-grid-layout::-webkit-scrollbar {
  display: none;
}
.admin-grid-layout .g-leftbar {
  grid-area: leftbar;
  width: 200px;
}
.admin-grid-layout .g-top {
  grid-area: top;
  /* width: 100%; */
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
}
.admin-grid-layout .g-body {
  grid-area: body;
  width: 100%;
  overflow-x: hidden;
}

/* ------------------------------ 
 * ( 1 ) 좌측 메뉴 
 --------------------------------*/
.leftBar-admin {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  z-index: 10;
  font-size: var(--font-2xl);
  z-index: 5;
}
.leftBar-admin .inner {
  height: 100%;
  padding: 10px;
  /* ------------------------------ 
   * scroll 
   --------------------------------*/
}
.leftBar-admin .inner .top-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.leftBar-admin .inner .top-box img.top-logo {
  width: 220px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.leftBar-admin .inner .top-box .top-name {
  font-size: var(--font-2xl);
  font-weight: 700;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.leftBar-admin .inner .menu-box {
  padding: 10px 0;
  height: calc(var(--vh, 1vh) * 100 - 70px);
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.leftBar-admin .inner .menu-box::-webkit-scrollbar {
  display: none;
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 2px 10px;
  margin: 5px 0;
  border-radius: 10px;
  background: #f1f1f1;
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-dropdown-content {
  max-height: 0;
  overflow: hidden;
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-dropdown-content.open {
  max-height: 1000px;
  transition: max-height 0.4s;
}
.leftBar-admin .inner .menu-box .adm-menu-container .rotate {
  transform: rotate(180deg);
}
.leftBar-admin .inner .menu-box .adm-menu-container hr {
  margin: 10px 0 15px 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-menu-item {
  padding: 8px 12px;
  font-size: var(--font-lg);
  font-weight: 500;
  display: flex;
  margin: 6px 0;
  align-items: center;
  gap: 2px;
  color: var(--cl-text-b-40);
  cursor: pointer;
  border-radius: 8px;
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-menu-item:hover {
  transition: all 0.15s;
  background: var(--admin-mainbg);
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-menu-item.selected {
  background: var(--admin-mainbg);
  font-weight: 600;
  color: var(--admin-maincolor);
  opacity: 1;
  border-radius: 8px;
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-menu-item.selected .cssIcon {
  opacity: 1;
}
.leftBar-admin .inner .menu-box .adm-menu-container .adm-menu-item .cssIcon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.leftBar-admin .inner .bottom-box {
  padding: 20px 0;
  margin-top: auto;
}

/* ------------------------------ 
 * ( 2  ) 탑 - 내역검색 
 --------------------------------*/
.admin-grid-bodytop {
  height: 70px;
  background: white;
}
.admin-grid-bodytop .top-tabmenu {
  padding: 0px 40px 0 30px;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 20px;
  height: 70px;
}
.admin-grid-bodytop .group_name {
  font-size: var(--font-2xl);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-grid-bodytop .group_name .date-info {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-70);
}
.admin-grid-bodytop .search_admin_btn {
  font-size: var(--font-2xl);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}
.admin-grid-bodytop .search_admin_btn:hover, .admin-grid-bodytop .search_admin_btn:focus, .admin-grid-bodytop .search_admin_btn:active {
  font-weight: 700;
}
.admin-grid-bodytop .search_admin_btn.cssIcon {
  width: 18px;
  height: 18px;
}
.admin-grid-bodytop .csvlogo_img {
  height: 30px;
}
.admin-grid-bodytop .group-name {
  font-size: var(--font-2xl);
  font-weight: 600;
}
.admin-grid-bodytop .accessToadmin {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 20px;
  color: black;
  font-weight: 600;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid gainsboro;
}
.admin-grid-bodytop .accessToadmin:hover, .admin-grid-bodytop .accessToadmin:focus {
  color: white;
  background: black;
}

/* ------------------------------ 
 * ( 3 ) 바디 
 --------------------------------*/
.main-admin {
  padding: 30px 30px;
  position: relative;
  background: white;
  height: calc(var(--vh, 1vh) * 100 - 70px);
  overflow-x: hidden;
  overflow-y: auto;
  background: #f8f8f8;
  border-radius: 40px 0 0 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main-admin::-webkit-scrollbar {
  display: none;
}
.main-admin.V5_layout {
  padding: 100px 75px;
  position: relative;
  background: white;
  height: calc(var(--vh, 1vh) * 100);
  overflow-x: hidden;
  overflow-y: auto;
  background: #f8f8f8;
}
.main-admin .admin-key-primary {
  font-weight: 700;
}
.main-admin .admin-key-primary:after {
  content: "\f0d7";
  font-size: 12px;
  font-family: Fontawesome;
  position: relative;
  display: inline-block;
  right: -4px;
  top: 0px;
}
.main-admin .admin-key-accordian {
  text-align: right;
}
.main-admin .admin-key-accordian .admin-key-noline,
.main-admin .admin-key-accordian .admin-key70,
.main-admin .admin-key-accordian .admin-key,
.main-admin .admin-key-accordian .admin-key300,
.main-admin .admin-key-accordian .admin-key200 {
  padding: 10px 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.main-admin .admin-key-accordian .admin-key-noline.ellipsis,
.main-admin .admin-key-accordian .admin-key70.ellipsis,
.main-admin .admin-key-accordian .admin-key.ellipsis,
.main-admin .admin-key-accordian .admin-key300.ellipsis,
.main-admin .admin-key-accordian .admin-key200.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
.main-admin .admin-key-accordian .admin-key-noline.no-padding,
.main-admin .admin-key-accordian .admin-key70.no-padding,
.main-admin .admin-key-accordian .admin-key.no-padding,
.main-admin .admin-key-accordian .admin-key300.no-padding,
.main-admin .admin-key-accordian .admin-key200.no-padding {
  padding: 0;
}
.main-admin .admin-key-accordian .accordian-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  cursor: pointer;
  font-size: var(--font-xl);
  background: var(--admin-mainbg);
  font-weight: 600;
  color: white;
  transition: all 0.15s;
  border-radius: 12px;
}
.main-admin .admin-key-accordian .accordian-more-btn:hover {
  transform: scale(1.03);
}
.main-admin .admin-key-accordian .snsurl-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  padding-left: 40px;
}
.main-admin .admin-key-accordian .admin-key-row {
  padding: 0px 20px;
  cursor: pointer;
}
.main-admin .admin-key-accordian .admin-key-append {
  opacity: 0;
  display: none;
  flex-direction: column;
  background: white;
  padding: 3px 20px;
  border-radius: 0 0 25px 25px;
  animation: fadeIn 0.4s ease-in-out;
}
.main-admin .admin-key-accordian.active {
  transition: margin-bottom 1s;
  -webkit-transition: margin-bottom 1s;
  -moz-transition: margin-bottom 1s;
  -ms-transition: margin-bottom 1s;
  -o-transition: margin-bottom 1s;
  border-radius: 25px;
  box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 25px;
}
.main-admin .admin-key-accordian.active .admin-key-row {
  background: #cecece;
  font-weight: bold;
  border-radius: 15px 15px 0 0;
}
.main-admin .admin-key-accordian.active .admin-key-append {
  opacity: 1;
  display: flex;
  max-height: calc(var(--vh, 1vh) * 100 - 300px);
  overflow-x: hidden;
  overflow-y: auto;
}
.main-admin .admin-key-accordian:hover, .main-admin .admin-key-accordian:focus {
  background: #f5f5f5;
}
.main-admin #csv_branch,
.main-admin #period_pick {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  border: none;
  border-bottom: 1px solid;
  letter-spacing: -0.4px;
  font-weight: 500;
  background: transparent;
  color: black;
  padding: calc(0.3vw + 4px) calc(0.3vw + 6px);
  font-size: calc(0.3vw + 12px);
}

/* ------------------------------ 
 * 사용안함 -  old
 --------------------------------*/
.pc-header-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  /* background: #f02b670f; */
  color: black;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1490196078);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 50px;
  z-index: 200;
}
.pc-header-bar .csvlogo_img {
  height: 30px;
}
.pc-header-bar .group-name {
  font-size: var(--font-2xl);
  font-weight: 600;
}
.pc-header-bar .accessToadmin {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  padding: 10px 20px;
  color: black;
  font-weight: 600;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid gainsboro;
}
.pc-header-bar .accessToadmin:hover, .pc-header-bar .accessToadmin:focus {
  color: white;
  background: black;
}

.admin-map-loading {
  /*화면 전체를 어둡게 합니다.*/
  display: none;
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.admin_popmodal {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  z-index: 150;
}
.admin_popmodal .admin_popmodal_contents {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  border: 1px solid;
  height: -moz-max-content;
  height: max-content;
  padding: 30px;
  color: black;
  background: white;
}
.admin_popmodal .admin_popmodal_contents .admin_password {
  border: none;
  font-size: calc(2vw + 10px);
}
.admin_popmodal .admin_popmodal_contents .admin_password_submit {
  margin-left: 10px;
  font-size: calc(2vw + 10px);
  cursor: pointer;
}

.effect_highlight {
  display: inline;
  box-shadow: inset 0 -10px 0 rgba(255, 93, 152, 0.5019607843);
  /*-10px은 highlight의 두께*/
  font-weight: bold;
}
.effect_highlight.skyblue {
  box-shadow: inset 0 -10px 0 rgba(133, 189, 255, 0.54);
}
.effect_highlight.green {
  box-shadow: inset 0 -10px 0 rgba(170, 230, 193, 0.54);
}

.effect_highlight_word {
  display: inline;
  box-shadow: inset 0 -7px 0 rgba(83, 185, 255, 0.5019607843);
  /*-10px은 highlight의 두께*/
  font-weight: bold;
}
.effect_highlight_word.skyblue {
  box-shadow: inset 0 -10px 0 rgba(133, 189, 255, 0.54);
}
.effect_highlight_word.ita-green {
  box-shadow: inset 0 -10px 0 rgba(45, 189, 51, 0.31);
}
.effect_highlight_word.green {
  box-shadow: inset 0 -10px 0 rgba(170, 230, 193, 0.54);
}

.effect_description_modal {
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.831372549);
  position: fixed;
  align-items: center;
  justify-content: center;
  color: white;
  top: 0;
  bottom: 0;
  z-index: 200;
}
.effect_description_modal .effect_popmodal_close {
  position: fixed;
  top: 20px;
  right: 100px;
  font-size: var(--font-7xl);
  cursor: pointer;
  z-index: 5;
}
.effect_description_modal .effect_description_copy {
  position: fixed;
  top: 20px;
  right: 160px;
  font-size: var(--font-7xl);
  cursor: pointer;
  z-index: 5;
}
.effect_description_modal .effect_description_box {
  display: flex;
  align-items: center;
  background: white;
  color: black;
  height: 80vh;
  border-radius: 20px;
  max-width: 700px;
  overflow-y: auto;
}
.effect_description_modal .effect_description_box .effect_description {
  padding: 40px;
  font-size: var(--font-3xl);
  line-height: 1.8;
  height: 100%;
}
.effect_description_modal .effect_description_box .effect_description .head-box {
  text-align: left;
  background: var(--admin-maincolor);
  color: white;
  padding: 20px 35px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 10px;
}
.effect_description_modal .effect_description_box .effect_description .head-box .env-index {
  font-size: var(--font-4xl);
  font-weight: 500;
}
.effect_description_modal .effect_description_box .effect_description .head-box .env-val {
  font-size: var(--font-5xl);
  font-weight: 600;
  text-align: right;
}

.adm-photo-ZIPdownload-modal {
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(26, 109, 255, 0.8117647059);
  position: fixed;
  align-items: center;
  justify-content: center;
  color: white;
  top: 0;
  bottom: 0;
  z-index: 200;
}
.adm-photo-ZIPdownload-modal .adm-photo-download-close {
  position: fixed;
  top: 17.2px;
  right: 17.2px;
  font-size: var(--font-7xl);
  cursor: pointer;
  z-index: 5;
}
.adm-photo-ZIPdownload-modal .adm-photo-download_box {
  padding: 20px 22px;
  font-size: calc(1vw + 24px);
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
  color: black;
  height: 160px;
  width: 400px;
  border-radius: 12px;
}

.excel_download_modal {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  color: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 200;
}
.excel_download_modal .excel_download_modal-contents {
  position: relative;
  background: #222222;
  padding: 50px 40px;
  height: -moz-max-content;
  height: max-content;
  border-radius: 20px;
}
.excel_download_modal .excel_popmodal_close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: var(--font-9xl);
  cursor: pointer;
  z-index: 5;
}
.excel_download_modal .excel_popmodal_csvidx {
  font-size: var(--font-3xl);
  position: absolute;
  text-align: center;
  top: 16px;
  left: 0;
  right: 0;
}
.excel_download_modal .output_csr_res {
  border-radius: 10px;
  font-size: var(--font-xl);
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0.2196078431);
  /* width: 250px; */
  width: -moz-max-content;
  width: max-content;
  letter-spacing: -0.5px;
  font-weight: 400;
  color: white;
  padding: 10px 15px;
  margin: 10px 10px;
  /* text-decoration: underline; */
  /* border: 2px solid; */
  cursor: pointer;
  /* text-decoration: underline; */
}
.excel_download_modal .output_csr_res:focus, .excel_download_modal .output_csr_res:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
}

.adm-version-history-modal {
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.831372549);
  position: fixed;
  align-items: center;
  justify-content: center;
  color: white;
  top: 0;
  bottom: 0;
  z-index: 200;
}
.adm-version-history-modal .adm-version-history-close {
  position: fixed;
  top: 17.2px;
  right: 17.2px;
  font-size: var(--font-7xl);
  cursor: pointer;
  z-index: 5;
}
.adm-version-history-modal .adm-version-history_box {
  padding: 4vw;
  font-size: calc(1vw + 3px);
  display: flex;
  gap: 8px;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  background: white;
  color: black;
  height: 80%;
  width: 80%;
  overflow-y: auto;
  border-radius: 12px;
}

.effectStats_box_section {
  display: none;
  line-height: 1.4;
  height: 100%;
  padding-bottom: 100px;
}
.effectStats_box_section.active {
  display: block;
}
.effectStats_box_section.V5_layout {
  padding: 50px 0;
  height: -moz-max-content;
  height: max-content;
}
.effectStats_box_section .effectStats_box_container_slide {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide {
  width: 100%;
  flex-shrink: 0;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 1px 1px 10px 1px #efefef;
  border: 1px solid lightgrey;
  padding: 40px;
  border-radius: 15px;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid var(--admin-maincolor);
  border-radius: 50%;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_no {
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  color: var(--admin-maincolor);
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_subtitle {
  font-size: var(--font-5xl);
  font-weight: 700;
  border-radius: 15px;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_subtitle_01 {
  font-size: var(--font-3xl);
  padding: 5px 0;
  font-weight: 600;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_desc {
  border-top: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
  font-size: var(--font-lg);
  color: var(--cl-text-b-70);
  font-weight: 500;
  padding: 10px 10px;
  height: -moz-max-content;
  height: max-content;
  line-height: 1.75;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_effectIndex {
  font-size: calc(0px + 0.8vw);
  font-weight: 500;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_unitEffectIndex {
  margin-left: auto;
  font-size: calc(0px + 0.8vw);
  font-weight: 500;
  border: 1px solid black;
  border-radius: 15px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_unit {
  font-size: calc(0px + 0.8vw);
  font-weight: 500;
  opacity: 0.8;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_assessment {
  font-size: 0.25px;
  font-weight: 500;
  padding: 0 15px;
  opacity: 0.8;
  height: 50px;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_idx {
  padding: 3px 6px;
  font-weight: 700;
  font-size: calc(0px + 0.9vw);
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_val_main {
  margin: 6px 10px 6px 0px;
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  font-weight: 700;
  width: -moz-max-content;
  width: max-content;
  background: var(--admin-maincolor);
  font-size: var(--font-3xl);
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_val_main:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_val {
  border-radius: 5px;
  padding: 5px 10px;
  color: black;
  font-weight: 700;
  border: 1px solid black;
  width: -moz-max-content;
  width: max-content;
  background: white;
  font-size: var(--font-2xl);
  flex: none;
}
.effectStats_box_section .effectStats_box_container_slide .effectStats_box_slide .effectStats_box_val:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.envEffect-swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.envEffect-swiper-container .swiper-pagination-envEffect {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  text-align: center;
}
.envEffect-swiper-container .swiper-pagination-envEffect .swiper-pagination-bullet {
  width: 20px;
  height: 2px;
  padding: 2px 1px;
  margin: 0 4px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: var(--admin-mainbg);
  font-size: 11px;
  /* background: none; */
  opacity: 1;
  border-radius: 2px;
}
.envEffect-swiper-container .swiper-pagination-envEffect .swiper-pagination-bullet:hover, .envEffect-swiper-container .swiper-pagination-envEffect .swiper-pagination-bulletfocus {
  outline: none;
}
.envEffect-swiper-container .swiper-pagination-envEffect .swiper-pagination-bullet-active {
  font-weight: 900;
  background: var(--admin-maincolor);
}

.keystats_box_section_23 {
  display: none;
}
.keystats_box_section_23.active {
  display: block;
}
.keystats_box_section_23 .keystats_box_container {
  grid-template-columns: 1fr 1fr 1fr;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
}
.keystats_box_section_23 .keystats_box_container .keystats_box {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin: 10px 0;
  width: 240px;
  height: 160px;
  font-size: var(--font-6xl);
  letter-spacing: -0.5px;
  background: white;
  border: 1px solid #e2e2e2;
  box-shadow: 1px 1px 10px 1px #e6e6e6;
  color: var(--admin-maincolor);
  font-weight: 700;
  letter-spacing: -0.7px;
  border-radius: 15px;
  padding: 20px;
  cursor: grab;
}
.keystats_box_section_23 .keystats_box_container .keystats_box:focus, .keystats_box_section_23 .keystats_box_container .keystats_box:hover {
  background: var(--admin-mainbg);
}
.keystats_box_section_23 .keystats_box_container .keystats_box .keystats_text {
  font-size: var(--font-2xl);
  font-weight: 700;
  padding: 5px 0;
  color: var(--cl-text-b-150);
}
.keystats_box_section_23 .keystats_box_container .keystats_box .keystats_unit {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-150);
}
.keystats_box_section_23 .keystats_box_container .keystats_box .admin_alljupunix,
.keystats_box_section_23 .keystats_box_container .keystats_box .admin_alljupsum,
.keystats_box_section_23 .keystats_box_container .keystats_box .admin_alljupdis,
.keystats_box_section_23 .keystats_box_container .keystats_box .admin_alljupstep,
.keystats_box_section_23 .keystats_box_container .keystats_box .admin_alljupco2,
.keystats_box_section_23 .keystats_box_container .keystats_box .admin_alljupwho,
.keystats_box_section_23 .keystats_box_container .keystats_box .admin_alljupsigned {
  padding-top: 5px;
  font-weight: 500;
  color: var(--admin-maincolor);
  font-size: calc(2vw + 8px);
}
.keystats_box_section_23 .keystats_box_container .keystats_box .keystats_unit {
  font-size: var(--font-xl);
  font-weight: 600;
  padding-left: 3px;
  color: var(--cl-text-b-70);
}

.userapproveList_section {
  display: block;
  padding: 20px 0 0 0;
}
.userapproveList_section .userapproveList_toggle {
  font-size: 22px;
  padding: 24px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}
.userapproveList_section .userapproveList_toggle:before {
  display: block;
  content: "\f077";
  font-family: FontAwesome;
}
.userapproveList_section .userapproveList_toggle.show:before {
  margin-top: 5px;
  display: block;
  content: "\f078";
  font-family: FontAwesome;
}
.userapproveList_section .userapproveList_stats {
  font-size: 22px;
  display: flex;
  align-items: center;
}
.userapproveList_section .apprv_bubble {
  display: none;
  border-radius: 50px;
  width: 17px;
  padding: 3px;
  height: 17px;
  background: #f7086c;
  color: white;
  position: absolute;
  top: 12px;
  font-size: 13px;
  left: -18px;
  line-height: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.userapproveList_section .userapproveList_statlist {
  display: flex;
  font-size: 18px;
}
.userapproveList_section .userapproveList_header {
  text-align: right;
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: 5px;
  background: rgba(240, 43, 103, 0.0588235294);
  border-radius: 12px;
  color: #515151;
  box-shadow: 0px 0px 2px 1px rgba(237, 20, 61, 0.1098039216);
  padding: 10px 20px;
}
.userapproveList_section .userapproveList_table {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
  line-height: 2;
  font-size: 5.2px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 13px;
}
.userapproveList_section .userapproveList_table .userapproveList_list {
  padding: 6px 0;
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userapproveList_section .userapproveList_table .admin-userApproved-status {
  color: black;
  font-weight: 600;
  float: right;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.userapproveList_section .userapproveList_table .admin-userApproved-status.no {
  color: red;
}
.userapproveList_section .userapproveList_table .admin-userApprove-go {
  padding: 0px 20px;
  color: white;
  font-weight: 600;
  float: right;
  background: var(--admin-maincolor);
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.userapproveList_section .userapproveList_table .admin-userApprove-go:focus, .userapproveList_section .userapproveList_table .admin-userApprove-go:hover {
  background: black;
}
.userapproveList_section .userapproveList_table .admin-userApprove-go.done {
  background: none;
}
.userapproveList_section .userapproveList_table .admin-userApprove-go.exclude {
  background: white;
  color: var(--admin-maincolor);
}
.userapproveList_section .userapproveList_table .admin-userApprove-go.exclude:focus, .userapproveList_section .userapproveList_table .admin-userApprove-go.exclude:hover {
  color: black;
}

.admin-section-search-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s, margin-bottom 0.3s;
  font-size: var(--font-xl);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  z-index: 10;
  background: #edf5ff;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(223, 223, 223);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(223, 223, 223);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(223, 223, 223);
  position: relative;
  border-radius: 40px;
}
.admin-section-search-panel.active {
  max-height: 1000px;
  margin-bottom: 30px;
}

.period_pick_container input[type=date] {
  outline: none;
}
.period_pick_container input[type=date]::-webkit-calendar-picker-indicator {
  font-size: var(--font-md);
  display: block;
  cursor: pointer;
}
.period_pick_container input[type=date]::-webkit-calendar-picker-indicator:focus, .period_pick_container input[type=date]::-webkit-calendar-picker-indicator:hover {
  background-color: white;
}

input.periodpick {
  outline: none;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 10px 20px;
  margin: 0 8px;
  color: black;
  font-weight: 600;
  width: 175px;
  border: 1px solid gainsboro;
  border-radius: 20px;
  transition: all 0.15s;
  font-size: var(--font-lg);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
input.periodpick::-moz-placeholder {
  color: gray;
}
input.periodpick::placeholder {
  color: gray;
}
input.periodpick:focus, input.periodpick:hover {
  border: 2px solid rgb(0, 0, 0);
  outline: none;
}
input.periodpick.user:focus, input.periodpick.user:hover {
  border: 2px solid rgb(0, 0, 0);
  outline: none;
}
input.periodpick:-internal-autofill-selected {
  background-color: gainsboro !important;
  box-shadow: 0 0 0 500px gainsboro inset !important;
  color: black !important;
}

select.periodpick {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  text-align: center;
  padding: 10px 12px;
  margin: 0 8px;
  color: black;
  font-weight: 600;
  font-size: 14px;
  width: 80px;
  border: 2px solid black;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}
select.periodpick::-moz-placeholder {
  color: gray;
}
select.periodpick::placeholder {
  color: gray;
}
select.periodpick:focus, select.periodpick:hover {
  color: white;
  background: black;
  outline: none;
}
select.periodpick.user:focus, select.periodpick.user:hover {
  color: black;
  background: white;
  outline: none;
}
select.periodpick:-internal-autofill-selected {
  background-color: gainsboro !important;
  box-shadow: 0 0 0 500px gainsboro inset !important;
  color: black !important;
}
select.periodpick option {
  font-size: var(--font-2xl);
  font-weight: 500;
}
select.periodpick option:hover, select.periodpick option:focus {
  color: white;
  background: black;
  outline: none;
}

select.client_periodpick {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  text-align: center;
  padding: 10px 12px;
  margin: 0 8px;
  color: black;
  font-weight: 600;
  font-size: 14px;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  border: 2px solid black;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 14px;
}
select.client_periodpick option[value=""][disabled] {
  display: none;
}
select.client_periodpick::-moz-placeholder {
  color: gray;
}
select.client_periodpick::placeholder {
  color: gray;
}
select.client_periodpick:focus, select.client_periodpick:hover {
  color: white;
  background: black;
  outline: none;
}
select.client_periodpick.user:focus, select.client_periodpick.user:hover {
  color: black;
  background: white;
  outline: none;
}
select.client_periodpick:-internal-autofill-selected {
  background-color: gainsboro !important;
  box-shadow: 0 0 0 500px gainsboro inset !important;
  color: black !important;
}
select.client_periodpick .submit-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}
select.client_periodpick .submit-panel .csv_period_submit {
  padding: 7px 15px;
  color: white;
  background: black;
  font-weight: 600;
  font-size: var(--font-2xl);
  display: flex;
  align-items: center;
  border-radius: 30px;
  cursor: pointer;
}
select.client_periodpick .submit-panel .csv_period_submit:focus, select.client_periodpick .submit-panel .csv_period_submit:hover {
  color: white;
  transform: scale(1.05);
}
select.client_periodpick .close-btn {
  padding: 7px 20px;
  color: black;
  background: none;
  font-weight: 600;
  font-size: var(--font-2xl);
  display: flex;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
}
select.client_periodpick .close-btn:focus, select.client_periodpick .close-btn:hover {
  color: black;
  transform: scale(1.05);
}

/* ------------------------------ 
 * 24.2.0 new admin page - 헤더, 탭박스
 --------------------------------*/
.admin-header-titlebox {
  font-size: var(--font-5xl);
  font-weight: 700;
  padding: 0 0 24px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.admin-tabbox {
  padding: 10px 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-tabbox .admin-sub-tab {
  font-size: var(--font-2xl);
  color: #afafaf;
  padding: 6px 12px;
  cursor: pointer;
}
.admin-tabbox .admin-sub-tab.current {
  color: black;
  font-weight: 700;
  color: black;
  font-weight: 700;
  border-bottom: 2px solid black;
}

.admin-guideRule-textbox {
  font-size: var(--font-xl);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
  color: var(--cl-text-b-70);
  /* ------------------------------ 
  *  
  --------------------------------*/
}
.admin-guideRule-textbox h2 {
  font-size: var(--font-3xl);
  font-weight: 700;
  padding: 20px 0 20px 0;
}
.admin-guideRule-textbox p {
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.5;
  padding: 3px 10px;
}
.admin-guideRule-textbox .highlight-bullet {
  margin: 0 10px;
  padding: 3px 8px;
  color: var(--admin-maincolor);
  border: 1px solid var(--admin-maincolor);
  font-size: var(--font-lg);
  border-radius: 7px;
}
.admin-guideRule-textbox .highlight-bullet.fill {
  background: var(--admin-maincolor);
  color: white;
}
.admin-guideRule-textbox .link-box {
  display: flex;
  gap: 10px;
  align-items: center;
}
.admin-guideRule-textbox .link-box .link-block {
  display: flex;
  gap: 10px;
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 1.5;
  padding: 10px 15px;
  background: rgba(133, 189, 255, 0.15);
  border-radius: 12px;
  width: -moz-max-content;
  width: max-content;
  margin: 10px 0;
  align-items: center;
}
.admin-guideRule-textbox .link-box .link-block .mark {
  font-size: var(--font-xl);
  font-weight: 500;
  color: white;
  background: #1A6DFF;
  padding: 2px 7px;
  border-radius: 24px;
}
.admin-guideRule-textbox .link-box .link-block .group-link {
  color: #1A6DFF;
  font-size: var(--font-md);
}
.admin-guideRule-textbox .message-box {
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #4d4d4d;
  background: white;
  line-height: 1.5;
  color: var(--cl-text-b-70);
}
.admin-guideRule-textbox .message-box .url-text {
  color: #1A6DFF;
  font-size: var(--font-md);
}

/* ------------------------------ 
 * 2305 admin page - 헤더, 탭박스
 --------------------------------*/
.admin-section-title {
  font-size: var(--font-5xl);
  font-weight: 700;
  padding: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-section-subtitle {
  font-size: var(--font-4xl);
  padding: 20px 20px;
  height: 80px;
  display: flex;
  align-items: center;
}

.admin_usersearch_container {
  display: flex;
  padding-left: 18px;
}
.admin_usersearch_container label {
  font-size: 15px;
}
.admin_usersearch_container input.admin_usersearch[type=radio] {
  -moz-appearance: auto !important;
       appearance: auto !important;
  -webkit-appearance: auto !important;
}
.admin_usersearch_container input.admin_usersearch[type=radio]:checked, .admin_usersearch_container input.admin_usersearch[type=radio]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.admin_usersearch_container input.admin_usersearch[type=radio]:checked + label, .admin_usersearch_container input.admin_usersearch[type=radio]:not(:checked) + label {
  position: relative;
  padding-left: 18px;
  padding-right: 15px;
  cursor: pointer;
  /* line-height: 20px; */
  display: inline-block;
  color: black;
}
.admin_usersearch_container input.admin_usersearch[type=radio]:checked + label:before, .admin_usersearch_container input.admin_usersearch[type=radio]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-radius: 100%;
  background: #fff;
}
.admin_usersearch_container input.admin_usersearch[type=radio]:checked + label:before {
  border: 2px solid var(--admin-maincolor);
  border-radius: 100%;
}
.admin_usersearch_container input.admin_usersearch[type=radio]:checked + label:after, .admin_usersearch_container input.admin_usersearch[type=radio]:not(:checked) + label:after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--admin-maincolor);
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  transition: all 0.2s ease;
}
.admin_usersearch_container input.admin_usersearch[type=radio]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
.admin_usersearch_container input.admin_usersearch[type=radio]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

.picslink,
.all_voltime,
.info_user1365 {
  border-radius: 15px;
  padding: 2px 8px;
  color: #9d9d9d;
  background: white;
}
.picslink.cert,
.all_voltime.cert,
.info_user1365.cert {
  background: #47c375;
  color: white;
  font-weight: 500;
}
.picslink.no_cert,
.all_voltime.no_cert,
.info_user1365.no_cert {
  background: rgb(182, 182, 182);
}
.picslink.no_reqpics,
.all_voltime.no_reqpics,
.info_user1365.no_reqpics {
  background: rgb(182, 182, 182);
  color: white;
}
.adm_snsReviewLists_section {
  margin-top: 40px;
}
.adm_snsReviewLists_section .adm_snsReviewLists_header {
  text-align: right;
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: 5px;
  background: rgba(240, 43, 103, 0.0588235294);
  border-radius: 12px;
  color: #515151;
  box-shadow: 0px 0px 2px 1px rgba(237, 20, 61, 0.1098039216);
  padding: 10px 20px;
}
.adm_snsReviewLists_section .adm_snsReviewLists_table {
  font-size: calc(0.3vw + 10px);
}
.adm_snsReviewLists_section .adm_snsReviewLists_table .guide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
  height: 175px;
  line-height: 2;
  font-size: 18px;
  padding: 40px;
  background: rgba(239, 239, 239, 0.6117647059);
  border-radius: 13px;
}

.adm_statLists_section {
  display: none;
}
.adm_statLists_section.active {
  display: block;
}
.adm_statLists_section .adm_statLists_header {
  text-align: right;
  font-size: var(--font-lg);
  font-weight: 700;
  margin-bottom: 5px;
  background: var(--admin-mainbg);
  border-radius: 12px;
  color: var(--admin-maincolor);
  box-shadow: 0px 0px 2px 1px rgba(33, 150, 243, 0.1);
  padding: 10px 20px;
}
.adm_statLists_section .adm_statLists_table {
  font-size: var(--font-lg);
}
.adm_statLists_section .adm_statLists_table .guide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
  height: 175px;
  line-height: 2;
  font-size: 18px;
  padding: 40px;
  background: rgba(239, 239, 239, 0.6117647059);
  border-radius: 13px;
}

.admin_dummyGuide_common {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
  height: 175px;
  line-height: 2;
  font-size: 18px;
  padding: 40px;
  background: rgba(239, 239, 239, 0.6117647059);
  border-radius: 13px;
}

.admin_excel_access,
.admin_mapaccess,
.admin_statsaccess,
.admin_photoDownload,
.admin_effectDownload {
  padding: 7px 13px;
  color: white;
  font-weight: 600;
  font-size: var(--font-xl);
  background: black;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.15s;
}
.admin_excel_access:focus, .admin_excel_access:hover,
.admin_mapaccess:focus,
.admin_mapaccess:hover,
.admin_statsaccess:focus,
.admin_statsaccess:hover,
.admin_photoDownload:focus,
.admin_photoDownload:hover,
.admin_effectDownload:focus,
.admin_effectDownload:hover {
  color: white;
  transform: scale(1.05);
}

.admin-key-noline {
  width: 139px;
  position: relative;
}

.admin-key {
  width: 150px;
  border-bottom: 1px solid #dddddd;
  position: relative;
}

.admin-key70 {
  width: 75px;
  border-bottom: 1px solid #dddddd;
  position: relative;
}

.admin-key200 {
  width: 225px;
  border-bottom: 1px solid #dddddd;
  position: relative;
}

.admin-key300 {
  width: 300px;
  border-bottom: 1px solid #dddddd;
  position: relative;
}

.admin-key400 {
  width: 400px;
  border-bottom: 1px solid #dddddd;
  position: relative;
}

.admin-pics-view {
  width: 300px;
  height: 300px;
}

.admin-list-tab {
  color: #afafaf;
  /* background: #f1f1f1; */
  padding: 6px 12px;
  border: none;
  cursor: pointer;
}
.admin-list-tab.current {
  color: black;
  border: none;
}

.threedot-loadermodal,
.admin-threedot-loadermodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Stay in place */
  z-index: 1000;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: hidden;
  /* Enable scroll if needed */
}

/* ------------------------------ 
   * Loader 
   --------------------------------*/
.threedot-loader {
  display: inline-block;
  position: relative;
  width: 77px;
  height: 46px;
  background: #229dff;
  border-radius: 15px;
}
.threedot-loader.simple {
  background: none;
}
.threedot-loader.simple div {
  background: #229dff;
}
.threedot-loader.gray {
  background: none;
}
.threedot-loader.gray div {
  background: #5c5c5c;
}
.threedot-loader.green {
  background: none;
}
.threedot-loader.green div {
  background: #008040;
}
.threedot-loader div {
  position: absolute;
  top: 17px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.threedot-loader div:nth-child(1) {
  left: 8px;
  animation: threedot-loader1 0.6s infinite;
}
.threedot-loader div:nth-child(2) {
  left: 8px;
  animation: threedot-loader2 0.6s infinite;
}
.threedot-loader div:nth-child(3) {
  left: 32px;
  animation: threedot-loader2 0.6s infinite;
}
.threedot-loader div:nth-child(4) {
  left: 56px;
  animation: threedot-loader3 0.6s infinite;
}

@keyframes threedot-loader1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes threedot-loader3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes threedot-loader2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
/* ------------------------------ 
 *  
 --------------------------------*/
/* CSS for Skeleton Loading */
.feed-image-skeleton {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  /* Adjust this value based on your image aspect ratio */
  background-color: #f0f0f0;
  /* Placeholder color */
}

.feed-image-skeleton img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  /* Initially hide the actual image */
}

/* ------------------------------ 
 *  admin sub tab 
 --------------------------------*/
.admin-subtab-page-function {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
  cursor: pointer;
  font-size: var(--font-xl);
  position: relative;
  z-index: 50;
}
.admin-subtab-page-function .admin-subtab-func-style {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-subtab-page-function.right {
  margin-left: auto;
}
.admin-subtab-page-function.left {
  margin-right: auto;
}
.admin-subtab-page-function.current {
  display: flex;
}

.admin-subtab-page-content {
  animation: fadeIn 0.4s ease-in-out;
  display: none;
}
.admin-subtab-page-content.current {
  display: block;
}

/* ------------------------------ 
 * 멤버 프로필 미리보기 팝업 
 --------------------------------*/
.member-profile-preview-pop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
color:white .member-profile-preview-pop.open {
  display: flex;
}

/* ------------------------------ 
 * admin-plogphoto 
 --------------------------------*/
.adm-plogphoto-list .adm-plogphoto-userfeed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.adm-plogphoto-list .adm-plogphoto-userfeed .adm-plogphoto {
  width: 100%;
  height: 100%;
  padding: 1px;
  -o-object-fit: cover;
     object-fit: cover;
}

.adm-plogphoto-user {
  margin: 20px 0 10px 0;
  font-size: 18px;
  padding: 10px 0px;
  border-bottom: 1px solid gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ------------------------------ 
 *  noinfo_listmodal
 --------------------------------*/
.noinfo_listmodal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  margin: auto;
  bottom: 0;
  background: var(--admin-maincolor);
  z-index: 500;
  overflow: auto;
}
.noinfo_listmodal .info_title {
  font-size: var(--font-6xl);
  position: absolute;
  display: flex;
  text-align: center;
  top: 50px;
  left: 0;
  right: 0;
  color: white;
  letter-spacing: -1px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.noinfo_listmodal_contents {
  letter-spacing: 0.8px;
  background: white;
  color: black;
  font-size: var(--font-md);
  /* margin: 180px 0; */
  padding: 30px 30px;
  line-height: 1.5;
  text-align: right;
  height: -moz-fit-content;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-radius: 20px;
}

.noinfo_1365_search,
.noinfo_pics_search {
  padding: 10px 20px;
  color: var(--admin-maincolor);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.noinfo_1365_search:hover, .noinfo_1365_search:focus,
.noinfo_pics_search:hover,
.noinfo_pics_search:focus {
  background: var(--admin-mainbg);
}

.noinfo_listmodal_close {
  position: fixed;
  top: 50px;
  right: 50px;
  font-size: var(--font-7xl);
  cursor: pointer;
  z-index: 5;
  color: white;
}

/* ------------------------------ 
 * button spinner   js
 --------------------------------*/
.btn-progress-spinner {
  position: relative;
  margin: 0px auto;
  width: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn-progress-spinner:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.btn-progress-spinner .circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.btn-progress-spinner .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

/* ------------------------------ 
 * 관리자 페이지 - 페이징 
 --------------------------------*/
.pagination-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 20px 20px;
  font-size: var(--font-2xl);
  font-weight: 500;
  color: black;
}
.pagination-box .pagination-btn {
  padding: 5px 10px;
  color: black;
  font-weight: 600;
  font-size: var(--font-2xl);
  display: flex;
  align-items: center;
  border-radius: 30px;
  cursor: pointer;
}
.pagination-box .pagination-btn:focus, .pagination-box .pagination-btn:hover {
  background: lightgray;
}
.pagination-box .pagination-btn.disabled {
  color: black;
  opacity: 0.15;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-box .pagination-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pagination-box .pagination-group .pagination-bullet {
  padding: 1px 6px;
  color: black;
  opacity: 0.35;
  font-weight: 500;
  font-size: var(--font-2xl);
  border-radius: 10px;
  cursor: pointer;
}
.pagination-box .pagination-group .pagination-bullet.active {
  color: var(--admin-maincolor);
  opacity: 1;
  font-weight: 600;
  border: 2px solid var(--admin-maincolor);
}
.pagination-box .pagination-group .pagination-bullet:focus, .pagination-box .pagination-group .pagination-bullet:hover {
  background: rgb(223, 223, 223);
}

/* ------------------------------ 
 * 상단으로 가기 버튼
 --------------------------------*/
.btn_gotoTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: var(--admin-maincolor);
  color: #fff;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.btn_gotoTop.show {
  display: flex;
}
@media screen and (min-width: 992px) {
  .btn_gotoTop {
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
  }
}

/* ------------------------------ 
 * analytics (ITA 관리자 만)
 --------------------------------*/
.anal-section {
  overflow: auto;
}

.anal_period_pick_container input[type=date] {
  outline: none;
}
.anal_period_pick_container input[type=date]::-webkit-calendar-picker-indicator {
  font-size: var(--font-md);
  display: block;
  cursor: pointer;
}
.anal_period_pick_container input[type=date]::-webkit-calendar-picker-indicator:focus, .anal_period_pick_container input[type=date]::-webkit-calendar-picker-indicator:hover {
  background-color: white;
}

input.anal_periodpick {
  outline: none;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 10px 20px;
  margin: 0 8px;
  color: black;
  font-weight: 600;
  height: 40px;
  width: 175px;
  border: 1px solid gainsboro;
  border-radius: 20px;
  transition: all 0.15s;
  font-size: var(--font-lg);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
input.anal_periodpick::-moz-placeholder {
  color: gray;
}
input.anal_periodpick::placeholder {
  color: gray;
}
input.anal_periodpick:focus, input.anal_periodpick:hover {
  border: 2px solid rgb(0, 0, 0);
  outline: none;
}
input.anal_periodpick.user:focus, input.anal_periodpick.user:hover {
  border: 2px solid rgb(0, 0, 0);
  outline: none;
}
input.anal_periodpick:-internal-autofill-selected {
  background-color: gainsboro !important;
  box-shadow: 0 0 0 500px gainsboro inset !important;
  color: black !important;
}

select.anal_periodpick {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  text-align: center;
  padding: 10px 12px;
  margin: 0 8px;
  color: black;
  font-weight: 600;
  font-size: 14px;
  width: 80px;
  border: 2px solid black;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}
select.anal_periodpick::-moz-placeholder {
  color: gray;
}
select.anal_periodpick::placeholder {
  color: gray;
}
select.anal_periodpick:focus, select.anal_periodpick:hover {
  color: white;
  background: black;
  outline: none;
}
select.anal_periodpick.user:focus, select.anal_periodpick.user:hover {
  color: black;
  background: white;
  outline: none;
}
select.anal_periodpick:-internal-autofill-selected {
  background-color: gainsboro !important;
  box-shadow: 0 0 0 500px gainsboro inset !important;
  color: black !important;
}

.admin-tabbox-anal {
  display: flex;
  align-items: center;
  gap: 5px;
}
.admin-tabbox-anal .admin-sub-tab-anal {
  border-radius: 8px;
  font-size: var(--font-xl);
  background: var(--cl-baro-dark);
  padding: 6px 12px;
  color: black;
  cursor: pointer;
  background: none;
  opacity: 0.3;
  font-weight: 500;
}
.admin-tabbox-anal .admin-sub-tab-anal.current {
  opacity: 1;
  color: white;
  font-weight: 600;
  background: var(--cl-baro-dark);
}

/* ------------------------------ 
 *main-admin-search-screen
 --------------------------------*/
.main-admin-search-screen {
  width: 100%;
}
.main-admin-search-screen .searchgroup-content {
  display: none;
  width: 100%;
}
.main-admin-search-screen .searchgroup-content.active {
  display: block;
}
.main-admin-search-screen .group-listbox {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}
.main-admin-search-screen .group-listbox .group-list {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 6px;
  border-bottom: 1px solid gainsboro;
}
.main-admin-search-screen .group-listbox .group-list .logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid lightgrey;
}
.main-admin-search-screen .group-listbox .group-list .name {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 3px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.main-admin-search-screen .group-listbox .group-list .intro {
  font-size: var(--font-lg);
  font-weight: 400;
  opacity: 0.7;
  /* padding: 3px 0; */
  line-height: 1.4;
  margin: 2px 1px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 50%;
}
.main-admin-search-screen .group-listbox .group-list .counter-bullet {
  border-radius: 14px;
  padding: 2px 5px;
  position: absolute;
  left: -2px;
  top: -4px;
  background: var(--admin-maincolor);
  width: -moz-max-content;
  width: max-content;
  color: white;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  gap: 3px;
}
.main-admin-search-screen .group-listbox .group-list .counter-bullet .cssIcon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}
.main-admin-search-screen .group-listbox .group-list .account_id {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-0);
  opacity: 0.5;
}

/* ------------------------------ 
 * 검색창 
 --------------------------------*/
.search-inputBox {
  padding: 10px 0;
  justify-content: center;
  display: flex;
  align-items: center;
  position: relative;
}
.search-inputBox input.searchInput {
  border-radius: 10px;
  width: 100%;
  height: 50px;
  border: 1px solid #dddddd;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
}
.search-inputBox input.searchInput::-moz-placeholder {
  color: black;
  opacity: 0.5;
}
.search-inputBox input.searchInput::placeholder {
  color: black;
  opacity: 0.5;
}
.search-inputBox input.searchInput:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
.search-inputBox input.searchInput:-webkit-autofill, .search-inputBox input.searchInput:-webkit-autofill:hover, .search-inputBox input.searchInput:-webkit-autofill:focus, .search-inputBox input.searchInput:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
.search-inputBox .search-allIcon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-4xl);
  border-radius: 50%;
}

.search_csv_byperson {
  height: 37px;
  width: 146px;
  margin: auto 15px;
  border: none;
  padding: 10px;
  font-size: 15px;
  /* background: #3235b3; */
  color: #3235b3;
  border: 1px solid #3235b3;
  border-radius: 10px;
}

.search_csv_byperson_submit {
  font-size: 25px;
  cursor: pointer;
  color: #3235b3;
  margin: auto;
}

/* ------------------------------ 
 *  volpics-link-modal
 --------------------------------*/
.volpics-link-modal {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  /* padding: 5px; */
  right: 0;
  bottom: 0;
  margin: auto;
  /* padding: 20px 0; */
  align-items: center;
  justify-content: center;
  /*top: 0;
  */
  /*right: 0;
  */
  z-index: 200;
  /* transition: background 1s; */
}
.volpics-link-modal .volpics-link-modal-contents {
  position: relative;
  background: black;
  padding: 60px 25px;
  max-width: 80%;
  overflow-x: auto;
  height: -moz-max-content;
  height: max-content;
  border-radius: 10px;
}
.volpics-link-modal .volpics-link-img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.volpics-link-modal .volpics-link-img:empty {
  background: gainsboro;
}
.volpics-link-modal .volpics-link-img-title {
  position: absolute;
  font-size: var(--font-xl);
  left: 0;
  right: 0;
  bottom: 25px;
  width: 100%;
  margin: auto;
  color: white;
  text-align: center;
}
.volpics-link-modal .volpics-link-down {
  position: absolute;
  top: 16px;
  right: 60px;
  font-size: var(--font-6xl);
  cursor: pointer;
  z-index: 5;
  color: white;
}
.volpics-link-modal .volpics-link-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: var(--font-6xl);
  cursor: pointer;
  z-index: 5;
  color: white;
}

/* ------------------------------ 
 *  signdoc-link-modal
 --------------------------------*/
.signdoc-link-modal {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.4s ease-in-out;
  background: var(--admin-maincolor);
  z-index: 200;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  /* transition: background 1s; */
}
.signdoc-link-modal .signdoc-link-img {
  background: white;
  cursor: pointer;
  height: 100%;
}
.signdoc-link-modal .signdoc-link-img:empty {
  background: rgb(0, 163, 27);
}
.signdoc-link-modal .signdoc-link-img-title {
  position: fixed;
  top: 54px;
  font-size: 18px;
  left: 50px;
  margin: auto;
  color: white;
  text-align: center;
}
.signdoc-link-modal .signdoc-link-down {
  position: absolute;
  top: 19.2px;
  right: 77.2px;
  font-size: var(--font-7xl);
  cursor: pointer;
  z-index: 5;
  color: white;
}
.signdoc-link-modal .signdoc-link-modal-close {
  position: absolute;
  top: 18.2px;
  right: 18.2px;
  font-size: var(--font-7xl);
  cursor: pointer;
  z-index: 5;
  color: white;
}

/* ------------------------------ 
 * * * * * * * * * * * * * * * * *
 * 쓰레기 뉴스 
 * *  
 --------------------------------*/
.admin_pics_link {
  line-height: 1;
  margin: 2px;
  font-size: 11px;
  width: 20px;
  height: 20px;
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
  border-radius: 50%;
  display: inline-flex;
  background: var(--admin-maincolor);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
}

/* ------------------------------ 
 * utility 
 --------------------------------*/
.admin_card_basic {
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1019607843);
  margin: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  width: 100%;
  line-height: 1.8;
  transition: all 0.15s;
  min-height: 350px;
}
.admin_card_basic:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
}
.admin_card_basic .admin_card_title {
  font-size: var(--font-5xl);
  font-weight: 600;
  margin-bottom: 15px;
}
.admin_card_basic .admin_card_desc {
  font-size: var(--font-xl);
  font-weight: 400;
  color: #333;
}
.admin_card_basic .admin_card_icon .cssIcon {
  width: 40px;
  height: 40px;
}

.main-admin-authentication-screen {
  padding: var(--nie-main-padding);
  background: var(--nie-cl-blue-10);
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
}
.main-admin-authentication-screen.dark {
  background: black;
  color: white;
}
.main-admin-authentication-screen .header {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  background-color: var(--nie-cl-orange);
  color: white;
  height: 50px;
  padding: 0 30px;
}
.main-admin-authentication-screen .header .title {
  font-size: var(--font-3xl);
  font-weight: bold;
}
.main-admin-authentication-screen .header .title .help {
  font-size: var(--font-xl);
  cursor: pointer;
  padding: 0 2px;
}
.main-admin-authentication-screen .header .date {
  font-size: var(--font-xl);
}
.main-admin-authentication-screen .header.dark {
  background-color: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.231372549);
  color: white;
}
.main-admin-authentication-screen .storeinfo-box {
  padding: 20px 20px;
  text-align: center;
  box-shadow: 0px 0px 12px 1px rgba(120, 120, 120, 0.144);
  margin: 30px 0;
  background-color: white;
  border-radius: 8px;
}
.main-admin-authentication-screen .storeinfo-box.dark {
  padding: 20px 20px;
  text-align: center;
  border-radius: 12px;
  /* box-shadow: 0px 0px 1px 1px rgb(255 255 255 / 16%); */
  margin: 20px 0;
  background-color: #2392ff;
  color: black;
}
.main-admin-authentication-screen .storeinfo-box .banner-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.main-admin-authentication-screen .storeinfo-box .banner-box .logo {
  padding: 10px 0;
  width: 130px;
  height: -moz-max-content;
  height: max-content;
}
.main-admin-authentication-screen .storeinfo-box .banner-box .name {
  padding: 5px 0;
  font-size: var(--font-6xl);
  font-weight: bold;
  padding: 10px 0;
}
.main-admin-authentication-screen .storeinfo-box .reward {
  padding: 5px 0;
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 10px 0;
}
.main-admin-authentication-screen .reward-datalist-refresh {
  margin: 10px 0;
  margin-left: auto;
}
.main-admin-authentication-screen .reward-search-box {
  background: white;
  z-index: 5;
  position: sticky;
  top: 0;
  padding: 10px 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 3fr 1fr;
}
.main-admin-authentication-screen .reward-search-box.dark {
  background: black;
}
.main-admin-authentication-screen .reward-search-box input.reward-search-input {
  width: 100%;
  padding: 0 10px;
  font-size: var(--font-xl);
  font-weight: 500;
  border: 1px solid var(--cl-text-b-120);
  border-radius: 6px;
}
.main-admin-authentication-screen .reward-search-box input.reward-search-input.dark {
  background: var(--nie-cl-white-10);
  color: white;
  border: 1px solid var(--nie-cl-white-40);
}
.main-admin-authentication-screen .reward-search-box input.reward-search-input.dark::-moz-placeholder {
  color: var(--nie-cl-white-40);
}
.main-admin-authentication-screen .reward-search-box input.reward-search-input.dark::placeholder {
  color: var(--nie-cl-white-40);
}
.main-admin-authentication-screen .reward-search-box input.reward-search-input::-moz-placeholder {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-admin-authentication-screen .reward-search-box input.reward-search-input::placeholder {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-120);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-admin-authentication-screen .reward-search-box .reward-search-btn {
  width: 100%;
  height: 40px;
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--nie-cl-orange);
  background: white;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.main-admin-authentication-screen .reward-datalist-box {
  z-index: 1;
  position: relative;
  padding: 20px 15px;
  margin: 20px 0;
  border-radius: 8px;
}
.main-admin-authentication-screen .reward-datalist-box.dark {
  background: var(--nie-cl-white-10);
  color: white;
}
.main-admin-authentication-screen .reward-datalist-box .rw-list {
  display: grid;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px dashed var(--nie-cl-white-40);
  font-size: var(--font-xl);
  gap: 20px;
  align-items: center;
  justify-items: flex-start;
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .idkey {
  font-size: var(--font-3xl);
  font-weight: 700;
  white-space: nowrap;
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .toggle-btn {
  font-size: var(--font-sm);
  color: white;
  font-weight: 400;
  padding: 2px;
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .toggle-btn::after {
  content: "▼";
  font-size: var(--font-xl);
  font-weight: 700;
  white-space: nowrap;
  color: var(--cl-text-b-120);
  cursor: pointer;
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .toggle-btn.active::after {
  content: "▲";
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .item {
  font-size: var(--font-xl);
  opacity: 0.3;
  font-weight: normal;
  font-size: var(--font-md);
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .item.on {
  opacity: 1;
  font-weight: bold;
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .item span.num {
  color: var(--nie-cl-orange);
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .got-list {
  display: none;
  width: 100%;
  gap: 10px;
  padding: 2px 0;
  font-size: var(--font-md);
  color: var(--cl-text-b-120);
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .got-list .item-exist {
  color: var(--nie-cl-orange);
  font-weight: bold;
}
.main-admin-authentication-screen .reward-datalist-box .rw-list .got-list.active {
  display: flex;
  flex-direction: column;
}
.main-admin-authentication-screen .passward {
  padding: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  border-radius: 8px;
}
@media screen and (min-width: 992px) {
  .main-admin-authentication-screen .passward {
    width: 30%;
    margin: auto;
  }
}
.main-admin-authentication-screen .passward .admin-login {
  width: 100%;
}
.main-admin-authentication-screen .passward.dark {
  background: var(--nie-cl-white-10);
  color: white;
}
.main-admin-authentication-screen .passward label {
  display: block;
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 10px 0;
}
.main-admin-authentication-screen .passward input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: var(--font-2xl);
  font-weight: 500;
  border: 1px solid var(--cl-text-b-120);
  border-radius: 6px;
}

/* ------------------------------ 
 * 반려해변 
 --------------------------------*/
.ab_stat_dashboard {
  display: flex;
  margin: 20px;
}

.ab_stat_tabs {
  width: 150px;
  border-right: 1px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
}

.ab_stat_tab {
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  border: none;
  border-radius: 5px;
  background-color: #f8f9fa;
  color: #000000;
  cursor: pointer;
  text-align: left;
  font-weight: 400;
  opacity: 0.7;
  transition: background-color 0.3s, color 0.3s;
  -moz-transition: background-color 0.3s, color 0.3s;
  -ms-transition: background-color 0.3s, color 0.3s;
  -o-transition: background-color 0.3s, color 0.3s;
}

.ab_stat_tab.active {
  background-color: #007bff;
  color: #fff;
  font-weight: 600;
  opacity: 1;
}

.ab_stat_content {
  flex: 1;
  padding: 0 20px;
  box-sizing: border-box;
}

.ab_stat_sigtabs {
  display: flex;
  margin-bottom: 20px;
}

.ab_stat_sigtab_container {
  width: 150px;
  border-right: 1px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
}

.ab_stat_sig_tab {
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  border: none;
  background-color: #f8f9fa;
  color: #000000;
  cursor: pointer;
  text-align: left;
  font-weight: 400;
  opacity: 0.7;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  -moz-transition: background-color 0.3s, color 0.3s;
  -ms-transition: background-color 0.3s, color 0.3s;
  -o-transition: background-color 0.3s, color 0.3s;
}

.ab_stat_sig_tab.active {
  background-color: #007bff;
  color: #fff;
  font-weight: 600;
  opacity: 1;
}

.ab_stat_sigcontent {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

.css-right-panel {
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
  width: 100%;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}
.css-right-panel.open {
  display: block;
}

.basic-bullet {
  padding: 2px 6px;
  width: -moz-max-content;
  width: max-content;
  color: #4caf50;
  border: 1px solid #4caf50;
  border-radius: 4px;
}
.basic-bullet.fill {
  background: #4caf50;
  color: white;
}

.ab-progress-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin: 20px 0;
}
.ab-progress-container .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1;
}
.ab-progress-container .step span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ccc;
  color: #ccc;
  font-weight: bold;
}
.ab-progress-container .step p {
  margin-top: 7px;
  font-size: var(--font-md);
  color: #555;
  font-weight: 400;
}
.ab-progress-container .step.completed span {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
}
.ab-progress-container .step.completed p {
  color: #4caf50;
  font-weight: 600;
}
.ab-progress-container .line {
  height: 1px;
  width: 100%;
  background-color: #ccc;
  position: relative;
  top: 15px;
  flex: 1;
}
.ab-progress-container .line.completed {
  background-color: #4caf50;
}

.ab-event-timeline {
  position: relative;
  margin: 20px 0;
  padding-left: 10px;
  font-size: var(--font-md);
}
.ab-event-timeline .timeline-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 10px;
}
.ab-event-timeline .timeline-item .circle {
  position: absolute;
  left: -9px;
  top: 0;
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.ab-event-timeline.completed .circle {
  background-color: #4caf50;
  border-color: #4caf50;
}

/* ------------------------------ 
 * 홈 피드 
 --------------------------------*/
/* ------------------------------ 
* HOME 홈 - 매거진 메인 
--------------------------------*/
.main-home-container {
  overflow-x: hidden;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .main-home-container {
    max-width: var(--pc-body-max-wd);
    margin: 0 auto;
  }
}

/* ------------------------------ 
   * 아티클 
   --------------------------------*/
.article-container {
  padding: 5px 0 10px 0px;
  width: 100%;
}
.article-container.no-horizontal-padding {
  padding: 0px 0;
}
.article-container .article-title {
  font-size: var(--font-4xl);
  font-weight: 700;
  padding: 12.5px 10px 7.5px 15px;
  color: var(--cl-text-b-40);
  display: flex;
  align-items: center;
}

.text-gradient-1 {
  background: linear-gradient(to right, #5356FF, #74E291);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-2 {
  background: linear-gradient(to right, #073e9d, #00ff95);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-3 {
  background: linear-gradient(to right, #006104, #00a407);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-4 {
  background: linear-gradient(90deg, #f200ff, #7800ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feed-spacing-px-10:first-child {
  padding-left: 10px;
}
.feed-spacing-px-10:last-child {
  padding-right: 10px;
}

.feed-spacing-px-3:first-child {
  padding-left: 3px;
}
.feed-spacing-px-3:last-child {
  padding-right: 3px;
}

/* ------------------------------ 
* rank-profile-tab 
--------------------------------*/
.rank-profile-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-icon {
  width: 70px;
  height: 70px;
  border-radius: 4%;
}

/* ------------------------------ 
   * 콘텐츠 피드 박스 
   --------------------------------*/
.contents-feedbox {
  padding: 0px 0px;
}
.contents-feedbox.view-more-grid {
  display: grid;
  grid-template-columns: 1fr 100px;
}

.grid-viewmore-right {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 10px;
}
.grid-viewmore-right.g-content {
  grid-column: 1/2;
}
.grid-viewmore-right.g-viewmore {
  grid-column: 2/3;
}

/* ------------------------------ 
      * 이타뉴스 
      --------------------------------*/
/* 공통 figure 스타일 */
figure.itanews_feed {
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
  /* 항상 가로 폭 100% 유지 */
  background-color: #f0f0f0;
  /* 이미지 없을 때 배경 색(필요시) */
}

/* 이미지 기본 스타일 */
.itanews_feed_img {
  width: 100%;
  /* PC 기본: 가로100% */
  height: auto;
  /* 비율 유지 */
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  position: static;
  max-width: 100%;
}

/* PC (768px 이상) */
@media (min-width: 768px) {
  figure.itanews_feed {
    /* width: 100% 유지 (부모 max-width 768px 적용) */
    height: auto;
    /* 높이는 자동 */
  }
  .itanews_feed_img {
    height: auto;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
/* 모바일 (767px 이하) */
@media (max-width: 767px) {
  figure.itanews_feed {
    width: 100%;
    /* 가로 폭 100% 유지 */
    /* 고정 높이 */
  }
  .itanews_feed_img {
    /* 고정 높이 */
    width: auto;
    /* 비율 유지하며 자동 너비 */
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100%;
    /* 혹시 넘치는걸 방지 */
    margin: 0 auto;
    /* 가운데 정렬 */
    display: block;
  }
}
/* ------------------------------ 
  * 순위 
  --------------------------------*/
.rank-section {
  display: flex;
  justify-content: space-between;
}
.rank-section .tab {
  display: flex;
  gap: 10px;
}
.rank-section .tab .tab-item {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--cl-text-b-40);
  padding: 10px 0;
  cursor: pointer;
}
.rank-section .tab .tab-item.active {
  color: var(--nie-cl-orange);
  border-bottom: 2px solid var(--nie-cl-orange);
}

/* ------------------------------ 
 * 홈 피드 그리드타입  24-05-15 
 --------------------------------*/
.home-trashnews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (min-width: 767px) {
  .home-trashnews-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* ------------------------------ 
     * 쓰레기 뉴스 피드 
     --------------------------------*/
figure.trashnews_feed {
  margin: 0 !important;
  width: 100%;
  /* 이미지의 가로 크기와 동일하게 설정 */
  height: 0;
  padding-top: 150%;
  position: relative;
  /* figure 요소 내부의 절대 위치된 요소를 위해 필요합니다 */
  overflow: hidden;
  border-radius: 4.2px;
}
@media screen and (min-width: 992px) {
  figure.trashnews_feed {
    width: 100%;
  }
}
figure.trashnews_feed:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 1;
}
figure.trashnews_feed.sdgs0-13:after {
  background: linear-gradient(0deg, rgba(58, 82, 36, 0.75) 0%, rgba(0, 0, 0, 0) 70%);
}
figure.trashnews_feed.sdgs0-10:after {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 50%);
}
figure.trashnews_feed.top-gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 2;
}
figure.trashnews_feed .trashnews_feed_img {
  position: absolute;
  /* figure 요소 내부의 이미지를 절대 위치로 설정 */
  top: 0;
  /* 상단에 정렬 */
  left: 0;
  /* 좌측에 정렬 */
  width: 100%;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  height: 100%;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
}
figure.trashnews_feed .caption-box {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 100%;
  padding: 5px;
  color: white;
  z-index: 2;
}

.text-shadow-vague {
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.text-shadow-light {
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.text-shadow-medium {
  text-shadow: 0 0 8px #000000;
}

.loc-bullet {
  margin: 0 3px;
  padding: 2px 6px;
  color: var(--admin-maincolor);
  border: 1px solid var(--admin-maincolor);
  font-size: var(--font-lg);
  border-radius: 4.2px;
}
.loc-bullet.fill {
  background: var(--admin-maincolor);
  color: white;
}

.top-gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 50%);
  z-index: 2;
}

.ratio-1-2 {
  padding-top: 50% !important;
}

.ratio-1 {
  padding-top: 100% !important;
}

.ratio-2-1 {
  padding-top: 150% !important;
}

/* ------------------------------ 
  * 이미지 슬라이더 - 타입
 --------------------------------*/
.home-plogfeed-horizontal {
  white-space: nowrap;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-plogfeed-horizontal::-webkit-scrollbar {
  display: none;
}

/* ------------------------------ 
* 플로깅 피드 
--------------------------------*/
figure.horizontal-plogfeed {
  margin: 0 !important;
  width: 140px;
  height: 140px;
  position: relative;
  /* figure 요소 내부의 절대 위치된 요소를 위해 필요합니다 */
  overflow: hidden;
  border-radius: 4.2px;
  cursor: pointer;
}
figure.horizontal-plogfeed.square-lg {
  width: 210px;
  height: 280px;
}
figure.horizontal-plogfeed.w-full {
  width: 100%;
}
figure.horizontal-plogfeed .plogfeed_img {
  position: absolute;
  /* figure 요소 내부의 이미지를 절대 위치로 설정 */
  top: 0;
  /* 상단에 정렬 */
  left: 0;
  /* 좌측에 정렬 */
  width: 100%;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  height: 100%;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  -o-object-fit: cover;
  object-fit: cover;
}

/* ------------------------------ 
 * footer 
 --------------------------------*/
.home-footer-container .title {
  font-size: var(--font-xl);
  line-height: 1.7;
  font-weight: 600;
  padding: 20px 0 10px 0;
  color: var(--cl-text-b-40);
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-footer-container .desc {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 10px 0;
  color: var(--cl-text-b-40);
  white-space: pre-line;
}
.home-footer-container .why-itacity-exist {
  padding: 20px;
}
.home-footer-container .why-you-should-donate-this {
  padding: 10px 0;
}
.home-footer-container .how-to-become-contributor {
  padding: 10px 0;
}

/* ------------------------------ 
 * 홈 - 지역 마커 
 --------------------------------*/
.place-overlay {
  position: absolute;
  top: 7px;
  left: 5px;
  z-index: 3;
}

/* ------------------------------ 
 * 홈 - 라이크 버튼
 --------------------------------*/
.like-btnbox-overlay-tr {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.like-btnbox-overlay-br {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
}

.likebtn-basic {
  display: block;
  height: 30px;
  width: 30px;
  background-size: cover;
  cursor: pointer;
}
.likebtn-basic svg {
  fill: none;
  stroke: black;
}
.likebtn-basic.black-line svg {
  fill: none;
  stroke: black;
}
.likebtn-basic.white-line svg {
  fill: none;
  stroke: white;
}
.likebtn-basic.itared-fill svg {
  fill: var(--cl-ita-red-40);
  stroke: none;
}
.likebtn-basic.vague-fill svg {
  fill: var(--cl-text-b-200);
  stroke: none;
}
.likebtn-basic.green-fill svg {
  fill: var(--cl-ita-green);
  stroke: none;
}

.profile_style_insta {
  padding: 2px;
  background: linear-gradient(45deg, rgba(255, 0, 87, 0.5098039216), rgba(92, 0, 255, 0.7019607843));
  border-radius: 50%;
}

.profile_style_black {
  padding: 2px;
  background: linear-gradient(45deg, rgba(255, 0, 87, 0.5098039216), rgba(92, 0, 255, 0.7019607843));
  border-radius: 50%;
}

.profile_style_green {
  padding: 2px;
  background: linear-gradient(137deg, #ffffff, #008705);
  border-radius: 50%;
}

.profile_style_bluesky {
  padding: 2px;
  background: linear-gradient(137deg, #ffffff, #0084fc);
  border-radius: 50%;
}

.trashnews-postbox {
  position: relative;
  background: white;
  border-radius: 4.2px;
  border: 1px solid var(--cl-text-b-200);
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  margin-bottom: 10px;
  width: 80%;
  height: 420px;
  white-space: normal;
}
@media screen and (min-width: 767px) {
  .trashnews-postbox {
    width: 300px;
  }
}

.tn-post-tag-style {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: 400;
  opacity: 1;
  padding: 3px 3px;
  letter-spacing: -0.3px;
  color: var(--cl-text-b-40);
}

.swiper-slide.max {
  width: -moz-max-content;
  width: max-content;
}
.swiper-slide.fade {
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
}
.swiper-slide.swiper-slide-active {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
}

/* ------------------------------ 
 * stats 
 --------------------------------*/
.stats-container {
  display: flex;
  justify-content: space-between;
  height: 150px;
  padding: 0 12px;
  width: 100%;
  position: relative;
  border-radius: 4.2px;
  background: var(--back-vaguegray);
}
.stats-container .sdgs-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (min-width: 767px) {
  .stats-container .sdgs-banner {
    width: 150px;
    height: 150px;
  }
}
.stats-container .kpi-index {
  font-size: var(--font-xl);
  margin-bottom: 8px;
  opacity: 1;
  font-weight: 600;
  color: black;
  margin-left: auto;
  width: -moz-max-content;
  width: max-content;
}
.stats-container .kpi-val {
  font-weight: 100;
  font-family: "Roboto", "pretendard";
  color: black;
  opacity: 1;
  font-size: var(--font-10xl);
  margin: 0;
  letter-spacing: -0.4px;
}
.stats-container .kpi-val-unit {
  font-size: var(--font-lg);
  color: black;
}

.home-kpi-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.home-kpi-digit,
.home-kpi-comma {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0.2px;
  color: #000000;
  font-weight: 700;
  font-size: var(--font-xl);
}

.home-kpi-comma {
  width: 2px;
  color: #000000;
  background-color: transparent;
  /* Smaller width for commas */
}

.itastory-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 767px) and (max-width: 991px) {
  .itastory-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }
}
@media screen and (min-width: 992px) {
  .itastory-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
  }
}
.itastory-content .itastory-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* ------------------------------ 
     * 이미지  
     --------------------------------*/
}
.itastory-content .itastory-item .itastory-imgSwiper-box {
  width: 100%;
  height: 100%;
  position: relative;
  /* ------------------------------ 
      * 이미지 슬라이더 
      --------------------------------*/
  /* ------------------------------ 
      * 이미지 슬라이더 - 페이징 
      --------------------------------*/
  /* ------------------------------ 
        * main-btag 표시 
       --------------------------------*/
  /* ------------------------------ 
        * 더보기 버튼 
       --------------------------------*/
  /* ------------------------------ 
      * 좋아요/댓글 
      --------------------------------*/
}
.itastory-content .itastory-item .itastory-imgSwiper-box .itastory_img_swiper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .itastory_img_swiper figure.itastory {
  margin: 0 0 0px 0 !important;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* ------------------------------ 
    *  수직 이미지 
    --------------------------------*/
}
.itastory-content .itastory-item .itastory-imgSwiper-box .itastory_img_swiper figure.itastory .itastory_img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .itastory_img_swiper figure.itastory .itastory_img.loaded {
  display: block;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .itastory_img_swiper figure.itastory.vertical {
  height: 0;
  padding-top: 150%;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .itastory_img_swiper figure.itastory.vertical .itastory_img {
  position: absolute;
  top: 0;
  left: 0;
  /* figure 요소 내부의 이미지를 가득 채우도록 설정 */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .itastory_img_swiper figure.itastory.vertical .itastory_img.loaded {
  display: block;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .swiper-pagination-itastory {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 5px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .swiper-pagination-itastory .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  /* padding: 3px 1px; */
  margin: 0 2.5px;
  display: inline-block;
  font-weight: 700;
  opacity: 1;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  outline: none;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .swiper-pagination-itastory .swiper-pagination-bullet:hover, .itastory-content .itastory-item .itastory-imgSwiper-box .swiper-pagination-itastory .swiper-pagination-bullet:focus {
  outline: none;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .swiper-pagination-itastory .swiper-pagination-bullet-active {
  background: white;
  opacity: 1;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .main-btag-box {
  z-index: 5;
  position: absolute;
  bottom: 18px;
  left: 10px;
  color: white;
  font-size: var(--font-lg);
  font-weight: 500;
  align-items: center;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .see-more {
  z-index: 5;
  position: absolute;
  bottom: 0px;
  right: 0px;
  flex-direction: column;
  gap: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: var(--font-xl);
  margin: 20px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  width: -moz-max-content;
  width: max-content;
  height: 30px;
  /* border-radius: 7px; */
  background: rgba(255, 255, 255, 0.144);
  border-radius: 30px;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .engagement-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 0;
}
.itastory-content .itastory-item .itastory-imgSwiper-box .engagement-box .numStyle {
  font-size: var(--font-4xl);
  color: var(--cl-text-b-70);
}
.itastory-content .itastory-item .like-comment-box {
  display: flex;
  align-items: center;
  gap: 15px;
}
.itastory-content .itastory-item .like-comment-box .item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.itastory-content .itastory-item .like-comment-box .item .num {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--cl-text-b-70);
}

/* ------------------------------ 
 * 지구펀딩
 --------------------------------*/
.env-team-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
}

.env-team-card-link {
  display: block;
  width: 360px;
  min-width: 180px;
  text-decoration: none;
}
.env-team-card-link:hover .env-team-card {
  box-shadow: 0 10px 38px 0 rgba(33, 63, 67, 0.4392156863);
}
.env-team-card-link:active {
  transform: translateY(1.5px);
}

.env-team-card {
  background: #f3f7fa;
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(10, 30, 36, 0.12);
  overflow: hidden;
  min-height: 220px;
}

.env-team-card-imgbox {
  position: relative;
  width: 100%;
  height: 220px;
  background: #ddece6;
}
.env-team-card-imgbox img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.env-team-card-imgbox .env-team-card-gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(8, 18, 28, 0.23) 0%, rgba(6, 16, 26, 0.1) 45%, rgba(31, 86, 99, 0.35) 93%, rgba(30, 46, 60, 0.44) 100%);
  z-index: 1;
  pointer-events: none;
}
.env-team-card-imgbox .env-team-card-innerbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 0 6px 0;
  pointer-events: none;
}
.env-team-card-imgbox .env-team-card-title {
  font-size: 1.7em;
  font-weight: 500;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 6px 30px rgba(10, 16, 50, 0.1764705882), 0 1px 3px rgba(0, 0, 0, 0.1529411765);
  margin-bottom: 11px;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.env-team-card-imgbox .env-team-card-reserve {
  font-size: 2em;
  font-weight: 700;
  color: #4AFE98;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 6px 30px rgba(10, 16, 50, 0.1764705882), 0 1px 3px rgba(0, 0, 0, 0.1529411765);
  margin-bottom: 11px;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.env-team-card-imgbox .env-team-card-perc {
  font-size: 2.1em;
  font-weight: 800;
  color: white;
  letter-spacing: -2.4px;
  margin-bottom: 18px;
  text-shadow: 1px 4px 14px rgba(13, 68, 104, 0.8156862745);
  text-align: right;
  margin-left: auto;
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.env-team-card-imgbox .env-team-card-barbg {
  width: 90%;
  height: 8px;
  border-radius: 8px;
  background: #ebebeb;
  overflow: hidden;
  margin-bottom: 9px;
}
.env-team-card-imgbox .env-team-card-barbg .env-team-card-bar {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #21abf2 61%, #22dedf 100%);
  transition: width 0.5s;
}
.env-team-card-imgbox .env-team-card-inv {
  color: #f7fcff;
  font-size: 1.14em;
  font-weight: 400;
  margin-top: 3px;
  text-shadow: 0 1px 7px rgba(0, 38, 58, 0.6);
  opacity: 0.97;
  letter-spacing: 0.2px;
  padding-bottom: 2px;
  text-align: center;
}

.env-loading-msg,
.env-error-msg,
.env-null-msg {
  color: #888;
  width: 100%;
  text-align: center;
  margin: 32px 0;
}

.env-error-msg {
  color: #b31212;
}

.env-null-msg {
  color: #729080;
}

@media (max-width: 900px) {
  .env-team-cards {
    gap: 13px;
  }
  .env-team-card-link {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .env-team-cards {
    flex-direction: column;
    gap: 9px;
  }
  .env-team-card {
    min-width: 120px;
  }
  .env-team-card-imgbox {
    height: auto;
  }
}
.env-detail-root {
  max-width: 600px;
  margin: 0px auto;
}

.env-detail-card {
  background: #f5fafc;
  border: 1.5px solid #d1e7d9;
  box-shadow: 0 8px 32px rgba(34, 57, 93, 0.062745098);
  border-radius: 22px;
  overflow: hidden;
  padding-bottom: 33px;
}

.env-detail-imgbox {
  position: relative;
  width: 100%;
  height: 260px;
  background: #ddece6;
}
.env-detail-imgbox img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.env-detail-imgbox .env-detail-gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(16, 28, 34, 0.32) 0%, rgba(31, 86, 99, 0.29) 52%, rgba(30, 46, 60, 0.57) 100%);
  z-index: 1;
  pointer-events: none;
}
.env-detail-imgbox .env-detail-absbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 34px;
  pointer-events: none;
}
.env-detail-imgbox .env-detail-title {
  font-size: 2.3em;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1.2px;
  margin-bottom: 16px;
  text-shadow: 0 8px 33px rgba(35, 86, 135, 0.2666666667), 0 1px 3px rgba(0, 0, 0, 0.1960784314);
  background: rgba(38, 59, 99, 0.06);
  padding: 5px 24px 1px 24px;
  border-radius: 9px;
  max-width: 88%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.env-detail-imgbox .env-detail-perc {
  font-size: 2.5em;
  font-weight: 800;
  color: #4edef6;
  margin-bottom: 17px;
  text-shadow: 1px 8px 25px rgba(13, 40, 80, 0.7215686275);
  text-align: center;
}
.env-detail-imgbox .env-detail-barbg {
  width: 87%;
  height: 17px;
  border-radius: 9px;
  background: #e9eff7;
  overflow: hidden;
  margin-bottom: 11px;
}
.env-detail-imgbox .env-detail-barbg .env-detail-bar {
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(90deg, #1cbbee 72%, #19ddaa 100%);
  transition: width 0.5s;
}
.env-detail-imgbox .env-detail-inv {
  color: #f2fcff;
  font-size: 1.14em;
  font-weight: 400;
  margin-top: 1px;
  text-shadow: 0 1px 7px rgba(16, 38, 51, 0.7294117647);
  opacity: 0.96;
  letter-spacing: 0.1px;
  padding-bottom: 4px;
  text-align: center;
}

.env-detail-meta {
  margin: 27px 13px 5px 13px;
}
.env-detail-meta .env-detail-tag {
  display: inline-block;
  background: #e7f7ff;
  color: #127fc9;
  border-radius: 7px;
  padding: 3px 17px;
  font-weight: 600;
  font-size: 1em;
  margin-right: 8px;
}
.env-detail-meta .env-detail-location {
  font-size: 1em;
  color: #2d948e;
  background: #eafdfa;
  border-radius: 7px;
  padding: 2px 10px;
}

.env-detail-section {
  margin: 18px 22px 0 22px;
  font-size: 1.08em;
  color: #242a30;
  line-height: 1.7;
  white-space: pre-line;
  word-break: keep-all;
}

.ecoin-btn.selected {
  background: #19d29d;
  color: #fff;
  font-weight: 700;
}

@media (max-width: 767px) {
  .env-detail-root {
    max-width: 100vw;
  }
  .env-detail-card {
    padding-bottom: 18px;
  }
  .env-detail-imgbox {
    height: 180px;
  }
  .env-detail-title {
    font-size: 1.33em;
  }
  .env-detail-perc {
    font-size: 1.4em;
  }
}
.wvc24-container {
  font-weight: 400;
}
.wvc24-container .main-tab-content,
.wvc24-container .sub-tab-content {
  display: none;
}
.wvc24-container .main-tab {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin: 5px;
  color: #7a7a7a;
  list-style: none;
  display: flex;
  font-weight: 400;
}
.wvc24-container .main-tab.selected {
  background: rgb(0, 0, 0);
  color: white;
  font-weight: 600;
}
.wvc24-container .sub-tab {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin: 5px;
  color: #7a7a7a;
  list-style: none;
  display: flex;
  font-weight: 400;
}
.wvc24-container .sub-tab.selected {
  border: 1px solid #d20b55;
  color: #d3175d;
  font-weight: 600;
}
.wvc24-container textarea.wvc-textarea {
  background: rgba(210, 11, 85, 0.031372549);
  letter-spacing: 0;
  color: black;
  border: 1px solid #d20b55;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
}
.wvc24-container textarea.wvc-textarea::-moz-placeholder {
  color: #7a7a7a;
}
.wvc24-container textarea.wvc-textarea::placeholder {
  color: #7a7a7a;
}

button.nostyle {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.fm-pt {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}

.fm-ns {
  font-family: "Noto Sans KR", sans-serif;
}

.fm-ns-13 {
  font-family: "Noto Sans KR", sans-serif;
  letter-spacing: -1.3px;
}

.fm-ns-b {
  font-family: "NotoSansKR-B";
}

.ns-m {
  font-family: "NotoSansKR-M";
}

.fm-fut-l {
  font-family: "Futura-Light";
}

.fm-fut-b {
  font-family: "Futura-Bold";
}

.fm-osw {
  font-family: "Oswald", sans-serif;
}

.fm-ro {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
}

.fm-ro2 {
  font-family: roboto;
  letter-spacing: -2.3px;
  font-weight: 100;
}

.fm-ant {
  font-family: "Anton", sans-serif;
  font-weight: lighter;
}

.clpoint {
  cursor: pointer;
  transition: all 1s;
}

.bottom-nav-container {
  display: grid;
  grid-template: "a b c d e" 1fr/1fr 1fr 1fr 1fr 1fr;
  font-size: 4vw;
  position: fixed;
  bottom: 0;
  background: white;
  width: 100%;
  left: 0;
  margin: auto;
  padding: 0 25px;
  height: 60px;
  right: 0;
  z-index: 60;
}
.bottom-nav-container.off {
  display: none;
}
.bottom-nav-container.vague::before {
  background: linear-gradient(transparent, white);
  display: block;
  position: absolute;
  height: 30px;
  width: 100%;
  content: "";
  top: -30px;
}

.bottom-nav-container-new {
  display: flex;
  justify-content: flex-end;
  z-index: 30;
  font-size: 4vw;
  position: fixed;
  bottom: 0;
  right: 22px;
  background: transparent;
  width: 100%;
  height: 40px;
}
.bottom-nav-container-new.off {
  display: none;
}

.bottom-nav-container-new3 {
  display: flex;
  justify-content: flex-end;
  z-index: 30;
  font-size: 4vw;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  border-radius: 20px 20px 0 0;
  margin: auto;
  width: 90vw;
  height: 63px;
}
.bottom-nav-container-new3.off {
  display: none;
}

.show-grid {
  display: grid;
}

.main {
  width: 100%;
  height: 100vh;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.main-map,
.main-cert,
.main-basic,
.main-feed,
.main-house,
.main-rank,
.main-group,
.main-report,
.main-plog {
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  grid-template: "head" 50px "body" 1fr/1fr;
  display: grid;
  z-index: 50;
  position: fixed;
}
@media screen and (min-width: 992px) {
  .main-map,
  .main-cert,
  .main-basic,
  .main-feed,
  .main-house,
  .main-rank,
  .main-group,
  .main-report,
  .main-plog {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
  }
}
.main-map > .main-back,
.main-cert > .main-back,
.main-basic > .main-back,
.main-feed > .main-back,
.main-house > .main-back,
.main-rank > .main-back,
.main-group > .main-back,
.main-report > .main-back,
.main-plog > .main-back {
  grid-area: head;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 50px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 50;
}
.main-map .main-head,
.main-cert .main-head,
.main-basic .main-head,
.main-feed .main-head,
.main-house .main-head,
.main-rank .main-head,
.main-group .main-head,
.main-report .main-head,
.main-plog .main-head {
  grid-area: head;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3px;
  font-weight: 700;
  z-index: 30;
  background: white;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.main-map .main-head-right,
.main-cert .main-head-right,
.main-basic .main-head-right,
.main-feed .main-head-right,
.main-house .main-head-right,
.main-rank .main-head-right,
.main-group .main-head-right,
.main-report .main-head-right,
.main-plog .main-head-right {
  grid-area: head;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  font-size: var(--font-2xl);
  margin-right: 25px;
  z-index: 30;
}
.main-map .main-body,
.main-cert .main-body,
.main-basic .main-body,
.main-feed .main-body,
.main-house .main-body,
.main-rank .main-body,
.main-group .main-body,
.main-report .main-body,
.main-plog .main-body {
  grid-area: body;
  display: grid;
  background: white;
  grid-template: "tab" 50px "body" 1fr/1fr;
}
.main-map .main-body .g-tab,
.main-cert .main-body .g-tab,
.main-basic .main-body .g-tab,
.main-feed .main-body .g-tab,
.main-house .main-body .g-tab,
.main-rank .main-body .g-tab,
.main-group .main-body .g-tab,
.main-report .main-body .g-tab,
.main-plog .main-body .g-tab {
  grid-area: tab;
  display: flex;
  align-items: center;
}
.main-map .main-body .g-body,
.main-cert .main-body .g-body,
.main-basic .main-body .g-body,
.main-feed .main-body .g-body,
.main-house .main-body .g-body,
.main-rank .main-body .g-body,
.main-group .main-body .g-body,
.main-report .main-body .g-body,
.main-plog .main-body .g-body {
  grid-area: body;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 170px);
  position: relative;
}
.main-map .main-body .g-all,
.main-cert .main-body .g-all,
.main-basic .main-body .g-all,
.main-feed .main-body .g-all,
.main-house .main-body .g-all,
.main-rank .main-body .g-all,
.main-group .main-body .g-all,
.main-report .main-body .g-all,
.main-plog .main-body .g-all {
  grid-row: 1/-1;
  grid-column: 1/-1;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 120px);
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.main-map .main-body .g-all::-webkit-scrollbar,
.main-cert .main-body .g-all::-webkit-scrollbar,
.main-basic .main-body .g-all::-webkit-scrollbar,
.main-feed .main-body .g-all::-webkit-scrollbar,
.main-house .main-body .g-all::-webkit-scrollbar,
.main-rank .main-body .g-all::-webkit-scrollbar,
.main-group .main-body .g-all::-webkit-scrollbar,
.main-report .main-body .g-all::-webkit-scrollbar,
.main-plog .main-body .g-all::-webkit-scrollbar {
  display: none;
}

.certPage-tab-container,
.rankpage-tab-container,
.statsPage-tab-container,
.impactReport-tab-container,
.groupFriend-tab-container,
.plogtype-tab-container {
  padding: 3vw 20px;
  font-size: var(--font-lg);
}

.sharedFeed-tab-container,
.subtab-page-container {
  padding: 3vw 0vw;
  font-size: var(--font-lg);
}

.certPage-tab,
.rankpage-tab,
.statsPage-tab,
.impactReport-tab,
.sharedFeed-tab,
.groupFriend-tab,
.plogtype-tab {
  padding-right: 16px;
  color: rgb(160, 160, 160);
}
.certPage-tab.current,
.rankpage-tab.current,
.statsPage-tab.current,
.impactReport-tab.current,
.sharedFeed-tab.current,
.groupFriend-tab.current,
.plogtype-tab.current {
  color: #333;
  font-weight: 700;
}

.house-tab {
  padding-right: 16px;
  color: #7e7e7e;
  border-radius: 20px;
  /* background: #f1f1f1; */
  padding: 6px 12px;
  margin-right: 10px;
  border: 1px solid gainsboro;
}
.house-tab.current {
  color: #fff;
  font-weight: 700;
  background: var(--CSV-Color);
  border: none;
}

.house-tab2,
.volcert-tab {
  padding-right: 16px;
  color: #7e7e7e;
  color: black;
  font-family: pretendard;
  width: 100%;
  font-size: 13px;
  display: flex;
  height: 50px;
  text-align: center;
  border-bottom: 1px solid gainsboro;
  padding: 6px 0px;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none !important;
       user-select: none !important;
}
.house-tab2.current,
.volcert-tab.current {
  color: #000;
  font-weight: 700;
  border-bottom: 1px solid black;
}

.houselistcount_sup,
.talklistcount_sup {
  position: relative;
  top: -0.7em;
  padding: 2px 5px;
  right: -2px;
  background: rgb(255, 210, 191);
  border-radius: 8px 8px 8px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1;
}

.main-cert {
  background: #f5f5f5;
}

.subtab-page-function {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
  cursor: pointer;
  font-size: calc(16px + 2vw);
  right: 6vw;
  transform: translateY(-53px);
  position: fixed;
  z-index: 50;
}
.subtab-page-function .subtab-func-right {
  color: black;
}
.subtab-page-function.right {
  margin-left: auto;
}
.subtab-page-function.current {
  display: flex;
}

.subtab-page-content {
  animation: fadeIn 0.4s ease-in-out;
  display: none;
}
.subtab-page-content.current {
  display: grid;
}

.submain-tab-basic {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  grid-template: "head" 60px "body" 1fr "btn" auto/1fr;
  z-index: 80;
  position: fixed;
}
.submain-tab-basic .submain-back {
  grid-area: head;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 50;
}
.submain-tab-basic .submain-head {
  grid-area: head;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -0.3px;
  font-weight: 700;
  z-index: 30;
  background: white;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.submain-tab-basic .submain-head-right {
  grid-area: head;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  font-size: var(--font-2xl);
  margin-right: 25px;
  z-index: 30;
  width: -moz-fit-content;
  width: fit-content;
  width: auto;
}
.submain-tab-basic .submain-body {
  grid-area: body;
  display: grid;
  background: white;
  grid-template: "tab" 50px "body" 1fr/1fr;
}
.submain-tab-basic .submain-body .g-tab {
  grid-area: tab;
  display: flex;
  align-items: center;
}
.submain-tab-basic .submain-body .g-body {
  grid-area: body;
  overflow: hidden;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.submain-tab-basic .submain-body .g-body::-webkit-scrollbar {
  display: none;
}
.submain-tab-basic .submain-body .g-body .g-body-scroll {
  height: calc(var(--vh, 1vh) * 100 - 250px);
  overflow: auto;
}
.submain-tab-basic .submain-body .g-all {
  grid-row: 1/-1;
  grid-column: 1/-1;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 120px);
  position: relative;
}
.submain-tab-basic .g-btn {
  grid-area: btn;
}
.submain-tab-basic .g-btnbottom {
  grid-area: btn;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}

.main1 {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.main2 {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 8;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #ffffff;
}

.submain2 {
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 150;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: fixed;
  background-color: #ffffff;
}
@media screen and (min-width: 992px) {
  .submain2 {
    max-width: 600px;
  }
}

.submain-auth {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 20;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #ffffff;
  z-index: 1001;
}
@media screen and (min-width: 992px) {
  .submain-auth {
    background-color: var(--back-lightgray);
  }
}
.submain-auth .submain-auth-contents {
  display: grid;
  grid-template: "back" 60px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -1px;
}
@media screen and (min-width: 992px) {
  .submain-auth .submain-auth-contents {
    width: var(--pc_width_550);
    margin: 30px auto;
    background: #ffffff;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
    -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
    -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  }
}
.submain-auth .submain-auth-contents > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.submain-auth .submain-auth-contents > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 19px;
  position: relative;
}
.submain-auth .submain-auth-contents > .g-body {
  grid-area: body;
}
.submain-auth .submain-auth-contents > .g-btn {
  grid-area: btn;
}

.subModal-basic1 {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 50;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #ffffff;
}
.subModal-basic1 .subModal-basic1-contents {
  display: grid;
  grid-template: "back" 60px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -1px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.subModal-basic1 .subModal-basic1-contents > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.subModal-basic1 .subModal-basic1-contents > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 19px;
  position: relative;
}
.subModal-basic1 .subModal-basic1-contents > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 25px;
  font-size: var(--font-2xl);
}
.subModal-basic1 .subModal-basic1-contents > .g-body {
  grid-area: body;
  border-top: 0.5px solid rgba(169, 169, 169, 0.2196078431);
  overflow: auto;
  background: #f6f6f6;
}
.subModal-basic1 .subModal-basic1-contents > .g-all {
  display: grid;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.subModal-basic1 .subModal-basic1-contents > .g-btn {
  grid-area: btn;
}
.subModal-basic1 .subModal-basic1-contents > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}

.subModal-basic2 {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 50;
  top: 0;
  left: 0;
  position: fixed;
  background-color: rgba(0, 20, 2, 0.8588235294);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}
.subModal-basic2 .subModal-basic2-contents {
  display: grid;
  grid-template: "back" 60px "body" 1fr "btn" auto/1fr;
  width: 75%;
  letter-spacing: -1px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  background: white;
  right: 0;
  position: absolute;
  animation: slideToLeft 0.5s ease-in-out;
}
.subModal-basic2 .subModal-basic2-contents > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.subModal-basic2 .subModal-basic2-contents > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 19px;
  position: relative;
}
.subModal-basic2 .subModal-basic2-contents > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 25px;
  font-size: var(--font-2xl);
}
.subModal-basic2 .subModal-basic2-contents > .g-body {
  grid-area: body;
  border-top: 0.5px solid rgba(169, 169, 169, 0.2196078431);
  overflow: auto;
  background: #f6f6f6;
}
.subModal-basic2 .subModal-basic2-contents > .g-all {
  display: grid;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.subModal-basic2 .subModal-basic2-contents > .g-btn {
  grid-area: btn;
}
.subModal-basic2 .subModal-basic2-contents > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}

.submain-basic {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 100;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #ffffff;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.submain-basic::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .submain-basic {
    width: 600px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
.submain-basic .submain-basic-contents {
  display: grid;
  grid-template: "back" 60px "body" 1fr "btn" auto/1fr;
  width: 100%;
  letter-spacing: -1px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .submain-basic .submain-basic-contents {
    max-width: var(--pc_width_550);
    margin: auto;
  }
}
.submain-basic .submain-basic-contents > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.submain-basic .submain-basic-contents > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 17px;
  position: relative;
  z-index: 30;
}
.submain-basic .submain-basic-contents > .g-head {
  grid-area: back;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  letter-spacing: -1px;
  font-weight: 500;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.submain-basic .submain-basic-contents > .g-head-right {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 25px;
  font-size: var(--font-2xl);
  z-index: 5;
}
.submain-basic .submain-basic-contents > .g-body {
  grid-area: body;
  overflow: auto;
}
.submain-basic .submain-basic-contents > .g-body .g-body-tab {
  display: flex;
  align-items: center;
}
.submain-basic .submain-basic-contents > .g-all {
  display: grid;
  overflow: hidden;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.submain-basic .submain-basic-contents > .g-btn {
  grid-area: btn;
}
.submain-basic .submain-basic-contents > .g-btnbottom {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0px;
  z-index: 5;
}

.divider-spacing-300-m-6vw {
  height: 1px;
  margin: 15px -6vw;
  background: rgba(155, 155, 155, 0.3529411765);
}

.divider-spacing-30 {
  height: 1px;
  margin: 15px 0;
  background: rgba(169, 169, 169, 0.3529411765);
}

.divider-thin {
  height: 0.5px;
  background: rgba(169, 169, 169, 0.2196078431);
}

.divider-thin2 {
  height: 1px;
  background: rgba(169, 169, 169, 0.3529411765);
}

.divider-black-1 {
  height: 1px;
  background: rgba(0, 0, 0, 0.3529411765);
}

.divider-section {
  height: 12px;
  background: rgba(169, 169, 169, 0.1882352941);
}

.divider-sect7 {
  height: 7px;
  background: rgba(169, 169, 169, 0.1882352941);
}

.submain-insta {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 100;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #ffffff;
}
.submain-insta .submain-insta-contents {
  display: grid;
  grid-template: "back" 60px "body" 1fr/1fr;
  width: 100%;
  letter-spacing: -1px;
}
.submain-insta .submain-insta-contents > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.submain-insta .submain-insta-contents > .g-cert {
  grid-area: back;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.submain-insta .submain-insta-contents > .g-back {
  position: fixed;
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 19px;
  position: relative;
  z-index: 50;
}
.submain-insta .submain-insta-contents > .g-body {
  grid-area: body;
  z-index: 30;
  height: calc(var(--vh, 1vh) * 100);
  overflow: auto;
  overscroll-behavior: contain;
}
.submain-insta .submain-insta-contents > .g-all {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 30;
  height: calc(var(--vh, 1vh) * 100);
  overflow: auto;
  overscroll-behavior: contain;
}
.submain-insta .submain-insta-contents > .g-btn {
  grid-area: btn;
}

.main3 {
  display: none;
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background-color: #ffffff;
}

.submain1 {
  width: 100%;
  /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  z-index: 10;
  display: none;
  top: 0;
  left: 0;
  position: fixed;
}

hr {
  border: 1px solid black;
}

a {
  text-decoration: none;
}

ul {
  margin: 5px;
}
ul ul {
  list-style-type: none;
  font-size: 12px;
}
ul ul li {
  font-weight: normal;
  font-size: 9px;
  /* color: red; */
  margin: 5px 15px;
  padding: 4px;
  border-bottom: 1px solid black;
}
ul li {
  font-weight: bold;
  margin: 15px 0;
  border-radius: 5px;
  list-style-type: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

html {
  box-sizing: border-box;
  height: 100%;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.switch-wrap {
  cursor: pointer;
  background: #15273b;
  padding: 3px;
  width: 50px;
  height: 28px;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
}
.switch-wrap input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch {
  height: 100%;
  display: grid;
  grid-template-columns: 0fr 1fr 1fr;
  transition: 0.2s;
}
.switch::after {
  content: "";
  border-radius: 50%;
  background: #ccc;
  grid-column: 2;
  transition: background 0.2s;
}

input:checked + .switch {
  grid-template-columns: 1fr 1fr 0fr;
}
input:checked + .switch::after {
  background-color: #52cf71;
}

.ml-auto {
  margin-left: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.m-auto {
  margin: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.clock {
  color: rgb(78, 78, 78);
  font-size: 17px;
  font-weight: bolder;
  font-family: roboto;
  letter-spacing: 0px;
}

.icondemo_j {
  width: 67px;
  height: 67px;
  margin: 0 auto;
  border: 1px solid rgb(255, 255, 255);
  background-color: #04a976;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  box-shadow: 0 0 1.2em 0 rgba(76, 175, 80, 0.6588235294);
}
.icondemo_j a {
  text-decoration: none;
}
.icondemo_j:hover {
  background-color: black;
}
.icondemo_j:focus {
  outline: none;
  background-color: black;
}

.icondemo_j1 {
  width: 100px;
  height: 100px;
  margin: 15px auto;
  border: 1px solid rgb(255, 255, 255);
  background-color: #04a976;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  box-shadow: 0 0 1.2em 0 rgba(76, 175, 80, 0.6588235294);
}
.icondemo_j1 a {
  text-decoration: none;
}
.icondemo_j1:hover {
  background-color: black;
}
.icondemo_j1:focus {
  outline: none;
  background-color: black;
}

.icondemo_j2 {
  width: 100px;
  height: 100px;
  margin: 15px auto;
  /* border: 1px solid white; */
  background: url(../public/img/util/plastic.svg) top left no-repeat;
  background-size: cover;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_j2 a {
  text-decoration: none;
}
.icondemo_j2:hover {
  background-color: transparent;
}
.icondemo_j2:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_j3 {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  width: 100px;
  height: 100px;
  margin: 22px auto;
  /* border: 1px solid white; */
  background: url(../public/img/util/plastic-bag_4-1.png) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_j3 a {
  text-decoration: none;
}
.icondemo_j3:hover {
  background-color: transparent;
}
.icondemo_j3:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_jupw {
  width: 40px;
  height: 40px;
  /* border: 1px solid white; */
  background: url(../public/img/util/water_juplogo1.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_jupw a {
  text-decoration: none;
}
.icondemo_jupw:hover {
  background-color: transparent;
}
.icondemo_jupw:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_jupw1 {
  width: 90px;
  height: 70px;
  /* border: 1px solid white; */
  background: url(../public/img/logo/plastic-bag_13.png) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_jupw1 a {
  text-decoration: none;
}
.icondemo_jupw1:hover {
  background-color: transparent;
}
.icondemo_jupw1:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_catch {
  width: 40px;
  height: 40px;
  /* border: 1px solid white; */
  background: url(../public/img/logo/mc_logo_oct2020_v2.png) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_catch a {
  text-decoration: none;
}
.icondemo_catch:hover {
  background-color: transparent;
}
.icondemo_catch:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_j4 {
  width: 110px;
  height: 110px;
  /* border: 1px solid white; */
  background: url(../public/img/logo/plastic-bag_9.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_j4 a {
  text-decoration: none;
}
.icondemo_j4:hover {
  background-color: transparent;
}
.icondemo_j4:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_j4_ct {
  width: 100%;
  height: 100%;
  /* border: 1px solid white; */
  background: url(../public/img/logo/plastic-bag-crop3.svg) top left no-repeat;
  background-size: cover;
  background-position: 54%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_j4_ct a {
  text-decoration: none;
}
.icondemo_j4_ct:hover {
  background-color: transparent;
}
.icondemo_j4_ct:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_j4_ct2 {
  width: 100%;
  height: 100%;
  /* border: 1px solid white; */
  background: url(../public/img/logo/plastic-bag-crop3.svg) bottom center no-repeat;
  background-size: 73%;
  /* background: black; */
  background-position: 43% 100%;
  /* border-radius: 50%; */
  color: white;
  font-size: var(--font-lg);
}
@media screen and (min-width: 767px) {
  .icondemo_j4_ct2 {
    width: 100%;
    height: 100%;
    /* border: 1px solid white; */
    background: url(../public/img/logo/plastic-bag-crop3.svg) bottom center no-repeat;
    background-size: 73%;
    background-position: 43% 100%;
  }
}
.icondemo_j4_ct2 a {
  text-decoration: none;
}
.icondemo_j4_ct2:hover {
  background-color: transparent;
}
.icondemo_j4_ct2:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_j4_ct_plognow {
  width: 100%;
  height: 100%;
  /* border: 1px solid white; */
  background: url(../public/img/logo/plastic-bag-crop3.svg) bottom center no-repeat;
  background-size: 720px;
  /* background: black; */
  background-position: 41% 0%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_j4_ct_plognow a {
  text-decoration: none;
}
.icondemo_j4_ct_plognow:hover {
  background-color: transparent;
}
.icondemo_j4_ct_plognow:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_jsns {
  width: 40px;
  height: 40px;
  /* border: 1px solid white; */
  background: url(../public/img/util/plastic-bag_4.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.icondemo_jsns a {
  text-decoration: none;
}
.icondemo_jsns:hover {
  background-color: transparent;
}
.icondemo_jsns:focus {
  outline: none;
  background-color: transparent;
}

.icondemo_j3w {
  width: 115px;
  height: 115px;
  margin: 12px auto;
  /* border: 1px solid white; */
  background: url(../public/img/logo/plastic-bag_6.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  color: rgb(0, 0, 0);
  font-size: 15px;
}
.icondemo_j3w a {
  text-decoration: none;
}
.icondemo_j3w:hover {
  color: black;
  background-color: transparent;
}
.icondemo_j3w:focus {
  color: black;
  outline: none;
  background-color: transparent;
}

.rounddemo_j3w {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 12px auto;
  /* border: 1px solid white; */
  /* background: url(../public/img/logo/plastic-bag_6.svg) top left no-repeat; */
  background-position: 50%;
  color: black;
  background: white;
  font-size: 15px;
}
.rounddemo_j3w a {
  text-decoration: none;
}

.icondemo_catch01 {
  width: 140px;
  height: 140px;
  margin: 0px auto;
  /* border: 1px solid white; */
  background: url(../public/img/util/greenhands07.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  color: rgb(0, 0, 0);
  font-size: 15px;
}
.icondemo_catch01 a {
  text-decoration: none;
}
.icondemo_catch01:hover {
  color: black;
  background-color: transparent;
}
.icondemo_catch01:focus {
  color: black;
  outline: none;
  background-color: transparent;
}

.icondemo_wdrop1 {
  width: 120px;
  height: 120px;
  margin: 12px auto;
  /* border: 1px solid white; */
  background: url(../public/img/water/water-drop.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  color: rgb(0, 0, 0);
  font-size: 15px;
}
.icondemo_wdrop1 a {
  text-decoration: none;
}
.icondemo_wdrop1:hover {
  color: black;
  background-color: transparent;
}
.icondemo_wdrop1:focus {
  color: black;
  outline: none;
  background-color: transparent;
}

.icondemo_db {
  padding: 10px;
  width: 100%;
  height: 40px;
  border: 0px solid #04a976;
  background-color: rgba(4, 169, 118, 0.0509803922);
  color: white;
  font-size: 15px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.icondemo_db a {
  text-decoration: none;
}

.iconevent1 {
  margin: 10px;
  position: relative;
  padding: 10px;
  display: grid !important;
  grid-template: "a b c d" 1fr/1fr 1fr 50px 50px;
  width: 100%;
  height: 80px;
  background: #ffffff;
  background-size: 143%;
  background-position: 54px -87px;
  color: #00771f;
  font-size: 23px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.5);
  border-radius: 10px;
}
.iconevent1 a {
  text-decoration: none;
}
.iconevent1 > .gtitle {
  grid-row: 1/-1;
  grid-column: 1/3;
}
.iconevent1 > .gc {
  grid-row: 1/-1;
  grid-column: 3/4;
}
.iconevent1 > .gc:after {
  font-family: FontAwesome;
  content: "\f059";
}
.iconevent1 > .gd {
  grid-row: 1/-1;
  grid-column: 4/5;
}

.iconevent_conf {
  display: none;
  position: relative;
  padding: 10px;
  grid-template: "a b" 1fr/1fr 1fr;
  width: 100%;
  height: 80px;
  background: #000000;
  background-size: 143%;
  background-position: 54px -87px;
  color: white;
  font-size: 20px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.5);
  border-radius: 10px;
}
.iconevent_conf a {
  text-decoration: none;
}
.iconevent_conf > .ga {
  grid-area: a;
}
.iconevent_conf > .gb {
  grid-area: b;
}

.iconcard1 {
  position: relative;
  padding: 10px;
  display: grid !important;
  text-align: start !important;
  align-items: start !important;
  width: 100%;
  height: 80px;
  background: #ffffff url(../public/img/util/recycle.gif) top left no-repeat;
  background-size: 143%;
  background-position: 54px -87px;
  color: #00771f;
  font-size: 23px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.5);
  border-radius: 10px;
}
.iconcard1 a {
  text-decoration: none;
}
.iconcard1:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to top, rgba(19, 80, 1, 0.368627451) 0%, rgba(0, 0, 0, 0) 30%);
}
.iconcard1:hover {
  background: none;
  background-color: #000000;
}
.iconcard1:focus {
  outline: none;
  background: none;
  background-color: #000000;
}

.iconcard11 {
  position: relative;
  padding: 10px;
  display: grid !important;
  text-align: start !important;
  align-items: start !important;
  width: 100%;
  height: 80px;
  background: black;
  background-size: 143%;
  background-position: 54px -87px;
  color: #00771f;
  font-size: 23px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.5);
  z-index: 5;
  border-radius: 10px;
}
.iconcard11 a {
  text-decoration: none;
}
.iconcard11:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to top, rgba(19, 80, 1, 0.368627451) 0%, rgba(0, 0, 0, 0) 30%);
}
.iconcard11:hover {
  background: none;
  background-color: #000000;
}
.iconcard11:focus {
  outline: none;
  background: none;
  background-color: #000000;
}

.iconcard2 {
  position: relative;
  padding: 10px;
  display: grid !important;
  text-align: start !important;
  width: 100%;
  height: 80px;
  background: #d6e806 url(../public/img/util/plogging.jpg) center no-repeat;
  background-size: 136%;
  background-position: 56px -231px;
  color: #00771f;
  font-size: 23px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.5);
  border-radius: 10px;
}
.iconcard2 a {
  text-decoration: none;
}
.iconcard2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to top, rgba(19, 80, 1, 0.368627451) 0%, rgba(0, 0, 0, 0) 30%);
}
.iconcard2:hover {
  background: none;
  background-color: #000000;
}
.iconcard2:focus {
  outline: none;
  background: none;
  background-color: #000000;
}

.iconcard22 {
  position: relative;
  padding: 10px;
  display: grid !important;
  text-align: start !important;
  width: 100%;
  height: 80px;
  background: black;
  background-size: 136%;
  background-position: 56px -231px;
  color: #00771f;
  font-size: 23px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.5);
  border-radius: 10px;
  z-index: 5;
}
.iconcard22 a {
  text-decoration: none;
}
.iconcard22:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to top, rgba(19, 80, 1, 0.368627451) 0%, rgba(0, 0, 0, 0) 30%);
}
.iconcard22:hover {
  background: none;
  background-color: #000000;
}
.iconcard22:focus {
  outline: none;
  background: none;
  background-color: #000000;
}

.cardtitle1 {
  font-family: "Anton";
  font-weight: 100;
  font-size: 27px;
}

.iconfinish {
  width: 70px;
  height: 30px;
  border: 2px solid rgb(51, 0, 113);
  background-color: white;
  border-radius: 50%;
}
.iconfinish a {
  text-decoration: none;
}
.iconfinish:hover {
  background-color: #2ecc71;
}
.iconfinish:focus {
  outline: none;
  background-color: #2ecc71;
}

.icondemo {
  width: 70px;
  height: 70px;
  border: 2px solid rgb(51, 0, 113);
  background-color: white;
  border-radius: 50%;
}
.icondemo a {
  text-decoration: none;
}
.icondemo:hover {
  background-color: #2ecc71;
}
.icondemo:focus {
  outline: none;
  background-color: rgb(177, 126, 126);
}

.icondemo50 {
  width: 50px;
  height: 50px;
  border: 1px solid rgb(0, 42, 97);
  background-color: rgb(0, 94, 201);
  border-radius: 50%;
  color: white;
}
.icondemo50 a {
  text-decoration: none;
}
.icondemo50:hover {
  background-color: #0616ff;
}
.icondemo50:focus {
  outline: none;
  background-color: rgb(47, 0, 255);
}

.incodemo_f {
  width: 60px;
  height: 60px;
  border: 1px solid #306a00;
  background-color: #50b200;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 200;
  color: white;
}
.incodemo_f a {
  text-decoration: none;
}
.incodemo_f:hover {
  background-color: #000000;
}
.incodemo_f:focus {
  outline: none;
  background-color: #000000;
}

.icondemo3 {
  height: 13px;
  position: absolute;
  border-radius: 5px;
  border: none;
  padding: 0px 3px;
  left: 25px;
  top: -5px;
}
.icondemo3:hover {
  background-color: rgb(0, 255, 221);
}
.icondemo3:focus {
  outline: none;
  background-color: rgb(148, 148, 148);
}

.icondemo4 {
  /* max-width: 40px; */
  position: absolute;
  border-radius: 18px;
  border: none;
  padding: 2px 4px;
  right: 0;
  left: 0;
  margin: auto;
  top: 41px;
  z-index: 4;
}
.icondemo4:hover {
  background-color: transparent;
}
.icondemo4:focus {
  outline: none;
  background-color: transparent;
}

.icondemo40 {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 20px;
  color: rgb(255, 255, 255);
  font-weight: 300;
  border: none;
  background: inherit;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
}

.icondemo1 {
  width: calc(7px + 16vw);
  padding: calc(8px + 1vw);
  height: calc(7px + 16vw);
  border: 1px solid #025e38;
  background-color: white;
  border-radius: 50%;
}

button.icondemo-horizontal-city {
  width: calc(20px + 16vw);
  padding: var(--font-lg);
  height: calc(20px + 16vw);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1490196078);
  border: 1px solid #bababa;
  background: rgba(255, 255, 255, 0.8901960784);
  border-radius: 50%;
}
button.icondemo-horizontal-city:hover, button.icondemo-horizontal-city:focus {
  border: 1px solid #bababa;
  background: rgba(255, 255, 255, 0.8901960784);
}
button.icondemo-horizontal-city.active {
  background: #00af80 !important;
  border: 1px solid #008850 !important;
}
button.icondemo-horizontal-city.active:hover, button.icondemo-horizontal-city.active:focus {
  background: #00af80 !important;
  border: 2px solid #008850 !important;
}

.icondemo-b {
  width: calc(7px + 16vw);
  padding: calc(0px + 2vw);
  height: calc(7px + 16vw);
  /*border: 1px solid #025e38;
  */
  background: transparent;
  border: 1px solid rgba(2, 25, 41, 0.9019607843);
  border-radius: 30%;
  -webkit-border-radius: 30%;
  -moz-border-radius: 30%;
  -ms-border-radius: 30%;
  -o-border-radius: 30%;
}
.icondemo-b:hover, .icondemo-bfocus {
  background: #003d80;
}

.icondemo-bpt {
  width: calc(7px + 16vw);
  padding: calc(0px + 2vw);
  height: calc(7px + 16vw);
  background: #003d80;
  border-radius: 30%;
}

.litterText-bpt {
  color: white;
  height: calc(30px + 2vw);
  font-size: calc(9px + 2vw);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  color: white;
}

.litterText {
  color: rgba(2, 25, 41, 0.9019607843);
  height: calc(20px + 2vw);
  font-size: var(--font-md);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
}

.icondemo_litter {
  width: 70px;
  padding: 12px;
  height: 70px;
  border: 1px solid #025e38;
  background-color: #ffffff;
  border-radius: 50%;
}
.icondemo_litter:hover {
  background-color: #ff2d2d;
}

.icondemo40a {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 20px;
  color: rgb(0, 0, 0);
  font-weight: 300;
  border: none;
  background: inherit;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
}

.icondemo30 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 16px;
  top: -2px;
  background-color: #00ffdd;
  border-radius: 50%;
  border: none;
}
.icondemo30:hover {
  background-color: #c5c5c5;
}
.icondemo30:focus {
  outline: none;
  background-color: rgb(177, 126, 126);
}

.icondemo30b {
  width: 30px;
  height: 30px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 108, 231);
  border-radius: 50%;
  border: none;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.icondemo30b1 {
  width: 30px;
  height: 30px;
  background-color: white;
  color: #3F51B5;
  font-family: anton;
  font-weight: 100;
  border-radius: 50%;
  border: none;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.icondemo30a {
  width: 30px;
  height: 30px;
  border: none;
}
.icondemo30a:hover {
  background-color: rgb(255, 255, 255);
}
.icondemo30a:focus {
  outline: none;
  background-color: rgb(177, 126, 126);
}

.icondemo30a1 {
  width: 25px;
  height: 25px;
  border: none;
}
.icondemo30a1:hover {
  background-color: rgb(255, 255, 255);
}
.icondemo30a1:focus {
  outline: none;
  background-color: rgb(177, 126, 126);
}

.icondemo100 {
  width: 100px;
  height: 100px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  border: 1px solid rgb(72, 72, 72);
  padding: 0;
  margin: 0;
}
.icondemo100:hover {
  background-color: #c5c5c5;
}
.icondemo100:focus {
  outline: none;
  background-color: rgb(0, 179, 255);
}

.icondemo150 {
  width: 150px;
  height: 150px;
  background-color: rgba(0, 204, 255, 0.753);
  border-radius: 50%;
  border: 1px solid rgb(0, 121, 190);
  padding: 0;
  margin: 0;
  color: rgb(0, 71, 165);
}
.icondemo150:hover {
  background-color: #c5c5c5;
}
.icondemo150:focus {
  outline: none;
  background-color: rgb(0, 179, 255);
}

.icondemo30out {
  width: 30px;
  height: 30px;
  border: 2px solid rgb(51, 0, 113);
  border-radius: 50%;
}
.icondemo30out:hover {
  background-color: #c5c5c5;
}
.icondemo30out:focus {
  outline: none;
  background-color: rgb(177, 126, 126);
}

.icondemo400 {
  width: 400px;
  height: 400px;
  background-color: rgb(0, 255, 221);
  border-radius: 50%;
  border: none;
}
.icondemo400:hover {
  background-color: #c5c5c5;
}
.icondemo400:focus {
  outline: none;
  background-color: rgb(177, 126, 126);
}

.icondemo300 {
  width: 300px;
  height: 300px;
  background-color: rgb(0, 229, 255);
  border-radius: 50%;
  border: none;
}
.icondemo300:hover {
  background-color: #c5c5c5;
}
.icondemo300:focus {
  outline: none;
  background-color: rgb(177, 126, 126);
}

.icondemo300a {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid #0F51B5;
}
.icondemo300a:hover {
  background-color: white;
}
.icondemo300a:focus {
  outline: none;
  background-color: white;
}

.icondemo300b {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgb(0, 163, 27);
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.473);
}
.icondemo300b:hover {
  color: black !important;
  background-color: rgb(218, 255, 224);
}
.icondemo300b:focus {
  color: black !important;
  outline: none;
  background-color: rgb(218, 255, 224);
}

.icd300img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgb(0, 163, 27);
  background: url(../public/img/jupbag1.svg) no-repeat bottom;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.473);
}
.icd300img:hover {
  background-color: rgb(218, 255, 224);
}
.icd300img:focus {
  outline: none;
  background-color: rgb(218, 255, 224);
}

.icond {
  background-color: black;
  border-radius: 50%;
  color: white;
}

.c-csv {
  color: var(--CSV-Color);
}

.c-vol {
  color: var(--admin-maincolor);
}

.c-like {
  color: #fd7575 !important;
}

.c-bl {
  color: rgb(0, 70, 223);
}

.c-main_w {
  color: white;
}

.c-main_g {
  color: #00502b;
}

.c-main-pinkred {
  color: #ff6a5f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-weight: 400; */
  list-style-type: none;
  font-style: normal;
}

html,
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  overscroll-behavior: contain;
  overflow: hidden;
}
@media screen and (min-width: 767px) and (max-width: 991px) {
  html,
  body {
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  html ::-webkit-scrollbar,
  body ::-webkit-scrollbar {
    display: none;
  }
}
html button,
html input,
html optgroup,
html select,
html textarea,
body button,
body input,
body optgroup,
body select,
body textarea {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
html::after,
body::after {
  /* 소스만 다운받고 화면은 나태내지 않는다. (숨김 처리) */
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  /* load images */
  content: url(../public/img/nav_icon/plogPageIcon.svg) url(../public/img/nav_icon/forumPageIcon_focus.svg) url(../public/img/nav_icon/rankPageIcon_focus.svg) url(../public/img/nav_icon/plogPageIcon_focus.svg) url(../public/img/nav_icon/impactPageIcon_focus.svg) url(../public/img/nav_icon/userPageIcon_focus.svg);
}

label,
input {
  font-size: 9px;
}

input.basic-post {
  line-height: 1.7;
  word-break: break-all;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 5px;
  height: auto;
}
input.basic-post::-moz-placeholder {
  color: var(--cl-text-b-180);
}
input.basic-post::placeholder {
  color: var(--cl-text-b-180);
}
input.basic-post:focus {
  outline: none;
}
input.basic-post:-webkit-autofill, input.basic-post:-webkit-autofill:hover, input.basic-post:-webkit-autofill:focus, input.basic-post:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(var(--cl-text-b-0)) !important;
  box-shadow: 0 0 0px 1000px var(white) inset !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.translateY-50 {
  transform: translateY(-50%);
}

input.basic-post-prefix {
  background: var(--back-lightgray);
  border: none;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
input.basic-post-prefix::-moz-placeholder {
  color: var(--cl-text-b-200);
}
input.basic-post-prefix::placeholder {
  color: var(--cl-text-b-200);
}
input.basic-post-prefix:focus {
  outline: none;
}
input.basic-post-prefix:-internal-autofill-selected {
  background-color: var(--back-lightgray) !important;
  box-shadow: 0 0 0 100px var(--back-lightgray) inset !important;
  color: black !important;
}
input.basic-post-prefix:-webkit-autofill, input.basic-post-prefix:-webkit-autofill:hover, input.basic-post-prefix:-webkit-autofill:focus, input.basic-post-prefix:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

.tab-page-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 5.2vw;
  color: #333;
  position: relative;
}
.tab-page-link.current {
  color: #333;
  display: flex;
}
.tab-page-link:after {
  font-size: 9px;
  margin-top: 4px;
}
.tab-page-link.new:before {
  width: 2vw;
  height: 2vw;
  position: absolute;
  background: #ff685c;
  border-radius: 50%;
  content: "";
  right: 4vw;
  top: 2px;
}
.tab-page-link:nth-of-type(1):after {
  content: "게시판";
}
.tab-page-link:nth-of-type(2):after {
  content: "순위";
}
.tab-page-link:nth-of-type(3):after {
  content: "시작";
}
.tab-page-link:nth-of-type(4):after {
  content: "지표";
}
.tab-page-link:nth-of-type(5):after {
  content: "나의 활동";
}
.tab-page-link.ne:nth-of-type(1):after {
  content: "지키미 이야기";
}
.tab-page-link.ne:nth-of-type(2):after {
  content: "지키미 순위";
}
.tab-page-link.ne:nth-of-type(3):after {
  content: "쓰담 시작";
}
.tab-page-link.ne:nth-of-type(4):after {
  content: "쓰담 지표";
}
.tab-page-link.ne:nth-of-type(5):after {
  content: "나의 활동";
}
.tab-page-link.navIconStyle > * {
  height: 20px;
  width: 20px;
  background-size: contain;
  cursor: pointer;
}
.tab-page-link.navIconStyle .forumPageIcon {
  background: url(../public/img/nav_icon/forumPageIcon.svg) no-repeat center center;
}
.tab-page-link.navIconStyle .rankPageIcon {
  background: url(../public/img/nav_icon/rankPageIcon.svg) no-repeat center center;
}
.tab-page-link.navIconStyle .plogPageIcon {
  background: url(../public/img/nav_icon/plogPageIcon.svg) no-repeat center center;
}
.tab-page-link.navIconStyle .impactPageIcon {
  background: url(../public/img/nav_icon/impactPageIcon.svg) no-repeat center center;
}
.tab-page-link.navIconStyle .userPageIcon {
  background: url(../public/img/nav_icon/userPageIcon.svg) no-repeat center center;
}
.tab-page-link.navIconStyle.current .forumPageIcon {
  background: url(../public/img/nav_icon/forumPageIcon_focus.svg) no-repeat center center;
}
.tab-page-link.navIconStyle.current .rankPageIcon {
  background: url(../public/img/nav_icon/rankPageIcon_focus.svg) no-repeat center center;
}
.tab-page-link.navIconStyle.current .plogPageIcon {
  background: url(../public/img/nav_icon/plogPageIcon_focus.svg) no-repeat center center;
}
.tab-page-link.navIconStyle.current .impactPageIcon {
  background: url(../public/img/nav_icon/impactPageIcon_focus.svg) no-repeat center center;
}
.tab-page-link.navIconStyle.current .userPageIcon {
  background: url(../public/img/nav_icon/userPageIcon_focus.svg) no-repeat center center;
}

.tab-page-link-new {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #1d1d1d;
  position: relative;
}
.tab-page-link-new .tab-page-link-icon {
  width: 50px;
  height: 50px;
  border: 1px solid;
  padding: 3px;
  border-radius: 12px;
}
.tab-page-link-new span {
  font-size: calc(9px + 1.2vw);
  padding-top: 8px;
  letter-spacing: -0.7px;
}
.tab-page-link-new.current:after {
  content: "🌟";
  position: absolute;
}

.tab-page-content {
  display: none;
}
.tab-page-content.current {
  display: grid;
}

.tab-link.current {
  border-bottom: 2px solid black;
  padding: 7px;
  font-weight: bold;
  cursor: pointer;
}

.tab-content {
  display: none;
  height: 100%;
}

.tab-content.current {
  display: grid;
  grid-template: "a" 1fr/1fr;
}
.tab-content.current .g1 {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 3;
}
.tab-content.current .g2 {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 1;
}
.tab-content.current .g3 {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 1;
}

.tab-link2 {
  position: relative;
  padding: 7px;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
       user-select: none !important;
}
.tab-link2.current {
  font-weight: bold;
  cursor: pointer;
  position: relative;
  padding: 5px 20px;
  background: rgba(171, 171, 171, 0.1803921569);
  border-radius: 18px;
}

.tab-content2 {
  display: none;
  height: 100%;
}
.tab-content2.current {
  display: grid;
  grid-template: "a" 1fr/1fr;
}
.tab-content2.current .g1 {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
}
.tab-content2.current .g2 {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}

.tab-link-photo-container {
  display: grid;
  grid-template: "a b c " 1fr/1fr 1fr 1fr;
  z-index: 10;
  font-size: 14px;
  height: 40px;
  letter-spacing: -1.2px;
  text-align: center;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}

.tab-content-photo {
  display: none;
  height: -moz-fit-content;
  height: fit-content;
  height: auto;
}
.tab-content-photo.current {
  display: grid;
}

.tab-link-photo {
  position: relative;
  padding: 7px;
}
.tab-link-photo.current {
  border-bottom: 2px solid black;
  padding: 11px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.tab-link-gallery-container {
  display: flex;
  white-space: nowrap;
  overflow-x: scroll;
  scrollbar-width: none;
  z-index: 10;
  font-size: var(--font-xl);
  height: 60px;
  letter-spacing: -0.8px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  text-align: center;
  justify-content: flex-start;
  padding: 0 25px;
  -webkit-user-select: none;
  -moz-user-select: none !important;
       user-select: none !important;
}
.tab-link-gallery-container::-webkit-scrollbar {
  display: none;
}

.tab-content-gallery {
  display: none;
  height: auto;
  min-height: calc(var(--vh, 1vh) * 100 - 180px);
}
.tab-content-gallery.current {
  display: grid;
}

.tab-link-gallery {
  height: 35px;
  margin-right: 10px;
  padding: 0 12px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid gainsboro;
  border-radius: 10px;
}
.tab-link-gallery.current {
  background: black;
  color: white;
  border: none;
}

.tab-link-cert-container {
  display: grid;
  grid-template: "a b c " 1fr/1fr 1fr 1fr;
  z-index: 10;
  font-size: 14px;
  height: 40px;
  letter-spacing: -1.2px;
  text-align: center;
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}

.tab-content-cert {
  display: none;
  height: -moz-fit-content;
  height: fit-content;
  height: auto;
}
.tab-content-cert.current {
  display: grid;
}

.tab-link-cert {
  position: relative;
  padding: 7px;
}
.tab-link-cert.current {
  border-bottom: 2px solid black;
  padding: 11px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.tab-link-stats {
  position: relative;
  padding: 7px;
}
.tab-link-stats.current {
  border-bottom: 2px solid black;
  padding: 7px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.tab-content-stats {
  display: none;
  height: 100%;
}

.tab-content-stats.current {
  display: grid;
  grid-template: "a" 1fr/1fr;
}
.tab-content-stats.current .g1 {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
}
.tab-content-stats.current .g2 {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}

.tab-rank-content {
  display: none;
  height: 100%;
  letter-spacing: -1.2px;
}

.tab-link-rank.current {
  border-bottom: 2px solid #02c677;
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
  /* background: #08d683; */
  color: black;
  /* border-radius: 3px; */
}

.tab-rank-content.current {
  display: grid;
  grid-template: "a" 1fr/1fr;
}
.tab-rank-content.current .g1 {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
}
.tab-rank-content.current .g2 {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}

.tab-link3.current {
  border-bottom: 2px solid black;
  padding: 7px;
  font-weight: bold;
  cursor: pointer;
}

.tab-content3 {
  display: none;
  height: 100%;
}

.tab-content3.current {
  display: grid;
  grid-template: "a" 1fr/1fr;
}
.tab-content3.current .g1 {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
}
.tab-content3.current .g2 {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}

.tab-link-01 {
  font-size: 30px;
  margin: 10px 0;
}

.tab-link-01.current {
  font-weight: bold;
  cursor: pointer;
}

.tab-ug-wrapper {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  padding: 0 10px;
}

.tab-link-ug {
  font-size: 15px;
  width: 25%;
  padding: 8px 0;
  cursor: none;
  color: black;
}
.tab-link-ug:last-of-type {
  border: none;
}

.tab-link-ug.current {
  font-weight: bold;
  padding: 8px 0;
  cursor: pointer;
  background-color: black;
  color: white;
  border-radius: 10px 10px 0 0;
}

.tab-content-ug {
  display: none;
  height: 100%;
  width: 100%;
}

.tab-content-ug.current {
  display: flex;
}

.container01 {
  margin: 30px 100px;
}

.f {
  display: flex;
}

.b {
  display: block;
}

.g {
  display: grid;
}

.w-upbar {
  display: grid;
  grid-template: "a b c d" 80px/1fr 1fr 1fr 1fr;
}
.w-upbar > * {
  display: grid;
}
.w-upbar > .g-upbar {
  grid-area: a;
}

.w-des {
  display: grid;
  grid-template: "a b c" 1fr/200px 1fr 200px;
}
.w-des > * {
  display: grid;
}
.w-des > .menus {
  grid-area: a;
}
.w-des > .contents {
  grid-area: b;
}
.w-des > .lists {
  grid-area: c;
}

.w-run {
  display: grid;
  grid-template: "a" 100px "b" 1fr/1fr;
}
.w-run > .ga {
  grid-row: 1;
  grid-column: 1/-1;
  z-index: 2;
  display: grid;
  padding: 10px;
  grid-template: "a b" 1fr "a1 b1" 1fr/1fr 1fr;
  width: 90%;
  height: 70px;
  margin: 62px auto 0 auto;
  background-color: rgb(255, 255, 255);
  border-radius: 50px;
  box-shadow: 0 0em 0.3em 0 rgba(81, 81, 81, 0.6588235294);
}
.w-run > .ga1 {
  grid-row: 1;
  grid-column: 1/-1;
  z-index: 2;
  display: grid;
  padding: 10px;
  grid-template: "u a b c" 1fr "u a1 b1 c1" 1fr/56px 1fr 1fr 1fr;
  width: 90%;
  height: 70px;
  margin: 71px auto 0 auto;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 7px;
  box-shadow: 0 0em 0.3em 0 rgba(81, 81, 81, 0.6588235294);
}
.w-run > .ga1 > .gu {
  grid-area: u;
  position: relative;
}
.w-run > .ga1 > .ga {
  grid-area: a;
}
.w-run > .ga1 > .ga1 {
  grid-area: a1;
}
.w-run > .ga1 > .gb {
  grid-area: b;
}
.w-run > .ga1 > .gb1 {
  grid-area: b1;
}
.w-run > .ga1 > .gc {
  grid-area: c;
}
.w-run > .gb {
  grid-row: 1/-1;
  grid-column: 1/-1;
}

/* ------------------------------ 
 * BACK BUTTON 
 --------------------------------*/
.prevent-prev-button {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 30;
}
.prevent-prev-button.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.373);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.prevent-prev-button.circle:hover {
  background-color: gainsboro;
}

.w-run2 {
  display: grid;
  grid-template: "board" 142px "record" 1fr/1fr;
}
.w-run2 > .ga {
  grid-row: 1;
  grid-column: 1/-1;
  z-index: 2;
  display: grid;
  padding: 10px;
  grid-template: "a b" 1fr "a1 b1" 1fr/1fr 1fr;
  width: 90%;
  height: 70px;
  margin: 62px auto 0 auto;
  background-color: rgb(255, 255, 255);
  border-radius: 50px;
  box-shadow: 0 0em 0.3em 0 rgba(81, 81, 81, 0.6588235294);
}
.w-run2 > .g_board {
  grid-area: board;
  z-index: 2;
  display: grid;
  padding: 10px 10px 10px 20px;
  grid-template: " a b c u" 1fr " a1 b1 c1 u" 1fr/0.6fr 1fr 1fr 56px;
  width: 90%;
  height: 74px;
  margin: 71px auto 0 auto;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 45px;
  box-shadow: 0 0em 0.1em 0 rgba(74, 74, 74, 0.6588235294);
}
.w-run2 > .g_board > .gu {
  grid-area: u;
  position: relative;
}
.w-run2 > .g_board > .ga {
  grid-area: a;
}
.w-run2 > .g_board > .ga1 {
  grid-area: a1;
}
.w-run2 > .g_board > .gb {
  grid-area: b;
}
.w-run2 > .g_board > .gc {
  grid-area: c;
}
.w-run2 > .g_board > .gc1 {
  grid-area: c1;
}
.w-run2 > .g_board > .ga1 {
  grid-area: a1;
}
.w-run2 > .g_board > .gb1 {
  grid-area: b1;
}
.w-run2 > .g_board > .gc1 {
  grid-area: c1;
}
.w-run2 > .g_record {
  display: grid;
  grid-area: record;
  grid-template: "a" 100vw/1fr;
  border-radius: 33px 33px 110px 110px;
  margin: 0px 17px;
  align-items: flex-end;
  overflow: scroll;
  z-index: 5;
}
.w-run2 > .g_record > .ga2 {
  grid-area: a;
  z-index: 2;
  align-items: flex-end;
}
.w-run2 > .g_record > .ga3 {
  grid-area: a;
  z-index: 3;
  align-items: flex-end;
}
.w-run2 > .g_record .plognow_records {
  display: grid;
  z-index: 2;
  display: -ms-grid;
  padding: 4px;
  margin: 1px auto;
  text-align: center;
  align-items: center;
  width: 90%;
  font-size: 14px;
  grid-template: "u a b c d" 1fr/26px 1fr 1fr 1fr 1fr;
  background-color: transparent;
  color: #039e75;
  /* border-radius: 0 0 7px 7px; */
  /* -webkit-border-radius: 6px; */
  border-bottom: 1px solid;
  /* -webkit-box-shadow: 0 0em 0.3em 0 #515151a8; */
}
.w-run2 > .g_record .plognow_records > .gu {
  grid-area: u;
}
.w-run2 > .g_record .plognow_records > .ga {
  grid-area: a;
}
.w-run2 > .g_record .plognow_records > .gb {
  grid-area: b;
}
.w-run2 > .g_record .plognow_records > .gc {
  grid-area: c;
}
.w-run2 > .g_record .plognow_records > .gd {
  grid-area: d;
}
.w-run2 > .gmap {
  grid-row: 1/-1;
  grid-column: 1/-1;
}

.disf2 {
  display: flex;
  width: 100%;
  height: 30px;
  align-items: flex-end;
  justify-content: center;
}

.disf1 {
  display: flex;
}

.disf {
  display: flex;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.w-board {
  display: grid;
  grid-template: "a b c" 1fr "a1 b1 c1" 1fr/1fr 1fr 1fr;
  width: 90%;
  height: 57px;
  margin: 0 auto 0 auto;
  color: rgb(255, 255, 255);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.w-board > .ga {
  grid-area: a;
}
.w-board > .gb {
  grid-area: b;
}
.w-board > .gc {
  grid-area: c;
}
.w-board > .ga1 {
  grid-area: a1;
}
.w-board > .gb1 {
  grid-area: b1;
}
.w-board > .gc1 {
  grid-area: c1;
}

.w-2 {
  display: flex;
  flex-direction: column;
}

.w-2a {
  display: grid;
  grid-template: "a" 2fr "b" 1fr/1fr;
  gap: 8px;
}

.w-2-city {
  display: grid;
  grid-template: "a" 5fr "b" 1fr/1fr;
  gap: 3px;
}

.w-2-city-trashBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
}
.w-2-city-trashBtn .name {
  font-size: calc(10px + 2vw);
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 15px;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.w-gal-3 {
  display: grid;
  gap: 2px;
  grid-auto-rows: auto;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
.w-gal-3 > * {
  display: grid;
}
.w-gal-3 .g-firstrow {
  grid-row: 1;
  grid-column: 1/-1;
}

.grid-w-3 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: "a" 30px "b" auto "c" 17px/1fr;
  gap: 3vw;
  overflow: hidden;
}
.grid-w-3 > * {
  display: grid;
}
.grid-w-3 > .ga {
  grid-area: a;
}
.grid-w-3 > .ga1 {
  grid-area: a1;
}
.grid-w-3 > .gb {
  grid-area: b;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 18px;
}
.grid-w-3 > .gb_litter {
  grid-area: b;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: ". . ." ". . ." ". a .";
  row-gap: 18px;
}
.grid-w-3 > .gb_litter > .litter_order9:nth-of-type(1) {
  grid-area: a;
}
.grid-w-3 > .gb_litter_word {
  grid-area: b;
  text-align: center;
  color: black;
  line-height: 1.5em;
  justify-self: center;
  align-self: start;
}
.grid-w-3 > .gb_litter_numb {
  grid-area: b;
  justify-self: center;
  align-self: center;
}
.grid-w-3 > .gc {
  grid-area: c;
  display: grid;
}
.grid-w-3 > .gd {
  grid-area: d;
}

.w-city-keypad-box {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  display: grid;
  padding-bottom: 20px;
}
.w-city-keypad-box > * {
  display: grid;
}
.w-city-keypad-box > .ga {
  grid-area: a;
}
.w-city-keypad-box > .ga1 {
  grid-area: a1;
}
.w-city-keypad-box > .gb {
  grid-area: b;
  display: flex;
  gap: 10px;
}
.w-city-keypad-box > .gb_litter {
  grid-area: b;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: ". . ." ". . ." ". a .";
  row-gap: 18px;
}
.w-city-keypad-box > .gb_litter > .litter_order9:nth-of-type(1) {
  grid-area: a;
}
.w-city-keypad-box > .gb_litter_word {
  grid-area: b;
  text-align: center;
  color: black;
  line-height: 1.5em;
  justify-self: center;
  align-self: start;
}
.w-city-keypad-box > .gb_litter_numb {
  grid-area: b;
  justify-self: center;
  align-self: center;
}
.w-city-keypad-box > .gc {
  grid-area: c;
  display: grid;
}
.w-city-keypad-box > .gd {
  grid-area: d;
}

.litter-w {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: "a" 70px "b" auto "c" 20px/1fr;
  gap: 3vw;
  overflow: hidden;
}
.litter-w > * {
  display: grid;
}
.litter-w > .ga {
  grid-area: a;
}
.litter-w > .ga_litter_word {
  grid-area: a;
  text-align: center;
  line-height: 1.5;
  justify-self: center;
  align-self: center;
}
.litter-w > .ga_litter_word .litter_measureUnit {
  color: #00448f;
  background: white;
  padding: 0px 15px;
  border-radius: 13px;
  margin-bottom: 7px;
  font-weight: 500;
}
.litter-w > .ga_litter_word .litter_measureinfo {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.606);
}
.litter-w > .gb {
  grid-area: b;
  grid-template-areas: ". . ." "s s s" ". b .";
}
.litter-w > .gb .gb_litter_slider {
  grid-area: s;
}
.litter-w > .gb .litter_submit {
  grid-area: b;
}

.beach_litter_tab {
  display: flex;
  border-radius: 40px;
  border: 1px solid white;
  margin: 3vw;
  width: 80%;
  align-items: center;
  justify-content: center;
  bottom: 12px;
  position: absolute;
  height: 10vw;
  align-items: center;
  text-align: center;
  font-size: calc(2vw + 11px);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
}
.beach_litter_tab .ele {
  background: white;
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
}

.swiper-container-basic-b {
  position: relative;
  overflow: hidden;
}

.w-4 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: "a" 30px "b" auto "c" 17px/1fr;
  overflow: hidden;
}
.w-4 > * {
  display: grid;
}
.w-4 > .ga {
  grid-area: a;
}
.w-4 > .ga1 {
  grid-area: a1;
}
.w-4 > .gb {
  grid-area: b;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  row-gap: 12px;
  padding: 0 3vw;
}
.w-4 > .gb-vt {
  grid-area: b;
  grid-template-areas: "a" "b" "c" "d";
  row-gap: 20px;
  padding: 0 3vw;
  transform: translateY(7px);
  -webkit-transform: translateY(7px);
  -moz-transform: translateY(7px);
  -ms-transform: translateY(7px);
  -o-transform: translateY(7px);
}
.w-4 > .gb-vt:focus, .w-4 > .gb-vt:hover {
  background: none;
}
.w-4 > .gb-vt .vt1 {
  grid-area: a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.401);
  border-style: none none dashed none;
  width: 75%;
  margin-left: auto;
}
.w-4 > .gb-vt .vt2 {
  grid-area: b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.401);
  border-style: none none dashed none;
  width: 75%;
  margin-left: auto;
}
.w-4 > .gb-vt .vt3 {
  grid-area: c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.401);
  border-style: none none dashed none;
  width: 75%;
  margin-left: auto;
}
.w-4 > .gb-vt .vt4 {
  grid-area: d;
}
.w-4 > .gb_litter {
  grid-area: b;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: ". . ." ". . ." ". a .";
  row-gap: 3vw;
}
.w-4 > .gb_litter > .litter_order9:nth-of-type(1) {
  grid-area: a;
}
.w-4 > .gb_litter_word {
  grid-area: b;
  text-align: center;
  color: white;
  line-height: 1.5em;
  justify-self: center;
  align-self: start;
}
.w-4 > .gb_litter_numb {
  grid-area: b;
  justify-self: center;
  align-self: center;
}
.w-4 > .gc {
  grid-area: c;
  display: grid;
}
.w-4 > .gd {
  grid-area: d;
}

.w-record {
  display: grid;
  grid-template: "a" 144px "a1" 54px "b" auto "c" 100px/1fr;
  /*15%fromthetopandcentered*/
  width: 100%;
  margin-top: 103px;
}
.w-record > .ga {
  grid-area: a;
  z-index: 2;
}
.w-record > .ga1 {
  grid-area: a1;
  z-index: 2;
}
.w-record > .gb {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 1;
}
.w-record > .gc {
  grid-area: c;
  margin: auto 20px;
  z-index: 2;
}

.w19 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.w-record2 {
  display: grid;
  grid-template: "b" 210px "a" 1fr/1fr;
  /*15%fromthetopandcentered*/
  width: 100%;
  margin-top: 115px;
}
.w-record2 > .ga {
  grid-area: a;
}
.w-record2 > .gb {
  grid-area: b;
}
.w-record2 > .gc {
  grid-area: c;
}
.w-record2 > .gd {
  grid-area: d;
}

.w-record2-ct {
  display: grid;
  grid-template: "b" 100vw "a" 1fr/1fr;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 992px) {
  .w-record2-ct {
    grid-template: "b" 600px "a" 1fr/1fr;
  }
}
.w-record2-ct > .ga {
  grid-area: a;
}
.w-record2-ct > .gb {
  grid-area: b;
}
.w-record2-ct > .gc {
  grid-area: c;
}
.w-record2-ct > .gd {
  grid-area: d;
}

.w-record1 {
  display: grid;
  grid-template: "a" 1fr/1fr;
  width: 100%;
}
.w-record1 > .ga {
  grid-area: a;
}
.w-record1 > .gb {
  grid-area: b;
}
.w-record1 > .gb1 {
  grid-area: b1;
}
.w-record1 > .gc {
  grid-area: c;
}
.w-record1 > .gd {
  grid-area: d;
}

.w-certify {
  display: grid;
  grid-template: "back" 60px "profile" 185px "plogstat" 75px "divider" 13px "ploglist" 1fr/1fr;
  width: 100%;
  letter-spacing: -1px;
}
.w-certify > .g-prev {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.w-certify > .g-back {
  grid-area: back;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 19px;
  position: relative;
}
.w-certify > .g-cert {
  grid-area: back;
}
.w-certify > .g-profile {
  grid-area: profile;
}
.w-certify > .g-plogstat {
  grid-area: plogstat;
}
.w-certify > .g-divider {
  grid-area: divider;
  border-top: 0.5px solid rgba(169, 169, 169, 0.2196078431);
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}
.w-certify > .g-ploglist {
  grid-area: ploglist;
}

.w-plogcert-layout {
  display: grid;
  grid-template: "a  b  c" 1fr/auto auto auto;
}
.w-plogcert-layout > * {
  width: -moz-max-content;
  width: max-content;
  padding: 0px 5.3vw;
}
.w-plogcert-layout > .ga {
  grid-area: a;
}
.w-plogcert-layout > .gb {
  grid-area: b;
}
.w-plogcert-layout > .gc {
  grid-area: c;
}

.w-plogstat-layout {
  display: grid;
  grid-template: "a  b  c" 1fr/auto auto auto;
}
.w-plogstat-layout > * {
  width: -moz-max-content;
  width: max-content;
  padding: 0px 8px;
}
.w-plogstat-layout > .ga {
  grid-area: a;
}
.w-plogstat-layout > .gb {
  grid-area: b;
}
.w-plogstat-layout > .gc {
  grid-area: c;
}
.w-plogstat-layout > .gd {
  grid-area: d;
}

.item-divider {
  height: 13px;
  grid-area: divider;
  border-top: 0.5px solid rgba(169, 169, 169, 0.2196078431);
  border-bottom: 0.5px solid rgba(169, 169, 169, 0.2196078431);
}

.w-3a {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: "a" 3px "b" auto "c" 3px/1fr;
  gap: 3px;
  overflow: hidden;
}
.w-3a > * {
  display: grid;
}
.w-3a > .ga {
  grid-area: a;
}
.w-3a > .ga1 {
  grid-area: a1;
}
.w-3a > .gb {
  grid-area: b;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 10px;
}
.w-3a > .gc {
  grid-area: c;
  display: grid;
}
.w-3a > .gd {
  grid-area: d;
}

.wtest {
  height: 100%;
  display: grid;
  grid-template: "b" auto "a" 200px/1fr;
}
.wtest > .gb {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 1;
}
.wtest > .ga {
  grid-area: a;
  z-index: 12;
  background-color: blueviolet;
}

.w-header {
  display: grid;
  grid-template: "a" 60px/1fr;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 7;
}
.w-header > .gaa {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template: "a b c" 1fr/1fr 120px 1fr;
}
.w-header > .gaa > .ga {
  grid-area: a;
}
.w-header > .gaa > .gb {
  grid-area: b;
}
.w-header > .gaa > .gc {
  grid-area: c;
}
.w-header > .gaa_1 {
  background: transparent;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template: "a b c" 1fr/1fr 120px 1fr;
}
.w-header > .gaa_1 > .ga {
  grid-area: a;
}
.w-header > .gaa_1 > .gb {
  grid-area: b;
}
.w-header > .gaa_1 > .gc {
  grid-area: c;
}

.w-header1 {
  display: grid;
  grid-template: "a" 60px/1fr;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 7;
}
.w-header1 > .gaa {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template: "a b c" 1fr/1fr 100px 1fr;
}
.w-header1 > .gaa > .ga {
  grid-area: a;
}
.w-header1 > .gaa > .gb {
  grid-area: b;
}
.w-header1 > .gaa > .gc {
  grid-area: c;
}
.w-header1 > .g_menu {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
}
.w-header1 > .g_menu > .ga {
  grid-area: a;
  width: -moz-max-content;
  width: max-content;
}
.w-header1 > .g_menu > .gb {
  grid-area: b;
  width: -moz-max-content;
  width: max-content;
  justify-self: center;
}
.w-header1 > .g_menu > .gc {
  grid-area: c;
  width: -moz-max-content;
  width: max-content;
}
.w-header1 .header1_center {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -1.2px;
  margin-top: 2px;
  color: #005822;
}
.w-header1 .top_username {
  font-size: 16px;
  margin: 6px 0px 0 5px;
  letter-spacing: -0.7px;
  font-weight: 500;
  color: black;
}

.menu-bar-icon {
  width: 30px;
  height: 30px;
  color: var(--CSV-Color);
  background: url("../public/img/util/top-right-menu.svg") center no-repeat;
  background-size: contain;
}

.w-header2 {
  display: none;
  grid-template: "a" 60px/1fr;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 7;
}
.w-header2 > .gaa {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template: "a b c" 1fr/1fr 120px 1fr;
}
.w-header2 > .gaa > .ga {
  grid-area: a;
}
.w-header2 > .gaa > .gb {
  grid-area: b;
}
.w-header2 > .gaa > .gc {
  grid-area: c;
}
.w-header2 > .gaa_1 {
  background: white;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template: "a b c" 1fr/1fr 120px 1fr;
}
.w-header2 > .gaa_1 > .ga {
  grid-area: a;
}
.w-header2 > .gaa_1 > .gb {
  grid-area: b;
}
.w-header2 > .gaa_1 > .gc {
  grid-area: c;
}

#loglog {
  display: none;
  justify-items: center;
  align-items: center;
  color: rgb(0, 0, 0);
  position: absolute;
  z-index: 8;
  background: #d0ff00;
  border-radius: 10px;
  top: 117px;
  right: 10px;
  height: 75px;
  width: 75px;
  z-index: 50;
  align-content: center;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.42);
  animation: pop-out1 7.5s ease-in-out infinite forwards;
}
#loglog:after {
  content: "크루신청";
  font-size: 12px;
  color: rgb(0, 0, 0);
  font-weight: 600;
}

.w-s01 {
  height: 100%;
  display: grid;
  grid-template: "a" 60px "b" 50px "b1" 40px "c" auto "f" 80px/1fr;
  overflow: hidden;
}
.w-s01 > .gs {
  grid-area: s;
  width: 70%;
  margin: 0 auto;
}
.w-s01 > .gbb {
  grid-template: "a ab b bc c" 1fr/1fr 30px 1fr 30px 1fr;
  grid-area: b;
  z-index: 2;
}
.w-s01 > .gbb > .gall {
  grid-row: 1/-1;
  grid-template-rows: 1/-1;
}
.w-s01 > .gb1 {
  grid-area: b1;
  z-index: 1;
  overflow: hidden;
}
.w-s01 > .gc {
  grid-area: c;
  z-index: 1;
  overflow: hidden;
}
.w-s01 > .gm {
  height: 100%;
  width: 100%;
  overflow: hidden;
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 1;
}
.w-s01 > .gf {
  grid-area: f;
  z-index: 2;
}

.header_line {
  position: absolute;
  top: 103px;
  left: 15px;
  right: 15px;
  border-bottom: 1px solid rgb(141, 141, 141);
}

.w-s01-2 {
  height: 100%;
  display: grid;
  grid-template: "a" 60px "b" 44px "b1" 40px "c" 1fr "f" 80px/1fr;
  overflow: hidden;
  letter-spacing: -1.2px;
}
.w-s01-2 > .ga {
  grid-area: a;
  z-index: 1;
  height: 60px;
}
.w-s01-2 > .g-inner {
  grid-row: b/c;
  grid-column: 1/-1;
  z-index: 5;
}
.w-s01-2 > .g-prev {
  grid-area: a;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.w-s01-2 > .g-back {
  grid-area: a;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: 19px;
  position: relative;
  z-index: 50;
}
.w-s01-2 > .gbb {
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
}
.w-s01-2 > .gbb4 {
  grid-template: "a b c d" 1fr/1fr 1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
  font-size: 1.5em;
}
.w-s01-2 > .gbb3 {
  grid-template: "a b c " 1fr/1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
  font-size: 1.5em;
}
.w-s01-2 > .gb1 {
  grid-area: b1;
  z-index: 1;
  overflow: hidden;
}
.w-s01-2 > .gc {
  grid-area: c;
  z-index: 1;
  overflow: hidden;
}
.w-s01-2 > .gm {
  height: 100%;
  width: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 1;
}
.w-s01-2 .gs {
  height: 100%;
  width: 100%;
  grid-row: 3/-1;
  grid-column: 1/-1;
  z-index: 3;
}
.w-s01-2 > .gf {
  grid-area: f;
  z-index: 2;
}

.w-s01-3 {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: "a" 60px "b" 44px "b1" auto "gap" 40px "comment" 1fr "f" 20px/1fr;
  overflow: hidden;
  letter-spacing: -1.2px;
}
@media screen and (min-width: 992px) {
  .w-s01-3 {
    width: 500px;
    margin: 0 auto;
  }
}
.w-s01-3 > .g-prev {
  grid-area: a;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
}
.w-s01-3 > .g-back {
  grid-area: a;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 60px;
  padding-left: 15px;
  font-size: var(--font-2xl);
  position: relative;
  z-index: 50;
}
.w-s01-3 > .g-right {
  grid-area: a;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  font-size: var(--font-2xl);
  margin-right: 25px;
  position: relative;
  z-index: 25;
}
.w-s01-3 > .gbb {
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
}
.w-s01-3 > .gbb4 {
  grid-template: "a b c d" 1fr/1fr 1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
  font-size: var(--font-xl);
}
.w-s01-3 > .gbb3 {
  grid-template: "a b c " 1fr/1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
  font-size: var(--font-xl);
}
.w-s01-3 > .gm {
  height: 100%;
  width: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 1;
}
.w-s01-3 .gs {
  height: 100%;
  width: 100%;
  grid-row: 3/-1;
  grid-column: 1/-1;
  z-index: 3;
}
.w-s01-3 > .g-comment {
  grid-area: comment;
  z-index: 5;
}
.w-s01-3 > .gf {
  grid-area: f;
  z-index: 2;
}

.w-stats {
  height: calc(var(--vh, 1vh) * 100);
  display: grid;
  grid-template: "a" 60px "b" 44px "b1" 40px "c" 1fr "f" 80px/1fr;
  overflow: hidden;
  letter-spacing: -1.2px;
  z-index: 10;
  background: white;
}
.w-stats > .ga {
  display: flex;
  grid-area: a;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
  padding-left: 15px;
  font-size: 19px;
  position: relative;
  z-index: 6;
  width: -moz-max-content;
  width: max-content;
}
.w-stats > .gbb {
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
}
.w-stats > .gbb4 {
  grid-template: "a b c d" 1fr/1fr 1fr 1fr 1fr;
  grid-area: b;
  z-index: 4;
  font-size: 1.5em;
}
.w-stats > .gb1 {
  grid-area: b1;
  z-index: 1;
  overflow: hidden;
}
.w-stats > .gc {
  grid-area: c;
  z-index: 1;
  overflow: hidden;
}
.w-stats > .gm {
  height: 100%;
  width: 100%;
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 1;
}
.w-stats .gs {
  height: 100%;
  width: 100%;
  grid-row: 3/-1;
  grid-column: 1/-1;
  z-index: 3;
}
.w-stats > .gf {
  grid-area: f;
  z-index: 2;
}

.w12tt {
  display: grid;
  position: relative;
  grid-template: "a b" 1fr/auto auto;
}
.w12tt > * {
  display: grid;
}
.w12tt > .ga {
  grid-area: a;
}
.w12tt > .gb {
  grid-area: b;
}

.w12aa {
  display: grid;
  grid-template: "a b" 1fr/40px 1fr;
}
.w12aa > * {
  display: grid;
}
.w12aa > .ga {
  grid-area: a;
  z-index: 7;
}
.w12aa > .ga1 {
  grid-area: a;
  z-index: 10;
}
.w12aa > .gb {
  grid-area: b;
}

.w12 {
  display: grid;
  grid-template: "a b" 1fr/1fr 1fr;
}
.w12 > * {
  display: grid;
}
.w12 > .ga {
  grid-area: a;
  position: relative;
}
.w12 > .gb {
  grid-area: b;
}

.w12s {
  display: grid;
  grid-template: "a b" 1fr/1fr 1fr;
}
.w12s > * {
  display: grid;
}
.w12s > .ga {
  grid-area: a;
}
.w12s > .gb {
  grid-area: b;
}
.w12s > .gc {
  grid-area: c;
}

.w13s {
  display: grid;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
}
.w13s > * {
  display: grid;
}
.w13s > .ga {
  grid-area: a;
}
.w13s > .gb {
  grid-area: b;
}
.w13s > .gc {
  grid-area: c;
}

.w13 {
  display: grid;
  grid-template: "a b c" 1fr/120px auto 120px;
}
.w13 > * {
  display: grid;
}
.w13 > .ga {
  grid-area: a;
}
.w13 > .gb {
  grid-area: b;
}
.w13 > .gc {
  grid-area: c;
}

.w13b {
  display: grid;
  grid-template: "b c d" 1fr/auto auto auto;
}
.w13b > * {
  display: grid;
}
.w13b > .ga {
  grid-area: a;
}
.w13b > .gb {
  grid-area: b;
}
.w13b > .gc {
  grid-area: c;
}
.w13b > .gd {
  grid-area: d;
}

.w-rank1 {
  display: grid;
  grid-template: "a a a " 1fr "b c d" 1fr/1fr 1fr 1fr;
}
.w-rank1 > * {
  display: grid;
}
.w-rank1 > .ga {
  grid-area: a;
  font-size: 50px;
}
.w-rank1 > .gb {
  grid-area: b;
}
.w-rank1 > .gc {
  grid-area: c;
}
.w-rank1 > .gd {
  grid-area: d;
}

.w-rank1-ct {
  display: grid;
  grid-template: "a a a " 1fr "b c d" 0px/1fr 1fr 1fr;
  overflow: hidden;
}
.w-rank1-ct > * {
  display: grid;
}
.w-rank1-ct > .ga2 {
  grid-area: a;
  z-index: 2;
  align-self: flex-end;
  height: 42vw;
}
.w-rank1-ct > .ga22 {
  grid-area: a;
  z-index: 2;
  align-self: flex-end;
}
.w-rank1-ct > .ga3 {
  grid-area: a;
  z-index: 3;
  align-self: flex-end;
}
.w-rank1-ct > .ga4 {
  grid-area: a;
  z-index: 4;
  align-self: start;
  /* height: 41vw; */
  margin-top: 31.72px;
  font-size: 16px;
  font-family: "Noto Sans KR";
  letter-spacing: -0.5px;
}
.w-rank1-ct > .gb {
  grid-area: b;
  align-self: end;
}
.w-rank1-ct > .gc {
  grid-area: c;
  align-self: end;
}
.w-rank1-ct > .gd {
  grid-area: d;
  align-self: end;
}

.fc-dkg {
  color: #868686;
}

.fc-dkg2 {
  color: #3b3b3b;
}

.w14 {
  display: grid;
  grid-template: "a" 67px "b" 30px "c" 30px "d" 30px/1fr;
}
.w14 > .ga {
  grid-area: a;
}
.w14 > .gb {
  grid-area: b;
}
.w14 > .gc {
  grid-area: c;
}

.w14a {
  display: grid;
  grid-template: "a b c d" 1fr/auto auto auto auto;
}
.w14a > * {
  display: grid;
}
.w14a > .ga {
  grid-area: a;
}
.w14a > .gb {
  grid-area: b;
}
.w14a > .gc {
  grid-area: c;
}

.w14b {
  display: grid;
  grid-template: "a b c d" 1fr/1fr 1fr 1fr 1fr;
  padding: 14px 0px;
}
.w14b > * {
  display: grid;
}
.w14b > .ga {
  grid-area: a;
  font-size: 16px;
  font-weight: 600;
  color: rgb(75, 75, 75);
}
.w14b > .gb {
  grid-area: b;
  justify-self: start;
}
.w14b > .gc {
  grid-area: c;
  font-size: 18px;
  font-weight: 800;
  color: rgb(75, 75, 75);
}

.w14bb {
  display: grid;
  grid-template: "a b c d" 1fr/55px 1fr 30px 30px;
  font-family: "Noto Sans KR", sans-serif;
  padding: 10px 0px;
  font-size: 15px;
  color: rgb(75, 75, 75);
  border-radius: 30px;
}
.w14bb > * {
  display: grid;
}
.w14bb > .ga {
  grid-area: a;
  justify-self: center;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcdcdc;
  justify-items: center;
  align-items: center;
  font-size: small;
}
.w14bb > .gb {
  grid-area: b;
  justify-self: start;
}
.w14bb > .gc {
  grid-area: c;
  justify-self: end;
  font-family: "Anton";
  font-weight: 100;
}

.w14bb-list {
  display: grid;
  grid-template: "a p b c d e " 1fr/24px 11px 38px 1fr 70px 6px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 13px;
  height: 26px;
  padding: 0px 20px;
  color: rgb(32, 32, 32);
  border-radius: 0px;
}
.w14bb-list > * {
  display: grid;
}
.w14bb-list > .gfill {
  grid-row: 1/-1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 3/4;
  width: 100%;
  z-index: -1;
  height: 22px;
  background: #08d683;
}
.w14bb-list > .ga {
  grid-area: a;
  justify-self: center;
  font-weight: 600;
  justify-items: center;
  align-items: center;
  /* font-size: small; */
}
.w14bb-list > .gp {
  grid-area: p;
  justify-self: start;
}
.w14bb-list > .gb {
  grid-area: b;
  justify-self: start;
  letter-spacing: -0.5px;
}
.w14bb-list > .gc {
  grid-row: 1/-1;
  grid-column: 2/-1;
  justify-self: start;
  font-family: "Anton";
  font-weight: 100;
  width: 100%;
  background: rgba(255, 255, 255, 0.0705882353);
  border-radius: 25px 0 0 25px;
}
.w14bb-list > .gd {
  grid-area: d;
  justify-self: end;
  font-family: "Anton";
  font-weight: 100;
}
.w14bb-list > .gd2 {
  z-index: 2;
  grid-area: d;
  justify-self: end;
  font-family: "Anton";
  font-weight: 100;
}
.w14bb-list > .gd3 {
  z-index: 3;
  grid-area: d;
  justify-self: right;
  font-family: "Barlow Semi Condensed";
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0px;
  color: #404040;
  font-size: 18px;
}

.w14_list {
  display: grid;
  grid-template: "a i b c d" 1fr/55px 42px 1fr 1fr 1fr;
  font-family: "Noto Sans KR", sans-serif;
  padding: 10px 0px;
  font-size: 15px;
  color: rgb(75, 75, 75);
  border-radius: 30px;
}
.w14_list > * {
  display: grid;
}
.w14_list > .ga {
  grid-area: a;
  justify-self: center;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcdcdc;
  justify-items: center;
  align-items: center;
  font-size: small;
}
.w14_list > .gi {
  grid-area: i;
  justify-self: start;
}
.w14_list > .gb {
  grid-area: b;
  justify-self: start;
  font-family: "Anton";
  font-weight: 100;
}
.w14_list > .gc {
  grid-area: c;
  justify-self: center;
}
.w14_list > .gd {
  grid-area: d;
  justify-self: center;
}

.w-cur {
  display: grid;
  grid-template: "a i b c d" 1fr/20px 67px 100px 1fr 1fr;
  padding: 14px 14px;
}
.w-cur > * {
  display: grid;
}
.w-cur > .gi {
  grid-area: i;
}
.w-cur > .ga {
  grid-area: a;
}
.w-cur > .gb {
  grid-area: b;
  justify-self: start;
}
.w-cur > .gc {
  grid-area: c;
}
.w-cur > .gd {
  grid-area: d;
}

.w-allr {
  display: grid;
  grid-template: "a i b c d" 1fr/20px 67px 100px 1fr 1fr;
  padding: 12px 12px;
  border-bottom: 1px solid black;
}
.w-allr > * {
  display: grid;
}
.w-allr > :nth-last-child(1) {
  border: none;
}
.w-allr > .ga {
  grid-area: a;
  font-size: 13px;
  color: rgb(75, 75, 75);
}
.w-allr > .gi {
  grid-area: i;
}
.w-allr > .gb {
  grid-area: b;
  justify-self: start;
}
.w-allr > .gc {
  grid-area: c;
  font-size: 18px;
  color: rgb(75, 75, 75);
}
.w-allr > .gd {
  grid-area: d;
}

.clearnum-bullet-style {
  background: aliceblue;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--admin-maincolor);
}

.juppics_empty {
  background: #2f9b69;
}

.wmark_container {
  position: absolute;
  /* height: 100%; */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2117647059) 3%, transparent 29%, transparent 78%, rgba(0, 0, 0, 0.3215686275) 100%);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.w-record-wtmk {
  display: grid;
  grid-template: "top" 100px "top1" 30px "cen" 1fr "btm1" 114px "btm" 15px/1fr;
  font-size: 12px;
  padding: var(--font-4xl);
  font-weight: 600;
  border-radius: 10px;
  color: rgb(255, 255, 255);
  overflow: auto;
  width: 100%;
  height: 100%;
}
.w-record-wtmk > * {
  display: grid;
  position: relative;
}
.w-record-wtmk > .top {
  grid-area: top;
}
.w-record-wtmk > .top1 {
  grid-area: top1;
}
.w-record-wtmk > .cen {
  grid-area: cen;
}
.w-record-wtmk > .btm1 {
  grid-area: btm1;
}
.w-record-wtmk > .btm {
  grid-area: btm;
  grid-template: "a b c" 1fr/0.8fr 1fr 1fr;
}
.w-record-wtmk > .btm > * {
  display: grid;
  position: relative;
}
.w-record-wtmk > .btm > .ga {
  grid-area: a;
  position: relative;
}
.w-record-wtmk > .btm > .ga:after {
  position: absolute;
  content: "CLEAR";
  font-size: 10px;
  bottom: 4px;
  right: -28px;
}
.w-record-wtmk > .btm > .gb {
  grid-area: b;
  position: relative;
}
.w-record-wtmk > .btm > .gb:after {
  content: "KM";
  position: absolute;
  font-size: 10px;
  bottom: 4px;
  right: -15px;
}
.w-record-wtmk > .btm > .gc {
  grid-area: c;
  position: relative;
}
.w-record-wtmk > .btm > .gc:before {
  font-family: FontAwesome;
  content: "\f017";
  position: absolute;
  font-size: 14px;
  top: 2px;
  left: -14px;
}
.w-record-wtmk > .btm > .gc:after {
  content: "SEC";
  position: absolute;
  font-size: 10px;
  bottom: 4px;
  right: -16px;
}
.w-record-wtmk > .btm_2 {
  grid-area: btm;
  grid-template: "a b c" 1fr/0.8fr 1fr 1fr;
  font-family: "Barlow Condensed", "Oswald";
  font-style: italic;
  letter-spacing: 0.1px;
}
.w-record-wtmk > .btm_2 > * {
  display: grid;
  position: relative;
  width: -moz-max-content;
  width: max-content;
}
.w-record-wtmk > .btm_2 > .ga {
  grid-area: a;
  position: relative;
}
.w-record-wtmk > .btm_2 > .gb {
  grid-area: b;
  position: relative;
}
.w-record-wtmk > .btm_2 > .gc {
  grid-area: c;
  position: relative;
}

.w-record4 {
  display: grid;
  grid-template: "t t t" 19px "a b c" 1fr/111px 1fr 24px;
  font-size: 12px;
  padding: 5px 10px;
  font-weight: 600;
  border-radius: 10px;
  color: black;
  overflow: auto;
  width: 100%;
}
.w-record4 > * {
  display: grid;
  position: relative;
}
.w-record4 > .gt {
  grid-area: t;
  font-family: "Noto Sans KR", sans-serif;
  color: rgb(107, 107, 107);
  margin-left: 10px;
  font-size: 12px;
  font-weight: 300;
}
.w-record4 > .ga {
  grid-area: a;
}
.w-record4 > .gb {
  grid-area: b;
  grid-template: "aa bb" 1fr "cc dd" 1fr "ee ee" 1fr/1fr 1fr;
  height: 90px;
}
.w-record4 > .gb > * {
  display: grid;
  position: relative;
  justify-self: start;
}
.w-record4 > .gb > .gaa {
  grid-row: 1;
  grid-column: 1/-1;
  font-size: 16px;
  font-family: "Noto Sans KR", sans-serif;
  color: grey;
  font-weight: 300;
}
.w-record4 > .gb > .gaa:after {
  content: "";
  position: absolute;
  font-size: 9px;
  left: 10px;
  line-height: 21px;
}
.w-record4 > .gb > .gbb {
  grid-area: bb;
  font-size: 9px;
}
.w-record4 > .gb > .gbb:before {
  content: "";
  font-family: FontAwesome;
  position: absolute;
  left: -24px;
}
.w-record4 > .gb > .gcc {
  grid-area: cc;
  font-size: 27px;
}
.w-record4 > .gb > .gcc:after {
  content: "km";
  position: absolute;
  font-size: 9px;
  right: -15px;
  bottom: 3px;
}
.w-record4 > .gb > .gdd {
  grid-area: dd;
  font-size: 27px;
  color: #04a976;
  justify-self: center;
}
.w-record4 > .gb > .gdd:before {
  content: "\f1b8";
  font-family: FontAwesome;
  position: absolute;
  left: -20px;
  top: 4px;
  font-size: 15px;
  line-height: 28px;
}
.w-record4 > .gb > .gdd:after {
  content: "CATCH";
  position: absolute;
  font-size: 9px;
  right: -22px;
  bottom: 3px;
}
.w-record4 > .gb > .gee {
  grid-area: ee;
  margin-right: 36px;
  font-size: 17px;
}
.w-record4 > .gb > .gee:after {
  content: "sec";
  position: absolute;
  font-size: 9px;
  right: -17px;
  line-height: 15px;
}
.w-record4 > .gb > .gff {
  grid-area: ff;
}
.w-record4 > .gc:before {
  content: "\f105";
  font-family: FontAwesome;
  font-size: 15px;
  margin-right: 10px;
}

.w-record5 {
  display: grid;
  grid-template: "a b" 1fr/100px 1fr;
  font-size: 15px;
  font-weight: 600;
  color: rgb(0, 0, 0);
  overflow: auto;
  padding: 15px 7px;
  border-bottom: 1px solid gray;
}
.w-record5 > * {
  display: grid;
  position: relative;
}
.w-record5 > .ga {
  grid-area: a;
}
.w-record5 > .gb {
  grid-area: b;
  grid-template: "aa bb" 1fr "cc dd" 1fr "ee ff" 1fr/1fr 1fr;
  height: 90px;
}
.w-record5 > .gb > * {
  display: grid;
  position: relative;
}
.w-record5 > .gb > .gaa {
  grid-row: 1;
  grid-column: 1/-1;
  font-size: 13px;
  font-family: "Noto Sans KR", sans-serif;
  margin-left: 28px;
  color: grey;
  font-weight: 300;
}
.w-record5 > .gb > .gaa:after {
  content: "";
  position: absolute;
  font-size: 9px;
  left: 10px;
  line-height: 21px;
}
.w-record5 > .gb > .gbb {
  grid-area: bb;
  font-size: 9px;
}
.w-record5 > .gb > .gbb:before {
  content: "";
  font-family: FontAwesome;
  position: absolute;
  left: -24px;
}
.w-record5 > .gb > .gcc {
  grid-area: cc;
  font-size: 37px;
}
.w-record5 > .gb > .gcc:after {
  content: "km";
  position: absolute;
  font-size: 9px;
  left: 73px;
  line-height: 65px;
}
.w-record5 > .gb > .gdd {
  grid-area: dd;
  font-size: 30px;
  color: #04a976;
  justify-self: end;
}
.w-record5 > .gb > .gdd:before {
  font-family: FontAwesome;
  position: absolute;
  left: -20px;
  top: 4px;
  font-size: 15px;
  line-height: 28px;
}
.w-record5 > .gb > .gdd:after {
  content: "plog";
  position: absolute;
  font-size: 9px;
  right: -21px;
  line-height: 67px;
}
.w-record5 > .gb > .gee {
  grid-area: ee;
  margin-right: 8px;
  font-size: 13px;
  font-family: "Noto Sans KR", sans-serif;
  color: grey;
  font-weight: 300;
}
.w-record5 > .gb > .gee:after {
  content: "sec";
  position: absolute;
  font-size: 9px;
  right: -16px;
  line-height: 18px;
}
.w-record5 > .gb > .gff {
  grid-area: ff;
}

.w-rec6-date {
  display: grid;
  position: relative;
  font-family: "Noto Sans KR", sans-serif;
  color: rgb(255, 255, 255);
  margin-left: 10px;
  font-size: 15px;
  font-weight: 300;
}

.w-record6 {
  display: grid;
  grid-template: "a b c" 1fr/70px 1fr 30px;
  font-size: 15px;
  font-weight: 600;
  margin: 20px 5px;
  background: white;
  border: 1px solid #007e56;
  border-radius: 50px;
  color: #4a4a4a;
  overflow: auto;
  padding: 2px 2px;
}
.w-record6 > * {
  display: grid;
  position: relative;
  z-index: 2;
}
.w-record6 .gabc {
  grid-row: 1/-1;
  grid-column: 1/-1;
  border-radius: 30px;
  background-color: rgba(95, 158, 160, 0.363);
  z-index: 1;
}
.w-record6 > .ga {
  grid-area: a;
}
.w-record6 > .gb {
  grid-area: b;
  grid-template: "aa bb cc" 1fr/1fr 2fr 2fr;
}
.w-record6 > .gb > * {
  display: grid;
  position: relative;
}
.w-record6 > .gb > .gaa {
  grid-row: 1;
  grid-column: 1/-1;
  font-size: 20px;
  font-weight: 300;
}
.w-record6 > .gb > .gaa:after {
  content: "clear";
  position: absolute;
  font-size: 9px;
  right: -24px;
  line-height: 32px;
}
.w-record6 > .gb > .gbb {
  grid-area: bb;
  font-size: 20px;
}
.w-record6 > .gb > .gbb:after {
  content: "KM";
  position: absolute;
  font-size: 19px;
  right: -26px;
  top: 2px;
}
.w-record6 > .gb > .gcc {
  grid-area: cc;
  font-size: 20px;
}
.w-record6 > .gb > .gcc:before {
  content: "\f017";
  font-family: FontAwesome;
  position: absolute;
  font-size: 18px;
  /* color: grey; */
  top: 2px;
  left: -19px;
}
.w-record6 > .gb > .gdd {
  grid-area: dd;
  font-size: 12px;
  color: #04a976;
}
.w-record6 > .gb > .gdd:before {
  font-family: FontAwesome;
  position: absolute;
  left: -20px;
  top: 4px;
  font-size: 9px;
  line-height: 28px;
}
.w-record6 > .gb > .gdd:after {
  content: "줍줍";
  position: absolute;
  font-size: 9px;
  right: -21px;
  line-height: 67px;
}
.w-record6 > .gb > .gee {
  grid-area: ee;
  margin-right: 36px;
  font-size: 12px;
}
.w-record6 > .gb > .gee:after {
  content: "sec";
  position: absolute;
  font-size: 9px;
  right: -16px;
  line-height: 18px;
}
.w-record6 > .gb > .gff {
  grid-area: ff;
  font-size: 12px;
}
.w-record6 > .gc {
  grid-area: c;
}
.w-record6 > .gc:before {
  content: "\f105";
  font-family: FontAwesome;
  font-size: 27px;
  color: #04a976;
  margin-right: 10px;
}

.w14c {
  display: grid;
  grid-auto-columns: auto;
  padding: 13px 29px;
  font-size: 15px;
  font-weight: 600;
  color: rgb(0, 0, 0);
  overflow: auto;
}
.w14c > * {
  display: grid;
  position: relative;
}
.w14c > .ga:before {
  content: "\f11e";
  font-family: FontAwesome;
  position: absolute;
  left: -18px;
}
.w14c > .gb:before {
  content: "\f1b8";
  font-family: FontAwesome;
  position: absolute;
  left: -18px;
}
.w14c > .gc:before {
  content: "\f124";
  font-family: FontAwesome;
  position: absolute;
  left: -18px;
}
.w14c > .gc:after {
  content: "km";
  position: absolute;
  font-size: 9px;
  left: 10px;
  line-height: 21px;
}
.w14c > .gd:before {
  content: "\f017";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  position: absolute;
  left: -18px;
}

.w14c1 {
  display: grid;
  grid-template: "a b c d" 1fr/1fr 1fr 1fr 1fr;
  padding: 10px 0px;
  font-size: 19px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7882352941);
  border-radius: 30px;
  color: #242424;
  overflow: auto;
  /* margin-top: -41px; */
  /* margin-bottom: 36px; */
  margin: -52px 13px 33px 13px;
}
.w14c1 > * {
  display: grid;
}
.w14c1 > .ga {
  grid-area: a;
}
.w14c1 > .gb {
  grid-area: b;
}
.w14c1 > .gc {
  grid-area: c;
}

.w111 {
  display: grid;
  grid-template: "a" 1fr "b" 1fr "c" 1fr "d" 1fr/1fr;
}
.w111 > * {
  display: grid;
}
.w111 > .ga {
  grid-area: a;
}
.w111 > .gb {
  grid-area: b;
}
.w111 > .gc {
  grid-area: c;
}
.w111 > .gd {
  grid-area: d;
}

.w31 {
  display: grid;
  grid-template: "a" 40px "b" auto "c" 80px "d" 20px/1fr;
}
.w31 > .ga {
  grid-area: a;
}
.w31 > .gb {
  grid-area: b;
}
.w31 > .gc {
  grid-area: c;
}
.w31 > .gd {
  grid-area: d;
}

.w-1 {
  height: 100%;
  display: grid;
  grid-template: "a" 40px "b" auto/1fr;
  gap: 3px;
}
.w-1 > * {
  display: grid;
}

.g-all {
  grid-row: 1/-1;
  grid-column: 1/-1;
}

.g-a {
  grid-area: a;
  display: grid;
  justify-content: center;
  align-items: center;
}

.g-b {
  height: 100%;
  grid-area: b;
  display: grid;
  grid-template: "aa" auto "bb" 60px/1fr;
}

.g-b-a {
  grid-area: aa;
  display: grid;
  grid-template: "a a" 200px "a a" auto "b b" 100px "c c" 10px/2fr 1fr;
}

.g-b-a-a {
  grid-area: a;
}

.g-b-a-a-p {
  grid-row: 1;
  grid-column: 2;
  z-index: 3;
  display: grid;
  justify-items: center;
  justify-content: flex-end;
  align-content: space-around;
}

.g-b-a-b {
  grid-area: b;
  align-self: center;
}

.g-b-a-c {
  grid-area: c;
  display: grid;
  grid-template: "a b c" 1fr/40px 80px 40px;
}

.g-b-a-c-a {
  grid-area: a;
}

.g-b-a-c-b {
  grid-area: b;
}

.g-b-a-c-c {
  grid-area: c;
}

.g-b-b {
  grid-area: bb;
  display: grid;
  grid-template: "aa bb cc" 1fr/40px auto 40px;
}

.g-b-b-a {
  grid-area: aa;
}

.g-b-b-b {
  grid-area: bb;
}

.g-b-b-c {
  grid-area: cc;
}

.js-c {
  justify-self: center;
}

.js-s {
  justify-self: flex-start;
}

.js-e {
  justify-self: flex-end;
}

.as-c {
  align-self: center;
}

.as-s {
  align-self: flex-start;
}

.as-e {
  align-self: flex-end;
}

.jc-bt,
.justify-between {
  justify-content: space-between !important;
}

.jc-ar,
.justify-around {
  justify-content: space-around !important;
}

.jc-c,
.justify-center {
  justify-content: center !important;
}

.jc-s,
.justify-start {
  justify-content: flex-start !important;
}

.jc-e,
.justify-end {
  justify-content: flex-end !important;
}

.jc-ev,
.justify-evenly {
  justify-content: space-evenly !important;
}

.ji-a {
  justify-items: flex-start;
}

.ji-e {
  justify-items: flex-end;
}

.ji-c {
  justify-items: center;
}

.ji-s {
  justify-items: flex-start;
}

.ac-c {
  align-content: center;
}

.ac-s {
  align-content: flex-start;
}

.ai-c,
.items-center {
  align-items: center !important;
}

.ai-b {
  align-items: baseline !important;
}

.ai-s,
.items-start {
  align-items: flex-start !important;
}

.ai-e,
.items-end {
  align-items: flex-end !important;
}

.ac-bt {
  -webkit-box-align: space-between !important;
  align-content: space-between !important;
}

.g-c {
  grid-area: c;
  display: grid;
  justify-self: flex-start;
  align-items: center;
}

.g-d {
  grid-area: d;
  display: grid;
  grid-template: "ca cb cc" 1fr/80px auto 80px;
  justify-content: stretch;
  align-items: center;
}

.g-d-a {
  grid-area: ca;
}

.g-d-c {
  grid-area: cb;
}

.g-d-c {
  grid-area: cc;
}

.g-e {
  grid-area: e;
}

.gw-2 {
  display: grid;
  grid-template: "a b" 1fr 2fr/1fr;
}
.gw-2 > .ga {
  grid-area: a;
}
.gw-2 > .gb {
  grid-area: b;
}

.rank-contain {
  display: grid;
  grid-template: "a" auto "u" 60px "b" 1fr/1fr;
  margin: 100px 18px 0 18px;
  padding: 20px 0;
}
.rank-contain .userinfo {
  grid-area: u;
  display: grid;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: none;
  height: 50px;
}
.rank-contain .userinfo > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-contain .toprank {
  grid-area: a;
  display: grid;
  grid-auto-rows: min-content;
  grid-row-gap: 19px;
  margin-top: 6px;
  height: 214px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}
.rank-contain .toprank > * {
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.12);
}
.rank-contain .toprank > :first-child {
  border: solid 0.125em #ecc81a;
}
.rank-contain .toprank > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-contain .toprank > :nth-child(3) {
  border: solid 0.125em #dfdfd1;
}
.rank-contain .rank-list {
  grid-area: b;
  display: grid;
  grid-auto-rows: min-content;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.12);
  border-radius: 0.375rem;
  border: solid 0.063em #dbe2e8;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 421px);
  overscroll-behavior: contain;
}
.rank-contain .rank-list > :nth-child(even) {
  background-color: #fafbfc;
}

.rank-contain-ct {
  display: grid;
  grid-template: "t" 30px "a" 225px "u" 50px "b" 1fr/1fr;
  margin: 100px 0px 0 0px;
  padding: 10px 0 0 0 0;
}
.rank-contain-ct .toptitle-ct {
  grid-area: t;
  display: grid;
  grid-template: "a b c d" 1fr/1fr 1fr 1fr 1fr;
  z-index: 4;
  font-size: 1.5em;
  letter-spacing: -1.2px;
  z-index: 12;
}
.rank-contain-ct .toptitle-ct > * {
  width: 100%;
  text-align: center;
}
.rank-contain-ct .toprank-ct {
  grid-area: a;
  display: grid;
  grid-template: "r2 r1 r3" 1fr/1fr 1fr 1fr;
  grid-row-gap: 19px;
  grid-column-gap: 10px;
  margin-top: 6px;
  margin: 6px 30px 0 30px;
  height: 214px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}
.rank-contain-ct .toprank-ct > :first-child {
  grid-area: r1;
}
.rank-contain-ct .toprank-ct > :nth-child(2) {
  grid-area: r2;
  transform: translateY(17px);
  -webkit-transform: translateY(17px);
  -moz-transform: translateY(17px);
  -ms-transform: translateY(17px);
  -o-transform: translateY(17px);
}
.rank-contain-ct .toprank-ct > :nth-child(3) {
  grid-area: r3;
  transform: translateY(17px);
  -webkit-transform: translateY(17px);
  -moz-transform: translateY(17px);
  -ms-transform: translateY(17px);
  -o-transform: translateY(17px);
}
.rank-contain-ct .userinfo-ct {
  grid-area: u;
  display: grid;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: none;
  height: 50px;
}
.rank-contain-ct .userinfo-ct > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-contain-ct .rank-list-ct {
  grid-area: b;
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 400px);
  overscroll-behavior: contain;
}
.rank-contain-ct .rank-list-ct > :nth-child(odd) {
  background-color: none;
}
.rank-contain-ct .rank-list-ct-bar {
  grid-area: b;
  z-index: 2;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 421px);
  overscroll-behavior: contain;
}

.rank-contain-ct-1 {
  display: grid;
  grid-template: "tab" 20px "a" 225px "u" 50px "b" 1fr/1fr;
  margin: 60px 0px 0 0px;
  padding: 10px 0 0 0;
  background: #ffffff;
  border-radius: 31px 30px 0 0;
}
.rank-contain-ct-1 .g_tab {
  grid-area: tab;
}
.rank-contain-ct-1 .toprank-ct {
  grid-area: a;
  display: grid;
  grid-template: "r2 r1 r3" 1fr/1fr 1fr 1fr;
  grid-row-gap: 19px;
  grid-column-gap: 10px;
  margin-top: 6px;
  margin: 0px 20px 0 20px;
  height: 214px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}
.rank-contain-ct-1 .toprank-ct > :first-child {
  grid-area: r1;
}
.rank-contain-ct-1 .toprank-ct > :nth-child(2) {
  grid-area: r2;
  transform: translateY(17px);
}
.rank-contain-ct-1 .toprank-ct > :nth-child(3) {
  grid-area: r3;
  transform: translateY(17px);
}
.rank-contain-ct-1 .userinfo-ct {
  grid-area: u;
  display: grid;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: none;
  height: 50px;
}
.rank-contain-ct-1 .userinfo-ct > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-contain-ct-1 .rank-list-ct {
  grid-area: b;
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 386px);
  overscroll-behavior: contain;
}
.rank-contain-ct-1 .rank-list-ct > :nth-child(odd) {
  background-color: none;
}
.rank-contain-ct-1 .rank-list-ct-bar {
  grid-area: b;
  z-index: 2;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 421px);
  overscroll-behavior: contain;
}

.rank-container-grid {
  display: grid;
  grid-template: "tab" 20px "a" 225px "u" 50px "b" 1fr/1fr;
  background: #ffffff;
  border-radius: 30px 30px 0 0;
}
.rank-container-grid .g_tab {
  grid-area: tab;
}
.rank-container-grid .toprank-ct {
  grid-area: a;
  display: grid;
  grid-template: "r2 r1 r3" 1fr/1fr 1fr 1fr;
  grid-row-gap: 19px;
  grid-column-gap: 10px;
  margin-top: 6px;
  margin: 0px 20px 0 20px;
  height: 214px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}
.rank-container-grid .toprank-ct > :first-child {
  grid-area: r1;
}
.rank-container-grid .toprank-ct > :nth-child(2) {
  grid-area: r2;
  transform: translateY(17px);
  -webkit-transform: translateY(17px);
  -moz-transform: translateY(17px);
  -ms-transform: translateY(17px);
  -o-transform: translateY(17px);
}
.rank-container-grid .toprank-ct > :nth-child(3) {
  grid-area: r3;
  transform: translateY(17px);
  -webkit-transform: translateY(17px);
  -moz-transform: translateY(17px);
  -ms-transform: translateY(17px);
  -o-transform: translateY(17px);
}
.rank-container-grid .userinfo-ct {
  grid-area: u;
  display: grid;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: none;
  height: 50px;
}
.rank-container-grid .userinfo-ct > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-container-grid .rank-list-ct {
  grid-area: b;
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 440px);
  overscroll-behavior: contain;
}
.rank-container-grid .rank-list-ct > :nth-child(odd) {
  background-color: none;
}
.rank-container-grid .rank-list-ct-bar {
  grid-area: b;
  z-index: 2;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 421px);
  overscroll-behavior: contain;
}

.rank-contain-ct2 {
  display: grid;
  grid-template: "a" auto "u" 60px "b" 1fr/1fr;
  margin: 100px 18px 0 18px;
  padding: 10px 0 0 0;
}
.rank-contain-ct2 .userinfo-ct2 {
  grid-area: u;
  display: grid;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: none;
  height: 50px;
}
.rank-contain-ct2 .userinfo-ct2 > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-contain-ct2 .toprank-ct2 {
  grid-area: a;
  display: grid;
  grid-auto-rows: min-content;
  grid-row-gap: 19px;
  margin-top: 6px;
  height: 214px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}
.rank-contain-ct2 .toprank-ct2 > * {
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.12);
}
.rank-contain-ct2 .toprank-ct2 > :first-child {
  border: solid 0.125em #ecc81a;
}
.rank-contain-ct2 .toprank-ct2 > :nth-child(2) {
  border: solid 0.125em #dbe2e8;
}
.rank-contain-ct2 .toprank-ct2 > :nth-child(3) {
  border: solid 0.125em #dfdfd1;
}
.rank-contain-ct2 .rank-list-ct2 {
  grid-area: b;
  display: grid;
  grid-auto-rows: min-content;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.12);
  border-radius: 0.375rem;
  border: solid 0.063em #dbe2e8;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 421px);
  overscroll-behavior: contain;
}
.rank-contain-ct2 .rank-list-ct2 > :nth-child(even) {
  background-color: #fafbfc;
}

.w14bb-top-ct2 {
  display: grid;
  grid-template: "a b c d" 1fr/55px 1fr 30px 30px;
  font-family: "Noto Sans KR", sans-serif;
  padding: 10px 0px;
  font-size: 15px;
  color: rgb(75, 75, 75);
  border-radius: 30px;
}
.w14bb-top-ct2 > * {
  display: grid;
}
.w14bb-top-ct2 > .ga {
  grid-area: a;
  justify-self: center;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcdcdc;
  justify-items: center;
  align-items: center;
  font-size: small;
}
.w14bb-top-ct2 > .gb {
  grid-area: b;
  justify-self: start;
}
.w14bb-top-ct2 > .gc {
  grid-area: c;
  justify-self: end;
  font-family: "Anton";
  font-weight: 100;
}

.w14bb-top {
  display: grid;
  grid-template: "b" 7px "c" 121px "d" 27px/1fr;
  font-family: "Noto Sans KR", sans-serif;
  padding: 10px 0px;
  font-size: 15px;
  color: rgb(75, 75, 75);
  border-radius: 30px;
}
.w14bb-top > * {
  display: grid;
}
.w14bb-top > .ga {
  grid-area: a;
  justify-self: center;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcdcdc;
  justify-items: center;
  align-items: center;
  font-size: small;
}
.w14bb-top > .gp {
  grid-area: p;
}
.w14bb-top > .gb {
  grid-area: b;
}
.w14bb-top > .gc1 {
  z-index: 1;
  grid-area: c;
  font-family: "oswald";
  font-weight: 100;
}
.w14bb-top > .gc2 {
  z-index: 2;
  grid-area: c;
  font-family: "oswald";
  font-weight: 100;
}
.w14bb-top > .gc3 {
  z-index: 3;
  grid-area: c;
  letter-spacing: -1.5px;
}
.w14bb-top > .gd {
  grid-area: d;
  font-family: "Oswald";
}

.rank-contain_n1 {
  display: grid;
  grid-template: "u" 20px "a" 81px "b" 1fr/1fr;
  margin: 100px 18px 0 18px;
  padding: 20px 0;
}

.userinfo_n1 {
  display: grid;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: none;
  height: 23px;
}

.toprank_n1 {
  display: grid;
  grid-auto-rows: min-content;
  grid-row-gap: 19px;
  margin-top: 6px;
  height: 214px;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

.rank-list_n1 {
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 421px);
  overscroll-behavior: contain;
}

.update_alarm_modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
  padding: 40px;
  text-align: center;
  /* Stay in place */
  z-index: 1500;
  /* Sit on top */
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #006949;
  /* Fallback color */
}

.gss {
  justify-self: start;
  align-self: start;
}

.w-swipe01 {
  display: grid;
  grid-template-columns: repeat(3, 100%);
  will-change: transform;
  align-content: center;
  overflow-x: auto;
  scroll-snap-coordinate: 0 0;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.w-swipe01 > .swipesect {
  height: 100%;
  scroll-snap-align: start;
}

/* The Modal (background) */
.msgmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 150;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  align-items: center;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.185);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.msgmodal-content {
  background-color: white;
  background: url(../public/img/util/intromsg1.svg) no-repeat center;
  background-size: contain;
  position: relative;
  margin: auto;
  right: 0;
  top: 39px;
  width: 220px;
  height: 220px;
}
.msgmodal-content > .ga {
  grid-area: a;
}
.msgmodal-content > .gb {
  grid-area: b;
}
.msgmodal-content > .gb1 {
  grid-area: b1;
}
.msgmodal-content > .gc {
  grid-area: c;
}
.msgmodal-content > .gd {
  grid-area: d;
}

/* The Close Button */
.msgclose {
  position: absolute;
  /* right: 39px; */
  top: 57px;
  /* left: 50px; */
  right: -15px;
  opacity: 1;
}
.msgclose:hover {
  opacity: 1;
}
.msgclose:before, .msgclose:after {
  position: absolute;
  /* left: 15px; */
  content: "";
  height: 30px;
  width: 2px;
  background-color: rgb(255, 255, 255);
}
.msgclose:before {
  transform: rotate(45deg);
}
.msgclose:after {
  transform: rotate(-45deg);
}

.gpagree {
  background-color: #000000;
  font-weight: 300;
  border: 1px solid;
  height: 42px;
  width: 161px;
  font-size: 16px;
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
  letter-spacing: -1.2px;
  border-radius: 0;
}
.gpagree:hover, .gpagree:focus {
  color: #ffffff;
  background-color: #353535;
}

.gpagree_w {
  background-color: #000000;
  font-weight: 300;
  border: 1px solid;
  height: 50px;
  width: 166px;
  font-size: 20px;
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
  border-radius: 30px;
}
.gpagree_w:hover, .gpagree_w:focus {
  color: #ffffff;
  background-color: #353535;
}

.gpmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 150;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  align-items: center;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.185);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.gpmodal-content {
  display: grid;
  position: absolute;
  font-family: "noto sans kr";
  grid-template: "a" 1fr "b" 2fr/1fr;
  /* background-color: white; */
  background: rgb(0, 0, 0);
  background-size: contain;
  /* top: 15%; */
  left: 0;
  margin: auto;
  right: 0;
  /* width: 90%; */
  height: 69%;
  padding: 42px;
}
.gpmodal-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  border-width: 50px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}
.gpmodal-content .headtitle {
  line-height: 29px;
  text-align: justify;
  color: #00ffb3;
  letter-spacing: -1.1px;
}
.gpmodal-content .subtitle {
  line-height: 29px;
  font-size: 15px;
  letter-spacing: -1.1px;
  text-align: justify;
  color: #ffffff;
}
.gpmodal-content > .ga {
  grid-area: a;
}
.gpmodal-content > .gb {
  grid-area: b;
}
.gpmodal-content > .gb1 {
  grid-area: b1;
}
.gpmodal-content > .gc {
  grid-area: c;
}
.gpmodal-content > .gd {
  grid-area: d;
}

.gpmodal-content1 {
  display: grid;
  position: absolute;
  grid-template: "x" 10px "a" 1fr "b" 2fr "d" 1fr/1fr;
  background: var(--CSV-Color);
  /* top: 15%; */
  left: 0;
  margin: auto;
  right: 0;
  /* width: 90%; */
  height: 100%;
  padding: 14vw 10vw 0 10vw;
  font-weight: 300;
}
.gpmodal-content1 .headtitle {
  line-height: 10vw;
  font-size: calc(17px + 2vw);
  letter-spacing: -0.8px;
  color: #ffffff;
}
.gpmodal-content1 .subtitle {
  line-height: 8vw;
  font-size: var(--font-lg);
  letter-spacing: -0.6px;
  text-align: justify;
  color: #ffffff;
}
.gpmodal-content1 .gpagree_1 {
  display: grid;
  justify-content: center;
  align-items: center;
  background: none !important;
  position: absolute;
  bottom: 65px;
  left: 0;
  right: 0;
  z-index: 30;
}
.gpmodal-content1 .gpagree_1:hover, .gpmodal-content1 .gpagree_1:focus {
  color: #ffffff;
  background-color: #353535;
}
.gpmodal-content1 > .gx {
  grid-area: x;
}
.gpmodal-content1 > .ga {
  grid-area: a;
}
.gpmodal-content1 > .gb {
  grid-area: b;
}
.gpmodal-content1 > .gd {
  grid-area: d;
}

/* The Close Button */
.gpclose {
  position: absolute;
  right: -16px;
  opacity: 1;
  width: 50px;
  height: 50px;
}
.gpclose:hover {
  opacity: 0.7;
}
.gpclose:before, .gpclose:after {
  position: absolute;
  top: 5px;
  right: 24px;
  content: "";
  height: 35px;
  width: 2px;
  background-color: white;
}
.gpclose:before {
  transform: rotate(45deg);
}
.gpclose:after {
  transform: rotate(-45deg);
}

/* The STICKER Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 7;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  display: grid;
  grid-template: "a" 100px "b" 1fr "c" 195px "d" auto/1fr;
  height: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.7803921569);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  font-size: 18px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  animation: fadeIn 0.7s ease-in-out;
  overflow: hidden;
}
.modal-content .ga {
  grid-area: a;
}
.modal-content .gb {
  grid-area: b;
}
.modal-content .gc {
  grid-area: c;
}
.modal-content .mclose {
  color: rgb(37, 37, 37);
  font-size: 32px;
  font-weight: normal;
}
.modal-content .mclose:hover,
.modal-content .mclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.finish_plogmsg,
.finish_alert_plogmsg {
  display: none;
}

/* The Close Button */
/* The STICKER Modal (background) */
.plog_fmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 7;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Black w/ opacity */
}

/* Modal Content/Box */
.plog_fmodal-content {
  display: grid;
  grid-template: "a" 100px "b" 1fr "c" 195px "d" auto/1fr;
  height: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.7803921569);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  font-size: 18px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  animation: fadeIn 0.7s ease-in-out;
  overflow: hidden;
}
.plog_fmodal-content .ga {
  grid-area: a;
}
.plog_fmodal-content .gb {
  grid-area: b;
}
.plog_fmodal-content .plog_fmclose {
  color: rgb(37, 37, 37);
  font-size: 32px;
  font-weight: normal;
}
.plog_fmodal-content .plog_fmclose:hover,
.plog_fmodal-content .plog_fmclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.padGuide-Modal {
  display: none;
  position: fixed;
  z-index: 110;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 450px;
  max-height: 80vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.66);
  letter-spacing: -0.6px;
}
.padGuide-Modal .padGuideTitle {
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  position: absolute;
  top: 14px;
  left: 18px;
  line-height: 1.5;
  font-size: var(--font-3xl);
  color: white;
  font-weight: 600;
  z-index: 20;
}
.padGuide-Modal .padGuideclose-style {
  cursor: pointer;
  position: absolute;
  top: 13px;
  right: 16px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  font-size: 20px;
  color: white;
  font-weight: 700;
  z-index: 20;
}
.padGuide-Modal .padGuide-Modal-Content-Text {
  background: rgba(0, 200, 101, 0.7411764706);
  color: white;
  font-size: var(--font-2xl);
  line-height: 1.3;
  padding: 6px 12px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 6px rgba(92, 92, 92, 0.568627451);
  width: -moz-max-content;
  width: max-content;
  height: auto;
  border-radius: 14px;
}
.padGuide-Modal .padGuide-Modal-Content-Text.pos1 {
  position: absolute;
  bottom: 40px;
  left: 35%;
}
.padGuide-Modal .padGuide-Modal-Content-Text.pos2 {
  position: absolute;
  bottom: 170px;
  left: 5%;
}
.padGuide-Modal .padGuide-Modal-Content-Text.pos3 {
  position: absolute;
  bottom: 115px;
  left: 5%;
}
.padGuide-Modal .padGuide-Modal-Content-Text.pos4 {
  position: absolute;
  bottom: 285px;
  left: 5%;
}

.imodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 5;
  /* Sit on top */
  left: 0;
  bottom: 0;
  width: 100%;
  /* Full width */
  height: 230px;
  /* Full height */
  overflow: auto;
}

.imodal-trashMark {
  display: none;
  position: absolute;
  top: 222px;
  left: 50%;
  font-weight: 500;
  flex-direction: column;
  transform: translate(-50%, -50%);
  font-size: 62px;
  z-index: 4;
  opacity: 0.2;
  /* flex-direction: column; */
  word-break: keep-all;
  align-items: center;
}
.imodal-trashMark.countOn {
  opacity: 0.65;
  font-weight: 500;
  color: #108d59;
}

/* Modal Content/Box */
.imodal-content {
  display: grid;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  margin: auto;
  left: 0;
  right: 0;
}

/* The Close Button */
.iclose {
  color: rgb(37, 37, 37);
  font-size: 20px;
  font-weight: normal;
}
.iclose:hover, .iclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.iclose-style {
  position: absolute;
  top: -12px;
  z-index: 20;
  right: 0px;
  width: 35px;
  height: 35px;
  padding: 0 25px;
  z-index: 21;
}
.iclose-style:before, .iclose-style:after {
  position: absolute;
  top: 0px;
  right: 19px;
  content: "";
  height: 24px;
  width: 2px;
  background-color: #2b2b2b;
}
.iclose-style:before {
  transform: rotate(45deg);
}
.iclose-style:after {
  transform: rotate(-45deg);
}

/* ------------------------------ 
 * 쓰레기 패드 
 --------------------------------*/
.pad-bg {
  position: absolute;
  top: -23px;
  right: 0px;
  width: 40px;
  height: 150px;
  background: white;
  z-index: 5;
  border-radius: 30px;
  box-shadow: 1px 1px 10px 1px rgb(220, 220, 220);
  -moz-box-shadow: 1px 1px 10px 1px rgb(220, 220, 220);
  -webkit-box-shadow: 1px 1px 10px 1px rgb(220, 220, 220);
  border: 1px solid rgb(220, 220, 220);
}

.padGuideopen-style {
  cursor: pointer;
  position: absolute;
  /* background: white; */
  top: 27px;
  font-size: 13px;
  right: 8px;
  width: 24px;
  display: flex;
  border: 2px solid #5d5d5d;
  z-index: 26;
  position: absolute;
  color: #5d5d5d;
  height: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.padGuideopen-style:after {
  content: "안내";
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  bottom: -17px;
}

.padHandsSwitch-style {
  cursor: pointer;
  position: absolute;
  /* background: white; */
  top: 77px;
  font-size: 23px;
  right: 8px;
  width: 24px;
  display: flex;
  /* border: 1px solid #000000; */
  z-index: 26;
  position: absolute;
  color: #5d5d5d;
  height: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.padHandsSwitch-style:after {
  content: "모드";
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  bottom: -15px;
}

.imodal-litter-content {
  display: none;
  position: absolute;
  bottom: 65px;
  left: 0;
  right: 0;
  height: 440px;
  padding: 15px;
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.3607843137);
  animation: fadeIn 0.6s ease-in-out;
  border-radius: 30px;
}

/* The Close Button */
.iclose-litter {
  color: rgb(37, 37, 37);
  font-size: 28px;
  font-weight: normal;
  z-index: 10;
}

.iclose-litter:hover,
.iclose-litter:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.imodal-content-finder {
  display: none;
  background-color: white;
  position: absolute;
  bottom: 65px;
  left: 0;
  right: 0;
  height: 419px;
  padding: 15px;
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.3607843137);
  animation: fadeIn 0.4s ease-in-out;
  border-radius: 30px 30px 30px 30px;
  -webkit-border-radius: 30px 30px 30px 30px;
  -moz-border-radius: 30px 30px 30px 30px;
  -ms-border-radius: 30px 30px 30px 30px;
  -o-border-radius: 30px 30px 30px 30px;
}

.imodal-b {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 8;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(255, 255, 255, 0.5803921569);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  /* Fallback color */
  /* Black w/ opacity */
}

/* Modal Content/Box */
.imodal-content-b {
  display: grid;
  position: relative;
  margin: auto;
  height: fit-content;
  height: -moz-fit-content;
  height: auto;
}

/* The Close Button */
.iclose-b {
  color: rgba(2, 25, 41, 0.9019607843);
  font-size: 13vw;
  font-weight: 100;
  position: absolute;
  right: 25px;
  top: -25px;
  z-index: 10;
  cursor: pointer;
}

.imodal-litter-content-b {
  display: none;
  position: absolute;
  bottom: 50px;
  top: 70px;
  margin: auto;
  left: 0;
  right: 0;
  height: fit-content;
  height: -moz-fit-content;
  height: auto;
  height: fit-content;
  height: -moz-fit-content;
  height: auto;
  padding: 15px;
  /* The Close Button */
}
.imodal-litter-content-b .iclose-litter-b {
  color: rgba(2, 25, 41, 0.9019607843);
  font-size: 13vw;
  font-weight: normal;
  z-index: 10;
  color: #80bcff;
  padding-right: 2vw;
  cursor: pointer;
  top: 0;
  font-weight: 100;
}

.imodal-litterfind-content {
  display: none;
  background: white;
  grid-template: "a" 60px "b" auto "f" 0px/1fr;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  left: 0;
  right: 0;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 15;
  /* The Close Button */
}
.imodal-litterfind-content > .g-body {
  grid-area: b;
  position: relative;
  display: grid;
  grid-template: "a" 30px "b" auto "c" 100px;
  height: calc(var(--vh, 1vh) * 100 - 60px);
}
.imodal-litterfind-content > .g-body > .ga {
  grid-area: a;
}
.imodal-litterfind-content > .g-body > .gb {
  grid-area: b;
}
.imodal-litterfind-content > .g-body > .gc {
  grid-area: c;
}
.imodal-litterfind-content .iclose-litterfind {
  color: rgba(2, 25, 41, 0.9019607843);
  font-size: 13vw;
  font-weight: 100;
  position: absolute;
  right: 15px;
  top: 0px;
  cursor: pointer;
}

.litterfindInputBox {
  height: fit-content;
  height: -moz-fit-content;
  height: auto;
  width: fit-content;
  width: -moz-fit-content;
  width: auto;
  position: relative;
}
.litterfindInputBox .allLitterFind {
  z-index: 10;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 30;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  border-radius: 50%;
}
.litterfindInputBox input#litterfindInput {
  border-radius: 12px;
  border: 1px solid darkgray;
  width: 100%;
  height: 50px;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 10px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: var(--font-xl);
  position: relative;
}
.litterfindInputBox input#litterfindInput::-moz-placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
.litterfindInputBox input#litterfindInput::placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
.litterfindInputBox input#litterfindInput:focus {
  outline: none;
}
.litterfindInputBox input#litterfindInput:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: rgba(2, 25, 41, 0.9019607843) !important;
}
.litterfindInputBox input#litterfindInput:-webkit-autofill, .litterfindInputBox input#litterfindInput:-webkit-autofill:hover, .litterfindInputBox input#litterfindInput:-webkit-autofill:focus, .litterfindInputBox input#litterfindInput:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgba(2, 25, 41, 0.9019607843) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.litterfind-resultList {
  overflow-x: hidden;
  overflow-y: auto;
  width: 95%;
  max-height: calc(var(--vh, 1vh) * 100 - 240px);
  display: flex;
  margin-bottom: 20px;
  align-items: flex-end;
  align-self: flex-end;
  flex-direction: column-reverse;
  border-radius: 15px;
  box-shadow: 0px 1px 10px 1px gainsboro;
}
.litterfind-resultList.extra-beach {
  max-height: calc(var(--vh, 1vh) * 100 - 170px);
  margin: 0 auto;
  border: 1px solid darkgray;
  width: 100%;
  box-shadow: none;
}
.litterfind-resultList li {
  border-top: 1px solid lightGrey;
  display: flex;
  align-items: center;
  padding: 15px;
  width: 100%;
}
.litterfind-resultList .custom-markicon {
  position: absolute;
  left: 1vw;
  top: 1vw;
  font-size: calc(1px + 3vw);
}
.litterfind-resultList .blitter-profile {
  width: 10vw;
  height: 10vw;
  /* border: 1px solid #aeaeae; */
  background: #d6e9ef;
  padding: 4px 1px;
  border-radius: 3vw;
}
.litterfind-resultList .blitter-textbox {
  display: flex;
  flex-direction: column;
  margin-left: 4vw;
  color: rgba(2, 25, 41, 0.9019607843);
}
.litterfind-resultList .blitter-textbox .blitter-title {
  opacity: 1;
  font-size: calc(4px + 3vw);
}
.litterfind-resultList .blitter-textbox .blitter-type {
  opacity: 0.7;
  color: rgba(2, 25, 41, 0.9019607843);
  font-size: calc(1px + 3vw);
  padding-top: 0.72px;
}
.litterfind-resultList .blitter-select,
.litterfind-resultList .blitter-custom {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid rgba(2, 2, 2, 0.6509803922);
  border-radius: 8px;
  color: rgba(2, 2, 2, 0.6509803922);
  font-size: calc(3px + 3vw);
  cursor: pointer;
}
.litterfind-resultList .blitter-select:focus, .litterfind-resultList .blitter-select:hover,
.litterfind-resultList .blitter-custom:focus,
.litterfind-resultList .blitter-custom:hover {
  background: #d6e9ef;
  border: none;
}
.litterfind-resultList .blitter-custom {
  background: rgba(2, 2, 2, 0.8941176471);
  color: white;
  border: none;
}

.pmodal {
  display: none;
  z-index: 5;
  width: 90%;
  margin: auto;
  background-color: white;
  position: absolute;
  bottom: 65px;
  left: 0;
  right: 0;
  height: 419px;
  padding: 15px;
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.3607843137);
  border-radius: 10px;
}

/* Modal Content/Box */
.pmodal-content {
  width: 100%;
  height: 100%;
}

/* The Close Button */
.pclose {
  color: rgb(37, 37, 37);
  font-size: 28px;
  font-weight: normal;
}

.pclose:hover,
.pclose:focus {
  color: black;
  font-size: 30px;
  text-decoration: none;
  cursor: pointer;
}

.running_notOpenmodal {
  display: none;
  z-index: 5;
  width: 90%;
  margin: auto;
  background-color: white;
  position: absolute;
  top: 71px;
  left: 0;
  right: 0;
  height: 71px;
  padding: 15px;
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.3607843137);
  border-radius: 10px;
  animation: pop-out 2.5s ease-out 1 forwards;
  /* Modal Content/Box */
  /* The Close Button */
}
.running_notOpenmodal .running_notOpenmodal_content {
  font-size: 19px;
  text-align: center;
}
.running_notOpenmodal .running_notOpenmodal_close {
  color: rgb(37, 37, 37);
  font-size: 28px;
  font-weight: normal;
}

.mfmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 7;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Fallback color */
  /* Black w/ opacity */
}

/* Modal Content/Box */
.mfmodal-content {
  display: grid;
  grid-template: "a" 100px "body" 1fr "b" 120px/1fr;
  background-color: #ffffff;
  border-radius: 30px 30px 0 0;
  height: -moz-max-content;
  height: max-content;
  padding: 10vw;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
}
.mfmodal-content > .ga {
  grid-area: a;
  color: white;
  font-size: 23px;
}
.mfmodal-content > .g-body {
  grid-area: body;
}
.mfmodal-content > .gb {
  grid-area: b;
}
.mfmodal-content > .gb1 {
  grid-area: b1;
}
.mfmodal-content > .gc {
  grid-area: c;
}
.mfmodal-content > .gd {
  grid-area: d;
}

.mfmodal2 {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 9;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Fallback color */
  /* Black w/ opacity */
}

/* Modal Content/Box */
.mfmodal-content2 {
  display: grid;
  grid-template: "a" 100px "b" 80px/1fr;
  background-color: #ffffff;
  border-radius: 30px 30px 0 0;
  padding: 30px;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
}
.mfmodal-content2 > .ga {
  grid-area: a;
  color: white;
  font-size: 23px;
}
.mfmodal-content2 > .g-body {
  grid-area: body;
}
.mfmodal-content2 > .gb {
  grid-area: b;
}
.mfmodal-content2 > .gb1 {
  grid-area: b1;
}
.mfmodal-content2 > .gc {
  grid-area: c;
}
.mfmodal-content2 > .gd {
  grid-area: d;
}

.infoag_modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 105;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.431372549);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.infoag_modal-content {
  display: grid;
  grid-template: "a" 20px "b" auto/1fr;
  background-color: #ffffff;
  padding: 30px;
  box-shadow: 0 0 1em 0 rgba(4, 169, 118, 0.7411764706);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
  overflow: auto;
  color: rgb(46, 46, 46);
  line-height: 1.5;
  font-size: 11px;
  word-break: break-all;
  white-space: pre-line;
  animation: slide-up 0.4s ease-in-out;
  /* ------------------------------ 
   * contents 
   --------------------------------*/
}
.infoag_modal-content > .ga {
  grid-area: a;
}
.infoag_modal-content > .gb {
  grid-area: b;
}
.infoag_modal-content > .gb1 {
  grid-area: b1;
}
.infoag_modal-content > .gc {
  grid-area: c;
}
.infoag_modal-content > .gd {
  grid-area: d;
}
.infoag_modal-content > .infoag_close {
  position: absolute;
  right: 0;
}
.infoag_modal-content > .infoag_close .cssIcon {
  width: 40px;
  height: 40px;
}
.infoag_modal-content .title {
  font-size: var(--font-3xl);
  padding-top: 5px;
}
.infoag_modal-content .version {
  font-size: var(--font-xl);
  margin-top: 10px;
}
.infoag_modal-content .content {
  font-size: var(--font-xl);
  margin-top: 10px;
  font-weight: 500;
  line-height: 1.8;
}

.userguide_modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 105;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.431372549);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.userguide_modal_content {
  display: grid;
  grid-template: "a" 0px "b" 1fr "c" 55px "d" 40px/1fr;
  background-color: #ffffff;
  box-shadow: 0 0 1em 0 rgba(4, 169, 118, 0.7411764706);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  color: rgb(46, 46, 46);
  line-height: 18px;
  font-size: 11px;
  align-items: center;
}
.userguide_modal_content > .ga {
  grid-area: a;
  display: flex;
  position: relative;
}
.userguide_modal_content > .gb {
  grid-area: b;
  display: flex;
  position: absolute;
}
.userguide_modal_content > .gc {
  grid-area: c;
  display: flex;
  position: relative;
}
.userguide_modal_content > .gd {
  grid-area: d;
  display: flex;
}
.userguide_modal_content .userguide_close {
  color: #ff2a2a;
  z-index: 50;
  font-size: 41px;
  cursor: pointer;
  width: 41px;
  top: 4%;
  padding: 1px;
  right: 6%;
  position: absolute;
  height: 41px;
  font-weight: normal;
}
.userguide_modal_content:hover, .userguide_modal_content:focus {
  color: white;
  text-decoration: none;
}

.userguide_modal_content2 {
  display: grid;
  grid-template: "a" 70px "b" 1fr "c" 25px "d" 70px/1fr;
  background-color: #ffffff;
  box-shadow: 0 0 1em 0 rgba(4, 169, 118, 0.7411764706);
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  color: rgb(46, 46, 46);
  line-height: 18px;
  font-size: 11px;
  align-items: center;
}
.userguide_modal_content2 > .ga {
  grid-area: a;
  display: flex;
  position: relative;
}
.userguide_modal_content2 > .gb {
  grid-area: b;
  display: flex;
  position: absolute;
}
.userguide_modal_content2 > .gc {
  grid-area: c;
  display: flex;
  position: relative;
}
.userguide_modal_content2 > .gd {
  grid-area: d;
  display: flex;
}
.userguide_modal_content2 .swiper_ug2 .swiper-slide {
  opacity: 1 !important;
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  -o-transform: scale(1) !important;
}
.userguide_modal_content2 .userguide_close_how {
  position: fixed;
  bottom: 0;
  margin: 15px 25px;
  left: 0;
  right: 0;
  padding: 13px;
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 15px;
  color: white;
  font-weight: 500;
  z-index: 5;
  text-align: center;
  cursor: pointer;
}
.userguide_modal_content2 .userguide_close_how:hover, .userguide_modal_content2 .userguide_close_how:focus {
  background: rgb(0, 0, 0);
  text-decoration: none;
}

.swiper_ug {
  height: 100%;
  /* min-width: 293px; */
  top: 27px;
}
.swiper_ug .swiper-wrapper {
  position: absolute !important;
  top: -6px;
  bottom: 0;
  margin: auto;
  height: 77%;
}
.swiper_ug .swiper-wrapper .swiper-slide {
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  -o-transform: scale(1) !important;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideToRight {
  0% {
    opacity: 0;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}
@keyframes slideToLeft {
  0% {
    opacity: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}
@keyframes slide-down {
  0% {
    opacity: 1;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
  }
}
@keyframes slideToLeft_Rev {
  0% {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
  }
}
.logo_l {
  position: fixed;
  bottom: 14px;
  left: 20px;
  z-index: 6;
}

.logo_r {
  position: fixed;
  bottom: 14px;
  right: 15px;
  z-index: 6;
}

.btn-jj {
  height: 144px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25px;
  z-index: 2;
}

.icon_fbtn {
  background-color: #04a976;
  position: absolute;
  right: 5px;
  z-index: 1;
  border-radius: 20px;
  padding: 5px;
  width: 33%;
  height: 20px;
}

.icon_fbtn2 {
  padding: 10px;
  width: 100%;
  height: 40px;
  border: 0px solid #04a976;
  background-color: rgba(4, 169, 118, 0.0509803922);
  color: white;
  font-size: 15px;
  border-radius: 30px;
}

.icon_fbtn3 {
  padding: 10px;
  position: absolute;
  width: 100%;
  bottom: 30px;
  /* z-index: 5; */
  right: 0;
  left: 0;
  margin: auto;
  z-index: 50;
  height: 120px;
  width: 120px;
  border: 0px solid #04a976;
  background-color: rgba(4, 169, 118, 0.7019607843);
  color: white;
  font-size: 15px;
  border-radius: 50%;
}
.icon_fbtn3:after {
  content: "등록";
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 22px);
  text-align: center;
  font-size: 24px;
}

.icon_fbtn4 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 22px auto;
  z-index: 50;
  height: 100px;
  width: 100px;
  border: 0px solid #04a976;
  background-color: rgba(4, 169, 118, 0.7019607843);
  color: white;
  font-size: 15px;
  border-radius: 50%;
}
.icon_fbtn4:after {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 22px);
  text-align: center;
  font-size: 24px;
}

.btn-f {
  position: absolute;
  left: 0;
  right: 0;
  margin: 22px auto;
  z-index: 60;
  height: 100px;
  width: 100px;
  border: 1px solid #767676;
  background-color: #000000;
  color: white;
  font-size: 15px;
  border-radius: 50%;
}
.btn-f:before {
  content: "\f164";
  font-size: 25px;
  top: 19px;
  left: 39px;
  position: absolute;
  font-family: FontAwesome;
}
.btn-f:after {
  content: "등록가능";
  position: absolute;
  /* top: calc(50% - 0px); */
  top: 49px;
  /*  */
  left: 17px;
  /* left: calc(50% - 32px); */
  text-align: center;
  font-size: 18px;
}

.btn-f-end {
  position: absolute;
  display: block;
  margin: 22px auto;
  z-index: 60;
  height: 100px;
  width: 100px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* border: 1px solid #ffffff00; */
  background-color: rgba(251, 255, 254, 0.3882352941);
  box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.3607843137);
  color: #f9392c;
  font-size: 15px;
}
.btn-f-end:after {
  content: "완료";
  position: absolute;
  /* top: calc(50% - 0px); */
  /* color: white; */
  top: 62px;
  /*  */
  left: 31px;
  /* bottom: -10px; */
  /* left: calc(50% - 32px); */
  text-align: center;
  font-size: 22px;
}

/* The Close Button */
.mfclose {
  color: rgb(37, 37, 37);
  font-size: 28px;
  font-weight: normal;
}

.mfclose:hover,
.mfclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.fmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 20;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.fmodal-content {
  display: grid;
  grid-template: "a" 30px "b" 70px "c" 1fr/1fr;
  background-color: #cbf0ff;
  margin: 15% auto;
  /*15%fromthetopandcentered*/
  padding: 20px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 20px;
  width: 90%;
  /*Couldbemoreorless,dependingonscreensize*/
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.fmodal-content > .ga {
  grid-area: a;
}
.fmodal-content > .gb {
  grid-area: b;
}
.fmodal-content > .gc {
  grid-area: c;
  width: 100%;
}

/* The Close Button */
.fclose {
  color: rgb(37, 37, 37);
  font-size: 28px;
  font-weight: normal;
}

.fclose:hover,
.fclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.profile1365Setmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 50;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: calc(var(--vh, 1vh) * 100);
  /* Full height */
  overflow: auto;
  letter-spacing: -1px;
  background: #ffffff;
  /* Black w/ opacity */
}

.g-back {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: var(--pc-topbar-ht);
  padding-left: 15px;
  letter-spacing: -0.8px;
  position: relative;
}

/* Modal Content/Box */
.profile1365Setmodal-content {
  position: relative;
  display: grid;
  grid-template: "profile" 1fr "btn" auto/1fr;
  width: 100%;
  padding: 20px 8vw;
  height: calc(var(--vh, 1vh) * 100 - 60px);
  letter-spacing: -1px;
  color: #000000;
}
.profile1365Setmodal-content > .g-reset-icon {
  grid-area: profile;
}
.profile1365Setmodal-content > .g-btn {
  position: relative;
}

.reset1365-layout {
  padding: 20px 35px;
}

/* The Close Button */
@keyframes setmode-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.itacity-SetModal {
  display: none;
  position: fixed;
  z-index: 900;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  letter-spacing: -1px;
  background: white;
}
.itacity-SetModal .itacity-SetModal-content {
  position: relative;
  display: grid;
  grid-template: "header" 60px "body" 1fr "btn" auto/1fr;
  width: 100%;
  padding: 20px 8vw;
  height: calc(var(--vh, 1vh) * 100);
  letter-spacing: -1px;
  color: #333333;
  background: linear-gradient(-45deg, rgba(238, 119, 82, 0.0784313725), rgba(231, 60, 126, 0.1098039216), rgba(35, 166, 213, 0.1215686275), rgba(35, 213, 106, 0.1411764706));
  background-size: 400% 400%;
  animation: setmode-gradient 15s ease infinite;
  -webkit-animation: setmode-gradient 15s ease infinite;
}
.itacity-SetModal .itacity-SetModal-content > * {
  display: grid;
}
.itacity-SetModal .itacity-SetModal-content > .g-header {
  grid-area: header;
}
.itacity-SetModal .itacity-SetModal-content > .g-body {
  grid-area: body;
}
.itacity-SetModal .itacity-SetModal-content > .g-btn {
  grid-area: btn;
}
.itacity-SetModal .itacity-SetModal-content .cityplog_box,
.itacity-SetModal .itacity-SetModal-content .beachplog_box {
  height: 116px;
  border-radius: 30px;
  width: 100%;
  margin: 25px auto;
  cursor: pointer;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
.itacity-SetModal .itacity-SetModal-content .cityplog_box {
  background: #56c02b url(../public/img/setModeBanner/city.png) no-repeat center;
  background-size: 80%;
}
.itacity-SetModal .itacity-SetModal-content .beachplog_box {
  background: #0a97d9 url(../public/img/setModeBanner/beach.png) no-repeat center;
  background-size: 80%;
}
.itacity-SetModal .itacity-SetModal-content .setmode_title {
  font-size: 20px;
}

.searchlink_id1365 {
  position: absolute;
  /* right: 10px; */
  font-size: 13px !important;
  /* margin: 24px; */
  cursor: pointer;
  font-weight: 300;
}
.searchlink_id1365:after {
  color: #00502b;
  font-family: FontAwesome;
  content: "\f059";
  font-size: 18px;
}

.profile1365SetClose {
  color: #000000;
}

.profile1365SetClose:hover,
.profile1365SetClose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.profileIconSetmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 15;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  background-color: rgba(0, 119, 64, 0.0509803922);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.profileIconSetmodal-content {
  display: grid;
  grid-template: "profile" 120px "plogstat" 75px "divider" 13px "ploglist" 1fr/1fr;
  width: 100%;
  margin-top: 60px;
  letter-spacing: -1px;
  width: 100%;
  color: white;
}
.profileIconSetmodal-content > .g-reset-icon {
  grid-area: profile;
}

/* The Close Button */
.profile_IconSetClose {
  position: absolute;
  color: #ffffff;
  font-size: 30px;
  margin: 23px;
  font-weight: 100;
  width: 30px;
  height: 30px;
}
.profile_IconSetClose:hover, .profile_IconSetClose:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.plogverify-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 15;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  background-color: rgba(0, 119, 64, 0.0509803922);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.plogverify-modal-content {
  display: grid;
  grid-template: "profile" 120px "plogstat" 75px "divider" 13px "ploglist" 1fr/1fr;
  width: 100%;
  margin-top: 100px;
  letter-spacing: -1px;
  width: 100%;
  color: white;
}
.plogverify-modal-content > .g-reset-icon {
  grid-area: profile;
}

/* The Close Button */
.plogverify_modalClose {
  position: absolute;
  color: #ffffff;
  font-size: 30px;
  margin: 23px;
  font-weight: 100;
  width: 30px;
  height: 30px;
}
.plogverify_modalClose:hover, .plogverify_modalClose:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.cmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 500;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  grid-template: "a" 2fr "b" 1fr/1fr;
  overflow: auto;
  /* Enable scroll if needed */
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  background-color: var(--subp_bcolor);
  /* Fallback color */
  color: white;
  /* Modal Content/Box */
}
.cmodal .alarmmsg_cmodal {
  grid-area: b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(4vw + 11px);
  line-height: calc(4vw + 25px);
  letter-spacing: calc(0.3vw + 0px);
  font-weight: 500;
  margin: 28px;
}
.cmodal .alarmcolorchange {
  animation: alarmcolorchange 0.8s infinite;
  -webkit-animation: alarmcolorchange 0.8s infinite;
}
@keyframes alarmcolorchange {
  0% {
    color: white;
    opacity: 1;
  }
  100% {
    color: #e5ff00;
    opacity: 1;
  }
}
.cmodal .cmodal-content {
  grid-area: a;
  display: grid;
  grid-template: "a" 1fr/1fr;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 230px;
  font-family: "Barlow Condensed", "Oswald";
}
.cmodal .cmodal-content > .ga {
  grid-area: a;
}
.cmodal .cmodal-content.start {
  font-size: 100px;
  text-align: center;
  line-height: 1.3;
}

.jpmodal {
  display: none;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  z-index: 20;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  animation: slide-up 0.4s ease-in-out;
  transition: all 0.35s ease;
}

/* Modal Content/Box */
.jpmodal-content {
  display: grid;
  grid-template: "a" 1fr/1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.jpmodal-content > .ga {
  grid-area: a;
}

/* The Close Button */
.jpclose {
  font-weight: normal;
}

.jpclose:hover,
.jpclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.ifmodal {
  display: none;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  z-index: 15;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Fallback color */
  background: linear-gradient(top, #78c38c 50%, rgba(255, 255, 255, 0) 100%);
  transition: background 1.5s ease-in-out;
}

/* Modal Content/Box */
.ifmodal-content {
  display: flex;
  position: absolute;
  grid-template: "a" 112px "b" 112px "c" 112px/1fr;
  padding: 20px;
  width: 100%;
  /* height: 316px; */
  bottom: 134px;
  justify-content: center;
  align-items: center;
  animation: slide-in 0.5s ease-in-out;
}
.ifmodal-content > .ga {
  grid-area: a;
}
.ifmodal-content > .gb {
  grid-area: b;
}
.ifmodal-content > .gc {
  grid-area: c;
}

/* The Close Button */
.ifclose {
  font-weight: normal;
}
.ifclose:after {
  content: "\f112";
  font-family: Fontawesome;
  font-size: 16px;
  color: grey;
}

.ifclose:hover,
.ifclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.recmodal {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 105px;
  height: calc(100% - 105px);
  overflow: auto;
}

.jmodal {
  display: none;
  /*Hiddenbydefault*/
  position: fixed;
  /*Stayinplace*/
  z-index: 20;
  /*Sitontop*/
  left: 0;
  top: 0;
  width: 100%;
  /*Fullwidth*/
  height: 100%;
  /*Fullheight*/
  overflow: auto;
  /*Enablescrollifneeded*/
  background-color: rgb(0, 0, 0);
  /*Fallbackcolor*/
  background-color: rgba(0, 0, 0, 0.4);
  /*Blackw/opacity*/
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.jmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: rgba(0, 0, 0, 0.85);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.jmodal-content > .ga {
  grid-area: a;
}
.jmodal-content > .gb {
  grid-area: b;
}
.jmodal-content > .gc {
  grid-area: c;
}

/* The Close Button */
.jclose {
  color: #ffffff;
  z-index: 50;
  font-size: 43px;
  font-weight: 100;
  animation: slide-down 0.4s ease-in-out;
}

.jclose:hover,
.jclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.plogverify_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 150;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.plogverify_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: #002112;
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.plogverify_cropmodal-content > .ga {
  grid-area: a;
}
.plogverify_cropmodal-content > .gb {
  grid-area: b;
}
.plogverify_cropmodal-content > .gc {
  grid-area: c;
}

/* The Close Button */
.plogverify_cropmodal_close {
  color: white;
  font-size: 41px;
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
  width: 30px;
  height: 30px;
  font-weight: normal;
  cursor: pointer;
}
.plogverify_cropmodal_close:hover, .plogverify_cropmodal_close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.cropmodal-basic {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: white;
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 70px/1fr;
  background-color: white;
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.cropmodal-content > .ga {
  grid-area: a;
}
.cropmodal-content > .gb {
  grid-area: b;
}
.cropmodal-content > .gc {
  grid-area: c;
}

.profile_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 150;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.profile_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: #002112;
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.profile_cropmodal-content > .ga {
  grid-area: a;
}
.profile_cropmodal-content > .gb {
  grid-area: b;
}
.profile_cropmodal-content > .gc {
  grid-area: c;
}

/* The Close Button */
.profile_cropmodal_close {
  color: white;
  font-size: 41px;
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
  width: 30px;
  height: 30px;
  font-weight: normal;
  cursor: pointer;
}
.profile_cropmodal_close:hover, .profile_cropmodal_close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.forum_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 150;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.forum_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: var(--CSV-Color);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.forum_cropmodal-content > .ga {
  grid-area: a;
}
.forum_cropmodal-content > .gb {
  grid-area: b;
}
.forum_cropmodal-content > .gc {
  grid-area: c;
}

/* The Close Button */
.notice_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 150;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.notice_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: var(--CSV-Color);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.notice_cropmodal-content > .ga {
  grid-area: a;
}
.notice_cropmodal-content > .gb {
  grid-area: b;
}
.notice_cropmodal-content > .gc {
  grid-area: c;
}

/* The Close Button */
.cropmodal_close {
  color: white;
  font-size: 41px;
  width: 30px;
  height: 30px;
  font-weight: normal;
  cursor: pointer;
}
.cropmodal_close:hover, .cropmodal_close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.plogpic_cropmodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 250;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  transition: all 1s ease-in-out;
}

/* Modal Content/Box */
.plogpic_cropmodal-content {
  display: grid;
  grid-template: "a" 40px "b" 1fr "c" 10px/1fr;
  background-color: rgba(0, 0, 0, 0.6392156863);
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
}
.plogpic_cropmodal-content > .ga {
  grid-area: a;
}
.plogpic_cropmodal-content > .gb {
  grid-area: b;
}
.plogpic_cropmodal-content > .gc {
  grid-area: c;
}

.intromodal {
  display: grid;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: white;
  /* Fallback color */
}

/* Modal Content/Box */
.intromodal-content {
  display: grid;
  grid-template: "g_logo"/1fr;
  /*15%fromthetopandcentered*/
  width: 100%;
  background: black;
  height: 100%;
  /*Couldbemoreorless,dependingonscreensize*/
}
.intromodal-content > .g-logo {
  grid-area: g_logo;
  background: url("../public/img/util/logo_favicon/justlogoname_ita_green.svg") no-repeat center;
  background-size: 24%;
  width: 100%;
  height: 100%;
}
.intromodal-content > .g-logo-circle {
  grid-area: g_logo;
  background: url("../public/img/util/logo_favicon/justlogocircle_ita_green.svg") no-repeat center;
  background-size: 28%;
  width: 100%;
  height: 100%;
}
.intromodal-content > .loadmsg_style {
  position: absolute;
  bottom: 30%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: auto;
  width: -moz-fit-content;
  width: fit-content;
  width: auto;
  color: #186030;
  font-weight: 700;
  font-size: 18px;
  border: 1px solid;
  padding: 10px 20px;
  border-radius: 50px;
}
.intromodal-content > .loadmsg_style_simple {
  position: absolute;
  bottom: 30%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  color: #ffffff;
  font-weight: 400;
  font-size: 13px;
}
.intromodal-content > .gb1 {
  grid-area: b1;
}
.intromodal-content > .gc {
  grid-area: c;
}
.intromodal-content > .gd {
  grid-area: d;
}

.loadermodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: hidden;
  /* Enable scroll if needed */
  background-color: #333333;
  /* Fallback color */
}

/* Modal Content/Box */
.loadermodal-content {
  display: grid;
  grid-template: "g_logo"/1fr;
  /*15%fromthetopandcentered*/
  width: 100%;
  background: var(--CSV-Color);
  height: 100%;
  /*Couldbemoreorless,dependingonscreensize*/
}
.loadermodal-content > .g-logo {
  grid-area: g_logo;
  background: url("../public/img/util/logo_favicon/justlogoname_ita_green.svg") no-repeat center;
  background-size: 24%;
  width: 100%;
  height: 100%;
}
.loadermodal-content > .g-logo-circle {
  grid-area: g_logo;
  background: url("../public/img/util/logo_favicon/justlogocircle_ita_green.svg") no-repeat center;
  background-size: 28%;
  width: 100%;
  height: 100%;
}
.loadermodal-content > .loadmsg_style {
  position: absolute;
  bottom: 30%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  width: auto;
  color: #00502b;
  font-weight: 700;
  font-size: 18px;
  border: 1px solid;
  padding: 10px 20px;
  border-radius: 50px;
}
.loadermodal-content > .gb1 {
  grid-area: b1;
}
.loadermodal-content > .gc {
  grid-area: c;
}
.loadermodal-content > .gd {
  grid-area: d;
}

.pageLoaderModal {
  display: none;
  position: fixed;
  z-index: 500;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  background-color: transparent;
}
.pageLoaderModal .pageLoaderModal-content {
  font-size: 33px;
  color: #333;
  display: grid;
}

.dataLoaderModal {
  display: grid;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  /* Full width */
  /* Full height */
  overflow: hidden;
  /* Enable scroll if needed */
  background: transparent;
  /* Fallback color */
  /* Modal Content/Box */
}
.dataLoaderModal .dataloadmodal-content {
  display: grid;
  grid-template: "g_logo"/1fr;
  width: 100%;
  background: transparent;
  height: 100%;
}
.dataLoaderModal .dataloadmodal-content .loading-container,
.dataLoaderModal .dataloadmodal-content .loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}
.dataLoaderModal .dataloadmodal-content .loading-container {
  margin: 40px auto;
}
.dataLoaderModal .dataloadmodal-content .loading {
  border: 1px solid transparent;
  border-color: transparent var(--CSV-Color) transparent var(--CSV-Color);
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}
.dataLoaderModal .dataloadmodal-content .loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}
.dataLoaderModal .dataloadmodal-content .loading-container:hover .loading,
.dataLoaderModal .dataloadmodal-content .loading-container .loading {
  transition: all 0.5s ease-in-out;
}
.dataLoaderModal .dataloadmodal-content #loading-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: var(--CSV-Color);
  font-size: 14px;
  font-weight: 500;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  line-height: 1;
  letter-spacing: 0px;
  top: 0;
  width: 100px;
}
.dataLoaderModal .dataloadmodal-content #loading-intro-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: var(--CSV-Color);
  font-family: "Helvetica Neue, " Helvetica ", " "arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -1px;
  left: -1px;
  width: 100px;
}

.uniLoaderModal {
  display: none;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  background: transparent;
}
.uniLoaderModal .uniloadmodal-content {
  display: grid;
  grid-template: "g_logo"/1fr;
  width: 100%;
  background: transparent;
  height: 100%;
}
.uniLoaderModal .uniloadmodal-content .loading-container,
.uniLoaderModal .uniloadmodal-content .loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}
.uniLoaderModal .uniloadmodal-content .loading-container {
  margin: 40px auto;
}
.uniLoaderModal .uniloadmodal-content .loading {
  border: 1px solid transparent;
  border-color: transparent var(--CSV-Color) transparent var(--CSV-Color);
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}
.uniLoaderModal .uniloadmodal-content .loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}
.uniLoaderModal .uniloadmodal-content .loading-container:hover .loading,
.uniLoaderModal .uniloadmodal-content .loading-container .loading {
  transition: all 0.5s ease-in-out;
}
.uniLoaderModal .uniloadmodal-content #loading-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: var(--CSV-Color);
  font-size: 14px;
  font-weight: 500;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  line-height: 1;
  letter-spacing: 0px;
  top: 0;
  width: 100px;
}
.uniLoaderModal .uniloadmodal-content #loading-intro-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: var(--CSV-Color);
  font-family: "Helvetica Neue, " Helvetica ", " "arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -1px;
  left: -1px;
  width: 100px;
}

.textLoaderModal {
  display: none;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  background: transparent;
}
.textLoaderModal .textloadmodal-content {
  display: grid;
  grid-template: "g_logo"/1fr;
  width: 100%;
  justify-content: center;
  background: var(--CSV-Color);
  height: 100%;
}
.textLoaderModal .textloadmodal-content .loading-container,
.textLoaderModal .textloadmodal-content .loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}
.textLoaderModal .textloadmodal-content .loading-container {
  margin: 40px auto;
}
.textLoaderModal .textloadmodal-content .loading {
  border: 1px solid transparent;
  border-color: transparent white transparent white;
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}
.textLoaderModal .textloadmodal-content .loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}
.textLoaderModal .textloadmodal-content .loading-container:hover .loading,
.textLoaderModal .textloadmodal-content .loading-container .loading {
  transition: all 0.5s ease-in-out;
}
.textLoaderModal .textloadmodal-content #loading-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  line-height: 1;
  letter-spacing: 0px;
  top: 0;
  width: 100px;
}
.textLoaderModal .textloadmodal-content #loading-intro-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: white;
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -1px;
  left: -1px;
  width: 100px;
}
.textLoaderModal .textloadmodal-content .loading-textmsg {
  position: absolute;
  bottom: 150px;
  font-size: 20px;
  color: white;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}

.infoLoaderModal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6784313725);
}
.infoLoaderModal .infoLoaderModal-content {
  display: grid;
  margin: 0 20px;
  padding: 10vw;
  color: black;
  line-height: 1.6;
  background: white;
  height: -moz-max-content;
  height: max-content;
  border-radius: 13px;
  font-size: calc(7px + 2vw);
}

#calc_dataplog_rec .calc_dataplog_rec_style {
  white-space: pre-line;
  line-height: 1.6;
}

.csv-loadermodal {
  display: flex;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: hidden;
  /* Enable scroll if needed */
  background-color: var(--admin-maincolor);
  /* Fallback color */
}

/* Modal Content/Box */
.csv-loadermodal-content {
  display: grid;
  grid-template: "g_logo"/1fr;
  /*15%fromthetopandcentered*/
  width: 100%;
  height: 100%;
  /*Couldbemoreorless,dependingonscreensize*/
}
.csv-loadermodal-content > .g-logo {
  grid-area: g_logo;
  width: 100%;
  height: 100%;
}
.csv-loadermodal-content > .g-logo-circle {
  grid-area: g_logo;
  background: url("../public/img/util/logo_favicon/justlogocircle_ita_green.svg") no-repeat center;
  background-size: 28%;
  width: 100%;
  height: 100%;
}
.csv-loadermodal-content > .csv_loadmsg_style {
  position: absolute;
  bottom: 30%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: -moz-max-content;
  width: max-content;
  color: #ffffff;
  font-weight: 300;
  font-size: 18px;
  border: 1px solid;
  border-radius: 50px;
  padding: 10px 20px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.csv-loadermodal-content > .gb1 {
  grid-area: b1;
}
.csv-loadermodal-content > .gc {
  grid-area: c;
}
.csv-loadermodal-content > .gd {
  grid-area: d;
}

.alarm-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: hidden;
  /* Enable scroll if needed */
  /* Fallback color */
}

/* Modal Content/Box */
.alarm-modal-content {
  position: relative;
  display: flex;
  width: 90%;
  background: #ffffff;
  height: -moz-fit-content;
  height: fit-content;
  height: auto;
  padding: 13px 0;
  /*Couldbemoreorless,dependingonscreensize*/
  box-shadow: 1px 1px 17px 1px rgba(0, 0, 0, 0.168627451);
}
.alarm-modal-content > .g-logo {
  background: url("../public/img/util/logo_favicon/justlogoname_ita_green.svg") no-repeat center;
  background-size: 24%;
  width: 100%;
  height: 100%;
}
.alarm-modal-content > .g-logo-circle {
  background: url("../public/img/util/logo_favicon/justlogocircle_ita_green.svg") no-repeat center;
  background-size: 28%;
  width: 100%;
  height: 100%;
}
.alarm-modal-content > .alarm-modal-close {
  position: absolute;
  bottom: 15px;
  right: 15px;
  color: #00502b;
  font-size: calc(1vw + 12px);
  z-index: 1000;
}
.alarm-modal-content > .alarmmsg_style {
  position: relative;
  text-align: center;
  width: -moz-fit-content;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  line-height: calc(6vw + 4px);
  color: #00502b;
  font-weight: 700;
  font-size: calc(3.3vw + 2px);
  padding: 10px 25px;
  text-align: left;
}

.ita_box {
  padding: 15px 20px;
  font-size: var(--font-md);
  letter-spacing: -0.7px;
  border-radius: 40px;
  margin: 10px 0;
}
.ita_box .box_title {
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 0 10px;
}
.ita_box .box_link {
  font-size: var(--font-xl);
  font-weight: 500;
}
.ita_box .box_extcert_msg {
  font-size: calc(8px + 1.2vw);
  font-weight: 500;
  width: 100%;
  padding: 18px;
  margin-left: 4vw;
  line-height: 1.5;
  background: antiquewhite;
  position: relative;
  border-radius: 10px;
}
.ita_box .box_extcert_msg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-right-color: antiquewhite;
  border-left: 0;
  border-top: 0;
  margin-top: -9px;
  margin-left: -18px;
}

.ita_block {
  padding: 20px 20px;
  font-size: var(--font-md);
  border-radius: 10px;
  background: #f7f7f7;
  border: none;
}
.ita_block .box_title {
  font-size: var(--font-xl);
  color: #000000;
  font-weight: 500;
}

.ita_Editblock {
  display: flex;
  justify-content: center;
  padding: 15px;
}

.myPage_noinfo {
  height: inherit;
}

.ProfileInfoCount {
  text-align: right;
  padding: 10px;
  font-size: 13px;
}

input[type=date].profileEdit_BirthdateInfo {
  width: 90vw;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 30px 25px;
  box-shadow: none;
  border-radius: 25px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: calc(2vw + 9px);
  position: relative;
  line-height: 1.5;
}
input[type=date].profileEdit_BirthdateInfo::-moz-placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
input[type=date].profileEdit_BirthdateInfo::placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
input[type=date].profileEdit_BirthdateInfo:focus {
  outline: none;
}
input[type=date].profileEdit_BirthdateInfo:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: rgba(2, 25, 41, 0.9019607843) !important;
}
input[type=date].profileEdit_BirthdateInfo:-webkit-autofill, input[type=date].profileEdit_BirthdateInfo:-webkit-autofill:hover, input[type=date].profileEdit_BirthdateInfo:-webkit-autofill:focus, input[type=date].profileEdit_BirthdateInfo:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgba(2, 25, 41, 0.9019607843) !important;
  transition: background-color 5000s ease-in-out 0s;
}
input[type=date].profileEdit_BirthdateInfo::-webkit-calendar-picker-indicator {
  font-size: 15px;
  display: block;
  cursor: pointer;
}
input[type=date].profileEdit_BirthdateInfo::-webkit-calendar-picker-indicator:focus, input[type=date].profileEdit_BirthdateInfo::-webkit-calendar-picker-indicator:hover {
  background-color: white;
}

textarea.profileEditInfo {
  resize: none;
  border-radius: 12px;
  width: 100%;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 30px 25px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-2xl);
  position: relative;
  line-height: 1.5;
  resize: none;
}
textarea.profileEditInfo::-moz-placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
textarea.profileEditInfo::placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
textarea.profileEditInfo:focus {
  outline: none;
}
textarea.profileEditInfo:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: rgba(2, 25, 41, 0.9019607843) !important;
}
textarea.profileEditInfo:-webkit-autofill, textarea.profileEditInfo:-webkit-autofill:hover, textarea.profileEditInfo:-webkit-autofill:focus, textarea.profileEditInfo:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgba(2, 25, 41, 0.9019607843) !important;
  transition: background-color 5000s ease-in-out 0s;
}

textarea.profileEditStandard {
  border-radius: 12px;
  width: 100%;
  height: -moz-fit-content;
  height: auto;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: calc(2vw + 9px);
  position: relative;
  line-height: 1.5;
  resize: none;
}
textarea.profileEditStandard::-moz-placeholder {
  color: gray;
}
textarea.profileEditStandard::placeholder {
  color: gray;
}
textarea.profileEditStandard:focus {
  outline: none;
}
textarea.profileEditStandard:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: rgba(2, 25, 41, 0.9019607843) !important;
}
textarea.profileEditStandard:-webkit-autofill, textarea.profileEditStandard:-webkit-autofill:hover, textarea.profileEditStandard:-webkit-autofill:focus, textarea.profileEditStandard:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgba(2, 25, 41, 0.9019607843) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.prof_account_id {
  font-size: var(--font-xl) !important;
  color: var(--cl-text-b-40) !important;
  font-weight: 500 !important;
  letter-spacing: var(--nie-letter-spacing-3) !important;
}

.profEdit_btn {
  font-size: var(--font-xl);
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-3);
  font-weight: normal;
  color: var(--cl-text-b-40);
}

.profEdit_title {
  font-size: var(--font-2xl);
  padding: 10px 10px;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-3);
  font-weight: bold;
}

.profEdit_sub {
  font-size: var(--font-xl);
  color: var(--cl-ita-green-mid);
  padding: 10px 12px;
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-3);
}

.profEdit_vague {
  font-size: var(--font-xl);
  color: var(--cl-text-b-150);
  padding-left: 5px;
  font-weight: 500;
  letter-spacing: var(--nie-letter-spacing-3);
}

.profEdit_feat {
  font-size: var(--font-xl);
  color: var(--cl-ita-green-mid);
  font-weight: bold;
  letter-spacing: var(--nie-letter-spacing-3);
}

button.prof_utility_menuBtn {
  font-size: var(--font-xl);
  color: var(--cl-text-b-40);
  font-weight: 500;
  background: none;
  border: none;
  outline: none;
}
button.prof_utility_menuBtn:hover, button.prof_utility_menuBtn:focus {
  background: none;
}

.prof_utility_right_menuPanel {
  display: none;
  position: absolute;
  top: 50px;
  right: 20px;
  width: 100px;
  height: -moz-max-content;
  height: max-content;
  background: #ffffff;
  z-index: 1000;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  border-radius: 16px;
  box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
  border: 1px solid lightgray;
}
.prof_utility_right_menuPanel.open {
  display: flex;
}
.prof_utility_right_menuPanel ul li {
  padding: 5px 0;
  font-size: var(--font-xl);
  line-height: 1.6;
  letter-spacing: var(--nie-letter-spacing-3);
  font-weight: 600;
  color: var(--cl-text-b-40);
  cursor: pointer;
}
.prof_utility_right_menuPanel ul li:hover {
  background: #f7f7f7;
}
.prof_utility_right_menuPanel ul li:first-child {
  padding-top: 0;
}

button.plogComment_modify {
  background: #505050;
  border: 0px solid #3F51B5;
  border-radius: 20px;
  color: #ffffff;
  display: block;
  font-size: var(--font-lg);
  font-weight: bold;
  padding: 6px 10px;
  position: relative;
  text-transform: uppercase;
  outline: 0;
  border-radius: 25px;
}

textarea.plogComment {
  border-radius: 25px;
  width: 100vw;
  height: -moz-max-content;
  height: max-content;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: calc(2vw + 9px);
  position: relative;
  line-height: 1.5;
  resize: none;
}
textarea.plogComment::-moz-placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
textarea.plogComment::placeholder {
  color: rgba(2, 25, 41, 0.9019607843);
}
textarea.plogComment:focus {
  outline: none;
}
textarea.plogComment:-internal-autofill-selected {
  background-color: white !important;
  box-shadow: 0 0 0 100px white inset !important;
  color: rgba(2, 25, 41, 0.9019607843) !important;
}
textarea.plogComment:-webkit-autofill, textarea.plogComment:-webkit-autofill:hover, textarea.plogComment:-webkit-autofill:focus, textarea.plogComment:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: rgba(2, 25, 41, 0.9019607843) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.program_finished {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1500;
  /* Sit on top */
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Full width */
  height: calc(var(--vh, 1vh) * 100);
  /* Full height */
  overflow: hidden;
  /* Enable scroll if needed */
  /* Fallback color */
  -webkit-backdrop-filter: blur(38px);
  backdrop-filter: blur(38px);
  /* Modal Content/Box */
}
.program_finished .program-finished-content {
  position: relative;
  display: grid;
  grid-template: "h" 50px "c1" 1fr "c2" 1fr "c3" 50px "c4" 50px/1fr;
  width: 90%;
  height: calc(var(--vh, 1vh) * 100);
  height: -moz-fit-content;
  height: fit-content;
  height: auto;
  padding: 25px 13px;
  font-size: var(--font-2xl);
  line-height: 1.5;
  text-align: left;
  /*Couldbemoreorless,dependingonscreensize*/
}
.program_finished .program-finished-content > * {
  width: 100%;
}
.program_finished .program-finished-content > .g-h {
  grid-area: h;
}
.program_finished .program-finished-content > .g-c1 {
  grid-area: c1;
}
.program_finished .program-finished-content > .g-c2 {
  grid-area: c2;
}
.program_finished .program-finished-content > .g-c3 {
  grid-area: c3;
}
.program_finished .program-finished-content > .g-c4 {
  grid-area: c4;
}
.program_finished .csv_report_title {
  font-size: 6vw;
}

.top1-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 15;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: calc(var(--vh, 1vh) * 100);
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.72);
  /* Black w/ opacity */
  animation: slideToRight 0.5s ease-in-out;
}

.plogtype-modal {
  display: none;
  width: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  height: calc(var(--vh, 1vh) * 100);
  background-color: rgba(0, 0, 0, 0.72);
  overflow-x: hidden;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  /* Modal Content/Box */
}
.plogtype-modal .plogtype-modal-content {
  display: grid;
  position: absolute;
  right: 0;
  grid-template: "a" 5px "b" 1fr "c" 1fr "d" 50px/1fr;
  border-radius: 12px 0 0 12px;
  background-color: white;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  animation: slideToLeft 0.5s ease-in-out;
}
.plogtype-modal .plogtype-modal-content > * {
  display: grid;
}

.top1-modal-2 {
  display: none;
  width: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.72);
  overflow-x: hidden;
  animation: fadeIn 0.4s ease-in-out;
  /* Modal Content/Box */
}
.top1-modal-2 .top1-modal-content-2 {
  display: grid;
  position: absolute;
  bottom: 0;
  grid-template: "a" 55px "b" 1fr "e" calc(10px + 3vh)/1fr;
  border-radius: 30px 30px 0 0;
  background-color: white;
  width: 100%;
  height: calc(var(--vh, 1vh) * 45);
  animation: slide-up 0.4s ease-in-out;
}
.top1-modal-2 .top1-modal-content-2.off {
  animation: slide-down 0.4s ease-in-out;
}
.top1-modal-2 .top1-modal-content-2 > * {
  display: grid;
}
.top1-modal-2 .top1-modal-content-2 .ga {
  grid-area: a;
  font-size: calc(4px + 3vw);
  padding: 20px;
  font-weight: 700;
}
.top1-modal-2 .top1-modal-content-2 .ga .gaa {
  grid-area: a;
}
.top1-modal-2 .top1-modal-content-2 .ga .gab {
  grid-area: b;
}
.top1-modal-2 .top1-modal-content-2 .gr {
  grid-area: r;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
}
.top1-modal-2 .top1-modal-content-2 .gr .gra {
  grid-area: a;
}
.top1-modal-2 .top1-modal-content-2 .gr .grb {
  grid-area: b;
}
.top1-modal-2 .top1-modal-content-2 .gr .grc {
  grid-area: c;
}
.top1-modal-2 .top1-modal-content-2 .gb {
  grid-area: b;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
  padding: 0 4vw;
}
.top1-modal-2 .top1-modal-content-2 .ge {
  grid-area: e;
}

.top1-modal-1 {
  display: none;
  width: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  height: calc(var(--vh, 1vh) * 100);
  background-color: rgba(0, 0, 0, 0.72);
  overflow-x: hidden;
  animation: fadeIn 0.4s ease-in-out;
}
.top1-modal-1.off {
  animation: fade-out 0.5s ease-in-out;
}

/* Modal Content/Box */
.top1-modal-content {
  display: grid;
  position: absolute;
  right: 0;
  grid-template: "r" 5px "b" 1fr "e" 65px/1fr;
  border-radius: 12px 0 0 12px;
  background-color: white;
  width: 75%;
  height: calc(var(--vh, 1vh) * 100);
  animation: slideToLeft 0.5s ease-in-out;
}
.top1-modal-content.off {
  animation: slideToLeft_Rev 0.5s ease-in-out;
}
.top1-modal-content > * {
  display: grid;
}
.top1-modal-content .ga {
  grid-area: a;
  grid-template: "a b" 1fr/1fr auto;
}
.top1-modal-content .ga .gaa {
  grid-area: a;
}
.top1-modal-content .ga .gab {
  grid-area: b;
}
.top1-modal-content .gr {
  grid-area: r;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
}
.top1-modal-content .gr .gra {
  grid-area: a;
}
.top1-modal-content .gr .grb {
  grid-area: b;
}
.top1-modal-content .gr .grc {
  grid-area: c;
}
.top1-modal-content .gb {
  grid-area: b;
}
.top1-modal-content .ge {
  grid-area: e;
}

.top1-modal-2 {
  display: none;
  width: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.72);
  overflow-x: hidden;
  animation: fadeIn 0.4s ease-in-out;
  /* Modal Content/Box */
}
.top1-modal-2.off {
  animation: fade-out 0.5s ease-in-out;
}
.top1-modal-2 .top1-modal-content-2 {
  display: grid;
  position: absolute;
  bottom: 0;
  grid-template: "a" 55px "b" 1fr "e" calc(10px + 3vh)/1fr;
  border-radius: 30px 30px 0 0;
  background-color: white;
  width: 100%;
  height: calc(var(--vh, 1vh) * 45);
  animation: slide-up 0.4s ease-in-out;
}
.top1-modal-2 .top1-modal-content-2.off {
  animation: slide-down 0.4s ease-in-out;
}
.top1-modal-2 .top1-modal-content-2 > * {
  display: grid;
}
.top1-modal-2 .top1-modal-content-2 .ga {
  grid-area: a;
  font-size: calc(4px + 4vw);
  padding: 18px;
  font-weight: 700;
}
.top1-modal-2 .top1-modal-content-2 .ga .gaa {
  grid-area: a;
}
.top1-modal-2 .top1-modal-content-2 .ga .gab {
  grid-area: b;
}
.top1-modal-2 .top1-modal-content-2 .gr {
  grid-area: r;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
}
.top1-modal-2 .top1-modal-content-2 .gr .gra {
  grid-area: a;
}
.top1-modal-2 .top1-modal-content-2 .gr .grb {
  grid-area: b;
}
.top1-modal-2 .top1-modal-content-2 .gr .grc {
  grid-area: c;
}
.top1-modal-2 .top1-modal-content-2 .gb {
  grid-area: b;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
  padding: 0 4vw;
}
.top1-modal-2 .top1-modal-content-2 .ge {
  grid-area: e;
}

.top1-modal-new {
  display: none;
  width: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  height: calc(var(--vh, 1vh) * 100);
  background: rgba(219, 219, 219, 0.431372549);
  overflow: hidden;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  animation: fadeIn 0.4s ease-in-out;
  /* Modal Content/Box */
}
.top1-modal-new.off {
  animation: fade-out 0.5s ease-in-out;
}
.top1-modal-new .top1-modal-content-new {
  display: grid;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  grid-template: "r" 20px "b" 1fr "e" 20px/1fr;
  width: 100%;
  height: calc(var(--vh, 1vh) * 75);
  animation: slide-up 0.4s ease-in-out;
}
.top1-modal-new .top1-modal-content-new.off {
  animation: slide-down 0.4s ease-in-out;
}
.top1-modal-new .top1-modal-content-new > * {
  display: grid;
}
.top1-modal-new .top1-modal-content-new .ga {
  grid-area: a;
  grid-template: "a b" 1fr/1fr auto;
}
.top1-modal-new .top1-modal-content-new .ga .gaa {
  grid-area: a;
}
.top1-modal-new .top1-modal-content-new .ga .gab {
  grid-area: b;
}
.top1-modal-new .top1-modal-content-new .gr {
  grid-area: r;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
}
.top1-modal-new .top1-modal-content-new .gr .gra {
  grid-area: a;
}
.top1-modal-new .top1-modal-content-new .gr .grb {
  grid-area: b;
}
.top1-modal-new .top1-modal-content-new .gr .grc {
  grid-area: c;
}
.top1-modal-new .top1-modal-content-new .gb {
  grid-area: b;
}
.top1-modal-new .top1-modal-content-new .ge {
  grid-area: e;
}

.topleft_menu_id {
  letter-spacing: -1.7px;
  font-weight: 500;
  font-size: 22px;
  margin: 0px 9px;
  padding: 33px 20px;
  /* border-bottom: 1px solid #d8d8d8; */
  background-color: transparent;
  box-sizing: border-box;
}

.topleft_menu_log {
  letter-spacing: -1.7px;
  position: relative;
  font-weight: 500;
  font-size: 14px;
  text-align: right;
  margin-right: 12px;
  color: #00694d;
  padding: 37px 14px;
  background-color: transparent;
  box-sizing: border-box;
}
.topleft_menu_log:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f090";
  left: -8px;
  padding: 2px 1px;
  font-size: 18px;
  line-height: 16px;
}
.topleft_menu_log.active:before {
  content: "\f08b";
}
.topleft_menu_log:hover, .topleft_menu_log:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}

.m_story_contents {
  width: 100%;
  height: 100%;
}
.m_story_contents .mission_logo {
  font-size: 30px;
  color: white;
  padding-top: 30px;
  margin: 20px;
  background: url(../public/img/logo/mc_logo_oct2020_v7.svg) no-repeat center;
  /* background-size: 100%; */
  width: 80px;
  height: 80px;
  margin-bottom: 40px;
}
.m_story_contents .mission_now {
  letter-spacing: -1px;
  font-size: 28px;
  padding: 30px;
  margin: 25px;
  background-color: #00ff98;
  box-shadow: 2px 2px 7px 4px rgba(0, 255, 152, 0.3803921569);
}
.m_story_contents .mission_now .right {
  float: right;
  font-size: 15px;
  padding-top: 9px;
}
.m_story_contents .mission_now .ms_subtext {
  margin-top: 5px;
  font-size: 13px;
  letter-spacing: -1px;
}
.m_story_contents .mission_now_1 {
  letter-spacing: -1px;
  color: white;
  font-size: 25px;
  font-weight: 300;
  padding: 10px;
  margin: 25px;
}
.m_story_contents .mission_now_1 .right {
  float: right;
  font-size: 15px;
  padding-top: 9px;
}
.m_story_contents .mission_now_1 .ms_subtext {
  margin-top: 5px;
  font-size: 13px;
  letter-spacing: -1px;
}
.m_story_contents .topleft_menu_Endrun {
  letter-spacing: -1.7px;
  font-weight: 500;
  font-size: 1.4rem;
  position: relative;
  margin: 0px 14px;
  padding: 18px 34px;
  border-bottom: 1px solid #d8d8d8;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_Endrun:before {
  position: absolute;
  font-family: FontAwesome;
  content: "🚀";
  left: 5px;
  /* background: #F44336; */
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 17px;
  line-height: 16px;
}
.m_story_contents .topleft_menu_Endrun.active:before {
  content: "\f087";
}
.m_story_contents .topleft_menu_Endrun:hover, .m_story_contents .topleft_menu_Endrun:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}
.m_story_contents .topleft_menu_userguide {
  letter-spacing: -1.7px;
  font-weight: 500;
  position: relative;
  font-size: 1.4rem;
  margin: 0px 0px;
  padding: 12px 34px;
  border-top: 1px solid #d8d8d8;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_userguide:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f054";
  left: 13px;
  color: #565656;
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 11px;
  line-height: 16px;
}
.m_story_contents .topleft_menu_userguide:hover, .m_story_contents .topleft_menu_userguide:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}
.m_story_contents .topleft_menu_kakaochat {
  letter-spacing: -1.7px;
  font-weight: 500;
  position: relative;
  font-size: 1.5rem;
  margin: 0px 0px;
  color: #303030;
  padding: 14px 36px;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_kakaochat:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f086";
  left: 8px;
  /* background: #F44336; */
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 19px;
  line-height: 16px;
}
.m_story_contents .topleft_menu_kakaochat:hover, .m_story_contents .topleft_menu_kakaochat:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}
.m_story_contents .topleft_menu_stats {
  letter-spacing: -1.7px;
  font-weight: 500;
  position: relative;
  font-size: 1.5rem;
  margin: 0px 0px;
  color: #303030;
  padding: 14px 36px;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_stats:before {
  position: absolute;
  font-family: FontAwesome;
  content: "📈";
  left: 6px;
  /* background: #F44336; */
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 16px;
  line-height: 16px;
}
.m_story_contents .topleft_menu_stats:hover, .m_story_contents .topleft_menu_stats:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}
.m_story_contents .topleft_menu_cardsection {
  display: flex;
}
.m_story_contents .topleft_menu_1365_open {
  letter-spacing: -1.7px;
  font-weight: 500;
  position: relative;
  font-size: 1.4rem;
  margin: 0px 0px;
  padding: 12px 34px;
  border-top: 1px solid #d8d8d8;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_1365_open:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f054";
  left: 13px;
  color: #565656;
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 11px;
  line-height: 16px;
}
.m_story_contents .topleft_menu_1365_open:hover, .m_story_contents .topleft_menu_1365_open:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}
.m_story_contents .topleft_menu_1365_sign {
  letter-spacing: -1.7px;
  font-weight: 500;
  position: relative;
  font-size: 1.4rem;
  margin: 0px 0px;
  padding: 12px 34px;
  border-top: 1px solid #d8d8d8;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_1365_sign:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f054";
  left: 13px;
  color: #565656;
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 11px;
  line-height: 16px;
}
.m_story_contents .topleft_menu_1365_sign:hover, .m_story_contents .topleft_menu_1365_sign:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}
.m_story_contents .topleft_menu_sublist {
  letter-spacing: -1px;
  font-weight: 500;
  position: relative;
  font-size: 1.4rem;
  margin: 0px 0px;
  padding: 12px 34px;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_sublist:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f054";
  left: 13px;
  color: #565656;
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 11px;
  line-height: 16px;
}
.m_story_contents .topleft_menual_icon {
  padding: 16px 34px;
  font-size: 17px;
  color: #1b1b1b;
  border-bottom: 1.3px solid #d4d4d4;
}
.m_story_contents .topleft_menual_icon:before {
  content: "📱";
  font-size: 18px;
  left: 4px;
}
.m_story_contents .topleft_pageMenu_item {
  padding: 17px 36px;
  font-size: 16px;
  color: #1b1b1b;
  background: rgba(120, 154, 235, 0.231372549);
  border-radius: 10px;
  /* border-bottom: 1.3px solid #d4d4d4; */
  margin: 15px 0;
}
.m_story_contents .topleft_pageMenu_item:hover {
  border: 1px solid #adadad;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.m_story_contents .topleft_pageMenu_item.bicycle::before {
  content: "🚴";
  font-size: 18px;
  left: 4px;
}
.m_story_contents .topleft_pageMenu_item.plog::before {
  content: "🥤";
  font-size: 18px;
  left: 4px;
}
.m_story_contents .topleft_rank_icon {
  padding: 16px 34px;
  font-size: 17px;
  color: #1b1b1b;
  border-bottom: 1.3px solid #d4d4d4;
}
.m_story_contents .topleft_rank_icon:before {
  content: "🏆";
  font-size: 15px;
  left: 4px;
}
.m_story_contents .topleft_social_icon {
  padding: 16px 34px;
  font-size: 17px;
  color: #1b1b1b;
  border-bottom: 1.3px solid #d4d4d4;
}
.m_story_contents .topleft_social_icon:before {
  content: "🧑‍🤝‍🧑";
  font-size: 15px;
  left: 4px;
}
.m_story_contents .topleft_stats_icon {
  padding: 16px 34px;
  font-size: 17px;
  color: #1b1b1b;
  border-bottom: 1.3px solid #d4d4d4;
}
.m_story_contents .topleft_stats_icon:before {
  content: "📊";
  font-size: 15px;
  left: 4px;
}
.m_story_contents .topleft_menu_resetauth {
  cursor: pointer;
  letter-spacing: -1.7px;
  font-weight: 500;
  position: relative;
  font-size: 1.5rem;
  margin: 0px 0px;
  color: #303030;
  padding: 14px 36px;
  background-color: transparent;
  box-sizing: border-box;
}
.m_story_contents .topleft_menu_resetauth:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f059";
  left: 9px;
  color: #f44336;
  /* background: #F44336; */
  /* border-radius: 50%; */
  /* border: 1px solid; */
  padding: 2px 2px;
  text-align: center;
  font-size: 19px;
  line-height: 16px;
}
.m_story_contents .topleft_menu_resetauth:hover, .m_story_contents .topleft_menu_resetauth:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}

#reset_auth_open.not-singed {
  display: block;
}
#reset_auth_open.signed {
  display: none;
}

[data-findidpw].not-singed {
  display: block;
}
[data-findidpw].signed {
  display: none;
}

.topleft_menu_pagelink {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #004c37;
  letter-spacing: -1.3px;
  /* top: 109px; */
  border-radius: 10px;
  font-weight: 500;
  background: url("../public/img/logo/admin_logo_ITA.png") no-repeat left;
  position: relative;
  font-size: 15px;
  margin: 0px 20px;
  background-size: 42%;
  height: 100%;
  /* border-bottom: 1px solid #d8d8d8; */
  box-sizing: border-box;
}
.topleft_menu_pagelink:before {
  position: absolute;
  font-family: FontAwesome;
  left: 8px;
  /* background: #F44336; */
  /* border-radius: 50%; */
  /* top: 3px; */
  /* border: 1px solid; */
  padding: 0px 4px;
  text-align: center;
  font-size: 19px;
  line-height: 17px;
}
.topleft_menu_pagelink:hover, .topleft_menu_pagelink:focus {
  color: rgb(0, 80, 43);
  text-decoration: none;
  cursor: pointer;
}

/* The Close Button */
.top1_Close {
  position: absolute;
  right: 43px;
  top: 12px;
  right: 32px;
  /* background: white; */
  opacity: 1;
  transition: 0.5s;
}
.top1_Close:hover {
  opacity: 1;
}
.top1_Close:before, .top1_Close:after {
  position: absolute;
  /* left: 15px; */
  right: 50px;
  content: "";
  height: 40px;
  width: 2px;
  background-color: rgb(255, 255, 255);
}
.top1_Close:before {
  transform: rotate(45deg);
}
.top1_Close:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

.menumodal1 {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 15;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.menumodal1-content {
  display: grid;
  grid-template: "a" 1fr/1fr;
  background-color: #272727;
  /*15%fromthetopandcentered*/
  width: 100%;
  /*Couldbemoreorless,dependingonscreensize*/
}
.menumodal1-content > .ga {
  grid-area: a;
}
.menumodal1-content > .gb {
  grid-area: b;
}
.menumodal1-content > .gb1 {
  grid-area: b1;
}
.menumodal1-content > .gc {
  grid-area: c;
}
.menumodal1-content > .gd {
  grid-area: d;
}

/* The Close Button */
.menu1close {
  color: rgb(37, 37, 37);
  font-size: 28px;
  font-weight: normal;
}

.menu1close:hover,
.menu1close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.menumodal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 15;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.menumodal-content {
  display: grid;
  grid-template: "a" 1fr/1fr;
  background-color: #272727;
  /*15%fromthetopandcentered*/
  width: 100%;
  /*Couldbemoreorless,dependingonscreensize*/
}
.menumodal-content > .ga {
  grid-area: a;
}
.menumodal-content > .gb {
  grid-area: b;
}
.menumodal-content > .gb1 {
  grid-area: b1;
}
.menumodal-content > .gc {
  grid-area: c;
}
.menumodal-content > .gd {
  grid-area: d;
}

/* The Close Button */
.menuclose {
  color: rgb(37, 37, 37);
  font-size: 28px;
  font-weight: normal;
}

.menuclose:hover,
.menuclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.complete_modal {
  z-index: 6;
  display: none;
  position: absolute;
  grid-template: "body" 1fr/1fr;
  background: rgba(250, 250, 250, 0.768627451);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  /* top: 15%; */
  left: 0;
  margin: auto;
  z-index: 6;
  right: 0;
  /* width: 90%; */
  height: 100%;
  z-index: 10;
  /* The Close Button */
}
.complete_modal > .g-body {
  grid-area: body;
}
.complete_modal .complete_modal_content {
  display: grid;
  grid-template: "m" 20px "a" 1fr "b" 65px/1fr;
  line-height: 23px;
  font-size: 17px;
  letter-spacing: -1.1px;
  text-align: center;
  color: #00502b;
  height: 100%;
  padding: 60px 40px;
}
.complete_modal .gm {
  grid-area: m;
}
.complete_modal .ga {
  grid-area: a;
}
.complete_modal .gb {
  grid-area: b;
}
.complete_modal .headtitle {
  line-height: 29px;
  text-align: justify;
  color: #00ffb3;
  letter-spacing: -1.1px;
}
.complete_modal .complete_modal_timer {
  line-height: 1;
  font-size: 50px;
  font-family: "Barlow Semi Condensed", "Oswald";
  font-style: italic;
  font-weight: 700;
  letter-spacing: -1.1px;
  text-align: center;
  color: #f9392c;
}
.complete_modal .complete_modal_record {
  line-height: 1.8;
  font-size: 22px;
  letter-spacing: -1.1px;
  text-align: center;
  color: #00502b;
}
.complete_modal .gpclose {
  position: absolute;
  right: 0;
  opacity: 1;
}
.complete_modal .gpclose:hover {
  opacity: 1;
}
.complete_modal .gpclose:before, .complete_modal .gpclose:after {
  position: absolute;
  /* left: 15px; */
  content: "";
  height: 33px;
  width: 2px;
  background-color: white;
}
.complete_modal .gpclose:before {
  transform: rotate(45deg);
}
.complete_modal .gpclose:after {
  transform: rotate(-45deg);
}

.complete_modal2 {
  z-index: 6;
  display: none;
  position: absolute;
  grid-template: "body" 1fr/1fr;
  background: #ffffff;
  /* top: 15%; */
  top: 0;
  left: 0;
  margin: auto;
  z-index: 6;
  right: 0;
  /* width: 90%; */
  height: 100%;
  z-index: 10;
  /* The Close Button */
}
.complete_modal2 > .g-body {
  grid-area: body;
}
.complete_modal2 .complete_modal2_content {
  display: grid;
  grid-template: "m" 20px "a" 1fr "b" 65px/1fr;
  line-height: 23px;
  font-size: 17px;
  letter-spacing: -1.1px;
  text-align: center;
  color: #00502b;
  height: 100%;
  padding: 60px 40px;
}
.complete_modal2 .gm {
  grid-area: m;
}
.complete_modal2 .ga {
  grid-area: a;
}
.complete_modal2 .gb {
  grid-area: b;
}
.complete_modal2 .headtitle {
  line-height: 29px;
  text-align: justify;
  color: #00ffb3;
  letter-spacing: -1.1px;
}
.complete_modal2 .complete_modal2_timer {
  line-height: 1;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1.1px;
  text-align: center;
  color: var(--CSV-Color);
}
.complete_modal2 .complete_modal2_record {
  line-height: 1.8;
  font-size: 22px;
  letter-spacing: -1.1px;
  text-align: center;
  color: #00502b;
}
.complete_modal2 .gpclose {
  position: absolute;
  right: 0;
  opacity: 1;
}
.complete_modal2 .gpclose:hover {
  opacity: 1;
}
.complete_modal2 .gpclose:before, .complete_modal2 .gpclose:after {
  position: absolute;
  /* left: 15px; */
  content: "";
  height: 33px;
  width: 2px;
  background-color: white;
}
.complete_modal2 .gpclose:before {
  transform: rotate(45deg);
}
.complete_modal2 .gpclose:after {
  transform: rotate(-45deg);
}

.wrap-loading {
  /*화면 전체를 어둡게 합니다.*/
  display: none;
  z-index: 10;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  /*not in ie */
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#20000000", endColorstr="#20000000");
  /* ie */
}

.wrap-loading div {
  /*로딩 이미지*/
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
}

.display-none {
  /*감추기*/
  display: none;
}

#link {
  color: #E45635;
  display: block;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
}

#link:hover {
  color: #CCCCCC;
}

#link,
#link:hover {
  transition: color 0.5s ease-out;
}

/** BEGIN CSS **/
@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@keyframes loading-text-opacity {
  0% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
#introModal .loading-container,
#introModal .loading,
#loaderModal .loading-container,
#loaderModal .loading {
  height: 100px;
  position: relative;
  width: 100px;
  border-radius: 100%;
}
#introModal .loading-container,
#loaderModal .loading-container {
  margin: 40px auto;
}
#introModal .loading,
#loaderModal .loading {
  border: 2px solid transparent;
  border-color: transparent white transparent white;
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}
#introModal .loading-container:hover .loading,
#loaderModal .loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}
#introModal .loading-container:hover .loading,
#introModal .loading-container .loading,
#loaderModal .loading-container:hover .loading,
#loaderModal .loading-container .loading {
  transition: all 0.5s ease-in-out;
}
#introModal #loading-text,
#loaderModal #loading-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  line-height: 1;
  letter-spacing: 0px;
  top: 0;
  width: 100px;
}
#introModal #loading-intro-text,
#loaderModal #loading-intro-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: #ffffff;
  font-family: "Helvetica Neue, " Helvetica ", " "arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -1px;
  left: -1px;
  width: 100px;
}

.complete_modal .loading-container,
.complete_modal .loading {
  height: 200px;
  position: relative;
  width: 200px;
  border-radius: 100%;
}
.complete_modal .loading-container {
  margin: 40px auto;
}
.complete_modal .loading {
  border: 1px solid transparent;
  border-color: transparent rgba(255, 255, 255, 0.733) transparent rgba(255, 255, 255, 0.699);
  -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
  -moz-transform-origin: 50% 50%;
  -o-animation: rotate-loading 1.5s linear 0s infinite normal;
  -o-transform-origin: 50% 50%;
  -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  -webkit-transform-origin: 50% 50%;
  animation: rotate-loading 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}
.complete_modal .loading-container:hover .loading {
  border-color: transparent #E45635 transparent #E45635;
}
.complete_modal .loading-container:hover .loading,
.complete_modal .loading-container .loading {
  transition: all 0.5s ease-in-out;
}
.complete_modal #loading-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: #ffffff;
  font-family: "Helvetica Neue, " Helvetica ", " "arial";
  font-size: 10px;
  font-weight: bold;
  margin-top: 45px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 200px;
}
.complete_modal #loading-intro-text {
  animation: loading-text-opacity 2s linear 0s infinite normal;
  color: #ffffff;
  font-family: "Helvetica Neue, " Helvetica ", " "arial";
  font-size: 17px;
  font-weight: bold;
  /* MARGIN: auto; */
  opacity: 0;
  /* BOTTOM: 0; */
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: 200px;
}

/* GENERAL BUTTON STYLING */
button,
button::after {
  transition: all 0.3s;
}

button {
  background: rgba(3, 169, 244, 0.3607843137);
  border: 0px solid #3F51B5;
  border-radius: 20px;
  color: rgb(63, 63, 63);
  display: block;
  font-family: "pretendard";
  font-size: 12px;
  font-weight: bold;
  padding: 0.5em 0.5em;
  position: relative;
  text-transform: uppercase;
  outline: 0;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
button.normalize {
  background: unset;
  border: unset;
  color: unset;
  outline: 0;
  padding: unset;
  margin: unset;
  font-size: var(--font-xl);
  font-weight: 400;
}

/* BUTTON 1 */
.btn-1::after {
  height: 0;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-1:hover:after {
  height: 100%;
}

/* BUTTON 2 */
.btn-2::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.btn-2:hover:after {
  width: 100%;
}

/* BUTTON 3 */
.btn-3::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.btn-3:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* BUTTON 4 */
.btn-4::before {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-4::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-4:hover:after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

/* BUTTON 5 */
.btn-5 {
  overflow: hidden;
}

.btn-5::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.btn-5:hover:after {
  height: 100%;
  width: 135%;
}

.btnn-1 {
  background: white;
  border: 1px solid #04a976;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: #04a976;
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 14px;
  padding: 0.5em 0.5em;
  position: relative;
  text-transform: uppercase;
  outline: 0;
}

.btnn-2 {
  background: black;
  border: 1px solid #04a976;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: #04a976;
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 14px;
  padding: 0.5em 0.5em;
  position: relative;
  text-transform: uppercase;
  outline: 0;
}
.btnn-2:hover {
  background: #000000;
}

.wh {
  color: white;
}

.bl {
  color: black;
}

.b-ye {
  background-color: yellow;
}

.b-bu {
  background-color: rgb(47, 0, 255);
  width: 100%;
  height: 100%;
}

.-s1 {
  background-color: rgb(177, 126, 126);
}

.tab {
  border-width: 0;
}

form .tab:not(.active) {
  display: none;
}

form .tab.active:first-of-type .g-b-a-c .prev,
form .tab.active:first-of-type .g-b-a-c .submit {
  display: none;
}

form .tab.active:not(:last-of-type) .g-b-a-c .submit {
  display: none;
}

form .tab.active:last-of-type .g-b-a-c .next {
  display: none;
}

.imgbox {
  background: url("../public/img/urltest.jpg") no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.imgback {
  background-color: rgb(0, 0, 0);
}

.hx-1 {
  height: 10px;
}

.hx-2 {
  height: 20px;
}

.hx-3 {
  height: 30px;
}

.hx-4 {
  height: 40px;
}

.hx-5 {
  height: 50px;
}

.hx-6 {
  height: 60px;
}

.hx-7 {
  height: 70px;
}

.hx-8 {
  height: 80px;
}

.hx-9 {
  height: 90px;
}

.hx-10 {
  height: 100px;
}

.hx-11 {
  height: 110px;
}

.hx-12 {
  height: 120px;
}

.hx-13 {
  height: 130px;
}

.hx-14 {
  height: 140px;
}

.hx-15 {
  height: 150px;
}

.hx-16 {
  height: 160px;
}

.hx-17 {
  height: 170px;
}

.hx-18 {
  height: 180px;
}

.hx-19 {
  height: 190px;
}

.hx-20 {
  height: 200px;
}

.hx-21 {
  height: 210px;
}

.hx-22 {
  height: 220px;
}

.hx-23 {
  height: 230px;
}

.hx-24 {
  height: 240px;
}

.hx-25 {
  height: 250px;
}

.hx-26 {
  height: 260px;
}

.hx-27 {
  height: 270px;
}

.hx-28 {
  height: 280px;
}

.hx-29 {
  height: 290px;
}

.hx-30 {
  height: 300px;
}

.hx-31 {
  height: 310px;
}

.hx-32 {
  height: 320px;
}

.hx-33 {
  height: 330px;
}

.hx-34 {
  height: 340px;
}

.hx-35 {
  height: 350px;
}

.hx-36 {
  height: 360px;
}

.hx-37 {
  height: 370px;
}

.hx-38 {
  height: 380px;
}

.hx-39 {
  height: 390px;
}

.hx-40 {
  height: 400px;
}

.hx-41 {
  height: 410px;
}

.hx-42 {
  height: 420px;
}

.hx-43 {
  height: 430px;
}

.hx-44 {
  height: 440px;
}

.hx-45 {
  height: 450px;
}

.hx-46 {
  height: 460px;
}

.hx-47 {
  height: 470px;
}

.hx-48 {
  height: 480px;
}

.hx-49 {
  height: 490px;
}

.hx-50 {
  height: 500px;
}

.hx-51 {
  height: 510px;
}

.hx-52 {
  height: 520px;
}

.hx-53 {
  height: 530px;
}

.hx-54 {
  height: 540px;
}

.hx-55 {
  height: 550px;
}

.hx-56 {
  height: 560px;
}

.hx-57 {
  height: 570px;
}

.hx-58 {
  height: 580px;
}

.hx-59 {
  height: 590px;
}

.hx-60 {
  height: 600px;
}

.hx-61 {
  height: 610px;
}

.hx-62 {
  height: 620px;
}

.hx-63 {
  height: 630px;
}

.hx-64 {
  height: 640px;
}

.hx-65 {
  height: 650px;
}

.hx-66 {
  height: 660px;
}

.hx-67 {
  height: 670px;
}

.hx-68 {
  height: 680px;
}

.hx-69 {
  height: 690px;
}

.hx-70 {
  height: 700px;
}

.hx-71 {
  height: 710px;
}

.hx-72 {
  height: 720px;
}

.hx-73 {
  height: 730px;
}

.hx-74 {
  height: 740px;
}

.hx-75 {
  height: 750px;
}

.hx-76 {
  height: 760px;
}

.hx-77 {
  height: 770px;
}

.hx-78 {
  height: 780px;
}

.hx-79 {
  height: 790px;
}

.hx-80 {
  height: 800px;
}

.hx-81 {
  height: 810px;
}

.hx-82 {
  height: 820px;
}

.hx-83 {
  height: 830px;
}

.hx-84 {
  height: 840px;
}

.hx-85 {
  height: 850px;
}

.hx-86 {
  height: 860px;
}

.hx-87 {
  height: 870px;
}

.hx-88 {
  height: 880px;
}

.hx-89 {
  height: 890px;
}

.hx-90 {
  height: 900px;
}

.hx-91 {
  height: 910px;
}

.hx-92 {
  height: 920px;
}

.hx-93 {
  height: 930px;
}

.hx-94 {
  height: 940px;
}

.hx-95 {
  height: 950px;
}

.hx-96 {
  height: 960px;
}

.hx-97 {
  height: 970px;
}

.hx-98 {
  height: 980px;
}

.hx-99 {
  height: 990px;
}

.hx-100 {
  height: 1000px;
}

.hp-1 {
  height: 1%;
}

.hp-2 {
  height: 2%;
}

.hp-3 {
  height: 3%;
}

.hp-4 {
  height: 4%;
}

.hp-5 {
  height: 5%;
}

.hp-6 {
  height: 6%;
}

.hp-7 {
  height: 7%;
}

.hp-8 {
  height: 8%;
}

.hp-9 {
  height: 9%;
}

.hp-10 {
  height: 10%;
}

.hp-11 {
  height: 11%;
}

.hp-12 {
  height: 12%;
}

.hp-13 {
  height: 13%;
}

.hp-14 {
  height: 14%;
}

.hp-15 {
  height: 15%;
}

.hp-16 {
  height: 16%;
}

.hp-17 {
  height: 17%;
}

.hp-18 {
  height: 18%;
}

.hp-19 {
  height: 19%;
}

.hp-20 {
  height: 20%;
}

.hp-21 {
  height: 21%;
}

.hp-22 {
  height: 22%;
}

.hp-23 {
  height: 23%;
}

.hp-24 {
  height: 24%;
}

.hp-25 {
  height: 25%;
}

.hp-26 {
  height: 26%;
}

.hp-27 {
  height: 27%;
}

.hp-28 {
  height: 28%;
}

.hp-29 {
  height: 29%;
}

.hp-30 {
  height: 30%;
}

.hp-31 {
  height: 31%;
}

.hp-32 {
  height: 32%;
}

.hp-33 {
  height: 33%;
}

.hp-34 {
  height: 34%;
}

.hp-35 {
  height: 35%;
}

.hp-36 {
  height: 36%;
}

.hp-37 {
  height: 37%;
}

.hp-38 {
  height: 38%;
}

.hp-39 {
  height: 39%;
}

.hp-40 {
  height: 40%;
}

.hp-41 {
  height: 41%;
}

.hp-42 {
  height: 42%;
}

.hp-43 {
  height: 43%;
}

.hp-44 {
  height: 44%;
}

.hp-45 {
  height: 45%;
}

.hp-46 {
  height: 46%;
}

.hp-47 {
  height: 47%;
}

.hp-48 {
  height: 48%;
}

.hp-49 {
  height: 49%;
}

.hp-50 {
  height: 50%;
}

.hp-51 {
  height: 51%;
}

.hp-52 {
  height: 52%;
}

.hp-53 {
  height: 53%;
}

.hp-54 {
  height: 54%;
}

.hp-55 {
  height: 55%;
}

.hp-56 {
  height: 56%;
}

.hp-57 {
  height: 57%;
}

.hp-58 {
  height: 58%;
}

.hp-59 {
  height: 59%;
}

.hp-60 {
  height: 60%;
}

.hp-61 {
  height: 61%;
}

.hp-62 {
  height: 62%;
}

.hp-63 {
  height: 63%;
}

.hp-64 {
  height: 64%;
}

.hp-65 {
  height: 65%;
}

.hp-66 {
  height: 66%;
}

.hp-67 {
  height: 67%;
}

.hp-68 {
  height: 68%;
}

.hp-69 {
  height: 69%;
}

.hp-70 {
  height: 70%;
}

.hp-71 {
  height: 71%;
}

.hp-72 {
  height: 72%;
}

.hp-73 {
  height: 73%;
}

.hp-74 {
  height: 74%;
}

.hp-75 {
  height: 75%;
}

.hp-76 {
  height: 76%;
}

.hp-77 {
  height: 77%;
}

.hp-78 {
  height: 78%;
}

.hp-79 {
  height: 79%;
}

.hp-80 {
  height: 80%;
}

.hp-81 {
  height: 81%;
}

.hp-82 {
  height: 82%;
}

.hp-83 {
  height: 83%;
}

.hp-84 {
  height: 84%;
}

.hp-85 {
  height: 85%;
}

.hp-86 {
  height: 86%;
}

.hp-87 {
  height: 87%;
}

.hp-88 {
  height: 88%;
}

.hp-89 {
  height: 89%;
}

.hp-90 {
  height: 90%;
}

.hp-91 {
  height: 91%;
}

.hp-92 {
  height: 92%;
}

.hp-93 {
  height: 93%;
}

.hp-94 {
  height: 94%;
}

.hp-95 {
  height: 95%;
}

.hp-96 {
  height: 96%;
}

.hp-97 {
  height: 97%;
}

.hp-98 {
  height: 98%;
}

.hp-99 {
  height: 99%;
}

.hp-100 {
  height: 100%;
}

.fs-1 {
  font-size: 1px;
}

.fs-2 {
  font-size: 2px;
}

.fs-3 {
  font-size: 3px;
}

.fs-4 {
  font-size: 4px;
}

.fs-5 {
  font-size: 5px;
}

.fs-6 {
  font-size: 6px;
}

.fs-7 {
  font-size: 7px;
}

.fs-8 {
  font-size: 8px;
}

.fs-9 {
  font-size: 9px;
}

.fs-10 {
  font-size: 10px;
}

.fs-11 {
  font-size: 11px;
}

.fs-12 {
  font-size: 12px;
}

.fs-13 {
  font-size: 13px;
}

.fs-14 {
  font-size: 14px;
}

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 16px;
}

.fs-17 {
  font-size: 17px;
}

.fs-18 {
  font-size: 18px;
}

.fs-19 {
  font-size: 19px;
}

.fs-20 {
  font-size: 20px;
}

.fs-21 {
  font-size: 21px;
}

.fs-22 {
  font-size: 22px;
}

.fs-23 {
  font-size: 23px;
}

.fs-24 {
  font-size: 24px;
}

.fs-25 {
  font-size: 25px;
}

.fs-26 {
  font-size: 26px;
}

.fs-27 {
  font-size: 27px;
}

.fs-28 {
  font-size: 28px;
}

.fs-29 {
  font-size: 29px;
}

.fs-30 {
  font-size: 30px;
}

.fs-31 {
  font-size: 31px;
}

.fs-32 {
  font-size: 32px;
}

.fs-33 {
  font-size: 33px;
}

.fs-34 {
  font-size: 34px;
}

.fs-35 {
  font-size: 35px;
}

.fs-36 {
  font-size: 36px;
}

.fs-37 {
  font-size: 37px;
}

.fs-38 {
  font-size: 38px;
}

.fs-39 {
  font-size: 39px;
}

.fs-40 {
  font-size: 40px;
}

.fs-41 {
  font-size: 41px;
}

.fs-42 {
  font-size: 42px;
}

.fs-43 {
  font-size: 43px;
}

.fs-44 {
  font-size: 44px;
}

.fs-45 {
  font-size: 45px;
}

.fs-46 {
  font-size: 46px;
}

.fs-47 {
  font-size: 47px;
}

.fs-48 {
  font-size: 48px;
}

.fs-49 {
  font-size: 49px;
}

.fs-50 {
  font-size: 50px;
}

.fs-51 {
  font-size: 51px;
}

.fs-52 {
  font-size: 52px;
}

.fs-53 {
  font-size: 53px;
}

.fs-54 {
  font-size: 54px;
}

.fs-55 {
  font-size: 55px;
}

.fs-56 {
  font-size: 56px;
}

.fs-57 {
  font-size: 57px;
}

.fs-58 {
  font-size: 58px;
}

.fs-59 {
  font-size: 59px;
}

.fs-60 {
  font-size: 60px;
}

.fs-61 {
  font-size: 61px;
}

.fs-62 {
  font-size: 62px;
}

.fs-63 {
  font-size: 63px;
}

.fs-64 {
  font-size: 64px;
}

.fs-65 {
  font-size: 65px;
}

.fs-66 {
  font-size: 66px;
}

.fs-67 {
  font-size: 67px;
}

.fs-68 {
  font-size: 68px;
}

.fs-69 {
  font-size: 69px;
}

.fs-70 {
  font-size: 70px;
}

.fs-71 {
  font-size: 71px;
}

.fs-72 {
  font-size: 72px;
}

.fs-73 {
  font-size: 73px;
}

.fs-74 {
  font-size: 74px;
}

.fs-75 {
  font-size: 75px;
}

.fs-76 {
  font-size: 76px;
}

.fs-77 {
  font-size: 77px;
}

.fs-78 {
  font-size: 78px;
}

.fs-79 {
  font-size: 79px;
}

.fs-80 {
  font-size: 80px;
}

.fs-81 {
  font-size: 81px;
}

.fs-82 {
  font-size: 82px;
}

.fs-83 {
  font-size: 83px;
}

.fs-84 {
  font-size: 84px;
}

.fs-85 {
  font-size: 85px;
}

.fs-86 {
  font-size: 86px;
}

.fs-87 {
  font-size: 87px;
}

.fs-88 {
  font-size: 88px;
}

.fs-89 {
  font-size: 89px;
}

.fs-90 {
  font-size: 90px;
}

.fs-91 {
  font-size: 91px;
}

.fs-92 {
  font-size: 92px;
}

.fs-93 {
  font-size: 93px;
}

.fs-94 {
  font-size: 94px;
}

.fs-95 {
  font-size: 95px;
}

.fs-96 {
  font-size: 96px;
}

.fs-97 {
  font-size: 97px;
}

.fs-98 {
  font-size: 98px;
}

.fs-99 {
  font-size: 99px;
}

.fs-100 {
  font-size: 100px;
}

.fw-1 {
  font-weight: 100;
}

.fw-2 {
  font-weight: 200;
}

.fw-3 {
  font-weight: 300;
}

.fw-4 {
  font-weight: 400;
}

.fw-5 {
  font-weight: 500;
}

.fw-6 {
  font-weight: 600;
}

.fw-7 {
  font-weight: 700;
}

.fw-8 {
  font-weight: 800;
}

.fw-9 {
  font-weight: 900;
}

.fw-10 {
  font-weight: 1000;
}

.fw-b {
  font-weight: bold;
}

.wd-1 {
  width: 10px;
}

.wd-2 {
  width: 20px;
}

.wd-3 {
  width: 30px;
}

.wd-4 {
  width: 40px;
}

.wd-5 {
  width: 50px;
}

.wd-6 {
  width: 60px;
}

.wd-7 {
  width: 70px;
}

.wd-8 {
  width: 80px;
}

.wd-9 {
  width: 90px;
}

.wd-10 {
  width: 100px;
}

.wd-11 {
  width: 110px;
}

.wd-12 {
  width: 120px;
}

.wd-13 {
  width: 130px;
}

.wd-14 {
  width: 140px;
}

.wd-15 {
  width: 150px;
}

.wd-16 {
  width: 160px;
}

.wd-17 {
  width: 170px;
}

.wd-18 {
  width: 180px;
}

.wd-19 {
  width: 190px;
}

.wd-20 {
  width: 200px;
}

.wd-21 {
  width: 210px;
}

.wd-22 {
  width: 220px;
}

.wd-23 {
  width: 230px;
}

.wd-24 {
  width: 240px;
}

.wd-25 {
  width: 250px;
}

.wd-26 {
  width: 260px;
}

.wd-27 {
  width: 270px;
}

.wd-28 {
  width: 280px;
}

.wd-29 {
  width: 290px;
}

.wd-30 {
  width: 300px;
}

.wd-31 {
  width: 310px;
}

.wd-32 {
  width: 320px;
}

.wd-33 {
  width: 330px;
}

.wd-34 {
  width: 340px;
}

.wd-35 {
  width: 350px;
}

.wd-36 {
  width: 360px;
}

.wd-37 {
  width: 370px;
}

.wd-38 {
  width: 380px;
}

.wd-39 {
  width: 390px;
}

.wd-40 {
  width: 400px;
}

.wd-41 {
  width: 410px;
}

.wd-42 {
  width: 420px;
}

.wd-43 {
  width: 430px;
}

.wd-44 {
  width: 440px;
}

.wd-45 {
  width: 450px;
}

.wd-46 {
  width: 460px;
}

.wd-47 {
  width: 470px;
}

.wd-48 {
  width: 480px;
}

.wd-49 {
  width: 490px;
}

.wd-50 {
  width: 500px;
}

.wd-51 {
  width: 510px;
}

.wd-52 {
  width: 520px;
}

.wd-53 {
  width: 530px;
}

.wd-54 {
  width: 540px;
}

.wd-55 {
  width: 550px;
}

.wd-56 {
  width: 560px;
}

.wd-57 {
  width: 570px;
}

.wd-58 {
  width: 580px;
}

.wd-59 {
  width: 590px;
}

.wd-60 {
  width: 600px;
}

.wd-61 {
  width: 610px;
}

.wd-62 {
  width: 620px;
}

.wd-63 {
  width: 630px;
}

.wd-64 {
  width: 640px;
}

.wd-65 {
  width: 650px;
}

.wd-66 {
  width: 660px;
}

.wd-67 {
  width: 670px;
}

.wd-68 {
  width: 680px;
}

.wd-69 {
  width: 690px;
}

.wd-70 {
  width: 700px;
}

.wd-71 {
  width: 710px;
}

.wd-72 {
  width: 720px;
}

.wd-73 {
  width: 730px;
}

.wd-74 {
  width: 740px;
}

.wd-75 {
  width: 750px;
}

.wd-76 {
  width: 760px;
}

.wd-77 {
  width: 770px;
}

.wd-78 {
  width: 780px;
}

.wd-79 {
  width: 790px;
}

.wd-80 {
  width: 800px;
}

.wd-81 {
  width: 810px;
}

.wd-82 {
  width: 820px;
}

.wd-83 {
  width: 830px;
}

.wd-84 {
  width: 840px;
}

.wd-85 {
  width: 850px;
}

.wd-86 {
  width: 860px;
}

.wd-87 {
  width: 870px;
}

.wd-88 {
  width: 880px;
}

.wd-89 {
  width: 890px;
}

.wd-90 {
  width: 900px;
}

.wd-91 {
  width: 910px;
}

.wd-92 {
  width: 920px;
}

.wd-93 {
  width: 930px;
}

.wd-94 {
  width: 940px;
}

.wd-95 {
  width: 950px;
}

.wd-96 {
  width: 960px;
}

.wd-97 {
  width: 970px;
}

.wd-98 {
  width: 980px;
}

.wd-99 {
  width: 990px;
}

.wd-100 {
  width: 1000px;
}

.ht-1 {
  height: 10px;
}

.ht-2 {
  height: 20px;
}

.ht-3 {
  height: 30px;
}

.ht-4 {
  height: 40px;
}

.ht-5 {
  height: 50px;
}

.ht-6 {
  height: 60px;
}

.ht-7 {
  height: 70px;
}

.ht-8 {
  height: 80px;
}

.ht-9 {
  height: 90px;
}

.ht-10 {
  height: 100px;
}

.ht-11 {
  height: 110px;
}

.ht-12 {
  height: 120px;
}

.ht-13 {
  height: 130px;
}

.ht-14 {
  height: 140px;
}

.ht-15 {
  height: 150px;
}

.ht-16 {
  height: 160px;
}

.ht-17 {
  height: 170px;
}

.ht-18 {
  height: 180px;
}

.ht-19 {
  height: 190px;
}

.ht-20 {
  height: 200px;
}

.ht-21 {
  height: 210px;
}

.ht-22 {
  height: 220px;
}

.ht-23 {
  height: 230px;
}

.ht-24 {
  height: 240px;
}

.ht-25 {
  height: 250px;
}

.ht-26 {
  height: 260px;
}

.ht-27 {
  height: 270px;
}

.ht-28 {
  height: 280px;
}

.ht-29 {
  height: 290px;
}

.ht-30 {
  height: 300px;
}

.ht-31 {
  height: 310px;
}

.ht-32 {
  height: 320px;
}

.ht-33 {
  height: 330px;
}

.ht-34 {
  height: 340px;
}

.ht-35 {
  height: 350px;
}

.ht-36 {
  height: 360px;
}

.ht-37 {
  height: 370px;
}

.ht-38 {
  height: 380px;
}

.ht-39 {
  height: 390px;
}

.ht-40 {
  height: 400px;
}

.ht-41 {
  height: 410px;
}

.ht-42 {
  height: 420px;
}

.ht-43 {
  height: 430px;
}

.ht-44 {
  height: 440px;
}

.ht-45 {
  height: 450px;
}

.ht-46 {
  height: 460px;
}

.ht-47 {
  height: 470px;
}

.ht-48 {
  height: 480px;
}

.ht-49 {
  height: 490px;
}

.ht-50 {
  height: 500px;
}

.ht-51 {
  height: 510px;
}

.ht-52 {
  height: 520px;
}

.ht-53 {
  height: 530px;
}

.ht-54 {
  height: 540px;
}

.ht-55 {
  height: 550px;
}

.ht-56 {
  height: 560px;
}

.ht-57 {
  height: 570px;
}

.ht-58 {
  height: 580px;
}

.ht-59 {
  height: 590px;
}

.ht-60 {
  height: 600px;
}

.ht-61 {
  height: 610px;
}

.ht-62 {
  height: 620px;
}

.ht-63 {
  height: 630px;
}

.ht-64 {
  height: 640px;
}

.ht-65 {
  height: 650px;
}

.ht-66 {
  height: 660px;
}

.ht-67 {
  height: 670px;
}

.ht-68 {
  height: 680px;
}

.ht-69 {
  height: 690px;
}

.ht-70 {
  height: 700px;
}

.ht-71 {
  height: 710px;
}

.ht-72 {
  height: 720px;
}

.ht-73 {
  height: 730px;
}

.ht-74 {
  height: 740px;
}

.ht-75 {
  height: 750px;
}

.ht-76 {
  height: 760px;
}

.ht-77 {
  height: 770px;
}

.ht-78 {
  height: 780px;
}

.ht-79 {
  height: 790px;
}

.ht-80 {
  height: 800px;
}

.ht-81 {
  height: 810px;
}

.ht-82 {
  height: 820px;
}

.ht-83 {
  height: 830px;
}

.ht-84 {
  height: 840px;
}

.ht-85 {
  height: 850px;
}

.ht-86 {
  height: 860px;
}

.ht-87 {
  height: 870px;
}

.ht-88 {
  height: 880px;
}

.ht-89 {
  height: 890px;
}

.ht-90 {
  height: 900px;
}

.ht-91 {
  height: 910px;
}

.ht-92 {
  height: 920px;
}

.ht-93 {
  height: 930px;
}

.ht-94 {
  height: 940px;
}

.ht-95 {
  height: 950px;
}

.ht-96 {
  height: 960px;
}

.ht-97 {
  height: 970px;
}

.ht-98 {
  height: 980px;
}

.ht-99 {
  height: 990px;
}

.ht-100 {
  height: 1000px;
}

.gap-1 {
  gap: 1px;
}

.gap-2 {
  gap: 2px;
}

.gap-3 {
  gap: 3px;
}

.gap-4 {
  gap: 4px;
}

.gap-5 {
  gap: 5px;
}

.gap-6 {
  gap: 6px;
}

.gap-7 {
  gap: 7px;
}

.gap-8 {
  gap: 8px;
}

.gap-9 {
  gap: 9px;
}

.gap-10 {
  gap: 10px;
}

.gap-11 {
  gap: 11px;
}

.gap-12 {
  gap: 12px;
}

.gap-13 {
  gap: 13px;
}

.gap-14 {
  gap: 14px;
}

.gap-15 {
  gap: 15px;
}

.gap-16 {
  gap: 16px;
}

.gap-17 {
  gap: 17px;
}

.gap-18 {
  gap: 18px;
}

.gap-19 {
  gap: 19px;
}

.gap-20 {
  gap: 20px;
}

.gap-21 {
  gap: 21px;
}

.gap-22 {
  gap: 22px;
}

.gap-23 {
  gap: 23px;
}

.gap-24 {
  gap: 24px;
}

.gap-25 {
  gap: 25px;
}

.gap-26 {
  gap: 26px;
}

.gap-27 {
  gap: 27px;
}

.gap-28 {
  gap: 28px;
}

.gap-29 {
  gap: 29px;
}

.gap-30 {
  gap: 30px;
}

.gap-31 {
  gap: 31px;
}

.gap-32 {
  gap: 32px;
}

.gap-33 {
  gap: 33px;
}

.gap-34 {
  gap: 34px;
}

.gap-35 {
  gap: 35px;
}

.gap-36 {
  gap: 36px;
}

.gap-37 {
  gap: 37px;
}

.gap-38 {
  gap: 38px;
}

.gap-39 {
  gap: 39px;
}

.gap-40 {
  gap: 40px;
}

.gap-41 {
  gap: 41px;
}

.gap-42 {
  gap: 42px;
}

.gap-43 {
  gap: 43px;
}

.gap-44 {
  gap: 44px;
}

.gap-45 {
  gap: 45px;
}

.gap-46 {
  gap: 46px;
}

.gap-47 {
  gap: 47px;
}

.gap-48 {
  gap: 48px;
}

.gap-49 {
  gap: 49px;
}

.gap-50 {
  gap: 50px;
}

.gap-51 {
  gap: 51px;
}

.gap-52 {
  gap: 52px;
}

.gap-53 {
  gap: 53px;
}

.gap-54 {
  gap: 54px;
}

.gap-55 {
  gap: 55px;
}

.gap-56 {
  gap: 56px;
}

.gap-57 {
  gap: 57px;
}

.gap-58 {
  gap: 58px;
}

.gap-59 {
  gap: 59px;
}

.gap-60 {
  gap: 60px;
}

.gap-61 {
  gap: 61px;
}

.gap-62 {
  gap: 62px;
}

.gap-63 {
  gap: 63px;
}

.gap-64 {
  gap: 64px;
}

.gap-65 {
  gap: 65px;
}

.gap-66 {
  gap: 66px;
}

.gap-67 {
  gap: 67px;
}

.gap-68 {
  gap: 68px;
}

.gap-69 {
  gap: 69px;
}

.gap-70 {
  gap: 70px;
}

.gap-71 {
  gap: 71px;
}

.gap-72 {
  gap: 72px;
}

.gap-73 {
  gap: 73px;
}

.gap-74 {
  gap: 74px;
}

.gap-75 {
  gap: 75px;
}

.gap-76 {
  gap: 76px;
}

.gap-77 {
  gap: 77px;
}

.gap-78 {
  gap: 78px;
}

.gap-79 {
  gap: 79px;
}

.gap-80 {
  gap: 80px;
}

.gap-81 {
  gap: 81px;
}

.gap-82 {
  gap: 82px;
}

.gap-83 {
  gap: 83px;
}

.gap-84 {
  gap: 84px;
}

.gap-85 {
  gap: 85px;
}

.gap-86 {
  gap: 86px;
}

.gap-87 {
  gap: 87px;
}

.gap-88 {
  gap: 88px;
}

.gap-89 {
  gap: 89px;
}

.gap-90 {
  gap: 90px;
}

.gap-91 {
  gap: 91px;
}

.gap-92 {
  gap: 92px;
}

.gap-93 {
  gap: 93px;
}

.gap-94 {
  gap: 94px;
}

.gap-95 {
  gap: 95px;
}

.gap-96 {
  gap: 96px;
}

.gap-97 {
  gap: 97px;
}

.gap-98 {
  gap: 98px;
}

.gap-99 {
  gap: 99px;
}

.gap-100 {
  gap: 100px;
}

.gap-x-1 {
  -moz-column-gap: 1px;
       column-gap: 1px;
}

.gap-x-2 {
  -moz-column-gap: 2px;
       column-gap: 2px;
}

.gap-x-3 {
  -moz-column-gap: 3px;
       column-gap: 3px;
}

.gap-x-4 {
  -moz-column-gap: 4px;
       column-gap: 4px;
}

.gap-x-5 {
  -moz-column-gap: 5px;
       column-gap: 5px;
}

.gap-x-6 {
  -moz-column-gap: 6px;
       column-gap: 6px;
}

.gap-x-7 {
  -moz-column-gap: 7px;
       column-gap: 7px;
}

.gap-x-8 {
  -moz-column-gap: 8px;
       column-gap: 8px;
}

.gap-x-9 {
  -moz-column-gap: 9px;
       column-gap: 9px;
}

.gap-x-10 {
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.gap-x-11 {
  -moz-column-gap: 11px;
       column-gap: 11px;
}

.gap-x-12 {
  -moz-column-gap: 12px;
       column-gap: 12px;
}

.gap-x-13 {
  -moz-column-gap: 13px;
       column-gap: 13px;
}

.gap-x-14 {
  -moz-column-gap: 14px;
       column-gap: 14px;
}

.gap-x-15 {
  -moz-column-gap: 15px;
       column-gap: 15px;
}

.gap-x-16 {
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.gap-x-17 {
  -moz-column-gap: 17px;
       column-gap: 17px;
}

.gap-x-18 {
  -moz-column-gap: 18px;
       column-gap: 18px;
}

.gap-x-19 {
  -moz-column-gap: 19px;
       column-gap: 19px;
}

.gap-x-20 {
  -moz-column-gap: 20px;
       column-gap: 20px;
}

.gap-x-21 {
  -moz-column-gap: 21px;
       column-gap: 21px;
}

.gap-x-22 {
  -moz-column-gap: 22px;
       column-gap: 22px;
}

.gap-x-23 {
  -moz-column-gap: 23px;
       column-gap: 23px;
}

.gap-x-24 {
  -moz-column-gap: 24px;
       column-gap: 24px;
}

.gap-x-25 {
  -moz-column-gap: 25px;
       column-gap: 25px;
}

.gap-x-26 {
  -moz-column-gap: 26px;
       column-gap: 26px;
}

.gap-x-27 {
  -moz-column-gap: 27px;
       column-gap: 27px;
}

.gap-x-28 {
  -moz-column-gap: 28px;
       column-gap: 28px;
}

.gap-x-29 {
  -moz-column-gap: 29px;
       column-gap: 29px;
}

.gap-x-30 {
  -moz-column-gap: 30px;
       column-gap: 30px;
}

.gap-x-31 {
  -moz-column-gap: 31px;
       column-gap: 31px;
}

.gap-x-32 {
  -moz-column-gap: 32px;
       column-gap: 32px;
}

.gap-x-33 {
  -moz-column-gap: 33px;
       column-gap: 33px;
}

.gap-x-34 {
  -moz-column-gap: 34px;
       column-gap: 34px;
}

.gap-x-35 {
  -moz-column-gap: 35px;
       column-gap: 35px;
}

.gap-x-36 {
  -moz-column-gap: 36px;
       column-gap: 36px;
}

.gap-x-37 {
  -moz-column-gap: 37px;
       column-gap: 37px;
}

.gap-x-38 {
  -moz-column-gap: 38px;
       column-gap: 38px;
}

.gap-x-39 {
  -moz-column-gap: 39px;
       column-gap: 39px;
}

.gap-x-40 {
  -moz-column-gap: 40px;
       column-gap: 40px;
}

.gap-x-41 {
  -moz-column-gap: 41px;
       column-gap: 41px;
}

.gap-x-42 {
  -moz-column-gap: 42px;
       column-gap: 42px;
}

.gap-x-43 {
  -moz-column-gap: 43px;
       column-gap: 43px;
}

.gap-x-44 {
  -moz-column-gap: 44px;
       column-gap: 44px;
}

.gap-x-45 {
  -moz-column-gap: 45px;
       column-gap: 45px;
}

.gap-x-46 {
  -moz-column-gap: 46px;
       column-gap: 46px;
}

.gap-x-47 {
  -moz-column-gap: 47px;
       column-gap: 47px;
}

.gap-x-48 {
  -moz-column-gap: 48px;
       column-gap: 48px;
}

.gap-x-49 {
  -moz-column-gap: 49px;
       column-gap: 49px;
}

.gap-x-50 {
  -moz-column-gap: 50px;
       column-gap: 50px;
}

.gap-x-51 {
  -moz-column-gap: 51px;
       column-gap: 51px;
}

.gap-x-52 {
  -moz-column-gap: 52px;
       column-gap: 52px;
}

.gap-x-53 {
  -moz-column-gap: 53px;
       column-gap: 53px;
}

.gap-x-54 {
  -moz-column-gap: 54px;
       column-gap: 54px;
}

.gap-x-55 {
  -moz-column-gap: 55px;
       column-gap: 55px;
}

.gap-x-56 {
  -moz-column-gap: 56px;
       column-gap: 56px;
}

.gap-x-57 {
  -moz-column-gap: 57px;
       column-gap: 57px;
}

.gap-x-58 {
  -moz-column-gap: 58px;
       column-gap: 58px;
}

.gap-x-59 {
  -moz-column-gap: 59px;
       column-gap: 59px;
}

.gap-x-60 {
  -moz-column-gap: 60px;
       column-gap: 60px;
}

.gap-x-61 {
  -moz-column-gap: 61px;
       column-gap: 61px;
}

.gap-x-62 {
  -moz-column-gap: 62px;
       column-gap: 62px;
}

.gap-x-63 {
  -moz-column-gap: 63px;
       column-gap: 63px;
}

.gap-x-64 {
  -moz-column-gap: 64px;
       column-gap: 64px;
}

.gap-x-65 {
  -moz-column-gap: 65px;
       column-gap: 65px;
}

.gap-x-66 {
  -moz-column-gap: 66px;
       column-gap: 66px;
}

.gap-x-67 {
  -moz-column-gap: 67px;
       column-gap: 67px;
}

.gap-x-68 {
  -moz-column-gap: 68px;
       column-gap: 68px;
}

.gap-x-69 {
  -moz-column-gap: 69px;
       column-gap: 69px;
}

.gap-x-70 {
  -moz-column-gap: 70px;
       column-gap: 70px;
}

.gap-x-71 {
  -moz-column-gap: 71px;
       column-gap: 71px;
}

.gap-x-72 {
  -moz-column-gap: 72px;
       column-gap: 72px;
}

.gap-x-73 {
  -moz-column-gap: 73px;
       column-gap: 73px;
}

.gap-x-74 {
  -moz-column-gap: 74px;
       column-gap: 74px;
}

.gap-x-75 {
  -moz-column-gap: 75px;
       column-gap: 75px;
}

.gap-x-76 {
  -moz-column-gap: 76px;
       column-gap: 76px;
}

.gap-x-77 {
  -moz-column-gap: 77px;
       column-gap: 77px;
}

.gap-x-78 {
  -moz-column-gap: 78px;
       column-gap: 78px;
}

.gap-x-79 {
  -moz-column-gap: 79px;
       column-gap: 79px;
}

.gap-x-80 {
  -moz-column-gap: 80px;
       column-gap: 80px;
}

.gap-x-81 {
  -moz-column-gap: 81px;
       column-gap: 81px;
}

.gap-x-82 {
  -moz-column-gap: 82px;
       column-gap: 82px;
}

.gap-x-83 {
  -moz-column-gap: 83px;
       column-gap: 83px;
}

.gap-x-84 {
  -moz-column-gap: 84px;
       column-gap: 84px;
}

.gap-x-85 {
  -moz-column-gap: 85px;
       column-gap: 85px;
}

.gap-x-86 {
  -moz-column-gap: 86px;
       column-gap: 86px;
}

.gap-x-87 {
  -moz-column-gap: 87px;
       column-gap: 87px;
}

.gap-x-88 {
  -moz-column-gap: 88px;
       column-gap: 88px;
}

.gap-x-89 {
  -moz-column-gap: 89px;
       column-gap: 89px;
}

.gap-x-90 {
  -moz-column-gap: 90px;
       column-gap: 90px;
}

.gap-x-91 {
  -moz-column-gap: 91px;
       column-gap: 91px;
}

.gap-x-92 {
  -moz-column-gap: 92px;
       column-gap: 92px;
}

.gap-x-93 {
  -moz-column-gap: 93px;
       column-gap: 93px;
}

.gap-x-94 {
  -moz-column-gap: 94px;
       column-gap: 94px;
}

.gap-x-95 {
  -moz-column-gap: 95px;
       column-gap: 95px;
}

.gap-x-96 {
  -moz-column-gap: 96px;
       column-gap: 96px;
}

.gap-x-97 {
  -moz-column-gap: 97px;
       column-gap: 97px;
}

.gap-x-98 {
  -moz-column-gap: 98px;
       column-gap: 98px;
}

.gap-x-99 {
  -moz-column-gap: 99px;
       column-gap: 99px;
}

.gap-x-100 {
  -moz-column-gap: 100px;
       column-gap: 100px;
}

.gap-y-1 {
  row-gap: 1px;
}

.gap-y-2 {
  row-gap: 2px;
}

.gap-y-3 {
  row-gap: 3px;
}

.gap-y-4 {
  row-gap: 4px;
}

.gap-y-5 {
  row-gap: 5px;
}

.gap-y-6 {
  row-gap: 6px;
}

.gap-y-7 {
  row-gap: 7px;
}

.gap-y-8 {
  row-gap: 8px;
}

.gap-y-9 {
  row-gap: 9px;
}

.gap-y-10 {
  row-gap: 10px;
}

.gap-y-11 {
  row-gap: 11px;
}

.gap-y-12 {
  row-gap: 12px;
}

.gap-y-13 {
  row-gap: 13px;
}

.gap-y-14 {
  row-gap: 14px;
}

.gap-y-15 {
  row-gap: 15px;
}

.gap-y-16 {
  row-gap: 16px;
}

.gap-y-17 {
  row-gap: 17px;
}

.gap-y-18 {
  row-gap: 18px;
}

.gap-y-19 {
  row-gap: 19px;
}

.gap-y-20 {
  row-gap: 20px;
}

.gap-y-21 {
  row-gap: 21px;
}

.gap-y-22 {
  row-gap: 22px;
}

.gap-y-23 {
  row-gap: 23px;
}

.gap-y-24 {
  row-gap: 24px;
}

.gap-y-25 {
  row-gap: 25px;
}

.gap-y-26 {
  row-gap: 26px;
}

.gap-y-27 {
  row-gap: 27px;
}

.gap-y-28 {
  row-gap: 28px;
}

.gap-y-29 {
  row-gap: 29px;
}

.gap-y-30 {
  row-gap: 30px;
}

.gap-y-31 {
  row-gap: 31px;
}

.gap-y-32 {
  row-gap: 32px;
}

.gap-y-33 {
  row-gap: 33px;
}

.gap-y-34 {
  row-gap: 34px;
}

.gap-y-35 {
  row-gap: 35px;
}

.gap-y-36 {
  row-gap: 36px;
}

.gap-y-37 {
  row-gap: 37px;
}

.gap-y-38 {
  row-gap: 38px;
}

.gap-y-39 {
  row-gap: 39px;
}

.gap-y-40 {
  row-gap: 40px;
}

.gap-y-41 {
  row-gap: 41px;
}

.gap-y-42 {
  row-gap: 42px;
}

.gap-y-43 {
  row-gap: 43px;
}

.gap-y-44 {
  row-gap: 44px;
}

.gap-y-45 {
  row-gap: 45px;
}

.gap-y-46 {
  row-gap: 46px;
}

.gap-y-47 {
  row-gap: 47px;
}

.gap-y-48 {
  row-gap: 48px;
}

.gap-y-49 {
  row-gap: 49px;
}

.gap-y-50 {
  row-gap: 50px;
}

.gap-y-51 {
  row-gap: 51px;
}

.gap-y-52 {
  row-gap: 52px;
}

.gap-y-53 {
  row-gap: 53px;
}

.gap-y-54 {
  row-gap: 54px;
}

.gap-y-55 {
  row-gap: 55px;
}

.gap-y-56 {
  row-gap: 56px;
}

.gap-y-57 {
  row-gap: 57px;
}

.gap-y-58 {
  row-gap: 58px;
}

.gap-y-59 {
  row-gap: 59px;
}

.gap-y-60 {
  row-gap: 60px;
}

.gap-y-61 {
  row-gap: 61px;
}

.gap-y-62 {
  row-gap: 62px;
}

.gap-y-63 {
  row-gap: 63px;
}

.gap-y-64 {
  row-gap: 64px;
}

.gap-y-65 {
  row-gap: 65px;
}

.gap-y-66 {
  row-gap: 66px;
}

.gap-y-67 {
  row-gap: 67px;
}

.gap-y-68 {
  row-gap: 68px;
}

.gap-y-69 {
  row-gap: 69px;
}

.gap-y-70 {
  row-gap: 70px;
}

.gap-y-71 {
  row-gap: 71px;
}

.gap-y-72 {
  row-gap: 72px;
}

.gap-y-73 {
  row-gap: 73px;
}

.gap-y-74 {
  row-gap: 74px;
}

.gap-y-75 {
  row-gap: 75px;
}

.gap-y-76 {
  row-gap: 76px;
}

.gap-y-77 {
  row-gap: 77px;
}

.gap-y-78 {
  row-gap: 78px;
}

.gap-y-79 {
  row-gap: 79px;
}

.gap-y-80 {
  row-gap: 80px;
}

.gap-y-81 {
  row-gap: 81px;
}

.gap-y-82 {
  row-gap: 82px;
}

.gap-y-83 {
  row-gap: 83px;
}

.gap-y-84 {
  row-gap: 84px;
}

.gap-y-85 {
  row-gap: 85px;
}

.gap-y-86 {
  row-gap: 86px;
}

.gap-y-87 {
  row-gap: 87px;
}

.gap-y-88 {
  row-gap: 88px;
}

.gap-y-89 {
  row-gap: 89px;
}

.gap-y-90 {
  row-gap: 90px;
}

.gap-y-91 {
  row-gap: 91px;
}

.gap-y-92 {
  row-gap: 92px;
}

.gap-y-93 {
  row-gap: 93px;
}

.gap-y-94 {
  row-gap: 94px;
}

.gap-y-95 {
  row-gap: 95px;
}

.gap-y-96 {
  row-gap: 96px;
}

.gap-y-97 {
  row-gap: 97px;
}

.gap-y-98 {
  row-gap: 98px;
}

.gap-y-99 {
  row-gap: 99px;
}

.gap-y-100 {
  row-gap: 100px;
}

.opc-1 {
  opacity: 0.1;
}

.opc-2 {
  opacity: 0.2;
}

.opc-3 {
  opacity: 0.3;
}

.opc-4 {
  opacity: 0.4;
}

.opc-5 {
  opacity: 0.5;
}

.opc-6 {
  opacity: 0.6;
}

.opc-7 {
  opacity: 0.7;
}

.opc-8 {
  opacity: 0.8;
}

.opc-9 {
  opacity: 0.9;
}

.opc-10 {
  opacity: 1;
}

.wd-15px {
  width: 15px;
}

.ht-15px {
  height: 15px;
}

.wd-25px {
  width: 25px;
}

.ht-25px {
  height: 25px;
}

.wd-35px {
  width: 35px;
}

.ht-35px {
  height: 35px;
}

.wd-45px {
  width: 45px;
}

.ht-45px {
  height: 45px;
}

.ht100 {
  height: 100%;
}

/* ------------------------------ 
 * margin, padding 
 --------------------------------*/
/**
  px값 List를 만들어주는 함수입니다.
*/
/**
값이 0일때는 0으로, 그 외에는 'px'을 붙여줍니다.
ex) 0 => 0, 10 => 10px
*/
.m-0 {
  margin: 0;
}

.ml-0 {
  margin-left: 0;
}

.mr-0 {
  margin-right: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.m-1 {
  margin: 1px;
}

.ml-1 {
  margin-left: 1px;
}

.mr-1 {
  margin-right: 1px;
}

.mt-1 {
  margin-top: 1px;
}

.mb-1 {
  margin-bottom: 1px;
}

.mx-1 {
  margin-left: 1px;
  margin-right: 1px;
}

.my-1 {
  margin-top: 1px;
  margin-bottom: 1px;
}

.m-2 {
  margin: 2px;
}

.ml-2 {
  margin-left: 2px;
}

.mr-2 {
  margin-right: 2px;
}

.mt-2 {
  margin-top: 2px;
}

.mb-2 {
  margin-bottom: 2px;
}

.mx-2 {
  margin-left: 2px;
  margin-right: 2px;
}

.my-2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.m-3 {
  margin: 3px;
}

.ml-3 {
  margin-left: 3px;
}

.mr-3 {
  margin-right: 3px;
}

.mt-3 {
  margin-top: 3px;
}

.mb-3 {
  margin-bottom: 3px;
}

.mx-3 {
  margin-left: 3px;
  margin-right: 3px;
}

.my-3 {
  margin-top: 3px;
  margin-bottom: 3px;
}

.m-4 {
  margin: 4px;
}

.ml-4 {
  margin-left: 4px;
}

.mr-4 {
  margin-right: 4px;
}

.mt-4 {
  margin-top: 4px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}

.my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.m-5 {
  margin: 5px;
}

.ml-5 {
  margin-left: 5px;
}

.mr-5 {
  margin-right: 5px;
}

.mt-5 {
  margin-top: 5px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}

.my-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.m-6 {
  margin: 6px;
}

.ml-6 {
  margin-left: 6px;
}

.mr-6 {
  margin-right: 6px;
}

.mt-6 {
  margin-top: 6px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mx-6 {
  margin-left: 6px;
  margin-right: 6px;
}

.my-6 {
  margin-top: 6px;
  margin-bottom: 6px;
}

.m-7 {
  margin: 7px;
}

.ml-7 {
  margin-left: 7px;
}

.mr-7 {
  margin-right: 7px;
}

.mt-7 {
  margin-top: 7px;
}

.mb-7 {
  margin-bottom: 7px;
}

.mx-7 {
  margin-left: 7px;
  margin-right: 7px;
}

.my-7 {
  margin-top: 7px;
  margin-bottom: 7px;
}

.m-8 {
  margin: 8px;
}

.ml-8 {
  margin-left: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.mt-8 {
  margin-top: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}

.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.m-9 {
  margin: 9px;
}

.ml-9 {
  margin-left: 9px;
}

.mr-9 {
  margin-right: 9px;
}

.mt-9 {
  margin-top: 9px;
}

.mb-9 {
  margin-bottom: 9px;
}

.mx-9 {
  margin-left: 9px;
  margin-right: 9px;
}

.my-9 {
  margin-top: 9px;
  margin-bottom: 9px;
}

.m-10 {
  margin: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.m-11 {
  margin: 11px;
}

.ml-11 {
  margin-left: 11px;
}

.mr-11 {
  margin-right: 11px;
}

.mt-11 {
  margin-top: 11px;
}

.mb-11 {
  margin-bottom: 11px;
}

.mx-11 {
  margin-left: 11px;
  margin-right: 11px;
}

.my-11 {
  margin-top: 11px;
  margin-bottom: 11px;
}

.m-12 {
  margin: 12px;
}

.ml-12 {
  margin-left: 12px;
}

.mr-12 {
  margin-right: 12px;
}

.mt-12 {
  margin-top: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}

.my-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.m-13 {
  margin: 13px;
}

.ml-13 {
  margin-left: 13px;
}

.mr-13 {
  margin-right: 13px;
}

.mt-13 {
  margin-top: 13px;
}

.mb-13 {
  margin-bottom: 13px;
}

.mx-13 {
  margin-left: 13px;
  margin-right: 13px;
}

.my-13 {
  margin-top: 13px;
  margin-bottom: 13px;
}

.m-14 {
  margin: 14px;
}

.ml-14 {
  margin-left: 14px;
}

.mr-14 {
  margin-right: 14px;
}

.mt-14 {
  margin-top: 14px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mx-14 {
  margin-left: 14px;
  margin-right: 14px;
}

.my-14 {
  margin-top: 14px;
  margin-bottom: 14px;
}

.m-15 {
  margin: 15px;
}

.ml-15 {
  margin-left: 15px;
}

.mr-15 {
  margin-right: 15px;
}

.mt-15 {
  margin-top: 15px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mx-15 {
  margin-left: 15px;
  margin-right: 15px;
}

.my-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.m-16 {
  margin: 16px;
}

.ml-16 {
  margin-left: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}

.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.m-17 {
  margin: 17px;
}

.ml-17 {
  margin-left: 17px;
}

.mr-17 {
  margin-right: 17px;
}

.mt-17 {
  margin-top: 17px;
}

.mb-17 {
  margin-bottom: 17px;
}

.mx-17 {
  margin-left: 17px;
  margin-right: 17px;
}

.my-17 {
  margin-top: 17px;
  margin-bottom: 17px;
}

.m-18 {
  margin: 18px;
}

.ml-18 {
  margin-left: 18px;
}

.mr-18 {
  margin-right: 18px;
}

.mt-18 {
  margin-top: 18px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mx-18 {
  margin-left: 18px;
  margin-right: 18px;
}

.my-18 {
  margin-top: 18px;
  margin-bottom: 18px;
}

.m-19 {
  margin: 19px;
}

.ml-19 {
  margin-left: 19px;
}

.mr-19 {
  margin-right: 19px;
}

.mt-19 {
  margin-top: 19px;
}

.mb-19 {
  margin-bottom: 19px;
}

.mx-19 {
  margin-left: 19px;
  margin-right: 19px;
}

.my-19 {
  margin-top: 19px;
  margin-bottom: 19px;
}

.m-20 {
  margin: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mx-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.m-21 {
  margin: 21px;
}

.ml-21 {
  margin-left: 21px;
}

.mr-21 {
  margin-right: 21px;
}

.mt-21 {
  margin-top: 21px;
}

.mb-21 {
  margin-bottom: 21px;
}

.mx-21 {
  margin-left: 21px;
  margin-right: 21px;
}

.my-21 {
  margin-top: 21px;
  margin-bottom: 21px;
}

.m-22 {
  margin: 22px;
}

.ml-22 {
  margin-left: 22px;
}

.mr-22 {
  margin-right: 22px;
}

.mt-22 {
  margin-top: 22px;
}

.mb-22 {
  margin-bottom: 22px;
}

.mx-22 {
  margin-left: 22px;
  margin-right: 22px;
}

.my-22 {
  margin-top: 22px;
  margin-bottom: 22px;
}

.m-23 {
  margin: 23px;
}

.ml-23 {
  margin-left: 23px;
}

.mr-23 {
  margin-right: 23px;
}

.mt-23 {
  margin-top: 23px;
}

.mb-23 {
  margin-bottom: 23px;
}

.mx-23 {
  margin-left: 23px;
  margin-right: 23px;
}

.my-23 {
  margin-top: 23px;
  margin-bottom: 23px;
}

.m-24 {
  margin: 24px;
}

.ml-24 {
  margin-left: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.mt-24 {
  margin-top: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mx-24 {
  margin-left: 24px;
  margin-right: 24px;
}

.my-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.m-25 {
  margin: 25px;
}

.ml-25 {
  margin-left: 25px;
}

.mr-25 {
  margin-right: 25px;
}

.mt-25 {
  margin-top: 25px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mx-25 {
  margin-left: 25px;
  margin-right: 25px;
}

.my-25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.m-26 {
  margin: 26px;
}

.ml-26 {
  margin-left: 26px;
}

.mr-26 {
  margin-right: 26px;
}

.mt-26 {
  margin-top: 26px;
}

.mb-26 {
  margin-bottom: 26px;
}

.mx-26 {
  margin-left: 26px;
  margin-right: 26px;
}

.my-26 {
  margin-top: 26px;
  margin-bottom: 26px;
}

.m-27 {
  margin: 27px;
}

.ml-27 {
  margin-left: 27px;
}

.mr-27 {
  margin-right: 27px;
}

.mt-27 {
  margin-top: 27px;
}

.mb-27 {
  margin-bottom: 27px;
}

.mx-27 {
  margin-left: 27px;
  margin-right: 27px;
}

.my-27 {
  margin-top: 27px;
  margin-bottom: 27px;
}

.m-28 {
  margin: 28px;
}

.ml-28 {
  margin-left: 28px;
}

.mr-28 {
  margin-right: 28px;
}

.mt-28 {
  margin-top: 28px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mx-28 {
  margin-left: 28px;
  margin-right: 28px;
}

.my-28 {
  margin-top: 28px;
  margin-bottom: 28px;
}

.m-29 {
  margin: 29px;
}

.ml-29 {
  margin-left: 29px;
}

.mr-29 {
  margin-right: 29px;
}

.mt-29 {
  margin-top: 29px;
}

.mb-29 {
  margin-bottom: 29px;
}

.mx-29 {
  margin-left: 29px;
  margin-right: 29px;
}

.my-29 {
  margin-top: 29px;
  margin-bottom: 29px;
}

.m-30 {
  margin: 30px;
}

.ml-30 {
  margin-left: 30px;
}

.mr-30 {
  margin-right: 30px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mx-30 {
  margin-left: 30px;
  margin-right: 30px;
}

.my-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.m-31 {
  margin: 31px;
}

.ml-31 {
  margin-left: 31px;
}

.mr-31 {
  margin-right: 31px;
}

.mt-31 {
  margin-top: 31px;
}

.mb-31 {
  margin-bottom: 31px;
}

.mx-31 {
  margin-left: 31px;
  margin-right: 31px;
}

.my-31 {
  margin-top: 31px;
  margin-bottom: 31px;
}

.m-32 {
  margin: 32px;
}

.ml-32 {
  margin-left: 32px;
}

.mr-32 {
  margin-right: 32px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mx-32 {
  margin-left: 32px;
  margin-right: 32px;
}

.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.m-33 {
  margin: 33px;
}

.ml-33 {
  margin-left: 33px;
}

.mr-33 {
  margin-right: 33px;
}

.mt-33 {
  margin-top: 33px;
}

.mb-33 {
  margin-bottom: 33px;
}

.mx-33 {
  margin-left: 33px;
  margin-right: 33px;
}

.my-33 {
  margin-top: 33px;
  margin-bottom: 33px;
}

.m-34 {
  margin: 34px;
}

.ml-34 {
  margin-left: 34px;
}

.mr-34 {
  margin-right: 34px;
}

.mt-34 {
  margin-top: 34px;
}

.mb-34 {
  margin-bottom: 34px;
}

.mx-34 {
  margin-left: 34px;
  margin-right: 34px;
}

.my-34 {
  margin-top: 34px;
  margin-bottom: 34px;
}

.m-35 {
  margin: 35px;
}

.ml-35 {
  margin-left: 35px;
}

.mr-35 {
  margin-right: 35px;
}

.mt-35 {
  margin-top: 35px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mx-35 {
  margin-left: 35px;
  margin-right: 35px;
}

.my-35 {
  margin-top: 35px;
  margin-bottom: 35px;
}

.m-36 {
  margin: 36px;
}

.ml-36 {
  margin-left: 36px;
}

.mr-36 {
  margin-right: 36px;
}

.mt-36 {
  margin-top: 36px;
}

.mb-36 {
  margin-bottom: 36px;
}

.mx-36 {
  margin-left: 36px;
  margin-right: 36px;
}

.my-36 {
  margin-top: 36px;
  margin-bottom: 36px;
}

.m-37 {
  margin: 37px;
}

.ml-37 {
  margin-left: 37px;
}

.mr-37 {
  margin-right: 37px;
}

.mt-37 {
  margin-top: 37px;
}

.mb-37 {
  margin-bottom: 37px;
}

.mx-37 {
  margin-left: 37px;
  margin-right: 37px;
}

.my-37 {
  margin-top: 37px;
  margin-bottom: 37px;
}

.m-38 {
  margin: 38px;
}

.ml-38 {
  margin-left: 38px;
}

.mr-38 {
  margin-right: 38px;
}

.mt-38 {
  margin-top: 38px;
}

.mb-38 {
  margin-bottom: 38px;
}

.mx-38 {
  margin-left: 38px;
  margin-right: 38px;
}

.my-38 {
  margin-top: 38px;
  margin-bottom: 38px;
}

.m-39 {
  margin: 39px;
}

.ml-39 {
  margin-left: 39px;
}

.mr-39 {
  margin-right: 39px;
}

.mt-39 {
  margin-top: 39px;
}

.mb-39 {
  margin-bottom: 39px;
}

.mx-39 {
  margin-left: 39px;
  margin-right: 39px;
}

.my-39 {
  margin-top: 39px;
  margin-bottom: 39px;
}

.m-40 {
  margin: 40px;
}

.ml-40 {
  margin-left: 40px;
}

.mr-40 {
  margin-right: 40px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mx-40 {
  margin-left: 40px;
  margin-right: 40px;
}

.my-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.m-41 {
  margin: 41px;
}

.ml-41 {
  margin-left: 41px;
}

.mr-41 {
  margin-right: 41px;
}

.mt-41 {
  margin-top: 41px;
}

.mb-41 {
  margin-bottom: 41px;
}

.mx-41 {
  margin-left: 41px;
  margin-right: 41px;
}

.my-41 {
  margin-top: 41px;
  margin-bottom: 41px;
}

.m-42 {
  margin: 42px;
}

.ml-42 {
  margin-left: 42px;
}

.mr-42 {
  margin-right: 42px;
}

.mt-42 {
  margin-top: 42px;
}

.mb-42 {
  margin-bottom: 42px;
}

.mx-42 {
  margin-left: 42px;
  margin-right: 42px;
}

.my-42 {
  margin-top: 42px;
  margin-bottom: 42px;
}

.m-43 {
  margin: 43px;
}

.ml-43 {
  margin-left: 43px;
}

.mr-43 {
  margin-right: 43px;
}

.mt-43 {
  margin-top: 43px;
}

.mb-43 {
  margin-bottom: 43px;
}

.mx-43 {
  margin-left: 43px;
  margin-right: 43px;
}

.my-43 {
  margin-top: 43px;
  margin-bottom: 43px;
}

.m-44 {
  margin: 44px;
}

.ml-44 {
  margin-left: 44px;
}

.mr-44 {
  margin-right: 44px;
}

.mt-44 {
  margin-top: 44px;
}

.mb-44 {
  margin-bottom: 44px;
}

.mx-44 {
  margin-left: 44px;
  margin-right: 44px;
}

.my-44 {
  margin-top: 44px;
  margin-bottom: 44px;
}

.m-45 {
  margin: 45px;
}

.ml-45 {
  margin-left: 45px;
}

.mr-45 {
  margin-right: 45px;
}

.mt-45 {
  margin-top: 45px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mx-45 {
  margin-left: 45px;
  margin-right: 45px;
}

.my-45 {
  margin-top: 45px;
  margin-bottom: 45px;
}

.m-46 {
  margin: 46px;
}

.ml-46 {
  margin-left: 46px;
}

.mr-46 {
  margin-right: 46px;
}

.mt-46 {
  margin-top: 46px;
}

.mb-46 {
  margin-bottom: 46px;
}

.mx-46 {
  margin-left: 46px;
  margin-right: 46px;
}

.my-46 {
  margin-top: 46px;
  margin-bottom: 46px;
}

.m-47 {
  margin: 47px;
}

.ml-47 {
  margin-left: 47px;
}

.mr-47 {
  margin-right: 47px;
}

.mt-47 {
  margin-top: 47px;
}

.mb-47 {
  margin-bottom: 47px;
}

.mx-47 {
  margin-left: 47px;
  margin-right: 47px;
}

.my-47 {
  margin-top: 47px;
  margin-bottom: 47px;
}

.m-48 {
  margin: 48px;
}

.ml-48 {
  margin-left: 48px;
}

.mr-48 {
  margin-right: 48px;
}

.mt-48 {
  margin-top: 48px;
}

.mb-48 {
  margin-bottom: 48px;
}

.mx-48 {
  margin-left: 48px;
  margin-right: 48px;
}

.my-48 {
  margin-top: 48px;
  margin-bottom: 48px;
}

.m-49 {
  margin: 49px;
}

.ml-49 {
  margin-left: 49px;
}

.mr-49 {
  margin-right: 49px;
}

.mt-49 {
  margin-top: 49px;
}

.mb-49 {
  margin-bottom: 49px;
}

.mx-49 {
  margin-left: 49px;
  margin-right: 49px;
}

.my-49 {
  margin-top: 49px;
  margin-bottom: 49px;
}

.m-50 {
  margin: 50px;
}

.ml-50 {
  margin-left: 50px;
}

.mr-50 {
  margin-right: 50px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mx-50 {
  margin-left: 50px;
  margin-right: 50px;
}

.my-50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.m-51 {
  margin: 51px;
}

.ml-51 {
  margin-left: 51px;
}

.mr-51 {
  margin-right: 51px;
}

.mt-51 {
  margin-top: 51px;
}

.mb-51 {
  margin-bottom: 51px;
}

.mx-51 {
  margin-left: 51px;
  margin-right: 51px;
}

.my-51 {
  margin-top: 51px;
  margin-bottom: 51px;
}

.m-52 {
  margin: 52px;
}

.ml-52 {
  margin-left: 52px;
}

.mr-52 {
  margin-right: 52px;
}

.mt-52 {
  margin-top: 52px;
}

.mb-52 {
  margin-bottom: 52px;
}

.mx-52 {
  margin-left: 52px;
  margin-right: 52px;
}

.my-52 {
  margin-top: 52px;
  margin-bottom: 52px;
}

.m-53 {
  margin: 53px;
}

.ml-53 {
  margin-left: 53px;
}

.mr-53 {
  margin-right: 53px;
}

.mt-53 {
  margin-top: 53px;
}

.mb-53 {
  margin-bottom: 53px;
}

.mx-53 {
  margin-left: 53px;
  margin-right: 53px;
}

.my-53 {
  margin-top: 53px;
  margin-bottom: 53px;
}

.m-54 {
  margin: 54px;
}

.ml-54 {
  margin-left: 54px;
}

.mr-54 {
  margin-right: 54px;
}

.mt-54 {
  margin-top: 54px;
}

.mb-54 {
  margin-bottom: 54px;
}

.mx-54 {
  margin-left: 54px;
  margin-right: 54px;
}

.my-54 {
  margin-top: 54px;
  margin-bottom: 54px;
}

.m-55 {
  margin: 55px;
}

.ml-55 {
  margin-left: 55px;
}

.mr-55 {
  margin-right: 55px;
}

.mt-55 {
  margin-top: 55px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mx-55 {
  margin-left: 55px;
  margin-right: 55px;
}

.my-55 {
  margin-top: 55px;
  margin-bottom: 55px;
}

.m-56 {
  margin: 56px;
}

.ml-56 {
  margin-left: 56px;
}

.mr-56 {
  margin-right: 56px;
}

.mt-56 {
  margin-top: 56px;
}

.mb-56 {
  margin-bottom: 56px;
}

.mx-56 {
  margin-left: 56px;
  margin-right: 56px;
}

.my-56 {
  margin-top: 56px;
  margin-bottom: 56px;
}

.m-57 {
  margin: 57px;
}

.ml-57 {
  margin-left: 57px;
}

.mr-57 {
  margin-right: 57px;
}

.mt-57 {
  margin-top: 57px;
}

.mb-57 {
  margin-bottom: 57px;
}

.mx-57 {
  margin-left: 57px;
  margin-right: 57px;
}

.my-57 {
  margin-top: 57px;
  margin-bottom: 57px;
}

.m-58 {
  margin: 58px;
}

.ml-58 {
  margin-left: 58px;
}

.mr-58 {
  margin-right: 58px;
}

.mt-58 {
  margin-top: 58px;
}

.mb-58 {
  margin-bottom: 58px;
}

.mx-58 {
  margin-left: 58px;
  margin-right: 58px;
}

.my-58 {
  margin-top: 58px;
  margin-bottom: 58px;
}

.m-59 {
  margin: 59px;
}

.ml-59 {
  margin-left: 59px;
}

.mr-59 {
  margin-right: 59px;
}

.mt-59 {
  margin-top: 59px;
}

.mb-59 {
  margin-bottom: 59px;
}

.mx-59 {
  margin-left: 59px;
  margin-right: 59px;
}

.my-59 {
  margin-top: 59px;
  margin-bottom: 59px;
}

.m-60 {
  margin: 60px;
}

.ml-60 {
  margin-left: 60px;
}

.mr-60 {
  margin-right: 60px;
}

.mt-60 {
  margin-top: 60px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mx-60 {
  margin-left: 60px;
  margin-right: 60px;
}

.my-60 {
  margin-top: 60px;
  margin-bottom: 60px;
}

.p-0 {
  padding: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.pt-0 {
  padding-top: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.p-1 {
  padding: 1px;
}

.pl-1 {
  padding-left: 1px;
}

.pr-1 {
  padding-right: 1px;
}

.pt-1 {
  padding-top: 1px;
}

.pb-1 {
  padding-bottom: 1px;
}

.px-1 {
  padding-left: 1px;
  padding-right: 1px;
}

.py-1 {
  padding-top: 1px;
  padding-bottom: 1px;
}

.p-2 {
  padding: 2px;
}

.pl-2 {
  padding-left: 2px;
}

.pr-2 {
  padding-right: 2px;
}

.pt-2 {
  padding-top: 2px;
}

.pb-2 {
  padding-bottom: 2px;
}

.px-2 {
  padding-left: 2px;
  padding-right: 2px;
}

.py-2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.p-3 {
  padding: 3px;
}

.pl-3 {
  padding-left: 3px;
}

.pr-3 {
  padding-right: 3px;
}

.pt-3 {
  padding-top: 3px;
}

.pb-3 {
  padding-bottom: 3px;
}

.px-3 {
  padding-left: 3px;
  padding-right: 3px;
}

.py-3 {
  padding-top: 3px;
  padding-bottom: 3px;
}

.p-4 {
  padding: 4px;
}

.pl-4 {
  padding-left: 4px;
}

.pr-4 {
  padding-right: 4px;
}

.pt-4 {
  padding-top: 4px;
}

.pb-4 {
  padding-bottom: 4px;
}

.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}

.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.p-5 {
  padding: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.pr-5 {
  padding-right: 5px;
}

.pt-5 {
  padding-top: 5px;
}

.pb-5 {
  padding-bottom: 5px;
}

.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}

.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.p-6 {
  padding: 6px;
}

.pl-6 {
  padding-left: 6px;
}

.pr-6 {
  padding-right: 6px;
}

.pt-6 {
  padding-top: 6px;
}

.pb-6 {
  padding-bottom: 6px;
}

.px-6 {
  padding-left: 6px;
  padding-right: 6px;
}

.py-6 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.p-7 {
  padding: 7px;
}

.pl-7 {
  padding-left: 7px;
}

.pr-7 {
  padding-right: 7px;
}

.pt-7 {
  padding-top: 7px;
}

.pb-7 {
  padding-bottom: 7px;
}

.px-7 {
  padding-left: 7px;
  padding-right: 7px;
}

.py-7 {
  padding-top: 7px;
  padding-bottom: 7px;
}

.p-8 {
  padding: 8px;
}

.pl-8 {
  padding-left: 8px;
}

.pr-8 {
  padding-right: 8px;
}

.pt-8 {
  padding-top: 8px;
}

.pb-8 {
  padding-bottom: 8px;
}

.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.p-9 {
  padding: 9px;
}

.pl-9 {
  padding-left: 9px;
}

.pr-9 {
  padding-right: 9px;
}

.pt-9 {
  padding-top: 9px;
}

.pb-9 {
  padding-bottom: 9px;
}

.px-9 {
  padding-left: 9px;
  padding-right: 9px;
}

.py-9 {
  padding-top: 9px;
  padding-bottom: 9px;
}

.p-10 {
  padding: 10px;
}

.pl-10 {
  padding-left: 10px;
}

.pr-10 {
  padding-right: 10px;
}

.pt-10 {
  padding-top: 10px;
}

.pb-10 {
  padding-bottom: 10px;
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.p-11 {
  padding: 11px;
}

.pl-11 {
  padding-left: 11px;
}

.pr-11 {
  padding-right: 11px;
}

.pt-11 {
  padding-top: 11px;
}

.pb-11 {
  padding-bottom: 11px;
}

.px-11 {
  padding-left: 11px;
  padding-right: 11px;
}

.py-11 {
  padding-top: 11px;
  padding-bottom: 11px;
}

.p-12 {
  padding: 12px;
}

.pl-12 {
  padding-left: 12px;
}

.pr-12 {
  padding-right: 12px;
}

.pt-12 {
  padding-top: 12px;
}

.pb-12 {
  padding-bottom: 12px;
}

.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.p-13 {
  padding: 13px;
}

.pl-13 {
  padding-left: 13px;
}

.pr-13 {
  padding-right: 13px;
}

.pt-13 {
  padding-top: 13px;
}

.pb-13 {
  padding-bottom: 13px;
}

.px-13 {
  padding-left: 13px;
  padding-right: 13px;
}

.py-13 {
  padding-top: 13px;
  padding-bottom: 13px;
}

.p-14 {
  padding: 14px;
}

.pl-14 {
  padding-left: 14px;
}

.pr-14 {
  padding-right: 14px;
}

.pt-14 {
  padding-top: 14px;
}

.pb-14 {
  padding-bottom: 14px;
}

.px-14 {
  padding-left: 14px;
  padding-right: 14px;
}

.py-14 {
  padding-top: 14px;
  padding-bottom: 14px;
}

.p-15 {
  padding: 15px;
}

.pl-15 {
  padding-left: 15px;
}

.pr-15 {
  padding-right: 15px;
}

.pt-15 {
  padding-top: 15px;
}

.pb-15 {
  padding-bottom: 15px;
}

.px-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.py-15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.p-16 {
  padding: 16px;
}

.pl-16 {
  padding-left: 16px;
}

.pr-16 {
  padding-right: 16px;
}

.pt-16 {
  padding-top: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.p-17 {
  padding: 17px;
}

.pl-17 {
  padding-left: 17px;
}

.pr-17 {
  padding-right: 17px;
}

.pt-17 {
  padding-top: 17px;
}

.pb-17 {
  padding-bottom: 17px;
}

.px-17 {
  padding-left: 17px;
  padding-right: 17px;
}

.py-17 {
  padding-top: 17px;
  padding-bottom: 17px;
}

.p-18 {
  padding: 18px;
}

.pl-18 {
  padding-left: 18px;
}

.pr-18 {
  padding-right: 18px;
}

.pt-18 {
  padding-top: 18px;
}

.pb-18 {
  padding-bottom: 18px;
}

.px-18 {
  padding-left: 18px;
  padding-right: 18px;
}

.py-18 {
  padding-top: 18px;
  padding-bottom: 18px;
}

.p-19 {
  padding: 19px;
}

.pl-19 {
  padding-left: 19px;
}

.pr-19 {
  padding-right: 19px;
}

.pt-19 {
  padding-top: 19px;
}

.pb-19 {
  padding-bottom: 19px;
}

.px-19 {
  padding-left: 19px;
  padding-right: 19px;
}

.py-19 {
  padding-top: 19px;
  padding-bottom: 19px;
}

.p-20 {
  padding: 20px;
}

.pl-20 {
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

.pt-20 {
  padding-top: 20px;
}

.pb-20 {
  padding-bottom: 20px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.p-21 {
  padding: 21px;
}

.pl-21 {
  padding-left: 21px;
}

.pr-21 {
  padding-right: 21px;
}

.pt-21 {
  padding-top: 21px;
}

.pb-21 {
  padding-bottom: 21px;
}

.px-21 {
  padding-left: 21px;
  padding-right: 21px;
}

.py-21 {
  padding-top: 21px;
  padding-bottom: 21px;
}

.p-22 {
  padding: 22px;
}

.pl-22 {
  padding-left: 22px;
}

.pr-22 {
  padding-right: 22px;
}

.pt-22 {
  padding-top: 22px;
}

.pb-22 {
  padding-bottom: 22px;
}

.px-22 {
  padding-left: 22px;
  padding-right: 22px;
}

.py-22 {
  padding-top: 22px;
  padding-bottom: 22px;
}

.p-23 {
  padding: 23px;
}

.pl-23 {
  padding-left: 23px;
}

.pr-23 {
  padding-right: 23px;
}

.pt-23 {
  padding-top: 23px;
}

.pb-23 {
  padding-bottom: 23px;
}

.px-23 {
  padding-left: 23px;
  padding-right: 23px;
}

.py-23 {
  padding-top: 23px;
  padding-bottom: 23px;
}

.p-24 {
  padding: 24px;
}

.pl-24 {
  padding-left: 24px;
}

.pr-24 {
  padding-right: 24px;
}

.pt-24 {
  padding-top: 24px;
}

.pb-24 {
  padding-bottom: 24px;
}

.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.p-25 {
  padding: 25px;
}

.pl-25 {
  padding-left: 25px;
}

.pr-25 {
  padding-right: 25px;
}

.pt-25 {
  padding-top: 25px;
}

.pb-25 {
  padding-bottom: 25px;
}

.px-25 {
  padding-left: 25px;
  padding-right: 25px;
}

.py-25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.p-26 {
  padding: 26px;
}

.pl-26 {
  padding-left: 26px;
}

.pr-26 {
  padding-right: 26px;
}

.pt-26 {
  padding-top: 26px;
}

.pb-26 {
  padding-bottom: 26px;
}

.px-26 {
  padding-left: 26px;
  padding-right: 26px;
}

.py-26 {
  padding-top: 26px;
  padding-bottom: 26px;
}

.p-27 {
  padding: 27px;
}

.pl-27 {
  padding-left: 27px;
}

.pr-27 {
  padding-right: 27px;
}

.pt-27 {
  padding-top: 27px;
}

.pb-27 {
  padding-bottom: 27px;
}

.px-27 {
  padding-left: 27px;
  padding-right: 27px;
}

.py-27 {
  padding-top: 27px;
  padding-bottom: 27px;
}

.p-28 {
  padding: 28px;
}

.pl-28 {
  padding-left: 28px;
}

.pr-28 {
  padding-right: 28px;
}

.pt-28 {
  padding-top: 28px;
}

.pb-28 {
  padding-bottom: 28px;
}

.px-28 {
  padding-left: 28px;
  padding-right: 28px;
}

.py-28 {
  padding-top: 28px;
  padding-bottom: 28px;
}

.p-29 {
  padding: 29px;
}

.pl-29 {
  padding-left: 29px;
}

.pr-29 {
  padding-right: 29px;
}

.pt-29 {
  padding-top: 29px;
}

.pb-29 {
  padding-bottom: 29px;
}

.px-29 {
  padding-left: 29px;
  padding-right: 29px;
}

.py-29 {
  padding-top: 29px;
  padding-bottom: 29px;
}

.p-30 {
  padding: 30px;
}

.pl-30 {
  padding-left: 30px;
}

.pr-30 {
  padding-right: 30px;
}

.pt-30 {
  padding-top: 30px;
}

.pb-30 {
  padding-bottom: 30px;
}

.px-30 {
  padding-left: 30px;
  padding-right: 30px;
}

.py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.p-31 {
  padding: 31px;
}

.pl-31 {
  padding-left: 31px;
}

.pr-31 {
  padding-right: 31px;
}

.pt-31 {
  padding-top: 31px;
}

.pb-31 {
  padding-bottom: 31px;
}

.px-31 {
  padding-left: 31px;
  padding-right: 31px;
}

.py-31 {
  padding-top: 31px;
  padding-bottom: 31px;
}

.p-32 {
  padding: 32px;
}

.pl-32 {
  padding-left: 32px;
}

.pr-32 {
  padding-right: 32px;
}

.pt-32 {
  padding-top: 32px;
}

.pb-32 {
  padding-bottom: 32px;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.p-33 {
  padding: 33px;
}

.pl-33 {
  padding-left: 33px;
}

.pr-33 {
  padding-right: 33px;
}

.pt-33 {
  padding-top: 33px;
}

.pb-33 {
  padding-bottom: 33px;
}

.px-33 {
  padding-left: 33px;
  padding-right: 33px;
}

.py-33 {
  padding-top: 33px;
  padding-bottom: 33px;
}

.p-34 {
  padding: 34px;
}

.pl-34 {
  padding-left: 34px;
}

.pr-34 {
  padding-right: 34px;
}

.pt-34 {
  padding-top: 34px;
}

.pb-34 {
  padding-bottom: 34px;
}

.px-34 {
  padding-left: 34px;
  padding-right: 34px;
}

.py-34 {
  padding-top: 34px;
  padding-bottom: 34px;
}

.p-35 {
  padding: 35px;
}

.pl-35 {
  padding-left: 35px;
}

.pr-35 {
  padding-right: 35px;
}

.pt-35 {
  padding-top: 35px;
}

.pb-35 {
  padding-bottom: 35px;
}

.px-35 {
  padding-left: 35px;
  padding-right: 35px;
}

.py-35 {
  padding-top: 35px;
  padding-bottom: 35px;
}

.p-36 {
  padding: 36px;
}

.pl-36 {
  padding-left: 36px;
}

.pr-36 {
  padding-right: 36px;
}

.pt-36 {
  padding-top: 36px;
}

.pb-36 {
  padding-bottom: 36px;
}

.px-36 {
  padding-left: 36px;
  padding-right: 36px;
}

.py-36 {
  padding-top: 36px;
  padding-bottom: 36px;
}

.p-37 {
  padding: 37px;
}

.pl-37 {
  padding-left: 37px;
}

.pr-37 {
  padding-right: 37px;
}

.pt-37 {
  padding-top: 37px;
}

.pb-37 {
  padding-bottom: 37px;
}

.px-37 {
  padding-left: 37px;
  padding-right: 37px;
}

.py-37 {
  padding-top: 37px;
  padding-bottom: 37px;
}

.p-38 {
  padding: 38px;
}

.pl-38 {
  padding-left: 38px;
}

.pr-38 {
  padding-right: 38px;
}

.pt-38 {
  padding-top: 38px;
}

.pb-38 {
  padding-bottom: 38px;
}

.px-38 {
  padding-left: 38px;
  padding-right: 38px;
}

.py-38 {
  padding-top: 38px;
  padding-bottom: 38px;
}

.p-39 {
  padding: 39px;
}

.pl-39 {
  padding-left: 39px;
}

.pr-39 {
  padding-right: 39px;
}

.pt-39 {
  padding-top: 39px;
}

.pb-39 {
  padding-bottom: 39px;
}

.px-39 {
  padding-left: 39px;
  padding-right: 39px;
}

.py-39 {
  padding-top: 39px;
  padding-bottom: 39px;
}

.p-40 {
  padding: 40px;
}

.pl-40 {
  padding-left: 40px;
}

.pr-40 {
  padding-right: 40px;
}

.pt-40 {
  padding-top: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}

.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.p-41 {
  padding: 41px;
}

.pl-41 {
  padding-left: 41px;
}

.pr-41 {
  padding-right: 41px;
}

.pt-41 {
  padding-top: 41px;
}

.pb-41 {
  padding-bottom: 41px;
}

.px-41 {
  padding-left: 41px;
  padding-right: 41px;
}

.py-41 {
  padding-top: 41px;
  padding-bottom: 41px;
}

.p-42 {
  padding: 42px;
}

.pl-42 {
  padding-left: 42px;
}

.pr-42 {
  padding-right: 42px;
}

.pt-42 {
  padding-top: 42px;
}

.pb-42 {
  padding-bottom: 42px;
}

.px-42 {
  padding-left: 42px;
  padding-right: 42px;
}

.py-42 {
  padding-top: 42px;
  padding-bottom: 42px;
}

.p-43 {
  padding: 43px;
}

.pl-43 {
  padding-left: 43px;
}

.pr-43 {
  padding-right: 43px;
}

.pt-43 {
  padding-top: 43px;
}

.pb-43 {
  padding-bottom: 43px;
}

.px-43 {
  padding-left: 43px;
  padding-right: 43px;
}

.py-43 {
  padding-top: 43px;
  padding-bottom: 43px;
}

.p-44 {
  padding: 44px;
}

.pl-44 {
  padding-left: 44px;
}

.pr-44 {
  padding-right: 44px;
}

.pt-44 {
  padding-top: 44px;
}

.pb-44 {
  padding-bottom: 44px;
}

.px-44 {
  padding-left: 44px;
  padding-right: 44px;
}

.py-44 {
  padding-top: 44px;
  padding-bottom: 44px;
}

.p-45 {
  padding: 45px;
}

.pl-45 {
  padding-left: 45px;
}

.pr-45 {
  padding-right: 45px;
}

.pt-45 {
  padding-top: 45px;
}

.pb-45 {
  padding-bottom: 45px;
}

.px-45 {
  padding-left: 45px;
  padding-right: 45px;
}

.py-45 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.p-46 {
  padding: 46px;
}

.pl-46 {
  padding-left: 46px;
}

.pr-46 {
  padding-right: 46px;
}

.pt-46 {
  padding-top: 46px;
}

.pb-46 {
  padding-bottom: 46px;
}

.px-46 {
  padding-left: 46px;
  padding-right: 46px;
}

.py-46 {
  padding-top: 46px;
  padding-bottom: 46px;
}

.p-47 {
  padding: 47px;
}

.pl-47 {
  padding-left: 47px;
}

.pr-47 {
  padding-right: 47px;
}

.pt-47 {
  padding-top: 47px;
}

.pb-47 {
  padding-bottom: 47px;
}

.px-47 {
  padding-left: 47px;
  padding-right: 47px;
}

.py-47 {
  padding-top: 47px;
  padding-bottom: 47px;
}

.p-48 {
  padding: 48px;
}

.pl-48 {
  padding-left: 48px;
}

.pr-48 {
  padding-right: 48px;
}

.pt-48 {
  padding-top: 48px;
}

.pb-48 {
  padding-bottom: 48px;
}

.px-48 {
  padding-left: 48px;
  padding-right: 48px;
}

.py-48 {
  padding-top: 48px;
  padding-bottom: 48px;
}

.p-49 {
  padding: 49px;
}

.pl-49 {
  padding-left: 49px;
}

.pr-49 {
  padding-right: 49px;
}

.pt-49 {
  padding-top: 49px;
}

.pb-49 {
  padding-bottom: 49px;
}

.px-49 {
  padding-left: 49px;
  padding-right: 49px;
}

.py-49 {
  padding-top: 49px;
  padding-bottom: 49px;
}

.p-50 {
  padding: 50px;
}

.pl-50 {
  padding-left: 50px;
}

.pr-50 {
  padding-right: 50px;
}

.pt-50 {
  padding-top: 50px;
}

.pb-50 {
  padding-bottom: 50px;
}

.px-50 {
  padding-left: 50px;
  padding-right: 50px;
}

.py-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.p-51 {
  padding: 51px;
}

.pl-51 {
  padding-left: 51px;
}

.pr-51 {
  padding-right: 51px;
}

.pt-51 {
  padding-top: 51px;
}

.pb-51 {
  padding-bottom: 51px;
}

.px-51 {
  padding-left: 51px;
  padding-right: 51px;
}

.py-51 {
  padding-top: 51px;
  padding-bottom: 51px;
}

.p-52 {
  padding: 52px;
}

.pl-52 {
  padding-left: 52px;
}

.pr-52 {
  padding-right: 52px;
}

.pt-52 {
  padding-top: 52px;
}

.pb-52 {
  padding-bottom: 52px;
}

.px-52 {
  padding-left: 52px;
  padding-right: 52px;
}

.py-52 {
  padding-top: 52px;
  padding-bottom: 52px;
}

.p-53 {
  padding: 53px;
}

.pl-53 {
  padding-left: 53px;
}

.pr-53 {
  padding-right: 53px;
}

.pt-53 {
  padding-top: 53px;
}

.pb-53 {
  padding-bottom: 53px;
}

.px-53 {
  padding-left: 53px;
  padding-right: 53px;
}

.py-53 {
  padding-top: 53px;
  padding-bottom: 53px;
}

.p-54 {
  padding: 54px;
}

.pl-54 {
  padding-left: 54px;
}

.pr-54 {
  padding-right: 54px;
}

.pt-54 {
  padding-top: 54px;
}

.pb-54 {
  padding-bottom: 54px;
}

.px-54 {
  padding-left: 54px;
  padding-right: 54px;
}

.py-54 {
  padding-top: 54px;
  padding-bottom: 54px;
}

.p-55 {
  padding: 55px;
}

.pl-55 {
  padding-left: 55px;
}

.pr-55 {
  padding-right: 55px;
}

.pt-55 {
  padding-top: 55px;
}

.pb-55 {
  padding-bottom: 55px;
}

.px-55 {
  padding-left: 55px;
  padding-right: 55px;
}

.py-55 {
  padding-top: 55px;
  padding-bottom: 55px;
}

.p-56 {
  padding: 56px;
}

.pl-56 {
  padding-left: 56px;
}

.pr-56 {
  padding-right: 56px;
}

.pt-56 {
  padding-top: 56px;
}

.pb-56 {
  padding-bottom: 56px;
}

.px-56 {
  padding-left: 56px;
  padding-right: 56px;
}

.py-56 {
  padding-top: 56px;
  padding-bottom: 56px;
}

.p-57 {
  padding: 57px;
}

.pl-57 {
  padding-left: 57px;
}

.pr-57 {
  padding-right: 57px;
}

.pt-57 {
  padding-top: 57px;
}

.pb-57 {
  padding-bottom: 57px;
}

.px-57 {
  padding-left: 57px;
  padding-right: 57px;
}

.py-57 {
  padding-top: 57px;
  padding-bottom: 57px;
}

.p-58 {
  padding: 58px;
}

.pl-58 {
  padding-left: 58px;
}

.pr-58 {
  padding-right: 58px;
}

.pt-58 {
  padding-top: 58px;
}

.pb-58 {
  padding-bottom: 58px;
}

.px-58 {
  padding-left: 58px;
  padding-right: 58px;
}

.py-58 {
  padding-top: 58px;
  padding-bottom: 58px;
}

.p-59 {
  padding: 59px;
}

.pl-59 {
  padding-left: 59px;
}

.pr-59 {
  padding-right: 59px;
}

.pt-59 {
  padding-top: 59px;
}

.pb-59 {
  padding-bottom: 59px;
}

.px-59 {
  padding-left: 59px;
  padding-right: 59px;
}

.py-59 {
  padding-top: 59px;
  padding-bottom: 59px;
}

.p-60 {
  padding: 60px;
}

.pl-60 {
  padding-left: 60px;
}

.pr-60 {
  padding-right: 60px;
}

.pt-60 {
  padding-top: 60px;
}

.pb-60 {
  padding-bottom: 60px;
}

.px-60 {
  padding-left: 60px;
  padding-right: 60px;
}

.py-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* ------------------------------ 
 * top left right bottom 
 --------------------------------*/
.top-0 {
  top: 0;
}

.top-1 {
  top: 1px;
}

.top-2 {
  top: 2px;
}

.top-3 {
  top: 3px;
}

.top-4 {
  top: 4px;
}

.top-5 {
  top: 5px;
}

.top-6 {
  top: 6px;
}

.top-7 {
  top: 7px;
}

.top-8 {
  top: 8px;
}

.top-9 {
  top: 9px;
}

.top-10 {
  top: 10px;
}

.top-11 {
  top: 11px;
}

.top-12 {
  top: 12px;
}

.top-13 {
  top: 13px;
}

.top-14 {
  top: 14px;
}

.top-15 {
  top: 15px;
}

.top-16 {
  top: 16px;
}

.top-17 {
  top: 17px;
}

.top-18 {
  top: 18px;
}

.top-19 {
  top: 19px;
}

.top-20 {
  top: 20px;
}

.top-21 {
  top: 21px;
}

.top-22 {
  top: 22px;
}

.top-23 {
  top: 23px;
}

.top-24 {
  top: 24px;
}

.top-25 {
  top: 25px;
}

.top-26 {
  top: 26px;
}

.top-27 {
  top: 27px;
}

.top-28 {
  top: 28px;
}

.top-29 {
  top: 29px;
}

.top-30 {
  top: 30px;
}

.top-31 {
  top: 31px;
}

.top-32 {
  top: 32px;
}

.top-33 {
  top: 33px;
}

.top-34 {
  top: 34px;
}

.top-35 {
  top: 35px;
}

.top-36 {
  top: 36px;
}

.top-37 {
  top: 37px;
}

.top-38 {
  top: 38px;
}

.top-39 {
  top: 39px;
}

.top-40 {
  top: 40px;
}

.top-41 {
  top: 41px;
}

.top-42 {
  top: 42px;
}

.top-43 {
  top: 43px;
}

.top-44 {
  top: 44px;
}

.top-45 {
  top: 45px;
}

.top-46 {
  top: 46px;
}

.top-47 {
  top: 47px;
}

.top-48 {
  top: 48px;
}

.top-49 {
  top: 49px;
}

.top-50 {
  top: 50px;
}

.top-51 {
  top: 51px;
}

.top-52 {
  top: 52px;
}

.top-53 {
  top: 53px;
}

.top-54 {
  top: 54px;
}

.top-55 {
  top: 55px;
}

.top-56 {
  top: 56px;
}

.top-57 {
  top: 57px;
}

.top-58 {
  top: 58px;
}

.top-59 {
  top: 59px;
}

.top-60 {
  top: 60px;
}

.left-0 {
  left: 0;
}

.left-1 {
  left: 1px;
}

.left-2 {
  left: 2px;
}

.left-3 {
  left: 3px;
}

.left-4 {
  left: 4px;
}

.left-5 {
  left: 5px;
}

.left-6 {
  left: 6px;
}

.left-7 {
  left: 7px;
}

.left-8 {
  left: 8px;
}

.left-9 {
  left: 9px;
}

.left-10 {
  left: 10px;
}

.left-11 {
  left: 11px;
}

.left-12 {
  left: 12px;
}

.left-13 {
  left: 13px;
}

.left-14 {
  left: 14px;
}

.left-15 {
  left: 15px;
}

.left-16 {
  left: 16px;
}

.left-17 {
  left: 17px;
}

.left-18 {
  left: 18px;
}

.left-19 {
  left: 19px;
}

.left-20 {
  left: 20px;
}

.left-21 {
  left: 21px;
}

.left-22 {
  left: 22px;
}

.left-23 {
  left: 23px;
}

.left-24 {
  left: 24px;
}

.left-25 {
  left: 25px;
}

.left-26 {
  left: 26px;
}

.left-27 {
  left: 27px;
}

.left-28 {
  left: 28px;
}

.left-29 {
  left: 29px;
}

.left-30 {
  left: 30px;
}

.left-31 {
  left: 31px;
}

.left-32 {
  left: 32px;
}

.left-33 {
  left: 33px;
}

.left-34 {
  left: 34px;
}

.left-35 {
  left: 35px;
}

.left-36 {
  left: 36px;
}

.left-37 {
  left: 37px;
}

.left-38 {
  left: 38px;
}

.left-39 {
  left: 39px;
}

.left-40 {
  left: 40px;
}

.left-41 {
  left: 41px;
}

.left-42 {
  left: 42px;
}

.left-43 {
  left: 43px;
}

.left-44 {
  left: 44px;
}

.left-45 {
  left: 45px;
}

.left-46 {
  left: 46px;
}

.left-47 {
  left: 47px;
}

.left-48 {
  left: 48px;
}

.left-49 {
  left: 49px;
}

.left-50 {
  left: 50px;
}

.left-51 {
  left: 51px;
}

.left-52 {
  left: 52px;
}

.left-53 {
  left: 53px;
}

.left-54 {
  left: 54px;
}

.left-55 {
  left: 55px;
}

.left-56 {
  left: 56px;
}

.left-57 {
  left: 57px;
}

.left-58 {
  left: 58px;
}

.left-59 {
  left: 59px;
}

.left-60 {
  left: 60px;
}

.right-0 {
  right: 0;
}

.right-1 {
  right: 1px;
}

.right-2 {
  right: 2px;
}

.right-3 {
  right: 3px;
}

.right-4 {
  right: 4px;
}

.right-5 {
  right: 5px;
}

.right-6 {
  right: 6px;
}

.right-7 {
  right: 7px;
}

.right-8 {
  right: 8px;
}

.right-9 {
  right: 9px;
}

.right-10 {
  right: 10px;
}

.right-11 {
  right: 11px;
}

.right-12 {
  right: 12px;
}

.right-13 {
  right: 13px;
}

.right-14 {
  right: 14px;
}

.right-15 {
  right: 15px;
}

.right-16 {
  right: 16px;
}

.right-17 {
  right: 17px;
}

.right-18 {
  right: 18px;
}

.right-19 {
  right: 19px;
}

.right-20 {
  right: 20px;
}

.right-21 {
  right: 21px;
}

.right-22 {
  right: 22px;
}

.right-23 {
  right: 23px;
}

.right-24 {
  right: 24px;
}

.right-25 {
  right: 25px;
}

.right-26 {
  right: 26px;
}

.right-27 {
  right: 27px;
}

.right-28 {
  right: 28px;
}

.right-29 {
  right: 29px;
}

.right-30 {
  right: 30px;
}

.right-31 {
  right: 31px;
}

.right-32 {
  right: 32px;
}

.right-33 {
  right: 33px;
}

.right-34 {
  right: 34px;
}

.right-35 {
  right: 35px;
}

.right-36 {
  right: 36px;
}

.right-37 {
  right: 37px;
}

.right-38 {
  right: 38px;
}

.right-39 {
  right: 39px;
}

.right-40 {
  right: 40px;
}

.right-41 {
  right: 41px;
}

.right-42 {
  right: 42px;
}

.right-43 {
  right: 43px;
}

.right-44 {
  right: 44px;
}

.right-45 {
  right: 45px;
}

.right-46 {
  right: 46px;
}

.right-47 {
  right: 47px;
}

.right-48 {
  right: 48px;
}

.right-49 {
  right: 49px;
}

.right-50 {
  right: 50px;
}

.right-51 {
  right: 51px;
}

.right-52 {
  right: 52px;
}

.right-53 {
  right: 53px;
}

.right-54 {
  right: 54px;
}

.right-55 {
  right: 55px;
}

.right-56 {
  right: 56px;
}

.right-57 {
  right: 57px;
}

.right-58 {
  right: 58px;
}

.right-59 {
  right: 59px;
}

.right-60 {
  right: 60px;
}

.bottom-0 {
  bottom: 0;
}

.bottom-1 {
  bottom: 1px;
}

.bottom-2 {
  bottom: 2px;
}

.bottom-3 {
  bottom: 3px;
}

.bottom-4 {
  bottom: 4px;
}

.bottom-5 {
  bottom: 5px;
}

.bottom-6 {
  bottom: 6px;
}

.bottom-7 {
  bottom: 7px;
}

.bottom-8 {
  bottom: 8px;
}

.bottom-9 {
  bottom: 9px;
}

.bottom-10 {
  bottom: 10px;
}

.bottom-11 {
  bottom: 11px;
}

.bottom-12 {
  bottom: 12px;
}

.bottom-13 {
  bottom: 13px;
}

.bottom-14 {
  bottom: 14px;
}

.bottom-15 {
  bottom: 15px;
}

.bottom-16 {
  bottom: 16px;
}

.bottom-17 {
  bottom: 17px;
}

.bottom-18 {
  bottom: 18px;
}

.bottom-19 {
  bottom: 19px;
}

.bottom-20 {
  bottom: 20px;
}

.bottom-21 {
  bottom: 21px;
}

.bottom-22 {
  bottom: 22px;
}

.bottom-23 {
  bottom: 23px;
}

.bottom-24 {
  bottom: 24px;
}

.bottom-25 {
  bottom: 25px;
}

.bottom-26 {
  bottom: 26px;
}

.bottom-27 {
  bottom: 27px;
}

.bottom-28 {
  bottom: 28px;
}

.bottom-29 {
  bottom: 29px;
}

.bottom-30 {
  bottom: 30px;
}

.bottom-31 {
  bottom: 31px;
}

.bottom-32 {
  bottom: 32px;
}

.bottom-33 {
  bottom: 33px;
}

.bottom-34 {
  bottom: 34px;
}

.bottom-35 {
  bottom: 35px;
}

.bottom-36 {
  bottom: 36px;
}

.bottom-37 {
  bottom: 37px;
}

.bottom-38 {
  bottom: 38px;
}

.bottom-39 {
  bottom: 39px;
}

.bottom-40 {
  bottom: 40px;
}

.bottom-41 {
  bottom: 41px;
}

.bottom-42 {
  bottom: 42px;
}

.bottom-43 {
  bottom: 43px;
}

.bottom-44 {
  bottom: 44px;
}

.bottom-45 {
  bottom: 45px;
}

.bottom-46 {
  bottom: 46px;
}

.bottom-47 {
  bottom: 47px;
}

.bottom-48 {
  bottom: 48px;
}

.bottom-49 {
  bottom: 49px;
}

.bottom-50 {
  bottom: 50px;
}

.bottom-51 {
  bottom: 51px;
}

.bottom-52 {
  bottom: 52px;
}

.bottom-53 {
  bottom: 53px;
}

.bottom-54 {
  bottom: 54px;
}

.bottom-55 {
  bottom: 55px;
}

.bottom-56 {
  bottom: 56px;
}

.bottom-57 {
  bottom: 57px;
}

.bottom-58 {
  bottom: 58px;
}

.bottom-59 {
  bottom: 59px;
}

.bottom-60 {
  bottom: 60px;
}

.abs-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fixed-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ------------------------------ 
 * z-index 
 --------------------------------*/
.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-6 {
  z-index: 6;
}

.z-7 {
  z-index: 7;
}

.z-8 {
  z-index: 8;
}

.z-9 {
  z-index: 9;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-60 {
  z-index: 60;
}

.z-70 {
  z-index: 70;
}

.z-80 {
  z-index: 80;
}

.z-90 {
  z-index: 90;
}

.z-100 {
  z-index: 100;
}

/* ------------------------------ 
 * 팝업전체메뉴 
 --------------------------------*/
/* end 팝업전체메뉴 */
/* clearpoint 클리어포인트 리포트 */
#file {
  display: none;
}

.photo-upload {
  border: 1px solid skyblue;
  width: 50px;
  height: 50px;
  font-size: 33px;
  border-radius: 50%;
  text-align: center;
  color: white;
  background-color: skyblue;
  padding: 0px;
  border: 0;
  outline: 0;
}
.photo-upload :hover {
  background-color: rgba(0, 0, 0, 0);
  color: skyblue;
  border: 0;
  outline: 0;
}

#locate-position {
  border: 1px solid skyblue;
  width: 50px;
  height: 50px;
  font-size: 33px;
  border-radius: 50%;
  text-align: center;
  color: white;
  background-color: skyblue;
  padding: 0px;
  border: 0;
  outline: 0;
}

#btn-upload:hover {
  background-color: rgba(0, 0, 0, 0);
  color: skyblue;
  border: 0;
  outline: 0;
}

.report {
  position: absolute;
  bottom: 10px;
  right: 15px;
  z-index: 100;
}

#map {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #363636;
}

#nmap {
  width: 100%;
  height: 100%;
}

.map_all {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 30px 30px 0 0;
}

.map_all_no {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

#map_mroutes {
  position: relative;
  width: 100vw;
  height: 100vw;
  z-index: 1;
  background: #363636;
}
@media screen and (min-width: 992px) {
  #map_mroutes {
    width: 600px;
    height: 600px;
  }
}

#map_route {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.w-intro {
  display: grid;
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 23;
  line-height: 49px;
  color: white;
  background-color: #04a976;
  animation: pop-out 3.5s ease-out 1 forwards;
}

.w01 {
  display: grid;
  grid-template: "h h h h" 400px "s s s s" 200px "a b c d" 1fr/1fr 1fr 1fr 1fr;
  gap: 10px;
}
.w01 .gh {
  grid-area: h;
}
.w01 .gs {
  grid-area: s;
}
.w01 .ga {
  grid-area: a;
}
.w01 .gb {
  grid-area: b;
}
.w01 .gc {
  grid-area: c;
}

.c01 {
  background-color: rgb(207, 207, 207);
  width: 100%;
}

.leaflet-container {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
  font-size: 7px;
}

.leaflet-touch .leaflet-bar {
  display: none;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

.leaflet-top {
  top: 63%;
}

.leaflet-left {
  left: 86%;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.leaflet-touch .leaflet-bar a {
  width: 18px;
  height: 46px;
  line-height: 46px;
}

.leaflet-control-container {
  display: none;
}

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
  display: none;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  background-color: rgba(255, 255, 255, 0.3294117647);
}

.leaflet-bar a.leaflet-disabled {
  background-color: rgba(255, 255, 255, 0.3294117647);
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  /* padding: 0px 0px 0 0; */
  border: none;
  text-align: center;
  width: 16px;
  height: 16px;
  font-size: 18px;
  color: #4d4d4d;
  text-decoration: none;
  /* font-weight: bold; */
  background: transparent;
}

/*another-popop style*/
.leaf_popstyle1 {
  bottom: -4px !important;
  left: -12px !important;
}
.leaf_popstyle1 .leaflet-popup-content-wrapper {
  position: absolute;
  bottom: -7px;
  left: -30px;
  background: rgba(255, 255, 255, 0) url(../public/img/util/mc_flag_st02.svg) no-repeat center;
  background-size: 46%;
  color: #eee;
  height: 38px;
  width: 120px;
  line-height: 24px;
  border-radius: 0px;
  box-shadow: none;
}
.leaf_popstyle1 .leaflet-popup-content-wrapper .leaflet-popup-content {
  margin: 5px 10px;
  line-height: 1.4;
  width: 30px;
}
.leaf_popstyle1 .leaflet-popup-content-wrapper a {
  color: rgba(200, 200, 200, 0.1);
}
.leaf_popstyle1 .leaflet-popup-tip-container {
  display: none;
  width: 48px;
  height: 15px;
  left: 0;
  margin-left: -10px;
}
.leaf_popstyle1 .leaflet-popup-tip-container .leaflet-popup-tip {
  background: rgba(244, 67, 54, 0);
  border: none;
  box-shadow: none;
  width: 8px;
  height: 15px;
  padding: 1px;
  margin: -10px auto 0;
}
.leaf_popstyle1 a.leaflet-popup-close-button {
  display: none;
}

.leaf_popstyle2 {
  bottom: -4px !important;
  left: -12px !important;
}
.leaf_popstyle2 .leaflet-popup-content-wrapper {
  position: absolute;
  bottom: -19px;
  background: rgba(244, 67, 54, 0) url(../public/img/util/mc_flag07.svg) no-repeat center;
  background-size: 85%;
  color: #eee;
  height: 50px;
  width: 120px;
  line-height: 24px;
  border-radius: 0px;
  box-shadow: none;
}
.leaf_popstyle2 .leaflet-popup-content-wrapper .leaflet-popup-content {
  margin: 5px 10px;
  line-height: 1.4;
  width: 30px;
}
.leaf_popstyle2 .leaflet-popup-content-wrapper a {
  color: rgba(200, 200, 200, 0.1);
}
.leaf_popstyle2 .leaflet-popup-tip-container {
  display: none;
  width: 48px;
  height: 15px;
  left: 0;
  margin-left: -10px;
}
.leaf_popstyle2 .leaflet-popup-tip-container .leaflet-popup-tip {
  background: rgba(244, 67, 54, 0);
  border: none;
  box-shadow: none;
  width: 8px;
  height: 15px;
  padding: 1px;
  margin: -10px auto 0;
}
.leaf_popstyle2 a.leaflet-popup-close-button {
  display: none;
}

.leaf_startpop_oncemodal {
  position: absolute;
  left: 0;
  top: 165px;
  border-radius: 52px;
  height: -moz-max-content;
  height: max-content;
  text-align: center;
  padding: 5px 23px;
  border: 1px solid #707070;
  background: white;
  font-size: 14px;
  line-height: 1.4;
  z-index: 500;
  margin: auto;
  right: 0;
  width: -moz-max-content;
  width: max-content;
}

.leaf_startpop {
  bottom: -4px !important;
  left: -12px !important;
}
.leaf_startpop .leaflet-popup-content-wrapper {
  position: absolute;
  bottom: 21px;
  display: flex;
  left: -104px;
  margin: auto;
  background: white;
  border: 1px solid #afafaf;
  font-weight: 500;
  color: #000;
  box-shadow: 0 0 13px 2px rgba(43, 43, 43, 0.1098039216);
  height: -moz-max-content;
  height: max-content;
  padding: 9px 20px;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  line-height: 24px;
  border-radius: 50px;
  box-shadow: none;
}
.leaf_startpop .leaflet-popup-content-wrapper .leaflet-popup-content {
  padding: 0 20px;
  display: flex;
  width: 100%;
  /* height: 100%; */
  line-height: 1;
  width: -moz-max-content;
  width: max-content;
  color: black;
  justify-content: center;
  align-items: center;
}
.leaf_startpop .leaflet-popup-content-wrapper a {
  color: rgba(200, 200, 200, 0.1);
}
.leaf_startpop .leaflet-popup-tip-container {
  display: none;
  width: 48px;
  height: 15px;
  left: 0;
  margin-left: -10px;
}
.leaf_startpop .leaflet-popup-tip-container .leaflet-popup-tip {
  background: rgba(244, 67, 54, 0);
  border: none;
  box-shadow: none;
  width: 8px;
  height: 15px;
  padding: 1px;
  margin: -10px auto 0;
}
.leaf_startpop a.leaflet-popup-close-button {
  display: none;
}

.number-icon {
  background-size: 40px 40px;
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  color: rgb(0, 0, 0);
  font-weight: bold;
}

.number-icon-plogdot {
  font-size: 12px;
  line-height: 1.4;
  font-family: "Oswald";
  color: white;
  background: #007b55;
  border-radius: 50%;
  text-align: center;
}

.juppanel {
  display: none;
  z-index: 3;
}

.jpopen {
  position: relative;
}
.jpopen:before {
  content: "\f038";
  font-family: FontAwesome;
  font-size: 25px;
  color: white;
}
.jpopen:hover .popinfo1, .jpopen:focus .popinfo1 {
  opacity: 1;
}

.ifopen {
  position: relative;
}
.ifopen:before {
  content: "\f038";
  font-family: FontAwesome;
  font-size: 25px;
  color: white;
}
.ifopen:hover .popinfo1, .ifopen:focus .popinfo1 {
  opacity: 1;
}

.wcount {
  height: 100%;
  display: grid;
  grid-template: "l a r " 1fr/40px 1fr 40px;
  background: rgba(255, 255, 255, 0.7490196078) url(../public/img/util/plog1.png) no-repeat bottom;
  background-size: cover;
  background-position: 51% 25%;
  display: grid;
  z-index: 1;
}
.wcount > .gall {
  grid-row: 1/-1;
  grid-column: 1/-1;
  display: flex;
}
.wcount > .ga {
  grid-area: a;
}
.wcount > .gl {
  grid-area: l;
  margin: 0px 0 70px 86px;
}
.wcount > .gr {
  grid-area: r;
  margin: 0px 86px 70px 0;
}

.wcount_e {
  height: 100%;
  display: grid;
  grid-template: "l a r " 1fr/40px 1fr 40px;
  z-index: 1;
}
.wcount_e > .gall {
  grid-row: 1/-1;
  grid-column: 1/-1;
  display: flex;
}
.wcount_e > .ga {
  grid-area: a;
  z-index: 3;
}
.wcount_e > .gl {
  grid-area: l;
  margin: 0px 0 70px 86px;
}
.wcount_e > .gr {
  grid-area: r;
  margin: 0px 86px 70px 0;
}

.para-01 {
  line-height: 150%;
  font-family: "Noto Sans KR", sans-serif;
}

hr {
  border: 0.5px solid black;
}

.section_vibe {
  background-color: #fa4571;
  background-image: url(../public/img/mc-img01.png);
}

.section_vibe .lk_view {
  position: absolute;
  top: 183px;
  width: 300px;
  height: 203px;
}

.medalsec {
  width: 39px;
  margin-top: -16px;
  margin-left: -10px;
}

.main-grid {
  display: grid;
  overflow: auto;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}

.main-grid-60 {
  display: grid;
  overflow: auto;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - 60px);
  margin-top: 60px;
}

.overauto {
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 325px);
}

.overauto1 {
  overflow: auto;
  height: 100%;
}

.jupsect {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  color: rgba(4, 169, 117, 0.3843137255);
}
.jupsect :hover {
  background-color: rgba(4, 169, 117, 0.3843137255);
}

.jupsect1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 22px auto;
  color: rgba(4, 169, 117, 0.3843137255);
}
.jupsect1 :hover {
  background-color: rgba(4, 169, 117, 0.3843137255);
}

.jupsect8080 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 22px auto;
  color: rgba(4, 169, 117, 0.3843137255);
}
.jupsect8080 :hover {
  background-color: rgba(4, 169, 117, 0.3843137255);
}

.jupsect2 {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  color: rgb(41, 41, 41);
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
.jupsect2 :hover {
  background-color: rgba(0, 0, 0, 0.068);
}

.jupframe {
  color: #ffffff;
  background-color: rgba(7, 161, 114, 0.4196078431);
  border: 1px solid rgba(80, 186, 84, 0.3882352941);
  background-position: 27% 35%;
  background-size: 182%;
  border-radius: 50%;
}

.jupframe1 {
  color: #ffffff;
  background-color: rgba(7, 161, 115, 0.6509803922);
  border: 1px solid rgba(0, 150, 101, 0.7882352941);
  background-position: 27% 35%;
  background-size: 182%;
  box-shadow: 0 0 0.4em 0 rgba(116, 116, 116, 0.631372549);
  border-radius: 50%;
}

.jupframe2 {
  color: #ffffff;
  background-color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.7882352941);
  background-position: 27% 35%;
  background-size: 182%;
  box-shadow: 0 0 0.4em 0 rgba(116, 116, 116, 0.631372549);
  border-radius: 50%;
}

.jupframe_proicon {
  color: #00502b;
  background-color: #ffffff;
  border: 1px solid #00502b;
  background-position: 27% 35%;
  background-size: 182%;
  box-shadow: 0 0 0.4em 0 rgba(116, 116, 116, 0.631372549);
  border-radius: 50%;
}

.none {
  display: none !important;
}

input[type=file] {
  display: none;
}

.bdround {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(36, 138, 74, 0.4509803922);
  box-shadow: 0 0 0.75em 0 rgba(41, 198, 122, 0.38);
  border-radius: 50%;
}

.round_simple_30 {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(36, 138, 74, 0.4509803922);
  border-radius: 50%;
  margin: 0 0.1rem;
}

.bdround1 {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(36, 138, 74, 0.4509803922);
  box-shadow: 0 0 1.13em 0 rgba(63, 63, 63, 0.56);
  border-radius: 50%;
}

.house_round {
  width: 100%;
  height: 100%;
  border: 1px solid gainsboro;
  border-radius: 20px;
}

.profile_icon1 {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(36, 138, 74, 0.3607843137);
  padding: 3px;
  border-radius: 50%;
}

.profile_icon_style {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.profile_icon_style2 {
  width: 100%;
  height: 100%;
  border-radius: 25px;
}

.bdround_f {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-sizing: border-box;
}

.polyline1 {
  stroke: #04a976;
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 2 4;
}

.plines1 {
  stroke: #04a976;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  stroke-dasharray: 2;
}

.bdnone {
  border: none !important;
}

.switch2 {
  height: 24px;
  display: block;
  position: relative;
  cursor: pointer;
}
.switch2 input {
  display: none;
}
.switch2 input + span {
  padding-left: 50px;
  min-height: 24px;
  line-height: 24px;
  display: block;
  color: #99A3BA;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.switch2 input + span:before, .switch2 input + span:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 12px;
}
.switch2 input + span:before {
  top: 0;
  left: 0;
  width: 42px;
  height: 24px;
  background: #E4ECFA;
  transition: all 0.3s ease;
}
.switch2 input + span:after {
  width: 18px;
  height: 18px;
  background: #fff;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 3px rgba(18, 22, 33, 0.1);
  transition: all 0.45s ease;
}
.switch2 input + span em {
  width: 8px;
  height: 7px;
  background: #99A3BA;
  position: absolute;
  left: 8px;
  bottom: 7px;
  border-radius: 2px;
  display: block;
  z-index: 1;
  transition: all 0.45s ease;
}
.switch2 input + span em:before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -1px;
}
.switch2 input + span em:after {
  content: "";
  display: block;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid #99A3BA;
  border-bottom: 0;
  width: 6px;
  height: 4px;
  left: 1px;
  bottom: 6px;
  position: absolute;
  z-index: 1;
  transform-origin: 0 100%;
  transition: all 0.45s ease;
  transform: rotate(-35deg) translate(0, 1px);
}
.switch2 input + span strong {
  font-weight: normal;
  position: relative;
  display: block;
  top: 1px;
}
.switch2 input + span strong:before, .switch2 input + span strong:after {
  font-size: 14px;
  font-weight: 500;
  display: block;
  font-family: "Mukta Malar", Arial;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.switch2 input + span strong:before {
  content: "Data";
  transition: all 0.3s ease 0.2s;
  -webkit-transition: all 0.3s ease 0.2s;
  -moz-transition: all 0.3s ease 0.2s;
  -ms-transition: all 0.3s ease 0.2s;
  -o-transition: all 0.3s ease 0.2s;
}
.switch2 input + span strong:after {
  content: "Live";
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  color: #5628EE;
  transition: all 0.3s ease;
  transform: translate(2px, 0);
}
.switch2 input:checked + span:before {
  background: rgba(86, 40, 238, 0.35);
}
.switch2 input:checked + span:after {
  background: #fff;
  transform: translate(18px, 0);
}
.switch2 input:checked + span em {
  transform: translate(18px, 0);
  background: #5628EE;
}
.switch2 input:checked + span em:after {
  border-color: #5628EE;
  transform: rotate(0deg) translate(0, 0);
}
.switch2 input:checked + span strong:before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translate(-2px, 0);
}
.switch2 input:checked + span strong:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition: all 0.3s ease 0.2s;
}

span.switcher {
  position: absolute;
  top: 18px;
  right: 10px;
  width: 80px;
  height: 25px;
  border-radius: 25px;
  margin-right: 5px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}
span.switcher input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 12px;
  position: relative;
  width: 80px;
  height: 25px;
  border-radius: 50px;
  background-color: #ff0000;
  outline: none;
  font-family: "Oswald", sans-serif;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
span.switcher input:before, span.switcher input:after {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
}
span.switcher input:before {
  content: "DATA";
  left: 8px;
}
span.switcher input:after {
  content: "RUN";
  right: 10px;
}
span.switcher label {
  z-index: 1;
  position: absolute;
  top: 0px;
  bottom: 0px;
  border-radius: 20px;
}
span.switcher.switcher-1 input {
  transition: 0.25s -0.1s;
}
span.switcher.switcher-1 input:checked {
  background-color: #ffffff;
  border: 1px solid #9a9a9a;
}
span.switcher.switcher-1 input:checked:before {
  color: #ffffff;
  transition: color 0.5s 0.2s;
}
span.switcher.switcher-1 input:checked:after {
  color: #CCCCCC;
  transition: color 0.5s;
}
span.switcher.switcher-1 input:checked + label {
  left: 0px;
  right: 38px;
  background: #ff0000;
  transition: left 0.5s, right 0.4s 0.2s;
  -webkit-transition: left 0.5s, right 0.4s 0.2s;
  -moz-transition: left 0.5s, right 0.4s 0.2s;
  -ms-transition: left 0.5s, right 0.4s 0.2s;
  -o-transition: left 0.5s, right 0.4s 0.2s;
}
span.switcher.switcher-1 input:not(:checked) {
  background: #ff0000;
  transition: background 0.5s -0.1s;
}
span.switcher.switcher-1 input:not(:checked):before {
  color: #CCCCCC;
  transition: color 0.5s;
}
span.switcher.switcher-1 input:not(:checked):after {
  color: #ff0000;
  transition: color 0.5s 0.2s;
}
span.switcher.switcher-1 input:not(:checked) + label {
  left: 38px;
  right: 0px;
  background: #ffffff;
  transition: left 0.4s 0.2s, right 0.5s, background 0.35s -0.1s;
}
span.switcher.switcher-2 {
  overflow: hidden;
}
span.switcher.switcher-2 input {
  transition: background-color 0s 0.5s;
}
span.switcher.switcher-2 input:before {
  color: #ff0000;
}
span.switcher.switcher-2 input:after {
  color: #ffffff;
}
span.switcher.switcher-2 input:checked {
  background-color: #ffffff;
  border: 1px solid #04a976;
}
span.switcher.switcher-2 input:checked + label {
  background: #ffffff;
  animation: turn-on 0.5s ease-out;
}
@keyframes turn-on {
  0% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}
span.switcher.switcher-2 input:not(:checked) {
  background: #ff0000;
}
span.switcher.switcher-2 input:not(:checked) + label {
  background: #ff0000;
  animation: turn-off 0.5s ease-out;
}
@keyframes turn-off {
  0% {
    right: 100%;
  }
  100% {
    right: 0%;
  }
}
span.switcher.switcher-2 label {
  top: 0px;
  width: 80px;
  height: 25px;
  border-radius: 25px;
}

.map-togglebox {
  width: 40px;
  height: 25px;
  position: relative;
}
.map-togglebox input[type=checkbox] {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  left: 0px;
}
.map-togglebox input[type=checkbox] + label {
  display: block;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  height: 25px;
  width: 40px;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1) 150ms;
  -webkit-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1) 150ms;
  -moz-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1) 150ms;
  -ms-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1) 150ms;
  -o-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1) 150ms;
}
.map-togglebox input[type=checkbox] + label:before {
  content: "";
  height: 21px;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  background: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  transform: translate(0px);
  transition: all 600ms cubic-bezier(0.4, 0.5, 0, 1);
}
.map-togglebox input[type=checkbox]:checked + label {
  box-shadow: inset 0 0 0 20px #4CD964;
  transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1);
  -webkit-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1);
  -moz-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1);
  -ms-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1);
  -o-transition: all 300ms cubic-bezier(0.4, 0.5, 0, 1);
}
.map-togglebox input[type=checkbox]:checked + label::before {
  transform: translate(15px);
  -webkit-transform: translate(15px);
  -moz-transform: translate(15px);
  -ms-transform: translate(15px);
  -o-transform: translate(15px);
}

.submitbtn {
  background: rgba(44, 181, 139, 0.3294117647);
  border: 2px solid #04a976;
  border-radius: 20px;
  color: #3f3f3f;
  display: block;
  font-size: 12px;
  font-weight: bold;
  padding: 1.5em 1.5em;
  position: relative;
  text-transform: uppercase;
  outline: 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.submitbtn-jup {
  width: 100px;
  height: 100px;
  margin: 22px auto;
  /* border: 1px solid white; */
  background: url(../public/img/util/plastic-bag_4.svg) top left no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
  font-size: 15px;
}
.submitbtn-jup a {
  text-decoration: none;
}
.submitbtn-jup:hover {
  background-color: transparent;
}
.submitbtn-jup:focus {
  outline: none;
  background-color: transparent;
}

.rotateR:before {
  content: "\f107";
  font-family: FontAwesome;
  font-size: 23px;
}

.rotate_r {
  background: #ffffff;
  border-radius: 20px;
  color: black;
  width: -webkit-fill-available;
  height: 50px;
  display: flex;
  letter-spacing: -1px;
  justify-content: center;
  align-items: center;
  font-size: var(--font-2xl);
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 20px 10px;
  right: 0;
  outline: 0;
  text-align: center;
  border-radius: 6px;
}
.finish_btn {
  display: grid;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  top: 63px;
  margin: 0 13px;
}
.finish_btn > .ga {
  grid-area: a;
  z-index: 2;
}
.finish_btn > .gb {
  grid-area: b;
  z-index: 2;
}
.finish_btn > .gc {
  grid-area: c;
  z-index: 2;
}
.finish_btn > .gfb {
  grid-row: 1/-1;
  grid-column: 3;
  z-index: 3;
}
.finish_btn > .gall {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-items: center;
}
.finish_btn > .gall_f {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 4;
  display: grid;
  justify-items: center;
  align-items: center;
}

.progress1,
.progress2 {
  visibility: hidden;
}

.finish_btn1 {
  display: grid;
  grid-template: "a b c" 1fr/1fr 1fr 1fr;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  top: 82px;
  margin: 0 13px;
}
.finish_btn1 > .ga {
  grid-area: a;
  z-index: 2;
}
.finish_btn1 > .gb {
  grid-area: b;
  z-index: 2;
}
.finish_btn1 > .gc {
  grid-area: c;
  z-index: 2;
}
.finish_btn1 > .gfb {
  grid-row: 1/-1;
  grid-column: 3;
  z-index: 3;
}
.finish_btn1 > .gall {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-items: center;
}
.finish_btn1 > .gall_f {
  grid-row: 1/-1;
  grid-column: 1/-1;
  z-index: 4;
  display: grid;
  justify-items: center;
  align-items: center;
}

.progress1,
.progress2 {
  visibility: hidden;
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.progress-bar li {
  flex: 2;
  position: relative;
  padding: 0 0 14px 0;
  font-size: var(--font-size-default);
  line-height: 1.5;
  color: var(--color-green);
  font-weight: 600;
  white-space: nowrap;
  overflow: visible;
  min-width: 0;
  text-align: center;
  border-bottom: 2px solid var(--color-gray-disabled);
}

.progress-bar li:first-child,
.progress-bar li:last-child {
  flex: 1;
}

.progress-bar li:last-child {
  text-align: right;
}

.progress-bar li:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--color-gray-disabled);
  border-radius: 50%;
  border: 2px solid var(--color-white);
  position: absolute;
  left: calc(50% - 6px);
  bottom: -7px;
  z-index: 3;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

.progress-bar li:first-child:before {
  left: 0;
}

.progress-bar li:last-child:before {
  right: 0;
  left: auto;
}

.progress-bar span {
  transition: opacity 0.3s ease-in-out;
}

.progress-bar li:not(.is-active) span {
  opacity: 0;
}

.progress-bar .is-complete:not(:first-child):after,
.progress-bar .is-active:not(:first-child):after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: -2px;
  left: -50%;
  z-index: 2;
  border-bottom: 2px solid var(--color-green);
}

.progress-bar li:last-child span {
  width: 200%;
  display: inline-block;
  position: absolute;
  left: -100%;
}

.progress-bar .is-complete:last-child:after,
.progress-bar .is-active:last-child:after {
  width: 200%;
  left: -100%;
}

.progress-bar .is-complete:before {
  background-color: var(--color-green);
}

.progress-bar .is-active:before,
.progress-bar li:hover:before,
.progress-bar .is-hovered:before {
  background-color: var(--color-white);
  border-color: var(--color-green);
}

.progress-bar li:hover:before,
.progress-bar .is-hovered:before {
  transform: scale(1.33);
}

.progress-bar li:hover span,
.progress-bar li.is-hovered span {
  opacity: 1;
}

.progress-bar:hover li:not(:hover) span {
  opacity: 0;
}

.x-ray .progress-bar,
.x-ray .progress-bar li {
  border: 1px dashed red;
}

.progress-bar .has-changes {
  opacity: 1 !important;
}

.progress-bar .has-changes:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  left: calc(50% - 4px);
  bottom: -20px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%208%22%3E%3Cpath%20fill%3D%22%23ed1c24%22%20d%3D%22M4%200l4%208H0z%22%2F%3E%3C%2Fsvg%3E");
}

.croppie-container .cr-boundary {
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

.croppie-container .cr-slider-wrap {
  display: flex;
  width: 82%;
  margin: 15px auto;
  align-items: center;
}

.cr-rotate {
  border: 0;
  cursor: pointer;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  margin-left: 12px;
}
.cr-rotate:before {
  content: "\f01e";
  font-family: FontAwesome;
  font-size: 23px;
  margin-left: 10px;
  color: white;
}
.cr-rotate:focus {
  outline: 0;
}

.croppie-container .cr-viewport {
  border: none !important;
}

.jupcanvas {
  display: grid;
  width: 80px;
  height: 80px;
  background-color: #000000;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 8px;
}

.jupcanvas1 {
  display: grid;
  width: 50px;
  height: 50px;
  background-color: #04a976;
  border-radius: 50%;
  padding: 8px;
}

.jupcanvas2 {
  display: grid;
  width: 60px;
  height: 60px;
  border-radius: 50px;
}

.jupcanvas_d {
  display: grid;
  width: 80px;
  height: 80px;
}

.jupcanvas3 {
  display: grid;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 8px;
}

.canvas1 {
  width: 100%;
  height: 100%;
}

.accordion {
  color: #444;
  cursor: pointer;
  margin-top: -29px;
  margin-right: 17px;
  text-align: right;
  font-size: 15px;
  transition: 0.4s;
}
.accordion:before {
  content: "\f107";
  font-family: FontAwesome;
  font-size: 23px;
  margin-top: -28px;
}
.accordion.active, .accordion:hover {
  background-color: none;
}
.accordion.active:before, .accordion:hover:before {
  content: "\f106";
  font-family: FontAwesome;
  font-size: 26px;
  margin-top: -28px;
}

.panel {
  background-color: white;
  overflow: hidden;
  position: relative;
  transition: max-height 0.2s ease-out;
  -webkit-transition: max-height 0.2s ease-out;
  -moz-transition: max-height 0.2s ease-out;
  -ms-transition: max-height 0.2s ease-out;
  -o-transition: max-height 0.2s ease-out;
}
@media screen and (min-width: 992px) {
  .panel {
    border-radius: 15px;
  }
}

.idicon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  box-shadow: 0 0 0.75em 0 rgba(148, 148, 148, 0.473);
}

.idicon1 {
  position: relative;
  width: 40px;
  height: 40px;
}

.idicon3 {
  position: relative;
  top: 0px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  /* -webkit-box-shadow: 0 0 0.75em 0 rgb(148 148 148 / 47%); */
  box-shadow: 0 0 0.35em 0 rgba(148, 148, 148, 0.47);
}

.idicon2 {
  position: relative;
  top: 0px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  /* -webkit-box-shadow: 0 0 0.75em 0 rgb(148 148 148 / 47%); */
  box-shadow: 0 0 0.35em 0 rgba(148, 148, 148, 0.47);
}

.icon40 {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0 0 0.75em 0 rgba(175, 175, 175, 0.158);
}

.icon60 {
  position: relative;
  width: 79px;
  height: 85px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0 0 0.75em 0 rgba(175, 175, 175, 0.158);
}

.picshot {
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 3;
  right: 0;
}

.progressTag {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: block;
  width: 95%;
  height: 20px;
  border-radius: 7px;
  color: #04a976;
}

progress::-webkit-progress-bar {
  background-color: rgba(255, 255, 255, 0.541);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

progress::-webkit-progress-value {
  background-color: #04a976;
  border-radius: 8px;
}

progress::-moz-progress-bar {
  background-color: #eee;
  border-radius: 8px;
}

@keyframes css-progressbar {
  0% {
    width: 0px;
  }
  100% {
    width: 80%;
  }
}
.progressSvg {
  border-radius: 7px;
  color: #35495e;
}
.progressSvg .progress-container {
  stroke: #eee;
}
.progressSvg .progress-content {
  stroke: #35495e;
}
.progressSvg .progress-content > line {
  stroke-dasharray: 100%;
  stroke-dashoffset: 20%;
  animation: svg-progress 2s ease-out;
  -moz-animation: svg-progress 2s ease-out;
  -webkit-animation: svg-progress 2s ease-out;
}

@keyframes svg-progress {
  0% {
    stroke-dashoffset: 100%;
  }
  100% {
    stroke-dashoffset: 20%;
  }
}
.progress_html {
  background: rgba(255, 255, 255, 0.1);
  justify-content: flex-start;
  border-radius: 25px;
  align-items: center;
  align-items: center;
  position: absolute;
  padding: 0px 0px;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  z-index: 2;
  right: 0;
  display: flex;
  height: 40px;
  width: 100%;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

.progress_html-value {
  border-radius: 25px;
  background: rgb(0, 202, 138);
  height: 4px;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  animation: progresser 2s ease 0s infinite;
}

.progress_html2 {
  justify-content: flex-start;
  border-radius: 25px;
  align-items: center;
  align-items: center;
  position: absolute;
  padding: 0px 0px;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  z-index: 2;
  right: 0;
  display: flex;
  height: 10px;
  width: 100%;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

.progress_html-value2 {
  position: absolute;
  border-radius: 25px;
  height: 4px;
  width: 10px;
  height: 10px;
  left: 0;
  animation: move_x20 2s ease-in-out infinite;
}
.progress_html-value2:after {
  font-family: FontAwesome;
  content: "\f04e";
}

.cert_progress {
  justify-content: space-around;
  align-items: center;
  position: relative;
  background: #f6f6f6;
  padding: 0px 0px;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: flex;
  height: 2px;
  width: 100%;
}

.cert_progress_steps {
  font-size: 14px;
  flex: 1;
  text-align: center;
  z-index: 10;
  color: #313131;
  border-radius: 15px;
}

#cert_progress_bar {
  left: 0;
  background: #c1dbcf;
  position: absolute;
  height: 2px;
  /*bottom: 0;
  */
  z-index: 5;
}

.cert_progress_marker {
  position: absolute;
  border-radius: 25px;
  height: 4px;
  width: 10px;
  height: 10px;
  left: 0;
  z-index: 15;
  animation: move_x20 2s ease-in-out infinite;
}
.cert_progress_marker:after {
  font-family: FontAwesome;
  content: "\f04e";
  color: #00502b;
  font-size: 12px;
}

.step_ready {
  animation: load_ready 1s normal forwards;
}

.step1 {
  animation: load1 1s normal forwards;
}

.step2 {
  animation: load2 1s normal forwards;
}

.step3 {
  animation: load3 1s normal forwards;
}

@keyframes load_ready {
  0% {
    width: 0;
  }
  100% {
    width: 5%;
  }
}
@keyframes load1 {
  0% {
    width: 0;
  }
  100% {
    width: 50%;
  }
}
@keyframes load2 {
  0% {
    width: 0;
  }
  100% {
    width: 95%;
  }
}
@keyframes load3 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.ita-header {
  position: fixed;
  width: 100%;
  top: 0;
  height: 60px;
  padding: 10px;
  border-bottom: 0.5px solid grey;
}

.ita-main {
  margin-top: 60px;
  height: 100%;
  width: 100%;
}

.ita-slider-1 {
  width: 75%;
  background: url(../public/img/util/plog2.jpg) no-repeat bottom;
  margin: 0 30px;
}

.swiperBeach {
  transform: scale(0.95, 0.95);
  -webkit-transform: scale(0.95, 0.95);
  -moz-transform: scale(0.95, 0.95);
  -ms-transform: scale(0.95, 0.95);
  -o-transform: scale(0.95, 0.95);
}

.swiper-pagination0 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  text-align: center;
}
.swiper-pagination0 .swiper-pagination-bullet {
  width: 30px;
  height: 16px;
  padding: 3px 1px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: white;
  border-radius: 0px;
  font-size: 11px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination0 .swiper-pagination-bullet:hover, .swiper-pagination0 .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination0 .swiper-pagination-bullet-active {
  font-weight: 900;
  background: #00af80;
}

.swiper-pagination-main {
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  text-align: center;
  background: none;
  margin: auto;
  width: 100%;
  padding: 0 30px;
  color: black;
  display: flex;
  z-index: 10;
}
.swiper-pagination-main .swiper-pagination-bullet {
  width: auto;
  width: auto;
  width: -moz-fit-content;
  height: 25px;
  border-radius: 0;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  background-color: none;
  margin: 0px 5px;
  padding: 0px 9px;
  font-weight: 400;
  background: transparent;
  /*border-radius: 0px;
  */
  font-size: var(--font-md);
  /*background: none;
  */
  opacity: 1;
  justify-content: center;
}
.swiper-pagination-main .swiper-pagination-bullet:hover, .swiper-pagination-main .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination-main .swiper-pagination-bullet-active {
  font-weight: 600;
  border-bottom: 2px solid;
  background: none !important;
}

.swiper-pagination-B {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vw;
  text-align: center;
  background: rgba(0, 91, 163, 0.1490196078);
  margin: auto;
  width: 90vw;
  border-radius: 50px;
  color: rgba(2, 25, 41, 0.9019607843);
  display: flex;
  z-index: 10;
}
.swiper-pagination-B .swiper-pagination-bullet {
  width: 420px;
  height: 50px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  /*line-height: 2px;
  */
  /*display: flex;
  */
  font-weight: 400;
  background: transparent;
  /*border-radius: 0px;
  */
  font-size: calc(5px + 3vw);
  /*background: none;
  */
  opacity: 1;
  justify-content: center;
}
.swiper-pagination-B .swiper-pagination-bullet:hover, .swiper-pagination-B .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination-B .swiper-pagination-bullet-active {
  font-weight: 600;
  background: #003d80;
  color: white;
}

.swiper-pagination_ugsect {
  position: absolute;
  bottom: 3vh;
  left: 0;
  right: 0;
  text-align: center;
}
.swiper-pagination_ugsect .swiper-pagination-bullet {
  width: 4px;
  margin: 0px 1px;
  height: 4px;
  /* padding: 3px 2px; */
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: #c7c7c7;
  border-radius: 50%;
  font-size: 12px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination_ugsect .swiper-pagination-bullet:hover, .swiper-pagination_ugsect .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination_ugsect .swiper-pagination-bullet-active {
  font-weight: 900;
  background: #ff0202 !important;
}

.swiper-pagination_ugsect2 {
  position: absolute;
  bottom: 3vh;
  left: 0;
  right: 0;
  text-align: center;
}
.swiper-pagination_ugsect2 .swiper-pagination-bullet {
  width: 4px;
  margin: 0px 1px;
  height: 4px;
  /* padding: 3px 2px; */
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: #c7c7c7;
  border-radius: 50%;
  font-size: 12px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination_ugsect2 .swiper-pagination-bullet:hover, .swiper-pagination_ugsect2 .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination_ugsect2 .swiper-pagination-bullet-active {
  font-weight: 900;
  background: #ff0202 !important;
}

.swiper-pagination_ug {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.swiper-pagination_ug .swiper-pagination-bullet {
  width: 25%;
  height: 37px;
  padding: 10px 3px;
  /* line-height: 2px; */
  /* display: flex; */
  border-right: 1px solid;
  /* margin: 6px 0px; */
  display: inline-block;
  font-weight: 700;
  background: #ffffff;
  border-radius: 0px;
  font-size: 13px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination_ug .swiper-pagination-bullet:last-of-type {
  border: none;
}
.swiper-pagination_ug .swiper-pagination-bullet:hover, .swiper-pagination_ug .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination_ug .swiper-pagination-bullet-active {
  background: #000000;
  color: white;
}

.swiper-pagination-swiperUpload {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 25px;
}
.swiper-pagination-swiperUpload .swiper-pagination-bullet {
  width: 14px;
  height: 2px;
  margin: 0px 3px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: gainsboro;
  border-radius: 0px;
  font-size: 11px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination-swiperUpload .swiper-pagination-bullet:hover, .swiper-pagination-swiperUpload .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination-swiperUpload .swiper-pagination-bullet-active {
  font-weight: 900;
  background: var(--CSV-Color);
}

.swiper-pagination_ugsect_frac {
  position: absolute;
  bottom: 11px;
  left: 0;
  font-family: anton;
  font-size: 14px;
  right: 0;
  text-align: center;
}
.swiper-pagination_ugsect_frac .swiper-pagination-current {
  color: #04a976;
}
.swiper-pagination_ugsect_frac .swiper-pagination-total {
  color: gray;
}

.swiper-pagination1 {
  position: absolute;
  bottom: 10px;
  border: 1px solid gray;
  right: 15px;
  border-radius: 21px;
  width: 56px !important;
  color: black;
  margin: 0 auto;
  font-family: roboto !important;
  font-size: 16px;
  letter-spacing: -1px;
  /* height: 17px; */
  padding: 3px 2px;
  text-align: center;
  z-index: 10;
}
.swiper-pagination1 .swiper-pagination-current {
  color: #04a976;
}
.swiper-pagination1 .swiper-pagination-total {
  color: rgb(0, 0, 0);
}

.swiper-pagination-photo {
  position: absolute;
  top: calc(100vw + 3px);
  right: 0;
  left: 0;
  border-radius: 21px;
  width: 100%;
  color: black;
  margin: 0 auto;
  font-family: roboto !important;
  font-size: 16px;
  letter-spacing: -1px;
  /* height: 17px; */
  padding: 3px 2px;
  text-align: center;
  z-index: 10;
}
.swiper-pagination-photo .swiper-pagination-bullet {
  margin: 0 3px;
}

.swiper-pagination2 {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  border-radius: 21px;
  width: 56px !important;
  color: black;
  margin: 0 auto;
  font-family: roboto !important;
  font-size: 16px;
  letter-spacing: -1px;
  /* height: 17px; */
  padding: 3px 2px;
  text-align: center;
  z-index: 10;
}
.swiper-pagination2 .swiper-pagination-current {
  color: #04a976;
}
.swiper-pagination2 .swiper-pagination-total {
  color: rgb(0, 0, 0);
}

.swiper-button-prev-sm,
.swiper-button-next-sm {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 20px;
  margin-top: -calc(20px/2);
  z-index: 10;
  cursor: pointer;
  background-size: 13px 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-next-sm {
  right: 10px;
  left: auto;
}

.swiper-button-prev-sm {
  left: 10px;
  right: auto;
}

/* ------------------------------ 
 * Basic Pagination 
 --------------------------------*/
.swiper-pagination-basic {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
.swiper-pagination-basic .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: black;
  opacity: 0.2;
  margin: 0 3px;
}
.swiper-pagination-basic .swiper-pagination-bullet:hover, .swiper-pagination-basic .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination-basic .swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-pagination-current {
  color: #04a976;
}

.swiper-pagination-total {
  color: gray;
}

.swiper-button-prev0 {
  left: 13px;
  right: auto;
  background-image: unset;
}
.swiper-button-prev0:before {
  font-family: FontAwesome;
  content: "\f104";
  font-size: 35px;
}

.swiper-button-next0 {
  right: 13px;
  left: auto;
  background-image: unset;
}
.swiper-button-next0:before {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 35px;
}

.swiper-button-next0,
.swiper-button-prev0 {
  position: absolute;
  top: 57px;
  /* width: 33px; */
  /* height: 44px; */
  /* right: 0; */
  /* margin-top: -6px; */
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-next0:hover, .swiper-button-next0focus,
.swiper-button-prev0:hover,
.swiper-button-prev0focus {
  outline: none;
}
.swiper-button-next0.swiper-button-disabled,
.swiper-button-prev0.swiper-button-disabled {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev-insta {
  left: 13px;
  right: auto;
  background-image: unset;
}
.swiper-button-prev-insta:before {
  font-family: FontAwesome;
  content: "\f104";
  font-size: 27px;
  position: absolute;
  left: 3px;
}

.swiper-button-next-insta {
  right: 13px;
  left: auto;
  background-image: unset;
}
.swiper-button-next-insta:before {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 27px;
  position: absolute;
  right: 3px;
}

.swiper-button-prev-insta,
.swiper-button-next-insta {
  position: absolute;
  top: calc(100vw + 5px);
  color: rgb(0, 0, 0);
  /* width: 33px; */
  /* height: 44px; */
  /* right: 0; */
  /* margin-top: -6px; */
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-prev-insta:hover, .swiper-button-prev-instafocus,
.swiper-button-next-insta:hover,
.swiper-button-next-instafocus {
  outline: none;
}
.swiper-button-prev-insta.swiper-button-disabled,
.swiper-button-next-insta.swiper-button-disabled {
  opacity: 0.2;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev-insta2 {
  left: 13px;
  right: auto;
  background-image: unset;
}
.swiper-button-prev-insta2:before {
  font-family: FontAwesome;
  content: "\f104";
  font-size: 27px;
  position: absolute;
  left: 3px;
}

.swiper-button-next-insta2 {
  right: 13px;
  left: auto;
  background-image: unset;
}
.swiper-button-next-insta2:before {
  font-family: FontAwesome;
  content: "\f105";
  font-size: 27px;
  position: absolute;
  right: 3px;
}

.swiper-button-prev-insta2,
.swiper-button-next-insta2 {
  position: absolute;
  top: 0px;
  /* width: 33px; */
  /* height: 44px; */
  /* right: 0; */
  /* margin-top: -6px; */
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-prev-insta2:hover, .swiper-button-prev-insta2focus,
.swiper-button-next-insta2:hover,
.swiper-button-next-insta2focus {
  outline: none;
}
.swiper-button-prev-insta2.swiper-button-disabled,
.swiper-button-next-insta2.swiper-button-disabled {
  opacity: 0.2;
  cursor: auto;
  pointer-events: none;
}

.popinfo1 {
  opacity: 0;
  position: absolute;
  top: -38px;
  padding: 5px;
  color: #ffffff;
  background-color: #E91E63;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
}

.useralldis:after {
  content: "KM";
  margin-left: 2px;
  font-size: 15px;
  font-weight: 500;
}

.useralllap:before {
  content: "\f017";
  font-family: FontAwesome;
  margin-right: 3px;
  font-size: 18px;
}

.userallmc:before {
  content: "\f11e";
  font-family: FontAwesome;
  margin-right: 3px;
  font-size: 18px;
}

.alias {
  cursor: alias;
}

.all-scroll {
  cursor: all-scroll;
}

.auto {
  cursor: auto;
}

.cell {
  cursor: cell;
}

.context-menu {
  cursor: context-menu;
}

.col-resize {
  cursor: col-resize;
}

.copy {
  cursor: copy;
}

.crosshair {
  cursor: crosshair;
}

.default {
  cursor: default;
}

.e-resize {
  cursor: e-resize;
}

.ew-resize {
  cursor: ew-resize;
}

.grab {
  cursor: grab;
}

.grabbing {
  cursor: grabbing !important;
}

.help {
  cursor: help;
}

.move {
  cursor: move;
}

.n-resize {
  cursor: n-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.nesw-resize {
  cursor: nesw-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.nwse-resize {
  cursor: nwse-resize;
}

.no-drop {
  cursor: no-drop;
}

.not-allowed {
  cursor: not-allowed;
}

.pointer {
  cursor: pointer;
}

.progress {
  cursor: progress;
}

.row-resize {
  cursor: row-resize;
}

.s-resize {
  cursor: s-resize;
}

.se-resize {
  cursor: se-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.text {
  cursor: text;
}

.url {
  cursor: url(https://www.w3schools.com/cssref/myBall.cur), auto;
}

.w-resize {
  cursor: w-resize;
}

.wait {
  cursor: wait;
}

.zoom-in {
  cursor: zoom-in;
}

.zoom-out {
  cursor: zoom-out;
}

.newinfo1 {
  display: grid;
  background-color: #ff3728;
  line-height: 22px;
  text-align: justify;
  font-size: 2em;
  color: #fff;
  /* text-align: center; */
  white-space: pre-wrap;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  padding: 19px 21px;
  position: absolute;
  left: 0;
  /* top: 50%; */
  right: 0;
  width: 95%;
  margin: auto;
  z-index: 3;
  bottom: 10px;
  /* left: 50%;


    /* Popup arrow */
}
.newinfo1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #ff3728 transparent transparent transparent;
}

.backwards {
  position: absolute;
  /* width: 100%; */
  right: 34px;
  /* top: 0; */
  bottom: 508px;
  z-index: 50;
}
.backwards:after {
  font-family: FontAwesome;
  content: "\f177";
  font-size: 21px;
  color: white;
}

.logpanel1 {
  letter-spacing: -1px;
  display: none;
  font-weight: 100;
  background: #ffffff;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  bottom: 0;
  position: fixed;
  z-index: 100;
  color: #222;
}

#logpanel1_Close {
  position: absolute;
  z-index: 30;
  top: 20px;
  right: 7px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

#logpanel1_Open {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 2px;
}
#logpanel1_Open:after {
  position: absolute;
  font-family: FontAwesome;
  content: "\f234";
  width: 50px;
  height: 50px;
  background: #F44336;
  margin: 17px 17px 17px 0px;
  margin: auto;
  border-radius: 50%;
  padding: 9px 2px;
  text-align: center;
  animation: move_y15 3s ease-in-out infinite;
  -webkit-animation: move_y15 3s ease-in-out infinite;
  -moz-animation: move_y15 2s ease-in-out infinite;
  color: #ffffff;
  font-size: 27px;
  box-shadow: 0 0 0.75em 0 rgba(41, 53, 65, 0.541);
}

.logpanel {
  font-weight: 100;
  background: #ffffff;
  width: 100%;
  height: 370px;
  bottom: 0;
  margin: auto;
  padding-left: 0;
  position: fixed;
  z-index: 100;
  box-shadow: -9px -10px 2em 0px rgba(0, 0, 0, 0.42);
  left: -100%;
  transition: all 0.3s;
  color: #222;
  border-radius: 0 30px 30px 0;
}
.logpanel:after {
  position: absolute;
  top: 0;
  right: -45px;
  font-family: FontAwesome;
  content: "\f234";
  width: 40px;
  height: 40px;
  background: #ffffff;
  margin: auto;
  border-radius: 50%;
  border: 1px solid;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  padding: 10px 0px;
  text-align: center;
  animation: move_y15 2s ease-in-out infinite;
  color: #009688;
  font-size: 18px;
  box-shadow: 0 0 0.75em 0 rgba(46, 60, 73, 0.42);
}
.logpanel:hover, .logpanel:focus {
  animation-timing-function: 1s ease-in;
  transform: translate3d(100%, 0, 0);
}
.logpanel .logtitle {
  top: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -12px;
  font-weight: 800;
  font-size: 15px;
  transform: rotate(90deg);
}
.logpanel .lognav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 100;
}
.logpanel .lognav li {
  padding-bottom: 30px;
  list-style-type: none;
}
.logpanel .lognav li a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}
.logpanel .lognav li a:hover {
  color: #aaa;
}

.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.infoagree {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
}

#loglog1 input::-moz-placeholder {
  color: rgba(0, 80, 43, 0.4941176471);
}

#loglog1 input::placeholder {
  color: rgba(0, 80, 43, 0.4941176471);
}
#loglog1 .mission_state {
  font-size: var(--font-xl);
  border: 1px solid #aeaeae;
  color: #585858;
  padding: 12px;
  line-height: 1.6;
  font-weight: 500;
  margin-top: 5px;
  border-radius: 10px;
}

.login-wrap {
  width: 100%;
  margin: auto;
  max-width: 100%;
  min-height: 100%;
  position: relative;
  /* ------------------------------ 
   * pc 로그인 페이지 배너 
   --------------------------------*/
}
@media screen and (min-width: 992px) {
  .login-wrap {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}
.login-wrap .login-pc-banner {
  display: none;
  width: 100%;
  height: 100%;
  background: #002f19;
  color: white;
}
.login-wrap .login-pc-banner .logo {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1411764706);
  padding: 2px;
}
.login-wrap .login-pc-banner .group_title {
  letter-spacing: -0.6px;
  font-size: var(--font-4xl);
  font-weight: 500;
  padding: 10px 5px;
}
.login-wrap .login-pc-banner .login_slogan_title {
  font-size: var(--font-10xl);
  font-weight: 200;
  line-height: 1.3;
  opacity: 0.9;
}
@media screen and (min-width: 992px) {
  .login-wrap .login-pc-banner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 80px;
    gap: 10px;
  }
}

.login-html {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px 20px 0px 20px;
}

.login-findpw {
  text-decoration: underline;
  cursor: pointer;
  color: #ff5454;
  font-size: 15px;
  margin: 8px 0 8px 10px;
  font-weight: 500;
}

.login-html .sign-in-htm,
.login-html .sign-up-htm,
.login-html .sign-up-htm2,
.login-html .sign-up-htm3,
.login-html .sign-up-htm4,
.login-html .sign-up-htm-hi,
.login-html .sign-up-htm-kv,
.login-html .sign-up-htm-cj,
.login-html .sign-up-htm-ne {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 0;
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
}

.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check {
  display: none;
}

.login-html .tab,
.login-form .group .label,
.login-form .group .button {
  text-transform: uppercase;
}

.login-html .tab {
  cursor: pointer;
  color: rgba(0, 80, 43, 0.3490196078);
  font-weight: 600;
  font-size: 17px;
  /* margin-right: 18px; */
  padding-bottom: 5px;
  margin: 0px 20px 12px 11px;
  display: inline-block;
  border-bottom: 5px solid transparent;
}

.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab {
  color: #00502b;
  border-color: #00502b;
}

.login-form {
  height: calc(var(--vh, 1vh) * 100 - 100px);
  margin-top: 16px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.login-form .group {
  margin: 0px 8px 7px 7px;
  position: relative;
}

.login-form .group .label,
.login-form .group .input {
  width: 100%;
  color: #00502b;
  display: block;
}

.login-form .group .input#username,
.login-form .group .input#signuser,
.login-form .group .input#signtruename {
  color: #00502b;
}

.login-form .group .button {
  width: 100%;
  color: #00502b;
  display: block;
}

.login-form .group .input,
.login-form .group .button {
  border: none;
  font-size: var(--font-2xl);
  letter-spacing: -1px;
  padding: 8px 9px;
  border-radius: 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  background: #ffffff;
  border-bottom: 1px solid #00502b;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

#loglog1 input:focus {
  outline: none;
}
#loglog1 input:-internal-autofill-selected {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 100px #ffffff inset !important;
  color: #ffffff !important;
  font-size: var(--font-2xl);
}
#loglog1 input:-webkit-autofill,
#loglog1 input:-webkit-autofill:hover,
#loglog1 input:-webkit-autofill:focus,
#loglog1 input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #00502b !important;
  transition: background-color 5000s ease-in-out 0s;
}

.login-form .group input[data-type=password] {
  -webkit-text-security: circle;
}

.login-form .group .label {
  color: #00502b;
  font-size: var(--font-lg);
  margin: 0 1px 5px 9px;
  font-weight: 600;
  letter-spacing: -0.7px;
}

.login-form .group .button {
  color: white;
  background: #00502b;
  font-size: 18px;
  letter-spacing: -1px;
  height: 50px;
  border: 1px solid;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.login-form .group label .text {
  font-weight: 500;
  color: #00502b;
  font-size: var(--font-xl);
  position: relative;
  display: inline;
  margin-left: 5px;
}

.login-form .group label .icon {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  position: relative;
  display: inline-block;
  background: #00502b;
  transform: translateY(3px);
  -webkit-transform: translateY(3px);
  -moz-transform: translateY(3px);
  -ms-transform: translateY(3px);
  -o-transform: translateY(3px);
}

.login-form .group label .icon:before,
.login-form .group label .icon:after {
  content: "";
  width: 10px;
  height: 2px;
  background: rgb(255, 255, 255);
  position: absolute;
  transition: all 0.2s ease-in-out 0s;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
}

.login-form .group label .icon:before {
  left: 3px;
  width: 5px;
  bottom: 6px;
  transform: scale(0) rotate(0);
  -webkit-transform: scale(0) rotate(0);
  -moz-transform: scale(0) rotate(0);
  -ms-transform: scale(0) rotate(0);
  -o-transform: scale(0) rotate(0);
}

.login-form .group label .icon:after {
  top: 6px;
  right: 0;
  transform: scale(0) rotate(0);
  -webkit-transform: scale(0) rotate(0);
  -moz-transform: scale(0) rotate(0);
  -ms-transform: scale(0) rotate(0);
  -o-transform: scale(0) rotate(0);
}

.login-form .group .check:checked + label {
  color: #00502b;
  font-size: 13px;
}

.login-form .group .check:checked + label .icon {
  background: #00502b;
}

.login-form .group .check:checked + label .icon:before {
  transform: scale(1) rotate(45deg);
  -webkit-transform: scale(1) rotate(45deg);
  -moz-transform: scale(1) rotate(45deg);
  -ms-transform: scale(1) rotate(45deg);
  -o-transform: scale(1) rotate(45deg);
}

.login-form .group .check:checked + label .icon:after {
  transform: scale(1) rotate(-45deg);
  -webkit-transform: scale(1) rotate(-45deg);
  -moz-transform: scale(1) rotate(-45deg);
  -ms-transform: scale(1) rotate(-45deg);
  -o-transform: scale(1) rotate(-45deg);
}

.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm2 {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm3 {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm4 {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm-hi {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm-kv {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm-cj {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm-ne {
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

.sign-in-htm {
  display: grid;
  grid-template: "a " auto "b" 1fr "c" auto/1fr;
}
.sign-in-htm > .ga {
  grid-area: a;
}
.sign-in-htm > .gb {
  grid-area: b;
}
.sign-in-htm > .gc {
  grid-area: c;
}

.sign-up-htm {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a a a a" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c op op op" auto "c1 c1 c1 c1 c1 c1" auto "c2 c2 c2 c2 c2 c2" auto "d d d d d d" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm > .ga {
  grid-area: a;
}
.sign-up-htm > .ga1 {
  grid-area: a1;
}
.sign-up-htm > .ga2 {
  grid-area: a2;
}
.sign-up-htm > .gb {
  grid-area: b;
}
.sign-up-htm > .gb1 {
  grid-area: b1;
}
.sign-up-htm > .gc2 {
  grid-area: c2;
}
.sign-up-htm > .gc1 {
  grid-area: c1;
}
.sign-up-htm > .gc2 {
  grid-area: c2;
}
.sign-up-htm > .gop {
  grid-area: op;
}
.sign-up-htm > .gc {
  grid-area: c;
}
.sign-up-htm > .gd {
  grid-area: d;
}
.sign-up-htm > .gd1 {
  grid-area: d1;
}
.sign-up-htm > .ge {
  grid-area: e;
}
.sign-up-htm > .gf {
  grid-area: f;
}

.sign-up-htm2 {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a a a a" auto "an an an ab ab ab" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c op op op" auto "c1 c1 c1 c1 c1 c1" auto "d d d d d d" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm2 > .ga {
  grid-area: a;
}
.sign-up-htm2 > .gan {
  grid-area: an;
}
.sign-up-htm2 > .gab {
  grid-area: ab;
}
.sign-up-htm2 > .ga1 {
  grid-area: a1;
}
.sign-up-htm2 > .ga2 {
  grid-area: a2;
}
.sign-up-htm2 > .gb {
  grid-area: b;
}
.sign-up-htm2 > .gb1 {
  grid-area: b1;
}
.sign-up-htm2 > .gc2 {
  grid-area: c2;
}
.sign-up-htm2 > .gc1 {
  grid-area: c1;
}
.sign-up-htm2 > .gop {
  grid-area: op;
}
.sign-up-htm2 > .gc {
  grid-area: c;
}
.sign-up-htm2 > .gd {
  grid-area: d;
}
.sign-up-htm2 > .gd1 {
  grid-area: d1;
}
.sign-up-htm2 > .ge {
  grid-area: e;
}
.sign-up-htm2 > .gf {
  grid-area: f;
}

.sign-up-htm3 {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a a a a" auto "an an an ab ab ab" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c c c c" 50px "c1 c1 c1 c1 c1 c1" auto "d d d d d d" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm3 > .ga {
  grid-area: a;
}
.sign-up-htm3 > .gan {
  grid-area: an;
}
.sign-up-htm3 > .gab {
  grid-area: ab;
}
.sign-up-htm3 > .ga1 {
  grid-area: a1;
}
.sign-up-htm3 > .ga2 {
  grid-area: a2;
}
.sign-up-htm3 > .gb {
  grid-area: b;
}
.sign-up-htm3 > .gb1 {
  grid-area: b1;
}
.sign-up-htm3 > .gc2 {
  grid-area: c2;
}
.sign-up-htm3 > .gc1 {
  grid-area: c1;
}
.sign-up-htm3 > .gop {
  grid-area: op;
}
.sign-up-htm3 > .gc {
  grid-area: c;
}
.sign-up-htm3 > .gd {
  grid-area: d;
}
.sign-up-htm3 > .gd1 {
  grid-area: d1;
}
.sign-up-htm3 > .ge {
  grid-area: e;
}
.sign-up-htm3 > .gf {
  grid-area: f;
}

.sign-up-htm4 {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a a a a" auto "an an an an an an" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c c c c" 10px "c1 c1 c1 c1 c1 c1" auto "d d d d d d" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm4 > .ga {
  grid-area: a;
}
.sign-up-htm4 > .gan {
  grid-area: an;
}
.sign-up-htm4 > .gab {
  grid-area: ab;
}
.sign-up-htm4 > .ga1 {
  grid-area: a1;
}
.sign-up-htm4 > .ga2 {
  grid-area: a2;
}
.sign-up-htm4 > .gb {
  grid-area: b;
}
.sign-up-htm4 > .gb1 {
  grid-area: b1;
}
.sign-up-htm4 > .gc2 {
  grid-area: c2;
}
.sign-up-htm4 > .gc1 {
  grid-area: c1;
}
.sign-up-htm4 > .gop {
  grid-area: op;
}
.sign-up-htm4 > .gc {
  grid-area: c;
}
.sign-up-htm4 > .gd {
  grid-area: d;
}
.sign-up-htm4 > .gd1 {
  grid-area: d1;
}
.sign-up-htm4 > .ge {
  grid-area: e;
}
.sign-up-htm4 > .gf {
  grid-area: f;
}

.sign-up-htm-hi {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a a a a" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c c1 c1 c1" auto "d d d d d d" 10px "d d d d d d" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm-hi > .ga {
  grid-area: a;
}
.sign-up-htm-hi > .gan {
  grid-area: an;
}
.sign-up-htm-hi > .gab {
  grid-area: ab;
}
.sign-up-htm-hi > .ga1 {
  grid-area: a1;
}
.sign-up-htm-hi > .ga2 {
  grid-area: a2;
}
.sign-up-htm-hi > .gb {
  grid-area: b;
}
.sign-up-htm-hi > .gb1 {
  grid-area: b1;
}
.sign-up-htm-hi > .gc2 {
  grid-area: c2;
}
.sign-up-htm-hi > .gc1 {
  grid-area: c1;
}
.sign-up-htm-hi > .gop {
  grid-area: op;
}
.sign-up-htm-hi > .gc {
  grid-area: c;
}
.sign-up-htm-hi > .gd {
  grid-area: d;
}
.sign-up-htm-hi > .gd1 {
  grid-area: d1;
}
.sign-up-htm-hi > .ge {
  grid-area: e;
}
.sign-up-htm-hi > .gf {
  grid-area: f;
}

.sign-up-htm-kv {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a an an an" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c op op op" auto "c1 c1 c1 c2 c2 c2" auto "c3 c3 c3 c3 c3 c3" auto "d d d d d d" auto "p p p p p p" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm-kv > .ga {
  grid-area: a;
}
.sign-up-htm-kv > .gan {
  grid-area: an;
}
.sign-up-htm-kv > .gab {
  grid-area: ab;
}
.sign-up-htm-kv > .ga1 {
  grid-area: a1;
}
.sign-up-htm-kv > .ga2 {
  grid-area: a2;
}
.sign-up-htm-kv > .gb {
  grid-area: b;
}
.sign-up-htm-kv > .gb1 {
  grid-area: b1;
}
.sign-up-htm-kv > .gc2 {
  grid-area: c2;
}
.sign-up-htm-kv > .gc3 {
  grid-area: c3;
}
.sign-up-htm-kv > .gc1 {
  grid-area: c1;
}
.sign-up-htm-kv > .gop {
  grid-area: op;
}
.sign-up-htm-kv > .gc {
  grid-area: c;
}
.sign-up-htm-kv > .gd {
  grid-area: d;
}
.sign-up-htm-kv > .gd1 {
  grid-area: d1;
}
.sign-up-htm-kv > .gp {
  grid-area: p;
}
.sign-up-htm-kv > .ge {
  grid-area: e;
}
.sign-up-htm-kv > .gf {
  grid-area: f;
}

.sign-up-htm-cj {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a a a a" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c op op op" auto "c1 c1 c1 c2 c2 c2" auto "c3 c3 c3 c3 c3 c3" auto "d d d d d d" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm-cj > .ga {
  grid-area: a;
}
.sign-up-htm-cj > .gan {
  grid-area: an;
}
.sign-up-htm-cj > .gab {
  grid-area: ab;
}
.sign-up-htm-cj > .ga1 {
  grid-area: a1;
}
.sign-up-htm-cj > .ga2 {
  grid-area: a2;
}
.sign-up-htm-cj > .gb {
  grid-area: b;
}
.sign-up-htm-cj > .gb1 {
  grid-area: b1;
}
.sign-up-htm-cj > .gc2 {
  grid-area: c2;
}
.sign-up-htm-cj > .gc3 {
  grid-area: c3;
}
.sign-up-htm-cj > .gc1 {
  grid-area: c1;
}
.sign-up-htm-cj > .gop {
  grid-area: op;
}
.sign-up-htm-cj > .gc {
  grid-area: c;
}
.sign-up-htm-cj > .gd {
  grid-area: d;
}
.sign-up-htm-cj > .gd1 {
  grid-area: d1;
}
.sign-up-htm-cj > .ge {
  grid-area: e;
}
.sign-up-htm-cj > .gf {
  grid-area: f;
}

.sign-up-htm-ne {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template: "a a a an an an" auto "a1 a1 a1 a2 a2 a2" auto "b b b b1 b1 b1" auto "c c c op op op" auto "c1 c1 c1 c2 c2 c2" auto "c3 c3 c3 c4 c4 c4" auto "d d d d d d" 1fr "e e e e e e" auto/1fr 1fr 1fr 1fr 1fr 1fr;
}
.sign-up-htm-ne > .ga {
  grid-area: a;
}
.sign-up-htm-ne > .gan {
  grid-area: an;
}
.sign-up-htm-ne > .gab {
  grid-area: ab;
}
.sign-up-htm-ne > .ga1 {
  grid-area: a1;
}
.sign-up-htm-ne > .ga2 {
  grid-area: a2;
}
.sign-up-htm-ne > .gb {
  grid-area: b;
}
.sign-up-htm-ne > .gb1 {
  grid-area: b1;
}
.sign-up-htm-ne > .gc2 {
  grid-area: c2;
}
.sign-up-htm-ne > .gc3 {
  grid-area: c3;
}
.sign-up-htm-ne > .gc4 {
  grid-area: c4;
}
.sign-up-htm-ne > .gc1 {
  grid-area: c1;
}
.sign-up-htm-ne > .gop {
  grid-area: op;
}
.sign-up-htm-ne > .gc {
  grid-area: c;
}
.sign-up-htm-ne > .gd {
  grid-area: d;
}
.sign-up-htm-ne > .gd1 {
  grid-area: d1;
}
.sign-up-htm-ne > .ge {
  grid-area: e;
}
.sign-up-htm-ne > .gf {
  grid-area: f;
}

#signentry,
#signemployee {
  /*ios대응*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  color: #00502b;
  /*화살표 배경 넣기*/
  background: url(../public/img/util/arrowdown.svg) no-repeat 96% 52%;
  background-size: 15px 16px;
  /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
#signentry option,
#signemployee option {
  color: black;
}
#signentry.no-arrow,
#signemployee.no-arrow {
  background: none;
}

#mapbranch {
  /*ios대응*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*ios대응*/
  border-radius: 20px;
  width: 100px;
  text-align: center;
  border: 2px solid;
  letter-spacing: -0.4px;
  font-weight: 500;
  /*border-bottom: 1px solid white;  */
  background: transparent;
  color: white;
  padding: 8px 11px 8px 11px;
  font-size: 13px;
  /*background: url(../public/img/util/arrowdown_white.svg) no-repeat 84% 53%; */
  /*background-size: 15px 16px;

  }

    /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
#mapbranch:focus {
  outline: none;
}
#mapbranch > option {
  text-align: center;
  font-size: 15px;
  color: black;
  background-color: transparent;
}

select::-ms-expand {
  display: none;
  /* 화살표 없애기 for IE10, 11*/
}

input {
  /*ios대응*/
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
}

.hr {
  height: 2px;
  margin: 10px 0 20px 0;
  background: rgba(0, 129, 0, 0.747);
}

.foot-lnk {
  text-align: center;
  font-size: 13px !important;
}

.plogging-timer-container {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}

.timecount {
  padding: 4px 11px;
  letter-spacing: -1px;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  border-radius: 35px;
}

.timecount-loadbar {
  padding: 7px 11px;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  text-align: center;
  left: 0;
  position: relative;
  top: 3px;
  right: 0;
  margin: auto;
  background: white;
  z-index: 110;
  border-radius: 35px;
}

.msg {
  text-align: center;
  font-size: 14px;
  display: grid;
  align-items: center;
  background: white;
  width: 100%;
  height: 100%;
  border-radius: 0 0 30px 30px;
  border-radius: 0 0 30px 30px;
}

.msg1 {
  text-align: center;
  font-size: 14px;
  display: -ms-grid;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* display: grid; */
  /* -webkit-box-align: center; */
  -ms-flex-align: center;
  /* align-items: center; */
  /* background: white; */
  width: 100%;
  height: 100%;
  border-radius: 0 0 30px 30px;
  -webkit-border-radius: 0 0 30px 30px;
  -moz-border-radius: 0 0 30px 30px;
  -ms-border-radius: 0 0 30px 30px;
  -o-border-radius: 0 0 30px 30px;
}

.has_u_error,
.has_p_error {
  border: 1px solid rgba(255, 0, 13, 0.596) !important;
  display: block;
}

#userauth,
#passauth,
#sign_u_auth,
#sign_p_auth,
#sign_p1_auth,
#sign_c_auth,
.server_error {
  margin-left: 0px;
  margin-top: 5px;
  font-size: 12px;
  color: #ff493c;
  font-weight: 600;
}

.startbtn {
  position: absolute;
}

.ev-1,
.ev-2,
.ev-3,
.ev-4,
.ev-7,
.ev-w-1 {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  z-index: 3;
}

.ev-1 {
  background: #d6e806 url(../public/img/activity/ev1.png) bottom no-repeat;
  background-size: cover;
}

.ev-2 {
  background: #15ae67 url(../public/img/activity/ev2.png) bottom no-repeat;
  background-size: cover;
}

.ev-3 {
  filter: brightness(0.75);
  background: #d6e806 url(../public/img/util/plog1.png) center no-repeat;
  background-size: cover;
  -webkit-filter: brightness(0.75);
}

.ev-4 {
  background: white;
  background-size: cover;
}
.ev-4:after {
  position: absolute;
  z-index: 3;
  background: rgba(0, 0, 0, 0.418);
}

.ev-5 {
  background: #dddddd url(../public/img/activity/ev4.png) top no-repeat;
  background-size: cover;
}

.ev-7 {
  background: #ffffff url(../public/img/util/plog2.jpg) center no-repeat;
  background-size: 200%;
}

.ev-8 {
  background: #ffffff url(../public/img/ver2_main011.jpg) bottom no-repeat;
  background-size: contain;
}

.ev-w-1 {
  background: #d8d3bf url(../public/img/water/page_01.jpg) center no-repeat;
  background-size: contain;
}

.loader0 {
  z-index: 50;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border: 4px solid var(--CSV-Color);
  border-radius: 50%;
  border-top: 4px solid white;
  width: 30px;
  height: 30px;
  animation: rotate 0.5s ease infinite;
}

.loader1 {
  z-index: 50;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border: 4px solid #22db93;
  border-radius: 50%;
  border-top: 4px solid white;
  width: 30px;
  height: 30px;
  animation: rotate 0.5s ease infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Popup container - can be anything you want */
/* The actual popup */
.popuptext {
  display: none;
  background-color: #ff4c3a;
  line-height: 25px;
  text-align: justify;
  font-size: 14px;
  letter-spacing: -1.1px;
  color: #fff;
  /* text-align: center; */
  white-space: pre-wrap;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  padding: 19px 21px;
  position: absolute;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  z-index: 50;
  bottom: 170px;
  /* left: 50%; */
  /* margin-left: -80px;


    /* Popup arrow */
}
.popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #ff3728 transparent transparent transparent;
}

.popuptext_ug {
  display: none;
  background-color: #ff3728;
  line-height: 22px;
  text-align: justify;
  color: #fff;
  /* text-align: center; */
  white-space: pre-wrap;
  animation: pop-out1 2.5s ease-in-out infinite forwards;
  border-radius: 5px;
  padding: 19px 21px;
  position: absolute;
  left: 0;
  right: 0;
  width: 248px;
  margin: auto;
  z-index: 3;
  bottom: 161px;
  /* left: 50%; */
  /* margin-left: -80px;


    /* Popup arrow */
}
.popuptext_ug::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #ff3728 transparent transparent transparent;
}

.popuptext_voice {
  display: none;
  background-color: rgba(255, 255, 255, 0.5803921569);
  /* filter: blur(1px); */
  line-height: 22px;
  letter-spacing: -1.5px;
  font-size: 30px;
  z-index: 30;
  text-align: center;
  color: red;
  /* text-align: center; */
  white-space: pre-wrap;
  border-radius: 5px;
  -webkit-border-radius: 42px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  padding: 23px 13px;
  position: absolute;
  height: 70px;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
  /* z-index: 3; */
  top: 62px;
  /* left: 50%;

  /* left: 50%; */
  /* margin-left: -80px;


  // 	microphone	f130
      /* Popup arrow */
}

.popuptext_msg0 {
  display: none;
  background-color: #ff5454;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  white-space: pre-wrap;
  box-shadow: 0 0 0.5em 0.5em rgba(0, 0, 0, 0.267);
  border-radius: 5px;
  padding: 22px 21px;
  position: absolute;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  z-index: 3;
  bottom: 161px;
  /* left: 50%;

  /* left: 50%; */
  /* margin-left: -80px;


    /* Popup arrow */
}

.notice_msg_basic {
  z-index: 100;
  display: none;
  background-color: #f44336;
  line-height: 26px;
  text-align: center;
  font-size: 16px;
  letter-spacing: -1px;
  line-height: 1.5;
  color: #fff;
  padding: 22px 21px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
  bottom: 0px;
}

.notice_panel_preventBack {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 500;
}
.notice_panel_preventBack .notice_msg_preventBack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  line-height: 26px;
  text-align: center;
  font-size: calc(1.2vw + 11px);
  letter-spacing: -0.9px;
  line-height: 1.5;
  color: black;
  padding: 22px 21px;
  position: absolute;
  left: 0;
  right: 0;
  width: 94%;
  height: calc(10vw + 83px);
  border-radius: 20px;
  box-shadow: 1px 1px 12px 1px rgba(0, 0, 0, 0.2);
  margin: auto;
  bottom: 12px;
}
.notice_panel_preventBack .notice_msg_preventBack .preventBackMsg {
  align-self: start;
  display: flex;
}
.notice_panel_preventBack .notice_msg_preventBack .preventBackBox {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.notice_panel_preventBack .notice_msg_preventBack .preventBackBox .preventBackText {
  display: flex;
  justify-content: center;
  font-size: calc(1.2vw + 11px);
  color: #ff5b5b;
  font-weight: 700;
}

.popuptext_msg_autostop {
  z-index: 100;
  display: none;
  background-color: #ff5454;
  line-height: 26px;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  white-space: pre-wrap;
  box-shadow: 0 0 0.5em 0.5em rgba(0, 0, 0, 0.267);
  border-radius: 10px;
  padding: 22px 21px;
  position: absolute;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  bottom: 161px;
  /* left: 50%;

  /* left: 50%; */
  /* margin-left: -80px;


    /* Popup arrow */
}

.popuptext_msg_notApproved {
  z-index: 100;
  display: none;
  background-color: #6758ff;
  text-align: left;
  font-size: calc(9px + 1vw);
  padding: 6vw 20px;
  line-height: 1.8;
  color: #fff;
  box-shadow: 0 1px 7px 1px rgba(0, 0, 0, 0.1098039216);
  border-radius: 20px 20px 20px 0;
  position: absolute;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  bottom: 210px;
}

/* Toggle this class - hide and show the popup */
.show {
  display: block !important;
  animation: fade-In 1s;
}

.blink-loader {
  display: block;
  animation: pop-out1 2s linear infinite forwards;
}

.min10-alarm {
  display: block;
  animation: pop-out1 3s linear infinite forwards;
}

.min30-alarm {
  display: block;
  animation: pop-out1 2s linear 4 forwards;
}

/* Add animation (fade in the popup) */
@keyframes fade-In {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.nextstep_r {
  position: absolute;
  width: 15px;
  height: 83px;
  bottom: 22px;
  background: #ff3d2f;
  right: 0px;
  font-size: 15px;
  box-shadow: 0 0 1em 0 rgba(116, 116, 116, 0.631372549);
  animation: move_x5 4s ease-in-out infinite;
  border-radius: 12px 0px 0px 12px;
}
.nextstep_r:after {
  color: white;
  content: "";
}

.nextstep_r1 {
  position: absolute;
  width: 60px;
  height: 60px;
  /* right: -2px; */
  z-index: 3;
  bottom: 61px;
  /* background: #ff3d2f; */
  right: -30px;
  border-radius: 50%;
  font-size: 15px;
  box-shadow: 0 0 0.6em 0 rgba(116, 116, 116, 0.631372549);
  /* box-shadow: 0 0 1em 0 #747474a1; */
}
.nextstep_r1:before {
  color: black;
  content: "\f083";
  font-family: FontAwesome;
  position: absolute;
  top: 21px;
  left: -4px;
  font-size: 18px;
}
.nextstep_r1:after {
  color: black;
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  top: 13px;
  left: 17px;
  font-size: 28px;
}

.popuptext2 {
  position: absolute;
  display: flex;
  width: 100px;
  height: 100px;
  bottom: 22px;
  padding: 15px;
  color: white;
  border-radius: 50%;
  /* border-radius: 12px 0px 0px 12px; */
  background: #ff3d2f;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 55;
  font-size: 15px;
  box-shadow: 0 0 1em 0 rgba(94, 94, 94, 0.631372549);
}
.popuptext2:before {
  content: "\f122";
  font-size: 22px;
  top: 19px;
  left: 39px;
  position: absolute;
  font-family: FontAwesome;
}

.popuptext_end {
  position: absolute;
  display: flex;
  width: 100px;
  height: 100px;
  bottom: 22px;
  padding: 15px;
  color: white;
  border-radius: 50%;
  /* border-radius: 12px 0px 0px 12px; */
  background: #ff3d2f;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 55;
  font-size: 15px;
  box-shadow: 0 0 1em 0 rgba(94, 94, 94, 0.631372549);
}
.popuptext_end:before {
  content: "\f122";
  font-size: 22px;
  top: 19px;
  left: 39px;
  position: absolute;
  font-family: FontAwesome;
}

.popuptext1 {
  position: absolute;
  width: 54px;
  height: 54px;
  bottom: 66px;
  /* padding: 10px; */
  color: rgb(255, 255, 255);
  border-radius: 50%;
  /* border-radius: 12px 0px 0px 12px; */
  right: 33px;
  z-index: 5;
  font-size: 15px;
  box-shadow: 0.1em 0.1em 2em 0em rgba(0, 0, 0, 0.3215686275);
}
.popuptext1:before {
  content: "\f25a";
  font-size: 21px;
  top: 10px;
  left: 16px;
  position: absolute;
  font-family: FontAwesome;
}
.popuptext1:after {
  content: "사용법";
  /* padding: 9px; */
  position: absolute;
  top: 36px;
  top: 34px;
  left: 13px;
  font-size: 10px;
}

.popuptext11 {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 80px;
  background: #fffc0d;
  /* padding: 10px; */
  color: black;
  border-radius: 50%;
  /* border-radius: 12px 0px 0px 12px; */
  right: 49px;
  z-index: 5;
  font-size: 15px;
  animation: move_y15 4s ease-in-out infinite;
  -webkit-animation: move_y15 4s ease-in-out infinite;
  -moz-animation: move_y15 4s ease-in-out infinite;
  box-shadow: 0 0 0.75em 0 rgba(41, 53, 65, 0.541);
}
.popuptext11:before {
  content: "\f25a";
  font-size: 22px;
  top: 7px;
  left: 15px;
  position: absolute;
  font-family: FontAwesome;
}
.popuptext11:after {
  content: "사용법";
  /* padding: 9px; */
  position: absolute;
  top: 36px;
  top: 32px;
  left: 11px;
  font-size: 10px;
}

.popuptext_n {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 80px;
  background: #fffc0d;
  /* padding: 10px; */
  color: black;
  border-radius: 50%;
  /* border-radius: 12px 0px 0px 12px; */
  right: 49px;
  z-index: 5;
  font-size: 15px;
  animation: move_y15 4s ease-in-out infinite;
  -webkit-animation: move_y15 4s ease-in-out infinite;
  -moz-animation: move_y15 4s ease-in-out infinite;
  box-shadow: 0 0 0.75em 0 rgba(41, 53, 65, 0.541);
}
.popuptext_n:before {
  content: "\f25a";
  font-size: 22px;
  top: 7px;
  left: 15px;
  position: absolute;
  font-family: FontAwesome;
}
.popuptext_n:after {
  content: "사용법";
  /* padding: 9px; */
  position: absolute;
  top: 36px;
  top: 32px;
  left: 11px;
  font-size: 10px;
}

.aaaa .bbbbb {
  -webkit-text-emphasis: none;
          text-emphasis: none;
}

.aaaa {
  position: relative;
}
.aaaa.bbbbb {
  -webkit-text-emphasis: none;
          text-emphasis: none;
}

.ug_msg_box {
  display: none;
  background-color: #ff4739;
  line-height: 34px;
  text-align: justify;
  color: #fff;
  /* text-align: center; */
  white-space: pre-wrap;
  animation: pop-out1 2.5s ease-in-out 2 forwards;
  border-radius: 5px;
  padding: 19px 21px;
  position: absolute;
  left: 0;
  right: 0;
  font-size: 25px;
  top: 0;
  text-align: center;
  width: 100%;
  margin: auto;
  z-index: 20;
  z-index: 13;
  /* bottom: 400px; */
  /* left: 50%;
  /* left: 50%; */
  /* margin-left: -80px;


    /* Popup arrow */
}
.ug_msg_box::after {
  content: "";
  position: absolute;
  top: 98%;
  left: 50%;
  margin-left: -17px;
  border-width: 17px;
  border-style: solid;
  border-color: #ff3728 transparent transparent transparent;
}

.ug_info_box {
  width: 34vh;
  color: #000000;
  font-weight: 500;
  height: 30px;
  /*  */
  margin: auto;
  /* border-radius: 50%; */
  position: absolute;
  border-radius: 28px;
  /* border: none; */
  font-size: 15px;
  right: 0;
  bottom: 19px;
  left: 0;
  text-align: center;
  padding: 6px 9px 0 9px;
  /* left: 39px; */
  top: 0px;
}

.howto_frame {
  width: 100%;
  height: 98%;
  z-index: 5;
  position: absolute;
  background: url(../public/img/howto/phoneframe.png) no-repeat center;
  background-size: contain;
  pointer-events: none;
}

.howto_HI1-1 {
  background: url("../public/img/howto_HI/1-1.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-1 {
  background: url("../public/img/howto_NE/1-1.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-2 {
  background: url("../public/img/howto_HI/1-2.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-2 {
  background: url("../public/img/howto_NE/1-2.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-3 {
  background: url("../public/img/howto_HI/1-3.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-3 {
  background: url("../public/img/howto_NE/1-3.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-4 {
  background: url("../public/img/howto_HI/1-4.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-4 {
  background: url("../public/img/howto_NE/1-4.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-5 {
  background: url("../public/img/howto_HI/1-5.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-5 {
  background: url("../public/img/howto_NE/1-5.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-6 {
  background: url("../public/img/howto_HI/1-6.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-6 {
  background: url("../public/img/howto_NE/1-6.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-7 {
  background: url("../public/img/howto_HI/1-7.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-7 {
  background: url("../public/img/howto_NE/1-7.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-8 {
  background: url("../public/img/howto_HI/1-8.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-8 {
  background: url("../public/img/howto_NE/1-8.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-9 {
  background: url("../public/img/howto_HI/1-9.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-9 {
  background: url("../public/img/howto_NE/1-9.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-10 {
  background: url("../public/img/howto_HI/1-10.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-10 {
  background: url("../public/img/howto_NE/1-10.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-11 {
  background: url("../public/img/howto_HI/1-11.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-11 {
  background: url("../public/img/howto_NE/1-11.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI1-12 {
  background: url("../public/img/howto_HI/1-12.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE1-12 {
  background: url("../public/img/howto_NE/1-12.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-1 {
  background: url("../public/img/howto_HI/2-1.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-1 {
  background: url("../public/img/howto_NE/2-1.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-2 {
  background: url("../public/img/howto_HI/2-2.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-2 {
  background: url("../public/img/howto_NE/2-2.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-3 {
  background: url("../public/img/howto_HI/2-3.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-3 {
  background: url("../public/img/howto_NE/2-3.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-4 {
  background: url("../public/img/howto_HI/2-4.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-4 {
  background: url("../public/img/howto_NE/2-4.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-5 {
  background: url("../public/img/howto_HI/2-5.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-5 {
  background: url("../public/img/howto_NE/2-5.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-6 {
  background: url("../public/img/howto_HI/2-6.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-6 {
  background: url("../public/img/howto_NE/2-6.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-7 {
  background: url("../public/img/howto_HI/2-7.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-7 {
  background: url("../public/img/howto_NE/2-7.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-8 {
  background: url("../public/img/howto_HI/2-8.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-8 {
  background: url("../public/img/howto_NE/2-8.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-9 {
  background: url("../public/img/howto_HI/2-9.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-9 {
  background: url("../public/img/howto_NE/2-9.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-10 {
  background: url("../public/img/howto_HI/2-10.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-10 {
  background: url("../public/img/howto_NE/2-10.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-11 {
  background: url("../public/img/howto_HI/2-11.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-11 {
  background: url("../public/img/howto_NE/2-11.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI2-12 {
  background: url("../public/img/howto_HI/2-12.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE2-12 {
  background: url("../public/img/howto_NE/2-12.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-1 {
  background: url("../public/img/howto_HI/3-1.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-1 {
  background: url("../public/img/howto_NE/3-1.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-2 {
  background: url("../public/img/howto_HI/3-2.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-2 {
  background: url("../public/img/howto_NE/3-2.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-3 {
  background: url("../public/img/howto_HI/3-3.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-3 {
  background: url("../public/img/howto_NE/3-3.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-4 {
  background: url("../public/img/howto_HI/3-4.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-4 {
  background: url("../public/img/howto_NE/3-4.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-5 {
  background: url("../public/img/howto_HI/3-5.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-5 {
  background: url("../public/img/howto_NE/3-5.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-6 {
  background: url("../public/img/howto_HI/3-6.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-6 {
  background: url("../public/img/howto_NE/3-6.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-7 {
  background: url("../public/img/howto_HI/3-7.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-7 {
  background: url("../public/img/howto_NE/3-7.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-8 {
  background: url("../public/img/howto_HI/3-8.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-8 {
  background: url("../public/img/howto_NE/3-8.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-9 {
  background: url("../public/img/howto_HI/3-9.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-9 {
  background: url("../public/img/howto_NE/3-9.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-10 {
  background: url("../public/img/howto_HI/3-10.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-10 {
  background: url("../public/img/howto_NE/3-10.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-11 {
  background: url("../public/img/howto_HI/3-11.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-11 {
  background: url("../public/img/howto_NE/3-11.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI3-12 {
  background: url("../public/img/howto_HI/3-12.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE3-12 {
  background: url("../public/img/howto_NE/3-12.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-1 {
  background: url("../public/img/howto_HI/4-1.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-1 {
  background: url("../public/img/howto_NE/4-1.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-2 {
  background: url("../public/img/howto_HI/4-2.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-2 {
  background: url("../public/img/howto_NE/4-2.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-3 {
  background: url("../public/img/howto_HI/4-3.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-3 {
  background: url("../public/img/howto_NE/4-3.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-4 {
  background: url("../public/img/howto_HI/4-4.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-4 {
  background: url("../public/img/howto_NE/4-4.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-5 {
  background: url("../public/img/howto_HI/4-5.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-5 {
  background: url("../public/img/howto_NE/4-5.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-6 {
  background: url("../public/img/howto_HI/4-6.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-6 {
  background: url("../public/img/howto_NE/4-6.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-7 {
  background: url("../public/img/howto_HI/4-7.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-7 {
  background: url("../public/img/howto_NE/4-7.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-8 {
  background: url("../public/img/howto_HI/4-8.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-8 {
  background: url("../public/img/howto_NE/4-8.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-9 {
  background: url("../public/img/howto_HI/4-9.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-9 {
  background: url("../public/img/howto_NE/4-9.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-10 {
  background: url("../public/img/howto_HI/4-10.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-10 {
  background: url("../public/img/howto_NE/4-10.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-11 {
  background: url("../public/img/howto_HI/4-11.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-11 {
  background: url("../public/img/howto_NE/4-11.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_HI4-12 {
  background: url("../public/img/howto_HI/4-12.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto_NE4-12 {
  background: url("../public/img/howto_NE/4-12.svg") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.howto1-1:after {
  position: absolute;
  width: 20%;
  height: 20%;
  bottom: 7px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  background: rgba(239, 255, 0, 0.7607843137);
  animation-name: pulse;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  box-shadow: 0em 0em 0.4em 0.3em rgba(0, 0, 0, 0.31);
}

.ug_next_frame {
  position: relative;
  width: 100%;
  transform: translateY(40px);
  overflow: hidden;
  pointer-events: none;
  background: url("../public/img/howto/empty_position_frame.png") no-repeat center;
  background-size: contain;
}
.ug_next_frame.ht88 {
  height: 88%;
}

.ug_next_btn1 {
  position: absolute;
  right: 0;
  border: 0.5px solid rgba(45, 111, 71, 0.5607843137);
  box-sizing: content-box;
  cursor: none;
  background: url(../public/img/util/ug_hand.svg) no-repeat center;
  background-size: 19%;
  background-position: 79% 85%;
  margin: auto;
  border-radius: 50%;
  animation-name: heartbeat1;
  animation-duration: 1.7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  box-shadow: 0em 0em 0.8em 0.3em rgba(0, 0, 0, 0.41);
}
.ug_next_btn1:after {
  background: url(../public/img/util/ug_hand.svg) no-repeat center;
  width: 10px;
  position: absolute;
  bottom: 1vh;
  right: 1vh;
  font-size: 2vh;
}
.ug_next_btn1.bt11 {
  width: 20%;
  padding-top: 20%;
  top: 8%;
  left: -64%;
}
.ug_next_btn1.bt12 {
  width: 20%;
  padding-top: 20%;
  top: 8%;
  left: -31%;
}
.ug_next_btn1.bt13 {
  width: 35%;
  padding-top: 35%;
  bottom: 9%;
  left: 0;
}
.ug_next_btn1.bt14 {
  width: 35%;
  padding-top: 35%;
  bottom: 15%;
  left: 0;
}
.ug_next_btn1.bt15 {
  width: 35%;
  padding-top: 35%;
  bottom: 15%;
  left: 0;
}
.ug_next_btn1.bt16 {
  width: 35%;
  padding-top: 35%;
  bottom: 15%;
  left: 0;
}
.ug_next_btn1.bt17 {
  width: 35%;
  padding-top: 35%;
  bottom: 36%;
  left: 0;
}
.ug_next_btn1.bt18 {
  width: 35%;
  padding-top: 35%;
  bottom: 15%;
  left: -68%;
}
.ug_next_btn1.bt19 {
  width: 35%;
  padding-top: 35%;
  bottom: 9%;
  left: 0;
}
.ug_next_btn1.bt110 {
  width: 35%;
  padding-top: 35%;
  bottom: 15%;
  left: 65%;
}
.ug_next_btn1.bt21 {
  width: 20%;
  padding-top: 20%;
  top: 8%;
  left: -64%;
}
.ug_next_btn1.bt22 {
  width: 35%;
  padding-top: 35%;
  bottom: 25%;
  left: -66%;
}
.ug_next_btn1.bt23 {
  width: 35%;
  padding-top: 35%;
  bottom: 9%;
  left: 0;
}
.ug_next_btn1.bt24 {
  width: 20%;
  padding-top: 20%;
  top: 20%;
  left: -24%;
}
.ug_next_btn1.bt31 {
  width: 35%;
  padding-top: 35%;
  bottom: 26%;
  left: 68%;
}
.ug_next_btn1.bt32 {
  width: 20%;
  padding-top: 20%;
  top: 14%;
  left: 0%;
}
.ug_next_btn1.bt33 {
  width: 20%;
  padding-top: 20%;
  top: 14%;
  left: 65%;
}
.ug_next_btn1.bt_swipe {
  animation-name: move_x20;
  -webkit-animation-name: move_x20;
}

.datatitle {
  padding: 20px 33px;
  font-size: 20px;
  border-bottom: 1px solid rgb(82, 82, 82);
}

#gps_status {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-weight: lighter;
  font-size: 15px;
  list-style: none;
  overflow: auto;
  overflow-x: hidden;
}
#gps_status li {
  box-sizing: border-box;
  padding: 10px 50px 10px 15px;
  display: block;
  width: 100%;
  min-height: 40px;
  color: #000000;
  line-height: 20px;
  text-decoration: none;
  border-bottom: solid 1px #ccc;
}
#gps_status.gps_process li:last-child {
  background-image: url(../public/img/util/progress.gif);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: right 15px center;
}
#gps_status.done li:last-child {
  font-weight: bold;
}
#gps_status.error li:last-child {
  font-weight: bold;
  color: red;
}

.stat_boards {
  position: absolute;
  display: grid;
  grid-template: "a b " 1fr/auto auto;
  width: 86%;
  height: 30px;
  top: 56px;
  /* padding: 10px; */
  color: black;
  /* border-radius: 50%; */
  border-radius: 18px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  font-size: 15px;
}
.stat_boards > * {
  display: flex;
  position: relative;
}
.stat_boards > .ga {
  grid-area: a;
}
.stat_boards > .gb {
  grid-area: b;
}
.stat_boards > .gc {
  grid-area: c;
}

.stat_infopanel {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  position: absolute;
  top: 88px;
  font-size: 17px;
  letter-spacing: -0.3px;
  right: 0;
  left: 0;
  padding: 24px 24px;
  max-height: 100%;
  overflow: hidden;
  outline: none;
  z-index: 10;
}
.stat_infopanel:after {
  content: "\f103";
  font-family: FontAwesome;
  position: absolute;
  right: 31px;
  top: 25px;
  letter-spacing: -0.6px;
  color: var(--CSV-Color);
  font-size: 19px;
  line-height: 15px;
}
.stat_infopanel.active:after {
  content: "\f102";
  font-family: FontAwesome;
  position: absolute;
  right: 31px;
  top: 25px;
  letter-spacing: -0.6px;
  color: var(--CSV-Color);
  font-size: 19px;
  line-height: 15px;
}
.stat_infopanel .stat_infopanel_content {
  display: none;
  max-height: 100%;
  margin-top: 72px;
  padding: 21px 28px;
  font-size: 3.9vw;
  white-space: nowrap;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.431372549);
  color: white;
  background: var(--CSV-Color);
  font-weight: 400;
  -webkit-backdrop-filter: blur(31px);
  backdrop-filter: blur(31px);
  line-height: 7.25px;
  word-break: break-all;
  text-align: justify;
  box-shadow: 1px 1px 12px 3px rgba(0, 88, 34, 0.1215686275);
}
.stat_infopanel .stat_infopanel_content.wrap {
  white-space: pre-line;
}

.stat_boards {
  position: absolute;
  display: grid;
  grid-template: "a " 100px/1fr;
  width: 95%;
  top: 65px;
  padding: 10px 16px;
  color: black;
  /* border-radius: 50%; */
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  font-size: 15px;
  overflow: hidden;
  color: var(--CSV-Color);
}
.stat_boards > * {
  display: grid;
  position: relative;
  margin-bottom: 0px;
}
.stat_boards > .ga {
  grid-area: a;
  width: 100%;
  justify-content: center;
}
.stat_boards > .gb {
  grid-area: b;
}
.stat_boards > .gc {
  grid-area: c;
}
.stat_boards > .gd {
  grid-area: d;
}

.statlogo_jupsum {
  width: 36px;
  height: 36px;
  margin: 10px 0;
  background: url(../public/img/trash_stat_01.svg) center no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
}

.statlogo_jupdis {
  width: 25px;
  height: 25px;
  margin-right: 6px;
  background: url(../public/img/util/run2.svg) center no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
}

.statlogo_juplap {
  width: 25px;
  height: 25px;
  background: url(../public/img/util/plastic-bag_1.svg) center no-repeat;
  background-size: contain;
  background-position: 50%;
  /* border-radius: 50%; */
  color: white;
}

.stat_jupsum {
  color: white;
  letter-spacing: -0.5px;
}
.stat_jupsum:after {
  content: "깨끗하게";
  font-size: 11px;
  position: absolute;
  bottom: 11px;
  padding-left: 2px;
}

.stat_jupsum2 {
  color: black;
  letter-spacing: -0.3px;
}
.stat_jupsum2:after {
  font-size: 11px;
  position: absolute;
  bottom: 11px;
  padding-left: 2px;
}

.stat_jupdis {
  color: black;
  letter-spacing: -0.5px;
}
.stat_jupdis:after {
  content: "걸음 활동";
  font-size: 11px;
  position: absolute;
  bottom: 11px;
  padding-left: 2px;
}

.stat_juplap {
  color: black;
}
.stat_juplap:after {
  content: "시간의 봉사";
  font-size: 11px;
  position: absolute;
  bottom: 11px;
  padding-left: 2px;
}

.stat_jupwho {
  color: black;
}
.stat_jupwho:after {
  content: "명의 봉사자";
  font-size: 11px;
  position: absolute;
  bottom: 11px;
  padding-left: 2px;
}

.stat_jupnum_digit {
  color: #ffffff;
  display: inline-block;
  font-family: roboto;
  font-size: 30px;
  font-weight: 100;
  /* margin: 0 0.05em; */
  padding: 0.2em 0;
  position: relative;
  text-align: center;
  width: 16px;
}
.stat_jupnum_digit:after {
  background: rgba(16, 21, 26, 0.05);
  box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.2);
  content: "";
  display: block;
  height: 1.5px;
  position: absolute;
  top: 50%;
  width: 100%;
}
.stat_jupnum_digit:before {
  background: rgba(83, 83, 83, 0.219);
  border-radius: 0.25em 0.25em 0 0;
  bottom: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-border-radius: 0.25em 0.25em 0 0;
  -moz-border-radius: 0.25em 0.25em 0 0;
  -ms-border-radius: 0.25em 0.25em 0 0;
  -o-border-radius: 0.25em 0.25em 0 0;
}

.stat_jupnum_digit2 {
  background: none;
  background-image: linear-gradient(180deg, #eaeef2 10%, #FFFFFF 100%);
  border-radius: 0.25em;
  box-shadow: 0 20px 30px -10px rgba(76, 99, 119, 0.1), inset 0 -1px 0 0 rgba(76, 99, 119, 0.3), inset 0 1px 0 0 #fff;
  color: #000000;
  display: inline-block;
  font-family: "oswald", sans-serif;
  font-size: 22px;
  font-weight: 900;
  margin: 0 0.05em;
  padding: 0.2em 0;
  position: relative;
  text-align: center;
  width: 0.8em;
}
.stat_jupnum_digit2:after {
  background: rgba(16, 21, 26, 0.05);
  box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.2);
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
}
.stat_jupnum_digit2:before {
  background: rgba(66, 86, 103, 0.01);
  border-radius: 0.25em 0.25em 0 0;
  bottom: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
}

.stat_jupnum_digit_b {
  color: black;
  display: inline-block;
  font-family: roboto;
  font-size: 30px;
  font-weight: 100;
  /* margin: 0 0.05em; */
  padding: 0.2em 0;
  position: relative;
  text-align: center;
  width: 16px;
}
.stat_jupnum_digit_b:after {
  background: rgba(16, 21, 26, 0.05);
  box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.2);
  content: "";
  display: block;
  height: 1.5px;
  position: absolute;
  top: 50%;
  width: 100%;
}
.stat_jupnum_digit_b:before {
  background: rgba(73, 73, 73, 0.199);
  border-radius: 0.25em 0.25em 0 0;
  bottom: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-border-radius: 0.25em 0.25em 0 0;
  -moz-border-radius: 0.25em 0.25em 0 0;
  -ms-border-radius: 0.25em 0.25em 0 0;
  -o-border-radius: 0.25em 0.25em 0 0;
}

.stat_jupnum_digit_b2 {
  color: #ffffff;
  display: inline-block;
  font-family: "Oswald";
  font-size: 30px;
  font-weight: 100;
  margin: 0px 3px;
  /* border: 1px solid #00000059; */
  background: #13773a;
  padding: 0.2em 0;
  position: relative;
  text-align: center;
  width: 30px;
}
.stat_jupnum_digit_b2:after {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.2);
  content: "";
  display: block;
  height: 1.5px;
  position: absolute;
  top: 50%;
  width: 100%;
}
.stat_jupnum_digit_b2:before {
  background: rgb(143, 143, 143);
  border-radius: 0.25em 0.25em 0 0;
  bottom: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
  -webkit-border-radius: 0.25em 0.25em 0 0;
  -moz-border-radius: 0.25em 0.25em 0 0;
  -ms-border-radius: 0.25em 0.25em 0 0;
  -o-border-radius: 0.25em 0.25em 0 0;
}

.stat_jupnum_digit_april {
  color: rgba(0, 0, 0, 0.3490196078);
  display: inline-block;
  font-family: "Oswald";
  font-size: 30px;
  font-weight: 100;
  margin: 0px 3px;
  /* border: 1px solid #00000059; */
  background: white;
  padding: 0.2em 0;
  position: relative;
  text-align: center;
  width: 30px;
}
.stat_jupnum_digit_april:before {
  background: linear-gradient(365deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4509803922));
  border-radius: 0.25em 0.25em 0 0;
  bottom: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.stat_jupnum_digit_april:after {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.2);
  content: "";
  display: block;
  height: 1.5px;
  position: absolute;
  top: 50%;
  width: 100%;
}

.bg-itagreen {
  background: var(--cl-ita-green) !important;
  color: white !important;
}

.bg-gainsboro {
  background: gainsboro;
}

.bg-lightgray {
  background: var(--back-lightgray);
}

.bg-vaguegray {
  background: var(--back-vaguegray);
}

.bg-grey {
  background: grey !important;
}

.bg-darkgray {
  background: var(--back-darkgray);
}

.bg-transparent {
  background: transparent;
}

.bg-black {
  background: black;
}

.bg-blue {
  background: blue;
}

.bg-adminblue {
  background: var(--admin-maincolor) !important;
}

.bg-adminblue-back {
  background: var(--admin-mainbg) !important;
}

.downSNS {
  position: absolute;
  top: calc(100vw + 29px);
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../public/img/downloadBtn01.svg) no-repeat center;
  background-size: 27%;
  width: 180px;
  height: 80px;
  z-index: 50;
  letter-spacing: -2px;
  text-align: center;
}
.downSNS:after {
  font-size: 12px;
  content: "다운로드";
  position: absolute;
  bottom: -3px;
  /* text-align: center; */
  left: 19px;
  /* width: 100%; */
  text-align: center;
  margin: auto;
  left: 0;
  right: 0;
}

.downSNS2 {
  position: absolute;
  top: calc(100vw + 134px);
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../public/img/downloadBtn01.svg) no-repeat center;
  background-size: 27%;
  width: 180px;
  height: 80px;
  z-index: 50;
  letter-spacing: -2px;
  text-align: center;
}
.downSNS2:after {
  font-size: 12px;
  content: "다운로드";
  position: absolute;
  bottom: -3px;
  /* text-align: center; */
  left: 19px;
  /* width: 100%; */
  text-align: center;
  margin: auto;
  left: 0;
  right: 0;
}

.insta-share {
  position: absolute;
  bottom: 13px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../public/img/swipe2.svg) no-repeat center;
  background-size: 19%;
  width: 180px;
  height: 80px;
  z-index: 50;
  letter-spacing: -2px;
  text-align: center;
}
.insta-share:after {
  font-size: 12px;
  position: absolute;
  bottom: -3px;
  /* text-align: center; */
  left: 19px;
  /* width: 100%; */
  text-align: center;
  margin: auto;
  left: 0;
  right: 0;
}

.insta-share2 {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../public/img/swipe3.svg) no-repeat center;
  background-size: 12%;
  width: 100%;
  height: 80px;
  z-index: 50;
  letter-spacing: -2px;
  text-align: center;
}
.insta-share2:before {
  position: absolute;
  content: "스크린 캡처로 SNS인증!";
  font-family: "Noto Sans KR";
  bottom: -19px;
  background: rgba(0, 0, 0, 0.0784313725);
  right: 0px;
  border-radius: 10px 10px 0 0;
  height: 31px;
  margin: auto;
  width: 95%;
  padding-top: 9px;
  /* top: 0; */
  /* bottom: 0; */
  left: 0;
  vertical-align: center;
  text-align: center;
  color: #1d1d1d;
  font-size: 14px;
  letter-spacing: -1px;
}
.insta-share2:after {
  font-size: 12px;
  position: absolute;
  bottom: -3px;
  /* text-align: center; */
  left: 19px;
  /* width: 100%; */
  text-align: center;
  margin: auto;
  left: 0;
  right: 0;
}

.insta-share3 {
  position: absolute;
  bottom: 0px;
  background: #ffffff;
  border: 1.5px solid black;
  border-bottom: 0px;
  color: black;
  right: 0px;
  border-radius: 10px 10px 0 0;
  height: 45px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  /* font-size: 16px; */
  margin: auto;
  width: 95%;
  padding-top: 11px;
  /* top: 0; */
  /* bottom: 0; */
  left: 0;
  vertical-align: center;
  text-align: center;
  /* color: #1d1d1d; */
  font-size: var(--font-xl);
  letter-spacing: -1px;
}
.insta-share3 .cap_msg {
  text-align: center;
}
.insta-share3 .cap_icon {
  left: 9px;
  position: absolute;
  background: url(../public/img/swipe2.svg) no-repeat center;
  background-size: 26px;
  width: 26px;
  height: 31px;
  color: white;
  bottom: 3px;
  text-align: center;
}

.click-icon {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url("../public/img/logo/click-icon.svg") no-repeat center;
  width: 80px;
  height: 80px;
}

.top-row-ct {
  display: grid;
  position: absolute;
  z-index: 3;
  width: 100%;
  grid-template: "a b c" 50px/1fr 1fr 1fr;
}
.top-row-ct > * {
  display: grid;
}
.top-row-ct .ga {
  grid-area: a;
}
.top-row-ct .gb {
  grid-area: b;
}
.top-row-ct .gc {
  grid-area: c;
}
.top-row-ct .addres_items {
  width: 50px;
  height: 150px;
  position: absolute;
  right: 0;
  display: grid;
  grid-template: "a" 1fr "b" 1fr/1fr;
}

.bottom-row {
  position: absolute;
  width: 100%;
  z-index: 5;
}

.bottom-row-ct {
  display: grid;
  z-index: 3;
  position: absolute;
  top: calc(100vw - 85px);
  /* font-size: 14PX; */
  /* left: 10px; */
  width: 100%;
  color: white;
  grid-template: "a b c" 50px/0.8fr 1fr 1fr;
  padding: 29px 34px 0 34px;
  font-family: "Barlow Semi Condensed", "Oswald";
  font-style: italic;
}
@media screen and (min-width: 992px) {
  .bottom-row-ct {
    top: 515px;
  }
}
.bottom-row-ct > * {
  display: grid;
  width: -moz-max-content;
  width: max-content;
}
.bottom-row-ct > .ga1 {
  grid-area: a;
  position: absolute;
  /* margin-bottom: 80px; */
  /* margin-left: -12px; */
  top: -19px;
  left: -6px;
  letter-spacing: -1px;
}
.bottom-row-ct > .ga {
  grid-area: a;
  position: relative;
}
.bottom-row-ct > .ga:after {
  position: absolute;
  content: "TRASH";
  font-size: 10px;
  bottom: 3px;
  right: -25px;
}
.bottom-row-ct > .gb {
  grid-area: b;
  position: relative;
}
.bottom-row-ct > .gb:after {
  content: "KM";
  position: absolute;
  font-size: 10px;
  bottom: 3px;
  right: -12px;
}
.bottom-row-ct > .gc {
  grid-area: c;
  position: relative;
}
.bottom-row-ct > .gc:after {
  content: "min";
  position: absolute;
  font-size: 10px;
  bottom: 3px;
  right: -15px;
}

.addr_map_wrap {
  position: absolute;
  margin: 0 0 0 10px;
  top: calc(100vw - 110px);
  right: 10px;
}

.addr_text_warp {
  height: 30px;
  position: absolute;
  margin: 0 0 0 10px;
  top: calc(100vw - 28px);
  font-size: 14PX;
  left: 10px;
  color: white;
}

.SEO_mark {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

.invi_map {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

input[type=number]#litter_numb {
  float: left;
  width: 145px;
  height: 45px;
  padding: 0;
  font-family: Lato;
  font-weight: 700;
  font-size: 2.2em;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  border: 2px #ffffff solid;
  background: rgba(0, 0, 0, 0.3411764706);
  outline: none;
  pointer-events: none;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

span.num_spinner {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  width: 235px;
  left: 0;
  height: 45px;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

span.num_spinner > .sub,
span.num_spinner > .add {
  float: left;
  display: block;
  width: 45px;
  height: 45px;
  text-align: center;
  font-family: Lato;
  font-weight: 700;
  font-size: 3.2em;
  color: #ffffff;
  border: 2px #ffffff solid;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  cursor: pointer;
  transition: 0.1s linear;
  -o-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  -moz-transition: 0.1s linear;
  -webkit-transition: 0.1s linear;
}

span.num_spinner > .add {
  top: 0;
  border: 2px #ffffff solid;
  border-left: 0;
  border-radius: 0 2px 2px 0;
}

span.num_spinner > .sub:hover,
span.num_spinner > .add:hover {
  background: #ff3329;
  color: #ffffff;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.userjupcl {
  font-family: "anton", "roboto";
  letter-spacing: 0.7px;
  color: black;
  margin-bottom: 84px;
}

/* ------------------------------ 
 * SCROLLABLE LEGEND 241021 변경 (해양쓰레기 범례가 길어서 css 로 전환함) 
 --------------------------------*/
.scrollable-legend {
  width: 125px;
  border-radius: 10px;
  height: 95px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ccc;
  padding: 8px;
}
@media screen and (min-width: 767px) {
  .scrollable-legend {
    width: 180px;
    height: 200px;
  }
}

.back_color {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.medalsec-ct {
  z-index: 5;
  width: 47px;
  margin-top: 32px;
}

.ulevel-icon {
  width: 70px;
  height: 70px;
}

.uprofile {
  width: 28px;
  height: 28px;
  /*border: 1px solid white;
  */
  background: url(../public/img/util/plogging1.jpg) center no-repeat;
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.uprofile2 {
  z-index: 3;
  width: 22px;
  height: 22px;
  position: relative;
  top: 0px;
  left: 1px;
  /* background: #08d683; */
  /* border: 1px solid white; */
  border-radius: 50%;
  color: white;
  font-size: 15px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.uprofile-top {
  width: 28px;
  height: 28px;
  /*border: 1px solid white;
  */
  background: url(../public/img/util/plogging1.jpg) center no-repeat;
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.ulevel {
  height: 22px;
}

.ulevel-top1 {
  width: 100%;
  height: 125px;
}

.ulevel-top2 {
  width: 100%;
  height: 110px;
}

.ulevel-top3 {
  width: 100%;
  height: 110px;
}

@keyframes hourglass {
  0% {
    transform: rotate(0deg);
    box-shadow: inset #00b7c6 0 0em 0 0, inset white 0 -2em 0 0, inset #00b7c6 0 -4em 0 0;
  }
  80% {
    transform: rotate(0deg);
    box-shadow: inset #00b7c6 0 -2em 0 0, inset white 0 -2em 0 0, inset #00b7c6 0 -2em 0 0;
  }
  100% {
    transform: rotate(180deg);
    box-shadow: inset #00b7c6 0 -2em 0 0, inset white 0 -2em 0 0, inset #00b7c6 0 -2em 0 0;
  }
}
.wrap-loading {
  background: white;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap-loading .hourglass {
  display: block;
  background: white;
  margin: 3em auto;
  width: 2em;
  height: 4em;
  animation: hourglass 1s linear infinite;
}
.wrap-loading .outer {
  fill: #00b7c6;
}
.wrap-loading .middle {
  fill: white;
}

.wrap-loading1 {
  position: absolute;
  z-index: 3;
  background: rgba(0, 60, 35, 0.6509803922);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  flex-direction: column;
  justify-content: center;
}
.wrap-loading1 .hourglass {
  display: block;
  margin: 3em auto;
  width: 2em;
  height: 4em;
  animation: hourglass 1s linear infinite;
  -webkit-animation: hourglass 1s linear infinite;
}
.wrap-loading1 .outer {
  fill: #00b7c6;
}

.menu-bar {
  width: 30px;
  height: 30px;
}
.menu-bar:after {
  font-family: FontAwesome;
  content: "\f039";
  /* width: 50px; */
  /* height: 34px; */
  font-size: 1em;
  top: 14px;
  left: 24px;
  position: absolute;
}

.switch-menu {
  width: 28px;
  height: 28px;
}
.switch-menu:after {
  font-family: FontAwesome;
  content: "\f002";
  color: black;
  /* width: 50px; */
  /* height: 34px; */
  font-size: 2em;
  top: 19px;
  position: absolute;
}

.filter-blur-2 {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.filter-none {
  filter: none !important;
  -webkit-filter: none !important;
}

.not-logged {
  position: absolute;
  top: 16px;
  left: 10px;
  width: 100px;
  height: 36px;
}
.not-logged .notloggedIcon {
  background: url("../public/img/util/user.svg") center no-repeat;
  background-size: cover;
  width: 30px;
  height: 30px;
}

.initials_profile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  border-radius: 25px;
  font-size: 25px;
  color: white;
}
.initials_profile.gray {
  background: #dcdcdc;
}

.initials_rank {
  background: var(--CSV-Color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.avatar_icon_circle {
  background: var(--CSV-Color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.avatar-style {
  letter-spacing: -0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.avatar-style.border {
  border: 2px solid black;
}
.avatar-style.border-light {
  border: 1px solid lightgray;
}
.avatar-style.border-gray-2 {
  border: 2px solid lightgray;
}
.avatar-style.border-white-2 {
  border: 2px solid white;
}
.avatar-style.border-white-3 {
  border: 3px solid white;
}

.avatar-user-comp {
  display: flex;
  gap: 6px;
  align-items: center;
}
.avatar-user-comp .username-s {
  font-weight: 500;
  color: black;
  letter-spacing: var(--nie-letter-spacing-3);
}

.avatar-con {
  background: var(--CSV-Color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.initials_likewho {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  border-radius: 25px;
  font-size: 25px;
  color: white;
}

.initials_forumtalk {
  font-size: 17px;
  font-weight: 400;
  color: white;
  background: var(--CSV-Color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.initials_forum,
.initials_notice {
  font-size: 20px;
  font-weight: 400;
  color: white;
  background: var(--CSV-Color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.initials_notice {
  background: none !important;
  border-radius: 12px;
}

.initials_logged {
  background: var(--CSV-Color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.logged {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 12px;
  left: 6px;
  font-size: 22px;
  letter-spacing: 0.3px;
  font-family: "Noto Sans KR";
  font-weight: 500;
  width: 100px;
  height: 40px;
  color: white;
  text-align: center;
  border-radius: 50%;
}

.helpCenterOpen {
  width: 35px;
  height: 40px;
  color: #005822;
  right: 0px;
  top: 9px;
  position: absolute;
}
.helpCenterOpen:after {
  font-family: FontAwesome;
  content: "\f059";
  text-align: center;
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 10px;
}

.mapdataBtn {
  width: 35px;
  height: 40px;
  color: #005822;
  right: 26px;
  top: 9px;
  position: absolute;
}
.mapdataBtn:after {
  font-family: FontAwesome;
  content: "\f3c5";
  text-align: center;
  position: absolute;
  font-size: 23px;
  top: 10px;
  right: 10px;
}
.mapdataBtn:before {
  position: absolute;
  content: "";
  top: 46px;
  right: 18px;
  /* COLOR: BLACK; */
  width: 20px;
  text-align: center;
  font-size: 10px;
}
.mapdataBtn.active:before {
  position: absolute;
  content: "";
  top: 46px;
  right: 8px;
  /* COLOR: BLACK; */
  width: 38px;
  text-align: center;
  font-size: 10px;
}

.mapdataBtn_impact {
  color: var(--CSV-Color);
  font-size: calc(20px + 1vw);
  padding-right: 10px;
}
.mapdataBtn_impact:after {
  font-family: FontAwesome;
  content: "\f3c5";
  text-align: center;
}

.user_page {
  width: 55px;
  height: 40px;
}
.user_page:before {
  position: absolute;
  content: "인증";
  top: 47px;
  right: 17px;
  /* COLOR: BLACK; */
  width: 31px;
  text-align: center;
  font-size: 10px;
}
.user_page.active:before {
  position: absolute;
  content: "인증";
  top: 47px;
  right: 17px;
  /* COLOR: BLACK; */
  width: 31px;
  text-align: center;
  font-size: 10px;
}
.user_page:after {
  color: #00502b;
  font-family: FontAwesome;
  content: "\f2bd";
  text-align: center;
  position: absolute;
  /* width: 51px; */
  /* left: 10px; */
  /* height: 41px; */
  font-size: 2.5em;
  top: 18px;
  right: 20px;
}
.user_page.active:after {
  color: #00502b;
  font-family: FontAwesome;
  content: "\f2bd";
  text-align: center;
  position: absolute;
  /* width: 51px; */
  /* left: 10px; */
  /* height: 41px; */
  font-size: 2.5em;
  top: 18px;
  right: 20px;
}

.mapfull {
  width: 100%;
  height: 100%;
  display: block;
}

button.loca_agree_btn {
  background: url(../public/img/loca_01.png) no-repeat;
  background-size: contain;
  width: 75px;
  height: 107px;
}
button.loca_agree_btn:after {
  position: absolute;
  content: "GPS";
  top: 31px;
  right: 31px;
  color: #313131;
  font-family: "Noto Sans KR";
  letter-spacing: -1px;
  width: 37px;
  line-height: 36px;
  height: 32px;
  /* background: #04a976; */
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
}
button.loca_agree_btn a {
  text-decoration: none;
}
button.loca_agree_btn:hover {
  color: black;
  background-color: transparent;
}
button.loca_agree_btn:focus {
  color: black;
  outline: none;
  background-color: transparent;
}

button.loca_agree_btn1 {
  font-size: 15px;
  background: none;
  color: white;
}
button.loca_agree_btn1:after {
  position: absolute;
  content: "GPS";
  bottom: -28px;
  right: 37px;
  color: white;
  font-family: "Noto Sans KR";
  letter-spacing: -0.6px;
  width: 37px;
  line-height: 36px;
  height: 37px;
  border-radius: 50%;
  text-align: center;
  font-size: 15px;
}
button.loca_agree_btn1:hover, button.loca_agree_btn1:-moz-focusring {
  color: black;
  background-color: transparent;
}

.htmlMarker_01 {
  width: 30px;
  height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NanumSquareB";
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: bold;
  background: url(../public/img/marker_img1/cluster-marker-1.png) no-repeat;
  background-size: contain;
}

.htmlMarker1 {
  width: 30px;
  height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NanumSquareB";
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: bold;
  background: url(../public/img/marker_img1/cluster-marker-1.png) no-repeat;
  background-size: contain;
}

.htmlMarker2 {
  width: 35px;
  height: 35px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NanumSquareB";
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: bold;
  background: url(../public/img/marker_img1/cluster-marker-2.png) no-repeat;
  background-size: contain;
}

.htmlMarker3 {
  width: 40px;
  height: 40px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NanumSquareB";
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: bold;
  background: url(../public/img/marker_img1/cluster-marker-3.png) no-repeat;
  background-size: contain;
}

.htmlMarker4 {
  width: 45px;
  height: 45px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NanumSquareB";
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: bold;
  background: url(../public/img/marker_img1/cluster-marker-4.png) no-repeat;
  background-size: contain;
}

.htmlMarker5 {
  width: 50px;
  height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "NanumSquareB";
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: bold;
  background: url(../public/img/marker_img1/cluster-marker-5.png) no-repeat;
  background-size: contain;
}

.htmlMarker1-1 {
  width: 45px;
  height: 80px;
  font-size: 16px;
  display: flex;
  padding-bottom: 15px;
  align-items: flex-end;
  justify-content: center;
  font-family: "NanumSquareB";
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: bold;
  background: url(../public/img/marker_img1/cluster-marker-1.png) no-repeat;
  background-size: contain;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}

.letspace06 {
  letter-spacing: 0px;
}

.plognow {
  width: 30px;
  height: 30px;
  border: 1px solid;
  border-radius: 50%;
}
.plognow:before {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  left: 4px;
  top: 0px;
  font-size: 33px;
  line-height: 31px;
}
.plognow:after {
  position: absolute;
  content: "기록보기";
  bottom: -13px;
  left: 0;
  width: 35px;
  text-align: center;
  color: #a9a9a9;
  font-size: 10px;
}
.plognow.active {
  display: grid;
}
.plognow.active:before {
  content: "\f106";
  font-family: FontAwesome;
  position: absolute;
  left: 4px;
  top: 0px;
  font-size: 33px;
  line-height: 25px;
}
.plognow.active:after {
  position: absolute;
  content: "기록접기";
  bottom: -13px;
  text-align: center;
  font-size: 10px;
}

.mapboxgl-map {
  position: relative !important;
}

.mapboxgl-ctrl-attrib {
  display: none;
}

.DSI-R {
  font-family: "DSI-R";
}

.bien {
  font-family: "Seoul-Biennale-Titling2";
}

.icon_plog {
  position: relative;
  color: #00af80;
}
.icon_plog:before {
  content: "\f0e2";
  font-family: FontAwesome;
  position: absolute;
  right: -16px;
  top: 1px;
  color: #00af80;
  font-size: 27px;
  line-height: 17px;
}
.icon_plog:after {
  position: absolute;
  content: "계속하기";
  top: 30px;
  left: -30px;
  width: 62px;
  text-align: center;
  letter-spacing: -1px;
  /* color: #009688; */
  font-weight: 500;
  font-size: 12px;
}

.icon_finish_withNophoto {
  position: relative;
  color: #ff3838;
}
.icon_finish_withNophoto:before {
  content: "\f058";
  font-family: FontAwesome;
  position: absolute;
  right: -17px;
  top: 1px;
  font-size: 31px;
  line-height: 17px;
}
.icon_finish_withNophoto:after {
  position: absolute;
  content: "이후등록";
  top: 30px;
  left: -30px;
  width: 62px;
  text-align: center;
  letter-spacing: -1px;
  /* color: #009688; */
  font-weight: 500;
  font-size: 13px;
}

.icon_finish {
  position: relative;
  color: #ff3838;
}
.icon_finish.pause {
  opacity: 0.6;
  filter: saturate(0);
}
.icon_finish.pause:after {
  content: "미션종료";
}
.icon_finish:before {
  content: "\f058";
  font-family: FontAwesome;
  position: absolute;
  right: -19px;
  top: 1px;
  font-size: 33px;
  line-height: 17px;
}
.icon_finish:after {
  position: absolute;
  content: "미션완료";
  top: 30px;
  left: -30px;
  width: 62px;
  text-align: center;
  letter-spacing: -1px;
  /* color: #009688; */
  font-weight: 500;
  font-size: 12px;
}

.icon_Pausefinish {
  position: relative;
  color: #00af80;
}
.icon_Pausefinish:before {
  content: "\f28d";
  font-family: FontAwesome;
  position: absolute;
  right: -22px;
  top: 1px;
  color: #ff0000;
  font-size: 38px;
  line-height: 17px;
}
.icon_Pausefinish:after {
  position: absolute;
  content: "미션없음";
  color: #ff0000;
  top: 30px;
  left: -30px;
  width: 62px;
  text-align: center;
  letter-spacing: -1px;
  /* color: #009688; */
  font-weight: 500;
  font-size: 12px;
}

.icon_camera {
  position: relative;
  color: #00af80;
}
.icon_camera.loadMore:before {
  content: "\f030";
  font-family: FontAwesome;
  position: absolute;
  right: -18px;
  top: 2px;
  color: #ff3838;
  font-size: 32px;
  line-height: 17px;
}
.icon_camera.loadMore:after {
  position: absolute;
  content: "추가하기";
  top: 30px;
  left: -30px;
  width: 62px;
  text-align: center;
  letter-spacing: -1px;
  color: #ff3838;
  font-weight: 500;
  font-size: 12px;
}
.icon_camera:before {
  content: "\f030";
  font-family: FontAwesome;
  position: absolute;
  right: -18px;
  top: 2px;
  color: #00af80;
  font-size: 32px;
  line-height: 17px;
}
.icon_camera:after {
  position: absolute;
  content: "사진등록";
  top: 30px;
  left: -30px;
  width: 62px;
  text-align: center;
  letter-spacing: -1px;
  /* color: #009688; */
  font-weight: 500;
  font-size: 12px;
}

.photo_status_msg {
  color: #404040;
  font-family: "pretendard";
  letter-spacing: -1px;
}

.icon_youtube_guide {
  position: absolute;
  right: 0;
}
.icon_youtube_guide:after {
  content: "\f16a";
  font-family: FontAwesome;
  position: absolute;
  right: 25px;
  width: 8px;
  height: 8px;
  top: 3px;
  color: #ff2f2f;
  font-size: 22px;
  line-height: 17px;
}

.icon_youtube_plogwinner {
  position: absolute;
  right: 48px;
  bottom: 11px;
  text-decoration: underline;
}
.icon_youtube_plogwinner:after {
  content: "\f16a";
  font-family: FontAwesome;
  position: absolute;
  right: -32px;
  width: 28px;
  height: 28px;
  top: 5px;
  color: #ff1818;
  font-size: 19px;
  line-height: 17px;
}

.cur_month {
  font-size: 17px;
  color: black;
  top: 55px;
  left: 19px;
  position: absolute;
  letter-spacing: -0.8px;
  font-family: "Noto Sans KR";
  padding: 5px 24px 5px 18px;
}

select:focus {
  outline: none;
}

.month_plog {
  /* text-align: right; */
  z-index: 50;
  text-align: center;
  font-size: var(--font-2xl);
  color: #000000;
  top: 9px;
  right: 14px;
  position: absolute;
  letter-spacing: -0.8px;
  font-family: "Noto Sans KR";
  padding: 5px 27px 5px 13px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 25px;
  background: url(../public/img/util/arrowdown_black.svg) no-repeat 92% 62%;
  background-size: 11px 11px;
  /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
.month_plog option {
  color: black;
}
.month_plog option:hover, .month_plog option:focus, .month_plog option:active {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}
.month_plog select::-ms-expand {
  display: none;
  /* 화살표 없애기 for IE10, 11*/
}

.donation_logo {
  position: relative;
  left: 28px;
  bottom: 31px;
  width: 63px;
  height: 62px;
  background: url(../public/img/util/donation_ita.svg) no-repeat;
  background-size: cover;
}
.donation_logo:after {
  content: "작은기부하기";
  position: absolute;
  left: 67px;
  width: 93px;
  height: 17px;
  bottom: 19px;
  font-weight: 500;
  letter-spacing: -2px;
  color: rgba(0, 0, 0, 0.7803921569);
  font-size: 11px;
  line-height: 17px;
}

.month_rank_title {
  font-size: 15px;
  top: 100px;
  left: 15px;
  position: absolute;
  letter-spacing: -0.8px;
  font-family: "Noto Sans KR";
  padding: 5px 24px 5px 18px;
}

.dataLoader {
  display: none;
  /* object-fit: fill; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 75px;
  border-radius: 50%;
  z-index: 50;
  height: 75px;
  background: rgba(2, 197, 119, 0.2) url(../public/img/1.svg) no-repeat 50% 50%;
  background-size: 56%;
}

#deckgl-container {
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  margin: 0;
}

#control-panel {
  display: none;
  font-family: Helvetica, Arial, sans-serif;
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  margin: 12px;
  padding: 20px;
  z-index: 1;
}

.map_infopanel {
  position: absolute;
  top: 85px;
  right: 0px;
  font-size: 17px;
  letter-spacing: -0.6px;
  left: 0px;
  color: white;
  margin: auto;
  width: 87%;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.0705882353);
  padding: 24px 24px;
  max-height: 100%;
  overflow: hidden;
  outline: none;
  z-index: 1;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.map_infopanel:after {
  content: "\f05a";
  font-family: FontAwesome;
  position: absolute;
  right: 16px;
  top: 25px;
  color: white;
  font-size: 17px;
  line-height: 15px;
}
.map_infopanel.active:after {
  content: "\f106";
  font-family: FontAwesome;
  position: absolute;
  right: 16px;
  top: 25px;
  letter-spacing: -0.6px;
  color: white;
  font-size: 15px;
  line-height: 15px;
}
.map_infopanel .map_infopanel_content {
  display: none;
  max-height: 100%;
  line-height: 27px;
  text-align: justify;
  word-break: break-all;
}
.map_infopanel .map_infopanel_content.wrap {
  white-space: pre-line;
}

.c-white {
  color: white;
}

.bc-white {
  background-color: white !important;
}

.plog_player_container {
  display: none;
  margin: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  text-align: center;
  background-color: #003f2a;
  box-sizing: border-box;
  overflow: hidden;
}

.smart-player-embed-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 384px;
  height: 0;
  overflow: hidden;
  padding-top: 125%;
  position: relative;
}

.smart-player-embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 384px;
  max-height: 480px;
}

@media screen and (max-height: 480px) {
  .smart-player-embed-iframe {
    max-height: 100vh;
  }
}
.demo_ver_info_panel {
  display: none;
  z-index: 100;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto;
  transform: translateX(70%);
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
  color: white;
  z-index: 100;
  padding: 0 133px 0px 30px;
  width: 85%;
  height: 200px;
  border-radius: 100px;
  background: rgba(4, 169, 118, 0.8);
  justify-content: flex-start;
  align-items: center;
  transition: 3s;
}

.demo_ver_info {
  display: none;
  position: absolute;
  z-index: 4;
  bottom: 96px;
  left: 12px;
  right: 0;
  margin: auto;
  width: 92px;
  height: 58px;
  background: url(../public/img/demo_user1-2.svg) no-repeat;
  background-size: contain;
}
.demo_ver_info:before {
  letter-spacing: 0px;
  color: white;
  position: absolute;
  content: "체험모드";
  font-family: "Noto Sans KR";
  font-weight: 500;
  bottom: 27px;
  transform: rotate(354deg);
  /*font-size: 23px;
  */
  left: 10px;
  text-align: center;
  font-size: 15px;
  -webkit-transform: rotate(354deg);
  -moz-transform: rotate(354deg);
  -ms-transform: rotate(354deg);
  -o-transform: rotate(354deg);
}

.csv_ver_info {
  display: none;
  position: absolute;
  z-index: 30;
  bottom: 109px;
  left: 12px;
  right: 0;
  margin: auto;
  width: 92px;
  height: 58px;
  background: url(../public/img/demo_user1-2.svg) no-repeat;
  background-size: contain;
  letter-spacing: 0px;
  color: white;
  font-family: "Noto Sans KR";
  font-weight: 500;
  text-align: center;
  font-size: 15px;
  transform: rotate(354deg);
  -webkit-transform: rotate(354deg);
  -moz-transform: rotate(354deg);
  -ms-transform: rotate(354deg);
  -o-transform: rotate(354deg);
}
.csv_ver_info .csv_ver_info_title {
  position: absolute;
  left: 11px;
  top: 14px;
  transform: rotate(356deg);
  -webkit-transform: rotate(356deg);
  -moz-transform: rotate(356deg);
  -ms-transform: rotate(356deg);
  -o-transform: rotate(356deg);
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
  }
}
.gps_ring {
  border: 3px solid #252525;
  border-radius: 30px;
  height: 18px;
  width: 18px;
  animation: pulsate 1s ease-out 0s infinite normal forwards;
}

.gps_ring_plognow_point {
  position: absolute;
  left: 20px;
  top: 15px;
  color: #00af80;
  font-size: 20px;
}
.gps_ring_plognow_point:before {
  font-family: FontAwesome;
  content: "+";
}

.gps_ring_plognow {
  border: 1px solid #00af80;
  background: rgba(0, 175, 128, 0.2196078431);
  border-radius: 30px;
  height: 50px;
  width: 50px;
  animation: pulsate 1.5s ease-out 0s infinite normal forwards;
}

.gps_ring_plognow_spot {
  border: 2px solid #ff3939;
  background: rgba(175, 0, 0, 0);
  border-radius: 30px;
  height: 25px;
  width: 25px;
  animation: pulsate 1.5s ease-out 0s infinite normal forwards;
}

.gps_pos_flag {
  background: url(../public/img/util/mc_flag_readypt01_2110.svg) no-repeat;
  background-size: 100%;
  height: 44px;
  width: 26px;
  left: -4px;
  top: -23px;
  position: absolute;
}

.gps_pos_flag1 {
  background: url(../public/img/util/mc_flag_readypt01_2110.svg) no-repeat;
  background-size: 100%;
  height: 44px;
  width: 26px;
  left: 12px;
  top: -5px;
  position: absolute;
}

.gps_pos_flag_ready {
  background: url(../public/img/util/mc_flag_readypt01_2110.svg) no-repeat;
  background-size: 100%;
  height: 44px;
  width: 26px;
  left: 12px;
  top: -4px;
  position: absolute;
}

.dot-ellipsisIcon {
  background: url(../public/img/util/dot-ellipsisIcon.svg) no-repeat center center;
  width: 16px;
  height: 40px;
}

.dot-ellipsisIcon-style {
  width: 16px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #1e1e1e;
}

.popupCon_st {
  font-size: calc(3vw + 5px);
  line-height: calc(3vw + 12px);
}

.fm-ro_photo {
  font-family: roboto;
  letter-spacing: -2.3px;
  font-weight: 300;
}

.ls-1-3 {
  letter-spacing: -1.3px;
}

.addres {
  position: absolute;
  width: -moz-max-content;
  width: max-content;
}

.uRun_addr {
  position: absolute;
  top: 75px;
  font-size: 14px;
  width: -moz-max-content;
  width: max-content;
}

.uRun_addr .icon-wrap {
  position: absolute;
  top: -7px;
  right: -11px;
  transform: rotate(13deg);
  width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.por {
  position: relative;
}

.topmenu_icon {
  display: flex;
  flex-direction: column;
  width: 70px;
  cursor: pointer;
}
.topmenu_icon span {
  background: #fff;
  border-radius: 10px;
  height: 7px;
  margin: 7px 0;
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.topmenu_icon span:nth-of-type(1) {
  width: 50%;
}
.topmenu_icon span:nth-of-type(2) {
  width: 100%;
}
.topmenu_icon span:nth-of-type(3) {
  width: 75%;
}
.topmenu_icon input[type=checkbox] {
  display: none;
}
.topmenu_icon input[type=checkbox]:checked ~ span:nth-of-type(1) {
  transform-origin: bottom;
  transform: rotatez(45deg) translate(8px, 0px);
}
.topmenu_icon input[type=checkbox]:checked ~ span:nth-of-type(2) {
  transform-origin: top;
  transform: rotatez(-45deg);
}
.topmenu_icon input[type=checkbox]:checked ~ span:nth-of-type(3) {
  transform-origin: bottom;
  width: 50%;
  transform: translate(30px, -11px) rotatez(45deg);
}

.arrowBack {
  background: url(../public/img/util/arrowBack.png) no-repeat center;
  height: 23px;
  width: 35px;
  background-size: contain;
}

.loaderGlobal {
  z-index: 1000;
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7803921569);
}
.loaderGlobal .loader_1,
.loaderGlobal .loader_1:before,
.loaderGlobal .loader_1:after {
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  animation-fill-mode: both;
  animation: load7 1.8s infinite ease-in-out;
}
.loaderGlobal .loader_1 {
  color: white;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loaderGlobal .loader_1:before,
.loaderGlobal .loader_1:after {
  content: "";
  position: absolute;
  top: 0;
}
.loaderGlobal .loader_1:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loaderGlobal .loader_1:after {
  left: 3.5em;
}
@keyframes load7 {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.checkGlobal {
  z-index: 1000;
  display: none;
  position: fixed;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  bottom: 40px;
  background: transparent;
}
.checkGlobal .ele {
  font-size: 30px;
  color: white;
  background: #ff5454;
  padding: 30px;
  border-radius: 50%;
}

.utilPopMsg_container {
  z-index: 1000;
  display: none;
  position: fixed;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  bottom: 40px;
  background: transparent;
  overflow: hidden;
}
.utilPopMsg_container .util_popMsg {
  font-size: 15px;
  color: white;
  background: rgba(0, 0, 0, 0.7215686275);
  padding: 10px 26px;
  border-radius: 30px;
}

.utilPopMsg_desktop_container {
  z-index: 1000;
  display: none;
  position: fixed;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  bottom: 50px;
  background: transparent;
  overflow: hidden;
}
.utilPopMsg_desktop_container .util_popMsg_desktop {
  font-size: 20px;
  color: white;
  background: rgba(0, 0, 0, 0.7215686275);
  padding: 10px 26px;
  border-radius: 30px;
}

/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 310). 

The 'supports' rule will only run if your browser supports CSS grid.

Flexbox and floats are used as a fallback so that browsers which don't support grid will still recieve a similar layout.

*/
/* Base Styles */
.userPlogPics {
  width: 80px;
  height: 80px;
}

.plog-list {
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 300px);
  overscroll-behavior: contain;
}

.plog-list-scroll {
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow: auto;
  height: calc(var(--vh, 1vh) * 100 - 334px);
  overscroll-behavior: contain;
  width: 100%;
  letter-spacing: -0.6px;
}

.plog-record-scroll {
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  letter-spacing: -0.6px;
}

.profile_username_main {
  text-align: center;
  font-weight: 500;
  letter-spacing: -1px;
}

button#reset1365_submit,
button#snsurl_submit {
  background: var(--CSV-Color);
  font-size: calc(9px + 2vw);
  width: 100%;
  color: white;
  letter-spacing: -1px;
  height: 50px;
  border: 1px solid;
  border-radius: 10px;
  font-weight: 300;
}
button#reset1365_submit:focus, button#reset1365_submit:active,
button#snsurl_submit:focus,
button#snsurl_submit:active {
  background: #222222;
  color: white;
}

.sns_review_open_style {
  padding: 32px;
  font-size: 15px;
}

#profile_1365SetModal input:focus,
#sns_review_modal input:focus {
  outline: none;
}
#profile_1365SetModal input:-internal-autofill-selected,
#sns_review_modal input:-internal-autofill-selected {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 100px #ffffff inset !important;
  color: #ff493c !important;
}
#profile_1365SetModal input:-webkit-autofill,
#profile_1365SetModal input:-webkit-autofill:hover,
#profile_1365SetModal input:-webkit-autofill:focus,
#profile_1365SetModal input:-webkit-autofill:active,
#sns_review_modal input:-webkit-autofill,
#sns_review_modal input:-webkit-autofill:hover,
#sns_review_modal input:-webkit-autofill:focus,
#sns_review_modal input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #00502b !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

#signbirth {
  color: #00502b;
}
#signbirth:placeholder {
  color: #00502b;
}

#signemployee {
  height: 50px;
}

input.reset1365input,
input.resetnameinput,
input.resetbirthinput,
input.snsurlinput {
  height: 45px;
  margin-top: 15px;
  border-radius: 10px;
  border: none;
  padding: 3px 20px;
  color: #007740;
  background: none;
  margin-bottom: 21px;
  background-color: rgba(149, 149, 149, 0.1019607843);
  box-shadow: none;
  font-size: var(--font-xl);
  width: 100%;
}
input.reset1365input::-moz-placeholder, input.resetnameinput::-moz-placeholder, input.resetbirthinput::-moz-placeholder, input.snsurlinput::-moz-placeholder {
  color: var(--CSV-Color);
}
input.reset1365input::placeholder,
input.resetnameinput::placeholder,
input.resetbirthinput::placeholder,
input.snsurlinput::placeholder {
  color: var(--CSV-Color);
}

input.snsurlinput {
  padding: 3px 20px;
  background-color: rgba(0, 119, 64, 0.1019607843);
}

input.resetnameinput {
  color: #007740;
}

.profile1365inputnone,
.profilenameinputnone,
.profilebirthinputnone,
.snsurl_inputnone {
  color: #ff493c;
  display: inline-block;
  transform: translateY(-3px);
}

.auth-layout-01 {
  padding: 0px 30px 0px 30px;
  color: #00502b;
}

.auth-title-style-01 {
  font-size: 3.1rem;
  line-height: 1.5;
  font-weight: 300;
}

.program_apply_submit,
.create_plogclub_submit,
.userauthsubmit {
  background: var(--CSV-Color);
  font-size: 17px;
  width: -webkit-fill-available;
  color: white;
  letter-spacing: -1px;
  height: 50px;
  font-weight: 500;
  margin: 2vh 6vw;
  border-radius: 10px;
  border: none;
}
.program_apply_submit:focus, .program_apply_submit:active,
.create_plogclub_submit:focus,
.create_plogclub_submit:active,
.userauthsubmit:focus,
.userauthsubmit:active {
  background: #222222;
  color: white;
  border: 1px solid black;
}

.userauthHelp {
  font-size: 15px;
  padding: 7px 2px 0px 2px;
  color: #00502b;
  line-height: 1.6;
  font-weight: 500;
}

.userauthlabel {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 2px;
}

.userfound_label {
  font-size: 20px;
  font-weight: 500;
  padding: 17px 2px 25px 2px;
}

.authnameinputnone,
.authmailinputnone {
  display: inline-block;
  font-size: 14px;
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}

.userauthinput {
  color: #000000;
  margin: 16px 0px;
  width: 100%;
  display: block;
  background: none;
  border: 1px solid gainsboro;
  font-weight: 500;
  padding: 12px 18px;
  font-size: 17px;
  border-radius: 10px;
  letter-spacing: -0.8px;
}
.userauthinput::-moz-placeholder {
  color: gray;
}
.userauthinput::placeholder {
  color: gray;
}

.verify_picstate {
  color: white;
  border-radius: 99px;
  font-size: 11px;
  /* font-family: 'Noto Sans KR'; */
  padding: 0px 7px;
  background: #c0c0c0;
}
.verify_picstate.on {
  background: none;
  color: #3a3a3a;
  border: 1px solid;
}

.resetModal-1365 {
  display: none;
}

.gray-1365 {
  color: var(--color_1365btn);
}

.user1365_status {
  background: transparent;
  color: var(--color_1365btn);
}
.user1365_status.on {
  background: transparent;
  color: var(--color_1365btn);
}

.cl-admin {
  color: var(--admin-maincolor) !important;
}

.statclass1 {
  font-family: "Barlow Condensed", "Oswald";
  font-style: italic;
  font-weight: 700;
  font-size: calc(16vw + 2px);
  position: relative;
  letter-spacing: 3px;
  text-align: center;
}
.statclass1:after {
  font-size: 17px;
  font-family: "FontAwesome";
  position: absolute;
  top: 2px;
  right: -30px;
  font-style: normal;
  font-weight: 300;
}
.statclass1.totaltrash:after {
  content: "\f1b8";
}
.statclass1.totaluser:after {
  content: "\f004";
}
.statclass1.totalsigned:after {
  content: "\f184";
}
.statclass1.totaldis:after {
  font-size: 21px;
  content: "\f70c";
}
.statclass1.totalwalk:after {
  content: "\f54b";
  transform: rotate(280deg);
  -webkit-transform: rotate(280deg);
  -moz-transform: rotate(280deg);
  -ms-transform: rotate(280deg);
  -o-transform: rotate(280deg);
}
.statclass1.totalco2save:after {
  right: -32px;
  content: "\f0ed";
}
.statclass1.totalforestMakePercent:after {
  content: "\f024";
}
.statclass1.totalecologySavePercent:after {
  content: "\f024";
}
.statclass1.totalforestAmount:after {
  content: "\f1bb";
}
.statclass1.totalecologySaveAmount:after {
  content: "\f700";
}

.totaluser_unit,
.totalsigned_unit,
.totaltrash_unit,
.totalco2save_unit,
.totalecologyAmount_unit,
.totalforestAmount_unit,
.totalecologyPercent_unit,
.totalforestPercent_unit,
.totaldis_unit,
.totalwalk_unit {
  letter-spacing: 0.3px;
  text-align: center;
  font-size: 14px;
}

.plogthumb {
  border: 0.5px solid rgba(145, 145, 145, 0.1882352941);
  padding: 0px;
}

.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0);
}

.data_all_loader {
  display: block;
  position: absolute;
  background: white;
  padding: 15px;
  border-radius: 50px;
  right: 17px;
  bottom: 4px;
  z-index: 50;
  animation: loadspin 2s linear infinite;
  -webkit-animation: loadspin 2s linear infinite;
}

@keyframes loadspin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.earth-loader {
  position: absolute;
  right: 4px;
  top: 8px;
  z-index: 50;
  width: 60px;
  height: 60px;
  margin: 20px;
  background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 60px;
  box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
  animation-name: rotateearth;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotateearth;
  -webkit-animation-duration: 12s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@keyframes rotateearth {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 500px 0px;
  }
}
.intro-page-container {
  margin: 110px 0 0 0;
  height: calc(var(--vh, 1vh) * 100 - 110px);
  overflow-x: hidden;
  overflow-y: auto;
}

.pd6vw-comp {
  padding: 0 30px;
}

.engagement_rec_box {
  background: rgba(200, 200, 200, 0.1411764706);
  border-radius: 7px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.engagement_rec_box .engagement_title {
  font-size: var(--font-lg);
}
.engagement_rec_box .engagement_rec {
  font-size: calc(18px + 2vw);
}

.network_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-gap: 4px;
  overflow-x: hidden;
}
.network_box .network_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 15px 0;
}
.network_box .network_item .network_img_container {
  width: 42vw;
  height: 42vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid gainsboro;
  overflow: hidden;
}
.network_box .network_item .network_text_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.network_box .network_item .network_text_container .network_item_title {
  font-size: calc(5px + 2vw);
  padding: 10px 0;
}

.network_apply_box {
  position: absolute;
  bottom: 8vw;
  right: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e3e3e3;
  font-size: calc(15px + 2vw);
}

.plusiconcss {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), #000;
  background-position: center;
  background-size: 50% 2px, 2px 50%;
  /*thickness = 2px, length = 50% (25px)*/
  background-repeat: no-repeat;
  cursor: pointer;
}
.plusiconcss.alt {
  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  background-position: center;
  background-size: 50% 2px, 2px 50%;
  /*thickness = 2px, length = 50% (25px)*/
  background-repeat: no-repeat;
}
.plusiconcss.rad {
  border-radius: 50%;
}

section .basic {
  padding: calc(15px + 2vw) 0;
  font-family: nanumsquare !important;
}
section .network {
  padding: 0 20px;
  font-family: noto sans kr !important;
}
section .network .network-title {
  font-size: var(--font-lg);
  padding: 10px 0;
  font-weight: 400;
  color: #3d3d3d;
}

.hero-title {
  font-size: calc(24px + 2vw);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -2px;
  font-family: "Noto Sans KR";
}

.socialPlog-name {
  font-size: calc(30px + 3vw);
}

.globe-icon {
  font-size: calc(17px + 2vw);
  color: #3e3e3e;
}
.globe-icon:before {
  font-family: fontawesome;
  content: "\f57e";
}

.client_csrimg {
  margin: auto;
  /* display: flex; */
  /* align-self: end; */
  bottom: 60px;
  /* background: aliceblue; */
  position: absolute;
}

.client_csrimg_top {
  margin: auto;
  top: 20vh;
  position: absolute;
  padding: 18vw;
}

.client_csrimg_HI {
  margin: auto;
  bottom: 0;
  position: absolute;
}

.client_csrimg_bt0 {
  margin: auto;
  bottom: 0;
  position: absolute;
}

.client_csrimg_topHI {
  margin: auto;
  top: 23vh;
  position: absolute;
  padding: 18vw;
}

.client_csrimg_KV {
  margin: auto;
  bottom: 0;
  /* background: aliceblue; */
  position: absolute;
}

.client_csrimg_BI {
  top: 29vh;
  width: 300px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
}
.client_csrimg_BI.kv {
  width: 60vw;
}

.client_csrimg_NE23 {
  margin: auto;
  left: 0;
  right: 0;
  bottom: 100px;
  /* background: aliceblue; */
  position: absolute;
  right: 0;
  width: 86vw;
}

.client_csrimg_NE_BI {
  top: 14vh;
  width: 300px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
}

.client_csrimg_YH_BI {
  top: 29vh;
  width: clamp(0px, 72vw, 300px);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
}

.client_csrimg_CJ_BI {
  top: 29vh;
  width: clamp(0px, 78vw, 300px);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
}

.pc_access {
  display: none;
}

.mobile_access_no {
  display: none;
}
@media (max-width: 992px) {
  .mobile_access_no {
    display: flex;
    position: fixed;
    z-index: 500;
    line-height: 1.5;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: auto;
    top: 0;
    bottom: 0;
    letter-spacing: -0.4px;
    height: calc(var(--vh, 1vh) * 100);
    font-weight: 300;
    color: white;
    font-size: calc(20px + 1.2vw);
    background: var(--admin-maincolor);
  }
}

@media (min-width: 769px) {
  .bottom-nav-container-new3 {
    display: none;
  }
  .pc_access {
    display: flex;
    position: fixed;
    z-index: 100;
    line-height: 1.3;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0;
    letter-spacing: -0.3vw;
    height: 100vh;
    font-weight: 100;
    color: white;
    font-size: 8.2vw;
    background: #005e44;
    transition: background 1s;
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -ms-transition: background 1s;
    -o-transition: background 1s;
  }
  .italink_pcaccess {
    position: absolute;
    bottom: 97px;
    left: 12vw;
    z-index: 30;
    color: white;
    font-weight: 500;
    font-size: 25px;
    letter-spacing: -1px;
    padding: 5px 3px;
    border-bottom: 1px solid white;
  }
}
.rel {
  position: relative;
}

.abs {
  position: absolute;
}

.sticky {
  position: sticky;
}

.fixed {
  position: fixed;
}

.auth1365msg {
  font-weight: 500;
  color: var(--cl-ita-red-40);
  font-size: 14px;
  position: relative;
  display: block;
  margin-bottom: 4px;
  margin-left: 0px;
}

.kakao_channel_authinfo {
  background: #ffffff;
  padding: 2px 7px;
  text-decoration: underline;
}

.trigger_none_contact {
  color: black;
  margin-top: 3px;
  line-height: 1.5;
  color: #333;
}

.trigger_resetauth {
  color: black;
  margin-top: 3px;
  line-height: 1.5;
  text-decoration: underline;
  color: #ff6565;
}

.c-itagreen {
  color: #00502b;
}

.noclpoint {
  cursor: none;
}

.veri_picsnum {
  position: absolute;
  top: 40px;
  font-family: "Oswald";
  left: 92px;
  width: 15px;
  height: 15px;
  color: #00502b;
  text-align: center;
  line-height: 1.4;
  border-radius: 50px;
  background: #f9ff00;
  /* border: .5px solid #186030; */
  font-size: 11px;
}

.veri_picsnum2 {
  position: absolute;
  top: 27px;
  font-family: "oswald";
  left: 86px;
  width: 15px;
  z-index: 4;
  height: 15px;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
  border-radius: 50px;
  background: #ff685c;
  /* border: .5px solid #186030; */
  font-size: 11px;
}

.veri_picsnum_rec {
  position: absolute;
  top: 20px;
  font-family: "oswald";
  left: 20px;
  width: 18px;
  z-index: 4;
  height: 18px;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
  border-radius: 50px;
  background: #ff685c;
  /* border: 0.5px solid #186030; */
  font-size: 13px;
}

.veri_picsnum_rec_24 {
  position: absolute;
  top: 10px;
  font-family: "roboto";
  left: 10px;
  width: 20px;
  height: 20px;
  z-index: 4;
  color: black;
  border: 1px solid black;
  text-align: center;
  line-height: 1.4;
  border-radius: 50px;
  background: white;
  /* border: 0.5px solid #186030; */
  font-size: 13px;
}

.confetti-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
}
.confetti-container .confetti {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  z-index: 5;
}

#gps_accuracy_check {
  text-align: center;
  font-size: 8px;
  position: fixed;
  top: 150px;
  left: 0;
  letter-spacing: 0.2px;
  right: 0;
  width: 100%;
  margin: auto;
  color: #b4b4b4;
  z-index: 50;
}

.fm-barlow-c {
  font-family: "Barlow Condensed", "Oswald";
  font-style: italic;
}

.fm-barlow-sc {
  font-family: "Barlow Semi Condensed", "Oswald";
  font-style: italic;
}

.fm-fugaz {
  font-family: "Fugaz One", cursive;
}

.plogConfirm_index {
  letter-spacing: -1px;
  font-weight: 500;
}

.plogConfirm_value {
  font-family: "Barlow Semi Condensed", "Oswald";
  font-style: italic;
  font-weight: 700;
  margin-left: 3px;
}

.plogConfirm_items {
  padding: 7px 6px;
  align-items: center;
  border-bottom: 1px dashed gray;
  display: flex;
}

.bartopmodal {
  position: absolute;
  width: 94px;
  height: 4px;
  background: #dadada;
  left: 0;
  top: 11px;
  right: 0;
  border-radius: 10px;
  margin: auto;
}

.plogRecord_subtitle {
  letter-spacing: -1px;
  color: rgb(97, 97, 97);
}

.plogstat_val {
  font-size: var(--font-2xl);
  line-height: 1.2;
  font-weight: 500;
  font-family: roboto;
}

.plogstat_unit {
  font-size: var(--font-md);
  padding-top: 4px;
}

.ploglist-arrow {
  width: 40px;
  height: 40px;
  position: absolute;
  /* padding: 6px; */
  /* box-sizing: content-box; */
  border-radius: 50%;
  right: -8px;
  bottom: -3px;
  z-index: 15;
}
.ploglist-arrow:before {
  transform: rotate(225deg);
  content: "";
  border-top: 2px solid #8d8d8d;
  width: 38%;
  display: block;
  top: 14px;
  position: absolute;
  margin: 0 auto;
  right: 0;
}
.ploglist-arrow:after {
  transform: rotate(135deg);
  content: "";
  border-top: 2px solid #8d8d8d;
  width: 38%;
  display: block;
  margin: 0 auto;
  top: 24px;
  right: 0;
  position: absolute;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
}
.ploglist-arrow:active {
  animation: back_btnEffetc1 0.1s forwards;
  -webkit-animation: back_btnEffetc1 0.1s forwards;
}

.ploglist-arrow-notice {
  width: 40px;
  height: 26px;
  z-index: 15;
}
.ploglist-arrow-notice:before {
  transform: rotate(225deg);
  content: "";
  border-top: 2px solid #8d8d8d;
  width: 38%;
  display: block;
  top: 14px;
  position: absolute;
  margin: 0 auto;
  right: 0;
}
.ploglist-arrow-notice:after {
  transform: rotate(135deg);
  content: "";
  border-top: 2px solid #8d8d8d;
  width: 38%;
  display: block;
  margin: 0 auto;
  top: 24px;
  right: 0;
  position: absolute;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
}
.ploglist-arrow-notice:active {
  animation: back_btnEffetc1 0.1s forwards;
  -webkit-animation: back_btnEffetc1 0.1s forwards;
}

@keyframes back_btnEffetc1 {
  0% {
    background: rgba(0, 116, 81, 0.438);
  }
  25% {
    background: rgba(0, 116, 81, 0.171);
  }
  100% {
    background: none;
  }
}
.gobackTomain_insta {
  background: #f4f6fa;
  display: flex;
  justify-content: flex-start;
  z-index: 5;
  align-items: center;
  height: 55px;
  align-items: center;
  padding-left: 39px;
  font-size: 19px;
  position: relative;
}
.gobackTomain_insta:before {
  font-family: FontAwesome;
  content: "\f104";
  position: absolute;
  left: 18px;
  font-weight: 500;
  font-size: 28px;
  top: 12px;
}

.mxc-w {
  width: -moz-max-content;
  width: max-content;
}

.mxc-h {
  height: -moz-max-content;
  height: max-content;
}

.usertopIcon_state {
  border-radius: 50%;
  background: none;
}

.csvstats_val {
  font-size: 30px;
  line-height: 1.2;
}

.csvstats_req_val {
  font-size: 22px;
  line-height: 1.2;
  color: #c0c0c0;
}

.cert {
  color: #00502b;
}

.no_cert {
  color: rgb(255, 49, 49);
}

.csv-title {
  font-size: 15px;
  letter-spacing: -1px;
  font-weight: 500;
  font-family: "Noto Sans KR";
  padding: 0 20px 0 20px;
}

.csv-event-img {
  border-radius: 50%;
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
}

.csv-event-title {
  font-size: calc(10px + 1vw);
  padding: 2px 0px;
  letter-spacing: -1px;
  font-weight: 700;
  font-family: "Noto Sans KR";
}

.csv-event-title-small {
  font-size: calc(8px + 1vw);
  letter-spacing: -0.5px;
  font-weight: 300;
  font-family: "Noto Sans KR";
  color: #75787b;
  width: -moz-max-content;
  width: max-content;
}

.csv-event-title-round {
  border-radius: 10px;
  padding: 2px 0;
  font-size: calc(10px + 1vw);
  letter-spacing: -1px;
  font-weight: 500;
  color: #333;
  font-family: "Noto Sans KR";
}

.csv-event-subtitle {
  display: flex;
  align-items: center;
  font-size: calc(1vw + 10px);
  padding: 8px 10px;
  letter-spacing: -1px;
  font-weight: 500;
  color: #222222;
}

.csv_Type1_1365Info_style {
  font-size: 14px;
  margin-left: 2px;
}
.csv_Type1_1365Info_style:before {
  content: "\f059";
  font-family: "FontAwesome";
  font-weight: 100;
  color: #767676;
}

.csv_Type1_certCheck {
  display: none;
  padding: 5px 10px;
  /*background: #ff493c;
  */
  border-radius: 30px;
  margin-right: 14px;
  color: #000000;
  font-size: 19px;
  cursor: pointer;
}
.csv_Type1_certCheck:after {
  content: "1365";
  font-size: 15px;
  margin-left: 4px;
}

.profile_pageOpen {
  display: none;
  padding: 5px 10px;
  /* background: #ff493c; */
  margin-right: 14px;
  color: #000000;
  border: 1px solid grey;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.cl-b-150 {
  color: var(--cl-text-b-150);
}

.cl-b-180 {
  color: var(--cl-text-b-180);
}

.cl-b-200 {
  color: var(--cl-text-b-200);
}

.cl-gray {
  color: #75787b;
}

.cl-black {
  color: black !important;
}

.cl-blue {
  color: blue;
}

.cl-white {
  color: white !important;
}

.cl-vaguegray {
  color: var(--back-vaguegray) !important;
}

.cl-itared {
  color: var(--cl-ita-red-40) !important;
}

.cl-itagreen {
  color: var(--cl-ita-green) !important;
}

.cl-itagreen-mid {
  color: var(--cl-ita-green-mid) !important;
}

.cl-itagreen-dark {
  color: var(--cl-ita-green-dark) !important;
}

.cl-baro-yellow {
  color: var(--cl-baro-yellow) !important;
}

.bg-baro-yellow {
  background: var(--cl-baro-yellow) !important;
}

.bg-baro-yellow-light {
  background: var(--cl-baro-yellow-light) !important;
}

.bg-baro-dark {
  background: var(--cl-baro-dark) !important;
}

.cl-itayellow {
  color: var(--cl-ita-yellow) !important;
}

.bg-itayellow {
  background: var(--cl-ita-yellow) !important;
}

.bg-itayellow-vague {
  background: var(--cl-ita-yellow-vague) !important;
}

.cl-itaorange {
  color: var(--cl-ita-orange) !important;
}

.cl-csv {
  color: var(--CSV-Color);
}

.adm_cert_jupsum {
  color: white;
  background: var(--admin-maincolor);
  padding: 0 4px;
  border-radius: 5px;
}

.totalPlog {
  font-size: var(--font-xl);
  font-weight: 400;
  font-family: roboto;
  color: #00502b;
}

.myPage-profile-id-box {
  padding: 15px 5px;
}

.myPage-profile-box {
  padding: 5px 0;
}

.myPage-plogstat-box {
  margin-left: auto;
}

.myPage-mainlink-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.myPage-mainlink-box .myPage-mainlink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #f3f3f3;
  width: 100%;
  margin: 10px 0;
  border-radius: 8px;
  padding: 0 10px;
}
.myPage-mainlink-box .myPage-image {
  border-radius: 50%;
  width: 16vw;
  height: 16vw;
}
.myPage-mainlink-box .myPage-mainlink-text {
  font-size: var(--font-xl);
  padding: 12px 0px;
  letter-spacing: -1px;
  font-weight: 500;
}

.plogComment-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.myPagelink_box {
  height: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  font-weight: 700;
}
.myPagelink_box .title {
  font-size: var(--font-xl);
  padding: 2px 0px;
  letter-spacing: -0.6px;
}

.pagelink_box2 {
  height: -moz-fit-content;
  height: auto;
  color: #333;
  font-size: var(--font-lg);
  display: flex;
  letter-spacing: -0.5px;
  margin: 25px 10px;
  border-bottom: 1px solid #b8b8b8;
}
.pagelink_box2 .sub {
  font-size: var(--font-xl);
  color: #008333;
  padding: 7px 0;
  line-height: 1.5;
  height: 32px;
  width: 100%;
  cursor: pointer;
}

.list_box01 {
  height: -moz-fit-content;
  height: auto;
  display: flex;
  letter-spacing: -0.5px;
  margin: 4vw 2vw;
}
.list_box01 .titile {
  font-size: calc(13px + 1.2vw);
  margin: 1.2px 0;
  line-height: 1.5;
  font-weight: 500;
}
.list_box01 .sub {
  font-size: calc(10px + 1.2vw);
  color: #4b4b4b;
  margin: 1.2px 0;
  line-height: 1.5;
}
.list_box01 .sub.warp {
  white-space: pre-line;
}

.mapSearch_item {
  font-size: calc(9px + 1.2vw);
  padding: 3px 0;
  height: 40px;
}

.utility_sect {
  font-size: var(--font-xl);
  font-weight: 700;
}

.utility_modify_icon {
  font-size: calc(10px + 1.2vw);
}

.profile_1365modify {
  display: block;
  padding: 5px 10px;
  /*background: #ff493c;
  */
  margin-right: 81px;
  color: #000000;
  font-size: 16px;
  cursor: pointer;
}

.goto-itaInstaBtn {
  padding: 3px;
  /* background: #ff493c; */
  /* border: 1px solid #ff493c; */
  margin-right: 20px;
  border-radius: 6px;
  color: green;
  font-size: 30px;
  cursor: pointer;
}
.goto-itaInstaBtn:before {
  font-family: FontAwesome;
  content: "\f16d";
}

.csv_certGuideBox {
  background: #f1f1f1;
  height: 40px;
  margin: 20px;
  padding: 15px;
  border-radius: 10px;
  line-height: 1.4;
  display: flex;
  font-size: calc(9px + 1.2vw);
  letter-spacing: -1px;
  align-items: center;
  justify-content: space-between;
}

.csv_certGuideBox_line {
  border: 1px solid #838383;
  height: 40px;
  margin: 20px;
  padding: 15px;
  border-radius: 10px;
  line-height: 1.4;
  display: flex;
  font-size: calc(9px + 1.2vw);
  letter-spacing: -1px;
  align-items: center;
  justify-content: space-between;
}

.certInfo_SubPageOpen {
  font-size: var(--font-xl);
}

.cert_user1365_container {
  background: rgba(211, 211, 211, 0.2196078431);
  height: 50px;
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  font-size: calc(10px + 1.2vw);
}

.cert_userstatus {
  font-size: calc(10px + 1vw);
  padding: 2px 0px;
  letter-spacing: -1px;
  font-weight: 300;
  font-family: "Noto Sans KR";
}

.csv_usercert_rec,
.csv_usercert_period,
.csv_usercert_info,
.cert_usersns,
.cert_runpics {
  display: inline-block;
  color: #00502b;
  padding: 4px 7px;
  font-size: calc(1vw + 10px);
  border-radius: 20px;
  line-height: 1;
  text-align: center;
  margin-left: 0px;
  width: -moz-max-content;
  width: max-content;
}

.no-pics-certnum-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 100;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  background: rgba(198, 198, 198, 0.831372549);
}

.no-pics-certnum-modal-contents {
  width: 90%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  line-height: 1.5;
  font-weight: 500;
  position: absolute;
  height: -moz-max-content;
  height: max-content;
  padding: 26px;
  background: white;
  /* border-radius: 10px; */
  border-radius: 5px;
  letter-spacing: -1px;
  font-size: 15px;
}

.no_pics_certnum_Toggle_close {
  position: absolute;
  width: 45px;
  height: 45px;
  cursor: pointer;
  color: black;
  font-size: 48px;
  right: 14px;
  top: 18px;
}

.no-pics-certnum {
  position: relative;
  width: 20px;
  height: 20px;
}
.no-pics-certnum:before {
  font-family: FontAwesome;
  content: "\f002";
  position: absolute;
  left: 5px;
  font-size: 13px;
  top: 3px;
  margin: auto;
  color: rgba(61, 122, 94, 0.8705882353);
}

.cert_mark {
  position: absolute;
  right: -21px;
  top: -1px;
  font-size: 12px;
}

.eapps-instagram-feed {
  max-height: -moz-max-content !important;
  max-height: max-content !important;
}

#eapps-instagram-feed-1.eapps-instagram-feed {
  margin-top: 0 !important;
  margin-bottom: 60px !important;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.fm-fa {
  font-family: Fontawesome;
}

.cert-accordion-item {
  transition: 0.3s;
  border-bottom: 0.5px solid #d4d4d4;
}
.cert-accordion-item .extend_btn {
  right: 7%;
  position: absolute;
  font-size: 15px;
  top: 40px;
}
.cert-accordion-item i.fas {
  font-size: 15px;
  color: #303030;
  transform: translateX(-50%) rotate(0);
  transition: transform 0.15s ease;
  -webkit-transition: transform 0.15s ease;
  -moz-transition: transform 0.15s ease;
  -ms-transition: transform 0.15s ease;
  -o-transition: transform 0.15s ease;
}
.cert-accordion-item .cert-accordion-item-extend-more {
  transition: 1s;
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: inherit;
  color: #303030;
  display: none;
  background: #f8f8f8;
}
.cert-accordion-item.active i.fas {
  color: #00502b;
  transform: translateX(-50%) rotate(180deg);
  -webkit-transform: translateX(-50%) rotate(180deg);
  -moz-transform: translateX(-50%) rotate(180deg);
  -ms-transform: translateX(-50%) rotate(180deg);
  -o-transform: translateX(-50%) rotate(180deg);
}
.cert-accordion-item.active .cert-accordion-item-extend-more {
  display: block;
}

.div_border1 {
  position: relative;
}
.div_border1 > *:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 20px;
  height: 23px;
  /* width: 45px; */
  border-right: 1px solid #bfbfbf;
}
.div_border1 > :last-child:before {
  border: none;
}

.div_border2 {
  position: relative;
}
.div_border2 > *:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 19px;
  height: 23px;
  /* width: 45px; */
  border-right: 1px solid #bfbfbf;
}
.div_border2 > :last-child:before {
  border: none;
}

.topinsta_openBtn {
  position: absolute;
  right: 15px;
  top: 17px;
  width: 26px;
  height: 26px;
  color: #016537;
  font-size: 27px;
  cursor: pointer;
}
.topinsta_openBtn:before {
  font-family: FontAwesome;
  content: "\f16d";
}

.feed_openBtn {
  position: absolute;
  right: 69px;
  top: 17px;
  width: 26px;
  height: 26px;
  color: #016537;
  font-size: 27px;
  cursor: pointer;
}
.feed_openBtn:before {
  font-family: FontAwesome;
  content: "\f03e";
}

.crew_loadBtn {
  position: absolute;
  right: 111px;
  top: 17px;
  width: 26px;
  height: 26px;
  color: #016537;
  font-size: 27px;
  cursor: pointer;
}
.crew_loadBtn:before {
  font-family: FontAwesome;
  content: "\f2bd";
}

.mapbranch_container {
  position: absolute;
  top: 15px;
  right: 14px;
  z-index: 100;
}

@keyframes fade_down70 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    z-index: -1;
    transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
  }
}
.fade_down70 {
  animation: fade_down70 0.3s linear;
  -webkit-animation: fade_down70 0.3s linear;
}

.hidden_stats {
  display: none;
}

.squircle40 {
  -moz-clip-path: url(#squircle_svg40);
  -o-clip-path: url(#squircle_svg40);
  -ms-clip-path: url(#squircle_svg40);
  clip-path: url(#squircle_svg40);
  position: relative;
}

.squircle70 {
  -moz-clip-path: url(#squircle_svg70);
  -o-clip-path: url(#squircle_svg70);
  -ms-clip-path: url(#squircle_svg70);
  clip-path: url(#squircle_svg70);
  position: relative;
}

.squircle100 {
  -moz-clip-path: url(#squircle_svg100);
  -o-clip-path: url(#squircle_svg100);
  -ms-clip-path: url(#squircle_svg100);
  clip-path: url(#squircle_svg100);
  position: relative;
}

.program_apply {
  position: absolute;
  display: flex;
  bottom: 170px;
  right: 0;
  color: #005822;
  right: 35px;
  z-index: 50;
  margin: auto;
  font-size: 14px;
  text-decoration: underline;
}

.program_boards2 {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 50px;
  color: black;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  font-size: 15px;
}
.program_boards2 .program_boards_headtitle2 {
  position: absolute;
  top: -12px;
  left: 8%;
  font-size: 17px;
  font-weight: 400;
}

.program_boards {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  color: black;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  font-size: 15px;
}
.program_boards .swiper-slide-prev {
  opacity: 1 !important;
}

.program_boards_headtitle {
  position: absolute;
  top: -12px;
  left: 8%;
  font-size: 17px;
  font-weight: 400;
}

.program_card_main {
  height: 100px;
  background: white;
  position: relative;
  padding: 20px;
  letter-spacing: -0.5px;
  margin: 22px 0px;
  color: black;
  box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.1411764706);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  font-weight: 300;
  border-radius: 8px;
}

.program_card_main2 {
  height: 80px;
  background: white;
  position: relative;
  padding: 20px;
  letter-spacing: -0.5px;
  margin: 22px 0px;
  color: black;
  box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.1411764706);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  font-weight: 300;
  border-radius: 8px;
}

.program_card_lists {
  height: 100px;
  background: white;
  position: relative;
  padding: 20px;
  letter-spacing: -0.5px;
  margin: 22px 0px;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  font-weight: 300;
  border-bottom: 1px solid lightgrey;
}

.program_img_state:empty {
  background: url(../public/img/util/program_empty_load.png) no-repeat center;
  background-size: cover;
}

.program_img_state {
  background: none;
}

.csv_program_plogtype {
  position: absolute;
  width: 23px;
  height: 23px;
  top: 10px;
  font-size: 13px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  color: #ffffff;
  background: #003fff;
  border-radius: 50%;
}

#csv_program_listsmore_open {
  cursor: pointer;
  position: absolute;
  top: -9px;
  right: 10vw;
  font-size: 14px;
}

.plistsmore_style {
  overflow: auto !important;
  padding: 2vw 3vw;
}

.csv_program_subtitle {
  display: block;
  /* 블록태그로 만들어준다 */
  text-overflow: ellipsis;
  /* 말줄임 css */
  white-space: nowrap;
  /*글자를 한줄로 모아준다*/
  overflow: hidden;
  color: #1d1d1d;
  font-size: calc(4px + 2vw);
  font-weight: 400;
  line-height: 1;
  width: 46vw;
}

.csv_program_title {
  display: block;
  /* 블록태그로 만들어준다 */
  text-overflow: ellipsis;
  /* 말줄임 css */
  white-space: nowrap;
  /*글자를 한줄로 모아준다*/
  overflow: hidden;
  color: #1d1d1d;
  font-size: var(--font-md);
  font-weight: 700;
  line-height: 1;
  width: 40vw;
}

.csv_program_enter {
  position: absolute;
  right: 12px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  cursor: pointer;
  text-align: center;
  /* top: 43px; */
  z-index: 10;
  line-height: 1;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.csv_p_state_on {
  flex: none;
  padding: 4px 6px;
  background-color: #333;
  color: white;
  font-size: 12px;
  border-radius: 10px;
  line-height: 1;
}

.csv_p_state_off {
  flex: none;
  padding: 3px 6px;
  background-color: #cdcdcd;
  color: white;
  font-size: 12px;
  border-radius: 10px;
  line-height: 1;
}

.swiper-pagination4 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
}
.swiper-pagination4 .swiper-pagination-bullet {
  width: 12px;
  height: 2px;
  margin: 0px 4px;
  /* line-height: 2px; */
  /* display: flex; */
  display: inline-block;
  font-weight: 700;
  background: #ddede5;
  border-radius: 0px;
  font-size: 11px;
  /* background: none; */
  opacity: 1;
}
.swiper-pagination4 .swiper-pagination-bullet:hover, .swiper-pagination4 .swiper-pagination-bulletfocus {
  outline: none;
}
.swiper-pagination4 .swiper-pagination-bullet-active {
  font-weight: 900;
  background: #005822;
}

.program-upload-style {
  display: flex;
  flex-direction: column;
  font-size: 20px;
}

.program_joystick_style {
  position: absolute;
  bottom: 14vh;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  right: 0;
  z-index: 5;
}

.subkey_banner_style {
  height: -moz-max-content !important;
  height: max-content !important;
}

.subp_style_img {
  text-align: center;
  color: white;
  transition: 0s linear;
  transition-property: background-position;
  height: calc(var(--vh, 1vh) * 100 - 100px);
  position: relative;
}
.subp_style_img:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: linear-gradient(0deg, var(--subp_bcolor) 20%, transparent 100%);
}

@keyframes hidekey {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
#parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.num_plists_box {
  font-size: 6vw;
  padding: 3vw 4vw;
}

.subp_style_text {
  height: calc(var(--vh, 1vh) * 100);
  z-index: 7;
  padding: 20px;
  padding: 4vw 9vw 25px 9vw;
  color: #272727;
  overflow: hidden;
  z-index: 10;
  background: white;
}

.subp_style_head {
  font-size: calc(10px + 2vw);
  font-weight: 500;
  line-height: 2;
  margin-bottom: 12px;
}

.subp_style {
  font-size: calc(7px + 2vw);
  line-height: 1.8;
  white-space: pre-line;
  letter-spacing: -0.3px;
  padding-bottom: 3vh;
  padding-left: 2px;
  opacity: 0.8;
}

.subp_style_head1 {
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: 2;
  margin-bottom: 4px;
}

.subp_style1 {
  font-size: 8.2px;
  line-height: 1.8;
  white-space: pre-line;
  letter-spacing: -0.3px;
  padding-bottom: 3vh;
  padding-left: 2px;
  opacity: 0.8;
}

.parallax-subcontainer {
  padding-top: 16%;
}

.red {
  color: #ff493c;
}

.gray {
  color: rgb(126, 126, 126);
}

.itagreen {
  color: #007740;
}

.subpkey_voldetail-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 50;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  background: var(--subp_bcolor);
}

.subpkey_voldetail_contents {
  /* width: 90%; */
  left: 0;
  top: 0;
  font-family: "nanumsquare";
  bottom: 0;
  /* font-style: italic; */
  right: 0;
  margin: auto;
  line-height: 1;
  white-space: pre-line;
  font-weight: 300;
  position: absolute;
  height: -moz-max-content;
  height: max-content;
  color: white;
  padding: 30px;
  font-size: 4.25px;
}

.subpkey_voldetail_modalhead {
  font-size: 20px;
  color: white;
  padding: 30px;
}

.subpkey_voldetail_close {
  position: absolute;
  width: 45px;
  height: 45px;
  cursor: pointer;
  color: white;
  font-size: 31px;
  right: 16px;
  top: 23px;
}

.volc_title {
  font-size: 4.25px;
  font-weight: 500;
  line-height: 2;
  margin: 8px 0px;
  border-bottom: 1px solid white;
}

.volc_text {
  font-size: 4vw;
  line-height: 1;
  white-space: pre-line;
  letter-spacing: -0.3px;
  /* padding-bottom: 3vh; */
  padding-left: 2px;
  opacity: 0.8;
}

.subpkey_voldetail_btnclass {
  position: relative;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 2;
  margin-top: 4px;
}
.subpkey_voldetail_btnclass:before {
  font-family: FontAwesome;
  content: "\f002";
  position: absolute;
  left: 5px;
  font-size: 17px;
}

.subpkey_intro_btnclass {
  position: relative;
  width: 30px;
  height: 30px;
  font-size: 14px;
  line-height: 2;
  cursor: pointer;
}
.subpkey_intro_btnclass:before {
  font-family: FontAwesome;
  content: "\f106";
  position: absolute;
  right: -3px;
  top: -5px;
  font-size: 25px;
}
.subpkey_intro_btnclass.up:before {
  font-family: FontAwesome;
  content: "\f107";
  position: absolute;
  right: -3px;
  top: -5px;
  font-size: 25px;
}

.clipboard_hashbtn_box {
  font-size: 15px;
  line-height: 2;
  cursor: pointer;
  margin-top: 5px;
}

.clipboard_hashbtn_box1 {
  font-size: 13px;
  padding: 5px 9px;
  margin-top: 1.2px;
  color: #007740;
  cursor: pointer;
  border-radius: 25px;
  border: 1px solid #007740;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

.hashbtn_box_copied {
  display: none;
  position: absolute;
  top: -29px;
  font-size: 13px;
  width: -moz-max-content;
  width: max-content;
  padding: 0px 9px;
  border-radius: 4px;
  background: white;
  right: -7px;
  color: var(--subp_bcolor);
}
.hashbtn_box_copied::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: 8px;
  border-width: 6px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}
.hashbtn_box_copied.addstyle1 {
  background: #007740;
  padding: 4px 9px;
  color: white;
}
.hashbtn_box_copied.addstyle1::after {
  border-color: #007740 transparent transparent transparent;
}

.ploglist_date {
  line-height: 1;
}

.ploglist_title {
  font-size: var(--font-3xl);
  font-weight: 500;
}

.ploglist_record {
  font-size: var(--font-3xl);
}

.plogtimeoff_container {
  display: none;
  width: 180px;
  height: 200px;
  position: absolute;
  height: 180px;
  bottom: 14vh;
  display: flex;
  z-index: 6;
  margin: 0 auto 30px auto;
  justify-content: center;
  align-items: flex-end;
}
.plogtimeoff_container .plogtimeoff_timeoff {
  width: 120px;
  height: 120px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.csvp_time_state {
  position: relative;
  font-size: 3.2vw;
  margin: auto 0 6.4vw 2.1vw;
  color: white;
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1;
  border: 1px solid white;
}

.subpkey_plogtype {
  position: relative;
  font-size: 3.2vw;
  margin: auto 0 5.2px 3vw;
  color: white;
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1;
  border: 1px solid white;
}

.volunteer1365_personal_sub {
  margin-top: 5px;
  color: #ff4242;
  font-size: 12px;
  color: #ff4242;
}

.map_stat_container {
  right: 0;
  color: white;
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
  position: absolute;
  top: 0;
  font-size: 25px;
}

.timecount_run_readystate {
  font-size: 15px;
  font-weight: 500;
}

.searchlink_sns_review {
  position: absolute;
  top: 18px;
  right: 8vw;
  border-radius: 15px;
  text-align: center;
  width: -moz-max-content;
  width: max-content;
  padding: 5px 9px;
  color: #007740;
  border: 1px solid;
  font-size: 13px !important;
  cursor: pointer;
  font-weight: 500;
}

.searchlink_sns_review2 {
  position: absolute;
  top: 4px;
  right: 0vw;
  border-radius: 15px;
  text-align: center;
  width: -moz-max-content;
  width: max-content;
  padding: 5px 9px;
  color: #007740;
  border: 1px solid;
  font-size: 13px !important;
  cursor: pointer;
  font-weight: 500;
}

.snsurl-guidetext {
  white-space: pre-line;
  font-size: calc(2vw + 5.6px);
  -webkit-user-select: auto;
  -moz-user-select: auto;
       user-select: auto;
  line-height: 3vw;
  letter-spacing: -0.6px;
}

#hashbin .header-top {
  padding: 20px;
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
  height: 60px;
}
#hashbin .m0 {
  margin: 0;
}
#hashbin .main-stats {
  margin-top: 60px;
  padding: 20px;
}

.pc-home {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 40px;
  padding-right: 40px;
}
.pc-home.zepFrame {
  padding-left: 252px;
  padding-right: 0;
}
.pc-home.zepFrame .iframe-style {
  width: 100%;
  height: 100%;
  border: none;
  clip-path: inset(70px 52px 70px 52px round 52px);
  padding: 70px 52px 70px 0;
}
.pc-home.zepFrame .iframe-style::empty {
  background: gainsboro;
}
.pc-home.zepFrame .pc-home-zepFrame-side {
  width: 252px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: white;
  padding: 60px 20px 60px 30px;
  font-size: 17px;
}
.pc-home.zepFrame .pc-home-zepFrame-side .client_banner {
  position: absolute;
  bottom: 70px;
  display: flex;
  gap: 12px;
  padding: 5px 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.pc-home.zepFrame .pc-home-zepFrame-side li {
  padding: 5px 10px;
  cursor: pointer;
}
.pc-home .pc-home-side {
  text-align: left;
  color: #239349;
  font-size: 21px;
  line-height: 1.5;
  margin-top: 30px;
  position: absolute;
  top: 20px;
  left: calc(20px + 11vw);
}
.pc-home .pc-home-side .companylist {
  font-size: 13px;
  display: flex;
  flex-direction: column;
}
.pc-home .pc-home-side .info {
  font-size: 13px;
  display: flex;
  flex-direction: column;
}
.pc-home .footer-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 15px;
}
.pc-home .footer-msg .text {
  padding: 16px 31px;
  color: #02953e;
  font-weight: 400;
  font-size: 19px;
  background: rgba(2, 150, 61, 0.1098039216);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.pc-home .footer-msg .text:hover, .pc-home .footer-msg .text:focus {
  color: white;
  background: #02953e;
}
.pc-home .footer-msg-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 15px;
}
.pc-home .footer-msg-1 .text {
  padding: 16px 31px;
  color: white;
  font-weight: 400;
  font-size: 19px;
  color: white;
  border: 1px solid white;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.pc-home .footer-msg-1 .text:hover, .pc-home .footer-msg-1 .text:focus {
  color: white;
  background: #02953e;
}

.esgtype_rank_btn {
  position: absolute;
  right: 0;
  z-index: 100;
  width: auto;
  width: auto;
  width: -moz-fit-content;
}

.keystats_zep_box_320_128_section {
  width: 320px;
  height: 128px;
  background: #202020;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #4bff4b;
  font-family: "nanumsquare";
  overflow: hidden;
}
.keystats_zep_box_320_128_section .totalforestAmount {
  font-size: 52px;
  line-height: 1;
  font-family: "Press Start 2P", cursive;
}
.keystats_zep_box_320_128_section .totalforestgoalText {
  font-size: 13px;
  padding-right: 5px;
  letter-spacing: 0;
  font-family: pretended;
}
.keystats_zep_box_320_128_section .progress_container {
  position: absolute;
  letter-spacing: -2px;
  top: 10px;
  right: 10px;
  margin: auto;
  display: flex;
  font-size: 25px;
  justify-content: center;
  align-items: baseline;
}
.keystats_zep_box_320_128_section .totalforestMakePercent {
  padding: 3px 7px;
  border-radius: 10px;
  line-height: 1;
  background: #baff4b;
  width: 33px;
  height: 24px;
  font-size: 20px;
  letter-spacing: 0;
  color: black;
  margin-right: 4px;
  font-weight: 800;
  border-radius: 4px 4px 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.keystats_zep_box_320_128_section progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.keystats_zep_box_320_128_section progress::-webkit-progress-bar {
  background-color: #202020;
  color: white;
}
.keystats_zep_box_320_128_section .totalforestMakeProgress {
  font-size: 15px;
  background: #ff9999;
  color: white;
  border-radius: 20px;
  height: 5px;
  width: 60%;
}

.totalforestIcon {
  font-size: 12px;
  color: #13a10e;
}

.outof-gps-modal {
  display: none;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  position: absolute;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7803921569);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.outof-gps-modal .outof-gps-modal-content {
  color: white;
  font-size: calc(2vw + 13px);
}
.outof-gps-modal .outof-gps-style {
  border-radius: 30px;
  padding: 7px 15px;
  border: 1px solid white;
  text-align: center;
  line-height: 2;
}

.feed_result {
  background: yellow;
  width: 30px;
  position: absolute;
  z-index: 5000;
  height: 30px;
  bottom: 0;
}

.crew_listbox {
  padding: 3vw 0;
}

.basic_list_container {
  display: flex;
  padding: 2vw 4vw;
}

.crew_itemlist {
  position: relative;
  min-height: 500px;
  max-height: 500px;
  overflow-y: auto;
  padding: 10px 30px 20px 30px;
  background: #f7f7f7;
  box-shadow: inset 0 32px 32px -32px rgba(0, 0, 0, 0.05), inset 0 -32px 32px -32px rgba(0, 0, 0, 0.05);
}

.cert-img-update {
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  width: 20px;
  padding: 3px;
  height: 20px;
  align-items: center;
  display: flex;
  font-size: var(--font-lg);
  justify-content: center;
  border-radius: 50%;
  background: white;
  border: 1px solid black;
  color: black;
}

.basic_list_userid {
  font-size: var(--font-4xl);
  letter-spacing: -0.2px;
  width: -moz-max-content;
  width: max-content;
  font-weight: 700;
}

.basic_list_title {
  font-size: var(--font-3xl);
  letter-spacing: -0.2px;
  width: -moz-max-content;
  width: max-content;
}

.basic_list_subtitle {
  font-size: calc(9px + 1.2vw);
  letter-spacing: -0.2px;
  line-height: 1;
  color: grey;
}

.basic_list_ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 50vw;
}

.basic_list_item {
  font-size: 6vw;
  color: #bbb;
}

.basic_img169 {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding-top: 56.25%;
  position: relative;
}
.basic_img169 img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translate(-50%, -50%);
}
.basic_img169 img:empty {
  background: gainsboro;
}

.basic_item_status {
  color: #848484;
  font-size: 12px;
  padding-left: 10px;
  color: #ccc;
  padding: 9px 13px;
  background: #eff4f0;
  border-radius: 20px;
}
.basic_item_status[data-status=S] {
  color: #468669;
}
.basic_item_status[data-status=S]:after {
  content: "공개";
}
.basic_item_status[data-status=P] {
  color: #848484;
}
.basic_item_status[data-status=P]:after {
  content: "비공개";
}

.basic_item_icon {
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
}

.basic_item_icon2 {
  width: 85px;
  height: 85px;
  border-radius: 25px;
  border: 1px solid gainsboro;
}

.new_shared_feed_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 30px;
  overflow: hidden;
  padding: 15px 0;
}
.new_shared_feed_container .shared_feeditem {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  padding-bottom: 30px;
  border-bottom: 0.5px solid #e4e4e4;
  padding-left: 4vw;
}

.houseNotice_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  overflow: hidden;
}
.houseNotice_container .notice_list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 25px 6vw 20px;
  border-bottom: 0.5px solid #e4e4e4;
}
.houseNotice_container .notice_list .notice_icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.houseNotice_container .notice_list .notice_title {
  width: 60vw;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-lg);
  letter-spacing: -0.3px;
  padding: 6px 0;
}
.houseNotice_container .notice_list .notice_date {
  font-size: calc(5px + 2vw);
  font-weight: 500;
  color: gray;
  letter-spacing: -0.8px;
  padding: 1px 0;
}

.noticeSubContainer {
  display: block;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.noticeSubContainer .hnc-pics-box {
  width: 100vw;
  height: -moz-max-content;
  height: max-content;
}
.noticeSubContainer .noticesub_pics {
  width: 100%;
  position: relative;
}
.noticeSubContainer .notice_textbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 6vw;
}
.noticeSubContainer .notice_textbox .noticesub_title {
  width: 100%;
  text-align: left;
  font-size: calc(11px + 2vw);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  padding: 5px 0 15px 0;
  line-height: 1.5;
  font-weight: 500;
}
.noticeSubContainer .notice_textbox .noticesub_date {
  font-size: var(--font-md);
  color: gray;
  padding: 10px 0 20px 0;
}
.noticeSubContainer .notice_textbox .noticesub_post {
  width: 100%;
  text-align: justify;
  overflow: hidden;
  white-space: pre-wrap;
  font-size: calc(7px + 2vw);
  letter-spacing: -0.6px;
  line-height: 1.75;
  word-break: break-all;
  margin-bottom: 50px;
}

.uforumSubContainer {
  display: block;
}
.uforumSubContainer .ufc-pics-box {
  width: 100vw;
  height: -moz-max-content;
  height: max-content;
}
.uforumSubContainer .uforumsub_pics {
  width: 100%;
  position: relative;
}
.uforumSubContainer .uforum_textbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 6vw;
}
.uforumSubContainer .uforum_textbox .uforumsub_title {
  width: 100%;
  text-align: left;
  font-size: calc(11px + 2vw);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  line-height: 1.5;
  font-weight: 500;
  padding-bottom: 10px;
}
.uforumSubContainer .uforum_textbox .uforumsub_date {
  font-size: calc(7px + 2vw);
  color: gray;
  padding: 30px 0 20px 0;
}
.uforumSubContainer .uforum_textbox .uforumsub_post {
  width: 100%;
  text-align: justify;
  overflow: hidden;
  white-space: pre-wrap;
  font-size: calc(7px + 2vw);
  letter-spacing: -0.6px;
  line-height: 1.75;
  word-break: break-all;
  margin-bottom: 50px;
}
.uforumSubContainer .shared_feedprofile_box {
  display: flex;
  padding: 3px 0;
}
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_like,
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_follow,
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_comment,
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_chat {
  margin-right: 20px;
  font-size: var(--font-3xl);
  color: #737373;
  display: flex;
  letter-spacing: -1px;
  align-items: baseline;
}
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_like .feedcount,
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_follow .feedcount,
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_comment .feedcount,
.uforumSubContainer .shared_feedprofile_box .shared_ufeedprofile_chat .feedcount {
  color: var(--CSV-Color);
  font-size: calc(9px + 2vw);
  padding: 0 6px;
}

.houseforum_container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  grid-gap: 30px;
  width: 100%;
}
.houseforum_container .shared_feeditem {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  padding-bottom: 15px;
}
.houseforum_container .forum_list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 6vw;
  border-bottom: 0.5px solid #e4e4e4;
}
.houseforum_container .forum_list .forum_icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.houseforum_container .forum_list .forum_title {
  width: 100%;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(12px + 1vw);
  letter-spacing: -0.3px;
  padding: 6px 0;
}
.houseforum_container .forum_list .forum_date {
  font-size: calc(5px + 2vw);
  font-weight: 500;
  color: gray;
  letter-spacing: -0.8px;
  padding: 1px 0;
}

.forumSubContainer {
  display: grid;
  grid-template: "title" 100px "date" 40px "post" 1fr/1fr;
  overflow: hidden;
  height: calc(var(--vh, 1vh) * 100 - 60px);
}
.forumSubContainer > * {
  display: grid;
}
.forumSubContainer .g-title {
  grid-area: title;
}
.forumSubContainer .g-date {
  grid-area: date;
}
.forumSubContainer .g-post {
  grid-area: post;
  height: calc(var(--vh, 1vh) * 100 - 225px);
  overflow: auto;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.forumSubContainer .g-post::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera*/
}
.forumSubContainer .forumsub_title {
  font-size: calc(18px + 1vw);
  align-items: center;
}
.forumSubContainer .forumsub_date {
  font-size: calc(9px + 1vw);
  color: gray;
}
.forumSubContainer .forumsub_post {
  font-size: calc(12px + 1vw);
  line-height: 1.8;
  text-align: justify;
  border-top: 1px solid;
  padding-top: 12px;
  white-space: pre-wrap;
  white-space: pre-wrap;
  word-break: break-all;
}

.HN-createOpenBox,
.HF-createOpenBox {
  width: 27px;
  line-height: 27px;
  font-size: calc(22px + 1vw);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  right: 25px;
  border-radius: 50%;
  background: var(--CSV-Color);
  color: #ffffff;
}

.shared_feed_3x_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 4px;
}
.shared_feed_3x_container .shared_feeditem {
  width: 100%;
  height: 100%;
}

.shared_feedpics {
  width: 100vw;
  border-top: 1px solid rgba(220, 220, 220, 0.4588235294);
  border-bottom: 1px solid rgba(220, 220, 220, 0.4588235294);
}

.shared_feedprofile_headbox {
  display: flex;
  justify-content: space-between;
  padding: 1.6vh 3vw 1.6vh 20px;
  width: 100vw;
}

.shared_feedprofile_textbox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4vw 6vw;
  margin-bottom: 4px;
}
.shared_feedprofile_textbox .ftitle {
  width: 100%;
  text-align: left;
  font-size: calc(11px + 2vw);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  line-height: 1.5;
  font-weight: 500;
  overflow: hidden;
}
.shared_feedprofile_textbox .ftext {
  width: 100%;
  text-align: justify;
  overflow: hidden;
  white-space: pre-wrap;
  font-size: calc(7px + 2vw);
  letter-spacing: -0.6px;
  line-height: 1.75;
  word-break: break-all;
  padding-top: 25px;
}
.shared_feedprofile_textbox .ftext.more {
  -webkit-line-clamp: unset;
}
.shared_feedprofile_textbox .feedmore {
  padding-top: 10px;
  color: #00502b;
  font-size: var(--font-md);
}
.shared_feedprofile_textbox .feedmore .more {
  font-weight: 500;
}
.shared_feedprofile_textbox .feedmore .more.short {
  color: #00502b;
}

.shared_feedprofile_bottombox {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
}

.shared_feedprofile_icon {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
}

.shared_feedprofile_username {
  font-size: calc(9px + 2vw);
  font-weight: 500;
  letter-spacing: -0.8px;
  padding: 1px 0;
}

.shared_feedprofile_time {
  font-size: var(--font-md);
  font-weight: 400;
  color: gray;
  letter-spacing: -0.8px;
  padding: 2px 0;
}

.shared_feedprofile_like,
.shared_feedprofile_follow,
.shared_feedprofile_comment,
.shared_feedprofile_chat {
  margin: 0 2vw;
  font-size: var(--font-3xl);
  color: #737373;
  display: flex;
  letter-spacing: -1px;
  align-items: baseline;
}
.shared_feedprofile_like .feedcount,
.shared_feedprofile_follow .feedcount,
.shared_feedprofile_comment .feedcount,
.shared_feedprofile_chat .feedcount {
  color: var(--CSV-Color);
  font-size: calc(9px + 2vw);
  padding: 0 6px;
}

.sharedFeed_btn {
  position: absolute;
  right: 25px;
  top: 22px;
  font-size: 20px;
  z-index: 50;
  cursor: pointer;
}
.sharedFeed_btn[data-shared=P] {
  color: red;
}
.sharedFeed_btn[data-shared=P]:after {
  content: "비공개";
}
.sharedFeed_btn[data-shared=S] {
  color: blue;
}
.sharedFeed_btn[data-shared=S]:after {
  content: "공개";
}

.user_TopoStats_box {
  position: absolute;
  z-index: 10;
  display: flex;
  height: 70px;
  background: white;
  width: 90%;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.0901960784);
}

.user_TopotStats_list {
  font-size: calc(1.2vw + 13px);
}

.user_TopoStats_box2 {
  position: relative;
  z-index: 10;
  display: flex;
  padding: 3vw;
  background: white;
  width: 90%;
  margin: auto;
  top: 10px;
  left: 0;
  right: 0;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.0901960784);
}

.user_TopotStats_list2 {
  font-size: calc(1.2vw + 13px);
}

.midTab-scroll-menu.fixed {
  position: fixed;
  top: 50px;
  width: 100%;
  background: white;
  z-index: 20;
}

.midTab-spacing {
  position: relative;
  height: 50px;
}

.profileinfo-Text-Style {
  white-space: pre-wrap;
  overflow: hidden;
}

.profileinfo {
  line-height: 1.6;
  text-align: left;
  font-size: var(--font-lg);
  letter-spacing: -0.5px;
  width: 100%;
  padding-top: 3px;
}
.profileinfo .myPage-Personal-Link {
  font-size: var(--font-lg);
  color: #00502b;
  padding: 2px 1px;
  margin-top: 8px;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  max-width: 50%;
  border-radius: 4px;
  /*블록태그로만들어준다*/
  text-overflow: ellipsis;
  /*말줄임css*/
  white-space: nowrap;
  /*글자를한줄로모아준다*/
  display: block;
  overflow: hidden;
}

.profilelink {
  line-height: 1.6;
  text-align: justify;
  font-size: calc(1vw + 11px);
}

.profileinfo_box {
  padding: 20px 0;
  border-radius: 15px;
  background: rgba(72, 165, 122, 0.0705882353);
  line-height: 1.5;
  border: none;
}

.profileinfo-Text-style {
  height: auto;
  height: -moz-fit-content;
  height: auto !important;
  white-space: pre-wrap;
}

.profileinfo_index {
  font-size: 11.2px;
  padding: 2vw 0;
  color: #404040;
}
.profileinfo_index .idx-icon {
  font-size: 2vw !important;
  text-align: center;
  width: 24px;
}

.profileinfo_value {
  font-size: 11.2px;
  font-family: "Barlow Semi Condensed";
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0px;
  color: #404040;
  padding: 2vw 0;
  letter-spacing: -1px;
}

.helpPage_index {
  font-size: var(--font-2xl);
  padding: 2vw 0;
  color: #404040;
}
.helpPage_index .idx-icon {
  font-size: 5px !important;
  text-align: center;
  width: 24px;
}

.impact_report_box {
  padding: 5px 0px;
  line-height: 1.8;
  font-size: var(--font-xl);
  text-align: justify;
}
.impact_report_box .head-box {
  text-align: left;
  background: var(--admin-maincolor);
  color: white;
  padding: 15px 15px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 10px;
}
.impact_report_box .head-box .env-index {
  font-size: var(--font-xl);
  font-weight: 500;
}
.impact_report_box .head-box .env-val {
  font-size: var(--font-5xl);
  font-weight: 600;
  text-align: right;
}

.ita_block_2 {
  padding: 20px 20px;
  font-size: var(--font-md);
  margin-bottom: 6vh;
  border-radius: 12px;
  border: 1px solid var(--CSV-Color);
}
.ita_block_2 .box_title {
  font-size: var(--font-2xl);
  color: var(--CSV-Color);
}

.report_index {
  padding: 12px 5px;
  color: #404040;
  font-size: var(--font-2xl);
  text-align: center;
  word-break: keep-all;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.report_index .idx-icon {
  border-radius: 50%;
  flex: none;
  width: 30px;
  flex: none;
  height: 30px;
  display: flex;
  color: var(--admin-maincolor);
  font-size: var(--font-xl);
  /* background: var(--admin-maincolor); */
  text-align: center;
  align-items: center;
  justify-content: center;
}
.report_index .idx-title {
  padding-left: 15px;
  text-align: left;
  max-width: 90%;
  font-weight: 500;
}

.report_value {
  flex: none;
  font-size: var(--font-2xl);
  display: flex;
  align-items: baseline;
  color: var(--admin-maincolor);
  font-weight: 500;
  letter-spacing: 0px;
  padding: 5px 0;
  letter-spacing: -1px;
}
.report_value .unit {
  font-size: 13px;
  padding-left: 3px;
  font-weight: 300;
}
.report_value .idx-title {
  color: var(--admin-maincolor);
}

.report_itanews_input {
  font-size: var(--font-xl);
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 10px;
  outline: none;
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 0 0 10px;
  margin: 10px auto;
  border: 1px solid gray;
  letter-spacing: -1px;
}

.report_itanews_submit {
  font-size: var(--font-lg);
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 10px;
  outline: none;
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  margin: 10px auto;
  background: #ebebeb;
  letter-spacing: -1px;
}

.profile_shared {
  font-size: calc(11px + 2vw);
  color: inherit;
}
.profile_shared.on {
  color: #333;
  color: #00502b;
  /* border: 1px solid #333; */
  font-weight: 700;
}
.profile_shared.off {
  color: #333;
  font-weight: 400;
}

.profile-checkbox-switch {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 65px;
  height: 28px;
  border-radius: 30px;
  line-height: 1;
  font-size: 12px;
}
.profile-checkbox-switch .checkbox-on,
.profile-checkbox-switch .checkbox-off {
  float: left;
  color: #fff;
  font-weight: 400;
  transition: all 0.3s ease-out 0s;
}
.profile-checkbox-switch .checkbox-off {
  margin-left: 22px;
  opacity: 1;
}
.profile-checkbox-switch .checkbox-on {
  display: none;
  float: right;
  margin-right: 20px;
  opacity: 0;
}
.profile-checkbox-switch input.profile-input-checkbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 65px;
  height: 28px;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}
.profile-checkbox-switch input.profile-input-checkbox:checked + .checkbox-animate {
  background-color: #389e60;
}
.profile-checkbox-switch input.profile-input-checkbox:checked + .checkbox-animate:before {
  left: 39px;
  background-color: white;
}
.profile-checkbox-switch input.profile-input-checkbox:checked + .checkbox-animate .checkbox-off {
  display: none;
  opacity: 0;
}
.profile-checkbox-switch input.profile-input-checkbox:checked + .checkbox-animate .checkbox-on {
  display: block;
  opacity: 1;
}
.profile-checkbox-switch .checkbox-animate {
  position: relative;
  width: 65px;
  height: 28px;
  background-color: #bbbbbb;
  transition: background 0.25s ease-out 0s;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-checkbox-switch .checkbox-animate:before {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: left 0.3s ease-out 0s;
  z-index: 10;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

.kpi-container {
  font-family: roboto;
  font-size: 30px;
}

button#butInstall {
  background-color: inherit;
  border: 1px solid white;
  color: white;
  font-size: 1em;
  padding: 0.75em;
  z-index: 2000;
}

#HN_cudModal .hnc-pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3vw 0;
  overflow-x: scroll;
  scrollbar-width: none;
}
#HN_cudModal .hnc-pics-uploadBox::-webkit-scrollbar {
  display: none;
}
#HN_cudModal .hnc-pics-uploadBox .hnc-upload-plus {
  position: relative;
  width: 25%;
  margin-right: 10px;
  border: 1px solid gainsboro;
  border-radius: 10px;
  cursor: pointer;
}
#HN_cudModal .hnc-pics-uploadBox .hnc-upload-div {
  position: relative;
  width: 25%;
  margin-right: 10px;
  border: 1px solid gainsboro;
  border-radius: 10px;
}
#HN_cudModal .hnc-pics-uploadBox .hnc-upload-div .hnc-upload-delete {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--CSV-Color);
}
#HN_cudModal .hnc-pics-uploadBox .hnc-upload-div .hnc-upload-on {
  border-radius: 10px;
  width: 85px;
}
#HN_cudModal .hnc--box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
}
#HN_cudModal .hnc--label {
  font-size: calc(12px + 1vw);
  font-weight: 500;
  padding: 12px 2px;
  width: 100%;
}
#HN_cudModal .hnc--inputnone {
  display: inline-block;
  font-size: var(--font-xl);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}
#HN_cudModal .hnc_imgNum_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#HN_cudModal .hnc_imgNum_style .hnc_UploadNum {
  color: var(--CSV-Color);
  font-weight: 500;
}
#HN_cudModal .hnc_postCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#HN_cudModal .hnc_postCount_style .hnc_postCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#HN_cudModal .hnc_titleCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#HN_cudModal .hnc_titleCount_style .hnc_titleCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#HN_cudModal textarea {
  border-radius: 8px;
  width: 100%;
  height: 500px;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
}
#HN_cudModal textarea::-moz-placeholder {
  color: black;
}
#HN_cudModal textarea::placeholder {
  color: black;
}
#HN_cudModal textarea:focus {
  outline: none;
}
#HN_cudModal textarea:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#HN_cudModal textarea:-webkit-autofill, #HN_cudModal textarea:-webkit-autofill:hover, #HN_cudModal textarea:-webkit-autofill:focus, #HN_cudModal textarea:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#HN_cudModal input[type=date]::-webkit-calendar-picker-indicator {
  display: block;
}
#HN_cudModal input {
  border-radius: 8px;
  width: 100%;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: var(--font-xl);
  position: relative;
}
#HN_cudModal input::-moz-placeholder {
  color: black;
}
#HN_cudModal input::placeholder {
  color: black;
}
#HN_cudModal input:focus {
  outline: none;
}
#HN_cudModal input:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#HN_cudModal input:-webkit-autofill, #HN_cudModal input:-webkit-autofill:hover, #HN_cudModal input:-webkit-autofill:focus, #HN_cudModal input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#HN_cudModal button.hnc--submit {
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  height: 50px;
  font-weight: 500;
  margin: 2vh 6vw;
}
#HN_cudModal button.hnc--submit.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
#HN_cudModal button.hnc--submit:focus, #HN_cudModal button.hnc--submit:active {
  background: black;
  color: white;
}

#HF_cudModal .hfc-pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3vw 0;
  overflow-x: scroll;
  scrollbar-width: none;
}
#HF_cudModal .hfc-pics-uploadBox::-webkit-scrollbar {
  display: none;
}
#HF_cudModal .hfc-pics-uploadBox .hfc-upload-plus {
  position: relative;
  width: 85px;
  margin-right: 10px;
  border: 1px solid gainsboro;
  border-radius: 10px;
  cursor: pointer;
}
#HF_cudModal .hfc-pics-uploadBox .hfc-upload-div {
  position: relative;
  width: 85px;
  margin-right: 10px;
  border: 1px solid gainsboro;
  border-radius: 10px;
}
#HF_cudModal .hfc-pics-uploadBox .hfc-upload-div .hfc-upload-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--CSV-Color);
}
#HF_cudModal .hfc-pics-uploadBox .hfc-upload-div .hfc-upload-on {
  border-radius: 10px;
  width: 85px;
}
#HF_cudModal .hfc--box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
}
#HF_cudModal .hfc--label {
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 12px 2px;
  width: 100%;
}
#HF_cudModal .hfc--inputnone {
  display: inline-block;
  font-size: var(--font-xl);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}
#HF_cudModal .hfc_imgNum_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#HF_cudModal .hfc_imgNum_style .hfc_UploadNum {
  color: var(--CSV-Color);
  font-weight: 500;
}
#HF_cudModal .hfc_postCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#HF_cudModal .hfc_postCount_style .hfc_postCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#HF_cudModal .hfc_titleCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#HF_cudModal .hfc_titleCount_style .hfc_titleCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#HF_cudModal .hfc-submit-box {
  display: flex;
  border-top: 1px solid gainsboro;
}
#HF_cudModal textarea {
  border-radius: 8px;
  width: 100%;
  height: 500px;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
  letter-spacing: -1px;
}
#HF_cudModal textarea::-moz-placeholder {
  color: black;
}
#HF_cudModal textarea::placeholder {
  color: black;
}
#HF_cudModal textarea:focus {
  outline: none;
}
#HF_cudModal textarea:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#HF_cudModal textarea:-webkit-autofill, #HF_cudModal textarea:-webkit-autofill:hover, #HF_cudModal textarea:-webkit-autofill:focus, #HF_cudModal textarea:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#HF_cudModal input[type=date]::-webkit-calendar-picker-indicator {
  display: block;
}
#HF_cudModal input {
  border-radius: 8px;
  width: 100%;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: var(--font-xl);
  position: relative;
  letter-spacing: -1px;
}
#HF_cudModal input::-moz-placeholder {
  color: black;
}
#HF_cudModal input::placeholder {
  color: black;
}
#HF_cudModal input:focus {
  outline: none;
}
#HF_cudModal input:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#HF_cudModal input:-webkit-autofill, #HF_cudModal input:-webkit-autofill:hover, #HF_cudModal input:-webkit-autofill:focus, #HF_cudModal input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#HF_cudModal button.hfc--submit {
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  height: 50px;
  font-weight: 500;
  margin: 2vh 6vw;
}
#HF_cudModal button.hfc--submit.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
#HF_cudModal button.hfc--submit:focus, #HF_cudModal button.hfc--submit:active {
  background: black;
  color: white;
}

.houseforum_container .hfc-pics-box {
  width: 100%;
  position: relative;
  height: -moz-max-content;
  height: max-content;
}
.houseforum_container .hfc-pics-box .hfc-pics-plus {
  width: 100%;
  height: auto;
  height: -moz-fit-content;
  height: auto;
  border-radius: 20px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
  font-size: 30px;
  border-style: dotted;
  margin-right: 10px;
}
.houseforum_container .hfc-pics-box .hfc-pics-frame {
  width: 80px;
  height: 80px;
  border-radius: 15px;
}

.userforum_container {
  position: relative;
  letter-spacing: -0.6px;
  height: -moz-max-content;
  height: max-content;
}
.userforum_container .user_shared_feedpics {
  width: 30vw;
  height: 30vw;
}
.userforum_container .shared_feeditem {
  border-bottom: 1px solid gainsboro;
}
.userforum_container .uforum_title {
  width: 50vw;
  font-size: calc(10px + 2vw);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  margin: 6px 0;
}
.userforum_container .shared_ufeedprofile_like,
.userforum_container .shared_ufeedprofile_comment {
  margin-right: 3vw;
  font-size: calc(5px + 2vw);
  color: #737373;
  display: flex;
  letter-spacing: -1px;
  align-items: baseline;
}
.userforum_container .shared_ufeedprofile_like .ufeedcount,
.userforum_container .shared_ufeedprofile_comment .ufeedcount {
  color: var(--CSV-Color);
  font-size: var(--font-md);
  padding: 0 6px;
}

#forumLikeWhoModal .forumLikeWhoContainer {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  padding: 0 25px;
}
#forumLikeWhoModal .forumLikeWhoContainer .forumLikewho-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 4px;
  overflow: hidden;
  width: 100%;
  padding-top: 15px;
}
#forumLikeWhoModal .forumLikeWhoContainer .forumLikewho-list .g-all {
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: calc(var(--vh, 1vh) * 100 - 60px);
  width: 100%;
}
#forumLikeWhoModal .forumLikeWhoContainer .forumLikewho-list .forumLikewho-item {
  font-size: calc(10px + 1vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 13px 0;
  gap: 8px;
  letter-spacing: -0.5px;
}

#forumsubPageTalk .forumTalk-list-container {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
#forumsubPageTalk .forumTalk-list-container .forumTalk-list {
  padding: 1vh 2vw 1vh 25px;
  background: white;
  border-radius: 10px;
  margin: 5px 0;
}
#forumsubPageTalk .forumTalk-list-container .forumTalk-list-none {
  padding: 14vh 25px;
  background: white;
  border-radius: 10px;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 25px;
  font-size: calc(10px + 2vw);
}
#forumsubPageTalk .forumTalk-list-container .forumTalk-list-none .no-reply-img {
  background: url(../public/img/util/no-reply.svg) center center no-repeat;
  width: 75px;
  height: 75px;
}
#forumsubPageTalk .forumTalk-list-container .forum_talk_icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
#forumsubPageTalk .forumTalk-list-container .forum_talk_who {
  font-size: calc(9px + 1vw);
  letter-spacing: -0.2px;
  font-weight: 500;
}
#forumsubPageTalk .forumTalk-list-container .forum_talk_time {
  font-size: calc(9px + 1vw);
  color: gray;
  letter-spacing: -0.7px;
  padding: 0 5px;
  white-space: nowrap;
}
#forumsubPageTalk .forumTalk-list-container .forum_talk_cmtlist {
  height: auto;
  height: -moz-fit-content;
  height: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 60vw;
  line-height: 1.6;
  text-align: left;
  font-size: var(--font-lg);
  letter-spacing: -0.5px;
  height: auto;
  height: -moz-fit-content;
  height: auto;
  padding: 8px 14px;
}
#forumsubPageTalk .forumTalk-list-container .forum_talk_cmtlist_like {
  display: flex;
  font-size: 11px;
  align-items: baseline;
  line-height: 1;
  position: relative;
  left: 6px;
}
#forumsubPageTalk .forumTalk-list-container .forum_talk_cmt_reply {
  display: flex;
  font-size: var(--font-xl);
  color: blueviolet;
  letter-spacing: -0.2px;
}
#forumsubPageTalk .forum-talksubmit-reply-guide {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  font-size: 12px;
  display: none;
  background: aliceblue;
}
#forumsubPageTalk .forum-talksubmit-reply-guide .cmtWho {
  padding: 3px;
  font-size: 14px;
}
#forumsubPageTalk .forum-talksubmit-reply-guide .cmtComment {
  padding: 3px;
  font-size: 12px;
  color: gray;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 720px;
}
#forumsubPageTalk .closeBtn {
  display: inline-block;
}
#forumsubPageTalk .closeBtn:after {
  display: inline-block;
  content: "×";
  font-size: 15pt;
}
#forumsubPageTalk .forum-talksubmit-container {
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: 10px 10px 10px 20px;
  border-top: 1px solid gainsboro;
}
#forumsubPageTalk .forum-talksubmit-container .talksubmit_textarea_box {
  width: 100%;
  margin: 0 12px 0 8px;
  position: relative;
  display: flex;
  align-items: flex-end;
}
#forumsubPageTalk .forum-talksubmit-container .talksubmit_textarea_box .textarea_delete {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 50px;
  font-size: 16px;
  margin: 0 7px 0 10px;
  color: #878787;
  z-index: 5;
  cursor: pointer;
}
#forumsubPageTalk .forum-talksubmit-container textarea {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  border-radius: 0 8px 8px 8px;
  width: 100%;
  height: auto;
  height: -moz-fit-content;
  height: auto;
  border: none;
  color: black;
  background: aliceblue;
  padding: 12px 12px;
  box-shadow: none;
  font-size: var(--font-lg);
  position: relative;
  line-height: 1.6;
  word-break: break-all;
  white-space: pre-wrap;
  resize: none;
  max-height: calc(var(--vh, 1vh) * 70);
}
#forumsubPageTalk .forum-talksubmit-container textarea::-moz-placeholder {
  color: black;
}
#forumsubPageTalk .forum-talksubmit-container textarea::placeholder {
  color: black;
}
#forumsubPageTalk .forum-talksubmit-container textarea:focus {
  outline: none;
}
#forumsubPageTalk .forum-talksubmit-container textarea:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#forumsubPageTalk .forum-talksubmit-container textarea:-webkit-autofill, #forumsubPageTalk .forum-talksubmit-container textarea:-webkit-autofill:hover, #forumsubPageTalk .forum-talksubmit-container textarea:-webkit-autofill:focus, #forumsubPageTalk .forum-talksubmit-container textarea:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#forumsubPageTalk .forum-talksubmit-container .forum_talksubmit_icon {
  font-size: 15px;
  width: 50px;
  height: 50px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#forumsubPageTalk .forum-talksubmit-container .forum_talksubmit_btn {
  font-size: 20px;
  width: 50px;
  height: 50px;
  padding: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.userfolio_container {
  position: relative;
  letter-spacing: -0.6px;
}
.userfolio_container .user_shared_feedpics {
  width: 30vw;
  height: 30vw;
}
.userfolio_container .shared_feeditem {
  border-bottom: 1px solid gainsboro;
}
.userfolio_container .ufolio_title {
  width: 50vw;
  font-size: var(--font-3xl);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  margin: 6px 0;
}

.data-preloading-box {
  width: 100%;
  display: flex;
  height: 100%;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.standardModal {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: absolute;
  background: rgba(0, 0, 0, 0.3098039216);
  display: none;
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.standardModal .standardModal-contents {
  background: white;
  border-radius: 20px;
  padding: 20px;
  height: -moz-max-content;
  height: max-content;
  width: 80vw;
}

.standardModal_pop {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3098039216);
  display: none;
  z-index: 500;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.5px;
}
.standardModal_pop .standardModal-contents-pop {
  background: white;
  border-radius: 20px;
  padding: 20px;
  height: -moz-max-content;
  height: max-content;
  width: 80vw;
  max-width: 300px;
}
.standardModal_pop .title {
  font-size: var(--font-2xl);
  font-weight: 600;
  padding: 10px 0 10px 0;
}
.standardModal_pop .desc {
  font-size: var(--font-xl);
  line-height: 1.5;
  font-weight: 400;
  padding: 10px 0;
}
.standardModal_pop .funcBtn_close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: black;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
}
.standardModal_pop .funcBtn_close.fill {
  background: var(--CSV-Color);
  color: white;
  border-radius: 10px;
}
.standardModal_pop .funcBtn_close.line {
  background: none;
  color: var(--CSV-Color);
  border: 1px solid var(--CSV-Color);
  border-radius: 10px;
}
.standardModal_pop .funcBtn_basic {
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  color: black;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
}
.standardModal_pop .funcBtn_basic.fill {
  background: var(--CSV-Color);
  color: white;
  border-radius: 10px;
}
.standardModal_pop .funcBtn_basic2 {
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  color: black;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
  margin: 0 3vw;
}
.standardModal_pop .funcBtn_basic2.fill {
  background: var(--CSV-Color);
  color: white;
  border-radius: 10px;
}
.standardModal_pop .funcBtn_basic2.line {
  background: none;
  color: var(--CSV-Color);
  border: 1px solid var(--CSV-Color);
  border-radius: 10px;
}

.standardModal_poster {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: absolute;
  background: white;
  overflow: auto;
  display: none;
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.standardModal_poster .standardModal-contents-pop {
  background: white;
  border-radius: 12px;
  height: -moz-max-content;
  height: max-content;
  width: 100%;
  margin-bottom: 100px;
  animation: fadeIn 0.4s ease-in-out;
}
.standardModal_poster .closebtn {
  position: fixed;
  bottom: 0;
  margin: 10px;
  left: 0;
  right: 0;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid var(--CSV-Color);
  background: #fbeb00;
  font-size: 18px;
  font-weight: 500;
  z-index: 5;
  text-align: center;
  cursor: pointer;
}

#talkReplyModal .cmtLikeReply-title {
  font-size: 13px;
  font-weight: 500;
  padding: 5px 0 20px 0;
}
#talkReplyModal .cmtLikeReply-title .cmtWho {
  padding: 3px;
  font-size: 14px;
}
#talkReplyModal .cmtLikeReply-title .cmtComment {
  padding: 3px;
  font-size: 12px;
  color: gray;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#talkReplyModal .cmtLikeReply-body {
  font-size: 15px;
  font-weight: 500;
}
#talkReplyModal .cmtLikeReply-body .cmt_replyBtn {
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  color: black;
}
#talkReplyModal .cmtLikeReply-submitBtn {
  font-size: 15px;
  font-weight: 500;
}

/* ------------------------------ 
 * 사진 업로드 
 --------------------------------*/
.pics-uploadBox-basic {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 15px;
  justify-content: flex-start;
}
.pics-uploadBox-basic .pic-upload-plus {
  position: relative;
  width: calc(33.3333333333% - 15px);
  margin: 0 7.5px;
  border: 1px solid gainsboro;
  border-radius: 10px;
  cursor: pointer;
}
.pics-uploadBox-basic .pic-upload-div {
  position: relative;
  width: calc(33.3333333333% - 15px);
  margin: 0 5px;
  border-radius: 10px;
}
.pics-uploadBox-basic .pic-upload-div .plogpic-upload-delete {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: var(--font-lg);
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--CSV-Color);
}
.pics-uploadBox-basic .pic-upload-div .pic-upload-on {
  border-radius: 10px;
  width: 100%;
}

#plogpic_cudModal {
  z-index: 200;
}
#plogpic_cudModal .plogpic-pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 15px;
  justify-content: flex-start;
}
#plogpic_cudModal .plogpic-pics-uploadBox .plogpic-upload-plus {
  position: relative;
  width: calc(33.3333333333% - 15px);
  margin: 0 7.5px;
  border: 1px solid gainsboro;
  border-radius: 10px;
  cursor: pointer;
}
#plogpic_cudModal .plogpic-pics-uploadBox .plogpic-upload-div {
  position: relative;
  width: calc(33.3333333333% - 15px);
  margin: 0 5px;
  border-radius: 10px;
}
#plogpic_cudModal .plogpic-pics-uploadBox .plogpic-upload-div .plogpic-upload-delete {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--CSV-Color);
}
#plogpic_cudModal .plogpic-pics-uploadBox .plogpic-upload-div .plogpic-upload-on {
  border-radius: 10px;
  width: 100%;
}
#plogpic_cudModal .plogpic--box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
}
#plogpic_cudModal .plogpic--label {
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 12px 2px;
  width: 100%;
}
#plogpic_cudModal .plogpic--inputnone {
  display: inline-block;
  font-size: var(--font-xl);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}
#plogpic_cudModal .plogpic_imgNum_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#plogpic_cudModal .plogpic_imgNum_style .plogpic_UploadNum {
  color: var(--CSV-Color);
  font-weight: 500;
}
#plogpic_cudModal .plogpic_postCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#plogpic_cudModal .plogpic_postCount_style .plogpic_postCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#plogpic_cudModal .plogpic_titleCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
#plogpic_cudModal .plogpic_titleCount_style .plogpic_titleCount {
  color: var(--CSV-Color);
  font-weight: 500;
}
#plogpic_cudModal .plogpic-submit-box {
  display: flex;
  border-top: 1px solid gainsboro;
}
#plogpic_cudModal textarea {
  border-radius: 8px;
  width: 100%;
  height: 500px;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
  letter-spacing: -1px;
}
#plogpic_cudModal textarea::-moz-placeholder {
  color: black;
}
#plogpic_cudModal textarea::placeholder {
  color: black;
}
#plogpic_cudModal textarea:focus {
  outline: none;
}
#plogpic_cudModal textarea:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#plogpic_cudModal textarea:-webkit-autofill, #plogpic_cudModal textarea:-webkit-autofill:hover, #plogpic_cudModal textarea:-webkit-autofill:focus, #plogpic_cudModal textarea:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#plogpic_cudModal input[type=date]::-webkit-calendar-picker-indicator {
  display: block;
}
#plogpic_cudModal input {
  border-radius: 8px;
  width: 100%;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: var(--font-xl);
  position: relative;
  letter-spacing: -1px;
}
#plogpic_cudModal input::-moz-placeholder {
  color: black;
}
#plogpic_cudModal input::placeholder {
  color: black;
}
#plogpic_cudModal input:focus {
  outline: none;
}
#plogpic_cudModal input:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
#plogpic_cudModal input:-webkit-autofill, #plogpic_cudModal input:-webkit-autofill:hover, #plogpic_cudModal input:-webkit-autofill:focus, #plogpic_cudModal input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}
#plogpic_cudModal button.plogpic--submit {
  border-radius: 10px;
  background: black;
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  height: 50px;
  font-weight: 500;
  margin: 20px 10px;
}
#plogpic_cudModal button.plogpic--submit.line {
  background: none;
  border: 1px solid black;
  color: black;
}
#plogpic_cudModal button.plogpic--submit:focus, #plogpic_cudModal button.plogpic--submit:active {
  background: black;
  color: white;
}

/* ------------------------------ 
 * 쓰레기 뉴스 - 활동기록 사진추가/삭제
 --------------------------------*/
#tagpic_cudModal {
  z-index: 200;
}

.tagpic-pics-uploadBox {
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 15px;
  justify-content: flex-start;
}
.tagpic-pics-uploadBox .tagpic-upload-plus {
  position: relative;
  width: calc(33.3333333333% - 15px);
  margin: 0 7.5px;
  border: 1px solid gainsboro;
  border-radius: 10px;
  cursor: pointer;
}
.tagpic-pics-uploadBox .tagpic-upload-plus.thumb {
  width: 70px;
}
.tagpic-pics-uploadBox .tagpic-upload-div {
  position: relative;
  width: calc(33.3333333333% - 15px);
  margin: 0 5px;
  border-radius: 10px;
}
.tagpic-pics-uploadBox .tagpic-upload-div.thumb {
  width: 70px;
}
.tagpic-pics-uploadBox .tagpic-upload-div .tagpic-upload-delete {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  background: white;
  color: var(--CSV-Color);
}
.tagpic-pics-uploadBox .tagpic-upload-div .tagpic-upload-delete.black {
  background: #000000;
  color: #ffffff;
  font-size: 15px;
}
.tagpic-pics-uploadBox .tagpic-upload-div .tagpic-upload-on {
  border-radius: 10px;
  width: 100%;
}

.tagpic--box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
}

.tagpic--label {
  font-size: var(--font-2xl);
  font-weight: 500;
  padding: 12px 2px;
  width: 100%;
}

.tagpic--inputnone {
  display: inline-block;
  font-size: var(--font-xl);
  color: #ff493c;
  font-weight: 500;
  padding: 10px 2px;
}

.tagpic_imgNum_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.tagpic_imgNum_style .tagpic_UploadNum {
  color: var(--CSV-Color);
  font-weight: 500;
}

.tagpic_postCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.tagpic_postCount_style .tagpic_postCount {
  color: var(--CSV-Color);
  font-weight: 500;
}

.tagpic_titleCount_style {
  font-family: roboto;
  letter-spacing: -1.3px;
  font-weight: 300;
  font-size: 15px;
  padding-right: 15px;
  display: flex;
}
.tagpic_titleCount_style .tagpic_titleCount {
  color: var(--CSV-Color);
  font-weight: 500;
}

.tagpic-submit-box {
  display: flex;
  border-top: 1px solid gainsboro;
}

textarea {
  border-radius: 8px;
  width: 100%;
  height: 500px;
  border: none;
  color: rgba(2, 25, 41, 0.9019607843);
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 20px 20px;
  box-shadow: none;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-size: var(--font-xl);
  position: relative;
  line-height: 1.7;
  word-break: break-all;
  resize: none;
  letter-spacing: -1px;
}
textarea::-moz-placeholder {
  color: black;
}
textarea::placeholder {
  color: black;
}
textarea:focus {
  outline: none;
}
textarea:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

input[type=date]::-webkit-calendar-picker-indicator {
  display: block;
}

input {
  border-radius: 8px;
  width: 100%;
  height: 50px;
  border: none;
  color: black;
  background: rgba(149, 149, 149, 0.1019607843);
  padding: 3px 20px;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: var(--font-xl);
  position: relative;
  letter-spacing: -1px;
}
input::-moz-placeholder {
  color: black;
}
input::placeholder {
  color: black;
}
input:focus {
  outline: none;
}
input:-internal-autofill-selected {
  background-color: rgba(149, 149, 149, 0.1019607843) !important;
  box-shadow: 0 0 0 100px rgba(149, 149, 149, 0.1019607843) inset !important;
  color: black !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: black !important;
  -moz-transition: background-color 5000s ease-in-out 0s;
  -ms-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
}

button.tagpic--submit {
  border-radius: 10px;
  background: var(--CSV-Color);
  font-size: 17px;
  color: white;
  width: -webkit-fill-available;
  letter-spacing: -1px;
  height: 50px;
  font-weight: 500;
  margin: 2vh 6vw;
}
button.tagpic--submit.line {
  background: none;
  border: 1px solid var(--CSV-Color);
  color: var(--CSV-Color);
}
button.tagpic--submit:focus, button.tagpic--submit:active {
  background: black;
  color: white;
}

.mainPage_info_panel {
  display: grid;
  z-index: 100;
  position: fixed !important;
  top: 30%;
  right: 0px;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
  color: var(--CSV-Color);
  z-index: 100;
  border-width: 2px 0px 2px 2px;
  padding: 0px 17px 0px 10px;
  width: 33px;
  height: 40px;
  background: var(--CSV-Color);
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  border-radius: 13px 0 0 13px;
}
.mainPage_info_panel.text {
  font-family: pretendard;
  padding: 8px 17px 8px 10px;
  line-height: 1.3;
  height: 84px;
  border: 1px solid var(--CSV-Color);
  border-width: 1px 0px 1px 2px;
  color: var(--CSV-Color);
  background: none;
}

.disnone {
  display: none !important;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none !important;
}

.csv_infomanual {
  border: 1px solid black;
  padding: 7px 17px;
  width: auto;
  width: auto;
  width: -moz-fit-content;
  height: -moz-fit-content;
  height: auto;
  margin-top: 14px;
  border-radius: 11px;
  background: yellow;
  color: black;
}
.csv_infomanual.type1 {
  background: white;
}
.csv_infomanual:focus, .csv_infomanual:hover {
  background: white;
  color: var(--CSV-Color);
}

.text-center {
  text-align: center;
}

.dataplog_dragbox {
  width: 100%;
  height: 400px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 7px;
  touch-action: none;
}

.dataplog_dragitem {
  width: 100px;
  height: 100px;
  background-color: rgb(245, 230, 99);
  border: 10px solid rgba(136, 136, 136, 0.5);
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dataplog_dragitem:hover {
  cursor: pointer;
  border-width: 20px;
}
.dataplog_dragitem:active {
  background-color: rgb(168, 218, 220);
}

#wcontainer {
  position: fixed;
  border-radius: 10px;
  background-color: #ABABAB;
  border: solid 1px black;
  font: 15px arial, sans-serif;
  text-align: center;
  z-index: 200;
  cursor: default;
}

#wslider {
  position: fixed;
  border-radius: 10px;
  background: linear-gradient(to right, #1e5799 0%, #89b3d3 51%, #1e5799 100%);
  font: 11px arial, sans-serif;
  text-align: center;
  cursor: default;
  z-index: 300;
}

.logo_institutions {
  display: flex;
  position: absolute;
  /* width: 100%; */
  top: 60px;
  gap: 2vw;
  z-index: 100;
  padding: 0px 8vw;
  /* margin-bottom: 10px; */
  /* right: 3vw; */
  overflow: hidden;
  width: 100%;
  height: 27px;
  border-bottom: 1px solid lightgray;
  background: var(--CSV-BColor);
  /* justify-content: space-around; */
  align-items: flex-start;
}

.pc_topLeft_intro {
  text-align: left;
  color: white;
  font-size: 25px;
  line-height: 1.5;
  margin-top: 30px;
  position: absolute;
  top: 20px;
  left: 40px;
}

.pc_contributor_style {
  position: absolute;
  top: 20px;
  right: calc(20px + 11vw);
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  font-size: 14px;
  color: white;
}

.pc_inline_contributors {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  color: white;
}

.main-ita-partner-home-container {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
}
@media screen and (min-width: 992px) {
  .main-ita-partner-home-container {
    max-width: var(--pc-body-max-wd);
  }
}
.main-ita-partner-home-container .mission-word {
  font-size: var(--font-5xl);
  font-weight: 700;
  color: var(--cl-text-b-40);
  line-height: 1.45;
  letter-spacing: -0.5px;
  padding: 20px;
  opacity: 0.4;
}
.main-ita-partner-home-container .link-tab-box {
  position: absolute;
  top: 50px;
  color: var(--cl-text-b-40);
  right: 0px;
  padding: 20px 15px;
  font-size: var(--font-2xl);
  z-index: 5;
}
.main-ita-partner-home-container .link-tab-box .item {
  color: var(--cl-text-b-70);
  font-size: var(--font-xl);
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
}
.main-ita-partner-home-container .link-tab-box .item:hover, .main-ita-partner-home-container .link-tab-box .item.active {
  background-color: var(--cl-text-b-245);
}
.main-ita-partner-home-container .start-btn-box {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 7;
  bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(10px, 30vw, 100px);
  height: clamp(10px, 30vw, 100px);
  background: rgba(255, 255, 255, 0.1294117647);
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.0705882353);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  margin: auto;
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.1098039216);
  border-radius: 50%;
  cursor: pointer;
}
.main-ita-partner-home-container .start-btn-box:hover {
  transform: scale(1.05);
}
.main-ita-partner-home-container .start-btn-box .start-btn {
  text-align: center;
}
.main-ita-partner-home-container .start-btn-box .start-btn .icon {
  padding-bottom: 5px;
  font-size: var(--font-6xl);
}
.main-ita-partner-home-container .start-btn-box .start-btn .text {
  font-weight: 600;
  font-size: var(--font-xl);
}
.main-ita-partner-home-container .background_bannerIMG {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
  z-index: -1;
  bottom: 0;
}
.main-ita-partner-home-container .stat_infopanel-V6 {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  position: absolute;
  top: 88px;
  font-size: var(--font-xl);
  letter-spacing: -0.3px;
  right: 0;
  left: 0;
  padding: 24px 24px;
  max-height: 100%;
  overflow: hidden;
  outline: none;
  z-index: 10;
}
.main-ita-partner-home-container .stat_infopanel-V6:after {
  content: "\f103";
  font-family: FontAwesome;
  position: absolute;
  left: 50vw;
  top: 20px;
  letter-spacing: -0.6px;
  color: var(--cl-text-b-120);
  font-size: var(--font-lg);
  line-height: 15px;
}
.main-ita-partner-home-container .stat_infopanel-V6.active:after {
  content: "\f102";
}
.main-ita-partner-home-container .stat_infopanel-V6 .stat_infopanel_content {
  display: none;
  max-height: 100%;
  margin-top: 72px;
  padding: 21px 28px;
  font-size: 3.9vw;
  white-space: nowrap;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.431372549);
  color: white;
  background: var(--CSV-Color);
  font-weight: 400;
  -webkit-backdrop-filter: blur(31px);
          backdrop-filter: blur(31px);
  line-height: 7.25px;
  word-break: break-all;
  text-align: justify;
  box-shadow: 1px 1px 12px 3px rgba(0, 88, 34, 0.1215686275);
}
.main-ita-partner-home-container .stat_infopanel-V6 .stat_infopanel_content.wrap {
  white-space: pre-line;
}
.main-ita-partner-home-container .stat_boards-V6 {
  position: absolute;
  display: grid;
  grid-template: "a " 100px/1fr;
  width: 100%;
  top: 65px;
  padding: 10px 20px;
  /* border-radius: 50%; */
  left: 0;
  margin: auto;
  z-index: 5;
  overflow: hidden;
  color: var(--cl-text-b-40);
}
.main-ita-partner-home-container .stat_boards-V6 > * {
  display: grid;
  position: relative;
  margin-bottom: 0px;
}
.main-ita-partner-home-container .stat_boards-V6 > .ga {
  grid-area: a;
  width: 100%;
  justify-content: flex-start;
}
.main-ita-partner-home-container .stat_boards-V6 > .gb {
  grid-area: b;
}
.main-ita-partner-home-container .stat_boards-V6 > .gc {
  grid-area: c;
}
.main-ita-partner-home-container .stat_boards-V6 > .gd {
  grid-area: d;
}
.main-ita-partner-home-container .slide-style {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
}
.main-ita-partner-home-container .statclass2 {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  font-weight: 700;
  font-size: var(--font-7xl);
  position: relative;
  letter-spacing: -1px;
}
.main-ita-partner-home-container .statclass2:after {
  font-size: var(--font-xs);
  font-family: "FontAwesome";
  position: absolute;
  top: 2px;
  right: -16px;
  font-style: normal;
  font-weight: 300;
}
.main-ita-partner-home-container .statclass2.totaltrash:after {
  content: "\f1b8";
}
.main-ita-partner-home-container .statclass2.totaluser:after {
  content: "\f004";
}
.main-ita-partner-home-container .statclass2.totalsigned:after {
  content: "\f184";
}
.main-ita-partner-home-container .statclass2.totaldis:after {
  content: "\f70c";
}
.main-ita-partner-home-container .statclass2.totalwalk:after {
  content: "\f54b";
  transform: rotate(280deg);
  -webkit-transform: rotate(280deg);
  -moz-transform: rotate(280deg);
  -ms-transform: rotate(280deg);
  -o-transform: rotate(280deg);
}
.main-ita-partner-home-container .statclass2.totalco2save:after {
  content: "\f0ed";
}
.main-ita-partner-home-container .statclass2.totalforestMakePercent:after {
  content: "\f024";
}
.main-ita-partner-home-container .statclass2.totalecologySavePercent:after {
  content: "\f024";
}
.main-ita-partner-home-container .statclass2.totalforestAmount:after {
  content: "\f1bb";
}
.main-ita-partner-home-container .statclass2.totalecologySaveAmount:after {
  content: "\f700";
}
.main-ita-partner-home-container .totaluser_unit,
.main-ita-partner-home-container .totalsigned_unit,
.main-ita-partner-home-container .totaltrash_unit,
.main-ita-partner-home-container .totalco2save_unit,
.main-ita-partner-home-container .totalecologyAmount_unit,
.main-ita-partner-home-container .totalforestAmount_unit,
.main-ita-partner-home-container .totalecologyPercent_unit,
.main-ita-partner-home-container .totalforestPercent_unit,
.main-ita-partner-home-container .totaldis_unit,
.main-ita-partner-home-container .totalwalk_unit,
.main-ita-partner-home-container .total_goal_percent_unit {
  opacity: 0.7;
  padding-left: 1px;
  letter-spacing: -0.5px;
  font-size: var(--font-md);
}

.la-ball-clip-rotate,
.la-ball-clip-rotate > div {
  position: relative;
  box-sizing: border-box;
}

.la-ball-clip-rotate {
  display: block;
  font-size: 0;
  color: #fff;
  width: 32px;
  height: 32px;
}

.la-ball-clip-rotate > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
  width: 32px;
  height: 32px;
  background: transparent;
  border-width: 2px;
  border-bottom-color: transparent;
  border-radius: 100%;
  animation: ball-clip-rotate 0.75s linear infinite;
}

#__loader {
  background-color: var(--h-color-background-level-1);
  z-index: 10001;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}

#__loader .la-ball-clip-rotate {
  color: var(--h-color);
}

@keyframes ball-clip-rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ------------------------------ 
 * 미션 > 플로깅 > 섹션컨테이너 
 --------------------------------*/
section.plogging-section-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
section.plogging-section-container .prepare-text {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
  padding: 2px 10px;
  position: absolute;
  top: 40px;
}
section.plogging-section-container .prepare-text .hello {
  font-size: var(--font-5xl);
  font-weight: 700;
  color: var(--cl-text-b-40);
  line-height: 1.45;
  letter-spacing: -0.5px;
  padding: 20px;
  opacity: 0.4;
  font-size: var(--font-7xl);
  color: black;
  opacity: 1;
  padding: 10px 20px;
}
section.plogging-section-container .prepare-text .sub {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-40);
  line-height: 1.5;
  letter-spacing: -0.5px;
  padding: 0px 20px;
  opacity: 0.8;
}
section.plogging-section-container .prepare-text .info {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--cl-ita-red-40);
  line-height: 1.5;
  letter-spacing: -0.5px;
  padding: 4px 20px;
  opacity: 1;
}

.select-basic {
  padding: 10px 15px;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
  background: var(--cl-text-b-245);
  border: 1px solid var(--cl-text-b-245);
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  text-align: left;
  outline: none;
  position: relative;
  z-index: 1;
}
.select-basic::-ms-expand {
  display: none;
}
.select-basic::after {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cl-text-b-40);
}
.select-basic option {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-40);
}

.ita-tooltip {
  padding: 6px 13px;
  background-color: var(--admin-maincolor);
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  position: absolute;
  letter-spacing: -0.5px;
  z-index: 1;
  font-weight: 500;
  top: -35px;
  border-radius: 6px;
  font-size: var(--font-lg);
  animation: tooltipAni 1s;
}
.ita-tooltip .tooltiptext {
  color: #fff;
  font-size: var(--font-lg);
}

@keyframes tooltipAni {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ------------------------------ 
 * 레이아웃 - sosp-map-tophead-button-box - sospost 임시저장글 불러오기 , 종료 등
 --------------------------------*/
.map-tophead-button {
  position: absolute;
  top: 15px;
  z-index: 10;
}
.map-tophead-button.right {
  left: unset;
  right: 15px;
}
.map-tophead-button.left {
  right: unset;
  left: 15px;
}

.ita-tooltip-box {
  display: none;
  position: relative;
  /* ------------------------------ 
   * tooltip box 포지션 - 클라스 종류구분 
   --------------------------------*/
  /* ------------------------------ 
   * 오른쪽 
   --------------------------------*/
  /* ------------------------------ 
   * 왼쪽  
   --------------------------------*/
  /* ------------------------------ 
   * tooptip class 
   --------------------------------*/
}
.ita-tooltip-box.open {
  display: block;
}
.ita-tooltip-box.tip-t5-r60 {
  left: unset;
  top: 5px;
  right: 40px;
}
.ita-tooltip-box.tip-t40-r40 {
  left: unset;
  top: 40px;
  right: 40px;
}
.ita-tooltip-box.tip-t5-l60 {
  right: unset;
  left: 60px;
  top: 5px;
}
.ita-tooltip-box.tip-t40-l60 {
  right: unset;
  left: 60px;
  top: 40px;
}
.ita-tooltip-box .ita-tooltip {
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  background-color: #008cff;
  color: white;
  position: absolute;
  padding: 5px 13px;
  text-align: center;
  z-index: 2;
  border-radius: 7px;
  display: flex;
  font-weight: 600;
  align-items: center;
  font-size: var(--font-lg);
  gap: 3px;
  letter-spacing: var(--nie-letter-spacing-3);
  /* ------------------------------ 
   * left 
   --------------------------------*/
  /* ------------------------------ 
   * right 
   --------------------------------*/
}
.ita-tooltip-box .ita-tooltip.left::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -22px;
  right: unset;
  margin-top: -12px;
  border-width: 12px;
  border-style: solid;
  border-color: transparent #008cff transparent transparent;
}
.ita-tooltip-box .ita-tooltip.left.b-70 {
  background-color: #008cff;
}
.ita-tooltip-box .ita-tooltip.left.b-70::after {
  border-color: transparent #008cff transparent transparent;
}
.ita-tooltip-box .ita-tooltip.right {
  transform: translateX(-100%);
}
.ita-tooltip-box .ita-tooltip.right::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 50%;
  left: unset;
  margin-top: -12px;
  border-width: 12px;
  border-style: solid;
  border-color: transparent transparent transparent #008cff;
}
.ita-tooltip-box .ita-tooltip.right.b-70 {
  background-color: #008cff;
}
.ita-tooltip-box .ita-tooltip.right.b-70::after {
  border-color: transparent transparent transparent #008cff;
}
.ita-tooltip-box .ita-tooltip.upright::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #008cff transparent;
}
.ita-tooltip-box .ita-tooltip .tip-text {
  font-weight: 500;
}
.ita-tooltip-box .ita-tooltip .tip-close {
  cursor: pointer;
  font-size: var(--font-xl);
}

/* ------------------------------ 
 * (활동중) 범용 뒤로가기 방지 
 --------------------------------*/
.preventBack-panel-screen {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2705882353);
  z-index: 500;
}
.preventBack-panel-screen.open {
  display: block;
}
.preventBack-panel-screen .panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  bottom: 20px;
  background-color: white;
  padding: 30px 20px;
  position: absolute;
  left: 0;
  right: 0;
  width: 90%;
  border-radius: 20px;
  box-shadow: 1px 1px 12px 1px rgba(0, 0, 0, 0.2);
  margin: auto;
  /* ------------------------------ 
   * 메세지 
   --------------------------------*/
  /* ------------------------------ 
   * 버튼 
   --------------------------------*/
}
.preventBack-panel-screen .panel .msg {
  text-align: left;
  font-size: var(--font-xl);
  letter-spacing: -0.5px;
  line-height: 1.5;
  color: black;
  font-weight: 600;
  padding-bottom: 25px;
}
.preventBack-panel-screen .panel .button-box {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.preventBack-panel-screen .panel .button-box .btn {
  display: flex;
  justify-content: center;
  font-size: var(--font-xl);
  color: var(--cl-ita-red-40);
  font-weight: 600;
  cursor: pointer;
}

.sosp--billboard-box {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}
.sosp--billboard-box .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--cl-ita-red-40);
  color: white;
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.5;
  text-align: center;
  width: -moz-max-content;
  width: max-content;
  border-radius: 20px 20px 20px 20px;
  box-shadow: 1px 1px 12px 1px rgba(0, 0, 0, 0.2);
  margin: auto;
}

.leftBar {
  display: none;
  z-index: 101;
}
@media screen and (min-width: 992px) {
  .leftBar {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    font-size: var(--font-2xl);
    width: var(--pc-leftbar-wd);
    border-right: 1px solid gainsboro;
    overflow: hidden;
  }
  .leftBar .lmenu-title {
    width: 0;
    overflow: hidden;
    display: none;
    visibility: hidden;
  }
  .leftBar.toggle .lmenu-title {
    width: -moz-max-content;
    width: max-content;
    display: block;
    visibility: visible;
  }
  .leftBar .leftBar-tophead {
    display: flex;
    align-items: center;
    font-size: var(--font-2xl);
    font-weight: bold;
    padding: 0 15px;
    height: var(--pc-topbar-ht);
    color: var(--cl-text-b-40);
  }
  .leftBar .leftBar-tophead .top-name {
    font-size: var(--font-2xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .leftBar .leftBar-tophead .cssIcon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }
  .leftBar .leftBar-tophead .logo {
    font-size: var(--font-xl);
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
  }
  .leftBar .menu-box {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .leftBar .menu-box ul.menu-item {
    margin: 0px;
  }
  .leftBar .menu-box ul.menu-item hr {
    margin: 10px 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }
  .leftBar .menu-box ul.menu-item li.item {
    padding: 7.5px;
    font-size: var(--font-xl);
    font-weight: 500;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cl-text-b-40);
    cursor: pointer;
  }
  .leftBar .menu-box ul.menu-item li.item:hover {
    background: var(--admin-mainbg);
  }
  .leftBar .menu-box ul.menu-item li.item.selected {
    background: var(--admin-mainbg);
    font-weight: 600;
    color: var(--admin-maincolor);
  }
  .leftBar .menu-box ul.menu-item li.item .cssIcon {
    width: 25px;
    height: 25px;
  }
  .leftBar .bottom-box {
    padding: 10px;
    margin-top: auto;
  }
  .leftBar .account-box {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
  }
  .leftBar .account-box p {
    font-size: var(--font-lg);
    color: black;
    font-weight: 600;
  }
  .leftBar .account-box.signed-in .avatar_icon_circle {
    background: black !important;
    color: white !important;
    font-weight: bold !important;
    font-size: var(--font-md) !important;
    border-radius: 50%;
    border: 2px solid white !important;
  }
  .leftBar .account-box.not-signin:hover {
    background: var(--cl-text-b-245);
  }
  .leftBar .account-box .name {
    font-size: var(--font-xl);
    font-weight: 600;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

/* ------------------------------ 
 * dropdown 
 --------------------------------*/
.simple-dropdown-list {
  max-height: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgb(237, 237, 237);
  z-index: 100;
  border-radius: 8px;
  top: 120%;
}
.simple-dropdown-list.open {
  display: block;
  max-height: 1000px;
  padding: 2px 0;
}
.simple-dropdown-list.open.border {
  border: 1px solid lightgray;
}
.simple-dropdown-list .item {
  padding: 16px 16px;
  text-decoration: none;
  display: block;
  color: black;
  font-size: var(--font-xl);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
.simple-dropdown-list .item .cssIcon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  opacity: 0.7;
}
.simple-dropdown-list .item:not(:first-child) {
  border-top: 1px solid #dddddd;
}
.simple-dropdown-list .item:hover {
  background: lightgray;
  border-radius: 8px;
}

.ita-topBar {
  background: white;
  z-index: 11;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pc-topbar-ht);
  display: flex;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
}
.ita-topBar .mobile-top-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}
@media screen and (min-width: 992px) {
  .ita-topBar {
    margin-left: 50px;
  }
}

.ita-bottom-nav {
  display: grid;
  font-size: var(--font--3xl);
  position: fixed;
  bottom: 0;
  background: white;
  width: 100%;
  left: 0;
  margin: auto;
  padding: 0 25px;
  height: 60px;
  right: 0;
  z-index: 200;
}
.ita-bottom-nav.col-3 {
  grid-template: "a b c   " 1fr/1fr 1fr 1fr;
}
.ita-bottom-nav.col-4 {
  grid-template: "a b c d   " 1fr/1fr 1fr 1fr 1fr;
}
.ita-bottom-nav.col-5 {
  grid-template: "a b c d e " 1fr/1fr 1fr 1fr 1fr 1fr;
}
.ita-bottom-nav.scroll-down {
  background: transparent !important;
  transition: transform 0.2s ease 0s;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.ita-bottom-nav.off {
  display: none;
}
.ita-bottom-nav.vague::before {
  background: linear-gradient(transparent, white);
  display: block;
  position: absolute;
  height: 30px;
  width: 100%;
  content: "";
  top: -30px;
}
@media screen and (min-width: 992px) {
  .ita-bottom-nav {
    display: none;
  }
}

.tab-page-link-ita {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--font-md);
  color: #333;
  position: relative;
}
.tab-page-link-ita.active {
  color: #333;
  display: flex;
}
.tab-page-link-ita:after {
  font-size: 10px;
  margin-top: 4px;
}
.tab-page-link-ita.new:before {
  width: 2vw;
  height: 2vw;
  position: absolute;
  background: #ff685c;
  border-radius: 50%;
  content: "";
  right: 4vw;
  top: 2px;
}

.tab-page-link-ita .btm-menu-text {
  font-size: 11px;
  padding-top: 1px;
  font-weight: 600;
  color: var(--cl-text-b-0);
  opacity: 0.7;
}
.tab-page-link-ita .btm-menu-text.visibility-hidden {
  visibility: hidden;
}

.itacity-action-panel {
  width: 100%;
  max-height: 80%;
  padding: 40px 10px 20px 10px;
  display: flex;
  background: white;
  color: white;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0px 0.2rem 1rem 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0.2rem 1rem 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 0.2rem 1rem 0px rgba(0, 0, 0, 0.25);
  position: relative;
  /* ------------------------------ 
   * action-item 
   --------------------------------*/
}
.itacity-action-panel::after {
  content: "";
  position: absolute;
  /* right: 0; */
  bottom: -24px;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -12px;
  border-width: 12px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.itacity-action-panel .adoptbeach_btn {
  border-radius: 50%;
  position: absolute;
  right: 16px;
  left: 16px;
  top: 10px;
  height: 40px;
  background: rgba(0, 255, 153, 0);
  border: 2px solid #03A9F4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.itacity-action-panel .sloganbox {
  font-size: var(--font-3xl);
  font-weight: 500;
  text-align: center;
  padding: 10px 0;
}
.itacity-action-panel .action-item {
  align-items: center;
  display: flex;
  padding: 15px;
  gap: 10px;
  background: #f1f1f1;
  border-radius: 7px;
}
.itacity-action-panel .action-item .action-title {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: black;
}
.itacity-action-panel .action-item .action-icon {
  font-size: var(--font-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.itacity-action-panel .action-item .action-panel-illust {
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 50px;
}
.itacity-action-panel .action-item .action-desc {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--cl-text-b-0);
  opacity: 0.6;
}
.itacity-action-panel .action-item .action-link {
  font-size: var(--font-md);
  font-weight: 600;
  color: #333;
  cursor: pointer;
}
.itacity-action-panel .action-item .action-help {
  font-size: var(--font-md);
  font-weight: 500;
  color: #333;
}

.main-ita-body {
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* ------------------------------ 
  * 마을 보기 섹션 
  --------------------------------*/
  /* ------------------------------ 
     * scroll-fetch 
     --------------------------------*/
  /* ------------------------------ 
   * [0] full-screen
   --------------------------------*/
  /* ------------------------------ 
   * [1] type-leftbar 
   --------------------------------*/
}
.main-ita-body::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 992px) {
  .main-ita-body.catalog-article {
    width: 100%;
    display: block;
  }
}
.main-ita-body.scroll-fetch {
  overflow-y: auto;
  height: calc(var(--vh, 1vh) * 100);
}
@media screen and (min-width: 992px) {
  .main-ita-body {
    width: calc(100% - var(--pc-leftbar-wd));
    margin-left: auto;
  }
  .main-ita-body.centered {
    align-items: center;
  }
}
@media screen and (min-width: 992px) {
  .main-ita-body.type-leftbar {
    width: calc(100% - var(--pc-leftbar-wd));
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .main-ita-body.type-leftbar.centered {
    align-items: center;
  }
}

@media screen and (min-width: 992px) {
  .screen-center {
    margin: auto;
  }
}

.pc-section-title {
  font-size: var(--font-md);
  font-weight: bold;
  padding: 20px 0 10px 0;
}

.main-ita-feed-container {
  margin: var(--m-padding-screen);
}
@media screen and (min-width: 992px) {
  .main-ita-feed-container {
    max-width: var(--pc-body-max-wd);
  }
}
.main-ita-feed-container .mission-word {
  font-size: clamp(20px, var(--font-4xl), 6.5vh);
  font-weight: 600;
  line-height: 1.6;
  font-weight: 700;
  padding: 20px 0;
  color: var(--cl-text-b-40);
}
.main-ita-feed-container .ita-feed-tab {
  position: sticky;
  top: 0;
  padding: 20px 0;
  background: white;
  z-index: 5;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 0;
  z-index: 51;
}
.main-ita-feed-container .ita-feed-tab::-webkit-scrollbar {
  display: none;
}
.main-ita-feed-container .ita-feed-tab.active {
  cursor: grabbing;
}
.main-ita-feed-container .ita-feed-tab ul.category {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-ita-feed-container .ita-feed-tab ul.category li.item {
  font-size: var(--font-xl);
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--cl-text-b-120);
  margin: 0;
  border-radius: 0;
}
.main-ita-feed-container .ita-feed-tab ul.category li.item:hover {
  color: var(--cl-text-b-40);
  transform: translateY(-2px);
  transition: all 0.2s;
}
.main-ita-feed-container .ita-feed-tab ul.category li.item.active {
  color: black;
  border-bottom: 2px solid black;
  font-weight: 600;
}
.main-ita-feed-container .ita-feed-tab ul.sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-ita-feed-container .ita-feed-tab ul.sort li.item {
  font-size: var(--font-md);
  font-weight: bold;
  padding: 10px 10px;
  cursor: pointer;
  color: var(--cl-text-b-120);
  margin: 0;
  border-radius: 50px;
}
.main-ita-feed-container .ita-feed-tab ul.sort li.item:hover {
  color: var(--cl-text-b-40);
}
.main-ita-feed-container .ita-feed-tab ul.sort li.item.active {
  color: var(--cl-text-b-40);
}
.main-ita-feed-container .feed-scroll-section {
  height: -moz-max-content;
  height: max-content;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box {
  display: none;
  flex-direction: column;
  justify-items: center;
  gap: 25px 0;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box.open {
  display: flex;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: white;
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .list-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .list-info-box .user-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .list-info-box .user-icon-box .logo {
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .list-info-box .name-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: black;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .list-info-box .name-box .name {
  font-size: var(--font-sm);
  font-weight: bold;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 30vw;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .list-info-box .name-box .clock {
  font-size: var(--font-sm);
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: -0.4px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif !important;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .list-info-box .share-icon {
  margin-left: auto;
  color: black;
  font-size: var(--font-md);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .img-box {
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10px;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .img-box::-webkit-scrollbar {
  display: none;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .img-box .img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid #bbbbbb;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .content-box {
  color: black;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .content-box .title {
  font-size: var(--font-4xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
  line-height: 1.5;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .content-box .content {
  font-size: var(--font-md);
  font-weight: 500;
  opacity: 1;
  letter-spacing: -0.4px;
  line-height: 1.7;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .social-box {
  color: black;
  display: flex;
  gap: 11px;
  padding-top: 10px;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .social-box .like {
  font-size: var(--font-md);
  font-weight: 500;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: var(--nie-cl-orange-10);
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .social-box .like::before {
  content: "";
  display: inline-block;
  width: var(--font-2xl);
  height: var(--font-2xl);
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_outline.svg") no-repeat center center;
  background-size: cover;
  margin-right: 10px;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .social-box .like.liked::before {
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/like_fill.svg") no-repeat center center;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .social-box .view {
  font-size: var(--font-md);
  font-weight: 600;
  padding: 2px 0;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .social-box .share-icon {
  width: 20px;
  height: 20px;
  margin-left: auto;
  font-size: var(--font-md);
  font-weight: 600;
  padding: 2px 8px;
  background: url("/CSV6/APP_PAGE/Pages/Nieplace/assets/img/utils/share_outline.svg") no-repeat;
  background-size: cover;
  cursor: pointer;
  margin: 0 2px;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .reply-box {
  background: var(--nie-cl-white-10);
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .reply-box .title-box .title {
  font-size: var(--font-xl);
  font-weight: bold;
  padding: 15px 0 10px 0;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .reply-box .title-box .val {
  font-size: var(--font-xl);
  font-weight: 500;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .reply-box .input-box {
  display: flex;
  align-items: center;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .reply-box .input-box .avatar {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.main-ita-feed-container .feed-scroll-section .feed-listType-box .list-box .reply-box .input-box .avatar input.reply {
  width: 100%;
  height: 40px;
  border: 1px solid var(--cl-text-b-120);
  padding: 0 10px;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--cl-text-b-40);
  border-radius: 10px;
  margin-left: 10px;
}

.main-ita-stat-container {
  padding: var(--pc-screen-padding);
}
.main-ita-stat-container .stat-box {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.main-ita-stat-container .stat-box .item {
  font-size: var(--font-4xl);
}
.main-ita-stat-container .personal-record-box,
.main-ita-stat-container .group-record-box {
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 25px;
  border-radius: 10px;
  gap: 10px;
  width: 400px;
}
.main-ita-stat-container .personal-record-box .rank-box,
.main-ita-stat-container .group-record-box .rank-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-ita-stat-container .personal-record-box .rank-box .rank-item,
.main-ita-stat-container .group-record-box .rank-box .rank-item {
  font-size: var(--font-md);
}
.main-ita-stat-container .personal-record-box .rank-box .rank-item.small,
.main-ita-stat-container .group-record-box .rank-box .rank-item.small {
  font-size: var(--font-sm);
}
.main-ita-stat-container .personal-record-box .rank-box .rank-item.light,
.main-ita-stat-container .group-record-box .rank-box .rank-item.light {
  opacity: 0.6;
}
.main-ita-stat-container .personal-record-box .rank-box .rank-item.bold,
.main-ita-stat-container .group-record-box .rank-box .rank-item.bold {
  font-weight: 700;
}
.main-ita-stat-container .personal-record-box .rank-box .rank-item.val,
.main-ita-stat-container .group-record-box .rank-box .rank-item.val {
  font-weight: 700;
  color: var(--nie-btm-menu-text);
}
.main-ita-stat-container .group_member_record {
  display: flex;
  align-items: center;
  padding: 20PX;
  background-color: white;
}
.main-ita-stat-container .group_member_record .rank-box {
  display: flex;
  gap: 2px;
}
.main-ita-stat-container .group_member_record .rank-box .rank-item {
  font-size: var(--font-md);
}
.main-ita-stat-container .group_member_record .rank-box .rank-item.bold {
  font-weight: 700;
}

.main-notfound-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 50px;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.main-notfound-container img.emptyimg {
  width: clamp(100px, 75%, 300px);
  height: -moz-max-content;
  height: max-content;
}

/* ------------------------------ 
 * 공통 
 --------------------------------*/
.swiper-pagination-simple {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.swiper-pagination-simple .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  /* padding: 3px 1px; */
  margin: 0 2.5px;
  display: inline-block;
  font-weight: 700;
  opacity: 1;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  outline: none;
}
.swiper-pagination-simple .swiper-pagination-bullet:hover, .swiper-pagination-simple .swiper-pagination-bullet:focus {
  outline: none;
}
.swiper-pagination-simple .swiper-pagination-bullet-active {
  background: white;
  opacity: 1;
}

/* ------------------------------ 
 * my page - 그룹 섹션
 --------------------------------*/
.section-joined-group .my-joingroup-thumbBox {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /* 스크롤 가능하게 설정 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.section-joined-group .my-joingroup-thumbBox::-webkit-scrollbar {
  display: none;
}
.section-joined-group .my-joingroup-thumbBox.active {
  cursor: grabbing;
}
.section-joined-group .my-joingroup-thumbBox .joined-thumb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 3px;
  border: 1px solid lightgray;
  cursor: pointer;
}
.section-joined-group .my-joingroup-thumbBox .joined-thumb:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
}

.my-joingroup-list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  position: relative;
  /* ------------------------------ 
   *  탈퇴
   --------------------------------*/
}
.my-joingroup-list .joined-group-item {
  padding: 15px 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid lightgray;
  cursor: pointer;
  width: 100%;
}
.my-joingroup-list .joined-group-item:hover, .my-joingroup-list .joined-group-item:focus {
  background: gainsboro;
}
.my-joingroup-list .joined-group-item .joined-group-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #dddddd;
  padding: 0.3rem;
}
.my-joingroup-list .joined-group-item .joined-group-name {
  font-size: var(--font-2xl);
  font-weight: 600;
}
.my-joingroup-list .joined-group-item .joined-group-role {
  font-size: var(--font-xl);
  font-weight: 500;
}
.my-joingroup-list .joined-group-item .joined-group-account_id {
  font-size: var(--font-xl);
  font-weight: 500;
  color: var(--cl-text-b-150);
}
.my-joingroup-list .joined-group-edit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
  cursor: pointer;
  font-size: var(--font-2xl);
  font-weight: 600;
  color: var(--cl-text-b-40);
}
.my-joingroup-list .joined-group-edit:hover, .my-joingroup-list .joined-group-edit:focus {
  background: #e8e8e8;
}

.grid {
  display: grid;
}
.grid.col-1-2 {
  grid-template-columns: 1fr 2fr;
}
.grid.col-1-3 {
  grid-template-columns: 1fr 3fr;
}
.grid.col-3-1 {
  grid-template-columns: 3fr 1fr;
}
.grid.col-2-1 {
  grid-template-columns: 2fr 1fr;
}
.grid.col-2 {
  grid-template-columns: 1fr 1fr;
}
.grid.col-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid.col-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid.col-5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

/* ------------------------------ 
 * aspect 는 자식요소에 적용 
 --------------------------------*/
.aspect-ratio-1 {
  aspect-ratio: 1/1;
}

.aspect-ratio-16-9 {
  aspect-ratio: 16/9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4/3;
}

.aspect-ratio-3-2 {
  aspect-ratio: 3/2;
}

.aspect-ratio-2-1 {
  aspect-ratio: 2/1;
}

.aspect-ratio-9-16 {
  aspect-ratio: 9/16;
}

.aspect-ratio-3-4 {
  aspect-ratio: 3/4;
}

.aspect-ratio-2-3 {
  aspect-ratio: 2/3;
}

.aspect-ratio-1-2 {
  aspect-ratio: 1/2;
}

.itatab-simple-box {
  display: flex;
  align-items: center;
  gap: 10px;
  /* ------------------------------ 
   * xl 
   --------------------------------*/
}
.itatab-simple-box .itatab-item {
  border-radius: 25px;
  font-size: var(--font-2xl);
  color: black;
  padding: 6px 12px;
  cursor: pointer;
  background: none;
  opacity: 0.4;
}
.itatab-simple-box .itatab-item:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
}
.itatab-simple-box .itatab-item.active {
  font-weight: 500;
  opacity: 1;
  color: black;
  font-weight: 700;
  border: 1px solid black;
}
.itatab-simple-box.xl .itatab-item {
  font-size: var(--font-xl);
}

.itatab-simple-box-2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.itatab-simple-box-2 .itatab-item {
  border-radius: 8px;
  font-size: var(--font-2xl);
  color: black;
  padding: 7px 10px;
  cursor: pointer;
  background: none;
  opacity: 0.3;
  border: 1px solid black;
}
.itatab-simple-box-2 .itatab-item.active {
  opacity: 1;
  background: black;
  color: white;
  font-weight: 600;
}

img.swiper-lazy:not([src]) {
  visibility: hidden;
}

/* ------------------------------ 
 * lazysizes  - ls-blur-up.js
 --------------------------------*/
.lazyload:not([src]) {
  visibility: hidden;
}

.blur-up.swiper-lazy {
  filter: blur(40px);
  transition: filter 200ms;
  -moz-transition: filter 200ms, -webkit-filter 200ms;
  -ms-transition: filter 200ms, -webkit-filter 200ms;
  -o-transition: filter 200ms, -webkit-filter 200ms;
}

.blur-up.swiper-lazy-loaded {
  filter: blur(0);
}

/* ------------------------------ 
 *  
 --------------------------------*/
.ls-blur-up-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  font-family: "blur-up: always", "object-fit: cover";
  -o-object-fit: cover;
     object-fit: cover;
}

.ls-blur-up-img {
  filter: blur(20px);
  opacity: 1;
  transition: opacity 1000ms, filter 1500ms;
  -moz-transition: opacity 1000ms, filter 1500ms;
  -ms-transition: opacity 1000ms, filter 1500ms;
  -o-transition: opacity 1000ms, filter 1500ms;
}

.ls-blur-up-img.ls-inview.ls-original-loaded {
  opacity: 0;
  filter: blur(5px);
}

/* ------------------------------ 
 * ls-blur-up.js 없이  
 @@ 200 ms 로 축소
 --------------------------------*/
.blur-up {
  filter: blur(40px);
  transition: filter 200ms;
  -moz-transition: filter 200ms, -webkit-filter 200ms;
  -ms-transition: filter 200ms, -webkit-filter 200ms;
  -o-transition: filter 200ms, -webkit-filter 200ms;
}

.blur-up.lazyloaded {
  filter: blur(0);
}

/* ------------------------------ 
 * litter stats adoptbeach by group 
 --------------------------------*/
.aabk-header-bar {
  position: sticky;
  width: 100%;
  top: 0;
  /* background: white; */
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  border-bottom: 1px solid gainsboro;
}

.aabk-blitter-table th,
.aabk-blitter-table td {
  width: 150px;
}

.aabk-input {
  width: -moz-max-content;
  width: max-content;
  /* max-width: 250px; */
  cursor: pointer;
  padding: 1rem 2rem;
  margin: 0.5rem;
  font-size: var(--font-xl);
  border: 2px solid black;
  text-align: right;
  border-radius: 0;
  background: white;
  border-radius: 15px;
}

.aabk-item {
  width: -moz-max-content;
  width: max-content;
  /* max-width: 250px; */
  cursor: pointer;
  padding: 0.75rem 2rem;
  margin: 0.5rem;
  font-size: var(--font-lg);
  font-weight: 500;
  border: 1px solid #ccc;
  text-align: right;
  border-radius: 0;
  background: white;
  border-radius: 15px;
}
.aabk-item:hover {
  transform: translateY(-2px);
  transition: all 0.2s;
  background: var(--admin-maincolor);
  color: white;
}

.aabk-list {
  display: flex;
  flex-wrap: wrap;
  background: #ededed;
  padding: 10px;
  border-radius: 15px;
  margin: 10px 0;
}

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: white;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
}

/* ------------------------------ 
 * js pop up 
 --------------------------------*/
.js-popup-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

.js-popup-bg.active {
  display: block;
}

.js-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 30px 20px 20px 20px;
  width: 80%;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.js-popup.active {
  display: block;
}

.js-popup__inner {
  position: relative;
}

.js-popup__close {
  position: absolute;
  cursor: pointer;
}

.js-popup__title {
  font-size: var(--font-3xl);
  font-weight: 600;
}

.js-popup__text {
  font-size: var(--font-xl);
  font-weight: 400;
}

.js-popup__button {
  font-size: var(--font-2xl);
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  color: white;
  border: none;
  cursor: pointer;
}
.js-popup__button.border {
  background: transparent;
  color: black;
  border: 1px solid black;
}
.js-popup__button.text {
  background: transparent;
  color: black;
}

/* ------------------------------ 
 *  
 --------------------------------*/
.ita-wall-screen {
  display: none;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.ita-wall-screen.active {
  display: flex;
}

.baro-wall-find-text {
  padding: 100px 40px 40px 40px;
  width: 80%;
}

.baro-wall-find-char {
  width: 100%;
}

.like-heart-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  display: none;
  margin: auto;
  height: -moz-max-content;
  height: max-content;
  width: 100px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.simpletab.selected {
  opacity: 1;
  font-weight: 600;
}

@keyframes orange-gradient-blink {
  0% {
    background-image: linear-gradient(45deg, #ff7f50, #ff6347, #ff4500);
  }
  50% {
    background-image: linear-gradient(45deg, #ffa07a, #ff4500, #ff6347);
  }
  100% {
    background-image: linear-gradient(45deg, #ff4500, #ff7f50, #ffa07a);
  }
}
@keyframes green-gradient-blink {
  0% {
    background-image: linear-gradient(45deg, #006400, #228B22, #32CD32);
  }
  50% {
    background-image: linear-gradient(45deg, #228B22, #32CD32, #006400);
  }
  100% {
    background-image: linear-gradient(45deg, #32CD32, #006400, #228B22);
  }
}
.orange-color-blinking,
.green-color-blinking {
  background-size: 200% 200%;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

.orange-color-blinking {
  animation-name: orange-gradient-blink;
}

.green-color-blinking {
  animation-name: green-gradient-blink;
}

/* ------------------------------ 
 * 지도 
 --------------------------------*/
.icon_RingWave {
  border: 1px solid #00ca2f;
  box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0.2rem 0.6rem 0px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.8;
  height: 60px;
  width: 60px;
  z-index: 0;
  transform: translate(-20px, -20px);
}
.icon_RingWave::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: #00ca2f;
  opacity: 1;
  height: 20px;
  width: 20px;
  transform: translate(-50%, -50%);
}

.icon_RingWave_focus {
  border: 3px solid #ff0057;
  background: var(--nie-cl-blue);
  border-radius: 50%;
  opacity: 1;
  height: 80px;
  width: 80px;
  animation: pulsate 1.5s ease-out 0s infinite normal forwards;
  z-index: 100;
  transform: translate(-40px, -40px);
}
.icon_RingWave_focus::before {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: var(--nie-cl-orange);
  opacity: 1;
  height: 5px;
  width: 5px;
  transform: translate(-50%, -50%);
}

.triangle-tip-10::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}

/* ------------------------------ 
 * 유저계정 - 소개 접기 
 * 세 줄 계산: 세 줄만 표시하려면 줄 높이(1.6em)에 3을 곱합니다.

 --------------------------------*/
.user-info-content.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.8em;
  /* 초기 높이: 3줄에 맞는 높이 */
  transition: max-height 0.5s ease;
  -moz-transition: max-height 0.5s ease;
  -ms-transition: max-height 0.5s ease;
  -o-transition: max-height 0.5s ease;
}

.user-info-content.expanded {
  -webkit-line-clamp: unset;
  /* 제한 해제 */
  max-height: 100vh;
  /* 충분히 큰 값으로 설정 */
  overflow: visible;
  /* 모든 내용 표시 */
}

/* Container for checkbox */
.checkbox-basic {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.checkbox-basic:checked {
  border-color: #4f46e5;
  /* Indigo border when checked */
  background-color: #4f46e5;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="white"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.checkbox-basic:hover {
  border-color: #6b7280;
}
.checkbox-basic:focus {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

.checkbox-basic-label {
  cursor: pointer;
  color: #374151;
  /* Gray text color */
}
.checkbox-basic-label:hover {
  color: #1f2937;
  /* Darker gray on hover */
}

.underline {
  text-decoration: underline;
}

.grid-form-responsive {
  display: grid;
}
@media screen and (min-width: 992px) {
  .grid-form-responsive.col-2-400 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
}

.main-plogging-screen {
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=style.css.map */