/* BASIC css start */
/* page-hd */
#productPlan .page-hd { padding: 8px 15px 5px; background-color: #c9c9c9; }
#productPlan .page-hd h2 { color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; }
/* page-body */
#productPlan .page-body { padding-bottom: 80px;  }
#productPlan .page-body .visual { margin-top: 5px; text-align:center; }
#productPlan .page-body .pick { margin-top: 10px; text-align: right; }
#productPlan .page-body .pick select { width: 320px; border: 1px solid #c5c5c5; }
#productPlan .page-body .clst { zoom: 1; overflow: hidden; margin-top: 10px; padding: 10px 7px 7px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
#productPlan .page-body .clst li { float: left; margin-right: 15px; padding-left: 10px; background: url(/images/d3/modern_simple/common/bull_h2_sqr_gray.gif) no-repeat 0 45%; }
#productPlan .page-body .clst li a { display: block; white-space: nowrap; }
#productPlan .page-body .p-hd { position: relative; margin-top: 70px; padding: 0 10px 5px; border-bottom: 2px solid #5c5c5c; }
#productPlan .page-body .p-hd.mt-35 { margin-top: 35px; }
#productPlan .page-body .p-hd h3 { color: #5c5c5c; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
#productPlan .page-body .p-hd .top { position: absolute; top: 0; right: 5px; color: #5c5c5c; }
#productPlan .page-body .plst { zoom: 1; overflow: hidden; margin: 25px auto 0; text-align:center; }
#productPlan .page-body .prd-list .thumb { width: 176px; height: 176px;}:

/* 네이버 앵커 */
#productPlan .prd-list .tb-center,
#productPlan .prd-list .tb-left,
#productPlan .prd-list .tb-right { position: relative; }
#productPlan .nhn_anchor_text { position: absolute; padding: 5px; top: 0px; left: 0px; margin-left: 10px; }
#productPlan .nhn_anchor_select { } /* focus상품 */ 

button, select {
    text-transform: none;
    padding: 0px 1%!important;
    height: 45px!important;
    width: 57%!important;
    margin: 27px 26% 43px 27%!important;
}


h3.title {
   margin-top: 22px;
    margin-bottom: 40px;
    border-top: 1px solid #a0a0a0;
    border-bottom: 1px solid #a0a0a0;
    padding: 15px 0px 15px 0px;
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 25px !important;
}


.scrollEv{ cursor: pointer;}
.menuBtn{width:1100px; margin: 0 auto;}
.menuBtn img{ cursor: pointer; width: calc(100%/3);}

.relative {position:relative;}

.visual.tata{position:relative;}
@font-face {
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* 기획전 common style */
.prmWrap { text-align: center; font-size: 0; width: 1100px; margin: 0 auto; overflow-x: hidden;}
.prmWrap a { display: inline-block; }
.prmWrap img { border: 0; width: 100%; display: inline-block; }
.prmWrap video { width: 100%; }

.prmWrap .menuBtn { display: flex; }
.prmWrap .menuBtn a { display: inline-block; }
.prmWrap .menuBtn img { width: 100%; }

.prmWrap .wd33 { width: 33.33%; display: inline-block; } 
.prmWrap .wd50 { width: 50%; display: inline-block; }
.prmWrap .flex { display: flex; cursor: pointer; }
.prmWrap .flex a { display: block;}


/* 타이머 */
#planid_31{ width: 100%; text-align: center; position:relative;}
#planid_31 #HourCountdown { font-family:'SpoqaHanSansNeo-Regular'; font-size: 106px; position:absolute; left:50%; transform:translateX(-50%); top:60.5%; text-align:center; font-weight:400; width: 74.5%; display: flex; color:#fff;}
#planid_31 #HourCountdown span{letter-spacing:0px; width: calc(100%/4); display: block; }

#planid_30{ width: 100%; text-align: center; position:relative;}
#planid_30 #HourCountdown { font-family:'SpoqaHanSansNeo-Regular'; font-size: 106px; position:absolute; left:50%; transform:translateX(-50%); top:26%; text-align:center; font-weight:400; width: 74%; display: flex; color:#343434;}
#planid_30 #HourCountdown span{letter-spacing:0px; width: calc(100%/3); display: block; }


/* 스와이퍼 */
.slideBox.swiper01{position:relative; overflow:hidden; width: 100%; }
.swiper01{position:relative;}
.swiper01 .swiper-button-prev{top:65%; width:60px; height:64px; left:50px; filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(139deg) brightness(105%) contrast(101%); color: #000;}
.swiper01 .swiper-button-next{top:65%; width:60px; height:64px; right:50px; filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(139deg) brightness(105%) contrast(101%); color: #000;}

.swiper01 .swiper-pagination{ bottom:30px !important;}
.swiper01 .swiper-pagination-bullet{width:15px; height:15px; background:#fff; margin:0 14px !important;}
.swiper01 .swiper-pagination-bullet-active{background:#fff;}

.swiper.swiper01 {
    position:absolute;
    width:1100px;
    top:760px;
    left:0;
}

.swiper.swiper01 .swiper-slide{
    width:520px;
}

.swiper02{position:relative;}

.swiper02 .swiper-button-prev,
.swiper02 .swiper-button-next {
    top:56%; width:68px; height:64px;filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(139deg) brightness(105%) contrast(101%); color: #000; 
}

.swiper02 .swiper-button-prev{left:50px;}
.swiper02 .swiper-button-next{right:50px;}


.swiper_container{position:relative;}


.swiper.swiper03 {
    position:absolute;
    width:1100px;
    top:760px;
    left:0;
}

.swiper.swiper03 .swiper-slide{
    width:520px;
}

/*  이전 소스 주석 처리 251002 차민우 사용안하면 삭제 !
.swiper_container .swiper03{position:absolute; overflow:hidden; top: 55%; left: 55%; transform: translate(-50%, -50%); width: 80%; height: 30%; text-align: left;}
.swiper03 .swiper-wrapper .swiper-slide {display: flex; flex-direction: column; justify-content: center;}
.swiper03 .swiper-wrapper .swiper-slide strong{font-size: 60px; color:#ffffff;}
.swiper03 .swiper-wrapper .swiper-slide span{font-size: 32px; color:#ffffff;}
*/

.accordionBox{ display: none;}


.autoSlide .swiper-wrapper{transition-timing-function:linear;}


.paginationCustomSlide{position:relative; overflow:hidden;}
.paginationCustomSlide .swiper02 .btnList{width:100%; padding:30px 0; background:#141414;}
.paginationCustomSlide .swiper02 .swiper-pagination{position:relative; width:100%; display: flex; justify-content: center; margin:0 0 0 auto; bottom:0;}
.paginationCustomSlide .swiper02 .swiper-pagination > span{display:block; padding:10px 30px; opacity:1; border-radius:50px; border:solid 1px #fff; background:none; width:auto; height:auto; margin:0 25px;}
.paginationCustomSlide .swiper02 .swiper-pagination > span.swiper-pagination-bullet-active{background:#fff;}
.paginationCustomSlide .swiper02 .swiper-pagination > span span{color:#fff; font-size:28px; font-weight:500;}
.paginationCustomSlide .swiper02 .swiper-pagination > span.swiper-pagination-bullet-active span{color:#000;}
.paginationCustomSlide .swiper02 .swiper-button-prev{top:21.4%; width:135px; height:100px; background:none;}
.paginationCustomSlide .swiper02 .swiper-button-next{top:21.4%; width:135px; height:100px; background:none;}
.paginationCustomSlide .swiper02 .swiper-button-prev::after, .paginationCustomSlide .swiper02 .swiper-button-next::after{font-size:0}

.floatingBtn{position:fixed; bottom:2%; left:50%; transform:translateX(-50%); width:50%; z-index:999999;}

/* 탭메뉴 */
.prd_tab{display:flex; gap:0; padding:0; width:100%; background:#3c3c3c;}
.prd_tab li{ flex:1; width: 100%; cursor: pointer;}
.prd_tab li.on{color:#ffffff; background:#000000;}
.prd_tab li img{display:none;}
.prd_tab li img.on{display:block;}

.prd_tab.echo-text-tab{padding: 0 0 24px 0;}
.prd_tab.echo-text-tab li{font-size:22px; background:#3c3c3c;}
.prd_tab.echo-text-tab li span{display: inline-block; padding: 10px 50px; background: #3c3c3c; font-size: 40px; color: #ffffff; border: 1px solid #ffffff;}
.prd_tab.echo-text-tab li.on span{background: #ffffff; color: #000000;}

.tab_box > .tab-con{display:none;}
.tab_box > .tab-con.on{display:block;}


/* 오디오 컨트롤러 */
.audio_box {position: relative;}
.audio_box .audio_controller {position: absolute;left: 50%; transform: translate(-50%); width: 70%; top: 590px; }
.audio_box .audio_controller .range_wrap { position: relative; width: 100%; height: 24px; border-radius: 12px; background: #fff; box-shadow: inset 2px 2px 2px 1px rgba(0,0,0,0.2); overflow: hidden;}
.audio_box .audio_controller .range_wrap .range_fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #A8B993; border-radius: 12px; z-index: 0;}
.audio_box .audio_controller .range_wrap input[type=range] { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 24px; background: transparent; cursor: pointer; outline: none;}
.audio_box .audio_controller .range_wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 24px; width: 24px; background-color: transparent; border: none; border-radius: 50%; box-shadow: none;}
.audio_box .audio_controller .range_wrap input[type=range]::-moz-range-thumb {height: 24px; width: 24px; background-color: transparent; border: none; border-radius: 50%; box-shadow: none;}
.audio_box .audio_controller button { margin: 0 !important; margin-top: 74px !important; -webkit-appearance: none; appearance: none; border: 0; background: 0; width: fit-content !important;}
.audio_box .audio_controller button img { height: 55px; width:auto;}


/* 커스텀 팝업 모달 251029 우정인 */
.echo-custom-modal{position:relative;}
.echo-custom-modal .echo-modal > *{position:absolute;}
.echo-custom-modal .echo-modal.modal-01 .echo-dot{top:36%; left:48%;}
.echo-custom-modal .echo-modal.modal-02 .echo-dot{top:70.5%; left:49%;}
.echo-custom-modal .echo-modal.modal-03 .echo-dot{top:91.5%; left:35%;}

.echo-custom-modal .echo-modal.modal-01 .echo-item{top:32%; left:25%;}
.echo-custom-modal .echo-modal.modal-02 .echo-item{top:67%; left:47%;}
.echo-custom-modal .echo-modal.modal-03 .echo-item{top:92.75%; left:19%;}

.echo-custom-modal .echo-modal .echo-dot{width:40px; cursor: pointer; transition: transform 0.5s ease;}
.echo-custom-modal .echo-modal .echo-dot:hover{transform: scale(1.2);}

.echo-custom-modal .echo-modal .echo-item{display:none; width:400px;}
.echo-custom-modal .echo-modal .echo-item.on{display:block;}


/* 가상요소로 빛나는 원형 효과 추가 */
.echo-custom-modal .echo-modal .echo-dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 50px; height: 50px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(rgba(255,255,255,0.7), transparent 80%);
  opacity: 0;
  animation: echo-glow 2s infinite ease-in-out;
}

.echo-custom-modal .echo-modal .echo-dot:hover::after{display:none;}

@keyframes echo-glow {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}


/* BASIC css end */