@charset "utf-8";
/* CSS Document */

/* Start For News List Css */

ul.singlepagelist{/* 單頁式列表 */
	list-style:none;
	margin:0;
	padding:0;
}
ul.singlepagelist li{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:10px;
	margin:0 auto 20px auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	/*background:#f8f8f8;*/
	 background-color: rgba(50, 50, 50, 0.06);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.singlepagelist-subhead{/* 單頁式列表標題 */
	position:relative;
	font-family: Arial, "微軟正黑體", "新細明體", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.2em;
	line-height:1.4;
	font-weight: normal;
	margin:0;
	padding:0.6em 0;
	display:block;
	text-shadow: 0px 0px 1px #ccc;
	border-bottom:1px solid #ccc;
}
.singlepagelist-subhead a{
	text-decoration:none;
	color:inherit;
}
.singlepagelist-subhead a:hover{
	text-decoration:none;
	color:#211E8E;
}

.singlepagelist-date:after{/* 單頁式列表日期+此樣式 */
	content:attr(data-newsdate);
	font-size: 12px;
	line-height:1;
	text-shadow: none;
	display:inline-block;
	padding:5px;
	color:#999;
}
.singlepagelist-summary{/* 單頁式列表剪短摘要 */
	display:block;
	margin:0.8em 0;
	font-size: 0.9em;


}
.icon-bullhorn:before, .icon-faq:before, .icon-guide:before{
	content:' ';
	display:inline-block;
	margin:-2px 0 0 0;
	width:25px;
	height:25px;
	vertical-align:top;
}
.icon-bullhorn:before{/* 單頁式最新消息列表+icon樣式 */
	background:url(https://www.okweb.asia/3003/images/cube-news.png) no-repeat center center;
	background-size:contain;
}
.icon-faq:before{/* 單頁式常見問題列表+icon樣式 */
	background:url(https://www.okweb.asia/3003/images/cube-faq.png) no-repeat center center;
	background-size:contain;
}
.icon-guide:before{/* 單頁式購物指南列表+icon樣式 */
	background:url(https://www.okweb.asia/3003/images/cube-guide.png) no-repeat center center;
	background-size:contain;
}
/* End For News List Css */

@font-face {
  font-family: 'footable';
  src: url('//www.okweb.asia/3002/fonts/glyphicon-shalflings-regular.eot');
  src: url('//www.okweb.asia/3002/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//www.okweb.asia/3002/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//www.okweb.asia/3002/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//www.okweb.asia/3002/fonts/glyphicons-halflings-regular.svg#footable') format('svg');  
  font-weight: normal;
  font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: 'footable';
    src: url('//www.okweb.asia/3002/fonts/glyphicons-halflings-regular.svg#footable') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}
.max{font-size:1.3em;}
.big{font-size:1.1em;}
.small{font-size:0.85em;}
/*.color1{color:#0c29b3;}
.color2{color:#333;}/*同時用於留言者姓名標題,討論區* /
.color3{color:#F51346;}
.color4{color:#529300;}*/
.bold,.b{font-weight:bold;}

.page-content {
	font-size:1.3em;
	line-height:2;
}
.page-content p {
	margin:0 0 15px 0;
}
.sr-only {/*hide style*/
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0;
}

h1, h2, h3, h4, h5, h6 {
	display:block;
	margin:0;
	padding:0;
}
h3.stitle {
	/*color:#333;/*小標題color*/
	font-size:1.3em;
	font-weight:bold;
	margin:15px 0 15px 0;
	padding:0;
	font-family:"微軟正黑體", Arial, "新細明體";
}
h3.stitle::before{
	font-family: 'footable';
	font-style: normal;
	font-weight: 400;
	font-size: 0.8em;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content:"\e074";
	margin-right:3px;
}
h3.cubetitle {
	font-size:1.3em;
	font-weight:bold;
	margin:15px 0 10px 0;
	padding:0;
}

/*======img-style======*/

.img-left{float:left; margin:3px 15px 0 0;}
.img-right{float:right; margin:3px 0 0 15px;}
.img-center{display:block; text-align:center; margin:3px 0;}


/*======column it's different from bootstrap.min======*/
.col-all{/*group every category*/
	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 , .col-group {
  margin-left: 0;
  margin-right: 0;
  margin-bottom:15px;
}
.col-style{
  /*border:5px solid #eee;*/
  padding:15px;
}

.col-cross8 {
  width: 65%;
  margin:0px 5px 1px 0px;
  float:left;
}
.col-cross6 {
  width: 48.6%;
  margin:0px 5px 1px 0px;
  float:left;
}
.col-cross6-2 {
  width: 46%;
  margin:0px 1px 1px 0px;
  float:left;
}
.col-cross4 {
  width: 32.2%;
  margin:0px 5px 1px 0px;
  float:left;
}
.col-cross3 {
  width: 24%;
  margin:0px 5px 1px 0px;
  float:left;
}
.col-cross-line {
  width: 6%;
  margin:0px 1px 1px 0px;
  float:left;
}
.col-cross-line > span{
	width:50%;
	height:80px;
	display:block;
	/*border-right:1px solid #ddd;*/
}
.col-cross-line > p{
	display:block;
	text-align:center;
	font-size:1em;
	font-weight:bold;
	/*color:#999;*/
	padding:10px 0;
}
	

.col-left1{
	float:left;
	width:16%;
	text-align:right;
}
.col-right1{
	float:right;
	width:79%;
	margin-right:5px;
}

.col-align-r,.right{ text-align:right;}
.col-align-c,.center{ text-align:center;}
.col-align-l,.left{ text-align:left;}



/*======form======*/
.form-group{
	position:relative;
	clear:both;
}
.has-feedback .form-control,.has-success .form-control, .has-error .form-control{
	padding-right:42.5px;
	position:relative;
}
.form-control-feedback {
	position:absolute;
	top:45%;
	right:0.3em;
	z-index:2;
	text-align:center;
}

/*======vote======*/
.progress {
	height:30px;
	margin:5px 0;
	overflow:hidden;
	/*background-color:#f2f2f2;/*長條圖背景color*/
	border-radius:4px;
	/*-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.1)*/
}
.progress-bar {
	float:left;
	width:0;
	height:100%;
	font-size:0.8em;
	line-height:20px;
	/*color:#fff;*/
	text-align:center;
	/*background-color:#666;/*長條圖color*/
	/*-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
	box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);*/
	-webkit-transition:width .6s ease;
	-o-transition:width .6s ease;
	transition:width .6s ease
}

/*======page======*/
.pagenav-wrap{
	display:block;
	text-align:center;
}
.pagenav{
	padding:0;
	margin:10px 0;
	border-radius:4px;
	list-style:none;
	display:inline-block;
}
.pagenav>li {
	float:left;
	margin:0;
	padding:0;
}
.pagenav>li>a{
	padding:6px 12px;
	margin-left:-1px;
	/*color:#666;/*頁碼字color*/
	text-decoration:none;
	/*background-color:#fff;
	border:1px solid #ddd;*/
}
.pagenav>li:first-child>a {
	margin-left:0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px
}
.pagenav>li:last-child>a {
	border-top-right-radius:4px;
	border-bottom-right-radius:4px
}
.pagenav>li>a:hover, .pagenav>li>a:focus{
	/*color:#666;/*頁碼hover 字color*/
	/*background-color:#eee;
	border-color:#ddd*/
}
.pagenav>.active>a,.pagenav>.active>a:hover, .pagenav>.active>a:focus{
	/*color:#fff;/*頁碼選擇中字color*/
	/*background-color:#888;
	border-color:#888*/
}


/*======table_etc======*/
.table-wrapper {
	width:100%;
	margin:10px 0;
}
.table-subject {
	display:block;
	position:relative;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	/*border:1px solid #ddd;*/
	border-bottom:none;
}
.table-subject span.fleft{
	float:left;
	left:0;
	top:0;
	width:60%;
	padding:10px;
	text-align:left;
	font-size:1.1em;
}
.table-subject span.fright{
	float:right;
	right:0p;
	top:0;
	width:20%;
	padding:10px;
	text-align:right;
}
/*======breadcrumb======*/
.breadcrumb {
	padding:0;
	margin:0 0 5px 0;
	list-style:none;
	border-radius:4px;
	background-color:transparent;
}
.breadcrumb>li {
	display:inline-block;
	margin-left:0;
}
.breadcrumb>li+li:before {
	padding:0 5px;
	content:"/\00a0"
}
.breadcrumb table,.breadcrumb td{background-color:transparent;}

/*======productlist======*/
.p-single,.album-single {
	float:none;
	display:inline-block;
	vertical-align: top;
	width:45%;
	height:auto;
	padding:0;
	margin: 10px 2.3% 30px 2.3%;
	text-align:center;
	line-height:1;
}
.p-single .img-thumbnail,.album-single .img-thumbnail{
	width:280px;
	height:280px;
	position: relative;
	overflow:hidden;
	text-align:center;
	display:inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.product-one-id,.intro-one-id,.album-one-id{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
.intro-one-id{width:280px; height:280px;}
.product-one-id a img{ min-width:0; min-height:0; width:auto; height:auto;}
.p-single .p-tit {
	display:block;
	font-size:1.1em;
	line-height:1.2;
	font-weight:bold;
	/*color:#555;/*產品列表-產品名color*/
	margin:10px 0 0 0;
	padding:3px 10px;
}
.p-single .p-txt {
	display:block;
	font-size:1em;
	line-height:1.8;/*產品列表-其他文字color*/
	margin:3px 10px 0 10px;
	padding:0;
}
/*======product-view======*/
.p-view .img-thumbnail{
	max-width:100%;
	height:auto;
}
.p-view .img-thumbnail img {
	width:100%;
}
.p-description{
	padding:0 0 0 15px;
	margin-right:-15px;
}
.p-detail{
	padding:0px 0px;
}
.p-page-back{
	display:block;
	margin:0 0 5px 0;
	padding:0 10px;
	text-align:right;
}
.p-name{
	font-size:1.4em;
	font-weight:bold;
	display:block;
	padding:3px 0;
}
.p-row{
	font-size:1em;
	display:block;
	padding:3px 0;
}
.p-view label{

	text-align:left;
}
.p-price-original{
	font-size:1.2em;
	font-weight:bold;
	/*color:#B93204;/*產品詳細-原價color*/
}
.p-price-member{
	font-size:1.2em;
	font-weight:bold;
	/*color:#F00;/*產品詳細-會員網路價color*/
}
.btn-addcart{
    font-size:1.2em;
    line-height: 1.3;
    padding: 8px 20px;
    font-weight: bold;
	/*color:#C00;/*加入購物車字color*/
	/*background-color:transparent;/*加入購物車背景color*/
    /*border:3px #C00 solid;/*加入購物車線框color*/
    background-image: none;
}
.btn-addcart:hover{
	/*background-color:#C00;
	/*color:#fff;
    border:3px #C00 solid;*/
}
.btn-addcart.disabled, .btn.disabled{
	/*color:#666;
	background-color:#bbb;
    border:2px transparent solid;*/
}
.btn-addcart.disabled:hover, .btn.disabled:hover{
	/*background-color:#bbb;
    border:2px transparent solid;*/
}

/*======gallery======*/
.album-single .album-subhead{
	display:block;
	font-weight:normal;
	margin: 5px 0 10px 0;
	padding:0;
}
.photo-gallery{
	list-style:none;
	margin:0;
	padding:0;
}
.photo-gallery li{
	width:25%;
	height:150px;
	margin:0 auto 10px auto;
	float:left;
}
.photo-gallery li .img-thumbnail{
	width: 120px;
	height: 120px;
	overflow:hidden;
	display:table-cell;
	position:relative;
	text-align:center;
	vertical-align:middle;
}
.photo-gallery li .img-thumbnail img {
	max-width:100%;
	max-height:100%;
}

.photo-gallery li .photo-box{
	/*background:rgba(0,0,0,0.5);/*相片hover 區塊color*/
	width:100%;
	height:100%;
	position:absolute;
	z-index:10;
	top:0;
	left:0;
	-webkit-transition:all .15s ease-in-out;
	-o-transition:all .15s ease-in-out;
	transition:all .15s ease-in-out;
	opacity:0;
}
.photo-gallery li:hover .photo-box{
	opacity:1;
}
.photo-gallery li .photo-subhead{
	width:100%;
	height:100%;
	display:table;
	-webkit-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
	/*color:#fff;/*相片標題字color*/
}
.photo-gallery li:hover .photo-subhead{
	margin-top:0px;
}
.photo-gallery li .photo-subhead a{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	position:relative;
	/*color:#fff;/*相片標題連結字color*/
	text-decoration:none;
}
.photo-gallery li .photo-subhead a:hover{
	/*color:#fff;/*相片標題連結字hover color*/
	text-decoration:none;
}
.photo-gallery li .photo-subhead a p{
	display:inline-block;
	/*border-bottom:1px rgba(255,255,255,0.8) solid;*/
	padding:0 10px 10px 10px;
	margin:0 0 8px 0;
	line-height:1.5;
	font-size:0.9em;
}
/*======video======*/
.video-single{
	float:left;
	width:50%;
	padding:0;
	margin:0 40px 20px 0;
	text-align:center;
}
.video-single .video-subhead{
	display:block;
	font-weight:normal;
	margin:5px 0;
	padding:0;
}

.video-single .embed-responsive {
	position:relative;
	display:block;
	height:0;
	padding:0;
	overflow:hidden;
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
}
.embed-responsive.embed-responsive-16by9 {
	padding-bottom:56.25%;
	margin-right:0;
	margin-bottom:0;
}
.embed-responsive.embed-responsive-4by3 {
	padding-bottom:75%
}

/*======member======*/

ul.member-ul{
	padding:0 20px;
}
ul.member-ul li{
	margin:5px 0;
	padding:10px 8px;
	display:block;
	/*background:#666;
	border:1px #666 solid;*/
	-webkit-border-radius:4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-align:center;
	/*color:#fff;*/
	vertical-align:top;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out
}
ul.member-ul li:hover{
	/*background:#0c29b3;
	border:1px #0c29b3 solid;*/
}
ul.member-ul li a{
	/*color:#fff;*/
	text-decoration:none;
    font-family:Verdana,"微軟正黑體", Geneva, sans-serif;
}
ul.member-ul li a:hover{
	/*color:#fff;*/
	text-decoration:none;
}
ul.member-ul li.glyphicon:before{
	margin:0 8px 0 0;
}

/*======panel======*/
.panel {
	margin-bottom:20px;
	/*background-color:#fff;/*panel背景color*/
	/*border:1px solid #CCCCCC;/*panel線框color*/
	border-radius:4px;
	/*-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
	box-shadow:0 1px 1px rgba(0,0,0,.05);*/
	text-align:left;
}
.panel2 {
	margin-bottom:20px;
	/*background-color:#fff;/*panel背景color*/
	/*border:1px solid #CCCCCC;/*panel線框color*/
	border-radius:4px;
	/*-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
	box-shadow:0 1px 1px rgba(0,0,0,.05);*/
	text-align:left;
}
.panel-body {
	padding:10px 15px;
}
.panel .panel-heading {
	padding:8px 10px;
	/*border-bottom:1px solid transparent;*/
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	/*color:#fff;/*panel標題字color*/
	/*background-color:#666;/*panel標題背景color*/
	/*border-color:#ccc;/*panel標題線框color*/
}
.panel2 .panel-heading {
	padding:8px 10px;
	/*border-bottom:1px solid transparent;*/
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	/*color:#666;/*panel標題字color*/
	/*background-color:#F0F0F0;/*panel標題背景color*/
	/*border-color:#ccc;/*panel標題線框color*/
}
.panel-title,.panel-heading> h3 {
	margin-top:0;
	margin-bottom:0;
	font-size:1.1em;
	line-height: 2;
}
.panel-title>a {
}

/*======news======*/
ul.news-wrap{
	margin:0;
	padding:10px 0;
	list-style:none;
	position:relative;
}
li.news-date{
	list-style:none;
	float:left;
	margin:0 10px 0 0;
	padding:3px;
	/*color:#999;/*日期字color*/
	-webkit-border-radius:4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
li.news-date strong{
	font-size:2.3em;
	position:absolute;
	margin:0;
	text-align:left;
	top:0;
	left:0;
}
li.news-date span.news-month {
	display:block;
	font-size:0.9em;
	line-height:1.2;
	margin:0 0 2px 35px;
	padding:0 0 0 5px;
	font-weight:bold;
	text-align:center;
}
li.news-date span.news-year {
	display:block;
	font-size:0.9em;
	line-height:1.2;
	margin:0 0 0 35px;
	padding:0 0 0 5px;
	font-weight:bold;
	text-align:center;
}
li.news-subhead{
	margin:0;
	padding:10px 0 0 0;
	text-align:left;
	list-style:none;
	float:left;
	font-size:1.2em;
	/*color:#333;/*最新訊息標題字color*/
	font-weight:bold;
}
li.news-content{
	display:block;
	clear:both;
	margin:0;
	padding:5px 0 20px 0;
}
li.news-content img{
	display:inline-block;
	width:96% \9;
	max-width:96%;
	height:auto;
	padding:4px;
	line-height:1.42857143;
	border-radius:4px;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out
}

.glyphicon {
    font-family: 'footable';
	font-style:normal;
	font-weight:400;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}




/*=====================responsives===========================*/
@media (min-width: 993px){

.video-single,.album-single {
	width:48%;
	margin: 10px 0.3% 30px 0.3%;

}
.p-view .p-row{/*border-top:1px solid #eee;*/}

}
@media (max-width: 992px){

.photo-gallery li{
	width:25%;
}

.video-single{
	margin: 0 1% 30px 1%;
	width: 48%;
}
.embed-responsive.embed-responsive-16by9 {
	padding-bottom:56.25%;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:10px;
}
.p-view .p-row{/*border-top:1px solid #eee;*/}
}
@media (max-width: 600px){
.col-cross8,.col-cross6,.col-cross6-2,.col-cross4,.col-cross3  {
  width: 100%;
  margin:0 0 2px 0;
  float:none;
  padding:8px 0;
  display:block;
}
.col-cross-line {
  width: 100%;
  margin:0 0 2px 0;
  float:none;
  display:block;
}
.col-cross-line > span{
	width:33%;
	height:1px;
	display:inline-block;
	border-right:none;
	/*border-bottom:1px solid #ddd;*/
}
.col-cross-line > p{
	width:15%;
	display:inline-block;
	text-align:center;
	font-size:1em;
	font-weight:bold;
	/*color:#999;*/
	padding:5px 0;
}

.p-single,.album-single {
	width:100%;
	margin:10px auto 30px auto;
}
.product-one-id,.intro-one-id,.album-one-id{display:inline-block;}
.intro-one-id{width:auto; height:auto;}
.p-single .img-thumbnail, .album-single .img-thumbnail{
	width:100%;
	height:auto;
}
.album-single .album-subhead{
	margin: 5px 0 10px 0;
}
.photo-gallery li{
	width:32%;
}

.p-description{
	padding:0 10px;
	margin-right:0;
}
.p-detail{
	padding:0px 10px;
}
.p-page-back{
	text-align:center;
}
.p-view label{
	display:block;
	width:100%;
	font-size:0.9em;
	line-height:1;
	/*color:#999;*/
	margin:10px 0 0 0;
	padding:5px 0;
}
.btn-addcart{
	width:100%;
}
.video-single{
	width:100%;
	height:auto;
	display:block;
	margin:0 0m20px 0;
}
.embed-responsive.embed-responsive-16by9 {
	padding-bottom:56.25%;
	margin-right:0;
	margin-bottom:0;
}

.img-left{display:block; width:100%; float:none; margin:10px 0; text-align:center;}
.img-right{display:block; width:100%; float:none; margin:10px 0; text-align:center;}
.img-center{display:block; width:100%; float:none; margin:10px 0; text-align:center;}
.col-left1{display:block; width:100%; float:none; margin:10px 0 3px 0; text-align:left;}
.col-right1{display:block; width:95%; float:none; margin:3px 0 10px 0; text-align:left;}
.col-left2{display:block; width:100%; float:none; margin:10px 0; text-align:center;}
.col-right2{display:block; width:95%; float:none; margin:3px 0 10px 0; text-align:left;}

}
@media (max-width: 420px){

.photo-gallery li{
	width:50%;
}

}