img {max-width: 100%;}
#hengapp {width: 100%;height: 85%;overflow: hidden;}
.ui-big-images {position: absolute;height: 100%;width: 100%;overflow: hidden;display: flex;}
.ui-big-image {width: 100%;margin-right: -100%;}
.ui-big-image img {-o-object-fit: cover;object-fit: cover;-o-object-position: center 20%;object-position: center 20%;width: 100%;height: 100%;display: block;}
@media (max-height: 600px) {.ui-big-image img {-o-object-position: center center;object-position: center center;}}

.ui-thumbnails {position: absolute;width: 100%;bottom: 0;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;padding: 0 1rem;padding-top: .5rem;   z-index:999; text-align:center;}

.ui-thumbnail {display: block;margin-right: .5rem;padding: .5rem 0;cursor: pointer;}

.ui-cuticle {position: absolute;bottom: 0;height: .25rem;width: 100%;}
.ui-cuticle:before  {background-color: #D4A12D;position: absolute;bottom: 0;height: .25rem;width: 100%;}

.ui-thumbnail > img {width: auto;}

.ui-content {position: absolute;width: 40%;right: 5%;bottom: 0;}

.ui-articles {background: #493e56;color: white;display: flex;align-items: stretch;overflow: hidden;}

.ui-article {padding: 1.5rem;width: 100%;margin-right: -100%;display: flex;flex-direction: column;justify-content: center;}

.ui-paragraph {margin: 0;font-size: .7rem;line-height: 1.7;}

.ui-nav {position: absolute;right: 0;bottom: 100%;}
.ui-nav button {border: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: .5em;width: 2em;font-family: monospace;transition: inherit;transition-duration: 300ms;}
.ui-nav button:hover, .ui-nav button:focus {outline: none;}
.ui-nav button:active {outline: none;-webkit-transform: translateY(0.25em);transform: translateY(0.25em);transition-duration: 100ms;}

.ui-heading {margin: 0;margin-bottom: 0.5rem;font-size: 1rem;font-weight: normal;}
.ui-heading:before {content: 'ͼƬ';font-size: .5rem;text-transform: uppercase;display: block;margin-bottom: .5rem;letter-spacing: 1px;}

/* ---------------------------------- */
.ui-big-image {opacity: 0;-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.ui-big-image img {-webkit-transform: scale(0.85);transform: scale(0.85);}

.ui-big-image[data-active] ~ .ui-big-image {-webkit-transform: translateX(100%);transform: translateX(100%);}

.ui-big-image[data-active] {opacity: 1;-webkit-transform: translateX(0%);transform: translateX(0%);}
.ui-big-image[data-active] img {-webkit-transform: scale(1);transform: scale(1);}

/* ---------------------------------- */
.ui-article {-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.ui-article:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #D4A12D;opacity: 1;transition-duration: 0.35s;z-index: 1;}

.ditubj {width:270px; height:152px; line-height:152px; text-align:center; font-size:36px;}
.ditubj:before {width:270px; height:152px; line-height:152px; text-align:center; font-size:36px;background-color: #D4A12D;}

.ui-article[data-active] ~ .ui-article {-webkit-transform: translateX(100%);transform: translateX(100%);}

.ui-article[data-active] {-webkit-transform: translateX(0%);transform: translateX(0%);}
.ui-article[data-active]:before {opacity: 0;}

/* ---------------------------------- */
.ui-thumbnail > img {-webkit-filter: grayscale(100%);filter: grayscale(100%);transition-duration: 0.35s;}
.ui-thumbnail:active > img {-webkit-transform: scale(0.9);transform: scale(0.9);transition-duration: 100ms;}
.ui-thumbnail:focus {outline: none;}

.ui-cuticle {display: none;}

.ui-thumbnail[data-active] > img, .ui-thumbnail:hover > img {-webkit-filter: grayscale(0%);filter: grayscale(0%);}
.ui-thumbnail[data-active] .ui-cuticle {display: block;}

*, *:before, *:after {box-sizing: border-box;position: relative;transition-property: opacity, -webkit-transform, -webkit-filter;transition-property: transform, opacity, filter;transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;transition-duration: 0.7s, 0.7s, 0.7s;transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);}

body, html {height: 100%;width: 100%;padding: 0;margin: 0;}