@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

html,body{width:100%;height:100%;overflow:hidden;font-size:13px;font-family: 'NanumSquare', sans-serif;}
canvas{margin:0 auto;min-height:100%;}
#ran2relay{max-width:1080px;width:100%;height:100%;margin:0 auto;}

.empty_row{height:100px;line-height:100px;text-align:center;font-size:.8em;font-weight:bold;}

.btn-rig{}

.modal_normalmodal_normal{position:relative;border-radius:15px;max-width:300px;overflow:hidden;box-shadow:2px 2px 5px 3px rgba(0,0,0,0.6);background:#ffffff;}
.modal_normal .title{padding:1em;color:#151515;}
.modal_normal .title h3{font-size:1.4em;font-weight:800;line-height:1;text-align:center;}
.modal_normal .title h3 img{height:1em;}
.modal_normal .title p{font-size:1.4em;font-weight:400;margin-top:0.7em;}
.modal_normal .icon-remove{position:absolute;right:1.2em;top:1.2em;cursor:pointer;background:url('../images/modal/modal_close.png') center no-repeat; background-size:100% 100%; width:2.3em; height:2.3em; }
.modal_normal .cont{min-height:30px;font-size:1.5em;text-align:center;padding-bottom:20px;}
.modal_normal .cont img{max-width:100%;}
.modal_normal .btn-bottomArea{text-align:center;}
.modal_normal .btn-bottomArea .btn-rig{background:#feda00;display:inline-block;font-size:1.2em;font-weight:bold;height:30px;line-height:30px;border:0px;-webkit-appearance:none;color:#fff;border-radius:15px;text-align:center;width:90px;}

.modal_main{position:relative;border-radius:15px;overflow:hidden;box-shadow:2px 2px 5px 3px rgba(0,0,0,0.6);background:#ffffff url('../images/modal/modal_top_main.png') right top no-repeat; background-size:100% auto; padding:0px;padding-top:4em;}
.modal_main .title{padding:0 2.5em;color:#151515;min-height:8.4em;}
.modal_main .title h3{font-size:2.3em;font-weight:800;line-height:1}
.modal_main .title h3 img{height:1em;}
.modal_main .title p{font-size:1.4em;font-weight:400;margin-top:0.7em;}
.modal_main .icon-remove{position:absolute;right:1.2em;top:1.2em;cursor:pointer;background:url('../images/modal/modal_close.png') center no-repeat; background-size:100% 100%; width:40px; height:40px; /*width:2.3em; height:2.3em;*/ }
.modal_main .cont{max-height:500px;overflow-y:scroll;}
.modal_main .cont img{max-width:100%;}

.modal .tab{padding: 0 2.5em;}
.modal .tab ul{display:table;width:100%;}
.modal .tab ul li{float:left;width:50%;}
.modal .tab ul li.active{}
.modal .tab ul li a{width:100%;line-height:71px;font-size:22px;font-weight:600;color:#999999;text-align:center;display:block;border-bottom:4px solid #ffffff;}
.modal .tab ul li.active a{border-color:#feda00;font-weight:800;color:#151515;}
.modal .cont .cont-tab{display:none;}
.modal .cont .cont-tab.active{display:block;}

.title h3{font-weight:800;color:#000}

.modal_main.modal_ranking {background:#ffffff url('../images/modal/modal_top_ranking.png') right top no-repeat; background-size:100% auto;}
.modal_main .cont{padding:1em;position:relative;}
.modal_main .cont .ranking_table_block{padding:0 2em 0 1em;}
.modal_main .cont .ranking_table_block .warning{color:#e9504b;margin:.3em 0 .5em;font-size:1.3em;display:block;font-weight:600;}
.modal_main .cont .ranking_table_block .ranking_table{margin-top:1.2em;border:0px;box-shadow:none;font-size:1.5em;font-weight:bold;}
.modal_main .cont .ranking_table_block .ranking_table tr{}
.modal_main .cont .ranking_table_block .ranking_table tr td{padding:10px 0}
.modal_main .cont .ranking_table_block .ranking_table tr td:first-child{text-align:center;}
.modal_main .cont .ranking_table_block .ranking_table tr td:nth-child(2){padding-left:1.2em;}
.modal_main .cont .ranking_table_block .ranking_table tr td:nth-child(3){text-align:right;}
.modal_main .cont .ranking_table_block .ranking_table tr.rank{}
.modal_main .cont .ranking_table_block .ranking_table tr.rank td:first-child span{background:url('../images/rank_1.png') center no-repeat;display:inline-block;width:33px;height:48px; background-size:100% 100%;vertical-align:middle}
.modal_main .cont .ranking_table_block .ranking_table tr.rank.rank1 td:first-child span{background-image:url('../images/rank_1.png');}
.modal_main .cont .ranking_table_block .ranking_table tr.rank.rank2 td:first-child span{background-image:url('../images/rank_2.png');}
.modal_main .cont .ranking_table_block .ranking_table tr.rank.rank3 td:first-child span{background-image:url('../images/rank_3.png');}
.modal_main .cont .ranking_table_block .ranking_table tr.rank td:nth-child(3){font-size:1.5em;font-weight:400;letter-spacing:-1px}
.modal_main .cont .ranking_table_block .ranking_table tr.rank.rank1 td:nth-child(3){color:#feda00;font-weight:700;}
.modal_main .cont .ranking_table_block .ranking_table tr.rank.rank2 td:nth-child(3){color:#98a3b3;font-weight:700;}
.modal_main .cont .ranking_table_block .ranking_table tr.rank.rank3 td:nth-child(3){color:#dd8f31;font-weight:700;}
.modal_main .cont .sch-area {position:relative;padding-right:85px;}
.modal_main .cont .sch-area input {background:#f2f2f2;color:#9e9e9e;width:100%;border-radius:5px;border:1px solid #c6c6c6;box-shadow:none;}
.modal_main .cont .sch-area button {position:absolute;width:80px;text-align:center;line-height:40px;height:40px;background:#fdd400;color:white;border-radius:5px;right:0;top:0;}
.modal_main .cont .sch_ranking_table{margin-top:0.6em;border:0px;box-shadow:none;font-size:1.5em;font-weight:bold;}
.modal_main .cont .sch_ranking_table.active{border:1px solid #c6c6c6;border-radius:5px;padding:3px;}
.modal_main .cont .sch_ranking_table tr{}
.modal_main .cont .sch_ranking_table tr td{padding:10px 0}
.modal_main .cont .sch_ranking_table tr td:first-child{text-align:left;padding-left:0.6em;padding-right:1em;}
.modal_main .cont .sch_ranking_table tr td:nth-child(2){padding-left:1.2em;}
.modal_main .cont .sch_ranking_table tr td:nth-child(3){text-align:right;padding-right:0.6em;}
.modal_main .cont .sch_ranking_table tr.rank{}
.modal_main .cont .sch_ranking_table tr.rank td:first-child span{background:url('../images/rank_1.png') center no-repeat;display:inline-block;width:33px;height:48px; background-size:100% 100%;vertical-align:middle}
.modal_main .cont .sch_ranking_table tr.rank.rank1 td:first-child span{background-image:url('../images/rank_1.png');}
.modal_main .cont .sch_ranking_table tr.rank.rank2 td:first-child span{background-image:url('../images/rank_2.png');}
.modal_main .cont .sch_ranking_table tr.rank.rank3 td:first-child span{background-image:url('../images/rank_3.png');}
.modal_main .cont .sch_ranking_table tr.rank td:nth-child(3){font-size:1.45em;font-weight:400;letter-spacing:-1px;padding-right:0.35em;}
.modal_main .cont .sch_ranking_table tr.rank.rank1 td:nth-child(3){color:#feda00;font-weight:700;}
.modal_main .cont .sch_ranking_table tr.rank.rank2 td:nth-child(3){color:#98a3b3;font-weight:700;}
.modal_main .cont .sch_ranking_table tr.rank.rank3 td:nth-child(3){color:#dd8f31;font-weight:700;}

.modal_main.modal_ranking .cont .my-rank .sch_ranking_table{animation:bling 1s 0s infinite;}

.modal_main.modal_prize .cont .ranking_table_block .ranking_table{font-size:1.2em;}

.my-rank{display:none}


.modal_main.modal_prize {background:#ffffff url('../images/modal/modal_top_prize.png') right top no-repeat; background-size:100% auto;}
.modal_main.modal_prize .cont{padding:0;position:relative;overflow:hidden;}
/*.modal_main.modal_prize .cont .ranking_table_block{padding:0 3em 0 2em;}*/
.cont-tab .swiper-slide{position:relative;font-size:14px}
.modal_main.modal_prize .cont .ranking_table_block{padding:0 3em 0 2em;position:absolute;top:0;height:100%;overflow-y:auto}

.modal_main .cont .ranking_table_block .warning{color:#e9504b;margin:.3em 0 .5em;font-size:1.3em;display:block;font-weight:600;text-align:left}
.modal_main .cont .ranking_table_block .ranking_table{margin-top:1.2em;border:0px;box-shadow:none;font-size:1.5em;font-weight:bold;}
.modal_main .cont .ranking_table_block .ranking_table tr{}
.modal_main .cont .ranking_table_block .ranking_table tr td{padding:10px 0}
.modal_main .cont .ranking_table_block .ranking_table tr td:nth-child(2){padding-left:1.2em;}
.modal_main .cont .ranking_table_block .ranking_table tr td:nth-child(3){text-align:right;}
/* .modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank{}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank td:first-child span{background:url('../images/rank_1.png') center no-repeat;display:inline-block;width:33px;height:48px; background-size:100% 100%;vertical-align:middle}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank.rank1 td:first-child span{background-image:url('../images/rank_1.png');}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank.rank2 td:first-child span{background-image:url('../images/rank_2.png');}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank.rank3 td:first-child span{background-image:url('../images/rank_3.png');}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank td:nth-child(3){font-size:1.8em;font-weight:400;letter-spacing:-1px;padding-right:0.35em;}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank.rank1 td:nth-child(3){color:#feda00;font-weight:700;}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank.rank2 td:nth-child(3){color:#98a3b3;font-weight:700;}
.modal_main.modal_prize .cont .ranking_table_block .ranking_table tr.rank.rank3 td:nth-child(3){color:#dd8f31;font-weight:700;} */
.modal_main .cont .cont-tab1{padding-top:1em;height:500px;overflow-y:auto;overflow-x:hidden;padding-bottom:70px;box-sizing:border-box;}
.modal_main .cont .cont-tab2{max-height:500px;overflow-y:scroll;overflow-x:hidden;}
.modal_main .cont .controls-below {background:#07334a;width:100%;color:white;display:table;height:70px;position:absolute;left:0;right:0;bottom:0;}
.modal_main .cont .controls-below .prev{display:table-cell;width:50px;text-align:center;line-height:70px;}
.modal_main .cont .controls-below .prev .prev-btn{background:url('../images/ico-prev.png') center no-repeat;top:0;margin-top:0;width:50px;height:70px;display:block;background-size:15.5px 28.5px;vertical-align:top;}
.modal_main .cont .controls-below .next{display:table-cell;width:50px;text-align:center;line-height:70px;}
.modal_main .cont .controls-below .next .next-btn{background:url('../images/ico-next.png') center no-repeat;top:0;margin-top:0;width:50px;height:70px;display:block;background-size:15.5px 28.5px;vertical-align:top;}
.modal_main .cont .controls-below .info-view{display:table-cell;text-align:center;font-size:24px;line-height:70px;font-weight:bold;color:#ffffff;vertical-align:top;}


@keyframes bling{
  from{border:1px solid #c6c6c6; color:black;}
  50%{border:1px solid #fdd400; color:#fdd400;}
  to{border:1px solid #c6c6c6; color:black;}
}

#modal_start{border-radius:15px;overflow:hidden;box-shadow:2px 2px 5px 3px rgba(0,0,0,0.6);padding-bottom:30px;background-size: 100%;max-width:370px;}
#modal_start .title{margin-top:1em;margin-bottom:12px;font-size:2em;text-align:center;font-weight:bold;}
#modal_start .cont{text-align:center;margin-bottom:30px;font-size:1.6em;font-weight:400;color:#000;line-height:1.5;}
#modal_start .btn-bottomArea{text-align:center;}
#modal_start .btn-bottomArea .btn-rig{width:525px;max-width:69.3%;display:inline-block;margin-bottom:1.2em;}
#modal_start .btn-bottomArea .btn-rig.btn-start{margin-bottom:0em;}
#modal_start .btn-bottomArea .btn-rig img{max-width:100%;}


#modal_option{border-radius:15px;padding-top:9em;overflow:hidden;box-shadow:2px 2px 5px 3px rgba(0,0,0,0.6);background:#ffffff url('../images/modal/modal_top.png') center top no-repeat;padding-bottom:30px;background-size: 100%;}
#modal_option .title{margin-top:1em;margin-bottom:25px;font-size:2em;text-align:center;font-weight:bold;}
#modal_option .cont{text-align:center;margin-bottom:40px;font-size:1.6em;font-weight:400;}
#modal_option .cont .btn-sound-control{max-width:50%;display:inline-block;}
#modal_option .cont .btn-sound-control img{max-width:100%;}
#modal_option .btn-bottomArea{text-align:center;}
#modal_option .btn-bottomArea .btn-rig{width:525px;max-width:69.3%;display:inline-block;margin-bottom:1.2em;}
#modal_option .btn-bottomArea .btn-rig.btn-reset{margin-bottom:0em;}
#modal_option .btn-bottomArea .btn-rig img{max-width:100%;}


#modal_over{border-radius:15px;padding:10em 0 0;overflow:hidden;box-shadow:2px 2px 5px 3px rgba(0,0,0,0.6);max-width:400px;background:#ffffff url('../images/modal/over_top.png') center top no-repeat;padding-bottom:30px;background-size: 100%;}
#modal_over .title{margin-top:1em;margin-bottom:25px;font-size:2em;text-align:center;font-weight:bold;}
#modal_over .cont{text-align:center;margin-bottom:40px;font-size:1.6em;font-weight:400;padding:0 2.5em;}
#modal_over .cont .sns_set{margin-top:.5em}
#modal_over .cont .sns_set ul{overflow:hidden;margin:0 auto;text-align:center;width:90%}
#modal_over .cont .sns_set ul li{float:left;width:33.3%;cursor:pointer;padding:.8em;box-sizing:border-box;}
#modal_over .cont .sns_set ul li img{width:100%;}
#modal_over .cont .result_box{margin-top:0.5em;}
#modal_over .cont .result_box .ipt-line{text-align:left;}
#modal_over .cont .result_box .ipt-line input{background:#ffffff;color:#222;width:100%;border-radius:5px;border:1px solid #333;box-shadow:none;}
#modal_over .cont .result_box .ipt-line .warning{color:#e9504b;font-weight:600;margin-top:.5em;display:block;font-size:0.8em;}
#modal_over .cont .result_box table{border:0px;margin-top:1.5em;}
#modal_over .cont .result_box table tr{font-weight:600;color:#151515;line-height:2em;}
#modal_over .cont .result_box table tr th{text-align:left;}
#modal_over .cont .result_box table tr td{text-align:right;font-size:1.7em;}

#modal_over .btn-bottomArea{text-align:center;}
#modal_over .btn-bottomArea .btn-rig{width:525px;max-width:69.3%;display:inline-block;margin-bottom:1.2em;}
#modal_over .btn-bottomArea .btn-rig.btn-start{margin-bottom:0em;}
#modal_over .btn-bottomArea .btn-rig img{max-width:100%;}

@media(max-width:1080px) {
  body{font-size:12px;}
  .modal_main .title{min-height:11.7em}
}

@media(max-width:768px) {
  body{font-size:11px;}
  .modal_main .title{min-height:13em}
  #modal_start .btn-bottomArea .btn-rig img{max-width:80%}

  .modal .tab{padding: 0 2.5em;}
  .modal .tab ul li a{width:100%;line-height:41px;font-size:15px;border-bottom:4px solid #ffffff;}


  .modal_main.modal_prize .cont .cont-tab1{height:350px;padding-bottom:50px;}
  .modal_main.modal_prize .cont .cont-tab2{max-height:350px;}
  .modal_main.modal_prize .cont .controls-below {height:50px;}
  .modal_main.modal_prize .cont .controls-below .prev{line-height:50px;}
  .modal_main.modal_prize .cont .controls-below .prev .prev-btn{width:50px;height:50px;background-size:15.5px 28.5px;}
  .modal_main.modal_prize .cont .controls-below .next{line-height:50px;}
  .modal_main.modal_prize .cont .controls-below .next .next-btn{width:50px;height:50px;background-size:15.5px 28.5px;}
  .modal_main.modal_prize .cont .controls-below .info-view{font-size:11px;line-height:50px;}

  .cont-tab .swiper-slide{font-size:13px}
  .modal_main .cont .ranking_table_block .ranking_table tr.rank td:nth-child(3){font-size:1.7em}
  .modal_main .cont .ranking_table_block .ranking_table tr.rank td:first-child span{width:28px;height:43px}
}
@media(max-width:600px) {
	.modal_main .title{min-height:18.4vw}
	#modal_over .cont .sns_set ul li{padding:.8em}
  .cont-tab .swiper-slide,
  .modal_main .cont .ranking_table_block{font-size:12px}
  .modal_main .cont .ranking_table_block .ranking_table tr.rank td:first-child span{width:23px;height:36px}
}
@media(max-width:500px) {
  body{font-size:9px;}
  .modal_main .cont .ranking_table_block .ranking_table tr.rank td:first-child span{width:25px;height:36px}
	#modal_over .cont{padding:0 2em}
	#modal_start .btn-bottomArea .btn-rig img{max-width:90%}
	#modal_over .cont .sns_set ul li{padding:.7em}
  .cont-tab .swiper-slide,
  .modal_main .cont .ranking_table_block{font-size:11px}
  .modal_main .cont .ranking_table_block .ranking_table tr.rank td:first-child span{width:20px;height:31px}
}
@media(max-width:450px) {
 .cont-tab .swiper-slide,
 .modal_main .cont .ranking_table_block{font-size:9px}
 input[type=text], input[type=password], input[type=file], input[type=email], input[type=number], input[type=search]{font-size:14px}
 .modal_main .cont .sch-area button{height:36px;line-height:36px}
}
@media(max-width:400px){
  .modal_main .title{min-height:21vw}
  #modal_over .cont{padding:0 1em}
  #modal_start .btn-bottomArea .btn-rig img{max-width:100%}
  #modal_over .cont .sns_set ul li{padding:.6em}
}