<!-- 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: #5A5A5A;
background-color: #000;
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: #FFF;
background-color: #1E78FF;
}
#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: #000000;
padding-top: var(--global-header-height);
}
/* cnt */
.art-content-inner.cnt {
padding-top: var(--global-header-height);
background-color: #fff;
}
#tabpanel1 {
background-color: #000000;
}
</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/editor/202501/1736216284809.jpg" style="width: 1920px; height: 550px;" /></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의 당찬 새해 다짐을 소개할게요 : )</p>
</div>
<div aria-labelledby="tab1" class="art-content-inner cnt" id="tabpanel1"><img alt="" src="https://image.a-rt.com/art/editor/202501/1736151973630.jpg" style="width: 1920px; height: 2437px;" /></div>
<div aria-labelledby="tab2" class="art-content-inner cnt" id="tabpanel2"><img alt="" src="https://image.a-rt.com/art/editor/202501/1736151981959.jpg" style="width: 1920px; height: 2270px;" /></div>
<div aria-labelledby="tab3" class="art-content-inner cnt" id="tabpanel3"><img alt="" src="https://image.a-rt.com/art/editor/202501/1736151991264.jpg" style="width: 1920px; height: 2354px;" /></div>
<div aria-labelledby="tab4" class="art-content-inner cnt" id="tabpanel4"><img alt="" src="https://image.a-rt.com/art/editor/202501/1736215579752.jpg" style="width: 1920px; height: 2305px;" /></div>
<div class="art-content-inner credit"><img alt="" src="https://image.a-rt.com//art/display/webzine/202412/1734326382643.jpg" /></div>
</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/display/webzine/202501/1736152488520.jpg" style="width: 1920px; height: 180px;" />
-
-
-
-
뉴발란스
패커블 짐 색
89,900
59,000원
[34%]
<img src="https://image.a-rt.com//art/display/webzine/202501/1736152494518.jpg" style="width: 1920px; height: 87px;" />
-
나이키
우먼스 나이키 캄 뮬 SE
99,000
69,000원
[30%]
-
나이키
우먼스 나이키 캄 뮬 SE
99,000
69,000원
[30%]
-
나이키
우먼스 나이키 캄 뮬 SE
99,000
69,000원
[30%]
-
나이키
나이키 스포츠웨어 인조 퍼 토트백 (10L)
95,000원
-
나이키
우먼스 나이키스포츠웨어 인조 퍼 토트백
99,000
39,000원
[60%]
<img src="https://image.a-rt.com//art/display/webzine/202501/1736152498743.jpg" style="width: 1920px; height: 87px;" />
-
아디다스
캠퍼스 00S
139,000
59,000원
[57%]
-
아디다스
캠퍼스 00s
139,000
83,000원
[40%]
-
아디다스
캠퍼스 00s
139,000
83,000원
[40%]
-
아디다스
캠퍼스 00s
129,000
29,000원
[77%]
-
아디다스
캠퍼스 00s
129,000
29,000원
[77%]
<img src="https://image.a-rt.com//art/display/webzine/202501/1736152503318.jpg" style="width: 1920px; height: 87px;" />
-
스케쳐스
고 워크 아치 핏 2.0
119,000
83,000원
[30%]
-
스케쳐스
고 워크 아치 핏 2.0
119,000
83,000원
[30%]
-
스케쳐스
고 워크 아치 핏 2.0 (슬립 인스)
129,000
103,000원
[20%]
-
스케쳐스
고 워크 아치 핏 2.0 (슬립 인스)
129,000
103,000원
[20%]
-
스케쳐스
고 워크 아치 핏 2.0 (슬립 인스)
129,000
103,000원
[20%]
-
스케쳐스
고 워크 아치 핏 2.0 (슬립 인스)
129,000
103,000원
[20%]
-
스케쳐스
밥스 킵세이크 라이트 - 코지 블렌드
69,000
55,000원
[20%]
-
스케쳐스
밥스 킵세이크 라이트 - 코지 블렌드
69,000
55,000원
[20%]
-
스케쳐스
베이퍼 폼 (키즈)
69,000
62,000원
[10%]
-
스케쳐스
베이퍼 폼 (키즈)
69,000
62,000원
[10%]
