/* ==========================================================================
主要設定
========================================================================== */
img { max-width: 100%; height: auto;}
p { font-size: 17px; line-height: 1.6; letter-spacing: .6px; }
a { color: inherit; transition: .5s;}
a:hover,a:active,a:link,a:visited{text-decoration: none; outline: none;color: inherit; }
.text-big { font-size: 130%;}
hr { border-color: #cbcbcb;}
h1, h2, h3, h4, h5{margin-bottom: 6px;margin-top: 6px;line-height: 1.4em;letter-spacing: .8px;}
h1{font-size: 32px;letter-spacing: 1px;margin-top: 0px;}
h2{font-size: 28px;}
h3{font-size: 24px;}
h4{font-size: 20px; font-weight: normal;}
h5{font-size: 18px; font-weight: normal;}
section {padding: 50px 0;}
img{max-width: 100%;}
.mobile{display: none;}
.pc{display: block;}
.light_bg {background: url(../images/O-bg.png) repeat;}
.purple{background-color: #805093;}
.orange{background-color: #f39800;}
/* ==========================================================================
.pageheader 分區標題
========================================================================== */
.pageheader {
	margin:20px 0;
	text-align: center;
}
.pageheader h2{display: inline-block; width: 25%;}
.pageheader h2.orange {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.175;
    letter-spacing: 0.075em;
	color: #fff;
	background-color: #f39800;
	padding: 10px 20px;
	border-radius: 50px;
}
.pageheader h2.white {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.175;
    letter-spacing: 0.075em;
	color: #f39800;
	background-color: #fff;
	padding: 10px 20px;
	border-radius: 50px;
}
.pageheader h3 {
	font-size: 24px;
	line-height:1.5;
	font-weight: bold;
	margin-bottom: -10px;
	color: #805093;
}
.pageheader h4 {
    font-size: 36px;
    text-align: center;
	font-weight: 600;
	margin-bottom: 20px;
}
.pageheader p {
	font-size: 17px;
    margin-top: 15px;
	color: #626262;
}
/* ==========================================================================
.header 首頁header
========================================================================== */
header {
	background-image:url(../images/O-bg.png);
	position: relative;
    overflow: hidden;
	height: 680px;
	padding-top: 80px;
}
header .container{
	width: 75%;
}
header .bar {
    position: absolute;
    background: url(../images/bar.png) no-repeat;
    bottom:-1px;
    left:0;
    width: 100%;
    height: 59px;
    z-index: 3;
	background-position: center bottom;
}
header .wang{
	position: relative;
	padding-top: 20px;
}
header .wang:before{
	content: '';
    position: absolute;
    background: url(../images/author.svg) no-repeat;
   	top: 15%;
    right: 12%;
    z-index: 1;
    width: 200px;
    height: 218px;
}
header .top-video{
	padding: 10px;
	margin-right:100px;
	background-color: #2a59a7;
	border-radius: 10px;
	z-index: 3;
	position: relative;
}
.booklogo {
	position: relative;
	left: 0%;
	top: 0%;
	width: 80%;;
}
.booklogo .flash {
	overflow: hidden;
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
}
.booklogo .flash:after {
	content: '';
	position: absolute;
	height: 400%;
	width: 30%;
	top: -110%;
	left: 0;
	opacity: 0.6;
	background-image: url(../images/light01.png);
	background-size: 100%;
	background-position: center;
	animation-name: flashLight;
	-webkit-animation-name: flashLight;
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-delay: 0;
	-webkit-animation-delay: 0;
}
.booklogo img {
	width: 100%;
	z-index: 1;
}
 @-webkit-keyframes flashLight {
	from {
	left: -50%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0.3;
	}
	to {
	left: 100%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0.6;
	}
}
 @keyframes flashLight {
	from {
	left: -50%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0.3;
	}
	to {
	left: 100%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: 0.6;
	}
}
.motion{
	animation: move 2s ease-in-out infinite ;
	-webkit-animation: move 2s ease-in-out infinite;
	-o-animation: move 2s ease-in-out infinite;
	-moz-animation: move 2s ease-in-out infinite;
}
/* ==========================================================================
 button
========================================================================== */
.pink-bt{background: #e4007f; color: #fff;}
a:hover .pink-bt{background: #ec0084;}

/* ==========================================================================
 新書主打
========================================================================== */
#newbook .point h3{padding: 100px 0; color: #000;}
#newbook .point h3 strong{font-size: 28px; color: #fff;}
#newbook .star{
	position: relative;
}
#newbook .star:before{
	content: '';
    position: absolute;
    background: url(../images/y-star.svg) no-repeat;
   	top: 15%;
    left: -15%;
    z-index: 1;
    width: 200px;
    height: 120px;
}
#newbook .star:after{
	content: '';
    position: absolute;
    background: url(../images/b-star.svg) no-repeat;
   	bottom: 5%;
    right: 0%;
    z-index: 1;
    width: 90px;
    height: 90px;
}
/* ==========================================================================
 套書簡介
========================================================================== */
.godown{
	background-color: #f39800;
	border-radius:50%; 
	padding: 5px;
	position: relative;
}
.gogift{
	background-color: #ea5b50;
	border-radius:50%; 
	padding: 5px;
	position: relative;
}
.godown img, .gogift img{border-radius:50%;}
.book ul li{display: inline;}
.book ul li:nth-child(2) .goup, .book ul li:nth-child(4) .goup{margin-top: 50px;}
.introTitle{
	position: relative;
	display: block;
	/* border: 1px solid seagreen; */
	height: 100px;
}
.introTitle .hat{
	position: absolute;
	width: 80%;
	z-index: 10;
	top: 10%;
	right: 10%;
}
.book h3{font-size: 18px;
	color: #805093; 
	letter-spacing: .1px; 
	margin-top: 10px; 
	margin-bottom:3px;
}
.book h3 strong{font-size: 22px;}
.book p{margin: 3px 0;}
.buy strong{color: yellow; font-size: 26px;}
.buy span{margin-left: 5px; text-decoration: line-through;}
.gobuy {margin: 0 auto;}
.gobuy .buy{
	position: relative;
	border-radius: 10px;
	padding: 10px 10px 10px 200px;
	margin-top: 80px;
	width: 400px;
}
.gobuy .buy:before{
	content: '';
    position: absolute;
	background: url(../images/box-1.png) 0 0 no-repeat;
	background-size: contain;
	display: block;
   	top: -100%;
    left: 3%;
    z-index: 1;
    width: 180px;
    height: 210px;
}
/* ==========================================================================
 新書活動
========================================================================== */
#activity{position: relative;}
#activity:before{
	content: '';
    position: absolute;
	background: url(../images/img-1.png) 0 0 no-repeat;
	background-size: contain;
	display: block;
	bottom: 0%;
	right: 10%;
    z-index: 1;
    width: 300px;
	height: 300px;
}
#activity .pageheader p{color: #FFF;}
#activity .pageheader p strong{color:yellow;}
#activity .date{
	background-color: #2a59a7;
	padding: 20px;
	color: #FFF;
	font-size: 28px;
	font-weight: 500;
	text-align: center;
}
#activity .join{
	background-color: #FFF;
	padding: 25px;
	text-align: center;
}
.session button{
	border: none;
	border-radius: 50px;
	background-color: #e4007f;
	color: #FFF;
	padding: 10px;
	width: 85%;
}
.session button:before{
	content: '\f00c';
	font-family: 'icomoon';
    position: absolute;
	background-color: #FFF;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	display: inline-block;
	color: #e4007f;
	font-size: 30px;
	line-height: 50px;
	left: 18%;
}
.session button p{
	display: inline-block;
	font-size: 30px;
	line-height: 50px;
	padding-left: 15px;
}
#activity .ps p{
	border-left:5px solid yellow;
	padding: 5px 0 5px 15px;
	color: #FFF;
	margin: 20px 0;  
}
#activity .ps p strong{
	color: yellow;
}
.more button.add{
	border: none;
    border-radius: 50px;
    background-color: #c4d420;
    color: #000;
    width: 18%;
    padding: 10px;
    margin-top: 5px;
}
.more button.add p{
	display: inline-block;
	font-size: 22px;
	line-height: 1.2;
	padding-left: 10px;
}
.more button:before{
	content: '\f00c';
	font-family: 'icomoon';
	background-color: #FFF;
	width: 40px;
	height: 40px;
	border-radius: 25px;
	display: inline-block;
	color: #c4d420;
	font-size: 22px;
	line-height:40px;
	left: 0%;
	z-index: 99;
}
.more{margin-top: 20px;}
.more img{float: left; width: 200px;}
.more ul{
	color: #FFF;
	margin-left: 15px;
}
.more ul li p{line-height:1.8;}
.more ul p strong{
	border-right: 2px solid #f39800;
	padding-right: 10px;
	margin-right: 10px;
}
/* ==========================================================================
 說書影片
========================================================================== */
#bookvideo .play-video{border-radius: 5px;}
/* ==========================================================================
 本書特色
========================================================================== */
#features p{color: #000;}
#features .pageheader p strong{color: #fff;}
#features{position: relative;}
#features:before{
	content: '';
    position: absolute;
	background: url(../images/img-2.png) 0 0 no-repeat;
	background-size: contain;
	display: block;
	bottom: 15%;
	left: 0%;
    z-index: 1;
    width: 297px;
	height: 401px;
}
.mon p{height: 150px;}
.tomon{
	border-radius: 10px;
	background-color: #FFF;
	border: 3px solid #f39800;
	padding: 15px;
	margin-top: 50px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.8;
}
/* ==========================================================================
 Carousel
========================================================================== */
.mainCarousel {position: relative; margin-top: 30px; padding: 20px;}
.mainCarousel .owl-nav{
	width: 100%;
    top: 45%;
	position: absolute;
	color: #805093;
}
.mainCarousel .owl-nav button.owl-next span.icon-next{
	right:5%;
	position: absolute;
}
.mainCarousel .owl-nav button {
    color: #805093;
	opacity: 0.8;
	z-index: 10;
}
.mainCarousel .owl-nav button span { font-size: 50px;}
.mainCarousel .owl-nav button.owl-prev {
	left: -50px;
	position: absolute;
}
.mainCarousel .owl-nav button.owl-next {
	right: -50px;
	position: absolute;
}
.owl-theme .owl-dots{
	padding: 10px 0;
	text-align: center;
}
.mainCarousel .owl-dot span {
    background: #dadada;
}
.mainCarousel .owl-dot.active span, .mainCarousel .owl-dot:hover span {
    background: #805093;
}
/* ==========================================================================
 文章模組
========================================================================== */
.articleItem {
    margin: 5px 0 20px 0;
	background-color: #FFF;
    box-sizing: border-box;
}
.articleItem .pic {
    overflow: hidden;
}
.articleItem .pic img{
	cursor: pointer;
	transition: all 0.6s;
}
a:hover .articleItem .pic img {
	transform: scale(1.2);
}
.articleItem .caption h2 {
	font-size: 21px;
	line-height: 1.4;
	font-weight: 500;
	margin: 10px 0 5px;
	color: #373737;
	height: 55px;
}
.articleItem .caption p {
	font-size: 16px;
	line-height: 1.6;
	color: #838383;
}
a:hover .articleItem .caption h2 {
	color: #805093;
}
#article .articleItem .caption {
	padding: 0 12px 10px 12px;
}

/* ==========================================================================
down_btn
========================================================================== */
.down_btn { 
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-decoration: none;
    /*padding-top: 5vh; */
}
.down_btn span {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border-radius: 100%;
	background-color: #000;
}
a.anchor span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
a.anchor span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgba(255,255,255,.1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: sdb 3s infinite;
    animation: sdb 3s infinite;
    box-sizing: border-box;
}
.down_btn span {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border-radius: 100%;
	background-color: #ffffff9c;
}
a.anchor span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
a.anchor span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgba(0,0,0,.1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: sdb 3s infinite;
    animation: sdb 3s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
    0% {opacity: 0;}
    30% {opacity: 1;}
    60% {box-shadow: 0 0 0 40px rgba(255,255,255,.2);opacity: 0;}
    100% {opacity: 0;}
}
@keyframes sdb {
    0% {opacity: 0;}
    30% {opacity: 1;}
    60% {box-shadow: 0 0 0 40px rgba(255,255,255,.2);opacity: 0;}
    100% {opacity: 0;}
}
/* ==========================================================================
social-icons 
========================================================================== */
.social-icons {
	margin:10px 10px 0 ;
	float: left;
}
.social-icons ul {
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}  
.social-icons li {
   display: inline-block;
   padding: 0 5px;
}
.social-icons li {
  width: 35px;
  height: 35px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  background-color: #ffffff;
}
.social-icons li a i{ font-size: 20px;line-height: 35px;}
.social-icons li:nth-child(1){color: #3c5b9b; line-height: 35px;}
.social-icons li:nth-child(2){color: #00c300; line-height: 35px;}
/* .social-icons li:nth-child(3){background-color: #e4007f; line-height: 45px;} */

.social-icons li:hover:nth-child(1),.social-icons li:hover:nth-child(2){
	opacity: 0.9;
	text-decoration: none;
}
/* ==========================================================================
footer
========================================================================== */
footer {
	padding: 25px 0 25px 0;
	text-align: center;
	background: #2a59a7;
	display: inline-block;
	width: 100%;
}
footer p {
	font-size:13px;
	color:#FFF;
	line-height: 1.6;
	margin: 5px 0 10px 0;
}
footer p a {
	text-decoration: underline !important;
}
footer p a:hover {
	text-decoration: none !important;
}
/* ==========================================================================
back-top
========================================================================== */
#back-top {
	position: fixed;
	bottom: 50px;
	right: 20px;
	z-index: 20;
}
#back-top a {
	width: 40px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
#back-top span {
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 7px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	background-color: rgba(0, 0, 0, 0.6);
}
#back-top span i {
	font-size: 24px;
	vertical-align: middle;
	line-height: 40px;
	color: #FFF;
}
#back-top a:hover span {
	background-color: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
動畫
========================================================================== */
.rotate{
	-webkit-animation: star 4s infinite;
	-o-animation: star 4s infinite;
	-moz-animation: star 4s infinite;
	animation: star 4s linear infinite;
}
@keyframes star{
	0%{transform:rotateZ(0);}
	100%{transform:rotateZ(360deg);}
}
.motion{
	animation: move 2s ease-in-out infinite ;
	-webkit-animation: move 2s ease-in-out infinite;
	-o-animation: move 2s ease-in-out infinite;
	-moz-animation: move 2s ease-in-out infinite;
}
@keyframes move {
	0% { 
	-webkit-transform: translateY(0px);
    transform: translateY(0px);
	}
	50% { 
	-webkit-transform: translateY(10px);
    transform: translateY(10px);
	}
	100%{ 
	-webkit-transform: translateY(0px);
    transform: translateY(0px);
	}
}
.motion2{
	animation: move2 2s ease-in-out infinite ;
	-webkit-animation: move2 2s ease-in-out infinite;
	-o-animation: move2 2s ease-in-out infinite;
	-moz-animation: move2 2s ease-in-out infinite;
}
@keyframes move2 {
	0% { 
	-webkit-transform: translateY(0px);
    transform: translateY(10px);
	}
	50% { 
	-webkit-transform: translateY(10px);
    transform: translateY(0px);
	}
	100%{ 
	-webkit-transform: translateY(0px);
    transform: translateY(10px);
	}
}