:root{
    --bgGray2:#F6F6F6;
    --default-section-tit-size: 36px;
    --default-content-tit-size: 32px;
    /* --default-mo-content-tit-size: 26px; */
    --default-item-tit-size: 20px;
    --default-font5-size: 16px;
    --default-font6-size: 14px;
}

select {
    -webkit-appearance:none; /* 크롬 화살표 없애기 */
    -moz-appearance:none; /* 파이어폭스 화살표 없애기 */
    appearance:none; /* 화살표 없애기 */
}

/* layout */
a,button {
    background: none;
    transition-duration: var(--duration);
}

body {
    background: #fff;
    overflow: visible;
}
body.index.fp-responsive #header {position: fixed;}
body.index,
body.index main {
    overflow-x:hidden !important;
    scroll-behavior:smooth;
    width: 100vw;
    position: relative;
}
body.fixed {position: fixed; overflow: hidden;}

.add.on .splitting .char, .sub_visual .splitting .char {
    animation: wave-up .8s cubic-bezier(.5, 0, .5, 1) both;
    animation-delay: calc(80ms* var(--char-index) + 80ms);
}
@keyframes wave-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
}
.splitting .word {
    overflow: hidden;
}


/* popup */
.popup.visual {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    display: none;
}
.popup.visual img, .popup .popup-box, .popup .popup-box img {max-width: 100%; height: auto !important;}
.popup.visual .con {
    position: relative;
    z-index: 1;
    background: #fff;
    max-width: 500px;
    width: 100%;
    /* height: 500px; */
    margin: 0 auto;
    /* border-radius: 15px 15px 0 0; */
    border-radius: 15px;
}
.popup.visual .con .swiper {border-radius: 15px 15px 0 0;}
.popup.visual .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
/* .popup.visual .swiperarea { height: 500px; } */
.popup.visual .swiperarea .popupswiper {
    height: 100%;
}
.popup.visual .swiperarea .swiper-button-prev {
    left: -50px;
}
.popup.visual .swiperarea .swiper-button-next {
    right: -50px;
}
.popup.visual .swiperarea .swiper-button-prev,
.popup.visual .swiperarea .swiper-button-next {
    top:calc(50% + 30px / 2);
}
.popup.visual .closebox {
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 62px;
}
.popup.visual .closebox>button {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}
.popup.visual .closebox .btn_close_today {
    background: #5C6770;
}
.popup.visual .closebox .btn_close {
    background: var(--red);
}

.popup-bottom {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.popup-bottom a {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    padding: 15px;
    color: #fff;
}
.popup-btn-not-open {
    background: var(--red);
    color: #fff;
}
.popup-btn-close {
    background: #5C6770;
    color: #fff;
}

/* #footer */
#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    /* padding: 4% 0 110px; */
    padding: 3.2% 0 3.2%;
}
#footer * {
    color: #fff;
    font-weight: 300;
}
#footer .info img { }
#footer .inner .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--darkGray3);
}
#footer .inner .top .link * {
    font-size: 20px;
}
#footer .inner .top .link {
    display: block;
    justify-content: center;
    align-items: center;
}
#footer .inner .top .link a {
    display: inline-block;
    color: #fff;
}
#footer .inner .top .link span {
    color: var(--darkGray3);
    margin: 0 12px;
}
#footer .info h1 {
    margin-bottom: 20px;
}
#footer address {
    line-height: 2;
    margin-top: 20px;
}
#footer address * {
    display: inline-block;
    font-size: var(--default-font2-size);
}
#footer address b {
    color: var(--gray1);
    padding-right: 5px;
    font-weight: bold;
}
#footer address span {
    color: var(--darkGray3);
    margin: 0 12px;
}
.color-other {
    opacity: 0.5;
}
.btn_biznum {
    /* width: 127px;
    height: 30px; */
    border: 1px solid var(--darkGray3);
    text-align: center;
    font-size: 16px !important;
    border-radius: 50px;
    margin-left: 5px;
    color: var(--gray2);
    position: relative;
    top: -2px;
    padding: 5px 15px;
}
.btn_relatedsites:hover,
    /* .btn_relatedsites:focus, */
.btn_relatedsites.on,
.btn_biznum:hover, .btn_biznum:focus {
    background: var(--darkGray2);
}
#footer .copy {
    margin-top: 0;
    font-size: 14px;
    color: var(--darkGray4);
}
#footer .btm {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.btn_relatedsites {
    position: relative;
}
.btn_relatedsites img{
    transition: 0.3s ease-out;
}
.btn_relatedsites.on img{
    transform: rotate(180deg);
}
.btn_relatedsites.slide_down {
    border-radius: 5px;
}
.relatedsitesMap-slide {
    max-height: 0;
    overflow: hidden;
    background: var(--darkGray2);
    position: absolute;
    top: 118%;
    left: -1px;
    width: 101%;
    z-index: 15;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
    transform: translateY(0);
    opacity: 0;
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--darkGray3);
}
.relatedsitesMap-slide.active  {
    max-height: 500px;
    opacity: 1;
    transform: translateY(-10px);
}
.relatedsitesMap-slide.active  .relatedsitesMap-slide{
    padding: 15px;
    border: 1px solid var(--darkGray3);
}
.relatedsitesMap-slide .inner {
    display: flex;
    flex-direction: column;
    text-align: left;
    height: 155px;
    overflow: auto;
    background: #313435;
}
/* 전체 스크롤바 너비 */
.relatedsitesMap-slide .inner::-webkit-scrollbar {
    width: 10px;
}
/* 스크롤바 트랙 (배경) */
.relatedsitesMap-slide .inner::-webkit-scrollbar-track {
    background: #313435;
    border-radius: 5px;
}
/* 스크롤바 핸들 (움직이는 부분) */
.relatedsitesMap-slide .inner::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
/* 스크롤바 핸들에 마우스를 올렸을 때 */
.relatedsitesMap-slide .inner::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.relatedsitesMap-slide .inner a{
    line-height: 36px;
    font-size: 15px;
    border-bottom: 1px solid #515253;
    padding: 1px 20px;
}
.relatedsitesMap-slide .inner a:last-child{
    border: none;
}
.relatedsitesMap-slide .inner a:hover {
    background: var(--darkGray4);
}
.relatedsitesMap {
    background: var(--darkGray1);
    padding: 70px 0;
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    z-index: 10;
    height: 61.5%;
    display: none;
    overflow: auto;
}
body.index .relatedsitesMap {
    /* top: 0;
    height: 52.5vh; */
    height: auto;
    top: unset;
    bottom: 0;
}
.relatedsitesMap .infotext-mobile {
    display: none;
}
.relatedsitesMap * {
    color: #fff;
}
.relatedsitesMap .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 45px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.relatedsitesMap .top .s-title, .relatedsitesMap .top h2 {
    font-size: 24px;
    font-weight: bold;
}
.relatedsitesMap .btm {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 45px;
}
.relatedsitesMap .btm ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.relatedsitesMap .btm ul li {
    width: 100%;
    margin-right: .5em;
}
.relatedsitesMap .btm ul li strong, .relatedsitesMap .btm ul li h3 {
    display: block;
    /* height: 24px; */
    height: 48px;
    font-size: 20px;
    font-weight: bold;
    /* margin-bottom: 25px; */
}
.relatedsitesMap .btm ul li a {
    font-size: 18px;
    color: var(--gray2);
    display: block;
    margin-top: 5px;
}

/* section */
#sections {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;  /* 100% main sections + 200% for horizontal sections */
    transition-duration: var(--duration);
}
.section {
    width: 100vw;
    min-height: 100vh;
    /* background: red; */
    position: relative;
}

@media screen and (max-width:320px){
    body.index, body.index main, #sections, .section {width: 100%;}
}
#sections .fp-tableCell {padding-top: 80px;}
.section.fp-auto-height {min-height: auto;}



.textAniOn {
    position: relative;
    animation:textAni 1s ease-in-out;
}
@keyframes textAni {
    0% {
        top:200px;
        opacity:0;
    }
    100% {
        top:0;
        opacity:1;
    }
}
#goTop {
    width:60px;
    height:60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:#000 url(../img/gotop.svg) 50% /20px no-repeat;
    position: fixed;
    bottom:20px;
    right: 30px;
    z-index: 10;
}
.maxWidthWrap {
    max-width:1540px;
    padding: 0 40px 0 20px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#video-background {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}
.section1 {
    display: flex;
    justify-content: center;
    align-items: center;
}
#section_1::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    background: rgba(0, 0, 0, 0.12);
}
.section1 .s-title, .section1 h2 {
    font-size: 70px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin-bottom: 70px;
}

main#main .section1 .s-title span{
    font-size: 32px;
    font-weight: 500;
    display: block;
    margin-bottom: 15px;
}

.section2.biz1 .fp-tableCell {
    background:url(../img/biz_bg.png) no-repeat;
    background-size:cover;
}


.section2.biz1 .box.title .s-title b {color: #fff}
.section2.biz1 .category{
    width: 100%;
    max-width: 1500px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}
.section2.biz1 .category .box.biz1 {
    position: relative;
    text-align: center;
    z-index: 1; 
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    align-content: center;
    border-radius: 15px;
    padding: 1em;
    display: grid;
    justify-content: center;
    align-items: center;
} 

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.section2.biz1 .category .box svg {
    width: 105px;
    height: 105px;
    margin: auto;
}

.section2.biz1 .category .box:hover .svg-icon1 path,
.section2.biz1 .category .box:hover .svg-icon2 path,
.section2.biz1 .category .box:hover .svg-icon2 polyline,
.section2.biz1 .category .box:hover .svg-icon3 path,
.section2.biz1 .category .box:hover .svg-icon3 polyline{
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw 2.5s linear infinite
}
.section2.biz1 .category .box:hover .svg-icon1 .hover,
.section2.biz1 .category .box:hover .svg-icon2 .hover,
.section2.biz1 .category .box:hover .svg-icon4 .hover,
.section2.biz1 .category .box:hover .svg-icon5 .hover,
.section2.biz1 .category .box:hover .svg-icon6 .hover{
    stroke:#ED1C24;
}

.section2.biz1 .category .box:hover .svg-icon3 .hover{
    fill:#ED1C24
}
.section2.biz1 .category .box:hover .svg-icon4 path{
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}
.section2.biz1 .category .box:hover .svg-icon4 path {
    animation: draw 1.5s linear forwards;
}
.section2.biz1 .category .box:hover .svg-icon5 path,
.section2.biz1 .category .box:hover .svg-icon5 line,
.section2.biz1 .category .box:hover .svg-icon5 polyline {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: draw 2.5s linear infinite
}
.section2.biz1 .category .box .svg-icon6{
    top: 10px;
    left: 5px;
    position: relative;
}
.section2.biz1 .category .box:hover .svg-icon6 path,
.section2.biz1 .category .box:hover .svg-icon6 polyline{
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: draw 2.2s linear infinite
}
.section2.biz1 .category .box b {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    display: block;
    margin-top: 17px;
}

.section2.biz1 .box.title .s-title {
    margin-bottom:0
}
.section2.biz1 .box1.title .s-title {
    margin-bottom:0
}
.section2.biz1 .box.title .s-title * {
    font-size: 54px;
    font-weight: bold;
    line-height: 1.2;
    display: inline-block;
    margin-top:0
}
.section2.biz1 .box1.title .s-title * {
    font-size: 54px;
    font-weight: bold;
    line-height: 1.2;
    display: inline-block;
    margin-top:0
}
.section2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.section2.biz1 .box.title {
    text-align: left;
    order: 0;
}
.section2 .inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}
.section2 .box {
    max-width: 300px;
    width: 100%;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}
.section2 .box.type1 {
    position: relative;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.section2 .box,
.section2 .box.type1 {
    opacity: 0;
}
.section2 .box.ktis>img,
.section2 .box.type2>img,
.section2 .box.type1>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.section2 .box.type1 .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.section2 .box.type1 .title span {
    font-size: var(--default-contents-tit-size);
    font-weight: bold;
    margin-right: 15px;
    color: #fff;
    z-index: 1;
}
.section2 .box.type1 .title img {
    width: 10px;
    z-index: 1;
}
.section2 .box.type1 .hideItem .subtext {
    position: relative;
    color: #fff;
    font-size: var(--default-font1-size);
    line-height: 1.4;
    letter-spacing: -0.1px;
}
.section2 .box.type1 .hideItem {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    opacity: 0;
    position: absolute;
}
.section2 .box.type1.active .hideItem,
.section2 .box.type1:hover .hideItem {
    transition-duration: var(--duration);
    display: flex;
    opacity: 1;
    animation:showFade 0.5s ease-in-out;
    position: static;
}
.section2 .box.type1.active>.title,
.section2 .box.type1:hover>.title {
    display: none;
}
.section2 .box.type1.active,
.section2 .box.type1:hover {
    justify-content: space-between;
}
@keyframes showFade{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.section2 .box.type1 .hideItem:before {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 0;
}
.section2 .box.type1.active>img,
.section2 .box.type1:hover>img {
    filter: blur(2px);
}

.section2 .box.type2,
.section2 .box.title {
    width: calc(100% - 715px);
    max-width: 100%;
}
.section2 .box.title {
    text-align: right;
}
.section2 .box.title .mark {
    color: var(--red);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}
.section2 .box.title .s-title {
    margin-bottom: 35px;
}
.section2 .box.title .s-title * {
    font-size: 54px;
    font-weight: bold;
    line-height: 1.2;
}
.section2 .box1.title .s-title {
    margin-bottom: 35px;
}
.section2 .box1.title .s-title * {
    font-size: 54px;
    font-weight: bold;
    line-height: 1.2;
}
.section2 .box.title .s-title b {
    color: var(--gray1);
}
.section2 .box.title .s-title strong {
    color: var(--red);
}
.section2 .box1.title .s-title b {
    color: var(--gray1);
}
.section2 .box1.title .s-title strong {
    color: var(--red);
}
.section2 .box{
    transition-duration: .4s;
}
.section2 .box.title * {
    /* top: 100%; */
    position: relative;
    transition-duration: .8s;
}
.section2 .box.title {
    padding-top: 50px;
    opacity: 1;
}
.section2.biz .box.title {
    padding-left: 70px;
}
.section2 .box.title .mark.on {
    top: 0;
    opacity: 1;
}
.section2 .box.title .s-title.on {
    top: 0;
    opacity: 1;
}
.section2 .box1.title .s-title.on {
    top: 0;
    opacity: 1;
}
.section2 .box.type1.on {
    opacity: 1;
}
.section2 .box.type2.on {
    opacity: 1;
}
.section2 .box.ktis.on {
    opacity: 1;
}

.section3 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ESG_bg {
    position: absolute;
    right: -200px;
    top: 5%;
    z-index: -1;
    width: 55%;
    display: none;
}
.section3 .mark {
    color: var(--red);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}
.section3 .s-title, .section3 h2 {
    position: relative;
    text-align: center;
    margin-bottom: 65px;
}
.section3 .mark,
.section3 .s-title, .section3 h2 {
    transition-duration: 0.8s;
}
.section3 .mark.on {
    top: 0;
    opacity: 1;
}
.section3 .s-title.on, .section3 h2.on {
    top: 0;
    opacity: 1;
}
.section3 .s-title *, .section3 h2 * {
    font-size: 54px;
    font-weight: bold;
    line-height: 1.2;
}
.section3 .s-title b, .section3 h2 b {
    color: var(--gray1);
}
.section3 .s-title strong, .section3 h2 strong {
    color: #000;
}
.section3 .newslist {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}
.section3 .newslist li {
    width: 25%;
}
.section3 .newslist li .img {
    height: 270px;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}
.section3 .newslist li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section3 .newslist li h4 {
    word-break: keep-all;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    margin: 15px 0;

    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.section3 .newslist li .date {
    font-size: 20px;
    color: var(--gray1);
}

.btn_press {
    display: block;
    width: 172px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 60px;
}
.btn_press > * > span {
    font-size: var(--default-font1-size);
    font-weight: bold;
    display: block;
    color: #fff;
}
.btn_press img {
    margin-left: 10px;
}
.btn_press>* {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    line-height: 1;
    overflow: hidden;
    text-shadow: 0 calc(14px * -1.5) 0 #fff;
}
.btn_press>*>* {
    transition: transform 0.4s ease;
    transform: translateY(var(--m)) translateZ(0);
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
}
.btn_press>*>*:nth-child(1) {
    transition-delay: 0.1s;
}
.btn_press>*>*:nth-child(2) {
    transition-delay: 0.15s;
}
.btn_press>*>*:nth-child(3) {
    transition-delay: 0.2s;
}
.btn_press>*>*:nth-child(4) {
    transition-delay: 0.25s;
}
.btn_press:hover {
    --shadow: var(--shadow-hover);
}
.btn_press:hover span {
    --m: calc(21px);
}


.btn_press1 {
    display: block;
    width: 172px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 30px;
}
.btn_press1 > * > span {
    font-size: var(--default-font1-size);
    font-weight: bold;
    display: block;
    color: #fff;
}
.btn_press1 img {
    margin-left: 10px;
}
.btn_press1>* {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    line-height: 1;
    overflow: hidden;
    text-shadow: 0 calc(14px * -1.5) 0 #fff;
}
.btn_press1>*>* {
    transition: transform 0.4s ease;
    transform: translateY(var(--m)) translateZ(0);
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
}
.btn_press1>*>*:nth-child(1) {
    transition-delay: 0.1s;
}
.btn_press1>*>*:nth-child(2) {
    transition-delay: 0.15s;
}
.btn_press1>*>*:nth-child(3) {
    transition-delay: 0.2s;
}
.btn_press1>*>*:nth-child(4) {
    transition-delay: 0.25s;
}
.btn_press1:hover {
    --shadow: var(--shadow-hover);
}
.btn_press1:hover span {
    --m: calc(21px);
}










.textRail {
    display: flex;
    white-space: nowrap;
    width: 100%;
    /* animation: textLoop 20s linear infinite; */
}
.textRail span {
    font-size: 100px;
    color: var(--lightGray2);
    white-space: nowrap;
    font-weight: bold;
    padding-right: 50px;
    display: inline-block;
    padding-right: 20px;
}
.textRail span:last-child {
    padding-right: 0;
}
.contact {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.contact > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    /* min-height: 24.5vh; */
}

.contact > div > * {
    max-width: 770px;
    width: 100%;
    display: flex;
    /* padding: 50px; */
    justify-content: space-between;
    padding: 0 3em;
}

.contact .text {
    position: relative;
    bottom: -30px;
    transition-duration: .4s;
}
.contact>*:hover .text, .contact>*:focus .text, .contact>*.on .text{
    bottom: 0;
}
.contact>* .text p {
    font-size: var(--default-font5-size);
    font-weight: 400;
    opacity: 0.6;
    color: #fff;
    margin-bottom: 10px;
    transition-duration: .4s;
}
.contact>* .text .s-title, .contact>* .text h2 {
    font-size: 24px;
    letter-spacing: -0.984px;
    font-weight: 500;
    color: #fff;
    transition-duration: .4s;
}

.contact img {
   height:80%;
   width:auto; 
   vertical-align:middle;
   margin-top:4%; 
}

.contact .contactus {
    background: var(--red);
    justify-content: flex-end;
	padding:10px 0;
}
.contact .careers {
    background: var(--darkGray3);
    justify-content: flex-start;
	padding:10px 0;
}
.contact .contactus > div {padding-left: 20px; }
.contact .careers > div {padding-right: 20px; }


.btn_relatedsites {
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--darkGray3);
    color: var(--gray2);
    background: #000;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
}

.btn_contact, a.btn_contact {
    width: 116px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: #fff;
    background: #000;
    font-size: var(--default-font5-size);
    font-weight: 500;
    margin-top: 30px;
    opacity: 0;
    bottom: -50px;
    transition-duration: .4s;
}
.contact>*:hover .btn_contact, .contact>*:focus .btn_contact, .contact>*.on .btn_contact {
    /* display: block; */
    bottom: 0;
    opacity: 1;
}


.nav_detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; 
    transition-duration: var(--duration);
    word-break: keep-all;
    display: none;
}


.nav_detail .left {display: none;}
.nav_detail.active {
    display: block;
    animation: showNavDetail var(--duration) ease-in-out;
}
@keyframes showNavDetail {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.nav_detail * {
    color: #fff;
}
.nav_detail a {
    display: block;
    color: #fff;
}
.nav_detail .top {
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 84px;  /* 사이트맵 헤더 높이 맞춤 */
}
.nav_detail .top > img {
    width: 70px;
}
.nav_detail .top h1 img {
    height: 36px;
}
.nav_detail .mid {
    overflow: auto;
    height: calc(100vh - 156px);
}
.nav_detail .mid .depths {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 20px;
}
.nav_detail .mid .depths .depth {
    width: 100%;
    opacity: 0;
}
.nav_detail .mid .depths .depth.mob-only {
    display: none;
}
.nav_detail.active .mid .depths .depth {
    animation: showNavDetailDepth var(--duration) ease-in-out;
    position: relative;
}
@keyframes showNavDetailDepth {
    0% {
        opacity: 0;
        right: 50px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
.nav_detail.active .mid .depths .depth:nth-child(2) {
    animation-delay: .1s;
}
.nav_detail.active .mid .depths .depth:nth-child(3) {
    animation-delay: .2s;
}
.nav_detail.active .mid .depths .depth:nth-child(4) {
    animation-delay: .3s;
}
.nav_detail.active .mid .depths .depth:nth-child(5) {
    animation-delay: .4s;
}


.nav_detail .mid .depths .depth a {
    opacity: 0.6;
}
.nav_detail .mid .depths .depth a.on, .nav_detail .mid .depths .depth a:hover {
    opacity: 1;
}
.nav_detail .mid .depths .depth * {
    font-size: var(--default-font2-size);
    font-weight: 400;
    line-height: 1.8;
}
.nav_detail .mid .depths .depth > button {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 50px;
    opacity: 1;
    cursor: default;
}
.nav_detail .mid .depths .depth ul {
    padding-right: 50px;
}
.nav_detail .mid li.depth2>a {
    display: block;
    margin-top: 15px; 
}
.nav_detail .mid .depth3 {
    position: relative;
    display: none;
}
.nav_detail .mid .depths .depth .depth3 a {
    font-size: var(--default-font4-size);
    font-weight: 200;
}
.nav_detail .mid li.depth2>a.on:after {
    transform: rotate(180deg);
}
.nav_detail .mid li.depth2>a:after {
    content:'';
    display: inline-block;
    background: url(../img/arrow_down_white.svg) right /16px no-repeat;
    width: 16px;
    height: 16px;
    margin-left: .3em;
    position: relative;
    top: 1px;
    left: 0;
    transition-duration: .2s;
}
.nav_detail .mid li.depth2>a.noneArrow:after {
    content:none;
}
.nav_detail .mid li.depth2>a.isDepth3 {
    padding-right: 10px;
    background: url(../img/arrow_up.svg);
}

.nav_detail .mid .depth3>a {
    font-size: 20px;
    opacity: 0.6;
}
.nav_detail .mid .depth3>a:hover {
    opacity: 1;
    text-decoration: underline;
}
.nav_detail .btm {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.2);
}
.nav_detail .btm .inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 55px;
    height: 80px;
    width: 100%;
    line-height: 80px;
    max-width: 1320px;
}
.nav_detail .btm a {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}
.nav_detail .btm a:hover{
    color: var(--red);
}

@keyframes textLoop {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.br_mobile {
    display: none !important;
}

nav.pc {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* padding-left: 12%; */
}
#gnb a[target="_blank"],
#gnb .depth2 > li > a[target="_blank"],
#gnb .depth3 > li > a[target="_blank"],
.nav_detail a[target="_blank"],
.nav_detail .mid li.depth2>a[target="_blank"]
{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-right: 0;
}
#gnb a[target="_blank"]::after,
#gnb .depth2 > li > a[target="_blank"]::after,
#gnb .depth3 > li > a[target="_blank"]::after,
.nav_detail a[target="_blank"]::after,
.nav_detail .mid li.depth2>a[target="_blank"]:after
{
    content: '';
    background: url('../img/ico_blank_nav.svg') no-repeat;
    background-size: contain;
    width: 15px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
    top: 0px;
    margin-left: .5em;
    opacity: .7;
}
.nav_detail a[target="_blank"]::after,
.nav_detail .mid li.depth2>a[target="_blank"]:after
{
    background-image: url('../img/btn-link.svg'); /* ico_union.png */
    top: 11px;
}
@media screen and (min-width:769px){
    .nav_detail .mid li.depth2>a[target="_blank"] {
        display: block;
        white-space: nowrap;
    }
    .nav_detail .mid li.depth2>a[target="_blank"]:after {
        top: 9px;
        flex-grow: 1;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        margin-left: .3em;
        margin-top: -9px;
    }
}

.view_mobile{
    display: none;
}
.section3 .newslist li a:hover img {
    transform: scale(1.2);
}
.section3 .newslist li a .img img {
    transition-duration: var(--duration);
}
@media screen and (max-width:1455px){
    .section2.biz1 .category .box svg {
        width: 105px;
        height: 105px;
    }
    .section2 .box{
        max-width: 280px;
        height: 280px;
    }
    .section2 .box.title .s-title *, .section2 .box.title h2 *,
    .section2.biz1 .box.title .s-title *, .section2 .box.title h2 *{
        font-size: 35px;
    }
    .section2 .box1.title .s-title *, .section2 .box1.title h2 *,
    .section2.biz1 .box1.title .s-title *, .section2 .box1.title h2 *{
        font-size: 35px;
    } 
}


@media screen and (max-width: 1202px) {
    #gnb .depth1 > li > a {
        /* padding: 0 1.5vw; */
        /*padding: 0 1%;*/
    }
}
@media screen and (max-width:1200px){

    #footer {
        /* padding: 7% 0 150px; */
        padding: 5% 0 5%;
    }

    /* c9 */
    .relatedsitesMap .btm ul li a {
        font-size: 16px;
    }

    .section2 .box{
        max-width: 250px;
        height: 250px;
    }
    .section2 .box.type1 .hideItem .subtext{
        font-size: 17px;
    }
    .section2 .inner,
    .section2.biz1 .category{
        gap: 20px;
    }
    .section2 .box.type2, .section2 .box.title {
        width: calc(100% - 600px);
    }
    .section2.biz1 .box.title {
        max-width: 100%;
    }
    .section2.biz1 .category .box svg {
        width: 90px;
        height: 90px;
    }
    .contact>* .text .s-title, .contact>* .text h2 {
        font-size: var(--default-font2-size);
    }
 

    .btn_contact, a.btn_contact {
        margin-top: 20px;
    }

    /* #gnb .depth1 > li > a {
        padding: 0 1%;
    } */
    main#main .section1 .s-title span {
        font-size: 20px;
    }

    .section1 .s-title, .section1 h2{
        font-size: 40px;
        line-height: 1.2em;
    }
    .relatedsitesMap-slide .inner a {
        padding: 1px 15px;
        font-size: 14px;
    }
    .btn_relatedsites.slide_down {
        padding: 10px 15px;
    }
}
 

@media screen and (max-width:991px){
    #dots-container {
        /* display: none; */
    }
    .section {
        min-height:100vh;
    }
    nav.pc {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    nav.pc .center,
    nav.pc .depth2_area {
        display: none;
    }
    .ci_ktis {
        justify-content: left;
        width: 69px;
    }

    .nav-ex {
        justify-content: flex-end
    }
    .section1 .s-title, .section1 h2 {
        /*line-height: 75px;*/
    }
    .section1 .s-title small {
        /*font-size: 26px;*/
    }
    .section2.biz1 .category .box b{
        font-size: 20px;
    }
    .section1 .inner {
        padding: 0 20px;
    }
    .section2 .box {
        max-width: 230px;
        height: 230px;
    }
    .section2.biz1 .category .box svg {
        width: 80px;
        height: 80px;
    }
    .section2.biz1 .box.title {
        height: 230px;
    }
    .section2 .box.type2, .section2 .box.title{
        width: calc(100% - 500px);
    }
    .section2 .box.title .s-title *, .section2 .box.title h2 *,
    .section2.biz1 .box.title .s-title *, .section2 .box.title h2 *{
        font-size: 28px;
    }
    .section2 .box1.title .s-title *, .section2 .box1.title h2 *,
    .section2.biz1 .box1.title .s-title *, .section2 .box1.title h2 *{
        font-size: 28px;
    }
    .section3 .newslist li .img {
        height: 150px;
    }
    .section3 .newslist{
        gap: 20px;
    }
    .section3 .s-title, .section3 h2 {
        margin-bottom: 30px;
    }
    .section3 .s-title *, .section3 h2 *{
        font-size: 28px;
    }

    .section3 .newslist li h4 {
        font-size: var(--default-font2-size);
    }

    .section3 .mark {
        margin-bottom: 20px;
		margin-top:70px;
    }
    .section2 .box.type1 .hideItem .subtext {
        font-size: 14px;
    }
    .section2 .box.type1 .hideItem .subtext br {
        display: none;
    }
    .section3 .newslist li h3{
        font-size: 17px;
    }
    .section3 .newslist li .date{
        font-size: 14px;
    }
    .section2 .box.type1 .title span{
        font-size: 22px;
    }
    .contact>* .text .s-title, .contact>* .text h2{
        font-size: 17px;
    }
    .contact>*>img{
        width: 60px;
        margin-left: 60px;
    }

    .contact > div > * {
        padding: 1em 2em;
    }

    .textRail span {
        font-size: 60px;
    }
    .btn_contact, a.btn_contact {
        font-size: 17px;
        width: 140px;
        height: 40px;
        margin-top: 20px;
    }
    #footer .inner .top .link * {
        font-size: 14px;
    }
    #footer address {
        line-height: 1.4;
    }
    #footer address * {
        font-size: 16px;
    }
    #footer .copy{
        font-size: 12px;
    }
    #footer .inner .top {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .contact>* {
        height: 180px;
    }
    #footer address span {
        display: block;
        height: 0;
    }
    .btn_biznum {
        top: 0;
        margin-left: 10px;
        font-size: 16px;
        margin-top: 10px;
    }
    #footer .copy{
        margin-top: 20px;
    }
    .btn_relatedsites {
        width: 170px;
    }
}

.indmaintitle{
	margin-top:-80px;
}
 
@media screen and (min-width: 769px) and (max-width: 890px){
    .section2 .box.title .s-title *,
    .section2 .box.title h2 *,
    .section2.biz1 .box.title .s-title *,
    .section2 .box.title h2 * {
        font-size: 21px;
    }
    .section2 .box.title {
        padding-top: 0;
    }
}
@media screen and (max-width:768px){
    * {
        word-break: keep-all;
    }
    #header {
        position: fixed;
        height: 60px;
        padding: 15px 10px;
        background: #fff;

    }
    body.fixed #header.mob {
        background: #fff;
    }

    body.mob .nav-ex .btn_nav span{
        background: #fff;
        transition-property: left, top, background-color, opacity, transform, -webkit-transform;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
        transition-timing-function: ease;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    body.fixed.mob .nav-ex .btn_nav span:nth-child(1) {
        right: 0;
        width: 110%;
        top: 16%;
        left: 5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    body.fixed.mob .nav-ex .btn_nav span:nth-child(2) {
        display: none;
    }
    body.fixed.mob .nav-ex .btn_nav span:nth-child(3) {
        bottom: -4%;
        width: 107%;
        left: 3px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    body.fixed.mob #header.mob .ci_ktis a,
    body.mob #header.mob .ci_ktis a{
        background: url(../img/header_logo.svg) no-repeat center / contain;
    }
    /*body.index.mob #header.mob .ci_ktis a{*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    background: url(../img/ktis_logo_white.svg) no-repeat center / contain;*/
    /*}*/
    .nav-ex{
        min-width: auto;
		margin-right:-50%;
        justify-content: right; 
    }
    .nav-ex .btn_nav{
        margin-left: 5px;
    }
    .nav-ex a{
        font-size: 14px;
    }
    #header h1 a img {
        height: 22px;
    }
    .head_language {
        display: none;
    }

.indmaintitle{
	margin-top:0px;
}

    #section_1 h1, #section_1 h1 * {
        font-size:32px;
    }
    #goTop {
        z-index: 100;
        width:45px;
        height:45px;
        bottom:20px;
        right:20px;
        display: none !important;
    }
    #sections>.section {
        padding-top: 30%;
    }
    @keyframes moveto{
        0%{
            offset-distance: 0%;
        }
        100%{
            offset-distance: 85%;
        }
    }
    .section1 .s-title br, .section1 h2 br{
        display: none;
    }
    .br_mobile {
        display: block !important;
    }
    /*.section1 .s-title small {*/
    /*    font-size: 15px;*/
    /*}*/
    /*.section1 .s-title small i::after {*/
    /*    width: 5px;*/
    /*    height: 5px;*/
    /*    left: -10px;*/
    /*}*/

    .section1 .s-title, .section1 h2 {
        margin-bottom: 30px;
        margin-top: 0;
    }

    .section2 .box, .section2 .box.type1{
        opacity: 1;
    }
    .section2 .box.type1 .hideItem{
        /* opacity: 1; */
    }
    .section2 .box.type2, .section2 .box.title{
        width: 100%;
    }
    .section2 .box.title *{
        top: 0;
    }
    .section2.biz1 .box.title{
        padding-top: 0;
    }
    .section2 .box{
        order: 10;
        width: 100%;
        max-width: 100%;
		height:170px;
    } 
    .section2 .box.title,
    .section2.biz1 .box.title{
        order: 1;
        text-align: center;
        height: auto;
    }
    #sections>.section{
        padding-top: 0;
    }
    .section{
        min-height: auto;
    }
    .section1 {
        /* padding: 230px 0 160px !important; */
    }
    main#main .section1 .s-title span {
        font-size: 15px;
        letter-spacing: 0;
    }

    .section1 .s-title, .section1 h2{
        font-size: 30px;
        /*letter-spacing: -1.1px;*/
        line-height: 1.2;
    }

    .section2.biz1 .category .box svg {
        width: 60px;
        height: 60px;
    }

    .section2.biz1 .category .box b{
        font-size: 16px;
        margin-top: 10px;
    }
    .section2 .box.title .mark {
        font-size: 14px;
        margin-bottom: 10px;
        position: relative;
    }

    #dots-container{
        display: none;
    }
    .section2 .box.title .s-title, .section2 .box.title h2,
    .section2.biz1 .box.title .s-title{
        margin-bottom: 10px;
    }
    .section2 .box1.title .s-title, .section2 .box1.title h2,
    .section2.biz1 .box1.title .s-title{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .section2 .box.title{
        height: auto;
    }
    .section2 .box{
        height: 130px;
    }
	
    .section2 .box.type1 .title span{
        font-size: 17px;
    }

    .section2 .box.type1 .hideItem .subtext{
        display: none;
    }
    .section2 .box.type1 .hideItem {
        opacity: 1 !important;
        position: static;
        display: flex;
        animation:none;
        transition-duration: 0;
    }
    .section2 .box.type1 .hideItem .subtext {
        display: block;
    }
    .section2 .box.type1>.title{
        display: none;
    }
    .section2 .box.type1 .hideItem .subtext {
        font-size: 14px;
    }
    .section2 .inner,
    .section2.biz1 .category {
        gap: 10px;
    }
    .maxWidthWrap {
        padding: 0 20px;
    }
    .section2.biz1 .category{
        justify-content: space-between;
    }
    .section2.biz1 .category .box.biz1{
        width: calc(100% / 2 - 6px);
        height: auto;
    }
    .section2 .box.type1 .hideItem:before{
        backdrop-filter: none;
        background: none;
    }
    .box.card1>img,
    .box.card2>img,
    .box.card3>img,
    .box.card4>img {
        display: none;
    }
    .box.card1 {
        background: url(../img/ESG_card1_mo.png) 50% /cover no-repeat;
    }
    .box.card2 {
        background: url(../img/ESG_card2_mo.png) 50% /cover no-repeat;
    }
    .box.card3 {
        background: url(../img/ESG_card3_mo.png) 50% /cover no-repeat;
    }
    .box.card4 {
        display: none;
    }
    .box.ktis{
        display: none;
    }
    .section2 .box.type1 .hideItem .subtext br{
        display: block;
    }
    .section3 .s-title, .section3 h2,
    .section3 .mark{
        top: 0;
        opacity: 1;
    }
    .section3{
        padding-top: 50px !important;
    }
    .section3 .mark {
        font-size: 14px;
		margin-top:100px; 
    }
    .section3 .newslist {
        white-space: nowrap;
        overflow: auto; /*공지사항 스크롤바*/
        padding-bottom:10px; 
    -ms-overflow-style: none; 
    scrollbar-width: none;  
    }
    .section3 .newslist li{
        min-width: 70vw;
    }
    .section3 .newslist li a {
        display: block;
    }
    .section3 .newslist li h3{
        white-space: normal;
    }
    .section3 .newslist li .img{
        height: 200px;
    }
    .section3 .s-title, .section3 h2{
        margin-bottom: 20px;
    }
    .btn_press{
        width: 100%;
        height: 58px;
    }
    .section3 .newslist li .date{
        font-size: 16px;
    }
    .btn_press span {
        font-weight: 500;
    }
    .textRail span{
        font-size: 30px;
    }
    .textRail {
        margin-top: 30px;
    }
    .textRail span{
        color: var(--lightGray1);
        padding-right: 20px;
    }
    #sections{
        height: auto;
    }
    .contact{
        display: block;
    }

.contact .contactus { 
	padding:0px 0;
}
.contact .careers { 
	padding:0px 0;
}
    .contact > div {
        height: auto;
        width: 100%;
        display: block;
        position: relative;
        padding: 0;
    }

    .contact > div > * {
        padding: 20px !important;
    }

    .contact .text{
        bottom:0;
    } 
	
	.contact img {
	   height:30%;
	   max-height:60px;
	   width:auto; 
	   vertical-align:middle;
	   margin-top:10%; 
	}

    .contact>* .text p{
        font-size: 14px;
        font-weight: 200;
    }
    .contact>* .text .s-title, .contact>* .text h2{
        font-size: 15px;
        letter-spacing: -0.902px;
    }
    .contact>* .btn_contact, .contact>* a.btn_contact {
        opacity: 1 !important;
        font-size: 13px;
    }
    .contact>* .text p{
        margin-bottom: 10px;
    }

    #sections .fp-tableCell {
        padding-top: 0;
    }

    #footer .inner .top{
        display: block;
        padding-bottom: 5px;
    }
    #footer .inner .top .link{
        justify-content: flex-start;
    }
    #footer .inner .top .link>*{
        margin-bottom: 10px !important;
    }
    #footer .info img {
        height: 38px;
    }
    #footer .btm{
        display: block;
        margin-top: 50px;
        width: 100%;
    }
    #footer{
        /* padding: 7% 0 30px; */
        padding: 7% 0 7%;
    }
    #footer .copy{
        font-size: 13px;
        margin-bottom: 20px;
    }
    #footer address b{
        display: block;
        padding-top: 15px;
        padding-bottom: 5px;
    }
    .mobileflex{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 10px;
    }
    .mobileflex>*:nth-child(1) {
        padding-right: 60px;
    }
    #footer address span {
        display: none !important;
    }
    #footer address br {
        display: none;
    }
    .mobileflex b {
        padding-top: 0;
        display: block;
    }
    .btn_biznum {
        margin-top: 0;
    }
    #footer address strong {
        /* c9 */
        /* word-break: break-all; */
        word-break: keep-all;
    }
    .btn_relatedsites {
        width: 100%;
    }
    body.index .relatedsitesMap {
        height: calc(100vh - 60px);
    }
    .relatedsitesMap{
        height: 100%;
        z-index: 10;
        position: fixed !important;
        padding-top: 0;
        overflow: hidden;
        height: calc(100vh - 60px);
        top: unset !important;
        bottom: 0;
        padding: 0;
    }
    .relatedsitesMap .btm {
        padding-bottom: 45px;
    }
    .relatedsitesMap .infotext-mobile{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px;
        background: var(--darkGray2);
        padding: 5px;
    }
    .relatedsitesMap .top{
        padding-top: 5px;
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .relatedsitesMap .btm ul li h3,
    .relatedsitesMap .top .s-title, .relatedsitesMap .top h2{
        font-size: 20px;
    }
    .relatedsitesMap .btm ul{
        flex-wrap: wrap;
        padding-bottom: 50px;
    }
    .relatedsitesMap .btm ul li {
        width: 50%;
        margin-top: 20px;
        margin-right: 0;
    }
    .relatedsitesMap .btm ul li.line1 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .relatedsitesMap .btm ul li.line1 strong,
    .relatedsitesMap .btm ul li.line1 h3 {
        width: 100%;
    }
    .relatedsitesMap .btm ul li.line1 a {
        width: 50%;
    }
    .relatedsitesMap .btm ul li a{
        font-size: 16px;
        margin-top: 10px;
    }
    .relatedsitesMap .btm ul li h3{
        font-size: 17px;
    }
    .relatedsitesMap .btm{
        height: calc(100vh - 80px);
        overflow: auto;
    }
    .popup.visual{
        padding: 0 40px;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        content:none;
    }
    .swiper-button-next img ,
    .swiper-button-prev img {
        width: 20px;
    }
    .popup.visual .swiperarea .swiper-button-next {
        right: -35px;
    }
    .popup.visual .swiperarea .swiper-button-prev {
        left: -35px;
    }
    /* .popup.visual .swiperarea { height: 70vh; } */
    .popup.visual .con{
        height: auto;
        border-radius: 15px;
    }
    .popup.visual .closebox>button{
        font-size: 15px;
    }

    .nav_detail {
        top: 80px;
        height: calc(100% - 80px);
        z-index: 100;
        background: var(--darkGray3);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        border-top: 1px solid #ddd;
        display: none;
    }
    .nav_detail.active {
        display: flex;
        animation: none;
    }
    .nav_detail .top {display: none;}
    .nav_detail .left {
        display: block;
        font-size: 18px;
        min-width: 150px;
        padding: 20px;
        height: 100%;
		background: #aeaeae;
    }
    .nav_detail .left button {
        display: block;
        width: 100%;
        text-align: left;
        color: #fff;
        opacity: 0.6;
        margin-bottom: 15px;
        font-size: inherit;
        line-height: 1.4;
        font-weight: bold;
    }
    .nav_detail .left button.active {
        opacity: 1;
    }
    .nav_detail .mid {
        font-size: 17px;
        background: #fff;
        width: 100%;
        height: 100%;
        overflow: visible;
    }
    .nav_detail .mid .depths {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 0;
        margin: 0;
        display: block;
    }
    .nav_detail .mid .depths .depth {
        display: none;
    }
    .nav_detail .mid .depths .depth.mob-only {
        opacity: 1 !important;
    }
    .nav_detail .mid .depths .depth.active {
        display: block;
    }
    .nav_detail .mid .depths .depth > button {
        display: none;
    }
    .nav_detail .mid .depths .depth ul {
        padding: 0;
    }
    .nav_detail.active .mid .depths .depth {
        animation: none;
    }
    .nav_detail .mid .depths .depth a {
        opacity: 1;
    }
    .nav_detail .mid .depths .depth2 > a {
        display: block;
        height: 50px;
        border-bottom: 1px solid #ddd;
        background: url(../img/nav_arrow_down.svg) 90% /11px no-repeat;
        font-size: 17px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        margin: 0;
    }

    #gnb a[target="_blank"],
    #gnb .depth2 > li > a[target="_blank"],
    #gnb .depth3 > li > a[target="_blank"],
    .nav_detail a[target="_blank"],
    .nav_detail .mid li.depth2>a[target="_blank"]
    {
        align-items: center;
    }
    .nav_detail .mid .depths .depth2 > a.noneArrow {
        background: none;
    }
    .nav_detail .mid .depths .depth2 > a,
    .nav_detail .mid .depths .depth2 > a * {
        color: #000;
        font-weight: 600;
    }
    .nav_detail .mid .depths .depth2 > a.on {
        color: var(--red);
    }
    .nav_detail .mid li.depth2 > a:after {
        /* display: none; */
    }
    .nav_detail .mid .depths .depth *,
    .nav_detail .mid .depths .depth .depth3 a {
        font-size: inherit;
    }
    .nav_detail .mid .depths .depth * {
        line-height: 1.4;
    }
    .nav_detail .mid .depths .depth .depth3 {
        background: #F5F5F8;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
    }
    .nav_detail .mid .depths .depth .depth3 a {
        position: relative;
        padding-left: 0;
        display: flex;
        justify-content: flex-start;
        /* align-items: center; */
        padding: 3px 0;
        color: #999 !important;
        font-weight: inherit;
    }
    .nav_detail .mid .depths .depth .depth3 a * {
        color: #999 !important;
    }
    .nav_detail .mid .depths .depth .depth3 a.on {
        color: #555 !important;
    }
    .nav_detail .mid .depths .depth .depth3 a::before {
        content: '';
        /* display: inline-block; */
        width: 2px;
        height: 2px;
        background: var(--gray2);
        border-radius: 50%;
        padding-left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;

        top: 11px;
        position: relative;
    }
    .nav_detail a[target="_blank"]::after, .nav_detail .mid li.depth2>a[target="_blank"]::after {
        background-image: url('../img/ico_blank_nav.svg');
        width: 13px;
        top: 0;
        opacity: 1;
    }
    .nav_detail a[target="_blank"], .nav_detail .mid li.depth2>a[target="_blank"] {
        background: none;
    }
    .nav_detail .mid .depth3>a[target="_blank"] {
        align-items: flex-start;
    }
    .nav_detail .mid .depth3>a[target="_blank"]::after {
        top: 5px;
        opacity: .5;
    }
    .nav_detail .btm {display: none;}

    .view_mobile {
        display: block;
    }
    .relatedsitesMap-slide {
        top: -417%;
    }
    .relatedsitesMap-slide .inner {
        height: 208px;
    }


}



.se2_img{
	width:100%;
}


@media screen and (max-width:620px){
	.se2_img{
		width:60%;
		margin:0 auto;
	}
}

	.mp3_mobox{ 
		 padding:50px 0px; 
	}
	.mp6_mobox{ 
		 padding:50px 0px; 
	}

@media screen and (max-width:768px){
	.ses3mo{
		margin-top:0px; 
	}
	.ses3mo1{
		margin-top:-200px; 
	} 
	.mp2_mobox{ 
		margin:20px 0;  
	}
	.mp3_mobox{ 
		margin:0px 0px; 
		padding:60px 30px 100px 30px;  
	}
	.mp6_mobox{ 
		margin:0px 0px; 
		padding:70px 30px;  
	}
}

.foot_left_logo{
	width: 200px;
	display:inline-block; 
}

.foot_right_logo{
	width: calc(100% - 220px);
	display:inline-block;
	text-align:right;
}



@media screen and (max-width:1200px){
	.foot_left_logo{
		width: 100%;
		display:block; 
	}

	.foot_right_logo{
		width: 100%;
		display:block; 
		text-align: left;
		padding-top:10px;
	}
	.foot_right_logo img{
		width: 35px;
		height:33px;
		margin-bottom:7px;
	}


}

.font_blue{
	color:#5ea4ec;
}


.part_name_title1{
	padding-bottom:5px;
	padding-left:10px;
	font-size:15pt;
}



.mp6_leftbox{
	width:30%;  display:inline-block;
}
 

.mp6_box{
	width:60%; text-align:left; background:transparent; margin-top:-20px; display:inline-block;
	 
}


@media (min-width:1px) and (max-width:980px){


	.mp6_leftbox{
		width:100%;  display:block; text-align:center; margin-top:10px;  
	} 

	.mp6_box{ 
		width:100% !important; display:block;text-align:left;   margin-top:0px !important;  
		min-height:700px;
	} 
	.part_name_title1{
		padding-bottom:5px;
		padding-left:10px;
		font-size:12pt;
	}



}