/* BASIC css start */
/* section common */
.section{margin-bottom: 40px; margin-top: 35px;}
.section h2{text-align: center; color: #222222; font-size: 28px; font-weight: 500;  font-family: 'Noto Sans KR', sans-serif; margin-bottom:40px; }
.sec_inner{width: 1280px; margin: 0 auto;}
.section .more_item{display: flex; align-items: center; justify-content: center; }
.section .more_item a{display: flex; align-items: center; transition: all .2s; justify-content: center; gap: 10px; border: 1px solid #ccc; padding: 20px 130px;}
.section .more_item a:hover{border-color: #000;}
.section .more_item a p{color: #000; font-size: 15px; font-weight: 500;}
.section .more_item a img{}


/* 메인 비쥬얼 배너 */
.visual-banner {position:relative; overflow:hidden;}
.visual-banner .inner img {width:100%;}
.visual-banner .swiper-horizontal .swiper-pagination-progressbar {width:90px; height:2px; top:auto; bottom:19px; left:50%; margin-left:-45px; background-color:rgba(255,255,255,0.5); }
.visual-banner .swiper-horizontal .swiper-pagination-progressbar span {background: #fff;}
.visual-banner .swiper-button-prev:after,
.visual-banner .swiper-button-next:after {display:none;}
.visual-banner .txtbox {display:inline-block; text-align:center; position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); opacity:0; visibility: hidden; transition:all .8s ease-in; -webkit-transition:all .8s ease-in; }
.visual-banner .swiper-slide-active .txtbox {opacity:1; top:52%; visibility: visible;}
.visual-banner .txtbox .txt01 {color: #5c1924; font-size: 18px; letter-spacing: 2px; font-weight:500; margin-bottom:10px;}
.visual-banner .txtbox .txt02 {line-height:31px; background-color: rgba(247,247,247,.3); color: #f7f7f7; font-weight: bold; font-size: 12px; letter-spacing: 2px; padding:0 30px;}


/* 메인 공지사항 */
.mainTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 40px 15px 15px;
}

.mainTitle h1 {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
}

.mainTitle > a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
}
.notice-list {
  padding: 12px 15px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
   
}


#sec1{width: 100%;}
#sec1 .swiper{}
#sec1 .swiper ul{width: 100%;}
#sec1 .swiper ul li{width: 100%;}
#sec1 .swiper ul li a{display: block;width: 100%;}
#sec1 .swiper ul li a img{width: 100%;}
#sec1 .swiper-pagination{bottom: 60px;}
#sec1 .swiper-pagination-bullet{width: 30px; height: 3px; border-radius: 0; background-color: #fff; }
#sec1 .swiper{position:relative}
#sec1 .swiper_btn_prev{position: absolute; top: 50%; left: 10%; z-index: 10; transform: translateY(-50%); cursor: pointer; } 
#sec1 .swiper_btn_next{position: absolute; top: 50%; right: 10%; z-index: 10; transform: translateY(-50%); cursor: pointer;}


/* sec2 */
.midbanner-sec {position:relative; width:1400px; margin:40px auto; overflow:hidden;}
.midbanner-sec .sec_inner{ overflow:hidden; }
.midbanner-sec .sec_inner ul{display: flex; flex-wrap: nowrap; justify-content: space-between;}
.midbanner-sec .sec_inner ul li{}
.midbanner-sec .sec_inner ul li a{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;}
.midbanner-sec .sec_inner ul li a img{display: inline-block; border-radius:15px; }
.midbanner-sec .sec_inner ul li a img:hover{opacity:.8}
.midbanner-sec .sec_inner ul li a p{ font-family: 'Noto Sans KR', sans-serif; color: #333333; font-size: 15px; font-weight: 500;}
.midbanner-sec .swiper-button-next, .midbanner-sec .swiper-button-prev { font-size:30px; color:#a7a7a7; }
.midbanner-sec .swiper-button-next:after, .midbanner-sec .swiper-button-prev:after { font-size:30px; }

/* sec3, 5 */
:is(#sec3,#sec5) .sec_inner{}
:is(#sec3,#sec5) .sec_inner h2{}
:is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_cate){margin-bottom: 45px;}
:is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_cate) ul{display:flex; justify-content:space-between;border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; border-left:1px solid #eaeaea; border-right:1px solid #eaeaea }
:is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_cate) ul li{width:25%}

:is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_cate) ul li a{ display:block; width:100%;background-color: #fff; padding:15px 0 ; text-align:center; text-align:center; color:#000;font-size: 16px; font-weight: 500; transition:all .1s}
:is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_cate) ul li.on>a{ color: #fff;background-color: #000;}
:is(#sec3,#sec5) .sec_inner :is(.sec3_cate,.sec5_cate) ul li a:hover{ color: #fff;background-color: #000}
:is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd){}
:is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd)>div{display: none; position:relative;opacity:0; transition:opacity .5s}
:is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd)>div.show{display: block;}
:is(#sec3,#sec5) :is(.sec3_prd,.sec5_prd)>div.act{opacity:1}

/* sec4 , 6*/
:is(#sec4,#sec6){}
:is(#sec4,#sec6) .sec_inner{}
:is(#sec4,#sec6) .sec_inner a{display: block; width: 100%;}
:is(#sec4,#sec6) .sec_inner a img{width: 100%;}

#sec8{}
#sec8 .sec_inner{}
#sec8 .sec_inner .sec8_cont{}
#sec8 .sec_inner .sec8_cont ul{display: flex; flex-wrap: wrap; gap: 40px;margin-bottom: 70px;}
#sec8 .sec_inner .sec8_cont ul li{width: calc((100% - 80px) / 3);}
#sec8 .sec_inner .sec8_cont ul li a{display: block; }
#sec8 .sec_inner .sec8_cont ul li a img{transition: all .1s;}
#sec8 .sec_inner .sec8_cont ul li .txt_area{margin-top: 15px;gap: 8px; display: flex; flex-direction: column;}
#sec8 .sec_inner .sec8_cont ul li:hover a img{opacity: .8;}
#sec8 .sec_inner .sec8_cont ul li .txt_area p{font-weight: 400; }
#sec8 .sec_inner .sec8_cont ul li .txt_area p.big{color: #222222; font-size: 20px;}
#sec8 .sec_inner .sec8_cont ul li .txt_area p.small{color: #999999; font-size: 14px;}
#sec8 .sec_inner .sec8_cont .more_item{}


#sec9{}
#sec9 .sec_inner{}
#sec9 .sec_inner .sec8_cont{}
#sec9 .sec_inner .sec8_cont ul{display: flex; flex-wrap: wrap; gap: 40px;margin-bottom: 70px;}
#sec9 .sec_inner .sec8_cont ul li{width: calc((100% - 80px) / 3);}
#sec9 .sec_inner .sec8_cont ul li a{display: block; }
#sec9 .sec_inner .sec8_cont ul li a img{transition: all .1s;}
#sec9 .sec_inner .sec8_cont ul li .txt_area{margin-top: 15px;gap: 8px; display: flex; flex-direction: column;}
#sec9 .sec_inner .sec8_cont ul li:hover a img{opacity: .8;}
#sec9 .sec_inner .sec8_cont ul li .txt_area p{font-weight: 400; }
#sec9 .sec_inner .sec8_cont ul li .txt_area p.big{color: #222222; font-size: 20px;}
#sec9 .sec_inner .sec8_cont ul li .txt_area p.small{color: #999999; font-size: 14px;}
#sec9 .sec_inner .sec8_cont .more_item{}
    
/* 롱배너 */
.longbnnr{ width: 1200px; margin: 45px auto 0;}
.longbnnr img{width:100%}


/* 탭 상품 기능 */
.tab_in_wrap.active{ border:0px !important;}
.tabarea{width: 100%; max-width: 1200px; margin: 20px auto 40px; text-align: center;}
.tabarea .tab{ display: inline-block; width:100%; max-width: 1200px;}
.tabarea .tab > li{float: left; margin: 0 40px 0 0;}
.tabarea .tab > li > span{ color: #757575; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; cursor: pointer;}
.tabarea .item_container{ padding: 15px 0;}
.tabarea .item_container .item-wrap{ display: none; position: relative; overflow: unset;}
.tabarea .morview{position: absolute; top: -30px; right: 0;}
.tabarea .morview a{color: #ff7777; font-size: 15px; font-family: 'Noto Sans KR', sans-serif;}
.tabarea .item_container .item-wrap.active{ display: block;}
.tabarea .item_container .item-wrap .item-cont .item-list{position: relative; width: 588px; padding: 0; margin: 0 20px 20px 0; border: 1px solid #efefef; border-radius: 10px;}
.tabarea .item_container .item-wrap .item-cont .item-list:nth-of-type(2n){margin-right:0}
.tabarea .item_container .item-wrap .item-cont .item-list a{display: block; padding: 20px;}
.tabarea .item_container .item-wrap .item-cont .item-list a:after{display:block; clear:both; content:'' }
.tabarea .item_container .item-wrap .item-cont .item-list .thumb{ width: 220px; float: left;}
.tabarea .item_container .item-wrap .item-cont .item-list .prd-info{ width: 308px; float: left; padding: 20px 0 20px 20px;}
.tabarea .item_container .item-wrap .item-cont .item-list .prd-info .prd-name{ color: #424242; font-family: 'Noto Sans KR', sans-serif; font-size: 18px; line-height: 20px;}
.tabarea .item-wrap .item-cont .item-list .prd-brnd{ margin: 0px 0 8px; font-size: 16px;}
.tabarea .item-wrap .item-cont .item-list .prd-price{ position: absolute; bottom: 40px; color: #D22525; font-size: 16px;}
.tabarea .item-wrap .item-cont .item-list .prd-price .dc_per,
.tabarea .item-wrap .item-cont .item-list .prd-price .price{font-size: 20px;}
.tabarea .item-wrap .item-cont .item-list .prd-price strike{ font-size: 14px;}


/* 메인 배너 베베랜드 추가 최하단 */
#main_bnr_swiper { position: relative; margin: 40px 0 80px; overflow: hidden; } 
#main_bnr_swiper .swiper-wrapper { padding-bottom:40px; } 
#main_bnr_swiper .swiper-slide:after { content:''; background: rgb(0 0 0 / 46%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; /* 클릭 이벤트를 허용하지 않음 */}
#main_bnr_swiper .swiper-slide-prev:after, #main_bnr_swiper .swiper-slide-active:after, #main_bnr_swiper .swiper-slide-next:after { content:''; background:unset; } 
#main_bnr_swiper .swiper-slide { border-radius: 20px; overflow: hidden; } 
#main_bnr_swiper .swiper-slide a { display: inline-block; border-radius: 20px; overflow: hidden; } 
#main_bnr_swiper .swiper-slide a img { width: 100%; } 
#main_bnr_swiper .arrow_wrap { position: relative; max-width: 73.6%; width:100%; margin:0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; } 
#main_bnr_swiper .swiper-button-prev { left: 0; } 
#main_bnr_swiper .swiper-button-next { right: 0; } 


/* 이벤트 배너 */
.event-banner-wrap { display:flex; gap:50px; margin:100px 0; }
.event-banner-wrap .event-banner img { max-width:100%; }
.event-banner-wrap .event-banner .title { font-size:18px; color:#000; font-weight:600; padding:20px 0 5px; }
.event-banner-wrap .event-banner .sub { font-size:16px; color:#000; }

/* mdpick */
.md-wrap { display:flex; }
.md-wrap .md-left { width:24%; }
.md-wrap .md-left h2 { font-size:30px; font-weight:600; text-align:left; }
.md-wrap .md-left .desc { font-size:20px; padding-top:60px; padding-bottom:180px; line-height:1.6; }
.md-wrap .md-left .md-list li { margin-bottom:10px; }
.md-wrap .md-left .md-list a { display:inline-block; padding:8px 15px; background-color:#eee; font-size:14px; border-radius:10px; }
.md-wrap .md-right { width:76%; }
.md-wrap .md-right .md-list-con { display:none; }
.md-wrap .md-right .md-list-con.active { display:block; }
.md-wrap .md-right .md-list-con .item_cont .item_list { width:32%; margin-right:2%; }
.md-wrap .md-right .md-list-con .item_cont .item_list:nth-child(3n) { margin-right:0; }


/* 이벤트 배너(롤링) */
#event_bnr_swiper { width: 1260px; margin: 0 auto; overflow: hidden; } 
#event_bnr_swiper .swiper-wrapper { padding-bottom:50px; } 
#event_bnr_swiper .swiper-slide a{display:inline-block;}
#event_bnr_swiper .swiper-slide img {width: 100%;margin-bottom: 25px;transition: transform 0.3s ease;} 
#event_bnr_swiper .swiper-slide img:hover{transform: scale(1.03)}
#event_bnr_swiper .swiper-slide .bnr_txt { font-size: 14px; font-weight: 400; color: #666; } 
#event_bnr_swiper .swiper-slide .bnr_txt p { font-size:18px; font-weight:700; color:#000; margin-bottom:20px; } 


/* 이벤트 배너(일반) */
.event_bnr_2nd { position: relative; } 
.event_bnr_2nd ul { display: flex; justify-content: space-between; align-items: center; } 
.event_bnr_2nd ul li a { display:inline-block; } 


/* 탭롤링 */
#tab_swiper { margin-bottom:40px; } 
#tab_swiper .swiper-slide.swiper-slide-thumb-active a { font-weight: 800; color: #fff; background: var(--point-color2); } 
#tab_swiper .swiper-slide { width: auto !important;} 
#tab_swiper .swiper-slide a {display: inline-block;font-size: 14px;font-weight: 400;color: #000;padding: 15px 37px;white-space: pre;border: 1px solid #ddd;border-radius: 30px;} 
#tab_swiper .swiper-slide a:hover{font-weight: 800; color: #fff; background: var(--point-color2);}


/* 인스타영역 */
.instaArea{ max-width: 1200px; width: 100%; margin: 0 auto 100px;}
.instaArea .instaBox{margin:0 0 20px}
.instaArea .instaBox:after{display:block; clear:both; content:'' }
.instaArea .sectionTit{ float: left;}
.instaArea .sectionTit img{float: left;}
.instaArea .sectionTit h2{ display: inline-block; float: left; margin: 0px 0 0 10px; color: #000; font-size: 20px; font-family: 'Noto Sans KR', sans-serif;}
.instaArea .sectionTit p{ float: left; margin: 4px 0 0 10px; color: #b0afaf; font-size: 14px; font-family: 'Noto Sans KR', sans-serif}
.instaArea .morview{ float: right; margin: 7px 0 0;}
.instaArea .morview a{color: #ff7777; font-size:20px; font-weight:bold; font-family: 'Noto Sans KR', sans-serif;}

/* BASIC css end */