@charset "UTF-8";
/*--中文--*/

*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
html,body{ margin: 0; padding: 0; font-size: 16px;}
body{ background:#5b120e;}
img{ vertical-align: bottom; max-width: 100%;}
footer{ margin: 100px 0 0 0; background: #210000;}
input, select, textarea{ padding: 12px 15px; border-radius: 0; background: #ece2c4; font-weight: bolder; font-size: 16px; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; color: #5b120e; box-sizing: border-box;}
select{ cursor: pointer;}
input:focus, select:focus, textarea:focus{ border: none; outline: none;}
input[type="checkbox"]{ display: none; margin: 0; padding: 0;}
::placeholder{ color: #5b120e;}
.w100{ width: 100%;}

.index_btm_bg{ position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../images/index_btm_bg.jpg) bottom center no-repeat;}
.main_btm_bg{ position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../images/news/news_btm_bg.jpg) bottom center no-repeat;}
@media (max-width:1200px){
.index_btm_bg, .main_btm_bg{ background-position: 60% 100%; }
}
@media (max-width:768px){
.index_btm_bg, .main_btm_bg{ background-size: 200%; background-position: 65% 100%;}
input, select, textarea{ font-size: 14px;}
}

.all{ position: relative; max-width: 1920px; margin: 0 auto;}


.kv{ position: relative;}
.kv img:not(.logo){ pointer-events: none;}
.character_01{ position: absolute; left: 15.3125%; top: 31.19%; width: 16.042%; z-index: 1; animation: 0.5s character_03 forwards ease-in-out; transform-origin: 0% 50%; animation-delay: 1.5s; opacity: 0;}
.character_02{ position: absolute; left: 18.4375%; top: 27.565%; width: 25.1042%; z-index: 3; animation: 0.5s character_03 forwards ease-in-out; transform-origin: 16% 50%; animation-delay: 1.3s; opacity: 0;}
.character_03{ position: absolute; left: 25.105%; top: 14.715%; width: 26.9792%; z-index: 2; animation: 0.5s character_02 forwards ease-in-out; transform-origin: 32% 50%; animation-delay: 1.1s; opacity: 0;}
.character_04{ position: absolute; left: 29.9%; top: 17.41%; width: 33.9583%; z-index: 4; animation: 0.5s character_01 forwards ease-in-out; animation-delay: 0.9s; opacity: 0;}
.character_05{ position: absolute; left: 48.178%; top: 22.28%; width: 21.5625%; z-index: 3; animation: 0.5s character_02 forwards ease-in-out; transform-origin: 66% 50%; animation-delay: 1.1s; opacity: 0;}
.character_06{ position: absolute; left: 57.34%; top: 23.627%; width: 22.3438%; z-index: 2; animation: 0.5s character_03 forwards ease-in-out; transform-origin: 82% 50%; animation-delay: 1.3s; opacity: 0;}
.character_07{ position: absolute; left: 68.28%; top: 28.6%; width: 16.5625%; z-index: 1; animation: 0.5s character_03 forwards ease-in-out; transform-origin: 100% 50%; animation-delay: 1.5s; opacity: 0;}

@keyframes character_01 {
    0%{ transform: scale(1.5); opacity: 0;}
    100%{ transform: scale(1); opacity: 1;}
}
@keyframes character_02 {
    0%{ transform: scale(1.3); opacity: 0;}
    100%{ transform: scale(1); opacity: 1;}
}
@keyframes character_03 {
    0%{ transform: scale(1.15); opacity: 0;}
    100%{ transform: scale(1); opacity: 1;}
}

.kv>div .character_01{ position: absolute; left: 15.3125%; top: 31.19%; width: 16.042%; z-index: 1; animation: 6s character_step2_03 infinite ease-in-out; transform-origin: 100% 50%; animation-delay: 2.3s; opacity: 0;}
.kv>div .character_02{ position: absolute; left: 18.4375%; top: 27.565%; width: 25.1042%; z-index: 3; animation: 6s character_step2_03 infinite ease-in-out; transform-origin: 82% 50%; animation-delay: 2.2s; opacity: 0;}
.kv>div .character_03{ position: absolute; left: 25.105%; top: 14.715%; width: 26.9792%; z-index: 2; animation: 6s character_step2_02 infinite ease-in-out; transform-origin: 66% 50%; animation-delay: 2.1s; opacity: 0;}
.kv>div .character_04{ position: absolute; left: 29.9%; top: 17.41%; width: 33.9583%; z-index: 4; animation: 6s character_step2_01 infinite ease-in-out; animation-delay: 2s; opacity: 0;}
.kv>div .character_05{ position: absolute; left: 48.178%; top: 22.28%; width: 21.5625%; z-index: 3; animation: 6s character_step2_02 infinite ease-in-out; transform-origin: 32% 50%; animation-delay: 2.1s; opacity: 0;}
.kv>div .character_06{ position: absolute; left: 57.34%; top: 23.627%; width: 22.3438%; z-index: 2; animation: 6s character_step2_03 infinite ease-in-out; transform-origin: 16% 50%; animation-delay: 2.2s; opacity: 0;}
.kv>div .character_07{ position: absolute; left: 68.28%; top: 28.6%; width: 16.5625%; z-index: 1; animation: 6s character_step2_03 infinite ease-in-out; transform-origin: 0% 50%; animation-delay: 2.3s; opacity: 0;}
@keyframes character_step2_01 {
    0%{ transform: scale(1); opacity: 1;}
    6%{ transform: scale(1.3); opacity: 0;}
    100%{ transform: scale(1.3); opacity: 0;}
}
@keyframes character_step2_02 {
    0%{ transform: scale(1); opacity: 1;}
    6%{ transform: scale(1.3); opacity: 0;}
    100%{ transform: scale(1.3); opacity: 0;}
}
@keyframes character_step2_03 {
    0%{ transform: scale(1); opacity: 1;}
    6%{ transform: scale(1.15); opacity: 0;}
    100%{ transform: scale(1.15); opacity: 0;}
}

.index_slogan_01{ position: absolute; left: 33.3854%; top: 67.2538%; width: 31.0416%; z-index: 5; animation: 1s index_slogan forwards ease-in-out; animation-delay: 0s; opacity: 0;}
.index_slogan_02{ position: absolute; left: 33.3854%; top: 67.2538%; width: 31.0416%; z-index: 5; animation: 1s index_slogan forwards ease-in-out; animation-delay: 0.2s; opacity: 0;}
.index_slogan_03{ position: absolute; left: 33.3854%; top: 67.2538%; width: 31.0416%; z-index: 5; animation: 1s index_slogan forwards ease-in-out; animation-delay: 0s; opacity: 0;}
@keyframes index_slogan {
0%{ transform: skewX(0deg) skewY(-11deg) scale(-0.05, 0.05); left: 70%; top: 37.2538%; opacity: 0;}
40%{ transform: skewX(0deg) skewY(-15deg) scale(-0.5, 0.5); left: 10%; top: 52.2538%; opacity: 1;}
45%{ transform: skewX(0deg) skewY(-45deg) scale(0, 0.5); left: 0%; top: 60.2538%; opacity: 1;}
50%{ transform: skewX(0deg) skewY(0deg) scale(0.5, 0.5); left: 10%; top: 68.2538%; opacity: 1;}
55%{ transform: skewX(0deg) skewY(0deg) scale(1, 1); left: 33.3854%; top: 67.2538%; opacity: 1;}
90%{ transform: skewX(0deg) skewY(0deg) scale(1, 1); left: 36.3854%; top: 64.2538%; opacity: 1;}
100%{ transform: skewX(0deg) skewY(0deg) scale(1, 1); left: 33.3854%; top: 67.2538%; opacity: 1;}
}

.kv>div .index_slogan_01{ position: absolute; left: 33.3854%; top: 67.2538%; width: 31.0416%; z-index: 5; animation: 3s index_slogan_step2 infinite ease-in-out; animation-delay: 1.6s; opacity: 0; z-index: 5;}
@keyframes index_slogan_step2 {
0%{ filter: brightness(1); opacity: 0.8;}
20%{ filter: brightness(1); opacity: 0.8;}
21%{ filter: brightness(1.5); opacity: 0.8;}
22%{ filter: brightness(1); opacity: 0.8;}
30%{ filter: brightness(1); opacity: 0.8;}
31%{ filter: brightness(1.5); opacity: 0.8;}
32%{ filter: brightness(1); opacity: 0.8;}
100%{ filter: brightness(1); opacity: 0.8;}
}

.logo{ position: absolute; left: 1.875%; top: 2.7%; width: 15.78125%; z-index: 5;}
.light_01{ position: absolute; left: 13.875%; top: 63.7%; width: 12.1875%; z-index: 5; animation: 3s light01 infinite linear;}
.light_02{ position: absolute; left: 71.875%; top: 66.7%; width: 6.4583%; z-index: 5; animation: 3s light01 infinite linear; animation-delay: 1s;}
.light_03{ position: absolute; left: 35.875%; top: 59.7%; width: 3.854%; z-index: 5; animation: 3s light01 infinite linear; animation-delay: 2s;}
@keyframes light01 {
    0%{ transform: translate(10px,10px); filter: brightness(1);}
    50%{ transform: translate(0,0); filter: brightness(1);}
    51%{ transform: translate(0,0); filter: brightness(1.5);}
    52%{ transform: translate(0,0); filter: brightness(1);}
    100%{ transform: translate(10px,10px); filter: brightness(1);}
}

@media (max-width:768px){
.kv{ width: 100%; overflow: hidden;}
.index_top_bg{ width: 300%; max-width: 300%; margin: 0 0 0 -100%;}

.character_01{ display: none; left: 15.3125%; top: 31.19%; width: 16.042%;}
.character_02{ left: -9.5625%; top: 21.565%; width: 64.1042%;}
.character_03{ left: 0%; top: 7.715%; width: 65%;}
.character_04{ left: 4%; top: 17.41%; width: 80%;}
.character_05{ left: 38.178%; top: 21.28%; width: 52.5625%;}
.character_06{ left: 56.34%; top: 19.627%; width: 53.3438%;}
.character_07{ left: 33.28%; top: 7.6%; width: 38.5625%;}

.kv>div .character_01{ display: none; left: 15.3125%; top: 31.19%; width: 16.042%;}
.kv>div .character_02{ left: -9.5625%; top: 21.565%; width: 64.1042%;}
.kv>div .character_03{ left: 0%; top: 7.715%; width: 65%;}
.kv>div .character_04{ left: 4%; top: 17.41%; width: 80%;}
.kv>div .character_05{ left: 38.178%; top: 21.28%; width: 52.5625%;}
.kv>div .character_06{ left: 56.34%; top: 19.627%; width: 53.3438%;}
.kv>div .character_07{ left: 33.28%; top: 7.6%; width: 38.5625%;}

.index_slogan_01{ left: 10%; top: 67.2538%; width: 80%;}
.index_slogan_02{ left: 10%; top: 67.2538%; width: 80%;}
.index_slogan_03{ left: 10%; top: 67.2538%; width: 80%;}
@keyframes index_slogan {
0%{ transform: skewX(0deg) skewY(-11deg) scale(-0.05, 0.05); left: 70%; top: 37.2538%; opacity: 0;}
40%{ transform: skewX(0deg) skewY(-15deg) scale(-0.5, 0.5); left: -20%; top: 52.2538%; opacity: 1;}
45%{ transform: skewX(0deg) skewY(-45deg) scale(0, 0.5); left: -70%; top: 60.2538%; opacity: 1;}
50%{ transform: skewX(0deg) skewY(0deg) scale(0.5, 0.5); left: -20%; top: 68.2538%; opacity: 1;}
55%{ transform: skewX(0deg) skewY(0deg) scale(1, 1); left: 10%; top: 67.2538%; opacity: 1;}
90%{ transform: skewX(0deg) skewY(0deg) scale(1, 1); left: 15%; top: 64.2538%; opacity: 1;}
100%{ transform: skewX(0deg) skewY(0deg) scale(1, 1); left: 10%; top: 67.2538%; opacity: 1;}
}

.kv>div .index_slogan_01{ left: 10%; top: 67.2538%; width: 80%;}

.logo{ left: 10px; top: 5px;}
}


.index_info{ padding: 85px 0; background: #210000 url(../images/index_mid_bg.jpg) center top no-repeat; background-size: contain;}
.index_info>div{ display: flex; flex-wrap: wrap; max-width: 1200px; margin: 6px auto 0;}

.index_news{ width: calc(100% - 730px); padding: 30px 35px; background:linear-gradient(45deg, #f7c75c, #e2ad36); border: 1px solid #6c5531;}
.index_news .title{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 5px; padding: 0 0 5px 0; color: #99322b; font-size: 20px; font-weight: bolder; background: url(../images/index_title_bg.png) left bottom no-repeat;}
.index_news .title a{ padding: 0 10px; background: #99322b; font-size: 14px; font-weight: normal; line-height: 20px; color: #fff; text-decoration: none;}
.index_news>a{ display: flex; justify-content: space-between; text-decoration: none; padding: 12px 0;}
.index_news>a+a{ border-top: 1px solid #bd8e26;}
.index_news>a:last-child{ padding: 15px 0 0;}
.index_news>a:hover p{ color: #b6150a;}
.index_news>a p{ margin: 0; font-size: 14px; color: #210000; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; transition: .5s;}
.index_news>a span{ padding: 0 0 0 20px; font-size: 12px; color: #fbe8bc;}

.index_tabs{ margin: 0 0 0 6px; width: 650px; max-width: 100%; border:1px solid #6c5531;}
.index_tabs .tabs{ display: flex; justify-content: center; background: #371917; color: #fbe8bc; font-size: 16px; font-weight: bolder;}
.index_tabs .tabs p{ margin: 0 10px; padding: 15px 5px; border-bottom: 4px solid #371917; cursor: pointer; transition: .5s;}
.index_tabs .tabs p:hover{ border-bottom: 4px solid #fbe8bc;}
.index_tabs .tabs p.active{ border-bottom: 4px solid #fec604;}
.index_tabs .box{ display: flex; justify-content: center; align-items: center; height: 252px;}
.index_tabs .box h3{ margin: 0; padding: 0 0 20px 0; font-size: 36px; color: #fbe8bc;}
.index_tabs .box h4{ color: #fbe8bc; margin: -20px 0 20px 0;}
.index_tabs .box div{ width: 100%; text-align: right; padding: 0 50px;}
.index_tabs .box div a{ display: inline-block; margin: 0 0 10px 5px; width: 180px; line-height: 40px; text-align: center; background: #371917; border: 1px solid #99322b; color: #fff; text-decoration: none; transition: .5s;}
.index_tabs .box div a:hover{ background:linear-gradient(45deg, #e2ad36, #f7c75c); border:1px solid #f7c75c; color: #371917;}
.index_tabs .box_01{ background: url(../images/index_tabsbg_01.jpg) center bottom no-repeat;}
.index_tabs .box_02{ background: url(../images/index_tabsbg_03.jpg) center bottom no-repeat;}
.index_tabs .box_03{ background: url(../images/index_tabsbg_02.jpg) center bottom no-repeat;}
.index_tabs .box_04{ background: url(../images/index_tabsbg_04.jpg) center bottom no-repeat;}

@media (max-width:1200px){
.index_info{ padding: 85px 20px;}
}

@media (max-width:1000px){
.index_info>div{ margin: 20px 0 0 0;}
.index_news{ width: 100%; box-sizing: border-box;}
.index_tabs{ width: 100%; margin: 20px 0 0 0; background: #99322b;}
.index_tabs .tabs p{ margin: 0; font-size: 14px;}
.index_tabs .box{ background-size: cover; justify-content: end;}
.index_tabs .box div{ width: 59%;}
.index_tabs .box img{ width: 100%;}
}

@media (max-width:768px){
.index_info{ padding: 25px 10px;}
.index_news{ padding: 20px 15px;}
.index_tabs .tabs p{ font-size: 12px;}
.index_tabs .box div{ width: 71%;}
.index_tabs .box div a{ font-size: 14px;}
}

@media (max-width:576px){
.index_tabs .box{ display: block; height: auto;}
.index_tabs .box h3{ font-size: 20px;}
.index_tabs .box div{ width: 100%; padding: 30px 15px; text-align: center; box-sizing: border-box;}
.index_tabs .box div a{ margin: 0 0 10px;}
.index_tabs .box_01{ background: url(../images/index_tabsbg_01.jpg) right bottom no-repeat; background-size: cover;}
.index_tabs .box_02{ background: url(../images/index_tabsbg_03.jpg) right bottom no-repeat; background-size: cover;}
.index_tabs .box_03{ background: url(../images/index_tabsbg_02.jpg) right bottom no-repeat; background-size: cover;}
.index_tabs .box_04{ background: url(../images/index_tabsbg_04.jpg) right bottom no-repeat; background-size: cover;}
}


.index_special{ width: 280px; height: 300px; padding: 30px 35px; background: url(../images/index_specialbg.jpg) center bottom no-repeat; border: 1px solid #6c5531; box-sizing: border-box;}
.index_special .title{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 5px; padding: 0 0 5px 0; color: #fbe8bc; font-size: 20px; font-weight: bolder; background: url(../images/index_title_bg.png) left bottom no-repeat;}
.index_special a{ display: inline-block; margin: 10px 0 0 0; width: 150px; line-height: 40px; text-align: center; background: #371917; border: 1px solid #99322b; color: #fff; text-decoration: none; transition: .5s;}
.index_special a:hover{ background:linear-gradient(45deg, #e2ad36, #f7c75c); border:1px solid #f7c75c; color: #371917;}

.index_stream{ display: flex; flex-wrap: wrap; justify-content: space-evenly; flex: 1; margin: 0 6px; padding: 30px 0; background: #371917; border: 1px solid #6c5531; box-sizing: border-box;}
.index_stream .title{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 32px; margin: 0 0 25px 35px; padding: 0 0 5px 0; color: #fbe8bc; font-size: 20px; font-weight: bolder; background: url(../images/index_title_bg.png) left bottom no-repeat;}
.index_stream img{ max-width: 100%; transition: .5s;}
.index_stream a:hover img{ opacity: 0;}
.index_stream .index_stream_btn_01{ max-width: 48%; background: url(../images/index_stream_btn_01b.png) top center no-repeat; background-size: contain;}
.index_stream .index_stream_btn_02{ max-width: 48%; background: url(../images/index_stream_btn_02b.png) top center no-repeat; background-size: contain;}

.index_video{ display: flex; flex-direction: column; width: 460px; border: 1px solid #6c5531; cursor: pointer;}
.index_video p{ display: flex; justify-content: flex-end; align-items: center; flex: 1; margin: 0; padding: 0 20px 0 0; background: #e2ad36; color: #210000;}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe,.embed-container object,.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media (max-width:1000px){
.index_stream{ margin: 0 0 0 6px;}
.index_video{ width: 100%; margin: 20px 0 0 0;}
.index_video p{ justify-content:center; padding: 15px 20px;}
}
@media (max-width:768px){
.index_special a{ font-size: 14px;}
}
@media (max-width:576px){
.index_special{ padding: 20px 15px; width: 100%; height: auto; min-height: 200px; background: #99322b url(../images/index_specialbg.jpg) right bottom no-repeat;}
.index_stream{ margin: 20px 0 0 0;}
.index_stream .title{ margin: 0 0 25px 15px;}
}


.index_btm{ margin: 0 auto; padding: 0 20px; width: 100%; max-width: 1200px; text-align: center; box-sizing: border-box;}
.index_btm p{ color: #fff; line-height: 24px;}
.index_btm span{ display: block; color: #f7c75c; font-size: 14px; line-height: 24px;}
.index_btm h3{ margin: 60px 0 0 0; color: #fff; font-size: 28px;}
.index_btm img{ margin: 35px 0;}
.index_btm img.index_btm_pic03{ margin: 140px 0 35px;}
.index_btm img.index_btm_pic05{ margin: 35px 0 140px;}
@media (max-width:768px){
.index_btm{ padding: 0 15px;}
.index_btm p{ font-size: 14px;}
.index_btm span{ font-size: 12px;}
.index_btm h3{ font-size: 20px;}
.index_btm img.index_btm_pic03{ margin: 35px 0;}
.index_btm img.index_btm_pic05{ margin: 35px 0;}
}


.index_top{ position: relative;}
.nava{ position: absolute; top: -6px; right: 10px; z-index: 11;}
.nava a{ display: inline-block; border: 1px solid #c99995; background: #210000; transition: .5s;}
.nava a:hover{ background:linear-gradient(45deg, #5c1816, #861e1b);}
.nava a+a{ margin: 5px 0 0 0;}
@media (max-width:768px){
.nava{ top: 0; right: 5px;} 
.nava a{ width: 36px;}
}

.navb{ position: fixed; bottom: 20px; right: 10px; width: 154px; z-index: 10;}
.navb a{ display: block;}
.navb a:nth-child(1){ background: url(../images/navb_01b.png) center top no-repeat; background-size: contain;}
.navb a:nth-child(2){ background: url(../images/navb_02b.png) center top no-repeat; background-size: contain;}
.navb a:nth-child(3){ background: url(../images/navb_03b.png) center top no-repeat; background-size: contain;}
.navb a img{ transition: .5s;}
.navb a:hover img{ opacity: 0;}
.navb a+a{ margin: 5px 0 0 0;}
.navb span{ display: none;}
@media (max-width:1200px){
.navb{ width: 100px;}
}
@media (max-height:514px){
.navb{ width: 77px;}
}
@media (max-width:768px){
.navb{ display: flex; width: 100%; right: 0; bottom: 0; top: unset;}
.navb a{ flex: 1; color: #fbe8bc; text-decoration: none; text-align: center; padding: 10px 0; font-size: 14px;}
.navb a:nth-child(1){ background: #b6150a;}
.navb a:nth-child(2){ background: #b6150a;}
.navb a:nth-child(3){ background: #b6150a;}
.navb a+a{ margin: 0; border-left: 1px solid #861e1b;}
.navb img{ display: none;}
.navb span{ display: block;}
}



/*--彈窗--*/
.overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 20;}
.zone{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; max-width: calc(100% - 20px); z-index: 21;}
.zone>div{ display: flex; flex-direction: column; max-height: 85vh; margin: -1px 0 0 0; background: #6e100e url(../images/popup_bg.jpg) top center no-repeat;}
.zone>div .popup_colse{ display: block; text-align: right;}
.zone>div .popup_colse img{ margin: 0 15px 0 0; cursor: pointer;}
.zone>div .popup_colse img:hover{ filter: brightness(1.5);}
.zone>div h3{ margin: 0; text-align: center; font-size: 40px; color: #fbe8bc;}
.zone>div h3 span{ padding: 0 0 5px; border-bottom: 3px solid #fbe8bc;}
.popup_info{ flex: 1; margin: 30px 48px 60px 70px; padding: 0 20px 0 0; overflow-y: auto;}
.popup_info::-webkit-scrollbar { width: 8px; background-color: #5b120e; }
.popup_info::-webkit-scrollbar-thumb { background-color: #b42d28;}
.popup_info h4{ margin: 30px 0; display: inline-block; padding: 10px 20px; border: 1px solid #ae3c37; font-size: 18px; font-weight: bolder; color: #fff; background: #600909;}
.popup_info h4 span{ color: #fec604;}
.popup_info h5{ margin: 0 0 15px; font-size: 20px; font-weight: bolder; color: #fbc447;}
.popup_info h5 span{ padding: 0 0 0 10px; font-size: 16px; font-weight: normal; color: #fbe8bc; }
.popup_info h6{ margin: 15px 0 30px; font-size: 16px; font-weight: bolder; color: #fd5c5c;}
.popup_info h7{ font-weight: bolder; font-size: 30px; color: #ece2c4;}
.popup_info h7 span{ font-size: 20px; color: #fec604;}
.popup_info p{ margin: 0 0 15px; font-size: 16px; font-weight: normal; color: #fbe8bc;}
.popup_info p span{ color: #fd5c5c;}
.popup_info p a{ color: #fd5c5c;}
.popup_info ol{ padding: 0;}
.popup_info ol li{ position: relative; margin: 0 0 15px; padding: 0 0 0 35px; color: #ece2c4; counter-increment:li; list-style: none;}
.popup_info ol li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: transparent; width: 19px; height: 19px; line-height: 19px; color:#ece2c4; background: #000; text-align: center; font-size: 0.75rem;}
.popup_info ol li span{ color: #fd5c5c;}
.popup_info ol li a{ color: #fd5c5c;}
.popup_info .link{ text-align: center;}
.popup_info .link a{ display: inline-block; padding: 10px 0; width: 200px; text-align: center; font-size: 22px; font-weight: bolder; text-decoration: none; color: #210000; background:linear-gradient(45deg, #e2ad36, #f7c75c); border: 1px solid #f6cb63;}
.popup_info .link a+a{ margin: 0 0 0 10px;}
.popup_info .link a:hover{ filter: brightness(1.2);}
.popup_info .pink_bg{ margin: 0 0 30px; padding: 30px; background: rgba(236,226,196,0.12);}


.popup_nav{ display: flex; margin: 0 0 30px;}
.popup_nav span{ flex: 1; padding: 15px 5px; text-align: center; background: #fbe8bc; color: #210000; font-weight: bolder; font-size: 18px; cursor: pointer; transition: .5s;}
.popup_nav span+span{ margin: 0 0 0 2px;}
.popup_nav span.active{ background: #fec604;}
.popup_nav span:hover{ background: #fec604;}
@media (max-width:768px){
.zone>div h3 span{ font-size: 20px;}

.popup_info{ margin: 30px 20px; padding: 0;}
.popup_info h4{ display: block; margin: 30px 0 15px; font-size: 14px; text-align: center;}
.popup_info h5{ font-size: 14px;}
.popup_info h5 span{ font-size: 12px;}
.popup_info h6{ font-size: 14px;}
.popup_info h7{ font-size: 16px;}
.popup_info h7 span{ font-size: 16px;}
.popup_info p{ font-size: 14px;}
.popup_info ol li{ font-size: 14px; padding: 0 0 0 30px;}
.popup_info .link a{ font-size: 16px; width: 45%;}
.popup_info .pink_bg{ padding: 15px;}

.popup_nav{ flex-wrap: wrap;}
.popup_nav span{ flex: auto; width: 33.3%; padding: 10px 5px; box-sizing: border-box; font-size: 14px; border: 1px solid #210000;}
.popup_nav span+span{ margin: 0;}

}

/*--獎勵--*/
.gift_list dl{ display: flex; align-items: center; flex-wrap: wrap; height: 40px; margin: 0; padding: 0; background: #210000; color: #fff; list-style: none;}
.gift_list dl dt{ text-align: center;}
.gift_list dl dt:nth-child(1){ width: 20%;}
.gift_list dl dt:nth-child(2){ width: 65%;}
.gift_list dl dt:nth-child(3){ width: 15%;}
.gift_list ul{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; background: #ece2c4; color: #fff; list-style: none;}
.gift_list ul:nth-of-type(even){ background: rgba(236,226,196,0.85);}
.gift_list ul+ul{ border-top: 1px solid #210000;}
.gift_list ul li{ box-sizing: border-box;}
.gift_list ul li+li{ border-left: 1px solid #210000;}
.gift_list ul li:nth-child(1){ display: flex; justify-content: center; align-items: center; width: 20%; padding: 30px; text-align: center;}
.gift_list ul li:nth-child(2){ width: 65%; padding: 30px 20px;}
.gift_list ul li:nth-child(3){ display: flex; justify-content: center; align-items: center; width: 15%; text-align: center; color: #210000;}
.gift_list ul li b{ display: block; color: #210000; margin: 0 0 5px;}
.gift_list ul li i{ display: block; color: #b6150a; font-style: normal; font-size: 14px;}
.gift_list ul li span{ display: block; color: #210000; font-size: 14px;}
.gift_list ul li img{ border: 1px solid #210000;}
@media (max-width:768px){
.gift_list dl{ font-size: 12px;}
.gift_list ul li:nth-child(1){ padding: 10px;}
.gift_list ul li:nth-child(2){ padding: 10px;}
}

/*--我要報名--*/
.apply_step{ display: flex; align-items: center; margin: 0 0 15px;}
.apply_step div{ position: relative; display: flex; flex-direction: column; align-items: center; width: 25%; padding: 10px 0; background: #6e100e; border: 1px solid #ae3c37;}
.apply_step div b{ color: #e2ad36;}
.apply_step div i{ color: #fff; font-size: 18px; font-weight: bolder; font-style: normal;}
.apply_step div::after{ position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); display: block; content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #e2ad36;}
.apply_step div:nth-of-type(3)::after{ display: none;}
.apply_step hr{ width: 12.5%; margin: 0; border: none; border-bottom: 3px solid #ae3c37;}
@media (max-width:768px){
.apply_step div{ width: 30%;}
.apply_step div b{ font-size: 12px;}
.apply_step div i{ font-size: 14px;}
.apply_step hr{ width: 5%;}
}
@media (max-width:576px){
.apply_step div::after{ display: none;}
}

/*--入選隊伍名單--*/
.popup_teamlist .search{ margin: 0 0 40px;}
.popup_teamlist .link a{ width: auto; padding: 10px 30px;}

.team_box{ display: flex;}
.team_box+.team_box{ border-top: 1px solid #371917;}

.team_list_title{ display: flex; margin: 60px 0 0 0; padding: 12px 0; background: #371917;}
.team_list_title div{ text-align: center; color: #fff;}
.team_list_title div:nth-of-type(1){ width: 120px;}
.team_list_title div:nth-of-type(2){ width: 60px;}
.team_list_title div:nth-of-type(3){ width: calc(60% - 90px);}
.team_list_title div:nth-of-type(4){ width: calc(40% - 90px);}

.team_area{ display: flex; justify-content: center; align-items: center; width: 120px; background: #99322b; text-align: center; color: #fff;}
.team_list{ width: calc(100% - 120px);}
.team_list p{ display: flex; margin: 0; background: #ece2c4; text-align: center;}
.team_list p+p{ border-top: 1px solid #371917;}
.team_list p:nth-of-type(even){ background: #dac2a8;}
.team_list i{ width: 60px; padding: 12px 0; border-left: 1px solid #371917; box-sizing: border-box; color: #371917; font-weight: normal; font-style: normal;}
.team_list b{ width: calc(60% - 19px); padding: 12px 0; border-left: 1px solid #371917; box-sizing: border-box; color: #371917; font-weight: normal;}
.team_list p span{ flex: 1; padding: 12px 0; border-left: 1px solid #371917; box-sizing: border-box; color: #371917; font-weight: normal;}
@media (max-width:768px){
.team_list_title{ font-size: 12px;}
.team_list_title div:nth-of-type(1){ width: 40px;}
.team_list_title div:nth-of-type(2){ display: none;}
.team_list_title div:nth-of-type(3){ width: calc(60% - 20px);}
.team_list_title div:nth-of-type(4){ width: calc(40% - 20px);}

.team_area{ width: 40px; font-size: 12px;}
.team_list{ width: calc(100% - 40px);}
.team_list p{ font-size: 12px;}
.team_list i{ display: none;}
.team_list b{ width: 60.42%;}
}


/*--表單--*/
.form{ margin: 60px 0 0 0;}
.form>div{ position: relative; display: flex; flex-wrap: wrap; align-items: center;}
.form>div+div{ margin: 20px 0 0 0;}
.form p{ width: 120px; margin: 0 20px 0 0; text-align: right;}
.form h6{ font-size: 14px; padding: 0 0 0 140px; margin: 15px 0 0;}
.form .arrow{ position: absolute; right: 10px; width: 0; height: 0; border-style: solid; border-width: 10px 7px 0 7px; border-color: #5b120e transparent transparent transparent; cursor: pointer;}
.form .w100-140{ width: calc(100% - 140px);}
.form .w100-240{ width: calc(100% - 250px); margin: 0 0 0 10px;}
.form .w100p{ width: 100px;}

label{ display: flex; align-items: center; margin: 0 0 30px; cursor: pointer;}
.popup_info label p{ margin: 0 0 0 10px;}
label div{ font-size: 30px; color: #fbe8bc;}
.form_recaptcha{ position: relative; height: 72px; margin: 0 0 30px; border: 1px solid #d3d3d3; background: url(../images/recaptcaha.jpg) right 10px no-repeat #f9f9f9 ; }
.form_recaptcha>div:not(.g-recaptcha){ position: absolute; right: 10px; bottom: 0;}
.form_recaptcha>div:not(.g-recaptcha) a{ text-decoration: none; color: #999; font-size: 12px;}
.g-recaptcha>div{ position: absolute; top: -1px; left: -1px; width: 200px !important; height: 66px !important; overflow: hidden;}
@media (max-width:768px){
.form p{ width: 100%; margin: 0 0 10px; text-align: left;}
.form h6{ padding: 0; margin: 10px 0 0;}
.form .arrow{ display: none;}
.form .w100-140{ width: 100%;}
.form .w100-240{ width: calc(100% - 95px); margin: 0 0 0 10px;}
.form .w100p{ width: 85px;}
}


/*--測試帳號列表--*/
.account_list div{ display: flex; background: #ece2c4; text-align: center; color: #371917;}
.account_list div:nth-of-type(even){ background: #dac2a8;}
.account_list div:nth-of-type(1){ background: #371917; color: #fff;}
.account_list div+div{ border-top:1px solid #371917;}
.account_list div i{ padding: 12px 0; width: 60px; font-style: normal;}
.account_list div b{ flex: 1; padding: 12px 0; border-left:1px solid #371917; font-weight: normal;}
.account_list div p{ flex: 1; padding: 12px 0; color: #371917; margin: 0; border-left:1px solid #371917;}
.account_list div:nth-of-type(1) p{ color: #fff;}
.account_list div span{ width: 160px; padding: 12px 0; border-left:1px solid #371917;}
@media (max-width:768px){
.account_list div{ font-size: 12px;}
.account_list div i{ display: none;}
.account_list div b{}
.account_list div p{ font-size: 12px;}
.account_list div span{ flex: 1; width: auto;}
}


/*--註冊隊伍查詢結果--*/
.team_info{ position: relative;}
.team_info.active{ filter:grayscale(1);}
.team_info p i{ padding: 2px 10px; margin: 0 0 0 10px; border: 1px solid #fbe8bc; font-size: 12px; font-style: normal; cursor: pointer;}
.team_info a{ position: absolute; right: 0; top: 50%; transform: translate(0,-35%); padding: 10px 20px; background: #600909; border: 1px solid #ae3c37; font-size: 22px; color: #fff; text-decoration: none; font-weight: bolder; transition: .5s;}
.team_info a:hover{ filter: brightness(1.2);}
.team_info.active h7{ text-decoration: line-through;}
.team_info.active h7 span{ text-decoration: none;}

.partner_info{ display: flex; align-items: center;}
.partner_info+.partner_info{ margin: 15px 0 0 0;}
.partner_info i{ font-style: normal; color: #ece2c4;}
.partner_info p{ flex: 1; margin: 0 20px; padding: 12px 15px; background: #ece2c4; color: #5b120e;}
.partner_info label{ margin: 0;}
.partner_info.other label{ visibility: hidden;}
.partner_info.partner_del p{ text-decoration: line-through; background: #c09287;}

@media (max-width:768px){
.team_info p i{ display: block; margin: 10px 0 0 0; padding: 10px; text-align: center;}
.team_info a{ position: static; display: inline-block; width: 100%; margin: 10px 0 0 0; box-sizing: border-box; text-align: center; font-size: 16px;}

.partner_info i{ font-size: 14px;}
}


/*--內頁最新消息--*/
.news_top_kv{ background: url(../images/news/news_top_kv.png) top center no-repeat; text-align: center;}
.news_top_kv>img{ max-width: 100%;}
.news_top_kv img.news_top_mobile{ display: none;}
.news_list{ margin: 0 auto 60px; padding: 0 20px; width: 100%; max-width: 1200px; text-align: center; box-sizing: border-box;}
.news_list ul{ margin: 10px auto 0; padding: 0; list-style: none; width: 1000px; max-width: 100%;}
.news_list ul li{ display: flex; border-bottom: 1px solid #871d18; color: #5b120e; font-weight: bolder;}
.news_list ul li:first-child{ padding: 12px 0; background: #e2ad36;}
.news_list ul li a{ display: flex; padding: 12px 0; width: 100%; color: #fbe8bc; text-decoration: none;}
.news_list ul li a:hover{ background: rgba(123,29,24,0.5);}
.news_list ul li p{ margin: 0; width: 80%; text-align: left;}
.news_list ul li:first-child p{ border-right: 1px solid #5b120e; text-align: center;}
.news_list ul li span{ margin: 0; width: 20%;}

.news_breadcrumb{ margin: 60px auto 0; width: 100%; max-width: 1000px;  text-align: right; color: #fff;}
.news_breadcrumb a{ color: #fff; text-decoration: none;}

.news_path{ margin: 40px 0 0;}
.news_path a{ display: inline-block; padding: 5px 10px; background: #fbe8bc; border: 1px solid #fbe8bc; color: #5b120e; text-decoration: none;}
.news_path a.active, .news_path a:hover{ background: #e2ad36; border: 1px solid #fbe8bc;}
.news_path span.prev:after{ display: inline-block; content: ""; margin: 0 10px 0 0; width: 0; height: 0; border-style: solid; border-width: 7px 10px 7px 0; border-color: transparent #e2ad36 transparent transparent; cursor: pointer;}
.news_path span.next:after{ display: inline-block; content: ""; margin: 0 0 0 10px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #e2ad36; cursor: pointer;}

.news_main{ margin: 0 auto 60px; padding: 0 20px; width: 100%; max-width: 1200px; text-align: center; box-sizing: border-box;}
.news_main .link{ text-align: center;}
.news_main .link a{ display: inline-block; padding: 10px 0; width: 200px; text-align: center; font-size: 22px; font-weight: bolder; text-decoration: none; color: #210000; background:linear-gradient(45deg, #e2ad36, #f7c75c); border: 1px solid #f6cb63;}
.news_main .link a+a{ margin: 0 0 0 10px;}
.news_main .link a:hover{ filter: brightness(1.2);}

.news_info{ margin: 10px auto 60px; padding: 40px 60px; width: 100%; max-width: 1000px; background: #3c0504; color: #fff; text-align: left; border: 1px solid #871d18; box-sizing: border-box;}
.news_info img{ width: 100%;}
.news_info .news_date{ color:#b4a070; font-size: 14px;}
.news_info .news_title{ margin: 0 0 30px 0; padding: 10px 0; color:#fbe8bc; font-size: 20px; font-weight: bolder; border-bottom: 1px solid #871d18;}

@media (max-width:1200px){
.news_top_kv{ background: none;}
}

@media (max-width:768px){
.news_list{ padding: 25px 10px;}
.news_list ul{ font-size: 14px;}
.news_list ul li p{ width: 65%;}
.news_list ul li span{ width: 35%;}

.news_breadcrumb{ font-size: 14px;}

.news_path{ font-size: 14px;}

.news_main{ padding: 25px 10px;}
.news_main .link a{ font-size: 16px; width: 45%;}

.news_info{ padding: 10px 15px 30px;}
.news_info .news_date{ font-size: 12px;}
.news_info .news_title{ font-size: 14px;}
}

@media (max-width:576px){
.news_top_kv img.news_top_mv{ display: none;}
.news_top_kv img.news_top_mobile{ display: block;}
}

/*--賽程表--*/
.schedule_top_kv{ background: url(../images/schedule/schedule_top_kv.png) top center no-repeat; text-align: center;}
.schedule_top_kv>img{ max-width: 100%;}
.schedule_top_kv img.schedule_top_mobile{ display: none;}
.schedule_btn{ display: flex; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 1200px; max-width: 100%;}
.schedule_btn a{ flex: 1; padding: 25px 0; background:linear-gradient(45deg, #3a0d0d, #3a0d0d); border:1px solid #852929; text-align: center; text-decoration: none; color: #fff; font-size: 26px; font-weight: bolder; transition: .5s;}
.schedule_btn a.active, .schedule_btn a:hover{ background:linear-gradient(45deg, #f7c75c, #e2ad36); color: #3a0d0d; border: 1px solid #f6cb63;}
.schedule_btn a.notop{ cursor: default; background: #999; color: #333; border: 1px solid #aaa;}

.schedule_second_btn{ position: absolute; left: 50%; transform: translate(-50% , 0); width: 100%; max-width: 1200px;}
.schedule_second_btn p{ display: flex; margin: 0; padding: 1px; background: linear-gradient(45deg, #3a0d0d, #3a0d0d); border: 1px solid #e6ba4f;}
.schedule_second_btn p span{ flex: 1; padding: 10px 0; font-size: 20px; font-weight: bolder; color: #fff; cursor: pointer; text-align: center;}
.schedule_second_btn p span.active{ background: linear-gradient(45deg, #f7c75c, #e2ad36); color: #3a0d0d;}
.schedule_second_btn p span:hover{ background: linear-gradient(45deg, #f7c75c, #e2ad36); color: #3a0d0d;}

.schedule_main{ margin: 80px auto; width: 100%; max-width: 1200px; box-sizing: border-box;}
.schedule_main .champion{ position: relative; width: 855px; max-width: 100%; margin: 0 auto;}
.schedule_main .champion img{ max-width: 100%;}
.schedule_main .champion img.championship{ display: none;}
.schedule_main .champion p{ position: absolute; top: 30%; right: 10%; margin: 0; color: #fbe8bc; font-size: 20px; font-weight: bolder;}
.schedule_main .champion span{ display: block; color: #e2ad36; font-size: 30px; font-weight: bolder; text-align: right;}

.schedule_main .schedule_stream{ margin: 20px 0 0 0; text-align: center;}
.schedule_main .schedule_stream a{ display: inline-flex; align-items: center; padding: 20px 30px; background:linear-gradient(45deg, #931011, #be3930); border: 1px solid #b13f38; color: #fbe8bc; font-weight: bolder; font-size: 22px; text-decoration: none; transition: .5s;}
.schedule_main .schedule_stream a:hover{ background: #931011;}
.schedule_main .schedule_stream a img{ margin: 0 10px 0 0;}

.schedule_table{ max-width: 800px; margin: 60px auto 0;}
.schedule_table dl{ display: flex; margin: 0; padding: 0; font-weight: bolder;}
.schedule_table dt{ display: flex; flex-direction: column;}
.schedule_table dt p{ margin: 0; padding: 12px 15px; background: #210000; color: #fff;}
.schedule_table dt span{ display: flex; flex: 1; justify-content: center; align-items: center; background: #99322b; color: #fff;}
.schedule_table dd{ flex: 1; margin: 0; }
.schedule_table dd p{ display: flex; margin: 0; background: #dac2a8; color: #371917; border-bottom: 1px solid #210000; text-align: center;}
.schedule_table dd p:nth-of-type(1){ background: #210000; color: #fff; border-bottom: none;}
.schedule_table dd p:nth-of-type(even) { background: #ece2c4;}
.schedule_table dd p span{ width: 10%; padding: 12px 0;}
.schedule_table dd p i{ flex: 1; padding: 12px 0; font-style: normal; border-left: 1px solid #210000;}
.schedule_table dd p b{ width: 30%; padding: 12px 0; border-left: 1px solid #210000;}
.schedule_table h6 { margin: 15px 0 30px; font-size: 16px; font-weight: bolder; color: #fd5c5c;}

.schedule{ text-align: center; font-weight: bolder;}
.schedule .folder_a{ width: 280px; max-width: 100%; margin: 0 auto; background:linear-gradient(90deg, #eda80e, #e8b536); border: 1px solid #e8b536;}
.schedule .folder_a p{ margin: 0; height: 10px; background: #a36513; text-align: right;}
.schedule .folder_a p img{ vertical-align: top;}
.schedule .folder_a span{ display: flex; justify-content: center; align-items: center; padding: 15px 0; font-size: 32px; color: #210000;}
.schedule .folder_b{ width: 48%; max-width: 100%; margin: 0 auto; background: #370e0b; border: 1px solid #df9c37; box-sizing: border-box;}
.schedule .folder_b p{ margin: 0; height: 10px; background: #df9c37; text-align: right;}
.schedule .folder_b p img{ vertical-align: top;}
.schedule .folder_b span{ display: flex; justify-content: center; align-items: center; padding: 15px 0; font-size: 24px; color: #fff;}


.schedule .schedule_col{ display: flex;}
.schedule .schedule_col .half{ width: 50%;}
.schedule .schedule_col .quarter{ width: 50%;}
.schedule .schedule_col .quarter .folder_b{ width: 80%;}
.schedule .line_left p{ margin: 0; height: 30px; border-right: 1px solid #fff; border-bottom: 1px solid #fff;}
.schedule .line_left span{ display: block; height: 30px; border-left: 1px solid #fff;}
.schedule .line_right p{ position: relative; margin: 0; height: 30px; border-bottom: 1px solid #fff;}
.schedule .line_right p::after{ display: block; content: ""; position: absolute; left: -4px; bottom: -4px; width: 7px; height: 7px; background: #eda80e; transform: rotate(45deg);}
.schedule .line_right span{ display: block; height: 30px; border-right: 1px solid #fff;}
.schedule .lose{ filter: saturate(0.3);}

@media (max-width:1200px){
.schedule_btn a{ font-size: 20px; padding: 15px 0;}
}
@media (max-width:768px){
.schedule_btn a{ flex: auto; font-size: 12px; padding: 10px 0;}
.schedule_btn a:nth-child(1),.schedule_btn a:nth-child(2),.schedule_btn a:nth-child(3),.schedule_btn a:nth-child(4){ width: 12%;}
.schedule_btn a:nth-child(5),.schedule_btn a:nth-child(6){ width: 26%;}

.schedule_second_btn p span{ font-size: 12px;}

.schedule_main{ padding: 25px 10px;}
.schedule_main .champion p{ font-size: 16px;}
.schedule_main .champion span{ font-size: 20px;}

.schedule_table dl{ flex-direction: column;}
.schedule_table dt p{ text-align: center;}
.schedule_table dt span{ padding: 12px 0;}
}
@media (max-width:576px){
.schedule_top_kv img.schedule_top_mv{ display: none;}
.schedule_top_kv img.schedule_top_mobile{ display: block;}

.schedule_main{ margin: 0; padding: 50px 10px 25px;}
.schedule_main .champion img.champion_bg{ display: none;}
.schedule_main .champion img.championship{ display: block; margin: 0 auto;}
.schedule_main .champion p{ position: static; text-align: center;}
.schedule_main .champion span{ position: static; text-align: center;}

.schedule_main .schedule_stream a{ font-size: 14px;}

.schedule_table{ margin: 30px 0;}
.schedule_table dl{ font-size: 12px;}
.schedule_table h6 { font-size: 12px;}

.schedule .folder_a span, .schedule .folder_b span{ font-size: 12px;}
.schedule .line_left p{ height: 15px;}
.schedule .line_left span{ height: 15px;}
.schedule .line_right p{ height: 15px;}
.schedule .line_right span{ height: 15px;}

}



.event_vote{ margin: 0 auto 60px; padding: 0 20px; width: 100%; max-width: 1200px; text-align: center; box-sizing: border-box;}
.event_vote_info{ margin: 60px auto 60px; padding: 60px; width: 100%; max-width: 1000px; background: #3c0504; color: #fff; text-align: center; border: 1px solid #871d18; box-sizing: border-box;}
.event_vote_info .link{ margin: 40px 0 0 0; text-align: center;}
.event_vote_info .link a{ display: inline-block; padding: 10px 0; width: 200px; text-align: center; font-size: 22px; font-weight: bolder; text-decoration: none; color: #210000; background:linear-gradient(45deg, #e2ad36, #f7c75c); border: 1px solid #f6cb63;}
.event_vote_info .link a:hover{ filter: brightness(1.2);}

.event_vote_info p{ margin: 0 0 30px;}
.event_vote_info p span{ display: block; margin: 0 0 30px; font-size: 20px; font-weight: bolder; color: #fd5c5c;}

.event_vote_info dl{ display: flex; margin: 0; list-style: none; background: #99322b; border-bottom: 1px solid #000;}
.event_vote_info dl dt{ flex: 1; padding: 10px 5px;}
.event_vote_info dl dt+dt{ border-left: 1px solid #000;}
.event_vote_info ul{ display: flex; margin: 0; list-style: none; background: #ece2c4; color: #210000;}
.event_vote_info ul+ul{ border-top: 1px solid #000; background: rgba(236,226,196,0.85);}
.event_vote_info ul li{ flex: 1; padding: 10px 5px;}
.event_vote_info ul li+li{ border-left: 1px solid #000;}

.event_vote h5{ max-width: 1000px; margin: 60px auto 15px; font-size: 20px; font-weight: bolder; color: #fbc447; text-align: left;}
.event_vote h5 span{ padding: 0 0 0 10px; font-size: 16px; font-weight: normal; color: #fbe8bc; }
.event_vote ol{ max-width: 1000px; margin: 0 auto; padding: 0; text-align: left;}
.event_vote ol li{ position: relative; margin: 0 0 15px; padding: 0 0 0 35px; color: #ece2c4; counter-increment:li; list-style: none;}
.event_vote ol li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: transparent; width: 19px; height: 19px; line-height: 19px; color:#ece2c4; background: #000; text-align: center; font-size: 0.75rem;}
.event_vote ol li span{ color: #fd5c5c;}
.event_vote ol li a{ color: #fd5c5c;}

.champion_team_list{ display: flex; flex-wrap: wrap; gap: 14px;}
.champion_team_list label{ width: calc(50% - 7px); margin: 0;}
.champion_team_list label input{ display: none;}
.champion_team_list label span{ display: block; padding: 15px 0; width: 100%; text-align: center; font-size: 16px; font-weight: bolder; background: #371917; border: 1px solid #99322b; color: #fff;}
.champion_team_list label input:checked+span{ color: #210000; background: linear-gradient(45deg, #e2ad36, #f7c75c); border: 1px solid #f6cb63;}


@media (max-width:768px){
.event_vote_info{ padding: 30px 15px; font-size: 14px;}
.event_vote_info .link a{ font-size: 16px; width: 45%;}

.event_vote_info p span{ font-size: 16px;}

.event_vote h5{ font-size: 14px;}
.event_vote h5 span{ font-size: 12px;}

.event_vote ol li{ font-size: 14px; padding: 0 0 0 30px;}

.champion_team_list label{ width: 100%;}
}