
.MAIN_03_SRO2 {
  overflow: hidden;
  position: relative;
  padding-top: 8rem;

}

.MAIN_03_SRO2 .contents-container {
  position: relative;
}

.MAIN_03_SRO2 .contents-inner {
  position: relative;
  width: 100%; padding: 0px 100px
}

.MAIN_03_SRO2 .contents-swiper {
  overflow: hidden; 
}

.MAIN_03_SRO2 .swiper-slide {
  position: relative; 
}

.MAIN_03_SRO2 .cardset {
  width: 100%;   position: relative
}



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.MAIN_03_SRO2 .cardset .cardset-figure {  width: 100%!important; float: left; 
 background-color: #2c2e41 ; border-radius: 19px; padding: clamp(20px, calc(0.329vw + 18.684px), 25px) clamp(20px, calc(0.658vw + 17.368px), 30px) clamp(50px, calc(0vw + 50px), 50px) clamp(20px, calc(0.658vw + 17.368px), 30px);  height: auto!important;
  display: flex; justify-content:space-between;  align-items:flex-start; flex-direction:row; box-sizing: border-box;  margin-bottom: -30px; 
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.MAIN_03_SRO2 .cardset .cardset-figure {  width: 100%!important; float: left; 
 background-color: #2c2e41 ; border-radius: 19px; padding:20px 30px 50px 20px;  height: auto!important;
  display: flex; justify-content:space-between;  align-items:flex-start; flex-direction:row; box-sizing: border-box;  margin-bottom: -30px; 
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt{   width: 100%!important; float: left;  display: flex;
justify-content:flex-start;  align-items: center; flex-direction:row; box-sizing: border-box; gap:10px;  position: relative; padding-left: 60px;
}
	
.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .wg_img1 {  width:50px; border-radius: 100% ;  aspect-ratio:1 / 1!important; overflow: hidden; background-color: #7993e7
; position: absolute; left: 0px;

top:50%;transform: translateY(-50%);}
	
.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .wg_img1 img{ width:100%;     object-fit: cover;    height: 100%;  }



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .intt{  font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 1.0);  line-height: 150%; letter-spacing: -1px; 
}	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .intt{  font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.9);  line-height: 150%; letter-spacing: -1px; 
}	
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .intt{  font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.7);  line-height: 150%; letter-spacing: -1px; 
}	
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/







.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt2{  width:auto;  font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.8);  line-height: 100%;  background-color: #7993e7; border-radius: 30px; padding: clamp(7px, calc(0.197vw + 6.211px), 10px) clamp(10px, calc(0.987vw + 6.053px), 25px) clamp(7px, calc(0.197vw + 6.211px), 10px) clamp(10px, calc(0.987vw + 6.053px), 25px); position: relative; white-space:nowrap;
}
/*.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt2:before{width:115px ; height:5px ; content: "";    font-family: unicons-line; background:url("../../../../../_img/img/SRO/main_03_img01.png")no-repeat center center; background-size: 115px; position: absolute; left:-130px; top:50%}*/



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.MAIN_03_SRO2 .cardset .cardset-body {width: 100%!important; 
  height:100%; background-color: #42465d ; border-radius: 19px; padding: 45px; display: grid; grid-template-columns: repeat(2, 1fr); gap:10px; position: relative; z-index: 2
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.MAIN_03_SRO2 .cardset .cardset-body {width: 100%!important; 
  height: 100%; background-color: #42465d ; border-radius: 19px; padding: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap:10px;position: relative; z-index: 2
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in{width: 100%;}
.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in .cardset-intt{width: 100%; font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.9);  line-height: 100%; margin-bottom: 10px }
.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in .cardset-intt2{width: 100%; font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.9);  line-height: 100%; margin-bottom: 10px; text-align: right}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in .cardset-inbox{width: 100%; background-color: #e7e7e7; border-radius:19px; padding:30px 20px}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in .cardset-inbox{width: 100%; background-color: #e7e7e7; border-radius:19px; padding:clamp(7px, calc(1.513vw + 0.947px), 30px) clamp(10px, calc(0.658vw + 7.368px), 20px) clamp(7px, calc(1.513vw + 0.947px), 30px) clamp(10px, calc(0.658vw + 7.368px), 20px)}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in .cardset-inbox .play_btn a{width: 100%; position: relative; cursor: pointer}
.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in .cardset-inbox .play_btn a:after{width:37px ; height:37px ; content: "";    font-family: unicons-line; background:url("./_img/img/SRO/main_03_icon.svg")no-repeat center center; background-size: 37px; position: absolute; left:0px; top:50%; margin-top: -25px}
.MAIN_03_SRO2 .cardset .cardset-body>.cardset-in .cardset-inbox .play_btn a:before{width:147px ; height:32px ; content: "";    font-family: unicons-line; background:url("/_img/img/SRO/main_03_img06.png")no-repeat center center; background-size: 147px; position: absolute; right:0px; top:50%; margin-top: -20px}


.MAIN_03_SRO2 .contents-control {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 4.8rem;
}

.MAIN_03_SRO2 .swiper-button-next,
.MAIN_03_SRO2 .swiper-button-prev {
  top: 50%;
  transform: translateY(50%);
  width: 5.4rem;
  height: 5.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 5.4rem;
  transition: 0.3s;

}

.MAIN_03_SRO2 .swiper-button-prev {
  left: -2rem;
  background-image: url("../../../../../_img/img/SRO/main_03_icon2.svg");
}

.MAIN_03_SRO2 .swiper-button-next {
  right: -2rem;
  background-image: url("../../../../../_img/img/SRO/main_03_icon3.svg");
}

.MAIN_03_SRO2 .swiper-button-prev:after,
.MAIN_03_SRO2 .swiper-button-next:after {
  content: none;
}

.MAIN_03_SRO2 .swiper-button-next:hover,
.MAIN_03_SRO2 .swiper-button-prev:hover {
  opacity: 1;
}

.MAIN_03_SRO2 .swiper-pagination {
  position: relative;
  left: 0;
  bottom: 0;
  width: auto;
}

.MAIN_03_SRO2 .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  margin: 0 1.2rem 0 0 !important;
  background-color: rgba(36, 36, 36, 0.3);
  opacity: 1;
}

.MAIN_03_SRO2 .swiper-pagination-bullet-active {
  background-color: #242424;
  border: none;
}

.MAIN_03_SRO2 .contents-control .btnset {
  position: absolute;
  right: 0;
  font-weight: var(--fw-bold);
  gap: 1.2rem;
}

@media (max-width: 1200px) {

  .MAIN_03_SRO2 .swiper-button-next,
  .MAIN_03_SRO2 .swiper-button-prev {

  }
}

@media (max-width: 992px) {
  .MAIN_03_SRO2 {
    padding-top: 5.5rem;
    padding-bottom: 3rem; position: relative
  }

.MAIN_03_SRO2 .contents-inner {
  position: relative;
  width: 100%; padding: 0px
}
	
	
	
	
.MAIN_03_SRO2 .cardset {
  width: 100%;  height: auto;  position: relative
}


	
.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt{  display: flex;
justify-content:flex-start;  align-items: center; flex-direction:row; box-sizing: border-box; gap:10px
}
	
.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .wg_img1 {  width:50px;  height: 50px; border-radius: 100% ;  aspect-ratio:1 / 1; overflow: hidden; background-color: #7993e7
}
	
.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .wg_img1 img{ width:100%;     object-fit: cover;    height: 100%;  }

.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt .intt{  font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tit-mds-size) * 0.8);  line-height: 150%; letter-spacing: -1px; 
}	

.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt2{  width:auto;  font-family: 'NanumSquare'; font-weight: 700;
color: #fff; font-size:calc(var(--tx-sm-size) * 0.9); line-height: 100%;  background-color: #7993e7; border-radius: 30px; padding: 10px 15px; position: relative; margin-right: -10px
}
/*.MAIN_03_SRO2 .cardset .cardset-figure .cardset-tt2:before{width:45px ; height:5px ; content: "";    font-family: unicons-line; background:url("../../../../../_img/img/SRO/main_03_img01.png")no-repeat center center; background-size: 115px; position: absolute; left:-50px; top:50%;  overflow: hidden}*/

	



	
	
  .MAIN_03_SRO2 .contents-control {
    margin-top: 2.8rem;
  }


  .MAIN_03_SRO2 .swiper-button-next,
  .MAIN_03_SRO2 .swiper-button-prev {
   
  }
	
.MAIN_03_SRO2 .swiper-button-next,
.MAIN_03_SRO2 .swiper-button-prev {
  top: -15%;
  transform: translateY(50%);
  width: 2.5rem;
  height: 2.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5rem;
  transition: 0.3s;

}

.MAIN_03_SRO2 .swiper-button-prev {
  left: 75%;
  background-image: url("../../../../../_img/img/SRO/main_03_icon2.svg");
}

.MAIN_03_SRO2 .swiper-button-next {
  right: 5%;
  background-image: url("../../../../../_img/img/SRO/main_03_icon3.svg");
}	
	
	
	
	
	
	
  .MAIN_03_SRO2 .contents-control .btnset {
    position: relative;
    align-self: flex-end;
    margin-top: 3rem;
  }



  .MAIN_03_SRO2 .swiper-pagination-bullet {
    width: 0.8rem;
    height: 0.8rem;
    margin: 0 0.8rem 0 0 !important;
  }
}


/* 음성 카드 */
.voice-card{display:flex;align-items:center;gap:12px;}
.vc-btn{
  width:44px;height:44px;border:0;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;background:#fff;color:#1f2540;box-shadow:0 4px 14px rgba(0,0,0,.12)
}
.vc-btn .icon{width:22px;height:22px;fill:currentColor;display:none}
.vc-btn .icon-play{display:block}
.voice-card.is-playing .vc-btn .icon-play{display:none}
.voice-card.is-playing .vc-btn .icon-stop{display:block}

/* 파형(24 bars) */

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.vc-wave{display:flex;align-items:flex-end;height:28px;gap:6px}
}
/**** pc2 ****/
@media all and (max-width:1460px) and (min-width:768px) {.vc-wave{display:flex;align-items:flex-end;height:28px;gap:3px}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.vc-wave{display:flex;align-items:flex-end;height:28px;gap:3px}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.vc-wave span{
  width:3px;height:6px;border-radius:3px;background:#9fb2ff;
  animation:vcwave 1s ease-in-out infinite;animation-play-state:paused;opacity:.95
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.vc-wave span{
  width:2px;height:4px;border-radius:3px;background:#9fb2ff;
  animation:vcwave 1s ease-in-out infinite;animation-play-state:paused;opacity:.95
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 지연값을 24개에 균등 분배 */
.vc-wave span:nth-child(1){animation-delay:0s}
.vc-wave span:nth-child(2){animation-delay:.04s}
.vc-wave span:nth-child(3){animation-delay:.08s}
.vc-wave span:nth-child(4){animation-delay:.12s}
.vc-wave span:nth-child(5){animation-delay:.16s}
.vc-wave span:nth-child(6){animation-delay:.20s}
.vc-wave span:nth-child(7){animation-delay:.24s}
.vc-wave span:nth-child(8){animation-delay:.28s}
.vc-wave span:nth-child(9){animation-delay:.32s}
.vc-wave span:nth-child(10){animation-delay:.36s}
.vc-wave span:nth-child(11){animation-delay:.40s}
.vc-wave span:nth-child(12){animation-delay:.44s}
.vc-wave span:nth-child(13){animation-delay:.48s}
.vc-wave span:nth-child(14){animation-delay:.52s}
.vc-wave span:nth-child(15){animation-delay:.56s}
.vc-wave span:nth-child(16){animation-delay:.60s}
.vc-wave span:nth-child(17){animation-delay:.64s}
.vc-wave span:nth-child(18){animation-delay:.68s}
.vc-wave span:nth-child(19){animation-delay:.72s}
.vc-wave span:nth-child(20){animation-delay:.76s}
.vc-wave span:nth-child(21){animation-delay:.80s}
.vc-wave span:nth-child(22){animation-delay:.84s}
.vc-wave span:nth-child(23){animation-delay:.88s}
.vc-wave span:nth-child(24){animation-delay:.92s}

@keyframes vcwave{0%,100%{height:6px}50%{height:26px}}
.voice-card.is-playing .vc-wave span{animation-play-state:running}

/* 기본: PC에서는 16개 모두 보임 */
.vc-wave span{display:inline-block}


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {  .vc-wave span:nth-child(n+6){display:none}
}
/**** 모바일 ****/
@media all and (max-width:767px) and (min-width:401px)  {.vc-wave span:nth-child(n+20){display:none}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {.vc-wave span:nth-child(n+10){display:none}
}
/* 구분 //end -----------------------------------*/



/* 스와이퍼 잠금 시 화살표 비활성 */
.swiper-nav-locked .swiper-button-prev,
.swiper-nav-locked .swiper-button-next{
  pointer-events:none; opacity:.35; filter:grayscale(1)
}


/* 아이콘/파형에 클릭이벤트 안 걸리도록 */
.vc-btn .icon,
.vc-wave { pointer-events: none; }

/* 버튼이 항상 최상단에서 클릭을 독점 */
.voice-card,
.cardset-inbox { position: relative; }
.vc-btn{
  position: relative;
  z-index: 10;            /* 버튼 최상단 */
}

/* 파형/아이콘/장식은 클릭 막기 */
.vc-btn .icon,
.vc-wave,
.cardset-inbox::before,
.cardset-inbox::after { pointer-events: none; }

/* 기존 마크업에 남아있는 play_btn a 가 위를 덮는 경우가 많습니다 */
.play_btn a{ pointer-events: none !important; }

/* 혹시 카드 전체를 클릭하면 재생되도록 해둔 경우(부모 토글)도 무력화 */
.voice-card,
.cardset-inbox{ -webkit-tap-highlight-color: transparent; }


.voice-card, .cardset-inbox { position: relative; }
.vc-btn{ position: relative; z-index: 10; }
.vc-btn .icon, .vc-wave, .play_btn a { pointer-events: none !important; }