/* 폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
body {
    font-family: 'pretendard';
    -webkit-text-size-adjust: 100%;
}

/* 스크롤 부드럽게 */
html.lenis, html.lenis body {
    height: auto;
}
  
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* 모바일에서 새로고침 막기 */
body {overscroll-behavior : contain !important;}

/* 비디오 페이지 재생 이슈로 현재 막아둠 - 24.09.06 정유나 */
/* .lenis.lenis-smooth iframe {
    pointer-events: none;
} */
  
/* 드래그시 색상 변경 */
::selection {
    background-color: #000;
    color: #fff;
} 

/* 스크롤바 커스텀 */
::-webkit-scrollbar {border: 1px solid #fff; border-left: 0; width: 5px; height: 5px;}
::-webkit-scrollbar-thumb {background-color: #DFDFDF;}

/* 슬라이드 효과 - 웨이 포인트 */
.slide-in-up {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;   
    -webkit-transition: opacity ease 1s, -webkit-transform ease 1s;
    transition: opacity ease 1s, -webkit-transform ease 1s;
    transition: opacity ease 1s, transform ease 1s;
    transition: opacity ease 1s, transform ease 1s, -webkit-transform ease 1s;
}
  
.slide-in-up.on {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    transition-delay: .1s;
}
  
.slide-in-up.delay01 {
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}
  
.slide-in-up.delay02 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
  
.slide-in-up.delay03 {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}
  
.slide-in-up.delay04 {
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}
  
.slide-in-up.delay05 {
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}
  
.slide-in-up.delay06 {
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}
  
.slide-in-up.delay07 {
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
}

  .slide-in-up.delay08 {
    -webkit-transition-delay: .8s;
    transition-delay: .8s;
}
  
.slide-in-up.delay09 {
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
}
  
.slide-in-up.delay10 {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

/* 여백관련 --- 기존거! 참고만 ! */
.p0 {padding: 0px !important;}
.pl8 {padding-left: 8px !important;}
.pt20 {padding-top: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb80 {padding-bottom: 80px !important;}

.mt0 {margin-top: 0 !important;}
.mt9 {margin-top: 9px !important;}
.mt16 {margin-top: 16px !important;}
.mt20 {margin-top: 20px !important;}
.mt35 {margin-top: 35px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb9 {margin-bottom: 9px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb200 {margin-bottom: 200px !important;}

.wrap0 {margin-top: 0px !important;}
.wrap40 {margin-top: 40px !important;}

.pb-normal {padding-bottom: 15px !important;}
@media (min-width: 1280px) {
    .pb-normal {padding-bottom: 25px !important;}
}

.last-con {margin-bottom: 70px !important;}
@media (min-width: 1280px) {
    .last-con {margin-bottom: 120px !important;}
}

/* 넓이관련 */
.w80 {width: 80px !important;}
.w100 {width: 100px !important;}
.w120 {width: 120px !important;}
.w200 {width: 200px !important;}
.w218 {width: 218px !important;}
.w50per {width: 50% !important;}
.w70per {width: 70% !important;}
.w100per {width: 100% !important;}

/* 높이관련 */
.h23 {height: 23px !important;}
.h300 {height: 300px !important;}
.h100per {height: 100% !important;}

/* 보더관련 */
.bt0 {border-top: 0 !important;}
.bl0 {border-left: 0 !important;}
.br0 {border-right: 0 !important;}
.blTable {border-left: 1px solid #D3D3D3;}
.brTable {border-right: 1px solid #D3D3D3;}

/* overflow */
.ofscroll {overflow: scroll !important;}
.ofhidden {overflow: hidden !important;}

/* 정렬관련 */
.vaM {vertical-align: middle;}

/* 포지션관련 */
.pR {position: relative;}

/* flex관련 */
.flex {display: flex;}
.flexCenter {justify-content: center;}
.flexEnd {justify-content: end;}
.flexG5 {display: flex; gap: 5px !important; align-items: center;}
.flexG10 {display: flex; gap: 10px !important; align-items: center;}

@media (max-width: 1024px) {
    .flex {display: flex; flex-direction: column;}
    .flex.type02 {flex-direction: column-reverse;}
}

/* dim */
.dim {background-color: #000; opacity: 0.3; z-index: 3; width: 100%; height: 100%; position: absolute;}

/* 필수값 */
i.ess {width: 4px; height: 4px; background-color: #FF564A; border-radius: 100%; display: block; position: absolute; top: 7px; right: -7px;}

/* 아이콘 */
i.short {width: 12px; height: 12px; background: url(../img/svg/short.svg); display: block; background-size: cover;}
i.basic {width: 15px; height: 15px; background: url(../img/svg/basic.svg); display: block; background-size: cover;}
i.board {width: 15px; height: 13px; background: url(../img/svg/board.svg); display: block; background-size: cover;}
i.product {width: 15px; height: 15px; background: url(../img/svg/product.svg); display: block; background-size: cover;}
i.page {width: 15px; height: 15px; background: url(../img/svg/page.svg); display: block; background-size: cover;}
i.banner {width: 15px; height: 15px; background: url(../img/svg/banner.svg); display: block; background-size: cover;}
i.add {width: 16px; height: 16px; background: url(../img/svg/add.svg) center no-repeat; display: block; background-size: cover;}
i.map {width: 16px; height: 16px; background: url(../img/svg/map.svg) center no-repeat; display: block; background-size: cover; flex-shrink: 0;}
i.call {width: 16px; height: 16px; background: url(../img/svg/call.svg) center no-repeat; display: block; background-size: contain; margin: 0; flex-shrink: 0;}
i.call02 {width: 16px; height: 16px; background: url(../img/svg/call02.svg) center no-repeat; display: block; background-size: cover; flex-shrink: 0;}
i.add03 {width: 8px; height: 8px; background: url(../img/svg/add03.svg) center no-repeat; display: block; background-size: cover;}
i.minus03 {width: 8px; height: 2px; background: url(../img/svg/minus03.svg) center no-repeat; display: block; background-size: cover;}
i.list {width: 23px; height: 14px; background: url(../img/svg/list.svg) center no-repeat; display: block; background-size: contain;}
i.up {width: 11px; height: 9px; background: url(../img/svg/up.svg) center no-repeat; display: block; background-size: cover;} 
i.down {width: 11px; height: 9px; background: url(../img/svg/down.svg) center no-repeat; display: block; background-size: cover;} 
i.time {width: 14px; height: 14px; background: url(../img/svg/time01.svg) center no-repeat; display: block; background-size: cover;} 
i.closeP {width: 40px; height: 40px; background: url(../img/svg/pop_close.svg) center no-repeat; display: block; background-size: cover;} 
i.featureA {width: 70px; height: 70px; background: url(../img/svg/feature_a.svg) center no-repeat; display: block; background-size: cover;} 
i.featureB {width: 70px; height: 70px; background: url(../img/svg/feature_b.svg) center no-repeat; display: block; background-size: cover;} 
i.featureC {width: 70px; height: 70px; background: url(../img/svg/feature_c.svg) center no-repeat; display: block; background-size: cover;} 
i.featureD {width: 70px; height: 70px; background: url(../img/svg/feature_d.svg) center no-repeat; display: block; background-size: cover;} 
i.whiteWine {width: 40px; height: 40px; background: url(../img/svg/whitewine.svg) center no-repeat; display: block; background-size: cover; margin-bottom: 25px;} 
i.mixed {width: 40px; height: 40px; background: url(../img/svg/mixed.svg) center no-repeat; display: block; background-size: cover; margin-bottom: 25px;} 
i.brewery {width: 40px; height: 40px; background: url(../img/svg/brewery.svg) center no-repeat; display: block; background-size: cover; margin-bottom: 25px;} 

@media (max-width: 500px) {
    i.call {margin-bottom: 29px;}
} 

/* 공통버튼 */
.combtn {display: flex; gap: 5px; cursor: pointer; padding: 5px 10px; background-color: #163A62; border-radius: 2px; font-size: 13px; font-weight: 500; color: #fff; align-items: center;}
.combtn a {display: flex; gap: 5px; font-size: 13px; font-weight: 500; color: #fff; align-items: center;}
.combtn:hover {background-color: #0056b3;}
.combtn.In {height: 20px; background-color: #74AFF2;}
.combtn.In a {font-size: 12px; line-height: 20px;}

.rarebtn {display: flex; gap: 5px; cursor: pointer; padding: 5px 10px; background-color: #999999; border-radius: 2px; font-size: 13px; font-weight: 500; color: #fff; align-items: center;}
.rarebtn a {display: flex; gap: 5px; font-size: 13px; font-weight: 500; color: #fff; align-items: center;}
.rarebtn:hover {background-color: #BEBEBE;}
.rarebtn.In {height: 20px; background-color: #5E6873;}
.rarebtn.In a {font-size: 12px; line-height: 20px;}

/* 테이블 내 버튼 */
.combtn.table {height: 20px; font-size: 12px; background-color: #1DC3E0;}
.combtn.table a {font-size: 12px;}
.combtn.table:hover {background-color: #158fa5;}
.combtn.table:focus {background-color: #158fa5;}

.rarebtn.table {height: 20px; font-size: 12px; background-color: #374647;} 
.rarebtn.table a {font-size: 12px;}
.rarebtn.table:hover {background-color: #000;}
.rarebtn.table:focus {background-color: #000;}

.actBtn {border: 1px solid #D3D3D3; height: 15px; height: 15px; cursor: pointer;}
.actBtn:hover {filter: grayscale(0%) brightness(0);}

/* 리스트 버튼 */
.listBtn {width: fit-content; align-items: center; padding: 18px 34px; border: 1px solid #CCCCCC; border-radius: 25px; display: flex; gap: 13px; margin: 0 auto; font-size: 20px; font-weight: 500; color: #222;}
.listBtn.type02 {border-radius: 0; padding: 19px 64px; border: 0; background: #1E5088; font-size: 18px; font-weight: 700; color: #fff;} 

@media (max-width: 1024px) {
    .listBtn.type02 {padding: 15px 50px; font-size: 16px;}
}

/* input */
input:disabled {background-color: #ededed; color: #999; cursor: not-allowed;}

/* 숨겨진 기본 파일 업로드 */
#file-upload-button {display: none;}
  
/* 커스텀 파일 업로드 버튼 */
.custom-file-button {text-align: center; display: inline-block; padding: 5px; font-size: 12px; border: 1px solid #000; color: #666; border: 1px solid #D3D3D3; cursor: pointer;}
.custom-file-button:hover {color: #000;}

/* 라디오버튼 관련 */
.radio {display: flex;}
.radio input {width: 10px !important; height: 10px !important;}

/* 체크박스 관련 */
.checkbox {width: 30%; display: flex; gap: 5px; align-items: center;}
.checkbox input {width: 13px !important; height: 13px!important; margin: 0 !important;}
.checkbox span {font-size: 13px; font-weight: 500; color: #222;}

/* 안내문 관련 */
.notice {font-size: 13px; font-weight: 500; color: #FF564A; line-height: 16px;}

/* 페이징 관련 */
.paging {display: flex; gap: 5px; justify-content: center;}
.preE {width: 40px; height: 40px; background: url(../img/svg/preE.svg) center no-repeat; display: block; background-size: cover;}
.pre {width: 40px; height: 40px; background: url(../img/svg/pre.svg) center no-repeat; display: block; background-size: cover;}
.next {width: 40px; height: 40px; background: url(../img/svg/next.svg) center no-repeat; display: block; background-size: cover;}
.nextE {width: 40px; height: 40px; background: url(../img/svg/nextE.svg) center no-repeat; display: block; background-size: cover;}
.pageN {display: flex; gap: 5px; align-items: center; margin: 0 25px;}
.pageN a {font-size: 16px; font-weight: 700; color: #222; width: 40px; height: 40px; display: block; text-align: center; line-height: 41px;}
.pageN a.on {background-color: #222; border-radius: 100%; color: #fff;}

@media (max-width: 1024px) {
    .paging {gap: 10px;}
    .preE {width: 30px; height: 30px;}
    .pre {width: 30px; height: 30px;}
    .next {width: 30px; height: 30px;}
    .nextE {width: 30px; height: 30px;}
    .pageN {gap: 10px; margin: 0 10px;}
    .pageN a {width: 30px; height: 30px; line-height: 31px;}
}