@charset "utf-8";
/* --------------------------------------------------------------------------------------------- */
* {margin: 0; padding: 0; box-sizing: border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,code,em,img,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,footer,header,hgroup,menu,nav,section,main,audio,video {margin: 0; padding: 0;}

/*html5추가 시멘틱엘리먼트를 익스하위버전에서 블럭으로 인식되도록함*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display: block}

/* button태그에 손모양 커서 */
button {cursor:pointer; background: none; border: none;}
/* 익스하위버전에서 이미지 선없애기 */
fieldset,img {border: 0; vertical-align: top}
/* 리스트 기호 빼기 */
ol,ul {list-style: none}
/* 태그 기본 기울임꼴 제거 */
address,em {font-style: normal}
/* 페이지안에서 가장 많은 링크색 지정 */
a {text-decoration: none; color: #1c1c1c;}
/* iframe으로 외부컨텐츠를 연결했을때
외부컨텐츠안쪽내용이 우리페이지에 영향을 주지못하도록 가려줌
*/
iframe {overflow: hidden; border: 0}
/* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */
table {border-collapse: collapse; border-spacing: 0; width: 100%}
/* 굵기 빼고 헤딩태그 폰트크기를 body에 선언한 크기와 일치시킴 */
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%}
/* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴 */
input,select,textarea,button {vertical-align: middle; margin: 0; padding: 0}
/* textarea 리사이즈기능 빼기 */
textarea {resize: none}
/* 페이지안의 모든 폰트의 줄간격을 1.5로 통일시킴
모바일 크롬, 모바일 사파리 브라우져의 텍스트 자동확대 방지
*/
body {line-height: 1.5; -webkit-text-size-adjust:none}

/* legend,caption,메뉴제목,섹션제목 블라인드 */
legend,caption,.blind {position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px}

/* float해제 */
.clearfix:after {
    content:'';
    display: block;
    clear: both;
}

.display-none {display: none !important;}
.flex-center {display: flex; align-items: center;}
.flex-column {flex-direction: column;}
.flex-row {flex-direction: row;}

#dim {position: fixed; z-index: 1900; top: 0; left: 0; right: 0; width: 100%; height: 100%;}



.dim_close {position: fixed; z-index: 5555; top: 0; left: 0; right: 0; width: 100%; height: 100%; cursor: pointer;}

/* 슬라이드 */
.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body {
    background: #000;
    color: #000;
  }

  .swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-slide {
    background-size: cover;
    background-position: center;
  }

  .mySwiper2 {
    height: 100%;
    width: 100%;
  }

  .mySwiper {
    height: 100%;
    box-sizing: border-box;
    padding: 0px 0;
  }

  .mySwiper .swiper-slide {
    /* width: 33px !important; */
    /* height: 33px; */
    border: 1px solid #B2B2B2;
    border-radius: 4px;
    box-sizing: border-box;
    opacity: 0.4;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
    /* width: 50px !important; */
    /* height: 50px; */
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }



/* 인덱스 페이지 */
#product_popup {position: fixed; z-index: 2000; top: 50%; left: 50%; width: 1154px; height: 568px; transform: translate(-50%, -50%);}
/* #product_popup.active {display: block;} */

#product_popup .p_box {position: absolute; top: 50%; border-radius: 8px; box-sizing: border-box; overflow: hidden; transform: translateY(-50%);}
#product_popup .list_box {display: flex; flex-direction: column; z-index: 10; left: 0; width: 319px; height: 434px; background: #fff;}
#product_popup .list_box .categori {display: flex; justify-content: space-between; align-items: center; flex-shrink: 1; background: #b2b2b2;}
#product_popup .list_box .categori li {width: 50%; background: rgb(85,85,85); background: linear-gradient(0deg, rgb(168, 168, 168) 3%, rgba(178,178,178,1) 9%, rgba(178,178,178,1) 100%);}
#product_popup .list_box .categori li.active {background: #fff; border-radius: 8px 8px 0 0; box-shadow: none;}
#product_popup .list_box .categori li a {display: block; height: 30px; line-height: 30px; text-align: center; font-size: 12px; font-weight: 600;}
#product_popup .list_box .cate_ct {margin-top: 25px;}
#product_popup .list_box .cate_ct .list_dv {display: flex; justify-content: start; align-items: center; padding: 0 0px; width: 254px; height: 92px; border-bottom: 1px dashed #808080; box-sizing: border-box; cursor: pointer;}
#product_popup .list_box .cate_ct .list_dv:last-of-type {border: 0px;}
#product_popup .list_box .cate_ct .list_dv .dv_img {margin-right: 10px; height: 62px; text-align: center;}
#product_popup .list_box .cate_ct .list_dv .dv_img img {max-width: 110px; height: 100%; object-fit: contain;}
#product_popup .list_box .cate_ct .list_dv .dv_tit span {display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 600; color: #333;}

#product_popup .p_box_wrap {display: flex; z-index: 20; left: 318px; width: calc(100% - 318px); height: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-sizing: border-box;}

#product_popup .slide_box {z-index: 20; left: 318px; padding: 30px; width: 453px; height: 100%; background: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-sizing: border-box;}
#product_popup .slide_box .slide_box_inner {position: relative; height: 100%;}
#product_popup .slide_box .main_dv_tit {padding: 10px 0 45px; text-align: center; font-size: 35px; font-weight: 700;}
#product_popup .slide_box .swiper.mySwiper2 {width: 388px; height: 209px;}
#product_popup .slide_box .swiper.mySwiper {width: 200px; height: 55px;}
#product_popup .swiper-wrapper_thumb {justify-content: space-between; align-items: center;}
#product_popup .swiper-thumbs {position: absolute; bottom: 0; left: 50%; margin-left: -100px;}
/* #product_popup .swiper-slide-thumb-active {zoom: 1.2;} */
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 180px;}
.swiper-pagination-bullet-active {background: #4D4D4D; width: 16px; height: 8px; border-radius: 5px;}
#product_popup .slide_box .icon_wrap {display: flex; justify-content: center; gap: 0 30px; margin: 0 auto; margin-top: 90px; width: 130px; height: 30px;}
#product_popup .slide_box .icon_wrap li a {height: 100%;}
#product_popup .slide_box .icon_wrap li a img {height: 100%;}


#product_popup .info_box {position: absolute; top: 0; z-index: 15; right: 0; padding: 60px 40px 20px 60px; width: 402px; height: 100%; background: #fff; box-sizing: border-box;}
#product_popup .info_box .dv_info_list {margin-bottom: 30px;}
#product_popup .info_box .dv_info_list .dv_info_tit {padding-bottom: 6px; border-bottom: 1px dashed #808080; font-size: 22px; font-weight: 500;}
#product_popup .info_box .dv_info_list .dv_info_tit em {font-size: 16px; color: #808080;}
#product_popup .info_box .dv_info_list .dv_info {padding-top: 6px; font-size: 18px; font-weight: 500;}
#product_popup .info_box .btn_wrap {display: flex; gap: 0 15px; margin-top: 75px;}
#product_popup .info_box .btn_wrap .btn {padding: 0 5px; width: 100%; height: 27px; background: #000; border-radius: 20px; box-sizing: border-box; font-size: 13px; color: #fff;}
#product_popup .info_box .btn_wrap .btn2 {background: #999999;}

#product_popup .popup_thumb_wrap {position: absolute; bottom: -100px; right: 43px; width: 300px; overflow: hidden;}
#product_popup .popup_thumb {display: block !important; padding: 0 30px; box-sizing: border-box;}
#product_popup .popup_thumb:after {content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 1px; background: #999;}
#product_popup .popup_thumb .swiper-wrapper {}
#product_popup .popup_thumb .thumb_box {display: flex; justify-content: center; position: relative; width: 115px; max-width: 115px; height: 80px; background: #000; border: 1px solid #fff; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
/* thumb_wrap 슬라이드 */
.swiper-button-next, .swiper-button-prev{top: 50%; width: 14px; height: 25px; background: url(../images/arrow1.png) no-repeat; background-size: 100%; transform: translateY(30%);}
.swiper-button-prev {left: 0;}
.swiper-button-next {right: 0; width: 14px; height: 25px; background: url(../images/arrow2.png) no-repeat; background-size: 100%;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}
/* 구버전 썸네일 */
/* #product_popup .popup_thumb .swiper-slide-active:after {content: ''; position: absolute; top: 3px; right:-11px; width: 1px; height: 90%; background: #fff;} */
/* #product_popup .popup_thumb .thumb_box:before {content: ''; position: absolute; top: 24px; left: -20px; width: 14px; height: 25px; background: url(../images/arrow1.png) no-repeat; background-size: 100%;} */
/* #product_popup .popup_thumb .thumb_box + .thumb_box:before {content: ''; position: absolute; top: 24px; left: inherit; right: -20px; width: 14px; height: 25px; background: url(../images/arrow2.png) no-repeat; background-size: 100%;} */
#product_popup .popup_thumb .thumb_box + .thumb_box:after {display: none;}
#product_popup .popup_thumb .thumb_box > img {object-fit: cover;}
#product_popup .popup_thumb .thumb_box > p {position: absolute; bottom:0; left: 50%; padding: 4px 5px; background: #55555582; transform: translate(-50%, -50%); font-size: 12px; color:#fff;}


#product_popup .p_thumb_box_wrap {left: 50%; padding: 50px; width: 584px; height: auto; background: #fff; box-sizing: border-box; transform: translate(-50%, -50%);}
#product_popup .p_thumb_box_wrap .thumb_top h3 {text-align: center; font-size: 45px; font-weight: 600;}
#product_popup .p_thumb_box_wrap .thumb_mid {display: flex; flex-direction: column; align-items: center; margin-top: 40px;}
#product_popup .p_thumb_box_wrap .thumb_mid .video_box {display: flex; justify-content: center; width: 400px; height: 400px; border: 3px solid #000; box-sizing: border-box; background: linear-gradient(270deg, rgba(243,243,243,1) 0%, rgba(243,243,243,1) 29%, rgba(243,243,243,1) 77%, rgba(243,243,243,1) 100%); cursor: pointer; transition: all 0.5s;}
#product_popup .p_thumb_box_wrap .thumb_mid .video_box:hover {
  background: linear-gradient(270deg, rgba(227,227,227,1) 0%, rgba(243,243,243,1) 29%, rgba(243,243,243,1) 77%, rgba(227,227,227,1) 100%);
}
.wh0 {width: inherit !important; height: inherit !important;}
#product_popup .p_thumb_box_wrap .thumb_mid .video_box img {height: 100%;}
#product_popup .p_thumb_box_wrap .thumb_mid .video_box video {width: 100%; height: 100%; object-fit: cover;}
#product_popup .p_thumb_box_wrap .thumb_mid span {display: block; margin-top: 30px; line-height: 25px; letter-spacing: -0.025rem; font-size: 16px; text-align: center; word-break: keep-all;}
#product_popup .p_thumb_box_wrap .thumb_bot {margin-top: 40px; width: 100%; height: 36px; text-align: center;}
#product_popup .p_thumb_box_wrap .thumb_bot button {padding: 0 20px; line-height: 36px; text-align: center; background: #000; border-radius: 20px; box-sizing: border-box; font-size: 18px; color: #fff;}
.popup_video {display: none; position: fixed; z-index: 9000; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%);}
.popup_video.active {display: block;}
.popup_video .video_dim {width: 100%; height: 100%; background: #00000008;}
.popup_video .video_wrap {position: absolute; z-index: 100; top: 50%; left: 50%; height: 500px; transform: translate(-50%, -50%);}
.popup_video .video_wrap video {height: 100%; object-fit: contain;}
.popup_video .video_close {position: absolute; top: -20px; right: -40px; width: 28px; height: 28px; filter: invert(100%);}
.popup_video .video_close img {width: 100%;}

.popup_iframe {display: none; position: fixed; z-index: 9990; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%);}
.popup_dv_dim {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); cursor: pointer;}
.popup_iframe iframe {position: absolute; top: 50%; left: 50%; max-width: 1154px; max-height: 568px; transform: translate(-50%, -50%);}
.popup_iframe.active {display: block;}


.scroll-style {overflow: auto; height: 100px; font-size: 14px; line-height: 1.4; color: #fff;}
.scroll_box::-webkit-scrollbar {width: 0px; background: rgb(195, 195, 195, 0.9);}
.scroll_box::-webkit-scrollbar-thumb {width: 0px; background: rgba(68, 68, 68, 0.9);} 
.scroll_box::-webkit-scrollbar-track {width: 0px;} 

.scroll_box {height: 100%; max-height: 370px; overflow: auto;}
.scroll_box > div {flex-shrink: 0;}

.filter {filter: invert(1);}


/* @media (orientation: landscape) { */
@media screen and (max-width: 768px) {
  .product_popup {
    transform: scale(0.4) translate(-50%, -50%) !important;
    transform-origin: left top !important;
  }
}



/* 세개 팝업 */

/* @media screen and (max-width: 1200px) {
  #product_popup.threePage {
    transform: scale(0.7) translate(-50%, -50%);
    transform-origin: top left;
  }
}

@media screen and (max-width: 820px) {
  #product_popup.threePage {
    transform: scale(0.5) translate(-50%, -50%);
    transform-origin: top left;
  }
}

@media screen and (max-width: 500px) {
  #product_popup.threePage {
    transform: scale(0.45) translate(-50%, -50%);
    transform-origin: top left;
  }
}

 */

/* 썸네일 영상 */

/* @media screen and (max-height: 1000px) {
  #product_popup.wh0 .p_box {
    max-height: 90vh;
    overflow: auto !important;
  }

  #product_popup.wh0 .p_thumb_box_wrap {
    transform: scale(1) translate(-50%, -50%);
    transform-origin: top left;
  }
}

@media screen and (max-height: 430px) {
  #product_popup.wh0 .p_box {
    max-height: 180vh;
    overflow: auto !important;
  }

  #product_popup.wh0 .p_thumb_box_wrap {
    transform: scale(0.7) translate(-50%, -50%);
    transform-origin: top left;
  }
}

@media screen and (max-width: 584px) {
  #product_popup.wh0 .p_box {
    max-height: 180vh;
    overflow: auto !important;
  }

  #product_popup.wh0 .p_thumb_box_wrap {
    transform: scale(0.7) translate(-50%, -50%);
    transform-origin: top left;
  }
} */