@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');
/*====中文版專用====*/
/*
@font-face{ font-family: "PingFang TC"; font-weight:100; src: local("PingFang TC Ultralight") }
@font-face{ font-family: "PingFang TC"; font-weight:200; src: local("PingFang TC Thin") }
@font-face{ font-family: "PingFang TC"; font-weight:300; src: local("PingFang TC Light") }
@font-face{ font-family: "PingFang TC"; font-weight:400; src: local("PingFang TC Light") }
@font-face{ font-family: "PingFang TC"; font-weight:500; src: local("PingFang TC Regular") }
@font-face{ font-family: "PingFang TC"; font-weight:600; src: local("PingFang TC Medium") }
@font-face{ font-family: "PingFang TC"; font-weight:700; src: local("PingFang TC Semibold") }
@font-face{ font-family: "PingFang TC"; font-weight:800; src: local("PingFang TC Heavy") }
*/


/* ===============  HTML5 display definitions  =============== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; } 
[hidden] { display: none; }

/* ===============  Base  =============== */
html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;  } 
body { width:100%; height: 100%; margin: 0; overflow-x:hidden; position:relative; font-size: 100%; line-height: 1;  color: #3f3f3f; padding-right: 80px;  
font-family: 'Open Sans', 'PingFang TC', 'Noto Sans TC', 'Heiti TC','微軟正黑體', serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern';  -webkit-overflow-scrolling: touch;  }
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; } 
a{ color: inherit; text-decoration:none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; }
a:active, a:hover {/*outline: 0*/; }
img { border: 0;}
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
dl, menu, ol, ul { margin: 0; }
ul{ list-style:none; list-style-image: none; }
table { border-collapse: collapse; border-spacing: 0; }
 
/* ===============  Forms  =============== */
form { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; line-height: 1.5; }
legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px;  }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;  }
button, input { line-height: normal; }
button, html input[type="button"], 
input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
input[type="search"] { /*-webkit-appearance: textfield;*/  -webkit-appearance: none;  -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
/*去除input藍色框框
input,button,select,textarea{ outline:none; }
*:focus { outline: none; } 
input:focus, textarea:focus{ outline:none; }*/


/* ===============  Typography  =============== */
mark { background: #ff0; color: #000; } 
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
hr{ height:1px; background: #CCC; border: none; } 

p{ line-height: 160%; letter-spacing: .1em; margin-bottom: 1em;  } 
::selection { background: #222; color: #fff;}
::-moz-selection { background: #222; color: #fff; } 

/* ===============  Global  =============== */
.f60{ font-size: 3.75rem; }
.f36{ font-size: 2.25rem; }
.f34{ font-size: 2.125rem; }
.f30{ font-size: 1.875rem; }
.f25{ font-size: 1.5625rem; }
.f24{ font-size: 1.5rem; }
.f22{ font-size: 1.375rem; }
.f20{ font-size: 1.25rem; }
.f18{ font-size: 1.125rem; }
.f17{ font-size: 1.0625rem; }
.f15{ font-size: .9375rem; }
.f14{ font-size: .875rem; }
.f13{ font-size: .8125rem; }
.f12{ font-size: .75rem; }
.f11{ font-size: .6875rem; }

h1,h2,h3,h4,h5,h6{ font-weight: inherit; letter-spacing: .05em;   } 
.fontSTY1{ font-family: 'Cuprum', sans-serif; }

.aaUnderlineHover:hover{ text-decoration: underline;  }
.txtCenter{ text-align: center; }
.txtRight{ text-align: right; }
.txtLeft{ text-align: left; }
.txtShadow{ text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.edit{ line-height: 180%; }
.edit img,
.imgFull img{ max-width: 100%; height:auto; vertical-align:top;  }

.edit ul{ margin: 0 0 2em 0; }
.edit li{ padding: .2em 0 .2em 1.5em; position: relative; letter-spacing: 1px; }
.edit li:before{ content: ''; width: 4px; height: 4px; background: #dda303; display: inline-block; vertical-align: middle; position: absolute; top:.9em; left: 0; border-radius: 50em; }

.R{ float:right; }
.clearfix:after{ content:''; clear: both; display:table;  }

.posREL{ position: relative; }
.lineH{ line-height: 160%;  }
.atCenter{ margin-left: auto; margin-right: auto; }

.colorGrayAAA{ color: #aaa; }
.colorGray555{ color: #555; }
.colorGray666{ color: #666; }
.colorGray888{ color: #888; }
.colorGrayBA{ color: #bababa; }
 
.colorRed{ color: #ff0000; } 
.colorGreen{ color: #00817b; } 
.colorYellow{ color: #dda303; } 
 

/* ===============  container  =============== */   
.container,
.containerM,
.containerS{ width: 90%; margin-left:auto; margin-right:auto;   } 
.container{  max-width: 1400px;  }
.containerM{  max-width: 1200px;  }
.containerS{ position: relative; max-width: 800px;  }  
.wrapper{ width: 90%; margin-left:auto; margin-right:auto;  }
.posREL{ position: relative; }

.flex{ -js-display: flex; display: -ms-flexbox; display: -webkit-box; display: -webkit-flexbox;  display: -webkit-flex; display: flex; 
-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;  }  
.spaceBetween{ -ms-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; }  
.spaceAround{ -ms-justify-content: space-around; -webkit-justify-content: space-around; justify-content: space-around; }
.flexCenter{ -ms-flex-align: center; -webkit-align-items: center;  align-items: center;}
 
 

/* ===============  tomain    =============== */
a.to-main {position: absolute;left: 0;top: -2em;outline-color: transparent;-webkit-transition: top .1s ease-in;transition: top .1s ease-in;border: #ffbf47 solid .4rem;background: #ffbf47;color: #000;font-weight: 700;}
a.to-main:focus {padding: .5rem;background: #2b358c;color: #fff;position: absolute;top: 0;left: 0;-webkit-transition: top 1s ease-out;transition: top 1s ease-out;z-index: 100;}



/* ===============  header    =============== */
#header{ width: 80px; height: 100%; padding: 15px; position: fixed; right: 0; top:0; background: #eeeeee; text-align: center;z-index: 99;  }
#header:after{ content:''; display: block; clear: both; } 
 
.menuLOGO{ position: absolute; top:35%; /*top:calc( 50% - 60px);*/ left: 0; right: 0; width: 1em; height: 18em;  /*width: 40px;height: 86px;*/ margin: auto; display: inline-block; font-size: 1rem;-webkit-writing-mode: vertical-lr;-ms-writing-mode: tb-lr;writing-mode: vertical-lr; white-space: nowrap; letter-spacing: .2em; text-align: center; }
.menuLOGO img,
.menuLOGOXS img{ display: inline-block; vertical-align: top; max-width: 100%;   }
.menuLOGO small,
.menuLOGOXS small{ opacity: 0; visibility: hidden; overflow:hidden; width: 0px; height: 0px; display: inline-block;    }
.menuLOGOXS{ /*width: 150px;*/ display:none; font-size: .9rem; line-height: 1.3; /*color: #00817b;*/  } 
.menuLOGOXS img{ height: 36px; }

.menuLOGO a:after { content: ''; position: absolute; display: block;top: 0;left: 0;right: 0; margin: auto; height: 0%; width: .5em; transition: all .3s; z-index: -1; }
.menuLOGO a:hover:after { background: #cde2e2; background: #dda303; height: 100%; }




.menuLang{ position: absolute; bottom: 15px; width: 50px; right: 0; left: 0; margin: 0 auto;   }
.menuLang i{ display: block;}
.menuLang a{ font-size: .7rem; display: inline-block;   }
.menuLang a+a{ margin-left: 8px; }

  

body.is_lock  { overflow: hidden !important;  } 
#MENU{ position: fixed; top: 0; height: 100%; width: 100%; padding: 80px 0 50px 0;  
	background-repeat: no-repeat; background-position: right bottom; background-size: 80% auto;   z-index: 991; opacity: 0; visibility: hidden; overflow: auto; 
	-webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all .3s; transition: all .3s;  
}
#MENU.is_open{ opacity: 1; visibility: visible; right: 0; height: 100%; -webkit-transition: all 1s; transition: all 1s;   }

#MENU_mask{ position: fixed; top:0; right:0; z-index:990; opacity: 0; visibility: hidden; -webkit-transition: all 1s; transition: all 1s .2s; }
#MENU_mask.is_open { opacity: 1; visibility:visible; transition: all 1s;  } 

#MENU-L{ width: 50%; height: 100%; padding: 2em 5%; position: absolute; top:0; left: 0; background: rgba(238,238,238,.9);  -webkit-transition: all .5s; transition: all .5s; }
#MENU-R{ width: 30%; height: 100%; padding: 2em 5%; position: absolute; top:0; right: 0; background: #00817b url(../img/bgMenu.png) no-repeat 0 bottom; background-size: 100% auto;  color: #fff; -webkit-transition: all .5s; transition: all .5s; }
#MENU.is_open #MENU-L{ width: 60%; }
#MENU.is_open #MENU-R{ width: 40%; }


#MENU-L::after,
#MENU-R::after{ display: inline-block; *zoom: 1; content: ''; height: 100%; vertical-align: middle;  }
#MENU-L .inner,
#MENU-R .inner{ width: 90%; display: inline-block; vertical-align: middle; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-filter: blur(5px); filter: blur(5px); -webkit-transition: all 1s .4s; transition: all 1s .4s;  }	
#MENU.is_open #MENU-L .inner,
#MENU.is_open #MENU-R .inner{ opacity: 1; -webkit-filter: blur(0); filter: blur(0); }

#MENU-R{ text-align: center; }
#MENU-R h3,#MENU-R .sitename{ font-size: 1.5rem; line-height: 1.5 }
#MENU-R h3:after,#MENU-R .sitename:after{ content: ''; width:1em; height: 3px; background: rgba(255,255,255,.5); margin: 1em auto .8em auto; display: block; }
#MENU-R ul li{ display: inline-block;  margin:.5em 1em; font-size: .75rem; } 
.menuR-lang a{ font-size: .75rem; margin: 1em; width: 2.3em; height: 2.3em; padding-top: .5em; display: inline-block; border:solid 1px transparent;  border-radius:50em; }
.menuR-lang a.-on,
.menuR-lang a:hover{ border-color:rgba(255,255,255,.6); }

.menuL-logo{ width: 95%; max-width: 530px; margin-top: 2.5em;}
.menuL-logo img{ max-width: 100%; }
.menuL-lang{ display: none; }
.menuL-lang:before{ content: ''; width: 1em; height: 1px; display: block; margin: 1.5em 0; background: #888; }
.menuL-lang a { font-size: .75rem; margin-right: 1.5em; width: 2.3em; height: 2.3em; padding-top: .5em; display: inline-block; border:solid 1px transparent; border-radius:50em; text-align: center; }
.menuL-lang a.-on,
.menuL-lang a:hover{ border-color: #666; }

.navLinkss{ margin-bottom: 3em;  }
.navLinkss li{   margin-bottom: 1em; margin-right: -4px; color: #333  }
/*.navLinkss li:not(:last-child):after{ content: '/'; display: block; margin: .5em auto; color: #ccc; font-size: .7rem; transform: rotate(20deg)}*/
.navLinkss li .nav_style{ font-size: 1.6rem; font-weight: 800; color: #00817b;  }
.navLinkss li a{ display: inline-block; padding: .2em 0;   } 
.navLinkss li a span{ letter-spacing: .1em; line-height: 1.3; }
.navLinkss li a small{ color: #00817b; font-size: .7rem; display: block; font-family: 'Cuprum', sans-serif; font-weight: 300; }
.navLinkss li a:hover{ color: #dda303;  }  

#aaMENUclose{ position: absolute; right: 15px; top: 15px; width: 55px; height: 55px; display: inline-block; background: #dda303; border-radius: 50em; text-align: center; z-index: 999; } 
#aaMENUclose::after{ content: ''; position: absolute; top:0; left: 0; width: 10%; height: 100%; display: block; opacity: 0; z-index: -1; pointer-events: none; transition: all .3s; } 
#aaMENUclose:hover::after{ width: 100%; opacity: 1; }
.xClose{  height: 55px; display: inline-block; }
.xClose span{ display:inline-block; position:relative; width: 30px; height:100%; margin: 0 auto;      }
.xClose span::before, .xClose span::after { cursor: pointer; border-radius: 2px; height: 2px; width: 100%; background: #fff; display: block; content: ''; position: absolute; top:50%; pointer-events:none; -webkit-transition: all .5s; transition: all .5s;   } 
.xClose span:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);  transform: rotate(45deg);   }
.xClose span:after {  -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);    }
.xClose:hover span::before{  -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);   }
.xClose:hover span::after{   -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);  transform: rotate(45deg);  } 


@media (max-width: 800px){ 
	#header{ width:100%; left: 0; height: 46px; text-align: left; padding: 5px 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); background: rgba(230,230,230,.92) }
	body{ padding-right: 0; padding-top: 46px; }
	.menuHamburger{ float: right; margin-top: 6px; } 
	.menuHamburger small{ display: none;}
	.menuLOGO{ display: none;  }
	.menuLOGOXS{ display: inline-block; }
	.menuLang,
	.ind1logo,
	.menuL-logo{ display: none; }
	.navLinkss li h2{ font-size: 1.2rem; }
	#MENU-L,
	#MENU.is_open #MENU-L{ width: 100%; }
	#MENU-R{ display: none; }
	.menuL-lang{ display: block; }
}






/* ===============  INDEX  =============== */  
#IND1{ width: 100%; min-height: 100%; background: #cde2e2; position: relative; padding: 3%; overflow: hidden; }   
.ind1logo{width: 46%; max-width: 660px; position: relative;      }
.ind1logo img{ max-width: 100%; }
.ind1image{ width: 100%; height: 100%; position: absolute; top:0; left: 0; background:url(../img/indexMain.png) no-repeat right bottom; background-size: contain;    /*background-size: cover; */      }

.titSS{ line-height: 1.5;  letter-spacing: .05em; }
.titSS small{ display: block; color: #00817b; font-family: 'Cuprum', sans-serif; font-size: 1rem; }
.titSS h1{ font-size: 1.875rem; font-weight: 700; }
.titSS h1 span{ display: inline-block; margin-right: -.2em;  }  
.tit1{ font-size: 1.5rem; font-weight: 500; }
.tit1 small{ font-size: 1.125rem; }
.tit1 span{ display: inline-block; }
#IND1 .inner p{font-size: .9rem;  }
.titSS .inner{ font-size: .95rem;   }
.titSS p{ margin: 1em auto;   }
.titSS p a{ position: relative; display: inline-block; z-index: 1;  }
.titSS p a span{ }
.titSS p a:before,
.titSS p a:after{ content: ''; position: absolute; display: block; bottom: 2px; left:0; right:0 ;    }
.titSS p a:before{ width: 100%; height: 1px; background: #666; z-index: -1;   }
.titSS p a:after{ width: 0%; height: .7em; transition: all .3s;  z-index: -1;    }
.titSS p a:hover:after{ background: #dda303; width: 100%;    }
@media (max-width: 1300px){
	.tit1 small{ font-size: .9rem; }
/*	.titSS h2{ font-size: 1.5rem;} */
}


.bgWave{ position: absolute; bottom:-1px; left: 0; width: 100%;    } 
.bgWave img{ display: block;}
#IND1 .inner{ max-width: 90%; margin-top: 10%;  display: inline-block; position: relative; } 
.hrDiamond{ margin: .7em 0; }
.hrDiamond i{ width: 6px; height: 6px; border:solid 1px #909898; display: inline-block; vertical-align: middle; margin: 0 5px; transform: rotate(45deg);}
.hrDiamond span{ width: 26px; height: 1px; display: inline-block; vertical-align: middle; background: #998;   
	-webkit-animation-name: lineX;  animation-name: lineX;  -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: .5s; animation-delay: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;   }
.hrDiamond span:last-of-type{ -webkit-transform-origin: left; transform-origin: left;   }
.hrDiamond span:nth-of-type(1){ -webkit-transform-origin: right; transform-origin: right;  }
@-webkit-keyframes lineX {
    0% {  opacity: .6; -webkit-transform: scaleX(.1); transform: scaleX(.1); }
    100% {  opacity: 1;  -webkit-transform: none; transform: none; }
}
@keyframes lineX {
    0% {  opacity: .6; -webkit-transform: scaleX(.1); transform: scaleX(.1); }
    100% {  opacity: 1;  -webkit-transform: none; transform: none; }
} 


.aa1{ padding: .5em 0; display: inline-block;   }
.aa1 i{ margin-right: .3em; display: inline-block; vertical-align: middle; color: #dda303; font-size: 1.1rem; }
.aa1 span{ display: inline-block; vertical-align: middle; }
.aa1:hover{ color: #dda303;  }

.aa2{ padding: .5em 1.5em; display: inline-block; background: #535353; color: #fff; margin: 1em atuo; border-radius: 50em; border: solid 2px #535353; position: relative; overflow: hidden; font-size: .9rem; }
.aa2 span{ position: relative;  }
.aa2::before{ content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 10px; height: 10px; border-radius: 50em;  background: #fff; opacity: 0; }
.aa2:hover::before{ opacity: 1; transform:scale(20); transition: all 1s;  }
.aa2:hover span{ color: #535353; transition:all .3s .2s; }


@media (min-width:1680px){
	#IND1 .inner{ margin-left: 5%;   }
}
@media (max-width:900px){
	#IND1 .inner p{ text-shadow: 0 0 6px #ffffff; }
	#IND1 .inner p,
	#IND1 .inner a{ font-size: .85rem;  }
	.NEWS1 .titSS p{ max-width: 580px;  }
}
@media (max-width:600px){ 
	.ind1image{ background-position: 30px bottom; }
	.tit1{ font-size: 1.5rem; }
	.tit1 small{ font-size: 1rem; }
	#IND1 .inner p,
	#IND1 .inner a{ font-size: .8rem;  }
}
@media (min-width:600px) and (max-width:1370px) and (min-height:700px){
	#IND1 .inner,
	#IND1 .inner p{ text-shadow: 0 0 10px #fff; }
}








#IND2{ padding: 5em 0; text-align: center; overflow: hidden; }  
#IND2 .inner{  margin: 1em auto; }
#IND2 .inner p{ margin: 1em auto 2em auto;   }

.iiPollution{ margin: 1em auto; }
.iiPollution li{ display: inline-block; width: 24%; margin: 2em .2em; position: relative;  } 
.iiPollution li:nth-child(1) .iiPollution-img{ background: url(../img/pollution/poll-bg1.png) no-repeat center center; background-size: contain !important;   }
.iiPollution li:nth-child(2) .iiPollution-img{ background: url(../img/pollution/poll-bg2.png) no-repeat center center; background-size: contain !important;   }
.iiPollution li:nth-child(3) .iiPollution-img{ background: url(../img/pollution/poll-bg3.png) no-repeat center center; background-size: contain !important;   }
.iiPollution li:nth-child(4) .iiPollution-img{ background: url(../img/pollution/poll-bg5.png) no-repeat center center; background-size: contain !important;   }
.iiPollution li:nth-child(5) .iiPollution-img{ background: url(../img/pollution/poll-bg2.png) no-repeat center center; background-size: contain !important;   }
.iiPollution li:nth-child(6) .iiPollution-img{ background: url(../img/pollution/poll-bg3.png) no-repeat center center; background-size: contain !important;   }
.iiPollution li:nth-child(7) .iiPollution-img{ background: url(../img/pollution/poll-bg5.png) no-repeat center center; background-size: contain !important;   }
.iiPollution li:nth-child(8) .iiPollution-img{ background: url(../img/pollution/poll-bg1.png) no-repeat center center; background-size: contain !important;   } 

.iiPollution-img{ }
.iiPollution-img img{ max-width: 100%; opacity: 0; }
.iiPollution-txt{ position: absolute; display: inline-block; vertical-align: middle; width:90%; height: 140px; top:0; bottom: 0; left: 0; right: 0; margin: auto; line-height: 1.4;  }
.iiPollution-txt img{ width: 60px; height: auto; }
.iiPollution-txt h5,.iiPollution-txt .caption{font-size: 1rem; font-weight: 400; letter-spacing: .1em; width: 70%; margin: .5em auto; }
.iiPollution-txt h6{ font-size: 1rem; font-family: 'Cuprum', sans-serif; }
.iiPollution li:nth-child(2n+1) h6{ color: #00817b; }
.iiPollution li:nth-child(2n+2) h6{ color: #dda303; } 

@media (min-width:1200px){
	.iiPollution li{   }
	.iiPollution li:nth-child(1) { animation-delay: .3s;  }
	.iiPollution li:nth-child(2) { animation-delay: .8s;  }
	.iiPollution li:nth-child(3) { animation-delay: 1s;  }
	.iiPollution li:nth-child(4) { animation-delay: .5s;  }
	.iiPollution li:nth-child(5) { animation-delay: .7s;  }
	.iiPollution li:nth-child(6) { animation-delay: .2s;  }
	.iiPollution li:nth-child(7) { animation-delay: .9s;  }
}
@media (max-width:1200px){ 
	.iiPollution li{ width: 210px;  }  
	.iiPollution-txt img{  }
	.iiPollution-txt h5{ font-size: .9rem;  }
	.iiPollution-txt h6{ font-size: .8rem;  }
} 
/*
.aniSpin{ -webkit-animation: spin 60s linear infinite; -moz-animation: spin 60s linear infinite; animation: spin 60s linear infinite;  }
.aniSpin2 { -webkit-animation: spin 90s linear infinite; -moz-animation: spin 90s linear infinite; animation: spin 90s linear infinite; }
@-webkit-keyframes spin { 
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  to { -moz-transform: rotate(360deg); }
}
@keyframes spin {
  to {  transform: rotate(360deg); }
}

*/

@keyframes moveLine {  
  0% {
    -webkit-transform: translateX(60%)  scale3d(1, 1, 1);
            transform: translateX(60%)  scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: translateX(-80%) scale3d(.2, 1, 1);
            transform: translateX(-80%) scale3d(.2, 1, 1); 
  }
  60% {
    -webkit-transform: translateX(0%)  scale3d(1, 1, 1);
            transform: translateX(0%)  scale3d(1, 1, 1);
  }
}


#IND3{ padding: 5em 0;  background: #d5ddd5; text-align: center; position: relative; overflow: hidden; }
.IND3bg{ }
.IND3bg-word{ font-weight: 800; font-size: 12em; -webkit-text-stroke: 1px rgba(200,200,200,1); -webkit-text-fill-color : transparent; overflow: hidden; display: inline-block; }
.IND3bg-word.w1{ position: absolute; top: 10px; left: 15%; }
.IND3bg-word.w2{ position: absolute; bottom: 1%; left: 5%; transform: rotate(90deg); display: inline-block;}
.IND3bg-word.w3{ position: absolute; bottom: -.3em; right: 8%; }
.IND3bg-word.w4{ position: absolute; top: 20px; right: 6%;transform: rotate(90deg) }
.IND3bg-1{ position: absolute; top: 2em; left: 2em;   }
.IND3bg-2{ position: absolute; bottom: -20px; right: -5px; }
.IND3bg-3{ position: absolute; top: 0px; left: -10px; }
.IND3bg-4{ position: absolute; top:10%; right: -10px; }

.tit2{ font-weight: bold; font-size: 1.125rem; display: inline-block; height: 1.1em; overflow: hidden; position: absolute; right: .5em; top:0; bottom:0; margin: auto; z-index:99; transform: rotate(270deg); outline: revert}
.tit2 > a:focus{background:#999}
.tit2:after{ content: ''; width: 100%; height: 2px; display: block; background: #000; -webkit-animation: moveLine 8s linear infinite; -moz-animation: moveLine 8s linear infinite; animation: moveLine 8s linear infinite;   }
.indNews{ width: 90%; margin: 1em auto;   }
.indNews li{   }
.indNews-a { display: block; padding: 1em; margin:1em auto; transition: all .5s; border-radius: 5px; border: solid 1px rgba(240,240,240,0); max-width:360px; }
.indNews-img{ position: relative; }
.indNews-txt{ padding: 1em 0; text-align: left;  }
.indNews-img img{ width: 100%; transition: all .5s;  }
.indNews time{ /*color: #dda303;*/ line-height: 1.3; font-size: .75rem; padding-right: .5em;  } 
.indNews-subj{ display: inline-block; padding: .5em; font-size: .75rem; border-radius: 2px; background: #333; color: #fff; font-weight: 500; }
.indNews h3{ font-size: 1.1rem; line-height: 1.5; padding: .5em 0;  }
.indNews div{ font-size: 1.1rem; line-height: 1.5; padding: .5em 0;  }
.indNews-aa{ margin-top: 1em; }
.indNews-aa span,
.indNews-aa i{ display: inline-block; vertical-align: middle; }
.indNews-aa i{ color: #dda303; margin-right: .3em; }
.indNews-txt:hover .indNews-aa,
.indNews-a:hover h3{ color: #dda303; }
.indNews-a:hover .indNews-img img{ filter: brightness(110%); -webkit-filter: brightness(110%);-moz-filter: brightness(110%); }
.indNews-a:hover{ background: rgba(220,220,220,.3); border: solid 1px rgba(240,240,240,1); }

@media (min-width:1300px){
	.indNews{ width: 75%; }
}
@media (max-width:900px){
	.indNews-img, .indNews-txt{ display: block; margin: 0 auto;  }
	.indNews-txt{ width: 100%; text-align: center; }
	.tit2{ margin-top: 2em; }
}
@media (max-width:700px){
	.IND3bg-1, .IND3bg-2{ height: 240px;}
	.IND3bg-4{ top: auto; bottom: 10px; right: -50px; height: 300px; }
	.IND3bg-3{ height: 300px;}
}
@media (max-width:400px){
	.indNews-img{ width: 90%; }
}

#IND4{ padding: 5em 0; text-align: center; }
#IND4 .inner{  margin: 1em auto; }
#IND4 .inner p{ margin: 1em auto 2em auto; max-width: 600px;  }

.indexArea{ margin: 1em auto;  line-height: 1.5;}
.indexArea li{ padding: 1em; }
.indexArea h4{ padding: .3em .8em; display: inline-block; font-size: .8rem; border-radius: 3px; }
.indexArea h3{ font-size: 1.25rem; font-weight: bold; padding: .3em 0; }
.indexArea div{ font-size: 1.25rem; font-weight: bold; padding: .3em 0; }
.indexArea p{ line-height: 1.5; font-size: .8rem; }
.indexArea-txt{ padding: 2em 0;  }

.indexArea h4.t1{ background: #c0dceb;  display: inline-block;}
.indexArea h4.t2{ background: #ede9dc;  display: inline-block;}
.indexArea h4.t3{ background: #eee5e8;  display: inline-block;}






/* =============== footer   =============== */ 
footer{ line-height: 1.5em; background: #f2f0e6; text-align: center; padding: 3em 0; position: relative; } 
footer a{ display: inline-block; } 
footer a:hover{ color: #00817b; } 
 
.fooH1-1{ width: 90%; max-width: 600px; margin: 2em auto;   }
.fooH1-2{ font-size: 1.125rem; font-weight: bold; }
.fooH1-2:after{ content: ''; width: 1em; height: 3px; display: block; background: #333; margin: 1em auto; }

.linksssBar li{ display: inline-block; vertical-align: middle; }
.linksssBar li:not(:last-child):after{ content: '・';   color: #dda303; margin: auto .5em; display: inline-block; vertical-align: middle; } 

.fooLinks1{ margin: 0 auto;  }
.foolinks2{ margin-bottom: 3em;  }
.foolinks2 li{ margin: 1em 0; }

.foolinks3 li{ margin: .5em 0; display: inline-block; font-size: .75rem;  }
.foolinks3 li+li{ margin:0 2em;   }
.foolinks3 a{ text-decoration: underline; }

@media (max-width:700px){
	.fooLinks1, .foolinks2{ font-size: .75rem;  } 
}
@media (max-width:540px){ 
	.fooLinks1 { max-width: 280px;}
}

/* ===============  subPAGE  =============== */ 
#subpageTop{ padding: 3em 0; width:100%; text-align: center; height: 420px; position: relative; overflow: hidden; } 
#subpageTop .inner{ width: 70%; max-width: 580px; margin: 0 auto; display: inline-block; vertical-align: middle; position: relative; z-index: 9;   }
#subpageTop:after{ display: inline-block; *zoom: 1; content: ''; height: 100%; vertical-align: middle;  }
#subpageTop.NEWS1{ background: #f2f0e6; }
#subpageTop.NEWS1 .titSS{ text-shadow: 0 0 20px #fff; }
#subpageTop.AREA1{ background: #cde2e2;}
#subpageTop.TARGET1{ background: #dbd5c9;}
#subpageTop.TARGET1 .titSS{ text-shadow: 0 0 10px #fff; }
#subpageTop.ABOUT1{ background: #cde2e2;  }
#subpageTop.ABOUT1 .titSS{ text-shadow: 0 0 10px #fff; }

.typeListss{ margin: 0 auto 5em auto; text-align: center; }
.typeListss li{ display: inline-block; margin: .5em; }
.typeListss li a{ display: block; padding: 1em; border-radius: 50em; background: #f2f2f2; border: solid 1px #f2f2f2;  }
.typeListss li.-on a{ background: #dda303; border-color: #dda303; color: #fff; font-weight: bold; }
 
.pageBottomLinkss{ display: inline-block; margin: 1em; background: #333; color: #fff; width: 5em; height: 5em; border-radius: 50em; text-align: center; border: solid 2px #333; font-weight: bold;}
.pageBottomLinkss:after { display: inline-block; *zoom: 1; content: ''; height: 100%; vertical-align: middle;  }
.pageBottomLinkss span { display: inline-block; width: 95%; height: 2.5em; vertical-align: middle;  }	
.pageBottomLinkss i{ display: block; color: #dda303; }
.pageBottomLinkss small{ display: block; }
.pageBottomLinkss:hover{ background: #fff; color: #333;}
.pageBottomLinkss.yellow{ background: #dda303; color: #fff; border-color: #dda303;  }
.pageBottomLinkss.yellow i{ color: #fff; }
.pageBottomLinkss.yellow:hover{ border-color: #dda303; color: #dda303; background: #fff;    }
.pageBottomLinkss.yellow:hover i {  color: #dda303; }

@media (max-width: 900px){
	.typeListss li{  margin: .3em; }
	.typeListss li a{ font-size: .85rem; }
}
@media (max-width: 600px){
	.typeListss li{  margin: .3em; }
	.typeListss li a{ font-size: .8rem; }
}



/* ===============  lightbox / menu  =============== */  
.BOX{ position: relative; max-width: 800px; margin-left:auto; margin-right:auto;  }
.BOX_close{ display:block; position: fixed; top: 16px; right: 2%; z-index: 999; background: #dda303; padding: 0 1em; border-radius: 50em;     }  
.BOX_close:hover{ opacity: .7; }

.BOX_fixRight{ position: fixed; right: 0; top:0; width: 80%; max-width: 500px; height: 100%; padding-top: 80px; background: #fcfcfc; overflow-y: auto; opacity:0; transform: translateX(30%); transition: all 1s ; }
.BOX_fixRight.is-open{ opacity:1; transform: none; }
 
.hamburger { display: block; width: 32px; height: 22px; margin: 0 auto;  cursor: pointer; position: relative; overflow: hidden;  }
.hamburger span { height: 2px; width: 100%; background: #333; display: block; left: 0; top: 40%; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s;	} 
.hamburger span:before { -webkit-transition: all 0.5s; transition: all 0.5s; content: ''; width: 100%; height: 2px; display: block; background: #eeeeee;  position: absolute;  -webkit-transform: translateX(0px); -ms-transform: translateX(40px); transform: translateX(40px); opacity: 1;  } 
.hamburger .line1 { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); }
.hamburger .line2 { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
.hamburger .line3 { -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); width: 50%; }

.hamburger:hover .line1:before { -webkit-transform: translateX(-6px); -ms-transform: translateX(-6px); transform: translateX(-6px); width: 5px;  } 
.hamburger:hover .line2:before { -webkit-transform: translateX(-45px); -ms-transform: translateX(-45px); transform: translateX(-60px); width: 20px;  } 
.hamburger:hover .line3:before { -webkit-transform: translateX(-6px); -ms-transform: translateX(-6px); transform: translateX(-6px); background: #333; }
.hamburger:hover .line3  { width: 100%; }	
	
/*
.hamburger.is-open .line2:before,
.hamburger.is-open .line2:after {  opacity: 0;  }
.hamburger.is-open span:before,
.hamburger.is-open span:after { background: #000  }

.hamburger.is-open .line1 {-webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px);  }
.hamburger.is-open .line1:before { -webkit-transform: translateX(0px) rotate(45deg); -ms-transform: translateX(0px) rotate(45deg); transform: translateX(0px) rotate(45deg); }
.hamburger.is-open .line1:after { -webkit-transform: translateX(10px) rotate(-45deg); -ms-transform: translateX(10px) rotate(-45deg); transform: translateX(10px) rotate(-45deg); }
.hamburger.is-open .line3 { -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); }
.hamburger.is-open .line3:before { -webkit-transform: translateX(8px) rotate(-45deg); -ms-transform: translateX(8px) rotate(-45deg); transform: translateX(0px) rotate(-45deg); }
.hamburger.is-open .line3:after { -webkit-transform: translateX(10px) rotate(45deg); -ms-transform: translateX(10px) rotate(45deg); transform: translateX(10px) rotate(45deg); }
*/
  
.hamburgerClose{ width: 36px; height: 36px; cursor: pointer; display: block; position:relative; -webkit-transform: rotate(45deg); transform: rotate(45deg);  }
.hamburgerClose div{ position: relative; background: #fff; width: 100%; height: 2px; top: 0; left: 0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.hamburgerClose div:nth-child(1) { height: 80%; width: 2px; position: absolute; top: 10%; left: 17px; -webkit-animation: hamCloseAnim1 1s ; animation: hamCloseAnim1 1s ;   }
.hamburgerClose div:nth-child(2) { width: 80%; height: 2px; position: absolute; left: 10%; top: 17px; -webkit-animation: hamCloseAnim2 1s ; animation: hamCloseAnim2 1s ;    }

@-webkit-keyframes hamCloseAnim1{
	0%, 10%{  height: 0%;}
	100%{ height: 80%;  }
}
@keyframes hamCloseAnim1{
	0%, 10%{  height: 0%;}
	100%{ height: 80%; }
}
@-webkit-keyframes hamCloseAnim2{
	0%, 30%{ width: 0%; }
	100%{ width: 80%;  }
}
@keyframes hamCloseAnim2{
	0%, 30%{ width: 0%; }
	100%{ width: 80%;  }
}


/* =============== policy  =============== */   
.POLICY{ padding: 150px 5%; line-height: 1.8; color: #444;     }
.POLICY h6{ font-size: 1.125em; margin: 3em 0 1em 0; color: #111;  }
.POLICY p{ font-size: .875rem;  }

.TIT{ padding: 1em 0 5em 0; width: 100%; max-width: 500px; margin: 0 auto;  text-align: center;  }
.TIT img{ width: 4em; display: block; margin: 1em auto;  }
.TIT h5{ font-size: 2rem; letter-spacing: 1px;  color: #111; width: 90%; margin-right: auto; margin-left: auto;  }


/* ===============  gridss  =============== */  
/*
.gridss{ width: 100%; margin: 1em auto; position:relative;   }
.gridss:after { content: ''; display: block; clear: both; }
.gutter{ width:2%; }
.gridssItem{ width: 49%;   } 
@media (max-width: 800px){
	.gutter{ width: 0; }
	.gridssItem{ width: 100%;  }
} 
*/


/* ===============  news  =============== */ 
#NEWS2{ padding: 5em 0; }
.newsList{ width: 100%; text-align: center; margin: 2em auto; }
.newsList li{ width: 31%; display: inline-block; vertical-align: top; margin: 0 .5% 0 .5%; padding-bottom: 2em;  }
.newsList li a{ width:100%; max-width: 400px; display: block; padding: 1.5em 1.5em 0 1.5em; margin: 0 auto; position: relative; overflow: hidden; background: #f9f9f9; min-height: 32.5em; }
.newsList li a::before{ content: ''; display: block; width: 200%; height: 10%; position: absolute; bottom:-30%; left: -30%;  margin: 0 auto; opacity: 0; background: #ececec; transform: rotate(-20deg) translateZ(0);}
.newsList li a::after{ content: ''; display: block; width: 100%; height: 3px; background: #ececec; margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; }

.newsList ._img { position: relative; overflow: hidden;  }
.newsList ._img img{ width: 100%; vertical-align: top; -webkit-transition: all 1s;  transition: all 1s; }

.newsList ._txt{ position: relative; padding: 2em 0; text-align: left;  transition: all .5s; }
.newsList ._txt time{ font-size:.75rem; margin-right: .6em; } 
.newsList ._txt em{ font-size: .75rem; display: inline-block; padding: .3em .5em; background: #2c918d; color: #fff; font-style: normal; border-radius: 3px; }
.newsList ._txt h3,.newsList ._txt .news_grid_cap{ font-size: 1.5rem; font-weight: 800; line-height: 1.4em;margin:.3em 0 .6em; font-family: 'Cuprum','PingFang TC', 'Noto Sans TC','微軟正黑體', serif; letter-spacing: 0; }
.newsList ._txt h3:after{ content: ''; display: block; margin: .8em 0; width: 1em; height: 1px; background: #666; }
.newsList ._txt p{ height: 4.6em; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: .9rem; }
.newsList ._txt .getMore{ padding: 1em 0 0 0; text-align: left;  }
.newsList ._txt .getMore i{  display: inline-block; vertical-align: middle; color: #dda303; transition: all .5s;  }

.newsList li a:hover::before{ height: 150%; opacity: 1; transition: all 1s;    }
.newsList li a:hover ._img img{ -webkit-transform: scale(1.06) translateZ(0); transform: scale(1.06) translateZ(0); } 
.newsList li a:hover .getMore i{ margin-left: .5em;    } 
.newsList li a:hover h3{ color: #dda303; }

.wowList:nth-child(3n+1){ -webkit-animation-delay: .2s; animation-delay: .2s; }
.wowList:nth-child(3n+2){ -webkit-animation-delay: .3s; animation-delay: .3s; }
.wowList:nth-child(3n+3){ -webkit-animation-delay: .4s; animation-delay: .4s; }
@media (min-height: 700px){
	.wowList:nth-child(6n+4){ -webkit-animation-delay: .4s; animation-delay: .4s; }
	.wowList:nth-child(6n+5){ -webkit-animation-delay: .5s; animation-delay: .5s; }
	.wowList:nth-child(6n+6){ -webkit-animation-delay: .6s; animation-delay: .6s; }	
}


@media (min-width: 1101px){
	.newsList li{ max-width: 390px;  }
}
@media (max-width: 1100px){
	.newsList li{ width: 48%;   }
	.newsList ._txt h3{ font-size: 1.2rem; }
}
@media (max-width: 720px){
	.newsList li{ width: 100%;  margin: 0 auto; }
	.newsList-txt{ height: auto; }
}

.aaCloseNews{ width: 95px; height: 95px; color: #fff; background: #dda303; display: block; border-radius: 50em; text-align: center; position: absolute; top: 2em; right: 10%; z-index: 99; }
.aaCloseNews:after { display: inline-block; *zoom: 1; content: ''; height: 100%; vertical-align: middle;  }
.aaCloseNews span { display: inline-block; vertical-align: middle; width: 90%;  }
.aaCloseNews i,
.aaCloseNews small{ display: block; line-height: 1.2; }
.aaCloseNews i{ font-size: 2.4rem; }
@media (max-width: 800px){
	.aaCloseNews{ top: 5em; right: 5%; }
}


#NEWSdet{ padding: 5em 0; }
.NEWSdet-tit{ border-bottom: solid 1px #333; text-align: center; margin-bottom: 3em; padding: 4em 1em 3em 1em;   }
.NEWSdet-tit h3,.NEWSdet-tit .top_caption{ font-size: 1.875rem; font-weight: 800; line-height: 1.5;   } 

.socialsss{ padding-top: .6em;  }
.socialsss li{ display: inline-block; margin: .5em; color: #acacac;  }
.socialsss i{ font-size: 1.2rem; }
.socialsss li a:hover{ color: #333; }

.edit ol{ padding-left: 1.5em; } 
.NEWSdet{ text-align: left;  margin: 2em auto;  } 

.NEWSdet-from{ line-height: 2em; border-top: solid 1px #333; padding: 2em 0 1em 0; margin-top: 4em; text-align: left;   }
.NEWSdet-from li{ line-height: 1.3em; padding: 0 0 0 6em;  position: relative; margin-bottom: .8em; font-size: .9rem;  }
.NEWSdet-from strong { display: inline-block; color: #a6937c; padding-right: 1em; position: absolute; top: 0; left: 0; } 
.NEWSdet-from all{ display: inline-block; padding: 1em 0;  }

.NEWSdet-album{ padding: 3em 0; margin: 3em auto; border-top: solid 1px #ccc; }
.NEWSdet-album li{ width: 32%; margin-bottom: 1em;  } 
.NEWSdet-album figure img{ max-width: 100%; }
.NEWSdet-album figcaption {   font-size: .85rem; padding: .5em 0; line-height: 1.4 } 

@media (max-width: 700px){
	.NEWSdet-album li{ width: 45%; margin-bottom: 2em;  }
}




.pageNumber{ text-align: center; padding: 1em 0; color: #777; }
.pageNumber li{ display: inline-block; vertical-align: middle; }
.pageNumber li a{ display: block;    }
.pageNumber li.-on a{ color: #111; }
.pageNumber li a span{ display: inline-block; padding: .5em; background: rgba(255,255,255,0);  }
.pageNumber li a i{ display: block; width: 2em; height: 2em; border-radius: 50em; padding: .5em; color: #dda303;   }
.pageNumber li a:hover i{ background: #dda303; color: #fff; }
.pageNumber li a:hover span{  color: #00817b; background: #ececec;  }


/* ===============  achievement  =============== */ 
#ACHI1{ background: #d5ddd5; position: relative; overflow: hidden;  }
#ACHI2{ padding: 1em 0 5em 0; position: relative; overflow: hidden; min-height: 600px; }
#ACHI2 .newsList li a{ background: rgba(255,255,255,.46); border: solid 1px #fff; }
#ACHI2 .newsList li a:before{ background: #fff; }
#ACHI2 .newsList li a:after{ display: none; }
#ACHI2 .newsList li a em { background: #a6937c; }

.bgShapess{ overflow: hidden; }
.bgShapess > *{ display: inline-block; position: absolute; pointer-events: none;  border-radius: 50em; z-index: 0;   }  

#bgShape-c01{ top:-80px; left: 8%; width: 220px; height: 220px; border: solid 26px rgba(240,240,240,.8);  }
#bgShape-c02{ top: 15%; left: -25px; width: 165px; height: 165px; border: solid 22px #fff;  }
#bgShape-c03{ top: 12%; right: 10%; width: 86px; height: 86px; border: solid 10px rgba(240,240,240,.8); }
#bgShape-c04{ top: 20%; right: 20%; width: 45px; height: 45px; border: solid 10px rgba(240,240,240,.8);  }
#bgShape-c05{ top: 30%; left: 6%; width: 54px; height: 54px; border: solid 8px rgba(240,240,240,.8);  }
#bgShape-c06{ top: 35%; left: 20%; width: 260px; height: 260px; background: rgba(0,0,0,.05);  }
#bgShape-c07{ top: 38%; right: 6%; width: 230px; height: 230px; border: solid 26px #fff;  }
#bgShape-c08{ top: 48%; left: 50%; width: 43em; height: 43em; background: rgba(0,0,0,.05);  }
#bgShape-c09{ top: 70%; right: -10em; width: 20em; height: 20em; border: solid 26px rgba(255,255,255,.5);  }
#bgShape-c10{ bottom: 1%; right: 15%; width: 86px; height: 86px; border: solid 10px #eee; }
#bgShape-c11{ bottom: 20px; right: 22%; width: 40px; height: 40px; border: solid 10px rgba(255,255,255,.5); }
#bgShape-c12{ bottom: 60px; left: 4%; width: 160px; height: 160px; border: solid 16px #eee; }
#bgShape-c13{ bottom: -10px; left: 20%; width: 250px; height: 250px; background: rgba(0,0,0,.05);  }

@media (max-width: 640px){
	#bgShape-c03{ right: -5px; }
	#bgShape-c04{ right: 10%; }
	#bgShape-c07{ right: -90px; border-color: rgba(255,255,255,.3);  }
	#bgShape-c08{ width: 10em; height: 10em;}
	#bgShape-c09{ right: auto; left: -10em; width: 15em; height: 15em;  }
}


/* ===============  area  =============== */ 
#AREA2 .inner{ width: 90%; margin: 0 auto; max-width: 1000px; padding: 5em 0; }
.ecoAreaItemss{ padding: 3em 0;  }
.ecoAreaItemss:after{ content: ''; height: 12px; width:100%; background: url(../img/wave.gif) repeat-x center bottom; background-size: auto 50%; margin: 3em 0; display: block; opacity: .8; }

.ecoAreaView{ align-items:center;  text-align: center; padding-bottom: 3em;   }
.ecoAreaView-img{ width: 60%; display: inline-block; vertical-align: middle; position: relative;  }
.ecoAreaView-txt{ width: 39%; display: inline-block; vertical-align: middle; padding:3em 1em;line-height: 1.5 }

.ecoAreaView-img img{ max-width: 100%; }
.ecoAreaView-img img:first-child{ position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1;   }
.ecoAreaView-img img:last-child{ position: relative; }

.ecoAreaView-txt .area_h1{ font-size: 1.3rem; font-weight: bolder; margin: .3em auto; /*color: #00817b;*/}
.ecoAreaView-txt .area_h1:after { content: ''; margin: .8em auto; display: block; width: .8em; height: 1px; background: #00817b; transform: rotate(-50deg);  }
.ecoAreaView-txt .area_summary{ font-size:.9rem; margin: .3em auto; color: #666666; }
/*.ecoAreaView-txt h6{ font-size: .75rem; display: inline-block; background: #eee; color: #333; padding: .2em .6em; border-radius: 3px; }*/
.ecoAreaView-txt small{ color: #777;  }
.ecoAreaView-txt ul{ max-width: 220px; margin:0 auto; }
.ecoAreaView-txt li{ display: inline-block; }
.ecoAreaView-txt li:not(:last-child):after{ content: '・';   }
/*
.ecoAreaView.type1 .ecoAreaView-txt h6{ background: #c0dceb; }
.ecoAreaView.type2 .ecoAreaView-txt h6{ background: #ede9dc; }
.ecoAreaView.type3 .ecoAreaView-txt h6{ background: #eee5e8; }
*/

.ecoAreaItemss h6{ font-size: 1rem;   }

.ecoAreaItem{ padding: 1em 0;}
.ecoAreaItem ul{ width: 100%; }
.ecoAreaItem li{ width: 32%; /*max-width: 290px;*/ margin: 1em 6px;    }
.ecoAreaItem .area_subcap{ font-size: 1rem; font-weight: bolder; /* padding: .5em 0;border-bottom: solid 1px #888;*/   line-height: 1.5; height: 3em; width: 80%; margin: 0 auto; transition: all .3s;  }
.ecoAreaItem .area_subcap:before{ content: ''; display: block; width: 1em; height: 1px; margin: .3em auto .5em auto; background: #999; transition: all .3s; }
.ecoAreaItem p{ font-size: .8rem; }
.ecoAreaItem a{ display: block; border-radius: 5px; padding: 1em .5em 1.5em .5em; background: #f2f2f2; border: solid 1px #f2f2f2;  }
.ecoAreaItem a:hover{ background: #ededed; border-color: #dda303;  }
.ecoAreaItem a:hover .area_subcap{ color: #dda303;  } 
.ecoAreaItem a img{ max-width: 100%; }

@media (max-width: 1100px){
	.ecoAreaItem li{ width: 48%; }
}
@media (max-width: 900px){
	.ecoAreaView-txt li{ font-size: .9rem; } 
	.ecoAreaView-img{ width: 100%;   }
	.ecoAreaView-txt{ width: 80%; margin-left: auto; margin-right: auto; }
}
@media (max-width: 680px){
	.ecoAreaItem li{ width: 100%; max-width: 100%;    }
}




.ecoAreaDetail{ text-align: center;  }
.ecoAreaDetail .area_h2{ font-weight: bold; font-size: 1rem; }
.ecoAreaDetail .area_h2 i{ font-size: .8em; text-align: center; margin-right: .3em; display: inline-block; }


#AreaDETAIL{ padding: 5em 0; }
.AreaDETAIL-tit{ border-bottom: solid 1px #333; text-align: center; margin-bottom: 3em; padding: 4em 1em 3em 1em;   }
.AreaDETAIL-tit img{ display: block; margin: 0 auto; width: 120px; }
.AreaDETAIL-tit h3{ font-size: 1.875rem; font-weight: 800; line-height: 1.5; letter-spacing: .1em; padding: .2em 0; /*color: #00817b;*/  } 
.AreaDETAIL-tit h4{ font-size: .9rem; background: #eee; display: inline-block; margin: 1em auto; padding: .5em 1em; line-height: 1.3; border-radius: 3px; }









/* ===============  target  =============== */ 
#TARGET2{ padding: 5em 0;}
.targetItemss{ width: 100%; border-bottom: solid 1px #b5b5b5; padding: 2em 0; position: relative; line-height: 1.5; }
.targetItemss:after{ content: ''; width: 2em; height: 1px; background: #000; position: absolute; bottom: -1px; left: 0; }
.targetItemss-img{ padding: 1em; width: 28%; max-width: 300px; text-align: center;   }
.targetItemss-txt{ padding: 1em; width: 72%;     }

.targetItemss-img img{ width: 80px; }
.targetItemss-txt p{ margin-bottom: 1em; }

.targetItemss h4,.targetItemss .target_section_cap{ font-size: 1.5rem; margin-bottom: 2em; font-weight: 800; color: #dda303;   }
.targetItemss h5{ font-size: 1rem;  margin-bottom: .6em; margin-top: 1em; font-weight: bold; }
.targetItemss ul{ margin: 0 0 2em 0; }
.targetItemss li{ padding: .2em 0 .2em 1.5em; position: relative; letter-spacing: 1px; }
.targetItemss li:before{ content: ''; width: 4px; height: 4px; background: #dda303; display: inline-block; vertical-align: middle; position: absolute; top:.9em; left: 0; border-radius: 50em; }

.targetItemss:last-of-type{ border-bottom: none; }
.targetItemss:last-of-type:after{ display: none; }
@media (max-width:1100px){
	.targetItemss h4{ font-size: 1.3rem;}
}
@media (max-width:640px){
	.targetItemss-img{ width: 100%; max-width: none;  padding: 3em 0; }
	.targetItemss-txt{ width: 100%; padding: 1em 0; }
}


/* ===============  target stragtegy  =============== */ 
.targetStrItemss{ width: 100%;  margin: 2em auto; padding-bottom: 2em; }
.targetStrItemss-1{ display: inline-block; padding: 1.5em 0; vertical-align: top; width: 225px; border-top: solid 3px #dda303;  }
.targetStrItemss-2{ display: inline-block;  vertical-align: top; width: calc( 100% - 230px);  position: relative;   }
.targetStrItemss-2:before{ content: ''; display: block; width: 100%; height: 1px; background: #bfbfbf; position: absolute; top: 0; left: 0;  }

.targetStrItemss h4{ font-size: 1.5rem; letter-spacing: .1em; color: #dda303; font-weight: 800; }
.targetStrItemss-txt{ width: 52%; display: inline-block; vertical-align: top; margin-right: -4px;   }
.targetStrItemss-icon{ width: 48%; display: inline-block; vertical-align: top; margin-right: -4px; padding-left: 1em;  }

.targetStrItemss-txt li{ -js-display: flex; display: -ms-flexbox; display: -webkit-box; display: -webkit-flexbox;  display: -webkit-flex; display: flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;-ms-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; }
.targetStrItemss-txt li:last-of-type h5{ border-bottom: none}
.targetStrItemss-txt h5{ width: 40%; padding: 1.5em 0; display: inline-block; vertical-align: top;  border-top: solid 1px #bfbfbf; font-size: 1rem; font-weight: 800; letter-spacing: .1em;   }
.targetStrItemss-txt ._txt{ width: 59%; padding: 1.5em 0; display: inline-block; vertical-align: top; border-top: solid 1px #bfbfbf;  }

.targetStrItemss-icon li{ background: #eeeeee; display: inline-block; border-radius: 50em; width: 125px; height: 125px; text-align: center; margin: 1.5em 0 .3em .4em;  }
.targetStrItemss-icon img{ width: 50px; display: block; margin: 25px auto 8px auto; }

@media (max-width:1200px){
	.targetStrItemss-1{ width: 160px; }
	.targetStrItemss-2{ width: calc( 100% - 165px); }
	.targetStrItemss h4{ font-size: 1.2rem; }
}
@media (max-width:1100px){
	.targetStrItemss-icon li{ width: 96px; height: 96px;}
	.targetStrItemss-icon img{ width: 40px; margin: 15px auto 0 auto; }
}
@media (max-width:900px){
	.targetStrItemss-1,
	.targetStrItemss-2{ width: 100%; }
}
@media (max-width:700px){
	.targetStrItemss-txt,
	.targetStrItemss-icon{ width: 100%}
	.targetStrItemss-icon{ padding-bottom: 1em; }
}


/* ===============  about  =============== */ 
#ABOUT2{ padding: 5em 0; }
#ABOUT2.bg1{ background: #eae5e8; }
.aboutUs{ width: 100%; padding: 1em 0; margin-bottom: 4em;  }
.aboutUs-1{ width: 33%; display: inline-block; vertical-align: top; padding-bottom: 3em; text-align: left; line-height: 1.3;  }
.aboutUs-2{ width: 62%; display: inline-block; vertical-align: top; padding-bottom: 1em; text-align: left; line-height: 1.6; padding-top: 1.3em; }

.aboutUs .section_cap{ font-size: 1.375rem; font-weight: 800;  }
.aboutUs .section_cap:before{ content: ''; width: 1.1em; height: 8px; display: block; margin-bottom: .5em; background: #dda303; }
.aboutUs .about_scap{ font-size: 1.125rem; font-weight: 300; margin-top: .5em; }


@media (max-width: 880px){ 
	.aboutUs-1,
	.aboutUs-2{ width: 100%;  }
	.aboutUs-2{ font-size: .8rem;} 
	.urbanPercent li{ padding-bottom: 2.5em;}
	.urbanPercent li h6 em{ font-size: 2rem; }
	.urbanPercent li h6 i{ font-size: 1rem;}
}


.aboutUs table{ width: 100%; }
.aboutUs td{ padding: .2em 0; }

.aboutUs ul{}
.aboutUs li{ position: relative; margin-bottom: .3em; padding-left: 1.5em; }
.aboutUs li:before{ content: ''; width: 10px; height: 2px; background: #bfbfbf; display: inline-block; position: absolute; top: .7em; left: 0; }

.urbanPercent{ width: 100%; margin: 3em 0 1em 0; -js-display: flex; display: -ms-flexbox; display: -webkit-box; display: -webkit-flexbox;  display: -webkit-flex; display: flex; 
-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; -ms-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; }
.urbanPercent li{ width: 30%; display: inline-block; vertical-align: top;  position: relative; padding-bottom: 3.3em; padding-left: 0; }
.urbanPercent li small{ font-size: .8rem; letter-spacing: 1px;  display: block; position: relative; max-width: 12em; z-index: 99;  }
.urbanPercent li h6{ position: absolute; bottom: 0; left: 0; text-align: right; width: 100%; line-height: -1; color: #00817b;   }
.urbanPercent li h6:before{ content: ''; width: 100%; width: calc( 100% - 1em); height: 1px; background: #999; display: inline-block; position: absolute; left: 0; bottom: 1em; z-index: -1; }
.urbanPercent li h6 em{ font-weight: 600; font-size: 3rem; padding-left: .2em; background: #fff; line-height: 1;   } 
.urbanPercent li h6 i{ font-size: 1.5rem; background: #fff;   }
.urbanPercent li:before{ display: none; }

.aaPoint{ margin: 2em 0; display: block; position: relative; padding-left: 1.8em; line-height: 1.7; letter-spacing: 1px; position: relative; }
.aaPoint i{ font-size: 1.3em; color: #dda303; position: absolute; top: 2px; left: 0; }
.aaPoint div{ color: #777; padding: .5em 0; }
.aaPoint h5{ font-size: 1.1rem; font-weight: bolder;  }
.aaPoint:hover h5{ color: #dda303;   }
.aaPoint strong{ color: #777; display: inline-block; border-bottom: solid 1px #777; font-size: .8rem; }
.aaPoint:hover strong{ letter-spacing: .3em; border-color: #dda303; transition: all .5s;  }
.aaPoint:before{ content: "\e90e"; position: absolute; top: 2px; left: 0; display: inline-block; font-size: 1.3em; color: #dda303;
font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }



/* ===============  banner BG  =============== */ 
.aboutBG-1,
.aboutBG-1g,
.aboutBG-2,
.aboutBG-2g{ position: absolute; bottom:0; z-index: 1; transform-origin: bottom; }

.aboutBG-1{ left: -10px;  }
.aboutBG-1g{ left:  -10px;   }
.aboutBG-2{ bottom:0; right: 0;  }
.aboutBG-2g{ bottom:0; right:  0;   }
@media (max-width:1460px){
	.aboutBG-1,
	.aboutBG-1g{ left: -10%; }
	.aboutBG-2,
	.aboutBG-2g{ left: 80%; }
}
@media (max-width:1300px){
	.aboutBG-1{  transform: scale(.9); left: -15%;  }
	.aboutBG-1g{ }
	.ABOUT1 .titSS p{ max-width: 580px; } 
}
@media (max-width:1000px){
	.aboutBG-1{ left: -210px; transform: scale(.6);  }
	.aboutBG-1g{ left: -250px; transform: scale(.6);  }
	.aboutBG-2,
	.aboutBG-2g{ transform: scale(.7); left: 70%;  }
}



.targetBG-1,
.targetBG-2{ position: absolute;  z-index: 1; }
.targetBG-1{ left: 0; top:0; }
.targetBG-2{ right: 0; bottom:0;   }
@media (max-width: 1500px){
	.targetBG-1{ left: -3%;}
	.targetBG-2{ right: -10%; } 
	.TARGET1 .titSS p{ max-width: 580px;  } 
}
@media (max-width:880px){ 
	.targetBG-1{ left: -100px; top: -20px; transform: scale(.8); }
	.targetBG-2{ right: auto; left: 65%;  transform: scale(.8); bottom: -100px; } 
}
@media (max-width:680px){  
	.TARGET1 .titSS p{ font-size: .85rem; } 
}



.newsBG-1,
.newsBG-1g,
.newsBG-2{ position: absolute;  z-index: 1; }
.newsBG-1{ left: 0; bottom:0; }
.newsBG-1g{ left: 0; top:0; }
.newsBG-2{ right: 0; top:0; } 
@media (max-width:1300px){
	.newsBG-1{ left: -90px; transform: scale(.8); transform-origin: bottom;  }
	.newsBG-1g{ transform: scale(.5); transform-origin: left bottom;  } 
	.newsBG-2{  right: -60px; transform: scale(.6); transform-origin: top;} 
}

@media (max-width:1000px){ 
	.newsBG-2{   transform: scale(.5); top:-50px; right: -90px  } 
}
@media (max-width:780px){
	.newsBG-1{ transform: scale(.5); left: -110px;}
	.newsBG-1g{   }
	.newsBG-2{   transform: scale(.4); right: -100px; } 
}



.areaBG-1,
.areaBG-1g,
.areaBG-2,
.areaBG-2g,
.areaBG-3{ position: absolute;  z-index: 1; }
.areaBG-1,
.areaBG-1g,
.areaBG-2g{ left: -6px; top:0; }
.areaBG-2{ left: 0; bottom:0;   }
.areaBG-3{ right: -30px; bottom:0;   }
@media (max-width: 1300px){
	.areaBG-1{  }
	.areaBG-2{ display: none;   } 
	.areaBG-3{ right: -110px; } 
	.AREA1 .titSS p{ max-width: 580px;  } 
}
@media (max-width:1000px){ 
	.areaBG-1,
	.areaBG-1g,
	.areaBG-2,
	.areaBG-2g,
	.areaBG-3{  transform: scale(.8);  } 
	.areaBG-1{ left: -110px;   }
	.areaBG-1g{ left: -30px; transform-origin: bottom; }
	.areaBG-2g{ left: -90px; }
	.areaBG-3{  transform-origin: bottom; right: -180px; } 
}
@media (max-width:680px){ 
	.areaBG-1{ left: auto; right: 60%; top:-20px; }
	.areaBG-1g{  top:auto; bottom: -30px;  }
	.areaBG-2g{ left: auto; right: 60%; }
	.areaBG-3{  transform: scale(.7);  } 
	.AREA1 .titSS p{ font-size: .85rem; } 
}



/* ===============  timeline  =============== */ 
#timeline { position: relative;    }
#timeline::before { content: ''; position: absolute; top: 2em; left: 0px; height: 100%; width: 5px; background: url(../img/bgTimeline.gif) repeat 0 0; } 
.timeline-block { position: relative; margin: 2em 0;    }
.timeline-block:after { content: ""; display: table; clear: both; }
.timeline-block:first-child { margin-top: 0; }
.timeline-block:last-child { margin-bottom: 0; } 
.timeline-block img{ max-width: 100%; }
.timeline-img { position: absolute; top: 2em; left: -6px; width: 21px; height: 21px; border-radius: 50em; background: #fff; border: solid 3px #00817b;   } 

.timeline-content { position: relative; margin-left: 60px; padding: 1.5em; border-radius: 10px; transition: all .5s; text-align: left; }
.timeline-content:hover{ background: #f2f2f2; }

.timeline-content:after { content: ""; display: table; clear: both; } 
.timeline-content ._date { color: #fff; line-height: 1.3;  padding: .4em; margin-bottom: .5em; font-size: 1.125rem; background: #dda303; display: inline-block; text-align: center; font-weight: 700; border-radius: 3px; font-family: 'Oswald', sans-serif; }   
.timeline-content .year_title{font-size: 1.125rem; color: #00817b; font-weight: bold; margin-bottom: .5em; } 
.timeline-content ._txt{ margin-bottom: 2em; }
.timeline-content ._img img{ max-width: 100%;  }

@media only screen and (min-width: 640px) {
  #timeline::before {  left: 50%; margin-left: -2px;   }
  .timeline-block { margin: 4em 0; }
  .timeline-block:first-child { margin-top: 0; }
  .timeline-block:last-child { margin-bottom: 0; }
  .timeline-img { left: 50%; margin-left: -6px; margin-left: -10px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; transform: translateZ(0); backface-visibility: hidden; }  
  .timeline-content { margin-left: 0;   width: 45%; }
  .timeline-block:nth-child(odd) .timeline-content { text-align: right; }   
  .timeline-block:nth-child(even) .timeline-content { float: right; text-align: left; } 
}

@media only screen and (max-width: 700px){
	.timeline-content{ margin-left: 2em; }
}

 


/* ===============  office  =============== */ 
#ABOUT2{ text-align: center;  }
.positionName{    }
.positionName small{ display: block; margin-bottom: 1.1em;  }
.positionName strong{ font-weight: bold; display: block; margin-bottom: 1em;  }
.positionName::before{ content: ''; width: 5px; height: 35px; background: url(../img/bgSlash.gif) repeat-y center 0; display: block; margin: 0 auto 1em auto;  } 
.chairman{ position: relative; padding: 0 2em ; display: inline-block; max-width: 80%; }
.chairman ._name{ position: absolute; top: 1.5em; left: 0; text-align: left;  }
.chairman ._name small{ display: block; margin-bottom: 1.1em;  }
.chairman ._name strong{ font-weight: bold; display: block; margin-bottom: 1em;  }

.positionName ._img{ width: 200px; height: 200px; overflow: hidden; border-radius: 50em; background: #d1c0a5; margin: 2em auto; }
.positionName ._name2{ display: inline-block; vertical-align: top; width: 45%; min-width: 220px; max-width: 300px;  }



.office3pointss{ margin: 1em 0; }
.office3pointss li{ width: 32%; max-width: 300px; padding: 1em .3em; display: inline-block; }
.office3pointss .subcap{ font-size: 1rem; font-weight: bold; margin-bottom: 1em; }
.office3pointss fieldset{   }
.office3pointss fieldset p{ margin: .4em 0; font-size: .85rem; }
.office3pointss fieldset p:not(:first-of-type)::before{ content: ''; margin: .2em auto; display: block; width: 3px; height: 3px; background: #00817b; transform: rotate(45deg); }

fieldset { border-radius: 3px; text-align: center; padding: .5em .5em 1.3em .5em; border: solid 1px #00817b;  }
legend { color: #00817b; padding: .5em; font-weight: bold; letter-spacing: 1px;  }

.positionPRO{ padding: 1em 2em; display: inline-block; font-weight: bold; color: #dda303; border: solid 2px #dda303; background: #fff; border-radius: 50em;  }

@media (max-width: 640px){
	.office3pointss fieldset p{ font-size: .8rem; }
	.office3pointss fieldset{  }
}

@media (max-width: 780px){
	.office3pointss li{ width: 80%; display: block; margin: 0 auto;   }
}



/* ===============  linkss  =============== */ 
.linkssList{ width: 100%; text-align: center; margin: 0 auto 3em auto;   }
.linkssList li{ width: 23%; max-width: 200px; display: inline-block; vertical-align: top; margin: 0 .5% 0 .5%; padding-bottom: 4em;  }
.linkssList li a{ width:100%; display: block;  margin: 0 auto; position: relative; overflow: hidden;  }
.linkssList ._img{ background: #fff; border-radius: 6px; padding: 1em; width: 100%; transition: all .5s; }
.linkssList ._txt{ font-size: .9rem; line-height: 1.5; transition: all .3s; }
.linkssList ._txt:before{ content: ''; display: block; width: 1px; height: 2em; background: #dda303; margin: -1em auto .5em auto; position: relative;  }
.linkssList img{ max-width: 100%;  }
.linkssList li a:hover ._img{ filter: brightness(120%); -webkit-filter: brightness(120%); -moz-filter: brightness(120%); }
.linkssList li a:hover ._txt{ color: #dda303; }
@media only screen and (max-width: 1200px){
	.linkssList li{ width: 31%; }
}
@media only screen and (max-width: 700px){
	.linkssList li{ width: 48%;   }
}

 
/* ===============  video  =============== */ 
.movie{position:relative;padding-bottom:56.25%; padding-top:30px; height:0;overflow:hidden;}
.movie iframe,
.movie object,
.movie embed{
position:absolute; top:0; left:0; width:100%; height: 315px; border: 0 none; } 

 
/* ==========================================================================
Waypoints
========================================================================== */
/*.hide, .wp1{ visibility: hidden; }*/
.visible, .animated.fadeIn  { visibility: visible !important; }