.relative_wrap {position: relative;}
.event-benefit-template {position: relative; max-width:1380px;}
.event-benefit-template .cont-wrap {padding-bottom: 0px !important;}
.tab_body {position:relative; width:100%; max-width:1380px; margin:0 auto;} 
.tab_container {position:sticky; top:0; display:flex; width:100%; height: 80px; justify-content:center; z-index:5; background:#ffffff;} 
.tab_container li { flex:1; width:50%; height: 100%;} 
.tab_container li a {font-family: 'Pretendard-Regular',serif; display: flex; height: 100%; color:#696969; justify-content: center;align-items: center; font-size: 28px; line-height: 38px; font-weight:bold; border-bottom: 8px solid #fff; } 
.tab_container li a span {pointer-events: none;}
.tab_container li a.active {color: #353537; background:#fff; border-bottom: 8px solid #000000;}
.tab_contents  {position: relative;}


.add-divider{border-bottom: 8px solid #E5E5E5;}


.content-section01_01{background-color: #E5E1EE;}
.content-section01_02{background-color: #E5E1EE; padding-bottom: 5%;}
.tab-ui-wrap{position: relative; left: 50%; transform: translateX(-50%); max-width: 1000px;  }

/* 탭 메뉴 스타일 */
.tab-menu {
    list-style: none;
    display: flex;
    margin-bottom: 3%;
    border-radius: 100px;
    background-color: #fff;
}
.tabItem {
    cursor: pointer;
    width: 500px; height: 84px; 
    margin: 8px;
    border-radius: 100px;
    font-size: 28px;
    text-align: center;
    line-height: 2.9;
    color: #696969;
}
.tab-menu .tabItem.active { background-color: #18181A; color: #FFFFFF;}

.tab-ui-wrap .imageContainer .toggleImage img{border-radius: 20px 20px 0 0; cursor: pointer;}


/* 토글 섹션 스타일 */
.toggleItem {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
}
.toggleImage {
    display: none;
}
.toggleImage.active {
    display: block;
}


.tab-ui-wrap .imageContainer .toggleImage.active {margin-top: 1.7%;}
.tab-ui-wrap .toggle-section .toggleItem.active  {position: relative; max-width: 1000px; aspect-ratio: 1024 / 166; margin-bottom: 2%;}
.tab-ui-wrap .toggle-section .toggleItem  {position: relative; max-width: 1000px; aspect-ratio: 1024 / 166;}
.tab-ui-wrap #section1 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_01_off.png) no-repeat center / 100% 100%;}
.tab-ui-wrap #section2 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_02_off.png) no-repeat center / 100% 100%;}
.tab-ui-wrap #section3 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_03_off.png) no-repeat center / 100% 100%;}
.tab-ui-wrap #section4 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_04_off.png) no-repeat center / 100% 100%;}
.tab-ui-wrap #section5 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img02_01_off.png) no-repeat center / 100% 100%;}
.tab-ui-wrap #section6 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img02_02_off.png) no-repeat center / 100% 100%;}
.tab-ui-wrap #section1 .toggle-section .toggleItem.active, .tab-ui-wrap #section2 .toggle-section .toggleItem.active, .tab-ui-wrap #section3 .toggle-section .toggleItem.active, .tab-ui-wrap #section4 .toggle-section .toggleItem.active,
.tab-ui-wrap #section5 .toggle-section .toggleItem.active, .tab-ui-wrap #section6 .toggle-section .toggleItem.active {display: none;}


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

    .tab_container li a { border-bottom: calc(8 / 720*100vw) solid #fff; } 
    .tab_container li a.active {border-bottom: calc(8 / 720*100vw) solid #000000;}

    
    .tab-ui-wrap{position: relative; left: 50%; transform: translateX(-50%); max-width: calc(624 / 720* 100vw);  }
    .tab-ui-wrap .toggle-section .toggleItem.active  {position: relative; width: 100%; height: calc(206 / 720* 100vw);; margin-bottom: 3%;}
    .tab-ui-wrap .toggle-section .toggleItem  {position: relative; aspect-ratio: 648/169;}
    .tab-ui-wrap #section1 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_01_off_mo.png) no-repeat center / 100% 100%;}
    .tab-ui-wrap #section2 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_02_off_mo.png) no-repeat center / 100% 100%;}
    .tab-ui-wrap #section3 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_03_off_mo.png) no-repeat center / 100% 100%;}
    .tab-ui-wrap #section4 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img01_04_off_mo.png) no-repeat center / 100% 100%;}
    .tab-ui-wrap #section5 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img02_01_off_mo.png) no-repeat center / 100% 100%;}
    .tab-ui-wrap #section6 .toggle-section .toggleItem  {background: url(/kr/event/2025/08/01_ultragear/images/img02_02_off_mo.png) no-repeat center / 100% 100%;}

    .tab-menu {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(624 / 720* 100vw);
        max-height: calc(108 / 720* 100vw);
        list-style: none;
        margin: 0 0 calc( 20 / 720* 100vw) 0;
        display: flex;
        border-radius: 100px;
        background-color: #fff;
    }
    .tabItem {
        cursor: pointer;
        width: 50%;
        height: calc(92 / 720* 100vw);
        margin: calc(8 / 720* 100vw);
        padding: calc(12 / 720* 100vw) calc(50 / 720* 100vw);
        border-radius: 100px;
        font-size: calc(28 / 720* 100vw);
        line-height: 1.2;
        color: #696969;
    }
    
    .tabItem:nth-child(2) {
        padding: calc(28 / 720* 100vw) calc(50 / 720* 100vw);
    }
    .tab-menu .tabItem.active { background-color: #18181A; color: #FFFFFF;}

    .tab-ui-wrap .imageContainer .toggleImage img{max-width: calc(624 / 720* 100vw) !important; border-radius: 20px 20px 0 0;}

    .content-section01_01{background: #E5E1EE;}
    .content-section01_02{background: #E5E1EE; padding-bottom: 8%;}

}