@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{ margin:0; padding:0; font-family:'Noto Sans TC', sans-serif; font-size:16px; color:#333; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
a{ text-decoration:none; }
body,html{ height:100%; }

.bg01{ position:absolute; z-index:1; width:19%; top:0; left:0; }
.bg01:after{ content:""; display:block; width:100%; padding-bottom:98%; background-repeat:no-repeat; background-position:center; background-image:url(../images/bg_flower01.svg); background-size:cover; }
.bg02{ position:fixed; z-index:1; width:22%; bottom:0; right:21%; }
.bg02:after{ content:""; display:block; width:100%; padding-bottom:73%; background-repeat:no-repeat; background-position:center; background-image:url(../images/bg_flower02.svg); background-size:cover; }
.bg03{ position:fixed; z-index:1; width:23%; bottom:0; right:0; }
.bg03:after{ content:""; display:block; width:100%; padding-bottom:120%; background-repeat:no-repeat; background-position:center; background-image:url(../images/bg_flower03.svg); background-size:cover; }

.messbtn{ position:fixed; width:80px; display:block; right:10px; bottom:10px; z-index:10; }
.messbtn:before{ content:""; display:block; width:100%; padding-bottom:100%; background-image:url(../images/img_messenger.svg); background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }

.layoutbox{ max-width:990px; margin:auto; padding:0 20px; min-height:100vh; position:relative; z-index:5; display:flex; }
.layoutbox .flexbox{ display:flex; width:100%; flex-direction: column; }
.layoutbox .header{ height:104px; display:flex; align-items: center; justify-content: space-between; border-bottom:1px solid #333; }
.layoutbox .header .logo{ width:78px; display:block; margin-left:20px; }
.layoutbox .header .logo:after{ content:""; display:block; padding-bottom:83.33333%; background-image:url(../images/logo.svg); background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.layoutbox .header .contactbtn{ width:32px; margin-right:20px; }
.layoutbox .header .contactbtn:after{ content:""; display:block; padding-bottom:100%; background-image:url(../images/icon_message.svg); background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.layoutbox .fpage{ flex:1; display:flex; align-items: center; align-content: center; }
.layoutbox .fpage.block{ display:block; }
.layoutbox .fpage .fwidth{ width:100%; padding: 0 0 80px 0; }
.layoutbox .fpage .fwidth h2{ text-align:center; font-size:2.75rem; margin-bottom:60px; }
.layoutbox .fpage .fwidth h2.padtop{ padding-top:40px; }
.layoutbox .fpage .fwidth p.ret{ font-size:1rem; text-align:center; color: rgba(0, 0, 0, 0.38); font-weight:400; margin-top: -50px; }
.layoutbox .fpage .fwidth p .alink{ color: #93D500; text-decoration:underline; }


.flexgrid{ margin:0 0 0 -20px; padding:46px 0 20px 0; display:flex; }
.flexgrid .grids{ padding-left:20px; width:33.333334%; }
.flexgrid .grids .gs{ display:block; background:rgba(147,213,0,0.5); width:100%; border-radius:16px; padding:32px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.flexgrid .grids .gs .imgs{ width:100%; background:#fff; border-radius:16px;  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06); }
.flexgrid .grids .gs .imgs .img{ width:100%; padding-bottom:100%; background-position:center; background-repeat:no-repeat; background-size:80%; }
.flexgrid .grids .gs .textbox{ padding:25px 0 0 0; text-align:center; }
.flexgrid .grids .gs .textbox .h1{ font-weight: 700; font-size:1.5rem; line-height:1.6; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.flexgrid .grids .gs .textbox .p{ font-weight: 400; font-size:1.125rem; color: rgba(0, 0, 0, 0.38); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.flexgrid .grids .gs .textbox .h1_en{ display:none; font-weight: 700; font-size:1.5rem; line-height:1.6; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.flexgrid .grids .gs .textbox .p_en{ display:none; font-weight: 400; font-size:1.125rem; color: rgba(0, 0, 0, 0.38); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }

.brandbox{ background:rgba(0,0,0,0.02); display:flex; padding:20px; justify-content: center; align-items: center; margin-bottom:40px; }
.brandbox .grids01{ max-width:145px; width:15.23%; display:block; margin:0 5%; }
.brandbox .grids01:after{ content:""; display:block; width:100%; padding-bottom:75.86%; background-image:url(../images/img_logo01.svg); background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.brandbox .grids02{ max-width:218px; width:22.89%; display:block; margin:0 5%; }
.brandbox .grids02:after{ content:""; display:block; width:100%; padding-bottom:63.3%; background-image:url(../images/img_logo02.svg); background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }

.sharebox{ border-top:1px solid #000; padding:25px 0; display:flex; justify-content: center; }
.sharebox .links{ display:flex; align-items: center; padding:0 40px; }
.sharebox .links .inicon{ width:28px; height:28px; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.sharebox .links .inicon.i01{ background-image:url(../images/icon_fb.svg); }
.sharebox .links .inicon.i02{ background-image:url(../images/icon_line.svg); }
.sharebox .links .inicon.i03{ background-image:url(../images/icon_ig.svg); }
.sharebox .links .intext{ font-size:0.875rem; color: #503429; padding:0 0 0 8px; }

/*內頁*/
.sortflex{  max-width:660px; margin:auto; }
.sortflex .linebox{ margin-left:-40px; display:flex; }
.sortflex .linebox .linegrids{ width:50%; padding:0 0 0 40px; }
.sortflex .linebox .linegrids .lis{ width:100%; height:220px; display:flex; align-items: center; justify-content: center; background: rgba(147, 213, 0, 0.5); border-radius: 16px; font-weight: 700; font-size:2rem; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }

.seartext{ max-width: 660px; margin: auto; margin-bottom:15px; font-size:1rem; }

.searchinput{ max-width:660px; margin:auto; margin-bottom:10px; }
.searchinput .inputbox{ border:1px solid #909090; border-radius:12px; padding:8px; display:flex; }
.searchinput .inputbox .t1{ flex:1; }
.searchinput .inputbox .t1 input{ width:100%; height:60px; line-height:60px; background:none; border:none; text-indent:15px; }
.searchinput .inputbox .t2{ width:112px; }
.searchinput button{ width:100%; height:60px; line-height:60px; background: rgba(147, 213, 0, 0.5); border-radius: 12px; border:none; cursor:pointer; font-size:1.125rem; font-weight:700; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
/*.searchinput .retxt{ display:none; }*/

.searchinput.error .inputbox{ border-color:#A94442; }
/*.searchinput.error .retxt{ display:block; color:#A94442; padding:8px 0 0 0; text-align:center; font-size:1rem; }*/
.searchinput .retxt{ display:none; color:#A94442; padding:8px 0 0 0; text-align:center; font-size:1rem; }

.nodataimg{ max-width:360px; width:90%; margin:auto; margin-bottom:25px; }
.nodataimg img{ max-width:100%; }

.productbox{ padding:80px 0 0 0; display:flex; flex-wrap:wrap; margin-left:-25px; }
.productbox.odd{ justify-content: center; }
.productbox .grids{ width:50%; padding-left:25px; padding-bottom:40px; }
.productbox .imgs{ margin-bottom:30px; width:100%; padding-bottom:75%; overflow:hidden; position:relative; }
.productbox .imgs img{ position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:100%; vertical-align:middle; }
.productbox .imgtext{ width:100%; padding-bottom:75%; margin-bottom:30px; background-color:#fff; position:relative; }
.productbox .imgtext .linebox{ border: 2px solid rgba(147, 213, 0, 0.5); position:absolute; left:0; bottom:0; right:0; top:0; margin:auto; display:flex; justify-content: center; align-items: center; border-radius: 8px; font-size:3.75rem; color:#582E15; font-weight:700; }
.productbox .imgtext img{ max-width:100%; }
.productbox .list{ margin-bottom:30px; }
.productbox .list .title{ background: rgba(147, 213, 0, 0.5); border-radius: 8px 8px 0px 0px; text-align:center; font-weight: 700; font-size:1.125rem; padding:10px; margin-bottom:10px; }
.productbox .list .txt{ text-align:center; font-weight: 400; font-size:1.125rem; }

/*頁碼*/
.page_number{ position:relative; text-align:center; }
.page_number .btn{ display:inline-block; min-width:30px; padding:0; background-color: #fff; line-height:30px; height:30px; font-size:14px; color:#555; border:1px solid #ccc; vertical-align:top; margin:0 2px; text-align:center;}
.page_number .btn.focus{ border:1px solid rgba(147, 213, 0, 0.5); background-color: rgba(147, 213, 0, 0.5); color:#fff; font-weight:bold;}
.page_number .btn .fa{ line-height:28px;}
.page_number .btn.looking{ color:#ccc; border-color:#ddd; cursor:not-allowed;}
.page_number .quantity{ font-size:12px; color:#555; position:absolute; top:0; right:6px; line-height:30px;}
.page_number .quantity .fa{ padding-right:5px;}


/*lightbox*/
.lightbox{ background:rgba(0,0,0,0.6); position:fixed; top:0; left:0; bottom:0; right:0; margin:auto; z-index:20; display:flex; align-items: center; justify-content: center; }
.lightbox .wbg{ background:#fff; position:relative; border-radius: 12px; padding:30px; width:82%; max-width:786px; }
.lightbox .wbg .mar{ max-width:416px; margin:auto; }
.lightbox .wbg .closebtn{ display:block; width:40px; height:40px; background:#333; background-image:url(../images/x.svg); background-position:center; background-repeat:no-repeat; background-size:24px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; position:absolute; right:-20px; top:-20px; }
.lightbox .wbg h2{ text-align:center; font-weight:700; font-size:1.5rem; margin-bottom:12px; }
.lightbox .wbg p{ font-weight: 400; font-size:1rem; color: rgba(0, 0, 0, 0.38); line-height:1.6; margin-bottom:16px; }
.lightbox .wbg .list{ margin-bottom:16px; }
.lightbox .wbg .list input{ background:#f2f2f2; line-height:36px; width:100%; border:none; text-indent:5px; font-size:1rem; }
.lightbox .wbg .list button{ background:#A7CE58; width:100%; height:36px; line-height:36px; cursor:pointer; color:#fff; font-size:1rem; font-weight: 700; border:none; }
.lightbox .wbg .list textarea{ background:#f2f2f2; width:100%; border:none; padding:5px; font-size:1rem; height:124px; resize:none; }

/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
	
.flexgrid .grids .gs:hover{ background:#93D500; }

.flexgrid .grids .gs:hover .textbox .h1{ display:none; }
.flexgrid .grids .gs:hover .textbox .p{ display:none; }
.flexgrid .grids .gs:hover .textbox .h1_en{ display:block; }
.flexgrid .grids .gs:hover .textbox .p_en{ display:block; }

.brandbox .grids01:hover:after{ background-image:url(../images/img_logo01_s.svg); }
.brandbox .grids02:hover:after{ background-image:url(../images/img_logo02_s.svg); }

.sharebox .links:hover .inicon.i01{ background-image:url(../images/icon_fb_s.svg); }
.sharebox .links:hover .inicon.i02{ background-image:url(../images/icon_line_s.svg); }
.sharebox .links:hover .inicon.i03{ background-image:url(../images/icon_ig_s.svg); }
.sharebox .links:hover .intext{ color:#582E15; }

.sortflex .linebox .linegrids .lis:hover{ background:#93D500; }

/*內頁*/
.searchinput .inputbox .t2 button:hover{ background:#93D500; }

}


/*================================●●●●●●●●●●●●電腦●●●●●●●●●●●●================================*/
@media screen and (max-width:1200px){

}


/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){

}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767.9px){
.bg01{ width:39%; }	
.bg02{ width:42%; right:39%; }
.bg03{ width:43%; }
	
.layoutbox .header{ height:70px; }
.layoutbox .header .logo{ width:68px; margin:0; }	
.layoutbox .header .contactbtn{ width:24px; margin:0; }
.layoutbox .fpage .fwidth p.ret{ margin-top:-10px; }

.flexgrid{ display:block; margin:0; padding:25px 0; }
.flexgrid .grids{ width:100%; padding:0; margin-bottom:15px; }
.flexgrid .grids:last-child{ margin-bottom:0; }
.flexgrid .grids .gs{ padding:15px; display:flex; align-items: center; }
.flexgrid .grids .gs .imgs{ width:25%; }
.flexgrid .grids .gs .textbox{ padding:0 0 0 15px; text-align:left; }
.flexgrid .grids .gs .textbox .h1{ font-size:1.25rem; }
.flexgrid .grids .gs .textbox .p{ font-size:0.875rem; }

.brandbox .grids01{ width:100%; }
.brandbox .grids02{ width:100%; }

.sharebox .links{ padding:0 20px; }
.sharebox .links .intext{ display:none; }


/*內頁*/
.layoutbox .fpage .fwidth h2{ font-size:1.875rem; margin-bottom:25px; }
.layoutbox .fpage .fwidth p .br{ display:block; }

.sortflex .linebox{ margin-left:-20px; }
.sortflex .linebox .linegrids{ padding: 0 0 0 20px; }
.sortflex .linebox .linegrids .lis{ font-size:1.5rem; height:160px; }

.searchinput .inputbox .t1 input{ line-height:38px; height:38px; font-size:0.875rem; text-indent:10px; }
.searchinput .inputbox .t2{ width:80px; }
.searchinput .inputbox .t2 button{ font-size:1rem; line-height:38px; height:38px; border-radius:5px; }

.productbox{ padding-top:40px; }
.productbox .imgtext .linebox{ font-size:2.25rem; }
.productbox .grids{ width:100%;  }

/*頁碼*/
.page_number .btn{ font-size:12px; min-width:26px; line-height:26px; height:26px; }


}