img{
 -moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
user-select: none;
}

.zoom-in {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 400ms;
  animation-duration: 400ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

* {
  margin: 0;
  padding: 0;
          box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.loading-page.hide,
.transition-page.hide,
*.hide {
  display: none !important;
}
*::before,
*::after {
          box-sizing: inherit;
  -webkit-box-sizing: inherit;
}
.loading-page {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
}
.loading-page::before {
  display: block;
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('../images/loading.gif') center center no-repeat;
  background-size: 40px 40px;
  z-index: 1000;
}
html, body {
  width: 100%;
  height: 100%;
  max-height: 99999px;
  background-color: #f3f3f3;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  letter-spacing: 1px;
  overflow: hidden;
}
body.fixed {
  overflow: hidden;
}
input,
input[type="tel"],
input[type="text"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: 1.7em;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  font-size: 1.4em;

  outline: none;
}

/*iphone5*/
@media screen and (max-width:320px) { 
  #txtName,#txtPhone,#txtEmail{
    font-size: 19px;
  }}




a {text-decoration: none;}
img {display: block;}

.w-100,
.img-frame img,
.a-img-center img,
.a-img img,
a img {width: 100%;}

.img-a,
.a-img,
.pos-a/* 針對其他容器 */ {
  position: absolute;
  top: 0;
}
.img-a-center,
.a-img-center,
.pos-a-center /* 針對其他容器 */ {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  background-color: #f3f3f3;
}
.container {
  width: 100%;
  height: 100%;
}
/* menu */
.container-menu {
  z-index: 120;
  background-color: rgba(0, 0, 0, 0.8);
}
.bg-menu {
  width: 100%;
  height: 100%;
  right: 0;
  background-color: #fff;
}
.btn-nav {
  width: 60%;
}
.btn-nav-1 {
  left: 20%;
  margin-top: 25%;
}
.btn-nav-2 {
  left: 20%;
  margin-top: 48%;
}
.btn-nav-3 {
  left: 21%;
  margin-top: 71%;
}

.btn-nav-4 {
  left: 20%;
  margin-top: 92%;
}
.btn-nav-5 {
  left: 21%;
  margin-top: 115%;
}

.btn-menu-close {
  width: 10%;
  right: 5%;
  margin-top: 3%;
}
.btn-menu {
  width: 10%;
  right: 5%;
  margin-top: 3%;
  z-index: 100;
}
/* index */
.container-index {
  overflow: hidden;
}
.btn-ready {
  width: 44.5%;
  margin-top: 104%;
  z-index: 100;
}



@media screen and (min-width: 641px) {
  .wrapper {
    width: 56.338vh;
    /* 640/1386 */
    height: 100%;
  }
  .btn-terms-close {
    right: 15%;
  }
  .loading-page {
    width: 56.338vh;
    /* 640/1386 */
    height: 100%;
  }
}
.item-shake {
  -webkit-animation: shake 3s infinite linear forwards;
  animation: shake 3s infinite linear forwards;
}
.btn-tw {
  -webkit-animation: btn-bounce-in 1s infinite linear forwards;
  animation: btn-bounce-in 1s infinite linear forwards;
}
@-webkit-keyframes btn-bounce-in {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes btn-bounce-in {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
  }
}
@keyframes shake {
  from,
  to {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
  }
}

/*index*/

.index_logo{
     display: block;
    width: 40%;

    position: absolute;
    top: 1.5%;
    left: 5%;
}
.index_gif{
    display: block;
    width: 43%;
    position: absolute;
    margin-top: 73.4%;
    left: 27.5%;
}

/*index-animate*/

#index-ani1{
display: block;
    width: 20%;
    position: absolute;
    margin-top: 18%;
    left: 2%;
    z-index: 0;
    animation-name:index-ani-one;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes index-ani-one{
    to{margin-top: 19%;}
  }


#index-ani2{
display: block;
    width: 24%;
    position: absolute;
    margin-top: 45%;
    left: 0;
    z-index: 0;
    animation-name:index-ani-two;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes index-ani-two{
    to{margin-top: 46%;}
  }

#index-ani3{
display: block;
    width: 26%;
    position: absolute;
    margin-top: 60%;
    left: -1%;
    z-index: 0;
    animation-name:index-ani-three;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes index-ani-three{
    to{margin-top: 61%;}
  }

#index-ani4{
display: block;
    width: 26%;
    position: absolute;
    margin-top:85%;
    left: 0%;
    z-index: 0;
    animation-name:index-ani-four;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes index-ani-four{
    to{margin-top: 86%;}
  }

#index-ani5{
display: block;
    width: 26%;
    position: absolute;
    margin-top:19%;
    left: 71%;
    z-index: 0;
    animation-name:index-ani-five;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes index-ani-five{
    to{margin-top: 20%;}
  }

#index-ani6{
display: block;
    width: 22%;
    position: absolute;
    margin-top:34%;
    left: 78%;
    z-index: 0;
    animation-name:index-ani-six;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes index-ani-six{
    to{margin-top: 35%;}
  }

#index-ani7{
display: block;
    width: 23%;
    position: absolute;
    margin-top:75%;
    left: 76%;
    z-index: 0;
    animation-name:index-ani-seven;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes index-ani-seven{
    to{margin-top: 76%;}
  }


/*sec2-draw*/

.description{
  /*display: none;*/
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.drawbtn{
  width: 10%;
}


.draw-canvas{
      display: block;
    width: 85%;
    position: absolute;
    margin-top: 48%;
    left: 7%;
}

.sec_2_title{
display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 7%;
}

#sec2-title-font{
    font-size: 1.45em;
    font-weight: bold;
    position: absolute;
    margin-top: 23.5%;
    margin-left: 17%;
    letter-spacing: 0px;
}


@media screen and (min-width: 641px){
#sec2-title-font{
    margin-left: 20%;
    margin-top: 24%;
    font-size: 1.5em;

}}

/*iphone5*/
@media screen and (max-width:320px) { 
#sec2-title-font{
    margin-left: 17.8%;
    margin-top: 23.5%;
    font-size: 1.25em;

}}

#sec2-change-icon{
margin-top: 23.5%;
    margin-left: 68.9%;
    width: 4.5%;
}
@media screen and (min-width: 641px){
  #sec2-change-icon{
    margin-top: 24%;

    }}

    
.draw-btn :visited {
  opacity:0.5;
}


.draw-btn :hover {
  opacity:0.5;
}

.draw-btn :focus {
  opacity:0.5;
}

.draw-1,.draw-2,.draw-3,.draw-4,.draw-5{
    display: block;
    width: 13%;
    position: absolute;
    margin-top: 33.6%;
}

.draw-1{left: 10%;}

.draw-2{left: 26%;}

.draw-3{left: 42%;}

.draw-4{left: 58%;}

.draw-5{left: 75%;}


.draw-ok-btn{
    display: block;
    width: 47%;
    position: absolute;
    margin-top: 128%;
    left: 25%;
}


/*sec3-draw-finish*/
.draw-canvas-finish{
    display: block;
    width: 85%;
    position: absolute;
    margin-top: 21%;
    left: 7%;
}

.finish-btn-all{
  display: block;
  width: 80%;
  position: absolute;
  top: 62%;
}

.draw-canvas-pic{
    margin-top: 24%;
    margin-left: 20%;
    width: 70%;
}
#finish-btn1{
    width: 40.9375%;
    left: 6.25%;
    margin-top: 110%;
}

#finish-btn2{
    width: 40.9375%;
    left: 52.8125%;
    margin-top: 110%;

}

#finish-btn3{
    width: 40.9375%;
    left: 6.25%;
    margin-top: 123%;
}
#finish-btn4{
display: block;
    width: 40.9375%;
    left: 52.8125%;
    margin-top: 123%;
}

.draw-canvas-logo{
display: block;
    width: 21%;
    position: absolute;
    margin-top: 87%;
    left: 62%;
    z-index: 1; 
}


/*sec4-form*/

.pos-a-center /* 針對其他容器 */ {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

.label-el {
  width: 88%;
  padding-top: 8.5%;
}


/* form */
.label-name,
.txt-name {
  margin-top: 42.5%;
}
.label-phone,
.txt-phone {
  margin-top: 59%;
}
.label-email,
.txt-email {
  margin-top: 75%;
}
.label-el {
  width: 88%;
  padding-top: 8.5%;
}
.input-el {
  width: 53%;
  padding-left: 3%;
  left: 32%;
}
.btn-chk {
width: 4.843%;
    left: 22.2%;
    margin-top: 93%;
}
.chk-agree {
  left: -50%;
  opacity: 0;
}
.label-agree {
  width: 90%;
  left: 5%;
  margin-top: 82%;
  padding-top: 14%;
}
.btn-terms {
  width: 40.9375%;
  left: 6.25%;
  margin-top: 107%;
}
.btn-submit {
  width: 40.9375%;
  left: 52.8125%;
  margin-top: 107%;
}
/* terms */
.btn-terms-close {
  width: 5.625%;
  right: 13%;
  margin-top: 18%;
}
.inner-container-terms {
  width: 80%;
  height: 69vh;
  margin-top: 15%;
/*  background-color: rgba(0, 0, 0, 0.93);
  border: 4px solid #d9aa11;*/
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.link-terms {
  padding-top: 6%;
}
.link-terms-1 {
  width: 87%;
  left: 8%;
  margin-top: 283.5%;
}
.link-terms-2 {
  width: 77%;
  left: 13%;
  margin-top: 310.5%;
}
.link-terms-3 {
  width: 36%;
  left: 13%;
  margin-top: 351.5%;
}
.link-terms-4 {
  width: 69%;
  left: 5%;
  margin-top: 534.5%;
}

.check{
    width: 65%;
    position: absolute;
    top: 41%;
    left: 30%;
}



  /* gallery */

.gallery-left1{
  position: absolute;
    width: 40.9375%;
    left: 6.25%;
}

.gallery-left1 img{
    margin-top: 81%;
  }

.gallery-title1{
margin-top: 176%;
    position: absolute;
    padding-left: 10px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0;
}
.gallery-fb1{
    margin-top: 187%;
    position: absolute;
    font-size: 13px;
    color: gray;
    padding-left: 10px;
}

.gallery-right1{
    position: absolute;
    width: 40.9375%;
    left: 52.8125%;
}
.gallery-right1 img{
margin-top: 85%;
}

.gallery-title2{
  margin-top: 180%;
  position: absolute;
  padding-left: 10px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0;
}

.gallery-fb2{
    margin-top: 191%;
    position: absolute;
    font-size: 13px;
    color: gray;
    padding-left: 10px;
}



.gallery-left2{
  position: absolute;
  width: 40.9375%;
  left: 6.25%;
}

.gallery-left2 img{
margin-top: 207%;
}


.gallery-title3{
  margin-top: 302%;
  position: absolute;
  padding-left: 10px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0;
}
.gallery-fb3{
    margin-top: 313%;
    position: absolute;
    font-size: 13px;
    color: gray;
    padding-left: 10px;
}

.gallery-right2{
  position: absolute;
    width: 40.9375%;
    left: 52.8125%;
}


.gallery-right2 img{
margin-top: 212%;
}

.gallery-title4{
    margin-top: 307%;
    position: absolute;
    padding-left: 10px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0;
}
.gallery-fb4{
    margin-top: 318%;
    position: absolute;
    font-size: 13px;
    color: gray;
    padding-left: 10px;
}

.gallery-pic{
  z-index: 0;
  max-width: 90%;
  padding-top: 1%;
  left: 7%;
}

.gallery-form{
  z-index: 1;
}

@media screen and (max-width:320px) {
  .gallery-title1,.gallery-title2,.gallery-title3,.gallery-title4{
font-size: 14px;
  }}
@media screen and (max-width:320px) {
  .gallery-fb1,.gallery-fb2,.gallery-fb3,.gallery-fb4{
    padding-top: 2px;
    font-size: 12px;
  }}



/* gallery_pager */

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
div.pager {
  width: 100%;
  position: absolute;
  top: 0;
    text-align: center;
    margin-top: 137%;
    font-size: 14px;
}

ul.pagination li {
  display: inline;
}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 9px;
    text-decoration: none;
}

ul.pagination li a.active {
    color: #c3c3c3;
}

ul.pagination li a:hover:not(.active) {
/*  background-color: #ddd;*/

}

/*  popup */

.popup-container {
    position: fixed;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    height: 100%;
    margin: auto;
    background-color: rgba(255, 255, 255, 30%);
    top: 0;
    right: 0;
    left: 0;
    z-index: 500;

  }

  .popup-container {
    overflow: hidden;
  }

  .btn-close-bg {
    position: absolute;
    width: 11%;
    top: 0;
    right: 4%;
    margin-top: 3.6%;
    z-index: 99;
}

.btn-close {
    display: block;
    position: absolute;
    width: 15%;
    padding-top: 12%;
    top: 0;
    right: 2%;
    margin-top: 2.5%;
    z-index: 100;
    }



.flex-terms-area {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
/*    margin-top: 4%;*/
    flex-direction: column;
}

.w-100 {
    width: 100%;
}

.bg-terms-board {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
/*    padding: 0 10%;*/
    color: #fff;
    font-size: 1.2em;}
.bg-board {
    background-size: 100% auto;}


  .bg-board {
    background-size: 100% auto;}

  .bg-terms-board img {
    width: 100%;}


.head-terms {
    width: 40.78125%;
    left: 18%;
    margin-top: 10%;
}



.inner-terms-board {
    /* position: relative; */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    /* background-color: #fff; */
    -webkit-overflow-scrolling: touch;}


@media screen and (min-width: 641px){
.popup-container, .menu-active .nav-container {
    width: 56.338vh;
    height: 100%;
}}

/* popup */

.img-a-center, .a-img-center, .pos-a-center{
  position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}
.inner-container-terms{
width: 80%;
    height: 69vh;
    margin-top: 15%;
/*    background-color: #fff;
    border: 7px solid #000000;*/
    overflow-y: auto;
}

.link-terms-1{
width: 87%;
    left: 8%;
    margin-top: 283.5%;
}

.link-terms-2{
    width: 77%;
    left: 13%;
    margin-top: 310.5%;
}

.link-terms{
  padding-top: 6%;
}

.link-terms-3 {
    width: 36%;
    left: 13%;
    margin-top: 351.5%;}




.canDrawBG{
  position: absolute;
  top: 0;

  /*border:1px solid #ff00ff;*/
  /*z-index: 999;*/
  /*top:-90%;*/
  /*background-color: #ccc;*/
}

.canDrawMain{
  
  position: absolute;
  top: 2%;
  width: 71%;
  left: 14%;
  height: 40%;

  /*background-color: #999;*/
 /*border: 1px solid #ff00ff;*/
}

#canLogo{
  /*border: 1px solid #ff0000;*/
}

#FBcanvas{
  /*position: absolute;
  top:0;
  left:0;

  border: 1px solid #ff00ff;
  z-index: 999;*/
}

.preloader{
  display: none;
}


/* joy */

.bg-board{
  background-color: #fff;
}

#containerTerms {
    background-color: rgb(0,0,0,50%);
  }

.inner-container-terms {
    width: 90%;
    height: 60vh;
    margin-top: 20%;
    background-color: #fff;
    overflow-y: auto;
    border-radius: 10px;}


    .btn-terms-close {
    width: 8.625%;
    right: 7%;
    margin-top: 22%;
    }




#containerTerms{
  background-color: rgb(0,0,0,50%);
}


.scroll_n{
  overflow-y: scroll;
    position: absolute;
    overflow-x: hidden;
    width: 100%;
    height: 96%;
    background-color: #fff;
      -webkit-overflow-scrolling: touch;
}

.containerWrapper .wrapper .terms-container .popup-container #termsContainer .flex-terms-area{
  background-color: #000000;
}