@charset "utf-8";

:root {
     --gs-brand-color: #a40e16;
     --gs-white-color: #fff;
     --gs-black-color: #000;
     --gs-blue-color: #0000ff;

     --gs-attractive-black: #222;
     --gs-dark-charcoal: #333;
     --gs-bold-grey: #666;
     --gs-arabic-grey: #888;
     --gs-space-gray: #707478;
     --gs-super-grey: #999;
     --gs-smooth-grey: #ccc;
     --gs-muted-silver: #cbcbcb;
     --gs-rainbow-grey: #c5c5c5;
     --gs-white-echo: #e9e9e9;
     --gs-pure-silicon: #dadee3;
     --gs-elegant-navy: #253268;
     --gs-stockholm: #0d326f;
     --gs-new-gray: #a5a5a5;
     --gs-soothing-blue-grey: #d3d7dc;
     --gs-athens-grey: #ecf0f3;
     --gs-charcoal-frost: #3c4144;
     --gs-light-pink-rose: #ffe2e3;
     --gs-christmas-white: #ececec;
     --gs-wild-sand: #f4f4f4;
     --gs-tech-sand: #f5f5f5;
     --gs-cherry-lemonade: #e85e65;

     --gs-max-width: 770px;
     --gs-min-width: 360px;
     --gs-layout-max-width: 1120px;

     --gs-duration: 0.3s;

     --gs-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23333333'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z'/%3E%3C/svg%3E");
     --gs-icon-plus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z'/%3E%3C/svg%3E");
     --gs-icon-right-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z'/%3E%3C/svg%3E");
     --gs-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

html,
body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-text-size-adjust: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
xmp,
a,
button,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
main,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input,
textarea,
select,
svg {
     margin: 0;
     padding: 0;
     font: inherit;
     color: inherit;
     vertical-align: baseline;
     box-sizing: border-box;
     touch-action: manipulation;
}

*::before,
*::after {
     box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     margin: 0;
     padding: 0;
     vertical-align: baseline;
     box-sizing: border-box;
     touch-action: manipulation;
}

main,
header,
nav,
section,
footer,
menu,
article,
aside,
details,
figcaption,
figure,
hgroup {
     display: block;
}

address,
cite,
code,
em {
     font-style: inherit;
     font-weight: inherit;
}

fieldset {
     border: 0;
}

ol,
ul {
     list-style: none;
}

strong,
.strong {
     font-weight: 500;
}
strong.strong {
     font-weight: 700;
}
.stronger {
     font-weight: 900;
}

blockquote,
q {
     quotes: none;
}

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

legend {
     position: absolute;
     margin: -1px;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
}

table {
     border-collapse: collapse;
     border-spacing: 0;
     table-layout: fixed;
}
caption {
     position: absolute;
     margin: -1px;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
}
th,
td {
     line-height: 1.5;
     vertical-align: middle;
     word-break: break-all;
     text-overflow: ellipsis;
     word-wrap: break-word;
}

img {
     border: 0;
     vertical-align: middle;
}

button {
     cursor: pointer;
     vertical-align: middle;
     line-height: normal;
     border: 0;
     background: transparent;
     text-transform: none;
     overflow: visible;
     -webkit-appearance: button;
}
button[disabled] {
     cursor: not-allowed;
     opacity: 0.5;
}

a {
     color: inherit;
     text-decoration: none;
     -webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
     outline: 0;
}

video {
     display: block;
     width: 100%;
}

label {
     vertical-align: middle;
}

input,
textarea {
     vertical-align: middle;
     line-height: normal;
     border-radius: 0;
     background-color: var(--gs-white-color);
     -webkit-touch-callout: default !important;
     -webkit-user-select: text !important;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="time"],
input[type="file"],
input[type="date"],
textarea {
     padding: 0 20px;
     width: 100%;
     height: 50px;
     border: 1px solid var(--gs-pure-silicon);
     border-radius: 5px;
     -webkit-appearance: none;
     appearance: none;
}
input[type="password"] {
     font-family: sans-serif !important;
}
input[type="checkbox"],
input[type="radio"] {
     width: auto;
     border: none;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
     cursor: pointer;
     -webkit-appearance: button;
}
input[type="file"]::file-selector-button {
     cursor: pointer;
}
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px var(--gs-white-color) inset;
}
input::-webkit-input-placeholder {
     font-size: 15px;
     color: var(--gs-super-grey) !important;
     letter-spacing: -1px;
}
input:-moz-placeholder {
     font-size: 15px;
     color: var(--gs-super-grey) !important;
     letter-spacing: -1px;
     opacity: 1 !important;
}
input::-moz-placeholder {
     font-size: 15px;
     color: var(--gs-super-grey) !important;
     letter-spacing: -1px;
     opacity: 1 !important;
}
input:-ms-input-placeholder {
     font-size: 15px;
     color: var(--gs-super-grey) !important;
     letter-spacing: -1px;
}

textarea {
     padding: 15px 20px;
     width: 100%;
     height: auto;
     line-height: 1.8;
     resize: none;
}
textarea::-webkit-input-placeholder {
     font-size: 15px;
     color: #999 !important;
     letter-spacing: -1px;
}
textarea:-moz-placeholder {
     font-size: 15px;
     color: #999 !important;
     opacity: 1 !important;
     letter-spacing: -1px;
}
textarea::-moz-placeholder {
     font-size: 15px;
     color: #999 !important;
     opacity: 1 !important;
     letter-spacing: -1px;
}
textarea:-ms-input-placeholder {
     font-size: 15px;
     color: #999 !important;
     letter-spacing: -1px;
}

input[type="text"][readonly],
input[type="password"][readonly],
input[type="email"][readonly],
input[type="tel"][readonly],
input[type="search"][readonly],
input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="tel"][disabled],
input[type="search"][disabled],
textarea[readonly],
textarea[disabled],
select[disabled] {
     color: #666;
     background: #eaeaea;
     border-color: #c0c0c0;
}
input[readonly],
textarea[readonly] {
     cursor: default;
}
input[disabled],
textarea[disabled],
select[disabled] {
     cursor: not-allowed;
}

select {
     padding: 0 35px 0 20px;
     width: 100%;
     height: 48px;
     border: 1px solid var(--gs-pure-silicon);
     border-radius: 5px;
     background: var(--gs-white-color)
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' fill='%23000000'%3E%3Cpath d='m24 30.8-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z'/%3E%3C/svg%3E")
          no-repeat 98% center / 24px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}
select:focus {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' fill='%23000000'%3E%3Cpath d='M14.15 30.15 12 28l12-12 12 12-2.15 2.15L24 20.3Z'/%3E%3C/svg%3E");
}
select::-ms-expand {
     display: none;
}
select[disabled] {
     color: #999;
}

::selection {
     color: var(--gs-white-color);
     background: rgba(164, 14, 22, 0.85);
}

a,
button,
label,
input,
select,
textarea {
     -webkit-tap-highlight-color: transparent;
}

:focus-visible {
     box-shadow:
          0 0 0 3px var(--gs-white-color),
          0 0 0 5px #222;
     border-radius: 2px;
     outline: 0;
     transition: none !important;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
     box-shadow: none;
     border: 1px solid var(--gs-brand-color);
     border-radius: 5px;
     box-shadow: inset 0 0 0 1px var(--gs-brand-color);
}

::-webkit-scrollbar {
     width: 12px;
     height: 12px;
}
::-webkit-scrollbar-thumb {
     border: 2px solid rgba(0, 0, 0, 0);
     border-radius: 10px;
     background-color: #a6a6a6;
     background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
     background-color: #808080;
}

body {
     font-family:
          "Noto Sans KR",
          -apple-system,
          BlinkMacSystemFont,
          "Apple SD Gothic Neo",
          Arial,
          sans-serif;
     font-weight: 400;
     font-size: 16px;
     color: var(--gs-attractive-black);
     background: var(--gs-white-color);
     word-break: keep-all;
     overflow-wrap: break-word;
}
body.hidden,
body.open-gnb {
     overflow: hidden !important;
}
body.hidden .scroll-btn {
     display: none;
}

.skipnavigation {
     display: flex;
     justify-content: center;
     position: fixed;
     top: -100px;
     left: 0;
     padding: 8px 5px;
     min-width: 200px;
     font-size: 16px;
     color: var(--gs-white-color);
     text-align: center;
     background: var(--gs-blue-color);
     z-index: 1000000;
}
.skipnavigation span {
     position: relative;
     padding-bottom: 3px;
}
.skipnavigation span::after {
     content: "";
     display: block;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: var(--gs-white-color);
}
.skipnavigation:focus-visible {
     top: 0;
     box-shadow: 0 0 0 3px #222;
}

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

#wrapper {
     margin: 0 auto;
     --height-header: 155px;
}

#container {
     padding: var(--height-header) 0 120px;
     min-height: 70vh;
}

header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     box-shadow: 0 0 17px 0 rgba(0, 0, 0, 0.2);
     background: var(--gs-white-color);
     z-index: 999;
}
header > div.links {
     font-size: 13px;
     font-weight: 300;
     color: var(--gs-white-color);
     background-color: var(--gs-brand-color);
}
header > div.links > div {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin: 0 auto;
     padding: 10px 60px;
     height: 50px;
     max-width: var(--gs-layout-max-width);
     width: 100%;
}
header > div.links .link-1 {
     display: flex;
     gap: 5px 15px;
}
header > div.links .link-1 a {
     position: relative;
     display: flex;
     padding: 0 5px;
}
header > div.links .link-1 a::after {
     content: "";
     position: absolute;
     top: 50%;
     right: -8px;
     width: 1px;
     height: 15px;
     background-color: var(--gs-white-color);
     opacity: 0.7;
     transform: translateY(calc(-50% + 2px));
}
header > div.links .link-1 span {
     position: relative;
     padding: 3px 0;
     white-space: nowrap;
}
header > div.links .link-2 {
     display: flex;
     align-items: center;
     gap: 5px 12px;
     margin-left: 30px;
}
header > div.links .link-2 a {
     display: block;
     width: 29px;
     height: 29px;
     border-radius: 5px;
     background-color: #b53d46;
     background-repeat: no-repeat;
     background-position: center;
     transition: background-color 0.2s;
}
header > div.links .link-2 .instagram {
     background-image: url(../img/icon-sns-instagram.png);
     background-size: 19px;
}
header > div.links .link-2 .youtube {
     background-image: url(../img/icon-sns-youtube.png);
     background-size: 21px;
}
header > div.links .link-2 .facebook {
     background-image: url(../img/icon-sns-facebook.png);
     background-size: 9px;
}
header > div.links .link-2 .naver-blog {
     background-image: url(../img/icon-sns-naver-blog.png);
     background-size: 17px;
}
.is-online header > div.links .link-2 a:hover {
     background-color: #d05861;
}
header > div.menus {
     display: flex;
     align-items: center;
     margin: 0 auto;
     padding: 0 20px;
     max-width: var(--gs-layout-max-width);
     height: 105px;
}
header h1 {
     min-width: 220px;
}
header h1 .home {
     display: block;
     padding: 5px;
     height: 59px;
     background: url(../../common/img/img-log.png) no-repeat center / 100%;
}

body:not(.open-gnb) h1 .home {
     opacity: 1 !important;
     transform: none !important;
}
body:not(.open-gnb) #gnb > ul > li {
     opacity: 1 !important;
     transform: none !important;
}
#gnb {
     margin-left: 15px;
     width: 100%;
}
#gnb > ul {
     display: flex;
     justify-content: flex-end;
     align-items: center;
}
#gnb li a {
     display: block;
     font-size: 14px;
     color: var(--gs-black-color);
     background: var(--gs-white-color);
}
#gnb li a:focus-visible {
     box-shadow: inset 0 0 0 2px #222;
}
#gnb .gnb-menu-toggle {
     display: flex;
     align-items: center;
     padding: 10px;
     font-size: 16px;
     font-weight: 700;
     overflow: hidden;
}
#gnb .gnb-submenu li a {
     padding: 10px;
     font-weight: 500;
     text-align: left;
}
#gnb .gnb-submenu li a span {
     position: relative;
     padding: 3px;
}
#gnb .gnb-submenu li a span::after,
header > div.links .link-1 span::before {
     content: "";
     position: absolute;
     bottom: 0;
     right: 0;
     width: 0%;
     height: 1px;
     background-color: var(--gs-white-color);
     transition: var(--gs-duration);
}
#gnb .gnb-submenu li.active a {
     cursor: default;
}
#gnb .gnb-submenu li.active a span {
     text-decoration: underline;
     text-underline-offset: 8px;
}
#gnb .gnb-submenu ul:has(a:hover) a span {
     text-decoration: none !important;
}
.is-online #gnb .gnb-submenu li:not(.active) a:hover span::after,
.is-online header > div.links .link-1 a:hover span::before {
     right: auto;
     left: 0;
     width: 100%;
}

.gnb-toggler {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 50px;
     height: 70px;
     z-index: 999;
}
.gnb-toggler:focus-visible {
     box-shadow: inset 0 0 0 2px #222;
     border-radius: 5px;
}
.gnb-toggler span {
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 23px;
     height: 3px;
     margin-top: -2px;
     margin-left: -12px;
     background: #414376;
     border-radius: 2px;
     user-select: none;
}
.gnb-toggler span::before,
.gnb-toggler span::after {
     content: "";
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
     background: #414376;
     border-radius: 2px;
     transition: transform var(--gs-duration);
}
.gnb-toggler span::before {
     top: 0;
     transform: translateY(-8px);
}
.gnb-toggler span::after {
     bottom: 0;
     transform: translateY(8px);
}
.is-online .gnb-toggler:hover span::before {
     transform: rotate(-45deg) scaleX(0.5) translate(8px, 9px);
}
.is-online .gnb-toggler:hover span::after {
     transform: rotate(45deg) scaleX(0.5) translate(8px, -9px);
}

footer {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 14px;
     color: var(--color);
     line-height: 1.5;
     border-top: 4px solid #9e1914;
     background-color: #22252d;
     --color: rgba(255, 255, 255, 0.4);
}
footer > div {
     margin: 0 auto;
     padding: 20px 20px 60px;
     max-width: 1280px;
}
footer .terms-list {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 0 30px;
     margin-bottom: 40px;
}
footer .terms-list a {
     position: relative;
     padding: 5px;
}
footer .terms-list a strong {
     color: rgba(255, 255, 255, 0.8);
}
footer .terms-list li ~ li a::before {
     content: "";
     position: absolute;
     top: 8px;
     left: -15px;
     width: 1px;
     height: 16px;
     background-color: var(--color);
}
footer .underline-item .line {
     background-image: linear-gradient(var(--color), var(--color));
}
footer .info {
     text-align: center;
}
footer .info::before {
     content: "";
     display: block;
     margin: 0 auto 12px;
     width: 166px;
     height: 44px;
     background: url(../img/img-log-white.png) no-repeat center / 100%;
     opacity: 0.55;
}
footer .info > div {
     margin: 5px 0;
}
footer .info .items {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 2px 5px;
}
footer .info .items > * {
     position: relative;
     padding: 0 8px;
}
footer .info .items > * ~ *::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 0;
     width: 1px;
     height: 15px;
     transform: translate(-3px, -50%);
     background-color: var(--color);
}
footer .copyright > * {
     display: inline-block;
}

.scroll-btn {
     display: block;
     position: fixed;
     right: 15px;
     width: 40px;
     height: 40px;
     background: var(--gs-brand-color);
     border-radius: 20px;
     outline: none;
     z-index: 10;
     transition: height 0.2s;
}
.scroll-top-btn {
     bottom: 70px;
     visibility: hidden;
     opacity: 0;
}
.scroll-bottom-btn {
     bottom: 20px;
     transform: rotate(-180deg);
}
.scroll-btn span,
.scroll-btn::before,
.scroll-btn::after {
     content: "";
     display: block;
     position: absolute;
     top: 14px;
     left: 50%;
     width: 15px;
     height: 2px;
     background-color: var(--gs-white-color);
     transform-origin: left 50%;
}
.scroll-btn span {
     bottom: auto;
     margin-left: -1px;
     width: 2px;
     height: 0;
     transition: all 0.2s linear;
}
.scroll-btn::before,
.scroll-btn::after {
     transition: top 0.4s;
}
.scroll-btn::before {
     transform: rotate(135deg);
}
.scroll-btn::after {
     transform: rotate(45deg);
}
.is-online .scroll-btn:hover,
.is-online .scroll-btn:focus {
     height: 45px;
}
.is-online .scroll-btn:hover::before,
.is-online .scroll-btn:hover::after,
.is-online .scroll-btn:focus::before,
.is-online .scroll-btn:focus::after {
     top: 8px;
}
.is-online .scroll-btn:hover span,
.is-online .scroll-btn:focus span {
     top: auto;
     bottom: 8px;
     height: 26px;
}

.page-banner {
     position: relative;
     height: 280px;
     background: linear-gradient(var(--gs-wild-sand), var(--gs-wild-sand))
          no-repeat top left / 100% 180px;
}
.page-banner > div {
     display: flex;
     position: relative;
     margin: 0 auto;
     padding: 20px 0;
     max-width: 520px;
     height: 100%;
}
.page-banner > div::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     z-index: 3;
     background-repeat: no-repeat;
}
.page-banner.about > div::after {
     background-position: right 43px;
     background-image: url(../img/page-banner-about.png);
     background-size: 344px;
}
.page-banner.business > div {
     max-width: 580px;
}
.page-banner.business > div::after {
     background-position: right 22px;
     background-image: url(../img/page-banner-business.png);
     background-size: 350px;
}
.page-banner.research > div {
     max-width: 560px;
}
.page-banner.research > div::after {
     background-position: right 20px;
     background-image: url(../img/page-banner-research.png);
     background-size: 359px;
}
.page-banner.outreach > div {
     max-width: 560px;
}
.page-banner.outreach > div::after {
     background-position: right 20px;
     background-image: url(../img/page-banner-outreach.png);
     background-size: 333px;
}
.page-banner.publication > div {
     max-width: 585px;
}
.page-banner.publication > div::after {
     background-position: right 30px;
     background-image: url(../img/page-banner-publication.png);
     background-size: 347px;
}
.page-banner.community > div {
     max-width: 510px;
}
.page-banner.community > div::after {
     background-position: right 10px;
     background-image: url(../img/page-banner-community.png);
     background-size: 299px;
}

.page-banner .banner-title {
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 3px;
     padding: 20px;
     width: 231px;
     height: 115px;
     font-size: 16px;
     color: var(--gs-new-gray);
     background: url(../img/page-banner-title-bg.png) no-repeat center / 100%;
     z-index: 1;
}
.page-banner .banner-title h2 {
     font-size: 28px;
     color: var(--gs-stockholm);
     letter-spacing: -1px;
     line-height: 1.2;
}

.page-con {
     margin: 0 auto;
     padding: 30px 20px;
     max-width: var(--gs-layout-max-width);
     min-width: var(--gs-min-width);
     --gs-layout-max-width: 980px;
}

.pg-title {
     display: flex;
     justify-content: center;
     position: relative;
     margin-bottom: 70px;
}
.pg-title::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 1px;
     box-shadow: var(--gs-charcoal-frost) 0px 2px inset;
     transform: translateY(-50%);
     z-index: 1;
}
.pg-title h2 {
     position: relative;
     padding: 0 20px;
     font-size: 30px;
     text-align: center;
     line-height: 1.5;
     background-color: var(--gs-white-color);
     z-index: 3;
}
.pg-title strong {
     padding: 0 8px;
     font-weight: 700;
     background: linear-gradient(
               var(--gs-light-pink-rose),
               var(--gs-light-pink-rose)
          )
          no-repeat bottom left / 100% 16px;
}

.pg-view {
     border-top: 1px solid var(--gs-soothing-blue-grey);
     border-bottom: 1px solid var(--gs-soothing-blue-grey);
}
.pg-view .title {
     padding: 30px;
}
.pg-view .infos {
     display: flex;
     flex-wrap: wrap;
     gap: 5px 10px;
     margin-top: 10px;
}
.pg-view .infos > div {
     position: relative;
     margin-right: 6px;
     font-size: 14px;
     color: var(--gs-arabic-grey);
}
.pg-view .infos > div ~ div {
     padding-left: 14px;
}
.pg-view .infos > div ~ div::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 0;
     width: 1px;
     height: 18px;
     background-color: var(--gs-rainbow-grey);
     transform: translateY(calc(-50% + 1px));
}
.pg-view .con {
     padding: 30px 30px 120px;
     line-height: 1.8;
     border-top: 1px solid #e8ebf0;
}

.page-bottom-btns > div {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     padding-top: 20px;
     border-top: 1px solid var(--gs-soothing-blue-grey);
}
.page-bottom-btns .right {
     margin-left: auto;
}
.page-bottom-btns .cc-btn {
     margin: 0 auto;
     min-width: 100px;
     height: 45px;
     font-size: 16px;
}
.page-bottom-btns .cc-btn.white {
     border-color: #b8bdc2;
}
.pg-view + .page-bottom-btns > div {
     border-top: none;
}

.list-tab-wrap {
     position: relative;
}
.list-tab-wrap .tab-nav {
     display: flex;
     padding: 0 25px;
     border-bottom: 1px solid var(--gs-muted-silver);
}
.list-tab-wrap .tab {
     padding: 0 10px;
     height: 50px;
     font-weight: 500;
     color: var(--gs-attractive-black);
}
.list-tab-wrap .tab span {
     display: flex;
     align-items: center;
     position: relative;
     padding: 5px;
}
.list-tab-wrap .tab span::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 0px;
     background-color: var(--gs-brand-color);
     transform: translateY(10px);
}
.list-tab-wrap .tab.active {
     font-weight: 700;
     color: var(--gs-brand-color);
}
.list-tab-wrap .tab.active span::after,
.is-online .list-tab-wrap .tab:hover span::after {
     height: 5px;
     transition: 0.2s ease-out;
}
.list-tab-wrap:has(.tab:not(.active):hover) .tab.active span::after {
     height: 0px;
}
.list-tab-wrap .tab:focus-visible {
     box-shadow: none;
}
.list-tab-wrap .tab:focus-visible span {
     box-shadow:
          0 0 0 3px var(--gs-white-color),
          0 0 0 5px #222;
     border-radius: 3px;
}
.list-tab-wrap .tab-con {
     padding: 12px 15px;
     min-height: 190px;
}
.list-tab-wrap .tab-con > div:not(:first-child) {
     display: none;
}
.list-tab-wrap .tab-con table {
     width: 100%;
}
.list-tab-wrap .tab-con th,
.list-tab-wrap .tab-con td {
     padding: 3px 5px;
     font-size: 14px;
     color: var(--gs-bold-grey);
     text-align: left;
}
.list-tab-wrap .tab-con .center {
     text-align: center;
}
.list-tab-wrap .tab-con a {
     padding: 3px 10px 3px 3px;
}
.list-tab-wrap .tab-con a span {
     padding-bottom: 3px;
     line-height: 1.3;
     background-repeat: no-repeat;
     background-position: bottom left;
     background-size: 0% 1px;
     background-image: linear-gradient(
          var(--gs-bold-grey),
          var(--gs-bold-grey)
     );
}
.is-online .list-tab-wrap .tab-con a:hover span {
     background-size: 100% 1px;
     transition: 0.5s ease-in-out;
}
.list-tab-wrap tbody .no-con {
     height: 160px;
     font-size: 14px;
}
.list-tab-wrap:has(.more-btn) .tab-nav {
     padding-right: 60px;
}
.list-tab-wrap .more-btn {
     top: 12px;
     right: 20px;
}

.regulation-list .title {
     font-size: 22px;
}
.regulation-list > div {
     margin-top: 40px;
     line-height: 1.8;
}
.regulation-list > div h4 {
     margin-bottom: 6px;
     font-size: 17px;
     font-weight: 500;
}
.regulation-list .revision {
     margin-top: 60px;
     text-align: right;
}
.regulation-list .revision li {
     margin: 10px 0;
}

.underline-item .line {
     padding-bottom: 3px;
     background: linear-gradient(
               var(--gs-dark-charcoal),
               var(--gs-dark-charcoal)
          )
          no-repeat bottom left / 0% 1px;
}
.underline-item.effect .line {
     transition: background 0.4s ease-in-out;
}
.underline-item:not(.effect) .line {
     background-size: 100% 1px;
}
.underline-item.link {
     word-break: break-all;
}
.underline-item.link .line {
     color: var(--gs-blue-color);
     background-image: linear-gradient(
          var(--gs-blue-color),
          var(--gs-blue-color)
     );
}
.is-online .underline-item.effect:hover .line {
     background-size: 100% 1px;
}
.is-online .underline-item.hover:hover span {
     color: var(--gs-brand-color);
     background-image: linear-gradient(
          var(--gs-brand-color),
          var(--gs-brand-color)
     );
     transition: var(--gs-duration);
}
.underline-item.arrow span {
     position: relative;
}
.underline-item.arrow span::after {
     content: "";
     position: absolute;
     top: 1px;
     right: 0;
     width: 24px;
     height: 24px;
     background: var(--gs-icon-right-arrow) no-repeat right center / 24px;
     opacity: 0;
     transition: var(--gs-duration);
     transform: translateX(10px);
}
.is-online .underline-item.arrow:hover span::after {
     opacity: 1;
     transform: translateX(20px);
}

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

.no-con {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     flex: 1;
     height: 30vh;
     font-size: 16px;
}

.enter-item {
     margin: 10px 0;
}
.enter-item label {
     cursor: pointer;
}
.enter-item .cc-btn {
     margin: 0;
     font-size: 16px;
}
.enter-item.group {
     display: flex;
     gap: 10px;
}
.enter-item.group > div {
     flex: 1;
}
.enter-item.group:has(> .btn) > .btn {
     flex: 0 0 140px;
}
.enter-item.flex {
     display: flex;
     gap: 15px;
}
.enter-item.flex label {
     flex: 0 0 120px;
     display: flex;
     align-items: center;
     min-height: 50px;
}
.enter-item:has(div.ipt) label {
     cursor: default;
}
.enter-item div.ipt {
     display: flex;
     align-items: center;
     padding: 5px 20px;
     width: 100%;
     min-height: 50px;
     border: 1px solid var(--gs-pure-silicon);
     border-radius: 5px;
     word-break: break-all;
}

.round-tab-wrap .tab-nav {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     margin: 50px 0;
}
.round-tab-wrap .tab-nav .tab {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 10px 20px;
     min-width: 140px;
     height: 46px;
     border-radius: 23px;
     font-size: 18px;
     background-color: var(--gs-christmas-white);
}
.round-tab-wrap .tab-nav .tab.active {
     font-weight: 700;
     color: var(--gs-white-color);
     background-color: var(--gs-brand-color);
}
.round-tab-wrap .tab-con > div:not(:first-child) {
     display: none;
}
.is-online .round-tab-wrap .tab-nav .tab:not(.active):hover {
     background-color: var(--gs-white-color);
     box-shadow: inset 0 0 0 3px var(--gs-brand-color);
     transition:
          background-color var(--gs-duration),
          box-shadow var(--gs-duration);
}

.search-field-con {
     margin-bottom: 20px;
     --size: 44px;
}
.search-field-con > div {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
}
.search-field-con select {
     min-width: 160px;
     height: var(--size);
}
.search-field-con .enter {
     display: flex;
     align-items: center;
     gap: 5px;
     position: relative;
     flex: 0 0 280px;
     height: var(--size);
     border: 1px solid var(--gs-pure-silicon);
     border-radius: 5px;
}
.search-field-con .enter input {
     height: calc(var(--size) - 2px);
}
.search-field-con .enter input:not(:focus-visible) {
     border-color: var(--gs-white-color);
}
.search-field-con .submit-btn {
     flex: 0 0 calc(var(--size) - 6px);
     height: calc(var(--size) - 6px);
     border-radius: 3px;
     background: var(--gs-icon-search) no-repeat center;
     transform: translate(-2px, 2px);
}
.is-online .search-field-con .submit-btn:hover {
     background-color: var(--gs-wild-sand);
}

.cc-txt {
     margin: 20px 0;
}

.cc-txt-list .title {
     font-size: 20px;
     font-weight: 700;
}
.cc-txt-list li {
     margin: 10px 0;
}
.cc-txt-list li li {
     padding-left: 15px;
}
.cc-txt-list ~ .cc-txt-list {
     margin-top: 70px;
}

.cc-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 50px auto;
     padding: 10px;
     width: 100%;
     height: 50px;
     font-size: 18px;
     color: var(--gs-white-color);
     text-align: center;
     line-height: 1.3;
     border-radius: 5px;
     background-color: var(--gs-brand-color);
}
.cc-btn.white {
     color: var(--gs-attractive-black);
     border: 1px solid var(--gs-attractive-black);
     background-color: var(--gs-white-color);
}
.cc-btn.space-gray {
     background-color: var(--gs-space-gray);
}
.cc-btn.elegant-navy {
     background-color: var(--gs-elegant-navy);
}
.cc-btn.reset {
     background-color: var(--gs-bold-grey);
}
.is-online .cc-btn {
     transition: box-shadow var(--gs-duration) ease-in-out;
}
.is-online .cc-btn:hover {
     box-shadow:
          inset 0px 0px 0px 2px var(--gs-white-color),
          0px 0px 0px 3px var(--gs-brand-color);
}
.is-online .cc-btn.white:hover {
     box-shadow:
          inset 0px 0px 0px 2px var(--gs-white-color),
          0px 0px 0px 2px var(--gs-attractive-black);
}
.is-online .cc-btn.space-gray:hover {
     box-shadow:
          inset 0px 0px 0px 2px var(--gs-white-color),
          0px 0px 0px 3px var(--gs-space-gray);
}
.is-online .cc-btn.elegant-navy:hover {
     box-shadow:
          inset 0px 0px 0px 2px var(--gs-white-color),
          0px 0px 0px 3px var(--gs-elegant-navy);
}
.is-online .cc-btn.reset:hover {
     box-shadow:
          inset 0px 0px 0px 2px var(--gs-white-color),
          0px 0px 0px 3px var(--gs-bold-grey);
}

.cc-btn-group {
     margin-top: 50px;
}
.cc-btn-group > div {
     display: flex;
     gap: 10px;
}
.cc-btn-group .cc-btn {
     margin: 0;
     width: 100%;
}
.cc-btn-group .group {
     display: flex;
     gap: 10px;
}
.cc-btn-group .group .cc-btn {
     flex: 0 0 130px;
}

.cc-btn-group.between > div {
     justify-content: space-between;
}
.cc-btn-group.col > div {
     gap: 20px 0;
     flex-direction: column;
}
.cc-btn-group.line {
     padding-top: 40px;
     border-top: 1px solid var(--gs-pure-silicon);
}

.cc-flex {
     display: flex;
     gap: 10px;
}
.cc-flex.wrap {
     flex-wrap: wrap;
}
.cc-flex.between {
     justify-content: space-between;
}
.cc-flex.col-gap-20 {
     column-gap: 20px;
}
.cc-flex.row-gap-5 {
     row-gap: 5px;
}

.cc-check-item {
     position: relative;
     display: inline-flex;
     padding-right: 10px;
     --size: 24px;
}
.cc-check-item input {
     position: absolute;
     opacity: 0;
     z-index: -1;
}
.cc-check-item span {
     cursor: pointer;
     position: relative;
     display: flex;
     align-items: center;
}
.cc-check-item span::before {
     content: "";
     cursor: pointer;
     align-self: flex-start;
     position: relative;
     margin-right: 10px;
     flex: 0 0 var(--size);
     width: var(--size);
     height: var(--size);
     vertical-align: middle;
     border: 1px solid var(--gs-smooth-grey);
     background-color: var(--gs-white-color);
     border-radius: 5px;
     transition: var(--gs-duration);
}
.cc-check-item input[type="checkbox"] + span::after {
     content: "";
     display: block;
     position: absolute;
     top: 12px;
     left: 5px;
     width: 8px;
     height: 13px;
     border-right: 2px solid #555;
     border-top: 2px solid #555;
     transform: scaleX(-1) rotate(135deg);
     transform-origin: left top;
}
.cc-check-item input[type="checkbox"]:focus + span::before {
     box-shadow:
          0 0 0 1px var(--gs-white-color),
          0 0 0 3px var(--gs-brand-color);
}
.cc-check-item:hover input[type="checkbox"] + span::before {
     border-color: var(--gs-brand-color);
     box-shadow: inset 0 0 0 1px var(--gs-brand-color);
}
.cc-check-item:hover input[type="checkbox"] + span::after {
     border-color: var(--gs-brand-color);
}
.cc-check-item input[type="checkbox"]:checked + span::before {
     border-color: var(--gs-brand-color) !important;
     background-color: var(--gs-brand-color);
}
.cc-check-item input[type="checkbox"]:checked + span::after {
     border-color: var(--gs-white-color) !important;
     animation: animCheckbox 0.7s;
}
.cc-check-item input:focus-visible + span::before {
     box-shadow:
          0 0 0 2px var(--gs-white-color),
          0 0 0 4px var(--gs-attractive-black) !important;
     transition: none;
}
@keyframes animCheckbox {
     0% {
          width: 0;
          height: 0;
     }
     25% {
          width: 8px;
          height: 0;
     }
     50% {
          width: 8px;
          height: 14px;
     }
}

.cc-table {
     min-height: 300px;
}
.cc-table table {
     width: 100%;
     border-top: 1px solid var(--gs-soothing-blue-grey);
}
.cc-table thead tr {
     border-bottom: 1px solid var(--gs-soothing-blue-grey);
}
.cc-table tbody tr {
     border-bottom: 1px solid var(--gs-athens-grey);
}
.cc-table th,
.cc-table td {
     padding: 5px;
     height: 60px;
     font-size: 14px;
     text-align: center;
     word-break: keep-all;
}
.cc-table thead th {
     height: 50px;
     font-weight: 700;
}
.cc-table th.left,
.cc-table td.left {
     padding-left: 15px;
     text-align: left;
}
.cc-table .underline-item span {
     padding-bottom: 1px;
}
.cc-table .underline-item.ellipsis {
     padding: 2px 0;
}
.cc-table tr[onclick] {
     cursor: pointer;
}
.cc-table tr.fixed td:first-child {
     background: url(../img/icon-pin.png) no-repeat center / 16px;
}
.is-online .cc-table tr[onclick]:hover {
     background-color: var(--gs-tech-sand);
}
.is-online .cc-table tr[onclick]:hover .underline-item.effect .line {
     background-size: 100% 1px;
}

.cc-pagination {
     margin: 50px auto 0;
     --size: 38px;
}
.cc-pagination ol {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     white-space: nowrap;
     gap: 5px;
}
.cc-pagination li a {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     padding: 0 10px;
     font-size: 18px;
     min-width: var(--size);
     height: var(--size);
     border-radius: var(--size);
}
.cc-pagination .pg-num.on a {
     cursor: default;
     font-weight: 700;
     color: var(--gs-white-color);
     background-color: var(--gs-cherry-lemonade);
}
.cc-pagination li:not(.pg-num) a {
     border: 1px solid #d9dee3;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 26px;
}
.cc-pagination .pg-first a {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 0 24 24' width='48px' fill='%23666666'%3E%3Cpath d='M24 0v24H0V0h24z' fill='none' opacity='.87'/%3E%3Cpath d='M17.7 15.89L13.82 12l3.89-3.89c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0l-4.59 4.59c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.38.38-1.02-.01-1.4zM7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1z'/%3E%3C/svg%3E");
}
.cc-pagination .pg-prev {
     margin-right: 15px;
}
.cc-pagination .pg-prev a {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23666666'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z'/%3E%3C/svg%3E");
}
.cc-pagination .pg-next {
     margin-left: 15px;
}
.cc-pagination .pg-next a {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23666666'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z'/%3E%3C/svg%3E");
}
.cc-pagination .pg-last a {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 0 24 24' width='48px' fill='%23666666'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none' opacity='.87'/%3E%3Cpath d='M6.29 8.11L10.18 12l-3.89 3.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L7.7 6.7c-.39-.39-1.02-.39-1.41 0-.38.39-.38 1.03 0 1.41zM17 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1z'/%3E%3C/svg%3E");
}
.is-online .cc-pagination li:not(.on) a:hover {
     background-color: var(--gs-christmas-white);
}

.cc-list-con {
     border-top: 1px solid var(--gs-soothing-blue-grey);
}
.cc-list-con li {
     padding: 5px;
     border-bottom: 1px solid var(--gs-soothing-blue-grey);
}
.cc-list-con figure {
     display: flex;
     gap: 35px;
     padding: 15px;
}
.cc-list-con .thumb {
     flex: 0 0 125px;
     height: 186px;
     border-radius: 3px;
     border: 1px solid var(--gs-white-echo);
     background: #ffedee url(../img/thumb-bg.png) no-repeat center / 125px;
     overflow: hidden;
}
.cc-list-con .thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
.cc-list-con figcaption {
     display: flex;
     flex-direction: column;
     gap: 12px;
     overflow: hidden;
}
.cc-list-con .fg-1 span {
     display: inline-flex;
     align-items: center;
     padding: 0 20px;
     min-height: 28px;
     font-size: 15px;
     font-weight: 500;
     color: var(--gs-white-color);
     border-radius: 25px;
     background-color: var(--gs-cherry-lemonade);
}
.cc-list-con .fg-2 {
     margin-bottom: 10px;
     height: var(--height);
     font-size: 18px;
     line-height: 1.5;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     word-wrap: break-word;
     --height: 54px;
}
.cc-list-con small {
     font-size: 14px;
     color: var(--gs-arabic-grey);
}
.cc-list-con a {
     display: block;
     padding-right: 35px;
     border-radius: 5px;
     background: var(--gs-icon-right-arrow) no-repeat right center / 30px;
}
.is-online .cc-list-con a:hover {
     transition: var(--gs-duration);
     background-color: var(--gs-tech-sand);
}

.cc-gallery-con {
     min-height: 400px;
     border-top: 1px solid var(--gs-soothing-blue-grey);
}
.cc-gallery-con ul {
     display: flex;
     flex-wrap: wrap;
     border-bottom: 1px solid var(--gs-soothing-blue-grey);
}
.cc-gallery-con li {
     padding: 25px 5px 15px;
}
.cc-gallery-con a {
     display: block;
     padding: 5px 5px;
     border-radius: 5px;
     transition: background var(--gs-duration);
}
.cc-gallery-con .thumb {
     margin-bottom: 10px;
     border-radius: 5px;
     background-color: #ffedee;
     overflow: hidden;
}
.cc-gallery-con img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--gs-duration);
}
.cc-gallery-con figcaption {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
     padding: 0 10px;
}
.cc-gallery-con figcaption h1 {
     font-size: 16px;
     line-height: 1.3;
     text-align: center;
}
.cc-gallery-con figcaption small {
     font-size: 14px;
     color: var(--gs-super-grey);
}
.is-online .cc-gallery-con a:hover {
     background-color: var(--gs-wild-sand);
}
.is-online .cc-gallery-con a:hover img {
     transform: scale(1.05);
}
.cc-gallery-con.photo li {
     flex: 0 0 25%;
}
.cc-gallery-con.photo .thumb {
     height: 130px;
}
.cc-gallery-con.webtoon li {
     flex: 0 0 50%;
}
.cc-gallery-con.webtoon .thumb {
     height: 180px;
}
.cc-gallery-con.webtoon .thumb img {
     object-position: top;
}

.more-btn {
     position: absolute;
     top: 0;
     right: 0;
     width: 28px;
     height: 28px;
     border: 1px solid var(--gs-white-echo);
     border-radius: 3px;
     background: var(--gs-icon-plus) no-repeat center / 22px;
     transition: var(--gs-duration);
}
.is-online .more-btn:hover {
     border-color: var(--gs-brand-color);
     background-color: var(--gs-brand-color);
     background-image: var(--gs-icon-plus-white);
}

.cc-page-tab-nav {
     margin-bottom: 40px;
     border-bottom: 1px solid var(--gs-smooth-grey);
}
.cc-page-tab-nav > div {
     display: flex;
     margin-bottom: var(--gap);
     --gap: 10px;
}
.cc-page-tab-nav .tab {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 70px;
     font-size: 28px;
     font-weight: 700;
     color: var(--gs-smooth-grey);
     letter-spacing: -2px;
     transition: var(--gs-duration);
}
.cc-page-tab-nav .tab span {
     position: relative;
     display: flex;
     align-items: center;
     padding: 0 20px;
     height: 100%;
}
.cc-page-tab-nav .tab span::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background-color: var(--gs-brand-color);
     transform: translateY(var(--gap));
     opacity: 0;
}
.cc-page-tab-nav .tab.active {
     color: var(--gs-attractive-black);
}
.cc-page-tab-nav .tab.active span::after {
     opacity: 1;
}
.is-online .cc-page-tab-nav .tab:not(.active):hover {
     color: var(--gs-brand-color);
}

.cc-bullet {
     display: flex;
     gap: 5px;
}
.cc-bullet::before {
     content: "·";
     white-space: nowrap;
}
.cc-bullet.hyphen::before {
     content: "-";
}

.cc-attach-file {
     margin: 20px 0;
}
.cc-attach-file li {
     margin: 10px 0;
}
.pg-view .cc-attach-file {
     margin-left: 30px;
     margin-right: 30px;
}

.editor-content * {
     font-family: inherit !important;
}
.editor-content h1,
.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5,
.editor-content h6 {
     font-weight: bold;
     font-weight: 700;
     line-height: 1.5em;
}
.editor-content table,
.editor-content img {
     max-width: 100% !important;
}
.editor-content table {
     table-layout: auto;
}
.editor-content img {
     height: auto;
}
.editor-content a[href] {
     text-decoration: underline;
}
.editor-content i {
     font-style: italic;
}
.editor-content.center {
     text-align: center;
}

.mt-20 {
     margin-top: 20px !important;
}

.fc-brand {
     color: var(--gs-brand-color);
}

.modal-wrap {
     position: fixed;
     top: 0;
     left: 0;
     padding: 20px;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     opacity: 0;
     visibility: hidden;
     z-index: -1;
     display: flex;
     align-items: center;
     justify-content: center;
}
.modal-dialog {
     display: flex;
     flex-direction: column;
     position: relative;
     padding: 30px 30px 40px;
     max-width: 800px;
     min-width: 300px;
     width: 100%;
     min-height: 200px;
     box-shadow: 6px 8px 40px 0 rgba(0, 0, 0, 0.2);
     border-radius: 6px;
     background: var(--gs-white-color);
     transform: translateY(80px);
}
.modal-header {
     padding: 0 10px;
     width: 100%;
     max-height: 70px;
     font-size: 20px;
     font-weight: 500;
     border-bottom: 1px solid var(--gs-smooth-grey);
     overflow: hidden;
     z-index: 30;
}
.modal-header:has(.close-modal) {
     padding-right: 40px;
}
.modal-title {
     font-size: 22px;
     padding-bottom: 20px;
}
.close-modal {
     position: absolute;
     top: 28px;
     right: 25px;
     width: 40px;
     height: 40px;
     z-index: 35;
}
.close-modal::before,
.close-modal::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -1px;
     margin-left: -10px;
     width: 20px;
     height: 1px;
     background: var(--gs-black-color);
     border-radius: 2px;
     opacity: 0;
     transition: opacity 0s;
}
.close-modal::before {
     transform: rotate(45deg) translateX(100%);
}
.close-modal::after {
     transform: rotate(-45deg) translateX(100%);
}
.modal-header ~ .modal-body {
     margin: 10px 0;
}
.modal-body > div {
     padding: 20px 0;
     max-height: 60vh;
     overflow: auto;
     z-index: 20;
}
.modal-body > div > div {
     position: relative;
}
.modal-body img {
     margin: 20px auto;
     width: 100%;
     border-radius: 6px;
}
.modal-body > div > div > img:first-child {
     margin-top: 0;
}
.modal-footer {
     margin-top: 20px;
}
.modal-footer-btns {
     display: flex;
     justify-content: center;
     align-items: center;
}
.modal-footer-btns > div {
     flex: 1;
     margin: 5px;
}
.modal-footer-btns > div .cc-btn {
     margin: 0;
     width: 100%;
}
.modal-wrap.modal-show {
     opacity: 1;
     visibility: visible;
     z-index: 999;
}
.modal-wrap.modal-show .modal-dialog {
     visibility: visible !important;
     transform: translateY(0px);
     transition: transform 0.4s cubic-bezier(0.2, 1.46, 0.92, 1.12);
}
.modal-wrap.modal-show .close-modal::before,
.modal-wrap.modal-show .close-modal::after {
     opacity: 1;
}
.modal-wrap.modal-show .close-modal::before {
     transition: all 0.3s 0.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
     transform: rotate(45deg) translateX(0);
}
.modal-wrap.modal-show .close-modal::after {
     transition: all 0.3s 0.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
     transform: rotate(-45deg) translateX(0);
}
.modal-wrap.confirm .modal-dialog {
     padding: 20px 15px;
     max-width: 360px;
     min-height: 0;
}
.modal-wrap.confirm .modal-header {
     padding-right: 0;
     text-align: center;
}
.modal-wrap.confirm .modal-body {
     text-align: center;
}
.modal-wrap.confirm .modal-footer {
     margin-top: 10px;
}
.modal-wrap.confirm .modal-body > div {
     padding-top: 40px;
     padding-bottom: 40px;
}
.modal-wrap.w-540 .modal-dialog {
     max-width: 540px;
}
.withdrawal-modal .modal-body > div,
.change-password-modal .modal-body > div {
     padding: 0;
}
.withdrawal-modal textarea {
     height: 120px;
}

@media all and (min-width: 901px) {
     header > div.links {
          display: block !important;
          opacity: 1 !important;
     }
     #gnb {
          display: block !important;
          height: 100%;
          opacity: 1 !important;
          visibility: visible !important;
          transform: none !important;
          z-index: 999;
     }
     #gnb > ul {
          height: 100%;
     }
     #gnb > ul > li {
          min-width: 130px;
          height: 100%;
     }
     #gnb .gnb-menu-toggle {
          justify-content: center;
          height: 100%;
          font-size: 20px;
          opacity: 1 !important;
          transform: none !important;
     }
     #gnb .gnb-menu-toggle span {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px 0;
          height: 50px;
     }
     #gnb li.active .gnb-menu-toggle span::after,
     #gnb li .gnb-menu-toggle span::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 6px;
          background-color: var(--gs-brand-color);
     }
     #gnb li:not(.active) .gnb-menu-toggle span::after {
          opacity: 0;
          transform: translateY(5px);
     }
     #gnb li:not(.active) .gnb-menu-toggle:hover span::after {
          opacity: 1;
          transform: translateY(0px);
          transition: 0.2s ease-out;
     }
     #gnb li.active .gnb-menu-toggle span::after {
          opacity: 1 !important;
     }
     #gnb ul:has(li:hover) li.active .gnb-menu-toggle span::after {
          opacity: 0 !important;
          transition: 0.2s ease-out;
     }
     #gnb .gnb-menu-toggle:focus-visible {
          box-shadow: none;
     }
     #gnb .gnb-menu-toggle:focus-visible span {
          box-shadow: inset 0 0 0 2px #222;
          border-radius: 5px;
     }
     #gnb .gnb-submenu {
          position: absolute;
          left: 0;
          width: 100%;
          background-color: #253369;
          overflow: hidden;
          opacity: 0;
          transform: translateY(0px) scaleY(0);
          transform-origin: top;
     }
     #gnb .gnb-submenu > div {
          margin: 0 auto;
          max-width: var(--gs-layout-max-width);
     }
     #gnb .gnb-submenu ul {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-right: 10%;
     }
     #gnb > ul > li:nth-of-type(1) .gnb-submenu ul {
          padding-right: 25%;
     }
     #gnb > ul > li:nth-of-type(2) .gnb-submenu ul {
          padding-right: 35%;
     }
     #gnb > ul > li:nth-of-type(3) .gnb-submenu ul {
          padding-right: 30%;
     }
     #gnb > ul > li:nth-of-type(5) .gnb-submenu ul {
          padding-right: 13%;
     }
     #gnb > ul > li:nth-of-type(6) .gnb-submenu ul {
          padding-right: 0%;
     }
     #gnb .gnb-submenu ul li {
          padding: 5px 0;
     }

     #gnb li.is-focused .gnb-submenu,
     #gnb li:hover .gnb-submenu {
          opacity: 1;
          transform: translateY(0px) scaleY(1);
     }

     #gnb .gnb-submenu li a {
          display: flex;
          align-items: center;
          padding: 0 15px;
          height: 35px;
          color: var(--gs-white-color);
          background-color: transparent;
     }
     #gnb .gnb-submenu li a:focus-visible {
          box-shadow:
               0 0 0 3px var(--gs-white-color),
               0 0 0 5px #222;
     }
     #gnb .gnb-submenu-toggler {
          display: none;
     }
     #gnb .gnb-submenu a span {
          display: block;
          opacity: 0;
          transform: translateY(50%);
     }
     #gnb li:hover .gnb-submenu a span {
          opacity: 1;
          transform: translateY(0);
          transition:
               transform var(--gs-duration) ease-out,
               opacity 0.2s ease-out;
     }
     #gnb li:has(a:focus-visible) .gnb-submenu span {
          opacity: 1;
          transform: translateY(0);
     }
}
@media all and (max-width: 1100px) {
     #gnb > ul > li {
          min-width: 90px;
     }
     #gnb > ul > li:nth-of-type(1) .gnb-submenu ul {
          padding-right: 15%;
     }
     #gnb > ul > li:nth-of-type(2) .gnb-submenu ul {
          padding-right: 28%;
     }
     #gnb > ul > li:nth-of-type(3) .gnb-submenu ul {
          padding-right: 25%;
     }
     #gnb > ul > li:nth-of-type(5) .gnb-submenu ul {
          padding-right: 10%;
     }
     #gnb > ul > li:nth-of-type(6) .gnb-submenu ul {
          padding-right: 1%;
     }
     footer .info .items {
          flex-direction: column;
     }
     footer .info .items > *::before {
          content: none;
     }
}
@media all and (max-width: 900px) {
     #wrapper {
          --height-header: 70px;
          --max-width: 320px;
     }
     .gnb-toggler {
          display: block;
     }
     header > div.links {
          display: none;
          position: fixed;
          top: var(--height-header);
          left: 0;
          width: 100%;
          max-width: var(--max-width);
          z-index: 991;
     }
     header > div.links > div {
          flex-direction: column;
          gap: 10px 0;
          padding: 10px;
          height: auto;
     }
     header > div.links .link-1 a:last-child:after {
          display: none;
     }
     header > div.links .link-2 {
          margin-left: 0;
     }
     header > div.menus {
          padding: 0 60px;
          height: var(--height-header);
     }
     header > div.menus::after {
          content: "";
          cursor: pointer;
          position: fixed;
          top: -100px;
          right: -100px;
          width: 200px;
          height: 200px;
          background: rgba(0, 0, 0, 0.8);
          border-radius: 50%;
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.8);
          z-index: -1;
          opacity: 0;
          visibility: hidden;
     }
     header h1 {
          position: static;
          width: 100%;
     }
     header h1 .home {
          margin: 0 auto;
          width: 160px;
          height: 43px;
     }
     body.open-gnb header > div.menus {
          margin: 0;
          max-width: var(--max-width);
     }
     body.open-gnb header h1 {
          width: 100%;
          z-index: 999;
     }
     #gnb {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          margin: 0;
          padding: 154px 0 0;
          width: 100%;
          max-width: var(--max-width);
          height: 100%;
          text-align: left;
          background: var(--gs-white-color);
          opacity: 0;
          z-index: 990;
     }
     #gnb > ul {
          display: block;
          padding-bottom: 50px;
          height: 100%;
          border-top: 1px solid #eee;
          border-right: 1px solid #eee;
          overflow-x: hidden;
          overflow-y: auto;
     }
     #gnb > ul > li {
          width: 100%;
          border-bottom: 1px solid #eee;
     }
     #gnb .gnb-menu-toggle {
          justify-content: flex-start;
          margin-right: 55px;
          height: 60px;
     }
     #gnb li.active .gnb-menu-toggle {
          color: var(--gs-brand-color);
     }
     #gnb .gnb-submenu-toggler {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 50px;
          height: 60px;
          text-align: center;
     }
     #gnb .gnb-submenu-toggler:focus-visible {
          box-shadow: inset 0 0 0 2px #222;
          border-radius: 5px;
     }
     #gnb .gnb-submenu-toggler::before,
     #gnb .gnb-submenu-toggler::after {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          width: 12px;
          height: 2px;
          background-color: var(--gs-black-color);
          border-radius: 1px;
          transition: all 0.2s;
     }
     #gnb .gnb-submenu-toggler::before {
          left: 0;
          left: 15px;
          transform: rotate(45deg);
     }
     #gnb .gnb-submenu-toggler::after {
          right: 0;
          right: 15px;
          transform: rotate(-45deg);
     }
     #gnb .gnb-submenu-toggler.is-focused::before,
     #gnb .gnb-submenu-toggler.is-focused::after {
          background-color: var(--gs-brand-color);
     }
     #gnb .gnb-submenu-toggler.is-focused::before {
          transform: rotate(-45deg);
     }
     #gnb .gnb-submenu-toggler.is-focused::after {
          transform: rotate(45deg);
     }

     #gnb .gnb-submenu ul {
          height: 0;
          border-top: 1px solid #eee;
          overflow: hidden;
          visibility: hidden;
          opacity: 0;
          transform: translateY(20px);
          transition:
               transform var(--gs-duration) ease-in-out 0s,
               visibility 0s linear var(--gs-duration),
               height 0s linear 0.01s;
     }
     #gnb .gnb-submenu-toggler.is-focused ~ .gnb-submenu ul {
          padding: 10px 0;
          height: auto;
          visibility: visible;
          opacity: 1;
          transform: translateY(0px);
          transition:
               transform 0s,
               0s,
               var(--gs-duration);
     }
     #gnb .gnb-submenu li a span::after {
          background-color: var(--gs-black-color);
     }
     body.open-gnb header > div.menus::after {
          opacity: 1;
          visibility: visible;
          border-radius: 0;
          box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.8);
          z-index: 900;
          transition: 0.65s ease-in-out;
     }
     body.open-gnb .gnb-toggler span,
     body.open-gnb .gnb-toggler span::before,
     body.open-gnb .gnb-toggler span::after {
          background: var(--gs-brand-color) !important;
     }
     body.open-gnb .gnb-toggler span::before {
          transform: rotate(-45deg) scaleX(0.5) translate(-8px, -9px) !important;
     }
     body.open-gnb .gnb-toggler span::after {
          transform: rotate(45deg) scaleX(0.5) translate(-8px, 9px) !important;
     }
     body.open-gnb .scroll-btn {
          display: none;
     }

     .round-tab-wrap .tab-nav {
          gap: 10px;
     }
}
@media all and (max-width: 860px) {
     .cc-table.breakpoint-1 table,
     .cc-table.breakpoint-1 tbody,
     .cc-table.breakpoint-1 tr,
     .cc-table.breakpoint-1 th,
     .cc-table.breakpoint-1 td {
          display: block;
     }
     .cc-table.breakpoint-1 colgroup,
     .cc-table.breakpoint-1 thead {
          display: none;
     }
     .cc-table.breakpoint-1 tr {
          padding: 5px;
          border-bottom: 1px solid #ededed;
     }
     .cc-table.breakpoint-1 td {
          display: flex;
          gap: 5px;
          position: relative;
          height: auto;
          padding: 5px;
          text-align: left;
          border-bottom: 0 none;
     }
     .cc-table.breakpoint-1 td::before {
          content: attr(data-th) " : ";
          white-space: nowrap;
     }
     .cc-table.breakpoint-1 td:has(.underline-item.ellipsis)::before {
          padding: 2px 0;
     }
     .cc-table.breakpoint-1 tr.fixed td:first-child {
          padding-top: 35px;
          background-position: 5px center;
     }
     .cc-table.breakpoint-1 tr.fixed td:first-child::before {
          content: none;
     }
     .cc-gallery-con.photo ul:not(:last-child) {
          border-bottom: none;
     }
     .cc-gallery-con.photo li {
          flex-basis: 50%;
     }
}
@media all and (max-width: 770px) {
     .round-tab-wrap .tab-nav {
          margin: 30px 0;
     }
     .round-tab-wrap .tab-nav .tab {
          min-width: 100px;
          height: 40px;
          font-size: 17px;
     }
     .cc-list-con li {
          padding: 0;
     }
     .cc-list-con figure {
          gap: 20px;
     }
}
@media all and (max-width: 600px) {
     .page-banner {
          display: none;
     }
     .page-con {
          padding-top: 50px;
     }
     .pg-title {
          margin-bottom: 50px;
     }
     .pg-title h2 {
          font-size: 26px;
     }
     .pg-view .title {
          padding: 15px;
     }
     .pg-view .con {
          padding: 15px 15px 100px;
     }
     .pg-view .cc-attach-file {
          margin-left: 15px;
          margin-right: 15px;
     }

     .cc-table.breakpoint table,
     .cc-table.breakpoint tbody,
     .cc-table.breakpoint tr,
     .cc-table.breakpoint th,
     .cc-table.breakpoint td {
          display: block;
     }
     .cc-table.breakpoint colgroup,
     .cc-table.breakpoint thead {
          display: none;
     }
     .cc-table.breakpoint tr {
          padding: 5px;
          border-bottom: 1px solid #ededed;
     }
     .cc-table.breakpoint td {
          display: flex;
          gap: 5px;
          position: relative;
          height: auto;
          padding: 5px;
          text-align: left;
          border-bottom: 0 none;
     }
     .cc-table.breakpoint td:before {
          content: attr(data-th) " : ";
          white-space: nowrap;
     }
     .cc-table.breakpoint td:has(.underline-item.ellipsis):before {
          padding: 2px 0;
     }

     .search-field-con > div {
          flex-direction: column;
     }
     .search-field-con .enter {
          flex: 1;
     }
     .cc-gallery-con.webtoon ul:not(:last-child) {
          border-bottom: none;
     }
     .cc-gallery-con.webtoon li {
          flex-basis: 100%;
          padding: 10px 0;
     }
     .cc-gallery-con.webtoon .thumb {
          height: auto;
     }
}
@media all and (max-width: 540px) {
     .cc-page-tab-nav .tab {
          padding: 0 15px;
          height: 50px;
          font-size: 20px;
     }
     .cc-page-tab-nav .tab span {
          padding: 0 10px;
     }
     .enter-item.group:has(> .btn) {
          flex-direction: column;
     }
     .enter-item.group:has(> .btn) > .btn {
          flex: 1;
     }
}
@media all and (max-width: 480px) {
     .pg-view .infos {
          flex-direction: column;
     }
     .pg-view .infos > div ~ div {
          padding-left: 0;
     }
     .pg-view .infos > div ~ div::before {
          content: none;
     }
     .enter-item.flex {
          flex-direction: column;
          gap: 10px;
          margin: 25px 0;
     }
     .enter-item.flex label {
          flex: 0;
          min-height: 0;
     }
     .round-tab-wrap .tab-nav .tab {
          min-width: 0;
     }
     .cc-gallery-con.photo li {
          flex-basis: 100%;
          padding: 15px 0;
     }
     .cc-gallery-con.photo .thumb {
          height: auto;
     }
     .cc-pagination {
          --size: 32px;
     }
     .cc-pagination ol {
          gap: 3px;
     }
     .cc-pagination li a {
          font-size: 14px;
     }
     .cc-pagination li:not(.pg-num) a {
          background-size: 24px;
     }
     .cc-pagination .pg-prev {
          margin-right: 0;
     }
     .cc-pagination .pg-next {
          margin-left: 0;
     }
     .cc-list-con li {
          padding: 15px 0;
     }
     .cc-list-con figure {
          display: block;
     }
     .cc-list-con .thumb {
          margin: 0 auto 15px;
          width: 125px;
     }
     .cc-list-con figcaption {
          gap: 5px;
     }
     .cc-list-con .fg-2 {
          margin-bottom: 0;
          height: auto;
          max-height: var(--height);
     }
     .cc-list-con a {
          padding-right: 0;
          background: none;
     }
     .modal-wrap > div {
          padding: 20px;
     }
     .close-modal {
          top: 20px;
     }
}
@media all and (max-width: 440px) {
     footer > div {
          padding-left: 10px;
          padding-right: 10px;
     }
     footer .terms-list {
          column-gap: 15px;
     }
     footer .terms-list li ~ li a::before {
          left: -8px;
     }
}

.organization-member-view {
     position: relative;
}
.organization-member-view .title h3 {
     font-size: 30px;
}
.organization-member-view .infos > div {
     font-size: 16px;
     color: var(--gs-attractive-black);
}
.organization-member-view .con {
     border-top: none;
}
.organization-member-view .photo {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     object-fit: cover;
}
.organization-member-view .category-list {
     display: flex;
     flex-direction: column;
     gap: 35px;
}
.organization-member-view .category-list li {
     display: flex;
     gap: 15px;
     line-height: 1.5;
}
.organization-member-view .category-list li > strong {
     flex-basis: 90px;
     align-self: flex-start;
     font-size: 18px;
     font-weight: 700;
     text-align: center;
}
.organization-member-view .category-list li > div {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 10px;
}

@media all and (min-width: 941px) {
     .organization-member-view:has(.photo) .title,
     .organization-member-view:has(.photo) .category-list li:first-child {
          padding-right: 230px;
     }
}
@media all and (max-width: 940px) {
     .organization-member-view .title {
          text-align: center;
     }
     .organization-member-view .photo {
          position: static;
          margin-bottom: 15px;
          width: 180px;
          height: 180px;
     }
     .organization-member-view .title h3 {
          font-size: 28px;
     }
     .organization-member-view .con {
          padding-top: 10px;
     }
     .organization-member-view .category-list {
          gap: 30px;
     }
     .organization-member-view .infos {
          flex-direction: column;
          gap: 5px;
     }
     .organization-member-view .infos > div ~ div {
          padding-left: 0;
     }
     .organization-member-view .infos > div ~ div::before {
          content: none;
     }
}
@media all and (max-width: 600px) {
     .organization-member-view .category-list li {
          flex-direction: column;
          gap: 10px;
     }
     .organization-member-view .category-list li > strong {
          flex-basis: auto;
     }
}