﻿@charset "utf-8";
/* CSS Document */

/*========================================================layout===============================================================================*/
header,.header2,.wrapper,footer{min-width:1100px;}
.container,section.video .row,.cyc-traffic{width: 1050px;}
	
.pagination > li > a, 
.pagination > li > span {color: #000;}

.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus {color:#197dce;background-color: #ffe72e;border-color: #ffe72e;}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {border-top-left-radius: 7px;border-bottom-left-radius: 7px;}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {border-top-right-radius: 7px;border-bottom-right-radius: 7px;}

.pagination-sm > li > a, .pagination-sm > li > span { padding: 10px 15px;font-size: 15px;}
.pagination-smc	> li > a, .pagination-smc > li > span { padding: 10px 50px;font-size: 16px;}

/*==============================================================nav=======================================================================*/

header{height:100px;background-color:rgba(255,255,255,1);}

#NAV{ max-width:1050px;margin:0 auto;}
#NAV .nav{text-align:right;}
#NAV .nav>li{display:inline-block;margin:0 15px;}
#NAV .nav>li:last-child{margin-right:0;}
#NAV .nav>li>a{display:block;line-height:20px;font-size:16px;color:#333;font-weight:bold;padding:10px 0;}
#NAV .nav>li>a:hover{color:#aadadc; background: none;border-bottom:#ffe72e solid 4px;}		  

#NAV .subBtn{text-align:right;}
#NAV .subBtn li:last-child{border-right:#979797 solid 1px;}
#NAV .subBtn li{display:inline-block;text-align:right;border-left:#979797 solid 1px;padding:0 13px 0 13px;}	
#NAV .subBtn li a{font-size:10px;color:#979797;line-height:1em;border-radius:0;}
#NAV .subBtn li a:hover{color:#28b1b6;text-decoration:none;border-bottom: none;}
#NAV .subBtn li.fb a,
#NAV .subBtn li.fb2 a{ padding-right:12px;}
	
/*==============================================================nav-sub=======================================================================*/
#NAV .subBtn li.fb2 a{color:#3b5998;}
#NAV .subBtn li.fb2 a img{padding:0 5px 2px 0}

/*==============================================================kv=======================================================================*/

.header2{height:60px; margin-top:100px;background-color:#ffe72e;}
.carousel-inner .item img{width:100%;}


#kv,#number{max-width:1050px;margin:0 auto;}
#kv ul,#number ul{text-align: center;}
#kv li{margin:2px auto;display:inline-block; }
#kv li a{display:block;line-height:30px;font-size:14px;padding:0px 20px;font-weight:bold;}

#kv ul .active a,
#kv ul .active a:hover,
#kv ul .active a:focus{ color:#1a7dce;}

/*==============================================================number=======================================================================*/
.header3{height:40px; margin-top:100px;background-color:#333d3d; padding:0;}
#number{max-width:1450px;/*margin:0 auto 0 400px;*/}
#number li{height:36px;display:inline-block;margin:0 auto;padding:0 1.5em;border-right: 1px solid #242b2b;font-size:15px;color:#FFF;font-weight:bold;line-height:37px; letter-spacing:2px;}
#number li img{ margin-right:10px;}
#number li big{ color:#ebd630;font-size:23px}
#number li i{font-size:13px}

#number li:last-child{border-right: none;}

#number li.sub-cr{background-color:#242b2b}


/*========================================================footer===============================================================================*/

footer{ background:#333d3d; padding:40px 0 70px 0;color:#fff;}
footer .container .row p b{ font-size:16px; color:#5dd3d6; }
footer .container .row p a{ text-decoration:none;color:#fff;}
footer .container .row p a:hover{color:#5dd3d6}
footer .footer_left h5{font-size:15px !important;margin-bottom:20px;}
footer .footer_left p{font-size:13px !important;}

/*========================================================index===============================================================================*/
.wrapper{ margin:0;min-width:1000px;background: url(../images/bg.png);position:relative;}
section.w1 {padding: 15px 0 0 0;}

aside.topnav{position:absolute;z-index: 900;text-align: center;width:420px; top:20%; left:65%;}

aside.topnav >div{max-width:420px;background-color:rgba(42,170,174,0.8); padding:30px 60px; text-align:left;border-radius:7px; color:#FFF;}
aside.topnav div >h4,aside.topnav div >h4 b,.centers .row div >h4{color:#ece045; font-size:18px;font-weight:bold;letter-spacing:2px;}
aside.topnav div >h4 b{ margin-right:10px;}
aside.topnav div >h1{font-size:45px;font-weight:bold; letter-spacing:5px;}
aside.topnav .pt{ margin-top:-22px; margin-left:200px;}

.pt a{display:inline-block;width:200px; font-size:18px; color:#197dce;
      background-color:#ffe72e;letter-spacing:4px;font-weight:bold; padding:10px 15px; text-align:center;text-decoration:none;border-radius:7px;}
.pt a:hover{color:#fff;background-color:#f2410a}

section.slider{margin-top:85px;padding:0px;}

.carousel-indicators li{width: 12px;height: 12px;margin:1px 10px;background-color:#FFF;}
.carousel-indicators .active { width:12px;height:12px;margin:1px 10px;background-color: #ffe72e;border:0px;}

.cyc-index{margin-top:0px;position:relative;}
.cyc-index h1{ margin-top:20px;}
.cyc-index h2{ margin-top:20px;}
.cyc-index .TopImg{position:absolute;top:0px; left:0;}
.cyc-index .TopImg2{position:absolute; right:0;}
.cyc-index .row a{display:block;}
.cyc-index .row a:hover aside{background-color:#fff6b2;}
.cyc-index .row a:hover {color:#333}

section.centers{background:url(../images/bg-centers.png) no-repeat;background-size:cover;height:480px;position:relative;} 
section.centers .Toparrow1{position: absolute;top:45%; left:40px;}
section.centers .Toparrow2{position: absolute;bottom:45%;right:40px;}
section.centers h1{background:url(../images/Message2.png) no-repeat bottom center;color:#FFF}
section.centers .container{width:1000px;margin:0px auto; text-align:center;overflow:hidden;padding:30px 0}
section.centers .row{width:9999px;}
section.centers .row>div{width:200px;}
section.centers .row div>p{ color:#FFF;font-size:15px;}
section.centers .row div>a:hover img{opacity:1;transform:scale(1.1)}
section.centers .row h4{margin-top:30px;background: none;}

section.video{background:url(../images/bg-video.png) no-repeat;background-size:cover;} 
section.video h2{background:url(../images/Message3.png) no-repeat bottom center;color:#1971b9}

section.video .row{ margin:0 auto;}
section.video .row h4{ font-size:18px;font-weight:bold; line-height:2em; color:#075f98;}

/*========================================================index-sub===============================================================================*/

section.slider2{margin-top:125px;padding:0px;}
section.video .row div h1.h1-1{ font-size:25px; color:#1971b9;background:url(../images/Message3.png) no-repeat bottom center}
section.video .row div h2.h1-1{ font-size:25px; color:#1971b9;background:url(../images/Message3.png) no-repeat bottom center}
/*========================================================news===============================================================================*/

.cyc-news,
.content,
.cyc-Accessibility,
.cyc-problem,
.cyc-Web-Map,
.cyc-traffic{margin-top:85px;position:relative;z-index:50;}

.TopImg3{position: absolute;top:0px; left:0px;z-index:0;}
.TopImg4{position: absolute;bottom:0px;right:0px;z-index:0;}

.container{position:relative;z-index:20}
.container >h1,
.centers >h1,
.video >h1,
section.video .row div >h1
{color:#000; font-weight:bold;max-width: 250px;background:url(../images/Message.png) no-repeat bottom center;margin:0 auto;padding: 10px 0 20px;margin-bottom: 30px;text-align:center}

.container >h2,
.video >h2,
section.video .row div >h2
{color:#000; font-weight:bold;max-width: 250px;background:url(../images/Message.png) no-repeat bottom center;margin:0 auto;padding: 10px 0 20px;margin-bottom: 30px;text-align:center}

.container .row h4{color:#fff;font-weight:bold; letter-spacing:2px;background-color:#197dce;padding: 10px 0 10px;border-radius:7px 7px 0 0; margin:40px 0 0 0} 
.container .row .h4-1{background-color:#28b1b6;}

.container .row aside{ padding:18px 20px; background-color:#fff;border: 1px solid #ddd;border-radius:0 0 7px 7px; margin-bottom:40px;}	
.container .row	h6{color:#adadad;}
.container .row aside p{ font-size:15px; line-height:1.8em; font-weight:bold;}

/*========================================================content===============================================================================*/
.content .container{ z-index:20}
.container .content-a{ max-width:920px; margin:0 auto;padding:40px 40px; background:#fff;border-radius:7px;}
.container .content-a aside >h1{font-weight:bold;color:#197dce;}
.container .content-a aside >h4{ width:160px;border-radius:7px;color:#fff;background:#197dce; text-align:center; font-weight:bold; line-height:2em;}

.container .content-a aside >h2{font-weight:bold;color:#197dce;}

/*========================================================Sportscenter-Zhongshan===============================================================================*/
.wrapper2{margin:0; background:url(../images/bg-Introduction1.png) no-repeat top center;}

.cyc-Sportscenter{margin-top:130px;position:relative;}

/*kv部分設定*/
.cyc-Sportscenter .color1{ margin:0;height:250px;padding:50px 15px;background-color: rgba(29,127,207,.7);}
.cyc-Sportscenter .color1 div{ color:#FFF;}
.cyc-Sportscenter .color1 div aside h3{ margin:0; font-size:28px;font-weight:bold; letter-spacing:3px;}
.cyc-Sportscenter .color1 div aside h1{letter-spacing:12px;font-weight:bold;}
.cyc-Sportscenter .color1 div aside h2{letter-spacing:12px;font-weight:bold;}
.cyc-Sportscenter .color1 div aside .pt3 a img{ padding-right:15px; padding-bottom:4px;}

.cyc-Sportscenter .container{ margin:50px auto;}

/*breadcrumb*/

.breadcrumb{background:none;font-size:15px;}
.breadcrumb > li select option{text-align:center;}
.breadcrumb > li a{display:inline-block;}
.breadcrumb > .active{color:#045aba;}
.breadcrumb select{ padding:10px 5px 10px 80px;border-color:#eaeaea;border-radius:10px;font-size:15px;width:200px; letter-spacing:4px;font-weight:bold;}

.nav1 ul{margin:15px auto;}
.nav1 li{width:200px;text-align:center;}
.nav1 li a{display:block;text-align:center;font-size:15px;font-weight:bold;line-height:1.8;text-decoration:none;padding:8px 0;border: 1px solid #ddd;}
.nav1 li a:hover{color:#ffe72e;background-color:#197dce;border-color: #197dce;border: 1px solid #368ace;}

.nav1 li:first-child,
.nav1 li:first-child a{border-top-left-radius: 10px;border-top-right-radius: 10px;}
.nav1 li:last-child,
.nav1 li:last-child a{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}

.nav1 .active a, 
.nav1 .active a:hover,  
.nav1 .active a:focus,
.nav1 .active span,
.nav1 .active span:hover, 
.nav1 .active span:focus{color:#ffe72e;background-color: #197dce;border-color: #197dce;}

img.origin{ margin-right:10px;}

.pl,
.pl2,
.pr{ font-size:18px;line-height:2em;}/* font-weight:bold; */
.pl{letter-spacing:2px;}
.pr2{letter-spacing:4px;}
.pl2{ letter-spacing:5px; font-weight:bold; } 
.pl3{ font-size:20px; margin-top:30px; font-weight:bold; }

.container .row aside.as1{padding:4px 6px;border-radius:7px;margin-bottom:5px;}
.pl4{ font-size:18px; font-weight:bold; color:#5ab5ba;letter-spacing:1px; text-align:center; margin:0px;}

.container .row aside.ad4{border: 0px solid #ddd;border-radius:7px; padding:40px; background-color:#ccf7f9;}
.container .row aside p.pl5{color:#28b1b6;letter-spacing:1px; text-align:center; font-size:20px;}

/*========================================================Sportscenter-Zhongshan-sub===============================================================================*/
.sub{margin-top:110px;position:relative;}
.cyc-Sportscenter .color1 div aside h3.h3-1{ font-size:30px;}
.cyc-Sportscenter .color1 div aside h1{font-size:48px;}
.cyc-Sportscenter .color1 div aside h2{font-size:48px;}

/*========================================================Accessibility===============================================================================*/

.cyc-Accessibility .row aside{ padding:18px 20px; height:210px;border-radius:7px;text-align:center; margin-bottom:40px;}
.cyc-Accessibility .row aside p{margin:10px auto;width:180px;}
.cyc-Accessibility .row aside p a{color:#55b4b8; font-size:20px; letter-spacing:2px;}
.cyc-Accessibility .row aside p a .arrow,.cyc-Accessibility aside .row div p .arrow2{background:url(../images/arrow3.png) no-repeat right center; color:rgba(255,255,255,0)}
.cyc-Accessibility .row aside p a:hover{color:#ed1414} 

/*========================================================Accessibility-page===============================================================================*/
.wrapper3{background: url(../images/bgb.png);}

.cyc-Accessibility .container aside.ad2,
.cyc-traffic .container aside.ad3{ padding:50px 20px;background-color:#fff;border: 1px solid #ddd;border-radius:7px;text-align:center;margin:30px auto;}
.cyc-Accessibility p >b{ font-size:20px;color:#45aeb3; letter-spacing:2px;}

.cyc-Accessibility aside p{ line-height:2em;text-align:center;}
.cyc-Accessibility aside ul {width:70%;margin-left:20%;font-size:15px;}
.cyc-Accessibility aside ul li{display:inline-block;width:45%;text-align:left;margin-bottom:15px;}
.cyc-Accessibility aside ul li .arrow2{background:url(../images/arrow4.png) no-repeat left center;width:20px;height:10px;display:inline-block}
.cyc-Accessibility aside ul li a:hover{color:#45aeb3}

/*========================================================traffic===============================================================================*/
.wrapper4{background: url(../images/bgd.png) 100% center;}

.cyc-traffic{margin:85px auto 0 auto;}
.paginationLsit .cityBtn{margin:20px auto;}
.paginationLsit .cityBtn li{display:inline-block; }	
.paginationLsit .cityBtn li a{font-size:16px;color:#000;line-height:20px; letter-spacing:1px;padding:10px 15px ;border-right:#e5e6e6 solid 1px ; margin:0 5px;}
.paginationLsit .cityBtn li a:hover{color:#5a9ad7;text-decoration:none;background:url(../images/arrow6.png) no-repeat center bottom;}

.paginationLsit .cityBtn .active a,
.paginationLsit .cityBtn .active a:hover,
.paginationLsit .cityBtn .active a:focus{color:#5a9ad7;text-decoration:none;background:url(../images/arrow6.png) no-repeat center bottom;}

.cyc-traffic .container aside.ad3{ margin:0 0 60px 0; padding:20px 100px;text-align: left;}
.cyc-traffic .container aside.ad3 h1{font-weight:bold;line-height:1.6em; letter-spacing:2px;}
.cyc-traffic .container aside.ad3 .car-p{ margin-top:40px; margin-bottom:20px;font-size:18px; color:#197dce;letter-spacing:2px;line-height:20px; font-weight:bold;}
.cyc-traffic .container aside.ad3 .car-p img{ padding-right:8px;padding-bottom:4px;}
.cyc-traffic .container aside.ad3 p{font-size:18px;letter-spacing:2px;line-height:1.6em;}

/*========================================================problem===============================================================================*/
.cyc-problem .qaList{width:780px;margin:auto;}
.cyc-problem .qaList li{ padding:5px 20px;border-radius:7px;height:auto;margin:20px 0;background:#fff;border:1px solid #ccc;display:block;}
.cyc-problem .qaList li *{transition:all .7s}
.cyc-problem .qaList li h3{font-size:17px;margin-bottom:10px;cursor:pointer;}
.cyc-problem .qaList li h3>i{float:right;transform:rotate(180deg);background:url(../images/icon_arrow.png) no-repeat;width:20px;height:11px;display:block;margin-top:10px;}
.cyc-problem .qaList li b{font-size:20px;width:1.8em;line-height:1.8em;text-align:center;
                          border-radius:50%; color:#FFF;margin-right:20px;font-weight:bold; background-color:#197dce;display:inline-block;vertical-align:middle;}
.cyc-problem .qaList li article {border-top:1px solid #ccc;padding-top:20px;display:none;}
.cyc-problem .qaList li article b.b2{background-color:#28b1b6;vertical-align:top;}
.cyc-problem .qaList li p{font-size:15px;display:inline-block;width:90%;vertical-align:top;}

.cyc-problem .qaList li.active h3>i{transform:rotate(0deg)}
.cyc-problem .qaList li.active article {display:block;}


.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
	border: 1px solid #fff;
	border-radius: 50%;
	padding: 10px;
	box-sizing: content-box;
}

.carousel-control:hover .glyphicon-chevron-left,.carousel-control:hover .glyphicon-chevron-right{
	background:#154699;
	border-color:#154699;
	color:#fff;
}

/*======================================================== Web-Map  ===============================================================================*/
#wrapper5{ background-color:#FFF}

.cyc-Web-Map .container .row { font-size:15px; font-weight:bold}
.cyc-Web-Map .container .row .nav-l{ max-width:170px;line-height:2em;}
.cyc-Web-Map .container .row .nav-r{ max-width:200px;line-height:2em;}

.cyc-Web-Map .container .row p b{ color:#28b1b6}
.cyc-Web-Map .container .row p a:hover{ color:#5dd3d6;}


/* 2023.12.25 */
.hide{
	display: none;
}
.banner_sub_name{
	color: #ece045;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
	margin-top: 10px;
    margin-bottom: 10px;
}
#number .num_big{ color:#ebd630;font-size:23px;}
.carousel-inner .item img{
	object-fit: cover;
}
.nav1 li button{display:block;text-align:center;font-size:15px;font-weight:bold;line-height:1.8;text-decoration:none;padding:8px 0;border: 1px solid #ddd;background-color:#fff;width:100%;color:#666;}
.nav1 li button:hover{color:#ffe72e;background-color:#197dce;border-color: #197dce;border: 1px solid #368ace;}
.nav1 li:first-child button{border-top-left-radius: 10px;border-top-right-radius: 10px;}
.nav1 li:last-child button{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.nav1 .active button, 
.nav1 .active button:hover,  
.nav1 .active button:focus{color:#ffe72e;background-color: #197dce;border-color: #197dce;}
.kv_slick_div{
	position: relative;
}
.photoList-a{
	display: block;
	height: 735px;
}
.photoList-a aside{
	height: 100%;
}
.photoList-a aside img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}