:root {
    --accent: rgb(90, 190, 70);
    --accentText: rgb(90, 190, 70);
    --accent-invisible: rgba(90, 190, 70, 0);
    --accent-transparent: rgba(90, 190, 70, .1);
    --accent-translucent: rgba(90, 190, 70, .3);
    --accent-acrylic: rgba(690, 190, 70, .75);
    --accent-opaque: rgba(90, 190, 70, .9);
}
#trvBoard {width: 100%; height: 17em; display: flex; flex-wrap: wrap; margin-top: 1em;}
#trvBoard>div {flex-grow: 1; height: 100%;}

@media (max-width: 35em) {
	#trvBoard {height: 28em; margin-top: 0;}
	#trvBoard>div {width: 100%; height: 14em;}
}
@media (min-width: 93em) {
	#trvBoard { height: 20em; }
}
@media (min-width: 103em) {
	#trvBoard { height: 25em; }
}

.boardImg {width: 100%; height: 100%; }
.trvBoardItem { position: relative; overflow: hidden; }
.trvBoardItem .stySlideShow {transition: transform cubic-bezier(.17,.73,.31,1) .3s; pointer-events: none;}
.trvBoardItem:hover .stySlideShow {transform: scale(1.03);}
.trvItemTxt {width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; position: absolute; z-index: 2; bottom: 0; height: 0em; overflow: hidden; transition: all cubic-bezier(.17,.73,.31,1) .25s; text-decoration: none; color: inherit; cursor: default; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.trvBoardItem:hover .trvItemTxt, .trvItemTtl:hover~.trvItemTxt {height: 100%;}
body.light .trvItemTxt {background-color: rgba(228,228,228,.9);}
body.dark .trvItemTxt {background-color: rgba(28,28,28,.9);}
.trvItemTxt header {flex-shrink: 0; width: 100%; height: 1.5em; line-height: 1.5em; font-size: 2em; text-align: center; font-weight: 700; color: rgb(90, 190, 70); }
.trvItemTxt section {flex: none; display: flex; justify-content: center; align-items: center; margin-top: 1em;}
.trvItemTxt section p {margin: 0 10%; text-align: center;}

.trvItemTtl {width: 100%; height: 1.5em; line-height: 1.5em; font-size: 2em; font-weight: 700; text-align: center; bottom: 0; position: absolute; z-index: 3; transition: all cubic-bezier(.17,.73,.31,1) .25s; backdrop-filter: blur(20px);  -webkit-backdrop-filter: blur(20px);}
body.light .trvItemTtl, body.light .showSSGal {background-color: rgba(228,228,228,.75);}
body.dark .trvItemTtl, body.dark .showSSGal {background-color: rgba(28,28,28,.75);}
.trvBoardItem:hover .trvItemTtl {bottom: -1.5em;}

.trvItmEnter {color: rgb(90, 190, 70); z-index: 4; position: absolute; bottom: -1.5em; right: 2em; font-weight: 700; transition: all cubic-bezier(.17,.73,.31,1) .25s; }
.trvBoardItem:hover .trvItmEnter, .trvItemTtl:hover~.trvItmEnter {bottom: 0.75em; }

.showSSGal {width: 2.25em; height: 2.25em; position: absolute; top: .4em; right: .4em; z-index: 4; display: flex; justify-content: center; align-items: center; transition: background-color cubic-bezier(.17,.73,.31,1) .25s;}
body.light .showSSGal:hover {background-color: rgba(200,200,200,.8);}
body.dark .showSSGal:hover {background-color: rgba(56,56,56,.8);}
.showSSGal svg {width: 1.5em; height: 1.5em; transition: all cubic-bezier(.17,.73,.31,1) .25s; }
.showSSGal:active svg {width: 1.85em; height: 1.85em; transition-duration: .05s;}
body.light .showSSGal svg {stroke: rgb(28,28,28);}
body.dark .showSSGal svg {stroke: rgb(228,228,228);}

@media (max-width: 45em) {
	.trvItemTxt header {height: 1.2em; line-height: 1.2em; font-size: 1.5em;}
	.trvItemTxt section {margin-top: .5em;}
}

.trvBlog {width: 100%; height: auto; min-height: 20em; overflow: hidden; position: relative; border-top: 1em dashed rgba(90, 190, 70,.25);}
.trvBlogBg {width: 100%; height: 100%; overflow: hidden; position: absolute; opacity: .3; filter: sepia(80%) contrast(1.4) brightness(0.7); pointer-events: none;}

.trvBlogTtl {width: 25em; height: auto; overflow: hidden; position: absolute; top: .75em; left: 0; animation: blogTitIn .4s cubic-bezier(.17,.73,.31,1) backwards;}
body.light .trvBlogTtl, body.light .trvBlogCtx {background-color: rgba(228,228,228,.9);}
body.dark .trvBlogTtl, body.dark .trvBlogCtx {background-color: rgba(28,28,28,.9);}
.borderleft {width: .5em; height: 100%; background-color: rgba(90, 190, 70,.9); position: absolute; top: 0; left: 0; animation: blogTitBLIn .25s cubic-bezier(.17,.73,.31,1) .2s both;}
.trvBlogTtl1 {width: calc(100% - 1em); margin: 0 .5em; color: rgb(90, 190, 70); font-size: 2em; overflow: hidden; line-height: 1.75em; height: 1.75em;}
.trvBlogTtl1>span {font-size: .75em; transform: translateY(-.5em); display: inline-block;}
.trvBlogTtl2 {width: calc(100% - 2em); margin: 0 1em; font-size: 1em; opacity: .85; line-height: 1.5em; height: 1.5em; overflow: hidden; margin-bottom: .5em; animation: blogTit2In .3s cubic-bezier(.17,.73,.31,1) .1s both;}
@keyframes blogTitIn {0% {width: 0em;} 100% {width: 25em;}}
@keyframes blogTitBLIn {0% {height: 0em;} 100% {height: 100%;}}
@keyframes blogTit2In {0% {transform: translateY(-.5em); opacity: 0;} 100% {transform: none; opacity: 1;}}

.trvBlogCtx { width: 40%; position: relative; margin-top: 7em; margin-left: 2em; height: auto; min-height: 16em; overflow-x: hidden; overflow-y: auto; animation: fadeIn .3s ease-in-out; }
.trvBlogCtx>div {width: calc(100% - 2em); height: auto; padding: 1em; }
.trvBlogCtx>div>p {width: 100%; margin: .5em 0; text-align: justify;}
.trvBlogCtx strong {color: rgb(90, 190, 70); }
.trvBlogPic {width: 40%; position: absolute; top: 0; right: 2em; height: 100%; }
.trvBlogPic>div { filter: sepia(50%) contrast(1.4) brightness(.75) opacity(.75);}


.swayLink {text-decoration: none; color: inherit; display: flex; justify-content: flex-start; margin-bottom: .5em; align-items: center;}
.swayNo {padding: 0 .5em; text-align: center; line-height: 1.5em; height: 1.5em; width: 3em; min-width: 3em; font-weight: 700; background-color: rgb(0,130,114); color: #fff; border-radius: .3em; margin-right: 1em;}
.swayLink:hover .swayNo {text-decoration: underline;}
.swayTxt { line-height: 1.2em;}
.trvArw {opacity: .5; margin: 0 .3em;}

@media(max-width: 55em) {
	.trvBlogPic {width: 40%;  right: 0}
	.trvBlogCtx {width: calc(60% - 3em);}
}

@media(max-width: 42em) {
	.trvBlogTtl {width: 60%;}
	@keyframes blogTitIn {0% {width: 0em;} 100% {width: 60%;}}
}
@media(max-width: 35em) {
	.trvBlog {height: auto; min-height: 27em;}
	.trvBlogTtl {position: relative; width: 100%; height: auto; margin-top: .5em;}
	.trvBlogTtl1 {width: calc(100% - 1.14286em); margin: 0 0.57143em; font-size: 1.75em; line-height: 2em; height: 2em;}
	.trvBlogCtx {position: relative; margin: 1em 2em 0 2em; width: calc(100% - 4em); height: auto; top: auto; left: auto; margin-bottom: 12.5em;}
	.trvBlogPic {width: 100%; position: absolute; bottom: 1.5em; left: 0; top: auto; height: 10em; flex-wrap: wrap; flex-direction: row;}
	
	@keyframes blogTitIn {0% {width: 0em;} 100% {width: 100%;}}
}


.cityTop {width: 100%; height: 10em; position: relative; overflow: hidden;}
.cityName {width: 100%; font-size: 4em; font-weight: 700; color: rgb(90, 190, 70); text-align: center; position: absolute; bottom: 0em; z-index:1; text-shadow: 0 0 .1em rgb(53, 45, 28), 0 0 .2em rgb(53, 45, 28), 0 0 .9em rgb(53, 45, 28); }
.cityDesc {width: 100%; text-align: center; position: absolute; top: 1.75em; font-size: 2.3em; }
.cityBG {width: 100%; height: 100%; position: absolute; z-index: 0; filter: sepia(0.75) contrast(1.3); pointer-events: none; }
@media (max-width: 35em) {
	.cityTop {height:auto; min-height: 10em;}
	.cityName {width: 90%; position: relative; bottom: auto; top: 0; margin-bottom: .15em; left: 0; margin-left: 5%;}
}

.locCards {width: 100%; height: auto; display: flex; justify-content: center; position: relative; margin-top: .25em; flex-wrap: wrap; margin-bottom: 1.5em;}
.locCard {width: 18em; min-width: 18em; height: 18em; margin: .25em; position: relative; background-color: rgb(90, 190, 70); border: 1px solid rgb(90, 190, 70); color: inherit; text-decoration: none; outline: 0px solid rgb(90, 190, 70); transition: outline cubic-bezier(.17,.73,.31,1) .25s, transform cubic-bezier(.17,.73,.31,1) .35s;}
.locCard:hover {outline: .25em solid rgb(90, 190, 70); }
.locCard:active {transform: scale(.95); transition-duration: .03s;}
.locImgs {width: 100%; height: 10em; position: relative; pointer-events: none; }
.locTitle {width: 100%; height: 2em; position: absolute; z-index: 2; top: 8em; font-weight: 700; background-color: rgba(90, 190, 70, .9); color: #fff; text-align: center; line-height: 2em;}
.locInfo {width: 100%; height: 8em; display: flex; flex-direction: column; }
body.light .locInfo {background-color: rgb(228,228,228);}
body.dark .locInfo {background-color: rgb(28,28,28);}
.locThread {font-size: .85em; margin: 0 .5em; width: calc(100% - 1em); line-height: 1.5em; display: flex;}
.locThread:first-child {margin-top: .25em;}
.locThread>.title {width: 5em; display: block;}

.locCard.planTxt {display: flex; padding: .5em; justify-content: center; align-items: center; color: #fff;}
.locCard.planTxt>p {text-align: center;}
.locCard.planTxt strong {margin: 0 .5em;}

@media (max-width: 35em) {
    .locCards {width: 90%; margin: 1em 5%;}
	.locCard {width: calc(100% - 2px); margin: .25em 0; height: 10em;}
	.locImgs {width: 25%; height: 100%; position: absolute;}
	.locTitle {width: 75%; top: 0; left: 25%;}
	.locInfo {width: 75%; position: absolute; top: 2em; left: 25%;}
	.locThread {display: flex;}
	.locThread>.title {display: block;}
}

/* Header Text Type 1 */
.hlText {width: 100%; height: auto; margin: 1.5em 0 0 0; animation: floatIn .5s cubic-bezier(.17,.73,.31,1) backwards;}
.fullPic>.hlText {padding: 1em 0; position: absolute; bottom: 0; }
body.light .fullPic>.hlText, body.light .fullPic>.ctxTxt {background-color: rgba(228,228,228,.9);}
body.dark .fullPic>.hlText, body.dark .fullPic>.ctxTxt {background-color: rgba(28,28,28,.9);}
.hlTextBdTop {margin: .25em auto; width: 60%; height: .1em; background-color: rgb(90, 190, 70); animation: hlTextBdTopIn 1s cubic-bezier(.17,.73,.31,1) .1s backwards;}
@keyframes hlTextBdTopIn {0% {width: 0;} 100% {width: 60%;}}
.hlText .hlTextCtx {font-size: 1.75em; opacity: .85;}
.hlText .hlTextCtx>div {width: 50%; margin: 0.2em auto; text-align: center; line-height: 1.25em; font-style: italic;}
@media (max-width: 55em) {
	.hlTextCtx>div {width: 80%;}
}
@media (max-width: 35em) {
	.hlTextCtx {font-size: 1.4em;}
}
.hlTextBdBtm1 {margin: .25em auto .5em auto; width: 50%; height: .2em; background-color: rgb(90, 190, 70);animation: hlTextBdTopIn2 1s cubic-bezier(.17,.73,.31,1) .2s backwards; }
.hlTextBdBtm2 {margin: .25em auto; width: 45%; height: .2em; background-color: rgba(90, 190, 70,.5); animation: hlTextBdTopIn3 1s cubic-bezier(.17,.73,.31,1) .3s backwards;}
@keyframes hlTextBdTopIn2 {0% {width: 0;} 100% {width: 50%;}}
@keyframes hlTextBdTopIn3 {0% {width: 0;} 100% {width: 40%;}}

/* Header Text Type 2 */
.hlText2 {width: 100%; height: auto; margin: 1.5em 0 0 0; animation: floatIn .5s cubic-bezier(.17,.73,.31,1) backwards;}
.hlText2 .hlTextCtx {font-size: 3em; opacity: .65; font-weight: 200;}
.hlText2 .hlTextCtx>div { width: 50%; margin: 0 10%; line-height: 1.75em; animation: hlText2Text 1s cubic-bezier(.17,.73,.31,1) backwards; }
@keyframes hlText2Text {0% {letter-spacing: -.25em; opacity: 0; } 100% {word-spacing: 0; opacity: 1; }}

.ctx {width: 100%; display: flex;}
.ctxTxt.scrAct, .ctxTxt p.scrAct {animation: floatIn cubic-bezier(.17,.73,.31,1) .25s backwards;}
.ctxTxt.left {width: 30%; margin: 1.5em 0 0em 10%; text-align: justify;}
.ctxTxt.right {width: 30%; margin: 1.5em 10% 0em 10%; text-align: justify;}
.ctxPic {min-height: 15em; overflow: hidden; position: relative;}
.ctxPic.right {width: 40%; margin: 1.5em 10% 0 10%; }
.ctxPic.left {width: 40%; margin: 1.5em 0 0 10%; }
.ctxPic>.stySlideShow {width: 100%; height: 100%; position: absolute; transition: transform cubic-bezier(.17,.73,.31,1) .25s; animation: scaleIn .5s cubic-bezier(.17,.73,.31,1) backwards;}
.ctxPic.picFlip.vertical>div {height: auto;}

.ctxTxt :not(.trvInfo) strong {color: rgb(90, 190, 70);}

.collage3, .collage2 {width: 100%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: column; position: absolute;}
.collage2>div, .collage2>div>div { height: 100%; }
.collage2>div>div.galPic { background-size: cover; transition: all cubic-bezier(.17,.73,.31,1) .25s; }
.collage3.left {justify-content: flex-start;}
.collage2>div { overflow: hidden; animation: scaleIn .5s cubic-bezier(.17,.73,.31,1) backwards; }
.collage3>div { margin: .25em; overflow: hidden; animation: scaleIn .5s cubic-bezier(.17,.73,.31,1) backwards; background-size: cover; }
.collage2>div:first-child {margin-right: 1em;}
.collage3>div:first-child {width: 60%; height: 100%; margin: .25em;}
.collage2>div:nth-child(2) {animation-delay: .1s;}
.collage3>div:nth-child(2) {width: calc(40% - 1em); height: 60%; margin: .25em; animation-delay: .1s;}
.collage3>div:nth-child(3) {width: calc(40% - 1em); height: calc(40% - 1em); animation-delay: .2s;}
.collage3>div>div,.widePic>div.galPic, .fullPic>div.galPic {width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; transition: all cubic-bezier(.17,.73,.31,1) .25s, transform cubic-bezier(.17,.73,.31,1) 2s;}
.collage2>div:hover>div, .collage3>div:hover>div, .widePic:hover>div.galPic, .evenPic>div:hover>div.galPic, .fullPic:hover>div.galPic, .ctxPic:hover>.stySlideShow {transform: scale(1.05); }
.collage2>div:active>div, .collage3>div:active>div, .widePic:active>div.galPic, .evenPic>div:active>div.galPic, .fullPic:active>div.galPic, .ctxPic:active>.stySlideShow {transform: scale(1.02); transition: all cubic-bezier(.17,.73,.31,1) .03s, transform cubic-bezier(.17,.73,.31,1) 0.03s;}


.widePic, .evenPic {width: 80%; height:20em; margin: 1.5em auto 0 auto; overflow: hidden; position: relative;  animation: scaleIn .5s cubic-bezier(.17,.73,.31,1) backwards; }
.widePic.medium, .evenPic.medium {height: 22.5em;}
.evenPic {display: flex; justify-content: center;}
.evenPic>div {overflow: hidden; flex-basis: 1em; flex-grow: 1; position: relative;}
.evenPic>div>div {width: 100%; height: 100%; position: absolute; animation: floatIn .5s cubic-bezier(.17,.73,.31,1) backwards; transition: transform cubic-bezier(.17,.73,.31,1) .25s, filter cubic-bezier(.17,.73,.31,1) .5s; background-size: cover; background-position: 50% 50%; }
.evenPic.vertical>div:not(:first-child) {margin-left: .25em;}
.evenPic.vertical>div:not(:last-child) {margin-right: .25em;}

.fullPic {width: 100%; height:25em; margin: 1.5em 0 0 0; overflow: hidden; position: relative; animation: floatIn 1s cubic-bezier(.17,.73,.31,1) backwards; }
.fullPic.large {height: 35em;}

.fullPic>.ctxTxt { position: absolute; width: 45%; margin: 0 0 0 calc(10% - 1em); bottom: 0; left: 0; padding: 1em 1em;}
.trvInfo {line-height: 1.5em;}
.trvInfo:last-child {margin-bottom: 2em;}
.trvInfo>strong {margin-right: 1em;}
.trvEnding {font-size: 2em; margin-bottom: .75em; color: rgb(90, 190, 70);}

@media (max-width: 71em) {
	.ctxTxt.left {width: 37.5%; margin: 1.5em 0 0em 7.5%; }
	.ctxTxt.right {width: 37.5%; margin: 1.5em 7.5% 0em 7.5%; }
	.ctxPic.right {width: 40%; margin: 1.5em 7.5% 0 7.5%; }
	.ctxPic.left {width: 40%; margin: 1.5em 0 0 7.5%; }
	.evenPic {width: 85%; margin: 1.5em 7.5% 0 7.5%;}
}
@media (max-width: 61em) {
	.ctxTxt.left {width: 45%; margin: 1.5em 0 0em 5%; }
	.ctxTxt.right {width: 45%; margin: 1.5em 5% 0em 5%; }
	.ctxPic.right {width: 40%; margin: 1.5em 5% 0 5%; }
	.ctxPic.left {width: 40%; margin: 1.5em 0 0 5%; }
	.evenPic {width: 90%; margin: 1.5em 5% 0 5%;}
}
@media (max-width: 55em) {
	.ctxTxt.left {width: 52.5%; margin: 1.5em 0 0em 2.5%; }
	.ctxTxt.right {width: 52.5%; margin: 1.5em 2.5% 0em 2.5%; }
	.ctxPic.right {width: 40%; margin: 1.5em 2.5% 0 2.5%; }
	.ctxPic.left {width: 40%; margin: 1.5em 0 0 2.5%; }
	.evenPic {width: 95%; margin: 1.5em 2.5% 0 2.5%;}
	.evenPic {flex-wrap: wrap;}
	.evenPic.vertical>div {min-width: calc(50% - .5em); height: calc(50% - .5em);}
	.evenPic.vertical>div {margin: .25em;}
}
@media (max-width: 52em) {
	.collage3>div:first-child {width: 100%;height: 45%; }
	.collage3>div:nth-child(2) {width: 100%;height: calc(27.5% - .5em); }
	.collage3>div:nth-child(3) {width: 100%;height: calc(27.5% - 1em); }
}
@media (max-width: 35em) {
	.ctx {flex-wrap: wrap;}
	.ctxTxt.left, .ctxTxt.right {width: 90%; margin: 1.5em 5% 0em 5%; }
	.ctxPic.right, .ctxPic.left {width: 80%; margin: 1.5em 10% 0 10%; }
	.fullPic>.ctxTxt { position: absolute; width: 80%; margin: 0 calc(10% - 1em); }

    .collage3 { flex-direction: row; }
    .collage3>div:first-child {width: 100%;height: 45%; }
	.collage3>div:nth-child(2), .collage3>div:nth-child(3) {width: calc(-0.5em + 50%); height: 50%; }
}
@media (max-width: 28em) {
	.ctxTxt.left, .ctxTxt.right {width: 95%; margin: 1.5em 2.5% 0em 2.5%; }
	.ctxPic.right, .ctxPic.left {width: 80%; margin: 1.5em 10% 0 10%; }
}


#dahuP3>div>div {filter: sepia(0.7) contrast(1.3);}
#dahuP3>div:hover>div {filter: none;}