@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* full page custom */
#fp-nav ul li a span {background: rgba(0, 0, 0, 0.15);}
#fp-nav ul li a.active span {background: var(--color-point);}
#fp-nav ul li:last-child {display: none;}
.fp-viewing-firstPage #fp-nav ul li a.active span {background: var(--color-white);}
.fp-viewing-firstPage #fp-nav ul li a span {background: rgba(255, 255, 255, 0.25);}
.fp-viewing-6 #fp-nav.left {display: none;}

/* 1) main visual */
[data-mainVisual] {position:relative; height:100vh;}
[data-mainVisual] .visual-list {display: flex; justify-content: space-between; align-items: center; position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%); z-index: 50;}
[data-mainVisual] .logo img {width: 100%;max-width: 100%;}
/* text */
[data-visual="text"] {color: var(--color-white); width: 65%;}
[data-visual="text"] h2 {font-size: 70rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em;}
[data-visual="text"] p {font-size: 20rem; font-weight: 300; margin-top: 40rem;}
[data-visual="text"] strong {display: flex; align-items: flex-end; }
[data-visual="text"] strong span {color: #0068b7; font-family: "Playfair Display", 'Pretendard', Sans-serif; margin-left: 6rem; line-height: 1;}
[data-visual="text"] strong span:nth-child(1) {color: #e60012; margin-left: 15rem;}
[data-visual="text"] strong span:nth-child(2) {color:#009944}

.visual_btn {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 26rem; width: 185rem; height: 62rem; margin-top: 80rem; font-size: 15rem; font-weight: 300;}
.visual_btn::before {position: absolute; content:''; top: 0; left: 0; width: 62rem; height: 62rem; border-radius: 35rem; background: var(--color-point); z-index: -1; animation: move 1.6s alternate infinite;}
.visual_btn:hover::before {width: 100%; left: 0; animation: none; transition:0.5s;}

/* img */
[data-visual="img"]{ overflow:hidden; display:block; height:100%;}
[data-visual="img"] img{object-fit:cover; width:100%; height:100%; transform:scale(1.1); transition:transform 7000ms linear;}
[data-mainVisual] .logo {width: 42%;}
.mainTit h2 {font-size: 45rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700;} 
.mainTit span {display: block; font-size: 18rem; font-weight: 700; font-family: var(--font-eng); color: var(--color-point); margin-bottom: 25rem;}
.mainTit p {font-size: 18rem; line-height: 1.8; color: #555; margin-top: 25rem;}
.mainBtn {display: flex; align-items: center; justify-content: space-between; width: 200rem; height: 60rem; padding: 0 22rem; font-size: 15rem; color: #555;  border: 1rem solid #ddd; transition: 0.5s;}
.mainBtn:hover {border-color: var(--color-base); color: var(--color-base);}
.scrolldown{position:absolute; left:50%; bottom:0; display:flex; flex-direction: column; align-items: center; justify-content: center;  z-index:3; text-transform:uppercase; transform:translateX(-50%); transition-delay:0.5s;}
.scrolldown em {display:inline-block; font-size:14rem; font-weight:300; color:#fff; line-height:1em; margin: 0 0 12rem;}
.scrolldown i {display:block; overflow:hidden; position:relative; width:1rem; height:40rem; margin:0 auto; background:rgba(210,212,201,0.3);}
.scrolldown i:before {content:''; display:block; position:absolute; top:0rem; left:0px; width:100%; height:30rem; background:#fff; animation:scroll 2s cubic-bezier(0.48, 0.13, 0.09, 0.99) infinite;}
.fp-viewing-firstPage .tob-btn {opacity: 0;}
.tob-btn {opacity: 1;}
@media (max-width:1280px){
    #section04, #section04 .fp-tableCell {height: 100% !important;}
    .fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell {height: auto !important;}
}

@media (max-width:1080px){
    .mainTit h2 {font-size:40rem;}
    [data-visual="text"] h2 {font-size:50rem;}
    [data-visual="text"] p {font-size: 18rem; margin-top: 30rem;}
    .visual_btn {margin-top: 50rem;}
}
@media (max-width:768px){
    .mainTit span {font-size: 15rem; margin-bottom: 20rem;}
    .mainTit h2 {font-size: 30rem;}
    .mainTit p {font-size: 15rem; line-height: 1.5; margin-top: 20rem}
    [data-visual="text"] {width: 100%;}
    [data-mainVisual] .logo {display: none;}
    .mainBtn {width: 175rem; height: 55rem;}
}
@media (max-width:480px){
    .mainTit h2 {font-size: 22rem;}
    [data-visual="text"] h2 {font-size:28rem;}
    [data-visual="text"] p {font-size: 16rem;}
    [data-visual="text"] strong span:nth-child(1) {margin-left: 10rem;}
    .visual_btn {padding: 0 22rem; width: 160rem; height: 50rem; margin-top: 50rem; font-size: 14rem;}
    .visual_btn::before {width: 50rem; height: 50rem; border-radius: 30rem;}
}

@keyframes scroll{
	0%{transform:translateY(-20rem);}
	100%{transform:translateY(200%);}
}


/* section02 - business */
[data-main="business"] {position: relative; height: 100%; margin-top: 50rem; overflow: hidden;}
[data-main="business"] .business-bg {position: absolute; max-width: 100%; bottom: 70rem; left: 70rem; z-index: -1;}
[data-main="business"] .inr {display: flex; align-items: center; height: 100%;}
[data-main="business"] .mainTit {flex: 0 0 clamp(350rem, calc( 500 / 1920 * 100vw ), 500rem);}
[data-main="business"] .mainTit h2 {font-size: 50rem; letter-spacing: -0.02em;}
[data-main="business"] .mainTit p {white-space: nowrap;}
[data-main="business"] .mainRight {width:70%; transform: translateX(200%); transition: var(--transition);}
[data-main="business"] .business-slide {clip-path: inset(0 -100vw 0 0); max-width: 1090rem; overflow: visible;}
[data-main="business"] .buList {display: flex; align-items: center; gap: 70rem; }
[data-main="business"] .business_btn {display: flex; align-items: center; gap: 10rem; margin-top: 40rem;}
[data-main="business"] .business_btn div {display: flex; align-items: center; justify-content: center; width: 62rem; height: 62rem; border-radius: 50%; background: #f5f5f5; cursor: pointer; transition: .3s;}
[data-main="business"] .business_btn i {color: #a5a5a5; font-size: 14rem; transition: .3s;}
[data-main="business"] .business_btn div:hover {background: var(--color-point); box-shadow : 0 0 15rem rgba(0, 71, 157, 0.25)}
[data-main="business"] .business_btn div:hover i {color: var(--color-white);}
[data-main="business"] .buTxt span {display: block; color: var(--color-point); font-size: 17rem; font-weight:700;}
[data-main="business"] .buTxt h3 {font-size: 38rem; font-weight: 700; margin: 25rem 0 30rem; letter-spacing: -0.025em;}
[data-main="business"] .buTxt dd {color: #555; font-size: 17rem;}
[data-main="business"] .buTxt dd + dd {margin-top: 14rem;}
[data-main="business"] .buImg {display: block; overflow: hidden; }
[data-main="business"] .buImg:hover img {transform: scale(1.03);}
[data-main="business"] .buImg img {width: 100%; max-width: 100%; transition: .5s;}
[data-main="business"] .p_btn span{display: block; cursor: pointer; margin-bottom: 0;}
[data-main="business"] .p_btn svg{width: 9rem; fill: #bbb;}
[data-main="business"] .p_btn:hover svg {fill: var(--color-white);}
[data-main="business"] .p_btn .pause{display:none;}
[data-main="business"] .p_btn.on .play{display: none}
[data-main="business"] .p_btn.on .pause{display: block;}

@media (max-width:1280px){
    [data-main="business"] {margin-top: 0; padding: 120rem 0;}
}
@media (max-width:1080px){
    [data-main="business"] .inr {flex-direction: column; align-items: flex-start; gap: 50rem; }
    [data-main="business"] .mainTit {flex: 1 100%; width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}
    [data-main="business"] .business_btn {margin-top: 0;}
    [data-main="business"] .mainRight {width: 100%; flex: 1 100%;}
    [data-main="business"] .business-slide {max-width: 100%;}
    [data-main="business"] .buList {gap: 50rem;}
    [data-main="business"] .buImg {width: 45%;}
    [data-main="business"] .business-bg {width: 600rem; left: auto; right: 50rem;}
}
@media (max-width:768px){
    [data-main="business"] {margin-top: 0; padding: 100rem 0;}
    [data-main="business"] .mainTit h2 {font-size: 40rem;}
    [data-main="business"] .buTxt span {font-size: 15rem;}
    [data-main="business"] .buTxt h3 {font-size: 25rem; margin: 15rem 0 20rem;}
    [data-main="business"] .buTxt dd {font-size: 15rem;}
    [data-main="business"] .buTxt dd + dd {margin-top: 10rem;}
    [data-main="business"] .business-bg {bottom: 0;}
}
@media (max-width:480px){
    [data-main="business"] {padding: 75rem 0;}
    [data-main="business"] .inr {gap: 30rem;}
    [data-main="business"] .mainTit {flex-direction: column; align-items: flex-start; gap: 30rem;}
    [data-main="business"] .mainTit h2 {font-size: 30rem;}
    [data-main="business"] .business_btn div {width: 50rem; height: 50rem;}
    [data-main="business"] .business_btn i {font-size: 10rem;}
    [data-main="business"] .business-slide {overflow: hidden;}
    [data-main="business"] .buList {flex-direction: column; gap:40rem;}
    [data-main="business"] .buImg, [data-main="business"] .buTxt {width: 100%;}
}

/* section03 - technology */
[data-main="technology"] {display: flex; justify-content: flex-end; flex-direction: column; height: 100%; overflow: hidden;}
[data-main="technology"] .techBox {display: flex; justify-content: space-between;}
[data-main="technology"] .techList {position: relative; width: 410rem; height: 300rem; display: flex; align-items: center; padding: 60rem 45rem; background: #2a2a2a url(/images/common/logo_wh.png) no-repeat 120% 52%; margin-bottom: -60rem; box-sizing: border-box;}
[data-main="technology"] .techList li {display: flex; align-items: center; color: var(--color-white);}
[data-main="technology"] .techList li em {width: 45rem; opacity: 0.5;}
[data-main="technology"] .techList li + li {margin-top: 18rem;}
[data-main="technology"] .techList .techBtn {position: absolute; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; background: var(--color-white);}
[data-main="technology"] .techList .techBtn:hover {background: var(--color-point); color: var(--color-white); transition: .5s;}
[data-main="technology"] .techImg img {width: 100%; max-width: 100%;}

@media (max-width:1280px){
    [data-main="technology"] {padding: 120rem 0 100rem;}
    [data-main="technology"] .techImg {height: 330rem;}
    [data-main="technology"] .techImg img {height: 100%; object-fit: cover;}
}
@media (max-width:1080px){
    [data-main="technology"] .techBox {flex-direction: column; gap: 40rem;}
    [data-main="technology"] .techList {width: 360rem; height: 260rem; padding: 45rem; align-self: flex-end; margin-bottom: -180rem;}
    [data-main="technology"] .techList .techBtn {width:50rem; height: 50rem;}
}
@media (max-width:768px){
    [data-main="technology"] {padding: 100rem 0 80rem;}
    [data-main="technology"] .techList {width: 100%; height: auto; margin-bottom: 40rem; background-size: 230rem; background-position-x: 100%; background-position-y:35rem; padding: 50rem 35rem;}
    [data-main="technology"] .techList li {font-size: 15rem;}
    [data-main="technology"] .techList li + li {margin-top: 12rem;}
}
@media (max-width:480px){
    [data-main="technology"] {padding: 75rem 0 50rem;}
    [data-main="technology"] .techBox {gap: 30rem;}
    [data-main="technology"] .techList {margin-bottom: 30rem;}
}

/* section04 - esg */
br.show_mob {display: none;}
[data-main="esg"] {height: 100%; overflow: hidden;}
[data-main="esg"] .inr-wide {background: url(/images/main/esg01.jpg) no-repeat 50% 50% / cover; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 100rem;}
[data-main="esg"] .mainTit h2, [data-main="esg"] .mainTit span, [data-main="esg"] .mainTit p {color: var(--color-white)}
[data-main="esg"] .mainTit span {display: inline-block; margin-bottom: 30rem; border-bottom: 1rem solid var(--color-white);}
[data-main="esg"] .mainTit p {margin-top: 35rem;}
[data-main="esg"] .mainBtn {background: rgba(255, 255, 255, 0.05); color: var(--color-white); border: 1rem solid rgba(255, 255, 255, 0.3); margin:50rem auto 0 auto;}
[data-main="esg"] .mainBtn:hover {border-color: var(--color-white);}

@media (max-width:1280px){
    [data-main="esg"] {padding: 200rem 0; background: url(/images/main/esg01.jpg) no-repeat 50% 50% / cover;}
    [data-main="esg"] .inr-wide {padding:0; background: initial; width: calc(var(--inr-width) * 100%);}
}
@media (max-width:768px){
    [data-main="esg"] {padding: 150rem 0;}
    [data-main="esg"] .inr-wide {height: auto;}
    [data-main="esg"] .mainTit span {margin-bottom: 25rem;}
    [data-main="esg"] .mainTit p {margin-top: 30rem;}
    [data-main="esg"] .mainBtn {margin:30rem auto 0 auto;}
}

@media (max-width:480px){
    [data-main="esg"] {padding: 100rem 0;}
    [data-main="esg"] .mainTit h2 {font-size: 25rem;}
    br.show_mob {display: block;}
}

/* section05 - investment */
[data-main="investment"] .inr {display: flex; gap:40rem; align-items: center; justify-content: space-between; height: 100%; padding-top: 50rem; overflow: hidden;}
[data-main="investment"] .mainBtn {margin-top: 45rem;}
[data-main="investment"] .investList {display: flex; gap:30rem;}
[data-main="investment"] .investList li {position: relative; width: 330rem; height: 440rem; overflow: hidden; background-size: 100%; }
[data-main="investment"] .investList li:nth-child(2) {margin-top: -40rem;}
[data-main="investment"] .investList img {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; z-index: -1;}
[data-main="investment"] .investList li:hover img {transform: scale(1.05); transition: all  0.3s}

[data-main="investment"] .investList a {display: flex; align-items: flex-end;width: 100%; height: 100%; padding: 50rem 40rem; box-sizing: border-box; color: var(--color-white);}
[data-main="investment"] .investList dt {font-size: 25rem; font-weight: 600;}
[data-main="investment"] .investList dd {font-size: 15rem; margin-top: 15rem;}

@media (max-width:1280px){
    [data-main="investment"] {padding: 120rem 0;}
    [data-main="investment"] .inr {padding-top: 0;}
    [data-main="investment"] .mainTit h2 {font-size: 35rem;}
    [data-main="investment"] .investList li {width: 290rem; height: 370rem;}
    [data-main="investment"] .investList a {padding: 40rem 30rem;}
}
@media (max-width:1080px){
    [data-main="investment"] .inr {flex-direction: column;}
    [data-main="investment"] .mainTit {width: 100%;}
    [data-main="investment"] .investList {width: 100%; gap: 20rem;}
    [data-main="investment"] .investList li {width: 50%; height: 450rem;}
    [data-main="investment"] .investList li:nth-child(2) {margin-top: 0;}
}
@media (max-width:768px){
    [data-main="investment"] {padding: 80rem 0;}
    [data-main="investment"] .investList dt {font-size: 20rem;}
    [data-main="investment"] .investList a {padding:30rem;}
}
@media (max-width:480px){
    [data-main="investment"] .mainTit h2 {font-size: 22rem;}
    [data-main="investment"] .mainBtn {margin-top: 30rem;}
    [data-main="investment"] .investList {flex-direction: column;}
    [data-main="investment"] .investList li {width: 100%; height: 330rem;}
}

/* section06 - news */
#section06 {width: 100%; height: 100%; background: #f5f5f5; }
[data-main="news"] {margin-top: 50rem; overflow: hidden;}
[data-main="news"] .mainTit {text-align: center;}
[data-main="news"] .newsList {max-width: 1250rem; width: 100%; margin:40rem auto;}
[data-main="news"] .newsList li {width: 100%; transition: .5s;}
[data-main="news"] .newsList li + li {margin-top: 20rem;}
[data-main="news"] .newsCon {position: relative; display: flex; gap: 50rem; align-items: center; width: 100%; height: 100%; padding: 25rem 50rem 25rem 25rem; box-sizing: border-box; background: var(--color-white);}
[data-main="news"] .newsCon .img {width: 300rem; height: 200rem; background: #f5f5f5 url(/images/common/noimage.svg) no-repeat 50% 50% / contain; background-size: 135rem;  overflow: hidden;}
[data-main="news"] .newsCon .img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
[data-main="news"] .newsCon .img:hover img {transform: scale(1.05); transition: .5s;}
[data-main="news"] .newsCon .btn {position: absolute; top: 50%; right: 50rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; border-radius: 50%; transition: .5s; background: #f5f5f5; color: #aaa;}
[data-main="news"] .newsCon .txt {width: 60%;}
[data-main="news"] .newsCon .txt span {display: block; font-weight: 600; color: #e60012; margin-bottom: 20rem;}
[data-main="news"] .newsCon .txt dt {font-size: 20rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow: hidden; text-overflow: ellipsis;}
[data-main="news"] .newsCon .txt dd {font-size: 17rem; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; font-weight: 300; color: #555; margin-top: 15rem;}
[data-main="news"] .newsCon .txt .date {display: flex; align-items:center; gap: 8rem; font-size: 15rem; font-weight: 300; color: #a5a5a5; margin-top: 25rem;}
[data-main="news"] .newsCon .txt .date i {font-size: 17rem;}
[data-main="news"] .mainBtn {margin: 0 auto;}
[data-main="news"] .newsList li:hover {box-shadow : 0 0 20rem rgba(0, 0, 0, 0.08)}
[data-main="news"] .newsList li:hover .btn {background: var(--color-point); color: var(--color-white);}
[data-main="news"] .ko_board_noData{border-width:0; color:#999;}
.fp-viewing-lastPage [data-main="news"] [data-se="slide-up"]{opacity:1; transform:translateY(0);}

@media (max-width:1280px){
    [data-main="news"]  {padding: 120rem 0; margin-top: 0;}
}
@media (max-width:1080px){
    [data-main="news"] .newsCon {gap: 35rem; padding: 25rem;}
    [data-main="news"] .newsCon .img {width: 250rem; height: 180rem;}

}
@media (max-width:768px){
    [data-main="news"] .newsCon {gap: 25rem;}
    [data-main="news"] .newsCon .txt dt {font-size: 16rem;}
    [data-main="news"] .newsCon .txt dd {font-size: 15rem;}
    [data-main="news"] .newsCon .btn {display: none;}
    [data-main="news"] .newsCon .txt span {font-size: 15rem; margin-bottom: 15rem;}
    [data-main="news"] .newsCon .txt .date {margin-top: 20rem;}
    [data-main="news"] .newsCon .txt .date img {height: 14rem;}
    [data-main="news"]  {padding: 80rem 0;}

}
@media (max-width:480px){
    [data-main="news"] .mainTit h2 {font-size: 30rem;}
    [data-main="news"] .newsList {margin: 30rem auto;}
    [data-main="news"] .newsCon {flex-direction: column; padding: 20rem 20rem 30rem 20rem;}
    [data-main="news"] .newsCon .img {width:100%; height: 200rem;}
    [data-main="news"] .newsCon .txt {width: 100%;}
}

@media(prefers-reduced-motion:no-preference){

}

#fullpage{
    @media(prefers-reduced-motion:no-preference){
        .fp-completely{
            [data-se="slide-up"]{ transform: translateY(0); opacity: 1; transition: .5s; }
            [data-se="slide-up"] + [data-se="slide-up"]{ transition-delay: .5s; }
        }

       .section.active [data-main="business"] .mainRight {transform: translateX(0);}
    }


    @media(min-width:768px){
        section:not(.visual){ place-content: center; height: 100vh; padding-top: 100rem; }
    }
    @media(max-width:767px){
        .section, .fp-tableCell{ height: auto!important; }
    }
}