"광주 문화예술 인문스토리 플랫폼2"의 두 판 사이의 차이

광주문화예술인문스토리플랫폼
이동: 둘러보기, 검색
 
(같은 사용자의 중간 판 7개는 보이지 않습니다)
1번째 줄: 1번째 줄:
 
{{#tag:html|
 
{{#tag:html|
−
      <!-- 에디터 컨텐츠 등록 영역 -->
+
<!-- 에디터 컨텐츠 등록 영역 -->
−
      <div class="gwangju-main-wrap">
+
<div class="gwangju-main-wrap">
−
        <!-- 메인 베너 영역 -->
+
  <!-- 메인 베너 영역 -->
−
        <div class="gwangju-main-section gwangju-main-section01">
+
  <div class="gwangju-main-section gwangju-main-section01">
−
          <div class="main-visual-container">
+
    <div class="main-visual-container">
−
            <div class="main-visual-swiper swiper">
+
      <div class="main-visual-swiper swiper">
−
              <div class="swiper-wrapper">
+
        <div class="swiper-wrapper">
−
                <div class="swiper-slide">
+
          <div class="swiper-slide">
−
                  <a href="#" class="visual-link">
+
            <a href="#" class="visual-link">
−
                    <span class="visual-img">
+
              <span class="visual-img">
−
                      <img
+
                <img
−
                        src="/wiki/skins/ETBSkin/images/new/img_main_visual01.jpg"
+
                  src="/wiki/skins/ETBSkin/images/new/img_main_visual01.jpg"
−
                        alt="Image 1"
+
                  alt="Image 1"
−
                      />
+
                />
−
                    </span>
+
              </span>
−
                    <span class="visual-copy">광주스토리<br />플랫폼</span>
+
              <span class="visual-copy">광주스토리<br />플랫폼</span>
−
                    <span class="visual-cont">
+
              <span class="visual-cont">
−
                      <h2 class="visual-tit-group">
+
                <h2 class="visual-tit-group">
−
                        <span class="tit">
+
                  <span class="tit">
−
                          빛이 스며든 <br />이야기, <br />예술이 되는 <br />역사
+
                    빛이 스며든 <br />이야기, <br />예술이 되는 <br />역사
−
                        </span>
+
                  </span>
−
                        <span class="line-group type01">
+
                  <span class="line-group type01">
−
                          <span class="line line01"></span>
+
                    <span class="line line01"></span>
−
                          <span class="sub">빛고을</span>
+
                    <span class="sub">빛고을</span>
−
                          <span class="line line02"></span>
+
                    <span class="line line02"></span>
−
                        </span>
+
                  </span>
−
                        <span class="line-group type02">
+
                  <span class="line-group type02">
−
                          <span class="line line03"></span>
+
                    <span class="line line03"></span>
−
                          <span class="sub">광주에서 시작됩니다.</span>
+
                    <span class="sub">광주에서 시작됩니다.</span>
−
                        </span>
+
                  </span>
−
                      </h2>
+
                </h2>
−
                      <span class="visual-btn">
+
                <span class="visual-btn">
−
                        <span class="main-btn">
+
                  <span class="main-btn">
−
                          <span class="btn-txt">VIEW MORE</span>
+
                    <span class="btn-txt">VIEW MORE</span>
−
                          <i class="ico-arrow"></i>
+
                    <i class="ico-arrow"></i>
−
                        </span>
+
                  </span>
−
                      </span>
+
                </span>
−
                    </span>
+
              </span>
−
                  </a>
+
            </a>
−
                </div>
+
          </div>
−
                <div class="swiper-slide">
+
          <div class="swiper-slide">
−
                  <a href="#" class="visual-link">
+
            <a href="#" class="visual-link">
−
                    <span class="visual-img">
+
              <span class="visual-img">
−
                      <img
+
                <img
−
                        src="/wiki/skins/ETBSkin/images/new/img_main_visual02.jpg"
+
                  src="/wiki/skins/ETBSkin/images/new/img_main_visual02.jpg"
−
                        alt="Image 2"
+
                  alt="Image 2"
−
                      />
+
                />
−
                    </span>
+
              </span>
−
                    <span class="visual-copy">시맨틱<br />데이터베이스</span>
+
              <span class="visual-copy">시맨틱<br />데이터베이스</span>
−
                    <span class="visual-cont">
+
              <span class="visual-cont">
−
                      <h2 class="visual-tit-group">
+
                <h2 class="visual-tit-group">
−
                        <span class="tit"> 객체 간의 <br />의미적 관계 <br />시맨틱 </span>
+
                  <span class="tit"> 객체 간의 <br />의미적 관계 <br />시맨틱 </span>
−
                        <span class="line-group type03">
+
                  <span class="line-group type03">
−
                          <span class="line line04"></span>
+
                    <span class="line line04"></span>
−
                          <span class="tit"> 데이터베이스 </span>
+
                    <span class="tit"> 데이터베이스 </span>
−
                        </span>
+
                  </span>
−
                        <span class="txt"
+
                  <span class="txt"
−
                          >정보의 맥락을 보다 깊이 있게 <br />파악할 수 있도록 설계된
+
                    >정보의 맥락을 보다 깊이 있게 <br />파악할 수 있도록 설계된
−
                          데이터베이스</span
+
                    데이터베이스</span
−
                        >
+
                  >
−
                      </h2>
+
                </h2>
−
                      <span class="visual-btn">
+
                <span class="visual-btn">
−
                        <span class="main-btn">
+
                  <span class="main-btn">
−
                          <span class="btn-txt">VIEW MORE</span>
+
                    <span class="btn-txt">VIEW MORE</span>
−
                          <i class="ico-arrow"></i>
+
                    <i class="ico-arrow"></i>
−
                        </span>
+
                  </span>
−
                      </span>
+
                </span>
−
                    </span>
+
              </span>
−
                  </a>
+
            </a>
−
                </div>
+
          </div>
−
                <div class="swiper-slide">
+
          <div class="swiper-slide">
−
                  <a href="#" class="visual-link">
+
            <a href="#" class="visual-link">
−
                    <span class="visual-img">
+
              <span class="visual-img">
−
                      <img
+
                <img
−
                        src="/wiki/skins/ETBSkin/images/new/img_main_visual03.jpg"
+
                  src="/wiki/skins/ETBSkin/images/new/img_main_visual03.jpg"
−
                        alt="Image 3"
+
                  alt="Image 3"
−
                      />
+
                />
−
                    </span>
+
              </span>
−
                    <span class="visual-copy">메타버스<br />디지털 교과서</span>
+
              <span class="visual-copy">메타버스<br />디지털 교과서</span>
−
                    <span class="visual-cont">
+
              <span class="visual-cont">
−
                      <h2 class="visual-tit-group">
+
                <h2 class="visual-tit-group">
−
                        <span class="tit"> 메타버스 <br />디지털 교과서 <br />오월의 </span>
+
                  <span class="tit"> 메타버스 <br />디지털 교과서 <br />오월의 </span>
−
                        <span class="line-group type03">
+
                  <span class="line-group type03">
−
                          <span class="line line04"></span>
+
                    <span class="line line04"></span>
−
                          <span class="tit"> 달리기 </span>
+
                    <span class="tit"> 달리기 </span>
−
                        </span>
+
                  </span>
−
                        <span class="txt">기억의 시간, 회중 시계를 통한 <br />과거로의 여행</span>
+
                  <span class="txt">기억의 시간, 회중 시계를 통한 <br />과거로의 여행</span>
−
                      </h2>
+
                </h2>
−
                      <dispanv class="visual-btn">
+
                <span class="visual-btn">
−
                        <span class="main-btn">
+
                  <span class="main-btn">
−
                          <span class="btn-txt">VIEW MORE</span>
+
                    <span class="btn-txt">VIEW MORE</span>
−
                          <i class="ico-arrow"></i>
+
                    <i class="ico-arrow"></i>
−
                        </span>
+
                  </span>
−
                      </dispanv>
+
                </span>
−
                    </span>
+
               </span>
−
                  </a>
+
             </a>
−
                </div>
 
−
               </div>
 
−
              <div class="swiper-fraction"></div>
 
−
             </div>
 
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         <!-- //메인 베너 영역 -->
+
         <div class="swiper-fraction"></div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <!-- //메인 베너 영역 -->
  
−
        <!-- 사적지 배너 영역 -->
+
  <!-- 사적지 배너 영역 -->
−
        <div class="gwangju-main-section gwangju-main-section02">
+
  <div class="gwangju-main-section gwangju-main-section02">
−
          <div class="main-inner section02-inner">
+
    <div class="main-inner section02-inner">
−
            <div class="section02-txt">
+
      <div class="section02-txt">
−
              <div class="main-header">
+
        <div class="main-header">
−
                <p class="main-subtit">MEMORIAL SITE</p>
+
          <p class="main-subtit">MEMORIAL SITE</p>
−
                <h2 class="main-tit">장소로 알아보는 <br />열흘 간의 항쟁 기록</h2>
+
          <h2 class="main-tit">장소로 알아보는 <br />열흘 간의 항쟁 기록</h2>
−
              </div>
+
        </div>
−
              <p class="txt-desc">
+
        <p class="txt-desc">
−
                그날의 기억이 머문 장소들을 따라가며, 시간 속에 남은 이야기를 천천히 만나보세요.<br />
+
          그날의 기억이 머문 장소들을 따라가며, 시간 속에 남은 이야기를 천천히 만나보세요.<br />
−
                번호를 따라가며 클릭하면, 장소마다 담긴 역사적 의미와 당시의 이야기를 자세히 살펴볼
+
          번호를 따라가며 클릭하면, 장소마다 담긴 역사적 의미와 당시의 이야기를 자세히 살펴볼
−
                수 있습니다. 광주의 골목골목에 스며든 기억과 그날의 진실과 마주해보세요.
+
          수 있습니다. 광주의 골목골목에 스며든 기억과 그날의 진실과 마주해보세요.
−
              </p>
+
        </p>
−
              <div class="txt-link">
+
        <div class="txt-link">
−
                <a href="#" class="main-btn">
+
          <a href="#" class="main-btn">
−
                  <span class="btn-txt">VIEW MORE</span>
+
            <span class="btn-txt">VIEW MORE</span>
−
                  <i class="ico-arrow"></i>
+
            <i class="ico-arrow"></i>
−
                </a>
+
          </a>
−
              </div>
+
        </div>
−
            </div>
+
      </div>
−
            <div class="section02-img">
+
      <div class="section02-img">
−
              <img
+
        <img
−
                src="/wiki/skins/ETBSkin/images/new/img_main_banner02.jpg"
+
          src="/wiki/skins/ETBSkin/images/new/img_main_banner02.jpg"
−
                alt=""
+
          alt=""
−
                class="pc-show"
+
          class="pc-show"
−
              />
+
        />
−
              <img
+
        <img
−
                src="/wiki/skins/ETBSkin/images/new/img_main_banner03.jpg"
+
          src="/wiki/skins/ETBSkin/images/new/img_main_banner03.jpg"
−
                alt=""
+
          alt=""
−
                class="mb-show"
+
          class="mb-show"
−
              />
+
        />
−
              <div class="place-group">
+
        <div class="place-group">
−
                <img src="/wiki/skins/ETBSkin/images/new/img_main_place01.png" alt="" />
+
          <img
−
                <img src="/wiki/skins/ETBSkin/images/new/img_main_place02.png" alt="" />
+
            class="img1"
−
                <img src="/wiki/skins/ETBSkin/images/new/img_main_place03.png" alt="" />
+
            src="/wiki/skins/ETBSkin/images/new/img_main_place01.png"
−
              </div>
+
            alt=""
−
            </div>
+
          />
−
           </div>
+
          <img
 +
            class="img2"
 +
            src="/wiki/skins/ETBSkin/images/new/img_main_place03.png"
 +
            alt=""
 +
          />
 +
          <img
 +
            class="img3"
 +
            src="/wiki/skins/ETBSkin/images/new/img_main_place02.png"
 +
            alt=""
 +
           />
 
         </div>
 
         </div>
−
        <!-- //사적지 배너 영역 -->
+
      </div>
 +
    </div>
 +
  </div>
 +
  <!-- //사적지 배너 영역 -->
  
−
        <!-- 카테고리별 인문스토리 영역 -->
+
  <!-- 카테고리별 인문스토리 영역 -->
−
        <div class="gwangju-main-section gwangju-main-section03">
+
  <div class="gwangju-main-section gwangju-main-section03">
−
          <div class="section03-inner">
+
    <div class="section03-inner">
−
            <div class="main-inner">
+
      <div class="main-inner">
−
              <div class="main-header">
+
        <div class="main-header">
−
                <p class="main-subtit lato">STORY DATA</p>
+
          <p class="main-subtit lato">STORY DATA</p>
−
                <h2 class="main-tit">카테고리별로 만나는<br />인문 스토리</h2>
+
          <h2 class="main-tit">카테고리별로 만나는<br />인문 스토리</h2>
−
              </div>
+
        </div>
−
              <div class="category-filters">
+
        <div class="category-filters">
−
                <div class="filter-btn-group">
+
          <div class="filter-btn-group">
−
                  <button type="button" class="filter-btn active">
+
            <button type="button" class="filter-btn active" data-category="person">
−
                    <span class="icon icon-person"></span>
+
              <span class="icon icon-person"></span>
−
                    <span class="filter-txt">인물/단체</span>
+
              <span class="filter-txt">인물/단체</span>
−
                  </button>
+
            </button>
−
                  <button type="button" class="filter-btn">
+
            <button type="button" class="filter-btn" data-category="term">
−
                    <span class="icon icon-term"></span>
+
              <span class="icon icon-term"></span>
−
                    <span class="filter-txt">개념/용어</span>
+
              <span class="filter-txt">개념/용어</span>
−
                  </button>
+
            </button>
−
                  <button type="button" class="filter-btn">
+
            <button type="button" class="filter-btn" data-category="event">
−
                    <span class="icon icon-event"></span>
+
              <span class="icon icon-event"></span>
−
                    <span class="filter-txt">사건</span>
+
              <span class="filter-txt">사건</span>
−
                  </button>
+
            </button>
−
                  <button type="button" class="filter-btn">
+
            <button type="button" class="filter-btn" data-category="data">
−
                    <span class="icon icon-data"></span>
+
              <span class="icon icon-data"></span>
−
                    <span class="filter-txt">자료</span>
+
              <span class="filter-txt">자료</span>
−
                  </button>
+
            </button>
−
                  <button type="button" class="filter-btn">
+
            <button type="button" class="filter-btn" data-category="object">
−
                    <span class="icon icon-object"></span>
+
              <span class="icon icon-object"></span>
−
                    <span class="filter-txt">사물</span>
+
              <span class="filter-txt">사물</span>
−
                  </button>
+
            </button>
−
                  <button type="button" class="filter-btn">
+
            <button type="button" class="filter-btn" data-category="place">
−
                    <span class="icon icon-place"></span>
+
              <span class="icon icon-place"></span>
−
                    <span class="filter-txt">장소</span>
+
              <span class="filter-txt">장소</span>
−
                  </button>
+
            </button>
−
                  <button type="button" class="filter-btn">
+
            <button type="button" class="filter-btn" data-category="record">
−
                    <span class="icon icon-record"></span>
+
              <span class="icon icon-record"></span>
−
                    <span class="filter-txt">기록물</span>
+
              <span class="filter-txt">기록물</span>
−
                  </button>
+
            </button>
−
                </div>
 
−
              </div>
 
−
              <div class="story-swiper">
 
−
                <div class="swiper">
 
−
                  <div class="swiper-wrapper">
 
−
                    <div class="swiper-slide">
 
−
                      <a href="#" class="story-card">
 
−
                        <h3 class="card-tit">5·18광주민주화운동</h3>
 
−
                        <span class="card-tags">
 
−
                          <span class="tag">Event</span>
 
−
                        </span>
 
−
                        <span class="card-description"
 
−
                          >5·18민주화운동은 1980년 5월 18일부터 27일까지 무장저항이라는 대한민국
 
−
                          역사상 최고 수준의 저항을 행사한 사건으로 공식명칭은 5·18민주화운동이다.
 
−
                          아시아지역 민주화운동에 끼친 영향이 인정되어 2011년 5·18민주화운동기록물이
 
−
                          유네스코 인권분야 세계기록유산으로 등재됐다.</span
 
−
                        >
 
−
                        <span class="card-image">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
 
−
                            alt="광주비엔날레"
 
−
                          />
 
−
                        </span>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide">
 
−
                      <a href="#" class="story-card">
 
−
                        <h3 class="card-tit">광주 서창 억새축제</h3>
 
−
                        <span class="card-tags">
 
−
                          <span class="tag">Event</span>
 
−
                        </span>
 
−
                        <span class="card-description"
 
−
                          >광주비엔날레는 광주광역시에서 2년마다 열리는 국제 현대 미술
 
−
                          전시회입니다.</span
 
−
                        >
 
−
                        <span class="card-image">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
 
−
                            alt="광주비엔날레"
 
−
                          />
 
−
                        </span>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide">
 
−
                      <a href="#" class="story-card">
 
−
                        <h3 class="card-tit">광주학생독립운동(윤문)</h3>
 
−
                        <span class="card-tags">
 
−
                          <span class="tag">Event</span>
 
−
                        </span>
 
−
                        <span class="card-description"
 
−
                          >1929년 11월 3일 광주에서 시작되어 전국으로 확산, 1930년 3월까지 계속된
 
−
                          일제하 최대 학생항일운동이었다. 1919년 ‘3.1운동’, 1926년 ‘6.10만세운동’과
 
−
                          더불어 일제강점기 3대 독립운동으로 불리며, 일제의 식민지 우민화교육,
 
−
                          민족차별 등에 항거한 대표적 학생운동이다.</span
 
−
                        >
 
−
                        <span class="card-image">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
 
−
                            alt="광주비엔날레"
 
−
                          />
 
−
                        </span>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide">
 
−
                      <a href="#" class="story-card">
 
−
                        <h3 class="card-tit">광주인화학교 성폭력 사건</h3>
 
−
                        <span class="card-tags">
 
−
                          <span class="tag">Event</span>
 
−
                        </span>
 
−
                        <span class="card-description"
 
−
                          >광주인화학교 성폭력 사건(2005)은 광주광역시 광산구 삼거동에 있던
 
−
                          청각장애인 특수학교인 인화학교에서 교장과 교직원에 의해 지속적으로 장애인
 
−
                          아동 성폭력이 발생해 사회적으로 큰 파장을 일으킨 사건이다.</span
 
−
                        >
 
−
                        <div class="card-image">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
 
−
                            alt="광주비엔날레"
 
−
                          />
 
−
                        </div>
 
−
                      </a>
 
−
                    </div>
 
−
                  </div>
 
−
                  <div class="swiper-pagination"></div>
 
−
                </div>
 
−
              </div>
 
−
            </div>
 
−
            <div class="story-mask">
 
−
              <div class="mask-txt">PLATFORM</div>
 
−
            </div>
 
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
        <!-- //카테고리별 인문스토리 영역 -->
+
         <div class="story-swiper">
−
 
+
           <div class="swiper">
−
        <!-- 메타버스 컨텐츠 영역 -->
+
             <div class="swiper-wrapper">
−
         <div class="gwangju-main-section gwangju-main-section04">
+
               <div class="swiper-slide">
−
           <div class="section04-inner">
+
                 <a href="#" class="story-card">
−
             <div class="panel-group">
+
                   <h3 class="card-tit">5·18광주민주화운동</h3>
−
               <div class="left-panel">
+
                   <span class="card-tags">
−
                 <div class="main-header">
+
                    <span class="tag">Event</span>
−
                   <p class="main-subtit">METAVERSE</p>
+
                  </span>
−
                   <h2 class="main-tit">기억을 잇는 가상 공간</h2>
+
                   <span class="card-description"
−
                </div>
+
                     >5·18민주화운동은 1980년 5월 18일부터 27일까지 무장저항이라는 대한민국
−
                <div class="story-links">
+
                    역사상 최고 수준의 저항을 행사한 사건으로 공식명칭은 5·18민주화운동이다.
−
                   <a href="#" class="story-link-item active" data-target="story-image-1"
+
                    아시아지역 민주화운동에 끼친 영향이 인정되어 2011년 5·18민주화운동기록물이
−
                     >5월의 달리기 - 디지털 교과서</a
+
                    유네스코 인권분야 세계기록유산으로 등재됐다.</span
 
                   >
 
                   >
−
                   <a href="#" class="story-link-item" data-target="story-image-2"
+
                   <span class="card-image">
−
                     >양림동 선교사 마을, 새로운 문화와의 만남</a
+
                    <img
 +
                      src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
 +
                      alt="광주비엔날레"
 +
                    />
 +
                  </span>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide">
 +
                <a href="#" class="story-card">
 +
                  <h3 class="card-tit">광주 서창 억새축제</h3>
 +
                  <span class="card-tags">
 +
                    <span class="tag">Event</span>
 +
                  </span>
 +
                  <span class="card-description"
 +
                     >광주비엔날레는 광주광역시에서 2년마다 열리는 국제 현대 미술
 +
                    전시회입니다.</span
 
                   >
 
                   >
−
                   <a href="#" class="story-link-item" data-target="story-image-3"
+
                   <span class="card-image">
−
                     >기억, 회복 그리고 광주비엔날레</a
+
                    <img
 +
                      src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
 +
                      alt="광주비엔날레"
 +
                    />
 +
                  </span>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide">
 +
                <a href="#" class="story-card">
 +
                  <h3 class="card-tit">광주학생독립운동(윤문)</h3>
 +
                  <span class="card-tags">
 +
                    <span class="tag">Event</span>
 +
                  </span>
 +
                  <span class="card-description"
 +
                     >1929년 11월 3일 광주에서 시작되어 전국으로 확산, 1930년 3월까지 계속된
 +
                    일제하 최대 학생항일운동이었다. 1919년 ‘3.1운동’, 1926년 ‘6.10만세운동’과
 +
                    더불어 일제강점기 3대 독립운동으로 불리며, 일제의 식민지 우민화교육,
 +
                    민족차별 등에 항거한 대표적 학생운동이다.</span
 
                   >
 
                   >
−
                   <a href="#" class="story-link-item" data-target="story-image-4"
+
                   <span class="card-image">
−
                     >광주의 고려인 마을</a
+
                    <img
−
                  >
+
                      src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
−
                  <a href="#" class="story-link-item" data-target="story-image-5"
+
                      alt="광주비엔날레"
−
                     >관광을 품은 무등산</a
+
                     />
 +
                  </span>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide">
 +
                <a href="#" class="story-card">
 +
                  <h3 class="card-tit">광주인화학교 성폭력 사건</h3>
 +
                  <span class="card-tags">
 +
                    <span class="tag">Event</span>
 +
                  </span>
 +
                  <span class="card-description"
 +
                     >광주인화학교 성폭력 사건(2005)은 광주광역시 광산구 삼거동에 있던
 +
                    청각장애인 특수학교인 인화학교에서 교장과 교직원에 의해 지속적으로 장애인
 +
                    아동 성폭력이 발생해 사회적으로 큰 파장을 일으킨 사건이다.</span
 
                   >
 
                   >
−
                   <a href="#" class="story-link-item" data-target="story-image-6">극락강 역</a>
+
                   <div class="card-image">
−
                  <a href="#" class="story-link-item" data-target="story-image-7">구 MBC</a>
+
                     <img
−
                  <a href="#" class="story-link-item" data-target="story-image-8"
+
                       src="/wiki/skins/ETBSkin/images/new/img_main_story01.png"
−
                    >충장로, 광주의 삶을 담다</a
+
                       alt="광주비엔날레"
−
                  >
+
                     />
−
                  <a href="#" class="story-link-item" data-target="story-image-9"
 
−
                    >영산강과 황룡강이 품은 광주의 유원지</a
 
−
                  >
 
−
                  <a href="#" class="story-link-item" data-target="story-image-10">광주로컬음악</a>
 
−
                </div>
 
−
              </div>
 
−
              <div class="right-panel">
 
−
                <div class="image-scroll-container swiper">
 
−
                  <div class="swiper-wrapper">
 
−
                     <div class="swiper-slide active" id="story-image-1">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_01.png"
 
−
                            alt="가상 공간 에셋 1"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">5월의 달리기 - 디지털 교과서</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                       </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-2">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_02.png"
 
−
                            alt="가상 공간 에셋 2"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">양림동 선교사 마을, 새로운 문화와의 만남</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-3">
 
−
                       <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
 
−
                            alt="가상 공간 에셋 3"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">기억, 회복 그리고 광주비엔날레</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-4">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_01.png"
 
−
                            alt="가상 공간 에셋 1"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">광주의 고려인 마을</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                     </div>
 
−
                    <div class="swiper-slide" id="story-image-5">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_02.png"
 
−
                            alt="가상 공간 에셋 2"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">관광을 품은 무등산</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-6">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
 
−
                            alt="가상 공간 에셋 3"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">극랑강 역</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-7">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_01.png"
 
−
                            alt="가상 공간 에셋 1"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">구 MBC</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-8">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_02.png"
 
−
                            alt="가상 공간 에셋 2"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">충장로, 광주의 삶을 담다</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-9">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
 
−
                            alt="가상 공간 에셋 3"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">영산강과 황룡강이 품은 광주의 유원지</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
−
                    <div class="swiper-slide" id="story-image-10">
 
−
                      <a href="#" class="item-link">
 
−
                        <span class="item-img">
 
−
                          <img
 
−
                            src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
 
−
                            alt="가상 공간 에셋 3"
 
−
                          />
 
−
                        </span>
 
−
                        <span class="item-txt">광주로컬음악</span>
 
−
                        <i class="ico-arrow"></i>
 
−
                      </a>
 
−
                    </div>
 
 
                   </div>
 
                   </div>
−
                  <div class="swiper-ui-wrap">
+
                 </a>
−
                    <div class="swiper-progressbar"><div class="progress-fill"></div></div>
 
−
                    <div class="swiper-fraction"></div>
 
−
                  </div>
 
−
                 </div>
 
 
               </div>
 
               </div>
 
             </div>
 
             </div>
−
             <div class="section04-link">
+
             <div class="swiper-pagination"></div>
−
              <a href="#" class="main-btn">
 
−
                <span class="btn-txt">VIEW MORE</span>
 
−
                <i class="ico-arrow"></i>
 
−
              </a>
 
−
            </div>
 
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         <!-- //메타버스 컨텐츠 영역 -->
+
      </div>
 +
      <div class="story-mask">
 +
         <div class="mask-txt">PLATFORM</div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <!-- //카테고리별 인문스토리 영역 -->
  
−
        <!-- 3D 어셋 영역 -->
+
  <!-- 메타버스 컨텐츠 영역 -->
−
        <div class="gwangju-main-section gwangju-main-section05">
+
  <div class="gwangju-main-section gwangju-main-section04">
−
          <div class="section05-inner">
+
    <div class="section04-inner">
−
            <div class="main-header">
+
      <div class="panel-group">
−
              <p class="main-subtit">3D ASSET</p>
+
        <div class="left-panel">
−
              <h2 class="main-tit">3D로 보는<br />광주 인문 아카이브</h2>
+
          <div class="main-header">
−
            </div>
+
            <p class="main-subtit">METAVERSE</p>
−
            <div class="asset-swiper">
+
            <h2 class="main-tit">기억을 잇는 가상 공간</h2>
−
              <div id="my-keen-slider" class="keen-slider">
+
          </div>
−
                <div class="keen-slider__slide">
+
          <div class="story-links">
−
                  <a href="#" class="asset-link">
+
            <a href="#" class="story-link-item active" data-index="0"
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset01.jpg" alt="" />
+
              >5월의 달리기 - 디지털 교과서</a
−
                  </a>
+
            >
−
                </div>
+
            <a href="#" class="story-link-item" data-index="1"
−
                <div class="keen-slider__slide">
+
              >양림동 선교사 마을, 새로운 문화와의 만남</a
−
                  <a href="#" class="asset-link">
+
            >
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset02.jpg" alt="" />
+
            <a href="#" class="story-link-item" data-index="2"
−
                  </a>
+
              >기억, 회복 그리고 광주비엔날레</a
−
                </div>
+
            >
−
                <div class="keen-slider__slide">
+
            <a href="#" class="story-link-item" data-index="3">광주의 고려인 마을</a>
−
                  <a href="#" class="asset-link">
+
            <a href="#" class="story-link-item" data-index="4">관광을 품은 무등산</a>
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset03.jpg" alt="" />
+
            <a href="#" class="story-link-item" data-index="5">극락강 역</a>
−
                   </a>
+
            <a href="#" class="story-link-item" data-index="6">구 MBC</a>
−
                </div>
+
            <a href="#" class="story-link-item" data-index="7">충장로, 광주의 삶을 담다</a>
−
                <div class="keen-slider__slide">
+
            <a href="#" class="story-link-item" data-index="8"
−
                  <a href="#" class="asset-link">
+
              >영산강과 황룡강이 품은 광주의 유원지</a
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset04.jpg" alt="" />
+
            >
−
                   </a>
+
            <a href="#" class="story-link-item" data-index="9">광주로컬음악</a>
−
                </div>
+
          </div>
−
                <div class="keen-slider__slide">
+
        </div>
−
                  <a href="#" class="asset-link">
+
        <div class="right-panel">
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset05.jpg" alt="" />
+
          <div class="image-scroll-container swiper">
−
                   </a>
+
            <div class="swiper-wrapper">
−
                </div>
+
              <div class="swiper-slide" id="story-image-1">
−
                <div class="keen-slider__slide">
+
                <a href="#" class="item-link">
−
                  <a href="#" class="asset-link">
+
                  <span class="item-img">
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset06.jpg" alt="" />
+
                     <img
−
                   </a>
+
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_01.png"
−
                </div>
+
                      alt="가상 공간 에셋 1"
−
                <div class="keen-slider__slide">
+
                    />
−
                  <a href="#" class="asset-link">
+
                  </span>
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset07.jpg" alt="" />
+
                  <span class="item-txt">5월의 달리기 - 디지털 교과서</span>
−
                   </a>
+
                   <i class="ico-arrow"></i>
−
                </div>
+
                </a>
−
                <div class="keen-slider__slide">
+
              </div>
−
                  <a href="#" class="asset-link">
+
              <div class="swiper-slide" id="story-image-2">
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset08.jpg" alt="" />
+
                <a href="#" class="item-link">
−
                   </a>
+
                  <span class="item-img">
−
                </div>
+
                     <img
−
                <div class="keen-slider__slide">
+
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_02.png"
−
                  <a href="#" class="asset-link">
+
                      alt="가상 공간 에셋 2"
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset09.jpg" alt="" />
+
                    />
−
                   </a>
+
                   </span>
−
                </div>
+
                  <span class="item-txt">양림동 선교사 마을, 새로운 문화와의 만남</span>
−
                <div class="keen-slider__slide">
+
                  <i class="ico-arrow"></i>
−
                  <a href="#" class="asset-link">
+
                </a>
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset10.jpg" alt="" />
+
              </div>
−
                   </a>
+
              <div class="swiper-slide" id="story-image-3">
−
                </div>
+
                <a href="#" class="item-link">
−
                <div class="keen-slider__slide">
+
                  <span class="item-img">
−
                  <a href="#" class="asset-link">
+
                     <img
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset11.jpg" alt="" />
+
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
−
                   </a>
+
                      alt="가상 공간 에셋 3"
−
                 </div>
+
                    />
 +
                  </span>
 +
                  <span class="item-txt">기억, 회복 그리고 광주비엔날레</span>
 +
                   <i class="ico-arrow"></i>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide" id="story-image-4">
 +
                <a href="#" class="item-link">
 +
                  <span class="item-img">
 +
                     <img
 +
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_01.png"
 +
                      alt="가상 공간 에셋 1"
 +
                    />
 +
                  </span>
 +
                  <span class="item-txt">광주의 고려인 마을</span>
 +
                   <i class="ico-arrow"></i>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide" id="story-image-5">
 +
                <a href="#" class="item-link">
 +
                  <span class="item-img">
 +
                     <img
 +
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_02.png"
 +
                      alt="가상 공간 에셋 2"
 +
                    />
 +
                  </span>
 +
                  <span class="item-txt">관광을 품은 무등산</span>
 +
                   <i class="ico-arrow"></i>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide" id="story-image-6">
 +
                <a href="#" class="item-link">
 +
                  <span class="item-img">
 +
                     <img
 +
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
 +
                      alt="가상 공간 에셋 3"
 +
                    />
 +
                   </span>
 +
                  <span class="item-txt">극랑강 역</span>
 +
                  <i class="ico-arrow"></i>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide" id="story-image-7">
 +
                <a href="#" class="item-link">
 +
                  <span class="item-img">
 +
                     <img
 +
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_01.png"
 +
                      alt="가상 공간 에셋 1"
 +
                    />
 +
                  </span>
 +
                  <span class="item-txt">구 MBC</span>
 +
                   <i class="ico-arrow"></i>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide" id="story-image-8">
 +
                <a href="#" class="item-link">
 +
                  <span class="item-img">
 +
                     <img
 +
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_02.png"
 +
                      alt="가상 공간 에셋 2"
 +
                    />
 +
                  </span>
 +
                  <span class="item-txt">충장로, 광주의 삶을 담다</span>
 +
                   <i class="ico-arrow"></i>
 +
                </a>
 +
              </div>
 +
              <div class="swiper-slide" id="story-image-9">
 +
                <a href="#" class="item-link">
 +
                  <span class="item-img">
 +
                     <img
 +
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
 +
                      alt="가상 공간 에셋 3"
 +
                    />
 +
                   </span>
 +
                  <span class="item-txt">영산강과 황룡강이 품은 광주의 유원지</span>
 +
                  <i class="ico-arrow"></i>
 +
                 </a>
 
               </div>
 
               </div>
−
               <div id="my-keen-slider2" class="keen-slider">
+
               <div class="swiper-slide" id="story-image-10">
−
                <div class="keen-slider__slide">
+
                 <a href="#" class="item-link">
−
                  <a href="#" class="asset-link">
+
                   <span class="item-img">
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset01.jpg" alt="" />
+
                     <img
−
                  </a>
+
                      src="/wiki/skins/ETBSkin/images/new/main_virtual_asset_03.png"
−
                 </div>
+
                      alt="가상 공간 에셋 3"
−
                <div class="keen-slider__slide">
+
                     />
−
                  <a href="#" class="asset-link">
+
                   </span>
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset02.jpg" alt="" />
+
                   <span class="item-txt">광주로컬음악</span>
−
                  </a>
+
                   <i class="ico-arrow"></i>
−
                </div>
+
                 </a>
−
                <div class="keen-slider__slide">
 
−
                   <a href="#" class="asset-link">
 
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset03.jpg" alt="" />
 
−
                  </a>
 
−
                </div>
 
−
                <div class="keen-slider__slide">
 
−
                  <a href="#" class="asset-link">
 
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset04.jpg" alt="" />
 
−
                  </a>
 
−
                </div>
 
−
                <div class="keen-slider__slide">
 
−
                  <a href="#" class="asset-link">
 
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset05.jpg" alt="" />
 
−
                  </a>
 
−
                </div>
 
−
                <div class="keen-slider__slide">
 
−
                  <a href="#" class="asset-link">
 
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset06.jpg" alt="" />
 
−
                  </a>
 
−
                </div>
 
−
                <div class="keen-slider__slide">
 
−
                  <a href="#" class="asset-link">
 
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset07.jpg" alt="" />
 
−
                  </a>
 
−
                </div>
 
−
                <div class="keen-slider__slide">
 
−
                  <a href="#" class="asset-link">
 
−
                     <img src="/wiki/skins/ETBSkin/images/new/img_main_asset08.jpg" alt="" />
 
−
                   </a>
 
−
                </div>
 
−
                <div class="keen-slider__slide">
 
−
                   <a href="#" class="asset-link">
 
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset09.jpg" alt="" />
 
−
                  </a>
 
−
                </div>
 
−
                <div class="keen-slider__slide">
 
−
                   <a href="#" class="asset-link">
 
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset10.jpg" alt="" />
 
−
                  </a>
 
−
                 </div>
 
−
                <div class="keen-slider__slide">
 
−
                  <a href="#" class="asset-link">
 
−
                    <img src="/wiki/skins/ETBSkin/images/new/img_main_asset11.jpg" alt="" />
 
−
                  </a>
 
−
                </div>
 
 
               </div>
 
               </div>
 
             </div>
 
             </div>
−
             <div class="section05-link">
+
             <div class="swiper-ui-wrap">
−
               <a href="#" class="main-btn">
+
               <div class="swiper-progressbar"><div class="progress-fill"></div></div>
−
                <span class="btn-txt">VIEW MORE</span>
+
              <div class="swiper-fraction"></div>
−
                <i class="ico-arrow"></i>
 
−
              </a>
 
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         <!-- //3D 어셋 영역 -->
+
      </div>
 +
      <div class="section04-link">
 +
         <a href="#" class="main-btn">
 +
          <span class="btn-txt">VIEW MORE</span>
 +
          <i class="ico-arrow"></i>
 +
        </a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <!-- //메타버스 컨텐츠 영역 -->
  
−
         <!-- AR Heritage 영역 -->
+
  <!-- 3D 어셋 영역 -->
−
        <div class="gwangju-main-section gwangju-main-section06">
+
  <div class="gwangju-main-section gwangju-main-section05">
−
          <div class="main-inner section06-inner">
+
    <div class="section05-inner">
−
            <div class="section06-content">
+
      <div class="main-header">
−
              <div class="main-header">
+
        <p class="main-subtit">3D ASSET</p>
−
                <h2 class="main-tit">AR Heritage</h2>
+
        <h2 class="main-tit">3D로 보는<br />광주 인문 아카이브</h2>
−
              </div>
+
      </div>
−
              <div class="section06-txt">
+
      <div class="asset-swiper">
−
                <h3 class="txt-sub">광주의 근현대 역사와 문화를 엿볼 수 있는 유산들을 증강현실</h3>
+
        <div id="my-keen-slider" class="keen-slider"></div>
−
                <p class="txt-desc">
+
        <div id="my-keen-slider2" class="keen-slider"></div>
−
                  광주의 역사적 명소와 문화예술 거점을 AR 콘텐츠로 체험할 수 있는 투어입니다.<br />
+
      </div>
−
                  실시간 위치 정보와 장소의 맥락을 제공하여 시민들이 지역 인문자원을 향유하도록
+
      <div class="section05-link">
−
                  기획되었습니다.<br />
+
        <a href="#" class="main-btn">
−
                  AR을 통해 광주 시민들이 공유하는 기억과 감성을 생생하게 느낄 수 있습니다.
+
          <span class="btn-txt">VIEW MORE</span>
−
                </p>
+
          <i class="ico-arrow"></i>
−
                <div class="section06-link">
+
         </a>
−
                  <a href="#" class="main-btn">
+
      </div>
−
                    <span class="btn-txt">VIEW MORE</span>
+
    </div>
−
                    <i class="ico-arrow"></i>
+
  </div>
−
                  </a>
+
  <!-- //3D 어셋 영역 -->
−
                </div>
+
 
−
              </div>
+
  <!-- AR Heritage 영역 -->
−
            </div>
+
  <div class="gwangju-main-section gwangju-main-section06">
 +
    <div class="main-inner section06-inner">
 +
      <div class="section06-content">
 +
        <div class="main-header">
 +
          <h2 class="main-tit">AR Heritage</h2>
 +
        </div>
 +
        <div class="section06-txt">
 +
          <h3 class="txt-sub">광주의 근현대 역사와 문화를 엿볼 수 있는 유산들을 증강현실</h3>
 +
          <p class="txt-desc">
 +
            광주의 역사적 명소와 문화예술 거점을 AR 콘텐츠로 체험할 수 있는 투어입니다.<br />
 +
            실시간 위치 정보와 장소의 맥락을 제공하여 시민들이 지역 인문자원을 향유하도록
 +
            기획되었습니다.<br />
 +
            AR을 통해 광주 시민들이 공유하는 기억과 감성을 생생하게 느낄 수 있습니다.
 +
          </p>
 +
          <div class="section06-link">
 +
            <a href="#" class="main-btn">
 +
              <span class="btn-txt">VIEW MORE</span>
 +
              <i class="ico-arrow"></i>
 +
            </a>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
        <!-- //AR Heritage 영역 -->
 
 
       </div>
 
       </div>
−
      <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
+
    </div>
−
      <link
+
  </div>
−
        rel="stylesheet"
+
  <!-- //AR Heritage 영역 -->
−
        href="https://cdn.jsdelivr.net/npm/keen-slider@6.8.5/keen-slider.min.css"
+
</div>
−
      />
+
<link rel="stylesheet" href="/wiki/skins/ETBSkin/resources/styles/swiper-bundle.min.css" />
−
      <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
<link rel="stylesheet" href="/wiki/skins/ETBSkin/resources/styles/keen-slider.min.css" />
−
      <script src="https://cdn.jsdelivr.net/npm/keen-slider@6.8.5/keen-slider.min.js"></script>
+
<script src="/wiki/skins/ETBSkin/resources/scripts/swiper-bundle.min.js"></script>
−
      <script>
+
<script src="/wiki/skins/ETBSkin/resources/scripts/storyData.js"></script>
−
        let swiperInstance = null;
+
<script>
−
 
+
  threeDAssetData.forEach((item, index) => {
−
        const initSwiper = () => {
+
    const slideDom = document.createElement('div');
−
          // 모바일에서만 Swiper 초기화
+
    slideDom.classList.add('keen-slider__slide');
−
          if (window.innerWidth < 768) {
+
    slideDom.innerHTML = `
−
            swiperInstance = new Swiper('.main-visual-swiper', {
+
<a href="${item.link ? item.link : '#'}" class="asset-link">
−
              direction: 'horizontal',
+
  <img src="/wiki/skins/ETBSkin/images/new/${item.src}" alt="" />
−
              slidesPerView: 1,
+
</a>
−
              spaceBetween: 0,
+
`;
−
              pagination: {
+
    if (threeDAssetData.length >= index) {
−
                el: '.swiper-fraction',
+
      document.getElementById('my-keen-slider').appendChild(slideDom);
−
                type: 'bullets',
+
    }
−
                clickable: true, // Bullet 클릭 가능
+
    if (threeDAssetData.length / 2 < index) {
−
              },
+
      document.getElementById('my-keen-slider2').appendChild(slideDom);
−
            });
+
    }
−
          }
+
  });
−
        };
+
  // 스크롤 시 헤더 스타일 변경
−
 
+
  window.addEventListener('scroll', function () {
−
        const destroySwiper = () => {
+
    const headerInner = document.querySelector('.header-inner');
−
          if (swiperInstance) {
+
    if (!headerInner) return;
−
            swiperInstance.destroy(true, true);
 
−
            swiperInstance = null;
 
−
          }
 
−
        };
 
−
 
 
−
        // 초기화
 
−
        initSwiper();
 
−
 
 
−
        // 윈도우 리사이즈 시 Swiper 재설정
 
−
        window.addEventListener('resize', () => {
 
−
          if (window.innerWidth < 768) {
 
−
            if (!swiperInstance) {
 
−
              initSwiper();
 
−
            }
 
−
          } else if (window.innerWidth >= 768) {
 
−
            if (swiperInstance) {
 
−
              destroySwiper();
 
−
            }
 
−
          }
 
−
        });
 
−
        document.addEventListener('DOMContentLoaded', function () {
 
−
          const storyLinks = document.querySelectorAll('.story-link-item');
 
−
          const imageContainer = document.querySelector('.image-scroll-container');
 
−
          const breakpoint = window.matchMedia('(max-width: 991px)');
 
−
          let swiperInstance;
 
−
 
 
−
          const initDesktop = () => {
 
−
            if (swiperInstance) {
 
−
              swiperInstance.destroy(true, true);
 
−
              swiperInstance = null;
 
−
            }
 
−
 
 
−
            storyLinks.forEach(link => {
 
−
              link.addEventListener('click', function (e) {
 
−
                e.preventDefault();
 
−
                storyLinks.forEach(l => l.classList.remove('active'));
 
−
                document
 
−
                  .querySelectorAll('.swiper-slide')
 
−
                  .forEach(i => i.classList.remove('active'));
 
−
 
 
−
                this.classList.add('active');
 
−
                const targetId = this.getAttribute('data-target');
 
−
                const targetImage = document.getElementById(targetId);
 
−
                if (targetImage) {
 
−
                  targetImage.classList.add('active');
 
−
 
 
−
                  const containerRect = imageContainer.getBoundingClientRect();
 
−
                  const imageRect = targetImage.getBoundingClientRect();
 
−
                  const scrollTop =
 
−
                    imageContainer.scrollTop +
 
−
                    (imageRect.top - containerRect.top) -
 
−
                    containerRect.height / 2 +
 
−
                    imageRect.height / 2;
 
−
 
 
−
                  imageContainer.scrollTo({
 
−
                    top: scrollTop + 0,
 
−
                    behavior: 'smooth',
 
−
                  });
 
−
                }
 
−
              });
 
−
            });
 
−
          };
 
−
 
 
−
          const initMobile = () => {
 
−
            swiperInstance = new Swiper('.image-scroll-container.swiper', {
 
−
              direction: 'horizontal',
 
−
              slidesPerView: 1,
 
−
              spaceBetween: 12,
 
−
              pagination: {
 
−
                el: '.swiper-fraction',
 
−
                type: 'fraction',
 
−
                formatFractionCurrent: number => number,
 
−
                formatFractionTotal: number => number,
 
−
              },
 
−
              on: {
 
−
                init: () => {
 
−
                  updateProgress();
 
−
                },
 
−
                slideChange: () => {
 
−
                  updateProgress();
 
−
                },
 
−
              },
 
−
            });
 
−
          };
 
−
 
 
−
          const updateProgress = () => {
 
−
            if (!swiperInstance) return;
 
−
            const current = swiperInstance.realIndex + 1;
 
−
            const total = swiperInstance.slides.length;
 
−
            const percent = (current / total) * 100;
 
−
            const progressBar = document.querySelector('.swiper-progressbar .progress-fill');
 
−
            if (progressBar) {
 
−
              progressBar.style.width = `${percent}%`;
 
−
            }
 
−
          };
 
−
 
 
−
          const handleResize = () => {
 
−
            if (breakpoint.matches) {
 
−
              initMobile();
 
−
            } else {
 
−
              initDesktop();
 
−
            }
 
−
          };
 
−
 
 
−
          breakpoint.addEventListener('change', handleResize);
 
−
          handleResize();
 
−
        });
 
−
        document.addEventListener('DOMContentLoaded', function () {
 
−
          // 공통 브레이크포인트 기준
 
−
          const breakpoint = window.matchMedia('(max-width: 991px)');
 
−
 
 
−
          // Story Swiper (모바일 전용 터치)
 
−
          let storySwiper;
 
−
 
 
−
          const initStorySwiper = () => {
 
−
            const isMobile = breakpoint.matches;
 
−
 
 
−
            if (storySwiper) storySwiper.destroy(true, true);
 
−
 
 
−
            storySwiper = new Swiper('.story-swiper .swiper', {
 
−
              slidesPerView: 1,
 
−
              spaceBetween: 24,
 
−
              grabCursor: isMobile,
 
−
              simulateTouch: isMobile,
 
−
              allowTouchMove: isMobile,
 
−
              pagination: {
 
−
                el: '.swiper-pagination',
 
−
                clickable: true,
 
−
              },
 
−
              navigation: {
 
−
                nextEl: '.swiper-button-next',
 
−
                prevEl: '.swiper-button-prev',
 
−
              },
 
−
              mousewheel: isMobile
 
−
                ? {
 
−
                    forceToAxis: true,
 
−
                    invert: false,
 
−
                  }
 
−
                : false,
 
−
              on: {
 
−
                progress: function (swiper, progress) {
 
−
                  const indicatorBar = swiper.el.querySelector('.indicator-bar');
 
−
                  if (indicatorBar) {
 
−
                    indicatorBar.style.width = progress * 100 + '%';
 
−
                  }
 
−
                },
 
−
              },
 
−
            });
 
−
          };
 
−
 
 
−
          breakpoint.addEventListener('change', initStorySwiper);
 
−
          initStorySwiper();
 
−
 
 
−
          // Asset Swiper type01
 
−
          const swiper01 = new Swiper('.asset-swiper .type01', {
 
−
            loop: true,
 
−
            slidesPerView: 'auto',
 
−
            spaceBetween: 8,
 
−
            autoplay: {
 
−
              delay: 0,
 
−
              disableOnInteraction: false,
 
−
            },
 
−
            speed: 5000,
 
−
            freeMode: true,
 
−
            breakpoints: {
 
−
              991: {
 
−
                spaceBetween: 28,
 
−
              },
 
−
            },
 
−
          });
 
−
 
 
−
          // Asset Swiper type02
 
−
          const swiper02 = new Swiper('.asset-swiper .type02', {
 
−
            loop: true,
 
−
            slidesPerView: 'auto',
 
−
            spaceBetween: 8,
 
−
            autoplay: {
 
−
              delay: 0,
 
−
              disableOnInteraction: false,
 
−
              reverseDirection: true,
 
−
            },
 
−
            speed: 5000,
 
−
            freeMode: true,
 
−
            breakpoints: {
 
−
              991: {
 
−
                spaceBetween: 28,
 
−
              },
 
−
            },
 
−
          });
 
−
        });
 
−
 
 
−
        document.addEventListener('DOMContentLoaded', function () {
 
−
          const progressBar = document.querySelector('.gwangju-main-section04 .progress-bar');
 
−
          const metaverseSlider = new Swiper('.gwangju-metaverse-slider', {
 
−
            loop: true,
 
−
            slidesPerView: 1.2,
 
−
            spaceBetween: 15,
 
−
            pagination: {
 
−
              el: '.swiper-pagination',
 
−
              type: 'fraction',
 
−
            },
 
−
            on: {
 
−
              slideChange: function () {
 
−
                const totalSlides = this.slides.length - this.loopedSlides * 2;
 
−
                const progress = (this.realIndex + 1) / totalSlides;
 
−
                if (progressBar) {
 
−
                  progressBar.style.width = progress * 100 + '%';
 
−
                }
 
−
              },
 
−
            },
 
−
            breakpoints: {
 
−
              769: {
 
−
                slidesPerView: 3,
 
−
                spaceBetween: 30,
 
−
              },
 
−
              1024: {
 
−
                slidesPerView: 4,
 
−
                spaceBetween: 30,
 
−
              },
 
−
            },
 
−
          });
 
−
        });
 
−
        var animation = {
 
−
          duration: (document.querySelectorAll('.keen-slider__slide').length / 2) * 1500,
 
−
          easing: t => t,
 
−
        };
 
−
 
 
−
        // 변수 초기화
 
−
        let slider = null;
 
−
        let slider2 = null;
 
−
        let autoplayActive = true;
 
−
        let autoplayTimeoutId = null;
 
−
        let isSyncingSlider1 = false;
 
−
        let isSyncingSlider2 = false;
 
−
        let isMouseOverContainer = false; // 컨테이너 마우스 상태 추적 변수
 
−
        // 슬라이더 2 먼저 초기화
 
−
        slider2 = new KeenSlider('#my-keen-slider2', {
 
−
          loop: true,
 
−
          renderMode: 'performance',
 
−
          mode: 'free',
 
−
          rtl: true,
 
−
          slides: {
 
−
            perView: 'auto',
 
−
            spacing: 8,
 
−
          },
 
−
          breakpoints: {
 
−
            '(min-width: 500px)': {
 
−
              slides: {
 
−
                perView: 'auto',
 
−
                spacing: 28,
 
−
              },
 
−
            },
 
−
          },
 
−
          created(s) {
 
−
            if (!isMouseOverContainer) {
 
−
              s.moveToIdx(5, true, animation);
 
−
            }
 
−
          },
 
−
          animationEnded(s) {
 
−
            // if (!isMouseOverContainer) {
 
−
            slider2.endTimer = setTimeout(() => {
 
−
              slider?.moveToIdx(slider.track.details.abs + 4, true, animation);
 
−
              s.moveToIdx(s.track.details.abs + 5, true, animation);
 
−
            }, 1000);
 
−
            // }
 
−
          },
 
−
          detailsChanged(s) {
 
−
            // 마우스가 컨테이너 위에 있을 때만 동기화 작동
 
−
            if (slider2?.endTimer) clearTimeout(slider2?.endTimer);
 
−
            if (!isSyncingSlider1) {
 
−
              if (slider) {
 
−
                if (slider.track) {
 
−
                  slider.animator.stop();
 
−
                  isSyncingSlider2 = true;
 
−
                  // 위치 동기화
 
−
                  const position = s.track.details.position;
 
−
                  slider.track.to(position);
 
−
                  setTimeout(() => {
 
−
                    isSyncingSlider2 = false;
 
−
                  }, 30);
 
−
                }
 
−
              }
 
−
            }
 
−
          },
 
−
        });
 
  
−
        // slider1 초기화
+
    if (window.scrollY <= 10) {
−
        slider = new KeenSlider('#my-keen-slider', {
+
      headerInner.classList.add('type-white');
−
          loop: true,
+
    } else {
−
          renderMode: 'performance',
+
      headerInner.classList.remove('type-white');
−
          mode: 'free',
+
    }
−
          breakpoints: {
+
  });
−
            '(min-width: 500px)': {
 
−
              slides: {
 
−
                perView: 'auto',
 
−
                spacing: 28,
 
−
              },
 
−
            },
 
−
          },
 
−
          slides: {
 
−
            perView: 'auto',
 
−
            spacing: 8,
 
−
          },
 
−
          created(s) {
 
−
            if (!isMouseOverContainer) {
 
−
              s.moveToIdx(5, true, animation);
 
−
            }
 
−
          },
 
−
          animationEnded(s) {
 
−
            // if (!isMouseOverContainer) {
 
−
            slider.endTimer = setTimeout(() => {
 
−
              slider2?.moveToIdx(slider2.track.details.abs + 4, true, animation);
 
−
              s.moveToIdx(s.track.details.abs + 5, true, animation);
 
−
            }, 1000);
 
−
            // }
 
−
          },
 
−
          detailsChanged(s) {
 
−
            if (slider?.endTimer) clearTimeout(slider?.endTimer);
 
−
            // 마우스가 컨테이너 위에 있을 때만 동기화 작동
 
−
            if (!isSyncingSlider2) {
 
−
              if (slider2) {
 
−
                if (slider2.track) {
 
−
                  slider2.animator.stop();
 
−
                  isSyncingSlider1 = true;
 
−
                  slider2.track.to(s.track.details.position);
 
−
                  setTimeout(() => {
 
−
                    isSyncingSlider1 = false;
 
−
                  }, 30);
 
−
                }
 
−
              }
 
−
            }
 
−
          },
 
−
        });
 
  
−
        // 컨테이너 하나에만 마우스 이벤트 적용
+
  // 페이지 로드 시 초기 상태 설정
−
        document.querySelector('.asset-swiper').addEventListener('pointerdown', () => {
+
  document.addEventListener('DOMContentLoaded', function () {
−
          // 타임아웃 삭제
+
    const headerInner = document.querySelector('.header-inner');
−
          if (autoplayTimeoutId) clearTimeout(autoplayTimeoutId);
+
    if (!headerInner) return;
  
−
          // 현재 진행 중인 애니메이션 중단
+
    if (window.scrollY <= 10) {
−
          if (slider) {
+
      headerInner.classList.add('type-white');
−
            if (slider.animator) {
+
    } else {
−
              slider.animator.stop();
+
      headerInner.classList.remove('type-white');
−
            }
+
    }
−
          }
+
  });
−
          if (slider2) {
+
</script>
−
            if (slider2.animator) {
+
<script src="/wiki/skins/ETBSkin/resources/scripts/keen-slider.min.js"></script>
−
              slider2.animator.stop();
+
<script src="/wiki/skins/ETBSkin/resources/scripts/gsap.min.js"></script>
−
            }
+
<script src="/wiki/skins/ETBSkin/resources/scripts/ScrollTrigger.min.js"></script>
−
          }
+
<script src="/wiki/skins/ETBSkin/resources/scripts/lottie.min.js"></script>
−
        });
+
<script src="/wiki/skins/ETBSkin/resources/scripts/storymain.js"></script>
−
      </script>
+
<!-- // 에디터 컨텐츠 등록 영역 -->
−
      <!-- // 에디터 컨텐츠 등록 영역 -->}}
+
<style>
 +
  #firstHeading {
 +
    display: none !important;
 +
  }
 +
</style>
 +
}}

2025년 7월 25일 (금) 18:27 기준 최신판

Image 1 광주스토리
플랫폼

빛이 스며든
이야기,
예술이 되는
역사 빛고을 광주에서 시작됩니다.

VIEW MORE
Image 2 시맨틱
데이터베이스

객체 간의
의미적 관계
시맨틱 데이터베이스 정보의 맥락을 보다 깊이 있게
파악할 수 있도록 설계된 데이터베이스

VIEW MORE
Image 3 메타버스
디지털 교과서

메타버스
디지털 교과서
오월의 달리기 기억의 시간, 회중 시계를 통한
과거로의 여행

VIEW MORE

MEMORIAL SITE

장소로 알아보는
열흘 간의 항쟁 기록

그날의 기억이 머문 장소들을 따라가며, 시간 속에 남은 이야기를 천천히 만나보세요.
번호를 따라가며 클릭하면, 장소마다 담긴 역사적 의미와 당시의 이야기를 자세히 살펴볼 수 있습니다. 광주의 골목골목에 스며든 기억과 그날의 진실과 마주해보세요.

VIEW MORE

STORY DATA

카테고리별로 만나는
인문 스토리

5·18광주민주화운동

Event 5·18민주화운동은 1980년 5월 18일부터 27일까지 무장저항이라는 대한민국 역사상 최고 수준의 저항을 행사한 사건으로 공식명칭은 5·18민주화운동이다. 아시아지역 민주화운동에 끼친 영향이 인정되어 2011년 5·18민주화운동기록물이 유네스코 인권분야 세계기록유산으로 등재됐다. 광주비엔날레

광주 서창 억새축제

Event 광주비엔날레는 광주광역시에서 2년마다 열리는 국제 현대 미술 전시회입니다. 광주비엔날레

광주학생독립운동(윤문)

Event 1929년 11월 3일 광주에서 시작되어 전국으로 확산, 1930년 3월까지 계속된 일제하 최대 학생항일운동이었다. 1919년 ‘3.1운동’, 1926년 ‘6.10만세운동’과 더불어 일제강점기 3대 독립운동으로 불리며, 일제의 식민지 우민화교육, 민족차별 등에 항거한 대표적 학생운동이다. 광주비엔날레

광주인화학교 성폭력 사건

Event 광주인화학교 성폭력 사건(2005)은 광주광역시 광산구 삼거동에 있던 청각장애인 특수학교인 인화학교에서 교장과 교직원에 의해 지속적으로 장애인 아동 성폭력이 발생해 사회적으로 큰 파장을 일으킨 사건이다.
광주비엔날레
PLATFORM

METAVERSE

기억을 잇는 가상 공간

5월의 달리기 - 디지털 교과서 양림동 선교사 마을, 새로운 문화와의 만남 기억, 회복 그리고 광주비엔날레 광주의 고려인 마을 관광을 품은 무등산 극락강 역 구 MBC 충장로, 광주의 삶을 담다 영산강과 황룡강이 품은 광주의 유원지 광주로컬음악
가상 공간 에셋 1 5월의 달리기 - 디지털 교과서
가상 공간 에셋 2 양림동 선교사 마을, 새로운 문화와의 만남
가상 공간 에셋 3 기억, 회복 그리고 광주비엔날레
가상 공간 에셋 1 광주의 고려인 마을
가상 공간 에셋 2 관광을 품은 무등산
가상 공간 에셋 3 극랑강 역
가상 공간 에셋 1 구 MBC
가상 공간 에셋 2 충장로, 광주의 삶을 담다
가상 공간 에셋 3 영산강과 황룡강이 품은 광주의 유원지
가상 공간 에셋 3 광주로컬음악
VIEW MORE

3D ASSET

3D로 보는
광주 인문 아카이브

VIEW MORE

AR Heritage

광주의 근현대 역사와 문화를 엿볼 수 있는 유산들을 증강현실

광주의 역사적 명소와 문화예술 거점을 AR 콘텐츠로 체험할 수 있는 투어입니다.
실시간 위치 정보와 장소의 맥락을 제공하여 시민들이 지역 인문자원을 향유하도록 기획되었습니다.
AR을 통해 광주 시민들이 공유하는 기억과 감성을 생생하게 느낄 수 있습니다.

VIEW MORE

원본 주소 "http://prd-gwangju.etribe.co.kr/wiki/index.php?title=광주_문화예술_인문스토리_플랫폼2&oldid=43839"