@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Open Sans','Arial','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}

/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Noto Sans TC','Microsoft JhengHei','Apple LiGothic Medium';}

/* $body,html    拿掉height: 100%;
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-family:'Noto Sans TC','Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; font-size:10px; background: #CCE0D3; overflow-x: hidden ; }
body { max-width: 680px; margin: 0 auto; }

/* $共用
--------------------------------------------------------------------------------------*/
/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}
/* button reset、input reset、select reset */
button, input, select{ font-family:'Noto Sans TC','Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; border: none; }
button { cursor: pointer; }
* { box-sizing: border-box; }
img { width: 100%; display: block; line-height: 0; }
p { font-size: 2rem; color: #888; }

header, main, footer { width: 100%; max-width: 720px; margin:0 auto; display: flex; flex-direction: column; align-items: center; }

.pic { width: 100%;  }
.icon-arr {  width: 20px; margin: 10px 0 0 0; animation: jumpdown 1s infinite;}
header { position: relative; z-index: 1; }
header .content { width: 100%; position: absolute; display: flex; flex-direction: column; align-items: center; }
header .logo { width: 45%; margin: 20px 0 40px; }
header .kv-title-1 { width: 60%; margin: 0 0 0 -25%;}
header .kv-title-2 { width: 44%; margin: -3% -40% 0 0; }
header .kv-pic { margin: -18% 0 0 0; animation: jumpup 1s infinite;}

.fixed-nav { width: 100%; height: 90px; position: fixed; top: 0; left: 0; background: linear-gradient(to right, #fff 0%, #fff 10%, transparent 11%,transparent 89%, #fff 91%,#fff 100%), linear-gradient(to bottom, #fff 0%, #fff 42px, #CCE0D3 43px,#CCE0D3 46px, #fff 47px,#fff 100%); z-index: 100; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: bold; color:#fff; box-shadow: 3px 0 6px rgba(0, 0, 0, .25)}
.fixed-nav .nav { width: 28%; height: 70px; border-radius: 15px; background: #CCE0D3; display: flex; justify-content: center; align-items: center; text-align: center; cursor:pointer; margin:0 4px;}
.fixed-nav .nav.active { background: #83C26B; position: relative;}
.fixed-nav .nav.active:after { content: ""; width: 11%; height: 26%; position: absolute; top: 8px; left: 8px; background: url('../images/icon_nav.svg') no-repeat; background-size: contain; }

main { margin: -13% auto 0 auto; position: relative; z-index: 5; }
main section { width: 100%; height: auto; min-height: 600px; border-radius: 150px; padding: 60px 0; display: flex; flex-direction: column; align-items: center;  }
main section.bg-1 { background: url('../images/box-bg-01.svg') center bottom no-repeat,#fff; background-size: contain; }
main section.bg-2 { background: url('../images/box-bg-02.svg') center bottom no-repeat,#fff; background-size: contain; }
main section.bg-3 { background: url('../images/box-bg-03.svg') center bottom no-repeat,#fff; background-size: contain; }
main section h2 { width: 100%; font-size: 2.4rem; color: #6B8694; font-weight: bold; text-align: center; padding: 0 20px; }
main section h2 span { color: #38C0DA; }
main section h2 font { text-decoration: underline; }
main section h2.tit-36 { font-size: 3.6rem; }
main section h2.tit-36 span { color: #F4747D; }
main section .pic_box { width: 100%; padding-top: 76.9%; position: relative; }
main section .pic_box.pic-01 { background: url('../images/pic-01.png') no-repeat; background-size: contain; animation: knock 2s infinite; transform-origin:center bottom; }
main section .pic_box.pic-02 { animation: pic-02 .4s infinite alternate; }
main section .pic_box.pic-03 { animation: pic-03 .3s infinite alternate; }
main section .pic_box.pic-04 { animation: pic-04 .4s infinite alternate; }
main section .pic_box .pic-05 { position: absolute; top: 0; left: 0; animation: breath 3s infinite alternate; transform-origin: center center; }
main section .pic_box.pic-06 { animation: pic-06 .5s infinite alternate; }
main section .pic_box .pic-07 { position: absolute; top: 0; left: 0; animation: jumpdown 3s infinite; transform-origin: center center; }
main section .pic_box.pic-08 { background: url('../images/pic-08.png') no-repeat; background-size: contain; }
main section .pic_box .pic-09 { position: absolute; top: 0; left: 0; animation: shake .3s infinite; }
main section .pic_box.pic-10 { background: url('../images/pic-10.png') no-repeat; background-size: contain; animation: fly 6s linear infinite; }
main section .pic_box.pic-11 { background: url('../images/pic-11-1.png') no-repeat; background-size: contain; }
main section .pic_box.pic-11 .pic-11-2 { width: 19%; position: absolute; animation: pic-11-2 1.5s linear infinite; }
main section .pic_box.pic-12 { background: url('../images/pic-12.png') no-repeat; background-size: contain; }
main section .pic_box.pic-14 { animation: pic-14 1s infinite alternate; }

main section .pic_box .music { width: 45%; position: absolute; top: 8%; right: 6%; z-index: 10; }
main section .pic_box .music p { color:#38C0DA; font-weight: bold; font-size: 1.6em; line-height: 1.2; text-align: center; margin: 0 0 5px 0; }
main section .pic_box .btn-music { width: 100%; padding-top: 28%; background: url('../images/btn-music.svg') no-repeat; background-size: contain; }
main section .pic_box .btn-music.stop { background: url('../images/btn-music_stop.svg') no-repeat; background-size: contain; }
main section .pic_box .heart { width: 24%; position: absolute; top: 8%; left: 6%; z-index: 10; }
main section .pic_box .heart-shake { width: 24%; position: absolute; top: 8%; left: calc(50% - 12.5%); z-index: 10; animation: heart-shake .4s infinite alternate; }

main section .bubble { border-radius: 50%; background: rgba(255, 255, 255, .9); font-size: 1.7rem; font-weight: bold; display: flex; justify-content: center; align-items: center; position: absolute; text-align: center; padding: 0 10px; line-height: 1.1; }
main section .bubble:nth-child(odd) {  width: 16%; height: 20%; border: 2px solid #888888; color: #888888; }
main section .bubble:nth-child(even) { width: 20%; height: 26%; border: 2px solid #E47B81; color: #E47B81; }
main section .bubble.b1 { position: absolute; top: 50%; left: 5%; animation: breath .3s linear infinite alternate; }
main section .bubble.b2 { position: absolute; top: 20%; left: 15%; animation: breath .3s 1s linear infinite alternate; }
main section .bubble.b3 { position: absolute; top: 24%; right: 20%; animation: breath .3s .5s linear infinite alternate; }
main section .bubble.b4 { position: absolute; top: 48%; right: 5%; animation: breath .3s 1.5s linear infinite alternate; }

main section .btn-bubble { width: 25%; height: 32%; border-radius: 50%; background: rgba(255, 255, 255, .9); font-size: 1.6rem; font-weight: bold; display: flex; justify-content: center; align-items: center; position: absolute; text-align: center; padding: 0 10px; line-height: 1.1; }
main section .btn-bubble:nth-child(odd) { border: 2px solid #83C26B; color: #83C26B; }
main section .btn-bubble:nth-child(even) { border: 2px solid #A2DCE7; color:#38C0DA; }
main section .btn-bubble .text2 { display: none; }
main section .btn-bubble.bub1 { position: absolute; bottom: 5%; left: 5%; animation: fly2 6s linear infinite; }
main section .btn-bubble:focus .text1 {display: none; }
main section .btn-bubble:focus .text2 {display: block; }
main section .btn-bubble.bub2 { position: absolute; top: 30%; left: 3%; animation: fly2 6s 1s linear infinite; }
main section .btn-bubble.bub3 { position: absolute; top: 5%; left: 24%; animation: fly2 6s 1.5s linear infinite; }
main section .btn-bubble.bub4 { position: absolute; top: 5%; right: 24%; animation: fly2 6s .5s linear infinite; }
main section .btn-bubble.bub5 { position: absolute; top: 30%; right: 3%; animation: fly2 6s 1s linear infinite; }
main section .btn-bubble.bub6 { position: absolute; bottom: 5%; right: 5%; animation: fly2 6s 2s linear infinite; }
main section .popup { width: 90%; position: relative; display: flex; justify-content: center; align-items: center; margin: 10px auto 0 auto; }
main section .popup.boom { animation: breath .3s linear infinite alternate; }
main section .popup p { width: 100%; position: absolute; text-align: center; padding: 0 20px 20px 20px; }

main section.dialogue { background:linear-gradient(to bottom, #CCE0D3, #ffffff); border-radius: 0; }
main section.dialogue .style-1, main section.dialogue .style-2 { width: 100%; display: flex; justify-content: flex-end; padding: 0 20px; }
main section.dialogue .style-1 .text_box { border: 2px solid #A2DCE7; color: #6B8694; margin: 0 15px 20px 0; background: #ffffff; }
main section.dialogue .style-1 .text_box:after { content: ""; width: 12px; height: 12px; display: flex; background: url('../images/pic-13-2.svg') no-repeat; position: absolute; right: -10px; top: 5px; }
main section.dialogue .style-1 .text_box span { color: #38C0DA; }
main section.dialogue .style-2 { flex-direction: row-reverse; }
main section.dialogue .style-2 .text_box { border: 2px solid #AAD391; color: #83C26B; margin: 0 0 20px 15px; background: #ffffff; }
main section.dialogue .style-2 .text_box:after { content: ""; width: 12px; height: 12px; display: flex; background: url('../images/pic-13-4.svg') no-repeat; position: absolute; left: -10px; top: 5px; }
main section.dialogue .pic { width: 16%;  }
main section.dialogue .pic object { width: 100%;  }
main section.dialogue .text_box { width: 65%; border-radius: 10px; padding: 10px; position: relative; font-size: 1.6rem; font-weight: bold; display: flex; align-items: center; }

main section.ending { background:#ffffff; border-radius: 0; }
main section.ending .btn_box { width: 94%; display: flex; justify-content: center; align-items: center; margin: 10px 0; }
main section.ending .btn_box a { width: calc(20% - 13px); font-size: 1.6rem; background: #83C26B; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .2); display: flex; justify-content: center; align-items: center; padding: 10px 0; text-align: center; font-weight: bold; line-height: 1.1; }
main section.ending .btn_box a+a { margin: 0  0 0 10px; }
main section.ending .btn_box a:nth-child(3) { background: #38C0DA;}

a.btn-top { margin-top: 10px; }


footer { width: 100%; background: #E5EAEB; padding: 40px 0;}
footer ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; font-size: 1.6rem; color: #3085AD; margin: 0 auto 20px auto; }
footer ul li { width: calc(50% - 50px); display: flex; justify-content: center; }
footer ul li a { width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; text-decoration: underline; }
footer ul li img { width: 1.2em; height: 1.2em; margin-right: 6px; }
footer p { color: #6B8694; font-size: 1.6rem; }


@keyframes breath {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}
@keyframes shake {
  0%   { transform: translateX(0px); }
  25%   { transform: translateX(3px); }
  50%   { transform: translateX(0px); }
  75%   { transform: translateX(-3px); }
  100% { transform: translateX(0px); }
}
@keyframes heart-shake {
  0%   { background: url('../images/heart-1.svg') no-repeat; background-size: contain; transform: rotate(0deg) scale(1); }
  25%   { background: url('../images/heart-2.svg') no-repeat; background-size: contain; transform: rotate(10deg) scale(1.1); }
  50%   { background: url('../images/heart-3.svg') no-repeat; background-size: contain; transform: rotate(0deg) scale(1); }
  75%   { background: url('../images/heart-4.svg') no-repeat; background-size: contain; transform: rotate(-10deg) scale(1.1); }
  100% { background: url('../images/heart-5.svg') no-repeat; background-size: contain; transform: rotate(0deg) scale(1); }
}
@keyframes fly2 {
  0%   { transform: translate(0px, 0px); }
  20%   { transform: translate(5px, 10px); }
  40%   { transform: translate(0px, 5px); }
  60%   { transform: translate(5px, -5px); }
  80%   { transform: translate(- 5px, 0px); }
  100% { transform: translate(0px, 0px); }
}
@keyframes fly {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  20%   { transform: translate(5px, 10px) rotate(4deg); }
  40%   { transform: translate(0px, 5px) rotate(0deg); }
  60%   { transform: translate(5px, -5px) rotate(-3deg); }
  80%   { transform: translate(- 5px, 0px) rotate(2deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes knock {
  0%   { transform: rotate(0deg); }
  80%   { transform: rotate(0deg); }
  85%   { transform: rotate(-5deg); }
  90%   { transform: rotate(0deg); }
  95%   { transform: rotate(-5deg); }
  100% { transform: translateY(0px); }
}
@keyframes jumpup {
  0%   { transform: translateY(0px); }
  60%   { transform: translateY(-6px); }
  70%   { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}
@keyframes jumpdown {
  0%   { transform: translateY(0px); }
  60%   { transform: translateY(6px); }
  70%   { transform: translateY(5px); }
  100% { transform: translateY(0px); }
}
@keyframes pic-02 {
  0%   { background: url('../images/pic-02-1.png') no-repeat; background-size: contain;}
  40%   { background: url('../images/pic-02-1.png') no-repeat; background-size: contain;}
  60%   { background: url('../images/pic-02-2.png') no-repeat; background-size: contain;}
  100% { background: url('../images/pic-02-2.png') no-repeat; background-size: contain;}
}
@keyframes pic-03 {
  0%   { background: url('../images/pic-03-1.png') no-repeat; background-size: contain;}
  40%   { background: url('../images/pic-03-1.png') no-repeat; background-size: contain;}
  60%   { background: url('../images/pic-03-2.png') no-repeat; background-size: contain;}
  100% { background: url('../images/pic-03-2.png') no-repeat; background-size: contain;}
}
@keyframes pic-04 {
  0%   { background: url('../images/pic-04-1.png') no-repeat; background-size: contain;}
  30%   { background: url('../images/pic-04-1.png') no-repeat; background-size: contain;}
  40%   { background: url('../images/pic-04-2.png') no-repeat; background-size: contain;}
  70%   { background: url('../images/pic-04-2.png') no-repeat; background-size: contain;}
  80%   { background: url('../images/pic-04-3.png') no-repeat; background-size: contain;}
  100% { background: url('../images/pic-04-3.png') no-repeat; background-size: contain;}
}
@keyframes pic-06 {
  0%   { background: url('../images/pic-06-1.png') no-repeat; background-size: contain;}
  40%   { background: url('../images/pic-06-1.png') no-repeat; background-size: contain;}
  60%   { background: url('../images/pic-06-2.png') no-repeat; background-size: contain;}
  100% { background: url('../images/pic-06-2.png') no-repeat; background-size: contain;}
}
@keyframes pic-11-2 {
  0%   { top: 18%; right: 26%; transform: scale(1); opacity: 0; }
  30%   { top: 20%; right: 28%; transform: scale(1); opacity: 1; }
  70% { top: 25%; right: 32%; transform: scale(1.1); opacity: 1; }
  100% { top: 25%; right: 32%; transform: scale(1.1); opacity: 0; }
}
@keyframes pic-14 {
  0%   { background: url('../images/pic-14-1.png') no-repeat; background-size: contain;}
  100% { background: url('../images/pic-14-2.png') no-repeat; background-size: contain;}
}


/* ------------------ 
$pc
------------------ */
@media screen and (min-width: 1200px){

    body { max-width: 420px; }

}


/* ----------------
$Pad PRO
---------------- */
@media screen and (min-width:1024px) and (max-width:1199.98px){


}


/* ----------------
$Pad
---------------- */
@media screen and (min-width:768px) and (max-width:1023.98px){


}


/* ----------------
$Mobile
---------------- */
@media screen and (max-width:767.98px){ 

    html,body{ width: 100%; -webkit-text-size-adjust:none; }

}


/* ----------------
$Mobile small
---------------- */
@media screen and (max-width:320px){ 


}


/* ----------------
$橫的手機版型 
---------------- */
@media screen and (orientation:landscape){ 


}