@charset "utf-8";
/* ===== reset ===== */
html, body, div, span, a, img, ul, li, nav, footer, h1, h2{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body{
	line-height: 1;
}
ul, li{
	list-style: none;
}
:focus{
	outline: 0;
}
h1, h2{
	font-weight: inherit;
}

/* ===== 頁面主要樣式 ===== */
/*main_top_nav**********************************************************/
.main_top_nav{
	position:fixed;
	top:-60px;
	/*max-width:1920px;*/
	margin:0 auto;
	width:100%;
	background:rgba(51,153,153,0.9);
	z-index:999;
	transition: top 0.3s;
	-webkit-transition: top 0.3s;
}
@media screen and (max-width:720px) {
	.main_top_nav{
		display:none;
	}
}
.main_top_nav .logo_edu{
	float:left;
	width:21%;
	height:40px;
	margin:10px 1%;
}
.main_top_nav .logo_edu img{
	vertical-align:baseline;
	margin:0 5px 0 0;
}
.main_top_nav .logo_edu a{
	display:block;
	width:100%;
	height:100%;
	color:#FFF;
}
.main_top_nav .main_menu{
	float:right;
	width:75%;
	text-align:right;
	margin:0 1% 0 0;
}
.main_top_nav ul li.m0,
.main_top_nav ul li.m1{
	position:relative;
	display:inline-block;
}
.main_top_nav ul li.m1 img{
	vertical-align:baseline;
}
.main_top_nav ul li.m0 a{
	color:#fff;
	position:relative;
	top:0;
	display:inline-block;
	-webkit-transition: top 0.2s linear;
	-moz-transition: top 0.2s linear;
	-ms-transition: top 0.2s linear;
	-o-transition: top 0.2s linear;
	transition: top 0.2s linear;
}
.main_top_nav ul li.m1 a{
	color:#fff;
	position:relative;
	top:7px;
	line-height:60px;
	display:inline-block;
	-webkit-transition: top 0.2s linear;
	-moz-transition: top 0.2s linear;
	-ms-transition: top 0.2s linear;
	-o-transition: top 0.2s linear;
	transition: top 0.2s linear;
}
.main_top_nav ul li.m0 a:hover{
	top:-3px;
	color:#fff;
}
.main_top_nav ul li.m1 a:hover{
	top:4px;
	color:#fff;
}
.main_top_nav ul li.m0::after{
	top:-2px;
	position:relative;
	content:"｜";
	font-size:12px;
	padding:0 6px;
	color:rgba(255,255,255,0.3);
}
/***********************************************************************/
/*OPTION選單*************************************************************/
#mask{
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:888;
	transition:background-color 2s;
	-webkit-transition:background-color 2s;
	background-color: rgba(0, 0, 0, 0.6);
}
.top_nav{
	position:fixed;
	top:0;
	top:-40px;
	max-width:1920px;
	margin:0 auto;
	width:100%;
	height:40px;
	background:#75c6bf;
	background:rgba(51,153,153,0.9);
	z-index:999;
	display:none;
	transition: top 0.3s;
	-webkit-transition: top 0.3s;
}
/*option_menu*/
#option_column{
	display:none;
}
@media screen and (max-width:720px) {
	.top_nav{
		display:block;
	}
	/*option_menu*/
	#option_column{
		display:block;
		z-index:900;
		width:100%;
		position:relative;
		left:100%;
		overflow:hidden;
		overflow-y:auto;
		padding:0 0 40px 0;
		background-color:#F5F6F6;
		transition:left 0.5s;
		-webkit-transition:left 0.5s;
	}
	#option_column .option_wrap {
		margin:0;
	}
	/*狀態*/
	#option_column.clicked {
		display: block;
		left:25%;
		transition: left 0.3s;
		-webkit-transition:left 0.3s;
	}
	#option_column.back {
		display:block;
		left:100%;
		transition:left 0.3s;
		-webkit-transition:left 0.3s;
	}
	#option_column .option_sel{
		clear:both;
		width:100%;
		height:49px;
		font-size:13pt;
		line-height:49px;
		display:block;
		border-bottom:1px solid #ddd;
		color:#333;
		cursor:pointer;
	}
	#option_column .option_sel:hover{
		background-color:#ececec;
	}
	#option_column .option_space{
		clear:both;
		width:100%;
		height:60px;
		display:block;
		background:#F5F6F6;
	}
	#option_column .option_sel a{
		clear:both;
		width:100%;
		height:49px;
		text-indent:10px;
		padding:0 0 0 20px;
		line-height:49px;
		display:block;
		border-bottom:1px solid #ddd;
		color:#333;
	}
	#option_column .normal{
		background:url(../img/icons/icon_sel.svg) no-repeat;
		background-size:14px 14px;
		background-position:10px center;
	}
	#option_column .index{
		background:url(../img/icons/icon_index.svg) no-repeat;
		background-size:14px 14px;
		background-position:10px center;
	}
	#option_column .fb{
		background:url(../img/icons/icon_fb.svg) no-repeat;
		background-size:18px 18px;
		background-position:8px center;
	}
}
/**************************************************************/
/*option*/
.option_logo{
	float:left;
	color:#FFF;
	font-size:12pt;
	padding:10px 0 0 10px;
}
.option_logo img{
	vertical-align:baseline;
	margin:0 5px 0 0;
}
#option{
	float:right;
	width:60px;
	height:40px;
	background:url(../img/icons/icon_head_option_agent.svg) center center no-repeat;
	background-size:40px 40px;
	display:none;
	cursor:pointer;
	margin:0 0 0 0;
}
#option.close{
	background:url(../img/icons/icon_head_option_close.svg) center center no-repeat;
	background-size:40px 40px;
}
@media screen and (max-width:720px) {
	#option{
		display:inline-block;
	}
}
/***************************************************************/
/*****************************************/
*{
	margin: 0;
	padding: 0;
}
html, body{
	height: 100%;
	overflow: hidden;
	font-family: 微軟正黑體, simhei, Arial;
	background:#dcdcdc;
}
.wrap{
	height:100%;
	background:url(../img/bg/bg.jpg) center -100px fixed no-repeat;
  -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#container{
	height: 100%;
	width: 100%;
	position: absolute;
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
	overflow-y: auto;
}
.logo{
	clear:both;
	width:50%;
	max-width:300px;
	height:260px;
	margin:0 auto;
	padding:280px 0 35px 0;
	text-align:center;
}
@media screen and (max-width:720px) {
	.logo{
		padding:200px 0 35px 0;
	}
	.wrap{
		background:url(../img/bg/bg.jpg) center -180px fixed no-repeat;
	}
}
.logo img{
	width:100%;
}
.menu_column{
	clear:both;
	width:100%;
	height:280px;
	text-align:center;
	margin:0 auto 30px auto;
	z-index:2;
	overflow:hidden;
}
@media screen and (max-width:720px) {
	.menu_column{
		display:none;
	}
}
.menu{
	clear:both;
	display:inline-block;
	width:90%;
	max-width:915px;
	height:325px;
	text-align:center;
	background:rgba(0,0,0,0.5);
}
.menu .company{
	clear:both;
	display:block;
	font-size:22pt;
	color:#FFF;
	margin:40px 0 0 0;
	letter-spacing:2px;
}
.menu .slogan{
	clear:both;
	display:block;
	font-size:13pt;
	color:#70beba;
	margin:40px 0 50px 0;
}
.menu .select_column{
	clear:both;
	display:block;
	width:100%;
	text-align:center;
}
.menu .select_column .space{
	display:inline-block;
	width:1px;
	height:24px;
	background:#fff;
	margin:0 0 0 0;
}
.menu .select_column .button{
	display:inline-block;
	width:18%;
	text-align:center;
	color:#dcdbdc;
	cursor:pointer;
	margin:0 0 10px 0;
}
.menu .select_column .button .ch{
	font-size:12pt;
	margin:0 0 8px 0;
	letter-spacing:2px;
}
.menu .select_column .button .en{
	font-size:14pt;
}
.menu .select_column .button a:hover,
.menu .select_column .button:hover{
	color:#fff;
}
.scroll_down{
	position:relative;
	clear:both;
	width:100%;
	height:40px;
	text-align:center;
	color:#5c5c5d;
	font-size:15px;
	line-height:17px;
	margin:0 0 40px 0;
	animation:scroll_down_animation 0.8s infinite alternate;
	-webkit-animation:scroll_down_animation 0.8s infinite alternate;
	top:0;
}
@-webkit-keyframes scroll_down_animation {
	from {
		top:0;
	}
	to {
		top:20px;
	}
}
@keyframes scroll_down_animation {
	from {
		top:0;
	}
	to {
		top:20px;
	}
}


/*info_column*/
.info_column{
	clear:both;
	display:block;
	width:100%;
	/*max-width:1940px;*/
	margin:0 auto;
	background:#dcdcdc;
	text-align:center;
}
.bg_about{
	background:#dcdcdc;
	-webkit-background-size:100% auto;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
.bg_service{

}
.bg_contact{
	background:url(../img/bg/contact_0.jpg) no-repeat bottom center #dcdcdc;
	-webkit-background-size:100% auto;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
.info_column .info{
  display: block;
  margin: 0 auto;
	width:90%;
	padding:130px 0 30px 0;
	max-width:1000px;
	text-align:center;
}
@media screen and (max-width:800px) {
	.info_column .info{
		display:inline-block;
		width:90%;
		padding:70px 0 30px 0;
		max-width:1000px;
		text-align:center;
	}
}
.info_column .info .title{
	clear:both;
	display:inline-block;
	text-align:center;
	font-size:30pt;
	color:#595757;
	margin:0 0 40px 0;
}
.info_column .info .title .ch{
	position:relative;
	letter-spacing:2px;
	font-size:20pt;
	padding:0 20px;
	vertical-align:middle;
}
.info_column .info .title .en{
	font-size:23pt;
	vertical-align:text-bottom;
	vertical-align:middle;
}
.info_column .info .des{
	clear:both;
	font-size:14pt;
	line-height:24pt;
	word-break:break-all;
	color:#555;
	text-align:center;
}
@media screen and (max-width:480px) {
	.info_column .info .title .ch{
		font-size:16pt;
		padding:0 10px;
	}
	.info_column .info .title .en{
		font-size:19pt;
	}
	.info_column .info .des{
		font-size:12pt;
		line-height:20pt;
	}
}
.info_column .info .des img{
	vertical-align:middle;
	top:-2px;
	position:relative;
}

/*service*/
.service_column{
	width:100%;
	background:#dcdcdc;
	overflow:hidden;
	text-align:center;
}
.service_column .box{
	position:relative;
	display:block;
	width:100%;
	margin:0 auto;
	max-width:1920px;
	text-align:center;
}
.service_column .box img{
	width:100%;
}
.service_column .box .info_column{
	clear:both;
	display:block;
	width:100%;
	margin:0 auto;
	background:none;
	text-align:center;
	padding:0 0 10% 0;
}
.service_column .box .icon_box{
	display:inline-block;
	width:32%;
	text-align:center;
	padding:40px 0 60px 0px;
}
@media screen and (max-width:1200px) {
	.service_column .box .icon_box{
		margin:0;
	}
}
@media screen and (max-width:640px) {
	.service_column .box .icon_box{
		width:45%;
	}
}
.service_column .box .icon_box img{
	width:50%;
	text-align:center;
	display:inline-block;
	padding-bottom:10px;
}
.service_column .box .icon_box .en{
	font-size:18pt;
	display:block;
	padding-bottom:10px;
	color:#595757;
}
.service_column .box .icon_box .ch{
	font-size:12pt;
	color:#595757;
}
@media screen and (max-width:800px) {
	.service_column .box .icon_box .en{
		font-size:15pt;
		padding-bottom:6px;
	}
	.service_column .box .icon_box .ch{
		font-size:11pt;
	}
}
@media screen and (max-width:480px) {
	.service_column .box .icon_box .en{
		font-size:12pt;
		padding-bottom:6px;
	}
	.service_column .box .icon_box .ch{
		font-size:11pt;
	}
}

/*contact*/
.contact_column{
	clear:both;
	display:block;
	width:100%;
	background:#dcdcdc;
	overflow:hidden;
	text-align:center;
    background: url(../img/bg/contact_1.jpg) no-repeat top center #dcdcdc;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
}
}
.contact_column .box{
	position:relative;
	display:block;
	width:100%;
	margin:0 auto;
	max-width:1920px;
	text-align:center;
}
.contact_column .box .info_column{
	clear:both;
	display:block;
	width:100%;
	max-width:1923px;
	margin:0 auto;
	background:none;
	text-align:center;
}
.contact_column .box .right_column{
	margin: 0 auto;
	display:block;
	width:100%;
	padding-top:2em;
	font-size:27px;
}
@media screen and (max-width:640px) {
	.contact_column .box .right_column{
		float:none;
		width:86%;
		margin:0 auto;
		clear:both;
		text-align:right;
	}
}
.contact_column .box .right_column a{
	color:#595757;
}

/*copyright*/
.copyright{
	display:block;
	clear:both;
	width:100%;
	text-align:center;
	color:#231815;
	font-size:8pt;
	line-height:90px;
	height:90px;
}
img{
	border:none;
	vertical-align:bottom;
}

a:link,
a:visited,
a:hover {
	text-decoration:none;
}
::-webkit-scrollbar {
  width:3px;
  background:#dcdcdc;
}
::-webkit-scrollbar-thumb {
  background:#00604D;
}
/*service_process_box*/
.service_process_box{
	display:inline-block;
	background:#aaa;
	color:#fff;
	padding:8px 12px;
	text-align:center;
	cursor:pointer;
	margin:0 0 5px 0;
}
.service_process_box_0{
	background:#75C6BF;
	padding:8px 12px 9px 12px;
}
@media screen and (max-width:480px) {
	.service_process_box{
		clear:both;
		width:90%;
		max-width:360px;
		margin:0 auto;
		text-align:left;
	}
}
.service_process_box .num{
	font-size:11pt;
	margin:0 5px 0 0; 
}

/* ===== hover 效果 ===== */
/*!
 * Hover.css (http://ianlunn.github.io/Hover/)
 * Version: 2.0.1
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014. Generated with Sass.
 */
.hvr-float{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-float:active,.hvr-float:focus,.hvr-float:hover{-webkit-transform:translateY(-8px);transform:translateY(-8px)}

/* ===== 作品彈出視窗 ===== */
#colorbox, #cboxOverlay{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#colorbox{outline:0; box-sizing:content-box;}
#cboxContent{position:relative; margin-top:20px; background:url(../img/bg/bg_menu.png) repeat; box-sizing:content-box;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling:touch; border:2px solid #fff; background:url(../img/bg/bg_menu.png) repeat; box-sizing:content-box;}
#cboxClose{position:absolute; top:2px; right:0px; display:block; width:38px; height:19px; padding:0; margin:0; border:0; overflow:visible; background:url(../img/ui/controls.png) no-repeat top center; text-indent:-9999px; cursor:pointer;}
#cboxClose:hover{background-position:bottom center;}
#cboxClose:active{outline:0;}

/* ===== 作品縮圖列表 ===== */
.portfolio_page_set{
	overflow:hidden;
	overflow-y:auto;
}
::-webkit-scrollbar {
  width:3px;
  background:url(../img/bg/bg_menu.png) repeat;
}
::-webkit-scrollbar-thumb {
  background:#7DCEC8;
}
.portfolio_title{
	clear:both;
	font-size:14pt;
	color:#333;
	width:95%;
	text-align:center;
	margin:30px auto 20px auto;
	padding:0 2.5%;
	color:#FFF;
}

.photo_list_column{
	clear:both;
	width:96%;
	margin:0 auto 40px auto;
	overflow:hidden;
}
.photo_list_column .box{
	float:left;
	display:block;
	width:24%;
	height:0;
	padding-bottom:15%;
	margin:0.5%;
	-webkit-background-size:cover !important;
	-moz-background-size:cover !important;
	background-size:cover !important;
	background-position:center center !important;
}
@media screen and (max-width:900px) {
	.photo_list_column .box{
		width:32%;
		padding-bottom:20%;
	}
}
@media screen and (max-width:640px) {
	.photo_list_column .box{
		width:49%;
		padding-bottom:30.625%;
	}
}

/* ===== 網頁設計作品 ===== */
/*網頁設計 用*/
.case_web_box{
	display:inline-block;
	width:31%;
	margin:1% 0.5%;
  vertical-align: top;
}
@media screen and (max-width:640px) {
	.case_web_box{
		width:48%;
	}
}
.case_web_box img{
	width:100%;
}
.case_web_box{
	color:#FFF;
	font-size:10pt;
}
.case_note{
	font-size:9pt;
	color:#CCC;
	text-align:center;
	widows:100%;
}
.case_note::after {
	font-size:9pt;
	color:#CCC;
    content: "注意：以下均為作品展示用途，並非實際活動。";
}