#service .serviceWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.service-details {
    width: 67%;
}
.service-details li {cursor: pointer;}
.service-imgChoice {
    width: 100%;
    border-radius: 0.9375rem;
    margin-bottom: 24px;
}
/* 기본 스타일 */
#bigimg {
    width: 100%;
    height: 34.756rem;
    max-width: 100%;
    max-height: 34.756rem;
}

#bigimg img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
#bigimg .iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.9375rem;
    background-color: #fff;
    border: 1px solid #EEEFF1;
}
#bigimg .iframe video {
    height: 34.756rem;
}

.service-imgChoice img {border-radius: 0.9375rem;}
.service-imglist {
    width: 100%;   
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.service-imglist .video-item {
    position: relative;
    border-radius: 0.9375rem;
}
.service-imglist .video-item .playIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}
.service-imglist div {
    transition: all 0.2s linear;
    overflow: hidden;
    border-radius: 0.9375rem;   
}
.service-imglist div:hover {
    border: 3px solid #0082FF;
}

.service-imglist div:hover img,
.service-imglist div:hover .playIcon {
    transform: scale(1.4);
  }

.service-imglist {
    display: flex;
    gap: 15px; /* 이미지 간 간격 */
    overflow-x: hidden; /* 가로 스크롤 숨기기 */
}

.service-imglist div {
    width: calc((100% / 5) - 20px);
    height: 8.25rem;
    flex: 0 0 auto; /* 고정 너비 */
    scroll-snap-align: center; /* 슬라이드 중심에 위치 */
}

.service-imglist div img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* border-radius: 0.9375rem; */
}

/* ================== tab ===================*/
#service .tab {
    width: 100%;
}
#service .tabWrap{
	width: 100%;
	margin: 10% auto 0;
}

#service ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#service ul.tabs li{
    width: calc((100% / 3) - 5px);
	background: none;
	color: var(--TextColor);
	display: inline-block;
	padding: 17px 15px;
	cursor: pointer;
    text-align: center;
}

#service ul.tabs li.current{
	border-bottom: 2px solid var(--MainColor);
	color: var(--TextColor);
}

#service .tab-content{
	display: none;
	/* background: #ededed; */
	padding: 15px;
}

#service .tab-content.current{
	display: inherit;
}

/* ============== 바로이용하기 =============*/
.service-use {
    width: 31%;
    height: 34.756rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.9375rem;
    border: 1px solid #EEEFF1;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
}
.service-use li {
    width: 100%;
} 
.service-use li div {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
} 
#service .edu-tag span {
    word-break: keep-all;
    white-space: nowrap;
    padding: 6px 12px 6px 0;
    text-align: center;
    font-size: 16px;
}
.service-useTop p {color: #a2a2a2; line-height: 150%;font-weight: 400;}
.service-useMid .service-type div {width: 100%; margin: 16px 0;}
.service-useMid .typeD-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.service-useTop div:last-child h5 {
  width: 100%;
  margin: 8px 0 0px;
  line-height: 146%;
}

/* 바로이용하기 버튼 */
.service-useBott p {
    padding: 8px 12px;
    background-color: var(--Gray100);
    margin-bottom: 12px;
    border-radius: 5px;
}
.service-useBott select {
    display: block;
    width: 100%;
    padding: 0.6875rem;
    border-radius: 0.3125rem;
    border: 1px solid var(--MainColor);
    text-align: center;
    color: var(--MainColor);
}
.service-useBott button {
    width: 100%;
}
.service-useBott .Gradient, #service_popup .Gradient {
    border-radius: 0.3125rem;
    background: var(--gradient, linear-gradient(90deg, #63ABFF 0%, #0082FF 32.5%, #0040E6 100%));
    color: #fff;
    margin: 8px 0;
}
.service-useBott .Gradient:hover,
.service-useBott button.filedown:hover {
    background: #0061DF;
    color: #fff;
}
.service-useBott button.filedown {
    margin-bottom: 8px;
    background-color: #F0F8FF;
    border: 1px solid #0061DF;
}

/* 바로이용하기 select 커스텀 */
.cont-select {
    position: relative;
    width: 100%;
}

.btn-exper { /*쇼케이스용*/
    width: 100%;
    /* padding: 0.6875rem; */
    background-color: #fff;
    border: 1px solid var(--MainColor);
    color: var(--MainColor);
    box-sizing: border-box;
    border-radius: 0.3125rem;
    cursor: pointer;
    text-align: center;
}
.btn-select {
    width: 100%;
    /* padding: 0.6875rem; */
    background-color: #fff;
    border: 1px solid var(--MainColor);
    color: var(--MainColor);
    box-sizing: border-box;
    border-radius: 0.3125rem;
    cursor: pointer;
    text-align: center;
    background: url("/connectPlay/img/icons/ico_down.svg") center right 14px no-repeat;
}
.btn-exper:hover {background-color: var(--MainColor);color: #Fff;}/*쇼케이스용*/
.btn-select:hover,
.btn-select:focus {
    outline: 1.5px solid var(--MainColor);
}

.list-member {
    display: none;
    position: absolute;
    width: 100%;
    top: 44px;
    left: 0;
    background-color: #fff;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
    border-radius: 0.3125rem;
}

.btn-select.on {
    background: url("/connectPlay/img/icons/ico_up.svg") center right 14px no-repeat;
}

.btn-select.on+.list-member {
    display: block;
}

.list-member li {
    box-sizing: border-box;
}

.list-member li button {
    width: 100%;
    padding: 0.5625rem 0.75rem;
    border: none;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
}

.list-member li button:hover,
.list-member li button:focus {
    background-color: #F0F8FF;
}
#service .service_btnWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#service .service_btnWrap button {
    width: 49%;
}
#service .service_btnWrap .solid {
    background-color: #333;
}
#service .service_btnWrap .solid:hover{background-color: #0061DF;}




/* ==============견적문의하기 팝업창================== */
#service_popup{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
        
}
#service_popup.hide1 {
    display: none;
}

  /* 견적 문의하기 form */
  #service_popup .popup_content {
    position:relative;
    width: 550px;
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
  }

  #service_popup .ser_pop_top{
    display: flex;
    justify-content: space-between;
  }
  #service_popup .ser_pop_top div {
    cursor: pointer;
  }

  /* 이용권  */
  #service_popup  .popup_text{
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    margin-top: 16px;
    margin-bottom: 38px;
  }

  /* 정보 입력 박스  클릭ㅇ*/
  #service_popup .popup_text_box{
    display: flex;
    padding: 8px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid var(--Silver, #E7EBEE);
    background: #FFF;
    width: 100%;
    font-size: 14px;
  }

  /* 박스 아웃라인 커스텀 focus */
  #service_popup .popup_text_info input:focus {
    outline-color: #0040E6;
  }

  /* ---------- 문의하기 정보 그리드 ---------- */
  #service_popup .popup_text_info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
    column-gap: 10px;
    margin-bottom: 20px;
    width: 100%;
  }
  #service_popup .popup_text_info input{
    font-size: 14px;
  }
  #service_popup .popup_text_info p{
    color: #7a7a7a;
    margin-bottom: 3.5px;
    font-size: 14px;
    letter-spacing: -0.05625rem;
  }
  
  /* ---------- 교육일정 popup_text_box2 ---------- */
  #service_popup .popup_text_box2 {
    padding: 8px 12px;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Silver, #E7EBEE);
    background: #FFF;
    width: 49%;
  }
  .popup_text_info > div > input.date01 {
    margin-right:15px;
  } 
  .popup_text_info > div:nth-child(5) {
      grid-column: 1 / 3;
  }
  .popup_text_info .dateWrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .popup_text_info > div:nth-child(6) {
      grid-column: 1 / 3;
  }

  /* ---------- 장소 ------------*/
  #service_popup .popup_text_info2{
    margin-bottom: 20px;
    letter-spacing: -0.05625rem;
  }
  #service_popup .popup_text_info2 p {
    font-size: 14px;
  }
  /* 기타 문의 및 요청 사항 */
  #service_popup .popup_text_info3{margin-bottom: 24px;}
  #service_popup .popup_text_info3 p {font-size: 14px;}


  /* ----------- 내용동의 -------------- */
  /* 체크박스 내용 동의 */
  #service_popup .popup_text_check{
    display: flex;
    justify-content: space-between;
  }
  .popup_text_info > div > input {
      width:100%;
      height:40px;
  }
  /* 자세히보기 */
  .popup_text_check1 {
      display: none;
      width: 100%;
  }
  #agree_info { 
    width: 100%;
    color: var(--Gray400);
    margin-bottom: 16px;
  } 
  #service .edu-tag {
    height: 28px;
  }
  


  @media only screen and (max-width: 1024px) {
    #service .serviceWrap {
        flex-direction: column;
    }
    .contetns {
        width: 90%;
        margin: 0 auto;
    }
    .service-details {
        width: 100%;
    }
    .service-use {
        width: 100%;
        height: max-content;
        flex-direction: row;
        margin: 5% auto 0;
    }
    .service-useBott_wrap {
        width: 300px;
    }
  }
  @media only screen and (max-width: 768px) {
    .service-use {
        flex-direction: column;
        margin: 5% auto 0;
    }
    .service-useBott_wrap {
        width: 100%;
    }
  }

  @media screen and (max-width: 730px) {
    .service-imglist {
        overflow-x: auto; /* 가로 스크롤 활성화 */
        scroll-snap-type: x mandatory; /* 스크롤 스냅 활성화 */
    }
    
    .service-imglist div {
        min-width: 30%; /* 각 슬라이드의 너비 */
        box-sizing: border-box;
    }

    .service-imglist::-webkit-scrollbar {
        display: none; /* 스크롤바 숨김 */
    }
    
}

@media screen and (max-width: 600px) {
    #service.contetns {padding: 54px 0;}
        /* 기본 스타일 */
#bigimg {
    width: 100%;
    height: 32vh;
    max-width: 100%;
    max-height: 32vh;
}

#bigimg img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
  
  #bigimg .iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

}

@media screen and (max-width: 412px) {
    .service-imglist div {
        width: 40%;
    }
}