@charset "UTF-8";
@font-face {
  font-family: "Pretendard";
  font-weight: 45 920;
  src: local("Pretendard"), url("../fonts/PretendardVariable.woff2") format("woff2-variations");
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
}
*:before, *:after,
* i, * div, * main, * section {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  user-select: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button,
input,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", "돋움", Dotum, Sans-serif;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
}

:-webkit-input-placeholder,
:-ms-placeholder,
:-moz-placeholder,
::placeholder {
  font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", "돋움", Dotum, Sans-serif;
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

html {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  font-weight: 400;
  min-width: 1440px;
  overflow-x: auto;
}

body {
  position: relative;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  background: #fafafa;
  overflow-x: hidden;
}

h1, h2 {
  font-weight: 700;
}

h3,
h4,
h5,
h6,
em {
  font-weight: 600;
  font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul,
li,
dl,
dt,
dd {
  list-style: none;
}

button,
img,
button,
select,
input,
label,
textarea {
  font-family: "Pretendard";
  vertical-align: middle;
  border: none;
  margin: 0;
  padding: 0;
}

button {
  cursor: pointer;
  background: transparent;
}
button:disabled {
  cursor: default;
}
button > span {
  position: relative;
}

blockquote,
q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  word-break: break-word;
}

caption {
  overflow: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  display: block;
}

a {
  text-decoration: none;
  color: #363636;
}
a:hover, a:active, a:visited {
  text-decoration: none;
}

body {
  display: block;
  min-width: 1280px;
}
@media screen and (max-width: 1280px) {
  body {
    overflow-x: auto;
  }
}

form {
  display: flex;
  width: 300px;
  height: 300px;
  flex-direction: column;
}

header {
  height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 40px;
  position: fixed;
  top: 0;
  z-index: 2;
  transition: fadeIn 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
header .logo-link {
  display: flex;
  width: 48px;
  height: 48px;
  background: url("../img/logo.svg") no-repeat center;
  cursor: pointer;
}
header nav {
  display: flex;
  margin-left: auto;
}
header nav ul {
  display: flex;
  align-items: center;
  gap: 40px;
}
header nav ul li a {
  font-size: 18px;
  font-weight: 500;
  color: #000;
}
header > button {
  width: 151px;
  margin-left: 48px;
  height: 46px;
  border: 1px solid #d6d6d8;
  border-radius: 60px;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  word-spacing: -0.02em;
  cursor: pointer;
}
header > button:hover {
  background-color: #41424A;
  color: #fff;
  border-color: #41424A;
}
header.active {
  position: fixed;
}
header.active + main {
  padding-top: 72px;
}
header.active button {
  background-color: #27282C;
  border-color: #27282C;
  color: #fff;
}
header.active button:hover {
  background-color: #41424A;
  color: #fff;
  border-color: #41424A;
}

main {
  position: relative;
  z-index: 0;
  padding-top: 72px;
}

body.no-animation *:not(#introSub):not(#intro):not(#introSub *) :not(#intro *) {
  transition: none !important;
  animation: none !important;
  animation-delay: 0s !important;
  transition-delay: 0s !important;
}

/* article 숨김 + 모션용 기본값 */
aside {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

article {
  display: flex;
  justify-content: center;
  padding: 160px 0 160px;
  min-height: 600px;
  background: #fff;
}
article:nth-child(even) {
  background: #F9F9F9;
}
article:nth-child(3) {
  background: #fff;
  padding-top: 180px;
  height: 800px;
}
article#introSub section {
  height: 418px;
  display: flex;
  flex-direction: column;
  padding-top: 100px;
  position: relative;
  width: 0;
  overflow: hidden;
  transition: transform 1.5s ease;
  transform: scale(0);
  justify-content: flex-start;
}
article#introSub section.active {
  width: 100%;
  transform: scale(1);
  max-width: 1517px;
  overflow: inherit;
}
article#introSub section.active .visual-icon {
  opacity: 1;
}
article#introSub section.active h2 {
  transition-delay: 0.4s;
  opacity: 1;
  transform: translateY(0);
}
article#introSub section.active p {
  transition-delay: 0.8s;
  opacity: 1;
  transform: translateY(0);
}
article#introSub section h2 {
  font-size: 44px;
  text-align: center;
  line-height: 120%;
  color: #000;
  transform: translateY(40px);
  transition: opacity 0.2s ease, transform 0.6s ease;
  opacity: 0;
}
article#introSub section p {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.2s ease, transform 0.6s ease;
  margin-top: 28px;
  font-size: 20px;
  font-weight: 500;
  line-height: 160%;
  word-spacing: -0.01em;
  color: #272932;
  text-align: center;
  display: inline-block;
}
article#introSub section .visual-icon {
  opacity: 0;
  transition: opacity 0.5s ease !important;
  animation: float 3s ease-in-out infinite !important; /* 3초 간격으로 무한 반복 */
  animation-play-state: running; /* 애니메이션이 중지되지 않도록 설정 */
  animation-delay: var(--delay, 0s) !important;
  position: absolute;
}
article#introSub section .visual-icon.main-icon {
  filter: drop-shadow(8px 16px 20px rgba(71, 82, 92, 0.13));
}
article#introSub section .visual-icon[data-icon=pdf] {
  left: 290px;
  top: 60px;
}
article#introSub section .visual-icon[data-icon=ppt] {
  right: 245px;
  top: 161px;
}
article#introSub section .visual-icon[data-icon=word] {
  left: 356px;
  bottom: 60px;
}
article#introSub section .visual-icon[data-icon=excel] {
  right: 410px;
  bottom: 0;
}
article#introSub section .visual-icon[data-icon=doc] {
  left: 72px;
  top: 20px;
}
article#introSub section .visual-icon[data-icon=write] {
  left: 0;
  bottom: 116px;
}
article#introSub section .visual-icon[data-icon=folder] {
  left: 237px;
  top: 191px;
}
article#introSub section .visual-icon[data-icon=img] {
  right: 384px;
  top: 37px;
}
article#introSub section .visual-icon[data-icon=file] {
  right: 95px;
  top: 91px;
}
article#introSub section .visual-icon[data-icon=box] {
  right: 180px;
  bottom: 75px;
}
article#introSub section .visual-icon[data-icon=cloud] {
  right: 0;
  bottom: 161px;
}
article#installation section, article#faq section {
  flex-direction: column;
}
article#contact {
  padding-bottom: 120px;
  flex-direction: column;
  align-items: center;
}

section {
  max-width: 1280px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: fit-content;
}
section.upslide {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s ease;
}
section.upslide .sub-title,
section.upslide .section-contents {
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.3s;
}
section.upslide.active {
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents .section-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s ease, transform 0.6s ease;
  transition-delay: 0.3s;
}
section.upslide.active .sub-title {
  transition-delay: 0.1s;
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents {
  transition-delay: 0.2s;
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents .section-card:nth-child(1) {
  transition-delay: 0.3s;
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents .section-card:nth-child(2) {
  transition-delay: 0.5s;
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents .section-card:nth-child(3) {
  transition-delay: 0.7s;
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents .section-card:nth-child(4) {
  transition-delay: 0.9s;
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents .section-card:nth-child(5) {
  transition-delay: 1.1s;
  opacity: 1;
  transform: translateY(0);
}
section.upslide.active .section-contents .section-card:nth-child(6) {
  transition-delay: 1.3s;
  opacity: 1;
  transform: translateY(0);
}

.sub-title {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sub-title h2 {
  font-size: 44px;
  line-height: 100%;
}
.sub-title span {
  font-size: 20px;
  padding-left: 2px;
  color: #272932;
  line-height: 140%;
}

.section-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  height: auto;
}
.section-contents.use-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px 24px;
}
.section-contents.installation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
}
.section-contents.form {
  flex-direction: column;
  flex-wrap: nowrap;
  width: 618px;
  height: auto;
}

.section-card {
  display: flex;
  flex-direction: column;
  transform: translateY(10px);
  opacity: 0;
}
.section-card h3 {
  font-size: 24px;
  word-spacing: -0.01em;
  color: #000;
}
.section-card p {
  font-size: 18px;
  line-height: 150%;
  word-spacing: -0.01em;
  color: #272932;
}
.section-card.features {
  margin-left: auto;
  background: #fff;
  border-radius: 20px;
  height: 320px;
  padding: 44px 32px;
  gap: 16px;
}
.section-card.features h3 {
  margin-top: 32px;
}
.section-card.use-cases {
  max-width: 465px;
  gap: 12px;
}
.section-card.use-cases h3 {
  margin-top: 12px;
}
.section-card.installation {
  background: #fff;
  border-radius: 20px;
  padding: 36px 0;
  justify-content: flex-start;
  gap: 0;
  align-items: center;
  height: 420px;
  border: 1px solid #e8eaee;
}
.section-card.installation h3 {
  margin: 20px 0 0;
}
.section-card.installation .step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffedef;
  color: #E2304F;
  font-size: 20px;
  font-weight: 700;
}
.section-card.installation .thum-img {
  margin-top: 32px;
  filter: drop-shadow(2px 8px 12px rgba(0, 0, 0, 0.04));
}
.section-card.installation:nth-child(3) .thum-img {
  filter: none;
}

.faq-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: 40px;
  width: 100%;
}
.faq-list-item {
  background: #fff;
  border-radius: 20px;
  align-items: flex-start;
  border: 1px solid #e8eaee;
}
.faq-list-item .faq-question-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 26px 32px;
  width: 100%;
  position: relative;
  height: 80px;
  cursor: pointer;
}
.faq-list-item .faq-question-btn strong {
  color: #E2304F;
  font-size: 20px;
  font-weight: 700;
}
.faq-list-item .faq-question-btn h3 {
  font-size: 20px;
  color: #000;
}
.faq-list-item .faq-question-btn:after {
  content: "";
  position: relative;
  margin-left: auto;
  display: flex;
  width: 28px !important;
  height: 28px !important;
  background: url("../img/plus-icon.svg") no-repeat;
}
.faq-list-item .faq-question-btn[aria-expanded=true]:after {
  background: url("../img/minus-icon.svg") no-repeat;
}
.faq-list-item.active {
  background: #F9F9F9;
}
.faq-list-item.active .faq-answer {
  margin: 0 32px 0 60px;
  padding: 20px 0 30px;
  border-top: 1px solid #e8eaee;
  height: auto;
  width: calc(100% - 92px);
}
.faq-list-item .faq-answer {
  overflow: hidden;
  height: 0;
  margin: 0 32px 0 60px;
  border-color: #e8eaee;
}
.faq-list-item .faq-answer p {
  font-size: 18px;
  line-height: 160%;
  color: #272932;
}
.faq-list-item .faq-answer .text-link {
  padding: 0;
  margin: 0;
  font-size: 18px;
  text-decoration: underline;
}

.installation-error-info {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.installation-error-info:has(button[aria-expanded=true]) {
  gap: 20px;
}
.installation-list {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  height: 0;
}
.installation-list.active {
  max-height: 500px; /* 펼쳐질 때의 높이 */
  padding: 40px;
  height: auto;
}
.installation-list-item, .installation-list li {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.installation-list-item h3, .installation-list li h3 {
  font-size: 16px;
  font-weight: 600;
}
.installation-list-item h3 *, .installation-list li h3 * {
  font-size: inherit;
  font-weight: inherit;
}
.installation-list-item h3 em, .installation-list li h3 em {
  color: #E2304F;
}
.installation-list-item h3 strong, .installation-list li h3 strong {
  color: #272932;
}
.installation-list-item p, .installation-list li p {
  font-size: 16px;
  line-height: 160%;
  color: #272932;
}
.installation-list-item:first-child, .installation-list li:first-child {
  padding-bottom: 28px;
  border-bottom: 1px solid #d6d6d8;
  margin-bottom: 28px;
}
.installation-drop-btn {
  display: flex;
  margin-left: 8px;
}
.installation-drop-btn button {
  display: flex;
  align-items: center;
  font-size: 20px;
  word-spacing: -0.01em;
}
.installation-drop-btn button i {
  margin-right: 6px;
  display: inline-flex;
}
.installation-drop-btn button:after {
  content: "";
  position: relative;
  margin-left: 8px;
  width: 28px;
  height: 28px;
  background: url("../img/drop-arrow.svg") no-repeat center;
}
.installation-drop-btn button[aria-expanded=true]:after {
  transform: rotate(180deg);
}
button[aria-expanded=true] + .installation-list {
  max-height: 500px;
}

.form-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.form-input label {
  color: #272932;
  font-size: 18px;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
}
.form-input label:after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: flex;
  background: #E2304F;
}
.form-input .text-count {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #A5A6AD;
}

.main-visual {
  display: block;
  height: 847px;
  padding: 98px 0;
}
.main-visual section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: none;
  gap: 40px;
  opacity: 1;
}
.main-visual section h1 {
  font-size: 84px;
  font-weight: 700;
  color: #000;
  line-height: 100%;
  word-spacing: -0.03em;
  display: flex;
  align-items: center;
}
.main-visual section p {
  font-size: 20px;
  font-weight: 500;
  line-height: 160%;
  word-spacing: -0.01em;
  color: #272932;
  text-align: center;
}
.main-visual section > button {
  background: #27282C;
  color: #fff;
  border-radius: 48px;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 244px;
  height: 64px;
  font-size: 20px;
  word-spacing: -0.01em;
}
.main-visual section > button .icon {
  display: block;
  width: 24px;
  height: 24px;
  background: url("../img/down_ico.svg") no-repeat center;
}
.main-visual section > button:hover {
  background: #41424A;
}
.main-visual section .visual-img-motion {
  width: 604px;
  height: 400px;
  position: relative;
}
.main-visual section .visual-img-motion div {
  display: inline-flex;
  position: absolute;
}
.main-visual section .visual-img-motion div[aria-index="1"] {
  left: 12px;
  top: 27px;
}
.main-visual section .visual-img-motion div[aria-index="1"] img[aria-index="7"] {
  position: absolute;
  z-index: 1;
  left: 60px;
  top: 49px;
  animation: visual-01-rotate 3s ease-in-out infinite !important;
  transform-origin: 0% 50%;
  transform-box: fill-box;
}
.main-visual section .visual-img-motion div[aria-index="2"] {
  left: 181px;
  top: 95px;
  animation: visual-02 3s ease-in-out infinite !important;
}
.main-visual section .visual-img-motion div[aria-index="3"] {
  right: 19px;
  top: 34px;
}
.main-visual section .visual-img-motion div[aria-index="3"] img[aria-index="6"] {
  position: absolute;
  z-index: 1;
  left: 1px;
  top: 33px;
  animation-delay: 1s !important; /* 두 번째 요소는 살짝 늦게 나타남 */
  transform-origin: 0 50%;
  transform-box: fill-box;
}
.main-visual section .visual-img-motion div[aria-index="3"] > div {
  position: absolute;
  z-index: 1;
  right: 86px;
  top: 29px;
  transform-origin: 50% 0;
  transform-box: fill-box;
}
.main-visual section .visual-img-motion div[aria-index="4"] {
  left: 157px;
  bottom: 10px;
}
.main-visual section .visual-img-motion div[aria-index="4"] img[aria-index="8"] {
  position: absolute;
  z-index: 1;
  left: -10px;
  top: 35px;
  animation: visual-02-rotate 3s ease-in-out infinite !important;
  transform-origin: 50% 0%;
  transform-box: fill-box;
}
.main-visual section .visual-img-motion div[aria-index="5"] {
  position: absolute;
  right: 0;
  top: 25px;
  overflow: hidden;
}
.main-visual section .visual-img-motion div[aria-index="5"] #wifi-01, .main-visual section .visual-img-motion div[aria-index="5"] #wifi-02 {
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center;
  animation: blink 2s ease-in-out infinite !important;
}
.main-visual section .visual-img-motion div[aria-index="5"] #wifi-01 {
  animation-delay: 1s !important; /* 두 번째 요소는 살짝 늦게 나타남 */
}

input {
  height: 52px;
  border-radius: 8px;
  font-size: 17px;
  color: #272932;
  word-spacing: -0.01em;
  border: 1px solid #E8EAEE;
  padding: 16px;
}
input::placeholder {
  font-size: 17px;
  color: #a5a6ad;
  word-spacing: -0.01em;
}
input:focus {
  border-color: #27282c;
  outline: none;
}
input.error {
  border-color: #F83859;
  color: #F83859;
}

textarea {
  border-radius: 8px;
  font-size: 17px;
  color: #272932;
  word-spacing: -0.01em;
  border: 1px solid #E8EAEE;
  padding: 24px 36px 36px 24px;
  height: 266px;
  resize: none;
}
textarea::placeholder {
  font-size: 17px;
  color: #a5a6ad;
  word-spacing: -0.01em;
}
textarea:focus {
  border-color: #27282c;
  outline: none;
}
textarea.error {
  border-color: #F83859;
  color: #F83859;
}

.check-btn {
  display: flex;
}
.check-btn input {
  width: 0;
  height: 0;
}
.check-btn input + label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.check-btn input + label span {
  width: 16px;
  height: 16px;
  background: url("../img/check.svg") no-repeat center;
  margin-right: 10px;
}
.check-btn input + label em {
  color: #E2304F;
  margin-right: 6px;
}
.check-btn input:checked + label span {
  background: url("../img/check-checked.svg") no-repeat center;
}
.check-btn a {
  display: inline-flex;
  cursor: pointer;
  text-decoration: underline;
}

.contact-submit {
  width: 100%;
  height: 62px;
  background: #27282c;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}
.contact-submit:hover {
  background: #41424A;
}

.scroll-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 200px;
  margin: 120px 0 60px;
  max-width: none;
}
.scroll-wrap .scroll-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 56px;
  align-items: center;
  height: 100%;
  will-change: transform;
  padding-inline: 28px;
}
.scroll-wrap .scroll-track img {
  flex-shrink: 0;
  height: 80px;
}

footer {
  min-height: 260px;
  background: #333336;
  display: block;
  padding: 64px 0 0;
}
footer .foot-box {
  opacity: 1;
  display: flex;
  max-width: 1280px;
  transform: none;
  margin: 0 auto;
  align-items: flex-start;
}
footer .foot-box > div {
  display: flex;
}
footer .foot-box .foot-logo {
  width: 174px;
  height: 71px;
  background: url("../img/aegis-logo.svg") no-repeat center;
}
footer .foot-box .foot-info {
  flex-direction: column;
  margin-left: 72px;
  gap: 24px;
}
footer .foot-box .foot-info p {
  font-size: 13px;
  line-height: 160%;
  color: #c9c9c9;
}
footer .foot-box .foot-info p strong {
  font-size: inherit;
  color: #fff;
}
footer .foot-box .foot-button {
  margin-top: auto;
  margin-left: auto;
  display: flex;
  gap: 12px;
}
footer .foot-box .foot-button a {
  padding: 5px 14px;
  height: 32px;
  background: #46464b;
  border: 1px solid #535359;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  gap: 4px;
  font-size: 13px;
}

.floating-area {
  position: fixed;
  right: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8eaee;
  background: #fff;
  border-radius: 8px;
  z-index: 11;
  width: 80px;
  height: 170px;
  filter: drop-shadow(4px 6px 13px rgba(0, 0, 0, 0.06));
}
.floating-area a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  word-spacing: -0.02em;
  gap: 6px;
  line-height: 100%;
  color: #6B6D78;
  cursor: pointer;
  height: 85px;
}
.floating-area a i {
  width: 24px;
  height: 24px;
  display: block;
}
.floating-area a i.info {
  background: url("../img/info-icon.svg") no-repeat center;
}
.floating-area a i.data-info {
  background: url("../img/info-data-icon.svg") no-repeat center;
}
.floating-area a:first-child {
  border-bottom: 1px solid #e8eaee;
  padding: 20px 10px 18px;
}
.floating-area a:last-child {
  padding: 18px 10px 21px;
}
@media (min-width: 1921px) {
  .floating-area {
    right: 200px; /* 우측 200px로 위치 */
    transform: translateX(-200px) translateY(-50%); /* translateX로 배너를 살짝 왼쪽으로 이동 */
  }
}

.scroll-top-btn {
  width: 48px;
  height: 48px;
  position: fixed;
  bottom: 40px;
  border: 1px solid #e8eaee;
  background: #fff;
  border-radius: 8px;
  z-index: 11;
  right: 40px;
}
.scroll-top-btn:hover {
  background-color: #fcfcfc;
}
@media (min-width: 1921px) {
  .scroll-top-btn {
    right: 200px; /* 우측 200px로 위치 */
    transform: translateX(-200px) translateY(-50%); /* translateX로 배너를 살짝 왼쪽으로 이동 */
  }
}

.modal-dim {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  z-index: 50;
}
.modal-dim.active {
  display: flex;
}

.modal-pop {
  display: none;
  margin: auto;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 4px 5px 48px 0 rgba(0, 0, 0, 0.16);
  width: 616px;
  padding: 36px 32px 36px 36px;
}
.modal-pop.active {
  display: flex;
}
.modal-pop .modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}
.modal-pop .modal-header h2 {
  font-size: 20px;
  color: #272932;
}
.modal-pop .modal-header .close-btn {
  margin-left: auto;
  position: relative;
  width: 28px;
  height: 28px;
}
.modal-pop .modal-header .close-btn:before {
  content: "";
  width: 18px;
  height: 2px;
  transform: rotate(45deg);
  background: #7b7d87;
  position: absolute;
  left: 4px;
  top: 4px;
}
.modal-pop .modal-header .close-btn:after {
  content: "";
  width: 18px;
  height: 2px;
  transform: rotate(-45deg);
  background: #7b7d87;
  position: absolute;
  left: 4px;
  top: 4px;
}
.modal-pop .modal-contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-pop .modal-contents p {
  color: #272932;
  line-height: 160%;
  font-size: 16px;
}
.modal-pop .modal-contents p span {
  color: #77797e;
  font-size: inherit;
}
.modal-pop .modal-contents .gray-color {
  color: #77797e;
}
.modal-pop .modal-contents span {
  line-height: 150%;
  font-size: 14px;
}

@keyframes visual-01 {
  0%, 100% {
    transform: translate(0); /* 시작 위치 */
  }
  50% {
    transform: translate(-3px, -3px); /* 위로 떠오름 */
  }
}
@keyframes visual-01-rotate {
  0% {
    transform: translateY(0px) rotate(30deg);
  }
  40% {
    transform: translateY(6px) rotate(-17deg);
  }
  70% {
    transform: translateY(6px) rotate(-17deg);
  }
  100% {
    transform: translateY(0px) rotate(30deg);
  }
}
@keyframes visual-02-rotate {
  0%, 100% {
    transform: translateX(0px) rotate(0);
  }
  50% {
    transform: translateX(1px) rotate(-10deg);
  }
}
@keyframes visual-02 {
  0%, 100% {
    transform: translateY(0) scale(1); /* 시작 위치 */
  }
  50% {
    transform: translateY(-7px) scale(1.01); /* 위로 떠오름 */
  }
}
@keyframes visual-03 {
  0%, 100% {
    transform: translate(0); /* 시작 위치 */
  }
  50% {
    transform: translate(5px, -5px); /* 위로 떠오름 */
  }
}
@keyframes visual-03-rotate {
  0%, 10%, 50%, 90%, 100% {
    transform: translate(0, 0) rotate(0); /* 시작 위치 */
  }
  25%, 75% {
    transform: translate(0, -5px) rotate(45deg); /* 위로 떠오름 */
  }
}
@keyframes visual-03-rotate {
  0%, 100% {
    transform: translate(0, 0) rotate(0); /* 시작 위치 */
  }
  40%, 60% {
    transform: translate(0, -5px) rotate(45deg); /* 위로 떠오름 */
  }
}
@keyframes visual-03-arm {
  0%, 50%, 100% {
    transform: translate(0) rotate(0); /* 시작 위치 */
  }
  25%, 75% {
    transform: translate(0, -1px) rotate(5deg); /* 위로 떠오름 */
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0); /* 시작 위치 */
  }
  50% {
    transform: translateY(-5px); /* 위로 떠오름 */
  }
}
@keyframes scale {
  0% {
    transform: scale(0); /* 시작 위치 */
  }
  20% {
    transform: scale(0); /* 위로 떠오름 */
  }
  50% {
    transform: scale(0); /* 위로 떠오름 */
  }
  100% {
    transform: scale(1); /* 다시 원래 위치로 */
  }
}
@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
  0% {
    transform: translateX(0);
  }
}
.toast-message {
  background: #fff;
  position: fixed;
  bottom: 130px;
  border-radius: 12px;
  box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.2);
  padding: 22px 22px 22px 20px;
  color: #4A4E60;
  font-weight: 500;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 100%;
  z-index: 15;
  opacity: 1;
  transition: opacity 1s;
  font-size: 18px;
}
.toast-message i {
  display: inline-flex;
}

/*# sourceMappingURL=app.css.map */