@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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;}

/* HTML5 */
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

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: 'Roboto Mono', sans-serif; background:#000;}

h1, h2, h3, h4, h5, h6 {letter-spacing: 0.4px; font-weight: 700; text-transform: uppercase;}
ol, ul, li {font-size: 0; list-style: none; list-style-image: none; vertical-align: top;}
img {line-height: inherit; vertical-align: top;}
strong {font-weight: 400;}

a {text-decoration: none;}
a:hover {transition: all 0.6s ease;}
button {font-size: 0; font-family: 'Roboto Mono', sans-serif;}
button:hover {transition: all 0.6s ease; cursor: pointer;}
button:focus {outline: none;}

/* 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);}
.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;}		


#all_wrap {position:relative; padding-top:6rem; overflow:hidden;}
#all_wrap:before {content:''; display:block; position:absolute; top:0; bottom:0; right:0; left:0;   z-index:1;  background-repeat: no-repeat; background-position: center center; background-image: url(/images/common/modeselector/v2/bg_img.png);  animation: bg-move 10s linear infinite;}


header {padding:4.8rem 4.8rem 0;  z-index:2; position:absolute; text-align:left; top:0; left:0; right:0;}
header a {position:realtive; display:inline-block;}

.container {max-width: 1224px; width: 100%; margin:12rem auto 0; position:relative; }

.title_wrap {position:relative; padding:0 6rem; z-index:2;}
.title_wrap img {max-width:100%;}

.btn_reset {position:relative; margin:8rem auto 0; width:17.6rem; height:5.6rem; background:url('/images/common/modeselector/v2/btn_reset.png') 0 0 no-repeat; z-index: 1; transition: none; background-size:100% auto;}
.btn_reset button { font-size:21px; font-weight:600; text-shadow: -1px 0px 1px #ff0088, 1px 0px 1px #00ddff; color:#fff; text-align:center; position:relative; font-family: 'Roboto Mono'; transition:none; width:17.6rem; height:5.6rem; background-color:rgba(255, 255, 255, 0); background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/modeselector/v2/btn_reset.png'); }
.btn_reset button span {position: relative;}
.btn_reset button:before {content:''; display:block; position:absolute;}
.btn_reset button:before {width:27.6rem; height:6.8rem; background:url('/images/common/modeselector/v2/btn_glitch_off.png') 0 0 no-repeat; left: -5rem; top: 0.6rem;}
.btn_reset button:hover {background-position:0 -5.6rem; color:#000000; text-shadow: -1px 0px 1px #ff66ff, 1px 0px 1px #00ffff;}

.btn_reset button:hover:before {width:21.4rem; height:6.8rem; background:url('/images/common/modeselector/v2/btn_glitch_on.png') 0 0 no-repeat; top: -0.4rem;}


.map_list { z-index: 4; font-size:0; position:absolute; top:0; left:0; right:0;}
.map_list li {position:absolute; width:19.2rem; height:9.6rem; margin-bottom:2.4rem; background-repeat:no-repeat; background-position:0 -9.6rem;}
.map_list li:last-child {margin-bottom:0;}
.map_list li input {display: none;}
.map_list li label {text-align:center; cursor:pointer; display: block;  position:absolute; text-transform: capitalize; top:0; bottom:0; left:0; right:0; font-size:15px; font-weight:600; color:#ffff00; text-shadow:-1px 0px 1px #4466ff, 1px 0px 1px #ff0000;}
.map_list li label span { left:50%; transform:translate(-50% , 0); bottom:7px;  padding:0 3px; background:rgba(0, 0, 0, 0.5); border-left:0.4rem solid #ff00ff; border-right:0.4rem solid #00ffff; width: max-content; position:absolute; }
.map_list li.dis {background-position:0 0;}
.map_list li.dis label { font-size:17px; color:#00ffff; text-shadow:-1px 0px 1px #5555ff, 1px 0px 1px #bb33ff;}
.map_list li.dis label span {padding:0; background:none; border:none; top:calc(50% + 7px);  transform:translate(-50% , -50%); bottom:auto;}


.map_list li:nth-child(-n+5) {left:0;}
.map_list li:nth-child(n+6) {right:0;}

.map_list li.map1 {background-image:url('/images/common/modeselector/v2/check_deathmatch.png'); top:0;}
.map_list li.map2 {background-image:url('/images/common/modeselector/v2/check_bomb.png'); top:120px;}
.map_list li.map3 {background-image:url('/images/common/modeselector/v2/check_glass.png'); top:240px;}
.map_list li.map4 {background-image:url('/images/common/modeselector/v2/check_eliminate.png'); top:360px;}
.map_list li.map5 {background-image:url('/images/common/modeselector/v2/check_ace.png'); top:480px;}

.map_list li.map6 {background-image:url('/images/common/modeselector/v2/check_destory.png');  top:0;}
.map_list li.map7 {background-image:url('/images/common/modeselector/v2/check_freeforall.png'); top:120px;}
.map_list li.map8 {background-image:url('/images/common/modeselector/v2/check_headhunter.png'); top:240px;}
.map_list li.map9 {background-image:url('/images/common/modeselector/v2/check_chaos.png'); top:360px;}
.map_list li.map10 {background-image:url('/images/common/modeselector/v2/check_escape.png'); top:480px;}


.container .map_selector {width: 100%; position: relative; z-index: 3;}
.container .map_selector > div {box-shadow:0 0 1rem #ff0000 , inset 0 0 3rem rgba(255, 0, 0, 0.2) , inset 0 0 0 0.2rem #ff0000;  width: 660px; height: 660px; margin: 0 auto; border-radius:50%; position:relative;}
.container .map_selector > div:before { content:''; display:block; top:0; bottom:0; left:0; right:0; border:0.2rem solid #ff0000; border-radius: 50%; position: absolute; z-index: 5;}
.container .map_selector > div:after { box-shadow:0 0 5rem rgba(255, 0, 0, 0.3) , inset 0 0 5rem rgba(255, 0, 0, 0.6) , inset 0 0 0 0.2rem #ff0000;  content:''; display:block; width:calc(100% + 4rem); height:calc(100% + 4rem); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}
.container .map_selector .arrow {width:7.4rem; height:3.6rem; position:absolute; left:50%; margin-left:-3.7rem; top:-8.8rem;  z-index: 5;}
.container .map_selector .arrow img {max-width:100%;}
.container .map_selector .arrow:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/modeselector/v2/btn_arrow_effect.png') center center no-repeat; background-size:100% auto; animation: flicker-5 8s linear infinite both; animation-delay:0.4s;}
.container .btn_start {border-radius:50%;  z-index: 6; width: 14rem; height: 14rem; position:absolute; top:50%; left:50%; border:0.2rem solid #ff0000; background:#000; box-sizing:border-box; margin-left:-7rem; margin-top:-7rem;}
.container .btn_start > button {position: relative; top:2rem; left:0; transition:none; z-index:1; background-color:rgba(255, 255, 255, 0); background-image:url('/images/common/modeselector/v2/btn_start.png'); background-position:0 0; width: 9.6rem; height: 9.6rem; font-size:21px; font-weight:500; color:#ffffff; border-radius: 50%; letter-spacing:-0.02em; text-shadow:-1px 0px 1px #00ffdd , 1px 0px 1px #ff0000;}
.container .btn_start > button:before {    animation: aim 5s infinite linear; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:calc(100% + 2.4rem); height:calc(100% + 2.4rem); background:url('/images/common/modeselector/v2/btn_start_line.png') center center no-repeat; background-size:100% auto;}
.container .btn_start > button:hover {background-position:0 -9.6rem; color:#000000; font-weight:700; text-shadow:-1px 0px 1px #33bbff , 1px 0px 1px #ff88ff; letter-spacing:-0.04em;}
.container .btn_start > button:hover:before {animation:none;}

.container .map_selector canvas { position: absolute; top: 0; left: 0; z-index: 4;}


.top_slide {position:absolute; top:0; bottom:0; left:0; right:0;}
.top_slide .slick-slider {height:100%;}
.top_slide .slick-list {height:100%;}
.top_slide .slick-track {height:100%;}
.top_slide .slick-track > li {height: 100%; position:relative;}
.top_slide .slick-track > li .bg {height: 100%;  transition: linear 15s; background-repeat:no-repeat; background-position:center center; background-size:cover;  transform: scale(1.2, 1.2);}
.top_slide .slick-track > li:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-repeat:no-repeat; background-position:center center; background-size:cover;   animation: flicker-5 8s linear infinite both;     z-index: 1;}
.top_slide .slick-track > li.ms01 .bg {background-image:url('/images/common/modeselector/v2/bg01.jpg');}
.top_slide .slick-track > li.ms02 .bg {background-image:url('/images/common/modeselector/v2/bg02.jpg');}
.top_slide .slick-track > li.ms03 .bg {background-image:url('/images/common/modeselector/v2/bg03.jpg');}
.top_slide .slick-track > li.ms04 .bg {background-image:url('/images/common/modeselector/v2/bg04.jpg');}
.top_slide .slick-track > li.ms01:before {background-image:url('/images/common/modeselector/v2/bg01_effect.png');}
.top_slide .slick-track > li.ms02:before {background-image:url('/images/common/modeselector/v2/bg02_effect.png');}
.top_slide .slick-track > li.ms03:before {background-image:url('/images/common/modeselector/v2/bg03_effect.png');}
.top_slide .slick-track > li.ms04:before {background-image:url('/images/common/modeselector/v2/bg04_effect.png');}
.top_slide .slick-dots {position:absolute; bottom:4.6rem; left:0; right:0; z-index:1; vertical-align:middle; text-align:center; display:inline-block; }
.top_slide .slick-dots li {display:inline-block;  font-size:0px; margin:0 1rem; vertical-align:top;}
.top_slide .slick-dots li > button {padding:0; cursor: pointer; font-size:0; display:block; width:10px; height:10px; background:rgba(255, 255, 255, 0); border-radius:6px; text-indent: -9999px; border:1px solid #fff;}
.top_slide .slick-dots li.slick-active > button {background:#f7ff14; border-color:#f7ff14; width:6rem;}
.top_slide .slick-track .desc img {display:inline;}
.top_slide .slick-track > li.moving .bg { transform: scale(1, 1);}


footer {position:relative; font-family: 'Roboto'; width: 100%; padding:4rem 2.4rem 10rem; font-size: 12px; color: #ffff33; letter-spacing: 0.02em; z-index:4;}




/* popup */
.dimmed {position: fixed; left: 0; top: 0;  width: 100%; height: 100%; text-indent: -99999px; background: rgba(0, 0, 0, 0.8); left: 0; top: 0; z-index: 90; overflow: hidden;}
.dim_block {width: 100%; height: 100%; text-indent: -99999px; background: none; position: fixed; left: 0; top: 0; z-index: 90;}

@keyframes dim {
	0% {opacity: 0;}
	35% {opacity: 0.5;}
	80% {opacity: 0.2;}
	100% {opacity: 0.2;}
}

.popup {width: 100%;  height: 100%; position: absolute; top: 0; left: 0; z-index: 98;  display: none; overflow: hidden;}
.popup .pop_map {border-radius:50%; padding:3rem; box-sizing:border-box; border:0.2rem solid #ff0000; box-shadow:inset 0 0 5rem rgba(255, 0, 0, 0.6), 0 0 5rem rgba(255, 0, 0, 0.3);  width: 60rem; height: 60rem; margin-left: -30rem; position: fixed; top: 50%; left: 50%; margin-top:-30rem;  z-index: 98; animation: showing 1s; animation-fill-mode: forwards; background:rgba(255, 0, 0, 0.2);}
.popup .pop_map:before {position:absolute;  content:''; display:block; left:3rem; right:3rem; bottom:3rem; top:3rem; border:0.2rem solid #ff0000; border-radius:50%; background:url('/images/common/modeselector/v2/bg_pop.jpg') center center no-repeat;     background-size: cover;}
.popup .pop_map:after {z-index: 2; content:''; display:block; position:absolute; left:3rem; right:3rem; bottom:3rem; top:3rem; background-size: cover; background-position:center center; background-repeat:no-repeat; animation: flicker-5 8s linear infinite both;}
.popup .pop_map .title { margin:0 auto; opacity: 0; font-size:0; text-align:center; animation: map 0.7s; animation-delay: 1s; animation-fill-mode: forwards; position:relative; z-index:2; }
.popup .pop_map .title.ie {opacity: 1; animation: none; }
.popup .pop_map h3 { text-shadow: -1px 0px 1px #ff0088, 1px 0px 1px #00ddff; min-width:24rem; height:6rem; line-height: 5.6rem; position:relative; z-index:2; display:inline-block; background:rgba(51, 0, 0, 0.8); border-radius:3rem; border:0.2rem solid #ff0000; box-shadow:inset 0 0 0.5rem rgba(255, 0, 0, 0.5) , 0 0 2rem rgba(255, 0, 0, 0.3);  font-size: 20px; color: #fff; font-weight:500; letter-spacing:0.04em; }
.popup .pop_map h3.ie {opacity: 1; animation: none;}
.popup .btn_close {width: 4.8rem; height: 4.8rem; background: url(/images/common/modeselector/v2/btn_pop_close.png) 0 0 no-repeat; position: absolute; top:0; right:0; z-index: 99;}
.popup .btn_close > button {cursor:pointer; width: 4.8rem; height: 4.8rem; transition:none; border-radius: 50%; background-color:rgba(255, 255, 255, 0); background-repeat:no-repeat; background-position:0 0; background-image: url(/images/common/modeselector/v2/btn_pop_close.png);}
.popup .btn_close > button:hover {background-position:0 -4.8rem; transition:none;}
.popup .pop_map .map {width:25rem; height:25rem; margin:9.7rem auto 5rem; position:relative; z-index:2;}
.popup .pop_map .map img {max-width:100%;}

.popup .pop_map.escape:after {background-image:url('/images/common/modeselector/v2/img_escape_glitch.png');}
.popup .pop_map.chaos:after {background-image:url('/images/common/modeselector/v2/img_chaos_glitch.png');}
.popup .pop_map.headhunter:after {background-image:url('/images/common/modeselector/v2/img_headhunter_glitch.png');}
.popup .pop_map.freeforall:after {background-image:url('/images/common/modeselector/v2/img_freeforall_glitch.png');}
.popup .pop_map.destroy:after {background-image:url('/images/common/modeselector/v2/img_destroy_glitch.png');}
.popup .pop_map.ace:after {background-image:url('/images/common/modeselector/v2/img_ace_glitch.png');}
.popup .pop_map.eliminate:after {background-image:url('/images/common/modeselector/v2/img_eliminate_glitch.png');}
.popup .pop_map.glass:after {background-image:url('/images/common/modeselector/v2/img_glass_glitch.png');}
.popup .pop_map.bomb:after {background-image:url('/images/common/modeselector/v2/img_bomb_glitch.png');}
.popup .pop_map.deathmatch:after {background-image:url('/images/common/modeselector/v2/img_deathmatch_glitch.png');}


@media screen and (min-width: 1921px) {
html, body {height:100%;}
}



@media screen and (min-width: 768px){
.container .map_selector {height:660px !important;}
}	


@media screen and  (max-width: 1400px){
header {padding:2.4rem 2.4rem 0;}
}



@media screen and  (max-width: 1140px){
header {text-align:center; padding-top:4.8rem;} 	
#all_wrap {padding-top:12rem; background-size:cover , cover;}
#all_wrap:before {background-size:cover;}
.container {padding-left:2.4rem; padding-right:2.4rem; position:relative;}
.container .map_selector {width:auto; display:inline-block;}
.map_list {position:relative; top:auto; bottom:auto; left:auto; right:auto; display:block; text-align:center;  background:none !important; height:auto; transform:none;  margin-top:7.2rem; width:auto; }
.map_list li {display:inline-block; vertical-align:top;  margin:0.9rem; position:relative; top:auto !important;}	
.btn_reset:hover {background-position:0 0;  }
.container .map_selector .arrow {top:-7.2rem;}

.btn_reset {position:fixed; top:8px; right:4px; width:5.6rem; height:5.6rem; margin:0; background:none;     z-index: 3;}
.btn_reset button {width:5.6rem; height:5.6rem; background-image: url(/images/common/modeselector/v2/btn_reset_m.png); font-size:0;}
.btn_reset button:hover {background-position:0 0;}

.map_list li:nth-child(-n+5) {left:auto}
.map_list li:nth-child(n+6) {right:auto;}

.btn_reset button:before {display:none !important;}

footer {padding-top:9rem;}

}

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

.map_list li {background-size:100% auto;}
.map_list li label {font-size:2.4rem;}
.map_list li.dis label {font-size:2.4rem;}
.map_list li.dis label span {top: calc(50% + 3px);}
.map_list li label:before {background-size:100% auto !important; top:1.2rem;}
.container .map_selector {padding:0 4rem; }
.container .btn_start {width:18rem; height:18rem; margin-left:-9rem; margin-right:-9rem;}
.container .btn_start > button {background-size:100% auto; font-size:3.1rem; width:13.6rem; height:13.6rem;}
.container .btn_start > button:hover {background-position:0 0;}



.container .map_selector > div {width:100%; height:auto; background-size:contain;}
.container .map_selector canvas {    height: auto; position: relative; margin: 0 auto; width:100%; height:100%;}



.btn_reset {background-size:100% auto;}
.btn_reset button {background-size:100% auto;   padding-bottom: 0.5rem;}



footer {font-size:2.1rem;}


.popup .btn_close > button, .popup .btn_close {background-size:100% auto;}
.popup .pop_map h3 {font-size:2.9rem; }
}	





.preload {display: none;}



@keyframes showing {
	0% {opacity: 0; transform: rotate(3deg) scale(0.95);} 
	65% {opacity: 1; transform: rotate(0deg) scale(1.01);}
	100% {opacity: 1; transform: rotate(1deg) scale(1);}
}
@keyframes opacity {
	0% {opacity: 0.5; transform: scale(1);}
	20% {opacity: 0.9;}
	50% {opacity: 0.65; transform: scale(1.005);}
	65% {opaciy: 1;}
	100% {opacity: 0.5; transform: scale(1);}
}


@keyframes opacity2 {
	0% {opacity: 1;}
	12% {opacity: 0;}
	24% {opacity: 1;}
	36% {opacity: 0;}
	54% {opacity: 1;}
	62% {opacity: 0;}
	73% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 1;}
}


@keyframes map {
	0% {opacity: 0;}
	12% {opacity: 0.02;}
	24% {opacity: 0.01;}
	36% {opacity: 0.05;}
	54% {opacity: 0.02;}
	62% {opacity: 0.25;}
	73% {opacity: 0.01;}
	100% {opacity: 1;}
}
@keyframes mapImg {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


@keyframes spin {
  100% { transform:translate(-50% , -50%) rotate(360deg);}
}

@keyframes spin1 {
  100% { transform: rotate(-360deg);}
}

@keyframes spin2 {
  100% { transform: rotate(-405deg);}
}

@keyframes spin3 {
  0% { transform: rotate(45deg);}
  70% { transform: rotate(315deg);}
  100% { transform: rotate(405deg);}
}

@keyframes spin4 {
  0% { transform: rotate(0deg);}
  70% { transform: rotate(-315deg);}
  100% { transform: rotate(-360deg);}
}




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

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

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

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



@keyframes bg_all {from {background-position: center 0;} to {background-position: center -400%}}

@keyframes aim {
  0% {
    transform: translate(-50% , -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50% , -50%) rotate(160deg);
  }
  50% {
    transform: translate(-50% , -50%) rotate(0deg);
  }
  75% {
    transform: translate(-50% , -50%) rotate(160deg);
  }
  100% {
    transform: translate(-50% , -50%) rotate(0deg);
  }
}

@keyframes fade {
    0% {
        opacity: 0;
        transform: scale(1.2);
        z-index: 2
    }

    15% {
        opacity: 1;
        z-index: 2
    }

    49% {
        opacity: 1;
        z-index: 2
    }

    50% {
        z-index: 1
    }

    85% {
        opacity: 0
    }

    to {
        opacity: 0;
        transform: scale(1)
    }
}


@keyframes bg-move {
    0% {
        background-size: auto 150%;
    }

    to {
        background-size: auto 100%;
    }
}

@keyframes flicker-5 {
  0%,
  100% {
    opacity: 1;
  }
  -0.02% {
    opacity: 1;
  }
  0% {
    opacity: 1;
  }
  1% {
    opacity: 1;
  }
  1.02% {
    opacity: 1;
  }
  8.98% {
    opacity: 1;
  }
  9% {
    opacity: 0;
  }
  9.8% {
    opacity: 0;
  }
  9.82% {
    opacity: 1;
  }
  9.48% {
    opacity: 1;
  }
  9.5% {
    opacity: 1;
  }
  9.6% {
    opacity: 1;
  }
  9.62% {
    opacity: 1;
  }
  14.98% {
    opacity: 1;
  }
  15% {
    opacity: 0.5;
  }
  15.8% {
    opacity: 0.5;
  }
  15.82% {
    opacity: 1;
  }
  15.18% {
    opacity: 1;
  }
  15.2% {
    opacity: 0.7;
  }
  16% {
    opacity: 0.7;
  }
  16.02% {
    opacity: 1;
  }
  15.48% {
    opacity: 1;
  }
  15.5% {
    opacity: 0.5;
  }
  16.2% {
    opacity: 0.5;
  }
  16.22% {
    opacity: 1;
  }
  16.98% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  17.8% {
    opacity: 1;
  }
  17.82% {
    opacity: 1;
  }
  20.48% {
    opacity: 1;
  }
  20.5% {
    opacity: 0.9;
  }
  21.3% {
    opacity: 0.9;
  }
  21.32% {
    opacity: 1;
  }
  20.98% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  22.02% {
    opacity: 1;
  }
  39.98% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 1;
  }
  41.02% {
    opacity: 1;
  }
  40.48% {
    opacity: 1;
  }
  40.5% {
    opacity: 0.6;
  }
  41.4% {
    opacity: 0.6;
  }
  41.42% {
    opacity: 1;
  }
  41.98% {
    opacity: 1;
  }
  42% {
    opacity: 1;
  }
  42.8% {
    opacity: 1;
  }
  42.82% {
    opacity: 1;
  }
  59.98% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  61% {
    opacity: 1;
  }
  61.02% {
    opacity: 1;
  }
  60.18% {
    opacity: 1;
  }
  60.2% {
    opacity: 0.2;
  }
  61% {
    opacity: 0.2;
  }
  61.02% {
    opacity: 1;
  }
  60.78% {
    opacity: 1;
  }
  60.8% {
    opacity: 0.4;
  }
  61.6% {
    opacity: 0.4;
  }
  61.62% {
    opacity: 1;
  }
  61.38% {
    opacity: 1;
  }
  61.4% {
    opacity: 0;
  }
  62.2% {
    opacity: 0;
  }
  62.22% {
    opacity: 1;
  }
  61.78% {
    opacity: 1;
  }
  61.8% {
    opacity: 1;
  }
  62.8% {
    opacity: 1;
  }
  62.82% {
    opacity: 1;
  }
  75.98% {
    opacity: 1;
  }
  76% {
    opacity: 1;
  }
  77% {
    opacity: 1;
  }
  77.02% {
    opacity: 1;
  }
  77.98% {
    opacity: 1;
  }
  78% {
    opacity: 0.7;
  }
  78.8% {
    opacity: 0.7;
  }
  78.82% {
    opacity: 1;
  }
  78.98% {
    opacity: 1;
  }
  79% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  80.02% {
    opacity: 1;
  }
  99.98% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
  101% {
    opacity: 1;
  }
  101.02% {
    opacity: 1;
  }
}