/* 초기화 */
html { width: 100%; overflow-x: clip; }
body { margin:0; padding:0; font-size:1rem; font-family:'Montserrat', 'Pretendard', dotum, sans-serif; background:#fff; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0; }
h1, h2, h3, h4, h5, h6 { font-size:1rem; font-family:'Montserrat', 'Pretendard', dotum, sans-serif; word-break:keep-all; overflow-wrap:normal;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ul, dl,dt,dd { margin:0; padding:0; list-style:none; }
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden; }
label, input, button, select, img { vertical-align:middle; font-size:1rem; }
input, button, figure { margin:0; padding:0; font-family:'Montserrat', 'Pretendard', dotum, sans-serif; font-size:1rem; }
input[type="submit"] { cursor:pointer; }
button { cursor:pointer; }
textarea, select { font-family:'Montserrat', 'Pretendard', dotum, sans-serif; font-size:1rem; }
select { margin:0; }
p { margin:0; padding:0; word-break:keep-all; overflow-wrap:normal;}
hr { display:none; }
pre { overflow-x:scroll; font-size:1.1rem; }
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;
} */

.wrap {
    width: 100%;
    max-width: 100%;
    /* overflow-x: hidden; */
}
.w1420 { width:1300px; margin:0 auto; }
.t_bold { font-weight:700; }
br.pc_only { display:none; }
br.m_only { display:revert; }
@media (min-width:780px) {
    br.pc_only { display:revert; }
}
@media (max-width:1280px) {
    br.m_only { display:none; }
    .section03 .history-wrap { gap:35px;margin:60px 0 0 0; }
    .cert-slider{margin-bottom: 60px;}
}
/* 스크롤 애니메이션 */
.back-to-position { opacity: 0; transition: 1s; }
.back-to-position.to-right { transform: translateX(-150px); }
.back-to-position.to-left { transform: translateX(150px); }
.back-to-position.to-top { transform: translateY(150px); }
.back-to-position.to-btm { transform: translateY(-150px); }
.show .back-to-position.to-right { opacity: 1; transform: translateX(0); }
.show .back-to-position.to-left { opacity: 1; transform: translateX(0); }
.show .back-to-position.to-top { opacity: 1; transform: translateY(0); }
.show .back-to-position.to-btm { opacity: 1; transform: translateY(0); }
.show .back-to-position.delay-0 { transition-delay: 0s; }
.show .back-to-position.delay-1 { transition-delay: 0.3s; }
.show .back-to-position.delay-2 { transition-delay: 0.6s; }
.show .back-to-position.delay-3 { transition-delay: 0.9s; }
.show .back-to-position.delay-4 { transition-delay: 1.2s; }
.show .back-to-position.delay-5 { transition-delay: 1.5s; }
.show .back-to-position.delay-6 { transition-delay: 1.8s; }
/* ===========================================================
    HEADER
=========================================================== */
.header { position:fixed; top:0; left:0; width:100%; z-index:200; background:#fff; box-shadow:0 2px 20px rgba(0,0,0,0.06); opacity:0; visibility:hidden; transform:translateY(-100%); transition:opacity .4s, transform .4s, visibility .4s; pointer-events:none; }
.header.is-visible { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.header-inner, .main-header-inner { width:1300px; height:100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.header .logo img, .main-header .logo img { height:67px; display:block; }
.header .gnb, .main-header .gnb { display:flex; gap:40px; list-style:none; }
.header .gnb a { font-size:1.6rem; font-weight:500; color:#111; text-decoration:none; transition:color .3s; }
.header .gnb a:hover { color:#f28a00; }
.main-header { position:absolute; top:0; left:0; width:100%; z-index:50; opacity:1; visibility:visible; transition:opacity .4s, visibility .4s; }
.main-header.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.main-header .gnb a { font-size:1.8rem; font-weight:500; color:#fff; text-decoration:none; transition:opacity .3s; }
.main-header .gnb a:hover { color:#f28a00; }
#main, #section01, #section02, #section03, #section04, #section05, #section06 { scroll-margin-top:80px; }
/* ===========================================================
    Main Visual
=========================================================== */
.main { position:relative; height:100vh; background:#111; color:white; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.main-bg { position:absolute; inset:0; background:url(../images/visual.jpg) no-repeat center center / cover; transform:scale(1.15); animation:mainBgZoom 2.2s ease-out forwards; z-index:0; will-change:transform, opacity; }
/* z-index:1; */
.main-header, .main-inner { will-change:transform, opacity; }
@keyframes mainBgZoom{
from { transform:scale(1.15); }
to { transform:scale(1); }
}
/* scroll down arrow */
.arrow-down span { display: block; width: 3em; height: 3em; border-bottom: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin: -10px; animation: animate-arrows 2s infinite; }
@keyframes animate-arrows{
0% { opacity: 0; transform: rotate(45deg) translate(-1.5em, -1.5em); }
50% { opacity: 1; }
100% { opacity: 0; transform: rotate(45deg) translate(1.5em, 1.5em); }
}
.main-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; }
.main h1 { font-size:6.4rem; font-weight:300; line-height:160%; }
.main-content h1.is-typing::after { content:"|"; display:inline-block; margin-left:4px; font-weight:300; animation:mainTypingCursor .8s step-end infinite; }
@keyframes mainTypingCursor{
0%, 100% { opacity:1; }
50% { opacity:0; }
}
.main-content p { margin-top:34px; font-size:3.6rem; color:#ffffff; }
.scroll-down { position:absolute; left:0; right:0; bottom:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.scroll-down-text { font-size:1.3rem; letter-spacing:0.08em; text-transform:capitalize; color:#fff; }
.scroll-down-arrow { width:12px; height:12px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); animation:scrollDownArrow 1.6s ease-in-out infinite; }
@keyframes scrollDownArrow{
0%, 100% { transform:rotate(45deg) translateY(0); opacity:1; }
50% { transform:rotate(45deg) translateY(8px); opacity:0.4; }
}
/* ---------------- Quick Menu ---------------- */
.quick-menu { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:300; height: 376px; }
.quick-toggle { position: absolute; left: -1.75rem; top: 50%; transform: translate(-50%, -50%); z-index: 2; flex-shrink: 0; width: 56px; height: 376px; padding: 26px 0; border: none; border-radius: 16px 0 0 16px; background: linear-gradient(180deg, #EA8201 0%, #E16900 100%); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.quick-icon img { display:block; width:18px; transition:transform .4s ease; transform: scaleX(-1);}
.quick-label { writing-mode:vertical-rl; text-orientation:mixed; font-size:1.6rem; font-weight:500; letter-spacing:1px; white-space:nowrap; transition:opacity .3s ease, visibility .3s ease; }
.quick-menu.is-open .quick-toggle { height: 67px; top: 0; left: -3.8rem; transform: translate(-1.75rem, 0); gap:0; }
.quick-menu.is-open .quick-label { display:none; }
.quick-panel { position:relative; width:0; height: 100%; padding:0; overflow:hidden; background:#fff; border-radius:0; box-shadow:none; opacity:0; visibility:hidden; flex-shrink:0; transition:transform .45s ease, opacity .45s ease, visibility .45s; }
.quick-menu.is-open .quick-panel { width:320px; opacity:1; visibility:visible; box-shadow:-8px 0 30px rgba(0,0,0,0.12); overflow-y:hidden; }
.quick-menu.is-open .quick-icon img { transform: scaleX(-1) rotate(180deg); }
.quick-panel-head { padding:30px 20px 20px 20px; border-bottom:1px solid #eee; margin-bottom:8px; }
.quick-panel-head strong { display:block; font-size:2rem; font-weight:700; color:#111; margin-bottom:10px; }
.quick-panel-head p { font-size:1.4rem; line-height:1.6; color:#888; }
.quick-panel-list li { display:flex; align-items:center; gap:14px; padding:20px; border-bottom:1px solid #eee; font-size:1.5rem; color:#333; }
.quick-panel-list li:last-child { border-bottom:none; }
.quick-panel-list li img { flex-shrink:0; width:24px; height:24px; }
.quick-panel-list li em { font-style:normal; color:#999; }
/* ===========================================================
    SECTION01 - INTRODUCTION
=========================================================== */
.section01 { min-height:100vh; background:#FAFAFA; position:relative; overflow:hidden; overflow-x:clip; padding-top:200px; }
.section01::before, .section01::after { content:""; position:absolute; pointer-events:none; z-index:0; background-repeat:no-repeat; background-position:center; background-size:cover; }
.section01::before { top:0; right:0; width:42rem; height:42rem; background-image:url(../images/section01_grapic01.png); }
.section01::after { bottom:0; left:0; width:50rem; height:50rem; background-image:url(../images/section01_grapic02.png); }
.section01 .inner { position:relative; z-index:1; width:1300px; margin:auto; }
.headline { font-size:4.8rem; line-height:1.3; font-weight:300; margin-bottom:50px; text-align: center; }
.headline-line { display:inline-block; color:#cfcfcf; transition:.5s; }
.typing { min-height: 110px; font-size:2.6rem; line-height:1.9; color:#666666; white-space:pre-wrap; text-align: center; margin-bottom:80px; word-break:keep-all; overflow-wrap:normal; }
.section01-list { display:flex; justify-content: center; gap: 150px; }
.section01-list li { display:flex; flex-direction: column; align-items: center; gap: 20px; }
.section01-list li h3 { font-size:2.1rem; font-weight:500; color:#212121; }
.flow-bg__area { position: absolute; left:-100%; bottom: 6rem; }
.flow-bg__area .flow-bg__wrap { display: flex; flex: 0 0 auto; overflow: hidden; transition: 0.3s; }
.flow-bg__area .item { width: 300rem; height: 10rem; line-height: 1; animation: flowAni 50s linear infinite; }
.flow-bg__area .item:before { position: absolute; width: 100%; height: 100%; background: url(../images/secrion01_slide_frame.svg) center / contain no-repeat; content: ""; left: 0; }
/* 흐르는 배경 */
@keyframes flowAni {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
/* ===========================================================
    SECTION02 - CARD
=========================================================== */
.section02 { position:relative; min-height:100vh; background:white; overflow-x:clip; }
.section02-title { padding-top:180px; }
.title { font-size:6.4rem; line-height:1.3; color:#bfbfbf; margin-bottom:120px; }
.cards { position: absolute; left: 0; bottom: 60px; width:100%; display:flex; flex-direction:column; gap:40px; }
.card2 h3, .card3 h3 { margin-top:60px; }
.card-wrap { width:100%; overflow:hidden; color:#fff; }
.card1-wrap { background:url(../images/business_img01.jpg) no-repeat center center / cover; }
.card2-wrap { background:url(../images/business_img03.jpg) no-repeat center center / cover; }
.card3-wrap { background:url(../images/business_img02.jpg) no-repeat center center / cover; }
.card { width:1300px; margin:0 auto; display: flex; flex-direction: column; justify-content: center; font-weight:300; }
.card h3 { font-size:4.8rem; font-weight: 600; margin-bottom:40px; }
.card1 h3, .card1 p, .card1 .btn-primary { opacity:1; }
.card2 h3, .card2 p, .card2 .btn-primary,
.card3 h3, .card3 p, .card3 .btn-primary { opacity:0; }
.card p { line-height:160%; font-size:2.8rem; color:#E8E8E8; margin-bottom:100px; word-break:keep-all; overflow-wrap:normal; }
.card1 { height:calc(100vh - 280px); }
.card2, .card3 { height:60px; overflow:hidden; }
.btn-primary { width: fit-content; display: block; border:1px solid #fff; color:#fff; padding:13px 40px; border-radius:30px; font-size:1.6rem; font-weight:500; transition:all 0.3s ease; }
.btn-primary:hover { background:#f28a00; border-color:#f28a00; }
.btn-primary img { margin-left:10px; }
/* ===========================================================
    SECTION03 - HISTORY
=========================================================== */
.section03 { position:relative; background:#fff; padding-bottom:120px; }
.section03 .inner { padding:80px 0 0; }
.history-top .sub-title { font-size:1.8rem; color:#666; margin-bottom:15px; }
.top_title { width:1300px; margin:0 auto; overflow-x:clip; }
.top_title h2 { margin:0 auto 60px; font-size:4.6rem; font-weight:300; }
.history-tabs-sticky { position:sticky; top:100px; z-index:20; padding:15px 0; background:#fff; }
.history-tabs { display:flex; justify-content: center; gap:20px; }
.history-tabs .tab { border:none; background:#f4f4f4; color:#999; padding:18px 45px; border-radius:50px; font-size:2.2rem; transition:.4s; cursor:pointer; }
.history-tabs .tab.active { background:#f28a00; color:#fff; }
/* ---------------- */
.history-wrap { margin:60px auto; display:flex; justify-content:space-between; align-items:flex-start; gap:80px; }
.history-left { width:45%; position:sticky; top:300px; align-self:flex-start; }
.history-left-content { transition:opacity .4s; }
.history-left-content.is-changing { opacity:0; }
.history-title { font-size:3.4rem; line-height:1.5; letter-spacing:-1px; font-weight:500; color:#313131; margin-bottom:100px; }
/* .history-image { overflow:hidden; }
.history-image img { width:100%; display:block; transition:.5s; } */
.history-year { display:block; margin-bottom:20px; font-size:8rem; font-weight:700; color:#efefef; line-height:1; letter-spacing:-5px; font-variant-numeric:tabular-nums; }
.history-year .year-digit { position:relative; display:inline-block; height:1em; overflow:hidden; vertical-align:top; line-height:1; letter-spacing:0; }
.history-year .year-digit::before { content:"0"; visibility:hidden; display:inline-block; height:1em; line-height:1; }
.history-year .year-digit-strip { position:absolute; top:0; left:0; width:100%; display:flex; flex-direction:column; will-change:transform; }
.history-year .year-digit-num { height:1em; line-height:1; display:block; text-align:center; flex-shrink:0; }
.history-year .year-text { display:inline-block; vertical-align:top; line-height:1; letter-spacing:-6px; }
/* ---------------- */
.history-right { width:55%; overflow-x:clip; }
.step-intro { display:none; }
.step { display:flex; flex-direction:column; justify-content:flex-start; padding:100px 0; min-height:calc(100vh - 200px); }
.step.step01 {  justify-content:center; padding-top: 0; padding-bottom: 0; }
.step.step02 { padding-top:50px; }
.step.step03 { padding-top:0;}
.step:first-child { padding-top:0; }
.step:last-child { padding-bottom:100px; }
.timeline { position:relative; padding-left:40px; }
.timeline.timeline03 .timeline-item { margin-bottom: 18px;}
.timeline .line { position:absolute; left:15px; top:15px; width:2px; height:calc(100% - 30px); background:#ddd; }
.timeline .line.line02 { top: 25px;}
.timeline .line.line04  { top: 30px; }
.timeline-item { position:relative; margin-bottom:40px; }
.timeline-item:last-child { margin-bottom:0; }
.timeline-content { position:relative; grid-template-columns:minmax(0, 1fr) auto; gap:8px 12px; align-items:start; max-width:100%; vertical-align:top; }
.timeline-content .timeline-con-list-wrap{ margin-top: 10px;}
.timeline-item p { font-size:2.1rem; font-weight:600; margin:0; word-break:keep-all; overflow-wrap:normal; }
.timeline-item p.timeline-con-list { font-size: 1.8rem; font-weight: 500; margin-top: 10px;}
/* .timeline-tag { position:relative; margin-left:12px; padding:10px 22px; border-radius:10px; background:#3B3B3B; color:#fff; font-size:1.8rem; font-weight:600; white-space:nowrap; } */
/* .timeline-tag::before { content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%); border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #3B3B3B; } */
.timeline-long .line { height:calc(100% - 40px); }
.timeline-item .dot { position:absolute; left:-30px; top:10px; width:12px; height:12px; border-radius:50%; background:#ddd; transition:.4s; }
.timeline-item.active .dot { background:#E98201; border:none; box-shadow:0 0 0 10px #FFECD6; }
/* ---------------- */
.history-result { background:#f7f7f7; border-radius:25px; padding:32px 40px; margin-top:40px; }
.history-result.hr_01{ margin-top: 100px; }
.history-result.hr_03 { margin-top: 10px;}
.history-result h4 { color:#f28a00; font-size:1.9rem; margin-bottom:10px; }
.result-box { display:flex; justify-content:space-between; align-items:end; color:#212121; }
.result-box p { font-size:1.8rem; font-weight:600; }
.result-box strong { font-size:1.9rem; }
.result-box .count { font-size:3.3rem; font-weight: 600; color:#E74500; }
/* ===========================================================
    SECTION04 - CERTIFICATIONS
=========================================================== */
.section04 { position:relative; padding:140px 0; background:#f3f3f3; overflow:hidden; }
.section04::before { content: ""; position: absolute; left: 0px; top: 0%; width: 1080px; height: 100%; background-image: url(../images/section04_grapic.svg); background-size: 100%; background-repeat: no-repeat; opacity: 0.4; }
.section04 .inner { position:relative; z-index:1; display: flex; align-items: stretch; gap: 80px; justify-content: flex-end; }
.cert-left { position: absolute; top: 50%; left: 50%; width: 1300px; margin: 0 auto; display: flex; transform: translate(-50%, -50%); flex-direction:column; justify-content:space-between; min-height:520px; }
.cert-top h2 { margin-bottom:0; line-height:1.4; }
.section04 .top_title{margin-left: 0;}
.top_title .sub-title { font-size:1.8rem; color:#666; margin-bottom:10px; }
.cert-nav { display:flex; gap:16px; }
.cert-nav button { width:56px; height:56px; border:1px solid #111; border-radius:50%; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .3s, opacity .3s; }
.cert-nav button:hover:not(:disabled) { background:rgba(0,0,0,0.05); }
.cert-nav button:disabled { opacity:0.3; cursor:default; }
.cert-nav button img { display:block; }
.cert-nav-mb { display:none; }
@media (max-width:1280px){
    .cert-left .cert-nav { display:none; }
    .cert-nav-mb { width: 100%;position: absolute;top:50%;display:flex; justify-content:space-between; padding: 0 3rem;z-index: 2;}
}
@media (max-width: 780px){
    .cert-nav-mb{left:0}
}
.cert-right { width: 1050px; min-width:0; overflow:hidden; }
.cert-slider { overflow:hidden; cursor:grab; user-select:none; touch-action:pan-y; }
.cert-slider.is-dragging { cursor:grabbing; }
.cert-slider.is-dragging .cert-card { pointer-events:none; }
.cert-track { display:flex; gap:24px; transition:transform .55s ease; will-change:transform; }
.cert-card { flex:0 0 calc((100% - 48px) / 3); background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.06); cursor:pointer; }
.cert-card-thumb { position:relative; aspect-ratio:4/5; background:#fafafa; padding:24px; }
.cert-card-thumb::after { content: ""; position: absolute; width: 55px; height: 55px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.45) url(../images/reading_icon.svg) center / 30px no-repeat; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cert-card:hover .cert-card-thumb::after { opacity:1; }
.cert-card-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.cert-card-body { padding: 34px; text-align: center; }
.cert-card-title { font-size:1.8rem; font-weight:600; margin-bottom:10px; color:#585858; }
.cert-card-desc { font-size:1.6rem; color:#585858; }
/* ===========================================================
    SECTION06 - MAJOR CLIENTS
=========================================================== */
.section06 { width: 100%; padding:140px 0; background:#fff; background:url(../images/clients_bg.jpg) no-repeat center center / cover; }
.section06 .inner { width:1300px; margin:0 auto; }
.major-head { display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:120px; color:#fff; }
.major-head h2 { font-size:4.8rem; font-weight:600; line-height:1.4; margin-bottom:0; }
.major-head p { font-size:2rem; font-weight:300; line-height:1.4; margin-bottom:0; word-break:keep-all; overflow-wrap:normal; }
.major-list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:34px; perspective:1000px; }
.major-item { width:100%; min-width:0; min-height:100px; background-color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:20px; }
.major-item img { display:block; width:160px; height:40px; object-fit:contain; }
/* ===========================================================
    SECTION05 - PRODUCT
=========================================================== */
.section05 { padding:140px 0; background:#fff;overflow: hidden; }
.product-head { display:flex; align-items:flex-end; gap:40px; margin-bottom:60px; }
.product-head-left h2 { font-size:4.6rem; font-weight:300; line-height:1.4; margin-bottom:0; }
.top_title h2,
.section05 .product-head-left h2,
.section04 .cert-top h2 { word-break:keep-all; overflow-wrap:normal; }
.product-desc { font-size:2.1rem; line-height:1.7; color:#555555; word-break:keep-all; overflow-wrap:normal; }
.product-slider-wrap { position:relative; width: 1300px; margin: 0 auto; box-sizing: border-box; }
.product-slider { cursor:grab; user-select:none; touch-action:pan-y; }
.product-slider.is-dragging { cursor:grabbing; }
.product-slider.is-dragging .product-card { pointer-events:none; }
.product-track { display:flex; gap:25px; transition:transform .55s ease; will-change:transform; }
.product-card { position:relative; flex:0 0 calc((100% - 80px) / 3.98); overflow:hidden; cursor:pointer; }
.product-card:hover .product-title { text-decoration:underline; text-underline-offset:3px; transition: 0.5s;}
.product-more { position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border:none; background: rgba(151, 112, 112, 0.6); color:#fff; font-size:2rem; line-height:1; cursor:pointer; transition:background .3s; }
.product-more  img{width:20px;}
.product-card:hover .product-more { background:#212121; }
.product-thumb { display:flex; align-items:center; justify-content:center; height:180px; background:#F7F7F7; overflow:hidden; }
.product-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.product-thumb:hover img { transform:scale(1.12); }
.product-thumb.is-fallback { overflow: hidden; }
.product-thumb.is-fallback img { max-width:100%; max-height:100%; object-fit:cover; transform: scale(1.5);}
.product-thumb.is-preparing { flex-direction:column; gap:12px; }
.product-thumb.is-preparing span { font-size:1.6rem; color:#666; }
.product-body { display: flex; flex-direction: column; justify-content: space-between; }
.product-info { margin-top:20px; margin-bottom:20px; }
.product-title { font-size:1.5rem; font-weight:600; line-height:1.4; margin-bottom:12px; }
.product-text { font-size:1.4rem; line-height:1.6; color:#666; min-height:44px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.product-btns { display:flex; flex-wrap:wrap; gap:8px; }
.product-btns a, .product-btns button { display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border:0; border-radius:3px; font-size:1.2rem; font-weight:300; text-decoration:none; white-space:nowrap; cursor:pointer; font-family:inherit; }
.product-btns .btn-primary { background:#f28a00; color:#fff; }
.product-btns .btn-outline { border:1px solid #f28a00; color:#f28a00; background:#fff; }
.product-btns .btn-dark { background:#333; color:#fff; }
.product-prev, .product-next { position:absolute; top:50%; z-index:10; width:56px; height:56px; border:none; background:#f28a00; cursor:pointer; display:flex; align-items:center; justify-content:center; transform:translateY(-50%); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, visibility .3s; }
.product-slider-wrap:hover .product-prev:not(.is-hidden), .product-slider-wrap:hover .product-next:not(.is-disabled) { opacity:1; visibility:visible; pointer-events:auto; }
.product-prev { left:0; }
.product-next { right:0px; }
.product-prev img, .product-next img { display:block; filter:brightness(0) invert(1); }
.product-prev.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.product-next.is-disabled { opacity:0; visibility:hidden; pointer-events:none; }
/* ===========================================================
    FOOTER
=========================================================== */
.footer { background:#111; color:#fff; padding:60px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; }
.footer-left { flex:1; width:100%;}
.footer-top { display:flex; align-items:center; gap:40px; margin-bottom:28px; }
.footer-logo img { height:40px; display:block; }
.footer-links { display:flex; align-items:center; gap:12px; padding-top: 10px;}
.footer-link { font-size:1.5rem; color:#fff; text-decoration:none; transition:opacity .3s; }
.footer-link:hover { opacity:0.7; }
.footer-link.is-bold { font-weight:700; }
.footer-divider { color:#555; font-size:1.4rem; }
.footer-info { margin-bottom:24px; }
.footer-info-list { display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none; }
.footer-info-list > li { font-size:1.4rem; line-height:1.8; color:#999; word-break:keep-all; overflow-wrap:normal; }
/* 모바일 브라우저가 전화번호를 자동 링크로 바꿔도 색 유지 */
.footer-info-list a, .footer-info-list a[href^="tel"] { color:inherit; text-decoration:none; }
.footer-info-divider span { color:#555; margin:0 6px; }
.footer-copy { font-size:1.3rem; color:#666; }
.content-sections { position:relative; }
.footer-top-btn-anchor { position:absolute; top:0; right:20px; bottom:0; width:64px; z-index:200; pointer-events:none; }
.footer-top-btn { position:sticky; top:calc(100vh - 104px);     border: 1px solid #e9e9e9;flex-shrink:0; width:64px; height:64px; border-radius:50%; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:auto; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s, transform .3s, box-shadow .3s; }
.footer-top-btn.is-visible { opacity:1; visibility:visible; }
.footer-top-btn:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.footer-top-btn img { display:block; width:16px; height:auto; }


/* 팝업 전체 영역 */
.renewal-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none; /* JS에서 열어줌 */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 배경 */
.renewal-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 10, 30, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 팝업 */
.renewal-popup__content {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    overflow: hidden;
    border-radius: 22px;
    background: #061a3a;
    animation: renewalPopupShow .45s ease;
}

.renewal-popup__body{
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    background:#fff;
    color:#111;
}
.renewal-popup__body br,
.renewal-popup__body p {
display : none;
}

.renewal-popup__slider{
    background:#fff;
}

.renewal-popup__slide{
    display:block;
}

.renewal-popup__slider.slick-slider{
    position:relative;
    display:block;
    box-sizing:border-box;
    user-select:none;
    touch-action:pan-y;
}

.renewal-popup__slider .slick-list{
    position:relative;
    display:block;
    overflow:hidden;
    margin:0;
    padding:0;
}

.renewal-popup__slider .slick-track{
    position:relative;
    top:0;
    left:0;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.renewal-popup__slider .slick-track::before,
.renewal-popup__slider .slick-track::after{
    display:table;
    content:"";
}

.renewal-popup__slider .slick-track::after{
    clear:both;
}

.renewal-popup__slider .slick-slide{
    display:none;
    float:left;
    min-height:1px;
}

.renewal-popup__slider.slick-initialized .slick-slide{
    display:block;
}

.renewal-popup__slider .slick-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:absolute;
    left:50%;
    bottom:18px;
    z-index:2;
    transform:translateX(-50%);
    margin:0;
    padding:0;
    background:transparent;
}

.renewal-popup__slider .slick-dots li{
    display:flex;
    align-items:center;
    justify-content:center;
}

.renewal-popup__slider .slick-dots button{
    width:9px;
    height:9px;
    border:0;
    border-radius:50%;
    padding:0;
    background:#b7c0cc;
    font-size:0;
    line-height:0;
    cursor:pointer;
    transition:background .25s, transform .25s;
}

.renewal-popup__slider .slick-dots .slick-active button{
    background:#00aeea;
    transform:scale(1.25);
}

.renewal-popup__body p{
    font-size:1.5rem;
    line-height:1.7;
}

.renewal-popup__body a{
    color:inherit;
}

/* 이미지 */
.renewal-popup__content img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
}

.renewal-popup__body > img:only-child,
.renewal-popup__body > a:only-child img,
.renewal-popup__slide img:only-child{
    aspect-ratio:1/1;
    object-fit:cover;
}

/* 하단 */
.renewal-popup__bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 20px;
    background:#fff;
}

/* 오늘 하루 */
.renewal-popup__today{
    display:flex;
    align-items:center;
    gap: 6px;
    color:#282828;
    font-size:14px;
    cursor:pointer;
}

.renewal-popup__today input{
    width:17px;
    height:17px;
    accent-color:#00bceb;
}

/* 닫기 버튼 */
#popupCloseBtn{
    padding:10px 22px;
    background:#00aeea;
    border:none;
    border-radius:8px;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

#popupCloseBtn:hover{
    background:#0094c8;
}

/* 등장 */
@keyframes renewalPopupShow{
    from{
        opacity:0;
        transform:translateY(30px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}


/* 모바일 */
@media (max-width:420px){
    .top_title h2{
        margin: 0 auto 15px;
    }
    .section03 .history-wrap{
        margin: 20px 0 0;
    }

    .renewal-popup{
        position:fixed;
        inset:0;
        z-index:9999;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        padding:0;
    }

    .renewal-popup__overlay{
        position:absolute;
        inset:0;
        background:rgba(0, 10, 30, 0.58);
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
    }

    .renewal-popup__content{
        width:88%;
        max-width:360px;   /* 기존 420px → 340px */
        margin-bottom: 12px;
        border-radius:18px;
    }

    .renewal-popup__body{
        max-height:60vh;   /* 기존보다 조금 작게 */
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

     .renewal-popup__content img{
        max-height:100%;
        object-fit:cover;
    }

    .renewal-popup__bottom{
        padding:10px 14px;
    }

    .renewal-popup__today{
        font-size:13px;
    }

    #popupCloseBtn{
        padding:8px 16px;
        font-size:13px;
    }

    .product-btns a,
    .product-btns button{
        padding:7px 13px;
        font-size:1.5rem;
    }
}

/* 모바일 바텀시트 등장 */
@keyframes renewalPopupBottomShow{
    from{
        opacity:0;
        transform:translateY(100%);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}