@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@900&display=swap');
body,div,ul,li,form,button,header,footer,nav,input,textarea,th,td,span,p,select,h1,h2,h3,h4,h5,h6{ 
font-family:'Open Sans', Geneva,'Microsoft JhengHei',"微軟正黑體", sans-serif; letter-spacing:0.5px; }
h1,h2,h3,h4,h5,h6{  margin:0 0 1em 0; padding:0; color:#000}
body { margin:0;  background: #fff; color:#212121 ; padding:0}
html,body {  font-size:100%; -webkit-text-size-adjust:100% ; height: 100%;  min-height: 100% !important;} /*for ipad*/
html{  image-rendering: -webkit-optimize-contrast;;}

*{box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

a, a h1, a h2, a h3, a h4, a h5, a h6{ color:#000; text-decoration: none ; 
-o-transition:all 0s ease 0s, all 160ms ease 0s;
-webkit-transition:all 0s ease 0s, all 160ms ease 0s;
-moz-transition: all 0s ease 0s, all 160ms ease 0s;
transition: all 0s ease 0s, all 160ms ease 0s;     
}
a:hover, a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6{color:#00abb2; text-decoration: none}
a img{ border:0px; }
.clearFix {clear:both;}

h6{ font-size:1em; line-height:1.5;}
h5{ font-size:1.125em; /*18px/16px*/line-height:1.5;  /*21px/16px*/color: #000;}
h4{ font-size:1.3125em; /*21px/16px*/ line-height:1.5;/*25px/16px*/}
h3{ font-size:1.625em;/*26px/16px*/ line-height:1.5;/*30px/16px*/}
h2{ font-size:1.875em;/*30px/16px*/ line-height:1.2;/*34px/16px*/}
h1{ font-size:2em;/*32px/16px*/ line-height:1.3;/*36px/16px*/}

input {border:0px ; height:2.8em; line-height:2.8em; vertical-align:middle; background:#f6f6f6; color:#000; padding:0 5px; font-size:0.9375em; outline:0 !important;menuwidth: 100%;}
input:hover, textarea:hover, input:focus, textarea:focus{ background:#e3e3e3;}
textarea {border:0; background:#f6f6f6; color:#000; padding:5px; width:100%; font-size:0.9375em; width: 100%;}
input[type=checkbo<navx] { border:0px\9; background:none; width:auto !important; height:auto !important;}

.greenBg { background: #88ba03;}
.blueBg { background: #00abb2;}
.grayBg {background: #f4f4f4;}
.whiteBg {background: #fff;}

.greenTxt { color: #88ba03;}
.blueTxt { color: #00abb2;}
.line { position: absolute; height: 2px;  }

.btnBox{ text-align:center;  margin:1.5em 0;}

a.btn{  text-align:center; padding:0.5em 1.5em; display:inline-block; 
 vertical-align:middle; font-size:0.9375em ;color:#fff;
-o-transition:all 0s ease 0s, all 160ms ease 0s;
-webkit-transition:all 0s ease 0s, all 160ms ease 0s;
-moz-transition: all 0s ease 0s, all 160ms ease 0s;
transition: all 0s ease 0s, all 160ms ease 0s; font-weight: bold; font-size: 1.125em;
}

a.btn:hover{ color:#fff; }
a.btn.blueBg:hover{ background: #01bdc5; color:#fff; }
a.btn.greenBg:hover{ background: #01bdc5; color:#fff; }
a.btn.whiteBg { background: #fff;color:#88ba03;}
a.btn.whiteBg:hover { color:#00abb2;}

a.btn .arrow { width: 30px; height: 18px; display: inline-block;
	background-image: url("../../images/arrow.png"); 
    background-repeat: no-repeat;
    background-size: 30px 72px;
    -webkit-background-size: 30px 72px; 
    -moz-background-size: 30px 72px;
    -o-background-size: 30px 72px;
	background-position: 0 0 ;
	margin: 0.2em 0 0 0.3em;
}

a.btn.whiteBg .arrow { background-position: 0 -17px;}
a.btn.whiteBg:hover .arrow { background-position: 0 -35px;}


header, nav{display:block}


select {  border: 0; background: transparent; color:#000; vertical-align:middle; font-size:16px;}
select:hover, select:focus{border:0px; background: transparent ; color:#000;}
input[type="radio"]{border:0px\9; background:none; vertical-align:middle;  width:auto !important; height:auto !important;}



/*-------------------------------------基本設定-------------------------------------------*/
.wrap{ height:100%; width:100%; margin:0 auto; position:relative; line-height: 1.7;} /*外層裝所有物件除了縮小選單*/

.mainWidth{ width: 1500px; margin: 0 auto;}

.Table { width:100%; display: table;}
.Tr, .Tr_1, .Tr_2 { display: table-row}
.Td, .Td_1, .Td_2, .Td_3, .Td_4, .Td_5, .Td_6{ display: table-cell;}


/*.close-any{  min-height:100%;position:relative;}*/
.mCanvas {min-height:100%; position:relative;}

/*選單-----------------------------*/
/*手機*/
.sb-2.right.push{display:none ;}
.sb-2 nav{display:none !important;}
.fixed-header{display:none ;}
.mobileMenu {  display:none ; position:relative; }
 .lanMobile {}

/*網頁*/
.main{ margin-top: 110px;}/*0309*/

header { position:fixed; top: 0; width:100%; margin:0 auto; padding:0; text-align: center; height: 110px; background: #fff; z-index: 1080}/*0309*/

header .logo { position: absolute; left: 75px; top: 21px; width:300px; height:63px;}
header .logo img{ width:300px; height:63px;  }
header a.donate {position: absolute; right: 75px; top: 0; width:120px; height:122px; background: #00acb2; color: #fff; font-weight: bold; text-align: center; padding-top: 1.8em; z-index: 999}
header a.donate div{ display: inline-block;border-top: 1px solid #fff; padding-top: 0em; margin-top: 0.2em; font-size: 1.3em;}
header a.donate:hover{ background: #01bdc5;}

/*searchBtn*/
.searchBtn {position: absolute; width:35px; height:35px;z-index: 999;border: 0;cursor:pointer; background-color: transparent;
	background-image: url( "../../images/serach.png");
	background-repeat: no-repeat;
	background-position: 0 0;
  background-size: 35px 70px;
    -webkit-background-size: 35px 70px; 
    -moz-background-size: 35px 70px;
    -o-background-size: 35px 70px;
-o-transition:all 0s ease 0s, all 0ms ease 0s;
-webkit-transition:all 0s ease 0s, all 0ms ease 0s;
-moz-transition: all 0s ease 0s, all 0ms ease 0s;
transition: all 0s ease 0s, all 0ms ease 0s;}

header .searchBtn {right: 230px; top: 37px; }
header .searchBtn a{ display: block;height: 100%;}
header .searchBtn:hover{ background-position: 0 -35px;}
/*.searchBtn { display: none;}*/

.searchBox {display: none; position: fixed; left: 0; top: 0; background: url("../../images/searchbox_bg.png") 0 0 repeat; width: 100%; height: 100%; padding-top: 6em; z-index: 1085; }
.open-searchBox{ display: block;}
.searchBox label{ display: block; color:#fff; font-size: 1.3em; font-weight: bold;}
.searchBox .txt{  width:640px;  margin: 0 auto;}
.searchBox input{border-bottom: 1px solid #fff; background: transparent; width: 100%;font-size: 2em; color: #fff; font-weight: bold; padding: 0; line-height: 2em; height: auto;}

.closeBtn { position: fixed;  top: 15px; right: 5.3%; display: none;  width: 35px; height: 35px;cursor:pointer; background-color: transparent;border: 0;}
.closeBtn .line1, .closeBtn .line2 {width: 35px;height: 2px;background-color: #fff;display:block;}
.open-closeBtn { display:block; z-index:1090; }
.closeBtn .line1 {-webkit-transform: rotate(45deg) translate(0px, 2px); transform: rotate(45deg) translate(0px, 2px);}
.closeBtn .line2 { -webkit-transform: rotate(-45deg) translate(0px, -2px); transform: rotate(-45deg) translate(0px, -2px);}

.searchBox a.btn {padding: 0.5em 2.2em;}

/*0309*/
header .navAllBox{ position: relative}/*0309*/
header.shadow, header a.donate.shadow{
	-webkit-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.2);
    box-shadow: 2px 7px 4px -3px rgba(0,0,0,0.2);}

header.changeS { 
    -webkit-animation: MoveBg 0.2s ease-in-out forwards; 
    animation: MoveBg 0.2s ease-in-out forwards; 
 }

@keyframes MoveBg {
    from { height: 110px; }
    to { height: 70px; }
}

header.changeH{ 
    -webkit-animation: MoveBg2 0.2s ease-in-out forwards; 
    animation: MoveBg2 0.2s ease-in-out forwards;     
 }

@keyframes MoveBg2 {
    from { height: 70px; }
    to { height: 110px; }
}

header.changeS .logo { 
	-webkit-animation: MoveLogo 0.2s ease-in-out 1 forwards; 
    animation: MoveLogo 0.2s ease-in-out 1 forwards;      
 }

@keyframes MoveLogo {
    from { transform: scale(1); top: 21px;}
    to {  transform: scale(0.8);top: 3px;}
}

header.changeH .logo { 
	-webkit-animation:MoveLogo2 0.2s ease-in-out 1 forwards; 
	animation: MoveLogo2 0.2s ease-in-out 1 forwards;  
	
}
@keyframes MoveLogo2 {
    from { transform: scale(0.8); top: 3px;}
    to {  transform: scale(1);top: 21px;}
}

header.changeS nav{
	-webkit-animation: MoveNav 0.2s ease-in-out 1 forwards;
	animation: MoveNav 0.2s ease-in-out 1 forwards;
}
@keyframes MoveNav {
    from { top: 35px;}
    to {  top: 10px;}
}

header.changeH nav{
	-webkit-animation: MoveNav2 0.2s ease-in-out 1 forwards;
	animation: MoveNav2 0.2s ease-in-out 1 forwards;
}
@keyframes MoveNav2 {
    from { top: 10px;}
    to {  top: 35px;}
}
header.changeS a.donate{
	-webkit-animation: MoveD 0.2s ease-in-out 1 forwards;
	animation: MoveD 0.2s ease-in-out 1 forwards;
}
@keyframes MoveD {
    from { height: 122px;padding-top: 1.8em;}
    to {  height: 90px;padding-top: 0.8em;}
}
header.changeH a.donate{
	-webkit-animation: MoveD2 0.2s ease-in-out 1 forwards;
	animation: MoveD2 0.2s ease-in-out 1 forwards;
}
@keyframes MoveD2 {
    from { height: 90px;padding-top: 0.8em;}
    to {  height: 122px;padding-top: 1.8em;}
}

header.changeS .searchBtn{
	-webkit-animation: MoveS 0.2s ease-in-out 1 forwards;
	animation: MoveS 0.2s ease-in-out 1 forwards;
}
@keyframes MoveS {
    from { top: 37px;}
    to {  top: 12px;}
}
header.changeH .searchBtn{
	-webkit-animation: MoveS2 0.2s ease-in-out 1 forwards;
	animation: MoveS2 0.2s ease-in-out 1 forwards;
}
@keyframes MoveS2 {
    from { top: 12px;}
    to {  top: 37px;}
}

.menu li.mobileLan{ display: none;}

header nav { position: absolute; right: 290px; top: 35px; width:auto;}

.menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-table; z-index: 99999;}
.menu > li > ul.sub-menu { min-width: 10em; padding: 4px 0;}
.menu ul li { padding: 0px; }

.menu > ul > li { display: inline-block;  margin-left:2em; line-height:1.2em;  text-align:right; position: relative; font-size:1.0625em; }
.menu > ul > li > a { color:#000;padding:10px 0; border-bottom: 2px solid #fff ;}
.menu > ul > li.active a{ border-bottom: 2px solid #00abb2 ;}
.menu > ul > li:hover > a { color: #00abb2;}
.menu > ul > li:first-child{ margin:0}
.menu ul li a { display: block; text-decoration: none; font-weight:bold; }

/*內頁PC選單用*/
header.inner nav { position: static; bottom: auto; right: auto; }
header.inner .menu ul {width: 97%; margin-right: 3%;}
header.inner .menu > ul > li { margin-left:7.5%;}


/*第2層*/
.menu > ul > li > ul { 
  display: none; 
  position: absolute; left: 0px;
  top:100%;
  min-width: 210px;  margin-top: -3px; 
}

.menu > ul > li:last-child > ul { 
  right: 0px !important;left: auto;
}
.menu ul ul li{text-align:left; }
.menu li li a, .menu > ul > li.active li a { background: #00abb2 ; position: relative; z-index:100; padding:0.8em; 
	filter:alpha(opacity=95); -moz-opacity:95;  opacity: 0.95;  color: #fff; border-top: 1px solid #35c0c6; border-bottom: 0;}
.menu li li:first-child a, .menu > ul > li.active li:first-child a { border:0;}
.menu li li a:hover, .menu > ul > li.active li a:hover  { background: #01bdc5 ; color: #fff;}
.menu ul li:hover > ul { display: block; 
    animation-name:subm;
    animation-duration:.2s;
}
@keyframes subm{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.menu ul ul > li { position: relative; }



/*首頁---------------------------------------------------------------*/

/*首頁主形象*/
.impactBox{ position: relative; }
.impact { width: 100%; }
.impact.swiper-container { z-index: auto !important;}
.impact .swiper-slide .ph { position: relative; background-position: center center; background-repeat:no-repeat;
 background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  padding-bottom: 31.5%;}
.impact .swiper-pagination-bullets{  width: 300px !important;  left: auto !important; right: 200px !important;  text-align: right !important;}
.impact .swiper-pagination{z-index: 999;}
.impact .swiper-pagination-white .swiper-pagination-bullet {background: #fff !important;}
.impact .swiper-pagination-bullet {opacity: 1 !important;}
.impact .swiper-pagination-white .swiper-pagination-bullet-active { background: #88ba03 !important; opacity: 1!important;}


/*弧線*/
.curve{
	position: absolute; z-index: 22;
	left: 0; top:-62px; height: 62px; width: 100%;
    background-repeat: no-repeat;
    background-size: 1500px 62px;
    -webkit-background-size: 1500px 62px; 
    -moz-background-size: 1500px 62px;
    -o-background-size: 1500px 62px;
    background-position: left top;
}
.curve.green{background-image: url("../../images/curve_green.png");}
.curve.white{background-image: url("../../images/curve_white.png");}
.curve.gray{background-image: url("../../images/curve_gray.png");}


/*共用*/
.iContent { width: 1160px; margin: 0 auto;}
.comPadding { padding: 4em 0;}
.comInner { position: relative;}
.comContent { width: 1226px; margin: 0 auto;}


/*動物區*/
.iAnimal {
	position: relative;
	background-image: url("../../images/curve_animal.png"); 
    background-repeat: repeat-x;
    background-size: 1500px 166px;
    -webkit-background-size: 1500px 166px; 
    -moz-background-size: 1500px 166px;
    -o-background-size: 1500px 166px;
    background-position: center bottom;
    background-color: #88ba03;
    padding-top: 4em;}
.iAnimal .ph{
	background-repeat: no-repeat;
	 background-size: 1500px 250px;
    -webkit-background-size: 1500px 250px; 
    -moz-background-size: 1500px 250px;
    -o-background-size: 1500px 250px;
	background-position: center bottom;
}
.iAnimal .ph.s1{ background-image: url("../../images/animal01.png");}
.iAnimal .ph.s2{ background-image: url("../../images/animal02.png");}
.iAnimal .ph.s3{ background-image: url("../../images/animal03.png");height: 235px;}
.iAnimal .iContent {   text-align: center;}
.iAnimal h3 { color: #fff; font-weight: lighter;font-size:1.5em;}
.iAnimal h3 span {white-space: nowrap; margin: 0 1.5em;}
.iAnimal ul { list-style: none; padding: 0; margin: 0 0 1.5em 0;}
.iAnimal li {
	width: 140px; height: 140px; text-align: center; color: #fff;
	-moz-border-radius: 140px;
	-webkit-border-radius: 140px;
	border-radius: 140px;
	border: 1px solid #fff;  margin: 1em 1em; display: inline-block;
}
.iAnimal li.temp{ width: 100%; height: 1px; border: 0; margin: 0; display: none;}
.iAnimal li .Td { display: table-cell; vertical-align: middle;height: 140px; width: 140px;}
.iAnimal li .num { font-size:2.5em; letter-spacing: 0; line-height: 1em; border-bottom: 1px solid #fff;display: inline-block; padding-bottom: 0.1em;}


/**/
h4.Title { text-align: center; margin: 0 0 1.6em 0; }
h4.Title span { font-size: 0.5em; text-transform: uppercase; display: block; line-height: 1.3;}

.ListPh { position: relative; z-index: 1; }
.ListPh .photo { overflow: hidden; }
.ListPh .photo img { transition:transform .3s; vertical-align: top; max-width: 100%;}
.ListPh .photo a:hover img {transform: scale(1.1); }
.dec { /*font-size: 0.9375em;*/ text-align: justify;}

/*焦點議題*/
.iKey { }
.iKeyPH img {  width: 100%;}
.iKey .swiper-container-horizontal > .swiper-pagination-bullets { text-align: center;}
.iKey .swiper-pagination-white .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #88ba03 !important; opacity: 1 !important;}
.iKey .swiper-pagination-white .swiper-pagination-bullet { background: #d0d0d0 !important;}
.iKey .swiper-pagination-bullet {opacity: 1 !important;}
.iKey .swiper-container { padding: 2em 0 3em 0;  }
.iKey .num { position: absolute; left: 15px; top:-30px; z-index: 2;}
.iKey .num img { width:61px; height: 50px; }
.iKey .swiper-container .line { left: 0; bottom:-23px; width: 110px; }
.iKey h5 { margin: 2.5em 0 0.5em 0;}
.iKey .swiper-pagination2 {margin-top: 1.2em;}
.iKey .swiper-container-horizontal > .swiper-pagination-bullets {bottom: 0;}

.petition { margin: 3.5em 0 1em 0;}
.petition .Td_1 { width: 47%; vertical-align: top;}
.petition .Td_2 { padding-left: 70px; width: auto;vertical-align: top;}
.petition .Td_1 .ListPh .line { left: 0; bottom:-23px;  width:47%; }
.petition .T { position: relative; width: 100%; float: right; text-align: right;
    background: url("../../images/icon01.png") right 0 no-repeat; padding: 1px 45px 0 0; font-size: 0.875em;
	background-size: 35px 25px;
    -webkit-background-size: 35px 25px; 
    -moz-background-size: 35px 25px;
    -o-background-size: 35px 25px;}
.petition .T .line { bottom:10px;  right: 130px; width: 100px; }
.petition .Td_1 .T { display: none;}
.petition img {  width: 100%;}
.petition .btnBox { text-align: right;}


/*動平活動*/
.iEvent {}
.iEvent .date { position: absolute; left: -1em; top:-1.3em; border: 2px solid #000; background: #fff; padding: 0.3em 1em; font-size: 0.9375em;z-index: 2; font-weight: bold;}
.iEvent .T {position: relative; z-index: 2; margin: -1.6em -1em 0 0; padding-left: 2em;}
.iEvent h5 {border: 2px solid #000; background: #fff; padding: 1.5em 1.5em; margin: 0 0 1.2em 0; }
.iEvent img { width: 100%;}
.iEvent .Td_1 { vertical-align: top; width: 50%; padding-right: 3%;}
.iEvent .Td_2 { vertical-align: top; width: 50%; padding-left: 3%;}
.iEvent .ListPh .bottom { display: none;}
.iEvent .bottom { position: relative; text-align: right; margin: 1.5em 0 4.5em 0; }
.iEvent .bottom .line { background: #000; left: 0; top:15px;  width:47%; }
.iEvent .bottom a.btn.whiteBg { background: transparent; padding: 0; font-size: 0.9375em;}
.iEvent a.btn.whiteBg .arrow { background-position: 0 -16px;}
.iEvent a.btn.whiteBg:hover .arrow { background-position: 0 -34px;}
.iEvent .Table { margin-top:4em;}

/*最新消息*/
.iNews { position: relative;}
.iNews .iContent { width: 870px}
.iNews ul { list-style: none; padding: 0; margin: 0; }
.iNews li { border-bottom: 1px solid #b5b5b5;   }
.iNews li:first-child {border-top: 1px solid #b5b5b5;}
.iNews li:hover { background:#f4f4f4; }
.iNews .Td_1 { width: 130px; vertical-align: top; padding: 1em 0; font-size: 0.875em; }
.iNews .Td_2 { width: auto; vertical-align: top; padding: 0.8em 60px 0.5em 0;}
.iNews .Td_3 { width: 30px; vertical-align: top;padding: 0.8em 0;}
.iNews .Td_3 div { 
	width: 30px; height: 18px; display: inline-block;
	background-image: url("../../images/arrow.png"); 
    background-repeat: no-repeat;
    background-size: 30px 72px;
    -webkit-background-size: 30px 72px; 
    -moz-background-size: 30px 72px;
    -o-background-size: 30px 72px;
	background-position: 0 -35px;
	margin-top: 0.2em;
}
.iNews li.s2 .Td_3 div  { background-position: 0 -17px;}
.iNews .more { text-align: right; margin-top: 0.5em;}
.iNews .more a{ color: #666;}
.iNews .more a:hover{ color: #00abb2;}
/**/
.iJoin { color: #fff; text-align: center;}
.iJoin h2 {color: #fff; text-transform: uppercase; }
.iJoin a { border: 2px solid #000; background: #fff;  width: 165px; height: 55px; position: relative;display: 
	inline-block; padding: 14px 0  0 60px; font-weight: bold; margin: 1.5em;}
.iJoin a img { position: absolute; left: 0; bottom:0; width: 82px; }
.iJoin a:first-child img, .iJoin a:last-child img {left: -1em;;}
.iJoin h4{color: #fff; margin: 0 0 0.5em 0;  }

/*動物聚焦*/
.iFocus {position: relative;}
.iFocus ul { list-style: none; padding: 0; margin: 4em 0 0 0; display: table; width: 100%;}
.iFocus li {  display: table-cell; width:16.66666666666667%;  text-align: center; vertical-align: top; margin: 0;}
.iFocus  .num { position: absolute; left: 38%; top:-30px; z-index: 2;}
.iFocus .num img { width:61px; height: 50px; }
.iFocus .ph { position: relative; z-index: 1; }
.iFocus .ph .photo { overflow: hidden;  } 
.iFocus .ph .photo a{ display: block; transition:transform .3s;
	 width:100%;  height: 470px;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover; 
    -moz-background-size: cover;
    -o-background-size: cover;
	background-position: center center;
	}
.iFocus .ph .photo a:hover  { transform: scale(1.1); }
.iFocus .txt { display: inline-block; background: #fff; padding: 1.3em; margin-top: -40px; z-index: 2; position: relative;}
.iFocus .txt h4 { margin: 0;}
.iFocus .txt .more { text-align: left; line-height: 1;
	 background: url("../../images/arrow.png") no-repeat ;
	background-size: 25px 60px;
    -webkit-background-size: 25px 60px;
    -moz-background-size: 25px 60px;
    -o-background-size: 25px 60px;
	font-size: 0.8125em;
	background-position: right -45px;
}
.iFocus .txt a:hover .more { background-position: right -30px;}
.iFocus .line.whiteBg { width: 20%; right: 0; top: -0.6em;}
.iFocus .line.greenBg { width: 55%; left: 0; bottom: -0.6em;}
.iFocus .iContent { width: 1500px;}

/*分享*/
.iShare { text-align: center;}
.iShare ul { margin: 1em auto 0 auto; padding: 0;}
.iShare li { display: inline-block; margin: 20px; text-align: center; font-size: 0.875em; color: #666;}
.iShare li img { background:#88ba03; -moz-border-radius: 76px; -webkit-border-radius: 76px;border-radius: 76px; margin-bottom: 0.2em;
max-width: 76px; width: 100%;}
.iShare li a:hover img { background:#01bdc5;}

/*footer*/
footer { position: relative; color: #fff;}
footer .top { display: table; width: 100%;}
footer .top .Td_1 { vertical-align: middle; text-align: left;}
footer .top .Td_2 { vertical-align: middle; text-align: right; }
footer a {color: #fff;}
footer a:hover  { opacity: 0.7;color: #fff;}
footer.comPadding {  padding:  4em 0 0 0;}
footer .Td_1 img {width: 100%; max-width: 300px;}
footer .lan { text-align: right; color: #fff; font-weight: bold; font-size: 0.9375em;  }
footer .lan a {margin: 0  0.5em; }
footer .sitemap { }
footer .column { width: 13%; float: left; margin-right: 14%;}
footer .column.s3 {width: 19%;}
footer .column.s4 { float: right; margin: 0;}
footer .column.s4 img { width: 100%;}
.code5205 {display: none; text-align: center; margin-top: 1em; }
.code5205 img {width: 100%; max-width: 200px; height: auto;}
footer .item { margin-top: 3em;}
footer h6 { border-bottom : 1px solid #fff; text-align: center; padding-bottom: 0.3em; }

footer .Table {  margin: 0 auto; width: auto; }
footer .Td { text-align: center;}
footer .txt { display: inline-block;}
footer .txt a { position: relative; padding-left: 10px; font-size: 0.935em; text-align: left; display: block; }
footer .txt a .line {  background: #fff; left: 0; top: 12px; width: 5px;}
footer .bottom { padding: 1em; color: #fff; font-size: 0.8125em; margin-top: 4em; background: #00abb2;}
footer .bottom .Table { width: 100%;}
footer .bottom .Td_1 { vertical-align: top; text-align: left;}
footer .bottom .Td_2 { text-align: right; vertical-align: top;}

footer ul.share { margin: 0.5em 0 0 0; padding: 0; text-align: right; }
footer .share li { display: inline-block; margin-left: 10px; width:40px}
footer .share li img { background:#88ba03; -moz-border-radius: 40px; -webkit-border-radius: 40px;border-radius: 40px; margin-bottom: 0.2em;
max-width: 40px; width: 100%; border: 1px solid #fff;}
footer .share li a:hover {opacity: 1 !important;}
footer .share li a:hover img { background:#01bdc5; }

.index_footer ul.share {display: none;}

/*內頁-------------------------------------------------*/

/*banner*/
.bannerBox { background-color:#88ba03;}
.bannerBox .Table { width: 1226px; margin: 0 auto;min-height: 210px;}
.bannerBox .Td { width: 100%; position: relative;  text-align: center; color: #fff; vertical-align: middle;}
.bannerBox .txt { display: inline-block; padding: 0 1.5em;}
.bannerBox .txt h1 { font-size: 2.1875em;  color: #fff; font-family: 'Titillium Web'; margin-bottom: 0.2em; text-transform: uppercase; line-height: 1;
	text-stroke:2px #000;
    -webkit-text-stroke:2px #000;
    -moz-text-stroke:2px #000; }
.bannerBox .txt div{ font-size:1.435em; display: block;line-height: 1.3;}

.bannerBox .left { position: absolute; left:2em; bottom:0;}
.bannerBox .right { position: absolute; right:2em; bottom:0;}

.bannerBox .left .pic { float: left; margin-left: 48px;  position: relative;}
.bannerBox .right .pic { float: right; margin-right: 48px;  position: relative; bottom: 0;}
.bannerBox .left .pic:first-child { margin-left:0; }
.bannerBox .right .pic:first-child { margin-right:0; }
.bannerBox .pic img { width: 100%; height: auto; vertical-align: top;}

.bannerBox .s1 { bottom: 20px;}
.bannerBox .s2 { bottom: 15px;}
.bannerBox .s3 { bottom: 10px;}


.b_about .s1 { width:99px ; }
.b_about .s2 { width:84px ; }
.b_about .s3 { width:70px ; }
.b_about .s4 { width:52px ; }
.b_about .s5 { width:105px; }
.b_about .s6 { width:84px ; }

.b_events .s1 { width:91px ; }
.b_events .s2 { width:90px ; }
.b_events .s3 { width:88px ; }
.b_events .s4 { width:63px ; }
.b_events .s5 { width:123px; }
.b_events .s6 { width:117px;}

.b_topics .s1 { width:72px ; }
.b_topics .s2 { width:86px ; }
.b_topics .s3 { width:56px ; }
.b_topics .s4 { width:66px ; }
.b_topics .s5 { width:73px; }
.b_topics .s6 { width:139px ; }

.b_action .s1 { width:70px ; }
.b_action .s2 { width:86px ; }
.b_action .s3 { width:93px ; }
.b_action .s4 { width:53px ; }
.b_action .s5 { width:77px; }
.b_action .s6 { width:164px ; }

.b_projects .s1 { width:73px ; }
.b_projects .s2 { width:80px ; }
.b_projects .s3 { width:46px ; }
.b_projects .s4 { width:82px ; }
.b_projects .s5 { width:76px; }
.b_projects .s6 { width:100px ; }

.b_donation .s1 { width:155px; }
.b_donation .s2 { width:71px; }
.b_donation .s3 { width:92px ; }
.b_donation .s4 { width:58px ; }
.b_donation .s5 { width:89px; }
.b_donation .s6 { width:133px ; }




/*內頁共用*/
h3.innerT { text-align: center; color: #fff; padding: 2.5em 0; margin: 0;}
h3.innerT span{ display: block; font-size: 0.875em; font-weight: lighter;}
h3.innerT span.date {font-size: 0.55em;}
h3.innerT span.sT{ font-size: 0.7em; padding-bottom: 0.5em;  }
.upBox { position: relative; margin: -2em 0 1em 0;  text-align: center; min-height: 40px;}
.upBox .share { position: absolute; right: 0; top:0; width: 100px;  }
.upBox .share a { width: 40px; height: 40px;  
	background-image: url("../../images/share_icon.png"); 
	display: inline-block; margin-left: 10px;
    background-color: #fff;
	background-repeat: no-repeat;  
    background-size: 80px 80px; 
	-webkit-background-size: 80px 80px;  
	-moz-background-size: 80px 80px; 
	-o-background-size: 80px 80px; 
    -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; border: 1px solid #88ba03;
	-o-transition: all 0s ease 0s, all 0 ease 0s;
    -webkit-transition: all 0s ease 0s, all 0s ease 0s;
    -moz-transition: all 0s ease 0s, all 0s ease 0s;
     transition: all 0s ease 0s, all 0s ease 0s;
}
.upBox .share a:hover { background-color: #01bdc5; border: 1px solid #01bdc5;}
.upBox .share a.fb { background-position: 0 0; }
.upBox .share a.fb:hover { background-position: 0 -40px; }
.upBox .share a.line {  background-position: -40px 0; position:static; height: 40px; }
.upBox .share a.line:hover { background-position: -40px -40px; }

/*模組上稿區*/

.model{ width: 1000px; margin: 0 auto;}
.mBox { position: relative;  padding-bottom: 2em; margin-bottom: 4.5em;}
.mBox .line { background: #00abb2; width: 145px; bottom: 0; right: -1.2em;; }
.mBox.s2 .line {background: #88ba03; width: 107px; right: auto; left: -1.2em;}
.mBox .dec { font-size: 0.9375em; color: #666; text-align: center;}



h5.mTitle { text-align: center; padding-bottom: 35px; margin: 0 0 1.5em 0; font-size: 1.25em;
	background-image: url("../../images/arrow_down.png"); 
	background-repeat:no-repeat;  
    background-size: 20px 28px; 
	-webkit-background-size: 20px 28px;  
	-moz-background-size: 20px 28px; 
	-o-background-size: 20px 28px; 
     background-position: bottom center;}

.downArrow{ width: 20px; height: 28px; margin: 2em auto -2em auto;
	background-image: url("../../images/arrow_down.png"); 
	background-repeat:no-repeat;  
    background-size: 20px 28px; 
	-webkit-background-size: 20px 28px;  
	-moz-background-size: 20px 28px; 
	-o-background-size: 20px 28px; 
}

.mPh {text-align: center;}
.mPh .photo { margin-bottom: 0.5em;}
.mPh .photo img { vertical-align: top; max-width: 100%;}

.mVideo {}
.mVideo .v{ width: 90%; margin: 0 auto 0.5em auto;}

.mTxt {}
.mTxt a, .mTxt a span { color:#88ba03 !important; text-decoration:underline !important;}
.mTxt a:hover, .mTxt a:hover span { color:#00abb2 !important; }
.mTxt img { max-width:100% !important; height: auto !important; border: 0;}

.mTag {margin-bottom: 4.5em; text-align: center;}
.mTag a {background: #00abb2; padding: 0.5em 1em; margin: 0.5em; color: #fff; white-space: nowrap; display: inline-block;}
.mTag a:hover {background: #01bdc5;color: #fff;}


.mEmbed {} 
.mEmbed .box-16x9 iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.mEmbed .box-16x10 iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

.mEmbed .box-4x5, 
.mEmbed .box-4x3,
.mEmbed .box-1x1, 
.mEmbed .box-9x16 { text-align: center; text-align:-webkit-center;}
.mEmbed .box-9x16 { overflow: hidden;}
.mEmbed .box-9x16 blockquote {max-width: 100% !important ; border: 0 !important; }
.mEmbed .box-9x16 iframe { border: 0 !important; }
.mEmbed .box-4x5 iframe, 
.mEmbed .box-4x3 iframe,
.mEmbed .box-1x1 iframe, 
.mEmbed .box-9x16 iframe { max-width: 100%;height: auto;}

.mEmbed .box-4x5 iframe {aspect-ratio: 4 / 5;}
.mEmbed .box-4x3 iframe {aspect-ratio: 4 / 3;}
.mEmbed .box-1x1 iframe {aspect-ratio: 1 / 1;}
.mEmbed .box-9x16 iframe {aspect-ratio: 9 / 16;}



/*活動資訊*/
.eventList { margin: 5em 0 0 0; }
.eventList .item { margin-bottom: 6.5em; display: table; width: 100%;}
.eventList .item:nth-last-child(2) { margin-bottom: 2em;}
.eventList .phBox { width: 57%; position: relative;}
.eventList .txtBox { width: auto; position: relative; }

.eventList .more { width: 19%; vertical-align: middle; text-align: center; background-color:#00abb2; font-weight: bold;}
.eventList .more a { display: block; }
.eventList .more a, .eventList .more a:hover { color: #fff;}
.eventList .more .arrow { width: 30px; height: 30px; margin: 0.3em auto 0 auto; background-image: url("../../images/arrow2.png");
	background-position: 0 -1px; 
	background-repeat:no-repeat;  
    background-size: 30px 90px; 
	-webkit-background-size: 30px 90px; 
	-moz-background-size: 30px 90px; 
	-o-background-size: 30px 90px;
-moz-border-radius: 30px; -webkit-border-radius: 30px;border-radius: 30px; border: 1px solid #fff;
}
.eventList .more a:hover .arrow { background-position: 0 -61px; background-color: #fff; }

.eventList .ListPh { width: auto;}
.eventList img { width: 100%;}
.eventList h5 { border: 2px solid #000; background: #fff; padding: 1.5em 1.5em 1.5em 4em; margin: -2em 0 0 -1.5em; position: relative; z-index: 2;text-align: center;}
.eventList .line { width:45%;  right: 0px; background-color:#00abb2;}
.eventList .phBox .line { top:-1em; display: none; right: auto; left: -1em; width:25%; }
.eventList .txtBox .line {bottom: 0;}

.eventList .date { font-weight: bold; margin: 2em 3em 1.5em 3em; text-align: center; font-style: italic;}
.eventList .date span { white-space: nowrap; color:#00abb2; margin-right: 1em; font-style: normal;}
.eventList .dec { margin: 0 3em 2em 3em;}
.eventList .btnBox { display: none;}
.eventList a.btn { background-color:  #00abb2; }
.eventList a.btn:hover { background-color:  #01bdc5; }

.eventList .item.s2 .more, .eventList .item.s2 .line, .eventList .item.s2 .btn { background-color: #88ba03;}
.eventList .item.s2 .more a:hover .arrow { background-position: 0 -31px;  }
.eventList .item.s2 .date span {color:#88ba03 }
.eventList .item.s2 a.btn:hover { background-color: #01bdc5; }

/*活動資訊-場次頁*/
.eTime { display: inline-block; font-weight: bold; font-size: 1.25em; color:#88ba03; padding-top: 0.3em; margin-bottom: 1em; }
.eTime div { white-space: nowrap; display: inline-block}
.eTime .time { padding-left: 28px;
	background-image: url("../../images/time_1.png");
	background-position: 0 3px; 
	background-repeat:no-repeat;  
    background-size: 24px 24px; 
	-webkit-background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-o-background-size: 24px 24px;
}
.eTime .time.s2 {background-image: url("../../images/time_2.png");}

.sList {}
.sList .item { background: #f4f4f4; padding: 1.5em 3em 1.5em 3em; margin-bottom: 3em;} 
.sList .phBox { width: 40%; vertical-align: top;}
.sList .phBox .photo img {width:100%;;}
.sList .txtBox { width: auto; padding : 0 3em; vertical-align: middle;}
.sList .num { position: absolute; left: -30px; top:40%; z-index: 2;}
.sList .num img { width:61px; height: 50px; }
.sList .txtBox ul { margin: 0; padding: 0; display: table;}
.sList .txtBox li { display: table-row; font-size: 0.9375em;}
.sList .txtBox .Td_1 { width:50px; vertical-align: top; color:#88ba03; }
.sList .txtBox .Td_2 { width:auto; vertical-align: top; }
.sList .txtBox .dec { margin-bottom: 1.2em;  }

.sList .more { width: 100px; vertical-align: middle;}
.sList .btnBox{ display: table;width: 100%;}
.sList .more a {display: table-cell; width: 100%; height: 100px; background-color: #00abb2; color: #fff;  font-weight: bold; padding-top: 5px;
 line-height: 1.2; vertical-align: middle; text-align: center;-moz-border-radius: 100px; -webkit-border-radius: 100px;border-radius: 100px; letter-spacing: 0}
.sList .more a:hover{background-color: #01bdc5; }

.sList .more .arrow { /*width: 30px; height: 30px;  margin: -5px auto 0 auto;background-image: url("../../images/arrow2.png");
	background-position: 0 -1px; 
	background-repeat:no-repeat;  
    background-size: 30px 90px; 
	-webkit-background-size: 30px 90px; 
	-moz-background-size: 30px 90px; 
	-o-background-size: 30px 90px; */
	width: 30px; height: 18px;margin: 5px auto 0 auto;
	background-image: url("../../images/arrow.png");
background-repeat: no-repeat;
background-size: 30px 72px;
-webkit-background-size: 30px 72px;
-moz-background-size: 30px 72px;
-o-background-size: 30px 72px;
background-position: 0 0;
	
}
a.back { text-decoration: underline;}

/**/
.eInfo { margin:2.5em 0 3.5em 0; display: table; width: 100%;}
.eInfo .Td { vertical-align: top; width:auto; }
.eInfo .Td_1, .eInfo .Td_2, .eInfo .Td_3, .eInfo .Td_4 { border-left: 1px solid #88ba03; padding:1.3em; vertical-align: top; text-align: center;line-height: 1.4; }
.eInfo .Td_1 { width:30%;}
.eInfo .Td_2 { width:auto;}
.eInfo .Td_3 { width:17%;}
.eInfo .Td_4 { width:17%;}
.eInfo .Td_5 { width:230px; vertical-align: middle; border-left: 1px solid #88ba03; border-right: 1px solid #88ba03; padding:1.3em; text-align: center;}
.eInfo h6 { color:  #88ba03; margin-bottom: 0.3em; white-space: nowrap;}
.eInfo span { display: block; font-size: 0.875em; line-height: 1.4; color: #666; margin-top: 0.1em;}

.eInfo .icon {  display: inline-block; height: 86px; padding-left: 83px; line-height: 86px; color:  #88ba03; font-weight: bold; text-align: left;
	background-position: 0 0; 
	background-repeat:no-repeat;  
    background-size: 86px 86px; 
	-webkit-background-size: 86px 86px;  
	-moz-background-size: 86px 86px;  
	-o-background-size: 86px 86px; }

.eInfo .timeout {background-image: url("../../images/icon_event01.png");}
.eInfo .full {background-image: url("../../images/icon_event02.png");}
.eInfo .free {background-image: url("../../images/icon_event03.png");}
.eInfo .notready {background-image: url("../../images/icon_event04.png");}



/*pages*/
.pages { text-align:center; padding:2em 0;}
.pages a { margin: 0 0.1em; background: #ececec; display: inline-block; width: 50px; height: 50px;}
.pages a img { width: 50px; height: 50px;}
.pages a:hover { background: #f4f4f4;}
.pages a.inactive {  cursor: default; pointer-events: none;} 
.pages a.inactive img { opacity: 0.3;}
.pages .num { height: 50px;  background: #fff; display: inline-block;margin: 0 0.1em; vertical-align: top;border: 1px solid  #ececec;padding: 2px 0 0 0;}

.pages .selector {background: #fff;
  width: 70px;
  padding: 2px;
}

.pages .selector, .pages .selector:hover {  display:inline-block; overflow:hidden;
	background:url(../../images/select_arrow_gray.png) right 16px no-repeat ; 
	border:0px;
	-webkit-background-size: 21px 12px; 
	-moz-background-size: 21px 12px; 
	-o-background-size: 21px 12px; 
	background-size: 21px 12px; 
}

.pages select{ text-align:left; padding: 10px 40px 7px 8px; width:90px;cursor:pointer; line-height: 1em;outline:none;}

/*video*/
.videoBox { position: relative; width: 84.82%; margin: 0 auto 3em auto;}
.videoAll { width: 81.25%; margin: 0 auto; position: relative;}
.videoAll .line { width:10%; right: -3%; top: -17px; }
.videoBox .swiper-wrapper { }
.videoBox .swiper-button-prev { left: 0 !important; top: 40%!important;}
.videoBox .swiper-button-next { right: 0 !important;  top: 40%!important;}
.videoBox .swiper-pagination { width: 100% !important; text-align: center; }
.videoBox .swiper-pagination-bullet-active.swiper-pagination-bullet { background: #88ba03 !important; opacity: 1 !important;}
.videoBox .swiper-pagination-bullet {opacity: 0.1 !important;}
.videoBox .swiper-button-prev, .videoBox .swiper-button-next { width:44px !important; height: 44px !important;
-moz-border-radius: 44px; -webkit-border-radius: 44px;border-radius: 44px; background-color:#88ba03 ;}

.videoBox .swiper-button-prev:hover, .videoBox .swiper-button-next:hover{background-color:#00abb2;}
.videoBox h6 { text-align: center; margin: 1.5em 0;}

.swiper-pagination-bullet { width: 12px !important; height: 12px !important; margin: 0 0.3em !important;}


/*動物新知 列表*/
.tList { padding: 1.5em 0 0 0;}
.tList .item { margin-bottom: 5em; } 
.tList .txtBox {position: relative; width: 25.28%; vertical-align: top;}
.tList .phBox { width: 53%; vertical-align: top;}
.tList .phBox .photo img {width:100%;}
.tList  h2 { margin-bottom: 25%; position: relative;}
.tList  h2 .line { width: 60px;  left: 0; bottom: -12px;}
.tList .dec { display: inline-block; background: #fff; padding: 1.5em  1.5em 1.5em 0; position: relative; z-index: 2; margin: 0 -4.5em 0 0;}
.tList .more { position: relative;  vertical-align: middle;}
.tList .num { position: absolute; right: 0; top:0; z-index: 2;}
.tList .num img { width:61px; height: auto; }
.tList a.btn {  z-index: 2; background: #00abb2; }
.tList a.btn:hover, .tList .item.s2 a.btn:hover { background: #01bdc5;}
.tList .more a.btn {margin: 0 0 0 -1em;position: relative; }
.tList .txtBox a.btn, .tList .phBox .num, .tList .txtBox .num  { display: none; }
.tList .more .line { width: 60%; right: 0; bottom:0;}
.tList  .line {width: 60%; background:#00abb2; }

.tList .item.s2 .line {background:#88ba03;}
.tList .item.s2 a.btn { background: #88ba03;}

/*動物新知、行動與發聲 文章列表*/
.aT{ text-align: center;}
.aT h5 { background-position: 0 0;  line-height: 90px; margin:  0; padding-left: 80px; display: inline-block;
	background-repeat:no-repeat;  
    background-size: 72px 90px; 
	-webkit-background-size:72px 90px;
	-moz-background-size: 72px 90px;  
	-o-background-size: 72px 90px;}
.aT.s1 h5 { background-image: url("../../images/icon_article01.png")}
.aT.s2 h5 { background-image: url("../../images/icon_article02.png")}

.aList { }
.aList .T { position: relative; z-index: 2; margin: -1.6em -1em 0 0; padding-left: 7%;}
.aList h5 { border: 2px solid #000; background: #fff; padding: 1.5em 1.5em; margin: 0 0 1.2em 0; }
.aList .line {  left: -1em; top:-1.5em;background: #00abb2; width:10%; }
.aList img { width: 100%;}
.aList .Td_1 { vertical-align: top; width: 50%; padding-right: 4%;}
.aList .Td_2 { vertical-align: top; width: 50%; padding-left: 4%;}
.aList .ListPh { width: 95%; margin: 0 auto 0 auto;}
.aList .ListPh .bottom { display: none;}
.aList .bottom { position: relative; text-align: right; margin: 1.5em 0 5.5em 0; }
.aList .date { font-size: 0.8125em; float: left;padding: 5px 0 0 0; font-weight: bold; }
.aList .bottom a.btn.whiteBg { background: transparent; padding: 0; font-size: 0.9375em; color:#00abb2;}
.aList .bottom a.btn.whiteBg:hover { color:#01bdc5; }
.aList a.btn.whiteBg .arrow { background-position: 0 -34px;}
.aList a.btn.whiteBg:hover .arrow { background-position: 0 -34px;}
.aList .Table { margin-top:4em;}
.aList .Td_1 .line { }

.aList .s2 a.btn.whiteBg .arrow { background-position: 0 -16px;}
.aList .s2 a.btn.whiteBg:hover .arrow { background-position: 0 -34px;}
.aList .s2 .bottom a.btn.whiteBg:hover { color:#01bdc5; }
.aList .s2 .line { background: #88ba03; width:20%;}
.aList .s2 .bottom a.btn.whiteBg { color:#88ba03; }

/*行動與發聲 總覽列表*/
.actionList { margin-top: 1em;}
.actionList .item { width: 47%; float:left; padding-bottom: 4.5em; } 
.actionList .Td { width: auto; padding-right: 1.5em;vertical-align: top; position: relative;}
.actionList .num.Td {width: 61px;}
.actionList .num img { width:61px; height: auto; }
.actionList .line { background: #00abb2;}
.actionList  h3 { margin:0; position: relative;}
.actionList  h3 .line { width: 10%;  left: 0; bottom: -5px;}
.actionList .ListPh { width: 92%; margin: 1.5em auto 0 auto;}
.actionList .ListPh .num { position: absolute; right: -5%; top:17%; display: none; z-index: 2;}
.actionList .txtBox { padding: 0 15% 2em 0; position: relative; width: 92%; margin: 0 auto 0 auto;}
.actionList .txtBox .line { width: 20%; right: -5%; bottom: 0; }
.actionList .txtBox .btnBox { display: none; text-align: left; margin: 0 ;}
.actionList .dec { background: #fff; padding: 1.5em  1.5em 1.5em 0; position: relative; z-index: 2; margin: -1.5em 0 0 0;}
.actionList a.btn {background: #00abb2; }
.actionList .ListPh a.btn { position:absolute; z-index: 2; right: -20px; top:17%; }
.actionList a.btn:hover, .antionList .item.s2 a.btn:hover { background: #01bdc5;}

.actionList .item.s2 .line, .actionList .item.s2 a.btn  { background: #88ba03;}
.actionList .item.s2 .line {width: 40%;}

/*友善街貓城市捕捉公告列表*/
.catList { margin-bottom: 2em; }
.catList .item.Td { width: 50%;  padding: 0 3% 4.5em 3%; position: relative;}
.catList .item .line{ width: 30%; left: 0; bottom: 3em;}
.catList .ListPh {  margin: 0 auto 0 auto;}
.catList .txtBox { padding: 1.5em 1.5em 2.5em 1.5em; position: relative; width: 90%; margin: -2.5em auto 0 auto; background: #fff; z-index: 2;}
.catList .nos { margin-bottom: 1.5em;width: 100%; display: table;}
.catList .nos .Td_1 { width: auto; vertical-align: top;  font-weight: bold; font-size: 1.125em;}
.catList .nos .Td_2 { width: 28px; vertical-align: top;}
.catList .nos .icon { width: 28px; height: 28px; 
	background-repeat:no-repeat;  
    background-size: 28px 28px; 
	-webkit-background-size:28px 28px;
	-moz-background-size: 28px 28px;  
	-o-background-size: 28px 28px;}
.catList ul.txt { margin: 0; padding: 0; list-style: none; width: 100%; display: table;}
.catList .txt { display: table-row;}
.catList .txt .Td_1 { width: 110px; vertical-align: top; color: #8d8d8d; font-size: 0.875em; font-weight: bold; padding-top: 4px;}
.catList .txt .Td_2 { width: auto; vertical-align: top; line-height: 1.3; padding-top: 0.5em;}

.catList .item.boy .icon { background-image: url("../../images/icon_boy.png")}
.catList .item.girl .icon { background-image: url("../../images/icon_girl.png")}
.catList .item.boy .line {background: #00abb2;}
.catList .item.girl .line {background: #88ba03;}
.catList .item.boy .nos { color:#00abb2;}
.catList .item.girl .nos { color:#88ba03; }

/**/
.selector, .selector:hover {  display:inline-block; overflow:hidden;
	background:url(../../images/select_arrow.png) right 16px no-repeat ; 
	border:0px;
	-webkit-background-size: 21px 12px; 
	-moz-background-size: 21px 12px; 
	-o-background-size: 21px 12px; 
	background-size: 21px 12px; 
}

.selectBox { margin: 0 0 2em 0; padding: 0 3% 0 0; list-style: none; text-align: right;}
.selectBox h6 { margin: 0;display: inline-block;vertical-align: top;line-height: 45px;}
.selectBox li {display: inline-block; margin: 0 0 0 2.5em; vertical-align: top; }
.selectBox li:first-child {margin: 0 ;}
.selectBox .selector{ margin-left:0.5em; width:180px;  border: 1px solid #000; padding: 2px;}
.selectBox  select{ text-align:left; padding:7px 40px 7px 7px; width:200px;cursor:pointer;}
/*主題專頁 列表*/
.pList { padding: 1.5em 0 0 0;}
.pList .item { margin-bottom: 5em; position: relative;}
.pList .phBox { width: 75.69%; vertical-align: top; padding-right: 3em;}
.pList .phBox .photo img { width:100%;}
.pList .txtBox { width: auto; vertical-align: top; padding: 0 0 70px 0;position: relative;}
.pList h5 { margin-bottom: 0.8em; }
.pList .dec { }
.pList .btnBox { position: absolute; right: 0; bottom:0; width: 100%; margin: 0;}
.pList a.btn { background: #00abb2;  }
.pList a.btn:hover, .pList .item.s2 a.btn:hover { background: #01bdc5;} 
.pList a.btn .iconBox {position: relative; display: inline-block; width: 48px;}
.pList a.btn .icon{ position: absolute;  right: -5px; bottom:-18px; width: 48px; height: 72px;
    background:url(../../images/icon_p.png) 0 0 no-repeat ; 
	-webkit-background-size: 48px 72px; 
	-moz-background-size: 48px 72px; 
	-o-background-size: 48px 72px; 
	background-size: 48px 72px;  }

.pList  .line { width: 8%; background:#00abb2; right: 0; top: -1.5em; }
.pList .item.s2 .line {background:#88ba03; width: 13%; right:auto; left: 0; }
.pList .item.s2 a.btn { background: #88ba03;}

/*主題說明*/
.donateTxt { width: 800px; margin: 0 auto;}

.actionTxt {}
/*捐款專案列表*/
.dList { margin: 5em 0 1em 0 }
.dList h5 { padding: 0; margin: 0 0 1.2em 0; position: relative;}
.dList .line { left: -1em; top:-1em; background: #00abb2; width:10%; }
.dList .ListPh {}
.dList img { width: 100%;}
.dList .dec{ margin: 1em 0 2em 0;}
.dList .Td { vertical-align: top; width: 50%; padding: 0 3%;}
.dList .bottom { display: table; width: 100%; margin-bottom: 6em;}
.dList .goal { display: table-cell; width: auto; vertical-align: top;}
.dList .more {display: table-cell; width: auto;vertical-align: top; text-align: right;} 
.dList .goal div { border-left:4px solid #00abb2; font-size: 1.625em; color: #00abb2; padding-left: 0.8em; line-height: 1.2; font-weight: bold;}
.dList .goal span { color: #8F8F8F; font-size:0.5769em; display: block; font-weight: lighter;}
.dList .ListPh h5 { display: none;}
.dList a.btn { background: #00abb2;  }
.dList a.btn:hover, .dList .Td.s2 a.btn:hover { background: #01bdc5;} 

.dList .Td.s2 .line { background: #88ba03; }
.dList .Td.s2 a.btn { background: #88ba03;}
.dList .Td.s2 .goal div { border-left:4px solid #88ba03;  color: #88ba03;}

/*捐款專案內頁*/
.dInfo {}
.dInfo .detail.Td { width: 73.4%; padding-right: 5.9%; vertical-align: top;}
.dInfo .donate.Td { width: auto;vertical-align: top;}

.dList .top { /*display: table; width: 100%; margin-bottom: 6em;*/}
.dInfo .goal { margin-bottom: 1em; /*display: table-cell; width: auto; vertical-align: top;*/}
.dInfo .goal div { border-left:4px solid #00abb2;  padding-left: 0.8em; line-height: 1.2; font-weight: bold;}
.dInfo .goal div strong {font-size: 1.625em; color: #00abb2; margin-left: 5px;}
.dInfo .goal span { color: #8F8F8F; font-size:0.9375em; display: block; font-weight: lighter;}
.dInfo .detail .top, .dInfo .donate .btnBox { display: none;}
.dInfo .donate a.btn { display: block;}
.dInfo .btnBox { margin: 3em 0;}

.dInfo .SIP{margin-top: 3em;}
.dInfo .oneTime{margin-top: 3em;}
.dInfo h5 { margin: 0 0 0.3em 0;}
.dInfo ul {margin: 0; padding: 0; list-style: none;}
.dInfo li {margin-bottom: 0.5em; }
.dInfo .Td_1 { background: #f4f4f4;padding: 1em 1.2em 1em 1.5em; }
.dInfo .t1.Td { width: auto; padding: 0 1em 0 0;font-weight: bold; line-height: 1.3; color: #333;}
.dInfo .t2.Td { width: 100px; font-size: 0.8125em; color: #8F8F8F; line-height: 1;  }
.dInfo .t2.Td span { font-size: 2.3em; font-weight: bold; color: #88ba03; display: block; }
.dInfo .Td_1, .dInfo .Td_2, .dInfo .Td { vertical-align: middle;  }

.dInfo .Td_2 { width: 40px; position: relative; height: 100%; background:#88ba03; text-align: center;}
.dInfo a:hover .Td_2 { background:#01bdc5;}
.dInfo a:hover .Td_1 { background:#eaeaea;} 
.dInfo a:hover .t2.Td span {color: #00abb2;}
.dInfo .Td_2 .arrow { width: 30px; height: 30px; display: inline-block; background-image: url("../../images/arrow2.png");  margin:22.5px 0;
	background-position: 0 5px; 
	background-repeat:no-repeat;  
    background-size: 30px 90px; 
	-webkit-background-size: 30px 90px; 
	-moz-background-size: 30px 90px; 
	-o-background-size: 30px 90px;
}

/*最新消息 年度工作成果 */
.nList {}
.nList .Table { border-collapse: separate; border-spacing: 3em 2em; }
.nList .Td {vertical-align: middle; border: 1px solid #000; padding: 1.5em;}
.nList.s2 .Td { width: 50%;}
.nList.s3 .Td { width: 33.333%;}
.nList .txtBox { display: table; width: 100%; border-spacing:0; }
.nList h5{ display: table-cell; width: auto;vertical-align: middle; padding-right: 1.5em; }
.nList h5 span{ display: block; font-size: 0.833em; color:#88ba03; font-weight: bold; }
.nList .more { display: table-cell; width: 30px; vertical-align: middle;}
.nList .arrow{ 
	width: 30px; height: 18px; display: inline-block;
	background-image: url("../../images/arrow.png"); 
    background-repeat: no-repeat;
    background-size: 30px 72px;
    -webkit-background-size: 30px 72px; 
    -moz-background-size: 30px 72px;
    -o-background-size: 30px 72px;
	background-position: 0 -18px ;
}
.newsList a:hover .arrow{ 	background-position: 0 -36px ;}


/*共用編輯器*/
.edit {margin-bottom: 0em;}
.edit img { max-width:100% !important; height: auto !important; border: 0;}
.edit a{ color:#88ba03; text-decoration:underline; font-weight: bold;}
.edit a:hover{ color:#00abb2; }
.edit p{ max-width: 1000px; margin: 1em auto;}

.edit h5{ font-size: 1.25em;}
.edit iframe html, .edit iframe body{font-family:'Open Sans', Geneva,'Microsoft JhengHei',"微軟正黑體", sans-serif !important; letter-spacing:0.5px; font-size:100% !important;}


.edit donate{}


.btnBox{ text-align:center;  margin:1.5em 0;}

.edit a.btn,.edit a.btn:hover{color:#fff; text-decoration: none;}

.edit iframe, .edit object, .edit video, .edit embed {
  max-width: 100%;
}

/*download*/
.download { margin-top: 3em;}
.download ul{ margin: 0; padding: 0; list-style: none;}
.download li { border-bottom: 1px solid #b5b5b5; padding: 1em;}
.download li:first-child {border-top: 1px solid #b5b5b5;}
.download .Td_1{ width:auto; vertical-align:middle; padding-right: 1em; }
.download .Td_2{ width:100px; vertical-align:middle; font-size: 0.875em}
.download .Td_2 img{ width:37px; height:auto; margin: 0 5px 0 0; vertical-align: middle;}
.download li:hover {background: #f4f4f4;}

/*pdf*/
.pdfIframe iframe{width: 100%;  height: 800px; border:1px solid #000000;}
/**/
.tagT { text-align: center; font-size: 1.2em; margin-bottom: 1.5em;font-weight: bold;}
.tagT span { color: #88ba03; white-space: nowrap; margin: 0 0.1em; }
/**/
.responsive-iframe-container{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.responsive-iframe-container iframe,
.responsive-iframe-container object,
.responsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*後端編輯器*/

.edit_about{}
.edit_about .grayBg{text-align: center; }
.edit_about .Td{ width: 15%; vertical-align: bottom;}
.edit_about .Td img {vertical-align: bottom; }
.edit_about .Td_1{ width: auto; padding: 2em 1.5em;text-align: left; }
.edit_about .care{text-align: center; }
.edit_about .care div{ width:244px; display: inline-block; margin: 0 0 1.5em 0;}
.edit_about .care h5 {margin: 0; font-size: 1.125em;}
.edit_about .care span{ font-size: 0.9375em; display: block;}
.edit_about .promote{ margin: 0; list-style: none; display: inline-block;}
.edit_about .promote li{ display: table;}
.edit_about .promote .Td_2{ width:40px;text-align: left; font-size:1.4em; font-weight: bold; color: #88ba03;line-height: 1.5; vertical-align: middle;}
.edit_about .promote .Td_3{ width:auto;text-align: left; vertical-align: middle;}

.edit_about .focus {font-weight: bold; font-size: 1.05em;}
.edit_about .focus .t{ font-size: 1.25em; color: #fff;  padding: 0.3em 1.5em; -moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 20px;  display: inline-block; margin: 0.4em 0 1.5em 0}

.edit_team {}
.edit_team .grayBg { margin-bottom: 0.5em; padding: 1.5em 3em;}
.edit_team .grayBg .Td_1{ width: 240px; vertical-align: middle;}
.edit_team .grayBg .Td_2{ width: auto;vertical-align: middle; color: #333;}
.edit_team h6{ margin-bottom:0;}
.edit_team .tAll{ text-align: center;}
.edit_team .tAll h6{ margin:0.3em 0 0 0 ; font-size: 1.06666em;}
.edit_team .tAll div{  display: inline-block; vertical-align: top; width:240px; margin: 0 33px 1.5em 33px; height: 260px; font-size: 0.9375em;color: #333; line-height: 1.3}

.edit_contact{}
.edit_contact .grayBg{text-align: center; padding: 2em; }
.edit_contact .promote { margin: 0;  display: inline-block; padding: 0;}
.edit_contact .promote li{ display: table; }
.edit_contact .promote .Td_1{ width:80px;text-align: right; vertical-align: top;}
.edit_contact .promote .Td_2{ width:12px;text-align: center; vertical-align: top;}
.edit_contact .promote .Td_3{ width:auto;text-align: left; vertical-align: top;}

.edit_dWay{}
.edit_dWay .grayBg{ padding: 3em 2em; }
.edit_dWay .wayAll{ text-align: center;}
.edit_dWay .item { text-align: left;max-width:100%; width:305px; display: inline-block; height: 350px; margin: 0 2.5em 2em 2.5em;  vertical-align: top;}
.edit_dWay .item .grayBg{ padding: 0.5em 0.8em; font-size: 0.9375em; color: #666666; margin-top: 0.5em;}
.edit_dWay .item .T{width: 140px; height: 140px;  color: #fff; margin: 0 auto 1.2em auto;background: #88ba03;
	-moz-border-radius: 140px;
	-webkit-border-radius: 140px;
	border-radius: 140px; display: table; border:1px solid #88ba03;}
.edit_dWay .item h4{ display: table-cell; height: 140px;text-align: center; vertical-align: middle; color:#fff; line-height: 1.2; font-size: 1.1875em;  }
.edit_dWay .item h4 a{ display: block; color: #fff; text-decoration: none;}
.edit_dWay .item h4 a:hover{text-decoration: underline;}
.edit_dWay .item p{ text-align: center;}

.topicsTxt {}
.topicsTxt h4 {  margin: 0 0 0.3em 0;}
.topicsTxt h4 span { white-space: nowrap;}
.topicsTxt .Table{width: 80%; margin: 0 auto;}
.topicsTxt .Td_1 {width: 300px; vertical-align: top;}
.topicsTxt .Td_1 img {max-width: 300px; height: auto; width: 100%;}
.topicsTxt .Td_2 {width: auto;vertical-align: middle; padding-left: 2em;}



.edit_gift{}

.edit_gift  h6 { padding: 0; margin: 0 0 0.5em 0; position: relative; font-size: 1.125em; min-height: 40px; line-height: 1.3;}
.edit_gift  h6 a{ color: #000 !important; text-decoration: none !important;}
.edit_gift  h6 a:hover{ color: #00abb2 !important;}
.edit_gift .ListPh {}
.edit_gift .photo { margin-bottom: 1.2em;}
.edit_gift  img { width: 100%;}
.edit_gift  .dec{ color: #88ba03;text-align: center;}
.edit_gift .Td { vertical-align: top; width: 50%; padding: 0 3%;}
.edit_gift .bottom { display: table; width: 100%; margin-bottom: 6em;}
.edit_gift .goal { display: table-cell; width: auto; vertical-align: middle;border-left:4px solid #00abb2;  color: #00abb2; padding-left: 0.8em; line-height: 1.2; font-weight: bold; font-size: 1.125em;}
.edit_gift .more {display: table-cell; width: auto;vertical-align: middle; text-align: right;} 
.edit_gift a.btn { background: #00abb2;  }
.edit_gift a.btn:hover, .edit_gift .Td.s2 a.btn:hover { background: #01bdc5;} 


.edit_gift .Td.s2 a.btn { background: #88ba03;}
.edit_gift .Td.s2 .goal { border-left:4px solid #88ba03;  color: #88ba03;}


/*搜尋結果頁*/

.SResult {width: 85%; margin: 0 auto;}
.SResult .SBox { display: table; width: 100%;}
.SResult .memo  {color: #88ba03; font-size: 0.9375em;font-weight: bold; margin: 0.5em 0 2.5em 0;}
.SResult .Td_1 { width: auto;}
.SResult .Td_2 { width: 115px;}
.SResult  h5 { margin-bottom:0.5em; }
.SResult input{ border: 1px solid #88ba03; height: 2.5em; line-height: 2.5em;  width:100%; background: #fff; font-weight: bold; font-size: 1.125em; }
.SResult input:hover{ border: 1px solid #01bdc5;}
.SResult a.btn {height: 2.5em; line-height: 2.5em; padding: 0 2em;}
.SResult .keyWord {color: #88ba03;font-weight: bold;}
.SResult a:hover .keyWord {color: #00abb2;}
.SResult ul{margin: 0; padding: 0; list-style: none;}
.SResult li {border-bottom: 1px solid #000; margin: 1.5em 0; padding: 0 0 1.5em 0;}

/**/
.privacyBox { width: 100%; margin: 0 auto; max-width: 996px;}

.privacyBox h4 { margin: 1em 0;}