/*  ----- Contact Us (For PC Mode)  ----- */

#MainContent_Box, #MainContent_Box2 {
	overflow:hidden;
}

@media only screen and (max-width:1187px) {

	#contact_detail {
		width:45%;
	}
	
	#contact_message {
		width:45%;
	}
	
}

@media only screen and (max-width:800px) {

	#contact_detail {
		display:block;
		margin-left:auto;
		margin-right:auto;
		width:98%;
	}
	
	#contact_message {
		display:block;
		margin-left:auto;
		margin-right:auto;		
		width:98%;
	}
	
}

@media only screen and (max-width:500px) {

	#contact_detail {
		width:99%;
	}
	
	#contact_message {	
		width:99%;
	}

	.contact_data {
		margin-left:0px;	
	}
	
}





/* -------------------- (034) - PdtBox -------------------- */
.pdtgbox {
	width:100%;
	height:553px;
	margin-top:40px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	/* background:#ffffff; */
	border-top:#f31349 solid 2px;
	border-left:solid 1px;
	border-right:solid 1px;
	border-bottom:solid 1px;
	box-sizing:border-box;
}

.pdtgbox_menu {
	float:left;
	width:200px;
	height:553px;	
	box-sizing:border-box;
	border-right:solid 1px;
}

.pdtgbox_menu_1 {
	float:left;
	width:200px;
	height:100px;	
	box-sizing:border-box;
	border-bottom:solid 1px;
	transition: box-shadow 0.3s;
}

.pdtgbox_menu_1:hover {
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.pdtgbox_menu_11 {
	display:table-cell;
	padding:10px;
	width:180px;
	height:99px;	
	box-sizing:border-box;
	vertical-align:middle;
	font-family: thaisansneue,Tahoma;
    font-size: 2em;
	text-align:center;
	color:#f31349;
}

.pdtgbox_menu_12 {
	display:table-cell;
	width:20px;
	height:99px;	
	box-sizing:border-box;
	vertical-align:middle;
	font-size: 2em;
	color:#bbbbbb;
}

.pdtgbox_menu_2 {
	float:left;
	width:200px;
	height:433px;	
	box-sizing:border-box;
	padding:10px 10px 10px 0px;
	overflow:auto;
}

.pdtgbox_menu_2 a {
	display:block;
	width:100%;	
	padding-top:12px;
	padding-bottom:12px;
	padding-left:15px;
	padding-right:15px;
	font-family: Tahoma;
	font-size: 1.1em;
	color:#555555;
	text-decoration:none;
	overflow:hidden;
}

.pdtgbox_menu_2 a:hover {
	color:#ff6600;
}

.pdtgbox_picoutside {
	float:left;
	width:400px;
	height:550px;	
}

.pdtgbox_pic {
	box-sizing:border-box;
	width:400px;
	height:550px;	
}

.pdtgbox_thumbnail {
	margin-left:601px;
	box-sizing:border-box;
	height:550px;	
}

.pdtgbox_thumbnailnoleft {
	margin-left:401px;
	box-sizing:border-box;
	height:550px;	
}

.pdtgbox_thumb {
	float:left;
	padding:9px;
	box-sizing:border-box;
	width:33.33%;										/*  width:201px;  */
	height:275px;	
	border-right:solid 1px;
	border-bottom:solid 1px;
	transition: box-shadow 0.3s;
}

.pdtgbox_thumb:hover {
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.pdtgbox_thumb:nth-child(4), .pdtgbox_thumb:nth-child(5), .pdtgbox_thumb:nth-child(6) {
	border-bottom:none;
}

.pdtgbox_thumb:nth-child(3), .pdtgbox_thumb:nth-child(6) {
	border-right:none;
}

.pdtgbox_thumb a {
	color:#555555;
	text-decoration:none;
}

.pdtgbox_thumb a:hover {
	color:#ff6600;
}


.pdtgbox_thumbnoleft {
	float:left;
	padding:9px;
	box-sizing:border-box;
	width:25%;										/*  width:201px;  */
	height:275px;	
	border-right:solid 1px;
	border-bottom:solid 1px;
	transition: box-shadow 0.3s;
}

.pdtgbox_thumbnoleft:hover {
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.pdtgbox_thumbnoleft:nth-child(5), .pdtgbox_thumbnoleft:nth-child(6), .pdtgbox_thumbnoleft:nth-child(7), .pdtgbox_thumbnoleft:nth-child(8) {
	border-bottom:none;
}

.pdtgbox_thumbnoleft:nth-child(4), .pdtgbox_thumbnoleft:nth-child(8) {
	border-right:none;
}

.pdtgbox_thumbnoleft a {
	color:#555555;
	text-decoration:none;
}

.pdtgbox_thumbnoleft a:hover {
	color:#ff6600;
}

.pdtgbox_thumb_name {
	width:100%;
	height:55px;
	margin-bottom:15px;
	overflow:hidden;
	box-sizing:border-box;
	padding-top:19px;
	font-family: Tahoma;
	font-size: 1.1em;	
	text-align:center;
	word-wrap:break-word;
}

.pdtgbox_thumb_pic {
	max-width:100%;
	text-align:center;
}


@media only screen and (max-width:1115px) {

	.pdtgbox {
		height:468px;
	}
	
	.pdtgbox_menu {
		height:467px;
	}
	
	.pdtgbox_menu_2 {
		height:367px;		
	}
	
	.pdtgbox_picoutside {
		width:338px;
		height:465px;
	}
	
	.pdtgbox_pic {
		width:338px;
		height:465px;
	}	
	
	.pdtgbox_thumbnail {
		margin-left:538px;
	}

	.pdtgbox_thumbnailnoleft {
		margin-left:338px;
	}
	
	.pdtgbox_thumb {
		height:232px;
	}

	.pdtgbox_thumbnoleft {
		padding-top:0px;
		height:232px;
	}
	
}

@media only screen and (max-width:1024px) {
	
	.pdtgbox {
		height:523px;
	}
	
	.pdtgbox_menu {
		display:none;
	}
	
	.pdtgbox_picoutside {
		width:378px;
		height:520px;
	}
	
	.pdtgbox_pic {
		width:378px;
		height:520px;
	}		

	.pdtgbox_thumbnail {
		margin-left:378px;
	}	

	.pdtgbox_thumbnailnoleft {
		margin-left:178px;
		overflow:hidden;
	}	
	
	.pdtgbox_thumb {
		height:260px;
	}	
	
	.pdtgbox_thumbnoleft:nth-child(3), .pdtgbox_thumbnoleft:nth-child(6) {
		border-right:none;
	}

	.pdtgbox_thumbnoleft:nth-child(4) {
		border-right:solid 1px;
		border-bottom:none;
	}

	.pdtgbox_thumbnoleft:nth-child(5), .pdtgbox_thumbnoleft:nth-child(6), .pdtgbox_thumbnoleft:nth-child(7), .pdtgbox_thumbnoleft:nth-child(8) {
		border-bottom:none;
	}

	.pdtgbox_thumbnoleft:nth-child(7), .pdtgbox_thumbnoleft:nth-child(8) {
		display:none;
	}
	
	.pdtgbox_thumbnoleft {
		width:33.33%;
		padding-top:9px;
		height:260px;
	}
		
}

@media only screen and (max-width:852px) {

	.pdtgbox {
		height:449px;
	}
	
	.pdtgbox_picoutside {
		width:324px;
		height:445px;
	}

	.pdtgbox_pic {
		width:324px;
		height:445px;
	}		

	.pdtgbox_thumbnail {
		margin-left:324px;
		height:220px;
	}	

	.pdtgbox_thumbnailnoleft {
		margin-left:324px;
	}	
	
	.pdtgbox_thumb {
		height:220px;		
	}
	
	.pdtgbox_thumbnoleft {
		height:220px;		
	}
		
}

@media only screen and (max-width:752px) {
	
	.pdtgbox {
		height:auto;
	}	
	
	.pdtgbox_picoutside {
		display:none;
	}
	
	.pdtgbox_pic {
		display:none;
	}		
	
	.pdtgbox_thumbnail {
		margin-left:0px;
	}

	.pdtgbox_thumbnailnoleft {
		margin-left:0px;
	}	
	
	.pdtgbox_thumb {
		height:280px;
	}

	.pdtgbox_thumbnoleft {
		width:33.33%;
		height:278px;
		overflow:hidden;
	}

	.pdtgbox_thumbnoleft:nth-child(7), .pdtgbox_thumbnoleft:nth-child(8) {
		display:none;
	}
	.pdtgbox_thumbnoleft:nth-child(3), .pdtgbox_thumbnoleft:nth-child(6) {
		border-right:none;
	}

	.pdtgbox_thumbnoleft:nth-child(8) {
		border-right:none;
	}

	.pdtgbox_thumbnoleft:nth-child(4) {
		border-bottom:none;
	}
	
}

@media only screen and (max-width:538px) {
	
	.pdtgbox_thumbnailnoleft {
		width:100%;
		height:auto;
	}	
	
	.pdtgbox_thumb {
		height:230px;
	}

	.pdtgbox_thumbnoleft {
		height:230px;
	}
	
}

@media only screen and (max-width:467px) {

	.pdtgbox_picoutside {
		width:100%;
		display:block;
		height:auto;
	}

	.pdtgbox_pic {
		max-width:100%;
		margin-left:auto;
		margin-right:auto;
		display:block;
		height:auto;
	}
	
	.pdtgbox_thumb {
		width:50%;
		height:255px;
	}

	.pdtgbox_thumbnoleft {
		width:50%;
		height:255px;
	}
	
	.pdtgbox_thumb:nth-child(1), .pdtgbox_thumb:nth-child(5) {
		border-left:none;
	}	
	
	.pdtgbox_thumb:nth-child(2), .pdtgbox_thumb:nth-child(4), .pdtgbox_thumb:nth-child(6) {
		border-right:none;
	}

	.pdtgbox_thumb:nth-child(3) {
		border-left:none;
		border-right:solid 1px;
	}
	
	.pdtgbox_thumb:nth-child(4) {
		border-bottom:solid 1px;
	}

	.pdtgbox_thumbnoleft {
		width:50%;
	}

	.pdtgbox_thumbnoleft:nth-child(2), .pdtgbox_thumbnoleft:nth-child(6) {
		border-right:none;
	}
	
	.pdtgbox_thumbnoleft:nth-child(3) {
		border-right:solid 1px;
	}
	
	.pdtgbox_thumbnoleft:nth-child(4) {
		border-right:none;
		border-bottom:solid 1px;
	}
	
}

@media only screen and (max-width:350px) {

	.pdtgbox_picoutside {
		width:100%;
		height:398px;
		display:block;
	}

	.pdtgbox_pic {
		width:100%;
		height:398px;
		display:block;
	}
	
	.pdtgbox_thumb {
		width:100%;
		height:360px;
	}

	.pdtgbox_thumbnoleft {
		width:100%;
		height:340px;
		border:none;
		border-bottom:solid 1px;
	}
	
	.pdtgbox_thumb:nth-child(1), .pdtgbox_thumb:nth-child(2), .pdtgbox_thumb:nth-child(3), .pdtgbox_thumb:nth-child(4), .pdtgbox_thumb:nth-child(5), .pdtgbox_thumb:nth-child(6), .pdtgbox_thumb:nth-child(7), .pdtgbox_thumb:nth-child(8) {
		border-right:none;
	}
	
	.pdtgbox_thumbnoleft:nth-child(1), .pdtgbox_thumbnoleft:nth-child(2), .pdtgbox_thumbnoleft:nth-child(3), .pdtgbox_thumbnoleft:nth-child(4), .pdtgbox_thumbnoleft:nth-child(5), .pdtgbox_thumbnoleft:nth-child(6), .pdtgbox_thumbnoleft:nth-child(7), .pdtgbox_thumbnoleft:nth-child(8) {
		border-right:none;
	}
	
}










/* -------------------- PdtThumb -------------------------------- */

@media only screen and (max-width:970px) {

	.pdtt {
		width:33.33%;
	}

	.pdttm {
		width:25%;
	}

	.pdtts {
		width:20%;
	}
	
}

@media only screen and (max-width:690px) {

	.pdtt {
		width:50%;
	}

	.pdttm {
		width:33.33%;
	}

	.pdtts {
		width:25%;
	}
	
}

@media only screen and (max-width:535px) {

	.pdtts {
		width:33.33%;
	}
	
}

@media only screen and (max-width:490px) {

	.pdttm {
		width:50%;
	}

	.pdtts {
		width:33.33%;
	}
	
}

@media only screen and (max-width:387px) {

	.pdtt {
		width:98%;
	}

	.pdttm {
		width:50%;
	}

	.pdtts {
		width:50%;
	}
	
}

@media only screen and (max-width:315px) {

	.pdttm {
		width:98%;
	}

	.pdtts {
		width:50%;
	}
	
}








/* -------------------- PdtDetail (Attribute) -------------------- */
@media only screen and (max-width:720px) {

	.pdtattr_box {
		width: 45%;
	}

}

@media only screen and (max-width:432px) {

	.pdtattr_box {
		width: 95%;
	}

}




/* ----- Article Detail ----- */

.article_box {
	width:33.33%;
}

#arc_content_r .article_box_r {
    	width: 100%;
}

@media only screen and (max-width:1187px) {

	#arc_l {
		width: 60%;
	}

	#arc_r {
		width: 35%;
	}

	.article_box {
		width:33.33%;
	}

	#arc_l .article_box {
		width:49%;
	}
	#arc_r .article_box {
		width:100%;
	}

}

@media only screen and (max-width:919px) {

	#arc_l {
		clear:both;
		width: 100% !important;
		padding-right:2%;
		padding-left:2%;
		box-sizing:border-box;
	}

	#arc_r {
		clear:both;
		width: 100%;
		padding-right:2%;
		padding-left:2%;
		box-sizing:border-box;
	}

	.article_box {
		width:50%;
	}

	#arc_l .article_box {
		width:50%;
	}
	#arc_r .article_box {
		width:50%;
	}

}

@media only screen and (max-width:623px) {

	.article_box {
		width:100%;
		float:none;
		margin-left:auto;
		margin-right:auto;
		height:400px;
	}

	#arc_l .article_box {
		width:100%;
		float:none;
		margin-left:auto;
		margin-right:auto;
		height:400px;
	}

	#arc_r .article_box {
		width:80%;
		float:none;
		margin-left:auto;
		margin-right:auto;
		height:400px;
	}

}

@media only screen and (max-width:427px) {

	.article_box {
		width:100%;
		height:370px;
	}

	#arc_l .article_box {
		width:100%;
		height:370px;
	}

	#arc_r .article_box {
		width:100%;
		height:370px;
	}

}






/* ----- Column สำหรับใส่ HTML ----- */
@media only screen and (max-width:1000px) {

	.colbox6 {
		width:33.33%;
	}
	
	.colbox .colbox6:nth-child(4) {
		clear:left;
	}
	
}


@media only screen and (max-width:800px) {

	.colbox5 {
		width:33.33%;
	}
	
	.colbox .colbox5:nth-child(4) {
		clear:left;
	}
	
	.colbox .colbox5:nth-child(4), .colbox .colbox5:nth-child(5) {
		width:50%;
	}
	
}


@media only screen and (max-width:613px) {


	.colbox3 {
		width:50%;
	}
	
	.colbox .colbox3:nth-child(3) {
		clear:both;
		width:100%;
	}

	
	
	.colbox4 {
		width:50%;
	}
	
	.colbox .colbox4:nth-child(3) {
		clear:left;
	}	
	
	
	
	.colbox5 {
		width:50%;
	}
	
	.colbox .colbox5:nth-child(4) {
		clear:none;
	}
	
	.colbox .colbox5:nth-child(3), .colbox .colbox5:nth-child(5) {
		clear:left;
	}
	
	.colbox .colbox5:nth-child(5) {
		width:100%;
	}	
	
	
	
	.colbox6 {
		width:50%;
	}
	
	.colbox .colbox6:nth-child(4) {
		clear:none;
	}
	
	.colbox .colbox6:nth-child(3), .colbox .colbox6:nth-child(5) {
		clear:left;
	}
	
}

@media only screen and (max-width:413px) {

	.colbox2, .colbox3, .colbox4, .colbox5, .colbox6 {
		clear:both;
		width:100%;
		padding-left:10px;
		padding-right:10px;
	}	
	
	.colbox .colbox5:nth-child(4) {
		width:100%;
	}
	
}