@charset "utf-8";

.l-content .submain {
 background-color: #000000;
 padding: 0 40px 0 40px;
}

.l-content .box-submain {
 background-color: #ffffff;
 border-radius: 20px;
 padding: 20px 40px;
}

.l-content .title-submain {
 color: #00b5f3;
 font-size: 22px;
}

.l-content .m-container {
 max-width: 1440px;
}

.l-content .section1 {
 background: #000000;
 background: linear-gradient(180deg, rgba(0, 0, 0, 1) 35%, rgba(60, 60, 60, 1) 100%);
 padding: 40px;
}

.l-content .section2 {
 background-color: #ffcc00;
 padding: 80px 40px 70px 40px;
}

.l-content .section3 {
 background-color: #2b2b2b;
 padding: 80px 40px 70px 40px;
}

.l-content .compare_prices {
 background-color: #efefef;
 padding: 20px;
 border-radius: 20px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 column-gap: 20px;
}

.l-content .step1 {
 padding: 20px 25px 10px 0;
 display: flex;
 justify-content: center;
 column-gap: 20px;
}

.l-content .step1 .step-col1 {
 width: 50%;
}

.l-content .step1 .step-col2 {
 display: flex;
 width: 50%;
}

.l-content .step2 {
 padding: 20px 0 35px 0;
 border-radius: 20px;
 width: 100%;
}

.l-content .bg-black {
 background-color: #2b2b2b;
 border-radius: 20px;
}

.l-content .text-white {
 color: #ffffff;
}

.l-content .text-yellow {
 color: #ffcc00;
}

.l-content .step-row {
 display: flex;
 justify-content: center;
 column-gap: 20px;
 padding: 0 20px;
}

.l-content .step2-box {
 padding: 10px;
 border: 2px solid #ffffff;
 border-radius: 20px;
}

.l-content .step2-detail {
 display: flex;
 align-items: center;
 margin: 0 20px 20px 40px;
}

.l-content .step2-box-white {
 background-color: #ffffff;
 border: 2px solid #ffffff;
 border-radius: 20px;
 padding: 16px;
 margin: 30px 20px 0 20px;
}

.l-content .m-cols__wrap.m-cols__wrap-height {
 align-items: stretch;
}

.l-content .m-col-md-6.m-col-sm-12.m-col-height {
 display: flex;
}

.l-content .text-bule {
 color: #00b5f3 !important;
}

.l-content .bg-yellow {
 background-color: #ffcc00;
}

.l-content .m-table-responsive th,
.l-content .m-table-responsive td {
 border: 2px solid #333333;
}

.l-content .m-table > thead > tr.mc-sub > th {
 background-color: #e8e8e8;
}

.l-content .link-white {
 color: #ffffff;
}

.l-content .bg-white {
 background-color: #ffffff;
}

.l-content .product {
 background-color: #ffffff;
 color: #333333;
 border: 1px solid #dedede;
 padding: 20px;
 text-align: center;
 position: relative;
}

.l-content .product:hover {
 opacity: 0.9;
 cursor: pointer;
 border: 1px solid #ff730a;
}

.l-content .product:hover a {
 color: #ff730a;
}

.l-content .product .name {
 display: block;
 height: 60px;
 font-weight: bold;
 font-size: 18px;
 margin: 0 0 20px 0
}

.l-content .product .part {
 font-size: 16px;
 height: 50px;
}

.l-content .product .price {
 padding: 0 0 20px 0;
 color: #dd0000;
 font-weight: bold;
 font-size: 20px;
}

.l-content .product .ship {
 display: block;
 font-size: 16px;
 font-weight: bold;
}

.l-content .product .ship img {
 vertical-align: middle;
 margin-right: 10px;
}

.l-content .discount {
 position: absolute;
 right: 0;
 top: -14px;
}

.responsive .l-content .m-btnLink--default.m-btn--edit,
.responsive .l-content .m-btnLink--strong.m-btn--edit,
.responsive .l-content .m-btnLink--conversion.m-btn--edit {
 margin: 20px 20px 0 0;
 width: 30% !important;
}

@media screen and (max-width: 1400px) {
 .l-content .step2-detail {
  margin: 0 20px 20px 20px;
 }
}

@media screen and (max-width: 1298px) {
 .responsive .l-content .m-btnLink--default.m-btn--edit,
 .responsive .l-content .m-btnLink--strong.m-btn--edit,
 .responsive .l-content .m-btnLink--conversion.m-btn--edit {
  width: 47% !important;
 }
}

@media screen and (max-width: 1270px) {
 .l-content .discount img {
  width: 80%;
 }

 .l-content .discount {
  top: -10px;
 }

 .l-content .product .name {
  font-size: 16px;
 }
}

@media screen and (max-width: 1077px) {
 .l-content .product .part {
  height: 60px;
 }
}

@media screen and (max-width: 1038px) {
 .responsive .l-content .m-btnLink--default.m-btn--edit,
 .responsive .l-content .m-btnLink--strong.m-btn--edit,
 .responsive .l-content .m-btnLink--conversion.m-btn--edit {
  width: 40% !important;
 }
}

@media screen and (max-width: 1011px) {
 .responsive .l-content .m-btnLink--default.m-btn--edit,
 .responsive .l-content .m-btnLink--strong.m-btn--edit,
 .responsive .l-content .m-btnLink--conversion.m-btn--edit {
  width: 100% !important;
 }

 .l-content .m-btn-list-order {
  display: flex;
  flex-direction: column;
 }

 .l-content .m-btn-list-order .m-btnLink--default {
  order: 2;
 }

 .l-content .m-btn-list-order .m-btnLink--strong {
  order: 1;
 }
}

@media screen and (max-width: 991px) {
 .l-content .step1 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
 }

 .l-content .section2 .m-col-md-6 {
  width: 100%;
 }

 .l-content .step1 .step-col1 {
  width: 100%;
  padding: 20px 0 0 0;
 }

 .l-content .step1 .step-col2 {
  width: 100%;
  justify-content: center;
  padding: 0 0 0 25px;
 }
}

@media screen and (max-width: 767px) {
 .l-content .step1 .step-col2 {
  flex-wrap: nowrap;
  padding: 0 0 0 20px;
 }

 .l-content .step1 {
  padding: 0 20px 15px 0;
 }

 .l-content .step2 {
  width: 100%;
 }

 .l-content .section1 {
  padding: 40px 20px;
 }

 .l-content .section2 {
  padding: 40px 20px;
 }

 .l-content .section3 {
  padding: 40px 20px;
 }

 .l-content .product .name {
  font-size: 14px;
 }

 .l-content .product .part {
  font-size: 14px;
  height: 50px;
 }

 .l-content .step-row {
  flex-direction: column;

 }

 .l-content .step2-box {
  margin: 0 0 20px 0;
 }

 .l-content .step2-box-white {
  margin: 0 20px 0 20px;
 }

 .l-content .title-submain {
  font-size: 18px;
 }

 .l-content .box-submain {
  padding: 20px 20px;
 }

 .l-content .submain {
  padding: 0 20px 0 20px;
 }

 .l-content .bg-black {
  margin-bottom: 10px;
 }
}

@media screen and (max-width: 550px) {
 .l-content .discount img {
  width: 60%;
 }
}

@media screen and (max-width: 452px) {
 .l-content .product .name {
  padding: 25px 0 0 0;
 }

 .l-content .product .m-col-sm-9 {
  width: 100%
 }

 .l-content .product .m-col-sm-3 {
  width: 100%
 }

 .l-content .step2-detail {
  flex-direction: column;
 }
}