@charset "utf-8";

/* CSS Document */

@font-face {
  font-family: "Noto Sans CJK TC";
  src: url(font/NotoSansCJKtc-Bold.otf);

  font-family: Verdana;
  src: url(font/verdana.ttf);

}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-size: 100%;
    font-family: "Helvetica Neue", "Microsoft JhengHei", Helvetica, Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.loading-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2147483647;
}

.loading-bar:before {
  -webkit-animation: loading-bar 3s ease-out;
  -moz-animation: loading-bar 3s ease-out;
  -ms-animation: loading-bar 3s ease-out;
  -o-animation: loading-bar 3s ease-out;
  animation: loading-bar 3s ease-out;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: .5rem;
  background: #84E4F9;
}

.loading-bar > * {
  -webkit-animation: loading-complete 8s ease-out;
  -moz-animation: loading-complete 8s ease-out;
  -ms-animation: loading-complete 8s ease-out;
  -o-animation: loading-complete 8s ease-out;
  animation: loading-complete 8s ease-out;
}

@-webkit-keyframes loading-bar {
  0% {
    width: 0%;
  }
  80% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes loading-bar {
  0% {
    width: 0%;
  }
  80% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes loading-bar {
  0% {
    width: 0%;
  }
  80% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading-bar {
  0% {
    width: 0%;
  }
  80% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes loading-complete {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes loading-complete {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes loading-complete {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading-complete {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


a,
img,
button {
    outline: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
}

.not-visible {
    opacity: 0;
}

.avoidclicks {
  pointer-events: none;
}

.container-fluid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 1;
}

.container-fluid.hide {
    display: none;
    opacity: 0;
}

.aside{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: fixed;
    z-index: 10;
    top: 5%;
    left: 5%;
    z-index: 2;
    font-weight: bold;
    color: #dc2020;
    text-align: center;
    padding: .5rem 0rem;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

.aside div{
    display: flex;
    width: 100%;
    height: 100%;
}

.aside.cn>div:nth-child(1){
    order: 1;
    font-size: 115%;
    font-weight: bolder;
    letter-spacing: 0;
}

.aside.cn>div:nth-child(2){
    order: 2;
    font-size: 75%;
    font-weight: bold;
}

.aside.en>div:nth-child(2){
    order: 1;
    font-size: 90%;
    font-weight: bolder;
    letter-spacing: 0;
}

.aside.en>div:nth-child(1){
    order: 2;
    font-size: 75%;
    font-weight: bold;
}


.aside.cn>div:nth-child(1)::after, .aside.en>div:nth-child(2)::after{
    content: '...';
}


.ttl{
    position: relative;
    height: 14%;
    z-index: 999;
}

.ttl .holder {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 58.875rem;
    height: 7.875rem;
    max-width: 52%;
    max-height: 100%;
    background-image: url('img/title.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 2%;
    padding-top: 1.25%;
    padding-bottom: 1%;
}

.ttl .holder div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40%;
    line-height: 1;
    text-align: left;
    letter-spacing: 1px;
    padding-left: 16%;
}

.ttl .holder.cn div:nth-child(1) {
    order: 1;
    font-size: 125%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
    height: 50%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: type 2s steps(60, end);
    animation: type 2s steps(60, end);
}

.ttl .holder.cn div:nth-child(1).typetwo {
    -webkit-animation: typetwo 2s steps(60, end);
    animation: typetwo 2s steps(60, end);
}


.ttl .holder.cn div:nth-child(2) {
    order: 2;
    font-size: 80%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}


.ttl .holder.en div:nth-child(2) {
    order: 1;
    font-size: 100%;
    font-weight: bolder;
    color: #333;
    letter-spacing: -1px;
    height: 50%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: type 2s steps(60, end);
    animation: type 2s steps(60, end);
}

.ttl .holder.en div:nth-child(2).typetwo {
    -webkit-animation: typetwo 2s steps(60, end);
    animation: typetwo 2s steps(60, end);
}

.ttl .holder.en div:nth-child(1) {
    order: 2;
    font-size: 80%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}


#cover {
    background-image: url(img/cover_bk.png);
}

#scene0 {
    background-image: url(img/scene0_bk.png);
}

#scene1 {
    background-image: url(img/scene1_bk.png);
}

#scene2 {
    background-image: url(img/scene2_bk.png);
}

#scene2.nextbk{
    background-image: url(img/scene3_bk.png);
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;    
}

#scene4 {
    background-image: url(img/scene4_bk.png);
}

#scene5 {
    background-image: url(img/scene5_bk.png);
}

#scene6 {
    background-image: url(img/scene6_bk.png);
}

#scene7 {
    background-image: url(img/scene7_bk.png);
}

.arrow {
    position: fixed;
    z-index: 9999;
    right: 5%;
    bottom: 10%;
    width: 13.20%;
    height: 15%;
    cursor: pointer;
    background-color: transparent;
    outline: 0;
    border: 0;
    box-shadow: unset;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.arrow.cn {
    background-image: url(img/arrow_cn2.png);
}

.arrow.en {
    background-image: url(img/arrow_en2.png);
}


.arrow2 {
    position: fixed;
    z-index: 9999;
    right: 5%;
    bottom: 26%;
    width: 13.20%;
    height: 15%;
    cursor: pointer;
    background-color: transparent;
    outline: 0;
    border: 0;
    box-shadow: unset;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.arrow2.cn {
    background-image: url(img/arrow_cn5.png);
}

.arrow2.en {
    background-image: url(img/arrow_en5.png);
}



#cover .arrow {
    right: 12%;
    bottom: 5%;
}

.lang {
    position: fixed;
    z-index: 9999;
    right: 3%;
    top: 5%;
    width: 13.20%;
    height: 8.56%;
    cursor: pointer;
    background-color: transparent;
    outline: 0;
    border: 0;
    box-shadow: unset;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

#cover .lang {
    right: 12%;
    bottom: 24%;
}

.lang.cn {
    background-image: url(img/lang_cn.png);
}

.lang.en {
    background-image: url(img/lang_en.png);
}

.characters {
    position: relative;
    height: 80%;
    -webkit-box-align: end!important;
    -webkit-align-items: flex-end!important;
    -ms-flex-align: end!important;
    align-items: flex-end!important;
    opacity: 0;
}

.characters .male,
.characters .female {
    position: absolute;
    display: inline-block;
    width: 119px;
    height: 116px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
    cursor: pointer;
    z-index: 999;
}


.characters .male img,
.characters .female img {
    width: 100%;
    height: 100%;
}

.characters .dropshadow {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
}

.characters .male.ready,
.characters .female.ready {
    -webkit-transform: translateX(8%);
    transform: translateX(8%);
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -ms-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

/*封面*/

#cover .arrow.cn {
    background-image: url(img/arrow_cn1.png);
}

#cover .arrow.en {
    background-image: url(img/arrow_en1.png);
}


#cover .view .top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-image: url(img/cover_view.png);
    z-index: 3;
    animation-name: eyeblink;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}

#cover .view .bottom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-image: url(img/cover_view2.png);
    z-index: 2;
}

#cover .clouds {
    height: 30%;
}


/*場景0 選角色*/

#scene0 .characters .male,
#scene0 .characters .female {
    position: absolute;
    left: 50%;
    margin-left: -56px;
}

#scene0 .characters .male {
    margin-left: -178px;
}

#scene0 .characters .male.notselect,
#scene0 .characters .female.notselect {
    width: 238px;
    height: 232px;
    -webkit-filter: drop-shadow(12px 12px 12px yellow);
    filter: drop-shadow(12px 12px 12px yellow);
    -webkit-animation-name: reminder;
    -moz-animation-name: reminder;
    -ms-animation-name: reminder;
    -o-animation-name: reminder;
    animation-name: reminder;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}


/*場景1 幼年期*/


#scene1 #bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
}

#scene1 #bubbles div {
    position: absolute;
    display: flex;
    z-index: 99;
    cursor: pointer;
    -webkit-transition: all 30s ease-in-out;
    -moz-transition: all 30s ease-in-out;
    -ms-transition: all 30s ease-in-out;
    -o-transition: all 30s ease-in-out;
    transition: all 30s ease-in-out;
}

#scene1 #bubbles .excited {
    top: 15%;
    left: 15%;
    width: 115px;
    height: 113px;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

#scene1 #bubbles .joyful {
    top: 44%;
    left: 10%;
    width: 100px;
    height: 98px;
    -ms-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
}

#scene1 #bubbles .responsible {
    top: 20%;
    left: 30%;
    width: 115px;
    height: 113px;
    -ms-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
}

#scene1 #bubbles .surprised {
    top: 42%;
    left: 23%;
    width: 115px;
    height: 113px;
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}

#scene1 #bubbles .expected {
    top: 38%;
    left: 40%;
    width: 115px;
    height: 113px;
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}

#scene1 #bubbles .anxious {
    top: 50%;
    left: 53%;
    width: 115px;
    height: 113px;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

#scene1 #bubbles .grateful {
    top: 16%;
    left: 48%;
    width: 104px;
    height: 102px;
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
}

#scene1 #bubbles .cherished {
    top: 24%;
    left: 60%;
    width: 107px;
    height: 105px;
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#scene1 #bubbles .confused {
    top: 51%;
    left: 66%;
    width: 110px;
    height: 108px;
    -ms-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
}

#scene1 #bubbles .nervous {
    top: 14%;
    left: 70%;
    width: 111px;
    height: 109px;
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#scene1 #bubbles .heavy-hearted {
    top: 36%;
    left: 78%;
    width: 135px;
    height: 133px;
    -ms-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
}

#scene1 #bubbles div div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    -webkit-box-pack: center!important;
    -webkit-justify-content: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
    width: 100%;
    height: 100%;
    background-image: url(img/scene1_bubble.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 15% 0 15% 0;
}

#scene1 #bubbles div:before {
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(70%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

    content: "";
    height: 100%;
    right: 5%;
    top: -20%;
    position: absolute;
    z-index: -1;
    height: 100%;
}

#scene1 #bubbles div:after {
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(70%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

    content: "";
    height: 100%;
    left: 10%;
    bottom: -10%;
    position: absolute;
    z-index: -1;
    height: 100%;
}

#scene1 #bubbles div div span {
    display: block;
    width: 100%;
    letter-spacing: 1px;
    text-align: center;
}

#scene1 #bubbles.cn div div span:nth-child(1) {
    height: 10%;
    order: 1;
    font-size: 125%;
    font-weight: bolder;
    color: #333;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

#scene1 #bubbles.cn div div span:nth-child(2) {
    height: 40%;
    order: 2;
    font-size: 80%;
    font-weight: bold;
    color: #e06c8d;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

#scene1 #bubbles.en div div span:nth-child(2) {
    height: 10%;
    order: 1;
    font-size: 100%;
    font-weight: bolder;
    color: #333;
    letter-spacing: -1px;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

#scene1 #bubbles.en div div span:nth-child(1) {
    height: 50%;
    order: 2;
    font-size: 100%;
    font-weight: bold;
    color: #e06c8d;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}


/*場景2 青年期*/

#scene2 .aside{
    z-index: 10;    
}

#scene2.nextbk .aside{
    z-index: 10;  
}


#scene2 #balloons{
    position: fixed;
    left: 3%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    height: 74%;
    z-index: 6;
}

#scene2 #balloons.next{
    left: 8%;
    bottom: 18%;
}

#scene2 #balloons div.characters {
    display: flex;
    position: absolute;
    width: 400px;
    height: 550px;
    left: 5rem;
    bottom: 0;
}

#scene2 #balloons div.characters.next {
    display: flex;
    position: absolute;
    width: 400px;
    height: 550px;
    left: -5rem;
    bottom: 45px;
}

#scene2 #balloons.next div.characters.next {
    display: flex;
    position: absolute;
    width: 400px;
    height: 550px;
    left: -5rem;
    bottom: 45px;
    z-index: 999;
}

#scene2 #balloons div.characters .male, 
#scene2 #balloons div.characters .female {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 331px;
    height: 544px;
}

#scene2 #balloons div.characters .male img, 
#scene2 #balloons div.characters .female img{
    max-width: 100%;
}


#scene2 #balloons div.characters .malemove, 
#scene2 #balloons div.characters .femalemove {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 331px;
    height: 544px;
}

#scene2 #balloons div.characters .malemove img, 
#scene2 #balloons div.characters .femalemove img{
    max-width: 100%;
}

#scene2 #balloons.next div.characters .male, 
#scene2 #balloons.next div.characters .female {
    left: 10%;
}


#scene2 #balloons div.characters2 {
    display: flex;
    position: absolute;
    width: 400px;
    height: 550px;
    left: -5rem;
    bottom: 0;
    z-index: 999;
}

#scene2 #balloons div.characters2 .malemove, 
#scene2 #balloons div.characters2 .femalemove {
    position: absolute;
    left: 160px;
    bottom: 0;
    width: 331px;
    height: 544px;
}

#scene2 #balloons div.characters2 .malemove img, 
#scene2 #balloons div.characters2 .femalemove img{
    max-width: 100%;
}

#scene2 #balloons .set1, #scene2 #balloons .set2{
    position: absolute;
    display: flex;
    width: 10.8rem;
    height: 35.6rem;
    cursor: pointer;
    -webkit-transition: all 30s ease-in-out;
    -moz-transition: all 30s ease-in-out;
    -ms-transition: all 30s ease-in-out;
    -o-transition: all 30s ease-in-out;
    transition: all 30s ease-in-out;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 999;
}

#scene2 #balloons .set1.teacher {
    position: absolute;
    top: -10%;
    left: 18%;
    background-image: url(img/scene2_balloon1.png);
}

#scene2 #balloons .set1.doctor {
    position: absolute;
    top: -10%;
    left: 26%;
    background-image: url(img/scene2_balloon13.png);
}

#scene2 #balloons .set1.nurse {
    position: absolute;
    top: -10%;
    left: 34%;
    background-image: url(img/scene2_balloon9.png);
}

#scene2 #balloons .set1.police {
    position: absolute;
    top: -10%;
    left: 42%;
    background-image: url(img/scene2_balloon3.png);
}

#scene2 #balloons .set1.athlete {
    position: absolute;
    top: -10%;
    left: 50%;
    background-image: url(img/scene2_balloon1.png);
}

#scene2 #balloons .set1.scholar {
    position: absolute;
    top: -10%;
    left: 58%;
    background-image: url(img/scene2_balloon3.png);
}

#scene2 #balloons .set1.astronaut {
    position: absolute;
    top: -10%;
    left: 66%;
    background-image: url(img/scene2_balloon11.png);
}

#scene2 #balloons .set1.businessman {
    position: absolute;
    top: -10%;
    left: 74%;
    background-image: url(img/scene2_balloon10.png);
}

#scene2 #balloons .set1.homemaker {
    position: absolute;
    top: -10%;
    left: 82%;
    background-image: url(img/scene2_balloon5.png);
}

#scene2 #balloons .set2.firefighter {
    position: absolute;
    top: 24%;
    left: 15%;
    background-image: url(img/scene2_balloon11.png);
}

#scene2 #balloons .set2.president {
    position: absolute;
    top: 24%;
    left: 25%;
    background-image: url(img/scene2_balloon12.png);
}

#scene2 #balloons .set2.model {
    position: absolute;
    top: 24%;
    left: 35%;
    background-image: url(img/scene2_balloon8.png);
}

#scene2 #balloons .set2.entertainer {
    position: absolute;
    top: 24%;
    left: 45%;
    background-image: url(img/scene2_balloon13.png);
}

#scene2 #balloons .set2.engineer {
    position: absolute;
    top: 24%;
    left: 55%;
    background-image: url(img/scene2_balloon4.png);
}

#scene2 #balloons .set2.accountant {
    position: absolute;
    top: 24%;
    left: 65%;
    background-image: url(img/scene2_balloon3.png);
}

#scene2 #balloons .set2.designer {
    position: absolute;
    top: 24%;
    left: 75%;
    background-image: url(img/scene2_balloon6.png);
}

#scene2 #balloons .set2.writer {
    position: absolute;
    top: 24%;
    left: 85%;
    background-image: url(img/scene2_balloon1.png);
}


#scene2 #balloons .set1.togo.teacher {
    background-image: url(img/scene2_balloon1x.png);
}

#scene2 #balloons .set1.togo.doctor {
    background-image: url(img/scene2_balloon13x.png);
}

#scene2 #balloons .set1.togo.nurse {
    background-image: url(img/scene2_balloon9x.png);
}

#scene2 #balloons .set1.togo.police {
    background-image: url(img/scene2_balloon3x.png);
}

#scene2 #balloons .set1.togo.athlete {
    background-image: url(img/scene2_balloon1x.png);
}

#scene2 #balloons .set1.togo.scholar {
    background-image: url(img/scene2_balloon3x.png);
}

#scene2 #balloons .set1.togo.astronaut {
    background-image: url(img/scene2_balloon11x.png);
}

#scene2 #balloons .set1.togo.businessman {
    background-image: url(img/scene2_balloon10x.png);
}

#scene2 #balloons .set1.togo.homemaker {
    background-image: url(img/scene2_balloon5x.png);
}

#scene2 #balloons .set2.togo.firefighter {
    background-image: url(img/scene2_balloon11x.png);
}

#scene2 #balloons .set2.togo.president {
    background-image: url(img/scene2_balloon12x.png);
}

#scene2 #balloons .set2.togo.model {
    background-image: url(img/scene2_balloon8x.png);
}

#scene2 #balloons .set2.togo.entertainer {
    background-image: url(img/scene2_balloon13x.png);
}

#scene2 #balloons .set2.togo.engineer {
    background-image: url(img/scene2_balloon4x.png);
}

#scene2 #balloons .set2.togo.accountant {
    background-image: url(img/scene2_balloon3x.png);
}

#scene2 #balloons .set2.togo.designer {
    background-image: url(img/scene2_balloon6x.png);
}

#scene2 #balloons .set2.togo.writer {
    background-image: url(img/scene2_balloon1x.png);
}



#scene2 #balloons .set1 div, #scene2 #balloons .set2 div{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    -webkit-box-pack: center!important;
    -webkit-justify-content: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
    width: 100%;
    height: 100%;
    padding: 2rem 0 28rem 0;
}

#scene2 #balloons .set1 div span, #scene2 #balloons .set2 div span{
    display: block;
    width: 100%;
    letter-spacing: 1px;
    text-align: center;
}

#scene2 #balloons.cn .set1 div span:nth-child(1), 
#scene2 #balloons.cn .set2 div span:nth-child(1){
    height: 10%;
    order: 1;
    font-size: 105%;
    font-weight: bolder;
    color: #333;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

#scene2 #balloons.cn .set1 div span:nth-child(2),
#scene2 #balloons.cn .set2 div span:nth-child(2) {
    height: 10%;
    order: 2;
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0;
    color: #2e3192;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

#scene2 #balloons.en .set1 div span:nth-child(2),
#scene2 #balloons.en .set2 div span:nth-child(2) {
    height: 10%;
    order: 1;
    font-size: 100%;
    font-weight: bolder;
    color: #333;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
    letter-spacing: -2px;
}

#scene2 #balloons.en .set1 div span:nth-child(1),
#scene2 #balloons.en .set2 div span:nth-child(1) {
    height: 10%;
    order: 2;
    font-size: 80%;
    font-weight: bold;
    color: #2e3192;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}



#scene2 #balloons .set1.togo, #scene2 #balloons .set2.togo {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    position: absolute;
   -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    transition: all .1s linear;
}


#scene2 #balloons .set1.togo.s1 {
    left: 0%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-16deg) translate(0%, 60%);
    -moz-transform: scale(0.5) rotate(-16deg) translate(0%, 60%);
    transform: scale(0.5) rotate(-16deg) translate(0%, 60%);
    z-index: 99;
}

#scene2 #balloons .set1.togo.s2 {
    left: 3.5%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-12deg) translate(-20%, 30%);
    -moz-transform: scale(0.5) rotate(-12deg) translate(-20%, 30%);
    transform: scale(0.5) rotate(-12deg) translate(-20%, 30%);
    z-index: 98;
}

#scene2 #balloons .set1.togo.s3 {
    left: -1%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-24deg) translate(0%, 35%);
    -moz-transform: scale(0.5) rotate(-24deg) translate(0%, 35%);
    transform: scale(0.5) rotate(-24deg) translate(0%, 35%);
    z-index: 97;
}

#scene2 #balloons .set1.togo.s4 {
    left: -5%;
    bottom: 5%;
    -webkit-transform: scale(0.5) rotate(-32deg) translate(11%, 68%);
    -moz-transform: scale(0.5) rotate(-32deg) translate(11%, 68%);
    transform: scale(0.5) rotate(-32deg) translate(11%, 68%);
    z-index: 96;
}

#scene2 #balloons .set1.togo.s5 {
    left: 5.8%;
    bottom: 0;
    -webkit-transform: scale(0.5) rotate(12deg) translate(5%, 30%);
    -moz-transform: scale(0.5) rotate(12deg) translate(5%, 30%);
    transform: scale(0.5) rotate(12deg) translate(5%, 30%);
    z-index: 95;
}

#scene2 #balloons .set1.togo.s6 {
    left: 8%;
    bottom: 0;
    -webkit-transform: scale(0.5) rotate(12deg) translate(5%, 30%);
    -moz-transform: scale(0.5) rotate(12deg) translate(5%, 30%);
    transform: scale(0.5) rotate(12deg) translate(5%, 30%);
    z-index: 94;
}

#scene2 #balloons .set1.togo.s7 {
    left: -3%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, 30%);
    -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, 30%);
    transform: scale(0.5) rotate(-21deg) translate(-20%, 30%);
    z-index: 93;
}

#scene2 #balloons .set1.togo.s8 {
    left: 2%;
    bottom: 10%;
    -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, 0%);
    -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, 0%);
    transform: scale(0.5) rotate(-21deg) translate(-20%, 0%);
    z-index: 92;
}

#scene2 #balloons .set1.togo.s9 {
    left: -2%;
    bottom: 10%;
    -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, 0%);
    -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, 0%);
    transform: scale(0.5) rotate(-21deg) translate(-20%, 0%);
    z-index: 91;
}

#scene2 #balloons .set1.togo.s10 {
    left: 2%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(11deg) translate(5%, 0%);
    -moz-transform: scale(0.5) rotate(11deg) translate(5%, 0%);
    transform: scale(0.5) rotate(11deg) translate(5%, 0%);
    z-index: 90;
}

#scene2 #balloons .set1.togo.s11 {
    left: 5.9%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(26deg) translate(-5%, 5%);
    -moz-transform: scale(0.5) rotate(26deg) translate(-5%, 5%);
    transform: scale(0.5) rotate(26deg) translate(-5%, 5%);
    z-index: 89;
}

#scene2 #balloons .set1.togo.s12 {
    left: -2.2%;
    bottom: 20%;
    -webkit-transform: scale(0.5) rotate(-11deg) translate(-20%, -29%);
    -moz-transform: scale(0.5) rotate(-11deg) translate(-20%, -29%);
    transform: scale(0.5) rotate(-11deg) translate(-20%, -29%);
    z-index: 88;
}

#scene2 #balloons .set1.togo.s13 {
    left: 1%;
    bottom: 20%;
    -webkit-transform: scale(0.5) rotate(-6deg) translate(-15%, -29%);
    -moz-transform: scale(0.5) rotate(-6deg) translate(-15%, -29%);
    transform: scale(0.5) rotate(-6deg) translate(-15%, -29%);
    z-index: 87;
}

#scene2 #balloons .set1.togo.s14 {
    left: 1.5%;
    bottom: -20%;
    -webkit-transform: scale(0.5) rotate(7deg) translate(25%, -29%);
    -moz-transform: scale(0.5) rotate(7deg) translate(25%, -29%);
    transform: scale(0.5) rotate(7deg) translate(25%, -29%);
    z-index: 86;
}

#scene2 #balloons .set1.togo.s15 {
    left: 4%;
    bottom: -20%;
    -webkit-transform: scale(0.5) rotate(26deg) translate(-5%, -27%);
    -moz-transform: scale(0.5) rotate(26deg) translate(-5%, -27%);
    transform: scale(0.5) rotate(26deg) translate(-5%, -27%);
    z-index: 85;
}

#scene2 #balloons .set1.togo.s16 {
    left: 7%;
    bottom: -20%;
    -webkit-transform: scale(0.5) rotate(31deg) translate(-5%, -20%);
    -moz-transform: scale(0.5) rotate(31deg) translate(-5%, -20%);
    transform: scale(0.5) rotate(31deg) translate(-5%, -20%);
    z-index: 85;
}

#scene2 #balloons .set1.togo.s17 {
    left: 11.5%;
    bottom: -30%;
    -webkit-transform: scale(0.5) rotate(43deg) translate(-13%, 23%);
    -moz-transform: scale(0.5) rotate(43deg) translate(-13%, 23%);
    transform: scale(0.5) rotate(43deg) translate(-13%, 23%);
    z-index: 83;
}


#scene2 #balloons .set2.togo.s1 {
    left: 3.75%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-16deg) translate(0%, -23%);
    -moz-transform: scale(0.5) rotate(-16deg) translate(0%, -23%);
    transform: scale(0.5) rotate(-16deg) translate(0%, -23%);
    z-index: 99;
}

#scene2 #balloons .set2.togo.s2 {
    left: 6%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-12deg) translate(-20%, -52%);
    -moz-transform: scale(0.5) rotate(-12deg) translate(-20%, -52%);
    transform: scale(0.5) rotate(-12deg) translate(-20%, -52%);
    z-index: 98;
}

#scene2 #balloons .set2.togo.s3 {
    left: 4.3%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-24deg) translate(0%, -53%);
    -moz-transform: scale(0.5) rotate(-24deg) translate(0%, -53%);
    transform: scale(0.5) rotate(-24deg) translate(0%, -53%);
    z-index: 97;
}

#scene2 #balloons .set2.togo.s4 {
    left: 3%;
    bottom: 5%;
    -webkit-transform: scale(0.5) rotate(-32deg) translate(0%, -29%);
    -moz-transform: scale(0.5) rotate(-32deg) translate(0%, -29%);
    transform: scale(0.5) rotate(-32deg) translate(0%, -29%);
    z-index: 96;
}

#scene2 #balloons .set2.togo.s5 {
    left: 4.5%;
    bottom: 0;
    -webkit-transform: scale(0.5) rotate(5deg) translate(5%, -50%);
    -moz-transform: scale(0.5) rotate(5deg) translate(5%, -50%);
    transform: scale(0.5) rotate(5deg) translate(5%, -50%);
    z-index: 95;
}

#scene2 #balloons .set2.togo.s6 {
    left: 5%;
    bottom: 0;
    -webkit-transform: scale(0.5) rotate(15deg) translate(5%, -56%);
    -moz-transform: scale(0.5) rotate(15deg) translate(5%, -56%);
    transform: scale(0.5) rotate(15deg) translate(5%, -56%);
    z-index: 94;
}

#scene2 #balloons .set2.togo.s7 {
    left: 1.6%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, -56%);
    -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, -56%);
    transform: scale(0.5) rotate(-21deg) translate(-20%, -56%);
    z-index: 93;
}

#scene2 #balloons .set2.togo.s8 {
    left: 6.5%;
    bottom: 10%;
    -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, -86%);
    -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, -86%);
    transform: scale(0.5) rotate(-21deg) translate(-20%, -86%);
    z-index: 92;
}

#scene2 #balloons .set2.togo.s9 {
    left: 2.5%;
    bottom: 10%;
    -webkit-transform: scale(0.5) rotate(-21deg) translate(-20%, -86%);
    -moz-transform: scale(0.5) rotate(-21deg) translate(-20%, -86%);
    transform: scale(0.5) rotate(-21deg) translate(-20%, -86%);
    z-index: 91;
}

#scene2 #balloons .set2.togo.s10 {
    left: 0%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(11deg) translate(5%, -80%);
    -moz-transform: scale(0.5) rotate(11deg) translate(5%, -80%);
    transform: scale(0.5) rotate(11deg) translate(5%, -80%);
    z-index: 90;
}

#scene2 #balloons .set2.togo.s11 {
    left: 0%;
    bottom: 0%;
    -webkit-transform: scale(0.5) rotate(26deg) translate(-5%, -90%);
    -moz-transform: scale(0.5) rotate(26deg) translate(-5%, -90%);
    transform: scale(0.5) rotate(26deg) translate(-5%, -90%);
    z-index: 89;
}

#scene2 #balloons .set2.togo.s12 {
    left: 0%;
    bottom: 20%;
    -webkit-transform: scale(0.5) rotate(-11deg) translate(-20%, -110%);
    -moz-transform: scale(0.5) rotate(-11deg) translate(-20%, -110%);
    transform: scale(0.5) rotate(-11deg) translate(-20%, -110%);
    z-index: 89;
}

#scene2 #balloons .set2.togo.s13 {
    left: 2%;
    bottom: -20%;
    -webkit-transform: scale(0.5) rotate(-6deg) translate(-30%, -110%);
    -moz-transform: scale(0.5) rotate(-6deg) translate(-30%, -110%);
    transform: scale(0.5) rotate(-6deg) translate(-30%, -110%);
    z-index: 87;
}

#scene2 #balloons .set2.togo.s14 {
    left: -1%;
    bottom: -20%;
    -webkit-transform: scale(0.5) rotate(7deg) translate(25%, -110%);
    -moz-transform: scale(0.5) rotate(7deg) translate(25%, -110%);
    transform: scale(0.5) rotate(7deg) translate(25%, -110%);
    z-index: 86;
}

#scene2 #balloons .set2.togo.s15 {
    left: -3%;
    bottom: -28%;
    -webkit-transform: scale(0.5) rotate(26deg) translate(-5%, -116%);
    -moz-transform: scale(0.5) rotate(26deg) translate(-5%, -116%);
    transform: scale(0.5) rotate(26deg) translate(-5%, -116%);
    z-index: 85;
}

#scene2 #balloons .set2.togo.s16 {
    left: 0%;
    bottom: -30%;
    -webkit-transform: scale(0.5) rotate(31deg) translate(-5%, -110%);
    -moz-transform: scale(0.5) rotate(31deg) translate(-5%, -110%);
    transform: scale(0.5) rotate(31deg) translate(-5%, -110%);
    z-index: 85;
}

#scene2 #balloons .set2.togo.s17 {
    left: -3%;
    bottom: -30%;
    -webkit-transform: scale(0.5) rotate(46deg) translate(-5%, -120%);
    -moz-transform: scale(0.5) rotate(46deg) translate(-5%, -120%);
    transform: scale(0.5) rotate(46deg) translate(-5%, -120%);
    z-index: 83;
}


/*場景3 中壯年期 直接從scene2轉場*/

@-webkit-keyframes movie {
   from { background-position: -100% 0; }
    to { background-position: 0 0; }
}


#scene2 #city{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-image: url(img/scene3_clouds.png);
    background-size: contain;
    background-position: left bottom;
    background-repeat: repeat-x;
    z-index: 0;
}


#scene2 #luggages{
    position: fixed;
    bottom: 4%;
    left: 3%;
    width: 80%;
    display: inline-flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 7;
    flex-direction: row;
}

#scene2 #luggages div {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: 14%;
    height: auto;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 99;
    cursor: pointer;
}

#scene2 #luggages div{
    
}

#scene2 #luggages div.work{
    background-image: url(img/scene3_sc7.png);
    order:0;
}

#scene2 #luggages div.finance{
    background-image: url(img/scene3_sc4.png);
    order:0;
}

#scene2 #luggages div.filialpiety{
    background-image: url(img/scene3_sc1.png);
    order:0;
}
#scene2 #luggages div.marriage{
    background-image: url(img/scene3_sc3.png);
    order:0;
}

#scene2 #luggages div.spouse{
    background-image: url(img/scene3_sc6.png);
    order:0;
}
#scene2 #luggages div.parenting{
    background-image: url(img/scene3_sc2.png);
    order:0;
}

#scene2 #luggages div.selfidentity{
    background-image: url(img/scene3_sc5.png);
    order:0;
}

/*場景3 行李點選後*/

#scene2 #luggages .gg{
    top: -2.8rem;
}

#scene2 #luggages .gg0{
    order:7 !important;
    z-index: 7;
}
#scene2 #luggages .gg1{
    order:6 !important;
    z-index: 6;
}
#scene2 #luggages .gg2{
    order:5 !important;
    z-index: 5;
}
#scene2 #luggages .gg3{
    order:4 !important;
    z-index: 4;
}
#scene2 #luggages .gg4{
    order:3 !important;
    z-index: 3;
}
#scene2 #luggages .gg5{
    order:2 !important;
    z-index: 2;
}
#scene2 #luggages .gg6{
    order:1 !important;
    z-index: 1;
}

#scene2 #luggages .gg::after{
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 2.5%;
    z-index: -1;
    top: 45%;
    left: 84%;
    background-color: #3c3c3c;
    background-image: -webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: -moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: -ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: -o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.7);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.7);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#scene2 #luggages .gg0:after{
    display: none;
}

#scene2 #luggages .overlap::after{
    display: block;
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-filter: drop-shadow(0px 0px 20px yellow);
    filter: drop-shadow(0px 0px 20px yellow);
    -webkit-animation-name: reminder;
    -moz-animation-name: reminder;
    -ms-animation-name: reminder;
    -o-animation-name: reminder;
    animation-name: reminder;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    cursor: pointer;
}

#scene2 #luggages div.work.overlap::after{
    background-image: url(img/scene3_sc7.png);
}

#scene2 #luggages div.finance.overlap::after{
    background-image: url(img/scene3_sc4.png);
}

#scene2 #luggages div.filialpiety.overlap::after{
    background-image: url(img/scene3_sc1.png);
}
#scene2 #luggages div.marriage.overlap::after{
    background-image: url(img/scene3_sc3.png);
}
#scene2 #luggages div.spouse.overlap::after{
    background-image: url(img/scene3_sc6.png);
}
#scene2 #luggages div.parenting.overlap::after{
    background-image: url(img/scene3_sc2.png);
}

#scene2 #luggages div.selfidentity.overlap::after{
    background-image: url(img/scene3_sc5.png);
}

#scene2 #luggages div div{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    -webkit-box-pack: center!important;
    -webkit-justify-content: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
    flex-basis: 100%;
    padding: 50% 0 50% 0;
}

#scene2 #luggages div div span {
    display: block;
    width: 100%;
    letter-spacing: 1px;
    text-align: center;
}

#scene2 #luggages.cn div div span:nth-child(1){
    height: 10%;
    order: 1;
    font-size: 80%;
    font-weight: bolder;
    color: #333;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

#scene2 #luggages.cn div div span:nth-child(2){
    height: 10%;
    order: 2;
    font-size: 55%;
    font-weight: bold;
    letter-spacing: 0;
    color: #2e3192;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

#scene2 #luggages.en div div span:nth-child(2){
    height: 10%;
    order: 1;
    font-size: 80%;
    font-weight: bolder;
    color: #333;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
    letter-spacing: -2px;
}


#scene2 #luggages.en div div span:nth-child(1){
    height: 10%;
    order: 2;
    font-size: 55%;
    font-weight: bold;
    color: #2e3192;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}


/*場景4 老年期*/




#scene4 .characters{
    z-index: 3;
}

#scene4 .characters .male,
#scene4 .characters .female {
    position: absolute;
    left: 0;
    width: 520px;
    height: 643px;
}

#scene4 .aside{
    z-index: 5;
}

#scene4 #park{
    position: fixed;
    width: 100%;
    height: 60%;
    left: 0;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    background-image: url(img/scene4_trees.png);
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    z-index: 3;
}

#scene4.blur #park, #scene4.blur .characters{
    -webkit-filter:blur(2px);
    filter:blur(2px);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#scene4 #assists{
    position: fixed;
    z-index: 4;
    right: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 100%;
    padding-left: 20%;
    padding-bottom: 5%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
}

#scene4.blur #assists{
    -webkit-filter:blur(2px);
    filter:blur(2px);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#scene4 #assists #glass{
    position: relative;
    display: inline-flex;
    width: 12.473%;
    height: 7.9%;
}

#scene4 #assists #hearingaid{
    position: relative;
    display: inline-flex;
    width: 10.75%;
    height: 20.41%;
}

#scene4 #assists #wheelchair{
    position: relative;
    display: inline-flex;
    width: 18.88%;
    height: 28.47%;
}

#scene4 #assists div img{
    width: 100%;
    height: 100%;
}

#scene4 #assists div img.bottom{
    position:absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
}


#scene4 #assists div .bottom.overlap{
    -webkit-filter: drop-shadow(0px 0px 20px yellow);
    filter: drop-shadow(0px 0px 20px yellow);
    -webkit-animation-name: reminder;
    -moz-animation-name: reminder;
    -ms-animation-name: reminder;
    -o-animation-name: reminder;
    animation-name: reminder;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    cursor: pointer;
}


#scene4 #assists .notselect{
    -webkit-filter: drop-shadow(12px 12px 12px yellow);
    filter: drop-shadow(12px 12px 12px yellow);
    -webkit-animation-name: reminder;
    -moz-animation-name: reminder;
    -ms-animation-name: reminder;
    -o-animation-name: reminder;
    animation-name: reminder;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

/*場景5 老年期-告別式*/

#scene5 .characters{
    z-index: 3;
}

#scene5 .characters .male,
#scene5 .characters .female {
    position: absolute;
    left: -200px;
    width: 520px;
    height: 643px;
}

#scene5 .characters.leave .male img,
#scene5 .characters.leave .female img{
    moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}


#scene5 .characters #flower{
    position: absolute;
    bottom: 24%;
    left: 5%;
    z-index: 0;
    width: 217px;
    height: 165px;
    background-image: url(img/scene6_flower.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#scene5 #funeral{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/scene5_view.png);
    background-size: 100%;
    background-position: bottom left;
    background-repeat: no-repeat;

}

#scene5 #funeral #flower{
    position: absolute;
    left: 25%;
    bottom: 5%;
    z-index: 99;
    width: 217px;
    height: 165px;
    background-image: url(img/scene6_flower.png);
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-animation: fadeIn 3s ease-in-out;
    -moz-animation: fadeIn 3s ease-in-out;
    -ms-animation: fadeIn 3s ease-in-out;
    -o-animation: fadeIn 3s ease-in-out;
    animation: fadeIn 3s ease-in-out;
}


#scene5 #funeralpeople{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

#scene5 #funeralpeople img{
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
}

#scene5 #funeralpeople img.top{
    z-index: 4;
    animation-name: eyeblink;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}


/*場景6 老年期-回家路上*/

/*字數太多調整*/

#scene6 .ttl .holder.cn div:nth-child(1) {
    order: 1;
    font-size: 95%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
    height: 50%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: none;
    animation: none;
}

#scene6 .ttl .holder.cn div:nth-child(1).typetwo {
    -webkit-animation: typetwo 2s steps(60, end);
    animation: typetwo 2s steps(60, end);
}

#scene6 .ttl .holder.cn div:nth-child(2) {
    order: 2;
    font-size: 70%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}


#scene6 .ttl .holder.en div:nth-child(2) {
    order: 1;
    font-size: 95%;
    font-weight: bolder;
    color: #333;
    letter-spacing: -1px;
    height: 50%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: none;
    animation: none;
}

#scene6 .ttl .holder.en div:nth-child(2).typetwo {
    -webkit-animation: typetwo 2s steps(60, end);
    animation: typetwo 2s steps(60, end);
}


#scene6 .ttl .holder.en div:nth-child(1) {
    order: 2;
    font-size: 70%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}


#scene6 #park2{
    position: fixed;
    width: 100%;
    height: 80%;
    left: 0;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    background-image: url(img/scene6_view.png);
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    z-index: 3;
}


#scene6 .characters{
    z-index: 3;
}


#scene6 .characters .male,
#scene6 .characters .female {
    position: absolute;
    left: -200px;
    width: 520px;
    height: 643px;
}

#scene6 #thinking{
    display: block;
    position: absolute;
    left: 30%;
    bottom: 30%;
    z-index: 5;
    width: 45%;
    height: 45%;
    background-image: url(img/scene6_cloud.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#scene6 #thinking img{
    position:absolute;
    top: 22%;
    left: 11%;
    width: 50%;
    height: auto;
}
#scene6 #thinking img.top{
    z-index: 4;
    -webkit-animation-name: eyeblink;
    -moz-animation-name: eyeblink;
    -ms-animation-name: eyeblink;
    -o-animation-name: eyeblink;
    animation-name: eyeblink;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;    
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -ms-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

/*場景7 問卷*/

#scene7 .ttl .holder {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 58.875rem;
    height: 7.875rem;
    max-width: 52%;
    max-height: 100%;
    background-image: url(img/title.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 23px;
    padding-top: 1.25%;
    padding-bottom: 1%;
}


/*字數太多調整*/

#scene7 .ttl .holder.cn div:nth-child(1) {
    order: 1;
    font-size: 95%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
    height: 50%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: none;
    animation: none;
}

#scene7 .ttl .holder.cn div:nth-child(1).typetwo {
    -webkit-animation: typetwo 2s steps(60, end);
    animation: typetwo 2s steps(60, end);
}

#scene7 .ttl .holder.cn div:nth-child(2) {
    order: 2;
    font-size: 70%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}


#scene7 .ttl .holder.en div:nth-child(2) {
    order: 1;
    font-size: 95%;
    font-weight: bolder;
    color: #333;
    letter-spacing: -1px;
    height: 50%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: none;
    animation: none;
}

#scene7 .ttl .holder.en div:nth-child(2).typetwo {
    -webkit-animation: typetwo 2s steps(60, end);
    animation: typetwo 2s steps(60, end);
}


#scene7 .ttl .holder.en div:nth-child(1) {
    order: 2;
    font-size: 70%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}


#scene7 .characters{
    position: fixed;
    z-index: 0;
    width: 49% !important;
    height: 47% !important;
    bottom: -2% !important;
}

#scene7 .characters .male,
#scene7 .characters .female {
    position: absolute;
    width: 100%;
    height: 100%;
}

#scene7 .characters .male img, #scene7 .characters .female img{
    position:absolute;
    top: 0;
    left: 0;
    width: 100% !important;
}

#scene7 .characters .male img.top,
#scene7 .characters .female img.top{
    z-index: 4;
    animation-name: eyeblink;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
}

#scene7 .bubblebk{
    display: block;
    position: fixed;
    left: 20%;
    top: 15%;
    z-index: 1;
    width: 68rem;
    height: 48rem;
    background-image: url(img/scene7_cloud.png);
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: .9;
    filter: opacity(90);
}

#scene7 #qbubble{
    position: relative;
    align-items: center;
    margin-top: 2rem;
    z-index: 3;
}

#scene7 #qbubble div{
    position: relative;
    width: 100%;
}


#scene7 #qbubble .progress{
    width: 60%;
    height: 4px;
    margin-left:15%;
}

.progress-bar {
    color: #fff;
    background-color: #0275d8;
}


#scene7 #qbubble .example-twitter {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: absolute;
    top: 2rem;
    left: 108%;
    width: 23rem;
    padding: .5rem;
    padding-left: 1rem;
    color: #333;
    background: #fff;
    -moz-border-radius: 10px;
    border-top: 1px dotted #f0486e;
}

#scene7 #qbubble #quesiton7 .example-twitter {
    top: -8rem;
}

#scene7 #qbubble .example-twitter p{
    display: block;
    flex-wrap: wrap;
    flex-direction: column;
    flex-basis: 100%;
}

#scene7 #qbubble .example-twitter.cn p:nth-child(1){
    order: 1;
    font-size: 60%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

#scene7 #qbubble .example-twitter.cn p:nth-child(2){
    order: 2;
    font-size: 45%;
    font-weight: bolder;
    color: #fdb4bb;
    letter-spacing: 0;
    margin-bottom: 0;
}

#scene7 #qbubble .example-twitter.en p:nth-child(1){
    order: 2;
    font-size: 45%;
    font-weight: bolder;
    color: #fdb4bb;
    letter-spacing: 0;
    margin-bottom: 0;
}

#scene7 #qbubble .example-twitter.en p:nth-child(2){
    order: 1;
    font-size: 60%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
    margin-bottom: 1rem;
}


#scene7 #qbubble .example-twitter p>span{
    display: flex;
    flex-basis: 100%;
}

#scene7 #qbubble #quesiton7 .example-twitter .example{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 90%;
    height: 41rem;
    bottom: 0;
    order: 3;
}

#scene7 #qbubble #quesiton7 .example-twitter .example div:nth-child(1){
    display: flex;
    flex-basis: 50%;
    background-image: url(img/ngtube.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

#scene7 #qbubble #quesiton7 .example-twitter .example div:nth-child(2){
    display: flex;
    flex-basis: 50%;
    background-image: url(img/infusion.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

#scene7 #qbubble .col-6.cn{
    padding: 8rem 0rem 0rem 4rem;
    min-height: 48rem;
    background-image: url(img/scene7_cloud.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

#scene7 #qbubble .col-6.en{
    padding: 8rem 0rem 0rem 4rem;
    min-width: 65rem;
    min-height: 54rem;
    background-image: url(img/scene7_cloud.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

#scene7 #qbubble .btn-info, #scene7 #qbubble .btn-danger{
    font-family: inherit !important;
    float: right;
    margin-top: 1rem;
    margin-right: 8rem;
    padding: 1rem 4rem !important;
    font-size: 75%;
    font-weight: bold;
    color: #fff !important;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
    background-color: #3c3c3c;
    background-image: -webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: -moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: -ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: -o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    background-image: linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.7);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.7);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

#scene7 #qbubble .btn-info.en, #scene7 #qbubble .btn-danger.en{
    font-size: 75%;
}


#scene7 #qbubble .topholder{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: 2rem;
}

#scene7 #qbubble .bottomholder{
    display: flex;
}

#scene7 #qbubble .topholder .sn{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-basis: 15%;
}

#scene7 #qbubble .topholder .sn span{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    color: #fff;
    font-size: 100%;
    text-align: center;
    padding-right: 1.6rem;
    padding-top: 1.25rem;
}

#scene7 #qbubble .topholder .question{
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: 80%;
    padding: 1rem 0;
 }

#scene7 #qbubble .topholder .question div {
    display: flex;
    align-items: center;
    flex-basis: 100%;
    text-align: left;
    letter-spacing: 0;
}

#scene7 #qbubble .topholder .question.cn div:nth-child(1) span,
#scene7 #qbubble .topholder .question.en div:nth-child(2) span{
    border-bottom: 1px dotted #f0486e;
    margin-left: .5rem;
}

#scene7 #qbubble .topholder .question.cn div:nth-child(2) span,
#scene7 #qbubble .topholder .question.en div:nth-child(1) span{
    margin-left: .5rem;
}

#scene7 #qbubble .topholder .question.cn div:nth-child(1){
    order: 1;
    font-size: 100%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
}

#scene7 #qbubble .topholder .question.cn div:nth-child(2){
    order: 2;
    font-size: 60%;
    font-weight: bold;
    letter-spacing: 0;
}


#scene7 #qbubble .topholder .question.en div:nth-child(2) {
    order: 1;
    font-size: 75%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
}

#scene7 #qbubble .topholder .question.en div:nth-child(1){
    order: 2;
    font-size: 60%;
    font-weight: bold;
    letter-spacing: 0;
}


#scene7 #qbubble #quesiton1 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton1 .topholder .question.en div:nth-child(1){
    color: #e14a60;
}

#scene7 #qbubble #quesiton2 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton2 .topholder .question.en div:nth-child(1){
    color: #1f92c6;
}

#scene7 #qbubble #quesiton3 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton3 .topholder .question.en div:nth-child(1){
    color: #f3ab3d;
}

#scene7 #qbubble #quesiton4 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton4 .topholder .question.en div:nth-child(1){
    color: #37a29b;
}

#scene7 #qbubble #quesiton5 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton5 .topholder .question.en div:nth-child(1){
    color: #914592;
}

#scene7 #qbubble #quesiton6 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton6 .topholder .question.en div:nth-child(1){
    color: #c73078;
}

#scene7 #qbubble #quesiton7 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton7 .topholder .question.en div:nth-child(1){
    color: #ed8a43;
}

#scene7 #qbubble #quesiton8 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton8 .topholder .question.en div:nth-child(1){
    color: #a2c842;
}

#scene7 #qbubble #quesiton9 .topholder .question.cn div:nth-child(2),
#scene7 #qbubble #quesiton9 .topholder .question.en div:nth-child(1){
    color: #1a74ac;
}


#scene7 #qbubble .bottomholder .answer{
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}

#scene7 #qbubble .bottomholder.cn .answer .item{
    display: flex;
    flex-basis: 46%;
    flex-wrap: wrap;
    flex-direction: column;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 6rem;
    padding-top: .75rem;
    padding-bottom: 1%;
    margin-bottom: 2rem;
    white-space: nowrap;
    margin-left: .5rem;
}

#scene7 #qbubble .bottomholder.en .answer .item{
    display: flex;
    flex-basis: 46%;
    flex-wrap: wrap;
    flex-direction: column;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 6rem;
    padding-top: 0.5rem;
    padding-bottom: 1%;
    margin-bottom: 1rem;
    white-space: nowrap;
    margin-left: .5rem;
}


#scene7 #qbubble .bottomholder.cn .answer .item div {
    display: inline-flex;
    align-items: center;
    flex-basis: 40%;
    height: 40%;
    text-align: left;
    letter-spacing: 0;
}


#scene7 #qbubble .bottomholder.en.toolong .answer .item {
    flex-basis: 80%;
    padding-left: 7rem;
}


#scene7 #qbubble #quesiton1 .bottomholder .answer .item{
    background-image: url(img/scene7_item1.png);
}

#scene7 #qbubble #quesiton2 .bottomholder .answer .item{
    background-image: url(img/scene7_item2.png);
}

#scene7 #qbubble #quesiton3 .bottomholder .answer .item{
    background-image: url(img/scene7_item3.png);
}

#scene7 #qbubble #quesiton4 .bottomholder .answer .item{
    background-image: url(img/scene7_item4.png);
}

#scene7 #qbubble #quesiton5 .bottomholder .answer .item{
    background-image: url(img/scene7_item5.png);
}

#scene7 #qbubble #quesiton6 .bottomholder .answer .item{
    background-image: url(img/scene7_item6.png);
}

#scene7 #qbubble #quesiton7 .bottomholder .answer .item{
    background-image: url(img/scene7_item7.png);
}

#scene7 #qbubble #quesiton8 .bottomholder .answer .item{
    background-image: url(img/scene7_item8.png);
}

#scene7 #qbubble #quesiton9 .bottomholder .answer .item{
    background-image: url(img/scene7_item9.png);
}

#scene7 #qbubble #quesiton1 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item1s.png);
}

#scene7 #qbubble #quesiton2 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item2s.png);
}

#scene7 #qbubble #quesiton3 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item3s.png);
}

#scene7 #qbubble #quesiton4 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item4s.png);
}

#scene7 #qbubble #quesiton5 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item5s.png);
}

#scene7 #qbubble #quesiton6 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item6s.png);
}

#scene7 #qbubble #quesiton7 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item7s.png);
}

#scene7 #qbubble #quesiton8 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item8s.png);
}

#scene7 #qbubble #quesiton9 .bottomholder .answer .item.selected{
    background-image: url(img/scene7_item9s.png);
}

#scene7 #qbubble #quesiton1 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx1.png);
}

#scene7 #qbubble #quesiton2 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx2.png);
}

#scene7 #qbubble #quesiton3 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx3.png);
}

#scene7 #qbubble #quesiton4 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx4.png);
}

#scene7 #qbubble #quesiton5 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx5.png);
}

#scene7 #qbubble #quesiton6 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx6.png);
}

#scene7 #qbubble #quesiton7 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx7.png);
}

#scene7 #qbubble #quesiton8 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx8.png);
}

#scene7 #qbubble #quesiton9 .bottomholder.en.toolong .answer .item{
    background-image: url(img/scene7_itemx9.png);
}

#scene7 #qbubble #quesiton1 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx1s.png);
}

#scene7 #qbubble #quesiton2 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx2s.png);
}

#scene7 #qbubble #quesiton3 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx3s.png);
}

#scene7 #qbubble #quesiton4 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx4s.png);
}

#scene7 #qbubble #quesiton5 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx5s.png);
}

#scene7 #qbubble #quesiton6 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx6s.png);
}

#scene7 #qbubble #quesiton7 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx7s.png);
}

#scene7 #qbubble #quesiton8 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx8s.png);
}

#scene7 #qbubble #quesiton9 .bottomholder.en.toolong .answer .item.selected{
    background-image: url(img/scene7_itemx9s.png);
}


#scene7 #qbubble .bottomholder.cn .answer .item div:nth-child(1) {
    order: 1;
    font-size: 75%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
}

#scene7 #qbubble .bottomholder.cn .answer .item div:nth-child(2){
    order: 2;
    font-size: 50%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}

#scene7 #qbubble .bottomholder.en .answer .item div:nth-child(2) {
    order: 1;
    font-size: 70%;
    font-weight: bolder;
    color: #333;
    letter-spacing: -1px;
}

#scene7 #qbubble .bottomholder.en .answer .item div:nth-child(1){
    order: 2;
    font-size: 50%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}

#scene7 #qbubble #quesiton1 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton1 .bottomholder.en .answer div:nth-child(1){
    color: #e14a60;
}

#scene7 #qbubble #quesiton2 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton2 .bottomholder.en .answer div:nth-child(1){
    color: #1f92c6;
}

#scene7 #qbubble #quesiton3 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton3 .bottomholder.en .answer div:nth-child(1){
    color: #f3ab3d;
}

#scene7 #qbubble #quesiton4 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton4 .bottomholder.en .answer div:nth-child(1){
    color: #37a29b;
}

#scene7 #qbubble #quesiton5 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton5 .bottomholder.en .answer div:nth-child(1){
    color: #914592;
}

#scene7 #qbubble #quesiton6 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton6 .bottomholder.en .answer div:nth-child(1){
    color: #c73078;
}

#scene7 #qbubble #quesiton7 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton7 .bottomholder.en .answer div:nth-child(1){
    color: #ed8a43;
}

#scene7 #qbubble #quesiton8 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton8 .bottomholder.en .answer div:nth-child(1){
    color: #a2c842;
}

#scene7 #qbubble #quesiton9 .bottomholder.cn .answer div:nth-child(2),
#scene7 #qbubble #quesiton9 .bottomholder.en .answer div:nth-child(1){
    color: #1a74ac;
}



#scene7 #qbubble .bottomholder .answer .item.selected div:nth-child(1), #scene7 #qbubble .bottomholder .answer .item.selected div:nth-child(2){
    color: #fff !important;
}




/*全部選擇題結束後，跑出最後一個雲朵上面寫「感謝您的參與 (Thanks for your participation)」，停三秒，再轉到ACP畫面*/

#scene7 #qbubble .col-6 #thanks .thankswords{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding:8rem;
}

#scene7 #qbubble .col-6 #thanks .thankswords{
    display: flex;
}

#scene7 #qbubble .col-6 #thanks .thankswords.cn div:nth-child(1){
    order: 1;
    font-size: 150%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
}

#scene7 #qbubble .col-6 #thanks .thankswords.cn div:nth-child(2){
    order: 2;
    font-size: 120%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}


#scene7 #qbubble .col-6 #thanks .thankswords.en div:nth-child(1) {
    order: 2;
    font-size: 100%;
    font-weight: bold;
    color: #fdb4bb;
    letter-spacing: 0;
}

#scene7 #qbubble .col-6 #thanks .thankswords.en div:nth-child(2){
    order: 1;
    font-size: 135%;
    font-weight: bolder;
    color: #333;
    letter-spacing: 0;
}



/*場景8 輸出結果與列印*/

#scene8 .cn{
    font-family: "Noto Sans CJK TC" !important;
}

#scene8 .en{
    font-family: Verdana !important;
}

#scene8 .arrow.cn {
    background-image: url(img/arrow_cn3.png);
}

#scene8 .arrow.en {
    background-image: url(img/arrow_en3.png);
}

#scene8 .page {
    display: block;
    position: relative;
    width: 210mm;
    min-height: 297mm;
    max-height: 100%;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background: url('img/ACP-A4.png');
    background-size: 100%;
    background-repeat: no-repeat;
    font-size: 13px;
    letter-spacing: 0;
}

#scene8 .page #output1{
    position: absolute;
    left: 149px;
    top: 85px;
    display: block;
    width: 207px;
    height: 209px;
}

#scene8 .page #output2{
    position: absolute;
    right: 100px;
    top: 135px;
    display: block;
    width: 209px;
    height: 153px;
}

#scene8 .page #output3{
    position: absolute;
    left: 48px;
    top: 424px;
    display: block;
    width: 200px;
    height: 182px;
}

#scene8 .page #output4{
    position: absolute;
    right: 31px;
    top: 487px;
    display: block;
    width: 188px;
    height: 117px;
}

#scene8 .page.cn .ques div:nth-child(1){
    display: block;
    font-weight: bold;
    font-size: 1.19em;
    margin-bottom: .5rem;
    text-align: justify;
}

#scene8 .page.en .ques div:nth-child(2){
    display: block;
    font-weight: bold;
    font-size: 1em;
    margin-bottom: .25rem;
    line-height: 1;
}


#scene8 .page.cn .ques div:nth-child(2), 
#scene8 .page.en .ques div:nth-child(1){
    display: none;
}

#scene8 .page.cn .ans1 div:nth-child(1), 
#scene8 .page.cn .ans2 div:nth-child(1), 
#scene8 .page.cn .ans3 div:nth-child(1){
    display: block;
    font-size: 1em;
    margin-bottom: .25rem;

}
, 
#scene8 .page.en .ans1 div:nth-child(2), 
#scene8 .page.en .ans2 div:nth-child(2), 
#scene8 .page.en .ans3 div:nth-child(2){
    display: block;
    font-size: .5em;
    margin-bottom: .05rem;
    line-height: 1;
}

#scene8 .page.cn .ans1 div:nth-child(2),
#scene8 .page.cn .ans2 div:nth-child(2), 
#scene8 .page.cn .ans3 div:nth-child(2), 
#scene8 .page.en .ans1 div:nth-child(1), 
#scene8 .page.en .ans2 div:nth-child(1), 
#scene8 .page.en .ans3 div:nth-child(1){
    display: none;
}

 
@page {
    size: A4;
    margin: 0;
}

@media print {

    @font-face {
      font-family: Noto Sans CJK TC !important;
      src: url(font/NotoSansCJKtc-Bold.otf);

      font-family: Verdana  !important;
      src: url(font/verdana.ttf);

    }

    html, body {
        font-family: "Noto Sans CJK TC" !important;
        width: 210mm;
        height: 297mm;   
        font-size: 14px;
        letter-spacing: 0;
    }

    .page .cn{
        font-family: "Noto Sans CJK TC" !important;
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
        background: none;
        max-height: initial;
    }

    .page .en{
        font-family: Verdana !important;
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
        background: none;
        max-height: initial;
    }



}