@charset "utf-8";

/* CSS Document */
html {
  scroll-behavior: smooth;
}
.ol{

        list-style-type: decimal;

}
/*
 .lower{
	display: none;
}
*/
.close{
	display: none;
}

.top ul{
	display: block;
}
.top .icon_1{
	display: block;
    width: 90px;
    height: 90px;
    line-height: 20px;
    background-color: #FFD93D;
    border-radius: 10px;
	border: 5px solid #42210B;
    color: #42210B;
    text-align: center;
    text-decoration: none;
    position: fixed;
    z-index: 999;
/*    top: 18%;*/
	top:450px;
    right: 2%;
}
.top .icon_1 a img{
    width: 30px;
	display: block;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 8px;
}
.top .icon_1 a{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #42210B;
}
.top .icon_2{
	display: block;
    width: 90px;
    height: 90px;
    line-height: 20px;
    background-color: #C8161D;
    border-radius: 10%;
	border: 5px solid #42210B;
    color: #fff;
    text-align: center;
    text-decoration: none;
    position: fixed;
    z-index: 999;
/*    top: 29%;*/
	top:560px;
    right: 2%;
}
.top .icon_2 a img{
    width: 30px;
	display: block;
	margin: auto;
	margin-top:6px;
	margin-bottom:10px;
}
.top .icon_2 a{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
}

.photo02{
        display: none;
}
.photo03{
        display: none;
}
.photo04{
        display: none;
}
.photo05{
        display: none;
}
/*-------pc-------*/

.pc{

  display: block;
  opacity: 1;
}



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

  .pc{

    display: none;
    opacity: 0;

  }

  .tablet{
    display: block;
    width: auto;
    height: auto;
  }
}

/*--------------輪播-text--------------*/

h7{

  /*! color:red; */
  margin: 10px auto;
  line-height: 1.3;
}
h7 span{
  font-size: 30px;

}
h8{
  display:block;
  font-size:14px;
  line-height: 1.3;
  margin: auto;
  /*position:absolute;*/
  left:75px ;
}
.swiper-slide {
  flex-direction: column;
	margin-bottom: -1%;
}
.swiper-father{
            /*! width:100%; */
            height:auto;
/*            border:1px solid #ecc3eb;*/
            position:relative;
            /*! max-width: 1200px; */
            margin: 0;
	margin-bottom:7%;
            overflow: hidden;
}
.swiper-title{
/*
  height:50px;
  width:100%;
*/
  margin-bottom: 5%;
  /*! background:red; */
}
.swiper-pagination {
/* margin: 25px auto;*/
}
.btn li.bb {
 position:relative;
 min-height: 50px;
}
.btn li.bb >.hiden_{

        position:absolute;

        width: 100%;

        height: 100%;

        top: -35%;

        left: 0;

        /*background: #14ff0057;*/

        z-index: 10;

        display: none;



        cursor: pointer;

}

/*---------kv----------*/



/*
.content{

    background-color: #4168AF;

}
*/





.kv{
    width: 100%;
    height: 0;
    padding-bottom: 37%;
    /*! top: 32px; */
    /*! padding-top: 12%; */
    background-image: url("../images/kv.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 100%;
    position: relative;
	z-index: 1;

}

/*
.all{
    max-width: 1200px;
    margin: 0 auto;

}
*/

/*---------內容開始---------- */

/* -----1.網路/行動銀行會員--------- */

.content_11{
	 background-image: url(../images/bg.jpg);
    background-color: #FFF;
    margin: auto;
    width: 100%;
    /*! height: auto; */
    margin-top: -4%;
    padding-bottom: 5%;
    background-size: 100%;
    background-position: center 0px;
    background-repeat: repeat-y;
    position: relative;
	z-index: 5;
}
.section1{
    max-width: 1300px;
	width: 95%;
    margin: auto;
    /* background-color: #FFFBE5;
    border: 8px #062E56 solid;
    border-radius: 25px; */
    padding: 3%;
	position: relative;
    /*! display: flow-root; */
}
.section1 .small_1{
    max-width: 420px;
    margin: auto;
	padding-bottom: 1%;
	margin-top: -5%;
	margin-bottom: 3%;
}
.section1 .one{
	width: 100%;
	display: flex;
	margin: auto;
}
.section1 .doing1{
	width: 30%;
	height: 680px;
	margin: auto;
	padding: 3% 0;
	background-color: #fff;
	border: 3px solid #99744E;
	border-radius: 15px;
}
.doing1 .ts h3{
	font-size: 24px;
	text-align: center;
	font-weight: 500;
	color: #42210B;
	padding-top: 3%;
	line-height: 1.5;
}
.doing1 .ts h2{
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	color: #42210B;
	line-height: 1.5;
}
.doing1 .ts h5{
	font-size: 18px;
	text-align: center;
	font-weight: 500;
	color: #42210B;
	padding-top: 2%;
	line-height: 1.3;
}
.mcd{
	width: 80%;
	margin: auto;
	padding-top: 7%;
	padding-bottom: 7%;
}
.mcd img{
	display: block;
	margin: auto;
}
.doing1 .gifts h4{
	font-size: 21px;
	text-align: center;
	font-weight: bold;
	color: #42210B;
	line-height: 1.8;
}
.doing1 .gifts p{
	font-size: 16px;
	text-align: center;
	font-weight: 500;
	color: #42210B;
	line-height: 1.3;
}
.btn_a a{
	font-size: 24px;
	font-weight: bold;
	width: 180px;
	height: 50px;
	background-color: #C8161D;
	border-radius: 25px;
	text-align: center;
	margin: auto;
	display: block;
	text-decoration: none;
	color: #fff;
	padding-top: 12px;
	margin-top: 8%;
	margin-bottom: 3%;
}
.btn_a a:hover{
    background-color:#870204;
}
.member a{
	font-size: 21px;
	color: #42210B;
	text-align: center;
	margin: auto;
	display: block;
	padding-top: 2%;

}
.section1 .doing2{
	width: 66%;
	height: 680px;
	margin: auto;
	padding: 3% 0;
	background-color: #fff;
	border: 3px solid #99744E;
	border-radius: 15px;
}

.doing2 .ts h3{
	font-size: 24px;
	text-align: center;
	font-weight: 500;
	color: #42210B;
	padding-top: 1%;
	line-height: 1.5;
}
.doing2 .ts h2{
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	color: #42210B;
	line-height: 1.5;
}
.doing2 .ts h5{
	font-size: 18px;
	text-align: center;
	font-weight: 500;
	color: #42210B;
	padding-top: 1%;
	padding-bottom: 2%;
	line-height: 1.3;
}

.favorable{
	width: 95%;
	display: flex;
	margin: auto;
}
.detai2{
	padding: 2%;
}
.doing2 .gifts2 h4{
	font-size: 21px;
	text-align: center;
	font-weight: bold;
	color: #42210B;
	padding-top: 8%;
	line-height: 1.8;
}
.doing2 .gifts2 small{
	text-decoration:line-through;
}
.doing2 .gifts2 p{
	font-size: 16px;
	text-align: center;
	font-weight: 500;
	color: #42210B;
	line-height: 1.3;
}
.doing2 .gifts2 span{
	font-size: 18px;
	font-weight: bold;
	color: #C8161D;
}
.doing2 .btn_a2{
	margin-top: -6.5%;
}
.content_11 .rabbitL {
    position: absolute;
    width: 250px;
    top: 645px;
    left: calc(50% - 770px);
    z-index: -1;
}

/*-----------2_領活動券+任一美食券------------*/
.content_2{
    /* background-image: url(../images/bg2.png); */
	/* width: 100%;
    height: auto; */
	background-color: #F9E5C7;
	margin: 0 auto;
	padding-top: 3%;
    padding-bottom: 3%;
	position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	z-index: 5;
}
.section2{
    max-width: 1300px;
	width: 95%;
    margin: 1% auto;
    padding: 3%;
	position: relative;
}
.section2 .small_1{
    max-width: 420px;
    margin: auto;
	padding-bottom: 3%;
}
.section2 .mobile{
	width: 100%;
	max-width: 560px;
	margin: auto;
}
.section2 .mobile img{
width: 100%;
	display: block;
	margin: auto;
}
.btn_a2{
	margin-top: -4%;
	margin-bottom: 4%;
}
.line{
	width: 100%;
	margin: auto;
	border-top: 1px solid #42210B;
	margin-bottom: 4%;
}
.section2 .mobile2{
	width: 100%;
	max-width: 1300px;
	display: flex;
	margin: auto;
	margin-left: 2%;
}
.exchange .award{
	display: flex;
	margin: auto;
	justify-content: center;
	margin-bottom: 3%;
}
.exchange .picture{
	width: 100%;
	max-width: 580px;
	margin: auto;
	padding-left: 3%;
	padding-right: 3%;

}
.exchange .award .icon{
	width: 100px;
	margin-right: 1%;
}
.exchange .award .txt{
	font-size: 24px;
	font-weight: bold;
	color: #42210B;
	padding-top: 11%;
}
.food p{
	font-size: 16px;
	text-align: center;
	color: #42210B;
	margin-top: 4%;
	line-height: 1.5;
}
.content_2 .rabbitL {
    position: absolute;
    width: 121px;
    height: 124px;
    top: 250px;
    left: calc(50% - 750px);
    z-index: 1;
}
.content_2 .rabbitL2 {
    position: absolute;
    width: 95px;
    height: 95px;
    bottom: 300px;
    left: calc(50% - 750px);
    z-index: 1;
}
.content_2 .rabbitR {
    position: absolute;
    width: 400px;
    /* height: 127px; */
    top: 968px;
    left: calc(50% + 385px);
    z-index: -1;
}
/*----3_新會員加碼再抽----*/
.content_1_1{
	width: 100%;
	background-color: #FFF6E6;
	margin: 0 auto;
	padding-top: 1%;
    padding-bottom: 3%;
	position: relative;
}
.section2A .small_1{
    max-width: 420px;
    margin: auto;
	padding-bottom: 1%;
}
/*
.section2A{
    max-width: 1300px;
	width: 95%;
    margin: 2% auto;
	position: relative;
}
*/
.section2A .mobile3{
	width: 100%;
	max-width: 1300px;
	display: flex;
	margin: auto;
	padding: 3%;
}
.picture2{
	width: 100%;
	max-width: 570px;
	margin: auto;
	z-index: 5;
	margin-left: 1.5%;
	margin-right: 1.5%;
/*
	padding-left: 3%;
	padding-right: 3%;
*/
}

.btn_a3{
	margin-top: -8%;
}
.content_1_1 .rabbitL {
    position: absolute;
    width: 365px;
    top: 515px;
    left: calc(50% - 750px);
    z-index: 1;
}
.food2{
	margin-top: -2%;
	margin-bottom: 4%;
}
.content_1_1 .rabbitR {
    position: absolute;
    width: 156px;
    height: 224px;
    top: 350px;
    left: calc(50% + 605px);
    z-index: 1;
}
.content_1_1 .rabbitR2 {
    position: absolute;
    width: 95px;
    height: 95px;
    bottom: 450px;
    left: calc(50% + 650px);
    z-index: 1;
}
/*---3_看球賽前----*/
.section3{
    max-width: 1300px;
	width: 95%;
    margin: 2% auto;
/*
    background-color: #EAEEF6;
    border: 8px #062E56 solid;
    border-radius: 25px;
    padding: 3%;
*/
	position: relative;
	padding-bottom: 4%;
}
.section3 .small_1{
    max-width: 420px;
    margin: auto;
	padding-bottom: 1%;
	margin-bottom: 3%;
	margin-top: -5%;
}
.section3 p{
        font-size: 16px;
        color: #42210B;
        text-align: center;
        margin-bottom: 3%;
        line-height: 1.8;
        width: 85%;
        margin: auto;
	    margin-bottom: -2%;
        padding-top: 3;
        margin-top: 3%;
}

/*-------4_加入會員------*/
.section4{
    max-width: 1300px;
	width: 95%;
    margin: 2% auto;

	position: relative;
    margin-top: 7%;
}
.section4 .small_1{
    max-width: 420px;
    margin: auto;
	padding-bottom: 1%;
	margin-bottom: 3%;
	margin-top: -8%;
}
.sub{
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-top: -2%;
	margin-bottom: 2%;
	color: #42210B;
}
.sheet{
	width: 60%;
	margin: auto;
}
.t-black td{
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	background-color: #8C6239;
	padding: 20px 25px;
	color: #fff;
	border: 1px solid #42210B;
        vertical-align: middle;
	line-height: 1.5;
}
.t-white .t-gray{
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	background-color: #F3EFEB;
	padding: 20px 25px;
	color: #42210B;
	border: 1px solid #8C6239;
        vertical-align: middle;
}
.t-white td{
	font-size: 21px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	background-color: #fff;
	padding: 20px 25px;
	color: #42210B;
	border: 1px solid #8C6239;
        vertical-align: middle;
}
.t-gray2{
	vertical-align: middle;
}
.content_2 .rabbitR22 {
    position: absolute;
    width: 400px;
    /* height: 127px; */
    top: 530px;
    left: calc(50% + 325px);
    z-index: -1;
}




.popup-card {

    /*display: flex;*/

   /* flex-direction: column;

    align-items: center;*/

    width: 50%;

    margin: 6% auto;

} */



#text {

    display: none;

}



#input {

    position:absolute;

    z-index:-10;

}

/*.popup-img{

        width: 180px;

}*/



.btn-small {

    display: block;

    width: 300px;

    height: 50px;

    border-radius: 25px;

    background-color: #d80c18;

        margin-top: 25px;

    color: #fff;

    line-height: 50px;

    font-size: 24px;

    font-weight: bold;

    text-align: center;

    margin: auto;

    text-decoration: none;

}


/*
.popup-line {

    width: 30px;

    border-right: 1px solid #333333;

    margin-right: 30px;

}

.popup-card .bank{

  font-size: 24px;

  font-weight: bold;

  display: block;

  text-align: center;

  line-height: 2.8;

}

.popup-card .bank span{

  color: #d80c18;

} */

.nn{

  font-size: 16px;

  color: #333333;

  text-align: center;

  padding-top: 20px;

  margin:  auto;

  display: block;

  line-height: 1.5;

}







  /*------4_輪播-------*/
  .box{
      /*width: 300px;*/
  }
  .swiper-box ul{
    display: flex;
	margin-bottom: -3%;
  }
.swiper-box ul li{
  width:50%;
  }
  .swiper-container{
      overflow:hidden;
  }
.pop{
      display:none;
      position:fixed;
      width:100%;
      height:100%;
      z-index:9999;
      top:0;
      left:0;
      background:rgba(0,0,0,0.7);
}

.pop-wrap{
       position:absolute;
       width:100%;
      height:100%;
      z-index:1;

/*  top:-8%;*/

      left:0;

                display: flex;

  align-items: center;

  justify-content: center;



}



  .pop-content{

      position:absolute;

      width:60%;
	  max-width:550px;
/*      height: 100%;*/
	  max-height: 815px;

      background:#EAEEF6;

      border-radius:10px;
	  top:2%;

      /*! top:10%; */

      /*! margin:auto; */

/*  height: 100vh;*/

/*       height: 80%;*/

      /*! left: 0; */

      /*! right: 0; */

      padding: 2%;

          padding-bottom: 10%;

  }



.swiper-father3{

        /*! padding:5%; */

        width: 70%;

        margin: auto;

}



/*-----------------------------------------------

    df-close

-----------------------------------------------*/

.df-close:hover {

    transform: rotateZ(180deg);

}



.df-close {

    display: inline-block;

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 999;

    z-index: 10;

    opacity: 1;

    width: 35px;

    height: 35px;

    cursor: pointer;

    overflow: hidden;

    transition: all .5s;

    transform-origin: 50% 50%;

}



.df-close::before,

.df-close::after {

    position: absolute;

    top: 50%;

    width: 100%;

    height: 0.18rem;

    border-radius: 5px;

    content: '';

    background: #fff;

}



.df-close::before {

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}



.df-close::after {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}







/*-----------------------------------------------

    df-img

-----------------------------------------------*/



img {

    max-width: 100%;

    border: 0;

    border-style: none;

    vertical-align: middle;

}



.img-auto {

    max-width: initial;

}
.swiper-slide img{
	 max-width: 85%;
}


/*-----3_看球賽前-------*/

.small_2{

        max-width: 500px;
		width: 85%;
        margin: 2% auto 6%;

}

.discount{

        width: 100%;

        display: flex;

        margin: auto;

}

.Details{

        max-width: 32%;

        margin-bottom: 3%;

        margin: auto;

}

.Details img{

/*

        max-width: 100%;

        display: block;

*/

}

/*
.section3 p{
        font-size: 16px;
        color: #333333;
        text-align: center;
        margin-bottom: 3%;
        line-height: 1.8;
        width: 85%;
        margin: auto;
        margin-top: 3%;
		margin-bottom: 3%;
}
*/





.card{



}



.card ul{
display:flex;
align-items: center;
justify-content: center;
margin-bottom: -3%;
}



.card ul li{

padding: 4%;

position:relative;



}



.card ul li.card-left{

        width: 60%;

    margin-left: 3%;



}

.card ul li.card-right{

        width:50%;

        margin-right: -3%;



}

.card ul li img{



        padding: 3%;

}



.dot{

        position:absolute;

        top:45%;

        left:-6%;

        z-index:2;

        width:6%;

        min-width: 50px;

}

/*--------4_忘記登入資訊_輪播---------*/
.swiper-title{
	max-width: 470px;
	margin: auto;
	text-align: center;
	margin-bottom: 6%;
}
.swiper-title h3{
        font-size: 28px;
        text-align: center;
        color: #fff;
		/* border: 2px solid #062E56; */
/*		border-radius: 10px;*/
		background-color: #8C6239;
		padding: 12px 0 ;
}
.swiper-title .size{
	/* max-width: 180px;
	margin: auto; */
}
.step_1{

        margin-top: 6%;

        margin-bottom: 6%;

}

.step_1 h4{

        font-size: 21px;
	   font-weight: 500;
        text-align: center;
        line-height: 1.3;
        font-weight: 500;
        color: #42210B;
		padding-bottom: 2%;

}

.step_1 span{

        font-size: 18px;

}

.step_1 strong{

        font-size: 16px;

        color: #C8161D;

}
.btn_22{
	margin: auto;
}
.btn_22 a{
    width: 240px;
    height: 50px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
        padding-top: 12px;
    /* margin-top: 8%;
    margin-bottom: 3%; */
    display: block;
    margin: auto;
    border-radius: 25px;
    background-color: #C8161D;;
    text-decoration: none;
    color: #fff;
}
.btn_22 a:hover{
	background-color:#870204;
}
.copy P{
        width: 85%;
        margin: auto;
        padding-top: 7%;
        line-height: 1.8;
        text-align: center;
		color: #42210B;
		padding-bottom: 2%;
}
/*-----注意事項------*/
/*
.section5{

        width: 87%;

        margin: auto;

        padding-bottom: 5%;

        padding-left: 1%

}

.note{

        display:none;

}

.note li{

        font-size: 16px;

        line-height: 1.5;

        color: #fff;

}

.section5 .btn_2{

        width: 30%;

        max-width: 250px;

        margin: auto;

        margin-top: 3%;

}
*/
.section5{
	width: 95%;
	max-width: 1200px;
	margin: auto;
}
.note{
	margin: 5% auto;
}
.note li{
        font-size: 16px;
        line-height: 1.8;
        color: #42210B;
	margin-left: 5%;
	margin-right: 1%;
}
.section5 .btn_55{
	margin: auto;
}
.section5 .btn_55 a{
    font-size: 24px;
    font-weight: bold;
    width: 180px;
    height: 50px;
    background-color: #C8161D;
    border-radius: 25px;
    text-align: center;
    margin: auto;
    display: block;
    text-decoration: none;
    color: #fff;
    padding-top: 12px;
    margin-top: 3%;
    margin-bottom: 3%;

}
.section5 .btn_55 a:hover{
	background-color:#870204;
}

/*--------步驟_彈跳視窗---------*/

.pop-content .small_22{

        max-width: 500px;

    margin: 2% auto 3%;

}

.swiper-slide .text{

        font-size: 21px;

        color: #333333;

        font-weight: bold;

        padding-bottom: 6%;

        padding-top: 5%;

}



 .wave{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
   background: url(../images/bg1.png) center 0 /100% repeat-x;
 }

 .wave2{

   background: url(../images/bg2.png) center 0 /100% repeat-x;
 }