@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,figure,article,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td ,header {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

/*#backtop { z-index: 9999; position: relative;}*/

html { scroll-behavior: smooth; }

#web-outer {
    font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
    background-color:#2b2825;
}

/*----header------*/

.mainpic { 
    margin: 0 auto;
    height: 866px;
    display: flex;
    align-items: center;
    justify-content: center;
}

header img {
    text-align: center;
    /*width: 100%;*/
    margin-top: -100px;
}

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}

.bg-schedule { 
    margin:0 auto;  
    max-width: 1600px; 
    border-radius: 12px; 
    border-top:30px solid #b8bfc1; 
    background: #f1f1f1;
    margin-top: -100px;
    padding-bottom: 60px;
}


/*======================
====Main CSS=====
=======================*/

#sports-schedule h2 { 
    background: linear-gradient(to bottom, #4d4d4d 0%, #3f3f3f 30%);  max-width:460px; padding:16px 0;
    text-align: center; margin:0 auto; margin-top:-74px; 
     color: #ffffff; font: 700 32px "微軟正黑體";
     border-radius: 12px 12px 0 0;
}

/*======================
====tab CSS=====
=======================*/
.tabs-container { margin: 0 auto; max-width: 1400px;}

.tabs-box { margin:50px 0; text-align: center;}
.tabs-box li { display: inline-block;text-align: center; margin: 0 8px; }
.tabs-box li a { 
    width: 100%; height: 100%; display: block; 
    border:2px solid #9a9a9a; background: #f1f1f1; 
    border-radius: 30px; padding:8px 35px; 
    color:#9a9a9a; font: 600 28px "微軟正黑體"; text-decoration: none;
}
.tabs-box li a:hover, .tabs-box li a.active { border:2px solid #000000; background: #000000; color:#ffffff;}

.tab-content-outer { margin: 50px 3%;}

.item-outer { display: flex; flex-wrap: wrap; justify-content:center; }
.item-box { 
    flex:0 0 31.3%; margin:30px 1% ; 
     align-items: center; align-content:stretch;
    position: relative; 
}
.item-box a { text-decoration: none;}
.item-box img { border:1px solid #000000; border-radius: 15px; }
.item-box h3 { background: #292929; color:#fff; font: 500 24px "微軟正黑體"; 
    position: absolute; top:-20px; text-align: left;
    width: 92%; margin:0 4%;
    border-radius: 15px; padding:11px 20px;}
.item-box h3::after {
    content:url("../images/icon02.png") ;
    margin-top: 10px;
    padding-left: 6px;
    vertical-align:middle;
}
.item-box a:hover h3 { background: #0076ad;}

.month-link { margin:0 auto; text-align: center; margin-bottom: 12px; display: none; }
.month-link li { font: 600 16px "微軟正黑體";  display: inline-block; background:#c7c7c7; color:#e4e4e4;  margin:3px 0; line-height: 42px; width: 42px; height: 42px; border-radius: 50%;  }
.month-link li a {  color:#e9e9e9; text-decoration: none; width: 100%; display: block; height: 100%;border-radius: 50%; background: #888888;}
.month-link li a:hover { background: #0076ad; color: #ffffff; } 

.month-outer { display: flex; flex-wrap: wrap;  }
.month-box { 
    flex:0 0 31.3%; margin:15px 1%; 
    justify-content:center; align-items: flex-start; align-content:stretch;
    border-radius: 15px; background: #fcfcfc;
}
.month-box h3 { 
    font-size: 20px; font-weight: bold; font-size: 40px; 
    font-family: "Bungee", sans-serif; text-align: left; 
    line-height: 58px; padding-left: 12px; color:#ffffff;
    border-radius: 13px;
 }
.month-box h3 span { color:#000; font: 500 28px "微軟正黑體"; padding-left: 24px; }
.month-box ul { padding:0 16px 16px 16px;}
.month-box ul li { font: 400 17px "微軟正黑體"; color:#6e6e6e; display: block; line-height: 36px;}
.month-box ul li::before { 
    content: " ";
    margin-right: 6px;
    border-radius: 50%;
    width:8px;
    height:8px;
    display: inline-block;
}
.month-box ul li a { font: 500 17px "微軟正黑體"; color:#000000; text-decoration: none; }
.arrow {   
    margin-left: 15%;
    width: 0;
    height: 0;
    border: 15px solid;
}
.month1 { border:2px solid #f2bf4d; }
.month1 h3 { background: #f2bf4d;}
.month1 .arrow { border-color: #f2bf4d transparent transparent  transparent; }
.month1 ul li::before {  background:#f2bf4d; }

.month2 { border:2px solid #eba277; }
.month2 h3 { background: #eba277;}
.month2 .arrow { border-color: #eba277 transparent transparent  transparent; }
.month2 ul li::before {  background:#eba277; }

.month3 { border:2px solid #e280af; }
.month3 h3 { background: #e280af;}
.month3 .arrow { border-color: #e280af transparent transparent  transparent; }
.month3 ul li::before {  background:#e280af; }

.month4 { border:2px solid #cc93ce }
.month4 h3 { background: #cc93ce;}
.month4 .arrow { border-color: #cc93ce transparent transparent  transparent; }
.month4 ul li::before {  background:#cc93ce; }

.month5 { border:2px solid #72abdd; }
.month5 h3 { background: #72abdd;}
.month5 .arrow { border-color: #72abdd transparent transparent  transparent; }
.month5 ul li::before {  background:#72abdd; }

.month6 { border:2px solid #6fc6cd }
.month6 h3 { background: #6fc6cd;}
.month6 .arrow { border-color: #6fc6cd transparent transparent  transparent; }
.month6 ul li::before {  background:#6fc6cd; }

.month7 { border:2px solid #b6cb8a; }
.month7 h3 { background: #b6cb8a;}
.month7 .arrow { border-color: #b6cb8a transparent transparent  transparent; }
.month7 ul li::before {  background:#b6cb8a; }

.month8 { border:2px solid #c3c688; }
.month8 h3 { background: #c3c688;}
.month8 .arrow { border-color: #c3c688 transparent transparent  transparent; }
.month8 ul li::before {  background:#c3c688; }

.month9 { border:2px solid #d2b569; }
.month9 h3 { background: #d2b569;}
.month9 .arrow { border-color: #d2b569 transparent transparent  transparent; }
.month9 ul li::before {  background:#d2b569; }

.month10 { border:2px solid #dfae6f; }
.month10 h3 { background: #dfae6f;}
.month10 .arrow { border-color: #dfae6f transparent transparent  transparent; }
.month10 ul li::before {  background:#dfae6f; }

.month11 { border:2px solid #9dd09e; }
.month11 h3 { background: #9dd09e;}
.month11 .arrow { border-color: #9dd09e transparent transparent  transparent; }
.month11 ul li::before {  background:#9dd09e; }

.month12 { border:2px solid #b5afd5; }
.month12 h3 { background: #b5afd5;}
.month12 .arrow { border-color: #b5afd5 transparent transparent  transparent; }
.month12 ul li::before {  background:#b5afd5; }

.conutry-outer { max-width: 1200px; margin:0 auto; }
.conutry-outer .accordion {
    background-color: #d0d0d0;
    color: #545454;
    cursor: pointer;
    padding: 14px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font:normal 26px "微軟正黑體"; 
    transition: 0.4s;
    border-radius: 15px;
    margin:8px 0;
  }
  
  .conutry-outer .active, .accordion:hover {
    background-color: #0bb1e1;
    color:#ffffff;
    font-weight: 600;
  }
  
  .conutry-outer .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .conutry-outer .active:after {
    content: "\2212";
  }
  .conutry-outer :hover:after { color:#ffffff;}
  
  .conutry-outer .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

  .country-list { margin:10px 80px 30px 80px; }
  .panel ul li {  font: 400 20px "微軟正黑體"; color:#6e6e6e; 
    line-height: 50px; border-bottom:1px solid #cacaca;
 }

  .panel ul li a { 
    text-decoration: none; 
    display: block; color:#1c1c1c;
}
.country-list li a::after { 
    content:url("../images/icon01.png");
    float: right;
    display: inline-block;   
}

#sports-intro { padding-bottom: 60px;}
.intro-in { max-width: 1100px; text-align: center; margin:0 auto; padding:50px 0 20px 0; }
#sports-intro h2 { 
    color: #90e6ff; font: 700 30px "微軟正黑體"; line-height: 60px; 
}
.intro-in p { color: #eeeeee; font: 500 17px "微軟正黑體"; line-height: 1.8em; padding:16px }

.flex { display: flex; flex-wrap: nowrap;}
.intro-in article { border:2px solid #0f74a8; border-radius: 15px; padding:12px; margin-top: 20px; flex:0 0 31.3%; margin:30px 1% ; 
    justify-content:center; align-items: center; align-content:stretch;  }
.intro-in article h3 { color: #4bb6ed; font: 500 20px "微軟正黑體"; line-height: 1.8em; }
.intro-in article p {text-align: left; } 
  
/*------media query----------*/

@media only screen and ( max-width:1024px) 
{ 
    .month-box { flex:0 0 48%; }
}
@media only screen and ( max-width:960px) 
{ 
    .item-box {flex:0 0 48%;}
}

/*---平板-----*/
@media only screen and ( max-width:768px) 
{ 
    .mainpic { height: 680px; }    
}

@media only screen and ( max-width:700px) 
{ 
    .item-box {flex:0 0 98%;}
    .month-box { flex:0 0 98%; }
    .month-link { display: block; }

}

@media only screen and (max-width:600px) 
{   
    #sports-schedule h2 span { display: block;}
    .tabs-box { margin:30px 0 0 0; }
    .tabs-box li { margin: 0 2px; }
    .tabs-box li a { padding:5px 15px; font: 600 22px "微軟正黑體"; }
    .country-list { margin:10px 20px 30px 20px; }
    .item-box {margin:10px 1% 30px 1%;}
    .month-box { margin:10px 1% 30px 1%; }
    .mainpic { height: 520px; }
    .intro-in article { flex:0 0 96%; margin:10px 2% }
    .flex { flex-wrap: wrap;}
    .month-link { max-width: 370px; }

    .month-link li { margin:3px 2px; line-height: 46px; width: 46px; height: 46px;}



}
/*---手機版-----*/

@media only screen and (max-width:480px) 
{
    .panel ul li {  font-size:17px ;}
    .mainpic { height: 450px; }

    #sports-schedule h2 { 
        font-size: 28px;
    }    
    #sports-intro h2 { 
      font-size: 26px;
    }

}