/* CSS Document */
@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

/* General usage */
html, body{ font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", "Helvetica", "Helvetica Neue", sans-serif; height:100%;}
#content-wrapper{ position:relative; }

/* lightbox & Loader */
.dialog,
.mask{ display:none; }
.dialog{ position:absolute; z-index:10000; }
.mask {position: fixed; top:0; left: 0; background: rgba(0,0,0,0.7); z-index: 9999; width: 100%; height: 100%;}
.premask {position: fixed; top:0; bottom:0; left:0; right:0; margin:auto; background: rgba(255,255,255,1); z-index: 10000; width: 100%; height: 100%; display:block;}
.btnclose{ position:absolute; top:0px; right:0px; cursor:pointer; z-index:5; display: inline-block; line-height: 0px; }
.btnclose:before { content: "×"; }
.cdialog{ position:fixed; top:0; bottom:0; left:0; right:0; margin:auto; }
.popcontent{ width:100%; height:100%; overflow-y:auto; position:relative; }

#loader{ position:fixed; top:0; bottom:0; left:0; right:0; margin:auto; z-index:10000; width: 40px; height: 40px;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

#loader .loader-cube{ float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
#loader .loader-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: loader-foldCubeAngle 2.4s infinite linear both;
          animation: loader-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
#loader .loader-cube1:before{ background-color:#D03A35; }
#loader .loader-cube2:before{ background-color:#FEC730; }
#loader .loader-cube3:before{ background-color:#47ADFA; }
#loader .loader-cube4:before{ background-color:#19B335; }

#loader .loader-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
#loader .loader-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
#loader .loader-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
#loader .loader-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#loader .loader-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
#loader .loader-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes loader-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes loader-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}


/* custom css start from below */
.btnclose{ top:20px; right:20px; color: #000; font-size: 50px; font-weight: bold; padding: 5px; }

.xcenter{ left:50%; -ms-transform: translate(-50%); -webkit-transform: translate(-50%); transform: translate(-50%); position:absolute; }
.ycenter{ top:50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); position:absolute; }
.ccenter{ top:50%; left:50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); position:absolute; }

.btntop{ display:none; position: fixed; border:1px #fff solid; background: #1A6EB1 url(../images/btn_top.svg) no-repeat center 50%; opacity:0.8; cursor:pointer; z-index: 10; }

body{ color:#FFF; background-color:#51AA39; letter-spacing:1px; }
.text-center{ text-indent:1px; }
a{ color:#FFF; }
a:hover{ color:#CCC; }

#content-wrapper{ margin:0 auto; width:100%; display:block; max-width:1920px; background-color:#51AA39; }

.spacer{ height:24px; }

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
.btntop{ height: 50px; width: 50px; bottom: 120px; right: 20px;}

.topmenu{ width:100%; background-color:#f8f9fa; }
.topmenu .navbar{ padding:.5rem 0; }

.cloud{ background:url(../images/cloud.png) center no-repeat; height:144px; color:#1A6EB1; font-weight:bold; text-align:center; }
.cloud span{ padding-left:inherit; line-height:130px; font-size:2rem; }

.iicon i{ font-size:5rem; }

.appstore, .googleplay{ height:50px !important; }
.storeicon{ padding:0 10px; }

.tnc li{ margin-bottom:25px; }

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
.cloud span{ font-size:3rem; }
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
.btntop{ height: 40px; width: 40px; }

.cloud{ background:url(../images/cloud.png) -500px center no-repeat; text-align:left; }
.cloud span{ padding-left:20px; line-height:130px; font-size:3rem; }
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
}

/*LiveChat Fix*/
#livechat-compact-container{ width:78px !important; z-index:1000 !important; }

.carousel-control.left,.carousel-control.right{ background-image:none;}

iframe[name='google_conversion_frame'] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px; float: left; }