@charset "UTF-8";
/* ============================================================
   26년 3분기 ETF DNA LAB 이벤트
   - 이미지는 PC 1920px / MO 720px 기준으로 제작
   - 버튼 좌표는 모두 % 기준이라 어떤 해상도에서도 이미지와 함께 확대/축소 됨
   ============================================================ */

/* 모바일은 KV 이미지 안에 유진투자증권 로고가 들어 있어
   공통 헤더(로고만 있는 흰 바)를 감추고 그만큼 여백도 없앤다. PC 는 그대로 둔다. */
.header-wrap { display: none; }

/* 상단 여백을 스크롤 컨테이너(.section-wrap)가 아닌 내부 래퍼로 옮겨
   sticky 탭의 top 기준점을 브라우저와 무관하게 고정 시킴 */
.section-wrap { padding-top: 0; background-color: #fff; }
.section-wrap > .inner-wrap { padding-top: 0; }
.section-wrap .section { position: relative; }
.section-wrap .section .content-wrap { width: 100%; margin: 0; }
.section-wrap .section .content { position: relative; margin: 0 auto; font-size: 0; line-height: 0; }
.section-wrap .section:last-child { padding-bottom: 0; }

/* 이미지 폭을 넘어서는 화면에서 좌우 여백을 채우는 배경 */
.section-visual { background: linear-gradient(to bottom, #FFDF44 0, #FFDF44 84.046%, #3687FC 84.046%); }
.section-event1 { background-color: #3687FC; }
.section-event2 { background-color: #7A01CC; }
.section-event3 { background-color: #FFCB1F; }

/* ------------------------------------------------------------
   KV
   ------------------------------------------------------------ */
/* '9월 9일 오픈' 말풍선 : 시안에서 꼬리가 고정탭 위로 걸쳐 있어 별도 이미지로 겹쳐 놓는다.
   z-index 는 .tab-nav(90)보다 위, PC 헤더(100)보다 아래. */
.section-visual .kv-bubble { display: none; }

/* ------------------------------------------------------------
   MY 참여 현황 플로팅 배너
   .wrap(고정) 의 자식이라 스크롤과 무관하게 제자리에 머문다.
   위치/크기는 시안(MO 720 기준 147x160, 우측 여백 23) 비율 그대로.
   ------------------------------------------------------------ */
.float-my {
    position: absolute; z-index: 98;
    top: 45rem;              /* 헤더 20rem + 고정탭 22.222rem 아래 */
    right: 3.194%;           /* 23/720 : JS 가 KV 이미지 실측으로 다시 잡는다 */
    width: 20.417%;          /* 147/720 : 위와 같음 */
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}
.float-my.on { opacity: 1; visibility: visible; }
.float-my img { display: block; width: 100%; height: auto; }
/* 이미지 안의 폴더 / X 위치에 맞춘 히트영역 */
.float-my .btn-status { top: 27.5%; left: 6.803%; width: 93.197%; height: 72.5%; }
.float-my .btn-hide   { top: 0; left: 70.068%; width: 29.932%; height: 27.5%; }

/* ------------------------------------------------------------
   상단 고정 탭 (EVENT 01 / EVENT 02)
   ------------------------------------------------------------ */
.tab-nav { position: sticky; top: 0; left: 0; z-index: 90; display: flex; width: 100%; height: 22.222rem; }
/* 상단에 고정된 뒤에는 KV 말풍선(z-index:95)보다 위로 올려 덮는다 */
.tab-nav.stuck { z-index: 96; }
.tab-nav .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    width: 50%; height: 100%; padding-top: 3.944rem;
    border-top: .417rem solid #0A0A0A; border-bottom: .417rem solid #0A0A0A;
    background-color: #0A0A0A; color: #fff; cursor: pointer;
    transition: background-color .25s ease;
}
.tab-nav .tab.on { background-color: #F23C36; }
.tab-nav .tab .txt { font-size: 3.667rem; font-weight: bold; line-height: 4.583rem; text-align: center; white-space: nowrap; }
.tab-nav .tab .txt em { display: block; }
.tab-nav .tab .arrow { display: block; width: 3.333rem; height: 1.944rem; margin-top: 3.833rem; }
.tab-nav .tab .arrow path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* 769~1023px 구간은 헤더가 스크롤 시 숨지 않으므로 헤더 높이만큼 내려서 고정 */
@media all and (min-width: 769px) and (max-width: 1023px) {
    .tab-nav { top: 20rem; }
}

/* ------------------------------------------------------------
   EVENT 01
   ------------------------------------------------------------ */
.section-event1 .btn-test { top: 85.025%; left: 16.528%; width: 66.667%; height: 3.574%; }
.section-event1 .btn-item { top: 89.457%; left: 16.528%; width: 66.667%; height: 3.574%; }

/* ------------------------------------------------------------
   EVENT 02 ( + 오픈 전 coming soon 레이어 )
   ------------------------------------------------------------ */
.section-event2 .btn-guess { top: 77.654%; left: 15.556%; width: 66.667%; height: 7.424%; }

.coming-soon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
/* 카드 밖으로 삐져나온 말풍선·DNA 까지 덮도록 딤 처리를 이미지로 준비했습니다.
   (images/cs-dim-*.png = 보라 배경만 투명, 나머지는 검정 80.8%) */
.coming-soon .dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.coming-soon .cs-text { position: absolute; top: 38.46%; left: 7%; width: 86%; height: auto; }
.coming-soon .cs-confirm { position: absolute; top: 57.386%; left: 25.833%; width: 51.250%; height: 7.572%; cursor: pointer; }
.coming-soon .cs-confirm img { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------
   보너스 EVENT
   ------------------------------------------------------------ */
.section-event3 .btn-share { top: 72.618%; left: 16.667%; width: 66.667%; height: 5.991%; }

/* ------------------------------------------------------------
   유의사항
   ------------------------------------------------------------ */
.footer-wrap .terms-wrap .terms-img { position: relative; }
/* 유의사항 이미지 위의 '보수정보 자세히 보기' 히트영역.
   이미지 높이가 바뀌면 % 도 다시 잡아야 합니다. (현재 MO 720x6212 / PC 1240x2968) */
.footer-wrap .terms-wrap .btn-fee.mo { top: 75.676%; left: 7.361%; width: 33.333%; height: .757%; }
.footer-wrap .terms-wrap .btn-fee.pc { top: 75.551%; left: 3.387%; width: 16.129%; height: 1.283%; }

/* ============================================================
   PC
   ============================================================ */
@media all and (min-width: 1024px) {
    .header-wrap { display: block; }
    .section-wrap > .inner-wrap { padding-top: 4.8rem; }
    .section-visual { background: linear-gradient(to bottom, #FFDF44 0, #FFDF44 64.927%, #3687FC 64.927%); }
    .section-visual .kv-bubble { display: block; position: absolute; top: 90.255%; left: 68.828%; width: 7.422%; height: auto; z-index: 95; }

    /* KV 가 뷰포트 폭에 맞춰 축소되므로 배너도 % 로 함께 줄인다 (시안 1920 기준 147/49) */
    .float-my { top: 12rem; right: 2.552%; width: 7.656%; }

    .tab-nav { top: 4.8rem; height: 5rem; }
    .tab-nav .tab { flex-direction: row; align-items: center; justify-content: center; padding-top: 0; border-top-width: .156rem; border-bottom-width: .156rem; }
    .tab-nav .tab .txt { font-size: 1.375rem; line-height: 1.719rem; }
    .tab-nav .tab .txt em { display: inline; }
    .tab-nav .tab .txt em + em { margin-left: 1.042rem; }
    .tab-nav .tab .arrow { width: 1.25rem; height: .729rem; margin: 0 0 0 6.615rem; }

    .section-event1 .btn-test { top: 85.771%; left: 28.646%; width: 20.833%; height: 3.994%; }
    .section-event1 .btn-item { top: 85.771%; left: 50.729%; width: 20.833%; height: 3.994%; }

    .section-event2 .btn-guess { top: 76.495%; left: 39.583%; width: 20.833%; height: 6.740%; }
    .coming-soon .cs-text { top: 39.512%; left: 30.469%; width: 38.802%; }
    .coming-soon .cs-confirm { top: 57.624%; left: 40.260%; width: 19.219%; height: 8.425%; }

    .section-event3 .btn-share { top: 71.812%; left: 39.583%; width: 20.833%; height: 5.797%; }
}

/* common_scroll.css 의 1200px 이상 고정폭(1200px) 규칙을 무효화 */
@media all and (min-width: 1200px) {
    .section-wrap .inner-wrap .section .content-wrap { width: 100%; margin: 0; }
    .section-wrap .inner-wrap .section:last-child { padding-bottom: 0; }
}

/* 이미지 원본(1920px)보다 넓은 화면에서는 더 이상 확대하지 않음 */
@media all and (min-width: 1920px) {
    .section-wrap .section .content.pc { max-width: 1920px; }
}

/* KV(.content.pc) 가 max-width:1920px 로 고정되는 구간부터는 배너도 고정 크기로 두고
   가운데 정렬된 KV 의 오른쪽 끝에 맞춘다. (960 - 49 = 911) */
@media all and (min-width: 1920px) {
    .float-my { right: calc(50% - 911px); width: 147px; }
}