@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500,700,900|Roboto:400,700,900&display=swap&subset=chinese-traditional");
* {outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;}
body {margin:0;padding:0;font-family:"Noto Sans TC", "Roboto", "微軟正黑體", "Helvetica", sans-serif;color:#1d1200;font-weight:400;background-color:#ffffe6;}
a {text-decoration:none;outline:none;}
img{border:0;vertical-align:middle;}
ul,li {list-style:none;}
p{font-size:17px;line-height:26px;letter-spacing:.2px;margin-bottom:.25em;text-align:justify;}
@media only screen and (max-width:991px){
  p{font-size:16px;line-height:26px;}
}

#wrap{width:100%;margin:0 auto;overflow:hidden;padding-top:56px;}
/*PC or Mobile*/
.viewPc{display:block;}
.viewMobile{display:none;}
@media screen and (min-width:992px){
  .viewPc{display:block;}
  .viewMobile{display:none;}
}
@media screen and (max-width:991px) {  
  .viewPc{display:none;}
  .viewMobile{display:block;}
}

/********** 共用 **********/
.pos_r{position:relative;}
.spacebox{margin-bottom:0.5em;}
.bgyel{background-color: #ffff99;}
.bgbook5e{background:#d3eded url("../images/bgbook5e.png") no-repeat center top;}
.bgbook5e2{background:#ffffe6 url("../images/bgbook5e2.png") no-repeat center top;}
.carousel-control-next,.carousel-control-prev{opacity:1;}
.carousel-control-next-icon, .carousel-control-prev-icon{width:2rem;height:2rem;}
.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f47' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");}
.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f47' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");}
.carousel-inner{padding:0 1% 1%;}
.carousel-item > img{width:100%;-webkit-box-shadow:1px 2px 5px rgba(0, 0, 0, 0.3);box-shadow:1px 2px 5px rgba(0, 0, 0, 0.3);}

/********** nav **********/
.clearfix:after {clear:both;display:block;visibility:hidden;height:0;content:"."}
.clearfix {zoom:1}
.fleft{float:left}
.fright{float:right}
.menu{position:fixed;width:100%;z-index:100;-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);padding:10px 15px;background-color:rgba(255,255,255,0.95);;line-height:0}
.menu .logo {display:inline-block}
.menu .logo img {width:auto;height:30px}
.login_btn {-webkit-transition:.2s ease;-o-transition:.2s ease;transition:.2s ease;display:inline-block;padding:6px}

#menu_icon {width:36px;height:28px;position:relative;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);margin-top:3px;margin-left:15px;cursor:pointer;display:block}
#menu_icon span {display:block;position:absolute;height:2px;border-radius:2px;width:100%;background:#48342b;opacity:1;left:0;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
#menu_icon span:first-child {top:0px;-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}
#menu_icon span:nth-child(2) {top:50%;margin-top:-1px}
#menu_icon span:nth-child(3) {bottom:0;-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}
#menu_icon.open span:first-child {-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
#menu_icon.open span:nth-child(2) {width:0%;opacity:0}
#menu_icon.open span:nth-child(3) {-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}

@media only screen and (min-width:1170px) {
    #menu_icon {display:none}
}
#main{width:100%;max-width:1200px;margin:0 auto;}
@media only screen and (min-width:768px) {
    #main {padding-left:20px;padding-right:20px}
}

.group_anchor_menu {height:40px;margin:0 auto;border-radius:10px;}
.anchor_menu {position:relative;text-align:center;width:100%;max-width:960px;margin:0 auto;padding:0;border-radius:10px;z-index:100;display:none}
.anchor_menu .anchor {display:inline-block;width:15%;height:42px;line-height:42px;text-align:center;color:#1d1200;font-size:1.18em;letter-spacing:.5px;font-weight:400;/*border-right:2px solid #333;*/}
.anchor_menu .anchor:last-child{border-right:0;}
.anchor_menu a.anchor {color:#1d1200;}
.anchor_menu a.anchor:hover {color:#e83d52;}
.anchor_menu.fixed {position:fixed;top:0;}

@media only screen and (max-width:1169px) {
	.group_anchor_menu {display:none}
}
@media only screen and (min-width:1170px) {
	.anchor_menu {display:block}
}

.m_anchor_menu {text-align:center;padding:20px;display:block;position:fixed;top:56px;right:-100%;background:rgba(255, 232, 122, 0.95);width:100%;z-index:50;height:100%;-webkit-transition:.8s ease;-o-transition:.8s ease;transition:.8s ease}
.m_anchor_menu .anchor {display:block;width:85%;margin:0 auto 5px;font-size:1.22em;line-height:3em;color:#1d1200;border-bottom:2px dotted #e0c54e;}
.m_anchor_menu a.anchor {color:#1d1200;}
.m_anchor_menu.open {right:0}
@media only screen and (min-width:1170px) {
    .m_anchor_menu {display:none}
}


/********** 刊頭 **********/
#kv{width:100%;background:#ffffe6 url('../images/bg01.png') center bottom no-repeat;overflow:hidden;}
#kv > .mainkv{width:100%;max-width:1280px;margin:0 auto;padding-top: 140px;}
#kv > .mainkv-m{display:none;}
.mainkv .pos_r{padding-bottom:45.6%}
.title, img.title2, img.ex-title, img.ex-img, img.pu01{position:absolute;}
.title{z-index: 10;width: 51.5%;left: 13px;top: -51px;	width: 802px;}
.mainkv .title > img{max-width:100%;}
.mainkv .title > img:nth-child(2){margin:0 22px;}
img.title2{z-index: 8;width: 1207px;left: -360px;top: 205px;}
img.ex-title{width: 707px;z-index: 6;right: -240px;	top: -110px;}
img.ex-img{width: 546px;z-index: 5;	left: 150px;bottom: 40px;}

img.pu01{z-index: 1;width: 472px;left: 277px;top: -109px;
	animation-name: example;
	animation-duration: 5s;
	animation-delay: 2s;
	animation-iteration-count: 3;
	animation-direction:infinite;
}
/* The animation code */
@keyframes example {
  0% {opacity:0.2;} 20% {opacity:1;} 50% {opacity:0.7;}100% {opacity:1;}
}

@media only screen and (max-width:1200px) {
	#kv > .mainkv{max-width:100%;padding:0 10px 0 20px;}
	.title{width:100%;left:30%;top:33%;}
	img.ex-title{width:6.8%;max-width:6.8%;left:1.2%;top:5.8%;}
}

@media only screen and (max-width:1024px) {
	#kv > .mainkv{display:none;}
	#kv > .mainkv-m{display:block;}
}

/***保固頁***/

#cardpage{width: 60%;overflow: hidden;background-color: #FFF;margin: 3% auto;padding: 2%;text-align: center;}
#cardpage table{padding: 1%;width: 100%;}
.illg{margin: 2% auto; width: 450px;max-width: 100%;}

@media only screen and (max-width:991px){
	#cardpage{width: 88%;overflow: hidden;background-color: #FFF;margin: 2% auto;padding: 5%;margin: 5% auto;text-align: center;}
	#cardpage table{padding: 1%;width: 100%;}
}

@media only screen and (max-width:575px){
	#cardpage{width: 96%;overflow: hidden;background-color: #FFF;padding: 5%;margin: 5% auto;text-align: center;}
	#cardpage table{padding: 1%;width: 100%;}
	h4{font-size:1.5em;}
}

/********** 區塊 **********/
#pen,#pen2,#pen3,#pen4,#b5e,#b5e2,#b5e3,#b5e4,#b5e5,#b5e6,#b6c, #emotions, #qa, #event, #booklist, #gamelist{width:100%;}
img.ptitle{max-width:45%;height:auto;margin:0 auto 30px;vertical-align:middle;}
img.ptitle2{max-width:50%;height:auto;margin:0 auto 30px;vertical-align:middle;}
img.ptitle3{max-width:55%;height:auto;margin:0 auto;vertical-align:middle;}
img.ptitle4{max-width:50%;height:auto;margin:0 auto;vertical-align:middle;}
#pen,#pen2,#pen3,#pen4,#b5e2,#b5e3,#b5e4,#b5e5,#b5e6{padding:35px 0 85px;}
#b6c{padding:35px 0 0;}
#b5e{padding:35px 0 0;}
#qa{position:relative;padding:25px 0 105px;}
#qa::before{content:'';width:100%;height:40px;position:absolute;top:-40px;background-image:url('../images/curve2.png');background-size:cover;}
#event{padding:30px 0 85px;}
#event > .container{border:4px solid #ffa5c5;}
#booklist{position:relative;padding:25px 0 0;}
#booklist::before{content:'';width:100%;height:40px;position:absolute;top:-40px;background-image:url('../images/curve3.png');background-size:cover;}


@media only screen and (max-width:575px){
  .container{max-width:96%;margin:0 auto;}
  img.ptitle{max-width:100%;margin:0 auto 20px;}
  img.ptitle2{max-width:100%;margin:0 auto 20px;}
  img.ptitle3{max-width:100%;margin:0 auto;}
 img.ptitle4{max-width:70%;margin:0 auto;}
  #event > .container{max-width:92%;margin:0 auto;}
  #pen,#pen2,#pen3,#pen4,#b5e2,#b5e3,#b5e4,#b5e5,#b5e6,#b6c{padding:15px 0 60px;}
　#b5e{padding:15px 0 0;}
  #booklist{padding:0;}
  #qa{padding:0 0 50px;}
  #event{padding:30px 0 75px;}
  #gamelist{padding:35px 0 50px;}
}

@media only screen and (min-width:576px){
  .container{max-width:96%;margin:0 auto;}
/*  img.ptitle{max-width:100%;margin:0 auto 20px;}*/
  #pen,#pen2,#pen3,#pen4{padding:25px 0 60px;}
  #booklist{padding:25px 0 0;}
  #qa{padding:15px 0 50px;}
  #event{padding:30px 0 75px;}
  #gamelist{padding:65px 0 70px;}
}
@media only screen and (min-width:768px){
  #qa{padding:25px 0 80px;} 
  #event{padding:30px 0 85px;}
  #gamelist{padding:65px 0 70px;}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
  #gamelist{padding:65px 0 70px;}
}
@media only screen and (min-width:1170px) {
  #pen,#pen2,#pen3,#pen4{padding:50px 0 85px;}
}
@media only screen and (min-width:1400px) {
 .container{max-width:1140px;}
  #qa::before{height:55px;top:-55px;}
  #booklist::before{height:55px;top:-55px;}
}


/********** 文字 **********/
.ptxt-p2{padding:0 2em;}
.red{color: #df2731;}
.orange{color: #ff3300;font-weight: 700;}
p.yblock, p.yblock2{display:inline-block;font-size:1.15em;font-weight:500;letter-spacing:0.5px;text-align:center;background-color:#ffed61;padding:2px 5px;margin-bottom:1em;}
p.yblock2{margin-right:1em;margin-bottom:.25em;letter-spacing:.25px}
span.name-b{font-size:2.55em;font-weight:700;letter-spacing:0.5px;}
p.txt_title{font-size:1.6em;font-weight:700;letter-spacing:0.5px;margin-bottom:.5em;line-height:1.25}
p.txt_title span{letter-spacing:-.25em;}
p.txt_s{font-size:1em;font-weight:400;letter-spacing:0.5px;margin-bottom:.5em;line-height:1.5;}
.mark, mark{padding:0 .1em;background-color:#ffeb8e;}
.heightlight {
	font-size:1.2rem;
    font-weight:bold;
    background:-webkit-gradient(linear, left bottom, left top, from(#ffeb8e), color-stop(50%, #ffeb8e), color-stop(50%, rgba(255, 235, 142, 0)), to(rgba(255, 235, 142, 0))) bottom center;
    background:-webkit-linear-gradient(bottom, #ffeb8e 0%, #ffeb8e 50%, rgba(255, 235, 142, 0) 50%, rgba(255, 235, 142, 0) 100%) bottom center;
    background:-o-linear-gradient(bottom, #ffeb8e 0%, #ffeb8e 50%, rgba(255, 235, 142, 0) 50%, rgba(255, 235, 142, 0) 100%) bottom center;
    background:linear-gradient(0deg, #ffeb8e 0%, #ffeb8e 50%, rgba(255, 235, 142, 0) 50%, rgba(255, 235, 142, 0) 100%) bottom center
}
p.txt01{margin-bottom:.8em;letter-spacing:.5px}
p.txt_title2{color:#e8446c;font-size:1.5em;font-weight:700;letter-spacing:0.5px;margin-bottom:.5em;}
p.txt_title2 span{letter-spacing:-.25em;}
p.introtxt{font-size:.95em;line-height:27px;letter-spacing:.5px;padding-right:1em;}
p.centertxt{margin-bottom:.25em;text-align:center;}
span.name-s{font-size:.9em;font-weight:500;letter-spacing:0.5px;}
p.txt-smo{font-size:.9em;letter-spacing:0;line-height:1.3em;margin-bottom: 2%;}
.txt_title2{font-size:1.1em;font-weight:700;letter-spacing:0.5px;}

@media only screen and (max-width:1199px) {
  p.centertxt{letter-spacing:0.75px;text-align:center;}
}
@media only screen and (max-width:991px) {
  p.txt_title2{letter-spacing:0.15px;}
}
@media only screen and (max-width:767px) {
  p.yblock{margin-bottom:.5em;}
  p.introtxt{line-height:22px;padding-right:0;}
  p.txt_s{font-size:1em;font-weight:400;letter-spacing:0;margin-bottom:.5em;line-height:1.5;}
}
@media only screen and (max-width:575px) {
span.name-b{font-size:1.55em;font-weight:700;letter-spacing:0.5px;}
  p.txt_title{font-size:1.4em;letter-spacing:0;line-height:1.5}
  p.txt_title2{font-size:1.25em;letter-spacing:0;line-height:1.35}
  p.centertxt{letter-spacing:0.75px;text-align:center;}
  p.txt-smo{font-size:.75em;letter-spacing:2;line-height:1.2em;margin-bottom: 2%;}
.heightlight {
	font-size:1rem;
    font-weight:bold;
    background:-webkit-gradient(linear, left bottom, left top, from(#ffeb8e), color-stop(50%, #ffeb8e), color-stop(50%, rgba(255, 235, 142, 0)), to(rgba(255, 235, 142, 0))) bottom center;
    background:-webkit-linear-gradient(bottom, #ffeb8e 0%, #ffeb8e 50%, rgba(255, 235, 142, 0) 50%, rgba(255, 235, 142, 0) 100%) bottom center;
    background:-o-linear-gradient(bottom, #ffeb8e 0%, #ffeb8e 50%, rgba(255, 235, 142, 0) 50%, rgba(255, 235, 142, 0) 100%) bottom center;
    background:linear-gradient(0deg, #ffeb8e 0%, #ffeb8e 50%, rgba(255, 235, 142, 0) 50%, rgba(255, 235, 142, 0) 100%) bottom center
}
}

/********** pen 自主學習特色 **********/
.resumes{width:100%;margin:0 auto;display:flex;justify-content:flex-start;align-items:center;}
.resumes-L{width:35%;}
.resumes-R{width:65%;}
.block6{width: 31%;background-color: #ffd155;border-radius:10px;padding: 1.5%;margin: 0.5%;float: left;}
.ex-title2{display:flex;justify-content:center;align-items:center;margin-bottom:15px;}

img.ex-img2{max-width:80%;margin:1% auto;vertical-align:middle;}
img.ex-img2-2{max-width:80%;margin:1% auto;vertical-align:middle;}
img.ex-img3{max-width:100%;margin:1% auto;vertical-align:middle;border-radius: 10px;}

.intro{width:90%;margin-left:10%;}


@media only screen and (max-width:1199px) {
  img.ex-img3{width:100%;max-width:100%;}
 
}
@media only screen and (max-width:991px) {
.resumes{flex-direction:column;justify-content:center;width:96%;height:auto;padding:3% 0 3.5%;}
.resumes-L{width:100%;margin:0 auto 35px;}
.resumes-R{width:100%;}
.block6{width: 32%;background-color: #ffd155;border-radius:10px;padding: 2%;margin: 0.5%;float: left;}
.intro{width:90%;margin:0 auto 15px;}

img.ex-img3{max-width:100%;}

  
}
@media only screen and (max-width:767px) {
img.ex-img3{width:100%;max-width:100%}

.resumes{padding:5% 0 3.5%;}
.resumes-L{margin:0 auto 25px;text-align: center;}
.resumes-R{width:100%;margin: 0 auto;text-align: center;}
.block6{width: 48%;background-color: #ffd155;border-radius:10px;padding: 2%;margin: 1%;float: left;}
}
@media only screen and (max-width:575px) {
	.resumes{padding:1% 0 1.5%;}
	img.ex-img2{max-width:65%;margin:0 auto;vertical-align:middle;}
	img.ex-img2-2{max-width:98%;margin:0 auto;vertical-align:middle;}
}

/********** pen2 6大貼心設計 **********/

.flim{width:60%;margin:20px auto;border: solid #fff 6px;border-radius: 10px; box-shadow:3px 2px 4px rgba(57,57,57,0.3);}
.flim2{width:69%;margin:0 auto;border: solid #ccc 6px;border-radius: 10px;}


img.flimg1{position: absolute;}
.block6s{width: 31%;padding: 1%;margin: 0.5%;float: left;position: relative;}
.b6sg{width:110px;height: 110px;margin: 0 0 10px 0; border-radius: 55px;background-color: #fbe108;text-align: center;font-size: 1.7em;font-weight: 700;color: #3a1819;line-height: 110px; float: left;}
.b6sg-R{width: 100%;float: right;position: absolute;padding:10px 0 0 120px;font-size: 1.05em;}

@media only screen and (max-width:1199px) {
	
}
@media only screen and (max-width:991px) {
.flim{width:90%;margin:0 auto;border: solid #fff 6px;border-radius: 10px; box-shadow:3px 2px 4px rgba(57,57,57,0.3);}
.flim2{width:92%;}
img.flimg1{position: absolute;left: -50px;top: -80px;}
	
}
@media only screen and (max-width:575px) {

.block6s{width: 49%;padding: 0.5%;margin: 0.3%;float: left;position: relative;}
.b6sg{width:50px;height: 50px;margin: 0 0 5px 0; border-radius: 25px;background-color: #fbe108;text-align: center;font-size: .9em;font-weight: 700;color: #3a1819;line-height: 50px; float: left;}
.b6sg-R{width: 100%;float: right;position: absolute;padding:5px 0 0 55px;font-size: .7em;line-height: 1.1em;}
img.flimg1{display: none;}
	
}

/**********pen3 魔法筆產品與功能***********/
.resumes-L3{width:50%;}
.resumes-R3{width:50%;letter-spacing: 5px;padding-top:4%;}
.resumes-R3 p{letter-spacing: 5px;line-height: 35px;} 
.resumes-R3 h5{line-height: 30px;} 
.circle3{width: 250px;height: 250px; background-color:#fbe108;border-radius: 50%;margin: 2% 5%;padding: 2% 1% 1%; text-align: center;font-size: 1.1em;font-weight: 500;color: #3a1819;line-height: 40px; float: left;}
.resumes-R3m{width:100%;letter-spacing: 5px;margin: 2%;}

@media only screen and (max-width:1199px) {
	.circle3{margin: 2% 3%;}
}
@media only screen and (max-width:991px) {
	.circle3{margin: 2% 1%;}
	
}
@media only screen and (max-width:575px) {
	.resumes-L3{width:100%;float: left;}
	.resumes-R3{width:100%;letter-spacing: 2px;padding:0.5% 1%;}
	.resumes-R3 p{letter-spacing: 2px;line-height: 30px;} 
	.circle3{width: 105px;height: 105px; background-color:#fbe108;border-radius: 50%;margin: 2% auto;padding: 4% 5px; text-align: center;font-size: .7em;font-weight: 500;color: #3a1819;line-height: 20px; float: left;}
	.circle3 img{width: 90px;}
	.resumes-R3m{width:13%;letter-spacing: 5px;padding-top:0px;margin-left: 1%;}
}

/********** pen4 書單 **********/
img.ex-imgbuy{width:215px;margin:0 0 3% 1%;vertical-align:middle;}
img.book-all{max-width:100%;}
.listbox{width:100%;margin:10px auto 0;}
#booklist .container >:nth-child(2){margin:40px auto 0;}

.book-list{display:flex;flex-wrap:wrap;text-align:center;}
.book-list .item{width:32.5%;text-align:center;margin: 1% 0.4%; padding:0 0 2%;background-color:#ffffb7;border-top:10px solid #ffd200;display:block;position:relative;}
img.book_cover{width:100%;margin:0 auto 30px;}

p.bookname{font-size:1.1em;font-weight:500;text-align:center;line-height:1.25;margin-bottom:1.2em;}
a > p.bookname {color:#1d1200;}
span.booknameB{font-size:1.3em;font-weight:500;}
span.booknameS{font-size:0.75em;font-weight:400;letter-spacing: -1;}

.btn{border-radius:10px;padding:.75rem 3rem;border:0;}
.btn:hover{color:#fff;background-color:#df2731;border:0}
.btn:focus, .btn:active{outline:none !important;box-shadow:none !important;-webkit-box-shadow:none !important;}
.btn-blue{font-size:1.05rem;line-height:1;font-weight:600;letter-spacing:0.5px;color:#fff;background-color:#f7323d;}
.btn-blue span{font-size:1.15rem;margin-left:5px;}
.btn2{border-radius:10px;padding:1%;border:0;}
.btn2:hover{color:#fff;background-color:#df2731;border:0}
.btn2:focus, .btn2:active{outline:none !important;box-shadow:none !important;-webkit-box-shadow:none !important;}


@media only screen and (max-width:1199px) {
  .listbox{margin:65px auto 0;}
  #booklist .container >:nth-child(2){margin:20px auto 0;}

  img.book_cover{width:88%;}
  p.bookname{font-size:0.9em;letter-spacing:0}
}
@media only screen and (max-width:991px) {
  .listtitle{padding:25px 0;}
  .mainlist{padding-right:10%}
  img.list-line{display:none;}
  img.list-img{width:32%;}
  img.list-img2{width:33%;left:-2%;}
  img.list-img3{width:32%;left:0%;}
  img.list-t1{width:60%;}
  img.list-t2{width:75%;}
  img.list-t3{width:59.8%}
  .book-list .item{width:49%;}
  img.book_cover,img.book_cover2{width:100%;margin:0 auto 10px;}
  p.bookname{font-size:1em;}
}
@media only screen and (max-width:767px) {
  .listtitle{padding:18px 0;}
  .mainlist{padding-right:5%}
  img.list-t1{width:55%;}
  img.list-t2{width:67%;}
}
@media only screen and (max-width:575px) {
img.ex-imgbuy{max-width:50%;margin:3% 0;vertical-align:middle;}
  #booklist .container >:nth-child(2){margin:0 auto;}
  img.list-img2{width:30%;left:0;}
  .listbox{margin:35px auto 0;}
  .book-list .item{padding:0 0 15px;}
  p.bookname{font-size:0.8em;letter-spacing:0}
  .btn{padding:.5rem 1.2rem;}
  .btn-blue{font-size:.8rem;}
  .btn-blue span{font-size:1rem;margin-left:2px;}
.btn2{border-radius:10px;padding:1%;border:0;font-size: 0.8em;}
.btn2:hover{color:#fff;background-color:#df2731;border:0}
.btn2:focus, .btn2:active{outline:none !important;box-shadow:none !important;-webkit-box-shadow:none !important;}	

}

/********** b5e英語系列 **********/
button{border: 0;background-color:transparent;}
.b5-border{border: #369b8e solid 7px;border-radius: 20px;width: 1100px;padding: 1% 2%; background-color: #FFF;}
.tlx{font-size: 1rem;text-align: right;}
.flim3{width:60%;margin:2% 0 4% 5%;border: solid #ccc 3px;border-radius: 5px;}
img.flimg3{position: absolute;right: 4%;}
img.ex-imgbuy2{width:64px;margin:0 0 1.5% 0.5%;vertical-align:middle;}
img.playbg1{width:100%;margin:1% auto 3%;vertical-align:middle;}
.soungbg{position: relative;}

img.sound1-1{width: 50px;position: absolute;bottom:52%;right: 38%;cursor: pointer;}
img.sound1-2{width: 50px;position: absolute;bottom:14%;right: 41.2%;cursor: pointer;}
img.sound1-1:hover {opacity: 0;}
img.sound1-2:hover {opacity: 0;}

img.sound2-1{width: 50px;position: absolute;top:14%;left: 22.1%;cursor: pointer;}
img.sound2-2{width: 50px;position: absolute;bottom:10%;left: 18%;cursor: pointer;}
img.sound2-3{width: 50px;position: absolute;top:12%;right: 32%;cursor: pointer;}
img.sound2-1:hover {opacity: 0;}
img.sound2-2:hover {opacity: 0;}
img.sound2-3:hover {opacity: 0;}

img.sound3-1{width: 50px;position: absolute;top:35%;left: 1.6%;cursor: pointer;}
img.sound3-2{width: 50px;position: absolute;top:43%;left: 49.5%;cursor: pointer;}
img.sound3-3{width: 50px;position: absolute;bottom:13%;left: 50.6%;cursor: pointer;}
img.sound3-1:hover {opacity: 0;}
img.sound3-2:hover {opacity: 0;}
img.sound3-3:hover {opacity: 0;}

img.sound4-1{width: 50px;position: absolute;top:15%;right: 61%;cursor: pointer;}
img.sound4-2{width: 50px;position: absolute;bottom:15%;right: 37%;cursor: pointer;}	
img.sound4-1:hover {opacity: 0;}
img.sound4-2:hover {opacity: 0;}

img.sound5-1{width: 50px;position: absolute;bottom:15%;left: 2.8%;cursor: pointer;}
img.sound5-2{width: 50px;position: absolute;top:22%;right: 29%;cursor: pointer;}
img.sound5-1:hover {opacity: 0;}
img.sound5-2:hover {opacity: 0;}


@media only screen and (max-width:575px) {
#b5e2 h5,#b5e3 h5,#b5e4 h5,#b5e5 h5,#b5e6 h5,#b6c h5{font-size: 1em;}
.b5-border{border: #369b8e solid 4px;border-radius: 10px;width: 98%;background-color: #FFF;}
.tlx{font-size: .65rem;text-align: center;letter-spacing: -1;}	
.flim3{width:90%;margin:1% auto;border: solid #ccc 3px;border-radius: 5px;}
img.flimg3{position: absolute;right:3%;bottom: 4%;display: none;}
img.ex-imgbuy2{width:50px;margin:0 0 2% 1%;vertical-align:middle;}
.soungbg{position: relative;}
img.sound1-1{width: 11%;position: absolute;bottom:45%;left: 18%;cursor: pointer;}
img.sound1-2{width: 11%;position: absolute;bottom:11%;left: 12%;cursor: pointer;}
img.sound1-1:hover {width: 11%;position: absolute;bottom:45%;left: 18%;cursor: pointer;opacity: 1;}
img.sound1-2:hover {width: 11%;position: absolute;bottom:11%;left: 12%;cursor: pointer;opacity: 1;}	
	
img.sound2-1{width: 11%;position: absolute;top:13%;left: 40.2%;cursor: pointer;}
img.sound2-2{width: 11%;position: absolute;bottom:7%;left: 33%;cursor: pointer;}
img.sound2-3{width: 11%;position: absolute;top:12%;right: 32%;cursor: pointer;}
img.sound2-1:hover {width: 11%;position: absolute;top:13%;left: 40.2%;cursor: pointer;opacity: 1;}
img.sound2-2:hover {width: 11%;position: absolute;bottom:7%;left: 33%;cursor: pointer;opacity: 1;}	

img.sound3-1{width: 11%;position: absolute;top:35%;left: 1.6%;cursor: pointer;}
img.sound3-2{width: 11%;position: absolute;top:43%;left: 4%;cursor: pointer;}
img.sound3-3{width: 11%;position: absolute;bottom:11%;left: 5.7%;cursor: pointer;}	
img.sound3-2:hover {width: 11%;position: absolute;top:43%;left: 4%;cursor: pointer;opacity: 1;}
img.sound3-3:hover {width: 11%;position: absolute;bottom:11%;left: 5.7%;cursor: pointer;opacity: 1;}
	
img.sound4-1{width: 11%;position: absolute;top:15%;left: 54%;cursor: pointer;}
img.sound4-2{width: 11%;position: absolute;bottom:13%;right: 32%;cursor: pointer;}
img.sound4-1:hover {width: 11%;position: absolute;top:15%;left: 54%;cursor: pointer;opacity: 1;}
	
	
img.sound5-1{width: 11%;position: absolute;bottom:15%;left: 4.2%;cursor: pointer;}
img.sound5-2{width: 11%;position: absolute;top:22%;right: 29%;cursor: pointer;}	
img.sound5-1:hover {width: 11%;position: absolute;bottom:15%;left: 4.2%;cursor: pointer;opacity: 1;}

	
}

/********** b6c中文注音系列 **********/
button{border: 0;background-color:transparent;}
.bn-border{border: #fd7397 solid 7px;border-radius: 20px;width: 1100px;padding: 1%; background-color: #FFF;}
.b6-border{border: #fd7397 solid 7px;border-radius: 20px;width: 1100px;padding: 1% 2%; background-color: #FFF;}
.flim4{width: 48%; border: solid #ccc 1px;border-radius: 5px;box-shadow:3px 2px 4px rgba(57,57,57,0.5);}
.txt-bg1{margin: 2px;padding: 2px;text-align: center;font-size: 1.2em;color:#FF8082;font-weight: 600;}

/*.tlx{font-size: 1rem;text-align: right;}
.flim3{width:60%;margin:2% 0 4% 5%;border: solid #ccc 3px;border-radius: 5px;}
img.flimg3{position: absolute;right: 4%;}
img.ex-imgbuy2{width:64px;margin:0 0 1.5% 0.5%;vertical-align:middle;}
img.playbg1{width:100%;margin:2% auto 3%;vertical-align:middle;}
.soungbg{position: relative;}*與b5共用*/

img.sound6-1{width: 50px;position: absolute;top:13%;left: 2.2%;cursor: pointer;}
img.sound6-2{width: 50px;position: absolute;top:16.8%;left: 26%;cursor: pointer;}
img.sound6-3{width: 50px;position: absolute;top:25%;left: 46.4%;cursor: pointer;}
img.sound6-4{width: 50px;position: absolute;top:35%;right: 8.5%;cursor: pointer;}
img.sound6-1:hover {opacity: 0;}
img.sound6-2:hover {opacity: 0;}
img.sound6-3:hover {opacity: 0;}
img.sound6-4:hover {opacity: 0;}

img.sound7-1{width: 50px;position: absolute;top:28%;left: 11.1%;cursor: pointer;}
img.sound7-2{width: 50px;position: absolute;bottom:12%;left: 20%;cursor: pointer;}
img.sound7-3{width: 50px;position: absolute;bottom:16%;left: 30%;cursor: pointer;}
img.sound7-4{width: 50px;position: absolute;bottom:16%;left: 40.5%;cursor: pointer;}
img.sound7-5{width: 50px;position: absolute;top:43%;left: 47.5%;cursor: pointer;}
img.sound7-6{width: 50px;position: absolute;top:45%;right: 28%;cursor: pointer;}
img.sound7-7{width: 50px;position: absolute;top:33.5%;right: 19.5%;cursor: pointer;}
img.sound7-8{width: 50px;position: absolute;bottom:20%;right: 15%;cursor: pointer;}
img.sound7-9{width: 50px;position: absolute;top:15%;right: 8%;cursor: pointer;}
img.sound7-1:hover {opacity: 0;}
img.sound7-2:hover {opacity: 0;}
img.sound7-3:hover {opacity: 0;}
img.sound7-4:hover {opacity: 0;}
img.sound7-5:hover {opacity: 0;}
img.sound7-6:hover {opacity: 0;}
img.sound7-7:hover {opacity: 0;}
img.sound7-8:hover {opacity: 0;}
img.sound7-9:hover {opacity: 0;}

@media only screen and (max-width:575px) {
/*#b5e2 h5,#b5e3 h5,#b5e4 h5,#b5e5 h5,#b5e6 h5,#b6c h5{font-size: 1em;}*/
.bn-border{border: #fd7397 solid 4px;border-radius: 10px;width: 98%;background-color: #FFF;}	
.b6-border{border: #fd7397 solid 4px;border-radius: 10px;width: 98%;background-color: #FFF;}
.flim4{width: 95%;border: solid #ccc 3px;border-radius: 5px;border: solid #ccc 1px;}
/*.tlx{font-size: .65rem;text-align: center;letter-spacing: -1;}	

img.flimg3{position: absolute;right:3%;bottom: 4%;display: none;}
img.ex-imgbuy2{width:50px;margin:0 0 2% 1%;vertical-align:middle;}
.soungbg{position: relative;}*/
img.sound6-1{width: 50px;position: absolute;top:11%;left: 2.8%;cursor: pointer;}
img.sound6-2{width: 50px;position: absolute;top:15.8%;left: 48.5%;cursor: pointer;}
img.sound6-3{width: 50px;position: absolute;top:22%;left: 82%;cursor: pointer;}	
img.sound6-1:hover {opacity: 1;}
img.sound6-2:hover {opacity: 1;}
img.sound6-3:hover {opacity: 1;}


img.sound7-1{width: 50px;position: absolute;top:28%;left: 19.5%;cursor: pointer;}
img.sound7-2{width: 50px;position: absolute;bottom:12%;left: 30%;cursor: pointer;}
img.sound7-3{width: 50px;position: absolute;bottom:16%;left: 56%;cursor: pointer;}
img.sound7-4{width: 50px;position: absolute;bottom:12%;left: 76%;cursor: pointer;}
img.sound7-1:hover {opacity: 1;}
img.sound7-2:hover {opacity: 1;}
img.sound7-3:hover {opacity: 1;}
img.sound7-4:hover {opacity: 1;}
	
}


/*fancybox*/
.tk-pic{width:100%;flex-grow:1;padding:3% 0.5%;margin-bottom:1.05rem;}
.view{overflow:hidden;position:relative}
.view img{width:100%;height:100%;}
.view .overlay{background:rgba(0,0,0,.5);height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;transition:opacity .3s}
.view .overlay-caption{position:absolute;text-align:center;top:50%;width:100%;transform:translateY(-50%)}
.view p, .view img{transition:all 0.3s}
.view p{transform:translate3d(0,200%,0)}
li.view p, .view p{color:#fcce56;margin:0;opacity:0;font-size:9em;font-weight:700;text-align:center;}
.view .overlay-caption img{width:50%;max-width:124px;margin:0 auto;}
.slider-box:hover img{transform:scale(1.08)}
.slider-box:hover .overlay{opacity:1}
.slider-box:hover .overlay p{opacity:1;transform:translate3d(0,0,0)}

@media only screen and (max-width:1399px){ 
  .takelook{width:93%;}
}
@media only screen and (max-width:1199px){
  #about{padding:20px 0 0;}
  .takelook{width:96%;}
}
@media only screen and (max-width:991px){
  .tk-pic{width:100%;}
  .takelook{width:92%;}
}
@media only screen and (max-width:768px){
  .bg2{padding-top:17%;background-size:126% auto;}
}
@media only screen and (max-width:575px){
  #about{padding:10px 0 0;}
}


/********** emotions **********/
/*.bg-white{width:100%;max-width:1140px;background-color:#fff;border-radius:10px;padding:3% 0;margin-top:1em;margin-bottom:120px;position:relative;}
.agebox{width:90%;margin:0 auto;}
.agebox .age{margin:8px auto 0;display:flex;flex-wrap:wrap;justify-content:center;}
.agebox .age:nth-child(3){margin:18px auto 0;}
.agebox .age:nth-child(8){margin:8px auto 18px;}
.age-1{width:25%;background-color:#e95478;position:relative;}
.age-1 > .level{position:absolute;top:50%;left:0%;transform:translate(0%, -50%);color:#fff;font-size:1.12em;letter-spacing:.75px;font-weight:500;padding-left:.5em;}
.age-2{width:75%;background-color:#fbe3ec;padding:.5% 3% .5% 2%;}
.age-2 p{font-size:1em;line-height:26px;letter-spacing:.15px;margin-bottom:0;}
.age-last{display:flex;justify-content:flex-end;align-items:flex-start;}
.age-last-L{width:17%;position:relative;}
img.ill1{position:absolute;top:20%;right:-5%;width:13%;z-index:3;}
img.ill2{position:absolute;top:0;left:-68%;width:150%;}
img.ill2-m{display:none;}
.age-last > p{width:83%;letter-spacing:.55px;}*/

/*books*/
/*.books{padding-top:30px;}
img.ex-img4{width:100%;max-width:369px;transform:rotate(3.62deg);margin:0 0 0 10%;}
img.ex-img4-m{display:none;}
img.talk1,img.ill3{position:absolute;}
img.talk1{width:32%;top:-16%;right:16%;z-index:3;}
img.ill3{width:25%;bottom:5%;left:6%;z-index:2;}

.pinkbox{width:100%;max-width:1140px;margin:0 auto;margin-top:30px;}
.books .container > :nth-child(3){margin-top:15px;}
.bg-pink{width:100%;height:auto;padding:0 3%;background:url('../images/pinkbg02.png') center top repeat-y;background-size:100% 100%;}
.bg-pink1,.bg-pink2{width:100%;padding-top:2.6%;background:url('../images/pinkbg01.png') center top no-repeat;background-size:100% auto;}
.bg-pink2{background:url('../images/pinkbg03.png') center top no-repeat;background-size:100% auto;}

.content,.content2{display:flex;justify-content:center;align-items:flex-start;margin:25px auto 0;padding-bottom:10px;}
a.b-cover > img{width:78%;margin:0 auto 15px;}
a.b-cover2 > img{width:72%;margin:15px auto 20px;}
a.b-cover3 > img{width:85%;margin:15px auto 20px;}
a.morebtn > img{width:33%;max-width:220px;margin:0 auto;}
a.morebtn2 > img{width:41.5%;max-width:220px;margin:0 auto;}*/

/*tablegame*/
/*.tablegame{padding-top:45px;}
img.ex-img5{width:85%;max-width:334px;transform:rotate(-3.62deg);margin:3% auto 0;}
img.ex-img5-m{display:none;}
img.talk2{position:absolute;width:40%;bottom:20%;left:0%;z-index:3;}
img.ill4{position:absolute;width:100%;max-width:231px;bottom:-2%;right:-13%;}
img.game-img{width:100%;max-width:100%;margin:0 auto;}
.content2{margin:10px auto 0;}
.game-product{width:96%;margin:0;}
.game-product > p.introtxt{letter-spacing:.25px;padding-right:0;}
a.g-morebtn > img{width:25%;max-width:145px;position:absolute;bottom:-4%;right:2%;}
a.g-morebtn2 > img{width:25%;max-width:145px;position:absolute;bottom:2%;left:13%;}*/


/*@media only screen and (max-width:1199px) {
  img.ill1{display:none;}
  .age-1{width:30%;}
  .age-2{width:70%;}
  .age-last-L{width:28%;}
  img.ill2{left:-2%;width:90%;}
  .age-last > p{width:72%;}
  .bg-white{margin-bottom:60px;}
  img.ex-img4{margin:25% 0 0 2%;}
  img.talk1{width:35%;top:1%;right:22%;}
  img.ill3, img.ill4{display:none;}
  img.ex-img5{margin:8% auto 0;}
  img.talk2{width:45%;bottom:3%;left:0%}
  img.game-img{max-width:80%;margin:0;}
  a.morebtn > img{width:36%;}
  a.morebtn2 > img{width:43.5%;}
  a.g-morebtn > img{width:30%;bottom:-7%;right:0%;}
  a.g-morebtn2 > img{width:30%;bottom:-4%;}
}
@media only screen and (max-width:991px) {
  .agebox{width:92%;}
  .age-1{width:35%;}
  .age-2{width:65%;}
  .age-last{align-items:normal;}
  img.ill2{left:-6%;top:14%;width:98%;}
  .bg-white{margin-bottom:20px;padding:3% 0 4%;}
  img.ex-img4{margin:8% 0 5% 25%;}
  img.talk1{width:28%;top:2%;right:8%;}
  img.ill3{display:block;width:30%;left:-7%;bottom:7%;}
  .content,.content2{flex-direction:column;align-items:center;margin:15px auto 0;}
  a.morebtn > img{width:28%;}
  a.morebtn2 > img{width:28%;}
  a.b-cover > img{display:block;margin:0 auto 10px}
  a.b-cover2 > img{display:block;width:56%;margin:0 auto 10px}
  a.b-cover3 > img{display:block;width:78%;margin:0 auto 5px}
  .bg-pink{padding:1% 5%;}
  p.introtxt{padding-right:0;line-height:25px;}
  img.ex-img5{width:40%;transform:rotate(3.62deg);margin:0 0 3% 0;}
  img.talk2{width:19.5%;bottom:13%;left:22%;}
  tablegame{padding-top:30px;}
  img.ex-img4-m{display:block;float:right;width:46%;padding:0 0 0 10px;}
  img.ex-img5-m{display:block;float:left;width:40%;padding:10px 10px 10px 0;}
  img.game-img{display:none}
  a.g-morebtn > img{bottom:-2%;right:4%;}
  a.g-morebtn2 > img{bottom:3%;}
  
}
@media only screen and (max-width:767px) {
  img.ex-img4-m{display:none;}
  img.ex-img5-m{width:44%;max-width:357px;padding:0 10px 0 0;}
  img.ex-img4{width:56%;margin:8% 0 3% 22%;}
  img.talk1{width:22%;top:-1%;right:19%;}
  img.ill3{width:21%;left:11%;bottom:10%;}
  a.g-morebtn > img{bottom:-7%;right:0;}
  a.g-morebtn2 > img{bottom:0;}
}
@media only screen and (max-width:575px) {
  .bg-white{width:96%;}
  .age-1{width:40%;}
  .age-2{width:60%;}
  .age-1 > .level{color:#fff;font-size:1em;letter-spacing:.5px;padding-left:.5em;}
  .age-2 p{font-size:0.85em;font-weight:400;line-height:20px;letter-spacing:0;}
  .age-last{align-items:center;}
  .age-last > p{width:100%;}
  img.ill2-m{display:block;width:35%;float:left;padding:0 10px 0 0;}
  .age-last-L{display:none;width:0;}
  .books{padding-top:15px;}
  a.morebtn > img{width:30%;}
  a.morebtn2 > img{width:30%;}
  .tablegame{padding-top:25px;}
  .tablegame > .container:nth-child(2) > :first-child{margin-top:10px;}
  img.ex-img5-m{width:62%;margin:0 auto 15px;float:none;}
}
*/

/********** QA **********/
.qabox{display:flex;justify-content:flex-start;align-items:center;}
img.qag{width: 28px;}
.question{
 /* background:url('../images/Q.png') 0 15px no-repeat;*/
background-color: #E7E4E4;
  padding:15px;
  font-size:1.1em;
  font-weight:500;
  color:#3a1819;
  cursor:pointer;
  
}
.qaul li ul{
/*  background:url('../images/A.png') 0 0 no-repeat;*/
  padding:5px;
  font-size:1.1em;
  color:#1d1200;
  text-align:justify;
  display:block;
  line-height:1.5em;
  display:none;
}

@media only screen and (max-width:1199px) {
  
}
@media only screen and (max-width:991px) {
  
  .qabox{align-items:flex-start;}
  .qabox ul {padding-left:1.2rem;}
}
@media only screen and (max-width:767px){
  #qa .container >.row > .spacebox{margin-bottom:0.5em;}
  .qabox{align-items:center;}
  .qabox ul {padding-left:.5rem;}
}
@media only screen and (max-width:575px){
	.question{ font-size:1em; font-weight:500;}
	
}

/********** event **********/
/*img.ptitle4{position:absolute;margin:auto;left:0;right:0;top:-13%;max-width:100%;}
.eventbox{margin:70px auto 30px;display:flex;justify-content:center;align-items:center;}
.eventbox-L{width:50%;padding:0 2% 0 3%;}
.eventbox-R{width:50%;text-align:center;}
.eventbox-L > p {line-height:35px;}
.eventbox-L > p.yblock{margin-bottom:.5em;}
.eventbox-L div > p.txt_title{margin-bottom:.25em;text-align:left;}
.eventbox-L > p:nth-child(3) {margin-bottom:1em;}
a.signbtn > img{width:55%;max-width:278px;margin:15px auto 0;}
a.signbtn-m{display:none;}

@media only screen and (max-width:1199px) {
  img.ptitle4{top:-15%;}
  .eventbox{margin:70px auto 25px;}
  .eventbox-L{width:58%;padding:0 2%;}
  .eventbox-R{width:42%;}
  .eventbox-L > p {line-height:30px;}
  a.signbtn > img{width:65%;}
}
@media only screen and (max-width:991px) {
  img.ptitle4{top:-8%;}
  .eventbox{flex-direction:column-reverse;}
  .eventbox-L, .eventbox-R{width:88%;}
  .eventbox-R{margin-bottom:25px}
  a.signbtn{display:none;}
  a.signbtn-m{display:block;text-align:center;}
  a.signbtn-m > img{width:50%;max-width:350px;margin:15px auto 0;}
}
@media only screen and (max-width:767px){
  img.ptitle4{top:-7%;max-width:75%;}
  .eventbox-L, .eventbox-R{width:95%;}
  .eventbox-L > p {line-height:27px;text-align:left;}
  .eventbox-L > p:nth-child(3) {margin-bottom:1.5em;}
}
@media only screen and (max-width:575px){
  img.ptitle4{top:-5%;max-width:82%;}
  .eventbox{margin:50px auto 20px;}
  a.signbtn-m > img{width:76%;}
}*/

/*浮動 */
#backtotop{	display:scroll;	position: fixed; bottom:60px; right: 10px; width: 100px; opacity: 0.8; z-index: 10; cursor: pointer; transition: all .5s;
	       -webkit-transition: all .5s;  -moz-transition: all .5s;}
#backtotop:hover {opacity: 1;}


@media only screen and (max-width:575px){
#backtotop{	display:scroll;	position: fixed; bottom:20px; right: 0; width: 80px; opacity: 0.8; z-index: 10; cursor: pointer; transition: all .5s; -webkit-transition: all .5s;
	       -moz-transition: all .5s;}
#backtotop img{width: 80%;}
#backtotop:hover {opacity: 1;}
}

/* footer */
.bottom a:link{font-size:13px;font-weight:bold;color:#FFF;text-decoration:none}
.bottom a:hover{font-size:13px;font-weight:bold;color:#FFF;background-color:#666666;text-decoration:underline}
.bottom a:visited{font-size:13px;font-weight:bold;color:#FFF;background-color:#666666;text-decoration:none}
.footer01{font-size:13px;font-weight:bold;color:#bd4d03;background-color:#fff;text-align:center;padding:20px 0 10px 0}
.footer02{font-size:13px;text-align:center;color:#000;line-height:24px;background-color:#fff}
.footer02 a:link{font-size:13px;text-align:center;color:#000;text-decoration:none}
.footer02 a:hover{font-size:13px;text-align:center;color:#000;text-decoration:underline}
.footer02 a:visited{font-size:13px;text-align:center;color:#000;text-decoration:none}
.bottom1{font-size:13px;font-weight:bold;color:#FFF;background-color:#3e3d43;height:35px;padding:20px 0 10px 0;text-align:center}
.footer011{font-size:13px;font-weight:bold;color:#fff;background-color:#3e3d43;text-align:center;padding:20px 0 10px 0}
.footer021{font-size:13px;text-align:center;color:#aaaaaa;line-height:24px;background-color:#222127}


/********** 動態 **********/
.animated {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.animated.infinite {-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}

@-webkit-keyframes pu-fadeUp {
  from {opacity:0;-webkit-transform:translate3d(0, 25%, 0);transform:translate3d(0, 25%, 0);}
  to {opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
@keyframes pu-fadeUp {
  from {opacity:0;-webkit-transform:translate3d(0, 25%, 0);transform:translate3d(0, 25%, 0);}
  to {opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
.pu-fadeUp {-webkit-animation-name:pu-fadeUp;animation-name:pu-fadeUp;}

@-webkit-keyframes pu-rotateIn {
  from {
    -webkit-transform-origin:left top;
    transform-origin:left top;
    -webkit-transform:rotate3d(0, 0, 1, -30deg) translate3d(-45%, 0, 0);
    transform:rotate3d(0, 0, 1, -30deg) translate3d(-45%, 0, 0);
    opacity:0;
  }
  to {
    -webkit-transform-origin:left top;
    transform-origin:left top;
    -webkit-transform:translate3d(0, 0, 0) translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0) translate3d(0, 0, 0);
    opacity:1;
  }
}
@keyframes pu-rotateIn {
  from {
    -webkit-transform-origin:left top;
    transform-origin:left top;
    -webkit-transform:rotate3d(0, 0, 1, -30deg) translate3d(-45%, 0, 0);
    transform:rotate3d(0, 0, 1, -30deg) translate3d(-45%, 0, 0);
    opacity:0;
  }
  to {
    -webkit-transform-origin:left top;
    transform-origin:left top;
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}
.pu-rotateIn {-webkit-animation-name:pu-rotateIn;animation-name:pu-rotateIn;}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity:0;
    -webkit-transform:scale3d(0.3, 0.3, 0.3);
    transform:scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform:scale3d(1.1, 1.1, 1.1);
    transform:scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform:scale3d(0.9, 0.9, 0.9);
    transform:scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity:1;
    -webkit-transform:scale3d(1.03, 1.03, 1.03);
    transform:scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform:scale3d(0.97, 0.97, 0.97);
    transform:scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity:1;
    -webkit-transform:scale3d(1, 1, 1);
    transform:scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity:0;
    -webkit-transform:scale3d(0.3, 0.3, 0.3);
    transform:scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform:scale3d(1.1, 1.1, 1.1);
    transform:scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform:scale3d(0.9, 0.9, 0.9);
    transform:scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity:1;
    -webkit-transform:scale3d(1.03, 1.03, 1.03);
    transform:scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform:scale3d(0.97, 0.97, 0.97);
    transform:scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity:1;
    -webkit-transform:scale3d(1, 1, 1);
    transform:scale3d(1, 1, 1);
  }
}
.bounceIn {-webkit-animation-name:bounceIn;animation-name:bounceIn;}

@-webkit-keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}
@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}
.fadeIn {-webkit-animation-name:fadeIn;animation-name:fadeIn;}

@-webkit-keyframes fadeInRight {
  from {opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
  to {opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
@keyframes fadeInRight {
  from {opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
  to {opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
.fadeInRight {  -webkit-animation-name:fadeInRight;  animation-name:fadeInRight;}

@-webkit-keyframes zoomIn {
  from {opacity:0;-webkit-transform:scale3d(0.5, 0.5, 0.5);transform:scale3d(0.5, 0.5, 0.5);}
  50% {opacity:1;}
}
@keyframes zoomIn {
  from {opacity:0;-webkit-transform:scale3d(0.5, 0.5, 0.5);transform:scale3d(0.5, 0.5, 0.5);}
  50% {opacity:1;}
}
.zoomIn {-webkit-animation-name:zoomIn;animation-name:zoomIn;}

@-webkit-keyframes slideIn {
  from {-webkit-transform:translate3d(0, 20%, 0);transform:translate3d(0, 20%, 0);visibility:visible;}
  to {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
@keyframes slideIn {
  from {-webkit-transform:translate3d(0, 20%, 0);transform:translate3d(0, 20%, 0);visibility:visible;}
  to {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
}
.slideIn {-webkit-animation-name:slideIn;animation-name:slideIn;}

@-webkit-keyframes tada {
  from {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
  10%,  20% {-webkit-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}
  30%,  50%,  70%,  90% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
  40%,  60%,  80% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
  to {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
}
@keyframes tada {
  from {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
  10%,  20% {-webkit-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}
  30%,  50%,  70%,  90% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
  40%,  60%,  80% {-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
  to {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
}
.tada {-webkit-animation-name:tada;animation-name:tada;}

@-webkit-keyframes pulse {
  from {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
  50% {-webkit-transform:scale3d(1.06, 1.06, 1.06);transform:scale3d(1.06, 1.06, 1.06);}
  to {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
}
@keyframes pulse {
  from {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
  50% {-webkit-transform:scale3d(1.06, 1.06, 1.06);transform:scale3d(1.06, 1.06, 1.06);}
  to {-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
}
.pulse {-webkit-animation-name:pulse;animation-name:pulse;}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-name: swing;animation-name: swing;}