@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
input, textarea { margin:0; padding:0;}
* {-webkit-text-size-adjust:none;}
a{text-decoration:none;}
fieldset, img { border:0;}
ol, ul { list-style:none;}
abbr, acronym { border:0;}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
* html .clearfix {height: 1%;}
*:first-child + html .clearfix { min-height: 1%;}

body, h1, h2, h3, h4, h5, h6, p {font-family:'Inconsolata', monospace,'Roboto', 'Noto Sans TC',Arial,"微軟正黑體","新細明體", sans-serif; font-weight: normal; color: #333;}
p{ font-size: 16px;}
a{ text-decoration:none; outline: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;}
a:hover{ text-decoration:none;}
select, input, textarea, button {  font-family:'Inconsolata', monospace, 'Roboto', 'Noto Sans TC',Arial,"微軟正黑體","新細明體", sans-serif;}
*:link, *:visited, *:hover, *:active, *:focus , * {border: none;outline: none; }
html, body{ height: 100%; }

/*===== start ======*/
html{ min-width: 320px;}
.ContentsBox{ max-width: 1200px; margin: 0 auto;}

/*header*/
h1.logo{ width: 140px; text-decoration: none;}
h1.logo a{ cursor: pointer; color: #666; width: 100%; height: 50px; display: block; background: url(../images/Gossim-02.png) center center no-repeat; background-size: contain;}
.HeaderBox{ position: fixed; bottom: 20px; right: 15px; z-index: 60; max-width: 150px;}
.HeaderBox ul.top_menu{ width: 100%; text-align: right; background-color: rgba(0,0,0,.6); }
.HeaderBox ul.top_menu li{display: inline-block; margin: 0 4px; border-bottom: 1px solid rgba(256,256,256,.2);}
.HeaderBox ul.top_menu li h3{ font-size: 17px; line-height: 22px; }
.HeaderBox ul.top_menu li h3 a{ color: #fff; padding:12px 15px;cursor: pointer;display: block; }
.HeaderBox ul.top_menu li h3 a:hover{ color: #7dd214; }

/*main_contents*/
.KVlogo{ max-width: 500px; margin: 0 auto 30px auto; }
.KVlogo img{ max-width: 100%; min-height: 100%; }
.KVlogo h1{ margin-bottom: 5px; }
h2.top_title{text-align: center; font-size: 40px;}
h3.main_title {text-align: center; padding-bottom: 20px;}
p.sub_title{ text-align: center; font-size:26px; line-height: 34px; margin: 0 auto; }
p.btn{ padding: 40px 0 30px 0; }
p.btn a{ text-align: center;  cursor: pointer; color: #333; display: inline-block; padding: 15px 25px; border:1px solid #333; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; min-width: 130px; }
p.btn a:hover{ background-color: #5aa200; color: #fff; border-color: #5aa200; }

.main_contents{ width: 100%; background: rgba(0,0,0,.1);}
.main_contents .ContentsBox{ width: 100%; z-index: 20; }

.KVbox{ width: 100%; padding: 50px 0; min-height: calc(100vh - 100px) ;  background: url(../images/bg_01.jpg) center center no-repeat #fff; background-size: cover; background-attachment: fixed; overflow-y: hidden; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.KVbox h1.logo{ width: 220px; margin-bottom: 25px; }
.KVbox h1.logo a{ height: 86px; }
.KVbox p{ color: #333; }
.KVbox p.sub_title{ text-align: left; font-size: 16px; margin: initial; max-width:38vw;}


.specialtyBox{ width: 100%; padding: 60px 0; }
.specialtyBox ul{ text-align: center;  width: 100%; position: relative; padding-top: 20px; }
.specialtyBox ul li{display: inline-block; width: 19.2%; min-width: 200px; position: relative; padding-top: 100px; margin: 10px 0; }
.specialtyBox ul li p{ color: #333; font-size: 16px; text-align: center; }
.specialtyBox ul li::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 80px; background-size: contain; background-repeat: no-repeat; background-position:  center center; }
.specialtyBox ul li.icon_01::after{ background-image: url(../images/idea.png); }
.specialtyBox ul li.icon_02::after{ background-image: url(../images/network.png); }
.specialtyBox ul li.icon_03::after{ background-image: url(../images/smartphone.png); }
.specialtyBox ul li.icon_04::after{ background-image: url(../images/rocket-launch.png); }
.specialtyBox ul li.icon_05::after{ background-image: url(../images/teamwork.png); }

.specialtyPhoto {width: 100%; padding: 80px 0; background-color: #fff;}
.specialtyPhoto ul{ width: 100%; text-align: center; }
.specialtyPhoto ul li{ display: inline-block; width:calc(33% - 45px);  height:400px; margin:20px 20px; position: relative;}

.c2{ padding: 50px 0;}
.c2 ul.info li{float: left; width: 50%; padding-bottom: 5px; }
.c2 p.btn{ text-align: center; padding: 0 0 60px 0;}
.c2 input,.c2 textarea{ width:calc( 100% - 12px); max-width: 450px; background-color: #fff; padding: 6px ; font-size: 16px; line-height: 40px; text-align: center; margin: 20px auto; display: block; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}
.c2 input::placeholder{ font-size: 14px; }
.c2 ul.info{ border-top: 1px dashed #c6c6c6; }

.team_list{ width: 100%; background-color: #fff; padding: 60px 0 160px 0;  position: relative;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b1cee2+0,ffffff+56&0.43+0,1+100 */
background: -moz-linear-gradient(top, rgba(177,206,226,0.43) 0%, rgba(255,255,255,0.75) 56%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(177,206,226,0.43) 0%,rgba(255,255,255,0.75) 56%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(177,206,226,0.43) 0%,rgba(255,255,255,0.75) 56%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6eb1cee2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
.team_list::after{position: absolute; right: 0; bottom: 0; z-index: 5; content: ""; width: 30vw; max-width: 710px; height: 610px; max-height: 500px; display: block; background:url(../images/br_team_list.png) bottom right no-repeat; background-size: contain;  }
.team_list::before{ position: absolute; left: 0; bottom: 0; z-index: 5; content: ""; width: 20vh; max-width: 389px; height: 245px; display: block; background:url(../images/br_team_list_01.png) left bottom no-repeat; background-size: contain; }
.team_list .ContentsBox::before{ position: absolute; left: 0; top: 0; z-index: 5; content: ""; width: 20vh; max-width: 245px; height: 375px; display: block; background:url(../images/br_team_list_02.png) left top no-repeat; background-size: contain; }


.team_list ul{ width: 100%; padding: 50px 0 30px 0; margin: 0 auto;}
.team_list ul li{float: left; width:calc(50% - 60px); background-color: #ffffff; padding:20px; margin: 0 10px; -moz-border-radius: 10px; -webkit-border-radius:10px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,.2);}
.team_list ul li .photo{ float: left; width: 110px; height: 110px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin-right: 30px;  background-size: contain; background-position: center center; background-repeat: no-repeat;}
.team_list ul li .info{ float: left; width: 100%; width: calc(100% - 150px); max-width: 380px; }
.team_list ul li .info h4.name{ font-size: 20px; padding-bottom: 10px; }
.team_list ul li .info p{padding-bottom: 10px; position: relative;}
.team_list ul li .info p a{ color: #5aa200; text-decoration: underline; }
.team_list ul li .info p.headline span.green{ color: #5aa200;}
.team_list ul li .info p.headline span.gray{ color: #888;}

.team_list ul li .info p.icon{ padding-left: 35px; line-height: 28px;}
.team_list ul li .info p.icon::before{ width: 30px; font-size: 17px; line-height: 28px; text-align: center; content: ""; position: absolute; top: 0; left: -2px; display: block; font-family: 'Font Awesome\ 5 Free'; font-weight: 900;}
.team_list ul li .info p.phone::before{ content: "\f095";}
.team_list ul li .info p.mail::before{ content: "\f0e0";}


.team_list ul li.kino .photo{ background-image: url(../images/team/kino.jpg); }
.team_list ul li.mark .photo{ background-image: url(../images/team/mark.jpg); }

.our_user{ width: 100%; background:url(../images/what-the-hex.png) center center repeat; padding: 40px 0; }
.our_user ul{ width: 100%; padding: 50px 0 30px 0; text-align: center;}
.our_user ul li{ display: inline-block; width: 24%; height: 80px; margin-bottom: 15px; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.our_user ul li.logo_01{ background-image: url(../images/our_user/01.png); }
.our_user ul li.logo_02{ background-image: url(../images/our_user/02.png); }
.our_user ul li.logo_03{ background-image: url(../images/our_user/03.png); }
.our_user ul li.logo_04{ background-image: url(../images/our_user/04.png); }

.s-animation-page-slide_in { -webkit-animation: slideIn .75s; animation: slideIn .75s; }


/*FooterBox*/
.FooterBox{ width: 100%; background-color: #fff; padding: 50px 0; border-top: 4px solid #e5e5e5;}
.FooterBox .ContentsBox{ max-width: 1080px;  margin: 0 auto; }
.FooterBox p{text-align: center;  font-size: 13px; line-height: 24px; color: #666; letter-spacing: 0.5px;}



/*** Title **/
.title {  text-align: center; -webkit-transform: translateY(20px); transform: translateY(20px);  font-size: 45px;  color: coral;  text-transform: uppercase;}

/*** CARD **/
.card { position: absolute;  top: 50%;  left: 50%;  -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); width: 100%;  background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);  overflow: hidden;  -webkit-transition: box-shadow 0.5s;  transition: box-shadow 0.5s;}
.card a { color: inherit; text-decoration: none;}
.card:hover { box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);}

/*** THUMB **/
.card__thumb { height: 188px;  overflow: hidden; background-color: #fff; -webkit-transition: height 0.5s; transition: height 0.5s;}
.card__thumb img { display: block;  opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;  transition: opacity 0.5s, -webkit-transform 0.5s;  transition: opacity 0.5s, transform 0.5s;  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;}
.card:hover .card__thumb {  height: 130px;}
.card:hover .card__thumb img { opacity: 0.6; -webkit-transform: scale(1.2); transform: scale(1.2);}

/*** BODY **/
.card__body { position: relative;  height: 115px; padding: 20px; -webkit-transition: height 0.5s; transition: height 0.5s;}
.card:hover .card__body { height: 220px;}

.card__category { position: absolute;  top: -25px;  left: 0; height: 25px;  padding: 0 15px; background-color: coral; color: #fff;  text-transform: uppercase; font-size: 12px; line-height: 25px;}
.card__title { margin: 0;  padding: 0 0 10px 0;  color: #000; font-size: 22px; font-weight: bold;}
.card__subtitle { margin: 0 0 10px 0;  font-size: 17px;  color: coral; height: 48px;  display: block; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 24px; height: 24px * 2;}
.card__description { position: absolute;  left: 20px;  right: 20px;  bottom: 56px;  margin: 0; padding: 0;  color: #666C74;  line-height: 24px;  opacity: 0;  -webkit-transform: translateY(45px); transform: translateY(45px);  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;  transition: opacity 0.3s, -webkit-transform 0.3s;  transition: opacity 0.3s, transform 0.3s;  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;  -webkit-transition-delay: 0s;          transition-delay: 0s;}
.card:hover .card__description {  opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);  -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}


/*==== RWD ====*/
@media (max-width:1500px){
	.team_list::after{ height: 380px;}
}

@media (max-width:1220px){
	.ContentsBox{ max-width: 90%;}
	.HeaderBox .TopBox ul.top_menu li h3{ font-size: 16px; }
	.HeaderBox .TopBox ul.top_menu li h3 a{ padding: 8px 15px; }
	.specialtyPhoto ul li{ width: calc(50% - 45px);}
	.team_list ul li{ width: calc(100% - 60px); max-width: 600px; float: none; margin: 20px auto; }
	.team_list .ContentsBox::before{ width: 10vw; }
}
@media (max-width:1100px){
	.FooterBox .ContentsBox{ max-width: 90%; }
	}
@media (max-width:1000px){
	.HeaderBox{ display: none; }
	.team_list::after{ width: 40vw; }
}

@media (max-width:800px){
	.our_user ul li{ width: 49%; }
}
@media (max-width:750px){
	.specialtyPhoto ul li{ width: calc(99% - 45px);}
	.KVbox{ min-height: calc(70vh - 100px); }
}
@media (max-width:650px){
	.KVbox p.sub_title{ background-color: #5aa200; padding: 15px; max-width: initial; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #fff; }
}
@media (max-width:550px){
	.team_list ul li .photo{ float: none; margin: 10px auto; }
	.team_list ul li .info{ width: 100%; }
	.team_list ul li .info h4.name{ text-align: center; }
	.team_list ul li .info p.headline{text-align: center;}
	.specialtyBox ul li{ width: 48%; min-width: initial; }
	.specialtyPhoto ul li{ height: 350px; }
	.KVbox h1.logo{ width: 160px; }
	p.btn{ font-size: 14px; }
	p.btn a{ min-width: initial; }
	p.sub_title{ line-height: 28px; font-size: 20px; }
	.FooterBox p{font-size: 12px;}
	.card__subtitle{ font-size: 15px; }
	.card__description{font-size: 14px;}
}

@media (max-width:350px){
	.KVbox p.sub_title, .specialtyBox ul li p{ font-size: 15px;}
	p.btn{font-size: 13px;}
	h3.main_title, .c2 input, .c2 textarea{ font-size: 14px; }
	p.sub_title{font-size: 18px;}
}

@media (max-device-width:1200px) {
	.KVbox{ background-attachment: initial;}
}
@media (max-device-width:700px) {
	.br_weblisher{ background: url(../images/banner1-bg.jpg) center center no-repeat; }
}