@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); 

/* reset */
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:#041428; }
body,th,td,input,select,textarea,button{ line-height:1.2; color:#000; font-family: 'Chakra Petch', 'Roboto', 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; }
html {height: 100%; -webkit-text-size-adjust: none;-ms-text-size-adjust: none; font-size:62.5%;}
body {height: 100%;}

.country_wrap { background:url('/images/country/bg_country.jpg') 0 0 no-repeat; text-align:center;  background-size: cover;}
.country_wrap > .con {padding:19rem 0;}
.country_wrap .user {color:#fff; font-weight:700; font-size:24px; margin-top:9.6rem;}
.country_wrap .user:before {content:''; display:inline-block; margin-right:1rem; vertical-align:middle; width:20px; height:20px; background:url('/images/country/icon_user.png') 0 0 no-repeat;}

.country_wrap .nation {padding:5rem 0 2rem; margin:5rem 0; border-top:1px solid rgba(135, 207, 255, 0.5); border-bottom:1px solid rgba(135, 207, 255, 0.5); position:relative;}
.country_wrap .nation:before, .country_wrap .nation:after {content:''; display:block; position:absolute; width:10px; height:3px; background:#ff0000; left:50%; transform:translate(-50% , 0);}
.country_wrap .nation:before {top:-1px;}
.country_wrap .nation:after {bottom:-1px;}
.country_wrap .nation .txt {color:#87cfff; font-size:24px; font-weight:700;}
.country_wrap .nation .info {font-size:12px; color:#ffdd00; font-family:'Roboto'; margin:2rem 0;}
.country_wrap .nation .info:before {content:''; display:inline-block; margin-right:1rem; vertical-align:middle; width:25px; height:24px; background:url('/images/country/icon_noti.png') 0 0 no-repeat;}
.country_wrap .nation .nt_list li {display:inline-block; margin:3rem;}
.country_wrap .nation .nt_list li a {transition:none; padding-top:2rem; position:relative; border-radius:10px; display:block; width:205px; height:205px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/country/btn_nation.png');}
.country_wrap .nation .nt_list li a:before {display:none; border-radius:10px; content:''; position:absolute; top:0; bottom:0; left:0; right:0; border:3px solid #ffdd00;}
.country_wrap .nation .nt_list li a:hover {background-position:0 -205px;}
.country_wrap .nation .nt_list li a:hover:before {display:block;}
.country_wrap .btns {font-size:0;}
.country_wrap .btns a {width:190px; height:60px; line-height:60px; margin:0 1rem;}
.country_wrap .nation .inner {max-width:none; padding:0 2.5rem;}

.footer {position:relative; background:none;}


.btn_line_r {box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(0, 0, 0, 0.7); letter-spacing:0.02rem; color:#ff2c2c; border:1px solid #ff0000; position:relative;  text-align:center; border-radius:5px;  font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_line_r:before, .btn_line_r:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#e4140c;}
.btn_line_r:before {top:0; right:10px; }
.btn_line_r:after {bottom:0; left :10px; }
.btn_line_r:hover:before, .btn_line_r:hover:after {transition:all ease-in-out 0.2s; background:#ff0000; height:15px;}

.btn_line_r02 {box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(255, 0, 0, 0.6);; letter-spacing:0.02rem; color:#fff; border:1px solid #ff0000; position:relative;  text-align:center; border-radius:5px;  font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_line_r02:before, .btn_line_r02:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#fff;}
.btn_line_r02:before {top:0; right:10px; }
.btn_line_r02:after {bottom:0; left :10px; }
.btn_line_r02:hover {background:rgba(255, 0, 0, 0.8); color:#fff;}
.btn_line_r02:hover:before, .btn_line_r02:hover:after {transition:all ease-in-out 0.2s; height:15px;}

/* footer */
.footer { text-align:center; padding-bottom:8rem;}
.footer .info {padding:1rem 2rem; overflow:hidden; margin-bottom:8rem; background:rgba(255, 0, 0, 0.4); border-top:1px solid rgba(237, 16, 0, 0.3); border-bottom:1px solid rgba(237, 16, 0, 0.3);}
.footer .info .list_sns {float:left;}
.footer .info .list_service {float:right;}
.footer .info ul {font-size:0;}
.footer .info ul li {display:inline-block; vertical-align:middle; }
.footer .info .list_sns li {margin-right:1.2rem;}
.footer .info .list_sns li a {display:block; width:40px; height:40px; text-align:center; border:1px solid rgba(255, 255, 255, 0.2);}
.footer .info .list_sns li a:hover {border:1px solid rgba(255, 255, 255, 0.8); background:rgba(255, 255, 255, 0.5);}
.footer .info .list_service li {margin-right:2.8rem; line-height:42px;}
.footer .info .list_service li a {text-transform:uppercase; color:#fff; font-size:12px; font-weight:700;}
.footer .info .list_service li a:hover {color:#ffdd00;}
.footer .info .list_service li a img {vertical-align:middle; margin-left:4px; position:relative; top:-2px;}
.footer .contact {color:#ffffff; font-size:12px; margin:3.5rem 0 1rem; text-transform:uppercase; font-family: 'Roboto', sans-serif;}
.footer .contact a {color:#ffdd00;}
.footer .contact a:hover {text-decoration:underline;}
.footer .copyright {font-size:11px; color:#b7b7b7; font-family:'Roboto'; letter-spacing:0.01rem;}


/* new */
.all_country {position:relative; overflow:hidden; background-color:#125198; background-size: cover; text-align:center; padding-top:5rem; min-height:100%;}
.all_country .bg {position:absolute; top:0; bottom:0; left:0; right:0; animation:bg 15s linear; background-image:url('/images/country/bg.jpg');  background-repeat:no-repeat; background-position:center center; background-size:cover;  transform: scale(1, 1);}
.all_country h1 {position:relative; z-index:1;}
.all_country .cha {z-index:1; position:absolute; top:-4.5rem; right:6.64%; animation:fir 0.5s;}
.all_country .typing_wrap { z-index:1; position:relative; font-size:0;  margin:5rem 0 1rem;}
.all_country .typing_wrap .typing-txt{display: none;} 
.all_country .typing_wrap .typing {position:relative; text-shadow: 2px 2px 2px #000; padding:0 2.4rem; text-transform:uppercase; color:#fff; font-size:44px; font-weight:700; letter-spacing:0.04em; display:inline-block; } 
.all_country .typing_wrap .typing:after {margin-left:2rem; position:relative; top:-3px; vertical-align:middle; content:''; display:inline-block; /* position:absolute; */ width:0.2rem; height:3.6rem; background:#fff; /* right:0; top:50%; transform:translate(0, -50%); */ animation: cursor 0.3s infinite;}
.all_country .explan { z-index:1; position:relative; font-size:14px; color:#ffdd00; font-family:'Roboto'; text-shadow:0 0.2rem 0.2rem rgba(0, 0, 0, 0.5);}
.all_country .explan img {vertical-align:middle; margin-right:7px;}
.all_country .all_nation {padding:11.9rem 0 9rem; margin:6rem 0 5.5rem; background:rgba(0, 0, 0, 0.6); border-top:1px solid rgba(135, 207, 255, 0.5); border-bottom:1px solid rgba(135, 207, 255, 0.5); position:relative;}
.all_country .all_nation:before, .all_country .all_nation:after {animation: blink-2 2s both infinite; content:''; display:block; position:absolute; top:-168px; left:50%; transform:translate(-67% , 0); width:37.1rem; height:28.5rem; background-repeat:no-repeat; background-position:center center; background-size:100% auto;}
.all_country .all_nation:before {background-image:url('/images/country/light.png');  }
.all_country .all_nation:after {background-image:url('/images/country/light_effect.png'); animation-delay:0.5s;}
.all_country .list {font-size:0; margin-left:-4rem; position:relative;}
.all_country .list:before, .all_country .list:after {animation:scl 0.3s 0.2s; animation-fill-mode: forwards;   transform:translate(-50% , 0) scaleX(0); width:73.3rem; height:3.3rem; content:''; display:block; top:-138px; left:50%; position:absolute; background-position:center center; background-repeat:no-repeat; background-size:100% auto;}
.all_country .list:before { background-image:url('/images/country/line.png');}
.all_country .list:after { background-image:url('/images/country/line_effect.png');}
.all_country .list.bottom:before, .all_country .list.bottom:after {top:-44px; animation-delay:0.3s;}
.all_country .list li {display:inline-block; vertical-align:top; padding-left:4rem; margin:2rem 0;}
.all_country .list li .con {transition:all ease-in-out 0.2s; position:relative; z-index:1;}
.all_country .list li .con:before {transition:all ease-in-out 0.2s; z-index:-1; content:''; opacity:0; position:absolute; top:-2rem; bottom:-2rem; right:-2rem; left:-2rem; border-radius:1rem; background:url('/images/country/bg_satin.png') center center no-repeat; background-size:cover; border:1px solid rgba(255, 255, 255, 0.5);}
.all_country .list li .flag {max-width:14rem; border-radius:1rem; box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.5); position:relative;}
.all_country .list li .flag:before {border-radius: 1rem; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-image:url('/images/country/bg_satin_b.png'); background-position:center center; background-repeat:no-repeat; background-size:cover;}
.all_country .list li.new .flag:after { animation: jello-vertical 0.9s both; content:''; display:block; position:absolute; bottom:-1.2rem; left:-1.7rem; width:4.4rem; height:5.4rem; background:url('/images/country/icon_new.png') 0 0 no-repeat; background-size:100% auto;}
.all_country .list li .name {margin-left:-2rem; margin-right:-2rem; display:block; font-size:14px; font-weight:700; color:#fff; text-transform:uppercase; margin-top:1.7rem; position:relative;}
.all_country .list li .name:before {content:''; opacity:0; display:none; vertical-align:middle; width:1.5rem; height:1.5rem; background:url('/images/country/icon_link.png') 0 0 no-repeat; position:absolute; margin-left:-2rem; top:50%; margin-top:-0.75rem; background-size:100% auto;}
.all_country .list.bottom li .name {margin-top:1rem;}
.all_country .list li .con:hover:before {opacity:1;} 
.all_country .list li .con:hover .name {color:#ffea00; padding-left:20px;}
.all_country .list li .con:hover .name:before {opacity:1; display:inline-block;}  
.all_country .list li .con:hover .flag {box-shadow:none;}
.all_country .list li .con:hover .flag:before {background-image:url('/images/country/bg_satin_w.png');; background-size:cover; box-shadow:inset 0 0.3rem 1.6rem rgba(255, 255, 255, 0.3);}
.all_country .user {color:#fff; font-weight:700; font-size:24px; margin-bottom:3.6rem; }
.all_country .user:before {content:''; display:inline-block; margin-right:1rem; vertical-align:middle; width:20px; height:20px; background:url('/images/country/icon_user.png') 0 0 no-repeat;}
.all_country .btns {    position: relative; z-index: 1; font-size:0; margin-bottom:9.6rem;}
.all_country .btns a {width:190px; height:60px; line-height:60px; margin:0 1rem;}
.all_country .list.bottom {margin-top:7.6rem;}
.all_country .list .go_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}

@media screen and (max-width: 2700px) {
.all_country .cha {right:1rem;}	
}	

@media screen and (max-width: 1920px) {
.all_country .cha {right:-9rem;}	
}

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

@media screen and (max-width: 1023px) {
.country_wrap .nation .nt_list li {margin:0 1rem 1rem;}	
/* footer */
.footer .info .list_sns {float:none; margin-bottom:1rem;}
.footer .info .list_service {float:none;}
.footer .info .list_service ul li {width:50%; margin:0;}
}	

@media screen and (max-width: 768px) {
html {font-size:32%;}
.country_wrap h1 {padding:0 2.5rem;}
.country_wrap h1 img {max-width:234px;}	
.country_wrap .nation .nt_list li a {width:120px; height:120px; background-size:120px auto; padding-top:2.2rem;}
.country_wrap .nation .nt_list li a:hover {background-position:0 -120px;}
.country_wrap .nation .nt_list li a img {width:96px;}

.country_wrap .user {font-size:3.3rem;}
.country_wrap .nation .txt {font-size:3.3rem;}
.country_wrap .nation .info {font-size:2.1rem;}
.country_wrap .nation .info:before {width:15px; height:15px; background-size:15px auto;}
.country_wrap .nation .nt_list li {display:block; margin:3rem 0;}
.country_wrap .nation .nt_list li a {margin:0 auto;}

.country_wrap .btns a {width:130px; height:40px; line-height:40px;}

.btn_line_r {border-radius:3px;  font-size:2.4rem;}
.btn_line_r:before, .btn_line_r:after {width:2px; height:5px;}
.btn_line_r:before {right: 5px;}
.btn_line_r:after {left :5px; }
.btn_line_r:hover:before, .btn_line_r:hover:after {height:8px;}

.btn_line_r02 {border-radius:3px; font-size:2.4rem;}
.btn_line_r02:before, .btn_line_r02:after {width:2px; height:5px;}
.btn_line_r02:before {right: 5px;}
.btn_line_r02:after {left :5px; }
.btn_line_r02:hover:before, .btn_line_r02:hover:after {height:8px;}

/* footer */
.footer .info {padding:4.8rem 1rem 2rem;}
.footer .info .list_sns {margin-bottom:2.4rem;}
.footer .info .list_sns li a {width:36px; height:36px;}
.footer .info .list_service li {line-height: normal; padding: 2rem 0;}
.footer .info .list_service li a {font-size:2.1rem;}
.footer .f_logo img {max-width:84px;}
.footer .contact {font-size:2.1rem;}
.footer .copyright {font-size:2rem;}

/* new */
.all_country .all_nation:before, .all_country .all_nation:after {top:-90px;}
.all_country .btns a {width:130px; height:40px; line-height:40px;}
.all_country .list li .name {font-size:2.3rem;}
.all_country .user {font-size:3.3rem;}
.all_country h1 {padding:0 2.5rem;}
.all_country h1 img {max-width:40rem;}
.all_country .typing_wrap .typing {font-size:4.3rem;}
.all_country .explan {font-size:2.3rem;}
.all_country .list:before, .all_country .list:after {top:-70px;}
.all_country .list.bottom:before, .all_country .list.bottom:after {top:-28px;}
}

@keyframes cursor { 
  0%{background:#fff;} 
  50%{background:#000;} 
  100%{background:#fff;} 
}



@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes blink-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

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

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

@keyframes scl {
  0% {
        transform:translate(-50% , 0) scaleX(0);
  }
  100% {
        transform:translate(-50% , 0) scaleX(1);
  }
}

@keyframes bg {
  100% {
        transform: scale(1.2, 1.2);
  }
}