@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Roboto&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;}

h1, h2, h3, h4, h5, h6 {letter-spacing: 0.4px; font-weight: 700; font-family: 'Barlow'; text-transform: uppercase;}
ol, ul, li {font-size: 0; letter-spacing: -4px; 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;}

@media screen and (min-width: 1921px) {
html, body {height:100%;}
body, footer {background-size:cover !important;}
footer {position:absolute; bottom:0;}
.bg_effect {left:50% !important; right:auto !important;  transform: translate(-50%, -0); width:1920px;}
.bg_effect_line .wire01 {left:auto; right:0;}
.bg_effect_line .wire02, .bg_effect_line .wire03 {top:auto; bottom:0;}
.bg_effect_line .bar01, .bg_effect_line .bar02 {left:50%; transform: translate(-50%, -0);}
}

body {position: relative; width: 100%; color: #000; line-height: 1; font-weight: 500; font-family: 'Barlow', sans-serif; text-align: center; background: #000 url(/images/common/mapselector/v1/bg.jpg) no-repeat 50% top;}
body:after {position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(/images/common/mapselector/bg_dim_pop.png) url(/images/common/mapselector/bg_dim_pop_b.jpg) url(/images/common/mapselector/pop_bg.png);}

header {padding-top: 64px; position:relative; z-index:2;}
header > h2 {position:absolute; top:48px; left:48px;}
header > h2 img {width:200px;} 

	
.container {max-width: 1344px; width: 100%; margin:0 auto; position: relative; z-index: 2; padding-top:74px; overflow:hidden;}

.btn_reset {position:relative; margin:0 auto; width: 168px; height: 48px; background-position:0 0; background-repeat:no-repeat; background-image: url(/images/common/mapselector/v1/btn_reset.png); z-index: 5; transition: none;}
.btn_reset:hover {background-position:0 -48px;  transition: none;}
.btn_reset button {font-size:18px; color:#000000; width: 100%; height: 100%; background-color: transparent; text-indent:0; font-weight:600;}

.container .map_list { position: absolute; top: 0; z-index: 4; font-size:0; left:0; right:0;}
.container .map_list li {position: absolute; top: 0; box-shadow:6px 0 12px rgba(0, 0, 0, 0.8);}
.container .map_list li input {display: none;}
.container .map_list li label {cursor:pointer; display: inline-block; background:none; width:0px; height:0px; position:absolute; bottom:0; right:0;}
.container .map_list li.on input + label {background: url(/images/common/mapselector/v1/btn_check_on.png) no-repeat 50% 50%; width: 24px; height: 24px;}
.container .map_list li.map18 {left: 0; top:36px;}
.container .map_list li.map1 {left: 0; top: 120px;}
.container .map_list li.map2 {left: 0; top: 204px;}
.container .map_list li.map3 {left: 0; top: 288px;}
.container .map_list li.map4 {left: 0; top: 372px;}
.container .map_list li.map5 {left: 0; top: 456px;}
.container .map_list li.map6 {left: 0; top: 540px;}
.container .map_list li.map7 {left: 0; top: 624px;}
.container .map_list li.map8 {left: 0; top: 708px;}

.container .map_list li.map9 {right: 0; top: 36px;}
.container .map_list li.map10 {right: 0; top: 120px;}
.container .map_list li.map11 {right: 0; top: 204px;}
.container .map_list li.map12 {right: 0; top: 288px;}
.container .map_list li.map13 {right: 0; top: 372px;}
.container .map_list li.map14 {right: 0; top: 456px;}
.container .map_list li.map15 {right: 0; top: 540px;}
.container .map_list li.map16 {right: 0; top: 624px;}
.container .map_list li.map17 {right: 0; top: 708px;}

.container .map_selector {width: 100%; position: relative; z-index: 3; margin-bottom:60px;}
.container .map_selector > div {border-radius:50%; box-shadow:24px 10px 48px #000; width: 720px; height: 720px; margin: 0 auto; background:url('/images/common/mapselector/v1/bg_frame.png') 0 0 no-repeat;; border-radius:50%; position:relative;}
.container .map_selector > div:before {content:''; display:block; position:absolute; top:0; left:0; z-index: 5;  width:100%; height:100%; background:url('/images/common/mapselector/v1/bg_frame_line.png') 0 0 no-repeat;}
.container .map_selector > div:after { z-index:-1; content:''; display:block; width:215px; height:404px; background:url('/images/common/mapselector/v1/spin.png') 0 0 no-repeat; position:absolute; top:-30px; right:-110px;}
.container .map_selector .arrow {position:absolute; left:50%; margin-left:-49px; top: -53px; z-index: 5; width:98px; height:96px; }
.container .map_selector .arrow:before {content:''; display:none; position:absolute; top:0; left:0; height:0; width:98px; background:url('/images/common/mapselector/v1/arrow.png') 0 0 no-repeat; animation: arrow 1.5s ease-in-out infinite;}
.container .map_selector .btn_start {border-radius:50%; position: relative; width: 192px; height: 192px; margin-left: -96px;  margin-top: -96px; background:#000; position: absolute; top: 50%; left: 50%; z-index: 6;}
.container .map_selector .btn_start:before {content:''; display:block; position:absolute; top:-10px; left:-10px; width:212px; height:212px; background:url('/images/common/mapselector/v1/btn_frame.png') 0 0 no-repeat; animation: spin3 30s infinite linear;}
.container .map_selector .btn_start > button {position:absolute; top:24px; left:24px; z-index:1; background:rgba(255, 255, 255, 0) url('/images/common/mapselector/v1/btn_start.png') 0 0; width: 144px; height: 144px; text-indent: -99999px; border-radius: 50%;}
.container .map_selector .btn_start > button:hover {background:rgba(255, 255, 255, 0) url('/images/common/mapselector/v1/btn_start_ov.png') 0 0;}
.container .map_selector .btn_start > button:before {content:''; display:block; position:absolute; top:-11px; left:-11px; width:166px; height:166px; background:url('/images/common/mapselector/v1/wire.png') 0 0 no-repeat; animation: spin4 30s infinite linear;}
.container .map_selector .btn_start > button:hover:before {display:none;}
.container .map_selector canvas { position: absolute; top: 0; left: 0; z-index: 4;}

footer {position:relative; font-family: 'Roboto'; width: 100%; padding: 28px 0 70px; font-size: 12px; color: #999999; letter-spacing: 0.02rem; }

.bg_effect, .bg_effect_line {position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;}
.bg_effect img, .bg_effect_line img {position:absolute; top:0; left:0;}
.bg_effect .spider {top:0; left:26%;  animation: spider-move-1 5s infinite; }
.bg_effect .scibble {top:240px; left:0;}
.bg_effect .dolphin {top:485px; right :0; left:auto;}
.bg_effect .skull {top:590px; right :420px; left:auto;}
.bg_effect_line .bar01 {z-index:1;} 

@keyframes spider-move-1 {
  0%, 100% {
    margin-top: 95px;
  }
  67% {
    margin-top: calc(95px + 104px);
  }
}

@keyframes spin {
  100% { transform: 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 arrow {
  0%   { height:0%; }
  50%   { height:100%; }
  100% { height:0%;  }
}


/* 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 {width: 650px; height: 640px; margin-left: -325px; position: absolute; top: 214px; left: 50%; z-index: 98; animation: showing 1s; animation-fill-mode: forwards;}
.popup .pop_map:before {z-index:1; content:''; display:block; width:100%; height:100%; background: url(/images/common/mapselector/v1/pop.png) no-repeat center center; position:absolute; top:0; }
.popup .pop_map .title {position: absolute; margin-left: -120px; bottom:70px; left: 50%; 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 {width: 240px; height:48px; background:url('/images/common/mapselector/v1/map_bar.jpg') 0 0 repeat-x, url('/images/common/mapselector/v1/map_bar.jpg') 0 bottom repeat-x; font-size: 24px; color: #eedd66; font-weight:600; line-height: 48px;}
.popup .pop_map h3.ie {opacity: 1; animation: none;}
.popup .btn_close {width: 72px; height: 72px; background: url(/images/common/mapselector/v1/btn_pop_close.png) 0 0 no-repeat; position: absolute; top: -92px; right: -92px; z-index: 99;}
.popup .btn_close > button {cursor:pointer; width: 72px; height: 72px; 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/v1/btn_pop_close.png);}
.popup .btn_close > button:hover {background-position:0 -72px; transition:none;}
.popup .pop_map .map {width:100%; height:100%; position:relative;}
.popup .pop_map .map:before {content:''; display:block; position:absolute; width:1128px; height:888px; left:50%; top:50%; transform: translate(-50%, -50%); z-index:-1; background: url(/images/common/mapselector/v1/btn_pop_bg.png) 0 0 no-repeat;}
.popup .pop_map .map:after {content:''; display:block; position:absolute; width:100%; height:100%;  top:0; background: url(/images/common/mapselector/v1/pop_gra.png) 0 0 no-repeat;}



@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;}
}




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


@media screen and  (max-width: 1400px){
.container .map_list {left:18px; right:18px;}	
.container .map_list li {width:144px;}
.container .map_list li img {width:100%;}	
.container .map_list li.map1 {top: 104px;}
.container .map_list li.map2 {top: 172px;}
.container .map_list li.map3 {top: 240px;}
.container .map_list li.map4 {top: 308px;}
.container .map_list li.map5 {top: 372px;}
.container .map_list li.map6 {top: 440px;}
.container .map_list li.map7 {top: 504px;}
.container .map_list li.map8 {top: 568px;}

.container .map_list li.map10 {top: 104px;}
.container .map_list li.map11 {top: 172px;}
.container .map_list li.map12 {top: 240px;}
.container .map_list li.map13 {top: 308px;}
.container .map_list li.map14 {top: 372px;}
.container .map_list li.map15 {top: 440px;}
.container .map_list li.map16 {top: 504px;}
.container .map_list li.map17 {top: 568px;}

.container .map_selector > div {width:576px; height:576px;}
.container .map_selector canvas {width:100%; height:100%;}
.container .map_selector > div:before {width:100%; height:100%; background-size:contain;}
.container .map_selector .btn_start {width:154px; height:154px; margin-left:-77px; margin-top:-77px;}
.container .map_selector .btn_start:before {width:170px; height:170px; background-size:contain;}
.container .map_selector .btn_start > button {width:115px; height:115px; background-size:contain !important; top:18px; left:18px;}
.container .map_selector .btn_start > button:before {width:132px; height:132px; background-size:contain; top:-8px; left:-8px;}

.bg_effect_line img {left:50%; transform: translate(-50%, -0);}
.bg_effect .spider {display:none;}
.bg_effect .skull {top:500px; right:160px;}
}



@media screen and  (max-width: 960px){
header {padding-top:42px;}	
header > h2 {position:static; margin:0 auto 8px;}
.container {padding:62px 18px 0;}
.container .map_list {position:static; display:inline-block; width:auto; margin-left:-12px; text-align:left;}
.container .map_list li {display:inline-block; vertical-align:top; width:calc(100% / 6); margin-bottom:12px; padding-left:12px; position:relative; top:auto !important;}	
.container .map_selector {margin-bottom:48px;}
.btn_reset {position:absolute; top:0; right:36px; width:60px; height:60px; background:url(/images/common/mapselector/v1/btn_reset_m.png) 0 0 no-repeat; }
.btn_reset button {font-size:0;}
.btn_reset:hover {background-position:0 0;  }

.bg_effect .scibble, .bg_effect .dolphin  {display:none;}
.bg_effect_line .bar02 {top:auto; bottom:5%;}
.bg_effect .skull {top:300px; width:200px; right:-100px;}
}

@media screen and  (max-width: 640px){
header {padding-top:26px;}	
header > h2 {margin:0;}
header > h2 img {width:95px;}	
header > h1 img {width:262px;}
.btn_reset {width:36px; height:36px; background-size:36px auto; right:9px;}
	
.container {padding:30px 8px 0;}	
.container .map_list {margin-left:-6px;}
.container .map_list li {width:calc(100% / 4); padding-left:6px; margin-bottom:6px;}
.container .map_list li.on input + label {width:12px; height:12px; background-size:12px auto;}
.container .map_selector {padding:0 10px; margin-bottom:27px;}

.container .map_selector .btn_start {width:90px; height:90px; margin-left:-45px; margin-top:-45px;}
.container .map_selector .btn_start:before {width:99px; height:99px; top:-5px; left:-5px;}
.container .map_selector .btn_start > button {width:68px; height:68px; top:11px; left:11px;}
.container .map_selector .btn_start > button:before {width:78px; height:78px;  top:-5px; left:-5px;}

.container .map_selector .arrow {width:44px; height:43px; margin-left:-22px; top:-25px;}
.container .map_selector .arrow img {width:100%;}




footer {padding:16px 0 22px; font-size:10px;}

.popup .pop_map {width:80%; margin-left:0; left:10%; height:auto;}
.popup .pop_map:before {background-size:contain; background-position:0 0;}
.popup .pop_map .map img {max-width:100%;}
.popup .pop_map .map:after, .popup .pop_map .map:before {background-size:contain;}
.popup .pop_map .title {bottom:10%;}
.popup .pop_map .map:before {height: 141%; width: 180%;}
.popup .btn_close, .popup .btn_close > button {width:48px; height:48px; background-size:48px auto;}
.popup .btn_close {right:18px; top:18px;}
.popup .btn_close > button:hover {background-position:0 0;}
.popup .pop_map .title {width:37%; margin-left:0; transform: translate(-50%, 0);}
.popup .pop_map h3 {width:100%; height:24px; line-height:24px; font-size:12px;}
}	

@media only screen and (min-width: 609px) and (max-width: 1400px){
.container .map_selector {height:576px !important;}
}	

@media screen and  (max-width: 608px){
.container .map_selector > div {width:100%; height:auto; background-size:contain;}
.container .map_selector canvas {    height: auto; position: static; margin: 0 auto;}
}


.preload {display: none;}