/**
 * @version		$Id: style.css 3 2014-03-21 10:53 Phu $
 * @package		vFramework.theme
 * @copyright	(C) 2014 Vipcom. All rights reserved.
 * @license		Commercial
 */
@charset "UTF-8";

@import url("reset.css");

@import url("content.css");

@font-face {
	font-family: 'UTM_AVo';
	src: url('fonts/UTM Avo.ttf'), url('fonts/UTM AvoBold_Italic.ttf'), url('fonts/UTM AvoItalic.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'UTM_Edward';
	src: url('fonts/UTM EdwardianKT.ttf');	
	font-weight: normal;
	font-style: normal;
}


/** CLEAR **/
.clr{clear:both; height:0; line-height:0;}
.clearfix:after {content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}

/** BODY **/
html { overflow-x:hidden;}
body{
	font-size:14px;
	font-family: "UTM_AVo", Arial, Helvetica, sans-serif;
	*font-size:small;
	*font:x-small;
	color:#333;

}

* {
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}
*:before,
*:after {
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

/* Default link */
a{color:#333;text-decoration:none;outline:none;font-family: "UTM_AVo", Arial, Helvetica, sans-serif; font-size: 14px}
a:hover,a:focus{text-decoration:none;}

/** FORM */
input,textarea,select {	font-size:14px;font-family: "UTM_AVo", Arial, Helvetica, sans-serif;vertical-align:middle;color:#333;outline:none;}
/********************************* LAYOUT *****************************/
#w { position:relative;}
#left { float:left; width:250px;}
#right { float:right; width:250px;}
#content {position:relative}
#left + #right + #content, #left + #content {margin-left: 285px}
#right + #content {margin-right: 285px}
.row { width: 1180px; margin: 0 auto; position: relative;}
/********************************* HEADER *****************************/
#top { height: 42px; background: #535353; line-height: 42px; color: #b5b5b5; font-size: 11px}
#top a { color: #b5b5b5; font-size: 11px}
#top a:hover { color: #fff}
#search { float: right; background: url(../img/search.png) no-repeat; width: 167px; height: 30px; margin: 6px 0 0 0}
#search input[type=text] { float: left; width: 135px; height: 30px; line-height: 30px; padding: 0 5px; border: none; background: none; color: #b5b5b5; font-size: 11px}
#search input[type=submit] { float: left; width: 30px; height: 30px; border: none; background: none; cursor: pointer;}
#header { height: 84px; background: #fff; width: 100%}
#logo { margin-top: 18px; float: left;}
#header .vf_menu { float: right; margin: 50px 0 0 0}
#header .vf_menu > ul > li { float: left; padding: 0 20px; position: relative; height: 34px; background: url(../img/arrow_down.png) no-repeat center 20px}
#header .vf_menu > ul > li:hover { background: none;}
#header .vf_menu > ul > li > a { text-transform: uppercase; display: block; }
#header .vf_menu > ul > li > a:hover, #header .vf_menu > ul > li > a.active { color: #d65503}
#header .vf_menu > ul > li > ul {width:230px;position: absolute;z-index: 1000;top: 100%;left: -9999px;background:url(../img/bg_opacity.png) repeat 0 0;opacity: 0; padding-bottom: 7px;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-o-transition: -o-transform 0.4s, opacity 0.4s;
	-ms-transition: -ms-transform 0.4s, opacity 0.4s;
	-moz-transition: -moz-transform 0.4s, opacity 0.4s;
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	-o-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	-moz-transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
#header .vf_menu > ul > li > ul:after { content: ""; position: absolute;top:-5px; left: 0; width: 0; height: 4px;
-webkit-transition:all 0.7s ease 0.3s;
-moz-transition:all 0.7s ease 0.3s;
-o-transition:all 0.7s ease 0.3s;
transition:all 0.7s ease 0.3s;	
}
@media screen and (min-width: 991px){
	#header .vf_menu > ul > li:hover > ul {
		left: 0;opacity: 1;
		-webkit-transform: translate(0, 0);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
	}
	#header .vf_menu > ul > li:hover > ul:after { width: 100%; background:#d65503}
}
#header .vf_menu > ul > li.submenu > ul {width: 460px}
#header .vf_menu > ul > li.submenu > ul > li { float: left; width: 50%}
#header .vf_menu ul ul li a {  font-size: 12px; padding: 10px 20px; color: #fff; display: block;}
#header .vf_menu ul ul li a:hover, #header .vf_menu ul ul li a.active {color:#f78702}
#header.fixed-top { position: fixed; z-index: 9999; top: 0}

.hiddencontact {display: none;}
#form_contact  {padding: 10px;}
#form_contact .report {margin-bottom: 15px; line-height: 24px}
#form_contact input[type='text']{margin-bottom: 12px;width: 100%;}
#form_contact #message {margin-bottom: 12px;width: 100%;max-width: 100%;height: 150px;max-height: 150px;}
#form_contact  #captcha_img {margin-bottom: 12px;}
#form_contact th { width: 100px}
.map_box { display: none;}
/******************* ************** BANNER *****************************/
#slider .slides_img { width:100%; height:auto}
#slider img { width:100% !important; height:auto;}
.jssorb01 {text-align:center; position:absolute; left:48%; bottom:17px; z-index:200}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {overflow:hidden;cursor:pointer;}
.jssorb01 div { display:inline-block; text-indent:-9999em; width:13px; height:12px; background:url(../img/pagination.png) no-repeat 0 0;margin-right:5px;cursor:pointer}
.jssorb01 div:hover, .jssorb01 .av:hover,.jssorb01 .av { background:url(../img/pagination_a.png) no-repeat 0 0 }
/********************************* RIGHT *****************************/
#right .vf_menu { margin-top: 5px}
#right .vf_menu > ul > li { position: relative;}
#right .vf_menu > ul > li > a{ color: #fff; padding: 5px 10px; background: #535353; text-transform: uppercase; 
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
transition:all 0.2s ease;
}
#right .vf_menu > ul > li > a:after {content: ""; border-top: 1px solid #535353; position: absolute; width: 100%; top: 20px; left: 0}
#right .vf_menu > ul > li > a:hover, #right .vf_menu > ul > li > a.active {background: #427B00;}
#right .vf_menu > ul > li > a:hover:after, #right .vf_menu > ul > li > a.active:after {border-top: 1px solid #427B00;}
#right .vf_menu > ul > li > ul { line-height: 24px; margin: 15px 0 25px 0}
#right .vf_menu > ul > li > ul li { padding-left: 15px; background: url(../img/arrow_right.png) no-repeat 4px 10px}
#right .vf_menu > ul > li > ul li a:hover, #right .vf_menu > ul > li > ul li a.active, .article_hot ul li .tit:hover {color: #ff9900}
.article_hot .vf_tit { position: relative; margin-bottom: 20px; color: #fea803; font-size: 18px; font-weight: bold; padding: 5px 10px; background: #535353;text-transform: uppercase; float: left;}
.article_hot .vf_tit:after {content: ""; border-top: 1px solid #535353; position: absolute; width: 250px; top: 27px; left: 0}
.article_hot ul { clear: both;}
.article_hot ul li { margin-bottom: 30px}
.article_hot ul li .tit{ color: #437b00; line-height: 24px}
.article_hot ul li img { max-width: 105px; height: auto; float: left; margin-right: 10px}
.article_hot ul li .desc { display: none;}
/********************************* CONTENT *****************************/
#main { margin-bottom: 45px}
.inline_content { line-height: 20px; padding:20px;}
.inline_content p { margin-bottom: 12px}
.inline_content img {
	padding: 10px;
	background: #f1d2c2;
	-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
	-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
	box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px 4px 4px 4px;
}
.breadcrumbs { text-align: right; margin: 45px 0 22px 0; padding-bottom: 5px; border-bottom: 1px solid #f2f2f2}
.breadcrumbs ul li { display: inline-block;color: #929090}
.breadcrumbs ul li a { color: #929090; padding: 0 5px; font-family: Verdana, Geneva, sans-serif}
.breadcrumbs ul li a:hover {color: #ff9900}

.mbn { position: absolute; left: 0; top: -170px}
.mbn ul li { width: 99px; height: 95px; float: left; margin-right: 25px; background: url(../img/menu_circle.png); text-align: center; line-height: 95px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.mbn ul li:hover {
background: url(../img/menu_circle_ac.png);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.mbn ul li a { text-transform: uppercase; font-weight: bold; color: #fff; display: block;}


.vf_article, .vf_article .vf_list, .vf_building, .vf_building .vf_list, .vf_partner, .vf_search  { float: left; width: 100%}
.vf_article .vf_list .vf_tit, .vf_article .vf_view .vf_tit , .vf_building .vf_list .vf_tit, .vf_building .vf_view .vf_tit , .vf_guestbook .vf_list .vf_tit, .vf_partner .vf_tit, .vf_search .vf_tit{ color: #d75b06; font-size: 24px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 3px solid #d75b06; position: absolute; top: -58px} 
.vf_article .vf_list ul li { float: left; width: 298px; height: 227px; overflow: hidden; position: relative;}
.vf_article .vf_list ul li .img img, .vf_article .vf_next ul li .img img, .vf_building .vf_list ul li .img img, .vf_building .vf_next ul li .img img, .vf_partner ul li img { width: 100%; height: 100%;
filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);
}
.vf_article .vf_list ul li:hover .img img, .vf_article .vf_next ul li:hover .img img, .vf_building .vf_list ul li:hover .img img, .vf_building .vf_next ul li:hover .img img, .vf_partner ul li img {filter:none;-webkit-filter: grayscale(0);}
.vf_article .vf_list ul li .preview, .vf_article .vf_next ul li .preview, .vf_building .vf_list ul li .preview, .vf_building .vf_next ul li .preview { position: absolute; width: 100%; bottom: -100%; left: 0; background: url(../img/bgopacity.png) repeat 0 0; padding: 10px 15px;  color:#cccccc; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.vf_article .vf_list ul li:hover .preview, .vf_article .vf_next ul li:hover .preview, .vf_building .vf_list ul li:hover .preview, .vf_building .vf_next ul li:hover .preview { bottom: 0}
.vf_article .vf_list ul li .preview .desc a, .vf_building .vf_list ul li .preview .desc a {color: #ff9900}
.vf_article .vf_list ul li .tit, .vf_building .vf_list ul li .tit {  font-weight: bold; color: #ff9900; display: block; margin-bottom: 5px}

.vf_article .vf_next, .vf_building .vf_next { position: relative;}
.vf_article .vf_next .vf_tit, .vf_building .vf_next .vf_tit { font-size: 18px; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #e5e5e5}
.vf_article .vf_next ul li {width: 200px; height: 153px; overflow: hidden; position: relative;}
.vf_article .vf_next ul li .tit, .vf_building .vf_next ul li .tit { font-size: 12px;  color: #ff9900; display: block; margin-bottom: 5px}
.vf_article .vf_next .jcarousel { width: 800px; margin:0 auto;}
.vf_article .vf_next .jcarousel-control-prev { background: url(../img/prev_xemtiep.png) no-repeat; width: 38px; height: 30px; position: absolute; left: 40px; top: 105px}
.vf_article .vf_next .jcarousel-control-next { background: url(../img/next_xemtiep.png) no-repeat; width: 38px; height: 30px; position: absolute; right: 40px; top: 105px}

.vf_building .vf_list ul li { width: 298px; height: 362px; float: left; overflow: hidden;position: relative;}
.vf_building .vf_next ul li { width: 222px; height: 270px; float: left; overflow: hidden;position: relative;}
.vf_building .vf_next .jcarousel { width: 888px; margin:0 auto;}
.vf_building .vf_next .jcarousel-control-prev { background: url(../img/prev_xemtiep.png) no-repeat; width: 38px; height: 30px; position: absolute; left: 0; top: 165px}
.vf_building .vf_next .jcarousel-control-next { background: url(../img/next_xemtiep.png) no-repeat; width: 38px; height: 30px; position: absolute; right: 0; top: 165px}

.vf_pag { margin: 40px auto; text-align: center; display: table;background: #f8f8f8; padding: 5px 10px}
.vf_pag span, .vf_pag a{  padding: 5px 10px; display:inline-block}
.vf_pag a:hover, .vf_pag a.active { color: #ff2f00; background: #fff}

#company, #human_resource, #project { position: relative;  padding: 65px 0 60px 0; }
#company p, #human_resource p, #project p { line-height: 24px; font-size: 14px}
#human_resource { background: #d4d5d3}
#company .vf_tit, #human_resource .vf_tit, #project .vf_tit { position: absolute; top: -10px; width: 100%; text-align: center; font-weight: bold; font-size: 18px; color: #d65503;}
.vf_about .vf_view > .vf_tit{ display: none;}
.vf_about .vf_view .vf_tit { text-align: center; font-weight: bold; font-size: 18px; color: #417b00;}
.vf_about .vf_view .vf_tit span, #company .vf_tit span, #human_resource .vf_tit span, #project .vf_tit span  { background: #fcfcfc; padding: 10px 30px; border-bottom:2px solid #d65503}
.vf_about .vf_view .ctn_left, #company .ctn_left, #human_resource .ctn_left, #project .ctn_left { width: 50%; padding-right: 3%; float: left; line-height: 24px; font-size: 14px}
.vf_about .vf_view .ctn_right, #company .ctn_right, #human_resource .ctn_right, #project .ctn_right  { width: 50%; float: right; line-height: 24px; font-size: 14px}
#human_resource .ctn_right  { padding-right: 1%}

.vf_guestbook { position: relative; width: 100%; float: left;}
.vf_guestbook .vf_list > ul > li { margin-bottom: 50px; border-top: 1px solid #f7b000; position: relative;}
.vf_guestbook .vf_list > ul > li:before {content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; background: url(../img/circle_guest.png); z-index: 10}
.vf_guestbook .vf_list > ul > li:after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #dddddd; margin-left: 5px}
.vf_guestbook ul ul li { width: 510px; float: right; background: #f5f5f5; padding: 30px 0 20px 15px;
-webkit-transition:box-shadow 0.2s ease;
-moz-transition:box-shadow 0.2s ease;
-o-transition:box-shadow 0.2s ease;
transition:box-shadow 0.2s ease;
}
.vf_guestbook ul ul li.fix { width: 520px; float: left; clear: both;}
.vf_guestbook ul ul li:hover { 
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;
box-shadow: 1px 1px 10px #999; }
.vf_guestbook ul li .img { width: 85px; float: left; margin-right: 20px}
.vf_guestbook ul li .img img { max-width: 100%; height: auto;}
.vf_guestbook ul li .desc { width: 350px; float: left; line-height: 20px}
.vf_guestbook ul ul li.fix .desc { width: 365px;}
.vf_guestbook ul li .tit {  font-weight: bold; color: #6a6868; display: block; margin-bottom: 10px}
.txt_guestbook {  line-height: 26px; max-width: 710px; margin: 10px auto 50px auto}
.vf_partner ul li { width: 160px; float: left; margin: 0 18px 20px 0}
.vf_search ul li { margin-bottom: 20px; line-height: 20px}
.vf_search ul li .tit { font-size: 14px;color: #427a00; font-weight: bold;}
.vf_search ul li .tit:hover {color: #ff9900}
.vf_search ul li img { float: left; margin-right: 20px; max-width: 300px}
.vf_search ul li .desc { margin-top: 10px}

.blk_design { padding-bottom: 35px}
.blk_design .vf_tit{ font-size: 18px; font-weight: bold; color: #d65503; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #dcdbdb; margin-bottom: 15px}
.blk_design ul li { width: 393px; height: 300px; float: left; position: relative; overflow: hidden;}
.blk_design ul li .img img { width: 100%; height: 100%;
filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);
}
.blk_design ul li:hover .img img {filter:none;-webkit-filter: grayscale(0);}
.blk_design ul li .preview { position: absolute; width: 100%; bottom: -100%; left: 0; background: url(../img/bgopacity.png) repeat 0 0; padding: 10px 15px;  color:#cccccc; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.blk_design ul li:hover .preview { bottom: 0}
.blk_design ul li .preview .desc a {color: #ff9900}
.blk_design ul li .tit {  font-weight: bold; color: #ff9900; display: block; margin-bottom: 5px}
.blk_design .jcarousel { width: 1179px}
.blk_design .jcarousel-control-prev { background: url(../img/owl_prev.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 17px; top: 0}
.blk_design .jcarousel-control-next { background: url(../img/owl_next.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 0; top: 0}
.blk_design.fix { margin-bottom: 0}
.blk_design.fix ul li { width: 295px; height: 358px}
.blk_design.fix .jcarousel { width: 1180px}
.building { background: #eaeaec}
.furniture { background: #727271}
.txt_design { text-align: center; margin: 40px auto 20px auto; max-width: 815px}
.txt_design .vf_tit, .txt_building .vf_tit { font-size: 24px; font-weight: bold;color: #d65503;  margin-bottom: 10px}
.txt_design p, .txt_building p{ font-size: 14px; line-height: 26px; font-style: italic;}
.txt_building { text-align: center; margin: 0 auto 20px auto; padding-top: 30px; max-width: 815px}
.txt_fur { max-width: 815px; margin: 0 auto 20px auto; text-align: center;}
.txt_fur .vf_tit {background: #eaeaec; display: table; margin: 0 auto; font-size: 24px; font-weight: bold;color: #d65503;  padding: 5px 5px 8px 5px; margin-bottom: 10px}
.txt_fur p {   font-size: 14px; line-height: 26px; color: #f6f6f6; font-style: italic;}
/********************************* OVER FOOTER *****************************/
#over_footer { background: url(../img/background_over_ft.jpg) repeat-x left bottom; min-height: 305px; overflow: hidden;}
.menu_ft { width: 880px; float: left; margin-top: 20px; min-height: 290px; position: relative; z-index: 20}
.menu_ft .vf_menu > ul > li {  float: left; width: 215px}
.menu_ft .vf_menu > ul > li + li { width: 230px}
.menu_ft .vf_menu > ul > li + li + li{ width: 150px}
.menu_ft .vf_menu > ul > li + li + li + li { width: 110px}
.menu_ft .vf_menu > ul > li + li + li + li + li  { width: 175px}
.menu_ft .vf_menu > ul > li > a {  text-transform: uppercase; color: #fff}
.menu_ft .vf_menu ul ul a { color: #fff; font-size: 12px}
.menu_ft .vf_menu a:hover {color: #ff9900}
.menu_ft .vf_menu > ul > li > ul {  line-height: 24px; margin-top: 5px}
.testimonial { min-height: 380px; background: url(../img/bg_testi.png) repeat 0 0; position: relative; z-index: 50}
.testimonial .vf_tit { font-size: 30px; color: #e8eee2;  text-align: center; margin: 0 0 20px 0; padding-top: 30px}
.testimonial .jcarousel { width: 800px; margin: 0 auto}
.testimonial ul li { width: 800px; text-align: center;}
.testimonial ul li .ctn {  color: #f6f7f5; line-height: 25px; font-style: italic; margin-bottom: 10px; max-height: 180px; overflow: hidden;}
.testimonial ul li img {  margin-right: 20px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
.testimonial ul li:hover img {
	-webkit-border-radius: 10%;
	-moz-border-radius: 10%;
	border-radius: 10%;
}
.testimonial ul li .preview { color: #fdfefc}
.testimonial .jcarousel-pagination { text-align: center; margin-top: 10px}
.testimonial .jcarousel-pagination a{ background: url(../img/pagi.png); width: 13px; height: 12px; display: inline-block; text-indent: -9999em; margin-right: 5px}
.testimonial .jcarousel-pagination a.active {background: url(../img/pagi_a.png);}
.info_ct { line-height: 24px; position: relative; z-index: 20; width: 300px; float: right;}
.bg_chair { position: absolute; right: 0; bottom: 10px}


/********************************* FOOTER *****************************/
#footer { height: 42px; background: #535353; font-size: 12px; padding-top: 13px}
.counter { float: right; color: #e1d6d6}
.toTop{position:fixed; right:0; bottom:40px; background: url(../img/backtotop.png) no-repeat; width:32px; height:61px; z-index: 99999}

/********************************* jcarousel *****************************/
/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
    position: relative;
    overflow: hidden;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
}
.sticky-footer{
	display: none;
}
@media screen and (min-width: 991px) and (max-width: 1024px){
	.blk_design ul li{
		width: 340px;
	}
	.blk_design .jcarousel,
	.blk_design.fix .jcarousel{
		width: 100%;
	}
	.row{
		width: 100%;
	}
	#logo img{
		max-width: 180px;
		height: auto;
	}
	#header .vf_menu > ul > li{
		padding: 0 10px;
	}
}
@media screen  and (min-width: 768px) and (max-width: 1024px){
	.vf_building .vf_list ul li{
		width: 48%;
	}
}
@media screen and (max-width: 1024px){
	.slideshow .vf_block{
		display: none;
	}
	html { -webkit-tap-highlight-color: rgba(0,0,0,0); }
}
@media screen and (max-width: 991px){
	#header{
		height: 64px;
	}
	#human_resource .ctn_left img{
		display: block;
		padding-bottom: 10px;
	}
	#human_resource .ctn_left,
	#human_resource .ctn_right{
		padding-left:  10px;
	}
	.vf_article .vf_ctn img{
		max-width: 100%;
	}
	.blk_design ul li{
		height:  350px;
	}
	.blk_design ul li .img img{
		width:  100%;
		height: auto;
		filter: none;
	}
	.blk_design .jcarousel{
		width:  100%;
	}
	.row{
		width: 100%;
		margin: 0 auto;
		padding: 0 15px;
	}
	.blk_design.fix ul li{
		width: 100%;
	}
	.blk_design.fix ul li .img img{
		max-height: 280px;
	}
	.blk_design ul li .preview{
		position: relative;
		bottom: 0;
	}
	.blk_design ul li .preview .desc{
		display: none;
	}
	#over_footer{
		display: none;
	}
	.blk_design.fix .jcarousel{
		width: 100%;
	}
	/* .blk_design.fix .jcarousel ul{
		width: 100%;
	} */
	.vf_ctn h3 img{
		max-width: 100%!important;
	}
	.vf_article .vf_list ul li{
		width:  48%;
	}
	#right + #content{
		margin-right: 0;
	}
	#right{
		display: none;
	}
	.vf_article .vf_list .vf_tit, 
	.vf_article .vf_view .vf_tit, 
	.vf_building .vf_list .vf_tit, 
	.vf_building .vf_view .vf_tit, 
	.vf_guestbook .vf_list .vf_tit, 
	.vf_partner .vf_tit, 
	.vf_search .vf_tit{
		position: relative;
		top: 0;
		margin-bottom: 20px;
		line-height: 30px;
	}
	.vf_article .vf_list ul li .preview{
		position: relative;
		bottom: 0;
		/* background: none; */
	}
	.vf_article .vf_list ul li .preview .desc{
		display: none;
	}
	#footer{
		display: none;
	}
	#header .vf_menu > ul > li{
		float: none;
		background: none;
	}
	#header .vf_menu > ul > li.submenu > a{
		display: inline-block;
		pointer-events: none;
	}
	#header .vf_menu > ul > li.submenu > ul > li{
		float: none;
		width: 100%;
	}
	#header .vf_menu{
		width: 70%;
	    right: -280px;
	    position: fixed;
	    transform: translate(301px,0);
	    transition: 1s;
	    z-index: 999;
	    background: #fff;
	    box-shadow: 1px 1px 1px #999;
	    height: 100vh;
	    top: 0;
	    bottom: 0;
	    float: none;
	    margin-top: 0;
	    padding-top: 20px;
	}
	#header.fixed-top{
		position: fixed;
	    z-index: 9999;
	    top: 0;
	    /* height: 100%;
	    width: 100%; */
	    right: 0;
	    background: #fff;
	}
	#header.fixed-top .row{
		height: 50px;
		background-color: #fff;
	}
	#header .vf_menu.active-menu{
		right: 0;
		transform: translate(0px,0px);
	}
	.vf_about .vf_view .ctn_right, 
	#company .ctn_right, 
	#human_resource .ctn_right,
	#project .ctn_right{
		width: 100%;
		float: none;
	}
	#top{
		background: none;
		display: none;
	}
	#logo{
		float: none;
		width: 67%;
		position: relative;
		z-index: 1;
		margin:  18px auto 0;
	}
	#logo img{
		max-width: 100%;
	}
	#logo p{
		position: relative;
		z-index: 1;
	}
	#logo a{
		display: block;
		text-align: center;
		width: 100%;
		position: relative;
		z-index: 1;
	}
	#search{
		display: none;
	}
	.vf_block{
		display: none;
	}
	.open-menu{
		position: absolute;
		z-index: 999;
		right: 15px;
		top: 15px;
	}
	.open-menu span{
		display: block;
		background-color: #d65501;
		border-radius: 4px;
		width: 30px;
		height: 4px;
	}
	.open-menu span:before{
		top: -6px;
	}
	.open-menu span:after{
		bottom: -6px;
	}
	.open-menu.is-active span{
		transition-delay: .12s;
	    transition-timing-function: cubic-bezier(.215,.61,.355,1);
	    transform: rotate(45deg);
	}
	.open-menu.is-active span:before{
		top: 0;
	    transition: top 75ms ease,opacity 75ms ease .12s;
	    opacity: 0;
	}
	.open-menu.is-active span:after {
	    bottom: -1px;
	    transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
	    transform: rotate(-90deg);
	}
	.open-menu span:before,
	.open-menu span:after{
		transition: top 75ms ease .12s,opacity 75ms ease;
		position: absolute;
	    width: 30px;
	    height: 4px;
	    transition-timing-function: ease;
	    transition-duration: .15s;
	    transition-property: transform;
	    border-radius: 4px;
	    background-color: #d65501;
	    display: block;
	    content: "";
	}
	.vf_article .vf_list ul li .preview, 
	.vf_article .vf_next ul li .preview, 
	.vf_building .vf_list ul li .preview, 
	.vf_building .vf_next ul li .preview{
		position: relative;
		bottom: 0;
	}
	.vf_article .vf_next ul li .img img, 
	.vf_building .vf_list ul li .img img, 
	.vf_building .vf_next ul li .img img, 
	.vf_partner ul li img{
		max-height: 300px;
	}
	.vf_article .vf_list ul li .preview .desc,
	.vf_building .vf_list ul li .preview .desc{
		display: none;
	}
	.vf_building .vf_list ul{
		text-align: center;
		margin: 0 auto;
		display: block;
		padding: 10px 0;
	}
	.vf_building .vf_list ul li{
		display: inline-block;
		float: none;
	}
	.vf_about .vf_view .ctn_left, #company .ctn_left, #human_resource .ctn_left, #project .ctn_left{
		width: 100%;
		float: none;
	}
	#header .vf_menu > ul > li:last-child a{
		pointer-events: inherit;
	}
	.vf_ctn p img,
	.vf_ctn h4 img{
		max-width: 100%!important;
	}
	.mbn{
		top: -90px;
	}
	.vf_building .vf_next .jcarousel,
	.vf_article .vf_next .jcarousel{
		width: 100%;
	}
	.sticky-footer{
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		height:  45px;
		background-color: #d65503;
		bottom: 0;
		padding: 15px 10px;
		text-align: center;
	}
	.sticky-footer span{
		color:  #fff;
		display: inline-block;
		font-size: 16px;
	}
	.sticky-footer .hotline-ft,
	.sticky-footer .sms-ft{
		position: relative;
	}
	.sticky-footer .hotline-ft{
		padding-left: 25px;
		padding-right: 15px;
	}
	.sticky-footer .hotline-ft:before{
		background: url('../img/phone1.png') no-repeat;
	    background-size: contain;
	    content: "";
	    width: 30px;
	    height: 30px;
	    position: absolute;
	    left: 0;
	    top: -3px;
	}
	.sticky-footer .sms-ft:before{
		position: absolute;
		content: "";
	    width: 30px;
	    height: 30px;
    	left: 0;
		background: url('../img/tuvan.png') no-repeat;
		background-size: contain;
	}
	.sticky-footer span:last-child{
		padding-left: 40px;
	}
	.blk_design ul li .tit{
		font-size: 12px;
	}
	.information-block{
		padding:  20px;
	}
	.information-block h3{
		font-size: 20px;
		font-weight: 600;
		padding-bottom: 10px;
	}
	.information-block p{
		padding-bottom: 10px;
		line-height: 20px;
	}
	#header .vf_menu > ul > li.submenu{
		position: inherit;
	}
	#header .vf_menu > ul > li.submenu > ul{
		transform: translate(301px,0);
		top: 0;
		bottom: 0;
		padding-top: 70px;
	}
	#header .vf_menu > ul > li.submenu .back,
	#header .vf_menu > ul > li.submenu1 .back{
		display: none;
	}
	#header .vf_menu > ul > li.submenu.activesub .back,
	#header .vf_menu > ul > li.submenu1.activesub .back{
		display: block;
		top: 18px;
		color: #000;
		position: absolute;
		z-index: 999;
		font-size:  16px;
		text-transform: uppercase;
		background: rgba(0,0,0,.13);
		padding: 10px;
		font-weight: 600;
	}
	#header .vf_menu > ul > li.submenu.activesub > ul{
		transform: translate(0,0);
		left: 0;
		opacity: 1;
		width: 100%;
	}
	#header .vf_menu > ul > li > ul{
		background:  #fff;
		z-index: 998
	}
	#header .vf_menu ul ul li a{
		color: #000;
		font-size: 16px;
		text-transform: uppercase;
		line-height: 20px;
	}
	#header .vf_menu ul{
		padding-top:  30px;
	}
	.blk_design .jcarousel-control-prev,
	.blk_design .jcarousel-control-next{
		background-size: cover;
	}
	.blk_design .jcarousel-control-prev{
		width: 26px;
		height: 32px;
		background: url("../img/owl_prev-mb.png") no-repeat;
		top: 48%;
		transform: translateY(-48%);
	}
	.blk_design .jcarousel-control-next{
		background: url("../img/owl_next-mb.png") no-repeat;
		width: 26px;
		height: 32px;
		top: 48%;
		transform: translateY(-48%);
	}
	.blk_design .jcarousel-control-prev{
		left: 0;
		right: inherit;
	}
	.vf_building .vf_next .jcarousel-control-next,
	.vf_building .vf_next .jcarousel-control-prev{
		top: 50%;
	}
	.vf_building .vf_next .jcarousel-control-next{
		right: 40px;
	}
	.vf_building .vf_next .jcarousel-control-prev{
		left: 40px;
	}
}
@media screen and (max-width: 640px){
	.vf_ctn iframe{
		width: 100%!important;
	}
	.mbn ul li{
		width: 65px;
		background: rgba(0, 0, 0, 0.5);
		margin-right: 8px;
		height: auto;
		line-height: 30px;
		margin-bottom: 10px;
	}
	.mbn ul li:last-child{
		margin-right: 0
	}
	.mbn ul li a{
		font-size: 9px;
	}
	.vf_article .vf_list ul li{
		width: 100%;
		height: 250px;
	}
	.vf_article .vf_list ul li img{
		max-height: 200px;
	}
	#human_resource .ctn_left img,
	#project .ctn_left img{
		max-width: 100%;
	}
	#company .ctn_right{
		margin-bottom: 20px;
	}
	#company .ctn_right img{
		max-width: 100%;
	}
	.building .blk_design{
		padding-bottom: 5px;
	}
	.building .blk_design.fix ul li{
		height:  330px;
	}
	.slideshow + .row .blk_design{
		padding-bottom: 25px;
	}
	.slideshow + .row .blk_design ul li{
		height: 330px;
	}
	.vf_article .vf_next ul li,
	.vf_building .vf_next ul li{
		height: 170px;
	}
	.vf_article .vf_next ul li .img img,
	.vf_building .vf_next ul li .img img, 
	.vf_partner ul li img{
		max-height: 120px;
	}
	.building .blk_design + .blk_design{
		padding-top: 15px;
	}
}
@media screen and (min-width: 560px) and (max-width: 820px){
	.blk_design ul li .img img,
	.blk_design.fix ul li .img img{
		max-height: 180px;
	}
	.blk_design ul li{
		height: 220px;
	}
	.building .blk_design.fix + .blk_design.fix{

	}
	.building .blk_design.fix + .blk_design ul li .tit{
		font-size: 11px;
	}
	.building .blk_design.fix ul li {
		max-height: 220px;
	}
}
@media screen and (max-width: 413px){
	.slideshow + .row .blk_design{
		padding-bottom: 5px;
	}
}
@media screen and (max-width: 359px){
	.mbn ul li {
	    width: 60px;
	    margin-right: 4px;
	    height: auto;
	    line-height: 30px;
	    margin-bottom: 10px;
	}
	.mbn ul li a{
		font-size: 8px; 
	}
	#header {
	    height: 50px;
	    background: #fff;
	    width: 100%;
	}
	#header #logo img{
		max-width: 180px;
		height: auto;
	}
	#header.fixed-top .row{
		height: 48px;
	}
	.information-block h3{
		font-size:  16px;
	}
}


.topinfo{float:left}
.topinfo p{float:left}