/* --- init --- */
html,
body { overflow-x:hidden !important; padding: 0; margin: 0;  font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI", Arial, sans-serif;            border: none; }
a { cursor : pointer; display : inline-block; text-decoration : none;  background-color: transparent; color:inherit; border : none; }
p { margin: 0 }
img {  max-width : 100%; vertical-align: middle; border : none }
* { box-sizing: border-box; margin : 0; padding : 0; outline : none; }
span { display: inline-block; }
ul, ol { margin : 0; }
ul.decimal, ol.decimal { list-style: decimal; }
ul.disc, ol.disc { list-style: decimal; }
ul.upper_alpha, ol.upper_alpha { list-style: upper-alpha; }
ul.cus, ol.cus { list-style: none;  padding: 0; }
ul.cus>li, ol.cus>li {  position : relative;  padding-left: 22px; }
/*ul.cus>li::before, ol.cus>li::before {  content : attr(str);  position: absolute; top : 0;  left : 0; }
ul.cus._gh>li::before, ol.cus._gh>li::before {  content: "("attr(str) ")" }
ul.cus._num>li:nth-child(n + 10), ol.cus._num>li:nth-child(n + 10) { padding-left: 30px; }*/
ul.none, ol.none { list-style: none; padding: 0;}
@media (min-width:1025px) {
  .up_lg_hide {display: none !important }
}

@media (max-width:1024px) {
  .lg_hide { display: none !important}
}

@media (min-width:769px) {
  .up_md_hide { display: none !important }
}

@media (max-width:768px) {
  .md_hide { display: none !important }
}

@media (min-width:577px) {
  .up_sm_hide { display: none !important }
}

@media (max-width:576px) {
  .sm_hide { display: none !important }
}

@media (min-width:451px) {
  .up_ssm_hide { display: none !important }
}

@media (max-width:450px) {
  .ssm_hide { display: none !important }
}

/* --- header --------------------------------------------- */
header { position: fixed; top: 0; left: 0; right: 0; display: block; background-color: #ffffff; border-bottom:10px solid #ed1b2e; 
         font-size:0; z-index:5; }
header .head_ctn { position  : relative;  max-width : 1140px;  margin: auto; width: 95%; text-align: left; }
header .head_ctn .logo {  position: relative;  z-index : 2; }
header .head_ctn .tab_box {  z-index: 1;  position: absolute; right: 0;  bottom: 0; color: #505050;  text-align: right; }
header .head_ctn .tab_box .tab_item { padding: 20px 15px 20px 50px; cursor: pointer; display: inline-block; font-size: 18px; color: #6d6d6d;
                                      font-weight: 700; -webkit-transition: .3s linear; transition: .3s linear}
header .head_ctn .tab_box .tab_item:hover { color: #ed1b2e; }
header .head_ctn .menu_box { cursor: pointer; position: absolute; top: 50%; right: 5%; padding-top: 6px; padding-left: 10px;
                             -webkit-transform: translateY(-50%); transform: translateY(-50%);  }
header .head_ctn .menu_box>div { background-color: #ed1b2e; width: 30px; height: 2px; margin-bottom: 6px; }
header .tab_box2 { background-color: #ffffff; cursor: pointer; position: absolute; top: 119px; left: 0; right: 0; font-size:20px; 
                   display: none; }
header .tab_box2 .tab_item { background-color: #ffffff; padding: 20px; border-bottom: 1px solid #cccccc; color: #888888; font-weight:700;                                  text-align: center; line-height: 1; -webkit-transition: .25s linear; transition: .25s linear;}
header .tab_box2 .tab_item:hover {  background-color: #efeeee;  color: #888888; opacity: .7; }
header, .head_filler { height: 119px; }
header .head_slogan { font-size: 14px; font-weight: bold; color: #667088; display: inline-block; vertical-align: bottom; padding-bottom: 2%; }
/* --- header MENU for mb--------------------------------------------- */
header .nav_btn { cursor: pointer; position: absolute;  top: 50%;  right: 20px;  transform: translateY(-50%) }
header .nav_btn .nav_line { width: 32px;  height: 3px;  background-color: #ed1b2e; transition: .3s; }
header .nav_btn .nav_line:not(:last-child) { margin-bottom: 8px; }
header .nav_btn .nav_line._1 { transform-origin: left bottom; }
header .nav_btn .nav_line._3 { transform-origin: left top }
header .nav_btn.active { transition: .5s linear }
header .nav_btn.active .nav_line._1 { transform: rotate(42deg) }
header .nav_btn.active .nav_line._2 { opacity: 0; }
header .nav_btn.active .nav_line._3 { transform: rotate(-42deg) }

@media (max-width:1024px) {
  header { border-bottom-width: 8px;}
  header .head_ctn { text-align: center; width: 100%; height: 100%; }
  header .head_ctn>* { vertical-align: middle; }
  header .head_ctn::before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 100%; font-size: 0; }
  header .head_ctn .logo { margin-left: 0; }
  header .tab_box2 { top: 60px; }
  header, .head_filler { height: 60px;}
}

/* --- 外層------------------ --------------------------------------- */
.space_frame { max-width : 1920px; margin : auto; overflow-x: hidden;}

/*===========BANNER----------------=============*/
.kv_frame { position: relative; }
.kv_L { width: 100%; height: auto;display: block;}
.kv_m{ display: none;}/*----手機板關掉----*/

.kv_frame #scene { position: absolute; top: 100px; left: 360px;    bottom: 0px; }

.kv_frame #scene2 { position: absolute; bottom:5px; left: 600px;   }

.kv_frame .kv_gift {  width: 95%;   bottom: 0% ;  left: 0% ;
-webkit-animation:blink-1 .6s .5s 2 both;animation:blink-1 .6s .5s 2 both}

@-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}


.kv_frame .kv_title { width: 98%;   top: 20% ;  left: 0% ; 
-webkit-animation:wobble-hor-bottom 1s .5s 5 both;animation:wobble-hor-bottom 1s .5s 5 both}

@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}




/*==========================KV=============================================================*/
@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    .kv_m{ display: none;}/*----手機板關掉----*/
    .kv_L { width: 100%; height: auto;display: block;}
    .kv_frame { position: relative; }
 }

@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}    
    .kv_m{ width: 100%; height: auto; display: block;}
    .kv_L { width: 100%; height: auto;display: none;}/*----PC板關掉----*/
}

@media (max-width:1024px) {  
 .kv_m{ width: 100%; height: auto; display: block;}
 .kv_L { width: 100%; height: auto;display: none;}/*----PC板關掉----*/
}


/*======================icon for PC====================================*/
.giftBOX{ width :100%; margin: 0 auto; padding: 1% 2% 0% 2% ; }
.giftBOX p{ width:60%; margin: 0 auto; font-size: 18px; font-weight: bold; line-height:1.5em; text-align: center; color: #FF0004;}
.member_L{width:60%; margin: 0 auto; height:auto;display: block; padding: 2% 0%;
		  -webkit-animation:bounce-top .9s both;animation:bounce-top .9s both}
@-webkit-keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}@keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}

.member_S{ display: none;} /*==========手機版關掉========*/

/*======================icon for ipad====================================*/
@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
.giftBOX{ width :100%; margin: 0 auto; padding: 1% 2% 0% 2% ; }
.giftBOX p{ width: 70%; margin: 0 auto;  font-size: 18px; line-height:2em; }
.member_L{width:70%; margin: 0 auto; height:auto;display: block; padding: 2% 0%; }
.member_S{ display: none;}/*==========手機版關掉========*/
}

/*======================icon for MB====================================*/
@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}    
.giftBOX{ width :100%; margin: 0 auto; padding: 4% 2% 0% 2% ; }
.giftBOX p{ width: 100%; margin: 0 auto; text-align: center; font-size: 16px; line-height:1.6em; }
.member_L{display: none; } /*==========桌機版關掉========*/
.member_S{width:100%; margin: 0 auto; height:auto;display: block; padding: 2% 0%; }

}

/*========================表單iframe===============================================*/
#iframe_BOX{width: 50%; margin: 0 auto; background-color:#FFFFFF; padding: 1% 0%;}
#iframe_TXT{ width: 100%; height: auto; margin: 0 auto; overflow-x: hidden; overflow-y: hidden;}

@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
#iframe_BOX{width: 100%; background-color: #FFFFFF; padding: 2% 0%;}
#iframe_TXT{ width: 100%; height: auto; margin: 0 auto; overflow-x: hidden; overflow-y: hidden;}
}

@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}    
#iframe_BOX{width: 100%; background-color: #FFFFFF; padding: 4% 0%;}
#iframe_TXT{ width: 100%; height: auto; margin: 0 auto;}
	
}

/* 卷軸整體/寬度設定/橫卷軸可用 height 設定高度 */
::-webkit-scrollbar {
  width:10px; height:auto; 
	
}
/* 卷軸整條背景色 */
::-webkit-scrollbar-track {
 background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(246,246,246) 47%, rgb(237,237,237) 100%);
background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(246,246,246) 47%,rgb(237,237,237) 100%);
background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(246,246,246) 47%,rgb(237,237,237) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
  border-radius: 10px; 
}
/* 卷軸移動區塊背景色 */
::-webkit-scrollbar-thumb {
background: rgb(219,220,226);
background: -moz-linear-gradient(top,  rgb(219,220,226) 1%, rgb(184,186,198) 100%);
background: -webkit-linear-gradient(top,  rgb(219,220,226) 1%,rgb(184,186,198) 100%);
background: linear-gradient(to bottom,  rgb(219,220,226) 1%,rgb(184,186,198) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdce2', endColorstr='#b8bac6',GradientType=0 );



	  border-radius: 10px;
}
/* 滑鼠經過卷軸移動區塊時背景色 */
::-webkit-scrollbar-thumb:hover {
  background: rgb(96,108,136);
background: -moz-linear-gradient(top,  rgb(96,108,136) 0%, rgb(63,76,107) 100%);
background: -webkit-linear-gradient(top,  rgb(96,108,136) 0%,rgb(63,76,107) 100%);
background: linear-gradient(to bottom,  rgb(96,108,136) 0%,rgb(63,76,107) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );

}	









#healthyBOX{ width: 100%; background-color: #e1e1e1; padding: 1% 2%; }
.healthy_TXT{width: 80%; margin: 0 auto; position:relative;}
.healthy_TXT p{font-size: 26px; font-weight: bold; line-height:2em; padding:0% 0% 0% 20%;  color: #4a5b7c; }

.healthy_TXT .btn1_meb a {position: absolute; bottom:30%; right:20%; z-index: 2;
   padding: 5px 5px; width: 15%;
   border: 1px solid #384765;
   background: -webkit-gradient(linear, left top, left bottom, from(#4a5b7c), to(#384765));
   background: -webkit-linear-gradient(top, #4a5b7c, #384765);
   background: -moz-linear-gradient(top, #4a5b7c, #384765);
   background: -ms-linear-gradient(top, #4a5b7c, #384765);
   background: -o-linear-gradient(top, #4a5b7c, #384765);
   background-color: #384765;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 50px;
   text-shadow: #1A1A1A 1px 1px 1px;
   color: #FFFFFF;
   font-size: 24px; line-height: 1.5em;
   font-weight: bold; text-align: center;
   -webkit-transition: 0.7s;
   -moz-transition: 0.7s;
    -o-transition: 0.7s;
}

.healthy_TXT .btn1_meb  a:hover {
   background: none; background-color: #384765;
    box-shadow: 0px 0px 5px 0px #384765;
   -webkit-box-shadow: 0px 0px 5px 0px #384765;
   -moz-box-shadow: 0px 0px 5px 0px #384765;
   border: 1px solid #384765; color: #FFFFFF;
}
.btn_more_m{display: none; }

@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
#healthyBOX{ width: 100%; background-color: #e1e1e1; padding: 2% 2%; }
.healthy_TXT{width: 80%; margin: 0 auto; position:relative;}
.healthy_TXT p{font-size: 24px; line-height:1.5em; padding-left: 10%;  color: #4a5b7c; }
	
.healthy_TXT .btn1_meb a {position: absolute; bottom:30%; right:10%; z-index: 2;
   padding: 4px 5px; width: 18%;font-size: 20px;}

.healthy_TXT .btn1_meb  a:hover {}
	.btn_more_m{display: none; }
}

@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}  
#healthyBOX{ width: 100%; background-color: #e1e1e1; padding: 3% 0% 3% 0%; }
.healthy_TXT{width: 100%; margin: 0 auto; }
.healthy_TXT p{font-size: 20px; line-height:1.5em; padding:0% 2%; text-align: center; color: #4a5b7c; }
.healthy_TXT .btn1_meb{ display: none;}	
.healthy_TXT a{ display: block; }
	.btn_more_m{display: block; width:80%; padding:1% 10% 2% 25% ;  height: auto; }

}



/* ---------------------------------for PC-------------------------------------------------------------- */
.jia_frame { width: 100%; background-color: #e8ecf0;margin: 0 auto; padding:1% 0% 2% 0%;  }
/* -------------------------------展開收和--------------------- */
#ntc_frame_points{ width: 60%; margin: 0 auto;  }
#ntc_frame_points h3{  display: block; font-size: 40px; padding: 20px 10px; }
#ntc_frame_points h3 img{ padding-right: 15px;}
section{width:100%; margin:0 auto; background-color: #e8ecf0; }

ul.container {  list-style: none;  display: block; }
ul.container:after, ul.container:before {}
ul.container:before {}
ul.container li { }
/* -------------------------------選單title---------------------------- */
.container li label { position: relative;
  display: block;
  color:#cc0000;
  padding: 10px 30px;
  cursor: pointer;
  font-size: 24px;
  line-height:30px; font-weight: bold;
  background:10px center no-repeat  #ffffff;
	
}
.container li label img{ width: 2.5%; display: block;position: absolute; bottom: 10%; right: 10%; }

/* ----------------------------------for PAD-------------------------------------------------------------- */
@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
.jia_frame { width: 100%; background-color: #e8ecf0; margin: 0 auto; padding: 10px 0px 30px;  }
/* -------------------------------展開收和---------------------------------- */	
#ntc_frame_points{ width: 70%; margin: 0 auto; padding: 1% 0% 1% 0%;}
#ntc_frame_points h3{  display: block; font-size: 36px; padding: 20px 30px; }
#ntc_frame_points h3 img{ padding-right: 20px;}
	
section{width:100%; margin:0 auto; padding-top: 10px; }
/* ----選單title-------- */
.container li label { position: relative;
  display: block;
  color:#cc0000;
  padding: 10px 30px;
  cursor: pointer;
  font-size: 24px;
  line-height:30px; font-weight: bold;
  background:10px center no-repeat  #ffffff;}

ul.container li article p {  padding: 10px 40px 10px 40px; font-size: 18px; line-height: 1em;	}
ul.container li article{ border: none;}
.container li label img{ width: 2.5%; display: block;position: absolute; bottom: 10%; right: 10%; }	
	
}

/* --------------------------------for MB------------------------------------------------------------- */
@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}    
.jia_frame { width: 100%; background-color: #e8ecf0; margin: 0 auto; padding: 10px 10px 30px;  }
#ntc_frame_points{ width: 100%;}
#ntc_frame_points h3{  display: block; font-size: 30px; padding: 5px 10px; }
#ntc_frame_points h3 img{ padding-right: 10px;}	
section{width:100%; margin:0 auto; padding-top: 10px; }
ul.container {  width:100%; padding: 0% 0% ; }
/* ----選單title-------- */	
.container li label { position: relative;
  display: block;
  color:#cc0000;
  padding: 10px 30px;
  cursor: pointer;
  font-size: 24px;
  line-height:30px; font-weight: bold;
  background:10px center no-repeat  #ffffff;}
	
ul.container li article p { padding:1.5% 4%; font-size: 16px; line-height: 1.5em; 	}
ul.container li article{ border: none;}
.container li label img{ width: 5%; display: block;position: absolute; bottom: 21%; right: 10%; }		
	
}

/* -------------------------------選單第一個------------------------------------------------------------------ */
ul.container li:first-child, ul.container li:first-child label, ul.container li:first-child label:before {}
ul.container li input {  display: none; }
ul.container li label:hover { 	background:10px center no-repeat  #ffffff; }
.container li input:checked ~ label {  background: 10px center no-repeat  #ffffff; }
ul.container li article {
  height: 0; 
  overflow: hidden;
  display: block; background-color: #FFFFFF; 
  margin-bottom: 10px;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  -o-transition: max-height 1s ease;
  -ms-transition: max-height 1s ease;
  -khtml-transition: max-height 1s ease;
}

ul.container li article p {  padding: 10px 30px;  font-size: 20px;  line-height: 1.5em; }
ul.container li article a {}
ul.container li:last-child article { }
ul.container li article iframe {}
/* ----------------------------內文區塊-------------- */
ul.container li input:checked ~ article {
  height: auto;
  max-height: 800px;
}

/* ----------------------------內文彈跳-------------- */
.anim-art li input:checked ~ article p {
  transform-origin: top;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -khtml-transform-origin: top;
  animation: fade-bounce .7s ease normal;
  -webkit-animation: fade-bounce .7s ease normal;
  -moz-animation: fade-bounce .7s ease normal;
  -khtml-animation: fade-bounce .7s ease normal
}

@keyframes fade-bounce {
  0% {	transform: perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);    opacity: 0; }
  40% {    transform: perspective(800px) translateZ(0px) rotateX(10deg) }
  70% {    transform: perspective(800px) translateZ(0px) rotateX(-5deg) }
  100% {    transform: perspective(800px) translateZ(0px) rotateX(0deg);    opacity: 1; }
}

@-webkit-keyframes fade-bounce {  
	0% {   -webkit-transform: perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg);    opacity: 0;  }
	40% {    -webkit-transform: perspective(800px) translateZ(0px) rotateX(10deg) }
	70% {	-webkit-transform: perspective(800px) translateZ(0px) rotateX(-5deg) }
  100% {    -webkit-transform: perspective(800px) translateZ(0px) rotateX(0deg);    opacity: 1; }
}

@-moz-keyframes fade-bounce { 
	0% {   -moz-transform: perspective(800px) translateY(-10px) translateZ(-40px) rotateX(-90deg); opacity: 0;  }
  40% {    -moz-transform: perspective(800px) translateZ(0px) rotateX(10deg) }
  70% {    -moz-transform: perspective(800px) translateZ(0px) rotateX(-5deg) }
  100% {    -moz-transform: perspective(800px) translateZ(0px) rotateX(0deg); opacity: 1; }
}
  


/*=====================下載 for PC===================================*/
.dowlona{ width: 100%; padding: 1% 0%;  background-color: #e8ecf0;}
.dowlonaBOX{ width: 60%; margin: 0 auto; background-color:   #FFFFFF;}
.dowlona_mb{ display: none;  }/*=============手機板關掉============*/

/*=====================下載 for PAD===================================*/
@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
.dowlona{ width: 100%; padding: 1% 0%;  background-color: #e8ecf0;}
.dowlonaBOX{ width: 70%; margin: 0 auto; background-color:   #FFFFFF;}
.dowlona_mb{ display: none;  }/*=============手機板關掉============*/	
}

/*=====================下載 for MB===================================*/
@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}  
.dowlona{ width: 100%; padding: 2% 0% 4% 0%;  background-color: #e8ecf0;}
.dowlonaBOX{ display: none;}/*==============桌機板關掉============*/
.dowlona_mb{ display: block;  }	
	
}

/*=====================網投 for PC===================================*/
.moreBOX{ width: 60%; padding: 1% 2% 8% 2%; background-color: #FFFFFF ; margin: 0 auto; position: relative;}
.moreBOX h3{ font-size:40px ; line-height: 50px; text-align: center; border-bottom: 5px solid #d6d6d6;}
.moreBOX p{ font-size: 24px; text-align: center; padding: 20px 0px; }
.moreBOX .btn_more a {position: absolute; bottom:20%; left:10%; z-index: 2;
   padding: 5px 5px; width: 30%;
   border: 1px solid #384765;
   background: -webkit-gradient(linear, left top, left bottom, from(#4a5b7c), to(#384765));
   background: -webkit-linear-gradient(top, #4a5b7c, #384765);
   background: -moz-linear-gradient(top, #4a5b7c, #384765);
   background: -ms-linear-gradient(top, #4a5b7c, #384765);
   background: -o-linear-gradient(top, #4a5b7c, #384765);
   background-color: #384765;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 50px;
   text-shadow: #1A1A1A 1px 1px 1px;
   color: #FFFFFF;
   font-size: 24px; line-height: 1.5em;
   font-weight: bold; text-align: center;
   -webkit-transition: 0.7s;
   -moz-transition: 0.7s;
    -o-transition: 0.7s;
}

.moreBOX .btn_more  a:hover {
   background: none; background-color: #384765;
    box-shadow: 0px 0px 5px 0px #384765;
   -webkit-box-shadow: 0px 0px 5px 0px #384765;
   -moz-box-shadow: 0px 0px 5px 0px #384765;
   border: 1px solid #384765; color: #FFFFFF;
}

.moreBOX .btn_more_R a {position: absolute; bottom:20%; right:10%; z-index: 2;
   padding: 5px 5px; width: 30%;
   border: 1px solid #384765;
   background: -webkit-gradient(linear, left top, left bottom, from(#4a5b7c), to(#384765));
   background: -webkit-linear-gradient(top, #4a5b7c, #384765);
   background: -moz-linear-gradient(top, #4a5b7c, #384765);
   background: -ms-linear-gradient(top, #4a5b7c, #384765);
   background: -o-linear-gradient(top, #4a5b7c, #384765);
   background-color: #384765;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 50px;
   text-shadow: #1A1A1A 1px 1px 1px;
   color: #FFFFFF;
   font-size: 24px; line-height: 1.5em;
   font-weight: bold; text-align: center;
   -webkit-transition: 0.7s;
   -moz-transition: 0.7s;
    -o-transition: 0.7s;
}

.moreBOX .btn_more_R  a:hover {
   background: none; background-color: #384765;
    box-shadow: 0px 0px 5px 0px #384765;
   -webkit-box-shadow: 0px 0px 5px 0px #384765;
   -moz-box-shadow: 0px 0px 5px 0px #384765;
   border: 1px solid #384765; color: #FFFFFF;
}


.btn_more_m{display: none;}

.VFA_btn{display: block;width: 50%; overflow: hidden; float: left;}


/*=====================網投 for PAD===================================*/
@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
.moreBOX{ width: 70%; padding: 1% 2% 8% 2%; background-color: #FFFFFF ; margin: 0 auto; position: relative;}
.moreBOX h3{ font-size:40px ; line-height: 50px; text-align: center; border-bottom: 5px solid #d6d6d6;}
.moreBOX p{ font-size: 24px; text-align: center; padding: 20px 0px; }	
	.btn_more_m{display: none;}
	.moreBOX .btn_more a {bottom:10%;width: 60%; right:20%; }
	
	
.moreBOX .btn_more a {position: absolute; bottom:15%; left:10%; z-index: 2;
   padding: 5px 5px; width: 30%;
   border: 1px solid #384765;
   background: -webkit-gradient(linear, left top, left bottom, from(#4a5b7c), to(#384765));
   background: -webkit-linear-gradient(top, #4a5b7c, #384765);
   background: -moz-linear-gradient(top, #4a5b7c, #384765);
   background: -ms-linear-gradient(top, #4a5b7c, #384765);
   background: -o-linear-gradient(top, #4a5b7c, #384765);
   background-color: #384765;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 50px;
   text-shadow: #1A1A1A 1px 1px 1px;
   color: #FFFFFF;
   font-size: 24px; line-height: 1.5em;
   font-weight: bold; text-align: center;
   -webkit-transition: 0.7s;
   -moz-transition: 0.7s;
    -o-transition: 0.7s;
}

.moreBOX .btn_more  a:hover {
   background: none; background-color: #384765;
    box-shadow: 0px 0px 5px 0px #384765;
   -webkit-box-shadow: 0px 0px 5px 0px #384765;
   -moz-box-shadow: 0px 0px 5px 0px #384765;
   border: 1px solid #384765; color: #FFFFFF;
}
	
.moreBOX .btn_more_R a {position: absolute; bottom:15%; right:10%; z-index: 2;
   padding: 5px 5px; width: 30%;
   border: 1px solid #384765;
   background: -webkit-gradient(linear, left top, left bottom, from(#4a5b7c), to(#384765));
   background: -webkit-linear-gradient(top, #4a5b7c, #384765);
   background: -moz-linear-gradient(top, #4a5b7c, #384765);
   background: -ms-linear-gradient(top, #4a5b7c, #384765);
   background: -o-linear-gradient(top, #4a5b7c, #384765);
   background-color: #384765;
   box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -moz-box-shadow: 0px 7px 2px -5px #1A1A1A, inset 0px 0px 2px #1A1A1A;
   -webkit-border-radius: 28px;
   -moz-border-radius: 28px;
   border-radius: 50px;
   text-shadow: #1A1A1A 1px 1px 1px;
   color: #FFFFFF;
   font-size: 24px; line-height: 1.5em;
   font-weight: bold; text-align: center;
   -webkit-transition: 0.7s;
   -moz-transition: 0.7s;
    -o-transition: 0.7s;
}

.moreBOX .btn_more_R  a:hover {
   background: none; background-color: #384765;
    box-shadow: 0px 0px 5px 0px #384765;
   -webkit-box-shadow: 0px 0px 5px 0px #384765;
   -moz-box-shadow: 0px 0px 5px 0px #384765;
   border: 1px solid #384765; color: #FFFFFF;
}	
	
	.VFA_btn{display: block;width: 50%; overflow: hidden; float: left;}

	
}

/*=====================網投 for MB===================================*/
@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}  
.moreBOX{ width: 100%; padding: 1% 2%; background-color: #FFFFFF ; margin: 0 auto; position: relative;}
.moreBOX h3{ font-size:30px ; line-height: 50px; text-align: center; border-bottom: 5px solid #d6d6d6;}
.moreBOX p{ font-size: 18px; line-height: 1.5em; text-align: center; padding: 10px 0px; }
	.btn_more{ display: none;}
	.moreBOX a{display: block;}
	  .btn_more_m{ display: block; width:100%; padding:1% 2% 2% 2% ;  height: auto;}
	
.VFA_btn{display: none;}
}

/* --- footer ------------------------------------ */
footer { display: block; text-align: center; padding: 25px 10px 50px 10px; border-bottom: 16px solid #ed1b2e; font-size:15px; color: #6d6d6d; 
         line-height: 1.5; box-shadow: 0px -2px 10px #eeeeee; }
footer .fo_ctn { max-width: 600px; margin: auto; }
footer .fo_ctn .fo_media a { width : 30px; padding: 0 8px 8px;  box-sizing : content-box; font-size: 0; line-height: 1; }
footer .fo_link a {  color : #6d6d6d;  -webkit-transition: .5s;  transition: .5s; line-height: 30px; text-decoration: underline;}
/*--- footer .fo_link a::after {  content: "｜";  padding: 0 5px; } ----*/
footer .fo_link a:nth-of-type(5)::after, footer .fo_link a:nth-of-type(9)::after { content: ""; }
footer .fo_link a:hover {  color: #ed1b2e; }

@media (max-width:1024px) { footer { border: none; } }

@media (max-width:576px) {
	footer { padding: 25px 10px 40px 10px; border-bottom: 16px solid #ed1b2e;
         line-height: 1.5; box-shadow: 0px -2px 10px #eeeeee; }
	footer .fo_ctn { max-width: 350px; } 
	footer .fo_link a {  color : #6d6d6d;  -webkit-transition: .5s;  transition: .5s; line-height: 24px;}
}

/*=============手機板 固定下方按鈕=====================*/
btn_mobile { width: 100%; height: auto;  }
#btn_mobile img#btnS{ display: none;}

@media screen and ( max-width:812px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
    html, body {-webkit-text-size-adjust: none;}
    
#btn_mobile img#btnS{ width: 100%; display: block; height: auto; position: fixed;  bottom: 0px;}
}

@media  ( max-width:1024px) {
btn_mobile { width: 100%; height: auto;  }

    
#btn_mobile img#btnS{ width: 100%; display: block; height: auto; position: fixed;  bottom: 0px;}
}

@media only	screen and (min-width: 812px) and (max-width: 1366px) {
* {	-webkit-box-sizing: border-box;	box-sizing: border-box;}
#btn_mobile img#btnS{ display: none;}
#go-buy-btn{}    
}


/*=========================================================================================*/




.ctn1 { max-width: 1140px; margin: auto; }
.fx { display: flex; }
.jcc { justify-content: center; }
.aic { align-items: center; }
.h100 { height: 100%; }
._noto { font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "Segoe UI", Arial, sans-serif; }
.nav_mask { position: fixed; top: 0; left: 0; right: 0;  bottom: 0; z-index: 4;  background-color: rgba(0, 0, 0, 0.5) }
.nav_mask:not(.active) { display: none; }
.san_form { position: relative; background-position: top, 99%, bottom, left; background-repeat: repeat-x, repeat-y, repeat-x, repeat-y; }
.san_form._sea { 
    background-image: url("../images/line-02.jpg"), url("../images/line-01.jpg"), url("../images/line-02.jpg"), url("../images/line-01.jpg") }
.san_form._mot { 
    background-image: url("../images/line-04.jpg"), url("../images/line-03.jpg"), url("../images/line-04.jpg"), url("../images/line-03.jpg")
}
.san_form._hrt { 
    background-image: url("../images/line-06.jpg"), url("../images/line-05.jpg"), url("../images/line-06.jpg"), url("../images/line-05.jpg") }