/* body */
body,input,select,textarea,button{margin:0;background:#fff;font-size:14px;color:#444;font-family:"Noto Sans Thai",sans-serif;overflow-x:hidden;}
body{scrollbar-gutter: stable;overflow-y: auto;}
/* default */
header,nav,footer,section,aside,article,div,span,em,i,strong,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,input,select,hr,button,a{margin:0;padding:0;box-sizing:border-box;font-weight:400;}
ul,ol{list-style:none;}
b,strong{font-weight:normal;}
i,em{font-style:normal;}
img{display:block;border:0;-ms-interpolation-mode:bicubic;}
a{color:#28d;}
a:hover{text-decoration:none;}
/* header */
header{position:relative;margin:0 auto;padding:30px 40px 20px 310px;min-width:1024px;min-height:90px;}
header, .shop_header{display: block; border-bottom: 3px solid #AF0016 !important;}
header h1{position:absolute;top:42%;left:40px;margin:-15px 0 0;}
header h1 img{display:block;width:240px;}
header p{font-size:14px;line-height:40px;}
header ul{letter-spacing:-0.5em;}
header ul li{display:inline-block;vertical-align:top;letter-spacing:0;}
header ul li + li{margin:0 0 0 15px;}
header ul li span{position:relative;display:block;padding:0 34px 0 14px;border:1px solid #dcd7d2;border-radius:4px;height:50px;font-size:16px;line-height:48px;color:#444;text-decoration:none;cursor:pointer;}
header ul li span:after{position:absolute;top:50%;right:14px;display:block;margin:-9px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(135deg);-webkit-transform:rotate(135deg);width:10px;height:10px;}
header dl{position:absolute;bottom:20px;right:30px;letter-spacing:-0.5em;}
header dl dt,
header dl dd{display:inline-block;padding:0 10px;font-size:14px;line-height:25px;letter-spacing:0;}
header dl dt{border-right:1px solid #dcd7d2;}
header dl a{color:#444;text-decoration:none;}
@media screen and (max-width:1024px){
  header{padding:30px 30px 20px;min-width:768px;min-height:0;}
  header h1{position:static;top:auto;left:auto;margin:0 0 15px;}
  header p{line-height:1.3em;}
}
@media screen and (max-width:767px){
  header{padding:20px 15px 20px;min-width:320px;}
  header h1{margin:0 0 15px;}
  header h1 img{margin:0 auto;width:240px;}
  header p{text-align:center;}
  header ul{margin:0 0 15px;}
  header ul li{display:block;}
  header ul li + li{margin:10px 0 0;}
  header ul li span:after{margin:-8px 0 0;width:8px;height:8px;}
  header ul li span{height:40px;line-height:38px;}
  header dl{position:static;bottom:auto;right:auto;text-align:center;}
}
/* modal */
.overlay{position: fixed;left: 0px;top: 0px;width: 100vw;height: 100vh;background-color: rgb(0, 0, 0, 0.6);z-index: 9000;display: none;justify-content: center;align-items: center;opacity: 0;transition: opacity 0.2s ease;}
.overlay.active{opacity: 1;}
.modal-area, .modal-genre{position: fixed !important;z-index: 9001;left: 50%;top: 50%;}
[class*="modal"]{position: relative;display: none;opacity: 0;transform:translate(-50%, -50%) scale(0.98);transition: opacity 0.2s ease, transform 0.2s ease;padding: 30px;background: #fff;width: calc(100% - 80px);}
[class*="modal"].active{opacity: 1;transform:translate(-50%, -50%) scale(1);}
[class*="modal"] h3{margin:0 0 10px;padding:0 30px 0 0;overflow:hidden;font-size:20px;line-height:1.3em;text-overflow:ellipsis;white-space:nowrap;}
[class*="modal"] h4{margin:0 0 10px;overflow:hidden;font-size:16px;line-height:1.3em;color:#3c6478;text-overflow:ellipsis;white-space:nowrap;}
[class*="modal"] ul{letter-spacing:-0.5em;}
[class*="modal"] ul li{display:inline-block;width:20%;letter-spacing:0;}
[class*="modal"] ul li a{position:relative;display:block;padding:0 10px 0 15px;overflow:hidden;font-size:14px;line-height:1.5em;text-overflow:ellipsis;white-space:nowrap;}
[class*="modal"] ul li a:after{position:absolute;top:50%;left:0;display:block;margin:-3px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:6px;height:6px;}
[class*="modal"] div{margin:10px 0 0;}
[class*="modal"] i{position:relative;position:absolute;top:15px;right:15px;display:block;width:15px;height:15px;cursor:pointer;}
[class*="modal"] i:before,
[class*="modal"] i:after{position:absolute;top:50%;left:0;content:"";display:block;width:13px;border:1px solid #dcd7d2;}
[class*="modal"] i:before{transform:skewY(-45deg);}
[class*="modal"] i:after{transform:skewY(45deg);}
@media screen and (max-width:1024px){
  [class*="modal"]{padding:20px;width:calc(100% - 60px);}
  [class*="modal"] ul li{width:25%;}
}
@media screen and (max-width:767px){
  [class*="modal"]{padding:15px;width:calc(100% - 30px);max-height:calc(100% - 30px);overflow:auto;}
  [class*="modal"] div{display:block;width:auto;}
  [class*="modal"] ul li{width:50%;}
}
/* lity */
.lity{background:rgba(0,0,0,0.6);}
.lity-content{position:relative;}
.lity-content:before{position:absolute;top:0;left:0;display:block;content:"";background:rgba(0,0,0,0);width:100%;height:100%;z-index:1;}
.lity-content:after{box-shadow:none;-webkit-box-shadow:none;}
.lity-wrap:before{margin-right:0;}
.lity-image img{margin:0 auto;padding:30px 0;box-sizing:border-box;max-width:720px;}
.lity-close{top:15px;right:15px;width:15px;height:15px;overflow:visible;font-size:0;line-height:0;text-shadow:none;}
.lity-close:before,
.lity-close:after{position:absolute;top:50%;left:0;content:"";display:block;width:13px;border:1px solid #fff;}
.lity-close:before{transform:skewY(-45deg);}
.lity-close:after{transform:skewY(45deg);}
.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited{font-size:0;line-height:0;text-shadow:none;font-family:inherit;}
.lity-close:active{top:15px;font-size:0;line-height:0;}
@media screen and (max-width:767px){
  .lity-image img{max-width:calc(100% - 30px);}
}
/* nav */
nav{margin:0 auto;padding:20px 0;background:#f6f5f4;}
nav input[type="text"]{display:block;border:0;width:100%;height:48px;font-size:16px;line-height:48px;text-indent:0.5em;}
nav input[type="submit"]{display:block;background:#AF0016;border:1px solid #dcd7d2;border-radius:4px;width:100%;height:50px;appearance:none;-webkit-appearance:none;font-size:16px;line-height:48px;color:#fff;cursor:pointer;}
nav ul{display:table;margin:0 auto;padding:0 40px;width:100%;}
nav ul li{position:relative;display:table-cell;vertical-align:top;}
nav ul li:nth-child(2){padding:0 20px;width:60px;}
nav ul li:nth-child(4){padding:0 0 0 20px;width:20%;}
nav ul li span{position:relative;display:block;padding:0 14px;background:#fff;border:1px solid #dcd7d2;border-radius:4px;height:50px;font-size:16px;}
nav ul li:nth-child(1) span{padding-left:49px;}
nav ul li:nth-child(3) span{padding-left:64px;}
nav ul li span div{position: relative;}
nav ul li span em{position:absolute;top:50%;left:14px;display:block;margin:-15px 0 0;font-size:14px;line-height:30px;}
nav ul li i{position:relative;display:block;margin:14px auto 0;width:20px;height:20px;}
nav ul li i:before,
nav ul li i:after{position:absolute;top:50%;left:0;content:"";display:block;width:18px;border:1px solid #dcd7d2;}
nav ul li i:before{transform:skewY(-45deg);}
nav ul li i:after{transform:skewY(45deg);}
@media screen and (max-width:1024px){
  nav ul{padding:0 30px;}
}
@media screen and (max-width:767px){
  nav{padding:15px 0;}
  nav input[type="text"]{height:38px;font-size:14px;line-height:38px;}
  nav ul{display:block;padding:0 15px;letter-spacing:-0.5em;}
  nav ul li{display:inline-block;width:44%;letter-spacing:0;}
  nav ul li:nth-child(2){padding:0;width:12%;}
  nav ul li:nth-child(4){display:block;padding:10px 0 0;width:100%;}
  nav ul li span{padding:0 9px;height:40px;font-size:14px;}
  nav ul li:nth-child(1) span{padding-left:34px;}
  nav ul li:nth-child(3) span{padding-left:49px;}
  nav ul li span em{left:9px;font-size:12px;}
  nav ul li i{margin:12px auto 0;width:14px;height:14px;}
  nav ul li i:before,
  nav ul li i:after{width:12px;}
}
/* image */
.image{position:relative;display:table-cell;padding:0 40px;background-size:cover;width:100vw;height:300px;overflow:hidden;vertical-align:middle;}
.image img{position:absolute;top:50%;left:50%;display:block;width:100%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);z-index:-1;}
.image div{padding:30px;background:#000;border-radius:1px;color:#fff;text-align:center;opacity:0.6;}
.image div h1{margin:0 0 10px;font-size:24px;line-height:1.3em;}
.image div p{font-size:16px;line-height:1.5em;}
@media screen and (max-width:1024px){
  .image{padding:0 30px;}
}
@media screen and (max-width:767px){
  .image{display:block;padding:0;height:auto;}
  .image div{padding:15px;opacity:1.0;}
  .image div h1{font-size:18px;}
  .image div p{font-size:14px;}
  .image img{position:static;top:auto;left:auto;transform:translate(0);-webkit-transform:translate(0);}
}
/* wrapper */
.wrapper{display:table;margin:30px 0;padding:0 40px;width:100%;}
@media screen and (max-width:1024px){
  .wrapper{margin:10px 0 30px;padding:0 30px;}
}
@media screen and (max-width:767px){
  .wrapper{display:block;margin:0 0 20px;padding:0 15px;}
}
/* aside */
aside{display:table-cell;width:300px;vertical-align:top;}
aside h2{margin:10px 0;font-size:20px;line-height:1.3em;color:#3c6478;}
aside p{margin:0 0 20px;font-size:14px;line-height:1.5em;}
aside div + div{padding:15px 0 0;}
aside h3{background:#AF0016;font-size:16px;line-height:40px;color:#fff;text-align:center;}
aside ul{padding:15px;background:#f6f5f4;}
aside ul li{position:relative;}
aside ul li:last-child{list-style:none;}
aside ul li i{position:absolute;top:0;left:0;display:block;background:#AF0016;border-radius:1px;width:25px;height:25px;font-size:14px;line-height:25px;color:#fff;text-align:center;}
aside ul li a{position:relative;display:block;padding:0 0 0 15px;overflow:hidden;font-size:14px;line-height:1.5em;text-overflow:ellipsis;white-space:nowrap;}
aside ul li a:after{position:absolute;top:50%;left:0;display:block;margin:-3px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:6px;height:6px;}
aside ul li:last-child a{padding:0 15px 0 0;text-align:right;overflow:visible;text-overflow:clip;}
aside ul li:last-child a:after{left:auto;right:0;border-color:#28d;}
@media screen and (max-width:1024px){
  aside{display:block;width:auto; order: 2;}
  aside ul{letter-spacing:-0.5em;}
  aside ul li{display:inline-block;width:25%;vertical-align:top;letter-spacing:0;}
  aside ul li:last-child{display:block;margin:10px 0 0;width:100%;}
}
@media screen and (max-width:767px){
  aside{display:block;margin:0 -15px 10px;padding:0;width:auto;}
  aside h2{padding:0 15px;}
  aside p{padding:0 15px;}
  aside div{display:block;padding:0;width:auto;}
  aside div + div{padding:0;}
  aside ul{padding:0;background:none;}
  aside ul li{display:block;width:auto;}
  aside ul li:last-child{margin:0;padding:10px 15px;}
  aside ul li + li{margin:0;border-top:1px dotted #dcd7d2;}
  aside ul li i{top:10px;left:15px;width:20px;height:20px;font-size:12px;line-height:20px;}
  aside ul li a{padding:10px 30px 10px 15px;font-size:14px;line-height:20px;}
  aside ul li a:after{left:auto;right:15px;display:block;margin:-4px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:8px;height:8px;}
  aside ul li em{display:block;margin:0;}
}
/* contents */
.contents{display:table-cell;padding:0 0 0 30px;vertical-align:top;}
@media screen and (max-width:1024px){
  .contents{display:block;padding:20px 0 0;}
}
@media screen and (max-width:767px){
  .contents{display:block;padding:0;}
}
/* footer */
footer{padding:0 40px 40px;}
footer h2{margin:0 0 10px;font-size:20px;line-height:1.3em;color:#3c6478;}
footer p{margin:0 0 30px;font-size:14px;line-height:1.5em;}
footer div{padding:30px 40px;background:#f6f5f4;letter-spacing:-0.5em;}
footer span{display:inline-block;width:calc(100% / 3);vertical-align:top;letter-spacing:0;}
footer h4{margin:0 0 10px;font-size:16px;line-height:1em;color:#3c6478;}
footer ul{letter-spacing:-0.5em;}
footer ul li{display:inline-block;width:50%;letter-spacing:0;}
footer ul li a{position:relative;display:block;padding:0 10px 0 15px;overflow:hidden;font-size:14px;line-height:1.5em;text-overflow:ellipsis;}
footer ul li a:after{position:absolute;top:50%;left:0;display:block;margin:-3px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:6px;height:6px;}
footer h5{font-size:14px;line-height:1em;color:#888;text-align:center;}
@media screen and (max-width:1024px){
  footer{padding:0 30px 30px;}
  footer div{margin:0;padding:30px;}
  footer span{display:block;width:auto;}
  footer span + span{margin:15px 0 0;}
  footer ul li{width:25%;}
}
@media screen and (max-width:767px){
  footer{padding:0 15px 20px;}
  footer p{margin:0 0 15px;}
  footer div{margin:0;padding:20px 15px;}
  footer span + span{margin:10px 0 0;}
  footer ul li{width:50%;}
}