a, object, input, a:active, a:focus, input:active, input:focus {outline:none}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Parallax Scroll
   ========================================================================== */
body, html {
	height: 100%;
	min-height: 100%;
	min-width: 1000px;
	background-color: #fff;
}
body {
	
}
.no-js {
	padding-top: 106px;
}
h2 {
	margin-top: 0;
}
.loading {
	background: url('../img/ico_loading.gif') no-repeat center center;
}
section {
	min-width: 950px;
	opacity: 0;
}
.loaded section,
.no-js section {
	opacity: 1;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out;
}
main {
	overflow-x: hidden;
}

.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
}

.bcgtop {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 541px;
	width: 100%;
}

/* Slide 1 */
#slide-1 .bcgtop {background-image:url('../img/bcg_slide-1.jpg'); background-color: #fff;}

/* Slide 2 */
#slide-2 .bcg {background: none; background-color: #010101; text-align: center}

/* Slide 3 */
#slide-3 .bcg {background-image:url('../img/bcg_slide-3.jpg')}
#slide-3 .bcg2 {background-image: none; background-color: #fff; position: absolute; top: 0; left: 0;}

/* Slide 4 */
.curtainContainer {width: 100%; height: 100%; position: relative;}
.curtainContainer .curtain {width: 300%; height: 1px; background-color: #000000; position: absolute; top: 25%; left: 0; opacity: 0}
.curtainContainer .copy {position: absolute; bottom: 30%; left: 0; width: 100%; text-align: center;}

#slide-4 .bcg2 {}

/* Slide 5 */
#slide-5 {position: relative;}
#slide-5 .bcg {}
#slide-5 .bcg2 {}
#slide-5 .bcg3 {}

.hsContainer {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.hsContent {
	max-width: 450px;
	min-width: 450px;
	margin: -150px auto 0 auto;
	display: table-cell;
	vertical-align: middle;
	color: #ebebeb;
	padding: 0;
	text-align: center;
	position: relative;
	z-index: 10;
}
	.hsContent h2,
	.copy h2 {
		color: #ffffff;
		font-size: 45px;
		line-height: 48px;
		margin-bottom: 12px;
	}
	.hsContent p {
		width: 400px;
		margin: 0 auto;
		color: #b2b2b2;
	}
	.hsContent a {
		color: #b2b2b2;
		text-decoration: underline;
	}
	.bgBlack {
		background-color: rgba(0,0,0,0.75);
		padding: 3px 10px;
	}


/* Navigation */
#slideNav {
	display: none;
	position: fixed;
	right: 0;
	top: 50%;
	margin-top: -80px;
	z-index: 11;
}
#slideNav ul {
	list-style: none;
	color: #000000;
	font-size: 13px;
	text-align: center;
}
#slideNav li {
	width: 50px;
	height: 50px;
	line-height: 50px;
	background-color: rgba(255,255,255,0.70);
	margin-bottom: 1px;
}
.no-rgba  #slideNav li {background-color: #ffffff}
#slideNav a {
	display: block;
	width: 50px;
	height: 50px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: #000000;
}
#slideNav a.disabled {
	cursor: default;
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}


/* ==========================================================================
   jws css
   ========================================================================== */

#container {
	width: auto;
	height: 550px;
	margin-left: auto;
	margin-right: auto;
	background-color: gray;
}

#nav-top {
	width: 100%;
	min-width: 1000px;
	height: 105px;
	background-color: #fe6c69;
	position: absolute;
	z-index: 9999;
}

.nav-top-center {
	width: 950px;
	height: 105px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	z-index: 100;
}

.logo {
	float: left;
	margin-left: 35px;
}

.mainmenu {
	float: right;
	margin-top: 22px;
}

.mainmenu ul {
	list-style: none;
}

.mainmenu li {
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
	font-size: 13px;
	float: left;
	padding: 0px 0px 0px 24px;
	display: inline-block;
}

.mainmenu li a{
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
	font-size: 13px;
	text-transform:uppercase;
	color: #fff;
	text-decoration: none;
}

.mainmenu li a:hover{
	color: #fff;
	border-bottom: solid 3px #fff;
	padding-bottom: 35px;
}

.mainmenu li a.selected{
	color: #fff;
	border-bottom: solid 3px #fff;
	padding-bottom: 35px;
}

.topscrn01 {
	float: left;
	clear: left;
	z-index: 1;
	position: relative;
	margin-top: 66px;
}

.topscrn02 {
	float: left;
	z-index: 2;
	position: relative;
	margin-top: 66px;
	margin-left: -145px;
}

.iponmain {
	float: left;
	margin-top: -75px;
	z-index: 100;
	position: relative;
	margin-left: -150px;
}

.dot01 {
	float: left;
	margin-left: 46px;
	margin-top: 44px;
	z-index: 100;
	position: relative;
}

.topcontent {
	float: left;
	padding-left: 20px;
	padding-top: 55px;
}

.ttitle-h {
	float: left;
	text-indent: -9999px;
	background-image:url('../img/toptitle-h.png');
	width: 126px;
	height: 53px;
}

.ttitle-ye {
	float: left;
	text-indent: -9999px;
	background-image:url('../img/toptitle-ye.png');
	width: 235px;
	height: 53px;
	margin-left: 5px;
}

.ttitle-ls {
	float: left;
	clear: left;
	text-indent: -9999px;
	background-image:url('../img/toptitle-ls.png');
	width: 411px;
	height: 68px;
	margin-top: 6px;
}

.ttitle-q {
	float: left;
	clear: left;
	text-indent: -9999px;
	background-image:url('../img/toptitle-q.png');
	width: 44px;
	height: 53px;
	margin-top: 6px;
}

.appstore-dl a{
	float: left;
	clear: left;
	text-indent: -9999px;
	background-image:url('../img/appstore-dl.png');
	width: 135px;
	height: 40px;
	margin-top: 48px;
}

.shareword {
	float: left;
	display: block;
	color: #ccc;
	font-size: 11px;
	margin-top: 55px;
	margin-left: 20px;
	line-height: 13px;
}

.socline {
	float: left;
	height: 1px;
	width: 25px;
	background-color: #79797d;
	margin-top: 65px;
	margin-left: 10px;
}

.socfb a {
	float: left;
	text-indent: -9999px;
	background-image:url('../img/socicon-fb.png');
	width: 29px;
	height: 29px;
	margin-top: 52px;
	margin-left: 10px;
	opacity: 0.5;
}

.socfb a:hover {
	opacity: 1;
}

.soctw a {
	float: left;
	text-indent: -9999px;
	background-image:url('../img/socicon-tw.png');
	width: 29px;
	height: 29px;
	margin-top: 52px;
	margin-left: 8px;
	opacity: 0.5;	
}

.soctw a:hover {
	opacity: 1;
}

.socitg a {
	float: left;
	text-indent: -9999px;
	background-image:url('../img/socicon-itg.png');
	width: 29px;
	height: 29px;
	margin-top: 52px;
	margin-left: 8px;
	opacity: 0.5;	
}

.socitg a:hover { 
	opacity: 1;
}

.topround {
	float: left;
	clear: left;
	background-image:url('../img/topround.png');
	width: 378px;
	height: 327px;
	margin-top: 45px;
	margin-left: -217px;
	position: relative;
	z-index: 200;
}

.trtitle {
	float: left;
	font-size: 15px;
	text-align: center;
	font-weight: 600;
	margin-top: 71px;
	width: 378px;
}

.trcontent {
	float: left;
	clear: left;
	width: 378px;
	font-size: 14px;
	text-align: center;
	color: #666;
	font-weight: 200;
	line-height: 24px;
	margin-top: 21px;
}

.worth {
	float: right;
	background-image:url('../img/worth.png');
	width: 155px;
	height: 154px;
	margin-top: 193px;
	text-indent: -9999px;
}

.nav-top-underline {
	width: 100%;
	height: 1px;
	background-color: #fe6c69;
	position: absolute;
	z-index: -1;
	margin-top: -13px;
	opacity: 0.5;
}

.dots2-1{
	float: left;
	clear: left;
	background-image:url('../img/dot.png');
	background-repeat: repeat-y;
	width: 1px;
	height: 24px;
	position: relative;
	z-index: 300;
	margin-left: 490px;
	margin-top: -4px;
}

.dots2{
	float: left;
	clear: left;
	background-image:url('../img/dot.png');
	background-repeat: repeat-y;
	width: 1px;
	height: 72px;
	position: relative;
	z-index: 300;
	margin-left: 490px;
	margin-top: -4px;
}

.worth2 {
	float: left;
	background-image:url('../img/motionexp.png');
	width: 153px;
	height: 128px;
	margin-top: 110px;
	text-indent: -9999px;
}

.sdownview{
	float:left;
	clear:left;
	font-size:11px;
	color:#666;
	margin-top:-187px;
}

.utubecont {
	float:right;
	clear:left;
	margin-top:4px;
	margin-right:25px;
	margin-bottom:5px;
}

#sect02 {
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	height: auto;
}

#bgfeature {
	width: 100%;
	height: 605px;
	background-color: #f5f5f5;
	position: relative;
	z-index: 0;
}

.t-features {
	float: left;
	background-image:url('../img/title-features.png');
	width: 146px;
	height: 36px;
	margin-left: 417px;
	text-indent: -9999px;
}

.left-f {
	float: left;
	clear: left;
	width: 331px;
	height: 569px;
}

.f-desc-cont01{
	float: right;
	padding-right: 50px;
	padding-top: 30px;
}

.f-desc-cont02{
	float: right;
	padding-right: 50px;
	padding-top: 50px;
}

.f-icon {
	float: right;
	width: 37px;
}

.f-desc-title{
	float: right;
	font-size: 16px;
	padding-top: 1px;
	color: #333;
}

.f-desc {
	float: right;
	clear: right;
	text-align: right;
	font-size: 13px;
	line-height: 18px;
	color: #666;
	padding-top: 6px;
}

.left-m {
	float: left;
	width: 320px;
	height: 569px;
}

.left-r {
	float: left;
	width: 299px;
	height: 569px;
}

.f-desc-cont01-r{
	float: left;
	padding-left: 50px;
	padding-top: 30px;
}

.f-desc-cont02-r{
	float: left;
	padding-left: 50px;
	padding-top: 50px;
}

.f-icon-r {
	float: left;
	width: 37px;
}

.f-desc-title-r{
	float: left;
	font-size: 16px;
	padding-top: 1px;
	color: #333;
}

.f-desc-r {
	float: left;
	clear: left;
	text-align: left;
	font-size: 13px;
	line-height: 18px;
	color: #666;
	padding-top: 6px;
}

.dots3{
	float: left;
	clear: left;
	background-image:url('../img/dot.png');
	background-repeat: repeat-y;
	width: 1px;
	height: 72px;
	position: relative;
	z-index: 300;
	margin-left: 491px;
	margin-top: 0px;
}

.xhiw {
	float: left;
	margin-left: 486px;
	margin-top: -7px;
	position: relative;
	z-index: 100;
}

.t-hiw {
	float: left;
	clear: left;
	background-image:url('../img/title-hiw.png');
	width: 227px;
	height: 36px;
	margin-left: 381px;
	text-indent: -9999px;
	margin-top: 5px;
}

.hiw-org {
	float: left;
	clear: left;
	background-image:url('../img/hiw-organize.png');
	width: 485px;
	height: 19px;
	text-indent: -9999px;
	margin-top: 83px;
}

.hiw-bubble {
	float: right;
	background-image:url('../img/hiw-bubble.png');
	width: 431px;
	height: 140px;
	text-indent: -9999px;
	margin-top: 25px;
}

.hiw-left {
	float: left;
	clear: left;
	width: 560px;
	height: auto;
}

.hiw-steps01 {
	float: right;
	background-image:url('../img/hiw-steps01.png');
	width: 500px;
	height: 341px;
	text-indent: -9999px;
	margin-right: 26px;
}

.hiw-bluarrow {
	float: left;
	clear: both;
	margin-left: 199px;
	margin-top: 5px;
}

.hiw-s1desc {
	float: left;
	clear: both;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
	margin-top: 4px;
	text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
    -webkit-font-smoothing: antialiased;
}

.s1desc1 {
	font-size: 18px;
	color: #333;
}

.s1desc2  {
	font-size: 15px;
	color: #999;
	font-style: italic;
}

.hiw-steps02 {
	float: right;
	background-image:url('../img/hiw-steps02.png');
	width: 414px;
	height: 198px;
	text-indent: -9999px;
	margin-right: 11px;
	margin-top: 5px;
}

.hiw-right {
	float: right;
	width: 385px;
	height: auto;
}

.hiw-steps03 {
	float: right;
	background-image:url('../img/hiw-steps03.png');
	width: 382px;
	height: 639px;
	text-indent: -9999px;
	margin-top: 65px;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}

.hiw-s3title {
	float: left;
	width: 382px;
	height: auto;
	font-size: 23px;
	color: #fff;
	margin-top: 28px;
	text-indent: 0px;
	text-align: center;
	font-weight: 200;
}

.s3desc1 {
	float: left;
	width: 382px;
	height: auto;
	font-size: 15px;
	line-height: 24px;
	color: #ccc;
	margin-top: 27px;
	text-indent: 0px;
	text-align: center;
	font-weight: 200;
}

.s3descex {
	float: left;
	clear: left;
	width: 382px;
	height: auto;
	text-align: center;
	font-size: 13px;
	color: #999;
	margin-top: 10px;
	text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; 
}

.hiw-endline {
	float: left;
	width: 100%;
	height: 1px;
	background-color: #666;
	margin-top: 80px;
	position: relative;
	z-index: 100;
}

.bullet {
	float: left;
	clear: left;
	position: relative;
	z-index: 200;
	margin-top: -13px;
	margin-left: 487px;
}

.dots4{
	float: left;
	clear: left;
	background-image:url('../img/dot.png');
	background-repeat: repeat-y;
	width: 1px;
	height: 72px;
	position: relative;
	z-index: 300;
	margin-left: 490px;
	margin-top: -7px;
}

.xfaq {
	float: left;
	margin-left: 485px;
	margin-top: -7px;
	position: relative;
	z-index: 100;
}

.t-faq {
	float: left;
	clear: left;
	background-image:url('../img/title-faq.png');
	width: 65px;
	height: 36px;
	margin-left: 457px;
	text-indent: -9999px;
	margin-top: 5px;
}


#accord-wrap{
	float: left;
	clear: left;
	position: relative;
	margin-top: 30px;
}


/* The Magic */
.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content {
    height: 16em;
}

.accordion-item-content,
.accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .45s;
       -moz-transition: height .45s;
        -ms-transition: height .45s;
         -o-transition: height .45s;
            transition: height .45s;
}

.accordion-item-content p {
	font-size: 15px;
	line-height: 28px;
	padding-left: 52px;
}

/* Aesthetic */

.accordion {
    padding: 0;
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
  padding: 5px 0px 5px 0px;
  color: #333;
}

.accordion h1 {
  font-size: 16px;
  font-weight: 500;
  padding-left: 35px;
}

.accordion .accordion-item:nth-child(1) {
  border-top: 1px solid #e5e5e5;
}

.accordion .accordion-item:nth-child(2) {
  
}

.accordion .accordion-item:nth-child(3) {
  
}

.accordion .accordion-item:nth-child(4) {
  
}

.faq-ad {
	float: right;
	margin-right: 1px;
}

.cont-endline {
	float: left;
	width: 100%;
	height: 1px;
	background-color: #666;
	position: relative;
	z-index: 100;
}

.faq-endline {
	float: left;
	width: 100%;
	position: relative;
	z-index: 100;
	margin-top: 380px;
	bottom: 1;
}

.t-cont {
	float: left;
	clear: left;
	background-image:url('../img/title-contact.png');
	width: 193px;
	height: 36px;
	margin-left: 395px;
	text-indent: -9999px;
	margin-top: 5px;
}

.left-cont {
	float: left;
	clear: left;
}

.desc1-cont {
	background-color: #fe6c69;
	padding: 15px 40px 15px 40px;
	border-radius: 5px;
	font-size: 15px;
	line-height: 22px;
	color: #fff;
	margin-top: 55px;
	text-align: center;
	border: #fff solid thin;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}

.desc2-cont {
	margin-top: 40px;
	font-size: 14px;
	text-align: center;
	color: #555;
}

.email-cont {
	margin-top: 30px;
	font-size: 15px;
	text-align: center;
	color: #333;
}

.copyright-cont {
	text-align: center;
	font-size: 10px;
	color: #ccc;
	margin-top: 250px;
}

.right-cont {
	float: right;
	width: 459px;
	padding-top: 39px;
}

/* form 2 */

.formed {
	float: left;
	margin-top: 28px;
	padding-left: 29px;
}

#form2{
	width: auto; /* customize width, this form have fluid layout */
	text-decoration: none;
	float: left;
}
	
#form2 fieldset{
	margin:0;
	padding:0;
}		

#form2 legend{display:none;
}	
	
#form2 p{
	margin-top: 12px;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: bold;
	color: #555;
	text-shadow:#fff 0 1px 1px;
}	

#form2 label{
	display:block;
	font-weight: bold;
	margin-bottom: 4px;
}	

#form2 input, #form2 textarea {
	width: 380px;
	border-bottom: 2px solid #ddd;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	color: #555;
	font-size: 13px;
	background-color: #fff;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	text-decoration: none;
	height: 20px;
	border-radius: 3px;
}		

#form2 textarea{
	height:125px;
	overflow:auto;
}		
			
#form2 p.submit
{
	text-align:left;
}	

#form2 button {
	float: right;
	border: 1px solid #e1e1e1;
	color: #787878;
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	width: auto;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-right: 94px;
	padding-left: 94px;
	font-family: Arial;
	background-color: #fff;
	margin-bottom: 22px;
	border-radius: 3px;
	text-shadow:#fff 0 1px 1px;
	margin-top: -5px;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}			
		
#form2 button:hover {
	color: #fff;
	background-color: #fe6c69;
	text-shadow: none;
}			

.form-re {
	float: left;
	font-size: 11px;
	font-weight: normal;
	color: #f00;
	opacity: 0.7;
	margin-top: -6px;
}

/*miniheader {
    position: fixed;
    display: none;
    width: 100%;
    height: 35px;
    background: red;
    z-index: 99999;
    opacity: 0.9;
}*/


.ttitle-th {
	float: left;
	background-color: #fff;
	font-size: 48px;
	padding: 0px 10px 0px 10px;
	border-radius: 2px;
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing:2px;
}

.ttitle-f {
	float: left;
	clear: left;
	background-color: #fff;
	font-size: 48px;
	padding: 0px 10px 0px 10px;
	border-radius: 2px;
	font-weight: 100;
	text-transform: uppercase;
	margin-top: 6px;
	letter-spacing:2px;
}

.ttitle-ym {
	float: left;
	clear: left;
	background-color: #000;
	font-size: 48px;
	padding: 0px 10px 0px 10px;
	border-radius: 2px;
	font-weight: 100;
	text-transform: uppercase;
	margin-top: 6px;
	color: #fe6c69;
	letter-spacing:2px;
}