@charset "utf-8";

html , body { margin:0px; line-height:1.55; font-family:"Tahoma", Geneva, sans-serif; color:#ccc;font-size:14px; min-height:100%; position:relative; }
body { background-color:#333 }
input , textarea , select { font-family:"Tahoma", Geneva, sans-serif;font-size:14px;  }
img { border:none;vertical-align:bottom }
a {color:#333366;text-decoration:none;}

a[href^="tel"]{ color:inherit; text-decoration:none;}/*สำหรับดูใน iphone*/

@font-face {
	font-family: 'Conv_CodaCaption-ExtraBold';
	src: url('../fonts/CodaCaption-ExtraBold.eot');
	src: local('☺'), url('../fonts/CodaCaption-ExtraBold.woff') format('woff'), url('../fonts/CodaCaption-ExtraBold.ttf') format('truetype'), url('../fonts/CodaCaption-ExtraBold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.sp-container { max-width:1280px;margin:0px auto;}

header.sp-bg { background:url(../images/header/header.jpg) top center no-repeat; height:362px; text-align:center;}
header.sp-bg > .sp-logo img{ text-align:center; padding-top:20px; width: auto;}
header.sp-bg > .sp-social { text-align:center; margin-top:20px;}
header.sp-bg > a.sp-link {color:#fff;}


.sp-clear-fix { clear:both;}

input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 13px;
  vertical-align: top;
}

.sp-search {padding-left: 20px;padding-top: 10px;}
.search {padding: 0 20px;font-size: 16px;width: 80%;height: 40px;border: 0px solid #b3b3b3;border-radius:0;margin:0;}
.submit {cursor: pointer;border: none;background:#FFF;border-radius:0;padding: 10px 15px;display: inline-block;/* width: 40px;*/height: 40px;margin:0;}

@media (min-width: 240px) and (max-width: 478px) {

.sp-search {padding:0 20px;padding-top: 10px;}
.search {padding: 0 20px;font-size: 16px;width: 80%;height: 40px;border: 0px solid #b3b3b3;border-radius:0;margin:0;}
.submit {cursor: pointer;border: none;background:#FFF;border-radius:0;padding: 10px 15px;display: inline-block;/* width: 40px;*/height: 40px;margin:0;}

.sp-menu-bar{ width:100%; background:#0701ff; padding:10px 0;}
.sp-menu-bar > .col-search { width:100%; /*float:left; box-sizing:border-box;*/}
.sp-menu-bar > .col-menu { width:100%; /*float:right; box-sizing:border-box;*/}

.sp-menu{ width:357px; margin:0 auto;}
.sp-menu ul { padding:0; margin:0; list-style:none;}
.sp-menu ul li { text-align:center; display:inline-block; margin:3px;width:170px;}
.sp-menu ul li a { color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;padding:5px 0px; display:block;font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}
.sp-menu ul li a:hover {background:#F60;}
.sp-menu ul li a.active {color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;background:#F60;padding:5px 0px; display:block;font-weight:bold;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

.sp-number-page { margin-bottom:40px;}
.sp-number-page button {color:#000; font-size:12px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 7px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff; float:left; margin-right:10px; border:none; margin-bottom:10px;}
.sp-number-page button:hover {background:#f60;color:#fff;}
.sp-number-page ul { padding:0; margin:0; list-style:none;float:left;margin-right:10px;}
.sp-number-page ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-number-page ul li a { color:#000; font-size:12px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 5px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff;margin-bottom: 10px;}
.sp-number-page ul li a:hover {background:#f60;color:#fff;}
.sp-number-page ul li a.active {color:#fff; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;background:#000;padding:5px 30px; display:block;font-weight:bold;font-family:"Tahoma", sans-serif;}

.sp-footer{ background:#0701ff; padding:15px 0; text-align:center; font-size:14px; letter-spacing:-1px; color:#fff; font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

}

@media (min-width: 478px) and (max-width: 767px) {
	
.sp-search {padding:0 20px;padding-top: 10px;}
.search {padding: 0 20px;font-size: 16px;width: 85%;height: 40px;border: 0px solid #b3b3b3;border-radius:0;margin:0;}
.submit {cursor: pointer;border: none;background:#FFF;border-radius:0;padding: 10px 15px;display: inline-block;/* width: 40px;*/height: 40px;margin:0;}

.sp-menu-bar{ width:100%; background:#0701ff; padding:10px 0;}
.sp-menu-bar > .col-search { width:100%; /*float:left; box-sizing:border-box;*/}
.sp-menu-bar > .col-menu { width:100%; /*float:right; box-sizing:border-box;*/}

.sp-menu{ width:432px; margin:0 auto;}
.sp-menu ul { padding:0; margin:0; list-style:none;}
.sp-menu ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-menu ul li a { color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;padding:5px 8px; display:block;font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}
.sp-menu ul li a:hover {background:#F60;}
.sp-menu ul li a.active {color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;background:#F60;padding:5px 8px; display:block;font-weight:bold;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

.sp-number-page { margin-bottom:40px;}
.sp-number-page button {color:#000; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 7px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff; float:left; margin-right:10px; border:none; margin-bottom:10px;}
.sp-number-page button:hover {background:#f60;color:#fff;}
.sp-number-page ul { padding:0; margin:0; list-style:none;float:left;margin-right:10px;}
.sp-number-page ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-number-page ul li a { color:#000; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 9px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff;margin-bottom: 10px;}
.sp-number-page ul li a:hover {background:#f60;color:#fff;}
.sp-number-page ul li a.active {color:#fff; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;background:#000;padding:5px 30px; display:block;font-weight:bold;font-family:"Tahoma", sans-serif;}

.sp-footer{ background:#0701ff; padding:10px 0; text-align:center; font-size:18px; letter-spacing:-1px; color:#fff; font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

}

@media (min-width: 768px) and (max-width: 992px) { 

.sp-menu-bar{ width:100%; background:#0701ff; padding:10px 0;}
.sp-menu-bar > .col-search { width:40%; float:left; box-sizing:border-box;}
.sp-menu-bar > .col-menu { width:60%; float:right; box-sizing:border-box;}

.sp-menu{ float:right; padding-right:20px;}
.sp-menu ul { padding:0; margin:0; list-style:none;}
.sp-menu ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-menu ul li a { color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;padding:5px 7px; display:block;font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}
.sp-menu ul li a:hover {background:#F60;}
.sp-menu ul li a.active {color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;background:#F60;padding:5px 7px; display:block;font-weight:bold;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

.sp-number-page { margin-bottom:40px;}
.sp-number-page button {color:#000; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 7px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff; float:left; margin-right:10px; border:none;}
.sp-number-page button:hover {background:#f60;color:#fff;}
.sp-number-page ul { padding:0; margin:0; list-style:none;float:left;margin-right:10px;}
.sp-number-page ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-number-page ul li a { color:#000; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 5px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff;}
.sp-number-page ul li a:hover {background:#f60;color:#fff;}
.sp-number-page ul li a.active {color:#fff; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;background:#000;padding:5px 30px; display:block;font-weight:bold;font-family:"Tahoma", sans-serif;}

.sp-footer{ background:#0701ff; padding:10px 0; text-align:center; font-size:22px; letter-spacing:-1px; color:#fff; font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

 }

@media (min-width: 993px) and (max-width: 1280px) { 

.sp-menu-bar{ width:100%; background:#0701ff; padding:10px 0;}
.sp-menu-bar > .col-search { width:40%; float:left; box-sizing:border-box;}
.sp-menu-bar > .col-menu { width:60%; float:right; box-sizing:border-box;}

.sp-menu{ float:right; padding-right:20px;}
.sp-menu ul { padding:0; margin:0; list-style:none;}
.sp-menu ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-menu ul li a { color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;padding:5px 24px; display:block;font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}
.sp-menu ul li a:hover {background:#F60;}
.sp-menu ul li a.active {color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;background:#F60;padding:5px 24px; display:block;font-weight:bold;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

.sp-number-page {}
.sp-number-page button {color:#000; font-size:13px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 5px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff; float:left; margin-right:10px; border:none;}
.sp-number-page button:hover {background:#f60;color:#fff;}
.sp-number-page ul { padding:0; margin:0; list-style:none;float:left;margin-right:10px;}
.sp-number-page ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-number-page ul li a { color:#000; font-size:13px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 5px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff;}
.sp-number-page ul li a:hover {background:#f60;color:#fff;}
.sp-number-page ul li a.active {color:#fff; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;background:#000;padding:5px 30px; display:block;font-weight:bold;font-family:"Tahoma", sans-serif;}

.sp-footer{ background:#0701ff; padding:10px 0; text-align:center; font-size:22px; letter-spacing:-1px; color:#fff; font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

}

@media (min-width: 1280px) {

.sp-menu-bar{ width:100%; background:#0701ff; padding:10px 0;}
.sp-menu-bar > .col-search { width:45%; float:left; box-sizing:border-box;}
.sp-menu-bar > .col-menu { width:55%; float:right; box-sizing:border-box;}

.sp-menu{}
.sp-menu ul { padding:0; margin:0; list-style:none;}
.sp-menu ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-menu ul li a { color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;padding:5px 40px; display:block;font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}
.sp-menu ul li a:hover {background:#F60;}
.sp-menu ul li a.active {color:#fff; font-size:18px; font-weight:normal; text-transform:uppercase; line-height:20px;background:#F60;padding:5px 40px; display:block;font-weight:bold;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

.sp-number-page {}
.sp-number-page button {color:#000; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 10px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff; float:left; margin-right:10px; border:none;}
.sp-number-page button:hover {background:#f60;color:#fff;}
.sp-number-page ul { padding:0; margin:0; list-style:none;float:left;margin-right:10px;}
.sp-number-page ul li { text-align:center; display:inline-block; margin:0 3px;}
.sp-number-page ul li a { color:#000; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;padding:5px 10px; display:block;font-weight:normal;font-family:"Tahoma", sans-serif; background:#fff;}
.sp-number-page ul li a:hover {background:#f60;color:#fff;}
.sp-number-page ul li a.active {color:#fff; font-size:14px; font-weight:900; text-transform:uppercase; line-height:16px;background:#000;padding:5px 30px; display:block;font-weight:bold;font-family:"Tahoma", sans-serif;}

.sp-footer{ background:#0701ff; padding:10px 0; text-align:center; font-size:22px; letter-spacing:-1px; color:#fff; font-weight:normal;font-family:"Conv_CodaCaption-ExtraBold", Tahoma, sans-serif;}

}