/*共通
----------------------------------------------*/

.whmenu.flex{
  align-items: flex-end;
}
.backtotop{
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 6%;
  right: 0.5%;
  z-index: 3;
  padding: 10px 5px;
  border-radius: 5px;
  border:1px solid #07173a;
  -o-transition:background .3s linear;
  -webkit-transition:background .3s linear;
  -moz-transition:background .3s linear;
  transition:background .3s linear;
  background-image: url(../image/backtotop.svg);
  background-repeat: no-repeat;
  background-position:center center;
  background-size: 100%;
}

.backtotop.white{
  border-radius: 5px;
  -o-transition:background .3s linear;
  -webkit-transition:background .3s linear;
  -moz-transition:background .3s linear;
  transition:background .3s linear;
  background-image: url(../image/backtotop-w.svg);
  background-repeat: no-repeat;
  background-position:center center;
  background-size: 100%;
  border:1px solid #fff;
}
.backtotop:hover{
  border-radius: 5px;
  cursor: pointer;
  -o-transition:background .3s linear;
  -webkit-transition:background .3s linear;
  -moz-transition:background .3s linear;
  transition:background .3s linear;
  background-image: url(../image/backtotop-w.svg);
  background-repeat: no-repeat;
  background-position:center center;
  background-color: #097cf2;
  background-size: 100%;
}

.br{
  display: block;
}
.contentarea{
  padding: 20px 0 40px 0 ;
}
.contenttitle{
  font-size: 1.5em;
  padding: 15px 0;

}
.breadarea{
  padding: 15px 0;
}
.bread{
  padding: 5px 0;
  line-height: 1.3em;
}
.bread a{
  color: #232323;
}

.bread a:hover{
  color: #097cf2;
}

.breadarea span:last-child{
  display: none;
}

.maincontent{
  padding: 15px 0;
}

.sidemenutitle{
  font-size: 1.5em;
  padding: 15px 0;
  font-weight: bold;
  border-bottom:2px solid #097cf2;
  margin: 0 0 10px 0;
  color: #097cf2;
}

.sidemenu{
  margin: 0 0 15px 0;
}

/*POPUP BTN*/
.popbtn{
  /*background: #f00;*/
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}
.popbtn a{
  width:30px;
  height:30px;
  /*background: #ff0;*/
}

.slide1 .pop1{ top: 43%;  left: 22%;}
.slide1 .pop2{ top: 54.5%;left: 41%;}
.slide1 .pop3{ top: 35%;  left: 53.5%;}
.slide1 .pop4{ top: 51%;  left: 69%;}
.slide1 .pop5,.slide1 .pop6{ display: none;}

.slide2 .pop1{ top: 41%; left: 16%;  }
.slide2 .pop2{ top: 55%; left: 29%;  }
.slide2 .pop3{ top: 38%; left: 43%;  }
.slide2 .pop4{ top: 55%; left: 57.5%;}
.slide2 .pop5{ top: 45%; left: 74%;  }
.slide2 .pop6{ display: none;}

.slide3 .pop1{ top: 48%; left: 26.5%;  }
.slide3 .pop2{ top: 48%; left: 47%;  }
.slide3 .pop3{ top: 39%; left: 68%;  }
.slide3 .pop4,.slide3 .pop5,.slide3 .pop6{ display: none;}

.slide4 .pop1{ top: 46%; left: 26.5%;  }
.slide4 .pop2{ top: 60%; left: 50.5%;  }
.slide4 .pop3{ top: 41.5%; left: 66.5%;  }
.slide4 .pop4,.slide4 .pop5,.slide4 .pop6{ display: none;}

.slide5 .pop1{ top: 43%; left: 13.5%;  }
.slide5 .pop2{ top: 57%; left: 27.5%;  }
.slide5 .pop3{ top: 35%; left: 40%;  }
.slide5 .pop4{ top: 63%; left: 51.5%; }
.slide5 .pop5{ top: 34%; left: 63.3%; }
.slide5 .pop6{ top: 60%; left: 75%; }

.wave{
  /*position:absolute;*/
  margin: 10px auto 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #E83828;
  cursor: pointer;
  transition: .5s ease;
  box-shadow: 0 0 0 rgb(232 56 40 / 40%);
  animation: pulse 1.5s infinite linear;
}
/*.wave0{
  z-index:2;
  background-size:auto 106%;
  -webkit-animation:w 1s infinite;
  animation: pulse 1.5s infinite linear;
}*/
/*.wave1{
  z-index:3;
  background-size:auto 102%;
  -webkit-animation:w 1s .2s infinite;
}
.wave2{
  z-index:4;
  background-size:auto 104%;
  -webkit-animation:w 1s .4s infinite;
}
.wave3{
  z-index:5;
  background-size:auto 101%;
  -webkit-animation:w 1s .5s infinite;
}
.wave4{
  z-index:6;
  background-size:auto 102%;
  -webkit-animation:w 1s .8s infinite;
}
.wave5{
  z-index:7;
  background-size:auto 100%;
  -webkit-animation:w 1s 1s infinite;
}
@-webkit-keyframes w{
  0%{
    top:calc((100% - 30px)/2);
    left:calc((100% - 30px)/2);
    width:30px;
    height:30px;
  }
  100%{
    top:calc((100% - 300px)/2);
    left:calc((100% - 300px)/2);
    width:300px;
    height:300px;
  }
}*/

@-webkit-keyframes pulse{
  0%{-webkit-box-shadow:0 0 0 0 rgba(232,56,40,.5)}
  50%{-webkit-box-shadow:0 0 0 25px rgba(232,56,40,.4)}
  70%{-webkit-box-shadow:0 0 0 30px rgba(232,56,40,0)}
  100%{-webkit-box-shadow:0 0 0 30px rgba(232,56,40,0)}}

@keyframes pulse{
  0%{-moz-box-shadow:0 0 0 0 rgba(232,56,40,.5);box-shadow:0 0 0 0 rgba(232,56,40,.7)}
  50%{-moz-box-shadow:0 0 0 25px rgba(232,56,40,.4);box-shadow:0 0 0 25px rgba(232,56,40,.4)}
  70%{-moz-box-shadow:0 0 0 30px rgba(232,56,40,0);box-shadow:0 0 0 30px rgba(232,56,40,0)}
  100%{-moz-box-shadow:0 0 0 30px rgba(232,56,40,0);box-shadow:0 0 0 30px rgba(232,56,40,0)}}



/*SALES COUNTRY*/
.countries{
  padding:1% 0;
  
}
.countries .consword{
  margin: 0% auto 0 auto;
  max-width: 90%;
  float: none;
}
.countrieslist{
  padding: 3px 1px;
  font-size: 0.85em;
}
.countrieslist a{
  padding:4px 1px;
  color: #fff;
  letter-spacing: 0px;
  text-align: center;
}
.countryworld{
  padding:5px 5px;
  margin: 3px 0;
}

/*cate*/
.catagories{
  margin: -3% 0 0 0;
  z-index: 2;
}
.cate{
  padding: 0px 0;
  background: #fafafa;
}
.cateselect{
  padding:0 5px;
  margin: 15px 0;
}

.catebtn{
  background: #DCDDDD;
  color: #5A5A5A;
  border-radius: 50px;
  text-align: center;
  padding: 10px 15px;
  max-width: 200px;
  height: 60px;
  line-height: 1.35em;
  margin: 0 auto;
  float: none;
  letter-spacing: 0px;
  font-weight: bold;
  display: flex;
  justify-content: center;
}
.catebtn:hover{
  cursor: pointer;
  background:#2157B4;
  color:#fff;
  -o-transition:background .3s linear,transform .3s linear;
  -webkit-transition:background .3s linear,transform .3s linear;
  -moz-transition:background .3s linear,transform .3s linear;
  transition:background .3s linear,transform .3s linear;
  box-shadow: 0px 3px 8px #154198;
  transform: scale(1.1);
}

.chosenow{
  background:#2157B4;
  color:#fff;
  -o-transition:background .3s linear;
  -webkit-transition:background .3s linear;
  -moz-transition:background .3s linear;
  transition:background .3s linear;
  transform: scale(1.1);
}

.btn1 .cateicon{
  background-image: url(../image/si1.png);
}
.btn2 .cateicon{
  background-image: url(../image/si2.png);
}
.btn3 .cateicon{
  background-image: url(../image/si3.png);
}
.btn4 .cateicon{
  background-image: url(../image/si4.png);
}
.btn5 .cateicon{
  background-image: url(../image/si5.png);
}

.btn4 .cateicon,.btn5 .cateicon{
  margin: 0 10px;
}

.btn1.chosenow  .cateicon,.btn1:hover .cateicon{
  background-image: url(../image/si1w.png);
}
.btn2.chosenow  .cateicon,.btn2:hover .cateicon{
  background-image: url(../image/si2w.png);
}
 .btn3.chosenow .cateicon,.btn3:hover .cateicon{
  background-image: url(../image/si3w.png);
}
.btn4.chosenow  .cateicon,.btn4:hover .cateicon{
  background-image: url(../image/si4w.png);
}
.btn5.chosenow .cateicon,.btn5:hover .cateicon{
  background-image: url(../image/si5w.png);
}

.cateicon{
  width: 25px;
  height: 25px;
  background-position: 0 0;
  background-size: 100%;
  background-repeat: no-repeat;
}


.mobonly .cateicon{
  width: 40px;
  height: 40px;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.mobonly .btn1 .cateicon{
  background-image: url(../image/si1-m.svg);
}
.mobonly .btn2 .cateicon{
  background-image: url(../image/si2-m.svg);
}
.mobonly .btn3 .cateicon{
  background-image: url(../image/si3-m.svg);
}
.mobonly .btn4 .cateicon{
  background-image: url(../image/si4-m.svg);
}
.mobonly .btn5 .cateicon{
  background-image: url(../image/si5-m.svg);
}

.mobonly .cateicon{
  margin: 0 auto;
}

.mobonly .btn1.chosenow  .cateicon,.mobonly .btn1:hover .cateicon{
  background-image: url(../image/si1-mw.svg);
}
.mobonly .btn2.chosenow  .cateicon,.mobonly .btn2:hover .cateicon{
  background-image: url(../image/si2-mw.svg);
}
.mobonly .btn3.chosenow .cateicon,.mobonly .btn3:hover .cateicon{
  background-image: url(../image/si3-mw.svg);
}
.mobonly .btn4.chosenow  .cateicon,.mobonly .btn4:hover .cateicon{
  background-image: url(../image/si4-mw.svg);
}
.mobonly .btn5.chosenow .cateicon,.mobonly .btn5:hover .cateicon{
  background-image: url(../image/si5-mw.svg);
}


/*contactus*/
.contactus .contentword{
  max-width: 85%;
}
.contactus{
  background: url(../image/bg/conbg.jpg) repeat fixed;
  z-index: 2;
}


.sincata{
  margin: 0% 0 0px 0;
  padding: 3% 0;
}

/*.sincata:last-child{
  margin: 0 0 0px 0;
}*/

.sinpoly{
  background: #f6f6f6;
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
}

.sinpoly:nth-child(even){
  background: #fff;
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
  padding:2% 0;
}

.sinpoly:last-child{
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  padding: 2% 0 3% 0!important;
}

.sinpolyarea{
  padding:15% 0;
}

.sinpoly:nth-child(odd) .sinpolyarea{
  padding:15% 0 15% 0;
}
.sinpoly:nth-child(even) .sinpolyarea{
  padding:10% 0 10% 0;
}


/*側邊按鈕*/
.secbox{
  width: 50px;
  height: 70px;
  /*background-color: #f00;*/
  position: absolute;
  top: 0;
  right:0;
}

.spic1{
  background: url(../image/s1.png) center center no-repeat;
}
.spic2{
  background: url(../image/s2.png) center center no-repeat;
}
.spic3{
  background: url(../image/s3.png) center center no-repeat;
}
.spic4{
  background: url(../image/s4.png) center center no-repeat;
}
.spic5{
  background: url(../image/s5.png) center center no-repeat;
}
.spic6{
  background: url(../image/s6.png) center center no-repeat;
}
.spic{
  background-size: 100%!important;
}

.is-selected .spic1{
  background: url(../image/s1select.png) center center no-repeat;
}
.is-selected .spic2{
  background: url(../image/s2select.png) center center no-repeat;
}

.is-selected .spic3{
  background: url(../image/s3select.png) center center no-repeat;
}

.is-selected .spic4{
  background: url(../image/s4select.png) center center no-repeat;
}

.is-selected .spic5{
  background: url(../image/s5select.png) center center no-repeat;
}

.is-selected .spic6{
  background: url(../image/s6select.png) center center no-repeat;
}


.indextoweb{
  color: #ffd500;
  line-height: 1.95em;
  padding: 0% 0 0 2%;
  letter-spacing: 0px;
  float: left;
  width: auto;
  font-weight: bold;
  font-size: 1.3em;
  border:0px solid transparent;
  margin:2% 0 0 0;
  border-radius: 50px;
}
.indextoweb:hover{
  color: #07173a;
  border:2px solid #ffd500;
  background:#ffd500;

}

.indextowebarrow{
  color: #ffd500;
  line-height: 1.3em;
  padding: 0% 0;
  float: right;
  border-radius:50px;
  border:2px solid #ffd500;
  width: 40px;
  height: 40px;
  font-weight: bold;
  font-size: 1.1em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 10px;
}

.indextoweb:hover .indextowebarrow{
  color: #07173a;
}

/*POPUP*/
.popproduct{
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: -0.5px;
  line-height: 1.2em;
}

.itemname .flex{
  align-items: baseline;
  display: flex;
}
.social{
  padding: 0 15px 0 0;
}

.social a{
  transform: scale(1);
  -o-transition:filter .2s linear,transform .2s linear;
  -webkit-transition:filter .2s linear,transform .2s linear;
  -moz-transition:filter .2s linear,transform .2s linear;
  
}
.social a:hover{
  transform: scale(1.1);
  -o-transition:filter .2s linear,transform .2s linear;
  -webkit-transition:filter .2s linear,transform .2s linear;
  -moz-transition:filter .2s linear,transform .2s linear;
  transition:filter .2s linear,transform .2s linear;
  
}

.social a.faq:hover{
  filter:drop-shadow(3px 5px 1px rgba(21,65,152,.3)); 
}
.social a.youtube:hover{
  filter:drop-shadow(3px 5px 1px rgba(255,0,0,.3)); 
}
.contactus .contentword{
  max-width: 85%;
}

@media only screen and (min-width: 360px) {

  
}

@media only screen and (min-width: 600px) {

  .br{
    display: none;
  }
  .countrieslist{
    padding: 3px 5px;
    font-size: 1em;
  }

  .slide1 .pop1{ top: 50%;  left: 24%;}
  .slide1 .pop2{ top: 61.5%;left: 43%;}
  .slide1 .pop3{ top: 42%;  left: 55.5%;}
  .slide1 .pop4{ top: 58%;  left: 71%;}


  .slide2 .pop1{ top: 48%; left: 18%;  }
  .slide2 .pop2{ top: 62%; left: 31%;  }
  .slide2 .pop3{ top: 45%; left: 45%;  }
  .slide2 .pop4{ top: 62%; left: 59.5%;}
  .slide2 .pop5{ top: 52%; left: 76%;  }


  .slide3 .pop1{ top: 55%; left: 28.5%;  }
  .slide3 .pop2{ top: 55%; left: 49%;  }
  .slide3 .pop3{ top: 46%; left: 70%;  }

  .slide4 .pop1{ top: 53%; left: 28.5%;  }
  .slide4 .pop2{ top: 67%; left: 52.5%;  }
  .slide4 .pop3{ top: 48.5%; left: 68.5%;  }

  .slide5 .pop1{ top: 50%; left: 15.5%;  }
  .slide5 .pop2{ top: 64%; left: 29.5%;  }
  .slide5 .pop3{ top: 42%; left: 42%;  }
  .slide5 .pop4{ top: 70%; left: 53.5%; }
  .slide5 .pop5{ top: 41%; left: 65.3%; }
  .slide5 .pop6{ top: 67%; left: 77%; }

}

@media (min-width: 768px) {
  /*contactus*/
  .contactus .contentword{
    max-width: 80%;
  }
  /*cate*/
  .cate{
    padding: 15px 0;
  }

  /*.backtotop{
   
    width: 55px;
    height: 55px;
  
  
  }*/
}



@media screen and (min-width: 1000px){

  .sinpolyarea{
    padding:0% 0;
  }
  .sinpoly:nth-child(odd) .sinpolyarea{
    padding:3% 0;
  }

  .sinpoly{
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  }
  .sinpoly:nth-child(even){
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
    padding:4% 0;
  }
  .sinpoly:last-child{
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  }
  .sinpoly:nth-child(odd) .sinpolyarea{
    padding:3% 0 3% 0;
  }
  .sinpoly:nth-child(even) .sinpolyarea {
    padding: 0% 0 0% 0;
  }

  .footerfloatright{
    float: right!important;
  }
  .indextoweb{
    float: right;
  }
  .cate{
    padding: 15px 0;
  }
 
  .slide1 .pop1{ top: 56%;  left: 26%;}
  .slide1 .pop2{ top: 65.5%;left: 45%;}
  .slide1 .pop3{ top: 45%;  left: 57.5%;}
  .slide1 .pop4{ top: 61%;  left: 73%;}
  .slide1 .pop5,.slide1 .pop6{ display: none;}

  .slide2 .pop1{ top: 51%; left: 20%;  }
  .slide2 .pop2{ top: 65%; left: 33%;  }
  .slide2 .pop3{ top: 48%; left: 47%;  }
  .slide2 .pop4{ top: 65%; left: 61.5%;}
  .slide2 .pop5{ top: 55%; left: 78%;  }
  .slide2 .pop6{ display: none;}

  .slide3 .pop1{ top: 58%; left: 30.5%;  }
  .slide3 .pop2{ top: 58%; left: 51%;  }
  .slide3 .pop3{ top: 49%; left: 72%;  }
  .slide3 .pop4,.slide3 .pop5,.slide3 .pop6{ display: none;}

  .slide4 .pop1{ top: 56%; left: 30.5%;  }
  .slide4 .pop2{ top: 70%; left: 54.5%;  }
  .slide4 .pop3{ top: 51.5%; left: 70.5%;  }
  .slide4 .pop4,.slide4 .pop5,.slide4 .pop6{ display: none;}

  .slide5 .pop1{ top: 53%; left: 17.5%;  }
  .slide5 .pop2{ top: 67%; left: 31.5%;  }
  .slide5 .pop3{ top: 45%; left: 44%;  }
  .slide5 .pop4{ top: 73%; left: 55.5%; }
  .slide5 .pop5{ top: 44%; left: 67.3%; }
  .slide5 .pop6{ top: 70%; left: 79%; }

  .chosenow{
    transform: scale(1.051);
  }

  .countrieslist a{
    padding:4px 5px;
    color: #fff;
    letter-spacing: 0px;
    text-align: left;
  }
  

}


@media screen and (min-width: 1202px){

  .contactus .contentword{
    max-width: 60%;
  }

  .sinpoly:nth-child(even){
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
    padding:2% 0;
  }
 
}

@media screen and (min-width: 1000px) and (max-width: 1199px){
  


}

@media screen and (min-width: 1001px) and (max-width: 1200px){
 
}

@media screen and (min-width: 1200px) and (max-width: 1435px){
 
  
}

@media screen and (min-width: 1300px){


}

@media screen and (min-width: 1500px){
  .chosenow{
    transform: scale(1.1);
  }
  .cate{
    padding: 0px 0;
  }
  .cateselect{
    padding:0 5px;
    margin: 3.5px 0;
  }

}

@media screen and (min-width: 1600px){
  .chosenow{
    transform: scale(1.1);
  }
  .cate{
    padding: 15px 0;
  }

  .cateselect{
    padding:0 5px;
    margin: 15px 0;
  }

}