@import url('fonts/thaisansneue/stylesheet.css');


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* Main Style */
body{ font-family: 'thaisans_neueregular', sans-serif; font-size: 24px; color: #fff; background: url('images/pillars_bg.jpg') left center no-repeat fixed; background-size: 100% 100%; word-wrap:break-word; }
p, h1, h2, h3, h4, li, a, a:visited{ font-family: 'thaisans_neueregular', sans-serif; font-size: 24px; color: #fff; }
a{ text-decoration: none; }
a:hover{ color: #ccc; }
p{ margin: 3px 0; }
h1{ font-size: 1.8em; margin-bottom: 20px; padding-bottom: 10px; border-bottom: dashed 1px #fff; }
h3{ font-size: 1.4em; }
strong{ font-weight: bold; }

.col-main{ width: 1150px; padding: 0 15px; margin: 100px auto 0; }
.col-left{ float: left; width: 400px; min-height: 200px; }
.col-right{ float: left; width: 700px; min-height: 360px; margin-left: 50px; }
.item-list{ width: 640px; margin: 0 auto; }
.item-list li{ display: inline-block; width: 140px; height: 135px; margin: 10px 5px; text-align: center; vertical-align: top; }
.item-list p{ color: #fff; font-weight: bold; }
.item-list img{ border-radius: 10px; width: 76px; height: 76px; padding: 5px; }
.item-view{ width: 640px; min-height: 320px; margin: 0 auto; margin-bottom: 60px; }
.item-view img{ max-width: 80%; }
.item-view ul{ margin-left: 20px; }
.item-view li{ list-style: circle inside; }
.item-list img:hover{ background: #fff; }
.item-back a{ color: #fc0; }
.item-back a:hover{ color: #fff; }
.footer1{ margin-top: 170px; }
.footer2{ clear: both; margin-top: 50px; padding: 20px 0 10px; text-align: center; border-top: solid 1px #fff; display: none; }
.clearfix, .clearfix:after{ clear: both; }
.clearfix:after,.clearfix:before{display:table;content:" "}
.text-center{ text-align: center; }

@media (max-width: 1150px){
    .col-main, .col-left, .col-right{ width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .col-left, .col-right{ clear: both; }
    .col-left{ text-align: center; margin-top: 30px; }
    .item-list, .item-view{ width: 750px; }
    .footer1{ display: none; }
    .footer2{ display: block; }
}

@media (max-width: 992px){
    .item-list, .item-view{ width: 620px; }
}

@media (max-width: 768px){
    .item-list, .item-view{ width: 470px; }
}

@media (max-width: 480px){
    .item-list, .item-view{ width: 320px; }
}

.product-list li{ list-style: none; float: left; margin: 5px; width: 100%; max-height: 600px; text-align: center; overflow: hidden; }
.product-list li img{ max-width: 100%; }

.pricing-table{ margin-top: 20px; }
.pricing-table .plan{ width: 300px; float: left; margin: 10px; }