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

/*----商品介紹(上方)----*/
.introduction{ width:100%;position: relative; padding-bottom:6%}
/*----書----*/
.book_cover{float: left;width:35%;border:1px solid #999;}
.book_cover_img { width:337px; height:427px;overflow: hidden; position: relative;}
.book_cover_img img{ max-width:100%; position: absolute;top: 0px;left: 0px; right: 0px; bottom: 0px;margin: auto;}
/*----介紹----*/
.book_detail{ float: right;width:62%; text-align:left;}
.book_detail:hover a{opacity:1;}
.book_detail_01{ width:100%; color:#000; font-size:22px; font-weight:bold; padding-bottom:20px}
.book_detail_02{ width:100%; background-color:#ffe5ea; color:#232323;float: left;background: linear-gradient(to left bottom,transparent 52%, rgba(0,0,0,.1) 0)no-repeat 100% 0 / 2em 2em,linear-gradient(-135deg,transparent 1.5em, #ffe5ea 0);}
.book_detail_02 p{ padding:0px 15px 10px 30px;}
.book_detail_02_2{ margin-top:-12px}
.book_detail_03{width:100%; padding:10px 0px 6px 0; display:table; font-size:15px; border-bottom:1px dotted #CCC}
.book_detail_03 li{list-style-type:none; padding-bottom:3px}
.book_detail_03 .author:before{content:"作者：";padding:0 5px 0 0;}
.book_detail_03 .painting:before{content:"繪者：";padding:0 5px 0 0;}
.book_detail_03 .translation:before{content:"譯者：";padding:0 5px 0 0;}
.book_detail_03 .price:before{content:"定價：";padding:0 5px 0 0;}
.book_detail_03 .offers:before{content:"優惠價：";padding:0 5px 0 0;}
.book_detail_03 .offers:after{content:"元";}
.book_detail_03 .price:after{content:"元";}
.book_detail_03 .offers span{ color:#F00; font-size:16px; font-weight:bold}
.book_detail_04{width:100%;background-color:#e8f9ff; display: inline-block; margin-top:10px; padding:5px;}
.book_detail_04_2 {display:inline-block; width:60px;vertical-align: middle}
.book_detail_04_3 {display:inline-block; vertical-align: middle; width:85%}
.book_detail_04_3 .date:before{content:"優惠期限：";padding:0 5px 0 0;}
.book_detail_04_3 .sale{border-bottom:1px solid #bbdce7;}
.book_detail_05{width:100%; padding:10px 0px 6px 0; font-size:15px; /*border-top:1px dotted #CCC;*/ margin-top:10px; position:relative;transition: .3s;}
.add2shop{color: #fff;background-color: #eb6877;border-radius:5px;text-align: center;vertical-align: middle;padding:10px;width:45%;box-shadow: 0 3px 0px #ce3e4f;position:absolute;}
.add2shop img {vertical-align: middle;padding-right: 5px;}
.add2shop:hover {background-color: #e94e60;}
.checkout{color: #fff;background-color: #4da7c4;border-radius:5px;text-align: center;vertical-align: middle;padding:10px;width:45%;box-shadow: 0 3px 0px #2b819d;position:absolute; right:0}
.checkout:hover {background-color: #2690b3;}
.add2shop:active, .checkout:active {box-shadow: none;margin-top: 1px;}
.nomore{color: #777777;background-color: #EBEBEB;border-radius:5px;text-align: center;vertical-align: middle;padding:10px;width:45%;position:absolute; right:0}

/*----商品介紹(下方)----*/
.introduction2{ width:100%;position: relative; padding-bottom:30px}
/*----橫向選單----*/
.introduction_menu{ display:inline-block; width:60%;}
.introduction_menu a{ color:#232323;}
.lis03{display:inline-block;list-style-type:none; text-align:center;width:30%;background-color:#ebebeb;transition: .3s;padding: 2px 0;}
.now{color:#fff;background-color:#4da7c4;}
.lis03:hover{color:#fff;background-color:#4da7c4;}

/*----書籍資訊----*/
.info{ width:100%;position: relative;  margin-bottom:80px; margin-top:30px;text-align: center;}
.info_2{ width:100%;}
.title_all { padding:0 0px 10px 0px;text-align: left;}
.title {font-size: 16px;font-weight: bold;display: inline-block;color: #4da7c4;}
.title i { padding-right:10px}
.content{ padding:0 20px}
.content p{ padding-bottom:10px;text-align: left;}
.from{width:100%;padding:0 20px }
.from1{border: 1px solid #dfdfdf;border-collapse: collapse;width: 40%; float:left}
.from1 tbody {display: table-row-group;vertical-align: middle;border-color: inherit;}
.from1 tr {display: table-row;vertical-align: inherit;border-color: inherit;}
.from1 td{padding: 2px 15px;border: 1px solid #ccc;text-align: left;}

/*----相片集----*/
.photo{ width:100%; text-align:center;}
.photo a:hover{opacity: 1;}
.main_o{ border:1px solid #ddd; width:100%;background-color: #fff;box-sizing: border-box;}
.main{ width:720px; height:466px;overflow: hidden; position: relative;}
.main img{width: 100%;position: absolute;top: 0px;left: 0px; right: 0px; bottom: 0px;margin: auto;}
.main_s{ width:100%;transition: .3s;}
.main_s00{padding: 30px 0 0 0;display:block;text-align: left;font-size: 0;}
.main_s00 li{list-style-type:none;border:1px solid #ccc;margin-right:0.5%;display: inline-block;opacity:0.8;margin-bottom: 10px;}
.ma{overflow:hidden;box-sizing: border-box;overflow: hidden; position: relative; width:100px; height:100px}
.ma img{ width: 100%;position: absolute;top: 0px;left: 0px; right: 0px; bottom: 0px;margin: auto;}
.ma:hover{ border:1px solid #4da7c4;opacity: 1;}
.ma2{ border:1px solid #4da7c4;opacity: 1;}

.banner_arrow {position: absolute;width:100%;height: 35px;margin-top: 22%; text-align:center}
.arrow_r:hover, .arrow_l:hover {background-color: #ffb946;}
.arrow_r {width: 35px;height: 35px;background-color: #4da7c4;border-radius: 8px;display: block;position: absolute;right:-14px;}
.arrow_l {width: 35px;height: 35px;background-color: #4da7c4;border-radius: 8px;display: block;position: absolute;left:-14px;}
.arrow_l i {color: #FFF;vertical-align: middle;padding: 3px 0 0 0px;}
.arrow_r i {color: #FFF;vertical-align: middle;padding: 3px 0 0 3px;}
.ma:last-child{margin-right: 0px;}

.phexplan{ padding:20px 0 0 0; }
.phexplan .txts{ font-size:16px; color:#777; text-align:left; }


/*----推薦商品----*/
.best_content {width: 100%;display: inline-block;text-align:left;margin-bottom: 50px;}
.line{border-bottom: 1px dashed #b4b4b4; width:100%;text-align: center;}
.b_b{padding:20px 35px 20px 0px; display: inline-block;width:16%; text-align:center;box-sizing: border-box;vertical-align: top;}
.best_list{display:inline-block;}
.bestbook_o{padding:5px;}
.bestbook{width:116px; height:162px;overflow: hidden; position: relative;}
.bestbook img{width: 100%;position: absolute;top: 0px;left: 0px; right: 0px; bottom: 0px;margin: auto;}
.bookname{ color:#777;text-align: left;padding: 5px 0 0 0;line-height: 17px;}
.best_list:hover .bookname{color:#4da7c4;}
.best_content a:hover{opacity: 1;}
.author, .price2{text-align: left; padding-bottom:1px;}
.price2{padding-bottom:8px; color:#F00}

@media screen and (max-width: 1024px) and (min-width: 768px){
.book_cover {float:none;width: 90%; margin-bottom: 17px;}
.book_detail {float:none;width: 90%}	
.info {width: 95%;}
.introduction {padding-bottom: 80px;}
.introduction2 {width:100%;}
.introduction_menu {width: 100%;text-align: center;}
.lis03 {padding: 5px 0;}
.banner_arrow {margin-top: 28%; width:95%}

.b_b{width:19%}




}
@media screen and (max-width: 767px){
.book_cover {float:none;width: 95%;margin-bottom: 17px;}
.book_detail {float:none;width: 90%}	
.info {width: 95%;}
.from1 {width: 85%;}
.introduction2 {width: 100%;}	
.introduction {padding-bottom: 80px;}
.introduction_menu {width: 100%;text-align: center;}
.lis03 {padding: 5px 0;}
.book_detail_04_3 {	width: 75%;}
.add2shop, .checkout, .nomore {width: 42%;}

.banner_arrow { display:none}


.b_b{width:49%}
.best_content{ width:85%}

/*相片集*/
.main{ width:auto; max-width:720px; }

}
@media screen and (max-width: 320px){
.book_cover_img{ width:auto; height:auto}
.best_content{ width:90%}
}