@charset "UTF-8";
/* CSS Document */

@import '/asset/fonts/web/static/pretendard-subset.css';

/* style variables */
/* :root {} */

/* reset */
* {
  margin: 0 auto;
  padding: 0;
  font: 1rem/1.5 'Pretendard';
  letter-spacing: -0.5px;
  box-sizing: border-box;
  color: #4b5097;
}
html {scroll-behavior: smooth; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
[id] {scroll-margin-top: 10rem;}
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0; text-decoration: none; word-break: keep-all; border: 0;}
body {background-color: #000;}
body:before {content: ''; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background-color: #fff;}
li {list-style: none;}
a {text-decoration: none; line-height: 1; cursor: pointer;}
::placeholder {color: #999;}
button {cursor: pointer;}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {scrollbar-width: none; scrollbar-color: transparent #4B5097;}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {width: 10px; height: 10px;}
*::-webkit-scrollbar-track {background: transparent;}
*::-webkit-scrollbar-thumb {background-color: #4B5097; border-radius: 5px; border: 0px solid #000;}

/* font */
.h1 {font-size: 3em; font-weight: 100; text-transform: uppercase; color: #4b5097; line-height: 1; margin-bottom: 10px;}
.h2 {font-size: 2.5em; font-weight: 800; text-transform: uppercase; color: #4b5097; line-height: 1; margin-bottom: 5px;}
.h3 {font-size: 1.2em; font-weight: 500; text-transform: uppercase; color: #4b5097; line-height: 1;}
.h4 {font-size: 1.5em; font-weight: 800; text-transform: uppercase; color: #4b5097; line-height: 1;}

.p_small {font-size: 80%; line-height: 1;}

.purple {color: rgba(75, 80, 151, 1.0);} /* #4b5097 */
.pink {color: rgba(242, 170, 198, 1.0);} /* #f2aac6 */
.pma10 {margin-bottom: 10px;}
.pma20 {margin-bottom: 20px !important;}
.pma30 {margin-bottom: 30px;}
.pma50 {margin-bottom: 50px;}
.per70 {font-size: 70%;}
.fw700 {font-weight: 700;}

/* all */
#all {width: 100%; height: 100%;}
#a-left {float: left; width: 20%; height: 100%; position: fixed; background-color: #fff;}
#a-right {float: left; width: 80%; margin-left: 20%; background-color: #fff;}

/* GNB */
.logo {padding: 25px 50px; text-align: left; align-items: flex-start;}
.logoV {width: 150px; display: block; cursor: pointer; margin: 0;}
.logoH {width: 150px; display: none; cursor: pointer; margin: 0;}
.gnb {padding: 25px 50px;}
.gnb-list {display: flex; flex-direction: column; gap: 6.5px;}
.gnb-item {padding-left: 2px;}
.gnb-item > a > span {font-size: 70%;}
.gnb-item > a {display: block; color: #4b5097; opacity: 1; font-size: 1.2em; line-height: 1.1;}
.gnb-item > a:hover {opacity: 1; transform: opacity 0.3s ease-in-out; font-weight: 500;}
.gnb-item.active > a {color: #4b5097; opacity: 1; font-weight: 800;}
.scrollTop {padding: 15px 50px; height: 53px; position: fixed; top: 0; right: 0; width: 80%; background-color: rgba(255, 255, 255, 0.9); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); z-index: 100; display: none; flex-direction: row; gap: 8px 20px; align-items: center; flex-wrap: wrap;}
.scrollTopT {display: block;}
.scrollTopBtnWrap {display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap;}
.scrollTopmainT {font-size: 1.2em; font-weight: 800; color: #4b5097; line-height: 1;}

/* slidemenu */
#slidemenu {display: block; position: fixed; top: 0; right: 0; z-index: 1000;}
.GNB_util_scroll {float: left; width: 17%; padding: 6px 4%; text-align: right;}
.gnb_util_list {display: flex; justify-content: right; flex-direction: row; gap: 0px;}
.gnb_util_item {position: relative;}
.gnb_menu {width: 40px; height: 40px; margin-right: 10px; background: url(/asset/images/icon_menu.svg) no-repeat;}
#sitemapBox {position: fixed; transition: right 0.5s ease-in-out;}
#sitemapBox.show {right: 0;}
.sitemap_pop {display: block; width: 400px; height: 100vh; background: #fff; top: 0px; right: -500px; z-index: 1000; border-left: 1px solid rgba(17, 40, 105, 0.5);}
.sitemap_wrap {overflow: hidden; width: 100%; border-bottom: 0px solid rgba(17, 40, 105, 1); text-align: left; padding: 13px 20px;}
.sitemap_M {float: left; width: 50%; padding-top: 4px;}
.sitemap_close {float: left; width: 50%; text-align: right;}
.sitemap_close_btn {width: 25px; height: 25px; background: url(/asset/images/icon_plus_bluegreen.svg) no-repeat; transform: rotate(45deg); transform-origin: center; transition: transform 0.3s;}
.sitemap_close_btn:hover {width: 25px; height: 25px; background: url(/asset/images/icon_plus_deepblue.svg) no-repeat; transform: rotate(225deg);}
.sitemap_1st {float: left; width: 35%; padding: 5px 0px; font-size: 1.25rem; word-break: keep-all; font-weight: 700; color: rgba(17, 40, 105, 1); border-bottom: 1px solid rgba(17, 40, 105, 0); cursor: default;}
.sitemap_1st > a {font-size: 1.25rem; word-break: keep-all; font-weight: 700; color: rgba(17, 40, 105, 1); border-bottom: 1px solid rgba(17, 40, 105, 0);}
.sitemap_1st > a:hover,
.sitemap_1st > a:focus,
.sitemap_1st > a:active {color: rgba(17, 40, 105, 1); border-bottom: 1px solid rgba(17, 40, 105, 1);}
.sitemap_2nd {float: left; width: 65%;}
.sitemap_2nd > a {font-size: 1em; line-height: 1.3; color: rgba(17, 40, 105, 0.7); padding-left: 40px; background: url(/asset/images/bullet_line_deepblue.svg) center left -90px no-repeat; background-size: auto 10px;}
.sitemap_2nd > a:hover,
.sitemap_2nd > a:focus,
.sitemap_2nd > a:active {color: rgba(17, 40, 105, 1); font-weight: 500; padding-left: 40px; background: url(/asset/images/bullet_line_deepblue.svg) center left -70px no-repeat; background-size: auto 10px;}

/* foot */
.footer {position: relative; bottom: 0; left: 0; z-index: 100; width: 100%; padding: 0px 50px 50px 50px; background: #fff; display: flex; align-items: center; height: 100px;}
.foot {width: 100%;}
.foot > div {font-size: 0.8em; padding-bottom: 5px;}
.foot > div > b {font-size: 1em; font-weight: 700;}
.contactWrap {display: flex; align-items: center;}
.contactWrap > div {font-size: 0.9rem;}
.contactWrap > div:nth-child(2n) {padding-right: 15px;}
.contactWrap > div > a {font-size: 0.9rem;}
.contactWrap > div > a:hover {text-decoration: underline;}
.contactIcon {line-height: 0;}
.contactIcon > img {width: 25px; height: 30px; margin-right: 6px; vertical-align: bottom;}
.iconTOP {position: fixed; bottom: 15px; right: 0px; background-color: #4b5097; border: 1px solid rgba(255, 255, 255, 0); color: #fff; font-weight: 900; width: 70px; padding: 5px 20px 5px 20px; border-radius: 10px 0px 0px 10px; cursor: pointer; z-index: 101;}
.iconTOP:hover {background-color: #fff; border-color: rgba(75, 80, 151, 1.0); color: #4b5097;}
.about {font-size: 0.8rem; border-radius: 20px; border: 1px solid #4b5097; padding: 2px 10px; font-weight: 700;}
.about:hover {background-color: #4b5097; color: #fff;}

/* main */
.iamMIZIwrap {display: flex; flex-direction: row; margin: 15px 0px 10px 0px;}
.iamMIZI1 {font-size: 1.5em; font-weight:700; left: 0px; transform: rotate(-5deg); transform-origin: left bottom; background-color: #4b5097; color: #fff; position: relative; display: flex; padding:5px 15px; z-index: 10;}
.iamMIZI2 {font-size: 1.5em; font-weight:700; left: -8px; transform: rotate(10deg); transform-origin: right bottom; background-color: #4b5097; color: #fff; position: relative; display: flex; padding:5px 15px; z-index: 10;}
.contents {width: 100%; height: 100%;}
.contents > div:first-child {padding: 50px;}
.contents > div {padding: 0px 50px; width: 100%;}
/*
.contents > div:nth-child(2n) {padding-top: 50px; border-top: 1px solid #4b5097;}
.contents > div:nth-child(2n)::before {display: block; content: ''; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 10px; background-color: #4b5097;}
*/
.categoryWrap {padding: 10px 0px; display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap;}
.category {border: 1px solid #4b5097; padding: 5px 15px; border-radius: 50px; cursor: pointer; color: #4b5097;}
.category:hover {background-color: rgba(75, 80, 151, 1.0); color: #fff; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.category.active {background-color: rgba(75, 80, 151, 1.0); color: #fff;}
.cont-list {margin-bottom: 70px;}
.comment {font-size: 0.9em; font-weight: 500; color: #f2aac6; height: 50px; text-align: right; background: url(/asset/images/RnL.svg) top 5px right no-repeat; background-size: 60px; padding-right: 65px; white-space: nowrap;}
.scrollArea {display: flex; flex-direction: row; gap: 0px; overflow-x: auto; white-space: nowrap; padding-bottom: 50px;}
.scrollAreaV {display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); grid-gap: 20px; margin-bottom: 100px;}
.pofolMainWrap {position: relative; cursor: pointer; transition: transform 0.3s ease-in-out; padding: 30px; width: 100%; background-color: #eee; border-radius: 10px;}
.pofolMainWrap:hover {transform: translateY(10px);}
.pofolMainWrap:hover::before {position: absolute; content: ''; top: -2px; left: calc(50% - 10px); width: 20px; height: 4px; border-radius: 0px; background-color: #4b5097; opacity: 1;}
.pofolMain {width: 100%; line-height: 1;}
.pofolMainText {position: relative; display: block;}
.pofolMainText > p {font-size: 0.9em; color: #4b5097; margin-top: 15px;}
.pofolMainText > p > span {font-size: 0.9em; color: #4b5097; margin-top: 15px; font-weight: 800; padding-top: 3px; margin-right:5px; border-top: 3px solid rgba(75, 80, 151, 1.0);}
.pofolMainText > button {font-size: 0.9em; color: #fff; padding: 3px 15px; border: 0px solid rgba(242, 170, 198, 1.0); border-radius: 0px 50px 50px 50px; background-color: rgba(75, 80, 151, 1.0); margin-left: 10px;  float: left; margin: 10px 0px 0px 0px;}
.iconCategory {position: absolute; bottom: 20px; right: 20px; padding-bottom:3px; color: #f2aac6; border-bottom: 1px solid #f2aac6; font-size: 0.8rem; font-weight: 700;}
.listMore {display: flex; flex-direction: column; gap: 5px; justify-content: center; align-items: center; margin-right: 50px;}
.listMore > div {background-color: #4b5097; width: 1px; height: 20px;}
.listMore > button {width: 100%; padding: 5px 20px 5px 20px; background-color: #fff; border: 1px solid #4b5097; border-radius: 20px; color: #4b5097; font-size: 0.9rem; font-weight: 700; text-align: left;}
.listMore > button:hover {background-color: #4b5097; color: #fff; transform: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}

/* sub */
.contentsSub {width: 100%; height: 100%;}
.contentsSub > div:first-child {padding: 50px;}
.contentsSub > div {padding: 0px 50px; width: 100%;}
.sublist {display: grid; grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)); grid-gap: 0px 50px;}
.sublist > div {padding-bottom: 70px;}
.sublistWrap {position: relative; cursor: pointer; transition: transform 0.3s ease-in-out; width: 400px;}
.sublistWrap:hover {transform: translateY(20px);}
.sublistWrap:hover::before {position: absolute; content: ''; top: -20px; left: 0px; width: 10px; height: 10px; border-radius: 5px; background-color: #f2aac6; opacity: 1;}
.sublistImg {width: 400px; line-height: 1;}
.sublistText {font-size: 0.9em; color: #4b5097; margin-top: 15px;}
.sublistText > span {font-size: 0.9em; color: #4b5097; margin-top: 15px; font-weight: 800; padding-top: 3px; margin-right:5px; border-top: 3px solid rgba(75, 80, 151, 1.0);}
.sublistBtn {font-size: 0.7em; color: #fff; padding: 3px 10px; border: 1px solid #4b5097; border-radius: 0px 50px 50px 50px; background-color: rgba(75, 80, 151, 1.0); margin-left: 10px;  float: left; margin: 10px 0px 0px 0px;}
.contentsT {font-size: 1.5em; font-weight: 800; margin-bottom: 10px; }
.contentsB {width: 100%; padding-bottom: 70px;}
.specTable {width: 100%; border-collapse: collapse; margin-bottom: 30px;}
.specTable > tbody > tr > td {border-bottom: 1px solid rgba(75, 80, 151, 0.3); font-size: 0.8em; padding: 3px 0px; vertical-align: top;}
.specTable > tbody > tr > td:first-child {font-size: 0.8em;}
.specTable > tbody > tr > td:last-child {font-weight: 500;}
.specTable > tbody > tr > td > a {font-size: 1.0em; font-weight: 500;}
.itemCenter {position: relative; display: flex; flex-direction: column; gap: 30px; justify-content: center; margin-bottom: 30px; text-align: center;}
.itemCenter > div {position: relative; display: flex; flex-direction: column; gap: 10px; justify-content: center; margin-top: 30px; center; margin-bottom: 30px; text-align: center; font-weight: 500;}
.itemCenter > div.gapzero {position: relative; display: flex; flex-direction: column; gap: 0px; justify-content: center; margin-bottom: 40px; text-align: center; font-weight: 500;}
.itemCenter > div::after {position: absolute; content: ''; width: 20px; height: 2px; border-radius: 0px; bottom: -46px; left: calc(50% - 10px); background-color: #4b5097;}
.portImages {width: 80%; max-width: 1000px;}
.portImages2 {width: 100%; max-width: 1000px;}
.border1 {border: 1px solid rgba(0, 0, 0, 0.1);}
.portSubP {display: grid; grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)); grid-gap: 10px;}
.portSubP > li {line-height: 0;}
.explanation {font-size: 0.8rem; color: #777; padding: 10px;}
.contentsBtnWrap {width: 100%; display: flex; flex-direction: row; gap: 5px; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.contentsBtnWrap > div {width: 1px; height: 15px; margin: 0px 5px; background-color: #4b5097;}
.contentsBtnWrap > button {padding: 3px 15px; background-color: #4b5097; border: 1px solid #4b5097; border-radius: 5px; color: #fff; font-size: 0.8rem; font-weight: 700;}
.contentsBtnWrap > button:hover {background-color: #fff; color: #4b5097; transform: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.contentsBtnWrap > button.off {opacity: 0.2; cursor: default;}
.contentsBtnWrap > button.off:hover {background-color: #4b5097; color: #fff;}
.iconText {font-size: 0.8rem; font-weight: 700; background-color: #f2aac6; color: #fff; padding: 3px 10px; position: relative; top: -4px; left: 5px; border-radius: 15px;}
.iconYear {font-size: 0.9rem; font-weight: 700; background-color: #f2aac6; color: #fff; padding: 3px 15px; position: relative; top: -10px; left: 0px; border-radius: 15px; margin-bottom: 10px;}

@media (max-width: 1200px){
  .sublist {display: grid; grid-template-columns: repeat(auto-fit, minmax(90%, 1fr)); grid-gap: 0px;}
}
@media (max-width: 1100px){
  #a-left {width: 100%; height: auto; position: fixed; z-index: 100; background-color: rgba(255, 255, 255, 0.9);}
  #a-right {padding: 60px 0px 0px 0px; width: 100%; border: 0px; margin-left: 0;}
  .logo {width: 100%; padding: 10px 50px;}
  .logoV {display: none;}
  .logoH {display: block;}
  .gnb {display: none;}
  .scrollTop {padding: 10px 50px; position: fixed; top: 55px; right: 0; width: 100%; border-left: 0px;}
}
@media (max-width: 800px){
  .portImages {width: 100%;}
  .scrollAreaV {display: grid; grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)); grid-gap: 20px;}
  .portSubP {display: grid; grid-template-columns: repeat(auto-fit, minmax(90%, 1fr)); grid-gap: 10px;}
}
@media (max-width: 500px){
  .logo {width: 100%; padding: 10px 25px;}
  .scrollTop {padding: 10px 25px;}
  .contents > div:first-child {padding: 25px;}
  .contents > div {padding: 0px 25px;}
  .contentsSub > div:first-child {padding: 25px;}
  .contentsSub > div {padding: 0px 25px;}
  .sublistWrap {width: 100%;}
  .sublistImg {width: 100%;}
  .footer {padding: 10px 25px;}
  .iconTOP {bottom: 15px; }
  .sitemap_pop {width: 100vw;}
  .scrollAreaV {display: grid; grid-template-columns: repeat(auto-fit, minmax(90%, 1fr)); grid-gap: 20px;}
}
@media (max-width: 425px){
  .scrollTopT {display: block;}
  .comment {width: 100%; text-align: left; background: url(/asset/images/RnL.svg) top 5px left no-repeat; background-size: 60px; padding-left: 65px; white-space: nowrap;}
}

/* IR */
.ir {overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}