@charset "utf-8";
/* CSS Document */

/*基本*/
body{ margin:0; padding:0; background:#fff;}


/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%;  min-width:1220px; overflow:hidden; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;  }
.WRAPPER img { width:100%; border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none;}
		@media screen and (max-width:767px){
		.WRAPPER { min-width: inherit; background-color: #f0f0f0}
	}
	
/*背景*/
.bgtop::after {content: "";display: block;clear: both;z-index:0;position:absolute;top: 60px;left: 50%;transform: translateX(-50%);width: 1300px;height: 100%;background: url(bg_TOP.png?t=1790841565383) no-repeat center top;background-size: 100%;}
.bg_deco  { z-index:0; position:absolute; top:0; left:0; width: 100%; min-width:1220px;  height:878px; background: url(bg_Deco.png?t=1790841565383) no-repeat center top ;}
	@media screen and (max-width:767px){
		.bgtop::after { top: -5vw; left: 80%; width: 160%; }
		.bg_M { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
		.m_bgtop  { z-index:0;  background-image: url(m_bg_Deco.png?t=1790841565383); width: 100%; left: 0; background-repeat: no-repeat; background-size: 100%; }
	}


/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { display:block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		/*區塊_切割*/
		.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%; list-style: none;}
		.Area_2bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; list-style: none;}
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; list-style: none;}
		.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn_nopadding a { float:left; margin:0; padding:0; width:100%; list-style: none;}
		.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%; list-style: none;}
		.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%; list-style: none;}
	}

/*共用*/
.space { margin-bottom:80px;}
	@media screen and (max-width:767px){
		.space { margin-bottom:10vw;}
	}
	
	
/*版頭*/
.Area_top { position:relative; height: 630px; }
.Area_top .box {  }
.Area_top .title { position: absolute; top: 14%; left: 0%; aspect-ratio: 960/360; width: 65%; }
.Area_top .notice { position: absolute; top: 60%; left: 15%; aspect-ratio: 480 / 200; width: 38%; overflow: visible; }
.Area_top .notice .PD_layout .PD:hover h4 { color: #9e7e48; }
.Area_top .notice .PD_layout ul { display: flex; flex-direction: column; flex-wrap: wrap; padding: 0; }
.Area_top .notice .PD_layout ul li { text-align: left; }
.Area_top .notice .PD_layout ul li h4 { display: inline; max-height: inherit; }
.Area_top .notice .PD_layout ul li.PD_slide { position: relative !important; padding-left: 1em !important; }
.Area_top .notice .PD_layout ul li.PD_slide::before { content: "•" !important; display: block !important; position: absolute !important; left: 0; top: 0; color: #000 !important; font-size: 1em !important; line-height: 1.5; }		
.Area_top .card {position: absolute;top: 8%;right: -3%;aspect-ratio: 480/480;width: 53%;}
.Area_top .top_btn { position:absolute; top:10px; right:0px; width:7%;  z-index:6;}
.Area_top .top_btn:after { content:""; clear:both; display:block;}
.Area_top .top_btn a { display:block; float:left; width:100%; margin:0 2%;}
	@media screen and (max-width:767px){
		.Area_top { height: 65vw;}
		.Area_top .box{ padding-bottom: 0;}
		.Area_top .top_btn { top:-2vw; right:1vw; width:17%;  z-index:6;}
		.Area_top .top_btn a { float:inherit; width:100%; margin:5% 0;}
		.Area_top .title { top: 2vw; left: -2vw; width: 80%; }
		.Area_top .card { top: 1%; right: -7%; width: 46%; }
		.Area_top .notice { z-index: 10; position: relative; top: 30.5vw; left: 17vw; width: 56%; height: 30vw; }
		.Area_top .notice .PD_layout ul {padding: 0; }
		.Area_top .notice .PD_layout ul li h4 { max-height: 3em; margin: 0; font-size: 0.85em; }
		.Area_top .notice .PD_layout ul li.PD_slide { padding-left: 1em !important; }
		.Area_top .notice .PD_layout ul li.PD_slide::before { font-size: 1em !important; }
		.Area_top .notice .PD_layout .PD_into { padding: 0; }
		}


/*pc黏人精*/
.Fixedicon{position: fixed; right:0; top:620px; z-index: 100; cursor: pointer;}
.Fixedicon a{display: block; width: 170px; height: 190px;}
.Fixedicon img{width: 70%;}


/*搜尋*/
.box_search {z-index: 1;  position:absolute; padding:0; width:30%; vertical-align: middle; bottom:30px; right:0px;}
.box_search .input {position: relative; color: #fff; text-align: left; box-sizing: border-box;}
.box_search .input input { margin: 0; padding: 0 20px; border: none; width: 78%;height: 60px; line-height: 60px; font-size: 22px; font-weight: 300; text-align: left; color: #454545; font-family: 'Century Gothic','微軟正黑體','Microsoft JhengHei'; border: solid #000 2px; background: transparent;}
.box_search .input input { margin: 0; padding: 0 20px; border: none; width: 78%;height: 60px; line-height: 60px; font-size: 22px; font-weight: 300; text-align: left; color: #454545; font-family: 'Century Gothic','微軟正黑體','Microsoft JhengHei'; border: solid #000 2px; background: transparent;}
.box_search .input a {z-index: 1; position: absolute; top: 0; right: 0; padding: 0; width: 20%; height: 100%; line-height: 57px; transition: .5s ease;font-size: 25px; font-weight: 300; color: #858585; text-align: center; border: solid #FFF 2px; box-sizing: border-box; background-color: #C0C0C0}
.box_search .input a:hover {background-color: #444;}	
@media screen and (max-width: 767px){
		.box_search {position: relative; float: right;padding: 8vw 3%; width: 94%; margin-bottom:0vw; bottom:0;}
		.box_search .input {padding: 0;border-width: 2px;}
		.box_search .input input {padding: 0 2vw; height: 9vw; font-size: 4vw; line-height: 9vw; width: 78%;}
		.box_search .input a {padding: 0 2vw; height: 9vw; font-size: 4vw; line-height: 7.5vw;}
	}

/*2% / 4%頁籤*/
.Main_Tabs { position: relative; z-index: 1;width: 100%; max-width: 1220px; margin: 0 auto 20px; text-align: center; }
.main_tab_nav { display: flex; justify-content: center; list-style: none; padding: 0; margin-bottom: 20px; }
.main_tab_nav li { width: 100%; padding: 10px 40px; margin: 0 10px; cursor: pointer; background: #c1a378; border-radius: 20em; font-size: 1.5em; font-weight: bold; color: #333; }
.main_tab_nav li.active { background: #312e2d; color: #fff; }
.main_tab_content .tab_pane { display: none; }
.main_tab_content .tab_pane.active { display: block; }
@media screen and (max-width:767px){
	.main_tab_nav { margin: 0 auto; }
	.main_tab_nav li {font-size: 1.35em;padding: 0.5vw 0;margin: 0 1vw;}
}

/*百大品牌10%回饋*/
.Area_brand {  }
.Area_brand .box { overflow: hidden;  }
.Area_brand .layout_page  ul { margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap; box-sizing: border-box; }
.Area_brand .layout_page .kind { margin: 0 auto 3.5%;width: 100%; }
.Area_brand .layout_page .kind li { width: 20%; filter: grayscale(1); }
.Area_brand .layout_page .kind li.cate-hover { filter: grayscale(0); }
    /*公版調整*/
    .Area_brand .box ul { padding: 0; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
    .Area_brand .box ul li { background-color: transparent; aspect-ratio: 480/170; width: 24%; min-width: 24%; }
	.Area_brand .silver_card, .Area_brand .golden_card {  }
    .Area_brand .PD_layout .cardNote { display: none;}
	.Area_brand .silver_card .PD_img:after { content: ""; display: block; width: 100%; height: 0; padding-bottom: 110%; background-image: url(brand_bg_02.png?t=1790841565383); background-repeat: no-repeat; background-size: 100%; background-position: center;}
	.Area_brand .golden_card .PD_img:after { content: ""; display: block; width: 100%; height: 0; padding-bottom: 110%; background-image: url(brand_bg_01.png?t=1790841565383); background-repeat: no-repeat; background-size: 100%; background-position: center;}
    @media screen and (min-width:768px){
    .Area_brand .box { min-height: 520px; margin-bottom:5%; }
	.Area_brand .box ul { grid-gap: 15px; }
    }
	@media screen and (max-width:767px){
	.Area_brand .title { width:100%; margin: 0 auto 2.5vw;}
    .Area_brand .box { min-height: 70vw; margin-bottom: 5vw; }
	.Area_brand .box ul { width: 100%; }
	.Area_brand .box ul li { flex: 0 0 calc(48% - 0.5vw)!important;box-sizing: border-box; width: initial; min-width: 48%!important; }
    .Area_brand .layout_page .kind { width: 96%; margin: 2vw auto 3vw; }
    .Area_brand .layout_page .kind li { width: 33%; height: 7vw; aspect-ratio: 300 / 70; margin: 1.5vw auto 0; }
    }
	


/*注意事項*/
.Area_footer { padding:40px 0 40px; background:#e0e0e0;}
.Area_footer .box_1 { }
.Area_footer .box .btn { background:#000; border-radius:60px; color:#fff; line-height:24px; display:inline-block; padding:1% 3%; font-size:24px; font-family:"微軟正黑體", "Century Gothic"; margin:50px auto 0;}
.Area_footer .box .btn i { width:0.5rem; height:0.5rem; display:inline-block; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(-45deg);  position:relative; bottom:0.3rem;}
.Area_footer ul { margin:20px 0 0; padding:0; list-style:none; overflow: hidden;}
.Area_footer ul::after { content:""; display:block; clear:both;}
.Area_footer ul li {  color:#929292; font-family: "Century Gothic", "微軟正黑體"; text-align:justify; }
.Area_footer ul li:first-child { float: left; width:15%; font-size: 22px; letter-spacing:3px }
.Area_footer ul li:last-child { float: left; width:85%; font-size: 15px;}
.Area_footer li span { text-decoration:underline;}
.Area_footer ul li a { display:inline-block; color:#999}
	@media screen and (max-width:767px){
		.Area_footer {padding: 4vw 0 33vw;}
		.Area_footer .box .btn {  line-height:9vw; padding:1% 8%; font-size:1m;  font-weight: bold;  margin:50px auto 0;}		
		.Area_footer .box_1 { width: 100%}
		.Area_footer.Area_boxstyle { padding:0 0 30vw;}
		.Area_footer .box a { margin:0 auto;}
		.Area_footer ul { margin:5% auto 0; width:95%;}
        .Area_footer ul li {  color:#999; font-size:4vw; line-height: 1.5; text-align:justify}
        .Area_footer ul li:first-child { float: left; width:100%; font-size: 6vw; letter-spacing:2vw; text-align: center;}
        .Area_footer ul li:last-child { float: left; width:100%;  font-size: 3.2vw; letter-spacing:0;}
        }


/*浮層內表格*/
.agreeArea .box table { margin: 3%!important; }
.agreeArea .box th { padding: 2%!important; }
.agreeArea .box td { padding: 2%!important; text-align: left!important; }



	
/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}