body {font-family: 'Noto Sans TC', 'Lato',sans-serif;}
* {padding: 0;margin: 0;}
img {vertical-align: top;border: none;}
header {width: 100%;max-height: 95px;display: block;height: 100vh;}
.header-box {display: block;height: 100%;max-height: 95px;border-bottom: #dcdcdc 1px solid;position: fixed;z-index: 10;width: 100%;background-color: #fff;
}
a.brand-logo {display: block;width: 100%;max-width: 180px;margin: 10px auto;}
a.brand-logo > img {width: 100%;}
.bookheader {position: fixed;z-index: 2;width: 100%;background-color: #e1402b;padding: 5px 0;}
.bookheader > h3 {display: block;font-weight: 700;font-size: 27px;text-align: center;color: #ffe35d;letter-spacing: 4px;text-indent: 4px;}
.bookheadercenter {display: table;margin: 0 auto;table-layout: fixed;border-spacing: 3px;}
.bookheadercenter > h2 {display: table-cell;font-weight: 900;font-size: 40px;color: #FFF;vertical-align: middle;letter-spacing: 1.5px;text-indent: 1.5px;}
.bookheadercenter > .book-icon {display: table-cell;vertical-align: middle;width: 95px;padding: 0 7px;}
.bookheadercenter > .book-icon > img {width: 100%;}
.header-kv-area {width: 100%;background-color: #ffe35d;position: relative;height: 500px;}
.header-kv-block {position: absolute;bottom: 7%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 810px;}
.header-kv-box {width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;}
.header-kv-imgs {width: 50%;}
.header-kv-imgs > img{width: 100%;}
.header-kv-info {width: 50%;padding-left: 30px;}
.header-kv-info > ul {margin: 0;padding: 0;}
.header-kv-info > ul > li {display: block;font-weight: 700;font-size: 18px;color: #2a71b9;text-shadow: 0px 0px 5px white;padding: 3px 0px 3px 20px;position: relative;}
.header-kv-info > ul > li::before {content: "";position: absolute;top: 53%;left: 0;transform: translateY(-50%);-webkit-transform: translateY(-50%);width: 15px;height: 15px;background-color: #FFF;border-radius: 50%;border: 4px solid #2a71b9;}
.header-kv-btn-area {width: 100%;display: flex;flex-direction: column;padding-top: 20px;}
.header-kv-btn-area > a {display: block;width: 100%;background-color: #fcf5d0;padding: 12px 40px 12px 12px;text-align: right;font-weight: 700;color: #79331a;font-size: 18px;border-radius: 12px;margin: 7px 0;text-decoration: none;outline: none;letter-spacing: 1px;text-indent: 1px;box-shadow: rgb(125 51 26 / 19%) 0px 3px 2px 2px;position: relative;}
.header-kv-btn-area > a::after {content: "";position: absolute;top: 50%;right: 12px;transform: translateY(-50%);-webkit-transform: translateY(-50%);width: 14px;height: 14px;clip-path: polygon(0 0, 0% 100%, 100% 50%);background-color: #ed9999;}
.header-kv-btn-area > a > span {position: absolute;bottom: 0;left: 12px;width: 83px;z-index: 2;}
.header-kv-btn-area > a > span > img {width: 100%;}
.cover-area {width: 100%;position: relative;background-color: #ffe35d;padding-bottom: 30px;}
.cover-block {width: 810px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;}
.cover-box {width: 47%;}
.cover-box-table {display: table;table-layout: fixed;margin: 0 auto;}
.cover-box-tablecell {width: 70px;display: table-cell;vertical-align: middle;}
.cover-box-tablecell > img {width: 100%;}
.cover-box-table > h3 {display: table-cell;vertical-align: middle;font-weight: 700;font-size: 33px;text-shadow: 2px 2px 0px white;}
.cover-box-table > h3.color01 {color: #01a7df;}
.cover-box-table > h3.color02 {color: #8ec21f;}
.cover-box-img {width: 100%;text-align: center;}
.cover-box-img > img {width: 80%;}
.cover-box-info {display: table;table-layout: fixed;margin: 0 auto;}
.cover-box-info-box {display: table-cell;vertical-align: middle;}
.cover-box-info-box > ul {margin: 0;padding: 0;}
.cover-box-info-box > ul > li {display: blcok;font-weight: 600;font-size: 25px;position: relative;padding-left: 30px;letter-spacing: 1px;list-style: none;}
.cover-box-info-box > ul > li::before {content: "\f005";position: absolute;left: 0;top: 54%;transform: translateY(-50%);-webkit-transform: translateY(-50%);font-family: FontAwesome;font-style: normal;font-weight: normal;font-size: 22px;}
.cover-box-info-box > ul > li.overcolor01 {color: #3b7ac0;}
.cover-box-info-box > ul > li.overcolor02 {color: #009944;}
.youtube-inner-area {width: 810px;margin: 40px auto 0 auto;padding: 25px;background-color: #fcf5d0;border-radius: 15px;}
.youtube-inner-area > ul {margin: 10px 0 0 0;padding-left: 18px;}
.youtube-inner-area > ul > li {list-style-type: decimal;padding: 4px 0;font-weight: 400;font-size: 15px;color: #79331a;}
.youtube-area {width: 100%;position: relative;height: 0;padding-bottom: 56.25%;}
.youtube-area > .video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.newfriend-area {width: 100%;position: relative;background-color: #ffe35d;padding: 30px 0;}
.newfriend-title {display: table;table-layout: fixed;margin: 0 auto;}
.newfriend-title-imgs {width: 120px;display: table-cell;vertical-align: middle;}
.newfriend-title-imgs > img {width: 100%;}
.newfriend-title-info {display: table-cell;vertical-align: middle;padding-left: 20px;}
.newfriend-title-info > h4 {display: block;font-weight: 900;font-size: 33px;color: #e1402b;letter-spacing: 1px;margin: 0;}
.newfriend-title-info > span {display: block;font-weight: 700;font-size: 28px;color: #82492c;}
.friend-program-area {width: 810px;margin: 0 auto;padding: 20px 0;}
.friend-program-block {width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;}
.friend-program-box {width: 47%;border: 1px solid #c4b04d;background-color: #fcf5d0;position: relative;padding-bottom: 50px;border-radius: 30px;overflow: hidden;box-shadow: rgb(125 51 26 / 19%) 0px 3px 2px 2px;}
.friend-program-box > h5 {display: block;text-align: center;font-weight: 700;font-size: 28px;margin: 0;padding: 15px 0 0 0;}
.friend-program-box > h5.okey01 {color: #00a7df;}
.friend-program-box > h5.okey02 {color: #8ec21f;}
.price-box {display: table;table-layout: fixed;margin: 0 auto;position: relative;}
.price-box > p {display: table-cell;font-weight: 600;font-size: 18px;color: #82492c;}
.price-box > span {display: table-cell;font-weight: 700;font-size: 27px;color: #e1402b;letter-spacing: 0.5px;padding-left: 4px;font-family: 'Lato', sans-serif;}
.price-box-other{display: table;table-layout: fixed;margin: 0 auto;}
.price-box-other-info {display: table-cell;}
.price-box-other-info > span {display: inline-block;font-weight: 500;font-size: 14px;color: #82492c;padding: 0px 10px;border: 1.5px solid #82492c;letter-spacing: 2px;text-indent: 2px;margin: 8px 0 0 0;}
.price-box-other-info > ul {margin: 0 0 10px 0;padding-left: 18px;}
.price-box-other-info > ul > li{font-weight: 500;font-size: 16px;color: #82492c;padding: 1px 0;}
.friend-program-box > a {display: block;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);padding: 10px 0;text-align: center;background-color: #e1402b;color: #FFF;font-weight: 700;font-size: 18px;width: 100%;letter-spacing: 2px;text-indent: 2px;text-decoration: none;outline: none;}
ul.side-sticky-nav {list-style-type: none;padding: 0;width: 55px;margin: 0;position: fixed;right: 0;bottom: 18%;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;z-index: 9;}
ul.side-sticky-nav li {position: relative;width: 100%;height: 0;padding-bottom: 100%;background-color: #F7F7F7E6;box-shadow: -4px 0px 4px #c38f018a;margin: 10px 0;}
ul.side-sticky-nav li.nobg{background-color: #e1402b;height: 130px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
ul.side-sticky-nav li.gotop{border-radius: 50%;}
.hide-side-sticky-nav {right: -54px!important;}
ul.side-sticky-nav li a {position: absolute;width: 100%;height: 100%;cursor: pointer;}
ul.side-sticky-nav li a > img{width: 100%;}
ul.side-sticky-nav li:last-child a::before {font-family: "Font Awesome 5 Free";font-weight: 600;content: '\f062';color: #e1402b;font-size: 28px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
ul.side-sticky-nav li > a > span {font-weight: 500;color: #FFF;font-size: 18px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: block;text-align: center;}
.good-books-area {width: 100%;position: relative;background-color: #ffe35d;padding: 0 0 30px 0;}
.author-area {width: 100%;text-align: center;}
.author-area > p {display: inline-block;font-weight: 400;font-size: 12px;border: 1px solid #82492c;color: #82492c;padding: 2px 10px;}
.good-books-block {width: 810px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;}
.good-books-box {width: 31%;margin: 13px 0;border: 1px solid #FFF;padding:30px 10px 48px 10px;border-radius: 15px;background-color: #FFF;position: relative;overflow: hidden;border: 5px solid #e9847d;}
.good-books-box > img {width: 100%;}
.good-books-box > h6 {display: block;padding: 5px;font-weight: 700;font-size: 14px;text-align: center;color: #000;margin: 0;}
.good-books-box > span {display: block;padding: 0 3px;font-weight: 500;font-size: 13px;text-align: center;color: #0072E3;line-height: 1.2rem;}
.good-books-box > p {display: block;height: 30px;line-height: 30px;margin: 0;text-align: center;color: #000;font-size: 15px;font-weight: 500;}
.good-books-box > p > b {font-family: 'Lato', sans-serif;font-size: 18px;font-weight: 700;color: #e1402b;}
.good-books-box > .books-link-area {position: absolute;width: 100%;bottom: 0;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);display: table;table-layout: fixed;}
.books-link-area > a {display: table-cell;padding: 10px 0;text-align: center;font-weight: 500;font-size: 15px;text-decoration: none;outline: none;color: #FFF;}
.books-link-area > a.links-bg01 {background-image: linear-gradient( 180deg, #01a7df 10%, #3b7ac0 100%);border-right: 0.5px solid #a6c1e0;}
.books-link-area > a.links-bg02 {background-image: linear-gradient( 180deg, #8ec21f 10%, #0e9a45 100%);border-left: 0.5px solid #14582e;}
.books-icons {width: 150px;height: 30px;background-color: #e9847d;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;position: absolute;top: 0;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);}
.books-icons > span {display: block;text-align: center;font-weight: 500;color: #fcf5d0;line-height: 25px;font-size: 16px;letter-spacing: 1px;text-indent: 1px;}
.books-icons > span > b {font-weight: 700;font-family: 'Lato', sans-serif;font-size: 21px;color: #FFF;}
.future-footer-area {width: 810px;margin: 0 auto;padding: 40px 0;}
.future-footer-area > span {display: inline-block;font-weight: 500;color: #FFF;font-size: 15px;padding: 2px 20px;background-color: #82492c;letter-spacing: 2px;text-indent: 2px;margin-bottom: 15px;}
.future-footer-area > ul {margin: 0;padding-left: 17px;}
.future-footer-area > ul > li {list-style-type: square;padding: 10px 0;font-weight: 400;font-size: 15px;color: #82492c;border-bottom: 1px solid #82492c4d;line-height: 1.5rem;} 
.future-footer-area > ul > li:last-child{border-bottom: none;}
.future-member-area {width: 100%;position: relative;background-color: #82492c;padding: 30px 0;}
.future-member-area > p {text-align: center;display: block;font-weight: 400;font-size: 12px;color: #FFF;margin: 0;padding: 2px 0;}
.future-member-area > p > a {color: #ffe35d;}
.future-member-area > span {text-align: center;display: block;padding: 10px 0;font-weight: 400;color: #FFF;font-size: 14px;letter-spacing: 1px;text-indent: 1px;}
.future-member-area > h5 {text-align: center;display: block;padding: 10px 0;font-weight: 300;color: #fff9;font-size: 12px;}




@media screen and (max-width: 1100px){}

@media screen and (max-width: 1024px){}

@media screen and (max-width: 991px){}

@media screen and (max-width: 830px){
	.header-kv-block {width: 92%;}
	.header-kv-info > ul > li {font-size: 17px;}
	.cover-block {width: 92%;}
	.youtube-inner-area {width: 92%;}
	.friend-program-area {width: 92%;}
	.good-books-block {width: 92%;}
	.future-footer-area {width: 92%;}
}

@media screen and (max-width: 767px){
	.header-kv-box {flex-direction: column;}
	.header-kv-imgs {width: 100%;}
	.header-kv-info {width: 100%;}
	.header-kv-block {bottom: 4%;}
	.header-kv-area {height: 1040px;}
	.header-kv-info {padding: 15px 0;}
	.cover-box-img > img {width: 90%;}
	.youtube-inner-area {padding: 20px;}
	.friend-program-box {width: 100%;margin: 10px 0;}
	.good-books-box {width: 48%;}
	.cover-box-info-box > ul > li {font-size: 19px;}
	.cover-box-tablecell {width: 60px;}
	.cover-box-table > h3 {font-size: 30px;}
}

@media screen and (max-width: 520px){
	a.brand-logo {width: 160px;}
	header {max-height: 87px;}
	.header-box {max-height: 87px;}
	.bookheadercenter > h2 {font-size: 30px;}
	.header-kv-area {height: 840px;}
	.cover-box-tablecell {width: 50px;}
	.cover-box {width: 48%;}
	.cover-box-table > h3 {font-size: 20px;}
	.cover-box-img > img {width: 100%;}
	.cover-block {width: 96%;}
	.cover-box-info-box > ul > li {font-size: 16px;padding-left: 20px;}
	.cover-box-info-box > ul > li::before {font-size: 15px;}
	.youtube-inner-area {padding: 15px;}
	.youtube-inner-area > ul > li {font-size: 14px;font-weight: 500;}
	.good-books-box {width: 100%;}
	.books-link-area > a {font-size: 17px;}
	.books-icons {width: 220px;}
	.good-books-box > h6 {font-size: 18px;}
	.good-books-box > span {font-size: 16px;line-height: 1.6rem;}
	.good-books-box > p {height: 45px;line-height: 45px;font-size: 17px;}
	.good-books-box > p > b {font-size: 20px;}
	.newfriend-title-imgs {width: 100px;}
	.future-footer-area > ul > li {text-align: justify;}
	.bookheader > h3 {font-size: 21px;}
}

@media screen and (max-width: 420px) {
	.header-kv-area {height: 770px;}
}

@media screen and (max-width: 390px){
	.header-kv-area {height: 755px;}
	.cover-box-info-box > ul > li {font-size: 14px;}
}

@media screen and (max-width: 375px){
	.bookheadercenter > h2 {font-size: 28px;}
	.header-kv-area {height: 730px;}
	.cover-box-table > h3 {font-size: 19px;}
	.cover-box-tablecell {width: 40px;}
	.cover-box-info-box > ul > li {font-size: 14px;}
	.friend-program-box > h5 {font-size: 25px;}
	.bookheader > h3 {font-size: 19px;}
	.header-kv-info > ul > li {font-size: 16px;}
}