a, a:focus, a:active { outline: none; }
a, a:hover { text-decoration: none; }

/* ===== HERO ===== */
.hero {position: relative;overflow: hidden;height: 800px;background: #0F1A14;}
.hero-swiper { width: 100%; height: 100%; }
.hero-swiper .swiper-slide { height: 100%; }
.hero-slide { position: relative; display: flex; align-items: center; overflow: hidden; }

.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; background-repeat: no-repeat; transform: scale(1.04); transition: transform 8s ease; z-index: 0; }
.hero-swiper .swiper-slide-active .hero-bg { transform: scale(1.1); }

.hero-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,98,169,0.9) 10%, rgba(0,98,169,0.3) 50%, rgba(0,98,169,0.0) 100%); z-index: 1; }
.hero-content {position: relative;align-self: center;z-index: 2;color: #fff;width: 100%;margin: 10% auto 10%;padding-top: 95px;}

.hero-content .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); color: #fff; border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 24px; }
.hero-content .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #0062A9; box-shadow: 0 0 0 4px rgba(0,98,169,0.3); }
.hero-content .hero-title { font-size: 58px; font-weight: 800; line-height: 1.2; letter-spacing: -0.035em; color: #fff; margin-bottom: 24px; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.hero-content .hero-title .accent { color: #FFC000; /*background: linear-gradient(90deg, #FF8000, #FFC000); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;*/ }
.hero-content .hero-desc { font-size: 18px; color: rgba(255,255,255,0.88); line-height: 1.7; margin-bottom: 36px; max-width: 620px; text-shadow: 0 1px 6px rgba(0,0,0,0.25); }
.hero-content .hero-actions { display: grid; grid-template-columns: auto auto; gap: 12px; justify-content: start; }

/* Hero 버튼 */
.hero-actions a.btn-pill { display: inline-block; background: transparent; color: #fff; font-size: 15px; font-weight: 700; padding: 14px 32px; border-radius: 4px; border: 2px solid #fff; letter-spacing: -0.03em; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; }
.hero-actions a.btn-pill:hover { border-color: #FFC000; background: #FFC000; color: #0062A9;}
.hero-actions a.btn-pill.btn-solid { background: #fff; color: #0062A9; }
.hero-actions a.btn-pill.btn-solid:hover { border-color: #0062A9; background: #0062A9; color: #FFC000;}


/* 기본 상태 (숨김 + 아래 위치) */
.hero-eyebrow, .hero-title, .hero-desc, .hero-actions {opacity: 0;transform: translateY(30px);}  /* 활성 슬라이드에서 순차 등장 */
.hero-swiper .swiper-slide-active .hero-eyebrow {opacity: 1;transform: translateY(0);transition: all .6s ease .2s;}
.hero-swiper .swiper-slide-active .hero-title {opacity: 1;transform: translateY(0);transition: all .7s ease .4s;}
.hero-swiper .swiper-slide-active .hero-desc {opacity: 1;transform: translateY(0);transition: all .7s ease .6s;}
.hero-swiper .swiper-slide-active .hero-actions {opacity: 1;transform: translateY(0);transition: all .7s ease .8s;}

/* Hero pagination */
.hero-pagination.swiper-pagination { position: absolute; left: 0; right: 0; bottom: 100px; display: flex; justify-content: center; gap: 10px; z-index: 5; }
.hero-pagination .swiper-pagination-bullet { width: 40px; height: 4px; background: rgba(255,255,255,0.35); opacity: 1; border-radius: 3px; margin: 0 !important; transition: background 0.2s, width 0.2s; }
.hero-pagination .swiper-pagination-bullet-active { background: #fff; width: 60px; }

/* Hero arrows */
.hero-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px); border-radius: 50%; place-items: center; color: #fff; z-index: 5; transition: background 0.15s, transform 0.15s; cursor: pointer; }
@media (min-width: 1200px) { .hero-arrow { display: grid; } }
.hero-arrow:hover { background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.05); }
.hero-arrow.prev { left: 32px; }
.hero-arrow.next { right: 32px; }
.hero-arrow.swiper-button-disabled { opacity: 0.45; cursor: default; }


/*메인-중간컨텐츠*/
#middle{ width:100%; margin-top:80px;}
#middle_in{ width:1200px; background:#fff; margin:0 auto; box-sizing: border-box; border:1px solid #ddd;}
#middle_in:after{ display:block; content:""; clear:both;}
#middle .abox{ float:left; width:33%; box-sizing: border-box;}
#middle .abox01{ border-right:1px solid #ddd;}
#middle .abox02{ border-right:1px solid #ddd;}
#middle .abox03{ width:34%;}
#middle .abox_img img{ width:100%; height:274px; overflow:hidden;}
#middle dl{ color:#444; position:relative; padding:35px 40px;}
#middle dt{ font-size:23px; font-weight:500; color:#444;}
#middle dt:before{ display:block; content:""; width:30px; height:3px; background:#1f3c88; margin-bottom:7px;}
#middle p{ font-size:13px; color:#999; margin-bottom:25px;}
#middle dd{ font-size:15px; color:#777; margin:20px 0 25px 0; line-height:1.5em;}
#middle a.mbtn{ display:block; width:130px; border:1px solid #ccc; background:#fff; line-height:35px; color:#999; padding:0 15px; transition:all 0.5s; font-size:1.2em;}
#middle a.mbtn:hover{ border:1px solid #1f3c88; color:#fff; background:#1f3c88; border-radius:4px; transition:all 0.5s;}
#middle .abox03 .tel_icon{ float:left; width:50px; height:50px; border-radius:50%; line-height:50px; text-align:center; color:#fff; background:#5893d4; font-size:1.8em;
    margin:3px 18px 0 0;}
#middle .abox03 .tel_wrap{ float:left;}
#middle .abox03 a{ display:block; font-family:Tahoma, Geneva, sans-serif;}
#middle .abox03 a.tel{ font-size:37px; color:#333; font-weight:500; line-height:1em;}
#middle .abox03 a.fax{ font-size:23px; color:#888; font-weight:500; line-height:1em; margin:7px 0 5px 3px;}
#middle .abox03 a.mail{ font-size:14px; color:#5893d4; font-weight:600; line-height:1em; letter-spacing:0; margin-left:3px;}


#middle2{ width:100%; background:#fff; margin:80px 0;}
#middle2_in{ width:1200px; margin:0 auto; box-sizing: border-box;}
#middle2_in:after{ display:block; content:""; clear:both;}
#middle2 .abox{ float:left; width:33%; min-height:200px; box-sizing: border-box;}
#middle2 .abox01{ padding-right:60px;}
#middle2 .abox02{ padding-right:60px;}
#middle2 .abox03{}

@media (max-width:1000px) {
    #visual{width:100%; min-width:100%; height:230px;}

    #visual #slogan{ width:320px; top:70px; margin-left:-160px; word-break: keep-all; word-wrap:break-word; text-shadow:0;}
    #visual #slogan .img01{ font-size:13px; line-height:1.2em;}
    #visual #slogan .img02{ font-size:24px; line-height:1.2em; margin:5px 0;}
    #visual #slogan .mt{  font-size:14px; line-height:1.2em;}

    #visual .sliderbx li{ width:100% !important; height:230px; background-position:center top; background-size:cover;}
    #visual div.bx-pager{ top:50px; margin-left:-27px;}
    #visual div.bx-pager div{ margin:0 2px;}
    #visual div.bx-pager div a{ width:11px; height:11px; border-width:3px;}
    #visual div.bx-controls-direction{ display:none;}

    /*메인-중간컨텐츠*/
    #middle{ margin-top:0px;}
    #middle_in{  width:100%; border:0; border-bottom:1px solid #ddd;}
    #middle .abox{ float:left; width:50%;}
    #middle .abox01{ border-right:1px solid #ddd; text-align:center}
    #middle .abox02{ border-right:0; text-align:center;}
    #middle .abox03{ width:100%; border-top:1px solid #ddd;}
    #middle .abox_img img{ height:auto;}
    #middle dl{ padding:30px 0px;}
    #middle dt{ font-size:18px;}
    #middle dt:before{ width:25px; margin:0 auto 7px auto;}
    #middle p{ margin-bottom:15px;}
    #middle dd{ display:none;}
    #middle a.mbtn{ width:90px; padding:0; line-height:25px; font-size:1em; margin:10px auto 0 auto;}

    #middle .abox03 .abox_img{ display:none;}
    #middle .abox03 dl{ padding:20px 30px;}
    #middle .abox03 dt:before{ display:none;}
    #middle .abox03 .tel_icon{ width:40px; height:40px; line-height:40px; font-size:1.5em;margin:3px 15px 0 0;}
    #middle .abox03 a.tel{ font-size:35px;}
    #middle .abox03 a.fax{ font-size:21px;}
    #middle .abox03 a.mail{ font-size:12px;}


    #middle2{ width:90%; margin:40px auto;}
    #middle2_in{ width:100%;}
    #middle2 .abox{ float:none; width:100%; min-height:auto;}
    #middle2 .abox01{ padding-right:0px; height:90px; overflow:hidden; margin-bottom:20px;}
    #middle2 .abox02{ padding-right:0px; height:90px; overflow:hidden; margin-bottom:20px;}
    #middle2 .abox03{}
}




/* ===== 공통 섹션 레이아웃 ===== */
.sec-header { text-align: center; margin-bottom: 56px; }
.sec-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: #0062A9; margin-bottom: 12px; }
.sec-title { font-size: 34px; font-weight: 800; color: #1a2035; letter-spacing: -0.03em; line-height: 1.25; margin-bottom: 14px; }
.sec-desc { font-size: 16px; color: #777; line-height: 1.6; }

/* ===== S2: BRAND STATEMENT ===== */
.sec-brand { padding: 90px 0 70px; background: #fff; }
.brand-statement { text-align: center; margin-bottom: 60px; }
.brand-label { font-size: 15px; color: #0062A9; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.01em; }
.brand-title { font-size: 38px; font-weight: 800; color: #1a2035; letter-spacing: -0.04em; line-height: 1.3; margin-bottom: 16px; }
.brand-en { font-size: 14px; color: #aaa; letter-spacing: 0.04em; font-style: italic; }
.brand-stats { display: flex; justify-content: center; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.stat-item { flex: 1; text-align: center; padding: 36px 20px; border-right: 1px solid #eee; }
.stat-item:last-child { border-right: none; }
.stat-num { display: block; font-size: 28px; font-weight: 800; color: #0062A9; letter-spacing: -0.03em; margin-bottom: 8px; line-height: 1; }
.stat-label { display: block; font-size: 13px; color: #999; letter-spacing: -0.01em; }

/* ===== S3: PRODUCT GRID ===== */
.sec-products { padding: 90px 0; background: #f4f8fc; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
a.prod-card { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: box-shadow 0.25s, transform 0.25s; }
a.prod-card:hover { box-shadow: 0 8px 28px rgba(0,98,169,0.15); transform: translateY(-4px); }
.prod-img { width: 100%; aspect-ratio: 4/2.9; background-size: cover; background-position: center; background-color: #dce8f3; }
.prod-info { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.prod-info h3 { font-size: 18px; font-weight: 700; color: #1a2035; letter-spacing: -0.02em; margin-bottom: 10px; margin-top: 0; }
.prod-info p { font-size: 14px; color: #777; line-height: 1.65; margin-bottom: 16px; flex: 1; }
.prod-more { font-size: 13px; font-weight: 600; color: #0062A9; letter-spacing: -0.01em; }
.prod-more .fa-arrow-right { font-size: 11px; margin-left: 4px; transition: margin-left 0.2s; }
a.prod-card:hover .prod-more .fa-arrow-right { margin-left: 8px; }

/* ===== S2.5: SERVICES ===== */
.sec-services { padding: 80px 0; background: #0062A9; }
.sec-services .sec-label{color: #fff; opacity: 0.8;}
.sec-services .sec-title{color: #fff;}
.services-list { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0; justify-content: center; }
.service-item {display: flex;align-items: center;gap: 14px;background: #fff;border: 1px solid #dde6f0;border-radius: 8px;padding: 20px 60px;font-size: 17px;font-weight: 600;color: #1a2035;letter-spacing: -0.02em;transition: box-shadow 0.2s, border-color 0.2s;flex: 0 1 auto;}
.service-item:hover { box-shadow: 0 4px 16px rgba(0,98,169,0.12); border-color: #0062A9; }
.service-icon { width: 44px; height: 44px; border-radius: 50%; background: #0062A9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-icon .fas { font-size: 20px; color: #fff; }

/* ===== S4: WHY US ===== */
.sec-why { padding: 90px 0; background: #fff; }
.why-grid { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.why-item { flex: 1 1 calc(25% - 24px); min-width: 200px; text-align: center; padding: 40px 24px; background: #f4f8fc; border-radius: 8px; transition: background 0.2s; }
.why-item:hover { background: #eaf1f9; }
.why-icon { width: 64px; height: 64px; border-radius: 50%; background: #0062A9; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.why-icon .fas { font-size: 26px; color: #fff; }
.why-item h3 { font-size: 20px; font-weight: 700; color: #1a2035; margin-bottom: 12px; letter-spacing: -0.02em; }
.why-item p { font-size: 14px; color: #777; line-height: 1.7; }

/* ===== CTA Slogan ===== */
.cta-slogan { text-align: center; margin-top: 40px; font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: -0.02em; font-style: italic; }

/* ===== S5: GALLERY ===== */
.sec-gallery { padding: 90px 0; background: #f4f8fc; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 240px 240px; gap: 12px; margin-bottom: 36px; }
a.gallery-item { background-size: cover; background-position: center; position: relative; overflow: hidden; border-radius: 6px; display: block; }
a.gallery-item.gallery-main { grid-column: span 2; }
.gallery-overlay { position: absolute; inset: 0; background: rgba(0,98,169,0); display: flex; align-items: flex-end; padding: 20px; transition: background 0.3s; }
.gallery-overlay span { font-size: 15px; color: #fff; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
a.gallery-item:hover .gallery-overlay { background: rgba(0,98,169,0.55); }
a.gallery-item:hover .gallery-overlay span { opacity: 1; transform: translateY(0); }
.gallery-more { text-align: center; }
a.btn-more { display: inline-block; font-size: 14px; font-weight: 700; color: #0062A9; border: 2px solid #0062A9; padding: 12px 30px; border-radius: 4px; letter-spacing: -0.02em; transition: background 0.2s, color 0.2s; }
a.btn-more:hover { background: #0062A9; color: #fff; }
a.btn-more .fa-arrow-right { font-size: 12px; margin-left: 6px; }

/* ===== S6: FAQ ===== */
.sec-faq { padding: 90px 0; background: #fff; }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e8e8e8; }
.faq-item:first-child { border-top: 1px solid #e8e8e8; }
.faq-q { display: block; width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-size: 16px; font-weight: 600; color: #1a2035; padding: 22px 48px 22px 20px; position: relative; letter-spacing: -0.02em; line-height: 1.5; transition: color 0.2s; font-family: inherit; }
.faq-q::after { content: '\f067'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 12px; color: #0062A9; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.35s ease; }
.faq-item.is-open .faq-q { color: #0062A9; }
.faq-item.is-open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; padding: 0 20px; padding-bottom: 0; font-size: 15px; color: #666; line-height: 1.8; letter-spacing: -0.01em; transition: max-height 0.38s ease, padding-bottom 0.38s ease; }
.faq-item.is-open .faq-a { padding-bottom: 22px; }

/* ===== S7: CTA ===== */
.sec-cta { padding: 80px 0; background: linear-gradient(135deg, #004f8a 0%, #0062A9 60%, #0078cc 100%); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.cta-title { font-size: 45px; font-weight: 800; color: #fff; letter-spacing: -0.035em; line-height: 1.3; }
.cta-contact { text-align: right; }
a.cta-tel { display: block; font-size: 45px; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px; font-family: Tahoma, Geneva, sans-serif; }
.cta-tel:hover { text-decoration: none;}
.cta-sub { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 24px; }
.cta-sub a { color: rgba(255,255,255,0.9); font-weight: 600; }
.cta-sub a:hover { color: #FFC000; }
a.btn-cta { display: inline-block; padding: 14px 32px; background: #fff; color: #0062A9; font-size: 15px; font-weight: 700; border-radius: 4px; letter-spacing: -0.02em; transition: background 0.2s, color 0.2s; }
a.btn-cta:hover { background: #FF8000; color: #fff; }

/* ===== 반응형 ===== */
@media (max-width: 1000px) {
    /* 공통 좌우 여백 */
    .inner { padding: 0 20px; }

    /* Hero */
    .hero { height: 600px; }
    .hero-content { padding-top: 70px; }
    .hero-content .hero-title { font-size: 42px; }
    .hero-content .hero-desc { font-size: 16px; margin-bottom: 28px; }
    .hero-pagination.swiper-pagination { bottom: 60px; }


    .brand-stats { flex-wrap: wrap; }
    .stat-item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid #eee; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { gap: 16px; }
    .why-item { flex: 1 1 calc(50% - 16px); }
    .services-list { flex-direction: column; }
    .service-item { width: 100%; }
    .gallery-grid { grid-template-rows: 180px 180px; }
    .cta-inner { flex-direction: column; text-align: center; }
    .cta-contact { text-align: center; }
    a.cta-tel { font-size: 32px; }
    .cta-title { font-size: 26px; }
}
@media (max-width: 640px) {
    /* Hero */
    .hero { height: 500px; }
    .hero-content .hero-eyebrow { font-size: 11px; padding: 5px 12px; margin-bottom: 16px; }
    .hero-content .hero-title { font-size: 28px; margin-bottom: 14px; }
    .hero-content .hero-desc { font-size: 13px; margin-bottom: 24px; }
    .hero-actions a.btn-pill { font-size: 13px; padding: 11px 20px; }
    .hero-pagination.swiper-pagination { bottom: 28px; }
    .product-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    a.gallery-item { height: 200px; }
    a.gallery-item.gallery-main { grid-column: span 1; }
    .sec-title { font-size: 26px; }
    .brand-title { font-size: 26px; }
    .why-item { flex: 1 1 100%; }
    .cta-slogan { font-size: 16px; padding: 0 20px; }
}
@media (max-width: 480px) {
    /* Hero */
    .hero { height: 400px; }
    .hero-content .hero-eyebrow { display: none; }
    .hero-content .hero-title { font-size: 23px; margin-bottom: 12px; }
    .hero-content .hero-desc { font-size: 12.5px; margin-bottom: 20px; }
    .hero-actions { gap: 8px; }
    .hero-actions a.btn-pill { font-size: 12px; padding: 10px 16px; }
    .hero-pagination.swiper-pagination { bottom: 16px; }
}

/*배너롤링*/
#banner_wrap {width:100%; min-width:1200px;  height:auto;}
#banner {width:1200px; height:auto; margin:0 auto; padding:40px 0 30px 0; position:relative;}
.nav {position:absolute; top:10px; left:0px;}
.nav button {width:22px; height:22px; border:1px solid #bbb; background:#fff;}
.RollDiv {width:1200px; height:70px; margin:0 auto;overflow:hidden;}
.RollDiv > div{overflow:hidden;height:70px;width:1200px; margin:0 auto;}
.RollDiv > div > a {float:left; display:block; margin:0 4px; border:1px solid #CCCCCC; padding:2px;}
.RollDiv > div > a > img {width:auto;}
@media (max-width: 1000px) {
    #banner_wrap{ width:90%; min-width:90%; margin:0 auto; background:#fff; overflow:hidden;}
    #banner{ width:100%; padding:60px 0 30px 0; position:relative;}
    .nav{ position:absolute; top:30px; left:0px;}
}