/* CSS Document */ @media (max-width:1217px){ } @media (max-width:1080px){ } /*==========================================================================*/ @media (max-width:1017px){ } /*==========================================================================*/ @media (max-width:967px){ } /*==========================================================================*/ @media (max-width:837px){ /*==========================================================================*/ /*==========================================================================*/ } @media (max-width:817px){ /*==========================================================================*/ .main .secSearch .bxSearchAvd{ max-height: none; } .main .secSearch .bxSearchAvd .btnAdvSearch { margin-top: 50px; } .main .secSearch .bxSearchAvd .btnAdvSearch:last-child{ margin-top: 0px; } .main .secSearch .bxSearchAvd .bxBtnAdvSearch{ float: none; margin: auto; } .main .indexSBnn .bxList { width:50%; } .main .indexSList .bxList .bx { width:25%; } .main .dataSec1 .ab1{ width: 100%; background-image: none; } .main .dataSec1 .ab1 .c.c1{ float: none; margin-right: auto; margin-bottom: 80px; margin-left: auto; } .main .dataSec1 .ab1 .c.c3{ float: none; margin-right: auto; margin-bottom: 80px; margin-left: auto; } .main .dataSec1 .ab1 .c.c2{ float: none; margin-right: auto; margin-left: auto; } .main .dataSec2 .abtScCar{ background-image: none; } .main .dataSec2 .abtScBox .bxt{ width: 33.33%; margin-top: 0px; margin-bottom: 1px; } .main .dataCatSec .indexSList .bxList .bx{ width:33.33%; } .main .dataSec1 .bxPay .palList{ width:100%; } .main .dataSec2 .listProRedeem .bxprm .bxImg{ float: none; width: 100%; } .main .dataSec2 .listProRedeem .bxprm .bxTxt{ float: none; width: 100%; padding-right: 0px; padding-left: 0px; padding-top:10px; } .main .dataSec2 .listProRedeem .bxprm .bxTxt .chkprm{ float:left; width:50%; } .main .dataSec1 .bxGear{ width: auto; } .main .secHead .headDetail .sh2 .shCart .cartText{ font-size:14px; } /*==========================================================================*/ } @media (max-width:717px){ /*==========================================================================*/ .main .indexSList .bxList .bx { width:33.33%; } .main .secSearch .bxSearchAvd .tx1{ width: 590px; } .footer .fDetail .fl { float:none; text-align:center; } .footer .fDetail .fr { float:none; text-align:center; } .footer .fDetail .fr { margin-top:10px; padding:10px; border-top-width: 1px; border-top-style: solid; border-top-color: #d3dae2; border-right-color: #d3dae2; border-bottom-color: #d3dae2; border-left-color: #d3dae2; } .main .dataSec1 .bx .b1{ width:100%; float:none; padding:10px; } .main .dataSec1 .bx .b1:first-child{ border-right-style: none; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d3dae2; } .main .dataSec1 .bx .b1 .cnMap{ top:10px; } .main .dataSec1 .tabSecPro { display:none; } .main .dataSec1 .tabSecPro.vMobile { display:block; } .main .dataSec1 .tabSecPro span, .main .dataSec1 .tabSecPro a{ display: block; line-height: 40px; font-size: 26px; border-bottom-width: 1px; text-align: left; border-bottom-color: #FFF; color:#5e5e5e; } .main .dataSec1 .tabSecPro a{ display:none; } .main .dataSec1 .tabSecPro:hover a{ display: block; } .main .dataSec1 .tabSecPro a.sel{ border-bottom-color: #FFF; } .main .dataSec1 .tabSecPro span.sel{ border-bottom-width: 3px; background-image: url(images/ico-red-up.png); background-repeat: no-repeat; background-position: right center; } .main .dataCatSec .indexSList .bxList .bx{ width:50%; } .main .dataSec1 .prs1 .bxTx{ position: relative; } /*==========================================================================*/ } @media (max-width:667px){ /*==========================================================================*/ .main .dataSec1 .bxPromo .img{ width: 100%; float: none; } .main .dataSec1 .bxPromo .promoTxt{ width: 100%; float: none; padding-left: 0px; padding-top: 20px; } .main .dataSec1 .bxPromo .promoTxt .btnPromo{ margin:5px; } /*==========================================================================*/ } @media (max-width:617px){ /*==========================================================================*/ .hid600{ display:none; } .show600{ display:block; } .main .indexSBnn .bxList { width:100%; } .main .indexSList .bxList .bx { width:50%; } .main .indexSList .bxList .bx .pNameC{ display:block; } .main .secSearch .bxSearchAvd .tx1{ width: 440px; } .main .secSearch .bxSearchAvd .lbQ{ width:350px; } .main .secSearch .bxSearchAvd .ts{ font-size:14px; line-height:16px; width:350px; } .main .bxBannerIndex .listBannerIndex .bnnTxt { top: 10px; } .main .dataCatSec .csecl{ width: 100%; position: relative; padding: 0px; } .main .dataCatSec .csecl span{ background-image: url(images/ico-white-down.png); background-repeat: no-repeat; background-position: right center; } .main .dataCatSec .csecl a{ display:none; } .main .dataCatSec .csecl:hover a{ display:block; } .main .dataCatSec .csecr{ padding-left:0px; } .main .dataCatSec .csecr .selectList{ display:none; } .main .dataCatSec .csecr .selectList.vMobile{ width: 100%; display: block; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } .main .dataCatSec .csecr h1{ padding-left: 10px; padding-right: 10px; padding-top:10px; } .main .dataCatSec .csecr h1 span{ display:block; } .main .bxPage{ text-align:center; } .main .dataSec2 .listProRedeem .bxprm{ width: 100%; padding-left: 0px; padding-right: 0px; } .main .dataSec2 .listProRedeem .bxprm{ border-right-style: none; } .main .dataSec2 .listProRedeem .bxprm:nth-child(2n){ padding-right: 0px; padding-left: 0px; } .hidmb600{ display:none; } .main .dataSec1.nobg.bg_dotmb600{ background-image: url(images/bg_dot.png); } .main .dataSec1 .prs1 .bxTx.proShowMb600{ display:block; } .main .dataSec1 .prs1 .bxPic{ float: none; width: 100%; } .main .dataSec1 .prs1 .bxTx{ float: none; width: 100%; padding:0px; } .main .dataSec1 .prs1 .bxTx .tpPrice .bxr span{ padding:5px; } .main .dataSec1 .prs2{ padding:0px; } .main .dataSec1 .prs2 .bodyTab{ display:block; min-height:100px; } .main .dataSec1 .prs2 .headTab{ display:none; } .main .dataSec1 .prs2 .headTabMb{ display:block; } .main .dataSec1.nobg.dataprofile{ padding:0px; } .main .dataSec1 .bxPF{ padding-top: 0px; } .main .dataSec1 .bxPF .pfMenu{ width: 100%; position: relative; } .main .dataSec1 .bxPF .pfData .tbMenu{ display:none; } .main .dataSec1 .bxPF .pfMenu .tbMenu , .main .dataSec1 .bxPF .pfMenu .bxAfterPic { display:block; } .main .dataSec1 .bxPF .pfMenu.hidinmb .tbMenu , .main .dataSec1 .bxPF .pfMenu.hidinmb span , .main .dataSec1 .bxPF .pfMenu.hidinmb .lnk , .main .dataSec1 .bxPF .pfMenu.hidinmb .bxAfterPic { display:none; } .main .dataSec1 .bxPF .pfMenu.hidinmb .lnk.sel { display: block; color: #FFF; background-color: #e7182c; text-align: center; background-image: none; margin-left:0px; margin-right:0px; } .main .dataSec1 .bxPF .pfMenu span{ } .main .dataSec1 .bxPF .pfMenu span .img{ max-width:150px; margin-left:auto; margin-right:auto; margin-top:30px; } .main .dataSec1 .bxPF .pfMenu .lnk{ margin-left: 10px; margin-right: 10px; background-image: url(images/ico-arr-21-18-g.png); background-repeat: no-repeat; background-position: right center; } .main .dataSec1 .bxPF .pfMenu .lnk.mbred{ color: #FFF; background-color: #e7182c; background-image: none; } .main .dataSec1 .bxPF .pfData{ padding: 0px; } .bxStep{ padding-bottom:10px; } .main .dataSec1 .bxPF .pfData h1{ font-size: 20px; line-height: 24px; background-image: url(images/bg_dot.png); border-left-width: 3px; border-left-style: solid; border-left-color: #e7182c; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; margin-bottom: 5px; } .main .dataSec1 .bxPF .pfData h1::after{ display:none; } .main .dataSec1 .bxPF .pfData .textM{ font-size: 16px; line-height: 18px; padding-top: 0px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; } .main .secSearch .bxSearchAvdFull .b1{ float: none; width: 100%; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .main .secSearch .bxSearchAvdFull .b2{ float: none; width: 100%; padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .main .dataSec1 .bxFaq .txt .aAmphur{ width:45% } /*==========================================================================*/ } @media (max-width:567px){ /*==========================================================================*/ /*==========================================================================*/ } @media (max-width:517px){ /*==========================================================================*/ .main .sec_banner_top .img.hidmb500 { display:none; } .main .sec_banner_top .img.showmb500 { display:block; } .lbSubmit #Submit.sbm1 { display:none; } .lbSubmit.lbSubmit2{ background-color: transparent; background-image: none; } .lbSubmit.lbSubmit2::before, .lbSubmit.lbSubmit2::after{ display:none; } .lbSubmit #Submit.sbm2 { display: block; background-color: transparent; background-image: url(images/btn-search-t.png); background-repeat: no-repeat; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 35px; width: 66px; } .main .secSearch .bxSearchAvd .lbSubmit { width: 65px; margin-right: 0px; } .main .secSearch .bxSearchAvd .lbSubmit #Submit { font-family: supermarket; color: #555555; font-size: 100%; text-align: left; background-position: center right; } .main .secSearch .bxSearchAvd .lbSubmit #Submit.btnBuyNow, .lbSubmit #Submit.btnBuyNow { background-color: transparent; background-image: url(images/btn-cart-t.png); background-repeat: no-repeat; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 35px; width: 66px; color: transparent; } .main .secSearch .bxSearchAvd{ width: 100%; padding-left: 30px; padding-right: 30px; } .main .secSearch .bxSearchAvd .tx1{ width: 100%; text-align: center; } .main .secSearch .bxSearchAvd .ts{ width: 100%; top: 40px; } .main .secSearch .bxSearchAvd .lbQ{ width: 100%; margin-bottom:35px; } .main .bxBannerIndex .listBannerIndex .bnnTxt h1 { font-size: 22px; line-height:24px; } .main .bxBannerIndex .listBannerIndex .bnnTxt h2 { font-size: 18px; line-height:20px; } .main .bxBannerIndex .listBannerIndex .bnnTxt .bnBtn{ display:none; } .main .dataSec1 .bx .b1 .cnMap{ width:40px; } .main .dataSec1 .bx .b1 .cnDetail{ padding-left:50px; } .main .cntFrm{ padding-bottom:50px; } .main .cntFrm .ftr .ftr50{ width:100%; } .main .cntFrm .ftr .ftr50:nth-child(1) { padding-right: 0px; margin-bottom: 15px; } .main .cntFrm .ftr .ftr50:nth-child(2) { padding-left: 0px; } .main .cntFrm .ftr .tScCode label{ width:100%; } .main .cntFrm .ftr .tScCode{ text-align:center; } .main .cntFrm .ftr .btnSbm{ float: none; position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; } .main .dataSec2 .abtScBox .bxt{ width: 50%; } .main .dataSec1 .bxGear .bxt{ display:none; } .main .dataSec1 .bxGear .bxg .g{ position: relative; margin-bottom: 40px; } .main .dataSec1 .bxGear .bxg{ height:auto; background-image:none; } .main .dataSec1 .bxPF .pfData .bxTb.bxTbBoard .tbBody .tbRow{ display:block; } .main .dataSec1 .bxPF .pfData .bxTb.bxTbBoard .tbCll.tbCll20, .main .dataSec1 .bxPF .pfData .bxTb.bxTbBoard .tbCll.tbCll80{ width:100%; } .main .dataSec1 .bxPF .pfData .bxTb.bxTbBoard .tbHead, .main .dataSec1 .bxPF .pfData .bxTb.bxTbBoard .tbCll.tbCll20 .imginlist , .main .dataSec1 .bxPF .pfData .bxTb.bxTbBoard .space-10{ display:none; } .main .dataSec1 .bxPF .pfData .bxTb.bxTbBoard .imginlist2{ max-height:50px; } .main .cntFrm .ftr .ftr20 , .main .cntFrm .ftr .ftr60{ width:100%; padding:0px; } /*==========================================================================*/ } @media (max-width:417px){ /*==========================================================================*/ .main .indexSList .bxList .bx { width:100%; } .main .secSearch .bxSearchAvd .tx1{ /*width: 240px;*/ } .main .secSearch .bxSearchAvd .lbQ{ /*width:150px;*/ } .main .secSearch .bxSearchAvd .ts{ /*width:240px;*/ } .main .bxBannerIndex .listBannerIndex .bnnTxt h1 { font-size: 16px; line-height:18px; } .main .bxBannerIndex .listBannerIndex .bnnTxt h2 { font-size: 16px; line-height:18px; } .main .dataSec1 .bxLog .frmLog .fInput .fnp50{ width:100%; } .main .dataSec1 .bxLog .frmLog .fInput .fnp50:first-child{ padding-right: 0px; padding-left: 0px; margin-bottom: 20px; } .main .dataSec1 .bxLog .frmLog .fInput .fnp50:last-child{ padding-right: 0px; padding-left: 0px; margin-bottom: 20px; } .main .dataCatSec .indexSList .bxList .bx{ width:100%; } .bxStep{ display:none } /*==========================================================================*/ } @media (max-width:467px){ /*==========================================================================*/ .main .dataSec2 .abtScBox .bxt{ width: 100%; } .over_bg { width:auto; } /*==========================================================================*/ } @media (max-width:367px){ /*==========================================================================*/ .main .dataSec1 .bxFaq .txt .aAmphur{ width:90% } /*==========================================================================*/ }