@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* reset */
*, *::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 {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
}
/********************************* COMMON *********************************/

/* reset */
html { width: 100%; height: 100%; font-size: 62.5%; background:#000; overflow-x:hidden; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; }
body { width: 100%; height: auto; min-height: 100%; margin:0 auto; background:#000; color:#aaa; font-size: 1.4rem; overflow-x:hidden; line-height: 1; text-align: center; /* IOS */-webkit-text-size-adjust: none; font-family:'SN Pro';}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button,figure,figcaption { margin:0;padding:0;box-sizing:border-box;}
* {box-sizing:border-box;}
a, img, fieldset { border:0; }
dl,ul,ol,menu,li{ list-style:none; }
body {background:#000;}
body,th,td,input,select,textarea,button{color:#ccc; font-family: 'SN Pro', HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif; font-size:1.6rem;}
button {border:none; outline:none;}
a { color:#222;text-decoration:none; transition:all ease-in-out 0.2s;}
a:hover{ text-decoration:none; }
/* a:active{ background-color:transparent; } */
address,cite,code,dfn,em,var{ font-style:normal;font-weight:100; }
h1,h2,h3,h4,h5,h6 { font-weight:400;}
textarea { resize:none; }
img { line-height:0; vertical-align:top; max-width: 100%; }
form, fieldset { width:100%; display:block; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
b,strong { font-weight:400; }
ul {font-size:0;}
a {display:inline-block;}

/**/
select { -webkit-appearance: none;-moz-appearance: none;appearance: none; }
select::-ms-expand { display: none; }
/*input { -webkit-appearance: none;-moz-appearance: none;appearance: none; border:none;}
input::-ms-clear { display: none; } */
input:focus { outline: none; }
button:focus { outline: none; }
/* a:focus, input:focus, button:focus, textarea:focus {outline:1px dotted #ddd;} */
img { -ms-interpolation-mode:bicubic !important; }
i {font-style:normal;}

/* slick */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none;
-ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging{cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); transition-delay: 10ms;}
.slick-track {position: relative; top: 0; left: 0; display: block;}
.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}

/* root */
:root {
--gr_a : linear-gradient(to right, #6cf, #ff3, #f60, #f0c);
--gr_b : linear-gradient(to right, #6cf, #ff5, #f96, #f5d);
--gr_c : linear-gradient(to right, #f0c, #f60, #ff3, #6cf);
--gr_d : linear-gradient(to right, #6cf, #ff3, #f60, #f0c, #f33);
}
.link {position:absolute; left:0; bottom:0; right:0; top:0; z-index:10; font-size:0;}
.btn_box {perspective: 500px; -webkit-perspective: 500px; -moz-perspective: 500px; width:36rem; height:72px;}
.btn_box div { position: absolute; text-align: center; width: 100%; height:100%; pointer-events: none; box-sizing: border-box; display:flex; align-items:center; justify-content:center;}
.btn_box div span {font-weight:800; font-size:21px;}
.btn_box div span font {font-weight: 700;}
.btn_box div:nth-child(1) {transform: rotateX(90deg); transition: all 0.2s ease; transform-origin: 50% 50% -3.6rem; background: var(--gr_b); opacity:0;}
.btn_box div:nth-child(1) span {color:#000;}
.btn_box div:nth-child(2) {transform: rotateX(0deg); transition: all 0.2s ease; transform-origin: 50% 50% -3.6rem;}
.btn_box div:nth-child(2):before {content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; inset: 0; padding: 1px; background: var(--gr_b); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.btn_box div:nth-child(2) span {background:var(--gr_b); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.btn_box:hover div:nth-child(1) {transition: all 0.2s ease; transform: rotateX(0deg); opacity:1;}
.btn_box:hover div:nth-child(2) {transition: all 0.2s ease; transform: rotateX(-90deg); opacity:0;}
.btn_box:hover div span font {font-weight: 700;}
.inner {max-width:2340px; margin-left:auto; margin-right:auto; position:relative; z-index:2; width:100%; padding-left:3.6rem; padding-right:3.6rem;}
.item_scroll .item {opacity: 0; transform: translateY(50px); transition: transform 0.5s ease, opacity 0.5s ease;}
.item_scroll .item.visible {opacity: 1; transform: translateY(0);}

#canvas-container {position: fixed; top: 0; right: 0; width: 100%; left:0; height:100vh; z-index: 3; pointer-events: none; overflow: hidden;}
#canvas-container canvas {position:absolute; top:0; left:0;}
#canvas-container.sc1 {z-index:1;}
#canvas-container.sc7 {right:auto; width:50%; z-index:4;}
#canvas-container.sc7 canvas {transform: translate(-25%, 0);}
.box_model { position: absolute; top: 0; left: 0; bottom:0; right:0; pointer-events: auto; z-index:1; opacity:0; animation:none;}
.box_model canvas {pointer-events: auto; width:100% !important; height:100% !important;}
.active .box_model {animation:fix 0.2s 0.5s forwards;}
.section1.active .box_model {animation-delay:0s;}

.container { background:#000;}
.container main { position: relative; z-index: 2; }

.in_vod {width: 100%; position: absolute; top: 0; left: 0; bottom:0; right:0; overflow:hidden;}
.in_vod:after {content:''; display:block; position:absolute; top: 0; left: 0; bottom:0; right:0; background:rgba(0, 0, 0, 0.7); backdrop-filter:blur(5px);}
.in_vod video {min-width: 103%; min-height: 103%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

header {position:fixed; top:0; left:0; right:0; z-index:4; padding:3rem 3.6rem; text-align:center; background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); backdrop-filter:blur(5px); -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%); mask-image: linear-gradient(to top, transparent 0%, black 50%);}
header h1 {position:absolute; left:3.6rem; top:3rem;}
header nav ul {font-size:0; display:inline-block;}
header nav ul li {display:inline-block; vertical-align:middle; margin:0 2.4rem;}
header nav ul li a {position:relative; font-size:22px; color:#fff; font-weight:800; min-width:16.8rem; letter-spacing:0.01em; padding:0.8rem 2.4rem; line-height:1; overflow:hidden;}
header nav ul li a:before, header nav ul li a:after, header nav ul li a span:before, header nav ul li a span:after {content:''; display:block; transition: .2s; position: absolute;}
header nav ul li a:before, header nav ul li a:after {height: 2px; width: 100%; background:var(--gr_a);}
header nav ul li a span:before, header nav ul li a span:after {height: 100%; width: 2px;}
header nav ul li a span:before {background:#f0c;}
header nav ul li a span:after {background:#6cf;}
header nav ul li a:before {top: 0; left: -100%; transition-delay: 0s;}
header nav ul li a span:before {top: -100%; right: 0; transition-delay: .2s;}
header nav ul li a:after {bottom: 0; right: -100%; transition-delay: .3s;}
header nav ul li a span:after {bottom: -100%; left: 0; transition-delay: .4s;}
header nav ul li a:hover:before, header nav ul li a.on:before {top: 0; left: 0;}
header nav ul li a:hover span:before, header nav ul li a.on span:before {top: 0; right: 0;}
header nav ul li a:hover:after, header nav ul li a.on:after {bottom: 0; right: 0;}
header nav ul li a:hover span:after, header nav ul li a.on span:after {bottom: 0; left: 0;}
header nav ul li a:hover span, header nav ul li a.on span {background:var(--gr_a); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
header .lang {position:absolute; top:4rem; right:3.6rem; font-size:0;}
header .lang a {transition:none; position:relative; display:inline-block; vertical-align:top; font-size:19px; color:#fff; font-weight:300; letter-spacing:0.04em; text-transform:uppercase; margin-right:4.4rem;}
header .lang a:before {content:''; display:block; position:absolute; width:1px; top:50%; height:2.4rem; background:rgba(255, 255, 255, 0.5); margin-top:-1.2rem; right:-2.4rem;}
header .lang a:last-child {margin-right:0;}
header .lang a:last-child:before {display:none;}
header .lang a:hover {background:var(--gr_a); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
header.dark {background: none;}
.dark nav ul li a:before, .dark nav ul li a:after {background:#000;}
.dark nav ul li a {color:#000;}
.dark nav ul li a span:before {background:#000;}
.dark nav ul li a span:after {background:#000;}
.dark nav ul li a:hover span, .dark nav ul li a.on span {background:#000;}
.dark .lang a {color:#010101;}
.dark .lang a:before {background:#000000;}
.dark .lang a:hover {background:#aa0000;}

.galaxy { z-index: 1; position: fixed; width:100%; height:100%; pointer-events: none; background: radial-gradient(ellipse at 70% 20%, rgba(60,80,140,0.08) 0%, transparent 50%), radial-gradient(ellipse at 20% 70%, rgba(100,50,120,0.06) 0%, transparent 50%); }
.galaxy .star {position: absolute; background-color: white; border-radius: 50%; }
.galaxy .star-type1 { width: 1px; height: 1px; box-shadow: 0 0 1px 0 rgba(255,255,255,0.5), 0 0 0.3rem 1px rgba(150,200,255,0.2); animation: twinkle_one 3s ease-in-out infinite;}
.galaxy .star-type2 { width: 1px; height: 1px; box-shadow: 0 0 0.2rem 1px rgba(255,255,255,0.6), 0 0 0.5rem 0.2rem rgba(150,200,255,0.25); animation: twinkle_two 7s ease-in-out infinite;}
.galaxy .star-type3 { width: 0.2rem; height: 0.2rem; box-shadow: 0 0 0.3rem 1px rgba(255,255,255,0.5), 0 0 0.6rem 0.3rem rgba(150,200,255,0.2); animation: twinkle_three 12s ease-in-out infinite;}
.galaxy .star-type4 { width: 0.25rem; height: 0.25rem; box-shadow: 0 0 0.4rem 0.2rem rgba(255,255,255,0.8), 0 0 1rem 0.5rem rgba(150,200,255,0.4), 0 0 2rem 0.8rem rgba(100,150,255,0.15); animation: twinkle_bright 4s ease-in-out infinite;}
.galaxy.sc7 {z-index:3 !important;}

.section { height: 100vh; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.section::-webkit-scrollbar { display: none; }
.section .desc {font-weight: 500;}

.section1 {justify-content: flex-start; display: flex; align-items: center;}
.section1 .inner {height: auto;}
.section1 .main_txt {text-align:left; font-size:52px; color:#fff; font-weight:300; line-height:2.14; letter-spacing: 0.02em;}
.section1 .main_txt span {display:block;}
.section1 .main_txt span font {background:var(--gr_c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 300;}
.section1 .main_txt span i {display:inline-block;}
.section1 .main_txt span i:after {content:''; display:inline-block; vertical-align:middle; transition:all ease-in-out 0.2s; margin:0 1.2rem; width:0; height:0.2rem; background: linear-gradient(to right, #fe4d8c, #ffd310); animation:width_14 1s 3s forwards;}
.section1.active .main_txt {position:fixed; top:50%; transform:translate(0 , -50%);}

.section2 {display:block; position: relative; z-index: 2; overflow:hidden;}
.section2 .marquee-container {overflow: hidden; white-space: nowrap; width: 100%; position: relative;}
.section2 .marquee-content {display: inline-block; font-weight:900; font-size:186px; letter-spacing:0.01em;}
.section2 .marquee-content span {color:#333333;}
.section2 .marquee-content .ic::after {content:''; display:inline-block; vertical-align:middle; width:18.2rem; height:18.2rem; margin:0 0.5em; position:relative; top:-1rem; background-size:contain; background-repeat:no-repeat;}
.section2 .marquee-content .heart::after {background-image:url('/images/v2/icon_heart.png');}
.section2 .marquee-content .idea::after {background-image:url('/images/v2/icon_idea.png');}
.section2 .marquee-content .smile::after {background-image:url('/images/v2/icon_smile.png');}
.section2 .marquee-content.text-layer {mix-blend-mode:overlay;}
.section2 .marquee-content.text-layer .ic::after {visibility:hidden;}
.section2 .marquee-content.icon-layer {position:absolute; top:0; left:0;}
.section2 .marquee-content.icon-layer span {color:transparent;}
.section2 .desc .txt {font-size:25.5px; color:#000000; line-height:2.1;}
.section2 .page {position:absolute; left:0; top:0; height: 100%; width:100%; justify-content: center; display: flex; align-items: center; padding:14.4rem 0; transition: opacity 0.5s;}
.section2 .page1 {background: radial-gradient(circle, #bb00ff , #ff3399 , #ffaa00); flex-direction: column;}
.section2 .page1 .desc {display:flex; align-items:center; justify-content: space-between; width: 100%; max-width:2340px; padding-left:3rem; padding-right:3rem; margin:4rem auto 0; letter-spacing:-0.02rem;}
.section2 .page1 .desc .txt01 {text-align:left;}
.section2 .page1 .desc .txt02 {text-align:right;}
.section2 .page1 { z-index: 2; }

.section3 {display:block; position: relative; z-index: 2; overflow:hidden; background: radial-gradient(circle, #1eeac1 , #53b0ec , #b51aea);}
.section3 .desc .txt {font-size:24px; color:#000000; line-height:1.8; letter-spacing: -0.02rem;}
.section3 .page {position:absolute; left:0; top:0; height: 100%; width:100%; justify-content: center; display: flex; align-items: center; padding:14.4rem 0; transition: opacity 0.5s;}
.section3 .page2 { min-height:100%; display:flex; align-items:center; justify-content:center;}
.section3 .page2 .about {display: flex; align-items: flex-start; width: 100%; max-width:2196px; padding-left:6rem; padding-right:6rem; margin-left:auto; margin-right:auto; justify-content: space-between;}
.section3 .page2 .about .tit {font-size:40px; font-weight:900; line-height:1.1;}
.section3 .page2 .about .tit span {background:linear-gradient(to bottom, #8800cc , #6600ff, #8800cc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section3 .page2 .about .txt {margin-top:2.5rem;}
.section3 .page2 .about .desc {margin-top:6.5rem;}
.section3 .page2 { z-index: 1;}

.section4 .inner {padding:14.4rem 6rem; max-width:2196px; display:flex; align-items:flex-start; justify-content: space-between; flex-direction: column;}
.section4 .desc {position:relative; margin-top:3.6rem; text-align:left;}
.section4 .desc:before {content:''; display:block; position:absolute; top:1.2rem; bottom:1.2rem; left:0; width:0.4rem; background: linear-gradient(to bottom, #6cf, #ff3, #f60, #f0c);}
.section4 .desc .txt {font-size:22px; color:#fff; font-weight:400; line-height:2; letter-spacing: 0.02em;}
.section4 .desc .txt span {background:var(--gr_b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; letter-spacing: -0.01em;}
.section4 .desc .name {font-size:14px; letter-spacing:0.02em; line-height:2; text-transform: uppercase; color: #aaa;}
.section4 .bg_vod {perspective: 1000px; position:relative;}
.section4 .bg_vod:before, .section4 .bg_vod:after {content:''; display:block; position:absolute;}
.section4 .bg_vod:after { left:0; top:0; bottom:0; right:0; background-position:center center; background-repeat:no-repeat; z-index:2;}
.section4 .vod {position:relative; object-fit: cover; transition: transform 0.15s ease; will-change: transform; overflow: hidden; transform-origin: center center;}
.section4 .vod:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.5); z-index:1;}
.section4 .vod:after {content: ""; display: block;}
.section4 .vod video {position:absolute; min-width:100%; min-height:100%; top:50%; left:50%; transform:translate(-50% , -50%);}
.section4 .bg_vod .link {cursor: url('/images/v2/cursor_view.png') 60 60, pointer;}
.section4 .pb .bg_vod:before {width:100%; height:100%; width: 111.112%; height: 111.112%; background:url('/images/v2/img_spark.png') 0 0 no-repeat; background-size:100% auto; top: -6%; left: -5%; z-index:1;}
.section4 .pb .bg_vod:after {background-image:url('/images/v2/bi_pb.png');}
.section4 .pb .vod {width:1152px;}
.section4 .pb .vod:after {padding-bottom:56.25%;}
.section4 .pb .desc { padding-left:3.6rem;}
.section4 .pb .name {position:absolute; top:0; right:0;}
.section4 .outlaw .bg_vod:after {background-image:url('/images/v2/bi_outlaw.png'); z-index:1;}
.section4 .outlaw {display: flex; align-items: flex-end; justify-content: flex-start; flex-direction: row-reverse; width:100%; margin-top: -38.4rem;}
.section4 .outlaw .vod {width:480px; flex-shrink: 0;}
.section4 .outlaw .vod:after {padding-bottom:177.91%;}
.section4 .outlaw .desc {padding-right:3.6rem; text-align:right; margin-right:4.8rem;}
.section4 .outlaw .desc:before {left:auto; right:0;}
.section4 .outlaw .name {margin-top:2.4rem;}

.section5 {background:#000; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; z-index:2;}
.section5 .line_tit {margin:4rem auto 0; font-size:69px; font-weight:800; word-break:keep-all;}
.section5 .line_tit svg {display:block; width:auto; height:1em; max-width:100%; margin:0 auto; overflow:visible;}
.section5 .tit {margin-top:1.6rem; font-size:68px; color:#fff; font-weight:900; text-transform:uppercase;}
.section5 .tit span {background:var(--gr_c); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section5 .txt {margin-top:3rem; font-size:22px; color:#fff; font-weight:400; line-height:2; letter-spacing: -0.01em; word-break: keep-all;}
.section5 .txt span {background:var(--gr_b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; letter-spacing: -0.02em;}
.section5 .btn_box {margin-top:4.8rem;}
.section5 .btn_box div span {font-weight: 800; letter-spacing: 0.02rem;}

.section6 {background:url('/images/v2/bg04.jpg') center center no-repeat; background-size:cover; background-attachment:fixed; position: relative; z-index: 2;}
.section6 .inner {max-width:2196px; padding-top:14.4rem; padding-bottom:14.4rem;}
.section6 .con {display:flex; align-items:flex-start; justify-content: space-between; width: 100%; letter-spacing:-0.02em; word-break: keep-all;}
.section6 .con li {margin-bottom:10rem;}
.section6 .con li:last-child {margin-bottom:0;}
.section6 .con .tit {font-size:24px; color:#000000; font-weight:800; margin-top:3rem;}
.section6 .con .tit span {background:linear-gradient(to right, #22aaff , #9988ff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.section6 .con .txt {font-size:18px; color:#000000; font-weight:500; line-height:1.66; margin-top:1.5rem; letter-spacing: 0;}
.section6 .con .txt font {color:#5555ff;}
.section6 .con .culture {text-align:left;}
.section6 .con .life {text-align:right; padding-top:19.2rem;}
.section6 .con .life .tit span {background:linear-gradient(to right, #ff55cc , #ff7744);}

.section7 {background:url('/images/v2/bg05.jpg') center center no-repeat; background-size:cover; background-attachment:fixed; display: flex; align-items: center; justify-content: center; z-index:0;}
.section7 .desc {text-align:left; width: 50%; margin-right: 0; margin-left: auto; word-break: keep-all;}
.section7 .line_tit {font-size:68px; font-weight:900; letter-spacing:0.8em;}
.section7 .line_tit svg {display:inline-block; width:auto; height:1em; max-width:100%; vertical-align:top; overflow:visible;}
.section7 .tit {margin-top:1.6rem; font-size:68px; color:#fff; font-weight:900;}
.section7 .tit span {background:var(--gr_c); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section7 .txt {margin-top:3.6rem; font-size:22px; color:#fff; font-weight:400; line-height:2; padding-right: 3.6rem;}
.section7 .txt span {background:var(--gr_b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; letter-spacing: -0.01em;}
.section7 .btn_box {margin-top:8.4rem;}
.section7 .btn_box div span {font-weight: 800; letter-spacing: 0.01rem;}

footer {padding:14rem 2.4rem; text-align:center; position: relative; z-index: 3; background:#000;}
footer .social {font-size:0; margin-bottom:8.4rem;}
footer .social li {display:inline-block; vertical-align:middle; margin:0 4.5rem;}
footer .social li a {display:block; background-repeat:no-repeat; background-position:0 0; font-size:0; color:transparent; background-size:100% auto;}
footer .social li.fb a {width:36px; height:36px; background-image:url('/images/v2/icon_facebook.png');}
footer .social li.yb a {width:46px; height:32px; background-image:url('/images/v2/icon_youtube.png');}
footer .social li.linked a {width:38px; height:33px; background-image:url('/images/v2/icon_linked.png');}
footer .social li a:hover {background-position:0 100%;}
footer .copy {margin-top:2.4rem; font-size:17px; color:#aaaaaa; font-weight:400;}

.popup {position:fixed; top:0; bottom:0; left:0; right:0; background:#000; z-index:9; display:none;}
.popup .pop_close {transition:none; font-size:0; color:transparent; position:absolute; width:4.8rem; height:4.2rem; top:3.6rem; right:3.6rem; background-image:url('/images/v2/pop_close.png'); background-repeat:no-repeat; background-position:0 0; z-index:10; background-size:100% auto;}
.popup .pop_close:hover {background-position:0 100%;}
.popup .bg {width:100%; height:100%; position:relative; overflow:hidden;}
.popup .bg video, .popup .bg img {width: 100%; height: 100%; object-fit: cover;}
.popup .info_slide {width:100%; height:100%;}
.popup .info_slide, .popup .info_slide .slick-list, .popup .info_slide .slick-track, .popup .info_slide .slick-slide {width:100%; height:100%;}
.popup .slick-arrow {font-size:0; color:transparent; z-index:1; top:50%; margin-top:-3rem; cursor:pointer; width:3rem; height:6rem; position:absolute; background-color:rgba(255, 255, 255, 0); background-size:100% auto; background-image:url('/images/v2/btn_arr.png'); background-repeat:no-repeat; background-position:0 0;}
.popup .slick-prev {left:3.6rem;}
.popup .slick-next {right:3.6rem; transform:scaleX(-1);}
.popup .slick-arrow:hover {background-position:0 100%;}
.popup .info_slide .con {position:absolute; top:0; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding-bottom:30px;}
.popup .info_slide .txt {padding: 0 10rem; word-break: break-word; margin-top:3.6rem; font-size:22px; color:#ffffff; line-height:1.75; letter-spacing: 0.01em;}
.popup .info_slide .in_video .bg:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.5);}
.popup .info_nav {position:absolute; left:0; right:0; z-index:10; bottom:6rem;}
.popup .info_nav .slick-list {overflow:visible;}
.popup .info_nav .slick-track {width: auto !important; display: inline-block;}
.popup .info_nav .slick-slide {float:none; display:inline-block; vertical-align:top;}
.popup .info_nav li {position:relative; width:240px !important; padding:0 2.4rem;}
.popup .info_nav li:before {content:''; display:block; position:absolute; width:calc(100% - 2.4rem); height:2px; top:-3.3rem; background:rgba(255, 255, 255, 0.4); left:calc(50% + 1.2rem);}
.popup .info_nav li:last-child:before {display:none;}
.popup .info_nav li a {line-height:1.2; font-size:15px; color:rgba(255, 255, 255, 0.7); font-weight:600; letter-spacing:0.05em; position:relative;}
.popup .info_nav li a:before, .popup .info_nav li a:after {transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; left:50%; top:-4.4rem; margin-left:-1.2rem; border-radius:50%; width:2.4rem; height:2.4rem;}
.popup .info_nav li a:before {border:0.6rem solid rgba(255, 255, 255, 0.3);}
.popup .info_nav li a:after {opacity:0; padding: 0.6rem; background: linear-gradient(to right, #f66, #f80, #f5d); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.popup .info_nav li a:hover {color:#fff;}
.popup .info_nav li a:hover:after {opacity:1; background:#fff; width:1.2rem; height:1.2rem; margin-left:-0.6rem; top:-3.8rem;}
.popup .info_nav li.slick-current a span {background:var(--gr_b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: 0.01em;}
.popup .info_nav li.slick-current a:before {border-color:rgba(255, 255, 255, 0);}
.popup .info_nav li.slick-current a:after {opacity:1;}
.popup .info_nav li.slick-current a:hover:after {background: linear-gradient(to right, #f66, #f80, #f5d); width:2.4rem; height:2.4rem; top:-4.4rem; margin-left:-1.2rem;}

.loader {display: flex; flex-direction: column; align-items: center; background: #000; justify-content:center; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; position:fixed; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:9; will-change: opacity;}
.loader.fade-out {opacity: 0; visibility: hidden;}
.loader .line_wrap {width:33.6rem;}
.loader .line {display:block; width: 100%; height: 1px; background: #e82e31; transform: scaleX(0); transform-origin: left; animation: lineFirst 0.35s forwards cubic-bezier(0.25, 0, 0.3, 1), lineMid 0s forwards linear, lineSecond 0.35s forwards cubic-bezier(0.25, 0, 0.3, 1); animation-delay: 0.15s, 0.5s, 2.25s; will-change: transform, opacity;}
.loader img {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1s ease-in-out; will-change: opacity;  max-width:33.5rem;}
.loader .logo1 {animation: imgFadeIn 0.5s forwards, imgFadeOut 0.35s forwards; animation-delay: 0.55s, 1.9s;}
.loader .logo2 {z-index: 1; animation: imgFadeIn 0.9s forwards, imgFadeOut 0.35s forwards; animation-delay: 1.0s, 1.9s;}
.loader .galaxy {opacity: 0; transition: opacity 0.8s ease-in-out;}
.loader.bg-changed .galaxy {opacity: 1;}

.wrap {overflow-y: auto; height: 100vh; position:relative; scrollbar-width: none; -ms-overflow-style: none;}
.wrap::-webkit-scrollbar {display: none;}

main.error {height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; flex-direction:column; letter-spacing:-0.05em; padding-bottom:5%;}
main.error .ci_logo {position:absolute; top:3rem; left:3.6rem;}
main.error .icon_time {max-width:17.2rem;}
main.error .txt {margin-top:2.4rem;}
main.error .txt h1 {font-size:39px; line-height:1.23; background: var(--gr_a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:500;}
main.error footer {position:absolute; bottom:0; left:0; right:0; padding:0 0 4.5rem; letter-spacing:0;}
main.error footer .copy {margin-top:0;}

.career {padding:20rem 0 12rem; background: #111; word-break:break-word;}
.career .inner {max-width:2052px; position: relative; z-index: 2;}
.career .intro {margin-bottom:12.8rem; word-break: keep-all;}
.career .intro h3 {font-size:54px; color:#000000; font-weight:900;}
.career .intro h3 span {background:var(--gr_a); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.career .intro .txt {font-size:22px; color:#ffffff; font-weight:400; line-height:2; margin-top:3.4rem; letter-spacing: 0.01em;}
.career .talent ul {display:flex; align-items:flex-start; justify-content:space-between;}
.career .talent ul li {width:calc(100% / 3);}
.career .talent .desc {margin-top:4rem; word-break: keep-all;}
.career .talent .tit {font-size:32px; color:#fff; font-weight:700; letter-spacing: 0.01em; text-shadow:1px 0 0 #00aaff, -1px 0 0 #ff6666; line-height:1.4;}
.career .talent .txt {font-size:18px; color:#cccccc; line-height:2; margin-top:2.5rem; font-weight: 500; letter-spacing: 0.02rem;}
.career .btns_apply {font-size:0; margin:12.2rem auto 6.4rem;}
.career .btns_apply .btn_box {vertical-align:top; margin:1.2rem 2.4rem; width:400px; padding: 0 2.4rem;}
.career .btns_apply .btn_box div span:before {content:''; display:inline-block; width:24px; height:24px; vertical-align:middle; position:relative; top:-2px; background-repeat:no-repeat; background-size:100% auto; margin-right:1.1rem;}
.career .btns_apply .btn_box div:nth-child(1) span:before {background-position:0 100%;}
.career .btns_apply .btn_box div:nth-child(2) span {background:#ffff66;}
.career .btns_apply .btn_box div:nth-child(2) span:before {background-position:0 0;}
.career .btns_apply .btn_box div:nth-child(2) span font {background:#ffaaaa; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.career .btns_apply .btn_down span:before {background-image:url('/images/v2/icon_down.png');}
.career .btns_apply .btn_apply span:before {background-image:url('/images/v2/icon_a.png');}
.career .process ul {display:flex; margin-left: -4.8rem; flex-wrap: wrap;}
.career .process ul li {width: 50%; flex-grow: 0; padding-left: 4.8rem; margin-bottom: 4.8rem;}
.career .process .con {font-size:0; height:100%; padding:2.4rem 9.6rem 2.4rem 2.4rem; background:rgba(0, 0, 0, 0.7); text-align:left; align-items: center; justify-content: flex-start; display:flex;}
.career .process .con .img {width: 20.4rem; flex-basis: 20.4rem; flex-shrink: 0;}
.career .process .con .desc {padding-left:2.4rem;}
.career .process .con .tit {font-size:27px; font-weight:700; letter-spacing:0.04em; text-shadow:1px 0 0 #00aaff, -1px 0 0 #ff6666; color:#fff;}
.career .process .con .tit font {background:var(--gr_b); -webkit-background-clip: text; letter-spacing:0; -webkit-text-fill-color: transparent; text-shadow:none; font-weight:900;}
.career .process .con .txt {font-size:18px; color:#cccccc; line-height:1.66; margin-top:1.2rem; word-break: keep-all; font-weight: 500; letter-spacing: 0.02rem;}

@media screen and (max-width: 2340px) {
.inner {max-width:none;}

.career .talent {margin-left:-3rem; margin-right:-3rem;}
.career .talent ul li {padding:0 4.5%;}
}

@media screen and (max-width: 1980px) {
.section1 .main_txt {font-size: 46px;}
.section2 .desc .txt {font-size:24px; width:27%; word-break: auto-phrase;}
.section2 .desc .txt br {display:none;}
.section6 .con > div {width:22%;}
.section6 .con .txt {word-break: auto-phrase;}
.section6 .con .txt br {display:none;}
}

@media screen and (max-width: 1800px) {
header nav ul li {margin:0 2.4rem;} 
.section2 .marquee-content {font-size:140px;}
.section2 .marquee-content .ic::after {width:14rem; height:14rem;}

.section4 .pb {width:64%;}
.section4 .pb .vod {width:100%;}
.section4 .pb .bg_vod:after {background-size:62% auto;}
.section4 .outlaw .bg_vod {width:27%;}
.section4 .outlaw .bg_vod:after {background-size:67.5% auto;}
.section4 .outlaw .vod {width:100%;}

.career .talent .txt br {display:none;}
.career .process .con {padding:2.4rem;}
}

@media screen and (max-width: 1680px) {
header nav ul li {margin:0 1rem;}  
} 

@media screen and (max-width: 1560px) {
#canvas-container.sc1 {left:7%;}

header nav ul li a {font-size:20px; min-width:0;}
header .lang {top:3.6rem;}
header .lang a {font-size:20px;}

.section1 .main_txt {font-size:40px;}

.section2 .desc .txt {font-size:22px;}
.section2 .marquee-content {font-size:110px;}
.section2 .marquee-content .ic::after {width:10rem; height:10rem;}
.section2 .page1 .desc {margin-top:2rem; max-width: 1480px;}

.section3 .page2 .about .img img {max-width:160px;}
.section3 .page2 .about .tit {font-size:28px;}
.section3 .page2 .about .desc {margin-top:4.8rem;}
.section3 .desc .txt {font-size:18px; line-height:1.6;}

.section4 .outlaw {margin-top:-20%;}
.section4 .pb .name {position:static; margin-top:2.4rem;}
.section4 .desc .txt {word-break: keep-all;}
.section4 .pb .desc .txt br {display:none;}

.section5 .line_tit {font-size:50px;}
.section5 .tit {font-size:50px;}
.section5 .txt {font-size:20px;}
.section5 .logo img {max-width:200px;}

.section7 .line_tit {font-size:50px;}
.section7 .tit {font-size:50px; margin-top:1rem;}
.section7 .txt {font-size:20px;}
}

@media screen and (max-width: 1400px) {
header nav ul li {margin:0;}
}

@media screen and (max-width: 1280px) {
#canvas-container.sc1 {left:0;}

header {padding:3rem 3rem 0; -webkit-mask-image:none; mask-image:none; backdrop-filter:none;}
header h1 {left:3rem; z-index:2;}
header nav ul li {margin:0 1.2rem;}
header .lang {right:3rem;}
header .btn_menu {position:absolute; top:2.8rem; right:2rem;}
header .btn_close {position:absolute; z-index:2; top:2.6rem; right:2rem;}
header > nav , header > .lang {display:none;}
header .menu {position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.9); display:flex; display:none; align-items:center; justify-content:center; padding:0 10.6%;}
header .menu nav, header .menu .lang {position:relative; z-index:2;}
header .menu .lang {right:auto; top:auto; left:50%; bottom:4.4rem; transform:translate(-50% , 0); position:absolute;}
header .menu nav {width:100%;}
header .menu nav ul {display:block;}
header .menu nav ul li {margin:0; display:block;}
header .menu nav ul li a {padding:0; font-size:34px; height:12rem; display:flex; align-items:center; justify-content:center;}
header .menu nav ul li a span {background: var(--gr_a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity:0;}
header .menu nav ul li a:after, header .menu nav ul li a span:before, header .menu nav ul li a span:after {display:none;}
header .menu nav ul li a:before {bottom:0; top:auto; height:1px; left:0; width:0; background:var(--gr_d);}
header .menu nav ul li:last-child a:before {display:none;}
header .menu.open ul li a:before {animation:width 0.3s forwards;}
header .menu.open nav ul li a span {animation: imgFadeIn 1s forwards;}
header .menu.open ul li:nth-child(2) a:before {animation-delay:0.1s;}
header .menu.open nav ul li:nth-child(2) a span {animation-delay:0.1s;}
header .menu.open ul li:nth-child(3) a:before {animation-delay:0.2s;}
header .menu.open nav ul li:nth-child(3) a span {animation-delay:0.2s;}
header .menu.open nav ul li:nth-child(4) a span {animation-delay:0.3s;}
header .menu.open ul li:nth-child(4) a:before {animation-delay:0.3s;}
header .menu.open nav ul li:nth-child(5) a span {animation-delay:0.4s;}

.section2 .desc .txt {font-size:18px; line-height:1.6;}

.section3 .page2 .about .img img {max-width:160px;}
.section3 .page2 .about .tit {font-size:28px;}
.section3 .desc .txt {font-size: 16px; line-height: 1.8;}

.section4 .inner {padding-top:12rem; padding-bottom:12rem;}
.section4 .outlaw {margin-top:0; flex-direction:column;}
.section4 .outlaw .desc {margin-right:0;}

.section5 .line_tit {font-size:40px;}
.section5 .tit {font-size:40px; margin-top:1rem;}
.section5 .txt {font-size: 17px; line-height: 1.6; margin-top: 2.4rem;}

.section7 .line_tit {font-size:40px;}
.section7 .tit {font-size:40px; margin-top:1rem;}
.section7 .txt {font-size: 17px; line-height: 1.6; margin-top: 2.4rem;}
.section7 .btn_box {margin-top:4.8rem;}

.career .talent ul li {padding:0 2.5%;}
.career .talent .tit {font-size:32px;}
.career .process ul {margin-left:-3rem;}
.career .process ul li {padding-left:3rem; margin-bottom:3rem;}
.career .process .con .img {width:16.6rem; flex-basis: 16.6rem;}
.career .process .con .desc {padding-left:0;}
}

@media screen and (max-width: 1024px) {
body {overflow-x:hidden;}
.box_model {opacity:1;}
.active .box_model {animation:none;}
.item_scroll .item {opacity:1; transform:none; transition:none;}

#canvas-container.sc7 {width:100%; top:25% !important;}
#canvas-container.sc7 canvas {transform:none;}
#canvas-container.sc6 {position:absolute !important; top:50% !important; transform:translate(0 , -45%); left:-15%;}

.galaxy .star {transform:scale(0.5) !important;}

.section1 {justify-content: center; align-items: flex-end; padding-bottom:5rem; height:100vh;}
.section1 .inner {height:auto; padding-left:3rem; padding-right:3rem;}
.section1.active .main_txt {position:static; top:auto; transform:none; word-break: break-word;}
.section1 .main_txt {text-align:center;}
.section1 .main_txt span {display:inline;}
.section1 .main_txt span:nth-child(3) {display:block;}

.section2 .page {position:relative; display:block; height:100%; padding:13rem 0 10rem; opacity:1 !important;}
.section2 .marquee-container {position:absolute; top:40%;}
.section2 .page1 .desc {padding:0 4.5rem; display: flex; height: 100%; margin: 0 auto; flex-direction: column;}
.section2 .desc .txt {width:100%; line-height:2;}
.section2 .page1 .desc .txt02 {margin-top:6rem;}
.section2 .marquee-content {font-size:80px;}
.section2 .marquee-content .ic::after {width:7rem; height:7rem;}

.section3 .page2 .about {display:block; word-break: keep-all;}
.section3 .page2 .about > div {margin-bottom:3rem;}
.section3 .page2 .about > div:last-child {margin-bottom:0;}
.section3 .page2 .about .tit br {display:none;}
.section3 .page2 .about .txt {line-height:1.3; margin-top:1.8rem;}
.section3 .page2 .about .txt br {display:none;}
.section3 .page2 .about .img img {max-width:10rem;}
.section3 .page2 .about .desc {margin-top:3rem;}

.section4 .outlaw {margin-top:9rem;}
.section4 .pb {width:100%;}
.section4 .outlaw .bg_vod {width:42%;}
.section4 .desc .txt br {display:none;}

.section6 .inner {padding:12rem 4.5rem;}
.section6 .con > div {width:auto;}
.section6 .con {display:block;}
.section6 .con .txt br {display:none;}
.section6 .con li {text-align:left; margin-bottom:0; margin-top:-5rem; width:50%;}
.section6 .con .culture li:first-child {margin-top:0;}
.section6 .con li:nth-child(2n) {text-align:right; margin-left:auto; margin-right:0;}
.section6 .con .life li {text-align:right; margin-left:auto; margin-right:0;}
.section6 .con .life li:nth-child(2n) {margin-right:auto; margin-left:0; text-align:left;}
.section6 .con .life {padding-top:30.2rem;}

.section7 {align-items: flex-start; padding-top:13rem;}
.section7 .desc {width:auto; margin-right:auto; text-align:center;}

.popup .info_nav .slick-track {display:block;}
.popup .info_nav li {width:25% !important;}
.popup .info_nav li a br {display:block;}

.career .talent {margin-left:0; margin-right:0;}
.career .talent ul {display:block;}
.career .talent ul li {width:auto; padding:0; display:flex; text-align:left; margin-bottom:9rem; align-items:center; justify-content:flex-start;}
.career .talent ul li:last-child {margin-bottom:0;}
.career .talent ul li .img {width: 12rem; flex-basis: 12rem; flex-shrink: 0;}
.career .talent ul li .desc {padding:0 4rem; margin-top:0;}
.career .talent ul li:nth-child(2n) {flex-direction: row-reverse; text-align:right;}
.career .process ul {display:block; margin-left:0;}
.career .process ul li {padding-left:0; width:auto;}
.career .process .con .desc {padding-left:2.4rem;}
}

@media screen and (max-width: 768px) {
html {font-size:32%;}

header h1 img {max-width:100px;}
header .menu nav ul li a {font-size:4.3rem;}
header .lang a {font-size:3.1rem;}
header .btn_menu img , header .btn_close img {width:26px;}

.btn_box {height:45px;}
.btn_box div span {font-size:3.3rem; margin-left: 4rem;}


#canvas-container.sc7 {top:20% !important;}

.section1 {padding-bottom:13.3%;}
.section1 .main_txt {font-size:5.6rem; line-height:1.6;}

.section2 .page {padding:18rem 0 14rem;}
.section2 .desc .txt {font-size:3rem;}
.section2 .desc .txt br {word-break: keep-all;}
.section2 .marquee-content {font-size:10rem;}

.section3 .page2 .about .tit {font-size:4.1rem;}
.section3 .page2 .about .txt {font-size:2.7rem;}
.section3 .page2 .about > div {margin-bottom:8rem;}
.section3 .page2 .about .img img {max-width:12rem;}

.section4 .desc .txt {font-size:3.3rem;}
.section4 .desc .name {font-size:2.7rem;}

.section5 .line_tit {font-size:6rem;}
.section5 .tit {font-size:6rem; margin-top:1rem;}
.section5 .txt {font-size:3rem;}
.section5 .txt br {display:none;}
.section5 .logo img {max-width:28.4rem;}
.section5 .btn_box div span {margin-left:0;}
.section5 .btn_box {width:40rem;}

.section6 .con .icon img {max-width:7.6rem;}
.section6 .con .tit {font-size:4.3rem;}
.section6 .con .txt {font-size:2.7rem;}

.section7 .line_tit {font-size:6rem;}
.section7 .tit {font-size:6rem; margin-top:1rem;}
.section7 .txt {font-size:3rem;}
.section7 .btn_box div span {margin-left:0;}

footer .social li.fb a {width:30px; height:30px;}
footer .social li.yb a {width:39px; height:27px;}
footer .social li.linked a {width:32px; height:28px;}
footer > img {max-width:140px;}
footer .copy {font-size:2.6rem;}

.pop_pb .bi img {max-width:71.4rem; width:90%; margin:0 auto;}
.pop_outlaw .bi img {max-width:51.6rem; width:90%; margin:0 auto;}
.popup .info_slide .txt {font-size:3.3rem; padding: 0 8rem;}
.popup .slick-prev {left:2.4rem;}
.popup .slick-next {right:2.4rem;}
.popup .info_nav li a {font-size:2.5rem;}

.career .intro h3 {font-size:6.2rem;}
.career .intro .txt {font-size:3.3rem; word-break: keep-all;}
.career .talent .tit {font-size:4.3rem;}
.career .talent .txt {font-size:2.7rem; line-height:1.8;}
.career .btns_apply .btn_box {width:calc(100% - 4.8rem); max-width:350px; height:45px;}
.career .btns_apply .btn_box div span:before {position:absolute; top:50%; left:2rem; margin-top:-12px;}
.career .process .con {padding:4rem 2.4rem;}
.career .process .con .tit {font-size:4rem;}
.career .process .con .txt {font-size:2.7rem; line-height:1.8;}

main.error .ci_logo img {max-width:100px;}
main.error .txt h1 {font-size:4.7rem;}
}

@media screen and (max-width: 360px) {
header .menu nav ul li a {font-size:3.8rem;}

#canvas-container.sc7 {top:25% !important;}

.section1 .main_txt {font-size:4.4rem;}

.section2 .page {padding:15rem 0 10rem;}
.section2 .desc .txt br {display:none;}

.section3 .page2 .about > div {margin-bottom:5rem;}
.section3 .page2 .about .tit {font-size:3.6rem;}
.section3 .page2 .about .img img {max-width:10rem;}

.section7 .line_tit {font-size:5rem;}
.section7 .tit {font-size:5rem;}
.section7 .txt {font-size:2.7rem;}
.section7 .btn_box {margin-top:4.8rem;}

main.error .txt h1 {font-size:4rem;}
}

@keyframes twinkle_one {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes twinkle_two {
  0%   { opacity: 1; }
  25%  { opacity: 0.2; }
  80%  { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes twinkle_three {
  0%   { opacity: 1; }
  30%  { opacity: 0.2; }
  40%  { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes twinkle_bright {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes width {
  100% { width:100%; }
}

@keyframes width_14 {
  100% { width:14.4rem; }
}

@keyframes fix {
  100% {opacity:1; position:fixed; }
}

@keyframes imgFadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes imgFadeOut { from {opacity:1;} to {opacity:0;} }
@keyframes lineFirst {
   from { transform: scaleX(0); opacity: 1; }
   to { transform: scaleX(1); opacity: 1; }
}

@keyframes lineMid {
   from { opacity: 1; }
   to { opacity: 0; }
}

@keyframes lineSecond {
   from { transform: scaleX(0); opacity: 0; background: #000; }
   to { transform: scaleX(1); opacity: 1; background: linear-gradient(to right, #ff3333, #ff6699, #ffcc33, #ff6633); }
}

@media (prefers-reduced-motion: reduce) {
   .loader { display: none; }
}