@charset "utf-8";


    body {
      font-family: 'Noto Sans TC', arial, 敺株��迤暺煾��;
      font-size: 16px;
      line-height: 1.5rem;
      /* �㘚���鱓摮𡑒䌊��閙�𥡝�� IE ONLY*/
      word-wrap: break-word;
      /* 甇�虜�輸�撠� */
      word-break: normal;
      color: #6c6d70;
    }
    
div,li,p{
   text-align: justify;
  text-justify: inter-word;
  font-feature-settings: "liga" 0;
}


.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #e01a17;
    border-color: #e01a17;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(50,161,255,.5);
}
.btn-primary {
      color: #fff;
    background-color: #e01a17;
    border-color: #e01a17;
}

.btn-primary:hover {
    color: #fff;
    background-color: #f91d1a;
    border-color:  #f91d1a;
}
    h1 {
      font-size: 2rem;
    }
    h2 {
      font-size: 1.4rem;
    }
       h3 {
      font-size: 1.2rem;
    }
    h4 {
      font-size: 1rem;
    }

.section{
      border: 1px solid red;
    }

.ptop{
    padding-top: 5rem; 
}
.pbottom{
    padding-bottom: 5rem; 
}
    .e {
      font-size: 0.8rem;
      color: #a6a6a6;
    }

.logo { position:absolute;
  display: block;
  padding-top: 18px;
  padding-left: 22px;
z-index: 2;
}
    .num{
      font-size: 2.5rem;
      font-weight: 800;
      line-height: 3rem;
    }
    .font_blue {
      color: #83b8be;
    }
    .font_pink {
      color: #ef856f;
    }
    .font_red {
      color: #e01a17;
    }
    .font_gery {
      color: #a29e9e;
    }
    .font_black {
      color: #363636;
    }
    .font_light_blue {
      color: #96d3da;
    }

    .font_white {
      color: #ffffff;
    }
    .bg {
 background-image: url('../images/bg.png');
 background-color: #e4f6fc;
 background-size: 80%;
 background-repeat: repeat;
 background-position: top center;
 background-attachment: fixed;
    }

    .bg_pink{
     background-color: #ef856f;
    }
    .bg_blue {
     background-color: #96d3da;
    }
   .cricle {
      border-radius: 7rem;
      width:7rem;
      height: 7rem;
    }
 
    .name{
      font-size: 1.7rem;
      line-height: 2rem;
    }

     .content {
    }

    .content p,
    .content li {
      font-size: 1rem;
      line-height: 1.8rem;
    }
    .title {
      letter-spacing: .2rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
       }

    .bg-title {
       display: inline-block;
       padding-left: 3px;
       padding-right: 3px;
       padding-left:1rem;
       letter-spacing: .5rem;
        }
      .bg-title-1 {
       display: inline-block;
       padding-left: 3px;
       padding-right: 3px;
       padding-left:1rem;
       letter-spacing: .5rem;
        }
 .bg-title::before{
  content:"";
       border-left: 4px solid #a29e9e;
       display: inline-block; padding-left:1rem;
     height: 1.5rem; }
     
 .bg-title::after{
  content:"";
       border-right: 4px solid #a29e9e;
       display: inline-block; padding-left:.5rem;
       height: 1.5rem; }
  


 .bg-title-1::before{
  content:"";
       border-left: 4px solid #32a1e1;
       display: inline-block; padding-left:1rem;
     height: 1.5rem; }

  .bg-title-1::after{
  content:"";
       border-right: 4px solid #32a1e1;
       display: inline-block; padding-left:.5rem;
       height: 1.5rem; }
 
    .weblink {
      padding-left: 10px;
      padding-right: 10px;
    }

    .icon-pic {
      width: 150px;
      height: auto;
      border: 1px solid #7b7b7b;
      margin: 0.5rem;
    }
    .icon-pic-pink {
      width: 150px;
      height: auto;
      border: 1px solid #dd4582;
      margin: 0.5rem;
    }

    .use {
      max-width: 350px;
      height: auto;
    }
    .step-margin {
      padding-top: 2rem;
      padding-bottom:  2rem;
    }

    .cooyright {
      font-size: 0.93rem;
    }

    .buy {
    position: fixed;
    bottom: 3rem;
    left: .5rem;
    z-index: 9999;
    } 

    .buy img{
      width: 100px;
      height: auto;
    } 





@media screen and (min-width:568px) and (max-width: 980px) {

.logo{
  margin-left:0;
  padding-left: 20px;

  }
.logo img{
  max-width:168px;
  height:auto;
}
} 




    @media (max-width: 768px) {
        h3{
        font-size: 1.5rem; }
      .content p,
      .content li,
      p,.step-text {
        font-size: 1.1rem;
        line-height: 1.9rem;
      }
          .bg {
 background-image: url('../images/bg.png');
 background-color: #e4f6fc;
 background-size: 130%;
 background-repeat: repeat;
 background-position: top center;
 background-attachment: fixed;
    }
    }



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

.logo{
  margin-top: 0px;
  margin-left: 0px; padding-left: 10px;padding-top: 10px;
  }
.logo img{
  max-width:128px;
  height:auto;
}
      .bg-title-1 {
       letter-spacing: 0rem;
        }
        h3{
        font-size: 1.5rem; }
      .content p,
      .content li,
      p ,.step-text{
        font-size: 1.1rem;
        line-height: 1.9rem;
      }

       .cricle {
      border-radius: 6rem;
      width:6rem;
      height: 6rem;
    }
    }