@charset "utf-8";
/* CSS Document */
*{ padding:0; margin:0; font-family:Arial, "微軟正黑體", "新細明體"; font-size:16px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
a{ text-decoration:none; }

.sr-only { position: absolute; width: 0.063rem; height: 0.063rem; padding: 0; margin: -0.063rem; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; z-index:1000; }
.sr-only-focusable:active, .sr-only-focusable:focus { width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

.header{ background:#fff; width:100%; }
.header .onebar{ position:relative; max-width:1390px; margin:auto; padding:0 15px; display:flex; }
.header .onebar .logos{ display:block; width:330px; }
.header .onebar .logos img{ width:100%; }
.header .onebar .rightbox{ flex:1; padding:0 0 0 15px; }
.header .onebar .funlink{ display:flex; justify-content:flex-end; align-items:center; padding:34px 0 14px 0; }
.header .onebar .funlink .grids{ display:block; width:52px; height:52px; margin-left:10px; background-repeat:no-repeat; background-size:100%; font-size:0; }
.header .onebar .funlink .txts{ font-size:18px; color:#20ac9b; padding:0 5px 0 0; }
.header .onebar .gbox{ display:flex; align-items:center; }
.header .onebar .gbox .keyword{ flex:1; display:flex; justify-content:flex-end; padding-right:5px; }
/*.header .onebar .gbox .keyword .title{ color:#20ac9b; font-size:24px; }
.header .onebar .gbox .keyword .words{ color:#000; font-size:24px; padding:0 10px; }*/
.header .onebar .gbox .keyword .title{ color:#20ac9b; font-size:1.2em; }
.header .onebar .gbox .keyword .words{ color:#000; font-size:1.2em; padding:0 10px; }
.header .onebar .gbox .searchbox{ width:230px; }
.header .onebar .gbox .searchbox .search_btn{ display:none; }
.header .onebar .gbox .searchbox .redinput{ border:1px solid #eb6877; margin-right:28px; height:52px; position:relative; }
.header .onebar .gbox .searchbox .redinput label{ display:none; }
.header .onebar .gbox .searchbox .redinput .inputs{ background:#fff; border:none; padding:5px; line-height:50px; height:50px; width:100%; font-size:24px; }
.header .onebar .gbox .searchbox .redinput .btns{ font-size:0px; position:absolute; top:-1px; right:-28px; width:52px; height:52px; background:none; background-image:url(../img/layout/search.svg); cursor:pointer; border:none; }

.header .twobar{ position:relative; background:#f7e057; }
.header .twobar .mar{ max-width:1390px; margin:auto; padding:0 15px; display:flex; justify-content:space-between; position:relative; z-index:100; }
.header .twobar .mar .guide{ position:absolute; top:0; left:0; }
/*.header .twobar .mar .grids .alink{ display:block; padding:0 15px; font-size:26px; color:#000; line-height:82px; }*/
.header .twobar .mar .grids .alink{ display:block; padding:0 15px; font-size:20px; color:#000; line-height:82px; }
.header .twobar .mar .grids .du{ display:none; position:absolute; left:0; right:0; top:82px; margin:auto; background:#fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding:20px; }
.header .twobar .mar .grids .du .flex{ display:flex; width:100%; }
.header .twobar .mar .grids .du .flex .imgrids{ width:33%; }
/* 無障礙修正 v210621*/
.header .twobar .mar .grids .du .flex .imgrids .imgs{ width:100%; display:block; position: relative; overflow: hidden; display: block; padding-bottom: 70%; }
.header .twobar .mar .grids .du .flex .imgrids .imgs img{ width:100%; position: absolute; top: 0; left: 0; }
.header .twobar .mar .grids .du .flex .imgrids .imgs .ititle {
	padding: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
}
/*.header .twobar .mar .grids .du .flex .imgrids .imgs{ width:100%; display:block; position: relative; overflow: hidden; display: block; padding-bottom: 60%; }
.header .twobar .mar .grids .du .flex .imgrids .imgs img{ width:100%; position: absolute; top: 0; left: 0; }
.header .twobar .mar .grids .du .flex .imgrids .ititle{ padding:10px 0 0 0; font-size:20px; font-weight:bold; color:#000; display: block; }*/
.header .twobar .mar .grids .du .flex .textgrids{ width:67%; display:flex; flex-wrap:wrap; align-content: flex-start; }
.header .twobar .mar .grids .du .flex .textgrids .listTxt{ padding:0 0 20px 20px; width:50%; }
.header .twobar .mar .grids .du .flex .textgrids .listTxt a{ display:block; padding:3px 0 0 24px; position:relative; font-size:20px; color:#000; }
.header .twobar .mar .grids .du .flex .textgrids .listTxt a:before{ content:""; display:block; width:12px; height:12px; background:#f57fba; position:absolute; left:0; top:11px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }

/* 需求調整 v210416 */
/*.header .twobar .mar .grids .du .flex .imgrids { display: flex; flex-direction: column; }
.header .twobar .mar .grids .du .flex .imgrids .imgs { position: relative; overflow: hidden; flex: 1; }
.header .twobar .mar .grids .du .flex .imgrids .imgs:first-child img { position: absolute; }*/



.header .twobar .sh_boxs{ display:none; }

.footer{ background:#20ac9b; padding:15px 0 40px 0; }
.footer .mar{ max-width:1390px; margin:auto; padding:0 15px; }
.footer .mar .fun01{ display:flex; justify-content:space-between; align-items:center; }
.footer .mar .fun01 .flogo{ width:447px; display:block; }
.footer .mar .fun01 .flogo img{ width:100%; }
.footer .mar .fun01 .rightbox{ flex:1; display:flex; justify-content:flex-end; }
.footer .mar .fun01 .rightbox .fbbox{ width:340px; }
.footer .mar .fun01 .rightbox .qrcode{ margin-right:10px; }
.footer .mar .fun01 .rightbox .qrcode img{ width:100%; }

.footer .mar .fun02{ padding:25px 0; font-size:0; }
.footer .mar .fun02 .links{ display:inline-block; vertical-align:middle; color:#fff; font-size:22px; padding-right:15px; margin-right:15px; margin-bottom:10px; position:relative; }
.footer .mar .fun02 .links:after{ content:""; display:block; position:absolute; top:3px; right:0; width:2px; background:#fff; height:26px; }
.footer .mar .fun02 .guide{ display:inline-block; vertical-align:top; color:#fff; font-size:16px; padding-right:10px; }
.footer .mar .txtbox{ font-size:16px; color:#fff; line-height:1.6; }

.topbtn{ position:fixed; bottom:15px; right:15px; display:block; width:70px; height:70px; background-image:url(../img/layout/topbtn.png); background-repeat:no-repeat; background-size:100%; background-position:center; font-size:0; z-index:100; }

.slick_box a.osbg:focus .mask { margin: 3px; outline: -webkit-focus-ring-color auto 1px; }
.adgrids_slick .slick_grids a:focus img { padding: 3px; outline: -webkit-focus-ring-color auto 1px; }

.adgrids { position: relative; }
.adgrids_dots { position: absolute; z-index: 1; bottom: 15px; left: 12px; right: 0; text-align: center; }
.adgrids_dots .adots { background: #b6b4b5; display: inline-block; font-size: 0; height: 20px; width: 20px; border-radius: 10px;  margin: 2px;}
.adgrids_dots .adots:nth-child(1) { margin: 2px; }
.adgrids_dots .adots.active { background: #23ac9a; }

/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/

@media screen and (min-width:1391px){
	.header .twobar .mar .grids:hover .du,
	.header .twobar .mar .grids.pc_grid .du{ display:block; }

	.header { margin-bottom: 82px; }
	.header .twobar { position: absolute; z-index: 98; bottom: unset; left: 0; right: 0; }
	body.menu_lock .header .twobar { position: fixed; top: 0; bottom: unset; }
	
	.header .twobar .mar .grids .alink:hover{ background:#23ad9d; color:#fff; }
	
	.header .onebar .gbox .keyword .words:hover{ color:#20ac9b; }
	.header .onebar .funlink .txts:hover{ text-decoration:underline; }
	
	.footer .mar .fun02 .links:hover{ text-decoration:underline; }
	
	/* 無障礙修正 v210623*/
	.header .onebar .menu_btn { display: none; }
	
}

@media screen and (min-width:1024px){  }

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1390px){
body { margin-top: 100px; }

.header { position: fixed; z-index: 99; top: 0; left: 0; }
.header .onebar{ justify-content:space-between; align-items:center; }
.header .onebar .menu_btn{ display:flex; width:74px; height:52px;  background:#f3f5f7; justify-content:center; align-content:center; flex-direction:column; cursor:pointer; }
.header .onebar .menu_btn span{ width:30px; height:2px; background:#000; display:block; margin:7px auto; }
.header .onebar .menu_btn:before{ content:""; display:block; width:30px; height:2px; background:#000; margin:0 auto; }
.header .onebar .menu_btn:after{ content:""; display:block; width:30px; height:2px; background:#000; margin:0 auto; }
.header .onebar .funlink{ display:none; }
.header .onebar .logos{ margin:auto; width: 165px; }
.header .onebar .rightbox{ width:52px; padding:0; flex:0; }
.header .onebar .gbox .keyword{ display:none; }
.header .onebar .gbox .searchbox{ width:auto; }
.header .onebar .gbox .searchbox .search_btn{ display:block; width:52px; height:52px; background-image:url(../img/layout/search.svg); cursor:pointer; }
.header .onebar .gbox .searchbox .redinput{ display:none; position: absolute; right: 10px; left: 10px; top: 110px; z-index: 100; }

body.mb_search .header .onebar .gbox .searchbox .search_btn { background-image:url(../img/layout/close.svg); }
body.mb_search .header .onebar .gbox .searchbox .redinput { display: block; }

.header .twobar{ display:none; background: #fff; position: fixed; top: 99px; left: 0px; right: 0px; z-index: 100; bottom: 0px; overflow: auto; }
.header .twobar .mar{ padding:0; display:block; }
.header .twobar .mar .grids{ border-bottom:1px solid #000; }
.header .twobar .mar .grids .alink{ line-height:66px; padding:0 25px; }
.header .twobar .mar .grids .alink.arrow:after{ content:""; display:inline-block; vertical-align:middle; border-width:8px 5px 0 5px; border-style:solid; border-color:#20ac9b transparent transparent transparent; margin: 0 0 0 8px; }
.header .twobar .mar .grids .du{ position: static; box-shadow:none; }
.header .twobar .mar .grids .du .flex{ display:block; }
.header .twobar .mar .grids .du .flex .imgrids{ margin:auto; width:50%; }
.header .twobar .mar .grids .du .flex .textgrids{ width:100%; padding:25px 0 0 0; }
.header .twobar .mar .grids .du .flex .textgrids .listTxt{ padding:0 5px 10px 5px; }
.header .twobar .sh_boxs{ display:block; text-align:center; padding:40px 0; }
.header .twobar .sh_boxs .sh_grids{ width:52px; height:52px; background-repeat:no-repeat; background-size:100%; display: inline-block; vertical-align:middle; margin:0 3px; font-size:0; }
	
body.mb_menu .header .twobar { display: block; }
body.mb_menu .header .twobar .mar .grids.mb_grids .du { display: block; }

.footer .mar .fun01{ justify-content:center; flex-direction:column; }
.footer .mar .fun01 .flogo{ margin:0 0 15px 0; }
.footer .mar .txtbox{ text-align:center; }
}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
body { margin-top: 53px; }

.header { position: fixed; z-index: 99; top: 0; left: 0; }
.header .onebar{ justify-content: space-between; align-items: center; }
.header .onebar .menu_btn{ display:flex; width:37px; height:26px; background:#f3f5f7; justify-content:center; align-content:center; flex-direction:column; cursor:pointer; }
.header .onebar .menu_btn span{ width:15px; height:1px; background:#000; display:block; margin:3px auto; }
.header .onebar .menu_btn:before{ content:""; display:block; width:15px; height:1px; background:#000; margin:0 auto; }
.header .onebar .menu_btn:after{ content:""; display:block; width:15px; height:1px; background:#000; margin:0 auto; }
.header .onebar .funlink{ display:none; }
.header .onebar .logos{ margin:auto; width:82px; }
.header .onebar .rightbox{ flex:0; }
.header .onebar .gbox .keyword{ display:none; }
.header .onebar .gbox .searchbox{ width:auto; }
.header .onebar .gbox .searchbox .search_btn{ display:block; width:26px; height:26px; background-image:url(../img/layout/search.svg); cursor:pointer; }
.header .onebar .gbox .searchbox .redinput{ display:none; position: absolute; right: 10px; left: 10px; top:60px; z-index: 100; height:26px; margin-right: 14px; }
.header .onebar .gbox .searchbox .redinput .inputs{ height:24px; }
.header .onebar .gbox .searchbox .redinput .btns{ width:26px; height:26px; right: -14px; }

body.mb_search .header .onebar .gbox .searchbox .search_btn { background-image:url(../img/layout/close.svg); }
body.mb_search .header .onebar .gbox .searchbox .redinput { display: block; }

.header .twobar{ display:none; background: #fff; position: fixed; top:51px; left: 0px; right: 0px; z-index: 100; bottom: 0px; overflow: auto; }
.header .twobar .mar{ padding:0; display:block; }
.header .twobar .mar .grids{ border-bottom:1px solid #000; }
.header .twobar .mar .grids .alink{ line-height:46px; padding:0 15px; font-size:18px; }
.header .twobar .mar .grids .alink.arrow:after{ content:""; display:inline-block; vertical-align:middle; border-width:8px 5px 0 5px; border-style:solid; border-color:#20ac9b transparent transparent transparent; margin: 0 0 0 8px; }
.header .twobar .mar .grids .du{ position: static; box-shadow:none; padding:15px; }
.header .twobar .mar .grids .du .flex{ display:block; }
.header .twobar .mar .grids .du .flex .imgrids{ margin:auto; width:90%; }
.header .twobar .mar .grids .du .flex .imgrids .ititle{ display:block; padding:3px 0 0 0; font-size: 18px; }
.header .twobar .mar .grids .du .flex .textgrids{ width:100%; padding:25px 0 0 0; }
.header .twobar .mar .grids .du .flex .textgrids .listTxt{ padding:0 0 10px 0; width:100%; }
.header .twobar .mar .grids .du .flex .textgrids .listTxt a{ font-size:15px; padding: 3px 0 0 18px; }
.header .twobar .mar .grids .du .flex .textgrids .listTxt a:before{ width:8px; height:8px; top:10px; }
.header .twobar .sh_boxs{ display:block; text-align:center; padding:20px 0; }
.header .twobar .sh_boxs .sh_grids{ width:52px; height:52px; background-repeat:no-repeat; background-size:100%; display: inline-block; vertical-align:middle; margin:0 3px; font-size:0; }
	
body.mb_menu .header .twobar { display: block; }
body.mb_menu .header .twobar .mar .grids.mb_grids .du { display: block; }
	
.footer{ padding: 15px 0 80px 0; }	
.footer .mar .fun01{ display:block; }
.footer .mar .fun01 .flogo{ margin:0 auto 15px auto; max-width:320px; width:100%; }
.footer .mar .fun01 .rightbox{ display:block; text-align:center; }
.footer .mar .fun01 .rightbox .qrcode{ display:inline-block; vertical-align:middle; margin:0 5px; }
.footer .mar .fun01 .rightbox .fbbox{ width:100%; max-width:340px; margin:auto; padding:10px 0 0 0; }
.footer .mar .txtbox{ text-align:center; font-size:14px; }

.footer .mar .fun02 .links{ font-size:14px; padding-right:10px; margin-right:10px; }
.footer .mar .fun02 .links:after{ height:16px; width:1px; }

.fb-comments, .fb-comments iframe[style] {
	width: 100% !important;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	width: 100% !important;
}

.topbtn{ width:40px; height:40px; }
#float_ad_pic{ width:50px; height:50px; }

}