@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('../fontawesome-free-6.2.1-web/css/fontawesome.css');
@import url('../fontawesome-free-6.2.1-web/css/brands.css');
@import url('../fontawesome-free-6.2.1-web/css/solid.css');

/**
 * Style.css
 * Copyright 2022 - 2023
 * Author: Chan Design Ltd.
 */
/*------------------------------------*\
    Content
\*------------------------------------*/
/**
 * Globel...............Set common style
 * Layout...............Set grid
 * Components...........Set specificed components styles
 */


 /*------------------------------------*\
    Globel
\*------------------------------------*/
*{
	box-sizing: border-box;
	position: relative;
}

body.tw,
html[lang="zh-TW"] > body{
   font-family: 'Noto Sans TC', 'Noto Sans Display', sans-serif;
}

body.cn,
html[lang="zh-CN"] > body{
   font-family: 'Noto Sans SC', 'Noto Sans Display', sans-serif;
}

body.en,
html[lang="en"] > body{
   font-family:  'Noto Sans Display', sans-serif;
}


h1,h2,h3,h4,h5,h6,p{
   padding: 0;
   margin: 0;
}

ul{
   list-style: none;
   margin: 0;
   padding: 0;
}

a{
   text-decoration: none;
   color: #333;
}



/*------------------------------------*\
    Layout
\*------------------------------------*/
.warpper{
   width: 100%;
}

/* container: align middle  */
.container{
   width: 100%;
   margin: 0 auto;
}


/* max-width */
.max-width-250{max-width:250px;}
.max-width-500{max-width:500px;}
.max-width-1024{max-width:1024px;}
.max-width-1280{max-width:1280px;}


@media screen and (max-width: 1024px){
   .max-width-l-900{max-width:900px;}

}

@media screen and (max-width: 768px){
   .max-width-m-700{max-width:700px;}
   .max-width-m-650{max-width:650px;}
   .max-width-m-600{max-width:600px;}
}


@media screen and (max-width: 500px){
   .max-width-s-490{max-width:490px;}
}




/* row col */
.row{
   width: 100%;
   float: left;
}

.col{
   float: left;
   padding: 0 16px;
}

.col-12-lg{width: 100%;}
.col-11-lg{width: 91.66666666%;}
.col-10-lg{width: 83.33333333%;}
.col-9-lg{width: 75%;}
.col-8-lg{width: 66.666666666%;}
.col-7-lg{width: 58.333333333%;}
.col-6-lg{width: 50%;}
.col-5-lg{width: 41.666666666%;}
.col-4-lg{width: 33.333333333%;}
.col-3-lg{width: 25%;}
.col-2-lg{width: 16.666666666%;}
.col-1-lg{width: 8.3333333333%;}


.hero-10{margin-top: 10px;}
.hero-15{margin-top: 15px;}
.hero-20{margin-top: 20px;}
.hero-25{margin-top: 25px;}
.hero-30{margin-top: 30px;}
.hero-35{margin-top: 35px;}
.hero-40{margin-top: 40px;}
.hero-45{margin-top: 45px;}
.hero-50{margin-top: 50px;}
.hero-55{margin-top: 55px;}
.hero-60{margin-top: 60px;}
.hero-70{margin-top: 70px;}
.hero-80{margin-top: 80px;}
.hero-90{margin-top: 90px;}
.hero-100{margin-top: 100px;}
.hero-120{margin-top: 120px;}
.hero-150{margin-top: 150px;}
.hero-200{margin-top: 200px;}

@media screen and (max-width: 1024px){
   .hero-10-m{margin-top: 10px;}
   .hero-15-m{margin-top: 15px;}
   .hero-20-m{margin-top: 20px;}
   .hero-25-m{margin-top: 25px;}
   .hero-30-m{margin-top: 30px;}
   .hero-35-m{margin-top: 35px;}
   .hero-40-m{margin-top: 40px;}
   .hero-45-m{margin-top: 45px;}
   .hero-50-m{margin-top: 50px;}
   .hero-55-m{margin-top: 55px;}
   .hero-60-m{margin-top: 60px;}
   .hero-70-m{margin-top: 70px;}
   .hero-80-m{margin-top: 80px;}
   .hero-90-m{margin-top: 90px;}
   .hero-100-m{margin-top: 100px;}
   .hero-120-m{margin-top: 120px;}
   .hero-150-m{margin-top: 150px;}
   .hero-200-m{margin-top: 200px;}
}

@media screen and (max-width: 500px){
   .hero-0-s{margin-top: 0px;}
   .hero-10-s{margin-top: 10px;}
   .hero-15-s{margin-top: 15px;}
   .hero-20-s{margin-top: 20px;}
   .hero-25-s{margin-top: 25px;}
   .hero-30-s{margin-top: 30px;}
   .hero-35-s{margin-top: 35px;}
   .hero-40-s{margin-top: 40px;}
   .hero-45-s{margin-top: 45px;}
   .hero-50-s{margin-top: 50px;}
   .hero-55-s{margin-top: 55px;}
   .hero-60-s{margin-top: 60px;}
   .hero-70-s{margin-top: 70px;}
   .hero-80-s{margin-top: 80px;}
   .hero-90-s{margin-top: 90px;}
   .hero-100-s{margin-top: 100px;}
   .hero-120-s{margin-top: 120px;}
   .hero-150-s{margin-top: 150px;}
   .hero-200-s{margin-top: 200px;}
}


/*------------------------------------*\
    Components
\*------------------------------------*/
/*
   header
*/
header{
   width: 100%;
   height: 100px;
   position: fixed;
   top: 0;
   left: 0;

   z-index: 9999;
   opacity: 1;

   padding-top: 23px;
   padding-bottom: 18px;
}

.header-bg{
   width: 100%;
   height: 100px;
   position: fixed;
   top: 0;
   left: 0;

   z-index: 9999;
   opacity: 1;
   /*background-color: #00edff;*/
   background-image: linear-gradient(120deg, #00edff, #00edff, #094FFF );
   opacity: 1; /*.7;*/

}

header .header-logo{
   margin-left: 60px;

}

header .header-logo a{
   display: block;
   float:  left;
}

header .header-logo a img{
   height: 60px;

}

header .header-logo .rwd-l{

}

header .header-logo .rwd-s{
   display: none;
}

@media screen and (max-width: 500px){
   header .header-logo{
      margin-left: 20px;
   }

   header .header-logo a img{
      height: 60px;
   }

   header .header-logo .rwd-l{
      display: none;
   }

   header .header-logo .rwd-s{
      display: block;
   }
}


header .header-navbar{
   float:  right;
   margin-right: 64px;

/*   display: none;*/
}

@media screen and (max-width: 1024px){
   header .header-navbar{display: none;}
}


header .header-navbar .blk-search,
header .header-navbar .blk-lag,
header .header-navbar .blk-navtrigger{
   /*width: 100px;*/
   float: left;
}


header .header-navbar .blk-search{
   margin-top: 40px;
   margin-right: 35px;

   width: 200px;
   height: 30px;

   border: 1px solid #fff;

   border-radius: 25px;

}

header .header-navbar .blk-search p{
   padding-left: 30px;
   color: #fff;

/*   font-family: "Noto Sans Display", sans-serif;*/
   font-weight: 100;
   font-size: 16px;
   line-height: 28px;


}

header .header-navbar .blk-lag{
   display: inline-block;


   margin-top: 40px;
   margin-right: 35px;
   height: 30px;
/*   font-family: "Noto Sans Display", sans-serif;*/
   font-size: 24px;
   font-weight: 500;
   line-height: 30px;

   float: left;

   color: #fff;
}


header .header-navbar ul{
   /*padding: 50px 30px 18px 0;*/
   display: inline-block;
}

header .header-navbar .nav-item{
   /*padding: 50px 30px 18px 0;*/
   display: inline-block;
}

header .header-navbar .nav-item .nav-link{
   display: block;
   padding: 42px 16px 0 16px;
   text-align: center;
   color: #fff;

/*   font-family: 'Noto Sans TC', sans-serif;*/
   font-size: 18px;
   line-height: 18px;
   font-weight: 300;

   transition: .7s;
}
header .header-navbar .nav-item .nav-link::before,
header .header-navbar .nav-item .nav-link::after{
   display: block;
   content: '';
   position: absolute;
   bottom: -18px;
   width: 0;
   height: 3px;

   background-color: #fff;

   transition: .7s;
}

header .header-navbar .nav-item .nav-link::before{
   left: 50%;
}

header .header-navbar .nav-item .nav-link::after{
   right: 50%;
}

header .header-navbar .nav-item .nav-link:hover{
   font-weight: 900;
}

header .header-navbar .nav-item .nav-link:hover::before,
header .header-navbar .nav-item .nav-link:hover::after{
   width: 50%;
}



/*multi lan*/
header .multi-lan-nav .multi-lan-list{
   display: block;
   position: absolute;
   top: 76px;
   left:50%;
   transform: translateX(-50%);

   padding: 12px 5px 0 5px ;

   width: 100%;
   height: 0;

/*   background-color: white;*/

   overflow: hidden;
   transition: .7s;
}

header .multi-lan-nav:hover .multi-lan-list{
   height: 120px;

}

header .multi-lan-nav .fa-earth-asia{
   transition: .7s;
}

header .multi-lan-nav:hover .fa-earth-asia{
   transform: rotate(-180deg);
}



header .multi-lan-nav .multi-lan-list li{
   display: block;
   height: 40px;
   width: 40px;
   flex:1;

   margin-bottom: 7px;

}



header .multi-lan-nav .multi-lan-list li .multi-lan-link{
   display: block;
   width: 40px;
   height: 40px;
   line-height: 38px;
   font-size: 16px;
/*   font-family: 'Noto Sans TC', sans-serif;*/
   color: #333;
   background-color: #fff;
   border-radius: 20px;

   text-align: center;


   transition: .7s;

   box-shadow: 1px 1px 1px #ccc;
}


header .multi-lan-nav .multi-lan-list li .multi-lan-link:hover{
   background-image: linear-gradient(120deg, #00edff, #094FFF );
   color: #fff;
}


/*RWD Nav*/
header .header-nav-hmbg-rwd{
   display: block;
   position: fixed;
   right: 23px;
   top: 50px;
   width: 40px;
   height: 40px;

   display: none;

/*   background-color: #f00;*/
}



@media screen and (max-width:1024px){
   header .header-nav-hmbg-rwd{display: block;}
}

header .header-nav-hmbg-rwd input{
   display: block;
   width: 40px;
   height: 40px;
   position: absolute;

   cursor: pointer;

   opacity: 0;
   z-index: 2; /* and place it over the hamburger */

   -webkit-touch-callout: none;
}

header .header-nav-hmbg-rwd span
{
  display: block;
  width: 33px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;


  top:10px;


  background: #ffffff;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

header .header-nav-hmbg-rwd span::before,
header .header-nav-hmbg-rwd span::after
{
   content:'';
   display: block;
   width: 33px;
   height: 2px;
/*   margin-bottom: 5px;*/
   position: absolute;



   background: #ffffff;
   border-radius: 3px;

   z-index: 1;

   transform-origin: 4px 0px;

   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

header .header-nav-hmbg-rwd span::before{
   top:-10px;
}

header .header-nav-hmbg-rwd span::after{
   top: 10px;
}


header .header-nav-hmbg-rwd input:checked ~ span{

   background-color: rgba(255,255,255,0);

   transform: rotate(0deg)
}

header .header-nav-hmbg-rwd input:checked ~ span::before{
   opacity: 1;
/*   width: 46px;*/
   background-color: #fff;
   transform: rotate(45deg) translate(4px, 0px); ;
}

header .header-nav-hmbg-rwd input:checked ~ span::after{
   opacity: 1;
/*   width: 46px;*/
background-color: #fff;
   transform: rotate(-45deg) translate(-1px, 1px);;
}


header .header-nav-hmbg-rwd .rwd-menu
{
   position: absolute;
   width: 300px;
   height: 100vh;
   margin: -57px 0 0 0;
   padding: 50px;
   padding-top: 125px;

   right: 0;

   /*  background: #ffffff;*/
   background-image: linear-gradient(120deg, #094FFF, #00edff );
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   /* to stop flickering of text in safari */

   transform-origin: 0% 0%;
   transform: translate(calc(100% + 23px), 0);

   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}


header .header-nav-hmbg-rwd .rwd-menu .header-nav-rwd-bg{
   display: block;
   position: absolute;
   opacity: .3;
   width: 100%;
   right:0;
   bottom: 0;
}



header .header-nav-hmbg-rwd .rwd-menu li
{
  padding: 16px 0;

  letter-spacing: 3px;

/*  font-family: 'Noto Sans TC', sans-serif;*/
   font-size: 32px;
   line-height: 32px;
   font-weight: 100;

   color:#fff;
}



header .header-nav-hmbg-rwd .rwd-menu .rwd-multi-lan-list
{

   margin-top: 16px;
   border-top: 1px solid #fff;
  padding: 24px 0 16px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content:flex-start ;
}

header .header-nav-hmbg-rwd .rwd-menu .rwd-multi-lan-link{
   display: block;
   width: 50px;
   height: 50px;

   margin: 0 10px;

   line-height: 48px;
   font-size: 20px;
/*   font-family: 'Noto Sans TC', sans-serif;*/
   color: #fff;
   text-align: center;

   border: 1px solid #fff;
   border-radius: 30px;
}


/*
 * And let's slide it in from the left
 */
header .header-nav-hmbg-rwd  input:checked ~ .rwd-menu
{
  transform: translate( 23px, 0);
}



@media screen and (max-width: 700px){
   header .header-nav-hmbg-rwd .rwd-menu{
      width: 100vw
   }

   header .header-nav-hmbg-rwd .rwd-menu li{
      text-align: center;
   }

   header .header-nav-hmbg-rwd .rwd-menu .rwd-multi-lan-list
   {
     justify-content:center;
   }


}


/*home button*/
.home-btn{
   display: block;
   position: fixed;
   z-index: 1000;
   right: 3px;
   bottom: 90px;
   border-radius: 50%;
   width: 70px;
   height: 70px;
   background-image: linear-gradient(120deg, #00edff, #094FFF );
}


.home-btn img{
   display:block;
   position: absolute;
   width: 50px;
   height: 50px;
   top:50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


/*banner*/
#banner-box {
   background-color: #333333;
   overflow: hidden;
   height: 500px;
}
#banner{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("../images/products-banner.jpg");
   background-position: center;
   background-size: cover;
}

#home #banner-box {
   padding-bottom: 47%;
   height: initial;
}
#home #banner{
   background-image: url("../images/homepage-banner.jpg");
   background-attachment: fixed;
}

@media screen and (max-width: 1024px){
   #home #banner-box {
      padding-bottom: 100%;
   }

   #home #banner{
      background-attachment: initial;
      background-image: url("../images/homepage-banner-m.jpg");
   }
}

@media screen and (max-width: 500px){
   #home #banner-box {
      padding-bottom: 150%;
   }
   .home-btn{
      bottom: 30px;
   }
}


/* about-tks */
.about-tks
{
   width: 100%;
   padding: 150px 0;
   background-color: #fff;
   background-image: url("../images/about-tks-bg.png");
   background-position: top;
   background-size: cover;
   background-repeat: no-repeat;

   float: left;

   overflow: hidden;
}

.about-tks .about-tks-title{
   font-size: 72px;
   font-weight: 100;
   color: #333;
   margin-bottom: 32px;

}

.about-tks .about-tks-title::before{
   display: block;
   content: '';
   width: 100%;
   height: 3px;

   position: absolute;
   right: calc(100% + 15px);
   top: 50%;
   background-color: #00efdd;
}


.about-tks .about-tks-content{
   font-size: 18px;
   line-height: 36px;
   font-weight: 500;
   color: #333;
}


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

   .about-tks{
      padding:100px 0;
   }
}


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

   .about-tks{
      padding:70px 0;
   }
}

@media screen and (max-width: 500px){
   .about-tks{
      padding: 50px 0;
   }

   .about-tks .about-tks-title{
      font-size: 48px;
      line-height: 60px;
      margin-bottom: 30px;
   }

   .about-tks .about-tks-content{
      font-size: 14px;
      line-height: 28px;
      font-weight: 300;
      color: #333;
   }
}




/* tks service */
.tks-services{
   width: 100%;
   padding: 250px 0 150px 0 ;
   background-color: #fff;

   float: left;

   overflow: hidden;

/*   padding-bottom: 50%;*/
   background-image:url("../images/tks-service-bg.jpg");
   background-position: center;
   background-size:cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
}


.tks-services-title,
.tks-services-title-rwd{
   font-size: 72px;
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 100;


   text-align: left;
   display: block;
   width: 100%;

   margin-bottom: 30px;
   padding-left
   letter-spacing: 3px;


   color: #fff;

   text-shadow: 1px 1px 0px #333;
}

.tks-services-title-rwd{
   display: none;
   line-height: 100px;
}



.tks-services-title-rwd::before{
   display:none;
}


.tks-services-list{
   padding: 30px 0;
}

.tks-services-card{
   display: block;
   float:left;
   width: calc(25% - 20px);
/*   height: 300px;*/

/*   background: #fff;*/
/*   border-radius: 70px 10px 70px 10px;*/

   margin-right: 20px;

   overflow: hidden;
}

.tks-services-card .tks-services-pic{
   width: 100%;
   padding-bottom: 100%;

   border-radius: 50% 0 50% 0;

   background-position: center;
   background-size: cover;
}

.tks-services-card .tks-services-pic1{
   background-image: url('../images/product-1.png');
}

.tks-services-card .tks-services-pic2{
   background-image: url('../images/product-2.png');
}

.tks-services-card .tks-services-pic3{
   background-image: url('../images/product-3.png');
}

.tks-services-card .tks-services-pic4{
   background-image: url('../images/product-4.png');
}

.tks-services-card .tks-services-text{
   padding: 30px 40px;
   display: block;

   font-size: 20px;
   line-height: 32px;
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 500;
/*   color: #333;*/
   color:#fff;

   text-shadow: 1px 1px 0 #333;
}


.tks-services-card .tks-services-text::before{
   display: block;
   content:'';

   position: absolute;
   top:50%;
   left:0;
   transform: translateY(-50%);

   height: 70%;
   width: 10px;


/*   background-image: linear-gradient(0deg, #094FFF, #00edff );*/
   background-color: #fff;

   border-radius: 10px 0 10px 0;
}

.tks-services .flex-container{
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
}

.tks-services .flex-container .flex-box{
   height: 600px;
   /*background-color: #666;*/
   flex: 1;

   transition: 1.2s;


   background-size: cover;
   background-position: center;
}

.tks-services .flex-container .flex-box:hover{
   /*background-color: #999;*/
   flex: 8;
}


.tks-services .flex-container  .box1{
   background-image: url("../images/product-1.png");
}
.tks-services .flex-container .box2{
   background-image: url("../images/product-2.png");
}

.tks-services .flex-container  .box3{
   background-image: url("../images/product-3.png");
}

.tks-services .flex-container .box4{
   background-image: url("../images/product-4.png");
}

.tks-services .flex-container .box5{
   background-image: url("../images/product-5.png");
}



.tks-services .flex-box {
}

.tks-services .flex-box .box-content{
   width: 80%;
   height: 70px;

   position: absolute;
   background-color: #00edff;
   border-radius: 0 0 100px 0 ;

   left: 0;
   bottom: 50px;

   overflow: hidden;
}

.tks-services .flex-box .box-content .box-title{

   padding: 0 30px;

/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   font-weight: 700;
   color: #333;
   line-height: 70px;
}


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

   .tks-services{
      padding-top: 70px;
      padding-bottom: 70px;
      background-attachment: scroll;
   }
   .tks-services-title{
      display: none;
   }
   .tks-services-title::before{
      display: none;
   }

   .tks-services-title-rwd{
      display: block;
   }

   .tks-services-title-rwd::before{
      display:block;
   }

   .tks-services-card{
      display: block;
      float:left;
      width: calc(50% - 50px);

      margin-right: 25px;
      margin-left: 25px;
      margin-bottom: 50px;
      overflow: hidden;

   }

   .tks-services-card .tks-services-pic{
      width: 100%;
      padding-bottom: 100%;

      border-radius: 100px 0 100px 0;

      background-position: center;
      background-size: cover;
   }

   .tks-services-card .tks-services-text{
      padding: 30px 40px;
      display: block;

      font-size: 24px;
      line-height: 32px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 500;
   /*   color: #333;*/
      color:#fff;

      text-shadow: 1px 1px 0 #333;
   }

}

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

   .tks-services{
      padding-top: 70px;
   }
   .tks-services-title{
      display: none;
   }
   .tks-services-title::before{
      display: none;
   }

   .tks-services-title-rwd{
      display: block;
   }

   .tks-services-title-rwd::before{
      display:block;
   }

   .tks-services-card{
      display: block;
      float:left;
      width: calc(50% - 30px);

      margin-right: 15px;
      margin-left:15px;
      margin-bottom: 50px;
      overflow: hidden;

   }

   .tks-services-card .tks-services-pic{
      width: 100%;
      padding-bottom: 100%;

      border-radius: 100px 0 100px 0;

      background-position: center;
      background-size: cover;
   }

   .tks-services-card .tks-services-text{
      padding: 20px 20px;
      display: block;

      font-size: 18px;
      line-height: 24px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 500;
   /*   color: #333;*/
      color:#fff;

      text-shadow: 1px 1px 0 #333;
   }
}

@media screen and (max-width: 500px){
   .tks-services{
      padding-top: 50px 0;
   }
   .tks-services-title{
      display: none;
   }
   .tks-services-title::before{
      display: none;
   }

   .tks-services-title-rwd{
      display: block;
   }

   .tks-services-title-rwd::before{
      display:block;
   }

   .tks-services-title-rwd{
      font-size: 48px;
      line-height: 60px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      color: #fff;

      margin-bottom: 30px;
      padding:0 16px;

      letter-spacing: 0;
   }

   .tks-services-card{
      display: block;
      float:left;
      width: calc(100% - 64px);

      margin-right: 32px;
      margin-left:32px;
      margin-bottom: 50px;
      overflow: hidden;

   }

   .tks-services-card .tks-services-pic{
      width: 100%;
      padding-bottom: 100%;

      border-radius: 100px 0 100px 0;

      background-position: center;
      background-size: cover;
   }

   .tks-services-card .tks-services-text{
      padding: 20px 20px;
      display: block;

      font-size: 24px;
      line-height: 32px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 500;
   /*   color: #333;*/
      color:#fff;

      text-shadow: 1px 1px 0 #333;
   }


}



/*products*/
.tks-products{
   width: 100%;
   padding: 150px 0 ;

   float: left;

   margin-bottom: 0;
   padding-bottom: 50px;
}

.tks-products::before{
   display: block;
   content: '';
   width: 3px;
   height: 100%;
   background-color: #00edff;

   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
}

.tks-products .tks-products-title{
   font-size: 72px;
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 100;
   color: #333;

   text-align: center;

   padding: 20px 0 ;

   background-color: #fff;
}

.tks-products .tks-product-blk{
   width: 100%;
   padding: 30px 0;
   float: left;
}

.tks-products .tks-product-blk .tks-product-infobg{
   width: 50%;
   height: 400px;
   /*background-color: #00edff;*/

   position: absolute;
}

.tks-products .tks-product-blk:nth-child(even) .tks-product-infobg{
   /*background-color: #00edff;*/
   left: 0;
}

.tks-products .tks-product-blk:nth-child(odd) .tks-product-infobg{
   right: 0;
}



.tks-products .tks-product-blk .tks-product-info{
   width: 50%;
   /*height: 400px;*/
   /*background-color: #fff;*/
   float: left;

   padding: 35px 60px;
}

.tks-products .tks-product-blk .tks-product-info::before{
   display: block;
   content: '';
   position: absolute;

   background-color: #00edff;

   width: 20px;
   height: 20px;
   border-radius: 20px;

   top: 100px;
}


.tks-products .tks-product-blk .tks-product-pic{
   width: 50%;
   height: 400px;
   float: left;
   padding-top: 70px;
}


.tks-products .tks-product-blk:nth-child(even) .tks-product-info,
.tks-products .tks-product-blk:nth-child(even) .tks-product-pic
{
   float: left;
}

.tks-products .tks-product-blk:nth-child(even) .tks-product-info::before{
   right: -10px;
}


.tks-products .tks-product-blk:nth-child(odd) .tks-product-info,
.tks-products .tks-product-blk:nth-child(odd) .tks-product-pic
{
   float: right;
}

.tks-products .tks-product-blk:nth-child(odd) .tks-product-info::before{
   left: -10px;
}


.tks-products .tks-product-info .product-name{
/*   font-family: "Noto Sans TC", sans-serif;*/

   letter-spacing: 3px;

   font-weight: 300;
   font-size: 60px;
   line-height: 60px;

   color: #333;
}

.tks-products .tks-product-info .product-text{
   margin-top: 30px;
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 300;
   font-size: 18px;
   line-height: 36px;

   color: #333;
}

.tks-products .tks-product-info  ul{
   margin-top: 30px;
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 300;
   font-size: 18px;
   line-height: 36px;

   color: #333;

   padding-left: 20px;
}

.tks-products .tks-product-info  li{
   list-style-type: square;
   list-style-position: outside;
}

.tks-products .tks-product-info .product-link{
   margin-top: 60px;
   width: 150px;

/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 500;
   font-size: 18px;
   line-height: 36px;

   border: 1px solid #333;
   border-radius: 18px;

   display: block;
   text-align: center;

   color: #333;


   transition: .7s;
}

.tks-products .tks-product-info .product-link:hover{
   color: #fff;
   text-shadow: 1px 1px 2px #333;

   background-color: #00edff;
   border: 0px solid #00edff;
}

.tks-products .tks-product-pic img{
   height: 400px;
   position: absolute;

   top: 270px;
   left: 50%;
   transform: translate(-50%, -50%);
}

@media screen and (max-width: 1024px){
   .tks-products .tks-product-info .product-name{
/*      font-family: "Noto Sans TC", sans-serif;*/

      letter-spacing: 3px;

      font-weight: 300;
      font-size: 40px;
      line-height: 60px;

      color: #333;
   }

   .tks-products .tks-product-info .product-link{
      background-image: linear-gradient(120deg, #094FFF, #00edff );
      border: 0px solid #00edff;
      color: #fff;
   }
}

@media screen and (max-width: 768px){
   .tks-products{
      padding: 70px 0;
   }

   .tks-products::before{
      display: block;
      content: '';
      width: 3px;
      height: 100%;
      background-color: #00edff;

      position: absolute;
      left: 100px;
      top: 0;
      transform: translateX(-50%);
   }

   .tks-products .tks-products-title{
      font-size: 72px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      color: #333;

      text-align: left;

      padding: 20px 0 ;
      padding-left: 50px;


   }

   .tks-products .tks-product-blk{
      width: 100%;
      padding: 30px 100px;
      float: left;
   }

   .tks-products .tks-product-blk .tks-product-info{
      width: 100%;
      float: left;

      padding: 30px 60px;
   }

   .tks-products .tks-product-blk .tks-product-info::before{
      display: block;
      content: '';
      position: absolute;

      background-color: #00edff;

      width: 20px;
      height: 20px;
      border-radius: 20px;

      top: 60px;
   }

   .tks-products .tks-product-blk:nth-child(even) .tks-product-info,
   .tks-products .tks-product-blk:nth-child(even) .tks-product-pic,
   .tks-products .tks-product-blk:nth-child(odd) .tks-product-info,
   .tks-products .tks-product-blk:nth-child(odd) .tks-product-pic
   {
      float: left;
   }

   .tks-products .tks-product-blk:nth-child(even) .tks-product-info::before,
   .tks-products .tks-product-blk:nth-child(odd) .tks-product-info::before{
      left: -10px;
   }

   .tks-products .tks-product-blk .tks-product-pic{
      width: 100%;
      height: 450px;
      float: left;
      padding: 30px 60px;
   }

   .tks-products .tks-product-pic img{
      height: 100%;
      position: relative;

      top: 0;
      left: 0;
      transform: none;
   }

   .tks-products .tks-product-pic::after{
      content:'';
      display:block;
      position: absolute;
      width: 150px;
      height: 5px;
      right: 0;
      bottom:0;
      background-image: linear-gradient(120deg, #094FFF, #00edff );

      border-radius: 5px  0 5px 0 ;
   }
}

@media screen and (max-width: 500px){
   .tks-products{
      padding: 50px 0;
   }

   .tks-products::before{
      display: block;
      content: '';
      width: 3px;
      height: 100%;
      background-color: #00edff;

      position: absolute;
      left: 40px;
      top: 0;
      transform: translateX(-50%);
   }

   .tks-products .tks-products-title{
      font-size: 48px;
      line-height: 60px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      color: #333;

      text-align: left;

      padding: 20px 0 ;
      padding-left: 16px;


   }

   .tks-products .tks-product-blk{
      width: 100%;
      padding: 30px 40px;
      float: left;
   }

   .tks-products .tks-product-blk .tks-product-info{
      width: 100%;
      float: left;

      padding: 30px 30px;
      padding-right: 0px;
   }

   .tks-products .tks-product-blk .tks-product-info::before{
      display: block;
      content: '';
      position: absolute;

      background-color: #00edff;

      width: 20px;
      height: 20px;
      border-radius: 20px;

      top: 40px;
   }

   .tks-products .tks-product-blk:nth-child(even) .tks-product-info,
   .tks-products .tks-product-blk:nth-child(even) .tks-product-pic,
   .tks-products .tks-product-blk:nth-child(odd) .tks-product-info,
   .tks-products .tks-product-blk:nth-child(odd) .tks-product-pic
   {
      float: left;
   }

   .tks-products .tks-product-blk:nth-child(even) .tks-product-info,
   .tks-products .tks-product-blk:nth-child(odd) .tks-product-info{
      padding-left: 30px;
   }

   .tks-products .tks-product-blk:nth-child(even) .tks-product-info::before,
   .tks-products .tks-product-blk:nth-child(odd) .tks-product-info::before{
      left: -10px;
   }

   .tks-products .tks-product-blk .tks-product-pic{
      width: 100%;
      height: auto;
      float: left;
      padding: 30px 30px;
      padding-right:0;
   }

   .tks-products .tks-product-pic img{
      width: 100%;
      height: auto;
      position: relative;

      top: 0;
      left: 0;
      transform: none;
   }

   .tks-products .tks-product-pic::after{
      content:'';
      display:block;
      position: absolute;
      width: 150px;
      height: 5px;
      right: 0;
      bottom:0;
      background-image: linear-gradient(120deg, #094FFF, #00edff );

      border-radius: 5px  0 5px 0 ;
   }

   .tks-products .tks-product-info .product-name{
/*      font-family: "Noto Sans TC", sans-serif;*/

      letter-spacing: 0px;

      font-weight: 700;
      font-size: 24px;
      line-height: 32px;

      color: #333;
   }

   .tks-products .tks-product-info .product-text{
      margin-top: 16px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 300;
      font-size: 16px;
      line-height: 32px;

      color: #333;
   }

   .tks-products .tks-product-info  ul{
      margin-top: 0px;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 300;
      font-size: 16px;
      line-height: 32px;

      color: #333;

      padding-left: 20px;
   }

   .tks-products .tks-product-info  li{
      list-style-type: square;
      list-style-position: outside;
   }

   .tks-products .tks-product-info .product-link{
      margin-top: 50px;
      width: 150px;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 500;
      font-size: 16px;
      line-height: 32px;

/*      border: 1px solid #333;*/
      border-radius: 18px;

      display: block;
      text-align: center;

/*      color: #fff;*/


      transition: .7s;
   }
}



/*footer*/
footer{
   width:  100%;
   /*height: 300px;*/
   background-color: #fff;

   /*margin-top: 150px;   */
   float: left;
}

.footer-info{
   /*background-color: #eeeeee;*/
   /*background-color: #888;*/
   /*float: left;*/
   width: 100%;
   margin-top: 40px;
}

.footer-info .footer-img{
   float: left;
   margin-left: 50px;
   margin-bottom: 28px;
}



.footer-info .footer-text{
   float:  right;
}

.footer-info .footer-website-map,
.footer-info .footer-office-info{
   padding: 0px 50px;
   float:  left;
}

.footer-info .footer-website-map h4,
.footer-info .footer-office-info h4{
/*   font-family: 'Noto Sans Display', serif;*/
   font-weight: 500;
   font-size: 20px;
   line-height: 40px;
}

.footer-info .footer-website-map li a{
   display: block;

/*   font-family: 'Noto Sans Display', serif;*/
   font-weight: 100;
   font-size: 16px;

   line-height: 28px;
   color: #333;

   transition: .5s;

}

.footer-info .footer-website-map li a:hover{
   display: block;

/*   font-family: 'Noto Sans Display', serif;*/
   font-weight: 500;
   font-size: 16px;

   line-height: 28px;
   color: #094FFF;

}

.footer-office{
   margin-bottom: 28px;

   color: #333;
}

.footer-info .footer-office-info h4{
/*   font-family: 'Noto Sans TC', sans-serif;*/
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
}

.footer-info .footer-office-info p{
/*   font-family: 'Noto Sans TC', sans-serif;*/
   font-weight: 100;
   font-size: 16px;
   line-height: 24px;
}

.footer-info .footer-office-info .office-number p,
.footer-info .footer-office-info .office-number a{
/*   font-family: 'Noto Sans TC', sans-serif;*/
   font-weight: 100;
   font-size: 16px;
   line-height: 24px;

   padding-right: 30px;
   display: inline-block;
}


.footer-copyright{
   float: left;
   margin-top: 40px;


   width: 100%;
   height: 36px;
   text-align: center;
   font-size: 12px;
   font-family: "Noto Sans Display", sans-serif;
   font-weight: 100px;
   line-height: 36px;
   color: #333;

   /*background-color: #00EDFF;*/
   background-image: linear-gradient(120deg,  #00edff, #094FFF );

}

@media screen and (max-width: 500px){
   .footer-info .footer-website-map,
   .footer-info .footer-office-info{
      padding: 25px 50px;
   }


   .footer-info .footer-website-map::after{
      content:'';
      display: block;
      position: absolute;
      width: 150px;
      height: 5px;
      background-image: linear-gradient(120deg,  #00edff, #094FFF );
      border-radius: 5px 0 5px 0;

      left:50px;
      bottom:0;

   }
}



/*products page*/
.products-page #banner-box::after{
   display: block;
   content: ' ';
   position: absolute;

   width: 100%;
   height: 20px;
   bottom: 0;
   left: 0;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );

}

.products-page #banner-box .container{
   height: 100%;
}

.products-page #banner-box .banner-info-blk{
   float: left;
   position: absolute;
   left: 0;
   top: calc(50% + 50px);
   transform: translateY(-50%);

   padding-left: 30px;
}




.products-page #banner-box .banner-info-blk .banner-info-title{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 72px;
   font-weight: 300;
   letter-spacing: 3px;
   color: #fff;

   display: block;
}

.products-page #banner-box .banner-info-blk .banner-info-text{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 3px;
   color: #fff;

   display: block;

   margin-top: 24px;
}



.products-page .products-list{
   padding: 80px 0;
}


.products-page .products-list::before{
   display: block;
   content: ' ';
   position: absolute;

   width: 3px;
   height: 100%;
   top: 0;
   left: -3px;
   background-color: #00edff;
}


.products-page .products-list .product-cal{
   /*margin-top: 80px;*/
   padding-left: 60px;
   margin-bottom: 50px;

   padding-top: 100px;
}

.products-page .products-list .product-cal::before{

   display: block;
   content: ' ';
   position: absolute;

   width: 20px;
   height: 20px;
   border-radius: 10px;
   left: -10px;
   top: 115px;
   background-color: #00edff;
}


.products-page .products-list .product-cal .product-cal-title{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 32px;
   line-height: 48px;
   font-weight: 300;
   color: #333;
   /*letter-spacing: 2px;*/
}


.products-page .products-list .product-cal .product-blk{
   padding-left: 60px;
   padding-top: 70px;
   margin-bottom: 50px;
   width: 100%;

   /*float: left;*/

   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;

}

.products-page .products-list .product-cal .product-blk::after{

   display: block;
   content: ' ';
   position: absolute;

   width: 250px;
   height: 5px;
   border-radius: 5px 0 5px 0;
   right: 0;
   bottom: 18px;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );
}


.products-page .products-list .product-cal .product-blk .product-pic{
   flex: 4;
}

.products-page .products-list .product-cal .product-blk .product-pic img{
   width: 100%;
}

.products-page .products-list .product-cal .product-blk .product-info{
   flex: 7;
   padding-left: 30px;
}

.products-page .products-list .product-cal .product-blk .product-info .product-name{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 60px;
   line-height: 70px;
   font-weight: 100;
   letter-spacing: 3px;
   color: #333;

   display: block;

   margin-bottom: 40px;
}


.products-page .products-list .product-cal .product-blk .product-info .product-text{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   line-height: 32px;
   font-weight: 300;
   /*letter-spacing: 3px;*/
   color: #333;

   display: block;

   margin-bottom: 18px;
}

.products-page .products-list .product-cal .product-blk .product-info .product-link{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   line-height: 32px;
   font-weight: 500;
   /*letter-spacing: 3px;*/
   color: #333;

   display: inline-block;

   margin-top: 18px;
   margin-bottom: 18px;


   padding: 0 32px;
   border:  solid 1px #333;
   border-radius: 16px;

   transition: .5s;
}

.products-page .products-list .product-cal .product-blk .product-info .product-link:hover{
   color: #fff;
   background-color: #00edff;
   border:  solid 1px #00edff;

   text-shadow: 1px 1px 1px #333;
}


@media screen and (max-width: 1024px){
   .products-page .products-list::before{
      display: block;
      content: ' ';
      position: absolute;

      width: 3px;
      height: 100%;
      top: 0;
      left: 50px;
      background-color: #00edff;
   }

   .products-page .products-list .product-cal{
      /*margin-top: 80px;*/
      padding-left: 100px;
      margin-bottom: 50px;

      padding-top: 50px;
   }

   .products-page .products-list .product-cal::before{

      display: block;
      content: ' ';
      position: absolute;

      width: 20px;
      height: 20px;
      border-radius: 10px;
      left: 40px;
      top: 65px;
      background-color: #00edff;
   }

   .products-page .products-list .product-cal .product-cal-title{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 32px;
      line-height: 48px;
      font-weight: 700;
      color: #333;
      /*letter-spacing: 2px;*/
   }

   .products-page .products-list .product-cal .product-blk{
      padding-left: 0;
      padding-top: 70px;
      padding-bottom: 50px;
      width: 100%;

      /*float: left;*/

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

   }


   .products-page .products-list .product-cal .product-blk .product-info{
      flex: 7;
      padding-left: 50px;
      padding-right: 50px;
   }

   .products-page .products-list .product-cal .product-blk::after{

      display: block;
      content: ' ';
      position: absolute;

      width: 250px;
      height: 5px;
      border-radius: 5px 0 5px 0;
      right: 50px;
      bottom: 18px;
      background-image: linear-gradient(120deg,  #00edff, #094FFF );
   }


   .products-page .products-list .product-cal .product-blk .product-info .product-link{
      background-image: linear-gradient(120deg, #094FFF, #00edff );
      border: 0px solid #00edff;
      color: #fff;
   }

}

@media screen and (max-width: 768px){
   .products-page .products-list{
      padding: 30px 0;
   }

   .products-page .products-list .product-cal{
      /*margin-top: 80px;*/
      padding-left: 80px;
      margin-bottom: 50px;

      padding-top: 50px;
   }

   .products-page .products-list .product-cal .product-cal-title{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 32px;
      line-height: 48px;
      font-weight: 700;
      color: #333;
      /*letter-spacing: 2px;*/
   }

   .products-page .products-list .product-cal .product-blk .product-info{
      flex: 7;
      padding-left: 30px;
      padding-right: 30px;
   }

   .products-page .products-list .product-cal .product-blk .product-info .product-name{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 48px;
      line-height: 60px;
      font-weight: 100;
      letter-spacing: 1px;
      color: #333;

      display: block;

      margin-bottom: 40px;
   }
}

@media screen and (max-width:500px){
   /*products page*/
   .products-page #banner-box{
      height: 400px;
   }

   .products-page .products-list::before{
      display: block;
      content: ' ';
      position: absolute;

      width: 3px;
      height: 100%;
      top: 0;
      left: 30px;
      background-color: #00edff;
   }

   .products-page #banner-box .banner-info-blk{
      float: left;
      position: absolute;
      left: 0;
      top: calc(50% + 50px);
      transform: translateY(-50%);

      padding-left: 30px;
      padding-right: 30px;
   }



   .products-page #banner-box .banner-info-blk .banner-info-title{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 48px;
      font-weight: 300;
      letter-spacing: 0px;
      color: #fff;

      display: block;
   }

   .products-page #banner-box .banner-info-blk .banner-info-text{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 16px;
      line-height: 24px;
      font-weight: 300;
      letter-spacing: 3px;
      color: #fff;

      display: block;

      margin-top: 24px;
   }


   .products-page .products-list .product-cal{
      /*margin-top: 80px;*/
      padding-left: 50px;
      margin-bottom: 50px;

      padding-top: 30px;
   }

   .products-page .products-list .product-cal::before{

      display: block;
      content: ' ';
      position: absolute;

      width: 16px;
      height: 16px;
      border-radius: 10px;
      left: 24px;
      top: 42px;
      background-color: #00edff;
   }

   .products-page .products-list .product-cal .product-cal-title{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 24px;
      line-height: 32px;
      font-weight: 700;
      color: #333;
      /*letter-spacing: 2px;*/
   }

   .products-page .products-list .product-cal .product-blk{
      padding: 30px 0;
      padding-right: 30px;
      width: 100%;

      /*float: left;*/

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;

   }

   .products-page .products-list .product-cal .product-blk .product-pic{
      flex: 1;
   }

   .products-page .products-list .product-cal .product-blk .product-pic img{
      width: 100%;
   }

   .products-page .products-list .product-cal .product-blk .product-info{
      flex: 1;
      padding: 30px 0;
   }

   .products-page .products-list .product-cal .product-blk .product-info .product-name{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 36px;
      line-height: 48px;
      font-weight: 100;
      letter-spacing: 0px;
      color: #333;

      display: block;

      margin-bottom: 40px;
   }

}
/*prodintro-page */
.prodintro-page .product-intro{
   /*margin-top: -100px;*/
   /*height: 1000px;*/
   margin-top: -200px;
   /*margin-bottom: -200px;*/

   background-color: #fff;
   box-shadow: 1px 1px 5px #333;

   padding: 100px 100px;

   z-index: 100;
}

.prodintro-page .product-intro::before{
   display: block;
   content: ' ';
   position: absolute;

   width: 100%;
   height: 20px;
   top: 0;
   left: 0;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );
}


.prodintro-page .product-intro .product-name{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 72px;
   line-height: 80px;
   font-weight: 100;
   letter-spacing: 3px;
   color: #333;

   display: block;

   margin-bottom: 40px;
}

.prodintro-page .product-intro .product-level{
   margin-bottom: 40px;
}

.prodintro-page .product-intro .product-level a,
.prodintro-page .product-intro .product-level p{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   line-height: 36px;
   font-weight: 100;
   color: #666;

   display: inline-block;

   transition: .7s;

}

.prodintro-page .product-intro .product-level a:hover{
   color: #00edff ;
   text-shadow: 1px 1px 1px #666;
}


.prodintro-page .product-intro .product-pic{
   margin-bottom: 40px;
   /*float: left;*/
}

.prodintro-page .product-intro .product-pic img{
   display: block;
   width: 50%;
   margin:  0 auto;
}

.wysiwyg{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   font-weight: 100;
   letter-spacing: 3px;
   color: #333;
   display: block;
}

.wysiwyg p{
   margin-bottom: 16px;
}

.wysiwyg ul{
/*   margin-top: 30px;*/
   padding-left: 20px;
   margin-bottom: 16px;
}

.wysiwyg li{
   list-style-type: square;
   list-style-position: outside;
   margin-bottom: 10px;
}


.belt-decorate{
   display: block;
   content: ' ';


   width: 300px;
   height: 5px;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );

   border-radius: 5px 0 5px 0;

   margin-bottom: 40px;
}


.prodintro-page .product-intro .contact-us-btn{
   display: block;

/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 20px;
   line-height: 50px;
   font-weight: 300;
   letter-spacing: 3px;
   color: #333;

   width: 200px;
   border-radius: 30px;
   text-align: center;
   display: block;
   margin-top: 80px;
   transition: .7s;

   border: 1px solid #333;
   background-color: #fff;



}

.prodintro-page .product-intro .contact-us-btn:hover{
   border: 1px solid #00edff;
   background-color: #00edff;

   color: #555;
}


.prodintro-page .rel-product{
   width: 100%;
   margin-top: -200px;
   /*margin-bottom: -200px;*/

}

.prodintro-page .rel-product .rel-product-banner{
   height: 350px;
   /*top: -300px;*/
    background-image: linear-gradient(120deg,  #00edff, #094FFF );;
}

.prodintro-page .rel-product .rel-product-banner .rel-product-title{
   /*margin-top: 200px;*/
   width: 100%;
   padding-top: 200px;

/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 48px;
   line-height: 150px;
   font-weight: 100;
   letter-spacing: 3px;
   color: #fff;

   text-align: center;
}

.prodintro-page .rel-product .rel-product-list{
   padding: 60px 0 100px 0;
}

.prodintro-page .rel-product .rel-product-list .carousel {
  /*background: #EEE;*/

  /*max-width: 1024px;*/
  /*height: 210px;*/
}

.prodintro-page .rel-product .rel-product-list .carousel-cell {
  width: 30%;
  /*height: 200px;*/
  margin-right: 5%;
  background: #fff;
  border-radius: 5px;
  counter-increment: carousel-cell;

  /*box-shadow: 1px 1px 2px #888;*/
}

/* cell number */
/*.prodintro-page .rel-product .rel-product-list .carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: #333;
}*/

.prodintro-page .rel-product .rel-product-blk{
   width: 100%;
   float: left;
   margin-bottom: 60px;
}

.prodintro-page .rel-product .rel-product-blk .rel-product-pic{
   width: 100%;
   padding-bottom: 120%;
   overflow: hidden;
}

.prodintro-page .rel-product .rel-product-blk .rel-product-pic img{
   position: absolute;
   width: 85%;

   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.prodintro-page .rel-product .rel-product-blk .rel-product-info{
   width: 100%;
   padding: 30;
}

.prodintro-page .rel-product .rel-product-blk .rel-product-info .rel-product-name{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 32px;
   line-height: 40px;
   font-weight: 100;
   letter-spacing: 2px;
   color: #333;

   margin-top: 18px;
   margin-bottom: 18px;
}

.prodintro-page .rel-product .rel-product-blk .rel-product-info .rel-product-text{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #666;

   margin-bottom: 32px;
}


.prodintro-page .rel-product .rel-product-blk .rel-product-info .rel-product-link{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #333;

   margin-bottom: 18px;
}

.prodintro-page .rel-product .rel-product-blk .rel-product-info .rel-product-link:hover{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #00edff;

   margin-bottom: 18px;
}

.prodintro-page .rel-product .flickity-button.flickity-prev-next-button.previous{
   left: -70px;
}

.prodintro-page .rel-product .flickity-button.flickity-prev-next-button.next{
   right: -70px;
}


@media screen and (max-width: 1024px){
   .prodintro-page .rel-product{
      width: 100%;
      margin-top: 0;
      /*margin-bottom: -200px;*/

   }

   .prodintro-page .rel-product .rel-product-banner{
      height: 150px;
      /*top: -300px;*/
       background-image: linear-gradient(120deg,  #00edff, #094FFF );;
   }

   .prodintro-page .rel-product .rel-product-banner .rel-product-title{
      /*margin-top: 200px;*/
      width: 100%;
      padding-top: 0;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 48px;
      line-height: 150px;
      font-weight: 100;
      letter-spacing: 3px;
      color: #fff;

      text-align: center;
   }
   .prodintro-page .rel-product .rel-product-list{
      padding: 60px 100px 100px 100px;
   }

   .prodintro-page .rel-product .rel-product-blk .rel-product-info .rel-product-name{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 24px;
      line-height: 32px;
      font-weight: 100;
      letter-spacing: 2px;
      color: #333;

      margin-top: 18px;
      margin-bottom: 18px;
   }

   .prodintro-page .rel-product .rel-product-blk .rel-product-info .rel-product-text{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #666;

      margin-bottom: 32px;
   }

   .prodintro-page .product-intro .contact-us-btn{
      border: 0px solid #333;
      background-image: linear-gradient(120deg,  #00edff, #094FFF );
      color:#fff;
   }



}


@media screen and (max-width:768px){
   .prodintro-page .product-intro{
      /*margin-top: -100px;*/
      /*height: 1000px;*/
      margin-top: -200px;
      /*margin-bottom: -200px;*/

      background-color: #fff;
      box-shadow: 1px 1px 5px #333;

      padding: 100px 50px;

      z-index: 100;
   }

   .prodintro-page .product-intro .product-pic{
      margin-bottom: 30px;
      /*float: left;*/
   }

   .prodintro-page .product-intro .product-pic img{
      display: block;
      width: 70%;
      margin:  0 auto;
   }
}

@media screen and (max-width: 500px){
   .prodintro-page .product-intro{
      /*margin-top: -100px;*/
      /*height: 1000px;*/
      margin-top: -200px;
      /*margin-bottom: -200px;*/

      background-color: #fff;
      box-shadow: 1px 1px 5px #333;

      padding: 50px 30px;

      z-index: 100;
   }

   .prodintro-page .product-intro .product-name{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 32px;
      line-height: 50px;
      font-weight: 500;
      letter-spacing: 0px;
      color: #333;

      display: block;

      margin-bottom: 30px;
   }

   .prodintro-page .product-intro .product-level{
      margin-bottom: 30px;
   }

   .prodintro-page .product-intro .product-pic{
      margin-bottom: 30px;
      /*float: left;*/
   }

   .prodintro-page .product-intro .product-pic img{
      display: block;
      width: 90%;
      margin:  0 auto;
   }

   .wysiwyg{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 16px;
      line-height: 32px;
      font-weight: 100;
      letter-spacing: 0px;
      color: #333;

      display: block;
   }

   .wysiwyg p{
      margin-bottom: 30px;
   }

   .belt-decorate{
      display: block;
      content: ' ';


      width: 100%;
      height: 5px;
      background-image: linear-gradient(120deg,  #00edff, #094FFF );

      border-radius: 5px 0 5px 0;

      margin-bottom: 30px;
   }

   .prodintro-page .product-intro .contact-us-btn{
      display: block;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 16px;
      line-height: 40px;
      font-weight: 300;
      letter-spacing: 3px;
      color: #fff;

      width: 100%;
      border-radius: 30px;
      text-align: center;
      display: block;
      margin-top: 80px;
      transition: .7s;

      border: 0px solid #333;
/*      background-color: #fff;*/


       background-image: linear-gradient(120deg,  #00edff, #094FFF );
   }

   .prodintro-page .product-intro .contact-us-btn:hover{
      border: 1px solid #00edff;
      background-color: #00edff;

      color: #555;
   }

   .prodintro-page .rel-product .rel-product-list{
      padding: 60px 80px 100px 80px;
   }

   .prodintro-page .rel-product .rel-product-list .carousel-cell {
     width: 90%;
     /*height: 200px;*/
     margin-right: 5%;
     background: #fff;
     border-radius: 5px;
     counter-increment: carousel-cell;

     /*box-shadow: 1px 1px 2px #888;*/
   }

   .prodintro-page .rel-product .rel-product-blk .rel-product-pic{
      width: 100%;
      padding-bottom: 100%;
      overflow: hidden;
   }

   .prodintro-page .rel-product .rel-product-blk .rel-product-pic img{
      position: absolute;
      width: 70%;

      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

}



/* news-page  */
.news-list-page .news-list-container{
   padding-top: 15px;
   margin-top: -150px;

   box-shadow: 1px 1px 2px #888;

   margin-bottom: 150px;
}

.news-list-page .news-list-container::before{
   display: block;
   content: '';
   position: absolute;

   width: 100%;
   height: 15px;
   top: 0;
   left: 0;

   background-image: linear-gradient(120deg,  #00edff, #094FFF );;
}

.news-list-page .news-list-container::after{
   display: block;
   content: '';
   position: absolute;

   width: 100vw;
   height: 300px;
   bottom: -150px;
   left: 50%;
   transform: translateX(-50%);
   z-index: -1;

   background-image: linear-gradient(120deg,  #00edff, #094FFF );;
}

.news-list-page .news-list-container .news-list-title{
   display: block;
   padding-left: 50px;
/*   font-family: 'Noto Sans TC', sans-serif;*/
   font-weight: 100;
   font-size: 32px;
   line-height: 72px;

   background-color: #d6fcfc;

}


.news-list-page .news-list{
   padding: 70px 0;

   background-color: #fff;
}



.news-list-page .news-list .news-blk{
   width: 100%;
   padding: 70px 0;

   display: flex;
   flex-wrap: nowrap ;
   flex-direction: row;
}

.news-list-page .news-list .news-blk::after{

   display: block;
   content: '';
   position: absolute;

   width: 3px;
   height: calc(100% - 140px);
   top: 50%;
   left: 0;
   transform: translateY(-50%);

   background-image: linear-gradient(120deg,  #00edff, #094FFF );
}


.news-list-page .news-list .news-blk .news-date{
   flex:1;
   padding-left: 50px;

}

/*.news-list-page .news-list .news-blk .news-date::after{

   display: block;
   content: '';
   position: absolute;

   width: 3px;
   height: 100%;
   top: 0;
   left: 0;

   background-image: linear-gradient(120deg,  #00edff, #094FFF );
}
*/

.news-list-page .news-list .news-blk .news-date p{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 48px;
   font-weight: 100;
   line-height: 60px;
   color: #666;
}

.news-list-page .news-list .news-blk .news-info{
   flex: 4;
   padding-right: 50px;
}


.news-list-page .news-list .news-blk .news-info .news-title{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 60px;
   font-weight: 100;
   line-height: 70px;
   color: #333;

   margin-bottom: 24px;
}

.news-list-page .news-list .news-blk .news-info .news-short-text{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   font-weight: 300;
   line-height: 32px;
   color: #666;

   margin-bottom: 24px;
}

.news-list-page .news-list .news-blk .news-info .news-link{

   display: block;
   width: 200px;
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   font-weight: 700;
   line-height: 40px;
   text-align: center;

   color: #fff;


   border-radius: 20px;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );
}


@media screen and (max-width: 1024px){
   .news-list-page .news-list .news-blk::after{

      width: 10px;
   }

   .news-list-page .news-list .news-blk .news-info{
      flex: 4;
      padding-right: 50px;
   }
}


@media screen and (max-width: 500px){
   .news-list-page .news-list .news-blk{
      width: 100%;
      padding: 30px 0;

      display: block;
   }

   .news-list-page .news-list .news-blk::after{

      display: block;
      content: '';
      position: absolute;

      width: 7px;
      height: calc(100% - 60px);
      top: 50%;
      left: 0;
      transform: translateY(-50%);

      background-image: linear-gradient(120deg,  #00edff, #094FFF );
   }


   .news-list-page .news-list .news-blk .news-date{
      width: 100% ;
      padding-left: 30px;
   }

   .news-list-page .news-list .news-blk .news-date p{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 24px;
      font-weight: 100;
      line-height: 32px;
      color: #666;

      display: inline-block;
   }

   .news-list-page .news-list .news-blk .news-info{
      width: 100%;
      padding-left: 30px;
      padding-right: 30px;
   }


   .news-list-page .news-list .news-blk .news-info .news-title{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 48px;
      font-weight: 100;
      line-height: 60px;
      color: #333;

      margin-bottom: 32px;
   }

   .news-list-page .news-list .news-blk .news-info .news-short-text{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 16px;
      font-weight: 300;
      line-height: 32px;
      color: #666;

      margin-bottom: 60px;
   }

   .news-list-page .news-list .news-blk .news-info .news-link{

      display: block;
      width: 100%;
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 16px;
      font-weight: 700;
      line-height: 40px;
      text-align: center;

      color: #fff;


      border-radius: 20px;
      background-image: linear-gradient(120deg,  #00edff, #094FFF );
   }
}


/*news page*/
/* news-page  */
.news-page .news-container{
   margin-top: -150px;
   background-color: #fff;

   box-shadow: 1px 1px 2px #888;
}


.news-page .news-container::before{
   display: block;
   content: ' ';
   position: absolute;

   width: 15px;
   height: 300px;
   top: 0;
   left: 0;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );
   z-index: 99;
}



.news-page .news-container .news-content{
   width: 100%;
}


.news-page .news-container .news-head{
   width: 100%;
   height: 80px;
   color: #333;
/*   font-family:  "Noto Sans TC", sans-serif;*/
   font-weight: 100;
   font-size: 32px;
   padding-left: 50px;
   line-height: 80px;
}




.news-page .news-container .news-title-container{
   width: 100%;
   padding: 60px 50px;
   background-color:#D6fcfc;
}

/*.news-page .news-conteine*/

.news-page .news-container .news-title-container .news-title{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 60px;
   line-height: 70px;
   font-weight: 100;
   /*letter-spacing: 3px;*/

   margin-bottom: 32px;

}


.news-page .news-container .news-date{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   line-height: 18px;
   font-weight: 300;
   /*letter-spacing: 3px;*/

   color: #666;
   /*margin-bottom: 32px;*/

   /*margin-bottom: 100px;*/
}


.news-page .news-container .news-info{
   width: 100%;
   padding: 60px 50px;

   margin-bottom: 150px;
}

.news-page .news-container .news-info::before{
   display: block;
   position: absolute;
   content:'';

   width: 100vw;
   height: 300px;
   left: 50%;
   bottom: -150px;
   transform: translateX(-50%);

   z-index: -1;

   background-image: linear-gradient(120deg,  #00edff, #094FFF );
}



.news-page .news-container .news-info p{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-size: 18px;
   line-height: 36px;
   font-weight: 300;
   /*letter-spacing: 3px;*/

   color: #333;
   /*margin-bottom: 32px;*/

   margin-bottom: 32px;
}

.news-page .news-container .news-info img{
   width: 100%;

   margin-bottom: 32px;
}


@media screen and (max-width: 500px){
   .news-page .news-container::before{
      display: block;
      content: ' ';
      position: absolute;

      width: 10px;
      height: 300px;
      top: 0;
      left: 0;
      background-image: linear-gradient(120deg,  #00edff, #094FFF );
      z-index: 99;
   }

   .news-page .news-container .news-title-container{
      width: 100%;
      padding: 60px 30px;
      background-color:#D6fcfc;
   }


   .news-page .news-container .news-title-container .news-title{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 48px;
      line-height: 60px;
      font-weight: 100;
      /*letter-spacing: 3px;*/

      margin-bottom: 32px;

   }

   .news-page .news-container .news-info{
      width: 100%;
      padding: 60px 30px;

      margin-bottom: 150px;
   }

   .news-page .news-container .news-info::before{
      display: block;
      position: absolute;
      content:'';

      width: 100vw;
      height: 300px;
      left: 50%;
      bottom: -150px;
      transform: translateX(-50%);

      z-index: -1;

      background-image: linear-gradient(120deg,  #00edff, #094FFF );
   }



   .news-page .news-container .news-info p{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-size: 16px;
      line-height: 36px;
      font-weight: 300;
      /*letter-spacing: 3px;*/

      color: #333;
      /*margin-bottom: 32px;*/

      margin-bottom: 32px;
   }
}

/*contact-up page*/
.contact-page #banner-box{
   height: 300px;
}

.contact-page .contact-container{
   margin-top: -100px;

   /*padding: 100px 0;*/

   background-color: #fff;
}

.contact-page .contact-container::before{
   display: block;
   content: '';
   position: absolute;

   width: 15px;
   height: 300px;
   top: 0;
   left: 0;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );
   z-index: 99;
}


.contact-page .contact-box{
   width: 100%;
   float: left;
}

.contact-page .contact-head{
   display: block;
   width: 100%;
   height: 80px;
   color: #333;
/*   font-family:  "Noto Sans TC", sans-serif;*/
   font-weight: 100;
   font-size: 32px;
   /*padding-left: 50px;*/
   line-height: 80px;
   text-align: center;

}

.contact-page .contact-board{
   width: 100%;
   /*padding: 100px 0;*/

   background-color: #D6fcfc;

   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;


   margin-bottom: 150px;
}


.contact-page .contact-board::after{
   display: block;
   content: '';
   width: 100vw;
   height: 300px;

   z-index: -1;
   position: absolute;
   bottom: -150px;
   left: 50%;
   transform: translateX(-50%);
   background-image: linear-gradient(120deg,  #00edff, #094FFF );
}

.contact-page .contact-board .contact-text{
   flex: 1;
   padding: 60px 50px;

   display: inline-block;
}

.contact-page .contact-board .contact-text .contact-info-text1{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 100;
   font-size: 60px;
   line-height: 70px;

   color: #333;

   margin-bottom: 32px;
}


.contact-page .contact-board .contact-text .contact-info-text2{
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 300;
   font-size: 16px;
   line-height: 24px;

   color: #666;

   margin-bottom: 32px;
}


.contact-page .contact-board .contact-form{
   flex: 1;
   padding: 100px 0px;
   top: 0;

   display:block;
}


.contact-page .contact-board .contact-form label{
   display: block;
/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 300;
   font-size: 18px;
   line-height: 18px;
   margin-bottom: 18px;

   padding-left: 18px;

   color: #333;

   /*margin-bottom: 32px;*/
}

.contact-page .contact-board .contact-form input{
   display: block;
   width: 80%;

   border: 1px solid #fff;
   border-radius: 18px;

/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 100;
   font-size: 18px;
   line-height: 36px;
   padding: 0px 18px;

   margin-bottom: 24px;
}

.contact-page .contact-board .contact-form textarea{
   display: block;
   width: 80%;

   border: 1px solid #fff;
   border-radius: 18px;

/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 100;
   font-size: 18px;
   line-height: 36px;
   padding: 0px 18px;

   margin-bottom: 18px;
}


.contact-page .contact-board .contact-form .submit-btn{
   display: block;
   width: 80%;

   margin-top: 30px;

   border: 0px solid #fff;
   background-image: linear-gradient(120deg,  #00edff, #094FFF );
   border-radius: 18px;

/*   font-family: "Noto Sans TC", sans-serif;*/
   font-weight: 100;
   font-size: 18px;
   line-height: 40px;
   padding: 0px 18px;

   color: #fff;

   margin-bottom: 24px;
}


@media screen and (max-width: 768px){
   .contact-page .contact-board{
      width: 100%;
      padding: 0 100px;

      background-color: #D6fcfc;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;


      margin-bottom: 150px;
   }

   .contact-page .contact-board .contact-text{
      flex: 1;
      padding: 60px 50px 30px 50px;

      display: inline-block;
   }

   .contact-page .contact-board .contact-form{
      flex: 1;
      padding: 0px 50px 50px 50px;
      top: 0;

      display:block;
   }

   .contact-page .contact-board .contact-form input{
      display: block;
      width: 100%;

      border: 1px solid #fff;
      border-radius: 18px;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      font-size: 18px;
      line-height: 36px;
      padding: 0px 18px;

      margin-bottom: 24px;
   }

   .contact-page .contact-board .contact-form textarea{
      display: block;
      width: 100%;

      border: 1px solid #fff;
      border-radius: 18px;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      font-size: 18px;
      line-height: 36px;
      padding: 0px 18px;

      margin-bottom: 18px;
   }

   .contact-page .contact-board .contact-form .submit-btn{
      display: block;
      width: 50%;

      float: right;
   }
}


@media screen and (max-width: 500px){
   .contact-page .contact-board{
      width: 100%;
      padding: 0 50px;

      background-color: #D6fcfc;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;


      margin-bottom: 150px;
   }

   .contact-page .contact-board .contact-text{
      flex: 1;
      padding: 60px 0px 30px 0px;

      display: inline-block;
   }

   .contact-page .contact-board .contact-text .contact-info-text1{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 500;
      font-size: 36px;
      line-height: 48px;

      color: #333;

      margin-bottom: 32px;
   }


   .contact-page .contact-board .contact-text .contact-info-text2{
/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 300;
      font-size: 16px;
      line-height: 24px;

      color: #666;

      margin-bottom: 32px;
   }

   .contact-page .contact-board .contact-form{
      flex: 1;
      padding: 0px 0px 50px 0px;
      top: 0;

      display:block;
   }

   .contact-page .contact-board .contact-form input{
      display: block;
      width: 100%;

      border: 1px solid #fff;
      border-radius: 18px;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      font-size: 18px;
      line-height: 36px;
      padding: 0px 18px;

      margin-bottom: 24px;
   }

   .contact-page .contact-board .contact-form textarea{
      display: block;
      width: 100%;

      border: 1px solid #fff;
      border-radius: 18px;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      font-size: 18px;
      line-height: 36px;
      padding: 0px 18px;

      margin-bottom: 18px;
   }

   .contact-page .contact-board .contact-form .submit-btn{
      display: block;
      width: 100%;

      float: right;

      border: 0px solid #fff;
      background-image: linear-gradient(120deg,  #00edff, #094FFF );
      border-radius: 18px;

/*      font-family: "Noto Sans TC", sans-serif;*/
      font-weight: 100;
      font-size: 18px;
      line-height: 36px;
      padding: 0px 18px;

      color: #fff;

      margin-bottom: 24px;
   }
}