@import "http://fonts.googleapis.com/earlyaccess/cwtexming.css";
@import "http://fonts.googleapis.com/earlyaccess/notosanstc.css";
@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
	transition: .3s;
}
html, body {
	height: 100%;
	}
body {
	position: relative;
	font-family: Roboto, "Noto Sans TC","微軟正黑體","繁黑體",'Microsoft JhengHei','Microsoft YaHei','Heiti TC','LiHei Pro',sans-serif,"新細明體",PMingLiU;
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1.85;
	}
footer {
	padding: 30px 0;
	color: #898989;
	font-size: 12px;
	letter-spacing: 0.2em;
	}
footer .divi {
	float: none;
	width: 50px;
	border-top: 1px solid #aaa;
	margin: 1em auto;
	}
.logo{
	position: relative;
	width: 101px;
	height: 40px;
	overflow: hidden;
	}
.logo img{
	position: relative;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -72.5px;
	width: 157px;
	height: 100px;
	}
.hundred-width-height {
	position: relative;
	height: 100vh;
	overflow: hidden;
	}
.hundred-width-height.taiwanPin,
.hundred-width-height.changhuaPin,
.hundred-width-height.changhuaPollute {
	height: 100vh;
	}
/*
.hundred-width-height.opening:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	}
*/
.pure-text-section {
	padding: 100px 0;
	color: #fff;
	background-color: #9fa0a0;
}
a.annotate {
	position: relative;
	color:inherit;
	padding: 0 0 5px;
	margin-right: 25px;
	border-bottom: 1px dashed #006e51;
	cursor: pointer;
}
a.annotate:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: -23px;
	width: 17px;
	height: 17px;
	background: url(../images/tooltip.svg) center no-repeat;
}

.box1 a.annotate:before {
	top: 32px;
	right: 91px;
}

p{
	font-size: 18px;
	line-height:1.75;
}
@media (max-width: 1024px) {
	.hundred-width-height{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.embed-responsive {
		height: auto;
		padding: 0;
		margin-bottom: -9px
		}
	.embed-responsive .embed-responsive-item,
	.embed-responsive iframe,
	.embed-responsive embed,
	.embed-responsive object,
	.embed-responsive video {
		position: relative;
		left: 0;
		width: 100vw;
		height: auto;
		}
	.embed-responsive-16by9 {
		padding-bottom: 0;
		}
}

.mapSVG {
	position: relative;
	margin: auto;
	overflow: hidden;
}
.mapSVG:before {
	content: '';
	display: block;
	clear: both;
}
.mapSVG.container > div {
	padding: 0;
	background: url(../images/mapBG.png) center no-repeat;
	background-size: cover;
}
.mapSVG img {
	width: 100%;
	height: auto;
}
.mapSVG svg {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 19999;
/*
	background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
*/
    background-color: rgb(255, 255, 255);
	background-position: 50% calc(50% - 91px);
}
.loader .container {
	display: table;
    height: 100vh;
}
.loader .container .row {
	display: table-cell;
    vertical-align: middle;
    height: 100vh;
	padding-bottom:50px;
}
.loader .col-lg-12 {
	padding: 0 3em 0;
}
.loader p.desktopVer {
	display: none;
}
.loader p.mobileVer {
	display: block;
}

@media (min-width: 768px) {
	.loader {
		background-position: center;
	}
	.loader p.desktopVer {
		display: block;
	}
	.loader p.mobileVer {
		display: none;
	}
}
.farmSays {
	float: left;
	display: block;
	width: 18px;
	height: 18px;
	margin: 5px;
	border: 2px solid #f1997e;
	background: rgba(241,153,126,0.3);
}
.factorSays {
	float: left;
	display: block;
	width: 18px;
	height: 18px;
	margin: 5px;
	border: 2px solid #fff000;
	background: rgba(255, 240, 0,0.8);
}
.waterSays {
	float: left;
	display: block;
	width: 18px;
	height: 18px;
	margin: 5px;
}
.waterSays img {
	vertical-align: top;
}
.iconSays {
	float: left;
	display: block;
	padding-right: 0;
	margin-top: 10px;
}
.opening .btnDown {
    position: absolute;
    bottom: 2em;
    width: 100%;
    text-align: center;
}
.cwLink {
	color: inherit;
    padding: 0 0 5px;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px dashed #AD5D5D;
}
.cwLink:hover {
	color: #d60c18;
	border-bottom: 1px dashed #d60c18;
}



/*====================== OP字幕 start ======================*/
.subtitle {
	position: absolute;
	padding: 25px;
	border: 1px solid #d8ae47;
	color: #af9483;
	font-size: 18px;
	font-weight: 400;
	background: #fff;
	}
.subtitle.mainLogo {
	padding: 0;
	border: 0 solid #d8ae47;
	background-color: transparent;
	}
.opening .subtitle {
	top: calc(20vh + 70px);
	left: 50%;
	margin-left: -88px;
	writing-mode: tb-rl;
	animation-duration: 31.8s;
	/*animation-iteration-count: infinite;*/
	opacity: 0;
	}
.opening .subtitle.mainLogo {
	width: 95vw;
	margin-left: 0;
	top: 30%;
    left: 2.5vw;
}
.opening .subtitle.mainLogo img {
	width: 100%;
	height: auto;
	}
@media (min-width: 768px) {
	.opening .subtitle.mainLogo img {
		height: auto;
		width: 680px;
		}
	.opening .subtitle.mainLogo {
		width: 680px;
		margin-left: -340px;
		top: 25%;
		left: 50%;
		}
	}
@media (max-height: 768px) {
	.opening .subtitle {
		top: 20vh;
		}
}
@media (max-width: 768px) {
	.subtitle {
		left: 50%;
		margin-left: -45vw;
		width: 90vw;
		padding: 12.5px;
		font-size: 16px;
		writing-mode: initial !important;
		text-align: center;
		}
	.opening .subtitle {
		position: absolute;
		top: 50%;
		margin-top: -65px;
		margin-left: -45vw;
		}
	}
.opening .subtitleOpening01 {
	animation-name: so01;
	}
.opening .subtitleOpening02 {
	animation-name: so02;
	}
.opening .subtitleOpening03 {
	animation-name: so03;
	}
.opening .subtitleOpening04 {
	animation-name: so04;
	}
.opening .subtitleOpening05 {
	animation-name: so05;
	}
@keyframes so01 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  13% {
    opacity: 1;
  }
  14% {
    opacity: 0;
  }
}
@keyframes so02 {
  0% {
    opacity: 0;
  }
  17% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
}
@keyframes so03 {
  0% {
    opacity: 0;
  }
  29% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  38% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
}
@keyframes so04 {
  0% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 1;
  }
  51% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
}
@keyframes so05 {
  0% {
    opacity: 0;
  }
  56% {
    opacity: 0;
  }
  57% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*====================== OP字幕 end ======================*/




/*====================== 頂番婆 Scroll Set Start ======================*/
.hundred-width-height.tw709 {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.taiwanPin {
	background-image: url(../images/twmap00.svg);
	background-attachment: fixed;
	z-index: 3;
}
.changhuaPin {
	background-image: url(../images/twmap01.png);
	background-attachment: fixed;
	z-index: 2;
}
.changhuaPollute {
	background-image: url(../images/twmap02.png);
	background-attachment: fixed;
	z-index: 1;
}
@media (max-width: 768px) {
		.hundred-width-height.tw709 {
			background-attachment: initial;
			border-bottom: 3px solid #fff;
		}
		.changhuaPin {
			background-image: url(../images/twmap01Mobile.png);
		}
		.changhuaPollute {
			background-image: url(../images/twmap02Mobile.png);
		}
}

/*====================== 頂番婆 Scroll Set End ======================*/




/*====================== 頂番婆字幕 start ======================*/
.changhua .subtitle {
	top: 20%;
	left: 50%;
    margin-left: -43px;
	writing-mode: tb-rl;
	animation-duration: 14s;
	animation-iteration-count: 1;
	opacity: 0;
	}
@media (max-width: 768px) {
	.changhua .subtitle {
		top: 50%;
		}
	}
.changhua .subtitleOpening01 {
	animation-name: ch01;
	}
.changhua .subtitleOpening02 {
	animation-name: ch02;
	}
.changhua .subtitleOpening03 {
	animation-name: ch03;
	}
.changhua .subtitleOpening04 {
	animation-name: ch04;
	}
.changhua .subtitleOpening05 {
	animation-name: ch05;
	}
.changhua .subtitleOpening06 {
	animation-name: ch06;
	}
@keyframes ch01 {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  28% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
}
@keyframes ch02 {
  0% {
    opacity: 0;
  }
  32% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes ch03 {
  0% {
    opacity: 0;
  }
  52% {
    opacity: 0;
  }
  53% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
}

/*.playingChangHua {
	animation-duration: 40s;
	animation-name: scroll40;
	animation-iteration-count: 1;
}
@keyframes scroll40 {
  0% {
    top: 0;
  }
  99.9% {
    top: 0;
  }
  100% {
    top: -100vh;
  }
}*/
/*====================== 頂番婆字幕 end ======================*/



/*====================== 台灣三塊地圖字幕 start ======================*/
.tw709 .subtitle {
	bottom: 75px;
	left: 50%;
	margin-left: -43px;
	}
.tw709 .subtitleOpening01 .subtitle {
	bottom: -25px;
	}

@media (max-width: 768px) {
	.tw709 .subtitle{
		margin-left: -45vw;
		}
	.tw709 .subtitleOpening03, .tw709 .subtitleOpening04 {
/*		width: 45%;*/
	}
	}
.tw709 .subtitleOpening01 {
	animation-name: tw01;
	}
.tw709 .subtitleOpening02 {
	animation-name: tw02;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	opacity: 0;
	}
.tw709 .subtitleOpening03 {
	animation-name: tw03;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	opacity: 0;
	}
.tw709 .subtitleOpening04 {
	animation-name: tw04;
	}
@keyframes tw01 {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
}
@keyframes tw02 {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes tw03 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tw04 {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
}
/*====================== 台灣三塊地圖字幕 End ======================*/



/*====================== 速聯字幕 start ======================*/
.sram .subtitle {
	top: 20%;
	left: 50%;
    margin-left: -43px;
	writing-mode: tb-rl;
	animation-duration: 9s;
	animation-iteration-count: infinite;
	opacity: 0;
	}
@media (max-width: 768px) {
	.sram .subtitle {
		top: 50%;
		margin-left:-45vw;
		}
	.changhua .subtitle{
		margin-left:-45vw;
	}
	
	}
.sram .subtitleOpening01 {
	animation-name: sram01;
	}
.sram .subtitleOpening02 {
	animation-name: sram02;
	}
.sram .subtitleOpening03 {
	animation-name: sram03;
	}
@keyframes sram01 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
}
@keyframes sram02 {
  0% {
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  53% {
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*====================== 速聯字幕 End ======================*/


.mapSection {
	position: relative;
}
#map {
	width: 100%;
	height:100vh;
}

#context {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	padding: 25px;
	font-size: 15px;
	color: #373737;
	background: #fff;
	border: 1px solid #d8ae47;
	z-index: 1003;
}

#context:before {
	position: absolute;
	display: block;
	content: '';
	width: 0;
	height: 0;
	top: -23.4px;
	left: 50%;
	margin-left: -13.5px;
	border-style: solid;
	border-width: 0 13.5px 23.4px 13.5px;
	border-color: transparent transparent #d8ae47 transparent;
}
#context:after {
	position: absolute;
	display: block;
	content: '';
	width: 0;
	height: 0;
	top: -21.4px;
	left: 50%;
	margin-left: -12.5px;
	border-style: solid;
	border-width: 0 12.5px 21.7px 12.5px;
	border-color: transparent transparent #ffffff transparent;
}

#info {
	line-height: 1.65;
	height: 70px;
	overflow: scroll;
}

@media (min-width:768px) {
	#context {
		top: 30vh;
		bottom: auto;
		right: 10em;
		width: 285px;
		font-size: 18px;
	}
	#context:before {
		top: 50%;
		left: -23px;
		margin-top: -13px;
		margin-left: auto;
		border-width: 13.5px 23.4px 13.5px 0;
		border-color: transparent #d8ae47 transparent transparent;
	}
	#context:after {
		top: 50%;
		left: -21px;
		margin-top: -12px;
		margin-left: auto;
		border-width: 12.5px 21.7px 12.5px 0;
		border-color: transparent #ffffff transparent transparent;
	}
	#info {
		height: auto;
		overflow: initial;
	}
}
.infoBTN{
	position: absolute;
	top: 50%;
	margin-top: -25px;
	cursor: pointer;
	z-index: 1000;
}
.infoBTN img{
	width: 50px;
}
.infoBTN#btn1{
	left: 1em;
}
.infoBTN#btn2, .infoBTN#btn3{
	right: 1em;
}

li.setting {
display:none;
}
    li.setting img {
    display:none;
    }

li.setting, li.info {
	width: 0px;
	overflow: hidden;
	transition: .3s;
	cursor: pointer;
}

li.setting img, li.info img {
	width: 30px;
	height: auto;
	transform: rotate(0);
}
li.setting:hover img,
li.info:hover img {
	transform: rotate(30deg);
}
#map * {
	transition: 0s;
}

.black {
	position: relative;
	z-index: 10001;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(30,45,55,.95);
	}

.notice-block {
	position: absolute;
	top: 100vh;
	width: 100%;
	height: 100vh;
	opacity: 1;
}
.notice-block.fadeOut {
	opacity: 0;
}

.notice-img {
	position: absolute;
	width: calc(100% - 30px);
	margin-left: 15px;
	margin-right: 15px;
	z-index: 10002;
}
@media (min-width:768px) {
	.notice-img {
		position: absolute;
		top: 0;
		left: 50%;
		width: 630px;
		margin-left: -315px;
		z-index: 10002;
	}
}
.notice-img .tab-content > .tab-pane img {
	position: relative;
	top: -2px;
	}
.notice-img .tab-content > .tab-pane p a {
	padding: 0 2px;
	color: #C5B391;
	border-bottom: 1px dashed #C5B391;
	}
.notice-img .tab-content > .tab-pane a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dashed #fff;
	}

.btn-close {
	position: absolute;
	right: 0px;
	top: 60px;
	width: 40px;
	height: 40px;
	color: #fff;
	background: url(../images/btn-close.svg) no-repeat center center;
	cursor: pointer;
	opacity: .8;
	}

.btn-close:hover {
	opacity: 1;
	}

.notice-img > div{
	margin: 20vh auto 0;
}

.notice-img div h2{
	font-size: 2.8em;
	margin: 1em 0 .5em;
	color: #C5B391;
}
.notice-img div p.preSays{
	color: #C5B391;
}

.mb-0 {
	margin: 0;
}
.mb-0 a.headBtn {
    display: block;
    padding: 8px 40px 8px calc(15px + 1.3em);
    border: 1px solid rgba(30,45,55,.95);
	color: rgb(30,45,55);
	background: #C5B391 url(../images/btnDown-02.svg) no-repeat;
	background-position: calc(100% - 10px) center;
	font-weight: 400;
	text-indent: -1.3em;
}
.card-block {
	padding: 15px 15px 30px;
	color: #C5B391;
}
.card-block p {
	font-size: .9em;
	line-height: 1.5;
}
#accordion img {
	position: relative;
}
#accordion img.selectName {
	/*top: -3px;*/
	height: 20px;
	/*border: solid #fff;
	border-width: 3px 5px;*/
	margin: 0 8px;
}
#accordion img.selectPin {
	/*top: -5px;*/
	height: 24px;
	margin: 0 0 0 8px;
}
.notice-img p.sourse {
	position: relative;
	margin-top: 2em;
    color: #ccc;
}
.notice-img p.sourse:before {
	position: absolute;
	content: '';
	display: block;
	top: -1em;
	left: 0;
	border-top: 3px solid #C5B391;
	width: 10px;
}
.notice-img p a {
    color: #aaa;
    font-size: inherit;
	font-weight: 400;
	padding-bottom: 3px;
	border-bottom: 1px dashed #aaa;
	margin: 0 3px;
}

.mapSayImg.desktopVer {
	display: none;
	margin: auto;
}
.mapSayImg.mobileVer {
	display: block;
	margin: auto;
}

p.fixBottom {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.15;
	z-index: 900;
	margin: 0;
	padding: 10px;
	color: #373737;
	background: rgba(255,255,255,.8);
}

@media (min-width: 440px) {
	.mb-0 a.headBtn {
		letter-spacing: .1em;
		padding: 8px 15px 8px calc(15px + 1.3em);
	}
}

@media (min-width:768px) {
	a.setting, a.info{
		display: none;
	}    
	.top-nav-collapse li.setting, .top-nav-collapse li.info{
		width: 40px;
		overflow: initial;
		padding: 4px 0 4px 12px;
	}
	.mapSayImg.desktopVer {
		display: block;
		margin: auto;
	}
	.mapSayImg.mobileVer {
		display: none;
		margin: auto;
	}
}

@media (max-width:767px) {
	#info h3 {
		font-size: 18px;
		margin: 0 0 .5em;
	}
	a.setting, a.info{
		display: none;
		position: absolute;
		right: 22px;
	}    
	a.setting{
		top: 60px;
	}    
	a.info{
		top: 105px;
	}    
	.top-nav-collapse li.setting, .top-nav-collapse li.info{
		display: none;
		width: 40px;
		overflow: initial;
		padding: 4px 0 4px 12px;
	}
	.top-nav-collapse a.setting, .top-nav-collapse a.info{
		display: block !important;
	}
	.notice-img{
		margin-top: 35px;
	}
	.btn-close {
		top:0;
	}
	.notice-img > div{
		margin: 0 auto;
	}
	.notice-img > div > p {
		font-size: 15px;
	}
	.notice-img div h2{
		font-size: 24px;
		margin: 60px 0 1em 0;
	}
}
@media (max-width:350px) {
	.map-header .text-title {
		padding-top: 0;
	}
	.map-header p {
		line-height: 1.35 !important;
		font-weight: 300 !important;
	}
	.btnDown {
		margin-top: 2em !important;
	}
}

.twSays {
	position: absolute;
	bottom: 2em;
	left: 2em;

	width: 200px;
	height: auto;
}

@media (max-width:768px) {
	.twSays {
		bottom: auto;
		top: calc(2em + 60px);
		left: 30px;
	}
}

.lastBTN {
	position: relative;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .15em;
	color: #fff;
	background: #666;
	border: 1px solid #fff;
}
.lastBTN a {
	display: block;
	padding: 50px 0;
	color: #fff;
}
.lastBTN.lbA:hover {
	background-color: #4C6A92;
}
.lastBTN.lbB:hover {
	background-color: #92B6D5;
}
.lastBTN.lbC:hover {
	background-color: #AF9483;
}
.lastBTN.lbD:hover {
	background-color: #006E51;
}
.coverimg {
	position: absolute;
	bottom: 1em;
	width: 100px;
	height: auto;
	margin: 0 20px;
	box-shadow: 3px 3px 10px rgba(0,0,0,.2);
}

@media (max-width:768px) {
	.lastBTN.lbA {
		background-color: #4C6A92;
	}
	.lastBTN.lbB {
		background-color: #92B6D5;
	}
	.lastBTN.lbC {
		background-color: #AF9483;
	}
	.lastBTN.lbD {
		background-color: #006E51;
	}
}

@media (max-width:700px) {
	.coverimg {
		display: none;
	}
}

.setting .closedNone {
	display: block;
}
.setting .closedBlock {
	display: none;
}
.setting.closed .closedNone {
	display: none;
}
.setting.closed .closedBlock {
	display: block;
}


.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}


/*------------slider------------*/
.carousel a.carousel-control {
	position: absolute;
	top: 216px;
/*	margin-top: -35px;*/
	outline: 0;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	z-index: 9999;
	background: none;
	opacity: 1;
}

.section6 .carousel a.carousel-control {
	top: 320px;
}



.carousel-control.left {
	left: 3%;
	}
.carousel-control.right {
	right: 3%;
	}
.carousel .bx-prev {
	display: block;
	padding-top: 100%;
	background: url(http://topic.cw.com.tw/2016landFactory/images/arrow-l.png) center no-repeat;
	background-size: contain;
}
.carousel .bx-next {
	display: block;
/*	padding-top: 100%;*/
	width: 45px;
	height: 45px;
	background: url(http://topic.cw.com.tw/2016landFactory/images/arrow-r.png) center no-repeat;
	background-size: contain;
}

.carousel .bx-prev:hover {
	opacity: .8;
}

.carousel .bx-next:hover {
	opacity: .8;
}
/*---------------------------------*/

.award {
	position: absolute;
	top: -25px;
	left: -5px;
	z-index: 9;
}
@media (max-width: 767px) {
	.award {
		position: absolute;
		top: 20px;
		left: -2px;
	}
}