body#mobile {
	position: relative;
	right: 0;
	-webkit-transition: right .3s;
	transition: right .3s;
}
body#mobile img { width: 100%; }
body#mobile.open {
	right: 250px;
}

/* CSS RESET DONE */
html, body#mobile { 
	height: auto; 
	font-family: sans-serif;
	font-size: 14px; 
	line-height: 1.3; 
	background: #fff; 
	color: #696969; 
	margin: 0; 
	padding: 0;
}


.header {
	margin-bottom: 0;
	position: relative;
}
#mobile .container {
	position: relative;
	width: 100% !important;
	min-width: 320px !important;
	padding: 0 !important;
	margin: 0 !important;
}



ul.side-menu {
	position: fixed;
	top: 0;
	right: -250px;
	width: 250px;
	height: 100%;
	background-color: #444;
	z-index: -1;
	-webkit-transition: right .3s;
	transition: right .3s;
	z-index: 99999;
}
ul.side-menu.open {
	right: 0;
}
ul.side-menu li {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 0 20px;
	text-align: left;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #555;
	-webkit-transition: top .3s;
	transition: top .3s;
}
ul.side-menu li.row {
	border: 0;
	position: static;
	top: 0;
	height: 0;
	-webkit-transition: none;
	transition: none;
}
ul.side-menu li.metro {
	position: absolute;
	padding: 0;
	height: 125px;
	text-align: center;
	background-color: #CCC;
}
ul.side-menu li.metro.half { width: 50%; }
ul.side-menu li.metro.full { width: 100%; }

ul.side-menu h2.title {
	text-align: left;
	padding: 0 20px;
	position: relative;
	top: -60px;
	font-size: 23px;
	line-height: 60px;
	height: 60px;
	background-color: #555;
	color: #fff;
	-webkit-transition: top .3s;
	transition: top .3s;
}

ul.side-menu li a {
	display: block;
	font-size: 12px;
	padding: 0;
	margin: 0;
	height: inherit;
	line-height: inherit;
	color: #fff;
}

ul.side-menu li.metro a {
	margin: 32px 0;
	height: 60px;
	font-size: 18px;
}
ul.side-menu li.metro a i { font-size: 40px; }

/* Colors */
ul.side-menu li.metro.blue { background-color: #5c84db; }
ul.side-menu li.metro.light-blue { background-color: #2FC2EF; }
ul.side-menu li.metro.purple { background-color: #a24fea; }
ul.side-menu li.metro.red { background-color: #e54747; }
ul.side-menu li.metro.pink { background-color: #ea4c89; }
ul.side-menu li.metro.green { background-color: #85e500; }
ul.side-menu li.metro.orange { background-color: #e28f00; }
ul.side-menu li.metro.teal { background-color: #00e2e2; }

    
.topHeader { display: block; position: relative; padding: 10px 15px; background: #fff; height: 40px; z-index: 9999; border-bottom: 1px solid #ccc;}
.topHeader .logo { width: 172px; height: 37px; margin: 0 auto; }
.topHeader a.menu-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 18px;
	z-index: 999999;
	width: 30px;
	height: 30px;
	border: 4px solid #aaa;
	color: #aaa;
	text-align: center;
	border-radius: 50%;
}
.topHeader a.home-icon { 
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 18px;
	z-index: 999999;
	width: 30px;
	height: 30px;
	border: 4px solid #aaa;
	color: #aaa;
	text-align: center;
	border-radius: 50%;
}
.topHeader a.menu-icon i, .topHeader a.home-icon i { line-height: 30px; }


.mainContents, .subContents { display: block; position: relative; padding: 10px; background: #eee; }
.subContents { padding: 7px; }
.mainContents .box { display: block; margin: 0 0 7px; position: relative; clear: both; overflow: auto; }
.mainContents .box .banner { margin: 0; padding:0; }
.mainContents .box .banner li { width: 32%; display: inline-block; padding: 0; }
.mainContents .box .banner li.wide { width: 66%; }
.mainContents .box .banner .left { float: left; }
.mainContents .box .banner .right { float: right; }
.mainContents .box .banner .center { float: none; position: absolute; top: 0; left: 50%; margin: 0 0 0 -16%; }

.footer { display: block; padding: 15px; background: #777; color: #ddd; font-size: 10px; }
.footer h1 { font-size: 13px; font-weight: bold; margin: 0 0 5px; }
.footer p { margin: 0 0 0 !important; line-height: 1.2; }

.pageHeader { display: block; padding: 10px 5px; background: #f5f5f5; border-bottom: 1px solid #bbb; height: 24px; }
.pageHeader .title { font-size: 20px; font-weight: bold; line-height: 1.2; text-align: center; color: #ff7a01; padding: 0 !important; margin: 0 !important; }
.pageHeader div { font-size: 12px; color: #888; width: 33.3333%; display: block; float: left; padding: 4px 0 0; }
.pageHeader a:link, .pageHeader a:hover, .pageHeader a:active, .pageHeader a:visited, .pageHeader a:focus { color: #888 !important; }


.snb { display: block; position: relative; }
.snb ul { margin: 0; padding:0; }
.snb li { padding: 0; margin: 0 0 1px; list-style: none; }
.snb li a  { display: block; text-align: left; background: #fff; padding: 15px 20px; border: 1px solid #ccc; font-size: 16px; line-height: 1; }
.snb li a:after { font-family: 'FontAwesome'; content: "\f0da"; position: absolute; right: 20px; color: #777; }
.snb li a:link, .snb li a:hover, .snb li a:active, .snb li a:visited, .snb li a:focus { color: #464646; }

.subContents .inner { display: block; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.7); margin: 0 0 10px; }
.inner p small { font-size: 10.5px; letter-spacing: -0.02em; line-height: 1; }

/*---------------------------------------------------------------------------------------------------------------
	Feature Style
---------------------------------------------------------------------------------------------------------------*/
.feature { padding: 0 0 10px 50px; position: relative; }
.feature.style2 { padding: 0 0 0 0; position: relative; }

.feature .icon { 
	width: 40px; 
	height: 40px; 
	border-radius: 50%;
	background: #ccc; 
	text-align: center; 
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	position: absolute;
	left: 0;
	top: 0; 
}
.feature.style2 .icon { 
	background: #888; 
	text-align: center; 
	box-shadow: none;
	width: 30px;
	height: 30px;
	top: -5px;
}
.feature .icon i { font-size: 22px; color: #fff; text-align: center; line-height: 40px; }
.feature.style2 .icon i { font-size: 18px; color: #fff; text-align: center; line-height: 30px; }
.feature h5 { margin: 3px 0 0; line-height: 1.2; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 700; color: #ff7a01; }
.feature.style2 h5 { font-family: inherit; color: inherit; font-size: 16px; font-weight: bold; padding: 0 0 0 35px; margin: 0 0 15px; }
.feature.style2 p { padding: 0 5px 0; margin: 0 0 5px;line-height: 1.5; }
.feature p { margin: 0; font-size: 13px; }

/*---------------------------------------------------------------------------------------------------------------
	Go To Top
---------------------------------------------------------------------------------------------------------------*/
#gotoTop {
    display: none;
    position: fixed;
    width: 35px;
    height: 35px;
    font-size: 28px;
    line-height: 35px;
    text-align: center;
    color: #fff;
	background: #ff7a01;
    top: auto;
    left: auto;
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -webkit-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
}


/*---------------------------------------------------------------------------------------------------------------
	Mobile Preview
---------------------------------------------------------------------------------------------------------------*/
.mobilePreview .flexslider { 
	border: none;
	margin: 30px 0 110px; 
	background: #fff; 
	position: relative; 
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px; 
	-o-border-radius: 0px; 
	border-radius: 0px; 
	-webkit-box-shadow: none; 
	-moz-box-shadow: none; 
	-o-box-shadow: none; 
	box-shadow: none; 
	zoom: 1;
}


.mobilePreview .flex-direction-nav a  { 
	text-decoration:none; 
	display: block; 
	width: 55px; 
	height: 55px; 
	border-radius: 50%;
	margin: 0; 
	position: absolute; 
	left: 50%;
	bottom: -80px; 
	z-index: 10; 
	overflow: hidden; 
	opacity: 1; 
	cursor: pointer; 
	color: rgba(255, 255, 255, 0.6) !important; 
	background: #888;
	-webkit-transition: all .3s ease; 
	-moz-transition: all .3s ease; 
	transition: all .3s ease;
	text-align: center; 
}
.mobilePreview .flex-direction-nav .flex-prev { margin-left: -100px; }
.mobilePreview .flex-direction-nav .flex-next { margin-left: 30px; }
.mobilePreview .flexslider .flex-prev:hover, .flexslider .flex-next:hover { opacity: 1; }
.mobilePreview .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.mobilePreview .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.mobilePreview .flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 26px; line-height: 2.3; font-weight: normal; display: inline-block; content: '\f001'; }
.mobilePreview .flex-direction-nav a.flex-next:before  { content: '\f002'; }

.flex-control-nav { width: 100%; position: absolute; top: -20px; text-align: center;}
.flex-control-nav li {margin: 0 6px 0 0; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 10px; height: 10px; display: block; background: rgba(0,0,0,0.2); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;}
.flex-control-paging li a:hover { background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #1a4393; cursor: default; }


hr.solid { height: 1px; border: none; border-top: 1px solid #ccc; margin: 10px 0 15px; }


.lineBox { display: block; margin: 0 0 10px; }
.lineBox .title { 
	height: 26px; 
	line-height: 26px; 
	padding: 8px 10px 8px 38px; 
	display: block; 
	border-top: 1px solid #f0cdac; 
	border-bottom: 1px solid #f0cdac;
	color: #ff7a01; 
	background: url('../images/icon-arrow.png') no-repeat 11px 10px #fafafa; 
	font-size: 16px; 
	letter-spacing: -0.02em;
}
.lineBox .title small { font-size: 10.5px; letter-spacing: -0.05em;}
.lineBox .text { padding: 15px; overflow: auto; }
.lineBox .text p:last-child { margin: 0; }
.lineBox .text li { margin: 0 0 5px; line-height: 1.4; padding: 5px 0 0 0; }
.lineBox hr { box-shadow: none; height: 1px; border: none; border-top: 1px solid #ddd; margin: 15px 0; }
.lineBox .numbers li { padding: 0 0 0 19px; position: relative; }
.lineBox .numbers li .label.badge { position: absolute; left: 0; top: 1px; }

.tabs + .lineBox .title { margin-top: 15px; }
.tabs { display: block; margin: 15px 0 5px; padding: 0 15px; overflow: auto; }
.tabs ul { margin: 0; padding: 0;}
.tabs li { float: left; margin: 0 3px 3px 0; display: block; width: 48.9999%; text-align: center; }
.tabs li a { font-size: 12px; height: 35px; line-height: 35px; background: #eee; text-align: center; display: block; border-radius: 5px; color: #777; }
.tabs li.on a { background: #ff7a01; color: #fff; }


.table-blue { width: 100%; margin: 0 0; line-height: 1.3; }
.table-blue tbody td { padding: 7px 8px; border: 1px solid #ddd; color: #666; }
.table-blue.condensed tbody td { padding: 7px 8px; border: 1px solid #ddd; color: #666; }
.table-blue tbody td.active { background: #f6f6f6; }
.table-blue tbody th, .table-blue thead th { background: #d9e9f7; border: 1px solid #c1d7eb; text-align: left; padding: 7px 8px; color: #476988; font-weight: bold; }
.table-blue.condensed tbody th, .table-blue.condensed thead th { padding: 7px 8px; }
.table-blue thead + .table-blue tbody td { border-top: none; }

#checkList.fa-ul { margin: 0 0 20px 20px; }
#checkList .check { border-bottom: 1px dashed #ddd; line-height: 1.4; padding: 5px 0 10px; margin-bottom: 5px; cursor: pointer; }
.checked { color: #ff7a01; }
#checkList .fa-li { top: 0.40285714em; }


.stepBox { 
	display: block; 
	background: #f5f5f5; 
	border: 1px solid #ddd; 
	margin: 0; 
	padding: 15px 30px 10px 40px; 
	position: relative; 
	overflow: hidden;
	border-radius: 5px; 
}
.stepBox .num { 
	font-family: 'Open Sans', sans-serif; 
	letter-spacing: -6px; 
	font-size: 50px; 
	color: #999; 
	font-style: italic; 
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); 
	position: absolute; 
	top: -15px; 
	left: -5px;
}
.stepBox h1 { font-size: 22px; color: #ff7a01; margin: 0 0 10px; }

.oneClick { display: block; height: 805px; background: url('../images/m-one-click-bg.png') no-repeat; background-size: cover; position: relative;  overflow: hidden; }
.oneClickImg { width: 350px; position: absolute; left: 50%; top: 0; margin-left: -175px; }