@charset "utf-8";

.event-benefit-template .cont-wrap  {position: relative;  max-width: 1380px !important; padding-bottom: 0px !important;}
picture	{position: relative; display: inline-block;}

.btn_area   {width: fit-content; margin: 0 auto;}

.tab_body    {position: relative; width:100%; margin:0 auto;} 
.tab_container   {position: sticky; top: 0; left: 0; display:flex; width:100%; height: 98px; justify-content:center;transition: all 0.2s; opacity: 1; z-index: 90; background-color: white; border-bottom: 2px solid #e6e6e6;}
.tab_container li  { display: inline-block; height: 100%; } 
.tab_container li:nth-child(1){width: 210px;}
.tab_container li:nth-child(2){width: 265px;}
.tab_container li:nth-child(3){width: 225px;}

.tab_container li:nth-child(1) a  { background: url(../images/tab01_off.png) no-repeat center / 100% 100%;}
.tab_container li:nth-child(2) a  { background: url(../images/tab02_off.png) no-repeat center / 100% 100%;}
.tab_container li:nth-child(3) a  { background: url(../images/tab03_off.png) no-repeat center / 100% 100%;}

.tab_container li:nth-child(1) a.active  { background: url(../images/tab01_on.png) no-repeat center / 100% 100%;}
.tab_container li:nth-child(2) a.active  { background: url(../images/tab02_on.png) no-repeat center / 100% 100%;}
.tab_container li:nth-child(3) a.active  { background: url(../images/tab03_on.png) no-repeat center / 100% 100%;}
.tab_container li a.active::before  {display: none; content: ''; position: absolute; width: 100%; height: 8px; background: black; bottom: -2px; left: 0px;}
.tab_container li a   {position: relative; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 0; color: #696969;}


.tab_contents   {position: relative;}
.tab_container li a span   {
    pointer-events: none;
}

.content-section{position: relative;}
.tab01_sec02_btn01{position: absolute; bottom: 5.4%; height: 3.2%; left: 13.8%; width: 35.5%;}
.tab01_sec02_btn02{position: absolute; bottom: 5.4%; height: 3.2%; left: 50.8%; width: 35.5%;}

.content01-section03 .off,
.content01-section03 .on{position: relative;}
.content01-section03 .off a{position: absolute; top: 68.6%; height: 4.6%; width: 29%; left: 35.5%;}
.content01-section03 .on a{position: absolute; top: 77.9%; height: 3.6%; width: 29%; left: 35.5%;}

.tab02_sec01_btn01{position: absolute; top: 31.8%; height: 2.35%; left: 41%; width: 18.2%;}
.tab02_sec01_btn02{position: absolute; top: 62.45%; height: 2.35%; left: 41%; width: 18.2%;}
.tab02_sec01_btn03{position: absolute; top: 92.65%; height: 2.35%; left: 41%; width: 18.2%; }

.tab03_sec01_btn01{position: absolute; top: 73.7%; height: 3.4%; left: 53.6%; width: 29.8%;}

@media screen and (max-width: 767px)    {
    body    {
        width: 100%;
    }
    .event-benefit-template    {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .tab_container    {
        top: 45px;
        height: calc(108 / 720*100vw);
    }
    .tab_container li a {
        font-size: calc(0 / 720*100vw);
    }

    .tab_container li:nth-child(1){width: 33.3333%;}
    .tab_container li:nth-child(2){width: 33.3333%;}
    .tab_container li:nth-child(3){width: 33.3333%;}
        
    .tab_container li:nth-child(1) a  { background: url(../images/tab01_off_m.png) no-repeat center / 100% 100%;}
    .tab_container li:nth-child(2) a  { background: url(../images/tab02_off_m.png) no-repeat center / 100% 100%;}
    .tab_container li:nth-child(3) a  { background: url(../images/tab03_off_m.png) no-repeat center / 100% 100%;}

    .tab_container li:nth-child(1) a.active  { background: url(../images/tab01_on_m.png) no-repeat center / 100% 100%;}
    .tab_container li:nth-child(2) a.active  { background: url(../images/tab02_on_m.png) no-repeat center / 100% 100%;}
    .tab_container li:nth-child(3) a.active  { background: url(../images/tab03_on_m.png) no-repeat center / 100% 100%;}

    .hellobar-wrap .tab_container {
        top: 88px;
    }

    .tab_container li a.active::before  {
        display: none;
        height: 4px;
    }

    
    .tab01_sec02_btn01{bottom:3.2%; height: 3.1%; left: 6.8%; width: 42.5%; }
    .tab01_sec02_btn02{bottom: 3.2%; height: 3.1%; left: 50.8%; width:42.5%; }

    .content01-section03 .off a{ top: 70.6%; height: 4.6%; width: 81%; left: 9.5%; }
    .content01-section03 .on a{ top: 82.2%; height: 3.2%; width: 81%; left:9.5%; }

    .tab02_sec01_btn01{ top: 31.7%; height: 3%; left: 32%; width: 36.2%; }
    .tab02_sec01_btn02{ top: 61.8%; height: 3%; left: 32%; width: 36.2%; }
    .tab02_sec01_btn03{ top: 93.3%; height: 3%; left: 32%; width: 36.2%;  }

    .tab03_sec01_btn01{top: 79%; height: 2.6%; left: 9.6%; width: 80.8%; }
    
    
}