1 2<!DOCTYPE html> 3<html lang="ko"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content_old="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no" content="width=device-width, initial-scale=1.0, user-scalable=no, height=device-height, maximum-scale=1.0" /> 7 <title>기íí¸ì¹´ PLAY ON</title> 8 <meta name="title" content="기íí¸ì¹´ PLAY ON" /> 9 <meta name="keywords" content="기íí¸ì¹´, ìì¦15, íë ì´ì¨, ì ìë ì¤í¬ì¸ ë¨, íë기íí¸ì¹´, íëìëì°¨, 기ì, íëì°¨, íëìë차그룹" /> 10 <meta name="description" content="íëìë차그룹ì 기íí¸ì¹´ íë¡ì í¸ ìì¦ 15ë 미ëì¸ë를 ìí, ì ìë ì¤í¬ì¸ ì§ì 공모 ìº íì¸ì¼ë¡ ì°¾ìê°ëë¤." /> 11 <meta property="fb:app_id" content="471405819658974" /> 12 <meta property="og:image" content="https://www.gift-car.kr/resources/images/OG_1200_630.png" /> 13 <meta property="og:url" content="https://www.gift-car.kr/" /> 14 <meta property="og:type" content="website" /> 15 <meta property="og:locale" content="ko_KR" /> 16 <meta property="og:title" content="기íí¸ì¹´ PLAY ON"> 17 <meta property="og:description" content="íëìë차그룹ì 기íí¸ì¹´ íë¡ì í¸ ìì¦ 15ë 미ëì¸ë를 ìí, ì ìë ì¤í¬ì¸ ì§ì 공모 ìº íì¸ì¼ë¡ ì°¾ìê°ëë¤."> 18 <meta name="twitter:card" content="summary" /> 19 <meta name="twitter:title" content="기íí¸ì¹´ PLAY ON" /> 20 <meta name="twitter:url" content="https://www.gift-car.kr/" /> 21 <meta name="twitter:image" content="https://www.gift-car.kr/resources/images/OG_1200_630.png" /> 22 <meta name="twitter:description" content="íëìë차그룹ì 기íí¸ì¹´ íë¡ì í¸ ìì¦ 15ë 미ëì¸ë를 ìí, ì ìë ì¤í¬ì¸ ì§ì 공모 ìº íì¸ì¼ë¡ ì°¾ìê°ëë¤." /> 23 <meta name="naver-site-verification" content="e7202424386b00d748985fba87067f9d73dc2b88" /> 24 25 <link rel="shortcut icon" href="https://www.gift-car.kr/favicon.ico" type="image/x-icon" /> 26 <link rel="icon" href="https://www.gift-car.kr/favicon.ico" type="image/x-icon" /> 27 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 28 <link rel="icon" href="/favicon.png" type="image/png"> 29 <link rel="icon" sizes="32x32" href="/favicon-32.png" type="image/png"> 30 <link rel="icon" sizes="64x64" href="/favicon-64.png" type="image/png"> 31 <link rel="icon" sizes="96x96" href="/favicon-96.png" type="image/png"> 32 <link rel="icon" sizes="196x196" href="/favicon-196.png" type="image/png"> 33 <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png"> 34 <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 35 <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 36 <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 37 <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 38 <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 39 40 41 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet" /> 42 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dragtable.min.css" rel="stylesheet" /> 43 <link rel="stylesheet" href="../../../resources/css/main_ss15.css?dt=2026-10-08 오전 8:44:32" /> 44 <link rel="stylesheet" href="../../../resources/css/swiper-bundle.min.css" /> 45 <link rel="stylesheet" href="../../../resources/css/aos.css" /> 46 47
47<script src="../../../resources/js/jquery-1.12.4.min.js"></script>
47 48
48<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.6.0/jquery.marquee.min.js"></script>
48 49
49<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
49 50
50<script src="../../../resources/js/swiper-bundle.min.js"></script>
50 51
51<script src="../../../resources/js/aos.js"></script>
51 52
52<script src="../../../resources/js/lottie.min.js"></script>
52 53
53<script src="../../../resources/js/main_ss15.js?dt=2026-10-08 오전 8:44:32"></script>
53 54 55 <!-- Google Tag Manager --> 56
56<script>
vendor: 495 bytes, lines 56-64
56 57 (function (w, d, s, l, i) { 58 w[l] = w[l] || []; w[l].push({ 59 'gtm.start': 60 new Date().getTime(), event: 'gtm.js' 61 }); var f = d.getElementsByTagName(s)[0], 62 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 63 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); 64 })(window, document, 'script', 'dataLayer', '
64GTM-TX8SH2W
vendor: 3 bytes, line 64
64');
64</script>
64 65 <!-- End Google Tag Manager --> 66 <style> 67 .ie_title { 68 font-size: 1.2rem; 69 line-height: 2.2; 70 font-family: "NanumSquareRound", "NanumSquare", "Noto Sans KR", "ë§ì ê³ ë", "Malgun Gothic", "Apple SD Gothic Neo", "Dotum", "ëì", "Gulim", "굴림", "굴림체", Sans-Serif; 71 } 72 73 .ie_link { 74 display: block; 75 width: 300px; 76 padding: 10px 0; 77 margin: 3rem auto 0; 78 font-weight: 800; 79 letter-spacing: -1.3px; 80 text-align: center; 81 color: #fff; 82 background-color: #0f78c4; 83 text-decoration: none; 84 } 85</style>
86<script> 87 $(document).ready(function() { 88 var viewModel = { 89 templateIE: function (browser, version) { 90 var template = ''; 91 template += '<div style="text-align: center;padding-top:8rem">'; 92 template += '<img src="/Content/images/ss12/common/logo.png" style="width:230px;height:auto;margin:0rem 0 2.5rem" />'; 93 template += '<h2 class="ie_title">í´ë¹ ì¬ì´í¸ë IEë¸ë¼ì°ì ì ìµì í ëì´ ìì§ ììµëë¤.<br>' 94 template += 'ìµì ì¹ë¸ë¼ì°ì ë¡ ìë ì°ê²° í©ëë¤.<br>'; 95 template += 'ì´ë¦¬ì§ ìì ê²½ì° ìë ë§í¬ìì ë¤ì´ë¡ë í´ì£¼ì¸ì.</h2>'; 96 template += '<h2 class="ie_title"><a href="https://www.microsoft.com/ko-kr/edge" class="ie_link">ì£ì§ ë¸ë¼ì°ì ë¤ì´ë¡ë</a></h2>'; 97 template += '</div>'; 98 document.querySelector('body').innerHTML = template; 99 window.location = 'microsoft-edge:' + window.location.href; 100 }, 101 }; 102 103 var detectIE = function () { 104 var ua = window.navigator.userAgent; 105 var msie = ua.indexOf('MSIE'); 106 if (msie > 0) { 107 // IE 10 ì´ì ë²ì ì±í¬ 108 return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); 109 } 110 var trident = ua.indexOf('Trident/'); 111 if (trident > 0) { 112 // IE 11 ë²ì ì²´í¬ 113 var rv = ua.indexOf('rv:'); 114 return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); 115 } 116 // ë¤ë¥¸ ë¸ë¼ì°ì ë¦¬í´ 117 return false; 118 }; 119 120 // IE ëë Edge ë¸ë¼ì°ì ë²ì ê°ì ¸ì¤ê¸° 121 var version = detectIE(); 122 if (version) { 123 return viewModel.templateIE('IE', version); 124 } 125 126 }); 127</script>
127 128 129
129<script src="https://cdnet.nasmob.com/nstation/cpa/v1/nsttrack.min.js"></script>
129 130
130<script> 131 NSTATION.SCRIPT.init(); 132 </script>
132 133</head> 134<body> 135 <!-- Google Tag Manager (noscript) -->
vendor: 87 bytes, lines 135-137
135 136 <noscript> 137 <iframe src="https://www.googletagmanager.com/ns.html?id=
137GTM-TX8SH2W
vendor: 119 bytes, lines 137-140
137" 138 height="0" width="0" style="display:none;visibility:hidden"></iframe> 139 </noscript> 140
140<!-- End Google Tag Manager (noscript) --> 141 142 <div id="container" class="p-main"> 143 <header id="header"> 144 <div class="header-inner"> 145 <h1 class="header-logo"> 146 <a href="/"><img src="../../../resources/images/ss14/logo-header.png" alt="HYUNDAI" /></a> 147 </h1> 148 <div class="header-gnb"> 149 <ul> 150 <li> 151 <a href="https://www.gift-car.kr/Intro">기íí¸ì¹´ ì´ì¼ê¸°</a> 152 </li> 153 <li> 154 <a href="https://www.gift-car.kr/Media">기íí¸ì¹´ íì¤í 리</a> 155 </li> 156 <li> 157 <a href="https://www.gift-car.kr/Event">ì´ë²¤í¸</a> 158 </li> 159 <li> 160 <a href="https://www.gift-car.kr/Notice">ê³µì§ / 문ì</a> 161 </li> 162 </ul> 163 </div> 164 <div class="header-search"> 165 <form id="SearchTopFrm" method="GET" action="/Search"> 166 <input type="text" name="SearchText" class="form-input" /> 167 <input type="hidden" name="SearchTopMode" value="1" /> 168 <button type="submit" class="btn-search"></button> 169</form> 170 </div> 171 <div class="mobile-navigation-menu" onclick="mobileMenuController.toggle(this,'#mobileMenu', true)"> 172 <span class="icon"></span> 173 </div> 174 </div> 175 <div class="mobile-menu-container" id="mobileMenu"> 176 <ul> 177 <li> 178 <a href="https://www.gift-car.kr/Intro">기íí¸ì¹´ ì´ì¼ê¸°</a> 179 </li> 180 <li> 181 <a href="https://www.gift-car.kr/Media">기íí¸ì¹´ íì¤í 리</a> 182 </li> 183 <li> 184 <a href="https://www.gift-car.kr/Event">ì´ë²¤í¸</a> 185 </li> 186 <li> 187 <a href="https://www.gift-car.kr/Notice">ê³µì§ / 문ì</a> 188 </li> 189 </ul> 190 </div> 191 </header> 192 193 194 195 196 197<!-- 컨í ì¸ --> 198<main id="content" class="main-content"> 199 <section class="visual-main"> 200 <div class="section-inner"> 201 <div class="visual-title--wrap"> 202 <div class="visual-title" data-aos="zoom-in-up" data-aos-easing="ease-out-back" data-aos-duration="1000"> 203 <img src="https://cdncf.gift-car.kr/resources/images/ss15/img-visual--title.png" alt="기íí¸ì¹´ play on" class="pc-show" /> 204 <img src="https://cdncf.gift-car.kr/resources/images/ss15/img-visual--title--mo.png" alt="기íí¸ì¹´ play on" class="mobile-show" /> 205 </div> 206 207 <div class="test-ani--wrap scroll-animate"> 208 <div class="visual-sub--title"> 209 <img src="../../../resources/images/ss15/img-visual-sub--title.png" alt="ì ìë ì¤í¬ì¸ ì§ì ìº íì¸" class="pc-show" /> 210 <img src="../../../resources/images/ss15/img-visual-sub--title--mo.png" alt="ì ìë ì¤í¬ì¸ ì§ì ìº íì¸" class="mobile-show" /> 211 </div> 212 <div class="visual-desc--wrap"> 213 <p class="visual-desc--top">ìì´ë¤ì ì¤í¬ì¸ ììì ìë¼ë©ëë¤</p> 214 <div class="visual-desc--bottom"> 215 15ë²ì§¸ 기íí¸ì¹´ì 목ì ì§ë ì°ë¦¬ ìì´ë¤ì ê±´ê°í ì±ì¥ì ëë¤<br /> 216 ì¤í¬ì¸ 를 íµí´ ê¿ê¾¸ê³ ì±ì¥íë ìì´ë¤ì 미ë를 ìí´<br /> 217 기íí¸ì¹´ê° ëíë¯¼êµ ì ìë ì¤í¬ì¸ ì ì±ì¥ì ì§ìí©ëë¤ 218 <small>기íí¸ì¹´ ìì¦15 íë ì´ì¨ ìº íì¸ì êµì¡ë¶ì í¨ê»í©ëë¤</small> 219 </div> 220 </div> 221 <div class="cta-wrapper"> 222 <a href="/YouthSports" class="cta-button" ga_category='gifecar_playon_main' ga_action='Click:ìº íì¸ ì ì²í기' ga_label='playon_main_Click:ìº íì¸ ì ì²í기 ë²í¼'>ìº íì¸ ì ì² ë§ê°</a> 223 </div> 224 </div> 225 </div> 226 <div class="img-object--cars" data-aos="zoom-in-up" data-aos-easing="ease-out-back" data-aos-duration="1000"> 227 <img src="../../../resources/images/ss15/img-object--cars.png" class="pc-show" /> 228 <img src="../../../resources/images/ss15/img-object--cars--mo.png" class="mobile-show" /> 229 </div> 230 </div> 231 </section> 232 <div class="quick-menu--wrap scroll-menu--wrap"> 233 <a href="javascript:void(0)" class="quick-menu--item scroll-menu--item" onclick="window.scrollMoveTo('event01',40)">
234 <span class="text"> 235 ì ìë ì¤í¬ì¸ <br class="mobile-show" /> 236 ìì í기 237 </span> 238 </a> 239 <a href="javascript:void(0)" class="quick-menu--item scroll-menu--item" onclick="window.scrollMoveTo('event02',40)"> 240 <span class="text"> 241 ëì !<br class="mobile-show" /> 242 í´ì¦ ì±í¼ì¸ 243 </span> 244 </a> 245 <a href="javascript:void(0)" class="quick-menu--item scroll-menu--item" onclick="window.scrollMoveTo('event03',40)"> 246 <span class="text"> 247 ê¿ì í¥í<br class="mobile-show" /> 248 ë림 ë ¸í¸ 249 </span> 250 </a> 251 <a href="javascript:void(0)" class="quick-menu--item scroll-menu--item" onclick="window.scrollMoveTo('event04',40)"> 252 <span class="text">'MY ë림' <br class="mobile-show" />ì¬ì§ 공모<br class="mobile-show" />ì´ë²¤í¸</span> 253 </a> 254 </div> 255 <div class="play-on-event--wrap"> 256 257 258<section class="play-on-event--section play-on--event01 menu-scroll" id="event01"> 259 <div class="section-inner scroll-animate"> 260 <div class="common-play-on-event--heading"> 261 <div class="play-on--cate">#EVENT 1</div> 262 <div class="play-on-img--title"> 263 <img src="../../../resources/images/ss15/img-play-on-event--title01.png" alt="ì ìë ì¤í¬ì¸ ìì í기" class="pc-show" /> 264 <img src="../../../resources/images/ss15/img-play-on-event--title01--mo.png" alt="ì ìë ì¤í¬ì¸ ìì í기" class="mobile-show" /> 265 <div class="lottie-right--object"></div> 266 </div> 267 <div class="play-on--desc"> 268 ìì ëê¸ ì´ë²¤í¸ê° ì¢ ë£ëììµëë¤.<br /> 269 기íí¸ì¹´ PLAY ON ììê³¼ í¨ê»<br class="mobile-show" /> ë°ë»í ììì ëê¸ì íì¸í´ ë³´ì¸ì. 270 </div> 271 </div> 272 <div class="play-on-video--wrap"> 273 <div class="common-video-container"> 274 <div class="video-content" id="video01"> 275 <button type="button" class="btn-video-play" data-id="videoPlay01" ga_category='gifecar_playon_main' ga_action='Click:ê³µììì' ga_label='playon_main_Click:ê³µììì'></button> 276 <div id="videoPlay01"></div> 277 </div> 278 </div> 279 <p class="video-info--text">*ë¤í¸ìí¬ ë³´ì 문ì ë¡ ììì´ ë³´ì´ì§ ìë ê²½ì° <a href="https://youtu.be/Jz-NH6wHgbo?si=GY1WnLU59qdldBvj" target="_blank">ì¬ê¸°</a>ìì ê°ìí´ì£¼ì¸ì.</p> 280 </div> 281 <div class="cheering-comment--wrap"> 282 <div class="cheering-comment--row cheering-comment--row01"> 283 <div class="cheering-comment--item color01 cheering1" style="display:none"> 284 <span class="nickname">········</span> 285 <span class="icon"> 286 <img src="../../../resources/images/ss15/cheering-row-icon01.png" alt="" /> 287 </span> 288 <p class="message">································································</p> 289 </div> 290 <div class="cheering-comment--item color02 cheering2" style="display:none"> 291 <span class="nickname">········</span> 292 <span class="icon"> 293 <img src="../../../resources/images/ss15/cheering-row-icon02.png" alt="" /> 294 </span> 295 <p class="message">································································</p> 296 </div> 297 <div class="cheering-comment--item color01 cheering3" style="display:none"> 298 <span class="nickname">········</span> 299 <span class="icon"> 300 <img src="../../../resources/images/ss15/cheering-row-icon03.png" alt="" /> 301 </span> 302 <p class="message">································································</p> 303 </div> 304 <div class="cheering-comment--item color01 cheering1" style="display:none">
305 <span class="nickname">········</span> 306 <span class="icon"> 307 <img src="../../../resources/images/ss15/cheering-row-icon01.png" alt="" /> 308 </span> 309 <p class="message">································································</p> 310 </div> 311 <div class="cheering-comment--item color02 cheering2" style="display:none"> 312 <span class="nickname">········</span> 313 <span class="icon"> 314 <img src="../../../resources/images/ss15/cheering-row-icon02.png" alt="" /> 315 </span> 316 <p class="message">································································</p> 317 </div> 318 <div class="cheering-comment--item color01 cheering3" style="display:none"> 319 <span class="nickname">········</span> 320 <span class="icon"> 321 <img src="../../../resources/images/ss15/cheering-row-icon03.png" alt="" /> 322 </span> 323 <p class="message">································································</p> 324 </div> 325 <div class="cheering-comment--item color01 cheering1" style="display:none"> 326 <span class="nickname">········</span> 327 <span class="icon"> 328 <img src="../../../resources/images/ss15/cheering-row-icon01.png" alt="" /> 329 </span> 330 <p class="message">································································</p> 331 </div> 332 <div class="cheering-comment--item color02 cheering2" style="display:none"> 333 <span class="nickname">········</span> 334 <span class="icon"> 335 <img src="../../../resources/images/ss15/cheering-row-icon02.png" alt="" /> 336 </span> 337 <p class="message">································································</p> 338 </div> 339 <div class="cheering-comment--item color01 cheering3" style="display:none"> 340 <span class="nickname">········</span> 341 <span class="icon"> 342 <img src="../../../resources/images/ss15/cheering-row-icon03.png" alt="" /> 343 </span> 344 <p class="message">································································</p> 345 </div> 346 </div> 347 <div class="cheering-comment--row cheering-comment--row02"> 348 <div class="cheering-comment--item color04 cheering4" style="display:none"> 349 <span class="nickname">········</span> 350 <span class="icon"> 351 <img src="../../../resources/images/ss15/cheering-row-icon04.png" alt="" /> 352 </span> 353 <p class="message">································································</p> 354 </div> 355 <div class="cheering-comment--item color05 cheering5" style="display:none"> 356 <span class="nickname">········</span> 357 <span class="icon"> 358 <img src="../../../resources/images/ss15/cheering-row-icon05.png" alt="" /> 359 </span> 360 <p class="message">································································</p> 361 </div> 362 <div class="cheering-comment--item color06 cheering6" style="display:none">
363 <span class="nickname">········</span> 364 <span class="icon"> 365 <img src="../../../resources/images/ss15/cheering-row-icon06.png" alt="" /> 366 </span> 367 <p class="message">································································</p> 368 </div> 369 <div class="cheering-comment--item color04 cheering4" style="display:none"> 370 <span class="nickname">········</span> 371 <span class="icon"> 372 <img src="../../../resources/images/ss15/cheering-row-icon04.png" alt="" /> 373 </span> 374 <p class="message">································································</p> 375 </div> 376 <div class="cheering-comment--item color05 cheering5" style="display:none"> 377 <span class="nickname">········</span> 378 <span class="icon"> 379 <img src="../../../resources/images/ss15/cheering-row-icon05.png" alt="" /> 380 </span> 381 <p class="message">································································</p> 382 </div> 383 <div class="cheering-comment--item color06 cheering6" style="display:none"> 384 <span class="nickname">········</span> 385 <span class="icon"> 386 <img src="../../../resources/images/ss15/cheering-row-icon06.png" alt="" /> 387 </span> 388 <p class="message">································································</p> 389 </div> 390 <div class="cheering-comment--item color04 cheering4" style="display:none"> 391 <span class="nickname">········</span> 392 <span class="icon"> 393 <img src="../../../resources/images/ss15/cheering-row-icon04.png" alt="" /> 394 </span> 395 <p class="message">································································</p> 396 </div> 397 <div class="cheering-comment--item color05 cheering5" style="display:none"> 398 <span class="nickname">········</span> 399 <span class="icon"> 400 <img src="../../../resources/images/ss15/cheering-row-icon05.png" alt="" /> 401 </span> 402 <p class="message">································································</p> 403 </div> 404 <div class="cheering-comment--item color06 cheering6" style="display:none"> 405 <span class="nickname">········</span> 406 <span class="icon"> 407 <img src="../../../resources/images/ss15/cheering-row-icon06.png" alt="" /> 408 </span> 409 <p class="message">································································</p> 410 </div> 411 </div> 412 413 </div> 414 <div class="btn--wrap"> 415 <a href="https://youtu.be/Jz-NH6wHgbo?si=GY1WnLU59qdldBvj" target="_blank" class="common-btn--style btn-link--cheeringComment btn-shiny"> 416 <img src="../../../resources/images/ss15/img-btn-link--cheeringComment_end.png" alt="ì íë¸ìì ìì ëê¸ ì°ê¸°" class="pc-show" /> 417 <img src="../../../resources/images/ss15/img-btn-link--cheeringComment--mo_end.png" alt="ì íë¸ìì ìì ëê¸ ì°ê¸°" class="mobile-show" /> 418 </a> 419 </div> 420 <div class="play-on-event-about--wrap"> 421 <div class="event-about-box type-flex"> 422 <div class="left-icon"> 423 <img src="../../../resources/images/ss15/img-object--memo.png" alt="" /> 424 </div> 425 <div class="dash"></div> 426 <div class="right-text"> 427 <p> 428 ìì ëê¸ì ë¨ê²¨ì£¼ì ë¶ë¤ ì¤<br class="mobile-show" />
429 <span class="color">ì¶ì²¨ì íµí´</span><br class="pc-show" /> 430 100ë¶ê»<br class="mobile-show" /> 431 <span class="color"> 432 ì¤íë² ì¤ ìë©ë¦¬ì¹´ë ¸ Tall<br class="mobile-show" /> 433 기íí°ì½ 434 </span> 435 ì ë립ëë¤. 436 </p> 437 <p> 438 ë¹ì²¨ì ë°íë <span class="color">10ì 15ì¼(ì)</span><br /> 439 ì íë¸ ì»¤ë®¤ëí°ë¥¼ íµí´ ì§íë©ëë¤. 440 </p> 441 </div> 442 </div> 443 </div> 444 445 <div class="c-common-share--event"> 446 <div class="share-event--con"> 447 <h6> 448 ì´ë²¤í¸<br class="mobile-show" /> 449 ì문ë´ê¸° 450 </h6> 451 <div class="sns-icon--wrap"> 452 <button type="button" class="icon-sns insta btnInsta" ga_category='gifecar_playon_main' ga_action='Click:ì ìë ì¤í¬ì¸ ììí기_ì¸ì¤í ê³µì ' ga_label='playon_main_Click:ì ìë ì¤í¬ì¸ ììí기_ì¸ì¤í ê³µì ë²í¼'><span class="hidden">ì¸ì¤í</span></button> 453 <button type="button" class="icon-sns kakao" onclick="Share.kakaotalk('https://youtu.be/Jz-NH6wHgbo?si=GY1WnLU59qdldBvj')" ga_category='gifecar_playon_main' ga_action='Click:ì ìë ì¤í¬ì¸ ììí기_ì¹´ì¹´ì¤ ê³µì ' ga_label='playon_main_Click:ì ìë ì¤í¬ì¸ ììí기_ì¹´ì¹´ì¤ ê³µì ë²í¼'><span class="hidden">ì¹´ì¹´ì¤</span></button> 454 <button type="button" class="icon-sns facebook" onclick="Share.facebook('https://youtu.be/Jz-NH6wHgbo?si=GY1WnLU59qdldBvj')" ga_category='gifecar_playon_main' ga_action='Click:ì ìë ì¤í¬ì¸ ììí기_íë¶ ê³µì ' ga_label='playon_main_Click:ì ìë ì¤í¬ì¸ ììí기_íë¶ ê³µì ë²í¼'><span class="hidden">íì´ì¤ë¶</span></button> 455 <button type="button" class="icon-sns url" onclick="Share.urlcopyStr(this, 'https://youtu.be/Jz-NH6wHgbo?si=GY1WnLU59qdldBvj')" ga_category='gifecar_playon_main' ga_action='Click:ì ìë ì¤í¬ì¸ ììí기_ë§í¬ ë³µì¬' ga_label='playon_main_Click:ì ìë ì¤í¬ì¸ ììí기_ë§í¬ ë³µì¬ ë²í¼'><span class="hidden">ë§í¬ê³µì </span></button> 456 </div> 457 </div> 458 </div> 459 460 </div> 461</section> 462
463<script> 464 $(document).ready(function () { 465 $.post("/Home/GetListCheerUpComment", function (result) { 466 467 if (result.success == true) { 468 469 var idx = 0; 470 $(result.data).each(function (i, d) { 471 472 if ($.trim(d.NickName) != "" && $.trim(d.Contents) != "") { 473 $(".cheering" + idx).find(".nickname").html(d.NickName); 474 $(".cheering" + idx).find(".message").html(d.Contents); 475 476 $(".cheering" + idx).show(); 477 478 idx++; 479 } 480 481 }); 482 483 } 484 else { 485 console.log('ììëê¸ ë¡ë© ì¤í¨'); 486 } 487 488 window.mainMarquee(); 489 }); 490 }) 491</script>
491 492 493
494<script> 495 //window.mainMarquee(); 496 // ìì ì¤í¬ë¦½í¸ 497 var playList = [{ 498 id: 'videoPlay01', 499 videoId: 'Jz-NH6wHgbo', 500 },]; 501 var playerArr = []; // ìì 리ì¤í¸ 502 // ì íë¸ script 503 var tag = document.createElement('script'); 504 tag.src = 'https://www.youtube.com/iframe_api'; 505 var firstScriptTag = document.getElementsByTagName('script')[0]; 506 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 507 // ì íë¸ ì´ê¸° ì¤í í¨ì - ì ê±° X 508 function onYouTubeIframeAPIReady() { 509 iframePlayer(); 510 } 511 // iframe ìì± í¸ì¶ í¨ì 512 function iframePlayer() { 513 if (!playList.length) return; 514 for (var i = 0; i < playList.length; i++) { 515 playerArr.push(createPlay(playList[i])); 516 } 517 } 518 var player; 519 // iframe ìì± í¨ì 520 function createPlay(element) { 521 player = new YT.Player(element.id, { 522 playerVars: { 523 playlist: element.videoId, 524 autoplay: 0, 525 loop: 0, 526 playsinline: 1, 527 modestbranding: 0, 528 controls: 1, 529 showinfo: 0, 530 rel: 0, 531 mute: 0, 532 }, 533 events: { 534 onReady: onReviewReady, 535 }, 536 }); 537 } 538 539 function onReviewReady(event) { 540 // íë ì´ ë²í¼ ë를ë 541 var _id = event.target.g.id; 542 $('.btn-video-play').on('click', function () { 543 var _videoId = $(this).data('id'); 544 if (_videoId === _id) { 545 $(this).hide(); 546 event.target.playVideo(); 547 } 548 }); 549 } 550</script>
550 551 552 553 554<section class="play-on-event--section play-on--event02 menu-scroll" id="event02"> 555 <div class="section-inner scroll-animate"> 556 <div class="common-play-on-event--heading"> 557 <div class="play-on--cate">#EVENT 2</div> 558 <div class="play-on-img--title"> 559 <img src="../../../resources/images/ss15/img-play-on-event--title02.png" alt="ëì ! í´ì¦ ì±í¼ì¸" class="pc-show" /> 560 <img src="../../../resources/images/ss15/img-play-on-event--title02--mo.png" alt="ëì ! í´ì¦ ì±í¼ì¸" class="mobile-show" /> 561 <div class="lottie-left--object"></div> 562 <div class="lottie-right--object"></div> 563 </div> 564 <div class="play-on--desc"> 565 ì´ë²¤í¸ê° ì¢ ë£ëììµëë¤.<br /> 566 15ë²ì§¸ 기íí¸ì¹´ ìº íì¸ì í¨ê»í´ 주ì <br class="mobile-show" /> 모ë ë¶ë¤ê» ê°ì¬ë립ëë¤. 567 </div> 568 <div class="date-wrap"> 569 <div class="play-on-event--date">ì´ë²¤í¸ ê¸°ê° : 8/7(목) ~ 10/31(ê¸)</div> 570 </div> 571 </div> 572 <div class="now-count--wrap"> 573 <div class="bg"></div> 574 <div class="common-deco-title--wrap"> 575 <div class="common-deco-title">ì´</div> 576 </div> 577 <div class="count-item--wrap"> 578 <div class="count-item"> 579 <span class="num">0</span> 580 </div> 581 <div class="count-item"> 582 <span class="num">0</span> 583 </div> 584 <div class="count-item"> 585 <span class="num">0</span> 586 </div> 587 <div class="count-item"> 588 <span class="num">0</span> 589 </div> 590 <div class="count-item"> 591 <span class="num">0</span> 592 </div> 593 </div> 594 <p> 595 ëª ì´ 596 <span class="color">ëì </span> íì ¨ìµëë¤. 597 </p> 598 </div> 599 600 601 <div class="gift-info--box quiz"> 602 <p> 603 ì ëµì ë§íì ë¶ë¤ ì¤ 604 <span class="color">ì¶ì²¨ì íµí´</span> ì 물ì ë립ëë¤. 605 </p> 606 <p> 607 ë¹ì²¨ì ë°íë 608 <span class="color">11ì 14ì¼(ê¸)</span> 609 <br /> 610 ë¹ì²¨ììê²ë ì´ìì¬ë¬´êµìì ê°ë³ ìë´ë립ëë¤. 611 </p> 612 <div class="img-gift-info--warp"> 613 <img src="../../../resources/images/ss15/img-quiz-gift-infio.png?v=1" alt="" class="pc-show" /> 614 <img src="../../../resources/images/ss15/img-quiz-gift-infio-mo.png?v=1" alt="" class="mobile-show" /> 615 </div> 616 </div> 617 <div class="c-common-share--event"> 618 <div class="share-event--con"> 619 <h6> 620 ì´ë²¤í¸ 621 <br class="mobile-show"> 622 ì문ë´ê¸° 623 </h6> 624 <div class="sns-icon--wrap"> 625 <button type="button" class="icon-sns insta btnInsta" ga_category='gifecar_playon_main' ga_action='Click:ëì í´ì¦ ì±í¼ì¸_ì¸ì¤í ê³µì ' ga_label='playon_main_Click:ëì í´ì¦ ì±í¼ì¸_ì¸ì¤í ê³µì ë²í¼'><span class="hidden">ì¸ì¤í</span></button> 626 <button type="button" class="icon-sns kakao btnKakao" ga_category='gifecar_playon_main' ga_action='Click:ëì í´ì¦ ì±í¼ì¸_ì¹´ì¹´ì¤ ê³µì ' ga_label='playon_main_Click:ëì í´ì¦ ì±í¼ì¸_ì¹´ì¹´ì¤ ê³µì ë²í¼'><span class="hidden">ì¹´ì¹´ì¤</span></button> 627 <button type="button" class="icon-sns facebook btnFacebook" ga_category='gifecar_playon_main' ga_action='Click:ëì í´ì¦ ì±í¼ì¸_íë¶ ê³µì ' ga_label='playon_main_Click:ëì í´ì¦ ì±í¼ì¸_íë¶ ê³µì ë²í¼'><span class="hidden">íì´ì¤ë¶</span></button> 628 <button type="button" class="icon-sns url btnUrl" ga_category='gifecar_playon_main' ga_action='Click:ëì í´ì¦ ì±í¼ì¸_ë§í¬ ë³µì¬' ga_label='playon_main_Click:ëì í´ì¦ ì±í¼ì¸_ë§í¬ ë³µì¬ ë²í¼'><span class="hidden">ë§í¬ê³µì </span></button> 629 </div> 630 </div> 631 </div> 632 633 </div> 634</section> 635
636<script> 637 $(document).ready(function () { 638 $.post("/Home/GetQuizTotal", function (result) { 639 640 641 if (result.success == true) { 642 var str = (result.count).toString(); 643 var arry = Array.from(str); 644 var idx = 5-arry.length; 645 $(arry).each(function (i, d) { 646 $(".count-item").find(".num").eq(idx).html(d); 647 idx++; 648 }) 649 650 } 651 else { 652 console.log('í´ì¦ ëì ì ë¡ë© ì¤í¨'); 653 } 654 655 }); 656 }) 657</script>
657 658 659 660<section class="play-on-event--section play-on--event03 menu-scroll" id="event03"> 661 <div class="section-inner scroll-animate"> 662 <div class="section-inner"> 663 <div class="common-play-on-event--heading"> 664 <div class="play-on--cate">#EVENT 3</div> 665 <div class="play-on-img--title"> 666 <img src="../../../resources/images/ss15/img-play-on-event--title03.png" alt="ê¿ì í¥í ë림 ë ¸í¸" class="pc-show" /> 667 <img src="../../../resources/images/ss15/img-play-on-event--title03--mo.png" alt="ê¿ì í¥í ë림 ë ¸í¸" class="mobile-show" /> 668 <div class="lottie-left--object"></div> 669 <div class="lottie-right--object"></div> 670 </div> 671 <div class="play-on--desc"> 672 ì´ë²¤í¸ê° ì¢ ë£ëììµëë¤.<br /> 673 ë§ììì ê°ì§í ìì¤í ê¿ê³¼ ììì ë¨ê²¨ì£¼ì <br class="mobile-show" /> 모ë ë¶ë¤ê» ê°ì¬ë립ëë¤. 674 </div> 675 <div class="date-wrap"> 676 <div class="play-on-event--date">ì´ë²¤í¸ ê¸°ê° : 8/14(목) ~ 10/31(ê¸)</div> 677 </div> 678 </div> 679 </div> 680 <div class="dreamNote-item--wrap"> 681 <!-- pcë²ì --> 682 <div class="swiper dreamNoteSlider"> 683 <div class="swiper-wrapper"> 684 685 </div> 686 </div> 687 <!-- If we need navigation buttons --> 688 <div class="swiper-button-prev"></div> 689 <div class="swiper-button-next"></div> 690 <!-- moë²ì --> 691 <div class="mobile-show-note-slide--wrap scroll-animate"> 692 <div class="swiper dreamNoteMobile"> 693 <div class="swiper-wrapper" style="overflow-x: visible"> 694 695 </div> 696 </div> 697 </div> 698 </div> 699 700 701 <div class="section-inner"> 702 <div class="gift-info--box dreamnote"> 703 <p> 704 ì ì±ê» ìì±í´ì£¼ì ì¬ì° ì¤ 705 <span class="color"></span> íì±í ì 물ì ë립ëë¤. 706 </p> 707 <p> 708 ë¹ì²¨ì ë°íë <span class="color">11ì 14ì¼(ê¸)</span><br /> 709 ë¹ì²¨ììê²ë ì´ìì¬ë¬´êµìì ê°ë³ ìë´ë립ëë¤. 710 </p> 711 <div class="img-gift-info--warp"> 712 <img src="../../../resources/images/ss15/img-dreamnote-gift-infio.png" alt="" class="pc-show" /> 713 <img src="../../../resources/images/ss15/img-dreamnote-gift-infio-mo.png" alt="" class="mobile-show" /> 714 </div> 715 </div> 716 <div class="c-common-share--event"> 717 <div class="share-event--con"> 718 <h6> 719 ì´ë²¤í¸<br class="mobile-show" /> 720 ì문ë´ê¸° 721 </h6> 722 <div class="sns-icon--wrap"> 723 <button type="button" class="icon-sns insta btnInsta" ga_category='gifecar_playon_main' ga_action='Click:ê¿ì í¥í ë림 ë ¸í¸_ì¸ì¤í ê³µì ' ga_label='playon_main_Click:ê¿ì í¥í ë림 ë ¸í¸_ì¸ì¤í ê³µì ë²í¼'><span class="hidden">ì¸ì¤í</span></button> 724 <button type="button" class="icon-sns kakao btnKakao" ga_category='gifecar_playon_main' ga_action='Click:ê¿ì í¥í ë림 ë ¸í¸_ì¹´ì¹´ì¤ ê³µì ' ga_label='playon_main_Click:ê¿ì í¥í ë림 ë ¸í¸_ì¹´ì¹´ì¤ ê³µì ë²í¼'><span class="hidden">ì¹´ì¹´ì¤</span></button> 725 <button type="button" class="icon-sns facebook btnFacebook" ga_category='gifecar_playon_main' ga_action='Click:ê¿ì í¥í ë림 ë ¸í¸_íë¶ ê³µì ' ga_label='playon_main_Click:ê¿ì í¥í ë림 ë ¸í¸_íë¶ ê³µì ë²í¼'><span class="hidden">íì´ì¤ë¶</span></button> 726 <button type="button" class="icon-sns url btnUrl" ga_category='gifecar_playon_main' ga_action='Click:ê¿ì í¥í ë림 ë ¸í¸_ë§í¬ ë³µì¬' ga_label='playon_main_Click:ê¿ì í¥í ë림 ë ¸í¸_ë§í¬ ë³µì¬ ë²í¼'><span class="hidden">ë§í¬ê³µì </span></button> 727 </div> 728 </div> 729 </div> 730 </div> 731 </div> 732</section> 733 734 <div class="layer-popup full-scroll dream-note-popup" id="dreamNoteDetailPo
734pup" data-id=""> 735 <div class="popup-container medium"> 736 <div class="dream-note--item"> 737 <button type="button" class="btn-popup-close" onclick="window.layerPopup.closePopup()"> 738 <img src="../../../resources/images/ss15/icon-btn-popup-close.png" alt="" /> 739 </button> 740 <div class="dream-note--heading"> 741 <div class="flex-box"> 742 <span class="school-name lblSchoolName"></span> 743 <span class="dash"></span> 744 <span class="school-name lblClubName"></span> 745 </div> 746 </div> 747 <div class="dream-note--content"> 748 <div class="text-content"> 749 <p class="nickname lblNickName"></p> 750 <p class="note-content--text lblContents"></p> 751 </div> 752 <div class="like-btn--wrap"> 753 <button type="button" class="btn-like--click type-popup-like btnPopupLike" onclick="SetLike(this)"> 754 <span class="icon"></span> 755 <span class="text"> ì¢ìì </span> 756 </button> 757 </div> 758 </div> 759 </div> 760 </div> 761 </div> 762 <div id="NoteSample" style="display:none"> 763 <div class="dream-note--item btnDreamNoteMore {{ë ¸í¸ìì}} {{ì¶ê°í´ëì¤}}" data-id="{{ID}}" data-class="{{ë ¸í¸ìì}}" style="cursor:pointer"> 764 <div class="dream-note--heading"> 765 <div class="flex-box"> 766 <span class="school-name lblSchoolName">{{íêµëª }}</span> 767 <span class="dash"></span> 768 <span class="school-name lblClubName">{{ì´ëë¶ëª }}</span> 769 </div> 770 </div> 771 <div class="dream-note--content"> 772 {{ì¤í°ì»¤}} 773 <div class="text-content"> 774 <p class="nickname lblNickName">{{ëë¤ì}}</p> 775 <p class="note-content--text lblContents">{{ë´ì©}}</p> 776 <button type="button" class="btn-more--note">+ ë보기</button> 777 </div> 778 <div class="like-btn--wrap"> 779 <button type="button" class="btn-like--click"> 780 <span class="icon"></span> 781 <span class="text lblDreamNoteLike">{{ì¢ìì}} </span> 782 </button> 783 </div> 784 </div> 785 </div> 786 </div> 787
787<script> 788 789 var token = "a929f4bc-d895-4b82-a2f3-d8d88a7bf6b0"; 790 var sliderPC = null, sliderMO = null; 791 792 var lastID = 0; 793 var isLast = false; 794 795 796 $(document).ready(function () { 797 798 if (GetCookie("SS15_Token") != null && GetCookie("SS15_Token") != "") { 799 token = GetCookie("SS15_Token"); 800 } 801 else { 802 SetCookie("SS15_Token", token, 360); 803 } 804 805 sliderPC = new Swiper('.dreamNoteSlider', { 806 loop: false, 807 autoHeight: true, 808 navigation: { 809 nextEl: '.dreamNote-item--wrap .swiper-button-next', 810 prevEl: '.dreamNote-item--wrap .swiper-button-prev', 811 }, 812 }); 813 814 sliderMO = new Swiper('.dreamNoteMobile', { 815 loop: false, 816 slidesPerView: 'auto', 817 spaceBetween: 16, 818 }); 819 820 sliderPC.on('slideChange', function () { 821 if (sliderPC.isEnd) { 822 // console.log('PC ë§ì§ë§ ì¬ë¼ì´ëì ëë¤.'); 823 AddSlide(); 824 } 825 }); 826 827 sliderMO.on('slideChange', function () { 828 if (sliderMO.isEnd) { 829 // console.log('모ë°ì¼ ë§ì§ë§ ì¬ë¼ì´ëì ëë¤.'); 830 AddSlide(); 831 } 832 }); 833 834 835 AddSlide(); 836 if (isLast == false) { 837 AddSlide(); //1page를 íëë ë¶ë¬ì¨ë¤ (PC ì¬ë¼ì´ë íì´íì©) 838 } 839 840 }); 841 842 $(document).on("click", ".btnDreamNoteMore", function () { 843 var parent = $(this); 844 var id = $(this).attr("data-id"); 845 846 //ê° ë¯¸ë¦¬ ì í 847 $("#dreamNoteDetailPopup").attr("data-id", id); 848 $("#dreamNoteDetailPopup").find(".dream-note--item").addClass($(parent).attr("data-class")); 849 $("#dreamNoteDetailPopup").find(".lblSchoolName").html($(parent).find(".lblSchoolName").html()); 850 $("#dreamNoteDetailPopup").find(".lblClubName").html($(parent).find(".lblClubName").html()); 851 $("#dreamNoteDetailPopup").find(".lblNickName").html($(parent).find(".lblNickName").html()); 852 $("#dreamNoteDetailPopup").find(".lblContents").html($(parent).find(".lblContents").html()); 853 854 $.post("/Home/CheckLike", { id: id, token: token}, function (result) { 855 856 if (result.success == true) { 857 if (result.isCheck > 0) { 858 $("#dreamNoteDetailPopup").find(".btnPopupLike").addClass("active"); 859 $("#dreamNoteDetailPopup").find(".btnPopupLike").attr("disabled", "disabled"); 860 } 861 else { 862 $("#dreamNoteDetailPopup").find(".btnPopupLike").removeClass("active"); 863 $("#dreamNoteDetailPopup").find(".btnPopupLike").removeAttr("disabled"); 864 } 865 } 866 else { 867 $("#dreamNoteDetailPopup").find(".btnPopupLike").removeClass("active"); 868 $("#dreamNoteDetailPopup").find(".btnPopupLike").removeAttr("disabled"); 869 } 870 }); 871 872 873 //ì¤í 874 layerPopup.openPopup('dreamNoteDetailPopup', true); 875 }); 876 877 function AddSlide() { 878 879 if (isLast == true) { 880 return; 881 } 882 883 884 $.ajax({
885 url: "/Home/GetListDreamNote", 886 type: 'POST', 887 dataType: 'json', 888 async: false, 889 data: { startID: lastID }, 890 success: function (result) { 891 if (result.success == true) { 892 893 isLast = result.isLast 894 var mobileSlider = []; 895 if (result.list != null && result.list.length > 0) { 896 897 var sample = $("#NoteSample").html(); 898 var pcslide_htmlStr = ""; 899 $(result.list).each(function (i, d) { 900 901 var sticker = ""; 902 $($.parseJSON(d.Sticker)).each(function (id, s) { 903 sticker += "<div class='icon-deco--sticker " + s.id + " active' data-top='" + s.top + "' data-left='" + s.left + "'></div>"; 904 }); 905 906 var note = sample.replace("{{ID}}", d.Id) 907 .replaceAll("{{ë ¸í¸ìì}}", d.NoteSel) 908 .replace("{{ì¤í°ì»¤}}", sticker) 909 .replace("{{íêµëª }}", d.SchoolName) 910 .replace("{{ì´ëë¶ëª }}", d.ClubName) 911 .replace("{{ëë¤ì}}", d.NickName) 912 .replace("{{ë´ì©}}", d.Contents) 913 .replace("{{ì¢ìì}}", d.LikeCnt); 914 915 mobileSlider.push(note.replace("{{ì¶ê°í´ëì¤}}", "swiper-slide")); 916 pcslide_htmlStr += note.replace("{{ì¶ê°í´ëì¤}}", ""); 917 918 lastID = d.Id; 919 }) 920 921 sliderMO.appendSlide(mobileSlider); 922 923 if (pcslide_htmlStr != "") { 924 sliderPC.appendSlide("<div class='swiper-slide'><div class='dream-note-items--wrap'>" + pcslide_htmlStr + "</div></div>"); 925 } 926 927 sliderPC.update(); 928 sliderMO.update(); 929 930 StickerResize(); 931 } 932 } 933 934 }, 935 error: function (xhr, status, error) { 936 console.error('ìë¬ ë°ì:', error); 937 } 938 }); 939 } 940 941 window.addEventListener('resize', () => { 942 StickerResize(); 943 }); 944 945 function StickerResize() { 946 947 $(".icon-deco--sticker").each(function (i, d) { 948 949 var orgTop = $(d).attr("data-top"); 950 var orgLeft = $(d).attr("data-left"); 951 952 const width = $(this).parents(".dream-note--content").width(); 953 const height = $(this).parents(".dream-note--content").height(); 954 955 $(d).css("top", `${height * orgTop}px`); 956 $(d).css("left", `${width * orgLeft}px`); 957 958 }); 959 } 960 961 962 function SetLike(obj) { 963 964 var id = $("#dreamNoteDetailPopup").attr("data-id"); 965 966 $.post("/Home/SaveDreamNoteLike", { 967 p: GetJsonToEncParam({ 968 ID: id, 969 Token: token 970 }) 971 }, function (result) { 972 if (result.success == true) { 973 $(".dream-note--item[data-id=" + id + "]").find(".lblDreamNoteLike").html(result.cnt); 974 $(obj).addClass("active"); 975 $(obj).attr("disabled", "disabled"); 976 } 977 else { 978 console.log("ì¢ìì ì¤ì ì ì¤í¨íììµëë¤.") 979 } 980 }); 981 } 982 983 984 985 </script>
985 986 987 988 989<section class="play-on-event--section play-on--event04 menu-scroll" id="event04"> 990 <div class="section-inner scroll-animate"> 991 <div class="common-play-on-event--heading"> 992 <div class="play-on--cate">#EVENT 4</div> 993 <div class="play-on-img--title"> 994 <img src="../../../resources/images/ss15/img-play-on-event--title04.png" alt="'MY ë림' ì¬ì§ 공모ì´ë²¤í¸" class="pc-show" /> 995 <img src="../../../resources/images/ss15/img-play-on-event--title04--mo.png" alt="'MY ë림' ì¬ì§ 공모ì´ë²¤í¸" class="mobile-show" /> 996 <div class="lottie-left--object"></div> 997 <div class="lottie-right--object"></div> 998 </div> 999 <div class="play-on--desc"> 1000 ì´ë²¤í¸ê° ì¢ ë£ëììµëë¤.<br /> 1001 ì¤í¬ì¸ 를 í¥í ê¿ê³¼ ì¶ìµì 기ë¡í´ 주ì <br class="mobile-show" /> 모ë ë¶ë¤ê» ê°ì¬ë립ëë¤. 1002 </div> 1003 <div class="date-wrap"> 1004 <div class="play-on-event--date">ì´ë²¤í¸ ê¸°ê° : 8/14(목) ~ 10/31(ê¸)</div> 1005 </div> 1006 </div> 1007 <div class="photo-images--wrap" > 1008 <div class="photo-contest-slider--wrap"> 1009 <div class="c-photo-title--wrap"> 1010 <div class="c-photo--title"> 1011 <span class="txt">ííì´ì§ ì모ì</span> 1012 </div> 1013 </div> 1014 <div class="section-inner"> 1015 <div class="swiper-button-prev"></div> 1016 <div class="swiper-button-next"></div> 1017 <div class="swiper PhotoContestSlider"> 1018 <div id="PhotoContestList" class="swiper-wrapper"> 1019 1020 </div> 1021 </div> 1022 </div> 1023 </div> 1024 <div class="photo-sns-slider--wrap"> 1025 <div class="c-photo-title--wrap"> 1026 <div class="c-photo--title"> 1027 <span class="txt">SNS ì모ì</span> 1028 </div> 1029 <div class="hashtag-title"> 1030 <span><span>#</span>기íí¸ì¹´MYë림ì¬ì§ê³µëª¨</span> 1031 <span><span>#</span>기íí¸ì¹´íë ì´ì¨</span> 1032 </div> 1033 </div> 1034 1035 <div class="section-inner"> 1036 <div class="swiper-button-prev"></div> 1037 <div class="swiper-button-next"></div> 1038 <div class="swiper PhotoContestSNSSlider"> 1039 <div id="PhotoContestSNSList" class="swiper-wrapper"> 1040 1041 </div> 1042 </div> 1043 </div> 1044 1045 </div> 1046 </div> 1047 1048 <div class="section-inner"> 1049 1050 <div class="gift-info--box photo-contest"> 1051 <p> 1052 ì ì¶í´ì£¼ì ì¬ì§ ì¤ ì°ììì 1053 <span class="color">ííì´ì§ë¥¼ íµí´</span> 매주 ê³µê°ëë©° 1054 <br /> 1055 ê²½í ë¹ì²¨ ë´ìì 1056 <span class="color">11ì 14ì¼(ê¸)</span> ì´ìì¬ë¬´êµìì 1057 <br class="mobile-show" /> 1058 ê°ë³ë¡ ìë´ ë립ëë¤. 1059 </p> 1060 <small>ì´ë²¤í¸ ê²½íì ë¹ì²¨ ìë´ í ìì°¨ì ì¼ë¡ ë°ì¡ë ìì ì ëë¤.</small> 1061 <div class="img-gift-info--warp"> 1062 <img src="https://cdncf.gift-car.kr/resources/images/ss15/img-contest-gift-infio.png" alt="" class="pc-show" /> 1063 <img src="https://cdncf.gift-car.kr/resources/images/ss15/img-contest-gift-infio-mo.png" alt="" class="mobile-show" /> 1064 </div> 1065 </div> 1066 <div class="c-common-share--event"> 1067 <div class="share-event--con"> 1068 <h6> 1069 ì´ë²¤í¸ 1070 <br class="mobile-show" /> 1071 ì문ë´ê¸° 1072 </h6> 1073 <div class="sns-icon--wrap"> 1074 <button type="button" class="icon-sns insta btnInsta" ga_category='gifecar_playon_main' ga_action='Click:MYë림 ì¬ì§ 공모_ì¸ì¤í ê³µì ' ga_label='playon_main_Click:MYë림 ì¬ì§ 공모_ì¸ì¤í ê³µì ë²í¼'><span class="hidden">ì¸ì¤í</span></button> 1075 <button type="button" class="icon-sns kakao btnKakao" ga_category='gifecar_playon_main' ga_action='Click:MYë림 ì¬ì§ 공모_ì¹´ì¹´ì¤ ê³µì ' ga_label='playon_main_Click:MYë림 ì¬ì§ 공모_ì¹´ì¹´ì¤ ê³µì ë²í¼'><span class="hidden">ì¹´ì¹´ì¤</span></button> 1076 <button type="button" class="icon-sns facebook btnFacebook" ga_category='gifecar_playon_main' ga_action='Click:MYë림 ì¬ì§ 공모_íë¶ ê³µì ' ga_label='playon_main_Click:MYë림 ì¬ì§ 공모_íë¶ ê³µì ë²í¼'><span class="hidden">íì´ì¤ë¶</span></button> 1077 <button type="button" class="icon-sns url btnUrl" ga_category='gifecar_playon_main' ga_action='Click:MYë림 ì¬ì§ 공모_ë§í¬ ë³µì¬' ga_label='playon_main_Click:MYë림 ì¬ì§ 공모_ë§í¬ ë³µì¬ ë²í¼'><span class="hidden">ë§í¬ê³µì </span></button> 1078 </div> 1079 </div> 1080 </div> 1081 </div> 1082 </div> 1083</section> 1084
1085<script src="https://cdn.jsdelivr.net/npm/marquee.js"></script>
1085 1086<style> 1087 .js-marquee + .js-marquee { 1088 padding-left:10px 1089 } 1090</style> 1091
1091<script> 1092 $(document).ready(function () { 1093 1094 $.post("/Home/GetListMyDreamPhoto", { startID: lastID }, function (result) { 1095 if (result.success == true) { 1096 $(result.listHomepage).each(function (i, d) { 1097 var comment = ""; 1098 if (d.NickName != "" && d.Contents != "") { 1099 var addCss = (d.Contents.length > 30 ? "marquee" : ""); 1100 comment = '<div class="text-info--wrap"><span class="nickname">' + d.NickName + '</span><p class="photo-info--text ' + addCss+'" >' + d.Contents.replace(/(\r\n|\n|\r)/gm, " ").replaceAll("<br />", " ") + '</p></div>'; 1101 } 1102 // data-src ì¬ì© + swiper-lazy í´ëì¤ ì¶ê° 1103 $("#PhotoContestList").append('<div class="swiper-slide"><div class="slider-inner"><div class="img-thumnail"><img data-src="' + d.PhotoPath + '" class="swiper-lazy" alt="" /><div class="swiper-lazy-preloader"></div></div>' + comment+'</div></div>'); 1104 }); 1105 1106 $(result.listSNS).each(function (i, d) { 1107 var comment = ""; 1108 if (d.Contents != "") { 1109 var addCss = (d.Contents.length > 30 ? "marquee" : ""); 1110 comment = '<div class="text-info--wrap"><p class="photo-info--text ' + addCss +'">' + d.Contents.replace(/(\r\n|\n|\r)/gm, " ").replaceAll("<br />", " ") + '</p></div>'; 1111 } 1112 $("#PhotoContestSNSList").append('<div class="swiper-slide"><div class="slider-inner"><div class="img-thumnail"><img data-src="' + d.PhotoPath + '" class="swiper-lazy" alt="" /><div class="swiper-lazy-preloader"></div></div>' + comment +'</div></div>'); 1113 }) 1114 1115 const photoContestSlider = new Swiper('.PhotoContestSlider', { 1116 loop: true, 1117 centeredSlides: true, 1118 breakpoints: { 1119 360: { 1120 slidesPerView: 1, 1121 spaceBetween: 8, 1122 }, 1123 901: { 1124 slidesPerView: 3, 1125 spaceBetween: 32, 1126 }, 1127 }, 1128 navigation: { 1129 nextEl: '.photo-contest-slider--wrap .section-inner .swiper-button-next', 1130 prevEl: '.photo-contest-slider--wrap .section-inner .swiper-button-prev', 1131 }, 1132 lazy: { 1133 enabled: true, 1134 loadPrevNext: true, 1135 loadPrevNextAmount: 3, 1136 loadOnTransitionStart: true, 1137 }, 1138 }); 1139 1140 const photoContestSNSSlider = new Swiper('.PhotoContestSNSSlider', { 1141 loop: true, 1142 centeredSlides: true, 1143 breakpoints: { 1144 360: { 1145 slidesPerView: 1, 1146 spaceBetween: 8, 1147 }, 1148 901: { 1149 slidesPerView: 3, 1150 spaceBetween: 32, 1151 }, 1152 }, 1153 navigation: { 1154 nextEl: '.photo-sns-slider--wrap .section-inner .swiper-button-next', 1155 prevEl: '.photo-sns-slider--wrap .section-inner .swiper-button-prev', 1156 }, 1157 lazy: { 1158 enabled: true, 1159 loadPrevNext: true, 1160 loadPrevNextAmount: 3, 1161 loadOnTransitionStart: true, 1162 }, 1163 }); 1164 1165 window.marqueeFunc(); 1166 } 1167 else { 1168 console.log("ì¬ì§ 공모ì 리ì¤í¸ë¥¼ ê°ì ¸ì
1168¤ì§ 못íììµëë¤.") 1169 } 1170 }); 1171 1172 }); 1173 1174 1175 </script>
1175 1176 1177 </div> 1178</main> 1179<!-- //컨í ì¸ --> 1180 1181 1182<style> 1183 /* ëì ê°ì¸ë ëí¼ */ 1184 .cta-wrapper { 1185 display: flex; 1186 flex-direction: column; 1187 align-items: center; 1188 gap: 20px; /* ë²í¼ê³¼ 문구 ì¬ì´ ê°ê²© */ 1189 padding: 30px 16px; 1190 text-align: center; 1191 } 1192 1193 /* ë²í¼ ì¤íì¼ */ 1194 .cta-button { 1195 display: inline-block; 1196 text-decoration: none; 1197 background-color: #3d5520; /* ì§í ë ¹ì ê³ì´ */ 1198 color: #ffffff; 1199 padding: 16px 60px; 1200 font-size: 20px; 1201 font-weight: 700; 1202 border-radius: 999px; 1203 transition: background-color 0.2s ease; 1204 } 1205 1206 /* hover í¨ê³¼ (ì í) */ 1207 .cta-button:hover { 1208 background-color: #5a7a2e; 1209 } 1210 1211 /* 문구 ì¤íì¼ */ 1212 .cta-note { 1213 background-color: #f2f6ea; /* ë°ì ì°ë ¹ì */ 1214 color: #3d5520; /* ë²í¼ ìê³¼ ëì¼ ê³ì´ ì§í ë ¹ì í ì¤í¸ */ 1215 padding: 12px 32px; 1216 font-size: 18px; 1217 font-weight: 600; 1218 border-radius: 12px; 1219 border: 1px solid #d5e3c8; /* ì´ì§ í ë리 */ 1220 } 1221 1222 /* 미ëì´ì¿¼ë¦¬: 모ë°ì¼ ëì */ 1223 @media (max-width: 480px) { 1224 .cta-button { 1225 padding: 14px 48px; 1226 font-size: 18px; 1227 } 1228 1229 .cta-note { 1230 padding: 10px 24px; 1231 font-size: 16px; 1232 } 1233 } 1234</style> 1235
1236<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
vendor: 2 bytes, line 1236
1236
1237<script src="/Scripts/univ.share.js?v=20250725"></script>
vendor: 2 bytes, line 1237
1237
1238<script> 1239 $(document).ready(function() { 1240 1241 //ë©ì¸ ì¥ì»¤ ì´ë 1242 if ("" != "") { 1243 1244 if ("" == "1") 1245 { 1246 window.scrollMoveTo('event01', 60) 1247 } 1248 else if ("" == "2") { 1249 window.scrollMoveTo('event02', 60) 1250 } 1251 else if ("" == "3") { 1252 window.scrollMoveTo('event03', 60) 1253 } 1254 else if ("" == "4") { 1255 window.scrollMoveTo('event04', 60) 1256 } 1257 } 1258 1259 Share.init({ 1260 instaButton :".btnInsta", 1261 kakaotalkButton: ".btnKakao", 1262 //kakaostoryButton: ".btnKakaostory", 1263 facebookButton: ".btnFacebook", 1264 urlcopyButton: ".btnUrl", 1265 kakaoJavascriptID: "e8be7a5072413595404c683abc6d1732", 1266 facebookAppID: "471405819658974", 1267 url: "https://www.gift-car.kr", 1268 title: "기íí¸ì¹´ PLAY ON", 1269 }); 1270 }); 1271</script>
1271 1272 1273 <footer id="footer"> 1274 <div class="footer-inner"> 1275 <div class="footer-primary"> 1276 <div class="footer-logo--wrap"> 1277 <div class="footer-logo"><img src="../../../resources/images/ss13/logo-footer.png" alt="HYUNDAI" /></div> 1278 <div class="footer-sub-logo footer-sub-logo01"><img src="../../../resources/images/ss15/img-sub-footer-logo02.png?v=2" alt="HYUNDAI" /></div> 1279 <div class="footer-sub-logo footer-sub-logo02"><img src="../../../resources/images/ss15/img-sub-footer-logo03.png" alt="HYUNDAI" /></div> 1280 </div> 1281 <div class="footer-link"> 1282 <a href="/Home/Privacy">ê°ì¸ì ë³´ì²ë¦¬ë°©ì¹¨</a> 1283 </div> 1284 </div> 1285 <div class="copyright">COPYRIGHT©INNOCEAN WORLDWIDE. ALL RIGHTS RESERVED</div> 1286 </div> 1287 </footer> 1288 </div> 1289 1290 <div class="layer-popup common-season15--popup" id="systemAlertPopup"> 1291 <div class="popup-container small"> 1292 <div class="popup-content"> 1293 <div class="popup-inner"> 1294 <p id="systemAlertType2Popup_Desc" class="common-alert--text"></p> 1295 <button type="button" id="systemAlertTypePopup_Confirm" class="common-alert--btn">íì¸</button> 1296 </div> 1297 </div> 1298 </div> 1299 </div> 1300 1301 1302 <div class="layer-popup common-season15--popup" id="systemConfirmPopup"> 1303 <div class="popup-container small"> 1304 <div class="popup-content"> 1305 <div class="popup-inner"> 1306 <p id="systemConfirmPopupPopup_Desc" class="common-alert--text"></p> 1307 <div class="common-button--wrap"> 1308 <button type="button" id="systemConfirmPopup_cancel" class="common-alert--btn cancel">ì·¨ì</button> 1309 <button type="button" id="systemConfirmPopup_Confirm" class="common-alert--btn">íì¸</button> 1310 </div> 1311 </div> 1312 </div> 1313 </div> 1314 </div> 1315 1316
1316<script> 1317 const alertPop = { 1318 alert: function (message, confirmCallback) { 1319 1320 $("#systemAlertPopup").find(".btn-popup-close").off("click").on("click", function () { 1321 if (confirmCallback != undefined && confirmCallback != null) { 1322 confirmCallback(); 1323 } 1324 layerPopup.closePopup('systemAlertPopup'); 1325 }); 1326 1327 $("#systemAlertTypePopup_Confirm").off("click").on("click", function () { 1328 if (confirmCallback != undefined && confirmCallback != null) { 1329 confirmCallback(); 1330 } 1331 layerPopup.closePopup('systemAlertPopup'); 1332 }); 1333 1334 $("#systemAlertType2Popup_Desc").html(message.replace(/\n/g, '<br />')); 1335 layerPopup.openPopup('systemAlertPopup', true); 1336 }, 1337 confirm: function ( message, confirmCallback, cancelCallback) { 1338 1339 $("#systemConfirmPopup_Confirm").off("click").on("click", function () { 1340 if (confirmCallback != null && confirmCallback != undefined) { 1341 confirmCallback(); 1342 } 1343 }); 1344 $("#systemConfirmPopup_cancel").off("click").on("click", function () { 1345 if (!cancelCallback != null && cancelCallback != undefined) { 1346 cancelCallback(); 1347 } 1348 layerPopup.closePopup('systemConfirmPopup'); 1349 }).show(); 1350 1351 $("#systemConfirmPopupPopup_Desc").html(message.replace(/\n/g, '<br />')); 1352 layerPopup.openPopup('systemConfirmPopup', true); 1353 } 1354 } 1355 </script>
1355 1356 1357 1358
1358<script src="/bundles/univ?v=DCnMYzdlBGtTwc8hQHj3wr-qeM0fxRaGeQvNMaoET8s1"></script>
1358 1359 1360 1361 <!-- Statistics --> 1362 <!-- êµ¬ê¸ -->
1363<script type="text/javascript">
vendor: 434 bytes, lines 1363-1371
1363 1364 (function (i, s, o, g, r, a, m) { 1365 i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { 1366 (i[r].q = i[r].q || []).push(arguments) 1367 }, i[r].l = 1 * new Date(); a = s.createElement(o), 1368 m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) 1369 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); 1370 1371 ga('create', '
1371UA-47173107-3
vendor: 42 bytes, lines 1371-1372
1371', 'auto'); 1372 ga('send', 'pageview');
1373</script>
1373 1374 1375<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 1375-1376
1375 1376<script async src="https://www.googletagmanager.com/gtag/js?id=
1376UA-118683192-1
vendor: 13 bytes, line 1376
1376"></script>
1377<script> 1378
vendor: 147 bytes, lines 1378-1382
1378window.dataLayer = window.dataLayer || []; 1379 function gtag() { dataLayer.push(arguments); } 1380 gtag('js', new Date()); 1381 1382 gtag('config', '
1382UA-118683192-1
vendor: 5 bytes, line 1382
1382');
1383</script>
1383 1384 1385 1386 1387 1388<!-- Facebook Pixel Code -->
1389<script>
vendor: 426 bytes, lines 1389-1398
1389 1390 !function(f,b,e,v,n,t,s) 1391 {if(f.fbq)return;n=f.fbq=function(){n.callMethod? 1392 n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 1393 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 1394 n.queue=[];t=b.createElement(e);t.async=!0; 1395 t.src=v;s=b.getElementsByTagName(e)[0]; 1396 s.parentNode.insertBefore(t,s)}(window, document,'script', 1397 'https://connect.facebook.net/en_US/fbevents.js'); 1398 fbq('init', '
1398450970312769297
vendor: 34 bytes, lines 1398-1399
1398'); 1399 fbq('track', 'PageView');
1400</script>
1400 1401<noscript><img height="1" width="1" style="display:none" 1402 src="https://www.facebook.com/tr?id=450970312769297&ev=PageView&noscript=1" 1403/></noscript> 1404<!-- End Facebook Pixel Code --> 1405</body> 1406</html> 1407
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.