h1 {
  font-weight: 700; }

h2 {
  font-weight: 700; }

h3 {
  font-weight: 700; }

h4 {
  font-weight: 700; }

h5 {
  font-weight: 700; }

h6 {
  font-weight: 700; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format("opentype"); }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format("opentype"); }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format("opentype"); }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format("opentype"); }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format("opentype"); }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format("woff"), url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format("opentype"); }

@font-face {
  font-family: 'icochild';
  src: url("../fonts/icochild.eot?kxcwwp");
  src: url("../fonts/icochild.eot?kxcwwp#iefix") format("embedded-opentype"), url("../fonts/icochild.ttf?kxcwwp") format("truetype"), url("../fonts/icochild.woff?kxcwwp") format("woff"), url("../fonts/icochild.svg?kxcwwp#icochild") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icochild' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-facebook:before {
  content: "\e906"; }

.icon-Q:before {
  content: "\e905"; }

.icon-arrow-l:before {
  content: "\e900"; }

.icon-arrow-r:before {
  content: "\e901"; }

.icon-donate:before {
  content: "\e902"; }

.icon-home:before {
  content: "\e903"; }

.icon-fb:before {
  content: "\e904"; }

.histroyBox .dateBox .inner, .histroyBox .photo, .frame, .eventBox .photoBox span {
  width: 100%;
  height: 100%; }

.storyBox .itemInfo p, .histroyBox .tt, .eventBox .tt, .eventBox .txt {
  text-align: justify;
  text-justify: inter-ideographic; }

.storyBox .arrowBox, .histroyBox .date {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

@-webkit-keyframes donut-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes donut-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

header {
  position: relative; }
  @media screen and (max-width: 767px) {
    header {
      position: fixed;
      top: 0;
      left: 0; } }

.wrap {
  padding-top: 0; }

.kvBox {
  width: 100%;
  height: 490px;
  background: url(../img/banner.jpg) no-repeat center center;
  background-size: cover; }
  @media screen and (max-width: 1440px) {
    .kvBox {
      height: 450px; } }
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .kvBox {
      height: 315px; } }
  @media screen and (max-width: 767px) {
    .kvBox {
      background: url(../img/banner-m.jpg) no-repeat top center/cover;
      width: 100%;
      height: 100vh; } }
  @media only screen and (max-device-width: 767px) {
    .kvBox {
      height: calc(100vh - 55px);
      background-position: 0 60%; } }
  @media screen and (max-width: 413px) {
    .kvBox {
      background-position: 0 25%; } }
  @media screen and (max-width: 374px) {
    .kvBox {
      background-position: 0 45%;
      height: calc(100vh - 50px); } }
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .kvBox {
      height: calc(100vh - 120px);
      background-position: 50% 50%; } }

@media screen and (max-width: 767px) {
  .new-bn {
    background-position: center; } }

.storyBox {
  margin-top: -20px;
  padding-bottom: 180px; }
  @media screen and (min-width: 1680px) {
    .storyBox {
      padding-bottom: 200px; } }
  @media screen and (max-width: 767px) {
    .storyBox {
      border-top: 10px solid #cd2c5d;
      padding-bottom: 100px; } }
  .storyBox .itemBox {
    position: relative;
    width: 900px;
    margin: auto; }
    @media screen and (max-width: 1024px) {
      .storyBox .itemBox {
        width: 75%; } }
    @media screen and (max-width: 767px) {
      .storyBox .itemBox {
        width: 85%; } }
    @media screen and (max-width: 374px) {
      .storyBox .itemBox {
        width: 90%; } }
  .storyBox .item {
    position: relative;
    cursor: pointer;
    border: 2px dashed #cd2c5d;
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;
    width: 100%;
    height: 510px; }
    @media screen and (max-width: 1024px) {
      .storyBox .item {
        height: 450px; } }
    @media screen and (max-width: 767px) {
      .storyBox .item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 10px;
        padding-bottom: 15px;
        height: auto; } }
    @media screen and (min-width: 1025px) {
      .storyBox .item:hover .photo {
        opacity: 0.7; } }
  .storyBox .photo {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    background: url(../img/pic.jpg) no-repeat center/cover; }
    @media screen and (max-width: 767px) {
      .storyBox .photo {
        height: 195px; } }
    @media screen and (max-width: 413px) {
      .storyBox .photo {
        height: 175px; } }
    @media screen and (max-width: 374px) {
      .storyBox .photo {
        height: 160px; } }
  .storyBox .cover {
    width: 100%; }
    @media screen and (min-width: 768px) {
      .storyBox .cover {
        width: calc(100% - 20px);
        height: 161px;
        margin: 9px;
        bottom: 0;
        left: 0;
        background: transparent;
        background: -webkit-gradient(left top, left bottom, color-stop(0%, transparent), color-stop(69%, black), color-stop(100%, black));
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(69%, black), to(black));
        background: linear-gradient(to bottom, transparent 0%, black 69%, black 100%); } }
    @media screen and (max-width: 1024px) {
      .storyBox .cover {
        height: 145px; } }
    @media screen and (max-width: 767px) {
      .storyBox .cover {
        position: inherit;
        margin-top: 15px;
        height: inherit; } }
  .storyBox .decoBox-l {
    width: 350px;
    left: -160px;
    bottom: -71px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 1; }
    @media screen and (max-width: 1024px) {
      .storyBox .decoBox-l {
        width: 290px;
        left: -128px;
        bottom: -65px; } }
    @media screen and (max-width: 767px) {
      .storyBox .decoBox-l {
        display: none; } }
  .storyBox .fish {
    bottom: 74px;
    left: -37px; }
    @media screen and (max-width: 1280px) {
      .storyBox .fish {
        display: none; } }
  .storyBox .txt {
    right: -200px;
    bottom: 0; }
    @media screen and (max-width: 1024px) {
      .storyBox .txt {
        width: 200px;
        right: -150px; } }
  .storyBox .decoBox-r {
    width: 240px;
    right: -160px;
    top: 0;
    pointer-events: none;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    @media screen and (max-width: 1440px) {
      .storyBox .decoBox-r {
        width: 200px;
        right: -126px;
        top: 14px; } }
    @media screen and (max-width: 1024px) {
      .storyBox .decoBox-r {
        width: 175px;
        right: -108px; } }
    @media screen and (max-width: 767px) {
      .storyBox .decoBox-r {
        display: none; } }
  .storyBox .itemInfo {
    color: white;
    text-align: left;
    padding: 0 80px; }
    @media screen and (max-width: 1024px) {
      .storyBox .itemInfo {
        padding: 0 70px; } }
    @media screen and (max-width: 767px) {
      .storyBox .itemInfo {
        padding: 0;
        color: black; } }
    .storyBox .itemInfo .date {
      background: #cd2c5d;
      font-size: 22.4px;
      font-size: 1.4rem;
      padding: 5px 10px;
      border-radius: 30px;
      letter-spacing: 1px;
      font-weight: bold; }
      @media screen and (max-width: 767px) {
        .storyBox .itemInfo .date {
          color: white;
          font-weight: normal; } }
    .storyBox .itemInfo .tt {
      font-size: 38.4px;
      font-size: 2.4rem;
      font-weight: bold;
      margin-top: 10px;
      line-height: 1.3; }
      @media screen and (max-width: 1024px) {
        .storyBox .itemInfo .tt {
          font-size: 2rem; } }
      @media screen and (max-width: 960px) {
        .storyBox .itemInfo .tt {
          font-size: 1.8rem; } }
      @media screen and (max-width: 767px) {
        .storyBox .itemInfo .tt {
          margin-top: 10px; } }
      @media screen and (max-width: 374px) {
        .storyBox .itemInfo .tt {
          font-size: 1.6rem;
          line-height: 1.5;
          margin-bottom: 5px; } }
    .storyBox .itemInfo .sub {
      line-height: 1.4;
      margin-top: 5px; }
      @media screen and (max-width: 767px) {
        .storyBox .itemInfo .sub {
          color: #6d6d6d; } }
      @media screen and (max-width: 374px) {
        .storyBox .itemInfo .sub {
          font-size: 1.4rem; } }
  .storyBox .arrowBox {
    width: 94%;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .storyBox .arrowBox a {
      width: 30px;
      -webkit-transition: all .3s ease;
      transition: all .3s ease; }
      @media screen and (max-width: 374px) {
        .storyBox .arrowBox a {
          width: 25px; } }
      .storyBox .arrowBox a:last-child {
        width: 25px; }
        @media screen and (max-width: 374px) {
          .storyBox .arrowBox a:last-child {
            width: 22px; } }
      @media screen and (min-width: 1025px) {
        .storyBox .arrowBox a:hover {
          -webkit-transform: scale(1.2);
          transform: scale(1.2); } }
    @media screen and (max-width: 767px) {
      .storyBox .arrowBox {
        width: 89%;
        top: 26%; } }
    @media screen and (max-width: 413px) {
      .storyBox .arrowBox {
        top: 25%; } }
    @media screen and (max-width: 374px) {
      .storyBox .arrowBox {
        top: 22%; } }

.histroyBox {
  background: #efe5cf;
  padding-bottom: 160px; }
  @media screen and (max-width: 1024px) {
    .histroyBox {
      padding-bottom: 100px; } }
  @media screen and (max-device-width: 767px) {
    .histroyBox {
      background: #efe4ce;
      padding-bottom: 110px; } }
  .histroyBox:before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 120%;
    height: 140px;
    background: #efe5cf;
    -webkit-transform: skewY(-4deg);
    transform: skewY(-4deg);
    z-index: -1; }
    @media screen and (min-width: 1280px) {
      .histroyBox:before {
        top: -70px; } }
    @media screen and (min-width: 1680px) {
      .histroyBox:before {
        top: -80px; } }
    @media screen and (max-width: 767px) {
      .histroyBox:before {
        height: 70px; } }
  .histroyBox .ttBox {
    padding-top: 50px; }
    @media screen and (max-width: 1024px) {
      .histroyBox .ttBox {
        padding-top: 25px; } }
    @media screen and (max-width: 767px) {
      .histroyBox .ttBox {
        padding-top: 0; } }
  .histroyBox ul {
    width: 1050px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    @media screen and (max-width: 1200px) {
      .histroyBox ul {
        width: 85%; } }
    @media screen and (max-width: 767px) {
      .histroyBox ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; } }
  .histroyBox li {
    width: 320px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative; }
    @media screen and (max-width: 1200px) {
      .histroyBox li {
        width: 280px; } }
    @media screen and (max-width: 990px) {
      .histroyBox li {
        width: 255px; } }
    @media screen and (max-width: 767px) {
      .histroyBox li {
        width: 360px;
        margin-bottom: 20px; } }
    @media screen and (max-width: 413px) {
      .histroyBox li {
        width: 320px; } }
    @media screen and (max-width: 374px) {
      .histroyBox li {
        width: 276px; } }
  .histroyBox a {
    font-size: 28.8px;
    font-size: 1.8rem;
    width: 100%; }
    @media screen and (min-width: 1025px) {
      .histroyBox a:hover .photo {
        -webkit-transform: scale(1.05);
        transform: scale(1.05); }
      .histroyBox a:hover .tt {
        font-weight: 500;
        color: #cd2c5d; } }
  .histroyBox .dateBox {
    background: #cd2c5d;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    font-size: 19.2px;
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    color: white;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0; }
    .histroyBox .dateBox .inner {
      display: block; }
    @media screen and (max-width: 767px) {
      .histroyBox .dateBox {
        top: 15px; } }
  .histroyBox .y {
    display: block; }
  .histroyBox .tt {
    color: black;
    text-align: left;
    margin-top: 10px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    @media screen and (max-width: 1024px) {
      .histroyBox .tt {
        font-size: 1.6rem; } }
  .histroyBox .photoBox {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 225px;
    overflow: hidden;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    @media screen and (max-width: 1200px) {
      .histroyBox .photoBox {
        width: 280px;
        height: 197px; } }
    @media screen and (max-width: 1024px) {
      .histroyBox .photoBox {
        width: 260px;
        height: 185px; } }
    @media screen and (max-width: 990px) {
      .histroyBox .photoBox {
        width: 255px;
        height: 180px; } }
    @media screen and (max-width: 767px) {
      .histroyBox .photoBox {
        width: 360px;
        height: 253px;
        border: 3px solid #efe4ce; } }
    @media screen and (max-width: 413px) {
      .histroyBox .photoBox {
        width: 320px;
        height: 226px; } }
    @media screen and (max-width: 374px) {
      .histroyBox .photoBox {
        width: 276px;
        height: 196px; } }
  .histroyBox .photo {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    background: url(../img/pic4.jpg) no-repeat center;
    background-size: cover; }
  .histroyBox .decoBox {
    width: 100%;
    position: relative;
    margin-top: 30px; }
  .histroyBox .deco-r {
    right: 45px;
    bottom: -205px; }
    @media screen and (max-width: 1024px) {
      .histroyBox .deco-r {
        bottom: -150px; } }
    @media screen and (max-width: 767px) {
      .histroyBox .deco-r {
        bottom: -130px; } }
    @media screen and (max-width: 413px) {
      .histroyBox .deco-r {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        right: 30px; } }
  .histroyBox .deco-l {
    left: 0;
    bottom: -33px; }
    @media screen and (max-width: 1024px) {
      .histroyBox .deco-l {
        bottom: -6px; } }
    @media screen and (max-width: 767px) {
      .histroyBox .deco-l {
        display: none; } }
  .histroyBox .inner > div {
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
  .histroyBox .grass1 {
    width: 250px;
    left: -120px; }
  .histroyBox .grass2 {
    width: 310px;
    left: 40px;
    top: 35px; }
    @media screen and (max-width: 1440px) {
      .histroyBox .grass2 {
        width: 275px; } }
  .histroyBox .grass3 {
    width: 355px;
    z-index: 2;
    bottom: 8%;
    right: 85%; }
    @media screen and (max-width: 1440px) {
      .histroyBox .grass3 {
        width: 275px; } }
  .histroyBox .grass4 {
    width: 293px;
    right: -37%;
    bottom: 21%;
    z-index: -1; }
    @media screen and (max-width: 1440px) {
      .histroyBox .grass4 {
        width: 265px;
        bottom: 29%; } }
  .histroyBox .child {
    width: 280px; }
    @media screen and (max-width: 1440px) {
      .histroyBox .child {
        width: 235px; } }
    @media screen and (max-width: 1024px) {
      .histroyBox .child {
        width: 190px; } }
  .histroyBox .bg {
    left: 0;
    top: 30px;
    opacity: 0.4; }

.frame1 {
  background: url(../asset/svg/frame1.svg) no-repeat; }

.frame2 {
  background: url(../asset/svg/frame2.svg) no-repeat; }

.frame3 {
  background: url(../asset/svg/frame3.svg) no-repeat; }

.frameCover-top,
.frameCover-btm,
.frameCover-left,
.frameCover-right {
  background: #efe5cf;
  display: block;
  z-index: 2; }

.frameCover-top,
.frameCover-btm {
  width: 100%;
  height: 5px; }

.frameCover-top {
  top: -4px;
  left: 0; }

.frameCover-btm {
  top: 225px;
  left: 0; }
  @media screen and (max-width: 1200px) {
    .frameCover-btm {
      top: 197px; } }
  @media screen and (max-width: 1024px) {
    .frameCover-btm {
      top: 185px; } }
  @media screen and (max-width: 990px) {
    .frameCover-btm {
      top: 180px; } }
  @media screen and (max-width: 767px) {
    .frameCover-btm {
      top: 253px; } }
  @media screen and (max-width: 413px) {
    .frameCover-btm {
      top: 226px; } }
  @media screen and (max-width: 374px) {
    .frameCover-btm {
      top: 196px; } }

.frameCover-left,
.frameCover-right {
  height: 231px;
  width: 2px; }
  @media screen and (max-width: 1200px) {
    .frameCover-left,
    .frameCover-right {
      height: 206px; } }
  @media screen and (max-width: 1024px) {
    .frameCover-left,
    .frameCover-right {
      height: 191px; } }
  @media screen and (max-width: 990px) {
    .frameCover-left,
    .frameCover-right {
      height: 186px; } }
  @media screen and (max-width: 767px) {
    .frameCover-left,
    .frameCover-right {
      height: 259px; } }
  @media screen and (max-width: 413px) {
    .frameCover-left,
    .frameCover-right {
      height: 232px; } }
  @media screen and (max-width: 374px) {
    .frameCover-left,
    .frameCover-right {
      height: 202px; } }

.frameCover-left {
  top: -4px;
  left: -1px; }

.frameCover-right {
  top: -4px;
  right: -1px; }

.frame {
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; }

.eventBox {
  z-index: -1;
  padding-bottom: 200px; }
  @media screen and (max-width: 767px) {
    .eventBox {
      padding-top: 10px;
      padding-bottom: 50px; } }
  .eventBox .slideBox {
    width: 70%;
    max-width: 850px;
    margin: auto; }
    @media screen and (max-width: 767px) {
      .eventBox .slideBox {
        width: 85%; } }
  .eventBox .item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    @media screen and (max-width: 900px) {
      .eventBox .item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; } }
    @media screen and (min-width: 1025px) {
      .eventBox .item:hover {
        -webkit-transform: scale(1.01);
        transform: scale(1.01); } }
  .eventBox .content {
    margin-bottom: 50px; }
    @media screen and (max-width: 767px) {
      .eventBox .content {
        margin-bottom: 35px; } }
  .eventBox .photoBox {
    position: relative;
    margin-right: 30px;
    width: 360px;
    height: 250px; }
    @media screen and (max-width: 900px) {
      .eventBox .photoBox {
        width: 100%;
        margin-right: 0; } }
    .eventBox .photoBox span {
      border-radius: 50px;
      border: 1px solid #cd2c5d;
      display: block;
      position: absolute;
      z-index: -1; }
      .eventBox .photoBox span:nth-child(2) {
        top: -3px;
        left: -6px; }
      .eventBox .photoBox span:nth-child(3) {
        top: 5px;
        left: -3px; }
      .eventBox .photoBox span:nth-child(4) {
        top: 4px;
        left: -1px; }
  .eventBox .photo {
    width: 360px;
    height: 250px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 50px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    background: url(../img/pic.jpg) no-repeat center;
    background-size: cover; }
    @media screen and (max-width: 900px) {
      .eventBox .photo {
        width: 100%; } }
    .eventBox .photo img {
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease; }
  .eventBox .info {
    text-align: left; }
    @media screen and (max-width: 900px) {
      .eventBox .info {
        margin-top: 20px; } }
    @media screen and (max-width: 767px) {
      .eventBox .info {
        width: 100%; } }
  .eventBox .date {
    font-size: 25.6px;
    font-size: 1.6rem;
    color: #6d6d6d; }
  .eventBox .tt {
    font-size: 36.8px;
    font-size: 2.3rem;
    font-weight: bold; }
  .eventBox .txt {
    font-size: 25.6px;
    font-size: 1.6rem;
    color: #585858; }
  .eventBox .decoBox {
    position: relative;
    z-index: -1; }
    @media screen and (max-width: 900px) {
      .eventBox .decoBox {
        display: none; } }
  .eventBox .deco-l {
    width: 615px;
    top: -260px;
    left: -75px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    @media screen and (min-width: 1680px) {
      .eventBox .deco-l {
        width: 690px;
        top: -310px;
        left: -75px; } }
    @media screen and (max-width: 1580px) {
      .eventBox .deco-l {
        width: 580px; } }
    @media screen and (max-width: 1440px) {
      .eventBox .deco-l {
        width: 500px;
        top: -160px; } }
  .eventBox .deco-r {
    width: 496px;
    top: -206px;
    right: -40px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease; }
    @media screen and (max-width: 1680px) {
      .eventBox .deco-r {
        top: -160px; } }
    @media screen and (max-width: 1680px) {
      .eventBox .deco-r {
        width: 430px;
        top: -130px; } }
    @media screen and (max-width: 1024px) {
      .eventBox .deco-r {
        width: 400px;
        top: -93px; } }
  .eventBox:after {
    content: url(../img/index-plan-bg.png);
    width: 100%;
    height: 290px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -2; }
    @media screen and (max-width: 1360px) {
      .eventBox:after {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%); } }
    @media screen and (max-width: 767px) {
      .eventBox:after {
        display: none; } }
  .eventBox .bg {
    position: absolute;
    z-index: -2;
    opacity: 0.3; }
  .eventBox .bg-r {
    bottom: 70px;
    right: -100px; }
    @media screen and (max-width: 767px) {
      .eventBox .bg-r {
        bottom: 0; } }
  .eventBox .bg-l {
    bottom: 70px;
    left: -10px; }
    @media screen and (max-width: 767px) {
      .eventBox .bg-l {
        display: none; } }

.play-icon {
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2; }
  @media screen and (max-width: 767px) {
    .play-icon {
      width: 60px; } }
  @media screen and (max-width: 374px) {
    .play-icon {
      width: 55px; } }

.dot li {
  display: inline-block;
  margin: 0 5px; }

.dot a {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 1px solid #cd2c5d;
  cursor: pointer; }
  .dot a.active {
    background: #cd2c5d; }

.planBox {
  z-index: -2; }
  .planBox .ttBox {
    margin-bottom: 40px; }
    @media screen and (min-width: 768px) {
      .planBox .ttBox {
        padding-top: 0; } }
    @media screen and (max-width: 767px) {
      .planBox .ttBox {
        margin-bottom: 20px; } }
  .planBox p span {
    display: block; }
    @media screen and (max-width: 767px) {
      .planBox p span {
        display: inline; } }
  .planBox .sub {
    font-weight: bold;
    font-size: 38.4px;
    font-size: 2.4rem;
    margin-bottom: 10px; }
  .planBox .txt {
    font-size: 25.6px;
    font-size: 1.6rem; }
    @media screen and (max-width: 767px) {
      .planBox .txt {
        width: 85%;
        margin: auto;
        text-align: left; } }

@media screen and (max-width: 767px) {
  footer .info {
    margin-bottom: 45px; } }

@media screen and (max-width: 767px) {
  footer .deco-l {
    bottom: 120px; } }

@media screen and (max-width: 767px) {
  footer .deco-r {
    bottom: 205px; } }

footer .bg2 {
  height: 80%; }
  @media screen and (max-width: 767px) {
    footer .bg2 {
      height: 50%; } }

.btn-donate {
  display: block;
  width: 100%;
  height: 50px;
  background: #cd2c5d;
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  line-height: 50px;
  font-weight: bold;
  font-size: 28.8px;
  font-size: 1.8rem; }
  .btn-donate span {
    display: inline-block;
    vertical-align: middle; }
  .btn-donate .icon-donate {
    margin-right: 10px; }
  @media screen and (min-width: 768px) {
    .btn-donate {
      display: none; } }

/*# sourceMappingURL=index.css.map */