@charset "utf-8";

.l-content .content {
 max-width: 1920px;
 margin: auto;
}

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

.l-content .section1 {
 background: url('/th/service/product/aluminum_frames/aluminum_pipe_frame_product/images/bg01.png') no-repeat;
 padding: 0 20px 66px 20px;
 background-size: cover;
}

.l-content .m-banner1 {
 position: relative;
}

.l-content .m-banner1 .m-btn-list {
 position: absolute;
 bottom: 0%;
 right: 10%;
}

.l-content .m-banner1:hover {
 opacity: 0.9;
}

.l-content .section2 {
 background-color: #f4f4f4;
 padding: 40px;
}

.l-content .m-banner2 {
 position: relative;
 border: 1px solid #a0a0a0;
 border-radius: 20px;
 cursor: pointer;
}

.l-content .m-banner2 img,
.l-content .m-banner3 img,
.l-content .m-banner4 img {
 border-radius: 20px;
}

.l-content .m-banner2:hover,
.l-content .m-banner3:hover,
.l-content .m-banner4:hover {
 border: 1px solid #ff730a;
 border-radius: 20px;
 opacity: 0.9;
}

.l-content .m-banner2 .m-btn-list {
 position: absolute;
 top: 35%;
 left: 78%;
}

.l-content .m-banner3 {
 position: relative;
 border: 1px solid #a0a0a0;
 border-radius: 20px;
 cursor: pointer;
}

.l-content .m-banner3 .m-btn-list {
 position: absolute;
 top: 35%;
 left: 78%;
}

.l-content .m-banner4 {
 position: relative;
 border: 1px solid #a0a0a0;
 border-radius: 20px;
 cursor: pointer;
}

.l-content .m-banner4 .m-btn-list {
 position: absolute;
 top: 35%;
 left: 78%;
}

.l-content .m-product {
 background-color: #333333;
 padding: 40px;
 border-radius: 0 45px 45px 45px;
}

.l-content .h2_edit--yellow {
 background-color: #ffe600;
 color: #132992;
 padding: 10px;
 text-align: center;
 font-size: 20px;
}

.l-content .block-product-yellow {
 border: 2px solid #ffe600;
}

.l-content .h2_edit--blue {
 background-color: #ebebeb;
 color: #000000;
 padding: 10px;
 text-align: center;
 font-size: 20px;
}

.l-content .block-product-blue {
 border: 2px solid #ebebeb;
}

/* สไตล์สำหรับปุ่มวงกลมสีส้มพร้อมไอคอนลูกศร */
.l-content .circular-arrow-btn {
 display: inline-flex;
 justify-content: center;
 width: 50px;
 height: 50px;
 background-color: #ff730a;
 border-radius: 50%;
 text-decoration: none;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(255, 115, 10, 0.3);
 position: absolute;
 top: 73%;
 left: 73%;
}

.l-content .circular-arrow-btn:hover {
 background-color: #e66600;
 transform: scale(1.1);
 box-shadow: 0 4px 12px rgba(255, 115, 10, 0.4);
}

.l-content .arrow-icon {
 color: #ffffff;
 font-size: 45px;
 font-weight: bold;
 line-height: 1;
}

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

.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: 50px;
 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-btn--down.btn_edit {
 width: 49.4% !important;
 margin: 0 0 40px 0;
}

.responsive .l-content .m-btn--down.btn_edit:first-child {
 margin: 0 10px 40px 0;
}

.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;
}

.responsive .l-content .m-btnLinkWin--conversion.m-btn--edit {
 margin: 0 20px 0 0;
 width: 87% !important;
}

.l-content .condition {
 background-color: #f6f6f6;
 padding: 20px 0 20px 0;
 border-radius: 30px;
 margin: 60px 0 0 0;
}

.l-content .condition .col-flex {
 display: flex;
 align-items: center;
}

.l-content .condition .col4 {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 justify-content: center;
 /* align-items: baseline;*/
 width: 35%;
}

.l-content .condition .col8 {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin: 0 auto;
 width: 65%;
 padding: 0 40px;
 border: 4px dashed #ccd2d8;
 border-width: 0 0 0 4px;
}

.l-content .condition .h-condition {
 margin: -20px 0 0 0;
}

.l-content .section-more {
 background: #000000;
 background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(26, 26, 26, 1) 100%);
 padding: 70px 20px 70px 20px;
}

.l-content .section-more .col-flex {
 display: flex;
}

.l-content .section-more .col-flex-voucher {
 display: flex;
 justify-content: center;
 column-gap: 20px;
}

.l-content .section-more .bl-sub {
 background-color: #ffcc00;
 border-radius: 0 0 0 0;
 padding: 0 40px 22px 40px;
}

.l-content .section-more .bl-sub2 {
 background-color: #ffcc00;
 border-radius: 0 0 20px 0;
 padding: 0 40px 40px 40px;
}

.l-content .section-more .bl-black {
 margin: auto;
 padding: 30px 20px 20px 20px;
 border-radius: 0 10px 10px 10px;
 background-color: #000000;
}

.l-content .voucher-note {
 margin: 10px auto 0;
 padding: 0;
 box-sizing: border-box;
 font-size: 14px;
 line-height: 1.6;
 color: #dd0000;
}

.l-content .voucher-note p {
 margin: 0;
}

.l-content .section-more .col4 {
 max-width: 25%;
 background-color: #000000;
}

.l-content .section-more .text-yellow {
 color: #e81951;
}

.l-content .section-more .col8 {
 max-width: 74%;
 margin-left: -1px;
}

.l-content .section-more .col-flex-voucher .link-voucher img:hover {
 scale: 1.1;
}

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


@media screen and (max-width: 1600px) {
 .l-content .product_container .ic_soon {
  left: -47px;
 }

 .l-content .bl-sub2 {
  padding: 0 40px 36px 40px;
 }

 .l-content .condition .col4 {
  padding: 0;
 }
}

@media screen and (max-width: 1259px) {
 .responsive .l-content .m-btn--down.btn_edit {
  width: 49% !important;
 }
}

@media screen and (max-width: 1171px) {
 .l-content .m-banner2 .m-btn-list {
  position: absolute;
  top: 25%;
  left: 75%;
 }
}


@media screen and (max-width: 1150px) {
 .l-content .circular-arrow-btn {
  width: 35px;
  height: 35px;
  top: 78%;
  left: 68%;
 }

 .l-content .arrow-icon {
  font-size: 32px;
 }
}

@media screen and (max-width: 1130px) {
 .l-content .m-banner3 .m-btn-list {
  position: absolute;
  top: 30%;
  left: 76%;
 }

 .l-content .m-banner4 .m-btn-list {
  position: absolute;
  top: 30%;
  left: 76%;
 }
}

@media screen and (max-width: 1049px) {
 .l-content .m-banner2 .m-btn-list {
  position: absolute;
  top: 30%;
  left: 73%;
 }

 .l-content .m-banner3 .m-btn-list {
  position: absolute;
  left: 73%;
 }

 .l-content .m-banner4 .m-btn-list {
  position: absolute;
  left: 73%;
 }
}

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

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

 .l-content .m-banner1 .m-btn-list {
  bottom: -3%;
  right: 5%;
 }
}

@media screen and (max-width: 991px) {
 .l-content .circular-arrow-btn {
  width: 50px;
  height: 50px;
  top: 73%;
  left: 73%;
 }

 .l-content .arrow-icon {
  font-size: 45px;
 }

 .l-content .condition .col-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
 }

 .l-content .condition .col4 {
  display: flex;
  flex-direction: column;
  width: 100%;
 }

 .l-content .condition .col8 {
  width: 100%;
  padding: 40px 20px;
  border-width: 0 0 0 0;
 }
 
 .l-content .condition {
    padding: 20px 0 0 0;
}
}

@media screen and (max-width: 932px) {
 .l-content .m-banner2 .m-btn-list {
  top: 18%;
 }

 .l-content .m-banner3 .m-btn-list {
  top: 18%;
 }

 .l-content .m-banner4 .m-btn-list {
  top: 18%;
 }
}

@media screen and (max-width: 900px) {
 .l-content .m-banner1 .m-btn-list {
  bottom: -7%;
  right: 1%;
 }
}

@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;
 }

 .responsive .l-content .m-btn--down.btn_edit {
  width: 100% !important;
 }

 .responsive .l-content .m-btn--down.btn_edit:first-child {
  margin: 0 10px 20px 0;
 }

 .l-content .m-banner1 .m-btn-list {
  bottom: -2%;
  right: 1%;
 }

 .l-content .circular-arrow-btn {
  width: 35px;
  height: 35px;
  top: 78%;
  left: 68%;
 }

 .l-content .arrow-icon {
  font-size: 32px;
 }

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

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

 .l-content .m-product {
  padding: 10px;
  border-radius: 0 10px 10px 10px;
 }

 .l-content .m-banner2,
 .l-content .m-banner3,
 .l-content .m-banner4 {
  border-radius: 10px;
 }

 .l-content .m-banner2 img,
 .l-content .m-banner3 img,
 .l-content .m-banner4 img {
  border-radius: 10px;
 }

 .l-content .voucher-note {
  margin-top: 10px;
  font-size: 14px;
 }

 .l-content .col-flex-voucher {
  display: flex;
  flex-wrap: wrap;
 }

 .l-content .col-flex-voucher .col3 {
  width: 44%;
 }

 .l-content .col-flex {
  display: flex;
  flex-direction: column;
 }

 .l-content .section-more .col4 {
  max-width: 100%;
 }

 .l-content .section-more .col8 {
  max-width: 100%;
  margin-left: 0;
 }

 .l-content .section-more .bl-sub {
  border-radius: 0 0 0 0;
  padding: 0 20px 20px 20px;
 }

 .l-content .section-more .bl-sub2 {
  border-radius: 0 0 20px 20px;
  padding: 0 20px 20px 20px;
 }

 .l-content .box-condition {
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
 }

 .l-content .col-flex-voucher .link-voucher {
  width: 20%;
 }

}

@media screen and (max-width: 480px) {
 .l-content .product .name {
  font-size: 14px;
 }
}