#fixed_btn_wrap {
  display: none !important;
}
.user_common_btn button.btn_heart.active,
.user_common_btn button.btn_share.active,
.user_common_btn button.btn_info.active {
  background: var(--primary-color);
  color: #fff;
}
.user_common_btn .user_common_modal .copy_url input {
  color: #a9a9a9;
  padding: 0 0 0 8px;
}

/* header */
header {
  background: #eaeaea;
}
header #header {
  flex-wrap: nowrap;
}
header #header #logo > a > img {
  max-height: 70px;
}
header #header #lnb > ul > li.mycart a {
  font-size: 0.9em;
}
header #header #srch_wrap {
  min-width: 130px;
  margin: 10px 20px 10px 0;
}
header #header .srch_btn {
  right: 10px;
}
#header .srch_box {
  position: absolute;
  display: none;
  top: 32px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 300px;
  height: 430px;
  background: rgba(255, 255, 255, 1);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
}
header.scroll #header .srch_box {
  top: 44px;
}
#header .srch_box > div {
  width: 100%;
}

.search_form input::placeholder {
  text-indent: 0;
}

#header .srch_box > div > div:last-child {
  border: 0;
}
#header .srch_box h4 {
  font-size: 1.1em;
  background: var(--primary-color);
  color: #fff;
  padding: 20px 30px 0;
  height: 50px;
  font-weight: 700;
  text-align: center;
}
#header .srch_box h4 span {
  color: #fff;
  font-size: 0.7em;
  font-weight: 400;
}
#header .srch_box h4 i {
  font-size: 0.8em;
  margin-right: 5px;
}
#header .srch_box div ul {
  margin: 30px auto;
  width: 80%;
}
#header .srch_box div ul li {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-weight: 700;
}
#header .srch_box div ul li:last-child {
  margin-bottom: 0;
}
#header .srch_box div ul li a,
#header .srch_box div ul li span:not(:first-child) {
  display: inline-block;
  color: #424242;
  font-weight: 400;
  padding: 3px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  font-size: 0.9em;
}
#header .srch_box div ul li a:hover,
#header .srch_box div ul li span:not(:first-child):hover {
  cursor: pointer;
  border-bottom: 1px solid #8f8f8f;
  font-weight: bolder;
}
#header .srch_box div ul li span:first-child {
  cursor: default;
  width: 23px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

/* header */
header {
  position: fixed;
  top: 0;
  background: transparent;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
}
header .logo {
  align-self: center;
}
header .logo img {
  max-height: 70px;
  max-width: 150px;
  display: block;
  width: auto;
}
/*text logo css*/
header .text_logo {
  display: none;
  letter-spacing: 0;
  font-family: "yg-jalnan";
  font-size: 25px;
  color: #272727;
}
header .text_logo > span.point_co {
  color: #ff5c4a;
  /*color: var(--primary-color);*/
}

.hbg {
  width: 35px;
}
.hbg_btn {
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  background: transparent;
  border-top: 3px solid;
  border-bottom: 3px solid;
  transition: all 0.25s ease-in-out;
  color: var(--primary-color);
}
.hbg_btn:before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease-in-out;
}
#page_wrap .hbg_btn > .balloon {
  left: 130%;
  bottom: 2px;
  position: relative;
  padding: 6px 9px;
  font-size: 0.8em;
  background: rgb(255 141 128);
  border-radius: 50px 50px 50px 50px;
  opacity: 1;
  transition: all 0.3s;
}
#page_wrap .hbg_btn > .balloon::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 4px 7px;
  border-color: transparent rgb(255 141 128) transparent transparent;
  top: 49%;
  left: -13px;
  transform: translateY(-50%);
  transition: all 0.3s;
}
#page_wrap .hbg_btn:hover > .balloon {
  background: var(--secondary-color_opct5);
}
#page_wrap .hbg_btn:hover > .balloon::after {
  border-color: transparent var(--secondary-color_opct5) transparent transparent;
}
@keyframes doodoongsil_x {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  10% {
    opacity: 1;
    transform: translateX(-45%);
  }
  20% {
    transform: translateX(-50%);
  }
  30% {
    transform: translateX(-55%);
  }
  40% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-45%);
  }
  60% {
    transform: translateX(-50%);
  }
  70% {
    transform: translateX(-55%);
  }
  80% {
    transform: translateX(-50%);
  }
  90% {
    opacity: 1;
    transform: translateX(-45%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.hbg_btn:hover {
  color: var(--secondary-color);
}

html {
  height: 100%;
}
body {
  height: 100%;
  overflow: hidden;
}
#page_wrap::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(255, 92, 74, 0);
  transition: all 0.3s;
}
#page_wrap:hover::-webkit-scrollbar-thumb {
  background-color: var(--primary-color_opct8);
}

#page_modal,
#page_wrap {
  opacity: 0;
  visibility: hidden;
}
#page_modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all ease 0.5s;
  z-index: 100;
}
#page_wrap {
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 95%;
  height: 95%;
  left: 50%;
  bottom: -100%;
  color: #424242;
  transform: translateX(-50%);
  background-color: rgb(255 255 255 / 90%);
  border-radius: 20px 20px 0 0;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.4s;
}
html.dark #page_wrap {
  background: rgb(0 0 0 / 80%);
}
#page_modal.show,
#page_modal.show #page_wrap {
  opacity: 1;
  visibility: visible;
}
#page_modal.show #page_wrap {
  bottom: 0%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.cls_btn {
  position: absolute;
  right: 3px;
  width: 40px;
  height: 40px;
  font-size: 1.5em;
  text-align: center;
  color: var(--primary-color);
  z-index: 200;
  line-height: 40px;
  cursor: pointer;
  transition: all 0.2s;
}
.cls_btn:hover,
.cls_btn:active,
.cls_btn:focus {
  color: var(--primary-color_opct5);
}

#modal_haeder {
  position: sticky;
  top: 0;
  z-index: 300;
  /* background: rgba(256, 256, 256, 1);
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important; */

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
#modal_haeder .logo {
  align-self: center;
}
#modal_haeder .logo img {
  display: block;
  width: 100%;
  max-height: 65px;
  max-width: 150px;
}
#page_open {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px 20px;
  transform: translate(-50%, -50%);
  font-size: 4em;
  z-index: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
}
@media all and (max-width: 1020px) {
  #page_wrap {
    width: 100%;
  }
}
.btn_wrap {
  position: fixed;
}
.btn_wrap.left {
  left: 4%;
}
.btn_wrap.right {
  right: 4%;
}
.btn_wrap.top {
  top: 4%;
}
.hbg_wrap {
  position: relative;
  margin-top: 24px;
}
.btn_wrap.map {
  right: 40px;
  top: 4%;
}
.btn_wrap.control {
  right: 40px;
  bottom: 130px;
}
.btn_wrap.tutorial {
  right: 40px;
  bottom: 145px;
}
.btn_wrap.telephone {
  right: 40px;
  bottom: 40px;
}
.btn {
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(rgb(255 92 74 / 10%), rgb(255 92 74 / 30%));
  box-shadow: inset 0px 0px 10px rgb(255 71 33 / 30%),
    inset 0px 0px 20px rgb(255 136 106 / 30%),
    inset 0px 0px 30px rgb(255 123 97 / 30%), 0px 0px 30px rgb(255 92 74 / 30%),
    0px 0px 20px rgb(255 92 74 / 0%), 0px 0px 10px rgb(255 92 74 / 0%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 100%;
  cursor: pointer;
  z-index: 900 !important;
  border: 3px solid var(--primary-color_opct8);
  transform: scale(1);
  transition: all 0.4s;
}
.btn:hover {
  background: radial-gradient(rgb(255 239 237 / 40%), rgb(255 255 255 / 70%));
  box-shadow: inset 0px 0px 10px rgb(255 71 33 / 40%),
    inset 0px 0px 20px rgb(255 136 106 / 50%),
    inset 0px 0px 30px rgb(255 123 97 / 60%), 0px 0px 30px rgb(255 92 74 / 60%),
    0px 0px 20px rgb(255 92 74 / 50%), 0px 0px 10px rgb(255 92 74 / 40%);
  border: 3px solid rgba(255, 92, 74, 1);
  transform: scale(1.05);
}
.telephone .btn {
  padding: 0 2px 0 20px;
  width: auto;
  height: auto;
  flex-direction: row;
  background: radial-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 20%));
  backdrop-filter: none;
  border-radius: 70px;
  border: 2px solid rgba(255, 92, 74, 1);
}
.telephone:hover .btn {
  background: radial-gradient(rgb(255 92 74 / 10%), rgb(255 92 74 / 30%));
  transition: all 0.4s;
}
.telephone .telephone_icon {
  display: flex;
  width: 68px;
  height: 68px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    340deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.2)
  );
  border-radius: 100%;
}
.telephone .telephone_icon > span {
  padding-top: 4px;
  display: none;
  font-size: 0.5em;
  font-weight: 800;
  color: var(--primary-color);
}
.telephone .telephone_icon > i {
  font-size: 1.7em;
  color: var(--primary-color);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: fixed-btn-point;
  animation-name: fixed-btn-point;
}
.telephone .telephone_txt {
  margin-right: 10px;
  display: flex;
  height: 70px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.telephone .telephone_txt > span {
  margin-bottom: 5px;
  letter-spacing: 1px;
  display: block;
  color: #fff;
}
.telephone .telephone_txt > p {
  font-size: 1.6em;
  color: var(--primary-color);
  opacity: 1;
}

@keyframes turn {
  0%,
  100% {
    background-position: 20% 70%;
  }
  50% {
    background-position: 80% 70%;
  }
}
.main_btn .hsptoggle {
  display: none;
  visibility: hidden;
  bottom: 30px;
  z-index: 3;
}
.main_btn .hsptoggle .btn {
  background: radial-gradient(rgb(74 158 255 / 10%), rgb(74 165 255 / 30%));
  box-shadow: inset 0px 0px 10px rgb(33 129 255 / 30%),
    inset 0px 0px 20px rgb(106 177 255 / 30%),
    inset 0px 0px 30px rgb(97 160 255 / 30%), 0px 0px 30px rgb(74 148 255 / 30%),
    0px 0px 20px rgb(74 110 255 / 0%), 0px 0px 10px rgba(74, 131, 255, 0);
  border-color: var(--secondary-color);
}
.main_btn .hsptoggle .btn > i {
  font-size: 0.95em;
}
.main_btn .hsptoggle .btn > i::after {
  content: "\f070";
}
.main_btn .hsptoggle .btn > p {
  color: #fff;
}
.main_btn .hsptoggle .btn > p::after {
  margin-left: -1px;
  content: "숨김";
}

.main_btn .hsptoggle.on .btn {
  background: radial-gradient(
    rgba(234, 244, 255, 0.1),
    rgba(200, 228, 255, 0.3)
  );
  box-shadow: inset 0px 0px 10px rgba(226, 239, 255, 0.3),
    inset 0px 0px 20px rgba(240, 247, 255, 0.3),
    inset 0px 0px 30px rgba(246, 250, 255, 0.3),
    0px 0px 30px rgba(209, 228, 255, 0.3), 0px 0px 20px rgba(232, 236, 255, 0),
    0px 0px 10px rgba(228, 237, 255, 0);
}
.main_btn .hsptoggle.on .btn > i::after {
  content: "\f06e";
  color: var(--secondary-color);
}
.main_btn .hsptoggle.on .btn > p {
  color: var(--secondary-color) !important;
}
.main_btn .hsptoggle.on .btn > p::after {
  margin-left: -1px;
  content: "보임";
}
.main_btn .hsptoggle .btn:hover {
  transform: none;
}
.main_btn .hsptoggle .btn:hover > i,
.main_btn .hsptoggle .btn:hover > p {
  color: #fff;
}

@media all and (max-width: 600px) {
  .main_btn .hsptoggle {
    display: block;
    visibility: visible;
  }
}
/* .control .btn, .map .btn {
  background: radial-gradient(rgba(143, 206, 255, 0.8), rgb(131 200 255 / 50%));
  box-shadow: 
  inset 0px 0px 10px rgb(39 142 255 / 0%),
  inset 0px 0px 18px rgb(120 194 255 / 30%),
  0px 0px 40px rgb(234 247 255 / 0%),
  0px 0px 30px rgb(234 247 255 / 0%),
  0px 0px 20px rgb(58 182 255 / 10%),
  0px 0px 10px rgb(0 162 255 / 30%);
  transition: all 0.4s;
  border: 3px solid rgba(213, 233, 255, 0.8);
}

.control .btn:hover, .map .btn:hover {
  box-shadow: 
  inset 0px 0px 10px rgb(39 142 255 / 30%),
  inset 0px 0px 18px rgb(120 194 255 / 60%),
  0px 0px 40px rgb(255 255 255 / 20%),
  0px 0px 30px rgb(234 247 255 / 30%),
  0px 0px 20px rgb(58 182 255 / 60%),
  0px 0px 10px rgb(0 162 255 / 70%);
  border: 3px solid rgba(227, 241, 255, 0.95);
}
.telephone .btn {
  background: radial-gradient(rgba(255, 201, 192, 0.8), rgba(255, 193, 174, 0.5));
  box-shadow: 
  inset 0px 0px 10px rgba(255, 89, 39, 0),
  inset 0px 0px 18px rgba(255, 158, 120, 0.3),
  0px 0px 40px rgba(255, 240, 234, 0),
  0px 0px 30px rgba(255, 240, 234, 0),
  0px 0px 20px rgba(255, 114, 58, 0.1),
  0px 0px 10px rgba(255, 72, 0, 0.3);
  transition: all 0.4s;
  border: 3px solid rgba(255, 235, 231, 0.5);
}
.telephone .btn:hover {
  box-shadow: 
  inset 0px 0px 10px rgba(255, 150, 118, 0.3),
  inset 0px 0px 18px rgba(255, 205, 186, 0.6),
  0px 0px 40px rgb(255 255 255 / 20%),
  0px 0px 30px rgba(255, 240, 234, 0.3),
  0px 0px 20px rgba(255, 202, 189, 0.6),
  0px 0px 10px rgba(255, 173, 148, 0.7);
  border: 3px solid rgba(255, 243, 240, 0.95);
} */
.btn > i {
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  color: #fff;
  transition: all 0.4s;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}
.btn > p {
  padding-top: 5px;
  font-size: 0.625em;
  font-weight: 600;
  color: #fff;
  transition: all 0.4s;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.btn:hover > i {
  color: var(--primary-color);
}
.btn:hover > p {
  color: var(--primary-color);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.btn_wrap.map .balloon::before,
.btn_wrap.control .balloon::before,
.btn_wrap.tutorial .balloon::before,
.btn_wrap.telephone .balloon::before {
  display: none !important;
}
.btn_wrap.map .balloon p i,
.btn_wrap.control .balloon p i,
.btn_wrap.tutorial .balloon p i {
  color: #fff;
}

.balloon {
  display: none;
  position: absolute;
  padding: 6px 15px;
  width: max-content;
  font-size: 0.925em;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px 50px 50px 15px;
  z-index: 4;
  user-select: none;
  opacity: 1;
  transform: translateY(0px);
  animation: doodoongsil 6s linear 0.3s 1 both;
}
.balloon.on {
  display: block;
}
.btn_wrap.left .balloon {
  left: 40px;
  top: -10%;
}
.btn_wrap.right .balloon {
  right: 55px;
  top: 15px;
  padding: 6px 5px 6px 15px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 20px 0 0 20px;
  box-shadow: none;
  animation: none;
}
.btn_wrap.map .balloon.on,
.btn_wrap.control .balloon.on,
.btn_wrap.tutorial .balloon.on {
  display: none;
}
.btn_wrap.map .balloon > p,
.btn_wrap.control .balloon > p,
.btn_wrap.tutorial .balloon > p {
  color: #fff;
}
.balloon::before {
  content: "";
  position: absolute;
  box-shadow: inset 2px 0px 3px rgb(255 255 255 / 12%);
}
/* .btn_wrap.left .balloon::before {
  border-left: 2px solid transparent;
  border-right: 7px solid rgba(255, 255, 255, 0.6);
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 7px solid transparent;
  left: -9px;
  top: 25%;
}
.btn_wrap.right .balloon::before {
  border-left: 7px solid rgba(255, 255, 255, 0.6);
  border-right: 7px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.6);
  border-bottom: 7px solid transparent;
  right: -14px;
  top: 25%;
} */
.balloon > p {
  margin: 0 0;
  line-height: 1.2em;
}
.balloon > p > i {
  font-style: normal;
  font-weight: 900;
  color: var(--primary-color);
}
@keyframes doodoongsil {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  10% {
    opacity: 1;
    transform: translateY(-6px);
  }
  20% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(6px);
  }
  40% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(0px);
  }
  70% {
    transform: translateY(6px);
  }
  80% {
    transform: translateY(0px);
  }
  90% {
    opacity: 1;
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0px);
  }
}

.main_btn #srch_wrap {
  width: 500px;
  position: fixed;
  left: 50%;
  top: 9.5%;
  transform: translateX(-50%);
}
.main_btn #srch_wrap #search_box {
  top: 34px;
}

.main_btn #srch_wrap .srch_btn {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: 0 6px 0 0;
  padding: 0 5px;
  cursor: pointer;
  transform: translateY(-50%);
  color: var(--primary-color);
  font-size: 1.2em;
  z-index: 30;
}
.main_btn #srch_wrap .srch-clo-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  color: #fff;
  z-index: 1;
  cursor: pointer;
}
.main_btn #srch_wrap #search_box h4 {
  background: var(--primary-color);
}
.main_btn #srch_wrap .search_form input {
  font-size: 1em;
  font-weight: 600;
  padding: 7px 10px 7px 20px;
  box-shadow: none;
  border-radius: 0;
  border: none !important;
  border-bottom: 2px solid !important;
  border-color: var(--primary-color) !important;
  transition: all 0.4s;
}
.main_btn #srch_wrap .search_form input:focus,
.main_btn #srch_wrap .search_form input:hover,
.main_btn #srch_wrap .search_form input:active {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.main_btn #srch_wrap .search_form input::placeholder {
  color: var(--primary-color) !important;
  font-size: 0.9em;
  font-weight: 600;
}

@media all and (max-width: 980px) {
  body {
    font-size: 0.925em;
  }
  .btn {
    width: 52px;
    height: 52px;
  }
  .telephone .telephone_icon {
    width: 52px;
    height: 52px;
  }
  .telephone .telephone_txt {
    height: 52px;
  }
  .btn_wrap.map,
  .btn_wrap.control,
  .btn_wrap.tutorial {
    right: 20px;
  }
  .btn_wrap.map .btn > p,
  .btn_wrap.control .btn > p,
  .btn_wrap.tutorial .btn > p {
    display: none;
  }
  .btn_wrap.map .balloon.on,
  .btn_wrap.control .balloon.on,
  .btn_wrap.tutorial .balloon.on {
    display: block;
  }
  .telephone .telephone_txt {
    font-size: 0.6em;
  }
}
@media all and (max-width: 1023px) {
  .main_btn #srch_wrap #search_box {
    top: 32px;
  }
  .main_btn #srch_wrap {
    width: 300px;
  }
}

@media all and (max-width: 650px) {
  .hbg_wrap {
    margin-left: 10px;
  }
  .btn_wrap.left .balloon {
    padding: 0;
    left: -7px;
    top: 35px;
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-radius: 30px;
    font-size: 0.925em;
    animation: none;
  }
  .btn_wrap.left .balloon > p > b {
    display: none;
  }

  #page_wrap .hbg_btn > .balloon {
    padding: 5px 7px;
    left: 50%;
    bottom: -32px;
    font-size: 0.6em;
    transform: translateX(-50%);
    animation: doodoongsil_x 5s linear 0.3s 1 forwards;
    opacity: 0;
  }
  #page_wrap .hbg_btn > .balloon::after {
    border-width: 5px 4px;
    border-color: transparent transparent rgb(255 141 128) transparent;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .btn {
    width: 46px;
    height: 46px;
  }
  .btn_wrap.map .balloon.on,
  .btn_wrap.control .balloon.on,
  .btn_wrap.tutorial .balloon.on {
    display: none;
  }
  .btn_wrap.map,
  .btn_wrap.control,
  .btn_wrap.tutorial {
    right: 25px;
  }
  .btn_wrap.map .btn > i,
  .btn_wrap.control .btn > i,
  .btn_wrap.tutorial .btn > i {
    font-size: 1em;
  }
  .btn_wrap.map .btn > p,
  .btn_wrap.control .btn > p,
  .btn_wrap.tutorial .btn > p {
    display: block;
  }
  .btn_wrap.map .btn > p > i.mo_on,
  .btn_wrap.control .btn > p > i.mo_on,
  .btn_wrap.tutorial .btn > p > i.mo_on {
    display: block;
  }
  .btn_wrap.map .btn > p > i.mo_off,
  .btn_wrap.control .btn > p > i.mo_off,
  .btn_wrap.tutorial .btn > p > i.mo_off {
    display: none;
  }
  .btn_wrap.control {
    bottom: 120px;
  }
  .btn_wrap.tutorial {
    bottom: 130px;
  }
  .btn_wrap.telephone {
    right: 10px;
    bottom: 30px;
  }
  .telephone .telephone_icon {
    border: 2px solid var(--primary-color);
    background: radial-gradient(rgb(255 255 255 / 80%), rgb(255 255 255 / 20%));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .telephone .telephone_icon > span {
    display: block;
    font-size: 0.625em;
  }
  .telephone .telephone_icon > i {
    font-size: 1.1em;
  }
  .telephone .telephone_txt {
    padding: 4px 10px;
    height: auto;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    order: 2;
    font-size: 0.6em;
    margin-right: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .telephone .telephone_txt > span {
    display: none;
  }
  .telephone .btn {
    flex-direction: column;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .telephone:hover .btn {
    background: none;
  }
}

@media all and (max-width: 475px) {
  .main_btn #srch_wrap {
    width: 200px;
    top: 11%;
  }
  .main_btn #srch_wrap .search_form input {
    font-size: 0.9em;
    padding: 7px 10px;
  }
  .btn_wrap.map,
  .btn_wrap.control,
  .btn_wrap.tutorial {
    right: 10px;
  }
  .telephone .telephone_txt > p {
    font-size: 1.4em;
  }
  .main_btn #srch_wrap .srch-clo-btn {
    right: 10px;
  }
  .main_btn #srch_wrap .srch_btn {
    right: 0px;
  }

  .main_btn #srch_wrap #search_box {
    width: 100%;
  }
}
@media all and (max-width: 320px) {
  .main_btn #srch_wrap {
    width: 200px;
  }
}

@keyframes bounceAlpha {
  0% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
  25% {
    opacity: 0;
    transform: translateX(10px) scale(0.9);
  }
  26% {
    opacity: 0;
    transform: translateX(-10px) scale(0.9);
  }
  55% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
}

.bounceAlpha {
  animation-name: bounceAlpha;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.arrow.primera.bounceAlpha {
  animation-name: bounceAlpha;
  animation-duration: 1.4s;
  animation-delay: 0.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.shop_arrow .arrow {
  animation-name: bounceAlpha;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.shop_arrow .arrow.primera {
  animation-name: bounceAlpha;
  animation-duration: 1.4s;
  animation-delay: 0.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* t */
@media all and (max-width: 1023px) {
  #header .srch_box {
    position: fixed;
    top: 83px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    /* width:calc(100% - 120px); */
  }
  header.scroll #header .srch_box {
    top: 56px;
  }
  .cls_btn {
    right: 0;
  }
}
@media all and (max-width: 720px) {
  #page_modal header#modal_haeder #header {
    width: 90%;
  }
}
/* m */
@media all and (max-width: 650px) {
  header #header .srch_box {
    width: 100%;
    top: 88px !important;
  }
}

html,
body {
  font-family: "Pretendard";
  font-weight: 600;
  letter-spacing: -0.8px;
}
header#modal_haeder #header {
  width: 95%;
  padding: 10px 0;
}
header#modal_haeder #header .logo_wrap {
  display: flex;
}
header#modal_haeder #header .logo_wrap .modal_hd_btn_wrap {
  display: flex;
  align-self: center;
  margin-left: 15px;
}
header#modal_haeder #header .logo_wrap .back_btn {
  padding: 0 10px;
}
header#modal_haeder #header .logo_wrap .back_btn i {
  font-size: 30px;
  color: var(--primary-color);
}

.search_form input {
  border-color: var(--primary-color_opct5);
}
header #header .srch_btn {
  color: var(--primary-color);
}

#fixed_btn_wrap {
  display: block;
  right: 2%;
}
.fixed_btn button i {
  color: #fff;
}
.fixed_btn.top_btn {
  background: #fff;
}
.fixed_btn.top_btn button i {
  color: var(--primary-color);
}
.iframe_dim {
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: saturate(180%) blur(5px);
  -webkit-backdrop-filter: saturate(180%) blur(5px);
}

.user_common_btn button.btn_heart,
.user_common_btn button.btn_share,
.user_common_btn button.btn_info {
  color: var(--secondary-color);
}

.user_common_btn .fee_common_modal,
.user_common_btn .fee_common_modal li {
  color: var(--secondary-color);
  border-color: 2px solid var(--secondary-color);
}
.req_close_btn,
.req_close_btn {
  cursor: pointer;
}
@media all and (max-width: 480px) {
  header .logo,
  #modal_haeder .logo {
    width: 80px;
  }
  .hbg {
    width: 30px;
  }
  .hbg_btn {
    height: 14px;
  }
  .btn_wrap.left .balloon {
    left: -7px;
    top: 27px;
    font-size: 0.8em;
  }
  #page_wrap .hbg_btn > .balloon {
    bottom: -23px;
  }
  header#modal_haeder #header .logo_wrap .modal_hd_btn_wrap {
    margin-left: 10px;
  }
  .search_form input {
    padding: 5px 10px 5px 16px;
  }
  header #header #srch_wrap {
    margin-left: 10px;
  }
  #fixed_btn_wrap {
    display: none !important;
  }
}

/*튜토리얼 css*/
/*vr배우기 튜토리얼*/
#tutorial_vr {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px) contrast(0.8);
  -webkit-backdrop-filter: blur(5px) contrast(0.8);
  font-family: "Pretendard";
  z-index: 1000;
}
.tutorial_inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 95%;
  height: 95%;
  transform: translate(-50%, -50%);
}
#tutorial_vr i {
  font-style: normal;
}
#tutorial_vr .color_p {
  font-weight: 700;
  color: var(--secondary-color);
}
#tutorial_vr .color_r {
  font-weight: 700;
  color: var(--primary-color);
}
.tutorial_wrap {
  padding: 40px;
}
.tutor_tit {
  line-height: 1.8em;
  font-size: 2.5em;
}
.tutor_subtit {
  font-size: 1.5em;
  opacity: 0.7;
}
.tutor_menu > ul {
  margin: 30px 0;
}
.tutor_menu > ul > li {
  display: inline-block;
  margin: 10px 10px;
  padding: 10px 25px;
  font-size: 1.2em;
  font-weight: 600;
  border: 2px solid #fff;
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
  transition: all 0.4s;
}
.tutor_menu > ul > li:hover,
.tutor_menu > ul > li.current {
  background-color: rgba(122, 202, 255, 0.35);
}
#tutorial_vr i.pc_txt {
  display: inline-block;
}
#tutorial_vr i.mo_txt {
  display: none;
}
#tutorial_vr li.use_pc {
  display: inline-block;
}
#tutorial_vr li.use_mo {
  display: none;
}
#tutorial_vr .tab_content {
  display: none;
}
#tutorial_vr .tab_content.current {
  display: inherit;
}
#tutorial_vr .slide_tit {
  font-size: 1.7em;
}

#tutorial_vr .swiper-slide > .img_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
#tutorial_vr .swiper-slide > .img_box.flex_row {
  flex-direction: row;
}
#tutorial_vr .swiper-slide > .img_box.flex_column {
  flex-direction: column;
}

#tutorial_vr .swiper-slide > .flex_box {
  padding-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#tutorial_vr .swiper-slide > .flex_box > .img_box {
  padding: 0 6em;
}
#tutorial_vr .swiper-slide > .flex_box > .img_box:first-child {
  border-right: 2px solid rgba(255, 255, 255, 0.4);
}
#controller .controller_icon {
  margin: 2em 0;
  font-size: 1em;
  height: 23px;
  background: var(--primary-color);
  padding: 5px 15px;
  border-radius: 5px 5px 0 0;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
  animation: click_ani 4s infinite cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
#controller .controller_icon > .fa-gamepad {
  padding-right: 5px;
}
#controller .controller_icon > .fa-angle-up {
  padding-left: 10px;
}

#place .other_place_btn_icon,
#spot .map_icon {
  margin: 3em 2em 3em 0;
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(rgb(255 92 74 / 10%), rgb(255 92 74 / 30%));
  box-shadow: inset 0px 0px 10px rgb(255 71 33 / 30%),
    inset 0px 0px 20px rgb(255 136 106 / 30%),
    inset 0px 0px 30px rgb(255 123 97 / 30%), 0px 0px 30px rgb(255 92 74 / 30%),
    0px 0px 20px rgb(255 92 74 / 0%), 0px 0px 10px rgb(255 92 74 / 0%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 100%;
  user-select: none;
  border: 3px solid var(--primary-color_opct8);
  transform: scale(1);
  animation: btn_ani 4s infinite cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
#place .other_place_btn_icon > i,
#spot .map_icon > i {
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  color: #fff;
  transition: all 0.4s;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}
#place .other_place_btn_icon > p,
#spot .map_icon > p {
  padding-top: 5px;
  font-size: 0.625em;
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 20%);
}
@keyframes btn_ani {
  0% {
    background: radial-gradient(rgb(255 92 74 / 10%), rgb(255 92 74 / 30%));
    box-shadow: inset 0px 0px 10px rgb(255 71 33 / 30%),
      inset 0px 0px 20px rgb(255 136 106 / 30%),
      inset 0px 0px 30px rgb(255 123 97 / 30%),
      0px 0px 30px rgb(255 92 74 / 30%), 0px 0px 20px rgb(255 92 74 / 0%),
      0px 0px 10px rgb(255 92 74 / 0%);
    border: 3px solid var(--primary-color_opct8);
    transform: scale(1);
  }
  50% {
    background: radial-gradient(rgb(255 239 237 / 40%), rgb(255 255 255 / 70%));
    box-shadow: inset 0px 0px 10px rgb(255 71 33 / 40%),
      inset 0px 0px 20px rgb(255 136 106 / 50%),
      inset 0px 0px 30px rgb(255 123 97 / 60%),
      0px 0px 30px rgb(255 92 74 / 60%), 0px 0px 20px rgb(255 92 74 / 50%),
      0px 0px 10px rgb(255 92 74 / 40%);
    border: 3px solid rgba(255, 92, 74, 1);
    transform: scale(1.2);
  }
  100% {
    background: radial-gradient(rgb(255 92 74 / 10%), rgb(255 92 74 / 30%));
    box-shadow: inset 0px 0px 10px rgb(255 71 33 / 30%),
      inset 0px 0px 20px rgb(255 136 106 / 30%),
      inset 0px 0px 30px rgb(255 123 97 / 30%),
      0px 0px 30px rgb(255 92 74 / 30%), 0px 0px 20px rgb(255 92 74 / 0%),
      0px 0px 10px rgb(255 92 74 / 0%);
    border: 3px solid var(--primary-color_opct8);
    transform: scale(1);
  }
}
img.controlbar_img {
  min-width: 240px;
  width: 25%;
  margin: 2.5em 0;
  animation: fadeup_ani 4s infinite ease forwards;
}
img.pd_look_icon {
  min-width: 85px;
  width: 6%;
  margin: 2em;
  animation: click_ani 4s infinite cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
img.pd_info_popup_icon,
img.pd_change_icon {
  min-width: 190px;
  width: 15%;
  margin: 2em;
  animation: fadein_ani 4s infinite ease forwards;
}
img.mouse_move,
img.keyboard_arrow_icon,
img.keyboard_word_icon {
  width: 28%;
  animation: move_ani 5s infinite ease forwards;
}
img.mouse_scroll {
  width: 38%;
  animation: go_back_ani 5s infinite ease forwards;
}
img.keyboard_sc_icon {
  width: 55%;
  animation: zoomin_ani 5s infinite ease forwards;
}
img.place_move_icon {
  min-width: 180px;
  width: 20%;
  margin: 2em;
  animation: fadeup_ani 4s infinite ease forwards;
}
img.touch_move_icon,
img.touch_zoomin_icon,
img.touch_zoomout_icon {
  min-width: 50px;
  width: 6%;
  margin: 2em;
}
img.touch_move_icon {
  animation: move_ani 5s infinite ease forwards;
}
img.touch_zoomin_icon {
  animation: zoomin_ani 4s infinite cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
img.touch_zoomout_icon {
  animation: click_ani 4s infinite cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
#tutorial_vr .img_frame.map_icon_3d {
  position: relative;
  min-width: 95px;
  width: 11%;
  margin: 2em;
  animation: faderight_ani 4s infinite ease forwards;
}
#tutorial_vr .img_frame.map_icon_3d > img {
  width: 100%;
}
#tutorial_vr .img_frame::after {
  content: "\f25a";
  position: absolute;
  bottom: 24%;
  width: 58%;
  right: 15%;
  font-family: "FontAwesome";
  font-size: 2em;
  color: #fff;
  animation: faderight_ani 4s infinite ease forwards;
}
img.move_click_icon {
  min-width: 240px;
  width: 20%;
  margin: 1em 0;
  animation: click_ani 4s infinite cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
#tutorial_vr img.pc_ver {
  display: block !important;
}
#tutorial_vr img.mobile_ver {
  display: none !important;
}
#tutorial_vr .swiper-slide .txt_box {
  line-height: 1.6em;
  word-break: keep-all;
  font-size: 1.4em;
  font-weight: 500;
}
#tutorial_vr .swiper-pagination {
  position: absolute;
  font-size: 1.2em;
  bottom: 20%;
}
#tutorial_vr .swiper-pagination-current {
  font-size: 1.5em;
  font-weight: 600;
}
#tutorial_vr .cls_btn.dimmed_close {
  top: auto;
  bottom: -60%;
  animation: TutorpcClsBtnShow 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
}
@keyframes TutorpcClsBtnShow {
  0% {
    top: auto;
    bottom: -60%;
  }
  100% {
    top: auto;
    bottom: 8%;
  }
}
#tutorial_vr .swiper-button-prev:after,
#tutorial_vr .swiper-button-next:after {
  color: #fff;
  font-size: 3em;
}

@media all and (max-width: 1600px) {
  #tutorial_vr {
    font-size: 0.9em;
  }
  .tutor_menu > ul > li {
    padding: 8px 20px;
  }
  #modal_haeder .logo img {
    max-height: 60px;
  }
}
@media all and (max-width: 1200px) {
  .tutorial_wrap {
    padding: 30px 0;
  }
  #tutorial_vr .swiper-slide > .flex_box > .img_box {
    padding: 0 3em;
  }
  img.controlbar_img {
    width: 35%;
  }

  header .logo img {
    max-height: 60px;
  }

  .more_top .logo > img {
    max-height: 50px;
  }
}
@media all and (max-width: 1000px) {
  #tutorial_vr i.pc_txt {
    display: none;
  }
  #tutorial_vr i.mo_txt {
    display: inline-block;
  }
  #tutorial_vr li.use_pc {
    display: none;
  }
  #tutorial_vr li.use_mo {
    display: inline-block;
  }

  #modal_haeder .logo img {
    max-height: 50px;
  }
}
@media (max-width: 870px) {
  #tutorial_vr .cls_btn.dimmed_close {
    position: absolute;
  }
  #tutorial_vr .swiper-slide > .img_box.flex_row {
    flex-direction: column;
  }
  #mobile_use .swiper-slide > .img_box.flex_row {
    flex-direction: row;
  }

  #place .other_place_btn_icon,
  #spot .map_icon {
    margin: 2em 0 2em 0;
  }
  #tutorial_vr img.pc_ver {
    display: none !important;
  }
  #tutorial_vr img.mobile_ver {
    display: block !important;
  }
  #tutorial_vr img.place_move_icon.mobile_ver {
    min-width: 70px;
    width: 11%;
    margin: 1.5em;
  }
  #tutorial_vr img.pd_info_popup_icon.mobile_ver,
  #tutorial_vr img.pd_change_icon.mobile_ver {
    min-width: 95px;
    width: 13%;
    margin: 1.5em;
  }
}
@media all and (max-width: 800px) {
  .tutor_menu > ul > li {
    margin: 7px 5px;
    padding: 7px 15px;
  }
  #tutorial_vr .swiper-pagination {
    bottom: 18%;
  }
  #tutorial_vr .swiper-button-next,
  #tutorial_vr .swiper-button-prev {
    bottom: 17%;
    top: auto;
  }
  #tutorial_vr .swiper-button-next:after,
  #tutorial_vr .swiper-button-prev:after {
    font-size: 2.3em;
  }
  @keyframes TutorpcClsBtnShow {
    0% {
      bottom: -60%;
    }
    100% {
      bottom: 5%;
    }
  }
}
@media all and (max-width: 640px) {
  .tutor_menu > ul {
    margin: 20px 0;
  }
  .tutor_menu > ul > li {
    margin: 7px 5px;
    padding: 7px 15px;
    font-size: 15px;
  }
  #tutorial_vr .swiper-slide > .img_box.flex_row {
    flex-direction: column;
  }
  #mobile_use .swiper-slide > .img_box.flex_row {
    flex-direction: row;
  }

  img.touch_zoomin_icon,
  img.touch_zoomout_icon {
    margin: 1em 2em 0;
  }

  #tutorial_vr .img_frame.map_icon_3d {
    margin: 1em;
  }

  #tutorial_vr .swiper-pagination {
    bottom: 15%;
    font-size: 1em;
  }
  #tutorial_vr .swiper-button-next,
  #tutorial_vr .swiper-button-prev {
    bottom: 14%;
  }
  #tutorial_vr .swiper-button-next:after,
  #tutorial_vr .swiper-button-prev:after {
    font-size: 1.5em;
  }
  @keyframes TutorpcClsBtnShow {
    0% {
      bottom: -60%;
    }
    100% {
      bottom: 3%;
    }
  }
  header .logo img {
    max-width: 140px;
    max-height: 40px;
  }
  .more_top .logo > img {
    max-height: 40px;
  }
  .hbg_wrap {
    margin-top: 15px;
  }
}
@media all and (max-width: 470px) {
  header .logo img {
    max-width: 130px;
  }
  .more_top .logo > img {
    max-width: 130px;
  }
}
@media all and (max-width: 430px) {
  .tutorial_wrap {
    padding: 0 0;
  }
  .tutor_menu > ul > li {
    margin: 5px 5px;
    padding: 5px 15px;
    font-size: 14px;
  }
  #tutorial_vr .slide_tit {
    font-size: 1.6em;
  }
  #tutorial_vr .swiper-slide .txt_box {
    font-size: 1.3em;
  }
  #tutorial_vr img.pd_info_popup_icon.mobile_ver,
  #tutorial_vr img.pd_change_icon.mobile_ver {
    min-width: 90px;
    margin: 1em;
  }
  #tutorial_vr .m_text_small {
    font-size: 0.85em;
  }
}

@keyframes click_ani {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomin_ani {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeup_ani {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  90% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(0px);
  }
}
@keyframes fadein_ani {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes faderight_ani {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  90% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(0px);
  }
}
@keyframes move_ani {
  0% {
    transform: translateX(0px);
  }
  13% {
    transform: translateX(-20px);
  }
  28% {
    transform: translateX(0px);
  }
  43% {
    transform: translateY(-20px);
  }
  58% {
    transform: translateY(0px);
  }
  73% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes go_back_ani {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
/*튜토리얼 css 끝*/

/* 파노라마 센터 pitch, yaw 표시를 위한 Div */
#center {
  display: none;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  min-width: 120px;
  transform: translate(-50%, -50%);
  padding: 20px;
}
#center .axis {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#center .axis .cross {
  background: red;
  height: 19px;
  position: relative;
  width: 2px;
}
#center .axis .cross:after {
  background: red;
  content: "";
  height: 2px;
  left: -8px;
  position: absolute;
  top: 8px;
  width: 19px;
}
#center .value_box {
  position: absolute;
  top: 40px;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  width: calc(100% - 40px);
  border-radius: 10px;
  line-height: 1.5em;
  font-size: 1.2em;
}
#center .value_box span {
  color: var(--primary-color);
}

#panorama {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  font-family: "Pretendard", sans-serif;
  color: #424242;
  word-break: keep-all;
}

.pnlm-about-msg {
  display: none !important;
}

#panorama .toggleModalWrap {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  transition: all 0.5s;
}

html.dark #panorama .toggleModalWrap {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.led_view {
  position: absolute;
  left: 50%;
  top: -70px;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: rgba(54, 151, 215, 0.8);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 300;
  translate: all 0.3s;
}
.led_view:after {
  position: absolute;
  left: 50%;
  top: -21px;
  content: "";
  transform: translateX(-50%);
  border: transparent 9px solid;
  border-bottom-color: var(--secondary-color);
  display: inline-block;
  animation: arrowUp 0.7s linear infinite;
  translate: all 0.3s;
}
.led_view.down {
  background: rgb(100 100 100 / 80%);
}
.led_view.down:after {
  transform: translateX(-50%) translateY(10px) rotate(180deg);
  animation: arrowUp 0.7s linear infinite reverse;
}
@keyframes arrowUp {
  0% {
    top: -21px;
    opacity: 1;
  }
  100% {
    top: -30px;
    opacity: 0;
  }
}

.ctrl {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
  text-align: center;
  /* background: rgba(200, 200, 200, 0.8); */
  padding: 8px 5px 2px;
  cursor: pointer;
  box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.7),
    -6px -6px 10px rgba(255, 255, 255, 0.5),
    6px 6px 8px rgba(255, 255, 255, 0.075), 6px 6px 10px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s cubic-bezier(0.79, 0.21, 0.06, 0.81);
  font-size: 20px;
  color: #666;
  border-radius: 5px;
}
html.dark .ctrl {
  box-shadow: -2px -2px 14px rgb(0 0 0 / 30%), -2px -2px 10px rgb(0 0 0 / 20%),
    2px 2px 8px rgb(0 0 0 / 8%), 2px 2px 10px rgb(0 0 0 / 15%);
  background: rgba(0, 0, 0, 0.5);
}

.ctrl:hover {
  /* background: rgba(200, 200, 200, 1); */
  color: var(--primary-color);
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.6),
    -2px -2px 4px rgba(255, 255, 255, 0.4),
    2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.ctrl:active {
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.7),
    inset -2px -2px 4px rgba(255, 255, 255, 0.5),
    inset 2px 2px 2px rgba(255, 255, 255, 0.075),
    inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.video {
  width: 100px;
}

/* 로딩 페이지 css*/
.pnlm-lbar,
.pnlm-lbox,
.pnlm-load-box > p {
  display: none !important;
}
.pnlm-load-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 0;
}
.loading-page-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background-size: cover;
  background: url(/imageserver/origin/100/img/vr/vr_loading_bg.jpg) no-repeat
    center center;
  overflow: hidden;
}
.loading-page .circle {
  width: 165px;
  height: 165px;
  background-color: rgba(255, 92, 74, 0.7);
  border-radius: 50%;
  overflow: hidden;
  transform: rotateY(180deg);
  animation: rotate_ani 4.5s infinite;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes rotate_ani {
  50% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
.loading-page .loadText {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  user-select: none;
  z-index: 1;
}
.loading-page .loadText .textcon {
  position: absolute;
  display: block;
  font-size: 1.1em;
  line-height: 1.7em;
  font-family: "Pretendard";
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
  animation: ChangeText1 4.5s infinite;
}
.loading-page .loadText .iconcon {
  position: absolute;
  display: block;
  font-size: 2.6em;
  font-family: "Font Awesome 6 Free";
  opacity: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  animation: ChangeText2 4.5s infinite;
}
.loading-page .loadText .iconcon > img {
  margin-top: 10px;
}
.loading-page .loading_content.box2 .circle {
  background-color: rgba(54, 151, 215, 0.7);
}
@keyframes ChangeText1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ChangeText2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.icon {
  background: rgb(54, 151, 215, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-25px, -25px);
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: all 0.5s;
}
.icon:hover {
  transform: translate(-25px, -25px) scale(1.2);
}
.icon i {
  vertical-align: middle;
}
.icon.prdIcon {
  width: 44px;
  height: 44px;
  padding: 0px;
  font-size: 1.2em;
  border-radius: 10rem;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: center;
}
.icon.rentalPrd {
  animation: none;
}
.lspPrd .icon {
  animation: none;
  background: rgb(255, 92, 74, 1);
  width: 44px;
  height: 44px;
}
.lspPrd .icon i:before {
  content: "\f159";
  margin-top: 0px;
  font-size: 16px;
}
.icon.sceneIcon {
  padding: 8px 20px;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  animation: none;
  color: var(--secondary-color);
  background: linear-gradient(
    319deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.9)
  );

  border-radius: 60px;

  text-align: center;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2em;
  border: none;
  box-shadow: 3px 3px 0 var(--secondary-color);
}
.icon.sceneIcon p {
  align-self: center;
}
.icon.sceneIcon > i {
  margin-left: 5px;
}
.pnlm-hotspot:hover {
  background-color: rgba(255, 255, 255, 0);
}
@keyframes ripple_rentalPrd {
  0% {
    box-shadow: 0 0 0 0 rgba(54, 151, 215, 0.2),
      0 0 0 5px rgba(54, 151, 215, 0.2), 0 0 0 10px rgba(54, 151, 215, 0.2),
      0 0 0 15px rgba(54, 151, 215, 0.2);
  }
  100% {
    box-shadow: 0 0 0 5px rgba(54, 151, 215, 0.2),
      0 0 0 10px rgba(54, 151, 215, 0.2), 0 0 0 15px rgba(54, 151, 215, 0.2),
      0 0 0 20px rgba(54, 151, 215, 0);
  }
}
@keyframes ripple_lspPrd {
  0% {
    box-shadow: 0 0 0 0 rgba(197, 69, 55, 0.2), 0 0 0 5px rgba(197, 69, 55, 0.2),
      0 0 0 10px rgba(197, 69, 55, 0.2), 0 0 0 15px rgba(197, 69, 55, 0.2);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(197, 69, 55, 0.2),
      0 0 0 10px rgba(197, 69, 55, 0.2), 0 0 0 15px rgba(197, 69, 55, 0.2),
      0 0 0 20px rgba(197, 69, 55, 0);
  }
}
@keyframes ripple_scene {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
      0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 10px rgba(255, 255, 255, 0.2),
      0 0 0 15px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2),
      0 0 0 10px rgba(255, 255, 255, 0.2), 0 0 0 15px rgba(255, 255, 255, 0.2),
      0 0 0 20px rgba(255, 255, 255, 0);
  }
}
.hotspotModal {
  width: auto;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 1s;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px) contrast(0.8);
  -webkit-backdrop-filter: blur(5px) contrast(0.8);
  font-family: "Pretendard";
  z-index: 1000;
}
.dimmed_close.cls_btn {
  display: block;
  margin: 0 auto;
  left: 50%;
  right: auto;
  position: fixed;
  top: 10%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  font-size: 1.4em;
  color: #fff;
  cursor: pointer;
  border: 2px solid #fff;
  text-align: center;
  line-height: 40px;
  border-radius: 40px;
  background: var(--primary-color);
  border-color: var(--primary-color);
  animation: pcClsBtnShow 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
  box-shadow: 2px 2px 8px rgb(0 0 0 / 30%);
}
.dimmed_close.cls_btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary-color);
}
@keyframes pcClsBtnShow {
  0% {
    top: 10%;
  }
  100% {
    top: -1%;
  }
}

.hotspotTreasureWrapper img {
  opacity: 0.1;
}
.hotspotTreasureWrapper .hotspotModal {
  height: 100px;
  background: skyblue;
}
.hotspotProductWrapper .thumb_wrap {
  cursor: pointer;
  z-index: 5;
}
.hotspotProductWrapper .prd_name {
  cursor: pointer;
}

.mapedMarks {
  position: absolute;
  height: 35px;

  border-radius: 5px;
  cursor: pointer;
  background-image: url(https://test.miraebiz.co.kr/imageserver/webp/100/img/vr/map_marker.webp);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
  animation: marker_ani 1.5s infinite;
}
.mapedMarks::before {
  content: "\f3c5";
  position: absolute;
  left: 4px;
  font-family: "Font Awesome 6 Free";
}
.mapedMarks:hover {
  height: auto;
  padding: 2px 5px 2px 18px;
  background: #ffffff;
  color: var(--primary-color);
  box-shadow: 0 0 2px var(--primary-color);
}
@keyframes marker_ani {
}
@media all and (max-width: 1024px) {
  .mapedMarks {
    background: none;
    height: auto;
    padding: 2px 5px 2px 18px;
    background: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 0 2px var(--primary-color);
  }
}
#navigation {
  top: 120px;
  right: -360px;
  text-align: center;
  padding: 15px 0 0;
  border-radius: 10px;
  transition: all 0.4s;
  z-index: 1;
}
html.dark #navigation {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
#navigation .navigationWrap {
  position: relative;
}
#navigation.on {
  right: 20px;
  z-index: 3;
}
#navigation img {
  display: block;
  max-width: 360px;
  max-height: 300px;
}

#groupNav {
  max-width: 1000px;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 15px;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}
#groupNav.on {
  bottom: 0;
  z-index: 4;
}
#groupNav .groupNavWrapBox {
  overflow-y: scroll;
  border-radius: 10px 10px 0 0;
  display: flex;
}
#groupNav .thumb_list_wrap {
  display: flex;
  padding: 5px;
}
#groupNav .thumb_list_wrap.temp_list .groupNavDivs {
  display: flex;
}

#groupNav .thumb_list_wrap.temp_list .groupNavDivs span {
  color: #ddd;
}
#groupNav .thumb_list_wrap.temp_list .groupNavDivs span b {
  font-weight: 100;
  font-size: 0.8em;
}
#groupNav .thumb_list_wrap .groupNavDivs {
  overflow: hidden;
  position: relative;
  width: 130px;
  height: 80px;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 5px;
}
#groupNav .thumb_list_wrap .groupNavDivs:last-child {
  margin-right: 0;
}

.panoGroupNow {
  border: 3px solid var(--primary-color_opct8);
  border-radius: 23px;
  box-sizing: border-box;
}
#groupNav img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  filter: brightness(0.6);
  transition: all 0.4s;
}
#groupNav .thumb_list_wrap .groupNavDivs:hover {
  box-shadow: 0 0 5px var(--primary-color);
}
#groupNav .thumb_list_wrap .groupNavDivs:hover img {
  filter: initial;
}
#groupNav span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  text-align: center;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.9em;
  text-shadow: 0 0 5px rgb(0 0 0 / 50%);
  transition: all 0.4s;
}
#groupNav .thumb_list_wrap .groupNavDivs:hover span {
  opacity: 0;
}

/* before hotspot.html.css */

.hotspot_modal {
  position: relative;
  top: 45px;
  width: auto;
  margin: 5px;
  background: rgba(255, 255, 255, 1);
  /*
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  */
  border-radius: 10px;
  padding: 20px 30px 15px 20px;
  font-size: 14px;
  color: #424242;
  box-shadow: 1px 1px 5px rgb(0 0 0 / 40%);
}
.hotspot_modal:after {
  position: absolute;
  display: block;
  left: 50%;
  top: -5px;
  width: 0px;
  height: 0px;
  border-top: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(255, 255, 255, 0.8);
  transform: translate(-50%);
  content: "";
}
.info_wrap {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  width: 1000px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 1px 1px 10px rgb(0 0 0 / 40%);
}
.info_wrap .thumb_wrap {
  position: relative;
  overflow: hidden;
  /* flex: 1; */
  width: 375px;
  height: 375px;
  border-radius: 10px;
  cursor: pointer;
}
.info_wrap .thumb_wrap img {
  display: block;
  width: 140%;
  margin: -20%;
}
.info_wrap .txt_wrap {
  flex-direction: column;
  justify-content: space-evenly;
}
.info_wrap .txt_wrap,
.info_wrap .prd_change .change_list {
  width: calc(100% - 465px);
  display: flex;
  padding: 0 0 0 50px;
}
.info_wrap .txt_wrap .prd_name {
  margin: 0;
  font-size: 2em;
  width: 100%;
  cursor: pointer;
  /*말줄임표*/
  white-space: normal;
  display: -webkit-box;
  color: #fff;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.info_wrap .txt_wrap .prd_model {
  font-size: 1.3em;
  margin: 1em 0 2em;
  cursor: pointer;
  font-weight: 400;
  color: #cfcfcf;
}
.info_wrap .txt_wrap .prd_icons {
  display: flex;
  margin: 0 0 2em;
}
.info_wrap .txt_wrap .prd_icon {
  font-size: 1.4em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--secondary-color);
  border: 1px solid #fff;
  padding: 8px 10px;
  margin-right: 15px;
  border-radius: 5px;
  text-shadow: none;
}
.info_wrap .txt_wrap .prd_icon .icon_tit {
  font-size: 0.8em;
  font-weight: 300;
  text-align: center;
  display: block;
  margin: 0px 0 0 10px;
  color: #fff;
}
.info_wrap .txt_wrap .prd_icon:last-child {
  margin-right: 0;
}
.info_wrap .txt_wrap .prd_icon.icon_share {
  position: relative;
}
.info_wrap .txt_wrap .share_box {
  position: absolute;
  display: none;
  top: 220%;
  left: -113px;
  width: 250px;
  background: #fff;
  padding: 0.8em;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
  cursor: default;
}
.info_wrap .txt_wrap .prd_icon.icon_share.on .share_box {
  display: block;
}
.info_wrap .txt_wrap .share_box:after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #fff;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.info_wrap .txt_wrap .share_box .sns_icons {
  display: flex;
  justify-content: center;
}
.info_wrap .txt_wrap .share_box .sns_icon {
  overflow: hidden;
  width: 45px;
  height: 45px;
  margin: 0 5px;
  border-radius: 12px;
  box-shadow: 3px 3px 5px rgb(0 56 100 / 30%);
  transition: all 0.3s;
  cursor: pointer;
}
.info_wrap .txt_wrap .share_box .sns_icon:hover {
  box-shadow: 5px 5px 20px rgb(0 56 100 / 30%);
}
.info_wrap .txt_wrap .share_box .sns_icon img {
  display: block;
  width: 100%;
}
.info_wrap .txt_wrap .share_box .url_copy {
  display: flex;
  margin: 0.8em 0 0 0;
}
.info_wrap .txt_wrap .share_box .url_copy input.url_box {
  width: calc(100% - 80px);
  border-radius: 20px 0 0 20px;
  padding: 10px 0 10px 15px;
  border: 2px solid #3697d7;
}
.info_wrap .txt_wrap .share_box .url_copy button {
  width: 80px;
  padding: 10px;
  text-align: center;
  border-radius: 0 20px 20px 0;
  color: #fff;
  background: #3697d7;
}
.info_wrap .txt_wrap .prd_price {
  /* display: flex; */
  width: 100%;
  justify-content: space-between;
  font-weight: 100;
}
.info_wrap .txt_wrap .prd_price .price_wrap {
  display: flex;
  width: 100%;
  margin: 15px 0;
  justify-content: space-between;
  font-weight: 400;
}
.info_wrap .txt_wrap .prd_price .price_wrap {
  margin-bottom: 0;
}
/* .info_wrap .txt_wrap .prd_price .price_wrap p span{
  color :var(--point_color);   
} */
.info_wrap .txt_wrap .prd_price .price_wrap .price_tit {
  font-size: 1.3em;
  font-weight: 400;
  align-self: center;
  color: #cfcfcf;
}
.info_wrap .txt_wrap .prd_price .price_wrap p {
  font-size: 1.8em;
  margin: 0;
}
.info_wrap .txt_wrap .prd_price .price_wrap.minimum p {
  text-decoration: line-through;
}
.info_wrap .txt_wrap .prd_price .price_wrap.discount p {
  color: #ff5c4a;
}
.info_wrap .prd_change {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0.55em 0 0;
  padding: 0.7em 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.4);
}
.info_wrap .prd_change .change_tit {
  position: relative;
  text-align: center;
  width: 415px;
  display: block;
  align-self: center;
}
.info_wrap .prd_change .change_tit > p > i {
  font-display: inline-block;
  font-size: 1.3em;
  color: var(--primary-color);
}
.info_wrap .prd_change .change_tit > p > i:first-child {
  margin-right: 0.5em;
}
.info_wrap .prd_change .change_tit > p > b {
  margin: 0.5em 0 1em;
  display: block;
  font-size: 1.1em;
  font-weight: 400;
  color: #fff;
  line-height: 1.3em;
  width: 100%;
}
.info_wrap .prd_change .change_tit > p > b > br {
  display: none;
}
.compare_go_btn {
  padding: 8px 10px;
  display: inline-block;
  font-size: 1.2em;
  font-weight: 300;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
}
.compare_go_btn > i {
  margin-right: 7px;
  color: var(--secondary-color);
}
.compare_go_btn:hover {
  color: var(--secondary-color);
  background-color: #fff;
}
.info_wrap .prd_change .change_list {
  justify-content: flex-end;
}
.info_wrap .prd_change .change_thumb {
  overflow: hidden;
  position: relative;
  max-width: 230px;
  width: 230px;
  height: auto;
  text-align: center;
  border-radius: 5px;
  margin: 0 10px 0 0;
}
.info_wrap .thumb_wrap:after {
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
  font-family: "Font Awesome 6 Free", "Pretendard";
  font-weight: 600;
  content: "\f090 \A 상품 보러가기";
  white-space: pre;
  font-size: 2em;
  text-align: center;
  width: 100%;
  height: calc(100% - 70%);
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 92, 74, 0.6), transparent 100%);
  transition: all 0.2s;
  border-radius: 5px;
  line-height: 1.5em;
  cursor: pointer;
  padding: 35% 0;
}
.pnlm-sprite {
  background-image: none;
}
.info_wrap .prd_change .change_thumb > span {
  display: inline-block;
  padding-top: 5px;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.3em;
}
.info_wrap .prd_change .change_thumb:last-child {
  margin-right: 0;
}
.info_wrap .prd_change .change_thumb:after {
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
  font-family: "Font Awesome 6 Free", "Pretendard";
  font-weight: 600;
  content: "\f0ec \A 교체하기";
  white-space: pre;
  line-height: 1.4em;
  font-size: 1.4em;
  text-align: center;
  width: 100%;
  height: calc(100% - 70%);
  background: linear-gradient(180deg, rgba(255, 92, 74, 0.6), transparent 100%);
  transition: all 0.2s;
  border-radius: 5px;
  cursor: pointer;
  padding: 35% 0;
}
.info_wrap .prd_change .change_thumb img {
  display: block;
  width: 100%;
  border-radius: 5px;
}
.info_wrap .all_menu_btn_wrap {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0.6em 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

.info_wrap .all_menu_btn_wrap .all_menu_btn {
  display: inline-block;
  font-size: 1.4em;
  font-weight: 500;
  padding: 10px 0;
  cursor: pointer;
  color: #fff;
}
.info_wrap .all_menu_btn_wrap a {
  display: inline-block;
  font-size: 1.4em;
  font-weight: 500;
  padding: 10px 0;
  cursor: pointer;
  color: #fff;
}
.info_wrap .all_menu_btn_wrap .all_menu_btn > i {
  color: var(--primary-color);
  font-weight: 700;
}
.info_wrap .all_menu_btn_wrap a > .category_list_btn > i {
  color: var(--secondary-color);
}
.info_wrap .all_menu_btn_wrap a > .category_list_btn > span.category_name {
  font-weight: 700;
  color: var(--secondary-color);
}
.info_wrap .btn_wrap .cate_view {
  padding: 10px 0;
  cursor: pointer;

  padding: 5px 0;
  margin: 5px 0 0 0;
  border-radius: 20px;
  color: var(--point_color);
  font-size: 0.9em;
  float: right;
}
.info_wrap .btn_wrap .cate_view:hover {
  font-weight: 900;
}
.hotspot_modal .close {
  position: absolute;
  top: -10px;
  right: -10px;
}
.hotspot_modal .close:hover i {
  color: var(--point_color);
}

@media all and (max-width: 1320px) {
  #groupNav {
    max-width: 900px;
    width: 80%;
  }
  .pnlm-render-container {
    z-index: 0;
  }
}
@media all and (max-width: 1200px) {
  .info_wrap {
    width: 90%;
  }
  .info_wrap .thumb_wrap {
    position: relative;
    width: 350px;
    height: 350px;
  }
  .info_wrap .thumb_wrap:before {
    position: absolute;
    display: block;
    content: "상품보기 \f090";
    top: 5%;
    right: 5%;
    font-family: "Font Awesome 6 Free", "Pretendard";
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
    text-shadow: none;
  }
  .info_wrap .txt_wrap {
    width: calc(100% - 400px);
  }
  .info_wrap .prd_change .change_tit {
    width: 230px;
  }
  .info_wrap .prd_change .change_tit > p > b > br {
    display: block;
  }
  .info_wrap .prd_change .change_list {
    width: calc(100% - 280px);
  }
}
@media all and (max-width: 870px) {
  .hotspotModal {
    overflow-y: scroll;
  }
  .info_wrap .all_menu_btn_wrap {
    margin: 0.6em 0 1em;
  }
  .info_wrap {
    position: initial;
    left: auto;
    bottom: auto;
    transform: translate(0, 0);
    width: 500px;
    margin: 80px auto;
    justify-content: center;
  }
  .info_wrap .thumb_wrap {
    width: 250px;
    height: 250px;
    margin: 0 auto;
  }
  .info_wrap .txt_wrap {
    width: 100%;
    padding: 30px 0 0 0;
    font-size: 0.8em;
    text-align: center;
  }
  .info_wrap .prd_change {
    flex-direction: column;
  }
  .info_wrap .txt_wrap .prd_icons {
    justify-content: center;
  }
  .info_wrap .prd_change .change_tit {
    width: 100%;
    padding: 0 0 30px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
  .info_wrap .prd_change .change_tit > p > i {
    font-size: 1.4em;
    animation: color_F 1s ease-in-out 15 forwards;
  }
  @keyframes color_F {
    0% {
      color: var(--primary-color);
    }
    50% {
      color: #fff;
    }
    100% {
      color: var(--primary-color);
    }
  }
  .info_wrap .prd_change .change_tit > p > b > br {
    display: none;
  }
  .info_wrap .prd_change .change_tit:after {
    top: 30px;
    white-space: initial;
    left: 0;
    transform: translateX(0);
  }
  .info_wrap .prd_change .change_list {
    width: 100%;
    padding: 0;
    justify-content: space-between;
  }
  .dimmed_close.cls_btn {
    top: auto;
    position: sticky;
    animation-name: mobileClsBtnShow;
    animation-duration: 1s;
  }
  .compare_go_btn {
    font-size: 1em;
  }

  @keyframes mobileClsBtnShow {
    0% {
      top: auto;
      bottom: -50%;
    }
    100% {
      top: auto;
      bottom: 5%;
    }
  }
}
@media all and (max-width: 600px) {
  .info_wrap {
    width: 85%;
  }
  .icon.prdIcon {
    width: 25px;
    height: 25px;
    font-size: 0.85em;
  }
  .lspPrd .icon i:before {
    margin-top: 0px;
  }
  .icon {
    transform: translate(-10px, -10px);
    background: rgb(54, 151, 215, 0.7);
  }
  .icon:hover {
    transform: translate(-10px, -10px) scale(1.1);
  }
  .lspPrd .icon i:before {
    font-size: 11px;
  }
  .icon.sceneIcon {
    padding: 6px 13px;
    font-size: 14px;
    line-height: 1.1em;
    box-shadow: 2px 2px 0 var(--secondary-color);
  }
  .lspPrd .icon {
    background: rgb(255, 92, 74, 0.7);
  }
  .info_wrap .thumb_wrap:before {
    right: 2.5%;
    width: 70px;
    height: 15px;
    font-size: 14px;
  }
}

@media all and (max-width: 420px) {
  .info_wrap {
    margin: 50px auto;
  }
  .info_wrap .all_menu_btn_wrap {
    flex-direction: column;
  }
  .info_wrap .all_menu_btn_wrap .all_menu_btn {
    margin-bottom: 1em;
    padding: 10px;
    font-size: 1.1em;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #fff;
    width: 90%;
  }
  .info_wrap .all_menu_btn_wrap a {
    width: 90%;
    margin-bottom: 1em;
    padding: 10px;
    font-size: 1.1em;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #fff;
  }
  .info_wrap .all_menu_btn_wrap a > .category_list_btn > i {
    display: none;
  }
}
@media all and (max-width: 300px) {
  .hotspot_modal {
    top: 5px;
  }
  .hotspot_modal .close {
    font-size: 2em;
    padding: 5px;
  }
  .info_wrap {
    display: block;
  }
  .info_wrap .thumb_wrap {
    margin: 0 auto;
  }
  .info_wrap .txt_wrap {
    width: 100%;
    margin-top: 20px;
  }
  .info_wrap .txt_wrap .prd_name {
    text-align: center;
  }
}
@media (hover: hover) {
  .info_wrap .txt_wrap .prd_icon:hover {
    background: #fff;
  }
  .info_wrap .txt_wrap .prd_icon:hover .icon_tit {
    color: var(--secondary-color);
  }
  .info_wrap .prd_change .change_thumb:hover:after {
    top: 0px;
    opacity: 1;
  }
  .info_wrap .thumb_wrap:hover:after {
    top: 0px;
    opacity: 1;
  }
}