@charset "UTF-8";
@media (min-width: 768px) { .view-max-768 { display: none; } }
@media (max-width: 767px) { .view-min-768 { display: none; } }
.image-icon { position: relative; background: no-repeat 50% 50%/cover; }
.image-icon:before, .image-icon:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; top: 0; background: no-repeat 50% 50%/cover; transition: .5s opacity; }
.image-icon:before { opacity: 1; }
.image-icon:after { opacity: 0; }

a:hover .image-icon:before, button:hover .image-icon:before { opacity: 0; }
a:hover .image-icon:after, button:hover .image-icon:after { opacity: 1; }

/* layout */
.layout { position: relative; margin: 0 auto; width: 100%; max-width: 1400px; padding: 0; }

@media (max-width: 1440px) { .layout { padding: 0 2rem; max-width: 100%; } }
.search-basic-inner { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid #222; }
.search-basic-inner input[type="text"] { flex: 1; padding: 0; min-width: 0; height: 2.8rem; background-color: transparent; border: 0; line-height: 2.8rem; }
.search-basic-inner button[type="submit"] { flex-shrink: 0; margin-left: auto; color: #222; font-size: 2.8rem; }

/* header */
#header { position: fixed; top: 0; width: 100%; height: 12.7rem; transition: .3s background-color, .3s height; z-index: 20; }
#header .layout { display: flex; align-items: center; position: static; max-width: 1800px; height: 100%; }
@media (max-width: 1839px) { #header .layout { padding: 0 2rem; max-width: 100%; } }
@media (max-width: 1023px) { #header { height: 10rem; } }
@media (max-width: 767px) { #header { height: 9rem; } }

/* header-gnb */
#gnb { position: static; margin-left: auto; width: 110rem; height: 100%; transition: .5s width; }
@media (max-width: 1699px) { #gnb { width: 87.5rem; } }
@media (max-width: 1439px) { #gnb { width: 75rem; } }
@media (max-width: 1279px) { #gnb { display: none; } }

.header-logo { flex-shrink: 0; position: relative; transform: translatey(0.65rem); z-index: 2; }
.header-logo-link { display: block; position: relative; overflow: hidden; width: 28.901rem; height: 3.6rem; transition: .5s width, .5s height; }
.header-logo-link img { position: absolute; top: 0; left: 0; width: 100%; transition: .5s transform; transform: translatey(0); }
@media (max-width: 1439px) { .header-logo { transform: translatey(0.35rem); }
  .header-logo-link { width: 24.677rem; height: 3rem; } }
@media (max-width: 479px) { .header-logo { transform: translatey(0.35rem); }
  .header-logo-link { width: 19.641rem; height: 2.4rem; } }
.header-navi { display: flex; justify-content: center; overflow: hidden; position: relative; height: 100%; transition: 0s overflow .5s; z-index: 2; }
.header-navi [class*="-link"] { display: flex; align-items: center; position: relative; height: 100%; color: #232323; }
.header-navi .depth01 { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; flex: 1; height: 100%; }
.header-navi .depth01-link { flex-shrink: 0; position: relative; color: #fff; font-size: 1.8rem; font-weight: 600; text-align: center; }
.header-navi .depth01-link span { display: flex; align-items: center; position: relative; }
.header-navi .depth01-link span:before { content: ""; display: block; position: absolute; top: calc(100% + 1rem); left: 50%; width: .8rem; height: .8rem; background-color: #fff; border-radius: 50%; opacity: 0; transform: translate(-50%, 100%); transition: .5s; }
.header-navi .depth01-link.on span:before, .header-navi .depth01-link.active.on span:before { opacity: 1; transform: translate(-50%, 0); }
.header-navi .depth01-link.on + .depth01-child:before { opacity: 1; transition: .5s opacity; }
.header-navi .depth01-child { overflow: hidden; visibility: hidden; position: absolute; top: 100%; left: 0; width: 100%; opacity: 0; transition: 0s visibility .5s, .5s opacity; border: 1px solid transparent; border-width: 0 1px 0 1px; border-left-color: #e6e6e6; }
.header-navi .depth01-child:before { content: ""; position: absolute; top: 1px; left: 0; width: 100%; height: calc(100% - 1px); background-color: #fff; opacity: 0; }
.header-navi .depth01:last-child .depth01-child { border-right-color: #e6e6e6; }
.header-navi .depth02 { position: relative; flex-shrink: 0; }
.header-navi .depth02-list { display: flex; flex-direction: column; padding: 3.3rem 1.95rem 3rem; row-gap: 1rem; }
.header-navi .depth02-link { display: block; position: relative; padding-left: 1rem; color: #515151; font-size: 1.6rem; line-height: 2.4rem; }
.header-navi .depth02-link > span { display: block; font-size: 1.5rem; }
.header-navi .depth02-link:before { content: ""; position: absolute; top: 1rem; left: 0; width: .5rem; height: 2px; background-color: #707070; }
.header-navi .depth02-link:hover, .header-navi .depth02-link.active.on { text-decoration: underline; color: #0097dc; }
.header-navi .depth02-link:hover:before, .header-navi .depth02-link.active.on:before { background-color: #0097dc; }
.header-navi .depth03-list { display: none; }
.header-navi-bg { visibility: hidden; position: absolute; top: 0; left: 0; width: 100vw; background-color: #f6f6f6; box-shadow: 0 0.3rem 2rem rgba(0, 0, 0, 0.16); opacity: 0; transition: 0s visibility .5s, .5s opacity; }
.header-navi-bg:before { content: ""; position: absolute; top: 12.7rem; left: 0; width: 100%; height: 1px; background-color: #ededed; }
.header-navi-bg:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 12.7rem; background-color: #fff; }
.header-util { display: flex; align-items: center; flex-shrink: 0; column-gap: 3.2rem; position: relative; margin-left: auto; z-index: 1; }
.header-util-btn .btn { display: flex; align-items: center; position: relative; column-gap: 4px; font-family: "Montserrat", "Pretendard"; color: #fff; font-size: 14px; line-height: 1; }
.header-util-btn .btn i { position: relative; }
.header-util-btn .btn i[class*="icon-"], .header-util-btn .btn i[class*="ri-"] { font-size: 2rem; }
@media (max-width: 1023px) { .header-util-btn .btn { font-size: 1.8rem; }
  .header-util-btn .btn i[class*="icon-"], .header-util-btn .btn i[class*="ri-"] { font-size: 2.4rem; } }
.header-util-btn.header-util-btn-popup { font-weight: 500; }
.header-util-btn.header-util-btn-popup i { display: flex; justify-content: center; align-items: center; width: 1.7rem; height: 1.7rem; background-color: #0097dc; border-radius: 50%; color: #fff; font-size: 1.2rem; }
.header-util-btn-menu-bar { position: absolute; right: 0; height: 2px; background-color: #fff; transition: .5s; }
.header-util-btn-menu-bar-top { top: 0; width: 100%; }
.header-util-btn-menu-bar-mid { top: 50%; width: 1.7rem; transform: translatey(-50%); }
.header-util-btn-menu-bar-bot { bottom: 0; width: 100%; }
.header-util-btn-menu .btn { position: relative; width: 2.4rem; height: 2rem; }
.header-util-btn-menu .btn:hover .header-util-btn-menu-bar-top { width: 1.7rem; }
.header-util-btn-menu .btn:hover .header-util-btn-menu-bar-mid { width: 100%; }
.header-util-btn-menu .btn:hover .header-util-btn-menu-bar-bot { width: 1.7rem; }
.header-util-btn-menu .btn.on .header-util-btn-menu-bar { transition-duration: .75s; }
.header-util-btn-menu .btn.on .header-util-btn-menu-bar-top { top: 50%; width: 100%; transform: translatey(-50%) rotate(-45deg); }
.header-util-btn-menu .btn.on .header-util-btn-menu-bar-mid { opacity: 0; }
.header-util-btn-menu .btn.on .header-util-btn-menu-bar-bot { bottom: 50%; width: 100%; transform: translatey(50%) rotate(45deg); }
@media (max-width: 479px) { .header-util-btn.header-util-btn-popup, .header-util-btn.header-util-btn-lang { position: fixed; bottom: 0; width: 50%; height: 5.4rem; background-color: #0097dc; }
  .header-util-btn.header-util-btn-popup > button, .header-util-btn.header-util-btn-popup a, .header-util-btn.header-util-btn-lang > button, .header-util-btn.header-util-btn-lang a { justify-content: center; width: 100%; height: 100%; color: #fff !important; }
  .header-util-btn.header-util-btn-popup { left: 0; }
  .header-util-btn.header-util-btn-popup:before { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #fff; transform: translatex(50%); }
  .header-util-btn.header-util-btn-popup i { background-color: #fff; color: #0097dc !important; }
  .header-util-btn.header-util-btn-lang { right: 0; } }
@media (max-width: 1339px) { .header-util { column-gap: 2rem; } }
.header-search { visibility: hidden; position: fixed; top: 0; left: 0; padding: 17.7rem 2rem 7.5rem; width: 100vw; background-color: #f5f5f5; opacity: 0; transition: 0s visibility .3s, .3s opacity; z-index: -1; }
.header-search:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 12.7rem; background-color: #fff; border-bottom: 1px solid #e0e0e0; }
.header-search:after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 2rem; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.16), transparent); }
.header-search .search-basic { margin: 0 auto; max-width: 48rem; }
.header-search-close { position: absolute; top: calc(100% - 3.25rem); left: 50%; transform: translate(-50%, -50%); }
.header-search-close i { color: #232323; font-size: 3rem; }
@media (max-width: 1023px) { .header-search { padding-top: 15.7rem; }
  .header-search:before { height: 10rem; } }
@media (max-width: 767px) { .header-search:before { height: 10rem; }
  .header-search:after { height: 9rem; } }

/* 전체메뉴 */
#total-menu-wrap { visibility: hidden; position: fixed; top: 0; right: 0; padding: 10rem 0; width: 100%; height: 100%; background: url(/_html/images/layout/mobile/bg.jpg) no-repeat right bottom/cover; opacity: 0; transition: .3s opacity ease-out, 0s visibility .3s; z-index: 15; }
#total-menu-wrap .layout { margin: auto; max-width: 90rem; max-height: 100%; }

.total-menu-inner { display: flex; align-items: center; height: 100%; overflow-y: auto; }
.total-menu-navi button { display: none; }

/* PC 전체메뉴 */
@media (min-width: 480px) { .total-menu-navi { display: flex; flex-wrap: wrap; row-gap: 6.5rem; margin: 0 -2rem; }
  .total-menu-navi button { display: none !important; }
  .total-menu-navi .depth01 { position: relative; width: calc(100% / 2); padding: 0 2.5rem; }
  .total-menu-navi .depth01 * { position: relative; z-index: 2; }
  .total-menu-navi .depth01-link { display: flex; justify-content: center; align-items: center; height: 6.5rem; background-color: #0097dc; color: #fff; border-radius: .5rem; font-size: 2rem; font-weight: 600; text-align: center; }
  .total-menu-navi .depth02:not(:first-child) { margin-top: 1rem; }
  .total-menu-navi .depth02-list { padding: 2.5rem 1rem 0; }
  .total-menu-navi .depth02-link { display: block; position: relative; padding-left: 1.4rem; color: #dedede; font-size: 2rem; }
  .total-menu-navi .depth02-link:before { content: ""; position: absolute; top: 1.25rem; left: 0; width: .5rem; height: 2px; background-color: #dedede; }
  .total-menu-navi .depth02-link:hover, .total-menu-navi .depth02-link.active { color: #0097dc; text-decoration: underline; }
  .total-menu-navi .depth02-link:hover:before, .total-menu-navi .depth02-link.active:before { background-color: #0097dc; } }
@media (min-width: 1024px) { .total-menu-navi { margin: 0 -3.75rem; }
  .total-menu-navi .depth01 { width: calc(100% / 3); padding: 0 3.75rem; }
  .total-menu-navi .depth01-link { font-size: 2rem; }
  .total-menu-navi .depth02-list { padding-top: 3.5rem; } }
@media (min-width: 1439px) { .total-menu-navi { margin: 0 -5rem; }
  .total-menu-navi .depth01 { padding: 0 5rem; } }
/* 모바일 전체메뉴 */
@media (max-width: 479px) { #total-menu-wrap { padding: 10rem 0 0; }
  .total-menu-navi { display: flex; flex-wrap: wrap; row-gap: 3rem; }
  .total-menu-navi button { display: none !important; }
  .total-menu-navi .depth01 { position: relative; width: 100%; }
  .total-menu-navi .depth01 * { position: relative; z-index: 2; }
  .total-menu-navi .depth01-link { display: flex; justify-content: center; align-items: center; height: 5rem; background-color: #0097dc; color: #fff; border-radius: .5rem; font-size: 2rem; font-weight: 600; text-align: center; }
  .total-menu-navi .depth02:not(:first-child) { margin-top: 1rem; }
  .total-menu-navi .depth02-list { padding: 1.5rem 1rem 0; }
  .total-menu-navi .depth02-link { display: block; position: relative; padding-left: 1.4rem; color: #dedede; font-size: 2rem; }
  .total-menu-navi .depth02-link:before { content: ""; position: absolute; top: 1.25rem; left: 0; width: .5rem; height: 2px; background-color: #dedede; }
  .total-menu-navi .depth02-link:hover, .total-menu-navi .depth02-link.active { color: #0097dc; text-decoration: underline; }
  .total-menu-navi .depth02-link:hover:before, .total-menu-navi .depth02-link.active:before { background-color: #0097dc; } }
/* container */
#container { position: relative; width: 100%; transition: .3s padding-top; }

.sub #container { padding-bottom: 16rem; }

#svisual { display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; padding: 12.7rem 0 13rem; height: 62.7rem; }
#svisual:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/_html/images/layout/svisual/sub06.jpg) no-repeat 50% 50%/cover; transform: scale(1.2); transition: 2.5s transform ease-out; }
#svisual.sub01:before { background-image: url(/_html/images/layout/svisual/sub01.jpg); }
#svisual.sub02:before { background-image: url(/_html/images/layout/svisual/sub02.jpg); }
#svisual.sub03:before { background-image: url(/_html/images/layout/svisual/sub03.jpg); }
#svisual.sub04:before { background-image: url(/_html/images/layout/svisual/sub04.jpg); }
#svisual.sub05:before { background-image: url(/_html/images/layout/svisual/sub05.jpg); }

.svisual-title { z-index: 0; }
.svisual-title h2 { color: #fff; font-size: 5.5rem; font-weight: 700; text-align: center; }
.svisual-title h2 span { display: block; color: #80cbed; font-size: 2rem; font-weight: 500; }

#snb { position: relative; padding-top: 7rem; z-index: 5; }
@media (max-width: 767px) { #snb { padding: 0; } }

.snb-navi { position: relative; }
.snb-navi .depth02-link { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; border: 1px solid #e8e8e8; color: #232323; font-size: 2rem; text-align: center; }
.snb-navi .depth02-link.active { background-color: #0097dc; border-color: #0097dc; color: #fff; font-weight: 600; text-decoration: underline; }
.snb-navi-mobile { display: none; }
@media (min-width: 768px) { .snb-navi { display: flex; justify-content: center; gap: 4px; z-index: 1; }
  .snb-navi .depth02 { flex-basis: 35rem; }
  .snb-navi .depth02-link { padding: 1rem 1.5rem; min-height: 6.2rem; height: 100%; }
  .snb-navi .depth02-link > span { font-size: 1.6rem; line-height: 2rem; } }
@media (max-width: 1339px) { .snb-navi .depth02-link { font-size: 1.8rem; } }
@media (max-width: 767px) { .snb-navi { display: none; position: absolute; top: calc(100% + 1px); left: 0; width: 100%; box-shadow: 0 0.3rem 1rem rgba(102, 102, 102, 0.3); }
  .snb-navi .depth02-link { justify-content: flex-start; padding: 2.5rem 2rem; background-color: #fff; border: 0; border-bottom: 1px solid #e8e8e8; text-align: left; }
  .snb-navi-mobile { display: flex; align-items: center; gap: 1.5rem; position: relative; padding: 0 2rem; width: 100%; height: 8rem; background-color: #0097dc; color: #fff; font-size: 2rem; font-weight: 600; text-align: left; }
  .snb-navi-mobile i { font-size: 2.4rem; }
  .snb-navi-mobile-active { margin-right: auto; } }

#aside { position: absolute; right: calc(50% - 90rem); transition: .5s; opacity: 0; z-index: 10; }
#aside.active { opacity: 1; }
@media (max-width: 1839px) { #aside { position: fixed; top: auto !important; right: auto; bottom: 2rem; left: calc(100% - 2rem); height: auto !important; transform: translatex(-100%); z-index: 5; } }
@media (max-width: 479px) { #aside { bottom: 7.5rem; } }

.sub #aside { top: 85.5rem; height: calc(100% - 85.5rem); }

.main #aside { top: 75rem; height: calc(100% - 75rem); }

#content-wrap { overflow: hidden; position: relative; margin-top: 8.5rem; }
#content-wrap .layout { display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; gap: 2rem; }
#content-title { margin-right: auto; color: #000; font-size: 4.5rem; font-weight: 700; line-height: 5.5rem; }
#content-title:after { content: ""; display: inline-block; position: relative; top: .25rem; left: 1.1rem; width: 1.2rem; height: 1.2rem; background-color: #0097dc; border-radius: 50%; vertical-align: top; }
#content-desc { position: relative; margin-top: 4rem; width: 100%; z-index: 0; }

.content-util { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem calc(6.4rem + 1px); flex-shrink: 0; position: relative; max-width: 100%; z-index: 1; }
.content-util-btn { display: flex; justify-content: center; align-items: center; width: 4.6rem; height: 4.6rem; background-color: #f2f2f2; border-radius: 50%; }
.content-util-btn > i { color: #000; font-size: 1.8rem; }
.content-util-btn-group { display: flex; position: relative; gap: .8rem; }
.content-util-btn-group:before { content: ""; position: absolute; top: 50%; right: calc(100% + 3.2rem); width: 1px; height: 1.95rem; background-color: #cecdd5; transform: translatey(-50%); }
.content-util-share { position: relative; }
.content-util-share-list { display: none; position: absolute; top: calc(100% + .8rem); left: 0; }
.content-util-share-btn + .content-util-share-btn { margin-top: .8rem; }
.content-util-share-btn > a { display: flex; justify-content: center; align-items: center; width: 4.6rem; height: 4.6rem; border-radius: 5rem; }
.content-util-share-btn > a .image-icon { width: 1.8rem; height: 1.8rem; }
.content-util-share-btn-twitter > a { /*background-color:#50abf0;
.image-icon{background-image:url(/_html/images/layout/sns/twitter.svg)}*/ background-color: #000; }
.content-util-share-btn-twitter > a .image-icon { background-image: url(/_html/images/layout/sns/twitter-x.svg); }
.content-util-share-btn-facebook > a { background-color: #2f5095; }
.content-util-share-btn-facebook > a .image-icon { background-image: url(/_html/images/layout/sns/facebook.svg); }
.content-util-share-btn-kakaostory > a { background-color: #ffc508; }
.content-util-share-btn-kakaostory > a .image-icon { background-image: url(/_html/images/layout/sns/kakaostory.svg); }
.content-util-share-btn-blog > a { background-color: #58af00; }
.content-util-share-btn-blog > a .image-icon { background-image: url(/_html/images/layout/sns/blog.svg); }

.aside-link { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 1.5rem; width: 15.2rem; height: 15.2rem; text-align: center; }
.aside-link-group { display: flex; flex-direction: column; gap: 2.6rem; position: sticky; top: 16.5rem; z-index: 5; }
.aside-link:before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: #80cbed; border-radius: 50%; transform: translate(-50%, -50%) scale(1); animation: quickAni 1.5s ease-in-out infinite both; opacity: 1; }
.aside-link:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border: 5px solid transparent; border-radius: 50%; }
.aside-link > * { position: relative; color: #232323; z-index: 1; }
.aside-link > [data-type="icon"] { font-size: 2.4rem; }
.aside-link > [data-type="text"] { margin-top: 1rem; font-weight: 500; line-height: 2.2rem; }
.aside-link > [data-type="text"] strong { color: #232323; font-size: 2rem; font-weight: 700; line-height: 2.4rem; }
.aside-link > [data-type="text"] p { margin-top: .5rem; color: #757575; font-size: 1.6rem; line-height: 2rem; }
.aside-link > [data-type="text"] .en { display: none; }
@media (max-width: 1839px) { .aside-link-group { flex-direction: row; } }
@media (max-width: 1439px) { .aside-link { padding: 1.25rem; width: 14.2rem; height: 14.2rem; }
  .aside-link > [data-type="text"] strong { font-size: 1.9rem; } }
@media (max-width: 767px) { .aside-link { width: 13rem; height: 13rem; }
  .aside-link > [data-type="text"] strong { font-size: 1.7rem; }
  .aside-link > [data-type="text"] p { font-size: 1.5rem; }
  .aside-link br { display: none; } }
@media (max-width: 767px) { .aside-link { width: 12rem; height: 12rem; }
  .aside-link > [data-type="text"] strong { font-size: 1.6rem; }
  .aside-link > [data-type="text"] p { font-size: 1.4rem; } }

@keyframes quickAni { 0% { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.05); }
  80% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
.path { display: flex; align-items: center; }
.path-navi { display: flex; flex-wrap: wrap; align-items: center; row-gap: .75rem; position: relative; padding-left: 2rem; height: auto; }
.path-navi a { display: block; position: relative; color: #757575; }
.path-link { position: relative; padding-left: 3.6rem; }
.path-link:before { content: ""; display: block; position: absolute; top: 0; left: 1.8rem; color: #ababab; font-family: "remixicon"; font-size: 2rem; line-height: 1; transform: translatex(-50%); }
.path-link:last-child a { font-weight: 600; text-decoration: underline; }
.path-link a { font-size: 1.6rem; line-height: 2rem; }
.path-link-home { position: absolute; top: 0; left: 0; }
.path-link-home a i { display: block; position: relative; font-size: 2rem; }

/* footer */
#footer { position: relative; margin-top: auto; padding: 8.5rem 0; background-color: #2b2b2b; z-index: 0; }
#footer > .layout { display: flex; align-items: flex-start; gap: 2.5rem; z-index: 1; }
@media (max-width: 1439px) { #footer { padding: 7.5rem 0; } }
@media (max-width: 767px) { #footer { padding: 6.5rem 0; }
  #footer > .layout { flex-direction: column; } }
@media (max-width: 479px) { #footer { padding-bottom: 9rem; } }

.footer-info { margin-right: auto; }
.footer-info-logo img { width: 100%; max-width: 28.9rem; }
.footer-info-menu { display: flex; flex-wrap: wrap; gap: 0.5rem calc(5.2rem + 1px); margin-top: 2.5rem; }
.footer-info-menu > li { position: relative; }
.footer-info-menu > li:not(:last-child):after { content: ""; display: block; position: absolute; top: 50%; left: calc(100% + 2.6rem); width: 1px; height: 1.8rem; background-color: #b4b4b4; transform: translatey(-50%); }
.footer-info-menu > li > a { color: #fff; }
.footer-info-menu > li:first-child > a { color: #f57d4f; }
.footer-info-address, .footer-info-copyright { color: #ababab; font-weight: 300; }
.footer-info-address > span, .footer-info-copyright > span { display: inline-block; }
.footer-info-address { margin-top: 2.5rem; }
.footer-site { position: relative; width: 27rem; }
.footer-site-group { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 1rem; }
.footer-site button { display: flex; align-items: center; position: relative; padding: 0 2.2rem 0 3.2rem; width: 100%; height: 5rem; border: 1px solid #ababab; color: #ababab; }
.footer-site button i { margin-left: auto; }
.footer-site button i:before { display: block; position: relative; transition: .5s transform; }
.footer-site button.active i:before { transform: rotate(-180deg); }
.footer-site-list { display: none; padding: 2rem; position: absolute; bottom: calc(100% + 2px); left: 0; width: 100%; background-color: #e4e4e4; z-index: 1; }
.footer-site-list-link { margin-top: 1.25rem; }
.footer-site-list-link:first-child { margin-top: 0; }

.page-top { position: absolute; top: 0; right: calc(50% - 70rem); z-index: 5; transition: .3s all, .5s right, .75s bottom; transform: translatey(-50%); z-index: 0; }

.page-top > a { display: block; width: 8rem; height: 8rem; }

@media (max-width: 1439px) { .page-top { right: 2rem; } }
/* interaction */
/* loaded */
.loaded #svisual:before { transform: scale(1); }

/* scrolling */
.scrolling #header { background-color: #fff; box-shadow: 0 0.3rem 2rem rgba(0, 0, 0, 0.16); }
.scrolling .header-logo-link img { transform: translatey(-50%); }
.scrolling .header-navi .depth01-link { color: #222; }
.scrolling .header-navi .depth01-link span:before { background-color: #0097dc; }
.scrolling .header-util-btn .btn { color: #111; }
.scrolling .header-util-btn-menu-bar { background-color: #222; }
.scrolling .page-top { opacity: 1; }

/* on-mobile */
.blind { visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); opacity: 0; transition: .5s opacity, visibility .5s; z-index: 25; }
.blind-on-gnb .header-logo-link img, .blind-on-gnb.scrolling .header-logo-link img, .blind-on-search .header-logo-link img, .blind-on-search.scrolling .header-logo-link img { transform: translatey(-50%); }
.blind-on-gnb .header-navi .depth01-link, .blind-on-gnb.scrolling .header-navi .depth01-link, .blind-on-search .header-navi .depth01-link, .blind-on-search.scrolling .header-navi .depth01-link { color: #222; }
.blind-on-gnb .header-navi .depth01-link span:before, .blind-on-gnb.scrolling .header-navi .depth01-link span:before, .blind-on-search .header-navi .depth01-link span:before, .blind-on-search.scrolling .header-navi .depth01-link span:before { background-color: #0097dc; }
.blind-on-gnb .header-util-btn .btn, .blind-on-gnb.scrolling .header-util-btn .btn, .blind-on-search .header-util-btn .btn, .blind-on-search.scrolling .header-util-btn .btn { color: #111; }
.blind-on-gnb .header-util-btn-menu-bar, .blind-on-gnb.scrolling .header-util-btn-menu-bar, .blind-on-search .header-util-btn-menu-bar, .blind-on-search.scrolling .header-util-btn-menu-bar { background-color: #222; }
.blind-on-gnb .header-navi { overflow: visible; transition: 0s overflow; }
.blind-on-gnb .header-navi .depth01-link { color: #222; }
.blind-on-gnb .header-navi .depth01-child { visibility: visible; opacity: 1; transition: 0s visibility, .5s opacity; }
.blind-on-gnb .header-navi-bg { visibility: visible; opacity: 1; transition: 0s visibility, .5s opacity; }
.blind-on-gnb .header-util-btn .btn { color: #111; }
.blind-on-gnb .header-util-btn-menu-bar { background-color: #222; }
.blind-on-mobile { scrollbar-width: none; -ms-overflow-style: none; overflow: hidden; height: 100%; }
.blind-on-mobile.scrolling #header { background-color: transparent; box-shadow: unset; }
.blind-on-mobile.scrolling .header-logo-link img { transform: unset; }
.blind-on-mobile.scrolling .header-util-btn .btn { color: #fff; }
.blind-on-mobile.scrolling .header-util-btn-menu-bar { background-color: #fff; }
.blind-on-mobile::-webkit-scrollbar { display: none; }
.blind-on-mobile #header { box-shadow: none; }
.blind-on-mobile #total-menu-wrap { visibility: visible; opacity: 1; transition: .3s opacity ease-out, 0s visibility 0s; }
.blind-on-mobile .header-navi, .blind-on-mobile .header-util-btn:not(.header-util-btn-menu) { visibility: hidden; opacity: 0; }
@media (max-width: 767px) { .blind-on-mobile .header-logo { visibility: visible; opacity: 1; } }
.blind-on-search .header-search { visibility: visible; opacity: 1; transition: .3s opacity ease-out, 0s visibility 0s; }
.blind-on-popup .blind { visibility: visible; opacity: 1; transition-delay: 0s; }

@media (max-width: 1839px) { .scroll_end #aside { opacity: 0; visibility: hidden; } }