@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&family=Noto+Sans+Thai:wght@100;300;400;500;600;700;800;900&display=swap');

html, body, div{ margin:0; padding:0; }
html { 
	-ms-text-size-adjust: 100%; 
	-webkit-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
 
body{ 
 font-family: 'Noto Sans Thai', sans-serif; -webkit-text-size-adjust: none; background:#fff; 
 font-size:16px; line-height:1.5; color:#333333; font-weight:400; min-width: 320px;  overflow-x:hidden; } 
body#popuppage{ background:#000000; }
body#popuppagewhite{ background:transparent; }

img{ border:none; max-width:100%; outline:0; vertical-align:middle;  }
:focus { outline:0; }
a:active { outline:none; }
.word-wrap { word-wrap: break-word; } 
.clear{ clear:both; }
.clearvdo{ clear:both; }
.box{ display:block; position:relative; }
.boxleft, .left{ float:left; }
.boxright, .right{ float:right; }

.txt-center{ text-align:center; }
.txt-left{ text-align:left; }
.txt-right{ text-align:right; }

.table{ display:table; width:100%; margin:0; padding:0; position:relative; }
.table-row{ display:table-row; }
.table-cell{ display:table-cell; }

a:link{ text-decoration:none; color:#333333; }
a:visited{ text-decoration:none; color:#333333; }
a:hover{ text-decoration:none; color:#333333; }
 

h1, .h1{ font-family:'Mitr'; font-size:70px; line-height:1.02; padding:0; margin:0; font-weight:600;  }
h2, .h2{ font-family:'Mitr'; font-size:42px; line-height:1; padding:0; margin:0; font-weight:600;  }
h3, .h3{ font-family:'Mitr'; font-size:36px; line-height:1; padding:0; margin:0; font-weight:600;  }
h4, .h4{ font-family:'Mitr'; font-size:24px; line-height:1.5; padding:0; margin:0; font-weight:600;  }
h5, .h5{ font-family:'Mitr'; font-size:18px; line-height:1.2; padding:0; margin:0; font-weight:600;  } 
h6, .h6{ font-family:'Mitr'; font-size:16px; line-height:1.375; padding:0; margin:0; font-weight:400;  } 
h7, .h7{ font-size:13px; line-height:1.375; padding:0; margin:0; font-weight:400;  } 

#page{ display:block; position: relative;  }
.content{ display:block; position: relative; width:89.84375%; margin: 0 auto; max-width:1536px;   } 
.contentx{ display:block; position: relative; width:84%; margin: 0 auto; max-width:964px;   } 
 
.tb{ display:table; position: relative; width:100%; height:100%;  }
.tb > .tc{ display:table-cell; position: relative;  }
.tb > .tc.vtop{ vertical-align:top; }
.tb > .tc.vmid{ vertical-align:middle; }
.tb > .tc.vbtm{ vertical-align:bottom; }
 

#pageomakase{ display:block; position: relative; background: url("../img/bg-omakase.jpg") top center no-repeat; min-height:300px; }
#omk-bxheader{ display:block; position: relative; max-width:1150px; margin:0 auto; z-index:99; }
.omk-bxheader{ display:block; position: relative; padding:43px 0 26px;  }
.omk-bxheader > .tb{ display:table; position: relative; width:100%;  }
.omk-bxheader > .tb > .c1{ display:table-cell; position: relative; width:212px; vertical-align:top;  }
.omk-bxheader > .tb > .c1 > .bx{ display:block; position: relative; margin-left:12px; }
.omk-bxheader > .tb > .c2{ display:table-cell; position: relative; vertical-align:top; text-align: right; }
.omk-bxheader > .tb > .c2 > .bx{ display:block; position: relative; }

#omk-navmenu{ display:block; position: relative;  margin:52px 0 0;  }
#omk-navmenu > ul{ list-style:none; position:relative; padding:0; margin:0;  }
#omk-navmenu > ul > li{ display:inline-block; position:relative; }

.linkomk{ display:inline-block; position: relative; width:160px; height:50px; cursor: pointer; margin:0 26px; background-size:100%; }
.linkomk > span{ position:absolute; top:0; left:0; bottom:0; right:0; background-size:100%; transition: ease 0.5s; opacity:0 }
.linkomk:hover > span{ opacity:1;  }

.linkomk.navshoyu{  background:url("../img/nav-shoyu.png") no-repeat #fff; }
.linkomk.navshoyu > span{ background:url("../img/nav-shoyu-hover.png") no-repeat #fff; }
.linkomk.navsoup{  background:url("../img/nav-soup.png") no-repeat #fff; }
.linkomk.navsoup > span{ background:url("../img/nav-soup-hover.png") no-repeat #fff; }
.linkomk.navsauce{  background:url("../img/nav-sauce.png") no-repeat #fff; }
.linkomk.navsauce > span{ background:url("../img/nav-sauce-hover.png") no-repeat #fff; }

 

#omk-story{ display:block; position: relative; padding:75px 0; }
.bxstorytxt{ display:block; position:relative; max-width:600px; text-align:center; color:#000; padding:12px; font-weight:300; font-size:20px; margin:0; }
.bxstorytxt > b{ font-weight:700; }
.bxstorytxt > h1{ font-size:60px; line-height:1.13; font-weight:600; }
.bxstorytxt > h1 > span{ color:#e10f21;  } 
.omkstorybg{ position:absolute; width:50%; top:0; bottom:0; right:0; background-image:url("../img/omk-story-bg.png"); background-repeat: no-repeat !important; background-position:left center;   }

#bxshoyu{ display:block; position:relative;  }
#bxsoup{ display:block; position: relative;  }
#bxsauce{ display:block; position: relative; }
 

.bxomkproduct{ display:block; position: relative; padding:26px 0 104px;  }
.omkproductbg{ display:block; position:absolute; width:50%; top:0; right:-65px; bottom:0;  z-index:-1; background-position:left bottom !important; background-repeat: no-repeat !important;  }
.contentbx{ display:block; position: relative; max-width:1264px; margin:0 auto; }
.omkproductbx{ display:block; position: relative;  }
.omkproductbx > .tb{ display:table; position: relative; width:100%; }
.omkproductbx > .tb > .tc1{ display:table-cell; position: relative; width:360px; vertical-align: top; text-align: center; }
.omkproductbx > .tb > .tc1 > .thumbbx{ display:block; position: relative; width:360px; background: url("../img/bg-shadow.png") bottom no-repeat; padding-bottom:62px;  }
.omkproductbx > .tb > .tc1 > .thumbbx > .fixicon{ position: absolute; bottom:86px; left:36px; z-index:6; }
.omkproductbx > .tb > .tc1 > .thumbbx > .fixicon > div:first-child{ margin-bottom:8px; }

.omkproductbx > .tb > .tc2{ display:table-cell; position: relative; vertical-align: middle; }
.omkproductbx > .tb > .tc2 > .txtbx{ display:block; position: relative; max-width:420px;   }
.omkproductbx > .tb > .tc2 > .txtbx > h1{ display:block; position: relative; font-size:80px; line-height:1.1; padding:0 0 16px;  }
.omkproductbx > .tb > .tc2 > .txtbx > .txt{ display:block; position: relative; font-size:20px; font-weight:300; line-height:1.6;  }
.omkproductbx > .tb > .tc2 > .txtbx > .btn{ display:block; position: relative; padding:52px 0 0; }
 
#bxshoyu h1{ color:#7654a2; }
#bxsoup h1{ color:#e53d32; }
#bxsauce h1{ color:#d97a2e; }
 
a.btnbxomk{ display:inline-block; position: relative; width:194px; background:#e10f21; color:#fff; border-radius:30px; text-align: center; padding:18px; font-size:20px; line-height:1; transition: ease 0.5s; margin-right:12px;  }
a.btnbxomk.shoyubx{ background:#7654a2; }
a.btnbxomk.soupbx{ background:#e53d32; }
a.btnbxomk.saucebx{ background:#d97a2e; }
a.btnbxomk:hover{ background:#1d1d1b;  }

.omkbxvdo{ display:block; position: relative; }
.omkbxvdotop{ display:block; position: relative; background: url("../img/omk-bgvdo.png") center no-repeat; min-height:944px;  }
.omkvdotopbx{ display:block; position: relative; max-width:720px; margin:0 auto; padding:126px 0 52px; }
.omkvdotopbx > h4{ display:block; position: relative; color:#fff; text-align: center; padding:0 0 72px; }

.omkvdotop{ display:block; position: relative; background: url("../img/bg-shadow-vdo.png") center bottom no-repeat; padding-bottom:72px;  }
.omkvdotop > .vdobx{ display:block; position: relative; width:100%; }

.omkvdotop > a{ display:block; position: relative; overflow:hidden; }
.omkvdotop > a > img{ width:100%; transition: ease 0.5s;  }
.omkvdotop > a > .icon{ position:absolute; top:0; bottom:0; right:0; left:0; background:url("../img/icon-play.png") center no-repeat; transition:ease 0.5s;  }
.omkvdotop > a:hover > img{ transform: scale(1.2); }
.omkvdotop > a:hover > .icon{ background-image: url("../img/icon-play-hover.png"); }
 
.omkbxvdomake{ display:block; position: relative; padding:16px 0 65px; }
.htxtbx{ display:block; position: relative; text-align: center; padding:0 0 36px;   }
.htxtbx > h4{ display:inline-block; position: relative; background: url("../img/lineh.png") bottom no-repeat; min-width:120px; padding-bottom:10px; font-size:28px; font-weight:600;  }

.omkvdomake{ display:block; position: relative; text-align: center; }
.omkvdomake > a{ display:inline-block; position: relative; width:31%; background:#fff; padding:23px;  box-shadow: 0px 10px 50px 0px rgba(1, 1, 1, 0.2); border-radius:23px; overflow:hidden; margin:0 1% 20px; }
.omkvdomake > a > div{ display:block; position: relative; width:100%;  }
.omkvdomake > a > div > .imgbx{ position:relative; overflow:hidden; padding-top:56.25%; width: 100%; height: 0; border:#dbdbdb solid 1px;   }
.omkvdomake > a > div > .imgbx > img{ position:absolute; top:0; left:0; width:100%; height:100%; transition: ease 0.5s;  }
.omkvdomake > a > div > .icon{  position:absolute; top:0; bottom:0; right:0; left:0; background:url("../img/icon-play.png") center no-repeat; transition:ease 0.5s; z-index:6;  }
.omkvdomake > a:hover > div > .imgbx > img{ transform: scale(1.2); }
.omkvdomake > a:hover > div > .icon{ background-image: url("../img/icon-play-hover.png"); }

.bxiframe{ position:relative; overflow:hidden; padding-top:56.25%; width: 100%; height: 0;}
.bxiframe iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; } 
 

.omkbxmenu{ display:block; position: relative; background:url("../img/omk-menu-bg.jpg") top center repeat-x #e5e5e5; padding:72px 0 65px;  }
.omkmenubx{ display:block; position: relative; }
.omkmenubx > a{ display:inline-block; position: relative; width:31%;  overflow:hidden; margin:0 1% 26px; }
.omkmenubx > a > div{ display:block; position: relative; width:100%;  }
.omkmenubx > a > div > .imgbx{ position:relative; overflow:hidden; padding-top:66.66%; width: 100%; height: 0; border:#dbdbdb solid 1px;   }
.omkmenubx > a > div > .imgbx > img{ position:absolute; top:0; left:0; width:100%; height:100%; transition: ease 0.5s;  }
.omkmenubx > a:hover > div > .imgbx > img{ transform: scale(1.2); } 



#bxfooter{ display:block; position: relative; background:#e10f21; color:#fff; padding:0 0 52px; }

.ftrbxcontact{ display:block; position:absolute; width:100%; margin:-100px auto 0; }
.ftrbxcontact > .bx{ display:block; position:relative;  background:#e10f21; border-radius:90px; box-shadow: 0px 0px 80px 0px rgba(1, 1, 1, 0.25); padding:66px 90px; width:89.56%; margin:0 auto; }
.ftrbxcontact > .bx > .tb{ display:table; position:relative; width:100%;   }
.ftrbxcontact > .bx > .tb > .c1{ display:table-cell; position:relative; vertical-align:middle; }
.ftrbxcontact > .bx > .tb > .c2{ 
	display:table-cell; position:relative; vertical-align:middle; width:202px; text-align:right; } 
.ftrbxcontact > .bx > .tb > .c2 > .bx{ font-weight:400;  }

.bxfooter{ display:block; position: relative; padding:65px 0;  }
.footerlogo{ display:block; position: relative; padding:0 0 20px; }
.footertb{ display:table; position: relative; width:100%; }
.footertb > .c1{ display:table-cell; position: relative; width:39%; vertical-align:top; }
.footertb > .c2{ display:table-cell; position: relative; width:39%; vertical-align:top; }
.footertb > .c3{ display:table-cell; position: relative; width:22%; vertical-align:top; }
.footertb > .c1 > .bx{ display:block; position: relative; max-width:300px; }
.footertb > .c2 > .bx, .footertb > .c3 > .bx{ display:block; }
.fttb{ display:table; position: relative; width:100%; }
.fttb > .c1{ display:table-cell; position:relative; width:50%; vertical-align: top; }
.fttb > .c2{ display:table-cell; position:relative; width:50%; vertical-align: top; text-align:right; }
.fttb > .c2 > .bx{ display:inline-block; position: relative; text-align: left; }
.fttb > .c1 > .bx > div,
.fttb > .c2 > .bx > div{ display:block; position: relative; padding:0 0 6px; }


.bxsocial{ display:block; position: relative; padding:26px 0 0; }
.bxsocial a.iconfb{ margin-left:0; }
 

a.iconfb{ display:inline-block; position: relative; background: url("../../img/icon-fb.png") no-repeat #e10f21; width:22px; height:22px; background-size:100%; vertical-align: middle; margin:0 6px;  }
a.iconfb > span{ position:absolute; top:0; left:0; right:0; bottom:0; background: url("../../img/icon-fb-hover.png") no-repeat #e10f21;  background-size:100%; transition: ease 0.5s; opacity:0; }
a.iconfb:hover > span{ opacity: 1; }

a.iconig{ display:inline-block; position: relative; background: url("../../img/icon-ig.png") no-repeat #e10f21; width:22px; height:22px; background-size:100%; vertical-align: middle; margin:0 6px;  }
a.iconig > span{ position:absolute; top:0; left:0; right:0; bottom:0; background: url("../../img/icon-ig-hover.png") no-repeat #e10f21;  background-size:100%; transition: ease 0.5s; opacity:0; }
a.iconig:hover > span{ opacity: 1; }

a.iconline{ display:inline-block; position: relative; background: url("../../img/icon-line.png") no-repeat #e10f21; width:22px; height:22px; background-size:100%; vertical-align: middle; margin:0 6px;  }
a.iconline > span{ position:absolute; top:0; left:0; right:0; bottom:0; background: url("../../img/icon-line-hover.png") no-repeat #e10f21;  background-size:100%; transition: ease 0.5s; opacity:0; }
a.iconline:hover > span{ opacity: 1; }

a.iconyt{ display:inline-block; position: relative; background: url("../../img/icon-yt.png") no-repeat #e10f21; width:25px; height:18px; background-size:100%; vertical-align: middle; margin:0 6px;  }
a.iconyt > span{ position:absolute; top:0; left:0; right:0; bottom:0; background: url("../../img/icon-yt-hover.png") no-repeat #e10f21;  background-size:100%; transition: ease 0.5s; opacity:0; }
a.iconyt:hover > span{ opacity: 1; }


.bxfooter a{ color:#fff; transition: ease 0.5s; }
.bxfooter a:hover{ color:#333; }
.copytxt{ display:block; position: relative; font-size:14px; }

a.bxbtn{ display:inline-block; position:relative; padding:10px 26px; border-radius:30px; min-width:204px; text-align: center; transition: ease 0.5s; }
a.bxbtn.redbx{ color:#fff; background:#e10f21;  }
a.bxbtn.redbx:hover{ background:#333333; }

a.bxbtn.whitebx{ color:#333; background:#ffffff;  }
a.bxbtn.whitebx:hover{ background:#333333; color:#ffffff; }

a.bxbtn.whiteredbx{ color:#fff; border:#fff solid 3px; background:#e10f21;  }
a.bxbtn.whiteredbx:hover{ background:#fff; color:#e10f21; }

a.bxbtn.greybx{ color:#fff; background:#333;  }
a.bxbtn.greybx:hover{ background:#e10f21; color:#fff; }


#pagepopup{ display:block; position: absolute; top:0; left:0; right:0; bottom:0;  }
#pagepopup > .tb{ display:table; position: relative; width:100%; height:100%; }
#pagepopup > .tb > .tc{ display:table-cell; position: relative; vertical-align:middle; text-align:center; }
.vdopopup{ display:block; position: relative; max-width:960px; margin:0 auto; }
.vdopopup video{ width:100% !important; height:auto !important; margin:20px 0 0;  }
 
.bxiframe{ position:relative; overflow:hidden; padding-top:56.25%; width: 100%; height: 0;}
.bxiframe iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; } 



#topcontrol{ z-index:199; }
#btntop{ display:block; position: relative; width:60px; height:60px; background:#fff; text-align: center; bottom:30px; right:30px; border-radius:50%; box-shadow: 0px 0px 6px 0px rgba(1, 1, 1, 0.1);   }
#btntop > span{ 
 display:inline-block; position: relative; width:30px; height:18px; background: url("../../img/icon-top.png");  
 -webkit-transform: translateY(20px); transform: translateY(20px); transition: all .2s ease; background-size:100%;  }
#btntop:hover > span{  -webkit-transform: translateY(11px); transform: translateY(11px); }