@import url('../fonts/icomoon/style.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* reset */
/* $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}




/* 手機優先 ---------------------------------------------------------------------------------------------------------*/
:before,:after{ font-family:'icomoon',sans-serif; }
.master{ position:relative; width:100%; height:100dvh; overscroll-behavior:contain; overflow:clip;}
.master .wrap_box{ position:sticky; top:0; left:0; width:100%; height:calc(100% - 60px); }
header{ position:sticky; top:0; left:0; width:100%; height:60px; z-index:2; margin:0 auto;} 
header .header_block{ background:#f6f6f6; background:transparent; width:99%; height:60px; display:flex; align-items:center; justify-content:end; padding:4px 10px 0 0; box-sizing: border-box; }
header .logo{ width:auto; /*height:40px;*/ height:48px;}
header .header_deco{ width:100%; height:auto;}
header .sound_box{ top:20px; right:12px; z-index:90; width:70px; height:37px;  }
.sound_toggle{ overflow:clip; box-sizing: border-box;  }
.sound_toggle .btn{ font-weight:bold; font-size:clamp(1.8rem, 5.1vw, 2.2rem); cursor:pointer; transition:all .4s ease;}
.sound_toggle .btn.round{ border-radius:3em; border:solid 3px #2121AA; color:#fff; text-shadow:0 1px #25458D; padding:.5em 1.2em; line-height:1; letter-spacing:.025em; }
.sound_toggle .btn.bgm{ background:#D5D5D5; border:solid 2px #fff; padding:0; width:60px; height:30px; box-sizing:border-box; transition:all .2s .3s ease; }
.sound_toggle .btn.bgm span{ position:absolute; left:50%; width:29px; height:29px; background:#fff; box-shadow:0 0 4px 1px #00000026; border-radius:50%; justify-content:center; display:flex; align-items:center; transition:all .6s ease;} 
.sound_toggle .btn.bgm span:before{ content:'\e911'; color:#c1c1c1; font-size:1.6rem; text-shadow:none; }
.sound_toggle .btn.bgm.active{ background:#FF6601; }
.sound_toggle .btn.bgm.active span{ left:0; }
.sound_toggle .btn.bgm.active span:before{ content:'\e910'; }
h2{ font-weight:600; font-size:7.5vw; letter-spacing:0.025em; line-height:1.5;} 
h4{ font-weight:600; font-size:6.5vw; letter-spacing:0.025em; line-height:1.5;} 
h5{ font-weight:400; font-size:4.2vw; letter-spacing:0.025em; line-height:1.5;} 
h6{ font-weight:400; font-size:3.8vw; letter-spacing:0.025em; line-height:1.5;} 
.wrap .btn ,.wrap button,.wrap input[type="button"],.wrap input[type="submit"]{ width:auto; font-weight:500; font-size:6.5vw;  cursor:pointer; transition:all .4s ease-out; }
.wrap .btn.round ,.wrap button.round,.wrap input.round{ border-radius:3em; border:solid 3px #fff; color:#fff; padding:.5em 1.2em; line-height:1; letter-spacing:.025em; }
.wrap .btn.orange ,.wrap button.orange,.wrap input.orange{ background:#F08300; color:#fff; }
.wrap .btn.white ,.wrap button.white{ background:#fff; color:#F08300; border-color:#F08300; }
.wrap .btn:hover ,.wrap button:hover{ transform:scale(1.1); }
.wrap button:disabled,.wrap input:disabled{ background:#DBDBDB; color:#A3A3A3; pointer-events:none; }
.wrap .btn_group{ width:100%; display:flex; margin:10px auto 30px; justify-content:center; gap:20px; }
.wrap .options_list{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; width:calc(100% - 32px); margin:24px auto;} 
.wrap .options_list li{ width:calc(99% / 3 - 24px); border:solid 2px #fff; border-radius:8px; background:#fff; overflow:clip;}
.wrap .options_list li a span{ padding:.2em 0 .4em; } 
.wrap .options_list li a.btn{ display:flex; flex-direction:column; align-items:center; color:#F08300; padding:0; overflow:clip; font-size:clamp(1.8em, 4vw, 1.8em);}
.wrap .options_list li a:focus{ background:#F08300; color:#fff; border-color:#F08300; }
.wrap .hr_or{ display:flex; gap:12px; align-items:center; font-size:4.6vw; line-height:1; width:100%; text-align:center;}
.wrap .hr_or:before,.wrap .hr_or:after{ content:''; border-bottom:solid 1px #ffffff4d; flex:2 2 auto;}
.wrap input{ font-size:4.2vw; padding:.4em 1em; border-radius:3em; color:#000; width:100%; transition:all .3s ease-in; }
.wrap input:placeholder{ color:#9F9F9F; }
.wrap input:focus{ background:#ffffff33; backdrop-filter:brightness(110%); box-shadow:0px 3px 6px #00000029; color:#fff;}
.wrap input:focus::placeholder{ color:#ffffffbd; }
.chooseSet .options_list img ,.finsh .images_block img ,.message .images_block img{ aspect-ratio:1/1; width:100%; height:auto; }
.wrap .page_number{ gap:1em; }
.wrap .page_number button{ border:solid 2px #fff; border-radius:8px; font-weight:400; font-size:4.2vw; aspect-ratio:1 / 1; background:#fff; color:#8A0005; width:2em; line-height:1; padding:.2em .2em .4em; }
.wrap .page_number button.active{ background:transparent; color:#fff; }
.wrap .page_number button.arrow{ border-color:transparent; background:transparent; color:#fff;}
.wrap .page_number button.arrow:disabled { color:#4f0e10; }
.wrap .page_number button.arrow.left:before{content:'\e903'; }
.wrap .page_number button.arrow.right:before{ content:'\e904'; }
.warp .imgItems {width: 112px;height: 112px;}
.star_list{ position:absolute; width:100%; height:100%; top:0; left:0; }
.star_list li{ position:absolute; }
.star_list li:before{ content:''; display:block; width:100%; padding-top:100%; background:url(../images/list_star.svg) no-repeat; background-size:cover; }
.index{ background: #f6e6d3 url('../images/pattern.svg') center center / 200% ; width:100%; min-height:100dvh; color:var(--black-color); margin:0 auto; border: 10px solid #b2955c; position: relative; box-sizing: border-box; padding: 0 0 68px 0; }
.index .star_list li:nth-of-type(1){ width:4%; top:16%; left:13%; } 
.index .star_list li:nth-of-type(2){ width:4%; top:18%; right:7%; } 
.index .star_list li:nth-of-type(3){ width:4%; top:38%; left:6%; } 
.index .star_list li:nth-of-type(4){ width:3%; top:43%; left:12%;} 
.index .star_list li:nth-of-type(6){ width:3%; top:51%; left:9%;} 
.index .star_list li:nth-of-type(7){ width:3%; top:51%; right:9%;} 
.index .star_list li:nth-of-type(8){ width:3%; top:61%; right:2%;} 
.index .star_list li:nth-of-type(9){ width:4.5%; top:64%; right:4%; }
.index .star_list li:nth-of-type(10){ width:3%; top:83%; left:9%; }
.index .btn{ margin-top:1em; }
.index h5{ margin-top:.5em; }
.index .kv{ width:80%; height:auto; margin:auto; }
.chooseSet input[type="text"]{ width:86%; margin:.4em auto; }
.chooseSet h6{ color:#F08300; }
.chooseSet .decoPanel .options_list{ width:60%; }
.chooseSet .decoPanel .options_list li{ flex:1 1 46%; }
.finsh .images_block{ width:80%; margin:auto; border:solid 2px #fff; border-radius:8px; overflow:clip; background:#fff; }
.finsh .btn_group{ margin:24px auto; }
.finsh .btn_group a{ margin:0 16px; }
.finsh .btn_group a img{ width:100%; height:auto; }
.edit .text_block{ width:90%; margin:auto; border-radius:8px; background:#6E0004; font-size:4.2vw; text-align:left; margin-top:1em; padding-bottom:.5em; }
.edit .text_block textarea{ width:100%; border-radius:8px; height:6em; }
.edit .text_block textarea ,.edit .text_block p{ font-size:inherit; padding:.4em 1em; }
.edit .text_block p{ color:#DBDBDB; }
.edit .text_block a{ text-decoration:underline; }
.edit .images_block.deco{ margin:48px auto; }
.message{ padding-top:48px; }
.message:before{ display: none; }
.message .images_block{ width:80%; margin:36px auto 24px; border:solid 8px #fff; border-radius:8px; background:#fff;
    overflow:clip;}
.message h6{ color:#F08300;  }
.wall h5{color:#F08300;}
.wall.wrap .options_list li{ width:calc(99% / 3 - 10px); }
.wall.wrap .options_list li img{ width:100%; height:auto; object-fit:cover; aspect-ratio:1 / 1; }
.wall .pageNumber { width:224px;height: 224px;}
.wall .popUp{ display:flex; flex-direction:column; align-items:center; position:absolute; top:50%; left:50%;  padding:24px; transform:translate(-50%, -60%);} 
.wall .popUp .images_block{ max-width:100%; }
.wall .popUp .btn{ margin-top:24px; }
.loading{ background:linear-gradient(to bottom, #ce0006 0%,#7c0005 100%); }
.loading h2.act{ letter-spacing:.05em; white-space:nowrap; display:inline-block; overflow:hidden; border-right:.05em solid; animation:typing 3.5s steps(12) infinite, caret 1s steps(1) infinite; }
@keyframes typing{ 0%{ width:0; } 20%,100%{ width:11.5em; } }
@keyframes caret{ 50% { border-color:transparent; } }
.loading lottie-player{ width:100%; height:auto; }
.loading ul{ color:#F08300; text-align:left; margin:16px auto; display:inline-block; width:80%; font-size:3vw;}
.loading ul li{ font-weight:400; letter-spacing:0.025em; line-height:1.5; }
.loading ul li:before{ content:'*'; display:inline-block; width:1em; margin-left:-1em;}
.mask{ position:fixed; width:100%; height:100%; overflow:clip; left:0; top:0; z-index:89; display:flex; align-items:center; justify-content:center;} 
.bg_black{ background:rgba(0,0,0,.7);}
.popUp{ width:75%; overflow:visible; margin:0 auto; top:60px; position:relative; display:block; border-radius:24px; background:#fff; padding:60px 36px; color:#231815;}
.popUp .btn{ margin-top:36px;}
.logo{ width: 13%; position: absolute; left: 5%; top: 2%; }
.btnimg{ display: block; width: 88%; margin: 0vw auto 0 auto; }
.btnimg img{ width: 100%; }
.top{ width: 70%; margin: 8% auto 5px;  }
.top img{ width: 100%; }
.bgborder{ position: absolute; width: 98%; height: 99%; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.emoji .bgborder{ width: 98%; height: 99%;  }
.tumbler-box{  height: fit-content; position: relative; display: flex; justify-content: center; align-items: end; margin: 10px 0 10vw 0;}
.tumbler-box.emoji{ margin: 40px 0 7vw 0; height: 38dvh;  }
.big{ width: 50%; margin: 0 0 0 -15%;   }
.small{ width: 20%; position: absolute; right: 21%; bottom: 5px; }
.txt{ width: 22%; position: absolute; right: 10%; top: -8px; }
.bg01{ width: 10vw; position: absolute;  left: 5vw; top: 5vw; }
.emoji .big{ margin: 0 0 0 -3%;  }
.emoji .small{ right: 16%; }
.bg02{ width: 18vw; position: absolute;  left: 4.5vw; top: 47vw; }
.bg03{ width: 14vw; position: absolute;  right: 5vw; top: 40vw; }
.footertxt{ width: 70%; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); }
.note{ font-size: 1rem; width: 80%; margin: 0 auto; text-align: center; }
.emojibg01{ width: 18%; position: absolute; left: 5vw; top: 15vw; }
.emojibg02{ width: 20%; position: absolute; left: 4vw; top: 80%; }
.emojibg03{ width: 22%; position: absolute; right: 38vw; top: -20px; }
.txt-box{ display: flex; justify-content: center; align-items: center; }
.txt-box img{ width: 68%; }
.emoji-img{ display: flex; justify-content: center; align-items: center; margin: 30px 0 10px 0; }
.emoji-img img{ width: 70%; }
.wrap input.answerinput{ width: 75%; height: 45px; border-radius: 5px; background: #fff; border: 1px solid #ccc; display: block; margin: 0 auto 10px; color: #000; text-align: center; }
.btn-box{ display: flex; width: 78%; margin: 20px auto; justify-content: center; align-items: center; gap: 10px; position: relative; }
.btn-box li{ position: relative; }
.btn-box li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.btn-box li>img{ width: 100%; }
.btn-box.finish li{ width: 50%; } 
.images_block.finish{ width: 80%; margin: 0 auto;   }
.images_block.finish img{ width: 100%; }
.finishtit{ width: 80%; margin: 0 auto 10px; }
.btn_group.finish{ display: flex; justify-content: end;  margin: 0 auto; }
.btn_group.finish img{ width: 40px; height: 40px; }
.finish-top{ width: 80%; margin: 50px auto 30px; position: relative; }
.finishbg01{ width: 25%; position: absolute; left: 30px; bottom: -10px; }
.finishbg02{ width: 30%; position: absolute; left: 70%; top: -10px; }
.finishbg03{ width: 30%; position: absolute; left: -7%; top: 10%; }
.finishbg04{ width: 30%; position: absolute; left: 80%; top: -10%; }

:root{
    --black-color: #333;
}

h5{ color: var(--black-color); }
.bgborder{ width: 96%; height: 97%; left: 50%; top: 50%; transform: translate(-50%, -50%);  }

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

.logo{ width: 13%; position: absolute; left: 3%; top: 1%; }
.btnimg{ display: block; width: 88%; margin: 0vw auto 0 auto; }
.btnimg img{ width: 100%; }
.top{ width: 80%; margin: 8% auto 5px;  }
.top img{ width: 100%; }
.bgborder{ position: absolute; width: 98%; height: 97%; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.tumbler-box{  height: fit-content; position: relative; display: flex; justify-content: center; align-items: end; margin: 10px 0 50px 0;}
.tumbler-box.emoji{ margin: 40px 0 3vw 0; height: 38dvh;  }
.big{ width: 50%; margin: 0 0 0 -15%;   }
.small{ width: 20%; position: absolute; right: 21%; bottom: 5px; }
.txt{ width: 22%; position: absolute; right: 10%; top: -8px; }
.emoji .big{ margin: 0 0 0 -8%;  }
.emoji .small{ right: 16%; }
.bg01{ width: 10%; position: absolute;  left: 4%; top: -6%; }
.bg02{ width: 20%; position: absolute;  left: 4%; top: 85%; }
.bg03{ width: 14%; position: absolute;  right: 5%; top: 55%; }
.footertxt{ width: 75%; position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); }
.note{ font-size: 1rem; width: 80%; margin: 0 auto; text-align: center; }
.emojibg01{ width: 14%; position: absolute; left: 6%; top: 20%; }
.emojibg02{ width: 18%; position: absolute; left: 8%; top: 95%; }
.emojibg03{ width: 16%; position: absolute; right: 20%; top: -7%; }
.txt-box{ display: flex; justify-content: center; align-items: center; }
.txt-box img{ width: 68%; }
.emoji-img{ display: flex; justify-content: center; align-items: center; margin: 30px 0 10px 0; }
.emoji-img img{ width: 70%; }
.wrap input.answerinput{ width: 75%; height: 45px; border-radius: 5px; background: #fff; border: 1px solid #ccc; display: block; margin: 0 auto 10px; color: #000; text-align: center; }
.btn-box{ display: flex; width: 78%; margin: 40px auto; justify-content: center; align-items: center; gap: 10px; position: relative; }
.btn-box li{ position: relative; }
.btn-box li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.btn-box li>img{ width: 100%; }
.btn-box.finish li{ width: 50%; } 
.images_block.finish{ width: 80%; margin: 0 auto;   }
.images_block.finish img{ width: 100%; }
.finishtit{ width: 80%; margin: 0 auto 10px; }
.btn_group.finish{ display: flex; justify-content: end;  margin: 0 auto; }
.btn_group.finish img{ width: 40px; height: 40px; }
.finish-top{ width: 80%; margin: 50px auto 30px; position: relative; }
.finishbg01{ width: 28%; position: absolute; left: -5%; bottom: -10%; }
.finishbg02{ width: 30%; position: absolute; left: 70%; top: -10%; }
.finishbg03{ width: 30%; position: absolute; left: -7%; top: 10%; }
.finishbg04{ width: 30%; position: absolute; left: 80%; top: -10%; }

}

/* 直式 */
@media (orientation:portrait){ 

}

/* 橫式 */
@media (orientation:landscape){ 
header,.wrap{ width:51dvh; min-width:428px; position: relative; }
.wrap .btn ,.wrap button,.wrap input[type="button"],.wrap input[type="submit"]{ font-size:clamp(2.8rem, 6.5vw, 2.8rem); }
h2{ font-size:clamp(3.2rem, 7.5vw, 3.2rem); } 
h4{ font-size:clamp(2.8rem, 6.5vw, 2.8rem); } 
h5{ font-size:clamp(1.7rem, 4.2vw, 1.7rem); } 
h6{ font-size:clamp(1.4rem, 3.8vw, 1.4rem); } 
.wrap .hr_or{ font-size:clamp(2.4rem, 4.6vw, 2.4rem); }
.wrap input{ font-size:clamp(1.7rem, 4.2vw, 1.7rem); } 
.finsh .btn_group a:before{ font-size:clamp(4.2rem, 6.5vw, 4.2rem); }
.edit .text_block{ font-size:clamp(1.7rem, 4.2vw, 1.7rem); }
.wrap .page_number button{ font-size:clamp(1.7rem, 4.2vw, 1.7rem);  }
.loading ul{ font-size:clamp(1.4rem, 3.8vw, 1.4rem); }
.wall.wrap .options_list{ gap:16px; width:calc(100% - 32px); }
.wall.wrap .options_list li{ border-width:4px; }
.popUp{ max-width:400px;}


/* XX-Large devices (larger desktops, 1400px and up)  */
@media (min-width:1400px) { 

}