/**分類背景**/
.main-area{padding: 70px 0;}
.main-grey{ background-color: #f2f2f2;}
#booklist01{ background-image: url("../images/bg.png");}
#booklist08{ background-image: url("../images/bg.png");}


/**浮動BANNER**/
.admenu {position:fixed; width:130px;z-index:100;right: 2%; bottom: 3%;}
@media (max-width: 767px) {
.admenu {width:350px; margin: 0 auto;}
}

.viewPhone{ display: none;}
.viewPc{ display:inline;}
@media (max-width: 768px) {
.viewPhone{ display: inline;}
.viewPc{ display: none;}
}


/**標題主色系修改
目前主色系#D82018。
浮動BANNER顏色為#00BFFF
搜尋整份CSS，取代覆蓋即可。
**/


/**booklist**/
.section-title{ text-align: center;}
.section-title .line{background:-webkit-linear-gradient(#D82018 0%,#D82018 100%);background:-o-linear-gradient(#D82018 0%,#D82018 100%);background:linear-gradient(#D82018 0%,#D82018 100%);width:150px;height:5px; margin: 20px auto!important;}

.section-title h1{font-size:35px;font-weight:800;line-height:50px; color: #D82018;}

.section-title h2{font-size:25px;font-weight:500;text-transform:uppercase}
.section-title h2 strong{ color: #f40f50;}
@media (max-width: 767px) {
.section-title h1{font-size:35px}
.section-title h2{font-size:22px}
.col-sm-6{ width: 50%;}
.main-area{ padding: 40px;}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.section-title h1{font-size:30px}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.section-title h1{font-size:30px}
}

.book{ text-align: center; margin: 20px 0;}
.book2{ text-align: center; margin: 70px 0;}
.book .book-pic img{position: relative; z-index: 4; border: 1px #D1D1D1 solid; padding: 5px; margin: 1rem 0; width: 80%;}
.book .book-pic img:hover{ border: 1px #808080 solid; padding: 5px; margin: 1rem 0; width: 80%;}
.book .book-dis{ position: absolute; z-index: 5;left: 20px; top: 16px;}
.book .book-dis img{ max-width: 50%;}
.book h3{font-size:20px;font-weight:500;line-height:30px; margin-bottom: 5px;}
.book h4{font-size:18px;font-weight:normal;line-height:20px; margin-bottom: 10px;}
.book h5{ color: #d71518; font-size: 18px; margin-bottom: 15px;}
.book h5 span{ color: #9e9e9e; font-size: 14px; font-weight: normal; margin-left: 10px;}

.book-link{ border: 1px #929292 solid; font-size: 14px; color: #929292; border-radius: 10px; padding: 5px 15px; margin: 3px 5px;}
.book-link2{ border: 1px #D82018 solid; font-size: 18px; color: #D82018; border-radius: 10px; padding: 5px 15px; margin: 3px 5px;}
.book-link:hover{ border: 1px #D82018 solid; background-color: #D82018; color: #fff;}
.book-link2:hover{ border: 1px #D82018 solid; background-color: #D82018; color: #fff;}
.podcast-link:hover{ border: 1px ; color: #fff;}

@media (max-width: 767px) {
.book h3{font-size:16px;line-height:30px;}
.book h4{font-size:14px;}
.book .book-pic img, .book .book-pic img:hover{width: 90%;}
.book-link{border-radius: 6px; padding: 3px 10px; margin: 3px; font-size: 12px;}
}


.book2 h3{font-size:20px;font-weight:500;line-height:30px; margin-bottom: 5px;}
.book2 h4{font-size:18px;font-weight:normal;line-height:20px; margin-bottom: 10px;}
.book2 h5{ color: #d71518; font-size: 18px; margin-bottom: 15px;}
.book2 h5 span{ color: #9e9e9e; font-size: 14px; font-weight: normal; margin-left: 10px;}

.book2-link{ border: 1px #929292 solid; font-size: 14px; color: #929292; border-radius: 10px; padding: 5px 15px; margin: 3px 5px;}
.book2-link:hover{ border: 1px #D82018 solid; background-color: #D82018; color: #fff;}
.podcast-link:hover{ border: 1px ; color: #fff;}

@media (max-width: 767px) {
.book2 h3{font-size:16px;line-height:30px;}
.book2 h4{font-size:14px;}
.book2 .book-pic img, .book .book-pic img:hover{width: 90%;}
.book2-link{border-radius: 6px; padding: 3px 10px; margin: 3px; font-size: 12px;}
}


/*board*/
#board{ background-image: url("../images/bg.png"); padding: 5rem 2rem 2rem 2rem;}
.square-grad {
  background: #cb60b3; display: block; position: relative; top: -115px; margin: 0 auto -90px auto; width: 300px;
  background: -webkit-linear-gradient(top, #d51d26 0%, #91000f 100%);
  color: #fff; border: none; text-align: center; border-radius: 50px; font-size: 28px; padding: 15px 30px; font-weight: bold; text-decoration: none;}
.square-grad:hover{background: -webkit-linear-gradient(top, #91000f 0%, #d51d26 100%); color: #F0FF00;}
.memo{ padding: 2rem; width: 95%; font-size: 13px; line-height: 140%;}
.memo li{ margin-bottom: 0.5rem;}
@media (max-width: 767px) {
#board{ background-image: url("../images/bg.png"); padding: 3rem 1rem 1rem 1rem;}
	.memo{ padding: 1rem; width: 100%;}
	.square-grad {
  top: -75px; margin: 0 auto -50px auto; width: 250px; font-size: 24px; padding: 10px 20px;}
}


/**基本CSS**/
body{font-family:"Lato",sans-serif;font-weight:400;font-style:normal;color:#6A6972;overflow-x:hidden}
*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
img{max-width:100%}
a:focus,input:focus,textarea:focus,button:focus{text-decoration:none;outline:none}
a:focus,a:hover{text-decoration:none}
i,span,a{display:inline-block}
audio,canvas,iframe,img,svg,video{vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-family:"Poppins",sans-serif;font-weight:700;color:#2E2E2E;margin:0}
h1{font-size:40px}
h2{font-size:36px}
h3{font-size:28px}
h4{font-size:22px}
h5{font-size:18px}
h6{font-size:16px}
ol{margin:0;padding:0;list-style-type:decimal}
ul{margin:0;padding:0;list-style-type:disc}
p{font-size:16px;font-weight:400;line-height:26px;color:#6A6972;margin:0}
.bg_cover{background-position:center center;background-size:cover;background-repeat:no-repeat;width:100%;height:100%}
.slick-slide{outline:0}
.main-btn{display:inline-block;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 25px;font-size:16px;line-height:48px;border-radius:8px;border:0;color:#fff;cursor:pointer;z-index:5;-webkit-transition:all .4s ease-out 0;-moz-transition:all .4s ease-out 0;-ms-transition:all .4s ease-out 0;-o-transition:all .4s ease-out 0;transition:all .4s ease-out 0;background:-webkit-linear-gradient(left,#33c8c1 0%,#119bd2 50%,#33c8c1 100%);background:-o-linear-gradient(left,#33c8c1 0%,#119bd2 50%,#33c8c1 100%);background:linear-gradient(to right,#33c8c1 0%,#119bd2 50%,#33c8c1 100%);background-size:200%}
.main-btn:hover{color:#fff;background-position:right center}

footer{ font-size: 14px; color: #FFFFFF; background-color: #333333; padding: 40px; width: 100%; text-align: center;}

.slick-slide { outline: 0; }



/**NAVBAR**/
.navbar-area{position:absolute;top:0;left:0;width:100%;z-index:99;background-color:#FFF;-webkit-transition:all .3s ease-out 0;-moz-transition:all .3s ease-out 0;-ms-transition:all .3s ease-out 0;-o-transition:all .3s ease-out 0;transition:all .3s ease-out 0}
.sticky{position:fixed;z-index:99;background-color:#fff;-webkit-box-shadow:0 20px 50px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 20px 50px 0 rgba(0,0,0,0.05);box-shadow:0 20px 50px 0 rgba(0,0,0,0.05);-webkit-transition:all .3s ease-out 0;-moz-transition:all .3s ease-out 0;-ms-transition:all .3s ease-out 0;-o-transition:all .3s ease-out 0;transition:all .3s ease-out 0}
.sticky .navbar{padding:10px 0}
.navbar{padding:20px 0;border-radius:5px;position:relative;-webkit-transition:all .3s ease-out 0;-moz-transition:all .3s ease-out 0;-ms-transition:all .3s ease-out 0;-o-transition:all .3s ease-out 0;transition:all .3s ease-out 0}
.navbar-brand{padding:0}
.navbar-brand img{ max-height: 50px;}
.navbar-toggler{padding:0}
.navbar-toggler .toggler-icon{width:30px;height:2px;background-color:#868686;display:block;margin:5px 0;position:relative;-webkit-transition:all .3s ease-out 0;-moz-transition:all .3s ease-out 0;-ms-transition:all .3s ease-out 0;-o-transition:all .3s ease-out 0;transition:all .3s ease-out 0}
.navbar-toggler.active .toggler-icon:nth-of-type(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:7px}
.navbar-toggler.active .toggler-icon:nth-of-type(2){opacity:0}
.navbar-toggler.active .toggler-icon:nth-of-type(3){-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);top:-7px}

.navbar-nav{ text-align: center; margin: 0 auto;}
.navbar-nav .nav-item{margin:0 8px;position:relative;}
.navbar-nav .nav-item a{font-size:20px;font-weight:500;color:#868686;-webkit-transition:all .3s ease-out 0;-moz-transition:all .3s ease-out 0;-ms-transition:all .3s ease-out 0;-o-transition:all .3s ease-out 0;transition:all .3s ease-out 0;padding:10px 5px;position:relative;font-family:"Poppins",sans-serif}
.nav-item a:hover{color:#000}
.navbar-nav .nav-item:hover .sub-menu{top:100%;opacity:1;color:#000;visibility:visible}
.navbar-nav .nav-item .sub-menu{width:200px;background-color:#fff;-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);box-shadow:0 0 20px 0 rgba(0,0,0,0.1);position:absolute;top:110%;left:0;opacity:0;visibility:hidden;-webkit-transition:all .3s ease-out 0;-moz-transition:all .3s ease-out 0;-ms-transition:all .3s ease-out 0;-o-transition:all .3s ease-out 0;transition:all .3s ease-out 0}
.navbar-nav .nav-item .sub-menu li{display:block}
.navbar-nav .nav-item .sub-menu li a{display:block;padding:8px 20px;color:#868686}
.navbar-nav .nav-item .sub-menu li a.active,.navbar-nav .nav-item .sub-menu li a:hover{padding-left:25px;color:#000}
.navbar-nav .sub-nav-toggler{display:none}
.navbar-nav .sub-nav-toggler span{width:8px;height:8px;border-left:1px solid #868686;border-bottom:1px solid #868686;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);position:relative;top:-5px}

.navbar-btn img{width:35px;margin-right:5px;margin-left:30px}
.navbar-btn strong{ font-size: 13px;}
.sticky .navbar-toggler .toggler-icon{background-color:#868686}
.sticky .navbar-nav .nav-item a{color:#868686}
.sticky .navbar-nav .nav-item.active > a{color:#D82018}

.sticky .navbar-nav .nav-item:hover > a{color:#000}


@media only screen and (min-width: 768px) and (max-width: 991px) {
	.navbar-collapse{position:absolute;top:100%;left:0;width:100%;background-color:#fff;z-index:9;-webkit-box-shadow:0 15px 20px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 15px 20px 0 rgba(0,0,0,0.1);box-shadow:0 15px 20px 0 rgba(0,0,0,0.1);padding:5px 12px}
	.navbar-nav .nav-item{margin:0}
	.navbar-nav .nav-item a{display:block;padding:4px 0;font-size:20px;text-align:center;color:#868686}
	.navbar-nav .nav-item:hover .sub-menu{top:0}
	.navbar-nav .nav-item .sub-menu{position:relative;width:100%;top:0;display:none;opacity:1;visibility:visible}
	.navbar-nav .sub-nav-toggler{display:block;position:absolute;right:0;top:0;background:none;color:#868686;font-size:18px;border:0;width:30px;height:30px}
	.navbar-btn{position:absolute;right:50px}
}
@media (max-width: 767px) {
	.navbar-collapse{position:absolute;top:100%;left:0;width:100%;background-color:#fff;z-index:9;-webkit-box-shadow:0 15px 20px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 15px 20px 0 rgba(0,0,0,0.1);box-shadow:0 15px 20px 0 rgba(0,0,0,0.1);padding:5px 12px}
	.navbar-nav .nav-item{margin:0}
	.navbar-nav .nav-item a{display:block;padding:5px 0;font-size:20px;text-align:center;color:#868686}
	.navbar-nav .nav-item:hover .sub-menu{top:0}
	.navbar-nav .nav-item .sub-menu{position:relative;width:100%;top:0;display:none;opacity:1;visibility:visible}
	.navbar-nav .sub-nav-toggler{display:block;position:absolute;right:0;top:0;background:none;color:#868686;font-size:18px;border:0;width:30px;height:30px}
	.navbar-btn{position:absolute;right:50px}
}
/***NAV兩行*****/
@media only screen and (min-width: 990px) and (max-width: 1199px) {
	.navbar-area{background-color: #FFFFFF; height: 160px;}
	.navbar-brand img{ max-height: 60px; margin: 0;}
	.nav-logo{ margin: 0 auto;}
	.navbar-collapse{position:absolute;top:100%;left:0;width:100%;background-color:#fff;z-index:9;-webkit-box-shadow:0 0 0 0 rgba(0,0,0,0.1);-moz-box-shadow:0 0 0 0 rgba(0,0,0,0.1);box-shadow:0 0 0 0 rgba(0,0,0,0.1);padding:5px 12px;display: block;}
	.main-area{padding-top: 140px; padding-bottom: 50px;}
	.navbar-nav .nav-item{margin-right:30px}
}



/**back-to-top**/
.back-to-top{font-size:20px;color:#fff;position:fixed;right:20px;bottom:20px;width:40px;height:40px;line-height:40px;border-radius:5px;background:-webkit-linear-gradient(left,#D82018 0%,#2e82ef 100%);background:-o-linear-gradient(left,#D82018 0%,#2e82ef 100%);background:linear-gradient(to right,#D82018 0%,#2e82ef 100%);text-align:center;z-index:99;-webkit-transition:all .3s ease-out 0;-moz-transition:all .3s ease-out 0;-ms-transition:all .3s ease-out 0;-o-transition:all .3s ease-out 0;transition:all .3s ease-out 0;display:none}
.back-to-top:hover{color:#fff}