.header .main-button > * {
  position: relative;
  z-index: 1;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
}

.header .main-button > *:before, .header .main-button > *:after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

#skipToContent a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
#skipToContent a:where(:focus, :active) {
  width: 220px;
  height: 54px;
  background: #0C121A;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  line-height: 54px;
  text-align: center;
  text-decoration: none;
}

/*** HEADER ***/
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  padding-inline: 20px;
  width: 100%;
  height: 68px;
  background-color: #FFFFFF;
  transition: all 0.2s ease-in-out;
  /* mobile */
}
.header .inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-inline: auto;
  width: 100%;
  max-width: 1280px;
  height: 100%;
}
.header section {
  --icon-size: 30px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease-in-out;
}
.header section.section-1 {
  flex-grow: 1;
}
.header section.section-2 {
  justify-content: center;
  transition: none !important;
}
.header section.section-3 {
  justify-content: center;
  flex-shrink: 0;
}
.header section.section-3 a {
  display: inline-flex;
  align-items: center;
  padding-left: 20px;
  height: 100%;
  font-size: 16px;
  line-height: 1.25em;
  color: #FFFFFF;
  font-weight: 700;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-image: url(/asquare/images/common/ico_prev_webzine.png);
}
.header section.section-4 {
  --button-size: 30px;
  justify-content: center;
  flex-shrink: 0;
}
.header section.section-4 .links {
  --space: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space);
  flex-shrink: 0;
  margin-right: var(--space);
  transition: all 0.2s ease-in-out;
}
.header section.section-4 .links a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
}
.header section.section-4 .links a.thearts-logo {
  --icon-size: 45px;
}
.header .btn-search-close {
  --icon-size: 30px;
  position: relative;
  display: none;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: all 0.2s ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--icon-size);
  background-image: url(/asquare/images/common/ico_search_close.svg);
}
.header .logo {
  display: inline-flex;
  min-width: 92px;
  line-height: 0;
}
.header .logo a {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header .logo a:not(:last-child) {
  padding-right: 16px;
}
.header .logo a:not(:last-child):after {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  right: 10px;
  opacity: 0.8;
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #fff;
}
.header .logo .thearts-logo {
  width: 184px;
}
.header .logo .webzine-logo {
  width: 113px;
}
.header .logo svg {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.header .head-nav {
  height: 100%;
}
.header #gnb {
  display: flex;
  gap: 60px;
  padding-left: 30px;
  height: inherit;
}
.header #gnb > li {
  position: relative;
  height: inherit;
}
.header #gnb > li > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  height: 3rem;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.25em;
  color: #0C121A;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.header #gnb > li > a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  width: 0;
  height: 4px;
  background-color: #066fef;
  transition: 0.2s ease-in-out;
  will-change: left, width, opacity;
}
.header #gnb > li > a:where(:hover, :focus) {
  text-decoration: none;
}
.header #gnb > li > a:where(:hover, :focus):after {
  left: 0;
  opacity: 1;
  width: 100%;
}
.header #gnb > li:not(:first-child):before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  width: 1px;
  height: 0.875rem;
  background-color: #b1b1b1;
  transform: translateY(-50%);
}
.header #gnb .submenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  display: none;
  padding: 16px;
  border: 1px solid rgba(177, 177, 177, 0.5019607843);
  border-radius: 8px;
  min-width: 180px;
  background-color: #000;
  box-shadow: 0px 15px 35px 0px rgba(60, 66, 87, 0.12), 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  text-align: left;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  font-size: 16px;
  line-height: 1.25em;
  color: #FFFFFF;
  font-weight: 500;
}
.header #gnb .submenu:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 3px;
}
.header #gnb .submenu-title {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.25em;
  color: #7A7A7A;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.header #gnb .submenu li a {
  display: block;
  padding-block: 4px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.25em;
  color: #FFFFFF;
  font-weight: 500;
}
.header #gnb .submenu li a:where(:hover, :focus) {
  background: rgba(60, 66, 87, 0.06);
}
.header .search-keyword {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  height: inherit;
  background-color: inherit;
}
.header .head-search-input {
  position: relative;
  z-index: 2;
  padding-inline: 0;
  border-color: transparent;
  border-radius: 0.25rem;
  width: 0;
  height: 2.5rem;
  background-color: transparent;
  font: inherit;
  cursor: pointer;
  outline: none;
  font-size: 18px;
  line-height: 1.25em;
  color: #FFFFFF;
  font-weight: 300;
}
.header .head-search-input::placeholder {
  opacity: 0.4;
  color: #FFFFFF;
}
.header .head-search-input:autofill, .header .head-search-input:autofill:hover, .header .head-search-input:autofill:focus, .header .head-search-input:autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px #066fef inset;
  box-shadow: 0 0 0px 1000px #066fef inset;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #fff;
}
.header .search-submit, .header .search-icon {
  position: absolute;
  top: calc(50% - var(--icon-size) / 2);
  display: block;
  border: none;
  width: var(--icon-size);
  height: var(--icon-size);
  line-height: var(--icon-size);
  text-align: center;
  cursor: pointer;
}
.header .search-icon {
  left: calc(50% - var(--icon-size) / 2);
  left: 0;
  z-index: 1;
  cursor: pointer;
  speak: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--icon-size);
  background-image: url(/asquare/images/common/ico_search_typeB_bk.svg);
}
.header .search-submit {
  right: 0;
  z-index: 0;
  opacity: 0;
  order: 9;
  color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--icon-size);
  background-image: url(/asquare/images/common/ico_search_typeB_wh.svg);
}
.header .language {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  height: var(--head-menu-height);
  transition: 0.2s ease-out;
}
.header .language .gtranslate_wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.header .language .gtranslate_wrapper a {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
}
.header .language .gtranslate_wrapper a.gt-current-lang {
  position: absolute;
  margin: -1px;
  padding: 0 !important;
  border: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}
.header .language .gtranslate_wrapper .gt_selector {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 !important;
  border: 0;
  width: 100%;
  height: 100%;
  background-image: none;
  color: transparent;
  cursor: pointer;
}
.header .language .gtranslate_wrapper .gt_selector option {
  color: #222;
  line-height: 18px;
}
.header .language .gtranslate_wrapper .gt_selector option:nth-child(1) {
  color: #767676;
}
.header .language .btn-lang {
  position: relative;
  display: inline-block;
  border: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("/asqure/images/common/ico_language.svg");
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.8 21.6a9.569 9.569 0 0 1-3.825-.775 9.88 9.88 0 0 1-3.113-2.087 9.88 9.88 0 0 1-2.087-3.113A9.57 9.57 0 0 1 2 11.8c0-1.35.258-2.625.775-3.825a9.88 9.88 0 0 1 2.087-3.113 9.88 9.88 0 0 1 3.113-2.087A9.57 9.57 0 0 1 11.8 2a9.57 9.57 0 0 1 3.825.775 9.88 9.88 0 0 1 3.113 2.087 9.88 9.88 0 0 1 2.087 3.113c.517 1.2.775 2.475.775 3.825s-.258 2.625-.775 3.825a9.88 9.88 0 0 1-2.087 3.113 9.88 9.88 0 0 1-3.113 2.087 9.569 9.569 0 0 1-3.825.775Zm3.575-13.35h3.75c-.55-1.217-1.338-2.2-2.363-2.95a8.033 8.033 0 0 0-3.437-1.45c.45.567.854 1.237 1.213 2.012.358.775.637 1.571.837 2.388Zm-5.85 0h4.55a16.83 16.83 0 0 0-.95-2.463A15.932 15.932 0 0 0 11.8 3.55a15.932 15.932 0 0 0-1.325 2.237 16.86 16.86 0 0 0-.95 2.463Zm-5.55 5.85H7.95c-.05-.383-.092-.767-.125-1.15a13.27 13.27 0 0 1 0-2.3c.033-.383.075-.767.125-1.15H3.975c-.117.317-.2.679-.25 1.087a9.981 9.981 0 0 0 0 2.425c.05.409.133.771.25 1.088Zm6.3 5.625c-.45-.5-.858-1.146-1.225-1.937a11.849 11.849 0 0 1-.825-2.438h-3.75a7.65 7.65 0 0 0 2.4 2.95c1.05.783 2.183 1.258 3.4 1.425ZM4.475 8.25h3.75c.2-.817.479-1.613.837-2.388a9.93 9.93 0 0 1 1.213-2.012 7.88 7.88 0 0 0-3.45 1.462c-1.017.759-1.8 1.738-2.35 2.938ZM11.8 19.925a14.451 14.451 0 0 0 1.375-2.2 12.92 12.92 0 0 0 .9-2.375h-4.55c.267.9.575 1.717.925 2.45.35.733.8 1.442 1.35 2.125ZM9.225 14.1h5.15a13.128 13.128 0 0 0 .2-2.3 13.16 13.16 0 0 0-.2-2.3h-5.15a13.15 13.15 0 0 0-.2 2.3 13.116 13.116 0 0 0 .2 2.3Zm4.1 5.625c1.217-.167 2.35-.642 3.4-1.425a7.65 7.65 0 0 0 2.4-2.95h-3.75c-.25.85-.558 1.67-.925 2.462-.367.792-.742 1.43-1.125 1.913ZM15.65 14.1h3.975c.117-.317.2-.68.25-1.088a9.957 9.957 0 0 0 0-2.425 4.856 4.856 0 0 0-.25-1.087H15.65c.05.383.092.767.125 1.15a13.282 13.282 0 0 1 0 2.3 26.87 26.87 0 0 1-.125 1.15Z'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
}
.header .search-keyword {
  min-width: var(--icon-size);
}
.header .search-icon {
  /*left: 0; 
  z-index: 0;*/
}
.header .search-submit {
  /*z-index: 3;
  opacity: 1;*/
  right: 8px;
}
.header .logo svg g[fill="#000"] path {
  fill: #FFFFFF !important;
}
.header.opened-search section.section-mobile {
  opacity: 0;
  flex-basis: 0;
  margin: 0;
  padding: 0;
  width: 0;
}
.header.opened-search .btn-search-close {
  /* display: flex; */
}
.header.opened-search section.section-2 {
  transition: all 0.2s ease-in-out !important;
}
.header.opened-search section.section-2 * {
  transition: all 0.2s ease-in-out 0.2s !important;
}
.header.opened-search section.section-2 .head-search-input {
  padding-inline: 12px calc(12px + var(--icon-size));
  border-radius: 0.25rem;
  width: 320px;
  background-color: #0C121A;
}
.header.opened-search section.section-2 .search-keyword {
  width: 100%;
}
.header.opened-search section.section-2 .search-icon {
  z-index: 0;
  opacity: 0;
}
.header.opened-search section.section-2 .search-submit {
  z-index: 3;
  visibility: inherit;
  opacity: 1;
}
.header.opened-search section.section-3 a {
  display: none;
}
.header .section-mobile,
.header .mobile-btn {
  display: none;
}
.header .all-menu-wrap {
  display: none;
}
.header .mo-logo {
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
  height: 48px;
  line-height: 0;
  vertical-align: middle;
}
.header .mo-logo a {
  display: inline-block;
}
.header .mo-logo svg {
  width: 100%;
  height: 100%;
}
.header .gtranslate_wrapper-mobile {
  position: relative;
  margin-block: 12px;
  min-height: 42px;
}
.header .gtranslate_wrapper-mobile #gt_float_wrapper {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100%;
}
.header .gtranslate_wrapper-mobile .gt_float_switcher {
  border: 0.5px solid #dcdcdc;
  border-radius: 4px;
  width: 100%;
  box-shadow: none;
  font-family: "Pretendard";
  font-size: 15px;
  transition: all 0.4s cubic-bezier(0.3, 1.1, 0.4, 1.1);
}
.header .gtranslate_wrapper-mobile .gt_float_switcher img {
  display: none;
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt-selected {
  width: 100%;
  text-align: left;
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt-selected .gt-current-lang {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 8px;
  padding-inline: 36px 12px;
  background-position: 12px 50%;
  background-repeat: no-repeat;
  background-size: 16px;
  background-image: url(/asquare/images/common/ico_language.svg);
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
  top: unset;
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
  transform: rotate(0deg);
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow.gt_arrow_rotate {
  transform: rotate(180deg);
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt_options {
  transition-duration: 0.4s;
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt_options.gt-open {
  border-top: 0.5px solid #dcdcdc;
}
.header .gtranslate_wrapper-mobile .gt_float_switcher .gt_options a:hover {
  background: #F4F4F4;
  color: #000;
}
.header .mo-gnb {
  border-top: 1px solid #DCDCDC;
  font-size: 0;
  line-height: 0;
}
.header .mo-gnb > li {
  border-bottom: 1px solid #DCDCDC;
}
.header .mo-gnb > li > a {
  position: relative;
  display: block;
  padding: 1.5rem 20px;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.header .all-menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.header .all-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 200;
  width: 100%;
  max-width: 600px;
  height: 100vh;
  background: #FFFFFF;
  transform: translateX(101%);
}
.header .all-menu-wrap.is-open .all-menu-mask {
  display: block;
}
.header .all-menu-wrap.is-open .all-menu-btn .icon {
  background-color: transparent;
}
.header .all-menu-wrap.is-open .all-menu {
  overflow-y: auto;
  transform: translateX(0);
  transition: all 0.5s;
}
.header .main-button {
  justify-content: center;
  display: flex;
  gap: 6px;
  white-space: nowrap;
}
.header .main-button > * {
  margin-inline: 28px;
  border-radius: 6px;
  height: 48px;
  background-color: #000;
  line-height: 48px;
}
.header .main-button > *:before, .header .main-button > *:after {
  background-color: inherit;
  transform: skewX(-12.8deg);
}
.header .main-button > *:before {
  left: -28px;
  border-radius: 6px 0 0 6px;
}
.header .main-button > *:after {
  right: -28px;
  border-radius: 0 6px 6px 0;
}
.header .main-button > *:nth-of-type(odd) {
  margin-left: 0;
  padding-left: 20px;
}
.header .main-button > *:nth-of-type(odd):before {
  display: none;
}
.header .main-button > *:nth-of-type(even) {
  margin-right: 0;
  padding-right: 20px;
}
.header .main-button > *:nth-of-type(even):after {
  display: none;
}
.header .main-button span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1em;
  color: #FFFFFF;
  font-weight: 600;
}
.header .main-button span:first-child {
  justify-content: flex-start;
  gap: 10px;
  flex-grow: 1;
}
.header .main-button span:last-child {
  background-color: #D6007F;
}