/*

App Starter Template

http://www.templatemo.com/tm-492-app-starter

*/

body {
		background: #ffffff;
/*    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;*/
		font-weight: 300;
/*    padding-top: 70px;*/
    /*min-width: 370px;*/
    overflow-x: hidden;


}


/*---------------------------------------
    Typorgraphy              
-----------------------------------------*/


h1,h2,h3,h4,h5,h6 {
  font-weight: 400;
  letter-spacing: 1px;
  font-family: 微軟正黑體, arial;
}

h1 {
    color: #ffffff;
    font-size: 52px;
    letter-spacing: 2px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

h2 {
  color: #f0f0f0;
  font-size: 32px;
}

h3 {
  color: #535bd4;
  font-size: 22px;
  line-height: 32px;
  padding-bottom: 4px;
}

h4 {
  font-weight: bold;
}

p {
    color: #737373;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.4;
    text-align: left;
}

hr {
  border-bottom-color: #999;
  width: 100px;
}

span.detail {
  color: grey;
      display:inline-block;
    border-bottom:2px solid grey;
    padding-bottom:2px;
}



/*---------------------------------------
    General               
-----------------------------------------*/

html{
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

q
a:hover, a:active, a:focus {
  color: #3FF;
  outline: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-webkit-scrollbar{
  width: 0px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #ffffff;
}

.section-title {
  position: relative;
  padding-bottom: 62px;
  text-align: center;
}



/*---------------------------------------
    Preloader section              
-----------------------------------------*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background: none repeat scroll 0 0 #ffffff;
}

.sk-spinner-pulse {
  width: 60px;
  height: 60px;
  background-color: #1dc9e3;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
          animation: sk-pulseScaleOut 1s infinite ease-in-out; }

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }


/*---------------------------------------
    Home section              
-----------------------------------------*/

/*#home {
    background-size: cover;
    background-position: center center;
    color: #ffffff;

    display: flex;

    height: 100vh;
    position: relative;
}
*/

/*#home {
overflow-x: hidden;
}*/

#home .overlay {
  opacity: 0.9;
  position: absolute;
  width: 100%;
  height: 80vh;
  top: 0;
  left: 0;
  right: 0;
}


.banner {
  background: #ffffff url('../images/main_bg.png') no-repeat;
/*     max-width:100%;*/
width: 100vw;
   height:auto;
   max-height:100%;
}

#home .home-thumb {
  padding-top: 100px;
  padding-left: 32px;

}

#home p,
#newsletter p {
  color: #f0f0f0;
  letter-spacing: 1px;
}


#home .qrcodeIcon {
  width: 100px;
}

.phone-center {
      display: block;
    margin: 0 auto;
    padding-left: 40px;
}

  .colmunA {
    float: left;
    padding-top: 10%;
    padding-left: 2%;
    padding-bottom: 6%;
    width: 50%;
  }


  .colmunB {
    width: 100%;
    float: left;
    padding-left: 2%;
    padding-bottom: 6%;
    text-align: center;
  }

/*  .button_id { position: relative; left: 120px; top: 880px; margin: 20px}*/
  .button_store { position: relative; left: 8%; top: 90%; margin: 20px; width: 180px;}
    .button_qr { position: absolute; left: 8%; top: 80%}

  .button_store_w {width: 180px;}

  .button_qr_w {width: 100px}

  span.black {
    color: black;
  }







.squiggle {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: draw 2s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}




#desc_icon {
  max-width: 10%;
}




img.center {
    display: block;
    margin: 0 auto;
}



/* Description Section */

.test {
  
  display: flex;
  
  
  background-color: #ffffff;
  margin-left: 50px;
  margin-right: 50px;

}

#desc {
  overflow-x: hidden;
}

#desc .col-md-6 {
  width: 50%;
}

#download {
  max-width: 100%;
  overflow-x: hidden;
}

#desc h2 {
  font-size: 2em;
  line-height: 1.2;
  color: #12782d;
}

#desc #screen {
  max-width: 60%;
  max-height: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
}


.screen_desc{
  padding-top:30px;
  padding-bottom:10px;
  align-self: center
  
}

#phone_view .screen_desc{
  padding-top:30px;
  padding-bottom:10px;
  /*align-self: center*/
  
}

.phone{
  position:relative;
  text-align:center;
  overflow:hidden;

}

.download-section{
  padding:50px;
  background: #ffffff url('../images/intro_bg.png') no-repeat;
  background-size: cover;
  position: relative;

}

.download-text > h2{
  margin-top:0;
  font-size:48px;
  font-weight:300;
  margin-bottom:25px;
  color:#FFF;
  
}

.download-text > p{
  color:rgba(255,255,255,.8);
  font-size:16px;
  margin:0;
  
}
.download-btns{
  margin-top:45px;
  font-size:0;
}
.download-btns > .app-btn{
  margin:0 15px;
  text-align:left;
}

@supports ((max-width: -webkit-max-content) or (max-width: -moz-max-content) or (max-width: max-content)) {
  .layout__item--figure {
    min-width: 15rem;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    flex-basis: 15rem;
    -webkit-box-flex: 99999;
            flex-grow: 99999;
  }
}

/*---------------------------------------
   Mobile Responsive         
-----------------------------------------*/
@media (min-width: 992px) {
  .test {
    display: flex;
  }
  .test:nth-child(even) {
    flex-direction: row-reverse;
  }

}

@media (max-width: 1200px) {
  .container {
  width: 100%;

  }

}

@media (max-width: 980px) {

  h1 {
    font-size: 38px;
  }

  #home, #home .overlay {
    background-size: contain;
/*    height: 60vh;*/
  }

  #home .home-thumb {
    padding-top: 0px;
  }


}

@media (max-width: 900px) {
  .container {
  width: 100%;

  }

}


@media (max-width: 780px) {

   body {
    padding-top: 0px;
    text-align: center;
  }

    #desc #screen {
    max-width: 100%
  }

      #desc_icon {
    max-width: 20%
  }

  #phone_view  #desc_icon {
    max-width: 10%;
    padding-top:10%;
  }


  #home, #home .overlay {

/*    height: 100vh;*/
  }

}





@media (max-width: 650px) {

  h1 {
    font-size: 28px;
  }

  #desc h2 {
    font-size: 1.3em;
  }

  h3 {
    font-size: 18px;
  }

  p {
    font-size: 1em;
  }


  .phone-center {
      display: block;
    margin: 0 auto;
    padding-left: 0px;
    padding-top: 145px;
}
    .colmunB {
    width: 100%;
    float: left;
    padding-left: 8%;
    /*padding-bottom: 20%;*/
    margin-bottom: 138px;
    text-align: center;
  }



}

@media (max-width: 430px) {
      #desc #screen {
    max-width: 130%;
    padding-top:100%;
  }

        #phone_view #screen {
    max-width: 130%;
    padding-top: 0;
  }

      #desc_icon {
    max-width: 30%;
  }

    #phone_view #desc_icon {
    max-width: 13%;
    padding-top:20%;
  }

    #desc h2 {
    font-size: 1.3em;
  }

  p {
    font-size: 1em;
  }

  .test {
  
  display: flex;
  
  
  background-color: #ffffff;
  margin-left: 0px;
  margin-right: 0px;

}
}


.download-text p {
    text-align: center;
}