@charset "utf-8";

.over_zum { background:#; overflow: hidden; }
.over_zum  img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
	opacity:1.0;
}
.over_zum:hover img {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);   
    -o-transform:scale(1.2);
    transform:scale(1.2);
	opacity:1.0;
}

body { background-image: linear-gradient(to bottom, #ebf2f8 60%, #fff 50%); width:100%; }

/* ── KCHM 이미지 롤링 섹션 ── */
#kchm-roll{
  position:relative;
  background:#ebf2f8;
  margin:50px 0;
  padding:80px 0 300px;
  overflow:hidden;
}

/* KCHM 텍스트 마스크 컨테이너 */
.kchm-mask-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* SVG clip text + 롤링 이미지 */
.kchm-text-svg{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
}

/* 롤링 이미지 트랙 */
.kchm-img-track{
  display:flex;
  gap:0;
  height:100%;
  /* animation은 JS가 붙임 */
}
.kchm-img-track img{
  height:420px;
  width:auto;
  object-fit:cover;
  flex-shrink:0;
  display:block;
}

#kchm-roll .human { position:absolute; left:55%; top:65%; transform:translate(-50%) translateY(-50%); margin:0 auto; width:25%; z-index:9; }
#kchm-roll .human img { width:100%;  }


/* scroll indicator */
.scroll-hint{ 
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  animation:scrollBounce 2.2s ease-in-out infinite;
}
.scroll-hint span{font-size:9px;letter-spacing:2.5px;color:#1650b8;text-transform:uppercase}
.scroll-mouse{width:19px;height:31px;border:1.5px solid #1650b8;border-radius:9px;position:relative}
.scroll-mouse::after{
  content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:2.5px;height:5px;background:#1650b8;border-radius:2px;
  animation:scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(7px)}}
@keyframes scrollDot{0%,100%{opacity:1;transform:translateX(-50%)}60%{opacity:0;transform:translateX(-50%) translateY(9px)}}



/*KCHM의 소중한 조합원을 소개합니다.*/
#mp{ position:relative; background:url(../images/mp_bg.jpg) center no-repeat; background-attachment:fixed; background-size:cover; padding:30px 0 130px; overflow:hidden; }

.ticker-wrap{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.ticker-track{ background:rgba(0,33,83,0.8); padding:40px 0; margin:40px 0; 
  display:flex;width:max-content;
  animation:tickL 80s linear infinite; /* 슬라이드 속도 조절 : s 클수록 느려짐*/
}

.ticker-track.rev{animation-direction:reverse; }
.ticker-track:hover{animation-play-state:paused}
.t-item{ 
  display:flex;align-items:center;gap:10px;
  padding:0 36px;min-width:188px;justify-content:center;
  border-right:1px solid rgba(255,255,255,.1);
  font-size:20px;font-weight:500;color:rgba(255,255,255,.8);
  white-space:nowrap;cursor:default;
  transition:color .25s;
}
.t-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
@keyframes tickL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── 공통 유틸 ── */
.rv{opacity:0;transform:translateY(38px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.on{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

#mp article { margin:100px 0 0; text-align:center; }
#mp article h2 { margin:10px 0; font-size:2.0rem; font-weight:700; color:#fff; line-height:2.8rem; }
#mp article h2 span { color:#5beeff; }
#mp article h2 span.yl { color:#ffdf7c; }
#mp article h3 { font-size:1.0rem; font-weight:600; color:#fff; line-height:1.5rem; }
#mp .btn { text-align:center; }
#mp .btn a { display:inline-block; margin:0 auto; padding:15px 25px; border-radius:6px; border:1px solid #8da0bf; color:#fff; text-align:center; transition:.3s; }
#mp .btn a:hover { background:#1650b8; border:1px solid #1650b8; }


@media (min-width:1600px) {
	
.view_pc{ display:block; }
.view_mob { display:none; }

#value { background:#ebf2f8; padding:0 0 100px; }
#value .wrapper { display:flex; justify-content:space-between; flex-wrap:wrap; width:90%; max-width:1600px; margin:0 auto; }
#value article { width:40%; margin:auto 0; }
#value article h2 { margin:20px 0; width:80%; font-size:2.0rem; font-weight:700; color:#111; line-height:2.8rem; }
#value article h3 { font-size:1.0rem; font-weight:700; color:#1650b8; line-height:1.5rem; }
#value article ul { display:flex; margin:40px 0 0; }
#value article ul li a { display:inline-block; border-radius:5px; border:1px solid #92acdb; background:#fff; margin-right:10px; padding:8px 20px; font-weight:500; color:#222; text-align:center; transition:.3s; }
#value article ul li a:hover { border:1px solid #1650b8; background:#1650b8; color:#fff; }
#value .content_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; width:50%; }
#value .content_wrap .content { border-radius:15px; background:#fff; padding:4% 5%; width:39%; margin:1% 0; transition:.3s; }
#value .content_wrap .content h3 { display:block; margin:15px 0 5px; font-weight:700; color:#08174d;}
#value .content_wrap .content p { font-size:0.95rem; color:#444; line-height:1.4rem; }
#value .content_wrap .content .ico img { height:50px; }

#customer { width:90%; max-width:1600px; margin:100px auto; }
#customer article {  }
#customer article h2 { margin:10px 0; width:80%; font-size:2.0rem; font-weight:700; color:#111; line-height:2.8rem; }
#customer article h3 { font-size:1.0rem; font-weight:700; color:#1650b8; line-height:1.5rem; }
#customer .content_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; height:100%; margin:40px 0 0; }
#customer .content_wrap .content { width:26%; border-radius:10px; background:#f3f3f3; padding:2% 3%; }
#customer .content_wrap .content .tit { display:flex; justify-content:space-between; flex-wrap:wrap; border-bottom:1px solid #c7cede; padding:0 0 15px; }
#customer .content_wrap .content .tit h2 { margin:auto 0; font-size:1.3rem; font-weight:700; color:#08174d; }
#customer .content_wrap .content .list { margin:30px 0 0; }
#customer .content_wrap .content:nth-child(3) { display:flex; flex-direction:column; background:url(../images/main_event_bg.jpg) center/cover no-repeat; padding:0; width:32%; }
#customer .content_wrap .content:nth-child(3) h2 { margin:10px 0; font-size:1.3rem; color:#fff; line-height:2.0rem; }
#customer .content_wrap .content:nth-child(3) h3 { font-size:0.9rem; color:#ffdf7c; }
#customer .content_wrap .content:nth-child(3) p { color:#9aa6c4; margin:0 0 50px; }
#customer .content_wrap .content:nth-child(3) span { display:inline-block; margin-top:auto; border-radius:5px; background:#ffdf7c; padding:6px 15px; font-weight:600; color:#222; text-align:center; } 
#customer .content_wrap .content:nth-child(3) a { display:block; padding:6% 8%; }



/*기본게시판*/
.latestBBS { clear: both; margin-left:0;}
.latestBBS li { border-bottom:0px solid #dedede; padding:5px 0; overflow:hidden; }
.latestBBS li .title { display:inline-block; width:75%; font-size:1.0rem; font-weight:500; color:#; line-height:1.5rem; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.latestBBS li img {display:none;}
.latestBBS li .text {display:none;}
.latestBBS li .date {display:; float:right; font-size:0.9rem; color:#909090; line-height:1.4rem; letter-spacing:0.5px;}


}


@media (min-width:768px) and (max-width:1599px){

.view_pc{ display:block; }
.view_mob { display:none; }

/* KCHM 텍스트 마스크 컨테이너 */
.kchm-mask-wrap{
  position:relative;
  width:80%; margin:0 auto;
  overflow:hidden;
}
#kchm-roll{
  position:relative;
  background:#ebf2f8;
  margin:50px 0;
  padding:80px 0 180px;
  overflow:hidden;
}
#kchm-roll .human { position:absolute; left:55%; top:65%; transform:translate(-50%) translateY(-50%); margin:0 auto; width:25%; z-index:9; }
#kchm-roll .human img { width:100%;  }

#value { background:#ebf2f8; padding:0 0 100px; }
#value .wrapper { display:flex; justify-content:space-between; flex-wrap:wrap; width:90%; margin:0 auto; }
#value article { width:40%; margin:auto 0; }
#value article h2 { margin:20px 0; width:80%; font-size:2.0rem; font-weight:700; color:#111; line-height:2.8rem; }
#value article h3 { font-size:1.0rem; font-weight:700; color:#1650b8; line-height:1.5rem; }
#value article ul { display:flex; margin:40px 0 0; }
#value article ul li a { display:inline-block; border-radius:5px; border:1px solid #92acdb; background:#fff; margin-right:10px; padding:8px 20px; font-weight:500; color:#222; text-align:center; transition:.3s; }
#value article ul li a:hover { border:1px solid #1650b8; background:#1650b8; color:#fff; }
#value .content_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; width:50%; }
#value .content_wrap .content { border-radius:15px; background:#fff; padding:5%; width:39%; margin:1% 0; transition:.3s; }
#value .content_wrap .content h3 { display:block; margin:15px 0 5px; font-weight:700; color:#08174d;}
#value .content_wrap .content p { font-size:0.95rem; color:#444; line-height:1.4rem; }
#value .content_wrap .content .ico img { height:40px; }

#mp{ position:relative; background:url(../images/mp_bg.jpg) center no-repeat; background-attachment:fixed; background-size:cover; padding:20px 0 110px; overflow:hidden; }
.ticker-track{ background:rgba(0,33,83,0.8); padding:30px 0; margin:30px 0; 
  display:flex;width:max-content;
  animation:tickL 30s linear infinite;
}

#customer { width:90%; margin:90px auto; }
#customer article {  }
#customer article h2 { margin:10px 0; width:80%; font-size:2.0rem; font-weight:700; color:#111; line-height:2.8rem; }
#customer article h3 { font-size:1.0rem; font-weight:700; color:#1650b8; line-height:1.5rem; }
#customer .content_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; height:100%; margin:40px 0 0; }
#customer .content_wrap .content { width:26%; border-radius:10px; background:#f3f3f3; padding:3%; }
#customer .content_wrap .content .tit { display:flex; justify-content:space-between; flex-wrap:wrap; border-bottom:1px solid #c7cede; padding:0 0 15px; }
#customer .content_wrap .content .tit h2 { margin:auto 0; font-size:1.3rem; font-weight:700; color:#08174d; }
#customer .content_wrap .content .tit span img { height:30px; }
#customer .content_wrap .content .list { margin:25px 0 0; }
#customer .content_wrap .content:nth-child(3) { display:flex; flex-direction:column; background:url(../images/main_event_bg.jpg) center/cover no-repeat; padding:0; width:32%; }
#customer .content_wrap .content:nth-child(3) h2 { margin:10px 0; font-size:1.2rem; color:#fff; line-height:1.9rem; }
#customer .content_wrap .content:nth-child(3) h3 { font-size:0.9rem; color:#ffdf7c; }
#customer .content_wrap .content:nth-child(3) p { color:#9aa6c4; margin:0 0 50px; }
#customer .content_wrap .content:nth-child(3) span { display:inline-block; margin-top:auto; border-radius:5px; background:#ffdf7c; padding:6px 15px; font-weight:600; color:#222; text-align:center; } 
#customer .content_wrap .content:nth-child(3) a { display:block; padding:6% 8%; }


/*기본게시판*/
.latestBBS { clear: both; margin-left:0;}
.latestBBS li { border-bottom:0px solid #dedede; padding:5px 0; overflow:hidden; }
.latestBBS li .title { display:inline-block; width:60%; font-size:1.0rem; font-weight:500; color:#; line-height:1.5rem; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.latestBBS li img {display:none;}
.latestBBS li .text {display:none;}
.latestBBS li .date {display:; float:right; font-size:0.9rem; color:#909090; line-height:1.4rem; letter-spacing:0.5px;}

}



@media (max-width:767px){
	
.view_pc{ display:none; }
.view_mob { display:block; }	

/* KCHM 텍스트 마스크 컨테이너 */
.kchm-mask-wrap{
  position:relative;
  width:85%; margin:0 auto;
  overflow:hidden;
}
#kchm-roll{
  position:relative;
  background:#ebf2f8;
  margin:0 0;
  padding:80px 0 150px;
  overflow:hidden;
}
#kchm-roll .human { position:absolute; left:64%; top:60%; transform:translate(-50%) translateY(-50%); margin:0 auto; width:50%; z-index:9; }
#kchm-roll .human img { width:100%;  }

.scroll-hint { bottom:0; padding:0 0 10px; }
.scroll-hint span{font-size:9px;letter-spacing:2.5px;color:#1650b8;text-transform:uppercase}
.scroll-mouse{width:15px;height:27px;border:1.5px solid #1650b8;border-radius:9px;position:relative}
.scroll-mouse::after{
  content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:2.5px;height:5px;background:#1650b8;border-radius:2px;
  animation:scrollDot 2.2s ease-in-out infinite;
}

#value { background:#ebf2f8; padding:30px 0 70px; }
#value .wrapper { width:85%; margin:0 auto; }
#value article { margin:auto 0; }
#value article h2 { margin:10px 0 15px; font-size:1.2rem; font-weight:700; color:#111; line-height:1.8rem; }
#value article h3 { font-size:0.9rem; font-weight:700; color:#1650b8; line-height:1.5rem; }
#value article ul { display:flex; margin:30px 0 0; }
#value article ul li a { display:inline-block; border-radius:5px; border:1px solid #92acdb; background:#fff; margin-right:10px; padding:8px 20px; font-weight:500; color:#222; text-align:center; transition:.3s; }
#value article ul li a:hover { border:1px solid #1650b8; background:#1650b8; color:#fff; }
#value .content_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; margin:40px 0 0; }
#value .content_wrap .content { border-radius:15px; background:#fff; padding:7%; width:35%; margin:1% 0; transition:.3s; }
#value .content_wrap .content h3 { display:block; margin:10px 0 5px; font-size:1.0rem; font-weight:700; color:#08174d;}
#value .content_wrap .content p { font-size:0.95rem; color:#444; line-height:1.4rem; }
#value .content_wrap .content .ico img { height:30px; }


#mp{ position:relative; background:url(../images/mp_bg_mob.jpg) center no-repeat; background-attachment:fixed; background-size:cover; padding:0 0 60px; overflow:hidden; }
.ticker-track{ background:rgba(0,33,83,0.8); padding:30px 0; margin:20px 0; 
  display:flex;width:max-content;
  animation:tickL 30s linear infinite;
}
.ticker-track:hover{animation-play-state:running;}
.t-item{ 
  display:flex;align-items:center;gap:10px;
  padding:0 20px;min-width:120px;justify-content:center;
  border-right:1px solid rgba(255,255,255,.1);
  font-size:16px;font-weight:500;color:rgba(255,255,255,.8);
  white-space:nowrap;cursor:default;
  transition:color .25s;
}
#mp article { margin:70px auto 0; width:80%; text-align:center; }
#mp article h2 { margin:10px 0; font-size:1.3rem; font-weight:700; color:#fff; line-height:2.0rem; }
#mp article h2 span { color:#5beeff; }
#mp article h2 span.yl { color:#ffdf7c; }
#mp article h3 { font-size:1.0rem; font-weight:600; color:#fff; line-height:1.5rem; }
#mp .btn { margin:10px 0 0; text-align:center; }
#mp .btn a { display:inline-block; margin:0 auto; padding:10px 18px; border-radius:6px; border:1px solid #8da0bf; font-size:0.9rem; font-weight:500; color:#fff; text-align:center; transition:.3s; }
#mp .btn a:hover { background:#1650b8; border:1px solid #1650b8; }

#customer { width:85%; margin:60px auto; }
#customer article {  }
#customer article h2 { margin:5px 0; font-size:1.3rem; font-weight:700; color:#111; line-height:2.0rem; }
#customer article h3 { font-size:1.0rem; font-weight:700; color:#1650b8; line-height:1.5rem; }
#customer .content_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; margin:15px 0 0; }
#customer .content_wrap .content { margin:10px 0; width:84%; border-radius:10px; background:#f3f3f3; padding:8%; }
#customer .content_wrap .content .tit { display:flex; justify-content:space-between; flex-wrap:wrap; border-bottom:1px solid #c7cede; padding:0 0 15px; }
#customer .content_wrap .content .tit h2 { margin:auto 0; font-size:1.1rem; font-weight:700; color:#08174d; }
#customer .content_wrap .content .tit span img { height:20px; }
#customer .content_wrap .content .list { margin:20px 0 0; }
#customer .content_wrap .content:nth-child(3) { display:flex; flex-direction:column; background:url(../images/main_event_bg.jpg) center/cover no-repeat; width:100%; }
#customer .content_wrap .content:nth-child(3) h2 { margin:10px 0; font-size:1.1rem; color:#fff; line-height:1.9rem; }
#customer .content_wrap .content:nth-child(3) h3 { font-size:0.9rem; color:#ffdf7c; }
#customer .content_wrap .content:nth-child(3) p { color:#9aa6c4; margin:0 0 30px; }
#customer .content_wrap .content:nth-child(3) span { display:inline-block; margin-top:auto; border-radius:5px; background:#ffdf7c; padding:6px 15px; font-weight:600; color:#222; text-align:center; } 
#customer .content_wrap .content:nth-child(3) a { display:block; padding:5%; }



/*기본게시판*/
.latestBBS { clear: both; margin-left:0;}
.latestBBS li { border-bottom:0px solid #dedede; padding:10px 0 6px; overflow:hidden; }
.latestBBS li .title { display:inline-block; width:65%; font-size:1.0rem; font-weight:400; color:#111; line-height:1.5rem; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.latestBBS li img {display:none;}
.latestBBS li .text {display:none;}
.latestBBS li .date {display:; float:right; font-size:0.8rem; color:#909090; line-height:1.4rem; letter-spacing:0;}


}








/*갤러리게시판
.latestGallery li { float:left; width:200px; margin:0 10px 20px 10px;}
.latestGallery li:last-child { margin-right:0px;}
.latestGallery li .img img { width:198px; border:1px #e3e3e3 solid; }
.latestGallery li .caption { width:200px; height:30px; margin-top:10px; font-size:16px; font-weight:400; text-align:center; overflow:hidden; z-index:9; }
*/