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

/*基本*/
body{ margin:0; padding:0; background-color:#26405f;}
	@media screen and (max-width:767px){
		body{ background-color:#26405f;}
	}
br { display:none !important;}


/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow:hidden; width:100%; min-width:1220px; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; }
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
.Area ul {display:inline-block;}
.Area li {list-style:none;float:left;overflow: hidden;}
	@media screen and (max-width:767px){
		.WRAPPER {min-width: inherit; min-height:100vh; overflow:visible;}
		.WRAPPER img {  width:100%;  height:auto;}
	}




/*背景*/
.bg_top-1 { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_top-2 { z-index:-2; position: absolute; top:0; left:0; width:100%; height:100%; background: no-repeat center 27px;  pointer-events:none; animation-delay:0.5s;}
.bg_top-3 { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: no-repeat center 27px;  pointer-events:none; animation-delay:0.5s;}
.bg_top-4 {z-index:-2;position: absolute;top: -220px;left:0;width:100%;height:100%;background: no-repeat center 1203px;pointer-events:none;animation-delay:0.5s;}
.bg_bot-1 {z-index:-3;position: absolute;top: 1850px;left:0;width:100%;height:100%;background: no-repeat center top;pointer-events:none;animation-delay:0.5s;}
.bg_bot-1m { display:none; background:none}
.bg_bot-2 {z-index:-3;position: absolute;top: 3617px;left:0;width:100%;height:100%;background: no-repeat center top;pointer-events:none;animation-delay:0.5s;}
.bg_bot-3 {z-index:-3;position: absolute;top: 5563px;left:0;width:100%;height: 2060px;background: repeat-y center top;pointer-events:none;animation-delay:0.5s;}
.bg_bot-4 {z-index:-3;position: absolute;top: 7107px;left:0;width:100%;height:100%;background: no-repeat center top;pointer-events:none;animation-delay:0.5s;}
 
.bg_re-1 { z-index:-2; position: absolute; top:1948px; left:0; width:100%; height:100%; background: repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_re-2 { z-index:-2; position: absolute; top:0; left:0; width:100%; height:100%; background: repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_m_top { display:none; background:none}
	@media screen and (max-width:767px){
		.bg_top-1 { display:none; background:none !important;}
		.bg_top-2 { display:none; background:none !important;}
		.bg_top-3 { display:none; background:none !important;}
		.bg_top-4 { display:none; background:none !important;}
		.bg_bot-1 { display:none; background:none !important;}
		.bg_bot-1m { display:inherit; z-index:-3; position: absolute; top:389vw; left:0; width:100%; height:350vw; background: no-repeat center top; background-size:100%;}
		.bg_bot-2 { display:none; background:none !important;}
		.bg_bot-3 { display:none; background:none !important;}
		.bg_bot-4 { display:none; background:none !important;}
		.bg_re-1 { display:none; background:none !important;}
		.bg_re-2 { display:none; background:none !important;}
		.bg_m_top { display:inherit; z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: no-repeat center 44px; background-size:100%;}
	}
		

		

		
/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; display:inline-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){
		
		.Area .go_bt:hover {  
		-webkit-transform:none;
     -moz-transform:none;
      -ms-transform:none;
       -o-transform:none;
          transform:none;}
		  
		  
		.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 0% 0%; padding:0; width:50%; list-style: none;}
		.Area_3bn { margin: -1px auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 0% 0% ; padding:0; width:33.33%; 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;}
	}


/*版頭LOGO-PC*/
.Area_top {}

	@media screen and (max-width:767px){
		.Area_top { height: auto;}

	}
	


/*版頭區塊*/
.Area_title {height: 805px;}
.Area_title .titlebox { z-index: 0; position:absolute; left:0px; top:0px; width:1220px; height: auto;}
.Area_title .titlebox .title1 {z-index: 0;position:absolute;left: 231px;top: 79px;animation-delay:0.2s;pointer-events:none;}
.Area_title .titlebox .title2 {z-index: 0;position:absolute;left: 456px;top: 268px;animation-delay:0.4s;pointer-events:none;}
.Area_title .titlebox .pp1 {z-index: 0;position:absolute;left: 202px;top: 312px;animation-delay:0.2s;}
.Area_title .titlebox .pp2 {z-index: 1;position:absolute;left: 763px;top: 324px;animation-delay:0.2s;}
.Area_title .titlebox .pp3 {z-index: 0;position:absolute;left: 898px;top: 218px;animation-delay:0.2s;}
@media screen and (max-width:767px){
		.Area_title { height: 110vw;   overflow:hidden;}
		.Area_title .titlebox { z-index: 0; position:absolute; left:0; top:0vw; width:100%; height:auto;}
		.Area_title .titlebox .title1 {width: 83%;left: 8%;top: 7vw;}
		.Area_title .titlebox .title2 {width: 48%;left: 38%;top: 33vw;}
		.Area_title .titlebox .pp1 {width: 42%;left: 11%;top: 45vw;}
		.Area_title .titlebox .pp3 {width:42%;left: 49%;top: 55vw;}
		}


/*區塊1*/
.Area01 {padding: 40px 0 0 0;}
.Area01 .box_bank { display: flex; flex-wrap: nowrap; margin-bottom: 30px; padding: 0 95px; box-sizing: border-box;}
.Area01 .box_bank a { margin: 0 5px;}
@media screen and (max-width:767px){
  .Area01 { padding: 0; height: 30vw;}
  .Area01 .box_bank {margin-bottom: 4%;padding: 0;}
  .Area01 .box_bank a {margin: 0;}
}


/*區塊2*/
.Area02 {padding: 20px 0;}
@media screen and (max-width:767px){
  .Area02 { padding: 0; }
  .Area02 .box { background-image:url(Area02_m_bg.jpg?t=1757571181306);background-repeat:no-repeat; background-position:center top;}
}

/*區塊3*/
.Area03 {}
.Area03 .box { position: relative; padding: 20px 140px; box-sizing: border-box;}
.Area03 .box .boxbox {position: relative;display: flex;flex-wrap: wrap;z-index: 1;justify-content: center;}
.Area03 .box .boxbox a { position: relative; border: #ffe5cb 1px solid; border-radius: 130px;}
.Area03 .box .boxbox a { margin: 5px 16px;}
.Area03 .box .boxbox a .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font: bold 18px/20px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; color: #fff; z-index: 6; width: 100%;}
.Area03 .box .boxbox a .txt small { font-size: 13px;}
.Area03 .box .boxbox a:hover .txt { display: none;}
.Area03 .box .boxbox a:before {content: "";background-color: rgb(74 43 29 / 89%);width: 148px;height: 149px;position: absolute;border: #ffe5cb 2px solid;border-radius: 130px;z-index: 5;}
.Area03 .box .boxbox a:hover:before { background-color: rgba(96,0,1,0); z-index: -1;}
@media screen and (max-width:767px){
  .Area03 {}
  .Area03 .box { padding: 0 2%; background-image:url(Area03_m_bg.jpg?t=1757571181307);background-repeat:no-repeat; background-position:center top;}
  .Area03 .box .boxbox a {position: relative;width: 28.3%;margin: 1%;}
  .Area03 .box .boxbox a .txt { top: 24vw; left: 50%; transform: translate(-50%,0); font: bold 3.8vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;}
  .Area03 .box .boxbox a:hover .txt { display: block;}
  .Area03 .box .boxbox a:before {width: 26vw;height: 26vw;position: absolute;bottom: 0;z-index: 5;background-color: #ff000000;}
  .Area03 .box .boxbox a:hover:before { background-color: rgba(96,0,1,0.7); z-index: 5;}
}



/*區塊4*/
.Area04 {position: relative; width: 1220px; margin: 0 auto; height: auto; padding: 100px 0 0 0;margin-bottom: 80px;}
.Area04_bg {position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:3000px;background-image:url(Area05_bg.png?t=1757571181307);background-repeat:no-repeat; background-position:center top;}
.Area04 .PD_layout[data-pd-li="BN"] li:nth-of-type(1) {padding-top: 120px;}
.Area04 .PD_layout[data-pd-li="BN"] li:nth-of-type(3) {padding-top: 40px;}
.Area04 .PD_layout[data-pd-li="BN"] li:nth-of-type(4) { top:-80px;}
@media screen and (max-width:767px){
  .Area04 {width:100%; padding: 0; margin-bottom: 0; background-color: #915e3f;}
  .Area04 .box_ ul {padding-left:0!important; padding-right:0!important; padding-top:0!important;}
  .Area04_bg {display: none;}
  .Area04 .box_ li { margin-left:0!important; margin-bottom:0!important;}
  .Area04 .PD_layout[data-pd-li="BN"] li:nth-of-type(1) {height: auto; padding-top: 0;}
  .Area04 .PD_layout[data-pd-li="BN"] li:nth-of-type(3) {height: auto; padding-top: 0;}
  .Area04 .PD_layout[data-pd-li="BN"] li:nth-of-type(4) { top:0;}
}

/*區塊5*/
.Area05 {}
.Area05 .box{ margin-bottom: 80px;}
.Area05 .box .PD_layout{ padding: 10px 0 0 0;}
@media screen and (max-width:767px){
  .Area05 { padding: 0;}
  .Area05 .box { padding: 0; margin-bottom: 0;}
  .Area05 .box .PD_layout{ padding: 0;}
}



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