@charset "utf-8";

.l-content .section1 {
 background: url('/th/service/product/aluminum_frames/economy_pe_coated_steel_pipe/images/bg01_lg.png') no-repeat;
 padding: 0 40px 40px 40px;
 background-position: bottom;
 background-color: #000000;
}

.l-content .section2 {
 background-color: #ffcc00;
 padding: 60px 20px 90px 20px;
}

.l-content .section3 {
 background-color: #000000;
 padding: 60px 20px;
}

.l-content .section4 {
 background-color: #ffcc00;
 padding: 60px 20px;
}

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

.l-content .submain {
 background: #000000;
 background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(60, 60, 60, 1) 100%);
 padding: 20px 40px;
 font-size: 16px;
 color: #ffffff;
 text-align: center;
 border-radius: 20px;
 font-weight: bold;
}

.l-content .submain .text_yellow {
 color: #ffcc00;
}

.l-content .m-flex {
 display: flex;
 flex-wrap: wrap;
 row-gap: 20px;
 align-items: baseline;
 justify-content: center;
 column-gap: 30px;
}

.l-content .m-flex-box {
 display: flex;
 column-gap: 20px;
 align-items: center;
 margin-bottom: 20px;
}

.l-content .m-flex-box img {
 width: 100%;
 height: auto;
 object-fit: cover;
}

.l-content .lable-title img {
 object-fit: contain;
 max-width: 100%;
 max-height: 100%;
}

.l-content .m-flex-box .m-cols-1 {
 width: 25%;
}

.l-content .m-flex-box .m-cols-2 {
 width: 75%;
}

.l-content .m-col {
 width: 47%;
}

.l-content .lable-title {
 background: #F5F5F5;
 background: linear-gradient(90deg, rgba(245, 245, 245, 1) 15%, rgba(239, 239, 239, 1) 57%, rgba(210, 210, 210, 1) 100%);
 padding: 15px;
 border-radius: 100%;
 font-size: 14px;
 font-weight: bold;
 color: #000000;
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
}

.l-content .text-detail {
 color: #ffffff;
 font-size: 18px;
 font-weight: bold;
}

.l-content .block-spec {
 background-color: #ffffff;
 padding: 30px 40px 0 40px;
 border-radius: 40px;
}

.l-content .m-table {
 font-size: 16px;
}

.l-content .m-discount {
 margin: -20px 0 0 0;
}

.l-content .h2-edit {
 margin: -100px 0 0 0;
}

.l-content .block-ex {
 background-color: #ffffff;
 border-radius: 0 0 20px 20px;
 text-align: center;
 padding: 20px 10px;
}

.l-content .title-ex {
 background-color: #000000;
 color: #ffffff;
 font-size: 16px;
 font-weight: bold;
 border-radius: 20px 20px 0 0;
 padding: 10px;
 text-align: center;
}

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

.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: 26px;
 overflow: hidden;
 text-overflow: ellipsis;
 width: 100%;
 white-space: nowrap;
 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;
 /* margin-bottom: 30px;*/
 font-size: 16px;
 font-weight: bold;
}

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

.l-content .save_price {
 background-color: #ffcc00;
 padding: 4px;
 max-width: 100%;
 position: absolute;
 top: 10px;
 right: 10px;
 border-radius: 5px;
}

.l-content .box_savetext {
 display: inline-block;
 vertical-align: bottom;
 font-size: 14px;
 font-weight: bold;
 line-height: 13px;
 letter-spacing: -1px;
}

.l-content .box_savetext .up_to {
 font-size: 12px;
}

.l-content .box_savenumber {
 display: inline-block;
 color: #dd0000;
 background-color: #ffffff;
 border-radius: 5px;
 padding: 3px 3px 0 3px;
 font-size: 24px;
 font-weight: bold;
 line-height: 20px;
 letter-spacing: -1px;
}

.l-content .box_savenumber .percent {
 padding: 0 0 0 2px;
 font-size: 16px;
}

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

@media screen and (max-width: 1219px) {
 .responsive .l-content .m-btnLink--strong.m-btn--edit {
  margin: 10px 20px 0 0;
  width: 47% !important;
 }
}

@media screen and (max-width: 1200px) {
 .l-content .h2-edit {
  margin: -98px 0 0 0;
 }
}

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

@media screen and (max-width: 991px) {
 .l-content .h2-edit {
  margin: -92px 0 0 0;
 }
}

@media screen and (max-width: 767px) {

 .responsive .l-content .m-btnLink--default.m-btn--edit,
 .responsive .l-content .m-btnLink--strong.m-btn--edit {
  width: 100% !important;
 }

 .l-content .section1 {
  background: url('/th/service/product/aluminum_frames/economy_pe_coated_steel_pipe/images/bg01_sm.png') no-repeat;
  padding: 0 40px 4px 40px;
  background-position: bottom;
  background-color: #000000;
 }

 .l-content .block-spec {
  padding: 20px 10px 0 10px;
 }

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

 .responsive .l-content .m-cols .m-cols__wrap .u-mb-none {
  margin: 0;
 }

 .l-content .m-flex {
  flex-direction: column;
 }

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

 .l-content .text-detail {
  font-size: 14px;
 }


 .l-content .submain {
  padding: 20px 10px;
  font-size: 14px;
 }

 .l-content .title-ex {
  font-size: 14px;
 }
}

@media screen and (max-width: 480px) {
 .l-content .h2-edit {
  margin: -80px 0 0 0;
 }
}