/* CSS Document */
@media (max-width: 991px) {
.container {
	width: 100%;
}
}
body {
	font-size:16px;
	background:url(../imgs/mbg.jpg);
	font-family:Verdana, Geneva, sans-serif, "微軟正黑體";
	line-height:1.4
}
a {
	color:#999
}
a:hover {
	color:#000
}
h1.page-title {
	text-align:center;
	margin-bottom:15px;
	font-size:36px;
	font-weight:bold
}
h2 {
	font-size:24px;
	font-weight:bold
}
main {
	margin-top:20px;
}
.divider {
	height:30px;
}
select,
.select {
/*	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;*/
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
fieldset em {
	color:#6a3906;
	font-size:14px;
	font-style:normal;
}
.btn {
	font-size:20px;
	width:100%;
	margin-bottom:10px
}
.btn-d4 {
	background:#ffd246;
	color:#000;
}
.btn-nv {
	background:#ddd;
	color:#000;
}
.btn i {
	margin:auto 5px auto auto
}
.btn-wrap {
	text-align:center;
	margin-top:30px;
}
.btn-wrap .btn {
	margin-left:15px;
	margin-right:15px;
	width:auto;
	min-width:90px;
}
.inner-bdr fieldset {
	display:inline-block;
	margin:auto;
	text-align:left
}
input {
	min-width:400px;
}
input[type="radio"],
input[type="checkbox"] {
	min-width:inherit;
}
#gotop {
	position:fixed;
	right:30px;
	bottom:30px;
	display:block;
	width:30px;
	height:30px;
	background:#ffd246;
	border-radius:50%;
	text-align:center;
	vertical-align:middle;
	line-height:30px;
	color:#000;
	z-index:1000;
	display:none
}
.form-inline .form-control {
	display:inline-block!important;
	width:auto;
	margin-bottom:5px;
}
.card-num input,
.code3 input {
	min-width:inherit;
	width:80px!important;
}
/* cropper area */
.book-form {
	margin-top:30px;
}
.book-form-wrap {
	width:100%;
}
.book-form-wrap > div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.book-form-wrap > div:not(.book-name-wrap) {
	float:right;
}

.compose-photo-wrap {
	width:100%;
}
.compose-photo-wrap > div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.compose-photo-wrap > div:not(.book-name-wrap) {
	float:left;
}

.book-cover {
	width:100%;
	padding-bottom:15px;
	border-bottom:1px solid #ccc;
	display: block;
}
.book-cover > * {
	display: inline-block;
}
.book-cover img {
	width:150px;
}
.book-cover .book-name {
	width:calc(100% - 175px);
	margin-left:15px;
	vertical-align: top;
}
.book-cover .book-name h1 {
	margin-bottom:5px;
}
.book-cover .book-price {
	margin-bottom:15px;
	display:block;
	color:#f00;
}
.info-wrap {
	width: 50%;
	padding: 0px 15px 0px 25px;
}
.cropper-wrap {
	width:50%;
}

#cropper-photo {
    max-width: 100%;
    max-height: auto;
/*	width:200px;
	height:155px;*/
	opacity:0;
}
.composed-photo-sample {
        width:100%!important;
	width:200px;
	height:155px;
        height:auto!important;
}
/* cropper ui */
.btn-choose-img {
	width:120px;
	overflow: hidden;
	position:relative;
	margin-top: -7px;
	float:right;
	background-color: #ddd;
	font-size:17px
}
.btn-choose-img:focus,
.btn-choose-img:hover {
	background-color: #ccc;
}
.btn-choose-img i {
	margin: auto auto;
}
.input-choose-img {
	position: absolute;
	display: block;
	top: 0;
	right:0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	opacity: 0;
}
.ui-wrap {
	width:100%;
	margin:10px auto;
}
.ui-controler,
.ui-controler > * {
	display: inline-block;
}
.ui-controler {
	background-color:#dddddd;
	font-size:20px;
	padding: 0px 5px;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.ui-controler > a {
	padding:8px 10.25px;
}
.ui-controler1 {
	width:calc(100% - 108px);
}
.ui-controler2 {
	margin-left:10px;
}
.ui-controler2 > a {
/*width:45px;*/
}
.info-wrap .btn-book {
	width:105px;
	margin-top:63px;
	padding: 7px 10px
}
.drag-slider {
	width:calc(100% - 93px);
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	outline: none;
	cursor:pointer;
	border-color:transparent;
	background-color: #999999;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
}
#drag-slider {
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-color:transparent;
	background-color: #fff;
}
/*.cropper-view-box,
.cropper-face {
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border: 0px solid #fff;
	outline: 0px solid #fff;
}*/
/* info */
.info-wrap {
/*position: relative;*/
}

.error {
    color: red;
}

@media screen and (max-width:1199px) {
input {
	min-width:inherit;
}
}
@media screen and (max-width:767px) {
#gotop {
	right:5px;
	bottom:80px;
}
.book-form-wrap {
	position:relative;
	padding-bottom:80px;
}
.compose-photo-wrap {
	position:relative;
	padding-bottom:80px;
}

.info-wrap .btn-book {
	position: absolute;
	bottom:15px;
	left:50%;
	margin-left:-52.5px!important;
}
.cropper-container,
.cropper-wrap #cropper-photo {
	width:100%!important;
}
.book-form-wrap > div:not(.book-name-wrap) {
	float:none;
}
.compose-photo-wrap > div:not(.book-name-wrap) {
	float:none;
}

.info-wrap {
	width:100%;
	padding:0px 15px;
}
.cropper-wrap {
	width:100%;
	padding:0px 15px;
}
}
@media screen and (max-width:425px) {
#cropper-title {
	text-align:center;
}
.book-warnning > * {
	display: block;
}
.btn-choose-img {
	float:none;
	margin:20px auto;
}
}
@media screen and (max-width:320px) {
.ui-controler1 {
	width:calc(100% - 82px);
}
.ui-controler2 {
	margin-left:5px;
}
.ui-controler2 > a {
	padding:10px 5px;
}
}
/* layout */
.main-wrap {
	margin-top:110px;/*padding-left:8.3%;
	padding-right:8.3%*/
}
.main-wrap .col-cust-7 {
	width:calc(58% - 30px);
	float: left;
	padding-left:15px;
	padding-right:15px;
}
.main-wrap .col-cust-5 {
	width:calc(42% - 30px);
	float: left;
	padding-left:15px;
	padding-right:15px;
}
@media (max-width: 991px) {
.main-wrap {
	margin-top:100px;
	padding-left:2%;
	padding-right:2%
}
}
.home .main-wrap {
	margin-top:0;
	position:relative;
	z-index:3;
	padding-left:inherit;
	padding-right:inherit
}
header {
	position: fixed;
	top: 0;
	transition: top 0.2s ease-in-out;
	width: 100%;
	z-index:10;
	-webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5);
}
header .navbar {
	background:#fff;
	font-size:20px;
	margin-bottom:0;
}
.navbar-default {
	border-radius:0;
	border:0
}
.navbar-nav .fa {
	margin-right:5px;
}
.navbar-nav li {
	padding-left:40px;
}
.navbar-nav li a {
	color:#333;
	height:80px;
	vertical-align:middle;
	line-height:80px;
	padding:0;
}
.navbar-nav li a:hover {
	color:#000
}
.navbar-nav li.multi-lang {
	padding-top:20px;
}
.navbar-nav li.multi-lang .form-control {
	font-size:18px;
	height:auto;
	line-height:1;
	padding-top:1px;
	padding-bottom:1px;
	margin-top:6px;
}
.navbar-nav li .user-name {
	height:80px;
	vertical-align:middle;
	line-height:80px;
}
.navbar-brand {
	padding:5px 15px;
	height:80px;
}
.navbar-brand img {
	width:auto;
	height:100%
}
@media screen and (max-width:1199px) {
header .navbar {
	font-size:16px;
}
.navbar-nav li {
/*padding-left:4%;*/
}
.navbar-nav li.multi-lang {
	font-size:14px;
}
}
@media screen and (max-width:767px) {
header {
	height:auto;
}
.navbar-nav li {
	padding:10px;
}
.navbar-nav li a {
	height:auto;
	line-height:1;
	font-size:20px;
}
.navbar-brand {
	padding:5px;
	height:60px;
}
.navbar-brand img {
	height:100%;
	width:auto;
}
.book-cover {
	display: block;
	padding:15px;
}
.book-cover * {
	display: block;
}
.book-cover img {
	margin:0 auto;
	width:100%;
	height:auto;
}
.book-cover .book-name {
	text-align: left;
	width:100%;
	margin-left: 0;
}
.book-cover .book-name h1 {
	font-size:24px;
}
.book-cover .book-name .book-price {
	color:#f00;
}
}
.nav-up {
	top: -120px;
}
.top-message {
	background:#ffe598;
}
.home-top {
	padding-bottom:52%;
	height:0;
	background:url(../imgs/home-top-bg.jpg) no-repeat center bottom;
	background-size:cover;
	position:relative;
	text-align:center
}
.video-wrap {
	max-width:65%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
 @media screen and (min-width:1800px) {
.home-top {
	padding-bottom:45%;
}
.video-wrap {
	max-width:85%;
}
}
.hero-slider {
	margin-top:120px
}
.video-bdr {
	padding:1.6%;
	background:#fff;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
}
 @media screen and (max-width:1024px) {
.home-top {
	padding-bottom:inherit;
	height:auto;
	background-size:auto;
}
.video-wrap {
	max-width:90%;
}
}
.inner-bdr {
	background:#fff;
	border-radius:18px;
	-webkit-box-shadow: inset 0px 0px 15px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0px 0px 15px 2px rgba(0,0,0,0.15);
	box-shadow: inset 0px 0px 15px 2px rgba(0,0,0,0.15);
	padding:20px;
}
.book-shelf {
	text-align:center
}
.book-shelf ul {
	list-style:none;
	margin:0;
	padding:0;
}
.book-shelf .inner-bdr {
	padding:30px 30px;
}
.book-shelf h2 {
	margin:auto;
	width:400px;
	height:100px;
	background:url(../imgs/book-shelf-bg.png) no-repeat;
	display:inline-block;
	color:#6a3906;
	font-size:48px;
}
.book-brief .inner-bdr {
	border-radius:2px;
	margin-top:15px
}
.book-shelf .slick-prev {
	width:40px;
	height:40px;
	background:#ffd246;
	border-radius:50%;
	left:-40px
}
.book-shelf .slick-next {
	width:40px;
	height:40px;
	background:#ffd246;
	border-radius:50%;
	right:-40px
}
.book-shelf .slick-prev:before {
	color:#000;
	content: '\f0d9';
	font-family:FontAwesome;
	font-size:30px
}
.book-shelf .slick-next:before {
	color:#000;
	content: '\f0da';
	font-family:FontAwesome;
	font-size:30px
}
.book-shelf a {
	display:inline-block;
	position:relative;
}
.book-shelf a i {
	width:100%;
	height:100%;
	position:absolute;
	top: -9999px;
	left: -9999px;
	right: -9999px;
	bottom: -9999px;
	margin: auto;
	background-color:rgba(0, 0, 0, 0.5);
	color:#fff;
	text-align:center;
	vertical-align:middle;
	padding-top:40%;
	padding-left:15px;
	padding-right:15px;
	font-style:normal;
	transition:all .3s;
	opacity:0;
}
.book-shelf a:hover i {
	opacity:1
}
.book-shelf .slick-slide {
	margin:0 15px
}
.book-shelf .slick-slide img {
	width:100%;
        height: 210px;
}
.book-desc h1 {
	margin-bottom:0;
	margin-top:15px;
	font-size:24px;
}
.book-desc .btn {
	width:110px;
	height:50px;
	background:transparent url(../imgs/index-bt.png) no-repeat center top;
	border:1px solid #7b3806;
	transition:all .15s;
	border-radius:3px;
	color:#7b3806;
	line-height:50px;
	vertical-align:middle;
	padding:0;
	text-indent:35px;
}
.book-desc .btn:hover {
	background:#7b3806 url(../imgs/index-bt.png) no-repeat center bottom;
	color:#fff;
	text-indent:50px;
}
.book-desc button {
	text-indent:0px!important;
}
.book-desc button:hover {
	text-indent:10px!important;
}
.book-desc .book-price {
	display:inline-block;
	margin-bottom:15px
}
 @media screen and (max-width:480px) {
.book-shelf {
	display:none
}
}
footer {
	margin-top:60px
}
.steps {
	padding-bottom:135px;
	background:url(../imgs/footer-bg-01.png) repeat-x center bottom;
}
.stp {
	color:#ff900d;
	text-align:center;
	position:relative;
}
.stp span {
	display:inline-block;
	position:relative;
}
.stp img {
	display:inline-block;
	margin:auto;
	max-width:100%;
	height:auto
}
.stp i {
	font-style:normal;
	display:block;
	margin-top:10px
}
.stp .fa {
	font-size:40px;
	position:absolute;
	top:50%;
	right:-25%;
	margin:0;
	margin-top:-20px;
}
h3.steps-title {
	margin:0;
	text-align:center
}
.ft-link {
	background:url(../imgs/footer-bg-02.png);
	padding-top:30px;
}
.ft-link a {
	color:#000;
	display:inline-block;
	margin-bottom:5px;
	line-height:1
}
.ft-link a:hover {
	color:#333;
	text-decoration:none
}
.ft-link h3 {
	font-size:20px;
	font-weight:bold
}
.ft-link ul {
	list-style:none;
	margin-left:0;
	padding-left:0;
}
.ft-cpr {
	padding:30px 0 60px;
}
.ft-cpr span {
	display:block;
}
 @media screen and (max-width:767px) {
.book-shelf {
	display:none
}
.stp {
	text-align:left;
	margin-bottom:5%
}
.stp img {
	display:inline-block;
	width:15vw;
	height:auto
}
.stp span {
	margin-right:15px;
}
.stp i {
	display:inline-block;
}
.stp .fa {
	display:none
}
.col-stp {
	width:20%;
	float:left
}
}
 @media screen and (max-width:480px) {
.stp img {
	width:15vw;
}
.col-stp {
	width:100%;
}
}
.da-msg {
	text-align:center;
	width:70%;
}
.da-msg h2 {
	font-size:24px;
}
.msg-box {
	overflow:hidden;
	margin-left:30px;
	margin-right:30px;
	margin-top:15px;
}
.msg-box .book-page {
	width:50%;
	float:left;
	padding-right:30px
}
.msg-box .book-page img {
	width:100%;
	height:auto;
}
.msg-box .msg-inuput {
	width:50%;
	float:left;
}
.msg-box .msg-input textarea {
}
.text-counter {
	text-align:left;
	margin-top:15px;
}
.msg-box .btn-wrap {
	clear:both;
	margin-top:15px;
}
@media screen and (max-width:640px) {
.da-msg {
	width:100%;
	margin:0;
	padding:15px;
}
.msg-box {
	margin:0;
	padding:0;
}
.msg-box .book-page {
	width:100%;
	float:none;
	padding:0;
	margin-bottom:15px
}
.msg-box .msg-inuput {
	width:100%;
	float:none;
}
}
.cart-list {
	margin-bottom:15px;
}
.cart-list h2 {
	margin:0 0 15px 0;
}
.cart-list h2.book-name {
	margin:0 0 5px 0;
	font-weight:normal;
        font-size: large;        
}
.btn-del {
	width:40px;
	height:40px;
	background:#ddd;
	border-radius:5px;
	display:block;
	font-size:20px;
	text-align:center;
	line-height:40px;
	vertical-align:middle;
	color:#000;
	margin:auto;
}
.btn-wrap-right {
	text-align:center;
}
.tbox .book-price {
	text-align:center;
}
table.tbox {
	border-collapse:collapse;
}
.tbox td {
	border:1px solid #ddd;
	border-right:none;
	padding:15px
}
.tbox th {
	padding:15px
}
.tbox tr td:first-child {
	border-left:none;
}
.tbox tr td:first-child img {
	margin-left:-5px
}
.tbox tr:last-child td {
	border-bottom:0;
}
.thumb-s {
	display:inline-block;
	vertical-align:middle;
	width:100px;
	margin-right:15px;
}
.book-namebox {
	display:inline-block;
	vertical-align:middle;
}
.author-name {
	display:block;
}
.pay-box {
	background:#ffdda5;
	border-radius:18px;
	text-align:right;
	padding:15px;
}
.pay-box > div {
	margin-right:0;
	margin-left:auto;
	margin-bottom:5px;
	overflow:hidden;
	text-align:left;
	max-width:170px;
}
.pay-box div span:first-child {
	display:inline-block;
	width:35%;
	float:left;
}
.pay-box div span:last-child {
	display:inline-block;
	width:65%;
	float:right;
	text-align:right
}
.pay-box hr {
	border-top:1px solid #fff;
	margin:0;
}
#currency {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color:#fff;
	background:#ffb359 url(../imgs/select-arr-w.png) no-repeat 95% center;
	padding-right:7%;
	width:100%
}
.amount-total {
	color:#a40000;
	margin-top:5px;
}
 @media screen and (max-width:767px) {
.main-wrap .col-cust-7 {
	width:100%;
}
#sticker .pay-box {
	width:100%;
	position:fixed;
	bottom:0;
	right:0;
	z-index:100;
	border-radius:0;
	padding:5px;
	overflow:hidden;
}
#sticker .pay-box {
	height:90px;
}
.pay-box hr {
	display:none
}
#sticker .pay-box div span:first-child {
	width:auto;
	float:none;
}
#sticker .pay-box div span:last-child {
	width:auto;
	float:none;
	text-align:left
}
#sticker .select-currency {
	position:absolute;
	top:5px;
	right:5px;
	width:110px
}
#sticker .amount {
	position:absolute;
	top:5px;
	left:5px;
	width:auto
}
#sticker .ship-fee {
	position:absolute;
	top:35px;
	left:5px;
	width:auto
}
#sticker .discount {
	position:absolute;
	top:65px;
	left:5px;
	width:auto;
        color: blue;
}
#sticker .amount-total {
	position:absolute;
	top:50px;
	right:5px;
	width:auto
}
}
/* member */
.nav-member {
	margin-bottom:15px;
}
.nav-member ul {
	margin:0;
	padding:0;
	list-style:none;
	overflow:hidden
}
.nav-member li {
	float:left;
	width:25%;
	text-align:center
}
.nav-member li a {
	display:inline-block;
	color:#333;
	font-weight:bold;
}
.nav-member li a:hover {
	text-decoration:none;
	color:#6a3906
}
.nav-member li.act a {
	color:#6a3906
}
.member-data {
	text-align:center;
}
@media screen and (max-width:370px) {
.nav-member li {
	float:left;
	width:50%;
	margin:5px auto
}
.nav-member.inner-bdr {
	padding:5px
}
}
/* member order history */
.order-history td {
	border-left:0;
	border-right:0;
}
.order-date,
.order-time {
	display:block;
}
.pagenav {
	text-align:center;
	margin-top:30px;
}
.pagination {
	margin:auto;
}
.payment span {
	display:inline-block;
	text-align:center;
	vertical-align:top
}
.payment span img {
	margin-bottom:5px
}
.payment span+span {
	border-left:1px solid #ddd;
	margin-left:30px;
	padding-left:30px;
}
.pagination > li > a,
.pagination > li > span {
	color: #6a3906;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
	color: #6a3906;
	background-color: #ffe598;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	color: #6a3906;
	background-color: #ffe598;
}
@media screen and (max-width:767px) {
.payment span+span {
	border-left:0;
	margin-left:0;
	padding-left:0;
	margin-top:15px
}
.order-history thead {
	display:none;
}
.order-history td {
	display:block;
	border:none;
	padding:5px;
}
.btn-book {
	display: block;
	margin:0 auto!important;
}
}
.order-sn {
	margin-bottom:15px;
	font-weight:bold;
}
a.order-sn {
	font-weight:normal;
	text-decoration:underline;
	color:#000;
}
a.order-sn:hover {
	text-decoration:none;
	color:#333;
}
.order-sum {
	border-top:1px solid #ddd;
	padding-top:15px;
}
.order-sum ul {
	list-style:none;
	margin:0;
	padding:0
}
.order-sum li {
	margin-bottom:5px;
}
.order-sum label {
	display:inline-block;
	min-width:90px;
}
.order-amount {
	color:#a40000;
}
.order-books {
	margin-left:18px;
	padding-left:0;
}
/* register */
.register {
	text-align:center;
}
.register h2 {
	text-align:center;
}
.login {
	padding:30px;
}
.login>div {
	display:table;
	text-align:center;
	width:100%;
}
.login section {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	width:50%
}
.login section+section {
	border-left:1px solid #ddd;
	margin-right:30px;
}
.login input {
	min-width:inherit;
}
@media screen and (max-width:640px) {
.login section {
	display:block;
	width:100%;
	margin-bottom:15px;
}
.login fieldset {
        width:100%;
        text-align:center;
	margin:auto;
}
}
.fancybox-bg {
	background-color:#ffd246;
}
.card-num .form-inline .form-control {
	width:50px!important;
}
.book-box {
	margin-top:30px;
}
.book-preview-wrap {
	position:relative;
	height:70vh;
	width:100%;
}
.book-box h2 {
	text-align:center;
}
.link-outer li {
	display:inline-block;
	margin-right:15px;
}
.ft-social li {
	display:inline-block;
	margin-right:15px;
}
.ft-social a {
	display:inline-block;
	width:40px;
	height:40px;
}
.sns-fb a {
	background:url(../imgs/sns-spt.png) left top
}
.sns-line a {
	background:url(../imgs/sns-spt.png) -40px top
}
.sns-yt a {
	background:url(../imgs/sns-spt.png) -80px top
}
.navbar-default .navbar-toggle {
	border:0;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: transparent;
}
.msg-service {
	text-align:center;
}
.msg-cart-empty {
	text-align:center;
}
.top-message ul {
	margin:0;
	padding:0;
	list-style:none;
	height:24px!important;
	overflow:hidden!important
}
.top-message ul .news-item {
	margin-right:90px;
	overflow:hidden;
}
.top-message .panel {
	background-color:transparent;
	position:relative;
	margin:0;
	padding:0;
	margin-left:15px;
}
.top-message .panel-body {
	padding:0;
}
.top-message .panel-footer {
	display:inline-block;
	position:absolute;
	right:15px;
	top:2px;
	padding:0;
	background-color:transparent;
	border:none
}
.top-message .panel-footer a {
	color:#000;
	background-color:transparent;
	padding:0 10px;
	border:none
}
.top-message .panel-footer a:hover {
	color:#000;
	background-color:transparent;
	padding:0 10px;
	border:none
}
/* 首頁介紹圖片切換 */
.isMobile {
	display:none!important;
}
@media screen and (max-width:640px) {
.isLaptop {
	display:none!important;
}
.isMobile {
	display:block!important;
	width:50%;
	height:auto;
}
}
/* hero-slider */


.hero-slider .slick-prev {
	width:40px;
	height:40px;
	background:#ffd246;
	border-radius:50%;
	left:-10px;
	z-index:9999
}
.hero-slider .slick-next {
	width:40px;
	height:40px;
	background:#ffd246;
	border-radius:50%;
	right:-10px;
	z-index:9999
}
.hero-slider .slick-prev:before {
	color:#000;
	content: '\f0d9';
	font-family:FontAwesome;
	font-size:30px
}
.hero-slider .slick-next:before {
	color:#000;
	content: '\f0da';
	font-family:FontAwesome;
	font-size:30px
}
@media screen and (max-width: 768px) {
.hero-slider {
	margin-top:80px
}
}
 @media screen and (max-width: 1024px) {
.hero-slider .video-wrap {
	max-width: 100%;
}
.hero-slider .slick-next,
.hero-slider .slick-prev {
	z-index:1
}
}
.hero-slider .slick-dots {
	bottom: -38px;
}
.book-preview-home {
	position:relative;
	overflow:hidden;
}
.book-img img {
	width:100%;
	height:auto;
}
.home .book-desc {
	position:absolute;
	width:50%;
	top:0;
}
/*.home .book-brief .inner-bdr:nth-child(even) .book-desc {
	right:0;
	padding-left:15px;
	width:50%;
}
.home .book-brief .inner-bdr:nth-child(odd) .book-desc {
	left:0;
	padding-right:15px;
	text-align:right;
}*/
.home .book-brief .inner-bdr .book-desc {
	right:0;
	padding-left:15px;
	width:50%;
}

.book-desc h1 {
	height:65px;
	background-repeat:no-repeat;
	background-size:contain;
	margin-top:15%;
	margin-bottom:15px;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

.book-desc h1.tall {
	height:90px;
	background-repeat:no-repeat;
	background-size:contain;
	margin-top:15%;
	margin-bottom:15px;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

.book-desc .nobg {
	height:65px;
        background: transparent;
	margin-top:15%;
	margin-bottom:15px;
	border: 0;
        font: 55px arial, sens-serif;
	text-shadow: none;
	color: red;
}

.book-desc p {
	line-height:1.5;
	margin-bottom:15px;
	font-size:15px;
}
/*.home .book-brief .inner-bdr:nth-child(odd) .book-desc h1 {
	background-position:right top
}*/
 @media screen and (max-width:999px) {
.book-desc h1 {
	height:36px;
		margin-top:40px;

}
.book-brief .inner-bdr {
	padding:0;
}
}
 @media screen and (max-width: 767px) {
.book-img {
	position: absolute;
	height: auto;
	width: auto;
}
.book-desc h1 {
	background-position:center top!important;
}
.home .book-desc {
	position:relative;
	width:100%!important;
	text-align:left!important;
	padding:0!important;
	text-align:center!important;
	z-index:20;
	padding-top:25rem!important;
	padding-bottom:30px!important
}
.book-desc p {
	text-align:center
}
}


.cropper-bg {
	background:none!important
}
.cropper-modal {
    opacity: .75;
    background-color: #fff;
}


.hint-box {
    background: #f8f9fa;
    border: 1px solid #e3f2fd;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hint-icon {
    color: #2196f3;
    font-size: 20px;
    margin-right: 12px;
    margin-top: 2px;
}

.hint-content {
    flex: 1;
}

.hint-title {
    color: #1976d2;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.hint-content p {
    color: #555;
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
}