@charset "UTF-8";
*{outline:none;-webkit-box-sizing:border-box;box-sizing:border-box;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,pre,textarea,ul{margin:0;padding:0}
a{text-decoration:none;outline:none;}
img{border:0;vertical-align:middle;}
button,input,select{outline:0;border:none}
.cursor,button{cursor:pointer}
ul,li{list-style:none;}
html,body{font-family:"Open Sans","Noto Sans TC","Zen Maru Gothic","M PLUS Rounded 1c","SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue",Helvetica,Arial,"Microsoft JhengHei",微軟正黑體,sans-serif;font-size:16px;padding:0;margin:0;background-color:#fff;}
h2{font-size:1.125rem;line-height:1.85;font-weight:600;}
p{font-family:"Open Sans","Noto Sans TC","Zen Maru Gothic","M PLUS Rounded 1c","SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue",Helvetica,Arial,"Microsoft JhengHei",微軟正黑體,sans-serif;color:#000;font-size:1rem;line-height:1.65;font-weight:400;margin-bottom:.25em;letter-spacing:.25px;text-align:justify;}

@media only screen and (min-width:768px){
	h2{font-size:1.25rem;letter-spacing:0.5px}
}
@media only screen and (min-width:992px){
	h2{font-size:1.375rem;}
	p{font-size:1.125rem;letter-spacing:0.5px}
}

:root {scroll-padding-top:3rem;}
/*** 共用 ***/
#wrap{width:100%;margin:0 auto;overflow:hidden;padding-top:56px;position:relative;}
@media (min-width:768px){
	#wrap{padding-top:64px;}
}
@media (min-width:992px){
	#wrap{padding-top:54px;}
}

.img-fluid{max-width:100%;height:auto}
.part-title{width:100%;margin:0 auto;}
.part-title img{width:100%;margin:0 auto 2em;}
.pos_a{position:absolute;}
.h-100 {height:100% !important}
.view-pc{display:none;}
.view-m{display:block;}
@media (min-width:992px){
	.view-pc{display:block;}
	.view-m{display:none;}
}


/*** nav ***/
.navbar{background-color:#13aea0;padding:0.5rem 0.25rem;justify-content:flex-end !important;}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: #d5fffe;
}

.navbar-light .navbar-nav .nav-link {color:#d5fffe;font-size:1.25rem;font-weight:700;padding:1rem !important;background-color:rgba(19,174,160,1);}
.navbar-light .navbar-nav .nav-link:hover {color:#feeb0b;}
.navbar-light .navbar-nav .nav-link:focus {color:#d5fffe;border-bottom:0;}
.navbar-light .navbar-nav .nav-link.disabled {color:#69cec8;}
.navbar-light .navbar-nav .show > .nav-link{color:#d5fffe;}
.navbar-light .navbar-nav .show > .navbar-light .navbar-nav .nav-link.active {color:#feeb0b;}
.navbar-light .navbar-toggler {color:rgba(255, 255, 255, 1);border:0;border-color:rgba(255, 255, 255, 1);}
.navbar-toggler:focus{box-shadow:0 0 0 0.15rem !important;}
.navbar-toggler:visited{box-shadow:0 !important;}
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text {color:#d5fffe;}
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color:#d5fffe;/* background-color:#feeb0b; */
}

.dropdown-toggle::after{vertical-align:0.1em;border-top:0.4em solid;border-right:0.4em solid transparent;border-left:0.4em solid transparent;}
.dropdown-menu{background-color:transparent;border:0;box-shadow:0 0 0 0;padding:0 0 0.25em;border-radius:0;}
.dropdown-item{font-size:1.1rem;padding:0.6rem 0.85rem 0.6rem 1rem;color:#18a397;font-weight:600;text-align:center;background-color:rgba(237,255,254,0.9);margin:0 0 10px;}
.dropdown-item:hover, .dropdown-item:focus {color:#0c8277;font-weight:500;background-color:#e4f6f5;}
.dropdown-item.active, .dropdown-item:active {color:#0c8277;text-decoration:none;font-weight:500;background-color:#e4f6f5;}
.dropdown-menu[data-bs-popper]{margin-top:0;}

.navbar-expand-lg .navbar-nav > li{padding:0 15%;margin-bottom:1em;}
.navbar-expand-lg .navbar-nav > :first-child{position:relative;margin-top:1em;}
.navbar-expand-lg .navbar-nav > :first-child .nav-link{padding:1rem 2.25em 1rem 1rem !important;}
.home_icon{position:absolute;top:25%;width:7.5%;padding-top:7.5%;margin-left:0.25em;background-image:url('https://event.bookrep.com.tw/activity/bearepen/images/home_icon.svg');}
.home_icon:hover {background-image:url('https://event.bookrep.com.tw/activity/bearepen/images/home-y_icon.svg');}

/***nav展開-絕對定位疊在navbar下方*/
#menu_mobile-bg{position:fixed;top:3.5rem;left:0;width:100%;height:100%;background-color:rgba(188,232,217,0.9);z-index:100;transition:.2s;padding-top:.5em;text-align:center;}

.navbuy{display:inline-block;width:auto;height:40px;line-height:40px;float:right;color:#ffed3b;font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;font-size:1.15em;font-weight:700;letter-spacing:0.02em;text-align:center;}
.navbuy:hover, .navbuy:focus{text-decoration:none;color:#fff9bc;transition:.2s;}
.navbuy>span{margin-left:.25em;font-size:1.125rem;}
.navbtn-txt{display:block;width:80%;margin:.75rem auto;padding:1rem 0;text-align:center;font-family:'Noto Serif TC','Microsoft JhengHei',Georgia,serif;font-size:1.25em;font-weight:900;letter-spacing:0.1em;background-color:rgba(157,134,65,.6)}

@media (min-width:768px){
	.navbar{padding:0.75rem 0.5rem;}
	.navbar-light .navbar-nav .nav-link{font-size:1.285rem;}
	.dropdown-item{padding:0.75rem 0.85rem 0.75rem 1rem;}
	.dropdown-item{font-size:1.2rem;}
	.home_icon{top:29%;width:3.5%;padding-top:3.5%;margin-left:0.35em;}
	#menu_mobile-bg{top:4rem;}
}
@media (min-width:992px){
	.navbar{background-color:#25b7aa;padding:1.75rem 2rem;justify-content:center !important;}
	.navbar-expand-lg .navbar-nav{width:70%;margin:0 auto;justify-content:space-around;}
	.navbar-light .navbar-nav .nav-link{font-size:1.15rem;font-weight:500;padding:0.85rem 0.25rem !important;background-color:transparent;}
	#menu_mobile-bg{height:auto;background-color:transparent;top:0;padding-top:0;margin:auto;left:0;right:0;}
	.navbar-expand-lg .navbar-collapse{justify-content:center;}
	.navbar-expand-lg .navbar-nav > li{padding:0;margin-bottom:0;}
	.navbar-expand-lg .navbar-nav > :first-child{margin-top:0;}
	.navbar-expand-lg .navbar-nav > :first-child .nav-link{padding:0.85rem 1.85rem 0.85rem 0 !important;}
	.home_icon{top:29%;width:17%;padding-top:17%;margin-left:0.25em}
	.dropdown-menu{background-color:rgba(255,255,255,1);box-shadow:rgba(0, 0, 0, 0.25) 0px 1px 4px;border-radius:1rem;padding:0.25em 0;}
	.navbar-expand-lg .navbar-nav .dropdown-menu{left:-18% !important;}
	.dropdown-item{font-size:1.1rem;background-color:transparent;margin:0;padding:0.5rem 1rem;}
	.dropdown-item:hover{background-color:transparent;color:#eb5679;font-weight:700}
	.dropdown-menu[data-bs-popper]{margin-top:0.15rem;}
	.navbuy{display:none;}
}
@media (min-width:1200px){
	.navbar-expand-lg .navbar-nav{width:56%;}
}
@media (min-width:1400px){
	.navbar-expand-lg .navbar-nav{width:48%;}
}
@media (min-width:1600px){
	.navbar-expand-lg .navbar-nav{width:40%;}
}

/*** kv ***/
#kv{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd_bg-s.png') center top no-repeat;background-size:cover;}
.kv-container{width:100%;margin:0 auto 2em;padding-bottom:4.5%;position:relative}
#kv2{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd2_bg-s.png') center 80% no-repeat;background-size:cover;}
.kv2-container{width:100%;margin:0 auto;padding-bottom:3%;position:relative}
#kv3{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd_bg-s.png') center 80% no-repeat;background-size:cover;}
.kv3-container{width:100%;margin:0 auto;position:relative}

.bearbook, .penlogo{position:absolute;top:2.5%;left:2%;width:15%;max-width:144px;z-index:20}
.bearlogo, .bearlogo2{position:absolute;top:3%;right:3%;width:7.5%;max-width:66px;z-index:20}
.bearlogo2{top:4%;left:4%;width:11%;max-width:174px;}

.mainkv, .mainkv2, .mainkv3{width:90%;position:relative;margin:0 auto;}
.mainkv, .mainkv3{text-align:center;}
.hd-title{width:84%;max-width:599px;margin:6em auto 4em;}
.hd2-title{width:70%;max-width:572px;padding-top:2.5%;margin-right:2%;}

.bear2{position:absolute;width:30%;max-width:346px;bottom:-1%;left:-1%;z-index:2;}
.hd-photo{position:absolute;top:70%;right:-11%;width:53%;max-width:646px;z-index:10}
.hd-card, .hd-card2, .hd-card4{display:none;}
.hd-card3{position:absolute;top:3.5%;left:-18%;width:126%;max-width:874px;z-index:1;transform:rotate(-7deg);}
.mogu{display:none}
.hd2-focus1, .hd2-focus2, .hd2-focus3{width:17%;max-width:138px;position:absolute;transform:rotate(-5deg);}
.hd2-focus1{top:76%;right:77.5%;z-index:1;}
.hd2-focus2{top:76%;right:58%;z-index:1;}
.hd2-focus3{top:76%;right:38.5%;z-index:1;}

.pen{width:18.5%;transform:rotate(15deg);padding-top:22%;}
.hd2-title2{position:absolute;width:65%;max-width:556px;top:16%;left:2%;}
.bear{position:absolute;width:27%;bottom:0;right:-3%;z-index:2;transform:rotate(15deg);}
.soundwave{position:absolute;width:9%;top:14%;right:20%;z-index:3;transform:scaleX(-1) rotate(-9deg);}

.hd3-title{width:84%;max-width:598px;margin:2.5em auto 0.5em;}
.girl{width:100%;max-width:348px;padding-left:58%}
.fox{position:absolute;width:20%;max-width:138px;bottom:5%;left:-1%;}
.brownbear{display:none;}
.brownbear-m{position:absolute;width:27%;max-width:165px;bottom:-0.5%;right:44%;transform:rotate(8deg);}
.bee{position:absolute;width:5%;max-width:45px;top:58%;right:8%;}
.cloud1, .cloud2, .cloud3, .cloud4{position:absolute;}
.cloud1{width:13%;max-width:114px;top:68%;right:66%;}
.cloud2{width:12%;max-width:99px;top:61%;right:52%;}
.cloud3{width:11%;max-width:104px;top:69%;right:43%;}
.cloud4{width:12%;max-width:121px;top:69%;right:-2.5%;}

@media (min-width:768px){
	#kv{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd_bg-s.png') center bottom no-repeat;background-size:100% auto;}
	.kv-container{padding-bottom:0;}
	#kv2{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd2_bg-s.png') center bottom no-repeat;background-size:100% auto;}
	.kv2-container{padding-bottom:0;}
	#kv3{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd_bg-s.png') center bottom no-repeat;background-size:100% auto;}
	.bearbook, .penlogo{top:3.5%;width:12%;}
	.bearlogo{top:3.5%;width:6%;}
	.bearlogo2{width:7%;}

	.mainkv{width:100%;text-align:left;padding-left:10%}
	.hd-title{width:58%;margin:4.75em 0 5.5em}
	.bear2{width:20%;bottom:4%;left:3%;}
	.hd-photo{top:33%;right:-3%;width:48%;}
	.hd-card3{display:none;}
	.hd-card4{display:block;position:absolute;top:-1%;right:-3%;width:72%;transform:rotate(-14deg);}

	.hd2-focus1, .hd2-focus2, .hd2-focus3{width:12%;transform:rotate(10deg);}
	.hd2-focus1{top:20%;right:6%;}
	.hd2-focus2{top:33%;right:4%;}
	.hd2-focus3{top:46%;right:2%;}
	.mainkv2{width:70%;margin:0;margin-left:5%;}
	.hd2-title{width:78%;padding-top:24%;margin-right:5%;}
	.pen{width:16%;transform:rotate(18.5deg);padding-top:18%;}
	.hd2-title2{width:72%;top:18%;left:5%;}
	.bear{width:30.5%;bottom:2%;right:-18%;}
	.soundwave{right:11%;transform:scaleX(-1) rotate(0deg);}

	.mainkv3{width:100%;text-align:left;}
	.hd3-title{width:53.5%;margin:5em 0 6em 7%;}
	.girl{width:38%;padding:15% 0 0 8%;}
	.fox{width:11%;bottom:9%;left:1%;}
	.brownbear{display:none;}
	.brownbear-m{width:17%;bottom:10%;right:28%;transform:rotate(-5.5deg);}
	.bee{width:4%;top:16%;right:12%;}
	.cloud1{width:10%;top:21%;right:26%;}
	.cloud2{width:9%;top:6%;right:19%;}
	.cloud3{width:9%;top:26%;right:2%;}
	.cloud4{width:10%;top:43%;right:-2.5%;}
}
@media (min-width:992px){
	#kv{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd_bg-m.png') center bottom no-repeat;background-size:100% auto;}
	.kv-container{padding-bottom:1.5%;margin:0 auto 3.5em;}
	#kv2{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd2_bg-m.png') center top no-repeat;background-size:100% auto;}
	#kv3{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd_bg-m.png') center bottom no-repeat;background-size:100% auto;}
	.bearbook, .penlogo{left:1.5%;width:10.5%;}
	.bearlogo{right:2.5%;width:5%;}
	.bearlogo2{width:6.5%;}

	.mainkv{padding-left:12%}
	.hd-title{width:52%;margin:4em 0 5.5em}
	.bear2{bottom:-5.5%;}
	.hd-photo{top:26%;right:4%;width:46%;}
	.hd-card4{display:none;}
	.hd-card2{display:block;position:absolute;top:-1%;right:1%;width:31%;}

	.hd2-focus1, .hd2-focus2, .hd2-focus3{width:11%;}
	.hd2-focus1{top:19%;right:8%;}
	.hd2-focus2{top:32%;right:5%;}
	.hd2-focus3{top:45%;right:2.5%;}
	.mainkv2{width:68%;}
	.hd2-title{width:75%;padding-top:18%;margin-right:7%;}
	.pen{transform:rotate(21.5deg);padding-top:10%;}
	.hd2-title2{width:70%;top:13%;left:4%;}
	.bear{width:33%;bottom:1%;right:-20%;transform:rotate(10deg);}
	.soundwave{width:8%;top:10%;right:12%;transform:scaleX(-1) rotate(5deg);}

	.hd3-title{width:45.8%;margin:4em 0 6em 12%;}
	.girl{width:48%;padding:10% 0 0 11%;}
	.fox{width:11%;bottom:5%;left:3%;}
	.brownbear{display:block;position:absolute;width:14%;max-width:165px;bottom:16%;right:30%;transform:rotate(-15deg);}
	.brownbear-m{display:none;}
	.bee{top:13%;}
	.cloud1{width:8.5%;right:29%;}
	.cloud2{width:7%;top:9%;right:20%;}
	.cloud3{width:7%;right:4%;}
	.cloud4{width:8.5%;top:43%;right:-1%;}
}
@media (min-width:1200px){
	#kv{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd_bg.png') center bottom no-repeat;background-size:cover;}
	.kv-container{padding-bottom:0;}
	#kv2{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd2_bg.png') center top no-repeat;background-size:cover;}
	.kv2-container{width:100%;margin:0 auto 45px;}
	#kv3{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd3_bg.png') center bottom no-repeat;background-size:cover;}
	.bearbook, .penlogo{top:4%;left:2%;width:9%;}
	.bearlogo{top:4%;right:3%;width:4%;}
	.bearlogo2{width:5.8%;}

	.mainkv{padding-left:15%}
	.hd-title{width:47%;margin:3.5em 0 6em}
	.bear2{width:18%;left:7%;bottom:-5%;}
	.hd-photo{top:11%;right:7.5%;width:43%;}
	.hd-card2{display:none;}
	.hd-card{display:block;position:absolute;top:0;right:-0.5%;width:29%;max-width:449px;transform:rotate(-3deg);}

	.mogu{display:block;position:absolute;top:71%;left:6%;width:7%;max-width:117px;z-index:1}
	.hd2-focus1, .hd2-focus2, .hd2-focus3{width:9%;}
	.hd2-focus1{top:18%;right:10%;}
	.hd2-focus2{top:36%;right:7%;}
	.hd2-focus3{top:54%;right:4%;}
	.mainkv2{width:60%;position:relative;margin-left:15%;}
	.hd2-title{width:70%;max-width:572px;padding-top:13%;margin-right:8%;}
	.pen{width:14%;max-width:130px;transform:rotate(21.5deg);padding-top:3%;}
	.hd2-title2{position:absolute;width:63%;max-width:556px;top:6%;left:4%;}
	.bear{width:30%;bottom:2%;right:-14.5%;z-index:2;transform:rotate(3deg);}
	.soundwave{width:7%;top:15%;right:20%;z-index:3;transform:scaleX(-1) rotate(5deg);}

	.mainkv3{padding-left:15%}
	.hd3-title{width:46.6%;margin:1em 14% 4em 0;}
	.girl{width:29%;padding:5% 0 0 0;}
	.fox{bottom:2%;left:7%;}
	.brownbear{width:13%;bottom:15%;right:34%;transform:rotate(-4deg);}
	.bee{top:6%;right:13.5%;}
	.cloud1{right:35%;}
	.cloud2{top:5%;right:28%;}
	.cloud3{right:8%;}
	.cloud4{right:2%;}
}
@media (min-width:1400px){
	.kv-container, .kv3-container{max-width:1440px;}
	.kv2-container{max-width:1440px;margin:0 auto 30px;}
	.bearbook, .penlogo{left:1%;width:10%;}
	.bearlogo{right:2%;width:5%;}
	.bearlogo2{width:5.5%;left:5%;}

	.mainkv{padding-left:15.5%}
	.hd-title{width:52%;margin:4em 0 7em}
	.bear2{bottom:-6%;}
	.hd-photo{top:13%;right:5%;width:45%;}
	.hd-card{top:-3%;right:-3.5%;width:31%;transform:rotate(-7deg)}

	.mogu{top:70%;left:7%;}
	.hd2-focus1{right:11%;}
	.hd2-focus2{right:8%;}
	.hd2-focus3{right:5%;}

	.hd2-title{padding-top:12%;margin-right:10%;}
	.pen{width:14%;transform:rotate(21.5deg);padding-top:3%;}
	.hd2-title2{width:66%;top:7%;left:2%;}
	.bear{right:-13%;}
	.soundwave{width:7%;top:15%;right:20%;}

	.mainkv3{padding-left:15.5%}
	.hd3-title{width:50%;margin:1em 14% 4em 0;}
	.girl{width:29%;padding:5% 0 0 0;}
	.fox{bottom:1%;}
	.brownbear{width:13%;bottom:17%;right:31%;transform:rotate(1deg);}
	.bee{top:9%;right:11.5%;}
	.cloud1{right:32%;}
	.cloud2{top:5%;right:26%;}
	.cloud3{right:6%;}
	.cloud4{right:-1%;}
}
@media (min-width:1600px){
	.bear2{left:6%;bottom:-2%;}
	.hd-photo{top:11%;}
	.hd-card{top:-4.5%}
	#kv2{width:100%;margin:0;padding:0;background:#fff url('https://event.bookrep.com.tw/activity/bearepen/images/hd2_bg.png') center bottom no-repeat;}
	.mogu{top:65%;left:4%;width:10%;}
	.girl{width:29%;padding:5% 0 0 0;}
	.fox{bottom:7%;}
	.brownbear{bottom:20.4%;right:31%;transform:rotate(-3deg);}
	.bee{top:6%;right:12%;}
	.cloud1{right:33%;}
}
	

/*** section-title ***/
.section-title{width:66%;margin:0 auto;padding:0 0 20px;}
@media (min-width:768px){
	.section-title{width:42%;padding:0 0 25px;}
}
@media (min-width:992px){
	.section-title{width:34%;}
}
@media (min-width:1200px){
	.section-title{width:100%;padding:0 0 30px;}
}


/*** 文字樣式 ***/
p.pricetxt{color:#cc0000;font-size:1.5rem;line-height:1;letter-spacing:0.5px;font-weight:700;text-align:center;margin:0 0 0.5em;}
p.pricetxt span{font-size:1.5em;margin-left:0.05em;}
p.txt01{color:#000;font-size:16px;line-height:1.45;font-weight:600;margin-bottom:0}
p.txt02{color:#000;font-size:16px;line-height:1.45;text-indent:-0.55em;padding-left:1em;font-weight:600;margin-bottom:0.4em;}
p.txt02 span{font-size:0.75em;margin-right:0.25em;vertical-align:2px;}
p.txt03{color:#000;font-size:0.95rem;line-height:1.4;font-weight:500;margin-bottom:0;text-indent:-0.25em;}
p.txt03 span{color:#f47a02;font-size:0.4em;margin-right:0.5em;vertical-align:2px;}
span.orangetxt{color:#f47a02 !important;font-size:1em !important;margin-right:0.5em !important;font-weight:700;vertical-align:0 !important;}
p.seriestxt{color:#000;font-size:1.375rem;letter-spacing:0.2px;font-weight:700;text-align:center;margin:0;}
p.seriestxt span{color:#cc0000;font-size:1.15em;margin:0 2px;}
p.orangetitle{color:#eb6355;font-size:1.15em;line-height:1.45;font-weight:700;margin-bottom:0.5em;}
p.orangetitle span{letter-spacing:-0.5px;margin:0 0.15em;}
p.redtxt{color:#cc0000;font-size:1.125rem;letter-spacing:0.5px;font-weight:700;}
p.redtxt span{font-size:1.1em;margin-bottom:1em;vertical-align:middle}
p.bluetxt{color:#2e79d3;font-size:1.25rem;line-height:1.4;letter-spacing:0.25px;font-weight:700;text-align:center;padding:0 1em;margin-bottom:0.75em}
p.pstxt{font-size:16px;padding-left:1em;margin-bottom:1em;line-height:1.6;}
p.bottomtxt{font-size:0.75rem;color:#fff;margin-bottom:0;text-align:center;font-weight:500;}
span.underline{color:#000 !important;border-bottom:1px #000 solid;padding-bottom:1px;font-weight:500 !important;vertical-align:inherit !important;}
span.redborder{display:inline-block;font-size:1.1em;border:2px solid #cc0000;padding:0 0.75em;margin-bottom:0.5em;vertical-align:inherit !important;}
span.redlabel{display:inline-block;font-size:1.1em;color:#fff !important;background-color:#cc0000;padding:0.1em 0.5em;margin:0.5em 0 0.15em;vertical-align:inherit !important;text-indent:0 !important;}
p.text-justify{text-align:left;padding-left:0 !important;text-indent:0 !important}
p.recommend-title{color:#259d44;font-size:1.25rem;line-height:1.45;font-weight:700;text-align:center;padding:0 2em;margin-bottom:0.5em}
p.recommend-title span{color:#004f99;font-size:1.25em;font-weight:900;display:block;line-height:1.6}

@media (min-width:768px){
	p.txt01{font-size:1.125rem;}
	p.txt02{font-size:1.125rem;line-height:1.55;}
	p.txt03{font-size:1.05rem;text-indent:-0.35em;}
	p.txt03 span{margin-right:0.75em;}
	p.orangetitle{font-size:1.285em;}
	p.bluetxt{font-size:1.5rem;line-height:1.55;padding:0;margin-bottom:1em;}
	p.bottomtxt{font-size:0.9rem;}
	p.text-justify{text-align:justify;}
	span.redlabel{padding:0 0.5em;}
	p.recommend-title{font-size:1.25rem;}
}
@media (min-width:992px){
	p.pricetxt{font-size:1.65rem;}
	p.txt02{font-size:1.25rem;font-weight:700;}
	p.txt03{font-size:1.125rem;line-height:1.5;text-indent:-0.35em;font-weight:600;}
	p.txt03 span{margin-right:1em;}
	p.orangetitle{font-size:1.5em;}
	p.bluetxt{font-size:1.65rem;}
	span.orangetxt{margin-right:0.85em !important}
	p.seriestxt{font-size:1.6rem;}
	p.redtxt{font-size:1.25rem;}
	p.pstxt{font-size:1.125rem;font-weight:500;}
	p.recommend-title{font-size:1.45rem;}
}
@media (min-width:1200px){
	p.txt01{font-size:1.285rem;}
	p.txt02{font-size:1.35rem;}
	p.txt03{font-size:1.27rem;line-height:1.6;}
	p.redtxt{font-size:1.25rem;margin-bottom:0.5em;}
	p.pstxt{font-size:1.25rem;}
	p.recommend-title{font-size:2rem;}
	p.recommend-title span{font-size:1em;}
}


/*** 首頁 ***/
#pen{width:100%;margin:0;padding:45px 0 30px;text-align:center;}
.box-yellow{width:98%;margin:0 auto;border:4px solid #f5c70b;border-radius:20px;position:relative;padding:8% 0 3%;}
#pen .box-yellow .section-title{width:76%;max-width:528px;position:absolute;top:-4%;margin:auto;left:0;right:0;padding:0;}
.coverimg{width:80%;margin:0 auto;transition:all .1s linear;}
#pen .box-yellow .coverimg{max-width:448px;padding-right:5%;}
a img.coverimg:hover{transform:translateY(3px);}
.buybtn img{width:42%;margin:0 auto;max-width:180px;transition:all .1s linear;}
.buybtn:hover img{transform:scale(1.05);}
.morebtn img{width:40% !important;margin:0.5em auto !important;max-width:180px !important;transition:all .1s linear;}
.morebtn:hover img{transform:scale(1.05) !important;}
.ill-1{width:36%;max-width:294px;position:absolute;bottom:-3%;right:-11%;}
.penbox{margin-top:1.5em;}
.penbox > img{width:94%;max-width:592px;margin:0 auto 15px;}
.penbox > :first-child{width:88%;max-width:467px;margin:0 auto 20px;}
.aboutpen{width:88%;margin:.25em auto 0;}

#phonics{width:100%;margin:0;padding:45px 0 35px;text-align:center;}
#phonics .box-yellow{padding:17% 0 2%;}
#phonics .box-yellow .section-title{width:88%;max-width:632px;position:absolute;top:-1%;margin:auto;left:0;right:0;padding:0;}
.bookslogan img{width:72%;max-width:338px;margin:5px auto 15px;}
.bookslogan2 img{width:82%;max-width:396px;margin:0 auto 20px;}
#phonics .box-yellow .coverimg{width:74%;max-width:356px;margin:0 auto 5px;padding-right:12%;}
.bookbox{margin-top:1.75em;}
a.aboutbook{width:92%;margin:0 auto 1em;text-align:center;}
/* a.aboutbook > img{transition:all .1s ease;} */
/* a.aboutbook > img:hover{transform:scale(0.96);} */
a.aboutbook > :first-child p.redtxt{color:#000;font-weight:700;margin-bottom:0;}
a.aboutbook > :nth-child(2) p.txt01{padding:0 2.25em;text-align:center;margin-bottom:0.5em;}
.bookacc img{width:72%;margin:0 auto 0.85em;}
.bookbox > a img{width:82%;max-width:340px;margin:0 auto 5px;transition:all .1s ease;}
/* .bookbox > a img:hover{transform:scale(0.95);} */
.bookbox >:nth-child(4) img{max-width:304px !important;}
a.aboutbook > :last-child{width:86% !important;margin:0 auto 15px;}

@media (min-width:768px){
	#pen{padding:60px 0 45px;}
	.box-yellow{width:100%;border:5px solid #f5c70b;border-radius:25px;padding:6% 0 1.5%;}
	#pen .box-yellow .section-title{width:48%;top:-7%;}
	.coverimg{width:96%;}
	#pen .box-yellow .coverimg{padding-right:2%;}
	.buybtn img{width:50%;}
	.morebtn img{width:36% !important;}
	.ill-1{width:22%;bottom:-7%;right:-4%;}
	.penbox{width:95%;margin-top:0.75em;}
	.penbox > img{width:100%;}
	.penbox > :first-child{width:96%;}
	.aboutpen{width:96%;margin:0 0 0.5em;padding-left:2%;}

	#phonics{padding:50px 0;}
	#phonics .box-yellow{padding:12% 0 1.5%;}
	#phonics .box-yellow .section-title{width:60%;top:-3%;}
	.bookslogan img{width:74%;max-width:652px;margin:0 auto 20px;}
	.bookslogan2 img{width:68%;max-width:702px;}
	#phonics .box-yellow .coverimg{width:78%;margin:0 auto 5px;padding-right:2%;}
	.bookbox{width:96%;margin-top:0.75em;}
	a.aboutbook{width:100%;display:flex;flex-direction:column-reverse;margin:0 auto 0.5em;}
	a.aboutbook > :nth-child(2) p.txt01{padding:0 1.75em;margin-bottom:0}
	a.aboutbook > :last-child{width:100% !important;max-width:516px;}
	.bookbox > a img{width:49%;}
	.bookacc img{width:100%;max-width:597px;margin:0 auto 0.35em;}
	#phonics .box-yellow .morebtn img{width:35.6% !important;}
}
@media (min-width:992px){
	#pen{padding:75px 0 60px;}
	.box-yellow{border:6px solid #f5c70b;border-radius:30px;padding:5% 0 1%;}
	#pen .box-yellow .section-title{width:40%;top:-9%;}

	#phonics{padding:60px 0 60px;}
	#phonics .box-yellow{padding:10.5% 0 1%;}
	#phonics .box-yellow .section-title{width:52%;}
	#phonics .box-yellow .coverimg{width:100%;padding-right:10%;}
	#phonics .box-yellow .buybtn img{width:60%;}
	a.aboutbook{flex-direction:row-reverse;align-items:center;}
	a.aboutbook > :nth-child(2) p.txt01{padding:0;line-height:1.5}
	a.aboutbook > :nth-child(2) p.txt01 span{display:block;}
	a.aboutbook > :last-child{width:76% !important;margin:0 auto;}
	.bookbox > a img{width:48%;}
	.bookacc img{width:96%;}
	#phonics .box-yellow .morebtn img{width:36% !important;}
}
@media (min-width:1200px){
	#pen{padding:90px 0 60px;}
	.box-yellow{padding:4% 0 2.5%;}
	#pen .box-yellow .section-title{width:42%;}
	.coverimg{width:100%;}
	.ill-1{width:25%;bottom:-8%;right:-7%;}
	.penbox{width:98%;margin-top:2em;}
	.penbox > :first-child{margin:0 auto 30px;}
	.aboutpen{width:100%;padding-left:5%;margin:0 0 1em;}

	#phonics{padding:75px 0;}
	#phonics .box-yellow{padding:10% 0 1%;}
	#phonics .box-yellow .section-title{width:50%;}
	#phonics .box-yellow .coverimg{width:96%;padding-right:10%;}
	a.aboutbook{width:96%;}
	a.aboutbook > :nth-child(2){width:21%;}
	a.aboutbook > :last-child{width:auto !important;flex:1 !important;}
	.bookbox{width:96%;margin:0.75em 0 0;}
	.bookbox > a img{width:49%;}
}
@media (min-width:1400px){
	#pen{padding:125px 0 60px;}
	.box-yellow{width:100%;max-width:1140px;}
	#pen .box-yellow .section-title{width:48%;top:-10%;}
	.ill-1{width:26%;bottom:-9%;right:-10%;}
	.penbox{margin-top:1.5em;}

	#phonics{padding:90px 0 75px;}
	#phonics .box-yellow{padding:9.5% 0 1%;}
	#phonics .box-yellow .section-title{width:58%;top:-4%;}
	#phonics .box-yellow .coverimg{padding-right:0;}
	#phonics .box-yellow p.pricetxt{padding-left:3em !important;}
	#phonics .box-yellow .buybtn img{margin:0 0 0 20%;}
	a.aboutbook > :nth-child(2){width:22%;}
}


/*** page2-點讀錄音筆 ***/
#about{width:100%;margin:0;padding:20px 0 30px;}
#about .container .section-title{width:47.5%;padding:0 0 10px;}
#about .container .section-title img{width:100%;max-width:274px;}
#about .container .coverimg{max-width:448px;padding-right:5%;}
.pen-slogan img{width:96%;max-width:558px;margin:10px auto 5px;}
#about .container .penbox{width:100%;text-align:center;position:relative;margin:1.5em auto 1em}
#about .container .penbox > img {width:96%;}
#about .container .penbox > :first-child{width:98%;max-width:601px;margin:15px auto 20px;}
#about .container .penbox .aboutpen{width:92%;margin:0.5em auto 1em }
.ill-2{display:none;}
.focusbox{width:92%;margin:0 auto;display:flex;flex-wrap:wrap;}
.focusbox > li {width:50%;padding:0 2% 2%;margin:0 auto 5px;}
.focusbox > li > img{width:100%;max-width:280px !important;}

#intro{width:100%;margin:0;padding:20px 0 30px;}
#intro .container .section-title{width:47.5%;padding:0 0 20px;}
#intro .container .section-title img{width:100%;max-width:274px;}
.pen-intro{margin-bottom:20px}
.acc-title{width:14%;max-width:64px;margin:0 auto;}
.pen-acc{width:96%;margin:0 auto 15px;display:flex;justify-content:center;align-items:flex-end;}
.pen-acc > :last-child{width:52%;margin-left:2%;max-width:216px;}
.pen-acc > :first-child{width:44%;max-width:184px;}
.bg-green{width:96%;margin:0 auto;background-color:#e4f6f5;border-radius:20px;padding:6% 4%;}
.buttonlist{width:96%;margin:0 auto;}
.buttonlist > li {width:100%;margin-bottom:0.25em;}

#howtouse{width:100%;margin:0;padding:20px 0 50px;}
#howtouse .container .section-title{width:47.5%;padding:0 0 20px;}
#howtouse .container .section-title img{width:100%;max-width:274px;}
#howtouse .container .content{width:92%;height:auto;overflow:inherit;transition:none;margin:0 auto;}
#howtouse .container .content p{text-indent:-1.5rem;padding-left:1.5rem;margin-bottom:0.45em}
.bv{width:96%;margin:10px auto 15px;box-shadow:3px 2px 4px rgba(67,0,29,0.3)}

@media (min-width:768px){
	#about{padding:30px 0 45px;}
	#about .container .section-title{width:30%;padding:0 0 15px;}
	#about .container .coverimg{padding-right:2%;}
	#about .container .penbox{margin:0}
	#about .container .penbox > img {width:100%;margin:0 auto 5px}
	#about .container .penbox > :first-child{width:100%;margin:5px auto 20px}
	#about .container .penbox .aboutpen{width:96%;}
	.focusbox{width:100%;margin:0 auto;}
	.focusbox > li {width:25%;padding:0 .5%;margin:0 auto;}

	#intro{padding:30px 0 45px;}
	#intro .container .section-title{width:30%;padding:0 0 25px;}
	.pen-intro{width:94% !important;max-width:628px !important;}
	.acc-title{width:28%;margin:5px auto 10px;}
	.pen-acc{flex-direction:column;align-items:center;}
	.pen-acc > :last-child{width:94%;margin:0 auto;}
	.pen-acc > :first-child{width:80%;margin:0 auto 20px;}
	.bg-green{padding:3% 1%;}
	.pen-button{display:flex;justify-content:center;align-items:flex-start;}
	.buttonlist{width:49%;margin:0;padding:0 2% 0 3%;}

	#howtouse{padding:30px 0 75px;}
	#howtouse .container .section-title{width:30%;padding:0 0 25px;}
	#howtouse .container .content p{margin-bottom:0.25em}
	.bv{width:92%;margin:20px auto 0;}
}
@media (min-width:992px){
	#about{padding:50px 0 30px;}
	#about .container .section-title{width:24.2%;padding:0 0 30px;}
	.focusbox{margin:15px auto 25px;}

	#intro{padding:30px 0 60px;}
	#intro .container .section-title{width:24.2%;}
	.pen-intro{width:90% !important;}
	.pen-acc > :last-child{width:84%;}
	.pen-acc > :first-child{width:70%;}
	.bg-green{padding:2.5% 0;margin-top:15px;border-radius:25px}
	.buttonlist{width:50%;padding:0 0 0 6%;}

	#howtouse .container .section-title{width:24.2%;}
}
@media (min-width:1200px){
	#about{padding:30px 0;}
	#about .container .section-title{width:26%;}
	#about .container .penbox{text-align:left;}
	#about .container .penbox > img {margin:0 auto 15px}
	#about .container .penbox > :first-child{margin:10px 0 25px}
	#about .container .penbox .aboutpen{padding-left:0;}
	.focusbox{width:92%;margin:35px auto 25px;}
	.focusbox > li {width:25%;padding:0 0.5%}
	.ill-2{display:block;width:36% !important;max-width:294px !important;position:absolute;bottom:7%;right:-15%;}

	#intro{padding:30px 0;}
	#intro .container .section-title{width:26%;padding:0 0 30px;}
	.pen-intro{width:100% !important;margin-bottom:0;padding:2% 0;}
	.acc-title{width:24%;margin:10px auto;}
	.pen-acc > :last-child{width:84%;}
	.pen-acc > :first-child{width:70%;}
	.bg-green{width:92%;border-radius:30px;padding:2.5% 0 2%;margin-top:20px;}
	.pen-button > :first-child{width:56% !important;padding:0 2% !important;}
	.pen-button > :last-child{width:38% !important;padding:0 !important;}

	#howtouse{padding:55px 0 90px;}
	#howtouse .container .section-title{width:26%;padding:0 0 30px;}
	#howtouse .container .content{width:88%;margin:0 auto 15px;}
	#howtouse .container .content p{text-indent:-1.75rem;padding-left:0;}
	.bv{width:100%;}
}
@media (min-width:1400px){
	.ill-2{width:36% !important;bottom:7%;right:-1%;}
	#intro{padding:30px 0 60px;}
	.acc-title{margin:5px 0 10px -18%;}
	.pen-acc{width:84%;margin:0;}
	.pen-button > :first-child{width:54% !important;}
	.pen-button > :last-child{width:40% !important;}

	#howtouse .container .content{width:80%;}
	.bv{width:96%;}
}

/*** page3-點讀套書 ***/
#bookintro{width:100%;margin:0;padding:40px 0 30px;text-align:center;}
#bookintro .container .section-title{width:80%;padding:0 0 15px;}
#bookintro .container .section-title img{width:100%;max-width:632px;}
#bookintro .coverimg{width:74%;max-width:356px;margin:0 auto 5px;padding-right:12%;}
#bookintro .bookacc img{margin:0.25em auto 1.25em;}
#bookintro .bookbox > img{width:74%;max-width:340px;margin:0 auto 10px;}
#bookintro .bookbox >:nth-child(4){max-width:304px !important;}
#bookintro .aboutbook{width:92%;margin:0 auto 1em;text-align:center;}
#bookintro .aboutbook > img{width:96%;margin:0 auto;}
#bookintro .aboutbook > :first-child p.redtxt{color:#000;font-weight:700;margin-bottom:0;}
#bookintro .aboutbook > :nth-child(2) p.txt01{padding:0 2.5em;text-align:center;margin-bottom:0.5em;}
.yellow-hint{width:90%;margin:0.5em auto 1em;background-color:#fff100;border-radius:10px;padding:2% 4% 3%;}
.yellow-hint > p.redtxt{text-align:center;}
.yellow-hint > p.redtxt span{font-size:1em;vertical-align:0;margin:0 0.2em;}
.recommendbox{width:96%;margin:0 auto;}
.r-list{width:88%;margin:0 auto;}
.r-list li{margin-bottom:0.25em;}
.r-list li > p.txt01{text-align:left;}
.r-list li > p.txt01 span.orangetxt{font-size:1.125em !important;}


#instruction{width:100%;margin:0;padding:20px 0;}
#instruction .container .section-title{width:84%;padding:0 0 20px;}
#instruction .container .section-title img{width:100%;max-width:482px;}

.takelook{width:94%;text-align:center;margin:0 auto 25px}
.takelook > :first-child{width:10%;max-width:42px;margin:0 auto 8px;}
.takelook > p.txt02{text-align:center;font-size:1.25rem;font-weight:700;text-indent:0;padding:0 0.5em}
.takelook > p.txt02 span{color:#cc0000;font-size:1em;margin-right:0;vertical-align:0;}

/*預覽fancybox*/
.view{width:100%;height:auto;overflow:hidden;position:relative;border-radius:15px;}
.view img{width:100%;height:100%;object-fit:contain;}
.view .overlay{background:rgba(0,0,0,.45);height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;transition:opacity,0.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:#ece544;margin:0;opacity:0;font-size:3em;font-weight:700;text-align:center;text-shadow:#333 0.1em 0.1em 0.2em}
.slider-box:hover img{transform:scale(1.1)}
.slider-box:hover .overlay{opacity:1}
.slider-box:hover .overlay p{opacity:1;transform:translate3d(0,0,0)}


#feature{width:100%;margin:0;padding:20px 0;}
#feature .container .section-title{width:47.5%;padding:0 0 20px;}
#feature .container .section-title img{width:100%;max-width:274px;}
.bookslogan3 img{width:96%;max-width:564px;margin:0 auto 20px;}
ul.bluelabel{width:94%;margin:0 auto 40px;}
ul.bluelabel li{width:100%;padding:2% 4%;background-color:#219fda;margin-bottom:0.5em;border-radius:10px;}
ul.bluelabel li p{color:#fff;font-size:1rem;line-height:1.25;font-weight:500;text-align:justify;margin-bottom:0;}
.featurebox, .featurebox2, .featurebox3, .featurebox4, .featurebox5{width:96%;margin:0 auto 50px;position:relative;padding:8% 5% 5%;text-align:center;}
.featurebox5{margin:0 auto 25px;}
.orangeborder1, .orangeborder2{border:2px solid #eb6355;}

.feature-title, .feature-title2, .feature-title3, .feature-title4{width:26%;max-width:136px;position:absolute;top:-8%;margin:auto;left:0;right:0;}
.box-pos, .box-pos2, .box-pos3{width:100%;margin:0 auto;}
.featureimg{width:100%;text-align:center;margin:0 auto 10px}
.f-img3, .f-img4, .f-img5, .f-img6{width:72%;}
.f-img7{width:86%;}
.f-img8{width:100%;}
.featurebox .view, .featurebox2 .view, .featurebox3 .view, .featurebox4 .view, .featurebox5 .view{overflow:hidden;position:relative;border-radius:0;}
.featurebox .view .overlay{background:rgba(0,0,0,0);}
.featurebox .slider-box:hover img{transform:scale(1.02)}
.featurebox2 .view .overlay{background:rgba(0,0,0,0);}
.featurebox2 .slider-box:hover img{transform:scale(1.02)}
.featurebox3 .view .overlay{background:rgba(0,0,0,0);}
.featurebox3 .slider-box:hover img{transform:scale(1.02)}
.featurebox4 .view .overlay{background:rgba(0,0,0,0);}
.featurebox4 .slider-box:hover img{transform:scale(1.02)}
.featurebox5 .view .overlay{background:rgba(0,0,0,0);}
.featurebox5 .slider-box:hover img{transform:scale(1.02)}
.featurebox .view img{width:100%;height:auto;}
.featurebox2 .view img{width:100%;height:auto;}
.featurebox3 .view img{width:100%;height:auto;}
.featurebox4 .view img{width:100%;height:auto;}
.featurebox5 .view img{width:100%;height:auto;}

.bv-title{display:none;}
.bv-title-m{width:92%;max-width:737px;margin:0 auto 5px;}

#poster{width:100%;margin:0;padding:20px 0 10px;}
#poster .container{position:relative;}
#poster .container .section-title{width:76%;padding:0 0 20px;}
#poster .container .section-title img{width:100%;max-width:429px;}
.part-flex{width:96%;margin:0 auto 3em;text-align:center;}
#poster .container .part-flex > :first-child{width:100%;max-width:584px;margin:0 auto 20px;}
#poster .container .part-flex > :last-child img{width:100%;max-width:584px;margin:0 auto;}
.boydog{position:absolute;width:30%;max-width:315px;bottom:-1%;right:-2%;}

#cards{width:100%;margin:0;padding:20px 0 50px;}
#cards .container{position:relative;}
#cards .container .section-title{width:68%;padding:0 0 20px;}
#cards .container .section-title img{width:100%;max-width:370px;}
#cards .container .part-flex{margin:0 auto;}
#cards .container .part-flex > :last-child img{width:100%;max-width:584px;margin:0 auto 15px;}
.playcards{position:absolute;width:30%;max-width:279px;top:60%;right:11%;}
.cards-3 img{width:96%;max-width:584px;margin:0 auto;}

@media (min-width:414px){
	.yellow-hint{width:84%;}
}
@media (min-width:768px){
	#bookintro{padding:60px 0 30px;}
	#bookintro .container .section-title{width:60%;padding:0 0 25px;}
	#bookintro .bookslogan img{width:78%;}
	#bookintro .bookslogan2 img{width:74%;}
	#bookintro .coverimg{width:78%;margin:0 auto 5px;padding-right:2%;}
	#bookintro .aboutbook{width:100%;display:flex;flex-direction:column-reverse;margin:0 auto 0.25em;}
	#bookintro .aboutbook > :nth-child(2) p.txt01{padding:0;margin-bottom:0}
	#bookintro .bookbox > img{width:49%;margin:0;}
	#bookintro .bookacc img{width:100%;max-width:597px;margin:0 auto 0.35em;}
	.yellow-hint{width:100%;display:flex;justify-content:center;align-items:center;padding:1% 0;border-radius:35px}
	.yellow-hint > p.redtxt{margin-bottom:0;}
	.yellow-hint > p.redtxt span{margin:0 0.1em;}
	p.recommend-title span{display:inline-block;margin-right:0.5em;}
	.recommendbox{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}
	.r-list{width:50%;}
	.recommendbox > :last-child{width:100%;display:flex;flex-wrap:wrap}
	.recommendbox > :last-child li{width:50%;}
	.recommendbox > :last-child > :last-child{width:100%;}

	#instruction{padding:30px 0;}
	#instruction .container .section-title{width:54%;padding:0 0 25px;}
	.takelook{width:100%;}
	.takelook > p.txt02{padding:0;}
	.takelook > :first-child{width:14%;}

	#feature{padding:30px 0;}
	#feature .container .section-title{width:30%;padding:0 0 25px;}
	.bookslogan3 img{width:88%;max-width:802px;margin:0 auto 20px;}
	ul.bluelabel{width:96%;margin:0 auto 55px;}
	ul.bluelabel li{padding:1.5% 3%;border-radius:15px;margin-bottom:0.75em;}
	ul.bluelabel li p{font-size:1.125rem;line-height:1.45;font-weight:700;}
	.featurebox{width:100%;padding:6% 0 2% 3%;}
	.featurebox2{width:100%;padding:5% 3% 2% 0;}
	.featurebox3{width:100%;padding:10% 5% 2%;}
	.featurebox4{width:100%;padding:16% 2% 2% 8%;margin:0 auto;}
	.featurebox5{width:100%;padding:7% 5% 0%;margin:0 auto;}
	.orangeborder1{border-top:3px solid #eb6355;border-left:3px solid #eb6355;border-right:0;border-bottom:0;}
	.orangeborder2{border-top:3px solid #eb6355;border-right:3px solid #eb6355;border-left:0;border-bottom:0;}
	.box-pos, .box-pos2{position:relative;}
	.box-pos2, .box-pos3{display:flex;flex-direction:row;}
	.box-pos3{flex-direction:column-reverse;}
	.featurebox3 .box-pos2{flex-direction:column;}
	.feature-title, .feature-title2, .feature-title3, .feature-title4{width:15%;top:-20%;margin:0;left:3%;}
	.feature-title2{top:-16%;margin:0;left:-1%;}
	.feature-title3{width:48.5% !important;top:-12% !important;margin:0;left:4% !important;}
	.feature-title4{width:22.8% !important;top:-10% !important;margin:0;left:-1% !important;}
	.ftitle-m{width:31%;top:-10%;}
	.ftitle-m-r{left:-1%;}
	.f1 .box-pos > :last-child p.orangetitle{width:48%;margin:0 0 0.5em 0;}
	.f-img1{width:52%;position:absolute;top:-55%;right:-2%;}
	.f-img2{width:36%;}
	.f-img7{width:100%;margin:10px auto;}
	.f-img8{margin:10px auto 0;}
	.box-pos2 > :last-child{flex:1;padding-left:2%;}
	.bv-title{display:block;width:100%;max-width:1008px;margin:35px auto 5px;}
	.bv-title-m{display:none;}
	#feature .container .bv{width:84%;}

	#poster{padding:20px 0 10px;}
	#poster .container .section-title{width:90%;}
	#poster .container .section-title img{width:100%;max-width:813px;}
	.part-flex{width:100%;display:flex;justify-content:center;}
	#poster .container .part-flex > :first-child{width:59%;margin:0 1% 0 0;}
	#poster .container .part-flex > :nth-child(2){flex:1;}
	#poster .container .part-flex > :nth-child(2) img{width:100%;max-width:448px;}
	.boydog{width:24%;bottom:3%;right:-1%;}

	#cards{padding:20px 0 60px;}
	#cards .container .section-title{width:76%;}
	#cards .container .section-title img{width:100%;max-width:684px;}
	#cards .container .part-flex{align-items:flex-start;margin:0 auto 25px;}
	#cards .container .part-flex > :first-child{width:68%;}
	#cards .container .part-flex > :first-child img{width:100%;max-width:688px}
	#cards .container .part-flex > :nth-child(2){flex:1;padding-left:2%}
	#cards .container .part-flex > :nth-child(2) img{width:100%;max-width:296px}
	.playcards{width:24%;top:51%;right:5%;}
	.cards-3 img{width:98%;max-width:960px;margin:0 auto;}
}
@media (min-width:992px){
	#bookintro .container .section-title{width:52%;}
	#bookintro .coverimg{width:100%;padding-right:10%;}
	#bookintro .buybtn img{width:60%;}
	#bookintro .aboutbook{flex-direction:row-reverse;align-items:center;}
	#bookintro .aboutbook > :last-child{width:76% !important;margin:0 auto;max-width:516px;}
	#bookintro .aboutbook > :nth-child(2){width:21%;}
	#bookintro .aboutbook > :nth-child(2) p.txt01 span{display:block;}
	.yellow-hint{width:92%;margin:15px auto 20px;padding:1%}
	.yellow-hint > p.redtxt{font-size:1.35rem;margin-right:0.5em;}
	.yellow-hint > p.txt01{font-size:1.25rem;}
	.recommendbox{width:92%;}
	.r-list{width:40%;}
	.recommendbox > :last-child{width:90%;}
	.recommendbox > :last-child > :first-child{width:55.5%;}
	.recommendbox > :last-child > :nth-child(2){width:40%;}

	#instruction{padding:45px 0 20px;}
	#instruction .container .section-title{width:44%;}
	.takelook > p.txt02{font-size:1.5rem;}

	#feature{padding:30px 0;}
	#feature .container .section-title{width:24.2%;}
	.bookslogan3 img{width:88%;margin:0 auto 35px}
	ul.bluelabel{width:95%;margin:0 auto 80px}
	ul.bluelabel li{padding:1% 2%;}
	ul.bluelabel li p{font-size:1.285rem}
	.featurebox{padding:4% 0 2% 3%;margin:0 auto 60px}
	.featurebox2, .featurebox3{margin:0 auto 60px;}
	.featurebox2{padding:4% 3% 3% 0;}
	.featurebox3{padding:9% 5% 2%;}
	.featurebox4{padding:10% 2% 2% 8%;}
	.featurebox5{padding:9% 5% 0%;}
	.feature-title, .feature-title2, .feature-title3, .feature-title4{width:13%;top:-23%;}
	.feature-title2{top:-22%;left:40.8%;}
	.ftitle-m{width:27%;top:-19%;}
	.feature-title3{width:32.8% !important;top:-12% !important;margin:0;left:4% !important;}
	.feature-title4{width:23% !important;top:-13% !important;margin:0;left:-1% !important;}
	.f-img2{width:42%;position:absolute;top:-68%;left:0;}
	.box-pos2 > :last-child{width:100%;padding-left:44%;}
	.f3 .box-pos2 > :last-child{width:100%;padding-left:0;}
	.f3 .box-pos2 > :last-child p.orangetitle{width:50%;margin:0 0 0.5em 0;}
	.f-img3{width:54%;position:absolute;top:-32%;right:-6%;}
	.ftitle-m-r{left:46%;}
	.f4 .box-pos2 > :last-child{width:100%;padding-left:0;}
	.f4 .box-pos2 > :last-child p.orangetitle{width:100%;padding:0 0 0 50%;}
	.f-img4{width:54%;position:absolute;top:-32%;left:-8%;}
	.f4 .box-pos2 > :last-child{width:100%;padding-left:0;}
	.f5 .box-pos2 > :last-child{width:100%;padding-left:0;}
	.f5 .box-pos2 > :last-child p.orangetitle{width:50%;margin:0 0 0.5em 0;}
	.f-img5{width:54%;position:absolute;top:-32%;right:-6%;}
	.f6 .box-pos2 > :last-child{width:100%;padding-left:0;}
	.f6 .box-pos2 > :last-child p.orangetitle{width:100%;padding:0 0 0 50%;}
	.f-img6{width:54%;position:absolute;top:-32%;left:-8%;}
	.f-img8{margin:20px auto 0;}
	#feature .container .bv{width:80%;}

	#poster{padding:30px 0 60px;}
	#poster .container .section-title{width:74%;}
	.part-flex{margin:0 auto;}
	#poster .container .part-flex > :first-child{width:58%;margin:0 2% 0 0;}
	.boydog{width:26%;bottom:-10%;right:0;}

	#cards{padding:30px 0 75px;}
	#cards .container .section-title{width:62%;}
	#cards .container .part-flex{margin:0 auto 30px;}
	.playcards{top:46%;}
	.cards-3 img{width:100%;}	
}
@media (min-width:1200px){
	#bookintro{padding:45px 0 60px;}
	#bookintro .container .section-title{width:50%;padding:0 0 30px;}
	#bookintro .coverimg{width:88%;padding-right:0;}
	#bookintro .aboutbook{width:96%;}
	#bookintro .aboutbook > :last-child{width:auto !important;flex:1 !important;}
	#bookintro .container p.pricetxt{padding-left:21% !important;}
	#bookintro .buybtn img{margin:0 0 0 20%;}
	.yellow-hint{width:82%;padding:0.75% 1%;margin:35px auto 30px;}
	.yellow-hint > p.redtxt{font-size:1.45rem;}
	.yellow-hint > p.txt01{font-size:1.35rem;}
	.recommendbox{width:96%;}
	.r-list{width:34%;}
	.r-list li p.txt01{font-size:1.125rem !important;}
	.r-list li > p.txt01 span.orangetxt{font-size:1.25em !important;margin-right:0.5em !important;}
	.recommendbox > :last-child{width:28%;}
	.recommendbox > :last-child > :first-child{width:100%;}
	.recommendbox > :last-child > :nth-child(2){width:100%;}
	.recommendbox > :last-child > :last-child > p.txt01 span.orangetxt{display:block;} 

	#instruction .container .section-title{width:100%;padding:0 0 30px;}

	#feature .container .section-title{width:26%;padding:0 0 35px;}
	.bookslogan3 img{width:100%;margin:0 auto 25px;}
	ul.bluelabel{width:90%;margin:0 auto 95px}
	ul.bluelabel li{padding:1% 3%;}
	ul.bluelabel li p{font-size:1.35rem}
	.f-img1{width:48%;top:-82%;}
	.f1 .box-pos > :last-child p.orangetitle{width:50%;}
	.featurebox{margin:0 auto 75px}
	.featurebox2, .featurebox3{margin:0 auto 75px;}
	.featurebox4{padding:10% 6% 4% 8%;}
	.featurebox5{padding:6% 5% 0%;}
	.ftitle-m{top:-16%;}
	.f-img3{top:-46%;}
	.f-img4{top:-55%;}
	.f-img5{top:-43%;}
	.f-img6{top:-43%;}
	#feature .container .bv{width:96%;}

	#poster{padding:45px 0 60px;}
	.part-flex{width:96%;}
	#poster .container .part-flex > :first-child{margin:0;}
	.boydog{width:24%;bottom:-8%;right:-5%;}

	#cards .container .part-flex{width:92%;}
	#cards .container .part-flex > :first-child{width:70%;}
	#cards .container .part-flex > :nth-child(2){padding-left:0}
	.playcards{right:5%;}
}
@media (min-width:1400px){
	.yellow-hint{width:72%;}
	#bookintro .coverimg{width:100%;}
	#bookintro .aboutbook{width:92%;}
	.recommendbox{width:86%;}
	.r-list li{margin-bottom:0.5em}

	ul.bluelabel{width:78%;}
	.f-img1{width:52%;top:-90%;}
	.f-img4{top:-46%;}

	.part-flex{width:100%;}
	#cards .container .part-flex{width:96%;}
	.playcards{right:11%;}
}



/*** page4-保固說明登錄 ***/
#register{width:100%;margin:0;padding:20px 0 30px;text-align:center;}
#register .container .section-title{width:86%;padding:0 0 15px;}
#register .container h2{margin-bottom:1em;padding:0 0.75em;text-align:justify}
.noticebox{width:90%;margin:0 auto 1em;}
.noticebox > :first-child{width:45%;margin:0 auto 1.25em;}
.noticebox ul{width:96%;margin:0 auto;}
.noticebox ul li p{font-size:16px;padding-left:0.5em;margin-bottom:0.5em;text-indent:-0.6em;font-weight:500}
.noticebox ul li p span{font-size:0.75em;margin-right:0.5em;vertical-align:2px}
.noticebox ul > :nth-child(5) p{padding-left:0;}
.noticebox ul > :last-child p{padding-left:0 !important;text-indent:0 !important;margin-bottom:0.5em !important;}
.noticebox ul > :last-child p span{text-align:center;font-size:1.25em !important;}
.downloadbtn img{width:60%;margin:0 auto 1em;transition:all .1s linear;}
.downloadbtn:hover img{transform:scale(1.05);}
span.redtxt{color:#cc0000;font-size:1em !important;margin-right:0 !important;font-weight:600;vertical-align:inherit !important;}
span.infotxt{display:block;font-size:1em !important;color:#000 !important;margin-right:0 !important;letter-spacing:0;vertical-align:inherit !important;}
span.infotxt a{color:#0090ff;}
span.infotxt a:hover{color:#0090ff;border-bottom:1px #0090ff solid;padding-bottom:.5px;}
span.infotxt2{display:block;font-size:1em !important;color:#000 !important;margin-right:0 !important;letter-spacing:0;vertical-align:inherit !important;text-indent:-1.4em;padding-left:1.4em;}
.bg-yellow{background-color:#fff6d8;width:96%;margin:0 auto;border-radius:15px;padding:4% 2%;}
.psbox ul {padding-left:1em;}
.psbox ul li{text-align:left;}
.psbox ul li p{font-size:1.125rem;padding-left:0;line-height:1.6;text-indent:-0.4em;}
.psbox ul li p span{font-size:0.5rem;margin-right:0.5em;vertical-align:middle}

/*** page4-Q&A ***/
#qa{width:100%;margin:0;padding:30px 0;text-align:center;}
.qa-alert{width:92%;margin:0 auto 1em;display:flex;justify-content:center;align-items:flex-start;}
.qa-alert > img{width:10%;max-width:110px;margin-right:3%}
.qa-alert > p.redtxt{line-height:1.5;}

/*折疊*/
.field{width:96%;margin:0 auto;}
.lab{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0.75em 0.25em 0.75em 0.75em;margin-bottom:0.75em !important;background-color:#e4f6f5;}
.lab span{color:#1f2678;font-family:"Open Sans","Noto Sans TC","Zen Maru Gothic","M PLUS Rounded 1c","SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue",Helvetica,Arial,"Microsoft JhengHei",微軟正黑體,sans-serif;font-size:18px;font-weight:700;text-align:left;padding-left:2.25em;text-indent:-2.35em;}
.lab img{width:26px;height:auto;}

.content{width:100%;height:0;overflow:hidden;transition:height .3s linear;margin-bottom:.5em;}
.content p{font-size:16px;font-weight:500 !important;padding-left:2.5rem;text-indent:-2.3rem;}
.content p span{color:#cc0000;font-weight:600 !important;vertical-align:middle}
.content ul li p{padding-left:1rem;text-indent:-0.5rem;}
.content ul li p span{color:#000 !important;font-size:0.5rem;margin-right:0.5rem;}
.bearepen-logo{width:54%;max-width:250px;margin:0.5em auto;}
.red-icon{width:5.5%;max-width:40px;margin:0 0.1rem;padding-bottom:0.2em}
.cable-icon{width:12%;max-width:50px;margin:0 0.1rem;padding-bottom:0.2em}
.power-icon, .black-icon{width:6%;max-width:40px;margin:0 0.1rem;padding-bottom:0.2em}
.volume-icon{width:12.5%;max-width:86px;margin:0 0.1rem;padding-bottom:0.25em}
span.dot-icon{color:#000 !important;font-size:0.5rem;margin-right:0.5rem;vertical-align:middle}
.qs-box{margin-top:0.75em;margin-bottom:1em;}
.qs-box p{padding-left:0rem !important;text-indent:0rem !important;}

.ipt{display:none;}
.ipt:checked ~ .content{height:fit-content;padding:0 2% 4% 3%;}
.ipt:checked ~ .lab img{transform:rotate(90deg);}

.qa-note{width:92%;margin:0 auto 1.25em;}
.qa-note p{font-size:16px;padding-left:0;line-height:1.6;font-weight:500;}
.qa-note p.redtxt{font-size:1.125rem !important;font-weight:700 !important;}
.field > :nth-child(3) > .content > :nth-child(2){padding-left:0 !important;text-indent:0 !important;}
.field > :nth-child(7) > .content > :nth-child(2){text-indent:0 !important;}
.field > :nth-child(7) > .content > :nth-child(3){text-indent:0 !important;margin-bottom:0.75em;}
p.text-justify span{font-weight:500 !important;}

@media (min-width:768px){
	#register{padding:30px 0 45px;}
	#register .container .section-title{width:54.8%;padding:0 0 25px}
	#register .container h2{font-size:1.285rem;padding:0 1.25em;letter-spacing:-0.25px;}
	.noticebox{width:95%;margin:0 auto 1.5em;display:flex;justify-content:center;align-items:flex-start;}
	.noticebox > :first-child{width:25%;margin:0;transform:rotate(-3.5deg);padding-top:0.75em;}
	.noticebox ul{width:auto;flex:1;padding-left:4%;}
	.noticebox ul li p{font-size:1.125rem;margin-bottom:0.25em;padding-left:1.25em;}
	.noticebox ul > :nth-child(5) p{padding-left:0.65em;}
	.noticebox ul > :last-child p span{font-size:1.125em !important;}
	.downloadbtn img{width:38%;}
	.bg-yellow{width:98%;border-radius:20px;padding:2%;}
	.psbox ul li p span{margin-right:0.75em;}

	#qa{padding:30px 0 60px;}
	.qa-alert{width:90%;margin:0 auto 1.25em;justify-content:flex-start;align-items:center;}
	.qa-alert > img{width:7%;margin-right:2%}
	.qa-alert > p.redtxt{font-size:1.3rem;margin-bottom:0;}
	.field{margin:1.25em auto;}
	.lab{padding:0.75em;}
	.lab span{font-size:1.25rem;}
	.content p{font-size:1.125rem !important;padding-left:2.5rem;text-indent:-2.6rem;}
	.content ul {padding-left:1.25rem;}
	.content ul li p{padding-left:0;}
	.field > :nth-child(5) > .content {display:flex;justify-content:space-between;align-items:flex-start;}
	.bearepen-logo{width:27%;margin:0;padding:1% 0 0 4%;}
	.red-icon{width:3%;margin:0 0.15rem;}
	.cable-icon{width:15%;margin:0 0.15rem;}
	.power-icon, .black-icon{width:3.5%;}
	.volume-icon{width:7.5%;}
	.qs-box{padding-left:2.5rem;}
	.qs-box p{padding-left:0 !important;text-indent:0 !important;}
	.qs-box > :nth-child(2){padding-left:1rem !important;text-indent:-1rem !important;}
	.ipt:checked ~ .content{padding:0 3% 2% 2%;}
	.qa-note{width:96%;}
	.qa-note p{font-size:1.125rem;padding-right:1em;}
	.qa-note p.redtxt{font-size:1.3rem !important;}
	.qa-note span.infotxt{font-size:1.125rem !important;}
	.field > :nth-child(7) > .content > :nth-child(4) > :last-child{padding-left:0 !important;text-indent:0 !important;margin:0.5em 0;}
}
@media (min-width:992px){
	#register{padding:50px 0 60px;}
	#register .container .section-title{width:44.4%;}
	#register .container h2{font-size:1.375rem;letter-spacing:0.25px;padding:0 1.5em;margin-bottom:1.25em;text-align:center;}
	.noticebox{width:92%;margin:0.75em auto 1.25em;}
	.noticebox > :first-child{width:20%;padding-top:0;}
	.noticebox ul li p{font-size:1.25rem;font-weight:500;}
	.noticebox ul > :nth-child(5) p{margin-top:0.5em;}
	.noticebox ul > :last-child {display:flex;justify-content:flex-start;align-items:center;}
	.noticebox ul > :last-child p{margin-bottom:0 !important;}
	.downloadbtn{width:auto;flex:1;padding:0 0 0 1%;}
	.downloadbtn img{width:100%;max-width:250px;margin:0;}
	.psbox ul li p{font-size:1.125rem;font-weight:500;}

	#qa{padding:50px 0 60px;}
	.qa-alert > img{width:4%;margin-right:1.5%}
	.qa-alert > p.redtxt{font-size:1.375rem;}
	.field{width:95%;}
	.lab img{width:25px;}
	.content p{font-size:1.25rem !important;text-indent:-2.9rem;}
	.bearepen-logo{width:22.4%;padding:1% 0 0 3%;}
	.red-icon{width:2%;}
	.power-icon, .black-icon{width:2.75%;padding-bottom:0.25em}
	.volume-icon{width:6%;}
	.qs-box{margin-bottom:15px;}
	.qa-note p{font-size:1.25rem;}
	.qa-note p.redtxt{font-size:1.375rem !important;}
	.qa-note span.infotxt{font-size:1.25rem !important;}
}
@media (min-width:1200px){
	#register{padding:30px 0 60px;}
	#register .container .section-title{width:100%;padding:0 0 30px;}
	#register .container h2{padding:0 3.25em;}
	.noticebox{width:88%;margin:0 auto 2em;}
	.downloadbtn{padding:0 10% 0 1%;}
	.psbox ul li p{font-size:1.25rem;}

	.qa-alert{width:80%;}
	.qa-alert > p.redtxt{font-size:1.5rem !important;}
	.field{width:95%;margin:1.5em auto;}
	.lab{padding:1em;}
	.lab span{font-size:1.375rem;}
	.bearepen-logo{width:22%;padding:0 0 0 3%;}
	.ipt:checked ~ .content{padding:0 4% 2% 2%;}
	.volume-icon{width:5.5%;}
	.qs-box{margin-bottom:20px;}
	.qa-note{width:95%;margin:0 auto 1.75em;}
	.qa-note p.redtxt{font-size:1.5rem !important;}
}
@media (min-width:1400px){
	#register .container h2{padding:0 2.5em;}
	.noticebox{width:80%;}
	.noticebox > :first-child{width:21%;padding:0 0 0 3%;}
	.noticebox ul li p{margin-bottom:0.25em;}
	.downloadbtn{padding:0 14% 0 1%;}
	.bg-yellow{width:90%;}

	.qa-alert{width:84%;}
	.qa-alert > img{width:5%;}
	.field{width:100%;}
	.ipt:checked ~ .content{padding:0 2.5% 2% 2%;}
	.red-icon{width:2%;}
	.power-icon, .black-icon{width:2.5%;}
	.qa-note{width:100%;}
}


/*** footer ***/
footer{width:100%;height:auto;background:#25b7aa url('https://event.bookrep.com.tw/activity/bearepen/images/hd2_bg-s.png') center top no-repeat;background-size:cover;padding:0.5em 0 0.75em;}
.logobox{width:54%;margin:0.25em auto 0.4em;}
.logobox > :first-child > :first-child{margin-right:0.75em;}

@media (min-width:768px){
	footer{padding:1em 0}
	.logobox{width:40%;}
}
@media (min-width:992px){
	.logobox{width:60%;margin:0.35em auto 0.4em;}
}
@media (min-width:1200px){
	footer{width:100%;height:auto;background:#25b7aa url('https://event.bookrep.com.tw/activity/bearepen/images/hd2_bg.png') center top no-repeat;background-size:cover;}
}
@media (min-width:1400px){
	.logobox{width:48%;}
}


/*** 右側浮動 ***/
a.rightbtn img{display:none;}

@media (min-width:992px){
	#right{width:10%;max-width:208px;position:fixed;z-index:700;right:0.5em;bottom:1rem;cursor:pointer;}
	a.rightbtn img{display:block;width:100%;height:auto;text-indent:-9999px;cursor:pointer;transition:all .1s linear;}
	a.rightbtn:hover img{transform:scale(1.1);}
}
@media (min-width:1200px){
	#right{right:0.5em;bottom:3.5rem;}
}
@media (min-width:1400px){
	#right{width:8%;right:4%;bottom:3rem;}
}
@media (min-width:1600px){
	#right{right:10%;}
}


 /*動態*/
.animated{animation-fill-mode:both}
.animated-n{animation-fill-mode:none}
.animated.infinite {animation-iteration-count:infinite}

.titlezoom {opacity:0;animation-name:titlezoom;animation-timing-function:ease-in-out;}
@-webkit-keyframes titlezoom {
    0% {opacity:1;transform:scale3d(1, 1, 1)}
    100% {opacity:1;transform:scale3d(1.03, 1.03, 1.03)}
}
@keyframes titlezoom {
    0% {opacity:1;transform:scale3d(1, 1, 1)}
    100% {opacity:1;transform:scale3d(1.03, 1.03, 1.03)}
}

.focuszoom {opacity:0;animation-name:focuszoom;animation-timing-function:ease-in-out;}
@-webkit-keyframes focuszoom {
    0% {opacity:1;transform:rotate(10deg) scale3d(1, 1, 1);}
    100% {opacity:1;transform:rotate(10deg) scale3d(1.1, 1.1, 1.1);}
}
@keyframes focuszoom {
    0% {opacity:1;transform:rotate(10deg) scale3d(1, 1, 1);}
    100% {opacity:1;transform:rotate(10deg) scale3d(1.1, 1.1, 1.1);}
}

.focuszoom2 {opacity:0;animation-name:focuszoom2;animation-timing-function:ease-in-out;}
@-webkit-keyframes focuszoom2 {
    0% {opacity:1;transform:rotate(10deg) scale3d(1.1, 1.1, 1.1);}
    100% {opacity:1;transform:rotate(10deg) scale3d(1, 1, 1);}
}
@keyframes focuszoom2 {
    0% {opacity:1;transform:rotate(10deg) scale3d(1.1, 1.1, 1.1);}
    100% {opacity:1;transform:rotate(10deg) scale3d(1, 1, 1);}
}