/*修改部份*/

body {
    width: 100%;
    background: url(../images/bg.jpg) no-repeat top fixed #ffd57e;
}

header, .footer {
    background-color: #21201f;
}

h3 {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 1.5em !Important;
    font-weight: 500  !Important;
}
/* wrapper kv-主視覺 */

.wrapper {
    background: #ffd57e;
    /* 也可以固定主視覺背景 */
}

.wrap-topview {
    background: url(../images/kv-bg.jpg);
    /* 主視覺背景 */
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #ffe5b4;
    background-size: cover;
    width: 100%;
    overflow: hidden;
    height: 950px;
    position: relative;
}
.kv{
    max-width: 80%;
    margin: 0 auto;
    z-index: 50;
}
/* 左右兩邊 */
.people, .top{
    display: contents;
    position: relative;
    overflow: hidden;
}
.left{
   display: block;
    max-width: 45em;
    width: 39%;
    position: absolute;
    height: auto;
    z-index: 10;
    left: 0;
    bottom: 0;
    overflow: hidden;
}
.right{
    display: block;
    max-width: 45em;
    width: 33%;
    position: absolute;
    height: auto;
    z-index: 10;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.left-top{
   display: block;
    max-width: 30em;
    width: 39%;
    position: absolute;
    height: auto;
    z-index: 10;
    left: 0;
    top: 0;
    overflow: hidden;
}
.right-top{
    display: block;
    max-width: 45em;
    width: 30%;
    position: absolute;
    height: auto;
    z-index: 10;
    right: 0;
    top: 0;
    overflow: hidden;
}
.rabbit-left{
   display: block;
   max-width: 18em;
   width: 17%;
   position: absolute;
   height: auto;
   z-index: 10;
   left: 14em;
   bottom: 35em;
   overflow: hidden;
}
.rabbit-right{
    display: block;
    max-width: 13em;
    width: 11%;
    position: absolute;
    height: auto;
    z-index: 10;
    right: 25em;
    bottom: 9em;
    overflow: hidden;
}
/* main-section 內容檔次 */

.main-section {
/*     background: url(../images/bg.jpg); */
    /* 主視覺背景 */
/*     background-repeat: repeat-y;
    background-position: center top;
    background-size: contain; */
    width: 100%;
    overflow: hidden;
    background-color: #ffd57e;
    padding: 0 0 2em;
}
.blur{
        background: url(../images/bg.jpg);
        /* 主視覺背景 */
        background-repeat: repeat-y;
        background-position: center top;
        background-size: cover;
        width: 100%;
        overflow: hidden;
        background-color: #ffd57e;
}

.toppic-pid-box {
    background-color: #fff7ea; /* 改背景顏色 */
    border: 5px solid #2e3292; /* 改border顏色 */
}

/* 活動說明 */

.policyBox {
    background-color: #462e23;
}
/* 說明 */
.statement h2{
  display: block;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 2em;
  margin: 2% auto;
  font-weight: 600;
}
.statement h3{
    text-align: center;
    margin: 0 auto;
    padding: 0.5rem 0;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0.5rem;
    border-radius: 2rem;
    color: #fff;
}
.statement h4{
    font-weight: 400;
    font-size: 1.3em;
    padding-top: 1%;
    color: #fff5d4;
}
.statement p{
  font-size: 1em;
  line-height: 25px;
  color: #fff;
}
.statement .outline{
    display: block;
    border: solid 2px #fff;
    border-radius: 12px;
    padding: 20px;
}
.statement ol li, .statement ul li {
    list-style-type: decimal;
    list-style-position: inside;
}
.statement li {
  padding-left: 3px;
  color: #fff !important;
}
.statement a{
    color: #a6d9ff;
    text-decoration: underline;
    display: inline-block !important;
}
.statement a:hover,.statement a:active{
    color: #ffffa6;
}
.statement img{
  display: block;
  position: relative;
  max-width: 100%;
  margin: 10px 0;
}
.p-tit{
    font-weight: inherit !important;
    margin: 1em 0 auto !important;
    color: #ffe3a2 !important;
}
.bn-group{
    cursor: pointer;
}
.channel-pid img{
    cursor: pointer;
}
.shine li{
    color: #fff454 !important;
}

/* modal */
.modal-content{
  border-radius: 15px;
  background-color: #fff;
  align-items: center;
  text-align: center;
  padding: 10px;
  min-height: 300px;
  justify-content: center;
  margin: 10px;
}
.modal-body{
  display: contents;
}
.btn{
    color: #fff;
}

.btn-style{
    background-color:#3966a3 !important;
    min-width: 100px;
    font-size: 1.4em !important;
    font-weight: 500;
    border-radius: 50px!important;
    margin-bottom: 15px;
    padding: 6px 45px!important;
    border: none !important;
}
.btn-style a{
  color: #fff !important;
}
.btn-style a:hover{
  color: #d8e9ff !important;
  text-decoration: none;
}
.btn-style a:active{
  color: #d8e9ff !important;
  text-decoration: none;
}
.ai-area{
  display: flex;
}
.ai-area img{
    max-width: 13em;
    padding: 0 ;
    margin: 10px auto;
    display: block;
}

.modal-content {
    border: none !important;
    border-radius: 0.6rem !important;
}

.modal h5{
    font-size: 1.4em;
    font-weight: 600;
    margin: 15px;
    color: #333;
}
.modal h6{
    font-size: 1.3em;
    font-weight: 500;
    margin: 15px;
    color: #333;
    margin: 0 ;
}
.bottom-img{
  background: url(../images/bottom.png) no-repeat bottom center;
  padding-bottom: 0;
  background-size: contain;
}
/* 活動 */
.activities{
    display: block;
    max-width: 1200px;
    margin: 5em auto 0;
    width: 90%;
}
.activities img{
    width: 100%;
}
.activities-m{
    display: block;
    max-width: 1200px;
    margin: 5em auto 0;
    width: 100%;
}
.activities-m img{
    width: 100%;
}
.item_03 {
    animation: updown 1.3s ease-in-out 0.5s infinite alternate;
    cursor: pointer;
}
@-webkit-keyframes updown {
  from{
    transform:translate(0,0)
  }
  to{
    transform:translate(0,40px)
  }
}
@keyframes updown {
  from{
    transform:translate(0,0)
  }
  to{
    transform:translate(0,20px)
  }
}
.jump-l{
    animation: updown 0.8s linear 0.2s infinite alternate;
}
.jump-r{
    animation: updown 1s linear 0.4s infinite alternate;
}
@-webkit-keyframes jump {
  0% { 
    transform: translateY(3px)
  }
  50% { 
    transform: translateY(-10px)
  }
   100% { 
    transform: translateY(3px)
  }
}
@keyframes jump {
  0% { 
    transform: translateY(3px)
  }
  50% { 
    transform: translateY(-10px)
  }
   100% { 
    transform: translateY(3px)
  }
}
.texts{
    display: inline-block;
    position: relative;
    text-align: center;
    color: #fff;
    text-decoration: underline;
    font-size: 1.4em;
    left: 9%;
    top: 10px;
    font-weight: 400;
    cursor: pointer;
}
.title{
    display: block;
    position: relative;
    margin: 6em auto 1em;
    max-width: 500px;
    width: 100%;
}
.title-kv{
    align-items: center;
    display: flex;
}
.content_p{
    display: block;
    position: relative;
    z-index: 10;
}
.step{
   /*  border: 4px #c5a26f solid; */
/*     border-radius: 2em; */
    padding: 2em 2em;
    margin: 0 auto;
}
.step a2{
    margin: 5em auto;
}
.step img{
    vertical-align: middle;
    width: -webkit-fill-available;
}
.step .content_p{
    margin-bottom: 2em;
}

.more{
    text-decoration: underline;
    font-size: 1.5em !important;
    color: #3e2419;
}
.title1{
    margin-top: 1em;
    padding: 0 2em;
}
.word{
    margin: 1em auto;
}


/* RESPONSIVE
-------------------------------------------------- */
@media (max-width: 1600px) {
    .kv {
        max-width: 85%;
    }
}
@media (min-width: 1366px) {
    .step-group{
        max-width: 1420px !important;
    }
    .gift-group{
        max-width: 1200px !important;
    }
}
@media (max-width: 1366px) {
}
@media screen and (min-width: 1000px) and (max-width: 2000px) {
    .rabbit-left {
        width: 13%;
        left: 3em;
        top: 10em;
    }
    .rabbit-right{
        width: 10%;
        right: 19em;
        bottom: 18em;
    }
}
@media (max-width: 1200px) {
    .kv {
            max-width: 100%;
        }
}
@media (min-width: 1200px) {
    .word{
        font-size: 1.7em !important;
    }
}
@media screen and (min-width: 576px) and (max-width: 1200px) {
    .title{
        width: 400px;
    }
}
@media (max-width: 992px) {
    .texts{
        font-size: 1.2em;
    }
    .blur{
        background-size: auto;
    }
}
@media screen and (min-width: 576px) and (max-width: 992px) {
    .container{
        width: 90%;
    }
}
@media (min-width: 768px) {
    .gift3-m{
        display: none;
    }    
}
@media (max-width: 768px) {
    .title{
        margin: 4em auto 1em;
    }
    .statement h3 {
        font-size: 1.6rem;
    }
    .ai-area {
        display: block !important;
        max-width: 100%;
    }
    .blur .step{
        padding: 0;
        margin: auto;
    }
    .gift3{
        display: none;
    }
    .step{
        padding: 0 2em;
    }

}

/* APP and mobile */
@media (min-width: 575px) {
    .activities-m{
        display: none;
    }
}
@media (max-width: 576px) {

    .mm-wrap-topview .title_kv .kv {
        height: auto;
    }

    .toppic-pid-box h3.sub-title img{
        width: 70%;
    }
    .title{
        width: 300px;
    }
    .activities {
        margin: 2em auto 0;
    }
    .activities-m {
        margin: 3em auto 0;
    }
    .activities-l{
        display: none;
    }
    .texts{
        top: 36px;
    }
    .word {
        font-size: 1.2em !important;
    }
}