/************ phone area ************/
@media screen and (max-width:939px){

  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .font-color{ color: #333333; }
  .font-color a{ color: #333333; }
  .bg-color{background-color: #ffffff;}
  .link {
    display: #333333;
    padding: 0.5rem 0rem;
  }

  .link:hover, .link:focus {
    text-decoration: none;
  }

  .brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    margin-left: 0rem;
  }

  .brand:hover, .brand:focus {
    text-decoration: none;
  }

  .loginout{
    margin-right: 0rem;
  }


  .bg-footer{background-color: #333333; color:#ffffff; padding-top: 20px; width: 100%; height:300px;}
  

  .item-descript{padding:4rem 0 ;}

  img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: auto;
    
  }

  .swal-footer { text-align: center; }


  .list-menu li { line-height: 35px; text-align: left; padding: 0 40px;}


  .header-bgimg{
    background: url('../../resources/images/pos04.jpg') no-repeat;
    height: 100vh;/*自訂*/
    background-position:center center;
  }

  .bgimg3{
    background: url('../../resources/images/pos03.jpg') no-repeat;
    height: 100vh;/*自訂*/
    background-position:center center;
  }


  .bgdelivery{
    /*background: url('../../resources/images/delivery.png') no-repeat;*/
    background-color: #eff3ff;
    height: 100vh;/*自訂*/
    background-position:center center;
  }


  .nav-item, .loginout{margin-top: 0px;margin-right: 20px;}

 
  .how-flow{top:0; color:#333333; text-align: center;}

  .how-flow img{ width:130%; margin-left: -15%; }


  .bg-dark{background-color: #e8903a;}

  .hflow{ top:0; color:#333333; text-align: center; width:100%;   }
  .hflow ul { list-style: none; width:100%; padding: 0; margin: 0;}
  .hflow ul li{display:inline; text-align: center; width:140px;}
  .hflow .item{ background-color: #efeff1;  width:140px; margin:0px auto; padding: 20px; box-shadow: 1px 2px 2px rgba(168, 168, 168, 0.5); border-radius: 7px;}
  .hflow .item h2{font-size: 1.3em;font-weight: bold;}
  .hflow .item p{font-size: 0.5em;}
  .hflow .next{ padding : 0; margin:0px auto; }



  .contactus-area{width: 100%; min-height: 100px; background-color: #e8903a; border-radius: 7px; padding: 50px 20px; margin:100px 0 50px 0;}
  .contactus-area-content{  }
  .contactus-area-left{ font-size: 28px; color: #ffffff; }
  .contactus-area-right{ cursor: pointer; font-size: 18px; background-color: #ffffff; color: #333333; margin-top: 40px; border-radius: 90px; text-align: center; padding-top: 20px; padding-bottom: 20px; }


}


/************ web area ************/
@media screen and (min-width:940px){

  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .font-color{ color: #333333; }
  .font-color a{ color: #333333; }
  .bg-color{background-color: #ffffff;}
  .link {
    display: #333333;
    padding: 0.5rem 0rem;
  }

  .link:hover, .link:focus {
    text-decoration: none;
  }

  .brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    margin-left: 0rem;
  }

  .brand:hover, .brand:focus {
    text-decoration: none;
  }

  .loginout{
    margin-right: 0rem;
  }


  .bg-footer{background-color: #333333; color:#ffffff; padding-top: 20px; width: 100%; height:300px;}
  

  .item-descript{padding:4rem 0 ;}

  img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width:auto;
    height: auto;
    
  }

  .swal-footer { text-align: center; }


  .list-menu li { line-height: 35px; text-align: left; padding: 0 40px;}


  .header-bgimg{
    background: url('../../resources/images/pos04.jpg') no-repeat;
    height: 100vh;/*自訂*/
    background-position:center center;
  }

  .bgimg3{
    background: url('../../resources/images/pos03.jpg') no-repeat;
    height: 100vh;/*自訂*/
    background-position:center center;
  }


  .bgdelivery{
    /*background: url('../../resources/images/delivery.png') no-repeat;*/
    background-color: #eff3ff;
    height: 100vh;/*自訂*/
    background-position:center center;
  }


  .nav-item, .loginout{margin-top: 20px;}

 
  .how-flow{top:0; color:#333333; text-align: center;}

  .how-flow img{ width:130%; margin-left: -15%; }


  .bg-dark{background-color: #e8903a;}

  .hflow{ top:0; color:#333333; text-align: center; width:100%;   }
  .hflow ul { list-style: none; width:100%; padding: 0; margin: 0;}
  .hflow ul li{display:inline; text-align: center; width:140px;}
  .hflow .item{ background-color: #efeff1;  width:140px; margin:0px auto; padding: 20px; box-shadow: 1px 2px 2px rgba(168, 168, 168, 0.5); border-radius: 7px;}
  .hflow .item h2{font-size: 1.3em;font-weight: bold;}
  .hflow .item p{font-size: 0.5em;}
  .hflow .next{ padding : 0; margin:0px auto; }



  .contactus-area{width: 100%; min-height: 100px; background-color: #e8903a; border-radius: 7px; padding: 50px 20px; margin:100px 0 50px 0;}
  .contactus-area-content{  }
  .contactus-area-left{ font-size: 28px; color: #ffffff; }
  .contactus-area-right{ cursor: pointer; font-size: 18px; background-color: #ffffff; color: #333333; margin-top: 40px; border-radius: 90px; text-align: center; padding-top: 20px; padding-bottom: 20px; }


  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }


  .link {
    display: #333333;
    padding: 0.5rem 1rem;
  }

  .link:hover, .link:focus {
    text-decoration: none;
  }
  

  .brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    margin-left: 5.1rem;
  }

  .brand:hover, .brand:focus {
    text-decoration: none;
  }

  .loginout{
    margin-right: 5.1rem;
  }

  .nav-item, .loginout{margin-top: 0px;}


  .how-flow{top:0; color:#333333; text-align: center;}
  .how-flow img{width:70%; margin-left: 0;}

  .hflow{ top:0; color:#333333; text-align: center; width:100%;   }
  .hflow ul { list-style: none;  width: 700px; padding: 0; margin: 0 auto;  }
  .hflow ul li{display:inline; float: left; text-align: center; width:140px;}
  .hflow .item{background-color: #efeff1; padding: 20px; box-shadow: 1px 2px 2px rgba(168, 168, 168, 0.5); border-radius: 7px;}
  .hflow .item h2{font-size: 1.3em; font-weight: bold;}
  .hflow .item p{font-size: 0.5em;}
  .hflow .next{padding : 50% 0;}


  .contactus-area{width: 100%; min-height: 100px; background-color: #e8903a; border-radius: 10px; padding: 50px 30px; margin:100px 0 50px 0;}
  .contactus-area-content{ }
  .contactus-area-left{ font-size: 28px; color: #ffffff; }
  .contactus-area-right{ float: right; margin-top: -55px; cursor: pointer; font-size: 20px; background-color: #ffffff; color: #333333; border-radius: 90px; padding: 20px 120px; text-align: center; }

}