/*外連字型*/
/*Noto+Sans|Montserrat*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css?family=Montserrat:600');
@import url('https://fonts.googleapis.com/css?family=Anton');

/* CSS Document */
html{}
body{font-size:15px;line-height:1.8;color:#333;font-family:'Montserrat','Noto Sans TC';font-weight:400;letter-spacing:.1em;}


/*wrapper*/
.wrapper{position: relative;padding:50px 0;}
.wrapper>section{}


/*header*/
header{color:#fff;z-index:99;width:100%;top:0;left: 0;position:relative;
			background-color:rgba(255,255,255,100);transition:all .7s;
			box-shadow: 4px 4px 7px hsla(0, 0%, 0%, 0.14);
		}
header .logo{height:55px;/*transform:translate3d(35px,20px,0);*/float:left;transition:all .7s;margin-top:12px;}


/*mainNav*/
.mainNav{text-align: right;float:right;}

.mainNav>ul>li{position:relative;text-align:center;}
.mainNav>ul>li>a{color:#333;letter-spacing:.1em;line-height:1;font-size:16px;display:block;
							position:relative;display:block;padding:1.8em 1em;}

.mainNav>ul>li>a:after{content:"";height:4px;width:0%;left:0;bottom:0px;border-radius:5px;
									background:#296fa9;position:absolute;width:0;transition:all .7s;}								

.mainNav>ul>li.active>a{color:#fff;}

/*PC版以上才有Hover*/

@media (min-width: 768px) {
	.mainNav>ul>li>a:hover,.mainNav>ul>li.active>a{color:#333;background:#b0d3ea;}
	.mainNav>ul>li:hover a:after,.mainNav>ul>li.active>a:after{width:100%;}
}


/*footer*/
footer{background:#e5e5e5;position:relative;}
footer > div{padding:15px 0;display:table;width:100%;}

.footerTxt,.footerNav{display:table-cell;vertical-align:middle;}

.footerNav{text-align:right;}
.footerNav li{}

.footerNav li {display:inline-block;vertical-align:middle;}
.footerNav li a{color:#333;background:#b0d3ea;border-radius:15px;padding:.5em 1em;font-size:13px}
.footerNav li a:hover{color:#fff;background:#296fa9;}

.footerNav li a i{display:inline-block;vertical-align:middle;margin-right:5px;}

.footerTxt{font-size:12px}
.footerTxt h4{margin-bottom:10px;}
.footerTxt p{margin-bottom:0;line-height:1.3}


/*swiper-slide*/
.swiper-slide aside{background:no-repeat center center;background-size:cover;position:relative;}
.swiper-pagination-bullet{width:12px;height:12px}
.swiper-pagination-bullet-active{background-color:#296fa9}


/*btn-top*/
.btnTop a:after{background:#296fa9;}



/****************************** 行動版天地************************************/

@media (max-width: 1200px) {

	header .logo{height:55px;}
	.mainNav>ul>li>a{padding: 1.8em .5em;}

}

/*平板尺吋*/
@media (max-width:992px) {
	
/*
	 header .logo{float:none;margin:20px auto 10px;text-align:center;}

	 .mainNav{text-align:center;margin:0 -15px;float:none;}
	 .mainNav ul{display:table;width:100%;}
	 .mainNav li{display:table-cell;}
	 .mainNav>ul>li:nth-child(1) a{display:none;}

	 .footerTxt{width:40%;}
*/

}


/*手機尺吋*/	
@media (max-width: 767px) {


	/*header*/
	header{padding:0;position:static;border:none;}
	header .logo{display:none;}

	.m-header{position:fixed;top:0;z-index:999;background:#fff;width:100%;border-top: 3px solid #296fa9;box-shadow:rgba(0,0,0,.7) 0 0 5px}
	.m-header dl{height:60px;}

	.m-header dd.m-logo{text-align:center;}
	.m-header dd.m-logo img{height:50px;}

	.m-header dt{width:50px;text-align:center;font-size:25px;}
	.m-header dt a{color:#fff;display:block;height:100%;padding-top:25px;padding-left:20px;}

	.btn-mobile hr{height:1px;border:none;background-color:#000;width:70%;margin:0px 0;transition:all .7s;}
	.btn-mobile hr.hr2{transform: translateY(10px);width:90%;}

    .btn-mobile.active .hr1{transform:rotate(45deg) translateX(5px);width:90%;}
    .btn-mobile.active .hr2{transform:rotate(-45deg) translateY(3px)}

	
	/*footer*/
	footer  div,footer  nav{display:block !important;width:100% !important}
	.footerTxt{text-align:center;margin-bottom:15px;}
	.footerNav{text-align:center;}
	.footerNav li a{font-size:13px;}

	footer hr{border-color:#ccc;margin:10px auto}



	/**mainNav***/
	.mainNav{
		     transform:translateX(-100%);
		     position:fixed;
		     width:80%;height:100%;
		     left:0;top:0;
		     transition:all .5s;
		     padding-top:60px;
	         background:rgba(255,255,255,1);
	         z-index: 990;
	         overflow:auto;
	         -webkit-overflow-scrolling: touch;
		 }

	.mainNav.active{transform:translateX(0);transition:all .7s;}

	.mainNav ul{padding:0px 0px 50px;}
	.mainNav>ul>li{display:block;padding:10px;border-bottom: 1px solid #eee;}
	.mainNav>ul>li:hover{background-color: #eee;}
	.mainNav>ul>li:nth-child(1) a{display:block;}

	.mainNav>ul>li a{margin-top:0;line-height:1;font-size:15px;letter-spacing:.2em;position:relative;
    							color:#333;text-align:left;padding:1em 2em;
	}
	.mainNav>ul>li a small{
		position: static;
		display:block;
	    color: #296fa9;
	    opacity: 1;
	    width:auto;
	    text-align: left;
    }

    .block{position:fixed;width:100%;height:100%;left:0;top:0;display:none;
    			background:rgba(0,0,0,.5); z-index: 90;
    		}
	
	.block.active{display:block;}

/******************************mobile End************************************/
}

@supports (-webkit-overflow-scrolling: touch)  and (max-width: 767px)  {
  /* CSS specific to iOS devices */ 
	.m-header dt a{padding-top:17px;}
}