/* ========== [ camapgin general ] ========== */
/* loader */
#wrap_dark { display: none; }
#wrap_loading_img { display:none; position:fixed; left:50%; top:50%; }

/* 캠페인 탭메뉴 */
div.campaign-tab, div.campaign-tab > a {
    box-sizing: border-box;
}
div.campaign-tab {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 30px 0;
    border-top: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
}
div.campaign-tab > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
}

/* 참여 & 기부하기 컨테이너 */
div.participate-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    height: 100px;
    background-color: var(--campaign-bg);
}
div.participate-container h3.participate-title {
    padding:12px 24px;
    font-size: 24px;
    border-radius: 40px;
    font-weight: bold;
    color: #fff;
    background-color: var(--campaign-primary);
}
div.participate-container div.participate-context {
    text-align: center;
    line-height: 38px;
    font-size: 22px;
    font-weight: bold;
    color: var(--campaign-primary);
}
div.participate-container div.participate-context > p {
    font-size: 20px;
    font-weight: normal;
}
div.participate-container div.participate-context > b { font-size: 32px; }
div.participate-container button.participate-button {
    width: 120px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    background: var(--campaign-primary);
    border: 0;
    font-weight: bold;
}
div.participate-container > form, div.participate-container > div {
    display: flex;
    gap: 4px;
}
div.participate-container input {
    text-align: center;
    border: 0;
    font-size: 18px;
}
div.participate-container input:first-child { width: 140px; }
div.participate-container input:nth-child(2) { width: 180px; }

/* 영상 컨텐츠 */
#movie-player {
    position: relative;
    width: 100%;
    height: calc(100vw * 0.5625);
    max-height: 675px;
    overflow: hidden;
}
#movie-player::-webkit-scrollbar { display: none; }

/* swipers */
.swiper-btn { background-color: transparent; }
.swiper-button-prev {
    background-image:url('/coopmall/images/r16/main/left.png');
    background-repeat: no-repeat;
    left: 15%;
}
.swiper-button-next {
    background-image:url('/coopmall/images/r16/main/right.png');
    background-repeat: no-repeat;
    right: 15%;
}
.swiper-button-prev:after,
.swiper-button-next:after {display: none;}

/* general texts */
br.mobile { display: none; }


/* ========== [ mobile : break-point: 1024px ] ========== */
@media screen and (max-width: 1023px) {
    /* 캠페인 탭메뉴 */
    div.campaign-tab { margin-top: 0; } 
    div.campaign-tab > a {
        font-size: 15px;
        line-height: 1.2;
        padding: 5px 2px;
    }

    /* 참여 & 기부하기 컨테이너 */
    div.participate-container {
        flex-direction: column;
        gap: 8px;
        height: auto;
        padding: 20px 0;
    }
    div.participate-container h3.participate-title {
        padding: 10px 22px;
        font-size: 15px;
        line-height: 1.2;
    }
    div.participate-container div.participate-context {
        font-size: 16px;
        line-height: 1.4;
    }
    div.participate-container div.participate-context > p { font-size: 16px; }
    div.participate-container div.participate-context > b { font-size: 22px; }
    div.participate-container button.participate-button {
        width: 100px;
        font-size: 16px;
    }
    div.participate-container input { font-size: 16px; }
    div.participate-container input:first-child { width: 80px; }
    div.participate-container input:nth-child(2) { width: 140px; }

    /* general texts */
    br.mobile { display: block; }
}


/* ========== [ 캠페인 별 색깔 지정 ] ========== */
/* 말기 암 환자 기부 참여 */
#donate-cancer {
    --campaign-bg: #ffcdcc;
    --campaign-primary: #e34949;
}
/* 암예방 캠페인 */
#anti-cancer {
    --campaign-bg: #ffebe1;
    --campaign-primary: #ef5306;
}
/* No플라스틱 캠페인 */
#no-plastic {
    --campaign-bg: #43905c;
    --campaign-primary: #ffdf2e;
}
/* 종이팩 재활용 지지 서명 */
#paper-pack {
    --campaign-bg: #dae7fa;
    --campaign-primary: #204280;
}
/* 우리밀 캠페인 */
#our-wheat {
    --campaign-bg: #f4debe;
    --campaign-primary: #88373a;
}
/* 세이브디오션(종료)
#save-ocean {
    --campaign-bg: #0c7bd0;
    --campaign-primary: #ffdf2e;
}
*/
/* GMO 특별법 캠페인(종료) */
#GMO-rules {
    --campaign-bg: #ffe65c;
    --campaign-primary: #008642;
}
/* 캠페인 탭 메뉴 */
#clean-practice #clean-practice-tab,
#donate-cancer #donate-cancer-tab,
#anti-cancer #anti-cancer-tab,
#no-plastic #no-plastic-tab,
#save-ocean #save-ocean-tab,
#paper-pack #paper-pack-tab,
#our-wheat #our-wheat-tab,
#GMO-rules #GMO-rules-tab {
    background-color: #4f4f4f;
    color: #fff;
}