#CMain { }

#CMain .CMTop { position: relative; z-index: 1; width: 100%; }
#CMain .CMTop .CMImage { width: 100%; }
#CMain .CMTop .CMImageBg { position: absolute; top: 20%; width: 100%; background-image: url(/__/i/PageBg.png); height: 22vw; background-position: center top; background-size: 100% auto; background-repeat: no-repeat; }
#CMain .CMTop .CMImageBg img { width: 100%; }
#CMain .CMTop .CMInfo { position: absolute; top: 10px; right: 10px; padding: 10px 15px; background-color: rgba( 0,0,0,0.6 ); border-radius: 5px; color: #FFFFFF; font-size: 15px; }

#CMain .CMContent { position: relative; z-index: 2; margin: 0 auto 25px; width: 100%; max-width: 1560px; }
#CMain .CMContent h1.CMCTitle { margin: 25px auto 25px; text-align: center; font-size: 40px; color: #c37c0f; }
#CMain .CMContent h1.CMCTitle.StepTitle { margin: 0px; margin-bottom: 35px; text-align: center; font-size: 40px; color: #000; }
#CMain .CMContent .CMCContent { margin: 0 auto; }

#CMain .CMContent .CMCCate { display: block; padding: 0px 20px; }
#CMain .CMContent .CMCCate ul { margin: 5px 0px; list-style-type: none; }
#CMain .CMContent .CMCCate ul:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#CMain .CMContent .CMCCate ul li { float: left; margin-right: 15px; margin-bottom: 15px; }
#CMain .CMContent .CMCCate ul li:last-child { margin-right: 0px; }
#CMain .CMContent .CMCCate ul li a { display: inline-block; padding: 5px 18px; border-radius: 8px; background-color: #8e8e8e; font-size: 18px; color: #FFF; line-height: 22px; }
#CMain .CMContent .CMCCate ul li a:hover { background-color: #71bdcb; }
#CMain .CMContent .CMCCate ul li a.This { background-color: #0d6e86; box-shadow: 0px 3px 3px rgba( 0,0,0,0.3 ); }


#CMain .CMContent .CMCSearch .TopFun { display: flex; width: 100%; padding: 0px 20px; margin: 20px 0px; }
#CMain .CMContent .CMCSearch .TopFun .TFLeft { flex: 1; color: #B00; line-height: 38px; }
#CMain .CMContent .CMCSearch .TopFun .TFLeft button { margin-left: 10px; padding: 4px 8px; border-radius: 5px; background-color: #a05151; color: #FFFFFF; font-size: 15px; }
#CMain .CMContent .CMCSearch .TopFun .TFLeft button:hover { background-color: #8e3636; cursor: pointer; }

#CMain .CMContent .CMCSearch .TopFun .TFRight { width: 100px; }
#CMain .CMContent .CMCSearch .TopFun .TFRight:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#CMain .CMContent .CMCSearch .TopFun button.OpenSearch { display: flex; float: right; padding: 5px 8px; border-radius: 5px; }
#CMain .CMContent .CMCSearch .TopFun button.OpenSearch:hover { background-color: #CCC; }
#CMain .CMContent .CMCSearch .TopFun button.OpenSearch .Text { flex: none; padding: 0px 3px; color: #3d3d3d; font-size: 15px; }
#CMain .CMContent .CMCSearch .TopFun button .material-icons{ flex: none; padding: 0px; color: #3d3d3d; }
#CMain .CMContent .CMCSearch .TopFun button .material-icons.Arrow { transition: .3s; }
#CMain .CMContent .CMCSearch .TopFun button.Open .material-icons.Arrow { transform: rotate( 180deg ); }


#CMain .CMContent .CMCSearch .ListSearch { display: none; margin: 25px auto 35px; width: calc( 100% - 40px ); }
#CMain .CMContent .CMCSearch .ListSearch.Open { display: block; }

#CMain .CMContent .CMCSearch .ListSearch .I { margin-bottom: 25px; width: 100%; }
#CMain .CMContent .CMCSearch .ListSearch .I .T { margin-bottom: 8px; padding-left: 5px; font-size: 18px; color: #007c8e; }
#CMain .CMContent .CMCSearch .ListSearch .I .C {  }
#CMain .CMContent .CMCSearch .ListSearch .I .C.SearchDate { display: flex; }
#CMain .CMContent .CMCSearch .ListSearch label { display: block; width: 100%; }
#CMain .CMContent .CMCSearch .ListSearch label[for="StartDate"] { flex: none; width: 47%; margin-bottom: 0px; }
#CMain .CMContent .CMCSearch .ListSearch label[for="EndDate"] { flex: none; width: 47%; margin-bottom: 0px; }
#CMain .CMContent .CMCSearch .ListSearch .Line { flex: none; width: 6%; font-size: 18px; line-height: 48px; text-align: center; }
#CMain .CMContent .CMCSearch .ListSearch label input[type="date"] { width: 100%; border: solid 1px #498a93; background-color: #FFFFFF; }
#CMain .CMContent .CMCSearch .ListSearch label input[type="text"] { width: 100%; border: solid 1px #498a93; background-color: #FFFFFF; }
#CMain .CMContent .CMCSearch .ListSearch .I.ButtomFun { width: 100%; text-align: right; }

#CMain .CMContent .CMCSearch .ListSearch .I .C.SportType ul { list-style-type: none; }
#CMain .CMContent .CMCSearch .ListSearch .I .C.SportType ul:after { float: none; clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
#CMain .CMContent .CMCSearch .ListSearch .I .C.SportType ul li { float: left; margin-right: 10px; margin-bottom: 10px; }
#CMain .CMContent .CMCSearch .ListSearch .I .C.SportType ul li a { display: block; padding: 8px 12px; color: #000000; background-color: #FFFFFF; border-radius: 5px; box-shadow: 0px 3px 3px rgba( 0,0,0,0.2 ); font-size: 13px; }
#CMain .CMContent .CMCSearch .ListSearch .I .C.SportType ul li a.This { background-color: #9ae6f9; }

#CMain .CMContent .CMCSearch .ListSearch button { margin-left: 10px; border-radius: 5px; background-color: #F00; color: #FFFFFF; }
#CMain .CMContent .CMCSearch .ListSearch button:hover {  }
#CMain .CMContent .CMCSearch .ListSearch button[name="Send"] { background-color: #007c8e; }
#CMain .CMContent .CMCSearch .ListSearch button[name="Send"]:hover { background-color: #004d58; }
#CMain .CMContent .CMCSearch .ListSearch button[name="Send"] .material-icons { color: #FFFFFF; }
#CMain .CMContent .CMCSearch .ListSearch button[name="Clear"] { background-color: #626262; }
#CMain .CMContent .CMCSearch .ListSearch button[name="Clear"]:hover { background-color: #3c3c3c; }
#CMain .CMContent .CMCSearch .ListSearch button[name="Clear"] .material-icons { color: #FFFFFF; }

#CMain .CMContent .CMCContent { margin: 0px auto 60px; padding: 0px 20px; }

ul.PageLink { float: none; clear: both; margin: 20px auto; text-align: center; }
ul.PageLink li { display: inline-block; margin: 0px 5px; vertical-align: top; }
ul.PageLink li a { display: block; padding: 5px 6px 7px; border-radius: 5px; background-color: #b4b4b4; }
ul.PageLink li a[t="page"] { min-width: 30px; padding: 6px 0px 8px; border-radius: 5px; background-color: #b4b4b4; }
ul.PageLink li a:hover { background-color: #004657; }
ul.PageLink li a[href="?"] { background-color: #2b3f45; }
ul.PageLink li a.Page[href="?"] { background-color: #b4b4b4; }
ul.PageLink li a.Page[href="?"]:hover { background-color: #004657; }
ul.PageLink li a.This[t="page"] { background-color: #2b3f45; }



@media screen and ( max-width: 1920px ) {

#CMain .CMContent { max-width: 1280px; }

}


@media screen and ( max-width: 1024px ) {


}


@media screen and ( max-width: 768px ) {

#CMain .CMTop .CMInfo { top: 5px; right: 5px; padding: 5px 8px; font-size: 12px; }

#CMain .CMContent h1.CMCTitle { font-size: 25px; }
#CMain .CMContent h1.CMCTitle { margin: 15px auto 15px; }
#CMain .CMContent .CMCCate ul li { margin-right: 8px; margin-bottom: 8px; }
#CMain .CMContent .CMCCate ul li a { padding: 5px 8px; font-size: 14px; line-height: 20px; }

}


@media screen and ( max-width: 667px ) {


}

@media screen and ( max-width: 414px ) {

#CMain .CMContent .CMCCate { padding: 0px 10px; }
#CMain .CMContent .CMCCate ul li { margin-right: 10px; margin-bottom: 10px; }

#CMain .CMContent .CMCCate ul li a { padding: 5px 6px; font-size: 13px; }

#CMain .CMContent .CMCSearch .TopFun { margin: 10px 0px 20px; padding: 0px 10px; }
#CMain .CMContent .CMCSearch .ListSearch { width: calc( 100% - 20px ); }
#CMain .CMContent .CMCContent { padding: 0px 10px; }

}

@media screen and ( max-width: 375px ) {

#CMain .CMContent .CMCCate ul li { margin-right: 7px; margin-bottom: 7px; }

}