@charset 'utf-8';
@import url(reset.css);
@font-face {
  font-family: "MaruGothic";
  /*src: local("Gen Jyuu Gothic Medium"), url(../fonts/GenSenMaruGothicTW-Medium.ttf);*/
  src: url(../fonts/GenSenMaruGothicTW-Medium-subset.ttf);
}

/*
-----------------------------
  Index
  - Typography
  - General
  - Header
  - Footer
  - Elements
  - Page
-----------------------------
*/


/*
-----------------------------
Typography
-----------------------------
*/

html,
body {
    font-family: 'Heiti TC', '微軟正黑體', 'Microsoft JhengHei', '新細明體', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'Arial', sans-serif;
    font-size: 15px;
    font-weight: 400;
}

.round-text {
	font-family:"MaruGothic";	
}


/*
-----------------------------
General
-----------------------------
*/

* {
    box-sizing: border-box;
}

a {
    transition: color .2s;
    text-decoration: none;
    color: inherit;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.clear {
	clear:both;
}

.mobile-element {
    display: none;
}


/*
-----------------------------
Header
-----------------------------
*/

#header {
	background:#F7F8FA;
}

#header .inner {
	max-width:none;
	padding-top:40px;
	overflow:hidden;
	zoom:1;
}

#header .company {
	width:130px;
	height:26px;
	float:left;
}

#header .company a {
	display:block;
	width:100%;
	height:100%;
	background:url(../images/logo-black.svg) 0 0 no-repeat;
	background-size:100% 100%;
	text-indent:-999px;
	overflow:hidden;
}

#header nav {
	float:right;
	margin-top:3px;
}

#header nav ul {
	
}

#header nav li {
	display:inline-block;
	margin-left:60px;
}

#header nav a {
	font-size:1.14em;
	color:#444;
}


/*
-----------------------------
Footer
-----------------------------
*/

#footer {
	background:#374252;
	color:#fff;
}

#footer .inner {
	padding:30px 0;
	overflow:hidden;
	zoom:1;
}

#footer ul {
	float:right;
}

#footer li {
	display:inline-block;
	margin-left:30px;
	padding-left:30px;
	border-left:1px solid rgba(255,255,255,.5);
}

#footer li:first-child {
	border-left:none;
}

#footer li a:hover {
	color:#ddd;
}

#footer .company {
	width:124px;
	height:45px;
}

#footer .company a {
	width:100%;
	height:100%;
	display:block;
	background:url(../images/logo-white.svg) no-repeat;
	background-size:100% 100%;
	text-indent:-999px;
	overflow:hidden;
}

#footer .copyright {
	text-align:right;
	color:#999;
	font-size:.85em;
	margin-top:50px;
}


/*
-----------------------------
Elements
-----------------------------
*/
.inner {
	width:92%;
	max-width:1280px;
	margin:auto;
	position:relative;
}

.button {
	font-size:1.2em;
	letter-spacing:.1em;
	color:#fff;
	background:#666;
	text-align:center;
	display:inline-block;
	width:200px;
	padding:.9em 0;
	border-radius:3em;
	transition:all .2s;
}

.button.highlight {
	background:#01c300;	
}

.button:hover {
	background:#444;
}

.button.highlight:hover {
	background:#05ad00;	
}

.section h1 {
	width:389px;
	height:37px;
	margin-bottom:1.65em;
	background:url(../images/misxline-title.svg) no-repeat;
	background-size:100% 100%;
	text-indent:-999px;
	overflow:hidden;
}

.section h2 {
	font-size:1.5em;
	letter-spacing:.1em;
	line-height:1.2em;
	color:#444;
}

.column-3 {
	overflow:hidden;
	zoom:1;	
}

.column-3 .column {
	width:33.33%;
	float:left;
	padding:0 3%;
	text-align:center;
	color:#444;
}

.column-2 {
	overflow:hidden;
	zoom:1;	
}

.column-2 .column {
	width:50%;
	float:left;
	padding:10px 8%;
	text-align:center;
	color:#444;
}

.column-2 .column.lt {
	border-right:1px solid #ddd;
}

.block-group.lt,
.block-group.rt {
	width:25%;
}

.block-group.lt {
	float:left;
}

.block-group.rt {
	float:right;
}

.text-block h3 {
	font-size:1.25em;
	line-height:1.2em;
	letter-spacing:.05em;
	margin-bottom:.7em;
	padding-top:1.2em;
	border-top:1px solid #ccc;
	color:#333;
}

.text-block p {
	font-size:1em;
	line-height:1.8em;
	color:#666;
}

.price .symbol {	
	margin-right:5px;
}

.price .amt {
	font-family:Verdana, Geneva, sans-serif;
	font-size:2.2em;
	margin-right:5px;
	letter-spacing:-.03em;
}

.expanded-list {
	border-bottom:1px solid #ddd;
}

.expanded-list .item {
	border-top:1px solid #ddd;
}

.expanded-list .title {
	padding:25px 30px 25px 60px;
	font-size:1.1em;
	color:#777;
	line-height:1.2em;
	background:url(../images/icon-add.svg) no-repeat 5px 50%;
	background-size:18px 18px;
	transition:color .2s;
	cursor:pointer;
}

.expanded-list .title:hover {
	color:#000;
}

.expanded-list .content {
	color:#777;
	line-height:1.5em;
	padding:20px 30px 40px 60px;
	display:none;
}

.expanded-list .item.open .title {
	background:none;
	color:#000;
}

.expanded-list .item.open .content {
	display:block;
}


/*
-----------------------------
Page
-----------------------------
*/

/*index.php*/

#sec-hero	{
	background:url(../images/bg.png) #F7F8FA;
	background:linear-gradient(to bottom, rgba(251,188,9,0) 82%,rgba(251,188,9,1) 82%,rgba(251,188,9,1) 100%), url(../images/bg.png), #F7F8FA;
	overflow:hidden;
}

#sec-hero .inner {
	padding-top:200px;
	height:680px;
}

#sec-hero .summary {
	width:350px;
}

#sec-hero .summary p {
	font-size:1.2em;
	font-weight:bold;
	line-height:1.6em;
	color:#666;
	margin-bottom:3em;
}

#sec-hero .summary .watch-video {
	font-size:.85em;
	color:#666;
	letter-spacing:.3em;
	padding:.4em 4em .5em 2em;
	border-radius:20px;
	border:1px solid #999;
	background:url(../images/play-gray.svg) no-repeat right 1.2em top 50%;
	transition:all .2s;
}

#sec-hero .summary .watch-video:hover {
	color:#fff;
	background:url(../images/play-white.svg) no-repeat right 1.2em top 50% #999;
}

#sec-hero h3 {
	/*color: #990000;
	border: 2px solid #990000;
	border-radius: 5px;
	padding: 9px 9px 7px 9px;
	font-size: 130%;
	margin: -50px 0 15px 0;
	width: 104px;*/
	color: #888;
    border: 2px solid #aaa;
    border-radius: 4px;
    padding: .4em .6em .3em .6em;
    font-size: 95%;
    margin: -50px 0 1em 0;
    width: 80px;
}

#sec-hero img {
	position:absolute;
	right:0;
	bottom:0;
	width:800px;
}

#sec-featured {
	background-color:#FBBC09;
	padding:30px 0;
}

#sec-featured .inner {
	padding:60px 0 80px 0;
}

#sec-featured h3 {
	font-size:1.33em;
	letter-spacing:.1em;
	line-height:1.4em;
	margin-bottom:.6em;
}

#sec-featured p {
	font-size:1em;
	line-height:1.8em;
}

#sec-customer {
	background:#e6e6e6;
	background:linear-gradient(to bottom, #e6e6e6 84%,#ffffff 84%,#ffffff 100%), url(../images/bg.png);
}

#sec-customer .inner {
	padding:80px 0 260px 0;
}

#sec-customer h2 {
	margin-bottom:80px;
	text-align:center;
}

#sec-customer #smartphone {
	position:absolute;
	left:50%;
	top:150px;
	width:50%;
	transform:translateX(-50%);
}

#smartphone-frame {
	margin:auto;
	width:68%;
	position:relative;
	border-radius:20px;
	background:rgba(51,51,51,.95);
	box-shadow:20px 20px 0 0 rgba(0,0,0,.2);
	overflow:hidden;
	
}

#smartphone-frame .video-mask {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

#smartphone-frame video {
	position:absolute;
	left:0;
	top:9%;
}


#sec-customer .text-block {
	height:270px;
	position:relative;
	cursor:pointer;
}

#sec-customer .text-block .indicator {
	position:absolute;
	left:0;
	top:0;
	height:3px;
	width:0;
	background:#999;
	transition:width .2s ease-in;
}

#sec-customer .text-block:hover .indicator {
	width:20px;
}

#sec-customer .indicator.ended {
	transition:none;
}

#sec-store {
	position:relative;
	overflow:hidden;
	background:#fff;
}

#sec-store .inner {
	position:static;
}

#sec-store h2 {
	margin-bottom:1em;
}

#sec-store #display {
	margin-left:36%;
}

#sec-store #display img {
	display:block;
}

#sec-store .text-block {
	height:260px;
}

#sec-steps {
	background:#F7F8FA;
	padding:80px 0 120px 0;
	text-align:center;
}

#sec-steps h2 {
	text-align:center;
	margin-bottom:60px;
}

#sec-steps img {
	width:100%;
	max-width:1200px;
	margin:auto;
}

#sec-comment {
	background:#F7F8FA;
}

#sec-comment .inner {
	padding:0 0 90px 0;
}

#comment-list	{
	overflow:hidden;
	zoom:1;
}

#comment-list .comment-item	{
	width:33.33%;
	padding:0 3%;
	float:left;
}

#comment-list img {
	float:left;
	width:64px;
}

#comment-list blockquote {
	margin-left:80px;
}

#comment-list blockquote .quote {
	color:#666;
	line-height:1.5em;
	margin-bottom:15px;
}

#comment-list blockquote .from {
	color:#333;
	font-size:.92em;
	font-weight:bold;
}

#sec-extra {
	padding:80px 0;
}

#sec-extra h2 {
	margin-bottom:1em;
}

#sec-extra p {
	line-height:1.8em;
	margin-bottom:40px;
}

#sec-extra p a {
	text-decoration:underline;
}

/** price.html **/


#price #header {
	background:#f2f2f2;
}

#price .section .inner {	
	max-width:1150px;
}

#sec-price {
	background:#f2f2f2;
	text-align:center;
}

#sec-price .inner {
	padding:90px 0 60px 0;
}

#sec-price h1 {
	margin:auto;
	margin-bottom:50px;
}

#sec-price h2 {
	margin-bottom:30px;
}

#price-list {
	margin:auto;
	margin-bottom:30px;
	overflow:hidden;
	zoom:1;
	box-shadow:0 0 50px rgba(0,0,0,.1);
}

#price-list .price-item {
	width:25%;
	float:left;
	border-left:1px solid #ddd;
	background:#fff;
	padding:48px 0 0 0;
}

#price-list .price-item:first-child {
	border-left:none;
	border-top:6px solid #fbbc09;
}

#price-list .price-item:nth-child(2) {
	border-top:6px solid #ed7d5c;
}

#price-list .price-item:nth-child(3) {
	border-top:6px solid #39b54a;
}

#price-list .price-item:nth-child(4) {
	border-top:6px solid #43bec4;
}

#price-list .price-item .title {
	font-size:1.33em;
	letter-spacing:.1em;
	line-height:1.4em;
	margin-bottom:.3em;
}

#price-list .price-item:first-child .title {
	color:#fbbc09;
}

#price-list .price-item:nth-child(2) .title {
	color:#ed7d5c;
}

#price-list .price-item:nth-child(3) .title {
	color:#39b54a;
}

#price-list .price-item:nth-child(4) .title {
	color:#43bec4;
}

#price-list .price-item img {
	margin-bottom:20px;
}

#price-list .price-item p {
	font-size:.88em;
	color:#777;
	line-height:1.5em;
	margin:0 10% 15px 10%;
	height:75px;
}

#price-list .price-item .price {
	padding-bottom:30px;
}

#price-list .price-item .note {
	background:#fff;
	height:64px;
	color:#777;
	font-size:12px;
	line-height:1.33em;
	border-top:1px solid #ddd;
	padding:15px 5% 0 5%;
}

#price-list .price-item #price-note-1 {
	width:400%;
	padding-top:22px;
	position:relative;
	z-index:1;
}

#price-list .price-item #price-note-1 br {
	display:none;
}

#price-note-2, #price-note-3 {
	visibility:hidden;
}

#price-list .price-item .note a {
	color:#01c300;
}

#price-list .price-item .note a:hover {
	text-decoration:underline;
}

#price-extra {
	font-size:1.33em;
	letter-spacing:.1em;
	line-height:1.4em;
	color:#999;
}


#sec-plan {
	background:#f2f2f2;
	text-align:center;
}

#sec-plan .inner {
	padding:40px 0 60px 0;
}

#sec-plan h2 {
	margin-bottom:30px;
}

.plan-list {
	overflow:hidden;
	zoom:1;
	margin-bottom:50px;
	box-shadow:0 0 50px rgba(0,0,0,.1);
}

.plan-list:nth-child(3){
	margin-bottom:60px;
}

.plan-list .plan-group {
	background:#01c300;
	color:#fff;
	font-size:1.4em;
	padding-top:28px;
	height:70px;
}

.plan-list .plan-item {
	width:25%;
	float:left;
	border-left:1px solid #ddd;
	background:#fff;
}

.plan-list .plan-item.header,
.plan-list .plan-item.no-border {
	border-left:none;
}

.plan-list .plan-item.header .cell {
	font-size:1.1em;
	font-weight:bold;
	color:#666;
	text-align:left;
	padding-left:18%;
}

.plan-list .plan-item .cell {
	padding-top:28px;
	border-bottom:1px solid #ddd;
	height:70px;
}

.plan-list .plan-item .cell.header {
	background:#f7f7f7;
	color:#666;
	font-size:1.2em;
}

.plan-list .plan-item .cell.last {
	height:94px;
	border-bottom:none;
}

.plan-list .plan-item.header .cell.last {
	padding-top:38px;
}

.plan-list .plan-item .cell.last.tall {
	height:120px;
}

.plan-list .value {
	display:inline-block;
	width:21px;
	height:21px;
	text-indent:-100px;
	overflow:hidden;
	background:url(../images/icon-no.svg) no-repeat 50% 50%;
}

.plan-list .value.yes {
	width:30px;
	background:url(../images/icon-yes.svg) no-repeat 50% 50%;
}

.plan-list .save {
	color:#666;
}

.plan-list .highlight {
	color:#01c300;
}

.plan-list .price .amt {
	font-size:2.05em;
}

#sec-faq .inner {
	padding:60px 0 100px 0;
}

#sec-faq h2 {
	text-align:center;
	margin-bottom:40px;
}

#sec-faq .content a {
	color:#01c300;
}

#sec-faq .content a:hover {
	text-decoration:underline;
}