@charset "big5";
/* CSS Document */
body {min-width: 1050px; font: 16px/1.5em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {text-decoration: none; transition: .3s ease-in-out;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block;}
.display_m {display: none;}

.main_wrapper {background: url(../images/main_bg.jpg) no-repeat fixed bottom;}

/**kv**/
.kv_wrapper {background: url(../images/kv_bg.jpg) no-repeat center -40px; height: 460px;}
.kv_container {position: relative; margin: auto; width: 1200px; height: 398px;}
.kv_slogan2 {position: absolute; top: 20px; left: 324px; z-index: 5;
  -webkit-animation: slogan1fadeIn 0.8s linear,lightning 2s ease-in-out infinite alternate; 
  animation: slogan1fadeIn 0.8s linear,lightning 2s ease-in-out infinite alternate;}
.kv_slogan3 {position: absolute; top: 285px; left: 154px; z-index: 3; transition: linear .2s;}
.kv_slogan4 {position: absolute; top: 40px; right: -285px; z-index: 1; mix-blend-mode: screen;}

/*==============================================
slogan1fadeIn
==============================================*/
@keyframes slogan1fadeIn {
  0% {
    opacity: 0;
    filter: blur(10px) brightness(150%);
    transform: scale(1);
  }
  40% {
    opacity: 0;
    filter: blur(10px) brightness(150%);
    transform: scale(1);
  }
  60% {
    opacity: 1;
    filter: blur(6px) brightness(120%);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(100%);
    transform: scale(1);
  }
}
@-webkit-keyframes slogan1fadeIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(10px) brightness(150%);
    -webkit-transform: scale(1);
  }
  40% {
    opacity: 0;
    -webkit-filter: blur(10px) brightness(150%);
    -webkit-transform: scale(1);
  }
  60% {
    opacity: 1;
    -webkit-filter: blur(6px) brightness(120%);
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0px) brightness(100%);
    -webkit-transform: scale(1);
  }
}

/*==============================================
lightning
==============================================*/
.lightning {
  -webkit-animation: lightning 2s ease-in-out infinite alternate;
  animation: lightning 2s ease-in-out infinite alternate;
}
@-webkit-keyframes lightning {
  0%, 52%, 56%, 60%, 100% {
    filter: brightness(100%);
  }
  54%, 58%, 62% {
    filter: brightness(140%);
  }
}
@keyframes lightning {
  0%, 52%, 56%, 60%, 100% {
    filter: brightness(100%);
  }
  54%, 58%, 62% {
    filter: brightness(120%);
  }
}

/**rule**/
.main_wrapper h1 {display: table; background: #fbe503; color: #000; border-radius: 10px; border: 3px solid #fff; font-size: 24px; line-height: 24px; font-weight: bold; text-align: center; padding: 10px 40px; margin: 30px auto;}

/**prod_wrapper**/
.prod_wrapper {position: relative; width: 1000px; margin: auto; padding-bottom: 50px;}
.prod_bg {background: url("../images/float.png") no-repeat center; pointer-events: none; mix-blend-mode: screen;}
.prod_content {width: 100%; padding: 3%; border-radius: 20px; background: #fff; font-size: 15px; line-height: 25px; border: 5px solid #fbe503;}
.prod_wrapper h1{font-size: 32px; font-weight: 800; text-align: center; background-color: #f099ae; color: #fff; border-radius: 20px 20px 0 0; padding: 25px 0; line-height: 35px;}
.prod_wrapper h2 {display: inline-block; margin: 10px 0 3px; padding: 10px 35px; border-radius: 20px; background: #2070b3; color: #fff0dc; font-weight: bold; font-size: 22px;}
.prod_wrapper h2 span {display: block; padding-left: 21px;}
.prod_wrapper h3 {color: #277ad9; font-weight: bold; font-size: 18px; line-height: 23px; margin-top: 10px;}

.group {padding-bottom: 10px;}
.group li {margin-left: 25px;padding: 2px 0; list-style-type: disc;}
#group_2, #group_3, #group_4 {background-color: #efefef; padding: 10px 20px; margin-top: 20px; border-radius: 10px;}

table {margin-top: 5px;}
table.box1 {background: #fff;}
td {padding: 5px;}

a.btn_back {display: block; margin: auto; padding: 10px 20px; width: 150px; border-radius: 50px; background-color: #ffea00; color: #000; text-align: center; text-decoration: none; font-size: 24px; transition: linear .2s; cursor: pointer; margin-top: 30px;}
a.btn_back:hover, a.btn_back:focus, a.btn_back:active {background-color: tomato; color: #fff;}

a.btn {display: inline-block; padding: 5px 25px; background: #f8635f; color: #fff; transition: linear .2s; font-weight: bold; border-radius: 20px; /*margin-left: 10px;*/}
a.btn:hover {background: #ffea00; color: #000; transform: translateX(3px);}

table.box1 {margin: 5px 0;}
tr td {padding: 5px 10px;}

@media screen and (max-width:1024px) {
body {width: 100vw; min-width: inherit; font-size: 14px; line-height: 1.3em;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat; height: 36px; position: fixed; right: 10px; width: 36px; bottom: 80px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw; }
.display_m {display: block;}
.display_pc {display: none;}
    
.main_wrapper {width: 100vw; overflow: hidden;}
	
.kv_wrapper {height: 45vw; background-size: 200%;}
.kv_container {width: 100vw; height: 43vw;}
.kv_container img {width: 100%;}
.kv_slogan2 {width: 70vw; top: 3vw; left: 24vw;}
.kv_slogan3 {width: 80vw; top: 30vw; left: 7vw;}
.kv_slogan4 {width: 130vw; top: -3vw; right: -20vw;}
   
/**prod_container_m**/
.prod_wrapper {width: 98vw; padding-bottom: 80px;}
.prod_content {width: 93%; padding: 3%;}
.prod_wrapper h1{font-size: 25px; padding: 15px 0;}	
    
a.btn_back {display: none;}	


/*M版按鈕*/
.float_wrapper { display: none;}
.M_menu_wrap { position: fixed;  bottom: 0; z-index: 999;}
.M_menu_block{ width: 100vw; background-color: rgb(0 0 0 / 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.M_menu_block ul { border-top: 2px solid #999; display: flex; justify-content: center; align-items: center; }
.M_menu_block li { width: 100%; font-size: 18px; line-height: 18px; height: 50px; display: flex; flex: auto; justify-content: center; align-items: center; text-align: center; border-left: 1px solid #222; border-right: 1px solid #666; padding-bottom: 8px;}
.M_menu_block li a{ color: #fff;}
.M_menu_block a{ color: #fff;}

}

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

.group {font-size: 14px; line-height: 1.3em; padding-bottom: 15px;}
.main_wrapper h1 {margin: 0 auto 10px; font-size: 16px; padding: 6px 30px; border: 2px solid #fff;}
.prod_wrapper h2 {display: block; padding: 10px 20px; font-size: 18px; line-height: 1.2em;}
	
td {padding: 2px;}
.prod_wrapper h3 {font-size: 16px; line-height: 20px;}
}

@media screen and (max-width:560px) {	
.prod_content {border: 0;}	
}