@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');



/* 초기화 */
* {margin: 0; padding:0; box-sizing: border-box}
html {overflow-y:scroll; scroll-behavior: smooth;}
body {font-size:1em; font-family: "Google Sans Flex", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;background:#fff; letter-spacing: -0.5px; min-width: 1720px}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul,li,dl,dt,dd {list-style:none}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button { font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer; outline: none; border: 0; background: transparent; font-family: inherit}

textarea, select {font-size:1em}
select {margin:0}
p {word-break:break-all}
b {font-weight: 600}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft {min-width:1200px}


/* 공통 - display none/block */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }


/* 공통 - 뷰포트 (pc / mobile) 별 display none/block */
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; }}
.mobile-only { display: block; }
@media (min-width: 769px) { .mobile-only { display: none !important; }}


/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}


/* 인트로페이지 */
#intro {position: fixed; inset: 0; z-index: 200000; background: #0a1223; opacity: 0; visibility: hidden; pointer-events: none;transition: opacity .65s ease, visibility 0s linear .65s; will-change: opacity}
#intro.is-active {opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease, visibility 0s linear 0s}
#intro.is-closing {opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .65s ease, visibility 0s linear .65s}
#intro:not(.is-active) {z-index: -1}

/* 인트로 동안 스크롤 잠금 */
html.is-intro-open, html.is-intro-open body { overflow: hidden; }

/* 가운데 정렬 */
#intro .intro-inner {height: 100%; display: grid; place-items: center; text-align: center; padding: 24px}
#intro .intro-title {color: #fff; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; font-size: clamp(34px, 4.2vw, 4.5em)}

/* ===== Mask Reveal ===== */
#intro .reveal {display: inline-block; overflow: hidden; vertical-align: middle}
#intro .chunk {display: inline-block; transform: translateY(110%);  opacity: 1;  will-change: transform}

/* 인트로 활성화 시 기본 애니메이션 */
#intro.is-active .chunk {animation: revealUp .85s cubic-bezier(.2,.7,.2,1) forwards}

/* 순차 딜레이(스태거) */
#intro.is-active .chunk.t1{ animation-delay: .10s; }
#intro.is-active .pill-idea{ animation-delay: .26s; }
#intro.is-active .chunk.t2{ animation-delay: .40s; }
#intro.is-active .pill-hand{ animation-delay: .56s; }
#intro.is-active .chunk.t3{ animation-delay: .70s; }

@keyframes revealUp{
  to { transform: translateY(0); }
}

/* 캡슐(이미지)은 살짝 pop 느낌 */
#intro .pill {width: clamp(160px, 18vw, 250px); height: clamp(46px, 5vw, 70px); border-radius: 999px; margin: 0 .16em; vertical-align: -0.18em; background-size: cover; background-position: center; transform: translateY(110%) scale(.92)}
#intro.is-active .pill {animation-name: revealPop}

@keyframes revealPop{
  to { transform: translateY(0) scale(1)}
}

/* 캡슐 이미지 경로(너 파일명으로 변경) */
.pill-idea {background: url("/img/main/intro_txt_img1.jpg") center no-repeat}
.pill-hand {background: url("/img/main/intro_txt_img2.jpg") center no-repeat}


/* ===== Intro 연출 준비 상태(메인에서만 JS가 붙임) ===== */

/* 헤더 숨김 */
html.intro-on #hd {opacity: 0; transform: translateY(-10px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; position: relative}

/* 비디오영역(텍스트 포함) 가운데로 접힌 상태 */
html.intro-on .hero-video {opacity: 0; clip-path: inset(0 50% 0 50% round 0px);
  transform: scale(0.985); transition: clip-path .95s cubic-bezier(.2,.7,.2,1), opacity .45s ease, transform .95s cubic-bezier(.2,.7,.2,1); will-change: clip-path, opacity, transform}

/* ===== Reveal 시작 ===== */
html.is-reveal #hd {opacity: 1; transform: translateY(0)}
html.is-reveal .hero-video {opacity: 1; clip-path: inset(0 0 0 0 round 0px); transform: scale(1)}
html.intro-on .hero-video,
html.is-reveal .hero-video {position: relative; z-index: 1}


/* 상단 레이아웃 */
#hd {height: 100px; line-height: 100px; position: relative; z-index: 1; background: #fff;   transition: box-shadow .25s ease, transform .25s ease}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#hd.is-fixed {position: fixed; top: 0; left: 0; right: 0; z-index:999; border-bottom: 1px solid #ddd}
body.has-fixed-header {padding-top: 110px}

/* logo */
#logo {position: absolute; top: 0; left: 5%; z-index: 2}
#logo a {display: block}
#logo a img {height: 30px; width: auto}

/* 메인메뉴 */
#gnb {position: relative; width: 100%; z-index: 1}
.gnb_wrap {position: relative; padding: 0 20%}

/* 1뎁스 */
#gnb_1dul { display:flex; align-items:center; justify-content:center; gap:0; }
#gnb_1dul .gnb_1dli { flex: 1; text-align:center; }
#gnb_1dul .gnb_1da {display:block; position: relative; color: #111; font-weight: 500}
.gnb_1dli:hover .gnb_1da,
.gnb_1dli.is-active .gnb_1da {color: #27439b}

.gnb_1dli:hover .gnb_1da::after,
.gnb_1dli.is-active .gnb_1da::after {content: ""; position: absolute; left: 0; right: 0; bottom:0;  height: 3px; background: #27439b}

/* 메가패널 */
.gnb_mega {display:none; position:absolute; left:0; top:100%; width:100%; background:#fff; border-top:1px solid #eee; border-bottom: 1px solid #eee; padding: 0 20%; z-index: 9999}
#gnb.is-open .gnb_mega {display:block}

/* 컬럼: 1뎁스 개수만큼 자동으로 */
.gnb_mega_inner {display:grid; grid-auto-flow: column; grid-auto-columns: 1fr}

/* 각 컬럼 */
.gnb_col {padding: 24px 0; border-left: 1px solid #f2f2f2; min-height: 220px}
.gnb_col:first-child {border-left:0}
.gnb_2da {display: block; text-align: center; white-space: nowrap; line-height: 50px}
.gnb_2da:hover {font-weight: 500}

/* (옵션) hover한 1뎁스에 해당하는 컬럼만 살짝 강조 */
.gnb_col.is-active {background:#fafafa}

#t_link {position: absolute; top: 0; right: 5%; z-index: 2}
#t_link > div {display: inline-block; vertical-align: middle}
#t_link .lang_btn {position: relative}
#t_link .lang_btn .lang_depth1 {width: 50px; height: 50px; display: block; border: 1px solid #000; border-radius: 50%; text-align: center; line-height: 50px; font-size: 1.3em}
#t_link .lang_btn .lang_list {display: none}
#t_link .lang_btn .lang_list.is-open {display: block; position: absolute; top: 55px; left: 0; width: 50px; height: auto; text-align: center; border-radius: 25px; background: #27439b; padding: 10px 0}
#t_link .lang_btn .lang_list li {line-height: 40px}
#t_link .lang_btn .lang_depth2 {color: #fff; font-size: 0.85em}
#t_link .inquiry {margin-lefT: 10px}
#t_link .inquiry a {background: #27439b; height: 50px; line-height: 50px; display: block; padding: 0 30px; text-align: center; color: #fff; border-radius: 25px; font-weight: 500}


/* 중간 레이아웃 */
#wrapper {}
#container_wr:after {display:block;visibility:hidden;clear:both;content:""}
#container {position:relative}


/* 하단 레이아웃 */
#footer_wrap {background: #101010; padding: 5%; position: relative}
#top_btn {position: fixed; bottom: 100px; right: 5%; z-index: 200000; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease}
#top_btn.is-visible {opacity: 1; visibility: visible; transform: translateY(0)}
#top_btn.is-footer {bottom: 450px}
#top_btn button {display: block; widtH: 60px; height: 60px; line-height: 60px; background: rgba(39,67,155,0.9); font-size: 1.5em; color: #fff; border-radius: 10px; transition: all 0.3s ease;}
#top_btn button:focus,
#top_btn button:hover {background: rgba(39,67,155,1)}
.ft_wr {position: relative; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.2)}
.ft_list_l {display: inline-block}
.ft_list_l li {display: inline-block; vertical-align: middle; margin-right: 10px}
.ft_list_l li:first-child {margin-right: 50px}
.ft_list_l li img {height: 40px}

.ft_list_r {display: inline-block; position: absolute; bottom: 20px; right: 0}
.ft_list_r li {display: inline-block; vertical-align: middle; color: #fff}
.ft_list_r li:first-child {margin-right: 60px}
.ft_list_r li p {font-size: 1.1em}
.ft_list_r li b {font-size: 1.875em}

#ft_wr2 {margin-top: 30px; color:#fff; position: relative}
.ft_info {display: inline-block; width: 40%}
.ft_info dl{display: grid; grid-template-columns: 107px 1fr; gap: 24px; align-items: start; line-height: 2}
.ft_info dt{font-weight: 600}
.ft_info .dt-spread{display: flex; justify-content: space-between; width: 100%}

.ft_extenal_link {position: absolute; top: 0; right: 0; z-index: 1}
.ft_extenal_link .drop_down {width: 240px; height: 45px;line-height: 45px}
.ft_extenal_link .drop_down p {padding: 0 20px; border: 1px solid #ddd; cursor: pointer}
.ft_extenal_link .drop_down p > i {font-size: 1.6em; float: right}
.ft_extenal_link .drop_down_list {border: 1px solid #fff; margin-top: -1px; display: none}
.ft_extenal_link .drop_down_list li a {color: #fff; padding: 0 20px; font-size: 0.85em; display: block}

.ft_sns {position: absolute; bottom: 0; right: 0}
.ft_sns ul {display: flex; gap: 15px; align-items: center}
.ft_sns ul li {flex: 1}
.ft_sns ul li a {display: block}
.ft_sns ul li a img {width: 35px; height: auto}

.copyright {margin-top: 50px; opacity: 0.5}
.copyright a {color: #fff}

/* 메인페이지 공통*/
.main-section {position: relative}
.main-section .section-inner {width: 90%; margin: 200px auto}
.eyebrow {margin-bottom: 30px; font-size: 1.125em; font-weight: 700; line-height: 1}
.hero-title {font-size: 3.75em; letter-spacing: -2px; font-weight: 800; line-height: 1.2}
.more-btn {font-weight: 600; margin-top: 50px; display: inline-block; letter-spacing: 0}

/* 메인 비디오 영역 */
.hero-video {position: relative; width: 90%; height: 85vh; overflow: hidden; margin: 0 auto 5%; border-radius: 20px; overflow: hidden}
.hero-video__video {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 1}
.hero-video__overlay {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2}
.hero-video__content {position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center}

.hero-video__content img {height: 50px; width: auto}
.hero-video__content p {font-size: 2.125em; color: #fff; margin-bottom: 20px}

/* 회사소개 */
.about-hero {width: 90%; margin: 200px auto}
.about-head {padding: 0 10%}
.about-head .hero-title {line-height: 1.5}
.about-head .hero-title span,
.about-head .more-btn {color: #fff}
.about-img {width: 100%; height: 350px; background: url(../img/main/main_area1_bg.jpg) center 65% no-repeat; border-radius: 175px; background-size: cover; background-attachment: fixed; margin-top: -10%; z-index: -1; position: relative}


/* 제품소개 */
.products-layout{width: 90%; margin: 0 auto}
.main-products{position: relative; overflow: hidden}
.products-split{position: absolute; inset: 0; background: linear-gradient(to right, #ffffff 0 50%, #f3f3f3 50% 100%); z-index: 0}

.products-layout{position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 360px; /* 왼쪽(슬라이드 영역) + 오른쪽 탭 */ gap: 40px; align-items: center}
.products-stage{min-width: 0; /* swiper overflow 방지 */}

/* 한 슬라이드 내부: 왼쪽 텍스트 + 가운데 이미지 */
.product-slide{display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; align-items: center}

.product-slide__title{font-size: 4.375em; line-height: 1; font-weight: 800; letter-spacing: -2px}
.product-slide__desc {margin: 50px 0; font-size: 1.125em; color: #222; line-height: 1.6; word-break: keep-all;}
.product-slide__actions {display: flex; gap: 12px; flex-wrap: wrap}

.product-slide__figure{margin: 0; display: grid; place-items: center}
.product-slide__figure img{width: min(520px, 100%);height: auto;display: block;filter: drop-shadow(0 18px 26px rgba(0,0,0,.12))}

/* 오른쪽 탭 */
.products-nav__btn {display: block; font-size: 0.9em; line-height: 60px; border-bottom: 1px solid #ddd; width: 100%; text-align: left; padding-left: 25px; transition: color .2s ease; position: relative}
.products-nav__btn::before {content: "";position: absolute;left: 10px;top: 50%; width: 5px;height: 5px;transform: translateY(-50%);background: transparent}
.products-nav__btn.is-active {color: #27439b;font-weight: 600}
.products-nav__btn.is-active::before {background: #27439b}
.products-nav__btn:hover {color: #27439b}

/* 사업영역 */
.main-business .business-head {margin-bottom: 80px}
.main-business .business-head .hero-title {line-height: 1.2}

.biz-mosaic{display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 320px; gap: 18px; align-items: stretch}
.biz-tile{position: relative; display: block; text-decoration: none; background: transparent}

/* non-bleed cards clip all */
.biz-tile:not(.is-bleed){overflow: hidden}

/* bleed cards: allow top overflow */
.biz-tile.is-bleed{overflow: visible}

/* clip wrapper (for bleed cards only) */
.biz-tile__clip{position: relative; width: 100%; height: 100%; overflow: visible}

/* media */
.biz-tile__media{position: absolute; inset: 0; transition: all 0.45s ease-in-out}
.biz-tile__media img {width: 100%; height: 100%; object-fit: cover; object-position: center;display: block}

/* bleed image (transparent PNG) */
.biz-tile__img.bleed{position: absolute; left: 0; right: 0; bottom: 0;top: -31px; height: calc(100% + 31px); width: 100%; object-fit: cover; object-position: center bottom}
.biz-tile--hip .biz-tile__img.bleed {top: -61px; height: calc(100% + 61px)}
.biz-tile__top{position: absolute; left: 30px; right: 30px; top: 30px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px}

.biz-tile__label {font-size: 1.5em; font-weight: 600; color: #fff}
.biz-tile__arrow {font-size: 1.5em; line-height: 35px; color: #fff; opacity: .95}

/* 밝은 이미지용(검정 텍스트) */
.biz-tile.is-light .biz-tile__label,
.biz-tile.is-light .biz-tile__arrow{color: #111}

/* Placement (exact ratio) */

/* 초임계 : 850 x 320 */
.biz-tile--scf{grid-column: 1 / span 2; grid-row: 1}

/* 발전 플랜트 : 415 x 660 */
.biz-tile--power{grid-column: 3; grid-row: 1 / span 2; overflow: visible}

/* 압력용기 : 415 x 320 */
.biz-tile--vessel{grid-column: 4; grid-row: 1}

/* 화학 & 재료 : 415 x 320 */
.biz-tile--chem{grid-column: 1; grid-row: 2}

/* 열간 정수압 : 415 x 320 */
.biz-tile--hip{grid-column: 2; grid-row: 2}

/* 엔지니어링 : 415 x 320 */
.biz-tile--eng{grid-column: 4; grid-row: 2}


/* 사업영역 */
.main-esg {width: 100%; background: url('../img/main/main_area_esg_bg.jpg') center top no-repeat; background-size: contain; padding: 200px 0}
.main-esg .section-inner {margin: 0 auto; text-align: center}
.main-esg .main-esg-head {color: #fff}
.main-esg .main-esg-head .more-btn {margin-top: 100px}

.esg-list {width: 100%; max-width: 1060px; margin: 70px auto 0}
.esg-ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; align-items: start}
.esg-li {position: relative; height: 490px; overflow: hidden; background: #000; border-radius: 30px}
.esg-li::before {content:""; position:absolute;inset:0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index:0; transform: scale(1); transition: all 0.3s ease}
.esg-li:hover:before {transform: scale(1.2)}
.esg-li.li02 {transform: translateY(40px)}
/* 카드별 이미지 지정 */
.esg-li.li01::before {background-image: url("../img/main/main_area_esg_img1.jpg")}
.esg-li.li02::before {background-image: url("../img/main/main_area_esg_img2.jpg")}
.esg-li.li03::before {background-image: url("../img/main/main_area_esg_img3.jpg")}

/* 어두운 오버레이 */
.esg-li::after {content:""; position:absolute; inset:0; background: rgba(0,0,0,.75); z-index:1}

/* 내부 콘텐츠 */
.li-inner {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; z-index: 2; color: #fff}
.li-inner h2 {font-size: 2.25em; margin-bottom: 40px; line-height: 1}
.li-inner p {font-size: 1.125em; word-break: keep-all; text-align-last: center; line-height: 1.4}

/* 뉴스 */
.main-news .section-inner {margin-top: 100px}
.news .news-head {position: relative; margin-bottom: 80px}
.news .news-head > a {position: absolute; bottom: 0; right: 0}

/* 서브페이지 시작 */

/* sub page - 공통 */
.sub_title {width: 90%; margin: 150px auto 100px; text-align: center}
.sub_title h2 {font-size: 3.75em; font-weight: 800; letter-spacing: -1px}
.sub_title .desc {font-size: 1.5em; margin: 100px 0}
.sub_nav {background: #f8f8f8; display: inline-block; padding: 20px 50px; border-radius: 50px; margin-top: 30px}
.sub_nav span {display: inline-block; vertical-align: middle; font-size: 1em}
.sub_nav span.depth1 {color: #777}
.sub_nav span.depth2 {font-weight: 500}

.sub_visual {width: 90%; margin: 0 auto}
.sub_visual img {width: 100%}

#sub_content {padding: 200px 0}
#sub_content .inner{width: 100%; padding: 0 5%}
#sub_content .inner hr {display: block; margin: 150px 0; border: 0; height: 1px; background: #ddd}

.sec-head {margin-bottom: 60px}
.sec-head.center {text-align: center}
.sec-head .sec-title {font-size: 3.75em; font-weight: 800; line-height: 1.3; letter-spacing: -1px;}
.sec-head .sec-sub {font-size: 1.5em; line-height: 1.7; letter-spacing: -1.5px; font-weight: 300; margin-top: 30px}
.sec-head .sec-bg-txt {padding: 50px; background: #f9f9f9; border-radius: 30px; margin-top: 30px}
.sec-head .sec-bg-txt p {font-size: 21px; line-height: 1.7; letter-spacing: -1px; text-align: justify; word-break: keep-all}

.btn-wrap {widtH: 100%; text-align: center}
.btn-wrap .viewmore {font-size: 0.9em; background: #222; color: #fff; min-width: 200px; text-align: left; padding: 20px; border-radius: 5px; transition: all 0.4s ease}
.btn-wrap .viewmore > i {float: right}
.btn-wrap .viewmore:hover {background: #111}

/* 회사소개 */
.visual-container {width: 100%; height: 100vh; position: relative; background: #fff}
.expanding-visual { width: 85%; height: 500px; margin: 0 auto; border-radius: 50px; background: url('../img/sub/company_bg.jpg') no-repeat center top/cover; position: sticky; top: 50px; overflow: hidden; display: flex;align-items: center; justify-content: center; transition: width 0.1s linear,  height 0.1s linear,  border-radius 0.1s linear, top 0.1s linear}

.expanding-visual::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: var(--dim-opacity, 0); z-index: 1}

/* 이미지 위 텍스트 */
.overlay-text {position: relative; z-index: 2; color: #fff; text-align: center;opacity: 0;transform: scale(0.8) translateY(20px); transition: all 0.4s ease-out}
.overlay-text h2 {font-size: 7.5em; font-weight: 800; line-height: 1}
.overlay-text p { font-size: 3em; margin-top: 20px}

/* 이미지 확장 시 */
.expanding-visual.full {width: 100%; height: 100vh; border-radius: 0; top: 0}
.expanding-visual.full::after {opacity: 1}
.expanding-visual.full .overlay-text {opacity: 1; transform: scale(1)}

.company-info {min-height: 100vh; padding: 200px 5%}
.company-info .brand-text {margin-bottom: 100px}
.company-info .brand-text h3 {font-size: 1.5em; color: #27439b; margin-bottom: 50px}
.company-info .brand-text p {font-size: 1.5em; line-height: 1.6;}
.company-info .stats-grid {display: flex; gap: 50px; align-items: start}
.company-info .stat-item {position: relative}
.company-info .stat-item:before {content:''; width: 50px; height: 50px; background: #c3f0ff; border-radius: 50%; position: absolute; top: 10px; left: -10px; z-index: -1}
.company-info .stat-item .num {font-size: 7.5em; font-weight: 900}
.company-info .stat-item .unit {font-size: 1.8em; font-weight: 600}
.company-info .stat-item p {font-size: 1.125em; font-weight: 500; letter-spacing: -1px}


/* 비전&미션 */
.vm-container .vm-item {width: 100%; height: 100vh; text-align: center; display: grid; align-items: center}
.vm-container .vision {background: url(../img/sub/vision_bg.jpg) center top no-repeat;}
.vm-container .mission {background: url(../img/sub/mission_bg.jpg) center top no-repeat;}
.vm-container .vm-text {color: #fff}
.vm-container .vm-text h4 {font-size: 1.5em; letter-spacing: 0}
.vm-container .vm-text h2 {font-size: 3em; font-weight: 800; line-height: 1.2; margin: 40px 0}
.vm-container .vm-text p {font-size: 1.5em}

/* 인증현황 */
.certified {padding: 200px 5%}
.cert-header h2 {font-size: 48px; font-weight: 800; line-height: 1.3; margin-bottom: 100px; word-break: keep-all; text-align: center; letter-spacing: -1px}
.cert-grid {display: grid;  grid-template-columns: repeat(5, 1fr); gap: 15px}
.cert-card {background: #f9f9f9; border-radius: 15px; padding: 30px 25px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; min-height: 140px}

/* ISO 인증 카드처럼 길게 쓸 경우 (필요 시) */
.cert-card.double-width {grid-column: span 2}
.card-title {font-size: 1.2em; font-weight: 600; color: #333; margin-bottom: 20px}
.card-value {font-size: 1.5em; font-weight: 500}
.card-value strong {font-size: 3.75em; font-weight: 800;margin-right: 2px}

/* 텍스트가 긴 인증 항목용 스타일 */
.card-value.small-text {font-size: 40px; font-weight: 800}

/* 연혁 */
.history_container {display: grid; grid-template-columns: repeat(2, 1fr); align-items: start}
.history-tabs {display:flex; flex-direction:column; gap: 50px; position: sticky; top: 200px; height: fit-content; padding: 0 0 200px 5%}

.tab { width:100%; text-align:left; border:0; background:transparent; padding: 14px 0; cursor:pointer}
.tab .tab-on {display:none}
.tab .tab-off {display: block; color: #777; font-size: 2.25em; font-weight: 500; letter-spacing: -2px}
.tab.is-active .tab-off {display:none}
.tab.is-active .tab-on {display:block}
.tab .tab-on strong {font-size:3.75em; font-weight:800; letter-spacing:-2px; line-height:1.2}
.tab .tab-on p {margin-top:20px; font-size:1.125em; color:#777}

.history-contents {height: 100%}
.history-panel {display:none; scroll-margin-top: 200px}
.history-panel.is-active {display:block}
.history-panel ol.timeline {padding-left: 100px; position: relative}
.history-panel ol.timeline::before {content:''; position:absolute; left: 0; top:0; width:2px; height:100%; background:#ddd}
.history-panel ol.timeline > .year {position: relative; margin-bottom: 80px}
.history-panel ol.timeline > .year:last-child {margin-bottom: 0}
.history-panel ol.timeline > .year h3 {font-size: 3.75em; color:#27439b; margin-bottom: 20px; position: relative; }
.history-panel ol.timeline > .year h3::before {content: ""; position: absolute; left: -113px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: url(../img/sub/his_dot.png) center no-repeat;}
.year ul li {display: flex; gap: 16px; line-height: 50px}
.year ul li.img {width: 50%; height: auto; margin-top: 50px; border-radius: 30px; overflow: hidden}
.year ul li.img > img {width: 100%}
.year ul li .month {width: 32px; font-size: 1.3em; font-weight: 600}
.year ul li .txt {font-size: 1.3em}

.mo-his-title {display: none}

/* CI소개 */
.ci-board {border: 1px solid #ddd; background:linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px) 0 0 / 20px 20px, #fff; padding: clamp(20px, 4vw, 50px); margin: 0 5%}

.ci-grid {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0px, 3vw, 0px); align-items: center}
.ci-item img {width: 100%; height: auto; display: block; object-fit: contain}
.ci-main {grid-column: 1 / -1; display: grid; place-items: center; text-align: center; padding-bottom: 50px; border-bottom: 1px solid #eee}
.ci-main img {max-width: min(760px, 100%)}
.ci-sub {display: grid; place-items: center; margin-top: 50px; text-align: center}
.ci-sub.ci-en {border-right: 1px solid #eee}
.ci-sub img {max-width: min(520px, 100%)}
.ci-caption {font-size: 1.125em; font-weight: 500; line-height: 1.4; color: #777; margin-bottom: 12px}
.ci-desc {margin: 100px 0; text-align: center}
.ci-desc p {font-size: 1.5em; line-height: 1.5}
.ci-actions {text-align: center; margin-bottom: 200px}

.brand-color__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 5%}
.color-card {min-height: clamp(210px, 22vw, 280px); padding: clamp(22px, 2.2vw, 32px); color: #fff; display: flex; flex-direction: column; justify-content: flex-start}
.color-card__name {font-size: 1.5em; letter-spacing: 1px; margin-bottom: 30px; line-height: 1}
.color-card__spec {font-size: 1.125em; line-height: 1.6; opacity: 0.92; letter-spacing: 0}
.color-card__hex {font-weight: 600; opacity: 1}

/* 개별 컬러 */
.color-card--blue  { background: #2a439c; }
.color-card--gray  { background: #606161; }
.color-card--black { background: #231f20; }


/* 서브-제품소개 공통*/
.product-container {margin: 100px 0 200px 0; padding: 0 5%; position: relative}
.prd-head {display: flex; align-items: center}
.prd-head .pr-thumb {width: 38%; background: #f3f3f3; border-radius: 30px; text-align: center; padding:80px 20px}
.prd-head .pr-thumb .swiper-button-next,
.prd-head .pr-thumb .swiper-button-prev {color: #000; width: 20px; height: 35px}
.pr_head_title {width: 62%; padding-left: 100px}
.pr_head_title h2 {font-size: 3.75em; letter-spacing: -2px; margin-bottom: 50px; line-height: 1}
.pr_head_title > p {font-size: 1.3125em; text-align: justify; word-break: keep-all; line-height: 1.6}
.pr_head_title .icon-group {margin: 60px 0}
.pr_head_title .icon-group ul {display: flex; align-items: center}
.pr_head_title .icon-group ul li {width: auto; padding: 0 50px; text-align: center; border-right: 1px dashed #ddd}
.pr_head_title .icon-group ul li:first-child {padding-left: 0}
.pr_head_title .icon-group ul li:last-child {padding-right: 0; border-right: 0}
.pr_head_title .icon-group ul li img {width: 50px; height: auto}
.pr_head_title .icon-group ul li p {font-size: 1.125em; font-weight: 500; line-height: 1.3; margin-top: 20px}
.pr_head_title .btn-group .num-box {border: 1px solid #27439b; display: inline-block; height: 50px; line-height: 48px; vertical-align: middle; overflow: hidden}
.pr_head_title .btn-group .num-box .tit {background: #27439b; display: inline-block; padding: 0 20px; color: #fff; font-weight: 600}
.pr_head_title .btn-group .num-box .num {display: inline-block; padding: 0 20px; color: #27439b}
.fix-btn-group {display: none}


.prd-body {margin: 150px 0}
.prd-body-title {margin-bottom: 80px}
.prd-body-title h3 {font-size: 36px; line-height: 1}
.prd-body-title h3 span {font-size: 16px; font-weight: 300; color: #f00; margin-left: 10px}
.prd-list {display: flex; align-items: stretch; justify-content: space-between; gap: 60px}
.prd-list.list02 {border-top: 2px dashed #ddd; padding-top: 30px; margin-top: 30px}
.prd-list > li {flex: 1; position: relative}
.prd-list > li:after {content:''; width: 1px; height: 100%; background: #ddd; position: absolute; top: 0; right: -30px}
.prd-list > li div {height: 100%; padding: 15px 0}
.prd-list > li:last-child:after {display: none}
.prd-list > li h4 {font-size: 1.5em; font-weight: 600; color: #27439b; line-height: 1; margin-bottom: 20px}
.prd-list > li p {font-size: 1.125em; line-height: 1.5; text-align: justify}
.prd-list > li .prd-sub-list {margin-top: 10px}
.prd-list > li .prd-sub-list > li {line-height: 1.7}
.prd-list > li .prd-sub-list > li span {font-weight: 500}
.prd-list.col-2 > li {width: 50%}


/* 제품소개 tab */
.prd-tabs li {display: inline-block; padding: 0 20px; font-size: 1em; font-weight: 300; color: #777; line-height: 45px; cursor:pointer; background: #f1f1f1; margin: 0 5px 8px 0; border-radius: 5px;}
.prd-tabs li.current {font-weight: 500; color: #fff; background: #27439b;}

.tab-content {display: none; margin-top: 30px}
.tab-content.current {display: block}

/* 제품소개 select box 모바일 전용 */
.prd-tabs-select {display: none;}

/* 테이블 디자인 */
.default-table {width: 100%; border-top: 2px solid #27439b; text-align: center; letter-spacing: 0}
.default-table.mobile {display: none}
.default-table thead th {background: #f8f8f8; padding: 15px; font-size: 1em; font-weight: 500; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd}
.default-table thead th:last-child {border-right: 0}
.default-table tbody th {background: #f8f8f8; font-size: 1em; font-weight: 500; padding: 10px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd}
.default-table tbody td {font-size: 1em; font-weight: 300; padding: 15px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; color: #555}
.default-table tbody td.v-top {vertical-align: top}
.default-table tbody td.nborder {border-right: 0}
.default-table tbody td > ul li {line-height: 1.7}
.default-table tbody td .t_inner_list li {position: relative; padding-left: 10px; text-align: left}
.default-table tbody td .t_inner_list li:before {content:'-'; position: absolute; top: 0; left: 0}


.prd-ordermade {display: flex; align-items: center}
.prd-ordermade > div {flex: 1}
.prd-notice {margin-top: 40px}
.prd-notice h4 {font-size: 1.125em; font-weight: 600; line-height: 1; margin-bottom: 10px}
.prd-notice h4 > i {color: #be0000; font-size: 1.2em; font-weight: 300}
.prd-notice .notice-list li {line-height: 2}
.prd-notice .notice-list li:before {content:'-'; margin-right: 5px}
.prd-notice .notice-list .point-txt {color:#f00}

/* 제품소개 - 옵션 및 악세사리 */
/* 공통 */
.option-head {margin: 70px 0}
h3.opt-tit {font-size: 1.75em; line-height: 1; margin-bottom: 20px}
h4.opt-sub-tit {font-size: 1.5em; line-height: 1; margin: 70px 0 30px 0}
p.opt-cmt {font-size: 1.125em; color: #333; line-height: 1.7; text-align: justify}
.opt-img {margin: 50px 0}
.opt-img.center {text-align: center}

.opt-grid-item {display: grid; grid-template-columns: repeat(2, 1fr) 2fr; grid-template-rows: repeat(2, 1fr); gap: 10px; width: 100%}
.opt-grid-item .col img,
.opt-grid-item .row-span img {width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid #ddd}
.opt-grid-item .row-span {grid-column: 3 / 4; grid-row: 1 / 3}

/* 모바일 대응: 화면이 작아지면 1열로 나열하거나 2열로 변경 */
@media screen and (max-width: 768px) {
    .opt-grid-item {
        grid-template-columns: repeat(2, 1fr); /* 모바일은 일단 2열 */
    }
    .opt-grid-item .row-span {
        grid-column: 1 / 3; /* 모바일에서는 큰 이미지가 아래쪽 가로를 꽉 채우게 */
        grid-row: auto;
    }
}

.opt-table {margin: 30px 0}
.opt-table .table-cmt {text-align: right; color: #d30000; margin-top: 20px}

/* 옵션 리스트 */
.opt-box-list {width: 100%; height: auto; overflow: hidden}
.opt-box-list .col {border: 1px solid #ddd; display: flex; align-items: stretch;}
.opt-box-list .col .box-inner {flex:1; border-right: 1px solid #ddd; text-align: center; padding: 20px}
.opt-box-list .box-inner img {width: 100%; height: auto}
.opt-box-list .box-inner h5 {font-weight: 500; color: #2743b9; line-height: 1.5; margin-top:20px}
.opt-box-list .box-inner p {font-size: 14px; font-weight: 300; line-height: 1.4; text-align: justify; margin-top: 20px}
.opt-box-list .box-inner.nborder {border-right: 0}


/* 옵션 리스트 박스 */
.opt-block-item ul li {border: 1px solid #ddd; padding: 30px; margin-bottom: 30px; display: flex; align-items: center}
.opt-block-item ul li .img {width: 20%; border: 1px solid #ddd}
.opt-block-item ul li .img > img {width: 100%; height: auto}
.opt-block-item ul li .txt {width: 80%; padding-left: 50px}
.opt-block-item ul li .txt h5 {font-size: 1.125em; font-weight: 500; color: #27439b; margin-bottom: 20px}
.opt-block-item ul li .txt h6 {font-size: 1em; font-weight: 500; margin-bottom: 10px}
.opt-block-item ul li .txt p {font-size: 1em; color: #333; text-align: justify; line-height: 1.7}

/* 옵션 텍스트 리스트 */
.opt-txt-list li {font-size: 1.125em; line-height: 2}
.opt-txt-list li:before {content:'·'; margin-right: 5px}

/* 옵션 이미지 리스트 */
.img-list {display: flex; margin-top: 30px}
.img-list li {margin-right: 10px}
.img-list li img {max-width: 170px}


/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px}
.copymove_currentbg {background:#f4f4f4}

/* 플랜트, 엔지니어링 */
.plant-head {display: table; width: 100%}
.plant-head > div {display: table-cell; vertical-align: top}
.plant-title {width: 35%; margin-bottom: 70px}
.plant-title h3 {font-size: 3em; font-weight: 800; letter-spacing: -2px}
.plant-head-content {width: 65%}
.plant-grid {display: grid; gap: 80px}
.plant-grid .grid-txt p {font-size: 1.3125em; font-weight: 300; line-height: 1.7; text-align: justify; letter-spacing: -0.7px}
.plant-grid .grid-txt p b {font-weight: 500}
.plant-grid .grid-img img {width: 100%}

.plant-inline-list > ul {display: flex; gap: 30px; justify-content: space-between}
.plant-inline-list > ul > li {flex: 1}
.plant-inline-list > ul > li h4 {font-size: 1.5em; font-weight: 600; letter-spacing: -1px; margin: 20px 0 10px 0}
.plant-inline-list > ul > li img {width: 100%; height: auto}
.plant-inline-list > ul > li ol > li {position: relative; padding-left: 10px; font-size: 1.125em; color: #555; line-height: 1.7; word-break: keep-all; letter-spacing: -1px}
.plant-inline-list > ul > li ol > li:before {content:''; width: 4px; height: 4px; background: #27439b; position: absolute; top: 0.65em; left: 0; line-height: 1.4; border-radius: 50%}

.plant-board-box > ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch}
.plant-board-box > ul > li {position: relative}
.plant-board-box > ul > li > div {border: 1px solid #ddd; padding: 30px}
.plant-board-box > ul > li .board-txt h3 {font-size: 21px; font-weight: 600; color: #27439b; margin: 10px 0 50px 0}
.plant-board-box > ul > li .board-txt .hashtag {color: #555}
.plant-board-box > ul > li .btn {position: absolute; bottom: 30px; right: 30px}
.plant-board-box .btn-wrap {margin-top: 100px}


/* 플랜트 - 엔지니어링 */
.engineering-content {padding: 0 5%}
.eng-row {display: flex; align-items: center; gap: 80px; margin-bottom: 160px}
.eng-row.reverse {flex-direction: row-reverse}
.eng-row:last-child {margin-bottom: 0}
.eng-img {flex: 0 0 40%; border-radius: 50px; overflow: hidden}
.eng-img img {width:100%; height:100%; display:block; aspect-ratio: 1; object-fit: cover}
.eng-text {flex: 1}
.eng-text h3 {font-size: 3em; font-weight: 800; margin-bottom: 30px}
.eng-text p {font-size: 21px; line-height: 1.8; color: #555; text-align: justify; margin-bottom: 20px}
.eng-text p:last-child {margin-bottom: 0}

/* 연구개발 - 기술연구소 소개 */
/* intro */
.lab-intro {max-width: 980px; margin: 0 auto}
.lab-intro h2 {font-size: 3.75em; font-weight: 800; line-height: 1.4; letter-spacing: -2px; margin-bottom: 30px}
.lab-intro-desc {display: grid; gap: 14px}
.lab-intro-desc p {font-size: 1.5em; font-weight: 300; line-height: 1.7; text-align: justify; word-break: keep-all; letter-spacing: -1px}

/* feature cards (2x2) */
.lab-feature {width: 90%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 100px 40px; margin: 200px auto}
.lab-card-media {border-radius: 40px; overflow: hidden}
.lab-card-media img {width: 100%; height: 220px; object-fit: cover; display: block}
.lab-card-body {padding:30px 40px 0 40px}
.lab-card-body h3 {font-size: 30px; font-weight: 800; margin-bottom: 10px}
.lab-card-body p {font-size: 21px; line-height: 1.8; color: #555; letter-spacing: -1px; word-break: keep-all; text-align: justify}

/* performance */
.lab-performance-head {margin-bottom: 100px}
.lab-performance-head h2 {font-size: 2.5em; font-weight: 800; letter-spacing: -2px}
.lab-performance-body {display: flex; align-items: start}

/* filter */
.lab-filter {display: grid; gap: 10px; position: sticky; top: 120px; width: 30%}
.lab-filter-btn {display: inline-block; padding: 0 20px; max-width: 180px; height: 50px; line-height: 50px; border: 1px solid #ddd; border-radius: 25px; font-size: 1.125em; color: #888}
.lab-filter-btn.is-active {border-color: #27439b; background: #27439b; color: #fff}

/* grid list */
.lab-list {widtH: 70%}
.lab-list .btn-wrap {margin-top: 50px}
.lab-grid {display: grid;  grid-template-columns: repeat(3, 1fr); gap: 30px}
.lab-item {border-radius: 30px; padding: 30px; background: #f7f7f7; min-height: 230px; position: relative; transition: all 0.4s ease}
.lab-item:hover {background: #f1f1f1}

.lab-item-tag {display: inline-block;  color: #3264ff; border-bottom: 2px solid #3264ff; padding-bottom: 10px; margin-bottom: 20px; line-height: 1; font-weight: 600}

.lab-item-title {font-size: 21px; font-weight: 700; line-height: 1.4; word-break: keep-all}
.lab-item-date {color: #555; position: absolute; bottom: 30px; left: 30px; font-size: 14px; letter-spacing: 0}

#labViewMore {border-radius: 5px; min-width: 160px;; height: 50px; line-height: 50px; padding: 0 20px; text-align: left}
#labViewMore span {float: right}

/* 레이어 팝업 */
body.is-modal-open {position: fixed; width: 100%; overflow: hidden}
.lab-modal {position: fixed; inset: 0; display: none; z-index: 9999}
.lab-modal.is-open {display: block}
.lab-modal-dim {position: absolute; inset: 0; background: rgba(0,0,0,.45)}
.lab-modal-panel {position: relative; width: min(720px, calc(100% - 40px)); margin: 8vh auto 0; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.2); display: flex; flex-direction: column; max-height: calc(100vh - 16vh); overflow: hidden}
.lab-modal-body {padding: 50px; overflow: auto; -webkit-overflow-scrolling: touch}
.lab-modal-close {position: absolute; top: 15px; right: 20px; align-self: flex-end; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; z-index: 2}

.lab-modal-tag {display: inline-block; font-weight: 600; color: #27439b; border-bottom: 2px solid #27439b; padding-bottom: 10px;  margin-bottom: 10px}
.lab-modal-title {font-size: 26px; font-weight: 600; line-height: 1.3; margin: 10px 0 20px 0}
.lab-modal-date {font-size: 15px; color: #777; margin-bottom: 20px}
.lab-modal-desc {margin-top: 20px; border-top: 1px solid #ddd; padding-top: 40px; height: auto; overflow: hidden}

.lab-modal-desc ul {display: grid; gap: 30px; justify-content: space-between}
.lab-modal-desc ul li {display: flex; align-items: start}
.lab-modal-desc ul li h3 {width: 120px; flex-shrink: 0; font-weight: 600}
.lab-modal-desc ul li .desc {flex: 1}
.lab-modal-desc ul li .desc p {text-align: justify; color: #555; line-height: 1.5; margin-bottom: 20px}
.lab-modal-desc ul li .desc p:last-child {margin-bottom: 0}
.lab-modal-desc .download {margin: 20px 5px 0 0}

/* 연구개발 - 공정테스트 */
.process-test-body {padding: 0 5%}
.test-filter {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 100px}
.test-filter .test-filter-btn {height: 50px; line-height: 50px; border-radius: 10px; background: #f8f8f8; font-size: 1.125em}
.test-filter .test-filter-btn.is-active {background: #27439b; color: #fff; font-weight: 600}

.process-intro {display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 100px; align-items: center; margin-bottom: 100px}
.process-intro-text {position: relative}
.process-intro-text.center {text-align: center}
.process-intro-text h2 {font-size: 3em; font-weight: 800; margin-bottom: 50px; line-height: 1}
.process-intro-text p {font-size: 21px; font-weight: 300; line-height: 1.7; margin-bottom: 14px; text-align: justify; letter-spacing: -1px}
.process-intro-text p.center {text-align: center}
.process-intro-text p.notice {font-size: 14px; color: #d30000}
.process-intro-text > a {position: absolute; top: 10px; right: 0}

/* 연구개발 - 연구기자재 */
.lab-equip-list {padding: 0 5%; margin-top: 100px}
.lab-equip-list ul {display: flex; align-items: stretch}
.lab-equip-list ul > li {widtH: 33.33%; margin-bottom: 50px; padding: 0 20px}
.lab-equip-list .img {background: #f8f8f8; border-radius: 40px; text-align: center; padding: 30px; min-height: 400px; display: flex; align-items: center}
.lab-equip-list .img img {display: block; margin: 0 auto; transform: scale(0.9); transition: all 0.3s ease}
.lab-equip-list .img img:hover {transform: scale(1);}
.lab-equip-list .equip-cont {padding: 30px 30px 0 30px}
.lab-equip-list .equip-cont h3 {font-size: 30px; font-weight: 700; color: #27439b}
.lab-equip-list .equip-cont ol {margin-top: 15px}
.lab-equip-list .equip-cont ol li {position: relative; padding-left: 10px; font-size: 1.125em; font-weight: 300; line-height: 2}
.lab-equip-list .equip-cont ol li:before {content:''; width: 3px; height: 3px; background: #27439b; position: absolute; top: 0.85em; left: 0}
.lab-equip-list .equip-cont ol li span {font-weight: 600}
.lab-equip-list ul:last-child li {margin-bottom: 0}


/* 카드 */
.process-list {display: grid; gap: 50px}
.process-card {background: #f8f8f8; border-radius: 30px; padding: 50px}
.process-card h3 {font-size: 30px; font-weight: 700; border-bottom: 1px solid #27439b; padding-bottom: 20px;  margin-bottom: 40px; color: #27439b}

.process-card-body {display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px}
.process-desc h4 {font-size: 21px; font-weight: 600; margin-bottom: 20px; line-height: 1}
.process-desc ul li {font-size: 1.125em; line-height: 1.7; position: relative; padding-left: 20px; margin-bottom: 10px; word-break: keep-all}
.process-desc ul li:before {content:'\eb7b'; font-family: 'remixicon'; color: #27439b; vertical-align: middle; position: absolute; top: 0; left: 0}

/* 테이블 영역 */
.process-table {width: 100%; border-top: 2px solid #799dbb}
.process-table.mo {display: none}
.process-table thead th,
.process-table tbody th {background: #d5e5f2; padding: 15px; font-weight: 500}
.process-table tbody th {border-bottom: 1px solid #b8d1e5}
.process-table tbody td {padding: 15px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; text-align: center}
.process-table tbody td.nborder {border-right: 0}
.process-table tbody td span {font-size: 13px; display: block}
.process-table tbody td.highlight {background:#fffdf5}

/* 공정테스트 진행절차 */
.process-list-group {margin: 100px 0}
.process-inline-list {display: flex; justify-content: space-between; gap: 40px}
.process-inline-list li {flex: 1; text-align: center; position: relative; background: #f8f8f8; padding: 40px 20px; border-radius: 20px}
.process-inline-list li .desc {margin-top: 10px}
.process-inline-list li .number {font-size: 1.5em; font-weight: 800; color: #27439b; line-height: 1.7}
.process-inline-list li p {font-size: 21px; font-weight: 500; letter-spacing: -1px}
.process-inline-list li:after {content:""; position:absolute; top:50%; right: -24px; transform:translateY(-50%); width:7px; height:15px; background:#27439b; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 3px}
.process-inline-list li:last-child:after {display: none;}

.process-box {display: flex; align-items: start; padding: 70px 0; border-bottom: 1px solid #ddd}
.process-box .box-tit {width: 27%}
.process-box .box-tit .num {display: inline-block; background: #27439b; width: 45px; height: 45px; text-align: center; line-height: 45px; border-radius: 7px; color: #fff; font-size: 21px; font-weight: 700; letter-spacing: 0; vertical-align: middle; margin-right: 10px}
.process-box .box-tit .tit {display: inline-block; font-size: 36px; font-weight: 800; vertical-align: middle; line-height: 1}
.process-box .box-cont {width: 73%}
.process-box .box-cont h4 {font-size: 1.5em; margin: 50px 0 20px 0; position: relative; padding-left: 10px}
.process-box .box-cont h4:before {content:''; width: 5px; height: 5px; background: #27439b; position: absolute; top: 0.6em; left: 0}
.process-box .box-cont p {font-size: 20px; line-height: 1.7}
.process-box .box-cont p.notice {font-size: 1.125em; color:#d30000}
.process-box .box-cont a {margin-top: 50px}
.process-box .box-cont ol li {font-size: 21px; line-height: 2}
.process-box .box-cont ol li:before {content:'·'; margin-right: 10px}

.process-notice {background: #f8f8f8; border-radius: 30px; padding: 30px; margin-top: 70px}
.process-notice h2 {font-size: 21px; font-weight: 600}
.process-notice h2 img {width: 25px; height: auto}
.process-notice ul {margin-top: 20px}
.process-notice ul li {position: relative; padding-left: 15px; font-size: 17px; line-height: 2}
.process-notice ul li:before {content:'-'; position: absolute; top: 0; left: 0}

/* 톨링센터 */
.tcenter-head {text-align: center}
.tcenter-head h2 {font-size: 3.75em; font-weight: 800; letter-spacing: -2px; margin-bottom: 50px}
.tcenter-head p {font-size: 1.5em; line-height: 1.7}
.hpp-feature {margin: 100px 0; text-align: center}
.hpp-feature p {font-size: 1.5em; line-height: 1.7; margin-top: 50px}

.tcenter-body header {text-align:center; margin-bottom: 100px}
.tcenter-body header.left {text-align: left}
.tcenter-body header h2 {font-size: 55px; font-weight: 800}
.tcenter-body header p {font-size: 1.5em; line-height: 1.7; margin-top: 30px}

.tolling-service {text-align: center}
.tolling-service h4 {font-size: 1.5em; color: #27439b}
.tolling-service ul {margin-top: 50px}
.tolling-service ul li {display: inline-block; width: 320px; padding: 50px 30px; border: 1px solid #ddd; margin: 0 20px}
.tolling-service ul li h3 {font-size: 1.5em; color: #27439b; line-height: 1; margin: 30px 0 20px 0}
.tolling-service ul li p {font-size: 1.125em; letter-spacing: -1px; color: #555; line-height: 1.6}

.tolling-service2 {margin-bottom: 100px; text-align: center}
.tolling-service2 ul {display: flex; justify-content: space-between; gap: 20px}
.tolling-service2 ul li {flex: 1; background: #f8f8f8; padding: 30px; border-radius: 30px;}
.tolling-service2 ul li p {margin-top: 20px; font-size: 1.125em; color: #222; letter-spacing: -1px}

.tolling-equipment {width: 100%; border: 1px solid #27439b; margin-bottom: 50px; text-align: center}
.tolling-equipment h2 {width: 100%; height: 55px; background: #27439b; line-height: 55px; color: #fff; font-size: 1.5em; font-weight: 600}
.tolling-equipment:last-child {margin-bottom: 0}

.tolling-apply ul {display: flex; justify-content: space-between; gap: 30px}
.tolling-apply ul li {flex: 1; text-align: center}
.tolling-apply ul li p {font-size: 1.5em; margin-top: 20px}

/* RT-ROOM */
.rt-room-body {padding: 0 5%}
.rt-intro-title {display: flex; align-items: center; padding: 0 9%; gap: 50px}
.rt-intro-title p {font-size: 1.5em; line-height: 1.7; text-align: justify; word-break: keep-all}
.rt-intro-img {text-align: center; margin-top: 100px}


.rt-feature {text-align: center; margin-top: 100px}
.rt-feature ul {display: flex; justify-content: space-between; gap: 20px}
.rt-feature ul li {position: relative; border: 2px solid #ddd; border-radius: 30px; padding: 70px 20px 40px 20px; flex: 1}
.rt-feature ul li .num {font-size: 1.5em; font-weight: 800; position: absolute; top: -18px; left: 50%; display: block; width: 50px; background: #fff; margin-left: -25px}
.rt-feature ul li img {margin-bottom: 50px}
.rt-feature ul li h3 {font-size: 1.5em; font-weight: 600; line-height: 1; margin-bottom: 20px}
.rt-feature ul li p {color: #555; line-height: 1.4; letter-spacing: -1;; word-break: keep-all}
.rt-feature ul li.f-item01 {border-color: #91cf3e}
.rt-feature ul li.f-item01 .num {color: #91cf3e;}
.rt-feature ul li.f-item02 {border-color: #58d09b}
.rt-feature ul li.f-item02 .num {color: #58d09b}
.rt-feature ul li.f-item03 {border-color: #4ccad0}
.rt-feature ul li.f-item03 .num {color: #4ccad0}
.rt-feature ul li.f-item04 {border-color: #3ba7e4}
.rt-feature ul li.f-item04 .num {color: #3ba7e4}
.rt-feature ul li.f-item05 {border-color: #3477b2} 
.rt-feature ul li.f-item05 .num {color: #3477b2}
.rt-feature ul li.f-item06 {border-color: #27439b}
.rt-feature ul li.f-item06 .num {color: #27439b}

/* ESG 경영 */
.esg-head {margin-bottom: 150px; text-align: center}
.esg-head h2 {font-size: 3.75em; font-weight: 800; letter-spacing: -2px; margin-bottom: 50px}
.esg-head p {font-size: 1.5em; color: #555; font-weight: 300; line-height: 1.6; letter-spacing: -1px}

.esg-row {display:flex; align-items:center; gap: 150px; margin-bottom: 200px}
.esg-row.is-reverse {flex-direction: row-reverse}
.esg-media {flex: 0 0 576px; border-radius: 50px; overflow: hidden}
.esg-media img {width:100%; height:100%; display:block; aspect-ratio: 3 / 4; object-fit: cover}
.esg-text {flex: 1}
.esg-text .kicker {font-size: 1.125em; font-weight: 700; color: #27439b; margin-bottom: 10px}
.esg-text .title {font-size: 3.75em; font-weight: 800; line-height: 1.35; letter-spacing: -2px}
.esg-text .desc {font-size: 21px; font-weight: 300; line-height: 1.7; margin: 30px 0 50px 0; text-align: justify}

/* 아이콘 카드 3개 */
.esg-cards {display:flex; gap: 20px; background: #f9f9f9; border-radius: 30px; padding: 40px 20px}
.esg-cards .card {position: relative; text-align: center; flex: 1}
.esg-cards .card:before {content:''; width: 1px; height: 100%; background: #ddd; position: absolute; top: 0; right: -10px}
.esg-cards .card:last-child:before {display: none;}
.esg-cards .card img {margin-bottom: 20px}
.esg-cards .card p {font-size: 1.125em; line-height:1.3}


/* 라운드 비주얼 */
.esg-bottom-visual {height: 430px; border-radius: 215px; background: url("../img/sub/esg-bg.jpg") center/contain no-repeat; background-attachment: fixed; display:flex; align-items:center; justify-content:center}
.esg-bottom-visual h2 {color:#fff; font-size: 3.75em; line-height: 1}

/* 중앙 점 + 라인 느낌 */
.esg-bottom-line {width:1px; height:170px; background:#ddd; position: relative; margin: -50px auto}
.esg-bottom-line::before {content:""; position:absolute; bottom: 0; left:50%; width:10px; height:10px; background:#27439b; border-radius: 50%; margin-left: -5px}

/* 메시지 */
.esg-bottom-message{margin: 160px 0 100px 0}
.esg-bottom-message p {font-size: 2.2em; line-height: 1.4; text-align: center}
.esg-bottom-message p b {font-weight: 700}

/* 카드 영역 */
.esg-bottom-cards {padding: 0 5%; display:flex; gap: 50px}
.esg-bottom-cards li {flex:1; text-align:center; padding: 30px; border-top: 5px solid #27439b; border-bottom: 1px solid #ddd}
.esg-bottom-cards img {margin-bottom: 16px}
.esg-bottom-cards h4 {font-size: 1.5em; font-weight: 600; margin-bottom: 20px}
.esg-bottom-cards p {line-height: 1.6}

/* 윤리경영 */
.ethics-clauses {padding: 100px 5% 0 5%; height: auto; overflow: hidden}
.chapter {margin-bottom: 100px}
.chapter-title {font-size: 30px; font-weight: 600; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 2px solid #000; letter-spacing: -1px}

/* 조항 리스트 */
.clause-list {display: grid; gap: 20px}
.clause-item {display: grid; grid-template-columns: 70px 1fr;
  gap: 20px; align-items: start}

/* 제○조 뱃지 */
.badge {display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px;border-radius: 20px; background: #27439b; color: #fff; font-weight: 700; line-height: 1; white-space: nowrap}

/* 조항 텍스트 */
.clause-item .text {font-size: 21px; line-height: 1.7}

/* 윤리헌장 이미지 */
.sec-ethics-img {text-align: center; margin-top: 100px}

/* 채용 */
.sec-talent .btn {margin-top: 50px}
.recruit-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-top: 100px}
.recruit-list li img {margin-bottom: 30px}
.recruit-list li h2 {font-size: 30px; color: #27439b; margin-bottom: 20px}
.recruit-list li h2 span {font-size: 16px; font-weight: 600; color: #222; margin-lefT: 5px}
.recruit-list li p {font-size: 1.125em; line-height: 1.5; letter-spacing: -1px; word-break: keep-all}

.sec-welfare {margin-top: 200px}
.welfare-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-top: 100px}
.welfare-list li div {border: 1px solid #ddd; text-align: center; padding: 50px 30px; transition: all 0.4s ease}
.welfare-list li h4 {font-size: 1.5em; margin: 20px 0}
.welfare-list li p {font-size: 1.125em; line-height: 1.5; letter-spacing: -1px; word-break: keep-all}
.welfare-list li div:hover {border-color: #f4f7ff; background: #f4f7ff}

/* 자료실 */
#customer_content {margin-bottom: 200px}
#customer_content .inner {width: 90%; margin: 0 auto}
.archive-tabs {margin-bottom: 100px}
.archive-tabs-li {display: inline-block; padding: 15px 20px; border: 1px solid #ddd; border-radius: 5px; color: #999; cursor:pointer}
.archive-tabs-li.current {background: #27439b; border-color: #27439b; color: #fff; font-weight: 600}
.archive-tab-cont {display: none}
.archive-tab-cont.current {display: block}
.archive-item {display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px}
.archive-item li a {display: block}
.archive-item li a img {width: 100%}
.archive-item li a h2 {margin-top: 20px; font-size: 21px; font-weight: 500; letter-spacing: -1px; text-align: center}

/* 프로젝트 실적 */
#supply-content {width: 90%; margin: 0 auto 200px}
.supply-filter {text-align: center; margin-bottom: 100px}
.supply-filter-btn {background: #f8f8f8; padding: 15px 30px; border-radius: 5px; color: #666; margin: 0 2px}
.supply-filter-btn.is-active {background: #27439b; color: #fff; font-weight: 600}
.supply-list {}
.supply-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; justify-content: space-between; align-items: stretch; margin-bottom: 100px}
.supply-grid .sup-item {background: #f8f8f8; border-radius: 10px; padding: 30px; position: relative}
.supply-grid .sup-item .category {background: #222; padding: 5px 15px; border-radius: 5px; font-size: 0.8em; color: #fff; font-weight: 600; display: inline-block}
.supply-grid .sup-item .company {font-size: 28px; font-weight: 600; margin: 10px 0}
.supply-grid .sup-item p {line-height: 2}
.supply-grid .sup-item .pr-name {font-size: 1.25em}
.supply-grid .sup-item .pr-name sub {font-size: 0.6em; vertical-align: baseline}
.supply-grid .sup-item .date {font-size: 0.8em; color: #555}
.supply-grid .sup-item img {position: absolute; bottom: 30px; right: 30px; width: auto; height: 120px}

 
/* 개인정보처리방침 */
.privacy-policy {width: 70%; margin: 200px auto; line-height: 1.6}
.policy-header {text-align: center; margin-bottom: 100px; padding-bottom: 50px; border-bottom: 1px solid #222}
.policy-header h1 {font-size: 3.75em; font-weight: 800; margin-bottom: 50px}
.policy-header .policy-intro {font-size: 1.5em; text-align: justify}

.policy-section {margin-bottom: 100px}
.policy-section:last-child {margin-bottom: 0}
.policy-section h2 {font-size: 1.5em; margin-bottom: 30px}
.policy-section p {font-size: 1.125em; text-align: justify; line-height: 1.7; margin-bottom: 50px}
.policy-section ol,
.policy-section ul {padding-left: 20px}
.policy-section ol > li {line-height: 2; list-style: decimal}
.policy-section ul > li {line-height: 2; list-style: disc}

.policy-section table {width: 100%; border-top: 3px solid #333}
.policy-section table thead th {padding: 15px; background: #f8f8f8; font-weight: 500}
.policy-section table tbody td {padding: 15px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center}
.policy-section table tbody td:last-child {border-right: 0}
.policy-section table.mo {display: none}


/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {margin:5px 0 0; font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block; padding:0 10px; font-size: 13px; border:1px solid #ccc;background:#fafafa; line-height:1.9em; vertical-align:middle; cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* ckeditor 태그 기본값 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 버튼 */
a.btn,.btn {
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right} /* 서식단계 진행 */

.btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:#2375eb}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa}
a.btn_frmline, button.btn_frmline {display:inline-block; padding: 5px; background:#444;color:#fff} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent}
.btn_b01:hover, .btn_b01:hover {color:#000}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {color:#ff3746}

/* 버튼 공통 custom */
.btn {display: inline-block; vertical-align: middle; font-size: 0.9em; font-weight: 400; text-align: center; height: 50px; line-height: 48px; padding: 0 20px; border: 1px solid #ddd; transition: all 0.4s linear}
.btn.btn-primary {background: #27439b; color: #fff; border-color: #27439b}
.btn.btn-outline {border-color: #27439b; color: #27439b}
.btn.btn-outline-wh {border-color: #fff; color: #fff}
.btn > i {margin-right: 5px}
.btn.btn-primary:focus,
.btn.btn-primary:hover {background: #0f2875}
.btn.btn-outline:focus,
.btn.btn-outline:hover {border-color:#0f2875; background: #0f2875; color:#fff}
.btn.btn-outline-wh:focus,
.btn.btn-outline-wh:hover {background: #fff; color:#0f2875}


/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
.tbl_head01 tbody tr:hover td {background:#fafafa}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,
.tbl_frm01 textarea,
.form_01 textarea,
.frm_input {border:1px solid #333; background:#fff; padding: 15px}
.tbl_frm01 textarea {padding:2px 2px 3px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}
.frm_info.add_info { margin-top: 10px !important; padding: 8px 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px; line-height: 1.6; }
.btn_info_toggle { display: block; margin: 5px 0 0 21px; font-size: 12px; color: #3f51b5; background: none; border: none; cursor: pointer; text-decoration: underline; }

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 테이블 항목별 정의 */
.td_board {width:80px;text-align:center}
.td_category {width:80px;text-align:center}
.td_chk {width:30px;text-align:center}
.td_date {width:60px;text-align:center}
.td_datetime {width:110px;text-align:center}
.td_group {width:80px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_name {width:100px;text-align:left}
.td_nick {width:100px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:80px;text-align:center}
.td_stat {width:60px;text-align:center}

.txt_active {color:#5d910b}
.txt_done {color:#e8180c}
.txt_expired {color:#ccc}
.txt_rdy {color:#8abc2a}

/* 새창 기본 스타일 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {text-align:center}
.new_win .cert_btn {margin-bottom:30px;text-align:center}
.new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 검색결과 색상 */
.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* 페이징 */
.pg_wrap {clear:both; text-align: center; margin-top: 50px}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:#27439b;border:1px solid #27439b;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}