@import url(../../common/css/font.css);
@import url(../../common/css/reset.css);
@import url(../../common/css/variable.css);

[data-translate-ko],
[data-translate-en] {
  display: none;
}
.pl80 {
  padding-left: var(--area80);
}
.zoom_area {
  width: 100%;
  height: 100%;
  /* transform-origin: top left; */
  /* position: absolute;
  left: 0;
  top: 0; */
  position: relative;
}
.cursor_defulat {
  cursor: default;
}
.margin0px {
  margin: 0 !important;
}

.d_block {
  display: block !important;
}
.hidden_con {
  display: none;
}
.overflow_hidden {
  overflow: hidden !important;
}
.hidden_con.show {
  display: block;
}

.validation {
  display: none;
  width: calc(100% - var(--area14));
  text-align: center;
  position: absolute;
  top: var(--area38);
  left: 50%;
  transform: translatex(-50%);
  color: #fff;
  font-size: var(--font18);
  font-weight: 600;
  line-height: var(--area41);
  background: rgba(0, 0, 0, 0.6);
}

.validation.on {
  display: block;
}
.device_time {
  position: absolute;
  /* top: var(--area4); */
  top: 2.4%;
  left: calc(50% - var(--area4));
  transform: translatex(-50%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: end;
}
.device_time span {
  color: #fff;
  font-family: "Clockopia";
  line-height: 1;
}
.device_time .date {
  font-size: var(--area10);
  margin-right: var(--area7);
}
.device_time .time {
  font-size: var(--area18);
}
.device_time .temp {
  display: none;
  font-size: var(--area16);
  margin-left: var(--area26);
}

.ver_new .device_time .temp,
.ver_old .device_time .temp {
  display: block;
}
.device_time .temp span {
  font-family: "DroidSans";
}
.fadeIn {
  animation-duration: 1s;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}
.fadeOut {
  animation-duration: 1s;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}
.fc_green {
  color: #00ae42 !important;
}

.fc_light_green {
  color: #38d430;
}
.fc_red {
  color: red !important;
}
.fw_regular {
  font-weight: 400 !important;
}
.fw_medium {
  font-weight: 500 !important;
}
.fw_bold {
  font-weight: 700 !important;
}
.fw_black {
  font-weight: 900 !important;
}

.inline_stroke {
  outline-color: #00e500;
  outline-style: solid;
  outline-width: 1px;
  /* outline-offset: -3px; */
}

.icon {
  width: var(--area48);
  margin-left: var(--area4);
  margin-right: var(--area4);
  vertical-align: middle;
  /* margin-top: var(--area-12); */
  /* image-rendering: pixelated; */
}

.icon.h35 {
  height: var(--area35);
  width: auto;
}

.icon_wrap {
  display: block;
  height: auto;
  padding-top: var(--area24);
  padding-bottom: var(--area32);
}

.icon_wrap .icon {
  margin-top: 0;
}
.img {
  width: auto;
  min-height: var(--area72);
  height: auto;
  display: block;
  padding-top: var(--area24);
  padding-bottom: var(--area32);
}

.img.w320 {
  width: var(--area320);
  max-width: 100%;
}

.img_list {
  padding-top: var(--area24);
  display: flex;
  gap: var(--area16);
}

.img_list li {
  text-align: center;
  font-size: var(--area20);
  font-weight: bold;
  line-height: 1.4;
}

.img_list img {
  display: block;
  margin-top: var(--area16);
  padding-top: 0;
  width: var(--area252);
}

.bg_transparent {
  background: transparent !important;
}
.btn.green {
  background: #00ae42;
  color: #fff;
}
.btn.royal_blue {
  background: #264672;
  color: #fff;
}

.btn_play {
  min-width: var(--area64);
  width: var(--area64);
  height: var(--area64);
  border-radius: 100px;
  background: #35d32f;
}
.btn_play:hover {
  background: #00ae42;
}
.btn_play img {
  width: 100%;
}

.btn_fullscreen {
  background-image: url("../img/zoom_screen_in_bk.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.btn_fullscreen.on {
  background-image: url("../img/zoom_screen_out_bk.svg");
}

.green .btn_fullscreen {
  background-image: url("../img/zoom_screen_in_wh.svg");
}
.green .btn_fullscreen.on {
  background-image: url("../img/zoom_screen_out_wh.svg");
}

.hover_img img:first-child {
  display: block;
}
.hover_img img + img {
  display: none;
}
.hover_img:hover img:first-child {
  display: none;
}
.hover_img:hover img + img {
  display: block;
}

.btn_wheel {
  width: var(--area116) !important;
  position: absolute !important;
  bottom: var(--area12);
  left: 50%;
  margin-left: calc(var(--area-116) / 2);
  transform-origin: center;
}
/* .btn_wheel .hover_img image {
  display: block;
}
.btn_wheel .hover_img:hover image {
  display: block;
  opacity: 0.4;
}
.btn_wheel .on .hover_img image {
  display: block;
  opacity: 0.4;
} */

/* .btn_wheel_left:active {
  opacity: 0.4;
}
.btn_wheel_right:active {
  opacity: 0.4;
} */

.wheel_gauge {
  display: flex;
  width: var(--area122);
  height: var(--area7);
  gap: var(--area2);
  position: absolute;
  top: var(--area103);
  left: 50%;
  transform: translatex(-50%);
}
.wheel_gauge div {
  flex: 1;
}
.wheel_gauge div.on {
  background: url(../img/img_btn_emergencyMotion_gauge.png) no-repeat center / cover;
}

/* .wheel_gauge div:nth-child(5) {
  margin-right: var(--area5);
} */
/* 
svg .hover_img image:first-child {
  display: block;
} */
/* svg .hover_img image:last-child {
  display: none;
}
svg .hover_img:hover image:first-child {
  display: none;
}
svg .hover_img:hover image:last-child {
  display: block;
} */

svg .hover_img image {
  display: none;
}

svg .hover_img image.on,
svg .hover_img image.view {
  display: block;
}
svg .hover_img .inline_stroke {
  outline-color: transparent;
}
svg .on .hover_img image,
svg .hover_img:hover image {
  display: block;
}

svg .on .hover_img .inline_stroke,
svg .hover_img:hover .inline_stroke {
  outline-color: #00e500;
}

.btn_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn_wrap .btn {
  flex: 1;
  text-align: center;
}

.line_btn {
  display: flex;
  width: 100%;
  gap: var(--area9);
  justify-content: center;
  align-items: center;
  font-size: var(--font19);
  font-weight: 900;
  color: #fff;
}
.line_btn img {
  width: var(--area26);
}
.list_wrap li {
  display: flex;
  border-bottom: 1px solid #262626;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list_wrap li > span {
  /* flex: auto; */
  font-size: var(--font15);
  line-height: 2.266;
  font-weight: 900;
  /* padding: 0 var(--area17); */
  padding: 0 var(--area8);
  color: #fff;
  width: auto;
}

.list_wrap li .switch {
  margin-top: auto;
  margin-bottom: auto;
}
.switch {
  width: var(--area24);
  height: var(--area24);
  padding: 0;
  background-image: url(../img/ic_switch_off.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.switch.on {
  background-image: url(../img/ic_switch_on.png);
}
.on_flicker {
  animation-duration: 10s;
  animation-name: flicker;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0;
  animation-timing-function: linear;
}

.on_flicker_cross {
  animation-duration: 16s;
  animation-name: flicker_cross;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0;
  animation-timing-function: linear;
}

.on_flicker_cross_reverse {
  animation-duration: 16s;
  animation-name: flicker_cross;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 0;
  animation-timing-function: linear;
  animation-direction: reverse;
}

.btn_list_wrap li {
  display: flex;
  border-bottom: 1px solid #262626;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.btn_list_wrap li p,
.btn_list_wrap li a,
.btn_list_wrap li button {
  width: 100%;
  /* padding: 0 var(--area16) 0 var(--area15); */
  padding: 0 3.87%;
  display: flex;
  gap: var(--area7);
  justify-content: space-between;
  align-items: center;
  font-size: var(--font14);
  line-height: 2.8;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
}

.btn_list_wrap li a.disabled,
.btn_list_wrap li button:disabled {
  opacity: 0.3;
  cursor: default;
}

.btn_list_wrap li p > *,
.btn_list_wrap li a > *,
.btn_list_wrap li button > * {
  line-height: 1;
}

.btn_list_wrap li p span,
.btn_list_wrap li a span,
.btn_list_wrap li button span {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: end;
  /* gap: 0.41vw; */
  gap: var(--area14);
  /* font-size: 0.67vw; */
  font-size: var(--area13);
  text-transform: none;
  /* font-size: 96%; */
  /* font-size: 65%; */
  /* line-height: 4.104; */
  /* line-height: 1.25; */
  /* height: 100%; */
  /* width: 50%; */
}

.btn_list_wrap li p span[data-translate-ko],
.btn_list_wrap li a span[data-translate-ko],
.btn_list_wrap li button span[data-translate-ko],
.btn_list_wrap li p span[data-translate-en],
.btn_list_wrap li a span[data-translate-en],
.btn_list_wrap li button span[data-translate-en] {
  display: none;
}

.btn_list_wrap li p span[data-translate-ko] span,
.btn_list_wrap li a span[data-translate-ko] span,
.btn_list_wrap li button span[data-translate-ko] span,
.btn_list_wrap li p span[data-translate-en] span,
.btn_list_wrap li a span[data-translate-en] span,
.btn_list_wrap li button span[data-translate-en] span {
  display: inline;
}

.btn_list_wrap li p + div {
  width: 100%;
}

.btn_list_wrap li p img,
.btn_list_wrap li a img,
.btn_list_wrap li button img {
  width: 0.72vw;
  height: auto;
  flex: none;
}
.btn_list_wrap li > span {
  flex: auto;
  font-size: var(--font15);
  line-height: 2.266;
  font-weight: 900;
  padding: 0 var(--area17);
  color: #fff;
}
.btn_list_wrap li > span + a img,
.btn_list_wrap li > span + button img {
  flex: auto;
}
.btn_list_wrap li div {
  flex: auto;
  height: 100%;
}

.btn_list_wrap li.hidden_con {
  display: none;
}
.btn_list_wrap li.hidden_con.show {
  display: flex;
}

.btn_list_wrap.type_accordion button + .fold_con {
  background: #1a1a1a;
  border: 1px solid #4d4d4d;
  border-top: 1px solid #333333;
  border-radius: 0 0 var(--area3) var(--area3);
  padding: var(--area14) var(--area12);
  color: #fff;
  font-size: var(--area14);
  font-weight: 600;
  line-height: 1;
}

.btn_list_wrap.type_accordion button + div {
  display: none;
}
.btn_list_wrap.type_accordion .on button + div {
  display: block;
}
.inner .list_wrap,
.inner .btn_list_wrap {
  padding-right: var(--area8);
}

.inner .btn_list_wrap li a,
.inner .btn_list_wrap li button {
  line-height: 2.267;
  padding: 0 var(--area12) 0 var(--area11);
}

.inner .btn_list_wrap li > span + a,
.inner .btn_list_wrap li > span + button {
  margin-right: var(--area4);
  width: var(--area60);
  padding: 0;
}

.box_btn_list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--area8);
}
.box_btn_list li {
  flex: 1;
}
.box_btn_list li button {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100%;
  font-weight: 900;
  color: #fff;

  background-image: url(../img/bg_field@3x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.box_btn_list li.on button {
  background-image: url(../img/bg_field_on@3x.png);
}

.box_btn_list li button:disabled {
  background-image: url(../img/bg_popup_btn_disabled.png);
}

.box_btn_list.two_tone li button {
  background-image: url(../img/bg_popup_btn_disabled.png);
}
.box_btn_list.two_tone li.on button {
  background-image: url(../img/bg_field@3x.png);
}
.box_btn_list.row {
  flex-direction: row;
}

.field + .box_btn_list {
  margin-top: 3%;
  height: 29.068%;
  margin-bottom: auto;
}

.text_left {
  text-align: left;
}
.text_right {
  text-align: right;
}
.text_center {
  text-align: center;
}

.line {
  position: relative;
}
.line:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  left: -1px;
  width: 1px;
  height: calc(100% - var(--area12));
  background: #4d4d4d;
  border-right: 1px solid #1a1a1a;
}

.switch_wrap {
  margin-top: auto;
  width: 100%;
  padding: var(--area30);
}

.switch_wrap div {
  padding: var(--area4);
  background: url(../img/lag_btn_bg.png) no-repeat center / cover;
  width: 100%;
  display: flex;
}
.switch_wrap input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  appearance: none;
}
.switch_wrap label {
  flex: 1;
  text-align: center;
  line-height: 2;
  font-size: var(--font20);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.switch_wrap input + label {
  background: #1a3a64;
  box-shadow: 0 2px var(--area4) 0 rgba(0, 0, 0, 0.1);
  color: #35d32f;
}
.switch_wrap input:checked + label {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
}
.switch_wrap input:checked + label + label {
  background: #1a3a64;
  box-shadow: 0 2px var(--area4) 0 rgba(0, 0, 0, 0.1);
  color: #35d32f;
}

.switch_wrap.round {
  /* margin-left: auto;
  margin-right: auto;
   */
  width: var(--area160);
  height: var(--area48);
  padding: var(--area4);
  border-radius: var(--area24);
  box-shadow: inset 0 var(--area2) var(--area4) 0 rgba(0, 0, 0, 0.14);
  background-color: #dbdbdb;

  /**/
  /* margin: 0;
  position: fixed;
  bottom: var(--area30);
  left: calc((100% - var(--area240)) / 2);
  transform: translatex(calc(150% + var(--area30))); */
}

.switch_wrap.round div {
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 0;
}
.switch_wrap.round label {
  color: #000;
}

.switch_wrap.round input + label,
.switch_wrap.round input:checked + label + label {
  box-shadow: none;
  color: #000;
  background: transparent;
}

.switch_wrap.round input + label + label,
.switch_wrap.round input:checked + label {
  color: #000;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.16);
}

.zoom_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--area20);
  width: fit-content;
  height: fit-content;
  /* width: 12.5vw; */
  /* width: var(--area240); */
  border-radius: 100px;
  /* padding: 0 var(--area4); */
  box-shadow: 0 var(--area20) var(--area20) 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: absolute;
  bottom: var(--area30);
  right: var(--area30);
}
.zoom_wrap div {
  /* height: calc(var(--font20) * 2.4); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--area172);
  position: relative;
}
/* .zoom_wrap div:after {
  content: "";
  display: block;
  width: 1px;
  height: calc((var(--font20) * 2) - var(--area8));
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  right: var(--area-10);
  transform: translatey(-50%);
} */
.zoom_wrap div span {
  width: var(--area76);
  text-align: center;
  line-height: 2.4;
  font-size: var(--font20);
  font-weight: 700;
  color: #000;
}
.zoom_wrap button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: var(--area48);
  height: var(--area48);

  border-radius: 1000px;
  /* background-color: rgba(0, 0, 0, 0.05); */
  background-color: #fff;
}
.zoom_wrap button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.zoom_wrap.green {
  background: #00ae42;
}
/* 
.zoom_wrap.green div:after {
  background-color: rgba(255, 255, 255, 0.1);
} */
.zoom_wrap.green button {
  background-color: rgba(0, 0, 0, 0.1);
}

.zoom_wrap.green button:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.zoom_wrap.green button svg path {
  fill: white;
}
.zoom_wrap.green div span {
  color: #fff;
}

.zoom_wrap .switch_wrap.round {
  display: none;
  background-color: #fff;
  width: var(--area114);
  box-shadow: none;
  padding: 0;

  right: calc((100vw - var(--area354)) / 2);
  transform: translatex(100%);
  /* left: calc((100% - var(--area240)) / 2); */
  /* transform: translatex(calc(210% + var(--area30))); */
  margin: 0;
  position: absolute;
  bottom: 0;
  /* bottom: var(--area30); */
  /* left: calc((100% - var(--area240)) / 2); */
  /* transform: translatex(calc(150% + var(--area30))); */
}
.zoom_wrap .switch_wrap.round.on {
  display: block;
}

.zoom_wrap .switch_wrap.round div {
  padding-left: var(--area20);
  padding-right: var(--area20);
}
.zoom_wrap .switch_wrap.round label {
  text-align: left;
  font-size: var(--font14);
}
.zoom_wrap .switch_wrap.round label:last-child {
  text-align: right;
}

.zoom_wrap .switch_wrap.round label:last-child::before {
  content: "";
  display: block;
  width: 1px;
  height: var(--area17);
  background: #f0f0f0;
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  left: -1px;
}
.zoom_wrap .switch_wrap.round input + label + label,
.zoom_wrap .switch_wrap.round input:checked + label {
  box-shadow: none;
  color: #00ae42;
  position: relative;
}

.zoom_wrap .switch_wrap.round input + label + label:after {
  content: "";
  display: block;
  width: var(--area24);
  height: var(--area2);
  background: #00ae42;
  position: absolute;
  bottom: 0;
  right: 0;
  /* transform: translateX(-50%); */
}
.ver_en .zoom_wrap .switch_wrap.round input + label + label:after {
  content: "";
  display: block;
  width: var(--area29);
  height: var(--area2);
  background: #00ae42;
  position: absolute;
  bottom: 0;
  right: 0;
  /* transform: translateX(-50%); */
}
.zoom_wrap .switch_wrap.round input:checked + label:after {
  content: "";
  display: block;
  width: var(--area24);
  height: var(--area2);
  background: #00ae42;
  position: absolute;
  bottom: 0;
  left: 0;
  /* transform: translateX(-50%); */
}

.zoom_wrap .switch_wrap.round input:checked + label + label {
  color: #000;
}
.zoom_wrap .switch_wrap.round input:checked + label + label:after {
  display: none;
}
.field_wrap {
  padding: var(--area8);
}
.field {
  background: url(../img/bg_field@3x.png) no-repeat center / 100% 100%;
  width: 100%;
  display: block;
}
.field img {
  display: block;
}

button.field {
  display: flex;
  gap: var(--area9);
  justify-content: center;
  align-items: center;
  font-size: var(--font19);
  font-weight: 900;
  color: #fff;
}

button.field img {
  width: var(--area26);
}

.field.box_gauge_wrap {
  display: flex;
  align-items: center;

  /* position: relative; */
}
.field.box_gauge_wrap > span {
  width: var(--area36);
  padding: var(--area9);
  color: #fff;
  text-align: center;
  font-weight: 900;
  font-size: var(--font11);
}

.field.box_gauge_wrap > span:last-child {
  text-align: right;
}

.field.box_gauge_wrap.box_count_5 .box_gauge {
  height: var(--area24);
}
.field.box_gauge_wrap.box_count_5 > span {
  min-width: var(--area70);
  width: var(--area70);
  max-width: var(--area70);
  text-align: left;
}
.field.box_gauge_wrap.box_count_5 > span:last-child {
  text-align: right;
}

.field.box_gauge_wrap .box_gauge {
  margin: auto;
  width: var(--area238);
  /* height: 100%; */
  height: var(--area38);
  gap: var(--area7);
  /* padding: 1.716% 11.436% 1.335%;
  gap: 2.6%; */
}

.field.box_gauge_wrap .box_gauge a,
.field.box_gauge_wrap .box_gauge button {
  flex: 1;
  width: 100%;
  height: 100%;
}

.table_wrap {
  display: block;
  width: 100%;
}

.table_wrap table {
  width: 100%;
  margin-top: var(--area17);
  margin-bottom: var(--area24);
  border-collapse: collapse;
  border-right: 1px solid #e5e5e5;
  /* border-bottom: 1px solid #e5e5e5; */
  text-align: center;
}

.table_wrap table th,
.table_wrap table td {
  padding-top: var(--area7);
  padding-bottom: var(--area7);
}
.table_wrap table th .icon,
.table_wrap table td .icon {
  margin: var(--area5) auto;
  image-rendering: auto;
}

.table_wrap table td ul:first-child,
.table_wrap table td ol:first-child {
  margin-top: var(--area5);
}
.table_wrap table td ul:last-child,
.table_wrap table td ol:last-child {
  margin-bottom: var(--area5);
}

.table_wrap table thead th {
  background: #f2f2f2;
  font-size: var(--font16);
  font-weight: 700;
  padding-left: var(--area24);
  padding-right: var(--area24);
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  height: var(--area40);
  padding: 12px;
}
.table_wrap table thead tr:first-child th {
  border-top: 1px solid #000;
}
.table_wrap table thead th.fw_regular {
  padding-left: var(--area18);
  padding-right: var(--area18);
}
.table_wrap table tbody th {
  border-left: 1px solid #e5e5e5;
  background: #f2f2f2;
  font-size: var(--font16);
  font-weight: 400;
  padding-left: var(--area24);
  padding-right: var(--area24);
  height: var(--area40);
  border-top: 1px solid #e5e5e5;
}
.table_wrap table tbody tr:first-child th {
  border-top: 1px solid #000;
  /* border-left: 1px solid #e5e5e5; */
}
.table_wrap table thead + tbody tr:first-child th {
  border-top: 1px solid #e5e5e5;
}

.table_wrap table tbody th + th {
  border-left: 1px solid #e5e5e5;
}
.table_wrap table tbody tr:last-child th,
.table_wrap table tbody tr:last-child td {
  border-bottom: 1px solid #000;
}
.table_wrap table tbody td {
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  padding-left: var(--area24);
  padding-right: var(--area24);
  height: var(--area40);
  font-size: var(--font16);
  font-weight: 400;
  text-wrap: pretty;
}

.table_wrap table tbody td img {
  min-width: var(--area64);
  width: var(--area64);
  max-width: var(--area64);
}

.table_wrap table .bd_bottom {
  border-bottom: 1px solid #000;
}
.table_wrap li {
  text-align: left;
  font-size: var(--font16);
  line-height: 1.5;
}

.table_wrap.col_line_none table {
  border-bottom: none;
}
.table_wrap.col_line_none table tbody th,
.table_wrap.col_line_none table tbody td {
  border-left: none;
  padding: 0;
}

.table_wrap.col_line_none table tbody th {
  border-right: 1px solid rgba(112, 112, 112, 0.1);
  border-top: 1px solid rgba(112, 112, 112, 0.1);
}
.table_wrap.col_line_none table tbody tr:first-child th {
  border-left: none;
  border-right: none;
}

.table_wrap.col_line_none table tbody tr:first-child th:first-child {
  border-right: 1px solid rgba(112, 112, 112, 0.1);
  border-bottom: none;
}
.table_wrap.col_line_none table tbody tr:last-child th,
.table_wrap.col_line_none table tbody tr:last-child td {
  border-bottom: 1px solid #000;
}

.table_wrap.col_line_none table tbody tr th.fw_bold {
  border-bottom: 1px solid #000;
}

.table_wrap.col_line_none table tbody .fc_green {
  display: block;
  margin: auto;
  font-size: var(--font20);
}

.table_indigo table thead tr:first-child th {
  color: #fff;
  background: #002352;
}

.table_indigo table tbody tr:nth-child(2n) td {
  background: rgba(0, 35, 82, 0.05);
}

.btn_list_wrap.box_gauge_wrap .box_gauge {
  height: var(--area27);
}

.arrow_select_wrap {
  display: flex;
  justify-content: space-between;
  padding: var(--area4) var(--area11) var(--area3) var(--area8);
}

.arrow_select_wrap div {
  background: #000;
  width: var(--area190);
  flex: none;
  height: 100%;
  display: flex;
  padding: var(--area7) var(--area4) var(--area7) var(--area7);
  gap: var(--area4);
  align-items: center;
  justify-content: end;
  font-size: var(--font18);
  font-weight: 900;
  color: #fff;
}
.arrow_select_wrap div ul {
  width: 100%;
}
.arrow_select_wrap div ul li {
  font-size: var(--font18);
  font-weight: 900;
  color: #fff;
  width: 100%;
  text-align: center;
  display: none;
}

.arrow_select_wrap div ul li.on {
  display: block;
}
.arrow_select_wrap button {
  height: 100%;
}
.arrow_select_wrap button img {
  object-fit: contain;
  height: 100%;
}

.arrow_select_wrap.row {
  flex-direction: column;
  /* width: var(--area102); */
  /* height: var(--area84); */
  width: 90%;
  height: auto;
  padding: 0;
}
.arrow_select_wrap.row div {
  padding: 0;
  width: 100%;
  background: #4d4d4d;
  justify-content: center;
  font-size: var(--area15);
}

.gauge_wrap {
  padding: var(--area5) var(--area9) 0 var(--area8);
  display: flex;
}

.gauge_wrap.field {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}

.gauge_wrap .gauge_bar {
  margin: auto;
  background: #555;
  width: 100%;
  height: var(--area11);
  position: relative;
}

.gauge_wrap .gauge_bar .gauge {
  position: absolute;
  /* position: relative; */
  background: #fbc114;
  /* height: 100%; */
  top: 0;
  bottom: 0;
  /* width: 50%; */
}
.gauge_wrap .gauge_bar .point {
  position: absolute;
  top: 50%;
  /* margin-left: var(--area-16); */
  /* right: 0; */
  transform: translatey(-50%);
  width: var(--area17);
  height: var(--area35);
  background: url(../img/field_02_handle@3x.png) no-repeat center;
  margin-left: var(--area-8);
}

.box_gauge {
  display: flex;
  width: 100%;
  /* gap: 10px; */
  /* gap: 3.21vw; */
  justify-content: space-between;
}
.box_gauge a,
.box_gauge button {
  width: auto;
  height: auto;
  background: #1e1d25;
}
.box_gauge a.on,
.box_gauge button.on {
  background: #fbc114;
}

.box_gauge div {
  width: 100%;
  height: auto;
  background: #1e1d25;
}
.box_gauge div.on {
  background: #fbc114;
}
.logo_wrap {
  padding: var(--area30);
  position: absolute;
  top: 0;
  left: 0;
}
.logo_wrap button {
  display: block;
  width: 100%;
}
.logo_wrap button img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

iframe {
  display: block;
  aspect-ratio: 16 / 9;
  box-sizing: content-box;
}
.video_wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  display: block;
}

.video_wrap video {
  display: block;
  background: #000;
}
.video_wrap .btn_play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.con_wrap section .sec_con.video_wrap {
  padding-top: var(--area4);
  max-width: 100%;
}
.con_wrap section .sec_con .video_wrap {
  padding-top: var(--area24);
}

.con_wrap section .sec_con > .img:first-child {
  margin-top: 0;
  padding-top: 0;
}

.reference_mark_list {
  padding-top: var(--area4);
}
.reference_mark_list > li {
  padding-left: var(--area17);
  position: relative;
  line-height: 1.25;
}
.reference_mark_list > li::before {
  content: "※";
  position: absolute;
  top: var(--area-1);
  left: 0.02rem;
}

.reference_mark_list > li.list_icon_wrap::before {
  top: var(--area3);
}

.reference_mark_list > li + li {
  margin-top: var(--area8);
}
.num_list {
  padding-left: var(--area19);
}
.num_list > li {
  list-style: decimal;
}

.circle_num_list {
  counter-reset: circle_num 0;
}
.circle_num_list > li {
  padding-left: var(--area23);
  position: relative;
}

.circle_num_list > li::before {
  content: counter(circle_num);
  counter-increment: circle_num 1;
  font-size: var(--font10);
  border: 1px solid #000;
  width: var(--area12);
  min-width: var(--area12);
  height: var(--area14);
  min-height: var(--area14);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  position: absolute;
  padding-right: 1px;
  top: var(--area7);
  left: var(--area2);
}

.circle_num_list li.icon_wrap {
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--area48);
}
.circle_num_list li.icon_wrap:before {
  top: var(--area15);
}

.dot_list > li {
  position: relative;
  padding-left: var(--area10);
}
.dot_list > li:before {
  content: "·";
  position: absolute;
  top: 0 !important;
  left: 0;
  height: 100%;
}

.dot_list > li.list_icon_wrap:before {
  top: var(--area10) !important;
}

.asterisk_list > li {
  position: relative;
  padding-left: var(--area10);
}
.asterisk_list > li:before {
  content: "*";
  position: absolute;
  top: 0;
  left: 0;
}

.hyphen_list > li {
  position: relative;
  padding-left: var(--area10);
}
.hyphen_list > li:before {
  content: "-";
  position: absolute;
  top: 0;
  left: 0;
}

.category_list {
  display: flex;
  border-bottom: 1px solid #343434;
}
.category_list li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--area28);
  min-width: var(--area46);
  font-size: var(--font12);
  color: #fff;
  border-left: 1px solid #343434;
  line-height: var(--area28);
  padding: 0 var(--area5);
}
.category_list li:first-child {
  flex: auto;
  border-left: none;
  justify-content: space-between;
}

.category_list li:last-child {
  padding-right: var(--area11);
}
.fold_list {
  padding-left: var(--area6);
  padding-right: var(--area6);
}
.fold_list li {
  border-bottom: 1px solid #343434;
}
.fold_list li button {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--area39);
  color: #fff;
}
.fold_list li button div {
  padding: 0 var(--area10);
  min-width: var(--area44);
  font-size: var(--font10);
  color: #fff;
  text-align: end;
}
.fold_list li button div:first-child {
  flex: auto;
  display: flex;
  justify-content: space-between;
}

.fold_list li button div:nth-child(2) {
  width: var(--area61);
}
.fold_list li button img {
  width: var(--area24);
  min-width: var(--area24);
  max-width: var(--area24);
}

.fold_list li button + div {
  display: none;
  background: #1a1a1a;
  padding: var(--area7) var(--area9);
  border: 1px solid #343434;
}
.fold_list li button + div p {
  font-size: var(--font13);
  line-height: 1;
  font-weight: 600;
}
.fold_list li button + div p + p {
  margin-top: var(--area4);
}
.fold_list li button + div p,
.fold_list li button + div table * {
  color: #fff;
}

.fold_list li button + div div {
  width: var(--area332);
  margin: auto;
  padding-top: 3px;
}
.fold_list li button + div table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #b9b9b9;
  border-right: 1px solid #b9b9b9;
}
.fold_list li button + div table th {
  background: #323232;
}
.fold_list li button + div table th,
.fold_list li button + div table td {
  text-align: center;
  border-top: 1px solid #b9b9b9;
  border-left: 1px solid #b9b9b9;
  font-size: var(--font12);
}

.fold_list li button + div table td {
  width: var(--area80);
}
.fold_list li.on button + div {
  display: block;
}
.fold_list li .btn_wrap {
  gap: var(--area17);
}
.fold_list li .btn_wrap button {
  background: url(../img/bg_popup_btn.png) no-repeat center / 100% 100%;
  justify-content: center;
  line-height: var(--area34);
  font-size: var(--font13);
  font-weight: 600;
}

.tit_wrap .sub_tit {
  font-weight: 700;
  font-size: var(--font20);
  line-height: 1.25;
  color: #00ae42;
}
.tit_wrap .tit {
  font-size: var(--font36);
  margin-top: var(--area8);
  line-height: 1.11;
}

.tit_wrap .btn_hide {
  width: var(--area56);
  height: 100%;
  margin-right: var(--area-21);
  display: flex;
}
.tit_wrap .btn_hide img {
  height: var(--area17);
  width: auto;
  margin: auto;
}

.tit_wrap .btn_reset {
  margin-left: auto;
  margin-top: var(--area2);
  margin-right: var(--area-15);
  /* margin-top: 1%; */
  /* margin-right: -3%; */
  width: var(--area95);
  height: 100%;
}

.tit_wrap .btn_reset img {
  display: block;
  width: 100%;
  height: auto;
}

.tit_wrap img.btn_reset {
  display: block;
  height: auto;
}

.tit_wrap .btn_ok {
  margin-left: auto;
  margin-top: var(--area2);
  margin-right: var(--area-15);
  width: auto;
  height: var(--area26);
}

.tit_wrap .btn_ok img {
  height: 100%;
  width: auto;
}
.tit_wrap .right_btn {
  height: 100%;
  margin-left: auto;
  margin-right: var(--area-14);
  display: flex;
  justify-content: end;
  align-items: center;
}
.tit_wrap .right_btn img {
  width: auto;
  max-width: none;
  max-height: 100%;
}

.flex_tit_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--area39);
  padding-left: var(--area16);
}

.flex_tit_wrap button {
  width: var(--area56);
  height: 100%;
  display: flex;
}

.con_wrap {
  flex: auto;
}
.con_wrap section {
  padding: var(--area26) 0 var(--area29);
}

.con_wrap section:last-child {
  padding-bottom: 0;
}

.con_wrap section:last-child .sec_con {
  margin-top: var(--area8);
}
.con_wrap section.btn_sec .sec_con {
  margin-top: var(--area-9);
}

.con_wrap section:last-child .sec_con:last-child ol:last-child li:last-child .icon_wrap {
  padding-bottom: 0;
}
.con_wrap section .sec_con section {
  padding-top: var(--area16);
  padding-bottom: var(--area16);
}
.con_wrap section .sec_con section h4 {
  font-size: var(--font20);
  padding-bottom: var(--area12);
}

.con_wrap section .sec_con section:first-child {
  padding-top: var(--area8);
}
.con_wrap section .sec_con section + section {
  border-top: none;
  padding-top: var(--area16);
}

.con_wrap section .sec_con section > .circle_num_list li + li {
  margin-top: 8px;
}

.con_wrap section .sec_con section .img {
  padding-bottom: var(--area24);
}

.con_wrap section .sec_con section > .img:last-child {
  padding-bottom: 0;
}
.con_wrap section .sec_con section .img_wrap {
  padding-top: var(--area24);
  padding-bottom: var(--area24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--area16);
}

.con_wrap section .sec_con section .img_wrap .img {
  padding-top: 0;
  padding-bottom: 0;
}
.con_wrap section .sec_con section > .img_wrap:last-child > .img:last-child {
  padding-bottom: 0;
}
.con_wrap section .sec_con section .circle_num_list > li > .img_wrap {
  margin-left: var(--area-23);
}
.con_wrap section .sec_con section .circle_num_list > li > .img,
.con_wrap section .sec_con section .circle_num_list > li > .img_half_wrap > .img {
  margin-left: var(--area-23);
}

.con_wrap section + section {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.con_wrap section .sec_tit {
  display: flex;
  gap: var(--area8);
  font-size: var(--font24);
}

.con_wrap section .sec_tit span {
  color: #00ae42;
}

.btn_sec .sec_con {
  display: flex;
  justify-content: space-between;
  align-items: end;
  line-height: 1;
  margin-top: var(--area-3);
}

.btn_sec .sec_con button {
  display: flex;
  justify-content: space-between;
  padding: var(--area12) var(--area12) var(--area16);

  width: var(--area160);
  height: var(--area48);
  border: 1px solid #000;
  font-size: var(--font16);
  font-weight: 600;
}
.btn_sec .sec_con button img {
  height: var(--area24);
  vertical-align: top;
}
.keypad_wrap {
  overflow: hidden;
}
.device_wrap {
  /* min-width: var(--area742); */
  width: var(--area742);
  /* max-width: var(--area600); */
  /* max-height: 100%; */
  /* width: 100%; */
  max-width: 100%;
  background: transparent;
  padding: 0;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  /* margin-top: auto; */
  /* margin-bottom: auto; */
}
.device_wrap > svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
  height: auto;
}
.screen {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  /* aspect-ratio: 476 / 358; */
  padding: 0;
  /* width: var(--area473); */
  top: var(--area90);

  width: 64%;
  top: 10.6%;
  aspect-ratio: 8 / 6;
}

/* .screen {
  width: var(--area278);
  aspect-ratio: 279 / 464;
  z-index: 1;
  position: absolute;
  top: var(--area109);
  left: calc(50% - var(--area2));
  transform: translatex(-50%);
} */

.screen * {
  font-family: "NanumGothic";
}

.screen * ::-webkit-scrollbar {
  width: var(--area6);
  height: var(--area6);
}
.screen * ::-webkit-scrollbar-track {
  background: #4d4d4d;
}
.screen * ::-webkit-scrollbar-thumb {
  background: #fbc114;
}

.screen img,
.screen svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.screen .line_btn img {
  width: var(--area26);
}

.screen.intro {
  background-color: #000;
}

[class*="screen_"] {
  display: none;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  /* padding: 0 var(--area63); */
}

[class*="screen_"].on {
  display: flex;
}
[class*="screen_"] > * {
  /* padding: 0 var(--area63); */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

[class*="screen_"] > .bg_txt {
  position: absolute;
  top: var(--area36);
  left: 50%;
  transform: translatex(-50%);
  width: var(--area170);
}

[class*="screen_"] > svg {
  position: static;
  padding: 0;
  transform: none;
}

[class*="screen_mode"] {
  display: none;
  padding: 0;
  position: static;
  transform: none;
}
[class*="screen_mode"].on {
  display: block;
}

[class*="screen_mode"] > * {
  padding: 0;
  position: static;
  transform: none;
}

.dim.sm {
  padding: 0 var(--area53);
}

[class*="screen_popup_"] {
  /* height: 84.6%; */
  /* height: var(--area358); */

  /* width: var(--area400); */
  width: 83.875%;
  /* height: var(--area251); */
  height: auto;
  box-sizing: border-box;
  /* top: calc(50% + calc(var(--area30) / 2)); */
  /* top: 50%; */
  top: 54.5%;
  transform: translate(-50%, -50%);
  aspect-ratio: 671/421;
}

[class*="screen_popup_"].dim {
  width: 100%;
  height: 100%;
  top: 50%;
}

[class*="screen_popup_"].dim > * {
  /* width: var(--area400); */
  width: 83.875%;
  /* height: var(--area251); */
  height: auto;
  aspect-ratio: 671/421;
}
[class*="screen_popup_"].dim > .bg_img {
  width: 83.875%;
  aspect-ratio: 671/421;
}

[class*="screen_popup_"].sm.dim > * {
  width: var(--area340);
  height: var(--area226);
}
[class*="screen_popup_"].sm.dim > .bg_img + div {
  width: 68.75%;
  height: auto;
  top: 53.4%;
  aspect-ratio: 550 / 380;
}
[class*="screen_popup_"] > div {
  padding: 0;
  margin: auto;
  /* width: var(--area400); */
  width: 100%;
  /* height: var(--area251); */
  height: 100%;
  /* top: var(--area68); */
  top: 50%;
  /* transform: translatex(-50%); */
  transform: translate(-50%, -50%);
}

[class*="screen_popup_"] > .bg_img {
  /* padding: var(--area30) 0 0; */
  position: static;
  transform: none;
  /* width: var(--area400); */
  width: 100%;
}

[class*="screen_popup_"] .tit_wrap * {
  color: #fff;
}

[class*="screen_popup_"] .tit_wrap li {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

[class*="screen_popup_"] .tit_wrap li a {
  flex: auto;
  height: 100%;
}
[class*="screen_popup_"] .tit_wrap li a img {
  height: 100%;
}

[class*="screen_popup_"] .tit_wrap li > img {
  width: auto;
  max-width: 2px;
  min-width: 2px;
  height: 100%;
}
[class*="screen_popup_"] .tit_wrap > li.active {
  flex: none;
  width: 34.27%;
}
[class*="screen_popup_"] .tit_wrap span {
  white-space: nowrap;
  font-weight: 700;
  /* margin-top: -1%; */
  font-size: var(--font18);
}

[class*="screen_popup_"] .tit_wrap .chkbox_wrap {
  height: var(--area19);
  margin-left: auto;
  margin-right: var(--area-15);
}
[class*="screen_popup_"] .tit_wrap .chkbox_wrap img {
  height: 100%;
  width: auto;
  display: block;
}
[class*="screen_popup_"] .btn_back {
  display: flex;
  height: 100%;
  gap: var(--area9);
  align-items: center;
  text-transform: capitalize;
}

[class*="screen_popup_"] .btn_back img {
  display: inline-block;
  width: var(--area20);
}

[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: end;
  flex: auto;
  margin-left: auto;
}

[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown[data-translate-ko],
[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown[data-translate-en] {
  display: none;
}

[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown > button {
  height: 100%;
  background: url(../img/ic_dropdown@3x.png) no-repeat right bottom / contain;
  font-size: var(--font13);
  font-weight: 900;
  box-sizing: content-box;
  padding: 0 var(--area10);
}

[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown ul {
  position: absolute;
  /* top: var(--area44); */
  top: 115.625%;
  right: var(--area-14);
  width: var(--area149);
  padding: 2.78%;
  background: #252525;
  border-radius: 3px;
  display: none;
  z-index: 1;
}
[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown ul li {
  border-bottom: 1px solid #2f2f2f;
  flex: none;
  width: 100%;
}
[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown ul li a,
[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown ul li button {
  display: block;
  width: 100%;
  text-align: right;
  line-height: 2.577;
  padding: 0 5.04%;
  font-size: 65%;
  font-weight: 900;
}

[class*="screen_popup_"] .tit_wrap.dropdown_wrap .dropdown.active ul {
  display: block;
}

.right_wrap [class*="screen_popup_"] .tit_wrap {
  width: 100%;
  /* height: auto; */
  /* height: var(--area38); */
  height: 15%;
  padding: 0 var(--area21) 0 var(--area17);
  display: flex;
  align-items: center;
  border-radius: var(--area4) var(--area4) 0 0;
}

[class*="screen_popup_"] .inner > img {
  width: 100%;
  position: static;
}

[class*="screen_popup_"] .con_wrap {
  /* padding: 0 0 0 var(--area7); */
  padding: 0 0 0 1.63%;
  margin-right: 1.63%;
  margin-bottom: 2.8%;
  /* margin-right: var(--area7); */
  /* margin-bottom: var(--area7); */

  /* height: var(--area206); */
  height: calc(85% - 2.8%);
  overflow: auto;
}

/* [class*="screen_popup_"] .con_wrap.scroll_none {
  margin: 0;
} */

[class*="screen_popup_"] .con_wrap.margin0px svg {
  margin: auto;
}

[class*="screen_popup_"] .con_wrap .inner {
  justify-content: start;
  padding: 0 var(--area5) var(--area6) var(--area6);
}

[class*="screen_popup_"] .con_wrap input[type="text"] {
  width: 100%;
  height: var(--area41);
  background: url(../img/input_bg.png) no-repeat center / 100% 100%;
  padding: var(--area5) var(--area9) var(--area7);
  line-height: 1;
  font-size: var(--font18);
  color: #fff;
  line-height: 1;
  font-weight: 600;
}
[class*="screen_popup_"] .con_wrap input + svg {
  display: block;
}

[class*="screen_popup_"] .con_wrap input::placeholder {
  color: #aaaaaa;
}

[class*="screen_popup_"] .keypad_wrap {
  overflow: hidden;
}

[class*="screen_popup_"] .btn_list_wrap li a div,
[class*="screen_popup_"] .btn_list_wrap li button div {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--area8);
  font-size: var(--font13);
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}

[class*="screen_popup_"] .btn_list_wrap li a div span,
[class*="screen_popup_"] .btn_list_wrap li button div span {
  font-size: var(--font14);
  margin-left: 0;
}
[class*="screen_popup_"] .btn_list_wrap li a .box_gauge,
[class*="screen_popup_"] .btn_list_wrap li button .box_gauge {
  width: var(--area124);
  max-width: var(--area124);
  min-width: var(--area124);
  gap: 1px;
}
[class*="screen_popup_"] .btn_list_wrap li a .box_gauge div,
[class*="screen_popup_"] .btn_list_wrap li button .box_gauge div {
  flex: inherit;
}

[class*="screen_popup_"] .btn_list_wrap li a div .box_gauge,
[class*="screen_popup_"] .btn_list_wrap li button div .box_gauge {
  height: var(--area27);
  width: 100%;
  max-width: var(--area124);
}

[class*="screen_popup_"] table {
  width: 100%;
  color: #fff;
}

[class*="screen_popup_"] table caption {
  color: #fff;
  font-size: var(--font14);
  text-align: left;
  padding-bottom: var(--area6);
}
[class*="screen_popup_"] table thead th {
  color: #fff;
  text-align: center;
  font-size: var(--font14);
  border-bottom: 1px solid #1a1a1a;
  padding: var(--area5);
}
[class*="screen_popup_"] table tbody td {
  color: #fff;
  text-align: center;
  font-size: var(--font12);
  border-bottom: 1px solid #1a1a1a;
  height: var(--area34);
  vertical-align: middle;
}
[class*="screen_popup_"] table tbody td:nth-child(2) {
  text-align: left;
}
[class*="screen_popup_"].xs {
  padding-top: 16.33%;
}
[class*="screen_popup_"].xs > div {
  width: 68.75%;
  aspect-ratio: 550/96;
  background: #9f9f9f;
  /* height: var(--area96); */
  height: auto;
  /* top: 50%; */
  top: calc(50% + 8.165%);
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  color: #fff;
  font-size: var(--font18);
}
[class*="screen_popup_"].sm {
  /* width: var(--area476); */
  /* height: var(--area358); */
  width: 100%;
  height: 100%;
  /* padding-left: var(--area68); */
  padding-left: 14.25%;
  padding-right: 14.25%;
  /* padding-right: var(--area68); */
  /* transform: translatex(-50%); */
  /* top: var(--area69); */
  transform: translate(-50%, -50%);
  top: 50%;
  /* padding-top: var(--area24); */
  padding-top: 5%;
}
[class*="screen_popup_"].sm > .bg_img {
  width: 100%;
  height: auto;
  aspect-ratio: 572/380;

  /* padding-top: var(--area24); */
}
[class*="screen_popup_"].sm > .bg_img + div {
  /* width: var(--area340); */
  width: 68.75%;
  /* top: var(--area78); */
  /* height: var(--area226); */
  aspect-ratio: 550 / 304;
  top: calc(50% + calc(var(--area78) / 6));
}

[class*="screen_popup_"].sm .tit_wrap {
  justify-content: space-between;
  align-items: center;
  /* height: var(--area39); */
  height: 17%;
  /* padding-left: var(--area16); */
  padding-left: 2.215%;
}
[class*="screen_popup_"].sm .tit_wrap span {
  margin-top: 0;
  line-height: 1;
  font-size: var(--font19);
  text-transform: capitalize;
}

[class*="screen_popup_"].sm .tit_wrap button {
  width: var(--area56);
  height: 100%;
  display: flex;
}

[class*="screen_popup_"].sm .con_wrap {
  height: calc(83% - 2.89%);
  /* height: var(--area188); */
  padding: 0 var(--area7) var(--area7);
  display: flex;
  flex-direction: column;
}

[class*="screen_popup_"].sm .con_wrap .btn_hide,
[class*="screen_popup_"].sm .con_wrap .btn_ok {
  /* height: var(--area38); */
  width: 100%;
  aspect-ratio: 520 / 80;
  display: flex;
  gap: var(--area9);
  justify-content: center;
  align-items: center;
  font-size: var(--font19);
  font-weight: 900;
  color: #fff;
  margin-top: auto;
}

[class*="screen_popup_"].sm .con_wrap .btn_hide img,
[class*="screen_popup_"].sm .con_wrap .btn_ok img {
  width: var(--area26);
}

[class*="screen_popup_clusterUpdate"].sm .con_wrap .btn_hide,
.screen_popup_smartUpdate_device.sm .con_wrap .btn_hide {
  height: 100%;
  display: block;
}

[class*="screen_popup_clusterUpdate"].sm .con_wrap .btn_hide img,
.screen_popup_smartUpdate_device.sm .con_wrap .btn_hide img {
  width: 100%;
}

[class*="screen_popup_"].sm .con_wrap.field_wrap {
  /* padding: var(--area10) var(--area16) var(--area16); */
  padding: 3.94% 2.72% 4.21%;

  margin: 0;
}

[class*="screen_popup_"].sm .con_wrap.box_btn_list_wrap {
  /* padding: var(--area10) var(--area16) var(--area16); */
  padding: 3.94% 2.72% 4.21%;
  margin: 0;
}

[class*="screen_popup_"].sm .field {
  margin-top: auto;
  margin-bottom: auto;
  height: var(--area49);
}

[class*="screen_popup_"].sm .field + .field {
  margin-top: var(--area8);
}

[class*="screen_popup_"].sm button.field {
  margin-bottom: 0;
}

[class*="screen_popup_"].sm .field.box_gauge_wrap.box_count_5 {
  /* height: var(--area37); */
  width: 100%;
  aspect-ratio: 520 / 60;
}

.screen_popup_workMode .tit_wrap.dropdown_wrap .dropdown {
  max-width: 41.075%;
}

.screen_popup_setCompositeSpeed .inner .btn_list_wrap li a,
.screen_popup_setCompositeSpeed .inner .btn_list_wrap li button {
  padding-left: var(--area18);
}

/* 타이틀변경 */
[class*="screen_popup_tit_edit"] .validation {
  width: 100%;
}

/* 부하민감도 */
.screen_popup_loadSensitivity .con_wrap div:nth-child(2) {
  flex: auto;
  overflow: hidden;
}
.screen_popup_loadSensitivity .con_wrap div:nth-child(2) img {
  width: auto;
  height: 100%;
  margin: auto;
}
.screen_popup_loadSensitivity .field.box_gauge_wrap.box_count_5 > span:last-child {
  text-align: center;
}

/* 비상동작모드 */
.screen_popup_emergencyMotion .btn_hide {
  display: block;
}

/* 일반기록 */
.screen_popup_generalRecord .con_wrap {
  background: url(../img/pannel.png) no-repeat center / contain;
  margin-right: 0;
  padding-right: var(--area7);
  display: flex;
  gap: var(--area12);
  padding: var(--area7) var(--area14) var(--area4);
}

.screen_popup_generalRecord .con_wrap div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.screen_popup_generalRecord .con_wrap span {
  line-height: 1.875;
  font-weight: 600;
  font-size: var(--area16);
  color: #fff;
}
.screen_popup_generalRecord .con_wrap button {
  width: 100%;
  line-height: 1.7;
  font-weight: 600;
  font-size: var(--font20);
  color: #fff;
  border-radius: 6px;
}

.screen_popup_generalRecord .con_wrap .consumption {
  font-size: var(--font44);
  font-weight: 700;
}
.screen_popup_generalRecord .con_wrap .consumption span {
  font-size: inherit;
  font-weight: inherit;
}
/* 관리기능 : 업데이트 : CAN 업데이트 */
.screen_popup_canUpdate {
  padding-left: var(--area6);
  padding-right: var(--area6);
}

.screen_popup_canUpdate > .bg_img {
  padding-top: 0;
  /* width: 100%; */
  object-fit: contain;
  width: var(--area387);
  height: var(--area179);
}
.screen_popup_canUpdate > div,
.screen_popup_canUpdate.dim > div {
  /* top: var(--area88); */
  width: var(--area387);
  height: var(--area179);
}

.screen_popup_canUpdate .tit_wrap .btn_hide {
  width: auto;
  margin-right: 0;
  margin-top: var(--area-4);
}

.right_wrap .screen_popup_canUpdate .tit_wrap {
  height: var(--area28);
  justify-content: space-between;
  padding: var(--area5) var(--area17) 0 var(--area5);
}

.screen_popup_canUpdate .con_wrap {
  height: var(--area151);
  overflow: hidden;
  padding: 0 var(--area5) 0 var(--area6);
  margin: 0;
}

/* 관리기능 : 업데이트 : CAN 업데이트 장치 */
.screen_popup_canUpdateDevice.on {
  z-index: 1;
}
.screen_popup_canUpdateDevice svg + div {
  z-index: 1;
  position: absolute;
  top: var(--area45);
  height: var(--area146);
  overflow: auto;
  width: var(--area192);
}

/* SOS Service */

.screen_popup_sosService > .bg_img {
  padding-top: 0;
  width: var(--area340);
  height: var(--area268);
}
.screen_popup_sosService > .bg_img + div {
  /* top: var(--area44); */
  width: var(--area340);
  height: var(--area268);
}

.screen_popup_sosService .con_wrap {
  height: var(--area224);
  display: flex;
  flex-direction: column;
  padding-top: var(--area6);
  padding-left: var(--area16);
  padding-right: var(--area16);
  margin-right: 0;
}

.screen_popup_sosService table caption {
  margin-left: var(--area-4);
  margin-right: var(--area-4);
}

.screen_popup_sosService table .chkbox_wrap label {
  display: inline-block;
  vertical-align: middle;
}
.screen_popup_sosService .con_wrap .line_btn {
  margin-top: auto;
  height: var(--area38);
  border-top: 1px solid #1e1e1e;
}

.right_wrap .screen_popup_sosService .tit_wrap {
  justify-content: space-between;
}

.right_wrap .screen_popup_sosService .tit_wrap span {
  margin-top: 0;
}

/* 관리기능 : 소모품 관리 */
.screen_popup_consumablesManagement table tbody td {
  height: auto;
  border-bottom: 1px solid #fff;
}
.screen_popup_consumablesManagement table tbody td:nth-child(2) {
  text-align: center;
}

.screen_popup_consumablesManagement .fold_list li button + div div {
  padding-bottom: var(--area3);
}

/* 화면밝기 */

.screen_popup_daytime.sm .con_wrap {
  overflow: hidden;
  /* padding: var(--area14) var(--area7) var(--area16) var(--area15); */
  /* padding: 5.78% 2.72% 5.26% 2.72%;  */
  padding: 4.6% 2.72% 2.8%;
  margin-right: 0;
}
.screen_popup_daytime.sm .con_wrap p {
  font-size: var(--font14);
  color: #fff;
  text-align: center;
  line-height: 1;
  padding-bottom: var(--area7);
  font-weight: 600;
  text-transform: capitalize;
}

.screen_popup_daytime.sm .con_wrap > div {
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--area20);
  padding-right: var(--area20);
}

.screen_popup_daytime.sm .con_wrap > div div {
  color: #fff;
  font-size: var(--font36);
}

.screen_popup_daytime.sm .con_wrap > div > div {
  max-width: var(--area102);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  text-transform: lowercase;
  min-width: 0;
}

.screen_popup_daytime.sm .con_wrap > div > div:nth-child(2) {
  padding-top: var(--area34);
}

.screen_popup_daytime.sm .con_wrap .arrow_select_wrap.row div {
  font-size: var(--area14);
  height: var(--area34);
}
.screen_popup_daytime.sm .con_wrap > div .btn_hide {
  margin-top: var(--area4);
}

/* 화면설정 : 시간설정 */
.screen_popup_screenSet_time .con_wrap {
  display: flex;
  flex-wrap: wrap;
  padding-top: var(--area14);
  padding-bottom: var(--area10);
  padding-left: var(--area32);
  padding-right: var(--area33);
  gap: var(--area16);
}
.screen_popup_screenSet_time .con_wrap > div {
  width: calc((100% - var(--area32)) / 3);
  min-height: var(--area83);
  height: var(--area83);
  max-height: var(--area83);
  background: url(../img/bg_input_number.png) no-repeat center / contain;
  position: relative;
}

.screen_popup_screenSet_time .con_wrap div > span {
  font-size: var(--font12);
  color: #fff;
  position: absolute;
  top: 0;
  left: var(--area4);
  line-height: var(--area26);
}

.screen_popup_screenSet_time .con_wrap div p {
  font-size: var(--area15);
  line-height: var(--area83);
  text-align: center;
  color: #fff;
  font-weight: 600;
}

.screen_popup_screenSet_time .con_wrap button {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--area26);
  width: 100%;
}

.screen_popup_screenSet_time .con_wrap button:last-child {
  top: auto;
  bottom: 0;
}
.screen_popup_screenSet_time .con_wrap > div:last-child {
  background: none;
}
.screen_popup_screenSet_time .con_wrap > div:last-child div + div {
  margin-top: var(--area2);
}

.screen_popup_screenSet_time .con_wrap > div:last-child button {
  height: auto;
  margin-top: var(--area4);
  position: static;
}
.screen_popup_screenSet_time .con_wrap label {
  padding-left: var(--area21);
  font-size: var(--font12);
  color: #fff;
  background-image: url(../img/img_chk.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  line-height: var(--area19);
  height: var(--area19);
  display: block;
}
.screen_popup_screenSet_time .con_wrap input {
  display: none;
}
.screen_popup_screenSet_time .con_wrap input:checked + label {
  background-image: url(../img/img_chk_on.png);
}

.screen_popup_tripmeter ol li {
  display: flex;
  align-items: center;
  gap: var(--area34);
  margin-top: 5px;
}
.screen_popup_tripmeter ol li:first-child {
  margin-top: 0;
}

.screen_popup_tripmeter span {
  color: #fff;
  font-size: var(--font22);
  font-weight: 600;
}
.screen_popup_tripmeter span:nth-child(2) {
  flex: auto;
  text-align: right;
}
.screen_popup_tripmeter .con_wrap {
  padding: var(--area32) var(--area23) var(--area32) var(--area30);
}
.screen_popup_tripmeter .con_wrap button {
  width: var(--area102);
  height: var(--area42);
  /* background: url(../img/bg_btn_tripmeter.png) no-repeat center / contain; */
  background: #252525;
  color: #fff;
  font-size: var(--font16);
  font-weight: 600;
  border-top: 1px solid #9e9e9e;
  border-left: 1px solid #393939;
  border-right: 1px solid #393939;
  border-radius: var(--area4);
}
svg + .chkbox_wrap {
  position: absolute;
  right: var(--area14);
  top: var(--area44);
}
.chkbox_wrap label {
  padding-left: var(--area21);
  font-size: var(--font9);
  color: #fff;
  background-image: url(../img/img_chk.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  line-height: var(--area19);
  height: var(--area19);
  display: block;
}
.chkbox_wrap input {
  display: none;
}
.chkbox_wrap input:checked + label {
  background-image: url(../img/img_chk_on.png);
}

[class*="screen_popup_con_"] {
  display: none;
  padding: 0;
  width: 100%;
  transform: none;
  position: static;
  /* padding: 0.26vw; */
  flex-direction: column;
  height: 100%;
}
[class*="screen_popup_con_"].on {
  display: flex;
}

[class*="screen_popup_con_"] > * {
  padding: 0;
  transform: none;
  position: static;
}

[class*="screen_popup_con_"] .btn_setting {
  position: relative;
  transform: none;
  top: auto;
  left: auto;
  background: url(../img/bg_btn_2depth_setting.png) no-repeat center / 100% 100%;
  margin-top: auto;
  margin-left: auto;
  width: 34.846%;
  padding-left: 7.405%;
  text-align: center;
  font-size: 80%;
  font-weight: 900;
  line-height: 2.625;
  color: #fff;
}

[class*="screen_popup_con_"] .btn_setting img {
  position: absolute;
  top: 50%;
  left: 7%;
  transform: translatey(-50%);
  width: 13.75%;
}

[class*="screen_popup_tit_edit"] {
  /* width: var(--area476); */
  width: 100%;
  padding: 0 5.75% 0 5.625%;
  /* padding: 0 var(--area28) 0 var(--area26); */
}

[class*="screen_popup_tit_edit"] > .bg_img {
  /* padding-top: var(--area2); */
  width: 100%;
}
[class*="screen_popup_tit_edit"] > div {
  width: var(--area408);
  /* height: var(--area179); */
  /* top: var(--area123); */
  /* top: var(--area179); */
  top: 49%;
}

[class*="screen_popup_tit_edit"].dim > div {
  /* width: var(--area408); */
  width: 85.75%;
  aspect-ratio: 686 / 414;
  top: 49%;
  margin-bottom: 1%;
  overflow: hidden;
}

[class*="screen_popup_tit_edit"].dim > .bg_img {
  width: 100%;
  aspect-ratio: 709/426;
}
[class*="screen_popup_tit_edit"] .con_wrap {
  margin-bottom: 0;
  padding-left: var(--area6);
  height: var(--area218);
  overflow: hidden;
}
.right_wrap [class*="screen_popup_tit_edit"].dim .tit_wrap {
  justify-content: space-between;
  align-items: center;
  /* height: var(--area37); */
  height: 15%;
  /* padding-left: var(--area12); */
  padding-left: 1.31%;
}

.right_wrap [class*="screen_popup_tit_edit"] .tit_wrap span {
  margin-top: 0;
  line-height: 1;
}

.right_wrap [class*="screen_popup_tit_edit"] .con_wrap {
  margin: 0;
  padding: 0;
  height: auto;
}

.screen_popup_screenSet_language .btn_list_wrap img {
  min-width: 0;
  max-width: none;
  width: 100%;
  height: auto;
}

/* screen main */
.screen_main > .video_wrap {
  padding: 0 var(--area63);
  width: 100%;
  top: var(--area1);
  transform: translatex(-50%);
}

/* .screen_main > svg { */
/* background: url(../img/bg_cluster_main_off.png) no-repeat center top / contain; */
/* } */
/* .ver_old .screen_main > svg { */
/* background: url(../img/bg_cluster_main_off_legacy.png) no-repeat center top / contain; */
/* } */

.screen_main > svg > image {
  opacity: 0;
}

/* screen menu */
.screen_menu ul {
  width: 100%;
  display: flex;
  /* gap: var(--area18); */
  gap: 3.75%;
  /* padding: var(--area37) var(--area53) 0; */
  padding: var(--area37) 11.25% 0;
}

.screen_menu ul li {
  flex: 1;
  margin-top: auto;
  margin-bottom: auto;
}

.screen_menu ul li img {
  padding: 0;
}
.btn.menu.on .hover_img image {
  display: none;
}

.btn.menu.on:hover .hover_img image {
  display: block;
}
/* ac */
/* .screen_wind svg {
  background: rgba(0, 0, 0, 0.6);
} */

.screen_wind .temp_result {
  color: #fff;
  font-weight: 700;
  font-size: var(--font18);
  width: max-content;
  position: absolute;
  /* top: 6vw; */
  /* top: var(--area115); */
  top: 31%;
  left: 50%;
  transform: translatex(-50%);
}

.btn.wind_blow image {
  display: none;
}
.btn.wind_blow image.on {
  display: block;
}

.btn.wind.on .hover_img image {
  display: none;
}
.btn.wind.on:hover .hover_img image {
  display: block;
}

/* .btn.wind_mode .hover_img image {
  display: none;
} */

.btn.wind_mode.mode01_on .hover_img .mode01 {
  display: block;
}
.btn.wind_mode.mode02_on .hover_img .mode02 {
  display: block;
}
.btn.wind_mode.mode03_on .hover_img .mode03 {
  display: block;
}
.btn.wind_mode.mode04_on .hover_img .mode04 {
  display: block;
}
.btn.wind_mode.mode05_on .hover_img .mode05 {
  display: block;
}
.btn.wind_mode.mode06_on .hover_img .mode06 {
  display: block;
}

/* screen_s06 */
.screen_s06 {
  position: relative;
  z-index: 1;
}
.screen_s06 button {
  display: block;
  position: absolute;
  /* top: var(--area10); */
  top: 2.5%;
  padding: 0;
  transform: none;

  min-width: 9.375%;
  min-height: 12.5%;
  width: 9.375%;
  height: 12.5%;

  max-width: 9.375%;
  max-height: 12.5%;
}

.screen_s06 button img {
  display: block;
  width: 100%;
  object-fit: contain;
  position: static;
  transform: none;
}
.screen_s06 .btn_screen_video_hide {
  /* left: var(--area13); */
  left: 2.5%;
}
.screen_s06 .btn_screen_video_volume {
  background-image: url(../img/ic_screen_video_mute.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  /* left: var(--area65); */
  left: 13.5%;
}
.screen_s06 .btn_screen_video_volume.mute {
  background-image: url(../img/ic_screen_video_volume.png);
}

.screen_s06 .btn > * {
  display: block;
}
.screen_s06 .btn rect {
  display: block;
}

.screen_s06 .aavm_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 83.4%;
  aspect-ratio: 397/286;
  transform: none;
}
/* 
.screen_s06 .aavm_video.on {
  display: block;
} */

/* 서비스 비밀번호 */
.screen_popup_pastFailure_pw .con_wrap {
  height: var(--area209);
  margin-bottom: var(--area4);
}
.screen_popup_pastFailure_pw > .bg_img + div {
  min-height: 0;
}

.device_frame {
  width: 100%;
  max-width: 100%;
  height: auto;
  /* padding-bottom: var(--area92); */
}

/* .device_frame::before {
  content: "";
  background: url(../img/cls_hxf.png) no-repeat center / cover;
  position: absolute;
  top: var(--area-18);
  left: var(--area-72);
  right: var(--area-72);
  bottom: var(--area-18);
  scale: 99%;
} */
.device_frame svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.device_frame .btn {
  opacity: 0;
}
.device_frame .btn polyline {
  opacity: 0;
}
.device_frame .btn:hover {
  opacity: 1;
}

.device_frame .btn:hover image {
  opacity: 0;
}
.device_frame .btn:hover polyline {
  opacity: 1;
}

.device_frame .btn.on {
  opacity: 1;
}
.device_frame .btn.on:hover image {
  opacity: 1;
}
.device_frame .btn.on:hover polyline {
  opacity: 0;
}

.wrap {
  display: flex;
  width: 100%;
  height: 100%;
  background: url(../img/bg_color.png) no-repeat center / cover;
}

.lnb_wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: var(--area240);
  width: var(--area240);
  overflow: auto;
}
.lnb_wrap nav {
  margin-top: var(--area24);
  display: none;
  opacity: 0;
}

.lnb_wrap nav.fadeIn {
  display: block;
}
.lnb_wrap nav li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lnb_wrap nav li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lnb_wrap nav li a {
  display: flex;
  align-items: center;
  gap: var(--area18);
  padding: 0 var(--area30);
  line-height: 3.53;
  font-size: var(--font20);
  font-weight: 700;
  color: #fff;
}
.lnb_wrap nav li a img {
  opacity: 40%;
  min-width: var(--area16);
  width: var(--area16);
}
.lnb_wrap nav li:hover a {
  background: #00ae42;
}
.lnb_wrap nav li:hover a img {
  opacity: 100%;
}
/* 
.lnb_wrap nav li.on + li {
  border-top-color: #00ae42;
} */
.lnb_wrap nav li.on a {
  background: #00ae42;
}
.lnb_wrap nav li.on img {
  opacity: 100%;
}
.lnb_wrap .logo_wrap {
  position: static;
}
.lnb_wrap .switch_wrap {
  position: static;
}

.contents_wrap {
  display: flex;
  /* width: 100%; */
  min-width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
}

.contents_wrap > .left_wrap {
  overflow: auto;
  /* min-width: calc((100% - var(--area240)) / 2);
  width: calc((100% - var(--area240)) / 2);
  max-width: calc((100% - var(--area240)) / 2); */
  flex: 1;
  padding: var(--area80);
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
}

.contents_wrap .left_wrap section:last-child li:last-child .img:last-child {
  padding-bottom: 0;
}
/* .contents_wrap > .right_wrap {
  min-width: calc(((100vw - var(--area240)) / 2));
  width: calc(((100vw - var(--area240)) / 2));
  max-width: calc(((100vw - var(--area240)) / 2));
  flex: 1;
  padding: var(--area80);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08));
} */

.contents_wrap > .right_wrap {
  flex: 1;
  min-width: 50%;
  padding: var(--area80);
  /* padding-left: var(--area56);
  padding-right: var(--area57); */

  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08));
}

.contents_wrap.dashboard_on > .left_wrap {
  width: auto;
  min-width: 0;
  max-width: none;
}

.contents_wrap.dashboard_on > .right_wrap {
  width: 69%;
  min-width: 69%;
  max-width: 69%;
  padding-left: var(--area103);
  padding-right: var(--area60);
}

.contents_wrap.jogDial_on > .right_wrap {
  /* padding-left: var(--area56);
  padding-right: var(--area57); */
  padding-left: 0;
  padding-right: 0;
}

.right_wrap .tit_wrap {
  padding-left: var(--area9);
  padding-bottom: var(--area60);
}
.right_wrap .tit_wrap .tit {
  letter-spacing: -0.04rem;
  line-height: 1.08;
}
.right_wrap .tit_wrap .sub_tit {
  letter-spacing: -0.01rem;
}

.right_wrap .screen_popup_mode div .tit_wrap {
  padding: 0;
  height: 15%;
}

.right_wrap .btn_popup {
  background: #303030;
  color: #fff;
  /* width: var(--area120); */
  padding-left: var(--area29);
  padding-right: var(--area29);
  height: var(--area48);
  border-radius: 100px;
  font-size: var(--font18);
  font-weight: 600;
}

.screen_popup_mode [class*="mode"] button {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.screen_popup_mode .mode01 button {
  background-image: url(../img/mode_tit_01.png);
}
.screen_popup_mode .mode02 button {
  background-image: url(../img/mode_tit_02.png);
}
.screen_popup_mode .mode03 button {
  background-image: url(../img/mode_tit_03.png);
}
.screen_popup_mode .mode04 button {
  background-image: url(../img/mode_tit_04.png);
}
.screen_popup_mode .mode05 button {
  background-image: url(../img/mode_tit_05.png);
}

.screen_popup_mode [class*="mode"].on button {
  width: var(--area137);
}
.screen_popup_mode .mode01.on button {
  background-image: url(../img/mode_tit_01_on.png);
}
.screen_popup_mode .mode02.on button {
  background-image: url(../img/mode_tit_02_on.png);
}
.screen_popup_mode .mode03.on button {
  background-image: url(../img/mode_tit_03_on.png);
}
.screen_popup_mode .mode04.on button {
  background-image: url(../img/mode_tit_04_on.png);
}
.screen_popup_mode .mode05.on button {
  background-image: url(../img/mode_tit_05_on.png);
}

[class*="screen_popup_manual"] {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
  z-index: 1;
}

.screen_popup_manual > div {
  width: 100%;
  height: 100%;
}
.screen_popup_manual .bg_img {
  width: 100%;
  height: auto;
}

.screen_popup_manual .subtit {
  color: #fff;
  font-size: var(--font9);
  line-height: 2.7;
  padding-left: var(--area26);
}

.screen_popup_manual .con_wrap {
  padding-left: var(--area47);
}
.screen_popup_manual .con_wrap ul {
  display: flex;
  gap: var(--area39);
}

.screen_popup_manual .con_wrap ul li {
  width: var(--area100);
}

.right_wrap .screen_popup_manual .tit_wrap {
  /* height: var(--area35); */
  height: 8%;
  position: relative;
}

.right_wrap .screen_popup_manual .tit_wrap span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  margin-top: 0;
}

[class*="screen_popup_manual_"] {
  padding-top: var(--area25);
  background: url(../img/tit_bg_manual.png) no-repeat top center / contain;
}
[class*="screen_popup_manual_"] .btn_hide {
  width: var(--area14);
  height: var(--area14);
  right: var(--area11);
  top: var(--area6);
  left: auto;
  transform: none;
}
[class*="screen_popup_manual_"] div {
  overflow: auto;
  width: 100%;
  height: calc(100% - var(--area25));
  top: auto;
  bottom: 0;
  transform: none;
  left: 0;
}

.screen_popup_clinometerSetting .con_wrap {
  overflow: hidden;
  margin-right: 0;
  padding-right: var(--area7);
  position: relative;
  container-type: inline-size;
}

.screen_popup_clinometerSetting .video_wrap button {
  color: #fff;
  position: absolute;
  left: 61.5cqw;
  top: 35.3cqw;
  width: 30cqw;
  height: 7.6cqw;
}
.screen_popup_clinometerSetting .video_wrap button img {
  width: 30cqw;
  height: 7.6cqw;
}

[class*="screen_popup_manual_"] img {
  position: static;
  transform: none;
}
.contents_wrap > .device_wrap {
  padding: 0;
}

.contents_wrap.full .left_wrap {
  display: none;
}

.contents_wrap.full .right_wrap {
  min-width: calc(((100vw - var(--area240)) / 2) + 20px);
  width: calc(((100vw - var(--area240)) / 2) + 20px);
  max-width: calc(((100vw - var(--area240)) / 2) + 20px);
}

.wrap.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  display: none;
  padding-left: var(--area240);
}
.wrap.wrapper.fadeIn {
  display: flex;
}
.wrap.wrapper.on {
  display: flex;
}

.wrap.wrapper.on {
  display: flex;
  opacity: 1;
}

.wrap.wrapper.on .contents_wrap > .right_wrap {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08));
}

.wrap.wrapper.on + .lnb_wrap:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to bottom, #002352, #26446c);
}

.wrap.wrapper.on + .lnb_wrap * {
  position: relative;
}

.wrap.wrapper.on + .lnb_wrap nav {
  display: block;
  animation-duration: 1s;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}
/* 
.wrap.wrapper .screen.video_wrap > video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
} */
.full.wrap {
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_page_cover.png), url(../img/bg_page_start.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: auto 100%;
  position: relative;
}

.full.wrap:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/bg_color.png) no-repeat center / cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* .full.wrap .lnb_wrap {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
} */

/* .full.wrap .lnb_wrap nav {
  display: none;
} */
/* 
.full.wrap .contents_wrap,
.full.wrap .contents_wrap > div {
  background: transparent;
} */

.full.wrap .left_wrap {
  padding: 0;

  min-width: calc((100vw - var(--area240)) / 2);
  width: calc((100vw - var(--area240)) / 2);
  max-width: calc((100vw - var(--area240)) / 2);
  flex: 1;
  padding: var(--area80) var(--area80) var(--area80) 0;
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: auto;
}

.full.wrap .right_wrap {
  min-width: calc((100vw - var(--area240)) / 2);
  width: calc((100vw - var(--area240)) / 2);
  max-width: calc((100vw - var(--area240)) / 2);
  flex: 1;
  padding: var(--area80);
  display: flex;
  flex-direction: column;
  /* height: 109%; */
  height: 100%;
  overflow: hidden;
  /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08)); */

  /**/

  /* scale: 90%;
  margin-top: -2.15%; */
}

/* page_cover, page_start */
.full {
  padding-left: var(--area240);
}
.full .tit_wrap {
  margin: auto auto auto var(--area60);
  padding: var(--area38) 0 0;
  height: var(--area354);
  overflow: visible;
  position: relative;
}

.full .tit_wrap h2 {
  line-height: 1.09;
  font-size: var(--font64);
  font-family: "HDHyundai";
  font-weight: 700;
  color: #fff;
}

.full .tit_wrap h2 span {
  display: block;
  margin-top: var(--area8);
  font-size: var(--font64);
  color: #38d430;
}

.full .tit_wrap p {
  margin-top: var(--area13);
  line-height: 1.4;
  font-size: var(--font20);
  font-weight: 400;
  color: #fff;
}

.full .tit_wrap .btn_wrap {
  margin-top: var(--area46);
  gap: var(--area8);
  width: var(--area408);
  /* animation-delay: 3s;
  animation-duration: 1s;
  animation-name: fadeIn;
  animation-fill-mode: forwards; */
  /* opacity: 0; */
  display: none;
  position: relative;
  z-index: 9999;
}

.full .tit_wrap .btn_wrap .btn {
  line-height: 3;
  font-size: var(--font20);
  font-weight: 700;
}

.full .tit_wrap .loading_wrap {
  width: 100%;
  height: var(--area60);
  margin-top: var(--area46);
  display: flex;
  align-items: center;
  gap: var(--area16);
  /* animation-delay: 3s;
  animation-duration: 1s;
  animation-name: fadeOut;
  animation-fill-mode: forwards; */
  position: absolute;
  top: var(--area226);
  z-index: 1;
  mix-blend-mode: screen;
}

.full .tit_wrap .loading_wrap h3 {
  font-size: var(--font16);
  font-weight: 700;
  color: #fff;
  line-height: var(--area19);
  font-family: "Pretendard", sans-serif;
}
.full .tit_wrap .loading_wrap h3 + p {
  font-size: var(--font16);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--area5);
  line-height: var(--area19);
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
}

.full .tit_wrap .loading_wrap img {
  width: var(--area48);
}

[class*="page_"] {
  display: none;
  width: 100%;
  height: 100%;
}

[class*="page_"] > .tit_wrap {
  display: flex;
}
[class*="page_"] > .tit_wrap div {
  flex: auto;
}
[class*="page_"] > .tit_wrap .icon_wrap {
  flex: none;
  width: auto;
  min-width: fit-content;
  max-width: fit-content;
  padding: 0;
  height: var(--area72);
}
[class*="page_"] > .tit_wrap .icon_wrap img {
  height: 100%;
  width: auto;
  display: block;
}
[class*="page_"] > .tit_wrap .tit .font26 {
  font-size: var(--font26);
}
[class*="page_"] > .con_wrap {
  padding-bottom: var(--area80);
}
[class*="page_"].on {
  display: block;
}

.full [class*="page_"] > .tit_wrap {
  display: block;
}
.full [class*="page_"] > .con_wrap {
  padding-bottom: 0;
}
.device_contents {
  display: none;
  /* width: fit-content; */
  width: 100%;
  /* max-width: 100%; */
  max-width: none;
  margin-left: auto;
  margin-right: auto;

  /* background: url(../img/cls_hxf.png) no-repeat center var(--area108) / var(--area727) auto; */
  /**/
  /* background: url(../img/cls_hxf.png) no-repeat center var(--area124) / 94% auto; */
}

.device_contents.on {
  display: block;
  width: 100%;
  /* width: calc(100% + var(--area113)); */
  max-width: none;
  /* margin-left: var(--area-56);
  margin-right: var(--area-57); */
}

.device_contents.on > .tit_wrap {
  padding-bottom: var(--area40);
}
.device_contents > .con_wrap {
  /* scale: 90%;
  margin-top: -2.479656vw; */
  flex: auto;
}

/* .fadeIn.on .device_contents {
  background: url(../img/cls_hxf.png) no-repeat center var(--area105) / 90% auto;
} */
.device_contents .video_startUp {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ver_new .device_contents .video_startUp {
  display: block;
}
.ver_old .device_contents .video_startUp {
  display: none;
}

.device_contents .video_startUp_legacy {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.device_contents .video_startUp_legacy {
  display: none;
}

.ver_old .device_contents .video_startUp_legacy {
  display: block;
}

.device_contents .btn.s06 image {
  display: none;
}
.device_contents .btn.s06.on image {
  display: block;
}
.device_dashboard {
  display: none;
}

.device_dashboard.on {
  display: block;
}
.device_dashboard.on img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: var(--area997);
}

.dashboard_on > .right_wrap .tit_wrap {
  padding-left: 0;
  padding-right: var(--area43);
}

.dashboard_on .right_wrap .btn_wrap {
  padding-right: var(--area43);
  /* padding-top: var(--area20); */
}

/* .device_switch > .con_wrap {
  scale: 90%;
  margin-top: -5%;
} */

.device_dashboard > .con_wrap {
  scale: 95%;
  margin-top: -3%;
}

/* 조그다이얼 */
.device_jogDial {
  display: none;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.jogDial_on > .right_wrap {
  padding-left: var(--area56);
  padding-right: var(--area57);
}

.device_jogDial > .con_wrap {
  max-width: 100%;
  scale: 80%;
  transform-origin: top;
  /* margin-top: -18%; */
}

.device_jogDial .device_wrap {
  margin-top: var(--area-41);
  /* min-width: var(--area727); */
  width: var(--area727);
  /* max-width: var(--area727); */
  max-width: 100%;
}

.device_jogDial .device_wrap + .btn_wrap {
  margin-top: var(--area-98);
  position: relative;

  /**/
  /* margin-top: var(--area-149); */
}
.device_jogDial.on {
  display: block;
}

.right_wrap .device_dashboard > .con_wrap .btn_popup {
  scale: 101.06%;
}
.right_wrap .device_jogDial > .con_wrap .btn_popup {
  scale: 120%;
}
/* 스위치 */
.device_switch {
  display: none;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.device_switch .device_wrap {
  /* min-width: var(--area610); */
  width: var(--area610);
  max-width: 100%;
  /* max-width: var(--area610); */
}

.device_switch.on {
  display: block;
}

/* page_cover */
.page_cover.on {
  display: flex;
}
.page_cover.on + .left_wrap + .right_wrap {
  position: absolute;
  top: 0;
  right: 0;
}

.page_cover .tit_wrap h2 span {
  color: #fff;
}

.page_cover .tit_wrap p {
  font-weight: bold;
  /* font-family: "HDHyundai"; */
}
.page_cover .tit_wrap p span:last-child {
  font-weight: 400;
  margin-left: var(--area12);
}
/* page_start */
.page_start.on {
  display: flex;
  /* overflow: hidden; */
}

/* .page_start .video_wrap { */
/* background: url(../img/bg_cluster_main_off.png) no-repeat center / cover; */
/* } */

.page_start .tit_wrap h2 {
  letter-spacing: -0.09rem;
}

.page_start .tit_wrap h2 span {
  letter-spacing: 0;
}
.page_start .tit_wrap div {
  /* padding-top: var(--area24); */
  display: flex;
  gap: var(--area24);
  align-items: center;
  font-size: var(--font20);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  /* margin-left: var(--area-10); */
}
.page_start .tit_wrap h3 {
  padding-top: var(--area2);
  line-height: 1.3;
  font-size: var(--font20);
  color: #fff;
}
.page_start .tit_wrap div div {
  padding-top: 0;
}

.page_start .tit_wrap div div + div {
  display: block;
  padding-left: var(--area28);
  background: url(../img/img_dv.png) no-repeat left center / contain;
}

.page_start .btn_start_wrap {
  display: block;
  width: var(--area220);
  height: var(--area220);
  background: url(../img/bg_startbtn.png) no-repeat center / contain;
  position: relative;
  margin: var(--area-7) var(--area-30);
}

.page_start .btn_start_wrap .btn {
  display: block;
  width: var(--area208);
  height: var(--area208);
  background-image: url(../img/ic_startbtn_inner.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: calc(50% + var(--area20));
  left: 50%;
  transform: translate(-50%, -50%);
}

.page_start .btn_start_wrap .btn:disabled {
  background-image: url(../img/ic_startbtn_inner.png) !important;
}
.page_start .btn_start_wrap .btn:hover {
  background-image: url(../img/ic_startbtn_inner_hover.png);
}

.page_start .btn_start_wrap .btn:active {
  background-image: url(../img/ic_startbtn_inner_active.png);
}
.page_start .btn_start_wrap .btn.on {
  background-image: url(../img/ic_startbtn_inner_press.png) !important;
}

.page_device_d34 .circle_num_list li:nth-child(2)::before,
.page_fuelGauge .circle_num_list li:nth-child(2)::before,
.page_workingOilThermometer .circle_num_list li:nth-child(2)::before,
.page_device_d35 .circle_num_list li:nth-child(2)::before,
.page_engineCoolantThermometer .circle_num_list li:nth-child(2)::before {
  top: var(--area14);
}

.page_ausLevel .reference_mark_list li:first-child::before,
.page_ausLevel .reference_mark_list li:first-child + [data-translate-en]::before,
.page_fuelGauge .reference_mark_list li:first-child::before,
.page_engineCoolantThermometer .reference_mark_list li:first-child::before,
.page_workingOilThermometer .reference_mark_list li:first-child::before {
  top: var(--area10);
}
.screen_main .btn.d28 {
  opacity: 1;
}
.right_wrap .page_start.on {
  display: block;
  height: auto;
  /* padding-top: calc((var(--font20) * 1.25) + var(--area8) + var(--area58) + (var(--font36) * 1.08)); */
  padding-top: calc(var(--area84) + 0.1vw);
  scale: 90%;
}

/* page_main */
.left_wrap .page_main {
  margin: var(--area-80) var(--area-80);
  padding: var(--area80) var(--area80);
  background-image: url(../img/img_engineerman.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: auto;
  height: calc(100% + var(--area160));
  opacity: 0;
}
.left_wrap .on {
  opacity: 1;
}
.page_menu .table_wrap tbody th img {
  margin-left: auto;
  margin-right: auto;
  width: var(--area44);
  min-width: var(--area44);
  max-width: var(--area44);
  position: static;
  display: block;
  border-radius: var(--area8);
}

.page_menu .table_wrap tbody th img + p {
  font-size: var(--font14);
  line-height: 1;
  margin-top: var(--area7);
}
.left_wrap .page_main img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
}

/* 파워 모드 스위치 */
.page_device_s01 > .con_wrap {
  padding-bottom: var(--area60);
}

.change_icon_wrap image {
  display: none !important;
}

.change_icon_wrap .on {
  display: block !important;
}

.screen_popup_startLimit_pw .con_wrap {
  overflow: hidden;
}

/* 현재고장 */
.screen_popup_currentFailure .btn_list_wrap {
  padding-right: 0;
}

/* 기본 표시 항목 */
.page_screenSet_default img {
  height: var(--area400);
}

/* 복합속도 설정 */
.page_setCompositeSpeed .tit_wrap .tit span {
  font-size: var(--area30);
}
.ver_en .page_setCompositeSpeed .tit_wrap .tit span {
  display: inline !important;
}

/* IPC 모드 */
.page_ipc .tit_wrap .tit span {
  font-size: var(--area30);
}
.ver_en .page_ipc .tit_wrap .tit span {
  display: inline !important;
}

.page_ipc section:nth-child(2) .sec_con > p {
  margin-top: var(--area32);
  margin-bottom: var(--area22);
}

/* 페이지 계기판 */

.page_dashboard .con_wrap section {
  padding-bottom: 0;
}
.page_dashboard .con_wrap section + section {
  padding-top: var(--area35);
  border-top: none;
}

.page_jogDial_compound .con_wrap img {
  display: inline-block;
  vertical-align: top;
}
.page_jogDial_compound .con_wrap section .sec_con section .circle_num_list > li > .img,
.page_jogDial_compound .con_wrap section .sec_con section .circle_num_list > li > .img_half_wrap > .img {
  width: var(--area334);
  max-width: calc((100% - var(--area16)) / 2);
}

.page_jogDial_compound .con_wrap section .sec_con section .circle_num_list > li > .img + .img,
.page_jogDial_compound .con_wrap section .sec_con section .circle_num_list > li > .img_half_wrap > .img + .img {
  margin-left: var(--area12);
}
.page_jogDial_compound .sec_con section:first-child .img {
  width: var(--area304);
}
.page_jogDial_compound .sec_con section:first-child .img + .img {
  width: var(--area160);
  margin-left: var(--area16);
}

/* 계기판 위치보기 팝업 */
.popup {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.popup .btn_close {
  width: var(--area40);
  height: var(--area40);
  border-radius: 1000px;
  position: fixed;
  top: var(--area39);
  right: var(--area42);
}

.popup .video_wrap {
  width: var(--area1200);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup .video_wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.popup.on {
  display: block;
}

/* 영어버전 (백그라운드 이미지) */
.ver_en .logo_wrap {
  padding-right: 0;
}
.ver_en .logo_wrap button {
  width: var(--area209);
}

.ver_en .fadeIn + .lnb_wrap .logo_wrap,
.ver_en .fadeOut + .on + .lnb_wrap .logo_wrap {
  padding-right: var(--area30);
}
.ver_en .fadeIn + .lnb_wrap .logo_wrap button,
.ver_en .fadeOut + .on + .lnb_wrap .logo_wrap button {
  width: 100%;
}
.ver_en .screen_popup_mode .mode01.on button {
  background-image: url(../img/en/mode_tit_01_on.png);
}
.ver_en .screen_popup_mode .mode02.on button {
  background-image: url(../img/en/mode_tit_02_on.png);
}
.ver_en .screen_popup_mode .mode03.on button {
  background-image: url(../img/en/mode_tit_03_on.png);
}
.ver_en .screen_popup_mode .mode04.on button {
  background-image: url(../img/en/mode_tit_04_on.png);
}
.ver_en .screen_popup_mode .mode05.on button {
  background-image: url(../img/en/mode_tit_05_on.png);
}

.ver_en .field.box_gauge_wrap > span {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.ver_en .list_wrap li {
  flex-wrap: nowrap;
  align-items: start;
}

.ver_en .list_wrap li > span {
  padding-top: var(--area5);
  padding-bottom: var(--area8);
  line-height: 1.4;
}
.ver_en .list_wrap li span:last-child {
  white-space: nowrap;
}

.ver_en [class*="screen_popup_"] .btn_back {
  font-weight: 600;
}

.ver_en .dot_list > li {
  padding-left: var(--area14);
}

/* .ver_old .screen_main > svg {
  background-image: url(../img/bg_cluster_main_off_legacy.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
} */

.screen_main .change_icon_wrap image.on {
  display: block !important;
  position: relative;
  z-index: 1;
}

/* 세로모드 -> 가로모드 */
/* @media (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: top left;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vh;
    height: 100vw;
  }

  .contents_wrap > .left_wrap {
    min-width: calc((100vh - var(--area240)) / 2);
    width: calc((100vh - var(--area240)) / 2);
    max-width: calc((100vh - var(--area240)) / 2);
  }
  .contents_wrap > .right_wrap {
    min-width: calc((100vh - var(--area240)) / 2);
    width: calc((100vh - var(--area240)) / 2);
    max-width: calc((100vh - var(--area240)) / 2);
  }
  .full.wrap .left_wrap {
    min-width: calc((100vh - var(--area240)) / 2);
    width: calc((100vh - var(--area240)) / 2);
    max-width: calc((100vh - var(--area240)) / 2);
  }
  .full.wrap .right_wrap {
    min-width: calc((100vh - var(--area240)) / 2);
    width: calc((100vh - var(--area240)) / 2);
    max-width: calc((100vh - var(--area240)) / 2);
  }
} */

.zoom_refresh_wrap {
  width: var(--area114);
  height: var(--area48);
  position: fixed;
  bottom: var(--area30);
  left: 50%;
  transform: translatex(-50%);
  display: none;
}

.zoom_refresh_wrap.on {
  display: block;
}
.btn_refresh {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 100px;
  font-size: var(--font20);
  color: rgba(255, 255, 255, 0.6);
}
.btn_refresh img {
  width: var(--area24);
}

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

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

@keyframes flicker {
  0% {
    background-image: url(../img/ic_switch_off.png);
  }
  /* 10초 중 1초 */
  10% {
    background-image: url(../img/ic_switch_on.png);
  }
  90% {
    background-image: url(../img/ic_switch_on.png);
  }
  100% {
    background-image: url(../img/ic_switch_off.png);
  }
}

@keyframes flicker_cross {
  0% {
    background-image: url(../img/ic_switch_off.png);
  }
  49.9% {
    background-image: url(../img/ic_switch_off.png);
  }
  51.1% {
    background-image: url(../img/ic_switch_on.png);
  }
  100% {
    background-image: url(../img/ic_switch_on.png);
  }
}

@keyframes marqee_text {
  0% {
    left: 0;
  }
  100% {
    left: -120%;
  }
}

@media (max-width: 2048px) {
  .zoom_area {
    min-height: 100%;
    height: 100%;
  }
  .full.page_cover.on {
    max-height: 100%;
    height: 100%;
  }
}

@media (min-width: 1921px) {
  .screen_popup_setCompositeSpeed .tit_wrap span {
    overflow: hidden;
  }
  .screen_popup_setCompositeSpeed .tit_wrap span span {
    position: relative;
    animation-duration: 10s;
    animation-name: marqee_text;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: 0;
    animation-timing-function: linear;
  }
}
@media (max-width: 1919px) {
  .device_contents {
    flex-direction: column;
    width: calc(100% + var(--area160));
    max-width: none;
    margin-left: var(--area-80);
    margin-right: var(--area-80);
  }
  .device_contents.on {
    display: flex;
    margin: 0 auto;
  }
  .device_wrap {
    width: 100%;
  }
  /* .btn_list_wrap li p,
  .btn_list_wrap li a,
  .btn_list_wrap li button {
    font-size: 70%;
  } */
}
/* @media (max-width: 1680px) {
  .device_time .date {
    font-size: var(--area8);
    margin-right: var(--area5);
  }
  .device_time .time {
    font-size: var(--area12);
  }
  .device_time .temp {
    font-size: var(--area10);
    margin-left: var(--area8);
  }
}
@media (max-width: 1600px) {
  .device_time .date {
    font-size: var(--area7);
    margin-right: var(--area4);
  }
  .device_time .time {
    font-size: var(--area11);
  }
  .device_time .temp {
    font-size: var(--area9);
    margin-left: var(--area7);
  }
}

@media (max-width: 1400px) {
  .device_time .date {
    font-size: var(--area10);
    margin-right: var(--area7);
  }
  .device_time .time {
    font-size: var(--area14);
  }
  .device_time .temp {
    font-size: var(--area12);
    margin-left: var(--area10);
  }
}

@media (max-width: 1360px) {
  .device_time .date {
    font-size: var(--area9);
    margin-right: var(--area8);
  }
  .device_time .time {
    font-size: var(--area13);
  }
  .device_time .temp {
    font-size: var(--area11);
    margin-left: var(--area9);
  }
}
@media (max-width: 1280px) {
  .device_time .date {
    font-size: var(--area8);
    margin-right: var(--area5);
  }
  .device_time .time {
    font-size: var(--area12);
  }
  .device_time .temp {
    font-size: var(--area10);
    margin-left: var(--area8);
  }
 
}
/*@media (max-width: 1152px) {
  .device_time .date {
    font-size: var(--area6);
    margin-right: var(--area3);
  }
  .device_time .time {
    font-size: var(--area10);
  }
  .device_time .temp {
    font-size: var(--area8);
    margin-left: var(--area6);
  }
}
@media (max-width: 768px) {
  .device_time .date {
    font-size: var(--area8);
    margin-right: var(--area7);
  }
  .device_time .time {
    font-size: var(--area12);
  }
  .device_time .temp {
    font-size: var(--area10);
    margin-left: var(--area8);
  }
} */
/* @media (max-width: 1280px) {
  .device_contents > .con_wrap {
    scale: 110%;
    margin-top: 2.479656vw;
  }

  .device_jogDial > .con_wrap {
    scale: 80%;
    margin-top: -18%;
  }
  .device_switch > .con_wrap {
    scale: 110%;
    margin-top: 5%;
  }

  .page_start.on .device_wrap {
    scale: 122%;
    margin-top: var(--area100);
  }
  .right_wrap .device_dashboard > .con_wrap .btn_popup {
    scale: 126.31%;
  }
} */

@media (hover: hover) {
  svg .on .hover_img .inline_stroke,
  svg .hover_img:hover .inline_stroke {
    outline-color: #00e500;
  }
}
@media (hover: none) {
  svg .on .hover_img .inline_stroke,
  svg .hover_img:hover .inline_stroke {
    stroke: transparent;
  }
}