/* BASIC css start */
/**** MAIN ****/

.categoryTop {
    border-top:1px solid #eee;
}


/* =========================================================
   메인 롤링 배너
========================================================= */

#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 {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    vertical-align:top;
}

#event .pagination {
    position:absolute;
    bottom:10px;
    left:0;
    width:100%;
    font-size:0;
    line-height:0;
    text-align:center;
}

#event .pagination .swiper-pagination-switch {
    display:inline-block;
    width:25px;
    height:25px;
    margin:0;
    text-indent:-9999px;
    background:url("/design/zavanas/onedesign/mobile/images/top_banner_btn_off.png") no-repeat 0 0;
    background-size:100% 100%;
}

#event .pagination .swiper-active-switch {
    background:url("/design/zavanas/onedesign/mobile/images/top_banner_btn_on.png") no-repeat 0 0;
    background-size:100% 100%;
}


/* =========================================================
   메인 배너
========================================================= */

.main .mainBanner {
    position:relative;
}

.main .mainBanner a {
    display:block;
    width:100%;
    line-height:0;
}

.main .mainBanner a img {
    display:block;
    width:100%;
    max-width:100%;
    max-height:500px;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    vertical-align:top;
}


/* =========================================================
   메인 이미지 배너 목록
========================================================= */

.main-banner-list {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    font-size:0;
    line-height:0;
}

.main-banner-list > li {
    display:block;
    clear:both;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    list-style:none;
}

/* 모든 메인 배너 사이 간격 4px */
.main-banner-list > li + li {
    margin-top:4px;
}

.main-banner-list > li > a {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
    text-decoration:none;
}

.main-banner-list > li > a > img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    vertical-align:top;
}


/* =========================================================
   타임세일 카테고리 배너: 4열 2행
========================================================= */

.main-banner-list .timesale-category-menu {
    display:block;
    clear:both;
    width:100%;
    height:auto;
    padding:0;
    overflow:hidden;
}

/* 상단 대형 타임세일 배너와의 4px 간격은
   .main-banner-list > li + li 규칙에서 처리 */

.main-banner-list .timesale-category-grid {
    display:block;
    width:auto;
    margin:0 -2px -4px;
    padding:0;
    overflow:hidden;
}

.main-banner-list .timesale-category-grid::after {
    display:block;
    clear:both;
    content:"";
}

.main-banner-list .timesale-category-grid a {
    display:block;
    float:left;
    box-sizing:border-box;
    width:25%;
    margin:0;
    padding:0 2px 4px;
    line-height:0;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}

.main-banner-list .timesale-category-grid img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    vertical-align:top;
}


/* =========================================================
   4 CUT MENU
========================================================= */

.mainEvent {
    clear:both !important;
    width:100%;
    margin:0;
    padding:4px 0 0 !important;
    overflow:hidden;
    box-sizing:border-box;
}

.mainEvent ul.box {
    display:block;
    width:auto;
    margin:0 -2px;
    padding:0;
    list-style:none;
    font-size:0;
    line-height:0;
}

.mainEvent ul.box::after {
    display:block;
    clear:both;
    content:"";
}

.mainEvent ul.box > li {
    display:block;
    float:left;
    box-sizing:border-box;
    width:25%;
    margin:0;
    padding:0 2px;
    list-style:none;
    text-align:center;
}

.mainEvent ul.box > li > div {
    display:block;
    width:100%;
    margin:0;
    padding:0;
}

.mainEvent ul.box > li a {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}

.mainEvent ul.box > li img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    vertical-align:top;
}


/* =========================================================
   게시글
========================================================= */

.mainBoard {
    clear:both;
    position:relative;
    margin:35px 0 0;
}

.mainBoard ul {
    width:100%;
    margin:0;
    padding:0 7px;
    font-size:0;
    line-height:0;
    box-sizing:border-box;
}

.mainBoard li {
    clear:both;
}

.mainBoard li a {
    font-size:10px;
    line-height:18px;
    color:#777;
    letter-spacing:0;
}

.mainBoard .btn {
    position:absolute;
    top:0;
    right:14px;
    z-index:2;
    background:#000;
}

.mainBoard .btn a {
    display:block;
    width:60px;
    padding:0 7px;
    font-size:8px;
    line-height:20px;
    color:#bebebe;
    background:url("/design/zavanas/onedesign/mobile/images/btn_arrow.png") 57px center no-repeat;
    background-size:10px 3px;
}


/* =========================================================
   4 CUT MENU 아래 이벤트 배너
========================================================= */

.eventBanner {
    display:block;
    clear:both;
    width:100%;
    margin:4px 0 0;
    padding:0;
    font-size:0;
    line-height:0;
}

.eventBanner > li,
.eventBanner > div {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    line-height:0;
}

.eventBanner a {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
    text-decoration:none;
}

.eventBanner img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    vertical-align:top;
}

/* HTML에 남아 있는 불필요한 줄바꿈 제거 */
.eventBanner br {
    display:none;
}


/* =========================================================
   숨김 이미지
========================================================= */

.hide-image {
    display:none !important;
}
/* BASIC css end */