/*共通
----------------------------------------------*/
.more a{
  color: #fff;
  letter-spacing: 5px;
  text-decoration: underline;
  font-size: 1.2em;
  background: rgba(0,0,0,.75);
  margin: 0 20px 0 0;
  line-height: 1.35em;
  padding: 5px 8px;
}
.more{
  width: auto;
  float: right;
}
.tips{
  background: #121212;
  color: #fcde19;
  padding: 10px 5px;
  margin: 0px 0 0 0px;
  font-size: 15px;
}

.note{
	font-size:12px;
	color:#aaa;
}

.rowarea{
  padding:13px 0;  
}

.area{
  padding: 45px 0;
}

.sublang{
  padding: 10px 10px;
  background: #fff;
  border-bottom:1px solid #ccc;
}
.sublang:last-child{
  border-bottom:0px solid #ccc;
}

.sublang a{
  color: #aaa;
}
.sublang a:hover{
  color: #3cb5f9;
}

.sublangs{
  display: none;
  position: absolute;
  top: 40px;
}

.mainlang{
  padding: 12px 0;
  color: #fff;
}
.mainlang:hover{
  cursor: pointer;
}

.mainlang:hover >.sublangs{
  display: block!important;
}

.rightlink{
  color:#fff;
}

/*------*/
.mobsublang{
  padding: 10px 10px;
  background: #fff;
  border-bottom:1px solid #ccc;
      max-width: 130px;
}
.mobsublang:last-child{
  border-bottom:0px solid #ccc;
}

.mobsublang a{
  color: #aaa;
}
.mobsublang a:hover{
  color: #3cb5f9;

}

.mobsublangs{
  display: none;
  position: absolute;
  top: 40px;
}

.mobmainlang{
  padding: 12px 0;
  color: #fff;
}

.mobmainlang:hover{
  cursor: pointer;
}

.subshow{
 display:block;
}
.subnone{
 display:none;
}

/*------*/






/*---------------------------------------*/
.topmenu{
  background: #dcdddd;/*29a9e0*/
  padding:0px 0;
  position: fixed;
  /*position: sticky;
  position: -webkit-sticky;*/
  z-index: 1;
  /*border-bottom:1px solid #ccc;*/
  top:0px;
}

.fix{
  height: 100%;
  overflow: auto;
  position: fixed;
}
.logo{
  /*background: #fff;*/
  overflow: hidden;
  max-width: 340px;
}

.nowon{
  color: #000!important;
  background:#fff;
  border-bottom:4px solid #ffc61e!important;
 
}

.topeng{
  padding: 0px 0;
  background:#1b1b1b; 
  z-index: 2;
}
.eng{
  color: #fff;
  font-weight: bolder;
}

/*--首頁--*/
.allbackground{
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+31,000000+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 31%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 31%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 31%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}



.area1{
  padding: 150px 0 3% 0;
}

.toptopic{
  margin: 0 0 30px 0;
}
.toptopic h1{
  font-weight: bold;
  font-size: 2.8em;
  color: #fff;
  text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;
}


/*廣個區塊
*--------------------------------------------------*/

.maintitle{
  /*background: #f00;*/
  margin: 20px 0;
  padding: 10px 15px;
background: -moz-linear-gradient(left,  rgba(245,252,253,0.09) 0%, rgba(240,251,252,0.09) 1%, rgba(0,188,198,0.8) 52%, rgba(245,252,253,0.09) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(245,252,253,0.09) 0%,rgba(240,251,252,0.09) 1%,rgba(0,188,198,0.8) 52%,rgba(245,252,253,0.09) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(245,252,253,0.09) 0%,rgba(240,251,252,0.09) 1%,rgba(0,188,198,0.8) 52%,rgba(245,252,253,0.09) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17f5fcfd', endColorstr='#17f5fcfd',GradientType=1 ); /* IE6-9 */


  color: #fff;
  font-size: 1.5em;
  letter-spacing: 13px;
  font-weight: bold;
  line-height: 1.5em;
}

.recommend{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,661783+30,661783+50,661783+70,ffffff+100&0+0,0.7+30,1+50,0.7+70,0+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(102,23,131,0.7) 30%, rgba(102,23,131,1) 50%, rgba(102,23,131,0.7) 70%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(102,23,131,0.7) 30%,rgba(102,23,131,1) 50%,rgba(102,23,131,0.7) 70%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(102,23,131,0.7) 30%,rgba(102,23,131,1) 50%,rgba(102,23,131,0.7) 70%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}
.arvr{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,0f0e4a+50,ffffff+100&0+0,1+50,0+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(15,14,74,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(15,14,74,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(15,14,74,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}



.type1sytle{
  background:#fff; 
  box-shadow: 4px 4px 6px #232323;
  /*padding: 0 10px 5px 10px;*/
}

/*.type1sytle .product{
  padding: 10px 5px 10px 5px;
}

.type1sytle .product:first-child{
  padding: 10px 10px 10px 0;
}
.type1sytle .product:last-child{
  padding: 10px 0px 10px 10px;
}*/

.comlogo{
  background:#fff;
  margin: 0 0 5px 0;
}

.type1{
 padding: 0 0px 10px 0px;
 margin: 20px 0;
}

.type2sytle{
  background:#fff; 
  /*padding: 0 10px 10px 10px;*/
  box-shadow: 4px 4px 6px #232323;
}

.type2{
 padding: 0 0px 10px 0px;
 margin: 20px 0;

}


.type2 iframe,.type1 iframe,.area1 iframe{
  width: 100%;
  float: left;
  min-height: 215px;
}

.area1 iframe{
  min-height: 280px;
  border:10px solid #fff;
}

.croup{
  padding: 0 0 0 5px;
  font-size: 14px;
  display: inline-block;
  max-height: 35px;
  overflow: hidden;
  font-weight: bold;
  letter-spacing: 0.5px;
  line-height: 20px;
}

.view{
  padding: 4px 6px!important;
  border:1px solid #fff;
  border-radius: 7px;
  float: left;
  /*margin: 5px 0 0 0;*/
  float:none!important;
  margin: 5px auto;
  text-align: center;
}

.view i{
  margin: 0 2px 0 0;
}

.proword{
  float:none!important;
  margin: 5px auto;
  
}

.product{
  line-height: 16px;
  overflow: hidden;
}

.view,.proword{
  max-width: 80%;
}

.view,.product{
   font-size: 0.7em;
}


.topics{
  margin: 0 0 0px 0 ;
  padding: 10px 10px 10px 10px;
  border-bottom:5px solid #f39800;
}
/*footer
---------------------------------------------------*/

.notice{
  background: #232323;
  color: #f8b62d;
  padding: 20px 0;
}

.noticesin{
  margin: 10px 0;
}

.noticesin a{
  color: #f39800;
}

.noticesin:first-child{
  min-width: 180px;
  padding: 10px 5px;
  text-align:  right;
}

.notice img{
  margin: 0 15px ;
}

.notice p{
  line-height: 22px;
}

.footer{
  background: #121212;
  padding: 15px 0 20px 0;
}
.footerlist{
  max-width: 800px;/*1200*/
  margin: 0 auto;
  float: none;
}
.footerlistbe{
  max-width: 1100px;
  margin: 0 auto;
  float: none;
  font-size: 1.1em;
}
.footerlink{
  margin: 5px 0;
  font-size: 14px;
  border-right:1px solid #c9caca;
}

.footerlink:last-child{
  border-right:0px;
}

/*.footerlink:nth-child(2n){
  border-right:0px;
}*/
.footerlink a{
  color: #c9caca;
  padding:4px 10px;
  float: left;
  /*font-family:Baskerville Bold;/*"Ubuntu"sans-serif*/
  font-size: 1em; 
  /*font-weight: bold;*/
  letter-spacing: 0px;
}

.footerlink a:hover{
  color: #fff;
  cursor: pointer;
}

.footer p{
  line-height: 21px;
  font-size: 14px;
  color:#888
}

/*關於我們*/
.aboutword{
  padding: 5% 10%;
  background:rgba(255,255,255,.75);
}

.aboutword p{
 /* float: left;
  width: 100%;*/
  line-height: 30px;
  font-size: 1.2em;

}

.aboutword h1{
  font-size: 1.9em;
  letter-spacing: 1px;
}
.aboutword h2{
  font-size: 1.5em;
  letter-spacing: 1px;
}



.social{
  padding: 10px 0;
  width: 40px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  margin: 0 5px 0 0;
  float: left;
}

.social:hover{
  
  color: #f1f1f1;
 
}
.in{ background: #007bb6;}
.fb{ background: #3b5998;}
.twitter{ background: #00aced;}
.ig{ background: #ea2c59;}
.plus{ background: #dd4b39;}
.youtube{ background: #a82400;}



.social i{
  font-size: 18px;
}

.allbg{
    background: url("../image/bg/1000-1.jpg") 0 0 no-repeat;
    background-size:100%;
   
  } 

.allbg:before{
  content: "";
    background: #121212 url("../image/bg/1000-1.jpg") 0 100px no-repeat fixed;
    background-size:100%;
   
    /*background-attachment: fixed;*/
    position: fixed;
    min-height: 100%;
    width:100%;
    height: 100%;
    top:0;
    left: 0;
    z-index: 0;overflow: hidden;
  }   

@media only screen and (min-width: 360px) {
  .view{
    padding: 4px 5px!important;
  }
  .view,.product{
   font-size: 0.8em;
  }

}


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

  .type2 iframe,.type1 iframe,.area1 iframe{
    width: 100%;
    float: left;
    min-height: 280px;
  }

  .type1{
   padding: 0 10px 10px 10px;
   margin: 20px 0;
  }

  .topics{
  margin: 0 0 0px 0 ;
  padding: 0 10px 5px 10px;
  border-bottom:5px solid #f39800;
}

}

@media (min-width: 640px) and (max-width: 999px) {
  .area1 iframe{
    min-height: 450px;
  }

  .type2 iframe,.type1 iframe{
    min-height: 290px;
  }

  .footerlink:nth-child(2n){
   /*border-right:1px solid #c9caca;*/
  }
  .footerlink:nth-child(3n){
    /*border-right:0px;*/
    /*text-align: center;*/
  }

  .view,.proword{
    font-size: 1.5em;
  }

   .allbg{
    background: url("../image/bg/bg.jpg") center top no-repeat fixed;
    background-size:cover; 
  } 

  .croup {
    padding: 0 0 0 5px;
    font-size: 16px;
    display: inline-block;
    max-height: 50px;
    overflow: hidden;
    line-height: 1.2em;
  }

  .pad-flex{
    display: flex;
    align-items: center;
  }

  



}

@media (min-width: 768px) {
  .view{
    font-size: 18px;
  }
  .eng{
      min-width: 120px;
    }
}
@media (min-width: 900px) {



}

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

  .more a{
  background: none;
}

  .area1 {
    padding: 200px 0 90px 0;
}


  .topmenu{
    padding:0px 0;
  }
  .logo{
    max-width: 290px;
  }
  .area1 iframe{
    min-height: 570px;
    border:10px solid #fff;
  }
  .type2sytle{
   
    /*padding: 0 10px 10px 10px;*/
  }
  .view{
    padding: 5px 5px!important;
    font-size: 0.8em;
    /*margin: 2px 0;*/
  }
  .view,.product{
   font-size: 0.6em;
  }

  .type1sytle{
    /*padding: 0 10px 10px 10px;*/
  }
  .allbg{
    background: url("../image/bg/bg.jpg") center 100px no-repeat;
    background-size:100%; 
  } 
  .allbg:before{
    display: none;
  }   

  .type2{
   padding: 0 10px 10px 10px;
   margin: 20px 0;
  }
   .footerlink:nth-child(2n){
    border-right:1px solid #c9caca;
  }
  .toptopic{
    margin: 0 0;
    padding: 30px 0;
    background: rgb(0,0,0); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
  }
  .footerlink a{
    padding:3px 10px;
    /*font-family:Baskerville Bold;/*"Ubuntu"sans-serif*/
  }

  .noticesin:first-child{
    text-align:  right;
  }

  .aboutword h1{
    font-size: 2.8em;
    letter-spacing: 1px;
  }
  .aboutword h2{
    font-size: 1.8em;
    letter-spacing: 1px;
  }


}


@media (min-width: 1000px) and (max-width: 1199px) {
  .area1 iframe{
    min-height: 360px;
  }

  .type2 iframe,.type1 iframe{
    min-height: 180px;
  }
  
  /*.footerlist{
    max-width: 970px;
  }*/
  .footerlink a{
    padding:3px 8px;
    font-size: 1em;
  }

  .view,.product{
   font-size: 0.6em;
  }

  .topics{
  
  padding: 10px 10px 10px 10px;
 
}

}

@media (min-width: 1300px) {

  .logo{
    max-width: 230px;
  }

  .type1sytle{
    /*padding: 0 15px 15px 15px;*/
  }
  
  .type2sytle{ 
    /*padding: 0 15px 15px 15px;*/
  }

  .allbg{
    background-size:100%; 
    
  } 

}

@media (min-width: 1200px) and  (max-width: 1600px){
  .type2 iframe,.type1 iframe,.area1 iframe{
    width: 100%;
    float: left;
    min-height: 210px;
  }
  .view{
    font-size: 0.9em;
    padding:5px 5px!important;
  }

  .area1 iframe{
    min-height: 430px;
  }
}

@media (min-width: 1500px) {

  .type1,.type2{
    padding: 0 20px 10px 20px;
    margin: 20px 0;
  }

  .view{
    padding:6px 5px!important;
    margin: 10px auto 0 auto
  }

  .area1 iframe{
    min-height: 530px;
  }
  .croup{
    font-size: 1em; 
  }

  .footerlist{
    max-width: 900px;/*1200*/
  }
  .footerlink a{
    padding:3px 15px;
  }

  .view,.product{
    font-size: 1em;
  }


  
}