/* BASIC css start */
#gnb { border-bottom: 0 !important }
/* 메인이미지 */
#slides { position: relative }
#slides .slides-container { display: none }
#slides .scrollable { *zoom: 1; position: relative; top: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; }
#slides .scrollable:after { content: ""; display: table; clear: both; }
.slides-navigation { margin: 0 auto; position: absolute; z-index: 3; top: 46%; width: 100%; }
.slides-navigation a { position: absolute; display: block; font-size: 20px; }
.slides-navigation i { font-size: 46px }
.slides-navigation a.prev { left: 3% }
.slides-navigation a.next { right: 3% }
.slides-pagination { position: absolute; z-index: 3; bottom: 0; text-align: center; width: 100%; }
.slides-pagination a { background: #fff; width: 16px; height: 4px; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; margin: 1px; overflow: hidden; text-indent: -100%; opacity: 0.6; }
.slides-pagination a.current { background: #222; width: 28px; }
/* 카테고리 */
#container .cate {}
#container .cate .list_category {overflow:hidden;}
#container .cate .list_category li {float:left; width:25%; border-bottom:1px solid #eee; border-right:1px solid #eee; box-sizing:border-box; -moz-box-sizing:border-box;}
#container .cate .list_category li:nth-child(5) {border-right:0px none;}
#container .cate .list_category li:nth-child(10) {border-right:0px none;}
#container .cate .list_category li a {display:block;height:32px;line-height:32px;color:#777;text-align:center;text-overflow: clip;white-space: nowrap;overflow: hidden;font-size: 11px;}
/* Notice */
.noticeArea {text-align:center; margin: 15px 0; color:#888; }
.noticeArea a { color:#888; }
.main h3 { font-size: 1.250em; display: inline-block; margin: 45px auto 15px; font-weight: bold; width: 100%; text-align: center; }
.main .topBanner { margin: 4px 2px 0 }
.main .topBanner a { display: block; margin: 0 2px; }
.main .topBanner .topBannerLeft { width: 50%; float: left; position: relative; }
.main .topBanner .topBannerRight { width: 50%; 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; }
.instaImg { width: 100% }
.instaImg img { width: 100%; height: auto; }
/* 롤링배너 */
#event {position:relative;}
#event .MS_img-wrap {position:relative; width:100%; overflow:hidden;}
#event .MS_img-wrap .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%; height:100%; object-fit: cover;}
#event .pagination {position:absolute; bottom:10px; left:0; width:100%;text-align:center; font-size:0; line-height:0;}
#event .pagination .swiper-pagination-switch {display: inline-block;width: 14px; height: 3px; margin: 0 4px; background: #333333;}
#event .pagination .swiper-active-switch {background:#e4655c;}

.MS_img-area {position: relative;display: inline-block;}
.MS_img-area img { width: 100%;height: auto;display: block;}
.overlay-text {position: absolute; bottom: 10%; left: 5%; color: white;  font-size: 10vw; font-weight: bold; z-index: 10;}
.MS_img-area::after {content: ''; position: absolute; left: 0;top: 0;right:60%; width: 100%;height: 100%;
background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0));  pointer-events: none;}
/* //롤링배너 */

#sec3{padding:0px 0;}
#sec3 .sec3_cont{display: fixed;height: 600px;}
#sec3 .sec3_cont>div{flex-grow: 1; height: 200px;width: 100%;}
#sec3 .sec3_cont .sec3_left{}
#sec3 .sec3_cont>div .sec3_inner{width: 100%; height: 600px; position: relative;display: inline-block;overflow: hidden;}
#sec3 .sec3_cont>div .sec3_inner img{
    height: 600px; width: 100%; object-position: center;
    object-fit: cover; display: block; transition: all .1s; }
#sec3 .sec3_cont>div .sec3_inner::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0%; bottom: 0;
    background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.7));}
#sec3 .sec3_cont>div .sec3_inner .txt_area{display: flex; flex-direction: column; align-items: Left; justify-content: left;position: absolute; top: 40%; left: 20px; z-index:100;}
#sec3 .sec3_cont>div .sec3_inner .txt_area :is(*){color: #fff;font-family: 'Lato', sans-serif; transition: all .2s;}
#sec3 .sec3_cont>div .sec3_inner .txt_area p.big{font-size: 30px; font-weight: 550;}


#sec5{padding:0 7px;}
#sec5 .sec5_cont{display: flex; height: auto;}
#sec5 .sec5_cont>div{flex-grow: 1; height: inherit;flex-grow: 1; width: calc(50% - 25px); margin: 0 7px;}
#sec5 .sec5_cont .sec5_left{}
#sec5 .sec5_cont .sec5_right{}
#sec5 .sec5_cont>div .sec5_inner{width: 100%; height: inherit; position: relative; overflow: hidden;}
#sec5 .sec5_cont>div .sec5_inner img{height: 100%; width: 100%;object-fit: cover; display: block; transition: all .1s;
    transition: transform 0.3s ease, filter 0.3s ease;}
    
#sec5 .sec5_cont>div .sec5_inner .txt_area{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#sec5 .sec5_cont>div .sec5_inner .txt_area :is(*){color: #fff;font-family: 'Lato', sans-serif; transition: all .2s;}
#sec5 .sec5_cont>div .txt_area p.big{font-size: 3vw; font-weight: 500; padding-top:2vw;}


.list_shopping3x .items .listPic {height: 100px; width: 100px; object-fit: contain; display: block; margin: auto;}


.custom-btn {
    width: 100px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
                7px 7px 20px 0px rgba(0,0,0,.1),
                4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
}

.btn-12 {
    width: 100px;
    line-height: 30px;
    font-size: 10px;
    position: relative;
    border: none;
    box-shadow: none;
    -webkit-perspective: 50px;
    perspective: 50px;
}

.btn-12 span {
    border: 1px solid #fff;
    background: transparent;
    width: 100px;
    text-align: center;
    position: absolute;
    box-sizing: border-box;
}

.btn-12 span:nth-child(1),
.btn-12 span:nth-child(2) {
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
/* BASIC css end */