@charset "utf-8";
#Wrap { background: url(../images/bg1.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; }
#Center { position: relative; font-family:"Chiron GoRound TC", "微軟正黑體", sans-serif; font-weight: 700; }
#Center .guide_title { position: absolute; top: 0; left: 0; }

/*----------------------------------------------------------------------*/
.textBox { position: relative; max-width: 420px; padding: 1em; border-radius: 10px; background: #d19d59 url(../images/textBox_bg.jpg); }
.textBox::after { content: ''; position: absolute; width: 20px; height: 20px; transform: rotate(45deg); background: #d19d59 url(../images/textBox_bg.jpg); }
.textBox p { line-height: 1.75em; position: relative; z-index: 0; }
.textBox p span { color: #ee4242; }
.textBox p::before { content: attr(data-storke); position: absolute; z-index: -1; -webkit-text-stroke: 4px #fff; text-stroke: 4px #fff; }

.IndexBlock .inner { position: relative; }
.titleBox > a { display: flex; justify-content: center; max-width: 308px; }
.titleBox > a:hover,
.titleBox > a:focus { animation: pulse .8s infinite alternate ease-in-out;	-webkit-animation: pulse .8s infinite alternate ease-in-out; }
.titleBox img { max-width: 100%; max-height: 100%; }
.titleBox .title { position: absolute; z-index: 5; text-align: center; bottom: 20px; font-size: 1.5em; }
.titleBox .title span { color: #ee4242; }
.titleBox .title::before { content: attr(data-storke); position: absolute; z-index: -1; -webkit-text-stroke: 4px #fff; text-stroke: 4px #fff; }

.IndexBlock .contBox { display: flex; align-items: flex-start; }
.line { max-width: 1003px; margin: 0 auto; }
.line img { max-width: 100%; }

/*----------------------------------------------------------------------*/
.box1 { padding-top: 10vh; }
.box1 .inner { display: flex; flex-direction: column; align-items: center; }
.box1 .textBox { margin-bottom: 30px; animation: Fly 1s infinite alternate ease-in-out;	-webkit-animation: Fly 1s infinite alternate ease-in-out; }
.box1 .textBox::after { bottom: -10px; left: 64.5%; }

@keyframes Fly {
    100% { transform: translateY(-20px); }
}
 @-webkit-keyframes Fly {
    100% { transform: translateY(-20px); }
}

/*----------------------------------------------------------------------*/
.box2-1 .textBox { margin-right: 20px; margin-top: 20px; }
.box2-1 .textBox::after { right: -10px; top: 15%; }

.box2-2 .textBox { margin-top: 20px; }
.box2-2 .textBox::after { left: -10px; top: 15%; }

.box2-3 .textBox { margin-right: 40px; margin-top: 20px; }
.box2-3 .textBox::after { right: -10px; top: 15%; }


@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

/*----------------------------------------------------------------------*/
.box2-2 .contBox { flex-direction: row-reverse; }

@media screen and (max-width: 1023px) {
    .titleBox { position: relative; display: flex; justify-content: center; }
    .line { display: none; }
    .group { padding-top: 10vh; position: relative; }
    .group::before { content: ''; height: 10vh; width: 7px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: url(../images/line04.png) center; }
    .titleBox > a { max-width: 250px; }
}
@media screen and (min-width: 1024px) {
    .titleBox { position: absolute; }
    .box2-1 .titleBox { left: 0; top: 100px; }
    .box2-1 .contBox { position: absolute; right: 0; top: 240px; }
    .box2-2 .titleBox { right: 0; top: 0; }
    .box2-2 .contBox { position: absolute; left: -100px; top: 25px; }
    .box2-3 .titleBox { left: 0; top: 50px; }
    .box2-3 .contBox { position: absolute; right: 0; top: 80px; }
    .box2-4 .titleBox { position: relative; max-width: 308px; margin: -120px auto 100px; }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .group .textBox { max-width: 50%; }
    .box2-2 .textBox { margin-left: 20px; }
    .box2-3 .textBox { margin-right: 30px; }
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .IndexBlock .inner { max-width: 968px; padding-left: 124px; padding-right: 124px; }
    .line { max-width: 720px; }
    .titleBox > a { max-width: 250px; }
    .imgBox { max-width: 300px; }
    .textBox { max-width: 341px; }

    .box2-1 .contBox { top: 180px; }
    .box2-2 .contBox { left: 0; top: 45px; }
    .box2-2 .textBox { margin-left: 20px; }
    .box2-3 .contBox { top: 35px; }
    .box2-4 .titleBox { margin-bottom: 60px; max-width: 250px; }
}

@media screen and (min-width: 1440px) {
    .IndexBlock .inner { max-width: 1310px; padding-left: 153px; padding-right: 153px; }
    .box1 { padding-top: 20vh; }
    .titleBox .title { font-size: 2em; }
    .textBox { font-size: 1.25em; }
}
@media screen and (max-width: 639px) {
    .IndexBlock .contBox { flex-direction: column; align-items: center; }
    .box1 { padding-top: 30px; }
    .box2-1 .textBox { margin-right: 0; margin-bottom: 30px; }
    .box2-1 .textBox::after { top: auto; bottom: -10px; left: calc(50% - 10px); }
    .box2-1 .imgBox .img { height: 30vh; margin-bottom: 20px; }

    .box2-2 .textBox { margin-bottom: 30px; }
    .box2-2 .textBox::after { top: auto; bottom: -10px; left: calc(50% - 10px); }
    .box2-2 .imgBox .img { height: 30vh; margin-bottom: 20px; }

    .box2-3 .textBox { margin-bottom: 30px; margin-right: 0; }
    .box2-3 .textBox::after { top: auto; bottom: -10px; left: calc(50% - 10px); }
    .box2-3 .imgBox .img { height: 30vh; margin-bottom: 20px; }
}