<!-- S : 이벤트 복사영역 여기서부터 -->
<style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
/* ROOT */
:root {
--global-header-height: 100px;
}
/* common */
.art-container-event {
position: relative;
width: 100%;
max-width: 1920px;
margin: 0 auto;
text-align: center;
/* overflow: hidden; */
}
.art-content-inner {
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
overflow: hidden;
}
.art-content-inner img {
display: block;
width: 100%;
}
/* main */
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.art-content-inner.main .obj {
position: absolute;
top: 16.18%;
left: 35.21%;
width: 2.24%;
animation: rotate 6s infinite linear;
}
/* nav */
#tabNav {
position: sticky;
top: var(--global-header-height);
display: flex;
justify-content: center;
font-family: Pretendard, sans-serif !important;
color: #fff;
background-color: #FFC400;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
z-index: 2;
}
#tabNav li {
font-size: 20px;
font-weight: 600;
line-height: 50px;
width: 25%;
max-width: 18.75%;
transition: all 0.3s;
}
#tabNav li span {
position: relative;
}
#tabNav li:hover,
#tabNav li.active {
color: #000;
background-color: #FFCE29;
}
#tabNav li.active span::after {
content: '';
position: absolute;
top: -4px;
right: -4px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #000;
}
#tabNav li a {
display: block;
width: 100%;
height: 100%;
}
/* sub */
.art-content-inner.sub {
color: #fff;
font-family: Pretendard, sans-serif !important;
font-size: 20px;
line-height: 1.8;
background-color: #000;
padding-top: var(--global-header-height);
}
/* cnt */
.art-content-inner.cnt {
padding-top: var(--global-header-height);
background-color: #fff;
}
#tabpanel1 {
background-color: #000;
}
</style>
<!-- s : art-container-event -->
<div class="art-container-event">
<div class="art-content-inner main"><img alt="대문자 J의 플랜 A to D" src="https://image.a-rt.com//art/display/webzine/202411/1732264262286.jpg" />
<div class="obj"><img alt="" src="https://image.a-rt.com/art/managing/template/editorial/pc/obj.png" /></div>
</div>
<!-- 탭버튼 수정 -->
<ul id="tabNav" role="tablist">
<li aria-controls="tabpanel1" class="tab" id="tab1" role="tab"><a href="#tabpanel1"><span>PLAN A 도심 속 드라이브</span></a></li>
<li aria-controls="tabpanel2" class="tab" id="tab2" role="tab"><a href="#tabpanel2"><span>PLAN B 조용한 아웃도어</span></a></li>
<li aria-controls="tabpanel3" class="tab" id="tab3" role="tab"><a href="#tabpanel3"><span>PLAN C 반려견과 조깅</span></a></li>
<li aria-controls="tabpanel4" class="tab" id="tab4" role="tab"><a href="#tabpanel4"><span>PLAN D 북카페에서 독서</span></a></li>
</ul>
<!-- 텍스트 수정 -->
<div class="art-content-inner sub">
<p>MBTI는 배신하지 않는다.<br />
계획적인 J가 첫눈을 기다리며 보낼<br />
네 가지 일상을 소개합니다.</p>
</div>
<div aria-labelledby="tab1" class="art-content-inner cnt" id="tabpanel1"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265914028.jpg" style="width: 1920px; height: 2300px;" /></div>
<div aria-labelledby="tab2" class="art-content-inner cnt" id="tabpanel2"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265936292.jpg" style="width: 1920px; height: 2454px;" /></div>
<div aria-labelledby="tab3" class="art-content-inner cnt" id="tabpanel3"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265972092.jpg" style="width: 1920px; height: 2372px;" /></div>
<div aria-labelledby="tab4" class="art-content-inner cnt" id="tabpanel4"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732265992465.jpg" style="width: 1920px; height: 2305px;" /></div>
<div class="art-content-inner credit"><img alt="" src="https://image.a-rt.com//art/display/webzine/202411/1732262919793.jpg" /></div>
<!-- 하단 띠배너 --><br />
</div>
<!-- e : art-container-event --><script>
$(function () {
$(window).on('scroll', function () {
const scrollY = Math.ceil($(this).scrollTop());
$('.art-content-inner.cnt').each(function () {
const cntTop = Math.floor($(this).offset().top);
const cntBtm = cntTop + $(this).height();
if (scrollY >= cntTop) {
if (scrollY <= cntBtm) {
$(this).addClass('active');
$('#' + $(this).attr('aria-labelledby')).addClass('active');
} else {
$(this).removeClass('active');
$('#' + $(this).attr('aria-labelledby')).removeClass('active');
}
} else {
$(this).removeClass('active');
$('#' + $(this).attr('aria-labelledby')).removeClass('active');
}
});
});
});
</script><!-- E : 이벤트 복사영역 여기까지 -->
<img src="https://image.a-rt.com/art/editor/202411/1732266789074.jpg" style="width: 1920px; height: 100px;" />
