/* bootstrap.min.css */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100%; padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem); margin-right: auto; margin-left: auto } @media (min-width:576px) { .container, .container-sm { max-width: 540px } } @media (min-width:768px) { .container, .container-md, .container-sm { max-width: 720px } } @media (min-width:992px) { .container, .container-lg, .container-md, .container-sm { max-width: 960px } } @media (min-width:1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1140px } } @media (min-width:1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1320px } } .row { margin-right: -15px; margin-left: -15px } .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px } .col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 { float: left } .col-xs-12 { width: 100% } .col-xs-11 { width: 91.66666667% } .col-xs-10 { width: 83.33333333% } .col-xs-9 { width: 75% } .col-xs-8 { width: 66.66666667% } .col-xs-7 { width: 58.33333333% } .col-xs-6 { width: 50% } .col-xs-5 { width: 41.66666667% } .col-xs-4 { width: 33.33333333% } .col-xs-3 { width: 25% } .col-xs-2 { width: 16.66666667% } .col-xs-1 { width: 8.33333333% } .col-xs-pull-12 { right: 100% } .col-xs-pull-11 { right: 91.66666667% } .col-xs-pull-10 { right: 83.33333333% } .col-xs-pull-9 { right: 75% } .col-xs-pull-8 { right: 66.66666667% } .col-xs-pull-7 { right: 58.33333333% } .col-xs-pull-6 { right: 50% } .col-xs-pull-5 { right: 41.66666667% } .col-xs-pull-4 { right: 33.33333333% } .col-xs-pull-3 { right: 25% } .col-xs-pull-2 { right: 16.66666667% } .col-xs-pull-1 { right: 8.33333333% } .col-xs-pull-0 { right: auto } .col-xs-push-12 { left: 100% } .col-xs-push-11 { left: 91.66666667% } .col-xs-push-10 { left: 83.33333333% } .col-xs-push-9 { left: 75% } .col-xs-push-8 { left: 66.66666667% } .col-xs-push-7 { left: 58.33333333% } .col-xs-push-6 { left: 50% } .col-xs-push-5 { left: 41.66666667% } .col-xs-push-4 { left: 33.33333333% } .col-xs-push-3 { left: 25% } .col-xs-push-2 { left: 16.66666667% } .col-xs-push-1 { left: 8.33333333% } .col-xs-push-0 { left: auto } .col-xs-offset-12 { margin-left: 100% } .col-xs-offset-11 { margin-left: 91.66666667% } .col-xs-offset-10 { margin-left: 83.33333333% } .col-xs-offset-9 { margin-left: 75% } .col-xs-offset-8 { margin-left: 66.66666667% } .col-xs-offset-7 { margin-left: 58.33333333% } .col-xs-offset-6 { margin-left: 50% } .col-xs-offset-5 { margin-left: 41.66666667% } .col-xs-offset-4 { margin-left: 33.33333333% } .col-xs-offset-3 { margin-left: 25% } .col-xs-offset-2 { margin-left: 16.66666667% } .col-xs-offset-1 { margin-left: 8.33333333% } .col-xs-offset-0 { margin-left: 0 } @media (min-width:768px) { .col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9 { float: left } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666667% } .col-sm-10 { width: 83.33333333% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666667% } .col-sm-7 { width: 58.33333333% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666667% } .col-sm-4 { width: 33.33333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.66666667% } .col-sm-1 { width: 8.33333333% } .col-sm-pull-12 { right: 100% } .col-sm-pull-11 { right: 91.66666667% } .col-sm-pull-10 { right: 83.33333333% } .col-sm-pull-9 { right: 75% } .col-sm-pull-8 { right: 66.66666667% } .col-sm-pull-7 { right: 58.33333333% } .col-sm-pull-6 { right: 50% } .col-sm-pull-5 { right: 41.66666667% } .col-sm-pull-4 { right: 33.33333333% } .col-sm-pull-3 { right: 25% } .col-sm-pull-2 { right: 16.66666667% } .col-sm-pull-1 { right: 8.33333333% } .col-sm-pull-0 { right: auto } .col-sm-push-12 { left: 100% } .col-sm-push-11 { left: 91.66666667% } .col-sm-push-10 { left: 83.33333333% } .col-sm-push-9 { left: 75% } .col-sm-push-8 { left: 66.66666667% } .col-sm-push-7 { left: 58.33333333% } .col-sm-push-6 { left: 50% } .col-sm-push-5 { left: 41.66666667% } .col-sm-push-4 { left: 33.33333333% } .col-sm-push-3 { left: 25% } .col-sm-push-2 { left: 16.66666667% } .col-sm-push-1 { left: 8.33333333% } .col-sm-push-0 { left: auto } .col-sm-offset-12 { margin-left: 100% } .col-sm-offset-11 { margin-left: 91.66666667% } .col-sm-offset-10 { margin-left: 83.33333333% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-8 { margin-left: 66.66666667% } .col-sm-offset-7 { margin-left: 58.33333333% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-5 { margin-left: 41.66666667% } .col-sm-offset-4 { margin-left: 33.33333333% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-2 { margin-left: 16.66666667% } .col-sm-offset-1 { margin-left: 8.33333333% } .col-sm-offset-0 { margin-left: 0 } } @media (min-width:992px) { .col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9 { float: left } .col-md-12 { width: 100% } .col-md-11 { width: 91.66666667% } .col-md-10 { width: 83.33333333% } .col-md-9 { width: 75% } .col-md-8 { width: 66.66666667% } .col-md-7 { width: 58.33333333% } .col-md-6 { width: 50% } .col-md-5 { width: 41.66666667% } .col-md-4 { width: 33.33333333% } .col-md-3 { width: 25% } .col-md-2 { width: 16.66666667% } .col-md-1 { width: 8.33333333% } .col-md-pull-12 { right: 100% } .col-md-pull-11 { right: 91.66666667% } .col-md-pull-10 { right: 83.33333333% } .col-md-pull-9 { right: 75% } .col-md-pull-8 { right: 66.66666667% } .col-md-pull-7 { right: 58.33333333% } .col-md-pull-6 { right: 50% } .col-md-pull-5 { right: 41.66666667% } .col-md-pull-4 { right: 33.33333333% } .col-md-pull-3 { right: 25% } .col-md-pull-2 { right: 16.66666667% } .col-md-pull-1 { right: 8.33333333% } .col-md-pull-0 { right: auto } .col-md-push-12 { left: 100% } .col-md-push-11 { left: 91.66666667% } .col-md-push-10 { left: 83.33333333% } .col-md-push-9 { left: 75% } .col-md-push-8 { left: 66.66666667% } .col-md-push-7 { left: 58.33333333% } .col-md-push-6 { left: 50% } .col-md-push-5 { left: 41.66666667% } .col-md-push-4 { left: 33.33333333% } .col-md-push-3 { left: 25% } .col-md-push-2 { left: 16.66666667% } .col-md-push-1 { left: 8.33333333% } .col-md-push-0 { left: auto } .col-md-offset-12 { margin-left: 100% } .col-md-offset-11 { margin-left: 91.66666667% } .col-md-offset-10 { margin-left: 83.33333333% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-8 { margin-left: 66.66666667% } .col-md-offset-7 { margin-left: 58.33333333% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-5 { margin-left: 41.66666667% } .col-md-offset-4 { margin-left: 33.33333333% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-2 { margin-left: 16.66666667% } .col-md-offset-1 { margin-left: 8.33333333% } .col-md-offset-0 { margin-left: 0 } } @media (min-width:1200px) { .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9 { float: left } .col-lg-12 { width: 100% } .col-lg-11 { width: 91.66666667% } .col-lg-10 { width: 83.33333333% } .col-lg-9 { width: 75% } .col-lg-8 { width: 66.66666667% } .col-lg-7 { width: 58.33333333% } .col-lg-6 { width: 50% } .col-lg-5 { width: 41.66666667% } .col-lg-4 { width: 33.33333333% } .col-lg-3 { width: 25% } .col-lg-2 { width: 16.66666667% } .col-lg-1 { width: 8.33333333% } .col-lg-pull-12 { right: 100% } .col-lg-pull-11 { right: 91.66666667% } .col-lg-pull-10 { right: 83.33333333% } .col-lg-pull-9 { right: 75% } .col-lg-pull-8 { right: 66.66666667% } .col-lg-pull-7 { right: 58.33333333% } .col-lg-pull-6 { right: 50% } .col-lg-pull-5 { right: 41.66666667% } .col-lg-pull-4 { right: 33.33333333% } .col-lg-pull-3 { right: 25% } .col-lg-pull-2 { right: 16.66666667% } .col-lg-pull-1 { right: 8.33333333% } .col-lg-pull-0 { right: auto } .col-lg-push-12 { left: 100% } .col-lg-push-11 { left: 91.66666667% } .col-lg-push-10 { left: 83.33333333% } .col-lg-push-9 { left: 75% } .col-lg-push-8 { left: 66.66666667% } .col-lg-push-7 { left: 58.33333333% } .col-lg-push-6 { left: 50% } .col-lg-push-5 { left: 41.66666667% } .col-lg-push-4 { left: 33.33333333% } .col-lg-push-3 { left: 25% } .col-lg-push-2 { left: 16.66666667% } .col-lg-push-1 { left: 8.33333333% } .col-lg-push-0 { left: auto } .col-lg-offset-12 { margin-left: 100% } .col-lg-offset-11 { margin-left: 91.66666667% } .col-lg-offset-10 { margin-left: 83.33333333% } .col-lg-offset-9 { margin-left: 75% } .col-lg-offset-8 { margin-left: 66.66666667% } .col-lg-offset-7 { margin-left: 58.33333333% } .col-lg-offset-6 { margin-left: 50% } .col-lg-offset-5 { margin-left: 41.66666667% } .col-lg-offset-4 { margin-left: 33.33333333% } .col-lg-offset-3 { margin-left: 25% } .col-lg-offset-2 { margin-left: 16.66666667% } .col-lg-offset-1 { margin-left: 8.33333333% } .col-lg-offset-0 { margin-left: 0 } }
/* common header footer */
.vhcenter {display: flex;align-items: center;justify-content: center;text-align: center;}
.vcenter {display: flex;align-items: center;}
.hcenter {display: flex;justify-content: center;text-align: center;}
.function_icon {margin-top: 22px; margin-bottom: 3px;}
.font_size_block1{ width:55%;}
.nav-bar {height: 40px;}
.nav-bar-element {min-height: 50px;margin: 0px; padding: 10px 10px;color: #636363;font-size: 1.143rem;line-height: 1.286rem;font-weight: 200;}
#search_form {display:none;position: fixed;top: 0;right: calc(50% - 170px);width: 340px;z-index: 100;margin:5px;}
.footer{ width:100%; height:auto; background:#BCE8F2;}
.footer_cont{ width:1000px; height:80px; margin:0 auto; color:#3D4D50; padding:15px 15px; font-size:1rem;line-height: 1.286rem;text-align: left;}
.footer_cont-A {float: left;width: 200px;height:50px;}
.footer_cont-B {float: left;width: 450px;height:50px;margin-top: 8px;}
.footer_cont-B div {margin-bottom: 5px;}
.footer_cont-C {float: right;width: 100px;height:50px;display: flex;justify-content: flex-end;align-items: center;text-align: center;}
.footer_cont a{ color:#3D4D50;text-decoration: underline;}
.footer_cont1{ color:#3D4D50; font-size:1.4rem;line-height: 1.286rem;}
.footer_cont1 a{ color:#3D4D50;}
.bord_b{border:none;line-height:2.857rem; text-indent:5%;}	
.bord_ba{border:none;line-height:7.143rem; text-indent:5%;}
.bord_bc{height:50px;}
.footer-icon-img {width: 20px;margin: 0 10px;}
html{font-size: 16px;line-height: 16px;height: 100%;}
#body{font-size: 100%;line-height: 1.286rem;height: 100%;}
/* species */
.species-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin-top: 65px;}
.species-text {min-height: 60px;max-width:708px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;margin: 0 auto;}
.species-nav-I {min-height: 56px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
.species-nav-I-desktop {display: flex;margin:10px 0;}
.species-nav-I-mobile-1 {display: none;margin:10px 0 0 0;}
.species-nav-I-mobile-2 {display: none;margin:0 0 10px 0;}
@media (max-width: 992px){
    .species-nav-I-desktop {display: none;}
    .species-nav-I-mobile-1 {display: flex;}
    .species-nav-I-mobile-2 {display: flex;}
}
.species-nav-I a {color:inherit;}
.species-nav-II {margin:0 16px;}
.species-nav-II:hover {color: #13635f;cursor: pointer;}
.species-nav-II-active a{margin:0 16px;padding: 16px 24px;background-color: #F0F5F7;border-radius: 30px;color: #13635f;display: block;}
.species-images-I {padding:0;min-height:300px;}
.species-images-I #leftSlides {cursor: pointer;font-weight: bold;font-size: 1.286rem;line-height: 1.286rem;}
.species-images-I #rightSlides {cursor: pointer;font-weight: bold;font-size: 1.286rem;line-height: 1.286rem;}
.species-images-II {margin: 0;padding: 0;white-space: nowrap;overflow-x: auto;}
.species-images-II::-webkit-scrollbar {display: none;}
.species-images-III {display: inline-table;}
.species-images-IV {height:200px;margin:5px;overflow: hidden;}
.species-images-V {width: 150px;height:150px;border-radius: 200px;overflow: hidden;margin: 25px;}     
.species-images-V img {width: 150px;transition: transform .5s ease;border-radius: 200px;}
.species-images-IV:hover img {/*transform: scale(1.3);*/cursor: pointer;}
.species-images-V-active {width: 200px;height:200px;border-radius: 200px;overflow: hidden;border: 2px solid #48BB7D;margin: 0 0;}
.species-images-V-active img {width: 190px;border-radius: 200px;padding-top: 3px;}
.species-desc-I {background-color: #ebf9ff;}
.species-desc-I .species-desc-II {padding:0;height:226px;}
.species-desc-I .species-desc-II .species-desc-III {height:128px;width:100%;margin: 50px 0;border-right: 2px solid #DBDBDB;}
.species-desc-I .species-desc-II .species-desc-III-1 {border-left: 2px solid #DBDBDB;}
.species-desc-I .species-desc-II .species-desc-III .species-desc-IV-1 {font-size: 1.3rem;font-weight: 700;line-height:2.857rem;color: #333333;margin: 0 0 5px 0;display: block;}
.species-desc-I .species-desc-II .species-desc-III .species-desc-IV-2 {font-size: 1.143rem;line-height: 1.286rem;color: #13635f;}
@media (max-width: 767px) {
    .col-sm-1.species-images-I {width: 8.33333333%;float: left;}
    .col-sm-10.species-images-I {width: 83.3333333%;float: left;}
    .species-desc-I .species-desc-II {height:150px;}
    .species-desc-I .species-desc-II .species-desc-III-2 {border-left: 2px solid #DBDBDB;}
}
.species-link-I-1 {min-height:375px;background-color: #3E79C9;background-attachment: scroll;background-position: center;background-repeat: no-repeat;background-size: cover;background-image:url(/EcoDMS/images/Valuable_Species/biodiversity-database-bg.jpg);}
.species-link-I-2 {min-height:375px;background-color: #44612E;background-attachment: scroll;background-position: center;background-repeat: no-repeat;background-size: cover;background-image:url(/EcoDMS/images/Valuable_Species/download-species-bg.jpg);}
.species-link-II-1 {color: #FFFFFF;font-size: 1.429rem;line-height:3.571rem;font-weight: bold;margin: 0 0 40px 0;}
.species-link-II-2 {color: #13635f;font-size: 1.286rem;line-height:3.571rem;font-weight: bold;padding:16px 40px;background-color: #FFFFFF;border-radius:50px;}
.species-link-II-2 a {color: #13635f;}
.species-link-II-2:hover {cursor: pointer;}
/* search */
.search_name {width: auto;}
.selcet_a {width:360px;}
.radioa_d {margin:0 25px;}
.radioa_d i {border:3px solid #7B8481;margin-top: 5px;}
.radioa_d input:checked+i{border-color:#13635f;}
.radioa_d input+i:after{background-color:#13635f;}
.search-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin-top: 65px;}
.search-text {min-height: 60px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
.search-text span {max-width:708px;}
.search-select-category-I {height: 100px;}
.search-select-category-II {position: relative;top:30px;left:0px;}
.search-select-category-III {height:145px;}
.search-select-category-IV-1 {width:145px;height:145px;border-radius:100px;float: left;margin: 0 100px 0 0;display: block;}
.search-select-category-IV-2 {width:145px;height:145px;border-radius:100px;float: left;margin: 0 0 0 100px;display: block;}
.search-select-category-IV-1:hover {border:2px solid #48BB7D;}
.search-select-category-IV-2:hover {border:2px solid #48BB7D;}
.search-select-category-IV-active {border:2px solid #48BB7D;}
.search-select-category-V-1 {background:url('/EcoDMS/images/search/ic-category-animal.png') no-repeat center,linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('/EcoDMS/images/search/search-category-animals.jpg') no-repeat center;
                             background-size: 64px 64px,135px 135px,135px 135px;width:130px;height:130px;border-radius:100px;margin: 5px 0;display: block;}
.search-select-category-V-2 {background:url('/EcoDMS/images/search/ic-category-plants.png') no-repeat center,linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('/EcoDMS/images/search/search-category-plants.png') no-repeat center;
                             background-size: 64px 64px,135px 135px,135px 135px;width:130px;height:130px;border-radius:100px;margin: 5px 0;display: block;}
.search-select-category-VI {height: 50px;color: #333333;font-size: 1.5rem;line-height:1.786rem;font-weight:bold;}
.search-select-category-VII-1 {width:145px;height: 50px;float: left;margin: 0 100px 0 0;}
.search-select-category-VII-2 {width:145px;height: 50px;float: left;margin: 0 0 0 100px;}
@media (max-width: 992px){
    .search-select-category-IV-1 {margin: 0 50px 0 0;}
    .search-select-category-IV-2 {margin: 0 0 0 50px;}
    .search-select-category-VII-1 {margin: 0 50px 0 0;}
    .search-select-category-VII-2 {margin: 0 0 0 50px;}
}
@media (max-width: 500px){
    .search-select-category-IV-1 {margin: 0 10px 0 0;}
    .search-select-category-IV-2 {margin: 0 0 0 10px;}
    .search-select-category-VII-1 {margin: 0 10px 0 0;}
    .search-select-category-VII-2 {margin: 0 0 0 10px;}
}
.search-form-green {background-color: #F0F5F7;}
.search-form {margin: 150px auto 0px auto;}
.search-select-by {background-color: #FFFFFF;}
.search-select-by .bord_bb {border:none;}
.search-select-filter {background-color: #FFFFFF;}
.search-select-btn {height:100px;background-color: #FFFFFF;}
.search-select-btn .bord_bb {border:none;}
.search-remarks {margin:20px 0;padding:0 20px;color: #333333;font-size: 1rem;line-height:1.429rem;font-weight: normal;}
.button_pic {background:#13635f;width:134px;height:52px;border-radius:26px;color: #FFFFFF;font-size: 1.286rem;line-height:1.786rem;font-weight: bold;}
/* connect */
.connect-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin-top: 65px;}
.connect-text {min-height: 60px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;padding:0 20px;}
.connect-text span {max-width:708px;}
.connect-icon {min-height: 150px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
.connect-icon-img {width: 43.11px;margin: 0 13px;}
.connect-find-I-1 {min-height: 500px;background-color: #13635f;background-attachment: scroll;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url('/EcoDMS/images/overview/pic1.png');}
.connect-find-I-2 {min-height: 500px;background-color: #EFF4F4;}
.connect-find-II {padding-left: 20px;}
.connect-find-III-1 {color: #333333;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;padding:8px;}
.connect-find-III-2 {color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;padding:8px;min-width:250px;}
.connect-find-III-3 {color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;padding:8px;text-align: right;}
.connect-find-III-4 {color: #13635f;}
.connect-linkbox-II-1 {background-color: #13635f;border-radius: 10px;margin-bottom: 20px;}
.connect-linkbox-II-2 {background-color: #155B79;border-radius: 10px;margin-bottom: 20px;}
.connect-linkbox-II-3 {background-color: #133f63;border-radius: 10px;margin-bottom: 50px;}
.connect-linkbox-II-1 a, .connect-linkbox-II-2 a, .connect-linkbox-II-3 a {color:#ffffff;/*text-decoration:underline;*/}
.connect-linkbox-II-1 a:hover, .connect-linkbox-II-2 a:hover, .connect-linkbox-II-3 a:hover {text-decoration:underline;}
.connect-linkbox-III-1{color: #FFFFFF;font-size: 1.429rem;line-height:1.714rem;font-weight: 600;/*bold;*/min-height: 100px;border-bottom: 1px solid #FFFFFF;padding:20px 20px 0 32px;}
.connect-linkbox-III-1 h3{color: #FFFFFF;font-size: 1.429rem;line-height:1.714rem;font-weight: 600;text-align: left;margin: 0;padding: 0;}
.connect-linkbox-III-2 {color: #FFFFFF;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;min-height: 200px;padding:0 20px 0 10px;}
.connect-linkbox-III-2 ul li {list-style-type: disc;}
.connect-linkbox-IV {width: 30px;margin-bottom:10px;}
@media (max-width: 991px){
    .connect-linkbox-III-2 {min-height: 420px;}
}
@media (max-width: 767px){
    .connect-linkbox-III-2 {min-height: 200px;}
}
/* Story */
.story-recent { background: url(/EcoDMS/images/background/story-bg-dark.png) no-repeat scroll center; background-size: cover; backdrop-filter: brightness(.5); height: 342px;padding:0 53px; }
.story-wave-light { background: url(/EcoDMS/images/background/story-wave-bg.png) no-repeat scroll top; background-size: cover; height: 882px; }
.story-drainage { /*height: 373px;*/padding:0 53px 30px; }
.story-reference-1 { background: url(/EcoDMS/images/background/content-photo1.jpg) no-repeat scroll top; background-size: cover; height: 509px; }
.story-reference-2 { height: 509px;padding:0 53px; }
.story-wave-green { background: url(/EcoDMS/images/background/story-green-wave-bg.png) no-repeat scroll left bottom; background-size: cover; height: 593px;overflow: hidden;width: 100%;}
.story-facilitate-1 { height: 509px;padding:0 53px; }
.story-facilitate-2 { background: url(/EcoDMS/images/background/content-photo2.jpg) no-repeat scroll top; background-size: cover; height: 509px; }
.story-wave-white { background: url(/EcoDMS/images/background/story-white-wave-bg.png) repeat-x scroll top; background-size: cover; height: 509px; position: relative; top: -150px; }
.story-new { height: 400px; }
.story-new span { z-index: 100;}
@media (max-width: 767px) {
    .story-wave-light { height:1391px;}
    .story-wave-green { height:1018px;}
    .story-wave-white { display:none; }
}
.story-recent-title {min-height: 80px;color: #FFFFFF;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin-top: 65px;}
.story-recent-text {min-height: 60px;max-width: 708px;color: #FFFFFF;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;margin: 0 auto;}
.story-drainage-title {min-height: 80px;color: #13635f;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;margin-top: 96px;}
.story-drainage-text {min-height: 60px;max-width: 764px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;margin: 0 auto;margin-bottom: 50px;}
.story-reference-2-image {margin-top: 129px;}
.story-reference-2-title {max-width: 557px;color: #13635f;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;margin-top: 10px;}
.story-reference-2-text {max-width: 557px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;margin-top: 10px;}
.story-facilitate-1-image {margin-top: 129px;}
.story-facilitate-1-title {max-width: 484px;color: #F6FFC3;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;margin-top: 10px;}
.story-facilitate-1-text {max-width: 484px;color: #FFFFFF;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;margin-top: 10px;}
.story-new-image {margin-top: 70px;}
.story-new-title {color: #333333;font-size: 2rem;line-height:2.286rem;font-weight: bolder;margin-top: 40px;}
.story-new-subtitle {color: #13635f;font-size: 1.143rem;line-height:1.714rem;font-weight: bold;margin-top: 10px;}
.story-new-subtitle span {max-width: 708px;}
/* Home */
.home-banner-I {height:calc(100% - 92px);position:absolute;z-index:101;background: linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(99,135,157,82%) 100%), url(/EcoDMS/images/homepage/cover-mountain-repear-unit.png) repeat-x bottom;}
.home-banner-II {height:100%;}
.home-banner-III {height:100%;padding: 0 15px;}
.home-banner-IV-1 {color:#FFFFFF;font-size:4rem;line-height:4.2rem;font-weight:bolder;}
.home-banner-IV-2 {color:#99F7BA;font-size:4rem;line-height:4.2rem;font-weight:bold;}
.home-banner-IV-3 {color:#FFFFFF;font-size:2.572rem;line-height:3rem;font-weight:bold;}
.flickerplate {height:calc(100% - 92px);}
.flickerplate .dot-navigation {top:calc(50% + 120px);bottom:initial;z-index: 102;}
.flickerplate .dot-navigation .dot {width: 9px;height: 9px;border:none;background-color:rgba(255,255,255,.53);}
.flickerplate .dot-navigation .dot.active  {background-color:rgba(255,255,255,1);}
.flickerplate ul.flicks>li {filter: brightness(0.8);}
@media (max-width: 991px) {
    .home-banner-I {height:calc(100% - 67px);}
    .flickerplate {height:calc(100% - 67px);}
}
.home-species {background-color: #F0F5F7;padding-top: 30px;padding-bottom: 30px;}
.home-species-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin: 40px 0 30px 0;}
.home-species-cat-I {margin-bottom: 100px;}
.home-species-cat-I .col-6{padding-bottom: 20px;}
.home-species-cat-I .home-species-cat{display: flex;align-items: center;width: 100%;}
@media (max-width: 767px) {
    .home-species-cat-I {margin-bottom: 0px;}
    .home-species-cat-6 {margin-bottom: 50px;}
}
.home-species-cat-1 {background: url(/EcoDMS/images/homepage/species_number/bubble-aquatic-Invertebrates.png) no-repeat center; background-size: contain; height: 207px;padding-top: 20px;padding-bottom: 20px; }
.home-species-cat-2 {background: url(/EcoDMS/images/homepage/species_number/bubble-dragonflies.png) no-repeat center; background-size: contain; height: 207px;padding-top: 20px;padding-bottom: 20px; }
.home-species-cat-3 {background: url(/EcoDMS/images/homepage/species_number/bubble-reptile.png) no-repeat center; background-size: contain; height: 207px;padding-top: 20px;padding-bottom: 20px; }
.home-species-cat-4 {background: url(/EcoDMS/images/homepage/species_number/bubble-fish.png) no-repeat center; background-size: contain; height: 207px;padding-top: 20px;padding-bottom: 20px; }
.home-species-cat-5 {background: url(/EcoDMS/images/homepage/species_number/bubble-bird.png) no-repeat center; background-size: contain; height: 207px;padding-top: 20px;padding-bottom: 20px; }
.home-species-cat-6 {background: url(/EcoDMS/images/homepage/species_number/bubble-plant.png) no-repeat center; background-size: contain; height: 207px;padding-top: 20px;padding-bottom: 20px; }
@media (max-width: 767px) {
    .col-6 {width:50%;float:left;}
}
@media (max-width: 500px) {
    .col-6 {width:100%;float:left;}
}
.home-species-cat-left {float:left;text-align:right;padding:0 5px;width:50%;}
.home-species-cat-right {float:left;text-align:left;padding:0 5px;width:50%;}
/*.home-species-cat-text-A {color: #13635f;font-size: 6.286rem;line-height:7.214rem;font-weight: bolder;}*/
.home-species-cat-text-A {color: #13635f;font-size: 4rem;line-height:7.214rem;font-weight: bolder;float: right;}
.home-species-cat-text-B {color: #333333;font-size: 1rem;line-height:1.429rem;font-weight: normal;opacity: 0.64;}
.home-species-cat-text-C {color: #333333;font-size: 1.4rem;line-height:1.786rem;font-weight: bold;}
.home-discover {background: linear-gradient(253deg, rgb(255 255 255 / 90%) 0%, #a6ddff 100%), url(/EcoDMS/images/homepage/discover-ocean-repeat-unit.png) repeat;/*height:670px;*/}
.home-discover-1 {height:620px;justify-content: flex-end;}
.home-discover-1 div {max-width:300px;}
.home-discover-2 {background: url(/EcoDMS/images/homepage/hongkong-map.png) no-repeat scroll left top; background-size: auto 750px;height:750px;position: relative;bottom: 80px;}
@media (max-width: 1199px) {
    .home-discover-1 {justify-content: center;}
    .home-discover-1 div {max-width:500px;}
    .home-discover-2 {margin-left:calc(8% - 20px);}
    .home-discover {height: 1260px;}
}
@media (max-width: 860px) {
    .home-discover-2 {display:none;}
    .home-discover {height: 600px;}
}
.home-discover-text-A {color: #3b3b3b;font-size: 2.572rem;line-height:3.571rem;font-weight: bold;display: block;}
.home-discover-text-B {color: #13635f;font-size: 3.857rem;line-height:4rem;font-weight: bolder;display: block;}
.home-discover-text-C {color: #083444;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;display: block;margin: 0;}
.home-discover-btn {color: #13635f;font-size: 1.286rem;line-height:7.214rem;font-weight: normal;padding:16px 40px;border-radius: 28px !important;background:#FFFFFF;}
.home-discover-btn:hover {color: #FFFFFF;background:#083444;}
.home-discover-location {color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;background:#F6FFC3;padding: 16px;border-radius: 28px;white-space: nowrap;text-align:center;position: relative;margin-bottom: 15px;}
[class*='home-discover-arrow-'] {width: 25px;height: 25px;background:#F6FFC3;transform: rotate(45deg);}
[class*='home-discover-point-'] {width: 11px;height: 11px;background:#F6FFC3;border-radius:5.5px;box-shadow: 0 0 0 5px rgba(246, 255, 195, .3);}
.home-discover-location:hover {color: #333333;background:#FFFFFF;}
.home-discover-arrow-1 {position:absolute;top:134px;left:558px;}.home-discover-point-1 {position:absolute;top:176px;left:565px;}.home-discover-box-1 {min-width:218px;position:absolute;top:93px;left:454px;}
.home-discover-arrow-2 {position:absolute;top:280px;left:243px;}.home-discover-point-2 {position:absolute;top:254px;left:250px;}.home-discover-box-2 {min-width:250px;position:absolute;top:285px;left:126px;}
.home-discover-arrow-3 {position:absolute;top:314px;left:682px;}.home-discover-point-3 {position:absolute;top:356px;left:689px;}.home-discover-box-3 {min-width:204px;position:absolute;top:273px;left:584px;}
.home-discover-arrow-4 {position:absolute;top:178px;left:223px;}.home-discover-point-4 {position:absolute;top:220px;left:230px;}.home-discover-box-4 {min-width:180px;position:absolute;top:136px;left:144px;}
.home-discover-arrow-5 {position:absolute;top:448px;left:588px;}.home-discover-point-5 {position:absolute;top:420px;left:595px;}.home-discover-box-5 {min-width:191px;position:absolute;top:454px;left:513px;}
.home-discover-marker{display: inline-block;position:absolute;bottom:448px;left:588px;z-index: 0;}
.home-discover-box{display: none;width: auto;margin: 0 auto;position: absolute;left: 50%;bottom: 100%;transform: translate(-50%, 0);z-index: 1;}
.home-discover-box a{display: inline-block;}
/*.home-discover-arrow{display: block;margin: 0 auto;position: relative;top: -15px;width: 25px;height: 25px;background:#F6FFC3;transform: rotate(45deg);opacity: 0;}*/
.home-discover-box .home-discover-location:after{content:'';display: block;margin: 0 auto;position: absolute;left: calc((100% - 25px) / 2);bottom: -5px;width: 25px;height: 25px;background: #F6FFC3;transform: rotate(45deg);z-index: -1;}
.home-discover-arrow{dispaly:none;}
.home-discover-point{display: block;margin: 0 auto;width: 11px;height: 11px;background:#F6FFC3;border-radius:5.5px;box-shadow: 0 0 0 5px rgba(246, 255, 195, .3);}
.home-discover-point a{display: block;width: 100%;height: 100%;}
.home-discover-marker.on{z-index: 2;}
.home-discover-marker.on .home-discover-box{display: block;}
.home-discover-marker.on .home-discover-arrow{opacity: 1;}
.home-discover-marker.river_1{bottom:500px;left:340px;}
.home-discover-marker.river_2{bottom:155px;left:570px;}
.home-discover-marker.river_3{bottom:450px;left:565px;}
.home-discover-marker.river_4{bottom:375px;left:660px;}
.home-discover-marker.river_5{bottom:540px;left:330px;}
.home-discover-marker.river_6{bottom:535px;left:360px;}
.home-discover-marker.river_7{bottom:545px;left:530px;}
.home-discover-marker.river_8{bottom:675px;left:410px;}
.home-discover-marker.river_9{bottom:612px;left:500px;}
.home-discover-marker.river_10{bottom:155px;left:85px;}
.home-discover-marker.river_11{bottom:620px;left:290px;}
.home-discover-marker.river_12{bottom:590px;left:465px;}
.home-discover-marker.river_13{bottom:195px;left:230px;}
.home-discover-marker.river_14{bottom:140px;left:210px;}
.home-discover-marker.river_15{bottom:700px;left:495px;}
.home-discover-marker.river_16{bottom:440px;left:700px;}
.home-discover-marker.river_17{bottom:520px;left:440px;}
.home-discover-marker.river_18{bottom:175px;left:125px;}
.home-discover-marker.river_19{bottom:110px;left:125px;}
.home-discover-marker.river_20{bottom:175px;left:215px;}
.home-discover-marker.river_21{bottom:190px;left:155px;}
.home-discover-marker.river_22{bottom:550px;left:275px;}
.home-discover-marker.river_23{bottom:486px;left:244px;}
.home-discover-marker.river_24{bottom:324px;left:578px;}
.home-discover-marker.river_25{bottom:286px;left:632px;}
.home-discover-marker.river_26{bottom:315px;left:620px;}

.home-valuable-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin: 40px 0 30px 0;text-align: center;}
.home-valuable-I {min-height: 250px;}
.home-valuable-image {width:180px;border-radius:90px;overflow:hidden;margin: 0 auto;}
.home-valuable-front {background:url(/EcoDMS/images/homepage/ic-search.png) no-repeat center; background-size:35px 35px;width:180px;height:180px;position:absolute;z-index:101;}
.home-valuable-back-1 {background:url(/EcoDMS/images/homepage/valuable_species/freshwater-fish.jpeg) no-repeat center;}
.home-valuable-back-2 {background:url(/EcoDMS/images/homepage/valuable_species/birds.jpg) no-repeat center;}
.home-valuable-back-3 {background:url(/EcoDMS/images/homepage/valuable_species/dragonflies.jpeg) no-repeat center;}
.home-valuable-back-4 {background:url(/EcoDMS/images/homepage/valuable_species/plant.jpg) no-repeat center;}
.home-valuable-back-5 {background:url(/EcoDMS/images/homepage/valuable_species/amphibians.jpeg) no-repeat center;}
.home-valuable-back-6 {background:url(/EcoDMS/images/homepage/valuable_species/reptiles.jpeg) no-repeat center;}
.home-valuable-back-7 {background:url(/EcoDMS/images/homepage/valuable_species/aquatic-invertebrates.jpg) no-repeat center;}
.home-valuable-back {background-size:180px 180px;width:180px;height:180px;transition:transform .3s ease;}
.home-valuable-text {color: #333333;font-size: 1.5rem;line-height:1.786rem;font-weight: 500;margin:20px 0;}
.home-valuable-row {margin-bottom: 50px;}
.col-sm-3half {width: 12.5%;float:left;}
@media (max-width: 767px){
    .col-sm-3half {display:none;}
}
.home-ecodms {background: linear-gradient(179deg, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 1) 100%), url(/EcoDMS/images/homepage/why-ecodms-come-bg.png) no-repeat scroll center;background-size: cover;/*height:612px;*/}
.home-ecodms-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin: 40px 0 30px 0;}
.home-ecodms-subtitle {min-height: 60px;color: #13635f;font-size: 1.143rem;line-height:1.714rem;font-weight: bold;}
.home-ecodms-text {min-height: 60px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
.home-ecodms-text span {max-width:895px;margin: 20px 0;}
.home-curve {background: linear-gradient(181deg, rgba(240, 245, 247, 1) 0%, rgba(240, 245, 247, 0) 100%), url(/EcoDMS/images/homepage/wave-pattern-repeart-unit.png) repeat-x;height:97px;position:absolute;}
.home-search {background:url(/EcoDMS/images/homepage/species-search-section-bg-2.png) no-repeat scroll center;background-size: cover;height:471px;margin-top: 1px;}
.home-search-image {margin: 170px 0 5px 0;}
.home-search-text {min-height: 60px;color: #FFFFFF;font-size: 2rem;line-height:2.286rem;font-weight: bold;margin:5px 0 40px 0;}
.animation { vertical-align: sub; display: inline-block; margin-top: -.1em; margin-bottom: -.1em; height: 1.2em; }
.animation-window { position: relative; height: 100%; overflow: hidden; background-color: transparent; color: #13635f;color: #66eba4;border-bottom: 1px solid #fff;}
.animation-gray-list { position: absolute; color: lightgray; display: none; }
.animation ul { position: relative; list-style: none; top: 0; padding: 0; margin: 0; transition: top 300ms; }
.animation li { margin: 0 .2em; text-align: center; }
.home-search-btn {color: #13635f;font-size: 1.286rem;line-height:1.429rem;font-weight: normal;padding:16px 40px;border-radius: 28px;background:#FFFFFF;}
.home-search-btn:hover {color: #FFFFFF;background:#083444;}
/* River */
.txtslide:hover {background-color: #28979B;}
.txtslide {color: #13635F;}
.txt21{font-size: 1.285rem;line-height: 1.4rem;}
.txt22 {background-color: #D8ECED;font-size: 1.285rem;line-height: 48px;}
.bfc {background-color: #D8ECED;}
.greenbg {background:linear-gradient(270deg, rgba(152, 231, 250, .9) 0%, rgba(116, 198, 248, .9) 100%), url(/EcoDMS/images/homepage/discover-ocean-repeat-unit.png) repeat;padding-bottom: 100px;}
@media screen and (max-width: 992px) {
    #discover {background:linear-gradient(270deg, rgba(152, 231, 250, .9) 0%, rgba(116, 198, 248, .9) 100%), url(/EcoDMS/images/homepage/discover-ocean-repeat-unit.png) repeat;}
    #ngau {top:30px;}
}
.river-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin-top: 65px;}
.river-text {min-height: 60px;max-width:708px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;padding:0 20px;margin: 0 auto;}
.river-text-a a span {color:#13635f;}
.river-text-a a span:hover {color:#28979B;text-decoration: underline;}
/* River - Site */
.site-title {min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin-top: 65px;}
.site-text {min-height: 60px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
.site-text span {max-width:708px;}
.site-nav-I {min-height: 56px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
.site-nav-I-desktop {display: flex;margin:10px 0;}
.site-nav-I a {color:inherit;}
.site-nav-II {margin:0 16px;}
.site-nav-II:hover {color: #13635f;cursor: pointer;}
.site-nav-II-active {margin:0 16px;padding: 16px 24px;background-color: #F0F5F7;border-radius: 30px;color: #13635f;}
.whiteborder {width:100%;max-width:none;}
.rdbg {background:none;}
.rdp {color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;width:100%;max-width:none;}
.River_introduction {background-color:transparent;}
.River_introduction>h2 {color: #28979B;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;text-align: left;}
.River_introduction>p {color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;width:100%;max-width:none;}
.show {max-width: 800px;}
.rdbottom {background-color:#F0F5F7;}
.rdbottom>h2 {color: #28979B;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;text-align: center;margin: 0 auto 50px auto;}
.rdbottom>p {width: 100%;max-width: 780px;margin: 0 auto;text-align: left;}
.site-element-I {border-radius: 300px;padding:5px;}
.site-element-I:hover {border:2px solid #13635f;}
.site-element-II {border-radius: 300px;overflow: hidden;}
.six {padding: 20px;}
.bottom-box {background:none;text-align: left;}
.bottom-box > h2 {color: #28979B;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;}
.bottom-box > p {color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;width:100%;max-width:none;}
/* River - Overveiw */
.river-cover {height: 226px;background-repeat: no-repeat;background-size: cover;background-position: center;background-attachment: scroll;}
.river-cover-title { min-height: 80px; color: #FFFFFF; font-size: 2.572rem; line-height: 3rem; font-weight: bolder; margin-top: 35px; }
.river-cover-text { min-height: 60px;max-width: 802px; color: #FFFFFF; font-size: 1.143rem; line-height: 1.4rem; font-weight: normal; padding: 0 20px;margin: 0 auto;display: block; }
.river-cover-text a,.river-cover-text a *{color: #fff !important;}
.river-nav-I {min-height: 56px;color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
.river-nav-I-desktop {display: flex;margin:30px 0 0 10px;}
.river-nav-I-mobile-1 {display: none;margin:30px 0 0 0;}
.river-nav-I-mobile-2 {display: none;margin:0 0 10px 0;}
@media (max-width: 992px){
    .river-nav-I-desktop {display: none;}
    .river-nav-I-mobile-1 {display: flex;}
    .river-nav-I-mobile-2 {display: flex;}
}
.river-nav-I a {color:inherit;}
.river-nav-II {margin:0 16px;}
.river-nav-II:hover {color: #13635f;cursor: pointer;}
.river-nav-II-active {margin:0 16px;padding: 16px 24px;background-color: #d6d6d6;border-radius: 30px;color: #13635f;}
.top_bg {background-image:none;}
.sh h2.mar_top {color: #28979B;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;}
.overview-title {color: #28979B;font-size: 1.5rem;line-height:1.786rem;font-weight: bold;}
.overview-text {color: #333333;font-size: 1.143rem;line-height:1.714rem;font-weight: normal;}
/* River - River Tour */
.texta {text-align:left;}
.texta .b {color: #28979B;}
.texta .green_ca {color: #28979B;}
.green_ca {color: #13635f;}
/* River - A */
.green_ca.font22 {color: #28979B;font-size: 1.572rem;line-height:2rem;font-weight: bold;}
/* River - Species */
.green6 {color:#333333;}
.green_ca.font28.green6 {color: #28979B;font-size: 2rem;line-height:2.286rem;font-weight: bold;}
.species_top_bg {background-image:none;}
#faunal_cont i {color: #28979B;font-weight: bold;}
/* River - Water */
.cen {background-image:none;}
.bancon {padding-top: 20px;width: 80%;}
.maptext {border: none;}
.txttop p {color: #333333;text-shadow: none;margin-left:0px;margin-bottom: 40px;}
.txtbotm p {color: #333333;text-shadow: none;}
.chartphoto > h2 {color: #333333; font-size: 1.6rem; line-height: 1.8rem; font-weight: bold;}
.chartphoto > #chartname {color: #13635f; font-size: 1.5rem; line-height: 1.786rem; font-weight: bold;}
.chartphoto > #notep {color: #333333; font-size: 1.2rem; line-height: 1.4rem; font-weight: normal;}
.water-chart {background-color: #F0F5F7;}
.water-chart .dtb{text-align: left;}
.water-chart .dtb.fir {width:25%;padding:20px;color: #13635f; font-size: 1.5rem; line-height: 1.7rem; font-weight: bold;}
.chartl,.chartr {width:100%;}
/* Notices */
.top_bg_icona {background: url(/EcoDMS/images/wave-pattern-white-repeart-unit.png) repeat-x;background-size: contain;height: 150px;margin-bottom: 30px;padding: 50px 0;position: relative;z-index: 1;}
.notices-title {color: #28979B;font-size: 2.715rem;line-height:3.214rem;font-weight: bolder;}
/* List */
.list-title {color: #333333;font-size: 2.715rem;line-height:3.214rem;font-weight: bolder;}

/* River - Tour: Text margin */
.texta.margin10{margin-top: 15px;margin-bottom: 15px;}

.table_a a{display: block;word-break: keep-all;white-space: nowrap;}
.species-desc-III-1 .species-desc-IV-2{font-style: italic;}
.search_table{width: 100%;}

/*River Text*/
.txt11{font-size: 1rem;line-height: 1.2rem;}
.fon17{font-size: 1.214rem;line-height: 1.8rem;color: #333;}
/*River Heading*/
.txt12{font-size: 1rem;line-height: 1.2rem;}
.font16pxz{font-size:1.6rem;line-height: 1.8rem;}
.font16{font-size:1.143rem;line-height: 1.4rem;}
.font22{font-size:2.2rem;line-height: 2.4rem;}
/*Search*/
.font18{font-size:1.2rem;line-height: 1.4rem;}
.font17{font-size:1.7rem;line-height: 1.9rem;}
.font20{font-size:2rem;line-height: 2.2rem;}
.font28{font-size:2.8rem;line-height: 3rem;}
.font14{font-size:1.4rem;line-height: 1.6rem;}
/*Header language */
.font12{font-size:1rem;line-height: 1.2rem;}
.list > ul > li > a {font-size: 1.8rem;line-height: 2rem;}
/*Aerial_Tour*/
.mar_top1 .content-body .font17{font-size: 1.2rem;line-height: 1.4rem;}
.mar_top1 .map_block>div:last-child{display: none;}


.mmain1 > h2{font-size:1.6rem;line-height: 1.7rem;margin: 0;}
.txt2c{line-height: 1.714rem;}
.riverlists{width: 100%;}
@media (min-width: 1400px){.riverlists{ max-width: 1320px;}}
@media (min-width: 1200px){.riverlists{ max-width: 1140px;}}
@media (min-width: 992px){.riverlists{ max-width: 960px;}}
.riverlist table{white-space: break-spaces;}
.riverlist td,
.riverlists td{position: relative;white-space: break-spaces;vertical-align: top;width: 33%;padding: 6px 0;}
.riverlist img,
.riverlists img{position: absolute;left: 0;top: 8px;}
.font_l .riverlist img,
.font_l .riverlists img{top: 10px;}
.riverlist .dtb{padding: 6px 0;position: relative;vertical-align: top;}
.riverlists .dtb{width: 33%;padding: 6px 0;position: relative;vertical-align: top;}
.riverlists .dtb img{top:14px;}
.riverlist .dtb img{top:18px;}
.riverlists .dtb a{font-size: 1.4rem;line-height: 1.9rem;text-align: left;display: block;padding: 1px 10px 1px 25px;}
.riverlist .dtb a{font-size: 1.8rem;line-height: 2.4rem;text-align: left;display: block;padding: 1px 10px 1px 25px;}
@media screen and (max-width: 1042px){
    .riverlists .dt{max-width: 370px;margin: 0 auto;padding: 6px 10%;}
    .riverlist .dt{padding: 6px 10%;}
    .riverlists .dtb{display: block;width: 100%;float: none;}
}
@media screen and (max-width: 768px){
    .riverlist .dtb{display: block;width: 100%;float: none;}
}
.riverlist.showList{background-color: #F0F5F7;border-radius: 15px;}
.riverlist.showList .dtb a{font-size: 1.4rem;line-height: 1.9rem;}
@media screen and (max-width: 992px){
    .riverlist{background-color: #F0F5F7;border-radius: 15px;}
}
.sixp{font-size: 1.429rem;;line-height: 1.7rem;}
/* Search table list item */
.table_top_nr{font-size:1.1rem; /*1.5rem;*/line-height: 1.7rem;}
.radioa_d .font18{line-height: 2.4rem;}

#disfirstimg{display: none;}
.mmain1 > h2{background-image: url(/EcoDMS/images/EN/riverchannels/mmain3.jpg);padding: 25px 10%;position: relative;background-repeat: no-repeat;background-size: 100% 100%;background-position: center bottom;background-color: #1D5D39;}

/*River selection icon and arrow */
#discover .bfc .txt2r{padding-top: 6px;}
/*
#discover .bfc .txt2l{padding-top: 30px;}
#discover .bfc .txt2r{padding-top: 20px;}
.font_m #discover .bfc .txt2l{padding-top: 35px;}
.font_m #discover .bfc .txt2r{padding-top: 25px;}
.font_l #discover .bfc .txt2l{padding-top: 40px;}
.font_l #discover .bfc .txt2r{padding-top: 30px;}
*/

.h3, h3{font-size: 2.4rem;line-height: 2.6rem;}

.notes,
.notesa{font-size: 1.2rem;line-height: 1.4rem;}

.txttop p{font-size: 1.214rem;line-height: 1.4rem;}
.inputselect input{font-size: 1.4rem;line-height: 1.8rem;}
.hid{font-size: 1.5rem;line-height: 1.7rem;}

.chartdescription{font-size: 1.2rem;line-height: 1.4rem;}
/*Search Listbox*/
.selcet_a{font-size: 1.2rem; /*1.6rem*/;line-height: 1.8rem;}
.hid p{padding: 5px 0;}

/* Search result table title */
.table_top_bg{font-size: 1.2rem /*1.6rem*/;line-height: 1.8rem;background: #13635f;}

.hidden1 > p{font-size: 1.6rem;line-height: 2rem;}
.hidden1 > span > a,
.hidden1 > ul > li > a{font-size: 1.4rem;line-height: 2rem;}
.hidden1 > ul{padding: 0 0 0 5%;}
@media (max-width: 767px){
    .species-desc-I .species-desc-II .species-desc-III-2,
    .species-desc-I .species-desc-II .species-desc-III,
    .species-desc-I .species-desc-II .species-desc-III-1{border-left: 0;border-right: 0;}
}
.river-cover{height: 300px;overflow: hidden;}

/*footer on the bottom*/
.main{min-height: calc(100vh - 170px);}
/*river list bg*/
.listmain{background: url(/EcoDMS/images/homepage/discover-ocean-repeat-unit.png) repeat;min-height: calc(100vh - 170px);position: relative;overflow: hidden;}
.listmain:before{background-color: #F0F5F7;content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.95;}
.riverlists{margin: 0 auto;padding-bottom: 50px;}
/*link hover*/
a:focus, a:hover{color: #13635f;}
/*River page content width*/
.mapbanner,
.wqmain,
.chose_f,
.cont_nr,
.container.cont.bgh,
.texta,
.top_bg,
.container.cont{width: 960px;max-width: 100%;padding-left: 15px;padding-right: 15px;margin: 0 auto;}
.cont_nr .container,
.map_block .container{max-width: 100%;padding: 0;}
.map_block .content-body{padding: 0;}
.graph,
.bancon{width: 100%;}

.animation-window{color: #66eba4;border-bottom: 1px solid #fff;background-color: transparent;}
.animation li{text-shadow:0 0 11px #000}

/*button hover*/
.species-link-II-2,
.species-link-II-2:active,
.species-link-II-2:focus,
.species-link-II-2:hover{border-radius: 50px;}
.species-link-II-2:hover{background-color: #13635f;color: #FFFFFF;}
.button_pic{}

.connect-linkbox-III-2 a:active,
.connect-linkbox-III-2 a:focus,
.connect-linkbox-III-2 a:hover{color: #fff;text-decoration: underline;}

/*Home banner*/
.home-banner{height: calc(100vh - 92px);position: relative;overflow: hidden;}
.banner_video{height: 100%;}
#home-banner-video{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
#home-banner-video .vhcenter{height: 100%;text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);}
#home-banner-video .home-banner-I{background: none;height: 100%;}
#home-banner-slider{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 0;}
#home-banner-slider .bx-wrapper{border: 0;height: calc(100vh - 92px);overflow: hidden;}
#home-banner-slider .bx-viewport{height: calc(100vh - 92px) !important;}
#home-banner-slider .bx-viewport li{height: calc(100vh - 92px) !important;}
#home-banner-slider .bxslider li{position: relative;z-index: 0;}
#home-banner-slider .slider_box{display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;overflow: hidden;}
#home-banner-slider .box_content{position: relative;display: block;width: 100%;height: 100%;}
#home-banner-slider .content_title{position: absolute;right: -30%;bottom: 18%;/*opacity: 0;*/z-index: 1;transition: opacity 1s;-moz-transition: opacity 1s;-webkit-transition: opacity 1s;-o-transition: opacity 1s;}
#home-banner-slider .content_title .home-banner-IV-1,
#home-banner-slider .content_title .home-banner-IV-2{font-size: 5rem;line-height: 6rem;text-shadow: 5px 6px 10px rgba(0, 0, 0, 0.6),-3px 6px 12px rgba(0, 0, 0, 0.6);}
#home-banner-slider .content_title img{display: block;max-width: 100%;height: auto;}
#home-banner-slider li[data-active="false"] .content_title{right: 5%;/*opacity: 1;*/transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;transition-timing-function: linear;}
#home-banner-slider li[data-active="false"].onStart .content_title{right: -30%;transition: all 0s;-moz-transition: all 0s;-webkit-transition: all 0s;-o-transition: all 0s;}
#home-banner-slider .bx-pager{position: absolute;left: 0;right: 0;bottom: 17%;}
@media screen and (max-width: 768px){
    #home-banner-slider .content_title{right: -80%;bottom: 18%;}
    #home-banner-slider li .content_title img{max-height: 200px;}
    #home-banner-slider .bx-pager{bottom: 17%;}
}
#home-banner-slider .bx-wrapper .bx-pager.bx-default-pager span{background: #fff;}
#home-banner-slider .bx-wrapper .bx-pager.bx-default-pager span.active{background: #eea85c;}
#home-banner-slider .bx-wrapper .bxslider li .slider_img{display: block;width: 100%;height: 100%;z-index: 0;background-size: cover;background-position: top center;background-repeat: no-repeat;transition: all 2s;-moz-transition: all 2s;-webkit-transition: all 2s;-o-transition: all 2s;}
#home-banner-slider .bx-wrapper .bxslider li[aria-hidden="false"] .slider_img{transition: transform 7s ease-in-out;transform: scale(1.2);transition: all 7s;-moz-transition: all 7s;-webkit-transition: all 7s;-o-transition: all 7s;transition-timing-function: linear;}
#home-banner-slider .bx-wrapper .bxslider li[aria-hidden="false"].onStart .slider_img{transform: scale(1);transition: all 0s;-moz-transition: all 0s;-webkit-transition: all 0s;-o-transition: all 0s;}
#home-banner-slider .bx-wrapper .bxslider li>img{width: 100%;}
#home-banner-video{transition: left .5s;-moz-transition: left .5s;-webkit-transition: left .5s;-o-transition: left .5s;}
#home-banner-video.showSlider {left: -100%;opacity: 0.3;transition: left 1s, opacity 3s;-moz-transition: left 1s, opacity 3s;-webkit-transition: left 1s, opacity 3s;-o-transition: left 1s, opacity 3s;}
#home-banner-slider .slider_link{display: block;width: 100%;height: 100%;position: relative;z-index: 3;color: transparent;}

@keyframes slider_bg {
    0% {background-size: 100%;}
    100% {background-size: +10%;}
}

.animation_content{position: absolute;display: block;width: 100%;height: 100%;z-index: -1;overflow: hidden;}
.bird {
    background-image: url(/EcoDMS/DocFile/BannerVideo/svg/birdfly-white.svg);
    background-size: auto 100%;
    width: 288px;
    height: 233px;
    will-change: background-position;
    animation-timing-function: steps(16);
    animation-iteration-count: infinite;
    filter: drop-shadow(3px 5px 20px rgba(0, 0, 0, 0.7));
}
.bird--1 {animation-duration: 0.65s;animation-delay: -0.5s;}
.bird--2 {animation-duration: 0.9s;animation-delay: -0.75s;}
.bird--3 {animation-duration: 0.6s;animation-delay: -0.25s;}
.bird--4 {animation-duration: 0.8s;animation-delay: -0.5s;}
.bird--5 {animation-duration: 0.55s;animation-delay: -0.6s;}
#home-banner-slider li[aria-hidden="false"] .bird{animation-name: fly-cycle;}
#home-banner-slider li[aria-hidden="false"].onStart .bird{animation-name: none;}
@media screen and (max-width: 768px){
    #home-banner-slider li[aria-hidden="false"] .bird.bird--1{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .bird.bird--4{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .bird.bird--6{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .bird.bird--8{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .bird.bird--10{animation-name: none;display: none;}
}
.container-bird {
    position: absolute;
    top: 10%;
    left: -10%;
    transform: scale(0) translateX(-10vw);
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-delay: 0;
}
.container-bird--1 {animation-duration: 3s;animation-delay: 2.5s;top: 4%;}
.container-bird--2 {animation-duration: 3s;animation-delay: 1.5s;top: 10%;}
.container-bird--3 {animation-duration: 3s;animation-delay: 1s;top: 15%;}
.container-bird--4 {animation-duration: 3s;animation-delay: 1.2s;top: 20%;}
.container-bird--5 {animation-duration: 3s;animation-delay: 2s;top: 17%;}
.container-bird--6 {animation-duration: 3s;animation-delay: 3.7s;top: 14%;}
.container-bird--7 {animation-duration: 3s;animation-delay: 3s;top: 5%;}
.container-bird--8 {animation-duration: 3s;animation-delay: 3.5s;top: 13%;}
.container-bird--9 {animation-duration: 3s;animation-delay: 2.5s;top: 11%;}
.container-bird--10 {animation-duration: 3s;animation-delay: 3s;top: 16%;}
#home-banner-slider li[aria-hidden="false"] .container-bird{animation-name: fly-right-1;}
#home-banner-slider li[aria-hidden="false"].onStart .container-bird{animation-name: none;}
@media screen and (max-width: 768px){
    #home-banner-slider li[aria-hidden="false"] .container-bird.container-bird--2{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .container-bird.container-bird--4{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .container-bird.container-bird--6{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .container-bird.container-bird--8{animation-name: none;display: none;}
    #home-banner-slider li[aria-hidden="false"] .container-bird.container-bird--10{animation-name: none;display: none;}
}
@keyframes fly-cycle {
    100% {background-position: -4615px 0;}
}
@keyframes fly-right-1 {
    0% {transform: scale(0.4) translateX(-10vw);}
    10% {transform: translateY(4vh) translateX(10vw) scale(0.35);}
    30% {transform: translateY(3.5vh) translateX(30vw) scale(0.3);}
    50% {transform: translateY(3vh) translateX(40vw) scale(0.2);}
    75% {transform: translateY(1vh) translateX(50vw) scale(0.15);}
    100% {transform: translateY(-4vh) translateX(60vw) scale(0.0);}
}
@keyframes breathing {
    30% {transform: scale(1.05);}
    50% {transform: scale(1);}
    80% {transform: scale(1.05);}
    to {transform: scale(1);}
}
.breathing.playing {
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-name: breathing;
    transform-origin: center;
}
@keyframes tada_img {
    from {transform: scale3d(1,1,1)}
    10%,20% {transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
    30%,50%,70%,90% {transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
    40%,60%,80% {transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
    to {transform: scale3d(1,1,1)}
}
.tada_img.playing img {
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-name: tada_img;
    transform-origin: center bottom;
}
.rotate.scroll{
    animation:rotate 3s linear;
}
@keyframes rotate {
    0%{transform:rotate(0deg);}
    66%{transform:rotate(400deg);}
    100%{transform:rotate(360deg);}
}
/*scroll_effect*/
.fade_in_up{position: relative;top: 100px;opacity: 0;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.fade_in_up.scroll{top: 0;opacity: 1;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.fade_in_up.no_opt{opacity: 1;}

.fade_in_right{position: relative;right: 200px;opacity: 0;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.fade_in_right.scroll{right: 0;opacity: 1;transition: all 2s;-moz-transition: all 2s;-webkit-transition: all 2s;-o-transition: all 2s;}

.fade_in_left{position: relative;left: 200px;opacity: 0;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.fade_in_left.scroll{left: 0;opacity: 1;transition: all 2s;-moz-transition: all 2s;-webkit-transition: all 2s;-o-transition: all 2s;}

.fade_in{position: relative;opacity: 0;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.fade_in.scroll{opacity: 2;transition: all 3s;-moz-transition: all 3s;-webkit-transition: all 3s;-o-transition: all 3s;}

.zoom_in{position: relative;transform: scale(0, 0);opacity: 0;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
.zoom_in.scroll{transform: scale(1, 1);opacity: 1;transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}

.shape{margin: -2px -15px 0 -15px;}
.shape.down{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);margin: 0 -15px -2px -15px;}
.shape.banner{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);margin: 0 -15px -2px -15px;position: absolute;left: 0;right: 0;bottom: 0;}
.shape svg{width: 100%;height: 100px;}
.shape .shape_fill{fill: #fff;-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
.shape.banner .shape_fill{fill: #F0F5F7;}

.friver-banner{height: 60vh/*calc(100vh - 92px)*/;position: relative;overflow: hidden;z-index:0;}
.friver-banner .river-title{color: #fff;margin-top: 0;}
.friver-banner .river-text{color: #fff;}

.frive_section .row.vcenter{display: flex;align-items: center;}
.story-drainage-title2{min-height: 80px;color: #13635f;font-size: 2.2rem;line-height: 1.786rem;font-weight: bold;margin-top: 96px;}
.frive_section_1_1 {background-size: cover;background-position: top;background-repeat: no-repeat;min-height: 500px;}
.frive_section_2_2 {background-size: cover;background-position: top;background-repeat: no-repeat;min-height: 500px;}
.frive_section_light {background: url(/EcoDMS/images/background/story-wave-bg.png) no-repeat scroll top;background-size: cover;}
.frive_section_green{background: url(/EcoDMS/images/background/story-green-wave-bg.png) no-repeat scroll left bottom;background-size: cover;min-height: 500px;overflow: hidden;}
.frive_section_title{color: #13635f;font-size: 1.5rem;line-height: 1.786rem;font-weight: bold;margin-top: 10px;padding: 0 50px;}
.frive_section_text{color: #333333;font-size: 1.143rem;line-height: 1.714rem;font-weight: normal;margin-top: 10px;padding: 0 50px;}
.frive_section_green .frive_section_title{color: #F6FFC3;}
.frive_section_green .frive_section_text{color: #FFFFFF;}
.frive_section .col-sm-8{width: 66.66666667%;}
.frive_section .col-sm-4{width: 33.33333333%;}
@media (max-width: 1199px){
    .frive_section .col-sm-8{width: 55%;}
    .frive_section .col-sm-4{width: 45%;}
}
@media (max-width: 767px){
    .frive_section .col-sm-8{width: 100%;}
    .frive_section .col-sm-4{width: 100%;}
    .frive_section .row.vcenter{display: block;}
    .frive_section_1_1{min-height: 400px;}
    .frive_section_1_2{display: table-cell;min-height: 400px;padding-top: 50px;padding-bottom: 50px;vertical-align: middle;}
    .frive_section_2_1{display: table-cell;min-height: 400px;padding-top: 50px;padding-bottom: 50px;vertical-align: middle;}
    .frive_section_2_2{min-height: 400px;}
    .frive_section_green{min-height: 400px;}
}
.lightSlider li img{display: block;max-height: 100%;max-width: 100%;}
.friver-wave-white{background: url(/EcoDMS/images/background/story-white-wave-bg.png) repeat-x scroll top;background-size: cover;display: block;height: 200px;position: relative;margin-top: -150px;}
.friver_slider{display: block;padding: 30px 0;overflow: hidden;}
.friver_slider .lSAction>a{opacity: 1;background-color: #13635f;border-radius: 50%;}
.friver_slider .lSAction>.lSPrev{background-position: 1px 0;}
.friver_slider .lSAction>.lSNext{background-position: -33px 0;}

.friver_section_bg{background-size: cover;background-position: center;background-repeat: no-repeat;}

.bx-wrapper{position: relative;z-index: 0;}

/*Lightbox*/
.sl-overlay{background: #000;}
.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button{color: #fff;}

/*video player*/
.video-title {color: #333333;font-size: 2rem;line-height: 2.286rem;font-weight: bolder;margin: 10px 0 30px 0;}
#opct{z-index: -1;}
.video_popup{display: none;}
.video_list{display: block;position: relative;width: 100%;margin-bottom: 80px;}
.video_list ul{display: block;width: 100%;padding: 15px;list-style: none;text-align: center;margin: 0;padding: 15px 0;}
.video_list ul li{display: inline-block;margin: 5px;position: relative;}
.video_list ul li a{display: block;position: relative;z-index: 0;}
.video_list ul li a:after{background-image: url(/EcoDMS/images/icon/play.png);background-position: center;background-repeat: no-repeat;background-size: 50px;content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
.video_list ul li img{display: block;width: auto;max-width: 100%;margin: 0 auto;box-shadow: 0 0 5px #ccc;}
.popvideo-wrapper{z-index: 0;background: rgba(0,0,0,.7);}


.banner_video .animation_content{top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;}
.animation_fish{position: absolute;left: 0;top: 100%;animation-name: fish-right;animation-timing-function: linear;animation-iteration-count: 1;animation-duration: 6s;}
.animation_fish img{display: inline-block;width: auto;height: 50px;}
@keyframes fish-right {
    0% {left: 0;top: 100%;transform:rotate(-35deg);}
    10% {left: 10%;top: calc(100% - 60px);transform:rotate(-35deg);}
    20% {left: 20%;top: calc(100% - 80px);transform:rotate(0deg);}
    30% {left: 30%;top: calc(100% - 50px);transform:rotate(30deg);}
    40% {left: 40%;top: 100%;transform:rotate(0deg);}
    50% {left: 50%;top: calc(100% - 30px);transform:rotate(0deg);}
    100% {left: 100%;top: calc(100% - 30px);transform:rotate(0deg);}
}
.spot_list{display: block;position: relative;margin: 30px 0;}
.spot{display: block;position: relative;background-color: #f0f0f0;padding: 30px;}
.spot_info{display: table;position: relative;width: 100%;}
.spot_info_content{display: block;width: calc(100% - 200px);float: right;margin: 0 auto;padding: 15px;}
.spot_info_img{display: block;width: 200px;float: left;}
.spot_info_img a{display: block;position: relative;width: 100%;text-align: left;}
.spot_info_img img{display: inline-block;width: auto;height: auto;max-width: 100%;max-height: 200px;}
.spot_info_title{color: #13635f;font-size: 1.5rem;line-height: 1.786rem;font-weight: bold;margin: 0 0 10px 0;}
.spot_info_desc{color: #333333;font-size: 1.143rem;line-height: 1.714rem;font-weight: normal;}

.spot_tran{}
.spot_tran_title{color: #333333;font-size: 1.5rem;line-height: 1.786rem;font-weight: bold;font-style: italic;}    
.spot_tran_content{display: table;position: relative;width: 100%;}
.spot_tran_map{display: block;width: 60%;float: left;margin: 0 auto;}
.spot_tran_map #map div{display: block;}
.spot_tran_info{display: block;width: 40%;float: right;margin: 0 auto;padding: 0 15px;}
.spot_tran_info .tran_name label{background-color: #ff0000;color: #fff;font-size: 1.5rem;line-height: 1.786rem;font-weight: bold;padding: 10px 30px;}
.spot_tran_info .tran_road{color: #8B4913;font-size: 1.5rem;line-height: 1.786rem;font-weight: bold;display: block;margin: 5px 0;}
.spot_tran_info .tran_desc{color: #333333;font-size: 1.143rem;line-height: 1.714rem;font-weight: normal;}
@media (max-width: 991px){
    .spot_tran_map{width: 100%;float: none;}
    .spot_tran_info{width: 100%;float: none;padding: 15px 0;}
}
@media (max-width: 767px){
    .spot_info_content{display: block;width: 100%;padding: 15px 0;}
    .spot_info_img{display: block;width: 100%;float: none;}
    .spot_info_img a{text-align: center;}
    .spot_info_img img{display: block;margin: 15px auto;}
}
.hidden1 p{padding-right: 20px;position: relative;}
.hidden1 p .rg{position: absolute;top: 5px;right: 5px;}

.bx-wrapper img{margin: 0 auto;}

/*20221212 WA*/
.dt{display:table;width:100%;}
.dtr{display:table-row;width:100%;}
.dtb{display:table-cell;vertical-align:middle;text-align: center;}
.dtb.dtbCenter{text-align: center;}
.dtb.dtbLeft{text-align: left;}
.dtb.dtbRight{text-align: right;}

ul.dt{list-style: none;display: table;margin: 0;padding: 0;}
ul.dt li.dtb{display: table-cell;float: none;vertical-align: middle;}

.nav-menu ul{list-style: none;display: block;margin: 0;padding: 0;text-align: right;}
.nav-menu ul li{display: inline-block;float: none;min-height: 10px;padding: 8px 3px;}
.nav-menu ul li a{padding: 5px;}

.search_label{font-weight: 700;padding:5px;margin: 0;}

.dbtn{background-color: #fff;border: 0;display: inline-block;padding: 6px 12px;text-align: center;vertical-align: middle;cursor: pointer;}
.dbtn.lf{text-align:left;}

.nax_top_menu{list-style: none;margin: 0;padding: 0;}
.nax_top_menu li{display:inline-block;background: transparent;position: absolute;top: 0;right: auto;white-space: nowrap;border: none;overflow: hidden;}
.nax_top_menu li a{display: inline-block;color: #13635f;padding: 0;left: -9999px;width: 0;opacity: 0;}
.nax_top_menu li a:active,
.nax_top_menu li a:focus{left: 0;width: auto;padding: 10px;opacity: 1;}
.nax_top_menu li a:hover{border-color: transparent;}
.nax_top_menu li.pc{display: inline-block;}
.nax_top_menu li.mb{display: none;}
@media (max-width: 991px){
    .nax_top_menu li.pc{display: none;}
    .nax_top_menu li.mb{display: inline-block;}
}

a,
.dbtn,
.cbtn{border: 2px solid transparent;outline: none;}
a:active, a:focus , a:hover{border: 2px solid #13635f;border-radius: 2px;outline: none;}
.dbtn:active, .dbtn:focus, .dbtn:hover{border: 2px solid #13635f;border-radius: 2px;outline: none;}
.cbtn:actice, .cbtn:focus, .cbtn:hover{border: 2px solid #13635f;border-radius: 2px;outline: none;}
.bx-wrapper .bx-controls-direction a{border: 0;}

.lf.logo a.pc{display: block;}
.lf.logo a.mobile{display: none;}
@media (max-width: 991px){
    .lf.logo a.pc{display: none;}
    .lf.logo a.mobile{display: block;}
}

#search_form{background-color:#fff;padding:5px;}
#search_form button,
#form_mobile button {border: 0;background-color: transparent;}

.home_title{display: block;height: 0;overflow: hidden;visibility: hidden;margin: 0;}

.pause_btn{position: absolute;bottom: 30px;right: 30px;background-color: transparent;border: 0;}
.pause_btn img{display: block;width: 40px;height: 40px;margin: 0 auto;}

h2.home-title{min-height: 80px;color: #333333;font-size: 2.572rem;line-height:3rem;font-weight: bolder;margin: 40px 0 30px 0;}

/*river*/
ul.map_step{list-style: none;margin: 0;padding: 0;}
ul.map_step li{display: block;padding: 0;}
ul.map_step .txt2l{margin-top: 5px;}
#ngau .txt21 h3{display: block;padding: 15px 15px 0 15px;height: 66px;color: #0099cc;font-size: 1.285rem;font-family: "franklin Gothic Book","Microsoft YaHei";font-weight: bold;line-height: 1.4rem;margin: 0;}

/*Contact Us*/
p.site-text{margin: 0;}
.text_nr{font-size: 1.143rem;line-height: 1.714rem;}
.text_nr h2.font16{color: #13635f;font-size: 1.5rem;line-height: 1.786rem;font-weight: bold;}
.text_nr h3.font12{color: #1b1b1b;font-size: 1.143rem;line-height: 1.714rem;font-weight: bold;}
.text_nr ul li{list-style: disc;}
.connect-find-III-4 a{color: #0D4A47;text-decoration: underline;}

/*Species Search*/
.search-remarks{margin-bottom: 70px;}
.search-select-category-IV-1 .search-select-category-V-label,
.search-select-category-IV-2 .search-select-category-V-label{display: block;text-align: center;color: #333333;font-size: 1.5rem;line-height: 1.786rem;font-weight: bold;margin: 20px 0 10px 0;}
.table_top_title{font-weight: 400;}
.search-select-category-IV-1,
.search-select-category-IV-2{border: 2px solid transparent;outline: none;}
.search-select-category-IV-1:active,
.search-select-category-IV-1:focus,
.search-select-category-IV-1:hover,
.search-select-category-IV-2:active,
.search-select-category-IV-2:focus,
.search-select-category-IV-2:hover{border: 2px solid #dfdfdf;border-radius: 2px;outline: none;border-radius: 50%;}
.search-select-category-IV-active,
.search-select-category-IV-active:active,
.search-select-category-IV-active:focus,
.search-select-category-IV-active:hover{border: 2px solid #13635f;}
.radioa_d input[type=radio]{position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;opacity: 0;cursor: pointer;}
.search-select-filter>div{display: block;width: 540px;max-width: 100%;margin: 0 auto;}
.search-select-filter .dtb{padding-bottom: 20px;}

/*River Overview*/
#anniu>div {
    position: relative;
    background: url(/EcoDMS/images/EN/overview/grey_bg.png) repeat-x;
    width: 100%;
    height: 45px;
    line-height: 40px;
    text-indent: 20px;
    margin: 1px 0;
    display: block;
    font-size: 1.143rem;
    background-color:rgba(100,100,100,0.8);
}
#anniu>div a{display: block;border-width: 2px;color: #fff;}
#anniu>div img{margin-right: 10px;}

/*River Species*/
.faunal_img img,
.floral_img img{display: block;width: 150px;height: 150px;opacity: 0;}
.cont_nr .cont_button_top a{display: block;}
.cont_nr .cont_button_top a img{display: block;}

/*River Water Quality*/
.hid a.sa{display: block;}
.inputselect a{display: inline-block;width: 30%;height: 50px;float: left;}
.inputselect a img{width: 65px;max-width: 100%;height: 55px;}
#selectr .inputselect a img{width: 65px;max-width: 100%;height: 55px;}

/*River River Tour*/
h2 .b.rt_title{font-size: 2.4rem;line-height: 2.6rem;}

/*Feature River*/
.friver_slider .bxslider li{display: block;}
.friver_slider .bxslider .slider_img a{display: block;}
.popvideo-head{top: 0;}
.popvideo-control-wrap{bottom: 0;}

.bx-wrapper .bx-pager.bx-default-pager span {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.home-valuable-I a{display: block;}
@media(max-width: 992px){
    .top_bor .tleft{margin-left: 0;}
}
#map.leaflet-container a{color: #13635f;}
#showData ul{padding: 0;margin: 0;}
.mar_top2 .color_block{background:rgba(100,100,100,0.8);}
.green_c{color: #13635f;}

.sixp>div{background-color: #fff;text-align: left;padding: 15px;}
#map .mar_top2 img{width: 100%;}
#detail .sh .col-md-6 img{width: 100%;}