@charset "utf-8";

/*top輪播修改--------------*/
ul,ol{margin:0px;padding-left:unset;}
img{width:100%; height:auto;}
.slide .x img{
	width:100%;
	height:auto;
	}
.eadit {
    margin-bottom: 0px;
}
#bannerpart {
	margin-top: 5px;
	/*margin-top: 1em;*/
	margin-bottom: 1em;
	overflow: hidden;
	position:relative;
}
.slide .x {
	float: left;
}
button.slick-arrow {
	width: 50px;
	height: 50px;
	background-color: #fff;
	border: none;
	position: absolute;
	top: calc(50% - 20px);
	z-index: 200;
	font-size: 0;
	border-radius: 25px;
	background-image: url(../img/arrow.png);
	right: 0;
	background-repeat: no-repeat;
	background-position: 85% center;
	box-shadow:0 3px 3px rgba(0,0,0,0.5);
}

button.slick-next {
	right:-25px;
	transform:scaleX(-1);
}
button.slick-prev {
	left:-25px;
	
}
ul.slick-dots{

    transform: translateX(-50%);
    /* position: absolute; */
    /* left: 50%; */
    margin-left: 50%;
	padding:0px;
    display: flex!important;
    position: absolute;
    bottom: 0;

}
ul.slick-dots li {
    list-style: none;
	float:left;
}
ul.slick-dots li button{
    border-radius: 6px;
    width: 12px;
    height: 12px;
    background-color: #CCC;
    border: none;
    font-size: 0;
    margin: 10px;
	border:solid 2px #CCC;
	padding: 0;
}
ul.slick-dots li.slick-active button{
	background-color: transparent;
	border: 2px solid #288A66;
	}
	
.maintag{
	width:100%;
	height:auto;
	display:table;
	background-repeat:no-repeat;
	background-size:cover;
	background-image:url(../img/tag_bg.jpg);
	}
.maintag.fix{
	position:fixed;
	top:0;
	z-index:80;
	left:0;
	}
	@media (max-width:999px){
		
		.maintag.fix {
    top: 50px;
}
		}
.maintag .sq ul {
	height: auto;
	width: 100%;
	margin-top: 15px;
	list-style-type: none;
	padding: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.maintag .sq ul li {
	float: left;
	width: 20%;
}
.maintag .sq ul li a {
	background-color: #fffed5;
	display: block;
	padding: 10px;
	margin-right: 5px;
	margin-left: 5px;
	text-align: center;
	color:#666;
	font-weight:bold;
	font-size:24px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
    box-shadow: 3px -3px 5px rgba(0,0,0,0.2);
	cursor:pointer;

}

.maintag .sq ul li.stay a {
	background-color: #086eb3;
	position: relative;
	color: #FF9;
	background-image: url(../img/stay_bt_bg.png);
	background-repeat: no-repeat;
	background-position: center 3px;
	background-size:80% auto;
	
}
@media (max-width:575px){
	.maintag .sq ul li a {
	font-size:18px;
    display: block;
    padding: 8px 10px;
    margin-right: 2px;
    margin-left: 2px;
    line-height: 120%;

}
	.maintag .sq ul li.stay a {
	background-image: url(../img/stay_bt_bg2.png);
}
		
}
@media (max-width:325px){
	.maintag .sq ul li a {
	padding: 5px;;
}
		
}
.maintag .sq ul li.stay a:before {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #086eb3 transparent transparent transparent;
content:"";
left:calc(50% - 5px);
top:100%;
position:absolute;
}


#pagearea {
	background-color: #FFFED5;
}


#pagearea .sq .page {
	padding-top: 20px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:absolute;
	z-index:-10;
	bottom:100%;
}

#pagearea .sq .page.stay {
	position:relative;
	z-index:1;
	bottom:unset;
}




#pagearea .sq .page h3 {
	font-size: 32px;
	line-height: 40px;
	color: #333;
	text-align: center;
	position:relative;
	text-decoration: underline;
text-decoration-color: #1ec0ff;
}

@media (max-width:575px){
	
#pagearea .sq .page h3 {
    font-size: 24px;
    line-height: 24px;
    /*padding-bottom: 5px;*/
}
}
/*#pagearea .sq .page h3::before {
	width:5em;
	height:2px;
	background-color:#1ec0ff;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	content:"";
	display:block;
	position:absolute;
}*/
.lit_page_area {
	height: auto;
	width: 100%;
	margin-bottom:20px;
}




.lit_page_area .lit_tag {
	height: auto;
	width: 100%;
}
.lit_page_area .lit_tag ul {
    display: table;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.lit_page_area .lit_tag ul li {
	font-size: 18px;
	height: 80px;
	line-height: 150%;
	background-repeat: repeat-x;
	background-position: center;
	list-style-type: none;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	background-size:auto 100%;
	    position: relative;
    overflow: hidden;
}
.lit_page_area .lit_tag ul li:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    background-color: #dbd7b1;
    top: 0;
    z-index: 0;
}
.lit_page_area .lit_tag ul li.stay:before {
	display:none;
}
.lit_page_area .lit_tag ul li a {
padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
    /* display: inline-grid; */
    display: flex;
	color:#333;
    align-items: center;
	cursor:pointer;
height: 100%;
position:relative;
z-index:1;
}





.lit_page_area .lit_tag ul li.stay a {
	font-size: 22px;
	font-weight:bold;
	color:#fff;
	
}


.lit_page_area .lit_tag ul li a img {
	display:inline-block;
	height: 80px;
    width: auto;
}
.lit_page_area .lit_tag ul li a span {
	display:inline-block;
}
@media (max-width:575px){
	

.lit_page_area .lit_tag ul li.stay a {
	font-size: 14px;
	margin-bottom: 10px;
	
}
	
	
	
.lit_page_area .lit_tag ul li {
	font-size: 14px;
	margin-right: 3px;
    margin-left: 3px;
}
.lit_page_area .lit_tag ul li a {
padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
	text-align:center;
	
}
	
.lit_page_area .lit_tag ul li a img {
	display:none;
}		

}

.lit_page_area .lit_page .pp {
	background-color: #FFF;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:none;
}
@media (max-width:575px){
.lit_page_area .lit_page .pp {
	padding: 10px;
}	
}



.lit_page_area .lit_page .pp.stay {
	display:block;
}
.lit_page_area .lit_page .pp .video {
	padding-top: 65%;
	width: 100%;
	position:relative;
}
.lit_page_area .lit_page .pp img {
	width:100%;
	height:auto;
}

.lit_page_area .lit_page .pp .video iframe {
	height:100%;
	width: 100%;
	position:absolute;
	top:0;
	left:0;
}
.lit_page_area .lit_page .pp  .linkbut{
	margin-left: auto;
	margin-right: auto;
	display: table;
	background-color: #FC8F30;
	border-radius: 20px;
	margin-top: 1em;
	min-width: 120px;
	text-align: center;
	background-image: url(../img/o_tag_bg.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	background-size:auto 100%;
	color:#fff;
	font-weight:bold;
	
}
.lit_page_area .lit_page .pp .linkbut a {
    display: flex!important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap!important;
}
.lit_page_area .lit_page .pp .linkbut a img{
	width:30px;
	display:inline-block;
}
.lit_page_area .lit_page .pp  .linkbut span{
	margin-left: auto;
	margin-right: auto;
	display: table;
	background-color: #FC8F30;
	border-radius: 20px;
	margin-top: 1em;
	min-width: 120px;
	text-align: center;
	background-image: url(../yoyo/images/o_tag_bg.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	background-size:auto 100%;
	color:#fff;
	font-weight:bold;
}
.lit_page_area .lit_page .pp  .linkbut a{
	padding:5px 20px;
	color:#fff;
	font-size:18px;
	display:block;
	border-radius:50%;	
	}
	
/*三個影片並排*/	

.threepic,.twopic,.onepic,.fourpic{
    display: flex;
    justify-content: center;
    align-items: stretch;
	margin-bottom:1em;
	flex-wrap:wrap;
}

.threepic .one{
	width:30.33333%;
	margin-left:1.5%;
	margin-right:1.5%;
	margin-bottom:0.5em;
}

/*四個影片並排*/	
.fourpic .one{
	width:22%;
	margin-left:1.5%;
	margin-right:1.5%;
	margin-bottom:0.5em;
}

/*兩個影片並排*/	
.twopic .one{
	width:47%;
	margin-left:1.5%;
	margin-right:1.5%;
	margin-bottom:0.5em;
}


/*一個影片並排*/	
.onepic .one{
	width:97%;
	margin-left:1.5%;
	margin-right:1.5%;
	margin-bottom:0.5em;
}



.threepic .one .picp,.twopic .one .picp,.onepic .one .picp,.fourpic .one .picp{
	width: 100%;
	margin-bottom: 15px;

}



.threepic .one .picp img,.twopic .one .picp img,.onepic .one .picp img,.fourpic .one .picp img{
	width:100%;
	height:auto;
	border-radius: 15px;
	border: 5px solid #FFF07C;
}

.threepic .one .text,.twopic .one .text,.onepic .one .text,.fourpic .one .text{
	font-size:14px;
	line-height:150%;
}

.threepic .one .text h4,.twopic .one .text h4,.onepic .one .text h4,.fourpic .one .text h4{
	color: #55B5DD;
	margin: 10px 0px;
	font-size:18px;
}
.threepic .one .text h4.center,.twopic .one .text h4.center,.onepic .one .text h4.center,.fourpic .one .text h4.center{
text-align:center;
}





@media (max-width:767px){
	.threepic .one ,.twopic .one,.fourpic .one{
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;

}
	
	.threepic .one ,.twopic .one,.fourpic .one{
    width: 100%;
    margin-left: 1%;
    margin-right: 1%;

}
	
.threepic .one .picp,.twopic .one .picp,.onepic .one .picp,.fourpic .one .picp{
	width: 80%;
	margin: 0 10%;

}
	
	}

@media (max-width:575px){
	.threepic .one,.twopic .one,.onepic .one ,.fourpic .one{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
	}

#twoad {
	background-color: #8be2ff;
	width: 100%;
}
#twoad .sq {
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	    justify-content: center;
    align-items: stretch;
}
#twoad .sq .ad1 {
	float: left;
	width: 60%;
	margin-right: 2%;
}

#twoad .sq .ad2 {
	width: 38%;
	float: left;
	margin-top: 1em;
	margin-bottom: 1em;
}
@media (max-width:767px){
	#twoad .sq {
		display:block;
}
	
#twoad .sq .ad1 {
	float: none;
	width: 96%;
	margin:10px 2%;
	
}
#twoad .sq .ad2 {
	float:none;
	width: 96%;
	margin:10px 2%;
	
}	
	
}
#slide2 .x {
	float: left;
}

#slide2{
	overflow:hidden;
	position:relative;
}
#slide2 ul.slick-dots {
    bottom: 0px;
    z-index: 5;
}


/*---------頁籤(QA)----------*/

#mz{
	margin-top:1em;
	margin-bottom:1em;
	}

.mz_tab_box{
	max-width:1300px;
	width:95%;
	margin:0 auto;
	position:relative;
}
.mz_tab_btn{
	list-style:none;
	display:flex;
	align-items:flex-end;
	align-content:flex-end;
	flex-wrap: wrap;
}
.mz_tab_btn div{ 
	display:inline-block;
	vertical-align:top;
	margin:0 10px 0px 0px;	
	background-color: #4bbae6;
    border-radius: 0 15px 0 0;
    height: 60px;
    line-height: 60px;
    border-bottom: 4px #137bcd solid;
	font-size:24px;
	font-weight:bold;
	padding:0 30px;
	list-style:none; 
	box-sizing:border-box;
	cursor: pointer;
	width:auto;
	text-align:center;
}
@media (max-width:820px){
	.mz_tab_btn div{ 
    height: 40px;
    line-height: 40px;
	font-size:16px;
	font-weight:bold;
	padding:0 20px;
}
	}
@media (max-width: 575px){
.mz_tab_btn div {
    height: 50px;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 5px;
    width: calc(25% - 10px);
    display: flex;
    align-items: center;
	box-sizing:border-box;
}	
}
	
.mz_tab_btn a{ 
	color:#000; 
	text-decoration:none;
}
.mz_tab_btn div:hover{
    background-color: #8be2ff;
    border-bottom: 4px #4bbae6 solid;
}
.mz_tab_btn div.active {
background-color: #8be2ff;
    border-bottom: 4px #147bce solid;
}
.mz_tab_btn div.active > a{
	color:#FFF;	
}
.mz_tab_content{
	width:100%;
	border: 10px #8be2ff solid;
	box-sizing:border-box;
	font-size:20px;
	line-height:26px;
}
.mz_tab_content ul{
	border-bottom: 3px #d9f6ff solid;
	padding:10px;
}
.mz_tab_content ul li{
	list-style:none;
	display:flex;
}
.mz_tab_content ul:nth-last-child(1){
	border-bottom:none;
}
.mz_tab_content ul li:nth-last-child(1){
	margin-bottom:0px;
}
.mz_tab_content ul li:nth-child(1){
	font-weight:bold;
	font-size:1.2em;
	cursor: pointer;
}
@media (max-width:575px){
	.mz_tab_content ul li:nth-child(1){
	font-size:0.8em;
	}
	.mz_tab_content ul li:nth-last-child(1){
	font-size:0.8em;
}
	}
.mz_tab_content ul li:nth-child(1):hover{
	background-color: #e0fbff;
}
.mz_iconQ ,
.mz_iconA{
	width:52px;
	height:52px;
	min-width:52px;
	max-width:52px;
	margin-right:10px;
	background-color:#CCCCCC;;
	position:relative;
	font-size:40px;
	line-height:46px;
	font-weight:600;
	color:#FFF;
	text-align:center;
	font-family:"Microsoft JhengHei","Arial","Heiti TC", "sans-serif",Palatino, serif,"Book Antiqua","Palatino Linotype","Helvetica","Palatino Palatino" ;
}
.mz_iconA{
	margin-top:10px;
	background-color:#FF9999;
}

@media (max-width:575px){
	.mz_iconQ, .mz_iconA{
	    width: 20px;
    height: 35px;
    min-width: 35px;
    max-width: 30px;
    margin-right: 10px;
    position: relative;
    font-size: 20px;
    line-height: 30px;
	
}
	}
.mz_tab_content table{
	border:2px solid #000;
	border-collapse:collapse;
	margin-top:5px;
}
.mz_tab_content table td{
	border:1px solid #000;
	padding:6px;	
	vertical-align:text-top;
	font-size:.9em;
	line-height:1.2em;
}
.mz_tab_content table tr:nth-child(1) td{
	background-color:#E6E6E6;
	text-align:center;
	font-size:1em;
	padding:10px;
}
.mz_tab_content_txt{
	padding-top:8px;
	box-flex:1;
	width:auto;
}
.mz_tab_content_img{
	text-align:center;
	margin:20px auto 0;
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
#qa2_img img{
	max-width:168px;
	width:28%;
	margin:5px 2%;
}
#mz_tb1 td{
	text-align:center;
	vertical-align:middle;	
}
.plus {
	position: relative;
	display:table;
}


.plus:hover:before {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url(../img/plus.png);
	opacity:0.5;
	background-position:center center;
	background-size:40% auto;
	content:"";
	background-repeat:no-repeat;
	z-index:10;
	pointer-events:none;
	display:block;
	
}
.threepic .one .picp .video,.twopic .one .picp .video ,.onepic .one .picp .video {
	width: 100%;
	padding-top: 65%;
	position: relative;
}
.threepic .one .picp .video iframe,.twopic .one .picp .video iframe,.onepic .one .picp .video iframe {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}
.subscribe {
display:flex;
align-items:center;
	justify-content: center;
}

.subscribe img {
	height: auto;
	width: 40px;
	margin-right:5px
}
.eadit #mz .sq h3 {
    font-size: 32px;
    line-height: 50px;
    color: #333;
    text-align: center;
    position: relative;
	display:flex;
	align-items:center;
	justify-content:center;
}

.eadit #mz .sq h3 img{
	max-width:50px;
	height:auto;
}
@media (max-width: 575px){
.eadit #mz .sq h3{
    font-size: 24px;
    line-height: 30px;
    padding-bottom: 10px;
}
.eadit #mz .sq h3 img{
	max-width:35px;
	height:auto;
}
}
#commnity {
	width:90%;
	margin-left:5%;
	margin-right:5%;
	margin-top:1em;
	margin-bottom:1em;
}
#commnity .sq {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#commnity .sq >div>a {
    display: flex;
   justify-content: flex-start;
    align-items: center;
	font-size:16px;	color:#333;
}

#commnity .sq >div>a img {
width:60px;
height:auto;
}

@media (max-width: 575px){
#commnity .sq {
    display:block;
}
#commnity .sq >div{
	width:100%;
	margin-left:0%;
	margin-right:0%;
}	
	
#commnity .sq >div>a {
	font-size:14px;

}

#commnity .sq >div>a img {
width:45px;
height:auto;
margin-right:10px;
}
}
#slideopen .oneqa {
	background-color: #FFF;
	margin-bottom:1em;
}
#slideopen .oneqa .q {
	background-image: url(../img/dMenu_open.png);
	background-size:auto 18px;
	background-repeat: no-repeat;
	background-position: right center;
	display: flex;
	justify-content: flex-start;
    align-items: center;
	padding:10px;
	cursor:pointer;
	font-weight: bold;
    color: #CC6600;
}
#slideopen .oneqa .q:hover {
	background-color: #fdf1bb;
}
#slideopen .oneqa .q.stay {
	background-image: url(../img/dMenu_close.png);
}
#slideopen img {
	height: unset;
	width: unset;
	max-width:100%;
	
}


#slideopen .oneqa .a {
	padding: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: none;
	font-size: 16px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #F0F0F0;
	border-right-color: #F0F0F0;
	border-bottom-color: #F0F0F0;
	border-left-color: #F0F0F0;
}
@media (max-width: 575px){
	
	#slideopen .oneqa .a {
	font-size:14px;
}
	}









.lit_page_area .lit_tag ul li a {
	text-align:center
}

	
@media (min-width: 768px){

.lit_page_area .lit_tag ul li a span {
    display: contents;
    white-space: nowrap;
}
.maintag .sq ul li a span{
	white-space:normal;
	}
}
@media (max-width: 880px){
.lit_page_area .lit_tag ul li a {
    padding-right: 15px;
    padding-left: 15px;
}

}
@media (max-width: 767px){	
.maintag .sq ul li span {
    display: block;
}
.lit_page_area .lit_tag ul li a {
    padding-right: 8px;
    padding-left: 8px;
}
.lit_page_area .lit_tag ul li a span {
    display: contents;
    white-space: nowrap;
}
.maintag .sq ul li a span{
	white-space: nowrap;
	}
}
@media (max-width: 575px){
.lit_page_area .lit_tag ul li a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 120%;
}
.lit_page_area .lit_tag ul li a span {
    display: contents;
      white-space: nowrap;
}
}




@media (max-width: 767px){	
.lit_page_area .lit_tag ul li{
    height: 55px;
}
}
	




:target::before {
  content: "";
  display: block;
  height: 150px; /* fixed header height*/
  margin: -150px 0 0; /* negative fixed header height */
}




#pagearea .sq .page h4 {
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 5px;
	color: #4267b2;
	text-align:center;
}




@media (max-width: 575px){
.mz_tab_btn div {
    width: 50%;
    margin: 0px;
    border-radius: 0px;
    border-right: solid 1px #fff;
	    display: flex;
    justify-content: center;
    
}
.mz_tab_btn div span {
	color:#fff;
    
}
.mz_tab_btn div span {
	color:#fff;
    
}
.mz_tab_btn div.active span {
    color: #000!important;
}
}



@media (max-width: 1000px){
.up{
	margin-top: 40px;
	
}	
}