/* guide line setup */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
.title {
  font-size: 55px;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 4px;
}

.content {
  font-size: 18px;
  letter-spacing: 1px;
  color: #bdbdbd;
  line-height: 30px;
  font-family: 'Noto Sans TC', sans-serif;
}

.deco-bar {
  margin: 30px 0px;
  width: 80px;
  height: 5px;
}

.button {
  width: 200px;
  /* margin: 40px 20px 0 0; */
  margin-right: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.dl-btn{margin: 40px 0;}

@media screen and (min-width:640px) {
  .button:hover {
    transform: translateY(-5px);
  }
}

.button-div {
  font-size: 20px;
  font-family: 'Noto Sans TC', sans-serif;
  padding: 25px;
  border-radius: 100px;
  background-color: #0d9dd6;
  width: 100px;
  color: white;
  margin: 30px auto 0;
  transition: 0.3s;
  cursor: pointer;
}

.button-div:hover {
  transform: scale(1.1);
}

@media screen and (max-width:960px) {
  .title {
    font-size: 30px;
  }
  .content {
    font-size: 18px;
  }
}


/* navigation bar */

.nav {
  color: white;
  padding: 60px 0px;
  position: fixed;
  width: 100vw;
  overflow: hidden;
  margin: 0 auto;
  transition: 0.5s padding;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 999;
  background-color: white;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
  font-size: 15px;
}

.nav.scroll {
  padding: 40px 0;
}

.nav div span {
  color: rgb(13, 157, 214);
  font-family: 'Noto Sans TC', sans-serif;
  /* margin-left: 30px; */
  margin-left:20px;
  letter-spacing: 2px;
  cursor: pointer;
  opacity: 1;
  transition: 0.3s;
}

.nav div span i {
  margin-right: 7px;
}

.nav .text {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}

.nav div span:hover {
  opacity: .5;
}

.nav img {
  transition: 0.5s;
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  height: 65px;
  cursor: pointer;
}

.nav.scroll img {
  height: 50px;
}

.nav-mob {
  color: rgb(13, 157, 214);
  display: none;
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.2);
  background-color: white;
  text-align: center;
  padding: 20px 0;
  position: fixed;
  width: 100%;
  bottom: 0px;
  z-index: 999;
}

.nav-mob .text {
  display: flex;
}

.nav-mob .text div {
  flex: 1;
  cursor: pointer;
}

@media screen and (max-width:1600px) {
  .nav{font-size:14px;}
  .nav div span {margin-left:15px;}
  
}

@media screen and (max-width:1200px) {
  .nav{padding:30px 0;}
  .nav img{left:20px; height:40px;}

  .nav-mob {
    display: block;
  }

  .nav span {
    display: none;
  }
}


@media screen and (max-width:960px) {
  .nav {
    padding: 30px 0;
  }
  /* .nav-mob {
    display: block;
  } */
  .nav.scroll {
    padding: 30px 0;
  }
  /* .nav span {
    display: none;
  } */
  .nav img {
    left: 20px;
    height: 40px;
  }
  .nav.scroll img {
    left: 20px;
    height: 40px;
  }
}


/* hero page */

.hero {
  
  height: 960px;
  margin: 0 auto;
  position: relative;
  overflow: hidden
}

#slogan {
  text-align: center;
  position: absolute;
  max-width: 1080px;
  -ms-max-width: 860px;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#slogan-mb {
  position: absolute;
  -ms-max-width: 860px;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#scrolldown {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
}

@media screen and (max-width: 640px) {
  .hero {
    height: 100vh;
    padding: 0 0px;
  }
  .hero #slogan-mb {
    display: block;
  }
  #slogan {
    display: none;
  }
}


/* about section */

.about {
  color: white;
  padding: 140px 0;
  text-align: center;
}

.about .content {
  color: rgb(221, 221, 221);
  max-width: 630px;
  margin: 0 auto;
}

@media screen and (max-width:640px) {
  .about {
    padding: 80px 30px;
  }
}


/* manage section */

.manage {
  padding: 140px 0;
  text-align: center;
  position: relative;
}

.manage .content {
  max-width: 630px;
  margin: 0 auto;
  color: rgb(73, 73, 73);
}

.wrapper-manage {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 40px auto 0 auto;
  max-width: 1368px;
  padding: 30px;
  display: flex;
}

.manage-item {
  flex: 1;
  font-family: 'Noto Sans TC', sans-serif;
}

@media screen and (max-width:640px) {
  .manage {
    padding: 80px 30px;
  }
  .wrapper-manage {
    display: block;
  }
  .manage-item {
    padding-top: 40px;
  }
}


/* app download section*/

.app {
  position: relative;
  color: rgb(42, 42, 42);
  display: flex;
  background-color: rgb(233, 233, 233);
}

.img-app {
  flex: 1;
  background-image: url("assets/phone-app.jpg");
  background-size: cover;
  background-position: center center;
  min-width: 50vw;
  max-width: 50vw;
}

.text-app {
  flex: 1;
  padding: 100px 80px;
  position: relative;
}

.text-app .content {
  max-width: 500px;
  color: rgb(73, 73, 73);
}

@media screen and (max-width:1280px) {
  .app {
    display: block;
  }
  .img-app {
    max-width: 100vw;
  }
  .text-app {
    text-align: center;
    padding: 60px 30px;
  }
  .text-app .content {
    margin: 0 auto;
  }
  .img-app {
    height: 400px;
  }
  .button {
    width: 43%;
    max-width: 300px;
    /* margin: 30px 10px; */
    margin: 0 10px;
  }
}

@media screen and (max-width:360px) {
  .button{margin:0 10px 20px 10px;}
}


/* trade */

.trade {

  position: relative;
  padding: 140px 0;
  text-align: center;
  color: rgb(42, 42, 42);
}

.trade .content {
  color: rgb(73, 73, 73);
  max-width: 630px;
  margin: 0 auto;
}

.trade a {
  text-decoration: none;
}

@media screen and (max-width:640px) {
  .trade {
    padding: 80px 30px;
  }
}


/* contact */

.contact {
  
  position: relative;
  padding: 140px 0;
  color: white;
  text-align: center;
}

.contact .content {
  max-width: 630px;
  margin: 0 auto;
  color: #d4d4d4;
}

.wrapper-contact {
  max-width: 960px;
  margin: 40px auto 0 auto;
  display: flex;
}

.contact-item {
  flex: 1;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
}

.contact-item span {
  font-size: 20px;
}


/* this is the mail to link å*/

.contact-item a {
  text-decoration: none;
  color: white;
}

@media screen and (max-width:640px) {
  .contact {
    padding: 80px 30px;
  }
  .wrapper-contact {
    display: block;
  }
  .contact-item {
    line-height: 25px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .contact-item p {
    margin: 0px;
  }
}


/* footer */

.footer {
  padding: 30px 0;
  margin: 0 auto;
  background-color: #2a2d30;
  text-align: center;
}

.footer span {
  color: #5b6168;
  font-size: 15px;
  font-family: 'Noto Sans TC', sans-serif;
}

@media screen and (max-width:960px) {
  .footer {
    height: 80px;
  }
}

/* policy */
.policy-link{color:rgb(13, 157, 214); text-decoration:none; transition:all .3s;}
.policy-link:hover{color:#bdbdbd;}

.policy{
  padding-top:125px; background-color:rgb(233, 233, 233);
}

.policy-company, .policy-title{text-align:center;}
.policy-company{font-size:24px; padding-top:25px;}
.policy-title{font-size:32px; margin:20px auto 30px;}

.policy-disclaimer{font-size:20px; margin:50px auto 25px; text-align:center;}

.policy-deco{text-align: center}

.policy .content{
    max-width:630px;
    margin:25px auto 0;
    padding-bottom:25px;
    color:rgb(73, 73, 73);
  }

.mb-2{margin-bottom:35px;}
.mt-4{margin:40px 0;}

.policy ul{padding-left:20px;}
.policy b{color:rgb(13, 157, 214);}

@media screen and (max-width: 1280px){
  .policy{padding: 60px 30px;}
}


/* update 20191009 */
/* exchange, saving & form section */

.exchange, .saving{padding:140px 0; text-align:center; font-family:'Noto Sans TC', sans-serif; background:rgb(233,233,233);}
.form{padding:140px 0; text-align:center; font-family:'Noto Sans TC', sans-serif; background:#EFEFEF;}
.exchange .content, .saving .content{color:rgb(73, 73, 73);}

.exchange_icon{width:120px; margin:20px auto;}

.exchange-container{margin-top:75px; color:rgb(73, 73, 73);}
.exchange-container .exchange_icon{width:100px;}
.exchange-content{max-width:1000px; margin:40px auto 0; flex-wrap:wrap;}
.exchange-intro{width:50%;}
.exchange-intro .content{padding:15px 40px 25px;}

.slider-container{max-width:1000px; width:75%; margin:0 auto; position:relative;}

.arrow-btn{display:flex; width:100%; position:absolute; top:30%; transform:translateY(-50%)}

.slick-dots{display:flex;justify-content:center; padding-left:0; margin:50px auto 0;}
.slick-dots ul{margin-block-end:0!important;}
.slick-dots li{position:relative; display:inline-block; margin:0 2px; padding:0; cursor:pointer;}

.arrow_img{height:40px; width:40px; opacity:.5; transition:all .3s;}
.arrow_img:hover{opacity:1;}

.prev{position:absolute; left:-40px; cursor:pointer;}
.next{position:absolute; right:-40px; cursor:pointer;}

.slick-dots li button{font-size:0; line-height:0; display:block; width:20px; height:20px; padding:5px; cursor:pointer; color:transparent; border:0; outline:none; background:transparent;}
.slick-dots li button:before{content:'•'; font-size:24px; line-height:20px; position: absolute; top:0; left:0; width:20px; height:20px; text-align:center; opacity:.25; color:black; transition:all .3s;}

.slick-dots li button:hover:before{opacity:1; color:rgb(13, 157, 214);}

.d-flex{display:flex;}

.saving .d-flex{text-align:left; justify-content:center;}
.form-group{margin:0 auto 30px; max-width:1368px; padding:30px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.form-group a{color: rgb(13, 157, 214);}
.form-details .form-group{border-bottom:0;}
.form-left{margin-right:30px; width:160px;}
.form-right{width:470px;}
.form-row{margin-bottom:12px;}
.form-twoline{height:60px; display:flex; align-items:center;}
.form-paragraph{text-align:left; margin:12px auto 0; max-width:630px;}

.saving .contact-item{margin-bottom:40px}

.form-container{max-width:1200px; margin:0 auto;}
.form .d-flex{justify-content:center;}
.form .d-flex div{margin:8px 20px;}

.dl-form{width:33.33%; text-align:center;}

.form-left, .form-right{margin-bottom:15px;}

@media screen and (max-width:640px){
  .saving .contact-item{border:0; padding:0;}
}

@media screen and (max-width:768px){
  .exchange-intro{width:100%;}
  .exchange-container .contact-item, .exchange-intro .contact-item{border:0; text-align:center;}
  .saving .d-flex{padding: 0 0 20px; flex-direction:column; text-align:center;}
  .form .d-flex{flex-direction:column; align-items:center;}
  .dl-form{width:80%;}
  .form-left, .form-right{width:100%; margin-bottom:auto;}
  .form-twoline{height:auto; text-align:center; display:inline;}
}