@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400|Oswald|Open+Sans+Condensed:300,700');

::-webkit-scrollbar:horizontal {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

body, html {margin:0 auto; padding:0; text-align:center; background:url(../images/bgPattern.gif) top center repeat-x}
img {border:0px}
.cB { clear:both;}
.cR { clear:right;}
.bg_grey { background-color:#f1f1f1;}
#header, #logo, #contact, ul, li, #share { margin:0; padding:0;}
.previewBar { background-color:rgba(0,255,68,0.5); color:white; height: 50px; text-align: center; display: inline-block; line-height: 50px; position: fixed; width: 100%; left:0; z-index:100 }
p{font-family:"Open Sans","Microsoft JhengHei"; margin:0 0 25px 0; padding:0; text-align: justify;}
p~ul li{font-family:"Open Sans",'Microsoft JhengHei'; margin:0; padding:0; text-align: justify;}
ul {font-family:"Open Sans", "Microsoft JhengHei"; margin-left:17px; text-align: justify;}
h1 {font-family:"Oswald", "Microsoft JhengHei"; font-size:16px; color:#981b1e; margin:0 0 20px 0; padding:0; letter-spacing:1px; font-weight:700}
h2 {font-family:"Open Sans", "Microsoft JhengHei"; font-size:15px; color:#333; margin:0; padding:0; letter-spacing:1px}
h3{ font-family:"Open Sans", "Microsoft JhengHei"; margin:0 0 25px 0; padding:0}
h4 {font-family:"Open Sans", "Microsoft JhengHei"; font-size:22px; line-height:29px; color:#981b1e; margin:0 0 20px 0; padding-top:10px; font-weight:bold;}
.date {font-family:"Open Sans", "Microsoft JhengHei"; font-size:11px; margin:0 0 20px 0; color:#999999}
a:link { color:#981b1e; text-decoration:none}
a:visited { color:#981b1e; text-decoration:none}
a:hover { color:#981b1e; text-decoration:underline}
a:active { color:#981b1e; text-decoration:none}
.highlight { font-weight:bold;}
.highlightRed { font-weight:bold; color:#981b1e}
/*  */
.spaceL10 {margin-left:10px}
.spaceR10 {margin-right:10px}
.spaceT10 {margin-top:10px}
.spaceB10 {margin-bottom:10px}
.spaceL5 {margin-left:5px}
.spaceR5 {margin-right:5px}
.spaceT5 {margin-top:5px}
/*  */
.width50 {width:50px}
.width100 {width:100px}
/*  */
.navHome { position:relative; top:9px; left:0px; margin-right:12px}
/*  */
#header { height:144px; width:960px; margin:0 auto; padding:0; position: relative; }
#logo { position:relative; top:27px; left:0px; z-index:1; float:left; width:360px; height:42px;}
#logo a { display: block; }
.menu { background:url(../images/menu.png) center center no-repeat; width:30px; height:30px; position:absolute; top:30px; right:20px; display: none;}
/*  */
.contact_box .flexslider { background:none}
.contact_box {background-color:#981b1e}
.contact_box {border-top: 1px solid white; height: 104px; width:275px; float:right}
.contact_box.process {border-top: 1px solid white; height: 104px; width:275px; right:0; z-index: 10; position: absolute}
#actbox-slider {width:136px; float:left; background:none; margin: 17px 10px;}
#contact { float:right; margin:0; padding:0; font-size:12px; margin-top:10px; font-weight:bold}
#contact ul{list-style:none;}
#contact ul li{ float:left}
/*  */
#share { float:right; margin-top:23px; padding:0; clear:both}
#share ul {list-style:none}
#share ul li{ float:left}
.share-panel { padding: 10px 0px; position: relative; right: 0; text-align: right; }
.share-panel ul { margin: 0; padding: 0; list-style: none; font-weight: 400; display:inline-block}
.share-panel ul li {
    display: inline-block;
    vertical-align: middle;
}
.share-panel ul a li {
    width: 36px;
    height: 36px;
    display: inline-block;
    margin-left: 10px;
}
.share-panel ul a:nth-child(2) li {
    background: url(../images/share-fb.png) center center no-repeat;
}
.share-panel ul a:nth-child(3) li {
    background: url(../images/share-twit.png) center center no-repeat;
}
.share-panel ul a:nth-child(4) li {
    background: url(../images/share-weibo.png) center center no-repeat;
}
.share-panel ul a:nth-child(5) li {
    background: url(../images/share-wechat.png) center center no-repeat;
}
.share-panel ul a:nth-child(6) li {
    background: url(../images/share-whatsapp.png) center center no-repeat;
}
.share-panel ul a:nth-child(7) li {
    background: url(../images/share-mail.png) center center no-repeat;
}
/*  */
#nav ul{ list-style:none; margin:0; padding:0; float:left; position:relative; top:52px; left:15px}
/*
#nav ul li.n1 {float:left; background:url(../images/nav-home.png) top left no-repeat; width:16px; height:15px}
#nav ul li.n2 {float:left; background:url(../images/nav-2-about-hkemc.png) top left no-repeat; width:129px; height:50px}
#nav ul li.n3 {float:left; background:url(../images/nav-3-mediation.png) top left no-repeat; width:129px; height:50px }
#nav ul li.n4 {float:left; background:url(../images/nav-4-room-rental.png) top left no-repeat; width:129px; height:50px }
#nav ul li.n5 {float:left; background:url(../images/nav-5-training.png) top left no-repeat; width:129px; height:50px }
#nav ul li.n6 {float:left; background:url(../images/nav-6-upcoming-news.png) top left no-repeat; width:129px; height:50px }
#nav ul li.n7 {float:left; background:url(../images/nav-7-contact-us.png) top left no-repeat; width:129px; height:50px }
*/
/* #nav ul li:hover { background-position:bottom}  */
#nav ul li.active { background-position:bottom; color:#981b1e; text-align: center; font-family:"Open Sans","Microsoft JhengHei"; line-height: 60px;} 

.lang { width:auto; height:15px; border:#ccc solid 1px; text-align: center; line-height: 15px; padding: 0 5px; margin-left: 3px;}

#footer { border-top:#999 solid 1px; width:960px; font-family:Arial; font-size:10px; margin:0 auto; margin-bottom:20px}
#note { font-family:"Open Sans"; font-size:10px; line-height:15px; clear:both}
#copyright { font-family:"Open Sans"; float:left; padding-top:7px}
#footerNav { float:right; padding-top:7px;padding-bottom:7px}  
#footerNav ul{ list-style:none; margin-bottom:20px}
#footerNav ul li{ float:left; padding-left:5px;padding-right:5px;}
#footerNav ul li:not(:first-child):before {content:"|";padding-right:5px;}
#footerNav ul li {content:"|";padding-right:5px;}
#footerNav ul li:hover {/*text-decoration:underline*/}

.headline.en.mobile,.headline.zh.mobile,.headline.cn.mobile { display: none;  }
#main-slider {width:674px; padding:0px 143px;}
#secondary-slider {width:178px; float:left; margin-right:10px}
.asideTitle { color:#981b1e; font-family: Oswald, sans-serif, 'Microsoft JhengHei';font-stretch:semi-condensed; text-align: left; font-size:18px }
/*  */
.mv{ padding: 0; z-index:10; position:relative; top:10px; width:960px; height:350px; text-align:center; margin:0 auto; margin-top:0px; margin-bottom:20px}
.mvShort{ padding: 0; z-index:10; position:relative; top:10px; left:0; width:960px; height:124px; text-align:center; margin:0 auto;  margin-bottom:20px;}
.processBg{ padding: 0; z-index:10; position:relative; top:10px; left:0; width:960px; height:350px; text-align:center; margin:0 auto; margin-top:0px; margin-bottom:20px; background:url(../images/process-bg.png) left bottom repeat-x; background-color:#fff}
.rentalBg{ z-index:10; position:relative; top:10px; left:0; width:960px; height:403px; text-align:center; margin:0 auto; background-color:#FFFFFF; margin-bottom:20px}
#section { width:960px; text-align:center; margin:0 auto; margin-top:10px; margin-bottom:65px}
#section.hp { position:relative; top:0; left:0; height:387px;}
#ads { width:960px; text-align:center; margin:0 auto; display:inline-block;}
#content  { width:960px; text-align:center; margin:0 auto; display:inline-table; position: relative; margin-top:10px}
#copyContent ul li {margin-bottom: 10px;}
#news { width:400px; display:inline-block; text-align:left; height:auto; position: relative;}
#promo { width:524px;  text-align:left; height:auto; float:right}
#hpHeadlineBox { position:absolute; top:25px; right:25px; z-index:11; display:inline; width:275px}
.contactBox { float:left; background:none; margin: 17px 10px; width:275px; height:104px; background-color:#981b1e; border-top: #FFFFFF solid 1px;}
#boxContent {background-color:#981b1e; height:273px; border-bottom:#FFFFFF solid 1px}
#sectionBox {position:absolute; bottom:10px; right:10px; z-index:11; display:inline-block; width:275px; height:196px; background-color:#981b1e}
.rollingContact { height:70px; color:white; font-weight: 800; font-size:23px; font-family: Oswald, sans-serif, 'Microsoft JhengHei';font-stretch:semi-condensed; text-align: left }
.rollingContact.en {line-height: 25px; }
.rollingContact.en>div>a.number{ font-family: "Open Sans"; font-size:28px; font-weight: 200; line-height: 28px; color:white;}
ul.slides li>.rollingContact.en { position: relative }
ul.slides li:nth-child(2)>.rollingContact.en>div { position: relative; top:10px;}
ul.slides li:nth-child(4)>.rollingContact.en>div { position: relative; top:10px;}
#sectionHeadlineBox {position:absolute; bottom:10px; right:10px; z-index:12; width:794px; height:104px; border:#FFFFFF solid 0px; padding:0; margin:0}
#sectionHeadline { text-align:left; background: rgba(255, 255, 255, .5); height:104px; width: 100%; position: absolute; }
#call_icon {width: 25px; float:left; margin:36px 10px;}
#form_icon {width: 31px; float:left; margin:34px 10px;}
.vline { width:1px; height:66px; background-color:#fff; margin:19px 5px; float:left;}

.sectionImgFAQ { background:url(../images/mediation-faq.png) top left no-repeat}
.sectionImgIssue { background:url(../images/issue-mediation-notice.png) top left no-repeat}
.sectionImgTraining { background:url(../images/training.png) top left no-repeat}
.sectionImgResourses { background:url(../images/resources-centre.png) top left no-repeat}
.kv-hisory { background:url(../images/about-hkemc.png) center center no-repeat; width:960px; height:350px; }
.kv-vision { background:url(../images/vision.png) center center no-repeat; width:960px; height:350px; }
.kv-team { background:url(../images/our-team.png) center center no-repeat; width:960px; height:350px; }
.kv-why-mediation { background:url(../images/mediation-money-time.png) center center no-repeat; width:960px; height:350px; }
.kv-what-mediation { background:url(../images/what-is-mediation.png) center center no-repeat; width:960px; height:350px; }
.kv-who-need-mediation { background:url(../images/who-needs-mediation.png) center center no-repeat; width:960px; height:350px; }
.kv-out-mediation { background:url(../images/mediation-fee-and-charge.png) center center no-repeat; width:960px; height:350px; }
.kv-room-rental { background:url(../images/room-rental.png) center center no-repeat; width:960px; height:350px; }
.kv-our-mediation { background:url(../images/mediation-fee-and-charge.png) center center no-repeat; width:960px; height:350px;}

.headline { position:absolute; top:40px; left:20px}
.headline.cn { color:#981b1e; font-family: Oswald, sans-serif, 'Microsoft JhengHei';font-stretch:semi-condensed; font-size: 28px; font-weight: bold; top:33px;}
.headline.zh { color:#981b1e; font-family: Oswald, sans-serif, 'Microsoft JhengHei';font-stretch:semi-condensed; font-size: 28px; font-weight: bold; top:33px;}
.headline.en { color:#981b1e; font-family: Oswald, sans-serif, 'Microsoft JhengHei';font-stretch:semi-condensed; font-size: 30px; font-weight:700; top:30px; line-height: 40px; }
.headline.en.top10{top:10px;}
.headline.zh.white {padding: 10px; float: left; clear: both; position: relative; color:white; font-family: Oswald, sans-serif, 'Microsoft JhengHei';font-stretch:semi-condensed; font-size: 28px; font-weight: bold; top:0; left:0; }
.headline.en.white {padding: 10px; float: left; clear: both; position: relative; color:white; font-family: Oswald, sans-serif, 'Microsoft JhengHei';font-stretch:semi-condensed; font-size: 28px; font-weight: bold; top:0; left:0; }
.hl_top_20 { top:20px;}
#sectionAct { text-align:right; position:absolute; top:0; right:0; border-bottom:#000000 solid 0px; padding:0; margin:0}
#copyContent {width:730px; text-align: justify; margin:0 0 10px; border:#000 solid 0px;  min-height:250px; font-size:14px; color:#333333; line-height:24px; display:inline-table; vertical-align:top;}
.col { width:50%;vertical-align: top; display: inline-block; }
#floor { position:absolute; top:45px; left:45px; width: 516px;}

#aside  { width:155px; text-align:left; padding-right: 50px;  min-height:250px;  font-family:"Open Sans Condensed",sans-serif, 'Microsoft JhengHei'; font-weight:600; font-size:13px; list-style:none; line-height:15px; display:inline-block; vertical-align:top;   margin:0 20px 0 0; color:#000; text-decoration:none;}
#aside.zh { letter-spacing: 1px}
#aside li a { text-decoration:none; color:#666}
#aside li.active>a { color:#981b1e; text-decoration:none;}
#aside li a:hover { color:#981b1e; text-decoration:underline;}
#aside li:first-child{ margin-bottom:15px; margin-top:6px}
#aside li:not(:first-child) {margin-bottom:10px}


#bis {width:960px; margin:0 auto; text-align:center; margin-top:10px; margin-bottom:0px; position:relative; z-index:12; text-decoration:none; display:inline-block}
#bis li { font-family:"Open Sans",'Microsoft JhengHei';  font-size:11px; color:#999999; list-style:none; text-align:left; float:left; text-decoration:none; }
/*#bis li:not(:last-child):after {content:' › ';}*/
#bis li.active { text-decoration:none; color:#666666}
#bis li a:hover { text-decoration: underline; color:#666666; cursor:pointer}
#bis li a:link, #bis li a:visited {color:#999999; text-decoration:none}


.link{ background:url(../images/link-arrow.png) 0px 2px no-repeat; color:#981b1e; padding-left:13px; margin:5px 0 5px 0; display:block; font-family:"Open Sans",'Microsoft JhengHei'; font-size:14px; margin-bottom:20px}
.mTB5 {margin:5px 0 5px 0 !important;}
.mB20 {margin-bottom:20px !important;}
.thumb {display:inline; width:178px}
.stepInfo { font-family:"Open Sans",'Microsoft JhengHei'; font-size:13px; font-weight:600; position:relative; top:37px; left:170px; width:320px; display:none;}
.stepInfo.zh {font-family: 'Open Sans Condensed', sans-serif, 'Microsoft JhengHei'; font-size: 16px; }
#step { margin:0 auto; text-align:center; width:960px; display:inline-block}
#time { width:170px; display:inline-block; text-align:left; height:75px; border:#999999 solid 0px;  vertical-align:top; margin-right:10px; font-family:"Open Sans"; font-size:13px; }
#time2 { width:130px; display:inline-block; text-align:left; height:75px; border:#999999 solid 0px;  vertical-align:top; margin-right:10px; font-family:"Open Sans"; font-size:13px; }
.case { width:30%; display:inline-block; text-align:left; height:75px; border:#999999 solid 0px;  vertical-align:top; margin-right:10px; font-family:"Open Sans"; font-size:13px; }

.caseIcon1{width:112px; display:inline-block; background:url(../images/case1.png) 0 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon2{width:112px; display:inline-block; background:url(../images/case2.png) 0 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon3{width:112px; display:inline-block; background:url(../images/case3.png) 0 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon4{width:112px; display:inline-block; background:url(../images/case4.png) 0 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon5{width:112px; display:inline-block; background:url(../images/case5.png) 0 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon6{width:112px; display:inline-block; background:url(../images/case6.png) 10px 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon7{width:112px; display:inline-block; background:url(../images/case7.png) 10px 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon8{width:112px; display:inline-block; background:url(../images/case8.png) 0 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.caseIcon9{width:112px; display:inline-block; background:url(../images/case9.png) 0 0 no-repeat; padding-left:75px;font-family:"Open Sans",'Microsoft JhengHei'; line-height: 18px; height: 75px;}
.timeIcon1{width:112px; display:inline-block; background:url(../images/icon-time.png) 0 0 no-repeat; padding-left:55px}
.timeIcon2{width:112px; display:inline-block; background:url(../images/icon-time9to6.png) 0 0 no-repeat; padding-left:55px}
.timeIcon3{width:112px; display:inline-block; background:url(../images/icon-time9to1.png) 0 0 no-repeat; padding-left:55px}
.timeIcon4{width:112px; display:inline-block; background:url(../images/icon-time2to6.png) 0 0 no-repeat; padding-left:55px}
.locationIcon{font-family:"Open Sans", "Microsoft JhengHei";  display:inline-block; background:url(../images/icon-direction.png) 0 0 no-repeat; padding-left:55px}
.walkIcon{font-family:"Open Sans", "Microsoft JhengHei"; display:inline-block; background:url(../images/icon-walk.png) 0 0 no-repeat; padding-left:55px}
/* dt dd dl */

#rate dl {font-family:"Open Sans",'Microsoft JhengHei'; font-size:13px; margin:0; padding:0}
#rate dt { margin:0; color:#981b1e; font-weight:600; display:inline-block; width:260px;  border-bottom:#f2e3e4 solid 1px; vertical-align:middle; float:left}
#rate dd { text-align:left; display:inline-block; width:140px; vertical-align:middle; border-bottom:#f2e3e4 solid 1px; margin:0;padding:0px; float:left}
#rate dd>span { margin-left: 53px; display: block}
#rate .th {width:25%}
#rate .th.am {width:25%; padding-left: 0px; background:#f2e3e4 url(../../images/icon-time-8hr.png) no-repeat 0 5px;}
#rate .th.pm {width:25%; padding-left: 0px; background:#f2e3e4 url(../../images/icon-time-4hr.png) no-repeat 0 5px;}
.th { height:60px; background-color:#f2e3e4; margin:0;border-bottom:#f2e3e4 solid 1px; }
.eve {background-color:#faf3f4}
.de {height:60px; margin-bottom:20px}


.map_container {
	position: relative;
	top: 10px;
	left: 0;
	z-index: 10;
	width: 960px;
	height: 369px;
	text-align: center;
	margin: 0 auto 20px;
	background-color: #FFFFFF
}
#map_canvas {
	margin: 0 auto;
	text-align: center;
	width: 960px;
	height: 349px;
	display: block;
	float: left;
	clear: both;
}
.mv.vision { width:100%; background:url(../images/vision.png) center center no-repeat; height:350px; background-size:contain}
#hpHeadlineBox.contactBoxPage{position: absolute; top: 10px; right: 10px; background-color:#981b1e;}
#contact_content {
	float: left;
	clear: both;
	text-align: left;
}
#contact_content>ul { list-style: none; margin: 0; padding: 0}
#contact_content>ul>li.contact_colA {
	float: left;
	font-family: "Open Sans",'Microsoft JhengHei';
	font-size: 12px;
	height: auto;
	margin: 0px 10px 10px 10px;
	width: 70px;
	color: #FFF;
}
#contact_content>ul>li.contact_colB {
	float: left;
	font-family: "Open Sans",'Microsoft JhengHei';
	font-size: 12px;
	height: auto;
	margin: 0px 10px 10px 0px;
	width: 160px;
	color: #FFF !important;
}
/*actbox style*/
.act_icon {
	cursor: pointer;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
.actSelected {
	opacity: 1;
	filter: alpha(opacity=100);
}
#upcomingCourse { width:480px; margin:0; padding:0 20px 0 0; border-right:#ccc solid 2px; display:inline-block; vertical-align:top} 
#upcomingNews { width:480px; margin:0; padding:0 20px 0 0; border-right:#ccc solid 2px; display:inline-block; vertical-align:top} 
#arhiveCourse { width:200px; margin:0 0 0 20px; padding:0; display:inline-block; vertical-align:top; font-family:sans-serif, 'Microsoft JhengHei';}
.courseCover {display:inline-block; border:#CCCCCC solid 1px; vertical-align:top}
.courseContent { display:inline-block; margin:0 0 0 10px; vertical-align:top}
.courseContentLG { display:inline-block; width:620px; margin:0 0 0 10px; vertical-align:top}
.newsContent { display:inline-block; width:480px; margin:0; vertical-align:top}
.articles:not(:last-child){ display:inline-block; border-bottom: #CCCCCC solid 1px}
.articles:not(:first-child){ margin-top:20px}
.defaultSubmitBtn {height: 30px; width: 172px; margin-top: 22px; font-family:sans-serif, 'Microsoft JhengHei';}
.sitemap-section ul { text-align:left;}
.sitemap-section li a { color:#000; text-decoration:none;}
.sitemap-section li a:hover { text-decoration: underline;}
.sitemap_col { width:230px; miin-height:280px; margin-right:30px; float:left; margin-bottom: 30px;}
.remark {font-size:10px}

table { margin:10px 0px;}
tr td { padding: 10px; }
/*how-to-become-a-mediator section*/
ul.subNav { text-align:left;}
ul.cpd_list {list-style-type: decimal;}
ul.cpd_list>li { margin:25px 0px;}
ul.pointform { margin:25px 0px 25px 30px;}
ul.asc {list-style-type: decimal; margin:25px 0px 25px 30px;}
ul.subsub { margin:25px 0px 25px 30px;}

.f_source { font-size:12px; color:#999999; margin-bottom: 0px;}

/*course detail*/
.course_field{
	margin:0px 0px 15px;
    height: 30px;
    text-indent: 5px;
}
.submit_success_msg{
	display:none;
}
.listB{ font-weight:bold; display:inline-block}
.listNormal{ font-weight:normal; display:inline-block}
.slideTxt { height: 139px; font-family:Oswald, sans-serif, 'Microsoft JhengHei'; background-color:#981b1e; color:white; display: inline-block; font-size:26px; text-align: left; padding:20px; font-weight: 600  }
.redBoxHeadline { font-family:Oswald, sans-serif, 'Microsoft JhengHei'; color:white; display: inline-block; font-size:26px; text-align: left; font-weight: 600  }

#issue_col1 {
	width: 45%;
	display: inline-block;
    font-family: "Open Sans",'Microsoft JhengHei';
}
#issue_col2 {
	width: 45%;
	display: inline-block;
    font-family: "Open Sans",'Microsoft JhengHei';
}
#issue_col1 input, #issue_col1 textarea, #issue_col2 input, #issue_col2 textarea {
	width: 270px;
}
#issue_col1 div, #issue_col2 div {
	margin: 5px 0px;
}
#iid {
	margin: 5px 0px;
}
#iid_content textarea {
	width: 655px;
}
#errormsg {
	color: #F00;
}
.cR {
	color: #F00;
}
.vc_txt {
	margin: 5px 0px;
}
.vc_field {
	float: left;
	margin-right: 15px;
	width: 100px;
}
.vc_field input {
	width: 100px;
}
.vc_img {
	float: left;
	clear: right;
}
.submitBtn {
	clear: both;
	padding: 10px 0px;
}
#mainBan.flexslider .slides li { height: 387px; }
#mainBan.flexslider .slides li:nth-child(1) { background:url(../images/hp-visual-mediation.png) top center no-repeat; }
#mainBan.flexslider .slides li:nth-child(2) { background:url(../images/hp-visual-marriage.png) top center no-repeat; }
#mainBan.flexslider .slides li:nth-child(3) { background:url(../images/hp-visual-training.png) top center no-repeat; }
#mainBan.flexslider .slides li {  }
.mobMenu { display: none}
.submenu { display: inline-block; width:155px;}
.location {display:inline; float:left; margin:0 10px 0 0; width: 174px;}
.col1 {width:360px; border:#000000 solid 0px; display:inline-block; height:200px; vertical-align:top}
a.ads{margin-bottom: 15px; display: block}
@media (max-width: 960px) {
    #header{ width:100%}
    #logo { left:10px;}
    #contact,#share { margin-right: 10px;}
    #section { width: 100%;}
    nav #mainNav.zh {left:10px;}
	#ads { width:100%; }
    #footer { width: 100%; }
	#copyright { float:left; margin-left: 20px;}
	#footerNav { margin-right: 20px;}
	.mvShort { width: 100%; }
	#sectionHeadlineBox { width:76%;}
	#content,#bis { width:100%; margin-left: 10px; }
	#copyContent { width:70%; }
    .submenu { display:inline-block;}
	.mobMenu {display: none; }
	.mv {width:100%}
	#aside { padding-right: 0}
    #upcomingCourse { width: 100%; padding:0; border-right:#ccc solid 0px; border-bottom:#ccc solid 1px;}
    #arhiveCourse {width: 100%; margin: 0px; margin-top: 20px; }
    .course_form_area form div { width: 45%; display: inline-block; }
    .course_form_area form div input { width:100%}
	.caseIcon1, .caseIcon2, .caseIcon3, .caseIcon4, .caseIcon5, .caseIcon6, .caseIcon7, .caseIcon8, .caseIcon9{width:100px; }
}
@media (max-width: 768px) {
	.headline.en.mobile { display: block; position:relative; top:inherit; left:0px; padding: 0 15px; margin: 20px 0; text-align: left; font-size:26px;}
    .headline.zh.mobile { display: block; position:relative; top:inherit; left:0px; padding: 0 15px; margin: 20px 0; text-align: left; font-size:26px;}
    .headline.cn.mobile { display: block; position:relative; top:inherit; left:0px; padding: 0 15px; margin: 20px 0; text-align: left; font-size:26px;}
	body, html { background:white}
	::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
	::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; height: 1px; }
	::-webkit-scrollbar:horizontal { width: 2px;height: 2px;}
    p,p~ul li,ul{text-align: left;}
	.menu { display: block; cursor: pointer;}
    .mobMenu { display: none; width:100%; height: 700px; position: fixed; z-index: 100; background-color:#981b1e; min-height:700px; overflow-y: scroll }
    .mobMenu>ul { list-style: none; margin: 0; padding: 0;}
    .mobMenu>ul>li { display: block; min-height: 50px; border-bottom: #c98a8c 1px solid; padding: 0px; color:white; line-height: 50px; margin-left:0px;}
    .mobMenu>ul>li a {color:white; margin-left: 20px}
    .mobMenu>ul>li>ul{background-color:white;list-style: none; display: none; margin-left: 0px; }
    .mobMenu>ul>li>ul>li{ border-bottom:#ccc 1px solid; text-align: left; font-size: 14px; }
    .mobMenu>ul>li>ul>li a {color:#981b1e;}
    .switchLang { height: 50px; background-color:white; padding-top: 10px; padding-bottom: 10px; padding-right: 10px;}
    .switchLang a >.lang { width:50px; display: inline-block; height:45px; font-size: 18px; line-height: 45px; float: right; font-family:"Open Sans","Microsoft JhengHei";}
    .navHome { background:url(../images/icon-home.png) center center no-repeat; position: absolute; top:10px; left:50px; width:50px; height: 50px;}
    .close { background: url(../images/icon-back.png) center center no-repeat; position: absolute; top:17px; left:15px; width:40px; height:40px;}
    .contactList{display: table; width: 100%; padding: 10px 0}
    .contact {height: 50px; width: 50%; display: table-cell; text-align: center; margin: 0 auto; padding:0; border:yellow solid 0px; }
    .contact a {color:white; height: 80px; font-size: 16px; font-family:"Open Sans",'Microsoft JhengHei'; }
    .contact .iconIssue { background:url(../images/icon_form.png) center center no-repeat; width:100%; height:50px; display: inline-block;}
    .contact .iconCall { background:url(../images/icon_call.png) center center no-repeat; width:100%; height:50px; display: inline-block;}
    .ss { height: 80px; width:100%; display: block; background-color:white; margin: 0 auto; text-align: center; }
    .ss ul { list-style: none; margin: 0 auto; text-align: center; padding-top: 15px}
    .ss ul a li { display: inline-block; width: 40px; height: 40px; margin: 5px; border-radius: 2px;}
    .ss ul a:nth-child(1) li { background:url(../images/icon-facebook-m.png) center center no-repeat; background-size:100%;}
    .ss ul a:nth-child(2) li { background:url(../images/icon-googlePlus-m.png) center center no-repeat; background-size:100%;}
    .ss ul a:nth-child(3) li { background:url(../images/icon-linkin-m.png) center center no-repeat; background-size:100%;}
	#mainNav { display: none; }
	#contact { display: none; }
	#share { display: none; }
	#logo{ width:270px; top:32px; }
	.rollingContact.en>div>a.number{ font-size:22px; font-weight: 200; line-height: 33px;}
	#actbox-slider {width:150px; margin: 25px 5px;}
	#mainBan.flexslider .slides li { width:100% }	
	#mainBan.flexslider .slides li:nth-child(1) { background:url(../images/hp-visual-mediation-m.png) top center no-repeat;height: 320px; background-size:cover }
	#mainBan.flexslider .slides li:nth-child(2) { background:url(../images/hp-visual-marriage-m.png) top center no-repeat; height: 320px; background-size:cover}
	#mainBan.flexslider .slides li:nth-child(3) { background:url(../images/hp-visual-training-m.png) top center no-repeat;height: 320px; background-size:cover }
	
	#hpHeadlineBox { top:220px; width: 300px; right: 0px;  }
	.contact_box.process { position: inherit; width: 100%}
	#sectionHeadline { position: relative; /*test*/ display:none;}
	.headline.en.white {display:none;}
    #header { height: 100px; background:url(../images/bgPattern.gif) top left repeat-x;}
	.slideTxt { height: 70px; font-size:22px; padding: 15px; width: 100%;}
    .contactBox{width:250px;}
    #promo { width:100%; float: none}
    #promo a { padding:0px  }
    #ads { width:100%; }
    .flex-control-nav.flex-control-paging { display: none;}
	.contact_box {width:100%}
	
	#sectionHeadlineBox { width:100%; right:0px; bottom:-104px; /*test*/ display:none; }
	.kv-hisory { background:url(../images/about-hkemc-m.png) center center no-repeat; width:100%; height:200px; background-size:cover }
	.kv-vision { background:url(../images/vision-m.png) center center no-repeat; width:100%; height:200px; background-size:cover }
	.kv-team { background:url(../images/our-team-m.png) center center no-repeat; width:100%; height:200px; background-size:cover }
	.kv-why-mediation { background:url(../images/mediation-money-time-m.png) center center no-repeat; width:100%; height:200px; background-size:cover }
	.kv-what-mediation { background:url(../images/hp-visual-mediation-m.png) center center no-repeat; width:100%; height:200px; background-size:cover }
	.kv-who-need-mediation { background:url(../images/who-needs-mediation-m.png) center center no-repeat; width:100%; height:200px; background-size:cover }
	.kv-our-mediation { background:url(../images/mediation-fee-and-charge-m.png) center center no-repeat;  width:100%; height:200px; background-size:cover}
	.sectionImgFAQ { background:url(../images/mediation-faq-m.png) top center no-repeat;  width:100%; height:170px; background-size:cover}
	.kv-room-rental { background:url(../images/room-rental-m.png) center center no-repeat;  width:100%; height:170px; background-size:cover}
	
	#bis { display: none; margin-left:0}
	#aside {  padding: 0; margin: 0; min-height: inherit; width: 1000px;}
	.mv { width:100%;/* height: 170px*/ height: 220px; margin-bottom: 0;}
    .mv.vision { background:url(../images/vision-m.png) center center no-repeat; height:220px;background-size:cover}
    .map_container { width: 90%; margin-top: 15px; height:700px;}
    #map_canvas { width: 100%;}
	#content,#copyContent { width:100%; }
    #copyContent { text-align: left;}
	#content { margin-top: 0px; margin-left: 0}
	#content p,#content h1,#copyContent h2{margin: 20px;}
	#content ul {margin:15px 40px 0px 40px}
	ul#aside { }
	ul#aside li { display: inline-block; padding: 10px 20px; font-size:16px; border:#ccc 1px solid; border-radius: 5px; }
	.asideTitle { display: none!important;}
	.headline { display: none}
/*	.headline.generic { display: block}*/
	.submenu { overflow:hidden; overflow-x:scroll; height: 48px; border-bottom: #ccc solid 1px;}
	#footerNav { float:left;} 
    #main-slider { width: 100%; padding:0}
/*	#main-slider .slides li { width: 100%; }*/
	#step { width: 100%;}
	.flex-control-nav { width: 100%;}
	#secondary-slider {width:100%; float:none; margin-right:0px}
	#content ul.slides  {margin: 0; padding: 20px}
	#secondary-slider.flexslider { margin: 0}
	.link { margin-left: 20px;}
	.processBg { width:100%; height: 286px;}
	#main-slider .flex-control-nav.flex-control-paging { display: block}
	#main-slider .flex-control-nav { width:90%}
	.flex-direction-nav .flex-prev { left:10px!important;}
	.flex-direction-nav .flex-next {right:10px!important;}
	.flex-control-nav { position: relative!important; text-align: center!important; margin: 0 auto!important; bottom:-50px!important; z-index: 100;  }
	.processBg #sectionHeadlineBox { bottom:0; height: 70px; display: block}
	
    .processBg #sectionHeadline { background:rgba(255, 255, 255, 0.0); margin:0px; height: 70px; display: block}
    
	.stepInfo { left:0px; top:5px; width: 100%; font-size:14px;  padding: 10px;}
	.flex-direction-nav { position: relative; top:36px; }
	.caseIcon1,.caseIcon2,.caseIcon3,.caseIcon4,.caseIcon5,.caseIcon6,.caseIcon7,.caseIcon8,.caseIcon9 {padding-left:0; background-position: top center; width:85%; }
	.case { text-align: center; height: 170px; }
	.case span { display: block; margin-top: 50px;}
	.mvShort { width: 100%; }
	.mvShort.generic { width: 100%; height: 0 }
	.sectionImgFAQ { background:url(../images/mediation-faq-m.png) top center no-repeat; background-size:cover}
	#faqs { margin-left: 37px!important; margin-right: 20px!important; text-align: left}
	#issue_col1 { width:100%!important; }
	#issue_col2 { width:100%!important; }
	#issue_col1 div,#issue_col2 div {margin: 5px 20px}
	#iid_content textarea  { width:100%!important; }
	#iid_content,.vc_txt,.vc_field,.submitBtn { margin: 5px 20px }
	#issue_col1 input, #issue_col1 textarea, #issue_col2 input, #issue_col2 textarea {width:100%!important;}
	#iid { margin: 5px 20px!important;}
	.rentalBg { width: 100%; }
	.rentalBg #hpHeadlineBox { top:220px; width: 100%}
	#floor { position:relative; top:0px; width: 100%;left: 0px;}
	#floor #floorPlan{ width: 600px!important; }
	.rentalBg #boxContent { height: 165px;}
	#rate {padding:10px;}
    #rate .th {width:25%;height: 100px;line-height:20px; }
    #rate .th.am {width:25%; padding-left: 0px; background:#f2e3e4 url(../../images/icon-time-8hr.png) no-repeat 0 5px;}
    #rate .th.pm {width:25%; padding-left: 0px; background:#f2e3e4 url(../../images/icon-time-4hr.png) no-repeat 0 5px;}
    #rate dt { width: 30%!important }
    #rate dd { width: 23%!important  }
    #rate dd>span { margin-left:0; margin-top: 60px; line-height:20px;  }
	.location {float:none; margin:0 0px 10px 0; width: 100%}
	.col1 {width:100%; height:auto; }
	.walkIcon { margin-left: 20px; padding-right: 20px;}
	.locationIcon{ margin-left: 20px; padding-right: 20px;}
    ul.slides li>.rollingContact.en>div { position: relative; top:0px;}
    ul.slides li:nth-child(2)>.rollingContact.en>div{ position: relative; top:0px;}
    #upcomingNews,.newsContent { width: 100%; padding: 0}
    #upcomingCourse { width: 100%; padding: 0}
    .course_form_area form div { width: 100%; display: inline-block; margin: 0; padding: 0; }
    .course_form_area { padding: 0 20px; }
    .articles {padding: 20px;}
    #content h1.courseTitle { margin: 20px 0!important}
    .course_field { height: 40px; }
    #hpHeadlineBox.contactBoxPage{ top: 349px; right: 0px; width: 100% }
    #hpHeadlineBox .headline {/*display: block*/ }
	
	.sitemap_col { height: auto ; width: 100% }
	#content .sitemap_col ul {margin:15px 0px 0px 40px}
	
	.contact_colB { width: 70%;font-size:16px;}
	#mapster_wrap_0 { left:50%; margin-left:-150px;}
	#contact_content { margin-top: 20px;}
	#contact_content ul { width: 100%; display: inline-block; margin-left: 15px;}
	#contact_content ul li.contact_colA { font-size:16px; margin: 0 }
	#contact_content ul li.contact_colB { font-size:16px; width: 70% }
	#boxContent { border:none}
    #news { width:100%;}
    #news>h1 { margin-left: 20px;}
}
@media (max-width: 640px) {
    #logo{ width:240px; }
	#floor #floorPlan{ width: 300px!important;}
    /*#section.hp {height: 470px;}*/
    #hpHeadlineBox { top:320px; width:100%; right: inherit; display: inline; position:static}
    #actbox-slider {width:200px; border:green 0px solid;}
    ul.slides li>.rollingContact.en>div { top:0px;}
    ul.slides li:nth-child(2)>.rollingContact.en>div { top:0px;}
    ul.slides li:nth-child(4)>.rollingContact.en>div { top:0px;}
    .rollingContact.en>div>a.number {line-height: 30px; font-size: 22px; display: inline}
	#contact_content ul li.contact_colA { width: 30%  }
	#contact_content ul li.contact_colB { width: 70% }
	.contact_box{display: none; }
}
@media print
  {
	body, html, h1, h2, h3, ul, p, p~ul li, #copyContent, #aside, .date, #note, #copyright, .stepInfo, .link,#time , #time2, #case , #rate dl, #bis li, .contact_colA, .contact_colB, .locationIcon, .walkIcon{font-family: Arial, Helvetica, sans-serif;}
  }