/*外連字型*/

/*仿宋*/@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
 /*黑體*/@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
 /*英文*/@import url('https://fonts.googleapis.com/css?family=Baloo+2&display=swap');

/*仿宋體*/
.font-song{font-family: 'Baloo 2','cwTeXFangSong'}

/* CSS Document */
html{}
body{font-size:15px;line-height:1.8;color:#333;
		font-family: 'Baloo 2','Noto Sans TC', sans-serif;font-weight:400;letter-spacing:.01em;
		word-break: break-all;
		background:url(../images/bg.jpg) ;
	}

body.noscoll {overflow: hidden;}

.othersBg{background:url(../images/bg-others.jpg);margin-bottom:-70px;}


/*****************************Layout*****************************************/
.wrapper{position: relative;min-height:500px;padding:70px 0 70px}
.wrapper.mainWp{padding-top:150px;}
.wrapper>section{margin-left:auto;margin-right:auto;}


/*pagination*/
.pagination{justify-content:center;margin-top: 50px;}
.pagination li{margin: 0 3px;}
.pagination li a{padding:0 1em;line-height:2;background:#ccc;display:block;}
.pagination li a:hover,
.pagination li.active a
{background:#dc5f5f;color:#fff;}


/*breadcrumb*/
.breadcrumbZone{margin-bottom:0px;margin-top:-30px;position: relative}
.breadcrumb{background:none;padding:0;margin-bottom: 40px;}
.breadcrumb a{color:#000;text-transform:uppercase;padding-bottom: 4px;border-bottom: 1px solid;}
.breadcrumb .active > a{color:#00a3ff;border: none}
.breadcrumb > li + li:before{content: ">\00a0";color:#000}

/*btn-top*/
.btnTop{position:fixed;right:10px;bottom:10px;z-index: 1000;}
.btnTop a{width:50px;height:50px;background: rgba(255, 107, 0, .9);color:#fff;text-align:center;}
.btnTop a i{font-size:30px;}

.btnTop a:hover{background: rgba(202, 27, 75, 0.9);}

/*Social Media*/
.socialArea{}
.socialArea ul{display:flex;align-content:center;justify-content: center;width:100%}
.socialArea ul li{padding:0 5px;}
.socialArea ul li img{height:50px}
.socialArea ul li a {filter:grayscale(.5);}
.socialArea ul li a:hover{filter:grayscale(0);}


/*kv*/
.kv{height:422px;background-size:cover;}
.mainkv{height:275px;background-size:cover;display:flex;align-items:flex-end;justify-content:center;}
.mainkv h1{writing-mode: vertical-lr ;color:#444;background:rgba(255,255,255,.95);
				 font-family: 'Baloo 2','cwTeXFangSong';font-size:30px;padding:1.5em .5em 0;
				 transform: translateY(40px);
    			box-shadow: 0 0 5px 0px rgba(0, 0, 0, .5);
				}
.mainkv h1:after{
						content:"";height:40px;width:1px;background:#333;display:inline-block; transform: translateY(15px);
    				}


/*****************************Layout End*****************************************/


/*****************************Header Start*****************************************/

header{z-index:999;
			width:100%;
			transition:all .7s;
			text-align: center;
			height:210px;
			position:relative;
			z-index: 99;
			border-top:5px solid #c52a31;
		}

.m-header{display:none;}



/*****************************Category Start*****************************************/

/*mainNav*/
.mainNav{width: 100%;font-family: 'Baloo 2','cwTeXFangSong', serif; font-weight:400;}
.mainNav>ul>li:not(.logo) {vertical-align:middle;width:8em;border-bottom:1px solid #ccc;padding-bottom:1em;position:relative;}
.mainNav>ul>li:not(.logo)>a{font-size:20px;color:#000;letter-spacing:0;position:relative;display:inline-block;transition:all .7s;line-height:1;}
.mainNav>ul>li>a {transition:all .3s}
.mainNav>ul>li:not(.logo) >a:after{position:absolute;width:0;content:"";background:#da6367;height:3px;left:5%;bottom:-5px;transition:all .5s}
.mainNav>ul>li:not(.logo) >a small{position:absolute;left:calc(50% - 40px);
								 font-size:12px;color:#fff;background:#797979;
								 bottom:-50px;width:80px;
								 border-radius:10px;opacity:0;line-height:1.5;transition:all .5s;
								 transform:translateY(-10px);
							}

.mainNav>ul>li.active>a,
.mainNav>ul>li>a:hover{color:#da6367}


.mainNav>ul>li.active>a:after,
.mainNav>ul>li>a:hover:after{width:90%}

.mainNav>ul>li.active>a small{opacity:1;transform:translateY(0px);}


.mainNav>ul>li.logo{width:160px;margin:0 20px;vertical-align:middle;}

/*subNav*/
.subNav{position:absolute;width:100%;	font-family: 'Baloo 2','Noto Sans TC';top:43px;
			transform:translateY(-10px);transition:all .5s;opacity:0;
		}
.subNav li {background:rgba(0,0,0,.8);}
.subNav li a{color:#fff;line-height:3;display:block;font-size:13px;}

.subNav li:hover a{background: rgb(197, 42, 49);}

.subNav.active{
	transform:translateY(0);
	opacity:1;
}



/*cateGory*/
.navCategory{margin-bottom:30px;}

.navCategory ul{flex-wrap:wrap;}
.navCategory li{margin:3px;}
.navCategory li a{font-size: 18px;border-radius:1em;border:1px solid #999;padding:0 .7em;line-height:2.2em;display:block;}

.navCategory li.active a,
.navCategory li  a:hover{background:#dcdcdc;color:#333;}


/*****************************Header End*****************************************/



/*****************************Footer Start*****************************************/
footer{background:#fff;height:225px;box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, .2);color:#999}

.footerNav{margin-bottom:10px;}
.footerNav ul{align-items: flex-end;}
.footerNav li.ftlogo{width:100px;margin:0 10px}
.footerNav li:not(.ftlogo) {margin:0 .5em;}
.footerNav li:not(.ftlogo) a{color:#999;font-size:25px}
.footerNav li:not(.ftlogo) a:hover{color:#ba1b22}

.footeNav2{text-align:center;}
.footeNav2 a{text-decoration:underline;color:#333;}
.footeNav2 a:hover{color:#990000}

/*****************************Footer End*****************************************/


/********************************google search**********************************/

#___gcse_0{position:fixed;}

.go-searchZone{margin:auto;position:fixed;background:none;transition: all .7s;
						top:15px;z-index:10;right:20px;width:220px;}

.go-searchZone.active{transform:translateY(0);height:auto;}

.go-searchZone>div{max-width:1280px;margin:auto;}

.gsc-control-cse{background:none !important;border:none !important;}
.go-searchZone table{margin-bottom:0;}
.go-searchZone td{border:none;padding:0;}
.go-searchZone button{min-width:0px;}
.gsc-search-button-v2 svg{height:12px !important;}

.go-searchZone .gsc-input{
	padding:.2em 0 !important;font-family:'Noto Sans TC' !important;
}

.gsc-search-box-tools .gsc-search-box .gsc-input{width:95% !important;margin:auto;}


.gsc-search-button{margin-left:0;}
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus
{  background: #fe7918 !important;
	border-color:#fe7918 !important;
	padding:10px 8px !important}

/*result*/

.go-searchZone .gsc-results-wrapper-overlay{max-height:650px  !important;width: 90%;left:5%;font-family:'Noto Sans TC' !important;}
.go-searchZone .gsc-result .gs-title{height:2em;text-align:left;}

.go-searchZone .gsc-adBlock,.go-searchZone .gsc-wrapper>div:nth-child(1)
{display:none !important}

/********************************google search End**********************************/



/*只有PC會出現的樣式*/
@media (max-width: 1200px) {

}

/*平板尺吋*/
@media (max-width:992px) {
	header{height:180px;}
	.mainNav{padding-top:30px;}
	.mainNav>ul>li.logo{width:120px;margin:0 10px;}
	.mainNav>ul>li:not(.logo)>a{font-size:15px;}

}


/*手機尺吋*/	
@media (max-width: 767px) {
	
	.kv{height:250px;}
	header {height: 70px;}
	.btn-search{
		position: absolute;
    	left: 0;
    	top: 10px;
    	z-index: 999;
	}
	.btn-search img{height:25px;}

	.m-header {display:block;}
	
	.mainNav>ul{text-align: left;display: block;}    
	.mainNav>ul>li:not(.logo) {width:auto;padding: 1em;}
	.mainNav>ul>li:not(.logo) a small {
		bottom: 0;
		left: auto;
		padding: 0 7px;
		text-align: center;
		width: 60px;
	}
			
	.mainNav li.logo {display: none;}
	.mainNav>ul>li:not(.logo)>a{font-size:18px;}

	.subNav{display:none}

	.wrapper{padding:30px 0;}

	.navCategory{margin-bottom:10px;}
	
	footer {height: auto;padding: 30px 0 55px;}
	.footerNav ul {display: block;text-align: center;}
	.footerNav li.ftlogo {display: inline-block;margin: auto;width: 18%;}
	.footerNav li:not(.ftlogo) {display: inline-block;text-align: center;width: 13%;}


	.socialArea{
		position: fixed;
	    bottom: 0px;
	    left: 0;
	    width: 100%;
	    z-index: 999;
	    background: #eee;
	    padding: 20px 0;
	    box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.4);
    }

	.socialArea ul li img{height:35px}
	
	.btnTop {bottom:20px;}
	.btnTop a {width: 35px;height:35px;}
	.btnTop a i{font-size: 25px;}

	.go-searchZone{  right: 0;width:100%;top:120px;display:none;}
	.gsc-search-button-v2 svg{height:24px !important;}

}

@supports (-webkit-overflow-scrolling: touch)  and (max-width: 767px)  {
  /* CSS specific to iOS devices */ 

}

/*IPHONE SE*/    
@media (max-width: 360px) {


}