@charset "utf-8"; .top_title { line-height: 1.4; margin-bottom: 4rem; } 
.top_title p { font-weight: 600; } 
.pro_btn a { padding: 2rem; color: var(--main-color); display: flex; align-items: center; justify-content: center; transition:all .4s; max-width: 264px; border: 1px solid var(--main-color); margin-top: 4rem; } 
.pro_btn a:hover { background:var(--main-color); color: #fff; } 
/* sub_com */
.border { border: 1px solid #dcdcdc; } 
.img_box > img { width: 100%; max-width: fit-content; margin: 0 auto; display: block; } 
.inner_wrap { width: 94%; max-width: 1600px; margin: 16rem auto 16rem; position: relative; z-index: 1; } 
.flex_box { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; position: relative; overflow: hidden; justify-content: space-between; } 
.flex_box.top { align-items: flex-start; } 
.flex_box.center { justify-content:center; } 
.flex_box.both { justify-content: space-between; } 
.flex_box.stretch { align-items: stretch; } 
.flex_1 > * { width: 100%; max-width: 800px; } 
.flex_2 > * { flex: 1 0 48%; margin-right: 4%; margin-bottom: 0; } 
.flex_2 > *:nth-child(2n) { margin-right:0; } 
.flex_3 > * { width: 32%; margin-right: 2%; margin-bottom: 2%; } 
.flex_3 > *:nth-child(3n) { margin-right:0; } 
.flex_4 > * { width: 24.2%; margin-right: 1%; margin-bottom: 1%; } 
.flex_4 > *:nth-child(4n) { margin-right:0; } 
.flex_5 > * { width: 19.1%; margin-right: 1%; margin-bottom: 1%; } 
.flex_5 > *:nth-child(5n) { margin-right:0; } 
/* sub visual */
.sub_visual_wrap { position: relative; } 
.sub_visual_box { width: 100%; height: 67rem; overflow: hidden; position: relative; } 
.sub_page_visual { background-repeat: no-repeat; background-position: center; background-size: cover; animation: bg-active 5s; height: 100%; position: relative; } 
.sub_page_visual::before { content:''; display:block; position:absolute; left:0; background: #11111152; width: 100%; height: 100%; } 
.sub1 { background-image: url(../img/sub1_bg.jpg); } 
/* .sub2 { background-image: url(../img/sub2_bg.jpg); }  */
.sub3 { background-image: url(../img/sub4_bg.jpg); } 
.sub4 { background-image: url(../img/sub3_bg.jpg); } 
.sub5 { background-image: url(../img/sub5_bg.jpg); } 
.sub6 { background-image: url(../img/sub6_bg.jpg); } 

.sub_page_visual.case_bg1 { background-image: url(../img/case_1.jpg); } 
.sub_page_visual.case_bg2 { background-image: url(../img/case_2.jpg); } 
.sub_page_visual.case_bg3 { background-image: url(../img/case_3.jpg); } 
.sub_page_visual.case_bg4 { background-image: url(../img/case_4.jpg); } 
.sub_page_visual.case_bg5 { background-image: url(../img/case_5.jpg); } 
.sub_page_visual.case_bg6 { background-image: url(../img/case_6.jpg); } 
.sub_page_visual.case_bg7 { background-image: url(../img/case_7.jpg); } 
.sub_page_visual.case_bg8 { background-image: url(../img/case_8.jpg); } 
.sub_page_visual.case_bg9 { background-image: url(../img/case_9.jpg); } 
.sub_page_visual.case_bg10 { background-image: url(../img/case_10.jpg); } 

.sub_page_visual.pro_bg1 { background-image: url(../img/pro1_bg.jpg); } 
.sub_page_visual.pro_bg2 { background-image: url(../img/pro2_bg.jpg); } 
.sub_page_visual.pro_bg3 { background-image: url(../img/pro3_bg.jpg); } 
.sub_page_visual.pro_bg4 { background-image: url(../img/pro4_bg.jpg); } 
.sub_page_visual.pro_bg5 { background-image: url(../img/pro5_bg.jpg); } 
.sub_page_visual.pro_bg6 { background-image: url(../img/pro6_bg.jpg); } 

 /* 애니메이션 */
/* .sub_visual_3 { animation: bg-active 5s; } */
@keyframes bg-active { 
 0% { transform: scale(1.09); opacity: 0.9; } 
100% { transform: scale(1); opacity: 1; } 
 }
/* sub_visual */
.top_letter { font-size: 16rem; color: #ffffff1a; position: absolute; right: 6%; bottom: -10%; z-index: 100; font-family: var(--font-eng); font-weight: 600; letter-spacing: -3px; } 
.sub_visual_txt { position: absolute; top: 46%; left: 50%; transform: translateX(-50%); z-index: 10; color: #fff; max-width: 1400px; width: 94%; margin: 0 auto; } 
.sub_visual_txt h1 { color: #fff; font-size: 6rem; font-weight: 700; line-height: 1.2; text-align: center; } 
.sub_visual_txt h2 { color: #fff; font-size: 2.2rem; font-weight: 600; } 
.sub_visual_txt p { color: #fff; font-size: 1.1em; } 
.tit_box { padding-top: 6rem; padding-bottom: 9rem; text-align: center; } 
.tit_box .tit_bar { width: 1px; display: block; margin: 3rem auto 2rem; height: 5rem; background: #dadada; position: relative; } 
.tit_box h1 { margin-bottom: 1rem; font-weight: 600; font-family: var(--font-eng); } 
.tit_box h2 { font-size: 2.6em; font-family: inherit; font-weight: 300; letter-spacing: -3px; line-height: 1.5; } 
.tit_box h2 strong { font-weight: 500; } 
.tit_box p { font-size: 3.1rem; font-family: 'SUIT'; font-weight: 400; line-height: 1.4; color: #111; word-break: keep-all; } 
.tit_box2 h1 { font-weight: 500; font-size: 2.7em; font-family: 'GmarketSans'; padding-bottom: 4rem; padding-top: 6rem; } 
.horizon { width: 4rem; height: 2px; background: #fff; display: block; margin: 0 auto; margin-top: 2rem; } 
/* top menu */
.top_include_wrap { position: relative; } 
.visual_menu_wrap { position: absolute; top: 66%; left: 50%; transform: translate(-50%, -50%); width: fit-content; z-index: 10; } 
.visual_menu_wrap .depth_wrap { color: #fff; display: flex; justify-content: center; } 
.visual_menu_wrap .depth_wrap > div { position: relative; padding: 0rem 3rem; } 
.visual_menu_wrap .depth_wrap > div:last-child::after { display:none } 
.visual_menu_wrap .depth_wrap > div.home_btn { padding-right: 1rem; padding-left: 0; } 
.visual_menu_wrap .depth_wrap > div:after { content: ""; position: absolute; /* position: relative; */
 display: block; right: -13px; /* 위치 조절 */
 top: 50%; /* 수직 중앙 정렬 시작 */
 
 /* 선의 모양 정의 */
 width: 1px; /* 두께 */
 height: 15px; /* 길이 */
 background-color: #fff; /* 색상 */
 
 /* 중앙 정렬 + 15도 회전시켜서 / 모양 만들기 */
 transform: translateY(-50%) rotate(15deg); } 
.visual_menu_wrap .depth_wrap > div.last::after { display: none; } 
.depth_name { font-size: 17px; padding: 0 0.5rem; cursor: pointer; } 
/* 한승이앤아이 */
.depth_name > span::after { content: ''; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/8px; pointer-events: none; } 
.com_depth { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); font-size: 15px; width: 100%; text-align: center; background: #5f0a78ba; border-radius: 5px; color: #fff; font-weight: 500; padding: 1rem 0; } 
.com_depth li a { padding: 0.2rem 0; } 
.ceo-section { width: 100%; padding: 14rem 0; } 
.ceo-section.section-01 { background: #fff; padding-top: 0; } 
.ceo-section.section-02 { background: #f9f9f9; } 
.ceo-section .inner { max-width: 1600px; margin: 0 auto; padding: 0 5rem; display: flex; align-items: center; gap: 10rem; } 
.ceo-section .img-box { flex: 1; height: 700px; overflow: hidden; } 
.ceo-section .img-box img { width: 100%; height: 100%; object-fit: cover; } 
.ceo-section .text-box { flex: 1; } 
.ceo-section h2 { font-size: clamp(32px, 6.25vw, 10rem); color: #eee; margin-bottom: 40px; letter-spacing: -2px; } 
.ceo-section .big-text { font-size: 4rem; line-height: 1.3; margin-bottom: 5rem; color: #000; word-break: keep-all; } 
.ceo-section p { word-break: keep-all; } 
.ceo-section .valediction { margin-top: 60px; } 
.ceo-section .valediction span { margin-left:10px; font-size: 2.4rem; letter-spacing:5px; font-weight:bold } 
/* 연혁 복사본*/
.history-section { display:flex; gap: 6rem; max-width:1400px; margin:0 auto; margin-top: 10rem; } 
.history-left { width: 34%; flex-shrink:0; } 
.history-sticky { position:sticky; top:120px; background:#fff; border: 1px solid #0e39934f; border-radius:20px; padding: 4rem; } 
.history-sticky .sub-tit { display:block; margin-bottom:20px; color: var(--main-color); font-size:13px; letter-spacing:3px; } 
.history-sticky h2 { font-size: 5.8rem; line-height:1; color: var(--main-color); margin-bottom: 2rem; } 
.history-sticky h3 { font-size: 2.8rem; margin-bottom: 2rem; } 
.history-sticky p { line-height:1.8; color:#666; } 
.count { margin-top:30px; color: #5d22b8; } 
.history-right { flex:1; position:relative; padding-left: 50px; } 
/* 세로라인 */
.history-right:before { content:""; position:absolute; left:10px; top:0; width:1px; height:100%; background:#ddd; } 
.history-item { position:relative; margin-bottom:35px; } 
.history-section .dot { position:absolute; left:-47px; top:45px; width:14px; height:14px; border-radius:50%; border: 2px solid var(--main-color); background:#fff; z-index:2; transition:all .4s ease; } 
.history-section .dot.active { background: var(--main-color); border-color: var(--main-color); box-shadow: 0 0 15px #6f3acd; } 
.history-card { background:#fff; border:1px solid #eee; border-radius:16px; padding: 3rem; min-height:120px; } 
.year { font-size: 3.4rem; font-weight:700; margin-bottom: 1.5rem; } 
.year span { font-size:16px; color:#d73535; margin-left:10px; } 
.history-card p { color:#555; } 
.history-list { margin:0; padding:0; list-style:none; } 
.history-list li { position:relative; padding-left:16px; margin-bottom:8px; line-height:1.7; color:#555; } 
.history-list li:last-child { margin-bottom:0; } 
.history-list li:before { content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background: #111; } 
/* LOCATION */
.location-section { padding: 7rem; background: #9439af17; border-radius: 14px; } 
.loca_sec1 { margin-bottom: 6rem; } 
.location-section .inner { margin: 0 auto; display: flex; gap: 5rem; } 
#location .root_daum_roughmap .wrap_map { height: 100%; } 
/* 지도 */
.map-area { flex: 1; } 
.map-box { overflow: hidden; border-radius: 12px; border: 1px solid #e5e5e5; background: #fff; height: 100%; } 
.map-box iframe { width: 100%; height: 100%; display: block; border: 0; } 
.map-links { margin-top: 20px; display: flex; flex-wrap: wrap; } 
.map-links a { height: 52px; padding: 0 24px; display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; font-weight: 500; background: #fff; color: #333; transition: all .3s; } 
.map-links a.active { background: #000; color: #fff; border-color: #000; } 
.map-links a:hover { transform: translateY(-2px); } 
/* 정보 */
.info-area { width: 40%; background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 4rem 5rem; } 
.info-area .sub-tit { display: inline-block; position: relative; font-size: 12px; letter-spacing: 3px; color: var(--main-color); font-weight: 600; padding-left: 60px; margin-bottom: 1rem; } 
.info-area .sub-tit::before { content: ""; width: 45px; height: 1px; background: var(--main-color); position: absolute; left: 0; top: 50%; } 
.info-area h2 { font-size: 3.6rem; font-weight: 700; margin-bottom: 2rem; color: #111; } 
.info-list { display: flex; flex-direction: column; gap: 3rem; } 
.info-list li { display: flex; gap: 18px; } 
.info-list .icon { width: 44px; height: 44px; border-radius: 8px; background: #5f0a7812; display: flex; align-items: center; justify-content: center; color: var(--main-color); font-size: 18px; flex-shrink: 0; } 
.info-list strong { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 2px; color: #999; } 
.info-list p { font-size: 16px; line-height: 1.7; color: #333; } 
.info-list span { display: block; margin-top: 5px; font-size: 13px; color: #999; } 
.info-notice { margin-top: 40px; padding-top: 25px; border-top: 1px solid #eee; font-size: 14px; color: #777; } 
/* THEORY1 */
#theory1 { } 
#theory1 .inner { max-width: 1600px; width: 94%; margin: 0 auto; margin-bottom: 10rem; } 
#theory1 .inner.top_8rem { padding: 10rem 0; } 

/* ===== HERO SECTION ===== */
.hero-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; *//* align-items: flex-start; */ } 
.hero-section .hero-left { display: flex; flex-direction: column; justify-content: space-between; } 
.hero-section .hero-left .ms-chapter { margin-bottom: 2rem; } 
.chapter-label { font-size: 2rem; font-weight: 500; color: #7c3aed; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4rem; opacity: 0; transform: translateY(-10px); transition: opacity 0.6s ease, transform 0.6s ease; } 
.chapter-label.visible { opacity: 1; transform: translateY(0); } 
.hero-title { font-size: clamp(2rem, 4vw, 6rem); font-weight: 800; line-height: 1.2; color: #0d0d0d; margin-bottom: 4rem; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s; } 
.hero-title.visible { opacity: 1; transform: translateY(0); } 
.hero-desc { font-size: 2rem; color: #555; margin-bottom: 4rem; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s; } 
.hero-desc.visible { opacity: 1; transform: translateY(0); } 
.hero-icons { display: flex; gap: 2.8rem; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s; } 
.hero-icons.visible { opacity: 1; transform: translateY(0); } 
.icon-item { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 2rem; color: #444; font-weight: 500; border: 1px solid #e0ceff; border-radius: 10px; padding: 1.5rem 1rem; flex: 1; text-align: center; } 
.hero-right { display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateX(30px); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; } 
.hero-right.visible { opacity: 1; transform: translateX(0); } 
.apple-img-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.15); aspect-ratio: 5/3; } 
.apple-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } 
.hero-caption { display: flex; align-items: center; gap: 10px; background: #ffffffa8; border-radius: 11px; padding: 2rem; font-size: 2rem; color: #444; box-shadow: 0 2px 12px rgba(0,0,0,0.08); align-self: flex-start; position: absolute; top: 2rem; left: 2rem; backdrop-filter: blur(6px); width: calc(100% - 4rem); } 
.caption-dot { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: #fff; border-radius: 50%; font-weight: 700; flex-shrink: 0; } 
/* ===== SPECTRUM SECTION ===== */
.spectrum-section { background: #1a1a2e; padding: 13rem 0 13rem; } 
.spectrum-inner { margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: stretch; } 
.spectrum-sub { font-size: 2rem; color: #a78bfa; letter-spacing: 0.1em; margin-bottom: 4rem; } 
.spectrum-title { font-size: clamp(1.5rem, 4vw, 4rem); font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 3rem; } 
.spectrum-title em { font-style: normal; color: #a78bfa; } 
.spectrum-desc { font-size: 2rem; color: #b0b0c8; margin-bottom: 5rem; } 
.spectrum-desc strong { color: #c4b5fd; } 
.spectrum-range-boxes { display: flex; gap: 10px; } 
.range-box { flex: 1; padding: 12px 14px; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; } 
.range-box.uv { background: #3b1f6b; border: 1px solid #6d28d9; } 
.range-box.vis { background: #4c1d95; border: 1px solid #7c3aed; } 
.range-box.ir { background: #7f1d1d; border: 1px solid #dc2626; } 
.range-label { font-size: 2rem; color: #c4b5fd; font-weight: 500; } 
.range-name { font-size: 1.6rem; color: #fff; font-weight: 700; } 
.spectrum-right { display: flex; gap: 20px; align-items: stretch; align-content: space-between; } 
.spectrum-bars { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: space-between; } 
.bar { height: 46px; border-radius: 4px; opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 0.5s ease, transform 0.5s ease; } 
.bar.visible { opacity: 1; transform: scaleX(1); } 
.bar:nth-child(1) { transition-delay: 0.0s; } 
.bar:nth-child(2) { transition-delay: 0.08s; } 
.bar:nth-child(3) { transition-delay: 0.16s; } 
.bar:nth-child(4) { transition-delay: 0.24s; } 
.bar:nth-child(5) { transition-delay: 0.32s; } 
.bar:nth-child(6) { transition-delay: 0.40s; } 
.bar:nth-child(7) { transition-delay: 0.48s; } 
.spectrum-labels { display: flex; flex-direction: column; gap: 6px; justify-content: space-between; } 
.spec-label { display: flex; flex-direction: column; justify-content: center; } 
.spec-name { font-size: 1.5rem; color: #e5e7eb; font-weight: 500; white-space: nowrap; } 
.spec-nm { font-size: 1.5rem; color: #9ca3af; } 
/* ===== PROBLEMS TITLE SECTION ===== */
.problems-title-section { text-align: center; padding-top: 16rem; margin: 0 auto; } 
.problems-main-title { font-size: clamp(20px, 3vw, 5rem); font-weight: 900; color: #0d0d0d; margin-bottom: 1.6rem; line-height: 1.3; } 
.problems-sub-desc { font-size: 2rem; color: #666; line-height: 1.9; } 
/* ===== PROBLEM SECTIONS ===== */
.problem-section { margin: 0 auto; padding: 3rem 4rem 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } 
.problem-section.layout-img-left .problem-img-wrap { order: 1; } 
.problem-section.layout-img-left .problem-text { order: 2; } 
.problem-section.layout-text-left .problem-text { order: 1; } 
.problem-section.layout-text-left .problem-img-wrap { order: 2; } 
.problem-img-wrap { border-radius: 12px; overflow: hidden; aspect-ratio: 5/3; box-shadow: 0 6px 30px rgba(0,0,0,0.12); opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; min-height: 200px; } 
.problem-img-wrap.visible { opacity: 1; transform: translateY(0); } 
.problem-img { width: 100%; height: 100%; object-fit: cover; } 
.eyes-img { object-position: center center; } 
.problem-text { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s; } 
.problem-text.visible { opacity: 1; transform: translateY(0); } 
.problem-num { display: block; font-size: 3.5rem; font-weight: 900; color: #e5e7eb; line-height: 1; margin-bottom: 2rem; font-family: 'Noto Serif KR', serif; } 
.problem-title { font-size: clamp(17px, 2.9vw, 4rem); font-weight: 900; color: #0d0d0d; margin-bottom: 1.6rem; line-height: 1.3; } 
.problem-desc { font-size: 2rem; color: #555; } 
/* ===== SIZE DEMO ===== */
.size-demo-wrap { background: #f5f0e8; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 5/3; } 
.size-demo { display: flex; align-items: flex-end; gap: 24px; padding: 40px; } 
.size-block { background: #6d28d9; border-radius: 4px; } 
.size-block.large { width: 130px; height: 130px; } 
.size-block.small { width: 70px; height: 70px; } 
/* ===== BACKGROUND DEMO ===== */
.bg-demo-wrap { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } 
.bg-demo { display: flex; gap: 0; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 30px rgba(0,0,0,0.12); aspect-ratio: 4/3; } 
.bg-panel { flex: 1; display: flex; align-items: center; justify-content: center; } 
.bg-panel.dark-bg { background: #1a1a2e; } 
.bg-panel.light-bg { background: #f3f4f6; } 
.bg-circle { width: 90px; height: 90px; border-radius: 50%; background: #7c3aed; } 
/* ===== METAMERISM SECTION ===== */
.metamerism-section { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(135deg, #4c1d95 0%, #9f38b8 50%, #6d40b8 100%); marg; overflow: hidden; } 
.metamerism-left { padding: 6rem 5rem; display: flex; flex-direction: column; justify-content: center; gap: 4rem; } 
.meta-sub { font-size: 2rem; color: #c4b5fd; letter-spacing: 2px; } 
.meta-title { font-size: clamp(20px, 3vw, 3.4rem); font-weight: 900; color: #fff; line-height: 1.2; font-family: 'Noto Serif KR', serif; } 
.meta-title-ko { font-size: clamp(16px, 2.5vw, 3rem); font-family: 'Noto Sans KR', sans-serif; font-weight: 600; } 
.meta-desc { font-size: 2rem; color: #ddd6fe; width: 100%; } 
.meta-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1.5px solid rgba(255,255,255,0.6); color: #fff; padding: 2rem 4rem; border-radius: 50px; font-size: 1.8rem; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; cursor: pointer; align-self: flex-start; transition: background 0.3s, border-color 0.3s, transform 0.2s; } 
.meta-btn:hover { background: rgba(255,255,255,0.15); border-color: #fff; transform: translateX(4px); } 
.metamerism-right { overflow: hidden; position: relative; } 
.meta-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } 
.metamerism-right:hover .meta-img { transform: scale(1.05); } 
/* ===== SCROLL ANIMATIONS ===== */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } 
.fade-in.visible { opacity: 1; transform: translateY(0); } 

 /* PRO_LIST */
.category-all .inner { max-width: 1600px; margin: 0 auto; padding: 0 50px; } 
.category-all .list-title { margin-bottom: 80px; } 
.category-all .list-title h2 { font-size: 50px; } 
.category-all .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } 
.category-all .cat-item { display: block; color: #fff; position: relative; overflow: hidden; height: 42rem; background: #111; } 
.category-all .cat-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 0,9), opacity 0.5s; } 
.category-all .cat-item:hover img { transform: scale(1.07); opacity: 0.45; } 
.category-all .cat-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); } 
.category-all .cat-item .text-wrap { position: absolute; bottom: 0; left: 0; width: 100%; padding: 3.6rem; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); } 
.category-all .cat-item:hover .text-wrap { transform: translateY(-28px); } 
.category-all .cat-item .text-wrap h3 { font-size: 2.4rem; font-weight: 700; margin-bottom: 0; transition: margin-bottom 0.4s; } 
.category-all .cat-item .desc { font-size: 15px; font-weight: 400; line-height: 1.7; opacity: 0; max-height: 0; overflow: hidden; margin-top: 14px; color: rgba(255,255,255,0.85); transition: opacity 0.4s 0.1s, max-height 0.4s; word-break: keep-all; } 
.category-all .cat-item:hover .desc { opacity: 1; max-height: 80px; } 
/* 개인정보처리방침 */
.privacy_wrap { padding-top: 0rem; } 
.privacy_wrap textarea { width: 100%; padding: 2rem; border: 1px solid #dcdcdc; } 
/* inquiry_info */
#inquiry_info h2 { width: 100%; text-align:center; font-size: 2.7rem; padding-bottom: 10rem; font-weight: 400; line-height: 1.5; } 
#inquiry_info .flex_box { display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; } 
#inquiry_info .box1 h3 { font-weight: 400; font-size: 3rem; padding-bottom: 3rem; } 
#inquiry_info .box1 h3 b { color: var(--main-color); } 
#inquiry_info .box1 .as_list li { line-height: 1.9; position: relative; padding-left: 12px; } 
#inquiry_info .box1 .as_list li:before { content:''; display:block; position:absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--main-color); top: 1.5rem; left: 0; } 
#inquiry_info .box2 ul { text-align: center; padding-top: 2rem; } 
#inquiry_info .box2 li { background: var(--main-color); color: #ffff; line-height: 1.9; margin-top: 1rem; border-radius: 10px; padding: 3px; } 
#inquiry_info .box3 { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: space-around; justify-content: space-evenly; align-items: stretch; background: #f5f5ff; } 
#inquiry_info .box3 .contact_btn:hover { box-shadow: 2px 1px 3px 1px #c1c1f6; } 
#inquiry_info .box3 .contact_btn { background: #fff; border-radius: 10px; transition: all .3s; border: 1px solid #bebfe1; } 
#inquiry_info .box3 .contact_btn a { display: flex; flex-direction: row; justify-content: space-between; font-size: 1.8rem; color: #fff; color: var(--main-color); padding: 2rem; } 
.contact_box { width: 32%; border: 2px solid var(--main-color)47; padding: 4rem; border-radius: 20px; } 
.contact_box.box2 { display: flex; flex-direction: column; justify-content: center; } 
.contact_box.box2 .img_box img { width: 100%; } 
/* INQUIRY */
.inquiry_style1 h3 { font-size: 22px; font-weight: 400; padding-bottom: 5px; padding-top: 20px; } 
.inquiry_style1 .inquiry_tbl_style1_icon { color: var(--main-color); font-size: 17px; } 
.editor textarea { width: 100%; height: 150px; border: 1px solid #ddd; padding: 20px; font-size: 15px; font-weight: 100; color: #222; display: block; font-family: 'Noto Sans KR', sans-serif; } 
#inquiry .agree_txt { background: #eee; padding: 10px; font-size: 16px; } 
.inquiry_tbl_style1_con .write_input { border: 1px solid #ddd; padding: 15px 15px 15px 20px; font-size: 15px; font-weight: 500; color: #444; font-family: 'Noto Sans KR',sans-serif; } 
.write_input.wr_wid_100 { width: 40%; } 
.inquiry_para { margin-top:20px } 
.inquiry_tbl_style1_flex { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.tbl_style1_item { width: 32%; } 
.tbl_style1_item .write_input { width: 100%; } 
.cm_btn_controls { margin: 40px 0; } 
.btn_submit1 { border: unset; background: var(--main-color); color: #fff; text-align: center; width: 22rem; height: 6rem; font-size: 1.8rem; display: block; margin: 4rem auto; transition: all .4s; } 
.btn_submit1:hover { background:var(--main-color); } 
.sub_ex.inquiry_num h3 { font-size: 24px; font-weight: bold; } 
.sub_com .sub_com_section .sub_ex.inquiry_num p { font-size: 19px; font-weight: 500; } 
 .write-tbl td.flex_div_3 { display: flex; flex-direction: row; justify-content: space-between; } 
/* inquriy2 */
#inquiry2 { width: 100%; max-width: 1000px; margin: 0 auto; } 
#inquiry2 p.in2_p { padding-bottom: 2rem; color: #000; opacity: 0.4; text-align: right; } 
#inquiry2 .new_in_1 { /* padding-top: 2.2rem; *//* border-top: 1px solid #dcdcdc; *//* margin-top: 0.5rem; */ } 
#inquiry2 .inquiry_wrap section { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; width: 100%; margin-bottom: 2rem; align-items: center; padding: 0.5rem 0; } 
#inquiry2 .inquiry_wrap section.message_wrap { display: flex; align-items: flex-start; } 
#inquiry2 .inquiry_wrap section h4 { margin-right: 1rem; min-width: 20rem; font-size: 2rem; padding-bottom: 0; text-align: left; font-weight: 500; margin-bottom: 0; } 
#inquiry2 .inquiry_wrap section h4 span { color: var(--main-color); } 
#inquiry2 .inquiry_wrap section div { flex-grow: 1; flex-basis: 0; margin-bottom: 0; } 
#inquiry2 .inquiry_wrap section div.file_wrap { display: flex; align-content: center; align-items: center; } 
#inquiry2 .inquiry_wrap section .filebox input { flex-grow: 1; flex-basis: 0; } 
#inquiry2 .inquiry_wrap section input { /* border: unset; */padding: 0.5rem; background: unset; height: 5rem; width: 100%; /* outline: none; */-webkit-appearance : none; -moz-appearance:none; appearance:none; color: #444; font-weight: 400; border: 1px solid #dcdcdc; font-size: 1.8rem; padding: 0 2rem; } 
#inquiry2 .inquiry_wrap section input::placeholder { font-weight:400; color:#b7b7b7 } 
#inquiry2 input:focus,#inqruiy2 { outline:none; box-shadow:unset; } 
#inquiry2 textarea:focus { outline:none; box-shadow:unset; } 
#inquiry2 .width100 { width: 100% !important; } 
#inquiry2 .inquiry_wrap section textarea { border: unset; background: unset; height: 200px; flex: 1; padding: 2rem 0; border: 1px solid #dcdcdc; } 
#inquiry2 .inquiry_wrap section div.check_wrap { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 7rem; justify-content: space-between; } 
#inquiry2 .inquiry_wrap section div.check { flex-grow: unset; flex-basis: auto; border: 1px solid #6b6b6b; padding: 1rem; margin-left: 1rem; display: flex; align-items: center; cursor: pointer; } 
#inquiry2 .inquiry_wrap section div.check i { margin-left: 1rem; } 
#inquiry2 .inquiry_wrap section div.check_wrap .agree_txt { display: flex; align-content: center; flex-direction: row; align-items: center; } 
#inquiry2 .inquiry_wrap section div.check_wrap .agree_txt input { display: none; } 
#inquiry2 .inquiry_wrap section div.check_wrap .agree_txt i { margin-right: 1rem; font-size: 2rem; } 
#inquiry2 .inquiry_wrap section div.check_wrap input i { height: auto; width: auto; display: none; } 
#inquiry2 .inquiry_wrap section div.check_wrap label { display: flex; align-items: flex-start; cursor: pointer; } 
.agree_txt input[id="agree1"] + label i::before { content: "\e92c"; } 
.agree_txt input[id="agree1"]:checked + label i::before { content: "\e92b"; color: #000; } 
#inquiry2 .inquiry_wrap section.message_wrap h4 { margin-top: 2rem; } 
.file_wrap input::file-selector-button { margin-right:1rem; background:#222; color:#fff; font-family:'GmarketSans'; padding:1rem; border:unset } 
#inquiry2 .inquiry_wrap section div.file_wrap input { height: 100%; margin: 0.5rem; } 
#inquiry2 .inquiry_wrap section.name_wrap { display: flex; justify-content: space-between; width: 100%; } 
#inquiry2 .inquiry_wrap section.name_wrap .name_box { display: flex; } 
#inquiry2 .inquiry_wrap section.name_wrap .check_box { max-width: 46rem; height: 5rem; margin-left: 3rem; flex-grow: unset; flex-basis: 20%; } 
#inquiry2 .inquiry_wrap section.name_wrap .check_box span { border: 1px solid #dcdcdc; display: block; flex: 1; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; transition: all .3s; } 
#inquiry2 .inquiry_wrap section.name_wrap .check_box span:hover,#inquiry2 .inquiry_wrap section.name_wrap .check_box span.on { color: #fff; background: var(--main-color); border: 1px solid var(--main-color); cursor: pointer; } 
/* theory2 */
 /* =============================================
 공통 레이블 / 제목
 ============================================= */
 .ms-step-ico i { background: no-repeat center center/contain; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; } 
 .ms-step-ico i.xi-flash-o { background-image: url(/img/xi-flash.png); } 
 .ms-step-ico i.xi-circle-o { background-image: url(/img/xi-circle.png); } 
 .ms-step-ico i.xi-chart-bar-o { background-image: url(/img/xi-chart.png); } 
 .ms-step-ico i.xi-database { background-image: url(/img/xi-database.png); } 

 .hero-right i { background: no-repeat center center/contain; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; } 
 .hero-right i.xi-flash-o { background-image: url(/img/xi-flash.png); } 

 .xi-shirt { width: 2.4rem; height: 2.4rem; background: url(../img/xi-shirt.png) no-repeat center center/contain; } 
 .xi-printer { background: url(../img/xi-printer.png) no-repeat center center/contain; width: 2.4rem; height: 2.4rem; } 
 .ms-sub-label { font-size: 2rem; font-weight: 600; color: #9b59b6; letter-spacing: 0.06em; } 
 .ms-sub-label::before { content: '— '; } 
 .ms-section-h2 { font-size: clamp(2.6rem, 3.5vw, 5rem); font-weight: 900; color: #111; line-height: 1.15; } 
 .ms-chapter { display: inline-flex; align-items: center; gap: 8px; font-size: 2rem; font-weight: 700; color: #9b59b6; letter-spacing: 0.12em; text-transform: uppercase; } 
/* =============================================
 SECTION 1: HERO
 ============================================= */
 .ms-hero { } 
 .ms-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: flex-start; } 
 .ms-hero-text { display: flex; flex-direction: column; gap: 2.4rem; } 
 .ms-hero-title { font-size: clamp(3rem, 4vw, 5rem); font-weight: 900; color: #111; line-height: 1.24; word-break: keep-all; } 
 .ms-hero-title .accent { color: #9b59b6; } 
 .ms-hero-desc { font-size: 2rem; color: #555; word-break: keep-all; } 
 /* 수치 스탯 영역 */
 .ms-stats { display: flex; gap: 4rem; padding-top: 1rem; } 
 .ms-stat-item { display: flex; flex-direction: column; gap: 0.4rem; border: 1px solid #e0ceff; border-radius: 16px; flex: 1; padding: 2rem; align-items: center; } 
 .ms-stat-label { font-size: 1.6rem; margin-bottom: 1rem; color: #999; font-weight: 500; } 
 .ms-stat-value { font-size: 2.4rem; font-weight: 900; color: #9b59b6; line-height: 1; font-family: 'Pretendard', sans-serif; } 
 /* 오른쪽 이미지 */
 .ms-hero-visual { position: relative; } 
 .ms-hero-img-wrap { border-radius: 16px; overflow: hidden; } 
 .ms-hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } 
 .ms-hero-badge { position: absolute; top: 1.6rem; left: 1.6rem; background: rgba(255,255,255,0.92); border-radius: 8px; padding: 0.7rem 1.4rem; font-size: 1.3rem; font-weight: 600; color: #444; backdrop-filter: blur(6px); box-shadow: 0 2px 12px rgba(0,0,0,0.1); } 
 /* =============================================
 SECTION 2: 측정의 4단계 원리
 ============================================= */
 .ms-steps { background: #f7f8fa; } 
.ms-steps .inner_wrap { padding: 16rem 0; } 
 .ms-steps-head { text-align: center; margin-bottom: 5rem; } 
 .ms-steps-head .ms-sub-label { display: block; margin-bottom: 1.2rem; } 
 .ms-steps-head .ms-section-h2 { margin-bottom: 1.6rem; } 
 .ms-steps-head p { font-size: 2rem; color: #555; line-height: 1.8; } 
 /* 스텝 카드 그리드 */
 .ms-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; } 
 /* 연결선 */
 .ms-steps-grid::before { content: ''; position: absolute; top: 13rem; left: calc(12.5% + 1rem); right: calc(12.5% + 1rem); height: 2px; background: linear-gradient(to right, #9b59b6, #c084fc); z-index: 0; } 
 .ms-step-card { background: #fff; border-radius: 16px; padding: 3rem 2.4rem 3.2rem; display: flex; flex-direction: column; gap: 1.4rem; position: relative; box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; } 
 .ms-step-card:hover { box-shadow: 0 6px 28px rgba(155, 89, 182, 0.14); transform: translateY(-3px); } 
 .ms-step-num { position: absolute; top: -1.6rem; right: 3rem; width: 4rem; height: 4rem; background: #7c3aed; color: #fff; border-radius: 50%; font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4); } 
 .ms-step-ico { width: 4.4rem; height: 4.4rem; display: flex; align-items: center; justify-content: center; background: #f5f0ff; border-radius: 10px; font-size: 2rem; color: #7c3aed; } 
 .ms-step-label { font-size: 1.6rem; font-weight: 700; color: #9b59b6; letter-spacing: 0.08em; text-transform: uppercase; } 
 .ms-step-title { font-size: 2rem; font-weight: 700; color: #111; line-height: 1.35; word-break: keep-all; } 
 .ms-step-desc { font-size: 1.6rem; color: #666; line-height: 1.8; word-break: keep-all; } 
 /* =============================================
 SECTION 3: 광학 기하학 구조
 ============================================= */
 .ms-optics { } 
 .ms-optics-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: flex-start; } 
 .ms-optics-left { display: flex; flex-direction: column; gap: 2.4rem; } 
 .ms-optics-title { font-size: clamp(2.4rem, 3vw, 5rem); font-weight: 900; color: #111; line-height: 1.25; word-break: keep-all; } 
 .ms-optics-desc { font-size: 2rem; color: #555; word-break: keep-all; } 
 /* 가이드 박스 */
 .ms-guide-box { background: #7c3aed; border-radius: 12px; padding: 2.4rem 2.8rem; color: #fff; } 
 .ms-guide-box-title { display: flex; align-items: center; gap: 0.8rem; font-size: 2rem; font-weight: 700; margin-bottom: 1.4rem; } 
 .ms-guide-list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; } 
 .ms-guide-list li { display: flex; align-items: center; gap: 0.8rem; font-size: 1.8rem; color: rgba(255,255,255,0.9); line-height: 1.5; } 
 .ms-guide-list li::before { content: '✓'; font-size: 1.3rem; color: #c084fc; font-weight: 700; flex-shrink: 0; } 
 /* 오른쪽 광학 타입 카드들 */
 .ms-optics-right { display: flex; flex-direction: column; gap: 2rem; } 
 .ms-optic-card { display: grid; grid-template-columns: 9rem 1fr; gap: 3rem; align-items: center; border: 1.5px solid #e8e8e8; border-radius: 14px; padding: 2.4rem 2.8rem; transition: border-color 0.2s, box-shadow 0.2s; } 
 .ms-optic-card:hover { border-color: #9b59b6; box-shadow: 0 4px 20px rgba(155, 89, 182, 0.1); } 
 .ms-optic-badge { display: flex; align-items: center; justify-content: center; width: 10rem; height: 100%; background: #7c3aed; border-radius: 12px; font-size: 2rem; font-weight: 900; color: #fff; text-align: center; line-height: 1.3; flex-shrink: 0; } 
 .ms-optic-badge.multi { font-size: 1.8rem; line-height: 1.4; } 
 .ms-optic-title { font-size: 2rem; font-weight: 800; color: #111; margin-bottom: 0.7rem; } 
 .ms-optic-desc { font-size: 1.8rem; color: #666; line-height: 1.8; word-break: keep-all; } 
 /* =============================================
 SECTION 4: 색차 ΔE (다크)
 ============================================= */
 .ms-delta { background: #111118; } 
.ms-delta .inner_wrap { padding: 16rem 0; } 
 .ms-delta-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: center; } 
 .ms-delta-left { display: flex; flex-direction: column; gap: 2rem; } 
 .ms-delta-sub { font-size: 2rem; font-weight: 600; color: #c4b5fd; font-style: italic; letter-spacing: 0.06em; } 
 .ms-delta-sub::before { content: '— '; } 
 .ms-delta-title { font-size: clamp(3rem, 4vw, 5rem); font-weight: 900; color: #fff; line-height: 1.1; word-break: keep-all; } 
 .ms-delta-title .accent { color: #c084fc; } 
 .ms-delta-desc { font-size: 2rem; color: #c4b5fd; line-height: 1.6; word-break: keep-all; } 
 .ms-delta-note { display: flex; align-items: center; gap: 1rem; background: rgba(192, 132, 252, 0.12); border: 1px solid rgba(192, 132, 252, 0.25); border-radius: 8px; padding: 2rem 3rem; font-size: 2rem; color: #ddd6fe; line-height: 1.6; } 
 .ms-delta-note::before { content: '●'; color: #c084fc; font-size: 0.8rem; flex-shrink: 0; } 
 /* 오른쪽 색차 공식 카드들 */
 .ms-delta-right { display: flex; flex-direction: column; gap: 2.4rem; } 
 .ms-formula-card { display: flex; align-items: center; gap: 2.4rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 2.4rem 2.8rem; transition: background 0.25s; } 
 .ms-formula-card:hover { background: rgba(255,255,255,0.08); } 
 .ms-formula-num { font-size: 2.8rem; font-weight: 700; color: #a78bfa; min-width: 2.4rem; flex-shrink: 0; } 
 .ms-formula-body { flex: 1; } 
 .ms-formula-name { font-size: 2rem; font-weight: 900; color: #fff; margin-bottom: 0.4rem; } 
 .ms-formula-name .accent { color: #c084fc; } 
 .ms-formula-sub { font-size: 1.8rem; color: #a78bfa; } 
 .ms-formula-tag { font-size: 1.6rem; color: #888; border: 1px solid #333; border-radius: 6px; padding: 0.4rem 1rem; white-space: nowrap; flex-shrink: 0; } 
 /* =============================================
 SECTION 5: 육안 측정 vs 색차계 측정 비교표
 ============================================= */
 .ms-compare { } 
 .ms-compare-head { text-align: center; margin-bottom: 5rem; } 
 .ms-compare-head .ms-sub-label { display: block; margin-bottom: 1.2rem; } 
 .ms-compare-head .ms-section-h2 { margin-bottom: 0; } 
 /* 비교 테이블 */
 .ms-compare-table { width: 100%; border-collapse: collapse; } 
 .ms-compare-table th,
 .ms-compare-table td { padding: 1.8rem 2.4rem; text-align: left; font-size: 1.65rem; border-bottom: 1px solid #eee; line-height: 1.5; } 
 .ms-compare-table thead th { font-size: 2rem; font-weight: 600; color: #999; border-bottom: 2px solid #e0e0e0; padding-bottom: 1.4rem; } 
 .ms-compare-table thead th:last-child { color: #9b59b6; } 
 .ms-compare-table tbody tr:last-child td { border-bottom: none; } 
 .ms-compare-table tbody tr:hover td { background: #faf8ff; } 
 .ms-compare-table td:first-child { font-weight: 700; color: #222; width: 16%; } 
 .ms-compare-table td:nth-child(2) { color: #666; width: 42%; } 
 .ms-compare-table td:nth-child(3) { color: #9b59b6; font-weight: 600; width: 42%; } 
 /* =============================================
 RESPONSIVE
 ============================================= */
 @media (max-width: 1024px){
 .ms-hero-grid,
 .ms-optics-grid,
 .ms-delta-grid { grid-template-columns: 1fr; gap: 3rem; } 
 .ms-steps-grid { grid-template-columns: repeat(2, 1fr); } 
 .ms-steps-grid::before { display: none; } 
 }
 @media (max-width: 640px){
 .ms-steps-grid { grid-template-columns: 1fr; } 
 .ms-optic-card { grid-template-columns: 1fr; gap: 1rem; } 
 .ms-stats { flex-wrap: wrap; gap: 2rem; } 
 .ms-compare-table th,
 .ms-compare-table td { padding: 1.2rem 1.4rem; font-size: 1.4rem; } 
 .ms-compare-table td:first-child { word-break: keep-all; width: 19%; } 
 .ms-compare-table thead th { font-size: 1.7rem; } 
 }
/* //theory2 end */
/* theory3 start */
 /* =============================================
 SECTION 1: HERO
 ============================================= */
 .ls-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: flex-start; } 
 /* 왼쪽 텍스트 */
 .ls-hero-text { display: flex; flex-direction: column; gap: 2.4rem; } 
 .ls-chapter { display: inline-flex; align-items: center; gap: 10px; font-size: 1.8rem; font-weight: 700; color: #9b59b6; letter-spacing: 0.12em; text-transform: uppercase; } 
 .ls-chapter::before { content: ''; display: inline-block; width: 12px; height: 2px; background: currentColor; flex-shrink: 0; } 
 .ls-hero-title { font-size: clamp(3rem, 4vw, 5rem); font-weight: 900; color: #111; line-height: 1.22; word-break: keep-all; } 
 .ls-hero-title .accent { color: #9b59b6; } 
 .ls-hero-desc { font-size: 2rem; color: #555; line-height: 1.6; word-break: keep-all; } 
 .ls-tags { display: flex; flex-wrap: wrap; gap: 0.8rem; } 
 .ls-tag { text-align: center; display: inline-block; padding: 1rem 1.4rem; flex: 1; border: 1.5px solid #9b59b6; color: #9b59b6; border-radius: 4px; font-size: 1.8rem; font-weight: 600; background: #fff; cursor: default; transition: border-color 0.2s, color 0.2s; } 
 .ls-tag:hover { border-color: #9b59b6; color: #9b59b6; } 
 /* 오른쪽 이미지 */
 .ls-hero-visual { display: flex; flex-direction: column; gap: 1.6rem; } 
 .ls-apple-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } 
 .ls-apple-box { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; } 
 .ls-apple-box img { width: 100%; height: 100%; object-fit: cover; } 
 .ls-apple-box.warm { background: #f5ede0; } 
 .ls-apple-box.cool { background: #1a1030; } 
 .ls-apple-box.cool img { filter: hue-rotate(200deg) saturate(0.8) brightness(0.7); } 
 .ls-caption { display: flex; align-items: center; gap: 1.4rem; background: #1a1a1a; border-radius: 12px; padding: 1.8rem 2.2rem; color: #fff; font-size: 1.55rem; line-height: 1.65; } 
 .ls-caption-dot { display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; min-width: 3.4rem; background: #7c3aed; border-radius: 50%; font-size: 1.5rem; color: #fff; } 
 /* =============================================
 SECTION 2: CIE 표준 광원
 ============================================= */
 .ls-cie { background: #f7f8fa; padding: 1px 0 1px; } 
 .ls-cie-head { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: flex-end; margin-bottom: 4.8rem; } 
 .ls-sub-label { font-size: 1.8rem; font-weight: 600; color: #9b59b6; letter-spacing: 0.06em; margin-bottom: 2rem; } 
 .ls-sub-label::before { content: '— '; } 
 .ls-section-h2 { font-size: clamp(2.6rem, 3.5vw, 5rem); font-weight: 800; color: #111; line-height: 1.15; } 
 .ls-cie-head-right p { font-size: 1.8rem; text-align: right; color: #555; line-height: 1.9; word-break: keep-all; } 
 /* 카드 그리드 */
 .ls-cie-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } 
 .ls-card { border-radius: 16px; padding: 4.6rem; } 
 .ls-card.d65 { background: #dff0fb; } 
 .ls-card.a { background: #fefce8; } 
 .ls-card.f2 { background: #e0faf0; } 
 .ls-card.u30 { background: #fde8f4; } 
 .ls-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2.2rem; } 
 .ls-card-name { font-size: 3.4rem; font-weight: 900; color: #111; line-height: 1; margin-bottom: 1rem; } 
 .ls-card-k { font-size: 1.8rem; color: #666; font-weight: 500; } 
 .ls-card-ico { font-size: 2.2rem; color: #888; margin-top: 0.4rem; } 
 .ls-card-hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin-bottom: 2rem; } 
 .ls-card-type { font-size: 2rem; font-weight: 700; color: #222; margin-bottom: 0.9rem; } 
 .ls-card-desc { font-size: 1.8rem; color: #555; line-height: 1.85; word-break: keep-all; } 
 /* =============================================
 SECTION 3: 색온도 스케일
 ============================================= */
 .ls-temp { padding: 1px; text-align: center; } 
 .ls-temp-head { margin-bottom: 5rem; } 
 .ls-temp-head .ls-sub-label { display: block; margin-bottom: 1.2rem; } 
 .ls-temp-head .ls-section-h2 { margin-bottom: 1.8rem; } 
 .ls-temp-head p { font-size: 2rem; color: #555; line-height: 1.8; } 
 .ls-temp-bar { width: 100%; height: 7rem; border-radius: 50px; background: linear-gradient(
 to right,
 #ff5500 0%,
 #ff8800 12%,
 #ffaa33 25%,
 #ffcc66 38%,
 #ffeeaa 50%,
 #e8f0ff 62%,
 #c0d8ff 75%,
 #99bbff 88%,
 #7799ff 100%
 ); margin-bottom: 3.5rem; } 
 .ls-temp-ticks { display: grid; grid-template-columns: repeat(6, 1fr); } 
 .ls-tick { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } 
 .ls-tick-k { font-size: 2rem; font-weight: 800; color: #111; font-family: 'Pretendard', sans-serif; } 
 .ls-tick-name { font-size: 1.6rem; color: #888; } 
 /* =============================================
 SECTION 4: 세 가지 요소 (다크)
 ============================================= */
 .ls-factors { background: linear-gradient(135deg, #180828 0%, #2a1048 40%, #1e0a38 100%); padding: 1px 0 1px; } 
 .ls-factors-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 6rem; align-items: center; } 
 .ls-factors-left { display: flex; flex-direction: column; gap: 2rem; } 
 .ls-factors-sub { font-size: 1.6rem; font-weight: 600; color: #c4b5fd; letter-spacing: 0.06em; } 
 .ls-factors-sub::before { content: '— '; } 
 .ls-factors-h2 { font-size: clamp(2.8rem, 3.5vw, 5rem); font-weight: 900; color: #fff; line-height: 1.2; word-break: keep-all; } 
 .ls-factors-h2 .accent { color: #c084fc; } 
 .ls-factors-desc { font-size: 2rem; color: #c4b5fd; line-height: 1.9; word-break: keep-all; } 
 .ls-factors-right { display: flex; flex-direction: column; gap: 3rem; } 
 .ls-factor-item { display: flex; align-items: flex-start; gap: 2rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 2.4rem 2.8rem; transition: background 0.25s; } 
 .ls-factor-item:hover { background: rgba(255,255,255,0.09); } 
 .ls-factor-ico { display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; min-width: 4.4rem; background: rgba(192, 132, 252, 0.18); border-radius: 10px; font-size: 2rem; color: #c084fc; } 
 .ls-factor-body { flex: 1; } 
 .ls-factor-num { font-size: 1.4rem; font-weight: 700; color: #a78bfa; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; } 
 .ls-factor-title { font-size: 1.9rem; font-weight: 800; color: #fff; margin-bottom: 0.7rem; } 
 .ls-factor-title .accent { color: #c084fc; } 
 .ls-factor-desc { /* font-size: 1.5rem; */color: #c4b5fd; line-height: 1.8; word-break: keep-all; } 
 /* =============================================
 SECTION 5: 산업별 광원 선택 기준
 ============================================= */
 .ls-industry { text-align: center; } 
 .ls-industry-head { margin-bottom: 5rem; } 
 .ls-industry-head .ls-sub-label { display: block; margin-bottom: 1.2rem; } 
 .ls-industry-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: left; } 
 .ls-ind-card { border: 1.5px solid #e8e8e8; border-radius: 14px; padding: 3rem 2.4rem; display: flex; flex-direction: column; gap: 1.4rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } 
 .ls-ind-card:hover { border-color: #9b59b6; box-shadow: 0 6px 24px rgba(155, 89, 182, 0.12); transform: translateY(-2px); } 
 .ls-ind-ico { display: flex; align-items: center; justify-content: center; width: 5.2rem; height: 5.2rem; background: #f5f0ff; border-radius: 12px; font-size: 2.4rem; color: #7c3aed; } 
 .ls-ind-name { font-size: 2.2rem; font-weight: 700; color: #111; } 
 .ls-ind-desc { font-size: 1.7rem; color: #666; line-height: 1.8; word-break: keep-all; } 
 /* =============================================
 RESPONSIVE
 ============================================= */
 @media (max-width: 1024px){
 .ls-hero-grid,
 .ls-cie-head,
 .ls-factors-grid { grid-template-columns: 1fr; gap: 3rem; } 
 .ls-cie-cards { grid-template-columns: 1fr; } 
 .ls-industry-cards { grid-template-columns: repeat(2, 1fr); } 
 .ls-temp-ticks { gap: 1rem; } 
 }
 @media (max-width: 640px){
 .ls-temp-head { margin-bottom: 3rem; } 
 .ls-temp-bar { height: 5rem; margin-bottom: 2rem; } 
 .ls-apple-row { grid-template-columns: 1fr; } 
 .ls-temp-ticks { gap: 1px; } 
 .ls-hero-title { font-size: 2.8rem; } 
 }
/* theory3 end */

/* 적용사례 */
:root { --primary: #5f0a78; --primary-light: #7b1fa2; --primary-dark: #3d0650; --primary-soft: #f3e5f5; --accent: #ce93d8; --text-main: #1a1a2e; --text-sub: #4a4a6a; --text-muted: #8888aa; --bg: #fafafa; --bg-card: #ffffff; --border: #e0d0ea; --shadow-sm: 0 2px 8px rgba(95,10,120,0.08); --shadow-md: 0 6px 24px rgba(95,10,120,0.14); --shadow-lg: 0 16px 48px rgba(95,10,120,0.18); --radius: 14px; --radius-sm: 8px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } 
 /* ===== PAGE TITLE ===== */
 .page-title { text-align: center; font-size: 3.6rem; font-weight: 800; color: var(--primary-dark); letter-spacing: -0.03em; margin-bottom: 4rem; position: relative; } 

 .page-title::after { content: ''; display: block; width: 6rem; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; margin: 1.2rem auto 0; } 

 /* ===== TAB NAVIGATION ===== */
 .tab-nav { display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; margin-bottom: 6rem; border: 1px solid var(--border); justify-content: center; max-width: 90rem; margin-left: auto; margin-right: auto; } 
.tab-nav.one_box { max-width: 30rem; width: 100%; } 
.tab-nav.multi_box { max-width: unset; width: auto; } 
.tab-nav.multi_box .tab-btn { flex: 1; width: fit-content; } 
 .tab-btn { flex: 1; padding: 2rem; font-size: 2rem; font-weight: 600; cursor: pointer; border: none; background: var(--bg-card); color: var(--text-muted); transition: var(--transition); position: relative; letter-spacing: 0.02em; /* border: 1px solid var(--border); */ } 

 .tab-btn:hover { background: var(--primary-soft); color: var(--primary); } 

 .tab-btn.active { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #fff; } 

 .tab-btn.active::after { transform: translateX(-50%) scaleX(1); background: rgba(255,255,255,0.5); } 

 /* ===== TAB CONTENT ===== */
 .tab-panel { display: none; animation: fadeSlideIn 0.4s ease; } 

 .tab-panel.active { display: block; } 

 @keyframes fadeSlideIn { 
 from { opacity: 0; transform: translateY(16px); } 
 to { opacity: 1; transform: translateY(0); } 
 }

 /* ===== SECTION CARD ===== */
#case { max-width: 1500px; } 
 .section-card { border-top: 1px solid #dcdcdc; overflow: hidden; transition: box-shadow var(--transition); padding: 6rem 0rem; } 
 .section-title { font-size: 2.2rem; font-weight: 700; color: var(--primary-dark); padding-left: 1.4rem; border-left: 4px solid var(--primary); line-height: 1.4; } 

 /* ===== CONTENT LAYOUT ===== */
 .content-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; } 



 /* ===== TEXT CONTENT ===== */
 .text-content { display: flex; flex-direction: column; gap: 3rem; } 

 .description-box { background: var(--primary-soft); padding: 2rem 3rem; font-size: 1.7rem; line-height: 1.8; border-radius: 10px; } 

 .recommend-block { padding: 0; } 

 .recommend-label { font-size: 2rem; font-weight: 700; color: var(--primary); margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; } 

 .recommend-label::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; } 

 #case .panel_list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; height: auto; } 

 #case .panel_list li { font-size: 1.7rem; color: var(--text-sub); padding: 1rem 1.4rem; background: var(--bg); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 0.8rem; transition: var(--transition); cursor: pointer; } 
 #case .panel_list li::before { content: '·'; color: var(--primary); font-weight: 900; font-size: 2rem; } 

 /* ===== IMAGE SLIDER ===== */
 .slider-wrapper { display: flex; flex-direction: column; gap: 1.4rem; } 

 .slider-main { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/2.4; background: #1a0a22; box-shadow: var(--shadow-md); } 

 .slider-track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } 

 .slide-item { min-width: 100%; height: 100%; position: relative; overflow: hidden; } 

 .slide-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } 

 .slide-item:hover img { transform: scale(1.03); } 

 /* Slide overlay gradient */
 .slide-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(95,10,120,0.25) 0%, transparent 50%); pointer-events: none; } 

 /* Slider controls */
 .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 4rem; height: 4rem; background: rgba(255,255,255,0.92); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.2); transition: var(--transition); z-index: 10; color: var(--primary); } 

 .slider-btn:hover { background: var(--primary); color: #fff; transform: translateY(-50%) scale(1.1); } 

 .slider-btn svg { width: 1.8rem; height: 1.8rem; } 

 .slider-btn-prev { left: 1.2rem; } 
 .slider-btn-next { right: 1.2rem; } 

 /* Dots */
 .slider-dots { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; z-index: 10; } 

 .slider-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; transition: var(--transition); padding: 0; } 

 .slider-dots .dot.active { background: #fff; width: 24px; border-radius: 4px; } 

 /* Thumbnails */
 .slider-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); } 

 .thumb-item { aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2.5px solid transparent; transition: var(--transition); box-shadow: var(--shadow-sm); } 

 .thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } 

 .thumb-item:hover img { transform: scale(1.06); } 

 .thumb-item.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(95,10,120,0.2); } 

 /* ===== SECOND TAB CONTENT ===== */
 .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; padding: 3.2rem; } 

 @media (max-width: 640px){
 .info-grid { grid-template-columns: 1fr; } 
 }

 .info-card { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 2.4rem; transition: var(--transition); } 

 .info-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); } 

 .info-card-icon { width: 4.8rem; height: 4.8rem; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1.6rem; } 

 .info-card-icon svg { width: 2.4rem; height: 2.4rem; color: #fff; } 

 .info-card-title { font-size: 1.9rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.8rem; } 

 .info-card-desc { font-size: 1.6rem; color: var(--text-sub); line-height: 1.7; } 

 /* ===== BADGE ===== */
 .badge { display: inline-block; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #fff; font-size: 1.3rem; font-weight: 600; padding: 0.3rem 1rem; border-radius: 99px; letter-spacing: 0.04em; vertical-align: middle; margin-left: 0.8rem; } 

 /* ===== 준비중페이지 ===== */
 .ready section { position: relative; } 
 
 /* ===== 메인 카드 ===== */
 .card { position: relative; z-index: 1; background: var(--bg-card); border-radius: 24px; width: 90%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 auto; } 

 /* ===== 아이콘 영역 ===== */
 .icon-wrap { position: relative; width: 11rem; height: 11rem; margin-bottom: 3.6rem; } 

 /* 외부 링 회전 */
 .icon-ring { position: absolute; inset: 0; border-radius: 50%; border: 2.5px dashed var(--accent); animation: spinRing 10s linear infinite; } 

 @keyframes spinRing { 
 from { transform: rotate(0deg); } 
 to { transform: rotate(360deg); } 
 }

 /* 내부 원 */
 .icon-bg { position: absolute; inset: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); box-shadow: 0 8px 32px rgba(95,10,120,0.35); display: flex; align-items: center; justify-content: center; animation: pulseBg 3s ease-in-out infinite; } 

 @keyframes pulseBg { 0%, 100% { box-shadow: 0 8px 32px rgba(95,10,120,0.35); } 
 50% { box-shadow: 0 8px 48px rgba(95,10,120,0.55); } 
 }

 .icon-bg i { /* width: 4.4rem; *//* height: 4.4rem; */color: #fff; animation: wrenchWiggle 3s ease-in-out infinite; font-size: 4rem; } 

 @keyframes wrenchWiggle { 0%, 100% { transform: rotate(-8deg); } 
 50% { transform: rotate(8deg); } 
 }

 @keyframes blink { 0%, 100% { opacity: 1; } 
 50% { opacity: 0.2; } 
 }

 .main-message { font-size: 2.2rem; font-weight: 700; line-height: 1.65; margin-bottom: 1.6rem; word-break: keep-all; } 

 .sub-message { font-size: 1.7rem; color: var(--text-sub); line-height: 1.75; margin-bottom: 4rem; word-break: keep-all; } 

 /* ===== 하단 도트 장식 ===== */
 .dot-deco { position: absolute; z-index: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; opacity: 0.18; } 

 .dot-deco-br { bottom: 3rem; right: 3rem; } 

 .dot-deco-tl { top: 3rem; left: 3rem; } 

 .dot-deco span { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); display: block; } 

 /* 단종제품 */
 .table-box { overflow-x: auto; border: 1px solid #e5e5e5; border-radius: 10px; } 
 .discontinued-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 1.8rem; text-align: center; } 
 .discontinued-table thead { background: #5f0a78; } 
 .discontinued-table th { color: #fff; padding: 1.8rem 2rem; font-weight: 600; text-align: center; } 
 .discontinued-table td { padding: 18px 20px; border-bottom: 1px solid #eee; color: #444; } 
 .discontinued-table tbody tr:nth-child(even) { background: #fafafa; } 
 .discontinued-table td:nth-child(2) { text-align: center; color: #5f0a78; font-weight: 600; } 
 .discontinued-table td:last-child { font-weight: 600; } 

 

/**************************** RESPONSIVE ****************************/
/* 반응형 */

@media (max-width: 1700px) { /* COMPANY */
.write-tbl th { width: 20%; } 
 }
 @media (max-width: 1430px){
 .depth_wrap > div.home_btn::before { display:none; } 
 .ceo-section .big-text { font-size: 3.2rem; margin-bottom: 4rem; } 
 }
@media (max-width: 1360px){
 .depth_wrap > div.menu_2 { padding: 0; } 
 }
@media (max-width: 1300px){
 #inquiry .sub_inner_wrap { width: 90%; margin: 0 auto; } 
 .circle_scroll { bottom: 0; right: 4rem; } 
 .dot_list.list3 li::before { top: 13px; width: 4px; height: 4px; } 
 .write-tbl .write-input.input100 { width:100%; } 
 .write-tbl th { min-width: 116px; } 
 .write-tbl .write-input { width: 100%; } 
 .write-tbl .write-select { width: 30%; } 
 .depth_wrap > div.depth3 .depth_name { display: flex; } 
 .sub_depth3 li { width: 100%; text-align: left; padding: 0; } 
 .visual_menu_wrap .depth_wrap .sub_depth3 li { text-align: center; } 
 .two_wrap .eq_arti .right_box p, .two_wrap .eq_arti .right_box li { font-size: 2rem; } 
 .info-area { width: 380px; padding: 4rem; } 
 }

@media (max-width: 1080px){
 .visual_menu_wrap { width: 96%; top: 70%; } 
 .map-box iframe { height: 450px; } 
 .ms-optics-title br { display:none; } 
 .ms-hero-title br { display:none; } 
 .info-area { width: 60%; } 
 .location-section { padding: 3rem; } 
 .location-section .inner { gap: 3rem; } 
 .history-sticky h2 { font-size: 4rem; } 
 .history-left { width: 38%; } 
 .history-section { gap: 4rem; } 
 .inner_wrap { margin: 10rem auto; } 
 .sub_visual_txt h1 { font-size: 4rem; } 
 .top_title h2 { font-size: 3.6rem; } 
.two_wrap .eq_arti .right_box .slide_wrap { max-width: unset; height: 400px; } 
 .two_wrap .eq_arti .right_box .slide_wrap img { height: 100%; width: auto; } 
 .slide_wrap .swiper-slide img { width: 100%; height: 100%; object-fit: contain; } 
 .sub_tit_box { margin-bottom: 7rem; } 
 .sub_com p { font-size: 18px; } 
 .depth_wrap > div.menu_2 { display: none; } 
 .sub_visual_box { height: 40rem; } 
.sub_visu_hidd { height: 28rem; } 
 .sub_menu_tit_wrap { height: 22rem; } 
 .sub_tit_h2 h2 { font-size: 4rem; } 
 .sub_menu_tit_wrap .inner { top: calc(40% + 6rem); } 
 .pc_sub_menu .com_depth li a { font-size: 17px; } 
 .tab_list div { min-height: 7rem; font-size: 1.8rem; } 
 .iframe_box iframe { height: 580px; } 
 .sub_com > article:first-child { margin-bottom: 2rem; } 
 /* ABOUT */
 .ceo-section .inner { gap: 6rem; padding: 0 4rem; } 
 .ceo-section .img-box { width: 50%; flex: unset; height: 60rem; min-height: 300px; } 
/* INQUIRY */
 .contact_box { width: 48%; } 
 .contents_wrap > div { margin-bottom: 4%; } 
 .contact_box.box1 { width: 100%; } 
 /* ABOUT */
.top_title { margin-bottom: 4rem; margin-top: 0rem; } 
 #about .about_bg { height: 40rem; margin-top: 5rem; } 
 #about .about_section { margin-top: 8rem; } 
 #about .letter { font-size: 4rem; top: 0; position: relative; } 
 #about h5 { margin-bottom: 2rem; font-weight: 700; line-height: 1.2; } 
 #about .order .letter { top: 0; } 
 #about .about_bg .inner { padding: 6rem; } 
 /* PRODUCT */
 .sub_com .info_box .box { margin-bottom: 3rem; } 
 .frag_wrap { width: 100%; } 
 .frag_wrap li { width: 20%; } 
 .sub_com .pro_tit1 { font-size: 2.8rem; } 
 #history .history_logo img { max-width: 130px; } 
 #esg h3 { font-size: 2.2rem !important; } 
 #esg #tab_1 .inner > .img_box:nth-child(1) img { max-width: 100px; } 
 .cyber_wrap .section1 ul li { margin: 1.5rem 2rem; flex: 0 1 24%; } 
 #ci .info_box .dot_list { height: 20rem; } 
 .eq_arti .left_box { width: 50%; } 
 .eq_arti .left_box .img_box img { width: 100%; height: auto; } 
 .pro_intro_list > li { flex: 0 1 32%; padding: 2rem; } 
 .two_wrap .eq_arti .right_box { margin-left: 3%; width: 70%; width: 100%; } 
 #his_new .tit_box p { font-size: 2.4rem; } 
 #his_new .his_li h4 { font-size: 2.6rem; padding-bottom: 1rem; } 
 #his_new .info_box .his_li { margin-bottom: 3rem; } 
 #his_new .info_box .his_li li { font-size: 1.8rem; display: flex; word-break: keep-all; } 
 .two_wrap .pipe_wrap .pipe_img .img_box { margin-bottom: 4rem; } 
 .two_wrap .eq_arti .right_box li span { flex: 1 0 0; } 
 .frame1 .eq_arti.arti2 .right_box .list3 { display: flex; flex-direction: column; } 
 .frame1 .eq_arti.arti2 .right_box .list3 > li { flex: 1 1 100%; margin-bottom: 2rem; } 
 .frame1 .eq_arti.arti2 .right_box .list3 > li:last-child { margin-bottom: 0; } 
 .frame1 .eq_arti.arti2 .right_box .new_design .list3 > li b { margin-right: 1rem; } 
 .frame1 .eq_arti.arti2 .right_box .new_design .list3 > li { display: flex; flex-direction: column; } 
 }

@media (max-width: 800px){
 .tab_list div { flex: 1 0 32%; border-bottom: unset; } 
 .tab_list div:first-child { border-left: unset; } 
 .two_wrap .eq_arti .left_box h3 .num { width: 3.2rem; height: 3.1rem; margin-right: 1.2rem; font-size: 2rem; } 
 .two_wrap .eq_arti .left_box h3 { margin-bottom: 1rem; } 
 .youtube_box { flex: 0 0 100%; margin-bottom: 4rem; } 
 .youtube_box .iframe_box { height: 260px; } 
 .slide_wrap { /* height: 40rem; */overflow: hidden; } 
 .tb_wrap { overflow-x: scroll; } 
 .tb_wrap table { width: 150%; } 
 .tb_wrap table td, .tb_wrap table th { font-size: 1.5rem; padding: 0.8rem 1rem; word-break: break-all; word-break: keep-all; } 
 .flex_3 > * { width: 48%; } 
 .flex_3 > *:nth-child(3n) { margin-right: 2%; } 
 .flex_3.no_flex { display: flex; justify-content: space-between; } 
 .flex_3.no_flex > * { width: 32%; } 
 .flex_3.no_flex > *:nth-child(3n) { margin-right: 0; } 
.flex_4 > * { width: 49%; margin-right: 2%; margin-bottom: 2%; } 
.flex_4 > *:nth-child(2n) { margin-right:0; } 
 .pc_sub_menu .second_dep { height: 60px; width: 96%; } 
 .pc_sub_menu .com_depth li { line-height: 60px; } 
 /* .depth_wrap .depth3 { display: none; } */
 /* INQUIRY */
 .inquiry_style1 h3 { font-size: 17px; } 
 .agree_txt { font-size: 14px } 
 .inquiry_style1 .inquiry_tbl_style1_icon { font-size:14px; padding-left: 4px; } 
 .inquiry_tbl_style1_con .write_input { font-size: 14px; } 
 .write-tbl th { font-size: 15px; } 
 /* ABOUT */
 #about .inner .box2 { width: 94%; top: 70%; padding: 8rem 8rem 8rem; } 
/* HISTORY */
.history_wrap>ul>li h4 { font-size: 21px; padding-bottom: 5px; } 
.history_wrap .month { font-size: 17px; } 
.history_wrap>ul>li> div ul>li { font-size: 16px; } 
.history_wrap::after { font-size: 100px; bottom: 1%; } 
 /* PRODUCT */
 .sub_com > article { margin-bottom: 7rem; } 
 .sub_com > article::after { content:''; display:block; position:absolute; bottom: -5rem; width:100%; height:1px; /* background: #dcdcdc94; */ } 
 .sub_com > article.contain2 .flex_2 .img_box { order: 1; } 
 .sub_com > article.contain2 .flex_2 .info_box { order: 2; } 
 .sub_com .flex_2 > div { flex: 0 0 90%; margin: 0 auto; } 
 .sub_com .flex_2 > div.img_box img { width: 90%; padding: 2rem 0; } 
 .sub_com .flex_2 > div.img_box { margin-bottom: 4rem; order: 1; } 
 .sub_com .container .order > div:nth-child(2) { margin: 0 auto; } 
 .sub_com .container .order > div:nth-child(1) { margin: 0 auto; padding-bottom: 2rem; } 
 .youtube_box iframe { height: 320px; } 
 .sub_com > article:not(.contain2) .info_box h3 { position: relative; padding-left: 1.7rem; } 
 .sub_com > article:not(.contain2) .info_box h3::before { content:''; display:block; position:absolute; left:0; top: 0rem; background: var(--sub-color); width: 0.8rem; height: 0.8rem; } 
.sub_com .pro_tit1 { font-size: 2.4rem; margin-bottom: 4rem; } 
.pro_btn a { margin: 0 auto; } 
 .sub_com .pro_flex_1 .box1 { margin-bottom: 4rem; } 
 .flex_5 > * { width: 29%; } 
 .pro_flex_1 img { height: auto; } 
 .pro_list_wrap ul li { flex: 0 1 48%; height: 30rem; } 
.pro_intro_list > li { flex: 0 1 100%; margin-bottom: 2rem; } 
 .two_wrap .eq_arti { display: flex; flex-direction: column; } 
 .two_wrap .eq_arti .left_box { width: 100%; margin-bottom: 0rem; } 
 .two_wrap .eq_arti .right_box { margin-left: 0; width: 100%; } 
 }

 @media (max-width: 768px){
 .content-layout { grid-template-columns: 1fr; word-break: keep-all; } 
 .spectrum-right { flex-direction: column; } 
 .spectrum-bars { flex-direction: row; height: 200px; } 
 .bar { flex: 1; height: auto; transform: scaleY(0); transform-origin: bottom; } 
 .bar.visible { transform: scaleY(1); } 
 .spectrum-labels { flex-direction: row; flex-wrap: wrap; gap: 8px; } 
 .spec-label { height: auto; width: calc(50% - 4px); } 
 .problem-section { grid-template-columns: 1fr; padding: 2rem 2.4rem 6rem; gap: 3rem; } 
 .problem-section.layout-img-left .problem-img-wrap { order: 1; } 
 .problem-section.layout-img-left .problem-text { order: 2; } 
 .problem-section.layout-text-left .problem-text { order: 2; } 
 .problem-section.layout-text-left .problem-img-wrap { order: 1; } 
 .metamerism-section { grid-template-columns: 1fr; } 
 .metamerism-right { height: 250px; } 
 .metamerism-left { padding: 4rem 2.4rem; } 
 .problems-title-section { padding-top: 9rem; } 
#theory1 .inner { margin-bottom: 6rem; gap: 1rem; } 
 .spectrum-section { padding: 8rem 0 4rem; } 
 .map-box iframe { height: 350px; } 
 .info-area { padding: 30px; } 
 .info-area h2 { font-size: 3.2rem; } 
 .map-links { display: grid; grid-template-columns: 1fr; } 
 .map-links a { justify-content: center; } 
 }

@media (max-width: 680px){
 .sub_tit_box { margin-bottom: 4rem; } 
 .m_none { display: none; } 
 .depth_wrap > div.depth2::after { /* opacity: 0; */ } 
 .eq_arti .left_box { width: 100%; margin-bottom: 4rem; } 
 .eq_arti .right_box { margin-left: 0; } 
 .eq_arti .left_box .img_box img { max-height: 400px; width: auto; } 
 .eq_arti { margin-bottom: 4rem; } 
 .one_box { margin-bottom: 2rem; } 
 .qr_wrap { /* max-width: 10rem; */margin-left: 0; width: 100%; } 
 .qr_wrap .img_box { max-width: 8rem; margin: 0 auto; } 
 .qr_wrap p { width: 100%; } 
 }
@media (max-width: 480px){
 .visual_menu_wrap .depth_wrap > div.bo_pro_menu { display: none; } 
 .depth_wrap > div.depth2::after { } 
 .com_depth { font-size: 13px; top: 30px; } 
 .com_depth li a { font-size: 13px; } 
 .depth_name { font-size: 14px; } 
 .depth_name > span::after { width: 16px; height: 16px; top: 45%; } 
 .ls-tick-k { font-size: 1.7rem; } 
 .ls-card { padding: 3rem; } 
 .ls-hero-grid, .ls-cie-head, .ls-factors-grid { gap: 2rem; } 
 .ls-cie-head { margin-bottom: 2rem; } 
.ls-cie-head-right p { text-align: left; } 
 .ms-delta-title { line-height: 1.3; } 
 .ms-optic-badge.multi { width: 15rem; padding: 2px; } 
 .ms-optic-badge.multi br { display:none; } 
 #theory1 .inner.top_8rem { padding: 6rem 0; } 
 .ms-stat-item { padding: 1rem 2rem; border-radius: 10px; text-align: center; flex: 0 0 30%; } 
 .info-list li { gap: 12px; } 
 .info-list p { font-size: 14px; } 
 .info-area h2 { font-size: 2.6rem; } 
 .problem-section:last-child { padding: 2rem 2rem 0rem; } 
 .metamerism-left { gap: 2rem; } 
 .meta-btn { padding: 1.4rem 2.4rem; } 
 .problem-num { font-size: 3rem; } 
 .spec-label { width: calc(25% - 4px); } 
 .bar.visible { height: 7rem; } 
 .spectrum-bars { height: auto; } 
 .spectrum-inner { display: flex; flex-direction: column; } 
 .hero-desc { margin-bottom: 3rem; } 
 .icon-item { font-size: 1.8rem; gap: 5px; } 
 .hero-icons { gap: 1rem; } 
 .chapter-label,.spectrum-sub, .hero-title,.spectrum-desc { margin-bottom: 2rem; } 
 .hero-title br { display:none; } 
 .hero-section { display: flex; flex-direction: column; } 
 .tab-nav.multi_box { display: flex; flex-wrap: wrap; } 
 .tab-nav.multi_box .tab-btn { flex: 1 0 33%; } 
 .tab-nav.multi_box .tab-btn:nth-child(4),.tab-nav.multi_box .tab-btn:nth-child(5) { border-top: 1px solid var(--border); } 
 .tab-nav.multi_box .tab-btn:nth-child(4),.tab-nav.multi_box .tab-btn:nth-child(2) { border-right: 1px solid var(--border); } 
 .section-card { padding: 4rem 0; } 
 .tab-btn { padding: 1.4rem; font-size: 1.8rem; } 
 .tab-nav { margin-bottom: 4rem; } 
 .pro_list .category-all .cat-item .desc { opacity: 1; max-height: fit-content; } 
 .category-all .cat-item:hover .desc { opacity: unset; max-height: unset; } 
 .category-all .cat-item:hover .text-wrap { /* transform: unset; */ } 
 .category-all .cat-item .overlay { } 
 .category-all .cat-item img { opacity: 0.8; } 
 .category-all .grid { grid-template-columns: repeat(1, 1fr); } 
 .category-all .cat-item .text-wrap { padding: 2rem; transform: unset; } 
 .category-all .cat-item .text-wrap h3 { font-size: 2rem; } 
 .location-section .inner { display: flex; flex-wrap: wrap; } 
 .map-area { height: 280px; } 
 .info-area { width: 100%; } 
 .info-list { gap: 2rem; } 
 .history-card { padding: 2rem 3rem; } 
 .history-list li:before { width: 3px; height: 3px; top: 8px; } 
 .history-list li { padding-left: 11px; margin-bottom: 4px; } 
 .year { font-size: 2.4rem; margin-bottom: 1rem; } 
 .history-section .dot { width: 10px; height: 10px; left: -25px; } 
 .history-left { width: 100%; } 
 .history-right:before { left: 20px; } 
 .history-right { padding-left: 40px; } 
 .history-section { gap: 4rem; display: flex; flex-direction: column; } 
 .visual_menu_wrap .depth_wrap > div.home_btn .home { position: relative; top: 3px; } 
 .ceo-section { padding: 6rem 0; } 
 .ceo-section .img-box { height: 40rem; } 
 .ceo-section h2 { margin-bottom: 2rem; } 
 .sub_com p { font-size: 13px; } 
 .ceo-section .big-text { font-size: 2rem; margin-bottom: 2rem; } 
 .inner_wrap { margin: 8rem auto; } 
 .ceo-section .inner { gap: 3rem; padding: 0 1rem; } 
 .sub_visual_txt { top: 52%; } 
 .visual_menu_wrap { width: 100%; top: 73%; } 
 .sub_visual_txt h1 { font-size: 2.6rem; } 
 .sub_visual_box { height: 34rem; } 
 .pro_intro_list > li h4 { padding-bottom: 1rem; } 
 .pro_intro_list > li .info_box .dot_list li { font-size: 1.7rem; } 
 .eq_arti .left_box .img_box img { max-height: 340px; max-width: 100%; object-fit: cover; width: 100%; } 
 .sub_menu_tit_wrap .inner .tit_list .img_box img { width: 18px; } 
 .visual_menu_wrap .com_depth li.on a { color: var(--main-color); } .visual_menu_wrap .com_depth li.on { border-bottom: unset; } 
 .tab_list div { flex: 1 0 48%; line-height: 1; height: 4rem; } 
 .eq_list li { flex: 0 0 48%; } 
.tab_list { margin: 0rem auto 3rem; } 
 .dot_list.list1 li { font-size: 1.6rem; padding: 0.2rem 1rem 0.2rem 1.4rem; } 
 .two_wrap .eq_arti .right_box p, .two_wrap .eq_arti .right_box li { font-size: 1.6rem; } 
 .two_wrap .right_box .bg_list > li .list4 li { font-size: 1.6rem; } 
 .circle_scroll::after { width: 8.9rem; height: 8.8rem; } 
 .circle_scroll { width: 5.4rem; height: 5.4rem; right: 3rem; bottom: 3rem; } 
 .circle_scroll i { font-size: 1.6rem; } 
#about .info_box p.sign { font-size: 2rem !important; padding-bottom: 0; } 
 /* INQUIRY */
.inquiry_tbl_style1_flex { display: flex; } 
.tbl_style1_item { width: 100%; } 
.inquiry_tbl_style1_con .write_input { width: 100% } 
.cm_btn_controls .btn_submit1 { width: 160px; height: 50px; font-size: 15px; } 
.agree_txt label { padding-left: 8px; } 
.editor textarea { font-size: 13px; } 
.cm_btn_controls .btn_submit1 { width: 140px; height: 40px; font-size: 14px; } 
.write-tbl th, .write-tbl td { padding: 10px 2px 10px 0; min-width: 74px; word-break: keep-all; font-size: 13px; } 
.write-tbl td.flex_div_3 { display: flex; justify-content: space-between; width: 100%; align-items: center; } 
.inquiry_btn { margin-top: 20px; } 
.inquiry_btn input { font-size: 12px; width: 110px; height: 40px; } 
#inquiry .agree_txt { font-size: 13px; } 
 /* PRODUCT */
 .youtube_box iframe { height: 240px; } 
 .sub_com .flex_2 > div { flex: 0 0 94%; } 
 .sub_com .flex_2 > div.img_box img { width: 100%; padding: 0; } 
 .sub_com .info_box .box3 { padding: 2rem; } 
 .list li { font-size: 1.8rem; word-break: keep-all; } 
 .pro_btn a { margin: 3rem auto; max-width: 180px; padding: 1.5rem; } 
 .sub_com .pro_tit1 { font-size: 2.4rem; margin-bottom: 2rem; } 
 .product_info1 > .img_box .swiper-slide { padding: 0; } 
 .pro_bg { padding: 4rem 2rem; } 
 .pro_bg .img_box { margin-bottom: 3rem; } 
 .pro_bg img { width: 70px; } 
 .apply_wrap li { flex: 0 0 49%; margin-left: 0; } 
 .apply_wrap li:nth-child(2n) { margin-right:0; } 
 .pro_flex_1 { width: 100%; } 
 .pro_flex_1 .list li { font-size: 1.8rem; } 
 #about .info_box { margin-top: 4rem; padding: 0 1rem; } 
 #about::before { top: 10rem; height: 86%; } 
 
 /* HISTORY */
.history_wrap::before { left: 2.2%; } 
.history_wrap>ul { margin-left: 0; margin-right: 0; } 
.history_wrap>ul>li.right div { width: 100%; padding-left: 2rem; } 
.history_wrap>ul>li.left div { width: 100%; padding-right: 0; padding-left: 2rem; } 
.history_wrap>ul>li::before { left: -3%; } 
.history_wrap>ul>.right::after { left: 3%; width: 2rem; display: none; } 
.history_wrap>ul>.left { text-align: left; } 
.history_wrap>ul>.left::after { right: unset; left: 3%; width: 2rem; display: none; } 
.history_wrap>ul>li.left div li .month { order: unset; padding-left: unset; } 
.history_wrap>ul>li.left div li { justify-content: flex-start; } 
.history_wrap>ul>.left> div ul>li::after { right: unset; left: -1.8rem; width: 0.7rem; height: 0.7rem; top: 11px; } 
.history_wrap>ul>li ul { padding-left: 1rem; } 
.history_wrap::after { font-size: 60px; } 
#history .tit_wrap { text-align: left; padding: 30px 30px 10px; } 
.history_wrap .month { font-size: 15px; } 
.history_wrap>ul>li> div ul>li { font-size: 14px; } 
.history_wrap>ul>.right> div ul>li::after { top: 11px; width: 0.7rem; height: 0.7rem; } 
 #history .history_logo img { max-width: 100px; } 
 #esg h3 { font-size: 1.8rem !important; } 
 .cyber_wrap h3 .q_left { left: 0; top: 0; display: none; } 
.cyber_wrap h3 .q_right { right: 0; top: 0; display: none; } 
 .cyber_wrap .section { padding-top: 3rem; } 
 .cyber_wrap .section1 ul li { flex: 100%; padding: 2rem; } 
 .cyber_wrap .section1 ul.list_1, .cyber_wrap .section1 ul.list_2 { display: flex; flex-wrap: wrap; flex-direction: row; } 
 .cyber_wrap .section1 ul li img { max-width: 80px; } 
 .cyber_wrap .section1 ul li .img_box { margin-bottom: 1rem; } 
 .cyber_wrap .section1 ul li p { font-size: 1.6rem; } 
 .process_wrap li { flex: 0 0 33%; margin-bottom: 1rem; } 
 .process_wrap li span { font-size: 1.7rem; } 
 #inquiry2 .inquiry_wrap section h4 { min-width: 8rem; font-size: 1.7rem; word-break: keep-all; width: 100%; margin-bottom: 0.5rem; } 
 #inquiry2 .inquiry_wrap section.name_wrap .check_box { margin-left: 1rem; } 
 #inquiry2 .inquiry_wrap section.name_wrap .name_box { display: flex; flex-wrap: wrap; flex-direction: column; } 
 #inquiry2 .inquiry_wrap section.name_wrap { display: flex; align-items: flex-end; margin-bottom: 1rem; } 
 #inquiry2 .inquiry_wrap section { display: flex; } 
 .btn_submit1 { width: 20rem; height: 5rem; } 
 #ci .info_box > div { flex: 0 1 100%; margin-bottom: 4rem; } 
 #ci .info_box h4 { padding-bottom: 1rem; } 
 .dot_list.list1 li::before { width: 4px; height: 4px; } 
 .catal_btn { max-width: 24rem; font-size: 1.6rem; margin: 0 0 2rem; } 
 .youtube_box .iframe_box { height: 200px; } 
#inquiry2 .inquiry_wrap section.name_wrap .check_box span { font-size: 1.6rem; } 
 .pro_list_wrap ul li { height: 24rem; } 
 .pro_intro_list { margin-top: 4rem; } 
 .pro_intro_list .img_box img { max-width: 11rem; } 
 .dot_list li::before { width: 5px; } 
 .dot_list li { padding: 0.2rem 1rem 0.2rem 1.5rem; } 
 .list_btn { width: 24rem; } 
 .list_btn a { padding: 1.8rem; font-size: 1.7rem; } 
 .two_wrap .eq_arti .right_box > div:nth-child(2) { margin-top: 2rem; } 
 .two_wrap .eq_arti .right_box .slide_wrap { height: 280px; } 
 .two_wrap .eq_arti .right_box li span { flex: 1; } 
 #his_new .inner_wrap { display: flex; flex-direction: row; flex-wrap: wrap; } 
 #his_new.fixed .img_box { position: relative; height: 200px; width: 100%; flex: unset; } 
 #his_new.fixed .info_box { width: 100%; margin-left: 0; padding: 4rem 0 0 0; } 
 #his_new .img_box { flex: unset; width: 100%; height: 200px; background-size: cover; } 
 #his_new .info_box .his_li li { font-size: 1.7rem; } 
 #his_new .his_li h4 { font-size: 2.2rem; } 
 #his_new .info_box { padding: 4rem 0 4rem 0; } 
 #his_new .tit_box p { font-size: 1.9rem; } 
 .two_wrap .eq_arti .left_box h3 .num { width: 2.6rem; height: 2.6rem; font-size: 1.8rem; font-weight: 500; margin-right: 1rem; border-radius: 4px; } 
 .two_wrap .eq_arti .left_box h3 b { font-size: 2rem; } 
 .dot_list.list3 li::before { top: 9px; width: 3px; height: 3px; } 
 #ci .info_box .ci_box { height: 18rem; border-radius: 10px; } 
 #ci .info_box .color_wrap .color_info { font-size: 1.6rem; } 
 .eq_arti .left_box { margin-bottom: 3rem; } 
 .frame1 .eq_arti.arti2 .right_box .list3 > li { padding: 2rem 1rem; } 
 .frame1 .eq_arti.arti2 .right_box .new_design .list3 > li b { font-size: 1.7rem; } 
 .frame1 .eq_arti.arti2 .right_box .list3 li b { font-size: 1.8rem; } 
 .frame1.two_wrap .right_box .bg_list li .list4 { padding: 0 1rem; } 
 .top_title h2 { font-size: 2.4rem; } 
 .top_title { margin-bottom: 3rem; margin-top: 1rem; } 
 #about .about_wrap h4 { font-size: 2rem!important; font-weight: 700; } 
 #about .about_wrap h4 br { display:none; } 
 #about .about_section { margin-top: 4rem; display: flex; flex-wrap: wrap; } 
 #about .about_bg .inner { padding: 0 3rem; width: 100%; } 
 #about .about_bg { height: 26rem; } 
 #about .sig img { max-width: 6rem; } 
 #about .about_flex .img_box { flex: 1 0 100%; } 
 #about .about_flex .info_box { margin-left: 0rem; margin-top: 2rem; } 
 #about .letter { font-size: 3rem; } 
 #about h5 { margin-bottom: 1rem; } 
 #about .order .info_box { margin-right: 0rem; } 
 #about .order .info_box { order: 2; } 
 }