@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output, 
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; line-height: 1.1; text-align: center; font-family: 'Open Sans', sans-serif; background:#000;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 700;  font-family: 'Open Sans';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'Open Sans'; display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}

.mobile {display:none;} 
.s_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}

.inner {max-width:1620px; margin-left:auto; margin-right:auto;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

.cha {position:absolute; animation-fill-mode: forwards !important; /* opacity:0; */ }
.obj {position:absolute;}
.sun {top:0; right:23%; animation: sway 4s infinite linear;  width:23.6rem;}
.cha07_01 {left:13.4%; top:9rem; z-index:4;}
.cha07_02 {right:8.2%; top:11.8rem; z-index:4;}
.cha06 {left:46px; bottom:0;}
.cha05 {right:0; bottom:0;}
/* .cha04_01 {left:187px ; bottom:3rem;}
.cha04_02 {right:45px; bottom:3rem;} */
.cha03 {left:4rem; top:-12rem; z-index:1; max-width:none;}
.cha02 {right:-424px; bottom:-8rem;}
.leaf {position:absolute; top:0;}

.animated .cha02 {animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.animated .cha03 {animation: fid 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);}
.animated .cha05 {animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.animated .cha06 {animation: fil 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.sec_tit {font-family: 'Metal Mania'; font-size:40px; color:#000000; letter-spacing:0.04em; position:relative; z-index:2;}
.sec_tit02 {font-size:20px; font-weight:700; letter-spacing:-0.01em; color:#a31d21; text-transform:uppercase; margin-top:2.7rem; position:relative; z-index:2; line-height:1.2;}
.bird {position:absolute; z-index:1;}
.bird_l {left:33%; top:11.7rem;}
.bird_r {right:8%; top:11.3rem;}

.container {overflow:hidden; position:relative; background:#fff;}
.all_wrap {overflow:hidden;}

header { text-align:left; position:absolute; top:0; left:0; right:0;   z-index: 20; padding:4rem 3rem 0;}
header .btn_today {position:absolute; top:3rem; right:3rem; width:24rem; height:7.5rem; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#ffffff; text-transform:uppercase; }
header .btn_today:before , header .btn_today:after {content:''; display:block; position:absolute;}
header .btn_today:before {top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/hwarang/bg_today.png') 0 0 no-repeat; opacity:0.57;}
header .btn_today:after {width:24.1rem; height:7rem; top:50%; left:50%; transform:translate(-48% , -42%); background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hwarang/bg_today_img.png'); z-index:-1;}
header .btn_today span:before {content:''; display:inline-block; vertical-align:middle; margin-right:2rem; width:12px; height:12px; background-repeat:no-repeat; background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/2025/hwarang/today_close.png');} 
header .btn_today:hover {color:#ffbdbd;}
header .btn_today:hover:before {opacity:1;}
header .btn_today:hover:after {background-position:0 -7rem;}
header .btn_today:hover span:before {background-position:0 -12px;}

.item_wrap {position:relative;  z-index:4; padding-top:4.6rem;}
.item_wrap .swiper-pagination {position:relative; margin-top:3rem;}
.item_wrap .swiper-pagination:before {content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -46%); background:url('/images/common/event/2025/hwarang/bg_dot.png') 0 0 no-repeat; width:77.9rem; height:6.2rem; background-size:100% auto;}
.item_wrap .swiper-pagination-bullet {z-index:1; font-size:13px; color:#fff; font-weight:600;  font-family:'Roboto'; letter-spacing:0.04em; position:relative; width:auto; height:auto; margin:0 1rem !important; background:none; opacity:1 !important;}
.item_wrap .swiper-pagination-bullet:before {z-index:-1; content:''; display:none; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:3.9rem; height:3.7rem; background:url('/images/common/event/2025/hwarang/bullet_on.png') 0 0 no-repeat;}
.item_wrap .swiper-pagination-bullet-active {color:#ffbebe;}
.item_wrap .swiper-pagination-bullet-active:before {display:block;}
.item_wrap .swiper-pagination-bullet:hover {color:#ffbebe;}
.item_wrap .swiper-pagination-bullet:hover:before {display:block;}
.item_wrap .swiper-pagination-bullet-active:hover {color:#ffbebe;}
.item_wrap .swiper-pagination-bullet-active:hover:before {display:block;}
.swiper-button-next, .swiper-button-prev {z-index: 11; background-size:100% auto !important; margin-top:0;  top:50%; margin-top: -4.7rem; font-size:0; display:block !important; height:8.5rem;  background-color:rgba(255, 255, 255, 0); width:8.1rem; background-repeat:no-repeat; background-position:0 0; position:absolute; cursor:pointer;}
.swiper-button-prev {left:-3.2rem; background-image:url('/images/common/event/2025/hwarang/btn_l.png');}
.swiper-button-next {right:-4.5rem; background-image:url('/images/common/event/2025/hwarang/btn_r.png');}
.swiper-button-next:hover, .swiper-button-prev:hover  {background-position:0 -8.5rem;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity:0.7; background-position:0 -5.6rem;opacity:0; display:none;}
.item_wrap .swiper-container-horizontal>.swiper-scrollbar {display:none; overflow: visible; border-radius:0; background:rgba(0, 0, 0, 0.5); bottom:0; height:3rem; border-top:1px solid rgba(246, 199, 214, 0.5); border-bottom:1px solid rgba(246, 199, 214, 0.5); padding:.4rem 0.2rem;  margin-right:2px; left:20%; width:59%;}

.item_wrap .swiper_wrap {position:relative;} 
.item_wrap .item_list li {width:20%;  position:relative; padding:0 1.3rem;}
.item_wrap .item_list li .con {position:relative;}
.item_wrap .item_list li .con .item_box {position:relative; height:auto !important;}
.item_wrap .item_list li .con .item_box:after {content:''; display: block; padding-bottom: 98.1%;}
.item_wrap .item_list li .con .item {padding-top:21.4%; position:absolute; top:0; bottom:0; left:0; right:0; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hwarang/bg_free.png'); background-size:100% auto;}
.item_wrap .item_list li .con .item .pic {overflow:hidden; margin:0 auto; text-align:center; width: 62.3%; position:relative;}
.item_wrap .item_list li .con .item .pic img {max-width:100%;}
.item_wrap .item_list li .con .item .name {font-size:12px; color:#000; font-weight:600; font-family:'Roboto'; letter-spacing:0.01em; height:40%; width:100%; padding: 1.2rem 16% 0; text-transform:uppercase; line-height: 1.2;}
.item_wrap .item_list li .con .item .name font {color:#ff0000;}
.item_wrap .item_list li .con .item .name span {color:#e86c6c;}
.item_wrap .item_list li .con .item_box.no_item {position:relative;}
.item_wrap .item_list li .con .item_box.no_item > div {position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/hwarang/no_item.png') center center no-repeat, url('/images/common/event/2025/hwarang/bg_free.png') center center no-repeat; background-size:auto, 100% auto;}
.item_wrap .item_list li .con .level {padding-right:2rem; margin:1.5rem auto 2rem; color:#fff; font-size:24px; font-family: 'Metal Mania'; letter-spacing:0.04em; width:96px; height:36px; background:url('/images/common/event/2025/hwarang/bg_lv.png') 0 0 no-repeat; background-size:100% auto; display:flex; align-items:center; justify-content:center; text-transform:uppercase; }

.item_wrap .item_list li .con .item_box.prem .item {background-image:url('/images/common/event/2025/hwarang/bg_prem.png');}

.item_wrap .it_tit {padding-bottom: 1%; font-size:16px; color:#000000; letter-spacing:0.05em; font-family: 'Metal Mania'; text-transform:uppercase; position:absolute; display:inline-block; left:-11.3rem; top:-5%; width:11.1rem; height:32.2rem; background:url('/images/common/event/2025/hwarang/it_tit.png') center center no-repeat; display:flex; align-items:center; justify-content:center;}
.item_wrap .it_tit span {background: linear-gradient(to bottom, #fff , #b7c6ff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.item_wrap .it_tit.pre { top:auto; bottom:-1%; background: url(/images/common/event/2025/hwarang/it_tit_prem.png) center center no-repeat; padding-bottom: 0; padding-top: 1.5%;}
.item_wrap .it_tit.pre span {background: linear-gradient(to bottom, #fff , #ffccdd);}

footer {width: 100%; padding-bottom:5rem; z-index: 3; position:relative; position:absolute; left:0; right:0; bottom:0;}
footer:before {content:''; display:block; position:absolute; left:0; right:0; top:-11rem; height:11.4rem; background:url('/images/common/event/2025/hwarang/ptn_line.png') 0 0 repeat-x; background-size:auto 100%;}
footer > img {margin-bottom: 2rem;}
footer .footer {font-size: 14px; color:#00286b;; font-weight:600; position: relative; z-index: 2; letter-spacing:0.02em;}
footer .footer .cs > a {color:#a31d21;; font-weight:600;}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 0.8rem; color:#225395;}

.btn_top {padding:4px 0 0 4px; text-align:left; transition:none; position:fixed; z-index:11; right:3.5rem; bottom:3.2rem; display:block; width:6.5rem; height:7.6rem; font-size:14px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; text-transform:uppercase; background-image:url('/images/common/event/2025/hwarang/btn_top.png'); background-repeat:no-repeat; background-position:0 0; background-size:cover;}
.btn_top:hover {background-repeat:no-repeat; background-position:0 -7.6rem; color:#ffbebe;}

/* pop-up */
.dimmed {display:none; width: 100%; height: 100%;  background:#fff; opacity: 0.5; filter: alpha(opacity=50); position: fixed; left: 0;  top: 0;     z-index: 99;}
.pop-up {display:none; left:50%; top:50%; width:100%; margin-top:3.4rem; max-width:1200px; transform:translate(-50%, -50%); position: fixed;  z-index:100;}
.pop-up .pop-layout {position:relative; height:100%;}
.pop-up .pop-layout > h2 {letter-spacing:0.01rem; position:relative; color:#fff; font-size:20px; font-weight:700; padding:1.7rem; background:#689aff; top: -1px;}
.pop-up .pop-close {z-index:1; position:absolute; top:-8rem; right:0; transition:none; width:6.5rem; height:7.6rem; font-size:0; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hwarang/pop_close.png'); background-size:100% auto;}
.pop-up .pop-close:hover {background-position:0 -7.6rem;}
.pop-up .video_wrap {position:relative; background: #fff;}
.pop-up .video_wrap:before {content:''; display:block; position:absolute; width:110.584%; height:107.112%; background:url('/images/common/event/2025/hwarang/frame_vod.png') 0 0 no-repeat; background-size:100% 100%; top: -4.8%;}
.pop-up .video_wrap .video {overflow: hidden; position: relative;  height: 0;  padding-top: 56.25%; width:100%; }
.pop-up .video_wrap .video iframe {position: absolute; top:0; left: 0; width: 100%; height:100%;}


.section01 {padding:26.5rem 0 20rem; background:url('/images/common/event/2025/hwarang/bg01.jpg') center center no-repeat; position:relative; background-size:cover; overflow:hidden; text-align:left;}
.section01:before {z-index: 3; content:''; display:block; position:absolute; transform:translate(-50% , 0); left:50%; min-width:2568px; width:100%; bottom:0; height:26.5rem; background:url('/images/common/event/2025/hwarang/bg01_cover_l.png') 0 0 no-repeat , url('/images/common/event/2025/hwarang/bg01_cover_r.png') right 0 no-repeat;}
.section01:after {content:''; display:block; position:absolute; left:0; width:400em; top:0; bottom:0;  background:url('/images/common/event/2025/hwarang/cloud02.png') 0 0 no-repeat; animation: cloudLoop 200s linear infinite;}
.section01 .img { display:inline-block; position:absolute; top:-11rem; left:50%; margin-left:-694px; z-index:2;}
.section01 .img img {max-width:none;}
.section01 .title { z-index:2; display:inline-block; position:relative; margin-left:5rem; text-align:center; max-width:100%;}
.section01 .title .date {display:block; color:#ffffff; font-size:24px; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; text-shadow:0 2px 0 rgba(0, 0, 0, 0.6); position:absolute; bottom:15%; padding-right:20%; left:0; right:0;}
.leaf_wrap {content:''; display:block; position:absolute; left:0; height:100em; right:0; top:0;  background:url('/images/common/event/2025/hwarang/leaf.png') center 0 no-repeat; animation: leafLoop 7s linear  , float 3s 3.5s ease-out infinite;}
.section01.animated .img {animation: fir 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section01.animated .title {animation: zoomIn 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);}


.section02 {background:url('/images/common/event/2025/hwarang/bg02.jpg') center 0 no-repeat; background-size:cover;}
.section02 .inner {max-width:1220px; position:relative; top:-7.9rem;}
.section02 .ex_wp { position:relative; z-index: 3;}
.section02 .explan {text-align:left;}
.section02 .explan ul {display: flex; align-items: flex-end; justify-content: space-around;}
.section02 .explan li {display:inline-block; z-index:1; position:relative; vertical-align: bottom; text-align:center;}
.section02 .explan .no01:before {z-index:-1; content:''; right:-9.2rem; top:9.6rem; display:block; position:absolute; width:27.9rem; height:41.6rem; background:url('/images/common/event/2025/hwarang/img_bamboo.png') 0 0 no-repeat; background-size:100% auto;}
.section02 .explan .desc {min-height:75px;}
.section02 .explan .desc .tit {font-family:'Metal Mania'; font-size:34px;  color:#b7262a; letter-spacing:0.04em; text-shadow: 0 2px 2px #fff; }
.section02 .explan .desc .txt {font-size:20px; color:#000000; letter-spacing:-0.04em; font-weight:700; margin-top:2px;}
.section02 .explan .no01 .tit {color:#002a63;}
.section02 .explan .no02 .con {position:relative;}
.section02 .explan .no02 .img {position:relative; display:inline-block;}
.section02 .explan .no02 .vod {position:absolute; overflow:hidden; top:50%; left:50%; width: 80%; height: 68%; transform: translate(-50%, -56%); border-radius:50%;}
.section02 .explan .no02 .vod video {height: 100%; left: 50%; top:50%; position: relative; transform: translate(-50%, -50%);}
.section02 .explan .no02 .desc {margin-top:0.4rem;}
.section02 .weapon {margin-top:2.3rem;}
.section02 .weapon .tit {margin-bottom:6.3rem;}
.section02 .weapon ul {display:inline-block; position:relative; margin-left:-4rem;}
.section02 .weapon ul li {display:inline-block; position:relative; vertical-align:top; background:url('/images/common/event/2025/hwarang/bg_wp_item.png') center center no-repeat; margin:2rem 0 2rem 4rem;}
.section02 .weapon img {position:relative;}
.section02 .weapon .desc {position:absolute; bottom:0; left:3.6rem; right:3.6rem; text-align:left; padding:0 0 3rem;}
.section02 .weapon .desc:before {content:''; display:none; position:absolute; top:0; left:0; width:4.2rem; height:4.6rem; background:url('/images/common/event/2025/hwarang/in_link.png') 0 0 no-repeat;}
.section02 .weapon .desc .name {font-size:14px; color:#000000; font-weight:700; letter-spacing:-0.01em; line-height:1.4;}
.section02 .weapon .desc .name span {display:block; color:#a31d21;}
.section02 .weapon .desc .txt {font-weight:600; color:#923a50; font-size:13px; letter-spacing:-0.02em; margin-top:0.3rem;}
.section02 .weapon .desc .txt a {color:#923a50; font-weight:600;}
.section02 .weapon .desc .txt a:hover {text-decoration:underline;}
.section02 .weapon .wp03 .desc { padding-left:53px;}
.section02 .weapon .wp03 .desc:before {display:block;}
.section02 .weapon .wp03 .desc .name span {display:inline;}
.section02 .info {margin-top:3rem; position: relative;}
.section02 .info .tit {z-index:1; font-family: 'Metal Mania'; font-size:34px; color:#000000; letter-spacing:0.04em; position:relative;}
.section02 .info .tit:before {z-index:-1; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:54.6rem; height:3.7rem; background:url('/images/common/event/2025/hwarang/bg_tit.png') 0 0 no-repeat; background-size:100% auto;}
.section02 .info .tit02 {font-size:20px; color:#000000; letter-spacing:-0.03em; font-weight:700; line-height:1.2; text-transform:uppercase; margin:5px 0 1.6rem;}
.section02 .info span {color:#a31d21;}
.section02 .info ul {display:inline-block;}
.section02 .info ul li {text-align:left; position:relative; padding-left:27px; margin-bottom:10px; letter-spacing:-0.01em; font-size:15px; font-weight:600; text-shadow:0.1rem 0.1rem 0 rgba(255, 255, 255, 0.6);}
.section02 .info ul li:last-child {margin-bottom:0;}
.section02 .info ul li:before {content:''; display:block; position:absolute; width:2.3rem; height:2.1rem; background:url('/images/common/event/2025/hwarang/li_dot.png') 0 0 no-repeat; top:0; left:0;}
.section02 .weapon .wp03 .desc:hover .txt span {text-decoration:underline;}

.section03 {height:861px; background:url('/images/common/event/2025/hwarang/bg03.jpg') center center no-repeat; background-size:cover; padding:6rem 0 9rem; position:relative; z-index:2;}
.section03 .inner {position:relative; max-width:1660px; height:100%;}
.section03 .pass {text-align:right;}
.section03 .pass ul {font-size:0;}
.section03 .pass li {display:inline-block; vertical-align:top; width:338px; position:relative; text-align:center;}
.section03 .pass li:before, .section03 .pass li:after {content:''; display:block; left:0; right:0; background-repeat:no-repeat; background-position:0 0;}
.section03 .pass li:before {height:112px;}
.section03 .pass li:after {height:28px;}
.section03 .pass .con {transition:all ease-in-out 0.7s 0.2s; /* height:454px; */ height:0; overflow:hidden; display:flex; align-items:center; justify-content:flex-start; flex-direction:column; background-repeat:no-repeat; background-position:0 0;}
.section03 .pass .tit {margin-top:11rem; text-shadow:0 0 15px rgba(255, 255, 255, 0.5); z-index:1; font-family: 'Metal Mania'; font-size:45px; color:#000000; letter-spacing:0.06em; position:relative;}
.section03 .pass .tit:before {z-index:-1; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-40% , -52%); width:22.7rem; height:21.8rem; background:url('/images/common/event/2025/hwarang/bg_pass.png') 0 0 no-repeat;}
.section03 .pass .for {font-size:20px; font-weight:800; color:#00416f; margin:5.4rem 0 1.4rem; position: relative; z-index: 1;}
.section03 .pass .txt {font-size:14px; font-weight:600; color:#3c3c3c; letter-spacing:-0.02em; line-height:1.5; word-break: break-word; max-width:100%;}
.section03 .pass .txt font {color:#a31d21;}
.section03 .pass .free:before {background-image:url('/images/common/event/2025/hwarang/paper_bt.png');}
.section03 .pass .free:after {background-image:url('/images/common/event/2025/hwarang/paper_bb.png');}
.section03 .pass .free .con {background-image:url('/images/common/event/2025/hwarang/paper_bm.png');}
.section03 .pass .prem {margin-top:11.7rem;}
.section03 .pass .prem:before {background-image:url('/images/common/event/2025/hwarang/paper_rt.png');}
.section03 .pass .prem:after {background-image:url('/images/common/event/2025/hwarang/paper_rb.png');}
.section03 .pass .prem .con {transition:all ease-in-out 0.7s 0.4s; background-image:url('/images/common/event/2025/hwarang/paper_rm.png');}
.section03 .pass .prem .for {color:#a31d21; margin-top:3.4rem;}
.section03 .vod {position:absolute; left:0; top:50%; transform:translate(0 , -50%); width:698px; height:502px;}
.section03 .vod:before, .section03 .vod:after {content:''; display:block; left:0; right:0; background-repeat:no-repeat; background-position:0 0;}
.section03 .vod:before {height:89px; background-image:url('/images/common/event/2025/hwarang/paper_vt.png');}
.section03 .vod:after {height:29px; background-image:url('/images/common/event/2025/hwarang/paper_vb.png');}
.section03 .vod .img {transition:all ease-in-out 0.7s; /* height:384px; */ height:0; overflow:hidden; background:url('/images/common/event/2025/hwarang/paper_vm.png') center center no-repeat; padding: 4% 8.5%;}
.section03 .vod_link {display:inline-block; position:relative; z-index:2; width:100%;}
.section03 .vod_link:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hwarang/bg_play.png'); background-size:100% auto;}
.section03 .vod_link span {font-size:24px; color:#fff; letter-spacing:0.05em; font-family: 'Metal Mania'; text-transform:uppercase; position:absolute; top:50%; left:50%; transform:translate(-62% , -40%);}
.section03 .vod_link:hover:before {background-image:url('/images/common/event/2025/hwarang/bg_play_on.png');}
.section03 .vod_link:hover span {color:#ffbebe;}
.animated .pass .con {height:454px;}
.animated .vod .img {height:384px;}

.section04 {background:url('/images/common/event/2025/hwarang/bg04.jpg') center center no-repeat; background-size:cover; position:relative; padding:6.3rem 0 12.3rem;}
.section04:before {z-index:1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/2025/hwarang/bg_grunge_lt.png') 0 0 no-repeat , url('/images/common/event/2025/hwarang/bg_grunge_lb.png') 0 bottom no-repeat, url('/images/common/event/2025/hwarang/bg_grunge_rt.png') right 0 no-repeat , url('/images/common/event/2025/hwarang/bg_grunge_rb.png') right bottom no-repeat;}
.section04 .door_wrap {position:absolute; top:0; bottom:0; left:50%; transform:translate(-50% , 0); min-width:2568px; width:100%;}
.section04 .door {position:absolute; top:50%; transform:translate(0 , -50%);}
.section04 .door_l {left:0;}
.section04 .door_r {right:0;}
.section04 .cha {opacity:0;     animation-fill-mode: forwards !important;}
.section04 .cha04_01 {left:187px; bottom:3rem;}
.section04 .cha04_02 {right:45px; bottom:3rem;}
.section04.animated .door_l {animation: fil02 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section04.animated .door_r {animation: fir02 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section04.animated .cha04_01 {animation: fil 0.7s 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section04.animated .cha04_02 {animation: fir 0.7s 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section04 .inner {max-width:1156px; position:relative;}
.section04 .motion_wrap {position:relative; margin-top:5.6rem;}
.section04 .motion_wrap .item {width:100%; height:0; position:relative; padding-top:52.4%; z-index: 1;}
.section04 .motion_wrap .item > div {width:100% !important; height:100% !important; position:absolute; top:0; left:0; display:none !important;}
.section04 .motion_wrap .item img, .section04 .motion_wrap .item canvas { width:100% !important; height:100% !important; position:absolute; top:0; bottom:0; left:0; right:0;  display:none !important;}
.section04 .motion_wrap .swiper-slide {opacity:0 !important;  }
.section04 .motion_wrap .swiper-slide.swiper-slide-active {opacity:1 !important;  }
.section04 .motion_wrap .swiper-slide.swiper-slide-active .item img, .section04 .motion_wrap .swiper-slide.swiper-slide-active .item canvas {display:block !important;}
.section04 .motion_wrap .swiper-slide.swiper-slide-active .item > div {display:block !important;}
.section04 .motion_wrap .img_3d img {position:relative;}
.section04 .motion_wrap .con {padding:2.596% 2.596%; background:url('/images/common/event/2025/hwarang/frame_item.png') center 0 no-repeat; background-size:100% auto;}
.section04 .motion_wrap .con .name {font-size:16px; padding:1% 6% 0 0; text-transform:uppercase; color:#fff; font-weight:700; width:397px; height:64px; display:flex; align-items:center; justify-content:center; background:url('/images/common/event/2025/hwarang/bg_name.png') 0 0 no-repeat; position:absolute; left:50%; top:1rem; z-index:2; transform:translate(-50% , -70%); }
.section04 .motion_wrap .con .name span {color:#ffa4a4; margin-left:6px;}
.section04 .motion_wrap .info {position:absolute; height:14%; display:flex; align-items:center; justify-content:center; flex-direction: column; top:3%; left:0; right:0; line-height:1.2; z-index:1;}
.section04 .motion_wrap .info .name {color:#f3ffa2; font-size:26px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; text-shadow:0 0 1rem #be0000;}
.section04 .motion_wrap .info .txt {color:#ffffff; }
.section04 .motion_wrap .img_3d {position:absolute; bottom:6.4%; right: 4.8%; max-width:18rem;  z-index:1;}
.section04 .motion_wrap .info .txt {font-size:15px; color:#ffffff; font-weight:700; text-transform:uppercase;}
.section04 .motion_wrap .info .txt span {color:#ffa4a4;}
.section04 .motion_wrap .info .txt a {text-decoration:underline; font-weight:700; color:#ffa4a4;}
.section04 .motion_wrap .info .txt a:hover {text-decoration:none;}

.section04 .stat {position:absolute; bottom: 8%; left: 6.2%; z-index: 1;}
.section04 .stat ul {position:relative;}
.section04 .stat li { position:relative;  font-size:12px; letter-spacing:0.04em; margin-bottom:4px;}
.section04 .stat li > div {display:inline-block; vertical-align:middle;}
.section04 .stat .txt { color:#fff; font-weight:600; width:72px; text-align:left; text-transform:uppercase;}
.section04 .stat .num {color:#ffa4a4; text-align:left; width:60px;font-weight:600; padding-left:2rem;}
.section04 .stat .graph { height:8px; position:relative;  width:10rem;}
.section04 .stat li .bar {width:100%; height:100%; opacity:0;  background:rgba(255, 255, 255, 0.3); border-radius:4px;}
.section04 .stat li .bar .on { height:100%; border-radius:4px; display:block; background:#ffa4a4;}
.section04 .stat li:last-child {margin-bottom:0;}

.section04.animated .stat li .bar {animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards;}
.section04.animated .stat li:nth-child(2) .bar {animation-delay:0.1s;}
.section04.animated .stat li:nth-child(3) .bar {animation-delay:0.2s;}
.section04.animated .stat li:nth-child(4) .bar {animation-delay:0.3s;}
.section04.animated .stat li:nth-child(5) .bar {animation-delay:0.4s;}
.section04.animated .stat li:nth-child(6) .bar {animation-delay:0.5s;}
.section04.animated .stat li:nth-child(7) .bar {animation-delay:0.6s;}
.section04.animated .stat li:nth-child(8) .bar {animation-delay:0.7s;}

.section04 .swiper-button-next, .section04 .swiper-button-prev {transition:none; text-align:left; width:21.6rem; height:21.7rem; z-index: 11; margin-top:0;  top:50%; transform:translate(0 , -50%); font-size:0; display:block !important; background-size:100% !important;  background-color:rgba(255, 255, 255, 0); position:absolute; cursor:pointer; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/2025/hwarang/bg_btn.png');}
.section04 .swiper-button-next:before, .section04 .swiper-button-prev:before {width:5.3rem; height:6rem; content:''; display:block; position:absolute; left:50%; bottom:-2rem;  transform:translate(-50% , 0); background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.section04 .swiper-button-prev {left:-23.4rem; }
.section04 .swiper-button-next {right:-23.4rem; }
.section04 .swiper-button-next:before {background-image:url('/images/common/event/2025/hwarang/btn_next.png')}
.section04 .swiper-button-prev:before {background-image:url('/images/common/event/2025/hwarang/btn_prev.png')}

.section04 .swiper-button-next .name, .section04 .swiper-button-prev .name {position:absolute; bottom:4rem; left:0; right:0; text-align:center; font-size:13px; color:#fff; font-weight:600; text-transform:uppercase;}
.section04 .swiper-button-next .name span, .section04 .swiper-button-prev .name span {color:#ffa4a4;}
.section04 .swiper-button-next:hover:before, .section04 .swiper-button-prev:hover:before {background-position:0 -6rem;}
.section04 .swiper-button-next.swiper-button-disabled, .section04 .swiper-button-prev.swiper-button-disabled {opacity:0; display:none;}
.section04 .swiper-pagination {left:50%; transform:translate(-50% , 0); text-align:center; margin-top:2.6rem;} 
.section04 .swiper-pagination-bullet {width:2.2rem; height:2.4rem; background-repeat:no-repeat; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-image:url('/images/common/event/2025/hwarang/dot.png');  margin:0 0.7rem; border-radius:0; opacity: 1; background-size:100% auto;}
.section04 .swiper-pagination-bullet-active {background-image:url('/images/common/event/2025/hwarang/dot_on.png');}

.section05 {background:url('/images/common/event/2025/hwarang/bg05.jpg') center center no-repeat; background-size:cover; position:relative; padding:7rem 0;}
.section05 .inner {max-width:1388px;}
.section05 .sec_tit {line-height:1.2;}
.section05 .swiper-scrollbar-drag {background:#599de8; border-radius:0;  border-radius:0.8rem;}
.section05 .swiper {overflow:hidden; padding: 1rem 0;}
.section05 .swiper-scrollbar {display:none;}
.section05 .inner {position:relative;}

.section06 {background:url('/images/common/event/2025/hwarang/bg06.jpg') center center no-repeat; background-size:cover; padding:7rem 0; position:relative;}
.section06 .inner {max-width:1450px;}
.section06 .item_shop {position:relative;}
.section06 .item_shop ul {margin-left:-3rem;}
.section06 .item_shop li {width:25%; padding-left:3rem; display:inline-block; vertical-align:top;}
.section06 .item_shop .con {background:url('/images/common/event/2025/hwarang/bg_ps.png') center center no-repeat; background-size:100% auto; position:relative;}
.section06 .item_shop .name {font-size:16px; color:#00286b; font-weight:700; letter-spacing:-0.01em; text-transform:uppercase; position:absolute; left:19%; right:19%; top:33%; text-align:right;}
.section06 .item_shop img {animation: up 1.5s infinite;}
.section06 .item_shop  li:nth-child(2) img {animation-delay:0.1s;}
.section06 .item_shop  li:nth-child(3) img  {animation-delay:0.2s;}
.section06 .item_shop  li:nth-child(4) img  {animation-delay:0.3s;}
.section06 .item_shop  li:nth-child(5) img  {animation-delay:0.4s;}
.section06 .item_shop  li:nth-child(6) img  {animation-delay:0.5s;}
.section06 .item_shop  li:nth-child(7) img  {animation-delay:0.6s;}
.section06 .item_shop  li:nth-child(8) img  {animation-delay:0.7s;}
.section06 .item_shop .tac .name {text-align:center;}


.section07 {background:url('/images/common/event/2025/hwarang/bg07.jpg') center 0 no-repeat; background-size:cover; padding:6.5rem 0 34rem; position:relative; overflow: hidden;}
.section07:before {content:''; display:block; position:absolute; left:0; width:400em; top:2.6rem; height:22.4rem;  background:url('/images/common/event/2025/hwarang/cloud.png') 0 center no-repeat; z-index:1; animation: cloudLoop 300s linear infinite; background-size:auto 100%;}
.section07 .inner:before, .section07 .inner:after {content:''; display:block; position:absolute; width:calc((100% - 1220px) / 2); height:45.2rem;  top:17rem; max-width:645px;}
.section07 .inner:before {left:0; background:url('/images/common/event/2025/hwarang/wall_l.png') right 0 no-repeat;}
.section07 .inner:after {right:0; background:url('/images/common/event/2025/hwarang/wall_r.png') 0 0 no-repeat;}
.section07 .cha {opacity: 0; animation-fill-mode: forwards !important;}

.section07.animated .inner:before {animation: fil03 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section07.animated .inner:after {animation: fir03 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section07.animated .cha07_01 {animation: fil 0.7s 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}
.section07.animated .cha07_02 {animation: fir 0.7s 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;}

.section07 .sec_tit02 {color:#1f518c; position:relative; z-index:1;}
.section07 .btns_sns {font-size:0; margin-top:11rem; position:relative; z-index:4;}
.section07 .btns_sns .sns_li {display:inline-block; margin:1.6rem; vertical-align:top; }
.section07 .con {transition:all ease-in-out 0.2s; position:relative; text-align:center}
.section07 .con .name {transition:all ease-in-out 0.2s; color:#225395; font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; text-shadow:0 2px 2px #fff; margin-top:2.4rem;}
.section07 .con .bg {width:21.8rem; height:21.7rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.section07 .con:hover {animation: float 1.5s ease-in-out infinite;}
.section07 .con:hover .bg {background-position:0 -21.7rem;}
.section07 .con:hover .name {color:#1f344f; text-shadow:none;}

.section07 .sns_insta .con .bg {background-image:url('/images/common/event/2025/hwarang/sns_it.png');}
.section07 .sns_facebook .con .bg {background-image:url('/images/common/event/2025/hwarang/sns_fb.png');}
.section07 .sns_discord .con .bg {background-image:url('/images/common/event/2025/hwarang/sns_dc.png');}
.section07 .sns_youtube .con .bg {background-image:url('/images/common/event/2025/hwarang/sns_yb.png');}
.section07 .sns_tiktok .con .bg {background-image:url('/images/common/event/2025/hwarang/sns_tt.png');}

/* .section07 .sns_li:nth-child(2) {animation-delay:0.3s !important;}
.section07 .sns_li:nth-child(3) {animation-delay:0.6s !important;}
.section07 .sns_li:nth-child(4) {animation-delay:0.9s !important;}
.section07 .sns_li:nth-child(5) {animation-delay:1.2s !important;} */


/**** ie *****/
.ie .item_wrap .swiper-pagination {left:0; right:0;}

@media screen and (max-width: 2400px) {	

}

@media screen and (max-width: 2000px) {	
.cha05 {right: -90px; bottom: -90px; width: 640px;}
.cha06 {left: -145px; width: 520px;}	
.cha07_01 {left:3.45%;}
.cha07_02 {right:0;}
	
.section04 .door_wrap { min-width: 2330px;}

}

@media screen and (max-width: 1800px) {
.cha07_01 {left:0;}
.cha07_02 {right:-130px;}	
}	

@media screen and (max-width: 1668px) {
.cha02 {right:-22%; bottom:-14rem;}

	
.inner {padding-left:2.4rem; padding-right:2.4rem;}
.section04 .door_wrap {min-width:2160px;}


}


@media screen and (max-width: 1600px) {
.cha05 , .cha06, .cha07_01, .cha07_02 {display:none;}	

.section01 .img {margin-left:-644px;}
.section01 .title {margin-left:0;}

.section03 {height:1246px;}
.section03 .pass {text-align:center;}
.section03 .vod {position:relative; top:auto; left:50%; transform:translate(-50% , 0);}
.section03 .pass li {margin:0 1.2rem;}
.section03 .pass .prem {margin-top:0;}
.section04 .door_wrap {min-width: 2010px;}
.section04 .inner {max-width:1060px;}
.section04 .swiper-button-next, .section04 .swiper-button-prev {width:17.6rem; height:17.7rem;}
.section04 .swiper-button-prev {left: -19.4rem;}
.section04 .swiper-button-next {right: -19.4rem;}
.section04 .swiper-button-next .name, .section04 .swiper-button-prev .name {bottom:3.4rem;}

.item_wrap {padding-left:7.2rem; padding-right:2.4rem;}
.item_wrap .item_list li {padding:0 1rem;}
.swiper-button-prev {left:3.6rem;}
.swiper-button-next {right:0;}


}

@media screen and (max-width: 1440px) {	
.cha02 {right:-15%;}
	
header .bi img {width:200px;}
.inner {max-width:100%; padding-left:2.4rem; padding-right:2.4rem;}
.swiper-button-prev {left:7.2rem;}

.item_wrap {padding-left:10.8rem;}
.item_wrap .it_tit {left:-11.8rem;}

.section04 .inner {max-width:900px;}
.section04 .stat {left:4.2%;}
.section04 .stat li {margin-bottom:6px;}
.section04 .door_wrap {min-width:1800px;}
.section04 .cha04_01 {left:200px;}
.section04 .cha04_02 {right:24px;}
.section04 .motion_wrap .info .txt {font-size:14px;}
.section04 .motion_wrap .img_3d img {max-width:12rem;}

.section06 .item_shop ul {margin-left:0;}
.section06 .item_shop li {padding-left:0;}



}

@media screen and (max-width: 1360px) {	




}	


@media screen and (max-width: 1280px) {	
.cha02 , .cha03 {display:none;}
	
	
.section05 .swiper-scrollbar {display:block; height:2rem; bottom:-4rem;  background:#000; border:0.2rem solid #599de8; position:relative; border-radius:1.5rem;    overflow:hidden;    z-index: 1; padding:0.3rem;}
.item_wrap .swiper-pagination {display:none;}
.item_wrap {padding-left:12.8rem;}
.item_wrap .item_list li {padding:0 5px;}

.item_wrap .item_list li .con .item .name br {display:none;}
.section05 .swiper-button-next, .section05 .swiper-button-prev {display:none !important;}
.pop-up {max-width:none; left:4.8rem; right:4.8rem; transform:translate(0 , -50%); width:auto;} 

.section01 .img {top:0; margin-left:0; left:auto;}
.section01 .img img {width:100%;}
.section01 {padding-bottom:17rem;}
.section01 .img {left:0; top:auto; bottom:0;}
.section01 .img img {width:120%;}
.section01 .title {margin-top: 15%; left:12%; top:4.5rem;}

.section04 .swiper-button-next, .section04 .swiper-button-prev {width:12.6rem; height:12.7rem;}
.section04 .swiper-button-next:before, .section04 .swiper-button-prev:before {width:4.4rem; height:5rem;}
.section04 .swiper-button-next:hover:before, .section04 .swiper-button-prev:hover:before {background-position:0 -5rem;}
.section04 .swiper-button-prev {left: -13.4rem;}
.section04 .swiper-button-next {right: -13.4rem;}
.section04 .swiper-button-next .name, .section04 .swiper-button-prev .name {font-size:11px; bottom:2.4rem;}

.section06 {padding-bottom:10rem;}
.section06 .item_shop li {width:calc(100% / 3); margin-bottom: -2%;}
.section06 .item_shop .tac .name {left:0; right:0;}





}


@media screen and (max-width: 1150px) {
.section04 .swiper-button-prev {left: -7.4rem;}
.section04 .swiper-button-next {right: -7.4rem;}	
}
	
@media screen and (max-width: 1023px) {
.item_wrap .item_list .name {padding:0 7%;}



.sec_tit:before, .sec_tit:after {width:70rem; height:1.8rem;}


.section01 {padding: 27.4% 0 20.7%;}
.section01 .img {left:-10%;}

.section02 .explan ul {display:block; text-align:center;}
.section02 .explan li {width: 50%;}
.section02 .explan .img {width:100%;}
.section02 .explan .no02 .img {padding:0 3.9%;}

.section03 {height:auto;} 

.section04 .door_wrap {display:none;}
.section04 .motion_wrap {padding-bottom:7rem;}
.section04 .stat {position:relative; bottom:auto; left:auto; text-align:left; margin:2rem auto 0; min-height:157px;}
.section04 .page02 .stat {left:auto; text-align:left;}
.section04 .swiper-button-next, .section04 .swiper-button-prev {top:auto; bottom:-15rem; left:auto; right:0; transform:none;}
.section04 .swiper-button-prev {right:auto; left:0;}
.section04 .motion_wrap .info {margin-top:7%; position:relative; top:auto; padding:0; left:auto; right:auto;}
.section04 .motion_wrap .info .txt {color:#000;}
.section04 .motion_wrap .info .txt span {color:#a31d21;}
.section04 .motion_wrap .info .txt a {color:#a31d21;}
.section04 .motion_wrap .img_3d {top:3%; bottom:auto; right:3%;}
.section04 .stat .graph {width:calc(100% - 140px);}
.section04 .stat li {margin-bottom:1.2rem;}
.section04 .stat ul {min-height:200px;}
.section04 .stat .txt {color:#000;}
.section04 .stat .num {color: #a31d21;}
.section04 .stat li .bar .on {background:#a31d21;}

.section06 .item_shop .name {font-size:14px;}
}



/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}	
.mobile {display:block;}
.btn_top {font-size:2.1rem;}

.bird_l {width:23.8rem;}
.bird_r {width:37.5rem;}

.sec_tit {font-size:4.9rem;}
.sec_tit02 {font-size:2.9rem;}

header .bi img {width:24rem;}
header .btn_today {font-size:1.7rem; width:26rem; height:8.1rem;}
header .btn_today:before , header .btn_today:after {background-size:100% auto;}
header .btn_today span:before {width:9px; height:9px; background-size:100% auto; margin-right:1rem;}
header .btn_today:hover span:before {background-position:0 -9px;}

.item_wrap {padding-left:8.4rem; padding-right:0;}
.item_wrap .it_tit {background-size:100% auto !important; left:-9.8rem; width:9rem; height:26.1rem; top:5%;}
.item_wrap .it_tit.pre {bottom:5%;}
.item_wrap .item_list li {padding:0;}
.item_wrap .item_list li .con .item .name {font-size:1.9rem;}
.item_wrap .item_list li .con .item .name br {display:none;}
.item_wrap .it_tit span {font-size:2rem;}
.item_wrap .item_list li .con .level {font-size:3.3rem;}
.item_wrap .item_list li .con .item_box.no_item > div {background-size:100% auto;}

footer > img {width:100px; }
footer .footer {position: relative; z-index: 2; font-size:2rem;}




.section01:before {min-width:640px; background-size:auto 26.5rem;}
.section01 .title .date {font-size:3rem;}
.leaf_wrap {    background-size: 270% auto;}

.section02 .explan .desc .tit {font-size:4.3rem;}
.section02 .explan .desc .txt {font-size:2.9rem;}
.section02 .weapon ul li {background-size:100% 100%;}
.section02 .weapon .desc {left:5.8rem; right:5.8rem;}
.section02 .weapon .desc .name {font-size:2.3rem;}
.section02 .explan .no02 .vod {height:64%; transform: translate(-50%, -64%);}
.section02 .info .tit {font-size:4.3rem;}
.section02 .info .tit02 {font-size:2.9rem;}
.section02 .weapon ul {padding:0 4.8rem;}
.section02 .info ul li {font-size:2.4rem; padding-left:20px;}
.section02 .info ul li:before {background-size:100% auto; top:2px;}
.section02 .weapon .desc:before {background-size:100% auto; top:2px;}
.section02 .weapon .wp03 .desc {padding-left:30px;}
.section02 .weapon .desc .txt {font-size:2.2rem;}

.section03 .pass .tit {font-size:5rem;}
.section03 .pass .tit:before {background-size:100% auto;}
.section03 .pass .for {font-size:2.9rem;} 
.section03 .pass .txt {font-size:2.3rem;}
.section03 .pass li {width:210px;}
.section03 .pass li:before {height:70px; background-size:100% auto;}
.section03 .pass .con { background-size:100% auto; padding:6rem 3.6rem 0;}
.section03 .pass li:after {height:17px; background-size:100% auto;}
.section03 .pass .txt br {display:none;}
.section03 .vod {width:420px; height:302px;}
.section03 .vod:before {height:54px; background-size:100% auto;}
.section03 .vod .img { background-size:100% auto;}
.section03 .vod:after {height:17px; background-size:100% auto;}
.section03 .vod_link span {font-size:3.3rem;}
.animated .pass .con {height:282px;}
.animated .vod .img {height:231px;}
.section03 .pass .tit {margin-top:0;}

.section04:before {background-size:84.2rem auto, 92rem auto, 46.6rem auto, 95.6rem auto;}
.section04 .motion_wrap {padding-bottom:4rem;}
.section04 .motion_wrap .con .name {font-size:2.5rem; background-size:100% auto; top:15px;}
.section04 .motion_wrap .info .txt {font-size:2.4rem;  word-break: break-word;}
.section04 .motion_wrap .info .txt br {display:none;}
.section04 .stat li {font-size:2.1rem;}
.section04 .swiper-button-next, .section04 .swiper-button-prev {width:17.6rem; height:17.7rem; bottom:-11rem;}
.section04 .swiper-button-next .name, .section04 .swiper-button-prev .name {font-size:2rem;}

.section05 .sec_tit {font-size:3.9rem;}
.section06 .item_shop .name {font-size:2rem; top:31%; left:18%; right:18%;}

.section07 .con .name {font-size:2.3rem;}
.section07 .btns_sns .sns_li { max-width: calc((100% - 9.6rem) / 3);  }



}

@media screen and (max-width: 560px) {
}
	
@media screen and (max-width: 500px) {
.section03 .vod {width:280px; height:202px;}
.section03 .vod:before {height:36px; background-size:100% auto;}
.section03 .vod .img {background-size:100% auto;}
.section03 .vod:after {height:12px; background-size:100% auto;}
.section03 .vod_link span {font-size:2.7rem;}

.section03 .pass li {width:160px; margin:0 3px;}
.section03 .pass li:before {height:53px;}
.section03 .pass .con { padding-top:4rem;}
.section03 .pass li:after {height:13px;}
.section03 .pass .tit {font-size:3.7rem; line-height:1;}
.section03 .pass .tit:before {width:17rem; height:16.3rem;}
.section03 .pass .for {font-size:2.1rem; margin: 2.4rem 0 1rem;}
.section03 .pass .txt {font-size:1.8rem;}
.section03 .pass .prem .for {margin-top:2rem;}

.animated .pass .con {height:215px;}
.animated .vod .img {height:154px;}

.sec_tit02 {word-break: break-word;}
.sec_tit02 br {display:none;}

.section06 .item_shop li {width:50%; margin-bottom:-8%;}

.section02 .explan .no02 .vod {height:56%; transform: translate(-50%, -70%);}


}	



@media screen and (min-width:1023px) and (max-height: 800px) {
.pop-up {max-width:50%; left:50%; right:auto; transform:translate(-50% , -50%); width:100%;}
}


@keyframes fil {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes fil02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes fil03 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fir {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}

@keyframes fir02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes fir03 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fid {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
     filter: blur(40px);
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     filter: blur(0);
    opacity: 1;
  }
}




@keyframes cloudLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
} 

@keyframes leafLoop {
  0% {
    transform: translate3d(0, -50%, 0);
  }
  100% {
    transform: translate3d(0, 50%, 0);
  }
} 

@keyframes aim {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(160deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(160deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


@keyframes up {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(2%);
    }

    100% {
        transform: translateY(0);
    }
}


@keyframes animate-width {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}



@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-1rem);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes sway {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}