@charset "UTF-8";

body{background:#031820}

/* main-visual section */
.main-visual {height:200vh; background:#fff;}
.main-visual .visual-wrap{overflow:hidden; position: relative; padding: 0; width: 100%; height: 100vh;}
.main-visual .video-wrap {position: relative; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); overflow: hidden; transition: height .6s ease;}
.main-visual .video-wrap::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6);}
.main-visual .video-wrap video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.main-visual .img-wrap {width: 100%; height: 100%;}
.main-visual .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.main-visual .txt-wrap {position: absolute; top: 50%; transform:translateY(-50%); left: 384rem; width:1152rem; transition: top .6s ease;}
.main-visual .txt-wrap .title {position:relative; top:var(--top); font-family: "HDfont-Bold"; font-size: 72rem; line-height: 130%; color: #fff; transition: font-size .6s ease, top 0.7s ease, opacity 0.7s ease; opacity:var(--opacity);}
.main-visual .txt-wrap .sub-tit {position:relative; top:var(--top); margin-top: 30rem; font-size: 18rem; line-height: 160%; color: #fff; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.main-visual .txt-wrap .btn-wrap {position: relative; top:var(--top); margin-top:60rem; height:60rem; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.main-visual .txt-wrap .movie-btn {position: absolute; top: 0; left: 0; width: 60rem; height: 60rem; background: url(/common/kr/images/icon-pause.png)no-repeat 0 / 60rem auto; opacity: 1; visibility: visible; transition: opacity .6s ease, visibility .6s ease;}
.main-visual .txt-wrap .movie-btn.play {display: none; background: url(/common/kr/images/icon-play.png)no-repeat 0 / cover;}
.main-visual .txt-wrap .round-border-type {position: absolute; top: 0; left: 80rem; transition: opacity .6s ease, visibility .6s ease;}
.main-visual.active .video-wrap{height: 75vh;}
.main-visual.active .txt-wrap {top: 438rem;}
.main-visual.active .txt-wrap .title {font-size: 44rem;}
.main-visual.active .txt-wrap .btn-wrap{overflow:hidden; height:0;}
.main-visual.active .txt-wrap .movie-btn {opacity: 0;}
.main-visual.active .txt-wrap .round-border-type {opacity: 0;}
.main-visual .txt-wrap.active .title{top:0; opacity:1;}
.main-visual .txt-wrap.active .sub-tit{top:0; opacity:1; transition-delay:0.15s}
.main-visual .txt-wrap.active .btn-wrap{top:0; opacity:1; transition-delay:0.3s}

.our-business{padding-bottom:115rem !important; background:#fff !important}

@media screen and (max-width: 1024px) {
  .main-visual {height: 100vh;}
  .main-visual .txt-wrap {left: 52rem; width:calc(100% - 104rem);}
  .main-visual .txt-wrap .title {font-size: 36rem;} 
  .main-visual .txt-wrap .sub-tit {margin-top: 20rem; font-size: 14rem;}
  .main-visual .txt-wrap .btn-wrap{margin-top:38rem; height:42rem}
  .main-visual .txt-wrap .movie-btn {width: 42rem; height: 42rem; opacity: 1; visibility: visible; background: url(/common/kr/images/icon-pause.png)no-repeat 0 / 42rem auto;}
  .main-visual .txt-wrap .round-border-type {position: absolute; top: 0; left: 60rem;}
  .main-visual.active .video-wrap {height: 100vh;}
  .our-business{padding-bottom:10rem !important;}
}

@media screen and (max-width: 1024px) {
  .our-business .unfold-area{padding-top:0;}
  .our-business .unfold-area .unfold-wrap{padding-top:30rem;}
  .our-business .unfold-area .unfold-list{height:500rem;}
  .our-business .unfold-area .unfold-list.active{height:500rem;}
  .our-business .unfold-area .unfold-list .txt-wrap{left:50%; transform:translate(-50%, -50%);}
}

/* 우리가 일하는 방식 - The way We work */
section.sea {position: relative; padding-top:0 !important; background:transparent !important;}
.work-area {position: relative;}
.work-fixed {position: relative; padding-top:85rem; background:#fff;}
.work-wrap {position: relative; height: 1534rem;}
.slide-con {position:relative; margin-top:65rem; padding-left:260rem; width: 100%; height:620rem; overflow: hidden;}
.work-area .title-wrap {position: relative; z-index: 1;}
.work-wrap::before {content: ""; z-index: -1; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 1000rem; background: linear-gradient(180deg, #FFF 0%, #E5ECEE 60%);}
.work-wrap::after {content: ""; z-index: -1; position: absolute; bottom: -1px; left: 0; display: block; width: 100%; height: 553rem; background: #031820;}
.work-area .bg-sea {position: absolute; top: 362rem; width: 100%; height: 1534rem; background: url(/common/kr/images/bg-sea.png) no-repeat center / cover;}
.work-area .work-list-wrap {position: absolute; top:0; left:260rem; z-index: 1; display: flex;}
.work-area .work-list-wrap .work-list {overflow:hidden; position: relative; top:var(--top); flex-shrink: 0; padding: 60rem; width: 620rem; height: 620rem; border-radius: 24rem; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.work-area .work-list-wrap .work-list:after{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(135deg, rgba(0, 0, 0, 0.40) 34.97%, rgba(0, 0, 0, 0.00) 97.36%);}
.work-area .work-list-wrap .work-list:nth-child(4)::after {opacity: .6;} 
.work-area .work-list-wrap .work-list:nth-child(1) {background: url(/common/kr/images/img-worklist01.jpg)no-repeat 0 / cover;}
.work-area .work-list-wrap .work-list:nth-child(2) {background: url(/common/kr/images/img-worklist02.jpg)no-repeat 0 / cover;}
.work-area .work-list-wrap .work-list:nth-child(3) {background: url(/common/kr/images/img-worklist03.jpg)no-repeat 0 / cover;}
.work-area .work-list-wrap .work-list:nth-child(4) {background: url(/common/kr/images/img-worklist04.jpg)no-repeat 0 / cover;}
.work-area .work-list-wrap .work-list + .work-list {margin-left: 16rem;}
.work-area .work-list-wrap .work-list.small {width: 620rem; height: 440rem;}
.work-area .work-list-wrap .work-list .title {position:relative; font-family: "Pretendard-Bold"; font-size: 36rem; line-height: 140%; color: #fff; z-index:1;}
.work-area .work-list-wrap .work-list .btn-wrap{position:absolute; bottom:0; left:60rem; z-index:1;}
.work-area .slide-con.active .work-list-wrap .work-list{top:0; opacity:1;}
.work-area .slide-con.active .work-list-wrap .work-list:nth-child(2){transition-delay:0.1s}
.work-area .slide-con.active .work-list-wrap .work-list:nth-child(3){transition-delay:0.2s}
.work-area .slide-con.active .work-list-wrap .work-list:nth-child(4){transition-delay:0.3s}
.work-area .img-box {z-index: 5; position: absolute; top: 752rem; left: 746rem; width: 398rem; height: 450rem;}
.work-area .img-box img {width: 100%; height: 100%; object-fit: cover;}

@media screen and (max-width: 1024px) {
  .work-fixed{padding-top:90rem;}
  .slide-con {position:relative; margin-top:32rem; padding-left:20rem; width: 100%; height:312rem; overflow: hidden;}
  .work-area .bg-sea {top: 256rem; height: 585rem;}
  .work-wrap{height:860rem;}
  .work-wrap::after{top:490rem; height:100vh;}
  .work-area::before {top: 0; height: 555rem; background: linear-gradient(180deg, #FFF 0%, #E5ECEE 60%);}
  .work-area .work-list-wrap {left:20rem;}
  .work-area .work-list-wrap .work-list .title {font-size: 24rem;}
  .work-area .work-list-wrap .work-list {padding: 30rem; width: 312rem; height: 312rem;}
  .work-area .work-list-wrap .work-list.small {width: 312rem; height: 312rem; border-radius:20rem;}
  .work-area .work-list-wrap .work-list .btn-wrap{left:30rem;}
  .work-area .img-box {top: 413rem; left: 50%; transform:translateX(-50%); width: 164rem; height: 187rem;}
}

@media screen and (max-width: 600px) {
  .work-wrap {height: 950rem;}
  .work-wrap::after{top:650rem}
  .work-area::before {top: 0; height: 555rem; background: linear-gradient(180deg, #FFF 0%, #E5ECEE 60%);}
  .work-area .bg-sea {top: 272rem; height: 651rem; background: url(/common/kr/images/bg-sea-mob.png) no-repeat center / cover;}
  .work-area .img-box {top: 420rem; left: 50%; transform:translateX(-50%); width: 199rem; height: 228rem;}
}

/* 지속가능성 - SUSTAINABILITY */
.sustainability-area {position: relative; width: 100%;}
.sustainability-area .title-wrap {color: #fff;}
.sustainability-area .subs-con {z-index: 1; position: relative; margin: 65rem auto 0; width: calc(100% - 520rem); height: 816rem;}
.sustainability-area .subs-con .content-list {position: absolute; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.sustainability-area .subs-con .content-list .content-list-wrap::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sustainability-area .subs-con .content-list .content-list-wrap {position: relative; width: 100%; height: 100%; border-radius: 24rem; overflow: hidden; transition: background-size .6s ease;}
.sustainability-area .subs-con .content-list:nth-child(1) {top: 70rem; left: 0;}
.sustainability-area .subs-con .content-list:nth-child(1) .content-list-wrap {width: 920rem; height: 400rem; background: url(/common/kr/images/img-subs-list01.png) no-repeat center / 100% 100%;}
.sustainability-area .subs-con .content-list:nth-child(1):hover .content-list-wrap {background-size: 110% 110%;}
.sustainability-area .subs-con .content-list:nth-child(1) .content-list-wrap::before {background: linear-gradient(90deg, rgba(0, 0, 0, .5) 15%, rgba(0, 0, 0, 0) 100%);}
.sustainability-area .subs-con .content-list:nth-child(2) {top: 70rem; left: 944rem; height: 214rem;}
.sustainability-area .subs-con .content-list:nth-child(2) .content-list-wrap {width: 442rem; height: 170rem; background: url(/common/kr/images/img-subs-list02.png) no-repeat 0 / cover;}
.sustainability-area .subs-con .content-list:nth-child(2) .content-list-wrap::before {display: none;}
.sustainability-area .subs-con .content-list:nth-child(3) {top: 486rem; left: 0; height: 400rem;}
.sustainability-area .subs-con .content-list:nth-child(3) .content-list-wrap {width: 690rem; height: 400rem; background: url(/common/kr/images/img-subs-list03.png) no-repeat center / 100% 100%;}
.sustainability-area .subs-con .content-list:nth-child(3) .content-list-wrap::before {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);}
.sustainability-area .subs-con .content-list:nth-child(3):hover .content-list-wrap {background-size: 110% 110%;}
.sustainability-area .subs-con .content-list:nth-child(4) {top: 486rem; left: 708rem;}
.sustainability-area .subs-con .content-list:nth-child(4) .content-list-wrap {width: 214rem; height: 400rem; background: url(/common/kr/images/img-subs-list04.png) no-repeat 0 / cover;}
.sustainability-area .subs-con .content-list:nth-child(4) .content-list-wrap::before {background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, .5) 100%);}
.sustainability-area .subs-con .content-list:nth-child(5) {top: 256rem; left: 944rem;}
.sustainability-area .subs-con .content-list:nth-child(5) .content-list-wrap {width: 442rem; height: 630rem; background: url(/common/kr/images/img-subs-list05.png) no-repeat center / 100% 100%;}
.sustainability-area .subs-con .content-list:nth-child(5) .content-list-wrap::before {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);}
.sustainability-area .subs-con .content-list:nth-child(5):hover .content-list-wrap {background-size: 110% 110%;}
.sustainability-area .subs-con .content-list .txt-wrap {position: absolute; top: 60rem; left: 60rem; display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 120rem); height: calc(100% - 120rem);}
.sustainability-area .subs-con .content-list .txt-wrap .title {font-family: "HDfont-Bold"; font-size: 36rem; line-height: 140%; color: #fff;}
.sustainability-area .subs-con .content-list .txt-wrap .info {font-size: 18rem; line-height: 170%; color: #fff;}
.sustainability-area .subs-con.active .content-list{top:0; opacity:1;}
.sustainability-area .subs-con.active .content-list:nth-child(2){top:0; transition-delay:0.1s}
.sustainability-area .subs-con.active .content-list:nth-child(3){top: 416rem; transition-delay:0.2s}
.sustainability-area .subs-con.active .content-list:nth-child(4){top: 416rem; transition-delay:0.3s}
.sustainability-area .subs-con.active .content-list:nth-child(5){top: 186rem; transition-delay:0.4s}
.sustainability-area .rolling-wrap {top: 937rem;}
.recruit {padding: 400rem 0 300rem; text-align: center;}
.recruit .title {position:relative; top:var(--top); font-family: "HDfont-Bold"; font-size: 36rem; font-weight: 400; line-height: 140%; color: #fff; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.recruit .btn-wrap {position:relative; top:var(--top); margin-top: 30rem; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.recruit .title.active{top:0; opacity:1;}
.recruit .btn-wrap.active{top:0; opacity:1; transition-delay:0.15s}

@media screen and (max-width: 1024px) {
  .sustainability-area::before {top: -347rem; height: 2420rem;}
  .sustainability-area .subs-con {margin-top: 32rem; width: calc(100% - 40rem); height: auto;}
  .sustainability-area .subs-con .content-list {position: relative;}
  .sustainability-area .subs-con .content-list {margin-top: 16rem; display: block;}
  .sustainability-area .subs-con .content-list:nth-child(3){top:70rem;}
  .sustainability-area .subs-con .content-list:nth-child(5){top:70rem; left:0;}
  .sustainability-area .subs-con .content-list.only-img {display: none;}
  .sustainability-area .subs-con .content-list .content-list-wrap{border-radius: 20rem;}
  .sustainability-area .subs-con .content-list:nth-child(1) .content-list-wrap {width: 100% ; height: 400rem; background-image: url("/common/kr/images/img-subs-list01-mob.png");}
  .sustainability-area .subs-con .content-list:nth-child(3) .content-list-wrap {width: 100% ; height: 400rem; background-image: url("/common/kr/images/img-subs-list03-mob.png");}
  .sustainability-area .subs-con .content-list:nth-child(5) .content-list-wrap {width: 100% ; height: 400rem; background-image: url("/common/kr/images/img-subs-list05-mob.png");}
  .sustainability-area .subs-con .content-list .txt-wrap {left: 30rem; top:30rem; width: calc(100% - 60rem); height:calc(100% - 60rem);}
  .sustainability-area .subs-con .content-list .txt-wrap .title {font-size: 24rem;}
  .sustainability-area .subs-con .content-list .txt-wrap .info {font-size: 14rem;}
  .sustainability-area .subs-con.active .content-list:nth-child(3){top:0; transition-delay:0s;}
  .sustainability-area .subs-con.active .content-list:nth-child(5){top:0; transition-delay:0s;}
  .sustainability-area .rolling-wrap {top: 1308rem;}
  .sustainability-area .rolling-txt {font-size: 100rem;}
  .recruit {padding: 350rem 0 309rem;}
  .recruit .title {padding:0 20rem; font-size: 24rem;}
}


/* HD 미디어허브 */
.media-hub {position: relative;}
.media-hub .media-wrap {display: flex; justify-content: space-between; margin: 110rem auto 0; width: calc(100% - 520rem);}/* 2024-08-02 수정 */
.media-hub .media-wrap .img-box {position: relative; width: 100%; overflow: hidden;}
.media-hub .media-wrap .img-box img {width: 100%; height: 100%; object-fit: cover;}
.media-hub .media-wrap .txt-wrap {padding: 20rem 30rem 30rem;}
.media-hub .media-wrap .txt-wrap .title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-size: 20rem; font-weight: 400; line-height: 150%;}
.media-hub .media-wrap .txt-wrap .sub-tit {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; margin-top: 10rem; font-size: 16rem; font-weight: 400; line-height: 160%; color: #707070;}
.media-hub .media-wrap .txt-wrap .date {margin-top: 10rem; font-size: 14rem; font-weight: 400; line-height: 160%; color: #707070;}
.media-hub .media-wrap .media-left-area {position: relative; flex-shrink: 0; width: 575rem; max-height: 503rem;}
/* 2024-08-02 추가 */
.media-hub .media-wrap .media-left-area p.tit01{position: absolute; top: -25rem; left: 0; opacity: 0;transition: top 0.7s ease, opacity 0.7s ease;}
.media-hub .media-wrap .media-left-area p.tit01.active{top: -105rem; opacity: 1;transition-delay: 0.2s;}
.media-hub .media-wrap .media-left-area p.tit02{position: absolute; top: -15rem; left: 0; opacity: 0;transition: top 0.7s ease, opacity 0.7s ease;}
.media-hub .media-wrap .media-left-area p.tit02.active{top: -85rem; left: 0; opacity: 1;}
/* // 2024-08-02 추가 */
.media-hub .media-wrap .media-left-area .media-list {position: relative; top:var(--top); display: block; width: 100%; border-radius: 12rem; border: 1px solid #E4E4E4; overflow: hidden; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.media-hub .media-wrap .media-list .sns-box {z-index: 1; position: absolute; top: 10rem; left: 10rem; width: 40rem; height: 40rem;}
.media-hub .media-wrap .media-list .sns-box.youtube {background: url(/common/kr/images/icon-youtube.png) no-repeat 0 / cover;}
.media-hub .media-wrap .media-list .sns-box.insta {background: url(/common/kr/images/icon-insta.png) no-repeat 0 / cover;}
.media-hub .media-wrap .media-list .sns-box.insta2 {background: url(/common/kr/images/icon-insta2.png) no-repeat 0 / cover;}
.media-hub .media-wrap .media-left-area .img-box {height: 323rem;}
.media-hub .media-wrap .media-left-area .img-box:not(:has(img)) {border-bottom: 1px solid #E4E4E4; background: url(/common/kr/images/img-newslist-default.png) no-repeat center center / 300rem auto #fff;}
.media-hub .media-wrap .media-right-area {position: relative; margin-left: 16rem; display: grid; grid-template-columns: repeat(2, minmax(auto, 1fr)); column-gap: 16rem; row-gap: 16rem; width: 100%;}
.media-hub .media-wrap .media-right-area .media-list {position: relative; top:var(--top); border: 1px solid #E4E4E4; overflow: hidden; border-radius: 12rem; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.media-hub .media-wrap .media-right-area .img-box {height: 223rem;}
.media-hub .media-wrap .media-right-area .img-box:not(:has(img)) {border-bottom: 1px solid #E4E4E4; background: url(/common/kr/images/img-newslist-default.png) no-repeat center center / 200rem auto #fff;}
.media-hub .media-wrap .media-right-area .txt-wrap .title {font-size: 16rem;}
.media-hub .media-wrap .media-left-area .media-list.active{top:0; opacity:1;}
.media-hub .media-wrap .media-right-area .media-list.active:nth-child(2n-1){top:0; opacity:1; transition-delay:0.1s}
.media-hub .media-wrap .media-right-area .media-list.active:nth-child(2n){top:0; opacity:1; transition-delay:0.2s}

@media screen and (max-width: 1024px) {
  .media-hub .media-wrap {display: block; margin: 50rem auto 0; width: calc(100% - 40rem);}/* 2024-08-02 32 -> 40 */
  .media-hub .media-wrap .media-left-area {width: 100%; height: auto; max-height: unset;}
  /* 2024-08-02 추가 */
  .media-hub .media-wrap .media-left-area p.tit01{top: 20rem;}
  .media-hub .media-wrap .media-left-area p.tit01.active{top: -50rem;}
  .media-hub .media-wrap .media-left-area p.tit02{top: 30rem;}
  .media-hub .media-wrap .media-left-area p.tit02.active{top: -40rem; left: 0; opacity: 1;}
  /* // 2024-08-02 추가 */
  .media-hub .media-wrap .media-left-area .img-box {height: 184rem;}
  .media-hub .media-wrap .media-left-area .img-box:not(:has(img)) {background-size: 200rem auto;}
  .media-hub .media-wrap .media-left-area .txt-wrap {padding: 15rem 20rem;}
  .media-hub .media-wrap .txt-wrap .title {font-size: 18rem;}
  .media-hub .media-wrap .txt-wrap .sub-tit {margin-top: 5rem; font-size: 14rem;}
  .media-hub .media-wrap .txt-wrap .date {margin-top: 5rem; font-size: 12rem;}
  .media-hub .media-wrap .media-right-area {grid-template-columns: repeat(1, minmax(auto, 1fr)); margin: 10rem 0 0 0;}
  .media-hub .media-wrap .media-right-area .txt-wrap {padding: 15rem;}
  .media-hub .media-wrap .media-right-area .media-list {display: flex;}
  .media-hub .media-wrap .media-right-area .img-box {flex-shrink: 0; width: 150rem; height: 100rem;}
  .media-hub .media-wrap .media-right-area .img-box:not(:has(img)) {background-size: 100rem auto;}
  .media-hub .media-wrap:not(.type-two) .media-right-area .img-box:not(:has(img)) {border-right: 1px solid #E4E4E4; border-bottom: none;}
  .media-hub .media-wrap .media-right-area .txt-wrap .title {font-size: 12rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
  .media-hub .media-wrap.type-two {}
  .media-hub .media-wrap.type-two .media-right-area {grid-template-columns: repeat(2, minmax(auto, 1fr)); margin: 10rem 0 0 0;}
  .media-hub .media-wrap.type-two .media-right-area .media-list {display: block;}
  .media-hub .media-wrap.type-two .media-right-area .img-box {width: 100%;}
  .media-hub .media-wrap .media-right-area .media-list.active:nth-child(2n-1),
  .media-hub .media-wrap .media-right-area .media-list.active:nth-child(2n){transition-delay:0s}
}

/* 투자정보 & 인재채용 */
.investment .invest-wrap {display: flex; margin: 65rem auto 0; width: calc(100% - 520rem);}
.investment .invest-wrap .left-banner-area {position:relative; top:var(--top); padding: 80rem; flex-shrink: 0; width: 574rem; max-height: 616rem; border-radius: 24rem; border: 1px solid #E4E4E4; background: #fff; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08); opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.investment .invest-wrap .left-banner-area .title {font-family: "HDfont-Bold"; font-size: 36rem; line-height: 140%;}
.investment .invest-wrap .left-banner-area .content {margin-top: 100rem;}
.investment .invest-wrap .left-banner-area .content .top{display: flex; margin-top: 100rem;}
.investment .invest-wrap .left-banner-area .content .top .krx {margin-left: 15rem; font-size: 14rem; line-height: 160%; color: #707070;}
.investment .invest-wrap .left-banner-area .content .middle {display: flex; margin-top: 20rem;}
.investment .invest-wrap .left-banner-area .content .middle .price {font-family: "Pretendard-ExtraBold"; font-size: 64rem; line-height: 130%; color: #000;}
.investment .invest-wrap .left-banner-area .content .middle .krw {margin: 30rem 0 0 20rem; font-family: "Pretendard-Bold"; font-size: 20px; line-height: 160%; color: #000;}
.investment .invest-wrap .left-banner-area .content .bottom {margin-top: 4rem;}
.investment .invest-wrap .left-banner-area .content .bottom .per {position: relative; padding-left: 23rem; display: flex; align-items: center;}
.investment .invest-wrap .left-banner-area .content .bottom .per::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 18rem; height: 18rem; background: url(/common/kr/images/icon-arrow-led.png) no-repeat 0 / cover;}
.investment .invest-wrap .left-banner-area .content .bottom .per .txt {font-family: "Pretendard-Bold"; font-size: 18rem; line-height: 160%; color: #FF0000;}
.investment .invest-wrap .left-banner-area .content .bottom .per .stocks {margin-left: 20rem; font-family: "Pretendard-Bold"; font-size: 18rem; line-height: 160%; color: #FF0000;}
.investment .invest-wrap .left-banner-area .content .bottom .per.fall::before {background: url(/common/kr/images/icon-arrow-blue.png) no-repeat 0 / cover;}
.investment .invest-wrap .left-banner-area .content .bottom .per.fall .txt {color: #003087;}
.investment .invest-wrap .left-banner-area .content .bottom .per.fall .stocks {color: #003087;}
.investment .invest-wrap .left-banner-area .content .bottom .per.none-change::before {display: none;}
.investment .invest-wrap .left-banner-area .content .bottom .per.none-change .txt {color: #707070;}
.investment .invest-wrap .left-banner-area .content .bottom .per.none-change .stocks {color: #707070;}
.investment .invest-wrap .left-banner-area .content .logo-wrap {width: 84rem; height: 22rem;}
.investment .invest-wrap .left-banner-area .content .logo-wrap img {width: 100%; height: 100%; object-fit: cover;}
.investment .invest-wrap .left-banner-area .date {margin-top: 126rem; font-size: 14rem; line-height: 160%; color: #707070;}
.investment .invest-wrap .right-banner-area {margin-left: 16rem; width: 100%;}
.investment .invest-wrap .right-banner-area .banner-list {position: relative; top:var(--top); padding: 50rem; width: 100%; height: 300rem; border-radius: 24rem; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08); opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.investment .invest-wrap .right-banner-area .banner-list + .banner-list {margin-top: 16rem;}
.investment .invest-wrap .right-banner-area .banner-list.green {background: #008233;}
.investment .invest-wrap .right-banner-area .banner-list.blue {background: #003087;}
.investment .invest-wrap .right-banner-area .banner-list .title {font-family: "HDfont-Bold"; font-size: 36rem; line-height: 140%; color: #fff;}
.investment .invest-wrap .right-banner-area .banner-list .content {margin-top: 30rem; font-size: 18rem; line-height: 160%; color: #fff;}
.investment .invest-wrap .right-banner-area .banner-list .btn-list {position: absolute; bottom: 50rem; right: 50rem;}
.investment .invest-wrap .right-banner-area .banner-list .btn-list li + li {margin-top: 14rem;}
.investment .invest-wrap .right-banner-area .banner-list .btn-list .link {display: inline-block; width: 353rem; font-size: 20rem; font-family: "Pretendard-Bold"; line-height: 160%; color: #fff;} 
.investment .invest-wrap .right-banner-area .banner-list .btn-list .link .txt {position: relative;} 
.investment .invest-wrap .right-banner-area .banner-list .btn-list .link .txt::after {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 28rem; height: 28rem; background: url(/common/kr/images/icon-arrow-white.png)no-repeat 0 / cover;}
.investment .invest-wrap .right-banner-area .banner-list .btn-list .link.type-two .txt::after {background: url(/common/kr/images/icon-arrow2-white.png)no-repeat 0 / cover;} 
.investment .invest-wrap.active .left-banner-area{top:0; opacity:1;}
.investment .invest-wrap.active .right-banner-area .banner-list:nth-child(1){top:0; opacity:1; transition-delay:0.15s}
.investment .invest-wrap.active .right-banner-area .banner-list:nth-child(2){top:0; opacity:1; transition-delay:0.3s}

@media screen and (max-width: 1024px) {
  .investment{padding-top:100rem !important}
  .investment .invest-wrap {display: block; margin-top: 32rem; width: calc(100% - 32rem);}
  .investment .invest-wrap .left-banner-area {padding: 40rem; width: 100%;}
  .investment .invest-wrap .left-banner-area .title {font-size: 28rem;}
  .investment .invest-wrap .left-banner-area .content {margin-top: 74rem;}
  .investment .invest-wrap .left-banner-area .content .top {margin-top: 74rem;}
  .investment .invest-wrap .left-banner-area .content .middle {margin-top: 10rem;}
  .investment .invest-wrap .left-banner-area .content .middle .price {font-size: 36rem;}
  .investment .invest-wrap .left-banner-area .content .middle .krw {margin-top: 10rem;}
  .investment .invest-wrap .left-banner-area .content .bottom {margin-top: 12rem;}
  .investment .invest-wrap .left-banner-area .content .bottom .per .stocks {font-size: 14rem;}
  .investment .invest-wrap .left-banner-area .date {margin-top: 93rem;}
  .investment .invest-wrap .left-banner-area .content .bottom .per .txt {font-size: 14rem;}
  .investment .invest-wrap .right-banner-area {margin: 10rem 0 0 0;}
  .investment .invest-wrap .right-banner-area .banner-list {padding: 40rem; height: auto;}
  .investment .invest-wrap .right-banner-area .banner-list .btn-list {position: unset; margin-top: 130rem;}
  .investment .invest-wrap .right-banner-area .banner-list .btn-list .link {width: 100%; font-size: 18rem;}
  .investment .invest-wrap .right-banner-area .banner-list .btn-list .link .txt::after {width: 24rem; height: 24rem;}
  .investment .invest-wrap .right-banner-area .banner-list .title {font-size: 24rem;}
  .investment .invest-wrap .right-banner-area .banner-list .content {margin-top: 20rem;}
  .investment .invest-wrap .right-banner-area .banner-list .btn-list li + li {margin-top: 10rem;}
}

/* HD 이미지 라이브러리 */
.library .library-list-wrap {position: relative; margin: 65rem auto 0; display: grid; grid-template-columns: 1fr 692rem 1fr; gap: 16rem; width: calc(100% - 520rem); grid height: 692rem;}
.library .library-list-wrap .library-list {position: relative; top:var(--top); padding: 40rem; display: block; width: 338rem; height: 338rem; border-radius: 24rem; overflow: hidden; color: #fff; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.library .library-list-wrap .library-list::before {content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0)); opacity:1; transition: opacity .4s ease;}
.library .library-list-wrap .library-list::after {content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.5)); opacity:0; transition:opacity 0.4s ease;}
.library .library-list-wrap .library-list:hover::before {opacity:0;}
.library .library-list-wrap .library-list:hover::after {opacity:1;}
.library .library-list-wrap .library-list .txt-wrap {z-index: 1; position: relative;}
.library .library-list-wrap .library-list .btn-wrap {position: absolute; bottom: 0; right: 30rem; opacity: 0; visibility: hidden; transition: all .6s ease;}
.library .library-list-wrap .library-list:hover .btn-wrap {bottom: 30rem; opacity: 1; visibility: visible;}
.library .library-list-wrap .library-list.large {width: 692rem; height: 692rem; grid-column: 2/3; grid-row: 1/3;}
.library .library-list-wrap .library-list:nth-child(1) {background: url(/common/kr/images/img-library01.jpg) no-repeat 0 / cover;}
.library .library-list-wrap .library-list:nth-child(2) {grid-column: 1/1; grid-row: 2/2; background: url(/common/kr/images/img-library02.jpg) no-repeat 0 / cover;}
.library .library-list-wrap .library-list:nth-child(3) {background: url(/common/kr/images/img-library03.jpg) no-repeat 0 / cover;}
.library .library-list-wrap .library-list:nth-child(4) {background: url(/common/kr/images/img-library04.jpg) no-repeat 0 / cover;}
.library .library-list-wrap .library-list:nth-child(5) {background: url(/common/kr/images/img-library05.jpg) no-repeat 0 / cover;}
.library .library-list-wrap .library-list .sub-tit {font-size: 14rem; line-height: 150%; word-wrap: break-word;}
.library .library-list-wrap .library-list .title {margin-top: 10rem; font-family: "Pretendard-Bold"; font-size: 28rem; line-height: 140%; word-wrap: break-word;}
.library .library-list-wrap .library-list .round-border-type {position: absolute; bottom: 0; right: 30rem; padding: 14rem 53rem 14rem 25rem; border: 1px solid #fff; border-radius: 100rem; opacity: 0; transition: all .6s ease; z-index:1; }
.library .library-list-wrap .library-list:hover .round-border-type {bottom: 30rem; opacity: 1;}
.library .library-list-wrap .library-list .round-border-type::after {content: ""; position: absolute; top: 50%; right: 25rem; transform: translateY(-50%); width: 18rem; height: 18rem; background: url(/common/kr/images/icon-btn-arrow.png) no-repeat 0 / cover;}
.library .library-list-wrap .library-list.active{top:0; opacity:1;}
.library .library-list-wrap .library-list.active:nth-child(2){transition-delay:0.1s}
.library .library-list-wrap .library-list.active:nth-child(3){transition-delay:0.2s}
.library .library-list-wrap .library-list.active:nth-child(5){transition-delay:0.1s}

@media screen and (max-width: 1024px) {
  .library .library-list-wrap {display:flex; flex-direction: column; row-gap: 10rem; margin-top: 30rem; width: calc(100% - 40rem); height: auto;}
  .library .library-list-wrap .library-list {padding:30rem; width: 100%;}
  .library .library-list-wrap .library-list.large {width: 100%; height: 338rem;}
  .library .library-list-wrap .library-list:nth-child(1) {background-image: url(/common/kr/images/img-library01-mob.jpg);}
  .library .library-list-wrap .library-list:nth-child(2) {background-image: url(/common/kr/images/img-library02-mob.jpg);}
  .library .library-list-wrap .library-list:nth-child(3) {background-image: url(/common/kr/images/img-library03-mob.jpg);}
  .library .library-list-wrap .library-list:nth-child(4) {background-image: url(/common/kr/images/img-library04-mob.jpg);}
  .library .library-list-wrap .library-list:nth-child(5) {background-image: url(/common/kr/images/img-library05-mob.jpg);}
  .library .library-list-wrap .library-list .round-border-type {display: none;} 
  .library .library-list-wrap .library-list .title {font-size: 24rem;}
  .library .library-list-wrap .library-list.active:nth-child(2){transition-delay:0s}
  .library .library-list-wrap .library-list.active:nth-child(3){transition-delay:0s}
  .library .library-list-wrap .library-list.active:nth-child(4){transition-delay:0s}
  .library .library-list-wrap .library-list.active:nth-child(5){transition-delay:0s}
}

/* main 공통 */
.section .title-wrap {margin: 0 auto; width: calc(100% - 520rem);}
.section .title-wrap .sub-tit {position:relative; top:var(--top); font-family: "Pretendard-Medium"; font-size: 18rem; line-height: 150%; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.section .title-wrap .title {position:relative; top:var(--top); margin-top: 5rem; font-family: "Pretendard-ExtraBold"; font-size: 44rem; line-height: 140%; text-transform: uppercase; opacity:var(--opacity); transition:top 0.7s ease, opacity 0.7s ease;}
.section .title-wrap.active .sub-tit {top:0; opacity:1;}
.section .title-wrap.active .title {top:0; opacity:1; transition-delay:0.15s}
.section + .section {padding: 200rem 0 0;}
.main-visual + .section {padding-top: 0;}
.section.media-hub {padding-top: 400rem; background:transparent}
.section.library {padding-bottom: 220rem;}

@media screen and (max-width: 1024px) {
  .main-visual + .section {padding-top: 115rem;}
  .section .title-wrap {width: calc(100% - 40rem);}
  .section .title-wrap .sub-tit {font-size: 16rem;}
  .section .title-wrap .title {font-size: 24rem;}
  .section + .section {padding: 100rem 0 0;}
  .section.media-hub {padding-top: 400rem;}
  .section.library {padding-bottom: 100rem;}
}