/* ==========================================================================
   [P] 메인 컨테이너 날씨 테마
   - default="sun" : 기본값
   - theme="sun"   : 맑음
   - theme="rain"  : 비
   - theme="snow"  : 눈
   - theme="cloud" : 흐림
   ========================================================================== */

/* 맑음 */
#container[theme="sun"] .MC_wrap1 { background: url('/00_common/images/template/T0001/main/sun_Bg.png') no-repeat top -11rem center / cover; }
#container[theme="sun"] .weather > .box::before { right: 1.45rem; top: -1.6rem; width: 7rem; height: 7.5rem; background: url('/00_common/images/template/T0001/main/sun_ico.png') no-repeat center center / contain; }
#container[theme="sun"] .weather > .box { background: linear-gradient(-45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 45%), rgba(34,136,226,0.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 -1px 0px rgba(255,255,255,0.5), inset 0 0 3px rgba(255,255,255,0.5), 0 8px 20px rgba(255,255,255,0.3); }

/* 비 */
#container[theme="rain"] .MC_wrap1 { background: url('/00_common/images/template/T0001/main/rain_Bg.png') no-repeat top -11rem center / cover; }
#container[theme="rain"] .weather > .box::before { right: 1.45rem; top: -1.2rem; width: 7.5rem; height: 7.5rem; background: url('/00_common/images/template/T0001/main/rain_ico.png') no-repeat center center / contain; }
#container[theme="rain"] .weather > .box { background: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 45%), rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px 0px rgba(255, 255, 255, 0), inset 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(255, 255, 255, 0.1); }

/* 눈 */
#container[theme="snow"] .MC_wrap1 { background: url('/00_common/images/template/T0001/main/snow_Bg.png') no-repeat top -9rem center / cover; }
#container[theme="snow"] .weather > .box::before { right: 1.2rem; top: -1.6rem; width: 7.5rem; height: 7.5rem; background: url('/00_common/images/template/T0001/main/snow_ico.png') no-repeat center center / contain; }
#container[theme="snow"] .weather > .box { background: linear-gradient(-45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 45%), rgba(0,0,0,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 0px 0px rgba(255,255,255,0.5), inset 0 0 1px rgba(255,255,255,0.5), 0 8px 20px rgba(255,255,255,0.1); }

/* 흐림 */
#container[theme="cloud"] .MC_wrap1 { background: url('/00_common/images/template/T0001/main/cloud_Bg.png') no-repeat top -11rem center / cover; }
#container[theme="cloud"] .weather > .box::before { right: 1.2rem; top: -1.6rem; width: 7.5rem; height: 7.5rem; background: url('/00_common/images/template/T0001/main/cloud_ico.png') no-repeat center center / contain; }
#container[theme="cloud"] .weather > .box { background: linear-gradient(-45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 45%), rgba(0,0,0,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 0px 0px rgba(255,255,255,0.5), inset 0 0 1px rgba(255,255,255,0.5), 0 8px 20px rgba(255,255,255,0.2); }

[class^="MC_wrap"] { position: relative; width: 100%; overflow: hidden;
    --boxGap: 1rem;
    --radius: 1rem;
    --mainfont: 1rem;
    --Titfont: 1rem;
}
[class^="MC_wrap"] .container { position: relative; display: flex; flex-wrap: wrap; }

.MC_wrap1 { padding: calc(var(--boxGap) * 2) 0 calc(var(--boxGap) * 4);  }
.MC_wrap1 .container { gap: calc(var(--boxGap) * 3); }
.MC_wrap1 .conWrap { position: relative; width: 22rem; display: flex; flex-wrap: wrap; gap: calc(var(--boxGap) * 1.5); margin-top: calc(var(--boxGap) * 0.8); justify-content: space-between; }
.MC_wrap2 { margin-bottom: calc(var(--boxGap) * 2.5); overflow: visible; margin-top: calc(var(--boxGap) * -1.5); }
.MC_wrap2 .conWrap .container { width: 100%; gap: 0 calc(var(--boxGap) * 3); padding: calc(var(--boxGap) * 2.25) var(--cntpadding) 0; z-index: 1; } 
.MC_wrap2 .conWrap .container::before { position: absolute; content: ""; width: calc(100% + calc(var(--boxGap) * 7.5)); height: 100%; border-radius: calc(var(--radius) * 4) calc(var(--radius) * 4) calc(var(--radius) * 1.5) calc(var(--radius) * 1.5); background: #f1f7ff; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none !important; }

.MC_wrap2 .conWrap .container::after { position: absolute; content: ""; left: 50%; transform: translateX(-50%); top: calc(var(--mainfont) * -1); background: url('/00_common/images/template/T0001/main/textLong.png')no-repeat center center / contain; width: calc(var(--mainfont) * 90.35); height: calc(var(--mainfont) * 4.75); z-index: -1; }

.MC_wrap3 .container { gap: calc(var(--boxGap) * 5); }
.MC_wrap4 { padding: calc(var(--boxGap) * 2.5) 0; background: url('/00_common/images/template/T0001/main/box10_Bg.png') no-repeat center center / cover; }

[class^="MC_box"] { position: relative; }
.MC_box1 { width: calc(100% - calc(calc(var(--boxGap) * 3) + 22rem)); height: 25rem; }
.MC_box2 { height: 9.7rem; width: 100%; }
.MC_box3 { height: 13rem; width: 100%; }
.MC_box4 { height: 10.2rem; width: 100%; margin-bottom: calc(var(--boxGap) * 3.5); }
.MC_box5 { height: 19.9rem; width: calc(100% - calc(22rem + calc(var(--boxGap) * 3))); }
.MC_box6 { height: 19.9rem; width: 22rem; }
.MC_box7,
.MC_box8 { height: 16.005rem; width: calc((100% - calc(var(--boxGap) * 5)) / 2); }
.MC_box9 { width: 100%; margin-top: calc(var(--boxGap) * 2.25); }
.MC_box10 { width: 100%; }

/****** 반응형 ******/

@media screen and (max-width: 1640px) {
    [class^="MC_wrap"] { 
        --boxGap: 0.9rem;
    }
}

@media screen and (max-width: 1440px) {

    .MC_box1 { width: 100%; height: auto; }
    .MC_wrap1 .conWrap { width: 100%; margin-top: 0; }
    .MC_box2,
    .MC_box3 { width: auto; flex: 1; height: auto; }
    .MC_box4 { height: auto; }
    .MC_box5,
    .MC_box6 { height: 19rem; }

    .MC_box5 { width: calc(100% - calc(18rem + calc(var(--boxGap) * 2))); }
    .MC_box6 { width: 18rem; }

    .MC_wrap1 { padding: calc(var(--boxGap) * 2.5) 0 calc(var(--boxGap) * 3);  }
    .MC_wrap1 .conWrap { align-items: end; }
    .MC_wrap2 { margin-top: 0; }
    .MC_wrap2 .conWrap .container { gap: 0 calc(var(--boxGap) * 2); }
    .MC_wrap3 .container { gap: calc(var(--boxGap) * 3.5); }

}

@media screen and (max-width: 1240px) {
    [class^="MC_wrap"] { 
        --boxGap: 0.8rem;
        --mainfont: 0.95rem;
        --Titfont: 1rem;
    }

    [class^="MC_wrap"] { background-position: top right calc(var(--boxGap) * -1.5) !important; }
    #container .weather > .box::before { width: 5rem !important; height: 5rem !important; top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important; }
    .MC_wrap2 { padding-top: 0; margin-bottom: calc(var(--boxGap) * 4); }
    .MC_wrap2 .conWrap .container { padding: calc(var(--boxGap) * 2) var(--cntpadding) 0; }
    .MC_wrap4 { padding: calc(var(--boxGap) * 4) 0; background-position: center right 100%; }

    .MC_box4 { margin-bottom: calc(var(--boxGap) * 0.6); }
    .MC_box7, .MC_box8 { height: 13.85rem; }  
    .MC_box9 { margin-top: calc(var(--boxGap) * 3); }

    .MC_box5, .MC_box6 { width: 100%; height: auto; }
    .MC_box6 { margin-top: calc(var(--boxGap) * 3); }
}

@media screen and (max-width: 968px) {
    [class^="MC_wrap"] { 
        --boxGap: 0.7rem;
        --mainfont: 0.95rem;
        --Titfont: 1rem;
    }
    .MC_box7, .MC_box8 { width: 100%; }
    .MC_box8 { margin-top: calc(var(--boxGap) * 3); }

    .MC_wrap3 .container { gap: 0; }
    .MC_wrap2 { margin-bottom: calc(var(--boxGap) * 3); }
    .MC_wrap4 { padding: calc(var(--boxGap) * 3) 0; }
}

@media screen and (max-width: 768px) {
    [class^="MC_wrap"] { 
        --boxGap: 0.6rem;
        --radius: 0.85rem;
        --Titfont: 0.95rem;
    }

    .MC_box2, .MC_box3 { flex: none; width: 100%; }
    .MC_box7, .MC_box8 { height: 12.85rem; }

    .MC_wrap2 .conWrap .container { padding: 0 var(--cntpadding) !important; }
    .MC_wrap2 .conWrap .container::after { display: none; }
}

@media screen and (max-width: 580px) {
    .MC_box7, .MC_box8 { height: 14.25rem; }
}

@media screen and (max-width: 480px) {
    [class^="MC_wrap"] { 
        --boxGap: 0.5rem;
        --mainfont: 0.9rem;
        --Titfont: 0.9rem;
    }

    #container .weather > .box::before { width: 4rem !important; height: 4rem !important; }

    .MC_wrap1 { padding: calc(var(--boxGap) * 2) 0;  }
    .MC_wrap1 .container { gap: calc(var(--boxGap) * 2); }  
    .MC_box7, .MC_box8 { height: 10.3rem; }
}

@media screen and (max-width: 380px) {
    [class^="MC_wrap"] { 
        --boxGap: 0.5rem;
        --Titfont: 0.8rem;
    }
    #container .weather > .box::before { width: 3.5rem !important; height: 3.5rem !important; right: 0.75rem !important; }
}