@charset "UTF-8";

@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 300;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Light.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Regular.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Medium.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 900;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Black.otf") format("opentype");
  font-display: swap;
}

/* -----main------ */
* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
}

body {
  width: 100%;
  height: 100%;
  font-family: '微軟正黑體', 'MS UI Gothic', Arial, Helvetica, sans-serif;
  font-size: 12px;
}

a,
a:hover,
a:active,
a:visited {
  display: inline-block;
  color: #005bac;
  text-decoration: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table,
tr,
th,
td {
  margin: 0;
  padding: 0;
}

img {
  margin: 0;
  padding: 0;
  display: block;
}

.main {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  color: #333333;
  padding-top: 80px;
  font-size: 12px;
  background: #F6CD54;
}

.section {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* kv */
.kv_container {
  width: 100%;
  margin: 0 auto;
  background: url("../images/kv_bg.png") center top no-repeat;
  background-size: cover;
}

.kv {
  width: 100%;
  max-width: 1400px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}

.kv_2 {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.kv .title {
  width: 42%;
  margin: 0 auto;
  padding-top: 4%;
  /* margin-left: 33%; */
  position: relative;
}

.kv .title .kv_tit {
  animation: bounce-in-bottom 1s;
}

.gi {
  width: 27%;
  position: absolute;
  left: 0%;
  bottom: -20%;
}

.gi_1 {
  right: 0%;
  width: 27%;
  position: absolute;
  bottom: -20%;
}

.table {
  width: 100%;
}

.kv .bling {
  width: 3%;
  position: absolute;
  left: 3%;
  top: 48%;
  animation: heartbeat 1s;
}

.food {
  width: 13%;
  position: absolute;
  bottom: 10%;
  left: 17%;
}

.food_2 {
  left: 31%;
}

.food_3 {
  left: 45%;
  width: 15%;
}

.food_4 {
  left: 60%;
}

.food_5 {
  left: 75%;
  width: 10%;
}

.mobOnly {
  display: none;
}

/* content */
.content_container {
  width: 100%;
  margin: 0 auto;
  /* background-color: #8acceb; */
  background-image: url("../images/location_1.png"), url("../images/location_2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 8% 20%, 93% 50%;
  background-size: 400px, 400px;
}

.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.8;
  color: #333333;
  text-align: center;
}

/* event */
.event {
  width: 86%;
  margin: 4% auto;
  padding: 1% 9% 5%;
  background: #ffffff;
  border-radius: 20px;
}

.event_part {
  margin: 5% 0 0 0;
}



/* .event_tit{} */
.event_tit img {
  width: 200px;
  margin: 0 auto;
  padding: 3% 0;
}

.event_date {
  font-size: 24px;
}

.event_txt {
  text-align: center;
}

.event_txt_s {
  text-align: center;
  font-size: 16px;
  color: rgb(105, 105, 105);
}

.btn_location img {
  width: 180px;
  margin-top: 8%;
}

.pinktt {
  color: #e94c96;
  font-weight: bold;
}

.logo_all {
  margin-top: 6%;
}

.logo_all img {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* action */
.action {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 3% 0 3%;
}

.action-item {
  -webkit-flex: 0 1 270px;
  flex: 0 1 270px;
  max-width: 270px;
}

.action-item a {
  display: block;
}

.action-item+.action-item {
  margin-left: 25px;
}

.btn {
  position: relative;
  display: block;
  border-radius: 45px;
  cursor: pointer;
}


.btn::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: 45px;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
}

.btn img {
  position: relative;
  width: 100%;
  z-index: 1;
  transition: .2s;
}

.btn.pink::after {
  background-color: #ba1563;
}

/* 
.btn.orange::after {
  background-color: #ba5715;
} */

.btn.orange {
  border-radius: 0px;
}

.btn.blue::after {
  background-color: #005bab;
}

.btn:hover img {
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
}

/* notice */
.notice_container {
  background: #F6CD54;
  ;
}

.notice {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2% 5% 2%;
  font-size: 15px;
  line-height: 2;
  color: #333333;
  text-align: justify;
}

.notice_all {
  padding: 2%;
}

.notice_all a {
  /* color: #e94c96; */
  font-weight: bold;
  text-decoration: underline;
}

.notice_all ul {
  margin: 0;
  padding-left: 18px;
  list-style-type: cjk-ideographic;
}

/* .notice_all ul>li{} */
.notice_all ul>li>ol {
  list-style-type: decimal;
  padding-left: 18px;
}

.notice_all ul>li>ol>li>ul {
  list-style-type: disc;
  padding-left: 22px;
}

/* .notice_all ul>li>ol>li>ul>li{} */
.notice_all ul>li>ol>li>ol {
  list-style-type: none;
  padding-left: 18px;
}

.notice_all ul>li>ol>li>ol>li {
  position: relative;
  counter-increment: section;
}

.notice_all ul>li>ol>li>ol>li::before {
  content: "(" counter(section, decimal) ")";
  position: absolute;
  top: 0;
  left: -5px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%)
}

.notice_all ul>li>ol>li>ol>li>ul {
  list-style-type: circle;
}

.notice_tit img {
  max-width: 190px;
  margin: 3% auto;
}

#contTab {
  display: none;
}

.content-more {
  display: none;
}

#contTab:checked~#cont {
  max-height: 180px;
  overflow: hidden;
}

#contTab:checked~.content-more {
  display: block;
  position: relative;
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
}

#contTab:checked~.content-more .gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(254, 239, 212, 0)), to(#F6CD54));
  background-image: -webkit-linear-gradient(top, rgba(254, 239, 212, 0), #F6CD54);
  background-image: linear-gradient(-180deg, rgba(254, 239, 212, 0), #F6CD54);
  height: 90px;
  position: absolute;
  left: 0;
  top: -80px;
  width: 100%;
}

#contTab:checked~.content-more .readmore {
  display: inline-block;
  background: #EB6619;
  color: #ffffff;
  width: 175px;
  height: 42px;
  border-radius: 42px;
  line-height: 42px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.3s;
}

#contTab:checked~.content-more .readmore:hover {
  opacity: 1
}

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

  /* kv */
  .kv {
    width: 100%;
    height: 0;
    padding-bottom: 46%;
  }

  .gi {
    left: 20%;
    bottom: -15%;
  }

  .gi_1 {
    right: 20%;
    bottom: -15%;
  }
}

@media screen and (max-width: 1024px) {
  .main {
    padding-top: 76px;
  }
}

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

  /* content */
  .content {
    width: 100%;
    max-width: 960px;
  }
}

@media screen and (max-width:767px) {
  .main {
    padding-top: 58px;
  }

  /* kv */
  .kv {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin: 0 auto;
    /* background: url("../images/kv_bg_m.png") center top no-repeat; */
    background-size: 30% auto;
  }

  .kv_2 {
    width: 180%;
    left: -40%;
  }

  .kv .title {
    width: 80%;
    margin: 0 auto;
    padding-top: 20%;
    position: relative;
  }

  .gi {
    width: 40%;
    position: absolute;
    left: 10%;
    bottom: -10%;
  }

  .gi_1 {
    width: 40%;
    position: absolute;
    right: 10%;
    bottom: -10%;
  }

  .kv .boy {
    width: 55%;
    position: absolute;
    left: 0%;
    top: 41%;
    transform: rotate(-10deg)
  }

  .kv .hotpot {
    width: 48%;
    position: absolute;
    left: 10%;
    top: 74%;
    z-index: 8;
  }

  .kv .drink {
    width: 28%;
    position: absolute;
    right: 18%;
    top: 47%;
    z-index: 10;
  }

  .kv .bling2 {
    width: 20%;
    position: absolute;
    right: 36%;
    top: 42%;
  }

  .kv .rice {
    width: 9%;
    position: absolute;
    right: 73%;
    top: 78%;
    z-index: 2;
  }

  .kv .rice2 {
    width: 9%;
    position: absolute;
    right: 18%;
    top: 77%;
    z-index: 2;
  }

  .kv .spoon {
    width: 11%;
    position: absolute;
    right: 59%;
    top: 71%;
    z-index: 4;
    transform: rotate(-10deg)
  }

  .kv .veg {
    width: 12%;
    position: absolute;
    right: 43%;
    top: 64%;
    z-index: 4;
  }

  .kv .table {
    width: 100%;
    position: absolute;
    right: 0%;
    top: 76%;
    z-index: 1;
  }

  .kv .car {
    position: absolute;
    left: 20%;
    top: 60%;
    width: 60%;
    height: 0;
    padding-bottom: 42%;
    background: url(../images/car.png) left top no-repeat;
    background-size: 100% auto;
    transform-origin: center bottom;
    animation: scale-up-top 1s;
  }

  .webOnly {
    display: none;
  }

  .mobOnly {
    display: block;
  }

  /* content */
  .content_container {
    background: none;
  }

  /* event */
  .event_part {
    margin: 7% 0;
  }

  .event_tit img {
    padding: 5% 0;
  }

  .event_date {
    font-size: 20px;
  }

  /* .event_txt{text-align: justify;} */
  .event_txt2 {
    text-align: center;
    font-size: 16px
  }

  .event_txts {
    font-size: 14px;
  }

  /* action */
  .action {
    display: block;
  }

  .action-item {
    max-width: 300px;
    margin: auto;
  }

  .action-item+.action-item {
    margin-top: 30px;
    margin-left: auto;
  }

  /* notice */
  .notice_tit img {
    max-width: 180px;
    margin: 5% auto;
  }

  .notice_all ul {
    font-size: 14px;
    padding-left: 28px
  }

  #contTab:checked~#cont {
    max-height: 48vw;
    overflow: hidden;
  }

  #contTab:checked~.content-more .readmore {
    width: 65vw;
    height: 8vw;
    border-radius: 4vw;
    line-height: 8vw;
    font-size: 1em;
  }
}

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

  /* event */
  .event_part {
    margin: 10% 0;
  }

  .event_tit img {
    width: 180px;
  }

  .event_date {
    font-size: 18px;
  }

  .event_txt {
    font-size: 16px;
  }

  /* action */
  .action-item {
    max-width: 220px;
    margin: auto;
  }

  .action-item+.action-item {
    margin-top: 30px;
    margin-left: auto;
  }

  .btn::after {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  .btn:hover img {
    -webkit-transform: none;
    transform: none;
  }

  /* notice */
  .notice {
    padding: 2% 6% 8%;
  }
}

/* animation */
@keyframes shout {

  0%,
  5%,
  15%,
  25%,
  100% {
    transform: scale(1);
  }

  10%,
  20% {
    transform: scale(1.2);
  }
}







/* 教學步驟 */
.teach {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  align-self: stretch;
}




.slider {
  position: relative;
  width: 280px;
  height: 590px;
  overflow: hidden;
}

.phone {
  border-radius: 35px;
  border: 8px solid #bebebe;
  overflow: hidden;
}

/* 整排圖片放在一起 */
.slides {
  display: flex;
  width: 100%;
  /* height: 100%; */
  transition: transform 0.6s ease;

}

.slide {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.slide.active {
  opacity: 1;
}

/* dots */
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #D9D9D9;
  cursor: pointer;
  transition: background .3s;
}

.dot.active {
  background: #FFA36D;
  /* 亮色顯示現在在哪張 */
}

/* txt */

.txts {
  /* font-size: 24px; */
  display: flex;
  padding: 20px 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  flex: 1 0 0;
}

.txt {
  color: rgb(109, 109, 109);
  cursor: pointer;
  transition: .3s;
  text-align: left;
  display: flex;
  /* padding: 12px 16px; */
  align-items: center;
  gap: 20px;
  align-self: stretch;
  border-radius: 11px;
  background: #FFF;
}

.txt.active {
  /* background: #FFEFE5; */
  color: #ED5700;
  font-weight: bold;
  font-size: 20px;
}

.circleNum {
  display: flex;
  width: 30px;
  height: 30px;
  color: #fff;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50%;
  background: #000;
  flex-shrink: 0;
}

.txt.active .circleNum {
  background: #ED5700;
  color: #fff;
}

@media screen and (max-width:960px) {
  .teach {
    gap: 30px;
  }

  .txts {
    gap: 10px
  }
}

@media screen and (max-width:767px) {
  .teach {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  .slider {
    width: 220px;
    height: 473px;
  }

  .txts {
    display: flex;
    padding: 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
    font-size: 16px;
  }

  .circleNum {
    width: 25px;
    height: 25px;
  }

  .txt {
    display: none;
  }

  .txt p {
    line-height: 22px;
  }

  .txt.active {
    font-size: 18px;
    gap: 10px;
    /* padding: 10px 0px; */
    display: flex;
  }
}