.podcast{
	position: fixed;
	top: 15px;
	right: 10px;
	padding: 5px 18px 5px 12px;
	border-radius: 26px;
	text-decoration: none;
	color: #ffffff;
	background-color: #222222;
	font-size: 17px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 10000;
}
.podcast:hover{
	background-color: #bea47f;
}
.podcast i{
	display: inline-block;
	margin-right: 8px;
	font-size: 20px;
}
@media (max-width: 640px) {
	.podcast{
		top: 0;
		right: 0;
		padding: 5px 10px 5px 7px;
		border-radius: 0 0 0 6px;
		font-size: 14px;
	    z-index: 10000;
	    background-color: #555555;
	}
	.podcast i{
		display: inline-block;
		margin-right: 5px;
		font-size: 15px;
	}
}


.bar-placeholder{
	position:relative;
	z-index:9999;
	}
.section-inner{
    margin:0 auto;
    }
.btn{
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 8px 0.3em;
    outline: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 3px;
    color: #4d4d4d;
    font-weight: bold;
    line-height: 1;
    font-stretch: condensed; 
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
}
@media screen and (max-width: 550px) {
	.btn {
		padding: 8px 0em;
		font-size: 13px;
	}
}
.btn-mini {
    padding: 6px 0.85em;
    outline: none;
    border: 1px solid #d9d9d9;
    font-size: 12px;
}
.btn:hover, 
.btn:active, 
.btn-mini:hover, 
.btn-mini:active {
    color:#d6b885;
    /*text-decoration: underline;*/
    }    
.btn-wide { width: 100%; }
.btn-wide.has-icon-left { text-align: left; }
.btn-wide.has-icon-right { text-align: right; }
.btn-primary, 
.btn-secondary, 
.btn-alt { text-transform: uppercase; }
.btn-primary {
    border-color: #B35A00;
    background-color: #f78c1b;
    background: linear-gradient(to bottom, #FEB13A, #f78c1b);
    color: #552F00;
}
.btn-primary:hover, 
.btn-primary:active {
    border-color: #B35A00;
    background-color: #F9A21B;
    background: linear-gradient(to bottom, #f78c1b, #FEB13A);
    color: #552F00;
}
.lazy{
    display:block;
    width:100%;
    max-width:1366px;
    }
.lazy:nth-child(n+2) {
    margin:0 0 15px 0;
    }	
	
.section-inner{
	max-width: 1366px;
	padding: 7% 0;
	}
@media (max-width: 640px) {
.header-logo{
	display: none;
}
.section-inner{
	padding: 0;
	}	
}
.section-inner .page-title,
.section-inner .head-nav{ font-family: "Open Sans",Helvetica,Arial,sans-serif;    }
.spec-nav,
.head-nav{
    display:block;
    margin:0 auto;
    width:100%;    
    }  

.vertical-gray-line{
	display:block;
	width:1px;
	padding:7% 0;
	margin:0 auto;
	background-color:#e8e8e8;
	}
.page-sign{
	position:relative;
	display:block;
	width:100%;
	font-weight:normal;
	color:#707070;
	font-size:17px;
	padding:10px 0;
	margin:0;
	text-align:center;
	}
.page-sign:before,
.page-sign:after {
	position:absolute;
	display:block;
	content: '';
	width:30px;
	height:1px;
	background-color:#e8e8e8;
}
.page-sign:before { 
    top:0;
	left:50%;
	margin:0 0 0 -15px;
	}
.page-sign:after {	
    bottom:0; 
	right:50%;
	margin:0 -15px 0 0;
}

.page-title{
    display:block;
    margin:0;
    text-align:center;
    }
.page-title h1{
    display:block;
    font-family: 'Noto Serif TC', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    vertical-align: baseline;    
    padding:0;
    margin:10% 0;
    font-size: 31px;
    }
p.description{
    display:block;
    margin:0 0 10% 0;
    font-size:20px;
    letter-spacing:1px;
    color:#222222;
    width: 100%;
    } 
p.keepadd.description{
	background: #333333;
	color: #ffffff;
	display: inline;
	padding: 0 2px;
	margin-bottom: 10%;
	font-family: 'Noto Serif TC', serif;
}
p.description.center{
    text-align: center;
    }  
p.description.note{
	margin:20px 0 10% 0;
    font-size:16px;
    line-height: 2;
    letter-spacing: 0;
	color:#707070;
    } 
p.description.note b{
    font-size:18px;
	color:#222222;
	font-family: 'Noto Serif TC', serif;
    } 
p.description.note.last{
	margin:20px 0 10px 0;
    }
p.description.right{
    font-size:16px;
    margin: 0;
    text-align: right;
    } 
p.description.note.right{
    font-size:13px;
    margin: 0;
    text-align: right;
    } 
p.description.note strong{
	font-size:15px;
    }   
p.description span{
    font-family: "Open Sans",Helvetica,Arial,sans-serif;
    }
.des-area{
    display:block;
    width:100%;    
    padding:0;
    margin:0 auto;
    vertical-align:top;
    text-align:left;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    }
@media screen and (max-width: 800px) {
    .des-area{
        display:block;
        width:90%;
        padding:5% 5% 2% 5%;    
        } 
    .page-title{
        margin:5% 0;
        }
	.page-title h1{    
	    padding:0 5%;
	    font-size: 27px;
	    }
    .des-area{
        width:100%;  
        } 
}
.des-area ul{
    display:block;
    padding:0 0 0 20px;
    margin:0;
    }
.des-area ul li{
    color:#707070;
    font-size:14px;
    margin:0 0 15px 0;
	font-family: 'Noto Serif TC', serif;
	border-bottom: 1px dashed #cccccc;
    }
	
.section-inner .btn-group{
    display:block;
    margin:10% auto 10px auto;
    padding: 0;
    width:100%;
    text-align:center;
    }    
.fix_top_bar {
	/*position: fixed;
	top: 30%;
	left: 0; 
	display: block;
	z-index: 99;*/
	}
.section-inner .btn-group-cell { 
	display:block;
    }
.placeholder {
    display: block;
    margin-top: -53px;
    height: 53px;
    }    

.item-list{
    margin:0 auto;
    width:inherit;
    text-align: left;
    background-color:#33425a;
    }
.item-list tr td{
    padding: 15px 0 15px 20px;
    color:#ffffff;            
    font-size:16px;
    font-weight:bold;
    }
.spec-form{
    margin:0 auto 140px auto;
    width:100%;
    font-size:15px;    
    text-align: left;    
    }
.spec-form tr{    border-bottom: 1px solid #d9d9d9; }    
.spec-form thead td,
.spec-form tr td{
    color: #666666;
    padding: 20px 0 20px 20px;
    }
.spec-form tr:nth-child(even){ background: #FAFAFA; }
.spec-form tr:last-child{ border:0; }


.category-title{
    display:block;
    margin:0 auto;
    padding:10% 0 0 0;
    line-height:100%;
    color:#333333;
    font-size:22px;
    letter-spacing: 2px;
    font-weight:600;
    text-transform:capitalize;
    text-align: center; 
    }
	
@media (max-width: 865px) {
	.category-title{
		text-align:center;  
		}	  
}
    
@media screen and (max-width: 640px) {
	.item-list{  
		height:40px; 
	}
	.category-title,
	.item-list{  
		width:100%;;
		font-size: 15px;
		padding: 15% 0 0 0;
	}
	.spec-form{  
		width:100%;
		font-size:13px; 
	}
	.item-list tr td{ 
		font-size:14px; 
	}
}    

.btn-group {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0;
    font-size: 0;
    zoom: 1;
    }
.btn-group-cell {
    display: block;
    vertical-align: top;
    }
.btn-group .btn {
    border-left-width: 0;
    border-radius: 0;      
    font-weight: 500;
    text-transform: capitalize;
    font-size: 16px;
	padding: 15px 0 0 0;
    }
.btn-group .btn span{
    float: right;   
    background: #ffffff;
    position: relative;
    bottom: -5px;
    padding-left: 7px; 
    }
.btn-group .btn label{  
    background: #ffffff;
    position: relative;
    bottom: -5px;
    padding-right: 5px; 
    cursor: pointer;
    }
.btn-group-cell:only-child .btn{
    border-radius: 6px;
    }
.current a{
    /*border-color: #555555;
    background: #555555;
    color: #ffffff;
    cursor: default;*/
    }
.current a:hover {
	/*color: #ffffff;*/
    }
    
.btn-group-cell.current .btn:hover, 
.btn-group-cell.current .btn-mini:hover {
    /*color:#ffffff;
    background-color:#707070;
    border-color:#707070;*/
    }    

.payment-box{	
    display: block;
    width: 100%;
    padding: 0;
    margin: 60px 0 10px 0;
    font-size: 16px;
    border-top: 1px solid #d9d9d9;
	text-align:center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;	
	}
.payment-title{
	display:inline-block;
	position:relative;
	top:-15px;
	font-size:20px;
	margin:0 auto;
	padding:0 13px;
	letter-spacing:1px;
	background-color:#ffffff;
	}
h3 {
	display:inline-block;
	margin:0;
	font-family: "Open Sans",Helvetica,Arial,sans-serif; 
	font-size:16px;
	color:#222222;
	font-weight:normal;
}
h4{
    display:block;
    font-family: 'Noto Serif TC', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    vertical-align: baseline;    
    padding:0;
    margin:10% 0 15px 0;
    font-size: 27px;
    text-align: center;
    }

.payment-title h3 span{
	display:inline-block;
	font-size:15px;
	color:#707070;
	font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
}

.web-interactive-area{
	display:block;
	width:100%;	
	padding:0;	
	}
.web-interactive-area ul{	
	display:block;
	width:100%;
	max-width:1366px;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	background-color:#ffffff;
    -webkit-box-shadow: 3px 3px 16px rgba(0, 0, 0, .01);
    -moz-box-shadow: 3px 3px 16px rgba(0, 0, 0, .01);
    box-shadow: 3px 3px 16px rgba(0, 0, 0, .01);
	}
.web-interactive-area ul li{
	position:relative;
	display:block;
	width:100%;
	margin:0;
	padding:22px 70px 22px 27px;
	list-style-type:none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}
.web-interactive-area ul li:after {
	position: absolute;
	top: 50%;
	right:20px;
	margin:-15px 0 0 0;
	width:30px;
	height:30px;
	border-left:1px solid #e6e6e6;
	display: inline-block;
	content: "\f105";
	font-family: 'FontAwesome';
	font-size: 27px;
	color: #4f4f4f;
	text-align:right;
	}
.web-interactive-area ul li:nth-child(2n+1){ 
    background-color:#f9f9f9; 
	}
.web-title{
	display:block;
	margin:0 0 5px 0;
	font-size:16px;
	font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
	color:#222222;
	}
.web-interactive-area-content{
	display:block;
	font-size:13px;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	line-height:120%;
	margin: 0 0 3px 0;
	color:#bbbbbb;
	overflow: hidden;
	text-decoration:underline;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;	
	}
.web-interactive-area-content:active,
.web-interactive-area-content:hover{	
	color:#06f;
	}
	
.list-container{
	display:block;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	}	
a.item-container{
	text-decoration:none;
	}
a.item-container:hover h3{
	color:#026dd6;
	text-decoration:underline;
	}	
.item-container h3{
	display:block;
	width:100%;
	max-width:300px;
	font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
	font-weight:normal;
	font-size:15px;
    color: #222222;
	margin:0 auto 20px auto;
	}
.item-container .rwd-site-title{
	display:block;
	width:100%;
	max-width:300px;
	font-size:13px;
    text-transform: uppercase;
	color:#999999;
	margin:20px auto 5px auto;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	}	
.item-container img{
	display:block;
	width:100%;
	max-width:300px;
	margin:0 auto;
	border-radius:4px;
	}
.grid-view:before,
.grid-view:after {
	content: '';
	display: table;
	clear: both;
	}
.grid-view {
	position: relative;
	}
	.grid-view .item-container {
		clear: none;
		float: left;
		padding: 40px 20px; 
		box-sizing: border-box;
	    }
		.grid-view .item-container:before,
		.grid-view .item-container:after {
			content: '';
			position: absolute;
			overflow: hidden;
		    }
		.grid-view .item-container:before {
			left: 0;
			margin-top: -20px;  
			width: 100%;
			height: 0px;
		    }
		.grid-view .item-container:after {
			top: 0;
			margin-left: -20px;  
			width: 1px; 
			height: 100%;
		    }

	.grid-view .item-container:nth-child(n) { clear: none; }
	.grid-view .item-container:nth-child(n):before { height: 0px; }
	.grid-view .item-container { width: 33.3333%; }
	.grid-view .item-container:nth-child(3n+1) { clear: both; }
	.grid-view .item-container:nth-child(3n+1):after { width: 0; }
	.grid-view .item-container:nth-child(-n+3):before { height: 0; }
  @media (max-width: 1180px) {
.list-container{ max-width:95%; }
}
  @media (max-width: 1080px) {
.list-container{ max-width:94%; }
}

  @media (max-width: 865px) {

	.grid-view .item-container:nth-child(n) { clear: none; }
	.grid-view .item-container:nth-child(n):before { height: 0px; }
	.grid-view .item-container { width: 50%; }
	.grid-view .item-container:nth-child(2n+1) { clear: both; }
	.grid-view .item-container:nth-child(2n+1):after { width: 0; }
	.grid-view .item-container:nth-child(-n+2):before { height: 0; }
	.grid-view .item-container {
		padding: 20px; 
	    }
	
}
@media (max-width: 640px) {
.list-container{ max-width:96%; }
}

  @media (max-width: 460px) {
	.grid-view .item-container:nth-child(n) { clear: none; }
	.grid-view .item-container:nth-child(n):before { height: 0px; }
	.grid-view .item-container { width: 100%; }
	.grid-view .item-container:nth-child(n+1) { clear: both; }
	.grid-view .item-container:nth-child(n+1):after { width: 0; }
	.grid-view .item-container:nth-child(-n+1):before { height: 0; }

}	
.gray{
    background:#f8f8f8 url(../images/bg_story.jpg);
	background-attachment: fixed;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
	 background-position: 0 25%; 
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0x);
	background-position: left bottom;
	background-repeat: repeat-x;
}
.book{
	display: block;
	max-width: 800px;
	margin: 0 auto 10px auto;
	background-color: #ffffff;
	padding: 5% 5% 2% 5%;
	border: 1px solid #e8e8e8;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 5px 5px 10px rgb(50, 50, 50, 0.05);	
}

.book.narrate{
	padding:0 7% 7% 7%;
}
.book.cover{
	position: relative;
	padding:0;
	border: 1px solid rgb(0, 0, 0, .4);
	z-index: 9997;
}
.rd-cover{
	display: block;
	width: 100%;
	border: 0;
    box-shadow: 5px 5px 10px rgb(50, 50, 50, 0.15);
}
.cover-logo{
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	display: block;
	width: 60%;
	max-width: 436px;
	margin: 0 auto;
}
h2{
    display: block;
    width: 100%;
    color: #222222;
    text-decoration: none;
    font-family: 'Butler_Bold', serif;
    font-weight: 500;
    font-size: 33px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 8% auto 0 auto;
    color: #222222;
    text-align: center;
}

.story-pic.right{
	width:40%;
}
.story-pic.last{
	width:50%;
}
.story-pic.pic-1{
	width:90%;
	max-width: 600px;
	margin: 0 0 6% auto;
	display: block;
}


@media (max-width: 640px) {
	.gray{
	    background:#f7f7f7;
	    }
	.story-pic.pic-1{
		width:100%;
		}
	.story-pic.right{
		width:50%;
		}
	.page-sign {
		font-size: 14px;
		}
	p.description.note {
		font-size: 13.5px;
		letter-spacing: 1px;
		}
	h4,	
	.page-title h1 {
		font-size: 18px;
		padding: 0;
		letter-spacing: 1px;
		}
	p.description {
		font-size: 15px;
		letter-spacing: 0;
		}
	p.description.right {
		font-size: 14px;
		}
	.book {
		margin: 0 auto 3px auto;
		}
	.book,	
	.book.narrate {
		padding: 0 7% 7% 7%;
		}
	.des-area {
		padding: 5% 0 2% 0;
		}
	.section-inner .btn-group {
		margin: 0 auto;
		}
	.btn-group .btn {
		font-size: 15px;
		}

	.btn-group .btn span{
		font-size: 12px;
		}
	.book.cover {
		border: 0;
		}
	.payment-title {
		top: -17px;
		}
	h2 {
		font-size: 18px;
		}
	h3 {
		font-size: 13px;;
		}
	.fix_top_bar {
		z-index: 0;
		}
	.placeholder {
	    margin-top: 0;
	    height: 0px;
	    }   
	p.description.note b {
		font-size: 17px;
		line-height: normal;
		}
}
@media (max-width: 480px) {
	.btn-group .btn {
		font-size: 14px;
		}
/*	.fix_top_bar{
		top: 20%;
		left: -5px;
		-webkit-transform-origin: 90% 90%;
		-ms-transform-origin: 90% 90%;
		transform-origin: 90% 90%;
		-webkit-transform: scale(0.9);
		-ms-transform: scale(0.9);
		transform: scale(0.9);
		}*/
}
@media (max-width: 320px) {

}
@media screen and (max-width: 320px){
.sidebar-btn {
	top: 0;
	left: 5px;
	}
}