/*外連字型*/
/*Noto+Sans|Montserrat*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC:400&display=swap');

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');


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

body.fixed{position:fixed;width:100%;}

/*****************************Layout*****************************************/

.wrapper{position: relative;min-height:500px;padding-bottom:100px;font-family:'Arial','Noto Sans SC','Noto Sans TC';}
.wrapper>section{margin-left:auto;margin-right:auto;}


/*kv*/
.kv{background:no-repeat center center;}
.mainKv{height:192px;text-align:center;margin-bottom:80px;}
.mainKv h2{color:#fff;font-family: '微軟正黑體';text-transform:uppercase;font-size:60px;}
.mainKv h3{font-size:18px;padding:.3em 3em;border-radius:1em;background-color:#ff8c00;color:#fff;display:inline-block;margin-bottom:.2em;}


/*title*/
.mainTitle{font-size:50px;font-weight:600;font-family: 'Poiret One','Noto Sans TC';margin:.2em auto .5em;text-transform:uppercase;}

.subTitle{font-size:20px;font-weight:300;position:relative;display:inline-block;padding-left:18px;}
.subTitle:before{display:inline-block;vertical-align:middle;content:"";width:60px;height:1px;background-color:#0ec9a8;margin:0 5px;}
.subTitle:after{content:"";width:9px;height:9px;background-color:#0ec9a8;margin:0 5px;position:absolute; left:0px;top: calc(50% - 3px);}

.subTitle-w{color:#fff;}
.subTitle-w:before,.subTitle-w:after{background-color:#fff;}

.recommendTitle{border:3px solid #333;border-bottom-width:1px;border-left:none;border-right:none;
						 letter-spacing:.3em;padding:.5em;margin-bottom:1.5em;}

/*link*/
a.linkLine{display:inline-block;}
a.linkLine:hover{}
a.linkLine:after{content:"";display:block;height:4px;background:#0ec9a8;border-radius:5px;width:0;transition:all .5s;}
a.linkLine:hover:after{width:100%;}

/*swiper-slide*/
/*.swiper-slide{width:20% !important;}*/
.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:#0ec9a8}


/*pagination*/
.paginationLsit{}
.pagination>li{display:inline-block;margin-right:2px;}
.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span{border-radius:0;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
	background-color: #00a6a8;
    border-color: #00a6a8;
}
.pagination>li>a, .pagination>li>span{color:#00a6a8;}

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

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

header{color:#fff;padding:9px 0;position:fixed;left:0;top:0;z-index:9990;border-top:4px solid #0ec9a8;box-shadow: 2px 3px 8px rgba(0, 0, 0, .2);
			width:100%;background-color:#FFF;transition:all .7s;}

header .logo{display:inline-block;vertical-align:middle;padding:0 30px 0 30px;/*border-right:1px solid #999;*/}
/*header .logo a{width:115px; display:block; text-align:center;} */
header .logo a{width:80%; display:block; text-align:center;}
header .logo img{width:80%;}

/*mainNav*/
.mainNav{display:inline-block;vertical-align:middle;margin-left:25px}
.mainNav>ul>li{position:relative;text-align:center;margin-right:2em;}
.mainNav>ul>li>a{font-size:17px;color:#333;line-height:1.8;font-weight:400}
.mainNav>ul>li>a:after{content:"";display:block;height:4px;background-color:#ffa200;/*border-radius:5px;*/width:0;transition:all .5s;}

/*mainNav>ul>li.active a{color:#ffa200;}*/

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

/*右邊Header選單 移至MOBILENAV*/
/*.rightNav{float:right;margin:-18px 0;}

.btn-login{background-color:#0ec9a8;color:#fff;display:inline-block;line-height:96px;font-size:23px;padding:0 1em;position:relative;}
.btn-login *{position:relative;z-index:10}
.btn-login i{background-image:url(./images/login.png);background-size:cover;width:32px;height:32px;}

.btn-login:after{background-color:#ff8c00;height:100%;position:absolute;left:0;top:0;content:"";z-index: 0;width:0;transition:all .3s;}
.btn-login:hover:after{width:100%;}

.lan-select{display:inline-block;width:auto;color:#0ec9a8;}*/

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

/*****************************Footer Start*****************************************/
footer{background-color:#252525;color:#fff;}
footer .container{padding:50px 30px;}

.footerTxt{float:left;margin-top: 0px;width:50%;padding-right:5%;}

.footerTxt .footerLogo{margin-bottom:10px;display:inline-block;}
.footerTxt .footerLogo img{width:100px}
.footerTxt .MEDIUM{display:inline-block;height: 40px;margin-left: 10px;}

.footerTxt p{/*margin-left:50px;*/margin-bottom:10px }
.footerTxt p a{background-color:#ff8a00;padding:.2em .8em;display:inline-block;
					border-radius:1em;color:#fff;margin-left:1em;font-size:13px;}

.footerTxt p a:hover{background-color:#ffF;color:#000;}

.socialNav{margin-left:0px;display:flex;}
.socialNav a{display:inline-block; margin-right:5px;margin-bottom:5px;background:#cccccc;color: #252525;font-size:18px;
								  border-radius:5px; width:26px;height:26px; text-align:center; position: relative; line-height:1.1;}
.socialNav .navLine{font-size:20px;}
/*.socialNav .navLine i{margin-top:-4px;}

.socialNav .navU2 i{margin-top:-4px;}*/
/*.socialNav i {position:absolute; top:50%; right:50%; transform: translate(-50%, -50%);}*/
.socialNav a:hover{background:#0ec9a8;}
.socialNav a:hover i{color:#FFF;}


.footerNav{float:right;width: 50%;}
.footerNav li {width:25%;}
.footerNav li h3{font-size:18px;font-weight:300;margin-bottom:1em;color:#0ec9a8;}
.footerNav li a{color:#fff;font-size:14px;font-weight:300;margin-bottom:.5em;}
.footerNav li a:hover{color:#ffcc00;}

.footerCR{background-color:#0ec9a8;color:#fff;text-align:center;padding:.8em 0;letter-spacing:0;font-size:13px}

/*訂閱電子報*/
.eNews{background-image:url(../images/enews.jpg);height: 560px;text-align:center;}
.eNews p{margin-bottom:30px;font-weight:300;}
.eNews-form{max-width:500px;background-color:#13313e;border:1px solid #fff;padding:8px;margin:10px auto;}
.eNews-form input{background:none;padding:1.3em 2em;font-size:18px;}

.eNews-form dd{width:90px;border-left:1px solid #fff;}
.eNews-form dd a{color:#fefedb;font-size:23px;}
.eNews-form dd a:after{background:#fefedb;}

/*onlineService*/
.onlineService{position:fixed;right:20px;bottom:120px;z-index: 9999;transition:all .7s}
.onlineService.active{bottom:350px;}
.onlineService .chat_box{position: relative; display: none;}
.chat_box a{display:block; text-align:center; padding:2px;}
.line_at img,.smartbooks_fb img,.phone img{width:55px; margin-right:5px;}

/*Goto*/
.go-top {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 42px;
    padding-top: 2px;
    text-align: center;
    font-size: 12px;
    position: fixed;
    bottom: 65px;
    right: 60px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    background-color: rgba(200,227,161,0.7);
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    z-index: 9999;
}
.go-top:hover,.go-top:active,.go-top:focus{background-color: rgba(200,227,161); opacity: 1;}

/*lightBox*/
.lightBox {
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 99999;
  display:none;
}

.lightBox>div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
  height: 100%;
  text-align:center;
}


.lightBox>div>article {
    max-width:1000px;
    min-height: 300px;
    max-height:700px;  
    /*background:#fff;*/
    width:95%;
    margin:0 auto;
    padding:30px 0;
    border-radius:15px;
    position:relative;
    color:#fff;
    /*overflow:auto;*/
}

.lightBox>div article .btn-close{
	position:absolute;
	top:.5em;
	right:.5em;
	font-size:25px;
	color:#FFF;
}
.lightBox>div article .btn-close:hover{
	color:#fff;
}


.lightBox:after {
  content: "";
  left: 0;
  top: 0;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 160, 132, 0.97);
}


/*lightBox 標題*/
.lightbox-ct>h2{
	font-size:50px;
	width: 100px;
	height: 100px;
    line-height: 90px;
    border-radius: 100%;
    background: #ff8c00;
    margin: auto;
}
.lightbox-ct>h2 img{max-width:60px;max-height:60px}

.lightbox-ct>h3{font-size:30px; margin: 1em auto;font-weight:700;letter-spacing:.2em;}

/*lightBox 內容*/
.lightbox-ct>div{text-align:left;margin:auto;padding:0 50px 20px;overflow:auto;max-height:400px;}
.lightbox-ct div ol {margin-left:1.5em;}
.lightbox-ct div ul {list-style-type:disc;max-width:600px;margin:auto;}
.lightbox-ct div ul li{float:left;width:45%;margin-left:5%;/*padding-right:2em;*/}

.lightbox-ct div p,.lightbox-ct div h4{margin:1em 0;}

.lightbox-ct div aside{margin:20px auto;max-width:600px;}
.lightbox-ct div aside img{width:100%  !important;height:auto !important;}

.lightbox-ct div aside {text-align:center;}
.lightbox-ct div aside div,.lightbox-ct div aside p {text-align:left;margin: 10px;}

/*認證標章*/
.MEDIUM #twcad1{left:auto !important;top:auto !important;right:0;bottom:0;}
.MEDIUM #twcad3{left:auto !important;top:auto !important;right:0;top:0;}




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


@media (max-width: 1300px) {
	header .logo{padding: 0 15px;}

	.mainNav{margin-left:15px;}
	.mainNav>ul>li{margin-right: 1.5em;}
	.mainNav>ul>li>a{font-size:15px;}

}

/*平板尺吋*/
@media (max-width:992px) {

	header .logo{border-right:none;}
	.rightNav {margin-right:0px;}
	.btn-login{font-size:20px;}

	
	

}


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

	/*lightBox 標題*/
	.lightbox-ct>h2{font-size:30px;	width: 80px;height: 80px;line-height: 80px;}
	.lightbox-ct>h3{font-size:20px;}
	.lightbox-ct div{padding:0 20px 50px;}

	
	body{padding-top:70px;font-size:13px;}
	.inlineBlock>li,.sei .category li a{color:#000; font-weight:600; font-size:13px !important;}
	.wrapper{padding-bottom:50px;}

	.mainTitle{font-size:40px;}
	.subTitle{font-size:16px;}

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

	/*footer*/
	footer>div{padding-bottom:20px;}
	
	.footerTxt 
	{
		float:none; 
		width: 100%;
		padding-left: 150px;
		padding-right: 100px;
	
	}

  .footerNav
  {
		float:none; 
		width: 100%;
		padding-left: 150px;
		padding-right: 100px;
	
	}
	
	.footerTxt {text-align:center; margin-bottom:40px; padding: inherit;}
	.footerTxt p,.socialNav{margin-left:0;}
	.socialNav{position: absolute; left: 50%; transform: translate(-50%,0%);}
	footer .container {padding: 30px 10px;}
	
	
	.footerNav li{width:48%;margin-bottom:30px; padding-right: 4%; padding-left: 4%;}
	.footerNav li a{margin-bottom:.2em}
	.footerNav .inlineBlock li{  width: 50%; /*text-align: center;*/}
	
	
	/*kv*/
	.mainKv{margin-bottom:20px;background-size:cover;height:150px;}
	.mainKv h2{font-size:40px}
	.mainKv h3{font-size:15px;}

	/*enews*/
	.eNews-form dd{width:60px;}
	.eNews-form dd a{font-size:20px;}
	
	.onlineService{width:80px;bottom:45px;right:10px}
	.onlineService.active{bottom: 45px;right:10px}

}


@media (max-width: 480px){
.footerTxt{
    float: none;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}


.footerNav {
    float: none;
    width: 100%;
    padding-left: 50px;
    padding-right: 0px;
}


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

}
*/

/*IPHONE SE*/