@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body {
	background-image:none;
	background-repeat:repeat;
	background-position:0 0;
	/*background-color:#FDFDFD;
	color:#666;*/
	font-size:13px;
	line-height:1.5;
	font-family:"微軟正黑體", Arial, "新細明體", Helvetica, sans-serif;
	margin:0;
	padding:0;
}
h2{
	font-size:1em;
	}
a {
	/*color:#33C;*/
	text-decoration:none;
}
a:hover {
	/*color:#30F;*/
	text-decoration:underline;
}
img, img a {
	border:none;
}
button[disabled], html input[disabled] {
	cursor:default;
}
ul, ol {
	margin:0;
	padding:0;
	list-style:none;
}
ol li {
	list-style-type:decimal;
	padding:0;
	margin-left:20px;
}
.clearfloat {
	clear:both;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* close commented backslash hack */


.lazy {
	opacity:1;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}
.lazy:hover {
	opacity:0.8;
}
#gotop {
	display: none;
	position: fixed;
	right:20px;
	bottom: 20px;
	z-index: 3000;
	width:45px;
	height:45px;
	background-color:rgba(0,0,0,0.3);
	background-color:#333 \9;
	background-image: url(https://www.okweb.asia/homepage/mains/images/gotop.png);
	background-repeat: no-repeat;
	background-position:center center;
	cursor:pointer;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
	-webkit-border-radius: 10%;
	-moz-border-radius: 10%;
	border-radius: 10%;
}
#gotop:hover {
	background-color:rgba(0,0,0,0.8);
	background-color:#111 \9;
}
#container {
	width:100%;
	-moz-transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	margin:0;
	padding:0;
	left:0;
	overflow:hidden;
	position:absolute;
}
.wrap {
	width:100%;
	margin:0 auto;
	padding:0;
	position:relative;
}

.col-row, .col-cross-line, .col-cross3, .col-cross4, .col-cross6-2, .col-cross6, .col-cross8, .col-left1, .col-right1, .col-group {
	position:relative;
}
.col-row {
	margin-left: 0;
	margin-right: 0;
	margin-bottom:15px;
}
.col-align-r, .right {
	text-align:right;
}
.col-align-c, .center {
	text-align:center;
}
.col-align-l, .left {
	text-align:left;
}
/*==================================
              SLIDER
====================================*/
.carousel-wrap {
	width:100%;
	padding:0;
}
#carousel {
	position: relative;
	width: 100%;
	/* overflow: hidden;決定是否出現左右*/
    -moz-transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	margin:0 auto;
}
#carousel ul.slides {
	width:100%;
	height:auto;
	overflow:hidden;
	list-style:none;
	margin:0;
}
#carousel ul.slides li.slide {
	max-width:100%;
	float: left;
	clear: none;
	padding:0;
	text-align:center;
	line-height:0;
}
#carousel ul.slides img {
	width: 100%;
	margin:0px auto;
	padding:0px;
}
.slider-arrow {
	position: absolute;
	display:none;
	top:0;
	bottom:0;
	margin-top:0;
	width:40px;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	z-index:200;
    -moz-transition:all .1s ease-in-out;
	-webkit-transition:all .1s ease-in-out;
	transition:all .1s ease-in-out;
}
@media all and (min-width: 600px){
	.slider-arrow{display:block;}
}
.slider-arrow-left {
	left:10px;
	background-image:url(https://www.okweb.asia/homepage/mains/images/prev.png);
}
.slider-arrow-left:hover {left:0; padding:0 5px;}
.slider-arrow-right {
	right:10px;
	background-image:url(https://www.okweb.asia/homepage/mains/images/next.png);
}
.slider-arrow-right:hover {right:0; padding:0 5px;}
.slider-nav {
	opacity:0.8;
	position: absolute;
	bottom: 15px;
}
.slider-nav-item {
	width: 8px;
	height: 8px;
	float: left;
	display: block;
	margin: 0 5px;
	/*background: #fff;*/
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
}
.slider-nav-item:hover {
/*background: #ddd;*/
}
.slider-nav-item-current {
/*background: #888;*/
}
@media all and (min-width: 1000px) {
	.carousel-left, .carousel-right {
		/*width:1100px;*/
		position:absolute;
		z-index:50;
		top:0;
		bottom:0;
		min-height:100%;
	}
	.carousel-left {
		left:-100%;
		margin-left:0;
	}
	.carousel-right {
		right:-100%;
		margin-right:0;
	}
}

/*==================================
             HEADER
====================================*/
#header {
	margin:0;
	padding:0;
	/*background:#F8f8f8;
	border-top:3px solid #444;*/
	box-shadow:0 1px 8px rgba(0,0,0,0.6);
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.header-absolute {
	height:auto;
	width:100%;
	margin:0;
	position:relative;
}
.header-fixed {
	height:auto;
	width:100%;
	top:0;
	left:0;
	position:fixed;
	z-index:5000;
}
#logo {
	margin: 0;
	padding: 0 0.5em;
	max-width:160px;
	height:90px;
	position:relative;
	float:none;
	display:block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index:101;
}
#logo table{
	border-collapse:collapse;
	border:none;
	width:100%;
	height:100%;
	max-width:160px;
	height:90px;
	padding:0;
	margin:0;
}
#logo table td {
	padding:0;
	vertical-align:middle;
	text-align:center;
}
#logo img {
	max-width:180px;
	max-height:90px;
}
.header-fixed #logo, .header-fixed #logo table, .header-fixed #logo img{max-height:72px;}

@media all and (min-width: 600px) {
	#logo {
		float: left;
		margin:0;
		max-width:210px;
		height:90px;
	}
	#logo table{
		max-width:210px;
		height:90px;
	}
	#logo img{
		max-width:250px;
		max-height:90px;
	}
}
#webtitle {
	/*color:#666;*/
	font-weight:600;
	font-size:1.4em;
	line-height:1.1;
	position:relative;
	padding:0.5em 0;
	margin:0;
	word-break:break-all;
	width:auto;
	height:auto;
	float:none;
	display:block;
	text-align:center;
	z-index:1000;
}
#webtitle span {
	height:auto;
	display:block;
	text-align:center;
	vertical-align:middle;
}
@media all and (min-width: 600px) {
	#webtitle {
		padding:0 5px;
		width:150px;
		height:90px;
		font-size:1.3em;
		float:left;
		text-align:left;
	}
	#webtitle span {
		text-align:left;
		height:90px;
		display:table-cell;
	}
	.header-fixed #webtitle, .header-fixed #webtitle span {
		height:72px;
	}
}
@media all and (max-width: 600px) {
	#webtitle {
		/*border-top:1px solid #ccc;*/
	}
}

/*==================================
MENUL:Keep li change bg color , a change text color
====================================*/
#closewrap {
	width:0;
	top:0;
	bottom:0;
	z-index:9999;
	display:block;
	position:fixed;
	background:rgba(0,0,0,0.5);
	background:#111 \9;
}
#closewrap.on-off {
	width:100%;
	min-height:100%;
	cursor:pointer;
}
/*when mobile wrap menu*/
#sidewrap {
	width:85%;
	top:0;
	bottom:0;
	left:-90%;
	min-height:100%;
	display:block;
	z-index:99999;
	position:fixed;
	/*background:#dedede;*/
	/*border-right:2px solid rgba(110,110,110,0.1);*/
	box-shadow:1px 2px 10px rgba(0,0,0,0.8);
	-moz-transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	overflow-y:auto;
	overflow-x:hidden;
}
@media all and (min-width: 600px) and (max-width: 1000px) {
	#sidewrap {
		width:50%;
	}
}
#sidewrap::-webkit-scrollbar {
width: 10px;
}
#sidewrap::-webkit-scrollbar-track {
background:rgba(0,0,0,0.1);
}
#sidewrap::-webkit-scrollbar-thumb {
background:rgba(255,255,255,0.6);
}
#sidewrap.on-off {
	left:0;
}

/*when desktop wrap menu*/
#menu-bg {
	background-color:transparent;
	margin:0;
	padding:0;
}
.menu-link {
	position:absolute;
	right:0;
	top:0;
	cursor:pointer;
	z-index:105;
}
.menu-link:hover {
	text-decoration:none;
}
.menu-link span {
	background-color: transparent;
	/*background-image: url(https://www.okweb.asia/homepage/mains/color_a/images/menu-link.png);*/
	background-repeat: no-repeat;
	background-position:center center;
	height:30px;
	width:30px;
	padding:0;
	margin:30px 15px;
	float:left;
	-moz-transition:all 0.1s linear;
	-webkit-transition:all 0.1s linear;
	transition:all 0.1s linear;
}
.header-fixed .menu-link span{
	margin:21px 15px;
}
.menu-link.on-off span {
	/*background-image: url(https://www.okweb.asia/homepage/mains/color_a/images/close.png);*/
}
.menu {
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	z-index:99;
}
.menu ul li {
	display: block;
	position:relative;
	margin:0;
	padding:0;
}
.menu ul li a {
	display: block;
}
.menu ul li a:hover {
	text-decoration:none;
}

.menu > ul > li {
	/*border-top: 2px solid #ccc;*/
	border-left:none;
	display: block;
	visibility:hidden;
}
.menu > ul > li:hover {	
	/*background-color:#f8f8f8;*/
}
.menu > ul > li > a {
	margin:0;
	padding:10px;
	text-align:left;
	/*color:#444;*/
	font-size:1.3em;
	font-weight:normal;
	display:block;
}
.menu > ul > li > a > span{
	/*color:#888;*/
	margin:0 0 0 0.5em;
	font-size:0.8em;
}
.menu > ul > li > a:hover > span {
	/*color:#888;*/
}
.menu > ul > li > a:hover {
	text-decoration:none;
	/*color:#333366;*/
}
.menu > ul > li.has-nextmenu a{
	padding-right:1.3em;
}
.menu > ul > li.has-nextmenu > a:after {
	content: ' ';
	width:0;
	height:0;
	top:1.3em;
	right:0.8em;
	position:absolute;
	/*border-top:5px solid #444;*/
	border-left:4px solid transparent;
	border-right:4px solid transparent;
}
.menu > ul > li > ul{
	display:none;
	position:relative;
	margin:0;
	padding:0;
	top:0;
	width:100%;
}
.menu > ul > li:hover > ul{display:block;}
.menu > ul > li > ul > li{
	background:inhert;
}
.menu > ul > li > ul > li > a {
	padding:0.5em;
	font-size:1.1em;
	/*color:#444;*/
}
.menu > ul > li > ul > li:hover{
	/*background:#eee;*/
}
.menu > ul > li > ul > li > a:hover, .menu > ul > li > ul > li:hover > a{
	/*color:#444;*/
}
.menu > ul > li > ul > li > a:before {
	content: '．';
}
@media all and (min-width: 1000px) {
	.menu-link {
		display:none;
	}
	.menu {
		top:0;
		padding-left:380px;
		background:transparent;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.menu > ul{
		width:150%;
	}
	.menu > ul > li { 
		float:left;
		border-top:none;
		/*border-right:1px #d5d5d5 solid;*/
		height:90px;
		margin:0;
		display: table;
		visibility:hidden;
	}
	.header-fixed .menu > ul > li {height:75px;}
	.menu > ul > li:first-child {
		/*border-left:1px #d5d5d5 solid;*/
	}
	.menu > ul > li:hover {
		/*background-color:#FDFDFD;*/
	}
	.menu > ul > li > a {
		padding:0.5em 0.6em;
		margin:0;
		font-size:1.15em;
		display: table-cell;
		vertical-align:middle;
		/*color:#444;*/
	}
	.menu > ul > li > a:hover, .menu > ul > li:hover > a{
		/*color:#444;*/
	}
	.menu > ul > li > a > span{
		display:block;
		padding:0;
		margin:0;
		/*color:#888;*/
	}
	.menu > ul > li > a:hover > span{
		/*color:#888;*/	
	}
	.menu > ul > li.has-nextmenu > a{
		padding-right:1.5em;
	}
	.menu > ul > li.has-nextmenu > a:after {
		top:45%;
		right:0.5em;
	}
	.menu > ul > li > ul{
		width:200px;
		position:absolute;
		top:90px;
		margin-left:-100px;
		left:50%;
		/*border:2px solid #666;*/		
	}
	.menu > ul > li > ul:before{
		content:' ';
		display:block;
		margin-top:-8px;
		margin-left:90px;
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		/*border-bottom: 6px solid #ccc;*/
	}
	.menu > ul > li > ul > li {
		/*border-top:1px #666 solid;
		background:#fdfdfd;*/
	}
	.menu > ul > li > ul > li:first-child{
		/*border-top:2px #666 solid;*/
	}
	.menu > ul > li > ul > li > a{
		/*color:#333;*/
	}
	.menu > ul > li > ul > li:hover {
		/*background:#eee;*/
	}
	.menu > ul > li > ul > li > a:hover, .menu > ul > li > ul > li:hover > a{
		/*color:#333;*/
	}
	.header-fixed .menu > ul > li > ul{top:75px;}


	/*============*/
	
	.menu ul li > a.btn-moremenu {
		cursor:pointer;
		display: table-cell;
		vertical-align:middle;
	}
	.menu ul li > a.btn-moremenu > span:before {
		content:'More...';
		/*color:#666;*/
		font-size:1.1em;
	}
	.menu ul li:hover > a.btn-moremenu > span:before {
		/*color:#666;*/
	}
	.menu ul li > a.btn-moremenu > span.top:before {
		content:'Less...';
	}
	#more-menu {/*more menu ul*/
		clear: both;
		position:absolute;
		width:200px;
		top:90px;
		right:0;
		margin-left:0;
		overflow-y:auto;
		max-height:2em;
	}
	.header-fixed #more-menu{top:75px;}
	#more-menu, #more-menu ul {
		overflow:hidden;
		height:0em;
	}
	#more-menu.active, #more-menu.active ul {
		overflow:visible;
		height:100em;
	}
	#more-menu.active:before {
		content:' ';
		display:block;
		margin-top:-8px;
		margin-left:165px;
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		/*border-bottom: 6px solid #ccc;*/
	}
	#more-menu > ul > li { 
		padding:0;
		margin:0;
		position:relative;
		/*border:2px solid #ccc;
		border-top:0px solid #ccc;
		background:#f5f5f5;*/
	}
	#more-menu > ul > li:first-child {
		/*border-top:2px solid #ccc;*/
	}
	#more-menu > ul > li:hover {
		/*background-color:#fff;*/
	}
	#more-menu > ul > li > a {
		padding:5px;
		font-size:1.1em;
		/*color:#444;*/
	}
	#more-menu > ul > li > a:hover, #more-menu > ul > li:hover > a{
		/*color:#444;*/
	}
	#more-menu > ul > li > a > span {
		padding-left:10px;
		font-size:0.8em;
		/*color:#888;*/
	}
	#more-menu > ul > li > a:hover > span {
		/*color:#888;*/
	}
	#more-menu > ul > li.has-nextmenu  > a:after {
		content: ' ';
		width:0;
		height:0;
		top:15px;
		right:8px;
		position:absolute;
		/*border-top:5px solid #444;*/
		border-left:4px solid transparent;
		border-right:4px solid transparent;
	}
	#more-menu > ul > li > ul{
		position:relative;
		width:100%;
		margin:0;
		display:none;
	}
	#more-menu > ul > li:hover > ul{
		display:block;
		border:none;
		height:auto;
	}
	#more-menu > ul > li > ul > li {
		position:relative;
		display:block;
		padding:0;
		margin:0;
		border-left:none;
		/*border-top:1px #ccc solid;*/
		/*background-color:#666;*/
	}
	#more-menu > ul > li > ul > li:hover{
		/*background-color:#444;*/
	}
	#more-menu > ul > li > ul > li > a {
		padding:5px;
		font-size:1em;
		/*color:#fff;*/
	}
	#more-menu > ul > li > ul > li > a:hover,#more-menu > ul > li > ul > li:hover > a {
		/*color:#fff;*/
	}
	#more-menu > ul > li > ul > li > a:before {
		content: '．';
	}
	#index-news > ul li .date {
		width:17%;
		display:inline;
	}
	#index-news > ul li .newslist {
		width:82%;
		display:inline;
	}
}

/*==================================
              NAVBAR
====================================*/
#navbar {
	position:relative;
	display:block;
	margin:0;
	padding:0.5em 1em;
	font-size:1em;
	/*background:#E5E3DF;
	color:#a8a8a8;*/
	box-shadow:0px 1px 5px rgba(0,0,0,0.2) inset;
}
#navbar a {	
	/*color:#a8a8a8;*/
}
#navbar a:hover { 
	/*color:#333;*/
}
#navbar .language {
	/*background:url(https://www.okweb.asia/homepage/mains/images/lang.png) no-repeat 0px 3px;*/
	padding:0 2px 0 25px;
	margin:0 0 0 15px;
	float:right;
	line-height: 25px;
}
/*==================================
             CONTENT
====================================*/
#content-bg {
	/*background:#FDFDFD;*/
	margin:0;
	padding:30px 0;
}
#section1 {
	width:90%;
	margin:0 auto;
	padding:0;
}
#section2 {
	width:90%;
	margin:0 auto;
	padding:0;
	background-color:transparent;
}
.page-content {
	margin:0;
	padding:0 10px;
	font-size:1.15em;
	line-height:2em;
}
h1 {
	/*color:#444;
	border-bottom:3px solid #D5D5D5;*/
	font-weight:bold;
	font-size:21px;/*must*/
	line-height:50px;/*must*/
	margin:0 0 5px 0;
	padding:0;
	clear:both;
}
h1:before {
	width:15px;
	height:20px;
	content:' ';
	float:left;
	margin:0 0 5px 0;
	padding:15px 0;
	/*border-bottom:3px solid #a4a4a4;
	background:url(https://www.okweb.asia/homepage/mains/color_a/images/h3-dot.png) no-repeat 0px center;*/
	background-size:contain;
}
.btn-more {
	padding:0;
	margin:0;
	font-size:1.15em;
	font-weight:bold;
	position:absolute;
	top:15px;
	right:0;
}
.btn-more a {
	/*color:#444; */
	text-decoration:none;
}
.btn-more a:hover {
	/*color:#30F;*/
	text-decoration:none;
}
.btn-more a:before {
	/*background-color:#336;
	background:url(https://www.okweb.asia/homepage/mains/color_a/images/btn-more.png) center center no-repeat;*/
	background-size:contain;
    width:15px;
	height:15px;
	content:' ';
	float:left;
	margin:1px 5px 0 0;
	padding:2px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.btn-more a:hover:before {
	/*background-color:#30F;*/
}
#index-intro, #index-news {
	margin-bottom:20px;
	position:relative;
}
.index-about-img {
	margin:0 auto;
	padding:0;
	max-width:100%;
	float:none;
	display:block;
}
#index-news > ul li {
	display:block;
	margin:0;
	padding:13px 0;
	font-size:1.15em;
	line-height:1.5em;
	/*border-bottom:1px solid #dedede;
	color:#666;*/
}
#index-news > ul li a {
	/*color:#666;*/
	text-decoration:none;
}
#index-news > ul li a:hover {
	/*color:#30F;*/
	text-decoration:underline;
}
#index-news > ul li .date {
	display:block;
	font-size:0.9em;
	float:none;
	width:100%;
	margin-right:10px;
	/*color:#999;*/
}
#index-news > ul li .newslist {
	display:block;
	float:none;
	width:100%;
}
#href-slide {
	width:100%;
	padding:0;
	margin:10px auto;
	position:relative;
}
.href-one {
	margin:0 2px 2px 0;
	padding:0;
	float:left;
	width:48.5%;
}
.href-one img {
	width:100% \9;
	max-width:100%;
	max-height:100%;
}
@media all and (min-width: 600px) and (max-width: 1000px) {
	.index-about-img {
		max-width:450px;
		float:right;
	}
	.href-one {
		width:32.5%;
	}
	#index-news > ul li .date {
		width:17%;
		display:inline;
	}
	#index-news > ul li .newslist {
		width:82%;
		display:inline;
	}
}
/*==================================
             footer
====================================*/

#footer {
	padding:10px 0;
	margin:0;
	/*background:#F1EFEB;
	border-top:3px #d5d5d5 solid;*/
}
#footer > .wrap {
	width:90%
}
.f-section {
	display:block;
	text-align:center;
	/*color:#666;*/
}
#f-links {
	margin:0;
	padding:10px 10px 0 10px;
	/*color:#666;*/
}
#f-links ul {
	list-style:none;
	margin:0;
	padding:0;
}
#f-links ul li {
	display:inline-block;
}
#f-links ul li:before {
	content:" / ";
}
#f-links ul li:first-child:before {
	content:" ";
}
#f-links ul li a {
	padding:5px 8px 5px 0;
	margin:0;
	font-size:1em;
	/*color:#666;*/
	text-decoration:none;
}
#f-links ul li a:hover {/*color:#336;*/
	text-decoration:underline;
}
#f-fb {
	margin:0;
	display: block;
	clear: both;
	padding:5px 0;
}
#f-info {
	padding:5px 0;
	margin:0;
	font-size:1em;
	line-height:1.8em;
}
#f-counter {
	margin:0 auto;
	font-size:0.9em;
	/*color: #666;*/
    display: block;
	text-align:center;
	padding:5px 0;
}
#f-power {
	/*background:#ddd;
	border-top:1px #dedede solid;*/
	padding:15px 0;
	margin:0 -10%;
	text-align:center;
}
.social-icon {
	list-style:none;
	margin:0;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	text-align:center;
}
.social-icon li {
	display:inline-block;
 	*display: inline;
	margin:0 10px 0 0;
}
.social-icon li a {
	display:block;
	width:30px;
	height:30px;
	background-repeat:no-repeat;
	background-size:contain;
	border:1px solid transparent;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	/*background-color:#ddd;*/
}

@media all and (min-width: 1000px) {
	.wrap, .carousel-wrap{
		width:980px;
	}
	#section1 {
		width:630px;
		float:left;
		margin:0;
		padding:0;
	}
	#section2 {
		width:300px;
		float:right;
		margin:0;
		padding:0;
		background:transparent;
	}
	#submenu {
		float:right;
		width:250px;
		margin:0;
	}
	.page-content {
		float:left;
		width:100%;
		margin:0;
		padding:0;
	}
	#index-intro {
		width:100%;
		float:left;
	}
	.index-about-img {
		max-width:250px;
		float:right;
		margin:0 0 15px 10px;
	}
	#href-slide {
		width:300px;
		padding:0;
		margin:0;
		position:relative;
		float:right;
	}
	.href-one {
		width:300px;
	}
}