/************ 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;
    background-size: auto 100vh;
  }

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


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


  .vrview-about-item{padding-top: 250px; color:#ffffff;}
 
}
  
/************ 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;
  background-size: auto 100vh;
}

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


.nav-item, .loginout{margin-top: 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;}



.vrview-about-item{padding-top: 400px; color:#ffffff;}

}