@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; } 
 }*/
 
/* 2025-10-13 */
section.sea { position: relative; padding-top: 0 !important; background: transparent !important; } 
.work-area { position: relative; } 
.work-fixed { position: relative; padding-top: 85rem; background: #fff; isolation: isolate; } 
.work-wrap { position: relative; height: 1534rem; } 
.work-wrap::before { content: ""; position: absolute; inset: 0 auto auto 0; z-index: -1; width: 100%; height: 1000rem; background: linear-gradient(180deg, #FFF 0%, #E5ECEE 60%); } 
.work-wrap::after { content: ""; position: absolute; left: 0; bottom: -1px; z-index: -1; width: 100%; height: 553rem; background: #031820; } 
.work-area .title-wrap { position: relative; z-index: 1; } 
.work-area .slide-con { position: relative; margin-top: 65rem; padding-left: 260rem; width: 100%; height: 620rem; } 
.work-area .bg-sea { position: absolute; top: 362rem; left: 0; width: 100%; height: 1534rem; background: url(/common/kr/images/bg-sea2.png) no-repeat top / cover; } 
.work-area .work-list-wrap { position: absolute; top: 0; left: 260rem; z-index: 1; display: flex; overflow: visible; will-change: transform; } 

.work-area .work-list-wrap .work-list { position: relative; overflow: hidden; flex-shrink: 0; padding: 60rem; width: 620rem; height: 620rem; border-radius: 24rem; top: var(--top); opacity: var(--opacity); transition: top 0.7s ease, opacity 0.7s ease; } 
.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::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.40) 34.97%, rgba(0,0,0,0) 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 .title { position: relative; z-index: 1; font-family: "Pretendard-Bold"; font-size: 36rem; line-height: 140%; color: #fff; } 
.work-area .work-list .btn-wrap { position: absolute; left: 60rem; bottom: 0; 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: .1s; } 
.work-area .slide-con.active .work-list-wrap .work-list:nth-child(3) { transition-delay: .2s; } 
.work-area .slide-con.active .work-list-wrap .work-list:nth-child(4) { transition-delay: .3s; } 
.work-area .img-box { position: absolute; z-index: 5; top: 752rem; left: 746rem; width: 398rem; height: 450rem; } 
.work-area .img-box img { width: 100%; height: 100%; object-fit: cover; } 

@media (max-width: 1024px) {
 .work-fixed { padding-top:90rem; } 
 .work-area .slide-con { position: relative; margin-top: 32rem; padding-left: 20rem; width: 100%; height: 312rem; overflow: hidden; } 
 .work-area .bg-sea { top: 256rem; height: 1000rem; } 
 .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 (max-width: 600px){
 .work-wrap { height: 950rem; } 
 .work-wrap::after { top: 650rem; } 
 .work-area .bg-sea { top: 272rem; height: 651rem; background: url(/common/kr/images/bg-sea2-mob.png) no-repeat center / cover; } 
 .work-fixed { touch-action: auto; } 
 .work-area .slide-con { height: 100%; touch-action: pan-y; } 
 .work-area .work-list-wrap { position: relative; top: 0; left: 0; right: auto; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 24rem 8rem 0; z-index: 7; -ms-overflow-style: none; scrollbar-width: none;} 
 .work-area .work-list-wrap::-webkit-scrollbar {display: none;}
 .work-area .work-list-wrap .work-list { scroll-snap-align: start; padding: 30rem; width: 312rem; height: 312rem; border-radius: 20rem; } 
 .work-area .work-list-wrap .work-list.small { width: 312rem; height: 312rem; } 
 .work-area .img-box { top: 420rem; left: 50%; transform: translateX(-50%); width: 199rem; height: 228rem; } 
 }
/* // 2025-10-13 */

/* 지속가능성 - SUSTAINABILITY */
.sustainability-area { position: relative; width: 100%; margin-top:200rem; } /* 2025-10-13 */
.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; } 
 }

 @media screen and (max-width: 600px){
  .sustainability-area { margin-top:0; } 
 }


/* 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 } 
 }

/*2025-09-18*/
/* nav */
.sec-nav-wrap:not(.on) .sec-nav { pointer-events: none; } 
.sec-nav-wrap:not(.on):hover .btn { background-image: url("/common/kr/images/icon-nav-plus-hover.svg"); } 
.sec-nav-wrap { display: none; position: fixed; bottom: 40rem; left: 50%; z-index: 99; transform: translateX(-50%); } 
.sec-nav-wrap .sec-nav-div { cursor: pointer; width: 230rem; height: 56rem; padding: 8rem; border-radius: 28rem; background: rgba(0, 0, 0, .8); overflow: hidden; transition: width .6s ease, height .6s ease, borderRadius .6s ease, padding .6s ease; } 
.sec-nav-wrap .btn { position: absolute; right: 16rem; bottom: 12rem; width: 32rem; height: 32rem; background: url("/common/kr/images/icon-nav-plus.svg") no-repeat center center / 20rem auto; border-radius: 999rem; overflow: hidden; transition: right .4s ease, transform .4s ease, background .2s ease; } 
.sec-nav-wrap .btn:hover { background-image: url("/common/kr/images/icon-nav-plus-hover.svg"); } 
.sec-nav-wrap .sec-nav { display: flex; gap: 16rem; flex-direction: column; height: 100%; width: calc(100% - 10rem); } 
.sec-nav-wrap .sec-nav a { width: 100%; } 
.sec-nav-wrap .sec-nav a.on { display: block; } 
.sec-nav-wrap .sec-nav a:not(.on) { display: none; } 
.sec-nav-wrap .sec-nav a .txts { display: flex; align-items: center; gap: 16rem; } 
.sec-nav-wrap .sec-nav a .txts .txt { font-family: "Pretendard-Medium"; font-size: 14rem; line-height: 110%; letter-spacing: -0.28rem; color: #FFF; transition: color .2s ease; } 
.sec-nav-wrap .sec-nav a .img { flex-shrink: 0; width: 40rem; height: 40rem; border-radius: 40rem; overflow: hidden; } 
.sec-nav-wrap .sec-nav a .img img { width: 100%; height: 100%; object-fit: cover; } 
.sec-nav-wrap.on .sec-nav-div { width: 240rem; height: 345rem; padding: 16rem 32rem 8rem 32rem; border-radius: 24rem; } 
.sec-nav-wrap.on .btn { right: 8rem; transform: rotate(45deg); } 
.sec-nav-wrap.on .sec-nav a { display: block !important; cursor: pointer; } 
.sec-nav-wrap.on .sec-nav a.on .txts .txt { color:#00E600; } 
.sec-nav-wrap.on .sec-nav a:hover .txts .txt { color:#00E600; } 

@media all and (max-width: 1024px){
 .sec-nav-wrap { display: none !important; } 
 }
/* //2025-09-18*/

/* 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; } 
 }