/* ============================
  서브 공통 스타일
============================ */
/* fixed visual */
.fixed-visual{ position:relative; margin-top:200rem; width:100%; height:100vh; opacity: 1;}
.fixed-visual .img-box{ position:absolute; left:50%; width:1220rem; height:640rem; border-radius:24rem; overflow:hidden; transform: translate(-50%,0); }
.fixed-visual .img-box div{ position:absolute; left:50%; top:50%; width:100vw; height:100vh; transform: translate(-50%,-50%); }
.fixed-visual .img-box img{  width:100%; height:100%; object-fit: cover; transform:scale(1)}
.fixed-visual .img-box .dim{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3); opacity: 0;}

.fixed-visual .txt-box{ position:absolute; left:50%; top:50%; width:100%; text-align:center; color:#fff; transform: translate(-50%,-50%); }
.fixed-visual .txt-box > *{ opacity: 0; transform: translateY(150rem); transition: opacity 0.7s ease, transform 0.7s ease;}
.fixed-visual .cate{ margin-bottom:24rem; }
.fixed-visual .txt{ display: flex; flex-direction: column; gap:8rem; margin-top:40rem; }
.fixed-visual .btn-box{ margin-top:40rem;}

.fixed-visual.active .txt-box > *{ opacity: 1; transform: translateY(0);}
.fixed-visual.active .tit{ transition-delay: 0.1s; }
.fixed-visual.active .txt{ transition-delay: 0.2s; }
.fixed-visual.active .btn-box{ transition-delay: 0.3s; }

@media screen and (max-width: 1024px) { 
  .fixed-visual{ margin-top:100rem; }
  .fixed-visual .img-box{ width:calc(100% - 40rem); height:100%; border-radius:12rem; } 

  .fixed-visual .txt-box{ max-width:600rem; padding:0 20rem; }
  .fixed-visual .cate{ margin-bottom:24rem; }
  .fixed-visual .txt{ gap:6rem; margin-top:32rem; } 
  .fixed-visual .btn-box{ margin-top:32rem; }
}

/* 가로형 텍스트&이미지 레이아웃 (예:회사소개 > 그룹가치체계 > Value) */
.cont-imglist-row{ position:relative; width:100%; height:512rem; }
.cont-imglist-row > div{ position:absolute; left:0; top:0; display:flex; align-items: center; width:100%; }
.cont-imglist-row > div .txt-box{ width:40.5%; transform: translateY(200rem); transition: all 0.5s ease; opacity: 0;}
.cont-imglist-row > div .txt-box strong{ display: block; color:#1A1A1A; }
.cont-imglist-row > div .txt-box p{ margin-top:16rem; max-width:480rem; color:#4D4D4D; }

.cont-imglist-row > div .img-box{ width:59.5%; }
.cont-imglist-row > div .img-box div{ position:relative; height:512rem; border-radius:24rem; overflow:hidden; }
.cont-imglist-row > div .img-box div img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; transform: scale(1.5); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: all 1s ease;}
 
@media screen and (min-width: 1025px) {
  .cont-imglist-row > div.hide .txt-box{ transform: translateY(-200rem); opacity: 0;}
  .cont-imglist-row > div.active .txt-box{ transform: translateY(0); opacity: 1;}
  .cont-imglist-row > div.active .img-box div img{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1);}
  .cont-imglist-row > div.hide .img-box div img{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1);}
}
@media screen and (max-width:1024px) {
  .cont-imglist-row{ display: flex; flex-direction: column; gap:40rem; height:auto; }
  .cont-imglist-row > div{ position: relative; left:auto; top:auto; flex-direction: column; transform: translateY(200rem); transition: all 0.7s ease; opacity: 0; }
  .cont-imglist-row > div.active{ transform: translateY(0); opacity: 1; }
  .cont-imglist-row > div .txt-box{ width:100%; transform: translateY(0); opacity: 1;} 
  .cont-imglist-row > div .txt-box p{ max-width:100%; }
  .cont-imglist-row > div .img-box{ margin-top:24rem; width:100%; }
  .cont-imglist-row > div .img-box div{ height:214rem;}
  .cont-imglist-row > div .img-box div img{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1.5);}
  .cont-imglist-row > div.active .img-box div img{ transform: scale(1); }
} 

/* 가로형 텍스트&이미지 교차 레이아웃 (예:사업소개 > 선수미 블록) */
.cont-imglist-reverse{ display:flex; flex-direction: column; gap:76rem; }
.cont-imglist-reverse > div > div{ display:flex; align-items: center; gap:20rem; flex:1; }
.cont-imglist-reverse > div:nth-child(even) > div{ flex-direction: row-reverse }
.cont-imglist-reverse .txt-box{ width:50%; box-sizing:border-box; }
.cont-imglist-reverse > div:nth-child(even) > div .txt-box{ padding-left:97rem; }
.cont-imglist-reverse .txt-box strong{ display:block; color:#000; }
.cont-imglist-reverse .txt-box p{ margin-top:16rem; max-width:465rem; color:#000; font-weight: 400;}
.cont-imglist-reverse .img-box{ width:50%; }
.cont-imglist-reverse .img-box div{position:relative; height:504rem; border-radius:24rem; overflow:hidden; }
.cont-imglist-reverse .img-box div img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; transform: scale(1.5); } 

@media screen and (max-width: 1024px) { 
  .cont-imglist-reverse{ gap:40rem; }
  .cont-imglist-reverse > div > div{ gap:24rem; }
  .cont-imglist-reverse > div:nth-child(even) > div .txt-box{ padding-left:30rem; }
  .cont-imglist-reverse .txt-box strong{ font-size:20rem; }
  .cont-imglist-reverse .txt-box p{ margin-top:12rem; max-width:465rem; }
  .cont-imglist-reverse .img-box div{ height:220rem; border-radius:12rem; } 
}

@media screen and (max-width: 600px) { 
  .cont-imglist-reverse > div > div{ flex-direction: column !important;} 
  .cont-imglist-reverse .txt-box{ width:100%; }
  .cont-imglist-reverse > div:nth-child(even) > div .txt-box{ padding-left:0; }
  .cont-imglist-reverse .img-box{ width:100%; }
}

/* 이미지 롤링 (예:사업소개 > 곡 블록) */
.cont-imglist-marquee{ overflow:hidden; }
.cont-imglist-marquee .inner{ display:inline-flex; animation: marquee 35s linear infinite; }
.cont-imglist-marquee .inner > div{ display: flex; gap:20rem; padding:0 20rem; }
.cont-imglist-marquee .inner > div > div{ width:755rem; border-radius:24rem; overflow: hidden; }
.cont-imglist-marquee .inner > div > div img{ width: 100%;}

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

@media screen and (max-width: 1024px) { 
  .cont-imglist-marquee{ overflow:hidden; }
  .cont-imglist-marquee .inner{ animation:none; }
  .cont-imglist-marquee .inner > div{ flex-direction: column; gap:20rem; padding:0 20rem; }
  .cont-imglist-marquee .inner > div > div{ width:100%; border-radius:12rem; } 
  .cont-imglist-marquee .inner > div.hide-mo{ display:none; }
}

/* ============================
  개별 페이지 스타일
============================ */
/* 개요 */
.sec-overview {position: relative; padding-top: 120rem; padding-bottom: 120rem; background: #fff;}
.sec-overview .cont-box .txt-bg {background: url("../images/img-overview-content-bg.png") no-repeat center; background-size: cover; height: 640rem; position: relative; margin-top: 40rem; border-radius: 24rem;}
.sec-overview .cont-box .txt-bg .txt {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; padding: 20rem; text-align: center; color: #fff;}
.sec-overview .cont-box .txt-detail {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16rem; text-align: center; color: #1A1A1A; margin-top: 28rem;}
.sec-overview .cont-box .txt-detail .sub-tit {margin-bottom: 8rem;}
.sec-business-part {position: relative; padding-top: 120rem; padding-bottom: 200rem; background: #F2F5F9;}
.sec-business-part .cont-box {position: relative; display: flex; align-items: flex-start; justify-content: space-between;}
.sec-business-part .cont-box .left {position: sticky; top: 120rem; align-self: flex-start; width: calc(100% - 910rem);}
.sec-business-part .cont-box .left .btn-area {margin-top: 32rem;}
.sec-business-part .cont-box .right {flex: 1; display: flex; flex-direction: column; gap: 80rem; width: 910rem;}
.sec-business-part .cont-box .right .img-area p {width: 445rem;}
.sec-business-part .cont-box .right .img-area p img {width: 100%; border-radius: 12rem;}
.sec-business-part .cont-box .right .img-area {margin-top: 40rem; display: flex; justify-content: space-between; gap: 17rem; flex-wrap: wrap;}

@media screen and (max-width: 1024px) {
  .sec-overview{ padding:80rem 0; }
  .sec-overview .cont-box .txt-bg{ margin-top:32rem; }
  .sec-overview .cont-box .txt-detail li {flex:1 1 calc(33.33% - 16rem)}

  .sec-business-part{ padding:80rem 0 160rem;}
  .sec-business-part .cont-box {flex-direction: column;gap: 60rem;}
  .sec-business-part .cont-box .left {position: relative; top: 0;}
  .sec-business-part .cont-box .left .btn-area{ margin-top:24rem; }
  .sec-business-part .cont-box .right{ gap:43rem; }
  .sec-business-part .cont-box .right,
  .sec-business-part .cont-box .right .img-area p {width: 100%;}
  .sec-business-part .cont-box .right .f-t3{ font-size:20rem; letter-spacing:-0.4rem; }
  .sec-business-part .cont-box .right .img-area{ margin-top:24rem; }
}
@media screen and (max-width: 600px) {
  .sec-overview .cont-box .txt-detail li {flex: 1 1 calc(50% - 16rem);}
}

/* CEO인사말 */
.sec-ceo .cont-area {position: relative;}
.sec-ceo .cont-area .bg-img {width: 100%; display: block;}
.sec-ceo .cont-area .ceo-info {width: 100%; position: absolute; left: 0; bottom: 0; display: flex; justify-content: space-between;}
.sec-ceo .cont-area .ceo-info .tit {padding-top: 72rem; padding-left: 80rem;}
.sec-ceo .cont-area .ceo-info .img-area {padding-right: 153rem;}
.sec-ceo .cont-area .img-area img { /*width: 100%;*/ width:544rem; }
.sec-ceo .txt-area {display: flex; width: 100%; justify-content: space-between; margin-top: 64rem;}
.sec-ceo .txt-area .left {width: 445rem; color:#1A1A1A; }
.sec-ceo .txt-area .right {width: 755rem; color:#555; }
.sec-ceo .txt-area .right p + p {margin-top: 30rem;}
.sec-ceo .txt-area .right .last-txt {margin-top: 40rem; color:#000; }

@media screen and (max-width: 1024px) {
  .sec-ceo .cont-area .ceo-info { flex-direction: column; }
  .sec-ceo .cont-area .ceo-info .tit { position:absolute; left:0; top:65rem; width:100%; padding:0; }
  .sec-ceo .cont-area .ceo-info .tit .mt16{ margin-top:12rem; }
  .sec-ceo .cont-area .ceo-info .img-area { display:flex; justify-content: end; padding: 0 60rem 0 0; } 
  .sec-ceo .cont-area .img-area img{ width:70%; }
  .sec-ceo .txt-area { flex-direction: column; gap: 24rem; }
  .sec-ceo .txt-area .left,
  .sec-ceo .txt-area .right { width: 100%;}
  .sec-ceo .txt-area .left p.f-t2 br { display: none;}
  .sec-ceo .cont-area .bg-img { padding-top: 92rem;}
}
@media screen and (max-width: 600px) {
  
  .sec-ceo .cont-area .ceo-info .tit{ top:-20rem; }
  .sec-ceo .cont-area .ceo-info .img-area{ padding-right:30rem; }
  .sec-ceo .cont-area .img-area img{ width:70%; }
  .sec-ceo .txt-area{ margin-top:48rem; }
 
}

/* 그룹 가치체계 */
.sec-vision{ display: flex; justify-content: center; align-items: center; height:100vh; }
.sec-vision h3{ margin-bottom:120rem; }

.sec-core-value{ padding:160rem 0; background:#F2F5F9; }
.sec-core-value h3{ margin-bottom:60rem; }
.sec-core-value .list-box{ display: flex; flex-wrap: wrap; gap:20rem; }
.sec-core-value .list-box > div { flex:1; height:490rem; }
.sec-core-value .list-box > div > div{ display: flex; flex-direction: column; justify-content: center; height:100%; background:#fff; border-radius:12rem; }
.sec-core-value .list-box > div:nth-child(even){ margin-top:49rem; }
.sec-core-value .list-box .icon-box{ margin:0 auto 24rem; width:160rem; }
.sec-core-value .list-box .icon-box img{ width:100%; }
.sec-core-value .list-box .txt-box{ text-align:center; }
.sec-core-value .list-box .txt-box strong{ display: block; color:#1A1A1A; }
.sec-core-value .list-box .txt-box p{ margin-top:8rem; color:#4D4D4D; }

@media screen and (max-width: 1024px) { 
  .sec-vision{ padding:80rem 0; height:auto;} 
  .sec-vision h3{ margin-bottom:40rem; }

  .sec-core-value{ padding:80rem 0; }
  .sec-core-value h3{ margin-bottom:40rem; }
  .sec-core-value .list-box{ gap:20rem; }
  .sec-core-value .list-box > div{ flex:1 1 calc(50% - 10rem); height:480rem; }
  .sec-core-value .list-box > div:nth-child(even){ margin-top:0; }
  .sec-core-value .list-box .icon-box{ margin:0 auto 20rem; width:140rem; } 
}

@media screen and (max-width: 600px) {
  
    
  .sec-core-value .list-box{ flex-direction: column; }
  .sec-core-value .list-box > div{ flex:initial; }
}

/* 오시는 길 */
.sec-location .map-box{ border-radius:24rem; overflow:hidden; }
.sec-location .map-box .root_daum_roughmap{ margin-left:-1px; margin-top:-1px;}
.sec-location .map-box .root_daum_roughmap, .sec-location .map-box .wrap_map{ width:calc(100% + 2px); height:640rem; }
.sec-location .map-box .wrap_controllers{ display: none;}
.sec-location .map-box .cont{ display:none; }
.sec-location .map-box .wrap_btn_zoom{ display:none; }
.sec-location .info-box{ display: flex; gap:20rem; margin-top:64rem; } 
.sec-location .info-box dl{ width:37%; }
.sec-location .info-box dt{ color:#1A1A1A;}
.sec-location .info-box dd{ margin-top:16rem; color:#1A1A1A; }

@media screen and (max-width: 1024px) { 
  .sec-location .map-box{ border-radius:12rem; }
  .sec-location .map-box .root_daum_roughmap, .sec-location .map-box .wrap_map{ height:480rem; } 
  .sec-location .info-box{flex-direction: column; gap:40rem; margin-top:40rem; } 
  .sec-location .info-box dl{ width:100%; }
  .sec-location .info-box dd{ margin-top:16rem; }
}

/* 사업소개 */
.sec-tit-s1{ margin-bottom:120rem; text-align: center; }
.sec-tit-s1 h3{ color:#000; }
.sec-tit-s1 .txt{ display: flex; flex-direction: column; gap: 8rem; margin-top:40rem; }
.sec-tit-s1 .txt p{ font-weight: 700; color:#555; }

.sec-biz-01{ padding-top:160rem; }
.sec-biz-02{ padding-top:150rem; }

@media screen and (max-width: 1024px) { 
  .sec-tit-s1{ margin-bottom:60rem; }
  .sec-tit-s1 .txt{ margin-top:24rem; }
  .sec-biz-01{ padding-top:80rem; }
  .sec-biz-02{ padding-top:80rem; }
}

/* 푸터 메뉴 */
.cont-wrap .board-top .srch-area .form-select.w320 {width: 320rem;}
.srch-area .srch-btn { padding:0 27rem; min-width:80rem; border-radius: 4rem;}
.cont-wrap .board-content-top {background: #F2F5F9; border-radius: 12rem; padding: 60rem; color: #555;}
.board-content-top .tit {color: #1A1A1A; font-weight: 700;}
.cont-wrap .board-content-body {margin-top: 80rem; display: flex; flex-direction: column; gap: 60rem; color: #4d4d4d; font-weight: 400;}
.cont-wrap .board-content-body .tit {color: #1A1A1A; margin-bottom: 16rem;}
.cont-wrap .board-content-body .txt + .txt {margin-top: 8rem;}
.cont-wrap .board-content-body .txt .num {color: #1a1a1a; margin-right: 10rem;}
.cont-wrap .board-content-body .txt span {display: inline-block}
.cont-wrap .board-content-body .tit + .table_type{ margin-top:0; }
.board-content-top .e-top {display: flex; flex-direction: column; gap: 24rem; position: relative; padding-bottom: 32rem; color: #4d4d4d;}
.board-content-top .e-top::before {content: ''; position: absolute; left: 0; bottom: 0; width: 1100rem; height: 1rem; background: #d9d9d9;}
.board-content-top .e-bottom {display: flex; flex-direction: column; gap: 16rem; padding-top: 32rem;}
.board-content-top .e-bottom .sub-txt {color: #666;}

@media screen and (max-width: 1024px) {
  .srch-area .srch-btn { min-height: 48rem; height: 48rem;}
  .cont-wrap .board-content-top { padding: 40rem;}
}

/* ETC */
.error_wrap {position: relative; width: 100%; height: 100vh; background: #FFF;}
.error_wrap .error_div {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;}
.error_wrap .error_div.error_flex {display: flex; flex-direction: column; gap: 40rem;}
.error_wrap .error_div .txt2 {margin-top: 20rem;}
.error_wrap .error_div .txt3 {color: #555;}
.error_wrap .systme_div .txt3 {margin-top: 20rem;}
.error_wrap .systme_div .txt-wrap {background: #F2F5F9; border-radius: 12rem; padding: 40rem; display: flex; justify-content: center;}
.error_wrap .systme_div .txt-wrap .txt-area {display: flex; flex-direction: column; gap: 14rem; align-items: flex-start; text-align: left;}
.error_wrap .systme_div .txt-area .txt4 {margin-right: 16rem;}

@media screen and (max-width: 1024px) {
  .error_wrap .systme_div .txt-area p {display: flex; flex-direction: column; align-items: flex-start; gap: 8rem;}
}

/* 브라우저 업데이트 안내 */
.browser-update .tit{ display:block; }
.browser-update .browser-list{ display:flex; gap:12rem; margin-top:24rem; }
.browser-update .browser-list a{ display: flex; flex-direction: column; justify-content: center; align-items: center; flex:1; height:200rem; border-radius:12rem; background:#F2F5F9; transition: box-shadow 0.5s ;}
.browser-update .browser-list a:hover{ box-shadow:none;}
.browser-update .browser-list a img{ width:64rem; }
.browser-update .browser-list a strong{ display:block; position:relative; padding-right:20rem; margin-top:16rem; }
.browser-update .browser-list a strong .arrow{ display:inline-block; position: absolute; right:0; top:50%; margin-top:-7rem; width:16rem; height:16rem; background:url('../images/icon-browser-arrow.svg') no-repeat center / cover; }
.browser-update .txt-box{ display: flex; flex-direction: column; gap:20rem; margin-top:24rem; text-align: center; color:#555; }
.browser-update .txt-box strong{ color:#000; } 

@media screen and (max-width : 600px) { 
  .browser-update .browser-list{ flex-direction: column; gap:5rem; margin-top:20rem; }
  .browser-update .browser-list a{ flex: auto; height:100rem; } 
  .browser-update .browser-list a img{ width:30rem; }
  .browser-update .browser-list a strong{ padding-right:15rem; margin-top:10rem; }
  .browser-update .browser-list a strong .arrow{ margin-top:-5rem; width:10rem; height:10rem; background:url('../images/icon-browser-arrow-m.svg') no-repeat center / cover; }
  .browser-update .txt-box{  gap:0; margin-top:20rem; } 
  .browser-update .txt-box p strong{ font-weight:400; color:#555; }
}

/* 로딩 */
.loading{ position:fixed; left:0; top:0; display: flex; justify-content: center; align-items: center; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:10000; }
.loading .icon{ position:relative; margin:0 auto; display: flex; justify-content: center; align-items: center; width:100rem; height:100rem; }  
.loading svg{ animation: loadingrotate 2s linear infinite; transform-origin: center center; }
.loading circle{ stroke-dasharray:150; stroke-dashoffset: 150; animation: loadingdash 3s linear infinite;  }
.loading .txt{ margin-top:40rem; color:#fff; text-align:center; }

@keyframes loadingrotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes loadingdash {
  0%,100% {
    stroke-dashoffset: 150;
  }
  50% {
    stroke-dashoffset: 0;
  } 
  50.1% {
    stroke-dashoffset: 300;
  } 
}

/* 세로모드 */
.only-vertical-view {display: none;}
.only-vertical-view {position: fixed; top: 0; left: 0; right: 0; bottom: 0;  width: 100%; height: 100%; z-index: 999999; background: #fff;}
.only-vertical-view .cont-box { display: flex; flex-direction: column; align-items: center; justify-content: center; height:100%; }
.only-vertical-view .cont-box > div{ padding-top:164rem; background:url('../images/icon-only-vertical-view.svg') no-repeat center top / 180rem auto; }
.only-vertical-view .cont-box img{ display: block; margin:0 auto; width:140rem; }
.only-vertical-view .cont-box p{ margin-top:24rem; color:#555; }
.only-vertical-view .cont-box p strong{ color:#000; } 

@media (orientation: landscape) and (pointer: coarse) {
  @media (max-height: 414px) and (max-width: 1023px) {
    .only-vertical-view.on {display: block;}
    body.vertical {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
  }
}