@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'thsarabun';
    src: url('fonts/thsarabunnew.eot');
    src: url('fonts/thsarabunnew.eot?iefix') format('embedded-opentype'),
         url('fonts/thsarabunnew.woff') format('woff'),
         url('fonts/thsarabunnew.ttf') format('truetype'),
         url('fonts/thsarabunnew.svg#thsarabun') format('svg');
}



html{position:relative; min-height: 100%; height: auto !important; height: 100%;}
body,html{margin:0; padding:0;}
body{font-size:20px; font-family:'thsarabun', tahoma, Verdana; background:#fff; color:#000; background:#fff; -webkit-text-size-adjust:100%;}

/* RESET CSS */
h1{color:#d40010; font:22px 'thsarabun',Tahoma; padding:5px 0 15px 0; margin:0; line-height:20px;}
p{margin:5px 0; padding:0;}
ul{margin:0; padding:0;}
img,a{border:None;}
a{text-decoration:none; color:#4f4f4f;}
select,input[type=button],input[type=submit],input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number]{-webkit-appearance:none; border-radius:0;}
input[type=button],input[type=submit],input[type=image],button{border:none; cursor:pointer;}



/* ALL CLASS */
.left{clear:both; float:left;}
.center{float:left;}
.right{float:right;}
.align-right{text-align:right;}
.width_100{width:100%;}
.underline{clear:both; float:left; border-bottom:1px solid #ccc; width:100%; padding:5px 0; margin:5px 0 10px 0; height:1px;}
.align_center{width:100%; text-align:center;}
.align_right{text-align:right;}
.button{border:1px solid #9e9e9e; color:#3e3e3e; border-radius:4px; padding:3px;}

.icon-box{background:#ededed;}
.btn-1{
	text-align:center; color:#0d8fcd;
	text-transform:uppercase; padding:5px 10px;
	border:1px solid #0d8fcd; background:none;
}
.btn-1:hover{background:#0d8fcd; color:#fff;}
.btn-2{text-align:center; font-size:12px; background:#5e5b5b; color:#fff; text-transform:uppercase; padding:10px 15px; cursor:pointer;}


.wrapper{padding:125px 0 20px 0;}

.inner{width:98%; padding:0 2%; max-width:1800px; margin:0px auto; padding:0px 0;}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////// */


/*//////////////// FORM //////////////////*/
.txt{line-height:25px; padding:0 5px;}

@keyframes blink {
	0% {
		opacity: 1;
	}

	80%{
		opacity: 1;
	}

	100%{
		opacity: 0;
	}
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////// */

#top{width:100%; z-index:500; clear:both; color:#fff; position:fixed; top:0; left:0; float:left; padding:0px 0;}
#login{float:right; padding:16px 0 0 0;}
#login a,#login span,#login img{color:#85939f; display:inline-block; vertical-align:top;}
#login a{margin-left:33px;}
#login a:hover span{text-decoration:underline;}
#login img{margin-right:5px;}
#top-1{width:100%; clear:both; color:#fff; top:0; left:0; float:left; padding:0px 0; height:60px; background:#000;}
#top-1 a{display: inline-block; vertical-align: middle;}
#top-2{padding:0px 0 0 0; background:rgba(0,0,0,0.6); width:100%; clear:both; float:left;}
#logo{padding:0; float:left; font-size:40px; color:#fff; margin:10px 0 0 0; letter-spacing:1px;}

#search-frm{margin:10px 0 0 0px; position:relative;}
#search-frm .txt{width:90px; height:40px; line-height:25px; font-size:14px; padding:0 5px; background:#fff; border:none; color:#212121; text-align: center;}
/* #search-frm .txt-3{width: 120px;} */
#btn-search{
	background:url(images/icon-search.svg) #0d8fcd no-repeat; 
	background-size: 20px;
	background-position: center;
	height:40px; line-height:25px; padding:0; width:50px; text-align:center; 
	display: inline-block;
	vertical-align: top;
	float: none;
	
}

.tel{
	padding:12px 0 0 0; font-size:26px;
	animation: 1500ms blink linear infinite;
	color: #0d8fcd;
}
.tel a{color:#fff;}

.line-btn{display: inline-block; width: 80px;}
.line-btn img{display: block; width: 100%;}


#menu-top{padding:0px 0; float:right; margin:0px 0 20px 0; font-size:22px;}
#menu-top ul{clear:both; float:left; width:100%; height:100%;}
#menu-top li{list-style:none; display:block; overflow:hidden; float:left; *display:inline; text-align:center; height:100%; border-top:6px solid #0d8fcd;}
#menu-top #menu2{border-color:#34217a;}
#menu-top #menu3{border-color:#6d0fae;}
#menu-top #menu4{border-color:#af0f8d;}
#menu-top #menu5{border-color:#e51c5e;}
#menu-top a{color:#fff; height:100%; padding:20px 21px 0 21px; vertical-align:middle; display:block; }

#menu-top a:hover, #menu-top a.active{
	
}


#container{width:100%; clear:both; float:left; padding:10px 0 0px 0;}

#slide{width:100%; overflow:hidden; float:left; margin:0; padding-top:38px; position:relative; border-bottom:2px solid #af108d;}

.tabien-menu{clear:both; float:left; width:100%; padding:30px 0 0 0; font-size:22px;}
.tabien-menu a:hover{color:#af108d;}

.tabien{margin:20px 0 0px 0; width:100%; clear:both; float:left;}

.tabien-list{width:100%; clear:both; float:left;}
.tabien-list ul{width:100%; clear:both; float:left;}
.tabien-list li{
	list-style:none; display:inline-block; float:none; 
	text-align:left; margin:0 0px 20px 20px; vertical-align:top; 
	width:130px;
}
.tabien-list li a{
	display: block;
	width: 100%;
}

.tabien-list li a img{
	width: 100%;
	display: block;
	box-sizing: border-box;
}
.btn-buy{clear:both; float:left; padding:0; background:none; margin: 0; border:none;}
.btn-buy img{display:block; clear:both; float:left;}
.btn-buyed{}
.name{padding:0; margin:0;}
.sum{padding:0px 0 6px 0; margin:0; width:100%;  clear:both; float:left; line-height:12px;}
.sum span{}


.h-box{clear:both; float:left; width:85%;}
.h-product{width:96%; display:inline-block; vertical-align:middle; background:url(images/bg-dash.jpg) center repeat-x;}
.dot1{background:url(images/bg-dot.jpg) top no-repeat; width:14px; height:9px; display:inline-block; vertical-align:middle;}
.dot2{background:url(images/bg-dot2.jpg) top no-repeat; width:14px; height:9px; display:inline-block; vertical-align:middle;}
.h-txt{display:inline-block;  padding:2px 15px; color:#0d8fcd; font-size:30px; background:#fff; margin:0 0 0 25px;}
.img-tabien,.tabien-number img{border:1px solid #0d8fcd; padding:6px 4%; width:92%; clear:both; float:left;}
.img-tabien img{width:100%; height:auto;}
.btn-buy{border-right:1px solid #0d8fcd;}
.sum{border:1px solid #0d8fcd; padding:10px 4%; color:#0d8fcd; font-size:24px; width:92%; clear:both; float:left; margin:5px 0 5px 0;}
.sum span{float:right; display:inline-block; color:#f00;}
.number {
	position: absolute;
	top: 10px;
	width: 100%;
	font-size: 30px;
	color: #000;
	text-align: center;
	left: 0;
	font-weight: bold;
}

.tabien-number {
	text-align: center;
	position: relative;
	height: 70px;
}

.sold {
	text-decoration: line-through;
	color: red !important;
}

.sold-a {
	background: url(images/sell.jpg) no-repeat left bottom !important;
	clear: both;
	display: block;
	width: 100%;
	font: 20px 'thsarabun', Tahoma, Arial;
}

.sold-a:hover {
	cursor: default;
}

.tabien-list li {
	vertical-align: top;
}

.tabien-price {
	position: absolute;
	top: 37px; left:0;
	font-size: 26px;
	text-align: center;
	width: 100%;
	color: red;
	font-weight: bold;
}


.tabien-filter{position:relative; z-index:1; width:180px; height:22px; right:0px; top:0px; margin:13px 0px 0px 0; padding:0; background:url(images/i-type.png) right no-repeat #fff; border:1px solid #ddd;}
.tabien-filter .select{
	display:block; overflow:hidden; position:relative; z-index:1;
	width:100%; margin:0px 5px 0 0;
   	height:26px; background:url(images/select-box.jpg) right; float:left;
}
.tabien-filter select{width:100%; height:100%; align-items:center; float:left; background:#444; font-size:14px; border:none;  cursor:pointer; opacity:0; color:#fff; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position:absolute; top:0px; left:0px; z-index:10;}
.tabien-filter select option{padding:6px 10px; font-size:13px;}
.tabien-filter .fake-txt{position:absolute; top:7px; line-height:12px; left:0; color:#0d8fcd; z-index:9; width:90%; padding:0 5%; text-align:left; font-size:18px;}



/* DOCUMENT */
.box-detail{width:93%; background:#fff; padding:10px 2%; clear:both; float:left; text-align:left; font-size:22px; border-left:5px solid #888; border-top:1px solid #888; border-bottom:1px solid #888; margin-bottom:20px;}
.box-detail .p, .box-detail p{clear:both; float:left; width:100%; text-align:left;}
.box-detail img{clear:both; margin:10px 0 20px 0; display:block;}
.h-detail{clear:both; float:left; width:100%;}
#download-doc{position:absolute; right:15px; top:20px;}
.sub-page .h-box{width:100%;}
.sub-page .h-product{width:97.5%;}
.h-detail{font-size:24px; font-weight:bold;}

.number-sum a{display:inline-block; line-height:24px; padding:3px 10px;}
.number-sum a:hover{
	color:#fff; background:#0d8fcd;
}
.num-list{line-height:24px; padding:0 0 20px 0; cursor:pointer;}
.num-select{color:#fff; background:#0d8fcd; padding:10px 2%; width:96%; margin:0 0 15px 0;}

.t-select img{display:inline-block; clear:none; border:1px solid #0d8fcd; padding:7px; margin:0;}

/* CONTACT PAGE */
.frm{}
.frm .p, .frm p{clear:both; float:left; padding:0 0 25px 0; margin:0; width:100%;}
.frm label{clear:both; float:left; width:120px; font-size:24px;}
.frm .txt, .frm textarea{background:#fff; border:1px solid #ccc; font-size:13px; padding:0 5px;  color:#444; line-height:25px;}
.frm .txt-1{}
.frm .txt-2{width:360px; height:32px;}
.frm .textarea-2{width:360px; height:90px;}
#frm-contact{width:45%; clear:both; float:left; padding:20px 0 0 0;}
#btn-contact{padding:5px 20px; font-size:16px;}
.contact-detail{float:left; width:45%; padding:10px 0 0 3%; font-size:30px;}


.short-detail img{float:left;}
.s-detail{float:left; width:50%;}
.s-detail p{margin:0 0 5px 0; padding:0; line-height:22px;}
.s-h{color:#f00; font-size:24px;}
.frm .t-select{padding:0;}
.contact-tel a, .contact-tel span{display:inline-block; vertical-align:middle;}
.contact-tel img{margin:0 5px 0 0; width:25px; display:inline-block; vertical-align:middle;}

#frm-buy .s-detail{width:70%;}
#frm-buy .s-detail .s-p{margin:10px 0 0 0;}
#frm-buy .tabien-number{display:block; float:left; height:auto;}


/*//////////// FOOTER ////////////*/
#footer{width:100%; clear:both; float:left; background:url(images/bg-footer.jpg) #000 no-repeat; font-size:18px; background-size:100%; color:#fff; padding:15px 0 10px 0; margin:20px 0 0 0;}
#footer a{color:#fff;}
.copyright{width:60%; float:left;}
.copyright div{width:100%;}
.fb-like-share{width:30%; float:right; text-align:right;}

.icon-contact-foot{
	position: fixed;
	z-index: 11;
	bottom: 70px;
	right: 10px;
}
.icon-contact-foot a{
	display: block;
	background: #000;
	padding: 10px;
	border-radius: 50%;
	overflow: hidden;
	margin: 8px 0;
}

.icon-contact-foot a.tel-icon{
	background: #0d8fcd;
}
.icon-contact-foot a.ig-icon{
	background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

.icon-contact-foot a.ig-icon span{
	mask-image:url('images/icon-ig.svg');
	-webkit-mask-image:url('images/icon-ig.svg');
}
.icon-contact-foot a.tel-icon span{
	mask-image:url('images/icon-phone.svg');
	-webkit-mask-image:url('images/icon-phone.svg');
}

.icon-contact-foot a span{
	display: block;
	width: 30px;
	height: 30px;
	mask-repeat: no-repeat;
	-webkit-mask-repeat:no-repeat;
	mask-size:100%;
	-webkit-mask-size:100% 100%;
	background-color:#fff;
}

#back-top{
	display:none; position:fixed; bottom:20px; 
	cursor:pointer; right:10px; z-index:300;
	background: #000;
	padding: 10px;
	overflow: hidden;
	border-radius: 50%; 
}

#back-top span{
	display: block;
	width: 30px;
	height: 30px;
	mask-repeat: no-repeat;
	-webkit-mask-repeat:no-repeat;
	mask-size:100%;
	-webkit-mask-size:100% 100%;
	background-color:#fff;
	mask-image:url('images/icon-up.svg');
	-webkit-mask-image:url('images/icon-up.svg');
}