@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
@import url(../css/common.css);
@import url(../css/article.css);
@import url(../css/form.css);
@import url(../css/contact.css);
@import url(../css/investor.css);
@import url(../css/tech.css);
@import url(../css/product.css);
@import url(../css/about.css);

*{
  font-family: Arial, Helvetica, sans-serif, "Century Gothic", "Times New Roman", Times, serif, "Noto Sans", "微軟正黑體", "Poppins", "新細明體";
}
html {
  scroll-behavior: smooth;
}
body{
  margin: 0 auto;padding: 0; letter-spacing: 1.5px;
  /* font-family: ‘Noto Sans TC’, sans-serif; */
  font-family: Arial, Helvetica, sans-serif, "Century Gothic", "Times New Roman", Times, serif, "Noto Sans", "微軟正黑體", "Poppins", "新細明體";
}
ul{ margin: 0; padding: 0;}
p, li{font-size: 15px;}
p small, li small{ font-size: 12px;}
a, p a, li a{color: #666666; text-decoration:none;}
a:hover, p a:hover, li a:hover{color: #333;}
.img-fluid{
  width: 100%;
}

.bg-color-main{background-color:rgba(30, 33, 136, 1);}
.bg-color-deepmain{background-color:rgba(0, 0, 102, 1);}

.bg-color-black{background-color:rgba(0, 0, 0, 1);}
.bg-color-lightgray{background-color:rgba(0, 0, 0, .1);}
.bg-color-blue{background-color:#9ed0e6}
.bg-color-white{background-color:rgba(255, 255, 255, 1);}
.color-gray{color: #666666!important;}
.color-deep-gray{color: #333!important;}
.color-main{color:rgba(30, 33, 136, 1)}
.color-white{color:rgba(255, 255, 255, 1)!important;}
.rounded-150{
  border-radius: 150px !important;
}

/* KV */
.modal-header h5{ text-align: center; display: block;width: 100%}
.global ul{margin:0 auto; width:80%;padding:0;list-style-type:none;justify-content: center;}
.global li{margin:0; padding:0;}
.global img{ width:80px; text-align:center}
.global p{ text-align:center; font-size:12px; color:#666;}
.global p a{ color:#666; text-decoration:none;}
.global p a:hover{color:#000;}
@media screen and (max-width: 767px){
	.global ul{width: 250px}
	.global img{ width:80%;}
}

.kv header{ 
  position: fixed; 
  min-width: 100%;
  left:0;
  top:0;
  z-index: 11;
}
/* inter */
.kv header.inter{ 
  background-color:rgba(30, 33, 136, 1);
  height: 60px;
}
.navbar{
  padding: 0.2rem .5rem;
}

/* header */
.kv header{ padding-top: 3px;}
.kv header .brand-logo img{height: 50px;}
.kv header .navbar-nav{
  margin: 0; padding: 0;
  color: #fff;
  font-size: 16px;
}
.kv header .navbar-nav a{
  color: #fff;
}
.kv header .navbar-nav a:focus{
  color: #fff;
}
.kv header .navbar-nav li.nav-item{ 
  margin: 0 15px; 
}
.kv header .nav-link {
  padding: 0;
} 
@-webkit-keyframes fadeInUp_5 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 5%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp_5 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 5%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp_5 {
  -webkit-animation-name: fadeInUp_5;
  animation-name: fadeInUp_5;
}
.kv .navbar-collapse{ margin-top: 8px}

.kv .dropdown-menu {
  min-width: 10rem;
  font-size: 1rem;
  color: #212529;
  background-color:rgba(0, 0, 0, .85);
  border: 0px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: 6px 0 0;
  padding: 15px 25px;
}

.kv .dropdown-item {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 5px;
  padding: 8px 0 3px;
  clear: both;
  font-size: 12px;
  font-weight: 400;
  color: #6c757d;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border-bottom: 1px solid #666;
  border-radius: 0;
  letter-spacing: 1px;
}
.kv .dropdown-item:last-child{
  border-bottom: 0px solid #666;
}
.kv .dropdown-item a:link{color: #666;}
.kv .dropdown-item:hover, .kv .dropdown-item:focus {
  color: #aaacff;
  text-decoration: none;
  background-color: transparent;
}

.kv .dropdown-item.active, .kv .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
}

.kv .dropdown-item.disabled, .kv .dropdown-item:disabled {
  color: #6c757d;
  background-color: transparent;
} 
.kv .nav-item:last-child{position: relative; top: -6px;}
.kv .nav-item:last-child button{ background: transparent; border: none}
.kv .icon { 
  display:inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  vertical-align: middle;
  margin-top: 0px;
  margin-right: 3px;
}
.kv .language{
	display:inline-block;
  background: url(../images/icon-language.svg) no-repeat center center ;
  background-size: 60% 60%;
}
.navbar-toggler {
  border: none;
  background: transparent !important;
}

.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

.navbar-toggler .icon-bar {
  background-color: #fff;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar+.icon-bar {
  margin-top: 4px;
}

.icon-bar:nth-child(2) {
  width: 16px;
  transition: ease all .2s;
}

.navbar-toggler:hover>.icon-bar:nth-child(2) {
  width: 22px;
  transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
  width: 22px;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 4px);
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  transition: ease all .2s;
}

/* .sticky.navbar */
@media screen and (min-width: 1025px){
  .kv header.home,
  .kv header.inter {
    transition: background 500ms ease;
    -webkit-transition: background 500ms ease;
    z-index: 8;
  }
  
  .kv header.home.scrolled,
  .kv header.inter.scrolled {
    position: fixed;
    top: -80px;
    background: rgba(30, 33, 136, 1);
    border-bottom: 4px solid #0e0850;
    -webkit-box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.25);
    transform: translateY(80px);
    transition: transform 500ms ease, background 900ms ease;
    -webkit-transition: transform 500ms ease, background 900ms ease;
    z-index: 8;
  }
  .kv .bg-dark {
    background-color:rgba(30, 33, 136, 0) !important;
  }
  .kv a.bg-dark:hover, 
  .kv a.bg-dark:focus
  {
    background-color:rgba(30, 33, 136, 0) !important;
  }
  }
  @media screen and (max-width: 1024px){
    .kv header{ 
      position: relative;
    }
    .kv .bg-dark {
      background-color:rgba(30, 33, 136, 1) !important;
      margin-top: -3px;
    }
    
    .kv a.bg-dark:hover, 
    .kv a.bg-dark:focus
    {
      background-color:rgba(30, 33, 136, 1) !important;
    }
    .kv .dropdown-menu {
      background-color:rgba(0, 0, 0, .55);
    }

 
    .kv .nav-item{ 
      text-align: center; 
      margin: 20px 0 0 0; 
      padding: 30px 0 5px 0;
      border-bottom: 1px solid #0b0d56;
      font-size: 18px;
      letter-spacing: 5px!important;
    }
  
    .kv .nav-item:last-child{
      border-bottom: 0px solid #0b0d56;
      top: 0px;
      padding-bottom: 50px;
    }
    .kv .nav-item:last-child button{ background: transparent; border: none; width: 100%; margin: 0 auto; text-align: center}
  }

  @media screen and (max-width: 767px){
    .kv .nav-item{ 
      margin: 10px 0 0 0; 
      padding: 20px 0 5px 0;
    }
    .kv header .navbar-nav li.nav-item{ 
      margin: 0; 
    }
    .kv header .nav-link {
      padding: 0;
      margin: 0;
    } 
  }

  @media screen and (max-width: 375px){
  .kv .dropdown-menu {
      min-width: 100%;
      padding: 15px 10px;
      margin: 0;
    }
  }

  @media screen and (max-width: 320px){
  .kv .dropdown-menu {
      min-width: 100%;
      padding: 15px 5px;
      margin: 0;
    }
}
/* kv carousel */

.kv .carousel-item.aa{
  height: 680px;
  display: block;
  background:url(../images/kv-01-lg.jpg) no-repeat center center;
  background-size: cover;
}
.kv .carousel-item.bb{
  height: 680px;
  display: block;
  background:url(../images/kv-02-lg.jpg) no-repeat center center;
  background-size: cover;
}
.kv .carousel-item.cc{
  height: 680px;
  display: block;
  background:url(../images/kv-03-lg.jpg) no-repeat center center;
  background-size: cover;
}
.kv .carousel-item.dd{
  height: 680px;
  display: block;
  background:url(../images/kv-04-lg.jpg) no-repeat center center;
  background-size: cover;
}
.kv .carousel-item.ee{
  height: 680px;
  display: block;
  background:url(../images/kv-05-lg.jpg) no-repeat center center;
  background-size: cover;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 350px;
  left: 20%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}
.kv .carousel-caption p{
  letter-spacing: 15px;
  font-size: 18px;
}
.kv .carousel-caption h1{
  letter-spacing: 3px;
  font-size: 48px;
  font-weight: bolder;
}
.kv .carousel-caption span{letter-spacing: 0px;}
.kv .carousel-caption-logo img{ width: 100px}
@media screen and (min-width: 1680px){
  .kv .carousel-item.aa{
    background:url(../images/kv-01-xl.jpg) no-repeat center center;
    background-size:cover;
    height: 85vh;
  }
  .kv .carousel-item.bb{
    background:url(../images/kv-02-xl.jpg) no-repeat center center;
    background-size:cover;
    height: 85vh;
  }
  .kv .carousel-item.cc{
    background:url(../images/kv-03-xl.jpg) no-repeat center center;
    background-size:cover;
    height: 85vh;
  }
  .kv .carousel-item.dd{
    background:url(../images/kv-04-xl.jpg) no-repeat center center;
    background-size:cover;
    height: 85vh;
  }
  .kv .carousel-item.ee{
    background:url(../images/kv-05-xl.jpg) no-repeat center center;
    background-size:cover;
    height: 85vh;
  }
  .kv .carousel-caption {
    bottom: 450px;
  }
}
@media screen and (min-width: 2000px){
  .kv .carousel-caption {
    bottom: 600px;
  }
  .kv .carousel-caption p{
    font-size: 24px;
  }
  .kv .carousel-caption h1{
    font-size: 70px;
    margin-top: 25px
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px){
  .kv .carousel-item.aa{
    background:url(../images/kv-01-lg.jpg) no-repeat center center;
    background-size:cover;
    height: 550px;
  }
  .kv .carousel-item.bb{
    background:url(../images/kv-02-lg.jpg) no-repeat center calc(100% - -50px);
    background-size:cover;
    height: 550px;
  }
  .kv .carousel-item.cc{
    background:url(../images/kv-03-lg.jpg) no-repeat center calc(100% - -50px);
    background-size:cover;
    height: 550px;
  }
  .kv .carousel-item.dd{
    background:url(../images/kv-04-lg.jpg) no-repeat center calc(100%);
    background-size:cover;
    height: 550px;
  }
  .kv .carousel-item.ee{
    background:url(../images/kv-05-lg.jpg) no-repeat center calc(100%);
    background-size:cover;
    height: 550px;
  }
  .kv .carousel-caption {
    right: 15%;
    bottom: 270px;
    left: 8%;
    z-index: 10;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

@media screen and (max-width: 767px){
  .bx-wrapper .bx-prev,
  .bx-wrapper .bx-next  {
    display: none;
  }
  .kv .carousel-item.aa{
    background:url(../images/kv-01-xs.jpg) no-repeat center center;
    background-size:cover;
    height: 470px;
  }
  .kv .carousel-item.bb{
    background:url(../images/kv-02-xs.jpg) no-repeat center center;
    background-size:cover;
    height: 470px;
  }
  .kv .carousel-item.cc{
    background:url(../images/kv-03-xs.jpg) no-repeat center center;
    background-size:cover;
    height: 470px;
  }
  .kv .carousel-item.dd{
    background:url(../images/kv-04-xs.jpg) no-repeat center center;
    background-size:cover;
    height: 470px;
  }
  .kv .carousel-item.ee{
    background:url(../images/kv-05-xs.jpg) no-repeat center center;
    background-size:cover;
    height: 470px;
  }
  .kv .carousel-caption {
    right: 10%;
    bottom: 190px;
    left: 10%;
    z-index: 10;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
  }
  .kv .carousel-caption p{
    letter-spacing: 1px;
    font-size: 15px;
  }
  .kv .carousel-caption h1{
    letter-spacing: 1px;
    font-size: 35px;
  }
}
@media screen and (max-width: 375px){
  .kv .carousel-caption h1{
    font-size: 28px;
  }
  .kv .carousel-caption p br{ display:none;}
}
@media screen and (max-width: 320px){
  .kv .carousel-caption h1{
    font-size: 24px;
  }
}
/* news */
.news-home{
  position: relative;
  height:0 ;
  padding-bottom: 25%;
  background: url(../images/bg-news.jpg) no-repeat calc(0% - 0px) center;
  background-size:140%;
}
.news-home .info-box{
  background: #fff;
  margin: 0 auto;
  width: 80%;
  border: 7px solid #fff;
  position: relative;
  top:-50px;
}
.news-home .info-box .header-title{
  text-align: center;
  background-color: rgba(30, 33, 136, 1);
  color: #fff;
  padding: 8px;
  font-size: 18px;
}
.news-home .info-box .header-title .icon { 
  display:inline-block;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin-top: -5px;
  margin-right: 8px;
}
.news-home .info-box .header-title .news{
	display:inline-block;
  background: url(../images/icon-news.svg) no-repeat center center;
  background-size: 100%;
} 
.news-home .info-box-items{
  width: 95%;
  margin: 0 auto;
}
.news-home .info-box-items li{
  margin: 10px 0 0 0;
  padding: 0 0 10px 0;
  width: 100%;
  display: block;

}
.news-home .info-box-items li a{
  text-decoration: none;
}
.news-home .info-box-items li span{ display: inline-block;}
.news-home .info-box-items li .date{ margin-right: 15px;}
.news-home .info-box-items li .source{ font-size: 12px; border: 1px solid #ccc; padding: 5px 15px; margin-right: 15px}
.news-home .info-box-items li i{display: inline-block;float: right; vertical-align: middle; margin-top:5px;}

@media screen and (min-width: 1680px){
  .news-home .info-box{
    width: 100%;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1439px){
  .news-home{
    padding-bottom: 27%;
  }
}
@media screen and (max-width: 1024px){
  .news-home{
    padding-bottom: 33%;
    background: url(../images/bg-news.jpg) no-repeat calc(0% - 0px) center;
    background-size:cover;
  }
}
@media screen and (max-width:768px){
  .news-home{
    padding-bottom: 43%;
    background: url(../images/bg-news.jpg) no-repeat calc(0% - 0px) center;
    background-size:cover;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px){
  .news-home .info-box{width: 100%;}
  .news-home .info-box-items li{font-size: 12px;}
  .news-home .info-box-items li i{margin-top:8px;}
}

@media screen and (max-width: 767px){
  .news-home{
    padding-bottom: auto;
    background: url(../images/bg-news.jpg) no-repeat calc(0% - 0px) center;
    background-size:cover;
    height: 70vh;
  }
  .news-home .info-box{width: 100%;}
  .news-home .info-box-items li .main{ display: block; margin-top: 15px;}
}
@media screen and (max-width: 414px){
  .news-home{
    height: 580px;
  }
}
@media screen and (max-width: 375px){
  .news-home{
    height: 520px;
  }
  .news-home .info-box-items li{ letter-spacing: 0;}
}

@media screen and (max-width: 320px){
  .news-home{
    height: 635px;
  }
  .news-home .info-box-items li .source{ font-size: 12px; border: 1px solid #ccc; padding: 5px 5px; margin-right: 0px}
}

@media all and (-ms-high-contrast:none)
{
  .news-home { background: url(../images/bg-news.jpg) no-repeat left center;  padding-bottom: 28%;} /* IE10 */
*::-ms-backdrop, .news-home { background: url(../images/bg-news.jpg) no-repeat left center;padding-bottom: 28%;} /* IE11 */
}

@supports (-ms-ime-align:auto)
and (-webkit-text-stroke:initial) {
  .news-home { background: url(../images/bg-news.jpg) no-repeat left center;padding-bottom: 25%;} 
}

/* app-system-home */
.app-system-home .container {
  background-position: left top;
  background-size: 25% 25%;
  background-image: 
  linear-gradient(to right, #e5e5e5 1px, transparent 1px);
  /* linear-gradient(to bottom, #efefef 1px, transparent 1px); */
  border-right:1px solid transparent;
  padding-top: 65px;
  padding-bottom: 65px;
  
}
.app-box:nth-child(1){position: relative;left:-18px;}
.app-box:nth-child(2){position: relative;left:-10px;}
.app-box:nth-child(3){position: relative;left:-3px;}
.app-box:nth-child(4){position: relative;left:3px;}
.app-box li a{
  border-left:6px solid #efefef;
  padding-left: 8px;
  transition: .7s;
  line-height: 30px;
}
.app-box li a:hover{ 
  border-left:6px solid rgba(30, 33, 136, 1);
  padding-left: 8px;
  text-decoration: none;
}
.qr-code{ margin-top: 55px; position: relative;}
.qr-code .area{ 
  margin: 0;
  padding: 0;
  background:linear-gradient(to bottom, #fff 10px, transparent 1px),linear-gradient(to top, #fff 10px, transparent 1px);
  background-color: #f5f5f5;
  
}
.qr-code .google,
.qr-code .apple {}
.qr-code .google .aa,
.qr-code .apple .aa{text-align: right;}
.qr-code .google .aa img,
.qr-code .apple .aa img{width: 120px;padding: 7px; margin:0x; background-color: #fff; border-radius: 3px;box-shadow: 0 2px 15px #ccc;}
.qr-code .google .bb img,
.qr-code .apple .bb img{ width: 220px;}



@media screen and (min-width: 768px) and (max-width: 1024px){
  .app-box:nth-child(1){position: relative;left:-18px;}
  .app-box:nth-child(2){position: relative;left:-3px;}
  .app-box:nth-child(3){position: relative;left:-18px;}
  .app-box:nth-child(4){position: relative;left:-3px;}
}


@media screen and (max-width: 767px){
.app-system-home .container {
    padding-top: 25px;
    padding-bottom: 35px;
    background:#fff;
    overflow-x: hidden;
  }
.app-system-item h5{ border: 1px solid rgba(30, 33, 136, 1);padding: 5px; text-align: center;}
.app-system-item .navbar-toggler{ display: block;font-size: 18px!important}
.app-system-item .navbar-toggler i{ float: right;}
.app-box{ padding: 30px 0;}
.app-box ul{ 
  width: 85%;
  margin: 0 auto;
}
.app-box:nth-child(1){position: relative;left:0px;}
.app-box:nth-child(2){position: relative;left:0px;}
.app-box:nth-child(3){position: relative;left:0px;}
.app-box:nth-child(4){position: relative;left:0px;}
.app-box li{font-size: 16px;line-height: 40px; border-bottom: 1px dashed #ccc;}
.qr-code{ margin:20px auto 0; width: 95%}
}

/* side-map */
.side-map{ background-color: #f5f5f5}
.side-map h5{
  color:rgba(30, 33, 136, 1);
  border-bottom: 1px solid #d8d8db;
  font-size: 15px;
  padding-bottom: 8px;
}
.side-map li{
  font-size: 12px;
  line-height: 24px;
}
@media screen and (max-width: 1023px){
  .side-map h5{ border: 1px solid rgba(30, 33, 136, 1);padding: 5px;}
  .side-map .navbar-toggler{ display: block;font-size: 18px!important}
  .side-map .navbar-toggler i{ float: right;}
  .side-map ul{ margin-left:25px;padding-bottom: 30px; list-style-type: disc; color: #666;}
  .side-map li{font-size: 16px;line-height: 36px; border-bottom: 1px dashed #ccc;}
}

/* footer */
footer .custom-info{color:rgba(255, 255, 255, 1)}
footer .custom-info a{
  color: #fff;
}
.custom-info .icon { 
  display:inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  vertical-align: middle;
  margin-top: -5px;
  margin-right: 8px;
}
.custom-info .location{
	display:inline-block;
  background: url(../images/icon-custom-01.svg) no-repeat center center #fff;
  background-size: 55% 55%;
} 
.custom-info .tel{
	display:inline-block;
  background: url(../images/icon-custom-02.svg) no-repeat center center #fff;
  background-size: 55% 55%;
} 
.custom-info .mail{
	display:inline-block;
  background: url(../images/icon-custom-03.svg) no-repeat center center #fff;
  background-size: 55% 55%;
}
.custom-info .fb{
	display:inline-block;
  background: url(../images/icon-custom-04.svg) no-repeat center center #fff;
  background-size: 55% 55%;
}

footer p{
  margin: 0; padding: 0;
  font-size: 12px;
  color:rgba(255, 255, 255, 1);
  letter-spacing: 1px;
}
/* @media screen and (min-width: 768px) and (max-width: 1024px){
  .custom-info li{ margin: 15px 0 5px; letter-spacing: 1px;}
  .custom-info .icon { width: 30px;height: 30px;}
} */
@media screen and (max-width: 1024px){
  .custom-info li{ margin: 15px 0 5px; letter-spacing: 1px;}
  .custom-info .icon { width: 30px;height: 30px;}
}

@media screen and (max-width: 768px){
.scroll-area {
  width: 45px;
  height: 45px;
  position: absolute;
  margin-top: calc(70vh - 15px);
  cursor: pointer;
  z-index: 1000;
  right: 15px;
  background:rgba(0, 0, 0, 1);
  color: #fff;
  font-size: 15px;
  border-radius: 50%;
  text-align: center;
  border: 3px solid #fff;
}
.scroll-area .scroll {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: calc(50% - 5px);
  line-height: 45px;
  color: #fff;
}

.scroll-area .scroll::before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f107";
}

.scroll-area .scroll.fade-one,
.scroll-area .scroll.fade-two {
  transition-duration: 500ms;
}

.scroll-area .scroll.fade-one {
  top: 0;
  opacity: 0.4;
  -webkit-animation: downOne 3s infinite;
}

.scroll-area .scroll.fade-two {
  top: 0;
  opacity: 0.2;
  -webkit-animation: downTwo 3s infinite;
}

@-webkit-keyframes downOne {
  0% {
    transform: translateY(0);
  }
  25%, 75% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes downTwo {
  0% {
    transform: translateY(0);
  }
  25%, 75% {
    transform: translateY(30%);
  }
  100% {
    transform: translateY(0);
  }
}

}

/* top */
#gotop {
  display:none;
  position: fixed;
  right: 30px;
  bottom: 80px;
  cursor: pointer;
  background:rgba(0, 0, 0, 1);
  color: #fff;
  width:50px;
  height:50px;
  text-align: center;
  z-index:10;
  border-radius: 50%;
  padding-top: 10px;
  /* transition: .5s; */
  padding-left: 3px;
  font-size: 12px;
}
#gotop:hover{
  bottom: 75px;
  transition: .5s;
}
#gotop i{display: block;}
@media only screen and (max-width: 768px) {
#gotop {right: 15px;bottom: 55px;}
#gotop:hover{
  bottom: 50px;
  transition: .5s;
}
}