@charset "UTF-8";
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Microsoft JhengHei", "微軟正黑體", "STHeiti", "Lantinghei", Arial, sans-serif;
  font-weight: 400;
  line-height: 1; }

.font-content,
body {
  font-family: "Microsoft JhengHei", Georgia, Times, serif; }

.bg-burlywood {
	background-color: #ffe75f;
}
  .bg-burlywood-light {
    background-color: #D2C7BE; }

.btn-blue {
	color: white;
	background-color: #f30a36;
	border-color: #71041A;
	text-shadow: 0 -1px 1px #074b82;
	outline: none;
	border: none;
	border-bottom: 4px solid #71041A;
}
  .btn-blue:focus, .btn-blue.focus {
    color: white;
    background-color: #f30a36;
    outline: none;
    border: none;
    margin-top: 2px;
    border-bottom: 2px solid #074b82; }
  .btn-blue:hover {
    color: white;
    background-color: #f30a36;
    outline: none;
    border: none;
    margin-top: 2px;
    border-bottom: 2px solid #074b82; }
  .btn-blue:active, .btn-blue.active, .open > .btn-blue.dropdown-toggle {
    color: white;
    background-color: #f30a36;
    outline: none;
    border: none;
    margin-top: 4px; }
    .btn-blue:active:hover, .btn-blue:active:focus, .btn-blue:active.focus, .btn-blue.active:hover, .btn-blue.active:focus, .btn-blue.active.focus, .open > .btn-blue.dropdown-toggle:hover, .open > .btn-blue.dropdown-toggle:focus, .open > .btn-blue.dropdown-toggle.focus {
      color: white;
      outline: none;
      border: none;
      background-color: #f30a36; }
  .btn-blue:active, .btn-blue.active, .open > .btn-blue.dropdown-toggle {
    background-image: none; }
  .btn-blue.disabled:hover, .btn-blue.disabled:focus, .btn-blue.disabled.focus, .btn-blue[disabled]:hover, .btn-blue[disabled]:focus, .btn-blue[disabled].focus, fieldset[disabled] .btn-blue:hover, fieldset[disabled] .btn-blue:focus, fieldset[disabled] .btn-blue.focus {
    background-color: #f30a36;
    border-color: #f30a36;
    margin-top: 0;
    text-shadow: 0 -1px 1px #074b82;
    outline: none;
    border: none;
    border-bottom: 4px solid #074b82; }
  .btn-blue .badge {
    color: #f30a36;
    background-color: white; }

.tnc a {
  margin-right: 1em; }

.ribbon {
  font-size: 42px !important;
  /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
  width: 270px;
  position: relative;
  background: #f30a36;
  color: #fff;
  text-align: center;
  padding: 0.3em 0.5em;
  /* Adjust to suit */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
  line-height: 1;
  margin-top: -108px; }
  .ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0em;
    border: 0.8em solid #f30a36; }
  .ribbon:before {
    left: -1em;
    border-right-width: 0.5em;
    border-left-color: transparent; }
  .ribbon:after {
    right: -1em;
    border-left-width: 0.5em;
    border-right-color: transparent; }
  .ribbon .ribbon-content {
    letter-spacing: 1px; }

.text-22-px {
  font-size: 22px; }

.text-42-px {
  font-size: 35px; }
  
  .text-35-px {
  font-size: 35px;
  padding:30px; }
  
 

.text-code-px {
  font-size: 35px;
  color:#F09;
  font-weight:bolder;  }


#img-main-banner {
  margin-bottom: -170px; }

#img-main-bg {
  background-image: url(../img/mv_bg.png);
  background-repeat: repeat; }

.desktop-banner {
  margin-bottom: -75px; }

.padding-l-r-0 {
  padding-left: 0;
  padding-right: 0; }

@media (max-width: 1000px) {
  /* 
  * Customs - Media
  * Tablet - 1000px to 0px	 
  */
  .step-row > div:after {
    color: #989898; }

  .padding-sm-l-r-0 {
    padding-left: 0;
    padding-right: 0; }

  .container {
    width: 100%; }

  .main-banner .main-Banner-img.mobile-banner {
    width: 100%; } }
@media (max-width: 767px) {
  /* 
  * Bootstrap - Media [ col-xs ] 
  * Desktop - 767 to 0
  */
  #img-pass,
  #img-locker {
    width: 50%;
    margin-bottom: 2em; }

  .main-banner .main-Banner-img {
    max-width: 100%; }

  .ribbon {
    margin-top: -55px;
    font-size: 32px !important; }

  .main-banner .main-Banner-img.desktop-banner {
    margin-bottom: 0; }

  .main-banner .main-Banner-img.mobile-banner {
    margin-bottom: -40px;
    width: 100%; }

  .text-22-px {
    font-size: 18px; }

  .text-42-px {
    font-size: 28px; }

  .offer-img {
    width: 60%; }

  .container {
    width: 100%; } }

/*# sourceMappingURL=solo.css.map */