.battle-top-header { background: rgba(255, 255, 255, 0.08); overflow: hidden; position: relative; z-index: 2; }
.battle-top-header .menu-body { width: 100%; }
.battle-top-header .menu-body>div { position: relative; height: 80px; top: -40px; transition: 0.2s all linear; }
.battle-top-header .menu-body .searching { opacity: 0; pointer-events: none; }
.battle-top-header .menu-body .menu { opacity: 1; pointer-events: all; }
.battle-top-header .menu-body.input .searching { top: 40px; opacity: 1; pointer-events: all; }
.battle-top-header .menu-body.input .menu { top: 40px; opacity: 0; pointer-events: none; }

.battle-top-header .menu-body .btn, .battle-top-header .menu-body .form-control { border: none; background: rgba(255, 255, 255, 0.07); color: #fff; }

.battle-top-header .menu-body .form-control:focus { box-shadow: none; outline: none; }
.battle-top-header .menu-body .form-control::-moz-placeholder { color: rgba(255, 255, 255, 0.5); }
.battle-top-header .menu-body .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }
.battle-top-header .menu-body .form-control::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); }

.battle-top-header .menu-body .input-group-btn:first-child>.btn, .battle-top-header .menu-body .input-group-btn:first-child>.btn-group, .battle-top-header .menu-body .input-group-btn:last-child>.btn, .battle-top-header .menu-body .input-group-btn:last-child>.btn-group { margin: 0px; }

.tabBattleType, .tabBattleTypeNologin { padding: 18px 15px 14px !important; font-size: 16px; color: #999; }
.tabBattleType.active { color: #7f5ac8; font-weight: 700; }

.battle-top-btn { display: block; float: right; width: 170px; height: 80px; cursor: pointer; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.battle-top-btn.focus { background: rgba(255, 255, 255, 0.06); }
.battle-top-btn:hover { background: rgba(255, 255, 255, 0.12); }

.battle-video-body { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.battle-top { position: relative; margin-top: -80px; z-index: 1; background-color: #00286A; background-position: center; background-repeat: no-repeat; }
.battle-top .battle-top-content { position: relative; padding: 120px 0px 40px; color: #fff; font-size: 28px; }

.card-row { display: table; width: 100%; border-bottom: 1px solid #EAEAEA; padding-bottom: 20px; margin-bottom: 20px; }
.card-row>.card-item { display: table-cell; vertical-align: top; }
.card-row>.card-item.front { font-size: 15px; font-weight: 600; }
.card-row>.card-item.img-body { width: 170px; padding: 0px 15px; text-align: center; display: none; }
.card-row>.card-item.img-body>.no-img { background: #DFDFDF; width: 80px; margin: 0px auto; padding: 18px 0px; color: #fff; font-weight: 600; text-align: center; }
.card-row.img>.card-item.img-body { display: table-cell; }
.card-row.no-text>.card-item.img-body { text-align: left; width: initial; }
.card-row.no-text>.card-item.img-body>.no-img { margin: 0px; }
.card-row.no-text>.card-item.front { display: none; }
.card-row>.card-item.img-body img { max-width: 140px; max-height: 80px; width: 100%; }
.card-row>.card-item.back { width: 500px; padding-left: 20px; border-left: 1px solid #D8D8D8; }

.battle-layer { position: absolute; top: 0px; right: 0; bottom: 100%; left: 0; z-index: 10; overflow: auto; }
.battle-layer.active { bottom: 0px; }
.battle-top-back { position: absolute; left: 0; top: 0; padding: 24px 20px; z-index: 2; }
.is-balloon .battle-top-back { display: none; }
.battle-top-back>img { height: 18px;}
.battle-step { width: 100%; height: 100%; font-size: 32px; position: relative; z-index: 1; }
.battle-step.battle-end { display: block; transition: all .6s ease; opacity: 0; background: rgba(0,0,0,0); z-index: 1; font-size: 60px; font-weight: bold; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0.3); }
.battle-step.battle-end.active { opacity: 1; transform: scale(1); }
.battle-step .btn-shuffle-team { display: none; }
.battle-step.team .btn-shuffle-team { display: inline; }
.battle-left { float: left; width: calc(100% - 450px); height: 100%; color: #fff; padding: 30px 15px; text-align: center; position: relative; }
.battle-right { float: left; width: 430px; margin: 40px 0px 0px 10px; text-align: center; background: url('/images/main/bg_battle02.png'); background-size: 100%; background-repeat: no-repeat; }
.battle-inputbox { border: 1px solid #333; padding: 10px; font-weight: bold; }
.battle-inputlabel { font-size: 18px; text-align: left; margin: 20px 15px 5px; }

.circle_svg {
	-webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.circle_animation {
  stroke-dasharray: 566; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 566;
  transition: all 1s linear;
}
.hurry_animation {
  stroke-dasharray: 1132; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 1132;
  transition: all 1s linear;
}

.battle-quest-preview { height: 100%; margin: 80px 30px 10px; overflow-y: auto; border-radius: 5px; background: #06111D; }
.battle-quest-preview .battle-prog-layer { background: #14293E; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); padding-top: 1px; }
.battle-quest-preview .battle-prog-layer .battle-prog-body { margin: 14px 16px 0px; height: 21px; border-radius: 21px; background: #091A2C; position: relative; }
.battle-quest-preview .battle-prog-layer .battle-prog-body .battle-prog { background: #e67e22; transition: all 1s linear; border-radius: 21px; position: absolute; left: 0; top: 0; bottom: 0; }
.battle-quest-preview .battle-prog-layer .battle-prog-body .battle-prog.ing { border-radius: 21px 0px 0px 21px; }
.battle-quest-preview .battle-prog-info { margin: 2px 16px 7px; font-size: 18px; }
.battle-quest-preview .battle-prog-info .battle-total-score { font-size: 24px; }
.battle-quest-preview .btn-prevnext { color: #3498db; padding: 5px 10px; }
.battle-quest-preview .btn-prevnext.disabled { pointer-events: none; color: #ddd; }
.battle-quest-preview .user_answer { color: #fff; border-radius: 3px; margin-top: 8px; cursor: pointer; padding: 16px 12px; font-size: 20px; cursor: pointer; transition: all 0.3s linear; position: relative; }
.battle-quest-preview .user_answer:first-child { margin-top: 0px; }
.battle-quest-preview .user_answer:nth-child(4n+1) { background: #946BC1; }
.battle-quest-preview .user_answer:nth-child(4n+2) { background: #1DA660; }
.battle-quest-preview .user_answer:nth-child(4n+3) { background: #4A90E2; }
.battle-quest-preview .user_answer:nth-child(4n) { background: #D23430; }
.battle-quest-preview .user_answer.selected:nth-child(4n+1) { background: #4A3560; }
.battle-quest-preview .user_answer.selected:nth-child(4n+2) { background: #0E5330; }
.battle-quest-preview .user_answer.selected:nth-child(4n+3) { background: #254871; }
.battle-quest-preview .user_answer.selected:nth-child(4n) { background: #691A18; }

/* .battle-quest-preview .user_answer.selected:after { display: table; position: absolute; border-radius: 3px; background: #fff; } */
.battle-quest-preview .title { font-size: 48px; padding: 0px; color: #fff; }
.battle-quest-preview .img img { max-height: 170px; height: 100%; max-width: 280px; }

.battle-rank-header { position: relative;margin: 0px 20px;background: url(/images/v2/battle/bg_rank_header_01.png) 0% 0% / 100% auto no-repeat;height: 158px; }

.battle-rank-list-bg { position: absolute; top: 0px; left: 75px; right: 75px; height: 100%; background: #D3E7F6; }
.battle-rank-list { width: 100%; height: calc(100% - 158px); padding: 0px 20px 25px; margin: 0px auto; position: relative; }
.battle-rank-table { display: table; width: calc(100% - 40px); height: 72px; background: #14293E; border-radius: 8px; padding: 0px 20px; margin: 10px 20px 0px; }

.battle-rank-table .battle-rank-table-row { display: table-cell; vertical-align: middle; }
.battle-rank-table .battle-rank-table-row .rank-prog { text-align: right; font-size: 42px; color: #00AFEE; }
.battle-rank-list .intro-blind { display: block; overflow: hidden;}
.battle-rank-list .intro-blind .battle-rank-table { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
.battle-rank-list .intro-blind:first-child .battle-rank-table { border: 2px solid #00AFEE; height: 76px; box-shadow: 0px 0px 24px 1px #00AFEE; margin: 25px 20px; }

.battle-score-box-outline { margin: 4px 70px; }
.battle-score-box { border-radius: 8px; height: 80px; display: table; width: 100%; background: #fff; }
.battle-score-item { display: table-cell; vertical-align: middle; font-weight: 600; }
.battle-score-item.rank { width: 95px; color: #0091EC; text-align: center; font-size: 40px; }
.battle-score-item.name { color: #42546E; font-size: 36px; max-width: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.battle-score-item.inputbox { padding-left: 50px; max-width: 0px; display: none; background: #fff; font-style: normal; }
.battle-score-item.inputbtns { width: 280px; text-align: right; display: none; background: #fff; font-style: normal; padding-right: 20px; }
.battle-score-item.score { width: 180px; text-align: right; color: #FDAF12; font-size: 38px; padding-right: 32px; }
.battle-score-item.etc { width: 130px; text-align: right; font-size: 30px; font-style: normal; padding-right: 25px; font-weight: 500; display: none; }
.battle-score-item.etc.up { color: #fee715; visibility: visible; }
.battle-score-item.etc.down { color: #00e8ff; visibility: visible; }

.battle-score-box-outline.win { margin: 40px 0px 30px; }
.battle-score-box-outline.win:after { content: ""; position: absolute; left: calc(50% - 137px); top: -30px; width: 275px; height: 200px; background: url(/images/v2/battle/img_score_top_01.png) 0% 0% / 100% 100% no-repeat; }
.battle-score-box-outline.win .battle-score-box { padding-top: 155px; padding-bottom: 26px; background: url(/images/v2/battle/bg_top_rank_box_01.png) 0% 0% / 100% auto no-repeat; }
.battle-score-box-outline.win .battle-score-item.rank { font-size: 56px; width: 140px; }
.battle-score-box-outline.win .battle-score-item.name { font-size: 56px; color: #fff; }
.battle-score-box-outline.win .battle-score-item.score { color: #fff; font-size: 46px; padding-right: 48px; width: 250px; }

.battle-score-box-outline.input { border-color: #009be1; }
.battle-score-box-outline.input .battle-score-box { border-color: #009be1; }
.battle-score-box-outline.input .battle-score-item.rank { background: #009be1; } 
.battle-score-box-outline.input .battle-score-item.rank:after { border-top-color: #009be1; }
.battle-score-box-outline.input.active .battle-score-item.inputbox { display: table-cell; }
.battle-score-box-outline.input.active .battle-score-item.inputbtns { display: table-cell; }
.battle-score-box-outline.input.active .battle-score-item.name { display: none; }
.battle-score-box-outline.input.active .battle-score-item.score { display: none; }
.battle-score-box-outline.input.active .battle-score-item.etc { display: none; }


.battle-box { background: rgba(0, 0, 0, 0.5); border: 5px solid #e67e22; border-radius: 8px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.0); position: relative; }

.triangle-obtuse { position: relative; padding: 25px 30px; color: #fff; background: rgba(0, 175, 238, 0.9); border-radius: 24px; font-size: 40px; line-height: 0.8; }
.triangle-obtuse:before {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 7px;
    border: 0;
    border-right-width: 35px;
    border-bottom-width: 30px;
    border-style: solid;
    border-color: transparent rgba(0, 175, 238, 0.9);
    display: block;
    width: 0;
}
.triangle-obtuse:after {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 7px;
    border: 0;
    border-right-width: 15px;
    border-bottom-width: 30px;
    border-style: solid;
    border-color: transparent #000;
    display: block;
    width: 0;
}
@keyframes dropin {
	0% {
    	transform: translateY(-100%);
		opacity: 0;
	}
	100% {
    	transform: translateY(0);
		opacity: 1;
	}
}

@keyframes twinkle {
	0% {
		box-shadow: none;
	}
	50% {
		box-shadow: 0px 0px 12px 6px rgba(52, 152, 219, 0.6);
	}
	100% {
		box-shadow: none;
	}
}
.ani-twinkle {
	animation: twinkle 1.5s;
    animation-iteration-count: infinite;
}

.battle-user-list { max-height: calc(100% - 180px); overflow: auto; }
.battle-step.team .battle-user-list { max-height: calc(100% - 330px); }
.battle-user-list.is-field { max-height: calc(100% - 367px); }
.battle-user, .battle_team_drag { float: left; width: 32%; border-radius: 6px; background: #2C4C9C; padding: 6px 10px; font-size: 20px; color: #fff; margin-top: 5px; overflow: hidden; height: 40px; word-break: break-all; }
.battle-user .user_name, .battle_team_drag .user_name { white-space: nowrap; overflow: hidden; }
.battle_team_drag { background: #fff; color: #333; }
.battle-user:nth-child(3n), .battle-user:nth-child(3n - 1), .battle_team_drag:nth-child(3n), .battle_team_drag:nth-child(3n - 1) { margin-left: 6px; }
.battle-step.team .battle-user { width: 47%; margin-left: 0px; }
.battle-step.team .battle-user:nth-child(2n) { margin-left: 6px; }
.battle-step.team .battle_team_drag { width: 95px; margin-left: 0px; margin-right: 6px; line-height: 1.5; }
.battle-step.team .battle_team_drag:first-child { margin-left: 0px; }

.battle-top-prog-body { display: block; width: 485px; height: 74px; margin: 0px auto 0px; background-image: url(/images/v2/battle/bg_timer_body_01.png); background-size: contain; background-repeat: no-repeat; }
.battle-top-prog-body .battle-top-prog-bg { position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #A9C5DB; border-radius: 9px; box-shadow: inset 0px 5px 0px 0px rgba(0, 0, 0, 0.04); }
.battle-top-prog-body .battle-top-prog { position: absolute; left: 0px; top: 0px; bottom: 0px; background: #009BE1; border-radius: 9px; box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.08); transition: all 1s linear; }

.battle-final, .field-rank { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 14px; }
.battle-final .top { height: 68px; background: #131313; position: relative; z-index: 2; }
.battle-final .battle-content { max-width: 1240px; width: 100%; margin: 0px auto; z-index: 2; }
.battle-final .bottom { height: 100px; background: #0B2B40; box-shadow: 0px 0px 22px 0px rgba(255, 255, 255, 0.2); position: relative;   z-index: 2;}
.battle-init .set-info { margin: 0px auto; max-width: 900px; width: 100%; }
.battle-init .set-info .set-name { font-size: 28px; }
.battle-init .set-info .set-desc, .battle-init .set-info .set-desc a { font-size: 15px; font-weight: lighter; }

.battle-final .step1 { display: block; height: 100%; }
.battle-final .step2 { display: none; }
.battle-final .step3 { display: none; }
.battle-final.total .step1 { display: none; }
.battle-final.total .step2 { display: block; height: 100%; position: relative; z-index: 1; }
.battle-final.team .step1 { display: none; }
.battle-final.team .step3 { display: block; height: 100%; }

.battle-row:before, .battle-row:after { display: table; content: " "; }
.battle-row:after { clear: both; }
.battle-row .battle-col { float: left; position: relative; }

.battle-table { width: 100%; }
.battle-table tr { height: 50px; }

.battle-preview:before, .battle-preview:after { display: table; content: " "; clear: both; }
.battle-preview-box { background: #FFFFFF; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); padding: 15px; margin-top: 15px; position: relative; width: 290px; margin-left: 15px; display: inline-block; vertical-align: text-top; }
.battle-preview-box:nth-child(3n + 1) { margin-left: 0px; }

.battle-preview-box.renew { width: 100%; margin-left: 0px; margin-top: 8px; padding: 0px; }

.battle-preview-box .quest-answer { font-weight: 300; padding-left: 0px; font-size: 12px; }
.battle-preview-box .quest-answer > * { margin-top: 3px; }

.battle-preview-box .exam-data { color: transparent; border-bottom: 1px solid #757575; }

.battle-preview-box .text-body { padding-right: 10px; font-weight: 600; font-size: 16px; }
.battle-preview-box .img-body { display: none; width: 80px; }
.battle-preview-box.img .img-body { display: table-cell; text-align: right; }
.battle-preview-box.no-text .img-body { text-align: left; }
.battle-preview-box.img .img-body img { width: 53px; }
.battle-preview-box.team.img .img-body img { width: 75%; }
.battle-preview-box.renew.img .img-body img { width: 100%; max-width: 100px; max-height: 92px; }

.checkbox.lg label { padding-left: 12px; }
.checkbox.lg label::before { width: 26px; height: 26px; border-color: #5f5f5f; }
.checkbox.lg label::after { width: 25px; height: 25px; font-size: 18px; padding-left: 4px; }

.battle-rank-hurry { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }

.field-rank-item { border-radius: 100px; height: 130px; color: #fff; background: rgba(230, 126, 34, 1); margin-top: 35px; position: relative; border: 1px solid transparent; }
.field-rank-item .num { display: inline-block; width: 80px; height: 80px; padding-top: 0px; margin: 25px 0px 0px 25px; font-size: 50px; text-align: center; /* background: #984807; */ border-radius: 50%; border: 5px solid; }
.field-rank-item .num.sm { font-size: 30px; padding-top: 13px; }
.field-rank-item .share { display: block; position: absolute; left: calc(50% - 110px); top: -22px; }
.field-rank-item .item-body { margin: 0px 35px 0px 135px; padding: 30px 0px; }
.field-rank-item .item-body .score { font-size: 40px; font-weight: 700; float: right; color: #000; margin-top: 5px; }
.field-rank-item .item-body .name { font-size: 30px; color: #984807; font-weight: 700; width: calc(100% - 190px); }
.field-rank-item .item-body .info { width: calc(100% - 190px); font-size: 16px; }
.field-rank-item .item-body .std-names { margin-top: 8px; font-size: 11px; font-weight: 100; word-wrap: break-word; }

.field-rank-item.blank { background: #fff; color: #999; border-color: #ccc; }
.field-rank-item.blank .num { background: #ccc; border-color: #ccc; color: #fff; }

.field-rank-body { overflow: auto; }
.field-rank-body.input-mode { background: #fff; }
.field-rank-body .field-rank-body-top { padding-right: 40px; padding-top: 10px; color: #fff; text-align: right; }
.field-rank-body .field-rank-body-top .btn-battle-restart { float: left; height: 100%; padding: 0 15px 0 15px; font-size: 18px; color: #d8d8d8; display: table; }
.field-rank-body.input-mode .field-rank-body-top .btn-battle-restart { color: #5f5f5f; display: none; }
.field-rank-body .battle-rank-title { display: inline-block; background: rgba(0, 0, 0, 0.6); color: #fff; }
.field-rank-body.input-mode .battle-rank-title { background: inherit; color: #984807; }
.field-rank-body.input-mode .battle-rank-title .info { color: #e67e22; }
.field-rank-body.input-mode .field-rank-list .field-rank-item, .field-rank-list .input-box, .field-rank-body.input-mode .field-rank-list .field-rank-item .share { display: none; }
.field-rank-body.input-mode .field-rank-list .field-rank-item.blank, .field-rank-body.input-mode .field-rank-list .input-box { display: block; }
.field-rank-body.input-mode .field-rank-list .input-box { margin-top: 25px; font-size: 30px; color: #999; }
.field-rank-body.input-mode .field-rank-list .input-box a { min-width: 120px; }

.learn-nav-back-body .learn-nav-back-menu { left: 33px; }

.input_rank_name { /* border: none; */ width: 100%; /* background: transparent; */ font-size: 24px; outline: none !important; }
.input_rank_name::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
}
.input_rank_name:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.input_rank_name::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}

video::-webkit-media-controls-start-playback-button {
    display: none;
}
video::-webkit-media-controls {
  display: none;
}

.field-rank-share { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); display: none; }
.field-rank-share.active { display: block; cursor: pointer; }

.battle_team_zone { display: table; margin: 0px auto 5px; padding-left: 10px; width: 100%; border-radius: 6px; }
.battle_team_zone.lock .battle_team_right { background: rgba(20, 41, 62, 1); }
.battle_team_zone.active .battle_team_right { background: #02263a; }
.battle_team_zone.target .battle_team_right { background-color: #29e; }

.battle_team_zone .battle_team_left { display: table-cell; font-size: 24px; width: 150px; vertical-align: top; padding-top: 25px; text-align: center; }
.battle_team_zone .battle_team_left .battle_team_name { color: #fff; display: inline-block; padding: 8px 20px; font-weight: 700; }
.battle_team_zone[data-team="J"] .battle_team_left .battle_team_name { background: #D53367; }
.battle_team_zone[data-team="I"] .battle_team_left .battle_team_name { background: #3695CA; }
.battle_team_zone[data-team="H"] .battle_team_left .battle_team_name { background: #BC33B0; }
.battle_team_zone[data-team="G"] .battle_team_left .battle_team_name { background: #39CD9C; }
.battle_team_zone[data-team="F"] .battle_team_left .battle_team_name { background: #8936C5; }
.battle_team_zone[data-team="E"] .battle_team_left .battle_team_name { background: #E07A23; }
.battle_team_zone[data-team="D"] .battle_team_left .battle_team_name { background: #4744DB; }
.battle_team_zone[data-team="C"] .battle_team_left .battle_team_name { background: #E0C200; }
.battle_team_zone[data-team="B"] .battle_team_left .battle_team_name { background: #DA3232; }
.battle_team_zone[data-team="A"] .battle_team_left .battle_team_name { background: #75CC35; }

.battle_team_zone .battle_team_left .battle_team_lock { color: #fff; margin-left: 45px; }
.battle_team_zone.lock .battle_team_drag { background: #75CC35; }
.battle_team_zone.lock .btn-user-banish { display: none; }

.battle_team_zone .battle_team_right { display: table-cell; vertical-align: text-top; padding-bottom: 20px; padding-top: 20px; border-radius: 6px; transition: background-color 0.3s; }

.battle_team_drag { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); transition: background-color 0.3s;
}
.battle_team_drag.can-drop { color: #000; background-color: #4e4; }


.crash_body { position: absolute; width: 100%; top: 80px; bottom: 0; }
.is-balloon .crash_body { top: 80px; }
		
.crash_score_body { text-align: left; padding: 10px; padding-top: 0px; background: rgba(0, 0, 0, 0.3); float: left; width: 200px; height: calc(100% - 10px); }
.crash_body.is_field .crash_score_body { width: 600px; background: transparent  ; }
.crash_score_item { font-size: 20px; color: #fff; font-weight: 600; display: table; width: 100%; margin-top: 10px; }
.crash_score_item.no-team { display: block; }
.crash_score_list.team1 .crash_score_item { height: calc(100% - 10px); }
.crash_score_list.team2 .crash_score_item { height: calc(50% - 10px); }
.crash_score_list.team3 .crash_score_item { height: calc(33.333% - 10px); }
.crash_score_list.team4 .crash_score_item { height: calc(25% - 10px); }
.crash_score_list.team5 .crash_score_item { height: calc(20% - 10px); }
.crash_score_list.team6 .crash_score_item { height: calc(16.666% - 10px); }
.crash_score_list.team7 .crash_score_item { height: calc(14.285% - 10px); }
.crash_score_list.team8 .crash_score_item { height: calc(12.5% - 10px); }
.crash_score_list.team9 .crash_score_item { height: calc(11.111% - 10px); }
.crash_score_list.team10 .crash_score_item { height: calc(10% - 10px); }
/* .crash_score_body .crash_score_item:first-child { width: 24%; font-size: 40px; margin-left: 0px; } */
.crash_score_item.team_J { background: #D53367; }
.crash_score_item.team_I { background: #3695CA; }
.crash_score_item.team_H { background: #BC33B0; }
.crash_score_item.team_G { background: #39CD9C; }
.crash_score_item.team_F { background: #8936C5; }
.crash_score_item.team_E { background: #E07A23; }
.crash_score_item.team_D { background: #4744DB; }
.crash_score_item.team_C { background: #E0C200; }
.crash_score_item.team_B { background: #DA3232; }
.crash_score_item.team_A { background: #75CC35; }

.crash_score_list .crash_score_item.no-team { height: auto; background: #0D2262; position: relative; }
.crash_score_list .crash_score_item.no-team .top-img { text-align: center; position: relative; top: 6px; text-align: center; display: none; }
.crash_score_list .crash_score_item.no-team .crash_team_score { display: none; text-align: center; padding: 0px 4px 5px; font-size: 130%; color: #009be1; font-weight: bold; }
.crash_score_list .crash_score_item.no-team.active, .crash_score_list .crash_score_item.no-team.second { background: #2A4996; }
.crash_score_list .crash_score_item.no-team.active .top-img, .crash_score_list .crash_score_item.no-team.active .crash_team_score { display: block; }
.crash_score_list .crash_score_item.no-team .top-img>img { width: 50%; }

.crash_score_list .crash_score_item.event { height: 30px; }
.crash_score_list .crash_score_item.event>span { background: #000; padding: 0px 10px; }
.crash_score_list .crash_score_item.event.active>span { background: #C9484D; }
.crash_score_list .crash_score_item.event .crash_event_rank { color: #ffca28; }
.crash_score_list .crash_score_item.event .crash_event_name { padding-left: 10px; }

.crash_score_item .crash_team_name { background: rgba(0, 0, 0, 0.5); font-size: 130%; width: 50px; display: table-cell; vertical-align: middle; text-align: center; }
.crash_score_item.no-team .crash_team_name { display: block; width: 100%; text-align: center; padding: 4px 10px; background: transparent; }
.crash_score_item .crash_team_score { display: table-cell; vertical-align: middle; text-align: right; padding-right: 10px; }

.crash_prog_body { background: #1F497D; height: 10px; position: relative; }
.is-balloon .crash_prog_body { display: none; }
.crash_prog_body.hurry { background: #e74c3c; }
.crash_prog_body .prog { position: absolute; left: 0; top: 0; bottom: 0; background: #00B0F0; transition: all 0.2s linear; }

.crash_quest_body { height: calc(100% - 10px); position: relative; margin-left: 200px; }
.is-balloon .crash_quest_body { height: 100%; }
/* .crash_body.is_field .crash_quest_body { margin-left: 300px; } */
.crash_quest_body .back, .crash_quest_body .front, .crash_quest_body .battle-private-score { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
.crash_quest_body .back .back_item { display: table; height: 33.333%; width: 100%; color: rgba(255, 255, 255, 0.2); }
.is-balloon .crash_quest_body .back .back_item { color: transparent; }
.crash_quest_body .back .back_item > * { display: table-cell; vertical-align: middle; text-align: right; padding-right: 20px; font-size: 100px; opacity: 0.5; border-bottom: 3px solid; }

.crash_body .crash-item { position: absolute; max-width: 300px; text-align: center; padding: 10px 12px; background: #fafafa; border: 3px solid transparent; border-radius: 10px; box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.4); transition: all 0.2s linear; }
.crash_body.lg .crash-item { max-width: 360px; }
.crash_body .crash-item .crash-item-text > img { height: 100px; }
.crash_body.lg .crash-item .crash-item-text > img { height: 120px; }
.crash_body .crash-item.hint { border: 3px solid #3498db; color: #3498db; }
.crash_body .crash-item.show { border: 3px solid #999999; color: inherit; }
.crash_body .crash-answer, .crash_body .crash-hint { position: absolute; min-width: 220px; max-height: 54px; overflow: hidden; bottom: 110%; left: 6px; text-align: left; display: none; color: #fff; font-size: 20px; }
.crash_body.lg .crash-answer, .crash_body.lg .crash-hint { min-width: 264px; max-height: 65px; }
.crash_body .crash-item.hint .crash-hint { display: block; }
.crash_body .crash-item.show .crash-hint { display: none; }
.crash_body .crash-item.x2, .crash_body .crash-item.x3 { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.crash_body .crash-item.zoom { transform: scale(1.25); }
.crash_body .crash-x2, .crash_body .crash-x3 { position: absolute; width: 100%; left: 0; bottom: 105%; text-align: center; display: none; color: #e74c3c; font-size: 20px; }
.crash_body.lg .crash-x2, .crash_body.lg .crash-x3 { font-size: 24px; }
.crash-item.x2 .crash-x2, .crash-item.x3 .crash-x3 { display: block; }
.crash_body .crash-item.x2 .crash-answer, .crash_body .crash-item.x3 .crash-answer, .crash_body .crash-item.x2.show .crash-answer, .crash_body .crash-item.x3.show .crash-answer, .crash_body .crash-item.x2 .crash-hint, .crash_body .crash-item.x3 .crash-hint { display: none; }
.crash_body .crash-item.show .crash-answer, .crash_body .crash-item.show.p.x2 .crash-answer, .crash_body .crash-item.show.p.x3 .crash-answer, .crash_body .crash-item.show.pp.x2 .crash-answer, .crash_body .crash-item.show.pp.x3 .crash-answer { display: block; /* bottom: -35px; */ }
.crash_body .crash-item-text { max-height: 135px; overflow: hidden; word-break: break-all; font-size: 23px; text-align: left; line-height: 1.5; }
.crash_body .crash-item.p .crash-item-text { color: #369FFF; font-weight: bold; }
.crash_body .crash-item.pp .crash-item-text { color: #7f5ac8; font-weight: bold; }
.crash_body .crash-item.p.x2, .crash_body .crash-item.p.x3, .crash_body .crash-item.pp.x2, .crash_body .crash-item.pp.x3 { background: #fafafa; }
.crash_body .crash-item.p.x2 .crash-x2, .crash_body .crash-item.p.x3 .crash-x3, .crash_body .crash-item.pp.x2 .crash-x2, .crash_body .crash-item.pp.x3 .crash-x3 { display: none; }
.crash_body.lg .crash-item-text { max-height: 189px; font-size: 32px }
.crash_body .crash-item-text .exam-data { color: transparent; border-bottom: 1px solid #5f5f5f; }
.crash_body .crash-item.x2 .exam-data, .crash_body .crash-item.x3 .exam-data { border-bottom-color: #fff; }

.crash_body .feedback-body { position: absolute; }
.crash_body .feedback-body .feedback-info { position: absolute;left: 0;right: 0;top: 0;bottom: 0;font-size: 20px;text-align: center; }
.crash_body .feedback-body .feedback-info .name { font-size: 130%; color: #fff; }
.crash_body .feedback-body .feedback-info .answer { color: #000; }
.crash_body .feedback-body.team_J svg polygon { fill: #D53367; }
.crash_body .feedback-body.team_I svg polygon { fill: #3695CA; }
.crash_body .feedback-body.team_H svg polygon { fill: #BC33B0; }
.crash_body .feedback-body.team_G svg polygon { fill: #39CD9C; }
.crash_body .feedback-body.team_F svg polygon { fill: #8936C5; }
.crash_body .feedback-body.team_E svg polygon { fill: #E07A23; }
.crash_body .feedback-body.team_D svg polygon { fill: #4744DB; }
.crash_body .feedback-body.team_C svg polygon { fill: #E0C200; }
.crash_body .feedback-body.team_B svg polygon { fill: #DA3232; }
.crash_body .feedback-body.team_A svg polygon { fill: #75CC35; }

.team-rank-table { margin-top: 20px; font-size: 30px; color: #fff; }
.team-rank-table.team_J { background: #D53367; }
.team-rank-table.team_I { background: #3695CA; }
.team-rank-table.team_H { background: #BC33B0; }
.team-rank-table.team_G { background: #39CD9C; }
.team-rank-table.team_F { background: #8936C5; }
.team-rank-table.team_E { background: #E07A23; }
.team-rank-table.team_D { background: #4744DB; }
.team-rank-table.team_C { background: #E0C200; }
.team-rank-table.team_B { background: #DA3232; }
.team-rank-table.team_A { background: #75CC35; }
.team-rank-table .team-name { width: 85px; background: #fff; text-align: center; padding: 15px 5px; font-weight: 600; color: #5f5f5f; }
.team-rank-table .team-stds { font-size: 24px; padding: 15px; }
.team-rank-table .team-score { width: 170px; padding: 15px; font-weight: 600; text-align: right; }

.battleMode { cursor: pointer; }
.battleMode > img { width: 50%; padding: 5px; border-radius: 2px; border: 1px solid #ddd; }
.battleMode > div { float: right; width: 50%; font-size: 16px; text-align: center; color: #555; padding: 5px 25px; }
.battleMode:hover > img { background: rgba(0, 0, 0, 0.2); }
.battleMode.checked > img { background: rgba(52, 152, 219, 0.7); }

.battle-team-cnt-body { width: 100px; padding-right: 10px; }

.btn-battle-event { width: 260px; height: 130px; position: relative; cursor: pointer; }
.btn-battle-event>.bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.3); transform: skewX(-12deg); }
.btn-battle-event>.bg.type2 { background: rgba(255, 255, 255, 0.025); }
.btn-battle-event:hover>.bg { background: rgba(255, 255, 255, 0.06); }

.report-panel .cc-table { height: 55px; border-bottom: 1px solid #e5e5e5; }
.report-panel .cc-table:last-child { border-bottom: none; }

input.new-rank-name::-webkit-input-placeholder {
	font-size: 24px;
}
input.new-rank-name:-moz-placeholder { /* Firefox 18- */
	font-size: 24px;
}
input.new-rank-name::-moz-placeholder {  /* Firefox 19+ */
	font-size: 24px;
}
input.new-rank-name:-ms-input-placeholder {  
	font-size: 24px;
}

.team-battle-order-body { display: none; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.team-battle-order-body.active { display: block; }
.team-battle-order-body .content { height: calc(100% - 155px); }
.team-battle-order-body .bottom { display: table; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 85px; background: rgba(7, 31, 46, 0.91); border-top: 1px solid #273F50; }
.team-battle-order-body .bottom>* { display: table-cell; vertical-align: middle; }

.search-item { display: inline-block; vertical-align: text-top; width: calc(50% - 8px); background-color: #F1F5FF; border-radius: 8px; padding: 24px; margin-bottom: 16px; }
.cc-row .search-item:nth-child(2n-1) { margin-right: 8px; }
.cc-row .search-item:nth-child(2n) { margin-left: 8px; }

.flip-body>.flip-card { margin-right: 15px !important; margin-bottom: 15px; width: calc(50% - 10px); height: 159px; font-size: 13px; }
.flip-body>.flip-card:nth-child(2n) { margin-right: 0px !important; }
.flip-body>.flip-card.sentence .flip-card-inner .card-content { margin: 21px 60px 21px 85px; }

.btn-battle-start { display: block; margin: 0px auto; background-image: url(/images/v2/battle/bg_btn_battle_start_01.png); height: 99px; width: 474px; background-repeat: no-repeat; }
.btn-battle-start:active { background-image: url(/images/v2/battle/bg_btn_battle_start_02.png); }

.btn-battle-v3 { display: inline-block; width: 72px; height: 72px; background-color: rgba(28, 149, 255, 0.17); border-radius: 8px; cursor: pointer; font-size: 0px; }
.start-page.btn-battle-v3 {display: inline-block; width: 50px; height: 50px; background-color:transparent; border-radius: 8px; cursor: pointer; font-size: 0px; position:absolute; right:0; top:10px;}
.btn-battle-v3:hover { background-color: rgba(28, 149, 255, 0.35); }
.btn-battle-v3>div { display: table; width: 100%; height: 100%; }
.btn-battle-v3>div>div { display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-size: 12px; font-weight: 600; }

.btn-battle-v4 { display: inline-block; width: 100px; padding: 12px 5px; text-align: center; font-weight: 700; font-size: 14px; line-height: 140%; color: #404354; background: rgba(255, 255, 255, 0.9); border: 2px solid rgba(255, 255, 255, 0.41); border-radius: 4px; cursor: pointer; }
.btn-battle-v4:hover { background: rgba(240, 240, 240, 0.9); border: 2px solid rgba(240, 240, 240, 0.41); }
.btn-battle-v4.disabled { background: rgba(200, 200, 200, 0.9); border: 2px solid rgba(200, 200, 200, 0.41); color: #fff; pointer-events: none; cursor: default; }
.btn-battle-v4.disabled img { filter: grayscale(1); }

.battle-private-score-body { position: relative; width: 100%; height: 100%; }
.battle-private-score, .battle-private-score-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.battle-private-score-bg .bg-div { position: relative; width: 100%; height: calc(100% / 3); }
.is-balloon .battle-private-score-bg .bg-div { border-bottom: none; }
.battle-private-score-bg .bg-div.s2 { background-color: rgba(0, 0, 0, 0.2); }
.battle-private-score-bg .bg-div.s3 { background-color: rgba(0, 0, 0, 0.4); }
.is-balloon .battle-private-score-bg .bg-div.s2, .is-balloon .battle-private-score-bg .bg-div.s3 { background-color: transparent; }
.battle-private-score-bg .bg-div .txt { position: absolute; right: 20px; bottom: 20px; font-size: 40px; font-weight: 600; color: rgba(238, 243, 255, 0.24); }
.is-balloon .battle-private-score-bg .bg-div .txt { color: transparent; }
.battle-private-score .private-score-item { display: block; text-align: center; color: #fff; font-size: 28px; position: absolute; min-width: 130px; max-width: 150px; padding: 14px 10px; background-color: #1B3576; border: 2px solid #2C4C9C; border-radius: 8px; bottom: 0px; transition: all 0.3s cubic-bezier(0, 0, 0.05, 1); white-space: nowrap; z-index: 0; }
.battle-private-score .private-score-item>div { overflow: hidden; word-break: keep-all; }
.battle-private-score .private-score-item.top { background-color: rgba(26, 212, 208, 0.72); border-color: #1AD4D0; padding-top: 40px; z-index: 1; }
.battle-private-score .private-score-item.top:after { content: ""; position: absolute; background-image: url(/images/v2/battle/img_score_top_01.png); background-size: 154px 96px; left: calc(50% - 77px); top: -55px; width: 154px; height: 96px; }

.flip-card:not(.drill):hover .flip-card-front { border-color: #02286A; box-shadow: 1px 0px #02286A, 0px 1px #02286A, -1px 0px #02286A, 0px -1px #02286A; }
.flip-card-back { background-color: #02286A; border-color: #02286A; }

.cc.triple_down>span:before { color: inherit !important; }

.battle-balloon-body { position: absolute; left: -310px; top: -24px; }
.battle-balloon { display: inline-block; position: relative; background: #ffca28; margin: 0 auto 10px; border-radius: 10px; text-align: left; padding: 10px 20px; font-size: 26px; font-weight: 600; color: #333; }
.battle-balloon:before { content: ''; position: absolute; background: #ffca28; height: 30px; width: 30px; border-radius: 30px; bottom: 15px; right: -35px; }
.battle-balloon:after { content: ''; position: absolute; background: #ffca28; height: 20px; width: 20px; border-radius: 20px; bottom: 2px; right: -57px; }

.battle-user-list2 { position: absolute; left: 0px; right: 0px; bottom: 8px; }


.private-score-item2 { display: block; text-align: center; color: #fff; font-size: 28px; position: absolute; bottom: 0px; transition: all 1.2s cubic-bezier(0, 0, 0.05, 1); white-space: nowrap; z-index: 0; }
.private-score-item2.rank1, .private-score-item2.rank2, .private-score-item2.rank3, .private-score-item2.last { z-index: 1; }
.private-score-item2>div>img { width: 130px; transition: all 0.3s cubic-bezier(0, 0, 0.05, 1); transform-origin: 50% 100%; }
.private-score-item2>div>span { position: absolute; bottom: calc(100% + 5px); left: calc(50% - 55px); width: 110px; background: rgba(0, 0, 0, 0.65); font-weight: 600; border-radius: 8px; padding: 5px 0px; text-shadow: 2px 4px 0px rgb(0 0 0 / 15%); transition: all 0.3s cubic-bezier(0, 0, 0.05, 1); }
.private-score-item2>div>span.banish { display: none; }
.private-score-item2:not(.moving):hover>div>span.name { display: none; }
.private-score-item2:not(.moving):hover>div>span.banish { display: block; width: 150px; left: calc(50% - 75px); background: #C9484D; cursor: pointer; }
.private-score-item2.init>div>img { transform: scale(0.5); }
.private-score-item2.init>div>span { bottom: calc(47% + 5px); transform: scale(0.7); }
.private-score-item2.rank1>div>img { transform: scale(2.0); }
.private-score-item2.rank1>div>span { bottom: calc(200% + 5px); }
.private-score-item2.rank2>div>img { transform: scale(1.6); }
.private-score-item2.rank2>div>span { bottom: calc(160% + 5px); }
.private-score-item2.rank3>div>img { transform: scale(1.3); }
.private-score-item2.rank3>div>span { bottom: calc(130% + 5px); }
.private-score-item2.last>div>img { transform: scale(1.0); }
.private-score-item2.last>div>span { bottom: calc(100% + 5px); transform: scale(1); }
.moving { -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: moving; animation-name: moving; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
@-webkit-keyframes moving {
  0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  16.7% { -webkit-transform: translate(-6.5px, -6.5px); transform: translate(-6.5px, -6.5px); }
  33.4% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  50.1% { -webkit-transform: translate(0px, -9px); transform: translate(0px, -9px); }
  66.8% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  85% { -webkit-transform: translate(6.5px, -6.5px); transform: translate(6.5px, -6.5px); }
}

@keyframes moving {
  0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  16.7% { -webkit-transform: translate(-6.5px, -6.5px); transform: translate(-6.5px, -6.5px); }
  33.4% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  50.1% { -webkit-transform: translate(0px, -9px); transform: translate(0px, -9px); }
  66.8% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  85% { -webkit-transform: translate(6.5px, -6.5px); transform: translate(6.5px, -6.5px); }
}

.final-name-box { background-color: rgba(0, 0, 0, 0.7); border-radius: 20px; padding: 20px; color: #fff; font-size: 80px; font-weight: 600; animation-delay: 1s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }

.battle-background { width: 100%; position: absolute; left: 0px; bottom: 0%; transition: all 1s cubic-bezier(0, 0, 0.05, 1); }
.battle-background.v-month { filter: brightness(0.5); }
.battle-background.init { filter: blur(10px); }
.battle-background.final { filter: brightness(0.3); }
.battle-background.final.v-month { filter: brightness(0.35); }