@charset "UTF-8";
body {margin:0;padding:0;font-family:'Century Gothic', "微軟正黑體", Arial;}
.FOR_MAIN{ width:100% !important; padding:0;}
.clear {clear:both;}
ul ,ol ,li {list-style-type:none;}
a ,a:hover {text-decoration:none;}
.wrapper {width:100%;overflow-x:hidden;position:relative;}

.top {width:100%;height:40px;background:#362E2B;}
.logo {width:112px;height:36px;margin:2px 0 0 5px;float:left;}
.logo img {width:100%;}
.top_right {margin:0 10px 0 0;line-height:40px;color:#FFF;float:right;}
.top_right a ,.top_right a:hover {color:#FFF;}
.main {position:relative;}
.mainjpg {width:100%;height:100%;position:relative;}
.main img {width:100%;display:block;}
.main_bg {top:0;position:relative;}
.main_bg img {width:100%;display:block;}
#goTop {display:none;}
.main_m img {display:block;}
.main_title img {width:100%;}

.fixed_bg {width:126px;height:auto;top:50px;position:fixed;z-index:10002;display: none;}
.fixed {width:100%;margin:0;padding:5px 0 0;border-left:3px solid #404041;border-right:3px solid #404041;background:#33597f;box-sizing:border-box;}
.fixed li {width:100%;line-height:40px;text-align:center;border-top:1px dashed #addf68;}
.fixed li:last-child::after {content:'';display:block;width:100%;border-bottom:1px dashed #addf68;}
.fixed li a {display:block;width:100%;height:40px;line-height:40px;color:#FFF;}
.fixed li a:hover {display:block;width:100%;height:40px;line-height:40px;color:#fff200;background:#33597f;}
.gotop {text-align:center;}
.gotop a {box-sizing:border-box;display:block;width:100%;height:60px;line-height:30px;font-size:16px;color:#FFF;background:#33597f;border-bottom:3px solid #404041;border-left:3px solid #404041;border-right:3px solid #404041;border-radius:0 0 100px 100px;}
.gotop a::before {content:'▲';display:block;height:16px;font-size:12px;}
.gotop a:hover {box-sizing:border-box;display:block;width:100%;height:60px;line-height:30px;color:#fff200;background:#33597f;border-bottom:3px solid #404041;border-left:3px solid #404041;border-right:3px solid #404041;border-radius:0 0 100px 100px;}

.main_list {margin:0 auto;padding:20px 0 0;box-sizing:border-box;position:relative;z-index:10000;}
.main_list>p {margin:0 0 15px;padding:0;text-align:center;color:#FFF;font:50px/104px "微軟正黑體", Arial;}
.main_list li {text-align:center;box-sizing:border-box;float:left;position:relative;z-index:10000;}
.main_list li img {width:100%;}
.main_list li a , .main_list li a:hover {color:#000;}
.title {width:50%;margin:0 25% 20px;padding:10px 0;font:bold 50px/50px "微軟正黑體", Arial;color:#FFF;background:#33597f;border:5px solid #fff200;border-radius:50px;text-align:center;display:block;}
.title a , .title a:hover {display:block;width:100%;color:#FFF;}

.pro_list_bg {padding:0;}
.pro_list {margin:20px auto;padding:20px 0;border-radius:20px;box-sizing:border-box;position:relative;z-index:10000;}
.pro_list>p {margin:20px 0 30px;padding:0;text-align:center;color:#FFF;font:50px/104px "微軟正黑體", Arial;}
.pro_list li {text-align:center;color:#000;background:#FFF;border-radius:10px;overflow:hidden;box-sizing:border-box;transition: all 0.6s;float:left;}
.pro_list li img {display:block;width:100%;}
.pro_list li a ,.pro_list li a:hover {color:#000;}
.pro_list li:hover {transform:scale(1.025);}
.pro_promo {width:auto;height:30px;margin:0 auto;background:#7935b3;color:#FFF;text-align:center;font-size:18px;line-height:30px;}
.pro_list li p {height:48px;margin:5px 0 0;padding:0 5px;font-size:18px;line-height:24px;box-sizing:border-box;overflow:hidden;}
.pro_list li p b::before {content:'$';font-size:15px;color:#F03;}
.pro_list li p b {font-size:30px;color:#F03;line-height:30px;}
.pro_list li del::before {content:'市價$';font-size:12px;}
.pro_list li del {display:block;width:100%;padding:5px 0;background:#333;color:#FF0;}
.price {color:#F03;}

.feedback {padding:5px 0;background:#F00;color:#FFF;}
.feedback::before {content:'街口幣回饋$';}
.total {padding:5px 0;background:#000;color:#FF0;}
.total::before {content:'共回饋$';}

.info_bg {margin:0 auto 60px;box-sizing:border-box;}
ul.info_ul {margin:0 0 35px 15px;padding:0;box-sizing: border-box;}
ul.info_ul li {list-style-type:none;margin:10px 0;font-size:20px;line-height:30px;color:#FFF;}
ul.info_ul li i {display:inline-block;width:5px;height:25px;margin:0 3px 0 0;background:#FFF;top:4px;position:relative;}
ul.info_ul li a {color:#FF0;}
ul.info_ul li a:hover {color:#FA0;}
ul.info_ul li span {margin:0;font-size:20px;line-height:30px;color:#FF0;}

ol.info_ul {margin:0 0 35px 40px;padding:0;box-sizing: border-box;}
ol.info_ul li {list-style-type:decimal;margin:10px 0;font-size:20px;line-height:30px;color:#FFF;}
ol.info_ul li a {color:#FF0;}
ol.info_ul li a:hover {color:#FA0;}
ol.info_ul li span {margin:0;font-size:20px;line-height:30px;color:#FF0;}
ol.info_ul li p {margin:0;font-size:20px;line-height:30px;color:#BBB;}
.info_bg ol.info_ul .title {margin:10px 0 0;color:#FFF;left:-20px;position:relative;}
.sub_title {width:100%;margin:20px 0 0;padding:5px 0;font-size:26px;line-height:32px;color:#FFF;background:#ff9527;border-radius:50px;text-align:center;position:relative;}

.copyright {font-size:13px;padding:450px 0 10px;padding:0 0 10px;text-align:center;color:#FFF;background:#362e2b;}
.copyright p {width:95%;margin:0 auto;padding:10px 0 0;text-align:center;color:#FFF;}

.banner {padding:0;}
.banner li img {width:100%;display:block;}

/*手機版選單*/
.m_menu {display:none;width:100%;height:50px;margin:0;padding:0;text-align:center;box-shadow:0 -1px 2px 1px rgba(0%,0%,0%,0.10);bottom:0;position:fixed;z-index:20000;
background: linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); 
background: -moz-linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); 
background: -webkit-linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); 
background: -o-linear-gradient(90deg, rgba(237, 237, 237, 1)0%, rgba(255, 255, 255, 1)50%); }
.m_menu li {width:calc(100%/7);height:60px;padding:7px 0 0;list-style-type:none;border-right:1px solid #EEE;box-sizing:border-box;font:bold 15px/25px "微軟正黑體", Arial;float:left;position:relative;}
.m_menu li p {color:#999;line-height:17px;margin:0;padding:0;font-size:13px;font-weight:lighter;text-align:center;}
.m_menu li:last-child {border:0;}
.m_menu li i {display:block;color:#999;}
.m_menu li a:hover i ,.m_menu li a:hover p {display:block;color:#F80;}
.m_menu li a:active i ,.m_menu li a:active p {display:block;color:#F80;}
.m_menu_active {color:#D05 !important;}
.m_menu_member {width:50px;height:50px;margin:-25px 0 0 -25px;padding:8px 0 0;box-sizing:border-box;border:4px solid #FFF;box-shadow:0 -2px 2px 1px rgba(0%,0%,0%,0.1);border-radius:60px;color:#FFF;background:#D05;top:5px;left:50%;position:absolute;}
.m_menu_member i {color:#FFF !important;}
.m_menu_member i a:hover {color:#FFF !important;}
.badge {display:block;width:20px;height:20px;background:#D05;color:#FFF;border-radius:10px;top:2px;left:calc(50% + 10px);position:absolute;}
.gotop2 {display:none;width:30px;height:30px;line-height:30px;background:rgba(255 ,255 ,255 ,.8);text-align:center;border-radius:15px;box-shadow:1px 1px 2px 1px rgba(20%,20%,40%,0.2);right:10px;bottom:60px;position:fixed;z-index:10001;}
.gotop2 p {font:10px/20px Arial;cursor:pointer;top:-20px;position:relative;z-index:10005;}
.gotop2 a {color:#000;font-size:11px;}

@media (min-width: 1081px) {
.m_menu ,.gotop2 {display:none;}
}

@media (max-width: 1080px) {
.m_menu ,.gotop2 {display:block;}
.copyright {padding:0 0 60px;background:#362E2B;}
}

@media screen and (min-width:1491px) {
.wrapper {background:url(bg.jpg) #8dc63f center 40px no-repeat;}
.main {width:1200px;height:auto;margin:0 auto;}
.main_m {display:none;}
.fixed_bg {margin-left:1200px;}

.main_list {width:1200px;height:auto;padding:20px 50px 0;}
.main_list li {width:48%;margin:5px 0.5%;}
.pro_list {width:1200px;height:auto;padding:20px;}
.pro_list li {width:24%;height:auto;margin:5px 0.5% 0;}

/*info*/
.info_bg {width:1200px;}
}

@media screen and (min-width:1201px) and (max-width:1490px) {
.wrapper {background:url(bg.jpg) #8dc63f center 40px no-repeat;}
.main {width:1200px;height:auto;margin:0 auto;}
.main_m {display:none;}
.fixed_bg {right:0;}

.main_list {width:1200px;height:auto;padding:20px 50px 0;}
.main_list li {width:48%;margin:5px 0.5%;}
.pro_list {width:1200px;height:auto;padding:20px;}
.pro_list li {width:24%;height:auto;margin:5px 0.5% 0;}

/*info*/
.info_bg {width:1200px;}
}

@media screen and (min-width:1081px) and (max-width:1200px) {
.wrapper {background:#8dc63f;}
.main {width:100%;height:auto;margin:0 auto;}
.main_m {display:none;}
.fixed_bg {right:0;}

.main_list {width:98%;height:auto;margin:0 auto;padding:10px 5px;}
.main_list li {width:48%;margin:5px 1%;}
.pro_list {width:98%;height:auto;padding:10px 5px;}
.pro_list li {width:23%;margin:10px 1% 0;}

/*info*/
.info_bg {width:1080px;}
}

@media screen and (min-width:769px) and (max-width:1080px) {
.wrapper {background:#8dc63f;}
.main {width:100%;height:auto;}
.fixed_bg {display:none !important;}

.title img {width:100%;max-width:890px;}
.main img {width:100%;}

.title {width:60%;margin:0 20% 10px;font:bold 40px/40px "微軟正黑體", Arial;}
.main_list {width:98%;height:auto;padding:10px 5px;}
.main_list li {width:48%;margin:5px 1%;}
.pro_list {width:98%;height:auto;padding:10px 5px;}
.pro_list li {width:23%;margin:10px 1% 0;}
.main_list>p ,.pro_list>p {font:40px/104px "微軟正黑體", Arial;}

/*info*/
.info_bg {width:98%;margin:0 1% 60px;}
}

@media screen and (min-width:601px) and (max-width:768px) {
.wrapper {background:#8dc63f;}
.main {width:100%;height:auto;}
.main img {width:100%;}
.fixed_bg {display:none !important;}

.title {width:70%;margin:0 15% 10px;font:bold 40px/40px "微軟正黑體", Arial;}
.main_list {width:98%;height:auto;padding:10px 5px 0;}
.main_list li {width:98%;margin:5px 1%;}
.pro_list {width:98%;height:auto;padding:10px 5px 0;}
.pro_list li {width:48%;margin:10px 1% 0;}
.main_list>p ,.pro_list>p {font:40px/104px "微軟正黑體", Arial;}

/*info*/
.info_bg {width:98%;margin:0 1% 60px;}
}

@media screen and (min-width:421px) and (max-width:600px) {
.wrapper {background:#8dc63f;}
.main {width:100%;height:auto;}
.main img {width:100%;}
.fixed_bg {display:none !important;}

.title {width:80%;margin:0 10% 10px;font:bold 30px/30px "微軟正黑體", Arial;}
.main_list {width:98%;height:auto;padding:10px 5px 0;}
.main_list li {width:98%;margin:10px 1%;}
.pro_list {width:98%;height:auto;margin:10px auto 0;padding:10px 1%;}
.pro_list li {width:48%;margin:10px 1% 0;padding:10px 0 0;}
.pro_list li p {font-size:15px;}
.pro_list li p b {font-size:25px;}
.main_list>p ,.pro_list>p {font:30px/104px "微軟正黑體", Arial;}

/*info*/
.info_bg {width:90%;margin:20px 5%;}
}

@media screen and (max-width:420px) {
.wrapper {background:#8dc63f;}
.main {width:100%;height:auto;}
.main img {width:100%;}
.fixed_bg {display:none !important;}

.title {width:80%;margin:0 10% 10px;font:bold 30px/30px "微軟正黑體", Arial;}
.main_list {width:100%;height:auto;padding:10px 0 0;}
.main_list li {width:100%;margin:5px 0;}
.pro_list {width:98%;height:auto;margin:10px auto 0;padding:10px 1%;}
.pro_list li {width:48%;margin:10px 1% 0;}
.pro_list li p {font-size:15px;}
.pro_list li p b {font-size:25px;}
.main_list>p ,.pro_list>p {font:30px/104px "微軟正黑體", Arial;}

/*info*/
.info_bg {width:90%;margin:20px 5%;}
}