@charset "utf-8";

/********************
** header 
********************/
header{top:0;}
.headerModal_inner{width:80dvw; margin:0 auto;}
.header_modal_overlay {    position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px);    display: none;    z-index: 9999;    overflow: auto;  }
.header_allMenuModal_List{display:grid;  grid-template-columns: repeat(7, 1fr);}
.header_shadowBox{box-shadow:0 0 8px rgba(238, 238, 240, 1);}
.headerModal_tit{border-bottom:1px solid #EEEEF0;}
.is-loading { pointer-events:none; opacity:0.6; }

/********************
** 성공페이지 
********************/
.success{  position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    background: rgba(217, 218, 222, 0.8);    backdrop-filter: blur(52px);  align-items: center;    justify-content: center;   z-index: 9999; }

/********************
** 든든점수
********************/
.dendenpoint .inner{width:calc(100dvw - 192px);overflow:hidden}
.dundunInput{left:-999999px}
.dundunInput + label{background:#91949f; color:#37383E; transition: ease-in-out 0.3s;}
.dundunInput[type="radio"]:checked + label, .dundunInput[type="checkbox"]:checked + label{background:linear-gradient(to right, #BC1919, #F24444); color:#fff;}
.dundunRadio:hover {box-shadow: 0 0 8px #F24444, 0 0 16px #BC1919; color:#fff;}
.stepBtnBox{bottom:40px}
.dundunTextBox{width:calc(100% - 45px); }
.inputBox{border:1px solid #37383E;}
#amountGroups{max-height:45dvh; overflow-y:auto}
.dundunT_modalBox{ position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    background: rgba(0, 0, 0, 0.8);    backdrop-filter: blur(52px); display:none; align-items: center;    justify-content: center;   z-index: 9999;}
#businessType{background:url('https://stunningw.com/img/arrow.svg') no-repeat #37383e !important;background-position: calc(100% - 16px) center !important;background-size: 12px 12px !important;}
.category-section{background:#252525}
/********************
** 든든점수 마무리
********************/
.dundunService{display:grid; grid-template-columns: repeat(4, 1fr);}
.dundunService a{border:1px solid transparent; transition: 0.3s;}
.dundunService a:hover{border:1px solid #326AF3; background:#EFF5FF;}
.consultBtn{box-shadow: 0 0 8px rgb(234 55 55 / 70%);  margin-bottom:40px;}
.gauge_wrapper {  max-width: 760px;   margin-left: auto;  margin-right: auto;}
.gauge_bar_bg {  width: 100%;  height: 56px;  overflow: hidden;  position: relative;}
.gauge_bar {  width: 0%;   transition: width 0.8s ease-out 0.2s;}
.gauge_bar span {  position: relative;  z-index: 2;  opacity: 0;  transition: opacity 0.3s ease-out 0.5s;}
.gauge_bar.current {  background-color: #737784; }
.progress-bar-fill.reduced {  background:linear-gradient(to right, #FA6F6F, #F24444); }
.progress-bar-fill{animation:fillBar 1.5s ease-out; transition: ease-in-out 0.3s;}
.progress-bar-fill {  width: 0;  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);}
.progress-bar-fill span {  opacity: 0;  transition: opacity 0.3s ease-out 0.5s;}
.progress-bar-fill.active span {  opacity: 1;}
.progress-bar-fill.active span {  opacity: 1;}
/********************
** 솔직 후기 리뷰
********************/
.reveiwLine {border-bottom:1px solid #EEEEF0;}
.reveiwWriteBoxLine {border:1px solid #D9DADE;}
#modalContent{max-height:300px; overflow-y:auto}




/********** 든든포인트 **********/
.ddpBnr{ background-image: url('../img/ddpBannerBg.png'); background-position: center; background-size:cover;}
.ddpCta{box-shadow: 0 0 8px #DF2323;}
.ddpIteamCnt{width:calc(33.333333% - 16px); align-self: stretch;}
.ddpCarrerCnt{border:1px solid #F24444}
.ddpCarrerCnt .bco_white{border:1px solid #1c1c1c}
.ddpCarrerCnt{overflow:hidden}
.ddpProcessCnt > div:nth-child(1):after{content:'';display:block; width:1px;height:20px;background:#737784; position:absolute; right:0;top:50%; transform: translateY(-50%);}

.ddpSolutionBox{box-shadow:-12px 0 40px rgba(0,0,0,0.4) ;}
.ddpSolutionCnt{align-self: stretch;}
.ddpConsultantCnt{background:url('../img/profileBanner.jpg')center center; background-size:cover}

.ddpBenefitCnt1{background:url('../img/benefit-001.jpg')center center;background-size:cover}
.ddpBenefitCnt2{background:url('../img/benefit-002.jpg')center center;background-size:cover}
.ddpBenefitCnt3{background:url('../img/benefit-003.jpg')center center;background-size:cover}
.ddpBenefitCnt4{background:url('../img/benefit-004.jpg')center center;background-size:cover}
.ddpBenefitCntLabel {display: inline-flex;flex-direction: column;align-items: baseline;line-height: 1; }
.ddpBenefitCntLabel span {display: inline-block;transform: rotate(90deg);transform-origin: center;}
.ddpBenefitCnt{align-self: stretch; transition: flex-basis .48s ease-in-out, box-shadow .3s ease-in-out; cursor: pointer; }
.ddpBenefitCnt[aria-expanded="true"] {width:100%;flex-basis: var(--card-basis-expanded, 100%);}
.ddpBenefitCnt[aria-expanded="false"] {flex-basis: var(--card-basis-collapsed, 0%);}

.ddpStepCircle .wwp32{border:1px solid #5d606c}
.ddpStepCircle .co_white{border:0; box-shadow: 0 4px 4px rgba(242,68,68,0.22);}


#amountGroups > div{background: rgba(255,255,255,0.05);    padding: 24px;    border-radius: 16px;}






/* 반응형 */
@media (max-width:960px){ .cols_240_240_auto { grid-template-columns:1fr; } }

 /** db톡 **/
 .dbinner{width:80dvw; margin-left:auto; margin-right:auto;}
 .db_mainImg{bottom:80px; right:0;}
 .db_sec3{display: grid; grid-template-columns: repeat(6, 1fr);}
 .dbyoutube{  aspect-ratio: 16 / 9; overflow: hidden; position:relative;}
 .dbyoutube iframe {  position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    border: 0;}
 .db_sec6{display: grid; grid-template-columns: repeat(4, 1fr); gap:24px;}
 .slider-container {    position: relative;    width: 100%;    overflow: hidden;   }

.logo-slider {    width: 100%;    overflow: hidden;  }
.logo-track {    display: flex;    width: max-content;    animation: scroll 30s linear infinite;    align-items: center;  }
.logoImg {    margin: 0 20px; flex-shrink: 0;    transition: opacity 0.3s ease;  }
@keyframes scroll {
0% {
    transform: translateX(0%);
}
100% {
    transform: translateX(-50%);
}
}
.fade {    position: absolute;    top: 0;    width: 25%;    height: 100%;    pointer-events: none;    z-index: 2;  }
.fade-left {    left: 0;    background: linear-gradient(to right, #26272B, transparent);  }
.fade-right {    right: 0;    background: linear-gradient(to left, #26272B, transparent);  }