@charset "utf-8";
/* CSS Document */
/*!
Pure v0.6.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v^3.0 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dashed}b,strong{font-weight:600}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0; margin:0 0.2em;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.hidden,[hidden]{display:none!important}.pure-img{max-width:100%;height:auto;display:block;}

body{
	padding:0;
	margin:0;
	background: #f8f8f8;
	/*color:#333;*/
	background-attachment:fixed;
	font-size: 15px;
	line-height:28px;
	font-family: 'Open Sans', "微軟正黑體", Arial, "新細明體", "Helvetica Neue", Helvetica, sans-serif;
}
.notice:after {
    content: '*';
    color: #F00;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
}
hr{/*border-color:#ddd;*/}
ul, ol, dl { padding: 0; margin: 0; list-style:none; }
ol li{list-style-type: decimal; margin-left:1.5em;}
label{font-weight: normal;  padding: 0; margin: 0; }
a:link,a:hover,a:visited{text-decoration: none;}
a{/*color:#7b7b7b;*/ text-decoration:none;}
a:hover{/*color:#3DA1B7;*/text-decoration:none;}
a:focus{padding:0; margin:0;}
img,a img{border:none;}
img.img-left{float:left; margin:0 1em 1em 0;}
img.img-right{float:right; margin:0 0 1em 1em;}
img.img-block{display:block; text-align:center; margin:0 0 1em 0;}
.align-left{text-align: left;}
.align-right{text-align: right;}
.align-center{text-align: center;}
.clearfix:after,.clearfloat {
	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 */

.animate{
	-o-transition: all 0.1s ease-out;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}

.btn-style,.btn,.btn-color{
	cursor: pointer;
	display:inline-block;
	font-size: 1em;
	line-height: 1.8;
	font-weight:bold;
	border:none;
	/*color:#fff;
	background:#7b7b7b;*/
	text-align: center;
	padding:0.5em 1em;
	margin-right:0.5em;
    margin-bottom:0.5em;
	-o-transition: all 0.2s cubic-bezier(0,.37,.24,.99);
	-webkit-transition: all 0.2s cubic-bezier(0,.37,.24,.99);
	-moz-transition: all 0.2s cubic-bezier(0,.37,.24,.99);
	transition: all 0.2s cubic-bezier(0,.37,.24,.99);
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-ms-border-radius: 0 !important;
	-o-border-radius: 0 !important;
	border-radius: 0 !important;
}
.btn-style:hover,.btn:hover,.btn-color:hover{
	/*background:#9d9d9d;
	color:#fff;*/
}
.form-control, select, textarea, input[type=text] {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	font-size: 1em;
	padding:0.5em;
	height:auto;
	margin:0 0.5em 0.5em 0;
	/*background: #fff;
	border:1px solid #ccc;*/
}
.img-thumbnail {
	display: inline-block;
	max-width: 100%;
	height: auto;
	padding:0;
	line-height: 1.42857143;
	background-color: transparent;
	border:none;
	border-radius: 0;
	margin-bottom:1em;
}
.gotop{
	display: none;
	position: fixed;
	right:2em;
	bottom:0;
	z-index: 1000;
	width:70px;
	height:35px;
	background-color: transparent;
	background-image: url(https://ae1.okweb.asia/3006/svg/gotop.svg);
	background-repeat: no-repeat;
	background-position:center center;
	background-size:contain;
	/*background-color:#fefefe;*/
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	cursor:pointer;
	-webkit-border-top-left-radius: 25px;
	-webkit-border-top-right-radius: 25px;
	-moz-border-radius-topleft: 25px;
	-moz-border-radius-topright: 25px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}
.gotop:hover{bottom:-3px;}
.container { position:relative;}
.all-wrap{
	padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/*==============================
      	  Header
===============================*/
.header{
	position:relative;
	display:block;
	margin:0;
	padding:0 1em;
	/*background: #fefefe;*/
	border-right:none;
}
.container-right{
	display:block;
	margin:0;
	padding:1em;
	/*background: #fefefe;*/
}
.logo{
	margin:0 auto;
	padding:0;
	width:auto;
	height:auto;
	display:block;
	vertical-align:middle;
	text-align:center;
}
.logo a{
	display:inline-block;
}

.logo img,.topimage img{
	max-width: 100%;
	max-height: 100%;
}
.webtitle{
	/*color:#333;*/
	margin:0 auto;
	padding:0.5em 0;
	text-align:center;
	font-size: 1.4em !important;
	line-height:1.5;
}
@media  (min-width: 768px) {
	.all-wrap{
		padding:0 0 0 200px !important;
	}
	.header{
		top:0;
		left:0;
		bottom:0;
		width:190px;
		z-index:5;
		position:fixed;
		border-right:none;
		float: left;
		margin:2em 0 2em 1em;
		padding:1em;
		box-shadow:0 0 10px rgba(0,0,0,0.2);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
	}
	.container-right{
		display:block;
		margin:2em 1em 2em 2em;
		padding:1em;
		box-shadow:0 0 10px rgba(0,0,0,0.2);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		position:relative;
		z-index:10;
		max-width:1350px;
	}
	.logo{
		width:180px;
		display:table-cell;
	}
	.logo img{max-width:160px; max-height:160px;}
}
@media  (min-width: 1021px) {
	.all-wrap{padding:0 0 0 280px !important;}
	.header{width:250px;margin:2em 0 2em 2em; padding:2em;}
	.container-right{margin:2em; padding:2em;}
	.logo{width:250px;}
	.logo img{max-width:190px; max-height:190px;}
}
@media  (max-width: 767px) {
	.logo img{max-width:250px; max-height:250px;}
}
/*==============================
      	  Primary Menu
===============================*/
.major-menu-wrap{
	z-index:1000;
	position:relative;
	padding:0;
}
.major-menu{
	display:none;
}
.major-menu ul{
	position:relative;
}
.major-menu li:hover, .major-menu li.current {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}
.major-menu li {
	display:block;
	position: relative;
}
.hasdropmenu:after{
	content:' ';
	display:inline-block;
	position:absolute;
	width:0;
	height:0;
	top:1.5em;
	right:0.3em;
	/*border-top: 6px solid #333;*/
	border-right: 5px solid transparent;
	border-left:5px solid transparent; 
	opacity: 0.5;
}
.major-menu > li:hover .hasdropmenu:after{
	/*border-top: 6px solid #fff;*/
}
.major-menu > li > a {
	/*color:#333;*/
	background: none;
	/*border-top:1px solid rgba(100,100,100,0.2);*/
	margin:0;
	padding:0.5em;
	display:block;
	font-size: 1em;
}
.major-menu > li:first-child > a {
	border-top:none;
}

.major-menu > li:hover > a{
	/*background: #7b7b7b;
	color:#fff;*/
}
.major-menu > li > ul{
	z-index:-999;
	display:none;
	/*border:2px solid #ddd;*/
}
.major-menu > li:hover > ul{
	z-index: 9999;
	display:block;
	padding:0;
	margin:0;
	right:0;
	left:0;
	position:relative;
	border-bottom:2px solid rgba(0,0,0,0.3);
	border-bottom:2px solid #999 \9;}
.major-menu > li:hover > ul > li > a {
	display:block;
	font-size: 0.9em;
	padding:0.3em 0.5em;
	/*border-bottom:1px solid #ddd;
	background: #fff;
	color:#333;*/
}
.major-menu > li:hover > ul > li > a:before{
	content:' ';
	content:' - ' \9;
	display:inline-block;
	display:inline \9;
	/*background: rgba(0,0,0,0.3);*/
	color:inherit;
	width:3px;
	height:3px;
	margin-right: 8px;
    margin-bottom: 3px;
}
.major-menu > li > ul > li > a:hover {
	background: #979797;
	color:#fff;
}

.major-menu-wrap select {
	/*background:#f2f2f2;
	color:#333;*/
	border:none;
	width:100%;
	height:auto;
	display: block;
	margin:0 auto 0.5em auto; 
	font-size: 1.2em;
	padding:0.5em;
    position:relative;
    z-index: 1100;
}
.menu-select.menu-original {
    position:relative;
    top: auto;
    left: auto;
    right: auto;
    box-shadow: none;
}
.menu-select.menu-fixed {
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

@media  (min-width: 768px) {
	.major-menu { display: block; margin:0;}
	.major-menu-wrap{ padding:0; overflow-y:auto;}
	.major-menu-wrap select { display:none; }
}

/*==============================
        ScrollBar
===============================*/
.mCSB_scrollTools .mCSB_draggerRail{
	background-color: transparent; background-color: rgba(0,0,0,0);
	filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background-color: #999;
	opacity: .3;
	filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
	background-color: #888;
	opacity: .5;
	filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
}
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background-color: #888;
	opacity: .5;
	filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
}

/*==============================
      	   Header Nav
===============================*/
.affiliated{
	/*background:	#fefefe;
	border:1px solid #ddd;*/
	display:table;
	width:100%;
	font-size:1em;
	color:#333;
}

/*=========== marquee ===========*/
.marquee-wrap{
	display:table-cell;
	width:auto;
	padding:0 1em;
	margin:0;
	/*border-bottom:0;
	border-right:1px solid #ddd;*/
	vertical-align:middle;
}

/*=========== header-nav-wrap ===========*/
.header-nav-wrap{
	display:table-cell;
	width:430px;
	opacity:0;
}
.header-nav-wrap > ul{
	padding:0;
	width:auto;
	text-align:right;
}
.header-nav-wrap > ul > li{
	display:inline-block;
	float:left \9;
	margin:0 0 0 -4px;
	margin:0 \9;
	padding:0;	
}
.header-nav-wrap > ul > li > a{
	width:70px;
	height:70px;
	display:block;
	margin:0;
	padding:0;
	background:none;
	/*border-right:1px solid #ddd;*/
}
.header-nav-wrap > ul > li:first-child > a{
	/*border-left:1px solid #ddd;*/
}
.header-nav-wrap > ul > li > a:hover{
	/*background:#f2f2f2;*/
}
.dropdown-menu-lang{
	min-width:70px;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	-ms-border-radius: 0px !important;
	-o-border-radius: 0px !important;
	border-radius: 0px !important;
}

/*=========== pcate-btn ===========*/
.pcate-wrap{
	display:table-cell;
	position:relative;
	width:170px;
	vertical-align:middle;
}
a.btn-pcate{/*color:#333;*/}
.btn-pcate{
	margin:0;
	padding:0 1em;
	display:block;
	text-align:left;
	line-height:70px;
	background: none;
	/*color:#333;*/
	position:relative;
	cursor:pointer;
}
.btn-pcate:hover{
	/*background: #f2f2f2;
	color:#333;*/
}

.btn-pcate:before{
	content:' ';
	position:absolute;
	display:inline-block;
	top:50%;
	right:0.5em;
	margin-top:-3px;
	width:0;
	height:0;
	/*border-top: 6px solid #333;*/
	border-right: 5px solid transparent;
	border-left:5px solid transparent; 
	opacity: 0.8;
}
.btn-pcate.active{
	/*background:#7b7b7b;
	color:#fff;*/
	position:relative;
}
.btn-pcate.active:before{
	content:'X';
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	width:1em;
	height:1em;
	line-height:1;
	font-size: 0.8em;
	border:none;
	margin-top:-0.5em;
}

.side-category{
	width:100%;
	padding:15px;
	margin:0;
	/*background:#fff;
	border:1px solid #ddd;*/
	position:absolute;
	top:70px;
	right:0;
	text-align:left;
	z-index:1000;
	display:none;
}
.side-category .side-title{display:none;}

.sub-list{
	float:left;
	margin:0 auto;
	width:100%;
}
.sub-list li{
	display:block;
	margin:0;
	padding:0;
	position:relative;
}
.sub-list li a{
	/*color:#333;*/
	font-size: 1em;
	padding:0.3em;
	display:block;
	position: relative;
}
.sub-list > li > a{
	/*border-top:1px solid #ddd;*/
}
.sub-list > li:first-child > a{
	border-top:none;
}
.sub-list li a:hover{
	/*color:#7b7b7b;
	background: none;*/
}
.sub-list li a.mark{
	/*color:#7b7b7b;
	background:#f5f5f5;*/
}
.sub-list > li > ul {
	height:0;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: all .15s ease-in-out .15s;
	-moz-transition: all .15s ease-in-out .15s;
	-o-transition: all .15s ease-in-out .15s;
	-ms-transition: all .15s ease-in-out .15s;
	transition: all .15s ease-in-out .15s;
}
.sub-list > li:hover > ul,.sub-list > li.open > ul {
	margin:0 0 1em 0;
	height:100%;
	opacity: 1;
}
.sub-list > li > ul > li > a{
	font-size: 1em;
	padding:0.3em 0.3em 0.3em 1em;
}
.sub-list > li > ul > li > a:before{
	content:' ';
	content:' - ' \9;
	/*background: rgba(0,0,0,0.3);*/
	position:absolute;
	width:3px;
	height:3px;
	top:1.1em;
	left:0.3em;
}
.sub-list > li > ul > li > a.mark{
	/*color:#fff;
	background:#7b7b7b;*/
}



.search-box{
	/*background:#fff;
	border:1px solid #ddd;
	color:#333;*/
	margin:0 0 1em 0;
	padding:0;
	display:block;
}
.search-box .form-control{
	border:none;
	display:block;
	margin:0;
	padding-right:45px;
}
.btn-search{
	background:url(https://img.okweb.asia/3006/svg/zoom.svg) no-repeat 0 0;
	background-size:cover;
	width:25px;
	height:25px;
	position:absolute;
    cursor:pointer;
	top:0.5em;
	right:10px;
	display:inline-block;
	border:none;
}

.btn-search:hover{margin-top:-1px;}


@media (max-width: 1020px) {
	.affiliated{
		display:block;
	}
	.marquee-wrap{
		width:100%;
		display:block;
		/*border-bottom:1px solid #ddd;*/
		padding:1em;
		line-height:1;
	}
	.header-nav-wrap{
		width:63%;
		float: left;
	}
	.header-nav-wrap > ul{
		margin:0;
		padding:0;
	}
	.header-nav-wrap > ul > li > a{
		width:45px;
		height:45px;
	}
	.pcate-wrap{
		width: 37%;
		float: right;
	}
	.btn-pcate{
		line-height:45px;
	}
	.side-category{
		top:45px;
	}
}
@media (max-width: 767px) {
	.affiliated{
		text-align:center;
	}
	.header-nav-wrap, .pcate-wrap{
		float:none;
		display:block;
		width:100%;
	}
	.header-nav-wrap > ul{
		display:inline-block;
		margin:0 auto;
	}
	.header-nav-wrap > ul > li > a,
	.header-nav-wrap > ul > li:first-child > a{
		border:none;
	}
	.side-category{
		float:none;
		width:100%;
		position:relative;
		margin:0;
		top:0;
	}
	.btn-pcate{
		/*border-top:1px solid #ddd;*/
	}
}
@media (max-width: 400px) {
	.header-nav-wrap > ul > li > a{
		width:39px;
		height:39px;
	}
}
@media (min-width: 768px) {
	.side-category{
		min-width:320px;
	}
}

/*==============================
      		Carousel
===============================*/
#index-carousel{
    margin:0;
    padding:0;
	background: #f2f2f2; 
	position:relative;
}
#carousel{overflow:hidden;}

.item img{
     width:100%; 
}
/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/*==============================
      		Footer
===============================*/
.footer{
	/*border-top:1px solid #ddd;*/
	padding:1em 0;
	margin:0 2em;
}

.quick_contact-set-line{
	text-align: center;
	margin-bottom:1em;
}
.quick_contact-set-line > .title{
	color:inherit;
	border:none;
	font-size: 1.2em;
	margin:0.2em auto 0.5em  auto; 
	padding:0;
	display:block;
}
.quick_contact-set-line > .title:before,
.quick_contact-set-line > .title:after{display:none;}
.quick_contact-set-line img{ max-width:100px; max-height:100px; }


.footer-menu{margin:0 0 1em 0;}
.footer-menu ul li{
	display:inline-block;
	margin:0;
	padding:0 0.5em 0 0.8em;
	position: relative;
}
.footer-menu ul li:before{
	content:' ';
	height:10px;
	width:1px;
	/*background:#999;*/
	opacity: 0.5;
	position: absolute;
	top:50%;
	left:0;
	margin-top:-6px;
}
.footer-menu ul li:first-child{
	padding:0 0.5em 0 0;
}
.footer-menu ul li:first-child:before{
	display:none;
}
.footer-menu ul li a{
	/*color:#333;*/
	display:block;
	margin:0;
	padding:0;
	line-height:1;
}
.footer-menu ul li a:hover{
	/*color:#7b7b7b;*/
}
.footer-left{
	float:left;
	padding-left:0 !important;
	padding-right:0 !important;
}
.footer-right{
	float:right;
	text-align:left;
	padding-left:0 !important;
	padding-right:0 !important;
}
@media (min-width: 1220px) {
	.fbbox-set-line{ margin-right:0.5em;}
}

/*==============================
         Advertisement
===============================*/
.side-link{
	list-style:none;
	margin:0 0 0 0;
	padding:0;
	text-align:left;
}
.side-link li{float:left; margin:0 0.1% 0.1em 0;}
.side-link li img{padding:0;max-width: 100%;max-height:100%;}
.side-link1 li img{	max-width: 100%;max-height:410px;}
.side-link2 li img{	max-width: 300px;max-height:300px;}

@media (max-width: 1220px) {
	.side-link{ text-align:center;}
	.side-link li{float:none; display:inline-block;}
}


/*==============================
        Social Button
===============================*/
.btns-social {text-align:left !important;}
.btns-social li{
	display:inline-block;
	*display: inline;
	margin:0 3px 0 0;
}
.btns-social li a{
	display:block;
	width:33px;	height:33px;
	background-repeat:no-repeat;
	background-size:contain;
	/*background-color:rgba(0,0,0,0.2);推文組按鈕背景色*/
	/*border:3px solid rgba(0,0,0,0);推文組按鈕背景色*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-o-transition: all 0.1s ease-out;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.btns-social li a:hover{
	/*background-color: rgba(0,0,0,0.5);推文組按鈕hover*/
	/*border:3px solid rgba(0,0,0,0);推文組按鈕hover*/
	width:38px;	height:38px;
}
.btns-social li a.social-fb{background-image:url(https://www.okweb.asia/3006/svg/social-icon-facebook.svg);}
.btns-social li a.social-twitter{background-image:url(https://www.okweb.asia/3006/svg/social-icon-twitter.svg);}
.btns-social li a.social-gplus{background-image:url(https://www.okweb.asia/3006/svg/social-icon-gplus.svg);}
.btns-social li a.social-plurk{background-image:url(https://www.okweb.asia/3006/svg/social-icon-plurk.svg);}
.btns-social li a.social-weibo{background-image:url(https://www.okweb.asia/3006/svg/social-icon-weibo.svg);}
.btns-social li a.social-line{background-image:url(https://www.okweb.asia/3006/svg/social-icon-line.svg);}
.btns-social li a.social-Instagram{background-image:url(https://www.okweb.asia/3006/svg/social-icon-Instagram.svg)}
.btns-social li a.social-wechat{background-image:url(https://www.okweb.asia/3006/svg/social-icon-wechat.svg)}
.btns-social li a.social-mail{background-image:url(https://www.okweb.asia/3006/svg/social-icon-mail.svg)}
.btns-social li a.social-youtube{background-image:url(https://www.okweb.asia/3006/svg/social-icon-youtube.svg)}
.btns-social li a.social-telegram{background-image:url(https://www.okweb.asia/3006/svg/social-icon-telegram.svg);}
.btns-social li a.social-blog{background-image:url(https://www.okweb.asia/3006/svg/social-icon-blog.svg);}
.btns-social li a.social-whatsapp{background-image:url(https://www.okweb.asia/3006/svg/social-icon-whatsapp.svg);}

@media (max-width: 1220px) {
	.footer,.footer-left,.footer-right,.side-link{text-align:center !important;}
	.footer-left,.footer-right,.side-link{
		float:none;
		display:block;
		text-align:center !important;
	}
	.btns-social {text-align:center !important;}
}
@media (max-width: 768px) {
	.footer{padding:2em 0; margin:0;}
}