body { font-family: 'Noto Sans SC', 'Roboto', sans-serif;margin:0; padding:0;background: #189e76;background: linear-gradient(45deg,rgba(24, 158, 118, 1) 0%, rgba(171, 255, 235, 1) 100%); }
body::-webkit-scrollbar {
    display: none;
}
img { max-width: 100%; }
.home-ps {font-size: 24px;margin-bottom: 0;color: #eee;font-style: italic;}
.cn-fonts { font-family: font-family: 'Noto Sans SC', 'Roboto', sans-serif; }
.point { position: absolute; z-index: 10; left: 15px; top: 15px; border-radius: 6px; padding: 5px 10px; background: #eee; font-size: 21px;}
.before_main {position: fixed;width: 100%;height: 100%;background: #333;z-index: 999;color: #fff;display: flex;justify-content: center;align-items: center;}
.before_main-inner {font-size: 36px;font-weight: bold;text-align: center;}
.music_btn {margin-top: 20px;}
.btn-img {max-width: 180px;display: inline-flex;vertical-align: bottom;position:relative;}
.btn-back { position: absolute; left:0; bottom:0; display: none;}
.btn-img:hover .btn-front { opacity: 0;}
.btn-img:hover .btn-back { display: block;}
.summon-main { position: relative; text-align:center; }
.summon-img { width: 100%; height: 100vh;overflow: hidden; display: flex; justify-content: end; align-items: center; }
.summon-img iframe { margin-left: -5%; margin-top: -5%; opacity: 0.5; }
.hd_dot { background: url('img/hd.png'); position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%;}
/*.summon-img img { width: auto; height: calc(100vh - 35px); padding-top: 35px;}*/
.summon-btn { position: absolute; bottom: 40px; z-index: 3; cursor: pointer; left: 50%; transform: translateX(-50%);}
.summon-btn.disabled { pointer-events: none; }
.summon-btn img { max-width:  150px; }
.summon-confirm {position: fixed;z-index: 99;left: 50%;top: 50%;transform: translate(-50%, -50%);text-align: center;min-width: 300px;background: #fff;padding: 20px;border: solid 2px #000;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);font-size: 18px;}
.sc-button { display: flex; justify-content: center; column-gap: 15px;margin-top: 35px; cursor: pointer;}
.right-content {min-width: 300px; max-width: 450px; margin-right: 5%;}
.wish-count {font-size: 36px;font-weight: bold;color: #fff;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);line-height: 56px;}
.wish_number { font-size: 80px; color: #85ffae; }
.wish {color: #fff; font-size: 30px; max-height: 420px; overflow-y: auto; text-shadow: 1px 1px 5px rgba(100,43,4,1);}
.wish::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);background-color: #F5F5F5;}
.wish::-webkit-scrollbar {width: 8px;background-color: #F5F5F5; border: 3px solid transparent;}
.wish::-webkit-scrollbar-thumb {background-color: #ccc2ae;}
.confirm-btn { margin-top: -200px; cursor: pointer;}
.summon-scene, .credit_video { position: fixed; top:50%; left:50%; z-index: 999; pointer-events:none; background:#000;width: 100%; height: 100%;transform: translate(-50%, -50%); }
#summonscene, #cardopen, #credit_video { width: 100%;height: 100%; object-fit: cover; object-position: center; }
#summonscene::-webkit-media-controls, #cardopen::-webkit-media-controls {display: none !important;}
#summonscene::-webkit-media-controls-enclosure, #cardopen::-webkit-media-controls-enclosure {display: none !important;}
.card_display {position: fixed;z-index: 1005;top: 0;left: 0;background: #fff;width: 100%;height: 100%;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none;  }
#cardbg {position: fixed;z-index: -1;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.card_bg { position: absolute; z-index: -1; left:0; top:0; width: 100%; height: 100%; object-fit: cover;}
.card_display::-webkit-scrollbar {display: none;}
.card_list {display: flex;flex-wrap: wrap;column-gap: 20px;row-gap: 65px;justify-content: space-evenly;padding: 35px 35px 60px;max-width: 1140px; margin: 0 auto;}
.box_item{ width: 18%; opacity: 0; }
.box_item.active { opacity: 1; }
.box_item img { max-width: 100%;display: block; border: solid 5px #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.item_data { cursor: pointer;max-width: 180px; margin: 0 auto; }
.item_data.disabled { filter: grayscale(1); transition: none;}
.sr_grade { box-shadow: 0 0 30px #ab2176; animation: sr_shadow 2s linear infinite;}
.r_grade { box-shadow: 0 0 30px #cc8c53;animation: r_shadow 2s linear infinite; }
.card_open {position: fixed;top: 0;left: 0;z-index: 1010;width: 100%;height: 100%;}
.opened {position: absolute;top: 50%;left: 50%;color: #fff;font-weight: bold;font-size: 30px;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);text-transform: uppercase;transform: translate(-50%, -50%);width: 100%; text-align:center;margin-left: 6px; word-break: break-word;}
.card_message {position: fixed;z-index: 1100;top: 0;left: 0;width: 100%;height: 100%;text-align: center;background:#fff; display: flex; align-items: center; justify-content: center; }
.close_card {position: absolute;max-width: 75px;right: -5px;top: 0;cursor: pointer;}
.from {font-size: 70px;font-weight: bold;text-shadow: 2px 2px 10px rgb(196 20 233 / 70%);}
.content img { height: 100%; }	
.content { position: relative; }
.content-inner {display: inline-block; width: 720px;height: 450px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.board-bg { width: 900px; height: 673px;}
.from2 {color: #fff;font-size: 35px;padding: 10px 20px 20px;position: absolute;text-align: center;top: 50%;width:calc(100% - 40px);transform: translateY(-50%);}
.from2-wrapper {position: absolute;max-width: 320px;bottom: -55px;left: 50%;transform: translateX(-50%);}
.content_bottom {font-size: 25px;}
.link a { max-width: 150px; position: absolute; left: -35px; bottom: -40px; }
.link2 a { max-width: 150px; position: absolute; right: -35px; bottom: -40px; }
.separater { margin-bottom: 25px;}
.credit-wrapper {position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);}
.credit-inner {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
.credit-content {background: #c0ffd9;max-height: 80%;width: 95%;max-width: 600px;border-radius: 15px;position: relative;overflow-y: auto;}
.credit-content::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
.credit-content::-webkit-scrollbar{width: 5px;background-color: #F5F5F5;}
.credit-content::-webkit-scrollbar-thumb{background-color: #cc1212;border: 1px solid #cc1212;}
.credited-close { max-width: 32px; position: absolute; right: 10px; top: 10px;cursor: pointer;}
.credited {padding: 30px 20px 30px;}
.credited h4 { margin: 15px 0 0; }
.credited p { margin: 0; }
.footer-container { display: flex; justify-content: space-between; width: 95%; margin: 0 auto;}
footer { font-family:'Roboto', sans-serif; text-align: center;padding: 5px; background: #333; color: #fff; font-size: 12px; position:relative; z-index: 99995; }
.credited-btn { color: #fff; }

.ending_wrapper {position: fixed;top: 0;left: 0;background: #333;z-index: 9999;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;color: #fff;}
.ending-inner { text-align: center; }
.ending_text h2 { font-size: 46px; }
.ending_text h3 {font-size: 32px;color: #999;}
.ending_text {text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.8);}
.button {display: inline-block;margin: 0 10px;cursor: pointer; max-width: 160px;}
.get_away { cursor: default;}
#ending_video, #ending_yt {position: absolute;z-index: 99;width: 100%;height: 100%;object-fit: cover;object-position: center; pointer-events:none;}
.nonono { margin-top: 0; }
.et2 { margin-bottom: 10px; }
.ending_button { margin-top: 85px; }
.continue-button { position: absolute; bottom: 2%; right: 5%; background: #222; box-shadow: 2px 2px 10px rgba(255,255,255,0.3); border-radius: 12px;padding: 12px 36px; font-size: 32px; z-index: 99; cursor: pointer;}
.play_ending { pointer-events:none; }
.play_ending.active { pointer-events:all; }
.play_ending img {filter: grayscale(1);}
.play_ending.active img {filter: grayscale(0);}

.largescreen { position: fixed;z-index: 99999;width: 100%;height: 100%;background: #333;color: #fff;text-align: center;display: none;justify-content: center;align-items: center;font-size: 32px;text-transform: uppercase; }
@media screen and (max-width: 1200px) {
	.largescreen { display: flex; }
	.container { display: none; }
}

@keyframes sr_shadow {
  0%   {box-shadow: 0 0 30px #ab2176;}
  50%  {box-shadow: 0 0 50px #ab2176;}
  100%  {box-shadow: 0 0 30px #ab2176;}
}
@keyframes r_shadow {
  0%   {box-shadow: 0 0 30px #cc8c53;}
  50%  {box-shadow: 0 0 50px #cc8c53;}
  100%  {box-shadow: 0 0 30px #cc8c53;}
}