@charset "utf-8";
.innerWrap .topView {
	display: flex;
    /*height: 40vh;*/
    height: 242px;
    justify-content: center;
    align-items: center;
}
.mt-0{
    margin-top: 0em !important;
}
.innerBottom{
	width:100%;
	padding:1em 1em;
	margin:2em 0 4em 0;
	border-radius:.5em;
	background:#027480;
	color:#fff;
	text-align:left;
}
.IB-btn{
	color:#fff !important;
}
.IB-btn:hover, .innerBottom .IB-btn:focus{
	font-style:italic;
    color: #98fffc;
}
.IB-btn span{
	display:inline-block;
	vertical-align:text-bottom;
	width: 30px;
	height: 1px;
	border-bottom: 1px solid #fff;
	transition: width ease-out .3s;
	position:relative;
	margin-bottom:5px;
	margin-right:5px;
}
.IB-btn span:before {
    content: ' ';
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 5px solid #fff;
    border-left: 5px solid transparent;
    position: absolute;
    left: 0;
    bottom: 0;
}
.IB-btn:hover span, .innerBottom .IB-btn:focus span{
	width: 20px;
	border-bottom: 1px solid #98fffc;
}
.IB-btn:hover span:before, .IB-btn:focus span:before {
    border-bottom: 5px solid #98fffc;
}
a.btnLink {
  color: #fff;
  background: #228474;
  border-color: #1e8474;
  padding: 0.3em 1em;
  border-radius: 30px;
  transition: all 0.3s ease;
}

a.btnLink:hover {
  opacity: 0.9; /* 透明度降低，看起來更淡 */
}
/*--- 內容搜尋區塊樣式 ---*/
.innerSearchBox {
	width:90%;
    margin: 1em auto;
    padding: 1em;
    border-radius: .5em;
    text-align: left;
    background: #f3f3f3;
	position:relative;
}
.SbtnWrap {
    float: right;
    position: absolute;
    top: 40%;
    right: 2em;
}
.innerSearchBox .note{
	text-align: left;
    font-size: .9em;
    font-weight: 100;
    margin-bottom: .5em;
}
.innerSearchBox .dateWrap{
	display:inline-block;
}
.innerSearchBox ul {
    display: block;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
}
.innerSearchBox ul li{
	list-style: none;
    text-align: left;
    margin: 0 auto;
    display: inline-block;
    width: 24%;
    vertical-align: top;
}
.innerSearchBox ul li.fullLine{
    width: 100%;
}
.innerSearchBox label{
	width: auto;
    text-align: left;
    display: inline-block;
}
.innerSearchBox input[type="text" i], .innerSearchBox select {
    padding: .25em .5em;
    vertical-align: middle;
    width: auto;
}
.innerSearchBox input[type="text" i].form-control{
	width:100%;
	box-sizing: border-box;
}
.innerSearchBox select{
	width:auto;
    border: 0;
}
.innerSearchBox img{
	vertical-align:middle;
}
.innerSearchBox input[type="text" i].shortinput{
	width:30%;
}
.innerSearchBox .searchBtn{
	padding: .25em 1em;
    display: inline-block;
    vertical-align: middle;
    border-radius: 2em;
    border: 0;
    background: #1a958a;
    color: #fff;
    width: auto;
    font-size: 1.25em;
}
.innerSearchBox .searchBtn:hover{
	background:#000;
	color:#fff;
}
.innerSearchBox .searchBtn.orgBtn{
	background:#ff9800;
}
.innerSearchBox .boxline {
	background:#fff;
}
.innerSearchBox .fullLine .boxline{
	width: 90%;
    display: inline-block;
    vertical-align: middle;
}

/*----- 分頁樣式 -----*/
.page {
	position: relative;
	clear: both;
	margin: 0.2em 0px 1em 0px;
	text-align: center;
}
.page a {
	color: #797979;
	transition: 0.3s;
	padding: 2px 10px 5px 10px;
	margin: 2px;
	display: inline-block;
	vertical-align: top;
	border-radius: 5px;
	text-decoration: none;
}
.page .current {
	background-color: #464646;
	color: #FFF;
}
.page a:hover, .page a:focus {
	color: #000;
	background-color: #d9f2ef;
}
.page .page_ff span, .page .page_nn span {
    display: none;
}
.page .page_ff:hover, .page .page_nn:hover {
	background-color: transparent;
}
.page .fa {
	font-size: 1.5em;
}
/*--- 內頁樣式 ---*/
.pageTitle {
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1em 0;
}
.pageTag {
    text-align: center;
    list-style: none;
    margin: 1em 0 1em 0;
    font-size: 1.25em;
}
.pageTag.pageTagHasChild{
    /* margin: 1em 0 4em 0; */
}
.pageTag.pageTagHasChild .pageTag_in{
    font-size: .9em;
}
.pageTag li {
    display: inline-block;
    margin: .25em .5em;
}
.pageTag li a{
    color:#0b796e;
    padding: .5em 1em;
    border-radius: .5em;
    border: 1px solid #41aca2;
    display: block;
}
.pageTag > li > a.keep, 
.pageTag > li > a:hover, 
.pageTag > li > a:focus{
    color:#ffffff;
    background: #0b796e;
}
.pageTag > li > a:hover, .pageTag > li > a:focus{
    background: #309188;
}
.pageTag_in li a.keep, .pageTag_in li a:hover, .pageTag_in li a:focus{
    color:#ffffff;
    background: #1f958a;
}
.pageTag_in li a:hover, .pageTag_in li a:focus{
    background: #309188;
}
.listWrap,.instructorList{
	margin:2em 0;
	padding:3em 1em;
    font-size: 1.25em;
    /*text-align: center;*/
		text-align:left;
}
.instructorList{
    margin: 0em;
}
.yflylistWrap,
.gytflistWrap{
	margin:0em 0;
    padding: 0;
}
.yflylistWrap .webWrap,
.instructorList .webWrap,
.gytflistWrap .webWrap{
	margin: 0em 0;
	padding:2em 1em;
}
.instructorList{
    padding: 0em;
}
.listWrap .webWrap,
.instructorList .webWrap {
    width: 100%;
}
.instructorList .webWrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.listWrap .tabItem,
.instructorList .tabItem {
    width: 23.4%;
	min-height:280px;
    margin:.5%;
	background:#fff;
    border: 1px solid #d8d8d8;
	/* padding:1em 1.5em; */
	text-align:left;
	position:relative;
}
.tabItem a{
    width: 100%;
}
.instructorList .tabItem{
    width: 19%;
}
.listWrap .tabItem:hover {
		-webkit-box-shadow: rgb(0 0 0 / 30%) 0px 2px 5px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 5px;
    -ms-box-shadow: rgba(0,0,0,0.3) 0px 2px 5px;
    -o-box-shadow: rgba(0,0,0,0.3) 0px 2px 5px;
    box-shadow: rgb(0 0 0 / 30%) 0px 2px 5px;
		/*border:1px solid;
		border-color: rgb(76, 187, 198);
    border-color: -moz-linear-gradient(45deg, rgba(76, 187, 198, 1) 0%, rgba(137, 201, 139, 1) 100%);
    border-color: -webkit-linear-gradient(
45deg, rgba(76, 187, 198, 1) 0%, rgba(137, 201, 139, 1) 100%);
    border-color: linear-gradient(
45deg, rgba(76, 187, 198, 1) 0%, rgba(137, 201, 139, 1) 100%);*/
		cursor:pointer;
}
.pageTagHasChild li a.hasChild,
.pageTagHasChild > li > a.keep,
.pageTagHasChild > li:hover > a{
    position: relative;
}
/* .pageTagHasChild > li > a.keep::after,
.pageTagHasChild > li:hover > a::after, */
.pageTagHasChild li a::after,
.pageTagHasChild > li > a.hasChild.keep::after,
.pageTagHasChild > li:hover > a.hasChild::after,{
    content: "";
    display: inline-block;
    width: 2px;
    height: 15px;
    position: absolute;
    background: #00796e;
    bottom: -14px;
    left: calc(50% - 1px);
}
.pageTagHasChild > li:nth-child(2) > a::after,
.pageTagHasChild > li:nth-child(3) > a::after{
/*     display: none; */
}
.pageTag_in.onTable{
   /*  display: none; */
}
.pageTag_in,.pageTag_in li{
    list-style-type: none;
}
.pageTag_in{
    position: absolute;
    display: flex;
    justify-content: center;
    /* background: #d9efec; */
    padding: 8px 0;
    margin-bottom: 8px;
}
.pageTag_in li{
    margin: 6px 4px 6px 4px;
}
.pageTag_in li a{
    color: #0b796e;
    padding: .4em 1em;
    border-radius: .5em;
    background: #d9efec;
    border: 1px solid #41aca2;
    display: block;
}
/* .pageTag.pageTagHasChild .keep + .pageTag_in, */
.pageTag.pageTagHasChild li:hover .pageTag_in{
    display: block;
}
.pageTag.pageTagHasChild .pageTag_in{
    display: none;
}
.listWrap .tabItem:hover .tabs-Title{
    color: #36a59b;
}
.listWrap .tabs-Date{
	text-align: center;
    display: block;
    margin: 0 0 1em 0;
}
.listWrap .tabs-Info {
    line-height: 1.75;
    -webkit-line-clamp: 3;
}
.volunteersList .tabItem {
    width: 100%;
    margin: .5%;
	text-align:left;
}
.volunteersList .tabs-Date {
    text-align: left;
    display: inline-block;
    margin: 0 .5em .5em 0;
}
.volunteersList .tabs-Title {
    height: auto;
}
.volunteersList .V-download{
	display:inline-block;
	width:48%;
	vertical-align:top;
	margin:1% .5%;
	padding:.75em 1em;
	background:#deefed;
	border-top:3px solid #50b4ab;
	border-radius:0 0 .25em .25em;
}
.vd-title{
	font-size:1.25em;
	color:#299389;
	font-weight:700;	
}
.V-download ul{
	background:#fff;
	list-style:none;
	margin-top:.5em;
	border-top:1px dotted #ccc;
}
.V-download ul li{
	padding: .5em 1em;
	border-bottom:1px dotted #ccc;
}
.blueTxt {
    color: #5398ce;
}
.tabItem input[type="checkbox"] {
    position: absolute;
    right: 1em;
    top: 1em;
}
.contentBlock {
    position: relative;
	font-size:1.25em;
}
.contentTop {
    background: #f0f0f0;
    padding: 1em;
    border-bottom: 3px solid #3aafa2;
    position: relative;
}
.contentTop-map {
    display: block;
    position: relative;
    padding-bottom: 0.25em;
}
.contentTop-map .innerSocialList{
    top: 0%;
}
.contentInfo .content-title {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0;
}
.contentInfo .content-date {
	color:#006e61;
	margin-bottom:.5em;
}
.innerSocialList{
	text-align: right;
    position: absolute;
    top: 35%;
    right: 1em;
}
.innerSocialList li{
	display:inline-block;
	text-align:right;
	padding:0;
}
.innerSocialList li a{
	display:inline-flex;
	text-indent: 100vw;
	overflow: hidden;
	width:30px;
	height:30px;
	border-radius: 50%;
	opacity:.8;
}
.innerSocialList li a:hover, .innerSocialList li a:focus{
	opacity:1;
}
.innerSocialList a.ISL-facebook{
    background: url(../images/icon/icon-fb.png) #568ac2;
}
.innerSocialList a.ISL-gplus{
    background: url(../images/icon/icon-gplus.png) #f4511e;
}
.innerSocialList a.ISL-line{
    background: url(../images/icon/icon-line.png) #44bc3b;
}
.innerSocialList a.ISL-mail{
    background: url(../images/icon/icon-mail.png) #787878;
}
.innerSocialList a.ISL-print{
    background: url(../images/icon/icon-print.png) #787878;
}
.innerSocialList .ISL-more{
	display:inline-flex;
	text-indent: 100vw;
	width:30px;
	height:30px;
	border-radius: 50%;
	opacity:.8;
}
.at-share-btn-elements{
		width: 30px;
    height: 30px;
    border-radius: 50%;
		background: url(../images/icon/icon-add.png)#f4511e;
}
.ISL-line.addthis_inline_share_toolbox{
    position: relative;
    top: 12px;
}
.at-share-btn-elements a{
	background-color: unset !important;
}
.at-share-btn at-svc-compact{
		background-color:#000 !important;
}
.innerSocialList .at-icon-wrapper{
    line-height: 30px !important;
    height: 30px !important;
    width: 30px !important;
}
.innerSocialList .ISL-more{
    background: url(../images/icon/icon-more.png) #f4511e;
}
.contentMid {
    position: relative;
    padding: 1em;
    line-height: 1.5;
}
.noTopMid {
    padding: .5em 1.5em;
    border-top: 3px solid #49b7ab;
    background: #f7f7f7;
}
.noborder{
    border-top:0px;
}
.htmlImgWrap {
    width: 80%;
    margin: 1.5em auto 2em auto;
}
.htmlBlock{
    word-break: break-all;
}
.htmlBlock p{
	margin:1em 0;	
}
/* .htmlBlock a {
    color: #3d52c2;
}
.htmlBlock a:hover, .htmlBlock a:focus {
    color: #3f51b5;
} */
.htmlBlock ul, .htmlBlock ol{
    margin: 0 0 0 2em;	
}
.htmlBlock ul li, .htmlBlock ol li{
    margin: 1em 0;
}
.htmlBlock .flex-caption {
    color: #666;
	margin: 0;
    background: #f2f2f2;
    padding: .5em 1em;
}
.htmlImgWrap img{
	display:block;	
}
.htmlBlock .sectionTitle{
	font-size:1.1em;
	font-weight:700;
	color:#009688;	
}
.moreFile {
    background: #f0f0f0;
    margin-bottom: .5em;
    padding: 1em;
}
.RL-th {
    font-size: 1.25em;
    border-bottom: 1px solid #49b7ab;
    margin: 0;
    padding: 0 0 .5em 0;
}
.RL-th .fa {
    color: #49b7ab;
    margin-right: .25em;
}
.RL-td .downloadList li {
    border: none;
    padding: .5em 1em;
    list-style: none;
    border-bottom: 1px dotted #ccc;
	background:#fff;
}
.RL-td .downloadList li:hover a{
	font-style:italic;
	color:#000;
}
.topListBox .tabItem{
	width: 48%;
}
.tabItem a,
.instructorList a{
    display: inline-block;
    padding: 1em .8em;
}
.instructorList a{
    width: -webkit-fill-available;
}
.tabItem .tabs-Title,
.instructorList .tabs-Title{
    font-size: 1em;
}
.tabItem .tabs-post,
.instructorList .tabs-post{
    font-size: .85em;
}
.box-L, .box-R{
	display:inline-block;
	vertical-align:top;
	width:49%;
}
.topListBox .box-L{
	width:35%;
}
.topListBox .box-R{
	width:62%;
	margin:0 0 0 1%;
}
.topListBox .tabs-Date {
	text-align:left;
    margin: 0 0 .25em 0;
}
.topTag {
    float: left;
    display: block;
    margin: 0 .5em 0 0;
    padding: 0 1em 0 .5em;
    background: #e5665d;
    color: #fff;
    border-left: 5px solid #ca3833;
	position:relative;
}
.topTag:after{
	content:' ';
	position:absolute;
	bottom:0;
	right:0;
	display:block;
	width: 0;
	height: 0;
	border-bottom: 30px solid #fff;
	border-left: 10px solid transparent;
}
.txtLink{ color:#007275; }
.txtLink:hover, .txtLink:focus{ color:#ff7e08; }
.LW-bigBanner{
	display:block;
	margin:1.5em auto;
	width:95%;	
}
.LW-preTxt{
	text-align:left;
}
.LW-preTxt p{
	margin: 0 auto 1em auto;
    width: 100%;
}
.LW-preTxt .numList{
    margin:1em 0 1em 1.4em;
}
.LW-preTxt_in{
    margin: 0 auto;
    width: 95%;
}
/*--- rwdTable ---*/
.rwd-table {
	overflow: hidden;
	margin:0;
	background: #fff;
}
.rwd-table tr{
	-webkit-transition: background-color 0.7s ease;
    -moz-transition: background-color 0.7s ease;
    -o-transition: background-color 0.7s ease;
    -ms-transition: background-color 0.7s ease;
    transition: background-color 0.7s ease;
	background:#fff;
	border-bottom:2px dotted #ccc;
}
.rwd-table tr:hover {
	/* cursor:pointer; */
}
.rwd-table th, 
.rwd-table td {
	margin: 1em 0;
}
.rwd-table {
	width: 90%;
	margin:0 auto;
}
.rwd-table th {
	display: none;
}
.rwd-table td {
	display: block;
	background:#fff;
}
.rwd-table td:before {
	/*content: attr(data-th) " : ";*/
	content: attr(data-th);
	font-weight: bold;
	width: 7.5em;
	text-align: left;
    display: block;
}
.rwd-table th, .rwd-table td {
	text-align: left;
}
.rwd-table th, .rwd-table td:before {	
	font-weight: 400;
	margin-right: .5em;
	background:none;
}
.rwd-table td:before {	
	display: inline-block;
    width: 100%;
    padding: .25em .5em;
    margin: 0 0 .25em 0;
    border-radius: 5px;
    box-sizing: border-box;
    font-weight: 700;
}
/*.rwd-table tr:nth-child(odd){
	background:#e9f1fa;
}*/
.rwd-table tr:hover {
	background:#e4ebf3;
}
.rwd-table td:before {
	color: #006269;
    background: #e2eaea;
}
/*------------全球_論壇大事紀-------------*/
.gytfAboutList{
    background: #78c6c6;
    /* Permalink - use to edit and share this gradient. 固定鏈接 - 用於編輯和分享此漸變： https://colorzilla.com/gradient-editor/#78c6c6+0,7db9e8+100 */
    background: linear-gradient(to right,  #78c6c6 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    /* background: url(../images/bg/bg.png) no-repeat center center; */
}
.htmlBlock ul.gytfAboutList{
    margin: 0;
    padding: 0;
}
.gytfAboutList,.gytfAboutList li{
    list-style-type: none;
}
.gytfAboutList li:first-child{
    padding-top: 2em ;
}
.gytfAboutList li:last-child{
    padding-bottom: 2em ;
}
.gytfAboutList li{
    display: flex;
    padding: .5em 4em .5em 3em;
    align-items: center;
    position: relative;
}
.gytfAboutList li:before {
    border-left: 2px;
    content: "";
    display: inline-block;
    width: 2px;
    background: #529e9e78;
    height: 100%;
    position: absolute;
    left: 157px;
}
.gytfAboutList li:nth-child(odd){
    justify-content: flex-start;
}
.gytfAboutList li:nth-child(even){
    justify-content: flex-end;
}
.gyl_Year{
    background: #e04706;
    color: #ffffff;
    padding: 4px 18px;
    border-radius: 20px 0 20px 0;
    font-size: 1.2em;
    position: absolute;
    top: -18px;
    left: 52px;
}
.gyl_Cont{
    width: 80%;
    border-radius: 10px;
    background: #fff;
    padding: 2em;
    margin: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    color: #134464;
    font-weight: 500;
    position: relative;
}

.gyl_Cont p{
    position: relative;
    margin-bottom: 2em;
}
.gyl_Cont p:last-child{
    margin-bottom: 0em;
}
a.gyl_Link{
    position: absolute;
    right: -80px;
    top: calc(50% - 32px);
    display: block;
    background: #0b5e5e;
    color: #fff;
    padding: 10px;
    width: 80px;
    height: 80px;
    text-align: center;
    border-radius: 50%;
}
a.gyl_Link:hover,a.gyl_Link:focus{
    background: #001486;
    color: #fff;
}
/*gytf的css*/
.orgList,.forumList{
    width: 80%;
    margin: 3em auto 1em auto;
}
.orgList,.orgList li,
.forumList,.forumList li{
    list-style-type: none;
}
.orgList li,
.forumList li{
    border-radius: 20px;
    padding: 24px;
    position: relative;
    background: #f8fdfd;
    border: 1px solid #d0dfdf;
    margin-bottom: 50px;
}
.orgTitle,
.forumLTitle{
    font-size: 1.2em;
    font-weight: 600;
    color: #134464;
    position: absolute;
    top: -20px;
    background: #f8fdfd;
    padding: 0 18px 0 40px;
    border-radius: 10px;
    z-index: 3;
}
.orgTitle::before,
.forumLTitle::before{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #00afa25e;
    position: absolute;
    top: 1px;
    left: 6px;
    width: 30px;
    height: 30px;
    z-index: 1;
}
.orgTitle::after,
.forumLTitle::after{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #018278a3;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    z-index: 1;
}
.orgTitle span::before,
.forumLTitle span::before{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #3bbab05e;
    position: absolute;
    top: 3px;
    right: 1px;
    width: 10px;
    height: 10px;
    z-index: 1;
}
.orgTitle span::after,
.forumLTitle span::after{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #167b7336;
    position: absolute;
    top: 12px;
    right: -15px;
    width: 20px;
    height: 20px;
    z-index: 1;
}
.orgCont,
.forumLCont {
    color: #333;
}
.instructorListTitle{
    font-size: 1.1em;
    color: #006269;
    font-weight: bold;
}
@media (min-width: 480px) {
.rwd-table {
    width: 100%;
	margin:1.5em auto 0 auto;
}
.rwd-table td:before {
	display: none;
}
.rwd-table th, .rwd-table td {
	display: table-cell;
	padding: 0.25em 0.5em;
}
.rwd-table th:first-child, 
.rwd-table td:first-child {
	padding-left: 0;
}
.rwd-table th:last-child, 
.rwd-table td:last-child {
	padding-right: 0;
}
.rwd-table th, 
.rwd-table td {
	padding: .5em 1em !important;
}
.rwd-table .txt_C {
	text-align:center;
}
.rwd-table .txt_R {
	text-align:right;
}
.rwd-table tr{
	border-bottom:1px dotted #cecece;
}
.rwd-table th {	
	color: #fff;
	background:#006269;
}
}
.btnStyle {
    display: block;
    padding: .25em 1em;
    text-align: center;
    background: #b74e00;
    color: #fff;
    box-shadow: 0 4px 0 #8f3200;
    border-radius: 2em;
    margin-bottom: .25em;
	border:none;
}
.btnStyle.nouse, .btnStyle.nouse:hover, .btnStyle.nouse:focus{
	color:#333;
    background: #ccc;
    box-shadow: 0 4px 0 #ccc;
}
.btnStyle:hover, .btnStyle:focus {
    background: #8f3200;
    box-shadow: 0 4px 0 #8f3200, 0 3px 0 rgba(0,0,0,.1) inset;
}
.btnStyle.formBtn{
    display:inline-block;
	background: #026160;
    box-shadow: 0 4px 0 #00403f;
}
.btnStyle.formBtn:hover, .btnStyle.formBtn:focus{
	background: #00403f;
    box-shadow: 0 4px 0 #00403f;
}
.bottomBtn{
	text-align:center;	
}
.formList {
	position:relative;
	margin:1em 0;
	border-top: 3px solid #32b2a2;
    border-bottom: 1px solid #32b2a2;
}
.formListTR {
	width:100%;
	list-style:none;
	margin:0;
	padding:.25em 0;
	overflow:hidden;
	border-bottom: 1px solid #d4d4d4;
    background: #ededed;
}
.formListTR fieldset{
    border: 0px;
    margin: 0;
    padding: 0;
}
.formListTH, .formListTD {
    display: inline-block;
    vertical-align: top;
}
.formListTH {
	/*white-space:nowrap;*/
	text-align:right;
	padding:5px;
	min-width:20%;
}
.formListTD {
	text-align:left;
	padding:5px;
    width: 75%;
}
.formListTD.full {
	float:none;
	width:100%;
}
.formList label {
	display:inline;
	margin:0;
}
.formList textarea, .formList input[type="text"], .formList input[type="password"], .formList select {
	margin:0;
}
.formList textarea{
	width:80%;
	min-height:100px;	
}
.formList form {
	display:inline-block;
}
.formList input[type="text"].longInput{
	width:65%;
}
.formInfo {
    margin-bottom: -1em;
    padding: .5em 1em;
    background: #29b5a2;
    color: #ffed4f;
    font-size: 1.25em;
    border-radius: .5em .5em 0 0;
}
.formTitle {
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    margin: 0 0 .5em 0;
    color: #32b2a2;
}
.flowWrap{
	text-align:center;
	margin-bottom:1em;
}
.flowStep {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    padding: .5em 1em;
    text-align: center;
    position: relative;
    border-radius: 50%;
    margin: .5em 2em .5em 0;
    border: 4px solid #abe1e1;
    background: #82cccf;
	color: #003737;
    font-weight: 700;
    font-size: 1.25em;
}
.flowStep:after{
	display:block;
	position:absolute;
	font-family:FontAwesome;
	font-size:1.75em;
	color:#2fadaf;
	right:-1.25em;
	content:"\f061";
}
.flowStep.nowStep{
	border: 4px solid #F44336;
    background: #be0d00;
    color: #FFEB3B;
}
.flowStep.lastStep{
	margin:.5em 0 .5em 0;
}
.lastStep:after{
	display:none;
}
.sitemap {
    border-top: 1px dotted #49b7ab;
    margin-top: 1em;
    font-size: 1.25em;
}
.sitemapBlock {
    margin: 1em 0;
}
.sitemapTitle a {
    color: #00695f;
	font-weight:700;
}
.sitemapContent {
	background: #ffffff;
    border-top: 1px solid #49b7ab;
    padding: .5em 1em;
    margin-top: .5em;
}
.sitemapList {
    list-style: none;
    text-align: -webkit-auto;
}
.sitemapList li {
    display: inline-block;
    width: 24%;
    font-size: .9em;
}
.sitemapBlock a{
	transition:all ease-out .2s;
	text-decoration:none;
}
.sitemapBlock a:hover{
	text-decoration:none;
	font-weight:700;
}
.redTxt {
    color: #ca0028;
}
.greenTxt {
    color: #00ca20;
}
.Vcode img{
	width:auto;
	border:0;
	vertical-align:middle;
}
.cjkList li{
	list-style:cjk-ideographic;	
}
.numList li{
	list-style:decimal;	
}
.discList li{
	list-style:disc;	
}
.noteBlock {
    background: #fffacb;
    padding: .5em 1.5em;
    margin-top: 1em;
}
.noteBlock .redTxt {
    color: #ca0028;
}
.htmlBlock .noteBlock a {
    color: #3f51b5;
}
.htmlBlock .noteBlock a:hover, .htmlBlock .noteBlock a:focus {
    color: #001486;
}
.htmlBlock ul.sPadding li, .htmlBlock ol.sPadding li{
	margin:.5em 0;	
}
.loginChoose {
    width: 80%;
    text-align: center;
    background: #fff;
    margin: 1em auto;
    border-radius: 1em;
    padding: 1em;
    box-shadow: 0 0 15px #ccc;
}
.htmlBlock .idList {
    list-style: none;
    margin: 1em 0;
    padding: 0;
    font-size: 1.15em;
}
.htmlBlock .idList li{
	width: 50%;
    background: #f2f2f2;
    border-radius: 2em;
    border: 1px solid #dbdbdb;
    padding: .25em 1em;
    margin: .75em auto;
	cursor:pointer;
	text-align: left;
}
.htmlBlock .idList li:hover{
    background: #e3e2e2;
}
.idList li .fa{
	color:#41baab;
}
.idList li input[type="radio"] {
    height: 20px;
    width: 20px;
	vertical-align:middle;
	background:#fff;
	margin:0 .5em;
}
.rwd-table .w20{ width:20%;}
.lighboxIn{
	width:95%;
	margin:auto;	
}
.dbFile .RL-th{
	color:#fff;
	background:#23776e;	
    padding: .5em;
}
.dbFile .RL-th .fa{
	color:#fff;
}
.dbFile .downloadList{
	background:#fff;	
}
.dbFile .downloadList li{
	padding: .5em 0;
	display: list-item;
	list-style: decimal;
	margin-left: 2em;
}
#optionBox{
	display:none;
}
.dbFile .RL-th .openBtn{
	background: #0f5d55;
    border: 0;
    position: absolute;
    right: 1.5em;
    color: #fff;
}
.NetMapFormBlock{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
}
.NetMapFormBlock img{
    width: 18%;
    height: auto;
    margin-right: 5px;
}

.passwordBox_in{
    display: flex;
    align-content: center;
}
.formList .passwordBox_in input[type="text"]{
    width: unset;
}
.eye_pass{
    margin: 4px;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.htmlBlock b{
    font-size: 1.3em;
    font-weight: 600;
    color: #09554f;
    position: relative;
    padding: 2px 26px;
}
.htmlBlock b::before{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #acdcd5;
    position: absolute;
    top: 2px;
    left: -3px;
    width: 20px;
    height: 20px;
    z-index: 1;
}
.htmlBlock b::after{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #70b5aa5e;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 35px;
    height: 35px;
    z-index: 1;
}
.htmlVideoWrap {
    margin: 1.5em auto 2em auto;
    position: relative; width: 80%; padding-bottom: 40.25%; height: 0;
}
.htmlVideoWrap iframe{
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.contentDate {
    background: #d3e8e6;
    color: #003e38;
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 4px 16px;
    border-radius: 8px;
    font-size: .9em;
}
.listWrap.reviewList .tabItem,
.listWrap .instructorList{
    min-height: 372px;
}
.reviewImgList th:first-child{
    width: 20%;
    max-width: 150px;
}
.tab-news{
    background: #d1e8e6;
    color: #003e38;
    font-weight: 900;
    border-radius: 10px;
    padding: 2px 10px;
    margin-bottom: 4px;
    display: inline-block;
    font-size: .6em;
}
.instructorList .tabs-ImgBox{
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 100%;
    box-shadow: rgb(0 0 0 / 8%) 0px 5px 10px;
    border: 1px solid #ededed;
    margin-bottom: 10px;
}
.gytflistWrap .tabs-ImgBox{
    position: relative;
    width: 100%;
}
.tabs-ImgBox{
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 66.666%;
    box-shadow: rgb(0 0 0 / 8%) 0px 5px 10px;
    border: 1px solid #ededed;
    margin-bottom: 10px;
}
.tabs-ImgBox img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; /* 將圖片固定在父層的大小 */
  width: 100%;
  height: 100%; /* 高和寬都填滿容器 */
  object-fit: cover; /* 和background-image設定background-size: cover一樣，圖片剛好填滿 */
  object-position: center;
}
.keyLinkWrap{
    margin: 0em 0 1em 0;
    padding: 1em;
    background: #f9f9f9;
}
.keyLinkWrap a{
    padding: 0px 8px 0px 6px;
    font-size: .8em;
    position: relative;
    margin: 0px 4px 2px 0px;
    text-decoration: underline;
    display: inline;
    border-right: 2px solid #18926b;
}
.keyLinkWrap a:hover{
    color: #003737;
}
/* .keyLinkWrap a::before{
    content: "";
    display: inline;
    position: absolute;
    right: -3px;
    width: 2px;
    height: 60%;
    background: #18926b;
} */
.yearSelect{
    border-radius: .5em;
    border: 1px solid #dbdbdb;
    padding: .23em .5em;
    background: #fff;
    margin-bottom: .5em;
}

/*活動影像*/
ul.reviewList ,.reviewList li{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul.reviewList{
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5%;
    margin-left: -0.5%;
}
.reviewList li{
    width: 49%;
    margin: 0px 0.5% 12px 0.5%;
    border: 1px solid #dadada;
    box-shadow: rgb(0 0 0 / 20%) 0px 5px 10px;
    padding: .8em;
}
.reviewList li:hover{
    background-color: #fefff7;
}
.reviewList li a{
    display: flex;
}
.ImgBox{
   position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 66.666%;
    box-shadow: rgb(0 0 0 / 8%) 0px 5px 10px;
    border: 1px solid #ededed;
}
.ImgBox img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.reviewList li .ImgBoxWrap{
    width: 35%;
}
.reviewCont{
    width: calc(65% - 0.8em);
    padding: 0px 0px 0px 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.re_date{
    color: #02746b;
    font-weight: 700;
    font-size: .85em;
    margin-bottom: 2px;
}
.re_Title{
    font-weight: 600;
    font-size: 1em;
    text-align: left;
    color: #5e5e5e;
    min-height: 60px;
}
.gytflistWrap .webWrap{
    padding: 1em;
}
.reviewTabs{
    margin-bottom: 10px;
}
ul.reviewTabs, .reviewTabs li{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul.reviewTabs{
    display: flex;
    align-items: center;
    margin: 1em 0.2em;
}
.reTabs_tit{
    font-size: 1.3em;
    font-weight: 600;
    color: #09554f;
    position: relative;
    padding: 2px 26px;
    margin-right: 30px;
}
.reTabs_tit::before{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #acdcd5;
    position: absolute;
    top: 2px;
    left: -3px;
    width: 20px;
    height: 20px;
    z-index: 1;
}
.reTabs_tit::after{
    content: '';
    display: inline-block;
    border-radius: 50%;
    background: #70b5aa5e;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 35px;
    height: 35px;
    z-index: 1;
}

/*----- mobile Style -----*/
@media only screen and (max-width: 429px){
.innerWrap .topView, .anchor-fix {
	display:none;	
}
.pageTag {
    margin: 1em 0;
}
.pageTag li {
	display:block;
	margin:.25em 0;
}
.pageTag li a {
	width:80%;
    padding: .25em 0;
	margin:auto;
}
.listWrap {
    padding: 2em 1em;
}
.listWrap .tabItem {
    width: 100%;
}
.innerBottom {
    width: 90%;
    margin: 2em auto 4em auto ;
}
.innerSearchBox ul li, .innerSearchBox .fullLine .boxline{
    width: 100%;
}
.innerSearchBox .searchBtn {
    width: 50%;
	margin:auto;
    font-size: 1em;
    display: block;
}
.innerSocialList{
    position: relative;
    margin: 0 0 1em 0;
    top: 0;
    right: unset;
    width: 100%;
    text-align: center;
}
.htmlImgWrap {
    width: 100%;
    margin: 1em auto;
}
.flowStep{
	width: 100%;
    margin:.5em 0 1em 0;
    height: auto;
	border-radius: .5em;
}
.flowStep:after{
	display: block;
    font-family: FontAwesome;
    content: "\f063";
    right: unset;
    bottom: -1.5em;
    font-size: 1.25em;
}
.lastStep:after {
    display: none;
}
.formListTH {
	display:block;
	text-align:left;
	font-weight:700;
}
.formListTD {
    width: 100%;
}
.sitemapList li {
    width: 100%;
}
ul.sitemapList {
	margin:0;
}
.htmlBlock .idList li {
    width: 100%;
	font-size:.75em;
}
.idList li .fa{
	display:block;
	margin:.25em auto;
	width:20px;
}
.flowWrap, #send_in_code{
	display:none;
}

}

/*----- pad Style -----*/
@media only screen and (min-width: 430px) and (max-width: 1024px){
.pageTitle {
    margin: .5em 0;
}
.pageTag {
    margin: 1em 0;
}
.pageTag li {
    margin: .5em .25em;
}
.innerSearchBox ul li {
    width: 48%;
}
.innerSearchBox .fullLine .boxline {
    width: 80%;
}
.listWrap .tabItem {
    width: 48%;
}
.innerSocialList{
    margin: 0 0 .5em 0;
    top: .5em;
}
.topListBox .box-L, .topListBox .box-R,
.loginChoose, .htmlBlock .idList li {
    width: 100%;
}
.pageTag_in{
    display: none;
}
.pageTag_in.onMobile{
    display: flex;
    position: unset;
}
.pageTag.pageTagHasChild .keep + .pageTag_in, .pageTag.pageTagHasChild li:hover .pageTag_in,
.pageTagHasChild > li > a.keep::after, .pageTagHasChild > li:hover > a::after{
  /*   display: none; */
}
}
.pageSubTitle{
		font-size: 1.25em;
    font-weight: bold;
    color: #005c51;
    margin-bottom: 1em;
		text-align:center;
}
/*青年國際組織網絡地圖*/
.mapWrap{
    margin: 1em 0;
    background: #eee;
    padding: 2em 1em;
    font-size: 1.25em;
    /* text-align: center; */
    text-align: left;
    border-radius: 20px;
}
.mapWrap form{
    display: flex;
    width: 55%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
}
.mapList{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.mapList li{
    display: flex;
    margin: .5em;
}
.inputGroup{
    display: flex;
    width: 100%;
    align-items: center;
}
.form-select#area{
    width: 80%;
}
.inputGroup input#sKeyWord{
    width: 100%;
    border-radius: 0.5em;
    border: 1px solid #ced4da;
    padding: 0.5em 1em;
    background: #ffffff;
    font-size: 1rem;
}
.jcc{
    justify-content: center;
}
.penCount{
    font-size: 0.9em;
    margin-top: 0.5em;
}
.form-select ,#country{
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(/images/icon/down-arrow.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0 .2rem;
}
.mapWrap label{
    margin: .2em;
    display: block;white-space:nowrap;
}
.contentTop-map{
    padding-bottom: 0.75em;
}
.contentTop-map .innerSocialList{
    top: 5%;
}
.moreFile_imgcont{
    background: #fff;
    list-style-type: none;
    display: flex;
    background: #fff;
    padding: 10px;
    text-align: center;
    flex-wrap: wrap;
}
.moreFile_imgcont li{
    list-style-type: none;
    margin: 4px 6px;
    max-width: 200px;
}
.yearBox{
    margin-bottom: 12px;
}
.yearBox a{
    background: #006269;
    color: #fff;
    padding: 6px 20px;
    margin: 2px 0;
    border-radius: 50px;
    display: inline-block;
}
.yearBox a:hover,a.keep{
    background: #00464b;
}
.reviewImgContent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin: -0.5%;
}
.reviewImgContent img{
    width: 24%;
    margin: 0.5%;
}
.instructorListImg{
    width: 50%;
    margin: 0 auto;
}
.instructorList .rwd-table td{
    padding: 5px;
}
@media screen and (max-width:1024px) {
.pageTag.pageTagHasChild{
    margin: 1em 0 0em 0;
}
.pageTagHasChild > li > a.keep::after{
    display: none;
}
.pageTag_in.onTable{
    display: flex;
}
.pageTag_in{
    position: unset;
    font-size: 1.2em;
    background: #e1eded;
}
.gyl_Cont{
    width: 100%;
}
.orgList,
.forumList{
    width: 100%;
}
.yearBox{
    margin-top: 0px;
}
.reviewImgContent img{
    width: 32%;
    margin: 0.5%;
}
.instructorList .tabItem{
    width: 32%;
}
.instructorListImg{
    width: 100%;
    margin: 0 auto;
}
.reviewList li{
    width: 100%;
}
}
/*如果螢幕寬度為 768px 以下，就套用 css 設定*/
@media screen and (max-width:768px) { 
    .mapWrap form{
        width: 95%;
    }
    .NetMapFormBlock{
        flex-direction: column;
        font-size: 1em;
    }
    .NetMapFormBlock img{   
        width: 30%;
    }
    .gytfAboutList li:first-child{
        padding-top: 2em;
    }
    .gytfAboutList li:last-child {
        padding-bottom: 2em;
    }
    .gytfAboutList li{
        padding: .5em 2em .5em 1em;
    }
    .gytfAboutList li:before{
        left: 119px;
    }
    .orgTitle{
        position: relative;
        top: 0;
        margin-bottom: 10px;
        background: #d2ebe8;
        border-radius: 35px;
    }
    .orgTitle::after{
        top: calc(50% - 16px);
        left: -1px;
    }
    .orgTitle::before{
        top: calc( 50% - 10px);
    }
    .orgTitle span::after{
        top: calc( 50% - 10px);
    }
    .orgTitle span::before{
        top: calc( 50% - 3px);
    }
    .orgList li,
    .forumList li{
        margin-bottom: 10px;
    }
    .orgList,
    .forumList {
        margin: 1em auto 1em auto;
    }
    .reviewImgContent img{
        width: 49%;
        margin: 0.5%;
    }
    .instructorList .tabItem{
        width: 49%;
    }
    .instructorName{
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    ul.reviewTabs{
        flex-wrap: wrap;
        margin-bottom: 4px;
    }
    ul.reviewTabs a{
        display: block;
        margin-top: 6px;
    }
    .pageTag li{
        width: 100%;
        margin: 0 0 0.1em 0;
    }
    .gytflistWrap .webWrap{
        padding: .8em 0;
    }

}
/*如果螢幕寬度為 414px 以下，就套用 css 設定*/
@media screen and (max-width:430px) { 
    .contentTop-map {
        padding: 0.5em 0 0 0em;
    }
    .mapTitle ,.innerSocialList{
        margin: 0em;
    }
    .pageTag_in{
        background: unset;
        flex-direction: column; 
        padding: 0px 0;
    }
    .pageTag_in.onTable{
        display: none;
    }
    .pageTag_in li a.keep, .pageTag_in li a:hover, .pageTag_in li a:focus{
        background: #414141;
    }
    a.gyl_Link{
        top: unset;
        bottom: -60px;
        right: calc(50% - 52px);
        width: auto;
        height: auto;
        border-radius: 25px;
    }
    .gyl_Cont p{
        margin-bottom: 4em;
    }
    .gyl_Cont p:last-child {
        margin-bottom: 0em;
    }
    .gytfAboutList li {
        padding: 1em 1em 1em 1em;
    }
    .moreFile_imgcont li,.moreFile_imgcont{
        width: 100%;
        max-width: unset;
    } 
    .yflylistWrap .webWrap,
    .instructorList .webWrap,
    .gytflistWrap .webWrap{
        margin: 0em 0;
        padding:1em 0em;
    }
    .reviewImgContent img{
        width: 100%;
        margin: 0%;
    }
    .instructorList .tabItem{
        width: 100%;
    }
}