/* BASIC css start */
@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;
}

select {
    padding: 15px 0px 15px 10px!important;
    width: 97%!important;
    margin: 8px 0px 0px 6px!important;
}
a {
    color: #337ab7;
    text-decoration: none;
    display: block ;
}

.exhibit-visual img{ display: block;}
.more_ { margin:10px 0px 30px; text-align: center;}
.btn_moreGray{ font-size: 14px;  margin:3px 0px 0px; text-align: center; }
.plan_sel { width:98%; text-align: center; margin:2px; }
.back { margin: 12px 0px 0px 0px!important; }
.container .row { margin-left: 0px !important; margin-right: 0px !important; }
.relative {position:relative;}

#content.sub .type h3 {
    width: 97%!important;
    margin: 15px 0px 17px 6px!important;
    padding: 15px 0px 15px 5px !important;

    font-size: 14px!important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    
    background-image: url(/design/wonderbra/images/bg_section.gif);
    background-position: 100% 50%;
    background-repeat: no-repeat; 
}

#content.sub .type h3 span { padding-right: 20px; background-color: #fff; }

#content .product-list .title, #content .product-list .price{text-align:left !important;}
#content .product-list .prd_list li a .prd_info { padding: 0 3% !important; }
#content .product-list li:nth-of-type(odd) { clear: inherit!important; }


/* 기획전 공통 css - 기회전 페이지별로 스타일 달라질 시 기획전 넘버로 클래스 추가 */

.prmWrap {
    text-align: center;
    font-size: 0;
    width: 100%;
    margin: 0 auto;
}
.prmWrap a { display: inline-block; }
.prmWrap img {
    width: 100%;
    border: 0;
    display: inline-block;
}
.prmWrap video { width: 100%; }
.prmWrap .menuBtn { display: flex; }
.prmWrap .menuBtn a { display: inline-block; }

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

.prmWrap .flex { display: flex; }

.floatingBtn{position:fixed; bottom:2%; left:50%; transform:translateX(-50%); width:95%; z-index:999999;}
.floatingBtn img{width:100%;}
.accordionBox{ display: none;}


/* 스와이퍼 */
.slideBox.swiper01{position:relative; overflow:hidden; width: 100%; }

.swiper.swiper01 {
    position:absolute;
    width:100vw;
    top:70vw;
    left:0;
}
.swiper.swiper01 .swiper-wrapper { transition-timing-function: linear; }
.swiper.swiper01 .swiper-slide{ width:50vw; max-width: 520px; }

.swiper01 .swiper-button-prev{top:65%; width:23px; height:34px; left:4vw;}
.swiper01 .swiper-button-next{top:65%; width:23px; height:34px; right:4vw;}
.swiper01 .swiper-button-prev::after, .swiper01 .swiper-button-next::after{font-size:5vw; color:#fff}
.swiper01 .swiper-pagination{ bottom:10px !important;}
.swiper01 .swiper-pagination-bullet{width:8px; height:8px; background:#fff; margin:0 8px !important;}
.swiper01 .swiper-pagination-bullet-active{background:#fff;}

.swiper02{position: relative;}

.swiper02 .swiper-button-prev,
.swiper02 .swiper-button-next {
    top:58%; width:22px; height:34px;
}
.swiper02 .swiper-button-prev{left:4vw;}
.swiper02 .swiper-button-next{right:4vw;}
.swiper02 .swiper-button-prev::after, .swiper02 .swiper-button-next::after{font-size:5vw; color:#fff}


.swiper.swiper03 {
    position:absolute;
    width:100vw;
    top:70vw;
    left:0;
}

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

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

 /*
.paginationCustomSlide{position:relative;}
.paginationCustomSlide .swiper02 .btnList{width:100%; padding:12px 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:4px 12px; opacity:1; border-radius:50px; border:solid 1px #fff; background:none; width:auto; height:auto; margin:0 10px;}
.paginationCustomSlide .swiper02 .swiper-pagination > span.swiper-pagination-bullet-active{background:#fff;}
.paginationCustomSlide .swiper02 .swiper-pagination > span span{color:#fff; font-size:14px; font-weight:500;}
.paginationCustomSlide .swiper02 .swiper-pagination > span.swiper-pagination-bullet-active span{color:#000;}
.paginationCustomSlide .swiper02 .swiper-button-prev{top:23.4%; width:8vw; height:9vw;}
.paginationCustomSlide .swiper02 .swiper-button-next{top:23.4%; width:8vw; height:9vw;}
.paginationCustomSlide .swiper02 .swiper-button-prev::after, .paginationCustomSlide .swiper02 .swiper-button-next::after{font-size:0}
*/

.black .swiper-pagination-bullet{background: #838383 !important;}
.black .swiper-pagination-bullet-active{ background: white !important;}


/* 타이머 */
#planid_31{ width: 100%; text-align: center; position:relative;}
#planid_31 img{width:100%}
#planid_31 #HourCountdown { 
     width:73%; display: flex;
     position:absolute; top:57vw; left:50%; transform:translateX(-50%); 
     font-family:'SpoqaHanSansNeo-Regular'; color: black; font-size: 9vw; 
     text-align:center; font-weight: 600; color:#fff;     justify-content: space-between;
}
#planid_31 #HourCountdown span{ width: calc(95%/4); display: block;}

#planid_30{ width: 100%; text-align: center; position:relative;}
#planid_30 img{width:100%}
#planid_30 #HourCountdown { 
     width:75%; display: flex;
     position:absolute; top:11vw; left:50.5%; transform:translateX(-50%); 
     font-family:'SpoqaHanSansNeo-Regular'; color: black; font-size: 9vw; 
     letter-spacing: 1.1vw; text-align:center; font-weight: 600; color:#343434;
}
#planid_30 #HourCountdown span{ width: calc(100%/3); display: block;}


/* 탭메뉴 */
.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:#3c3c3c;}

.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:4.5vw; background:#3c3c3c;}
.prd_tab.echo-text-tab li span{display: inline-block; padding: 4px 16px; background: #3c3c3c; font-size: 4.5vw; 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:53vw; }
.audio_box .audio_controller .range_wrap { position: relative; width: 100%; height: 12px; border-radius: 12px; background: #fff; box-shadow: inset 1px 1px 1px 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: 6px; 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: 12px; background: transparent; cursor: pointer; outline: none;}
.audio_box .audio_controller .range_wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 12px; width: 12px; background-color: transparent; border: none; border-radius: 50%; box-shadow: none;}
.audio_box .audio_controller .range_wrap input[type=range]::-moz-range-thumb {height: 12px; width: 12px; background-color: transparent; border: none; border-radius: 50%; box-shadow: none;}
.audio_box .audio_controller button { margin: 0 !important; margin-top:5.1vw !important; -webkit-appearance: none; appearance: none; border: 0; background: 0; width: fit-content !important;}
.audio_box .audio_controller button img { height:8vw; 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:35.5%; left:46%;}
.echo-custom-modal .echo-modal.modal-02 .echo-dot{top:70%; left:48%;}
.echo-custom-modal .echo-modal.modal-03 .echo-dot{top:91.5%; left:34%;}

.echo-custom-modal .echo-modal.modal-01 .echo-item{top:31%; left:15%;}
.echo-custom-modal .echo-modal.modal-02 .echo-item{top:66%; left:46%;}
.echo-custom-modal .echo-modal.modal-03 .echo-item{top:92.75%; left:19%;}

.echo-custom-modal .echo-modal .echo-dot{width:20px; cursor: pointer; transition: transform 0.5s ease;}

.echo-custom-modal .echo-modal .echo-item{display:none; width:170px;}
.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: 30px; height: 30px;
  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;
}


@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 */