@charset "UTF-8";
/* ============================================================
   26년 4분기 신용우대 이벤트
   ------------------------------------------------------------
   시안 배경이 단색이라 배경은 CSS 색으로, 내용만 이미지로 얹었습니다.
   섹션 이미지에 시안의 위아래 여백이 포함돼 있어서 섹션 패딩은 0 입니다.
   PC 콘텐츠는 시안(1204px) 의 2/3 인 800px 로 축소해 노출합니다.
   ============================================================ */

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

/* 시안 색 : 배경 #E8FCFF / 신청 바 #12B7C6 */
.section-wrap .section { padding: 0 !important; }
.section-1,
.section-2 { background-color: #E8FCFF; }

/* 이미지가 섹션 높이를 그대로 갖고 있으므로 여백 없이 붙인다 */
.section-wrap .section .content-wrap .content { font-size: 0; line-height: 0; }
.section-wrap .section .content-wrap .content > img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------
   이벤트 신청하기 (하단 고정)
   모바일은 하단 메뉴바(챗봇/메뉴) 위에 뜨도록 14rem 띄운다.
   ------------------------------------------------------------ */
.bottom-navi {
    position: fixed; bottom: 14rem; left: 0; width: 100%; height: 13.3rem; z-index: 99;
    background-color: #12B7C6;
    transition: bottom .3s ease;
}
/* 공통 CSS 의 .btn 은 absolute 라서 여기서는 흐름 안에 두도록 되돌린다 */
.bottom-navi a.btn { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.bottom-navi img { display: block; width: 100%; height: 100%; }
.bottom-navi a.pc { display: none; }
.bottom-navi.hide { bottom: -120px; }

.footer-wrap { bottom: 0; transition: bottom .3s ease; }
.footer-wrap.show { bottom: 14rem; }

@media all and (min-width: 1024px) {
    .header-wrap { display: block; }
    .section-wrap { padding-top: 4.8rem; }

    /* PC 콘텐츠 : 시안 1204px 의 2/3 */
    .section-wrap .section .content-wrap { width: 100%; max-width: 800px; margin: 0 auto; }

    .bottom-navi { bottom: 0; height: 60px; }
    .bottom-navi a.btn { max-width: 800px; margin: 0 auto; }
    .bottom-navi a.mo { display: none; }
    .bottom-navi a.pc { display: block; }

    .footer-wrap { transition: none; }
    .footer-wrap.show { bottom: 0; }
    .footer-wrap .btn-open { bottom: -50px; transition: bottom .3s ease; }
    .footer-wrap.show .btn-open { bottom: 0; }
}

@media all and (min-width: 1200px) {
    .section-wrap .section .content-wrap {
        width: 800px !important;
        margin: 0 auto !important;
    }
}