@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,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&family=Teko:wght@300..700&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: 'Teko', 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;}
button:hover {transition: all 0.6s ease; cursor: pointer;}
button:focus {outline: none;}



#all_wrap {background:url('/images/common/modeselector/v1/bg_light.png') center center no-repeat, url('/images/common/modeselector/v1/bg_all.jpg') center center no-repeat; background-size:auto , cover; position:relative; padding-top:7rem; overflow:hidden; min-height:100%;}
#all_wrap:before {z-index:1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/modeselector/v1/bg_shadow.png') center center no-repeat; background-size:auto;}

.cha {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); /* min-width:100%; */ opacity:0; animation:fiu 0.5s;     animation-fill-mode: forwards !important;}
.cha_m {display:none;}

.cha01, .cha_m01, .cha02, .cha_m02 {animation:fid 0.5s;}
.cha01, .cha_m01 {animation-delay:0.1s;}
.cha02, .cha_m02 {animation-delay:0.2s;}
.cha03, .cha_m03 {animation-delay:0.3s;}
.cha04, .cha_m04 {animation-delay:0.4s;}
.cha05, .cha_m05 {animation-delay:0.5s;}
.cha06, .cha_m06 {animation-delay:0.6s;}
.cha07, .cha_m07 {animation-delay:0.7s;}


header {padding:5rem 5rem 0;  z-index:2; position:absolute; text-align:left; top:0; left:0; right:0;}

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

.title_wrap {position:relative; display:inline-block;}
.title_wrap img {max-width:100%;}
.title_wrap .tit_top {animation:slash 1.5s;}
.title_wrap .tit_bottom {position:absolute; top:0; left:0; animation:slash02 1.5s;}
.title_wrap .light {position:absolute; top:0; left:0;}


.btn_reset {padding-top:4.6rem; position:relative; margin:0 auto; width:19.4rem; height:13.6rem; background:url('/images/common/modeselector/v1/bg_reset.png') 0 0 no-repeat; z-index: 1; transition: none;}
.btn_reset button {border-radius:1rem; text-align:left; position:relative; overflow:hidden; padding-left:7.6rem; font-family: 'Chakra Petch'; transition:none; width:18.6rem; height:8.5rem; background-color:rgba(255, 255, 255, 0); background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/modeselector/v1/btn_reset.png'); }
.btn_reset button span {font-size:20px; font-weight:700; background:linear-gradient(to bottom, #494949, #4a4069, #09070e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow:0 0 1rem rgba(255, 255, 255, 0.5);}
.btn_reset button:hover {background-position:0 -85px;}
.btn_reset button:hover span {background:linear-gradient(to bottom, #f5f5f5, #ffffff, #f5f5f5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.75));}

.btn_reset button span:after {  animation: sheen 3s 1s forwards infinite;  content: ''; position: absolute; top: 0; right: -15px; bottom: 0; left: -15px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2) 50%, transparent);  transform: rotateZ(60deg) translate(-1em, 5em);}
.btn_reset button:hover span:after {display:none;}

.map_list {padding:11px; width:1122px; position: absolute; top:50%; transform:translate(-50%, -50%); left:50%;  z-index: 4; font-size:0;  height:367px; background:url('/images/common/modeselector/v1/bg_list.png') 0 0 no-repeat, url('/images/common/modeselector/v1/bg_list_right.png') right 0 no-repeat, url('/images/common/modeselector/v1/img_rope_l.png') left 200px top 50% no-repeat, url('/images/common/modeselector/v1/img_rope_r.png') right 204px top 50% no-repeat; margin-top:-83px;}
.map_list li {position:absolute; width:160px; height:6rem; line-height:6rem; border-radius:30px; background:linear-gradient(to bottom, #3678ff, #04159c);  border:1px solid #0066ff; box-shadow:0 0.3rem 0.04rem rgba(0, 0, 0, 0.5);}
.map_list li:nth-child(even) {background:linear-gradient(to bottom, #6935ff, #3303be); border-color:#4300ff;}
.map_list li:last-child {margin-bottom:0;}
.map_list li input {display: none;}
.map_list li label {padding-left:6.4rem; text-align:left; cursor:pointer; display: block;  position:absolute; bottom:0; right:0; top:0; left:0; font-size:18px; color:#fff; font-weight:500; text-transform:uppercase;}
.map_list li label:before {position:absolute; top:0.7rem; left:0.8rem; content:''; display:block; width:4.4rem; height:4.4rem; background-repeat:no-repeat; background-position:0 -4.4rem;}
.map_list li.dis {background: rgba(12, 63, 155, 0.6); box-shadow: inset 0 0.3rem 0.3rem rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.3);}
.map_list li.dis input + label {color: rgba(0, 0, 0, 0.7);}
.map_list li.dis:nth-child(even) {background: rgba(60, 41, 102, 0.6); border-color: rgba(0, 0, 0, 0.3);} 
.map_list li.dis:nth-child(even) input + label {color: rgba(0, 0, 0, 0.7);}

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

.map_list li.map1, .map_list li.map6 {top:11px;}
.map_list li.map2, .map_list li.map7 {top:79px;}
.map_list li.map3, .map_list li.map8 {top:147px;}
.map_list li.map4, .map_list li.map9 {top:215px;}
.map_list li.map5, .map_list li.map10 {top:283px;}

.map_list li.map1 label:before {background-image:url('/images/common/modeselector/v1/check1.png'); height:4.5rem; background-position:0 -4.5rem;}
.map_list li.map2 label:before {background-image:url('/images/common/modeselector/v1/check2.png'); height:4.5rem; background-position:0 -4.5rem;}
.map_list li.map3 label:before {background-image:url('/images/common/modeselector/v1/check3.png');}
.map_list li.map4 label:before {background-image:url('/images/common/modeselector/v1/check4.png');}
.map_list li.map5 label:before {background-image:url('/images/common/modeselector/v1/check5.png'); height:4.5rem; background-position:0 -4.5rem;}
.map_list li.map6 label:before {background-image:url('/images/common/modeselector/v1/check6.png');}
.map_list li.map7 label:before {background-image:url('/images/common/modeselector/v1/check7.png');}
.map_list li.map8 label:before {background-image:url('/images/common/modeselector/v1/check8.png'); height:4.5rem; background-position:0 -4.5rem;}
.map_list li.map9 label:before {background-image:url('/images/common/modeselector/v1/check9.png');}
.map_list li.map10 label:before {background-image:url('/images/common/modeselector/v1/check10.png');}

.map_list li.dis label:before {background-position:0 0;}

.container .map_selector {width: 100%; position: relative; z-index: 3; margin-bottom:3px;}
.container .map_selector > div {box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.5); width: 660px; height: 660px; margin: 0 auto; background:url('/images/common/modeselector/v1/bg_frame.png') 0 0 no-repeat; border-radius:50%; position:relative;}
.container .map_selector > div:before { animation: spin 20s infinite linear; box-shadow:0 0.4rem 0.4rem rgba(0, 0, 0, 0.5); content:''; display:block; width:700px; height:700px; background:url('/images/common/modeselector/v1/bg_frame.png') 0 0 no-repeat; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}
.container .map_selector > div:after {animation: spin2 30s infinite linear; z-index: 4; content:''; display:block; width: 14rem; height: 14rem; margin-left: -7rem;  margin-top: -7rem; background:url('/images/common/modeselector/v1/bg_start.png') 0 0 no-repeat; position: absolute; top: 50%; left: 50%;}
.container .map_selector .arrow {position:absolute; left:50%; margin-left:-1.1rem; top:-3.6rem;  z-index: 5; width:2.6rem; height:5.2rem; }
.container .map_selector .arrow img {max-width:100%;}
.container .btn_start {border-radius:50%;  z-index: 6; width: 10.6rem; height: 9.9rem; position:absolute; top:50%; left:50%; border-radius: 50%; margin-left:-5.3rem; margin-top:-4.5rem;}
.container .btn_start > button {transition:none; z-index:1; background-color:rgba(255, 255, 255, 0); background-image:url('/images/common/modeselector/v1/btn_start.png'); background-position:0 0; width: 100%; height: 100%; text-indent: -99999px; border-radius: 50%;}
.container .btn_start > button:hover {background-position:0 -9.9rem;}


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

footer {position:relative; font-family: 'Roboto'; width: 100%; padding: 13.5rem 2.4rem 8.5rem; font-size: 12px; color: #ffffff; letter-spacing: 0.02em; font-weight:300; }




/* 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 {padding-top:12.4rem; width: 660px; height: 659px; margin-left: -330px; position: absolute; top: 214px; left: 50%; z-index: 98; animation: showing 1s; animation-fill-mode: forwards; background:url('/images/common/modeselector/v1/bg_pop.png') center center no-repeat;}
.popup .pop_map:before { animation: spin3 20s infinite linear; z-index:1; content:''; display:block; width:100%; height:100%; background: url(/images/common/modeselector/v1/bg_pop_aim.png) no-repeat center center; position:absolute; top:0; }
.popup .pop_map .title {width: 24.9rem; height:8rem; line-height: 8rem; margin:0 auto; opacity: 0; 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 {position:relative; z-index:2; font-weight:400; width:100%; height:100%; background:url('/images/common/modeselector/v1/pop_name.png') 0 0 no-repeat; font-size: 24px; color: #fff; letter-spacing:0.04em; }
.popup .pop_map h3.ie {opacity: 1; animation: none;}
.popup .btn_close {width: 5.1rem; height: 5.1rem; background: url(/images/common/modeselector/v1/btn_pop_close.png) 0 0 no-repeat; position: absolute; top:0; right:0; z-index: 99;}
.popup .btn_close > button {cursor:pointer; width: 5.1rem; height: 5.1rem; 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/v1/btn_pop_close.png);}
.popup .btn_close > button:hover {background-position:0 -5.1rem; transition:none;}
.popup .pop_map .map {width:25rem; height:25rem; margin:0 auto 2rem; position:relative; z-index:2;}
.popup .pop_map .map img {max-width:100%;}


@media screen and (min-width: 1921px) {
html, body {height:100%;}
body, footer {background-size:cover !important;}
}

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



@media screen and  (max-width: 1140px){
header {text-align:center;} 	
#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; left:auto; top:auto; display:block; text-align:center;  background:none !important; height:auto; transform:none; padding:1.2rem 0; margin-top:0; width:auto;}
.map_list li {display:inline-block; vertical-align:top;  margin:1.2rem; position:relative; top:auto !important;}	
.map_list li label {padding-left:6rem;}
.btn_reset {margin-bottom:3.8rem;}
.btn_reset:hover {background-position:0 0;  }

.map_selector:before, .map_selector:after {    width: calc(50% - 3rem); content:''; display:block; position:absolute; top:51%; transform:translate(0, -50%); height:100%; background-repeat:no-repeat; background-position:0 center; background-size:100% auto; z-index:5;}
.map_selector:before {background-image:url('/images/common/modeselector/v1/img_rope_l.png'); left:-3rem;}
.map_selector:after {background-image:url('/images/common/modeselector/v1/img_rope_r.png'); right:-3rem;}


.container .btn_start {margin-top: -4.8rem;}
.map_list li:nth-child(-n+5) {left:auto}
.map_list li:nth-child(n+6) {right:auto;}

/* .cha {top: 0;  transform: none;  left: -45%;  min-width: 0;  max-width: 200%;}
.cha07, .cha06, .cha04 {display:none;}
.cha03, .cha05 {top:auto; bottom:0;} */

.cha {display:none;}
.cha_m {display:block; position:absolute;}
.cha_m01 {left:0; top:0; max-width:50%;}
.cha_m02 {top:0; right:0; max-width:39%;}
.cha_m03 {bottom:0; left:0; max-width:31%;}
.cha_m04 {bottom:0; right:0; max-width:39%;}

footer {padding-top:35rem;}
}

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

.map_list li {width:20rem; height:7.5rem; line-height:7.5rem;}
.map_list li label {font-size:2.7rem;}
.map_list li label:before {background-size:100% auto !important; top:1.2rem;}
.container .map_selector {padding:0 4rem; }
.container .btn_start > button {background-size:100% auto;}
.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%;}

.container .map_selector > div:before {width:calc(100% + 4rem); height:calc(100% + 4rem); background-size:100% auto;}

.container .map_selector > div:after {background-size:100% auto;}

.map_selector:before, .map_selector:after {    width: calc(50% - 6rem);}
.map_selector:before {left:0;}
.map_selector:after {right:0;}

.btn_reset {background-size:100% auto;}
.btn_reset button {background-size:100% auto; padding-left:7rem;}
.btn_reset button span {font-size:2.9rem;}



footer {font-size:2.1rem; padding-top:30%;}

.popup .pop_map {width:auto; margin-left:0; left:14.4rem; right:14.4rem; top:13%; height:auto; background-size:contain; padding-bottom:12.4rem;}
.popup .pop_map:before { background-size:contain;}
.popup .btn_close > button, .popup .btn_close {background-size:100% auto;}
.popup .pop_map h3 {font-size:3.3rem; background-size:100% auto;}
}	


@media screen and  (max-width: 400px){
.popup .pop_map {left:4.8rem; right:4.8rem;}
}



.preload {display: none;}

@keyframes slash{
  0%{
        transform: translate(0 , 0);
  }
  10%{
        transform: translate(-150px , 0);
  }
  100%{
    transform: translate(0 , 0);
  }
}

@keyframes slash02{
  0%{
        transform: translate(0 , 0);
  }
  10%{
        transform: translate(150px , 0);
  }
  100%{
    transform: translate(0 , 0);
  }
}

@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 sheen {
    100% {
        transform: rotateZ(60deg) translate(0, -5em);
    }
}