#pano_future {
    position: relative;
    margin-bottom: 70px;
}

span.txtsup {
    font-size: 7px;
    vertical-align: super;
    line-height: 0;
    /* margin-bottom: 9px; */
    /* display: inline-block; */
}

.future1 {
    position: relative;
    overflow: hidden;
}

.future1 .bg_img_wrapper {
    /* padding: 0 10px; */
    background-color: #FFF;
    position: relative;
    width: 100%;
}

.dark_cover_left {
    position: absolute;
    width: calc(50% - 0.5px);
    left: 0;
    top: 0;
    z-index: 4;
    background-color: #bbb5a9;
    height: 100%;
    opacity: 0.9;
}

.dark_cover_right {
    position: absolute;
    width: calc(50% - 0.5px);
    right: 0;
    top: 0;
    z-index: 4;
    background-color: #bbb5a9;
    height: 100%;
    opacity: 0.9;
}

#pano_future.active .dark_cover_left {
    transition: all 0.8s cubic-bezier(0.24, 0.87, 1, 1.24);
    transform: translateX(-100%) !important;
}

#pano_future.active .dark_cover_right {
    transition: all 0.8s cubic-bezier(0.24, 0.87, 1, 1.24);
    transform: translateX(100%) !important;
}

.future1 .bg_img_wrapper img {
    width: 100%;
    display: block;
    transform: scale(1.5);
    transition: all 0.8s 0.2s ease;
}

#pano_future.active .future1 .bg_img_wrapper img {
    transform: scale(1);
}

.future1 .title_remarks {
    bottom: 110px;
    left: initial;
    position: absolute;
    right: 70px;
}

.future1 .bg_img_wrapper .photo_disclaimer {
    top: initial;
    bottom: 100px;
}

.future_title_wrapper {
    position: relative;
    width: 100%;
    margin-top: -100px;
    /* background-color: #FFF; */
}

.future_title_wrapper:before {
    width: 100%;
    height: 0;
    padding-bottom: 4%;
    background-image: url(./../images/gradient_future_03.png);
    position: relative;
    content: '';
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

.future_title_wrapper .inner_wrapper {
    display: block;
    background-color: #aba79c;
    width: 100%;
    /* background-repeat: repeat-y; */
    position: relative;
    padding: 10px 0;
    font-family: 'NotoSansTC Light', 'Avenir Roman', sans-serif;
/*
}

.future_title_wrapper .inner_wrapper:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
*/
    background-image: url('./../images/gradient_future_08.svg');
    background-size: 101%;
}

.future_title_wrapper:before {
    width: 100%;
    height: 0;
    padding-bottom: 4.1%;
    background-image: url(./../images/gradient_future_07.svg);
    position: relative;
    content: '';
    display: block;
    background-size: 101% auto;
    background-repeat: no-repeat;
    background-position: left 7.5% top;
}

.future_title_wrapper:after {
    width: 100%;
    height: 0;
    padding-bottom: 4.9%;
    background-image: url(./../images/gradient_future_06.svg);
    position: relative;
    content: '';
    display: block;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left bottom;
}

.future_title_wrapper .title {
    font-size: 24px;
    color: #FFF;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 10px;
    line-height: 1.4em;
    position: relative;
}

.future_title_wrapper .description {
    padding: 0 20px;
    width: 100%;
    max-width: 1020px;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: #000;
    text-align: justify;
    word-spacing: -2px;
    position: relative;
}

.transportation_header {
    position: relative;
    padding: 20px 30px;
    background-image: url('./../images/gradient_future_05.png');
    background-size: contain;
    background-size: 125%;
}

.transportation_header .title {
    color: #FFF;
    line-height: 1.5em;
    font-size: 24px;
    font-family: 'NotoSansTC Light', 'Avenir Roman', sans-serif;
}

html[lang=en] .transportation_header .title {
    font-size: 22px;
}

.future2, .future3 {
    width: 90%;
    margin-left: auto;
    position: relative;
    /* overflow: hidden; */
}

.transportation_list {
  /* --n: 1; */ /* number of rows*/
  /* --m: 3; */ /* number of columns */
  /* --g: 0px; */  /* control the gap */
  /* --f: 0.9; */   /* control the scale factor */
  /* display: grid; */
  /* gap: var(--g); */
  width: 100%;
  height: 65vh;
  /* grid-template-columns: repeat(var(--m),auto); */
  min-height: 600px;
  position: relative;
  display: flex;
  max-height: 650px;
  overflow: hidden;
}


.transportation_desc_wrapper.car .cover_wrapper {
    background-image: url('./../../upload/future/Pano Harbour_Future8.jpg');
    background-position: center;
    background-size: cover;
    background-position: right center;
    transform-origin: center top;
}

.transportation_desc_wrapper.mtr .cover_wrapper {
    background-image: url('./../../upload/future/Pano Harbour_Future3.jpg');
    background-position: center top 65%;
    background-size: cover;
}

.transportation_desc_wrapper.network .cover_wrapper {
    background-image: url('./../../upload/future_n/green_train.jpg');
    background-position: center;
    background-size: cover;
}


.transportation_desc_wrapper.mtr .title_remarks, .transportation_desc_wrapper.network .title_remarks {
    display: none;
} 

.transportation_desc_wrapper.mtr.active .title_remarks, .transportation_desc_wrapper.network.active .title_remarks {
    right: 10px;
    left: initial;
    display: block;
}

.transportation_list .transportation_desc_wrapper {
  /* width: 0; */
  /* height: 0; */
  min-height: 100%;
  /* min-width: 100%; */
  /* object-fit: cover; */
  cursor: pointer;
  transition: .35s linear;
  position: relative;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #989180;
  flex: 0.5;
}

.transportation_list > .transportation_desc_wrapper .cover_wrapper:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  background-size: contain;
  background-image: url('./../images/gradient_tranportation.png');
  display: block;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 5;
}


.transportation_list .transportation_desc_wrapper.active{
 /* .transportation_list .transportation_desc_wrapper:hover{*/
 filter: grayscale(0);
 flex: 5;
 height: 100%;
}

.transportation_list.active .transportation_desc_wrapper:not(.active) .icon{
/*.transportation_list:hover .transportation_desc_wrapper:not(:hover) .icon{*/
  opacity: 0.4;
  margin-bottom: 150px;
}

.transportation_list.active .transportation_desc_wrapper.network:not(.active) .icon {
    margin-bottom: 158px;
    margin-top: 10px;
}

.transportation_list.active .transportation_desc_wrapper:not(.active) .title{
/*.transportation_list:hover .transportation_desc_wrapper:not(:hover) .title{*/
  display: none;
}

.transportation_list.active .transportation_desc_wrapper:not(.active) .read_more{
/*.transportation_list:hover .transportation_desc_wrapper:not(:hover) .read_more{*/
  display: block;
}

.transportation_list .transportation_desc_wrapper.active .inner_wrapper {
/*.transportation_list .transportation_desc_wrapper:hover .inner_wrapper {*/margin-top: 10%;display: block;text-align: left;}

.transportation_desc_wrapper.active {
/*.transportation_desc_wrapper:hover {*/background-size: 100% 76%;}

.transportation_desc_wrapper .cover_wrapper {
    height: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.transportation_desc_wrapper .cover_wrapper .icon{
    /* width: 50px; */
    height: 35px;
    margin-bottom: 15px;
}

.transportation_desc_wrapper.network .cover_wrapper .icon {
    height: auto;
    width: 90px;
}

.transportation_desc_wrapper .cover_wrapper .title {
    font-size: 20px;
    letter-spacing: 1.5px;
    font-family: 'NotoSansTC Light', 'Avenir Roman', sans-serif;
}

.transportation_desc_wrapper .cover_wrapper .read_more {
    display: none;
    color: #595141;
    padding: 5px 9px;
    border: 1px solid #595141;
    letter-spacing: 1.5px;
    line-height: 1em;
    width: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

html[lang=en] .transportation_desc_wrapper .cover_wrapper .read_more {
    width: 70px;
}

.transportation_desc_wrapper.car.active .title_remarks {
    right: 10px;
    left: initial;
    display: block;
}

.transportation_desc_wrapper.car .title_remarks {
    display: none;
}

.transportation_desc_wrapper.active > .cover_wrapper {
    justify-content: left;
    padding-left: 30px;
    align-items: flex-start;
    height: calc(56% - 20px);
}

.transportation_desc_wrapper.car.active > .cover_wrapper {
    height: 69%;
}

.transportation_desc_wrapper.active > .cover_wrapper:after{
/*.transportation_desc_wrapper:hover > .cover_wrapper:after{*/
    display: none;
}
.transportation_list .transportation_desc_wrapper.active > .cover_wrapper .icon {
/*.transportation_list .transportation_desc_wrapper:hover > .cover_wrapper .icon {*/
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    margin-right: 15px;
    filter: brightness(0) invert(1);
}


.transportation_list .transportation_desc_wrapper.active > .cover_wrapper .title{
/*.transportation_list .transportation_desc_wrapper:hover > .cover_wrapper .title{*/display: inline-block;vertical-align: middle;color: #FFF;/* font-family: 'NotoSansTC Regular', 'Avenir Roman', sans-serif; *//* max-width: 60%; *//* text-shadow: 0px 2px 8px #000000; */}

.transportation_list .transportation_desc_wrapper.active:after{
/*.transportation_list .transportation_desc_wrapper:hover:after{*/
   display: none; 
}

.transportation_desc_wrapper .content_wrapper {
    width: 100%;
    position: relative;
    padding: 30px 20px 20px 10%;
    /* display: none; */
    position: absolute;
}

.transportation_list .transportation_desc_wrapper.active .content_wrapper{
/*.transportation_list .transportation_desc_wrapper:hover .content_wrapper{*/display: flex;z-index: 10;width: 100%;flex-direction: row;align-items: flex-start;justify-content: center;/* align-self: center; */padding: 4% 9%;height: calc(44% + 20px);/* overflow: hidden; */}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
    position: relative;
    flex: 0 0 100%;
}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .box {
    padding: 0 10px;
    position: relative;
    top: 20px;
    opacity: 0;
    transition: all 1s ease;
    width: 25%;
}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .box:before {
    content: '';
    width: 1px;
    height: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    background-color: #FFF;
    transition: height 2s ease;
}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box4:before {
    height: 35vh;
}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box3:before {
    height: 37vh;
}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box:before {
/*.transportation_desc_wrapper.car:hover .content_wrapper .desc_wrapper .box:before {*/height: 250%;height: 36vh;/* min-height: 300px; */max-height: 340px;}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box1 {
/*.transportation_desc_wrapper.car:hover .content_wrapper .desc_wrapper .box1 {*/opacity: 1;top: 0;/* width: 23%; */}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box2 {
/*.transportation_desc_wrapper.car:hover .content_wrapper .desc_wrapper .box2 {*/opacity: 1;top: 0;/* width: 22%; *//* transition-delay: 0.2s; */}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box3 {
/*.transportation_desc_wrapper.car:hover .content_wrapper .desc_wrapper .box3 {*/opacity: 1;top: 0;/* transition-delay: 0.4s; *//* width: 32%; */}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box4 {
/*.transportation_desc_wrapper.car:hover .content_wrapper .desc_wrapper .box4 {*/opacity: 1;top: 0;/* transition-delay: 0.6s; *//* width: 20%; */}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .box2 {
  transition-delay: 0.2s;
}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .box3 {
  transition-delay: 0.4s;
}



.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .box4 {
    transition-delay: 0.6s;
}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .icon_clock {
    width: 25px;
    height: 25px;
    background-image: url('./../images/icon_clock.svg');
    display: block;
    margin-bottom: 10px;
    background-color: #FFF;
    -webkit-mask-image: url('./../images/icon_clock.svg');
    mask-image: url('./../images/icon_clock.svg');
    opacity:;
}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .mins {
    font-size: 18px;
    color: #FFF;
    margin-bottom: 6px;
    font-family: 'NotoSansTC Light', 'Avenir Roman', sans-serif;
}

.transportation_desc_wrapper.car .content_wrapper .desc_wrapper .desc {
    font-size: 16px;
    color: #FFF;
    font-family: 'NotoSansTC Regular', 'Avenir Roman', sans-serif;
}

html[lang=en] .transportation_desc_wrapper.car .content_wrapper .desc_wrapper .desc {
    font-size: 14px;
}

.mtr_list_wrapper {
    /* width: 100%; */
    display: flex;
    justify-content: left;
    color: #FFFFFF;
    flex-grow: 1;
}

.mtr_list_wrapper .icon_mtr {
    anchor-name: none;
    filter: brightness(0) invert(1);
    width: 25px;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .desc {
    font-size: 13px;
    line-height: 1.5em;
    /* margin-bottom: 16px; */
    /* display: flex; */
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .mins {
    text-align: center;
    font-size: 16px;
    /* color: #333333; */
    line-height: 1em;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .up {
    margin-bottom: 15px;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .circle {
    width: 20px;
    border: 2px solid #FFF;
    height: 20px;
    border-radius: 50%;
    margin: 24px auto;
    position: relative;
}

.transportation_desc_wrapper.mtr .box {
    text-align: center;
    position: relative;
    width: 28%;
    font-size: 13px;
    width: 20%;
    min-width: 160px;
    display: flex;
    flex-direction: column;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box1 {
    /* width: 80px; */
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box1 .middle:after {
    content: '';
    width: 50%;
    height: 2px;
    border-top: 2.3px dotted #FFFFFF;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: 0 auto;
    right: 0;
    width: calc(50% - 22px);
    height: 1.5px;
    border-top: 1.5px dashed #FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 1;
    letter-spacing: 21.2px;
}

.box .top {
    display: flex;
    justify-content: end;
    height: 40px;
    flex-direction: column;
    align-items: center;
    margin-bottom: 11px;
}

.box .middle {
    height: 40px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.box .bottom {
    height: 35px;
    text-align: center;
}

html[lang=en] .transportation_desc_wrapper.mtr .mtr_list_wrapper .box1 .middle:after {
    /* bottom: 58.3px; */
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box2 {
    /* margin-top: auto; */
    /* width: 28%; */
    /* width: 80px; */
    /* margin-top: 31px; */
    /* padding: 0 10px; */
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box .icon_bus {
    width: 50px;
    height: 34px;
    background-image: url(./../images/icon_bus.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box .oval {
    width: 16px;
    height: 34px;
    border: 1.5px solid #FFF;
    border-radius: 10px;
    margin: 15px auto 15px;
    background-color: #989180;
    z-index: 3;
}

.icon_train {
    width: 12.1px;
    height: 11px;
    background-image: url(./../images/icon_small_mtr.svg);
    background-size: contain;
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    display: inline-block;
    vertical-align: top;
    margin-right: 0px;
    background-repeat: no-repeat;
    background-position: top center;
}

html[lang='zh-hk'] .box .bottom lable, html[lang='zh-hk'] .box .bottom .icon_train, 
html[lang='zh-cn'] .box .bottom lable, html[lang='zh-cn'] .box .bottom .icon_train{
    vertical-align: middle;
}

.transportation_desc_wrapper .inner_wrapper {
    position: relative;
    z-index: 10;
}

        .transportation_list .transportation_desc_wrapper.mtr .content_wrapper {
            padding-top: 0;
            padding-bottom: 0;
        }

        .transportation_list .transportation_desc_wrapper.mtr.active .content_wrapper {
            display: grid;
            grid-template-columns: 160px max-content; /* Two equal columns */
            grid-template-rows: 1fr 1fr; /* Two equal rows */
             /* Full viewport height */
            justify-content: center;
            margin-left: 30px;
        }

        .car_wrapper {
            display: flex;
            grid-column: 1; /* First column */
            grid-row: 1 / span 2; /* Span across both rows */
            /* background-color: skyblue; */ /* Color for item 1 */
            color: #FFFFFF;
            align-items: center;
            overflow: hidden;
        }

        .car_wrapper .icon_car_n {
            background-image: url(./../images/icon_car_n.svg);
            width: 50px;
            height: 22px;
            background-repeat: no-repeat;
            background-position: center;
        }

        .car_wrapper .box .middle {
            height: 22px;
            background-color: #989180;
        }
        
        .car_wrapper .box.box1 {
            position: relative;
            width: 100%;
            margin-top: 50%;
        }
        
        .car_wrapper .box.box1:after {
            position: absolute;
            content: '';
            width: 30%;
            height: 1px;
            border-bottom: 1px dashed #FFFFFF;
            right: 0;
            bottom: 50%;
            opacity: 0;
        }

        .mtr_list_wrapper.kwuntong {
            position: relative;
            grid-column: 2; /* Second column */
            grid-row: 1; /* First row */
            /* background-color: goldenrod; */ /* Color for item 2 */
            overflow: hidden;
        }

        .mtr_list_wrapper.kwuntong:after {
            content:'';
            width: 1px;
            height: 99%;
            border-left: 1.5px dashed #FFFFFF;
            position: absolute;
            top: 54%;
            left: 0;
            overflow: hidden;
            max-height: calc(136.2px / 2);
            display: none;
        }

        .mtr_list_wrapper.kaitak {
            position: relative;
            grid-column: 2; /* Second column */
            grid-row: 2; /* Second row */
            /* background-color: deepPink; */ /* Color for item 3 */
            overflow: hidden;
        }

        .mtr_list_wrapper.kaitak:after {
            content:'';
            width: 1px;
            height: 100%;
            border-left: 1.5px dashed #FFFFFF;
            position: absolute;
            bottom: 50%;
            left: 0;
            overflow: hidden;
            max-height: 77px;
        }

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .desc {
    font-size: 14px;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .middle:before{
    content: '';
    width: 50%;
    height: 1.5px;
    border-top: 1.5px dashed #FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    z-index: 1;
    letter-spacing: 21.2px;
    /* bottom: 31px; */
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 .middle:before, .transportation_desc_wrapper.mtr .mtr_list_wrapper .box4 .middle:before {
    content: '';
    width: calc(50% - 7px);
    height: 1.5px;
    /* background-color: #FFFFFF; */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    z-index: 1;
    border-top: 1.5px solid white;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper.kaitak .box3 .middle:before {
    display: none;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .middle:after{
    /* bottom: 31px; */
    content: '';
    width: calc(50% - 7px);
    height: 1.5px;
    border-top: 1.5px solid #FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0;
    z-index: 1;
    /* letter-spacing: 21.2px; */
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box4 .middle:after, .transportation_desc_wrapper.mtr .mtr_list_wrapper .box5 .middle:after  {
    content: '';
    width: calc(50% - 7px);
    height: 1.5px;
    /* background-color: #FFFFFF; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    z-index: 1;
    border-top: 1px solid white;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box5:after {
    width: calc(100% - 14px);
    display: none;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 .middle:after {
    content: '';
    width: calc(50% - 7px);
    height: 1.5px;
    border-top: 1.5px solid #FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    z-index: 1;
    letter-spacing: 21.2px;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 {
    /* width: 9%; */
}


.transportation_desc_wrapper.mtr .mtr_list_wrapper .box5 {
    /* width: 7%; */
    text-align: right;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box5 .oval {
    /* margin: 15px 0 15px auto; */
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box4 {
    /* width: 34%; */
}

.transportation_desc_wrapper.network.active > .cover_wrapper {
/*.transportation_desc_wrapper.network:hover > .cover_wrapper {*/height: 73%;position: relative;width: 100%;/* background-image: url(./../../upload/future/2001435956.jpg); *//* background-size: contain; *//* background-position: right center; *//* background-repeat: no-repeat; *//* object-fit: cover; *//* background-image: none; */padding-left: 5%;}

.transportation_list .transportation_desc_wrapper.network.active .content_wrapper {
/*.transportation_list .transportation_desc_wrapper.network:hover .content_wrapper {*/width: 100%;height: 27%;/* background-color: #989180; *//* align-self: flex-end; */flex-direction: column;color: #FFFFFF;}

.transportation_list .transportation_desc_wrapper.network.active .content_wrapper .desc{
    line-height: 1.5em;
	text-align: justify;
}

.transportation_desc_wrapper.network .ref_remarks {
  display: none;
}

.transportation_list .transportation_desc_wrapper.network.active .inner_wrapper {
/*.transportation_list .transportation_desc_wrapper.network:hover .inner_wrapper {*/margin-top: 18.5%;}

.env_list_wrapper {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    height: 75%;
    margin-top: auto;
}

.env_list_wrapper .env_item {
    width: 47%;
    line-height: 1.5em;
    font-family: 'NotoSansTC Regular', 'Avenir Roman', sans-serif;
    color: #FFF;
}

.env_list_wrapper .env_item:nth-child(-n+2) {
    /* margin-bottom: 6%; */
}

.transportation_desc_wrapper.network.active > .cover_wrapper:before {
/*.transportation_desc_wrapper.network:hover > .cover_wrapper:before {*/content: '';width: 100%;height: 100%;position: absolute;background-image: url('./../../upload/future_n/green_train.jpg');background-size: cover;background-position: right 40% center;background-repeat: no-repeat;right: 0;}


.env_list_wrapper .env_item div[class^="icon_"]{
    /* width: 100px; */
    height: 60px;
    margin-bottom: 15px;
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto 15px;
    /* width: 50%; */
    /* padding-bottom: 30%; */
}


.icon_bike {
    background-image: url(./../images/icon_bike.svg);
}

.icon_zone {
    background-image: url(./../images/icon_zone.svg);
}

.icon_water_taxi {
    background-image: url(./../images/icon_water_taxi.svg);
}

.icon_elec {
    background-image: url(./../images/icon_elec.svg);
}

.future2 {
    margin-top: 50px;
    margin-bottom: 100px;
}

.future2 .content_wrapper {
    width: 100%;
    /* height: 55vh; */
    /* min-height: 500px; */
    display: flex;
    /* max-height: 650px; */
    align-items: flex-start;
}

.future2 .timeline_wrapper {
    position: relative;
    width: 60%;
    margin-top: 40px;
    padding-left: 3%;
    /* background: yellow; */
    /* padding-bottom: 140px; */
}

.future2 .gradient {
    position: sticky;
    width: 100%;
    height: 140px;
    top: calc(100vh - 140px);
    background-image: url('./../images/gradient_white.png');
    background-repeat: repeat-x;
    /* background-color: orange; */
    z-index: 25;
    background-position: bottom;
    background-size: contain;
}

.future2 .map_wrapper {
    position: sticky;
    width: 45%;
    margin-top: 40px;
    top: 60px;
    margin-left: 5%;
    height: auto;
    /* margin-bottom: 15%; */
}

.map_wrapper .custom_img_wrapper:before {
    content: '';
    position: absolute;
    right: -30px;
    top: -40px;
    width: 92%;
    height: calc(100% + 80px);
    background-color: #D5D5D5;
    /* height: 100%; */
}

.map_wrapper .custom_img_wrapper {
    /* padding-bottom: 130%; */
    position: relative;
}


.map_inner_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}


.map_inner_wrapper .btn_expand {
    /* bottom: 25px; */
    /* top: initial; */
}

.map_wrapper img {
    position: relative;
    width: 100%;
    /* margin-top: 40px; */
}

.map_points_wrapper {
    width: 100%;
    position: relative;
    display: flex;
    gap: 9%;
}

.mapPoint_list {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
}

.map_point {
    /* background-color: yellow; */
    width: 3%;
    height: 2%;
    z-index: 10;
    position: absolute;
    cursor: pointer;
}

.map_point[data-id='1'] {
    top: 72.5%;
    right: 37%;
}

.map_point[data-id='2'] {
    top: 31.7%;
    left: 23.3%;
}

.map_point[data-id='3'] {
    top: 16.5%;
    left: 25%;
}

.map_point[data-id='4'] {
    top: 14.2%;
    left: 32%;
}

.map_point[data-id='7'] {
    top: 72.5%;
    right: 37%;
}

.map_point[data-id='9'] {
    top: 19.5%;
    left: 25%;
}

.map_point[data-id='11'] {
    top: 19.5%;
    left: 37.4%;
}

.map_point[data-id='13'] {
    top: 22%;
    left: 23.2%;
}

.points_list_wrapper .points_list .list-section .list-title {
    font-size: 18px;
    /* font-weight: bold; */
    font-family: 'NotoSansTC Medium';
    margin-bottom: 10px;
}

html[lang=zh-cn] .points_list_wrapper .points_list .list-section .list-title {
    font-family: 'NotoSansSC Medium';
}

.points_list_wrapper .points_list .list-section:not(:last-of-type) {
    margin-bottom: 30px;
}

.points_list_wrapper .points_list .list-section .list-item_wrapper:not(:last-child) {
    margin-bottom: 10px;
    display: block;
    position: relative;
}

.points_list_wrapper .points_list .list-section .list-item_wrapper.popup {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
}

.points_list_wrapper .points_list .list-section .list-item_wrapper.popup:after {
    content: '';
    background-image: url('../images/icon_open_popup.svg');
    width: 13px;
    height: 13px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    margin-left: 5px;
}

.points_list_wrapper .list_item {
    display: flex;
    align-items: center;
}

.points_list_wrapper .list_item sub {
    align-self: flex-end;
    font-size: 9px;
}

.points_list_wrapper .list_item sup {
    align-self: flex-start;
}

.points_list_wrapper .list_item .num {
    background-color: #122587;
    display: inline-block;
    color: #FFF;
    width: 20px;
    text-align: center;
    border-radius: 50%;
    line-height: 1em;
    /* padding: 5px; */
    line-height: 20px;
    padding: 0;
    margin-right: 10px;
    font-size: 11px;
}

.points_list_wrapper .list_item [class^='label_'] {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}

.points_list_wrapper .list_item .label_1 {
    background-image: url('../images/icon_transport_lbl1.svg');
}

.points_list_wrapper .list_item .label_2 {
    background-image: url('../images/icon_transport_lbl2.svg');
}

.points_list_wrapper .list_item .label_3 {
    background-image: url('../images/icon_transport_lbl3.svg');
}

.points_list_wrapper .list_item .label_4 {
    background-image: url('../images/icon_transport_lbl4.svg');
}

.points_list_wrapper .list_item .label_5 {
    background-image: url('../images/icon_transport_lbl5.svg');
}

.points_list_wrapper .list_item .label_6 {
    background-image: url('../images/icon_transport_lbl6.svg');
}

.points_list_wrapper .list_item .label_7 {
    background-image: url('../images/icon_transport_lbl7.svg');
    background-size: 10px;
    background-position: center;
}

.maplistPopup {
    background-color: #DEDAD3;
}

.maplistPopup .inner_wrapper {
    padding: 20px;
}

.maplistPopup .inner_wrapper .img_wrapper {
    position: relative;
    margin-bottom: 15px;
}

.maplistPopup .inner_wrapper .img_wrapper.portrait {
    width: min-content;
    max-height: 400px;
    left: 0;
    right: 0;
    margin: 0 auto 15px;
}

.maplistPopup .inner_wrapper .img_wrapper.portrait img {
    height: 300px;
    width: auto;
}


.maplistPopup .inner_wrapper .img_wrapper .disclaimer {
    position: absolute;
    right: 10px;
    bottom: 15px;
    color: #FFFFFF;
    font-size: 12px;
    font-family: 'NotoSansTC Regular', 'Avenir Roman', sans-serif;
    text-shadow: 0px 2px 8px #000000;
}

.maplistPopup .inner_wrapper img {
    width: 100%;
    /* margin-bottom: 20px; */
    box-shadow: 1px 1px 4px 0px #0000006e;
}

.maplistPopup .inner_wrapper .maplistItem_title {
    font-size: 20px;
    margin-bottom: 15px;
}

.maplistPopup .inner_wrapper .maplistItem_desc {
    line-height: 1.6em;
    text-align: justify;
}

.timeline_item_wrapper {
    width: calc(50% - 20px);
    position: relative;
    margin-bottom: -10%;
}

.timeline_item_wrapper .upper .custom_img_wrapper {
    padding-bottom: 66.59%;
}

.timeline_item_wrapper .upper .custom_img_wrapper.yr24 {
    padding-bottom: 51.06%;
}

.yr_group.lyr .yr {
    left: 103%;
}

.yr_group.ryr .yr:before {
    right: 0;
    margin-right: 0;
}

.yr_group .timeline_item_wrapper .img1_wrapper .custom_img_wrapper, .yr_group .timeline_item_wrapper .img2_wrapper .custom_img_wrapper {
    padding-bottom: 150%;
}

.timeline_item_wrapper .content {
    position: relative;
}

.timeline_item_wrapper .upper {
    position: relative;
    width: 100%;
}

.timeline_item_wrapper .upper img {
    width: 100%;
    position: absolute;
    display: block;
}

.timeline_item_wrapper .lower {
    padding: 20px 0;
}

.timeline_item_wrapper .upper .photo_disclaimer {
    /* bottom: calc(100% - 20px); */
}

.timeline_item_wrapper .title {
    font-size: 17px;
    margin-bottom: 9px;
    color: #BBB5A9;
    font-family: 'NotoSansTC Light', 'Avenir Roman', sans-serif;
}

.timeline_item_wrapper .description {
    line-height: 1.6em;
    /* font-family: 'NotoSansTC Regular', 'Avenir Roman', sans-serif; */
    text-align: justify;
    word-spacing: -2px;
}

.timeline_item_wrapper.right:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #BBB5A9;
    position: absolute;
    left: -20px;
}

.timeline_item_wrapper.right:after {
    content: '';
    width: 7px;
    height: 80px;
    background-color: #BBB5A9;
    position: absolute;
    left: -20px;
    top: 0;
}

.timeline_item_wrapper.left:before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #BBB5A9;
    position: absolute;
    right: -20px;
}

.timeline_item_wrapper.left:after {
    content: '';
    width: 7px;
    height: 80px;
    background-color: #BBB5A9;
    position: absolute;
    right: -20px;
    top: 0;
}

.timeline_item_wrapper.right {
    margin-left: auto;
    margin-right: 1px;
}

.timeline_item_wrapper:not(:first-of-type) {
    /* margin-top: -36%; */
}

.yr {
    position: absolute;
    /* left: -85%; */
    width: 50%;
    margin-top: -14px;
}

.yr:before {
    content: '';
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
    border: 2.5px solid #BBB5A9;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: white;
    z-index: 2;
}

.yr:after {
    content: '';
    position: absolute;
    width: calc(100% - 15px);
    height: 1px;
    border-top: 1px dashed #BBB5A9;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 15px;
}


.yr_group.lyr .yr {
    left: 0;
}

.future2 .timeline_wrapper .yr_group:nth-child(2) {
    margin-top: -140px;
}


.yr_group.ryr .yr {
    left: 50%;
}

.yr img {
    width: 105px;
    display: inline-block;
    z-index: 3;
    padding: 0 10px;
    margin-left: 20%;
    background-color: white;
    z-index: 5;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0 auto 20%;
}

.yr span {
    position: relative;
    background-color: #FFF;
    margin-left: 20%;
    font-size: 18px;
    display: inline-block;
    z-index: 3;
    padding: 0 10px;
    letter-spacing: 5px;
    color: #BBB5A9;
    display: inline-block;
    max-width: 74%;
}

/*
.yrstart {
    margin-top: 0;
}

.yrend {
    margin-bottom: 0;
}
*/

.future2 .yr_group:last-child {
      padding-bottom: 100px;
  }

.yr_group .timeline_item_wrapper:last-child  {
    padding-bottom: 50px;
    margin-bottom: 0;
}

.yr_group:last-child .timeline_item_wrapper:last-child{
    /* margin-bottom: 0; */
    padding-bottom: 0px;
}

.yr_group .timeline_item_wrapper .img1_wrapper, .yr_group .timeline_item_wrapper .img2_wrapper {
    width: 50%;
    position: relative;
}

.yr_group .timeline_item_wrapper .upper {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.stripe {
    position: absolute;
    width: 10%;
    height: 97.5%;
    left: 0;
    top: 0;
    background-image: url('./../images/stripe.png');
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box2:after {
    width: 1px;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    border-left: 1.5px dashed white;
    align-self: center;
    top: 5px;
    margin: auto;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .upper, 
.transportation_desc_wrapper.mtr .mtr_list_wrapper .lower {
    width: 100%;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .car_wrapper {
    width: 20%;
    height: 100%;
    align-items: center;
    align-self: center;
}

.transportation_list .transportation_desc_wrapper.mtr.active .content_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    justify-content: center;
    position: relative;
    margin-left: 0;
}

.car_wrapper .box.box1 {
    margin-top: 0;
}

.transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 .lower .middle:before {
    display: none;
}

@media (max-width: 1280px){
  .transportation_header {
      background-size: 150%;
  }

  .future_title_wrapper .inner_wrapper {
      padding: 10px 50px;
  }
  
}

@media (max-width: 1024px){
  .transportation_desc_wrapper.network.active > .cover_wrapper{
    /* margin-bottom: 30px; */
  }
    
  .transportation_list {
      height: auto;
      display: block;
      max-height: initial;
  }
  
  .transportation_desc_wrapper.active {
      height: auto;
  }
  
  .transportation_list .transportation_desc_wrapper {
      height: 180px;
      overflow: hidden;
      transform-origin: center top;
  }
  
  .transportation_list .transportation_desc_wrapper.active {
      height: auto;
  }
  
  .transportation_desc_wrapper.active > .cover_wrapper {
      height: 0;
      padding-bottom: 32.25%;
  }
  
  .transportation_list .transportation_desc_wrapper.active .content_wrapper {
      height: 48%;
      position: relative;
  }
  
  .transportation_list.active .transportation_desc_wrapper:not(.active) .icon {
      margin-bottom: 40px;
  }
  
  
  .transportation_list .transportation_desc_wrapper.active .inner_wrapper {
    margin-top: 12%;
  }
  
  .transportation_desc_wrapper.network.active > .cover_wrapper {
      position: relative;
      height: auto;
      padding-bottom: 0;
  }


  .transportation_list .transportation_desc_wrapper.active > .cover_wrapper .title {
      /* max-width: calc(100% - 80px); */
  }
  
  .env_list_wrapper .env_item {
      margin-bottom: 40px;
  }
  
  .transportation_desc_wrapper.network.active > .cover_wrapper:before {
      /* height: 130%; */
  }
  
  .transportation_list {
      height: auto;
      display: block;
      /* max-height: 470px; */
  }
  
  .transportation_desc_wrapper.active {
      height: auto;
  }
  
  .transportation_list .transportation_desc_wrapper {
      height: 180px;
      overflow: hidden;
      transform-origin: center top;
  }
  
  .transportation_list .transportation_desc_wrapper.active {
      height: auto;
  }

  .transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box:before {
      height: 27vh;
      max-height: 270px;
  }

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box4:before {
    height: 26vh;
    max-height: 260px;
}

.transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box3:before {
    height: 27.5vh;
    max-height: 275px;
}
  
  .transportation_desc_wrapper.car.active > .cover_wrapper,
  .transportation_desc_wrapper.active > .cover_wrapper {
      height: 0;
      padding-bottom: 32.25%;
  }

  .transportation_desc_wrapper.network.active .title_remarks {
      /* display: none; */
  }

  .transportation_list .transportation_desc_wrapper.network.active .content_wrapper{
      width: 100%;
  }

  .transportation_desc_wrapper.network.active .ref_remarks {
      /* position: absolute; */
      /* left: 20px; */
      /* bottom: 10px; */
      /* z-index: 5; */
      /* display: block; */
  }
  
  .transportation_desc_wrapper.network.active .ref_remarks .title_remarks {
      position: relative;
      right: initial;
      display: block;
  }


  .transportation_list .transportation_desc_wrapper.network:after {
      content: '';
      /* position: relative; */
      /* width: 100%; */
      /* padding-bottom: 60%; */
      /* background-image: url('./../../upload/future_n/green_train.jpg'); */
      /* background-size: cover; */
      /* min-width: 250px; */
      display: block;
      /* background-position: bottom right 70%; */
  }
  
  .transportation_list.active .transportation_desc_wrapper:not(.active) .icon, .transportation_list.active .transportation_desc_wrapper.network:not(.active) .icon {
      margin-bottom: 40px;
  }
  
  
  .transportation_list .transportation_desc_wrapper.active .inner_wrapper {
      margin-top: 9%;
      left: 50px;
      position: absolute;
  }

 .transportation_list .transportation_desc_wrapper.network.active .inner_wrapper {
    margin-top: 12%;
 }
    
  
  .transportation_desc_wrapper.network.active > .cover_wrapper {
      position: relative;
      height: 0;
      padding-bottom: 32.25%;
  }
  
  .env_list_wrapper .env_item {
      margin-bottom: 40px;
  }
  
  
  
  .transportation_desc_wrapper.network.active > .cover_wrapper:before {
      /* height: 130%; */
      background-image: none;
  }

  
  .yr, .yr_group.ryr .yr, .timeline_item_wrapper.left .yr {
      position: relative;
      /* top: 45px; */
      /* margin-bottom: 30px; */
      width: 100%;
      background-color: #FFF;
      z-index: 10;
      padding-top: 20px;
      padding-bottom: 20px;
      left: 0;
      /* position: sticky; */
  }
  
  .yr_group .timeline_item_outer_wrapper .timeline_item_wrapper {
      /* flex-direction: column; */
      flex-wrap: wrap;
      width: 100%;
  }

  .yr_group .timeline_item_outer_wrapper .timeline_item_wrapper .title_remarks{
      display: none;
  }
  
  .yr_group .timeline_item_wrapper:last-child{
    padding-bottom: 0;
  }

  .future2.btnr .yr, .future2.btnr .timeline_item_wrapper.left .yr {
      /* top: 90px; */
      left: 0;
  }


  
  .timeline_item_wrapper.left .yr:before{
      left: 0;
      margin-left: 0;
  }

  .yr_inner {
      width: auto;
      max-width: calc(100% - 40px);
      display: inline-block;
      vertical-align: middle;
  }
    
  .yr_group.ryr .yr:before {
      left: 0;
      margin-left: 0;
      margin-right: auto;
  }

  .map_wrapper:before {
      /* height: 108%; */
  }

  .yr_group.opened {
      padding-bottom: 60px;
  }
  
  .yr:after {
      width: 50%;
      width: 40px;
  }
  
  .yr span {
      margin-left: 40px;
      font-size: 20px;
      max-width: 100%;
      width: calc(100% - 40px);
      width: auto;
      display: inline-block;
      vertical-align: middle;
  }
    
  .future2 .map_wrapper {
      top: 40px;
      /* order: 1; */
      width: 100%;
      position: relative;
      margin-left: auto;
      width: 80%;
  }
  
  .timeline_item_wrapper.right {
      margin-left: 0;
      margin-bottom: 40px;
  }
  
  .timeline_item_wrapper {
      width: 100%;
  }
  
  .timeline_item_wrapper.left:before, .timeline_item_wrapper.left:after {
      left: -20px;
  }

  .future2 {
      margin-top: 50px;
      /* margin-left: 0; */
      /* padding-left: 5px; */
  }
  
  .timeline_item_wrapper .upper, .timeline_item_wrapper .lower {
      width: 90%;
      margin-left: auto;
  }
  
  .future2 .content_wrapper {
      flex-direction: column;
  }
  
  .future2 .timeline_wrapper {
      order: 2;
      width: 100%;
      margin-top: 90px;
  }
  
  .timeline_item_wrapper:not(:first-of-type) {
      margin-top: 40px;
      margin-bottom: 0;
  }

  .timeline_item_wrapper:first-child {
      margin-top: 40px;
  }

  .yr_group > .timeline_item_wrapper:last-child{
      padding-bottom: 0;
  }
  
  .future2 .gradient {
      height: 100px;
      top: calc(100vh - 100px);
  }

}

@media (max-width: 768px) {

    .future3 {
        margin-left: 0;
        width: 100%;
    }
  
  #pano_future .future1 .bg_img_wrapper img {
      width: 200%;
      transform: scale(1.5) translateX(-25%);
  }

  #pano_future.active .future1 .bg_img_wrapper img{
      transform: scale(1) translateX(-30%);
  }
  
  .future_title_wrapper .title {
      font-size: 20px;
  }

  html[lang=en] .future_title_wrapper .title {
      font-size: 18px;
  }

  .timeline_item_wrapper .title, .transportation_header .title, .transportation_desc_wrapper .cover_wrapper .title {
      font-size: 15px;
  }

  html[lang=en] .transportation_header .title {
      font-size: 18px;
  }

  .stripe {
      display: none;
  }

    .map_inner_wrapper .btn_expand {
        /* width: 40px; */
        /* height: 40px; */
    }
    
  .future2 {
      margin-left: 0;
      padding-left: 5px;
      width: 100%;
  }

  .future_title_wrapper .inner_wrapper {
      padding: 10px 0;
  }

  .future_title_wrapper:before{
      /* background-image: url(./../images/gradient_future_03_m.png); */
      /* padding-bottom: 12.5%; */
      background-size: 104% auto;
      background-position: left 2% top;
  }
  
  .future_title_wrapper:after{
      background-size: 103% auto;
      background-position: left 1.5% bottom;
  }

  .future_title_wrapper .inner_wrapper{
      /* background-image: url(./../images/gradient_future_04_m.png); */
      background-size: 103%;
      background-position: left 1.5% bottom;
      padding: 10px 0;
      /* background-image: url(./../images/gradient_future_05_m.png); */
     
  }
  
  
  .future1 .title_remarks {
      bottom: 20px;
      left: 0;
  }

  .future2 .map_wrapper {
      top: 0;
  }
  
  .future2 .timeline_wrapper {
      margin-top: 50px;
  }
  
  
  .future2 .map_wrapper {
      width: 90%;
      margin-bottom: 50px;
      margin-left: calc(10% - 30px);
  }

    .map_wrapper .custom_img_wrapper:before {
        right: -30px;
    }

    .maplistPopup .inner_wrapper .maplistItem_title {
        font-size: 18px;
    }
    
    .maplistPopup .inner_wrapper .maplistItem_desc {
        font-size: 13px;
/*
        font-size: 0.7em;
        vertical-align: baseline;
        position: relative;
        top: -0.4em;
*/
    }

    
  .timeline_item_wrapper .upper, .timeline_item_wrapper .lower{
      width: 100%;
  }
  
  .timeline_item_wrapper:not(:first-of-type){
      margin-top: 20px;
      margin-bottom: 40px;
  }

  .yr span {
      font-size: 16px;
  }
  

.yr_switch {
    position: absolute;
    right: 10px;
    width: 26px;
    height: 26px;
    background-image: url('./../images/plus_icon_brown.svg');
    /* top: 0; */
    /* bottom: 0; */
    /* margin: auto 0; */
    z-index: 5;
    cursor: pointer;
    background-repeat: no-repeat;
    /* transform: rotate(-90deg); */
    background-position: center;
    position: relative;
    display: inline-block;
    /* margin-left: 20px; */
    vertical-align: middle;
    margin-bottom: 0;
    background-color: #FFF;
    /* padding-left: 20px; */
    /* padding-right: 10px; */
    background-size: cover;
  }

  .yr_switch.opened {
    /* transform: rotate(90deg); */
    background-image: url(./../images/minus_icon.svg);
    /* width: 46px; */
    /* height: 46px; */
    /* background-size: 46px; */
  }
  
  .timeline_item_wrapper .lower {
      padding: 10px 20px;
      width: 100%;
  }

.transportation_list {
    max-height: initial;
}
    
  .transportation_list .transportation_desc_wrapper.active .content_wrapper {
      overflow-x: scroll;
      width: 100%;
      flex-direction: column;
      padding: 20px;
  }


  
  .transportation_desc_wrapper.car .content_wrapper .desc_wrapper {
      flex-direction: column;
  }
  
  .transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box1, .transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box2, .transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box3, .transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box4 {
      width: 100%;
      padding-bottom: 10px;
      margin-bottom: 10px;
  }
  
  .transportation_desc_wrapper.car.active .content_wrapper .desc_wrapper .box:before {
      height: 1px;
      width: 100%;
      min-height: initial;
      opacity: 0.5;
  }
  
  .transportation_desc_wrapper .cover_wrapper .icon {
      height: 25px;
  }

  
/*   .transportation_desc_wrapper.mtr .box:after { */


    
  
  

 


    
 


    
    
   






  html[lang=en] .transportation_desc_wrapper.car .content_wrapper .desc_wrapper .desc{
    font-size: 13px;
  }

  .future2 .timeline_wrapper .yr_group:nth-child(2) {
    /* margin-top: 0; */
    padding-bottom: 0;
  }

    .transportation_list .transportation_desc_wrapper.mtr.active .content_wrapper {
        /* grid-template-columns: 1fr 1fr; */
        /* overflow-x: unset; */
        /* margin-left: 0; */
        /* grid-template-rows: auto 1fr; */
        /* grid-row-gap: 75px; */
    }
    
   
    
    

    .map_points_wrapper {
        flex-direction: column;
    }
    
    .points_list {
        display: flex;
        gap: 10px 40px;
        flex-wrap: wrap;
    }
    
    .points_list_wrapper {
        padding: 0 20px;
    }

/**************/

   


    .transportation_desc_wrapper.car.active .title_remarks,
    .transportation_desc_wrapper.mtr.active .title_remarks, 
    .transportation_desc_wrapper.network.active .title_remarks {
        top: 0;
        margin-top: calc(32.25% - 10px);
        right: 0;
        margin-bottom: 0;
        left: 0;
        padding: 0;
    }

    .transportation_desc_wrapper.mtr.active .title_remarks, 
    .transportation_desc_wrapper.network.active .title_remarks {
        
    }
}

@media (max-width: 880px) {
    .transportation_list .transportation_desc_wrapper.mtr.active .content_wrapper {
        flex-direction: column;
        gap: 30px;
        padding: 50px 20px;
    }   
    
      html[lang=en] .mtr_list_wrapper {
         /* min-width: 600px; */
         gap: 0;
      }

     .transportation_desc_wrapper.mtr .mtr_list_wrapper .car_wrapper {
        align-items: unset;
        height: auto;
        width: 100%;
        overflow: visible;
        margin-bottom: 30px;
    }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box2, .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box3, .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box4 {
        margin-bottom: 70px;
    }
    
    .mtr_list_wrapper.kwuntong {
        grid-column: 1;
        grid-row: 2;
        overflow: visible;
    }
    
    .mtr_list_wrapper.kaitak {
        grid-column: 2;
        grid-row: 2;
        overflow: visible;
    }
    
    .car_wrapper .box.box1 {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* gap: 10px; */
        position: relative;
    }
    
    .car_wrapper .box.box1 .top {
        display: none;
    }
    
    .car_wrapper .box.box1:after {
        width: 1px;
        height: 30px;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 100%;
        z-index: 100;
        border-left: 1px dashed #FFFFFF;
        opacity: 1;
    }
    
    
    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .middle:after,
    .transportation_desc_wrapper.mtr .mtr_list_wrapper.kaitak .box3:after,
    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box4 .middle:after, 
    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box5 .middle:after {
        display: none;
    }
    
    .mtr_list_wrapper.kaitak:before {
        content: '';
        width: 50%;
        height: 1px;
        top: -30px;
        left: 0;
        position: absolute;
        border-top: 1px dashed #FFFFFF;
    }
    
    .mtr_list_wrapper.kaitak:after, .mtr_list_wrapper.kwuntong:after {
        height: 30px;
        top: -30px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    
    .mtr_list_wrapper.kwuntong:before {
        content: '';
        width: 50%;
        height: 1px;
        top: -30px;
        right: 0;
        position: absolute;
        border-top: 1px dashed #FFFFFF;
        display: none;
    }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box .oval{
        margin: 0 auto;
        height: 50px;
    }

    .mtr_list_wrapper {
        flex-direction: column;
        width: 100%;
    }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box1,
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box2,
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box3, 
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box4, 
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box5 {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
        justify-content: center;
        display: flex;
        /* margin-bottom: 50px; */
        /* flex: 1 1 auto; */
        position: relative;
        /* min-height: 160px; */
        gap: 0;
        /* min-width: 120px; */
    }

     .transportation_desc_wrapper.mtr .box .top  {
        width: 100%;
        margin-left: 0;
    }

    .box .top {
        width: calc(100% - 50px);
        justify-content: center;
        margin-bottom: 0;
        height: auto;
        margin-left: 80px;
    }
    
    .transportation_desc_wrapper.mtr .car_wrapper .box .middle {
        position: relative;
        width: auto;
    }

      .transportation_desc_wrapper.mtr .box .middle{
          display: block;
          position: relative;
          margin-bottom: 0;
          /* position: absolute; */
          left: 0;
          right: 0;
          margin: 0 auto;
          height: auto;
          /* margin-bottom: 10px; */
      }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box1 .middle:after {
        height: 70px;
        bottom: -70px;
    }

    .transportation_desc_wrapper.mtr .car_wrapper .box .bottom {
        margin-left: 0;
    }

    .box .bottom {
          /* min-height: 50px; */
          order: 3;
          width: 100%;
          /* text-align: left; */
          margin-left: 0;
          justify-content: center;
          align-items: center;
          display: flex;
          /* align-self: flex-end; */
          height: auto;
    }

   

    .box .bottom br {
        content: " ";
        display: none;
    }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box2 {
        padding-top: 40px;
    }

     .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box2:before {
        content: '';
        width: 50%;
        position: absolute;
        height: 1.5px;
        border-top: 1px dashed white;
        top: 0;
    }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .upper, .transportation_desc_wrapper.mtr .mtr_list_wrapper .lower {
        width: 50%;
        position: relative;
        align-items: center;
        justify-content: center;
        display: flex;
        /* padding: 0 10px; */
        flex-direction: column;
        gap: 8px;
    }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box.box2 .top {
      display: none;
  }
  
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .middle:before {
      display: none;
  }
  
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 .middle:before {
      display: none;
  }
  
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box4 .middle:before {
      display: none;
  }
  
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box5 .middle:after {
      display: none;
  }

  .transportation_desc_wrapper.car .content_wrapper .desc_wrapper .mins{
    font-size: 16px;
  }

  .transportation_desc_wrapper.car .content_wrapper .desc_wrapper .desc{
    font-size: 15px;
  }

    .box .middle {
      margin-bottom: 3px;
      height: 100%;
      width: 30px;
  }

  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .upper:after, 
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 .upper:after,
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .lower:after, 
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 .lower:after,
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box4 .upper:after, 
  .transportation_desc_wrapper.mtr .mtr_list_wrapper .box5 .upper:after {
      content: '';
      width: 1px;
      height: 50px;
      border-left: 1px solid #FFF;
      position: absolute;
      display: block;
      margin: 16px auto;
      top: -60px;
      left: 0;
      right: 0;
      margin: 0 auto;
      /* top: initial; */
  }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .upper:after,
    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box2 .lower:after {
        border-left-style: dashed;
        height: 35px;
        top: -40px;
    }

    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box3 .middle:after,
    .transportation_desc_wrapper.mtr .mtr_list_wrapper .box2:after {
        display: none;
    }

}

@media (max-width: 640px) {
  .env_list_wrapper {
      height: auto;
  }
  
  .env_list_wrapper .env_item {
      width: 100%;
  }
}

@media (max-width: 640px) {
  .timeline_item_wrapper .lower {
      padding: 10px 7px;
  }
}