/* YJ GLOBAL - Main Stylesheet */
:root {
  --color-primary: #333333;
  --color-secondary: #666666;
  --color-accent: #1a1a1a;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg-light: #f8f8f8;
  --color-bg-dark: #000000;
  --color-border: #e5e5e5;
  --color-text: #333333;
  --color-text-light: #999999;
  --font-primary: 'Montserrat', 'Pretendard', 'Malgun Gothic', dotum, sans-serif;
  --content-width: 1400px;
  --header-height: 100px;
  --transition-speed: 0.3s;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-primary); color: var(--color-text); line-height: 1.6; overflow-x: hidden; background: var(--color-white); }a { text-decoration: none; color: inherit; transition: color var(--transition-speed); }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; outline: none; font-family: inherit; }
.clear::after { content: ''; display: table; clear: both; }
.dn { display: none !important; }
.w_custom { width: var(--content-width); max-width: 100%; margin: 0 auto; padding: 0 20px; }
#wrap { padding-top: 0; overflow: visible; }
#contents_wrap { width: 100%; padding: 0 !important; }
#contents_box { padding: 0; }
.page-content { display: none; }
.page-content.active { display: block; }
.skip_nav { position: absolute; top: -9999px; }
.skip_nav_link:focus { top: 0; position: fixed; z-index: 9999; background: var(--color-black); color: var(--color-white); padding: 10px; }

/* HEADER */
#header { position: fixed; top: 0; left: 0; width: 100%; max-width: 100vw; height: var(--header-height); z-index: 20; background: rgba(0, 0, 0, 0.2); transition: background var(--transition-speed), height var(--transition-speed); box-sizing: border-box; }
#header.on { background: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 5px rgba(0,0,0,0.08); }
#header.on .hd_logo a { background-image: url('../images/skin/hd-logo-ov.png'); }
#header.on .hd_lnb > li > a { color: var(--color-primary); }
#header.on .menu-trigger span { background: var(--color-primary); }
#header.on .lang_selector select { color: var(--color-primary); border-color: var(--color-primary); }
.header_cont { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.hd_logo { flex-shrink: 0; }
.hd_logo a { display: block; width: 200px; height: 50px; background: url('../images/skin/hd-logo.png') no-repeat center; background-size: contain; font-size: 0; text-indent: -9999px; }
.hd_lnb { display: flex; align-items: center; gap: 10px; }
.hd_lnb > li { position: relative; padding: 0 20px; }
.hd_lnb > li > a { display: block; padding: 10px 0; font-size: 16px; font-weight: 600; color: var(--color-white); letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.hd_lnb > li:hover > a { opacity: 0.7; }
/* Dropdown */
.hd_lnb_dep2 { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--color-white); min-width: 200px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border-radius: 0 0 4px 4px; padding: 10px 0; z-index: 30; }
.hd_lnb_dep2 li a { display: block; padding: 8px 25px; font-size: 14px; color: var(--color-secondary); font-weight: 500; transition: all var(--transition-speed); }
.hd_lnb_dep2 li a:hover { color: var(--color-primary); background: var(--color-bg-light); }
.hd_right { display: flex; align-items: center; gap: 20px; }
.lang_selector select { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: var(--color-white); padding: 5px 10px; font-size: 13px; font-family: var(--font-primary); font-weight: 500; border-radius: 3px; cursor: pointer; outline: none; }
.lang_selector select option { color: var(--color-primary); background: var(--color-white); }
.menu-trigger { width: 30px; height: 24px; position: relative; display: flex; flex-direction: column; justify-content: space-between; background: none; border: none; padding: 0; cursor: pointer; z-index: 25; }
.menu-trigger span { display: block; width: 100%; height: 2px; background: var(--color-white); transition: all var(--transition-speed); }
.menu-trigger.active-1 span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.menu-trigger.active-1 span:nth-child(2) { opacity: 0; }
.menu-trigger.active-1 span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ASIDE */
#aside { position: fixed; top: 0; right: -100%; width: 70%; height: 100%; background: #fff; z-index: 999; transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1); overflow-y: auto; }
#aside.on { right: 0; }
.aside_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 995; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.aside_bg.on { opacity: 1; pointer-events: auto; }
.aside_box { padding: 50px 100px 50px 220px; position: relative; }
.aside_box .logo { position: absolute; left: 0; bottom: 320px; transform: translate(-49px, -13px); }
.aside_box .logo a { display: block; transform: rotate(-90deg); }
.aside_box .logo img { width: 203px; height: 35px; }
.aside_top { display: block; text-align: right; padding: 0; border: none; }
.btn_aside_close { width: 21px; height: 20px; cursor: pointer; position: relative; display: inline-block; }
.btn_aside_close::before, .btn_aside_close::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #333; }
.btn_aside_close::before { transform: rotate(45deg); }
.btn_aside_close::after { transform: rotate(-45deg); }
.aside_lnb { padding: 70px 0 0; }
.aside_lnb h3 { font-size: 20px; font-weight: 600; color: #46bfe4; letter-spacing: 0.2px; padding-left: 45px; margin-bottom: 30px; }
.aside_lnb h3::before { content: ''; display: inline-block; width: 30px; height: 2px; background: #46bfe4; vertical-align: middle; margin-right: 15px; margin-left: -45px; }
.slidemenu { list-style: none; padding: 0; margin: 0; }
.slidemenu > li { padding: 14px 0 13px; }
.slidemenu .lnb_dep1 { display: block; text-decoration: none; }
.slidemenu .lnb_dep1 span { font-size: 20px; font-weight: 700; color: #000; letter-spacing: 0.5px; }
.slidemenu .lnb_dep1:hover span { color: #46bfe4; }
.slidemenu .dep2 { list-style: none; padding: 8px 0 0; margin: 0; }
.slidemenu .lnb_dep2 { display: inline-block; margin-right: 18px; }
.slidemenu .lnb_dep2 a { font-size: 14px; color: #999; font-weight: 400; text-decoration: none; }
.slidemenu .lnb_dep2 a:hover { color: #46bfe4; }
/* SUB VISUAL BANNER */
.sub_visual { position: relative; width: 100%; height: 650px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding-bottom: 131px; }
.sub_visual::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.25); }
.sub_visual .w_custom { position: relative; z-index: 1; }
.sub_visual .sub_title p { font-size: 16px; font-weight: 500; color: #fff; letter-spacing: 2px; margin-bottom: 10px; }
.sub_visual .sub_title h2 { font-size: 80px; font-weight: 700; color: #fff; line-height: 1.1; }
/* BOARD WRITE (CONTACT FORM) */
.board_write { padding: 60px 0; }
.board_write table { width: 100%; border-collapse: collapse; border-top: 3px solid #111; }
.board_write table th { font-size: 18px; font-weight: 600; color: #333; padding: 25px 15px 25px 0; vertical-align: middle; width: 150px; text-align: left; }
.board_write table td { padding: 12.5px 0; }
.board_write .input_s { width: 300px; height: 55px; border-radius: 27px; border: 1px solid #ddd; padding: 0 20px; font-size: 15px; outline: none; }
.board_write .input_m { width: 616px; height: 55px; border-radius: 27px; border: 1px solid #ddd; padding: 0 20px; font-size: 15px; outline: none; }
.board_write .input_l { width: 100%; height: 55px; border-radius: 27px; border: 1px solid #ddd; padding: 0 20px; font-size: 15px; outline: none; box-sizing: border-box; }
.board_write .textarea_l { width: 100%; height: 250px; border-radius: 20px; border: 1px solid #ddd; padding: 15px 20px; font-size: 15px; outline: none; resize: vertical; box-sizing: border-box; font-family: inherit; }
.board_write input:focus, .board_write textarea:focus { border-color: #46bfe4; }
.agree_box { margin-top: 30px; padding: 30px; border: 1px solid #eee; border-radius: 10px; }
.agree_label { font-size: 18px; font-weight: 600; color: #333; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.agree_label input[type=checkbox] { width: 20px; height: 20px; }
.agree_content { margin-top: 15px; padding: 20px; background: #f5f5f5; border-radius: 8px; max-height: 120px; overflow-y: auto; }
.agree_content p { font-size: 13px; color: #999; line-height: 1.8; }
.board_btn { text-align: center; margin-top: 50px; }
.btn_ok { display: inline-block; width: 180px; height: 70px; line-height: 70px; background: #000; color: #fff; font-size: 20px; border-radius: 35px; text-align: center; text-decoration: none; transition: background 0.3s; }
.btn_ok:hover { background: #333; }
/* CAPTCHA */
.captcha_wrap { display: flex; align-items: center; gap: 12px; }
.captcha_q { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 55px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 27px; font-size: 20px; font-weight: 700; letter-spacing: 3px; color: #333; user-select: none; }
.captcha_refresh { width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 50%; background: #fff; font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; }
.captcha_refresh:hover { background: #f0f0f0; }
/* MAIN VISUAL */
.main_visual { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; }
.visual_wrapper { position: relative; width: 100%; height: 100%; }
.visual_ul { width: 100%; height: 100%; }
.visual_ul .slick-list, .visual_ul .slick-track { height: 100%; }
.visual_ul li { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; }
.visual_ul li .link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.visual_ul li .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover !important; background-position: center !important; }
.visual_ul li .img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); }
.visual_ul li .img video { width: 100%; height: 100%; object-fit: cover; }
.visual_ul li .txt_box { position: absolute; bottom: 35%; left: 0; right: 0; z-index: 3; color: var(--color-white); }
.visual_ul li .txt_box span { display: block; font-size: 16px; font-weight: 600; margin-bottom: 15px; letter-spacing: -0.2px; }
.visual_ul li .txt_box h3 { font-size: 80px; font-weight: 700; line-height: 90px; letter-spacing: -2px; text-transform: uppercase; }
.control_box { position: absolute; bottom: 32%; right: 0; left: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 20px; }
.control_box button { color: var(--color-white); font-size: 24px; opacity: 0.7; transition: opacity var(--transition-speed); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.control_box button:hover { opacity: 1; }
.progress_wrap { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); width: 60%; max-width: 900px; z-index: 5; }
.slider-progress { width: 100%; height: 2px; background: rgba(255,255,255,0.3); }
.slider-progress .progress { width: 0%; height: 100%; background: var(--color-white); transition: width 0.1s linear; }
.visual_ul .slick-prev, .visual_ul .slick-next { display: none !important; }

/* MAIN ABOUT */
.main_about { padding: 164px 0 85px; position: relative; background: var(--color-white); }
.main_about::before { content: ''; position: absolute; top: 50%; left: -5%; width: 500px; height: 500px; border: 2px solid #d6eef5; border-radius: 50%; transform: translateY(-50%); pointer-events: none; }
.main_title h3 { font-size: 55px; font-weight: 300; color: var(--color-primary); line-height: 60px; }
.main_title h3 strong { font-weight: 700; display: block; }
.about_box { margin-top: 86px; }
.about_box ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin-left: auto; }
.about_box ul li { position: relative; width: 420px; display: flex; align-items: center; padding: 0 70px 0 0; background: transparent; border-radius: 0; transition: opacity var(--transition-speed); box-sizing: border-box; margin-bottom: 30px; }
.about_box ul li:hover { opacity: 0.8; }
.about_box ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.about_box .icon { width: 77px; height: 73px; flex-shrink: 0; margin-right: 35px; }
.about_box .icon img { width: 100%; height: 100%; object-fit: contain; }
.about_box dl dt { font-size: 26px; font-weight: 600; color: var(--color-primary); margin-bottom: 8px; }
.about_box dl dd { font-size: 16px; color: #666; line-height: 28px; }

/* MAIN PRODUCT */
.main_product { position: relative; background: transparent; overflow: visible; }
.main_product > div { position: relative; overflow: visible; background: url('../images/skin/prd_bg.jpg') no-repeat center center; background-size: cover; padding: 40px 0 60px; }
.prd_sc { padding: 0; }
.prd_sc .w_custom { display: flex; justify-content: space-between; align-items: flex-start; }
.prd_sc .main_title { width: 380px; flex-shrink: 0; margin-bottom: 0; padding-top: 120px; }
.prd_sc .main_title h3 { font-size: 55px; margin-bottom: 15px; color: #fff; }
.prd_sc .main_title h3 strong { color: #fff; }
.prd_sc .main_title p { font-size: 16px; color: #fff; max-width: none; line-height: 1.7; }
.prd_container { flex: 1; min-width: 0; max-width: 860px; }
.prd_cont { position: relative; padding-top: 40px; }
.prd_cont ul { display: block; position: relative; width: 100%; font-size: 0; }
.prd_cont ul li { display: inline-block; box-sizing: border-box; vertical-align: top; width: calc(50% - 50px); position: relative; margin-bottom: 20px; }
.prd_cont ul li:nth-of-type(2n) { margin-left: 100px; transform: translateY(15%); }
.prd_cont ul:after { content: ''; display: block; clear: both; }
.prd_cont ul li a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; }
.prd_cont .img_box { width: 100%; box-sizing: border-box; border-radius: 20px; overflow: hidden; position: relative; height: 0; padding-bottom: 126.3%; }
.prd_cont .img_box img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s ease; }
.prd_cont ul li:hover .img_box img { transform: scale(1.05); }
.prd_cont .info { position: relative; width: 100%; padding: 20px 0 0; background: none; z-index: 1; }
.prd_cont .info dt { font-size: 26px; font-weight: 700; color: var(--color-white); }
.prd_cont .info dd { font-size: 14px; color: rgba(255,255,255,0.8); margin-top: 5px; }

/* MAIN NEWS */
.main_news { padding: 60px 0 170px; margin-top: 0; background: var(--color-white); position: relative; z-index: 2; }
.main_news .main_title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.main_news .main_title .more { font-size: 14px; color: var(--color-secondary); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--color-secondary); padding-bottom: 2px; }
.news_container { overflow: hidden; }
.news_container .swiper-slide { background: transparent; border-radius: 0; overflow: hidden; transition: opacity var(--transition-speed); }
.news_container .swiper-slide:hover { opacity: 0.85; }
.news_container .swiper-slide a { display: block; }
.news_container .thumb { width: 100%; height: 280px; overflow: hidden; border-radius: 20px; }
.news_container .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news_container .swiper-slide:hover .thumb img { transform: scale(1.05); }
.news_container .txt { padding: 0; margin-top: 37px; }
.news_container .txt strong { display: block; font-size: 20px; font-weight: 700; color: var(--color-primary); line-height: 1.5; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news_container .txt .date { font-size: 14px; color: #888; }
.main_news .swiper-pagination { margin-top: 30px; position: relative; }
.main_news .swiper-pagination-progressbar { background: var(--color-border) !important; height: 2px !important; }
.main_news .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--color-primary) !important; }

/* MAIN CONTACT */
.main_contact { padding: 0; background: var(--color-white); display: flex; flex-wrap: wrap; }
.main_contact .bnr_box { display: flex; align-items: center; width: 50%; height: 780px; background: url('../images/skin/contact-bg.jpg') no-repeat center center; background-size: cover; position: relative; }
.main_contact .bnr_box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.main_contact .bnr_box .cont { position: relative; z-index: 2; padding: 0 50px; width: 100%; box-sizing: border-box; }
.main_contact .loc_box { width: 50%; height: 780px; overflow: hidden; background: #f5f5f5; }
.main_contact .loc_box .map_link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; transition: background 0.3s; }
.main_contact .loc_box .map_link:hover { background: #eee; }
.main_contact .loc_box .map_placeholder { text-align: center; color: #333; }
.main_contact .loc_box .map_placeholder .map_icon { font-size: 60px; margin-bottom: 20px; }
.main_contact .loc_box .map_placeholder p { font-size: 18px; line-height: 1.8; color: #555; margin-bottom: 25px; }
.main_contact .loc_box .map_placeholder .map_btn { display: inline-block; padding: 14px 35px; background: #333; color: #fff; font-size: 15px; border-radius: 6px; transition: background 0.3s; }
.main_contact .loc_box .map_link:hover .map_btn { background: #555; }
.main_contact .main_title { text-align: left; margin-bottom: 0; }
.main_contact .main_title h3 { margin-bottom: 15px; }
.main_contact .main_title h3 strong { color: #fff; }
.main_contact .main_title p { font-size: 16px; color: #fff; margin-bottom: 30px; }
.btn_inquiry { display: inline-block; padding: 12px 30px; background: transparent; color: var(--color-white); font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: lowercase; border-radius: 6px; border: 1px solid rgba(255,255,255,0.6); transition: all var(--transition-speed); }
.btn_inquiry:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.cs_info { max-width: none; margin: 0; text-align: left; margin-top: 40px; }
.cs_info dl { display: flex; align-items: center; margin-bottom: 12px; }
.cs_info dl dt { width: 22px; height: 22px; flex-shrink: 0; margin-right: 12px; }
.cs_info dl dt img { width: 100%; height: 100%; object-fit: contain; }
.cs_info dl dd { font-size: 16px; color: #fff; font-weight: 300; }
.cs_info dl dd a { color: #fff; }
.main_contact .cont .copy { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 30px; }

/* FOOTER */
#footer { background: var(--color-bg-dark); padding: 33px 0 40px; color: var(--color-secondary); }
.ft_gnb { display: flex; gap: 25px; padding-bottom: 20px; border-bottom: 1px solid #333; margin-bottom: 20px; }
.ft_gnb li a { font-size: 14px; color: #999; transition: color var(--transition-speed); }
.ft_gnb li a:hover { color: var(--color-white); }
.ft_gnb li a strong { font-weight: 700; }
.info_box .info { margin-bottom: 15px; }
.info_box .info span { display: inline-block; font-size: 13px; color: #777; margin-right: 15px; line-height: 2; }
.info_box .info span:first-child { display: block; font-size: 16px; font-weight: 700; color: var(--color-white); margin-bottom: 5px; }
.info_box .info a { color: #777; }
.info_box .info a:hover { color: var(--color-white); }
.info_box .copy { font-size: 12px; color: #555; margin-top: 15px; }

/* SUB PAGES */
.sub_page { padding-top: 0; }
.sub_visual { position: relative; width: 100%; height: 350px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.sub_visual::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }
.sub_visual .sub_title { position: relative; z-index: 2; text-align: center; color: var(--color-white); }
.sub_visual .sub_title h2 { font-size: 80px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.sub_visual .sub_title p { font-size: 16px; margin-top: 10px; opacity: 0.8; }
.sub_content { padding: 100px 0 0; }
.sub_content h3 { font-size: 32px; font-weight: 700; color: var(--color-primary); margin-bottom: 30px; }
.sub_content p { font-size: 15px; color: var(--color-secondary); line-height: 1.8; margin-bottom: 20px; }
.about_section { padding: 60px 0; }
.about_section .company_info { display: flex; gap: 50px; align-items: center; margin-bottom: 60px; }
.about_section .company_info .text_area { flex: 1; }
.about_section .company_info .img_area { flex: 1; border-radius: 10px; overflow: hidden; }
.history_timeline { position: relative; padding: 40px 0; }
.history_timeline::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--color-border); transform: translateX(-50%); }
.history_item { position: relative; display: flex; margin-bottom: 40px; }
.history_item .year { width: 50%; text-align: right; padding-right: 40px; font-size: 28px; font-weight: 700; color: var(--color-primary); }
.history_item .content { width: 50%; padding-left: 40px; }
.history_item .content ul li { font-size: 15px; color: var(--color-secondary); line-height: 2; list-style: disc; margin-left: 15px; }
.customer_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 40px 0; }
.customer_grid .customer_item { display: flex; align-items: center; justify-content: center; padding: 30px; background: var(--color-bg-light); border-radius: 10px; min-height: 100px; transition: all var(--transition-speed); }
.customer_grid .customer_item:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.customer_grid .customer_item span { font-size: 16px; font-weight: 600; color: var(--color-primary); text-align: center; }
.sustainability_section { padding: 60px 0; }
.cert_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.cert_item { text-align: center; padding: 40px 30px; background: var(--color-bg-light); border-radius: 10px; }
.cert_item .cert_icon { width: 80px; height: 80px; margin: 0 auto 20px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.cert_item h4 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.cert_item p { font-size: 14px; color: var(--color-secondary); }
.contact_form { max-width: 700px; margin: 0 auto; }
.form_group { margin-bottom: 20px; }
.form_group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--color-primary); }
.form_group input, .form_group textarea, .form_group select { width: 100%; padding: 12px 15px; border: 1px solid var(--color-border); border-radius: 5px; font-size: 14px; font-family: var(--font-primary); transition: border-color var(--transition-speed); }
.form_group input:focus, .form_group textarea:focus { border-color: var(--color-primary); outline: none; }
.form_group textarea { height: 150px; resize: vertical; }
.btn_submit { display: inline-block; padding: 14px 50px; background: var(--color-primary); color: var(--color-white); font-size: 15px; font-weight: 600; border: none; border-radius: 50px; cursor: pointer; transition: all var(--transition-speed); }
.btn_submit:hover { background: var(--color-black); }
.news_list_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.news_card { background: var(--color-white); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all var(--transition-speed); }
.news_card:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.1); transform: translateY(-3px); }
.news_card .thumb { height: 200px; overflow: hidden; }
.news_card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news_card .info { padding: 25px; }
.news_card .info h4 { font-size: 16px; font-weight: 600; margin-bottom: 10px; line-height: 1.5; }
.news_card .info .date { font-size: 13px; color: var(--color-text-light); }
/* RESPONSIVE */
@media screen and (max-width: 1400px) { .w_custom { width: 100%; padding: 0 40px; } }
@media screen and (max-width: 1200px) { .customer_grid { grid-template-columns: repeat(3, 1fr); } .news_list_grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 1024px) {
  :root { --header-height: 70px; }
  .hd_lnb { display: none; }
  .visual_ul li .txt_box h3 { font-size: 36px; }
  .main_about { padding: 80px 0 60px; }
  .main_title h3 { font-size: 28px; }
  .about_box ul li { width: 100%; }
  .prd_cont ul { display: flex !important; flex-direction: column !important; width: 100% !important; position: relative !important; top: auto !important; }
  .prd_cont .img_box { height: 300px; }
  .main_product { height: auto !important; overflow: hidden !important; }
  .main_product > div { position: relative !important; top: auto !important; height: auto !important; padding: 60px 0; }
  .prd_sc .w_custom { flex-direction: column; }
  .prd_sc .main_title { width: 100%; margin-bottom: 40px; padding-top: 40px; }
  .prd_container { width: 100% !important; max-width: 100% !important; }
  .prd_cont { padding-top: 0; }
  .prd_sc { padding: 0 20px 60px; }
  .prd_cont ul li { display: block !important; width: 100% !important; margin-bottom: 30px !important; margin-left: 0 !important; transform: none !important; }
  .prd_cont ul li:nth-of-type(2n) { margin-left: 0 !important; transform: none !important; }
  .prd_cont .img_box { height: 300px; padding-bottom: 0 !important; border-radius: 12px; }
  .about_section .company_info { flex-direction: column; }
  .history_timeline::before { left: 30px; }
  .history_item { flex-direction: column; }
  .history_item .year { width: 100%; text-align: left; padding: 0 0 10px 60px; }
  .history_item .content { width: 100%; padding-left: 60px; }
  .cert_grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
  .w_custom { padding: 0 20px; }
  .visual_ul li .txt_box h3 { font-size: 28px; }
  .visual_ul li .txt_box span { font-size: 14px; }
  .visual_ul li .txt_box h3 br { display: none; }
  .main_about { padding: 60px 0 40px; }
  .main_about::before { display: none; }
  .about_box ul { flex-direction: column; }
  .about_box ul li { width: 100% !important; padding: 0 !important; margin-bottom: 20px; }
  .about_box dl dd br { display: none; }
  .prd_sc { padding: 40px 20px; }
  .prd_sc .w_custom { flex-direction: column !important; }
  .prd_sc .main_title { width: 100% !important; padding-top: 0 !important; margin-bottom: 20px; }
  .prd_sc .main_title h3 { font-size: 32px !important; }
  .prd_container { width: 100% !important; }
  .prd_cont ul { width: 100% !important; }
  .prd_cont ul li { width: calc(50% - 10px) !important; }
  .prd_cont ul li:nth-of-type(2n) { margin-left: 20px !important; transform: translateY(10%) !important; }
  .prd_cont .img_box { height: auto !important; padding-bottom: 80% !important; }
  .prd_cont .img_box img { position: absolute; }
  .prd_cont .info dt { font-size: 18px !important; }
  .prd_cont .info dd { font-size: 12px !important; }
  .main_product > div { max-height: none !important; }
  .main_news { padding: 60px 0; }
  .news_container .thumb { height: 220px; }
  .main_contact { flex-direction: column; }
  .main_contact .bnr_box { width: 100%; height: auto; min-height: 500px; padding: 50px 0; }
  .main_contact .bnr_box .cont { display: flex; flex-direction: column; justify-content: center; padding: 0 30px; }
  .main_contact .loc_box { width: 100%; height: 400px; }
  .main_contact .main_title h3 strong { font-size: 36px; }
  .sub_visual { height: 250px; }
  .sub_visual .sub_title h2 { font-size: 28px; }
  .customer_grid { grid-template-columns: repeat(2, 1fr); }
  .news_list_grid { grid-template-columns: 1fr; }
  #aside { width: 100%; right: -100%; }
  /* Form */
  .board_write .input_s,
  .board_write .input_m,
  .board_write .input_l { width: 100% !important; max-width: 100% !important; }
  .board_write .textarea_l { width: 100% !important; }
  /* Fabric */
  .sub_fabric_cont { padding: 40px 0 !important; }
  .sub_fabric_cont .txt_box { width: 100% !important; }
  .fabric_lineup { padding: 60px 0 !important; }
  /* ---- Organization chart (Business Map) FULL mobile override ---- */
  /* Hide ALL decorative pseudo-elements */
  .sub_organiztion .chart::before { font-size: 60px !important; top: -10px !important; }
  .sub_organiztion .chart::after { display: none !important; }
  .sub_organiztion .chart { padding-bottom: 60px !important; }
  .sub_organiztion .chart .logo { width: 160px !important; height: 160px !important; border-width: 10px !important; }
  .sub_organiztion .chart .logo::before { height: 25px !important; }
  .sub_organiztion .chart .logo span { padding: 15px !important; }
  /* Stack orga_list vertically */
  .sub_organiztion .orga_list { display: flex !important; flex-direction: column !important; margin-top: 40px !important; }
  .sub_organiztion .orga_list::before,
  .sub_organiztion .orga_list > li::before,
  .sub_organiztion .orga_list > li::after { display: none !important; }
  .sub_organiztion .orga_list > li {
    width: 100% !important; margin-right: 0 !important; margin-bottom: 25px !important;
  }
  .sub_organiztion .orga_list > li + li::before,
  .sub_organiztion .orga_list > li + li::after { display: none !important; }
  .sub_organiztion .orga_list > li ol::before { display: none !important; }
  .sub_organiztion .orga_list > li.point ol::before { display: none !important; }
  .sub_organiztion .orga_list > li ol li { height: 60px !important; font-size: 18px !important; }
  .sub_organiztion .orga_list > li ol li + li { font-size: 16px !important; }
  .sub_organiztion .orga_list > li ol li + li::before { display: none !important; }
  .sub_organiztion .orga_list > li ol li span { font-size: 14px !important; }
  /* ---- Value section mobile override ---- */
  .sub_organiztion .value { padding: 80px 0 !important; }
  .sub_organiztion .value .title { width: 240px !important; height: 240px !important; }
  .sub_organiztion .value .title::before { width: 130% !important; height: 130% !important; }
  .sub_organiztion .value .title::after { width: 170% !important; height: 170% !important; }
  .sub_organiztion .value .title dl dt { font-size: 14px !important; padding: 6px 12px !important; }
  .sub_organiztion .value .title dl dt + dd { margin-top: 14px !important; }
  .sub_organiztion .value .title dl dd { font-size: 26px !important; }
  .sub_organiztion .value .title .logo { width: calc(100% - 60px) !important; }
  /* Stack val_list vertically */
  .sub_organiztion .val_list { flex-direction: column !important; align-items: center !important; margin-top: 30px !important; }
  .sub_organiztion .val_list li { width: 180px !important; height: 180px !important; margin-bottom: 20px !important; }
  .sub_organiztion .val_list li + li { margin-left: 0 !important; }
  .sub_organiztion .val_list li:nth-child(2) { margin-top: 0 !important; }
  /* Hide all connecting lines and dots */
  .sub_organiztion .val_list li::before,
  .sub_organiztion .val_list li::after { display: none !important; }
  .sub_organiztion .val_list li:nth-child(1)::after,
  .sub_organiztion .val_list li:nth-child(2)::after,
  .sub_organiztion .val_list li:nth-child(3)::after { display: none !important; }
  .sub_organiztion .val_list li dl dd { font-size: 18px !important; }
  .sub_organiztion .val_list li dl dt { height: 50px !important; }
  .sub_organiztion .val_list li dl dt img { max-width: 50px !important; }
  /* Dynamic Bizmap mobile overrides */
  #bizmap-org-dynamic { margin-top: 20px !important; }
  #bizmap-svg-lines { display: none !important; }
  #bizmap-org-dynamic > div:last-child { flex-direction: column !important; padding-top: 0 !important; gap: 15px !important; }
  #bizmap-value-dynamic .bizmap-value-orbit { display: none !important; }
}
@media screen and (max-width: 500px) {
  .visual_ul li .txt_box h3 { font-size: 22px; }
  .visual_ul li .txt_box { bottom: 25%; }
  .control_box { display: none; }
  .progress_wrap { width: 80%; }
  .main_title h3 { font-size: 24px; }
  .prd_cont .img_box { height: auto !important; padding-bottom: 100% !important; }
  .prd_cont ul li { width: 100% !important; }
  .prd_cont ul li:nth-of-type(2n) { margin-left: 0 !important; transform: none !important; }
  .prd_cont .info dt { font-size: 20px; }
  .customer_grid { grid-template-columns: 1fr; gap: 15px; }
  .main_contact .bnr_box { height: auto; min-height: 380px; padding: 40px 0; }
  .main_contact .loc_box { height: 300px; }
  .board_write .input_l { height: 48px !important; }
  .board_write .textarea_l { height: 200px !important; }
  /* Business Map - extra small */
  .sub_organiztion .chart::before { font-size: 40px !important; }
  .sub_organiztion .chart .logo { width: 120px !important; height: 120px !important; border-width: 8px !important; }
  .sub_organiztion .value .title { width: 200px !important; height: 200px !important; }
  .sub_organiztion .value .title dl dd { font-size: 22px !important; }
  .sub_organiztion .val_list li { width: 150px !important; height: 150px !important; }
  .sub_organiztion .val_list li dl dd { font-size: 16px !important; }
  .sub_organiztion .val_list li dl dt { height: 40px !important; }
  .sub_organiztion .val_list li dl dt img { max-width: 40px !important; }
}

/* ============================================
   SUB PAGE - Base Styles
   ============================================ */
.sub_visual {
  position: relative;
  width: 100%;
  height: 650px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: flex-end;
  padding-bottom: 131px;
  box-sizing: border-box;
  z-index: 2;
}
.sub_visual h2 {
  font-size: 80px;
  font-weight: bold;
  color: #fff;
  letter-spacing: -0.03em;
}
.sub_visual p {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.sub_visual p + h2 { margin-top: 10px; }
.sub_visual .w_custom { text-align: left; position: relative; z-index: 2; color: #fff; }
/* Sub About */
.sub_about .sub_title.cen { text-align: center; }
.sub_about .sub_title.under_line { padding-bottom: 40px; border-bottom: 1px solid #e5e5e5; margin-bottom: 40px; }
.sub_about .logo { margin-bottom: 30px; }
.sub_about .logo img { display: inline !important; }
.sub_about h2 { font-size: 60px; font-weight: 700; letter-spacing: -1.2px; color: #333; }
.sub_about h5 { font-size: 20px; font-weight: 400; color: #666; margin-top: 15px; }
.sub_about h6 { font-size: 16px; font-weight: 400; color: #666; line-height: 1.8; }
.sub_about .thumb { margin-top: 60px; }
.sub_about .thumb img { width: 100%; }

/* ============================================
   SUB PAGE - Business Map (Organization)
   ============================================ */
.sub_organiztion .chart {
  position: relative;
  padding-top: 40px;
  padding-bottom: 145px;
}
.sub_organiztion .chart::before {
  position: absolute;
  content: "ORGANIZATION";
  font-size: 150px;
  font-weight: 900;
  color: #f9f9f9;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  line-height: 1;
  z-index: -2;
  letter-spacing: -0.025em;
}.sub_organiztion .chart::after {
  position: absolute; content: ""; width: 1519px; height: 713px;
  background: url("../images/sub/sub_organiztion_bg.png") center center / 100% no-repeat;
  top: -71px; left: 53.3%; transform: translateX(-50%); z-index: -1;
}
.sub_organiztion .chart .logo {
  position: relative; width: 250px; height: 250px; font-size: 0; border-radius: 100%;
  border: 14px solid rgba(255,255,255,0);
  background-image: linear-gradient(#fff, #fff), linear-gradient(-25deg, rgb(108,189,181), rgb(70,191,228));
  background-origin: border-box; background-clip: content-box, border-box;
  box-shadow: 0 15px 30px rgba(9,21,114,0.05); box-sizing: border-box; margin: 0 auto;
}
.sub_organiztion .chart .logo::before {
  position: absolute; content: ""; width: 1px; height: 40px; background: #ddd;
  top: calc(100% + 14px); left: 50%; margin-left: -0.5px;
}
.sub_organiztion .chart .logo span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; box-sizing: border-box; padding: 20px;
}
.sub_organiztion .orga_list { display: flex; margin-top: 120px; }
.sub_organiztion .orga_list > li {
  position: relative; width: calc(33.3333% - 26.67px); margin-right: 40px;
}
.sub_organiztion .orga_list > li:last-child { margin-right: 0; }
.sub_organiztion .orga_list > li + li::before {
  position: absolute; content: ""; width: calc(100% + 41px); height: 1px;
  right: 50%; bottom: calc(100% + 40px); background: #ddd;
}
.sub_organiztion .orga_list > li + li::after {
  position: absolute; content: ""; width: 1px; height: 40px;
  right: calc(100% + 20px); bottom: calc(100% + 40px); background: #ddd;
}.sub_organiztion .orga_list > li ol { position: relative; }
.sub_organiztion .orga_list > li ol::before {
  position: absolute; content: ""; width: 1px; height: calc(100% + 40px);
  left: 50%; margin-left: -0.5px; bottom: 0; background: #ddd;
}
.sub_organiztion .orga_list > li.point ol::before { height: calc(100% + 80px); }
.sub_organiztion .orga_list > li ol li {
  position: relative; display: flex; align-items: center; place-content: center;
  width: 100%; height: 80px; font-size: 22px; font-weight: 500; color: #fff;
  text-align: center; box-sizing: border-box; padding: 0 15px;
  background: rgb(109,207,197); border-radius: 40px; letter-spacing: -0.05em;
  flex-wrap: wrap; line-height: 1.2;
}
.sub_organiztion .orga_list > li ol li + li {
  margin-top: 20px; background: #fff; color: #333;
  border: 1px solid rgb(109,207,197); font-size: 20px; line-height: 1.5;
}
.sub_organiztion .orga_list > li ol li + li::before {
  position: absolute; content: ""; width: 5px; height: 5px; border-radius: 100%;
  top: -13px; left: 50%; margin-left: -2.5px; background: rgb(109,207,197);
}
.sub_organiztion .orga_list > li.point ol li { background: rgb(70,191,228); }
.sub_organiztion .orga_list > li.point ol li + li { border-color: rgb(70,191,228); background: #fff; }
.sub_organiztion .orga_list > li.point ol li + li::before { background: rgb(70,191,228); }
.sub_organiztion .orga_list > li ol li span { display: block; font-size: 18px; width: 100%; font-weight: 400; }
/* Value Section */
.sub_organiztion .value {
  background: rgb(247,251,252); padding: 200px 0; overflow: hidden;
}
.sub_organiztion .value .title {
  position: relative; width: 400px; height: 400px; border-radius: 100%;
  box-shadow: 0 15px 30px rgba(9,21,114,0.05);
  background: linear-gradient(45deg, rgb(109,207,197) 0%, rgb(70,191,228) 100%);
  margin: 0 auto;
}
.sub_organiztion .value .title::before {
  position: absolute; content: ""; width: 150%; height: 150%;
  border: 1px dashed #000; box-sizing: border-box;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 100%; opacity: 0.7;
}
.sub_organiztion .value .title::after {
  position: absolute; content: ""; width: 225%; height: 225%;
  border: 1px dashed #000; box-sizing: border-box;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 100%; opacity: 0.1;
}
.sub_organiztion .value .title .logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 0; display: block; width: calc(100% - 100px); text-align: center;
}
.sub_organiztion .value .title dl {
  position: absolute; top: 31%; left: 50%; transform: translateX(-50%);
  width: calc(100% - 30px); text-align: center;
}.sub_organiztion .value .title dl dt {
  font-size: 18px; font-weight: 400; color: #fff;
  border: 1px solid #fff; border-radius: 20px;
  box-sizing: border-box; padding: 8px 18px; display: inline-block;
}
.sub_organiztion .value .title dl dt + dd { margin-top: 22px; }
.sub_organiztion .value .title dl dd {
  font-size: 40px; font-weight: 700; color: #fff; letter-spacing: -0.02em;
}
/* Val List Circles */
.sub_organiztion .val_list {
  display: flex; justify-content: center; margin-top: 10px; position: relative; z-index: 2;
}
.sub_organiztion .val_list li {
  position: relative; border: 1px solid rgb(109,207,197);
  box-sizing: border-box; width: 250px; height: 250px;
  border-radius: 100%; background: #fff;
}
.sub_organiztion .val_list li + li { margin-left: 160px; }
.sub_organiztion .val_list li:nth-child(2) { margin-top: 80px; border-color: rgb(89,199,213); }
.sub_organiztion .val_list li:nth-child(3) { border-color: rgb(70,191,228); }
.sub_organiztion .val_list li::before {
  position: absolute; content: ""; width: 10px; height: 10px;
  background: rgb(109,207,197); border-radius: 100%;
}
.sub_organiztion .val_list li:nth-child(1)::before { top: 14.3%; right: 10.3%; }
.sub_organiztion .val_list li:nth-child(2)::before { top: -6px; left: 50%; margin-left: -5px; background: rgb(89,199,213); }
.sub_organiztion .val_list li:nth-child(3)::before { background: rgb(70,191,228); top: 14.3%; left: 10.3%; }.sub_organiztion .val_list li::after {
  position: absolute; content: ""; width: 1px; background: rgb(89,199,213);
}
.sub_organiztion .val_list li:nth-child(1)::after {
  right: -21%; height: 210px; bottom: 66%; transform: rotate(54deg);
}
.sub_organiztion .val_list li:nth-child(2)::after {
  height: 100px; background: rgb(89,199,213); left: 50%; margin-left: -0.5px; bottom: 100%;
}
.sub_organiztion .val_list li:nth-child(3)::after {
  left: -21%; height: 210px; bottom: 66%; transform: rotate(-54deg); background: rgb(70,191,228);
}
.sub_organiztion .val_list li dl {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 30px); text-align: center;
}
.sub_organiztion .val_list li dl dt {
  font-size: 0; height: 63px; display: flex; justify-content: center; align-items: center;
}
.sub_organiztion .val_list li dl dt + dd { margin-top: 20px; }
.sub_organiztion .val_list li dl dd {
  font-size: 22px; font-weight: 400; color: #333; line-height: 1.36;
}
.sub_organiztion .val_list li dl dd strong {
  font-size: inherit; font-weight: 600; color: inherit;
}

/* Active menu state */
#header.on .hd_lnb > li.on > a { color: rgb(70, 191, 228); }
#header.on .hd_lnb > li.on > a::before {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%;
  height: 3px; background: rgb(70, 191, 228);
}
/* ============================================
   FIX 1: Header hover ??white (like original)
   ============================================ */
#header:hover {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 5px rgba(0,0,0,0.08);
}
#header:hover .hd_logo a {
  background-image: url('../images/skin/hd-logo-ov.png');
}
#header:hover .hd_lnb > li > a {
  color: var(--color-primary);
}
#header:hover .hd_lnb > li.on > a {
  color: rgb(70, 191, 228);
}
#header:hover .menu-trigger span {
  background: var(--color-primary);
}
#header:hover .lang_selector select {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ============================================
   FIX 2: Sub visual darker overlay (like original)
   ============================================ */
.sub_visual::after { background: rgba(0, 0, 0, 0) !important; }

/* ============================================
   FIX 3: About Page - Complete match to original
   ============================================ */

/* sub_about wrapper */
.sub_about {
  padding-top: 100px !important;
  padding-bottom: 175px !important;
  position: relative;
  overflow: hidden;
}

/* Left decoration (watermark icon) */
.sub_about::before {
  content: '' !important;
  position: absolute !important;
  width: 794px;
  height: 1022px;
  background: url('../images/sub/sub_about_bg_icon01.png') no-repeat;
  top: -687px;
  left: -550px;
  z-index: -1;
  pointer-events: none;
}

/* Right decoration (watermark icon) */
.sub_about::after {
  content: '';
  position: absolute;
  width: 794px;
  height: 1022px;
  background: url('../images/sub/sub_about_bg_icon02.png') no-repeat;
  top: 1225px;
  right: -171px;
  z-index: -1;
  pointer-events: none;
}

/* Logo size - match original 221x186 */
.sub_about .logo { margin-bottom: 46px; }
.sub_about .logo img {
  display: inline !important;
  width: 221px;
  height: auto;
}

/* h2 strong - teal color like original */
.sub_about h2 {
  font-size: 60px !important;
  font-weight: 700 !important;
  color: rgb(17, 17, 17) !important;
  letter-spacing: -1.2px;
}
.sub_about h2 strong {
  color: rgb(70, 191, 228) !important;
  font-weight: 700;
}

/* h5 - match original 24px */
.sub_about h5 {
  font-size: 24px !important;
  font-weight: 400 !important;
  color: rgb(51, 51, 51) !important;
  margin-top: 24px;
  line-height: 36px;
}

/* Vertical separator line - match original (100px, black, centered) */
.sub_about .sub_title.under_line {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
}
.sub_about .sub_title.under_line::after {
  content: '';
  display: block;
  width: 1px;
  height: 100px;
  background: rgb(0, 0, 0);
  margin: 50px auto;
}

/* h6 - match original 20px */
.sub_about h6 {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: rgb(102, 102, 102) !important;
  line-height: 34px !important;
}

/* Thumb spacing */
.sub_about .thumb {
  margin-top: 95px !important;
}

/* ============================================
   FIX 5: Header logo - match original exactly
   No !important on base - use specificity instead
   ============================================ */
#header .hd_logo a {
  width: 210px;
  height: 36px;
  background: url('../images/skin/hd-logo.png') no-repeat center;
  background-size: auto 100%;
}
#header.on .hd_logo a,
#header:hover .hd_logo a {
  background: url('../images/skin/hd-logo-ov.png') no-repeat center;
  background-size: auto 100%;
}


/* ============================================
   FIX 6: Business Map - sub_content padding & val_list icons
   ============================================ */
.sub_organiztion .chart {
  padding-top: 40px;
}
.sub_organiztion .val_list li dl dt img {
  max-width: 67px;
  height: auto;
}
.sub_organiztion .val_list li dl dd strong {
  font-weight: 600;
}


/* ============================================
   FIX 7: Point column connecting lines & dashed circle fixes
   ============================================ */
.sub_organiztion .orga_list > li.point::before {
  bottom: calc(100% + 80px);
  width: calc(150% + 61px);
}
.sub_organiztion .orga_list > li.point::after {
  display: none;
}


/* ============================================
   History Page Styles (matches original)
   ============================================ */
.sub_history {
  position: relative;
  padding-top: 75px;
  display: flex;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.sub_history::before {
  position: absolute;
  content: "";
  width: 101.9vw;
  height: 6.9vw;
  background: url("../images/sub/sub_history_bg.png") center center / 100% no-repeat;
  left: 50%;
  bottom: -9vw;
  transform: translateX(-50%);
}
.sub_history .thumb {
  position: relative;
  font-size: 0;
  width: 500px;
  flex-shrink: 0;
}
.sub_history .thumb::before {
  position: absolute;
  content: "";
  width: 211px;
  height: 99px;
  background: url("../images/sub/sub_history_logo01.png") center center no-repeat;
  top: -75px;
  left: -40px;
  z-index: -1;
}
.sub_history .thumb::after {
  position: absolute;
  content: "";
  width: 117px;
  height: 223px;
  background: url("../images/sub/sub_history_logo02.png") center center no-repeat;
  top: -75px;
  left: 107px;
}
.sub_history .thumb span {
  display: inline-block;
  border-radius: 20px;
  overflow: hidden;
}
.sub_history .thumb span img {
  width: 500px;
  height: 700px;
  object-fit: cover;
}
.sub_history .his_wrap {
  width: calc(100% - 500px);
  padding-left: 90px;
  box-sizing: border-box;
}
.sub_history .his_list {
  position: relative;
}
.sub_history .his_list > li {
  position: relative;
  padding-bottom: 70px;
  padding-left: 79px;
}
.sub_history .his_list > li:first-child {
  padding-top: 20px;
}
.sub_history .his_list > li::before,
.sub_history .his_list .cont::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background: #eee;
  top: 23px;
  left: -1px;
  transition: 0.6s;
}
.sub_history .his_list .cont::before {
  background: #46bfe4;
  height: 0;
  transition: 0.6s;
}
.sub_history .his_list > li:first-child::before,
.sub_history .his_list > li:first-child .cont::before {
  top: 0;
  height: calc(100% + 23px);
}
.sub_history .his_list > li:first-child .cont::before {
  height: 0;
}
.sub_history .his_list > li:last-child::before,
.sub_history .his_list > li:last-child .cont::before {
  display: none;
}
.sub_history .his_list > li::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: #ccc;
  top: 18px;
  left: -5px;
  border-radius: 100%;
  transition: 0.6s;
}
.sub_history .his_list > li:first-child::after {
  top: 38px;
}
.sub_history .his_list > li.aos-animate::after {
  background: #46bfe4;
}
.sub_history .his_list > li.aos-animate.on::after {
  width: 12px;
  height: 12px;
  background: #fff;
  box-shadow: #46bfe4 0px 0px 0px 4px;
}
.sub_history .his_list > li.aos-animate .cont::before {
  height: 100%;
}
.sub_history .his_list > li:first-child.aos-animate .cont::before {
  height: calc(100% + 23px);
}
.sub_history .his_list .cont {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.sub_history .his_list .year {
  width: 152px;
  font-size: 36px;
  font-weight: 700;
  color: #000;
}
.sub_history .his_list .info {
  width: calc(100% - 152px);
  padding-top: 5px;
}
.sub_history .his_list .info dl {
  display: flex;
}
.sub_history .his_list .info dl + dl {
  margin-top: 16px;
}
.sub_history .his_list .info dl dt {
  width: 45px;
  font-size: 20px;
  font-weight: 500;
  color: #111;
}
.sub_history .his_list .info dl dt + dd {
  width: calc(100% - 45px);
  padding-top: 2px;
}
.sub_history .his_list .info dl dd {
  font-size: 18px;
  font-weight: 400;
  color: #666;
  letter-spacing: -0.045em;
}

/* History page responsive */
@media only screen and (max-width: 1450px) {
  .sub_history .his_list .year { font-size: 34px; width: 145px; }
  .sub_history .his_wrap { padding-left: 6vw; }
  .sub_history .his_list > li { padding-left: 5.4vw; }
  .sub_history .his_list .info { width: calc(100% - 145px); }
  .sub_history .his_list .info dl dt { font-size: 19px; width: 42px; }
  .sub_history .his_list .info dl dt + dd { width: calc(100% - 42px); }
  .sub_history .his_list .info dl dd { font-size: 17px; }
}
@media only screen and (max-width: 1200px) {
  .sub_history .thumb { width: 43%; }
  .sub_history .thumb::before { width: 17.584vw; height: 8.25vw; background-size: 100%; top: -6vw; left: -3vw; }
  .sub_history .thumb::after { width: 9.75vw; height: 18.584vw; background-size: 100%; top: -6vw; left: 9.2vw; }
  .sub_history .his_wrap { width: 57%; }
  .sub_history .his_list > li::after { top: 15px; }
  .sub_history .his_list > li:first-child::after { top: 35px; }
  .sub_history .his_list .year { font-size: 2.667vw; width: 12vw; }
  .sub_history .his_list .info { width: calc(100% - 12vw); }
  .sub_history .his_list .info dl dt { font-size: 1.5vw; width: 3.5vw; }
  .sub_history .his_list .info dl dt + dd { width: calc(100% - 3.5vw); }
  .sub_history .his_list .info dl dd { font-size: 1.4vw; }
  .sub_history .thumb span img { width: 100%; height: auto; }
}
@media only screen and (max-width: 768px) {
  .sub_history { flex-direction: column; padding-top: 40px; }
  .sub_history .thumb { width: 100%; text-align: center; margin-bottom: 40px; }
  .sub_history .thumb span { width: 80%; height: auto; }
  .sub_history .thumb span img { width: 100%; height: auto; }
  .sub_history .his_wrap { width: 100%; padding-left: 0; }
  .sub_history .his_list > li { padding-left: 30px; padding-bottom: 40px; }
  .sub_history .his_list .year { font-size: 24px; width: 80px; }
  .sub_history .his_list .info { width: calc(100% - 80px); }
  .sub_history .his_list .info dl dt { font-size: 16px; width: 35px; }
  .sub_history .his_list .info dl dt + dd { width: calc(100% - 35px); }
  .sub_history .his_list .info dl dd { font-size: 15px; }
}


/* ============================================
   Footer Styles (matches original - full override)
   ============================================ */
#footer {
  width: 100% !important;
  margin: 0 !important;
  background: #000 !important;
  box-sizing: border-box !important;
  padding: 33px 0 40px !important;
}
#footer .w_custom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}
#footer .w_custom::after {
  content: "";
  display: block;
  clear: both;
}
#footer .ft_gnb,
#footer .info_box {
  display: inline-block !important;
  box-sizing: border-box;
  vertical-align: top;
}
#footer .ft_gnb {
  float: right !important;
  margin-top: 4px !important;
  gap: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  flex-direction: unset !important;
}
#footer .ft_gnb li {
  display: inline-block !important;
  vertical-align: middle;
}
#footer .ft_gnb li + li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 10px;
  background: #666;
  margin: -3px 13px 0;
}
#footer .ft_gnb li a {
  font-size: 14px;
  color: #bbb;
  font-weight: 300;
}
#footer .ft_gnb li a strong {
  font-size: inherit;
  color: #fff;
  font-weight: inherit;
}
#footer .info_box .info {
  width: calc(100% + 33px);
  margin-left: -16.5px;
}
#footer .info_box .info span {
  font-size: 14px !important;
  color: rgba(255,255,255,0.5) !important;
  font-weight: 400 !important;
  display: inline-block !important;
  vertical-align: top;
  line-height: 24px !important;
  margin: 0 16.5px !important;
  font-family: Pretendard, sans-serif;
}
#footer .info_box .info span:first-child {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 0 !important;
}
#footer .info_box .info {
  margin-bottom: 0 !important;
}
#footer .info_box .info span a {
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
}
#footer .info_box .copy {
  font-size: 13px;
  color: rgba(187,187,187,0.5);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-top: 24px;
}
#footer .info_box .copy a {
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  display: inline-block;
  vertical-align: top;
  text-transform: initial;
  margin-left: 20px;
}
/* Footer responsive */
@media only screen and (max-width: 1300px) {
  #footer .info_box { width: 72%; }
  #footer .info_box .info br { display: none; }
}
@media only screen and (max-width: 1024px) {
  #footer .ft_gnb { float: none; margin-top: 0; }
  #footer .info_box { width: 100%; margin-top: 20px; }
}


/* ============================================
   FIX: History TIMELINE banner & overflow
   ============================================ */
#page-history .sub_content {
  overflow: visible;
}
#page-history {
  overflow: visible;
  padding-bottom: 9vw;
}


/* ============================================
   Customers Page Styles (matches original)
   ============================================ */
.sub_customers .intro {
  position: relative;
  overflow: hidden;
  padding: 90px 0 165px;
}
.sub_customers .intro::before {
  position: absolute;
  content: "";
  width: 33.07vw;
  height: 42.6vw;
  background: url("../images/sub/sub_customers_bg_icon.png") center center / 100% no-repeat;
  left: -23%;
  bottom: -123%;
}
.sub_customers .intro::after {
  position: absolute;
  content: "";
  width: 31.5vw;
  height: 33.17vw;
  background: url("../images/sub/sub_customers_bg_img.png") center center / 100% no-repeat;
  right: -0.5%;
  top: 60%;
  transform: translateY(-50%);
}
.sub_customers .intro .sub_title h3 {
  font-size: 40px;
  font-weight: 700;
  color: #333;
}
.sub_customers .intro .sub_title h3 em {
  font-style: normal;
}
.sub_customers .intro .sub_title h6 {
  font-size: 20px;
  color: #666;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -0.015em;
  margin-top: 25px;
}
.sub_customers .brand {
  position: relative;
  padding: 115px 0 120px;
  overflow: hidden;
}
.sub_customers .brand.bg {
  background: #f9f9f9;
}
.sub_customers .brand:last-child {
  padding-bottom: 150px;
}
.sub_customers .brand:last-child::before {
  position: absolute;
  content: "";
  width: 33.07vw;
  height: 42.6vw;
  background: url("../images/sub/sub_customers_bg_icon.png") center center / 100% no-repeat;
  right: -13%;
  bottom: -53%;
}
.sub_customers .brand .sub_title h3 {
  font-size: 40px;
  font-weight: 700;
  color: #333;
}
.sub_customers .brand .sub_title h3 em {
  font-style: normal;
}
.sub_customers .brand .logo_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  list-style: none;
  padding: 0;
}
.sub_customers .brand .logo_list li {
  margin-right: 20px;
  width: calc(20% - 16px);
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 15px;
  overflow: hidden;
}
.sub_customers .brand .logo_list li:nth-child(5n) {
  margin-right: 0;
}
.sub_customers .brand .logo_list li:nth-child(n+6) {
  margin-top: 20px;
}
.sub_customers .brand .logo_list li img {
  width: 100%;
  display: block;
}

/* Customers responsive */
@media only screen and (max-width: 1023px) {
  .sub_customers .intro { padding: 70px 0 16vw; }
  .sub_customers .brand { padding: 95px 0 100px; }
  .sub_customers .brand .logo_list li {
    border-radius: 10px;
    width: calc(25% - 11.25px);
  }
  .sub_customers .brand .logo_list li:nth-child(5n) { margin-right: 15px; }
  .sub_customers .brand .logo_list li:nth-child(4n) { margin-right: 0; }
  .sub_customers .brand .logo_list li:nth-child(n+5) { margin-top: 15px; }
}
@media only screen and (max-width: 860px) {
  .sub_customers .brand { padding: 75px 0 90px; }
  .sub_customers .brand .logo_list li {
    width: calc(33.3333% - 10px);
  }
  .sub_customers .brand .logo_list li:nth-child(4n) { margin-right: 15px; }
  .sub_customers .brand .logo_list li:nth-child(3n) { margin-right: 0; }
  .sub_customers .brand .logo_list li:nth-child(n+4) { margin-top: 15px; }
}


/* ============================================
   FIX: sub_title h3 em gradient text (teal)
   ============================================ */
.sub_title h3 {
  font-size: 40px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.03em;
}
.sub_title h3 + h6 {
  margin-top: 30px;
}
.sub_title h3 em {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  background: linear-gradient(90deg, #6dcfc5 0%, #46bfe4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ============================================
   Fabric Page Styles (v3 - exact match)
   ============================================ */
.sub_fabric { overflow-x: hidden; }
.sub_fabric > div { position: relative; }
.sub_fabric > div > a { position: absolute; top: -80px; }

/* --- Fabric Tab Navigation (centered, inline-block) --- */
.sub_fabric .fabric_tab {
  display: block; text-align: center;
  padding: 0; margin: 0 auto;
  list-style: none;
}
.sub_fabric .fabric_tab li {
  display: inline-block; position: relative;
  padding: 22px 0 0; cursor: pointer;
  vertical-align: top;
}
.sub_fabric .fabric_tab li::before {
  content: ''; position: absolute; top: 0;
  left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 100%;
  background: #45bfe5; display: none;
}
.sub_fabric .fabric_tab li + li { margin-left: 70px; }
.sub_fabric .fabric_tab li span {
  font-size: 22px; color: #666; font-weight: 500;
  letter-spacing: -0.5px;
}
.sub_fabric .fabric_tab li.on::before { display: block; }
.sub_fabric .fabric_tab li.on span { color: #45bfe5; font-weight: 600; }
/* --- Fabric Title (gradient) --- */
.sub_fabric .fabric_title {
  font-size: 50px; font-weight: 700; letter-spacing: -1px;
  background: linear-gradient(90deg, #6dcfc5, #46bfe4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
  margin-bottom: 80px;
}

/* --- Strong Point Section --- */
.fabric_point { margin-top: 104px; }

/* --- Each Strong Point container --- */
.sub_fabric_cont {
  display: flex; align-items: center; gap: 60px;
  padding: 100px 0;
}
.sub_fabric_cont:first-of-type { padding-top: 0; }
.sub_fabric_cont:nth-of-type(2n) { flex-direction: row-reverse; }

/* --- Text Box --- */
.sub_fabric_cont .txt_box { width: 750px; flex-shrink: 0; }
.sub_fabric_cont .txt_box .step {
  display: inline-block; font-size: 16px; color: #46bfe4;
  font-weight: 500; margin-bottom: 20px;
  border: 1px solid #46bfe4; border-radius: 30px;
  padding: 8px 24px;
}
.sub_fabric_cont .txt_box h4 {
  font-size: 50px; font-weight: 700; color: #000;
  line-height: 1.2; letter-spacing: -1px; margin-bottom: 20px;
}
.sub_fabric_cont .txt_box p {
  font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 30px;
}

/* --- Image Box (default: 500x700 rounded rect) --- */
.sub_fabric_cont .img_box { flex: 1; }
.sub_fabric_cont .img_box .img {
  width: 500px; height: 700px; border-radius: 20px; overflow: hidden;
}
.sub_fabric_cont .img_box .img img {
  width: 100%; height: 100%; object-fit: cover;
}

/* --- Exp Table (Point 1) --- */
.sub_fabric_cont .exp_table {
  width: 100%; border-collapse: collapse; margin-top: 30px;
  border-top: 2px solid #333;
}
.sub_fabric_cont .exp_table th {
  padding: 15px 0 15px 30px; font-size: 18px; font-weight: 600;
  color: #333; text-align: left; vertical-align: top;
  border-bottom: 1px solid #ccc;
}
.sub_fabric_cont .exp_table td {
  padding: 15px 10px; font-size: 18px; color: #555;
  border-bottom: 1px solid #ccc; line-height: 1.6;
}
.sub_fabric_cont .exp_table thead th {
  font-size: 16px; font-weight: 600; color: #333;
  padding: 15px 10px; background: #f8f8f8;
  border-bottom: 1px solid #ccc; text-align: center;
}
.sub_fabric_cont .exp_table + .exp_table tbody td { text-align: center; }
.sub_fabric_cont .exp_table + .exp_table { margin-top: 40px; }
/* --- Dev Point (Point 2) image = 580x585 --- */
.dev_point .img_box .img {
  width: 580px; height: 585px; border-radius: 20px; overflow: hidden;
}

/* --- Library Point (Point 3) two images side by side --- */
.library_point .img_box { display: flex; gap: 30px; }
.library_point .img_box .img:first-child {
  width: 330px; height: 500px; border-radius: 20px; overflow: hidden; flex-shrink: 0;
}
.library_point .img_box .img:last-child {
  width: 430px; height: 500px; border-radius: 20px; overflow: hidden;
  margin-top: 100px; flex-shrink: 0;
}

/* --- System Point (Point 4) reversed, txt 660px --- */
.system_point { flex-direction: row-reverse; }
.system_point .txt_box { width: 660px; }

/* System Box (receipt + ezTex text) */
.system_point .system_box {
  display: flex; align-items: center; gap: 0;
  padding-top: 40px; margin-top: 34px;
  border-top: 1px solid #ddd;
}
.system_point .system_box > .img {
  flex-shrink: 0; width: 250px; height: 150px;
}
.system_point .system_box > .img img {
  width: 250px; height: 150px; object-fit: contain;
}
.system_point .system_box > .txt { padding-left: 30px; }
.system_point .system_box .txt .logo { margin-bottom: 10px; }
.system_point .system_box .txt .logo img { width: 205px; height: 46px; object-fit: contain; }
.system_point .system_box .txt dl dt {
  font-size: 18px; font-weight: 700; color: #333; margin-bottom: 5px;
}
.system_point .system_box .txt dl dd {
  font-size: 16px; color: #666; line-height: 26px;
}

/* --- System Image (CIRCLE 590x590, phone overlay absolute) --- */
.sub_fabric_cont .system_img {
  width: 590px; height: 590px; position: relative; flex-shrink: 0;
}
.sub_fabric_cont .system_img .img:first-child {
  width: 590px; height: 590px;
  border-radius: 100%; overflow: hidden;
}
.sub_fabric_cont .system_img .img:first-child img {
  width: 100%; height: 100%; object-fit: cover;
}
.sub_fabric_cont .system_img .img:last-child {
  position: absolute; left: 366px; top: 153px;
  width: 272px; height: 462px;
}
.sub_fabric_cont .system_img .img:last-child img {
  width: 100%; height: 100%; object-fit: contain;
}
/* ============================================
   PRODUCT LINE-UP
   ============================================ */
.fabric_lineup { background: #f8f8f8; padding: 120px 0; }

/* Lineup Tab (Single/Double buttons) */
.fabric_lineup .lineup_tab {
  display: flex; gap: 0; margin-bottom: 60px;
  list-style: none; padding: 0;
}
.fabric_lineup .lineup_tab li {
  width: 50%; height: 70px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; font-weight: 600;
  cursor: pointer; border-radius: 35px;
  border: 1px solid #ddd; color: #999; background: #fff;
  transition: all 0.3s;
}
.fabric_lineup .lineup_tab li + li { margin-left: -1px; }
.fabric_lineup .lineup_tab li.on {
  background: #46bfe4; color: #fff; border-color: #46bfe4;
}
.fabric_lineup .line_cont { display: none; }
.fabric_lineup .line_cont.on { display: block; }
.fabric_lineup .line_cont h4.line_tit {
  font-size: 40px; font-weight: 700; color: #000;
  padding-bottom: 30px; margin-bottom: 40px;
  border-bottom: 2px solid #333;
}
.fabric_lineup .line_cont h4 span {
  font-size: 20px; color: #333; font-weight: 400; margin-left: 29px;
}
/* Prd List - Style LEFT, Material RIGHT (side by side) */
.fabric_lineup .prd_list {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 0;
}
.fabric_lineup .prd_list dl { width: 50%; box-sizing: border-box; margin-bottom: 0; }
.fabric_lineup .prd_list dl:first-child { padding-right: 20px; }
.fabric_lineup .prd_list dl:last-child { padding-left: 20px; }

/* DT label with dot */
.fabric_lineup .prd_list dl dt {
  font-size: 20px; font-weight: 500; color: #333;
  margin-bottom: 20px; padding-left: 20px; position: relative;
}
.fabric_lineup .prd_list dl dt::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #46bfe4;
}

/* Style List - WHITE BOX with border, pills inside */
.fabric_lineup .prd_list .style_list {
  background: #fff; border: 1px solid #ddd; border-radius: 20px;
  padding: 30px 30px 15px;
}
.fabric_lineup .prd_list .style_list ul {
  display: flex; flex-wrap: wrap; gap: 12px;
  list-style: none; padding: 0; margin: 0;
}
.fabric_lineup .prd_list .style_list ul li {
  width: calc(50% - 6px); height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f5; border-radius: 30px;
  font-size: 18px; color: #666;
}
.fabric_lineup .prd_list .style_list ul li::before { display: none; }
/* Material List - circular thumbnails ~90px */
.fabric_lineup .prd_list .material_list ul {
  display: flex; flex-wrap: wrap; gap: 15px;
  list-style: none; padding: 0; margin: 0;
}
.fabric_lineup .prd_list .material_list ul li {
  width: 90px; text-align: center;
}
.fabric_lineup .prd_list .material_list ul li .img {
  width: 90px; height: 90px; overflow: hidden; margin: 0 auto 8px;
}
.fabric_lineup .prd_list .material_list ul li .img img {
  width: 100%; height: 100%; object-fit: cover;
}
.fabric_lineup .prd_list .material_list ul li span {
  font-size: 14px; color: #666; display: block;
}
.fabric_lineup .prd_list .material_list ul li::before { display: none; }
/* ============================================
   FEATURED PRODUCT
   ============================================ */
.fabric_product { padding: 120px 0; }
.fabric_product .featured_list { list-style: none; padding: 0; margin: 0; }
.fabric_product .featured_list > li {
  display: flex; align-items: center; gap: 60px; padding: 60px 0;
}
.fabric_product .featured_list > li + li { border-top: 1px solid #e5e5e5; }
.fabric_product .featured_list > li:nth-child(2n) { flex-direction: row-reverse; }
.fabric_product .featured_list > li .txt_box { width: 50%; }
.fabric_product .featured_list > li .txt_box h4 {
  font-size: 50px; font-weight: 700; color: #000;
  margin-bottom: 15px; letter-spacing: -1px;
}
.fabric_product .featured_list > li .txt_box p {
  font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 30px;
}
.fabric_product .featured_list > li .thumb {
  width: 50%; border-radius: 20px; overflow: hidden; height: 500px;
}
.fabric_product .featured_list > li .thumb img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
/* Featured Product formula (plus/equal) */
.fabric_product .featured_list .txt_des {
  display: flex; align-items: stretch; gap: 0;
}
.fabric_product .featured_list .txt_des > div {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 10px; position: relative;
  border: 1px solid #e5e5e5; border-radius: 12px;
}
.fabric_product .featured_list .txt_des > div dl { width: 100%; text-align: center; }
.fabric_product .featured_list .txt_des > div dl dt {
  font-size: 22px; font-weight: 700; color: #333; margin-bottom: 5px;
}
.fabric_product .featured_list .txt_des > div dl dd { font-size: 14px; color: #666; }
.fabric_product .featured_list .txt_des .plus { flex: 1; }
.fabric_product .featured_list .txt_des .plus + .plus::before {
  content: '+'; position: absolute; left: -12px; top: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: #46bfe4; color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.fabric_product .featured_list .txt_des .equal {
  flex: 1.5; background: #46bfe4; border-color: #46bfe4;
}
.fabric_product .featured_list .txt_des .equal::before {
  content: '='; position: absolute; left: -12px; top: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: #46bfe4; color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.fabric_product .featured_list .txt_des .equal dl dt { color: #fff; }
.fabric_product .featured_list .txt_des .equal dl dd { color: rgba(255,255,255,0.8); }
/* Fabric Responsive */
@media (max-width: 1024px) {
  .sub_fabric_cont { flex-direction: column !important; gap: 40px; }
  .sub_fabric_cont .txt_box { width: 100% !important; }
  .sub_fabric_cont .img_box,
  .sub_fabric_cont .system_img { width: 100% !important; height: auto !important; }
  .sub_fabric_cont .img_box .img { width: 100% !important; height: auto !important; }
  .library_point .img_box .img:first-child,
  .library_point .img_box .img:last-child { width: 48% !important; height: auto !important; margin-top: 0 !important; }
  .sub_fabric_cont .system_img .img:first-child { width: 100% !important; height: auto !important; }
  .sub_fabric_cont .txt_box h4 { font-size: 36px; }
  .fabric_lineup .prd_list { flex-direction: column !important; }
  .fabric_lineup .prd_list dl { width: 100% !important; padding: 0 !important; margin-bottom: 40px; }
  .fabric_product .featured_list > li { flex-direction: column !important; gap: 40px; }
  .fabric_product .featured_list > li .txt_box,
  .fabric_product .featured_list > li .thumb { width: 100%; height: 350px; }
  .fabric_product .featured_list > li .txt_box h4 { font-size: 40px; }
}

/* ===== FABRIC FIX v4 ===== */
/* System Point - ensure txt_box is 660px not 750px */
.system_point .txt_box {
  width: 660px !important; flex-shrink: 0 !important;
}
.system_point .system_img {
  width: 590px !important; height: 590px !important;
  flex-shrink: 0 !important;
}

/* Material list - SAME white board as style list */
.fabric_lineup .prd_list .material_list {
  background: #fff; border: 1px solid #ddd;
  border-radius: 20px; padding: 30px 30px 15px;
}

/* Both Style and Material boxes same height - equal flex */
.fabric_lineup .prd_list dl {
  display: flex; flex-direction: column;
}
.fabric_lineup .prd_list dl dd.sub_list {
  flex: 1;
}

/* Fix anchor scroll offset for fixed header */
.sub_fabric > div > a[name] {
  display: block; position: relative;
  top: -120px; visibility: hidden;
}
#sec_fabric_point { scroll-margin-top: 120px; }
#sec_fabric_lineup { scroll-margin-top: 120px; }
#sec_fabric_product { scroll-margin-top: 120px; }

/* Material images: 6 per row inside the white box */
.fabric_lineup .prd_list .material_list ul {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 15px 10px !important;
}
.fabric_lineup .prd_list .material_list ul li {
  width: auto !important;
}
.fabric_lineup .prd_list .material_list ul li .img {
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important; margin: 0 auto 8px;
}

/* ===== FABRIC FIX v6 ===== */
/* System Point - scale to fit 1400px container */
/* txt: 660px + gap: 50px + img circle: 500px + phone overlap right: ~140px = ~1350 */
.system_point {
  overflow: visible !important;
  gap: 50px !important;
}
.system_point .txt_box {
  width: 660px !important; flex-shrink: 0 !important;
}
.sub_fabric_cont.system_point .system_img {
  width: 500px !important; height: 500px !important;
  flex-shrink: 0 !important;
}
.sub_fabric_cont.system_point .system_img .img:first-child {
  width: 500px !important; height: 500px !important;
}
.sub_fabric_cont.system_point .system_img .img:last-child {
  left: 310px !important; top: 120px !important;
  width: 230px !important; height: 390px !important;
}

/* Dev Point - add gap between diagram and text */
.dev_point { gap: 80px !important; }
/* All sub_fabric_cont - ensure no overlap */
.sub_fabric_cont { overflow: visible !important; }

/* ===== FABRIC FIX v7 ===== */
/* System Point - more gap between circle image and text */
.system_point { gap: 100px !important; }

/* Dev Point - more gap between diagram and text */
.dev_point { gap: 150px !important; }

/* System Point text box - push text right with padding */
.system_point .txt_box { padding-left: 40px !important; }

/* ===== FABRIC FIX v8 ===== */
/* Dev Point - shift entire content 50px to the right */
.dev_point { margin-left: 50px !important; }

/* System Point - add 50px more gap (100px �� 150px) */
.system_point { gap: 150px !important; }


/* ===== FABRIC FIX v9 ===== */
/* Undo v8 margin-left - use centering instead */
.dev_point { margin-left: 0 !important; }

/* Center all sub_fabric_cont sections */
.sub_fabric_cont {
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Dev Point - centered with balanced gap */
.dev_point {
  justify-content: center !important;
  gap: 60px !important;
}

/* Library Point - pull images back from right edge */
.library_point {
  justify-content: center !important;
  gap: 30px !important;
}
.library_point .txt_box {
  width: 550px !important;
}
.library_point .img_box {
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}


/* ===== GARMENT PAGE ===== */
.sub_garment {
  position: relative;
  overflow: hidden;
  padding: 100px 0 160px;
}
.sub_garment::before,
.sub_garment::after {
  width: 636px;
  height: 819px;
  content: "";
  background: url("../images/sub/garment-icon-01.png") center center / auto 100% no-repeat;
  position: absolute;
}
.sub_garment::before {
  top: -42%;
  left: -24%;
}
.sub_garment::after {
  bottom: -26%;
  right: -18%;
}

.garment_map {
  z-index: 3;
}
.sub_garment h3 {
  font-size: 50px;
  letter-spacing: -1.5px;
  font-weight: 700;
  background-image: linear-gradient(to right, #6dcfc5 32%, #46bfe4 75%),
                    linear-gradient(to right, #45bfe5 40%, #45bfe5 102%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.3;
}
.garment_map .map_box {
  width: 100%;
  height: 772px;
  background: url("../images/sub/garment-bg.png") right center / cover no-repeat;
  margin-top: 50px;
  position: relative;
}

.garment_map .map_box .loc_box a,
.garment_map .map_box .loc_box .garment-loc-pin {
  font-size: 18px;
  color: #111;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  position: absolute;
  text-decoration: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.garment_map .map_box .loc_box a::before,
.garment_map .map_box .loc_box .garment-loc-pin::before {
  width: 23px;
  height: 34px;
  content: "";
  background: url("../images/sub/loc-icon.png") center center no-repeat;
  display: inline-block;
  margin-right: 9px;
  flex-shrink: 0;
}


/* ===== GARMENT COUNTRY VIEW PAGES ===== */
.sub_garment_view::before,
.sub_garment_view::after {
  display: none;
}
.sub_garment_view .view_list {
  counter-reset: section 0;
  margin-top: 40px;
  list-style: none;
  padding: 0;
}
.sub_garment_view .view_list li {
  counter-increment: section 1;
  font-size: 18px;
  color: #666;
  font-weight: 400;
  letter-spacing: -0.54px;
  position: relative;
  padding-left: 33px;
}
.sub_garment_view .view_list li::before {
  content: counter(section);
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  border-radius: 100%;
  background: #46bfe4;
  text-align: center;
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.45px;
  line-height: 25px;
  position: absolute;
  left: 0;
  top: -2px;
}
.sub_garment_view .view_list li + li {
  margin-top: 20px;
}
/* Back button */
.sub_garment_view .back_btn {
  margin-top: 60px;
}
.sub_garment_view .back_btn a {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid #46bfe4;
  color: #46bfe4;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}
.sub_garment_view .back_btn a:hover {
  background: #46bfe4;
  color: #fff;
}


/* ===== OWN BRAND / MMMW PAGE ===== */
.mmww_box p {
  font-size: 20px;
  color: #666;
  font-weight: 400;
  line-height: 34px;
  margin: 27px 0 44px;
}
.mmww_box a {
  display: flex;
  box-sizing: border-box;
  background: #46bfe4;
  width: 247px;
  height: 70px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.54px;
  border-radius: 35px;
  text-decoration: none;
}

.mmww_box a::before {
  width: 31px;
  height: 29px;
  content: "";
  background: url("../images/sub/icon-market.png") center center no-repeat;
  display: inline-block;
  margin-right: 12px;
}
.mmww_box a::after {
  width: 7px;
  height: 7px;
  content: "";
  border-style: solid;
  border-color: #fff;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  display: inline-block;
  margin-left: 20px;
}
.mmww_box .img_box {
  margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin-left: -10px;
  list-style: none;
  padding: 0;
}

.mmww_box .img_box li {
  box-sizing: border-box;
  width: calc(25% - 20px);
  margin: 0 10px 15px;
}
.mmww_box .img_box li:nth-child(2) {
  transform: translateY(-70px);
}
.mmww_box .img_box li:nth-child(4) {
  transform: translateY(-170px);
}
.mmww_box .img_box li .img {
  box-sizing: border-box;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.mmww_box .img_box li .img img {
  width: 100%;
  display: block;
}


/* ===== NEWS / SUSTAINABILITY PAGE ===== */
.sub_cont { max-width: 1400px; margin: 0 auto; padding: 80px 0 0; }
.submenu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 50px;
  border-bottom: 2px solid #111;
}
.submenu li { margin-right: 0; }
.submenu li a {
  display: block;
  padding: 15px 30px;
  font-size: 18px;
  color: #999;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.submenu li a.on {
  color: #111;
  font-weight: 700;
}
.submenu li a.on::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #111;
}

/* Gallery grid */
.board_gallery02 {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.board_gallery02 > li {
  position: relative;
  width: calc(25% - 22.5px);
  margin-right: 30px;
  margin-bottom: 30px;
}
.board_gallery02 > li:nth-child(4n) {
  margin-right: 0;
}
.board_gallery02 > li > a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.board_gallery02 .thumb {
  font-size: 0;
  border: 1px solid #ddd;
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
}
.board_gallery02 .thumb img {
  width: 100%;
  display: block;
}

.board_gallery02 .txt_info {
  position: relative;
  padding: 15px 0 0;
  box-sizing: border-box;
  text-align: center;
}
.board_gallery02 .txt_info .board_tit strong {
  font-size: 20px;
  font-weight: 500;
  color: #111;
  line-height: 1.4;
}
.empty_board {
  text-align: center;
  padding: 100px 0;
  font-size: 18px;
  color: #999;
}


/* ===== BOARD SEARCH BAR ===== */
.search_wrap {
  padding: 100px 0 40px;
  font-size: 0;
  text-align: right;
}
.search_wrap .search_sel {
  width: 160px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
.search_wrap .search_sel select {
  width: 100%;
  height: 55px;
  padding: 0 15px;
  font-size: 16px;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  appearance: auto;
}

.search_wrap .input_text {
  width: 320px;
  height: 55px;
  padding: 0 15px;
  font-size: 16px;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  box-sizing: border-box;
}
.search_wrap .seach_btn {
  display: inline-block;
  width: 55px;
  height: 55px;
  background: url("../images/sub/seach_btn_icon.png") center center no-repeat #46bfe4;
  border-radius: 100%;
  border: 0;
  font-size: 0;
  cursor: pointer;
  vertical-align: middle;
}


/* ===== NEWS BOARD GALLERY (3-col cards) ===== */
.board_gallery {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.board_gallery > li {
  position: relative;
  width: calc(33.3333% - 21.34px);
  margin-right: 32px;
  border: 1px solid #ddd;
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
  transition: 0.4s;
}
.board_gallery > li > a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.board_gallery > li:nth-child(3n) {
  margin-right: 0;
}
.board_gallery > li:nth-child(n+4) {
  margin-top: 30px;
}

.board_gallery .thumb {
  position: relative;
  padding-bottom: 63.2%;
  overflow: hidden;
  font-size: 0;
}
.board_gallery .thumb img {
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: 120%;
  max-height: 120%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.board_gallery .txt_info {
  position: relative;
  padding: 35px 27px 74px;
  box-sizing: border-box;
}

.board_gallery .txt_info::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 14px;
  background: url("../images/sub/board_more_arw.png") right bottom / 100% no-repeat;
  bottom: 37px;
  right: 28px;
}
.board_gallery .txt_info .board_tit strong {
  font-size: 20px;
  font-weight: 500;
  color: #111;
  line-height: 1.4;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.board_gallery > li:hover {
  border-color: #46bfe4;
  box-shadow: 0 5px 20px rgba(70,191,228,0.15);
}

/* News: when .date exists inside .txt_info, adjust padding and hide ::before arrow */
.board_gallery .txt_info:has(.date) { padding: 25px 27px; }
.board_gallery .txt_info:has(.date)::before { display: none; }

/* News item date and arrow */
.board_gallery .date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  font-size: 13px;
  color: #999;
  margin-top: 12px;
}
.board_gallery .date .arrow {
  font-size: 16px;
  color: #ccc;
  transition: color .2s;
}
.board_gallery > li:hover .date .arrow {
  color: #46bfe4;
}

/* Pagination */
.board_paging {
  text-align: center;
  padding: 50px 0 80px;
}
.paging_wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.paging_wrap a,
.paging_wrap strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border-radius: 50%;
  transition: all .25s;
  cursor: pointer;
}
.paging_wrap .pg_num {
  color: #888;
  background: transparent;
}
.paging_wrap .pg_num:hover {
  color: #333;
  background: #f0f0f0;
}
.paging_wrap .pg_current {
  color: #fff;
  background: #222;
  font-weight: 600;
}
.paging_wrap .pg_prev,
.paging_wrap .pg_next {
  color: #aaa;
  background: transparent;
  font-size: 16px;
  font-weight: 400;
}
.paging_wrap .pg_prev:hover,
.paging_wrap .pg_next:hover {
  color: #333;
  background: #f0f0f0;
}

/* Board Detail View */
.board_detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0 80px;
}
.board_detail .detail_header {
  border-bottom: 2px solid #333;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.board_detail .detail_header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  margin-bottom: 10px;
}
.board_detail .detail_date {
  font-size: 14px;
  color: #999;
}
.board_detail .detail_image {
  margin-bottom: 30px;
  text-align: center;
}
.board_detail .detail_image img {
  width: 100%;
  height: auto;
}
.board_detail .detail_content {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 40px;
  word-break: keep-all;
}
.board_detail .detail_actions {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid #e5e5e5;
}
.board_detail .btn_list {
  display: inline-block;
  padding: 12px 50px;
  background: #333;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s;
}
.board_detail .btn_list:hover {
  background: #46bfe4;
}


/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE v1
   ============================================ */

/* --- 768px: Tablet --- */
@media screen and (max-width: 768px) {
  /* Header mobile fix */
  .hd_lnb { display: none !important; }
  .hd_logo a { width: 160px !important; height: 40px !important; }
  .hd_right { gap: 12px !important; flex-shrink: 0 !important; }
  .menu-trigger { width: 28px !important; height: 20px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; background: none !important; border: none !important; padding: 0 !important; }
  .menu-trigger span { display: block !important; width: 100% !important; height: 2px !important; }
  #header.on .menu-trigger span { background: #333 !important; }
  .lang_selector select { font-size: 12px !important; padding: 4px 8px !important; }
  #header.on .lang_selector select { color: #333 !important; border-color: #333 !important; }

  /* Sub-visual banner */
  .sub_visual { height: 300px; padding-bottom: 60px; }
  .sub_visual h2,
  .sub_visual .sub_title h2 { font-size: 32px !important; line-height: 1.2; word-break: keep-all; }
  .sub_visual p,
  .sub_visual .sub_title p { font-size: 13px; letter-spacing: 1px; }

  /* Garment / Business Map */
  .sub_garment { padding: 40px 0 60px !important; overflow: visible !important; }
  .sub_garment::before,
  .sub_garment::after { display: none !important; }
  .sub_garment h3 { font-size: 28px !important; line-height: 1.3 !important; }
  .sub_garment h3 br { display: none !important; }
  .garment_map { padding: 0 15px !important; position: relative !important; z-index: 3 !important; }
  .garment_map .map_box {
    height: 0 !important; padding-bottom: 75% !important;
    background-size: contain !important; background-position: center top !important; background-repeat: no-repeat !important;
    margin-top: 30px !important; position: relative !important;
  }
  .garment_map .map_box .loc_box { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
  .garment_map .map_box .loc_box a,
  .garment_map .map_box .loc_box .garment-loc-pin { font-size: 12px !important; }
  .garment_map .map_box .loc_box a::before,
  .garment_map .map_box .loc_box .garment-loc-pin::before { width: 14px !important; height: 21px !important; background-size: contain !important; margin-right: 4px !important; }

  /* Garment view */
  .sub_garment_view .view_list li { font-size: 15px; padding-left: 28px; }

  /* Fabric tabs */
  .sub_fabric .fabric_tab li + li { margin-left: 20px; }
  .sub_fabric .fabric_tab li span { font-size: 16px; }
  .sub_fabric .fabric_title { font-size: 32px; margin-bottom: 40px; }

  /* Fabric sections - stack */
  .sub_fabric_cont { flex-direction: column !important; gap: 30px !important; padding: 60px 0 !important; }
  .sub_fabric_cont .txt_box { width: 100% !important; }
  .sub_fabric_cont .txt_box h4 { font-size: 28px !important; }
  .sub_fabric_cont .txt_box p { font-size: 16px; }
  .sub_fabric_cont .img_box { width: 100% !important; }
  .sub_fabric_cont .img_box .img { width: 100% !important; height: auto !important; }
  .sub_fabric_cont .img_box .img img { height: auto; }
  .dev_point .img_box .img { width: 100% !important; height: auto !important; }
  .library_point .img_box .img:first-child,
  .library_point .img_box .img:last-child { width: 48% !important; height: auto !important; margin-top: 0 !important; }
  .library_point .txt_box { width: 100% !important; }
  .system_point { gap: 30px !important; }
  .system_point .txt_box { width: 100% !important; padding-left: 0 !important; }
  .sub_fabric_cont.system_point .system_img { width: 100% !important; height: auto !important; }
  .sub_fabric_cont.system_point .system_img .img:first-child { width: 300px !important; height: 300px !important; margin: 0 auto; }
  .sub_fabric_cont.system_point .system_img .img:last-child { left: 55% !important; top: 20% !important; width: 150px !important; height: 260px !important; }
  .system_point .system_box { flex-direction: column; align-items: flex-start; gap: 20px; }
  .system_point .system_box > .img { width: 180px; height: auto; }
  .system_point .system_box > .img img { width: 180px; height: auto; }
  .system_point .system_box > .txt { padding-left: 0; }

  /* Fabric lineup */
  .fabric_lineup .prd_list { flex-direction: column !important; }
  .fabric_lineup .prd_list dl { width: 100% !important; padding: 0 !important; margin-bottom: 30px; }
  .fabric_lineup .prd_list .material_list ul { grid-template-columns: repeat(4, 1fr) !important; }

  /* Fabric product featured */
  .fabric_product .featured_list > li { flex-direction: column !important; gap: 30px; }
  .fabric_product .featured_list > li .txt_box,
  .fabric_product .featured_list > li .thumb { width: 100%; height: 350px; }
  .fabric_product .featured_list > li .txt_box h4 { font-size: 30px; }

  /* Exp table */
  .sub_fabric_cont .exp_table th,
  .sub_fabric_cont .exp_table td { font-size: 14px; padding: 10px 8px; }
  .sub_fabric_cont .exp_table th { padding-left: 15px; }

  /* Own Brand / MMMW */
  .mmww_box p { font-size: 16px; line-height: 28px; }
  .mmww_box p br { display: none; }
  .mmww_box .img_box { margin-top: 60px; }
  .mmww_box .img_box li { width: calc(50% - 20px); }
  .mmww_box .img_box li:nth-child(2) { transform: translateY(-30px); }
  .mmww_box .img_box li:nth-child(4) { transform: translateY(-30px); }

  /* Customers */
  .sub_customers .intro { padding: 50px 0 80px; }
  .sub_customers .intro::after { display: none; }
  .sub_customers .intro .sub_title h3 { font-size: 28px; }
  .sub_customers .intro .sub_title h6 { font-size: 16px; line-height: 28px; }
  .sub_customers .brand { padding: 60px 0 70px; }
  .sub_customers .brand .sub_title h3 { font-size: 28px; }
  .sub_customers .brand .logo_list li { width: calc(33.3333% - 14px); margin-right: 15px; border-radius: 10px; }
  .sub_customers .brand .logo_list li:nth-child(5n) { margin-right: 15px; }
  .sub_customers .brand .logo_list li:nth-child(3n) { margin-right: 0; }
  .sub_customers .brand .logo_list li:nth-child(n+4) { margin-top: 15px; }

  /* Contact form */
  .board_write table th { display: block; width: 100%; padding: 15px 0 5px; font-size: 15px; }
  .board_write table td { display: block; width: 100%; padding: 5px 0 15px; }
  .board_write .input_s,
  .board_write .input_m,
  .board_write .input_l { width: 100% !important; height: 48px; font-size: 14px; }
  .board_write .textarea_l { width: 100% !important; height: 200px; font-size: 14px; }
  .agree_box { padding: 20px; }
  .agree_label { font-size: 15px; }
  .btn_ok { width: 160px; height: 60px; line-height: 60px; font-size: 18px; }
  .captcha_wrap { flex-wrap: wrap; }
  .captcha_q { min-width: 140px; height: 48px; font-size: 18px; }

  /* Board gallery / news list */
  .board_gallery > li { width: calc(50% - 16px); margin-right: 20px !important; }
  .board_gallery > li:nth-child(3n) { margin-right: 20px !important; }
  .board_gallery > li:nth-child(2n) { margin-right: 0 !important; }
  .board_gallery > li:nth-child(n+3) { margin-top: 20px; }
  .board_gallery02 > li { width: calc(50% - 15px); margin-right: 20px; }
  .board_gallery02 > li:nth-child(4n) { margin-right: 20px; }
  .board_gallery02 > li:nth-child(2n) { margin-right: 0; }

  /* Search bar */
  .search_wrap { text-align: center; padding: 40px 0 25px; }
  .search_wrap .search_sel { width: 100%; margin-right: 0; margin-bottom: 10px; }
  .search_wrap .input_text { width: calc(100% - 65px); margin-right: 10px; }

  /* Sub menu tabs */
  .submenu li a { padding: 12px 15px; font-size: 15px; }

  /* Board detail */
  .board_detail { padding: 30px 20px 60px; }
  .board_detail .detail_header h3 { font-size: 20px; }

  /* Footer */
  #footer .ft_gnb { float: none !important; margin-bottom: 15px; }
  #footer .ft_gnb li a { font-size: 13px; }
  #footer .info_box { width: 100% !important; }
  #footer .info_box .info span { font-size: 12px !important; line-height: 22px !important; }
  #footer .info_box .copy { font-size: 11px; }

  /* History page */
  #page-history { padding-bottom: 60px; }
  .sub_history .thumb::before,
  .sub_history .thumb::after { display: none; }

  /* Aside menu full width */
  .aside_box { padding: 30px 30px 30px 30px; }
  .aside_box .logo { display: none; }
  .aside_lnb { padding: 30px 0 0; }

  /* =======================================
     Business Map - Organization Chart Mobile
     ======================================= */
  .sub_organiztion .chart::before { font-size: 60px !important; top: -10px !important; }
  .sub_organiztion .chart::after { display: none !important; }
  .sub_organiztion .chart { padding-bottom: 60px !important; overflow: hidden !important; }
  .sub_organiztion .chart .logo { width: 160px !important; height: 160px !important; border-width: 10px !important; }
  .sub_organiztion .chart .logo::before { height: 25px !important; }
  .sub_organiztion .chart .logo span { padding: 15px !important; }
  .sub_organiztion .orga_list {
    display: flex !important; flex-direction: column !important;
    margin-top: 40px !important; align-items: center !important;
  }
  .sub_organiztion .orga_list::before,
  .sub_organiztion .orga_list > li::before,
  .sub_organiztion .orga_list > li::after { display: none !important; }
  .sub_organiztion .orga_list > li {
    width: 100% !important; max-width: 400px !important;
    margin-right: 0 !important; margin-bottom: 25px !important;
  }
  .sub_organiztion .orga_list > li + li::before,
  .sub_organiztion .orga_list > li + li::after { display: none !important; }
  .sub_organiztion .orga_list > li ol { position: relative !important; }
  .sub_organiztion .orga_list > li ol::before { display: none !important; }
  .sub_organiztion .orga_list > li.point ol::before { display: none !important; }
  .sub_organiztion .orga_list > li ol li {
    height: 60px !important; font-size: 18px !important;
    border-radius: 30px !important;
  }
  .sub_organiztion .orga_list > li ol li + li {
    font-size: 16px !important; margin-top: 12px !important;
  }
  .sub_organiztion .orga_list > li ol li + li::before { display: none !important; }
  .sub_organiztion .orga_list > li ol li span { font-size: 14px !important; }

  /* Value Section Mobile */
  .sub_organiztion .value { padding: 80px 0 !important; overflow: hidden !important; }
  .sub_organiztion .value .title {
    width: 220px !important; height: 220px !important;
  }
  .sub_organiztion .value .title::before { width: 130% !important; height: 130% !important; }
  .sub_organiztion .value .title::after { width: 160% !important; height: 160% !important; }
  .sub_organiztion .value .title dl { top: 28% !important; }
  .sub_organiztion .value .title dl dt { font-size: 13px !important; padding: 5px 10px !important; }
  .sub_organiztion .value .title dl dt + dd { margin-top: 12px !important; }
  .sub_organiztion .value .title dl dd { font-size: 22px !important; }
  .sub_organiztion .value .title .logo { width: calc(100% - 60px) !important; }
  .sub_organiztion .val_list {
    flex-direction: column !important; align-items: center !important;
    margin-top: 30px !important;
  }
  .sub_organiztion .val_list li {
    width: 160px !important; height: 160px !important; margin-bottom: 20px !important;
  }
  .sub_organiztion .val_list li + li { margin-left: 0 !important; }
  .sub_organiztion .val_list li:nth-child(2) { margin-top: 0 !important; }
  .sub_organiztion .val_list li::before,
  .sub_organiztion .val_list li::after { display: none !important; }
  .sub_organiztion .val_list li:nth-child(1)::before,
  .sub_organiztion .val_list li:nth-child(1)::after,
  .sub_organiztion .val_list li:nth-child(2)::before,
  .sub_organiztion .val_list li:nth-child(2)::after,
  .sub_organiztion .val_list li:nth-child(3)::before,
  .sub_organiztion .val_list li:nth-child(3)::after { display: none !important; }
  .sub_organiztion .val_list li dl dd { font-size: 16px !important; }
  .sub_organiztion .val_list li dl dt { height: 45px !important; }
  .sub_organiztion .val_list li dl dt img { max-width: 45px !important; }
  .sub_organiztion .val_list li dl dt + dd { margin-top: 10px !important; }
}

/* --- 500px: Small Mobile --- */
@media screen and (max-width: 500px) {
  .w_custom { padding: 0 15px; }

  /* Sub-visual */
  .sub_visual { height: 220px; padding-bottom: 40px; }
  .sub_visual h2,
  .sub_visual .sub_title h2 { font-size: 24px !important; }
  .sub_visual p,
  .sub_visual .sub_title p { font-size: 12px; }

  /* Main visual */
  .visual_ul li .txt_box h3 { font-size: 22px; line-height: 30px; }
  .visual_ul li .txt_box span { font-size: 12px; }
  .visual_ul li .txt_box { bottom: 30%; }

  /* Main about */
  .main_about { padding: 50px 0 40px; }
  .main_title h3 { font-size: 22px; line-height: 30px; }
  .about_box .icon { width: 55px; height: 52px; margin-right: 20px; }
  .about_box dl dt { font-size: 18px; }
  .about_box dl dd { font-size: 14px; line-height: 22px; }

  /* Main product */
  .prd_sc .main_title h3 { font-size: 28px !important; }
  .prd_sc .main_title p { font-size: 14px; }
  .prd_cont .info dt { font-size: 20px; }
  .prd_cont .img_box { height: 220px !important; }

  /* Main news */
  .main_news { padding: 40px 0 60px; }
  .news_container .thumb { height: 180px; }
  .news_container .txt { margin-top: 20px; }
  .news_container .txt strong { font-size: 16px; }

  /* Main contact */
  .main_contact .bnr_box { height: auto; min-height: 380px; padding: 40px 0; }
  .main_contact .loc_box { height: 300px; }
  .main_contact .main_title h3 strong { font-size: 28px !important; }

  /* Garment */
  .sub_garment h3 { font-size: 24px; }
  .garment_map .map_box { min-height: 250px; aspect-ratio: 4 / 3; }
  .garment_map .map_box .loc_box a { font-size: 11px; }
  .garment_map .map_box .loc_box a::before { width: 14px; height: 21px; margin-right: 4px; }

  /* Fabric */
  .sub_fabric .fabric_tab li + li { margin-left: 10px; }
  .sub_fabric .fabric_tab li span { font-size: 14px; }
  .sub_fabric .fabric_title { font-size: 24px; margin-bottom: 30px; }
  .sub_fabric_cont .txt_box h4 { font-size: 22px !important; }
  .sub_fabric_cont .txt_box .step { font-size: 13px; padding: 6px 16px; }
  .sub_fabric_cont .txt_box p { font-size: 14px; }
  .library_point .img_box { flex-direction: column; gap: 15px; }
  .library_point .img_box .img:first-child,
  .library_point .img_box .img:last-child { width: 100% !important; }
  .sub_fabric_cont.system_point .system_img .img:first-child { width: 240px !important; height: 240px !important; }
  .sub_fabric_cont.system_point .system_img .img:last-child { width: 120px !important; height: 210px !important; left: 50% !important; }
  .fabric_lineup .prd_list .material_list ul { grid-template-columns: repeat(3, 1fr) !important; }
  .fabric_product .featured_list > li .txt_box h4 { font-size: 24px; }

  /* Customers */
  .sub_customers .intro .sub_title h3 { font-size: 22px; }
  .sub_customers .brand .sub_title h3 { font-size: 22px; }
  .sub_customers .brand .logo_list li { width: calc(50% - 10px); margin-right: 10px; border-radius: 8px; }
  .sub_customers .brand .logo_list li:nth-child(3n) { margin-right: 10px; }
  .sub_customers .brand .logo_list li:nth-child(2n) { margin-right: 0; }
  .sub_customers .brand .logo_list li:nth-child(n+3) { margin-top: 10px; }

  /* Own Brand */
  .mmww_box p br { display: none; }
  .mmww_box .img_box { margin-top: 40px; }
  .mmww_box .img_box li { width: calc(50% - 20px); }
  .mmww_box .img_box li:nth-child(2) { transform: translateY(-15px); }
  .mmww_box .img_box li:nth-child(4) { transform: translateY(-15px); }
  .mmww_box a { width: 200px; height: 56px; font-size: 15px; }

  /* Contact form */
  .board_write .input_s { border-radius: 12px; }
  .board_write .input_m { border-radius: 12px; }
  .board_write .input_l { border-radius: 12px; }
  .board_write .textarea_l { border-radius: 12px; }
  .captcha_q { min-width: 120px; height: 44px; font-size: 16px; letter-spacing: 2px; }
  .captcha_refresh { width: 36px; height: 36px; }

  /* Board gallery - News: override all nth-child margin rules from 768px */
  .board_gallery > li { width: 100% !important; margin-right: 0 !important; }
  .board_gallery > li:nth-child(n) { margin-right: 0 !important; }
  .board_gallery > li:nth-child(n+2) { margin-top: 20px; }
  .board_gallery .txt_info { padding: 25px 20px 55px; }
  .board_gallery .txt_info:has(.date) { padding: 20px 20px; }

  /* Board gallery02 - Sustainability: 1 column on mobile */
  .board_gallery02 > li { width: 100% !important; margin-right: 0 !important; margin-bottom: 20px; }
  .board_gallery02 > li:nth-child(4n) { margin-right: 0 !important; }
  .board_gallery02 > li:nth-child(2n) { margin-right: 0 !important; }
  .board_gallery02 .thumb { border-radius: 16px; }
  .board_gallery02 .txt_info .board_tit strong { font-size: 17px; }

  /* Search */
  .search_wrap { padding: 30px 0 20px; }
  .search_wrap .search_sel select { height: 44px; font-size: 14px; }
  .search_wrap .input_text { height: 44px; font-size: 14px; }
  .search_wrap .seach_btn { width: 44px; height: 44px; }

  /* Sub menu */
  .submenu { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .submenu li { flex-shrink: 0; }
  .submenu li a { padding: 10px 12px; font-size: 14px; white-space: nowrap; }

  /* Pagination */
  .board_paging { padding: 30px 0 50px; }
  .paging_wrap { gap: 4px; }
  .paging_wrap a, .paging_wrap strong { width: 32px; height: 32px; font-size: 13px; }

  /* Footer */
  #footer { padding: 25px 0 30px !important; }
  #footer .ft_gnb li + li::before { margin: -3px 8px 0; }
  #footer .info_box .info span { font-size: 11px !important; }

  /* History */
  .sub_history .his_list > li { padding-left: 20px; }
  .sub_history .his_list .year { font-size: 20px; width: 65px; }
  .sub_history .his_list .info { width: calc(100% - 65px); }
  .sub_history .his_list .info dl dt { font-size: 14px; }
  .sub_history .his_list .info dl dd { font-size: 13px; }

  /* Header */
  .hd_logo a { width: 140px !important; height: 36px !important; }
  .lang_selector select { font-size: 11px; padding: 3px 6px; }

  /* Business Map - smaller phone */
  .sub_organiztion .chart::before { font-size: 40px !important; }
  .sub_organiztion .chart .logo { width: 120px !important; height: 120px !important; border-width: 8px !important; }
  .sub_organiztion .chart .logo span { padding: 10px !important; }
  .sub_organiztion .value .title { width: 180px !important; height: 180px !important; }
  .sub_organiztion .value .title dl dd { font-size: 18px !important; }
  .sub_organiztion .value .title dl dt { font-size: 11px !important; }
  .sub_organiztion .val_list li { width: 140px !important; height: 140px !important; }
  .sub_organiztion .val_list li dl dd { font-size: 14px !important; }
  .sub_organiztion .val_list li dl dt { height: 36px !important; }
  .sub_organiztion .val_list li dl dt img { max-width: 36px !important; }
}

/* --- 360px: Extra Small Mobile (Galaxy S etc.) --- */
@media screen and (max-width: 400px) {
  .w_custom { padding: 0 12px; }

  /* Header */
  .hd_logo a { width: 120px !important; height: 32px !important; }
  .hd_right { gap: 10px; }
  .menu-trigger { width: 26px; height: 20px; }

  /* Sub-visual */
  .sub_visual { height: 180px; padding-bottom: 30px; }
  .sub_visual h2,
  .sub_visual .sub_title h2 { font-size: 20px !important; letter-spacing: -0.5px; }

  /* Main visual */
  .visual_ul li .txt_box h3 { font-size: 18px; line-height: 26px; }
  .main_title h3 { font-size: 20px; line-height: 28px; }
  .main_about { padding: 40px 0 30px; }
  .about_box { margin-top: 40px; }
  .about_box ul li { padding: 0 20px 0 0; margin-bottom: 20px; }
  .about_box .icon { width: 45px; height: 42px; margin-right: 15px; }
  .about_box dl dt { font-size: 16px; }
  .about_box dl dd { font-size: 13px; line-height: 20px; }

  /* Product */
  .prd_sc .main_title h3 { font-size: 24px !important; }
  .prd_cont .img_box { height: 180px !important; border-radius: 12px !important; }
  .prd_cont .info dt { font-size: 18px; }

  /* News */
  .news_container .thumb { height: 150px; border-radius: 12px; }
  .news_container .txt strong { font-size: 14px; }

  /* Contact */
  .main_contact .bnr_box { height: auto; min-height: 300px; padding: 35px 0; }
  .main_contact .bnr_box .cont { padding: 0 20px; }
  .main_contact .loc_box { height: 250px; }

  /* Garment */
  .sub_garment h3 { font-size: 20px; }
  .garment_map .map_box .loc_box a { font-size: 10px; }

  /* Fabric */
  .sub_fabric .fabric_tab li + li { margin-left: 6px; }
  .sub_fabric .fabric_tab li span { font-size: 12px; }
  .sub_fabric .fabric_title { font-size: 20px; }
  .sub_fabric_cont .txt_box h4 { font-size: 20px !important; }
  .sub_fabric_cont .exp_table th,
  .sub_fabric_cont .exp_table td { font-size: 12px; padding: 8px 5px; }
  .system_point .system_box > .img { width: 150px; }
  .system_point .system_box > .img img { width: 150px; }

  /* Customers */
  .sub_customers .intro .sub_title h3 { font-size: 20px; }
  .sub_customers .brand .sub_title h3 { font-size: 20px; }

  /* Board gallery */
  .board_gallery02 > li { width: 100% !important; margin-right: 0 !important; margin-bottom: 16px; }
  .board_gallery02 .txt_info .board_tit strong { font-size: 16px; }
  .board_gallery .txt_info .board_tit strong { font-size: 16px; }

  /* Contact form */
  .board_write table th { font-size: 14px; }
  .board_btn { margin-top: 30px; }
  .btn_ok { width: 140px; height: 52px; line-height: 52px; font-size: 16px; border-radius: 26px; }

  /* Sub content */
  .sub_cont { padding: 0; }
  .sub_title h3 { font-size: 24px; }

  /* Footer */
  #footer .ft_gnb li a { font-size: 11px; }
  #footer .ft_gnb li + li::before { margin: -3px 6px 0; }
  #footer .info_box .info span { font-size: 10px !important; line-height: 20px !important; }
  #footer .info_box .copy { font-size: 10px; margin-top: 16px; }

  /* Aside */
  .aside_box { padding: 20px; }
  .aside_lnb h3 { font-size: 16px; padding-left: 30px; }
  .aside_lnb h3::before { width: 20px; margin-left: -30px; margin-right: 10px; }
  .slidemenu .lnb_dep1 span { font-size: 16px; }
  .slidemenu .lnb_dep2 a { font-size: 12px; }
  .slidemenu > li { padding: 10px 0; }

  /* Business Map - extra small phone */
  .sub_organiztion .chart::before { font-size: 30px !important; }
  .sub_organiztion .chart .logo { width: 100px !important; height: 100px !important; border-width: 6px !important; }
  .sub_organiztion .orga_list > li ol li { height: 50px !important; font-size: 15px !important; }
  .sub_organiztion .orga_list > li ol li + li { font-size: 13px !important; }
  .sub_organiztion .value .title { width: 160px !important; height: 160px !important; }
  .sub_organiztion .value .title dl dd { font-size: 16px !important; }
  .sub_organiztion .val_list li { width: 120px !important; height: 120px !important; }
  .sub_organiztion .val_list li dl dd { font-size: 13px !important; }
  .sub_organiztion .val_list li dl dt { height: 30px !important; }
  .sub_organiztion .val_list li dl dt img { max-width: 30px !important; }

  /* MMMW */
  .mmww_box p { font-size: 14px; line-height: 24px; }
  .mmww_box p br { display: none; }
  .mmww_box .img_box { margin-top: 30px; }
  .mmww_box .img_box li:nth-child(2) { transform: translateY(-10px); }
  .mmww_box .img_box li:nth-child(4) { transform: translateY(-10px); }
  .mmww_box a { width: 180px; height: 50px; font-size: 14px; border-radius: 25px; }

  /* Garment */
  .garment_map .map_box { min-height: 220px; }
  .garment_map .map_box .loc_box a { font-size: 10px; }
  .garment_map .map_box .loc_box a::before { width: 12px; height: 18px; margin-right: 3px; }
}

/* aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 4 / 3) {
  @media screen and (max-width: 768px) {
    .garment_map .map_box { height: auto; padding-bottom: 75%; }
  }
}