@charset "utf-8";
/*{ box-sizing:border-box;border:1px  #268A28 solid;}
/* 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;}
a {text-decoration:none;}
/* ---reset.css--- */

html, body{	
	font-family:'Noto Serif JP','Noto Serif TC','Microsoft JhengHei','Helvetica','verdana','Georgia','apple LiGothic Medium','arial','Courier','Times','Heiti TC';
	font-size:20px;
	line-height:20px;
	-webkit-text-size-adjust:none;
	box-sizing: border-box;
	scroll-behavior: smooth;
	background:#fbf5ea;
}
@media screen and ( max-width: 768px ){
   html, body{ 
	background:#fbf5ea;
    min-width: 320px;
	max-width: 768px;
    	width: 100%;}}


*{-webkit-box-sizing:border-box;box-sizing:border-box;}

:focus { outline: 0; }
h1{ text-indent:-9999px; position:absolute;}
a{text-decoration:none;}
img{ vertical-align:top;}


header{ width:100%; min-width: 1200px;}	
footer{ width:100%; min-width: 1200px;}
	@media screen and ( max-width: 768px ){
		header{ width: 100%;min-width: 100%;}
		footer{ width: 100%; min-width: 100%; padding-bottom: 70px;}
}


/* --通用-- */
.container{ max-width:1920px; overflow:hidden; min-width:1200px; margin:0 auto; background: url("../images/m/mbg_y2.png") repeat;}
.box_content{ width:1200px; margin:0 auto; padding:0 20px 20px 20px;}
.item_pc{ display:block;}
.item_m{ display:none;}
ul{ display:inline-block;/*overflow:hidden;*/}
li{ list-style:none; /*float:left;*/ overflow:hidden;}
.title{ padding-top:20px; margin:0 auto; text-align:center;/* border-bottom:1px #053644 solid;*/ height:4rem; margin-bottom:10px; /*background:url(../images/bg_theme1.png) no-repeat center;*/ color: #116286;}
.box2 .box_content .title, .box3 .box_content .title, .box5 .box_content .title{ background:url(../images/bg_theme2.png) no-repeat center;}
.title ul{ overflow:visible; padding:10px 0;/*background: url(../images/bg_content1.png) top center repeat;*/}
.title ul li{ font-size:2.2rem; font-weight:bold; padding:0 15px;overflow:visible; border-right:#053644 1px solid;}
.title ul li:last-child{border-right:none;}
/*.title p{ font-size:2.2rem; line-height:2.2rem; font-weight:bold; padding:0 15px;}
.title span{ font-size:1rem; line-height:2rem; font-weight:bold; padding:0 15px;}*/

.title01{ position: absolute; top:119px; left: 460px; z-index: 10;}
.title02{ position: absolute; top:46px; left: 155px; z-index: 10;}
.title03{ position: absolute; top:498px; left: 570px; z-index: 10;}
.click_ani{ position: absolute; top:130px; left: 190px; z-index: 10;animation-name:ani01; animation-duration: 3s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
@keyframes ani01{0%{ transform:scale(1);} 20%{transform:scale(1);}  25%{transform:scale(0.8);} 30%{transform:scale(1);} 50%{transform:scale(1);} 53%{transform:scale(0.8);}56%{transform:scale(1);} 
	60%{transform:scale(1);} 63%{transform:scale(0.8);}66%{transform:scale(1);}100%{transform:translateY(0px);}}



h2{text-align:center; color:#123a13; font-size:20px;font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC';font-weight:500;  padding:8px 10px; line-height:24px; height:auto; background-color:#8D1113;}
.proname{font-family:'Noto Serif TC','Microsoft JhengHei','Heiti TC'; font-weight:normal;color:#000; font-size:15px; padding:10px 10px 15px 10px;}	
.number{ color:#982121; font-size:26px; font-family: 'Noto Sans TC',Arial, Helvetica, sans-serif; font-weight:bold;}	
	@media screen and ( max-width: 768px ){
		.container{ width:100%; max-width:768px; min-width:320px; max-width:100vw;}
		.box_content{ width:96vw; padding:0px; }
		.item_pc{ display:none;}
		.item_m{ display:block;}
		.item_m img{ margin:0 auto; width:100%;}
		h2{font-size:0.8rem;}
		.title{ background:none; padding-top:2vw; line-height:2rem; height:auto;}
		.proname{font-size:14px; padding:1vw 0 2vw 0;}	
        .number{font-size:1.2rem;}
		.title{ height:auto; margin-bottom:3%;padding:0 2px;  }
		.title ul li{ font-size:1.6rem;padding:0 10px; border-right:none;}
		.title ul{  padding:20px 0;}
		/*.title p{ font-size:1.5rem; line-height:1.5rem; }
		.title span{ font-size:0.8rem; line-height:1.5rem; }*/
	}
	@media screen and ( max-width: 540px ){	
			.title{ height:auto; margin-bottom:1%; }
			.title ul li{ font-size:1.4rem; padding:0 1px; border-right:none; line-height: 1.6rem;}
			.title ul{  padding:10px 0;}
	}



/* --誠品獨家-- */	
.ex_text{ position:absolute; top:5px; left:25px; font-size:0.9rem; width:1.8rem; color:#ffe970; font-weight:500;}
.ex_tag{ position:absolute; width:70px; top:-8px; left:15px;}
	@media screen and ( max-width: 768px ){
		.ex_tag{ position:absolute; width:72px; top:-8px; left:15px;}}
	@media screen and ( max-width: 540px ){
				.ex_tag{ position:absolute; width:60px; top:-8px; left:13px;}
				.ex_text{top:5px; left:23px; font-size:0.7rem; width:1.4rem; line-height:0.9rem;}}



/* --主視覺-- */
.kv{width:100%;background: url(../images/kv.jpg) top center no-repeat; height:620px; display:block;}	
.kv_content{ position:relative; max-width:1200px; margin:0 auto; height:620px;background: url(../images/kv.jpg) top center no-repeat; }
.kv_m{ display:none;}

.kv_title{ position:absolute; top:162px; left:297px;}
.sp_5{ position:absolute; top:343px; left:757px;}
.sp_3000{ position:absolute; top:503px; left:406px;}
	@media screen and ( max-width: 768px ){
		.kv{ width:100vw;background:none; background-size:100%;height:auto;}
		.kv_content{ height:auto; max-width:100%;}
		.kv_pc{ display:none;}
		.kv_m{ display:block;width: 100%;}
		.kv_m img{ display:block;width: 100%;}
		.sale,.promo01,.promo02,.promo03{ display:none;}
		.sale_m{ width:100vw; display: block;}
		.sale_m img{ width:100%;}
	}


.title_item{position:absolute; z-index: 10;}
.title01{ top:162px; left: 390px;}
.title02{ top:65px; left: 435px;z-index: 9;}
.sale{ top:412px; left: 785px;}

.star01{ top:467px; left: 534px;}
.star02{ top:515px; left: 465px;}
.star03{ top:515px; left: 649px;}
.star04{ top:545px; left: 409px;}
.star05{ top:545px; left: 731px;}

.mv01{ top:102px; left: 170px;}
.like01{ top:114px; left: 1126px;}
.like02{ top:64px; left: 178px;}
.like03{ top:104px; left: 47px;}


.mv_ani1{ position: absolute; top:0px; left: 0px; z-index: 10;animation-name:ani2; animation-duration: 2s;animation-iteration-count:infinite; animation-timing-function:linear;}
.like_ani1{ position: absolute; top:0px; left: 0px; z-index: 10;animation-name:ani1; animation-duration: 3s;animation-iteration-count:infinite; animation-timing-function:linear;}
.like_ani2{ position: absolute; top:0px; left: 0px; z-index: 10;animation-name:ani1; animation-duration: 3s;animation-iteration-count:infinite; animation-timing-function:linear;}
.like_ani3{ position: absolute; top:0px; left: 0px; z-index: 10;animation-name:ani1; animation-duration: 2s;animation-iteration-count:infinite; animation-timing-function:linear;}
@keyframes ani1{0%{transform:translate(0px,0px)} 30%{transform:translate(0px,4px)}  70%{transform:translate(0px,-4px)}100%{transform:translate(0px,0px)}}
@keyframes ani2{0%{ opacity: 1;} 30%{opacity: 0.5;}  55%{opacity: 1;}70%{opacity: 0.5;} 100%{opacity: 1;}}
#loading {-webkit-animation: rotation 4s infinite linear; position: absolute; top: 189px; left: 96px;}
#loading2 {-webkit-animation: rotation 4s infinite linear; position: absolute; top: 170px; left: 20px;}
@-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(359deg);}}

/* BACKGROUND */
.bg1{padding-top: 30px; background: url("../images/bg1_pic.png") no-repeat top center,url("../images/bg1_pic2.png") no-repeat bottom center,url("../images/m/mbg_p.png") repeat bottom center;}

.box1{background: url("../images/bg1_pic3.png") no-repeat top center,url("../images/m/mbg_b.png") repeat top center;}
.bg1{background: url("../images/layout_02.jpg")no-repeat top center;}
.bg2{background: url("../images/layout_03.jpg")no-repeat top center;}
.bg3{background: url("../images/bg4-t.png") no-repeat top center, url("../images/bg4-b.png") no-repeat bottom center,url("../images/bg4.jpg") repeat top center; padding-top: 30px;}
.bg4{background: url("../images/bg3.jpg") no-repeat top center;}


	@media screen and ( max-width: 768px ){
		.bg1 .title ul li{ border-right:none;}
		.bg1{ background: url("../images/bg2.jpg") top center repeat; height:auto;  padding-top: 0;}
		.bg1 .title{ margin-bottom: 0;}
		.box1{background: url("../images/m/mbg_b.png") repeat top center;}
		.bg2{ background: url(../images/bg3.jpg) top center repeat; height:auto; padding-top:2vw;}
				.bg3{ background: url("../images/bg4.jpg") top center repeat; height:auto; padding-top:2vw; padding-bottom: 3vw;}
				.bg4{ background: url(../images/bg3.jpg) top center repeat; height:auto; padding-top:2vw;}

	}



/* --1x3-- 第一區*/	
.content1{ padding-top: 120px;}
.content2{ padding-top: 120px;}
.content3{ padding-top: 120px;}
.box_1x3{ margin: 0 auto; padding:0  20px;}
.box_1x3 li{ width:340px; background-color:#fff; margin:0 18px 36px 18px; text-align:center;transition:all 0.5s; padding: 20px 20px 10px;}
.box_1x3 li:hover{ transform: translateY(-8px);}
.box_1x3 li img{height:300px; width:300px;transition:all 0.5s; margin:0 auto;  object-fit: contain;}
.box_1x3 h2{ background-color:#05546b; color:#ffffff;  padding:3px 30px; height:auto; font-size:18px; margin-top: 10px;}
.box_1x3 h3{ color:#353531; padding:0px 10px; font-weight:600; line-height:24px; font-size:18px; margin:16px 0px 6px;}
.box_1x3{ display: flex; flex-wrap: wrap; width: 1200px; margin: 0 auto;}
/*.box_1x3 li img:hover{ transform:scale(0.95);}	*/	
	@media screen and ( max-width: 768px ){
		.content1 { padding-top: 2vw;}
		.content2,.content3{ padding-top: 2vw;}
		.box_1x3{ width:100vw; display: flex;flex-wrap: wrap;align-items: stretch; padding: 0;}
		.box_1x3 li{ width:47vw; margin:0 0vw 2vw 0vw; padding: 0px;}
		.box_1x3 .sptext{  padding:2vw 5vw; line-height:16px; font-size:14px;}
		.box_1x3 h2{ font-size: 14px; padding: 1vw 3vw; margin-top: 0;}
		.box_1x3 h3{ padding-top: 0;line-height:18px; font-size:14px; margin: 2vw 0;}
		.box_1x3 li:nth-child(2n+1){ margin-right: 2vw;}
		.box_1x3 li img{ height:47vw; width:47vw; vertical-align:top; padding: 3vw;}
		.box2_box_1x4{width:47vw;height: 47vw;}
}	


	
.box_1x8{ margin: 0 auto; padding:0  30px;display: flex; flex-wrap: wrap; align-items: stretch; padding-top: 40px;}
.box_1x8 li{ width:120px; height: 120px; background-color: #13434f; margin:0 20px 20px 0;padding:28px 10px; text-align: center; font-size: 28px; line-height: 32px; border-radius: 10px;transition:all 0.5s; }
.box_1x8 li:nth-child(10),.box_1x8 li:nth-child(11),.box_1x8 li:nth-child(12),.box_1x8 li:nth-child(13){ border-radius: 120px; background-color: #0a4479;}
.box_1x8 li:nth-child(14),.box_1x8 li:nth-child(15){ background-color:#2e9576;clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);}
.box_1x8 li:nth-child(16){ background-color:#e0455f;clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);}
.box_1x8 li:hover{ transform: translateY(-8px);}
.box_1x8 li a{color: #ffffff; font-weight: 700;}
.box_1x8 li:nth-child(8n){margin-right: 0px;}

@media screen and ( max-width: 768px ){
	
	.box_1x8{width: 93vw; padding: 2vw;}
	.box_1x8 li{ width: 20vw; height: 20vw; margin-right: 3vw; font-size: 22px; line-height: 26px; padding: 0; display: table-cell; vertical-align: middle; padding-top:6vw;}
	.box_1x8 li:nth-child(8n){margin-right: 0}
	.box_1x8 li:nth-child(4n){margin-right: 0;}	
}

@media screen and ( max-width: 560px ){	.box_1x8 li{ font-size: 20px; line-height: 23px;padding-top: 5vw;}	}
@media screen and ( max-width: 480px ){	.box_1x8 li{ font-size: 20px; line-height: 23px;padding-top: 4vw;}	}
@media screen and ( max-width: 321px ){	.box_1x8 li{ font-size: 16px; line-height: 20px;padding-top: 4vw;}	}



/* --1x4-- */

.box_1x5 {width: 1160px; min-width:1160px;margin:0 auto; display:flex; flex-wrap:wrap; align-items:stretch; background: #fbf5ea; padding: 26px 30px 0;z-index: 90;}
.box_1x5::before{ width: 1090px; height: 40px; content: ' ';background: url("../images/bar.png")no-repeat top center; display: block;}
.box_1x5::after{ width: 1090px; height: 40px; content: ' '; background: url("../images/bar.png")no-repeat top center; display: block;}
.box_1x5 li {width:204px; background-color:#fff; text-align:center;padding:8px;  margin-right:13px; display:inline-block; vertical-align:top; margin-bottom:20px;transition:all 0.5s;}
.box_1x5 li:hover{box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.2), 1px 4px 8px rgba(0, 0, 0, 0.2); transform: translateY(-8px);}
.box_1x5 li:nth-child(5n){margin-right:0px;}
.box_1x5 li img{width:188px;height:188px;  object-fit: contain; margin:0 auto; vertical-align:middle;/*transition:all 0.5s;*/}
.box_1x5 li h2{ height:auto; font-size:17px; line-height:22px; color:#ffffff; text-align:center; font-weight:500; position:relative;overflow: hidden;  margin:8px 0px 0px 0px; background-color:#e04e68; padding:5px;}
.box_1x5 li p{ height:auto; font-size:17px; line-height:20px; color:#353531; text-align:center; font-weight:600; position:relative;overflow: hidden; z-index:10; padding-bottom:8px; padding-top:8px;}
.box_1x5 li h4{ height:auto; font-size:15px; line-height:15px; color:#000000; text-align:center; font-weight:500; position:relative;padding-bottom:3px;}
.box_1x5 li h4 span{  height:auto; font-size:22px; line-height:24px; color:#982121; text-align:center; font-weight:700; position:relative;font-family:'Noto Sans TC',Arial, Helvetica, sans-serif;}
	@media screen and ( max-width: 768px ){
		.box_1x5{ padding:2vw ; min-width:96vw;width:96vw;margin:0 auto;}
		.box_1x5 li {width:44vw; padding:2vw; overflow:hidden; margin-right:2vw; margin-bottom:3vw;}
		.box_1x5 li:hover{box-shadow:none;}
		.box_1x5 li:nth-child(5n){margin-right:2vw;}
		.box_1x5 li:nth-child(2n){margin-right:0;}
		.box_1x5 li div{overflow:hidden;vertical-align:middle; margin:0 auto; margin-bottom:2vw;}
		.box_1x5 li img{line-height:0; vertical-align:top; transition:all 0.5s;width:44vw;height:44vw; }
		.box_1x5 li h2{ font-size:14px; line-height:18px;  margin:0px 0px 0px 0px;  padding:5px; font-weight:unset; letter-spacing:0;}
		.box_1x5 li p{font-size:14px; line-height:18px; padding-bottom:0;}
		.box_1x5 li h4{font-size:0.5rem; line-height:1.5rem;padding-top:2%;}
		.box_1x5 li h4 span{  font-size:1.2rem; line-height:1.5rem; }
.box_1x5::before{ width:100%; height: 0px; content: ' ';background:none; display: block;}
.box_1x5::after{ width: 100%; height: 0px; content: ' '; background: none; display: block;}
}



/* --AD-- */
.boxAD{padding:120px 0px 15px 0px; background: url("../images/bg5.png")no-repeat, url("../images/bg-p.png")repeat; max-width: 1920px; min-width: 1200px; margin: 0 auto;}
.contenAD{ padding:0 20px;}
.boxAD ul{ padding-top:25px; display: flex; flex-wrap: wrap;}
.boxAD ul a{ display:block;}
.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(4){ width:1160px; transition:all 0.5s;}
.boxAD .item_pc{ width:1160px; margin-bottom:22px;}
.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:569px; margin-right:22px; overflow:hidden;transition:all 0.5s;margin-bottom:22px;}
.boxv ul li:hover{ transform: translateY(-8px);}
.boxAD ul li img{ width:100%;}
.boxAD ul li:nth-child(3n){margin-right:0px;}
	@media screen and ( max-width: 768px ){
		.contenAD{ padding:0;}
		.boxAD { width: 100vw;min-width:100vw;background:url("../images/bg-p.png")repeat;padding-top: 3vw;}
		.item_m{ width:96vw; margin-bottom:0;}
		.boxAD ul{ padding-top:0vw; display:block;}
		.boxAD ul li{ width:96vw; margin:0 auto 2vw auto;}	
		.boxAD ul li img{ width:96vw;}
		.boxAD .item_pc{ display:none;}
		.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(4),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:96vw;margin-right:0; margin-bottom:2vw;}
	}


/*手機 下方選單*/
menu{ display:none;}
	@media screen and ( max-width: 768px ){
		menu{
			display:inherit; -width:100%;
		}
		menu ul{
			position:fixed;
			bottom:0;
			left:0;
			margin:0;
			width:100%;
			display:flex; justify-content:center; text-align:center;
			flex-wrap: nowrap;
			background:#13434f;
			z-index:999;
			padding:4.5px 0;
			/* border-top:4px solid #d6666e;*/
		}
		menu ul:first-child{ padding-bottom:36px; border-bottom: 1px solid #ffffff; }
		menu ul:last-child{ border-top: 1px solid #ffffff;  }
		menu ul li{
			border-right:1px solid #ffffff;
			padding:0.5px 1%;
			min-width:33%;
			box-sizing:border-box;
			font-size:12px;
			font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC','Heiti TC';
		}
		menu ul li button{ border: 0px; background: none; color: #ffffff;}
		menu ul li:nth-last-child(1){ border-right:none;}
		menu a{
			color:#ffffff;
			text-decoration: none;
		}
	}
	
/*--goto top--*/
#button {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 15px;
  right: 15px;
  transition: background-color .3s, 
 opacity .5s, visibility .5s;
	  opacity: 0;
  visibility: hidden;
  z-index: 1000;

}
@media screen and ( max-width: 768px ){
#button {
  bottom: 70px;
  right: 10px;}
}

#button::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:45%;background-position:40% 30%;
}
#button:hover {
  cursor: pointer;
  background-color: #666;
}
#button:active {
  background-color: #666;
}
#button.show {
  opacity: 0.4;
  visibility: visible;
}


/* Style the tab */
.tab {
  overflow: hidden;
  width: 1160px; margin: 0;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  float: left;border: none;outline: none;cursor: pointer;
  padding: 8px 0px;transition: 0.3s;font-size: 26px; margin-right: 10px;width: 185px; font-weight: 700;
background-color:#e04e68; border-radius: 8px  8px 0 0;z-index: 999;
}
.tab button a{color: #fff; width: 185px; height: 53px; padding:10px 35px}
.tab button:nth-child(5) a{ padding: 10px 30px;}
.tab button:last-child{margin-right: 0px;float:right;}
.tab button:hover {background-color: #ddd;}

/* Create an active/current tablink class */
.tab button.active {background-color: #fbf5ea;}
.tab button.active  a{ color: #13434f;}
/* Style the tab content */
.tabcontent {animation: fadeEffect 1.5s;}
/* Go from zero to full opacity */
@keyframes fadeEffect {  from {opacity: 0;} to {opacity: 1;}}

#navbar{ width: 1160px;}
.sticky { background-color:#fbf5ea; padding-bottom: 5px;border-radius: 8px  8px 0 0;
  position: fixed;
  top: 0;
  width: 100%;z-index: 999;
}
.close{ display: none;}

.sticky + .content {
  padding-top: 30px;
}
	@media screen and ( max-width: 768px ){
#navbar{ width:100%;}
.tab {overflow: hidden; width: 96vw; margin: 0 auto;}
.tab button a{padding:0px 0px}
.tab button:nth-child(5) a{ padding: 0px 0px;}
.tab button{width: 30vw; margin-bottom: 3vw; border-radius: 30px; font-size: 18px;margin-right:3vw;}
		.tab button:nth-child(3n){ margin-right: 0;}
.tab button:last-child{float:left;}
		#navbar.stichy{ display: none;}
		
}