@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Manrope&display=swap");
/* font, variables,  */
/* mobile padding */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  scroll-behavior: auto;
  font-size: 16px;
}

.material-icons-round {
  font-family: "Material Icons";
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: none;
  outline: none;
}

select {
  appearance: none; /* 기본 화살표 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/assets/images/common/icon/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px auto;
}

input::placeholder,
textarea::placeholder {
  color: #bbbbbb;
  opacity: 1;
  transition: color 0.2s ease;
}
input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #bbbbbb;
  transition: color 0.2s ease;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: transparent;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #bbbbbb;
  transition: color 0.2s ease;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
  color: transparent;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #bbbbbb;
  transition: color 0.2s ease;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  color: transparent;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #bbbbbb;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
  color: transparent;
}
input::-webkit-search-cancel-button,
input::-webkit-clear-button,
textarea::-webkit-search-cancel-button,
textarea::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
input[type="search"]::-moz-search-clear,
textarea[type="search"]::-moz-search-clear {
  display: none;
}

/* Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

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,
sub,
sup,
tt,
var,
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: normal;
  line-height: 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 {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

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

a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

button {
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
}

input,
textarea,
button,
select,
a {
  font-family: inherit;
  font-size: inherit;
}

html {
  color: #333333;
  scroll-behavior: auto;
  word-break: keep-all;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1rem;
  background-color: #ffffff;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  text-decoration: none;
}

button {
  font-size: 1rem;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
  letter-spacing: -0.4px;
}

h1,
h2 {
  font-weight: 700;
  line-height: 1.2;
}

h3,
h4,
h5 {
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: 3.25rem;
  color: #212121;
}

h2 {
  font-size: 2.5rem;
  text-align: center;
  color: #212121;
  margin-bottom: 4.5rem;
}

h3 {
  font-size: 1.875rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.125rem;
}

p {
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  p {
    line-height: 1.4;
  }
}

ul {
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  ul {
    line-height: 1.6;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }
  h3 {
    font-size: 1.125rem;
  }
  h4 {
    font-size: 1rem;
  }
}
body.modal-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
}

section {
  width: 100%;
  display: flex;
  justify-content: center;
}

.content {
  max-width: 1296px;
  width: 100%;
}
.content.content-reply {
  margin-top: -80px;
  padding: 50px 30px;
  background: #f5f7f9;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .content.content-reply {
    margin-top: -20px;
    border-radius: 10px;
    padding: 30px 20px;
  }
}

.bg-page {
  background-color: #f3f6f9;
}

.full-bg {
  width: 100%;
  background: #f5f7f9;
  padding: 10rem 0;
}
@media screen and (max-width: 768px) {
  .full-bg {
    padding: 60px 20px;
  }
}

.padding-20 {
  padding: 20px;
}

.padding-30 {
  padding: 30px;
}

.padding-40 {
  padding: 40px;
}

.mt-80 {
  margin-top: 5rem;
}

.mb-80 {
  margin-bottom: 5rem;
}

.mt-160 {
  margin-top: 10rem;
}

.mb-160 {
  margin-bottom: 10rem;
}

.mtb-160 {
  margin: 10rem 0;
}

@media screen and (max-width: 768px) {
  .mt-80 {
    margin-top: 2.5rem;
  }
  .mb-80 {
    margin-bottom: 2.5rem;
  }
  .mt-160 {
    margin-top: 60px;
  }
  .mb-160 {
    margin-bottom: 60px;
  }
  .mtb-160 {
    margin: 60px 0;
  }
}
.icon-box {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}

.mobile-br {
  display: none;
}
span.mobile-blk {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .mobile-br {
    display: inline-block;
  }
  span.mobile-blk {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .pc-br {
    display: none;
  }
}

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

.mobile-hidden {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

.header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 900;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.header-overlay.active {
  display: block;
  opacity: 1;
}

header {
  z-index: 1000;
  height: 80px;
  background-color: transparent;
  position: relative;
  width: 100%;
  transition: 0.2s ease-in-out;
  font-weight: 500;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
header .header-container {
  max-width: 1920px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 5rem;
  height: inherit;
  display: flex;
  gap: 2rem;
  align-items: center;
  color: #212121;
  /* nav menu */
  /* 로그인 등등 */
}
header .header-container .logo,
header .header-container nav,
header .header-container .header-right {
  height: inherit;
}
header .header-container .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}
header .header-container .logo img {
  width: 160px;
  height: auto;
}
header .header-container nav .nav-items {
  z-index: 1;
  display: flex;
  align-items: center;
}
header .header-container nav .nav-items .nav-item {
  font-size: 1.125rem;
  padding: 0 2rem;
  /* Search */
}
header .header-container nav .nav-items .nav-item > span {
  display: block;
  line-height: 80px;
  transition: 0.2s;
  cursor: pointer;
}
header .header-container nav .nav-items .nav-item .dropdown-wrap {
  opacity: 0;
  position: absolute;
  background-color: #ffffff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  transition: opacity 0.2s linear;
  pointer-events: none;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner {
  max-width: 1310px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown {
  position: relative;
  flex: 4;
  /* 단일 메뉴 */
  /* 드롭다운 메뉴 */
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct {
  display: flex;
  gap: 3.5rem;
  align-items: start;
  justify-content: start;
  flex-wrap: wrap;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  a,
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  .trial-btn {
  font-weight: 500;
  line-height: 1.4;
  display: inline-block;
  color: #212121;
  transition: 0.2s;
  font-size: 1.125rem;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  a:hover,
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  .trial-btn:hover {
  color: #eb4d3d;
  border-radius: 4px;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  a:hover
  .direct-btn,
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  .trial-btn:hover
  .direct-btn {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
  margin-left: 2px;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  a
  .direct-btn,
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown.direct
  .trial-btn
  .direct-btn {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-left: -4px;
  transition: 0.3s ease-in-out;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown
  .dropdown-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 3.5rem;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown
  .dropdown-menu
  ul
  li {
  font-size: 1rem;
  color: #999999;
  padding: 5px 0;
  transition: 0.2s;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown
  .dropdown-menu
  ul
  li:hover {
  color: #eb4d3d;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown
  .dropdown-menu
  ul
  .menu-title {
  font-size: 1.125rem;
  color: #212121;
  position: relative;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .dropdown
  .dropdown-menu
  ul
  .menu-title.alone::after {
  display: none;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .header-banner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .header-banner
  > button {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px;
  border-radius: 8px;
  font-size: 1.125rem;
  color: #ffffff;
  position: relative;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .header-banner
  > button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .header-banner
  .trial-btn {
  background-color: #eb4d3d;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .header-banner
  .trial-btn:after {
  background: url("/assets/images/common/icon/free-trial.svg");
  background-size: 60px;
  filter: brightness(0) saturate(100%) invert(93%) sepia(93%) saturate(24%)
    hue-rotate(251deg) brightness(107%) contrast(100%);
  opacity: 0.2;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .header-banner
  .purchase-btn {
  background-color: #eef1f5;
  color: #212121;
}
header
  .header-container
  nav
  .nav-items
  .nav-item
  .dropdown-wrap
  .dropdown-inner
  .header-banner
  .purchase-btn::after {
  background: url("/assets/images/common/icon/inquiry.svg");
  background-size: 60px;
  filter: brightness(0) saturate(100%) invert(42%) sepia(13%) saturate(1079%)
    hue-rotate(189deg) brightness(94%) contrast(94%);
  opacity: 0.1;
}
/* header .header-container nav .nav-items .nav-item:hover > .dropdown-wrap {
  pointer-events: auto;
  opacity: 1;
  transition-delay: 0s;
} */
header .header-container nav .nav-items .nav-item:hover > span {
  color: #eb4d3d;
  position: relative;
}
header .header-container nav .nav-items .nav-item:hover > span:after {
  content: "";
  width: 120%;
  height: 2px;
  background-color: #eb4d3d;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
header .header-container nav .nav-items .nav-item.search .search-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
header
  .header-container
  nav
  .nav-items
  .nav-item.search
  .search-toggle-btn
  .search-icon {
  width: 24px;
  height: 24px;
}
header .header-container .header-right {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-left: auto;
}
header .header-container .header-right .login-btn {
  height: inherit;
  line-height: 80px;
  font-size: 1.125rem;
  padding-right: 3px;
}
header .header-container .header-right .login-btn.tablet {
  display: none;
}
header .header-container .header-right .login-btn.tablet img {
  width: 24px;
  height: 24px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  display: inline-block;
  transform: translateY(6px);
}
header .header-container .header-right .header-right-dropdown {
  position: relative;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropdown-btn {
  font-weight: 500;
  height: inherit;
  line-height: 80px;
}
.dropdown-btn img {
  width: 24px;
  height: 24px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  display: inline-block;
  transform: translateY(6px);
}
.dropdown-btn.mypage {
  font-size: 1.125rem;
}
.dropdown-btn.mypage img {
  transition: 0.3s;
}
.dropdown-btn.mypage.active img {
  transform: translateY(6px) rotate(180deg);
}

header .header-container .header-right .header-right-dropdown button:before {
  content: "";
  position: absolute;
  height: 20%;
  width: 1px;
  background-color: #cccccc;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}
header .header-container .header-right .header-right-dropdown .mypage:before {
  display: none;
}
.dropdown-content {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s linear;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  z-index: 1000;
  width: max-content;
}
.dropdown-content a {
  display: block;
  padding: 10px;
  transition: 0.2s ease-in-out;
  color: #bbbbbb;
}
.dropdown-content a:hover {
  color: #212121;
}
.dropdown-content a.now {
  color: #212121;
  font-weight: 500;
}
.dropdown-content.mypage a {
  color: #333333;
}
.dropdown-content.active {
  opacity: 1;
  pointer-events: all;
}

header .header-container .header-right .header-btn {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
}

.header-spacer {
  height: 0;
}

.header-mobile {
  display: none;
  width: 100%;
  height: 64px;
  /* 모바일 */
}
.header-mobile.sticky {
  position: fixed;
  top: 0;
  left: 0;
  height: 64px;
}
.header-mobile .header-container {
  top: 0;
  position: static;
  box-shadow: none;
  border-bottom: 1px solid #e8e8e8;
  height: 100%;
  padding: 0 20px;
  gap: 20px;
  justify-content: space-between;
}
.header-mobile .header-container .logo img {
  width: 120px;
}
.header-mobile .header-container .login-btn {
  line-height: 64px;
  margin-left: auto;
}
.header-mobile .header-container .login-btn img {
  width: 20px;
  height: 20px;
  transform: translateY(5px);
}
.header-mobile .header-container .mypage-btn {
  line-height: 64px;
  margin-left: auto;
}
.header-mobile .header-container .mypage-btn img {
  width: 22px;
  height: 22px;
  transform: translateY(6px);
}
.header-mobile .header-container .mobile-language {
  display: block;
  position: relative;
}
.header-mobile .header-container .mobile-language .dropdown-btn {
  line-height: 64px;
}
.header-mobile .header-container .mobile-language .dropdown-btn img {
  width: 20px;
  height: 20px;
  transform: translateY(5px);
}
.header-mobile .header-container .mobile-language .dropdown-content {
  border: 1px solid #e8e8e8;
  padding: 10px;
  font-size: 0.875rem;
  top: 90%;
  border-radius: 10px;
}
.header-mobile .header-container .mobile-header-btn {
  display: flex;
}
.header-mobile .header-container .mobile-header-btn {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.header-mobile .header-container .mobile-header-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #212121;
  transition: 0.3s;
  border-radius: 1px;
}
.header-mobile .header-container .mobile-header-btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header-mobile .header-container .mobile-header-btn.active span:nth-child(2) {
  opacity: 0;
}
.header-mobile .header-container .mobile-header-btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.header-mobile .header-container .mobile-nav {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: #ffffff;
  border-top: 1px solid #e8e8e8;
  z-index: 100;
  padding: 1.5rem 1rem;
}
.header-mobile .header-container .mobile-nav.active {
  display: flex;
  flex-direction: column;
  position: fixed;
  gap: 2.5rem;
}
.header-mobile .header-container .mobile-nav .mobile-menu {
  display: flex;
  flex-direction: column;
}
.header-mobile .header-container .mobile-nav .mobile-menu > li {
  border-bottom: 1px solid #e8e8e8;
}
.header-mobile .header-container .mobile-nav .mobile-menu .mobile-menu-title {
  display: block;
  font-size: 1.125rem;
  padding: 1rem 0;
  letter-spacing: -0.5px;
}
.header-mobile
  .header-container
  .mobile-nav
  .mobile-menu
  .mobile-menu-title:after {
  content: "";
  background: url("/assets/images/common/icon/arrow-down.svg") no-repeat;
  background-size: 24px;
  width: 24px;
  height: 24px;
  float: right;
  transform: translateY(6px);
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  transition: 0.3s;
}
.header-mobile
  .header-container
  .mobile-nav
  .mobile-menu
  .mobile-menu-title.active {
  color: #eb4d3d;
}
.header-mobile
  .header-container
  .mobile-nav
  .mobile-menu
  .mobile-menu-title.active:after {
  transform: translateY(6px) rotate(180deg);
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.header-mobile .header-container .mobile-nav .mobile-menu .mobile-sub-menu {
  display: none;
  padding-left: 1rem;
  padding-bottom: 1.5rem;
  color: #666666;
}
.header-mobile .header-container .mobile-nav .mobile-menu .mobile-sub-menu li {
  padding: 0.5rem 0;
}
.header-mobile
  .header-container
  .mobile-nav
  .mobile-menu
  .mobile-sub-menu
  li:first-child {
  padding-top: 0;
}
.header-mobile
  .header-container
  .mobile-nav
  .mobile-menu
  .mobile-sub-menu
  li:last-child {
  padding-bottom: 0;
}
.header-mobile .header-container .mobile-nav .btn-group {
  flex-direction: column;
}
.header-mobile .header-container .mobile-nav .btn-group button {
  width: 100%;
  height: 52px;
  border-radius: 4px;
  line-height: 52px;
}

.search-overlay {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  z-index: 999;
  transition: top 0.3s ease-in-out;
  padding: 80px 0 100px 0;
}
.search-overlay .search-inner {
  position: relative;
  max-width: 1296px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.search-overlay .search-inner .search-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 700px;
  border-bottom: 1px solid #e8e8e8;
}
.search-overlay .search-inner .search-form input {
  flex: 1;
  padding: 18px 24px;
  font-size: 18px;
  outline: none;
  cursor: pointer;
}
.search-overlay .search-inner .search-form button {
  width: 60px;
  cursor: pointer;
}
.search-overlay .search-inner .search-form button img {
  width: 36px;
  height: 36px;
}

@media (min-width: 768px) and (max-width: 1370px) {
  header .header-container {
    padding: 0 2.5rem;
    gap: 1.5rem;
  }
  header .header-container .logo img {
    width: 140px;
  }
  header .header-container nav .nav-items .nav-item {
    padding: 0 1rem;
  }
  header .header-container nav .nav-items .nav-item .dropdown-wrap {
    padding-left: 220px;
  }
  header .header-container .header-right .header-right-dropdown.search img {
    width: 20px;
    height: 20px;
  }
  header
    .header-container
    .header-right
    .header-right-dropdown.search
    .modal-open-btn {
    font-size: 0.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .header-mobile + .header-spacer {
    display: none;
  }
  header.header-pc {
    display: none;
  }
  header.header-mobile {
    display: block;
  }
  header .search-overlay {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  header.header-pc {
    display: none;
  }
  header.header-mobile {
    display: block;
  }
  header .search-overlay {
    display: none;
  }

  .header-mobile .header-container .mypage.dropdown-content {
    left: unset;
    right: -2%;
    top: 90%;
  }
}

footer {
  width: 100%;
  background-color: #212121;
  color: #aaaaaa;
  font-size: 0.875rem;
}
footer button {
  color: inherit;
}
footer button:hover {
  text-decoration: underline;
}
footer .title {
  font-size: 1rem;
  font-weight: 500;
  color: #dddddd;
  margin-bottom: 10px;
}
footer span {
  display: inline-block;
}
footer b {
  font-weight: 500;
  margin-right: 5px;
}
footer .footer-container {
  max-width: 1920px;
  width: 100%;
  padding: 5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
footer .footer-container .info-lnb {
  display: flex;
  align-items: start;
  gap: 5rem;
  justify-content: space-between;
}
footer .footer-container .info-lnb .info {
  flex: 2;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
footer .footer-container .info-lnb .info p {
  line-height: 1.8;
}
footer .footer-container .info-lnb .info > div {
  line-height: 1.8;
}
footer .footer-container .info-lnb .lnb {
  flex: 3;
  display: flex;
  align-items: start;
  gap: 7.5rem;
}
footer .footer-container .info-lnb .lnb .lnb-item li {
  padding: 3px 0;
  margin-bottom: 10px;
  transition: 0.3s;
}
footer .footer-container .info-lnb .lnb .lnb-item li:hover {
  text-decoration: underline;
}
footer .footer-container .copyright-sns {
  border-top: 1px solid #383838;
  padding-top: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .footer-container .copyright-sns .copyright {
  display: flex;
  gap: 1rem;
}
footer .footer-container .copyright-sns .copyright a:hover {
  text-decoration: underline;
}
footer .footer-container .copyright-sns .sns {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 5px;
}
footer .footer-container .copyright-sns .sns a {
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: 0.3s;
  filter: brightness(0) saturate(100%) invert(73%) sepia(46%) saturate(0%)
    hue-rotate(274deg) brightness(84%) contrast(95%);
}
footer .footer-container .copyright-sns .sns a:hover {
  filter: brightness(0) saturate(100%) invert(100%) sepia(9%) saturate(1%)
    hue-rotate(107deg) brightness(104%) contrast(101%);
}
footer .footer-container .mobile-info,
footer .footer-container .mobile-contact,
footer .footer-container .mobile-copyright {
  display: none;
  text-align: center;
  font-size: 0.75rem;
}
footer .footer-container .mobile-info {
  flex-direction: column;
  gap: 1rem;
}
footer .footer-container .mobile-info .logo img {
  width: 160px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(2%)
    hue-rotate(3deg) brightness(96%) contrast(90%);
}
footer .footer-container .mobile-info address p {
  line-height: 1.6em;
}
footer .footer-container .mobile-contact {
  flex-direction: column;
}
footer .footer-container .mobile-contact span {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
footer .footer-container .mobile-contact a {
  line-height: 1.6em;
}
footer .footer-container .mobile-copyright {
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 1025px) and (max-width: 1430px) {
  footer .footer-container .info-lnb .lnb {
    padding-right: 0;
    gap: 2rem;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  footer .footer-container {
    gap: 2.5rem;
  }
  footer .footer-container .info-lnb .info {
    gap: 1.5rem;
  }
  footer .footer-container .info-lnb .lnb {
    flex-direction: column;
    align-items: flex-end;
    padding-right: 0;
    gap: 0.5rem;
  }
  footer .footer-container .info-lnb .lnb .lnb-item .title {
    margin-bottom: 0;
  }
  footer .footer-container .info-lnb .lnb .lnb-item li:not(.title) {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  footer .footer-container {
    width: 100%;
    padding: 60px 20px;
    gap: 2rem;
  }
  footer .footer-container .info-lnb,
  footer .footer-container .copyright-sns {
    display: none;
  }
  footer .footer-container .mobile-info,
  footer .footer-container .mobile-contact,
  footer .footer-container .mobile-copyright {
    display: flex;
  }
}
.quickmenu {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .quickmenu {
    right: 16px;
    bottom: 16px;
  }
}
.quickmenu .quickmenu-list {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: 0.3s;
  visibility: hidden;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  padding: 12px 0;
  border: 1px solid #e8e8e8;
}
.quickmenu .quickmenu-list li {
  padding: 10px 20px;
  white-space: nowrap;
}
.quickmenu .quickmenu-list li a {
  font-weight: 500;
  color: #111;
  text-decoration: none;
}
.quickmenu .quickmenu-list li a:hover {
  color: #eb4d3d;
}
.quickmenu .quickmenu-list.active {
  opacity: 1;
  visibility: visible;
}
.quickmenu .quickmenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  background-color: #ffffff;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}
.quickmenu .quickmenu-toggle img {
  width: 24px;
  height: 24px;
}
.quickmenu .quickmenu-toggle.chat-btn {
  background-color: #fee500;
}
.quickmenu .quickmenu-toggle.gotop-btn {
  padding-top: 4px;
  border: 1px solid #e8e8e8;
}
.quickmenu .quickmenu-toggle.plus-btn {
  background-color: #333;
}
.quickmenu .quickmenu-toggle.plus-btn img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(0%)
    hue-rotate(77deg) brightness(107%) contrast(105%);
  transition: 0.3s;
}
.quickmenu .quickmenu-toggle.plus-btn.active img {
  transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .quickmenu .quickmenu-toggle {
    width: 48px;
    height: 48px;
  }
  .quickmenu .quickmenu-toggle.plus-btn {
    display: none;
  }
}

/***** Trial *****/
.trial {
  background-color: #f5f7f9;
  padding: 80px 0;
}
.trial .trial-content-wrap {
  width: 1296px;
}
.trial .trial-content-wrap .trial-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trial .trial-content-wrap .trial-content .trial-text {
  text-align: left;
}
.trial .trial-content-wrap .trial-content .trial-text h2 {
  text-align: left;
  margin-bottom: 10px;
  font-weight: 600;
  color: #212121;
}
.trial .trial-content-wrap .trial-content .trial-text h2 .free {
  font-weight: 700;
  color: #eb4d3d;
}
.trial .trial-content-wrap .trial-content .trial-text p {
  font-size: 20px;
  color: #212121;
}
.trial .trial-content-wrap .trial-content .btn-group button {
  padding: 14px 25px;
  font-size: 1.125rem;
  border-radius: 8px;
  transition: 0.3s;
}
.trial .trial-content-wrap .trial-content .btn-group img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(348deg) brightness(106%) contrast(104%);
  vertical-align: -3px;
  margin-left: 5px;
  width: 20px;
  height: 20px;
}
.trial .trial-content-wrap .trial-content .btn-group .trial-btn {
  position: relative;
  border-color: transparent;
  padding-right: 20px;
}
.trial .trial-content-wrap .trial-content .btn-group .purchase-btn:hover {
  background-color: #333333;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .trial {
    padding: 60px 20px;
  }
  .trial .mobile-hidden {
    display: none;
  }
  .trial .trial-content-wrap {
    padding: 0;
  }
  .trial .trial-content-wrap .trial-content {
    flex-direction: column;
    gap: 1.5rem;
  }
  .trial .trial-content-wrap .trial-content .trial-text {
    text-align: center;
  }
  .trial .trial-content-wrap .trial-content .trial-text h2 {
    text-align: center;
    margin-bottom: 6px;
  }
  .trial .trial-content-wrap .trial-content .trial-text p {
    font-size: 1rem;
  }
  .trial .trial-content-wrap .trial-content .btn-group {
    width: 100%;
    flex-direction: column;
  }
  .trial .trial-content-wrap .trial-content .btn-group button {
    width: 100%;
    font-size: 0.875rem;
    border-radius: 4px;
  }
  .trial .trial-content-wrap .trial-content .btn-group img {
    vertical-align: -3px;
    margin-left: 3px;
    width: 16px;
    height: 16px;
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.125rem;
  font-weight: 500;
  transition: 0.3s;
  color: #333333;
}
.btn img {
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 768px) {
  .btn {
    font-size: 1rem;
    border-radius: 4px;
  }
  .btn:active {
    transform: none;
  }
}

.primary,
.primary2 {
  background-color: #eb4d3d;
  color: #ffffff;
  transition: 0.3s linear;
}
.primary:hover,
.primary2:hover {
  background-color: #e21912;
}

.reader-btn {
  background-color: #147bd1;
  color: #ffffff;
}
.reader-btn:hover {
  background-color: #1062a7;
}

.reader-bd {
  border: 1px solid #147bd1;
  color: #147bd1;
}
.reader-bd:hover {
  background-color: rgba(20, 123, 209, 0.1);
}

.basic-btn {
  background-color: #1e459f;
  color: #ffffff;
}
.basic-btn:hover {
  background-color: #18377f;
}

.primary-dark {
  background-color: #ffffff;
  color: #eb4d3d;
}

.secondary {
  border: 1px solid #eb4d3d;
  color: #eb4d3d;
  transition: 0.3s linear;
}
.secondary:hover {
  background-color: #eb4d3d;
  color: #ffffff;
}

.secondary-dark {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: transparent;
}

.tertiary {
  border: 1px solid #cccccc;
  background-color: #ffffff;
  transition: 0.3s linear;
}
.tertiary:hover {
  background-color: #f5f7f9;
}

/* FAQ */
@media screen and (max-width: 768px) {
  .faq {
    padding: 0 20px;
  }
}

/* 아코디언 구조 */
.faq-accordion .accordion .accordion-title {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  padding: 30px 60px 30px 30px;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
}
.faq-accordion .accordion .accordion-title:after {
  content: "";
  background: url("/assets/images/common/icon/add.svg") no-repeat center center;
  background-size: 30px;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  transform-origin: center;
  filter: brightness(0) saturate(100%) invert(77%) sepia(98%) saturate(0%)
    hue-rotate(130deg) brightness(82%) contrast(91%);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.faq-accordion .accordion .accordion-title.active:after {
  transform: translateY(-50%) rotate(45deg);
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.faq-accordion .accordion .accordion-title:hover {
  background-color: rgba(246, 248, 251, 0.5);
}
.faq-accordion .accordion .accordion-title:hover:after {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.faq-accordion .accordion .accordion-title:not(.active):hover::after {
  filter: brightness(0) saturate(100%) invert(77%) sepia(98%) saturate(0%)
    hue-rotate(130deg) brightness(82%) contrast(91%);
}
.faq-accordion .accordion .accordion-content {
  display: none;
  padding: 30px;
  /*font-size: 1.125rem;*/
  line-height: 1.8;
  color: #666;
  background-color: #f5f7f9;
}
.faq-accordion .accordion .accordion-content a {
  color: #eb4d3d;
  text-decoration: underline;
}
.faq-accordion .accordion .accordion-content:hover {
  color: #333;
}
.faq-accordion .accordion .accordion-content .post-attachment {
  font-size: 1rem;
}
.faq-accordion .accordion .accordion-content .post-attachment a img {
  vertical-align: -3px;
}

@media screen and (max-width: 768px) {
  .faq-accordion .accordion .accordion-content .post-attachment {
    font-size: 0.875rem;
  }
  .faq-accordion .accordion .accordion-content .post-attachment .label {
    display: none;
  }
}

.faq-accordion .more-btn {
  display: block;
  width: max-content;
  margin: 40px auto 0;
  text-align: center;
  font-size: 1.125rem;
}
.faq-accordion .more-btn:hover {
  text-decoration: underline;
}

.faq-accordion.mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .faq-accordion .accordion {
    background-color: #f5f7f9;
    border-radius: 10px;
    padding: 20px;
  }

  .faq-accordion .accordion .accordion-title > div:nth-child(1) {
    display: none;
  }
  .faq-accordion .accordion .accordion-title > div:nth-child(2) {
    display: inline;
  }
  .faq-accordion .accordion .accordion-title > div:nth-child(3) {
    display: inline;
  }

  .faq-accordion .accordion .accordion-title {
    font-size: 1rem;
    padding: 0 24px 0 0;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .faq-accordion .accordion .accordion-title span.label {
    font-size: 0.75rem;
    color: #eb4d3d;
    font-weight: 600;
  }
  .faq-accordion .accordion .accordion-title:after {
    background-size: 18px;
    width: 18px;
    height: 18px;
    right: 0;
    top: 0;
    transform: none;
  }
  .faq-accordion .accordion .accordion-title.active::after {
    transform: rotate(45deg);
  }
  .faq-accordion .accordion .accordion-content {
    padding: 0;
    margin-top: 0.5rem;
    font-size: 0.875rem;
  }
  .faq-accordion .more-btn {
    width: 100%;
    padding: 20px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
  }
}
.format-list {
  padding: 10rem 0;
}
.format-list .format-list-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 1.5rem;
}
.format-list .format-list-items.item-5 {
  flex-direction: column;
  align-items: center;
}
.format-list .format-list-items.item-5 .row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.format-list .format-list-items .format-list-item {
  flex: 0 0 306px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 30px;
  gap: 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.format-list .format-list-items .format-list-item:hover {
  background-color: #f5f7f9;
}
.format-list
  .format-list-items
  .format-list-item:hover
  .format-item-wrap:after {
  bottom: 20px;
}
.format-list .format-list-items .format-list-item:hover > h3 {
  color: #eb4d3d;
}
.format-list .format-list-items .format-list-item:hover > h3:after {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.format-list .format-list-items .format-list-item > h3 {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: #333333;
  transition: 0.3s;
}
.format-list .format-list-items .format-list-item .format-item-wrap {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.format-list .format-list-items .format-list-item .format-item-wrap:after {
  content: "자세히 보기";
  position: absolute;
  bottom: -100%;
  padding: 10px 15px;
  background-color: #eb4d3d;
  color: #ffffff;
  border-radius: 20px;
  transition: 0.3s;
}
.format-list .format-list-items .format-list-item .format-item-wrap img {
  width: inherit;
  height: inherit;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .format-list {
    padding: 60px 20px;
  }
  .format-list .format-list-items {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .format-list .format-list-items.item-5 .row {
    flex-direction: column;
    gap: 1rem;
  }
  .format-list .format-list-items .format-list-item {
    width: 100%;
    max-width: 100%;
    flex: unset;
    padding: 0;
    align-items: center;
    position: relative;
    border-radius: 10px;
    box-shadow: none;
  }
  .format-list .format-list-items .format-list-item p {
    text-align: center;
  }
  .format-list .format-list-items .format-list-item .format-item-wrap {
    width: 100%;
    aspect-ratio: 16/3;
    height: auto;
    border-radius: 10px;
    position: relative;
  }
  .format-list .format-list-items .format-list-item .format-item-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .format-list .format-list-items .format-list-item .format-item-wrap:after {
    display: none;
  }
  .format-list .format-list-items .format-list-item .format-item-wrap::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(29, 23, 23, 0.3);
  }
  .format-list .format-list-items .format-list-item h3 {
    font-size: 1.125rem;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: 500;
  }
  .format-list .format-list-items .format-list-item h3:after {
    content: "";
    background: url("/assets/images/common/icon/arrow-right.svg");
    background-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: -4px;
    filter: brightness(0) saturate(100%) invert(99%) sepia(4%) saturate(18%)
      hue-rotate(237deg) brightness(106%) contrast(100%);
  }
}

/* Translator 버전 확인 */
.format-select .format-select-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.format-select .format-select-wrap .format-select-box.mobile {
  display: none;
}
.format-select .format-select-wrap .format-select-box.mobile select {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.875rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.format-select .format-select-wrap .format-select-box {
  flex: 1;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}
.format-select .format-select-wrap .format-select-box h4 {
  margin-bottom: 1.5rem;
}
.format-select .format-select-wrap .format-select-box label {
  display: block;
  margin-top: 20px;
  font-size: 1.125rem;
}
.format-select
  .format-select-wrap
  .format-select-box
  label
  input[type="radio"] {
  margin-right: 5px;
  accent-color: #eb4d3d;
}
.format-select
  .format-select-wrap
  .format-select-box
  label:has(input:disabled) {
  color: #bbbbbb;
}
.format-select button {
  display: block;
  margin: 40px auto;
  width: 230px;
  height: 55px;
  font-size: 1.125rem;
  background-color: #333;
  color: #ffffff;
  border-radius: 999px;
  transition: 0.3s;
}
.format-select button:hover,
.format-select button:active {
  background-color: #000;
}
.format-select #result {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}
.format-select #result h4 {
  margin-bottom: 1.5rem;
}
.format-select #result .result-wrap {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}
.format-select #result .result-wrap .result-import,
.format-select #result .result-wrap .result-export {
  flex: 1;
}
.format-select #result .result-wrap .result-import .format,
.format-select #result .result-wrap .result-export .format {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #666666;
}
.format-select #result .result-wrap .result-import .version,
.format-select #result .result-wrap .result-export .version {
  font-weight: 600;
  font-size: 1.125rem;
}
.format-select #result .result-wrap .result-export {
  margin-left: 60px;
}
@media screen and (max-width: 768px) {
  .format-select .format-select-wrap {
    flex-direction: column;
    gap: 0.5rem;
  }
  .format-select .format-select-wrap .format-select-box:not(.mobile) {
    display: none;
  }
  .format-select .format-select-wrap .format-select-box.mobile {
    display: block;
    width: 100%;
    padding: 20px;
    border-radius: 10px;
  }
  .format-select .format-select-wrap .format-select-box.mobile h4 {
    margin-left: 3px;
    margin-bottom: 0.5rem;
  }
  .format-select .format-select-wrap .format-select-box.mobile label {
    font-size: 1rem;
  }
  .format-select button {
    width: 100%;
    height: 52px;
    margin: 1rem 0;
    font-size: 1rem;
  }
  .format-select #result {
    padding: 20px;
    border-radius: 10px;
  }
  .format-select #result h4 {
    margin-bottom: 1rem;
  }
  .format-select #result .result-wrap {
    flex-direction: column;
    gap: 1rem;
  }
  .format-select #result .result-wrap .result-import .format,
  .format-select #result .result-wrap .result-export .format {
    font-size: 0.875rem;
    margin-bottom: 6px;
  }
  .format-select #result .result-wrap .result-import .version,
  .format-select #result .result-wrap .result-export .version {
    font-size: 1rem;
  }
  .format-select #result .result-wrap .result-export {
    margin-left: 0;
  }
}

/* 주요 기능 */
.function h2 {
  margin-bottom: 6rem;
}
.function .function-items .function-item {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 10rem;
}
.function .function-items .function-item > div {
  flex: 1;
}
.function .function-items .function-item .function-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7f9;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.function .function-items .function-item .function-img img {
  width: inherit;
  height: inherit;
  object-fit: contain;
  display: block;
}
.function .function-items .function-item .function-img .play-button {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 48px;
  height: 48px;
  background: url("/assets/images/common/icon/play-circle.svg") no-repeat center
    center;
  background-size: contain;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease;
  filter: brightness(0) saturate(100%) invert(90%) sepia(0%) saturate(0%)
    hue-rotate(160deg) brightness(92%) contrast(92%);
}
.function .function-items .function-item .function-img .play-button:hover {
  transform: scale(1.1);
}
.function .function-items .function-item .function-desc {
  width: 100%;
  /* 키워드 박스 */
}
.function .function-items .function-item .function-desc h3 {
  text-align: left;
  margin-bottom: 1.5rem;
}
.function .function-items .function-item .function-desc p {
  font-size: 1.125rem;
  color: #666666;
  line-height: 1.4;
  word-break: keep-all;
}
.function .function-items .function-item .function-desc a {
  display: inline-block;
  margin-top: 1rem;
  padding: 12px 20px;
  font-weight: 600;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.function .function-items .function-item .function-desc a img {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  transition: 0.3s;
}
.function .function-items .function-item .function-desc a:hover {
  color: #eb4d3d;
}
.function .function-items .function-item .function-desc a:hover img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.function .function-items .function-item .function-desc .keyword {
  width: 100%;
  margin-top: 2.5rem;
  padding: 15px 20px;
  color: #666666;
  background-color: #f5f7f9;
  border-radius: 20px;
}
.function .function-items .function-item .function-desc .keyword li {
  line-height: 2rem;
}
.function .function-items .function-item .function-desc .keyword li::before {
  content: "\e876";
  font-family: "Material Icons";
  font-size: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  filter: brightness(0) saturate(100%) invert(30%) sepia(34%) saturate(5735%)
    hue-rotate(201deg) brightness(106%) contrast(104%);
}
.function .function-items .function-item .function-desc .keyword i {
  color: #000;
  font-weight: 600;
}
.function .function-items .function-item .function-desc span {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #666;
  line-height: 1.4;
}
.function .function-items .function-item .function-desc span strong {
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .function {
    padding: 0 20px;
  }
  .function h2 {
    margin-bottom: 2rem;
  }
  .function .function-items .function-item {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    gap: 1rem;
  }
  .function .function-items .function-item:last-child {
    margin-bottom: 60px;
  }
  .function .function-items .function-item .function-img {
    order: 1;
    align-items: flex-end;
    border-radius: 10px;
  }
  .function .function-items .function-item .function-desc {
    order: 2;
    padding-left: 3px;
  }
  .function .function-items .function-item .function-desc h2 {
    margin-bottom: 6px;
    font-size: 1.5rem;
  }
  .function .function-items .function-item .function-desc h3 {
    margin-bottom: 6px;
    font-size: 1.125rem;
  }
  .function .function-items .function-item .function-desc p {
    font-size: 0.875rem;
  }
  .function .function-items .function-item .function-desc a {
    margin-top: 1rem;
    padding: 8px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
  }
  .function .function-items .function-item .function-desc a img {
    display: none;
  }
  .function .function-items .function-item .function-desc .keyword {
    width: calc(100% + 3px);
    transform: translateX(-3px);
    margin-top: 10px;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 10px 15px;
  }
  .function .function-items .function-item .function-desc .keyword li:before {
    font-size: 16px;
  }
  .function .function-items .function-item .function-desc span {
    margin-top: 0.5rem;
  }
}

/* 부가 기능 */
.add-function .add-function-items-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.add-function .add-function-items-wrap .add-function-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}
.add-function .add-function-items-wrap .add-function-items .add-function-item {
  flex: 1;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.01);
  transition: 0.3s;
  cursor: pointer;
}
.add-function
  .add-function-items-wrap
  .add-function-items
  .add-function-item
  img {
  height: 24px;
  width: 24px;
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.add-function
  .add-function-items-wrap
  .add-function-items
  .add-function-item
  h4 {
  margin: 1.5rem 0 0.5rem;
}
.add-function
  .add-function-items-wrap
  .add-function-items
  .add-function-item
  p {
  font-size: 1rem;
  color: #666666;
  line-height: 1.4;
}
.add-function
  .add-function-items-wrap
  .add-function-items
  .add-function-item
  .ul-group {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 1rem;
  color: #666666;
}
.add-function
  .add-function-items-wrap
  .add-function-items
  .add-function-item
  .ul-group
  ul {
  flex: 1;
  margin-left: 20px;
  list-style: disc;
  line-height: 1.8;
}
.add-function
  .add-function-items-wrap
  .add-function-items
  .add-function-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 5px rgba(0, 0, 0, 0.03);
}
@media screen and (max-width: 768px) {
  .add-function .add-function-items-wrap {
    gap: 1rem;
  }
  .add-function .add-function-items-wrap .add-function-items {
    flex-direction: column;
    gap: 1rem;
  }
  .add-function
    .add-function-items-wrap
    .add-function-items
    .add-function-item {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
  }
  .add-function
    .add-function-items-wrap
    .add-function-items
    .add-function-item
    img {
    width: 18px;
    height: 18px;
  }
  .add-function
    .add-function-items-wrap
    .add-function-items
    .add-function-item
    h4 {
    margin-top: 1rem;
    margin-bottom: 6px;
  }
  .add-function
    .add-function-items-wrap
    .add-function-items
    .add-function-item
    p {
    font-size: 0.875rem;
  }
  .add-function
    .add-function-items-wrap
    .add-function-items
    .add-function-item
    .ul-group {
    gap: 0;
    margin-top: 3px;
  }
  .add-function
    .add-function-items-wrap
    .add-function-items
    .add-function-item
    .ul-group
    ul {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

/* 유용한 기능 */
.useful-function h2 {
  text-align: left;
}
.useful-function .useful-function-items {
  display: flex;
  gap: 1.5rem;
}
.useful-function .useful-function-items .useful-function-item {
  flex: 1;
  padding: 30px;
  background-color: #f5f7f9;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
.useful-function .useful-function-items .useful-function-item h4 {
  margin-bottom: 0.5rem;
  text-align: left;
}
.useful-function .useful-function-items .useful-function-item p {
  color: #666666;
}
.useful-function .useful-function-items .useful-function-item img {
  position: absolute;
  right: 30px;
  bottom: 30px;
  filter: brightness(0) saturate(100%) invert(42%) sepia(13%) saturate(1079%)
    hue-rotate(189deg) brightness(94%) contrast(94%);
  width: 60px;
  height: 60px;
  opacity: 0.1;
}
@media screen and (max-width: 768px) {
  .useful-function {
    padding: 0 20px;
  }
  .useful-function h2 {
    text-align: center;
  }
  .useful-function .useful-function-items {
    flex-direction: column;
    gap: 0.5rem;
  }
  .useful-function .useful-function-items .useful-function-item {
    padding: 20px;
    border-radius: 10px;
  }
  .useful-function .useful-function-items .useful-function-item h4 {
    margin-bottom: 3px;
  }
  .useful-function .useful-function-items .useful-function-item p {
    font-size: 0.875rem;
  }
  .useful-function .useful-function-items .useful-function-item img {
    width: 40px;
    height: 40px;
    right: 20px;
    top: 20px;
  }
}

/* 메인 헤딩 */
.top-heading {
  margin: 0;
  padding: 7.5rem 0;
  width: 100%;
  min-height: 600px;
  background: #f5f7f9 url(/assets/images/heading/back.png) no-repeat center
    bottom;
  background-size: auto 100%;
}
.top-heading .heading-content-wrap {
  display: flex;
  align-items: center;
  gap: 7.5rem;
  flex-wrap: wrap;
}
.top-heading .heading-content-wrap .heading-content {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.top-heading .heading-content-wrap .heading-content .breadcrumb {
  width: 100%;
  margin-left: 5px;
  margin-bottom: 0.5rem;
}
.top-heading .heading-content-wrap .heading-content .breadcrumb ul {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #999;
}
.top-heading .heading-content-wrap .heading-content .heading-text {
  text-align: left;
}
.top-heading .heading-content-wrap .heading-content .heading-text h1 {
  margin-bottom: 1.5rem;
}
.top-heading .heading-content-wrap .heading-content .heading-text h1 span {
  color: #666666;
  font-size: 1.5rem;
  font-weight: 500;
}
.top-heading .heading-content-wrap .heading-content .heading-text h1 img {
  width: auto;
  height: 50px;
}
.top-heading .heading-content-wrap .heading-content .heading-text p {
  padding-left: 3px;
  font-size: 1.125rem;
  line-height: 1.4;
}
.top-heading .heading-content-wrap .heading-content .heading-text p strong {
  font-size: 1.125rem;
}
.top-heading .heading-content-wrap .heading-content .heading-text p span {
  display: block;
  margin-top: 0.5rem;
  color: #666666;
  font-size: 1rem;
}
.top-heading .heading-content-wrap .heading-content .heading-text p span img {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  filter: brightness(0) saturate(100%) invert(35%) sepia(22%) saturate(894%)
    hue-rotate(172deg) brightness(95%) contrast(95%);
}
.top-heading .heading-content-wrap .heading-content .heading-text p span i {
  display: block;
  font-weight: 600;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .heading-text
  p
  span
  i.last {
  margin-top: 10px;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .heading-text
  .heading-info {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.4;
}
.top-heading .heading-content-wrap .heading-content .btn-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}
.top-heading .heading-content-wrap .heading-content .btn-group a,
.top-heading .heading-content-wrap .heading-content .btn-group button {
  width: 230px;
  height: 60px;
}
.top-heading .heading-content-wrap .heading-content .btn-group a img,
.top-heading .heading-content-wrap .heading-content .btn-group button img {
  transition: 0.3s;
  filter: brightness(0) saturate(100%) invert(47%) sepia(11%) saturate(0%)
    hue-rotate(220deg) brightness(96%) contrast(93%);
}
.top-heading .heading-content-wrap .heading-content .btn-group > a {
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}
.top-heading .heading-content-wrap .heading-content .btn-group > a:hover {
  background-color: #ffffff;
  color: #212121;
}
.top-heading .heading-content-wrap .heading-content .btn-group button {
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.top-heading .heading-content-wrap .heading-content .btn-group .tertiary {
  color: #666666;
  border-color: transparent;
  gap: 5px;
  width: 230px;
  height: 60px;
  /* box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05); */
}
.top-heading .heading-content-wrap .heading-content .btn-group .tertiary:hover {
  color: #212121;
  border: 1px solid #e8e8e8;
  background-color: #ffffff;
}

.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .tertiary
  > button.play-button {
  color: #666;
  font-size: 18px;
  line-height: 18px;
  border-radius: 10px;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .tertiary
  > button.play-button:hover {
  color: #212121;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .tertiary
  > button.play-button
  img {
  gap: 5px;
  vertical-align: -5.5px;
}

.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .tertiary:hover
  img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(0%)
    hue-rotate(194deg) brightness(98%) contrast(85%);
}
.top-heading .heading-content-wrap .heading-content .btn-group .file-dropdown {
  position: relative;
  display: inline-block;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .file-dropdown
  .btn {
  cursor: pointer;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .file-dropdown
  #fileDropdownToggle
  img {
  transition: 0.3s;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .file-dropdown
  .file-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: 0.3s;
  overflow: hidden;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .file-dropdown
  .file-dropdown-menu
  li
  a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .file-dropdown
  .file-dropdown-menu
  li
  a:hover {
  background-color: #f5f7f9;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .file-dropdown.active
  #fileDropdownToggle
  img {
  transform: rotate(180deg);
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .file-dropdown.active
  .file-dropdown-menu {
  opacity: 1;
  visibility: visible;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .reader-btn-wrap {
  width: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .reader-btn-wrap
  .reader-btn {
  width: 100%;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .reader-btn-wrap
  .btn-info {
  margin-top: 10px;
  padding-left: 5px;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
  color: #666666;
  white-space: nowrap;
  text-align: left;
}
.top-heading
  .heading-content-wrap
  .heading-content
  .btn-group
  .reader-btn-wrap
  .btn-info
  a {
  color: #147bd1;
  text-decoration: underline;
}
.top-heading .heading-content-wrap .heading-img {
  width: 100%;
  height: 400px;
  max-width: 650px;
}
.top-heading .heading-content-wrap .heading-img img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.top-heading .heading-content-wrap .heading-img img[src$="intercad-basic.png"],
.top-heading .heading-content-wrap .heading-img img[src$="security.png"],
.top-heading
  .heading-content-wrap
  .heading-img
  img[src$="intercad-translator.png"] {
  box-shadow: none;
}
@media screen and (max-width: 1200px) {
  .top-heading {
    position: relative;
  }
  .top-heading .heading-content-wrap {
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }
  .top-heading .heading-content-wrap .heading-content {
    align-items: center;
    justify-content: center;
    order: 2;
  }
  .top-heading .heading-content-wrap .heading-content .breadcrumb {
    margin-left: 0;
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .top-heading .heading-content-wrap .heading-content .breadcrumb ul {
    justify-content: center;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text {
    text-align: center;
    width: 80%;
  }
  .top-heading .heading-content-wrap .heading-img {
    order: 1;
  }
}
@media screen and (max-width: 768px) {
  .top-heading {
    padding: 60px 20px;
    position: relative;
  }
  .top-heading .heading-content-wrap {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
  .top-heading .heading-content-wrap .heading-content {
    flex-basis: auto;
    order: 2;
    width: 100%;
  }
  .top-heading .heading-content-wrap .heading-content .breadcrumb {
    margin-left: 0;
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .top-heading .heading-content-wrap .heading-content .breadcrumb ul {
    font-size: 0.75rem;
    justify-content: center;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text {
    width: 100%;
    text-align: center;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text h1 {
    margin-bottom: 1rem;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text h1 span {
    font-size: 1rem;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text p {
    font-size: 1rem;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text p strong {
    font-size: 1rem;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text p span {
    font-size: 0.875rem;
  }
  .top-heading .heading-content-wrap .heading-content .heading-text p span img {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
  }
  .top-heading
    .heading-content-wrap
    .heading-content
    .heading-text
    .heading-info {
    font-size: 1rem;
  }
  .top-heading .heading-content-wrap .heading-content .btn-group {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .top-heading .heading-content-wrap .heading-content .btn-group a,
  .top-heading .heading-content-wrap .heading-content .btn-group button {
    width: 100%;
    height: 52px;
  }
  .top-heading .heading-content-wrap .heading-content .btn-group .tertiary {
    width: 100%;
    gap: 3px;
  }
  .top-heading
    .heading-content-wrap
    .heading-content
    .btn-group
    .tertiary
    > button.play-button {
    border-radius: 4px;
    font-weight: 500;
    font-size: 1rem;
  }
  .top-heading
    .heading-content-wrap
    .heading-content
    .btn-group
    .tertiary
    > button.play-button
    img {
    vertical-align: -2.5px;
  }
  .top-heading .heading-content-wrap .heading-content .btn-group .tertiary img {
    width: 18px;
    height: 18px;
  }
  .top-heading
    .heading-content-wrap
    .heading-content
    .btn-group
    .file-dropdown {
    width: 100%;
  }
  .top-heading
    .heading-content-wrap
    .heading-content
    .btn-group
    .file-dropdown
    .file-dropdown-menu
    li
    a {
    font-size: 1rem;
  }
  .top-heading
    .heading-content-wrap
    .heading-content
    .btn-group
    .reader-btn-wrap {
    width: 100%;
    align-items: center;
  }
  .top-heading
    .heading-content-wrap
    .heading-content
    .btn-group
    .reader-btn-wrap
    .btn-info {
    font-size: 0.75rem;
    margin-top: 6px;
    padding-left: 0;
    text-align: center;
  }
  .top-heading .heading-content-wrap .heading-img {
    order: 1;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .top-heading .heading-content-wrap .heading-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
}

.has-page-nav .top-heading-board {
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
}
@media screen and (max-width: 768px) {
  .has-page-nav .top-heading-board {
    padding: 2rem 20px;
  }
}

.top-heading-board {
  padding-top: 7.5rem;
  padding-bottom: 5rem;
}
@media screen and (max-width: 768px) {
  .top-heading-board {
    padding-top: 60px;
    padding-bottom: 2rem;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.top-heading-board .heading-text {
  text-align: center;
}
.top-heading-board .heading-text h1 {
  margin-bottom: 0.5rem;
}
.top-heading-board .heading-text h1 span {
  color: #666666;
  font-size: 1.5rem;
  font-weight: 500;
}
.top-heading-board .heading-text h1 img {
  height: 50px;
  width: auto;
}
.top-heading-board .heading-text p {
  font-size: 1.125rem;
}
@media screen and (max-width: 768px) {
  .top-heading-board .heading-text h1 span {
    font-size: 1rem;
  }
  .top-heading-board .heading-text p {
    font-size: 1rem;
  }
}

.text-info-box {
  padding: 10rem 0;
  background-color: #ffffff;
}
.text-info-box .info-box-wrap .info-box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
  margin-bottom: 0.5rem;
}
.text-info-box .info-box-wrap .info-box-title h3 {
  margin-bottom: 0;
  text-align: left;
  margin-left: 10px;
}
.text-info-box .info-box-wrap .info-box-title h3.after {
  margin-left: 30px;
}
.text-info-box .info-box-wrap .before {
  flex: 2;
}
.text-info-box .info-box-wrap .after {
  flex: 3;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
  cursor: pointer;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item div {
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: start;
  height: 120px;
  padding: 2.5rem;
  margin-top: 1.5rem;
  line-height: 1.4;
  font-size: 1.125rem;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item div a {
  text-decoration: underline;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item .before {
  background-color: #f5f7f9;
  position: relative;
  color: #666666;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item .before span {
  font-weight: 600;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item .before::after {
  content: "";
  background-image: url(/assets/images/common/icon/straight.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  width: 48px;
  height: 48px;
  right: -65px;
  transform: rotate(90deg);
  filter: brightness(0) saturate(100%) invert(97%) sepia(2%) saturate(1041%)
    hue-rotate(181deg) brightness(96%) contrast(99%);
}
.text-info-box .info-box-wrap .info-box-items .info-box-item .after {
  background-color: #ffffff;
  border: 2px solid #eef1f5;
  transition: 0.3s;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item .after span {
  font-weight: 600;
  color: #eb4d3d;
}
.text-info-box .info-box-wrap .info-box-items .info-box-item .after:hover {
  transform: scale(1.03);
}
.text-info-box .info-box-wrap .info-box-items.mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .text-info-box {
    padding: 60px 20px;
  }
  .text-info-box .info-box-wrap .info-box-title,
  .text-info-box .info-box-wrap .info-box-items {
    display: none;
  }
  .text-info-box .info-box-wrap .info-box-items.mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
  }
  .text-info-box .info-box-wrap .info-box-items.mobile .info-box-item {
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
  }
  .text-info-box
    .info-box-wrap
    .info-box-items.mobile
    .info-box-item
    .info-icon-box {
    width: 40px;
    height: 40px;
    background-color: #fbeeec;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    justify-content: center;
    min-width: 40px;
  }
  .text-info-box .info-box-wrap .info-box-items.mobile .info-box-item img {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
      hue-rotate(316deg) brightness(108%) contrast(111%);
  }
}

body.iframe-mode header,
body.iframe-mode footer {
  display: none !important;
}
body.iframe-mode .modal-body {
  padding: 30px;
  max-height: 90vh;
  overflow-y: auto;
}
body.iframe-mode .container {
  max-width: 100%;
  padding: 0 16px;
}

.btn-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 768px) {
  .btn-group {
    gap: 0.5rem;
  }
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  opacity: 1;
  pointer-events: none;
  visibility: hidden;
  transition: background-color 0.4s ease;
  overflow-x: hidden;
}
.modal.active {
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  visibility: visible;
}
.modal.active .modal-content {
  transform: scale(1);
  opacity: 1;
}
.modal.closing {
  background-color: rgba(0, 0, 0, 0);
}
.modal.closing .modal-content {
  transform: scale(0.9);
  opacity: 0;
}
.modal .modal-content {
  position: relative;
  width: 620px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 10px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.modal .modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px;
  text-align-last: left;
}
.modal .modal-content .modal-header .modal-header-text h2 {
  margin: 0;
  font-weight: 600;
}
.modal .modal-content .modal-header .modal-header-text p {
  margin-top: 10px;
  color: #666666;
}
.modal .modal-content .modal-header .close-btn img {
  width: 36px;
  height: 36px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(454%)
    hue-rotate(280deg) brightness(98%) contrast(90%);
  cursor: pointer;
}
.modal .modal-content .modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;
}
.modal .modal-content .modal-body form div {
  margin-bottom: 1.5rem;
}
.modal .modal-content .modal-body form div > label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 10px;
  color: #666666;
  font-weight: 600;
}
.modal .modal-content .modal-body form div > label span {
  color: #f00;
}
.modal .modal-content .modal-body form div input,
.modal .modal-content .modal-body form div textarea,
.modal .modal-content .modal-body form div select {
  border: 1px solid #dddddd;
  width: 100%;
  padding: 13px;
  line-height: 1.4rem;
  font-size: 1rem;
  transition: 0.3s;
  border-radius: 8px;
}
.modal .modal-content .modal-body form div option {
  background-color: white;
  color: #666666;
  padding: 10px;
}
.modal .modal-content .modal-body form div textarea {
  height: 100px;
  resize: vertical;
}
.modal .modal-content .modal-body form div.company-info,
.modal .modal-content .modal-body form div.product-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal .modal-content .modal-body form div.company-info div,
.modal .modal-content .modal-body form div.product-info div {
  flex: 1;
  margin-bottom: 0;
}
.modal .modal-content .modal-body form div .mac-download {
  border: 1px solid #dddddd;
  width: 100%;
  padding: 13px;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  transition: 0.3s;
  border-radius: 8px;
  color: #333333;
  font-weight: 500;
}
.modal .modal-content .modal-body form div .mac-download img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  transition: 0.2s;
  filter: brightness(0) saturate(100%) invert(14%) sepia(0%) saturate(40%)
    hue-rotate(181deg) brightness(99%) contrast(83%);
}
.modal .modal-content .modal-body form div .mac-download:hover {
  color: #eb4d3d;
}
.modal .modal-content .modal-body form div .mac-download:hover img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.modal .modal-content .modal-body form div .file-upload {
  position: relative;
  width: 100%;
  border: 1px dashed #ddd;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 8px;
  transition: 0.3s;
}
.modal .modal-content .modal-body form div .file-upload:hover {
  border-color: #999999;
}
.modal .modal-content .modal-body form div .file-upload img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(0%) saturate(0%)
    hue-rotate(138deg) brightness(96%) contrast(119%);
  width: 36px;
  height: 36px;
}
.modal .modal-content .modal-body form div .file-upload input {
  display: none;
}
.modal .modal-content .modal-body form div .file-upload label,
.modal .modal-content .modal-body form div .file-upload span {
  font-size: 1rem;
}
.modal .modal-content .modal-body form div .file-upload label {
  color: #333333;
  font-weight: 500;
  margin-bottom: 0;
}
.modal .modal-content .modal-body form div .file-upload .file-info {
  color: #bbbbbb;
  font-size: 1rem;
}
.modal .modal-content .modal-body form div.btn-group button {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
}
.modal .modal-content .modal-body form div.btn-group button.reset {
  background-color: #dddddd;
}
@media screen and (max-width: 768px) {
  .modal .modal-content .modal-body form div.btn-group button.reset {
    order: 2;
  }
}
.modal .modal-content .modal-body form div.btn-group button.submit {
  color: #ffffff;
  background-color: #eb4d3d;
}
@media screen and (max-width: 768px) {
  .modal .modal-content .modal-body form div.btn-group button.submit {
    order: 1;
  }
}
.modal .modal-content .modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal .modal-content .modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal .modal-content .modal-body::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 3px;
}
.modal .modal-content .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #b8b8b8;
}
.modal .modal-content .modal-body::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}
@media screen and (max-width: 768px) {
  .modal .modal-content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal .modal-content .modal-header {
    padding: 30px;
  }
  .modal .modal-content .modal-header .modal-header-text p {
    margin-top: 5px;
  }
  .modal .modal-content .modal-header .close-btn img {
    width: 24px;
    height: 24px;
  }
  .modal .modal-content .modal-body {
    padding: 20px;
  }
  .modal .modal-content .modal-body form div {
    margin-bottom: 0.5rem;
  }
  .modal .modal-content .modal-body form div > label {
    margin-bottom: 5px;
    font-size: 0.75rem;
  }
  .modal .modal-content .modal-body form div input,
  .modal .modal-content .modal-body form div textarea,
  .modal .modal-content .modal-body form div select {
    font-size: 0.875rem;
    line-height: 1.4;
    border-radius: 4px;
  }
  .modal .modal-content .modal-body form div.company-info {
    flex-direction: column;
    gap: 0.5rem;
  }
  .modal .modal-content .modal-body form div.company-info div {
    width: 100%;
  }
  .modal .modal-content .modal-body form div.product-info {
    flex-direction: column;
    gap: 0.5rem;
  }
  .modal .modal-content .modal-body form div.product-info div {
    width: 100%;
  }
  .modal .modal-content .modal-body form div .mac-download {
    font-size: 0.875rem;
  }
  .modal .modal-content .modal-body form div .file-upload {
    gap: 3px;
  }
  .modal .modal-content .modal-body form div .file-upload img {
    width: 24px;
    height: 24px;
  }
  .modal .modal-content .modal-body form div .file-upload label,
  .modal .modal-content .modal-body form div .file-upload span,
  .modal .modal-content .modal-body form div .file-upload .file-info {
    font-size: 0.875rem;
  }
  .modal .modal-content .modal-body form div.btn-group {
    flex-direction: column;
    gap: 8px;
  }
  .modal .modal-content .modal-body form div.btn-group button {
    width: 100%;
    height: 52px;
    border-radius: 4px;
  }
}

.process {
  padding-bottom: 200px;
}
.process .process-list {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 60px 40px;
}
.process .process-list .process-list-item {
  flex-basis: 618px;
}
.process .process-list .process-list-item:last-child .process-img img {
  transform: scale(1) translateY(0);
}
.process .process-list .process-list-item .process-img {
  width: 100%;
  background-color: #f5f7f9;
  border-radius: 20px;
  overflow: hidden;
}
.process .process-list .process-list-item .process-img .img-placeholder {
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: #666666;
}
.process .process-list .process-list-item .process-img img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  display: block;
  transform: scale(2) translateY(-10px);
}
.process .process-list .process-list-item .process-text {
  margin-top: 2rem;
}
.process .process-list .process-list-item .process-text h3 {
  margin-bottom: 1rem;
}
.process .process-list .process-list-item .process-text p {
  font-size: 1.125rem;
}
@media screen and (max-width: 768px) {
  .process {
    padding: 0 20px 60px 20px;
  }
  .process .process-list {
    gap: 40px;
  }
  .process .process-list .process-list-item .process-img {
    border-radius: 10px;
  }
  .process .process-list .process-list-item .process-text {
    margin-left: 3px;
    margin-top: 1rem;
  }
  .process .process-list .process-list-item .process-text h3 {
    margin-bottom: 0.5rem;
  }
  .process .process-list .process-list-item .process-text p {
    font-size: 1rem;
  }
}

section.process-img .img-wrap {
  max-width: 100%;
  overflow-x: hidden;
}
section.process-img .img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  section.process-img {
    padding: 0 20px;
  }
  section.process-img .img-wrap {
    height: 300px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  section.process-img .img-wrap img {
    height: 100%;
    width: auto;
  }
}

.scenario-tab .scenario-tab-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 565px;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab {
  flex: 1;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
  padding: 30px;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab h4 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab h4 span {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab h4 span img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab .scneario-text {
  display: none;
  color: #666666;
  line-height: 1.4;
  margin-top: 1rem;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab .ul-group {
  margin-top: 1rem;
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab .ul-group ul {
  list-style: disc;
  margin-left: 15px;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab a {
  display: block;
  margin-top: 24px;
  font-size: 0.875rem;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab a:hover {
  text-decoration: underline;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab:hover {
  background-color: #e2e9ed;
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab.active {
  opacity: 1;
  filter: grayscale(0);
}
.scenario-tab .scenario-tab-wrap .scenario-function-tab .tab.active:hover {
  background-color: transparent;
}
.scenario-tab
  .scenario-tab-wrap
  .scenario-function-tab
  .tab.active
  .scneario-text {
  display: block;
}
.scenario-tab .scenario-tab-wrap .scneario-img {
  flex: 2;
  width: 100%;
  height: 100%;
  max-width: 844px;
}
.scenario-tab .scenario-tab-wrap .scneario-img .img-group {
  display: none;
  width: inherit;
  height: inherit;
  border-radius: 20px;
  overflow: hidden;
}
.scenario-tab .scenario-tab-wrap .scneario-img .img-group.active {
  display: block;
}
.scenario-tab .scenario-tab-wrap .scneario-img .img-group .img-container {
  display: none;
  position: relative;
  width: inherit;
  height: inherit;
  background-color: #fff;
}
.scenario-tab
  .scenario-tab-wrap
  .scneario-img
  .img-group
  .img-container.active {
  display: block;
}
.scenario-tab .scenario-tab-wrap .scneario-img .img-group .img-container img {
  width: inherit;
  height: inherit;
  object-fit: contain;
  display: block;
}
.scenario-tab
  .scenario-tab-wrap
  .scneario-img
  .img-group
  .img-container
  .click-overlay {
  position: absolute;
  background: #ffffff;
  color: #333333;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
}
.scenario-tab
  .scenario-tab-wrap
  .scneario-img
  .img-group
  .img-container
  .click-overlay
  span {
  color: #bbbbbb;
  font-size: 14px;
  display: block;
  text-align: right;
  margin-top: 16px;
}
.scenario-tab
  .scenario-tab-wrap
  .scneario-img
  .img-group
  .img-container
  .click-overlay::before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: #fff;
  border-radius: 2px;
}
.scenario-tab
  .scenario-tab-wrap
  .scneario-img
  .img-group
  .img-container
  .click-overlay
  strong {
  margin-bottom: 6px;
  display: block;
}

/* click overlay 위치조정 */
.img-group[data-tab="0"] .img-container[data-img="0"] .click-overlay {
  top: 27%;
  right: 6%;
  &::before {
    right: -7px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="1"] .click-overlay {
  top: 27%;
  right: 8.1%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="2"] .click-overlay {
  top: 46%;
  right: 1.3%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="3"] .click-overlay {
  top: 46%;
  right: 1.3%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="4"] .click-overlay {
  top: 8.5%;
  left: 10.2%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="5"] .click-overlay {
  top: 11.5%;
  right: 40.5%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="6"] .click-overlay {
  top: 63%;
  right: 42.2%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="7"] .click-overlay {
  top: 63%;
  right: 42.2%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="0"] .img-container[data-img="8"] .click-overlay {
  top: 32.6%;
  right: 49%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}

.img-group[data-tab="1"] .img-container[data-img="0"] .click-overlay {
  top: 18.5%;
  right: 23%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="1"] .img-container[data-img="1"] .click-overlay {
  top: 10%;
  right: 57%;
  &::before {
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="1"] .img-container[data-img="2"] .click-overlay {
  top: 19%;
  right: 24.5%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="1"] .img-container[data-img="3"] .click-overlay {
  top: 16%;
  right: 43%;
  &::before {
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}

.img-group[data-tab="2"] .img-container[data-img="0"] .click-overlay {
  top: 14%;
  right: 29%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="2"] .img-container[data-img="1"] .click-overlay {
  top: 9%;
  right: 64%;
  &::before {
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}

.img-group[data-tab="3"] .img-container[data-img="0"] .click-overlay {
  top: 26.5%;
  right: 3.5%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="3"] .img-container[data-img="1"] .click-overlay {
  top: 57%;
  right: 1.5%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="3"] .img-container[data-img="2"] .click-overlay {
  top: 57%;
  right: 4.6%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}
.img-group[data-tab="3"] .img-container[data-img="3"] .click-overlay {
  top: 49.3%;
  right: 0.7%;
  &::before {
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
  }
}

@media screen and (max-width: 768px) {
  .scenario-tab .mobile-hidden {
    display: none;
  }
  .scenario-tab .scenario-tab-wrap .scenario-function-tab {
    gap: 1.5rem;
  }
  .scenario-tab .scenario-tab-wrap .scenario-function-tab .tab {
    padding: 0;
    text-align: center;
    opacity: 1;
    filter: grayscale(0);
  }
  .scenario-tab .scenario-tab-wrap .scenario-function-tab .tab h4 {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .scenario-tab .scenario-tab-wrap .scenario-function-tab .tab h4 span {
    border-radius: 10px;
    width: 40px;
    height: 40px;
  }
  .scenario-tab .scenario-tab-wrap .scenario-function-tab .tab h4 span img {
    width: 18px;
    height: 18px;
  }
  .scenario-tab .scenario-tab-wrap .scenario-function-tab .tab .scneario-text {
    display: block;
    font-size: 0.875rem;
    margin-top: 6px;
  }
  .scenario-tab .scenario-tab-wrap .scneario-img {
    display: none;
  }
}

.main-heading {
  text-align: center;
}
.main-heading p {
  color: #eb4d3d;
  display: none;
}
.main-heading h2 {
  margin-top: 0.5rem;
}

.hero {
  width: 100%;
  height: 100%;
  padding-bottom: 120px;
  background: linear-gradient(to top, #f1f3f6 0%, #f5f7f9 100%);
  overflow: hidden;
}
.hero .hero-wrapper {
  position: relative;
  width: 100%;
  max-width: 1920px;
  overflow: visible;
}
.hero .hero-wrapper .hero-content {
  position: absolute;
  top: 95px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  width: 60%;
}
.hero .hero-wrapper .hero-content.mobile {
  display: none;
}
.hero .hero-wrapper .hero-content h1 {
  margin-bottom: 0.5rem;
}
.hero .hero-wrapper .hero-content h1 span {
  color: #eb4d3d;
}
.hero .hero-wrapper .hero-content p {
  font-size: 26px;
  font-weight: 500;
}
.hero .hero-wrapper .hero-ratio-box {
  position: relative;
  margin-top: 230px;
  width: 100%;
  padding-bottom: 32.29%;
}
.hero .hero-wrapper .hero-ratio-box .hero-background {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero .hero-wrapper .hero-ratio-box .feature {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  transition: 0.3s;
}
.hero .hero-wrapper .hero-ratio-box .feature .icon {
  width: clamp(40px, 10vw, 160px);
  height: auto;
}
.hero .hero-wrapper .hero-ratio-box .feature .label {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  color: #666666;
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1.125rem;
  margin-top: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.hero .hero-wrapper .hero-ratio-box .feature .tooltip {
  position: absolute;
  left: 105%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 10;
  text-align: left;
  width: max-content;
  line-height: 1.4;
  font-size: 1.125rem;
}
.hero .hero-wrapper .hero-ratio-box .feature .tooltip a {
  display: block;
  line-height: 1.8;
}
.hero .hero-wrapper .hero-ratio-box .feature .tooltip a:after {
  content: "▶";
  color: #eb4d3d;
  display: inline-block;
  opacity: 0;
  font-size: 12px;
  margin-left: 5px;
  vertical-align: 1px;
}
.hero .hero-wrapper .hero-ratio-box .feature .tooltip a:hover {
  color: #f04741;
}
.hero .hero-wrapper .hero-ratio-box .feature .tooltip a:hover::after {
  opacity: 1;
}
.hero .hero-wrapper .hero-ratio-box .feature:hover {
  z-index: 5;
}
.hero .hero-wrapper .hero-ratio-box .feature:hover .label {
  background-color: #eb4d3d;
  color: #ffffff;
}
.hero .hero-wrapper .hero-ratio-box .feature:hover .tooltip {
  opacity: 1;
  visibility: visible;
}
.hero .hero-wrapper .hero-ratio-box .feature.dimmed {
  filter: grayscale(1);
}
.hero .hero-wrapper .hero-ratio-box .viewer {
  top: 60%;
  left: 24%;
}
.hero .hero-wrapper .hero-ratio-box .viewer .label {
  top: 30px;
}
.hero .hero-wrapper .hero-ratio-box .viewer .tooltip {
  top: 37px;
}
.hero .hero-wrapper .hero-ratio-box .ixd {
  top: 75.3%;
  left: 40.65%;
}
.hero .hero-wrapper .hero-ratio-box .ixd .label {
  top: 25px;
}
.hero .hero-wrapper .hero-ratio-box .ixd .tooltip {
  top: 32px;
}
.hero .hero-wrapper .hero-ratio-box .translator {
  top: 42%;
  left: 50%;
}
.hero .hero-wrapper .hero-ratio-box .translator .label {
  top: 20px;
}
.hero .hero-wrapper .hero-ratio-box .translator .tooltip {
  top: 42px;
}
.hero .hero-wrapper .hero-ratio-box .compare {
  top: 73%;
  left: 63.3%;
}
.hero .hero-wrapper .hero-ratio-box .compare .label {
  top: 0;
}
.hero .hero-wrapper .hero-ratio-box .compare .tooltip {
  top: 7px;
}
.hero .hero-wrapper .hero-ratio-box .security {
  top: 35%;
  left: 73.5%;
}
.hero .hero-wrapper .hero-ratio-box .security .label {
  top: 15px;
}
.hero .hero-wrapper .hero-ratio-box .security .tooltip {
  top: 20px;
}

@media (min-width: 769px) and (max-width: 1276px) {
  .hero {
    height: 100%;
    padding-bottom: 100px;
  }
  .hero .hero-wrapper .hero-content {
    width: 100%;
  }
  .hero .hero-wrapper .hero-ratio-box {
    margin-top: 260px;
  }
  .hero .hero-wrapper .hero-ratio-box .viewer .label {
    top: -10px;
  }
  .hero .hero-wrapper .hero-ratio-box .ixd .label {
    top: -10px;
  }
  .hero .hero-wrapper .hero-ratio-box .translator .label {
    top: -10px;
  }
  .hero .hero-wrapper .hero-ratio-box .compare .label {
    top: -10px;
  }
  .hero .hero-wrapper .hero-ratio-box .security .label {
    top: -10px;
  }
}

@media screen and (max-width: 768px) {
  .hero {
    padding: 60px 0;
    height: 100%;
  }
  .hero .hero-wrapper .hero-content {
    top: 0;
    padding: 0 20px;
    width: 100%;
    display: none;
  }
  .hero .hero-wrapper .hero-content.mobile {
    display: block;
  }
  .hero .hero-wrapper .hero-content h1 {
    width: 100%;
  }
  .hero .hero-wrapper .hero-content p {
    font-size: 1rem;
  }
  .hero .hero-wrapper .hero-ratio-box {
    margin-top: 160px;
  }
  .hero .hero-wrapper .hero-ratio-box .feature {
    filter: grayscale(1);
    transition: 0.3s;
  }
  .hero .hero-wrapper .hero-ratio-box .feature.active {
    filter: grayscale(0);
  }
  .hero .hero-wrapper .hero-ratio-box .feature.active .label {
    background: #eb4d3d;
    color: white;
  }
  .hero .hero-wrapper .hero-ratio-box .feature .label {
    font-size: 11px;
    background-color: rgba(0, 0, 0, 0.3);
    min-width: max-content;
    color: #ffffff;
    padding: 5px 10px;
    font-weight: 400;
  }
  .hero .hero-wrapper .hero-ratio-box .feature .tooltip {
    display: none !important;
  }
  .hero .hero-wrapper .hero-ratio-box .viewer .label {
    top: -20px;
  }
  .hero .hero-wrapper .hero-ratio-box .ixd .label {
    top: 50px;
  }
  .hero .hero-wrapper .hero-ratio-box .translator .label {
    top: -20px;
  }
  .hero .hero-wrapper .hero-ratio-box .compare .label {
    top: 52px;
  }
  .hero .hero-wrapper .hero-ratio-box .security .label {
    top: -20px;
  }
  .hero .hero-wrapper .hero-tooltip-slider {
    margin-top: 1.5rem;
    position: relative;
    padding: 2.5rem;
  }
  .hero .hero-wrapper .hero-tooltip-slider .slide-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
  .hero .hero-wrapper .hero-tooltip-slider .swiper-slide {
    width: 100%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px;
    gap: 0.5rem;
    line-height: 1.4;
    font-size: 0.875rem;
  }
  .hero .hero-wrapper .hero-tooltip-slider .swiper-slide h5 {
    font-size: 1rem;
  }
  .hero .hero-wrapper .hero-tooltip-slider .swiper-slide a {
    margin-top: auto;
    color: #eb4d3d;
    font-weight: 500;
  }
  .hero .hero-wrapper .hero-tooltip-slider .swiper-slide a:after {
    content: "";
    background: url("/assets/images/common/icon/right.svg");
    background-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-left: 2px;
    display: inline-block;
    filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
      hue-rotate(316deg) brightness(108%) contrast(111%);
  }
  .hero .hero-wrapper .hero-tooltip-slider .swiper-button-next:after,
  .hero .hero-wrapper .hero-tooltip-slider .swiper-button-prev:after {
    color: #ccc;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
  }
}
.main-effect {
  padding: 200px 0;
}
.main-effect .main-effect-items {
  display: grid;
  grid-template-columns: repeat(1,  1fr);
  grid-template-rows: repeat(2, auto);
  gap: 24px;
}
.main-effect .main-effect-items .main-effect-item {
  flex: 1;
  background-color: #f5f7f9;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}
.main-effect .main-effect-items .main-effect-item .effect-img {
  width: 100%;
}
.main-effect .main-effect-items .main-effect-item .effect-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.main-effect .main-effect-items .main-effect-item .effect-text h4 {
  margin-bottom: 0.5rem;
}
.main-effect .main-effect-items .main-effect-item .effect-text p {
  font-size: 1.125rem;
  color: #666666;
  line-height: 1.4;
}
.main-effect .main-effect-items .main-effect-item:nth-child(1) {
  grid-column: 1;
  grid-row: span 2;
}
.main-effect .main-effect-items .main-effect-item:nth-child(2) {
  grid-column: 2;
  grid-row: span 1;
}
.main-effect .main-effect-items .main-effect-item:nth-child(3) {
  grid-column: 1;
  grid-row: 3 / span 1;
}
.main-effect .main-effect-items .main-effect-item:nth-child(4) {
  grid-column: 2;
  grid-row: 2 / span 2;
}

@media screen and (max-width: 768px) {
  .main-effect {
    padding: 60px 20px;
  }
  .main-effect .main-effect-items {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    height: auto;
  }
  .main-effect .main-effect-items .main-effect-item {
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 1rem;
    padding: 20px;
    border-radius: 10px;
  }
  .main-effect .main-effect-items .main-effect-item .effect-text h4 {
    margin-bottom: 6px;
  }
  .main-effect .main-effect-items .main-effect-item .effect-text p {
    font-size: 1rem;
  }
}
.testimonials {
  padding: 200px 0;
}
.testimonials .testimonial-swiper {
  padding-top: 20px;
}
.testimonials .testimonial-swiper .swiper-wrapper {
  align-items: center;
}
.testimonials .testimonial-swiper .swiper-slide {
  box-sizing: border-box;
  opacity: 0.6;
  transition: 0.3s ease;
}
.testimonials .testimonial-swiper .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.testimonials
  .testimonial-swiper
  .swiper-slide.swiper-slide-active
  .testimonial-card {
  transform: scale(1.05);
  z-index: 2;
  color: #333333;
}
.testimonials .testimonial-swiper .testimonial-card {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
  color: #666666;
  padding: 30px;
  border-radius: 20px;
  width: 100%;
  margin: 0 auto;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  transition: 0.3s ease;
  cursor: pointer;
}
.testimonials .testimonial-swiper .testimonial-card .quote {
  font-family: "Manrope", sans-serif;
  font-size: 180px;
  line-height: 60px;
  transform: translate(-12px, 35px);
  color: #e9edf1;
}
.testimonials .testimonial-swiper .testimonial-card .message {
  font-size: 1.125rem;
  line-height: 1.4;
  flex-grow: 1;
}
.testimonials .testimonial-swiper .testimonial-card .author-box {
  font-size: 1rem;
}
.testimonials .testimonial-swiper .testimonial-card .author-box strong {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}
.testimonials .testimonial-swiper .testimonial-card .author-box span {
  color: #666666;
}
.testimonials .testimonial-swiper .swiper-pagination {
  bottom: -60px;
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.testimonials .testimonial-swiper .swiper-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 3px;
  background-color: #e4e9ed;
  border-radius: 4px;
  opacity: 1;
  margin: 0 4px;
}
.testimonials
  .testimonial-swiper
  .swiper-pagination
  .swiper-pagination-bullet-active {
  background-color: #eb4d3d;
}

@media screen and (max-width: 768px) {
  .testimonials {
    padding: 60px 20px;
  }
  .testimonials
    .testimonial-swiper
    .swiper-slide.swiper-slide-active
    .testimonial-card {
    transform: scale(1);
  }
  .testimonials .testimonial-swiper .testimonial-card {
    min-height: 230px;
    padding: 20px;
    border-radius: 10px;
  }
  .testimonials .testimonial-swiper .testimonial-card .quote {
    font-size: 120px;
    line-height: 40px;
    transform: translate(-10px, 25px);
  }
  .testimonials .testimonial-swiper .testimonial-card .message {
    font-size: 1rem;
  }
  .testimonials .testimonial-swiper .testimonial-card .author-box {
    font-size: 0.875rem;
  }
  .testimonials .testimonial-swiper .testimonial-card .author-box strong {
    margin-bottom: 6px;
  }
}
.logo-marquee {
  overflow: hidden;
  padding: 1.5rem 0;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.logo-marquee .logo-track {
  display: flex;
  align-items: center;
  animation: marquee 50s linear infinite;
}
.logo-marquee .logo-track:hover {
  animation-play-state: paused;
}
.logo-marquee img {
  height: 30px;
  width: auto;
  object-fit: contain;
  margin: 0 1.5rem;
  transition: 0.3s;
  filter: brightness(0) saturate(100%) invert(96%) sepia(8%) saturate(73%)
    hue-rotate(177deg) brightness(92%) contrast(91%);
}

.logo-marquee img:hover {
  filter: none;
}

.logo-marquee .h-s img {
  height: 18px;
}
.logo-marquee .h-m img {
  height: 23px;
}
.logo-marquee .h-l img {
  height: 50px;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 768px) {
  .logo-marquee {
    padding: 1.5rem 0;
  }
  .logo-marquee img {
    max-height: 15px;
    margin: 0 1rem;
  }
}
.video-grid-section {
  padding: 200px 0;
}
.video-grid-section .video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.video-grid-section .video-grid .video-item {
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.3s;
}
.video-grid-section .video-grid .video-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.video-grid-section .video-grid .video-item:hover:last-child {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}
.video-grid-section .video-grid .video-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-grid-section .video-grid .video-item.youtube-link {
  background: #f5f7f9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-grid-section .video-grid .video-item.youtube-link a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.video-grid-section .video-grid .video-item.youtube-link a .youtube-icon {
  width: 64px;
  height: 64px;
  background: url("/assets/images/common/icon/youtube.svg") no-repeat center;
  background-size: contain;
  margin-bottom: 12px;
}
.video-grid-section .video-grid .video-item.youtube-link a span {
  font-size: 1.125rem;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .video-grid-section {
    padding: 60px 20px;
  }
  .video-grid-section .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .video-grid-section .video-grid .video-item {
    border-radius: 10px;
  }
  .video-grid-section .video-grid .video-item.youtube-link a .youtube-icon {
    width: 24px;
    height: 24px;
  }
  .video-grid-section .video-grid .video-item.youtube-link a span {
    font-size: 1rem;
  }
}
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.video-modal .video-modal-content {
  position: absolute;
  max-width: 1200px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
}
.video-modal .video-modal-content .modal-close {
  position: absolute;
  top: -40px;
  right: -40px;
  font-size: 48px;
  color: #fff;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .video-modal .video-modal-content .modal-close {
    top: -60px;
    right: 0;
  }
}
.video-modal .video-modal-content .video-iframe-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 13px;
}
@media screen and (max-width: 768px) {
  .video-modal .video-modal-content .video-iframe-container {
    border-radius: 0;
  }
}
.video-modal .video-modal-content .video-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-modal .video-modal-content .video-iframe-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-intro {
  width: 100%;
  padding: 10rem 0;
  position: relative;
}
.company-intro::before {
  content: "";
  background: url("/assets/images/company-main.jpg") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.company-intro::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.5)
  );
}
.company-intro .company-text {
  z-index: 100;
  position: relative;
  width: 1296px;
  margin: 0 auto;
  text-align: center;
  color: #212121;
}
.company-intro .company-text img {
  width: 500px;
}
.company-intro .company-text p {
  margin-top: 2.5rem;
  font-size: 24px;
  font-weight: 500;
}
.company-intro .company-text p strong {
  display: block;
}
.company-intro .intro-about {
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  margin-top: 5rem;
}
.company-intro .intro-about .mission,
.company-intro .intro-about .vision {
  flex: 1;
  padding: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
  position: relative;
  background-color: #ffffff;
  transition: 0.3s;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
  min-height: 250px;
}
.company-intro .intro-about .mission p,
.company-intro .intro-about .vision p {
  font-size: 1.125rem;
}
.company-intro .intro-about .mission {
  background: linear-gradient(to bottom right, #fff3f3, #ffffff);
}
.company-intro .intro-about .vision {
  background: linear-gradient(to bottom right, #f3f7ff, #ffffff);
}
@media screen and (max-width: 768px) {
  .company-intro {
    padding: 60px 20px;
  }
  .company-intro .company-text {
    width: 100%;
  }
  .company-intro .company-text img {
    width: 80%;
  }
  .company-intro .company-text p {
    font-size: 1rem;
    margin-top: 1.5rem;
  }
  .company-intro .company-text p strong {
    font-size: 20px;
    margin-bottom: 3px;
  }
  .company-intro .intro-about {
    flex-direction: column;
    margin-top: 1.5rem;
    gap: 1rem;
  }
  .company-intro .intro-about .mission,
  .company-intro .intro-about .vision {
    padding: 30px;
    gap: 6px;
    border-radius: 10px;
  }
  .company-intro .intro-about .mission p,
  .company-intro .intro-about .vision p {
    font-size: 1rem;
  }
  .company-intro .intro-about .mission p,
  .company-intro .intro-about .vision p {
    font-size: 1rem;
  }
}

.company-develop {
  padding: 10rem 0;
}
.company-develop .develop-about ul {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}
.company-develop .develop-about ul li {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 50px;
  border-radius: 20px;
  border: 1px solid #e8e8e8;
}
.company-develop .develop-about ul li .develop-text {
  display: flex;
  align-items: start;
  flex-direction: column;
}
.company-develop .develop-about ul li .develop-text img {
  width: 36px;
  height: 36px;
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.company-develop .develop-about ul li .develop-text h4 {
  text-align: left;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.company-develop .develop-about ul li .develop-text p {
  font-size: 1.125rem;
}
.company-develop .develop-about ul li .develop-text p b {
  font-weight: 600;
}
.company-develop .develop-about ul li .develop-img {
  display: none;
  height: 200px;
  width: 400px;
  background-color: #ccc;
}
@media screen and (max-width: 768px) {
  .company-develop {
    padding: 60px 20px;
  }
  .company-develop .develop-about ul {
    flex-direction: column;
    gap: 1rem;
  }
  .company-develop .develop-about ul li {
    padding: 20px;
    border-radius: 10px;
  }
  .company-develop .develop-about ul li .develop-text img {
    width: 24px;
    height: 24px;
  }
  .company-develop .develop-about ul li .develop-text h4 {
    margin-top: 1rem;
    margin-bottom: 6px;
  }
  .company-develop .develop-about ul li .develop-text p {
    font-size: 1rem;
  }
}

.company-history .tab-history .tab-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
}
.company-history .tab-history .tab-buttons .tab-button {
  padding: 10px 20px;
  background-color: #e9edf1;
  border-radius: 8px;
  color: #bbbbbb;
  cursor: pointer;
  transition: 0.3s ease;
}
.company-history .tab-history .tab-buttons .tab-button h4 {
  font-weight: 500;
}
.company-history .tab-history .tab-buttons .tab-button.active {
  color: #ffffff;
  background-color: #eb4d3d;
}
.company-history .tab-history .tab-contents .tab-panel {
  display: none;
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
}
.company-history .tab-history .tab-contents .tab-panel.active {
  display: block;
}
.company-history .tab-history .tab-contents .tab-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.company-history .tab-history .tab-contents .tab-panel ul .history-content {
  display: grid;
  grid-template-columns: 100px auto 1fr;
  align-items: start;
  gap: 1.5rem;
  position: relative;
}
.company-history
  .tab-history
  .tab-contents
  .tab-panel
  ul
  .history-content.current
  .timeline-line::before {
  background-color: #eb4d3d;
}
.company-history
  .tab-history
  .tab-contents
  .tab-panel
  ul
  .history-content.current
  .history-text {
  color: #333333;
  font-weight: 500;
}
.company-history
  .tab-history
  .tab-contents
  .tab-panel
  ul
  .history-content
  .history-year {
  text-align: left;
  font-weight: 600;
  color: #212121;
  margin: 0;
}
.company-history
  .tab-history
  .tab-contents
  .tab-panel
  ul
  .history-content
  .timeline-line {
  position: relative;
  width: 2px;
  background-color: #ddd;
  height: 100%;
}
.company-history
  .tab-history
  .tab-contents
  .tab-panel
  ul
  .history-content
  .timeline-line::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
}
.company-history
  .tab-history
  .tab-contents
  .tab-panel
  ul
  .history-content
  .history-text {
  margin: 0;
  padding-left: 0;
  padding-top: 12px;
  padding-left: 20px;
  font-size: 1.125rem;
  color: #666666;
  padding-bottom: 5rem;
}
.company-history
  .tab-history
  .tab-contents
  .tab-panel
  ul
  .history-content
  .history-text
  li {
  margin-bottom: 1.5rem;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .company-history .tab-history .tab-buttons {
    justify-content: space-evenly;
    gap: 0;
    margin-bottom: 2rem;
  }
  .company-history .tab-history .tab-buttons h4 {
    font-size: 18px;
  }
  .company-history .tab-history .tab-contents .tab-panel ul .history-content {
    gap: 0;
    grid-template-columns: 80px auto 1fr;
  }
  .company-history
    .tab-history
    .tab-contents
    .tab-panel
    ul
    .history-content
    .history-year {
    font-size: 24px;
  }
  .company-history
    .tab-history
    .tab-contents
    .tab-panel
    ul
    .history-content
    .timeline-line::before {
    top: 10px;
  }
  .company-history
    .tab-history
    .tab-contents
    .tab-panel
    ul
    .history-content
    .history-text {
    padding-top: 4px;
    padding-bottom: 2.5rem;
    font-size: 1rem;
  }
  .company-history
    .tab-history
    .tab-contents
    .tab-panel
    ul
    .history-content
    .history-text
    li {
    margin-bottom: 20px;
  }
}

.about-map {
  padding-bottom: 10rem;
}
.about-map iframe {
  border-radius: 20px;
}
.about-map .map-text > div {
  padding: 2.5rem 0;
}
.about-map .map-text h4 {
  margin-bottom: 1rem;
}
.about-map .map-text p {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.about-map .map-text p:last-child {
  margin-bottom: 0;
}
.about-map .map-text .address-number {
  display: flex;
  align-items: start;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}
.about-map .map-text .address-number div {
  flex: 1;
}
@media screen and (max-width: 768px) {
  .about-map {
    padding: 0 20px 60px 20px;
  }
  .about-map iframe {
    height: 200px;
    border-radius: 10px;
  }
  .about-map .map-text > div {
    padding: 20px 0;
  }
  .about-map .map-text h4 {
    margin-bottom: 6px;
  }
  .about-map .map-text p {
    font-size: 0.875rem;
    margin-bottom: 3px;
  }
}

#tabMenu {
  padding-top: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #tabMenu {
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

#tabMenu h2 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#tabMenu ul {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px;
  background-color: #e9edf0;
}
#tabMenu ul li a {
  padding: 8px 20px;
  display: inline-block;
  color: #bbbbbb;
  line-height: 1.4;
  border-radius: 999px;
  font-weight: 500;
}
#tabMenu ul li #tabMenuOn {
  background-color: #333333;
  background-color: #ffffff;
  color: #fff;
  color: #333333;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  #tabMenu ul {
    padding: 3px;
  }
  #tabMenu ul li a {
    padding: 3px 10px;
    text-align: center;
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 768px) {
  .user-mypage {
    padding: 0 20px;
  }
}

.mypage-inner {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}
.mypage-inner .download > h4 {
  margin-bottom: 1rem;
}
.download-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.download-items .download-item {
  padding: 16px;
  border-radius: 15px;
  border: 1px solid #e8e8e8;
  display: flex;
  gap: 1rem;
  transition: 0.3s;
  cursor: pointer;
}
.download-items .download-item:hover {
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.06);
}
.download-items .download-item:hover .download-item-info .download-btn {
  color: #eb4d3d;
}
.download-items .download-item:hover .download-item-info .download-btn i {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}

.download-items .download-item .download-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-items .download-item .download-img img {
  width: inherit;
  height: inherit;
}
.download-items .download-item .download-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.download-items .download-item .download-item-info .download-title {
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  font-weight: 600;
}
.download-items .download-item .download-item-info .download-title .file-title {
  color: #666666;
  font-weight: 400;
  font-size: 0.875rem;
}
.download-items .download-item .download-item-info .download-info-group {
  display: flex;
}
.download-items .download-item .download-item-info .download-info-group > div {
  flex: 1;
}
.download-items
  .download-item
  .download-item-info
  .download-info-group
  .download-info {
  font-size: 0.875rem;
  color: #333333;
  display: flex;
}
.download-items
  .download-item
  .download-item-info
  .download-info-group
  .download-info
  .info-title {
  color: #666666;
  margin-right: 5px;
}
.download-items .download-item .download-item-info .download-btn {
  font-weight: 500;
  max-width: max-content;
  font-size: 0.875rem;
  transform: translateX(-2px);
}

.download-items .download-item .download-item-info .download-btn i {
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  width: 16px;
  height: 16px;
}

@media screen and (max-width: 768px) {
  .mypage-inner {
    border-radius: 10px;
    padding: 20px;
    gap: 1rem;
  }
  .mypage-inner .download > h4 {
    margin-bottom: 0.5rem;
  }
  .mypage-inner .download .download-items {
    gap: 0.5rem;
  }
  .mypage-inner .download .download-items .download-item {
    padding: 13px;
    border-radius: 10px;
    gap: 13px;
  }
  .mypage-inner .download .download-items .download-item .download-img {
    width: 24px;
    height: 24px;
  }
  .mypage-inner .download .download-items .download-item .download-item-info {
    gap: 10px;
  }
  .mypage-inner
    .download
    .download-items
    .download-item
    .download-item-info
    .download-title {
    font-size: 0.875rem;
    height: 24px;
    gap: 2px;
  }
  .mypage-inner
    .download
    .download-items
    .download-item
    .download-item-info
    .download-title
    .file-title {
    font-size: 0.75rem;
  }
  .mypage-inner
    .download
    .download-items
    .download-item
    .download-item-info
    .download-info-group {
    flex-direction: column;
  }
  .mypage-inner
    .download
    .download-items
    .download-item
    .download-item-info
    .download-info-group
    .download-info {
    font-size: 0.75rem;
  }
  .mypage-inner
    .download
    .download-items
    .download-item
    .download-item-info
    .download-btn {
    margin-top: 10px;
    font-size: 0.75rem;
  }
  .mypage-inner
    .download
    .download-items
    .download-item
    .download-item-info
    .download-btn
    i {
    width: 14px;
    height: 14px;
  }
}

.mypage-community {
  padding-top: 2.5rem;
  padding-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .mypage-community {
    padding-top: 1.5rem;
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.mypage-community .community-group {
  display: flex;
  align-items: start;
  gap: 24px;
}
.mypage-community .community-group > div {
  flex: 1;
  padding: 30px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
  max-width: 50%;
  min-height: 385px;
}
.mypage-community .community-group .community-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.mypage-community .community-group .community-title img {
  width: 24px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
}
.mypage-community .community-group ul {
  width: inherit;
}
.mypage-community .community-group ul li {
  padding: 16px 5px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mypage-community .community-group ul li a {
  font-weight: 500;
  white-space: nowrap; /* 줄바꿈 방지 */
  overflow: hidden; /* 넘치는 부분 숨김 */
  text-overflow: ellipsis; /* 말줄임표 (...) 표시 */
  max-width: 85%;
  font-size: 14px;
}
.mypage-community .community-group ul li:first-child {
  padding-top: 0;
}
.mypage-community .community-group ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mypage-community .community-group ul li span {
  color: #666666;
  font-size: 0.875rem;
  min-width: 80px;
}
@media screen and (max-width: 768px) {
  .mypage-community .community-group {
    flex-direction: column;
  }
  .mypage-community .community-group > div {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    max-width: 100%;
  }
  .mypage-community .community-group .community-title {
    margin-bottom: 1rem;
  }
  .mypage-community .community-group .community-title img {
    width: 18px;
  }
  .mypage-community .community-group ul li {
    padding: 8px 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.875rem;
  }
  .mypage-community .community-group ul li span {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 768px) {
  .function-list {
    padding: 0 20px;
  }
}
.function-list input[type="radio"] {
  display: none;
}
.function-list .tab-menu {
  display: flex;
  gap: 1rem;
  width: fit-content;
  margin: 0 auto 4.5rem;
}
.function-list .tab-menu label {
  font-size: 2.5rem;
  padding: 0 20px;
  color: #bbbbbb;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .function-list .tab-menu {
    width: 100%;
    gap: 0;
    justify-content: space-evenly;
    margin-bottom: 2rem;
  }
  .function-list .tab-menu label {
    text-align: center;
    font-size: 1.75rem;
    padding: 0;
  }
}
.function-list #tab-cowork:checked ~ .tab-menu label[for="tab-cowork"],
.function-list #tab-union:checked ~ .tab-menu label[for="tab-union"] {
  color: #333;
}
.function-list #tab-cowork:checked ~ .tab-menu label[for="tab-cowork"]:after,
.function-list #tab-union:checked ~ .tab-menu label[for="tab-union"]:after {
  content: "";
}
.function-list #tab-cowork:checked ~ .union {
  display: none;
}
.function-list #tab-union:checked ~ .cowork {
  display: none;
}
.function-list .function-list-items {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 24px;
}
.function-list .function-list-items .function-list-item {
  cursor: pointer;
  flex-basis: 636px;
  padding: 30px;
  border-radius: 20px;
  transition: 0.3s;
  transition: 0.3s;
  background-color: #f5f7f9;
}
.function-list .function-list-items .function-list-item h4 {
  margin-bottom: 0.5rem;
  transition: 0.3s;
  /* PRO 배지 스타일 */
}
.function-list .function-list-items .function-list-item h4 .pro-badge {
  background-color: #147bd1;
  color: #ffffff;
  font-size: 0.875rem;
  padding: 3px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 3px;
}
@media screen and (max-width: 768px) {
  .function-list .function-list-items .function-list-item h4 .pro-badge {
    font-size: 0.75rem;
    padding: 2px 4px;
    vertical-align: 2px;
  }
}
.function-list .function-list-items .function-list-item p {
  color: #666666;
  transition: 0.3s;
}
.function-list .function-list-items .function-list-item > span {
  display: inline-block;
  margin-top: 2.5rem;
  transition: 0.3s;
  color: #666666;
}
.function-list .function-list-items .function-list-item > span::after {
  content: "";
  background: url("/assets/images/common/icon/right.svg") no-repeat;
  background-size: 16px;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 6px;
  transition: 0.3s;
  filter: brightness(0) saturate(100%) invert(42%) sepia(21%) saturate(0%)
    hue-rotate(238deg) brightness(88%) contrast(90%);
}
.function-list .function-list-items .function-list-item:hover {
  border-color: #eb4d3d;
  transform: translateY(-5px);
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.06);
  border-color: transparent;
}
.function-list .function-list-items .function-list-item:hover > span {
  color: #eb4d3d;
}
.function-list .function-list-items .function-list-item:hover > span::after {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
@media screen and (max-width: 768px) {
  .function-list .function-list-items {
    gap: 1rem;
  }
  .function-list .function-list-items a h4:after {
    content: "";
    background: url("/assets/images/common/icon/arrow-right.svg") no-repeat;
    background-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: -7px;
    filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
      hue-rotate(316deg) brightness(108%) contrast(111%);
  }
  .function-list .function-list-items .function-list-item {
    border-radius: 10px;
    padding: 20px;
    padding: 20px;
  }
  .function-list .function-list-items .function-list-item h4 {
    margin-bottom: 2px;
    color: #eb4d3d;
  }
  .function-list .function-list-items .function-list-item p {
    font-size: 0.875rem;
  }
  .function-list .function-list-items .function-list-item > span {
    display: none;
  }
  .function-list .function-list-items.cowork .function-list-item h4,
  .function-list .function-list-items.union .function-list-item h4 {
    color: #1e459f;
  }
  .function-list .function-list-items.cowork .function-list-item h4:after,
  .function-list .function-list-items.union .function-list-item h4:after {
    filter: brightness(0) saturate(100%) invert(19%) sepia(94%) saturate(1803%)
      hue-rotate(213deg) brightness(90%) contrast(92%);
  }
  .function-list .function-list-items.reader .function-list-item h4 {
    color: #147bd1;
  }
  .function-list .function-list-items.reader .function-list-item h4:after {
    filter: brightness(0) saturate(100%) invert(44%) sepia(51%) saturate(6191%)
      hue-rotate(190deg) brightness(91%) contrast(84%);
  }
}
.function-list .function-list-items.union .function-list-item:hover > span,
.function-list .function-list-items.cowork .function-list-item:hover > span {
  color: #1e459f;
}
.function-list
  .function-list-items.union
  .function-list-item:hover
  > span:after,
.function-list
  .function-list-items.cowork
  .function-list-item:hover
  > span:after {
  filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(2641%)
    hue-rotate(219deg) brightness(88%) contrast(84%);
}
.function-list .function-list-items.reader .function-list-item:hover > span {
  color: #147bd1;
}
.function-list
  .function-list-items.reader
  .function-list-item:hover
  > span:after {
  filter: brightness(0) saturate(100%) invert(30%) sepia(34%) saturate(5735%)
    hue-rotate(201deg) brightness(106%) contrast(104%);
}

/* Reader & Editor */
@media screen and (max-width: 768px) {
  .function-table {
    padding: 0 20px;
  }
}
.function-table .title {
  margin-bottom: 4.5rem;
  text-align: center;
}
.function-table .title h2 {
  margin-bottom: 1rem;
}
.function-table .title p {
  font-size: 1.125rem;
}
@media screen and (max-width: 768px) {
  .function-table .title {
    margin-bottom: 2rem;
  }
  .function-table .title h2 {
    margin-bottom: 0.5rem;
  }
  .function-table .title p {
    font-size: 1rem;
  }
}
.function-table .function-comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.function-table .function-comparison-table thead th {
  padding: 30px;
  font-weight: 600;
  font-size: 1.125rem;
}
.function-table .function-comparison-table thead th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.function-table .function-comparison-table thead th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.function-table .function-comparison-table tbody tr {
  border-bottom: 1px solid #e5e5e5;
}
.function-table .function-comparison-table tbody tr td {
  font-size: 1.125rem;
  line-height: 1.4;
  border: none;
  padding: 30px;
  text-align: left;
  vertical-align: middle;
}
.function-table .function-comparison-table tbody tr td.function-title {
  border-right: 1px solid #e5e5e5;
}
.function-table .function-comparison-table tbody tr td.locked {
  cursor: pointer;
  margin-left: 4px;
  position: relative;
}
.function-table .function-comparison-table tbody tr td.locked span.mobile {
  display: none;
}
.function-table .function-comparison-table tbody tr td.locked::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: #333;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.function-table .function-comparison-table tbody tr td.locked:hover::after {
  margin-left: 8px;
  opacity: 1;
  visibility: visible;
}
.function-table .function-comparison-table tbody tr .possible,
.function-table .function-comparison-table tbody tr .impossible,
.function-table .function-comparison-table tbody tr .partly-possible {
  position: relative;
}
.function-table .function-comparison-table tbody tr .possible::after,
.function-table .function-comparison-table tbody tr .impossible::after,
.function-table .function-comparison-table tbody tr .partly-possible::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 24px;
}
.function-table .function-comparison-table tbody tr .possible:after {
  background: url("/assets/images/common/icon/check-icon.svg") no-repeat center;
  filter: brightness(0) saturate(100%) invert(62%) sepia(70%) saturate(5025%)
    hue-rotate(114deg) brightness(104%) contrast(101%);
}
.function-table .function-comparison-table tbody tr .impossible:after {
  background: url("/assets/images/common/icon/close.svg") no-repeat center;
  filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(2253%)
    hue-rotate(207deg) brightness(115%) contrast(73%);
}
.function-table .function-comparison-table tbody tr .partly-possible:after {
  background: url("/assets/images/common/icon/triangle.svg") no-repeat center;
  filter: brightness(0) saturate(100%) invert(75%) sepia(65%) saturate(1705%)
    hue-rotate(353deg) brightness(104%) contrast(102%);
}
@media screen and (max-width: 768px) {
  .function-table .function-comparison-table thead th {
    padding: 10px;
    font-size: 0.875rem;
    text-align: center;
    vertical-align: middle;
  }
  .function-table .function-comparison-table thead th:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .function-table .function-comparison-table thead th:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .function-table .function-comparison-table tbody tr td {
    font-size: 0.875rem;
    padding: 10px;
  }
  .function-table .function-comparison-table tbody tr td.locked span.mobile {
    display: block;
    font-size: 0.75rem;
    color: #666666;
  }
  .function-table .function-comparison-table tbody tr td.locked:after {
    display: none;
  }
  .function-table .function-comparison-table tbody tr .possible:after,
  .function-table .function-comparison-table tbody tr .impossible:after,
  .function-table .function-comparison-table tbody tr .partly-possible:after {
    width: 18px;
    height: 18px;
    background-size: 18px;
  }
}

.function-comparison-table thead th {
  position: sticky;
  top: 88px;
  z-index: 2;
  background-color: #f5f7f9;
}
@media screen and (max-width: 768px) {
  .function-comparison-table thead th {
    top: 64px;
  }
}

/* 365 */
#price {
  scroll-margin-top: 160px;
}
@media screen and (max-width: 768px) {
  #price {
    scroll-margin-top: 100px;
  }
}

.basic-function .basic-function-items {
  display: flex;
  gap: 60px;
}
.basic-function .basic-function-items div {
  flex: 1;
  text-align: center;
}
.basic-function .basic-function-items div h3 {
  margin: 1.5rem 0 1rem 0;
}
.basic-function .basic-function-items div p {
  font-size: 1.125rem;
}
.basic-function .basic-function-items div img {
  max-height: 190px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .basic-function .basic-function-items {
    gap: 1.5rem;
    flex-direction: column;
  }
  .basic-function .basic-function-items div h3 {
    margin-top: 10px;
    margin-bottom: 6px;
    text-align: center;
  }
  .basic-function .basic-function-items div p {
    font-size: 0.875rem;
  }
  .basic-function .basic-function-items div img {
    width: 100%;
    height: auto;
  }
}

.pricing {
  padding: 10rem 0;
}
@media screen and (max-width: 768px) {
  .pricing {
    padding: 60px 20px;
  }
}

.payment-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
  gap: 12px;
}
.payment-toggle.active .label-year {
  color: #333333;
}
.payment-toggle.active .label-month {
  color: #bbbbbb;
}
.payment-toggle.active .discount-label {
  color: #eb4d3d;
  text-decoration: none;
}
.payment-toggle .label-year {
  color: #bbbbbb;
  transition: 0.3s;
}
.payment-toggle .label-month {
  color: #333333;
  transition: 0.3s;
}
.payment-toggle .discount-label {
  color: #bbbbbb;
  text-decoration: line-through;
  font-weight: 600;
  font-size: 1.125rem;
  transform: translateY(1px);
}
.payment-toggle h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.payment-toggle .toggle {
  position: relative;
  width: 56px;
  height: 32px;
}
.payment-toggle .toggle input {
  display: none;
}
.payment-toggle .toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: 0.3s;
}
.payment-toggle .toggle .slider::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}
.payment-toggle .toggle input:checked + .slider {
  background-color: #eb4d3d;
}
.payment-toggle .toggle input:checked + .slider::before {
  transform: translateX(24px);
}
@media screen and (max-width: 768px) {
  .payment-toggle {
    max-width: 100%;
    gap: 8px;
    margin-bottom: 1.5rem;
  }
  .payment-toggle .discount-label {
    font-size: 1rem;
  }
}

.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.pricing-grid .pricing-card {
  flex: 1;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  padding: 30px;
  background: #fff;
  text-align: center;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.pricing-grid .pricing-card.basic h4 {
  color: #ff9900;
}
.pricing-grid .pricing-card.basic .pricing-btn {
  border-color: transparent;
  background-color: #ff9900;
  color: #ffffff;
}
.pricing-grid .pricing-card.standard h4 {
  color: #eb4d3d;
}
.pricing-grid .pricing-card.standard .pricing-btn {
  border-color: transparent;
  background-color: #eb4d3d;
  color: #ffffff;
}
.pricing-grid .pricing-card.premium h4 {
  color: #008000;
}
.pricing-grid .pricing-card.premium .pricing-btn {
  border-color: transparent;
  background-color: #008000;
  color: #ffffff;
}
.pricing-grid .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.pricing-grid .pricing-card:hover .pricing-btn::before {
  width: 100%;
}
.pricing-grid .pricing-card h3,
.pricing-grid .pricing-card h4,
.pricing-grid .pricing-card p {
  color: #333333;
}
.pricing-grid .pricing-card h4 {
  font-size: 26px;
}
.pricing-grid .pricing-card .install {
  font-weight: 500;
  color: #666666;
  font-size: 1rem;
  margin-top: 4px;
  margin-bottom: 2rem;
}
.pricing-grid .pricing-card .no-discount,
.pricing-grid .pricing-card .discount-year {
  font-weight: 500;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 25px;
}
.pricing-grid .pricing-card .no-discount {
  color: #bbbbbb;
  font-size: 1rem;
}
.pricing-grid .pricing-card .no-discount img {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  filter: brightness(0) saturate(100%) invert(77%) sepia(92%) saturate(0%)
    hue-rotate(187deg) brightness(92%) contrast(87%);
}
.pricing-grid .pricing-card .discount-year {
  font-size: 1.125rem;
  color: #eb4d3d;
  font-weight: 600;
}
.pricing-grid .pricing-card .discount-year span {
  font-weight: 500;
  color: #bbbbbb;
  text-decoration: line-through;
}
.pricing-grid .pricing-card .price {
  font-size: 34px;
}
.pricing-grid .pricing-card .price span {
  font-size: 1.125rem;
  font-weight: 500;
}
.pricing-grid .pricing-card .features {
  list-style: none;
  text-align: left;
  padding: 0;
}
.pricing-grid .pricing-card .features li {
  font-size: 1.125rem;
  line-height: 2.5rem;
  margin-left: 3px;
  color: #666666;
}
.pricing-grid .pricing-card .features li::before {
  content: "\e876";
  font-family: "Material Icons";
  font-size: 18px;
  vertical-align: -3px;
  margin-right: 8px;
}
.pricing-grid .pricing-card .features li.no-feature {
  color: #cccccc;
  text-decoration: line-through;
}
.pricing-grid .pricing-card .features li.no-feature::before {
  display: inline-block;
  text-decoration: none !important;
}
.pricing-grid .pricing-card .pricing-btn {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  font-size: 1.125rem;
  padding: 16px 0;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  border: 1px solid #cccccc;
  border-radius: 8px;
  font-weight: 600;
  z-index: 0;
  transition: color 0.3s ease;
}
@media screen and (max-width: 768px) {
  .pricing-grid {
    width: 100%;
    display: block;
    max-width: 100%;
  }
  .pricing-grid .pricing-card.active {
    display: block;
  }
  .pricing-grid .pricing-card {
    border-radius: 10px;
    display: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .pricing-grid .pricing-card:hover {
    display: none;
  }
  .pricing-grid .pricing-card .price,
  .pricing-grid .pricing-card h4 {
    font-size: 1.75rem;
  }
  .pricing-grid .pricing-card .price span {
    font-size: 1rem;
  }
  .pricing-grid .pricing-card .install {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
  }
  .pricing-grid .pricing-card .no-discount {
    font-size: 0.875rem;
  }
  .pricing-grid .pricing-card .discount-year {
    font-size: 1rem;
  }
  .pricing-grid .pricing-card .features li {
    font-size: 1rem;
    line-height: 2.3em;
  }
  .pricing-grid .pricing-card .pricing-btn {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  .pricing-grid .pricing-card .pricing-btn::before {
    display: none;
  }
}

.pricing-info {
  margin-top: 24px;
  background-color: #f5f7f9;
  border-radius: 20px;
  padding: 30px;
}
.pricing-info h5 {
  margin-bottom: 0.5rem;
}
.pricing-info ul {
  list-style: disc;
  color: #666666;
}
.pricing-info ul li {
  margin-left: 16px;
}
@media screen and (max-width: 768px) {
  .pricing-info {
    margin-top: 1rem;
    border-radius: 10px;
    padding: 20px;
  }
  .pricing-info h5 {
    margin-bottom: 6px;
  }
  .pricing-info ul li {
    font-size: 0.875rem;
  }
}

.pricing-tabs {
  display: none;
}
.pricing-tabs.mobile-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .pricing-tabs.mobile-only {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-around;
  }
  .pricing-tabs.mobile-only .tab-btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    color: #bbbbbb;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
  }
  .pricing-tabs.mobile-only .tab-btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    transition: 0.3s;
  }
  .pricing-tabs.mobile-only .tab-btn.active {
    color: #333333;
  }
  .pricing-tabs.mobile-only .tab-btn.active::after {
    background-color: #333333;
  }
}

caption {
  display: none;
}

.board-group {
  width: 100%;
  padding-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .board-group {
    padding: 0 20px 60px 20px;
  }
}

/* @media screen and (max-width: 768px) {
  .board {
    padding: 0 20px;
  }
} */

.board-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-right: 16px;
  /* Category Btn */
}
.board-toolbar #bbsCount {
  margin-bottom: 0;
}
.board-toolbar #boardCategory h2 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.board-toolbar #boardCategory ul {
  display: flex;
}
.board-toolbar #boardCategory ul li {
  margin-left: 2rem;
}
.board-toolbar #boardCategory ul li a {
  padding: 0;
  background-color: transparent;
  color: #bbbbbb;
  position: relative;
}
.board-toolbar #boardCategory ul li a::before {
  content: "";
  width: 1px;
  height: 13px;
  background-color: #bbb;
  position: absolute;
  top: 50%;
  transform: translateY(-51%);
  left: -16px;
}
.board-toolbar #boardCategory ul li:first-child a::before {
  display: none;
}
.board-toolbar #boardCategory ul li:first-child {
  margin-left: 0;
}
.board-toolbar #boardCategory ul #boardCategoryOn {
  color: #333333;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .board-toolbar {
    flex-direction: column;
    gap: 2rem;
    padding-right: 0;
    width: 100%;
    align-items: flex-start;
  }
  .board-toolbar #bbsCount {
    order: 2;
    font-size: 0.875rem;
  }
  .board-toolbar #boardCategory {
    order: 1;
    width: 100%;
  }
  .board-toolbar #boardCategory ul {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .board-toolbar #boardCategory ul li {
    margin-left: 0;
    flex: 1;
    text-align: center;
    min-width: 70px;
  }
  .board-toolbar #boardCategory ul li a {
    padding-bottom: 6px;
    width: 100%;
    display: block;
  }
  .board-toolbar #boardCategory ul li a::before {
    display: none;
  }
  .board-toolbar #boardCategory ul #boardCategoryOn {
    border-bottom: 2px solid #eb4d3d;
  }
}

#bbsCount {
  margin-left: 5px;
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  #bbsCount {
    font-size: 0.875rem;
  }
}

/* Board Content */
.bbs-label {
  display: none;
}

table.board-wrap {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
table.board-wrap .table-title {
  width: 100%;
  background-color: #f5f7f9;
}
table.board-wrap .table-title th {
  padding: 25px;
  font-weight: 500;
  font-size: 1.125rem;
}
table.board-wrap .table-title th.title {
  text-align: left;
  padding-left: 30px;
}
table.board-wrap .table-title th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
table.board-wrap .table-title th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
table.board-wrap tbody td {
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid #e8e8e8;
  color: #666666;
}
table.board-wrap tbody td.subject {
  cursor: pointer;
  text-align: left;
  font-weight: 500;
  color: #333333;
}
table.board-wrap tbody td input[type="text"] {
  padding: 4px 4px 4px 8px;
  border: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
  table.board-wrap tbody td {
    padding: 20px;
  }
}
table.board-wrap tbody tr:hover td {
  color: #333333;
}
table.board-wrap tbody tr:hover {
  background-color: rgba(246, 248, 251, 0.5);
}
table.board-wrap tbody tr:hover .download {
  transition: 0.3s;
  font-weight: 600;
  color: #eb4d3d;
}
table.board-wrap tbody tr:hover .download .icofont-download {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}

@media screen and (max-width: 768px) {
  table.board-wrap {
    display: none;
  }
}

.board-card-list {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
}
.board-card-list .board-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  border-radius: 10px;
  background-color: #f5f7f9;
}
.board-card-list .board-card .card-meta {
  font-size: 0.75rem;
  color: #eb4d3d;
  font-weight: 600;
}
.board-card-list .board-card .card-meta .icofont-notification {
  width: 16px;
  height: 16px;
}
.board-card-list .board-card .card-title {
  font-size: 1rem;
  font-weight: 600;
}
.board-card-list .board-card .card-extra {
  font-size: 0.75rem;
  color: #666666;
  display: flex;
  gap: 0.5rem;
}
.board-card-list .board-card.download .card-title {
  position: relative;
  width: 100%;
  padding-right: 24px;
}
.board-card-list .board-card.download .card-title::after {
  content: "";
  position: absolute;
  background: url("/assets/images/common/icon/download.svg");
  background-size: 18px;
  width: 18px;
  height: 18px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .board-card-list {
    display: flex;
  }
}

.write-btn {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  color: #212121;
  transition: 0.3s;
  text-align: center;
}
.write-btn:hover {
  border-color: #666;
}

/* Detail Content */
.post-content {
  padding-bottom: 10rem;
}
.board-group > .post-content {
  padding: 0;
}
@media screen and (max-width: 768px) {
  .post-content {
    padding: 0 20px 60px 20px;
  }
  .board-group > .post-content {
    padding: 0;
  }
}

.post-header {
  border-radius: 20px;
}
.post-header h3 {
  font-weight: 700;
}
.post-header .post-title,
.post-header .post-meta {
  margin-left: 5px;
}
.post-header .post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 30px;
  color: #999;
  font-size: 1.125rem;
}
.post-header .post-meta img {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 3px;
  filter: brightness(0) saturate(100%) invert(67%) sepia(0%) saturate(7%)
    hue-rotate(203deg) brightness(91%) contrast(91%);
}
.post-attachment {
  padding: 30px;
  margin-top: 5rem;
  font-weight: 500;
  font-size: 1.125rem;
  border-radius: 8px;
  background-color: #f5f7f9;
}
.post-attachment .label {
  margin-right: 1rem;
}
.post-attachment a {
  text-decoration: underline;
  color: #147bd1;
}
.post-attachment a:hover {
  text-decoration: none;
  color: #222;
}
.post-attachment a:visited {
  color: #800080;
}
@media screen and (max-width: 768px) {
  .post-header .post-title,
  .post-header .post-meta {
    margin-left: 3px;
  }
  .post-header .post-meta {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    gap: 0.5rem;
  }
  .post-header .post-meta img {
    height: 16px;
    width: 16px;
    margin-right: 2px;
    vertical-align: -3px;
  }
  .post-attachment {
    margin-top: 2.5rem;
    padding: 20px;
    font-size: 0.875rem;
  }
  .post-attachment .label {
    display: block;
    margin-bottom: 6px;
  }
}

#viewCont {
  line-height: 2rem;
  padding: 40px 0;
  margin-bottom: 1rem;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  font-size: 1.125rem;

  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
#viewCont a {
  text-decoration: underline;
  color: #147bd1;
}
#viewCont a:hover {
  text-decoration: none;
  color: #222;
}
#viewCont a:visited {
  color: #800080;
}
@media screen and (max-width: 768px) {
  #viewCont {
    line-height: 1.4;
    font-size: 1rem;
    padding: 1rem 3px;
  }
}

.post-nav-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.post-nav-btns button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  pointer-events: none;
}
.post-btn {
  height: 46px;
  line-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .post-btn {
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    border-radius: 4px;
  }
}

@media screen and (max-width: 768px) {
  .post-nav-btns {
    flex-direction: column;
    gap: 0.5rem;
  }
  .post-nav-btns .post-nav {
    display: flex;
    width: 100%;
    gap: 0.5rem;
  }
  .post-nav-btns .post-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* 추천/비추천 버튼 */
.post-evaluation {
  display: flex;
  gap: 1rem;
  margin-top: 5rem;
}
.post-evaluation button {
  font-size: 1rem;
  background: none;
  border: none;
  cursor: pointer;
}
.post-evaluation button:hover {
  text-decoration: underline;
}
.post-evaluation button span {
  margin-left: 3px;
}
.post-evaluation button img {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}
.post-evaluation button.post-like img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.post-evaluation button.post-dislike img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2883%)
    hue-rotate(296deg) brightness(108%) contrast(60%);
}
@media screen and (max-width: 768px) {
  .post-evaluation {
    margin-top: 2.5rem;
    gap: 0.5rem;
  }
  .post-evaluation button {
    height: 46px;
    line-height: 46px;
    padding: 0 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    flex: 1;
  }
}

/* 댓글 */
.post-comments {
  margin-top: 2.5rem;
}
.post-comments h4 span {
  font-weight: 700;
  margin-right: 5px;
}
.post-comments h4 {
  margin-left: 5px;
  margin-bottom: 1rem;
  font-weight: 500;
}
.post-comments .comment-list {
  list-style: none;
  padding-left: 0;
}
.post-comments .comment-list .comment-item {
  margin-bottom: 0.5rem;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 15px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.post-comments .comment-list .comment-item[data-parent-id] {
  margin-left: 20px;
}
.post-comments .comment-list .comment-item.my-comment {
  background: #f5f7f9;
}
.post-comments .comment-list .comment-item .comment-meta {
  font-size: 0.875rem;
  color: #666666;
  display: flex;
  align-items: center;
}
.post-comments .comment-list .comment-item .comment-meta .comment-author {
  font-weight: bold;
}
.post-comments .comment-list .comment-item .comment-meta .comment-date {
  color: #666666;
  margin-left: auto;
}
.post-comments .comment-list .comment-item .comment-text {
  font-size: 1rem;
}
.post-comments .comment-list .comment-item .comment-text .mention {
  color: #147bd1;
  font-weight: 500;
  margin-right: 4px;
}
.post-comments .comment-list .comment-item .comment-actions {
  display: flex;
  gap: 1rem;
}
.post-comments .comment-list .comment-item .comment-actions button {
  background: none;
  border: none;
  font-size: 0.875rem;
  color: #147bd1;
  cursor: pointer;
  padding: 0;
}
.post-comments .comment-list .comment-item .comment-actions button:hover {
  text-decoration: underline;
}
/* 댓글엔 수정 사용안함
.post-comments .comment-list .comment-item .comment-actions .comment-edit {
  margin-left: auto;
}
*/
.post-comments .comment-list .comment-item .comment-actions .comment-edit,
.post-comments .comment-list .comment-item .comment-actions .comment-delete {
  color: #666666;
  margin-left: auto;
}
.post-comments .comment-form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-comments .comment-form .reply-to-indicator {
  font-size: 0.875rem;
  margin-bottom: 4px;
  background: #f5f7f9;
  padding: 6px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.post-comments .comment-form .reply-to-indicator .mention {
  font-weight: 500;
  color: #147bd1;
}
.post-comments .comment-form .reply-to-indicator .cancel-reply {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #999;
  margin-left: auto;
}
.post-comments .comment-form .reply-to-indicator .cancel-reply:hover {
  color: #000;
}
.post-comments .comment-form .input-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.post-comments .comment-form .input-row textarea {
  flex: 8;
  padding: 15px;
  resize: vertical;
  font-size: 1rem;
  border: 1px solid #cccccc;
  border-radius: 8px;
}
.post-comments .comment-form #commentSubmit {
  flex: 1;
  background-color: #333;
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
  float: right;
}
.post-comments .comment-form #commentSubmit:hover {
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .post-comments {
    margin-top: 30px;
  }
  .post-comments h4 span {
    margin-right: 3px;
  }
  .post-comments h4 {
    margin-bottom: 0.5rem;
  }
  .post-comments .comment-list .comment-item {
    border-radius: 4px;
    padding: 10px;
  }
  .post-comments .comment-list .comment-item[data-parent-id] {
    margin-left: 10px;
  }
  .post-comments .comment-list .comment-item .comment-meta {
    font-size: 0.75rem;
  }
  .post-comments .comment-list .comment-item .comment-text {
    font-size: 0.875rem;
  }
  .post-comments .comment-list .comment-item .comment-actions button {
    font-size: 0.75rem;
  }
  .post-comments .comment-form {
    margin-top: 1rem;
  }
  .post-comments .comment-form .reply-to-indicator {
    font-size: 0.875rem;
    border-radius: 4px;
  }
  .post-comments .comment-form .input-row {
    flex-direction: column;
  }
  .post-comments .comment-form .input-row textarea {
    border-radius: 4px;
    font-size: 0.875rem;
  }
  .post-comments .comment-form .input-row #commentSubmit {
    padding: 17px 20px;
  }
}

/* 글 작성 */
.post-write {
  padding-bottom: 10rem;
}
.post-write .post-form {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.post-write .post-form .form-group {
  display: flex;
  flex-direction: column;
}
.post-write .post-form .form-group label {
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 600;
}
.post-write .post-form .form-group label .required {
  color: #eb4d3d;
}
.post-write .post-form .form-group input[type="text"],
.post-write .post-form .form-group input[type="password"],
.post-write .post-form .form-group input[type="email"],
.post-write .post-form .form-group input[type="number"],
.post-write .post-form .form-group input[type="file"],
.post-write .post-form .form-group textarea {
  padding: 17px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.post-write .post-form .form-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.post-write .post-form .form-group select {
  padding: 17px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 100%;
}
.post-write .post-form .form-group .input-row {
  display: flex;
  gap: 0.5rem;
}
.post-write .post-form .form-group .input-row span {
  width: 200px;
  background-color: #333;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.post-write .post-form .form-group .input-row input[type="text"] {
  width: 100%;
}
.post-write .post-form .form-group .form-note {
  margin-top: 6px;
  font-size: 0.875rem;
  color: #666;
}
.post-write .post-form .inline-group,
.post-write .post-form .inline-group2 {
  margin-top: 0.5rem;
  margin-left: 3px;
  flex-direction: row;
  align-items: center;
}
.post-write .post-form .inline-group label {
  font-size: 0.875rem;
  margin: 0;
}
.post-write .post-form .inline-group2 label {
  font-size: 1.125rem;
  margin: 0;
  margin-bottom: 10px;
}

.post-write .post-form .inline-group input[type="checkbox"] {
  margin-right: 6px;
}
.post-write .post-form .inline-group .form-note {
  margin-top: 0;
  margin-left: 0.5rem;
}
.post-write .post-form .btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-write .post-form .btn-group .btn {
  height: 55px;
  width: 306px;
}

.post-write .post-form .form-group #file_del_1 {
  vertical-align: -4px;
}

.post-write .post-form .secure-code {
  user-select: none; /* 텍스트 선택 금지 */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

@media screen and (max-width: 768px) {
  .post-write {
    padding: 0 20px 60px 20px;
  }
  .post-write .post-form {
    gap: 1.5rem;
  }
  .post-write .post-form .form-group label {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }
  .post-write .post-form .form-group input[type="text"],
  .post-write .post-form .form-group textarea {
    font-size: 0.875rem;
    padding: 17px;
    border-radius: 4px;
  }
  .post-write .post-form .form-group input[type="file"] {
    font-size: 0.875rem;
  }
  .post-write .post-form .form-group .input-row {
    flex-direction: column;
  }
  .post-write .post-form .form-group .input-row span {
    width: 100%;
    padding: 17px;
    line-height: 1.4;
    border-radius: 4px;
    font-size: 0.875rem;
  }
  .post-write .post-form .form-group .form-note {
    font-size: 0.75rem;
  }
  .post-write .post-form .inline-group label {
    font-size: 0.75rem;
    margin-bottom: 0;
  }
  .post-write .post-form .btn-group {
    flex-direction: column;
  }
  .post-write .post-form .btn-group .btn {
    width: 100%;
    font-size: 0.875rem;
  }
}

.toastui-editor-defaultUI {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .toastui-editor-defaultUI {
    border-radius: 4px;
  }
}

/* faq */
.faq-answer-row {
  display: none;
}
.faq-answer-row td {
  padding: 0 !important;
  border-bottom: none !important;
}

.con-inner {
  line-height: 1.8rem;
  overflow: hidden;
  background-color: #f5f7f9; /* 필요 시 배경 색 */
  padding: 30px;
  text-align: left;
}

/* Search */
.board-bottom {
  /*display: flex;*/
  display: inline-block;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  margin-top: 1rem;
  width: 100%;
}
.board-bottom .bbs-search {
  float: left;
  margin: 0;
}
.board-bottom .post-list {
  float: right;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .board-bottom {
    flex-direction: column;
    height: 100%;
    gap: 0.5rem;
  }
  .board-bottom a {
    display: inline-block;
    width: 100%;
  }
  .board-bottom .bbs-search {
    float: none;
  }
  .board-bottom .post-list {
    float: none;
    width: 100%;
    margin-top: 10px;
  }
}

.bbs-search {
  text-align: center;
  align-items: center;
  display: flex;
  border: 1px solid #e8e8e8;
  padding: 0 5px;
  max-width: 360px;
  transition: 0.3s;
  border-radius: 8px;
  margin-top: 1rem;
  color: #212121;
}
.bbs-search:focus-within {
  border-color: #999;
}
.bbs-search select,
.bbs-search input,
.bbs-search button {
  padding: 10px;
  background-color: transparent;
}
.bbs-search select {
  width: 140px;
}
.bbs-search input {
  min-width: 0;
  padding-left: 0;
}
.bbs-search button {
  margin-left: auto;
}
.bbs-search button img {
  width: 24px;
  height: 24px;
  display: block;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
}
@media screen and (max-width: 768px) {
  .bbs-search {
    max-width: 100%;
    font-size: 1rem;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
  }
}

/* 답변 상태 */
.status-pending,
.status-resolved {
  color: #bbbbbb;
  font-weight: 600;
}

.status-resolved {
  color: #eb4d3d;
}

/* Icon */
.icofont-notification {
  background-image: url("/assets/images/common/icon/notification.svg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  filter: invert(17%) sepia(97%) saturate(7495%) hue-rotate(0deg)
    brightness(93%) contrast(110%);
}

.icofont-ui-clip {
  background-image: url("/assets/images/common/icon/ui-clip.svg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: 14px;
  vertical-align: -2px;
  margin-left: 2px;
  filter: brightness(0) saturate(100%) invert(0%) sepia(44%) saturate(71%)
    hue-rotate(104deg) brightness(108%) contrast(60%);
}

.icofont-download {
  background-image: url("/assets/images/common/icon/download.svg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  vertical-align: -3px;
  transition: 0.2s;
  filter: brightness(0) saturate(100%) invert(0%) sepia(44%) saturate(71%)
    hue-rotate(104deg) brightness(108%) contrast(60%);
}

.icofont-unlock {
  background-image: url("/assets/images/common/icon/lock.svg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  filter: brightness(0) saturate(100%) invert(0%) sepia(44%) saturate(71%)
    hue-rotate(104deg) brightness(108%) contrast(60%);
}

.icon-new::after {
  content: "new";
  color: red;
  font-size: 14px;
  vertical-align: 2px;
}
@media screen and (max-width: 768px) {
  .icon-new::after {
    font-size: 12px;
  }
}

/* 답변 상태 */
.status-pending,
.status-resolved {
  color: #bbbbbb;
  font-weight: 600;
}

.status-resolved {
  color: #eb4d3d;
}

.gray-btn {
  background-color: #f2f5f9;
  color: #000;
  height: 46px;
  line-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  display: inline-block;
}

.black-btn {
  background-color: #333;
  color: #ffffff;
  height: 46px;
  line-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  display: inline-block;
}

.write-btn {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  color: #212121;
  transition: 0.3s;
  text-align: center;
}
.write-btn:hover {
  border-color: #666;
}

@media screen and (max-width: 768px) {
  .gray-btn,
  .black-btn,
  .write-btn {
    border-radius: 4px;
    font-size: 0.875rem;
  }
}

.form.login .form-content {
  max-width: 636px;
}
.form .form-content {
  width: 100%;
  margin: 7.5rem auto 10rem;
}
.form .form-content.email-Verification {
  margin: 0rem auto 10rem;
}
@media screen and (max-width: 768px) {
  .form .form-content.email-Verification {
  margin: 0rem auto 3.75rem;
}
}

/* Pagenation */
.paginate-group {
  display: block;
  width: 100%;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .paginate-group {
    margin-top: 2rem;
  }
}

.paginate-wrap {
  text-align: center;
  font-size: 0.875rem;
}
.paginate-wrap a,
.paginate-wrap span {
  display: inline-block;
  position: relative;
  min-width: 32px;
  height: 32px;
  line-height: 30px;
  padding: 0 5px;
  border-radius: 4px;
  transition: 0.3s;
}
.paginate-wrap a.pre,
.paginate-wrap a.next,
.paginate-wrap a.first,
.paginate-wrap a.last,
.paginate-wrap span.pre,
.paginate-wrap span.next,
.paginate-wrap span.first,
.paginate-wrap span.last {
  position: relative;
  vertical-align: top;
}
.paginate-wrap a:hover {
  color: #eb4d3d;
}
.paginate-wrap span {
  color: #fff;
  background: #eb4d3d;
}
.paginate-wrap a img {
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
}
.paginate-wrap a i {
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}
.paginate-wrap a.pre {
  margin-right: 10px;
}
.paginate-wrap a.next {
  margin-left: 10px;
}

.remote-wrap {
  padding-bottom: 10rem;
}
@media screen and (max-width: 768px) {
  .remote-wrap {
    padding: 0 20px 60px 20px;
  }
}

.remote-body {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  /*background-color: #f5f7f9;*/
  background-color: #fafcff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  height: 500px;
}
.remote-body .remote-box {
  width: 100%;
  min-height: 400px;
  text-align: center;
}
.remote-body .remote-box h3 {
  margin-bottom: 0.5rem;
}
.remote-body .remote-box .box-desc {
  font-size: 1rem;
  color: #eb4d3d;
  margin-bottom: 1.5rem;
}
.remote-body .remote-box .agent-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.remote-body .remote-box .agent-status .status-text {
  display: block;
  font-size: 1rem;
  color: #666666;
  margin-top: 1.5rem;
}
.remote-body .remote-box .agent-status .tertiary {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 0.5rem;
}
.remote-body .remote-box .agent-status .tertiary img {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  vertical-align: -3px;
}
@media screen and (max-width: 768px) {
  .remote-body {
    height: auto;
    padding: 0;
  }
  .remote-body .remote-box {
    height: 400px;
  }
  .remote-body .remote-box h3 {
    margin-bottom: 6px;
  }
  .remote-body .remote-box iframe {
    width: 100% !important;
    border-radius: 10px;
  }
  .remote-body .remote-box .box-desc {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
  .remote-body .remote-box .agent-status .status-text {
    font-size: 0.875rem;
  }
  .remote-body .remote-box .agent-status .tertiary {
    padding: 5px 10px;
    font-size: 0.875rem;
  }
}

.remote-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.remote-footer .footer-tip {
  font-size: 0.875rem;
  color: #666666;
  margin-top: 5px;
}
.remote-footer .btn-dark {
  font-size: 1rem;
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  font-weight: 400;
}
.remote-footer .btn-dark:hover {
  background-color: #000;
}
.remote-footer .btn-dark img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(10%) saturate(2%)
    hue-rotate(4deg) brightness(106%) contrast(101%);
  width: 18px;
  height: 18px;
  margin-right: 3px;
  vertical-align: -3px;
}
.remote-footer .manual-link {
  font-size: 1rem;
  border: 1px solid #147bd1;
  color: #147bd1;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s;
}
.remote-footer .manual-link:hover {
  background-color: #147bd1;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .remote-footer {
    margin-top: 0.5rem;
    flex-direction: column;
    text-align: center;
  }
  .remote-footer .program-down {
    order: 2;
  }
  .remote-footer .footer-tip {
    font-size: 0.75rem;
  }
  .remote-footer .btn-dark {
    width: 100%;
    font-size: 0.875rem;
    height: 52px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .remote-footer .btn-dark img {
    width: 16px;
    height: 16px;
  }
  .remote-footer .manual-link {
    order: 1;
    margin-bottom: 0.5rem;
    width: 100%;
    font-size: 0.875rem;
    border-radius: 4px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.form.login .form-content {
  max-width: 500px;
}
.form.forgot .form-content {
  max-width: 550px;
}
.form .form-content {
  width: 100%;
  margin: 7.5rem auto 10rem;
}
.form .form-content.member {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .form .form-content {
    padding: 60px 20px;
    margin: 0;
  }
  .form .form-content.member {
    padding-top: 0;
  }
}
.form .form-content h1 {
  text-align: center;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 768px) {
  .form .form-content h1 {
    margin-bottom: 2rem;
  }
}
.form .form-content .signup-notice {
  background-color: #f5f7f9;
  padding: 30px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 2.5rem;
  color: #666666;
}
.form .form-content .signup-notice strong {
  color: #333333;
}
.form .form-content .signup-notice p {
  margin-bottom: 10px;
}
.form .form-content .signup-notice p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .form .form-content .signup-notice {
    padding: 20px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
  }
  .form .form-content .signup-notice p {
    margin-bottom: 6px;
  }
}
.form .form-content .form-group-wrap {
  display: flex;
  gap: 1.5rem;
}
.form .form-content .form-group-wrap > div {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .form .form-content .form-group-wrap {
    flex-direction: column;
    gap: 0;
  }
}
.form .form-content .form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  align-items: end;
}
.form .form-content .form-row .form-group {
  margin-bottom: 0;
}
.form .form-content .form-row .form-group.flex-1 {
  flex-basis: 206px;
}
.form .form-content .form-row .form-group.flex-2 {
  flex: 2;
}
@media screen and (max-width: 768px) {
  .form .form-content .form-row {
    margin-bottom: 12px;
    gap: 0.5rem;
  }
  .form .form-content .form-row .form-group.flex-1,
  .form .form-content .form-row .form-group.flex-2 {
    flex: 1;
  }
}
.form .form-content .form-group {
  margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  .form .form-content .form-group {
    margin-bottom: 12px;
  }
}
.form .form-content .form-group > label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 10px;
  color: #666666;
  font-weight: 600;
}
.form .form-content .form-group > label .required {
  color: #eb4d3d;
}
.form .form-content .form-group > label .change-pw {
  margin-left: 8px;
}
.form .form-content .form-group > label .change-pw input {
  vertical-align: -2px;
}
@media screen and (max-width: 768px) {
  .form .form-content .form-group > label {
    font-size: 0.75rem;
    margin-bottom: 5px;
  }
}
.form .form-content .form-group.login-group {
  margin-bottom: 0.5rem;
}
.form .form-content button {
  height: 55px;
}
.form .form-content .login-btn,
.form .form-content .remove-btn {
  width: 100%;
  height: 55px;
}
.form .form-content .signup-btn {
  width: 416px;
  margin: 0 auto;
}
.form .form-content .remove-btn:hover {
  background-color: #333;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .form .form-content button,
  .form .form-content .login-btn,
  .form .form-content .remove-btn {
    height: 52px;
  }
  .form .form-content .signup-btn {
    width: 100%;
  }
}
.form .form-content .login-form {
  width: 100%;
  padding: 17px 20px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: 0.3s;
}
.form .form-content .login-form:focus {
  border-color: #999;
}

.form .form-content .login-form.country-code {
  text-align: center;
  max-width: 100px;
}
.form .form-content .login-form.code-input {
  width: calc(100% - 108px);
  float: right;
}

.form .form-content .login-form.login-field {
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .form .form-content .login-form.login-field {
    padding: 17px;
  }
}
@media screen and (max-width: 768px) {
  .form .form-content .login-form {
    font-size: 0.875rem;
    border-radius: 4px;
    padding: 17px;
  }
}
.form .form-content .check-btn {
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
  transition: 0.3s;
}
.form .form-content .check-btn:hover {
  background-color: #333;
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .form .form-content .check-btn {
    font-size: 0.875rem;
    border-radius: 4px;
  }
}
.form .form-content .agreements {
  margin-bottom: 2.5rem;
}
.form .form-content .agreements input {
  vertical-align: -2px;
  margin-right: 3px;
}
.form .form-content .agreements > label {
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid #dddddd;
  margin-bottom: 20px;
}
.form .form-content .agreements .sub-agreements label {
  display: block;
}
.form .form-content .agreements .sub-agreements label:first-child {
  margin-bottom: 20px;
}
.form .form-content .agreements .sub-agreements label a {
  margin-left: 5px;
  color: #147bd1;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .form .form-content .agreements {
    margin-bottom: 2rem;
    font-size: 0.875rem;
  }
  .form .form-content .agreements > label {
    padding-bottom: 10px;
    margin: 10px 0;
  }
  .form .form-content .agreements .sub-agreements label:first-child {
    margin-bottom: 10px;
  }
}
.form .form-content .account-sign-up {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.form .form-content .account-sign-up .sign-up {
  color: #147bd1;
}
.form .form-content .account-sign-up .forgot-account::before {
  content: "";
  margin-right: 10px;
  height: 13px;
  width: 1px;
  background-color: #999;
  display: inline-block;
  vertical-align: -1px;
}
.form .form-content .account-sign-up > div:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .form .form-content .account-sign-up {
    font-size: 0.875rem;
  }
}
.form .form-content .login-info {
  text-align: center;
  color: #666666;
  margin-top: 40px;
  line-height: 1.4;
  font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
  .form .form-content .login-info {
    margin-top: 1.5rem;
    font-size: 0.75rem;
  }
}
.form .form-content .address-group {
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 768px) {
  .form .form-content .address-group {
    margin-bottom: 12px;
  }
}
.form .form-content .address-group .form-row {
  margin-bottom: 0.5rem;
}
.form .form-content .address-group .form-row .form-group {
  margin-bottom: 0;
}
.form .form-content .address-group .form-row .form-group .login-form {
  margin-bottom: 0;
}
.form .form-content .address-group > .login-form {
  margin-bottom: 0.5rem;
}
.form .form-content .address-group > .login-form:nth-child(3) {
  margin-bottom: 0;
}
.form .form-content .address-group > .login-form#address3 {
  margin-top: 0.5rem;
}

.form .form-content .address-group .address-btn {
  height: 44px;
  padding: 0 16px;
  font-size: 1rem;
  font-weight: 400;
}

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

.hidden {
  display: none !important;
}

.terms {
  padding: 2.5rem 0 5rem 0;
  line-height: 1.4;
  font-size: 1.125rem;
}
.terms .terms-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1.5rem;
}
.terms .terms-header .back-btn {
  width: 56px;
  height: 56px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.terms .terms-header .back-btn img {
  width: 36px;
  height: 36px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
}
.terms .terms-header h2 {
  text-align: left;
  margin-bottom: 0;
}
.terms .terms-content {
  margin-left: 5px;
  text-align: justify;
}
.terms .terms-content strong {
  margin-bottom: 3px;
  display: inline-block;
}
.terms .terms-content strong[id] {
  scroll-margin-top: 100px;
}
.terms .terms-content a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .terms {
    padding: 40px 20px;
  }
  .terms .terms-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1.5rem;
  }
  .terms .terms-header .back-btn {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  .terms .terms-header .back-btn img {
    width: 24px;
    height: 24px;
  }
  .terms .terms-content {
    font-size: 14px;
  }
  .terms .terms-content strong {
    font-family: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .file-convertor {
    padding: 0 20px;
  }
}
.file-convertor h4 {
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  .file-convertor h4 {
    margin-bottom: 0.5rem;
  }
}
.file-convertor .content > div {
  border-radius: 20px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
  padding: 30px;
  background-color: #ffffff;
}
@media screen and (max-width: 768px) {
  .file-convertor .content > div {
    padding: 20px;
    border-radius: 10px;
  }
}
.file-convertor .icon {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background-color: #f5f7f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-convertor .icon img {
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
}
@media screen and (max-width: 768px) {
  .file-convertor .icon {
    width: 50px;
    height: 50px;
  }
}
.file-convertor .remove {
  border: none;
  background: none;
  cursor: pointer;
  vertical-align: -5px;
}
.file-convertor .remove img {
  width: 18px;
  height: 18px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  transition: 0.3s;
  display: block;
}
@media screen and (max-width: 768px) {
  .file-convertor .remove img {
    width: 16px;
    height: 16px;
  }
}
.file-convertor .remove:hover img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.file-convertor .convert-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.file-convertor .convert-form .convertor-btn {
  height: 55px;
  width: 200px;
  font-size: 1rem;
  border-radius: 8px;
}
.file-convertor .convert-form .form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}
.file-convertor .convert-form .form-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.file-convertor .convert-form .form-row > div > label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #666666;
}
.file-convertor .convert-form .form-row select {
  padding: 0 20px;
  height: 55px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.file-convertor .convert-form .file-wrap {
  width: 100%;
  border: 1px dashed #ddd;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  transition: 0.3s;
}
.file-convertor .convert-form .file-wrap #uploadGuide {
  font-size: 1.125rem;
  font-weight: 600;
}
.file-convertor .convert-form .file-wrap #uploadGuide .icon {
  margin: 0 auto;
  margin-bottom: 1.5rem;
}
.file-convertor .convert-form .file-wrap #uploadGuide span {
  font-weight: 400;
}
.file-convertor .convert-form .file-wrap #uploadGuide label {
  text-decoration: underline;
  cursor: pointer;
}
.file-convertor .convert-form .file-wrap #uploadLimit {
  font-size: 0.875rem;
  color: #999;
  margin-bottom: 0.5rem;
}
.file-convertor .convert-form .file-wrap #file-list {
  text-align: center;
  font-size: 0.875rem;
  color: #333;
}
.file-convertor .convert-form .file-wrap .file-box {
  background: #f5f7f9;
  padding: 16px;
  margin-bottom: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.file-convertor .convert-form .file-wrap .file-box:last-child {
  margin-bottom: 0;
}
.file-convertor .convert-form .file-wrap .file-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.file-convertor .convert-form .file-wrap .file-detail .file-name {
  font-size: 1rem;
  font-weight: 600;
}
.file-convertor .convert-form .file-wrap .file-detail .file-size {
  font-size: 0.875rem;
  color: #888;
}
.file-convertor .convert-form .file-wrap .file-detail .converted {
  font-size: 0.875rem;
}
.file-convertor .convert-form .file-wrap .remove {
  border: none;
  background: none;
  cursor: pointer;
}
.file-convertor .convert-form .file-wrap .remove img {
  width: 18px;
  height: 18px;
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  transition: 0.3s;
}
.file-convertor .convert-form .file-wrap .remove:hover img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.file-convertor .convert-form .file-wrap #file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.file-convertor .convert-form .file-wrap #file-header .file-title {
  font-weight: 600;
}
.file-convertor .convert-form .file-wrap #file-header .add-more {
  background: none;
  border: none;
  color: #147bd1;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.875rem;
}
.file-convertor .convert-form .file-wrap #file-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #888;
}
.file-convertor .convert-form .file-wrap #file-footer .clear-all {
  background: none;
  border: none;
  font-size: 0.875rem;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}

.totalClear .clear-all {
  float: right;
  text-align: right;
  background: none;
  border: none;
  font-size: 0.875rem;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .file-convertor .convert-form {
    gap: 1rem;
  }
  .file-convertor .convert-form .convertor-btn {
    height: 52px;
    width: 100%;
    font-size: 0.875rem;
  }
  .file-convertor .convert-form .form-row {
    flex-direction: column;
    gap: 10px;
  }
  .file-convertor .convert-form .form-row > div {
    width: 100%;
    gap: 6px;
  }
  .file-convertor .convert-form .form-row select {
    padding: 0 17px;
    height: 52px;
    border-radius: 4px;
    font-size: 1rem;
  }
  .file-convertor .convert-form .file-wrap {
    padding: 13px;
  }
  .file-convertor .convert-form .file-wrap #uploadGuide {
    font-size: 1rem;
  }
  .file-convertor .convert-form .file-wrap #uploadGuide .icon {
    margin-bottom: 1rem;
  }
  .file-convertor .convert-form .file-wrap #uploadLimit {
    font-size: 0.75rem;
    margin-bottom: 0;
  }
  .file-convertor .convert-form .file-wrap #file-list {
    font-size: 0.75rem;
  }
  .file-convertor .convert-form .file-wrap .file-box {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  .file-convertor .convert-form .file-wrap .file-detail {
    gap: 3px;
  }
  .file-convertor .convert-form .file-wrap .file-detail .file-name {
    font-size: 0.875rem;
  }
  .file-convertor .convert-form .file-wrap .file-detail .file-size {
    font-size: 0.75rem;
  }
  .file-convertor .convert-form .file-wrap .file-detail .converted {
    font-size: 0.75rem;
  }
  .file-convertor .convert-form .file-wrap #file-header {
    margin-bottom: 0;
  }
  .file-convertor .convert-form .file-wrap #file-header file-title {
    font-size: 0.875rem;
  }
  .file-convertor .convert-form .file-wrap #file-header .add-more {
    font-size: 0.75rem;
  }
  .file-convertor .convert-form .file-wrap #file-footer {
    margin-top: 0;
    font-size: 0.75rem;
    text-align: left;
  }
  .file-convertor .convert-form .file-wrap #file-footer .clear-all {
    font-size: 0.75rem;
  }
}
.file-convertor .division-line {
  width: 100%;
  height: 1px;
  background-color: #ececec;
  margin: 1.5rem 0;
}
@media screen and (max-width: 768px) {
  .file-convertor .division-line {
    margin: 1rem 0;
  }
}
.file-convertor .convert-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.file-convertor .convert-history .convert-file {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: 0.3s;
  /*cursor: pointer;*/
}
.file-convertor .convert-history .convert-file:hover {
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.06);
}
.file-convertor .convert-history .convert-file .convert-file-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.file-convertor .convert-history .convert-file .convert-file-info .file-name {
  font-weight: 600;
}
.file-convertor .convert-history .convert-file .convert-file-info .file-info {
  font-size: 0.875rem;
  color: #666666;
  display: flex;
  gap: 0.5rem;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-info
  .file-info
  span:after {
  content: "•";
  display: inline-block;
  transform: translateX(4px);
  font-size: 18px;
  color: #ddd;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-info
  .file-info
  span:last-child:after {
  opacity: 0;
  visibility: hidden;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-info
  .file-info
  .status {
  font-weight: 500;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-info
  .file-info
  .status.complete {
  color: #008000;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-info
  .file-info
  .status.processing {
  color: #ef8505;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-info
  .file-info
  .status.failed {
  color: #ff0000;
}
.file-convertor .convert-history .convert-file .convert-file-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.file-convertor .convert-history .convert-file .convert-file-btn .download-btn {
  font-weight: 500;
  max-width: max-content;
  font-size: 0.875rem;
  text-decoration: underline;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-btn
  .download-btn:hover {
  color: #eb4d3d;
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-btn
  .download-btn:hover
  i {
  filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(666%)
    hue-rotate(316deg) brightness(108%) contrast(111%);
}
.file-convertor
  .convert-history
  .convert-file
  .convert-file-btn
  .download-btn
  i {
  filter: invert(6%) sepia(0%) saturate(2%) hue-rotate(155deg) brightness(95%)
    contrast(83%);
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 768px) {
  .file-convertor .convert-history {
    gap: 0.5rem;
  }
  .file-convertor .convert-history .convert-file {
    padding: 13px;
  }
  .file-convertor .convert-history .convert-file .convert-file-info {
    gap: 6px;
  }
  .file-convertor .convert-history .convert-file .convert-file-info .file-name {
    font-size: 0.875rem;
  }
  .file-convertor .convert-history .convert-file .convert-file-info .file-info {
    font-size: 0.75rem;
    flex-direction: column;
    gap: 2px;
  }
  .file-convertor
    .convert-history
    .convert-file
    .convert-file-info
    .file-info
    span:after {
    display: none;
  }
  .file-convertor .convert-history .convert-file .convert-file-btn {
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
  }
  .file-convertor
    .convert-history
    .convert-file
    .convert-file-btn
    .download-btn {
    font-size: 0.75rem;
  }
  .file-convertor
    .convert-history
    .convert-file
    .convert-file-btn
    .download-btn
    i {
    width: 14px;
    height: 14px;
  }
}

/* 2025-07-02 추가 ------------------------------------------------------------------------------------------------------------------------------ */

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}
.noellipsis {
  white-space: normal; /* 줄바꿈 허용 */
  overflow: visible; /* 넘치는 콘텐츠도 표시 */
  text-overflow: unset; /* 말줄임표 사용 안 함 */
  max-width: none; /* 너비 제한 없음 */
}

/* 마이페이지 - 소프트웨어 업데이트 알림 팝업 */
.software_update_layer {
  display: none;
  position: absolute;
  z-index: 10001;
  left: 0px;
  top: 0px;
  margin: 0px;
  width: 600px;
  height: 512px;
  background: #000;
}
.software_update_layer .bg {
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 10002;
}
.software_update_layer .contents_layer {
  width: 600px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: calc(50% + 300px);
  transform: translate(-50%, -50%);
  z-index: 10003;
  border: 10px solid #f5f8fb;
  border-radius: 10px;
  padding: 60px 40px;
}

.inner_hidden_frame {
  display: none;
  width: 0%;
  height: 0px;
  margin: 0 auto;
  display: block;
}

#mask {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: #333;
  opacity: 0.7;
  filter: alpha(opacity=60);
}

/* 평가판 신청 결과 */
#popup_Trial {
  position: fixed;
  display: none;
  text-align: center;
  overflow: hidden;
  z-index: 1000;
  left: calc(50% - 212px);
  top: calc(50% - 250px);
  width: 425px;
  max-width: 425px;
  margin-top: 10px;
  padding: 0px;
}
#popup_Trial .Trial_Layer {
  position: relative;
  width: 100%;
  margin: 10px auto;
  text-align: center;
  background-color: #fff;
  padding: 0px 0px 30px 0px;
  border: 10px solid #fff;
  border-radius: 10px;
  overflow-x: hidden;
}
#popup_Trial .Trial_Layer ul {
  border: 1px solid #ccc;
  width: 80%;
  background-color: #f8f8f8;
}
#popup_Trial .Trial_Layer ul li {
  width: 100%;
  padding: 10px 0px;
}
#tria_ok_btn {
  width: 80%;
  padding: 10px !important;
  border-radius: 8px;
}
p.trial_ment {
  text-align: center;
  padding: 0px 10px 30px 10px;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
}
#popup_Trial .close-btn {
  float: right;
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
#popup_Trial .close-btn img {
  width: 36px;
  height: 36px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(454%)
    hue-rotate(280deg) brightness(98%) contrast(90%);
}

/* 제품문의 신청 결과 */
#popup_Suggest {
  position: fixed;
  display: none;
  text-align: center;
  overflow: hidden;
  z-index: 1000;
  left: calc(50% - 212px);
  top: calc(50% - 250px);
  width: 425px;
  max-width: 425px;
  margin-top: 10px;
  padding: 0px;
}
#popup_Suggest .Suggest_Layer {
  position: relative;
  width: 100%;
  margin: 10px auto;
  text-align: center;
  background-color: #fff;
  border: 10px solid #fff;
  border-radius: 10px;
}
#popup_Suggest .Suggest_Layer ul {
  border: 1px solid #ccc;
  width: 80%;
  background-color: #f8f8f8;
}
#popup_Suggest .Suggest_Layer ul li {
  width: 100%;
  padding: 10px 0px;
}
#suggest_ok_btn {
  width: 70%;
}
p.suggest_ment {
  text-align: center;
  padding: 0px 10px 50px 10px;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
}
#popup_Suggest .close-btn {
  float: right;
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(454%)
    hue-rotate(280deg) brightness(98%) contrast(90%);
}
#popup_Suggest .close-btn img {
  width: 36px;
  height: 36px;
  filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(454%)
    hue-rotate(280deg) brightness(98%) contrast(90%);
}

/* 2025-07-03 추가 ------------------------------------------------------------------------------------------------------------------------------ */

.video-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  z-index: 1000;
}

.video-popup video {
  width: 20px;
  height: auto;
}

/* 배경 어둡게 */
.video-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

.video-popup .close-btn {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

#videoThumb {
  cursor: pointer;
}

#formatForm input[type="radio"] {
  width: 20px;
  height: 20px;
  vertical-align: text-top;
}

.toastui-editor-defaultUI .ProseMirror {
  padding: 18px 25px;
  font-size: 16px;
}

.verification-btn {
  width: 100%;
  background-color: #333;
  color: #ffffff;
  height: 46px;
  line-height: 46px;
  padding: 0 20px;
  border-radius: 8px;
  display: inline-block;
}