.home-row { display: flex; align-items:stretch; justify-content: space-between;}
.home-flex-main-left {flex: 73%;}
.home-flex-main-left img { display: block; width:100%;}
.home-flex-main-right { flex: 27%; padding-left:15px;}
.home-flex-main-right img { display: block; width:100%;}
#containerbanner01 { overflow: hidden; position: relative; max-width: 343px;}
#containerbanner01 .swiper-slide img { display: block; width:100%;}
#containerbanner02 { overflow: hidden; position: relative; max-width: 340px;}
#containerbanner02 .swiper-slide img { display: block; width:100%;}

.swiper-container {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 16px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide a.boximglogo { display: block; margin: 5px 0 0 0;}
.swiper-slide a.boximglogo img { display: block; width: 52px; margin: 0 auto;}
.swiper-paginationbanner { position: absolute;bottom: 5px !important; z-index: 10; text-align: center;}


.box-search-row { display: flex;flex-wrap: wrap; background:#f6d528; margin-top:10px;}
.box-search-flex-left {flex: 25%; padding:10px 0 10px 10px;}
.box-search-flex-left img { max-width:100%;}
.box-search-flex-center { flex:46%; padding:0 20px;}
.box-search-flex-right { flex: 25%; background:#e7b903; border-left:2px solid #d6ac05; padding:0 20px; text-align:center;}


.box-flex-col3 { display: flex;flex-wrap: wrap;}
.box-flex-col3 > div {padding:2px; flex:33.33%; text-align:center;}
.box-flex-col3 > div h3 {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:20px; line-height:20px; color:#222222; font-weight:normal; display:block;}
.box-flex-col3 > div h4 {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:18px; line-height:18px; color:#222222; font-weight:normal; display:block;}

.txt-title2 {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:30px; line-height:30px; color:#222222; font-weight: bold; display:block; margin-top:10px; margin-bottom:10px;}



.box-btn { text-align:center; margin: 0 0 10px 0;}
.box-btn button {
  padding: 7px 50px;
  background: #222222;
  border-radius:30px;
  font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:22px; line-height:22px; color:#ffc000; font-weight:normal;
  border: 6px solid #192441;
  cursor: pointer;
  text-align:center;
}
.box-btn button:hover {
  background: #ffc000;
  color:#222222;
}
.box-btn a {
  display: block;
  padding: 7px 50px;
  background: #222222;
  border-radius:30px;
  font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:22px; line-height:22px; color:#ffc000; font-weight:normal;
  border: 6px solid #192441;
  cursor: pointer;
  text-align:center;
}
.box-btn a:hover {
  background: #ffc000;
  color:#222222;
}

.box-btn01 { text-align:center;}
.box-btn01 button {
  padding: 7px 80px;
  background: #ffc000;
  border-radius:30px;
  font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:22px; line-height:22px; color:#222; font-weight:normal;
  border: 6px solid #192441;
  cursor: pointer;
  text-align:center;
}
.box-btn01 button:hover {
  background: #ffc000;
  color:#222222;
}


.btn {
  padding: 8px 50px;
  background: #222222;
  border-radius:30px;
  font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:22px; line-height:22px; color:#ffc000; font-weight:normal;
  border: 6px solid #192441;
  cursor: pointer;
  text-align:center;
  margin-top:5px;
}
.btn:hover {
  background: #ffc000;
  color:#fff;
}

.box-ad { padding:20px 0; text-align:center;}
.box-ad img { max-width:100%;}


.row-title-flex { display: flex;flex-wrap: wrap;align-items: baseline; margin-bottom:20px;}
.txt-col-left {flex: 73%;}
.txt-col-left h1 {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:30px; line-height:30px; color:#f8c300; font-weight:normal;}
.txt-col-right { flex: 27%; text-align:right; font-family: "DB_Heavent", Tahoma, Geneva, sans-serif; font-size: 18px; line-height: 18px;  font-weight: normal; color: #fff;}

ul.product-flex { display: flex; /*flex-wrap: wrap;*/ flex-flow: row wrap; align-content:stretch; list-style:none; padding:0; margin:0;}
ul.product-flex li {padding:15px; width: 24%; background:#eeeeee; margin:5px; /*margin-bottom:20px;**/ border-radius:3px;}
ul.product-flex li .row-name { display: flex;flex-wrap: wrap; position: relative ;}
ul.product-flex li .row-name .txt-col {flex: 65%;font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:26px; line-height:26px; color:#222; font-weight:bold;}
ul.product-flex li .row-name .txt-col span {font-size:22px; line-height:22px; color:#222; font-weight: normal;}
ul.product-flex li .row-name .txt-col h2 {font-family:"Helvetica95", Tahoma, Geneva, sans-serif; font-size:24px; line-height:24px; color:#222; font-weight: normal; margin-top:10px; margin-bottom:10px;}
ul.product-flex li .row-name .txt-col h2 span {font-size:20px; line-height:20px; display:block;}
ul.product-flex li .row-name .txt-col h2 span.tiretextthai {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:24px; line-height:20px; display:block;}
ul.product-flex li .row-name .rating-col { /*flex: 35%; text-align:right;*/ position:absolute; right: 0; top: 0;}
ul.product-flex li .row-name .rating-col img { max-width:100%; margin-top:-25px; margin-right: -7px;}
ul.product-flex li .row-name .rating-col span { display: block; width: 100%; padding: 0 0 0 11px; position: absolute; bottom: 15px; text-align: center; color: #FFF; font-family:Tahoma; font-size:12px; font-weight: normal;}

ul.product-flex li .row-product { display: flex;flex-wrap: wrap; margin-bottom:10px;}
ul.product-flex li .row-product .pic-col { width: 50%;}
ul.product-flex li .row-product .pic-col h3 {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:20px; line-height:20px; color:#555; font-weight:normal; margin-top:5px;}
ul.product-flex li .row-product .pic-col h4 {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:22px; line-height:22px; color:#222; font-weight:bold;}
ul.product-flex li .row-product .pic-col img {max-width:100%;}
ul.product-flex li .row-product .price-col {flex: 50%; padding-left:10px;}
ul.product-flex li .row-product .price-col .row-price { display: flex; flex-wrap: wrap;align-items: flex-start; border-bottom:1px solid #fff; background:#ddd;}
ul.product-flex li .row-product .price-col .row-price:last-child {border-bottom:0px solid #fff;}
ul.product-flex li .row-product .price-col .row-price .logo-brand-col { width: 55%;}
ul.product-flex li .row-product .price-col .row-price .logo-brand-col img {max-width:100%; display: block;}
ul.product-flex li .row-product .price-col .row-price .number-col {width: 45%;font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:20px; line-height:20px; color:#222; font-weight:bold; text-align:center;}


.row-title-flex-know { display: flex;flex-wrap: wrap;align-items: baseline; margin-bottom:10px; margin-top:40px; background:#222222; padding:5px 20px;}
.row-title-flex-know .txt-col-left {flex: 73%;}
.row-title-flex-know .txt-col-left h1 {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:30px; line-height:30px; color:#f8c300; font-weight:normal;}
.row-title-flex-know .txt-col-right { flex: 27%; text-align:right; }
.row-title-flex-know .txt-col-right a {font-family: "DB_Heavent", Tahoma, Geneva, sans-serif; font-size: 18px; line-height: 18px;  font-weight: normal; color: #fff; text-decoration:underline;}
.row-title-flex-know .txt-col-right span {color:#f8c301; margin-left:5px;}


.row-flex-know { display: flex; flex-wrap: wrap; align-items: stretch; justify-content:space-between;}
.row-flex-know .txt-col-1 {width: 50%; display: flex; flex-wrap: wrap; justify-content:space-between;}
.row-flex-know .txt-col-1 > .row-title-flex-know01 { width: 100%;}
.row-flex-know .txt-col-1 > .knowboxcol1 { width: 49%;}
.row-flex-know .txt-col-1 > .knowboxcol1 > a { display: block; width: 100%;}
.row-flex-know .txt-col-1 > .knowboxcol1 > a img {width:100%;}
.row-flex-know .txt-col-1 > .knowboxcol1 .box-text { background:#fff; padding:10px 20px; margin-bottom:10px;}
.row-flex-know .txt-col-1 > .knowboxcol1 .box-text .box-hidden {height:40px; overflow:hidden;}
.row-flex-know .txt-col-1 > .knowboxcol1 .box-text .box-hidden a { display: block; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:20px; line-height:20px; color:#222; font-weight:normal;}
.row-flex-know .txt-col-1 > .knowboxcol1 .box-text .text-title {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:18px; line-height:18px; color:#555; font-weight:normal;height:35px; overflow:hidden;}
.row-flex-know .txt-col-1 > .knowboxcol1 .box-text .text-date { display: flex; align-items: center; justify-content: space-between; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:18px; line-height:18px; color:#555; font-weight:normal; margin: 4px 0 0 0;}
.row-flex-know .txt-col-1 > .knowboxcol1 .box-text .text-date span {color:#f8c301; font-size:16px; margin-right:5px;}
/*
.row-flex-know .txt-col-2 { width: 24%; max-height: 700px; margin-left:10px;}
.row-flex-know .txt-col-2 a.imgincontent { display: block; width: 100%;}
.row-flex-know .txt-col-2 a.imgincontent img { width:100%;}
.row-flex-know .txt-col-2 .box-text { background:#fff; padding:10px 20px; margin-bottom:10px;}
.row-flex-know .txt-col-2 .box-text .box-hidden {height:45px; overflow:hidden;}
.row-flex-know .txt-col-2 .box-text .box-hidden a { font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:20px; line-height:22px; color:#222; font-weight:normal;}
.row-flex-know .txt-col-2 .box-text .text-date {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:18px; line-height:18px; color:#555; font-weight:normal;}
.row-flex-know .txt-col-2 .box-text .text-date span {color:#f8c301; font-size:16px; margin-right:5px;}
*/
.row-flex-know { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content:space-between;}
.row-flex-know .txt-col-2 {width: 24%; display: flex; flex-wrap: wrap; justify-content:space-between;}
.row-flex-know .txt-col-2 > .row-title-flex-know01 { width: 100%;}
.row-flex-know .txt-col-2 > .knowboxcol2 { width: 100%;}
.row-flex-know .txt-col-2 > .knowboxcol2 > a { display: block; width: 100%;}
.row-flex-know .txt-col-2 > .knowboxcol2 > a img {width:100%;}
.row-flex-know .txt-col-2 > .knowboxcol2 .box-text { background:#fff; padding:10px 20px; margin-bottom:10px;}
.row-flex-know .txt-col-2 > .knowboxcol2 .box-text .box-hidden {height:40px; overflow:hidden;}
.row-flex-know .txt-col-2 > .knowboxcol2 .box-text .box-hidden a { display: block;font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:20px; line-height:20px; color:#222; font-weight:normal;}
.row-flex-know .txt-col-2 > .knowboxcol2 .box-text .text-title {font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:18px; line-height:18px; color:#555; font-weight:normal;height:35px; overflow:hidden;}
.row-flex-know .txt-col-2 > .knowboxcol2 .box-text .text-date { display: flex; align-items: center; justify-content: space-between; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:18px; line-height:18px; color:#555; font-weight:normal; margin: 4px 0 0 0;}
.row-flex-know .txt-col-2 > .knowboxcol2 .box-text .text-date span {color:#f8c301; font-size:16px; margin-right:5px;}

.row-title-flex-know01 { display: flex;flex-wrap: wrap; align-items: center; justify-content:space-between; margin-bottom:5px; background:#222222; padding:0; padding-right:20px;}
.row-title-flex-know01 .txt-col-left {width: 71%;}
.row-title-flex-know01 .txt-col-left h2 { display: flex; align-items: center; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:24px; line-height:24px; color:#f8c300; font-weight:normal;}
.row-title-flex-know01 .txt-col-left h2 img { display: block; height: 100%;}
.row-title-flex-know01 .txt-col-right { width: 27%; text-align:right; }
.row-title-flex-know01 .txt-col-right a {font-family: "DB_Heavent", Tahoma, Geneva, sans-serif; font-size: 18px; line-height: 18px;  font-weight: normal; color: #fff; text-decoration:underline;}
.row-title-flex-know01 .txt-col-right span {color:#f8c301; margin-left:5px;}

ul.product-flex-popular { display: flex; flex-wrap: wrap; align-items: stretch; list-style:none; padding:0; margin:0;border-radius:3px;background:#fff; text-align:center; margin-bottom:60px;}
ul.product-flex-popular li {padding:15px; width:12.5%;}
ul.product-flex-popular li a { display: block; height: 92%; overflow: hidden;}
ul.product-flex-popular li img {width:100%;}
ul.product-flex-popular li div.imgtire { height: 78%;}
ul.product-flex-popular li div.imglogo { height: 22%;}
ul.product-flex-popular li .product-name { height: 8%; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:20px; line-height:20px; color:#222; font-weight:normal; text-align:center;}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 30%; border: 0px solid #FFF; margin: 0 auto;
  text-align: center;
}
.overlay-content > ul { display: flex; list-style: none; margin: 0 auto; padding: 0;}
.overlay-content > ul li { color: #FFF;}
.overlay-content .hh1 { width: 100%; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:30px; line-height:30px; color:#FFF; }
.overlay-content .hhbar { display: flex; justify-content:space-between; width: 60%; margin: 30px auto; background: #FFF; height: 20px; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}
.overlay-content .hhbar > .x1 { width: 20px; height: 20px; border: 1px solid #000; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.overlay-content .hhbar > .x1.active { background: #f7ce18;}
.overlay-content .bb1 { width: 100%; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; background: #FFF;  display: flex;
  justify-content:center;flex-wrap:wrap; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:30px;
}
.overlay-content .bb1 a { display: block; padding: 10px; width: 70px;}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #444444;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.mobileoverlay {   visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: fixed; top: 0; left: 0px;
  z-index: +10000 !important;
  width: 100%;
  height: 100%; display: flex; justify-content:center;
}
.mobileoverlay > a.closebox { display: block; position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; text-align: center; line-height: 30px; background: #000; color: #FFF;-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px; font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:30px;}
.mobileoverlay a img { margin: 65px 0 0 0;}

@media screen and (max-width:1680px) {
  #containerbanner01 { overflow: hidden; position: relative; max-width: 285px;}
}
@media screen and (max-width:1440px) {
ul.product-flex li {width: 32%;}
.box-search-flex-left {display:none;}
.box-search-flex-right { padding-bottom: 20px;}

.row-title-flex-know01 .txt-col-left { flex: 68%;}
.row-title-flex-know01 .txt-col-right { flex: 31%;}
.row-title-flex-know01 .txt-col-left h2 { font-size: 20px;}

.row-title-flex-know01 .txt-col-right a { font-size: 16px;}
.txt-col-right { font-size: 16px;}
}

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

}

@media screen and (max-width:1280px) {
.row-title-flex-know01 .txt-col-left h2 img { max-width: 27%;}
#containerbanner02 { overflow: hidden; position: relative; max-width: 80%;}
#containerbanner02 .swiper-slide img { display: block; width:100%;}

}

@media screen and (max-width:1024px) {
  .home-flex-main-right {display: none;}

  ul.product-flex li {  width: 48%;}

  ul.product-flex-popular { justify-content: space-around;}
  ul.product-flex-popular li { padding: 10px; width: 25%;}
  .row-flex-know .txt-col-1 {
      flex: 100%;
      margin-bottom: 20px;
  }
  .row-title-flex-know01 .txt-col-left h2 img {
      max-width: 100%;
  }
  .row-title-flex-know01 .txt-col-left h2 {
      font-size: 28px;
  	padding-top: 6px;
  }
  .row-flex-know .txt-col-2 { margin-left:0px; width: 49%;}
  .row-flex-know .txt-col-2 a img {
      width: 100%;
  }
  .mobileoverlay {   visibility:visible; }
}

@media screen and (max-width:768px) {
.row-title-flex-know01 .txt-col-left h2 { font-size: 22px;}
.row-flex-know .txt-col-2 { margin-left:0px; width: 49%;}
.row-flex-know .txt-col-2 a.imgincontent { height:auto; overflow: visible;}
.row-flex-know .txt-col-2 .box-text { height:auto;}

.txt-col-left h1 { font-size: 26px;}
.overlay-content { width: 90%;}
}

@media screen and (max-width:737px) {
  .box-search-flex-center { padding-bottom: 20px;}
  .box-flex-col3 > div h3 {font-size: 16px;}
  .box-flex-col3 > div h4 {font-size: 16px;}
  .txt-col-right { text-align: left; margin-top: 10px;}
  .txt-col-left { flex: 100%;}
  .row-flex-know .txt-col-2 {
      width: 48%;
  }
  .row-title-flex-know01 {
      padding-right: 5px;
  }
  .row-title-flex-know01 .txt-col-left h2 {
      font-size: 20px;
  }
  ul.product-flex-popular li {
      width: 25%;
  }
}
@media screen and (max-width:560px) {
.sp-row {flex-direction: column;}
.txt-col-left h1 {
    font-size: 26px;
	line-height:26px;
}
.box-btn a { padding: 5px; font-size: 16px; line-height: 16px; white-space: nowrap;}
ul.product-flex {justify-content:space-between;}
ul.product-flex li { padding: 10px;
    width: 46%;
}
ul.product-flex li .row-name { display: flex;flex-wrap: wrap; position: relative ; margin: 0 0 4px 0;}
ul.product-flex li .row-name .txt-col {flex: 65%;font-family:"DB_Heavent", Tahoma, Geneva, sans-serif; font-size:15px; line-height:20px; color:#222; font-weight:bold;}
ul.product-flex li .row-name .txt-col span {font-size:22px; line-height:22px; color:#222; font-weight: normal;}
ul.product-flex li .row-name .txt-col h2 {font-family:"Helvetica95", Tahoma, Geneva, sans-serif; font-size:15px; line-height:17px; color:#222; font-weight: normal; margin-top:0px; margin-bottom:0px;}
ul.product-flex li .row-name .txt-col h2 span {font-size:11px; line-height:13px; display:block;}
ul.product-flex li .row-name .rating-col { width: 40%; position:absolute; right: -5px; top: 0;}
ul.product-flex li .row-name .rating-col img { max-width:100%; margin-top:-25px; margin-right: -7px;}
ul.product-flex li .row-name .rating-col span { display: block; width: 100%; padding: 0 0 0 10px; position: absolute; bottom: 8px; text-align: center; color: #FFF; font-family:Tahoma; font-size:10px; font-weight: normal;}
ul.product-flex li .row-product .pic-col h3 {font-size:10px; line-height:10px;}
ul.product-flex li .row-product .pic-col h4 {font-size:10px; line-height:10px;}
ul.product-flex li .row-product .price-col .row-price .number-col {font-size:11px; line-height:10px;}

.row-flex-know .txt-col-2 {
    width: 100%;
	margin-left: 0px;
}
.row-title-flex-know .txt-col-right a {
    font-size: 16px;
}
.row-title-flex-know {
    padding: 5px 5px;
}
.row-title-flex-know .txt-col-left h1 {
    font-size: 20px;
}
ul.product-flex-popular li {
    width: 50%;
}
.row-menu-footer .box-col-right .box-menu-footer ul {
    flex: 50%;
    margin-bottom: 20px;
}
}

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

}

@media screen and (max-width:375px) {
.box-flex-col3 > div h3 {font-size: 16px; /*word-spacing:9999px;*/}

}