/* screenwidth less than or equal 1280px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1280px) {
#Rb01 .push-9{
  left:66%;
}
}
/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

/* Rb01
------------------------------------------------------------------ */
.rb01{
  left: 35%;
  margin-left: -150px;
}
	
#Rb01 .push-9{
  left: 50%;
}	

/* Rb02
------------------------------------------------------------------ */
#Rb02 .section-head h1{
  padding: 0 120px;
}

/* Rb04
------------------------------------------------------------------ */
.rb04-img{
  width: 1000px;
  right: 0;
}



/**--Alert--**/
.al{
  position: relative;
  text-align: left;
  background: #fff;
  margin: 50px 50px;
  padding: 20px 35px;
  z-index: 999999999;
  max-height: 700px;
}


.albtn{
  position: absolute;
  right:20px;
  top:15px;
}

   
}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

	/* General and Common Styles */
	 .section-head h1 { font: 26px/26px '微軟正黑體','roboto','opensans-light', sans-serif; line-height: 1.2em;}
   .section-head2 h1 { font: 26px/26px '微軟正黑體','roboto','opensans-light', sans-serif; line-height: 1.2em; }
   .section-head3 h1 { font: 26px/26px '微軟正黑體','roboto','opensans-light', sans-serif; line-height: 1.2em; }
   #hero {
   padding-top: 50px;
   background: url(../images/indexbg480.jpg)no-repeat center center; 
  -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   overflow: hidden;


   /* Footer
   ------------------------------------------------------------------- */
   footer .right-cols .columns { width: 50% !important; }
   footer .right-cols .columns:last-child { 
      clear: left; 
      float: left;      
   }

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

	/* General and Common Styles */
	.section-head ,.section-head2,.section-head3 { padding: 0 30px; }

/*----------------------------------------------*/
/*  Rb01
/*----------------------------------------------*/

#Rb01 {
  padding: 100px 0 0 0; 
  text-align: center;
  height: 1300px;
}

.rb01{
  position: absolute;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  margin-top: 350px;
}
#Rb01 .push-9{
  left: 0;
}

.rb01-t{
  margin-top: 100px;
  margin-bottom: 300px;
}

.rb01-btn{
  text-align: center;
  margin-top: 400px;
}

/* Rb02
------------------------------------------------------------------ */
#Rb02{
  padding: 200px 0;
}

#Rb02 .section-head h1{
  padding: 0px;
}

#Rb02 .row{
  width: 680px;
  }

/* ------------------------------------------------------------------ */
/*   Rb03
/* ------------------------------------------------------------------ */

#Rb03 {
  background: #8be0e7 url(../images/ZZZ_world_wide.jpg)50% 455px no-repeat;
  background-size: 480px;
  background-position: 50% 150px;
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

#Rb03 h1{
  text-align: center;
}


.rb03p{
  margin-top: 500px;
  text-align: center;
}


  
/* ------------------------------------------------------------------ */
/* Rb04
/* ------------------------------------------------------------------ */

#Rb04 { 
  padding: 100px 0;
}

.rb04-img {
    width: 1200px;
    right: -44%;
}

/* ------------------------------------------------------------------ */
/* Rb05
/* ------------------------------------------------------------------ */

#Rb05 img{
  position: absolute;
  top: -1100px;
  left: 50px;
  z-index: 2;
}

.row-rb05{
  width: 100%;
}

.c-rb05{
  z-index: 999;
  margin: 0;
  padding: 500px 300px 200px 50px;
}

/*---------------------------------------------------------------------OS----------------------------------------------------------------------------*/

/* ------------------------------------------------------------------ */
/* Os01
/* ------------------------------------------------------------------ */
#Os01{
  text-align: center;
  height: 1100px;
  padding: 100px 0 0 0;
}

.meet-robin-t{
  margin:100px 0 100px 0;
}

/*----------------------------------------------*/
/*  Os02
/*----------------------------------------------*/

#Os02{
  padding: 150px 0;
}

#Os02 .row{
  width: 600px;
}

/* ------------------------------------------------------------------ */
/*   Os03
/* ------------------------------------------------------------------ */

#Os03{
  text-align: center;
  height: 570px;
}

.col-os{
  position: absolute;
  margin-top: 175px;
}

#Os03 img{
  width: 400px;
}

#Os03 .Os03-t{
  margin: 0;
}

/* ------------------------------------------------------------------ */
/*   Os04
/* ------------------------------------------------------------------ */

#Os04, #Os05, #Os06{
  text-align: center;
  padding: 100px 0;
}

#Os04 .Os03-t{
  margin: 50px 0 50px 0;
}


/*---------------------------------------------------------------------DESING----------------------------------------------------------------------------*/

/* ------------------------------------------------------------------ */
/* De01
/* ------------------------------------------------------------------ */
#De01{
  height: 1000px;
}

#De01 .row-de01{
  width: 640px;
}

.de01-t{
  margin-top: 200px;
}

/* ------------------------------------------------------------------ */
/* De04
/* ------------------------------------------------------------------ */
#De04{
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* De05
/* ------------------------------------------------------------------ */
#De05 .row-de05{
  width: 720px;
}

/* ------------------------------------------------------------------ */
/* De07
/* ------------------------------------------------------------------ */
#De07{
  padding: 100px 0;
}

#De07 .row-gallery{
  width: 680px;
}

/* ------------------------------------------------------------------ */
/* De06
/* ------------------------------------------------------------------ */

#De06 { 
  background-position: 0 50%;
  padding: 200px 0 0 0;
  height: 1400px;
  background-size: 750px, auto;
}

/*---------------------------------------------------------------------SPEC----------------------------------------------------------------------------*/

/* ------------------------------------------------------------------ */
/* SP01
/* ------------------------------------------------------------------ */
#SP01 .row-sp01{
  width: 680px;
}

/* ------------------------------------------------------------------ */
/* Sp02
/* ------------------------------------------------------------------ */

#Sp02 { 
  background-position: 70% 300px;
  height: 1400px;
  background-size: 1200px;
}


/**--Alert--**/
.al {
    position: relative;
    text-align: left;
    background: #fff;
    margin: 60px 0px 500px 0px;
    padding: 25px 25px;
    z-index: 999999999;
    max-width: 1000px;
    max-height: 550px;
}

#Alert p, #Alert ul ,#Alert ul li{
  font-size: 13px;
  line-height: 18px;
}


.albtn{
  position: absolute;
  right:20px;
  top:15px;
}


/*---------------------------------------------------------------------*/
/*Information
/*---------------------------------------------------------------------*/
.info-header h1{
  font-size: 24px;
}

.info-img-l{
  display: none;
}

.info-img-s{
  display: block;
}
   
   /* footer
   ------------------------------------------------------------------------ */
   footer { text-align: center; }
   footer .info { padding-right: 30px; }
   footer .info p { margin-bottom: 18px; }
   footer h3:before { text-align: center; }
   footer .right-cols {       
      width: 90% !important;
      margin: 0 auto ;
      margin-bottom: 42px; 
      text-align: center;
   }
   footer .right-cols .columns {
      float: left;       
      padding: 0 30px;    
   }
   footer .right-cols .columns:last-child { 
      clear: both; 
      float: left;
   }   

   /* Go To Top Button */
   #go-top { margin-left: -22px; }
   #go-top a {
   	width: 54px;
   	height: 54px;
      font-size: 18px;
      line-height: 54px;
    }
}


}

/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   


/* Rb02
------------------------------------------------------------------ */
#Rb02 .row{
  width: auto;
  }

/* ------------------------------------------------------------------ */
/*   Rb03
/* ------------------------------------------------------------------ */

#Rb03 {
  background-size: 360px;
}

.rb03p {
  margin-top: 400px;
  text-align: center;
}


.rb04-img {
  right: -130%;
}


/* ------------------------------------------------------------------ */
/* Rb05
/* ------------------------------------------------------------------ */

#Rb05 img{
  position: absolute;
  top: -950px;
  left: 50px;
  z-index: 2;
}

.row-rb05{
  width: 400px;
}

.c-rb05{
  z-index: 999;
  margin: 0;
  padding: 300px 40px 150px 40px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Rb06
/* ------------------------------------------------------------------ */

#Rb06 {
  height: 800px;
  background-color: #000;
}

#Rb06 .rb06btn{
  margin-top: 400px;
}

/*---------------------------------------------------------------------DESIGN----------------------------------------------------------------------------*/

#De01{
  text-align: center;
}

#De01 .row-de01{
  width: auto;
}

.de02-img img{
  width: 90%;
}

.de04-t {
    margin-top: 50px;
}

#De04, #De05{
  padding: 50px 0;
}

#De04 img{
  width: 90%;
}

#De05 .row-de05{
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* De06
/* ------------------------------------------------------------------ */

#De06 { 
  background-position: 40% 50%;
  padding: 100px 0 0 0;
  height: 1200px;
  background-size: 500px, auto;
}

.slides{
  padding: 0;
  display: none;
}

.slides-m{
  padding: 0;
  display: block;
}

.row-gallery{
  width: auto;
}

#De07{
  padding: 0;
}

#De07 a{
  display: none;
}

/*---------------------------------------------------------------------SPEC----------------------------------------------------------------------------*/

/* ------------------------------------------------------------------ */
/* SP01
/* ------------------------------------------------------------------ */
#SP01{
  padding: 150px 0;
}

#SP01 .row-sp01{
  width: 390px;
}

#SP01 svg {
   margin-left: -25px; 
   padding: 50px 0;
}

#Sp02 { 
  background-position: 50% 500px;
  height: 1200px;
  background-size: 600px;
  padding: 150px 0;
}



   /* Footer
   ------------------------------------------------------------------- */
   footer .right-cols .columns { padding: 0 10px; }   
   .copyright p{
    font-size: 8px;
   }

 }   

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) { 

    /* Hero Section
   -------------------------------------------------------------------- */
   .hero-text { width: 70%;margin: 0 auto; }

   /* Pricing Section
   ------------------------------------------------------------------- */
   .pricing-tables { width: 92%; }

   /* Screenshots
   ------------------------------------------------------------------- */
   #screenshots-wrapper { width: 92%; }  

video{
  display: none;
}

.rb01-t {
  margin-top: 30px;
  margin-bottom: 300px;
}

.rb04-img {
    right: -158%;
}

#Os02 .row{
  width: auto;
}

.col-os {
    position: absolute;
    margin-top: 230px;
}

.c-rb05 {
  padding: 300px 0px 150px 0px;
}

.row-rb05{
  width: 100%;
}

#Os03 {
    text-align: center;
    height: 500px;
}

#Os04, #Os05, #Os06 {
  padding: 40px 0;
}

#SP01 .row-sp01 {
    width: auto;
}

.s-d{display: none;}

.slides{
  padding: 0;
}

.s-m{
  padding: 0;
  display: block;
}

/*---------------------------------------------------------------------*/
/*Information
/*---------------------------------------------------------------------*/
.info-header h1{
  font-size: 28px;
  line-height: 34px;
  margin: 15px 0 25px 0;
}

.info-box h1{
  font: 24px/24px "微軟正黑體",'opensans-light', sans-serif;
}

#Info{
  padding: 100px 50px 20px 50px;
}

#Info p{
  font-size: 16px;
  line-height: 25px;
}

.info-header2 h2{
  font-size: 16px;
}



} 

/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
   
   #nav-wrap ul#nav { display: block !important; }

}



@media only screen and (max-width: 414px) { 

    .hide{
      visibility: visible !important;
    }

    .animated {
     -webkit-animation-duration: 0s !important;
     animation-duration: 0s !important;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }

}