@charset "utf-8";
@import url(reset.css);
@import url('https://fonts.googleapis.com/css?family=Muli:400,600,800&display=swap');

/*
========================
Global
========================
*/
*			{ box-sizing:border-box; }
html, body	{ background:#f2f2f2; }
#container	{}
.wrapper 	{}
.inner			{ width:94%; margin:auto; position:relative; }
.inner-medium   { width:92%; max-width:1440px; margin:auto; position:relative; }
.inner-small    { width:92%; max-width:1150px; margin:auto; position:relative; }
.inner-tiny     { width:92%; max-width:860px; margin:auto; position:relative; }
.clear		{ clear:both; }

a			{ color:inherit; text-decoration:none; }
strong		{ font-weight:bold; }
em			{ font-style:italic; }
table		{ width:100%; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table th,
table td	{ padding:8px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
caption		{ text-align:left; margin-bottom:10px; font-size:1.2em; }
input,
textarea,
select						{ font-family:inherit; color:#666;  }
input[type="submit"]		{ -webkit-appearance:none; }

h2			{ font-size:2.4em; font-weight:800; line-height:1.25em; }
h3			{ font-size:1.8em; font-weight:800; }
h4			{ font-size:1.28em; font-weight:800; }

body.tw h2,
body.tw h3,
body.tw h4	{ font-weight:600; }

.fr-view	{ line-height:1.5em;}
.fr-view ul		{ list-style:none; padding-left:.8em; padding-left:.8em; list-style:none; text-align:left; }
.fr-view ul li:before { content: "- "; margin-left: -.8em; }
.fr-view ol		{ list-style:decimal;padding-left:15px;}
.fr-view ol	li	{ text-align:left; }
.fr-view img	{ cursor:default !important; }
.fr-view a > img{ cursor:pointer !important; }


/*
========================
Font
========================
*/
html, body 				{ font-family:'Muli', "Helvetica Neue", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "新細明體"; 
							font-size:14px; -webkit-text-size-adjust:none; }

/*
========================
Header
========================
*/
#header-wrapper							{ position:fixed; left:0; top:0; width:100%; height:72px; background:#f2f2f2; z-index:1000; 
											transition:all .5s; transition-delay:.2s; }
#header-inner							{}
#header-inner h1						{ width:133px; height:28px; margin:22px auto 0 auto; }
#header-inner h1 a						{ display:block; width:100%; height:100%; background:url(../image/logo.svg) no-repeat 50% 50%; 
											background-size:100%; text-indent:-300px; overflow:hidden;}

#header-inner nav						{ position:absolute; left:0; top:50%; margin-top:-.5em; font-weight:600; font-size:1.1em; 
											text-transform:uppercase; }
#header-inner .lang						{ position:absolute; right:0; top:50%; margin-top:-.5em; font-size:1.1em; }
#header-inner .lang-label				{ font-weight:600; height:2em; cursor:pointer; }
#header-inner .lang-menu 				{ position:absolute; right:0; top:2em; background:#fff; border:1px solid #ddd; padding:10px 15px; width:100px; 
											border-radius:3px; display:none; }
#header-inner .lang-menu li 			{ padding:.5em 0; font-size:.98em; color:#666; }
#header-inner .lang:hover .lang-menu 	{ display:block; }

.headroom--unpinned #header-wrapper 	{ top:-72px; }

/*
========================
Main
========================
*/
#main-wrapper						{ padding-top:72px; }
#main-inner							{ padding:60px 0; }

.section 							{ padding:90px 0; }
.section.lite						{ background:#fff; }
.section-content					{ float:left; width:45%; }
.section-content h2					{ margin-bottom:40px; }
.section-paragraph					{ margin-bottom:40px; }
.section-paragraph h3				{ margin-bottom:10px; }
.section-paragraph .desc 			{ color:#666; line-height:1.5em; font-size:1.2em; }
.section-aside						{ position:absolute; left:55%; top:0; bottom:0; right:0; }
.section-aside .diagram				{ max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.section-aside.static				{ position:static; margin-left:55%; }
.cta-link							{ color:#7ac2ab; font-weight:700; font-size:1.15em; }
.cta-link i							{ margin-left:.3em; }

.section.reverse .section-content  	{ float:right; }
.section.reverse .section-aside		{ right:55%; top:0; bottom:0; left:0; }

.banner-image						{ height:360px; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; position:relative; }
.banner-image .mask 				{ width:100%; height:100%; background:rgba(0,0,0,.4); }

.button								{ background:#7abba4; color:#fff; padding:.9em 1.2em; border:none; border-radius:30px; font-size:1.05em;
							  			text-align:center; display:inline-block; font-weight:600; text-transform:uppercase; transition:all .2s;
							  			cursor:pointer; white-space:nowrap; }
.button:hover						{ background:#5db291; }							  

.play-button						{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px;
										background:url(../image/button-play.svg) no-repeat 50% 50%; background-size:100%; transition:all .2s; }

.play-button:hover					{ background:url(../image/button-play-highlight.svg) no-repeat 50% 50%; background-size:100%; }
													
.sharer								{ margin-bottom:30px; color:#888; }
.sharer-holder						{ display:inline-block; vertical-align:middle; margin-left:20px; }
.jssocials-share-link 				{ border-radius: 50%; }
.jssocials-share-link:hover 		{ color:#7abba4; border-color:#7abba4; }
							  
/*
========================
Footer
========================
*/
#footer-wrapper						{ text-align:center; background:#fff; padding:30px 0; font-size:.95em; color:#222; letter-spacing:.1em; }

/*
========================
Page
========================
*/

/** index.php **/
#hero-section 					{ height:800px; padding:0; }
#hero-inner						{ height:100%; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; }
#hero-inner .mask 				{ width:100%; height:100%; background:rgba(0,0,0,.4); }
#hero-box						{ width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; }
#hero-box .title				{ font-size:2.4em; font-weight:600; }
#hero-box .watch-video 			{ margin-top:30px; font-size:1.2em; letter-spacing:.15em; }
#hero-box .watch-video-button 	{ display:inline-block; width:72px; height:72px; margin:0 10px; vertical-align:middle; position:relative; }

#product-section								{ padding:120px 0; }
#product-carousel .carousel-cell 				{ width:25%; border-left:1px solid #a8a8a8; }
#product-carousel .carousel-cell:first-child	{ border-left:none; }
#product-carousel .item							{ margin:0 15%; }
#product-carousel .item	.thumb 					{ position:relative; box-shadow:3px 5px 8px rgba(0,0,0,.3); }
#product-carousel .item .thumb img				{ width:100%; border:12px solid #000; display:block; }
#product-carousel .item	.title 					{ margin-left:8px; margin-top:12px; padding-bottom:5px; font-weight:600; font-size:1.15em; color:#777; }
#product-carousel .item .mask					{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.2); 
													opacity:0; transition:all .5s; }
#product-carousel .item:hover .mask 			{ opacity:1; }
#product-carousel .item .button					{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }

#usecase-section					{ padding-top:50px; padding-bottom:3%; }
#usecase							{ overflow:hidden; zoom:1; }
#usecase li							{ width:25%; float:left; padding:0 3% 5px 3%; position:relative; }
#usecase li:before					{ content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:#a8a8a8; }
#usecase li:first-child:before		{ display:none; }
#usecase img						{ margin-bottom:15px; }
#usecase h4							{ margin-bottom:12px; text-transform:uppercase; }
#usecase p							{ font-size:1.05em; color:#666; line-height:1.4em; }

#usecase-album						{ width:100%; margin-top:50px; }
#usecase-album .carousel-cell		{ width:100%; padding-top:48%; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; }
#usecase-album img					{ width:100%; }
#usecase-album .flickity-prev-next-button.previous 	{ left:2%; }
#usecase-album .flickity-prev-next-button.next 		{ right:2%; }

#cooperation-section h2				{ font-weight:800; margin-bottom:30px; }
#cooperation-section .cta-link		{ position:absolute; left:0; bottom:20px; }
#cooperation-case li				{ margin-bottom:50px; position:relative; }
#cooperation-case li:last-child 	{ margin-bottom:15px; }
#cooperation-case li h3				{ margin-bottom:12px; }
#cooperation-case li p				{ font-size:1.05em; color:#666; line-height:1.4em; }
#cooperation-case li img			{ width:72px; float:left; }
#cooperation-case li.has-icon h4	{ margin-left:90px; margin-bottom:12px; }
#cooperation-case li.has-icon p		{ margin-left:90px; }

#contact-section								{ padding-top:80px; background:url(../image/wave-dot.png) no-repeat 50% bottom; background-size:100%; }
#contact-section h2								{ text-align:center; margin-bottom:40px; }
#contact-inner									{ max-width:1280px; }
#contact-form									{ overflow:hidden; zoom:1; }
#contact-form .group-lt							{ float:left; width:49%; }
#contact-form .group-rt							{ float:right; width:49%;  }
#contact-form p									{ margin-bottom:20px; }
#contact-form input[name],
#contact-form textarea,
#contact-form select							{ width:100%; padding:1em; background:#fff; border:1px solid #ddd; border-radius:5px; font-size:1em }
#contact-form select							{ height:48px; }	
#contact-form textarea							{ height:182px; }													
#contact-form .submit-wrapper					{ clear:both; padding-top:20px; text-align:center; }											
#contact-form input[type="submit"]				{ padding:1em 0; border:none; font-size:1.2em; width:100%; max-width:180px; }
#contact-form .error							{ color:#ff812c; display:block; margin-top:5px; margin-left:3px; font-size:.96em; }
#contact-form #result							{ color:#333; line-height:1.5em; margin-top:30px; font-weight:600; display:none; }


/** item.php **/
#item #main-inner								{ background:#fff; padding:0; margin-bottom:3%; }
#item-banner									{ height:0; padding-top:32%; position:relative; background-repeat:no-repeat; 
													background-size:cover; background-position:50% 50%; }
#item-detail									{ padding:90px 0; }
#item-info										{ width:45%; float:right; }
#item-info h2									{ font-size:1.8em; margin-bottom:20px; }
#item-info .desc								{ color:#444; font-size:1.02em; line-height:1.6em; margin-bottom:40px; }
#item-info .spec								{ margin-bottom:40px; line-height:1.5em; color:#666; }
#item-info .spec strong							{ font-size:1.02em; font-weight:800; margin-bottom:5px; color:#000; }
#item-info .button								{ font-size:1.2em; }
#item-preview									{ width:42%; float:left; }
#item-preview-images							{ position:relative; padding-top:100%; }
#item-preview-images .item						{ position:absolute; left:0; top:0; right:0; bottom:0; }
#item-preview-images img						{ position:absolute; left:0; top:0; right:0; bottom:0; width:auto; height:auto; 
													max-width:100%; max-height:100%; margin:auto; border:12px solid #000; display:block;
													box-shadow:3px 5px 8px rgba(0,0,0,.3);  }
#item-preview-nav								{ text-align:center; margin-top:40px; }
#item-preview-nav .frame-button					{ display:inline-block; margin:0 8px; opacity:.2; transition:all .2s; cursor:pointer; }
#item-preview-nav .frame-button:hover			{ opacity:.3; }
#item-preview-nav .frame-button.active			{ opacity:1; }


/** newsroom.php **/
#news-list										{ overflow:hidden; zoom:1; }
#news-list li									{ width:47%; float:left; margin-right:6%; margin-bottom:60px; }
#news-list li:nth-child(2n)						{ margin-right:0; }
#news-list .thumb								{ margin-bottom:25px; }
#news-list img									{ width:100%; }
#news-list .date								{ font-size:.96em; font-weight:600; margin-bottom:18px; }
#news-list .title								{ font-size:1.3em; font-weight:600; margin-bottom:15px; }
#news-list .summary								{ color:#666; line-height:1.5em; margin-bottom:20px; }


/** post.php **/
.article										{}
.article-images									{ margin-bottom:40px; width:100%; }
.article-images .carousel-cell					{ width:100%; background:#333; }
.article-images .holder							{ position:relative; height:0; padding-top:64%; }
.article-images .holder img						{ position:absolute; left:0; top:0; right:0; bottom:0; max-width:100%; max-height:100%;
													width:auto; height:auto; margin:auto;}

.article-images .flickity-prev-next-button.previous { left:2%; background:none; }
.article-images .flickity-prev-next-button.next { right:2%; background:none; }
.article-images .flickity-prev-next-button[disabled] { display:none; }	
.article-images .flickity-button-icon 			{ fill: white; }
.article .back									{ color:#888; margin-bottom:32px; }												
.article .date									{ font-size:1em; font-weight:600; margin-bottom:12px; }
.article .title									{ font-size:1.8em; font-weight:600; margin-bottom:26px; }
.article .desc									{ color:#666; line-height:1.5em; margin-bottom:30px; }