@charset "UTF-8";
/*英文*/
.dooreffects {
	width: 100%;
	height: 950px;
	overflow: hidden;
}
.dooreffects h2 {
	font-size: 273%;
	text-align: center;
	line-height: 1.6em;
	letter-spacing: 4px;
	display: block;
	position: absolute;
	width: 100%;
	top: 30px;
	left: 8px;
	z-index: 1000;
	color: #fff;
	text-shadow: 2px 3px 0px rgba(0,0,0,0.3);
}
.dooreffects .ctrl-box {
	position: relative;
	height: 100%;
}
.dooreffects .festival, .dooreffects .viewpoint {
	width: 1920px;
	height: 100%;
	position: absolute;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
	top: 0;
}
.dooreffects .festival {
	left: 50%;
}
.dooreffects .viewpoint {
	right: 50%;
}
.dooreffects .festival .bg-box {
	background: #68c1bd url(../../resources/images/festival.png) no-repeat center;
	background-position: -604px center;
}
.dooreffects .viewpoint .bg-box {
	background: #aec867 url(../../resources/images/viewpoint.png) no-repeat center;
	background-position: 1316px center;
}
.dooreffects .bg-box {
	width: 100%;
	height: 100%;
	/*background-size: contain !important;*/
	background-size: auto 100% !important;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
}
/*展開按鈕*/

.dooreffects .btn-open {
	display: block;
	position: absolute;
	top: calc((100% - 130px)/2);
}
.dooreffects .btn-open>a {
	position: relative;
	display: block;
	width: 130px;
	height: 130px;
	border-radius: 100%;
	text-decoration: none;
	text-align: center;
}
.dooreffects .btn-open>a>span {
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	color: #fff;
	font-size: 160%;
	line-height: 1.2em;
	padding: 10px 0;
}
.dooreffects .festival .btn-open {
	left: 20%;
}
/* 20180103 惟夫新增 按鈕水波紋特效 */
.dooreffects .btn-open>a::before{
	content: '';
    border: 5px #fff solid;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 100%;
    left: 0;
    top: 0;
	box-sizing: border-box;
	-webkit-animation: ripple 1.5s ease infinite;
	-moz-animation: ripple 1.5s ease infinite;
	-o-animation: ripple 1.5s ease infinite;
	-ms-animation: ripple 1.5s ease infinite;
	animation: ripple 1.5s ease infinite;
}
@-webkit-keyframes ripple {
	100% {
	  transform: scale(1.3, 1.3);
	  opacity: 0;
	}
}
@keyframes ripple {
	100% {
	  transform: scale(1.3, 1.3);
	  opacity: 0;
	}
}
/* 20180103 惟夫新增 按鈕水波紋特效 結束 */
@media screen and (max-width: 1025px) {
.dooreffects .festival .btn-open {
	left: 18%;
}
}
.dooreffects .festival .btn-open>a {
	background: #fff url(../../resources/images/festival_icon.svg) no-repeat center/60%;
}
.dooreffects .viewpoint .btn-open {
	right: 20%;
}
@media screen and (max-width: 1025px) {
.dooreffects .viewpoint .btn-open {
	right: 18%;
}
}
.dooreffects .viewpoint .btn-open>a {
	background: #fff url(../../resources/images/viewpoint_icon.svg) no-repeat center/90%;
}
/*返回按鈕*/

.dooreffects .btn-back {
	display: none;
	position: absolute;
	top: calc((100% - 90px)/2);
	z-index: 3;
}
.dooreffects .btn-back>a {
	display: block;
	width: 90px;
	height: 90px;
	background-color: #fff;
	border-radius: 100%;
	text-indent: -9999px;
}
.dooreffects .festival .btn-back {
	left: 5%;
}
.dooreffects .festival .btn-back>a {
	background: #fff url(../../resources/images/right.svg) no-repeat center/28%;
}
.dooreffects .viewpoint .btn-back {
	right: 5%;
}
.dooreffects .viewpoint .btn-back>a {
	background: #fff url(../../resources/images/left.svg) no-repeat center/28%;
}
/*外連按鈕*/

.dooreffects .btn-into {
	display: none;
	position: absolute;
	right: 5%;
	bottom: 10%;
}
.dooreffects .btn-into>a {
	display: block;
	text-decoration: none;
	position: relative;
}
.dooreffects .btn-into>a::before {
	content: '';
	width: 70px;
	height: 70px;
	display: inline-block;
	border-radius: 100%;
	vertical-align: middle;
	margin-right: 10px;
}
.dooreffects .btn-into>a>span {
	color: #fff;
	display: inline-block;
	font-size: 190%;
	vertical-align: middle;
}
.dooreffects .festival .btn-into>a::before {
	background: #fff url(../../resources/images/festival_icon.svg) no-repeat center/60%;
}
.dooreffects .viewpoint .btn-into>a::before {
	background: #fff url(../../resources/images/viewpoint_icon.svg) no-repeat center/90%;
}
/*選項按鈕*/

.dooreffects .list-box {
}
.dooreffects .list-box>li {
	position: absolute;
	display: none;
}
.dooreffects .list-box>li figure {
	line-height: 1.4em;
	width: 199px;
	box-sizing: border-box;
	position: relative;
	background-color: #fff;
	padding: 7px 7px 0px;
}
.dooreffects .list-box>li figure a {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	text-indent: -9999px;
}
.dooreffects .list-box>li figure .graphic {
	width: 185px;
	height: 123px;
	overflow: hidden;
}
.dooreffects .list-box>li figure .graphic>img {
	width: 100%;
}
.dooreffects .list-box>li figure figcaption {
	color: #4ab0c2;
	padding: 6px 0;
}
.dooreffects .list-box>li:hover figure {
	background-color: #ffd200;
}
.dooreffects .list-box>li:hover figure figcaption {
	color: #000;
}
.dooreffects .list-box>li figure::before {
	content: '';
	position: absolute;
	display: block;
	background-color: #fff;
}
/*.dooreffects .list-box>li figure::after {
	content: '';
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	border-radius: 100%;
}*/
.dooreffects .list-box>li.item-n {
	top: 8%;
	left: calc(50% + 260px);
}
.dooreffects .list-box>li.item-c {
	top: 25%;
	left: calc(50% - 330px);
}
.dooreffects .list-box>li.item-s {
	top: 76%;
	left: calc(50% - 420px);
}
.dooreffects .list-box>li.item-e {
	top: 56%;
	left: calc(50% + 195px);
}
.dooreffects .list-box>li.item-m {
	top: 10%;
	left: calc(50% - 560px);
}
.dooreffects .list-box>li.item-k {
	top: 46%;
	left: calc(50% - 460px);
}
.dooreffects .list-box>li.item-p {
	top: 345%;
	left: calc(50% - 460px);
}
.dooreffects .list-box>li.item-m-no {
	top: 10%;
	left: calc(50% - 560px);
}
.dooreffects .list-box>li.item-k-no {
	top: 45%;
	left: calc(50% - 460px);
}
.dooreffects .list-box>li.item-p-no {
	top: 345%;
	left: calc(50% - 460px);
}
/*
.dooreffects .list-box>li.item-n figure::after {
	top: 120px;
	left: -84px;
}
.dooreffects .list-box>li.item-n figure::before {
	width: 72px;
	height: 2px;
	top: calc(120px + 7px);
	left: -72px;
}
.dooreffects .list-box>li.item-c figure::after {
	top: 70px;
	left: calc(100% + 35px);
}
.dooreffects .list-box>li.item-c figure::before {
	width: 42px;
	height: 2px;
	top: calc(70px + 7px);
	left: 100%;
}
.dooreffects .list-box>li.item-s figure::after {
	top: 73px;
	left: calc(100% + 62px);
}
.dooreffects .list-box>li.item-s figure::before {
	width: 67px;
	height: 2px;
	top: 80px;
	left: 100%;
}
.dooreffects .list-box>li.item-e figure::after {
	top: 50px;
	left: -74px;
}
.dooreffects .list-box>li.item-e figure::before {
	width: 66px;
	height: 2px;
	top: calc(50px + 7px);
	left: -66px;
}
.dooreffects .list-box>li.item-m figure::after {
	top: 65px;
	left: calc(100% + 30px);
}
.dooreffects .list-box>li.item-m figure::before {
	width: 30px;
	height: 2px;
	top: calc(65px + 7px);
	left: 100%;
}
.dooreffects .list-box>li.item-m-no figure::after {
	width: 0px;
	height: 0px;
	top: 65px;
	left: calc(100% + 30px);
}
.dooreffects .list-box>li.item-m-no figure::before {
	width: 0px;
	height: 0px;
	top: calc(65px + 7px);
	left: 100%;
}
.dooreffects .list-box>li.item-k figure::after {
	top: -50px;
	left: 35px;
}
.dooreffects .list-box>li.item-k figure::before {
	width: 2px;
	height: 42px;
	top: -42px;
	left: calc(35px + 7px);
}
.dooreffects .list-box>li.item-k-no figure::after {
	width: 0px;
	height: 0px;
	top: -50px;
	left: 35px;
}
.dooreffects .list-box>li.item-k-no figure::before {
	width: 0px;
	height: 0px;
	top: -42px;
	left: calc(35px + 7px);
}
.dooreffects .list-box>li.item-p figure::after {
	top: calc(100% + 40px);
	left: 115px;
}
.dooreffects .list-box>li.item-p figure::before {
	width: 2px;
	height: 40px;
	top: 100%;
	left: calc(115px + 7px);
}
.dooreffects .list-box>li.item-p-no figure::after {
	width: 0px;
	height: 0px;
	top: calc(100% + 40px);
	left: 115px;
}
.dooreffects .list-box>li.item-p-no figure::before {
	width: 0px;
	height: 0px;
	top: 100%;
	left: calc(115px + 7px);
}
*/
/*選單展開後*/

.dooreffects .showFestival .festival .btn-back, .dooreffects .showFestival .festival .btn-into, .dooreffects .showViewpoint .viewpoint .btn-back, .dooreffects .showViewpoint .viewpoint .btn-into {
	display: block;
}
.dooreffects .showFestival .festival .btn-open, .dooreffects .showViewpoint .viewpoint .btn-open {
	display: none;
}
.dooreffects .showFestival .festival {
	left: 0;
	width: 100%;
}
.dooreffects .showViewpoint .viewpoint {
	right: 0;
	width: 100%;
}
.dooreffects .showFestival .festival .bg-box, .dooreffects .showViewpoint .viewpoint .bg-box {
	background-position: center;
}
/*標題*/

.dooreffects .title {
	display: none;
	font-size: 260%;
	text-align: center;
	line-height: 1.6em;
	letter-spacing: 4px;
	color: #fff;
	position: absolute;
	width: 100%;
	top: 30px;
	left: 0;
	text-shadow: 2px 3px 0px rgba(0,0,0,0.3);
	font-style: initial;
	font-family: inherit;
}
 @media screen and (max-width: 1200px) {
.dooreffects .btn-back>a {
	width: 70px;
	height: 70px;
}
.dooreffects .btn-back {
	top: calc((100% - 70px)/2);
}
.dooreffects .festival .btn-back {
	left: 3%;
}
.dooreffects .viewpoint .btn-back {
	right: 3%;
}
}
 @media screen and (max-width: 1200px) and (max-height: 768px) {
.dooreffects {
	height: 768px;
}
.dooreffects .viewpoint .bg-box {
	background-position: 1430px center;
}
.dooreffects .festival .bg-box {
	background-position: -490px center;
}
.dooreffects .list-box>li.item-n {
	top: 8%;
	left: calc(50% + 200px);
}
.dooreffects .list-box>li.item-c {
	top: 22%;
	left: calc(50% - 271px);
}
.dooreffects .list-box>li.item-s {
	top: 72%;
	left: calc(50% - 300px);
}
.dooreffects .list-box>li.item-e {
	top: 48%;
	left: calc(50% + 105px);
}
.dooreffects .list-box>li.item-m {
	top: 7%;
	left: calc(50% - 497px);
}
.dooreffects .list-box>li.item-k {
	top: 46%;
	left: calc(50% - 360px);
}
.dooreffects .list-box>li.item-p {
	top: 45%;
	left: calc(50% - 360px);
}
.dooreffects .list-box>li.item-m-no {
	top: 7%;
	left: calc(50% - 497px);
}
.dooreffects .list-box>li.item-k-no {
	top: 46%;
	left: calc(50% - 360px);
}
.dooreffects .list-box>li.item-p-no {
	top: 45%;
	left: calc(50% - 360px);
}
/*.dooreffects .list-box>li.item-n figure::before {
	width: 140px;
	top: calc(97px + 7px);
	left: -140px;
}
.dooreffects .list-box>li.item-n figure::after {
	top: 97px;
	left: -140px;
}
.dooreffects .list-box>li.item-c figure::before {
	width: 40px;
	top: calc(70px + 7px);
	left: 100%;
}
.dooreffects .list-box>li.item-c figure::after {
	top: 70px;
	left: calc(100% + 40px);
}
.dooreffects .list-box>li.item-s figure::before {
	width: 40px;
	top: 30px;
	left: 100%;
}
.dooreffects .list-box>li.item-s figure::after {
	top: calc(30px - 7px);
	left: calc(100% + 40px);
}
.dooreffects .list-box>li.item-k figure::before {
	height: 85px;
	top: -85px;
	left: calc(17px + 7px);
}
.dooreffects .list-box>li.item-k figure::after {
	top: -85px;
	left: 17px;
}
.dooreffects .list-box>li.item-k-no figure::before {
	width: 0px;
	height: 0px;
	top: -85px;
	left: calc(17px + 7px);
}
.dooreffects .list-box>li.item-k-no figure::after {
	width: 0px;
	height: 0px;
	top: -85px;
	left: 17px;
}
.dooreffects .list-box>li.item-p figure::before {
	height: 10px;
	top: 100%;
	left: calc(72px + 7px);
}
.dooreffects .list-box>li.item-p figure::after {
	top: calc(100% + 10px);
	left: 72px;
}
.dooreffects .list-box>li.item-p-no figure::before {
	width: 0px;
	height: 0px;
	top: 100%;
	left: calc(72px + 7px);
}
.dooreffects .list-box>li.item-p-no figure::after {
	width: 0px;
	height: 0px;
	top: calc(100% + 10px);
	left: 72px;
}*/
}
 @media screen and (max-width: 1000px) {
.dooreffects {
	height: auto;
	overflow: initial;
}
.dooreffects .ctrl-box {
	width: 100%;
	height: 0;
	padding-bottom: 50%;
}
.dooreffects .festival,  .dooreffects .viewpoint {
	width: 50%;
}
.dooreffects .festival .bg-box,  .dooreffects .viewpoint .bg-box {
	background-image: none;
}
.dooreffects .btn-open {
	display: none;
}
.dooreffects .btn-into {
	display: block;
}
.dooreffects .btn-into>a::before {
	display: none;
}
.dooreffects .festival .btn-into,  .dooreffects .viewpoint .btn-into {
	right: auto;
	bottom: auto;
	left: calc((100% - 200px)/2);
	top: calc((100% - 200px)/2);
}
.dooreffects .festival .btn-into>a,  .dooreffects .viewpoint .btn-into>a {
	width: 200px;
	height: 200px;
	border-radius: 100%;
	position: relative;
	text-align: center;
}
.dooreffects .festival .btn-into>a>span,  .dooreffects .viewpoint .btn-into>a>span {
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	color: #fff;
	font-size: 200%;
	padding: 20px 0 10px;
}
.dooreffects .festival .btn-into>a {
	background: #fff url(../../resources/images/festival_icon.svg) no-repeat center/60%;
}
.dooreffects .viewpoint .btn-into>a {
	background: #fff url(../../resources/images/viewpoint_icon.svg) no-repeat center/90%;
}
}
@media screen and (max-width: 768px) {
.dooreffects h2 {
	top: 25px;
}
.dooreffects .festival .btn-into,  .dooreffects .viewpoint .btn-into {
	left: calc((100% - 170px)/2);
	top: calc((100% - 170px)/2);
}
.dooreffects .festival .btn-into>a,  .dooreffects .viewpoint .btn-into>a {
	width: 170px;
	height: 170px;
}
.dooreffects .festival .btn-into>a>span,  .dooreffects .viewpoint .btn-into>a>span {
	font-size: 170%;
}
}
@media screen and (max-width: 640px) {
.dooreffects h2 {
	display: none;
}
.dooreffects .festival .btn-into,  .dooreffects .viewpoint .btn-into {
	left: calc((100% - 150px)/2);
	top: calc((100% - 150px - 47px)/2);
}
.dooreffects .festival .btn-into>a,  .dooreffects .viewpoint .btn-into>a {
	width: 150px;
	height: 150px;
}
.dooreffects .festival .btn-into>a>span,  .dooreffects .viewpoint .btn-into>a>span {
	font-size: 150%;
	padding: 10px 0;
}
}
@media screen and (max-width: 480px) {
.dooreffects .festival .btn-into,  .dooreffects .viewpoint .btn-into {
	left: calc((100% - 120px)/2);
	top: calc((100% - 120px - 47px)/2);
}
.dooreffects .festival .btn-into>a,  .dooreffects .viewpoint .btn-into>a {
	width: 120px;
	height: 120px;
}
.dooreffects .festival .btn-into>a>span,  .dooreffects .viewpoint .btn-into>a>span {
	font-size: 120%;
}
}
@media screen and (max-width: 420px) {
.dooreffects .festival .btn-into,  .dooreffects .viewpoint .btn-into {
	left: calc((100% - 100px)/2);
	top: calc((100% - 100px - 37px)/2);
}
.dooreffects .festival .btn-into>a,  .dooreffects .viewpoint .btn-into>a {
	width: 107px;
	height: 107px;
}
.dooreffects .festival .btn-into>a>span,  .dooreffects .viewpoint .btn-into>a>span {
	font-size: 110%;
	padding: 5px 0;
	letter-spacing: 0px;
}
}
@media screen and (max-width: 350px) {
.dooreffects .festival .btn-into,  .dooreffects .viewpoint .btn-into {
	left: calc((100% - 90px)/2);
	top: calc((100% - 90px - 27px)/2);
}
.dooreffects .festival .btn-into>a,  .dooreffects .viewpoint .btn-into>a {
	width: 90px;
	height: 90px;
}
.dooreffects .festival .btn-into>a>span,  .dooreffects .viewpoint .btn-into>a>span {
	font-size: 90%;
	padding: 0;
}
}