@import url('/fonts/fonts.min.css');
body{font-family:Pridi,Tahoma,sans-serif;padding:0;margin:0;font-weight:300}
u{text-decoration:underline}
i{font-style:italic}
em{display:inline}
img{border:0;vertical-align:middle}
a{font-family:Kanit,sans-serif;cursor:pointer;color:#000;text-decoration:none;display:inline-block;text-indent:0}
a:hover{text-decoration:none;color:#b00d19}
a img{margin:0 auto;display:inline-block;text-decoration:none}
small a, small a:hover{text-decoration:underline}
div,p,fieldset,form,h1,h2,h3,h4,h5,table,li{padding:0;margin:0}
h1,h2,h3,h4,h5,h6,strong,b{font-weight:500;text-indent:0}
h6,h5,h4{font-size:1em}
h3{font-size:1.1em}
h2{font-size:1.15em}
h1{font-size:1.3em}
form{display:inline-block;width:100%}
table{border-collapse:collapse}
input,textarea,label,button{padding:2px;font-size:1em}
select,textarea{border:1px solid #809FBC}
select option{margin:2px}
select > optgroup{padding-left:2px;font-weight:700}
optgroup > option{padding-left:2px}
input[type="text"],input[type="password"],input[type="email"],input[type="tel"],textarea{padding:1%;border:1px solid #809fbc}

.hint{color:red;font-size:.8em}
.u{text-decoration:underline}
.b{font-weight:400}
.clear{clear:both;height:0}
.hide{display:none}
.bg-f0{background-color:#f0f0f0}

/* Start Layout */
#layout{width:100%;background-color:#e6e6e6;min-width:360px;color:#000;font-weight:normal;font-size:1em;line-height:1.7em}
#container{position:relative;max-width:1200px;background-color:#fff;margin:0 auto}

/* Header */
header{box-sizing:border-box; width:100%;padding:1.5% 2%;background-color:#fff;position:relative}
header::before{
	content:' ';display:inline-block;width:100%;height:100%;
	background-image:url('/themes/default/common/images/header-top-right.png');	
	position:absolute;background-repeat:no-repeat;top:0;right:0;
	background-position:right;background-size:contain;
	z-index:0;opacity:.4;
}
header ul{padding:0;margin:0;list-style:none;width:100%;box-sizing:border-box;position:relative;z-index:2}
header ul li{display:inline-block;vertical-align:middle}
header > ul > li:first-child{width:18%;padding-left:2%}
header > ul > li:last-child{width:74%;padding-right:4%;text-align:right}

#mobile-menu{display:none;position:absolute;top:14px;right:14px;cursor:pointer}

/* Header Menu */
#menu li:first-child{display:none}
#menu li:not(:last-child):not(:first-child)::before{
	content:' | ';float:right;margin:0 20px;font-size:.9em;margin-top:2px;
}
#menu li a{font-family:Kanit;font-size:inherit;color:#000;font-weight:400}
#menu li a:hover, #menu li a.current{color:#b00d19}

@media screen and (max-width:900px){
	header{padding:1% 0;font-size:.86em}
	header > ul > li:first-child{width:29%;padding-left:1%}
	header > ul > li:last-child{width:68%;padding-right:2%}
	header > ul > li:first-child img{height:50px}
	#menu li:not(:last-child)::before{margin:0 10px}
}
@media screen and (max-width:800px){
	header{position:fixed;z-index:2;padding-left:0;border-bottom:2px solid #ccc}
	header::before{display:none}
	header > ul > li:last-child{width:unset}	
	
	#mobile-menu{display:block}
	#mobile-menu > span{display:block;position:relative;z-index:2}
	#mobile-menu > span::before{
		content:' ';width:40px;height:40px;
		background-image:url('/themes/default/common/images/header-hamburger-menu.png');	
		background-repeat:no-repeat;display:block;
		background-size:contain;
	}
	#mobile-menu > span.opened{display:none}
	
	
	#menu{display:none;padding:0;position:absolute;z-index:2;background-color:#fff;right:0;top:-6px;width:50%;text-align:left;background-color:#b00d19;opacity:.9}
	#menu li{display:block;width:auto;text-align:left;padding:0 8%}
	#menu li:not(:last-child):not(:first-child)::before{display:none}
	#menu li:first-child{display:block;text-align:right}	
	#menu li:hover{background-color:#000}
	#menu li:hover a{color:#fff}
	#menu li a, #menu li a.current{color:#fff;display:block;padding:6% 0;border-bottom:1px solid #bc555d;font-weight:400}
	#menu li:first-child a{padding:10% 0}	
}

/* Top banner */	
#topbanner img{width:100%;height:auto}
@media screen and (max-width:600px){
	#topbanner{position:relative;top:60px}
}

/* Main */
main{position:relative}
@media screen and (max-width:600px){
	main{top:60px}
}

/* Footer */
footer{position:relative;background-color:#333333;padding:4%;color:#fff}
footer ul{padding:0;margin:0;list-style:none}

footer .company{margin:0 auto;padding:1%;font-weight:200}
footer .company li{display:inline-block;vertical-align:top}

footer .company > ul{margin:0 auto;width:60%}
footer .company > ul > li:first-child{box-sizing:border-box;padding:3%;width:15%;background-color:#fff}
footer .company > ul > li:first-child img{width:100%;height:auto}
footer .company > ul > li:last-child{box-sizing:border-box;margin-left:2%;width:80%}
footer .company > ul > li:last-child > div:first-child{margin-bottom:4px}
footer .company > ul > li:last-child > div:first-child a{color:#fff;font-size:1.5em;font-weight:500}
footer .company > ul > li:last-child > div:first-child a > span{font-size:.90em;font-weight:300;font-family:Pridi,Tahoma,sans-serif}
footer .company > ul > li:last-child > div:nth-child(2){margin-bottom:8px;font-size:1em}
footer .company > ul > li:last-child > div:nth-child(2) a{color:#fff}
footer .company > ul > li:last-child > div:nth-child(3){font-size:.94em}
footer .company > ul > li:last-child > div:nth-child(3) span{display:inline-block}
footer .company > ul > li:last-child > div:nth-child(3) span:first-child::before{
	content:'เลขที่ ';
}
footer .company > ul > li:last-child > div:nth-child(3) span:nth-child(2)::before{
	content:' จ.';
	padding-left:6px;
}
footer .company > ul > li:last-child > div:nth-child(3) span:nth-child(3)::before{
	content:' ';
	padding-left:6px;
}
footer .company > ul > li:last-child > div:last-child{color:#fff;font-size:.94em}
footer .company > ul > li:last-child > div:last-child a{color:inherit;text-decoration:underline}
footer .company > ul > li:last-child > div:last-child li{width:50%}

footer .menu{margin-top:2%;text-align:center;font-weight:300;font-size:.9em}
footer .menu li{display:inline-block;vertical-align:top;text-align:center}
footer .menu li:not(:last-child)::before{
	content:' | ';float:right;margin:0 20px;font-size:.9em;margin-top:2px;padding:0.4em 0;
}
footer .menu li a{color:inherit;font-size:inherit;padding:0.4em 0.1em;display:inline-block}


footer .copyright{font-family:Kanit;padding:1% 0;color:#000;font-weight:300;color:#fff}
footer .copyright::before{
	content:' ';border-bottom:6px solid #b00d19;
	display:block;margin:0 auto;margin-bottom:1%;padding-top:1%;
}
footer .copyright::after{
	content:' ';border-bottom:2px solid #ccc;
	display:block;width:94%;margin:0 auto;margin-bottom:2%;padding-top:4%;
}
footer .copyright ul{padding:0 4%;box-sizing:border-box}
footer .copyright li{display:inline-block;width:50%}
footer .copyright li:first-child{font-size:.9em;font-weight:200;width:80%}
footer .copyright li:last-child{text-align:right;width:20%}
footer .copyright li span{display:inline-block;vertical-align:super;font-family:"Times New Roman", Times, serif;font-size:1.2em}


footer .condition{color:#adadad;font-size:.82em;text-align:center}
footer .condition li{display:inline-block}
footer .condition li a{color:inherit;font-size:inherit}
footer .condition li a::after{
	content:' ';border-bottom:1px solid #b00d19;
	display:block;width:90%;margin:0 auto;
}
footer .condition li:nth-child(3)::before, footer .condition li:last-child::before{
	content:' | ';float:left;margin:0 8px;font-size:inherit;
}

footer .cookie{font-family:Kanit,serif;padding-bottom:2%;border-bottom:2px solid #ccc;margin-bottom:2%}
footer .cookie > div:first-child{color:#fff;margin-bottom:1%}
footer .cookie > div:last-child{font-weight:200;font-size:.82em;letter-spacing:0.8px}

@media screen and (max-width:1000px){
	footer .company > ul{width:80%}
}
@media screen and (max-width:800px){
	footer{padding-top:6%}
	footer .company > ul{width:90%}
	footer .menu li a{font-size:.9em;padding:0.1em}
	footer .company > ul > li:first-child{padding:3%;width:22%}
	footer .company > ul > li:last-child{margin-left:3%;width:72%}
	footer .company > ul > li:last-child > div:nth-child(2){font-size:.86em}
	footer .company > ul > li:last-child > div:nth-child(3){font-size:.6em}
	footer .company > ul > li:last-child > div:last-child{font-size:.76em}
	footer .copyright::before{margin-top:2%;margin-bottom:3%}
}
@media screen and (max-width:600px){
	footer{top:60px}
	footer .company > ul{width:100%}
	footer .company > ul > li:first-child{display:none}
	footer .company > ul > li:last-child > div:first-child a > span{font-size:.8em}	
	footer .company > ul > li:last-child{display:block;margin-left:0;width:auto}
	footer .company > ul > li:last-child > div:nth-child(2){font-size:.96em}
	footer .company > ul > li:last-child > div:nth-child(3), footer .company > ul > li:last-child > div:last-child{font-size:.86em}
	footer .company > ul > li:last-child > div:last-child li{margin-top:2%}
	footer .copyright ul{padding:0 1%}
	footer .copyright li:first-child img{display:none}
	footer .copyright li:first-child{font-size:.8em}
	
	footer .menu::before{
		content:'เว็บไซต์เดอะรูม 460';display:block;border-top:2px solid #ccc;padding:2% 0;
		padding-left:4%;text-decoration:underline;text-align:left;
	}
	footer .menu ul{padding-left:4%;text-align:left}
	footer .menu li{margin:1%;text-align:left;width:30%;min-width:150px}
	footer .menu li:not(:last-child)::before{content:none}
	footer .menu li a{display:block}
	footer .menu li a::before{content:' ';border-left:2px solid #ccc;padding-right:6px;margin-left:4px}	
		
	footer .condition{margin:4% 2%}
	footer .condition li{font-size:.88em}
	footer .condition li:first-child{display:none}
	footer .cookie{margin-top:4%}
}

footer .friend{font-family:Kanit,serif;padding-top:2%}
footer .friend ul{list-style:none;padding:0;margin:0}
footer .friend ul li{display:inline-block;font-weight:200;font-size:.82em}
footer .friend ul li:not(:first-child){margin-left:1%}
footer .friend ul li a{color:inherit;font-size:inherit}

/* Share */
.share{padding:0;margin:0;list-style:none;float:right;width:200px;white-space:nowrap;font-weight:300;font-size:.9em;font-family:Kanit;position:relative}
.share::after{content:' ';clear:both;display:block}
.share li{display:inline-block;vertical-align:middle}
.share li a{display:block}
.share li:not(:first-child){margin-left:6px}
.share li:first-child{padding:0 10px 0 4px;margin:0 6px;border-right:1px solid #000}
.share li:not(:first-child) a::before{
		content:' ';width:40px;height:40px;display:block;
		background-repeat:no-repeat;background-size:cover;
}
.share li:nth-child(2) a::before{
	background-image:url('/themes/default/common/images/icon/share-facebook.png');
}
.share li:nth-child(3) a::before{
	background-image:url('/themes/default/common/images/icon/share-twitter.png');	
}
.share li:nth-child(4) a::before{
	background-image:url('/themes/default/common/images/icon/share-line.png');		
}
@media screen and (max-width:600px){
	.share{width:160px}
	.share li:first-child{font-size:.86em}
	.share li:not(:first-child) a::before{width:30px;height:30px;}
}

/* Breadcrumb */
nav{font-weight:200;position:relative;color:#000;padding:1% 4%;line-height:1.8em;font-size:.9em}
nav ol{list-style:none;padding:0;margin:0;overflow-x:hidden}
nav ol li{box-sizing:border-box;white-space:nowrap;display:inline-block;margin:0.5% 0;vertical-align:middle}
nav ol li:not(:first-child)::before{content:'\00BB';display:inline-block;color:#454545;padding:0 4px;vertical-align:middle;line-height:normal}
nav ol li a{font-weight:inherit;font-size:inherit;color:#0e1427;text-decoration:none;display:inline-block;white-space:nowrap;vertical-align:middle}
nav ol li a.current{color:#b00d19}
nav ol li a span{display:inline-block}
@media screen and (max-width:600px){
	nav{top:60px}
	nav ol li:nth-child(3) a span{vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
}

/* Invitation */
#invitation{padding:4% 6%;font-weight:300}
#invitation > div{margin-bottom:4%;text-align:center}
#invitation > div::before{
	content:open-quote;font-size:2em;color:#b00d19;font-weight:600;padding-right:1%;
	display:inline-block;line-height:18px;
}
#invitation > div::after{
	content:close-quote;font-size:2em;color:#b00d19;font-weight:600;padding-left:1%;
	display:inline-block;line-height:18px;
}
#invitation ul{list-style:none;padding:0;margin:0;}
#invitation ul li{display:inline-block;box-sizing:border-box;width:32%;padding:0}
#invitation ul li:nth-child(2){margin:0 2%}
#invitation ul li > div{display:inline-block;border:2.5px solid #000;min-width:200px;font-size:.92em;font-weight:400;position:relative;min-height:30px;vertical-align:middle;line-height:2em;box-sizing:border-box}
#invitation ul li > div a{display:inline;color:#b00d19}
#invitation ul li:first-child > div{text-align:center;background-color:#000;color:#fff}
#invitation ul li:nth-child(2) > div::after{
	content:' ';width:38px;height:32px;
	background-image:url('/themes/default/common/images/icon/icon-invitation-line.png');	
	background-repeat:no-repeat;display:inline-block;vertical-align:middle;
	background-position:center;
	background-size:contain;background-color:#000;position:absolute;top:-2px;right:-2px;
}
#invitation ul li:not(:first-child) > div{text-indent:12px}
#invitation ul li:nth-child(3) > div::after{
	content:' ';width:38px;height:32px;
	background-image:url('/themes/default/common/images/icon/icon-invitation-phone.png');	
	background-repeat:no-repeat;display:inline-block;vertical-align:middle;
	background-position:center;
	background-size:contain;background-color:#000;position:absolute;top:-2px;right:-2px;
}
@media screen and (max-width:800px){
	#invitation{padding:4%}
	#invitation ul li{width:30%}
	#invitation ul li:nth-child(2){margin:0 5%}
	#invitation ul li > div{font-size:.82em;min-width:150px}
	#invitation > div{margin-bottom:4%}
	#invitation ul li > div{width:100%;font-size:.82em}
	#invitation ul li:nth-child(2) > div::after,
	#invitation ul li:nth-child(3) > div::after{
		width:32px;height:30px;
	}
}
@media screen and (max-width:600px) {
	#invitation{padding:6% 4%}
	#invitation ul li{display:block;width:100%}
	#invitation ul li > div{text-align:center}
	#invitation ul li:nth-child(2){margin:4% 0}
}