@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'footable';
  src: url('//ae1.okweb.asia/3004/fonts/glyphicon-shalflings-regular.eot');
  src: url('//ae1.okweb.asia/3004/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//ae1.okweb.asia/3004/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//ae1.okweb.asia/3004/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//ae1.okweb.asia/3004/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('//ae1.okweb.asia/3004/fonts/glyphicons-halflings-regular.svg#footable') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}
.glyphicon {
    font-family: 'footable';
	font-style:normal;
	font-weight:400;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
.img-thumbnail{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	margin:0;
}

.max{font-size:1.6em;}
.big{font-size:1.2em;}
.small{font-size:0.9em}
/*.notes{color:#f00;}
.color1{color:#518400;}
.color2{color:#333;}
.color3{color:#CC3300;}
.color4{color:#066C92;}*/
.bold,.b{font-weight:600;}
.quick-contact li { padding:10px 0 0 0;}
article a:link{ text-decoration: underline;}
article a:hover{ text-decoration: none;}
.form-group{
	position:relative;
	clear:both;
}
.has-feedback .form-control,
.has-success .form-control,
.has-error .form-control{
	padding-right:2em;
	position:relative;
}
.form-control-feedback {
	height:1em;
	width:1em;
	position:absolute;
	top:45%;
	margin-top:-0.5em;
	right:0.5em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', "微軟正黑體", Arial, "新細明體", "Helvetica Neue", Helvetica, sans-serif;
	display:block;
	margin:0;
	padding:0;
	position:relative;
}
.title{
	/*color:#333;
	border-bottom:1px solid #ccc;*/
	font-size:1.9em;
	line-height: 1;
	font-weight:normal;
	margin:0 0 1em 0;
	padding:0.5em 0 0.5em 0.8em;
}
.title:before{
	content:' ';
	width:10px;
	height:10px;
	/*background:#CC3300;*/
	position:absolute;
	top:0.8em;
	left:0.2em;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.cubetitle{
	font-size: 1.3em;
	margin:1em 0;
}
.stitle {
	/*color:#CC3300;
	text-shadow:0 0 1px #eee;*/
	font-size:1.3em;
	font-weight:normal;
	margin:1.5em 0;
	padding:0;
}


/*======column it's different from bootstrap.min======*/
/*group every category*/
.col-all{
	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:0.5em 0;
}
.col-style{
	/*border:5px solid #ccc;*/
	padding:1em;
}


.col-cross8,.col-cross6,.col-cross6-2,.col-cross4,.col-cross3  {
	width: 100%;
	margin:1em 0;
	float:none;
	padding:0;
	display:block;
}

.col-cross-line {
	width: 100%;
	margin:0 0 1px 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;
	padding:5px 0;
	/*color:#999;*/
}

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

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

/*======img-style======*/
.img-left, .img-right, .img-center{
	display:block;
	float:none;
	margin:0 auto 0.5em auto;
	text-align:center;
}

@media (min-width: 768px){
	.col-left1{
		float:left;
		width:19%;
		text-align:right;
	}
	.col-right1{
		float:right;
		width:79%;
		margin-right:1%;
	}
	.img-left{float:left; margin:0 1em 0.5em 0;}
	.img-right{float:right; margin:0 0 0.5em 1em;}
	.img-center{display:block; text-align:center; margin:0.5em auto;}
	.col-cross8 {
	  width: 65%;
	  margin:0 1% 1em 0;
	  float:left;
	}
	.col-cross6 {
	  width: 48.5%;
	  margin:0 1% 1em 0;
	  float:left;
	}
	.col-cross6-2 {
	  width: 46%;
	  margin:0 1% 1em 0;
	  float:left;
	}
	.col-cross4 {
	  width: 32%;
	  margin:0 1% 1em 0;
	  float:left;
	}
	.col-cross3 {
	  width: 23.8%;
	  margin:0 1% 1em 0;
	  float:left;
	}
	.col-cross-line {
		width: 5%;
		margin:0;
		float:left;
	}
	.col-cross-line > span{
		width:1px;
		height:90px;
		display:block;
		/*border-right:1px solid #ccc;*/
		border-bottom:none;
		margin:0 0 0 5px;
	}
	.col-cross-line > p{
		display:block;
		text-align:center;
		font-size:1em;
		font-weight:bold;
		padding:10px 0;
	}
}


/*======vote======*/
.progress {
	height:30px;
	margin:5px 0;
	overflow:hidden;
	/*background-color:#f2f2f2;*/
	-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.1)
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}
.progress-bar {
	float:left;
	width:0;
	height:100%;
	font-size:1em;
	line-height:1.5;
	text-align:center;
	/*color:#fff;
	background-color:#c63;*/
	-webkit-transition:width .6s ease;
	-o-transition:width .6s ease;
	transition:width .6s ease
}

/*======pagenav======*/
.pagenav-wrap{
	display:block;
	text-align:center;
}
.pagenav{
	padding:0;
	margin:10px 0;
	list-style:none;
	display:inline-block;
}
.pagenav > li {
	float:left;
	margin:0;
	padding:0;
}
.pagenav > li > a{
	display:block;
	padding:6px 12px;
	margin-left:-1px;
	text-decoration:none;
	/*color:#666;
	background-color:#fff;
	border:1px solid #ccc;*/
	font-size: 1em;
	line-height: 1.5;
}
.pagenav > li:first-child > a {
	margin-left:0;
}
.pagenav > li > a:hover, .pagenav > li > a:focus{
	/*color:#666;
	background-color:#eee;
	border-color:#ccc*/
}
.pagenav > .active > a,.pagenav > .active > a:hover, .pagenav > .active > a:focus{
	/*color:#fff;
	background-color:#888;
	border-color:#888*/
}


/*======table_etc======*/
.table-wrapper {
	width:100%;
	margin:10px 0;
}
.table-subject{
	display:block;
	position:relative;
	/*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:0;
	top:0;
	width:20%;
	padding:10px;
	text-align:right;
}
/*======breadcrumb======*/
.breadcrumb {
	padding:0;
	margin:0 0 5px 0;
	list-style:none;
	background:transparent;
}
.breadcrumb > li {
	display:inline-block;
	*display:inline;
	margin-left:0;
}
.breadcrumb > li + li:before {
	padding:0 5px;
	content:"/\00a0";
}

/*======productlist======*/
.p-single,.album-single {
	float:none;
	display:inline-block;
	*display: inline;
	vertical-align: top;
	padding:0;
	height:auto;
	text-align:center;
	margin:10px auto 30px auto;
	width:100%;
}
.p-single .img-thumbnail,.album-single .img-thumbnail{
	width:auto;
	height:auto;
	position: relative;
	display:inline-block;
	*display: inline;
	overflow:hidden;
	text-align:center;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.product-one-id,.intro-one-id,.album-one-id{
	display:inline-block;
	text-align:center;
	vertical-align:middle;
}
.intro-one-id{
	width:auto; height:auto;
}
.p-single a img,.album-single a img{ min-width:0; min-height:0; width:auto; height:auto;}
.p-single .p-tit {
	display:block;
	font-size:1.15em;
	font-weight:bold;
	/*color:#5D4313;*/
	margin:0;
	padding:0;
	text-decoration: none;
}
.p-single .p-txt {
	display:block;
	font-size:1em;
	margin:0;
	padding:0;
}
.album-single .album-subhead{
	display:block;
	font-weight:normal;
	margin: 0.5em 0;
	padding:0;
}

@media (min-width: 510px){
	.p-single,.album-single {
		margin: 10px 0.6% 30px 0.6%;
		width:48%;
	}
	.product-one-id,.intro-one-id,.album-one-id{
		display:table-cell;
	}
	.intro-one-id{
		width:200px; height:200px;
	}
	.p-single .img-thumbnail, .album-single .img-thumbnail{
		width:200px;
		height:200px;
	}
}
@media (min-width: 992px){
	.p-single,.album-single {
		margin: 10px 0.48% 30px 0.48%;
		width:32%;
	}
}


/*======product-view======*/
.p-view .img-thumbnail{
	max-width:100%;
	height:auto;
}
.p-view .img-thumbnail img {
	width:100%;
}
.p-description{
	padding:0;
	margin:0;
}
.p-detail{
	padding:0;
}
.p-detail table,.p-detail div,.p-detail img{
	max-width:100%!important;
}
.p-detail table td{
	width:auto!important;
}
.p-page-back{
	display:block;
	margin:0;
	padding:0;
	text-align:center;
}
.p-name{
	font-size:1.4em;
	font-weight:bold;
	display:block;
	padding:0.5em 0;
}
.p-row{
	font-size:1em;
	display:block;
	padding:0.3em 0;
}
.p-view label{
	display:block;
	width:100%;
	font-size:0.9em;
	/*color:#666;*/
	margin:10px 0 0 0;
	padding:0;
	/*border-bottom:1px #ddd solid;	*/
	border-right:none;
}
.p-price-original{
	font-size:1.3em;
	font-weight:bold;
	/*color:#c30;*/
}
.p-price-member{
	font-size:1.3em;
	font-weight:bold;
	/*color:#C00;*/
}
.btn-addcart{
    font-size:1.2em;
	width:100%;
	/*color:#fff;
	background:#C00;
    border:3px #C00 solid;*/
}
.btn-addcart:hover{
	/*color:#fff;*/
}
.btn-addcart.disabled, .btn.disabled{
	/*color:#666;
	background:#bbb;
    border:3px #bbb solid;*/
}
.btn-addcart.disabled:hover, .btn.disabled:hover{
	/*color:#666;*/
}
.sociable > ul li{
	display:inline-block;
	*display:inline;
}

@media (min-width: 768px){
	.p-description{
		padding:0 0 0 15px;
		margin-right:-15px;
	}
	.p-page-back{
		text-align:right;
	}
	.p-view label{
		display:inline-block;
		*display:inline;
		width:auto;
		font-size:1em;
		/*color:#333;*/
		text-align:left;
		margin:0;
		padding:0;
		border:none;	
	}
	.btn-addcart{
		width:auto;
	}
}
/*======gallery======*/
.photo-gallery{
	list-style:none;
	margin:0;
	padding:0;
}
.photo-gallery li{
	width:49%;
	height:120px;
	margin:0 0.5% 2em 0.5%;
	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:120px;
	max-height:120px;
}

.photo-gallery li .photo-box{
	background:rgba(0,0,0,0.5);
	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;
}
.photo-gallery li:hover .photo-subhead{
	margin-top:0;
}
.photo-gallery li .photo-subhead a{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	position:relative;
	color:#fff;
	text-decoration:none;
}
.photo-gallery li .photo-subhead a:hover{
	color:#fff;
	text-decoration:none;
}
.photo-gallery li .photo-subhead a p{
	display:inline-block;
	padding:0.5em;
	margin:0 0 0.5em 0;
}
.icon-zoom::before{
	font-family: 'footable';
	font-style: normal;
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1;
	color:#fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content:"\e003";
	margin:0;
  	padding:0;
	cursor: pointer;
  	display:inline-block;
}
.icon-cart::before{ 
	content:' ';
	height:25px;
	width:25px;
	display:inline-block;
	margin:0 0 -6px 0;
  	padding:0;
	background-image:url(https://www.okweb.asia/3004/color_a/images/icon-cart.png);
	background-position:0 0;
	background-repeat:no-repeat;
}
@media (min-width: 420px){
	.photo-gallery li{
		width:32%;
	}
}
@media (min-width: 600px){
	.photo-gallery li{
		width:24%;
	}
}
@media (min-width: 992px){
	.photo-gallery li{
		width:19%;
	}
}

/*======video======*/
.video-single{
	width:100%;
	height:auto;
	display:block;
	margin:0 0 20px 0;
}
.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-left:0;
	margin-right:0;
	margin-bottom:10px;
}
.embed-responsive.embed-responsive-4by3 {
	padding-bottom:75%
}
@media (min-width: 992px){
	.video-single{
		float:left;
		width: 48%;
		padding:0;
		margin: 0 1% 2em 1%;
		text-align:center;
	}
}

/*======member======*/
ul.member-ul{
	padding:0 1em;
}
ul.member-ul li{
	margin:0.5em 0;
	padding:0.8em 1em;
	display:block;
	/*background:#333;
	border:1px #333 solid;
	color:#fff;*/
	text-align:center;
	vertical-align:top;
	-webkit-transition:all .1s ease-in-out;
	-o-transition:all .1s ease-in-out;
	transition:all .1s ease-in-out;
}
ul.member-ul li:hover{
	/*background:#333;
	border:1px #333 solid;*/
	padding:1em 1em;
	box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}
ul.member-ul li a{
	font-family: 'Open Sans', "微軟正黑體", Arial, "新細明體", "Helvetica Neue", Helvetica, sans-serif;
	/*color:#fff;*/
	text-decoration:none;
}
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;
	border:1px solid #CCCCCC;*/
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
	box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.panel2 {
	margin-bottom:20px;
	/*background-color:#fff;
	border:1px solid #CCCCCC;*/
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
	box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.panel-body {
	padding:10px 15px;
}
.panel .panel-heading {
	padding:8px 10px;
	border-bottom:1px solid transparent;
	/*color:#fff;
	background-color:#666;
	border-color:#ccc;*/
}
.panel2 .panel-heading {
	padding:8px 10px;
	border-bottom:1px solid transparent;
	/*color:#333;
	background-color:#eee;
	border-color:#ccc;*/
}
.panel-title,.panel-heading > h3 {
	margin-top:0;
	margin-bottom:0;
	font-size:1.1em;
	line-height: 2;
}
.panel, .panel2, .panel-body, .panel-heading{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}


/*======news單頁式列表======*/
ul.singlepagelist{
	list-style:none;
	margin:0;
	padding:0;
}
ul.singlepagelist li{
	padding:10px;
	margin:1em auto;
	/*background:#f8f8f8;
	border:1px solid #ccc;*/
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);
	box-shadow:0 1px 1px rgba(0,0,0,.05);
}
.singlepagelist-subhead{/* 單頁式列表標題 */
	position:relative;
	font-size: 1.15em;
	line-height:2;
	font-weight: bold;
	margin:0;
	padding:0 0 10px 0;
	display:block;
	/*border-bottom:1px solid #ccc;*/
}
.singlepagelist-subhead a:link{
	text-decoration: none;
}

.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:3px 0 0 0;
	width:25px;
	height:25px;
	vertical-align:top;
}
.icon-bullhorn:before{/* 單頁式最新消息列表+icon樣式 */
	background:url(https://www.okweb.asia/3004/color_a/images/cube-news.png) no-repeat center center;
}
.icon-faq:before{/* 單頁式常見問題列表+icon樣式 */
	background:url(https://www.okweb.asia/3004/color_a/images/cube-faq.png) no-repeat center center;
}
.icon-guide:before{/* 單頁式購物指南列表+icon樣式 */
	background:url(https://www.okweb.asia/3004/color_a/images/cube-guide.png) no-repeat center center;
}

/*======news======*/
.news-wrap{
	margin:0;
	padding:10px 0;
	list-style:none;
	position:relative;
}
.news-date{
	list-style:none;
	float:left;
	margin:0 1em 0 0;
	padding:0;
	/*color:#999;*/
	clear:both;
}
.news-date strong{
	font-size:2.5em;
	line-height:1;
	position:absolute;
	margin:0;
	padding:0;
	text-align:left;
	top:8px;
	left:0;
}
.news-date span.news-month {
	display:block;
	font-size:1em;
	line-height:1;
	margin:0 0 2px 40px;
	padding:0;
	font-weight:bold;
	text-align:center;
}
.news-date span.news-year {
	display:block;
	font-size:1em;
	line-height:1;
	margin:0 0 0 40px;
	padding:0;
	font-weight:bold;
	text-align:center;
}
.news-subhead{
	margin:0;
	padding:0;
	text-align:left;
	list-style:none;
	float:left;
	font-size:1.15em;
	font-weight:bold;
}
.news-content{
	display:block;
	clear:both;
	margin:0;
	padding:1em 0;
}
.news-content img{
	display:inline-block;
	max-width:100%;
	width:100% \9;
	height:auto;
	padding:4px;
	line-height:1;
}
@media all and (-ms-high-contrast:none){
 .news-content img{ width:100% } /* IE10 */
 *::-ms-backdrop, .news-content img{ width:100% } /* IE11 */
}