/*공용 섹션 css*/

@import url(basic.css);

/*04joinLAB*/
    .main_04_joinLAB{
        background: url(images/main/viewmenu_background.png)no-repeat 0 0;
        background-size: cover;
    }

    .joinLAB_title{
        margin-bottom: 15px;
    }

    .joinLAB_subtitle{
        margin-bottom: 50px;
    }

    .joinLAB_cards{
        margin-bottom: 30px;
    }

    .joinLAB_cards ul{
        display: flex;
        width: 100%;
        height: max-content;
        margin-left: 8px;
        gap: 32px;
    }

    .joinLAB_cards li{
        /*width는 ul의 갭으로 조정*/
        height: max-content;
        background: #f0f0f0;
        border-radius: 8px;
    }
    .joinLAB_cards_img{
        position: relative;
        background: url(images/joinLAB_card01_img.jpg)no-repeat 0 0;
        background-size: cover;
        height: 180px;
        border-radius: 8px 8px 0 0;
    }
    .cardBanner_dessert{
        position: absolute;
        top: 16px;
        left: -8px;
        width: 160px;
        line-height: 39px;
        border-radius: 2px;
        background: #FFF260;
        text-align: center;
        font-size: 20px;
        font-family: 'Geist', sans-serif;
        font-weight: 600;
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.6);
    }
    .joinLAB_cards_content{
        padding: 15px;
    }
    .joinLAB_cards_content p{font-size: 20px; margin: 8px 0 20px;}
    .joinLAB_cards button{
        width: 100%;
        padding: 11px 0;
        border-radius: 8px;
        font-size: 20px;
        border: none;
        background: #3C7AFF;
        color: #fff;
    }
    .joinLAB_notice{
        font-size: 18px;
        margin-left: 7px;
        opacity: 0.7;
    }

    .joinLAB .btn{
        padding-top: 40px;
        text-align: right;
    }
    .joinLAB_CTA{
        background: #3C7AFF;
        color: #fff;
    }







    /*인덱스를 제외한 페이지마다 적용되는 스타일*/
/* .LAB_05_contentEnd{background: green;} */
    .contentEnd{
        text-align: center;
        border-top: 3px dotted #fff;
        padding-top: 100px;
    }

    .contentEnd_title{
        margin-bottom: 50px;
    }

    .contentEnd_body{
        margin-bottom: 100px;
    }



@media screen and (max-width: 1024px){



    /*04 JOIN LAB*/
    .main_04_joinLAB{
        padding-top: 80px !important; 
    }
    .joinLAB{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .joinLAB_subtitle{
        margin-bottom: 70px;
    }

    .joinLAB_cards{
        margin-bottom: 10px;
    }

    .joinLAB_cards ul{
        width: 100%;
        height: max-content;
    }
    .joinLAB_cards_img{
        height: 120px;
        border-radius: 6px 6px 0 0;
    }

    .cardBanner_dessert{
        top: 13px;
        left: -6px;
        width: 128px;
        line-height: 31px;
        border-radius: 2px;
        font-size: 0.833em;
        box-shadow:
            0 1.6px 3.2px rgba(0, 0, 0, 0.6);
    }

    .joinLAB_cards_content{
        padding: 12px;
    }

    .joinLAB_cards_content p{
        font-size: 0.833em;
        margin: 6px 0 16px;
    }

    .joinLAB_cards button{
        width: 100%;
        padding: 9px 0;
        border-radius: 6px;
        font-size: 0.833em;
    }

    .joinLAB_notice{
        font-size: 0.75em;
        margin-left: 6px;
    }

    .joinLAB .btn{
        padding-top: 70px;
    }

    


}












@media screen and (max-width: 768px){


    .joinLAB h2, .joinLAB h3, .joinLAB p{
        color: #fff;
    }

    .main_04_joinLAB{
        background: #000 !important;
    }

    .main_04_joinLAB .inner{
        padding-top: 40px;
        gap: 28px;
    }

    .joinLAB_title{
        margin: 0;
        color: #FFFf00 !important;
        font-size: 30px;
        line-height: 1.1;
        width: 310px;
    }
    .joinLAB_title span{
        font-size: 20px;
        color: #fff;
    }

    .joinLAB_subtitle{
        font-size: 14px !important;
        font-weight: 400;
        margin-bottom: 20px;
    }


      html,
      body {
        position: relative;
        height: 100%;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }


      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    

    .joinLAB_cards{
        margin: 0;
    }

    .joinLAB_cards ul{
        gap: 0 !important;
    }

    .joinLAB_cards_img{
        height: 120px;
        border-radius: 6px 6px 0 0;
    }

    .cardBanner_dessert{
        top: 13px;
        left: -6px;
        width: 118px;
        line-height: 25px;
        border-radius: 2px;
        font-size: 0.833em;
        box-shadow:
            0 1.6px 3.2px rgba(0, 0, 0, 0.6);
    }

    .joinLAB_cards_content{
        padding: 12px;
        text-align: left;
    }

    .joinLAB_cards_content p{
        font-size: 0.833em;
        margin: 6px 0 16px;
        color: #000;
    }

    .joinLAB_cards button{
        width: 100%;
        padding: 9px 0;
        border-radius: 6px;
        font-size: 0.833em;
    }

    .joinLAB_notice{
        font-size: 12px;
        margin: 0;
    }

    .joinLAB .btn{
        padding-top: 50px;
    }




    .contentEnd{
        text-align: center;
        border-top: 2px dotted #fff;
        padding-top: 80px;
    }

    .contentEnd_title{
        margin-bottom: 12px;
    }

    .contentEnd_body{
        margin-bottom: 12px;
    }

}







/* 데스크톱 환경 (스와이퍼가 파괴된 769px 이상) 전용 스타일 */
@media screen and (min-width: 769px) {
    /* 1. 카드를 감싸는 부모를 Flexbox로 가로 정렬 */
    .joinLAB_cards .swiper-wrapper {
        display: flex;
        justify-content: space-between; /* 카드들을 양옆으로 고르게 분산 */
        gap: 20px; /* 카드 사이 간격 */
    }

    /* 2. 개별 카드의 너비를 5등분으로 고정 */
    .joinLAB_cards .swiper-slide {
        /* 5개가 한 줄에 들어가도록 계산 (gap 여백 포함) */
        width: calc(20% - 16px); 
        
        /* 만약 고정 픽셀 너비를 쓰고 싶다면 아래처럼 변경하세요 */
        /* width: 220px; */ 
        
        height: auto;
    }
}