@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2022-07-26
******************************************************** */

/* ========================================================
 * SETTING
======================================================== */

/* fallback ★구글 아이콘 안쓰면 삭제★ */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url("../fonts/Material-Icons.woff2") format('woff2');
}

.material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
}

:root {
   --main-color: #00b0c7;
   --area-wide-width: 1720px;
   --area-box-width: 1560px;
   --area-width: 1400px;
   --area-padding: 30px;
   --header-height: 150px;
   --header-fixed-height: 100px;
   --sub-visual-height: 40rem;
   --sub-menu-height: 69px;
   --full-height: 100vh;
   --transition-custom: all 0.4s ease-in-out;
   --transition-custom2: all 0.8s ease-in-out;
   /* data-scroll */
   --font-family1: "Bai Jamjuree", 'Pretendard', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic", "돋움", Dotum, Arial, sans-serif;
}

html:not(.is-mobile) *::-webkit-scrollbar {
   width: 7px;
   height: 15px;
}

html:not(.is-mobile) *::-webkit-scrollbar-track {
   background-color: #c1c1c1;
}

html:not(.is-mobile) *::-webkit-scrollbar-thumb {
   background-color: var(--main-color);
}

::selection {
   background: var(--main-color);
   color: #fff;
}

::-moz-selection {
   background: var(--main-color);
   color: #fff;
}

html {
   font-size: 10px;
}

body,
table,
th,
td,
button,
select,
input,
textarea {
   font-family: var(--font-family1);
   color: #666;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   text-size-adjust: none;
   word-break: keep-all;
}

body {
   background-color: #fff;
}

p {
   line-height: 1.6em;
}

table,
th,
td {
   word-break: break-word;
}

#wrap {
   overflow: hidden;
   width: 100%;
   min-width: 320px;
   position: relative;
   background-color: #091925;
}

/********** esg 화이트 버전 **********/

#wrap.esg-wrap {
   background-color: #fff;
}

#wrap.esg-wrap .cm-logo-svg .cls-1 {
   fill: #00002b;
}

#wrap.esg-wrap #gnb>ul>li>a {
   color: #00002b;
}

#wrap.esg-wrap #gnb>ul>li.on>a {
   color: var(--main-color);
}

#wrap.esg-wrap #header .nav-open-btn .line {
   background-color: #333 !important;
}

#wrap.esg-wrap .header-lang-list li a {
   font-weight: 700;
   color: rgba(0, 0, 80, 0.4);
   opacity: 1;
}

#wrap.esg-wrap .header-lang-list li.current-lang a {
   color: var(--main-color);
}

#wrap.esg-wrap .header-lang-list li.current-lang a:after {
   background-color: var(--main-color);
}

#wrap.esg-wrap .sitemap-line-btn .line {
   background-color: var(--main-color)
}

#wrap.esg-wrap #visual .visual-sub-txt {
   color: #00002b;
}

#wrap.esg-wrap #topMenu01 .side-menu-inner ul li>a {
   color: rgba(0, 0, 43, 0.4);
}

#wrap.esg-wrap #topMenu01 .side-menu-inner ul li.on>a {
   color: var(--main-color);
}

#wrap.esg-wrap #topMenuM .menu-2dep {
   border: 1px solid #ddd;
   border-radius: 1rem;
}

#wrap.esg-wrap #topMenuM .menu-2dep .menu-location .location-menu-con {
   border: 1px solid #ddd;
   border-top: none;
}

#wrap.esg-wrap #footer {
   background-color: #fff;
}

#wrap.esg-wrap .foot-menu li a {
   color: #000;
}

#wrap.esg-wrap .foot-menu li:last-child a {
   color: var(--main-color);
}

#wrap.esg-wrap .footer-address .footer-address-txt {
   color: #000;
   font-weight: 500;
}

#wrap.esg-wrap .footer-address-list dl dt {
   color: #7f7f7f;
   font-weight: 500;
}

#wrap.esg-wrap .footer-address-list dl dd {
   color: #000;
   font-weight: 500;
}

#wrap.esg-wrap .footer-copyright {
   color: #4c4c4c;
}

/* ========================================================
 * LAYOUT
======================================================== */

/* ****************** 공통클래스 ********************** */

.area {
   max-width: var(--area-width);
   margin: 0px auto;
}

.area-box {
   max-width: var(--area-box-width);
   margin: 0px auto;
}

.area-wide {
   max-width: var(--area-wide-width);
   margin: 0px auto;
}

.full-height {
   height: var(--full-height);
}

/* Fullpage Layout */

.fullpage-html {
   overflow: hidden;
   height: 100%;
}

.fullpage-html #wrap {
   position: static;
}

/* br tag */

.m-br {
   display: none;
}

.display-m {
   display: none;
}

.font-pre {
   font-family: "Pretendard", sans-serif;
}

.font-hat {
   font-family: "Red Hat Display", sans-serif;
}

/* ****************** HEADER ********************** */

#header {
   position: absolute;
   height: var(--header-height);
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9999;
}

.fullpage-html #header {
   position: fixed;
}

#headerInnerWrap {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: var(--header-height);
   z-index: 9999;
   transition: var(--transition-custom);
   transition-property: background-color;
}

#headerInner {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: var(--header-height);
   margin: 0px auto;
}

#header .logo {
   position: relative;
   z-index: 100;
}

#header .logo a {
   display: block;
   height: 85px;
}

#header .logo svg,
#header .logo img {
   height: 100%;
   display: block;
   vertical-align: top;
}

.cm-logo-svg .cls-1 {
   fill: #fff;
   transition: var(--transition-custom)
}

.cm-logo-svg .cls-2 {
   fill: #00b1c7;
}

#header.top-fixed .cm-logo-svg .cls-1 {
   fill: #000;
}

/* -------- Header :: UTIL BOX -------- */

.header-util-box {
   position: relative;
   z-index: 100;
   display: flex;
   align-items: center;
}

/* Header :: 언어선택2 */

.header-lang-list {
   position: relative;
   z-index: 100;
   display: flex;
   align-items: center;
}

.header-lang-list li {
   float: left;
   font-size: 14px;
   letter-spacing: -0.5px;
   font-weight: 400;
   margin-left: 2.7rem;
}

.header-lang-list li:first-child {
   margin-left: 0
}

.header-lang-list li a {
   display: block;
   position: relative;
   opacity: 0.35;
   color: #fff;
   transition: var(--transition-custom);
}

.header-lang-list li a:after {
   position: absolute;
   bottom: -8px;
   left: -2px;
   right: -2px;
   height: 2px;
   background-color: #fff;
   content: "";
   transform: scaleX(0);
   transition: var(--transition-custom);
   transition-property: transform;
   transform-origin: 100% 0;
}

.header-lang-list li.current-lang a,
.header-lang-list li a:hover {
   opacity: 1.0;
}

.header-lang-list li.current-lang a:after,
.header-lang-list li a:hover:after {
   transform: scaleX(1);
   transform-origin: 0 0;
}

/* Header :: 사이트맵버튼 */

.sitemap-line-btn {
   margin-left: 5rem;
   width: 32px;
   height: 32px;
   position: relative;
   box-sizing: border-box;
}

.sitemap-line-btn .line {
   position: absolute;
   display: block;
   top: 16px;
   left: 0;
   width: 12px;
   height: 12px;
   background-color: #fff;
   transition: var(--transition-custom);
}

.sitemap-line-btn .line:nth-child(2) {
   top: 4px;
   left: 20px;
   background-color: var(--main-color);
}

.sitemap-line-btn:hover .line,
.sitemap-line-btn:hover .line:nth-child(2) {
   top: 10px;
   left: 10px;
}

/* active */

.sitemap-line-btn.active {
   position: relative;
   z-index: 100000;
}

.sitemap-line-btn.active .line,
.sitemap-line-btn.active .line:nth-child(2) {
   top: 10px;
   left: 0;
   width: 32px;
   height: 2px;
}

.sitemap-line-btn.active .line:nth-child(1) {
   transform: translateY(6px) rotate(45deg);
}

.sitemap-line-btn.active .line:nth-child(2) {
   transform: translateY(5px) rotate(-45deg);
}

/* -------- Header :: GNB(PC) -------- */

.gnb-overlay-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   visibility: hidden;
   opacity: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 9997;
   transition: var(--transition-custom);
}

/* gnb overlay BG */

.gnb-overlay-bg.open {
   visibility: visible;
   opacity: 1.0;
}

#gnb {
   position: absolute;
   text-align: center;
   top: 0;
   left: 0px;
   width: 100%;
   z-index: 99;
}

#gnb>ul {
   display: inline-block;
}

#gnb>ul>li {
   position: relative;
   float: left;
   word-break: keep-all;
}

#gnb>ul>li>a {
   position: relative;
   z-index: 100;
   display: block;
   line-height: var(--header-height);
   padding: 0 5rem;
   text-align: center;
   color: #fff;
   font-size: 1.8rem;
   letter-spacing: -0.015em;
   font-weight: 500;
   transition: var(--transition-custom);
}

#gnb>ul>li>a:hover,
#gnb>ul>li>a:focus,
#gnb>ul>li.on>a {
   color: var(--main-color);
}

/* GNB :: 2차 전체메뉴 */

#gnbBg {
   overflow: hidden;
   position: absolute;
   left: 0;
   top: 0px;
   width: 100%;
   height: 0;
   background: #fff;
   z-index: 98;
   opacity: 0;
   transition: height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

#gnbBg:after {
   position: absolute;
   top: var(--header-height);
   width: 100%;
   left: 0;
   height: 1px;
   background-color: #ddd;
   content: "";
}

#gnb.total-menu>ul>li .gnb-2dep {
   position: absolute;
   top: var(--header-height);
   left: 0px;
   z-index: 99;
   width: 100%;
   text-align: left;
   border-right: 1px solid #ddd;
   opacity: 0;
   filter: Alpha(opacity=0);
   height: 0;
   transition: all 0.2s 0s;
   transition-delay: 0s;
   visibility: hidden;
}

#gnb.total-menu>ul>li:first-child .gnb-2dep {
   border-left: 1px solid #ddd;
}

#gnb.total-menu>ul>li .gnb-2dep:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0px;
   width: 0;
   left: 50%;
   height: 1px;
   background-color: var(--main-color);
   transition: var(--transition-custom);
}

#gnb.total-menu>ul>li:hover .gnb-2dep:before {
   width: 100%;
   left: 0;
}

#gnb.total-menu>ul>li .gnb-2dep ul {
   padding: 13px 0px;
}

#gnb.total-menu>ul>li .gnb-2dep ul li {
   position: relative;
}

#gnb.total-menu>ul>li .gnb-2dep ul li a {
   display: block;
   padding: 7px 15px;
   color: #333;
   font-size: 14px;
   letter-spacing: -0.5px;
   font-weight: 400;
   line-height: 1.3;
   transition: var(--transition-custom);
}

#gnb.total-menu>ul>li .gnb-2dep ul li a:hover {
   color: var(--main-color);
}

/* GNB :: 2차메뉴 Over (높이변경) */

#gnb.open #gnbBg {
   height: 350px;
   opacity: 1.0;
   filter: Alpha(opacity=100);
}

#gnb.open>ul>li .gnb-2dep {
   height: 250px;
   opacity: 1.0;
   filter: Alpha(opacity=100);
   visibility: visible;
   transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
}

/* GNB :: 2차 각각메뉴 */

#gnb.each-menu>ul>li .gnb-2dep {
   /* display:none; */
   position: absolute;
   top: calc(var(--header-height) - 20px);
   left: 50%;
   margin-left: -10rem;
   z-index: 99;
   width: 20rem;
   text-align: left;
   visibility: hidden;
   opacity: 0;
   filter: Alpha(opacity=0);
   transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
}

#gnb.each-menu>ul>li .gnb-2dep:before {
   content: "";
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   height: 0;
   background-color: var(--main-color);
   transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
}

#gnb.each-menu>ul>li .gnb-2dep ul {
   padding: 15px 0px;
}

#gnb.each-menu>ul>li .gnb-2dep ul li {
   position: relative;
   padding: 8px 10px;
   opacity: 0;
   transition: all 0s 0s;
}

#gnb.each-menu>ul>li .gnb-2dep ul li a {
   display: block;
   color: #fff;
   font-size: 14px;
   font-weight: 400;
   text-align: center;
   line-height: 1.4;
   opacity: 0.9;
}

#gnb.each-menu>ul>li .gnb-2dep ul li a:hover {
   opacity: 1.0;
}

/* over했을때 */

#gnb.each-menu>ul>li .gnb-2dep.open {
   visibility: visible;
   opacity: 1.0;
}

#gnb.each-menu>ul>li .gnb-2dep.open:before {
   height: 100%;
}

#gnb>ul>li .gnb-2dep.open ul li {
   opacity: 1.0;
   transition: var(--transition-custom2);
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(1) {
   transition-delay: 0.1s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(2) {
   transition-delay: 0.2s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(3) {
   transition-delay: 0.3s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(4) {
   transition-delay: 0.4s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(5) {
   transition-delay: 0.5s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(6) {
   transition-delay: 0.6s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(7) {
   transition-delay: 0.7s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(8) {
   transition-delay: 0.8s;
}

#gnb>ul>li .gnb-2dep.open ul li:nth-child(9) {
   transition-delay: 0.9s;
}

/* -------- Header :: GNB(Mobile) -------- */

.nav-open-btn {
   display: none;
}

#gnbM {
   display: none
}

/* ****************** FOOTER ********************** */

/* -------- FOOTER :: 레이아웃 -------- */

#footer {
   background-color: #091925;
   /* background-color:#16222c; */
}

/* Footer :: TOP버튼 */

.to-top-btn {
   position: fixed;
   bottom: -100px;
   right: 15px;
   display: block;
   width: 5rem;
   height: 5rem;
   font-size: 2rem;
   line-height: 1.3;
   letter-spacing: -0.015em;
   color: #fff;
   background-color: #0b212d;
   text-align: center;
   border-radius: 1.5rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: var(--transition-custom);
   z-index: 999;
}

.to-top-btn:before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 1.5rem;
   content: '';
   background: url("../images/main/online_quick_cover.png") center/auto no-repeat;
   opacity: 1;
   transition: var(--transition-custom);
   transition-property: opacity;
}

.to-top-btn i {
   display: inline-block;
   font-size: 16px;
   line-height: 46px;
   transition: var(--transition-custom);
}

.to-top-btn.bottom-fixed {
   bottom: 15px;
   opacity: 1.0;
   background: var(--main-color);
   box-shadow: 0 0 6.2rem 1rem rgba(0, 176, 199, 0.3);
}

.to-top-btn.bottom-fixed:before {
   opacity: 0;
}

.to-top-btn:hover i {
   transform: translateY(-3px);
   color: #fff;
}

#fullpage .to-top-btn {
   display: none;
}

/* -------- FOOTER :: 상단 -------- */

#footerTop {
   padding: 8.5rem 0 0;
}

#footerTop .area-box {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
}

/* Footer :: 푸터로고 */

.foot-logo {

   display: block;

}

.foot-logo svg {
   height: 100%;
}

/* Footer :: 푸터메뉴 */

.foot-menu {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.foot-menu li {
   padding-left: 5.5rem;
}

.foot-menu li:first-child {
   padding-left: 0
}

.foot-menu li a {
   position: relative;
   font-size: 1.8rem;
   line-height: 3.5rem;
   letter-spacing: -0.025em;
   font-weight: 500;
   color: #fff;
   display: block;
}

.foot-menu li:last-child a {
   color: var(--main-color);
   font-weight: 500;
}

.foot-menu li a:after {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 0.2rem;
   background-color: #fff;
   content: "";
   transform: scaleX(0);
   transition: var(--transition-custom);
   transition-property: transform;
   transform-origin: 100% 0;
}

.foot-menu li:last-child a:after {
   background-color: var(--main-color);
}

.foot-menu li a:hover:after {
   transform: scaleX(1);
   transform-origin: 0 0;
}

/* -------- FOOTER :: 하단 -------- */

#footerBottom {
   padding: 5.5rem 0 8rem;
}

#footerBottom .area-box {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
}

/* Footer :: 정보 */

.footer-address {}

.footer-address .footer-address-txt {
   font-size: 1.7rem;
   line-height: 1.5;
   letter-spacing: -0.025em;
   color: #fff;
}

.footer-address a {
   color: inherit
}

/* Footer :: 정보 style02 */

.footer-address-info-box {
   margin-top: 2.5rem;
}

.footer-address-list {
   display: flex;
   flex-wrap: wrap;
}

.footer-address-list dl {
   display: flex;
   flex-wrap: wrap;
   margin-left: 3.5rem;
}

.footer-address-list dl:first-child {
   margin-left: 0
}

.footer-address-list dl dt,
.footer-address-list dl dd {
   font-size: 1.7rem;
   line-height: 1.5;
   letter-spacing: -0.025em;
   color: #fff;
}

.footer-address-list dl dt {
   margin-right: 2rem;
   color: rgba(255, 255, 255, 0.5);
}

.footer-address-list a {
   color: inherit
}

/* Footer :: Copyright */

.footer-copyright {
   font-size: 1.7rem;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.7);
}

/* ****************** SUB LAYOUT ********************** */

/*  SUB LAYOUT :: 비주얼 */

#visual {
   position: relative;
   width: 100%;
   height: var(--sub-visual-height);
}

.visual-img-con {
   position: relative;
   top: var(--sub-menu-height);
   left: 0px;
   width: 100%;
   height: 48rem;
   overflow: hidden;
}

.visual-img-inner {
   width: 100%;
   height: 100%;
   background-size: cover !important;
   transform: scale(1.1, 1.1);
   transition: transform 5s linear;
}

#visual .visual-txt-con {
   position: relative;
   z-index: 1;
   text-align: left;
   display: table;
   width: 100%;
   height: 100%;
   letter-spacing: -0.5px;
   color: #fff;
   box-sizing: border-box;
}

#visual .visual-txt-container {
   position: relative;
   width: 100%;
   padding-top: 16.5rem;
   box-sizing: border-box;
}

/* @media all and (min-width: 801px) {
	#visual.sub-visual-applications .visual-txt-container {padding-top: 22.5rem;}
}

@media all and (max-width: 800px) {
	#visual.sub-visual-applications .visual-txt-container {height: 100%; box-sizing: border-box;}
} */

#visual .visual-tit,
#visual .visual-sub-txt,
#visual .location {
   opacity: 0;
   transform: translateY(30px);
   transition: var(--transition-custom2);
   transition-property: transform, opacity;
}

#visual .visual-tit {
   font-weight: 700;
   font-size: 2.2rem;
   letter-spacing: -0.025em;
   color: var(--main-color);
   transition-delay: 0.3s;
}

#visual .visual-sub-txt {
   font-size: 6.2rem;
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.5em;
   padding-top: 0.7rem;
   transition-delay: 0.5s;
   color: #fff;
}

#visual .location {
   transition-delay: 0.5s;
}

/* SUB LAYOUT :: 상단효과 active */

#middleArea.active .visual-img-inner {
   transform: scale(1.0, 1.0) rotate(0.002deg);
}

#visual.active .visual-tit,
#visual.active .visual-sub-txt,
#visual.active .location {
   opacity: 1.0;
   transform: translateY(0px);
}

/* SUB LAYOUT :: 위치정보(location) */

.location {
   overflow: hidden;
   padding-top: 18px;
}

.location li {
   display: inline-block;
   vertical-align: middle;
   color: #a7a7a7;
   color: rgba(108, 108, 108, 0.63);
   font-size: 13px;
   letter-spacing: -0.5px;
}

.location li a {
   color: inherit;
}

.location li i {
   font-size: 18px;
   margin-top: -2px;
}

.location li:before {
   font-family: 'xeicon';
   display: inline-block;
   content: "\e93f";
   position: relative;
   top: -1px;
   vertical-align: middle;
   margin: 0px 10px 0 8px;
   color: #222;
   font-size: 12px;
   opacity: 0.5;
}

.location li:first-child:before {
   display: none;
}

.location li:last-child {
   color: #333;
}

/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */

.sub-page-controls-btn {
   position: absolute;
   top: 50%;
   height: 20px;
   margin-top: -10px;
   transition: var(--transition-custom);
}

.sub-page-controls-btn.sub-prev-page-btn {
   left: 0;
}

.sub-page-controls-btn.sub-next-page-btn {
   right: 0;
}

.sub-page-controls-btn .sub-page-name {
   display: inline-block;
   vertical-align: middle;
   color: #fff;
   font-size: 14px;
   font-weight: 400;
}

.sub-page-controls-btn span {
   display: inline-block;
   color: #fff;
   vertical-align: middle;
}

.sub-page-controls-btn span i {
   margin-top: -2px;
   font-size: 30px;
}

.sub-page-controls-btn.sub-prev-page-btn:hover {
   margin-left: -10px
}

.sub-page-controls-btn.sub-next-page-btn:hover {
   margin-right: -10px
}

/*  SUB LAYOUT :: 서브메뉴(스타일1) */

#topMenu01 {
   position: absolute;
   width: 100%;
   height: var(--sub-menu-height);
}

/* (+1 border height)*/

#topMenu01 .side-menu-inner {
   text-align: center;
   width: 100%;
   height: var(--sub-menu-height);
}

#topMenu01 .side-menu-inner>.area-box {
   position: relative;
}

#topMenu01 .side-menu-inner ul {
   position: relative;
   right: 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   margin-right: -2rem;
}

#topMenu01 .side-menu-inner ul li {
   float: left;
   margin-right: 2.7rem;
   /*  max-width:200px; */
}

/* max-width 자유롭게 수정 */

#topMenu01 .side-menu-inner ul li:last-child {
   margin-right: 0;
}

#topMenu01 .side-menu-inner ul li>a {
   display: block;
   display: table;
   position: relative;
   width: 100%;
   height: var(--sub-menu-height);
   line-height: 1.2;
   color: #435665;
   font-size: 2.1rem;
   letter-spacing: -0.025em;
   font-weight: 600;
   word-break: keep-all;
   transition: var(--transition-custom);
}

#topMenu01 .side-menu-inner ul li>a:before {
   position: absolute;
   bottom: 0px;
   left: 50%;
   width: 0;
   height: 2px;
   background-color: var(--main-color);
   content: "";
   transition: var(--transition-custom);
}

#topMenu01 .side-menu-inner ul li>a>span {
   display: table-cell;
   vertical-align: middle;
   padding: 0 2rem;
}

#topMenu01 .side-menu-inner ul li>a:hover,
#topMenu01 .side-menu-inner ul li.on>a {
   color: var(--main-color);
}

#topMenu01 .side-menu-inner ul li>a:hover:before,
#topMenu01 .side-menu-inner ul li.on>a:before {
   width: 100%;
   margin-left: -50%;
}

/* SUB LAYOUT :: 서브메뉴(스타일2) */

#topMenu02 {
   position: relative;
   width: 100%;
   height: calc(var(--sub-menu-height) + 1px);
}

/* (+1 border height)*/

#topMenu02 .side-menu-inner {
   text-align: center;
   width: 100%;
   height: var(--sub-menu-height);
   border-bottom: 1px solid #ddd;
   background-color: #fff;
}

#topMenu02 .side-menu-inner ul {
   display: flex;
   align-items: center;
   justify-content: center;
}

#topMenu02 .side-menu-inner ul li {
   float: left;
   width: 16.66%;
   border-right: 1px solid #ddd;
   box-sizing: border-box;
   transition: var(--transition-custom);
}

#topMenu02 .side-menu-inner ul li:first-child {
   border-left: 1px solid #ddd;
}

#topMenu02 .side-menu-inner ul li>a {
   display: block;
   display: table;
   position: relative;
   width: 100%;
   height: var(--sub-menu-height);
   line-height: 1.2;
   color: #333;
   font-size: 17px;
   letter-spacing: -0.5px;
   font-weight: 400;
   word-break: keep-all;
   transition: var(--transition-custom);
}

#topMenu02 .side-menu-inner ul li>a:before {
   position: absolute;
   bottom: 0px;
   left: 50%;
   width: 0;
   height: 2px;
   background-color: var(--main-color);
   content: "";
   transition: var(--transition-custom);
}

#topMenu02 .side-menu-inner ul li>a>span {
   display: table-cell;
   vertical-align: middle;
   padding: 0 15px;
}

#topMenu02 .side-menu-inner ul li.on {
   background-color: #f2f2f2;
}

#topMenu02 .side-menu-inner ul li>a:hover:before,
#topMenu02 .side-menu-inner ul li.on>a:before {
   width: 100%;
   width: calc(100% + 1px);
   margin-left: -50%;
}

#topMenu02 .side-menu-inner ul li:hover>a,
#topMenu02 .side-menu-inner ul li.on>a {
   color: var(--main-color);
}

/* SUB LAYOUT :: 서브메뉴(스타일3) */

#topMenu03 {
   position: relative;
   width: 100%;
   height: calc(var(--sub-menu-height) + 1px);
}

/* (+1 border height)*/

#topMenu03 .side-menu-inner {
   text-align: center;
   width: 100%;
   height: var(--sub-menu-height);
   border-bottom: 1px solid #ddd;
   background-color: #fff;
}

#topMenu03 .side-menu-inner ul {
   display: flex;
   align-items: center;
   justify-content: center;
}

#topMenu03 .side-menu-inner ul li {
   float: left;
   width: 25%;
   vertical-align: middle;
   border-right: 1px solid #ddd;
   transition: var(--transition-custom);
}

#topMenu03 .side-menu-inner ul li:first-child {
   border-left: 1px solid #ddd;
   margin-left: 0
}

#topMenu03 .side-menu-inner ul li>a {
   display: block;
   display: table;
   position: relative;
   width: 100%;
   height: var(--sub-menu-height);
   line-height: 1.2;
   color: #333;
   font-size: 17px;
   letter-spacing: -0.5px;
   font-weight: 400;
   word-break: keep-all;
   transition: var(--transition-custom);
}

#topMenu03 .side-menu-inner ul li>a:before {
   position: absolute;
   bottom: 0px;
   left: 50%;
   width: 0;
   height: 2px;
   background-color: var(--main-color);
   content: "";
   transition: var(--transition-custom);
}

#topMenu03 .side-menu-inner ul li>a>span {
   display: table-cell;
   vertical-align: middle;
   padding: 0 15px;
}

#topMenu03 .side-menu-inner ul li.on {
   background-color: #f2f2f2;
}

#topMenu03 .side-menu-inner ul li>a:hover:before,
#topMenu03 .side-menu-inner ul li.on>a:before {
   width: 100%;
   margin-left: -50%;
}

#topMenu03 .side-menu-inner ul li:hover>a,
#topMenu03 .side-menu-inner ul li.on>a {
   color: var(--main-color);
}

/*  SUB LAYOUT :: 서브메뉴(스타일3) */

#topMenu04 {
   position: relative;
   width: 100%;
   height: calc(var(--sub-menu-height) + 1px);
}

/* (+1 border height)*/

#topMenu04 .side-menu-inner {
   width: 100%;
   height: var(--sub-menu-height);
   background-color: transparent;
}

#topMenu04 .location-to-home-btn {
   float: left;
   width: var(--sub-menu-height);
   height: var(--sub-menu-height);
   background-color: #fff;
   text-align: center;
   border-right: 1px solid #ddd;
   border-left: 1px solid #ddd;
}

#topMenu04 .location-to-home-btn i {
   color: var(--main-color);
   font-size: 24px;
   line-height: var(--sub-menu-height);
}

#topMenu04 .menu-location {
   position: relative;
   float: left;
   width: 260px;
}

#topMenu04 .menu-location>.current-lang-location {
   position: relative;
   display: block;
   width: 100%;
   height: var(--sub-menu-height);
   padding: 0 35px 0 20px;
   border-right: 1px solid #ddd;
   text-align: left
}

#topMenu04 .menu-location>.current-lang-location span {
   display: block;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: var(--sub-menu-height);
   color: #222;
   font-weight: 400;
   font-size: 18px;
   letter-spacing: -0.5px;
}

#topMenu04 .menu-location>.current-lang-location .arrow {
   position: absolute;
   top: 50%;
   right: 10px;
   width: 20px;
   height: 20px;
   margin-top: -10px;
   font-size: 20px;
}

#topMenu04 .menu-location.open>.current-lang-location .arrow {
   transform: rotate(-180deg);
   margin-top: -10px;
}

#topMenu04 .menu-location .location-menu-con {
   display: none;
   position: absolute;
   top: 100%;
   left: -1px;
   right: 0px;
   border: 1px solid #ddd;
   border-top: 0;
   background-color: #fff;
   z-index: 11;
   padding-bottom: 10px
}

#topMenu04 .menu-location .location-menu-con li a {
   display: block;
   padding: 10px 20px;
   font-size: 15px;
   word-break: keep-all;
   line-height: 1.5;
}

#topMenu04 .menu-location .location-menu-con li.on {
   position: relative;
}

#topMenu04 .menu-location .location-menu-con li.on a {
   color: var(--main-color);
   font-weight: 500;
}

/* 선택된메뉴앞에 bullet 넣을때 */

/* #topMenu04 .menu-location .location-menu-con li.on a{padding-left:25px;}
#topMenu04 .menu-location .location-menu-con li.on a:before{content:""; position:absolute; top:50%; left:10px; width:7px; height:3px; margin-top:-1px; background-color:var(--main-color)} */

/* // */

/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */

/* @media all and (min-width:1025px){
	.fixed-sub-menu.top-fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;}
} */

/* SUB LAYOUT :: 모바일메뉴(공통)  */

#topMenuM {
   display: none;
}

/*  SUB LAYOUT :: 컨텐츠 레이아웃 */

#content:not(.wide) {
   padding: 175px 0 100px 0;
   margin-top: var(--sub-menu-height) !important;
}

#content.wide {
   padding: 100px 0 0 0;
   margin-top: var(--sub-menu-height) !important;
}

/*  SUB LAYOUT :: 상단정보 (공통) */

#contentInfoCon {
   position: relative;
   margin: 0 auto 50px;
   text-align: center;
}

#contentInfoCon .content-tit {
   color: #fff;
   font-size: 5.5rem;
   line-height: 1.3em;
   font-weight: 700;
   letter-spacing: -0.035em;
}

#contentInfoCon .content-sub-tit {
   color: #888;
   font-weight: 300;
   margin-top: 30px;
   font-size: 16px;
   letter-spacing: -0.8px;
   word-break: keep-all;
}

/*  SUB LAYOUT :: 상단정보(타이틀+location) */

#contentInfoCon.content-title-location {
   text-align: left;
}

#contentInfoCon.content-title-location .content-tit {
   float: left;
}

#contentInfoCon.content-title-location .content-tit:after {
   display: none;
}

#contentInfoCon.content-title-location .location {
   float: right;
}

/********** esg 상단정보 **********/

#wrap.esg-wrap .content-tit {
   color: #000;
}

/* ****************** MODAL LAYERPOPUP ********************** */

/* modal layer */

.modal-fixed-pop-wrapper {
   display: none;
   overflow-y: scroll;
   overflow-x: hidden;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: #000;
   background: rgba(0, 0, 0, 0.8);
}

.modal-fixed-pop-inner {
   position: absolute;
   display: table;
   width: 100%;
   height: 100%;
   text-align: center;
}

.modal-inner-box {
   position: relative;
   display: table-cell;
   vertical-align: middle;
}

.modal-loading {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -25px 0 0 -25px;
   z-index: 10000;
}

.modal-inner-content {
   text-align: left;
}

.loading {
   display: inline-block;
   width: 50px;
   height: 50px;
   border: 8px solid rgba(255, 255, 255, .3);
   border-radius: 50%;
   border-top-color: #fff;
   animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

@-webkit-keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

/* modal layer content */

.footer-modal-content {
   position: relative;
   width: 96%;
   max-width: 1000px;
   margin: 20px auto;
}

.footer-modal-content h1 {
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -0.5px;
   text-align: center;
   padding: 0 50px 20px;
   color: #fff;
}

.modal-close-btn {
   position: absolute;
   top: -6px;
   right: -6px;
   color: #fff;
}

.modal-close-btn i {
   font-size: 38px;
}

.modal-close-btn i:hover {
   color: #fff
}

.footer-inner-box {
   padding: 30px;
   background-color: #fff;
}

.footer-inner {
   padding: 20px;
   height: 400px;
   overflow-y: auto;
   overflow-x: hidden;
   border: 1px solid #ddd;
}

/* ****************** 임시 시안 css ********************** */

.cm-sian-img {
   position: relative;
   left: 50%;
   margin-left: -960px;
}

@media all and (max-width:1280px) {
   .cm-sian-img {
      position: static;
      margin-left: 0;
      width: 100%;
      height: auto;
   }
}