@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* ---reset.css--- */
html, body{	
	font-family:/*'Noto Serif TC',*/ "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

html{
	background: url("../images/bg.jpg") top center repeat;;
}
body{ }

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	      line-height:1;
}

:focus { outline: 0; }

li{ list-style:none;} 
a { text-decoration:none;}




/* 滑鼠動態效果 */
.container li {  float:left;
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
/*
.container li:active, .container li:focus, .container li:hover{
	-webkit-transform:translateY(-8px);
		    transform:translateY(-8px)}
*/



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 768px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { width: 1200px; margin: auto;min-width:1200px; }
.topbox { position: relative; width: 1200px; margin: auto;}
.title01, .title02, .title03, .title04, .phone { position: absolute; z-index: 5;}
.title01{ top: 0px; left: 212px; }
.title02{ top: 253px; left: 455px; }
.title03{ top: 533px; left: 455px; }
.title04{ top: 685px; left: 455px; }
.phone{ top: 187px; right: 0px;  animation: shakeA 6s linear 2s infinite alternate; }

.kv_pc {width: 100%;  position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat; background-color: #ea5513;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }



/* 獨家限量下載禮獲取流程 */
.bg01{ height: 493px;  background:url("../images/bg_01.jpg") top center no-repeat;  position: relative;}
.bg01 .phone02 { position: absolute; z-index: 5; bottom: 0px; left: 496px;  animation: shakeA 5s linear 2s infinite alternate; }
.bg01 .go { position: absolute; z-index: 5; bottom: 0px; left: 890px;}
.bg01 .apple { position: absolute; z-index: 5; bottom: -50px; left: 750px;}
.bg01 .google { position: absolute; z-index: 5; bottom: -50px; left: 950px;}
.bg01 .date { position: absolute; z-index: 5; top: 27px; left: 446px;}
/* 你的專屬APP */
.bg02  {  position: relative;}
.bg02 .app  { margin: 0 0 60px; }
.bg02 .more  { position: absolute; z-index: 5; top: 78px; left: 697px;}
.bg02 .app ul { display: flex; justify-content: center;}
.bg02 .app ul li {  margin: 10px 15px;}
	@media screen and ( max-width: 768px ){
		.kv_m .phone{ top: 192vw; right: 31vw;  animation: shakeA 6s linear 2s infinite alternate; }
		.kv_m .phone img{ width: 40vw; }
		.kv_m .date img{width: 70vw; position: relative;z-index: 5;margin: 2px 15vw -3vw;}

	}


		@-webkit-keyframes shakeA {
			0%   { transform: rotate(0deg);}
			5%   { transform: rotate(30deg);}
			8%   { transform: rotate(-30deg);}
			12%   { transform: rotate(30deg);}
			17%   { transform: rotate(-40deg);}
			19%   { transform: rotate(30deg);}
			21%   { transform: rotate(10deg);}
			22%   { transform: rotate(0deg);}
			82%   { transform: rotate(0deg);}
			86%   { transform: rotate(30deg);}
			90%   { transform: rotate(-30deg);}
			92%   { transform: rotate(25deg);}
			94%   { transform: rotate(-25deg);}
			96%   { transform: rotate(0deg);}
			100%   { transform: rotate(0deg);}
		}

/* m */
@media screen and ( max-width: 768px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.sidenav , .button { display: none; }	
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	.side-menu { display: none; }

}



/* AD */
.AD {width: 1200px; min-width: 1200px;}
.AD { margin: 0 auto 0px auto; padding: 20px 90px 20px 90px; overflow: hidden;/*background:url("../images/bg_01.jpg")*/  }
.AD ul li { margin: 10px 6px; float: left;}
.AD ul li img { width: 494px; }
@media screen and ( max-width: 768px ){	
/* AD */
.AD { margin: 0; padding: 2%; overflow: hidden;background:none; padding-bottom:0px; width: 100%; min-width: 100%;}
.AD ul li {overflow: hidden; float: none; }
.AD ul li {width: 96%; margin: 2%; }
.AD ul li img {width: 100%; }	
}


/* --中文 電腦版--*/
.index2{width:100%; height: 385px; display:block; position:relative; background: url(../images/index02.png)top center repeat;}
.index2_content{width:1200px; height:385px;display:block;line-height:0; margin:0 auto; position:relative;}
.S2_block{width:1020px; height:400px;text-align:center;  margin:0 auto;}
.item2{display: inline-block; width:220px; height:250px; margin:32px 10px 0px 10px; text-align:center;cursor: pointer;}
.item2 li:nth-child(1){ width:220px; display: block; height:220px;}
.item2 li:nth-child(1) img{height:205px; display: block; margin-top:18px; margin-left:auto; margin-right:auto;max-width:205px;}
.item2 li:nth-child(2){ width:220px;height:53px;font-size: 18px; font-weight:bold; color:#602e15; line-height:22px; vertical-align:middle;}
.item2 li:nth-child(3){color:#602e15; font-size:16px; margin-top:9px;font-weight:bold;height:20px; width:220px;}
.item2 li:nth-child(3) a{color:#602e15; font-size:16px; margin-top:0px;font-weight:bold;height:20px; width:220px;}
.item2 li:nth-child(3) span{color:#df2c09; font-size:24px; font-family:'Century Gothic'; font-weight:bold;}
.S2_more{ position: absolute; right:10%; bottom:-0.5%;}

/* --英文+兒童 電腦版--*/
.index3{width:100%; height: 385px; display:block; position:relative; background: url(../images/index03.png)top center repeat;}
.index3_content{width:1200px; height:385px;display:block;line-height:0; margin:0 auto; position:relative;}
.S3_block{width:1020px; height:400px;text-align:center;  margin:0 auto;}
.item3{display: inline-block; width:220px; height:250px; margin:35px 3px 0px 3px; text-align:center;cursor: pointer;}
.item3 li:nth-child(1){ width:220px; display: block; height:220px;}
.item3 li:nth-child(1) img{height:205px; display: block; margin-top:18px; margin-left:auto; margin-right:auto;max-width:205px;}
.item3 li:nth-child(2){ width:220px;height:53px;font-size: 18px; font-weight:bold; color:#602e15; line-height:22px; vertical-align:middle;}
.item3 li:nth-child(3){color:#602e15; font-size:16px; margin-top:9px;font-weight:bold;height:20px; width:220px;}
.item3 li:nth-child(3) a{color:#602e15; font-size:16px; margin-top:0px;font-weight:bold;height:20px; width:220px;}
.item3 li:nth-child(3) span{color:#df2c09; font-size:24px; font-family:'Century Gothic'; font-weight:bold;}
.S3_more{ position: absolute; right:53%; bottom:0;}
.S3_more2{ position: absolute; right:10%; bottom:0;}
.S3_break{ width:44px; display:inline-block;}

/* --AD1 電腦版--*/
.index4{width:100%; height: 270px; display:block; position:relative; background: url(../images/index04.png)top center no-repeat;}
.index4_content{width:1200px; height:270px;display:block;line-height:0; margin:0 auto; position:relative;}
.AD1{ background-image:url(../images/img/AD1_1000.jpg); width:1000px; height:240px; margin:0px auto 0px auto; display:block; cursor: pointer; position:relative;top:6%;}

/* --文具 電腦版--*/
.index5{width:100%; height: 435px; display:block; position:relative; background: url(../images/index05.png)top center repeat;}
.index5_content{width:1200px; height:435px;display:block;line-height:0; margin:0 auto; position:relative;}
.S5_block{width:1020px; height:400px;text-align:center;  margin:0 auto;}
.item5{display: inline-block; width:300px; height:390px; margin:38px 6px 0px 6px; text-align:center;cursor: pointer;}
.item5 li:nth-child(1){ width:300px; display: block; height:275px;}
.item5 li:nth-child(1) img{height:265px; display: block; margin-top:18px; margin-left:auto; margin-right:auto;max-width:265px;}
.item5 li:nth-child(2){ width:300px;height:48px;font-size: 18px; font-weight:bold; color:#602e15; line-height:22px; vertical-align:middle;}
.item5 li:nth-child(3){color:#602e15; font-size:16px; margin-top:9px;font-weight:bold;height:20px; width:300px;}
.item5 li:nth-child(3) a{color:#602e15; font-size:16px; margin-top:0px;font-weight:bold;height:20px; width:300px;}
.item5 li:nth-child(3) span{color:#df2c09; font-size:24px; font-family:'Century Gothic'; font-weight:bold;}
.S5_more{ position: absolute; right:10%; bottom:0;}

/* --禮用 電腦版--*/
.index6{width:100%; height: 435px; display:block; position:relative; background: url(../images/index06.png)top center repeat;}
.index6_content{width:1200px; height:435px;display:block;line-height:0; margin:0 auto; position:relative;}
.S6_block{width:1020px; height:400px;text-align:center;  margin:0 auto;}
.item6{display: inline-block; width:300px; height:390px; margin:38px 6px 0px 6px; text-align:center;cursor: pointer;}
.item6 li:nth-child(1){ width:300px; display: block; height:275px;}
.item6 li:nth-child(1) img{height:265px; display: block; margin-top:18px; margin-left:auto; margin-right:auto;max-width:265px;}
.item6 li:nth-child(2){ width:300px;height:48px;font-size: 18px; font-weight:bold; color:#602e15; line-height:22px; vertical-align:middle;}
.item6 li:nth-child(3){color:#602e15; font-size:16px; margin-top:9px;font-weight:bold;height:20px; width:300px;}
.item6 li:nth-child(3) a{color:#602e15; font-size:16px; margin-top:0px;font-weight:bold;height:20px; width:300px;}
.item6 li:nth-child(3) span{color:#df2c09; font-size:24px; font-family:'Century Gothic'; font-weight:bold;}
.S6_more{ position: absolute; right:10%; bottom:1%;}



/* --手機版型------------------------------------- */
@media screen and ( max-width: 768px ){
   html, body{ 
    min-width: 320px;
	max-width: 768px;
/*
   	overflow: auto;
   	overflow-x: hidden;
*/
    	width: 100%;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-family: Microsoft JhengHei;
/*		background-color:#fff;*/
    }

	
/*
.WRAPPER{ width:100%; min-width: 320px;max-width: 768px; }
.header_m{ width:100%; height:30px; position:relative;top:0; display:block; padding:5px 0; background-color:#fcc31a;}
.header_m img{ width:120%; height:auto; display:block; }
#tob{ width:50%; font-size:70%}
.top{ display:none;}
.header{ width:100%; height:492px; display:block; position:relative; background:#fcc31a;}
.header_content{width:100%; height:auto;display:block;line-height:0; position:relative; margin:0 auto;}	
.notice{ width:100%; height:492px; margin:0 auto;}
*/

/* --主要活動 手機版--*/
.index1{width:100%; min-width:320px; height: 1662px; display:block; position:relative; background: url(../images/index01_m.jpg)top center no-repeat;}
.index1_content{width:100%; height:auto;display:block;line-height:0; margin:0 auto; position:relative;}
.S1_block{width:100%; height:auto;text-align:center;  margin:0 auto;}
.item1{display:block; width:320px; height:530px; margin:0px auto -30px auto; text-align:center;}
.item1 li:nth-child(1){ width:100%; display: block; height:295px; margin-top:65px;}
.item1 li:nth-child(1) img{height:272px; display: block; margin:18px auto 0 auto; margin-top:18px;max-width:272px;}
.item1 li:nth-child(2){ width:100%;height:53px;font-size: 20px; font-weight:bold; color:#3b1705; line-height:24px; vertical-align:middle; }
.item1 li:nth-child(3){color:#ff6600; font-size:14px; margin-top:10px;font-weight:bold;height:20px; width:100%;}
.item1 li:nth-child(3) span{color:#df2c09; font-size:24px; font-family:'Century Gothic'; font-weight:bold;}
.item1 li:nth-child(4){ width:320px;}
.item1 li:nth-child(4) hr{height: 1px; width:290px;color:#000; margin:0 auto;}
.item1 li:nth-child(5) div{width:274px; height:20px;margin:10px 20px 0 20px;}
.item1 li:nth-child(5){font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px; width:100%; text-align:left;}
.item1 li:nth-child(5) a{font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px; width:100%; text-align:left;}
.item1 li:nth-child(6) div{width:274px; height:40px;margin:10px 20px 20px 20px;}
.item1 li:nth-child(6){font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px; width:100%; text-align:left;}
.item1 li:nth-child(6) a{font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px; width:100%; text-align:left;}
.item1_board{display: inline-block; width:320px; height:550px; margin:65px 0px 0px 0px; text-align:center;}
.item1_board li:nth-child(1){ width:320px; display: block; height:50px;}
.item1_board li:nth-child(1) img{ width:100%; display: block; height:29px; margin:18px 0px 0px 0px;}
.item1_board li:nth-child(2){ width:320px; display: block; height:305px;}
.item1_board li:nth-child(2) img{height:272px; display: block; margin:18px auto 0 auto; margin-top:18px;}
.item1_board li:nth-child(3){ width:320px;height:35px;font-size: 20px; font-weight:bold; color:#3b1705; line-height:24px; vertical-align:middle;}
.item1_board li:nth-child(3) a{ width:320px;height:35px;font-size: 20px; font-weight:bold; color:#3b1705; line-height:24px; vertical-align:middle;}
.item1_board li:nth-child(4){width:320px; height:15px;}
.item1_board li:nth-child(4) hr{height: 1px; width:290px;color:#000; margin:0 auto;}
.item1_board li:nth-child(5) div{ width:274px; height:25px;margin:-5px 20px 0 20px;}
.item1_board li:nth-child(5){ width:100%;height:30px;font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px;text-align:left;}
.item1_board li:nth-child(5) a{ width:100%;height:30px;font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px;text-align:left;}
.item1_board li:nth-child(6) div{ width:274px; height:25px;margin:-5px 20px 0 20px;}
.item1_board li:nth-child(6){ width:100%;height:30px;font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px; text-align:left;}
.item1_board li:nth-child(6) a{ width:100%;height:30px;font-size: 16px; font-weight:bold; color:#3b1705; line-height:20px;text-align:left;}

/* --中文 手機版--*/
.index2{width:100%; min-width:320px; height: 548px; display:block; position:relative; background: url(../images/index02_m.jpg)top center no-repeat; background-color: #fff; margin-top: 9vw;}
.index2_content{width:100%; height:548px;display:block;line-height:0; margin:0 auto; position:relative;}
.S2_block{width:320px; height:548px;text-align:center;  margin:-35px auto 0px auto; padding: 40px 0 0;}
.item2{display: inline-block; width:150px; height:200px; margin:10px 0; text-align:center;}
.item2 li:nth-child(1){ width:150px; display: block; height:155px;}
.item2 li:nth-child(1) img{height:150px; display: block; margin-top:14px; margin-left:auto; margin-right:auto;max-width:150px;}
.item2 li:nth-child(2){ width:150px;height:45px;font-size: 14px; font-weight:bold; color:#602e15; line-height:18px; vertical-align:middle;}
.item2 li:nth-child(3){color:#602e15; font-size:12px; margin-top:9px;font-weight:bold;height:20px; width:150px;}
.item2 li:nth-child(3) a{color:#602e15; font-size:12px; margin-top:0px;font-weight:bold;height:20px; width:150px;}
.item2 li:nth-child(3) span{color:#df2c09; font-size:16px; font-family:'Century Gothic'; font-weight:bold;}
.S2_more{ position: relative; bottom:-7%; right:-35%;}
	
/* --英文+兒童 手機版--*/
.index3{width:100%; min-width:320px; height: 620px; display:block; position:relative; background: url(../images/index03_m.jpg)top center no-repeat; background-color: #fff;}
.index3_content{width:100%; height:620px;display:block;line-height:0; margin:0 auto; position:relative;}
.S3_block{width:320px; height:620px;text-align:center;  margin:-5px auto 0px auto;}
.item3{display: inline-block; width:150px; height:200px; margin:45px 0px 65px 0px; text-align:center;}
.item3 li:nth-child(1){ width:150px; display: block; height:155px;}
.item3 li:nth-child(1) img{height:150px; display: block; margin-top:14px; margin-left:auto; margin-right:auto;max-width:150px;}
.item3 li:nth-child(2){ width:150px;height:45px;font-size: 14px; font-weight:bold; color:#602e15; line-height:18px; vertical-align:middle;}
.item3 li:nth-child(3){color:#602e15; font-size:12px; margin-top:9px;font-weight:bold;height:20px; width:150px;}
.item3 li:nth-child(3) a{color:#602e15; font-size:12px; margin-top:0px;font-weight:bold;height:20px; width:150px;}
.item3 li:nth-child(3) span{color:#df2c09; font-size:16px; font-family:'Century Gothic'; font-weight:bold;}
.S3_more{ position: relative; bottom:55%; right:-47%;}
.S3_more2{ position:relative; bottom:5.5%; right:-24%;}
.S3_break{ display:none;}

/* --AD1 手機版--*/
.index4{width:100%; min-width:320px;height:160px; display:block; position:relative; margin-top:-2px;}
.index4_content{width:100%; min-width:320px;height:160px;display:block;line-height:0; margin:0 auto; position:relative;}
.AD1{background: url(../images/img/AD1_640.jpg) top center no-repeat; background-size:100%; width:320px;}

/* --文具 手機版--*/
.index5{width:100%; min-width:320px; height: 1200px; display:block; position:relative; background: url(../images/index05_m.jpg)top center no-repeat; background-color: #fff;}
.index5_content{width:100%; height:1200px;display:block;line-height:0; margin:0 auto; position:relative;}
.S5_block{width:320px; height:400px;text-align:center;  margin:0 auto; padding: 40px 0 0;}
.item5{display: inline-block; width:300px; height:320px; margin:15px 6px 0px 6px; text-align:center;cursor: pointer;}
.item5 li:nth-child(1){ width:300px; display: block; height:275px;}
.item5 li:nth-child(1) img{height:265px; display: block; margin-top:18px; margin-left:auto; margin-right:auto;max-width:265px;}
.item5 li:nth-child(2){ width:300px;height:48px;font-size: 18px; font-weight:bold; color:#602e15; line-height:22px; vertical-align:middle;}
.item5 li:nth-child(3){color:#602e15; font-size:16px; margin-top:9px;font-weight:bold;height:20px; width:300px;}
.item5 li:nth-child(3) a{color:#602e15; font-size:16px; margin-top:0px;font-weight:bold;height:20px; width:300px;}
.item5 li:nth-child(3) span{color:#df2c09; font-size:24px; font-family:'Century Gothic'; font-weight:bold;}
.S5_more{ position: relative;bottom:-16%; right:-35%;}

/* --禮用 手機版--*/
.index6{width:100%; min-width:320px; height: 1206px; display:block; position:relative; background: url(../images/index06_m.jpg)top center no-repeat; background-color: #fff;}
.index6_content{width:100%; height:1206px;display:block;line-height:0; margin:0 auto; position:relative;}
.S6_block{width:320px; height:400px;text-align:center;  margin:0 auto; padding: 40px 0 0;}
.item6{display: inline-block; width:300px; height:320px; margin:15px 6px 0px 6px; text-align:center;cursor: pointer;}
.item6 li:nth-child(1){ width:300px; display: block; height:275px;}
.item6 li:nth-child(1) img{height:265px; display: block; margin-top:18px; margin-left:auto; margin-right:auto;max-width:265px;}
.item6 li:nth-child(2){ width:300px;height:48px;font-size: 18px; font-weight:bold; color:#602e15; line-height:22px; vertical-align:middle;}
.item6 li:nth-child(3){color:#602e15; font-size:16px; margin-top:9px;font-weight:bold;height:20px; width:300px;}
.item6 li:nth-child(3) a{color:#602e15; font-size:16px; margin-top:0px;font-weight:bold;height:20px; width:300px;}
.item6 li:nth-child(3) span{color:#df2c09; font-size:24px; font-family:'Century Gothic'; font-weight:bold;}
.S6_more{ position: relative;bottom:-16%; right:-35%;}


}




/*--goto top--*/
#gotop {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 0px;
  right: 0px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  margin: 30px;
}
@media screen and ( max-width: 768px ){
#gotop {
  bottom: 2vw;
  right: 0;
  margin: 2vw;	
	}
  	
}

#gotop::after {
  font-family: FontAwesome;
  content:'　';
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
    opacity:0.5;
	background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;
}
#gotop:hover {
  cursor: pointer;
  background-color: #666;
}
#gotop:active {
  background-color: #666;
}
#gotop.show {
  opacity: 0.4;
  visibility: visible;
}