@charset "utf-8";
/* CSS Document */
html {  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-optical-sizing: auto; }
  html.scroll-lock {
    overflow: hidden;}
*{margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
body{font-family:  Arial,'Noto Sans TC', Verdana, 'Microsoft JhengHei','微軟正黑體', sans-serif;font-size: 100%; line-height: 1.6rem;letter-spacing: .1rem;background: url("images/mainbg.png")}
a {color: #FB8219; text-decoration: none;}
img {border:none; padding:0; outline:none; max-width: 100%; height: auto}
:focus { outline: 0; }
#goTop img {max-width: 50px;}
#main_wrap {position: relative; display: block;}
#kv {background-color: #ffffff;
    height: 780px;
    background-image: url(../images/kvbg.jpg);
    background-size: 1920px 780px;
    background-position: center top;
    background-repeat: no-repeat;}
.tree {position: absolute; top: 85px; right: calc(50% + -245px); max-width: 400px;}
.kvtitle {position: absolute; top: 85px; right: calc(50% + 30px)}
.kvtitle2 {position: absolute; top: 395px; right: calc(50% + 125px); max-width: 550px;}
.treasure3 {position: absolute; top: 550px; right: calc(50% + 190px)}
.board {position: absolute; top: 65px; left: calc(50% + 121px)}
.boardtxt {position: absolute;width: 535px;top: 185px;left: calc(50% + 135px);height: 160px;z-index: 1;padding: 0 45px;font-size: 1.105rem;color: #dd501d;}
.treasure1 {position: absolute; top: 470px; left: calc(50% + 390px)}
.baby {position: absolute; top: 430px; left: calc(50% + 170px)}
.babytxt {position: absolute; top: 410px; left: calc(50%)}
.tea {position: absolute; top: 625px; left: calc(50% + -80px)}
.cake {position: absolute; top: 650px; left: calc(50% + 15px)}
.treasure2 {position: absolute; top: 639px; left: calc(50% + 400px)}
.hearts {position: absolute; top: 370px; left: calc(50% + 530px)}

#content {background-color: #faf9f7;
    background-image: url(../images/content_bg.jpg);
    background-size: 1920px 1974px;
    background-position: center top;
    background-repeat: no-repeat;
	padding-bottom: 3%;
}
.content_tit {margin: 0 auto;
  padding-top: 5%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: right;
  max-width: 850px;}
.box_orang {border: 2px solid rgb(222, 80, 29);border-radius: 0 20px 20px 20px;max-width: 830px;padding: 3%;background: conic-gradient(at left bottom, #fff, #fbf0ec, #fbecea);box-shadow:  2px 2px 5px rgba(117, 116, 116, 0.8); margin-bottom: 4%;}
.box_green {border: 2px solid rgb(12, 139, 127);border-radius: 0 20px 20px 20px;max-width: 830px;padding: 3%;background: conic-gradient(at left bottom, #fff, #f6fff4, #cff9c3);box-shadow:  2px 2px 5px rgba(117, 116, 116, 0.8); margin-bottom: 4%;}
.box_txt {padding: 2% .6%;}
.box_txt_sm {font-size: .9rem; font-weight: 500;color: #22a687;}
.btn {background: linear-gradient(to top, #fc7102, #f7b45c);color: white;font-size: 1.5rem; font-weight: 500;border-radius: 50px; box-shadow: 0 4px 6px rgba(0,0,0,0.3);padding: .5rem 2rem; border: 0;float: right;cursor: pointer; }
.btn {transition: all 0.3s ease;}
.btn:hover {background-color: #097E18; transform: translateY(-2px);}
.btn:active {transform: translateY(1px);}
.green {background: linear-gradient(to top, #0a8d81, #5db2a9)}
.prize {display: flex;flex-wrap: wrap;justify-content: space-around;padding: 0 .6% 3%;}
.prize img{max-width: 45%;padding-top: 2%;}

ul, li {/* 段落首行縮排 */text-indent: 1em;list-style: none;font-size: .9rem;}
.note_h1 {padding-left: .8rem;padding-top: 10%;}

.footer {text-align: center;font-size: min(3vw, .8rem);padding: .6rem;letter-spacing: .1rem;line-height: 1.6rem;}
.footer_wrap {position: relative;background-color: #E5E4E3;}
.footer_cont {max-width: 1000px;height: 7vh;margin:0 auto;display: flex;justify-content: center;align-items: center;line-height: 1rem;}
.logo {max-width: 200px;padding-right: 4%;}
.fb {padding-right: 2%;}
.line {padding-right: 2%;}
.yt {max-width: 28px;}
.scale_bt {transform: scale(1,1);}
.scale_bt :hover {transform: scale(0.9,0.9);transition: all 0.2s ease-in-out;}
.scale_bt :active {transform: scale(1.1,1.1);transition: all 0.2s ease-in-out;}


.hearts_move { animation:hearts_move 4s linear 0s infinite none;}/*愛心飄飄*/
@keyframes hearts_move {
			0% {opacity: 0;-webkit-transform: translate(0px, 40px);transform: translate(0px, 40px)}
			50% {opacity: 0.5;-webkit-transform: translate(10px, 10px) ;transform: translate(10px, 10px)}
			100% {opacity: 0;-webkit-transform: translate(20px, -20px);transform: translate(20px, -20px)}}/*愛心飄飄動作*/

.show_baby {/*animation: show_baby 0.2s linear 0s;*/}
@keyframes show_baby{
	0% {opacity: 0;-webkit-transform: translate(0px,-100px);transform: translate(0px, -100px)}
	100% {opacity: 1;-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px)}
}

.shake_baby { animation: shake 1s ease-in-out 1s infinite;}/*胖logo彈彈*/
@keyframes shake {
	0% {opacity: 1;-webkit-transform: scaleX(1);transform: scale(1);}
	50% {opacity: 1;-webkit-transform: scaleX(1.01); transform: scaleX(1.01);}
	100% {opacity: 1;-webkit-transform: scaleX(1); transform: scaleX(1);}
}



@media screen and (max-width: 1279px) {
			.mb {display: none;}
			.pc {display: block;}
			#goTop {display: none;}
			#kv {height: 875px;background-size: cover;}
	#content {padding: 0 5% 2%;font-size: .9rem;height: 100%;}
	.kvtitle{top: -5px;right: calc(50% - 179px);width: 350px}
	.kvtitle2 {top: 785px;width: 95%;right: calc(50% - 179px);width: 350px;}
	.baby {top: 530px;left: calc(50% + -160px);max-width: 200px;}
	.tree {top: 85px;right: calc(50% - 179px);max-width: 355px;}
	.treasure1 {top: 550px;left: calc(50% + -17px);max-width: 130px;}
	.treasure2 {top: 680px;left: calc(50% + 19px);max-width: 150px;}
	.treasure3 {display: none;}
	.cake {display: none;}
	.tea {display: none;}
	.hearts {display: none;}
	.board {top: 113px;left: calc(50% + -179px);}
	.boardtxt {left: calc(50% + -179px);width: 360px;height: 119px;padding: 0 25px;font-size: .9rem;line-height: 1.2rem;}
	li {font-size: .7rem;line-height: 1.3rem;}
		}

@media screen and (min-width: 1280px){
			#goTop {display: block;
					  overflow: hidden;
					  width: 50px;
					  position: fixed;
					  bottom: 70px;
					  right: 10px;
					  z-index: 99999999;
					  cursor: pointer;
					  opacity: 0.5;
					  transition: 0.5s; }
			#goTop:hover{opacity: 1;}	
			.pc {display:none;}
		}