a {
  color: inherit;
  text-decoration: none;
}

#member .wrapper {
  background: url(/dist/asset/images/share/other-bg.jpg) center 100px no-repeat;
  background-size: 100% !important;
}

#register .wrapper {
  background: url(/dist/asset/images/share/other-bg.jpg) center 100px no-repeat;
  background-size: 100%;
}

#register .ttl-page {
  text-align: left;
  margin-top: 30px;
  margin-bottom: 10%;
  font-size: 14px;
}

#register .ttl-page>a:hover,
#register .ttl-page>a:focus {
  color: inherit;
  text-decoration: none;
}

#booking .ttl-page,
#member .ttl-page {
  text-align: left;
  margin-top: 5%;
}

#exfw-box {
  display: none;
}

#exfw-btn {
  cursor: pointer;
}

#booking .ttl {
  display: block;
  font-size: 17px;
  margin-bottom: 10px;
}

#booking .sub-ttl {
  display: block;
  margin-bottom: 15px;
}

#booking .ttl-page {
  margin-bottom: 8%;
}

#booking .fs45 {
  font-size: 35px;
  line-height: 0.8;
}

#booking .fs25 {
  font-size: 20px;
}

#booking .content.ackn {
  padding-bottom: 10%;
}

#booking .ackn h5 {
  margin-top: 5%;
  margin-bottom: 3%;
}

#booking .content,
#register .content,
#member .content {
  background-color: #FFF;
  padding: 2% 5%;
}

.ack {
  margin: 12% 0 15%;
}

.ack.en h5{
  line-height: 2;
}

.ack a {
  text-decoration: underline;
}

.ack a.btn {
  padding: 8px 10%;
  margin-top: 20px;
}

.ack small {
  color: #0170BF;
}

hr.black {
  border-top: 1px solid #000;
}

.stories-bar {
  list-style: none;
  padding: 0;
}

.form-box {
  background-color: #F2F2F2;
  padding: 5% 10%;
}

.hint-text {
  color: #1966D2;
}

.stories-bar>li {
  display: inline-block;
  padding: 5px 10px;
}

.stories-bar>li:first-child {
  padding-left: 0;
}

.stories-bar>li>a {
  color: #000;
  text-decoration: none;
  transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  -moz-transition: color 0.25s linear;
  -webkit-transition: color 0.25s linear;
}

.stories-bar>li>a.active {
  color: #0170BF;
}

.stories-bar>li>a:hover,
.stories-bar>li>a:focus {
  color: #0170BF;
  text-decoration: none;
}

ol {
  padding-left: 20px;
}

table.user-info>thead>tr>th,
table.user-info>tbody>tr>td {
  padding: 2% 0 2% 10%;
}

table.user-info>thead>tr>th:first-child {
  font-size: 18px;
}

.checkbox label {
  padding: 0px 0px 0px 43px;
  margin-bottom: 0;
}

.upgrade-status-bar p {
  font-size: 14px;
}

.upgrade-status-bar button {
  padding: 10px 40px;
  font-size: 13px
}

.invalid {
  color: #FF0000;
  font-size: 12px;
}

#infoVin {
  cursor: pointer;
  outline: none;
}

.popover-content {
  font-family: 'bmw_thailandregular';
  line-height: 2.3;
}

a.editBtn {
  margin-top: -4px;
  margin-right: 2px;
  text-decoration: none;
  color: #000;
}

a.editBtn>img.w {
  display: initial;
}

a.editBtn>img.b {
  display: none;
}

a.editBtn:hover {
  color: #0070BF;
}

a.editBtn:hover>img.b {
  display: initial;
}

a.editBtn:hover>img.w {
  display: none;
}

#condition .modal-body {
  padding: 50px 30px;
}

#condition .modal-body>p {
  font-size: 13px;
  margin-top: 20px;
}

#condition .modal-body .close {
  top: 15px;
}

#member-tier .teaser {
  position: fixed;
  top: 99px;
  left: 0;
  width: 100%;
  z-index: 1;
  background: url(/dist/asset/images/share/member-tier-bg.jpg) center center no-repeat;
  background-size: 100%;
  padding-bottom: 33.8%;
}

#member-tier .tier-content {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 2;
}

.tier-content .role {
  margin: 0;
  background: url(/dist/asset/images/share/role-bg.jpg) center center no-repeat;
  background-size: cover;
  padding: 4% 0 4%;
}

.tier-content .role>h3 {
  margin-top: 0;
  margin-bottom: 3px;
  /*font-size: 18px;*/
}

.tier-content .role>p:nth-child(2) {
  /*font-size: 15px;*/
  margin-bottom: 25px;
}

.tier-content .role>p:nth-child(3) {
  background-color: #EEE;
  display: inline-block;
  position: relative;
  /*font-size: 15px;*/
  padding: 6px 15px 4px;
}

.tier-content .role>p:nth-child(3):before {
  content: '';
  width: 36px;
  height: 100%;
  background: url(/dist/asset/images/share/type-left.png) right center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  right: 100%;
}

.tier-content .role>p:nth-child(3):after {
  content: '';
  width: 36px;
  height: 100%;
  background: url(/dist/asset/images/share/type-right.png) left center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 100%;
}

.tier-content .role img {
  margin-left: auto;
  margin-right: auto;
}

.tier-content .role>div>strong,
.tier-content .role>h3 {
  font-size: 16px;
}

.tier-content .role>div>p,
.tier-content .role>p:nth-child(2) {
  font-size: 14px;
}

.tier-content .role>p:nth-child(3) {
  font-size: 13px;
}

#updateVIN .modal-body .form-group label {
  font-size: 13px;
}

#updateVIN .modal-body button.close {
  top: 20px;
  right: 19px;
  overflow: hidden;
}

.tnc-img {
  cursor: pointer;
  padding: 0;
}

.tnc-box {
  background-color: #F9F9F9;
  padding: 5%;
}

.tnc-box p {
  font-size: 13px;
}

.tnc-box ul {
  font-size: 12px;
}

.tnc-box a:link {
  text-decoration: underline;
}


/* Joy CONTENT
-------------------------------------------------- */


/*.group-joy*/

#heighlight-slider,
.index-bmwprivilege {
  margin-bottom: 40px;
}

.group-joy a {
  color: #FFF;
  text-decoration: none;
}

.joy-box {
  position: relative;
  -o-transition: background 0.23s ease-in-out;
  -moz-transition: background 0.23s ease-in-out;
  -webkit-transition: background 0.23s ease-in-out;
  transition: background 0.23s ease-in-out;
  cursor: pointer;
}

.joy-box:hover {
  background-size: 103% !important;
}


/*.social-box{
  transition: background 0.23s ease-in-out;
  -moz-transition: background 0.23s ease-in-out;
  -webkit-transition: background 0.23s ease-in-out;
  transition: background 0.23s ease-in-out;
  cursor: pointer;
}
.social-box:hover{
  background-size: 103% !important;
}*/

.joy-box>div {
  position: absolute;
  bottom: 0;
  padding: 0 2% 2% 2%;
}

.joy-box>div>h3 {
  margin-bottom: 3px;
  line-height: 1.2;
  font-size: 20px;
  /*font-size: 2.2vw;*/
}

.joy-box>div>p {
  margin-bottom: 5px;
  line-height: 2;
  font-size: 12px;
}

.joy-box>div>a {
  font-size: 14px;
  line-height: 1.2;
}

.start-point {
  /*padding-left: 10%;*/
}

.default-point .line {
  background: url(/images/line-b.png) center center repeat-y;
  background-size: 2px;
}

.default-point .thumbnail .image {
  background-size: cover !important;
  padding-bottom: 64%;
}

.default-point .col:last-child {
  /*padding-bottom: 4%;*/
}

.ttl-glr {
  font-size: 20px;
  margin-bottom: 4%;
  margin-top: 0;
}

.default-point .dtl-passport {
  padding-left: 2.5%;
}

.default-point .dtl-passport span {
  font-size: 17px;
}

.default-point .dtl-passport h6 {
  font-size: 25px;
}

.default-point .dtl-passport h6>small {
  font-size: 16px;
}

.default-point .dtl-passport button>span,
.default-point .dtl-passport p>span,
.default-point .dtl-passport p {
  font-size: 14px;
}

.default-point .dtl-passport button {
  padding: 5px 40px 4px;
  margin-top: 4%;
}

.start-point .start-point-ttl {
  font-size: 25px;
}

.start-point .start-point-ttl>small {
  font-size: 15px;
}

.gj-ttl {
  font-size: 20px;
}

.gj-desc {
  font-size: 10px !important;
}

.vinform-addinput-btn,
.vinform-addinput-btn:hover,
.vinform-addinput-btn:visited,
.vinform-addinput-btn:focus{
  text-decoration: none;
  color: black;
}

.vinform-txtinfo{
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

@media (max-width: 1199px) {
  #register .ttl-page {
    margin-top: 103px;
    margin-bottom: 5%;
  }
}

@media (max-width: 991px) {
  #booking .wrapper,
  #register .wrapper,
  #member .wrapper {
    background: none !important;
  }
  #register .ttl-page {
    margin-top: 40px;
  }
  #member .ttl-page {
    text-align: center;
    margin-top: 40px;
    padding: 0 10px;
  }
  select {
    color: #1966D2 !important;
    font-family: 'bmwtypewebbo_all';
  }
  #register .ttl-page {
    text-align: center;
    margin-bottom: 0;
  }
  #register .ttl-page>a {
    background: url(/dist/asset/images/share/register-bg-m.jpg) center center no-repeat;
    background-size: 100%;
    display: block;
    width: 100%;
    padding: 6% 0;
    color: #FFF;
    font-size: 3vw;
  }
  #register .ttl-page>p {
    padding-right: 3%;
    padding-left: 3%;
    margin-bottom: 20px;
  }
  #register .ttl-page>a:hover,
  #register .ttl-page>a:focus {
    color: #FFF;
  }
  table.user-info>thead>tr>th,
  table.user-info>tbody>tr>td {
    padding-left: 5%;
  }
  .tier-content .role>div>strong,
  .tier-content .role>h3 {
    font-size: 15px;
  }
  .tier-content .role>div>p,
  .tier-content .role>p:nth-child(2) {
    font-size: 13px;
  }
  .tier-content .role>p:nth-child(3) {
    font-size: 14px;
  }
  .tier-content .role img {
    width: 80%;
  }
  #member-tier .teaser {
    top: 69px;
  }
}

@media (max-width: 767px) {
  .form-group button {
    font-size: 3.5vw;
  }
  label {
    font-size: 4vw;
  }
  h2 {
    font-size: 7vw;
  }
  h4 {
    font-size: 4vw;
  }
  strong,
  li:not(.header-list>li) {
    font-size: 3vw;
  }
  table.user-info>thead>tr>th,
  table.user-info>tbody>tr>td {
    padding-left: 5%;
    font-size: 3.2vw;
  }
  table.user-info>thead>tr>th:first-child {
    font-size: 3.5vw;
  }
  #member-tier .teaser {
    top: 69px;
    background: url(/dist/asset/images/share/member-tier-bg-m.jpg) center center no-repeat;
    background-size: 100%;
    padding-bottom: 153.6%;
  }
  .tier-content .role {
    background: url(/dist/asset/images/share/role-bg-m.jpg) center center no-repeat;
    background-size: cover;
    padding: 13% 0 8%;
  }
  .tier-content .role>h3 {
    font-size: 3.2vw;
  }
  .tier-content .role>p:nth-child(2) {
    font-size: 2.8vw;
    margin-bottom: 6%;
  }
  .tier-content .role>p:nth-child(3) {
    font-size: 3vw;
    padding: 1.5% 2% 1%;
  }
  .tier-content .role img {
    width: 90%;
  }
  .tier-content .role>div>strong {
    font-size: 3.5vw;
  }
  .tier-content .role>div>p {
    font-size: 2.7vw;
  }
  .tnc-box ul {
    padding-left: 20px;
  }
  .joy-box {
    /*background: none !important;*/
    padding: 0;
    padding-bottom: 55%;
  }
  .joy-box:not(:first-child)>div {
    padding-left: 5%;
    padding-bottom: 4%;
  }
  .joy-box>div>h3 {
    margin-bottom: 3px;
    line-height: 1.2;
    font-size: 6vw;
  }
  .joy-box>div>h3 {
    font-size: 5.5vw;
  }
  .joy-box>div>a {
    font-size: 3vw;
  }
  #booking .ttl-page,
  #member .ttl-page {
    margin-top: 10%;
  }
  #booking .fs45 {
    font-size: 6vw;
    line-height: 1;
  }
  #booking .fs25 {
    font-size: 4.5vw;
  }
  #booking .ackn h5 {
    margin-top: 10%;
    margin-bottom: 6%;
  }
  .default-point .dtl-passport {
    text-align: center;
    padding-top: 20px;
  }
  .ttl-glr {
    font-size: 6vw;
    margin-bottom: 8%;
  }
  .default-point .dtl-passport span {
    font-size: 3vw;
  }
  .start-point .start-point-ttl,
  .default-point .dtl-passport h6 {
    font-size: 4vw;
    margin-top: 0;
  }
  
  .default-point .dtl-passport h6>small {
    font-size: 3.5vw;
  }
  .start-point .start-point-ttl > small,
  .default-point .dtl-passport button>span,
  .default-point .dtl-passport p>span,
  .default-point .dtl-passport p {
    font-size: 3vw;
  }
  .default-point .dtl-passport button {
    padding: 2px 40px 6px;
  }
  .gj-desc {
      font-size: 3vw !important;
  }
  .start-point .start-point-ttl{
    line-height: 1.4;
  }
}