@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,900&display=swap&subset=chinese-traditional");

::root{
  --orange:#ef7d00;
  --green: #6f3;
  --lightblue: #0cf;
  --doc-height: 100%;
}

body,html{
    margin:0;
    padding:0;
    height:100vh;
    height:var(--doc-height);
    min-height: fill-available;
    min-height: -webkit-fill-available;
}
body{
    font-family:'Noto Sans TC', 微軟正黑體, Microsoft JhengHei, sans-serif;
    font-size:1.1rem;
    overflow:hidden;
    background-color:white;
}
.body.desktop-mode{
  min-width:768px;
  overflow-x:auto;
}
.mb-5{
  margin-bottom:2rem !important;
}
img{
  max-width:100%;
  position:relative;
}
video{
  width:100%;
  max-width: 100%;
  position: relative;
  opacity:0;
  transform: translateY(40px);
  transition: all 0.5s;
}
.scene.show video{
  opacity:1;
  transform: translateY(0);
}
video.video-sm{
  max-width:300px;
  box-shadow: 0 0 0 4px white, 2px 2px 8px 4px black;
}
video.video-md{
  max-width:500px;
  box-shadow: 0 0 0 4px white, 2px 2px 8px 4px black;
}
video.video-lg{
  max-width:800px;
  box-shadow: 0 0 0 6px white, 2px 2px 12px 6px black;
}

.caption-txt{
  color:white;
  font-size:1.2rem;
  text-shadow: 0 0 4px black;
  text-align: center;
  padding:0.5rem 0 0;
}

.loading-wrap{
  position: fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:20;
  width:100%;
  margin:auto;
  background-image:url('../images/bg/landingBg.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  visibility: visible;
  /* transition-property: opacity;
  transition-duration: 400s;
  transition-timing-function: ease; */
}

.loading-wrap .wrap{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  margin:auto;
  text-align:center;
  width:90%;
  max-width: 400px;
}

.loading-wrap p{
  color:white;
  font-family:arial;
  font-size:3rem;
  font-weight:bold;
  line-height: 1;
}

.loading-wrap .processbar-wrap{
  background-color:white;
  width:100%;
  height:16px;
  position: relative;
  margin-bottom:1rem;
  overflow:hidden;
}

#processbar{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  width:0;
  background-color: #efa22e;
}
.loading-wrap .wrap .txt{
  color:white;
  
}

.loading-wrap.hidden{
  display:none;
  opacity:0;
  visibility: hidden;
  z-index:0;
}

.main-wrapper{
  height:var(--doc-height);;
  position: relative;
  z-index:2;
  opacity:0;
}


.main-stage{
  height:var(--doc-height);;
  width:100%;
  overflow-x:hidden;
  overflow-y:scroll;
}

.scrollContent{
  width:100%;
  height:auto;
  position: relative;
}

.art-img{
  max-height:100px;
  box-shadow: 0 0 0 4px white, 0 0 12px 4px black;
  scale: 1.2;
}
.art-img.img-A{right:30px;}
.art-img.img-B{left:30px;}

.art-txt{
  text-align: justify;
  text-align-last: center;
  color:white;
  text-shadow:1px 1px 5px black;
}

.stage{
    position: relative;
    min-height:var(--doc-height);
    scroll-snap-type: y proximity;
    -webkit-overflow-scrolling: auto; 
}

.scene{
    position: relative;
    display:none;
    width:100%;
    min-height:var(--doc-height);
    top:0;
    left:0;
    right:0;
    scroll-snap-align: start;
    -webkit-overflow-scrolling: auto;
    opacity:0;
    z-index:0;
    transition: opacity 0.5s ease-in-out;
    background-color:black;
}
.scene::after{
  content:'';
  background-image:url('/images/orangenews-icon-w.png');
  background-size:auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  width:40px;
  height:40px;
  display: block;
  position:absolute;
  top:10px;
  right:10px;
  z-index:10;
  opacity:0;
}

.scene.active{
  display:block;
  visibility: visible;
  opacity:1;
  z-index:3;
}
.scene.active::after{
  opacity:1;
  transition-delay: .5s;
}

.scene .art-txt,
.scene .scene-title,
.scene .caption-txt,
.scene .art-img{
  opacity:0;
  position: relative;
  top:20px;
  transition: all 0.5s ease-in-out;
}

.scene-bg{
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:0;
  transition: opacity 0.25s ease-in-out;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  opacity:0;
}

.scene.active .scene-bg{
  opacity:1;
}
.scene-landing.view{
  display:block !important;
  opacity:1 !important;
  visibility: visible !important;
  transition:all 0s !important;
}
.scene-landing.view .scene-bg{
  opacity:1 !important;
}

.scene-landing img{
  opacity:0;
  transform: translateY(50px);
  transition: all 1s; 
}

.scene-landing.view img{
  opacity:1;
  transform: translateY(0);
}

.scene-landing.view .img-A{
  transition-delay: .5s;
}

.scene-landing.view .img-B{
  transition-delay: 1s;
}

.scene-landing .info-box{
  opacity: 0;
  scale: .6;
}
.scene-landing.show .info-box{
  opacity:1;
  scale:1;
}

.scene.show .art-txt,
.scene.show .scene-title,
.scene.show .caption-txt,
.scene.show .art-img{
  opacity: 1;
  top:0;
  left:0;
  right:0;
}
.scene.show .scene-title{transition-delay: .25s;}
.scene.show .art-A{transition-delay: .5s;}
.scene.show .art-B{transition-delay: .75s;}
.scene.show .art-C{transition-delay: 1s;}
.scene.show .art-D{transition-delay: 1.25s;}
.scene.show .art-E{transition-delay: 1.5s;}

.scene.scene-02.show video,
.scene.scene-07.show video,
.scene.scene-16.show video,
.scene.scene-19.show video,
.scene.scene-21.show video{transition-delay: .25s;}
.scene.scene-02.show .caption-txt,
.scene.scene-07.show .caption-txt,
.scene.scene-16.show .caption-txt,
.scene.scene-19.show .caption-txt,
.scene.scene-21.show .caption-txt{transition-delay: .5s;}
.scene.scene-03.show video{transition-delay: 1.25s;}
.scene.scene-03.show .caption-txt{transition-delay: 1.5s;}
.scene.scene-04.show .img-A,
.scene.scene-05.show .img-A,
.scene.scene-12.show .img-A,
.scene.scene-13.show .img-A{transition-delay: 1.25s;}
.scene.scene-04.show .img-B,
.scene.scene-05.show .img-B,
.scene.scene-12.show .img-B,
.scene.scene-13.show .img-B{transition-delay: 1.5s;}
.scene.scene-08.show .img-A,
.scene.scene-20.show .img-A{transition-delay: 1s;}
.scene.scene-08.show .img-B,
.scene.scene-20.show .img-B{transition-delay: 1.25s;}
.scene.scene-11.show .img-A{transition-delay: .75s;}
.scene.scene-11.show .img-B{transition-delay: 1s;}

.scene.scene-17.show .img-table-wrap{
  scale:1;
  opacity:1;
  transition-delay: 1.25s;
}
.scene.scene-17.show .img-table-wrap .art-img{
  transition-delay: 1.5s;
}

.scene-10 .art-txt{
  text-align:left;
}
.scene-end .orangenews-logo,
.scene-end .copyright{
  opacity:0;
  transition:all 0.25s;
}
.scene-end.active .orangenews-logo,
.scene-end.active .copyright{
  opacity:1;
}
.scene-end.active .orangenews-logo{
  transition-delay: .5s;
}
.scene-end.active .copyright{
  transition-delay: .75s;
}

.scene-title{
  font-size:1.7rem;
  line-height:1.2;
  padding-top:1.2rem;
  margin-bottom:1.5rem;
  font-weight:bold;
  color:white;
  text-shadow:1px 1px 5px black;
  text-align:center;
}
.scene-09 .scene-title,
.scene-10 .scene-title{
  text-align:left;
}
.scene-10 .scene-title{
  
}
.scene-14 .scene-title{
  padding:0;
  margin-top:-140px;
}


.img-table-wrap{
  display:inline-block;
  padding: 1rem;
  background-color: rgb(255 255 255 / 10%);
  backdrop-filter: blur(6px);
  border-radius: 1rem;
  max-width:800px;
  margin:auto;
  opacity: 0;
  scale: .6;
}

.img-table{

}

.copyright{
  color:#555;
  font-size:0.9rem;
}

/* Scene background image start */
/* .scene-landing{
  background-image:url('../images/bg/landingBg.jpg');
}
.scene-01{
  background-image:url('../images/bg/sceneBg01.jpg');
}
.scene-02{
  background-image:url('../images/bg/sceneBg02.jpg');
}
.scene-03{
  background-image:url('../images/bg/sceneBg03.jpg');
}
.scene-04{
  background-image:url('../images/bg/sceneBg04.jpg');
}
.scene-05{
  background-image:url('../images/bg/sceneBg05.jpg');
}
.scene-06{
  background-image:url('../images/bg/sceneBg06.jpg');
}
.scene-07{
  background-image:url('../images/bg/sceneBg07.jpg');
  background-position: center top;
}
.scene-08{
  background-image:url('../images/bg/sceneBg08.jpg');
}
.scene-09{
  background-image:url('../images/bg/sceneBg09.jpg');
}
.scene-10{
  background-image:url('../images/bg/sceneBg10.jpg');
}
.scene-11{
  background-image:url('../images/bg/sceneBg11.jpg');
}
.scene-12{
  background-image:url('../images/bg/sceneBg12.jpg');
}
.scene-13{
  background-image:url('../images/bg/sceneBg13.jpg');
}
.scene-14{
  background-image:url('../images/bg/sceneBg14.jpg');
  background-position: center top;
}
.scene-15{
  background-image:url('../images/bg/sceneBg15.jpg');
}
.scene-16{
  background-image:url('../images/bg/sceneBg16.jpg');
}
.scene-17{
  background-image:url('../images/bg/sceneBg17.jpg');
}
.scene-18{
  background-image:url('../images/bg/sceneBg18.jpg');
}
.body.mobile-mode .scene-18{
  background-image:url('../images/bg/sceneBg18-m.jpg');
}
.scene-19{
  background-image:url('../images/bg/sceneBg19.jpg');
}
.scene-20{
  background-image:url('../images/bg/sceneBg20.jpg');
}
.scene-21{
  background-image:url('../images/bg/sceneBg21.jpg');
} */
.scene-07,
.scene-14{
  background-position: center top;
}
.scene-15{
  background-position: right center;
}
/* .scene-18{
  background-position: right top;
} */
.scene-end{
  background-color:white;
}
/* Scene background image end */


.info-box{
  padding:1rem;
  border-radius:1rem;
}

.info-box .art-txt{
  text-align:left;
  text-align-last: left;
}

.scene-landing .info-box{
  background-color:rgb(56 121 171 / 40%);
}

.layer-bg{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:0;
}
.scene-01 .layer-bg{
  background-color:rgb(70 17 3 / 40%);
}
.scene-03 .layer-bg{
  background-color:rgb(70 17 3 / 40%);
}
.scene-04 .layer-bg{
  background: -moz-linear-gradient(top,  rgba(36,1,3,0.8) 0%, rgba(169,3,41,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(36,1,3,0.8) 0%,rgba(169,3,41,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(36,1,3,0.8) 0%,rgba(134, 103, 110, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc3d0003', endColorstr='#00a90329',GradientType=0 ); /* IE6-9 */
}
.scene-05 .layer-bg{
  background-color:rgb(56 121 171 / 40%);
}
.scene-06 .layer-bg{
  background: -moz-linear-gradient(top, rgba(34,115,137,0) 20%, rgba(34,115,137,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(34,115,137,0) 20%,rgba(34,115,137,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(34,115,137,0) 20%,rgba(34,115,137,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00227389', endColorstr='#a6227389',GradientType=0 ); /* IE6-9 */
}
.scene-07 .layer-bg{
  background-color:rgb(56 121 171 / 40%);
}
.scene-08 .layer-bg{
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(2,15,27,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(2,15,27,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(2,15,27,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6020f1b',GradientType=0 ); /* IE6-9 */
}
.scene-09 .layer-bg{
  background-color:rgb(245 220 165 / 40%);
}
.scene-09 .layer-bg-2{
  background-color:white;
  right:inherit;
  opacity:0;
  backdrop-filter: blur(15px);
  transform: translateX(-100%);
  transition:transform .5s ease-in-out;
}
.scene-09.show .layer-bg-2{
  opacity:.8;
  transform: translateX(0);
  transition-delay: .5s;
}
.scene-10 .layer-bg{
  background-color:rgb(20 14 2 / 40%);
}
.scene-11 .layer-bg{
  background: -moz-linear-gradient(top, rgba(34,115,137,0) 0%, rgba(34,115,137,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(34,115,137,0) 0%,rgba(34,115,137,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(34,115,137,0) 0%,rgba(34,115,137,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00227389', endColorstr='#a6227389',GradientType=0 ); /* IE6-9 */
}
.scene-12 .layer-bg{
  background-color:rgb(102 82 33 / 40%);
}
.scene-13 .layer-bg{
  background-color:rgb(15 38 71 / 40%);
}
.scene-14 .layer-bg{
  background: -moz-linear-gradient(top, rgba(54,40,3,0) 0%, rgba(54,40,3,0.65) 80%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(54,40,3,0) 0%,rgba(54,40,3,0.65) 80%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(54,40,3,0) 0%,rgba(54,40,3,0.65) 80%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00362803', endColorstr='#a6362803',GradientType=0 ); /* IE6-9 */
}
.scene-15 .layer-bg{
  background-color:rgb(50 17 3 / 40%);
}
.scene-16 .layer-bg{
  background-color:rgb(5 2 0 / 40%);
}
.scene-17 .layer-bg{
  background-color:rgb(24 111 150 / 40%);
}
.scene-18 .layer-bg{
  background-color:rgb(28 64 91 / 40%);
}
.scene-19 .layer-bg{
  background-color:rgb(27 0 0 / 40%);
}
.scene-20 .layer-bg{
  background-color:rgb(4 34 52 / 40%);
}
.scene-21 .layer-bg{
  background: -moz-linear-gradient(top, rgba(34,115,137,0) 0%, rgba(34,115,137,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(34,115,137,0) 0%,rgba(34,115,137,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(34,115,137,0) 0%,rgba(34,115,137,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00227389', endColorstr='#a6227389',GradientType=0 ); /* IE6-9 */
}
.scene-end .layer-bg{
  
}



.timeline-s1-list{
  opacity:0;
}
.scene-09.show .timeline-s1-list{
  opacity:1;
  transition-delay: 1s;
}
.timeline-s1-list .tl-list{
  margin:0;
  padding:0;
  list-style:none;
  position:relative;
}
.timeline-s1-list .tl-list-item{
  border-left:2px solid black;
}
.timeline-s1-list .tl-list-item:first-child{
  padding-top:1rem;
}
.timeline-s1-list .tl-list-item:last-child{
  padding-bottom:1rem;
}
.timeline-s1-list .tl-list-item > div{
  padding:10px 0 10px 14px;
}
.timeline-s1-list .tl-item-year{
  font-size:0.9rem;
}
.timeline-s1-list .tl-item-year .tli-year{
  font-size:0.9rem;
  display:flex;
  flex-direction: row;
  align-items:center;
}
.timeline-s1-list .tl-item-year .tli-year::before{
  content:'';
  background-color:white;
  border:2px solid black;
  height: 14px;
  width: 14px;
  border-radius: 100%;
  margin-left:-22px;
  margin-right:1rem;
}
.timeline-s1-list .tl-item-pin{
  height:16px;
  position: relative;
  padding:0.5rem 0;
}
.timeline-s1-list .tl-item-pin::before{
  content:'';
  background-color:#1eb2f5;
  height:10px;
  width:10px;
  border-radius: 100%;
  margin-left:-6px;
  display:block;
  transition: all 0.5s;
}
.timeline-s1-list .tl-item-pin .tli-pin{
  height:0;
  opacity:0;
  visibility: hidden;
  transform: scale(0);
  transform-origin: left;
  transition: all 0.5s;
}
.timeline-s1-list .tl-item-pin.active{
  height:auto;
}
.timeline-s1-list .tl-item-pin.active::before{
  display:none;
  opacity:0;
  visibility: hidden;
}
.timeline-s1-list .tl-item-pin.active .tli-pin{
  border-left:6px solid #1eb2f5;
  margin-left:-4px;
  color:#1eb2f5;
  font-family:Times;
  font-size:1.2rem;
  font-weight:bold;
  height:auto;
  opacity:1;
  visibility: visible;
  transform:scale(1);
}
.timeline-s1-list .tl-item-skip{
  padding:0 !important;
}
.timeline-s1-list .tl-item-skip .tli-skip{
  margin-left:-10px;
  padding:0;
}

.timeline-s1-info-list{
  position: relative;
  opacity:0;
}
.show .timeline-s1-info-list{
  opacity:1;
  transition-delay: 1s;
}
.timeline-s1-info-list .list-item{
  position: absolute;
  opacity:0;
  visibility: hidden;
  transform:translateY(50px);
  transition: all 0.5s;
}
.timeline-s1-info-list .list-item.active{
  opacity:1;
  visibility: visible;
  transform:translateY(0);
}
.timeline-s1-info-list .li-info{
  
}
.timeline-s1-info-list .li-info .li-info-title{
  font-size: 1.4rem;
  background-color: #1eb2f5;
  color: white;
  padding: 0.5rem 0.75rem;
  margin-bottom:0;
  display: inline-block;
}
.timeline-s1-info-list .li-info .li-info-txt{
  background-color:white;
  padding:0.5rem 0.75rem;
  color: #1eb2f5;
  text-align:justify;
}


.timeline-s2-list{
  position: relative;
  padding-top:3rem;
}
.ts2-dot-list{
  padding:2rem 0 0;
  position: absolute;;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
}
.scene-14.show .ts2-dot-list{
  opacity:1;
  transition-delay: .25s;
}
.ts2d-list{
  display:flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #ddd;
  background-color: rgb(255 255 255 / 10%);
  backdrop-filter: blur(4px);
  height: 26vh;
  min-height: 160px;
}
.ts2d-list:before{
  content:'';
  position: absolute;
  left:0;
  top:0;
  right:0;
  height:10px;
  margin-top:-5px;
  z-index:0;
  background-color: rgba(255,255,255,0);
  opacity: 0.1;
  background-size: 16px 16px;
  background-image:  repeating-linear-gradient(to right, #ffffff, #ffffff 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0));
}
.ts2d-list .ts2d-list-item{
  padding:0 0 1rem;
  position: relative;
  z-index:2;
  display: flex;
  align-items: center;
  flex:1;
  max-width: 200px;
  justify-content: start;
  flex-direction: column;
}
.ts2d-list .ts2d-list-item::before{
  content:'';
  background-color:rgb(255 255 255 / 40%);
  width:1px;
  height:30px;
  margin-top:-10px;
  transition: all 0.5s;
  box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
}
.ts2d-list .ts2d-list-item::after{
  content:'';
  position: absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  left:50%;
  transform: translateX(-50%);
  top:0;
  margin-top:-4px;
  background-color:white;
  box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
}
.ts2d-list .ts2d-list-item.active{
  
}
.ts2d-list .ts2d-list-item.active::before{
  background-color:#ff9800;
  height:60px;
}
.ts2d-list .ts2d-list-item.active::after{
  background-color:#ff9800;
  border: 1px solid white;
  width: 12px;
  height: 12px;
  margin-top: -6px
}
.ts2d-list .ts2d-list-item .dot-date{
  font-size:0.8rem;
  font-family:Times;
  font-weight: bold;
  word-break: keep-all;
  color:white;
  text-align:center;
  transition: all 0.5s;
  line-height:1;
  padding:0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow:1px 1px 5px black;
}
.ts2d-list .ts2d-list-item.active .dot-date{
  font-size:1.4rem;
  color:#ff9800;
  flex-direction: column;
}
.ts2d-list .ts2d-list-item.active .dot-date span{
  display:block;
}
.ts2-info-list{
  position:relative;
}
.ts2-info-list .ts2il-item{
  text-align:center;
  position:absolute;
  left:0;
  top:0;
  right:0;
  opacity:0;
  visibility: hidden;
  transform: translateY(0);
  transition: all 0.5s;
  text-shadow:1px 1px 5px black;
}
.ts2-info-list .ts2il-item.active{
  opacity:1;
  visibility: visible;
  transform: translateY(-40px);
}
.ts2-info-list .ts2il-item .item-title{
  font-size:1.4rem;
  color:white;
  margin-bottom:1rem;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
}
.ts2-info-list .ts2il-item .item-title::before,
.ts2-info-list .ts2il-item .item-title::after{
  content:'';
  height:1px;
  flex:1;
  background-color:white;
}
.ts2-info-list .ts2il-item .item-title span{
  border:1px solid white;
  padding:0.25rem 0.75rem;
}
.ts2-info-list .ts2il-item .item-txt{
  color:#ff9800;
  font-size:1.5rem;
  line-height:1.3;
}
.ts2-info-list .ts2il-item .item-label{
  color:white;
  font-size:1.2rem;
}
.ts2-info-list .ts2il-item .item-label span{
  

}






.slide-list{

}
.slide-list .sl-list{
  list-style:none;
  margin:0;
  padding:0;
  opacity:0;
}
.scene-10.show .slide-list .sl-list{
  opacity:1;
  transition-delay: .75s;
}
.slide-list .sl-list .sl-list-item{
  padding:0.5rem 0;
}
.slide-list .sl-list .sl-list-item.active{

}
.slide-list .sl-list .sl-list-item .it-title{
  font-family:impact;
  font-size:5rem;
  color:white;
  font-style:italic;
  line-height: 1;
  transition: text 0.5s;
  text-align:left;
  text-align-last: left;
}
.slide-list .sl-list .sl-list-item.active .it-title{
  color:#ff9800;
}

.slide-info-list{
  position: relative;
}
.slide-info-list .list-item{
  display:none;
  opacity:0;
  visibility: hidden;
}
.slide-info-list .list-item.active{
  display:block;
  opacity:1;
  visibility: visible;
}
.slide-info-list .list-item .li-info{
  position: relative;
  opacity:0;
}
.slide-info-list .list-item.active .li-info{
  animation-name: fadeUp;
  animation-timing-function: linear;
  animation-duration: .2s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
.slide-info-list .list-item.active .li-info:nth-child(1){
  animation-delay: .15s;
}
.slide-info-list .list-item.active .li-info:nth-child(2){
  animation-delay: .3s;
}
.slide-info-list .list-item.active .li-info:nth-child(3){
  animation-delay: .45s;
}
.slide-info-list .list-item .li-info .li-info-title{
  font-size: 1.4rem;
  background-color: white;
  color: #ff9800;
  padding: 0.25rem 0.75rem;
  display: inline-block;
}
.slide-info-list .list-item .li-info .li-info-title span{
  font-family: impact;
  font-style:italic;
  font-weight:bold;
  margin:0 0.3rem;
}
.slide-info-list .list-item .li-info .li-info-txt{
  text-align-last: left;
}


.scene-talk{
  color:white;
}

.scene-mmm{
  background-color:black;
  color:white;
}

.half-row{
    position: absolute;
    left:0;
    right:0;
    display: flex;
    flex:1;
    align-items:center;
}

.half-row.rt{
    top:0;
    bottom:50%;
}

.half-row.rb{
    top:50%;
    bottom:0;
}

.article-item{
    display:inline;
    color:#555;
    font-weight:bold;
}

.article-item.art-A.active{
    color:#3883d8;
}

.article-item.art-B.active{
    color:#22d659;
}

.article-item.art-C.active{
    color:#eecb03;
}

.talk-wrap{
  display: none;
}

.talk-list{
  list-style: none;
  margin: 0;
  padding:0;
  text-align:center;
  position: relative;
  overflow:hidden;
  height:200px;
}


.talk-list::after{
  content:'';
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  top:30px;
  z-index:1;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 1%, rgba(0,0,0,1) 71%, rgba(0,0,0,1) 90%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(0,0,0,1) 71%,rgba(0,0,0,1) 90%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(0,0,0,1) 71%,rgba(0,0,0,1) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.talk-list .talk-item{
  overflow:hidden;
}

.talk-list .talk-item div{
  padding:0.5rem 0;
}

.toggleVideoSound{
  position: absolute;
  left:2rem;
  bottom:2rem;
  font-size:1rem;
  color:white;
  z-index:2;
  text-indent: -9999px;
  width:40px;
  height:40px;
  display:block;
  cursor: pointer;
  opacity: 0.6;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z'/%3E%3C/svg%3E");
  
}

.toggleVideoSound:hover,.toggleVideoSound:active{
  opacity:1;
}

.toggleVideoSound.active{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M5 17h-5v-10h5v10zm2-10v10l9 5v-20l-9 5zm17 4h-5v2h5v-2zm-1.584-6.232l-4.332 2.5 1 1.732 4.332-2.5-1-1.732zm1 12.732l-4.332-2.5-1 1.732 4.332 2.5 1-1.732z'/%3E%3C/svg%3E");
}

.btn-video-ctr{
  text-align: center;
  display:inline-block;
  margin:0 auto 3rem;
  cursor: pointer;
}
.btn-video-ctr::before{
  content:'';
  display:block;
}
.btn-video-ctr:hover{
  opacity:0.7;
}
.btn-video-ctr.btn-play::before{
  width: 0; 
  height: 0; 
  border-top: 3rem solid transparent;
  border-bottom: 3rem solid transparent; 
  border-left:4rem solid white; 
}
.btn-video-ctr.btn-stop::before{
  width:3rem;
  height:3rem;
  background-color:white;
}

.scene-article-data{

}

.charts{
  position:sticky;
  top:25px;
  z-index:5;
}

.charts .chart{
  margin-bottom:1.5rem;
}

.bar{
  
}

.bar .num{
  text-align:center;
  color:white;
  text-shadow: 0 0 2px black;
  padding:0.3rem 0;
}

.bar .column{
  width:0;
  opacity:0;
}

.region{
  opacity:0;
}

.region .column{
  position: relative;
  left:20px;
  transform: scale(1.6);
  opacity:0;
}

.region .grid{
  display:block;
  width:30px;
  height:30px;
  margin:0 0.2rem;
}

.column .tip-box{
  display:none;
  position:absolute;
  z-index:9;
  padding:0.5rem;
  color:white;
  text-shadow: 0 0 2px black;
  box-shadow:0 0 4px black;
  border:1px solid white;
}

.column{
  position: relative;
  display:inline-block;
  z-index:1;
}

.column:hover{
  z-index:3;
}

.column:hover > .tip-box{
  display:block;
}

.article-box{
  padding:0 0 3rem;
}

.article-box img{
  margin-bottom:1rem;
}

.article-box .title{
  font-size:1.6rem;
  font-weight:bold;
  color:var(--orange);
  margin-bottom:1rem;
}

.article-box .content{

}



.scene-number{
  background-color: black;
}

.number-list{
  display: flex;
  flex-direction: column;
  padding:2rem 0;
}

.number-item{
  color:white;
  position: relative;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding:1rem 0 1.5rem;
}

.number-item.active{

}

.number-item.active .info{
  opacity:1;
}

.number-item.t-green.active .num,
.number-item.t-green .info .txt b{
  color: var(--green);
}

.number-item.t-blue.active .num,
.number-item.t-blue .info .txt b{
  color: var(--blue);
}

.number-item.t-orange.active .num,
.number-item.t-orange .info .txt b{
  color: var(--orange);
}

.number-item .num{
  font-family: impact;
  font-size: 3.6rem;
}

.number-item .info{
  padding-top:1rem;
  padding-bottom:2rem;
}

.number-item .info .tit{
  font-size:1.8rem;
  font-weight:bold;
}

.number-item .info .txt{
  line-height:1.8;
}

.number-item .info .txt b{
  font-family:impact;
  display:inline;
  line-height:1;
}

.scroll-tip{
  position: absolute;
  left:50%;
  top:50%;
  transform: translateX(-50%) translateY(-50%);
  z-index:5;
  text-align:center;
  opacity:0;
}
.scene-landing.view .scroll-tip{
  opacity:1;
  transition:opacity .5s;
  transition-delay: 1.5s;
}
.scroll-tip-title{
  font-size:1.2rem;
  line-height: 1.4;
  color: #ffffff;
  text-shadow: 0 0 4px #0b509a;
  word-break: keep-all;
}
.scroll-tip .wrap{
  margin:auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color:rgb(255 255 255 / 20%);
  border-radius:16px;
  backdrop-filter: blur(4px);
  padding:1rem 2rem;
}
.scroll-tip .wrap.mb{
  box-shadow: 0 0 14px #4891c8;
}
.scroll-tip .wrap.mb .scroll-down-img{
  background-image:url('/h5/hk25th/images/mb-finger.png?v=2');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  width:150px;
  height:150px;
  display:block;
  opacity:.6;
  filter:drop-shadow(0 0 8px #4891c8);
  margin-bottom:1rem;
}
.scroll-tip .mouse-wrap{
  border:2px solid white;
  border-radius:10px;
  width:36px;
  height:60px;
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom:1rem;
}
.scroll-tip .wrap.dt .st-dt-line{
  width:2px;
  height:12px;
  background-color:white;
  margin-bottom:10px;
}
.scroll-tip .wrap.dt .arrow-down{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.scroll-tip .wrap.dt .arrow-down div{
  width:14px;
  height:8px;
  display:block;
  opacity:0;
  background-size:100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 330 330' style='enable-background:new 0 0 330 330;' xml:space='preserve'%3E%3Cpath id='XMLID_225_' style='fill:%23FFFFFF;' d='M325.6,79.4c-5.9-5.9-15.4-5.9-21.2,0L165,218.8L25.6,79.4c-5.9-5.9-15.4-5.9-21.2,0 c-5.9,5.9-5.9,15.4,0,21.2l150,150c2.8,2.8,6.6,4.4,10.6,4.4s7.8-1.6,10.6-4.4l150-150C331.5,94.7,331.5,85.3,325.6,79.4z'/%3E%3C/svg%3E");
  -webkit-animation:scrollTip 2s infinite ease-in-out;
  animation:scrollTip 2s infinite ease-in-out;
}
.scroll-tip .wrap.dt .arrow-down div:first-child{
  -webkit-animation-delay:-1s; 
  animation-delay:-1s;
}
.scroll-tip .wrap.dt .arrow-down div:nth-child(2){
  -webkit-animation-delay:-0.5s;
  animation-delay:-0.5s;
}
.scroll-tip .wrap.dt .arrow-down div:last-child{
  -webkit-animation-delay:0s;
  animation-delay:0s;
}

body.mobile-mode .scroll-tip .dt,
body.desktop-mode .scroll-tip .mb{
  display:none;
}
.scroll-tip.hide{
  opacity:0;
  visibility: hidden;
  transition:opacity .5s;
}


@keyframes scrollTip{
  0% {opacity:0}
  40% {opacity:1}
  80% {opacity:0}
  100% {opacity:0}
}

.audioControl{
    position:absolute;
    left:30px;
    bottom:30px;
    z-index: 9;
    cursor:pointer;
}

.audioControl .music{
    width:30px;
    height:30px;
}
@-webkit-keyframes rotating{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(1turn);
    }
}

@keyframes rotating{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(1turn);
    }
}

.audioControl .music.rotate{
    -webkit-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
}

.to-top{
  position: absolute;
  left:50%;
  bottom:25px;
  z-index:9;
  width:60px;
  height:40px;
  cursor:pointer;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}
/* .to-top.active{
  display:flex;
} */
.to-top .txt{
  color:white;
  font-size:.9rem;
  text-shadow:0 0 4px black;
}
.to-top .wrap{
  position: relative;
  margin:auto;
}
.to-top .chevron{
  width: 40px;
  height: 6px;
  opacity: 0;
  transform: translateY(12px);
  animation: moveTop 3s ease-out infinite;
}
.to-top .chevron:first-child {
  animation: moveTop 3s ease-out 1s infinite;
}
.to-top .chevron:nth-child(2) {
  animation: moveTop 3s ease-out 2s infinite;
}
.to-top .chevron::before,
.to-top .chevron::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background-color: white;
}
.to-top.dark .chevron::before,
.to-top.dark .chevron::after{
  background-color:#746666;
}
.to-top.dark .txt{
  color:#746666;
}
.to-top .chevron::before {
  left: 0;
  transform: skew(0deg, -30deg);
}
.to-top .chevron::after {
  right: 0;
  width: 50%;
  transform: skew(0deg, 30deg);
}
@-webkit-keyframes moveTop {
  25% {
    opacity: 1;
  }
  33% {
    transform: translateY(12px);
  }
  67% {
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes moveTop {
  25% {
    opacity: 1;
  }
  33% {
    transform: translateY(12px);
  }
  67% {
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.move-next{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:20px;
  color:white;
  font-size:1rem;
  cursor: pointer;
}


body.desktop-mode{

}
body.desktop-mode.less-ht{
  font-size:1.1rem;
}
body.desktop-mode.less-ht .mb-3{
  margin-bottom:.7rem !important;
}
body.desktop-mode.less-ht .mb-5{
  margin-bottom:2rem !important;
}
body.desktop-mode.less-ht .art-txt{
  
}
body.desktop-mode.less-ht .scene-landing .img-A{
  max-height:110px;
}
body.desktop-mode.less-ht .scene-landing .img-B{
  max-height:100px;
}
body.desktop-mode.less-ht video.video-lg{
  max-width:700px;
}
body.desktop-mode.less-ht video.video-md{
  max-width:360px;
}
  
  
@media (max-width: 767px) {
  .mobile-mode .scene-title.d-block{
    min-height:3rem;
  }
  .mobile-mode .scene.scene-08::after,
  .mobile-mode .scene.scene-09::after,
  .mobile-mode .scene.scene-11::after{
    display:none;
  }
  .scene-12 .art-txt,
  .scene-18 .art-txt{
    font-size:1rem;
  }
  .slide-info-list .sil-item-0 .li-info-txt,
  .slide-info-list .sil-item-1 .li-info-txt{
    font-size:1rem;
  }
  .timeline-s1-list .tl-item-pin.active .tli-pin span{
    display:block;
  }
  .slide-list{
  }
  .slide-list .sl-list{
    display:flex;
    flex-direction: row;
    flex-wrap:nowrap;
    height:100px;
    position: relative;
  }
  .slide-list .sl-list .sl-list-item{
    transform: translateX(50px);
    opacity:0;
    transition: all 0.5s;
    position: absolute;
    top:0;
  }
  .slide-list .sl-list .sl-list-item.active{
    transform: translateX(0px);
    opacity:1;
  }
  .timeline-s1-info-list .list-item{
    transform:translateY(0);
  }
  .ts2d-list{
    padding:0 15px;
  }
  .ts2d-list .ts2d-list-item{
    max-width:20%;
  }
}

@media (min-width: 768px) {
  body{
    font-size:1.3rem;
  }
  body.desktop-mode.less-ht{
    font-size:1.3rem;
  }
  .loading-wrap p{
    font-size:6vw;
  }
  .art-img{
    max-height:250px;
  }
  body.desktop-mode.less-ht .art-img{
    max-height:170px;
  }
  body.desktop-mode.less-ht .img-table{
    max-height:260px;
  }
  .info-box{
    padding:2rem;
    margin:0 1rem;
  }
  .scene-title{
    font-size:2.6rem;
    margin-bottom:3rem;
  }
  body.desktop-mode.less-ht .scene-title{
    font-size:2.2rem;
    margin-bottom:1.5rem;
  }
  .scene::after{
    width:60px;
    height:60px;
  }
  .timeline-s1-info-list{
    top:22%;
    /* transform: translateY(-50%); */
  }
  .timeline-s1-list .tl-list-item > div{
    padding:10px 0 10px 24px;
  }
  .timeline-s1-list .tl-item-year .tli-year::before{
    margin-left:-32px;
  }
  .timeline-s1-info-list .li-info .li-info-title{
    font-size:1.7rem;
  }
  .timeline-s1-list .tl-item-pin.active .tli-pin{
    font-size:2rem;
  }
  .timeline-s1-list .tl-item-skip .tli-skip{
    margin-left:-10px;
    padding:0;
  }
  .slide-list .sl-list .sl-list-item .it-title{
    font-size:5rem;
  }
  body.desktop-mode.less-ht .slide-list .sl-list .sl-list-item .it-title{
    font-size:4rem;
  }
  .timeline-s1-info-list .list-item.active{
    transform:translateY(-50%);
  }
  .slide-info-list .list-item .li-info .li-info-title{
    padding: 0.5rem 0.75rem;
  }
  .ts2d-list .ts2d-list-item .dot-date{
    font-size:1.1rem;
  }
  .ts2d-list .ts2d-list-item.active .dot-date{
    font-size:1.6rem;
  }
  .ts2-info-list .ts2il-item .item-title{
    font-size:1.8rem;
  }
  .ts2-info-list .ts2il-item .item-txt{
    font-size:1.8rem;
    line-height:1.5;
  }
  .ts2d-list{
    height:160px;
  }
  .number-list{
    flex-direction: row;
    justify-content: space-between;
    opacity:0;
    padding:0;
  }
  .number-item{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding:0;
  }
  .number-item .info{
    opacity:0;
    position:absolute;
    width:38vw;
    top:8vw;
    padding:0;
  }
  .number-item .info.left{
    left:0;
  }
  .number-item .info.right{
    right:0;
    text-align:right;
  }
}

@media (min-width: 1200px) {
  body{
    font-size:1.5rem;
  }
  .scene-title{
    font-size:3.6rem;
  }
  .container{
    max-width:960px;
  }
}

@-webkit-keyframes fadeUp{
  from{
    transform:translateY(40px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}
@keyframes fadeUp{
  from{
    transform:translateY(40px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}