/* CSS Document */
#mobile_container{max-width:414px;}
body{background:#333;}
/*========================================================layout===============================================================================*/
#mobile_container{width:100%;height:100%;margin:auto;overflow:hidden;}
#mobile_container>article{transition:all .7s;position:relative;z-index:0;}

#mobile_container>article.active{
	-webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    transform:translateX(-50%);
	}
	
.wrapper{ background-image:url(../images/bg.png);}
.wrapper2{background:#fff;}

/*========================================================nav===============================================================================*/
.mobileBtn{right:0;top:20px;position:absolute;width:55px;z-index:999;}

/*mobileMenu*/
#mobileMenu{font-size:18px;background-color:#444;height:100%;width:50%;position:fixed;top:0;left:100%;z-index:9999;
transition:all .7s;
}
#mobileMenu.active{
	-webkit-transform:translateX(-100%);
    -moz-transform:translateX(-100%);
    transform:translateX(-100%);
	box-shadow:#222 -1px 0 15px 0px;
	}
#mobileMenu li{border-bottom:1px solid #151515}
#mobileMenu li a{color:#fff;background-color:#333;line-height:3em;font-size:15px;padding:0;text-align:center;}
#mobileMenu li.otherNav a{background-color:#444;}
#mobileMenu li.btn_close a{line-height:60px;text-align:right;background-color:#444;border-left:none !important;padding-right:15px;}
#mobileMenu li.btn_close a img{width:25px;}
#mobileMenu li a:hover,#mobileMenu li.active a{background-color:#222;border-left:8px solid #ffe72f}

#block{width:100%;height:100%;position:absolute;background:rgba(0,0,0,0.5);z-index:990;display:none;top:0;left:0;}

/*==============================================================header=======================================================================*/
header{height:60px;width:100%;background-color:#fff;z-index:9999}
header h1{padding:0;margin:8px 0;}
header h1 img{max-height:35px;max-width:100%;width:auto;}

/*==============================================================pagination=======================================================================*/
.pagination{}

.pagination > li > a, 
.pagination > li > span {color: #000;}

.pagination2 > li > a, 
.pagination2 > 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,
 
.pagination2 > .active > a, 
.pagination2 > .active > span, 
.pagination2 > .active > a:hover, 
.pagination2 > .active > span:hover, 
.pagination2 > .active > a:focus, 
.pagination2 > .active > span:focus 
{color:#197dce;background-color: #ffe72e;border-color: #ffe72e;}
 
.pagination-sm{margin-left:13%}
.pagination-sm2,.pagination-sm3{margin-left:0;} 

.pagination-sm > li > a, 
.pagination-sm > li > span { margin-left:8px;  padding:10px 15px;font-size: 15px;border-radius:7px !important;}

.pagination-sm2 > li > a, 
.pagination-sm2 > li > span {margin-right:8px; padding:10px 10px;font-size: 16px; font-weight:bold;border-radius:7px !important;}

.pagination-sm3 > li > a, 
.pagination-sm3 > li > span {margin-right:8px; padding:7px 10px;font-size: 16px; font-weight:bold;border-radius:7px !important;}

.pagination-smc	> li > a, 
.pagination-smc > li > span { padding: 10px 50px;font-size: 16px;}

.pt{ margin-top:10px;}
.pt a{display:inline-block;width:140px;font-size:17px; color:#197dce;
      background-color:#ffe72e;letter-spacing:1px;font-weight:bold; padding:10px 10px 10px 10px; text-align:center;text-decoration:none;border-radius:7px !important;}
.pt a:hover{color:#fff;background-color:#f2410a}


/*==============================================================kv-mb=======================================================================*/

.header2{height:50px;background-color:#ffe72e;}

#nav2,#number{margin:0 auto;}
#nav2 ul,#number ul{text-align:center;}
#nav2 li{margin:0px auto;display:inline-block;width:32%;}
#nav2 li a{display:block;line-height:35px;font-size:15px;padding:0px;}

#nav2 ul .active a,
#nav2 ul .active a:hover,
#nav2 ul .active a:focus{ color:#1a7dce;background:url(../images/arrow7.png) bottom center no-repeat;}

.carousel-inner .item img{width:100%;}

/*======================================================kv-sub-mb===============================================================================*/
.header3{position:relative;}

.btn_supersenter{background:url(../images/arrow9.png) no-repeat;width:45px;height:45px;top:-44px;right:55px;background-size:cover;position:absolute;}
.btn_supersenter.active{background-image:url(../images/arrow8.png)}

/*number*/
#number{margin:0; color:#FFF; padding-top:5px; }
#number>h4{ padding-left:20px; font-size:17px; line-height:1.2em;background:#333;}
#number>h4 i{font-size:14px;padding-left:40%;}

#number ul{border-top:1px solid #000;border-bottom:1px solid #000;background:#222;display:table;width:100%;}
#number li{height:110px;display:table-cell;width:33.33%;margin:0;border-right:1px solid #000;line-height:1em;vertical-align:middle;}
#number li p{font-size:17px;letter-spacing:1px;}
#number li p big{ color:#ebd630;font-size:22px; line-height:1.2em;}
#number li p b{ font-weight:normal;font-size:14px;}

/*======================================================kv-suba-mb===============================================================================*/

.header4,.header5{height:26px;margin-top:-26px; background:none;}
.header4 aside,.header5 aside{margin-left:77%;}
.header4 aside a{background:url(../images/arrow8.png) no-repeat; padding:25px 25px;}

.header5 aside a{background:url(../images/arrow9.png) no-repeat; padding:25px 25px;}

/*========================================================footermb===============================================================================*/

footer{ background:#333d3d; padding:20px 0 20px 0;color:#fff;}
footer div .row p b{ font-size:13px; color:#5dd3d6; }
footer div .row h5{font-size:17px;letter-spacing:1px;}
footer div .row h4{ width:165px;border:#fff solid 1px;border-radius:7px;padding:10px 0;margin:20px auto; text-align:center;font-size:17px; line-height:30px;}
footer div .row h4 a{ text-decoration:none;color:#fff; letter-spacing:2px;}
footer div .row h4 a:hover{color:#9B1C1E;}
	
/*========================================================index_mobile===============================================================================*/
.wrapper{ margin:0;position:relative; padding-bottom:0;}
.cyc-index{position:relative; padding:0}
.cyc-index div.container{ padding:0;}

/*section.slider*/

section.w1 {}
section.slider{padding-bottom:0}

aside.topnav{padding:10px 0 20px;position:absolute;z-index: 900;text-align:center;width:100%;bottom:0;left:0;background-color:rgba(42,170,174,0.8); }
aside.topnav>div{float:left;margin-left:20px;text-align:left;color:#FFF;}
aside.topnav>div>h4{color:#ece045; font-size:13px;font-weight:bold;;line-height:0.5em;letter-spacing:1px;}
aside.topnav>div>h1{font-size:25px;font-weight:bold;letter-spacing:2px;line-height:0.5em;}
aside.topnav .pt{float:right;margin-right:20px;}
aside.topnav .pt a{ font-size:14px;letter-spacing:4px;width:120px}


ol.carousel-indicators{position:absolute;z-index: 999; top:90%;}
.carousel-indicators li{width: 9px;height: 9px;margin:1px 3px;background-color:#FFF;}
.carousel-indicators .active{ width:9px;height:9px;margin:1px 3px;background-color: #ffe72e;border:0px;}


/*section.centers*/

section.centers{background-size:cover;position:relative;}
section.centers div.Toparrow1{position: absolute;top:46%; left:15px; z-index:999}
section.centers div.Toparrow2{position: absolute;top:46%;right:15px;z-index:999}

.cyc-index .centers .row h4,
.cyc-news div .row h4
{color:#fff;font-weight:bold; letter-spacing:2px;background-color:#197dce;border-radius:7px 7px 0 0;} 
.cyc-index .centers .row h4{ font-size:16px; margin:10px 0px 0 0px;padding: 6px 0 6px}

.cyc-index .centers .row .h4-1,
.cyc-news div .row h4-1
{background-color:#28b1b6;}

.cyc-index .centers .row aside,
.cyc-news div .row aside
{background-color:#fff;border: 1px solid #ddd;border-radius:0 0 7px 7px;}

.cyc-index .centers .row aside{padding:5px 15px;margin:0 0px 20px 0px; text-align:justify;}
.cyc-index .centers .row h6{ font-size:13px;color:#888888}
.cyc-index .centers .row aside p{line-height:1.5}

.cyc-index .centers .row a{display:block;}
.cyc-index .centers .row a:hover aside{background-color:#fff6b2;}
.cyc-index .centers .row a:hover {color:#333}

section.centers .container{ width:300px; margin:0px auto; text-align:center;overflow:hidden;padding: 0}
section.centers .container .row{width:9999px;margin:0;}
section.centers .container .row>div{width:150px;padding:0 5px;}

/*section.centers2*/

section.centers2{background:#1971b9;background-size:cover;position:relative; padding:10px 0 } 
section.centers2>div.Toparrow1{position: absolute;top:48%; left:15px; z-index:999}
section.centers2>div.Toparrow2{position: absolute;bottom:42%;right:20px;z-index:999}

section.centers2 h1,
section.video h1
{padding: 15px 0 20px;font-size:22px;font-weight:bold;margin-top:0;margin-bottom:15px;text-align:center}	

section.video{padding:15px 0}
section.video h4{margin:0;}

section.centers2 h1{color:#FFF;background:url(../images/Message2.png) no-repeat bottom center;}
section.centers2 .container{ width:300px; margin:0px auto; text-align:center;overflow:hidden;padding:15px 0}
section.centers2 .container .row{width:9999px;margin:0;}
section.centers2 .container .row>div{width:100px;padding:0 5px;}

section.centers2 .row div>h4{margin-top:10px;font-size:17px;font-weight:bold;color:#ffe72e}
section.centers2 .row div>p{ color:#FFF;font-size:13px;}
section.centers2 .row div>a:hover img{opacity:1;/*transform:scale(1.1)*/}

/*section.video*/
section.video{background:#eccd34;} 
section.video h1{color:#1971b9;background:url(../images/Message3.png) no-repeat bottom center;}
section.video div{margin:0 auto; width:340px;}
section.video div h4 a{ font-size:17px; line-height:1.6em; color:#1971b9;}


/*========================================================news_mobile===============================================================================*/
.cyc-news{}
.container{width: auto;}


.cyc-index >h1,
.cyc-news div >h1,
.cyc-search >h1,
.cyc-traffic div >h1,
.accessi div >h1,
.cyc-problem div >h1
{padding: 10px 0 20px;font-size:22px;color:#000;font-weight:bold;background:url(../images/Message.png) no-repeat bottom center;margin-bottom:15px;text-align:center}	

.cyc-news div .row h4{padding: 10px 0 10px;margin:10px 0 0 0} 
.cyc-news div .row aside{ padding:5px 18px;margin-bottom:20px;}	
.cyc-news div .row h6{color:#adadad;}
.cyc-news div .row aside p{ font-size:15px;line-height:1.6em;height:6.5em;overflow:hidden;font-weight:bold;}

.cyc-news div .row a{display:block;}
.cyc-news div .row a:hover aside{background-color:#fff6b2;}
.cyc-news div .row a:hover {color:#333}

.newsNav{}
.newsNav>div a{background:#fff;text-align:center;line-height:2.5;font-size:15px;border-radius:10px;border:1px solid #dfd9d5;margin-bottom:20px;font-weight:bold;}
.newsNav>div a.active,.newsNav>div a:hover{background:#ffe72e;color:#197dce;}

.newsList>div{padding:0 8px;}

/*========================================================news_content_mobile===============================================================================*/
.content{}
.content div.container{ z-index:20}
.content div .content-a{ margin:40px auto 30px auto;padding:20px 30px; background:#fff;border-radius:7px;}
.content div .content-a aside>p,.content div .content-a article>p{font-size:17px;}
.content div .content-a aside >h6{font-size:13px;color:#adadad;}
.content div .content-a aside >h3{font-size:22px;font-weight:bold;color:#197dce;}
.content div .content-a aside >h4{font-size:15px;color:#197dce;font-weight:bold; line-height:1.6em;}
.content div p a.pt{padding:15px 70px; font-size:16px; font-weight:bold;color:#fff; background-color:#197dce;border-radius:7px;}
.content div p a.pt:hover{background-color:#28b1b6;color:#9B1C1E;}

/*========================================================search_mobile===============================================================================*/

section.cyc-search {color:#FFF;}
section.cyc-search-Inquire{background:#28b1b6;padding:20px 0;}
section.cyc-search-Inquire ul {font-size:16px; font-weight:bold;}
section.cyc-search-Inquire ul li{display:table;width:100%;margin:10px 0}
section.cyc-search-Inquire ul li dt,section.cyc-search-Inquire ul li dd{display:table-cell;}
section.cyc-search-Inquire ul li dt{width:50px;text-align:center;}
section.cyc-search-Inquire ul select{width:100%;color:#000; border-radius:7px;letter-spacing:2px}

section.cyc-search-Inquire ul .btn_search a{font-size:17px;color:#FFF;display:block;text-align:center;
                                            background-color:#197dce;font-weight:bold;letter-spacing:1px;
;padding:10px 10px 10px 10px;text-decoration:none;border-radius:7px;}

 section.cyc-search-Inquire ul.btn_search a:hover{color:#197dce;background-color:#ffe72e}

/*課程查詢結果*/

section.cyc-search-result h6{ font-size:13px; color:#000;}
section.cyc-search-result h6 >b{ margin:0 5px; font-size:17px;color:#197dce; font-weight:normal;}

section.cyc-search-result {}

section.cyc-search-result ul{margin-bottom:30px;}
section.cyc-search-result ul li{display:table;width:100%;font-size:15px;}
section.cyc-search-result ul li dt{display:table-cell;vertical-align:middle;background:#28b1b6;padding:0 10px;width:120px;text-align:center}
section.cyc-search-result ul li dd{display:table-cell;vertical-align:middle;margin:0;background:#fff;color:#333;padding:0 10px;text-align:center;}
section.cyc-search-result ul li dt h4{border-bottom:1px solid #ffe72e;font-size:15px;line-height:3;margin:0;padding:0}
section.cyc-search-result ul li:last-child dt h4{border-bottom:none;}
section.cyc-search-result ul li dd p>a{color:#28b1b6}
/*========================================================sportscenter_mobile===============================================================================*/
.cyc-Sportscenter{margin:0;position:relative;}

/*kv部分設定*/
.cyc-Sportscenter div.color1{background-color:#197dce;}
.cyc-Sportscenter div.color1 div{ color:#FFF; vertical-align:middle;}


.cyc-Sportscenter .color1 div.text-right>img{ margin-top:50%;}
.cyc-Sportscenter .color1 div aside{padding-top:20px; padding-bottom:10px;}
.cyc-Sportscenter .color1 div aside h3{ margin:0; font-size:16px;font-weight:bold; letter-spacing:3px;}
.cyc-Sportscenter .color1 div aside h1{ margin:0; font-size:26px; line-height:1.2em;letter-spacing:6px;font-weight:bold;}

/*pt 框架那設定*/
.cyc-Sportscenter .color1 div aside .pt3 a img{ margin-right:5px; padding-bottom:5px;}

.cyc-Sportscenter div.container{ margin:10px 5px; padding:0 10px;}
.cyc-Sportscenter_header h1{font-size:22px;}

/*breadcrumb*/

ol.breadcrumb,ol.breadcrumb2{background:none;font-size:15px;text-align:center;}
ol.breadcrumb .active,ol.breadcrumb2 .active{color:#045aba;}
ol.breadcrumb select,ol.breadcrumb2 select{border-color:#eaeaea;border-radius:7px;font-size:15px;width: auto; letter-spacing:4px;font-weight:bold;text-align:center;}
ol.breadcrumb select{padding:8px 25px;}
ol.breadcrumb2 select{ margin-top:9px; padding:8px 33px;}

img.origin{ margin-right:10px;}

.cyc-Sportscenter div .row div.col-xs-12 div{ padding:0px;}
.cyc-Sportscenter div .row div.col-xs-12 >h1{ font-size:22px; font-weight:bold;}

.pl,
.pl2,
.pr{ font-size:15px;line-height:2em;}
.pl{font-weight:bold;}
.pr2{letter-spacing:4px;}
.pl2{ letter-spacing:5px;} 
.pl3{ font-size:22px; margin:20px auto;font-weight:bold;letter-spacing:1px;}

.cyc-Sportscenter_eqitment div .row div.col-xs-4{ padding:0 10px;} 
.cyc-Sportscenter_eqitment div .row div.col-xs-4 aside.as1{padding:10px 10px;border-radius:7px;margin-bottom:10px;border: 1px solid #ddd;}
.pl4{font-size:17px;color:#5ab5ba;letter-spacing:1px; text-align:center; line-height:1em;}

.cyc-Sportscenter_eqitment{ padding-bottom:20px;} 
.cyc-Sportscenter_eqitment div .row aside.ad4{border: 0px solid #ddd;border-radius:7px; padding:10px 40px 20px 40px; background-color:#ccf7f9;}
.cyc-Sportscenter_eqitment div .row aside.ad4 .pl5{color:#28b1b6;letter-spacing:1px; text-align:center; font-size:20px;font-weight:bold;}
.cyc-Sportscenter_eqitment div .row aside.ad4 p{font-size:16px; text-align:justify;}


/*========================================================Accessibility_mobile===============================================================================*/

.accessi{}

.accessi div >h1{ margin-bottom:30px;}
.accessi div .row aside{ padding:10px 15px 12px 12px;border-radius:7px;text-align:center; margin-bottom:30px;border:#e5e6e6 solid 1px; background-color:#fff;}
.accessi div .row aside img{ margin:5px auto}
.accessi div .row aside p{ margin:5px auto;}
.accessi div .row aside p a{color:#55b4b8; font-size:15px; letter-spacing:2px;}
.accessi div .row aside p a .arrow,
.accessi div aside .row div p .arrow2{background:url(../images/arrow3.png) no-repeat right center; color:rgba(255,255,255,0)}
.accessi div .row aside p a:hover{color:#ed1414} 

/*========================================================accessi-list_mobile===============================================================================*/

.accessi div .row aside.ad2
{ padding:10px 20px 30px 20px;margin:10px 15px 25px 15px;background-color:#fff;border: 1px solid #ddd;border-radius:7px;text-align:center;}
.accessi div .row aside.ad2 p{font-size:15px;line-height:2em;text-align:center;}
.accessi div .row aside.ad2 p >b{ font-size:20px;color:#45aeb3; letter-spacing:2px; font-weight:normal;}
.accessi div .row aside ul{width:95%;margin:5px auto;font-size:17px;}
.accessi div .row aside ul li{display:inline-block;width:48%;text-align:left;margin:15px auto;vertical-align:top;}

.accessi div .row aside ul li .arrow2{background:url(../images/arrow4-m.png) no-repeat left center;width:20px;height:10px;display:inline-block}
.accessi div .row aside ul li a:hover{color:#197dce}

/*========================================================traffic_mobile===============================================================================*/
.cyc-traffic{}
.paginationLsit .cityBtn {margin:20px auto;}
.paginationLsit .cityBtn li{display:inline-block;margin:10px auto;width:32%;}
.paginationLsit .cityBtn li a{font-size:15px;color:#000;line-height:1;display:block;text-align:center;}
.paginationLsit .cityBtn li:nth-child(3n-1) a{border-left:1px solid #dfd9d5;border-right:1px solid #dfd9d5;}
.paginationLsit .cityBtn li a:hover{color:#5a9ad7;text-decoration:none;}

.paginationLsit .cityBtn .active a,
.paginationLsit .cityBtn .active a:hover,
.paginationLsit .cityBtn .active a:focus{color:#5a9ad7;text-decoration:none;}

.cyc-traffic div aside.ad3{ margin:0 0 20px 0; padding:10px 15px;text-align: left;border:#e5e6e6 solid 1px;border-radius:7px; background-color:#fff;}
.cyc-traffic div aside.ad3 h1{font-weight:bold; font-size:23px;line-height:1.5em; letter-spacing:2px; text-align:left;}
.cyc-traffic div aside.ad3 .car-p{ margin-top:20px; margin-bottom:20px;font-size:17px; color:#197dce;letter-spacing:2px;line-height:20px; font-weight:bold;}
.cyc-traffic div aside.ad3 .car-p img{ padding-right:8px;padding-bottom:4px;}
.cyc-traffic div aside.ad3 p{font-size:16px;letter-spacing:2px;line-height:1.5em;}

/*========================================================problem_mobile===============================================================================*/
.cyc-problem{} 

.cyc-problem .qaList{margin:auto;}
.cyc-problem .qaList li{ padding:0 20px 5px 20px;border-radius:7px;height:auto;margin:15px 0;background:#fff;border:1px solid #ccc;display:block;}
.cyc-problem .qaList li *{transition:all .7s}
.cyc-problem .qaList li h3{font-size:14px;margin-bottom:10px;cursor:pointer;display:table;width:100%;}
.cyc-problem .qaList li b{font-weight:bold;display:table-cell;width:2em;}
.cyc-problem .qaList li b:before{display:inline-block;vertical-align:middle;font-size:17px;width:2em;line-height:2em;text-align:center;border-radius:50%; color:#FFF;content:"問";
                                  background-color:#197dce;}
.cyc-problem .qaList li h3>i{display:table-cell;transform:rotate(180deg);background:url(../images/icon_arrow.png) center center no-repeat;width:20px;height:11px;vertical-align:top;}
.cyc-problem .qaList li h3>big{display:table-cell;padding:0 15px;}

.cyc-problem .qaList li article {border-top:1px solid #ccc;padding-top:20px;display:none;}
.cyc-problem .qaList li article b{}
.cyc-problem .qaList li article b:before{content:"答";background-color:#28b1b6;}

.cyc-problem .qaList li article>p{font-size:15px;text-align:justify; display:table-cell;vertical-align:top;padding:0 15px;}

.cyc-problem .qaList li.active h3>i{transform:rotate(0deg)}
.cyc-problem .qaList li.active article {display:block;}


/*====================================================news======================================================================*/