/**
 * pages/pr.css — PR 영역 (/pr/*) 전용
 * ------------------------------------------------------------------
 * 페이지에서 $pageCSS = ['pr']; 선언 시 layoutHeader 가 자동 로드.
 *
 * 사용 페이지:
 *   - pr/tv.php (TV 슬라이드 리스트)
 *   - pr/archive.php / archive_0613.php (digital archive)
 *   - hanmac/esg.php (digital archive 일부 재사용)
 *   - campaign/archive.php (digital archive 전체 재사용)
 *   - campaign/smoothsmooth.php / smoothsmooth3.php (.da_main 만 사용)
 *
 * 이전: pc.css 106-128 (TV) + 130-203 (digital archive) → 통합 (2026-06-09)
 */

/* ── TV (pr/tv.php) ── */
.right_menu_wrap { position: relative; overflow: hidden; }
.list_click { display: none !important; }
.vod_list { position: absolute; right: -20vw; top: 0; height: 100%; transition: 0.3s; animation: 2s demo 1; z-index: 9; }
.vod_list .btn { position: absolute; right: 21vw; top: 8vw; width: 101px; height: 80vh; background: url("/resources/images/btn_tv_list.png") no-repeat; cursor: pointer; opacity: 0.8; }
.vod_list .btn:hover { opacity: 1; }
.vod_list ul { position: relative; right: 0; display: flex; flex-direction: column; justify-content: space-between; width: 20vw; height: 100%; background: rgba(0, 0, 0, 0.5); overflow-y: auto; z-index: 1; }
.vod_list li { /* height: -webkit-fill-available; */ border: 1px solid rgba(255, 255, 255, 0.2); border-top: 0; list-style: none; box-sizing: border-box; }
.vod_list a { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 10px 20px; color: #fff; }
.vod_list a h4 { font-weight: 700; }
.vod_list a p { font-size: 0.9em; font-weight: 100; }
.vod_list .tab li.on { background: rgba(0, 50, 31, 0.6); }
.vod_list .tab li:hover { background: rgba(0, 50, 31, 0.8); }
.list_click:checked ~ .vod_list { right: 0; }
.list_click:checked ~ .cbtn { display: block; }
.list_click:checked ~ .contentBody { filter: brightness(0.6); }
.cbtn { position: absolute; right: 0; top: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); transition: 0.3s; z-index: 1; }
.tabBox { position: relative; display: none; }
.tabBox.on { display: block; }
.tabBox iframe { width: 100%; height: 100vh; }

@keyframes demo {
  0% { right: -20vw; }
  20% { right: 0; }
  80% { right: 0; }
  100% { right: -20vw; }
}

/* ── digital archive (pr/archive*, campaign/archive, hanmac/esg, campaign/smoothsmooth*) ── */
.da_main .tab_area li { max-width: none; flex-basis: 50%; }
.da_tit { padding: 40px 0 90px 90px; }
.da_tit h1 { font-size: 42px; font-weight: 700; letter-spacing: -3px; }
.da_tit h1 strong { color: #d19f58; }
.da_tit h2 { font-size: 24px; font-weight: 400; }
.da_tit h3 { font-size: 24px; }

.da_per_area { display: flex; flex-direction: column; }
.da_per { display: flex; }
.da_per .da_per_img01 { flex-basis: 50%; background: url("/resources/images/da_food_img01.jpg") center top no-repeat; background-size: cover; }
.da_per .da_per_img02 { flex-basis: 50%; background: url("/resources/images/da_food_img02.jpg") center top no-repeat; background-size: cover; }
.da_per .da_per_txt { flex-basis: 50%; padding: 7% 6%; background: #014d39; color: #fff; }
.da_per .da_per_txt.left { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.da_per .da_per_txt h2 { font-size: 38px; font-weight: 500; }
.da_per .da_per_txt h2 strong { color: #d19f58; font-size: 0.8em; font-weight: 400; }
.da_per .da_per_txt p.big { padding: 10% 0; font-size: 34px; }
.da_per .da_per_txt p.big span.dot_left,
.da_per .da_per_txt p.big span.dot_right { position: relative; }
.da_per .da_per_txt p.big span.dot_left::after { content: ""; position: absolute; left: -60px; top: -20px; width: 50px; height: 40px; background: url("/resources/images/dot_left.png") no-repeat; }
.da_per .da_per_txt p.big span.dot_right::after { content: ""; position: absolute; right: -60px; bottom: -20px; width: 50px; height: 40px; background: url("/resources/images/dot_right.png") no-repeat; }
.da_per .da_per_txt p.small { font-size: 24px; }

.da_list_wrap { padding: 50px 0 0 5vw; color: #087c5d; }
.da_list_num { width: 100%; border-bottom: 1px solid #014d39; }
.da_list_num span { display: block; width: 40px; height: 40px; background: #014d39; color: #fff; font-size: 0.7em; line-height: 40px; text-align: center; }
.da_list_wrap ul { display: flex; padding: 3vw 0; }
.da_list_wrap li:first-child { flex-basis: 30%; flex-shrink: 0; }
.da_list_wrap li:nth-child(2) { flex-grow: 1; }
.da_list_wrap li .mov iframe { width: 100%; height: 636px; margin: 0 0 2vw; }
.da_list_wrap .img_area { position: relative; height: 636px; background: url("/resources/images/da_klager_img01.jpg") center top no-repeat; background-size: cover; }
.da_list_wrap .img_area .btn_click { display: inline-block; padding: 1.7% 7% 1.3% 4%; background: #077d5d url("/resources/images/btn_plus.png") 90% center no-repeat; color: #fff; font-size: 0.9em; font-weight: 300; cursor: pointer; }
.da_list_wrap .img_area .btn_click:hover { filter: brightness(0.9); }

.da_list_name { padding: 0 2vw 0 0; }
.da_list_name h1 { height: 170px; color: #014d39; font-size: 40px; font-weight: 500; letter-spacing: -3px; }
.da_list_name h1 strong { color: #d19f58; font-size: 0.8em; font-weight: 400; letter-spacing: -2px; }
.da_list_name p.small { font-size: 24px; line-height: 170%; }
.da_list_name h3 { font-size: 42px; font-weight: 700; line-height: 120%; letter-spacing: -3px; }
.da_list_txt { height: 170px; }
.da_list_txt.twoth { height: auto !important; padding: 3vw 0; }
.da_list_txt.klager { height: 140px; }

/* ══════════════════════════════════════════════════════════════════════
 * Responsive — tablet.css/mobile.css 에서 이전 (2026-06-09)
 * ══════════════════════════════════════════════════════════════════════ */

@media all and (max-width: 1024px) {
    /* .right_menu_wrap {
        padding-top: 53px;
    } */

    .sub_contents.tv {
        height: 85vh;
        min-height: auto;
    }

    .vod_list {
        right: -30vw;
        padding-top: 53px;
        top: 0;
        bottom: 0;
    }

    .vod_list .btn {
        background-size: 70px;
        width: 70px;
        top: 12vw;
        right: 30vw;
    }

    .vod_list ul {
        width: 30vw;
        height: 85vh;
    }

    .tabBox iframe {
        height: 85vh;
    }

    .da_main .tab_area {
        width: 100%;
    }

    .da_tit {
        padding: 15px 5vw 30px 5vw;
    }

    .da_tit h1 {
        font-size: 1.8em;
    }

    .da_tit h2 {
        padding: 0px 0;
        font-size: 1.3em;
        line-height: 120%;
    }

    .da_tit h3 {
        padding: 0px 0;
        font-size: 1.3em;
        line-height: 120%;
    }

    .da_per .da_per_txt h2 {
        font-size: 2em;
    }

    .da_per .da_per_txt p.big {
        font-size: 1.3em;
        padding: 5% 5% 6% 6%;
    }

    .da_per .da_per_txt p.big span.dot_left:after {
        left: -30px;
        top: -10px;
        width: 30px;
        height: 20px;
        background-size: contain;
    }

    .da_per .da_per_txt p.big span.dot_right:after {
        right: -30px;
        bottom: -10px;
        width: 30px;
        height: 20px;
        background-size: contain;
    }

    .da_per .da_per_txt p.small {
        font-size: 1.2em;
    }

    .da_list_wrap {
        padding: 30px 5vw 0 5vw;
    }

    .da_list_wrap ul {
        flex-direction: column;
    }

    .da_list_wrap li .mov iframe,
    .da_list_wrap .img_area {
        height: 470px;
    }

    .da_list_wrap .img_area .btn_click {
        background-size: 2vw;
    }

    .da_list_name h1 {
        height: auto;
        font-size: 1.8em;
    }

    .da_list_name h3 {
        height: auto;
        font-size: 1.5em;
    }

    .da_list_name p.small {
        font-size: 1.3em;
    }

    .da_list_txt {
        height: auto;
        padding: 3vw 0 4vw;
    }

    .da_list_txt.klager {
        height: auto;
    }

    .da_m_img {
        margin-top: 40px;
    }
}

@media all and (max-width: 512px) {
    .right_menu_wrap {
        /* margin-top: 53px; */
        padding-top: 0;
        height: 100%;
        background: #000;
        overflow: hidden;
        display: flex;
        flex-direction: column-reverse;
    }

    .right_menu_wrap:after {
        content: "";
        display: block;
        clear: both;
    }

    .sub_contents.tv {
        height: 50vh;
    }

    .tabBox iframe {
        height: 44vh;
    }

    .vod_list {
        top: 0;
        /* margin-top: 44vh; */
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        width: 100%;
        padding: 0;
        position: relative;
    }

    .vod_list .btn {
        display: none;
    }

    .vod_list ul {
        width: 100vw;
        height: auto;
    }

    .da_per {
        flex-direction: column;
    }

    .da_per .da_per_txt.left {
        align-items: flex-start;
        text-align: left;
    }

    .da_per .da_per_img01,
    .da_per .da_per_img02 {
        min-height: 380px;
    }

    .da_per.top {
        flex-direction: column-reverse;
    }

    .da_list_wrap li .mov iframe,
    .da_list_wrap .img_area {
        height: 240px;
    }
}