.m_br { display: none; }
.pc_br { display: block; }

.page { width: 100%; max-width: 1280px; word-break: keep-all; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.page .contents {min-height:600px;}

#contents {margin-bottom:50px;}




@media (max-width: 768px) {
.m_br { display: block; }
.pc_br { display: none; }
    #contents {margin-bottom:0px;}
 }



.onframe { width:100%; height:1200px; margin: 0 auto; }

@media (max-width: 768px) {
 .onframe { width:99%; height:1500px; }
 }


.title {
 margin: 6rem 0 2rem 0; /* 위 48px, 아래 32px */
 font-size: 2rem; /* 32px */
 font-weight: 700;
 color: #000;
 text-align: center;
 letter-spacing: -0.02em;
 }

.title h2 { font-size: inherit; }

 .title.left { text-align:left; }
 .title.lef { text-align:left; }
 .btr { padding:0 0 1.15rem; border-bottom:1px solid #eee; margin-bottom:3rem; }


 /* ✅ 태블릿 / 모바일 대응 */
 @media (max-width: 1024px) {
 .title {
 margin: 2.5rem 0 1.5rem 0; /* 위 40px, 아래 24px */
 font-size: 1.75rem; /* 28px */
 }
 }

 @media (max-width: 768px) {
 .title {
 margin: 2rem 0 1.5rem 0; /* 위 32px, 아래 24px */
 font-size: 1.25rem; /* 24px */
 }

 .btr { padding:0 0 0.65rem; border-bottom:1px solid #eee; margin-bottom:1.25rem; }

 }


 .pagetop { position: relative; z-index: -2; width: 100%; height: 440px; margin: 0 auto; overflow: hidden; background: #002b52; text-align: center; }
 .pagetop::before { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url("/img/main_slide/m1.png") no-repeat 50% 45%; background-size: cover; content: ""; filter: blur(0px); /* 흐림 효과 필요시 값 조정 */
 opacity: 0.5; }
 .pagetop ul { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0; color: #fff; text-align: left; box-sizing: border-box; margin-top:40px;
 }
 .pagetop ul li { width: 90%; margin: 0 auto; }
 .pagetop ul li h2 { padding: 0 0 0 0; font-size:26px; font-family: 'Paperlogy-3Light'; margin:40px 0 0 0;}
 .pagetop ul li h3 { padding: 15px 0 0 0;
 font-size: 38px; font-family: 'Paperlogy-7Bold';}
 .pagetop ul li h3 span { color: #00b2ed; }

 /* ✅ 태블릿 대응 (1024px 이하) */
 @media (max-width:1024px) {
 .pagetop { height: 320px; }
 .pagetop ul li h2 { font-size:32px; }
 .pagetop ul li h3 { font-size:24px; }
 }
 /* ✅ 모바일 대응 (768px 이하) */
 @media (max-width:768px) {
 .pagetop { height: 190px; }
 .pagetop ul { margin: 20px 0 0 0; }
 .pagetop ul li h2 { font-size:13px; }
 .pagetop ul li h3 { padding:5px 0 0 0; font-size:17px; }
 }



/* ✅ 메인 탭 영역 */
#tap { width: 100%; height: auto; margin:0 auto; border-radius: 0; background: #0a0e24; font-weight: 500; color: #fff; text-align: center; border-bottom: 0; }
#tap ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 1200px; height: 50px; margin: 0 auto; text-align: center; }
#tap li { position: relative; width: auto; margin:0; padding: 0 0 0 0;
 font-weight: 400; font-size:20px;}
#tap li:last-child { padding:0 0 0 0; }
#tap li::before { display: inline-block; width: 1px; height: 10px; vertical-align: middle; margin: 0 3rem; /* 오른쪽 약 24px */
 background-color: rgba(255, 255, 255, 0.4); content: ""; }
#tap li:first-child::before { width: 0; margin:0; }
#tap li a { display: inline-block; padding: 0; font-weight: 400; color: #fff; text-decoration: none; transition: all 0.2s ease; }
#tap li:hover a, #tap li.active a { font-weight: 700; color: #fff; }

/* ✅ 태블릿 대응 (1024px 이하) */
@media (max-width:1024px) {
 #tap ul { flex-wrap: wrap; height: auto; padding: 0 0; }
 #tap li { padding: 0 1.2rem; /* 좌우 약 20px */
 font-size: 1rem; /* 약 16px */
 }
 #tap li::before { margin-right: 1rem; /* 약 16px */
 }
 }

/* ✅ 모바일 대응 (768px 이하) */
@media (max-width:768px) {
 #tap { font-size: 1rem;
 }
 #tap ul { width:auto; height:35px; margin:0 auto; }
 #tap li { display: flex; align-items: center; justify-content: center; margin:0; padding: 0; font-size: 0.75rem; /* 약 15px */
 }
 #tap li::before { height: 7px; margin: 0 0.55rem; }
 }






.feature {
 margin: 2rem 0; /* 위아래 32px */
 padding: 1.5rem; /* 약 24px */
 border: 2px solid #002b77;
 border-radius: 10px;
 background: #f9f9f9;
 font-size: 1.1rem; /* 약 17.6px */
 text-align: center;
 }

.feature ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }

.feature li {
 margin: 0.5rem 0; /* 약 8px */
 font-weight: bold;
 color: #002b77;
 }





.office01 { position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0 0 70px 0; text-align: center; }
.office01 .img { width: 100%; max-width:1400px; height: 500px; margin:0 auto; overflow: hidden; }
.office01 .img ul { width: 100%; height: 100%; margin: 0; padding: 0; }
.office01 .img ul li { width: 100%; height: 100%; text-align: center; }
.office01 .img ul li img { width: 100%; height: 100%; object-fit: cover; }
.office01 .text-content { width: 100%; padding: 30px 0 0 0; background: #fff; box-sizing: border-box; }
.office01 .text-content h2 { font-size: 32px; font-weight: 650; padding-bottom: 20px; }
.office01 .text-content ul { margin: 0; padding: 0; list-style: none; }
.office01 .text-content ul li { width:90%; margin:0 auto; font-size: 22px; font-weight: 350; line-height: 1.7; color: #000; white-space: normal; word-break: keep-all; }

@media (max-width: 768px) {
.office01 { width: 98%; padding: 0 0 40px 0; }
.office01 .img { height: 200px; }
.office01 .text-content h2 { font-size: 18px; padding-bottom: 15px; }
.office01 .text-content ul li { width:100%; font-size: 16px; line-height: 1.6; }
 }



/* 기본 레이아웃 */
.office02 { width: 100%; margin: 0 auto; padding: 60px 0; text-align: left; border-top: 1px solid #eee; box-sizing: border-box; }
.office02 > h2 { width: 100%; margin: 0; padding: 10px 0 40px 0; font-size: 2rem; /* 32px */
 font-weight: 650; }
.office02 > ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 0; text-align: center; box-sizing: border-box; }
.office02 > ul > li { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #fff; margin-bottom: 60px; box-sizing: border-box; }
.office02 > ul > li .img { width: 50%; height: 240px; border-radius: 10px; overflow: hidden; }
.office02 > ul > li .img img { width: 100%; height: 100%; object-fit: cover; }
.office02 > ul > li > ul { width: 45%; padding: 0 0 0 2rem; text-align: left; margin-left: auto; }
.office02 > ul > li > ul h2 { margin: 0 0 10px 0; font-size: 1.5rem; /* 24px */
 font-weight: 650; }
.office02 > ul > li > ul > li { font-size: 1.375rem; /* 22px */
 font-weight: 350; line-height: 1.8; text-align: left; }
/* 아이콘 리스트용 */
.office02 > ul > li > ul > li::before { vertical-align: middle; font-family: "Font Awesome 5 Free"; font-size: 1rem; /* 16px */
 font-weight: 600; color: #002b77; content: "\f0fe"; margin-right: 0.5rem; }


.office02 > ul.log > li > ul > li h2::before { vertical-align: middle; font-family: "Font Awesome 5 Free"; font-size: 1rem; /* 16px */
 font-weight: 600; color: #002b77; content: "\f0fe"; margin-right: 0.5rem; }




/* ✅ 태블릿 이하 (1024px 이하) */
@media (max-width:1024px) {
 .office02 .img { height:auto; }
 .office02 > ul > li { align-items: center; flex-direction: column; }
 .office02 > ul > li .img, .office02 > ul > li > ul { width: 100%; }
 .office02 > ul > li > ul { margin: 2rem 0 0 0; padding: 0 1rem; text-align: center; }
 .office02 > ul > li > ul > li { text-align: center; white-space: normal; }
 }
/* ✅ 모바일 대응 (768px 이하) */
@media (max-width:768px) {
 .office02 { padding: 40px 0; }
 .office02 > h2 { padding: 10px 0 20px 0; font-size: 1.5rem; /* 24px */ text-align: center; }
 .office02 > ul > li > ul h2 { font-size: 1.25rem; /* 20px */ }
 .office02 > ul > li > ul > li { font-size: 1rem; /* 16px */ }
 }









/* ✅ 공통 스타일 */
.office03 { width: 100%; margin: 0 auto; padding: 5rem 0; /* 위아래 80px */
 text-align: left; border-top: 1px solid #eee; border-bottom: 1px solid #eee; box-sizing: border-box; }
.office03 > h2 { margin: 0; padding: 0.625rem 0 2.5rem 0; /* 위 10px, 아래 40px */ font-size: 2rem; /* 32px */
 font-weight: 650;
 }
/* ✅ 이미지 영역 */
.office03 .img { width: 100%; height: 320px; margin: 0 auto; overflow: hidden; }
.office03 .img > ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; height: 100%; }
.office03 .img > ul > li { width: 49%; height: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box; }
.office03 .img > ul > li img { width: 100%; height: 100%; object-fit: cover; }

/* ✅ 텍스트 리스트 (기본 2열) */
.office03 > ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 2rem 0; border: 1px solid #eee; border-radius: 15px; margin-top: 1rem; box-sizing: border-box; }
.office03 > ul > li { width: 50%; padding: 1rem 0 1rem 2.5rem; font-size: 1.375rem; /* 22px */
 font-weight: 350; line-height: 1.4; text-align: left; box-sizing: border-box; word-break: keep-all;}
.office03 > ul > li h2 { margin: 0 0 0.625rem 0; font-size: 1.5rem; /* 24px */
 font-weight: 650; }
.office03 > ul > li h2::before { vertical-align: middle; font-family: "Font Awesome 5 Free"; font-size: 1rem; font-weight: 600; color: #002b77; content: "\f0fe"; margin-right: 0.5rem; }

/* ✅ .single 클래스 적용 시 1열 강제 (PC에서도) */
.office03.single > ul { width: 100%; padding: 2rem 2rem; }
.office03.single > ul > li { display: inline-block; width: 100%; padding: 1rem; }
.office03 > ul.log > li { font-weight:600; text-align:left; }

/* 이미지도 세로 배치 */
.office03 .img.single > ul > li { width: 100%; margin-bottom: 1rem; }
.office03 > ul.log > li { font-weight:600; text-align:left; }


/* ✅ 태블릿 이하 */
@media (max-width:1024px) {
 .office03 .img { height:auto; }
 .office03 .img > ul > li { width: 100%; margin-bottom: 1rem; }
 .office03 > ul > li h2 { font-size: 1.25rem; /* 20px */
 }
 .office03 > ul { padding:1rem; }
 .office03 > ul > li { width: 100%;
 padding: 0.5rem 1.25rem 0.5rem 1.5rem; font-size: 1.125rem; /* 18px */
 }
 .office03.single > ul { width: 100%; padding: 1rem 0; }
 }

/* ✅ 모바일 대응 */
@media (max-width:768px) {
 .office03 { padding: 3rem 0; }
 .office03 > h2 { padding: 0.5rem 0 1.5rem 0; font-size: 1.15rem; /* 24px */
 text-align: center; }
 .office03 > ul > li { padding:0.5rem 0.5rem; font-size: 1rem; /* 16px */ }
 }



/* ✅ 리스트 내 아이콘 추가 (옵션) */
 .log > li::before
 { vertical-align: middle;
 font-family: "Font Awesome 5 Free";
 font-size: 1rem; font-weight: 600;
 color: #002b77; content: "\f0fe";
 margin-right: 0.5rem; }

/* log 전용 스타일 */
.log > h2::before { display: inline-block; width: 6px; height: 24px; vertical-align: middle; margin: 0 5px 5px 0; background-color: #0a63a2; content: ""; }
.log > ul > li > ul h2::before { vertical-align: middle; font-family: "Font Awesome 5 Free"; font-size: 1rem; font-weight: 600; color: #002b77; content: "\f0fe"; margin-right: 0.5rem; }
.log > ul > li > ul > li::before { content: none; }




/* ✅ 공통 (PC 기본) */
.office04 { width: 100%; margin: 0 auto; padding: 80px 0; text-align: left; border-top: 1px solid #eee; border-bottom: 1px solid #eee; box-sizing: border-box; }
.office04 > h2 { width: 100%; margin: 0; padding: 10px 0 40px 0; font-size: 2rem; /* 32px */
 font-weight: 650; letter-spacing: 0; }

/* ✅ 이미지 영역 */
.office04 .img { width: 100%; height: 320px; margin: 0 auto; overflow: hidden; }
.office04 .img > ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; height: 100%; }
.office04 .img > ul > li { width: 49%; height: 100%; border-radius: 15px; overflow: hidden; box-sizing: border-box; }
.office04 .img > ul > li img { width: 100%; height: 100%; object-fit: cover; }

/* ✅ 리스트 */
.office04 > ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 30px 0; border: 1px solid #eee; border-radius: 15px; margin-top:1rem; box-sizing: border-box; }
.office04 > ul > li { width: 100%; padding: 15px 0px 15px 60px; font-size: 1.375rem; /* 22px */
 font-weight: 350; line-height: 1.5; text-align: left; box-sizing: border-box; }
.office04 > ul > li h2 { width: 100%; padding: 0 0 10px 0; font-size: 1.5rem; /* 24px */
 font-weight: 650; }

.office04 > ul > li h2::before
 { vertical-align: middle;
 font-family: "Font Awesome 5 Free";
 font-size: 1rem; font-weight: 600;
 color: #002b77; content: "\f0fe";
 margin-right: 0.5rem; }


/* ✅ 태블릿 대응 (1024px 이하) */
@media (max-width:1024px) {
 .office04 .img { height:auto; }
 .office04 { padding: 3rem 0; }
 .office04 .img > ul { flex-direction: column; }
 .office04 .img > ul > li { width: 100%; margin-bottom: 1rem; }
 .office04 > ul { padding:1rem; }
 .office04 > ul > li h2 { padding:0 0 5px 0; font-size: 1.15rem; /* 20px */
 }
 }
/* ✅ 모바일 대응 (768px 이하) */
@media (max-width:768px) {
 .office04 { padding: 3rem 0; }
 .office04 > h2 { padding: 0.5rem 0 1.5rem 0; font-size: 1.15rem; /* 24px */
 text-align: center; }
 .office04 > ul > li { padding:0.5rem 0.5rem; font-size: 1rem; /* 16px */ }
 }




.ceo01 { width: 100%; max-width:1200px; margin:0 auto; padding: 5rem 0; box-sizing: border-box; }
.ceo01 .img { flex: 0 0 auto; max-width: 1200px; }
.ceo01 .img img { width: 100%; height: auto; display: block; border-radius: 10px; }
.ceo01 .txt { text-align: left; line-height: 1.6; font-size: 1.6rem; color: #333; margin-top:3rem; padding:0 2rem;}
.ceo01 .txt .en { font-size: 2.2rem; font-weight: 500; color: #000; margin-bottom: 1.5rem; }
.ceo01 .txt .en strong { font-weight: 700; }
.ceo01 .txt .highlight { color: #1f4b96; font-weight: 700; }
.ceo01 .txt p { margin-bottom: 1.5rem; }
.ceo01 .txt p strong { color: #000; }
.ceo01 .sign { margin-top: 2rem; font-weight: 600; font-size: 1.5rem; }

@media (max-width:1024px) {
  .ceo01 { flex-direction: column; align-items: center; gap: 3rem; }
  .ceo01 .txt { font-size: 1.5rem; margin-top:1.25rem;}
}
@media (max-width:768px) {
  .ceo01 { padding: 3rem 0.25rem; }
  .ceo01 .txt { font-size: 1.0rem; padding:0 0.85rem; }
  .ceo01 .txt .en { font-size: 1.2rem; line-height:1.4; margin-bottom: 0.7rem;}
  .ceo01 .sign { margin-top: 1rem; font-weight: 600; font-size: 1rem; }
}





.trust { max-width: 1200px; margin: 0 auto; padding: 5rem 0rem; /* 위아래 80px */
border-top: 1px solid #eee; margin-top: 4rem; /* 약 64px */
 }
.trust > h2 { font-size: 1.75rem; /* 28px */
font-weight: 700;
color: #222; text-align: center; margin-bottom: 2rem; /* 32px */ }
.trust > ul { display: flex; gap:2rem; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0;
list-style: none; }
.trust > ul > li { display: flex; gap:2rem; align-items: flex-start; justify-content:center;
flex: 1 1 48%;
min-width: 280px;
padding: 2rem; border-radius: 1rem; background: #ecf9ff;
box-sizing: border-box; box-sizing: border-box; }
.trust > ul > li .img {
display: inline-block; background: linear-gradient(135deg, #1e90ff, #00bfff); /* 파란색 계열 그라데이션 */
-webkit-background-clip: text; font-size: 4rem;
-webkit-text-fill-color: transparent; }




.trust > ul > li > .txt { width: auto; text-align: left; /* 32px */
 }
.trust > ul > li > .txt h2 { font-size: 0.875rem; font-weight: 700; color: #19b2ff; margin-bottom: 0.5rem; }
.trust > ul > li > .txt h3 { font-size: 1.85rem; font-weight: 400; margin-bottom: 0.5rem;
 }
 .trust > ul > li > .txt h3 .blue { font-weight: 700; }
 .trust > ul > li > .txt p { font-size: 1.05rem; }



 @media (max-width: 1024px) {
.trust { padding: 4rem 1rem; margin-top: 3rem; }
.trust > h2 { font-size: 1.5rem; } /* 24px */

.trust > ul > li { flex: 1 1 100%; padding: 1.8rem; }

.trust > ul > li .img { font-size: 3.5rem; }

.trust > ul > li > .txt h2 { font-size: 0.8rem; }
.trust > ul > li > .txt h3 { font-size: 1.6rem; }
.trust > ul > li > .txt p { font-size: 1rem; }
 }

 @media (max-width: 768px) {
.trust { padding: 3rem 1rem; }

.trust > h2 { font-size: 1.35rem; } /* 21.6px */
.trust > ul { gap: 1.5rem; }
.trust > ul > li { gap:0.85rem; align-items: center; flex-direction: column; padding: 1.6rem; text-align: center; }
.trust > ul > li .img { font-size: 3rem; }
.trust > ul > li > .txt { padding:0; text-align: center; }

.trust > ul > li > .txt h2 { font-size: 0.85rem; letter-spacing:1px; }
.trust > ul > li > .txt h3 { font-size: 1.6rem; }
.trust > ul > li > .txt p { font-size: 0.85rem; }
 }





.service-list { max-width: 1200px; margin: 0 auto; padding: 3rem 0rem; }
.service-list > h2 { font-size: 1.75rem; /* 28px */
font-weight: 700;
color: #222; text-align: center; margin-bottom: 2rem; /* 32px */ }
.service-list > ul { width:80%; margin: 0 auto; }
.service-list > ul > li { padding: 1.25rem 0; /* 위아래 20px */ border: 2px solid #002b77;
border-radius: 100px; font-size: 1.45rem; /* 약 23px */
font-weight: 600; color: #000;
text-align: center; margin-bottom: 2rem; /* 약 32px */ box-sizing: border-box; }
.service-list > ul > li i { vertical-align: middle; font-size: 1.75rem; /* 28px */ color: #002b77;
margin-right: 0.5rem; }

/* ✅ 태블릿 (1024px 이하) */
@media (max-width:1024px) {
.service-list { padding: 3rem 0; /* 좌우 16px */
 }
.service-list > h2 { font-size: 1.5rem; /* 24px */
margin-bottom: 1.5rem; }
 .service-list > ul { width:80%; }
.service-list > ul > li {
padding: 1rem 0; border-radius: 80px; font-size: 1.25rem; /* 20px */ margin-bottom: 1.5rem; }
.service-list > ul > li i { font-size: 1.5rem; /* 24px */
 }
 }
/* ✅ 모바일 (768px 이하) */
@media (max-width:768px) {
.service-list { padding: 2rem 0; /* 좌우 16px, 위아래 48px */
 }
.service-list > h2 { font-size: 1.25rem; /* 20px */
margin-bottom: 1.25rem; }
 .service-list > ul { width:100%; }
.service-list > ul > li {
padding: 0.75rem 0; border-radius: 60px; font-size: 1.125rem; /* 18px */ margin-bottom: 1rem; }
.service-list > ul > li i { font-size: 1.15rem; /* 20px */ margin-right:0.10rem;
 }
 }




.ceo02 { width: 100%; padding: 80px 1rem; background: #fff; color: #000; text-align: center; box-sizing: border-box; margin-top:0px; border-top: 0px solid #eee; }
.ceo02 > h2 { font-size: 1.85rem; font-weight: 650; margin-bottom: 2rem; }
.ceo02 > h2 span { color: #002b77; }
.ceo02 > ul { display:table; width:65%; margin: 0 auto; padding:0 0 0 0; text-align: center; box-sizing: border-box; }
.ceo02 > ul > li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; width:100%; height:auto; margin:0 auto; padding:0 0 50px 0; color: #000; box-sizing: border-box; word-break: keep-all;}

.ceo02 > ul > li:last-child { padding:0; }

.ceo02 > ul > li .img { width:50%; height:auto; border-radius:0px; overflow:hidden; margin-right:100px; }
.ceo02 > ul > li .img img { width: 100%; object-fit: cover; }

.ceo02 > ul > li .txt { width:auto; color:#000; text-align:left; box-sizing:border-box; margin-right:auto;}
.ceo02 > ul > li .txt > h2 { padding:0 0 20px 0; font-size: 38px; font-weight: 600; line-height:1.4; }
.ceo02 > ul > li .txt > h3 { font-size: 24px; font-weight: 300; line-height:1.5; }


/* 태블릿 이하 */
@media (max-width:1024px) {
  .ceo02 > ul { width: 90%; }
  .ceo02 > ul > li { flex-direction: column; align-items: center; padding-bottom: 60px; text-align: center; }
  .ceo02 > ul > li .img { width: 100%; margin: 0 0 15px 0; }
  .ceo02 > ul > li .txt { width: 100%; text-align: center;  }
  .ceo02 > ul > li .txt > h2 { font-size: 30px; }
  .ceo02 > ul > li .txt > h3 { font-size: 20px; }
}
/* 모바일 */
@media (max-width:768px) {
  .ceo02 { padding: 60px 1rem; }
  .ceo02 > h2 { font-size: 1.5rem; }
      .ceo02 > ul > li .img { width: 100%; margin: 0 0 5px 0; }
  .ceo02 > ul > li .txt > h2 { font-size: 22px; padding:0 0 10px 0;}
  .ceo02 > ul > li .txt > h3 { font-size: 16px; }
}



.comp_ci { position: relative; width: 100%; margin: 40px auto 0 auto; padding: 120px 20px; text-align: center; border-top: 1px solid #eee; box-sizing: border-box; border:1px solid #eee; }
.comp_ci > h2 { padding-bottom: 40px; font-size: 30px; font-weight: 650; line-height: 1.4; color: #000; }
.comp_ci .img { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 1000px; height: 420px; margin: 0 auto; border: 1px solid #eee; border-radius: 0; overflow: hidden; background: url("/img/page/ci_bg.png") no-repeat 50% 0; background-size: cover; }
.comp_ci > h3 { font-size: 28px; font-weight: 550; line-height: 1.4; color: #000; padding: 30px 0; }
.comp_ci > ul { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 0 auto; padding-top: 40px; box-sizing: border-box; }
.comp_ci > ul > li > h2 { padding-bottom: 10px; font-size: 28px; font-weight: 700; }
.comp_ci > ul > li > h2 i {color:#1f4b96; font-size: 1.2rem; margin-right: 10px; vertical-align: middle;  }
.comp_ci > ul > li { line-height: 1.6; color: #000; text-align: left; padding: 0 10px; font-size: 24px; font-weight: 350; margin-bottom:50px;}

/* 태블릿 (≤1024px) */
@media (max-width: 1024px) {
  .comp_ci { padding: 90px 16px; }
  .comp_ci > h2 { font-size: 28px; padding-bottom: 32px; }
  .comp_ci .img { max-width: 920px; height: 360px; background-position: 50% 20%; }
  .comp_ci > h3 { font-size: 24px; padding: 24px 0; }
  .comp_ci > ul { max-width: 840px; padding-top: 32px; }
  .comp_ci > ul > li > h2 { font-size: 24px; }
  .comp_ci > ul > li { font-size: 20px; margin-bottom: 40px; }
}

/* 모바일 (≤768px) */
@media (max-width: 768px) {
  .comp_ci { padding: 50px 14px; margin-top: 30px; }
  .comp_ci > h2 { font-size: 24px; padding-bottom: 24px; }
  .comp_ci .img { max-width: 100%; height: 300px; background-position: 50% 30%; }
  .comp_ci > h3 { font-size: 18px; padding: 20px 0 10px; }
  .comp_ci > ul { max-width: 100%; padding-top: 24px; }
  .comp_ci > ul > li > h2 { font-size: 22px; padding-bottom: 5px;}
  .comp_ci > ul > li { font-size: 16px; margin-bottom: 35px; padding: 0; }
}





.papers { width: 100%; max-width: 1200px; margin: 0 auto; padding: 60px 1rem; text-align: center; border-top: 0px solid #eee; box-sizing: border-box; }

.papers > ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 0; box-sizing: border-box; }

.papers > ul > li { width: 31%; vertical-align: top; padding: 0; font-size: 24px; font-weight: 450; text-align: center; margin-bottom: 70px; box-sizing: border-box; }

.papers > ul > li .img { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; height: 550px; padding: 5px; border: 1px solid #eee; overflow: hidden; box-sizing: border-box; }

.papers > ul > li .img img { width: 100%; height: auto; object-fit: contain; }

.papers > ul > li span { display: inline-block; padding:1.05rem 0 0; border-radius: 100px; background: #fff; font-size: 1.25rem; color: #000; }

@media (max-width: 1024px) {
 .papers > ul > li { width: 48%; }
 .papers > ul > li .img { height: 400px; }
 }

@media (max-width: 768px) {
 .papers { padding:20px 1rem; }
 .papers > ul > li { width:48%; margin-bottom: 25px; }
 .papers > ul > li .img { height: auto; }
 .papers > ul > li span { font-size: 0.85rem; }
 }








.map01 { width: 1200px; height: auto; margin: 0 auto; padding: 100px 0 200px 0; color: #000; border-top: 0px solid #eee; }
.map01 .wrap { width: 100%; height: auto; margin: 0 auto; }
.map01 .wrap h1 { padding: 50px 0 20px 0; font-size: 21px; font-weight: 650; text-align: left; }
.map01 ul { width: 100%; margin-top: 0px; border-top: 1px solid #000; }
.map01 ul li { display: block; width: 100%; padding: 30px 0; font-size: 20px; font-weight: 300; padding-left: 30px; border-bottom: 1px solid #eee; }
.map01 ul li i { font-size: 18px; color: #002b77; text-align: center; margin-right: 10px; box-sizing: border-box; }
.map01 ul li span { display: inline-block; width: 15%; font-weight: 700; color: #000; margin-right: 20px; }
.map01 .log { width: 100%; max-height: 340px; }

@media (max-width: 768px) {
.map01 { width: 95%; padding: 20px 0 100px 0; }
.map01 .wrap h1 { padding: 30px 0 15px 0; font-size: 22px; }
.map01 ul li { padding: 20px 0 20px 10px; font-size: 18px; }
.map01 ul li i { font-size: 14px; margin-right: 8px; }
.map01 ul li span { display:block; width: auto; font-size: 18px; margin-bottom: 10px; }
 }






.comming { display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column; width: 95%; height: auto; margin: 0 auto; padding: 320px 0; border: 10px solid #eee; border-radius: 20px; text-align: center; margin-top: 50px; }
.comming h2 { padding: 0 0 10px 0; font-size: 38px; font-size: 650; color: #000; }
.comming h3 { font-size: 24px; font-size: 350; color: #c3c3c3; }





.fclean02 { width: 100%; height: auto; margin: 0 auto; padding: 120px 0 80px; text-align: center; border-top: 1px solid #eee; }
.fclean02 > h2 { width: 100%; margin: 0; padding: 0 0 45px 0; font-size: 32px; font-weight: 650; letter-spacing: 0; }
.fclean02 > ul { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 0 0 0; text-align: center; box-sizing: border-box; }
.fclean02 > ul > li { position: relative; width: 31%; height: auto; margin: 0 auto; padding: 0 0 4% 0; background: #fff; color: #000; box-sizing: border-box; }
.fclean02 > ul > li .img { max-width: 100%; height: auto; border: 1px solid #eee; overflow: hidden; }
.fclean02 > ul > li .img img { width: 100%; border-radius: 0px; }
.fclean02 > ul > li .txt { max-width: 100%; padding: 30px 0; border: 0px solid #e2f3ff; background: #fff; color: #000; text-align: center; box-sizing: border-box; }
.fclean02 > ul > li .txt > h2 { display: table; width: auto; margin: 0 auto; padding: 3px 25px; border-radius: 100px; background: #002b77; font-size: 26px; font-weight: 700; color: #fff; }
.fclean02 > ul > li .txt h3 { font-size: 24px; font-weight: 350; line-height: 1.4; margin-top: 15px; }

@media (max-width: 768px) {
.fclean02 { padding: 60px 0 60px; }
.fclean02 > h2 { font-size: 20px; padding-bottom: 30px; }
.fclean02 > ul { gap: 40px; flex-direction: column; padding: 0 15px; }
.fclean02 > ul > li { width: 100%; padding: 0; }
.fclean02 > ul > li .txt > h2 { padding: 4px 20px; font-size: 18px; }
.fclean02 > ul > li .txt h3 { font-size: 16px; line-height: 1.6; margin-top: 10px; }
 }



.fclean03 { width: 100%; height: auto; margin: 0 auto; padding: 80px 0; background: #f9fcff; text-align: center; border-top: 0px solid #eee; }
.fclean03 > h2 { width: 100%; margin: 0; padding: 0 0 30px 0; font-size: 32px; font-weight: 650; letter-spacing: 0; }
.fclean03 > h3 { margin: 0; padding: 10px 0 45px 0; font-size: 22px; font-weight: 350; letter-spacing: 0; }
.fclean03 > ul { max-width: 1200px; margin: 0 auto; padding: 0; text-align: center; box-sizing: border-box; }
.fclean03 > ul > li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; width: 100%; height: 375px; margin: 0 auto 50px auto; overflow: hidden; background: #fff; color: #000; box-sizing: border-box; }
.fclean03 > ul > li .img { width: 50%; height: auto; border: 0px solid #eee; overflow: hidden; }
.fclean03 > ul > li .img img { width: 100%; border-radius: 0px; }
.fclean03 > ul > li .txt { width: 50%; border: 0px solid #e2f3ff; background: #fff; color: #000; text-align: left; box-sizing: border-box; padding-left: 60px; }
.fclean03 > ul > li .txt > h2 { padding: 0 0 10px 0; font-size: 26px; font-weight: 700; }
.fclean03 > ul > li .txt > h3 { font-size: 23px; font-weight: 400; line-height: 1.4; color: #002b77; }
.fclean03 > ul > li .txt > ul { margin-top: 20px; box-sizing: border-box; }
.fclean03 > ul > li .txt > ul > li { font-size: 20px; font-weight: 350; line-height: 1.7; }
.fclean03 > ul > li .txt > ul > li::before { vertical-align: middle; font-family: "Font Awesome 5 Free"; font-size: 16px; font-weight: 600; color: #31ad34; content: '\f055'; margin-right: 1%; }

@media (max-width: 768px) {
.fclean03 { padding: 60px 0; }
.fclean03 > h2 { font-size: 20px; padding-bottom: 20px; }
.fclean03 > h3 { padding: 10px 0 30px 0; font-size: 16px; }
.fclean03 > ul { padding: 0 15px; }
.fclean03 > ul > li { flex-direction: column; height: auto; margin-bottom: 40px; }
.fclean03 > ul > li .img { width: 100%; margin-bottom: 20px; }
.fclean03 > ul > li .txt { width: auto; padding: 0; text-align: left; }
.fclean03 > ul > li .txt > h2 { font-size: 20px; }
.fclean03 > ul > li .txt > h3 { font-size: 16px; }
.fclean03 > ul > li .txt > ul > li { font-size: 15px; line-height: 1.6; }
.fclean03 > ul > li .txt > ul > li::before { font-size: 14px; margin-right: 6px; }
 }





 .fclean04 { width: 100%; height: auto; margin: 0 auto; padding: 120px 0; text-align: center; border-top: 1px solid #eee; }
.fclean04 > h2 { width: 100%; margin: 0; padding: 0 0 40px 0; font-size: 32px; font-weight: 650; line-height: 1.4; letter-spacing: 0; }
.fclean04 > h3 { margin: 0; padding: 50px 0 25px 0; font-size: 24px; font-weight: 450; line-height: 1.5; letter-spacing: 0; }
.fclean04 > ul { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; padding: 0; text-align: center; box-sizing: border-box; }
.fclean04 > ul > li { position: relative; width: 31%; height: auto; margin: 0 auto; background: #fff; color: #000; box-sizing: border-box; }
.fclean04 > ul > li .img { max-width: 100%; height: 230px; overflow: hidden; }
.fclean04 > ul > li .img img { width: 100%; border-radius: 0px; }
.fclean04 > ul > li .txt { max-width: 100%; padding: 30px 0; border: 1px solid #eee; background: #fff; color: #000; text-align: center; box-sizing: border-box; }
.fclean04 > ul > li .txt h2 { padding: 0 0 5px 0; font-size: 26px; font-weight: 700; }
.fclean04 > ul > li .txt h3 { font-size: 20px; font-weight: 350; line-height: 1.4; }

 @media (max-width: 768px) {
 .fclean04 { padding: 60px 0; }
 .fclean04 > h2 { font-size: 20px; padding-bottom: 25px; }
 .fclean04 > h3 { padding: 30px 0 20px 0; font-size: 16px; }
 .fclean04 > ul { gap: 40px; flex-direction: column; padding: 0 15px; }
 .fclean04 > ul > li { width: 100%; }
 .fclean04 > ul > li .img { height: 180px; }
 .fclean04 > ul > li .txt { padding: 20px 0; }
 .fclean04 > ul > li .txt h2 { font-size: 18px; padding-bottom: 5px; }
 .fclean04 > ul > li .txt h3 { font-size: 14px; line-height: 1.6; }
 }





.before { width: 100%; height: auto; margin: 0 auto; padding: 120px 0; border-top:0px solid #eee; }
.before > h2 { width:100%; margin:0; padding:10px 0 0 0; font-size: 32px; font-weight: 650; text-align: center; letter-spacing:0; }
.before > h3 { margin:0; padding:10px 0 45px 0; font-size: 22px; font-weight: 350; text-align: center; letter-spacing:0; }







.process { width: 100%; height: auto; margin: 0 auto; padding: 120px 0; text-align: center; border-top: 0px solid #eee; }
.process > h2 { width: 100%; margin: 0; padding: 0 0 0px 0; font-size: 32px; font-weight: 650; letter-spacing: 0; }
.process > h3 { margin: 0; padding: 10px 0 45px 0; font-size: 22px; font-weight: 350; letter-spacing: 0; }
.process ul { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px 0 0 0; box-sizing: border-box; }
.process ul li { display: flex; align-items: flex-start; flex-direction: column; width: 32%; padding: 35px 0; border: 2px solid #eee; border-radius: 20px; overflow: hidden; background: #fff; color: #000; text-align: left; margin-bottom: 50px; box-sizing: border-box; }
.process ul li .img { display: table; position: relative; margin: 0 auto; padding: 10px 10px; background: #002b77; font-size: 24px; font-weight: 650; color: #fff; }
.process ul li .img img { width: 100%; }
.process ul li .txt { width: 100%; padding: 20px 0 0 0; border: 0px solid #eee; background: #fff; color: #000; text-align: center; box-sizing: border-box; }
.process ul li .txt h2 { display: table; width: auto; margin: 0 auto; padding: 3px 25px; border-radius: 100px; font-size: 24px; font-weight: 600; }
.process ul li .txt h3 { margin: 0 auto; padding: 5px 0 15px 0; font-size: 20px; font-weight: 350; line-height: 1.4; }

@media (max-width: 768px) {
.process { padding: 60px 0; }
.process > h2 { font-size: 20px; }
.process > h3 { padding: 10px 0 30px 0; font-size: 16px; }
.process ul { gap: 20px; flex-direction: column; padding: 10px 15px; }
.process ul li { width: 100%; padding: 25px 0; margin-bottom:0px; }
.process ul li .img { padding: 10px 10px; font-size: 18px; }
.process ul li .txt h2 { padding: 2px 20px; font-size: 18px; }
.process ul li .txt h3 { width:80%; padding: 5px 0 10px 0; font-size: 16px; }
 }








/* ✅ 기본 설정 */
.price { width: 100%; margin: 0 auto; padding: 0; }
.price-table { width: 100%; margin: 0 auto; padding: 0; }

/* ✅ 표 스타일 */
table.comparison-table { width: 100%; border-radius: 20px; background: white; border-collapse: collapse; }
table.comparison-table th, table.comparison-table td {
vertical-align: middle; padding: 1.2rem 0rem; /* 약 20px 13px */ border: 1px solid #e0e4e8;
font-size: 1.05rem; /* 약 18px */ font-weight: 400; text-align: center; }
table.comparison-table thead th { background: #ecf3fa; font-size: 1.25rem; /* 약 23px */ font-weight: 700;
color: #1e293b; }
table.comparison-table td { background: #fff; }
table.comparison-table .item-group { background: #f9f9f9; font-weight: 600; color: #272727; }
table.comparison-table td[colspan="2"].item-group { text-align: center; }

/* ✅ 강조 스타일 */
.comparison-table .highlightt { background: #c5e8ff; font-weight: 700; color: #0c4a6e; }
.comparison-table .highlight { background: #e9f6ff; font-weight: 600; color: #0c4a6e; }

/* ✅ note 스타일 */
.note { padding: 2rem 3rem; border: 1px solid #eee; border-radius: 12px; background: #fff; line-height: 1.7; color: #000; margin-top: 2rem; }
.note-list { margin: 0; list-style: none; padding-left: 0; }
.note-list li { padding: 1.05rem 0; font-size: 1.05rem; border-bottom: 1px solid #e2e8f0; }
.note-list li:last-child { border-bottom: none; }
.note-list strong { display: block; font-size: 1.25rem; font-weight: 700; color: #000; margin-bottom: 0.05rem; }
.note-list strong::before { font-family: "Font Awesome 6 Free"; font-weight: 900; color: #3b82f6; content: "\f00c"; margin-right: 0.5rem; }


/* ✅ 반응형 (태블릿 및 모바일) */
@media (max-width:1024px) {
table.comparison-table th, table.comparison-table td {
padding: 0.5rem 0.5rem; /* 약 16px 8px */ font-size: 0.85rem; /* 약 16px */ }
table.comparison-table thead th { font-size: 1rem; /* 약 19px */ }
.note { padding: 1.5rem 1.5rem; }
 }


@media (max-width:768px) {

/* ✅ 테이블을 감싸는 div에 스크롤 적용 */
/* ✅ 스크롤 영역 생성 */
.price-table { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 1rem; /* 하단 여백 (스크롤바와 테이블 분리) */ }
/* ✅ 테이블 자체에 하단 마진 추가 */
.comparison-table { min-width: 800px; margin-bottom: 0rem; /* 스크롤바와 테이블 하단 간격 */ }
/* ✅ 스크롤바 스타일은 그대로 유지 */
.price-table { scrollbar-width: auto; scrollbar-color: #bbb #fff; }
.price-table::-webkit-scrollbar { height: 8px; }
.price-table::-webkit-scrollbar-thumb { border-radius: 4px; background: #bbb; }
.price-table::-webkit-scrollbar-track { background: #fff; }
/* ✅ 테이블에 최소 너비 지정 (가로로 넘길 수 있게) */
.comparison-table { min-width: 800px; }
.note { padding: 1rem 1rem; font-size: 1rem; }
.note-list li { font-size: 0.95rem; }
.note-list strong { font-size: 1.05rem; }
 }




   .board-container { max-width: 1200px; margin: 80px auto; padding: 0 20px; }

        /* 타이틀 영역 */
        .board-header { text-align: center; margin-bottom: 60px; }
        .board-header h2 { font-size: 36px; font-weight: 700; color: #111; margin-bottom: 15px; }
        .board-header p { font-size: 16px; color: #666; }

        /* 갤러리 그리드 (반응형) */
        .gallery-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* PC: 3열 */
            gap: 30px;
        }

        .gallery-card {
            display: block;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            text-decoration: none;
            color: inherit;
        }

        .gallery-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .gallery-card .img-box {
            width: 100%;
            height: 250px;
            overflow: hidden;
            background: #f5f5f5;
        }

        .gallery-card .img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .gallery-card:hover .img-box img { transform: scale(1.1); }

        .gallery-card .txt-box { padding: 25px; }
        .gallery-card .list-title { font-size: 18px; font-weight: 700; margin-bottom: 0px; line-height: 1.4; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align:center;}
        .gallery-card .date {  font-size: 14px; color: #999; display: flex; align-items: center; gap: 5px; display:none;}

        /* 더보기 버튼 */
        .btn-more-wrap { text-align: center; margin-top: 60px; }
        .btn-load-more {
            padding: 15px 50px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-load-more:hover { border-color: #333; background: #333; color: #fff; }

        /* 로딩 스피너 */
        #initial-loading { text-align: center; padding: 100px 0; font-size: 18px; color: #666; }

        /* 모바일 반응형 */
        @media (max-width: 1024px) {
            .gallery-list { grid-template-columns: repeat(2, 1fr); } /* 태블릿: 2열 */
        }
        @media (max-width: 768px) {
            .board-container { margin: 50px auto; }
            .board-header h2 { font-size: 28px; }
            .gallery-list { grid-template-columns: 1fr; gap: 20px; } /* 모바일: 1열 */
            .gallery-card .img-box { height: 220px; }
        }









/* 갤러리 뷰 */
        .view-wrap { max-width: 1200px; margin: 80px auto; padding: 0 20px; }

        /* 헤더 스타일 */
        .view-header { border-bottom: 2px solid #111; padding-bottom: 20px; margin-bottom: 40px; }
        .view-title { font-size: 32px; font-weight: 700; color: #111; margin-bottom: 15px; line-height: 1.3; }
        .view-meta { color: #888; font-size: 15px; display: flex; align-items: center; gap: 15px; }
        .view-meta span { display: flex; align-items: center; gap: 5px; }

        /* 대표 이미지(특성 이미지) 스타일 */
        .view-featured-img { margin-bottom: 40px; text-align: center; background: #f9f9f9; border-radius: 12px; overflow: hidden; }
        .view-featured-img img { max-width: 100%; height: auto; display: block; margin: 0 auto; max-height: 600px; object-fit: contain; }

        /* 본문 스타일 */
        .view-body { min-height: 200px; line-height: 1.8; font-size: 16px; color: #333; word-break: keep-all; }
        .view-body img { max-width: 100% !important; height: auto !important; display: block; margin: 30px auto; border-radius: 8px; }
        .view-body p { margin-bottom: 15px; }

        /* 버튼 스타일 */
        .view-btn-wrap { text-align: center; margin-top: 80px; border-top: 1px solid #ddd; padding-top: 40px; }
        .btn-list-go {
            display: inline-block;
            padding: 15px 50px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
            text-decoration: none;
            transition: all 0.3s;
        }
        .btn-list-go:hover { border-color: #333; background: #333; color: #fff; }

        /* 로딩 스타일 */
        #loading { text-align: center; padding: 100px 0; font-size: 18px; color: #666; }
        .loading-spinner { font-size: 40px; color: #333; animation: spin 1s linear infinite; margin-bottom: 15px; display: block; margin: 0 auto 15px; }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        /* 모바일 대응 */
        @media (max-width: 768px) {
            .view-wrap { margin: 50px auto; }
            .view-title { font-size: 24px; }
            .btn-list-go { padding: 12px 40px; font-size: 14px; }
        }