html,
body {
  color: #000;
  background: #fff;
}
#hero {
  background: #fff url("../img/ROG-phone7/hero-bg.jpg") center top no-repeat !important;
  background-size: cover !important;
  color: #000;
}

/*navbar*/
.navbar.scrolled {
  background: rgba(240, 240, 240, 0.9);
}
.navbar-nav a{
  color: #000;
  border-bottom: 1px solid transparent;
  padding-bottom: 5px;
}
.navbar-nav a:hover{
  border-color: #333;
}
@media screen and (max-width: 768px) {
  .navbar {
  background: rgba(0, 0, 0, 0.8);
  }
  .navbar.scrolled {
  background: rgba(0, 0, 0, 0.8);
  }
  #navbarNav{
  /*background: rgba(255, 255, 255, 0.5);*/
  }
  .navbar-nav a{
    color: #fff;
  }
  .navbar-nav a:hover{
    border-color: #ccc;
  }
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}




.rogphone .text-sp4 {
  color: red !important;
}

.rogphone #hero {
  height: auto;
  min-height: 100%;
}
.rogphone #hero .hero__caption {
  max-width: 480px;
}
@media (max-width: 1024px){
  .rogphone #hero .hero__action {
    margin-top: -10%;
  }
}
@media (max-width: 768px){
  .rogphone #hero .hero__action {
    width: 65%;
    max-width: 65%;
    margin-top: -5%;
  }
}
@media (max-width: 550px){
  .rogphone #hero .hero__action {
    width: 95%;
    max-width: 95%;
    margin-top: -10%;
  }
}

.rogphone .section-title {
  height: 60px;
}

.rogphone #hero .hero__caption a{
  height: 45px;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
}
.rogphone #hero .hero__caption a:hover{
  opacity: 1;
}
.rogphone #hero .preorder {
    height: 45px;
    background: url(../img/ROG-phone7/btn-now.png) center no-repeat;
    background-size: auto 100%;
}
.rogphone #hero .btn-add {
  height: 45px;
}


@media (max-width: 1024px) {
    .rogphone #hero .preorder {
        height: 45px;
        width: auto;
        background: url(../img/ROG-phone7/btn-now.png) center no-repeat;
        background-size: auto 100%;
    }
}


.bg-grey {
  background-color: #f7f7f7;
}

.preorder-content{
  background: url(../img/ROG-phone7/preorder-bg.jpg) center no-repeat !important;
  background-size: cover !important;
}

.rogphone #preorderGift .gradient-border-b::after {
  background-image: url(../img/ROG-phone7/dec-bottom-line.png);
}
.rogphone #preorderGift .preorderGift__header {
  color: #000;
}


.rog7-prize {
  margin-top: 30px;
}
.rog7-prize .mobile{
  display: none;
}
@media (max-width: 768px) {
.rog7-prize .default{
  display: none;
}
.rog7-prize .mobile{
  display: block;
}
}

.rogphone .modal-body {
  border-style: solid;
  -o-border-image: url(../img/ROG-phone7/border-modal.png) 70 135 100 60 round;
     border-image: url(../img/ROG-phone7/border-modal.png) 70 135 100 60 fill round;
}
@media (max-width: 768px) {
  .rogphone .modal-body {
    -o-border-image: url(../img/ROG-phone7/border-modal2.png) 20 round;
       border-image: url(../img/ROG-phone7/border-modal2.png) 20 fill round;
  }
}

.rogphone .modal-body .btn-dark {
  background-color: #2ea4e5;
}
.rogphone .modal-body .btn-dark:hover {
  background-color: #1d8bc8;
}


.rogphone .btn-light {
  background-color: #2ea4e5;
}

.rogphone .btn-light:hover {
  background-color: #1d8bc8;
}


.orderItem table th {
  color: #000;
}



.storelist .row{
  border-bottom: 1px solid #000;
  margin-bottom: 10px;
}
.store-soldout{
  opacity: 0.4;
}

.red-text{
  color: red;
}