/* @import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@500;600&display=swap); */

/* @import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600&display=swap); */

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600&display=swap);

/* @font-face {
  font-family: NotoSansCJKTC;
  src: url(../asset/font/NotoSansCJKtc-Regular.otf) format("opentype");
}

@font-face {
  font-family: NotoSansCJKTCLight;
  src: url(../asset/font/NotoSansCJKtc-Light.otf) format("opentype");
}

@font-face {
  font-family: NotoSansCJKDemiTCLight;
  src: url(../asset/font/NotoSansCJKtc-DemiLight.otf) format("opentype");
}

@font-face {
  font-family: SegoeUI;
  src: url(../asset/font/SegoeUI.ttf) format("opentype");
} */

/* https://gist.github.com/AndrewCraswell/106143d1bb5d4162689b9e1d89a2d0fb */
@font-face {
  font-family: SegoeUI;
  src:
  url(http://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"),
  url(http://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"),
  url(http://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
   font-weight: 400;
}

html,body{
  width: 100%;
  height: 100%;
}

a:hover{
  color:initial;
  text-decoration: none;
}

input{
  outline: none;
}

.SegoeUI{
  font-family: SegoeUI;
}

.NotoSansCJKTC{
  font-family: NotoSansCJKTC,'Noto Sans TC','Noto Sans', sans-serif;
}

.NotoSansTC{
  font-family: 'Noto Sans TC','Noto Sans', sans-serif;
}
.NotoSans{
  font-family: 'Noto Sans', sans-serif;
}
.mask-layer{
  z-index: 50;
}
.w-20{
  width: 20% !important;
  position: relative;
}

.w-25{
  width: 25% !important;
  position: relative;
}

.w-30{
  width: 30% !important;
  position: relative;
}
.w-33{
  width: 33% !important;
  position: relative;
}
.w-35{
  width: 35% !important;
  position: relative;
}

.w-40{
  width: 40% !important;
  position: relative;
}

.w-45{
  width: 45% !important;
  position: relative;
}

.w-50{
  width: 50% !important;
  position: relative;
}

.w-55{
  width: 55% !important;
  position: relative;
}

.w-60{
  width: 60% !important;
  position: relative;
}
.w-65{
  width: 65% !important;
  position: relative;
}

.w-70{
  width: 70% !important;
  position: relative;
}

.w-75{
  width: 75% !important;
  position: relative;
}


.w-80{
  width: 80% !important;
  position: relative;
}

.w-85{
  width: 85% !important;
  position: relative;
}

.w-90{
  width: 90% !important;
  position: relative;
}

.w-95{
  width: 95% !important;
  position: relative;
}

.bg-white{
  background-color: white !important;
}

.bg-gray{
  background-color: #ececec !important;
}

.bg-gray-2{
  background-color: #f5f5f5 !important;
}

.bg-perple{
  background-color: #914897 !important;
}

.bg-red{
  background-color: #e95539 !important;
}

.bg-yellow{
  background-color: #ebca1a !important;
}

.bg-green{
  background-color: #2d998a !important;
}

.bg-blue{
  background-color: #294499 !important;
}

.select-type{
  margin-bottom: 80px;
}

.select-type select{
  height:40px;
  font-size: 18px;
  line-height: 1.56;
  padding-left :10px;
  padding-right :10px;
  
}

.select-type select:focus{
  /* border: unset; */
  outline: none;
}


.text-white{
  color : white;
}

.banner-container{
  position: relative;
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  z-index: 50;
  overflow: hidden;
}
.banner-container::after{
  content: '';
  display: block;
  margin-top: 56%; /* margin 百分比相对父元素宽度计算 */
}

.banner-container ul {
  overflow: hidden;
  /* position: relative; */
  width: 100%;
  height: 100%;
  padding: 0px !important;
  margin: 0px !important;
  list-style: none;
}

.banner-container ul li{
  /* display: contents; */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding-bottom: 56.25%;
}

.photo{
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
  /* transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out; */
}

.banner-container ul li::after{
  content: '';
  display: block;
  margin-top: 56%; /* margin 百分比相对父元素宽度计算 */
}

/* .banner-container ul li.act{
  display: block;
   -webkit-animation: scale 7.5s linear 0s forwards,fade 1.5s ease-in 6s forwards;
    animation: scale 7.5s linear 0s forwards,fade 1.5s ease-in 6s forwards;
    z-index: 30;
} */

.banner-container ul li .photo.img-01{
  background-image:url(../asset/img/banner-1.jpg);
}

.banner-container ul li .photo.img-02{
  background-image: url(../asset/img/banner2.jpg);
}

.banner-container ul li .photo.img-03{
  background-image: url(../asset/img/2-2-img-1%403x.jpg);
}


.wrapper {
    overflow: hidden; 
    height: 300px;
}

.banner-container ul li.act .photo {
  display: block;
  opacity: 1;
  -webkit-transform: scale(1.5,1.5); 
  transform: scale(1.5,1.5);
  transition: all 7.5s ease-in-out,opacity 1s ease-in-out;
  -webkit-transition: all 7.5s ease-in-out,opacity 1s ease-in-out;
}

.banner-container ul li.hide .photo {
  opacity: 0;
  -webkit-transform: scale(1.5,1.5);
  transform: scale(1.5,1.5);
  
  transition: all 7s ,opacity 1s ease-in-out;
  -webkit-transition: all 7s ,opacity 1s ease-in-out;
}






.main-content{
  margin-top: 158.5px !important;
  position: relative;
  overflow: hidden;
}

.main-content.no-margin{
  margin-top: 0px !important;
}

.space-h180{
  width: 100%;
  height: 180px;
}

.bg-fixd{
  position: fixed;
  top:0;
  left: 0;
  z-index: -1;
}

.bg-fixd img{
  width: 100%;
}

.black-mask{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(to bottom, rgba(64, 64, 64, 0.4), rgba(22, 22, 22, 0.5) 59%, rgba(13, 13, 13, 0.8));
}


.text-gray{
  color : #3b3b3b;
}
.text-gray-0{
  color:#666666;
}
.text-light-gray{
  color : #707070;
}

.text-light-height-gray{
  color: #b9b9b9;
}

.text-red{
  color: #e95539;
}
.text-green{
  color: #2d998a;
}

.text-perple{
  color: #914897;
}

.text-yellow{
  color: #ebca1a;
}

.text-blue{
  color: #294499;
}

.fixd-content{
  position: fixed;
  z-index: 0;
  padding-left: 3rem!important;
}

.btn-index{
  box-sizing: border-box;
  /*padding: 28px 50px;*/
  padding: 28px 40px;
  max-width: 378px;
  margin: 70px 0px;
  color: #3b3b3b;
}

a.btn-index{
  text-decoration: none;
}

a.btn-index:hover{
  color: #3b3b3b;
}

.fixd-content .btn-index{
  padding: 25px 32px;
}


.btn-index.bg-yellow:hover{
  background-color: #2D998A !important;
}

.btn-title{
  font-size: 24px;
  font-weight: bold;
  line-height: 1.63;
}

.fixd-content .btn-title{
  font-size: 20px;
}

.btn-title .sm{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.56;
}

.map-go{
  overflow-y: hidden;
  position: relative;
  box-sizing: border-box;
  background-image: url(../asset/img/arrow.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto 100%;
  width: 30px;
}
.map-go::after{
  content: '';
  display: block;
  margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

.fixd-content .map-go{
  width: 30px;
  margin-left: 4px;
}

.gray-height{
  position: relative;
  z-index: 50;
  height: 120px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ececec+0,ececec+100&1+0,0+0,1+100 */
  background: -moz-linear-gradient(top,  rgba(236,236,236,0) 0%, rgba(236,236,236,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(236,236,236,0) 0%,rgba(236,236,236,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(236,236,236,0) 0%,rgba(236,236,236,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ececec', endColorstr='#ececec',GradientType=0 ); /* IE6-9 */
}

.white-height{
  position: relative;
  z-index: 50;
  height: 100px;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0), #ececec);
}

div.no-mobile{
  display: block !important;
}

.no-mobile{
  display: flex !important;
}

.d-flex.no-mobile{
  display: flex !important;
}

div.row.no-mobile{
   display: flex !important;
}



.mobile,.nav-item.mobile{
  display: none !important;
}

.icon{
  width: 24px;
  height: 24px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4px;
}

.icon.sm{
  width: 18px;
  height: 18px;
}

.icon.xs{
  width: 14px;
  height: 14px;
}

.prev{
  background-image: url(../asset/img/icon-arrow-page-l%403x.png);
}

.next{
  background-image: url(../asset/img/icon-arrow-page-r%403x.png);
}

.search{
  background-image: url(../asset/img/icon-search%403x.png);
}

.mail{
  background-image: url(../asset/img/icon-email%403x.png);
}

.phone{
  background-image: url(../asset/img/icon-phone%403x.png);
}

.download{
  background-image: url(../asset/img/icon-download%402x.png);
}

.down{
  background-image: url(../asset/img/icon-scroll-down%403x.png);
}

.content-block{
  padding: 100px 320px !important;
  min-height: 200px;
  position: relative;;
}

.group-big-title{
  font-size: 60px;
  font-weight: bold;
  line-height: 1.48;
  padding-left: 100px;
}

.group-big-title .sm{
  font-size: 36px;
  line-height: 1.36;
}

.group-big-title .sm.font-italic{
  font-size: 30px;
  line-height: 1.36;
}

ul.list-decimal{
  list-style: decimal;
}

ul.list-lower-alpha{
  list-style: lower-alpha;
}

ul.list-upper-alpha{
  list-style: upper-alpha;
}

ul.list-decimal ul.list-upper-alpha{
  margin-top:20px;
  margin-left: -40px;
}

ul.list-square{
  list-style: square;
  color: #e95539;
}

.custom-dropdown-icon.active{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 10.4px 6px;
  border-color: transparent transparent #3b3b3b transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #3b3b3b #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.custom-dropdown-icon{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10.4px 6px 0 6px;
  border-color: #3b3b3b transparent transparent transparent;
  line-height: 0px;
  _border-color: #3b3b3b #000000 #000000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}


.green-btn{
  padding: 5px 13px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.71;
  color: #ffffff;
  background-color: #2d998a;
}





.pic-info-card{
  padding: 0px 259px 0px 120px;
}



.pic-info-card.left{
  padding: 0px 160px 0px 210px;
}

.pic-title{
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.37;
  box-sizing: border-box;
  border-left: solid 4px #2d998a;
  margin-bottom: 40px;
}

.pic-content{
  font-size: 16px;
  line-height: 1.75;
}

.pic-content.has-btn{
  margin-bottom: 30px;
}

.group-title{
  font-size: 24px;
  font-weight: bold;
  line-height: 1.63;
}

.group-title.en{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.56;
}

.text-content{
  margin-top: 25px;
  font-size: 16px;
  line-height: 1.88;
  text-align: left;
  color: #707070;
}

.text-content.en{
  font-size: 16px;
  line-height: 1.75;
  text-align: left;
  color: #707070;
}

.public .content-block{
  padding:20px 350px !important;
} 

.public .act-content{
  margin-bottom:80px;
}

.public .page-title{
  font-size: 40px;
  line-height: 1.38;
  padding-bottom: 4px;
}

.public .page-subtitle{
  font-size: 24px;
  font-style: italic;
  line-height: 1.38;
  padding-bottom: 24px;
}

.public .search-input{
  width: 250px;
  height: 40px;
  border: solid 1px #8f8f8f;
}

.public .search-input input{
  border: 0px;
  height: 100%;
}

.public .search-input .search-btn{
  min-width: 25px;
  min-height: 25px;
}


.public .lang-type{
  width: 600px;
  font-size: 20px;
  font-weight: bold;
  line-height: 2.6;
  text-align: center;
  
  border: solid 1px #294499;
  color:#294499;
  cursor: pointer;
}


.public .lang-type .active{
  background-color:#294499;
  color:#FFF;
}


.border-dot{
  background-image: url(../asset/img/border.png);
  background-position: -6px center;
  background-repeat: repeat-x;
  background-size: 2%;
  width: 100%;
  height: 2px;
}

.border-dot.white{
  background-image: url(../asset/img/border-white.png);
  background-position: -6px center;
  background-repeat: repeat-x;
  background-size: 2%;
  width: 100%;
  height: 2px;
}

.public .news-card .title{
  margin-bottom: 20px;
  font-size: 36px;
  line-height: 1.38;
  width: 100%;
}

.public a.prev-btn{
  position: fixed;
  font-size: 16px;
  line-height: 1.88;
  color: #9a9a9a;
  text-decoration: none;
}

.public a.prev-btn:hover{
  color: #9a9a9a;
}

.public a.prev-btn::before{
  content: "";
  padding: 4px;
  margin-right: 10px;
  background-image: url(../asset/img/icon-arrow-page-l%403x.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}


.load-more{
    display: none !important;
    padding: 20px 0px 30px 0px !important;
  }

.mobile-more-link{
  
  display: none;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.5;
  letter-spacing: normal;
  text-align: center;
  color: #666666;
}

.page-count{
  font-size: 30px;
  line-height: 1.2;
  padding-top: 20px;
}

a.custom-a{
  color: #2d998a;
  text-decoration: none;
}
a.custom-a:hover{
  color: #2d998a;
}

.owl-carousel-control.type-1 {
  top: calc( 50% - 35px );
  left: -80px;
  width: 70px;
  height: 70px;
  /* background-image: url(../asset/img/arrow.png); */
  background-color: rgba(255, 255, 255, 0.8);
  background-size: 50%;
  border-radius: 100%;
  transform: rotate(180deg);

  display: flex;
  align-items: center;
  justify-content: center;
}

.owl-carousel-control {
  position: absolute;
  top: calc( 50% - 23px );
  left: 0px;
  width: 46px;
  height: 46px;
  background-image: url(../asset/img/icon-arrow-2-2%403x.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
}

.owl-carousel-control.no-mobile{
  background-image: unset;
}

.owl-carousel-control.right{
  transform: rotate(180deg);
  left: unset;
  right: 0px;
}

.owl-carousel-control.right.type-1{
  transform: rotate(0deg);
  right: -80px;
}

.video-type.remark-block{
  display: flex;
  position: absolute;
  align-content: flex-end;
  font-size: 30px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.47;
  letter-spacing: normal;
  color: #ffffff;
  left: 30px;
  bottom: 50px;
  top: auto;
  white-space: pre-line;
}

.video-type.remark-block.en{
  display: flex;
  position: absolute;
  align-content: flex-end;
  

  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;

  left: 30px;
  bottom: 50px;
  top: auto;
  white-space: pre-line;
}

.shadow{
  box-shadow:0 4px 6px 0 rgba(0, 0, 0, 0.3) !important
}

.main-content.fixed-top-white-height{
  padding-top: 100px !important;
}

.main-content.fixed-top-white-height .white-height{
  position: fixed;
  top: 158.5px;
  z-index: -1;
}


.back-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  bottom: 30px;
  right: 30px;
  
  font-family: SegoeUI;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #707070;
  z-index: 105;
}

.icon-backtop{
  width: 40px;
  height: 40px;
  background-image: url(../asset/img/icon_arrow_backtop.svg);
  background-color: #ECECEC;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px;
  border-radius: 100%;
  transform: rotate(90deg);
  cursor: pointer;
  /* -webkit-filter: invert(100%);
  filter: invert(100%); */
}

.subscribe-log{
  position: absolute;
  padding: 16px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.32px;
  text-align: center;
  color: #ffffff;
  border-radius: 6px;
  bottom: calc( 100% + 36px );
  right: 8px;
  white-space: nowrap;
}

.subscribe-log .border-dot{
  background-position: center;
  background-size: 8% 20%;
  height: 20px;
}
.subscribe-log-arrow{
  position: absolute;
  width: 0;
  height: 0;
  right: 10px;
  top: 99%;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: #294499 transparent transparent transparent;
  line-height: 0px;
  _border-color: #294499 #000000 #000000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.bg-green .subscribe-log-arrow{
  border-color: #2d998a transparent transparent transparent;
  _border-color: #2d998a #000000 #000000 #000000;
}

.bg-yellow .subscribe-log-arrow{
  border-color: #ebca1a transparent transparent transparent;
  _border-color: #ebca1a #000000 #000000 #000000;
}



.subscribe-log .sub-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.71;
  letter-spacing: normal;
}

.subscribe-log .sub-title .map-go{
  background-image: url(../asset/img/arrow-white%403x.png);
  background-position: center right;
  background-size: auto 70%;
  width: 30px;
    right:0px;
}

.subscribe-log .sub-title:hover .map-go{
  transition: right .3s;
  right: -10px;
}

.apply-button {
  position: absolute;
  bottom: calc(100% + 16px);
  width: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 1.25 !important;
  font-size: 22px !important;
  padding: 16px 8px !important;
}

.apply-button .map-go{
  right: 0px;
}

.apply-button:hover .map-go{
  transition: right .3s;
  right: -10px;
}

.owl-carousel.owl-drag .owl-item .item{
  margin-top: 10px;
}

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


.video-preview::after{
  display: block;
  content: "";
  margin-top: 58.72%;
  
  
}

.img-preview{
  display: flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.img-preview::after{
  display: block;
  content: "";
  margin-top: 50.86%;
}

@media (min-width:767px) and (max-width:1366px){
  .public .content-block{
    padding: 20px 15% !important;
  }
  .content-block{
    padding: 20px 10% !important;
  }

  .fixd-content{
    padding-left: 80px !important;
  }

  .pic-info-card{
    padding: 10px 30px;
  }
  .pic-info-card.left{
    padding: 10px 30px;
  }

  .main-content{
    margin-top: 110px  !important;
  }
  .main-content.fixed-top-white-height{
    padding-top: 0px !important;
  }
  .main-content.fixed-top-white-height .white-height{
    top: 110px;
  }

  .group-big-title{
    padding-left: unset;
    /* margin-left: -50px; */
    /* font-size: 6vw; */
  }

  .group-big-title .sm.font-italic{
    /* font-size: 3vw; */
  }

  .fixd-content .btn-index{
    padding: 2.5vw 3vw;
  }

  .fixd-content .btn-title{
    font-size: 2vw;
  }

  .w-33{
    width: 50% !important;
  }

  .public .act-content {
    /* flex-direction: column; */
  }

  .public .search-input{
    /* width: 100%;
    margin-bottom: 2vw; */
    margin-right: 3vw;
  }

  .public .lang-type,.public .lang-type .active{
    width: 100%;
    align-self:stretch !important;
  }

  

  .gray-height{
    height: 60px;
  }

  .back-top-btn{
    right: 10px;
    bottom: 10px;
  }
}

@media (max-width:767px){
  .owl-carousel.owl-drag .owl-item .item{
    margin-top: 0px;
  }
  .fixd-content .btn-title{
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.73;
    letter-spacing: normal;
    color: #3b3b3b;
  }

  .back-top-btn.mobile{
    flex-direction: row;
  }
  .mobile .subscribe-log{
    padding: 10px 16px;
    right: 10px;
    border-radius: 100px;
    position: relative;
  }

  .mobile .subscribe-log .sub-title{
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.73;
    letter-spacing: normal;
  }

  .mobile .subscribe-log .sub-title .map-go{
    background-size: auto 100%;
    width: 20px;
    margin-left: 3px;
  }

  .mobile .apply-button {
    position: relative;
    width: auto;
    right: 10px;
    bottom: 0;
    font-size: 18px !important;
    padding: 8px 15px !important;
  }

  .mobile .apply-button .map-go {
    width: 24px;
    margin-left: 3px;
}

  .main-content.fixed-top-white-height{
    padding-top: 0px !important;
  }
  .public .news-card .title {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.61;
    letter-spacing: normal;
    text-align: left;
    color: #3b3b3b;
    margin: 0px !important;
  }
  .video-type.remark-block.en{
    width: 65% !important;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    left: 10px;
    bottom: 10px;
  }
  .video-type.remark-block{
    width: 65% !important;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #ffffff;
    left: 15px;
    bottom: 10px;
  }
  .owl-carousel-control{
    top: calc( 50% - 15px );
    left: -30px;
    width: 30px;
    height: 30px;
    -webkit-filter: invert(80%); /* Safari */
    filter: invert(80%);
  }
  .owl-carousel-control.right{
    right: -30px;
  }
  .select-type{
    height: 40px;
    margin-bottom:30px !important;
    padding: 0px 30px !important;
  }
  .select-type select{
    border: 0px;
    height: 40px;
    background-color: #f5f5f5;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    color: #707070;
    /* margin-bottom:0 30px 30px 30px !important; */
    /* padding: 0px 30px !important; */
  }
  .border-dot{
    background-size: 5%;
  }
  .border-dot.white{
    background-image: url(../asset/img/border.png);
    background-size: 5%;
  }

  .border-dot.padding30{
    width: calc( 100% - 60px );
    margin:0 auto;
  }
  .mobile-more-link{
    display: inline;
  }
  .mobile{
    display: block !important;
  }

  .load-more{
    display: table !important;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    text-align: left;
    color: #b7b7b7;
    text-decoration: none;
  }

  .load-more:hover{
    color: #b7b7b7;
  }

  .load-more::after{
    display: block;
    content: "";
    width: 18px;
    height: 8px;
    margin: 0 auto;
    
    background-size: 100% auto;
    background-image: url(../asset/img/icon-arrow-g%403x.png);
    background-repeat: no-repeat;
    background-position: center;
  }


  


  div.no-mobile,.no-mobile,.d-flex.no-mobile,div.row.no-mobile{
    display: none !important;
  }

  .content-block {
    padding:0 !important;
  }

  .bg-fixd{
    display: none !important;
  }

  .main-content{
    margin-top: 50px !important;
  }

  .w-20,.w-25,.w-30,.w-33,.w-35,.w-40,.w-45,.w-50,.w-55,.w-60,.w-65,.w-70,.w-75,.w-80,.w-85,.w-95{
    width: 100% !important;
  }

  .fixd-content{
    position: static ;
    padding:0px !important;
    margin: 0px !important;
  }

  .group-big-title{
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: center;
    padding: 20px 30px 0px 30px !important;
  }

  .group-big-title .sm.font-italic {
    font-size: 18px;
    line-height: 1.33;
  }

  .fixd-content .btn-index {
    position: fixed;
    bottom:  10px;
    padding: 10px 20px !important;
    margin: 0;
    z-index: 60;
  }
  .fixd-content .map-go{
    width: 20px;
    margin-left: 4px;
  }

  ul.list-decimal ul.list-upper-alpha{
    margin-top: 15px !important;
    margin-left: -15px !important;
  }

  .gray-height{
    display: none;
  }

  .pic-info-card{
    padding:0px !important;
    margin:0px !important;
  }

  

  .pic-title {
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    color: #3b3b3b !important;
    padding: 0px !important;
    margin:0px !important;
    padding-left: 14px !important;
    margin-bottom: 20px !important;
  }

  .pic-content {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    color: #707070 !important;
  }

  .white-height{
    height: 60px !important;
  }

  .public .content-block{
    padding: 20px 30px !important;
  }

  .public .page-title{
    padding:0px !important;
    margin:0px !important;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.38;
    letter-spacing: normal;
    text-align: center;
    color: #3b3b3b;
  }

  .public .page-subtitle{
    padding:0px !important;
    margin:0px !important;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: #3b3b3b;
    margin-bottom: 15px !important;
  }

  .public .act-content {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .public .search-input{
    width: 100% !important;
    margin-bottom: 30px;
  }

  .public .lang-type{
    width:100% !important;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 3.25;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .public .lang-type .w-50{
    width: 50% !important;
  }

  .public .lang-type .en{
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: center;
    align-self: stretch;
  }

  .page-count{
    display: none !important;
  }

  .public a.prev-btn.mobile{
    position: static;
    margin: 30px 0px !important;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.14;
    letter-spacing: normal;
    text-align: left;
    color: #9a9a9a;
  }

  .hide{
    display: none;
  }
  .hide-in-mobile{
    display: none !important;
  }
  
  .insert-photo {
    margin: 30px 0px !important;
  }

  .group-title{
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.61;
    letter-spacing: normal;
    margin-bottom: 14px !important;
  } 

  .text-content {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
  }

  .btn-index {
    padding: 15px 30px;
    margin: 5px 0px 25px 0px;
  }

  .btn-title {
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.89;
    letter-spacing: normal;
  }
  .btn-title .sm {
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: normal;
  }

  .group-title.en {
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
  }

  .text-content.en {
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.85;
    letter-spacing: normal;
  }

  .mobile, .nav-item.mobile {
    display: inline !important;
  }

  .d-flex.mobile {
    display: flex !important;
  }

  .navbar-mobile.d-flex.mobile{
    min-height: 50px;
  }

  .back-top-btn.d-flex.mobile{
    right: 15px;
    bottom: 15px;
  }

  .icon{
    width: 15px;
    height: 15px;
  }

  .hvr-bob{
    animation-play-state: paused;
  }
}

@media (min-width:500px) and (max-width:767px){
  
  .group-big-title{
    font-size: 5vw;
    padding: 8vw 8vw 0px 8vw !important;
  }
  .group-big-title .sm.font-italic{
    font-size: 3.5vw;
  }
  .btn-title{
    font-size: 4vw;
  }
  .btn-title .sm{
    font-size: 3vw;
  }
  .group-title,.group-title.en,.load-more{
    font-size: 3.5vw;
  }
  a.btn-index {
    margin-left: auto;
    margin-right: auto;
  }

  #leap-gif{
    width: 40vw;
    height: auto;
    /* margin-left: auto;
    margin-right: auto; */
  }

  .text-title,.public .page-title{
    font-size: 6vw;
  }

  .public .page-subtitle{
    font-size: 4vw;
  }
  .public .lang-type{
    font-size: 3vw;
  }
  .public .lang-type .en{
    font-size: 2.7vw;
  }

  .text-content,.text-content.en,.icon{
    font-size: 2vw;
  }

  .pic-title,.public .news-card .title{
    font-size: 3vw;
  }
  .pic-content{
    font-size: 2vw;
  }

  .select-type{
    height: 7vw;
    
    margin-bottom: 8vw !important;
    padding: 0px 8vw !important;
  }

  .select-type select{
    height: 100%;
    font-size: 2vw;
  }

  

  .video-type.remark-block.en{
    width: 80% !important;
    font-size: 2vw;
  }

  .public .content-block{
    padding: 6vw 8vw !important;
  }

  .mobile-more-link{
    font-size: 1.8vw;
  }


  .public a.prev-btn.mobile{
    font-size: 2vw;
  }
}