@charset "utf-8";

/* sub 공통 ========================================================================================= */
figure { margin: 0; }

/* sub 상단 ========================================================================================= */
.sub_visual { position: relative; max-width: 2560px; margin: 0 auto; height: 700px; overflow: hidden; background-repeat: no-repeat; background-position: center top; }
.sub_visual.visual01 .bg { background-image: url(../img/sub_visual01.jpg); }
.sub_visual.visual02 .bg { background-image: url(../img/sub_visual02.jpg); }
.sub_visual.visual03 .bg { background-image: url(../img/sub_visual03.jpg); }
.sub_visual.visual04 .bg { background-image: url(../img/sub_visual04.jpg); }
.sub_visual.visual05 .bg { background-image: url(../img/sub_visual05.jpg); }
.sub_visual.visual06 .bg { background-image: url(../img/sub_visual06.jpg); }

.sub_visual .title_warp { max-width: 1600px; margin: 0 auto; padding: 0 20px;text-align: right; }
.sub_visual .title_warp .title_page { height: 522px; position: relative; text-align: left;  margin: 0;transform: translateY(40%);  z-index: 2;}
.sub_visual h3 {font-size: 19px; font-weight: 500;padding-bottom: 10px; letter-spacing: 1px;  color: #fff; opacity: 0.8;}
.sub_visual h3.sub_title {font-size: 17px; font-weight: 400; padding-top:10px; letter-spacing: 1px; color: #fff; opacity: 0.8; text-align: center; margin-left: 10px}
.sub_visual .main_title {  font-size: 60px; font-weight: 600;text-align: center;  color: #fff;  letter-spacing: -1px; }

.sub_visual .inBox { font-size: 14px; padding-top: 10px; color: #fff; }
.sub_visual .inBox i { font-size: 14px; color: #fff; display: inline-block; }
.sub_visual .inBox a { padding: 0 13px 0 0; }
.sub_visual .inBox span { padding: 0 13px; opacity: 0.8; }
.sub_visual .inBox span.strong { opacity: 1; padding: 0 0 0 13px; }
.sub_visual .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/sub_visual_cover.png) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width: 1200px; opacity: 0.6; z-index: 1; }
.sub_visual .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.sub_visual.tmp { height: 100px; background-color: #000; }
.sub_visual.tmp .title_warp { display: none; }

.sub_visual h3, .sub_visual .main_title, .sub_visual .inBox { animation-duration: 0.7s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; -webkit-animation-duration: 0.7s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-name: visual-tit; -webkit-animation-name: visual-tit; }

.sub_visual .main_title { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.sub_visual .inBox { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; }

.sub_visual .bg { content: ""; animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-name: visual-zoom; -webkit-animation-name: visual-zoom; }

@keyframes visual-zoom { 0% { transform: scale(1.2); } 100% { transform: scale(1); } }
@-webkit-keyframes visual-zoom { 0% { transform: scale(1.2); } 100% { transform: scale(1); } }

@keyframes visual-tit { 0% { opacity: 0; -webkit-opacity: 0; transform: translateY(20px); } 100% { opacity: 1; -webkit-opacity: 1; transform: translateY(0px); } }
@-webkit-keyframes visual-tit { 0% { opacity: 0; -webkit-opacity: 0; transform: translateY(20px); } 100% { opacity: 1; -webkit-opacity: 1; transform: translateY(0px); } }

@media screen and (max-width: 576px) {
  .sub_visual { height: 422px; }
  .sub_visual .title_warp { width: 100%; }
  .sub_visual .title_warp .title_page { height: 422px; }
  .sub_visual h3 { font-size: 12px; }
  .sub_visual .main_title { font-size: 34px; }
  .sub_visual .inBox { font-size: 12px; }
}

/* 조직도 시작 */
/* 2025-10-23 상단 높이 및 넓이 조절 */
.sub_organization { width: 100%; max-width: 1560px; margin: 0 auto; padding-top: 57px}

.sub_organization h4{position:relative;margin:0 auto;width:280px;padding: 22px;border:1px solid #2222;background:#fff;font-size:20px;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-weight:700;border-radius:0px;color:#222;line-height:1.3}
.sub_organization h5{position:relative;margin:0 auto;width:280px;padding: 22px;border:1px solid #2222;background:#fff;font-size:20px;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-weight:700;border-radius:0px;color:#222;line-height:1.3}

.sub_organization h4:before{content:'';position:absolute;left:50%;transform:translateX(50%);bottom:-843px;width:1px;height:843px;background:#ddd;z-index:-1}

.sub_organization h4 span { font-size: 18px; color: #555;  font-weight: 400;}
.sub_organization h5 span { font-size: 18px; color: #555;  font-weight: 400;}

.sub_organization .dep {  position: relative; padding: 100px 0;display: flex; justify-content: space-between; align-items: center;}
.sub_organization .dep3 {  position: relative; padding: 20px 0;display: flex; justify-content: space-between; align-items: center;}
.sub_organization .dep4 {  position: relative; padding: 100px 0;display: flex; justify-content: space-between; align-items: center;}

/* 가로 선 */
.sub_organization .dep:before {  content: ''; position: absolute; top: 50px; left: 50%;  transform: translate(-50%, -50%);  width: 80%; height: 1px;  background: #ddd; z-index: -1;}
.sub_organization .dep3:before {  content: ''; position: absolute; top: 50px; left: 50%;  transform: translate(-50%, -50%);  width: 80%; height: 1px;  background: #ddd; z-index: -1;}
.sub_organization .dep4:before {  content: ''; position: absolute; top: 50px; left: 50%;  transform: translate(-50%, -50%);  width: 80%; height: 1px;  background: #ddd; z-index: -1;}

.sub_organization .dep dl dt { background: #222; color: #fff; font-weight: 600;}
.sub_organization .dep dl > * {  padding: 22px; text-align: center;font-size: 20px;}
.sub_organization .dep dl dd {  border: 1px solid #222; color: #222;}
.sub_organization .dep dl > * { padding: 22px; text-align: center; font-size: 20px;}
.sub_organization .dep dl {position: relative; width: 20%;}

.sub_organization .dep3 dl dt { background: #222; color: #fff; font-weight: 600;}
.sub_organization .dep3 dl > * {  padding: 22px; text-align: center;font-size: 20px;}
.sub_organization .dep3 dl dd {  border: 1px solid #222; color: #222;}
.sub_organization .dep3 dl > * { padding: 22px; text-align: center; font-size: 20px;}
.sub_organization .dep3 dl {position: relative; width: 20%;}

.sub_organization .dep dl:before{content:'';position:absolute;top:-50px;left:50%;width:1px;height:100%;background:#ddd;z-index:-1}

.sub_organization .dep4{display:flex;justify-content:space-between;align-items:stretch}
.sub_organization .dep4>dl{position:relative;width:20%}


/* 세로 선 */
.sub_organization .dep4>dl:before{content:'';position:absolute;left:50.4%;top:-50px;transform:translateX(-50%);width:1px;height:110px;background:#ddd;z-index:-1}

.sub_organization .dep4 dl dt{background:#ddd;color:#555;font-weight:600}
.sub_organization .dep4 dl > *{padding:22px;font-size:18px;text-align:center}
.sub_organization .dep4 dl dd{border:1px solid #ddd;background:#fff}
.sub_organization .dep4 dl dd ul {  font-size: inherit;}
.sub_organization .dep4 dl dd ul li { line-height: 2.2; font-size: inherit;}

.sub_organization .dep2{display:flex;justify-content:space-between;align-items:stretch}
.sub_organization .dep2>dl{position:relative;width:20%}

.sub_organization .dep2>dl:before{content:'';position:absolute;left:50%;top:-100px;transform:translateX(-50%);width:1px;height:200px;background:#eee;z-index:-1}

.sub_organization .dep2 dl dt{background:#ddd;color:#555;font-weight:600}
.sub_organization .dep2 dl > *{padding:22px;font-size:18px;text-align:center}
.sub_organization .dep2 dl dd{border:1px solid #ddd;background:#fff}
.sub_organization .dep2 dl dd ul {  font-size: inherit;}
.sub_organization .dep2 dl dd ul li { line-height: 2.2; font-size: inherit;}

@media screen and (max-width: 992px) {
    .sub_organization .dep { font-size: 1.4rem;}
    .sub_organization .dep dl dt { font-size:18px;}
    .sub_organization .dep dl dd { font-size:16px;}

	/* 추가 */
	.sub_organization .dep3 { font-size: 1.4rem;}
    .sub_organization .dep3 dl dt { font-size:18px;}
    .sub_organization .dep3 dl dd { font-size:16px;}
	

	.sub_organization .dep4 { font-size: 1.4rem;}
    .sub_organization .dep4 dl dt { font-size:18px;}
    .sub_organization .dep4 dl dd { font-size:16px;}
	/* 추가 끝 */

    .sub_organization .dep2 dl dd ul li { font-size:16px;}
    .sub_organization .dep2 dl > * { font-size: 16px; line-height: 1.3;}
    .sub_organization h4 { font-size: 2rem;border: 1px solid #e2e2e2; }
    .sub_organization h4 span { font-size: 1.0rem;}

	.sub_organization h5 { font-size: 2rem;border: 1px solid #e2e2e2; }
    .sub_organization h5 span { font-size: 1.0rem;}
}


@media screen and (max-width: 768px) {
    .sub_organization .dep { padding: 40px 0;}
    .sub_organization .dep, .sub_organization .dep2 {flex-wrap: wrap;}

	/* 추가 */
	.sub_organization .dep3 { padding: 40px 0;}
    .sub_organization .dep3, .sub_organization .dep4 {flex-wrap: wrap;}

	.sub_organization .dep4 { padding: 40px 0;}
    .sub_organization .dep4, .sub_organization .dep4 {flex-wrap: wrap;}
	/* 추가 끝 */

    .sub_organization .dep2 dl dd ul li { line-height: 2.4;}
    
	.sub_organization h4 { width: 200px;height: 100px; font-size: 1.8rem;}
    .sub_organization h4:before, .sub_organization .dep:before, .sub_organization .dep dl:before, .sub_organization .dep2 > dl:before { display: none;}

	.sub_organization h4 { width: 200px;height: 100px; font-size: 1.8rem;}
    .sub_organization h4:before, .sub_organization .dep:before, .sub_organization .dep3 dl:before, .sub_organization .dep4 > dl:before { display: none;}


    .sub_organization h5 { width: 200px;height: 100px; font-size: 1.8rem;}
    .sub_organization h5:before, .sub_organization .dep:before, .sub_organization .dep dl:before, .sub_organization .dep2 > dl:before { display: none;}

	.sub_organization h5 { width: 200px;height: 100px; font-size: 1.8rem;}
    .sub_organization h5:before, .sub_organization .dep:before, .sub_organization .dep3 dl:before, .sub_organization .dep4 > dl:before { display: none;}
    
	.sub_organization .dep dl, .sub_organization .dep2 dl {  margin: 5px 0;width: 49%; }

	/* 추가 */
	.sub_organization .dep3 dl, .sub_organization .dep4 dl {  margin: 5px 0;width: 49%; }
	.sub_organization .dep4 dl, .sub_organization .dep2 dl {  margin: 5px 0;width: 49%; }
    /* 추가 끝 */

    .sub_organization .dep2 dl > * { padding: 12px;}

	/* 추가 */
	.sub_organization .dep3 dl > * { padding: 15px 0;}
    .sub_organization .dep3 dl > * { font-size: 1.4rem;}

	.sub_organization .dep4 dl > * { padding: 15px 0;}
    .sub_organization .dep4 dl > * { font-size: 1.4rem;}
    /* 추가 끝 */
    .sub_organization .dep dl > * { padding: 15px 0;}
    .sub_organization .dep dl > * { font-size: 1.4rem;}
}

/* 조직도 끝 */

/* sub 제목 ========================================================================================= */
.content_wrap { width: 100%; }
.content_wrap .content_area { width: 100%; max-width: 1600px; margin: 0px auto; padding: 150px 20px 0px 20px; }
/* 찾아오시는길 지도 상단 여백을 위한 css 추가 */
.content_wrap .content_area2 { width: 100%; max-width: 1600px; margin: 0px auto; padding: 50px 20px 0px 20px; }
/* 메인 텍스트 높이 수정 */
.content_wrap .txtCon { max-width: 1600px; margin: 0 auto; padding: 50px 0px 0px 0px; clear: both; }
.content_wrap .txtCon .sub_title { text-align: left; padding: 0px 20px 50px 20px; }

.content_wrap .txtCon .sub_title2 { text-align: left; padding: 0px 20px 0px 20px; }

.content_wrap .txtCon .sub_title h2 { font-size: 45px; color: #000; }
.content_wrap .txtCon .sub_title2 h2 { font-size: 45px; color: #000; }

.content_wrap .txtCon .sub_title p { font-size: 18px; color: #555; padding-top: 10px; word-break: keep-all; }
.content_wrap .txtCon .sub_title2 p { font-size: 18px; color: #555; padding-top: 10px; word-break: keep-all; }

.content_wrap .txtboard { max-width: 1600px; margin: 0 auto; padding: 100px 20px 50px 20px; font-size: 12px; line-height: 1.75; letter-spacing: -0.02em; clear: both; }
.content_wrap .txtboard span { font-size: 14px; }

@media screen and (max-width: 576px) {
  .content_wrap .txtCon .sub_title { margin: 0px 0 0px; }
  .content_wrap .txtCon .sub_title h2 { font-size: 32px; }
}

/* sub 네비 ========================================================================================= */
.share-area { float: right; display: block; padding-top: 17px; box-sizing: border-box; }
.share-area .hide-wrap { width: 151px; height: 34px; overflow: hidden; float: left; }
.share-area .hide-wrap .hide-area { width: 151px; height: 34px; position: relative; left: 200px; }
.share-area .hide-wrap .hide-area ul { overflow: hidden; padding: 0; margin: 0; }
.share-area .hide-wrap .hide-area ul li { float: left; margin-left: 13px; cursor: pointer; }
.share-area .hide-wrap .hide-area ul li:first-child { margin-left: 0; }
.share-area .share-btn { width: 34px; height: 34px; background-image: url(../img/share_open_bt.png); float: right; text-indent: -9999px; padding-left: 18px; box-sizing: unset; background-repeat: no-repeat; background-position-x: right; transition: all 0.5s ease; background-color: inherit; border: 0; margin-right: 20px; }
.share-area .share-btn.active { background-image: url(../img/share_close_bt.png); border-left: 1px solid #fff; }

@media screen and (max-width: 768px) {
  .share-area { display: none; }
}

@media screen and (max-width: 576px) {
  .share-area .share-btn { display: none; }
  .share-area { display: none; }
}

/* sub wrap 넓이 설정 =============================================================================== */
.sub_wrap { font-size: 16px; padding: 150px 20px; }
.sub_wrap2 { font-size: 16px; padding: 50px 20px; }

.max_w1600 { width: 100%; max-width: 1600px; margin: 0 auto; }
.max-w1400 { width: 100%; max-width: 1400px; margin: 0 auto; }
.max-w1200 { width: 100%; max-width: 1200px; margin: 0 auto; }

.max_w1600_2 { width: 100%; max-width: 1600px; margin: 0 auto; }
.max-w1400_2 { width: 100%; max-width: 1400px; margin: 0 auto; }
.max-w1200_2 { width: 100%; max-width: 1200px; margin: 0 auto; }


/* greeting 인사말 ================================================================================== */
.greeting_visual { position: relative; display: flex; flex-wrap: wrap; flex-direction: row-reverse; font-size: 16px; margin-bottom: 144px; }
.greeting_visual figure { max-width: 858px; border-radius: 48px 48px 152px 48px; overflow: hidden; }

.visual_text_group { position: absolute; bottom: 0; left: 0; padding: 0; }
.visual_title { font-size: 58px; font-size: clamp(32px, 4vw, 58px); font-weight: 800; margin-bottom: 120px;}
.visual_signature > p { font-size: 18px;}

.signature_wrap { display: flex; align-items: center; }
.signature_name { font-size: 48px; font-weight: 700; margin: 0 32px 0 0;  }
.greeting_intro_wrap { max-width: 1600px; margin: 0 auto; color: #555;}

.greeting_intro { font-size: 18px; font-weight: 500; line-height: 1.65; margin-bottom: 72px;  }
.greeting_title { font-size: 32px; color: #000;  margin-bottom: 24px; letter-spacing: -1px }
.greeting_ul { font-size: 22px; font-size:18px }
.greeting_ul li { display: flex; }
.greeting_ul li + li { margin-top: 16px; }
.greeting_date { font-weight: 700; flex: 0 0 120px; color: #1a1a1a  }
.greeting_text { color: #555;}

@media (max-width: 1024px) {
  .greeting_visual { justify-content: center; margin-bottom: 80px; }
  .greeting_visual figure { max-width: unset; width: 100%; }
  .greeting_visual figure > img { width: 100%; }
  .visual_text_group { position: unset; display: flex; flex-direction: column; width: 100%; }
  .visual_title { margin: 40px 0; }
}

@media (max-width: 640px) {
  .signature_name { font-size: 32px; }
  .signature_wrap img { max-width: 122px; }
}





/* company_intro 회사소개 ==================================================================================== */
#hero { position: sticky; top: 0; z-index: 1; overflow: hidden; height: 464px; min-height: 464px; }

#hero .sticky_text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: #000; text-align: center; font-weight: 700; font-size: clamp(18px, 3vw, 36px); line-height: 1.35; pointer-events: none; transition: color 0.6s ease; }

#hero .sticky_image { position: relative; width: 100%; height: 100%; }

#hero .sticky_image img { position: absolute; left: 50%; top: 0; transform: translate(-50%, 120%); /* ✅ 초기: 아래에서 대기 */ width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; clip-path: inset(0 15% 0 15%); transition: transform 0.6s cubic-bezier(.22, .61, .36, 1), clip-path 0.6s ease; will-change: transform; }

/* ✅ hero가 화면에 진입할 때: 이미지 올라오고 텍스트 흰색 */
#hero.in .sticky_image img { transform: translate(-50%, 0); clip-path: inset(0 0% 0 0%); }

#hero.in .sticky_text { color: #fff; }

/* ✅ 반응형 */
@media (max-width: 768px) { 
  #hero { height: 300px; min-height: 300px; } 
  #hero .sticky_image img { height: 300px; } 
}
/* ===== Company Section ===== */
.company_intro_wrap{width:100%}
.company_intro_wrap .container{max-width:1600px;margin:0 auto;padding:0 60px}
.company_intro_wrap header{padding:80px 0 60px}
.company_intro_wrap header h2{font-size:3.2rem;font-weight:700;margin:0;color:#000}
.company_intro_wrap main{background:#fff;padding:0}
.company_intro_wrap .main-title{font-size:1.3rem;font-weight:700;margin-bottom:50px;color:#333}
.company_intro_wrap .content-text{margin-bottom:60px}
.company_intro_wrap .content-text p{font-size:18px;line-height:1.9;margin:0 0 20px;color:#666; word-break: keep-all}
.company_intro_wrap .highlight-box{margin:60px 0}
.company_intro_wrap .highlight-box h2{font-size:1.1rem;margin:0 0 20px;font-weight:700;color:#333;line-height:1.6}
.company_intro_wrap .highlight-box p{font-size:18px;line-height:1.8;color:#666}
.company_intro_wrap .info-table{margin:80px 0}
.company_intro_wrap .info-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #d9d9d9;padding:50px 0}
.company_intro_wrap .info-cell{display:flex;flex-direction:column;gap:35px}
.company_intro_wrap .info-cell:first-child{padding-right:100px}
.company_intro_wrap .info-cell:last-child{padding-left:100px;border-left:1px solid #d9d9d9}
.company_intro_wrap .info-label{font-size:1.65rem;font-weight:400;color:#555}
.company_intro_wrap .info-content{font-size:1rem;color:#666}
.company_intro_wrap .office-section{background:#3a3a3a;padding:100px 0}
.company_intro_wrap .office-section h2{text-align:center;font-size:2.2rem;margin:0 0 80px;font-weight:700;color:#fff}
.company_intro_wrap .office-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 100px;max-width:1600px;margin:0 auto}
.company_intro_wrap .office-item h3{font-size:1.3rem;margin:0 0 15px;color:#fff;font-weight:700;position:relative}
.company_intro_wrap .office-item h3::before{content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:#0074d9;border-radius:50%}
.company_intro_wrap .office-item p{font-size:18px;line-height:1.8;color:#ccc;margin:0 0 5px}

/* Responsive tweaks */
@media (max-width:1400px){.company_intro_wrap .container{padding:0 40px}}
@media (max-width:1024px){
  .company_intro_wrap .container{padding:0 30px}
  .company_intro_wrap .info-row{padding:40px 0}
  .company_intro_wrap .info-cell:first-child{padding-right:60px}
  .company_intro_wrap .info-cell:last-child{padding-left:60px}
  .company_intro_wrap .office-grid{gap:50px 80px}
}
@media (max-width:768px){
  .company_intro_wrap .container{padding:0 20px}
  .company_intro_wrap header{padding:50px 0 40px}
  .company_intro_wrap main{padding:50px 0}
  .company_intro_wrap .main-title{font-size:1.1rem}
  .company_intro_wrap .info-row{grid-template-columns:1fr;padding:30px 0}
  .company_intro_wrap .info-cell{gap:25px;padding:30px 0}
  .company_intro_wrap .info-cell:first-child{border-bottom:1px solid #d9d9d9;padding-right:0;padding-bottom:30px}
  .company_intro_wrap .info-cell:last-child{border-left:none;padding-left:0;padding-top:30px}
  .company_intro_wrap .office-grid{grid-template-columns:1fr;gap:40px}
  .company_intro_wrap .office-section{padding:60px 0}
}


/* history 연혁 ==================================================================================== */
.content_history { margin-top: 50px; }
.content_history .history_wrap { position: relative; max-width: 1600px; margin: 0 auto; box-sizing: border-box; padding: 0 20px; }
.content_history .history_wrap .history_menu { position: absolute; top: 0; left: 20px; height: 100%; }
.content_history .history_wrap .history_menu.fixed { position: fixed; left: 50%; max-width: 1560px; width: calc(100% - 3%); transform: translateX(-50%); }
.content_history .history_wrap .history_menu .h_menu { width: 260px; height: 100%; border-left: 1px solid #e9e9e9; box-sizing: border-box; }
.content_history .history_wrap .history_menu .select-active { display: none; }
.content_history .history_wrap .history_menu ul { display: none; position: sticky; top: 100px; }
.content_history .history_wrap .history_menu.open ul { display: block; }
.content_history .history_wrap .history_menu ul li { position: relative; margin-bottom: 30px; }
.content_history .history_wrap .history_menu ul li a { display: block; padding: 10px 19px; font-size: 16px; color: #979797; padding: 0; line-height: 28px; letter-spacing: -0.16px; position: relative; }
.content_history .history_wrap .history_menu ul li.active a { color: #000; font-weight: 800; }
.content_history .history_wrap .history_menu .h_menu { border-left: 0; }
.content_history .history_wrap .content_box { width: calc(100% - 260px); margin-left: 260px; margin-bottom: 120px; position: relative; }
.content_history .history_wrap .history_list { border-top: 1px solid #e9e9e9; padding: 60px 0 58px; display: flex; opacity: 0.1; transition: 0.3s; }
.content_history .history_wrap .history_list.on { opacity: 1; }
.content_history .history_wrap .history_list h3 { width: 320px; color: #000; font-size: 60px; font-weight: 800; line-height: 80px; letter-spacing: -0.6px; transition: 0.3s; }
.content_history .history_wrap .history_list.on h3 { font-size: 72px; line-height: 90px; letter-spacing: -0.72px; }
.content_history .history_wrap .history_list ul { width: calc(100% - 320px); }
.content_history .history_wrap .history_list li + li { margin-top: 17px; }
.content_history .history_wrap .history_list div { display: flex; }
.content_history .history_wrap .history_list strong { color: #000; font-size: 16px; font-weight: 800; line-height: 28px; letter-spacing: -0.16px; margin-right: 20px; }
.content_history .history_wrap .history_list img { margin-top: 40px; max-width: 100%; border-radius: 20px; }
.content_history .history_wrap .history_list span { color: #555; font-size: 18px; line-height: 30px; letter-spacing: -0.18px; }

@media screen and (max-width: 992px) {
  .content_history { margin-top: 50px; }
  .content_history .history_wrap { padding: 0 20px; }
  .content_history .history_wrap .history_menu { left: 0; height: auto; width: 100%; background-color: #fff; z-index: 1; }
  .content_history .history_wrap .history_menu.fixed { left: 0; max-width: none; width: 100%; transform: translateX(0); z-index: 8001; }
  .content_history .history_wrap .history_menu .h_menu { width: 100%; height: auto; padding-top: 0; border-left: 0; }
  .content_history .history_wrap .history_menu .select-active { display: block; position: relative; font-size: 16px; font-weight: 800; line-height: 28px; letter-spacing: -0.16px; padding: 26px 10px 25px 24px; border-bottom: 1px solid #e9e9e9; box-sizing: border-box; }
  .content_history .history_wrap .history_menu .select-active::after { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); content: url("../img/arrow_btn.webp"); transition: transform 0.3s ease; }
  .content_history .history_wrap .history_menu.open .select-active::after { transform: translateY(-50%) rotate(180deg); }
  .content_history .history_wrap .history_menu ul { position: relative; top: 0; padding: 16px 0; border-bottom: 1px solid #dbdbdb; box-shadow: 0px 0px 3px 0px #dbdbdb; }
  .content_history .history_wrap .history_menu ul li { margin-bottom: 0; }
  .content_history .history_wrap .history_menu ul li a { padding: 14px 24px; }
  .content_history .history_wrap .history_menu ul li.active a { color: #979797; font-weight: 400; }
  .content_history .history_wrap .content_box { width: 100%; margin-left: 0; margin-bottom: 80px; padding-top: 65px; }
  .content_history .history_wrap .content_box > div:first-child { padding-top: 60px; }
  .content_history .history_wrap .history_list { padding: 40px 0 48px; flex-direction: column; }
  .content_history .history_wrap .content_box > div:first-child .history_list:first-child { border-top: none; padding-top: 0; }
  .content_history .history_wrap .history_list h3 { width: 100%; font-size: 48px; line-height: 72px; letter-spacing: -0.48px; }
  .content_history .history_wrap .history_list.on h3 { font-size: 48px; line-height: 72px; letter-spacing: -0.48px; }
  .content_history .history_wrap .history_list ul { width: 100%; }
  .content_history .history_wrap .history_list li { margin-top: 25px; }
  .content_history .history_wrap .history_list li + li { margin-top: 16px; }
  .content_history .history_wrap .history_list strong { font-size: 14px; line-height: 26px; letter-spacing: -0.14px; margin-right: 18px; }
  .content_history .history_wrap .history_list img { margin-top: 30px; }
  .content_history .history_wrap .history_list span { font-size: 16px; line-height: 28px; letter-spacing: -0.16px; }
}

/* location 오시는 길 ==================================================================================== */
.location .maparea { display: flex; flex-wrap: wrap; margin-bottom: 100px; padding-bottom: 100px; border-bottom: 1px solid #ccc; }
.location .maparea:last-child { margin-bottom: 0; border-bottom: 0; }
.location .maparea .map { width: calc(100% - 740px); height: 562px; }
.location .maparea .loca_info_box { width: 740px; padding: 80px 65px; box-sizing: border-box; background: #f5f5f5; }
.location .maparea h3 { color: #171717; font-size: 36px; font-weight: 800; letter-spacing: -0.36px; }
.location .maparea .loca_address { color: #171717; font-size: 19px; letter-spacing: -0.2px; margin-top: 32px; }
.location .maparea .loca_contact { color: #646464; font-size: 17px; letter-spacing: -0.16px; margin-top: 15px; }
.location .maparea .loca_guide { margin-top: 48px; }
.location .maparea .loca_guide dl { display: flex; align-items: flex-start; }
.location .maparea .loca_guide dl + dl { margin-top: 12px; }
.location .maparea .loca_guide dt { width: 100px; text-align: center; margin-right: 16px; border-radius: 110px; color: #fff; font-size: 17px; font-weight: 500; line-height: 46px; letter-spacing: -0.16px; }
.location .maparea .loca_guide dd { width: calc(100% - 118px); color: #646464; font-size: 17px; line-height: 46px; letter-spacing: -0.18px; }
.location .maparea .loca_guide .loca_sub1 { background-color: #3cb44a; }
.location .maparea .loca_guide .loca_bus1 { background-color: #386de8; }
.location .maparea .loca_guide .loca_sub2 { background-color: #3cb44a; }
.location .maparea .loca_guide .loca_bus2 { background-color: #87c700; }
.location .maparea .loca_guide .loca_sub3 { background-color: #3cb44a; }
.location .maparea .loca_guide .loca_bus3 { background-color: #87c700; }


@media screen and (max-width: 1200px) {
  .location .maparea .map { width: calc(100% - 635px); height: 562px; }
  .location .maparea .loca_info_box { width: 635px; padding: 55px 40px; box-sizing: border-box; background: #f5f5f5; }
}

@media screen and (max-width: 992px) {
  .location .maparea { margin-bottom: 50px; padding-bottom: 50px; }
  .location .maparea .map { width: 100%; height: 350px; }
  .location .maparea .loca_info_box { width: 100%; padding: 40px 20px; }
  .location .maparea h3 { font-size: 24px; letter-spacing: -0.24px; }
  .location .maparea .loca_guide { margin-top: 20px; }
  .location .maparea .loca_address { font-size: 17px; letter-spacing: -0.18px; margin-top: 22px; }
  .location .maparea .loca_guide dt, .location .maparea .loca_guide dd { font-size: 15px; }
}



/* ci ==================================================================================== */
.content_ci { padding: 0px 0 0 0; }

.ci_wrap { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
.ci_section { padding-bottom: 50px; }
.ci_section .ci_box { display: flex; margin-bottom: 4rem; }
/* 수정 */
.ci_section .ci_box h3 { width: 100%; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.26; }
/* 수정 */
.ci_section .ci_box .ci_txt { width: 100%; padding: 0 0 0 0;}
.ci_section .ci_box .ci_txt .txt01 { font-size: 18px; font-weight: 400; letter-spacing: -0.02em; color: #444444; line-height: 1.76; }
.ci_section .ci_box .ci_txt .txt02 { font-size: 15px; font-weight: 400; letter-spacing: -0.02em; color: rgba(0, 0, 0, 0.5); line-height: 1.4; padding-top: 1.3rem; }
.ci_section .ci_img { display: flex; align-items: center; justify-content: center; min-height: 25rem; padding: 4rem 2rem 4rem; border: 4px solid #f2f2f2; border-radius: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ci_section .ci_img img { max-width: 100%; }
.ci_section.ci_color_seciton .ci_box h3 { font-size: 38px; }
.ci_section .ci_color_box { display: flex; margin: 0 -1rem; padding-top: 2rem; }
.ci_section .ci_color_box .ci_color { width: calc(50% - 2rem); margin: 0 1rem; border-radius: 20px; padding: 3rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ci_section .ci_color_box .ci_color.color_1 { background: #2566a9; }
.ci_section .ci_color_box .ci_color.color_2 { background: #655da9; }
.ci_section .ci_color_box .ci_color strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em;  color: #fff; }
.ci_section .ci_color_box .ci_color .color_txt { padding-top: 3rem; }
.ci_section .ci_color_box .ci_color .color_txt span { display: inline-block; font-size: 17px; font-weight: 400; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.7); margin-right: 2rem; }

/* 컨테이너 패딩을 무시하고 화면 끝까지 확장 */
.ci_img--full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-left: none;
  border-right: none;
  border-radius: 0;
}

@media all and (max-width: 1280px) {
  .ci_section .ci_box .ci_txt .txt01 > br { display: none; }
}

@media all and (max-width: 992px) {
  /* 2025-10-24 상단 이미지간 간격 조절 */
  .ci_section { padding-bottom: 40px; }
  .ci_section .ci_box { display: block; }
  .ci_section .ci_box h3 { width: 100%; }
  /*모바일 상단 메인 텍스트 2번째 텍스트 사이 간격 조절 */
  .ci_section .ci_box .ci_txt { width: 100%; padding-top: 0px; }
  .ci_section .ci_img { min-height: 18rem; padding: 0 5rem; }
  .ci_section .ci_color_box { padding-top: 0; display: block; margin: 0; }
  .ci_section .ci_color_box .ci_color { width: 100%; margin: 0; margin-bottom: 2rem; }
}

@media all and (max-width: 768px) {
  .ci_section .ci_color_box .ci_color .color_txt span { width: 100%; margin-right: 0; margin-bottom: 1rem; }
  .ci_section .ci_color_box .ci_color .color_txt span:last-of-type { margin-bottom: 0rem; }
}

/* --- 모바일 이미지 확장 개선 --- */
@media all and (max-width: 992px) {
  .ci_section .ci_img {
    /* 좌우 과한 패딩 제거 */
    padding: 0 1rem;         /* 필요시 0 으로 더 줄여도 OK */
    min-height: auto;        /* 고정 최소높이 해제 */
    border-width: 2px;       /* 테두리 두께 살짝 슬림 */
  }
  .ci_section .ci_img img {
    width: 100%;             /* 항상 가로 꽉 채우기 */
    height: auto;            /* 세로는 비율 유지 */
    display: block;          /* 이미지 하단 공백 방지 */
  }
}

/* 초소형 화면(예: 360~400px)에서 완전 풀폭을 원하면 */
@media all and (max-width: 480px) {
  .ci_section .ci_img {
    padding: 0;              /* 완전 풀폭 */
    border-radius: 12px;     /* 모서리만 살짝 */
  }
}


[data-scroll="fade-up"] { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
[data-scroll="fade-up"].is-visible { opacity: 1; -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }

/* sub01 ==================================================================================== */
/* 메인 텍스트 높이 수정 */
.sub01_wrap { padding: 0 0 0 0; }
.sub01_wrap .inner .sub01_box_wrap { border-bottom: 1px solid #d6d6db; padding: 0 0 100px; }
.sub01_wrap .inner .sub01_swiper { overflow: hidden; }
.sub01_wrap .inner .sub01_swiper .swiper-wrapper { padding: 0 0 22px; }
.sub01_wrap .inner .sub01_swiper .swiper-wrapper .swiper-slide:hover { cursor: grab; }
.sub01_wrap .inner .sub01_swiper .swiper-wrapper .swiper-slide .swiper_img { border-radius: 20px; padding-top: 50%; position: relative; overflow: hidden; display: block; min-height: 330px; }
.sub01_wrap .inner .sub01_swiper .swiper-wrapper .swiper-slide .swiper_img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; }
.sub01_wrap .inner .sub01_swiper .swiper-wrapper .swiper-slide .slide_txt { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 18px; display: flex; align-items: flex-end; color: #fff; font-size: 28px; font-weight: 500; letter-spacing: -0.84px; padding: 70px 65px; }
.sub01_wrap .inner .sub01_swiper .swiper_page_wrap { display: flex; justify-content: center; align-items: center; }
.sub01_wrap .inner .sub01_swiper .swiper_page_wrap .swiper-button-prev,
.sub01_wrap .inner .sub01_swiper .swiper_page_wrap .swiper-button-next { display: block; background: none; color: #000; font-size: 18px; font-weight: bold; margin: 0 5px; cursor: pointer; top: auto; left: auto; right: auto; position: relative; width: 20px; height: 20px; }
.sub01_wrap .inner .sub01_swiper .swiper_page_wrap .swiper-pagination { bottom: auto; top: auto; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 0px; padding: 0 5px; color: #979797; text-align: center; font-size: 17px; font-weight: 300; position: relative; align-items: center; width: fit-content; }
.sub01_wrap .inner .sub01_swiper .swiper_page_wrap .swiper-pagination .cnt { color: #000; text-align: center; font-size: 17px; font-weight: 300; line-height: 100%; width: 30px; }
.sub01_wrap .inner .sub01_swiper .swiper_page_wrap .swiper-pagination .total { color: #979797; text-align: center; font-size: 17px; font-weight: 300; width: 30px; }

.sub01_wrap .inner .sub01_box_wrap2 { display: flex; flex-direction: column; gap: 78px; padding: 64px 0; }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex { display: flex; flex-direction: row; gap: 0; }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_left { flex: 0 0 19.6vw; font-size: 24px; font-weight: 600; letter-spacing: -0.72px; line-height: 1; color:#000 }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_left .num { display: inline-flex; color: #555; justify-content: center; align-items: center; text-align: center; font-size: 18px; font-weight: 300; width: 36px; height: 36px; position: relative; right: 15px; border-radius: 50%; border: 1px solid #d6d6db; background: #fff; }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_right { transform: translateY(3px); flex-grow: 1; text-align: left; }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_right .c01_right_txt { color: #333; font-size: 20px; font-weight: 500; letter-spacing: -0.6px; position: relative; top: -2px; }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_right .table_wrap { margin-top: -5px; }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_right .table_wrap .con1_tbl { display: flex; }
.sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_right .table_wrap .con1_tbl table { flex-grow: 1; }
.sub01_wrap .inner .sub01_bottom_box { display: flex; flex-direction: column; border: 1px solid #d0d0d0; background: var(--write-bg); margin: 0px 0 80px; border-radius: 15px; padding: 58px 48px; gap: 28px; }
.sub01_wrap .inner .sub01_bottom_box h2 { color: #000; font-size: 24px; font-weight: 600; line-height: 100%; letter-spacing: -0.72px; }
.sub01_wrap .inner .sub01_bottom_box ul { padding-left: 6px; display: flex; flex-flow: column nowrap; gap: 10px; }
.sub01_wrap .inner .sub01_bottom_box ul li { position: relative; padding-left: 4px; color: #555; font-size: 17px; line-height: 1.6; letter-spacing: -0.5px; }
.sub01_wrap .inner .sub01_bottom_box ul li:after { content: ""; display: block; background-color: #666; width: 2px; height: 2px; position: absolute; top: 11px; left: -5px; border-radius: 50%; }

@media screen and (max-width: 992px) {
  .sub01_wrap .inner .sub01_swiper .swiper-wrapper .swiper-slide .slide_txt { padding: 40px; }
  .sub01_wrap .inner .sub01_box_wrap2 .sub01_flex { flex-direction: column; }
  .sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_left { flex: 0 0 50px; }
  .sub01_wrap .inner .sub01_box_wrap2 { gap: 40px; }
}

@media screen and (max-width: 640px) {
  .sub01_wrap .inner .sub01_box_wrap { padding: 0 0 50px; }
  .sub01_wrap .inner .sub01_swiper .swiper-wrapper .swiper-slide .slide_txt { font-size: 17px; padding: 25px; }
  .sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_left { font-size: 21px; }
  .sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_left .num { width: 30px; height: 30px; right: 5px; }
  .sub01_wrap .inner .sub01_box_wrap2 .sub01_flex .c01_right .slide_txt { font-size: 17px; }
  .sub01_wrap .inner .sub01_bottom_box { padding: 38px 30px; margin: 20px 0 20px; }
  .sub01_wrap .inner .sub01_bottom_box h2 { font-size: 19px; }
}

@media screen and (max-width: 576px) {
  .sub01_wrap { padding: 0; }
}

/* sub02 ==================================================================================== */
.sub02_top_tit { font-size: 50px; letter-spacing: -1px;  font-weight: 700; text-align: center; padding: 120px 20px; color: #000; }
.sub02_top_text { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/sub02_img01.jpg); background-attachment: fixed; padding: 160px 20px; text-align: center; color: #fff; }
.sub02_top_text > p { text-align: center; }

[class^="sub02_contents0"] { padding: 0px 20px 0; }

.sub02_top_text h3 { font-size: 50px; font-weight: 700; }
.sub02_top_text p { font-size: 25px; font-weight: 400; color: #fff; opacity: 0.9; margin-top: 20px }
.sub02_contents01 p { padding-top: 40px; }

[class^="sub02_contents0"] h4 { font-size: 32px; padding-top: 50px; color: #333; }
[class^="sub02_contents0"] p { font-size: 18px; line-height: 32px; text-align: justify; color:#555 }

.sub02_contents02, .sub02_contents03 { display: flex; flex-wrap: wrap; justify-content: space-between; }

[class^="sub02_contents0"] img { border-radius: 20px; width: 100%; }

.sub02_img_wrap01 { width: 50%; }
.sub02_img_wrap02 { width: 41%; }
.sub02_contents02 p { width: 52%; }
.sub02_contents02 p strong {color: #1a1a1a}
.sub02_contents03 p { width: 52%; }
.sub02_contents03 p strong { color: #1a1a1a}
.sub02_contents04 p { padding: 40px 0; }
.sub02_img_wrap04 { width: 40%; }
.sub02_contents05_2 { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 80px 20px; }
.sub02_contents05_2 p { width: 52%; }
.sub02_contents06_wrap { padding: unset; background-color: #f4f8ff; }
.sub02_img_wrap05 { padding-top: 50px; }

.sub02_contents06_wrap .sub02_list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 80px 0; }
.sub02_contents06_wrap .sub02_list .sub02_item:nth-child(n + 3) { padding-top: 40px; }
.sub02_contents06_wrap .sub02_item { width: 48%; }
.sub02_contents06_wrap .sub02_item p:first-child { font-size: 20px; font-weight: 700; padding-bottom: 20px; }

.sub02_contents07 p, .sub02_contents08 p { padding: 80px 20px 0; }
.sub02_contents09 { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/sub02_img08.jpg) no-repeat center; color: #fff; height: 600px; margin-top: 160px; padding: 0 20px; display: flex; justify-content: center; align-items: center; }
.sub02_contents09 p { display: flex; justify-content: center; font-size:24px; font-weight: 600; text-align: center; line-height: 1.65; color: #fff }

@media (max-width: 1024px) {
  [class^="sub02_img_wrap0"] { width: 100%; }
  [class^="sub02_contents0"] p:not(.sub02_item p, .sub02_contents09 p) { width: 100%; line-height: 32px; padding-top: 40px; }
  .sub02_img_wrap02 { order: 1; }
  .sub02_contents03 p { order: 2; }
}

@media (max-width: 768px) {
  .sub02_top_tit { font-size: 32px; font-size: clamp(30px, 4vw, 32px); }
  [class^="sub02_contents0"] h4 { padding-top: unset; }
  .sub02_contents06_wrap .sub02_item { width: 100%; }
  .sub02_contents06_wrap .sub02_list .sub02_item:nth-child(n + 2) { padding-top: 40px; }
  .sub02_top_text { background-attachment: unset; }
}

/* sub03 ======================================================================================================*/
.sub03_wrap { position: relative; width: 100%; }
.sub03_wrap .sub03_scroll_wrap { position: relative; }
.sub03_wrap .sub03_scroll_wrap .buttons_container { z-index: 3; position: absolute; left: 50%; top: 0; transform: translateX(-48rem); width: 1px; height: calc(100% - 41rem); }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn { position: sticky; left: 0; top: 0; width: 20.875rem; padding-top: 100px; }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn button { display: block; left: 0; top: 0; color: #999; border: 0 none; background-color: transparent; cursor: pointer; }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn button b { display: inline-block; width: 3rem; font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.02px; vertical-align: middle; color: inherit; }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn button strong { display: inline-block; font-size: 1.25rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.02px; vertical-align: middle; color: inherit; }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn button + button { margin-top: 1.5rem; }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn button.active { color: #111; }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn button.active b { margin-top: 0.6125rem; font-size: 1.25rem; font-weight: 700; vertical-align: top; }
.sub03_wrap .sub03_scroll_wrap .buttons_container .scroll_btn button.active strong { font-size: 3.125rem; line-height: 1.4; vertical-align: top; }

.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item { position: relative; padding-bottom: 100px; overflow: hidden; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .heading { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(-1px, -1px, -1px, -1px); }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .info_inner { position: relative; max-width: 1540px; width: 100%; margin: 0 auto; padding-left: 380px; padding-top: 100px; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .text_box { margin-top: 0; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .text_box h3 { font-size: 38px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .text_box h3 .point_color { color: #107af2; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .text_box p.subtext { margin-top: 2.5rem; font-size: 17px; line-height: 1.65; color: #555;  word-break: keep-all; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider { margin-top: 7.5rem; position: relative; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(1) .card_slider::before { content: ""; display: block; position: absolute; left: -1000px; bottom: -100px; width: 1000px; height: 920px; background: #fff; z-index: 2; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(2) .card_slider::before { content: ""; display: block; position: absolute; left: -1000px; bottom: -100px; width: 1000px; height: 920px; background: linear-gradient(to top, #eef6f4 0, #fff 500px, #fff); z-index: 2; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(3) .card_slider::before { content: ""; display: block; position: absolute; left: -1000px; bottom: -100px; width: 1000px; height: 920px; background: #fff; z-index: 2; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul { display: flex; cursor: grab; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li { flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-start; width: 460px; height: 460px; margin-right: 20px; padding: 2.5rem; border-radius: 20px; color: #fff; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li h4 { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.02px; color: inherit; word-break: keep-all; margin-bottom: 1.25rem; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li p { display: block; margin-top: auto; font-size: 1.5rem; font-weight: 700; line-height: 1.38; letter-spacing: -0.06px; color: inherit; word-break: keep-all; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li:last-child { margin-right: 0; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(1) { padding-top: 0; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(2) { position: relative; z-index: 1; }

.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(2)::before { content: ""; position: absolute; top: 0; width: 100vw; height: 100%; background: linear-gradient(to top, #eef6f4 0, #fff 500px, #fff); z-index: -1; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(1) .card_slider ul li:nth-child(1) { background: url(../img/sub03_slide01_img01.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(1) .card_slider ul li:nth-child(2) { background: url(../img/sub03_slide01_img02.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(1) .card_slider ul li:nth-child(3) { background: url(../img/sub03_slide01_img03.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(2) .card_slider ul li:nth-child(1) { background: url(../img/sub03_slide01_img04.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(2) .card_slider ul li:nth-child(2) { background: url(../img/sub03_slide01_img05.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(2) .card_slider ul li:nth-child(3) { background: url(../img/sub03_slide01_img06.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(3) .card_slider ul li:nth-child(1) { background: url(../img/sub03_slide03_img01.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(3) .card_slider ul li:nth-child(2) { background: url(../img/sub03_slide03_img02.jpg) no-repeat center center/cover; }
.sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(3) .card_slider ul li:nth-child(3) { background: url(../img/sub03_slide03_img03.jpg) no-repeat center center/cover; }


@media screen and (max-width: 1540px) {
  .sub03_wrap .sub03_scroll_wrap .buttons_container { left: 0.75rem; transform: none; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li { min-height: 19.54rem; }
}

@media (max-width: 1200px) {
  .sub03_wrap { max-width: none; }
  .sub03_wrap .sub03_scroll_wrap { padding-left: 0; padding-right: 0; }
  .sub03_wrap .sub03_scroll_wrap .buttons_container { display: none; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item { padding-bottom: 5rem; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .info_inner { padding: 50px 20px 0; margin: 0 auto; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .heading { position: static; overflow: visible; width: 100%; height: auto; clip: auto; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .heading b { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.57; letter-spacing: -0.01px; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .heading strong { display: block; margin-top: 0.25rem; font-size: 1.25rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.02px; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .text_box { margin-top: 3.5rem; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider { margin-top: 5rem; max-width: 100%; padding: 0; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(1) .card_slider::before,
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(2) .card_slider::before,
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item:nth-child(3) .card_slider::before { display: none; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li h4 { word-break: break-all; font-size: 1.125rem; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li p { margin-top: auto; font-size: 1.125rem; font-weight: 700; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li:last-child { margin-right: 0; }
}

@media screen and (max-width: 992px) {
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .card_slider ul li { flex-shrink: 0; flex-basis: 18.5rem; min-height: 18.5rem; height: 21.5rem; margin-right: 1rem; padding: 1.5rem; color: #fff; }
}

@media screen and (max-width: 640px) {
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .text_box h3 { font-size: 28px; }
  .sub03_wrap .sub03_scroll_wrap .sub03_info_section .info_item .text_box { margin-top: 0; }
}

/* sub04 ======================================================================================================*/
/* 2025-10-26 아래 사진 제조공정 위 여백 */
.sub04_branditem { display: flex; margin-bottom: 100px; }

[class^="sub04"] h2 { width: 20%; font-size: 40px; font-weight: 700; }
[class^="sub04"] h3 { font-size: 24px; font-weight: 700; }

.sub04_symbol { width: 100%; }
.sub04_symbol p { font-size: 17px; font-weight: 500; color: #555;  line-height: 1.65 }
.sub04_mark { width: 100%; border: 1px solid #d2d2d2; border-radius: 20px; background-color: #fff; padding: 0px 0; position: relative; margin-bottom: 0px; text-align: center; }
.sub04_contents01 { display: flex; }
.sub04_color_wrap { width: 100%; }
.sub04_color_main { width: 100%; display: flex; gap: 56px; margin: 24px 0 120px 0; }
.sub04_color_main li { width: calc((100% - 3.5rem) / 2); }
.sub04_color_main p { font-size: 24px; color: #fff; font-weight: 700; color: #fff;  padding: 32px; margin-bottom: 32px; border-radius: 20px; }

[class^="sub04_color"] span { display: block; font-size: 16px; line-height: 1.75;  font-weight: 600; }

.sub04_color_main li:nth-of-type(1) p { background-color: #c5a253; }
.sub04_color_main li:nth-of-type(2) p { background-color: #85677b; }
.sub04_color_sub { width: 100%; display: flex; column-gap: 80px; row-gap: 80px; flex-wrap: wrap; margin-top: 24px; }
.sub04_color_sub li { width: calc((100% - 10rem) / 3); }
.sub04_color_sub li p { padding: 40px 0 0 0; margin-bottom: 12px; border-radius: 20px; }
.sub04_color_sub li:nth-of-type(1) p { background: #d8c8bd; }
.sub04_color_sub li:nth-of-type(2) p { background: #a78c7b; }
.sub04_color_sub li:nth-of-type(3) p { background: #964f4c; }
.sub04_color_sub li:nth-of-type(4) p { background: #ffbe98; }
.sub04_color_sub li:nth-of-type(5) p { background: #ca848a; }
.sub04_color_sub strong { font-size: 20px; line-height: 1.5; font-weight: 700; margin: 12px 0 20px 0; }

@media (max-width: 960px) {
  .sub04_branditem { flex-direction: column; row-gap: 24px; margin-bottom: 120px; }
  .sub04_mark img { width: 80%; }
  .sub04_contents01 { display: flex; flex-direction: column; row-gap: 24px; margin-bottom: 120px; }
  .sub04_color_main { width: 100%; flex-direction: column; gap: 24px; margin-bottom: 58px; }
  .sub04_color_sub { flex-direction: column; column-gap: initial; row-gap: 24px; }
  [class^="sub04"] h2 { width: 100%; }
  [class^="sub04_color"] li { width: 100%; }
}

/* sub05 ======================================================================================================*/
.sub05_wrap .sub05_tab_box .sub05_tab { top: 0; left: 0; width: 100%; height: 80px; text-align: center; background-color: #fff; }
.sub05_wrap .sub05_tab_box .sub05_tab.fixed { position: fixed; top: 0px; z-index: 9; transition: 250ms ease-in-out; box-shadow: 0 0 3px rgba(12, 12, 12, 0.3); }
.sub05_wrap .sub05_tab_box .sub05_tab li { display: inline-block; position: relative; height: 100%; }
.sub05_wrap .sub05_tab_box .sub05_tab li + li { margin-left: 40px; }
.sub05_wrap .sub05_tab_box .sub05_tab li:before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #107af2; transform: rotateY(90deg); content: ""; }
.sub05_wrap .sub05_tab_box .sub05_tab li .tab_btn { display: inline-flex; justify-content: center; align-items: center; height: 100%; color: #717171; font-size: 24px; font-weight: 500; padding: 0 5px; background: none; border: none; }
.sub05_wrap .sub05_tab_box .sub05_tab li.active:before { transform: rotateY(0); transition: 300ms ease-in-out; }
.sub05_wrap .sub05_tab_box .sub05_tab li.active .tab_btn { color: #107af2; font-weight: 600; }

@media (max-width: 1200px) {
  .sub05_wrap .sub05_tab_box { height: 60px; }
  .sub05_wrap .sub05_tab_box .sub05_tab { height: 80px; }
  .sub05_wrap .sub05_tab_box .sub05_tab li + li { margin-left: 35px; }
}

@media (max-width: 1000px) {
  .sub05_wrap .sub05_tab_box { border-bottom: none; }
  .sub05_wrap .sub05_tab_box .sub05_tab { box-shadow: none; white-space: nowrap; overflow-x: auto; padding: 0 10px; }
  .sub05_wrap .sub05_tab_box .sub05_tab li:before { display: none; }
  .sub05_wrap .sub05_tab_box .sub05_tab li + li { margin-left: 20px; }
  .sub05_wrap .sub05_tab_box .sub05_tab li .tab_btn { font-size: 19px; color: #262626; font-weight: 300; }
  .sub05_wrap .sub05_tab_box .sub05_tab li.active .tab_btn { font-weight: 700; }
}
/* 2025-10-24 이미지 상단 여백 삭제 */
.sub05_wrap .sub05_info_section { padding: 0px 0 70px 0; }
.sub05_wrap .sub05_box { display: none; }
.sub05_wrap .sub05_box.active { display: block; }

/* ====== 5열 Grid 레이아웃 ====== */
.sub05_wrap .sub05_box .sub05_flex {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 데스크탑 5열 */
  gap: 30px; /* 카드 간격 */
  width: 100%;
  margin: 0 auto;
  align-items: start;
}

/* 아이템 */
.sub05_wrap .sub05_box .sub05_flex .sub05_img { position: relative; border-radius: 20px; }
.sub05_wrap .sub05_box .sub05_flex .sub05_img img { border-radius: 20px; width: 100%; display: block; }

/* 오버레이 설명 */
.sub05_wrap .sub05_box .sub05_flex .sub05_img span {
  position: absolute; inset: 0;
  background-color: rgba(0, 0, 0, 0.8); color: #fff;
  display: flex; justify-content: center; align-items: center; text-align: center;
  font-size: 17px; line-height: 1.65; word-break: keep-all; padding: 0 30px; border-radius: 20px;
  visibility: hidden; opacity: 0;
}

/* hover/focus 표시 */
.sub05_wrap .sub05_box .sub05_flex .sub05_img:focus span,
.sub05_wrap .sub05_box .sub05_flex .sub05_img:hover span {
  opacity: 1; visibility: visible; transition: 200ms ease-out; transition-property: opacity, visibility;
}

/* 접근성: 모션 최소화 환경에서 전환 제거 */
@media (prefers-reduced-motion: reduce) {
  .sub05_wrap .sub05_box .sub05_flex .sub05_img:focus span,
  .sub05_wrap .sub05_box .sub05_flex .sub05_img:hover span {
    transition: none;
  }
}

/* 반응형 */
@media (max-width: 1000px) {
  .sub05_wrap .sub05_box .sub05_flex {
    grid-template-columns: repeat(2, 1fr); /* 2열 */
    gap: 2vw;
  }
  .sub05_wrap .sub05_box .sub05_flex .sub05_img span { font-size: 19px; line-height: 24px; }
}

@media (max-width: 640px) {
  .sub05_tab_box .sub05_tab li .tab_btn { font-size: 17px; }
  .sub05_wrap .sub05_box .sub05_flex { grid-template-columns: 1fr; gap: 20px; } /* 1열 */
  .sub05_wrap .sub05_box .sub05_flex .sub05_img span { font-size: 17px; line-height: 20px; }
}




/* sub06 ======================================================================================================*/
.sub06_contents01 { display: flex; justify-content: space-between; }
.sub06_left_txt { display: flex; flex-direction: column; }
.sub06_conbox:nth-of-type(n + 2) { padding-top: 32px; }
.sub06_conbox strong { font-size: 24px; font-weight: 700; padding-bottom: 20px; display: block }
.sub06_cate > span { font-weight: 500; display: block; line-height: 1.65; color: #555;}
.sub06_cate h2 { padding-bottom: 5px; display: block; font-size: 18px}
.sub06_infotxt { color: #555; line-height: 1.7; font-weight: 500; margin-bottom: 10px; }
.sub06_right_img { width: calc(100% - 490px); }
.sub06_right_img ul { display: flex; flex-wrap: wrap; gap: 10px; }
.sub06_right_img ul li { flex-basis: calc(50% - 10px); height: 300px; border-radius: 20px; overflow: hidden; }
.sub06_right_img ul li img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 960px) {
  .sub06_right_img { width: calc(100% - 50vw); }
  .sub06_right_img ul { flex-direction: column; }
  .sub06_right_img ul li { flex-basis: 100%; height: 16vw; }
}

@media (max-width: 640px) {
  .sub06_contents01 { flex-direction: column; }
  .sub06_right_img { width: 100%; margin-top: 40px; }
  .sub06_right_img ul { flex-direction: unset; }
  .sub06_right_img ul li { flex-basis: calc(50% - 10px); height: 30vw; }
}





/* 인재상 및 복지*/



 
/* 인재상 css 시작 */
.container { max-width: 1400px; margin: 0 auto; height:auto; padding:0 20px}
.overview-txt { font-size:18px; font-weight:400; color:#333; line-height:1.75; margin-bottom:20px}
.sub-titlearea h3 { font-size:25px; color:#000; font-weight:bold; margin-bottom:20px}

/* 공통 리스트 */
ul.box-list {
  overflow: hidden;
  display:flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: row;
  gap:3%;
}

/* 상단 3개 */
ul.box-list li.box-item{
  position:relative; width:31.333%;
  margin-bottom:2rem; background:#fff; border:1px solid #ddd; box-sizing:border-box;
}

/* 하단 2개 */
ul.box-list li.box-item2{
  position:relative; width:48.333%;
  margin-bottom:2rem; background:#fff; border:1px solid #ddd; box-sizing:border-box;
}

/* 공통 내부 여백/텍스트 */
ul.box-list .box-item dl,
ul.box-list .box-item2 dl { padding:4rem; }
ul.box-list .box-item dl dt,
ul.box-list .box-item2 dl dt {}

ul.box-list .box-item dl dd,
ul.box-list .box-item2 dl dd { margin-top:3.5rem; }

ul.box-list .box-item dl dd span,
ul.box-list .box-item2 dl dd span { font-size:1.5rem; font-weight:700; }

/* ⬇️ 문단 가독성/띄어쓰기 벌어짐 해결 */
ul.box-list .box-item dl dd p,
ul.box-list .box-item2 dl dd p {
  margin-top:1rem;
  font-size:18px; color:#555; font-weight:400; line-height:1.75;

  /* 띄어쓰기 벌어짐 방지 (전역 justify 덮어쓰기) */
  text-align: left;
  text-justify: auto;

  /* 한글 단어 단위 유지 + 긴 영문/숫자는 자연 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;

  /* 혹시 전역에서 간격을 건드렸다면 리셋 */
  letter-spacing: normal;
  word-spacing: normal;

  /* 브라우저 자동 하이픈 등은 기본값 유지 */
  hyphens: manual;
}

ul.box-list .box-item i,
ul.box-list .box-item2 i { font-size:36px; }

/* 숫자형 리스트(하단 표 스타일) */
ul.number-list { position:relative; background:#f5f5f5; padding:3.5rem; }
ul.number-list li { display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between; flex-direction:row; font-size:1.095rem; margin-bottom:0.75rem; }
ul.number-list li:last-child { margin-bottom:0; }
ul.number-list li span { font-weight:800; flex-basis:60px; }
ul.number-list li p { flex:1 0 0; }

/* ---------- 반응형 ---------- */
@media screen and (max-width:1640px){
  ul.box-list { gap:2%; }
  ul.box-list .box-item dl,
  ul.box-list .box-item2 dl { padding:2.75rem; }
  ul.box-list .box-item dl dd,
  ul.box-list .box-item2 dl dd { margin-top:3rem; }
  ul.box-list .box-item dl dd span,
  ul.box-list .box-item2 dl dd span { font-size:1.25rem; }
  ul.box-list .box-item dl dd p,
  ul.box-list .box-item2 dl dd p { margin-top:0.75rem; }
}

@media screen and (max-width:1280px){
  .esg article { flex-direction:column; gap:0; }
  .esg article .sub-titlearea { flex-basis:100%; width:100%; }
  .esg article .content { flex:auto; flex-basis:100%; width:100%; }
}

/* 태블릿: 2열 */
@media screen and (max-width:1024px){
  .esg .open-area .thumb { height:520px; }
  .esg article .content > p { font-size:1rem; }

  /* ⬇️ 여기서도 box-item2 포함하여 2열 */
  ul.box-list li.box-item,
  ul.box-list li.box-item2 { width:48%; }

  ul.box-list .box-item dl,
  ul.box-list .box-item2 dl { padding:2.5rem; }

  ul.number-list { padding:3rem; }
  ul.number-list li { font-size:1.05rem; margin-bottom:0.5rem; }
  ul.number-list li span { flex-basis:50px; }
}

/* 모바일: 1열 + 아이콘/텍스트 나란히 */
@media screen and (max-width:768px){
  .esg .open-area .thumb { height:460px; }
  .esg article .content > p br { display:none; }

  ul.box-list { gap:0; flex-direction:column; }

  /* ⬇️ 두 클래스 모두 100%로 단일컬럼 */
  ul.box-list li.box-item,
  ul.box-list li.box-item2 { width:100%; margin-bottom:1.5rem; }

  /* ⬇️ 내부 레이아웃도 동일하게 플렉스 적용 */
  ul.box-list .box-item dl,
  ul.box-list .box-item2 dl {
    padding:2rem;
    display:flex; flex-direction:row; flex-wrap:nowrap;
    justify-content:space-between; align-items:flex-start; gap:1rem;
  }
  ul.box-list .box-item dl dt,
  ul.box-list .box-item2 dl dt { flex-basis:60px; }
  ul.box-list .box-item dl dd,
  ul.box-list .box-item2 dl dd { flex:1 0 0; margin-top:0; }
  ul.box-list .box-item dl dd p,
  ul.box-list .box-item2 dl dd p { margin-top:0.5rem; }

  ul.number-list { padding:2.5rem 2rem; }
}

@media screen and (max-width:480px){
  .esg .open-area .thumb { height:300px; }

  ul.box-list li.box-item,
  ul.box-list li.box-item2 { margin-bottom:1rem; }

  ul.box-list .box-item dl,
  ul.box-list .box-item2 dl { padding:1.5rem 2rem; }

  ul.box-list .box-item dl dt,
  ul.box-list .box-item2 dl dt { flex-basis:52px; }
}

/* 기존 회사 섹션 반응형 유지 */
@media screen and (max-width:768px){
  .company .title{ font-size:24px; padding-left:0 }
  .company .companybg{ height:300px; margin-top:0px }
}


/* 양쪽정렬을 꼭 써야 하는 경우 */
ul.box-list .box-item dd p,
ul.box-list .box-item2 dd p{
  text-align: justify;
  text-justify: distribute; /* CJK 친화적 */
  line-break: loose;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 인재상 css 끝 */