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


/*基本*/
body {margin: 0; padding:0; background:#bfd3c0;}
	@media screen and (max-width:767px){
		body {background:none;width:100%; background:#bfd3c0;}
	}


/*全BOX版面*/
.WRAPPER {position:relative; display:inline-block;  margin:0; padding:0;  width:100%;  overflow:hidden; }
.WRAPPER img {border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;display: block;}
.WRAPPER .mainArea {  margin:0 auto; width:1220px; font-family:"Century Gothic", "微軟正黑體", sans-serif; position:relative; }
.WRAPPER .mainArea a{ padding:0; margin:0; text-decoration:none; }
.Area .list_00 ul {display:inline-block;}
.Area .list_00 li {list-style:none;float:left;overflow: hidden;}

@media screen and ( max-width:736px) {
	.WRAPPER {min-width: inherit; background:url(""); background-repeat:repeat-y; background-size:100%;background-color:transparent; }
	.WRAPPER .mainArea { padding-bottom:0px; width:100%; }
	.WRAPPER img {width:100%; height:auto;}
	.NavArea_tabbar { margin: 0 auto 0vw; }
}


/*PC背景*/
.bg_01 { z-index:-50; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-50; position:absolute; top:1000px; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;}
.bg_03 { z-index: -45; position:absolute; background-color: #e4e8d8; top: 3664px; height: 1380px; width: 100%; background-repeat:no-repeat; }
.bg_04 { z-index: -45; position:absolute; top: 4804px; height: 1500px; width: 100%; background-repeat:no-repeat; }
.bg_deco1 { z-index:-40; position:absolute; top:1613px; left:0; width:100%; height:5677px; background-repeat:repeat-y; background-position: center top; pointer-events:none;}
	@media screen and ( max-width:736px) {
		.bg_01 { display:none}
		.bg_02 { display:none}
		.bg_deco1 { display:none}
}


/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; 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;}
.Area1300 { margin:0 auto; width:1300px;}
.Area960 { margin:0 auto; width:960px;}
	@media screen and (max-width:767px){
	    .Area1220 {width:100%;height: 0vw;}
		.Area1300 { 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 0% 0%; padding:0; width:50%; list-style: none;}
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 0% 0% ; padding:0; width:33.33%; list-style: none;}
		.Area_4bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_4bn a { float:left; margin:0 0% 0% ; padding:0; width:25%; 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;}
		.Area_4bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; list-style: none;}
	}

	
/*按鈕*/
.bnn {
	
}
.bnn a img {
	transition-duration: 0.1s;
	backface-visibility: hidden;
	transform: translateZ(0);
	display: block;
	margin: 0;
	padding: 0px;
	width: 100%;
	height: auto;
	text-align: left;
}
.bnn:hover a img {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}	
	


/*我是CSS_momologo*/
.momologo { position:absolute; top: 30px; left:30px; z-index:999; }
	@media screen and (max-width:767px){
      .momologo {width: 100%;top: -117vw;width: 100%;}
	}

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


/*版頭區塊*/
.Area_title {height:650px;}
@media screen and (max-width:767px){
	.Area_title {height:50vw;}			
		}
	


/*按鈕*/
.Area_btn {height:230px;}
.pc_activ_a {position:absolute;left:-20px;top:0px; width:1220px}
.pc_activ_a ul{ margin:0 0px 0 0}
.pc_activ_a li {list-style:none;display:inline-block; width:17%; margin:0 0 0 30px;}
@media screen and (max-width:767px){
	.Area_btn {height:auto;}	
	.pc_activ_a {position:absolute;left:-7vw;top: 6vw; width: 105%}
	.pc_activ_a ul{ margin:0 0px 0 0px}
	.pc_activ_a li {list-style:none;display:inline-block; width: 22%; margin:0 0 0 2vw;}

		}


/*三大資訊*/
.Area_message {height:540px;}
.pc_activ_d {position: relative;left: -28px; top: -256px; width:1220px; z-index: 10;}
.pc_activ_d ul{ margin:0 0px 0 0}
.pc_activ_d li {list-style:none;display:inline-block;width: 48%;margin: 2px 0px 5px 26px;}

@media screen and (max-width:767px){
	.Area_message {height: 70vw;}	
    .pc_activ_d {position:relative;left: -19vw; width: 123%;z-index: 5;         top: 0vw;}
	.pc_activ_d ul{ margin:0 0px 0 0px}
	.pc_activ_d li {list-style:none;display:inline-block; width: 70%; margin:0 0 0 4vw;}


		}




/*如何加入綠活會員*/
.Area05 { height: auto;}
.Area05 .box_list { text-align: center; font-family: "Century Gothic","Microsoft JhengHei"; color: #4b4b4b;}
.Area05 .box_list ul { margin: 0; list-style: none; background: rgba(255,255,255,0.9);}
.Area05 .box_list li { border: none;}
.Area05 .PD_layout .PD_into { justify-content: flex-start; width: 100%;}
.Area05 .PD_layout .PD .txtl { color: #518021; font-size: 1.65em; font-weight: 900; letter-spacing: -0.05em; text-align: center; margin-bottom: .5em;}
.Area05 .PD_layout .PD .txt2 { color: #4b4b4b; font-size: 1.6em; font-weight: 200; letter-spacing: -0.05em; text-align: center;}
.Area05 .PD_layout .PD_img { width: 94%; margin: 0 auto; padding: 0;}

@media screen and (min-width:768px){
  .Area05 { border-radius: 115px 115px 0 0; margin-bottom: 223px;}
  .Area05 .box_list { font-size: 1.65em; position: relative; width: 1180px; left: 20px;}
  .Area05 .box_list ul { border-radius: 7px 7px 7px 7px;} 
  .Area05 .PD_layout.PD_box ul {padding: 0 !important;grid-gap 0 !important;;}
  .Area05 .PD_layout .PD_img { width: 80%;}
}

@media screen and (max-width:767px){
  .Area05 { width: 100%; border-radius: 7vw 7vw 0 0; margin-bottom: 3vw;}
  .Area05 .box_list { font-size: .95em; position: relative; width: 96%; padding: 2% 2% 2% 2%;}
  .Area05 .box_list ul { border-radius: 3vw 3vw 3vw 3vw; width: 100%; padding-top: 7vw; grid-gap: 7vw;}
  .Area05 .PD_layout .PD .txtl { font-size: .95em; width: 100%; margin-bottom: .3em;}
  .Area05 .PD_layout .PD .txt2 { font-size: .9em; letter-spacing: -.04em; margin-right: .01em;}
  .Area05 .PD_layout .PD_slide { padding: 0;}  
  .Area05 .PD_layout .PD_img { width: 100%;}
}

/*02*/
.Area_02 {height:1500px;bottom: 150px;}
.Area_02 p { position: absolute;left:100px;top:223px; color: #3046c1; font-family:"Century Gothic", "微軟正黑體", sans-serif; font-size:31px;font-weight:bold; z-index: 10}
.Area_02-2 {height:2497px;bottom: 378px;}
.Area_02-2 p { position: absolute;left:100px;top:225px; color: #3046c1; font-family:"Century Gothic", "微軟正黑體", sans-serif; font-size:31px;font-weight:bold; z-index: 10}
@media screen and (max-width:767px){
	.Area_02 {height: auto;position: relative;bottom: 0;}	
	.Area_02 p { position: absolute;left: 8vw;top:25vw; color: #3046c1; font-family:"Century Gothic", "微軟正黑體", sans-serif; font-size: 17px;}
	.Area_02-2 {height: auto;bottom: -1vw;}	
	.Area_02-2 p {position: absolute;left: 8vw;top:14vw;color: #3046c1;font-family:"Century Gothic", "微軟正黑體", sans-serif;font-size: 17px;}
	}

/*輪播BN*/
.Area_02-2 .Area_BN {position:relative;top:120px; }
.Area_02-2 .Area_BN .box{height:271px;}
    @media screen and (max-width:767px){
	.Area_02-2 .Area_BN{position:relative;top:0vw;}	
	.Area_02-2 .Area_BN .box{width:100%;height:23vw;}
}
		

/*icon*/
.Area_icon {height:0px;}
.pc_activ_c {position:absolute;right: 100px;top:-711px; width:1220px}
.pc_activ_c ul{ margin:0 0px 0 0}
.pc_activ_c li {list-style:none;display:inline-block; width:14%; margin:0 0 0 30px;}
@media screen and (max-width:767px){
	.Area_icon {height:0vw;}	
	.pc_activ_c {position:absolute;left: -11.5vw;top: -85vw;width:110%;}
	.pc_activ_c ul{ margin:0 0px 0 0px}
	.pc_activ_c li {list-style:none;display:inline-block;width: 22%;margin: 2vw 0 0 3vw;}

		}

/*icon2*/
.Area_icon2 {height:0px;}
.Area_02 .Area_icon2 {position:absolute;right: 509px;top:-979px; width:960px}
.Area_icon2 ul{position: absolute;width: 100%;top: 922px;right: 475px;z-index: 99;}
.Area_icon2 li {list-style:none;display:inline-block; width:14%; margin:0 0 0 30px;}
@media screen and (max-width:767px){
	.Area_02 .Area_icon2 {position:absolute;right: 0vw;top:9vw; }
	.Area_icon2 ul{position: absolute;width: 100%;top: 205vw;right: 28vw;z-index: 99;}
	.Area_icon2 li {list-style:none;display:inline-block; width:25%; margin:0 0 0 0vw;}

		}

/*03*/
.Area_03 {height:824px;bottom:287px;}
.Area_03 img{position:absolute; top:-196px;}
@media screen and (max-width:767px){
	.Area_03 {height: auto;bottom: 0vw;}	
	.Area_03 img{position: relative;top: 0vw;right: 0vw;/* bottom: 4vw; */}
}

/*04*/
.Area_04 {height:320px;bottom: 200px}
@media screen and (max-width:767px){
	.Area_04 {height: 77vw;bottom: 0;}			
		}


/*logo*/
.Area_logo {height:870px;}
.pc_activ_b {position:absolute;left:-70px;top:130px; width:1300px}
.pc_activ_b ul{ margin:0 0px 0 0}
.pc_activ_b li {list-style:none;display:inline-block; width:13%; margin:0 0 50px 30px;}
@media screen and (max-width:767px){
	.Area_logo {height: 100vw;bottom: 0;background-color: #e5e7d9;margin-bottom: 5vw;}	
	.pc_activ_b {position:absolute;left:-8vw;top: 0vw;width: 105%;}
	.pc_activ_b ul{ margin:0 0px 0 0px}
	.pc_activ_b li {list-style:none;display:inline-block;width: 20%;margin: 0 0 4vw 2vw;}

		}

/*QA區塊*/
.Area_QA .titleQA {position: relative; margin: 0 0 70px 0;}

.QAbox .moreButton .fix.up::after{ transform:rotate(0deg);}
  .QAbox .moreButton .fix.down::after { transform:rotate(180deg);}
  @media screen and (min-width:768px){
	.Area_QA .box_title {text-align: center;color: #2b5227;/* text-shadow: 0px 0px 15px #ed5e27; */font: bold 50px / 50px "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;margin: 15px 0 0 0;}
	.QAbox {padding: 10px 35px 60px 40px;}  
    .Area_QA { min-height: 630px; margin-top: -130px;}
    .order_btn {  position: absolute; bottom: -20px; left: 429px; margin-bottom: 50px;}
  }
  @media screen and (max-width:767px){
	.Area_QA .titleQA {position: relative; width: 167%; left: -34vw;margin: 0;}
	.Area_QA .box_title {text-align: center;color: #2c5327;/* text-shadow: 0px 0px 15px #ed5e27; */font: bold 1.5em / 1.5em "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica;font-weight: 800;margin: 8vw 0 0 0;}
     .Area_QA {margin-top: 0vw;height: auto;}
    .order_btn {width:50%; margin: 5vw auto 4vw;}  	
    .QAbox { width: 95%; margin: 0 auto;}
  }

/*訂閱說明 展開選單*/
.QAbox .moreButton { width:100%;   }
.QAbox .moreButton .title { font:20px/1.7em '微軟正黑體'; letter-spacing: 0; text-align:left; margin-bottom:10px; display:inline-block; color: #000;}
.QAbox .moreButton dl {}
.QAbox .moreButton dt { cursor:pointer; }
.QAbox .moreButton dd { display: none; margin:0; padding:3%; font:18px/1.8em '微軟正黑體', 'Century Gothic'; text-align:left; color:#922715; background-color:#fff; border: 2px solid #77933c;}
.QAbox .moreButton .menu_btn { position: relative; display: block; height:50px; width: 100%; font:bold 21px/50px 微軟正黑體; color: #FFF; text-align: left; box-sizing: border-box; padding-left: 2% }
.QAbox .moreButton .up::after{ content: ""; position: absolute; top:45%; right:2%; width: 0; height: 0; border-style: solid; border-width: 0.6em 0.4em 0 0.4em; border-color: #fff transparent transparent transparent;transform:rotate(180deg);}
.QAbox .moreButton .down::after { content: ""; position: absolute; top:45%; right:2%; width: 0; height: 0; border-style: solid; border-width:0.6em 0.4em 0 0.4em; border-color: #fff transparent transparent transparent;}
.QAbox .moreButton .up img{ width:100%; height:auto }
.QAbox .moreButton .down img{ width:100%; height:auto}
.QAbox .moreButtontag { display:none!important;}

	@media screen and (max-width:767px){

	.QAbox .moreButton { width:100%; margin:1vw auto; }
    .QAbox .moreButton .title {font:16px/1.7em '微軟正黑體'; letter-spacing: 0; text-align:left; margin-bottom:10px; display:inline-block}
    .QAbox .moreButton dl {}
    .QAbox .moreButton dt {cursor:pointer; }
    .QAbox .moreButton dd {display: none; margin:0; padding:3%; font:16px/1.8em '微軟正黑體', 'Century Gothic'; text-align:left; color:#922715; background-color:#fff;}
    .QAbox .moreButton .menu_btn { position: relative; display: block; height:2em; font:bold 16px/2em 微軟正黑體;color: #FFF;text-align:left; padding: 0 2% ; }
/*    .moreButton .up::after{content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;transform:rotate(180deg);}*/
/*    .moreButton .down::after {content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;}*/
	.QAbox .moreButton .up img{ width:100%; height:auto }
    .QAbox .moreButton .down img{ width:100%; height:auto}
    .QAbox .moreButtontag { display:none!important;}
	}



/*可拖移廣告icon*/
/*@media screen and (min-width:768px){
 .Area_hammerAD { position: fixed; z-index: 300;  left: 50%; right: auto; bottom: 50px; display: block; width: 200px; height:200px; transform: translateX(618px); }
 .Area_hammerAD .box {position: relative; margin-right: 10px; opacity: 1; }
}
@media screen and (max-width:767px){
.Area_hammerAD { display: block; z-index: 300; position: fixed; bottom: 40vw; right: 0%; width: 22%;}
}*/

/*可拖移廣告icon(修改)*/
.Area_hammerAD { z-index: 300; display: none; position: fixed; bottom: 0; right: 0; transform: translate3d(0,200px,0); /*background-color: rgba(0,0,0,0.5);*/}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto;}
.Area_hammerAD .closeButton a { display:block; cursor:pointer; position:absolute; width:20px; height:20px; border-radius:50%; font:bold 20px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5); text-decoration: none; z-index:2}
    @media screen and (min-width:768px){
      .Area_hammerAD { position: fixed; z-index: 300;  left: 50%; right: auto; bottom: 50px; display: block; width: 210px; height:200px; transform: translateX(618px); }
      .Area_hammerAD .closeButton a { top: 0; right: 0;}
      .Area_hammerAD_phone { display: none;}
    }
    @media screen and (max-width:767px){
        .Area_hammerAD { display: block; width: 26%; }
        .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
    }