﻿/*--- reset 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%; vertical-align: baseline; }
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; }
a { text-decoration:none; cursor:pointer; }
:focus { outline: 0; }
/*--- end reset css ---*/

	a[href^="tel"]{ color:inherit; text-decoration:none; }
	p[href^="tel"]{ color:inherit; }
	input { -webkit-appearance: none; border-radius: 0; }
	::selection { background:rgba(226,35,26,0.7); color:rgba(255,255,255,1); }
	:visited { color:rgba(255,0,0,1); }
	:active { color:rgba(255,0,0,1); }
	::-webkit-input-placeholder { color:rgba(255,255,255,1); }
	::-moz-placeholder { color:rgba(255,255,255,1); }
	:-ms-input-placeholder { color:rgba(255,255,255,1); }
	:-moz-placeholder { color:rgba(255,255,255,1); }

/* font */
	@font-face { font-family:'rsu'; src:url('../fonts/rsu_regular.ttf'),url('../fonts/rsu_regular.eot'),url('../fonts/rsu_regular.woff'); }

/* start */
	#warpper { width:100%; margin:auto; background:rgba(23,24,32,1); }

	.clear { width:0; height:0; margin:0; padding:0; border:none; clear:both; }
	.container { width:940px; margin:auto; }

/* header */
	#header { width:100%; height:124px; background:url('../images/00-header/bg_header.png') repeat left top; position:relative; z-index:1001; }
	#header #logo { width:278px; height:50px; display:block; background:url('../images/00-header/logo.png') no-repeat left top; position:relative; top:10px; float:left; }
	#header #menubar_mobile { display:none; }
	#header .box_right { float:right; margin:20px 0 0; }
	#header .box_right .mn_get { font:14px/26px 'Arial'; color:rgba(255,255,255,1); float:right; margin:0 20px 0 0; }
	#header .box_right .mn_get:hover , #header .box_right .mn_get.active { color:rgba(255,0,0,1); transition:0.8s; }
	#header .box_right .setting { width:26px; position:relative; float:right; }
	#header .box_right .setting .icon { height:26px; display:block; background:url('../images/00-header/setting.png') no-repeat; }
	#header .box_right .setting .box_setting { display:none; position:absolute; right:0; top:30px; width:200px; height:100px; background:url('../images/00-header/box_setting.png') no-repeat right top; padding:0 10px; }
	#header .box_right .setting .box_setting .lang { border-bottom:1px solid #FFFFFF; font:15px/18px 'Arial'; color:#FFFFFF; margin:23px 0 0; padding:0 0 10px; }
	#header .box_right .setting .box_setting .lang .p { float:right; }
	#header .box_right .setting .box_setting .lang a { width:26px; height:18px; margin:0 0 0 10px; display:block; float:right; background:url('../images/00-header/lang.jpg'); }
	#header .box_right .setting .box_setting .lang a.en { background-position:0 0; }
	#header .box_right .setting .box_setting .lang a.en:hover , #header .box_right .box_setting .lang a.en.none { background-position:0 -18px; }
	#header .box_right .setting .box_setting .lang a.th { background-position:-26px 0; }
	#header .box_right .setting .box_setting .lang a.th:hover , #header .box_right .box_setting .lang a.th.none { background-position:-26px -18px; }
	#header .box_right .setting .box_setting p { font:15px/18px 'Arial'; color:#FFF; width:200px; text-align:right; margin:20px 0 0; }
	#header .box_right .setting .box_setting p span { color:#000000; font-weight:bold; }

	#header #menubar { width:100%; text-align:center; }
	#header #menubar a { font:18px/40px 'Arial'; color:rgba(255,255,255,1); display:inline-block; margin:30px 30px 0; transition:0.8s; }
	#header #menubar a:hover , #header #menubar a.active { color:rgba(255,0,0,1); transition:0.8s; }

/* footer */
	#footer { width:100%; background:rgba(241,241,237,1); padding:45px 0; }
	#footer .box_left { width:380px; float:left; padding:40px 0 0; }
	#footer .box_center { width:260px; padding:0 60px 0 0; float:left; font:16px/20px 'Tahoma'; color:rgba(51,51,51,1); }
	#footer .box_center span { color:rgba(254,0,0,1); }
	#footer .box_right { width:240px; float:left; font:16px/20px 'Tahoma'; color:rgba(51,51,51,1); }
	#footer .box_right span { color:rgba(254,0,0,1); }

	#footer_last { width:100%; height:30px; background:rgba(42,46,65,1); font:12px/30px 'Arial'; color:rgba(255,255,255,1); text-align:center; }

/* banner */
	.banner { width:100%; height:595px; position:relative; }
	.banner .img { width:100%; height:100%; position:absolute; left:0 top:0; }
	.banner .img div { width:100%; height:100%; position:absolute; left:0 top:0; background:no-repeat center top; display:none; }
	.banner .container { height:100%; position:relative; z-index:2; }
	.banner .box { width:100%; position:absolute; left:0; bottom:70px; }
	.banner .box h1 { font:bold 80px/80px 'Arial'; color:rgba(255,255,255,1); text-transform:uppercase; padding:0 0 10px 0; }
	.banner .box .txt { display:none; width:calc(100% - 50px); background:rgba(255,0,0,0.8); border-right:10px solid rgba(255,255,255,1); padding:10px 20px; font:18px/22px 'Arial'; color:rgba(255,255,255,1); }
	.banner .cur { display:none; width:100%; height:10px; position:absolute; left:0; bottom:30px; text-align:center; }
	.banner .cur a { width:10px; height:10px; border-radius:5px; background:rgba(255,255,255,1); display:inline-block; margin:0 2px; transition:0.8s; }
	.banner .cur a:hover , .banner .cur a.active { background:rgba(255,0,0,1); transition:0.8s; }

/* section about */
	.section_about { padding:40px 0; }
	.section_about.none { padding-top:0; }
	.section_about .top { width:780px; float:left; font:14px/19px 'Arial'; color:rgba(234,239,242,1); }
	.section_about .top span { font:bold 22px/19px 'Arial'; color:rgba(185,7,10,1); }
	.section_about .top span b { font-weight:normal; color:rgba(234,239,242,1); }
	.section_about .more { cursor:pointer; width:110px; height:28px; display:block; font:14px/28px 'Arial'; color:rgba(255,254,254,1); text-align:center; background:rgba(254,0,0,1); float:right; transition:0.8s; }
	.section_about .more:hover { color:rgba(254,0,0,1); background:rgba(255,254,254,1); transition:0.8s; }

	.section_about .section_list { width:100%; padding:40px 0 0; }
	.section_about .section_list .item { width:300px; height:200px; position:relative; float:left; margin:0 20px 0 0; }
	.section_about .section_list .item.last { margin:0; }
	.section_about .section_list .item img { width:100%; position:relative; }
	.section_about .section_list .item .detail { width:100%; height:100%; background:rgba(254,0,0,0); border-bottom:5px solid rgba(254,0,0,0.8); position:absolute; left:0; top:0; z-index:1; cursor:pointer; transition:0.8s; }
	.section_about .section_list .item .detail:hover { background:rgba(254,0,0,0.8); transition:0.8s; }
	.section_about .section_list .item .detail .txt { font:bold 48px/40px 'Arial'; color:rgba(255,255,255,1); position:absolute; left:10px; bottom:10px; }
	.section_about .section_list .item .detail .txt span { font:35px/40px 'Arial'; }

/* select page */
	.select_page { width:100%; text-align:center; }
	.select_page a { font:14px/22px 'Arial'; color:rgba(255,255,255,1); display:inline-block; margin:0 2px; text-transform:uppercase; transition:0.8s; }
	.select_page a:hover , .select_page a.active { color:rgba(255,0,0,1); transition:0.8s; }

/* page home */
	#page_home { width:100%; margin:-124px 0 0; }

/* page know us */
	#page_knowus { width:100%; margin:-124px 0 0; }
	#page_knowus .section_knowus { width:100%; font:16px/24px 'Arial'; color:rgba(255,255,255,1); padding:40px 0 0; }
	#page_knowus .section_knowus p { font:bold 22px/19px 'Arial'; display:inline-block; }
	#page_knowus .section_knowus span { color:rgba(255,0,0,1); }
	#page_knowus .section_knowus li { list-style-type:disc; margin:0 0 0 30px; }
	#page_knowus .section_knowus li a { color:rgba(255,255,255,1); text-decoration:none; transition:0.8s; }
	#page_knowus .section_knowus li a:hover { color:rgba(255,0,0,1); transition:0.8s; }

/* page we do */
	#page_we_do { width:100%; margin:-124px 0 0; }
	#page_we_do .list { width:100%; padding:40px 0; }
	#page_we_do .list .item { width:300px; margin:0 20px 20px 0; float:left; }
	#page_we_do .list .item.none { margin-right:0; }
	#page_we_do .list .item .img { width:100%; height:240px; overflow:hidden; cursor:pointer; }
	#page_we_do .list .item .img img { width:100%; }
	#page_we_do .list .item .txt { width:100%; font:14px/20px 'Tahoma'; color:rgba(255,255,255,1); padding:5px 0 10px; }
	#page_we_do .list.see .item .txt { height:80px; }
	#page_we_do .list .item .txt span { font:18px/30px 'Tahoma'; color:rgba(255,0,0,1); display:block; }
	#page_we_do .list .item a { display:inline-block; font:bold 10px/20px 'Tahoma'; color:rgba(255,0,0,1); border-bottom:1px solid rgba(255,0,0,1); margin:20px 0 0; padding:0 10px; background:url('../images/03-home/bg_more.jpg') no-repeat left bottom; transition:0.8s; }
	#page_we_do .list .item a:hover { color:rgba(255,255,255,1); transition:0.8s; }

/* page we do detail */
	#page_we_do_detail { width:100%; margin:-124px 0 0; }
	#page_we_do_detail .box_left { width:240px; float:left; padding:40px 0; }
	#page_we_do_detail .box_left #ddpc { display:block; }
	#page_we_do_detail .box_left img { padding:0 0 20px 0; }
	#page_we_do_detail .box_left a { font:14px/18px 'Arial'; color:rgba(255,255,255,1); display:block; margin:0 0 15px 0; text-transform:uppercase; transition:0.8s; }
	#page_we_do_detail .box_left a:hover , #page_we_do_detail .box_left a.active { color:rgba(255,0,0,1); transition:0.8s; }
	#page_we_do_detail .box_left #ddmobile { display:none; }

	#page_we_do_detail .box_right { width:660px; float:right; padding:40px 0; border-top:4px solid rgba(255,0,0,1); margin:40px 0 0; }
	#page_we_do_detail .box_right .editor { font:14px/24px 'Arial'; color:rgba(255,255,255,1); text-transform:uppercase; }
	#page_we_do_detail .box_right .editor img { width:100%; padding:0 0 10px 0; }
	#page_we_do_detail .box_right .editor ul li { list-style-type:disc; font:14px/24px 'Arial'; color:rgba(255,255,255,1); margin:0 0 0 20px; }
	/*#page_we_do_detail .box_right .editor span { color:rgba(255,0,0,1); }*/ 
	#page_we_do_detail .box_right .editor a { color:rgba(255,255,255,1); }

/* page see detail */
	#page_see_detail .box_detail { width:100%; padding:40px 0; }
	#page_see_detail .box_detail .gallery { width:100%; height:414px; position:relative; }
	#page_see_detail .box_detail .gallery .img { width:100%; }
	#page_see_detail .box_detail .gallery .img img { position:absolute; left:0; top:0; z-index:1; }
	#page_see_detail .box_detail .gallery .cur { height:10px; position:absolute; right:0; bottom:-20px; z-index:2; }
	#page_see_detail .box_detail .gallery .cur a { width:10px; height:10px; border-radius:5px; background:rgba(255,255,255,1); display:inline-block; margin:0 2px; transition:0.8s; }
	#page_see_detail .box_detail .gallery .cur a:hover , #page_see_detail .box_detail .gallery .cur a.active { background:rgba(255,0,0,1); transition:0.8s; }
	#page_see_detail .box_detail .gallery .txt { width:100%; font:14px/20px 'Tahoma'; color:rgba(255,255,255,1); position:absolute; left:10px; bottom:10px; z-index:2; }
	#page_see_detail .box_detail .gallery .txt span { font:bold 18px/30px 'Tahoma'; color:rgba(255,0,0,1); display:block; text-transform:uppercase; }

	#page_see_detail .box_detail .editor { width:100%; padding:40px 0 0; font:14px/24px 'Arial'; color:rgba(255,255,255,1); }
	#page_see_detail .box_detail .back { font:14px/22px 'Arial'; color:rgba(255,255,255,1); padding:40px 0 0; display:block; width:100px; }

/* page we are */
	#page_we_are .box_detail { width:100%; padding:40px 0; }
	#page_we_are .box_detail #googlemap { position:relative; width:100%; height:325px; margin:0 0 40px 0; background:black; }
	#page_we_are .box_detail .box_left { width:380px; float:left; font:16px/20px 'Tahoma'; color:rgba(255,255,255,1); }
	#page_we_are .box_detail .box_left span { color:rgba(254,0,0,1); }

	#page_we_are .box_detail .box_right { width:400px; float:right; padding:40px 40px 20px 40px; background:rgba(51,17,22,1); color:rgba(255,255,255,1); font:14px/33px 'Arial'; }
	#page_we_are .box_detail .box_right .input_text { width:calc(100% - 40px); height:34px; background:rgba(186,185,185,0.5); border:none; padding:0 20px; color:rgba(255,255,255,1); font:14px/33px 'Arial'; margin:0 0 10px 0; }
	#page_we_are .box_detail .box_right .textarea { width:calc(100% - 40px); height:100px; background:rgba(186,185,185,0.5); border:none; padding:0 20px; color:rgba(255,255,255,1); font:14px/33px 'Arial'; margin:0 0 10px 0; }
	#page_we_are .box_detail .box_right .input_submit { width:auto; border:none; background:none; color:rgba(255,255,255,1); font:14px/20px 'Arial'; cursor:pointer; }

/* page involved */
	#page_involved .box_detail { width:100%; padding:40px 0; }
	#page_involved .box_detail .head { width:100%; height:32px; background:url('../images/08-involved/bg_head.jpg') repeat-x left center; text-transform:uppercase; }
	#page_involved .box_detail .head span { font:24px/32px 'Arial'; color:rgba(255,255,255,1); padding:0 10px; background:rgba(23,24,32,1); }
	#page_involved .box_detail .title_head { font:16px/24px 'Arial'; color:rgba(255,255,255,1); text-transform:uppercase; padding:10px 0 0; }
	#page_involved .box_detail .title_head span { color:rgba(255,0,0,1); }

	#page_involved .box_detail .position { font:18px/24px 'Arial'; color:rgba(144,144,144,1); text-transform:uppercase; padding:20px 0; cursor:pointer; transition:0.8s; }
	#page_involved .box_detail .position:hover , #page_involved .box_detail .position.active { color:rgba(255,255,255,1); transition:0.8s; }
	#page_involved .box_detail .list .item2 { font:15px/18px 'Arial'; color:rgba(255,255,255,1); padding:0 0 20px 0; display:none; }
	#page_involved .box_detail .list .item2 * { font:15px/18px 'Arial' !important; }
	#page_involved .box_detail .list .item2 b { font-weight:bold !important; }
	#page_involved .box_detail .list .line { width:100%; height:1px; background:rgba(144,144,144,1); }

@media screen and ( max-width: 979px ){
	#warpper { position:relative; max-width:100%; }
    .container { width:96%; margin:auto; }
	#menubar { display:none; }

	#header { height:auto; padding:10px 0; }
	#header #logo { top:0; }
	#header .box_right { display:none; }
	#header #thumb { display:block; float:right; width:53px; height:35px; margin:8px 0 0 0; background:url(../images/_icon/thumb.png) no-repeat; }

	#header #menubar_mobile { display:none; position:absolute; top:70px; left:0; width:100%; padding:20px 0; background:rgba(0,0,0,0.9); z-index:99; }
    #header #menubar_mobile.active { display:block; }
    #header #menubar_mobile #menu_mobile { text-align:center; }
    #header #menubar_mobile #menu_mobile a { display:block; font:28px/28px 'Arial'; color:#FFF; padding:20px 0; text-transform:uppercase; }
    #header #menubar_mobile #menu_mobile a.active { color:#ed1c24; }
    #header #menubar_mobile .lang_mobile { padding:20px 0; text-align:center; }
    #header #menubar_mobile .lang_mobile a { float:left; display:block; width:50%; font:30px/30px 'Arial'; color:#FFF; }
    #header #menubar_mobile .lang_mobile a.active { color:#ed1c24; }
    #header #menubar_mobile .lang_mobile a.none { cursor:none; }
    #header #menubar_mobile .close { display:block; width:68px; height:68px; margin:65px auto 0; background:url(../images/icon/close.png) no-repeat; }

	#footer { padding:20px 0; }
	#footer .box_left { width:100%; padding:0; }
	#footer .box_center { width:30%; padding:0 20% 0 0; }
	#footer .box_right { width:50%; }

	.banner .box h1 { font:bold 60px/60px 'Arial'; }
	.section_about { padding:20px 0; }
	.section_about .top { width:70%; }
	.section_about .section_list { padding:20px 0; }
	.section_about .section_list .item { width:100%; height:auto; margin:0 0 20px; }

	#page_knowus .section_knowus img { max-width:100%; }

	#page_we_do .list { padding:20px 0; }
	#page_we_do .list .item { width:100%; margin:0 0 20px; }
	#page_we_do .list .item .img { height:auto; }

	#page_we_do_detail .box_left { width:100%; padding:20px 0; }
	#page_we_do_detail .box_left #ddpc { display:none; }
	#page_we_do_detail .box_left img { }
	#page_we_do_detail .box_left #ddmobile { display:block; width:100%; padding:10px 20px; font:18px/18px 'Arial'; }
	#page_we_do_detail .box_right { width:100%; margin:0; padding:20px 0; }
	#page_we_do_detail .box_right .editor img { max-width:100%; }

	#page_see_detail .box_detail .gallery .img img { max-width:100%; }

	#page_we_are .box_detail .box_left { width:100%; margin:0 0 20px; }
	#page_we_are .box_detail .box_right { width:calc(100% - 40px); padding:20px 20px 10px; }
}







