@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'PyeongChangPeace-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

*, *: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;}

h1, h2, h3, h4, h5, h6 {font-weight: 700;  font-family: 'PyeongChangPeace-Bold'; 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; text-indent: -99999px;}
button:hover {transition: all 0.6s ease; cursor: pointer;}
button:focus {outline: none;}

html {font-size: 62.5%;}



body {overflow-x: hidden; position: relative; width: 100%; color: #000; line-height: 1; font-weight: 500;  font-family: 'PyeongChangPeace-Bold'; text-align: center; background: #ee88dd;}

.all_wrap {z-index:1; position:relative; overflow:hidden; background:url('/images/common/mapselector/v5/bg_all.jpg') center 0 no-repeat; background-size:cover; padding-bottom:25.2rem;}
.all_wrap:before, .all_wrap:after {z-index:-1; content:''; display:block; position:fixed; }
.all_wrap:before {top:1.3rem; bottom:1.3rem; left:1.3rem; right:1.3rem; background:url('/images/common/mapselector/v5/obj_star_p.png') 0 0 no-repeat , url('/images/common/mapselector/v5/obj_star_p.png') 0 bottom no-repeat , url('/images/common/mapselector/v5/obj_star_p.png') right 0 no-repeat , url('/images/common/mapselector/v5/obj_star_p.png') right bottom no-repeat;}
.all_wrap:after {top:0; bottom:0; left:2.5rem; right:2.5rem; background:url('/images/common/mapselector/v5/txt_mapselector02.png') 0 center no-repeat , url('/images/common/mapselector/v5/txt_mapselector02.png') right center no-repeat;}

header {padding: 6rem 3rem 0; position:relative; z-index:2;}
header > h1 img {max-width:100%;}
		
.container {max-width: 1354px; width: 100%; margin:0 auto; position: relative; z-index: 2; margin-top:6.8rem; }

.cha {position:absolute; top:16rem;}
.cha01 {left:5.2rem; animation: fil 0.5s, sway 2s 0.5s infinite linear;}
.cha02 {right:11.2rem; animation: fir 0.5s, sway02 2s 0.5s infinite linear;}

.btn_reset {position:relative; margin:0 auto; width: 168px; height: 48px; background-position:0 0; background-repeat:no-repeat; z-index: 5; transition: none;}
.btn_reset button {padding-bottom:2px; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; text-indent:0;  background-image: url(/images/common/mapselector/v5/btn_reset.jpg); background-color:rgba(255, 255, 255, 0); border-radius:24px; display:flex; align-items:center; justify-content:center;}
.btn_reset button:before, .btn_reset button:after {content:''; display:block; position:absolute; top:50%; margin-top:-1.2rem;  width:2.4rem; height:2.4rem; background-repeat:no-repeat; background-position:0 0;}
.btn_reset button:before {background-image:url('/images/common/mapselector/v5/obj_star01.png'); left:1.2rem;}
.btn_reset button:after {background-image:url('/images/common/mapselector/v5/obj_star02.png'); right:1.2rem;}
.btn_reset button span {font-size:19px; letter-spacing:0.05em; font-weight: 800; text-transform:uppercase; background: linear-gradient(to right, #ffffdd, #ffddff , #bbffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.btn_reset button:hover {background-position:0 100%;  transition: none;}
.btn_reset button:hover:before, .btn_reset button:hover:after {background-position:0 100%;}


.container .map_list { position: absolute; top: -15px; z-index: 4; font-size:0; left:0; right:0;}
.container .map_list li {text-transform:uppercase; position: absolute; top: 0; width:188px; height:80px; text-align:center; text-transform:uppercase; padding:4px; border-radius:1.6rem;}
.container .map_list li:before {z-index: 1; width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; content: ""; display: block; position: absolute; inset: 0; padding:2px; background: linear-gradient(120deg, #cceeff, #ffccff); border-radius: 1.2rem;      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor !important; mask-composite: exclude !important;}
.container .map_list li input {display: none;}
.container .map_list li label { box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.15); cursor:pointer; display: inline-block; display:flex; align-items:flex-end; padding-bottom:4px; justify-content:center; position:absolute; top:4px; left:4px; bottom:4px; right:4px; z-index:1;  border-radius:1rem; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.container .map_list li label:after {content:''; display:block; position:absolute; top:0.4rem; left:.4rem; border-radius:50%; width:2.4rem; height:2.4rem; background:url('/images/common/mapselector/v5/obj_chk.png') 0 0 no-repeat; background-size:100% auto;}
.container .map_list li label:before {content:''; display:block; position:absolute; left:1px; right:1px; bottom:0; border-radius:0 0 1rem 1rem; box-shadow:0 1px 0 #ff99ff; background:url('/images/common/mapselector/v5/bg_ptn.png') 0 0 repeat; height:20px;}
.container .map_list li label span {position: relative; font-size:11px; letter-spacing:0.08em; background: linear-gradient(to right, #cceeff, #ffccff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)) drop-shadow(0, 0, 1px rgba(170, 0, 119, 0.3));}

.container .map_list li.map1 label {background-image: url(/images/common/mapselector/v5/check_map1.png);}
.container .map_list li.map2 label {background-image: url(/images/common/mapselector/v5/check_map2.png);}
.container .map_list li.map3 label {background-image: url(/images/common/mapselector/v5/check_map3.png);}
.container .map_list li.map4 label {background-image: url(/images/common/mapselector/v5/check_map4.png);}
.container .map_list li.map5 label {background-image: url(/images/common/mapselector/v5/check_map5.png);}
.container .map_list li.map6 label {background-image: url(/images/common/mapselector/v5/check_map6.png);}
.container .map_list li.map7 label {background-image: url(/images/common/mapselector/v5/check_map7.png);}
.container .map_list li.map8 label {background-image: url(/images/common/mapselector/v5/check_map8.png);}
.container .map_list li.map9 label {background-image: url(/images/common/mapselector/v5/check_map9.png);}
.container .map_list li.map10 label {background-image: url(/images/common/mapselector/v5/check_map10.png);}
.container .map_list li.map11 label {background-image: url(/images/common/mapselector/v5/check_map11.png);}
.container .map_list li.map12 label {background-image: url(/images/common/mapselector/v5/check_map12.png);}
.container .map_list li.map13 label {background-image: url(/images/common/mapselector/v5/check_map13.png);}
.container .map_list li.map14 label {background-image: url(/images/common/mapselector/v5/check_map14.png);}
.container .map_list li.map15 label {background-image: url(/images/common/mapselector/v5/check_map15.png);}
.container .map_list li.map16 label {background-image: url(/images/common/mapselector/v5/check_map16.png);}
.container .map_list li.map17 label {background-image: url(/images/common/mapselector/v5/check_map17.png);} 
.container .map_list li.map18 label {background-image: url(/images/common/mapselector/v5/check_map18.png);} 

.container .map_list li.dis {background:#000;}
.container .map_list li.dis:before {padding: 1px; background: linear-gradient(120deg, #9999ff, #dd55ff , #9999ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);}
.container .map_list li.dis label {box-shadow:none; background:url('/images/common/mapselector/v5/check_off.jpg') center center no-repeat; background-size:cover; align-items:center; padding-bottom:0;}
.container .map_list li.dis label:before , .container .map_list li.dis label:after {display:none;}
.container .map_list li.dis label span {background: linear-gradient(to right, #bb99ee, #bb99ee); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}



.container .map_list li.map18 {left: 0; top:0;}
.container .map_list li.map1 {left: 0; top: 84px;}
.container .map_list li.map2 {left: 0; top: 168px;}
.container .map_list li.map3 {left: 0; top: 252px;}
.container .map_list li.map4 {left: 0; top: 336px;}
.container .map_list li.map5 {left: 0; top: 420px;}
.container .map_list li.map6 {left: 0; top: 504px;}
.container .map_list li.map7 {left: 0; top: 588px;}
.container .map_list li.map8 {left: 0; top: 672px;}

.container .map_list li.map9 {right: 0; top: 0;}
.container .map_list li.map10 {right: 0; top: 84px;}
.container .map_list li.map11 {right: 0; top: 168px;}
.container .map_list li.map12 {right: 0; top: 252px;}
.container .map_list li.map13 {right: 0; top: 336px;}
.container .map_list li.map14 {right: 0; top: 420px;}
.container .map_list li.map15 {right: 0; top: 504px;}
.container .map_list li.map16 {right: 0; top: 588px;}
.container .map_list li.map17 {right: 0; top: 672px;}

.container .map_selector {width: 100%; position: relative; z-index: 3; margin-bottom:2rem;}
.container .map_selector > div {width: 716px; height: 716px; margin: 0 auto; border-radius:50%; position:relative; background:url('/images/common/mapselector/v5/bg_map.png') center center no-repeat; background-size:cover;}
.container .map_selector > div:after {animation: spin 40s infinite linear;  content:''; display:block; position:absolute; top:50%; left:50%; width:105.587%; height:105.587%; transform:translate(-50% , -50%);  background:url('/images/common/mapselector/v5/frame_map.png') 0 0 no-repeat; background-size:100% auto;}
.container .map_selector > div:before {content:''; display:block; position:absolute; left:50%; bottom:0; transform:translate(-50% , 115%); width:732px; height:220px; background:url('/images/common/mapselector/v5/img_stage.png') 0 0 no-repeat; background-size:100% auto;}
.container .map_selector .arrow {z-index:1; position:absolute; left:50%; margin-left:-3rem; top:-3.8rem; width:6rem; height:6rem;}
.container .map_selector .arrow:before {content:''; display:block; position:absolute; width:180%; height:180%; top:50%; left:50%; transform:translate(-50% , -50%); background:url('/images/common/mapselector/v5/arrow_shd.png') 0 0 no-repeat; background-size:100% auto;}
.container .map_selector .arrow img {max-width:100%;}
.container .map_selector .btn_start {border-radius:50%; position: relative; width: 20.112%; height: 20.112%; position: absolute; top: 50%; left: 50%; z-index: 6; transform:translate(-50% , -50%);}
.container .map_selector .btn_start > button {transition:none; position:absolute; top:0; left:0; z-index:1; background-repeat:no-repeat; background-position:0 0; background-color:rgba(255, 255, 255, 0); background-image:url('/images/common/mapselector/v5/btn_start.png'); background-size:100% auto; width: 100%; height:100%; background-size:cover !important; text-indent: -99999px; border-radius: 50%;}
.container .map_selector .btn_start > button:hover {background-position:0 50%;}
.container .map_selector .btn_start > button.dis {background-position:0 100%; cursor:default;}

.container .map_selector canvas { position: absolute; top: 0; left: 0; z-index: 4;}
.container .line {position:absolute; width:3.6rem; top:-160px; bottom:0; background:url('/images/common/mapselector/v5/ptn_line.jpg') 0 0 repeat;     overflow: hidden;}
.container .line:before {content:''; display:block; position:absolute; height:400em; left:0; right:0; background:url('/images/common/mapselector/v5/txt_mapselector.png') center 0 repeat-y;}
.container .line_l {left:26.6%;}
.container .line_l:before { animation: cloudLoop 150s linear infinite alternate; bottom:0; }
.container .line_r {right:26.6%;}
.container .line_r:before { animation: cloudLoop02 150s linear infinite alternate; top:0; }

footer {position:absolute; left:2.4rem; bottom:2.4rem; right:2.4rem; font-family: 'Roboto'; font-size: 12px; color:#000000; letter-spacing: 0.02em; }

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

.popup {width: 100%;  height: 100%; position: fixed; top: 0; left: 0; z-index: 98; display: none; overflow: hidden; }
.popup .pop_map { border-radius:50%;  width: 56.8rem; height: 56.8rem; margin-top:-24rem; margin-left:-28.4rem; position: absolute; top: 50%; left: 50%; z-index: 98; animation: showing 1s;  }
.popup .pop_map:before {z-index:-1; animation: spin1 25s infinite linear; content:''; display:block; position:absolute; width:114.086%; height:114.086%; top:50%; left:50%; transform:translate(-50% , -50%);  background: url(/images/common/mapselector/v5/pop_frame.png) 0 0 no-repeat; background-size:100% auto;}
.popup .pop_map:after {z-index:-1; content:''; display:block; position:absolute; width:169.015%; height:169.015%; top:50%; left:50%; transform:translate(-50% , -50%);  background: url(/images/common/mapselector/v5/bg_pop_holo.png) 0 0 no-repeat; background-size:100% auto;}
.popup .pop_map .title {position: absolute;  bottom:4.2rem; left: 0; right:0; z-index: 99; opacity: 0; animation: map 0.7s; animation-delay: 1s; animation-fill-mode: forwards;}
.popup .pop_map .title.ie {opacity: 1; animation: none;}
.popup .pop_map h3 {font-size:24px; letter-spacing:0.01em; background: linear-gradient(to bottom, #ffaaff, #fff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 1px rgba(68, 0, 68, 0.4));}
.popup .pop_map h3.ie {opacity: 1; animation: none;}
.popup .btn_close {width: 7.2rem; height: 7.2rem; background: url(/images/common/mapselector/v5/pop_close.png) 0 0 no-repeat; position: fixed; top:5.4rem; right:5.4rem; z-index: 99; background-size:100% auto;}
.popup .btn_close > button {cursor:pointer; width: 100%; height: 100%; 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/mapselector/v5/pop_close.png);  background-size:100% auto;}
.popup .btn_close > button:hover {background-position:0 100%; transition:none;}
.popup .pop_map .map {width:100%; height:100%; position:relative; box-shadow:0 0 4.8rem rgba(0, 0, 0, 0.6); border:0.2rem solid #ff00ff; border-radius:50%; overflow:hidden;}
.popup .pop_map .map img {min-width:100%; min-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}
.popup .pop_map .map:before {z-index:1; content:''; display:block; position:absolute; height:56.6%; bottom:0; left:0; right:0; background:url('/images/common/mapselector/v5/bg_gra.png') center bottom no-repeat , linear-gradient(to bottom, rgba(255, 204, 221, 0) , rgba(255, 204, 221, 0.5) , rgba(153, 136, 255, 0.5)); background-size:100% auto;}





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


@media screen and  (max-width: 2400px){
.cha {height:900px; top:24rem;}	
.cha01 {left:-9.8rem;}
.cha02 {right:-5.8rem;}
.container {max-width:1260px;}
}

@media screen and  (max-width: 1700px){
.cha {display:none;}
}	

@media screen and  (max-width: 1400px){
.container .map_list {left:5%; right:5%; top:0;}	
.container .map_list li {width:150px; height:64px;}	

.container .map_selector > div {width:576px; height:576px;}
.container .map_selector canvas {width:100%; height:100%;}

.container .line_l {left:30%;}
.container .line_r {right:30%;}


.container .map_list li.map1 {top: 68px;}
.container .map_list li.map2 {top: 136px;}
.container .map_list li.map3 {top: 204px;}
.container .map_list li.map4 {top: 272px;}
.container .map_list li.map5 {top: 340px;}
.container .map_list li.map6 {top: 408px;}
.container .map_list li.map7 {top: 476px;}
.container .map_list li.map8 {top: 544px;}

.container .map_list li.map10 {top: 68px;}
.container .map_list li.map11 {top: 136px;}
.container .map_list li.map12 {top: 204px;}
.container .map_list li.map13 {top: 272px;}
.container .map_list li.map14 {top: 340px;}
.container .map_list li.map15 {top: 408px;}
.container .map_list li.map16 {top: 476px;}
.container .map_list li.map17 {top: 544px;}



}

@media screen and  (max-width: 1280px){
.all_wrap:after {left:1.2rem; right:1.2rem;}
.container .map_list {left:3.6%; right:3.6%;}
}

@media only screen and (min-width: 769px) and (max-width: 1400px){
.container .map_selector {height:576px !important; width: 576px !important; margin-left:auto; margin-right:auto; }
.container .map_selector > div:before {    transform: translate(-50%, 123%);}
}	


@media screen and  (max-width: 1023px){
.all_wrap {background-size:2140px auto;     padding-bottom: 12rem;}	
.container {padding:0 18px;}
.container .map_list {position:relative;  margin-left:0; text-align:center; padding:0 1rem; left: auto; right: auto; top:auto;}
.container .map_list li {display:inline-block; vertical-align:top; position:relative; top:auto !important; margin:2px;}	

.container .line {bottom:36%;}
.container .line_l {left:24%;}
.container .line_r {right:24%;}

.container .map_selector > div:before {width: 106.794%; height: 30.727%; transform: translate(-50%, 114%);}
.btn_reset {margin-bottom:16rem;}

}	


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

.all_wrap {background-size: 295% auto;}
.all_wrap:before {background-size:3.3rem auto;}

.container .map_selector > div:before {width: 96.794%; height: 28.727%; transform: translate(-50%, 110%);}


.container .map_selector {width:93%; margin:0 auto 2rem; height: auto !important;}	
.container .map_selector > div {width:100%; height:auto; background-size:contain;}
.container .map_selector canvas {height: auto; position: static; margin: 0 auto;}

.container .line {bottom:30%;}
.container .line_l {left:16%;}
.container .line_r {right:16%;}
.container .line:before {background-size:100% auto;}

.btn_reset button span {font-size:2.8rem;}
.btn_reset button:before, .btn_reset button:after {background-size:100% auto;}

.container .map_list li {max-width:calc((100% - 12px) / 3); height:48px;}
.container .map_list li label span {font-size:1.6rem;}

.btn_reset {width:126px; height:36px;}

footer {font-size:2.1rem;}

.popup .pop_map h3 {font-size:3.3rem;}


}	

@media screen and  (max-width:540px){
.container .line {bottom:50%;}	
.container .map_selector > div:before {width: 101.794%; height: 30.727%; transform: translate(-50%, 93%);}
}

@media screen and  (max-width: 360px){
.popup .pop_map {width:50rem; height:50rem; margin-left:-25rem; margin-top:-24rem;}
.popup .pop_map h3 {font-size:2.7rem;}
}




.preload {display: none;}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

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

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

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

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



@keyframes arrow {
  0%   { height:0%; }
  50%   { height:100%; }
  100% { height:0%;  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@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 dim {
	0% {opacity: 0;}
	35% {opacity: 0.5;}
	80% {opacity: 0.2;}
	100% {opacity: 0.2;}
}


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

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


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

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

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

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


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

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