@charset "UTF-8";

.btn-container{ padding: 30px 0; position: relative; z-index: 7;}
.btn-container .btn{ display: block; width:80%; max-width: 230px; height: 55px; line-height: 50px; font-size: 22px; font-weight: 400; margin: 10px auto; letter-spacing: 2px; transition:all ease-out 0.3s; cursor: pointer; user-select: none; text-align: center; position: relative; padding-right: 15px; background: url("../img/ic_arr_btn.png") right center no-repeat; background-size: 45px auto;}
.btn-container .btn-style-1{ color: #FFF;}
.btn-container .btn-style-1::before{ background: #23b5b8;}
.btn-container .btn-style-1::after{ background: #6b4f9f; }
.btn-container .btn-style-2{ color: #FFF;}
.btn-container .btn-style-2::before{ background: #23b5b8;}
.btn-container .btn-style-2::after{ background: #6b4f9f; }
.btn-container .btn::before{ content: ''; width: 90%; height: 100%; top: 0; left: 5%; position: absolute; background: #23b5b8; z-index: -1; transform: skewX(-15deg); transition:all ease 0.3s;}
.btn-container .btn::after{ content: ''; width: 22%; height: 100%; top: 0; left: 78%; position: absolute; background: #6b4f9f; background-size: 30px auto; z-index: -1; transform: skewX(-15deg); transition:all ease 0.3s;}
.desktop .btn-container .btn:hover{  }
.desktop .btn-container .btn:hover::before{ width: 100%; left: 0;  }
.desktop .btn-container .btn:hover::after{ width: 78%; left: 0;  }
.btn-container .btn:active{ position: relative; top: 1px;}
.btn-container .text-container{ width: 100%; text-align: center; }
.btn-container .text-container .waiting{ color: #FFF; margin-top: 10px; animation: flashing infinite 1s;}


section .title{ position: relative; }
section .title::before{ content: ''; width: 100%; height: 500px; position: absolute; background-position: center 15px; background-size: auto 250px; background-repeat: no-repeat; z-index: 1;}
section .title img{ max-height: 50px; margin: 0 auto 30px; position: relative; z-index: 2; user-select: none;}
section .title p{ width: 90%; max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 2;}
section .title p span{ color: #0aa7a1;}

.sec-kv{ width: 100%; height: 100vh; background-image:url("../img/kv_bg.png"); background-position: center top; background-repeat: no-repeat; background-size: 100% auto;}
.sec-kv .container{ height: 100%; }
.sec-kv .container::before,
.sec-kv .container::after{ content: ''; width: 100%; height: 100px; left: 0; position: absolute; z-index: 1; pointer-events: none;}
.sec-kv .container::before{ top: 0; 
    background: linear-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 100%);
}
.sec-kv .container::after{ bottom: 0; 
    background: linear-gradient(rgba(232,235,238,0) 0%, rgba(232,235,238,0.6) 60%, rgba(232,235,238,1) 100%);
}
.sec-kv img{ user-select: none;}
.sec-kv .bg{ width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: -1;}
.sec-kv .bg img{ width:50%; height: auto; position: absolute;  }
.sec-kv .bg .left{ right: 50%; bottom: 0; }
.sec-kv .bg .right{ left: 50%; top: 0; }

.sec-kv .kv{ width: 90%; max-width: 500px; height: 100%; margin: 0 auto; padding-top: 0px; position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: center; border: #000 solid 0px;}
.sec-kv .kv .logo{ width: 100px; margin: 0 auto 30px; }
.sec-kv .kv .slogan{ margin-bottom: 80px; }

.sec-kv .ball{ position: absolute; animation-duration: 0.6s;}
.sec-kv .ball-1{ width: 70px; left: 15%; top: 7%; animation-delay: 0.7s; }
/*.sec-kv .ball-2{ width: 110px; right: 20%; top: 10%; animation-delay: 0.7s; }*/
.sec-kv .player{ position: absolute; z-index: 3;}
.sec-kv .player .cut{ animation-duration: 0.5s; }
.sec-kv .player-1{ left: 5%; top: 10%; width: 30%; max-width: 380px;}
.sec-kv .player-2{ right: 7%; top: 10%; width: 27%; max-width: 390px; }

.sec-kv .player-1 .cut1{ animation-delay: 1.1s;}
.sec-kv .player-1 .cut2{ position: absolute; top: 0; left: 0; width: 100%; animation-delay: 1.1s; }
.sec-kv .player-1 .cut3{ position: absolute; top: 0; left: 0; width: 100%; animation-delay: 1.2s; }

.sec-kv .player-2 .cut1{ animation-delay: 1.1s;}
.sec-kv .player-2 .cut2{ position: absolute; top: 0; left: 0; width: 100%; animation-delay: 1.1s; }
.sec-kv .player-2 .cut3{ position: absolute; top: 0; left: 0; width: 100%; animation-delay: 1.2s; }

.sec-kv .tip{ background: url("../img/ic_scroll.gif") no-repeat; background-size: 100% auto; width: 50px; height: 50px; bottom: 10px; left: 50%; margin-left: -25px; position: absolute; z-index: 2; transition: all ease 0.5s;}
.scrolling .sec-kv .tip{ opacity: 0; bottom: 50px; transition: all ease 0.5s;}

.sec-event{ background-image:url("../img/bg_vote_1.png"); background-position: 5% bottom; background-repeat: no-repeat; border-bottom: #fff solid 8px;}
.sec-event .title img{ }
.sec-event h2{ text-align: center; color:#6b4f9f; display:block; font-weight:700; margin-bottom: 15px; margin-top: 15px;}
.sec-event .title::before{ background: url("../img/title_event_bg_pc.png") center top no-repeat; background-size: 100% auto;}
.sec-event .container{ background-image:url("../img/bg_vote_2.png"); background-position: 90% 55%; background-repeat: no-repeat; }
.gift{ width:90%; max-width:700px; padding: 15px 30px; display: flex; justify-content: center; align-items: center; margin: 0 auto; position: relative; z-index: 2; border: #6b4f9f solid 3px; border-radius: 10px; background-color: #fff; }
/*.gift::before{ content: ''; width: 100%; height: 100%; top: 10%; left: 0; border: #6b4f9f solid 3px; border-radius: 10px; background-color: #fff; position: absolute; z-index: -1;}*/
.gift img{ width: 205px;}
.gift .text{ padding-left: 20px;}
.gift .text p{ color: #6b4f9f; font-weight: 500;}
.gift .text span{ font-size: 15px;}

.sec-event .gift{ margin: 80px auto 50px;}

.teams{ width:90%; max-width:1000px; display: flex; flex-wrap: wrap; margin: 0 auto; }
.teams li{ width: 30.33%; margin: 0 1.5% 30px; background: #e8ebee; border: #FFF solid 4px; padding: 0; position: relative;}

.page-event .teams{ max-width:1280px;  }
.page-event .teams li{ width: 23%; margin: 0 1% 30px; }
.page-event .sec-teams .group{ max-width: 1280px; }

.teams li.focus{ border: #0aa7a1 solid 4px;}
.teams li .pic{ overflow: hidden; padding: 6px; }
.teams li .pic img{ transition:all ease 0.3s;}
.desktop .teams li:hover .pic img{ transform: scale(1.05); transition:all ease 0.3s;}
.teams li .text{ padding: 0 6px;}
.teams li .text h4{ font-weight: 400; text-align: center; letter-spacing: 1px; padding: 0 0 10px 0; border-bottom: #6b4f9f solid 2px; margin-bottom: 0px;}
.teams li .text .votes{ color: #0aa7a1; font-size: 40px; padding-top: 10px; padding-right: 5px; font-family: "Arial Black"; font-weight: bold; font-style: italic; text-align: right; position: relative;}
.teams li .text .votes::before{ content: '人氣票數'; color: #6b4f9f; font-size: 14px; font-weight: 400; font-style: normal; font-family:'Noto Sans TC', Helvetica; text-align: left; top: 5px; left: 0; position: absolute;}
.teams li .btns{ width: 100%; display: flex;}
.teams li .btns .btn{ width: 50%; height: 45px; display: block; cursor: pointer; transition: all ease 0.4s;}
.desktop .teams li .btns .btn:hover{ opacity: 0.75; transition: all ease 0.4s;}
.teams li .btns .btn-vote{ background: #0aa7a1 url("../img/btn-vote.png") 50% 50% no-repeat; background-size: 90% auto;}
.teams li .btns .btn-share{ background: #6b4f9f url("../img/btn-share.png") 50% 50% no-repeat; background-size: 90% auto;}




.sec-event .list{ position: relative; z-index: 2;}
.sec-event .list li:before{ content: ''; width: 70px; height: 70px; top: -20px; left: -20px; background-size: 100% auto; position: absolute; z-index: 2;}
.sec-event .list li:nth-child(1)::before{ background-image: url("../img/ic_no1.png"); }
.sec-event .list li:nth-child(2)::before{ background-image: url("../img/ic_no2.png"); }
.sec-event .list li:nth-child(3)::before{ background-image: url("../img/ic_no3.png"); }

.sec-event .ribbon{ width: 1600px; max-width: 1600px; left: 50%; margin-left: -800px; position: absolute; user-select: none;}
.sec-live{ background: url("../img/bg_live.png") center bottom no-repeat; background-size: 100% auto;}
.sec-live .title::before{ background-image: url("../img/title_live_bg.png");}
.sec-live .container{ }
.sec-live .list{ width:90%; /*max-width:1200px;*/ display: flex; flex-wrap: wrap; justify-content: center; margin: 170px auto 0; position: relative; z-index: 2;}
.sec-live .list .video{ /*width: 30.33%;*/ width: 22%; margin: 0 1.5% 30px; /*width: 46%; margin: 0 2% 30px;*/ }
.sec-live .list .video a{ display: block;}
.sec-live .list .video a .pic{ border: #31afa4 solid 2px; border-radius: 15px; overflow: hidden;}
.sec-live .list .video a .pic img{ transition:all ease 0.3s;}
.desktop .sec-live .list .video a:hover .pic img{ transform: scale(1.05); transition:all ease 0.3s;}
.sec-live .bg{ width: 100%; left: 0; position: absolute; z-index: -1; user-select: none;}


.sec-news{}
.sec-news .title::before{ background-image: url("../img/title_news_bg.png");}
.sec-news .container{ width:100%; }
.sec-news .list{ width:100%; max-width:1000px; display: flex; justify-content: center; margin: 170px auto 0; position: relative; z-index: 2;}
.sec-news .list .news{ width: 30.33%; margin: 0 1.5% 30px; background-color: #e8ebee; border: #FFF solid 5px; border-radius: 20px; box-shadow: rgba(255,255,255,0.8) 0 0 10px; padding: 15px; position: relative;}
.sec-news .list .news a{ display: block; height: 100%; background: #23b5b8 url("../img/ic_more.png") right bottom no-repeat; background-size: auto 26px; position: relative;}
.sec-news .list .news a .pic{ width: 100%; height: 0; padding-top: 75%; overflow: hidden; background: #cecece url("../img/ic_image_white_48dp.png") 50% 50% no-repeat; background-size: 48px auto; position: relative;}
.sec-news .list .news a .pic .inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; justify-content: center; }
.sec-news .list .news a .pic .inner img{ width: auto; height: 100%; transition:all ease 0.3s;}
.desktop .sec-news .list .news a:hover .pic .inner img{ transform: scale(1.05); transition:all ease 0.3s;}
.sec-news .list .news a .text{ padding: 15px 10px 40px; }
.sec-news .date{ color: #6b4f9f; font-size: 15px; font-weight: 600; border-left: #fff100 solid 5px; padding-left: 10px; margin-bottom: 5px;}
.sec-news .list .news a .text p{ color: #FFF; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.sec-news .ball{ width: 70px; right: 50%; margin-right: 350px; position: absolute; user-select: none;}
.sec-news .bg{ width: 100%; left: 0; position: absolute; z-index: -1; user-select: none;}

.page-news .sec-page-header .title::before{ background-image: url("../img/title_news_bg.png");}
.page-news .sec-news .list{ width:90%; flex-wrap: wrap; justify-content:flex-start; margin: 0 auto; }

.news-detail{ width: 90%; max-width: 800px; margin: 0 auto; padding-bottom: 50px; }
.news-detail .date{ color: #000; border-left: #23b5b8 solid 5px; }
.news-detail .headline{ color: #6b4f9f; margin-bottom: 15px;}
.news-detail .pic{ background-color: #e8ebee; border: #FFF solid 5px; padding: 2%; border-radius: 20px; box-shadow: rgba(255,255,255,0.8) 0 0 10px; margin-bottom: 20px;}
.news-detail .pic img{ width: 100%; }
.news-detail .news-container{ font-size: 16px; line-height: 1.5;}
.news-detail .news-container p{ margin-bottom: 15px;}
.news-detail .news-container img{ margin: 0 auto 15px; border: 0; padding: 0; }

.sec-about{ background: url("../img/bg_about.jpg") bottom center no-repeat; padding-bottom: 250px;}
.sec-about .title::before{ background-image: url("../img/title_about_bg.png");}
.sec-about .container{ }
.sec-about .list{ width:90%; max-width:1200px; display: flex; margin: 170px auto 0; position: relative; z-index: 2;}
.sec-about .list .box{ width: 50%; margin-bottom: 30px;}
.sec-about .list .box.left{}
.sec-about .list .box.left .pic{ background-color: #e8ebee; border: #FFF solid 5px; padding: 2%; border-radius: 20px; box-shadow: rgba(255,255,255,0.8) 0 0 10px;}
.sec-about .list .box.left .pic img{ width: 100%; border-radius: 15px;}
.sec-about .list .box.right{ display: flex; justify-content: center; flex-flow: column; padding-left: 4%;}
.sec-about .list .box.right p{ margin-bottom: 15px;}
.sec-about .ball{ width: 70px; left: 50%; margin-left: 350px; position: absolute; user-select: none;}


.sec-page-header{ background: url("../img/bg_page_top.jpg") top center no-repeat; background-size: 1920px auto; }
.sec-page-header .container{ padding-top: 80px;}
.sec-page-header .slogan{ width: 90%; max-width: 610px; margin: 0 auto; position: relative; z-index: 3; user-select: none;}
.sec-page-header .title{ display: flex; justify-content: center; align-items: flex-end; height: 200px; }
.sec-page-header .title::before{ height: 100%; background-position: center top; background-size: auto 100%; }
.sec-page-header .title img{ max-height: 50px; margin:0 auto 25px; user-select: none;}
.sec-page-header .ribbon{ width: 1600px; max-width: 1600px; top: -50px; left: 50%; margin-left: -800px; position: absolute; user-select: none;}
.sec-page-header .player{ position: absolute; z-index: 2; user-select: none;  }
.sec-page-header .player-1{ bottom: -10%; width: 170px; left: 50%; margin-left: -600px; }
.sec-page-header .player-2{ bottom: 0%; width: 220px; right: 50%; margin-right: -600px;}
.page-event .sec-page-header .title::before{ background-image: url("../img/title_event_bg_pc.png");}

.sec-inside{ background: url("../img/bg_inside.png"); background-size: 1920px auto;}

.tabs{ width: 90%; max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 30px;}
.tabs .tab{ width: 200px; line-height: 50px; font-size: 22px; background-color: #fff; border: #1bb2b2 solid 2px; border-radius: 10px; text-align: center; margin: 0 10px 20px; position: relative; cursor: pointer;}
.tabs .tab::after{ content: ''; width: 100%; height: 100%; top: 5px; left: 5px; position: absolute; z-index: -1; background-color: #86a6a8; border-radius: 10px;}
.tabs .tab.actived,
.desktop .tabs .tab:hover{ background-color: #fffaa5;}
.tabs .tab:active{ top: 1px; position: relative;}


.sec-schedule{ }
.sec-schedule .container{ }
.sec-schedule .schedule{ width: 100%; max-width: 1000px; margin: 0 auto 50px; background: url("../img/ic_ball01.png") bottom center no-repeat; background-size: 50px; padding:20px 0 70px;}
.sec-schedule .schedule .date{ text-align: center; color:#6b4f9f; -webkit-text-fill-color: #6b4f9f; text-shadow: 1px 1px 1px #FFF; -webkit-text-stroke: 1px #FFF; display:block; font-weight:900; margin-bottom: 15px;}
.sec-schedule .schedule .table{ }
.sec-schedule .schedule .table img{ }


.sec-teams{ } 
.sec-teams .container{ /*transition: all ease-in-out 0.6s;*/} 
.sec-teams .event-info{ width:90%; max-width:630px; margin: 0 auto 20px;}
.sec-teams .event-info h5{}
.sec-teams .event-info h5.center{ text-align: center;}
.sec-teams .event-info h5 span{ color: #0aa7a1; font-style: italic; padding: 0 10px;}
.sec-teams .event-info ul{}
.sec-teams .event-info ul li{ position: relative; padding-left: 20px;}
.sec-teams .event-info ul li::before{ content: ''; background-color: #0aa7a1; width: 6px; height: 6px; border-radius: 6px; top: 12px; left: 7px; position: absolute;}
.sec-teams .event-info ul li span{ color: #6b4f9f; font-style: italic;}
.sec-teams .event-info p.note{ padding: 15px 0; font-size: 15px;}
.sec-teams .event-info p.note span{ color: #0aa7a1; text-decoration: underline; cursor: pointer;}
.desktop .sec-teams .event-info p.note span:hover{ text-decoration: none;}

.sec-teams .group{ width: 90%; max-width: 1000px; margin: 0 auto 30px;}
.sec-teams .group .teams{ width:100%;}
.sec-teams .group h2{ text-align: center; color:#6b4f9f; display:block; font-weight:700; margin-bottom: 15px;}


.sec-teams .notice-container{ background-color: #fff; border-radius: 10px; width: 90%; max-width: 970px; margin: 0 auto 30px; padding: 20px 20px;}
.sec-teams .notice-container h5{ color: #0aa7a1; border-bottom:#0aa7a1 solid 1px; padding-bottom: 15px; margin-bottom: 10px; text-align: center;}
.sec-teams .notice-container ol{ margin-left: 25px;}
.sec-teams .notice-container ol li{ font-size: 15px;}
.sec-teams .notice-container ol li span{ color: #6b4f9f;}




.share-box{ padding: 40px 5% 20px;}
.share-box .title{ height: 40px; margin: 0 auto 5px;}
.share-box p{ font-size: 15px; text-align: center; margin-bottom: 30px;}
.share-box .btns{ width: 80%; max-width: 280px; margin: 0 auto;}
.share-box .btns .btn{ margin: 0 auto 20px; cursor: pointer; transition: all ease 0.4s;}
.desktop .share-box .btns .btn:hover{ opacity: 0.75; transition: all ease 0.4s;}

.privacy-box{ font-size: 15px; padding: 20px 2% 20px 5%;}
.privacy-box h5{ color: #0aa7a1; border-bottom:#0aa7a1 solid 1px; padding-bottom: 15px; margin-bottom: 10px; text-align: center;}
.privacy-box p{ text-align: left; margin-bottom: 0px; }
.privacy-box ol{ margin-left: 25px; padding-bottom: 20px; }
.privacy-box ol li{ }


.form-box,
.finish-box{ width:90%; max-width:430px; margin: 0 auto; animation-duration: 0.5s;}
.form-box p,
.finish-box p{ text-align: center; padding-bottom: 20px;}
.form-box p span,
.finish-box p span{ color: #6b4f9f;}
.finish-box{ padding-top: 30px; }

.form-box .form{ width:100%; margin:0 auto; }
.form-box .form li{ width: 100%; display:flex; justify-content: center; align-items: center; padding:5px 0; font-size:18px; }
.form-box .form li .label{ width: 90px; font-weight:400; }
.form-box .form li .value{ width: calc(100% -90px); }

.form-box .agree-box{ width:100%; margin:0 auto; padding:10px 0; font-size: 18px; display:flex; justify-content: center;}
.form-box .agree-box .btn-privacy{ color: #6b4f9f; text-decoration:underline;}
.desktop .form-box .agree-box .btn-privacy:hover{ text-decoration:none;}

.form-box .radio-box{ position:relative; margin-bottom:0px;}
.form-box .radio-box label{ display:inline-block; vertical-align:middle; margin-right:20px;}
.form-box .radio-box label:last-child{ margin-right:0;}

::placeholder { color:#333; opacity:0.5;}
:-ms-input-placeholder { color:#333; opacity:0.5;}
::-ms-input-placeholder { color:#333; opacity:0.5;}

input.input{ 
	width:100%; height:40px; padding:0px 10px; color:#000; transition: all ease 0.3s; 
	font-size:20px; line-height:40px; vertical-align:middle; margin-bottom:5px;
	background-color:#FFF; border:#c3c3c3 solid 1px; border-radius: 5px;
	font-family:'微軟正黑體','Microsoft JhengHei',Arial, Helvetica, sans-serif;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input.input:focus{ border:#6b4f9f solid 1px; outline:none; transition: all ease 0.3s; }

.styled-select {
   	background:#0e1a45 url(../img/ic_arr_down.png) no-repeat 98% 50%; 
   	background-size:auto 60%; border:#8f94a8 solid 1px; border-radius: 5px;
	width:100%; height:40px; margin-bottom:5px;
   	overflow: hidden;
}

.styled-select select {
	background: transparent;
	width:100%; height:40px; padding-left:5px; color:#6270a2; 
	font-size:18px; 
	border:0; border-radius:0;
	font-family:'微軟正黑體','Microsoft JhengHei', Arial, Helvetica, sans-serif;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline: none;
	text-indent: 0.01px;
    text-overflow: '';
}

.styled-select.date,
.styled-select.time{ width: 49%; }
.styled-select select option[disabled]{ opacity: 0.5;}
.styled-select select::-ms-expand { display: none;}

.magic-radio,
.magic-checkbox { position:absolute; display:none; }

.magic-radio[disabled],
.magic-checkbox[disabled] { cursor: not-allowed; }

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: block;
  padding-left: 35px;
  cursor: pointer;
  vertical-align: top;
  padding-bottom:10px; }
  .magic-radio + label:hover:before,
  .magic-checkbox + label:hover:before {}
  .magic-radio + label:before,
  .magic-checkbox + label:before {
    position: absolute;
    top: 0px;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    content: '';
    background-color:#fff; border:#c3c3c3 solid 1px; border-radius: 5px; }
  .magic-radio + label:after,
  .magic-checkbox + label:after { position: absolute; display: none; content: ''; }

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label { cursor: not-allowed;  color: #e4e4e4; }
  .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
  .magic-checkbox[disabled] + label:hover,
  .magic-checkbox[disabled] + label:before,
  .magic-checkbox[disabled] + label:after { cursor: not-allowed; }
  .magic-radio[disabled] + label:hover:before,
  .magic-checkbox[disabled] + label:hover:before { }
  .magic-radio[disabled] + label:before,
  .magic-checkbox[disabled] + label:before {}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after { display: block; }

.magic-radio + label:before { border-radius: 50%; }

.magic-radio + label:after {
  top: 7px;
  left: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:#fec845; }

.magic-radio:checked + label:before { border:#8f94a8 solid 1px; }

.magic-radio:checked[disabled] + label:before { border:#8f94a8 solid 0px; }

.magic-radio:checked[disabled] + label:after { background: rgba(90,11,83,.3); }

.magic-checkbox + label:before {  }

.magic-checkbox + label:after {
  top: 2px;
  left: 8px;
  box-sizing: border-box;
  width: 14px;
  height: 22px;
  transform: rotate(45deg);
  border-width: 5px;
  border-style: solid;
  border-color: #6b4f9f;
  border-top: 0;
  border-left: 0; }

.magic-checkbox:checked + label:before { border:#c3c3c3 solid 1px; border-radius: 5px; background-color:#fff; }
.magic-checkbox:checked[disabled] + label:before { border: 0; background-color:#6b4f9f; }


/* update: 20240131 */
.ul-lower-alpha{list-style-type:lower-alpha;} 
.ul-lower-alpha>li{ margin-left: 18px;} 
.ul-upper-alpha{list-style-type:upper-alpha;}
.ul-upper-alpha>li{ margin-left: 18px; text-indent: 0;}
ol.ol-counter { list-style: none; counter-reset: my-counter; }
ol.ol-counter>li { counter-increment: my-counter; text-indent: -20px;}
ol.ol-counter>li::before { content: "("counter(my-counter) ")"; }

/*	RESPONSIVE:  */
@media only screen and (max-width:1366px) {

.sec-kv .kv{ max-width: 400px; /*padding-top: 100px;*/ }
.sec-kv .kv .logo{ width: 120px; }
.sec-kv .ball-1{ width: 50px; left: 15%; top: 9%; }
.sec-kv .player-1{ left: 1%; top: 12%; width: 29%; }
.sec-kv .player-2{ right: 1%; top: 22%; width: 26.5%;  }
	
.sec-event{ background-size: 230px auto;}
.sec-event .container{ background-size: 130px auto;}

.sec-live .list { justify-content: flex-start;}
.sec-live .list .video{ width: 30.33%;}
	
.sec-inside{ background-size: 1366px auto;}
	
.sec-page-header{ background-size: 1366px auto; }
.sec-page-header .title{ height: 150px; }
.sec-page-header .title img{ margin:0 auto 10px; }
.sec-page-header .ribbon{ width: 1000px; max-width: 1000px; top: -50px; margin-left: -500px; }
.sec-page-header .player-1{ bottom: -5%; width: 140px; margin-left: -530px;}
.sec-page-header .player-2{ bottom: -5%; width: 180px; margin-right: -530px;}
	
}

/*	RESPONSIVE:  */
@media only screen and (max-width:1080px) {
	
section .title::before{ background-size: auto 110px; }
	

.sec-event{ background-size: 250px auto;}
.sec-event .container{ background:none;}
.sec-event .title::before{ background: url("../img/title_event_bg_m.png") center top no-repeat; background-size: 100% auto;}
.sec-event .ribbon{ width: 1080px; max-width: 1080px; margin-left: -540px; }
.sec-event .list{ margin: 30px auto 0; }
.sec-live .list{ margin: 70px auto 0; }
.sec-news .list{ margin: 70px auto 0; }
.sec-about .list{ margin: 70px auto 0; }
	
.sec-page-header .title{ height: 110px; }
.sec-page-header .player-1{ bottom: 0%; width: 90px; left: 2%; margin-left: 0;}
.sec-page-header .player-2{ bottom: 0%; width: 110px; right: 3%; margin-right: 0;}


.page-news .sec-news .list{ margin:0 auto; max-width:800px;}
.page-news .sec-news .list .news{ width: 47%; margin: 0 1.5% 30px; }
	
.tabs{ max-width: 500px;}
.tabs .tab{ width: 46%; margin: 0 2% 20px; }
	
.page-event .teams li{ width: 48%; }

}

/*	RESPONSIVE:  */
@media only screen and (max-width:810px) {
	
.sec-kv{ height: 850px; background-size: 1000px auto;}
.sec-kv .kv{ max-width: 400px; padding-top: 30px; }
.sec-kv .kv .logo{ width: 95px; margin: 0 auto 30px; }
.sec-kv .ball-1{ width: 30px; right: 26%; top: 7.5%;  }
.sec-kv .player-1{  left: 2%; width: 20%; }
.sec-kv .player-2{ right: 3%; width: 18%; top: auto; bottom: 5%; }
	
}
/*	RESPONSIVE:  */
@media only screen and (max-width:809px) {
	
section .title img{ max-height: 30px;}

.sec-page-header .title img{ max-height: 30px; }
	
/*.sec-kv .ball-1{ width: 35px; right: 30%; top: auto; bottom: 27%; }*/
	
.sec-event{ background:none;}
.teams{ display: block; max-width:500px; }
.page-event .teams li,
.teams li{ width: 100%; margin: 0 auto 30px; }	
.sec-event .gift{margin: 30px auto 0; }
.gift{ padding: 10px 30px; display: block; margin: 0 auto; }
.gift::before{ height: 75%; top: 25%; left: 0; }
.gift img{ width: 180px; margin: 0 auto 15px;}
.gift .text{ padding: 0 0 20px;}
	
.sec-live{ background:none;}
.sec-live .list{ display: block; max-width:500px;}
.sec-live .list .video{ margin: 0 20px; }
	
.sec-news .list{ max-width:500px;}
.sec-news .list .news{ width: 100%; margin: 0 20px; }
.sec-news .ball{ display: none;}
.page-news .sec-news .list{ display: block; max-width:500px;}
.page-news .sec-news .list .news{ width: 100%; margin: 0 auto 30px; }

.sec-inside{ background: none;}
	
.sec-about{ background-size: 1280px; padding-bottom: 150px;}
.sec-about .list{ display: block; max-width:500px;}
.sec-about .list .box{ width: 100%; margin-bottom: 30px;}
.sec-about .list .box.right{ display: block; padding-left: 0;}
.sec-about .ball{ display: none;}
	
.sec-page-header{ background-size: 1080px auto; }
.sec-page-header .ribbon{ display: none;}
.sec-page-header .player-1{ bottom: -5%; width: 75px; left: 1%; }
.sec-page-header .player-2{ bottom: -3%; width: 75px; right: 2%; }
	
.page-event .sec-page-header .title{ height: 130px; }
.page-event .sec-page-header .title::before{ background-image: url("../img/title_event_bg_m.png"); background-size: auto 100%;}
	
.sec-schedule .schedule{ margin: 0 auto 30px; background-size: 30px; padding:20px 0 50px;}
.sec-schedule .schedule .table{ overflow-x: auto; padding: 0 0 10px 5%;}
.sec-schedule .schedule .table img{ padding-right: 5%;}
}

/*	RESPONSIVE:  */
@media only screen and (max-width:499px) {
	
.btn-container .btn{ width: 200px; height: 45px; line-height: 42px; font-size: 20px; background-size: 35px auto;}
	
.sec-kv{ height: 620px; }
.sec-kv .kv{ max-width: 320px; display: block; padding-top: 70px;}
.sec-kv .kv .logo{ width: 70px; }
.sec-kv .kv .slogan{ margin-bottom: 0;}
.sec-kv .player-1{ left: 5.5%; top: auto; bottom: -2%; width: 31%; }
.sec-kv .player-2{ right: 5%; top: auto; bottom: -1%; width: 30%; }
.sec-kv .ball-1{ width: 20px; left: 24%; top: auto; bottom: 32%;}
	
.sec-event .ribbon{ width: 600px; max-width: 600px; margin-left: -300px; }

.sec-event h2{ margin-top: 15px;}
    
.sec-schedule .schedule .table img{ width: 550px; max-width: 550px; }
    
.sec-teams .event-info h5{ text-align: center; }
.sec-teams .event-info h5:first-child{ margin-bottom: 15px;}
.sec-teams .event-info h5 span{ font-style: normal; padding: 0; display: block;}
    
}

/*	RESPONSIVE:  */
@media only screen and (max-width:350px) {
    
.sec-form .form li{ font-size:18px;}	
.sec-form .agree-box{ font-size:16px;}
input.input{ padding:0px 5px; font-size:16px; line-height:30px;}

}

/*	RESPONSIVE:  */
@media only screen and (max-height:800px) {
    
/*.sec-kv .bg{ overflow: hidden;}
.sec-kv .bg img{ height: 1000px; }*/
	
}

/*	RESPONSIVE:  */
@media only screen and (max-height:670px) and (orientation: landscape){
	
/*.sec-kv .bg img{ height: 800px; }*/
.sec-kv .kv{ max-width: 350px; }
.sec-kv .kv .logo{ width: 90px; margin: 0 auto 20px; }

.sec-kv .ball-1{ width: 50px;}
.sec-kv .player-1{ max-width: 300px; }
.sec-kv .player-2{ max-width: 310px; }	
	
}