@charset "UTF-8";
/*Google fonts*/

/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
 }

 body{
     font-family: 'Noto Sans TC';
     color: #000000;
 }

 header{
     position: fixed;
     width: 100%;
     z-index: 2
 }

 .main{
     padding-top: 60px;
 }

 @media screen and (max-width: 991px){
     .logo{
         width: 40px!important;
     }
 }


 .logo{
     width: 65px;
 }

 .head-collapse{
     justify-content: flex-end;
 }

 .banner{
     background-image: url('../images/banner.jpg');
     padding-top:15%;
     padding-bottom: 20%;
     padding-left: 10%;
     padding-right: 10%;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
 }

 .banner-title{
     text-align: right;
     margin-bottom: 20px;
 }

 .banner-title p{
     font-size: 36px;
     text-align: right;
     position: relative;
     text-shadow: 1px 1px 5px #030303;
     display: inline-block;
     color: #ffffff;
 }

  .banner-text{
      text-align: right;
  }

 .banner-text p{
     text-shadow: 1px 1px 5px #030303;
     font-size: 20px;
     letter-spacing: 3px;
     padding-top: 20px;
     border-top: 2px solid #ffffff;
     display: inline-block;
     margin-left: 20px;
     margin-right: 20px;
     color: #ffffff;
     text-align: center;
 }

 .banner-btn{
     text-align: right;
     margin-top: 30px;
 }

 .banner-btn a{
     font-size: 20px;
     margin: 0 20px;
     background-color: #ffc300;
     padding: 2px 5%;

     border-radius: 20px;
     border: 1px solid #ffffff;
 }

 .banner-btn a:hover{
     background-color: #00000066;
     color: #ffc300;
 }

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

     .banner-title{
         text-align: center;
     }

     .banner-title p{
         font-size: 24px;
         text-align: center;
     }

     .banner-text{
         text-align: center;
     }

     .banner-text p{
         font-size: 16px;
         margin-left: 0;
         margin-right: 0;
         text-align: center;
     }

     .banner-btn{
         text-align: center;
     }

     .banner-btn button{
        margin: 0;
        margin-top: 20px;
     }
 }

 /*block*/

 .block{
     background: linear-gradient(to bottom, #ffffff 70%, #ffc300 30%);
 }

 .block-title{
     text-align: center;
     padding: 20px 0;
     font-size: 28px;
     font-weight: bold;
 }

 .block-text{
     text-align: center;
     font-size: 18px;
     margin: 30px 0;
 }

  .block-img{
      text-align: center;
  }

 .block-img img{
     width: 80%;
     border-radius: 50%;
     border:8px solid #ffc300;
 }

  @media screen and (max-width: 575px){
      .block{
          background: linear-gradient(to bottom, #ffffff 85%, #ffc300 15%);
      }

      .block-img img{
          width: 100%;
          border:5px solid #ffc300;
      }

      .block-title{
          font-size: 22px;
      }

      .block-text{
          font-size: 14px;
          padding: 0 10px;
      }

      .pc-block-title{
          display: none;
      }

  }

  @media screen and (min-width: 576px){
      .m-block-title{
          display: none;
      }
  }


  /*case*/

  .case{
      background-image: url('../images/bg.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 50px 0;
  }

  .case-area{
      text-align: center;
      border: 2px solid #ffc300;
      margin-top: 20px;
  }

  .case-title{
      background-color: #ffc300;
      padding: 10px 0;
  }

  .case-text{
      margin: 20px 0;
  }

  .case-price{
      position: relative;
      border-bottom: 2px solid #f0f0f0;
  }

  .case-icon{
      font-size: 22px;
      position: absolute;
  }

  .case-num{
     font-size: 56px;
     margin: 0 20px;
  }

  .case-free{
      color: #cccccc;
      position: absolute;
      bottom: 15px;
  }

  .class-item{
      margin:10px 20px;
      border-bottom: 2px solid #f0f0f0;
      padding-bottom: 10px;
  }

    .case-btn{
        margin: 20px 0;
    }

  .case-btn a{
      background-color: #ffc300;
      border-radius: 20px;
      padding: 5px 40px;
      font-weight: bold;
  }

  .case-btn a:hover{
      color: #ffffff;
  }

  /*product*/

  .product-img{
      margin-bottom: 30px;
  }

  .product-img img{
    width: 100%;
  }

  /*ask*/

  .ask{
      background-image: url('../images/product-5.jpg');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
  }

  .ask-mask{
      background-color: #0000004d;
  }

  .ask-btn{
      text-align: center;
  }

  .ask-btn button{
      border: 2px solid #ffffff;
      background-color: #ffc300;
      border-radius: 20px;
      padding: 5px 55px;
      margin: 20px 0;
      margin-bottom: 50px;
      font-weight: bold;
      font-size: 20px;
  }

  .ask-btn button:hover{
      color: #ffc300;
      background-color: #00000066;
  }

  /*introduce*/

  .introduce{
      background-color: #e5e5e5;
      padding: 30px 0;
  }

  .introduce-img{
      padding: 5px;
  }

  .introduce-img img{
      width: 100%;
  }

  .introduce-area{
      background-color: #ffffff;
      margin: 30px 0;
  }

  .introduce-title{
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin: 20px 0;
  }

  .introduce-text{
      text-align: center;
      padding-bottom: 20px;
      height: 70px;
  }

  /*slogn*/

  .slogn{
      background-color: #474747;
      color: #ffffff;
      text-align: center;
      font-size: 18px;
      padding: 30px 15px;
  }

  /*join*/

  .join{
      padding: 20px 0;
  }

  .join-area{
      margin-bottom: 30px;
  }

  .join-img{
      text-align: center;
  }

  .join-img img{
      width: 130px;
      padding: 30px;
  }

  .join-border{
    display: inline-block;
    border-radius: 50%;
    border: 5px solid #ffc300;
  }

  .join-text{
      text-align: center;
      font-size: 20px;
      margin-top: 10px;
      color: #666666;
  }

  /*contact*/

  .contact{
      background-color: #f4f5f7;
      padding-top: 20px;
      padding-bottom: 5%;
  }

  .contact-btn button{
     width: 100%;
     border: 3px solid #ffc300;
     padding: 5px 0;
     border-radius: 20px;
  }

  .contact-btn button:hover{
      background-color: #ffc300;
      color: #ffffff;
  }

  .contact-info{
      text-align: center;
  }

  .contact-info p{
      display: inline-block;
      margin: 0 15px;
      text-decoration: underline;
      font-size: 20px;
  }

   .contact-info img{
       width: 80px;
   }

  /*footer*/

  footer{
     background-color: #ffc300;
     color: #ffffff;
     padding: 3% 0;
  }

  footer ul{
      text-align: center;
  }

  footer li{
      display: inline-block;
      border-left: 1px solid #ffffff;
      border-right: 1px solid #ffffff;
      padding: 0 10px;
      margin: 0 5px;
  }

  .copyright{
      text-align: center;
  }

  /*icon*/
  .icon-phone{
      position: fixed;
      bottom: 80px;
      right: 10px;
  }

  .icon-line{
      position: fixed;
      bottom: 10px;
      right: 10px;
  }