/* BASIC css start */
/* 롤링배너 */
#event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .event-imgs { position: relative; }
#event .MS_img-area { float: left; }
#event .MS_img-area:not(:first-child) { display: none; }
#event .MS_img-area img { width: 100%; }
#event .pagination { position: relative; left: 0; text-align: center; width: 100%; }
#event .pagination .swiper-pagination-switch { display: inline-block; margin: 0 2px; text-indent: -9999px; background: url(/images/d3/m_01/bull/event_now@2x.gif) no-repeat 0 50%; background-size: 19px 7px; width: 10px; height: 10px; }
#event .pagination .swiper-active-switch { background-position: -12px 50%; }
/* //롤링배너 */
.main h3 {font-size:1.250em; display: inline-block; margin:45px 0 18px 0; padding-top:6px; border-top:1px solid #3b3b3b;}
.main .topBanner {margin-top:15px;}
.main .topBanner .topBannerLeft00 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft01 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft02 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft03 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft04 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft05 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft06 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft07 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft08 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft09 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft10 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft11 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft12 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft13 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft14 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft15 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft16 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft17 {width:100%; float:left; position:relative;}
.main .topBanner .topBannerLeft {width:100%; float:left; position:relative;}
.main .topBanner .topBannerBot {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot00 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot02 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot03 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot04 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot05 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot06 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot07 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot08 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot09 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerBot10 {width:100%; float:right; position:relative;}
.main .topBanner .topBannerRight {width:100%; float:right; position:relative;}


.main .topBanner img {width:100%; vertical-align:top;}
.main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}


/* ============================================== */
/* 전역 스타일 및 초기화 (기존 body 스타일과 충돌 없이 추가) */
/* ============================================== */
a {
    text-decoration: none;
    color: inherit;
}

/* 모든 img에 적용되는 기본 스타일 - 로고 문제 해결을 위해 width: 100% 제거 */
img {
    max-width: 100%; /* 모든 이미지는 최대 부모 너비의 100%까지만 허용 */
    height: auto;
    display: block;
    vertical-align: top; /* 이미지 하단 미세 여백 문제 해결 */
}

/* ============================================== */
/* HTML을 건드리지 않고 로고 이미지 확대 문제 해결 (CSS만 사용) */
/* 이 규칙이 다른 일반 img 규칙보다 우선 적용됩니다. */
/* ============================================== */
header#header h1 img {
    height: 27px; /* 로고 높이 고정 (HTML height="27"과 일치) */
    width: auto; /* 로고 너비는 높이에 비례하여 자동으로 조정 */
    max-width: none; /* 다른 img의 max-width: 100%가 로고에 적용되는 것을 방지 */
}


/* ============================================== */
/* 모든 메인 배너 이미지들에 공통적으로 적용될 스타일 및 애니메이션 */
/* ============================================== */

/* 'topBannerLeft'로 시작하는 모든 div 클래스 선택 */
/* .topBannerLeft 클래스도 포함하도록 선택자 유지 */
.topBannerLeft, [class^="topBannerLeft"] {
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* 패딩, 보더가 너비에 포함되도록 */

    /* 모바일 기본값: 세로 정렬 */
    display: block; /* 모바일에서는 각 배너가 한 줄에 하나씩 세로로 정렬되도록 합니다. */
    width: 100%; /* 부모 너비에 꽉 차게 */
    /* === 여백 문제 해결 1: 모바일에서 하단 마진을 0으로 설정 === */
    margin-bottom: 0px; /* 기존 10px에서 0px로 변경 */
}

/* 랜덤 정렬할 배너들을 감싸는 부모 컨테이너 (.topBanner.clearFix) 에 대한 스타일 */
/* 이 컨테이너가 화면 너비를 초과하지 않도록 설정 */
.topBanner.clearFix {
    width: 100%; /* 부모 너비에 맞춰 너비 설정 */
    margin: 0 auto; /* 중앙 정렬 (PC에서 효과적) */
    overflow: hidden; /* 자식 요소가 넘칠 경우 숨김 (수평 스크롤 방지) */
    /* === 여백 문제 해결 2: inline-block 요소 사이의 공백 제거 === */
    font-size: 0; /* inline-block 요소 사이의 공백을 제거 */
}


/* 각 배너 div 내의 <a> 태그에 필요한 스타일 */
.topBannerLeft a, [class^="topBannerLeft"] a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    line-height: 0;
    font-size: 0; /* 부모 font-size:0;에 따라 자식도 0으로 유지 */
}

/* 각 배너 div 내의 img 태그에만 width: 100%와 애니메이션 적용 */
/* ================================================================ */
.topBannerLeft img, [class^="topBannerLeft"] img {
    display: block;
    width: 100%; /* 이 배너 이미지들만 부모 너비의 100%를 차지합니다. */
    height: auto;
    vertical-align: top;
    transform-origin: center center;
    
    /* === 애니메이션 수정: hueShiftEffect 제거 === */
    /* 이제 색상이 변하는 애니메이션은 적용되지 않습니다. */
    animation: subtleWave 3s ease-in-out infinite alternate,
               flashEffect 5s ease-out infinite;
}

/* ============================================== */
/* @keyframes 정의 (hueShiftEffect 제거됨) */
/* ============================================== */

@keyframes subtleWave {
    0% {
        transform: scale(1) translateY(0px);
    }
    50% {
        transform: scale(1.05) translateY(-8px);
    }
    100% {
        transform: scale(1) translateY(0px);
    }
}

@keyframes flashEffect {
    0%, 90%, 100% {
        filter: brightness(1);
    }
    95% {
        filter: brightness(1.5);
    }
    96% {
        filter: brightness(1.1);
    }
}

/* === hueShiftEffect @keyframes 정의도 완전히 제거되었습니다. === */


/* ***** 이 부분이 media query를 통해 넓은 화면에서만 inline-block으로 전환되는 곳입니다. ***** */
/* 미디어 쿼리를 사용하여 PC (태블릿 가로 이상) 에서는 다시 여러 개가 나열될 수 있도록 설정 */
/* 768px 이상 (태블릿 가로 또는 PC) 화면에서 적용 */
@media (min-width: 768px) {
    .topBannerLeft, [class^="topBannerLeft"] {
        display: inline-block; /* PC에서는 다시 가로로 나열 */
        /* calc() 함수를 사용하여 여백을 고려한 너비 설정 */
        width: calc(33.333% - 20px); /* (100% / 3) - (좌우 마진 합) */
        /* === 여백 문제 해결 3: PC에서도 하단 마진을 0으로 설정 === */
        margin: 0 10px 0px 10px; /* 기존 20px에서 0px로 변경 */
        vertical-align: top; /* inline-block 요소 정렬 */
    }

    /* .topBanner.clearFix 에 float이 걸린 요소가 있다면 clear: both; 를 위한 의사 요소 */
    .topBanner.clearFix::after {
        content: "";
        display: block;
        clear: both;
    }
}

/* 480px 이상 767px 이하 (일반적인 스마트폰 가로 모드 또는 소형 태블릿) 화면에서 적용 */
@media (min-width: 480px) and (max-width: 767px) {
    .topBannerLeft, [class^="topBannerLeft"] {
        display: inline-block; /* 이 크기에서는 2개씩 나열될 수 있도록 */
        width: calc(50% - 10px); /* 2개씩 배치 (마진 고려) */
        /* === 여백 문제 해결 4: 모바일 가로 모드에서도 하단 마진을 0으로 설정 === */
        margin: 0 5px 0px 5px; /* 기존 10px에서 0px로 변경 */
        vertical-align: top;
    }
}
/* BASIC css end */