@charset "UTF-8";
@import url("reset.css");
@import url("font.css");
/* Variable */
/* Default */
@media (-webkit-device-pixel-ratio: 1.25) {
	html {
	    zoom: 0.8;
	}
	
	.dimed {
		height:100% !important;
	}
	
	@media screen and (max-width: 1440px) {
		.gnb {
			height:100% !important;
		}
	}
}

html {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  height: 100%;
  font-size: 14px;
}

html * {
  --dark-navy: #121D2A;
  --gray1: #757575;
  --gray2: #C1C3C2;
  --yellow: #F9BB00;
  --bg-lightgray: #F4F4F4;
  --error: #E33500;
}

body {
  overflow-x: hidden;
  word-break: keep-all;
  word-wrap: break-word;
  width: 100%;
  height: 100%;
}

body,
button,
input,
select,
textarea,
a {
  line-height: 1.4em;
  font-family: "NotoSansKR";
  color: var(--dark-navy);
  letter-spacing: -0.2px;
  resize: none; /*신현섭 1227 크기 고정 되도록 수정 */
}

video {
    background-color: transparent;
}

*::-webkit-scrollbar {
  width: 0px; /*신현섭 1227 모바일에서 좌측에 스크롤 나옴 */
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: transparent;
}

*::-webkit-scrollbar-track {
  background-color: transparent;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
}

.dimed {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}

.accessibility {
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
}

a:hover,
a:active,
a:focus {
  color: var(--dark-navy);
}

.btn-floating {
  /* 플로팅 버튼 */
  display: block;
  position: fixed;
  background: url("../images/btn-floating.png") no-repeat center center;
  background-size: 100% auto;
  cursor: pointer;
  z-index: 9;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
}

.fix-pagination {
  display: none;
}

.fs-2xsm {
  font-size: 0.7rem;
}

.fs-xsm {
  font-size: 0.8rem;
}

.fs-md {
  font-size: 1.0rem;
}

.fs-xlg {
  font-size: 2rem;
  line-height: 1.3em;
}

.fs-2xlg {
  font-size: 1.429rem;
  line-height: 1.3em;
  /* letter-spacing: 0.5px; */
  letter-spacing: -0.2px;
}

.bold {
  font-weight: 700;
}

.fc-gray {
  color: var(--gray1);
}

.center {
  width: 100%;
  text-align: center;
}

.footer__sns .facebook {
  background: url("../images/btn-sns-facebook.png") no-repeat;
  background-size: 100% auto;
}
.footer__sns .naverpost {
  background: url("../images/btn-sns-naver.png") no-repeat;
  background-size: 100% auto;
}
.footer__sns .youtube {
  background: url("../images/btn-sns-youtube.png") no-repeat;
  background-size: 100% auto;
}

.ft-red {
  display: block;
  background: transparent;
  font-weight: 700;
  color: var(--error);
}

footer {
  width: 100%;
  padding: 52px 0;
  background: #fff;
}
footer .footer-wrap {
  height: max-content;
  position: relative;
}
footer .footer__logo {
  position: relative;
  border-bottom: 1px solid var(--gray2);
}
footer .copyright {
  font-weight: 400;
  color: #8E9090;
  /* font-size: 0.8rem; 20240126 KSH */
  font-size: 14px;
  line-height: 1.4em;
}
footer .footer__sns {
  position: absolute;
  /* top: 20px; 20231229 KSH */
  bottom: 10px;
  right: 0;
}
footer .footer__sns .facebook,
footer .footer__sns .naverpost,
footer .footer__sns .youtube {
  display: inline-block;
  margin: 0 0.3rem;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
}
footer .footer__badge {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
footer .footer__badge .slctbox-wrap {
  position: relative;
  width: calc(100% - 58px);
}
footer .footer__badge img {
  width: 48px;
  height: 48px;
}

.btn-family {
  width: 100%;
  height: 40px;
  /* border-bottom: 2px solid var(--dark-navy); */
  border-bottom: 1px solid var(--gray2);
  background: url("../images/arr-down.png") no-repeat right center;
  background-size: 12px auto;
  font-weight: 700;
  text-align: left;
}

.drop-box {
  display: none;
  position: absolute;
  height: max-content;
  padding: 8px;
  border: 1px solid var(--gray2);
  background: #fff;
  z-index: 10;
  bottom: 0;
  height: 476px;
  font-size: 0.7rem;
  overflow: auto;
  margin-bottom: 35px;
}
.drop-box li {
  height: 14px;
  margin-bottom: 5px;
}
.drop-box a {
  font-size: 0.8rem;
  color: var(--gray1);
  letter-spacing: -0.1px;
  font-size: 0.6rem;
}
.drop-box a.on {
  font-weight: 700;
  color: var(--dark-navy);
}

.drop-box.show {
  display: block;
}

.div-up {
  bottom: -200px;
  transition: bottom 1s ease-in-out;
}

/* Input */
.mark-require {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.mark-require::after {
  content: " * ";
  position: absolute;
  top: 0;
  right: -8px;
  font-weight: 700;
  color: var(--error);
}

.agree-area {
  align-items: center;
  height: 30px;
}
.agree-area .ft-red {
  display: inline-block;
}

.agree-txt {
  width: calc(100% - 48px);
  margin: 0 auto;
}
.agree-txt .ft-red {
  display: inline-block;
}
.agree-txt .tit {
  margin-bottom: 8px;
  font-weight: 700;
}
.agree-txt .txt {
  margin-bottom: 16px;
  font-weight: 400;
  color: var(--gray1);
}
.agree-txt .table-agree {
  border-top: 1px solid var(--dark-navy);
  border-bottom: 1px solid var(--dark-navy);
}
.agree-txt .table-agree dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.agree-txt .table-agree dt, .agree-txt .table-agree dd {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 24px;
  border-bottom: 1px solid var(--gray2);
}
.agree-txt .table-agree dt {
  width: 38%;
  background: #F4F4F4;
  font-weight: 700;
}
.agree-txt .table-agree dd {
  width: 62%;
  color: var(--gray1);
}
.agree-txt .table-agree dd.bold {
  color: var(--dark-navy);
}
.agree-txt .subtxt {
  margin-top: 8px;
  margin-bottom: 36px;
  font-size: 0.875rem;
  color: var(--gray1);
  line-height: 1.2rem;
}
.custom-chkbox {
    display: contents;
  margin-right: 4px;
}
.custom-chkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
.custom-chkbox input[type=checkbox] + label {
  position: relative;
  padding-left: 30px;
  font-weight: 700;
  cursor: pointer;
}
.custom-chkbox input[type=checkbox] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  background: url("../images/chkbox.png") no-repeat;
  background-size: 24px auto;
}
.custom-chkbox input[type=checkbox]:checked + label:before {
  background: url("../images/chkbox-checked.png") no-repeat;
  background-size: 24px auto;
}

.radio-lst {
  display: block;
  width: 100%;
  /* overflow: hidden; */
  height: 44px;
}
.rd-item {
    float: left;
    margin-top: 16px; /* 20240129 KSH */
    margin-right: 4px;
}
.radio-lst input[type=radio] {
    display: none;
}
.radio-lst input + label {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: max-content;
  height: 36px;
  margin-right: 4px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  color: var(--gray1);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.16px;
}
.radio-lst input:checked + label {
  background: #fff;
  border: 1px solid var(--dark-navy);
  color: var(--dark-navy);
}

.checkbox-lst.type02 input + label {
  position: relative;
  width: max-content;
  height: 36px;
  margin-right: 4px;
  padding: 0 16px 0 36px;
  background: #fff;
  border: 1px solid var(--gray2);
  border-radius: 18px;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  color: var(--gray1);
}
.checkbox-lst.type02 input + label:before {
  display: flex;
  content: " ";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 20px;
  height: 20px;
  background: #e9e9e9;
  border-radius: 10px;
}
.checkbox-lst.type02 input:checked + label {
  background: #fff;
  border: 1px solid var(--dark-navy);
  color: var(--dark-navy);
}
.checkbox-lst.type02 input:checked + label:before {
  display: flex;
  content: " ";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 20px;
  height: 20px;
  background: var(--dark-navy) url("../images/checkmark.png") no-repeat center center;
  background-size: 16px auto;
}

.txtarea-bdr {
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  border: 1px solid var(--gray1);
}

.checkbox-lst {
  display: flex;
  flex-wrap: wrap; /* 20240104 KSH */
  width: 100%;
  margin-top: 8px; /* 20240129 KSH */
}
.checkbox-lst .chk-item {
  /* 20240104 KSH */
  margin-top: 8px; 
  margin-right: 4px;
}
.checkbox-lst input[type=checkbox] {
  display: none;
}
.checkbox-lst input + label {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: max-content;
  height: 32px;
  padding: 0 12px 0 32px;
  margin-right: 6px;
  background: #fff;
  border-radius: 24px;
  color: var(--gray1);
  cursor: pointer;
  letter-spacing: 0.1px;
  /* font-size: 0.8rem; 20240117 KSH */
}
.checkbox-lst input + label:before {
  content: " ";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e9e9e9;
  background-size: 100% auto;
}
.checkbox-lst input:checked + label {
  background: var(--dark-navy);
  color: #fff;
}
.checkbox-lst input:checked + label:before {
  content: " ";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff url("../images/checkmark-b.png") no-repeat center center;
  background-size: 12px auto;
}

.ip-line {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gray2);
  background: #fff;
}

.ip-line.error {
  border-bottom: 1px solid var(--error);
}

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

.flex-row {
  display: flex;
  align-items: center;
}

.ld-txt-lg {
  margin: 16px 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.ld-txt-sm {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray1);
  line-height: 1.4em;
}

.loarding {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #fff;
  text-align: center;
}
.loarding .ld-img {
  width: 100px;
  height: 100px;
}

/* Button */
.btn-area button + button {
  margin-left: 8px;
}

.btn-area + .agree-area {
  margin-top: 24px;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.btn-sm {
  width: 100px;
  height: 32px;
  font-weight: 500;
}

.btn-black {
  background: var(--dark-navy);
  color: #fff;
}

.btn-yellow {
  background: var(--yellow);
  color: var(--dark-navy);
}

.btn-black:disabled {
  border: 1px solid var(--gray2);
  background: var(--bg-lightgray);
  color: var(--gray2);
}

.btn-b2b {
  display: flex;
  align-items: center;
  width: 154px; /* 20240125 KSH */ 
  height: 30px; /* 20240125 KSH */ 
  margin-left: 25px;
  padding: 0 26px 0 20px;
  border-radius: 25px;
  border: 1px solid var(--dark-navy); /* 20240125 KSH */
  background: url("../images/arr-next.png") no-repeat right 12px center;
  background-size: 16px auto;
  font-size: 14px; /* 20240125 KSH */
  font-weight: 700;
  letter-spacing: -0.14px;
}

.btn-main-scroll {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 2rem;
  width: 84px;
  height: 39px;
  margin-left: -42px;
  background: url("../images/arr-scr-down.png") no-repeat center bottom;
  background-size: 24px auto;
  font-size: 0.857rem;
  font-weight: 500;
  color: var(--gray1);
}

.btn-ip-del,
.btn-ip-eye {
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  width: 40px;
  height: 40px;
  z-index: 8;
}

.btn-ip-del {
  background: url("../images/btn-ip-del.png") no-repeat center center;
  background-size: 24px auto;
}

.btn-ip-eye {
  background: url("../images/btn-ip-eye.png") no-repeat center center;
  background-size: 24px auto;
}

.btn-ip-eye.hide {
  background: url("../images/btn-ip-eye-off.png") no-repeat center center;
  background-size: 24px auto;
}

.btn-pageback {
  display: inline-block;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background: url("../images/arr-prev-lg.png") no-repeat center center;
  background-size: 24px auto;
}

.monitor img {
  width: 100%;
  height: 100%;
}

.under-img-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 0 auto;
  border-radius: 30px;
  background: #C1C3C2;
  font-weight: 700;
  color: #fff;
}

.swiper-btn-area {
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.swiper-btn-area .page-num {
  font-size: 0.9rem; /* 20240205 변경 */
  font-weight: 700;
  margin: 0 0.5rem;
}

.progress-bg {
  width: 120px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.progress {
  width: 0%;
  height: 4px;
  background: var(--dark-navy);
}

.btn-pause,
.btn-prev-sm,
.btn-next-sm {
  width: 32px;
  height: 32px;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
}

.btn-pause {
  background: url("../images/btn-pause.png") no-repeat center center;
  background-size: 12px auto;
}

.btn-pause.play {
  background: url("../images/btn-play.png") no-repeat center center;
  background-size: 12px auto;
}

.btn-prev-sm {
  background: url("../images/arr-prev.png") no-repeat center center;
  background-size: 12px auto;
}

.btn-next-sm {
  background: url("../images/arr-next.png") no-repeat center center;
  background-size: 12px auto;
}

.btn-arr-first,
.btn-arr-prev,
.btn-arr-next,
.btn-arr-end {
  display: inline-block;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  width: 32px;
  height: 32px;
}

.btn-arr-first {
  background: url("../images/arr-first.png") no-repeat center center;
  background-size: 12px auto;
}

.btn-arr-prev {
  background: url("../images/arr-prev.png") no-repeat center center;
  background-size: 12px auto;
}

.btn-arr-next {
  background: url("../images/arr-next.png") no-repeat center center;
  background-size: 12px auto;
}

.btn-arr-end {
  background: url("../images/arr-end.png") no-repeat center center;
  background-size: 12px auto;
}

/* Swiper */
.swiper {
  position: relative;
}
.swiper--intro .swiper-button-prev,
.swiper--intro .swiper-button-next {
  position: absolute;
  top: 40%;
  width: 40px;
  height: 40px;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
}
.swiper--intro .swiper-button-prev {
  left: 0;
  background: url("../images/arr-prev-lg.png") no-repeat center center;
  background-size: 24px auto;
}
.swiper--intro .swiper-button-next {
  right: 0;
  background: url("../images/arr-next-lg.png") no-repeat center center;
  background-size: 24px auto;
}
.swiper--intro .swiper-pagination {
  left: 48% !important;
  bottom: -20px !important;
}
.swiper--solution .txt-area .fs-xlg {
  font-size: 1.143rem;
  display: block;
}
.swiper--solution .swiper-slide {
  width: 100%;
}
.swiper--solution .swiper-slide img {
  width: 100%;
}
.swiper--solution .swiper-button-prev,
.swiper--solution .swiper-button-next {
  position: absolute;
  bottom: -25%;
  width: 40px;
  height: 40px;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
}
.swiper--solution .swiper-button-prev {
  left: 0;
  background: url("../images/arr-cc-prev.png") no-repeat center center;
  background-size: 100% auto;
}
.swiper--solution .swiper-button-next {
  right: 0;
  background: url("../images/arr-cc-next.png") no-repeat center center;
  background-size: 100% auto;
}

.swiper-pagination {
  display: flex;
  width: max-content;
  margin: 1.2rem auto;
}
@keyframes stretch {
  from {
    width: 0.857rem;
  }
  to {
    width: 2.571rem;
  }
}
.swiper-pagination span {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
}
.swiper-pagination span.on {
  animation: stretch 0.3s linear forwards;
  background: var(--dark-navy);
}
.swiper-pagination span + span {
  margin-left: 0.857rem;
}

.intro-visual {
  display: flex;
  justify-content: center;
  position: relative;
}
.intro-visual img {
  width: auto;
  height: 54.074vh;
  margin: 0 auto;
}
.intro-visual .fl-txt {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  position: absolute;
  top: 56px;
  left: 56px;
  /* width: 100%;
  width: 85%;
  height: 100%;
  margin: auto;
  border-radius: 8px; */
  color: #fff;
  /* text-align: center;*/
} 
.btn-main-more {
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
  width: 36px;
  height: 36px;
  padding-left: 10px;
  margin-top: 20px;
  border-radius: 20px;
  border: 1px solid #A05600;
  background: url("../images/ico-plus-w2.png") no-repeat center center;
  background-size: 16px auto;
  transition: width 0.3s ease-in-out;
  text-align: left;
}
.intro-visual .fl-txt .fs-xlg {
  margin-bottom: 0;
  line-height: 1.8rem;
  font-weight: 700;
  line-height: 140%; 
  letter-spacing: -0.36px;
}
.intro-visual .fl-txt span {
  display: block; 
}
.intro-visual .fl-txt .btn {
  margin: 1.25rem auto 0;
}
.intro-visual .w-box {
  /* width: 90%; 20231229 KSH */
  margin: 24px auto 0;
  padding: 12px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--dark-navy);
}
.intro-visual .w-box span + span {
  margin-top: 6px;
}
.intro-visual img {
  width: 85%;
  height: auto;
  margin: 0 auto;
}
.fc-white {
  color : #FFFFFF;
}

.fc-red {
  color : #FF0000;
}
		
.pre-line {
  white-space : pre-line;
}

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

/* Mobile First */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #E9E9E9;
  z-index: 9;
}
header .header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px 0 12px;
}
header .header__content h1 {
    position: absolute;
    width: calc(100% - 32px);
}
header .header__content.b2b {
  justify-content: flex-start;
}
header .header__content.b2b .h1-sub {
  position: relative;
  margin-left: 10px;
  padding-top: 5px;
  padding-left: 10px;
  font-weight: 700;
}
header .header__content.b2b .h1-sub::before {
  content: " | ";
  position: absolute;
  top: 3px;
  left: -8px;
  font-weight: 700;
}
header .header__content.b2b .language {
  position: absolute;
  right: 20px;
}

header.main-header {
  background: transparent;
  border-bottom: none;
}

header.demo-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  border-bottom: none;
}
header.demo-header .btn-hamburger {
  position: absolute;
  top: 36px;
  left: 20px;
}
header.demo-header h2 {
  font-size: 1.429rem;
  width: max-content;
  margin: 0 auto;
}

.content.main {
  margin-top: 0;
  padding-top: 0;
}

.content {
  width: 100%;
  margin-top: 56px;
  /* padding: 36px 0; 20240115 */
  padding: 24px 0 0;
  height: max-content;
}

.content.demo {
  width: 100%;
  /* height: 100vh; */
  height: 100%;
  margin-top: 100px;
  padding: 0; /* 20240104 KSH */
}

.bg-white {
  background: #fff;
}

.bg-gray {
  position: relative;
  overflow: hidden;
}

.bg-gray::before {
  content: "";
  display: block;
  position: absolute;
  width: 176%;
  height: 174px;
  top: 120px;
  left: 50%;
  margin-left: -88%;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0px 4px 200px 0px rgba(142, 144, 144, 0.1);
  z-index: -1;
}

.btn-hamburger {
  display: block;
  width: 40px;
  height: 40px;
  background: url("../images/btn-hamburger.png") no-repeat center center;
  background-size: 24px auto;
  z-index:1;
}

.btn-file {
  width: 100%;
  margin-bottom: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 3rem;
  border-radius: 6px;
  background: #f4f4f4 url("../images/ico-download.png") no-repeat left 1.25rem center;
  background-size: 1.25rem auto;
  text-align: left;
}

.ip-file {
  width: calc(100% - 7.2rem);
  height: 40px;
  padding: 0 16px;
  background: #F4F4F4;
  border-radius: 4px;
}

.btn-file-sm {
  width: 7rem;
  height: 40px;
  padding: 0 16px;
  border-radius: 4px;
  background: var(--gray1);
  color: #fff;
}

.btn-download {
  display: flex;
  align-items: center;
  width: 56px;
  height: 24px;
  margin: 1.25rem auto;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--dark-navy) url("../images/ico-download-w.png") no-repeat center center;
  background-size: 1.25rem auto;
  color: transparent;
}

.btn-border {
  width: max-content;
  height: 2.5rem;
  padding: 0 1.2rem;
  border-radius: 6px;
  border: 1px solid var(--dark-navy);
  background: #fff;
  font-weight: 700;
}

.btn-demo {
  width: calc(50% - 5px);
  height: 2.857rem;
  border-radius: 8px; /* 20240115 */
  font-size:0.9rem;
}

.logo {
  width: 130px;
  /* height: 32px; */
  margin: 0 auto;
}
.logo img {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
}

.language {
  display: flex;
  align-items: center;
  width: max-content;
  height: 32px;
  position: relative;
  padding-right: 25px;
  background: url("../images/icon-lang.png") no-repeat right center;
  background-size: 20px auto;
  font-weight: 700;
}
.language .dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  padding: 0 12px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 8px 8px 40px 0px rgba(142, 144, 144, 0.2);
}
.language .dropdown ul li {
  height: 40px;
  border-bottom: 1px solid #C1C3C2;
  line-height: 40px;
  text-align: center;
  font-weight: 500;
  color: var(--gray1);
  cursor: pointer;
}
.language .dropdown ul li:hover {
  color: var(--dark-navy);
}
.language .dropdown ul li:last-child {
  border-bottom: none;
}

.main-item {
  position: relative;
  width: 100%;
}
.main-item__content {
  width: 100%;
  height: max-content;
}
.main-item--intro .main-item__content > .fs-2xlg {
  margin-bottom: 16px;
}
.main-item--solution {
  padding: 36px 20px;
}
.main-item--solution .txt-area,
.main-item--solution .btn-area {
  width: 100%;
  text-align: center;
}
/* .main-item--solution .txt-area {
  margin-top: 10px; 20240115 KSH
} */

.main-item--solution .btn-area {
  /* margin-top: 1.429rem;  20240115 KSH */
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-item--solution .tab-panel {
  display: none;
}
.main-item--solution .tab-panel.on {
  display: block;
}
.main-item--customer {
  background: var(--yellow);
}
.main-item--customer .txt-area {
  font-weight: 700;
  line-height: 1.3em;
}
.main-item--customer .form-area .label {
  font-weight: 700;
}
.main-item--customer .form-area .fieldset {
  position: relative;
  margin-top: 24px;
}
.main-item--customer .form-area .fieldset .label {
  position: absolute;
  left: 12px;
  z-index: 6;
}
.main-item--customer .form-area .fieldset .label .fc-gray {
  font-weight: 500;
}
.main-item--customer .form-area .fieldset .ip-trans {
  border: 1px solid #fff;
  width: 100%;
  height: 100%;
  padding-left: 26%;
  font-size: 0.857rem;
}
.main-item--customer .form-area .fieldset .ip-trans:focus {
  border: 1px solid var(--dark-navy);
}
.main-item--customer .form-area .fieldset .ip-trans.error {
  border: 1px solid var(--error);
}
.main-item--customer .form-area .input-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.main-item--customer .form-area .ip-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 8px;
  background: #fff;
}
.main-item--customer .form-area .ip-box.disabled .label {
  color: var(--gray1);
}
.main-item--customer .form-area .ip-box.disabled .ip-trans {
  border: 1px solid var(--gray2);
}
.main-item--customer .form-area .ip-box.disabled .ip-trans::placeholder,
.main-item--customer .form-area .ip-box.disabled .mark-require::after {
  color: var(--gray2);
}
.main-item--customer .form-area .error-msg {
  display: flex;
  align-items: center;
  position: absolute;
  top: -25px;
  left: -1px;
  width: max-content;
  height: 30px;
  padding: 0 12px;
  background: var(--error);
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  z-index: 9;
}
.main-item--customer .form-area .error-msg::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: var(--error);
}
.main-item--customer .form-area .text-area {
  display: block;
  height: 160px;
  position: relative;
  background: #fff;
}
.main-item--customer .form-area .text-area .label {
  top: 1px;
  width: calc(100% - 24px);
  height: 42px;
  padding-top: 10px;
  background: #fff;
}
.main-item--customer .form-area .text-area textarea {
  border: 1px solid #fff;
  width: 100%;
  height: 100%;
  padding: 40px 12px 12px 12px;
  font-size: 0.857rem;
  resize: none; /*신현섭 1227 크기 고정 되도록 수정 */
}

.main-item--customer .form-area .text-area textarea .error-msg {
  margin-top: 6px;
  color: var(--error);
}

.main-item--customer .form-area .text-area textarea:focus {
  border: 1px solid var(--dark-navy);
}
.main-item--customer .form-area .ip-trans::placeholder {
  font-size: 0.857rem;
  vertical-align: middle;
}
.main-item--customer .form-area .btn-area {
  position: absolute;
  top: 0;
  right: 0;
}

.only-mobile {
  display: block;
}

.only-desktop {
  display: none;
}

.mt-comm {
  margin-top: 100px;
}

.br-mb {
  display: block;
}

.intro-wrap {
  /* padding-top: 50px; 20240126 KSH */
  padding-bottom: 88px;
  /* background: url("../images/bg-intro.png") no-repeat center 150px; */ /* 20240205 변경 */
  background-size: 100% auto;
}
.intro-wrap h2,
.intro-wrap h3 {
  width: 100%;
  height: max-content;
  line-height: 1.3em;
}
.intro-wrap h2 {
  /* margin-bottom: 50px; 20240124 KSH */
  margin-bottom: 20px;
  font-size: 1.714rem;
  font-weight: 700;
}
.intro-wrap h3 {
  margin-bottom: 16px;
  padding: 0 24px;
  font-size: 1.714rem;
  font-weight: 700;
  /* text-align: center; 20240126 KSH */
}
.intro-wrap h4 {
  margin-top: 24px;
  margin-bottom: 16px;
  /* font-size: 1rem; 20240130 HSH DESIGN2.0 */  
  font-size: 1.2rem;
  font-weight: 700;
}
.intro-wrap .intro__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin-top: 2rem;
  padding: 0 56px;
}
/* .intro-wrap .intro__item {
  margin-bottom: 40px; 20240124 KSH
} */
.intro-wrap .intro__item .tit {
  width: 100%;
  padding-top: 164px;
}
.intro-wrap .intro__item .tit span {
  display: block;
  width: 100%;
  height: max-content;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 4px;
  /* background: #FFF0C2; */
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}
.intro-wrap .intro__item.img01 .tit {
  background: url("../images/img-intro11.png") no-repeat center top;
  background-size: 140px auto;
}
.intro-wrap .intro__item.img02 .tit {
  background: url("../images/img-intro12.png") no-repeat center top;
  background-size: 140px auto;
}
.intro-wrap .intro__item.img03 .tit {
  background: url("../images/img-intro13.png") no-repeat center top;
  background-size: 140px auto;
}
.intro-wrap .intro__item.img04 .tit {
  background: url("../images/img-intro14.png") no-repeat center top;
  background-size: 140px auto;
}

.apply-wrap {
  padding-bottom: 72px;
}
.apply-wrap .h2-wrap {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 32px);
  margin: 0 auto 5rem;
  align-items: center;
  margin-bottom: 2.8rem;
}
.apply-wrap h2 {
  width: 100%;
  height: 11.429rem;
  background: url("../images/bg-apply.png") no-repeat center center;
  background-size: 100% auto;
  font-size: 1.714rem;
  font-weight: 700;
  line-height: 1.3em;
  text-align: center;
}
.apply-wrap .h2-hasback {
  height: auto;
  background: none;
  text-align: left;
}
.apply-wrap .h2-txt {
  width: 100%;
  margin-top: 0.7rem;
  /* font-size: 1.2rem; 20240129 KSH */
  line-height : 1.4em;
}
.apply-wrap .h3-hasdot {
  position: relative;
  margin-bottom: 16px;
  padding-left: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray1);
}
.apply-wrap .h3-hasdot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

.solution-wrap {
  padding-bottom: 72px;
  /* background: url("../images/bg-intro.png") no-repeat center 250px;
  background-size: 100% auto; 20240124 KSH */
}
.solution-wrap h2 {
  width: 100%;
  margin-bottom: 20px;
  /* font-size: 2.2rem; 20240117 KSH */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3em;
}
.solution-wrap .h2-txt {
  margin-bottom: 32px;
  /* font-size: 1.2rem; 20240117 KSH */
  font-size: 1rem;
  line-height: 1.3em;
}

.solution__content {
  padding: 0 0px;  /*신현섭 1228 탭패널 꽉차게 변경하기위해서.. */
}
.solution__content .tab-sb-lst {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.solution__content .tab-panel {
  padding: 0 16px;
}
.solution__item {
  margin-top: calc(6rem - 6px);  /* 신현섭 10 -> 8rem으로 변경 디자인 변경 */
  padding-bottom: 1.3rem;
}
.solution__item h3 {
  font-size: 2.2rem;
  line-height: 1.2em;
}
.solution__item h3 .fs-sm {
  display: block;
  margin-bottom: 0;
  font-size: 1.75rem;
  color: var(--gray1);
}
.solution__item .h3-txt {
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;
}

.tab-sb-lst {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding: 0 16px;
  gap: 0.5rem;
  margin: 56px 0 0;
}

.tab-sb-lst.mg {
  margin: 3rem 0 6rem;
}

.tab-sb {
  height: 3rem;
  margin: 0 2px 6px;
  padding: 0 12px; /* 20240129 KSH */
  border-radius: 1.5rem;
  /* border: 1px solid var(--gray2); 20240129 KSH */
  border-radius: 2rem;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  background: #fff;
  font-weight: 700;
  letter-spacing: -0.14px;
  color: var(--gray1);
}

.tab-sb.on {
  background: var(--dark-navy);
  color: #fff;
  border: none;
  font-weight: 700;
}

.visual-area {
  position: relative;
  width: 100%;
}
/*.flex-col2 .visual-area {
  display: flex;
  flex-direction: column-reverse;
}*/
.tab-posi {
  display: flex;
  justify-content: center;
  /* position: absolute; 20231229 KSH */
  /* bottom: 0; */
  width: 100%;
}

.tab-sb02-lst {
  width: max-content;
  height: max-content;
  /* padding: 0.3rem 0.4rem; 
  border-radius: 1.5rem;
  background: #fff;*/
  text-align: center;
}

.tab-sb02 {
  /* height: 2.286rem; */
  height: 2rem;
  margin: 0 2px 6px;
  padding: 0 16px;
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.14px;
  color: var(--gray1);
}

.tab-sb02.on {
  background: #FFF0C2;
  box-shadow: none;
  font-weight: 700;
  color: var(--dark-navy);
}
.tab-sb02.btn-go {
  padding-right: 30px;
  box-shadow: none;
  background: #F9BB00 url("../images/arr-inbtn.png") no-repeat right 12px center;
  background-size: 12px auto;
  font-weight: 700;
  color: var(--dark-navy);
}

.ip-row {
  position: relative;
  width: 100%;
  overflow: visible;
  margin-bottom: 36px;
  padding: 0 16px;
}
.ip-row .flex-row {
  width: 100%;
  height: auto;
  justify-content: space-between;
  align-items: center;
}
.ip-row .btn-ip-del,
.ip-row .btn-ip-eye {
  position: absolute;
  top: 40px;
  right: 10px;
}
.ip-row .error-msg {
  margin-top: 6px;
  color: var(--error);
}

/* .ip-row.has-scroll {
  padding: 0; 20240104 KSH
} */
/* .ip-row.has-scroll .apply__label {
  padding: 0 16px; 20240104 KSH
} */

.apply__content.pd-login {
  margin: 100px auto;
}
.apply__content.pd-login .btn-area {
  margin-top: 120px;
}
.apply__content.pd-login .ip-row {
  margin-bottom: 60px;
}

.apply__content .btn-area {
  padding: 0 16px;
}
.apply__label {
  display: block;
  font-weight: 700;
}

.partner--center {
  width: 100%;
  padding: 0 16px;
}
.partner--center .banner {
  display: flex;
  flex-direction: column;
}
.partner--center .banner li {
  width: 100%;
  margin-bottom: 16px;
}
.partner--center .banner li a {
  width: 150px;
  height: 40px;
}
.partner--center .banner li a img {
  width: 100%;
  height: auto;
}
.partner--center .banner .banner-box {
  overflow: hidden;
  width: 100%;
  height: max-content;
  /* padding: 16px; 20240126 KSH */
  padding: 1.2rem 1.6rem 2rem 1.6rem;
  border-radius: 8px;
  background: var(--White, #FFF);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.partner--center .banner .banner-box img {
  display: block;
  width: 220px;
  height: 72px;
  margin: 0 auto;
}
.partner--center .banner .banner-box span {
  display: none;
  text-align: center;
  font-weight: 500;
}
.partner--center .banner .banner-box.show {
  /* 20240126 KSH */
  animation: none;
  transform: none;
  height: 100%;
}
.partner--center .banner .banner-box.show span {
  display: block;
}
.partner--slider {
  width: 100%;
  height: 190px;
  margin-bottom: 0;
  margin-top: 44px; /* 20240126 KSH */
}
.partner--slider .banner-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: auto;
}
.partner--slider .banners {
  width: max-content;
  height: max-content;
}
.partner--slider .banners li {
  width: 160px;
  height: 60px;
}

.bdr-box-lst {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 72px;
}

.bdr-box:hover {
  border: 1px solid var(--dark-navy);
}

.bdr-box:active {
  background: #F9F9F9;
}

.bdr-box {
  width: 100%;
  height: max-content;
  margin-bottom: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--gray2);
}
.bdr-box a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 76px;
  cursor: pointer;
}
.bdr-box .tit {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}
.bdr-box .txt {
  display: block;
  color: var(--gray1);
}
.bdr-box .link-arr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  padding-right: 15px;
  background: url("../images/arr-next.png") no-repeat right center;
  background-size: 12px auto;
  font-size: 0.8rem;
  font-weight: 700;
}

.banners {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: absolute;
}
.banners li {
  margin-right: 12px;
  margin-bottom: 16px;
}
.banners li a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.banners li a img {
  display: block;
  margin: auto;
  width: 100%;
  height: auto;
  opacity: 0.7;
}

.banners-second {
  /* margin: 40px 0;  신현섭 1227 디자인에 40px로 잡혀 있음*/
  margin: 8px 0 40px; /* 20240126 KSH */
}
.box-gray {
    height: calc(100% - 190px);
    min-height: 105px;
    margin-top: 12px;
    /*padding: 16px 16px 16px 16px;  신현섭 1227 하단 마진이 없으면 잘려서 보임*/
    padding: 16px 16px 16px 16px;
    background: #F9F9F9;
}
.chk-list li {
  margin-bottom: 10px;
}
.chk-list li:last-child {
  margin-bottom: 0;
}
.chk-list .chk-bold {
  display: flex;
  height: max-content;
  margin-bottom: 4px; /* 20240129 KSH */
  padding-left: 23px;
  background: url("../images/checkmark-c.png") no-repeat left center;
  background-size: 16px auto;
  font-weight: 700;
  letter-spacing: -0.24px;
  word-break: break-word;
}

.checkmark {
  display: block;
  /* width: 1.143rem;
  height: 1.143rem; 20240126 KSH */
  width: 1.2rem;
  height: 1.2rem;
  background: url("../images/checkmark-c.png") no-repeat left center;
  background-size: 1.2rem auto;
  margin: 0 auto;
}

.table__num {
  margin-bottom: 16px;
  font-weight: 700;
}
.table__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
}
.table__pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.table--common {
  width: 100%;
}
.table--common tr {
  border-bottom: 1px solid var(--gray2);
}
.table--common th:first-child,
.table--common td:first-child {
  text-align: left;
  padding: 0 16px;
}
.table--common thead {
  border-top: 4px solid var(--dark-navy);
}

.table--common thead th {
  height: 40px;
  font-weight: 700;
  background: #f9f9f9;
}
.table--common thead th:first-child {
  color: var(--gray1);
}
.table--common tbody td {
  width: 33.333%;
  height: 55.75px;
  font-weight: 400;
}
.table--notice, .table--customer {
  width: 100%;
}
.table--notice a, .table--customer a {
  display: block;
  text-align: left;
  font-size: 1.0rem;
  font-weight: 700;
}
.table--notice thead tr, .table--customer thead tr {
  height: 54px;
  background: #F9F9F9;
  border-bottom: 2px solid var(--gray2);
}
.table--notice tbody tr, .table--customer tbody tr {
  height: 56px;
  border-bottom: 1px solid var(--gray2);
}
.table--notice tbody tr:last-child, .table--customer tbody tr:last-child {
  border-bottom: none;
}
.table--notice th,
.table--notice td:nth-child(3), .table--customer th,
.table--customer td:nth-child(3) {
  color: var(--gray1);
  text-align: center;
}
.table--notice th, .table--customer th {
  font-weight: 700;
}
.table--notice td, .table--customer td {
  text-align: center;
  overflow: hidden;
}
.table--notice .tag-yellow, .table--customer .tag-yellow {
  width: max-content;
  padding: 0 10px;
  height: 40px;
  font-size: 1.0rem;
  font-weight: 700;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table-wrap {
  width: 100%;
  padding: 0 16px;
}
.table-wrap .view__header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid var(--gray2);
}
.table-wrap .view__header .tit {
  width: 100%;
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1.3em;
}
.table-wrap .view__header .tag-yellow {
  width: 2.8rem;
  height: 1.4rem;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.table-wrap .view__header .left-area,
.table-wrap .view__header .right-area {
  width: 50%;
  margin: 1.25rem 0;
}
.table-wrap .view__header .right-area,
.table-wrap .view__header .date {
  color: var(--gray1);
  font-weight: 500;
}
.table-wrap .view__header .left-area {
  display: flex;
}
.table-wrap .view__header .right-area {
  text-align: right;
}
.table-wrap .view__header .date {
  margin-left: 1.25rem;
}
.table-wrap .view__header .dt {
  position: relative;
}
.table-wrap .view__header .dt::after {
  content: ":";
}
.table-wrap .view__body {
  padding: 1.25rem;
  border-bottom: 1px solid var(--gray2);
}
.table-wrap .view__body .file-btn-area {
  margin-top: 2.5rem;
}
.table-wrap .view__btn-area {
  width: 100%;
  margin-top: 1.25rem;
  text-align: right;
}

.promotion-lst li {
  margin-bottom: 16px;
}
.promotion-lst .top-area {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}
.promotion-lst .top-area .tag {
  width: max-content;
  height: 1.714rem;
  padding: 2px 8px;
  margin-right: 2px;
  border-radius: 2px;
  background: var(--yellow);
  font-weight: 700;
}
.promotion-lst .top-area .num {
  font-weight: 700;
}
.promotion-lst .date {
  position: relative;
  margin-left: 11px;
  padding-left: 5px;
  color: var(--gray1);
}
.promotion-lst .date::before {
  content: " | ";
  position: absolute;
  top: 0;
  left: -5px;
  font-weight: 500;
}
.promotion-lst .tit {
  width: 100%;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tag-yellow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.571rem;
  height: 1.147rem;
  margin: 0 auto;
  border-radius: 4px;
  background: var(--yellow);
}

.tab-lst {
  width: 100%;
  margin-top: 40px;
}
.tab-lst button {
  display: flex;
  align-items: center;
  width: max-content;
  margin-bottom: 16px;
  padding: 8px 16px;
  border-radius: 36px;
  background: transparent;
  font-weight: 700;
  color: var(--gray1);
}
.tab-lst button .fs-2xsm {
  display: none;
}
.tab-lst button.on {
  background: var(--yellow);
  color: var(--dark-navy);
}

.theme-wrap {
  display: flex; /* 20231228 KSH */
  justify-content: center; /* 20231228 KSH */
  flex-direction: column;
  position: relative;
  /* margin-bottom: 20px; */
  padding-bottom: 80px;
}
.theme-wrap .info-txt {
  width: 100%;
  margin-top: 8px;
  /* font-size: 1.143rem; */
  font-size: 0.8rem;
  text-align: center;
}
.theme-wrap .mov-area {
  height: auto;
  width: 100%;
}
.playr_video.ratio01 {
  /* 20240104 KSH */
  max-height: 640px; 
  height:90vh;
  width:360px;
  max-width: 360px;
}
.theme-wrap .mov-area img {
  width: 100%;
  height: auto;
}
.theme-wrap .txt-area {
  width: calc(100% - 32px);
  margin: 20px auto 0;
}

.theme-wrap .img-area img {
  width: 100%;
  height: auto;
}
.theme-wrap .theme-box {
  display: flex;
  justify-content: space-between;
  width: 240px;
  padding: 1.143rem 0.857rem;
  margin: 12px auto;
  border-radius: 8px;
  background: #F4F4F4;
}

.theme-wrap .theme-box .theme-item {
    width: 66px;
}

.theme-wrap .theme-box .thumb-img {
  overflow: hidden;
  /* width: 100%;
  height: 4rem; */
  margin-bottom: 0.25rem;
}
.theme-wrap .theme-box .thumb-img img {
  width: 100%;
  height: 100%;
}
.theme-wrap .theme-box .name {
  display: block;
  width: 100%;
  text-align: center;
  font-size:0.8rem;
}

.btn-area-demo {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px 30px;
  gap: 10px;
}

.gray-box {
  padding: 16px 10px 0;
  border-radius: 8px;
  background: #F4F4F4;
}
.gray-box .tit {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.gray-box .mobile-scroll {
  width: 100%;
  display: flex;
  padding: 0;
}
.gray-box .buttons {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}
.gray-box .btn-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* width: 120px; 20231228 */
  width: 170px;
  padding: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: #FFF;
}
.gray-box .btn-product img {
  display: block;
  width: 60px;
  height: 14px;
}
.gray-box .btn-product:active {
  position: relative;
}
.gray-box .btn-product:active::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 2%;
  width: 96%;
  height: 3px;
  background: url("../images/scan-barcode.png") no-repeat center center;
  background-size: 100% auto;
  border-radius: 2px;
  box-shadow: rgba(227, 53, 0, 0.85) 0px 0 8px;
  z-index: 12;
}

.flex-col2 .gray-box-lst {
  width: 100%;
  height: max-content;
  margin-top: 32px;
  padding: 24px;
  background: #f9f9f9;
  border-radius: 8px;
}
.flex-col2 .txt-haslogo .txt-up {
  width: 100%;
  /* margin-bottom: 24px;
  padding-bottom: 24px; 20240129 KSH */
  margin-bottom: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #C1C3C2;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 140%;
  text-align: left;
}
.flex-col2 .txt-haslogo .txt-down {
  display: flex;
  justify-content: space-between;
}
.flex-col2 .txt-haslogo .txt-down .dl {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 220px);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 140%;
  padding-right: 16px;
}
.flex-col2 .txt-haslogo .txt-down .dl span {
  display: block;
}
.flex-col2 .txt-haslogo .txt-down .dl .dt {
  width: 25%;
  color: var(--gray1);
}
.flex-col2 .txt-haslogo .txt-down .dl .dd {
  width: 75%;
}
.flex-col2 .txt-haslogo .logo-intel {
  width: 175px;
  margin: 0 auto 0 16px;
}
.flex-col2 .txt-haslogo .logo-intel img {
  width: 100%;
  height: auto;
}

.popup-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 12;
}

.popup {
  background: #fff;
  width: calc(100% - 40px);
  height: max-content;
  padding-bottom: 64px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 24px 24px 56px 24px;
  border-radius: 6px;
  z-index: 13;
}
.popup .pop-body {
  width: 100%;
  align-items: center;
  margin: 0 auto 32px;
}
.popup .pop-btn-area {
  display: flex;
  position: absolute;
  bottom: 24px;
  width: 100%;
}
.popup .btn-pop {
  display: flex;
  width: calc(100% - 48px);
  height: 32px;
  padding: 0px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--dark-navy);
  font-weight: bold;
  color: #fff;
}
.popup .btn-pop-sm {
  width: calc(50% - 30px);
}
.popup .btn-pop-sm + .btn-pop-sm {
  margin-left: 12px;
}

.popup.mobile-full {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0;
  background: #fff;
  border-radius: 0;
}
.popup.mobile-full .pop-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  background: #F9F9F9;
}
.popup.mobile-full .pop-body {
  padding: 20px;
  height: calc(100% - 120px);
  overflow-y: scroll;
}
.popup.mobile-full .title {
  font-size: 1.25rem;
  font-weight: bold;
}
.popup.mobile-full .btn-close {
  position: absolute;
  top: 10px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: url("../images/btn-close.png") no-repeat center center;
  background-size: 20px auto;
  text-indent: -1000px;
  white-space: nowrap;
  overflow: hidden;
}
.popup.mobile-full .pop-btn-area {
  left: 24px;
}

/* 스크롤 애니메이션 */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.scroll-animation {
  opacity: 0;
  transform: translateY(50px); /* 시작 위치 지정 */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.show {
  opacity: 1;
  transform: translateY(0); /* 최종 위치 지정 */
  animation: slide-up 0.5s forwards;
}

.additional-elements {
  height: max-content;
  /* 스크롤 가능한 높이를 위해 임의의 값 설정 */
}

.element {
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s, transform 0.8s;
  transform: translateY(100px);
  margin: 0 0 16px;
  padding: 32px 24px 24px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.element.shown {
  opacity: 1;
  transform: translateY(0);
}
.top-info-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  animation: slideUp 1.2s;
}
.top-info-box .box {
  width: calc(100% - 32px);
  margin: 0 auto 72px; /* 20240205 변경 */
  padding: 32px 24px 24px;
  background: #FFF;
  text-align: center;
}
.top-info-box .box .tit {
  margin: 20px 0 12px;
  padding: 2px;
  border-radius: 4px;
  background: #FFF0C2;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: -0.12px;
}
.top-info-box .img-area {
  padding-top: 160px;
}
.top-info-box .img-area.type01 {
  background: url("../images/soluition-top01.png") no-repeat center top;
  background-size: 100px auto;
  background-color: white;
  background-position: center 25%;
}
.top-info-box .img-area.type02 {
  background: url("../images/soluition-top02.png") no-repeat center top;
  background-size: 100px auto;
  background-color: white;
  background-position: center 25%;
}
.top-info-box .img-area.type03 {
  background: url("../images/soluition-top03.png") no-repeat center top;
  background-size: 100px auto;
  background-color: white;
  background-position: center 25%;
}
.top-info-box .img-area .fs-sm {
  display: block;
  font-size: 0.857rem;
  color: var(--gray1);
}
.top-info-box .img-area .fs-lg {
  display: block;
  font-weight: 700;
}
.top-info-box .box-cont {
  display: flex;
  flex-wrap: wrap;
  /*align-items: center;*/
  justify-content: center;
  padding: 12px;
  border-radius: 8px;
  background: #F9F9F9;
}
.top-info-box .box-cont span {
  display: inline-block;
  position: relative;
  margin: 6px 0;
  padding-right: 36px;
  font-size: 0.857rem;
}
.top-info-box .box-cont span::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  right: 8px;
  background: url("../images/ico-plus.png") no-repeat center right;
  background-size: 20px auto;
}
.top-info-box .box-cont span:last-child {
  padding-right: 0;
}
.top-info-box .box-cont span:last-child::after {
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  background: none;
}
@media screen and (min-width: 280px) and (max-width: 1440px) {
  /* Tablet and Mobile */
  .wrap.demo {
    /* 20231228 KSH */
    height: 100%;
    overflow-y: scroll;
  }
  header .header__content.bg {
    /* 20231228 KSH */
    background: #fff;
  }
  .main-item--solution .txt-area {
    /* 20240104 KSH */
    min-height: 80px;
    height: max-content;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
  }
  .main-item--solution .txt-area .pre-line {
    /* 20240104 KSH */
    height: 53px;
  }
  .swiper--solution .swiper-wrapper {
    /* 20231228 KSH */
    width: 75%;
    margin: 0 auto 30px;
  }
  .swiper--solution .swiper-slide {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 436px;
  }
  .btn-area-demo {
    /* 20231228 KSH */
    position: fixed;
    bottom: 0;
    background: #fff;
    z-index: 10;
  }
  .gnb {
    position: fixed;
    top: 0;
    right: -100%;
    width: 65%;
    height: 100vh;
    padding: 32px;
    margin: 0 auto;
    background: #fff;
    z-index: 12;
  }
  .gnb ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 72px;
  }
  .gnb ul li {
    margin-bottom: 24px;
  }
  .gnb ul li a {
    color: var(--gray1);
    font-weight: 700;
  }
  .gnb ul li a.on {
    position: relative;
    color: var(--dark-navy);
    font-weight: 700;
  }
  .gnb ul li a.on::after {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yellow);
  }
  .gnb .btn-b2b {
    position: absolute;
    right: 32px;
    bottom: 32px;
  }
  .gnb .btn-close {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 40px;
    height: 40px;
    background: url("../images/btn-close.png") no-repeat center center;
    background-size: 20px auto;
    text-indent: -1000px;
    white-space: nowrap;
    overflow: hidden;
  }
  .gnb--demo {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    height: 100vh;
    padding: 90px 20px 20px;
    background: #fff;
    z-index: 12;
  }
  .gnb--demo .depth01 {
    position: relative;
    margin-bottom: 10px;
    padding-left: 8px;
    color: var(--dark-navy);
    font-weight: 700;
  }
  .gnb--demo .depth01::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yellow);
  }
  .gnb--demo ul.depth02 {
    margin-top: 10px;
    margin-bottom: 36px;
  }
  .gnb--demo ul.depth02 li {
    width: 100%;
    padding: 10px 8px;
    margin-bottom: 8px;
  }
  .gnb--demo ul.depth02 li button {
    width: 100%;
    padding-bottom: 10px;
    color: #757575;
    text-align: left;
    background: #fff;
  }
  .gnb--demo ul.depth02 li button.on {
    border-bottom: 2px solid var(--dark-navy);
    font-weight: 700;
    color: var(--dark-navy);
  }
  .gnb--demo .btn-close {
    width: 24px;
    height: 24px;
  }
  .main-item .monitor {
    width: 75%;
    margin: 0 auto;
  }
  .main-item--visual .txt-area {
    width: 100%;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .main-item--visual .img-area {
    width: 100%;
  }
  .main-item--intro {
    padding: 40px 0;
  }
  .main-item--solution .br-mb {
    display: block;
  }
  .main-item--solution h2 {
    width: 100%;
    position: relative;
    text-align: center;
  }
  .main-item--solution .txt-area .fs-md {
    display: block;
  }
  .main-item--customer .txt-area {
    width: 100%;
  }
  .main-item--customer .form-area {
    padding-bottom: 48px;
  }
  .main-item--customer .form-area .input-area,
  .main-item--customer .form-area .text-area {
    width: 100%;
  }
  .main-item--customer .form-area .btn-area {
    position: relative;
    margin-top: 16px;
  }
  .btn-xlg {
    width: 100%;
    font-weight: 700;
  }
  .tab-lst {
    display: flex;
  }
  .tab-lst button {
    justify-content: center;
    font-size:1rem;
  }
  .solution__content .tab-sb-lst {
    padding: 0 16px;
  }
  .flex-col2 {
    display: flex;
    flex-direction: column;
  }
  /* .solution__item:nth-child(even) .flex-col2 {
    flex-direction: column-reverse; 20240125 KSH
  } */
  .theme-wrap .img-area {
    margin: 32px auto; /* 20231228 KSH */
  }
  /* .solution-wrap h2 {
  	font-size: 1.8rem;
  } 20240117 KSH */
  .solution__item h3 .fs-sm {
  	font-size: 1.15rem;
  }
  .solution__item h3 {
    font-size: 1.714rem;
  }
  /* HSH 20240126 */
  .table--common thead {
        border-top: 2px solid var(--dark-navy);
  }

  .table--common thead th {
    height: 52px;
  }
  .table--common tbody td {
    height: 48px;
  }

  /* Tablet and Mobile */
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  /* Only Mobile */
  /* .swiper--solution .swiper-slide video {
    width: 100% !important;
    max-width: auto;
  } */
  .content {
  	padding-top: 36px;
  }
  
  .logo img {
	width: 100px;
	height: auto;
  }
  .theme-wrap .tab-area {
    padding: 0 16px;
  }
  .theme-wrap .tab-area {
    padding: 0 16px;
  }
  .theme-wrap .img-area {
    width: 320px; /* 20231228 KSH */
    height: 568px; /* 20231228 KSH */
  }
  h2 {
    font-size: 1.429rem;
  }
  .solution__item h3 {
    font-size: 1.714rem;
    letter-spacing: -0.24px;
  }
  .solution__item h3 .fs-sm {
    font-size: 1.143rem;
  }
  .swiper--intro .swiper-slide .fs-xlg {
    font-size: 1.143rem;
  }
  .swiper--intro .swiper-slide .fs-md {
    font-size: 0.786rem;
  }
  .swiper-pagination span {
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 0.7rem;
  }
  .inner-pd {
    padding: 0 16px;
  }
  .drop-box {
    bottom: 20px;
    width: 75%;
  }
  
  footer {
    padding: 20px 0;
  }
  footer .footer-wrap {
    padding: 0 16px;
  }
  footer .footer__logo {
    width: 100%;
    margin-bottom: 12px;
    padding: 12px;
  }
  footer .footer__logo .logo-footer {
    width: 128px;
    height: 16px;
  }
  footer .copyright {
    width: 100%;
    padding: 8px 0 16px 0;
  }
  footer .copyright .br-mb {
    display: block;
  }
  footer .footer__sns .facebook,
  footer .footer__sns .naverpost {
    width: 24px;
    height: 24px;
    margin: 0 12px 0 0;
  }
  footer .footer__sns .youtube {
  	width: 24px;
    height: 24px;
    margin: 0;
  }
  
  /* .main-item--visual {
    background: url("../images/mb-main-bg.png") no-repeat center top;
    background-size: 100% auto;
  } 모바일퍼스트 */
  .btn-family {
  	width: 100px;
	border-bottom: none;
  }
  .main-item--visual {
    padding-bottom: 90px;
    background: #f4f4f4 url("../images/bg-horizon.png") repeat-x center bottom 17%;
    background-size: 1050px auto;
  }
  .main-item--customer .txt-area {
    padding: 24px 16px;
    font-size: 1.2rem;
  }
  .main-item--customer .form-area > .label,
  .main-item--customer .fieldset {
    padding: 0 16px;
  }
  
  .main-item--visual .txt-area {
    padding: 100px 0 40px;
  }
  
  .btn-xlg {
    height: 44px;
    font-size: 1.25rem;
  }
  /* .intro-visual {
    margin-top: 16px; 20240117 KSH
  } */
  .under-img-txt {
    height: 28px;
    padding: 8px 24px;
    margin-top:10px;
    font-size: 0.8rem;
  }
  .mb-mg {
    display: block;
    margin: 16px 0;
  }
  .mobile-scroll {
    overflow-x: scroll;
    margin-top: 8px;
    padding-left: 20px;
    scrollbar-width: none; 
  }
  .mobile-scroll::-webkit-scrollbar {
	display:none;
  }
  .main-item--solution .mobile-scroll {
    padding-left: 0; 
  }
  .btn-main-scroll {
    display: none;
  }
  .tab-lst {
    width: max-content;
    margin: auto;
    margin-top: 16px;
  }
  .tab-lst button {
    width: max-content;
    height: 38px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
	margin-right: 8px;
  }
  .tab-panel02 {
    width: 100%;
    /* margin-bottom: 5rem; 20231229 KSH */
    margin-bottom: 2rem;
    text-align: center;
    padding: 32px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  }

  .tab-panel02.sol-sco {
    /* 20240104 KSH */
    width: auto;
    height: 700px;
  }
  .tab-panel02.sol-sco img {
    /* 20240104 KSH */
    width: auto;
    height: 100%;
  }
  
  .tab-panel02 img.m-pos {
    /* max-width: 276px; */
    max-width: 100%;
    max-height: 500px;
    width: auto;
  }
  
  .flex-col2 .txt-haslogo .logo-intel {
   width: 109px;
   margin: 0 auto 0 0;
  }
  .flex-col2 .txt-haslogo .logo-intel img {
    width: 100%;
    height: auto;
  }
 
  .flex-col2 .txt-haslogo .txt-down .dl {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 130px);
	font-weight: 700;
  }
  /* HSH 20240126 */
  .table--common thead {
      border-top: 2px solid var(--dark-navy);
  }
  .table--common thead th {
    height: 52px;
  }
  .table--common tbody td {
    height: 40px;
  }

  .intro-wrap .intro__content {
    padding: 0 24px;
  }
  .intro-wrap .intro__item.img01 .tit {
    background-size: 100px auto;
  }
  .intro-wrap .intro__item.img02 .tit {
    background-size: 100px auto;
  }
  .intro-wrap .intro__item.img03 .tit {
    background-size: 100px auto;
  }
  .intro-wrap .intro__item.img04 .tit {
    background-size: 100px auto;
  }

  .intro-wrap .intro__item .tit {
      padding-top: 125px;
  }

  .chk-list span:nth-child(2) {
      padding-left: 24px;
      font-size: 12px; 
      font-weight: 500;
      color: #757575;
      display: block;

  }
  .intro-wrap h3 {
      padding:0 16px;
  }
 
  .intro-wrap h4 {
      margin-top: 24px;
      font-size: 1rem;
  }

  .element {
      padding: 24px 16px 16px;
  }

  .partner--center{
      padding: 0 24px;
  }

  partner--slider {
  	margin-top: 32px;
  }
  .top-info-box .box {
	padding: 16px;
	margin: 0 auto 16px;
  	border-radius: 8px;
  	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  }
  .top-info-box .box-cont {
      align-items: center;
  }
  .top-info-box .box-cont span {
      font-weight:500;
  }
 
  .top-info-box .img-area {
    padding-top: 110px;
  }

  .intro-wrap h3,
  .intro-wrap h2{
      font-size: 16px;
  }

  .intro-wrap .intro__item .tit span{
      font-size: 1rem;
  }

}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  /* Only Tablet */
  footer .ft-red {margin-left: 12px;}
  .theme-wrap .img-area {
    width: 522px; /* 20231228 KSH */
    height: 928px; /* 20231228 KSH */
  }
  html {
    font-size: 14px;
  }
  .inner-pd {
    padding: 0 52px;
  }
  .drop-box {
    width: 100%;
  }
  .fs-2xlg,
  h2 {
    font-size: 2rem;
  }
  .solution-wrap h2 {
    font-size: 1.714rem;
  }
  .solution-wrap .h2-txt,
  .solution__item .h3-txt {
      font-size: 1rem;
  }
  .main-item__content .fs-2xlg,
  .main-item__content h2 {
    font-size: 2.25rem;
    letter-spacing: -0.3px;
  }
  .intro-visual .fs-xlg {
    font-size: 1.5rem;
    letter-spacing: -0.24px;
    line-height: 1.4em;
  }
  .main-item--intro .main-item__content > .fs-2xlg {
    margin-bottom: 40px;
  }
  header .header__content {
    height: 60px; /* 20240125 KSH */
  }
  .logo {
    width: 200px;
    height: 48px;
    margin-top: 5px;
  }
  .content {
    margin-top: 72px;
  }
  .main-item--visual {
    /* Tablet */
    padding-bottom: 165px;
    background: #f4f4f4 url("../images/bg-horizon.png") repeat-x center bottom 14%;
    background-size: 1500px auto;
  }
  .main-item--customer .txt-area {
    padding: 48px 2rem;
    font-size: 1.7rem;
    white-space:normal;
  }
  .main-item--customer .form-area > .label,
  .main-item--customer .fieldset {
    padding: 0 32px;
  }
  .main-item--customer .fieldset {
    height: max-content;
  }
  .main-item--visual .txt-area {
    padding: 152px 0 80px;
  }
  .swiper-pagination span {
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 0.7rem;
  }
  .btn-xlg {
    height: 44px;
    font-size: 1rem;
  }
  .intro-visual img {
    width: 75%;
  }
  .element {
    width: calc(50% - 16px);
    margin: 0 0 32px;
  }
  .under-img-txt {
    height: 40px;
    padding: 5px 24px;
    margin-top: 1rem;
    font-size: 0.89rem;
  }
  .mobile-scroll {
    overflow-x: scroll;
    margin-top: 12px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .tab-lst {
    justify-content: center;
    margin-bottom: 32px; /* 메인 주요솔루션 탭 아래 여백 */
  }
  .tab-lst button {
    padding: 4px 16px;
    margin: 0 4px;
    font-size: 1.25rem;
    height: 48px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  }
  .btn-main-scroll {
    bottom: 40px;
    width: 86px;
    height: 54px;
    margin-left: -43px;
    background: url(../images/arr-scr-down.png) no-repeat center bottom;
    background-size: 40px auto;
    font-size: 0.875rem;
  }
  .tab-sb-lst,
  .table-wrap {
    padding: 0 32px;
  }
  .tab-sb-lst .tab-sb {
    font-size: 1rem;
  }
  .top-info-box {
    flex-direction: row;
    justify-content: space-between;
    margin: 0 16px;
  }
  .top-info-box .box {
    margin: 0 0 16px 0;
  }
  .top-info-box .box:nth-child(1),
  .top-info-box .box:nth-child(2),
  .top-info-box .box:nth-child(3),
  .top-info-box .box:nth-child(4) {
    width: calc((100% -  8px) / 3);
  }
  footer .footer-wrap {
    width: 100%;
    padding: 0 32px;
  }
  footer .footer__logo {
    display: flex;
    /* width: 68.23%; 20231228 */
    width: calc(100% - 160px);
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  footer .footer__logo .logo-footer {
    width: 192px;
    height: 24px;
  }
  footer .copyright {
    width: calc(100% - 160px);
  }
  footer .footer__sns .facebook,
  footer .footer__sns .naverpost,
  footer .footer__sns .youtube {
    width: 28px;
    height: 28px;
  }
  footer .footer__badge {
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 32px;
    width: 130px;
    height: 130px;
  }
  footer .footer__badge img {
    width: 65%;
    height: auto;
    margin-left:25px;
  }
  footer .footer__badge .slctbox-wrap {
    width: 100%;
    margin-bottom: 16px;
  }
  .ft-red {
    display: inline-block;
    margin-left: 32px;
    vertical-align: middle;
  }
  .btn-sm {
    width: 120px;
    height: 32px;
    font-size: 1rem;
    font-weight: 700;
  }
  .agree-area .ft-red {
    margin-left: 0;
  }
  .agree-txt {
    width: calc(100% - 64px);
  }
  .agree-txt .ft-red {
    margin-left: 0;
  }
  .agree-txt .tit, .agree-txt .txt, .agree-txt .table-agree {
    font-size: 1.25rem;
  }
  .agree-txt .subtxt {
    font-size: 1rem;
  }
  .apply__label {
    font-size: 1.25rem;
  }
  /* Swiper */
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper--intro .swiper-button-prev,
  .swiper--intro .swiper-button-next {
    top: 45%;
    width: 48px;
    height: 48px;
    text-indent: -1000px;
    white-space: nowrap;
    overflow: hidden;
  }
  .swiper--intro .swiper-button-prev {
    left: 32px;
    background: url("../images/arr-prev-lg.png") no-repeat center center;
    background-size: 100% auto;
  }
  .swiper--intro .swiper-button-next {
    right: 32px;
    background: url("../images/arr-next-lg.png") no-repeat center center;
    background-size: 100% auto;
  }
  /* .swiper--intro .swiper-slide .fs-xlg {
    font-size: 1.3rem!important;
  } */
  .swiper--solution .swiper-slide {
    width: 100%;
  }
  .swiper--solution .swiper-button-prev,
  .swiper--solution .swiper-button-next {
    top: 45%;
  }
  .swiper--solution .swiper-button-prev {
    left: 40px;
  }
  .swiper--solution .swiper-button-next {
    right: 40px;
  }
  .checkbox-lst input + label {
    height: 36px;
    padding: 0 16px 0 38px;
  }
  .checkbox-lst input + label:before {
    top: 6px;
    width: 24px;
    height: 24px;
  }
  .checkbox-lst input:checked + label:before {
    top: 6px;
    width: 24px;
    height: 24px;
    background: #fff url("../images/checkmark-b.png") no-repeat center center;
    background-size: 16px auto;
  }
  .bdr-box-lst {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
    margin-bottom: 72px;
  }
  .bdr-box-lst .bdr-box {
    height: 100%;
  }
  .bdr-box-lst > :nth-child(-n+3) {
    grid-column: span 2;
  }
  .bdr-box-lst > :nth-child(n+4) {
    grid-column: span 3;
  }
  .tab-panel02 {
    width: 100%;
    /* height: 630px; */ /* 20240206 변경 */
    /* margin: 32px 0 4.25rem; 20231229 KSH */
    margin: 32px 0;
    text-align: center;

    padding: 32px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  }
  .tab-panel02 img {
    width: auto;
    height: 100%;
  }
  .ip-file {
    height: 56px;
    padding: 0 16px;
  }
  .btn-file-sm {
    height: 56px;
    padding: 0 16px;
  }
  .btn-xlg {
    height: 56px;
  }
  .btn-download {
    display: flex;
    align-items: center;
    width: max-content;
    height: 2.5rem;
    margin: 1.25rem auto;
    padding: 1.25rem 3rem 1.25rem 1.25rem;
    border-radius: 6px;
    background: var(--dark-navy) url("../images/ico-download-w.png") no-repeat right 1.25rem center;
    background-size: 1.25rem auto;
    font-weight: 700;
    color: #fff;
  }
  .popup {
    width: 62.5%;
  }
  .popup .btn-pop {
    height: 40px;
  }
  .popup.mobile-full {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 0;
    background: #fff;
    border-radius: 0;
  }
  .popup.mobile-full .pop-header {
    height: 100px;
  }
  .popup.mobile-full .btn-close {
    top: 30px;
  }
  .theme-wrap .txt-area {
    width: calc(100% - 64px);
  }
  /* HSH 20240126 */
  .table--common thead {
      border-top: 2px solid var(--dark-navy);
  }

  .intro-wrap .intro__content {
      padding: 0 52px;
  }

  .intro-wrap .intro__item.img01 .tit {
    background-size: 100px auto;
  }
  .intro-wrap .intro__item.img02 .tit {
    background-size: 100px auto;
  }
  .intro-wrap .intro__item.img03 .tit {
    background-size: 100px auto;
  }
  .intro-wrap .intro__item.img04 .tit {
    background-size: 100px auto;
  }

  .intro-wrap .intro__item .tit {
    padding-top: 125px;
  }

  .intro-wrap .intro__content {
    margin-top: 3.15rem;
  }

  .chk-list span:nth-child(2) {
      padding-left: 24px;
      font-size: 12px; 
      font-weight: 500;
      color: #757575;
      display: block;
  }

  .intro-wrap h3 {
      padding:0 32px;
  }


  .intro-wrap h4 {
      margin-top: 32px;
      font-size: 1.15rem;
  }

  .element {
      padding: 32px 24px 24px;
  }

  .partner--center {
      padding: 0 52px;
      margin-top: 44px;
  }
  
  .top-info-box .box {
      padding: 16px
  }
  .top-info-box .box-cont {
      align-items: center;
      min-height: 100px;
  }
  .top-info-box .box-cont span {
      font-weight:500;
  }
 
  .top-info-box .img-area {
    padding-top: 110px;
  }
  .tab-sb-lst {
    margin:104px 0 0;
  }
  .tab-sb {
    min-width: 120px;
  }
  .solution__item {
      margin-top:5rem;
      margin-bottom: 2.12rem;
  }
  .flex-col2 .gray-box-lst {
      margin-top: 20px;
      padding: 50px 16px;
  }
  .flex-col2 .txt-haslogo .txt-up {
      font-size: 1rem;
      white-space: normal;
  }
  .flex-col2 .txt-haslogo .txt-down .dl {
      font-size: 1.14rem;
  }
  .tab-sb02 {
      height: 2.85rem;
      margin: 0 4px 6px;
  }
  .chk-list li {
      margin-bottom: 12px; 
  }

  .intro-wrap .intro__item .tit span{
      font-size: 1rem;
  }

  .table--common thead th,
  .table--common tbody td {
    font-size: 16px;
  }

  .partner--center .banner {
    flex-direction: row;
    justify-content: space-between;
  }

  .partner--center .banner li{
    width: calc(50% - 8px);
    margin-bottom: 8px;
  }

}
@media screen and (min-width: 1441px) {
  /* Desktop */
  html {
    font-size: 20px;
  }
  .br-mb {
    display: inline-block;
  }
  .fs-2xsm {
    font-size: 0.7rem;
  }
  .fs-xsm {
    font-size: 0.8rem;
  }
  .fs-md {
    font-size: 1.0rem;
  }
  .fs-xlg {
    font-size: 1.5rem;
    line-height: 1.3em;
  }
  .intro-visual .fl-txt .fs-xlg {
    font-size: 1.6rem;
    line-height: 140%;
  }
  .intro-visual .fl-txt  {
    z-index: 12;
    cursor: pointer;
  }

  .intro-visual {
    position: relative;
  }
  .intro-visual:hover .btn-main-more {
    text-indent: 0;
    width: 117px;
    font-size: 16px;
    color: #fff;
    background: url("../images/ico-plus-w.png") no-repeat right 10px center;
    background-size: 16px auto;
    border-color:#fff;
  }
  .intro-visual:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 27px);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 11;
    cursor: pointer;
  }
  .fs-2xlg {
    font-size: 2.4rem;
  }
  body,
  button,
  input,
  select,
  textarea {
    /* font-size: 0.8rem; */
    resize: none; /*신현섭 1227 크기 고정 되도록 수정 */
  }
  .flex.col02 {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.17%; /* 20240126 KSH */
    max-width: 1440px; 
    margin: 0 auto;
  }
  .element {
    width: calc(50% - 16px);
    margin: 0 0 32px;
  }
  .intro-wrap .scroll-animation,
  .intro-wrap .intro__content {
    width: 100%;
    max-width: 1440px; 
    margin: 0 auto 72px;
  }
  .intro-wrap .scroll-animation .inner-pd {
    width: 100%;
  }
  .intro-wrap .intro__content {
    padding: 0 3.8%;
  }
  .intro-wrap .intro__item .tit span {
    min-height: 42px;
    padding: 7px 10px;
    /*font-size: 1rem;*/
  }

  .flex.col02 > * {
    width: calc(50% - 18px); 
    margin: 0;
  }
  header {
    position: fixed;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #E9E9E9;
  }
  header .header__content {
    position: relative;
    /* width: 75%; 
    /* height: 100px; 20240125 KSH */
    max-width: 1920px; /* 20240117 KSH */
    width: calc(100% - 200px);
    height: 70px;
    margin: 0 auto;
    padding: 0;
  }

    header .header__content h1 {
        width: max-content;
        position: static;
    }

    header .header__content .language {
        position: absolute;
        /* top: 43px; */
        /* right: 210px; 20240129 KSH */
        right: 160px;
        padding-right: 40px;
        background: url("../images/icon-lang.png") no-repeat right center;
        background-size: 32px auto;
        font-size: 0.8rem;
    }
  header .header__content.b2b .language {
    right: 0;
  }
  header.main-header {
    height: 90px;
    border-bottom: none;
  }
  header.demo-header {
    display: none;
  }
  .content {
    /* margin-top: 130px;  20240115 헤더 높이 100px로 수정 */
    /* margin-top: 100px;  20240125 헤더 높이 60px로 수정*/
    margin-top: 70px; 
  }
  .bg-gray::before {
    display: none;
  }
  .btn-hamburger {
    display: none;
  }
  /* .logo {
    width: 133px;
    height: 32px;
    margin: 0 auto;
  } 20240125 KSH */
  .gnb {
    position: fixed;
    /* width: 40%; 
    margin-left: -22%; 20240117 KSH */
    /* top: 38px;
    width: 580px; 
    font-size:0.9rem; 20240125 KSH */
    top: 23px; 
    left: 50%;
    width: 580px; 
    margin-left: -290px;
    z-index: 12;
    font-size:0.8rem;
  }
  .gnb ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
  }
  .gnb ul li {
    margin: 0 10px;
  }
  .gnb ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: var(--gray1);
  }
  .gnb ul li a.on {
    position: relative;
    color: var(--dark-navy);
    font-weight: 700;
  }
  .gnb ul li a.on::after {
    content: "";
    position: absolute;
    top: 0;
    left: -14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--yellow);
  }
  .lang-text {
    font-size: 0.8rem;
  }
  .gnb--demo {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 368px;
    height: 80%;
    overflow-y: auto;
    padding: 40px 72px 0 16px;
    background: #fff;
    z-index: 10;
  }
  .gnb--demo .depth01 {
    position: relative;
    margin-bottom: 10px;
    padding-left: 8px;
    color: var(--gray1);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .gnb--demo .depth01::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yellow);
  }
  .gnb--demo ul.depth02 {
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 24px;
  }
  .gnb--demo ul.depth02 li {
    width: 100%;
    /* padding: 5px 8px; */
    margin-bottom: 8px;
  }
  .gnb--demo ul.depth02 li button {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #C1C3C2;
    font-size: 0.7rem; /* 20231229 KSH*/
    text-align: left;
    background: #fff;
    color: var(--gray1);
  }
  .gnb--demo ul.depth02 li button.on {
    border: 1px solid var(--dark-navy);
    font-weight: 700;
    color: var(--dark-navy);
  }
  .gnb--demo .btn-close {
    width: 24px;
    height: 24px;
  }
  .fix-pagination {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 5.2%; 
    top: calc(50% - 80px);
    z-index: 11;
  }
  .fix-pagination button {
    text-indent: -1000px;
    white-space: nowrap;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background: url("../images/btn-main-navi.png") no-repeat center center;
    background-size: 100% auto;
  }
  .fix-pagination button.on {
    background: url("../images/btn-main-navi-on.png") no-repeat center center;
    background-size: 100% auto;
  }
  footer .footer-wrap {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px 0 16px;
  }
  footer .footer__logo {
    display: flex;
    align-items: center;
    width: calc(100% - 180px);
    /* margin-bottom: 20px;
    padding-bottom: 20px; 20240126 KSH */
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
  footer .footer__logo .logo-footer {
    width: 160px;
    height: 20px; /* 20240126 KSH */
  }
  footer .copyright {
    width: calc(100% - 180px);
  }
  footer .footer__sns {
    top: 0;
  }
  footer .footer__sns .facebook,
  footer .footer__sns .naverpost,
  footer .footer__sns .youtube {
    display: inline-block;
    width: 28px;
    height: 28px;
    text-indent: -1000px;
    white-space: nowrap;
    overflow: hidden;
  }
  footer .footer__badge {
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
    height: 130px;
	margin-right: 32px;
  }
  footer .footer__badge img {
    width: 92px;
    height: auto;
    margin: 0 auto;
    margin-top: 0.5rem;
  }
  footer .footer__badge .slctbox-wrap {
    width: 100%;
    margin-bottom: 16px;
  }
  footer .ft-red {
    display: inline-block;
    height: 25px;
    margin-left: 24px;
    vertical-align: middle;
    line-height: 25px;
  }
  /* Input */
  .btn {
    border-radius: 8px;
  }
  .btn-sm {
    width: 140px;
    height: 48px;
    font-size: 1.0rem;
  }
  .btn-xlg {
    width: 100%;
    height: 88px;
    font-size: 1.4rem;
    font-weight: 700;
  }
  .only-mobile {
    display: none;
  }
  .only-desktop {
    display: block;
  }
  .main-item {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  .main-item__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 80%;
    max-width: 1440px; /* 20240117 KSH */
    height: max-content;
    margin: auto;
    padding-top: 0;
    z-index: 7;
    /* padding-bottom: 100px; 20240115 KSH */
  }
	.main-item__content.sub {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 75%;
    max-width: 1440px; /* 20240117 KSH */
    height: max-content;
    /* margin: 48px 280px 48px 280px; */
    margin: 0 auto;
    padding-top: 0;
    z-index: 7;
  }
  
  /* .main-item--visual {
    background: #f4f4f4 url("../images/bg-horizon.png") repeat-x center bottom 17%;
    background-size: 1920px auto;
  } */
  .main-item--visual {
    position: relative;
    background: #f4f4f4;
  }
  .main-item--visual::after {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -210px;
    width: 100%;
    height: 540px;
    background: url("../images/bg-horizon.png") repeat-x center bottom;
    background-size: 1920px auto;
    z-index: 5;
  }
  .main-item--visual .txt-area {
    /* width: 52%; 20240119 KSH */
    width: calc(100% - 650px);
  }
  .main-item--visual .img-area {
    /* width: 43%; 20240119 KSH */
    width: 650px;
  }
  .main-item--intro {
    background: #fff;
  }
  .main-item--intro .main-item__content {
    width: 90%;
  }
  .main-item--intro .main-item__content .fs-2xlg{
    margin-bottom: -28px;
    letter-spacing: 0.5px;
  }
  .main-item--solution {
    background: linear-gradient(90deg, #F9F9F9 30%, #fff 30%);
  }
  .main-item--solution h2 {
    position: absolute;
    /* top: 15.185vh;
    font-size: 2.2rem; */
    top: 30%; /* 20240205 변경 */
    margin-top: -170px;
    font-size: 1.6rem;; /* 20240205 변경 */
    left: 0;
  }
  .main-item--solution .main-item__content .mobile-scroll {
    width: 26%; /* 20240117 KSH */
  }
  .main-item--solution .tab-panel {
    width: 74%;
  }
  .main-item--solution .txt-area,
  .main-item--solution .btn-area {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-item--solution .txt-area {
    height: 80px;
    padding: 10px 0;
  }
  .main-item--solution .txt-area .fs-md {
    margin-left: 24px;
  }
  /* .main-item--solution .btn-area {
    margin-top: 40px; 20240115 KSH
  } */
  .main-item--solution .tab-lst {
    width: 100%;
    margin-top: -5vh;
  }
  .main-item--solution .tab-lst button {
    width: 100%;
    height: 48px;
    padding: 8px 24px;
    font-size: 1.0em; /* 20240205 변경 */
    text-align: left;
  }
  .main-item--solution .tab-lst button .fs-2xsm {
    display: block;
    margin-right: 20px;
  }
  .main-item--solution .tab-lst button.on {
    background: var(--yellow);
    color: var(--dark-navy);
  }
  .main-item--customer.sub {
    display: flex;
    align-items: center;
    /* height: 510px; */
  }
  .main-item--customer.sub .main-item__content {
    position: relative;
    top: auto;
  }
  .main-item--customer {
    height: calc(100vh - 220px);
  }
  .main-item--customer .txt-area {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -0.44px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    padding-left: 16px;
  }
  .main-item--customer .txt-area,
  .main-item--customer .form-area {
    width: 50%;
  }
  .main-item--customer .form-area {
    padding-right: 48px;
  }
  .main-item--customer .form-area .label {
    font-size: 0.8rem;
  }
  .main-item--customer .form-area .fieldset {
    position: relative;
    margin-top: 24px;
  }
  .main-item--customer .form-area .fieldset .label {
    position: absolute;
    left: 10px;
    z-index: 6;
  }
  .main-item--customer .form-area .fieldset .ip-trans {
    width: 100%;
    height: 100%;
    padding-left: 32%;
    font-size: 0.7rem;
  }
  .main-item--customer .form-area .fieldset .ip-trans:focus {
    border: 1px solid var(--dark-navy);
  }
  .main-item--customer .form-area .input-area,
  .main-item--customer .form-area .text-area {
    width: calc(100% - 176px);
  }
  .main-item--customer .form-area .ip-box {
    width: calc(50% - 6px);
    height: 44px;
    margin-bottom: 12px;
  }
  .main-item--customer .form-area .text-area {
    display: block;
    position: relative;
    background: #fff;
  }
  .main-item--customer .form-area .text-area textarea {
    width: 100%;
    font-size: 0.7rem;
    resize: none; /*신현섭 1227 크기 고정 되도록 수정 */
  }
  .main-item--customer .form-area .ip-trans::placeholder {
    font-size: 0.7rem;
    vertical-align: middle;
  }
  .main-item--customer .form-area .btn-area {
    position: absolute;
    top: 0;
    right: 0;
  }
  .main-item--customer .form-area .btn-xlg {
    width: 160px;
    height: 272px;
    font-size: 1.2rem;
    font-weight: 500;
  }
  .btn-floating {
    bottom: 100px;
    right: 100px;
    width: 56px; /* 20240205 변경 */
    height: 56px; /* 20240205 변경 */
    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.25)); /* 20240205 변경 */
  }
  .btn-main-scroll {
    /* bottom: 100px; 20240117 KSH */
    bottom: 3.2rem;
    width: 100px;
    height: 50px; /*20240223 125%일때 스크롤다운 잘리는 현상 수정*/
    margin-left: -50px;
    font-size: 0.7rem;
  }
  .intro-visual img {
    width: auto;
    height: 54.074vh;
    margin: 0 auto;
  }
  .intro-visual .fs-xlg {
    line-height: 1.2em;
  }
  .under-img-txt {
    height: 40px;
    padding: 8px 24px;
    margin-top: 30px;
    font-size: 0.8rem;    
  }
  .custom-chkbox input[type=checkbox] + label {
    font-size: 0.8rem;
  }

  .radio-lst input + label,
  .checkbox-lst.type02 input + label {
		font-size: 0.8rem;
	}
  /* Swiper */
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  .swiper--intro {
    width: 100%;
    height: 57.074vh;
    margin-top: 72px;
    animation: slide-up 2s ease-in-out forwards;
  }
  .swiper--intro .swiper-slide {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .swiper--intro .swiper-button-prev,
  .swiper--intro .swiper-button-next {
    top: 45%;
    width: 56px;
    height: 56px;
  }
  .swiper--intro .swiper-button-prev {
    left: 50%;
    margin-left: -470px;
    background: url("../images/arr-prev-lg.png") no-repeat center center;
    background-size: 100% auto;
  }
  .swiper--intro .swiper-button-next {
    right: 50%;
    margin-right: -470px;
    background: url("../images/arr-next-lg.png") no-repeat center center;
    background-size: 100% auto;
  }
  .swiper--solution {
    height: 487px;
  }
  .swiper--solution .swiper-slide {
    width: 100%;
/*  height: 49.296vh;*/
    text-align: center;
    margin-top: 30px;
  }
  .swiper--solution .swiper-slide img {
    width: auto;
    height: 100%;
    margin: 0 auto;
    margin-top: 30px;
  }
  .swiper--solution .swiper-button-prev,
  .swiper--solution .swiper-button-next {
    top: 50%;
    width: 56px;
    height: 56px;
  }
  .swiper--solution .swiper-button-prev {
    left: 80px;
  }
  .swiper--solution .swiper-button-next {
    right: 80px;
  }
  .checkbox-lst {
    margin-top: 8px;
  }
  .form-area .checkbox-lst .chk-item {
    margin-right: 0;
  }
  .checkbox-lst input + label {
    height: 40px;
    padding: 0 16px 0 44px;
    font-size: 0.8rem;
  }
  .checkbox-lst input + label:before {
    top: 8px;
    width: 24px;
    height: 24px;
  }
  .checkbox-lst input:checked + label:before {
    top: 8px;
    width: 24px;
    height: 24px;
    background: #fff url("../images/checkmark-b.png") no-repeat center center;
    background-size: 16px auto;
  }
  
  .inner-pd {
    /* width: 75%; 1920px; 20240130 HSH DESIGN2.0 */
    /* max-width; 1920px; 20240130 HSH DESIGN2.0 */
    max-width: 1440px; /* 20240118 KSH */
    padding: 0 2.63%; /* 20240126 KSH */
  }
  .inner-pd.h2-hasback{
      padding: 0 12.5%; /* 20240126 KSH */
  }
  .intro-wrap {
    /* padding-top: 126px; 20240124 KSH */
    /* padding-top: 100px; 20240126*/
    /* padding-top: 2.4rem; 2.4rem; 20240130 HSH DESIGN2.0 */
    padding-top: 4.8rem;
    margin-bottom: 184px;
    background: url("../images/bg-intro.png") no-repeat center 1050px;
  }
  .intro-wrap h2 {
    /* font-size: 2.2rem; 20240118 KSH */
    /* font-size: 1.8rem; 20240130 HSH DESIGN2.0 */
    font-size: 1.6rem;
    line-height: 1.2em;
    letter-spacing: -0.32px;
  }
  .intro-wrap h3.center {
    text-align: center;
  }
  .intro-wrap h3 {
    /* width: 75%; 1920px; 20240130 HSH DESIGN2.0 */
    /* max-width; 1920px; 20240130 HSH DESIGN2.0 */
    width: 100%;
    max-width: 1440px;
    /* margin: 6rem auto 3.6rem; 20240130 HSH DESIGN2.0 */
    margin: 6rem auto 3.6rem;
    /* margin: 10rem auto 2.4rem; 20240126 KSH */
    /* font-size: 2.2rem; 20240118 KSH */
    /* font-size: 1.8rem; 20240130 HSH DESIGN2.0 */
    font-size: 1.6rem;
    text-align: left;
  }
  
  /* .box-gray {
    height: auto;
    padding: 0;
    background: none;
  } 20240124 KSH */
  .chk-list li {
    margin-bottom: 12px;
  }
  .chk-list .chk-bold {
    padding-left: 35px;
    background: url(../images/checkmark-c.png) no-repeat left center;
    background-size: 22px auto;
    font-size: 16px; /* 20240124 KSH */
    font-weight: 700; 
  }
  .chk-list span:nth-child(2) {
    padding-left: 35px;
    font-size: 14px;
    font-weight: 400; 
  }
  .apply-wrap .h2-wrap {
    width: 75%;
    max-width: 1920px;
  }
  .apply-wrap h2 {
    height: 20rem;
    padding-top: 2.4rem;
    /* font-size: 2.8rem; 20240115 */
    font-size: 1.8rem;
  }
  .apply-wrap .btn-pageback {
    width: 56px;
    height: 56px;
    margin-right: 20px;
    margin-top: 2.4rem;
    background: url("../images/arr-prev-lg.png") no-repeat center center;
    background-size: 48px auto;
  }
  .apply-wrap .h3-hasdot {
    padding-left: 20px;
  }
  .apply-wrap .h3-hasdot::after {
    width: 10px;
    height: 10px;
  }
  .apply__content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
  .apply__content .btn-area {
    padding: 0;
  }
  .apply__content .btn-area .btn-xlg {
    width: 220px;
    height: 48px;
    font-size: 1rem;
  }
  .bdr-box-lst {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    gap: 32px;
    margin-bottom: 108px; /* 20240129 KSH */
    padding: 0 40px; /* 20240129 KSH */
  }
  .bdr-box-lst .bdr-box {
    height: 100%;
    padding: 32px;
  }
  .bdr-box-lst > :nth-child(-n+3) {
    grid-column: span 2;
  }
  .bdr-box-lst > :nth-child(n+4) {
    grid-column: span 3;
  }
  .ip-row,
  .tab-sb-lst,
  .table-wrap {
    padding: 0;
  }
  .solution-wrap {
    background: url("../images/bg-intro.png") no-repeat center 105px; /* 20240124 KSH */
    /* background-size: 100% auto; */
  }
  .solution-wrap h2 {
    margin-top: 4.8rem;
    font-size: 1.6rem;
  }
  .apply-wrap .h2-txt,
  .solution-wrap .h2-txt {
    font-size: 1rem;
    font-weight: 400;
  }
  .solution-wrap .h2-txt {
    margin-top: 0.6rem;
    margin-bottom: 1.6rem;
  }
  .tab-sb {
    height: 60px;
    border-radius: 40px;
    /* font-size: 1.2rem; 20240119 KSH */
    font-size: 1.0rem; 
    font-weight: 500;
  }
  .solution__content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 3.8%;
  }
  .solution__content .tab-panel {
	/* padding: 0 32px 0 32px; */
	padding: 0;
  }
  .solution__content .tab-sb-lst {
    /* margin-top: 112px; 20240124 KSH */
    margin-top: 240px;
    /* padding-left: 32px;
    padding-right: 32px; */
    justify-content: space-between;
  }
  .solution__content .tab-sb-lst .tab-sb {
    width: 18.75%;
  }
  .solution__item h3 {
    /* 솔루션 */
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    margin-bottom:4px;
  }
  .solution__item h3 .fs-sm {
    display: block;
    font-size: 0.8rem;
    margin-bottom:4px;
  }
  .solution__item .h3-txt {
    /* margin-top: 1.6rem; */
    margin-top: 20px; /* 20240129 KSH */
    margin-bottom: 0;
    font-size: 0.8rem; /* 20240125 KSH */
    line-height: 140%;
    white-space: pre-line; /* 20240119 KSH */
    color: var(--dark-nav);
  }
  .flex-col2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .flex-col2 .text-area,
  .flex-col2 .visual-area {
    width: calc(50% - 20px);
    /* min-height: 580px; 20231228 KSH */
    /* min-height: 650px; 20231229 KSH */
  }
  .flex-col2 .text-area,
  .flex-col2 .visual-area {
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
  }
  .flex-col2 .text-area {
    position: relative;
    margin-bottom: 130px;  /* 20240118 KSH */
    padding: 32px; /* 20240129 KSH */
    border-radius: 8px;
    border: 1px solid #E9E9E9;
  }
  .flex-col2 .text-area .chk-list,
  .flex-col2 .text-area .txt-haslogo {
    bottom: 2.6rem;
    left: 3.2rem;
  }
  .ip-row.has-scroll .apply__label {
    padding: 0;
  }
  .wrap.demo {
    /* height: 100%; 20231229 KSH */
    height: 100%;
  }
  .content.demo {
    /* width: 82.3%; 20231229 KSH */
    width: calc(100% - 408px);
    display: flex;
    align-items: center;
    margin: auto 0;
  }
  .theme-wrap.col {
    flex-direction: column;
  }
  .theme-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 75%;
    margin: 0 auto;
    padding-bottom: 0;
  }
  .theme-wrap .mov-area {
    /* height: 822px; 20231229 KSH */
    height: 810px; /* 20231229 KSH */
    width: auto;
  }
  .theme-wrap .mov-area.backoffice {
    /* 20231229 */
    /* height: 520px; 20240119 KSH */
    height: 657px;
  }
  .theme-wrap .mov-area.m-backoffice {
    /* 20231229 KSH */
    height: 620px; 
  }
  .theme-wrap .mov-area.pos {
    /* 20231229 KSH */
    height: 700px; 
  }
  .theme-wrap .mov-area img {
    height: 100%;
    width: auto;
  }
  .theme-wrap .info-txt {
    width: 100%;
    margin-top: 8px;
    text-align: left;
  }
  .theme-wrap .tab-area.fix-tab {
    top: 200px;
  }
  .theme-wrap .tab-area {
    position: absolute;
    /* top: 0; 20240118 KSH */
    top: 4%;
    left: 0;
    width: 37%;
  }
  .theme-wrap .img-area.fix-size {
    width: 75%;
    /* height: 38.4em; */
  }
  .theme-wrap .img-area {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40%;
	  width: 75%;
    height: 40em;
    margin: auto 4%;
    background: #fff;
    border: 4px solid #E9E9E9;
  }
  .theme-wrap .theme-box {
    /* flex-direction: column; */
    justify-content: space-between;
    width: 320px;
    margin-right: auto;
    margin-left: 0;
  }
  .theme-wrap .theme-box .thumb-img,
  .theme-wrap .theme-box .name {
    margin: 0 auto;
  }
  .theme-wrap .theme-box .theme-item {
    width: 85px;
  }
  .theme-wrap .theme-box .theme-item .name {
    font-size: 14px;
  }
  .btn-area-demo {
    position: absolute;
    right: 72px;
    /* bottom: 10px; 20231229 KSH */
    bottom: 59px;
    width: 280px;
    padding: 0;
    z-index: 10;
  }
  .btn-area-demo .btn-demo {
    height: 48px;
    letter-spacing: -0.2px;
  }
  .gray-box {
    padding: 36px 16px 0;
    width: 332px;
    height: 800px;
    margin-left: auto;
    padding: 12px;
    border-radius: 8px;
    background: #F4F4F4;
  }
  .gray-box .tit {
    width: 100%;
    font-size: 1rem;
    margin-bottom: 16px;
    text-align: center;
  }
  .gray-box .mobile-scroll {
    height: 700px;
    overflow-y: scroll;
  }
  .gray-box .buttons {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
  }
  .gray-box .btn-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 8px 12px;
    margin-right: 0;
    margin-bottom: 12px;
    border-radius: 4px;
    background: #FFF;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .gray-box .btn-product img {
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-right: 8px;
  }
  .tab-panel02 {
    width: 100%;
    /* height: 480px; */
    height: max-content;
    text-align: center;
    margin-bottom: 30px;
    padding: 32px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  }
  .tab-panel02 img {
    /* position: absolute;
    top: 0;
    right: 0;
    bottom: 70px;
    left: 0; */
    width: auto;
    max-width: 100%;
    height: 480px;
    margin: auto;
	object-fit: contain;
  }
  .btn-download {
    display: flex;
    align-items: center;
    width: max-content;
    height: 2.5rem;
    margin: 1.25rem auto;
    padding: 1.25rem 3rem 1.25rem 1.25rem;
    border-radius: 6px;
    background: var(--dark-navy) url("../images/ico-download-w.png") no-repeat right 1.25rem center;
    background-size: 1.25rem auto;
    font-weight: 700;
    color: #fff;
  }
  .table--common thead th,
  .table--common tbody td {
    font-size: 0.8rem;
  }
  .table--notice thead tr, .table--customer thead tr {
    height: 64px;
  }
  .table--notice th:nth-child(2),
  .table--notice td:nth-child(2), .table--customer th:nth-child(2),
  .table--customer td:nth-child(2) {
    text-align: left;
  }
  .table--notice tbody tr td {
    height: 28px;
    padding: 20px 10px;
  }
  .table--notice th:nth-child(2),
  .table--notice td:nth-child(2) {
    width: 70%;
  }
  .table--notice th:nth-child(2) a,
  .table--notice td:nth-child(2) a {
    width: 100%;
  }

  .table--notice th:nth-child(3),
  .table--notice td:nth-child(3) {
    width: 20%;
  }

  .table--customer tbody tr td {
    height: 28px;
  }
  .table--customer th:nth-child(1),
  .table--customer td:nth-child(1),
  .table--customer th:nth-child(3),
  .table--customer td:nth-child(3),
  .table--customer th:nth-child(4),
  .table--customer td:nth-child(4) {
    width: 10%;
  }
  .tab-sb02-lst {
    width: max-content;
    /* height: max-content; */
    height: 100px;
    margin: auto;
  }
  .tab-sb02 {
    font-size: 0.7rem;
    letter-spacing: -0.1px;
  }
  .popup {
    width: 25%;
  }
  .popup .pop-body {
    margin: 0 auto 64px;
  }
  .popup .btn-pop {
    height: 48px;
  }
  .popup.mobile-full {
    position: absolute;
    width: 41%;
    height: 60vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
  }
  .popup.mobile-full .pop-header {
    height: 100px;
    background: #fff;
  }
  .popup.mobile-full .btn-close {
    top: 24px;
  }
  .partner--center {
    width: 100%;
    max-width: 1440px;
    padding: 0 3.8%;
    /* margin: 0 auto 200px; */
    margin: 0 auto 10rem; /* 20240126 KSH */
  }
  .partner--center .banner {
    flex-direction: row;
    justify-content: space-between;
  }
  .partner--center .banner li {
    align-self: stretch;
    width: calc(50% - 16px);
    margin-bottom: 0;
  }
  .partner--center .banner li a {
    display: block;
    width: 365px;
    height: 120px;
  }
  .partner--center .banner li a img {
    width: 100%;
    height: auto;
  }
  .partner--center .banner .banner-box {
    /* width: 365px;
    height: 140px; */
    width: 100%;
  }
  .partner--center .banner .banner-box img {
    width: 300px;
    height: 100px;
  }
  .partner--slider {
    height: 250px;
    /* margin-bottom: 200px; 20240124 KSH */
  }
  .partner--slider .banners li {
    /* width: 365px;
    height: 120px; 20240124 KSH */
    width: 280px;
    height: 80px;
  }
  .partner--slider .banners-second {
    margin: 40px 0; /* 신현섭 1227 디자인과 마진 통일 */
  }
  .bdr-box .tit {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
  .bdr-box .txt {
    font-size: 0.8rem;
  }
  .drop-box {
    width: 100%;
  }
  .agree-txt {
    width: 100%;
  }
  
  .agree-txt .tit {
    margin-bottom: 16px;
  }
  .agree-txt .txt {
    margin-bottom: 64px;
    line-height: 140%;
  }
  .agree-txt .tit, .agree-txt .table-agree {
    font-size: 1rem;
  }
  .agree-txt .txt {
    font-size: 1rem;
  }
  .agree-txt .subtxt {
    margin-top: 16px;
    margin-bottom: 120px;
    font-size: 0.9rem;
  }
  .agree-txt .table-agree {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-bottom: none;
  }
  .agree-txt .table-agree dl {
    flex-direction: column;
    width: 33.333%;
  }
  .agree-txt .table-agree dt, .agree-txt .table-agree dd {
    justify-content: center;
  }
  .agree-txt .table-agree dt {
    padding: 16px;
    font-size: 1rem;
    width: 100%;
    /* height: max-content; */
  }
  .agree-txt .table-agree dd {
    width: 100%;
    height: 91px;
    padding: 0;
    font-size: 1rem;
    letter-spacing: -0.24px;
    flex: 1;
    text-align: center;
  }
  .apply-wrap {
    padding-bottom: 200px;
  }
  
  .language .dropdown ul li {
	  height: 48px;
	  width: 88px;
	}

  .top-info-box {
    justify-content: space-between;
    flex-direction: row;
    /* padding: 1.6rem 3.2rem;  20240129 KSH */
     padding: 1.6rem 0;
  }
  .top-info-box .box {
    /* width: calc((100% - 24px) / 3); 20240125 */
    /* width: 32%; 20240129 */
    width: calc((100% - 96px) / 3);
    min-width: 360px;
  }
  .top-info-box .box-cont {
    /* height: 136px; */ /* 20240205 변경 */
  }
  
  .top-info-box .img-area.type01 {
    background: url("../images/soluition-top01.png") no-repeat center top;
    background-size: 200px auto;
    background-color: White;
    background-position: center 25%;
    padding-top: 264px;
  }
  .top-info-box .img-area.type02 {
    background: url("../images/soluition-top02.png") no-repeat center top;
    background-size: 200px auto;
    background-color: White;
    background-position: center 25%;
    padding-top: 264px;
  }
  .top-info-box .img-area.type03 {
    background: url("../images/soluition-top03.png") no-repeat center top;
    background-size: 200px auto;
    background-color: White;
    background-position: center 25%;
    padding-top: 264px;
  }
  .top-info-box .box .tit,
  .top-info-box .img-area .fs-sm {
    font-size: 0.8rem;
    font-weight: 500;
  }

  .top-info-box .box-cont span {
    font-size: 0.8rem;
    font-weight: 700;
  }

  .top-info-box .img-area .fs-lg {
    font-size: 1.2rem;
    line-height: 140%;
  }
  .top-info-box .img-area .fs-sm {
    margin-top: 20px;
  }
  .top-info-box .box .tit {
    margin-top: 20px;
  }
  .top-info-box .box-cont span {
    margin: 2px 0;
  }
  .top-info-box .box-cont span::after {
    top: 5px;
  }
}/*# sourceMappingURL=style.css.map */

.wrap_demo {
  height: 100%;
}

.drop-shadow {
  border-radius: 20px;
  border: 3px solid #E9E9E9;
  box-shadow: 4px 8px 40px 0px rgba(142, 144, 144, 0.20);
}

@media screen and (min-width: 1441px) {
	.text-slide-down {
		transform: translate(0, -100%);
	    opacity: 0;
	    transition: transform 1s, opacity 1s;
	    transition-delay: .2s;
	}
	
	.fp-viewing-0 #section1 .text-slide-down,
	.fp-viewing-1 #section2 .text-slide-down,
	.fp-viewing-2 #section3 .text-slide-down,
	.fp-viewing-3 #section4 .text-slide-down {
		transform: translate(0,0);
	    opacity: 1;
	}
	
	.text-slide-up {
		transform: translate(0, 100%);
	    opacity: 0;
	    transition: transform 1s, opacity 1s;
	    transition-delay: .2s;
	}
	
	.fp-viewing-0 #section1 .text-slide-up,
	.fp-viewing-1 #section2 .text-slide-up,
	.fp-viewing-2 #section3 .text-slide-up,
	.fp-viewing-3 #section4 .text-slide-up {
		transform: translate(0,0);
	    opacity: 1;
	}
	
	.text-slide-left {
		transform: translate(100%, 0);
	    opacity: 0;
	    transition: transform 1s, opacity 1s;
	    transition-delay: .2s;
	}
	
	.fp-viewing-0 #section1 .text-slide-left,
	.fp-viewing-1 #section2 .text-slide-left,
	.fp-viewing-2 #section3 .text-slide-left,
	.fp-viewing-3 #section4 .text-slide-left {
		transform: translate(0,0);
	    opacity: 1;
	}
	
	.fade-in {
		opacity: 0;
	    transition: transform 1s, opacity 1s;
	    transition-delay: .2s;
	}
	
	.fp-viewing-0 #section1 .fade-in,
	.fp-viewing-1 #section2 .fade-in,
	.fp-viewing-2 #section3 .fade-in,
	.fp-viewing-3 #section4 .fade-in {
		opacity: 1;
	}
	
	#section2 .mySwiper04 .swiper-slide-next .intro-visual { transform: translateX(-100%); transition: transform 1s; transition-delay: .2s; }
	.fp-viewing-1 #section2 .mySwiper04 .swiper-slide-next .intro-visual { transform: translateX(0); }
	
	#section2 .mySwiper04 .swiper-slide-prev .intro-visual { transform: translateX(100%); transition: transform 1s; transition-delay: .2s; }
	.fp-viewing-1 #section2 .mySwiper04 .swiper-slide-prev .intro-visual { transform: translateX(0); }
	
	#section2 .mySwiper04 .swiper-slide-active .intro-visual { transform: scale(0.5); transition: transform 1s; transition-delay: .2s; }
	.fp-viewing-1 #section2 .mySwiper04 .swiper-slide-active .intro-visual { transform: scale(1); }
	
	#section2 .mySwiper04 .swiper-slide-next + div .intro-visual {  transform: translateX(-1000%); transition: transform 1s, opacity 1s;  transition-delay: .2s;}
	.fp-viewing-1 #section2 .mySwiper04 .swiper-slide-next+div  .intro-visual { transform: translateX(0); opacity: 1; }
	
	
	#section3 .tab-lst button {
		transform: translate(0, 100%);
	    opacity: 0;
	    transition: transform 1s, opacity 1s;
	}
	
	#section3 .tab-lst button:nth-child(1) {
		transition-delay: .2s;
	} 
	
	#section3 .tab-lst button:nth-child(2) {
		transition-delay: .3s;
	} 
	
	#section3 .tab-lst button:nth-child(3) {
		transition-delay: .4s;
	} 
	
	#section3 .tab-lst button:nth-child(4) {
		transition-delay: .5s;
	} 
	
	#section3 .tab-lst button:nth-child(5) {
		transition-delay: .6s;
	} 
	
	.fp-viewing-2 #section3 .tab-lst button {
		transform: translate(0,0);
	    opacity: 1;
	}
	
	#section3 .mySwiper01 .slick-slide { transform: scale(1.1); opacity: 0; transition: transform 1.4s, opacity 1.4s; transition-delay: .3s; } 
	.fp-viewing-2 #section3 #tab-1.on .mySwiper01 .slick-slide { transform: scale(1); opacity: 1; }
}


@media screen and (min-width: 2000px) {
  .fix-pagination {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* left: 5.2%; 20240117 KSH */
    left: 50%; /* 20240117 KSH */
    margin-left: -840px; /* 20240117 KSH */
    top: calc(50% - 80px);
    z-index: 11;
  }
}
.fix-pagination button:focus {
  outline: none;
}
.select-area select {
    display: block;
    background: #f2f4f5;
    padding: 15px 73px 15px 25px;
    border: 1px solid #d1d7dd;
    border-radius: 6px;
    font-size: 15px;
    line-height: 45px;
}