*{font-size: 1rem; margin:0; text-shadow: 3px 3px 3px rgba(0,0,0,0.5);-webkit-tap-highlight-color: rgba(0,0,0,0);}
td {border: 0px black solid;}
td {text-align: center;}
ul {margin: 0; padding: 0;}
li {list-style: none; text-align: center; }

body{
    width: 100%;
    height: 100%;
    overflow:hidden;
}
p{font-size: 1rem;}

.config-btn{
    display:block;padding:5px; border-radius:5px;width:4rem;margin:0 auto;font-size: 1rem;cursor:pointer;
}
.config-btn.on{
    border:white 1px solid;
}

.transition{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 900;
}

.rules{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0px;
    background: url("../resources/common/rules.png") no-repeat;
    background-size: auto 90%;
    background-position: center;
    z-index: 600;
}

.album{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: url("css/game.css");
    background-size: 100% auto;
    background-position: center;
    z-index: 600;
}

@media screen and (max-aspect-ratio:16/9){
    .album{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 600;
        background: url("../resources/menu/back.jpg");
        background-size: auto 100%;
        background-position: center;
    }
}

.main{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: black; 
    z-index: 100;
}
.galgame{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: black; 
    z-index: 100;
}


.charactor_frame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#charactor_left{
    z-index: 101;
}
#charactor_center{
    z-index: 121;
}
#charactor_right{
    z-index: 111;
}

.ui_layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 300;
}

#top_layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 900; 
    cursor: pointer;
    overflow-x: auto;
    overflow-y: hidden;
}
.bottom{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999; 
    background: white;
    overflow-x: auto;
    overflow-y: hidden;
}
.bottom_image{
    position: absolute;
    width: 50%;
    height: 50%;
    top: 10%;
    left: 25%;
    background: url('../resources/common/horizon_hint.png') 100% 100% /100% auto no-repeat;
}
#confirm{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 901; 
    background:rgba(0,0,0,.6);
    overflow-x: auto;
    overflow-y: hidden;
}
#confirm_1{
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    z-index: 902; 
    overflow-x: auto;
    overflow-y: hidden;
}
.play_again_1{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 60%;
    left: 23%;
    z-index: 903; 
}
.play_again_2{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 60%;
    left: 52%;
    z-index: 903; 
}
.play_again_cancel{
    position: absolute;
    width: 54%;
    height: 14%;
    top: 78%;
    left: 23%;
    z-index: 903; 
}
.cancel{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 78%;
    left: 23%;
    z-index: 903; 
    background: url(../resources/common/cancel.png) right /auto 100%  no-repeat;
}
.submit{
    position: absolute;
    width: 25%;
    height: 14%;
    top: 78%;
    right: 23%;
    z-index: 903;
    background: url(../resources/common/submit.png) left /auto 100%  no-repeat;

}
.rule{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    right: 0%;
    z-index: 99999;
    background: url(../resources/common/rule.png) center /auto 90%  no-repeat rgba(0,0,0,0.8);
    display: none;
}
.goto{
    position: absolute;
    width: 50%;
    height: 14%;
    top: 14%;
    left: 25%;
    z-index: 903;
}
.score-submit{
    position: absolute;
    width: 50%;
    height: 14%;
    top: 78%;
    left: 25%;
    z-index: 903;


}
.score_cancel{
    position: absolute;
    width: 20%;
    height: 14%;
    top: 0%;
    left: 71%;
    z-index: 903; 
}
#cg_layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1100;
    text-align: center; 
    cursor: pointer;
    overflow-x: auto;
    overflow-y: hidden;
}
.cg_pic{
    display: block;
    height: 100%;
    width: auto;
    margin: 0 auto; 
}

.home_btn{
    position: absolute;
    width: 4rem;
    height: 4rem;
    margin: 1rem;
    top: 0px;
    right: 0px;
    z-index: 810;
    background: url("../resources/common/home.png");
    background-size: 100% auto;
    background-position: center;
    cursor: pointer;
}

.record{
    position: absolute;
    width: 14rem;
    height: 2.4rem;
    margin: 1rem;
    top: 0px;
    left: 0px;
    z-index: 800;
    

}

.record_btn{
    position: absolute;
    width: 47%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 810;
    background-image: url("../resources/common/save.png");
    background-size:auto 100% ;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}


.read_record_btn{
    position: absolute;
    width: 47%;
    height: 100%;
    top: 0px;
    right: 0px;
    z-index: 810;
    background-image: url("../resources/common/read.png");
    background-size:auto 100% ;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.menuscene{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 400;
    background: url("../resources/menu/back.jpg") black no-repeat;
    background-size:  100% auto;
    background-position: center;
}
.menuscene_fg{
    position:absolute;
    width:100%;
    height:100%;
    z-index:0;
    background:url("../resources/menu/fg.png");
    background-size:auto 100%;
}


@media screen and (max-aspect-ratio:16/9){
    /*.menuscene{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 400;
        background: url("/web/20201220105553im_/http://static.event.mihoyo.com/valentine2017/../resources/menu/back_pad.jpg");
        background-size: 100% 100%;
        background-position: center;
    }*/
}

.menu_title_frame{
    width: 100%;
    height: 40%;
    background: url("../resources/common/title.png") no-repeat;
    background-size: auto 90%;
    background-position: 80%;
}
@media screen and (max-aspect-ratio:16/9){
    .menu_title_frame{
        width: 100%;
        height: 40%;
        background: url("../resources/common/title.png") no-repeat;
        background-size: 100% auto;
        background-position: center;
    }
}

.grid_layout{
    position: absolute;
    left: 52%;
    top: 42%;
    width: 30%;
    height: 50%;
    z-index: 1;
}
.menu_btn_frame{
    width:100%;
}
.menu_btn{
    float: right;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-size:auto 92%;
    background-position: center;
    background-repeat:  no-repeat;
}
.menu_btn_1{
    background-image: url("../resources/menu/1.png");
}
.menu_btn_2{
    background-image: url("../resources/menu/2.png");
}
.menu_btn_3{
    background-image: url("../resources/menu/3.png");
}


#loading{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.6);
    z-index:9999;
}
.loadingFrame{
    margin: 0 auto;
    background: white;
    width: 100px;
    height: 100px;
}

.dialog{
    position: absolute;
    z-index: 200;
}

.dialog0{
    bottom: 29%;
    left: 5%;
    width: auto;
    height: auto;
    z-index: 215;
    background: rgba(90, 98, 184, 0.9);
    border: 3px solid  #5a62b8;
    border-radius: 8px;
}

.dialog_click{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 217;
}
.dialog1{
    bottom: 1%;
    left: 5%;
    width: 90%;
    height: 25%;
    z-index: 210;
    background: rgba(90, 98, 184, 0.9);
    border: 3px solid  #5a62b8;
    border-radius: 8px;
    color: white;
}

.dialog2{
    top: 15%;
    left: 28%;
    width: 46%;
    height: 60%;
    z-index: 220;
}

.dialog3{
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0;
    z-index: 230;
    cursor: pointer;
}
.album_table{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index:1000;
}
.album_list{
    width: 90%;
    height: 90%;
    margin: 0 auto;
    overflow: auto;
    display:table;
}
.album_list .close-btn{
    position:absolute;
    width:8%;
    right:22%;
    top:4%;
}
.album_list table td{
    padding:10px 5px;
}
.album_item{
    float: left;
    height: auto;
    width: 360px;
    margin: 20px;
    border:10px solid white;
}
.album_pic{
    display:block;
    width: 360px;
    height: auto;
    cursor: pointer;
}

.link{
    position: absolute;
    width: 27%;
    height: 14%;
    top: 78%;
    left: 36%;
    z-index: 1002;
}
.tab{
    position: absolute;
    width: 12%;
    height: 14%;
    top: 78%;
    left: 81%;
    z-index: 1002; 
}
.close_btn{
    position: absolute;
    width: 10%;
    height: 15%;
    top: 3%;
    right: 5%;
    z-index: 810;
}
@media screen and (max-aspect-ratio:16/9){
    .album_list{
      width: 90%;
      height: 70%;
      margin: 0 auto;
      overflow: auto;
    }
    .album_list .close-btn{
        position:absolute;
        width:8%;
        right:21%;
        top:14%;
    }
    .link{
    position: absolute;
    width: 27%;
    height: 12%;
    top: 72%;
    left: 36%;
    z-index: 1002;
    }
    .close_btn{
        position: absolute;
    width: 20%;
    height: 12%;
    top: 15%;
    left: 75%;
    z-index: 1002; 
}

.tab{
    position: absolute;
    width: 19%;
    height: 12%;
    top: 72%;
    left: 75%;
    z-index: 1002; 

}
}

.name{ 
    padding: 5px 30px;
    font-size: 24px; 
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

.choice{
    padding:10px; 
    margin: 13px 0 0 21px; 
    cursor: pointer; 
    background: rgba(64, 31, 40, 0.9);
    color: white;
}


.move_left_center_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_center 3s ;
    -webkit-animation:mymove_left_center 3s; /*Safari and Chrome*/
}

.move_left_center_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_center 2s ;
    -webkit-animation:mymove_left_center 2s; /*Safari and Chrome*/
}

.move_left_center_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_center 1s ;
    -webkit-animation:mymove_left_center 1s; /*Safari and Chrome*/
}

@keyframes mymove_left_center
{
from {background-position:10% 100%;}
to {background-position:bottom center;}
}

@-webkit-keyframes mymove_left_center /*Safari and Chrome*/
{
from {background-position:10% 100%;}
to {background-position:bottom center;}
}

.move_left_right_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_right 3s ;
    -webkit-animation:mymove_left_right 3s; /*Safari and Chrome*/
}

.move_left_right_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_right 2s ;
    -webkit-animation:mymove_left_right 2s; /*Safari and Chrome*/
}

.move_left_right_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_left_right 3s ;
    -webkit-animation:mymove_left_right 3s; /*Safari and Chrome*/
}

@keyframes mymove_left_right
{
from {background-position:10% 100%;}
to {background-position:90% 100%;}
}

@-webkit-keyframes mymove_left_right /*Safari and Chrome*/
{
from {background-position:10% 100%;}
to {background-position:90% 100%;}
}

.move_center_right_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_right 3s ;
    -webkit-animation:mymove_center_right 3s; /*Safari and Chrome*/
}

.move_center_right_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_right 2s ;
    -webkit-animation:mymove_center_right 2s; /*Safari and Chrome*/
}

.move_center_right_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_right 1s ;
    -webkit-animation:mymove_center_right 1s; /*Safari and Chrome*/
}

@keyframes mymove_center_right
{
from {background-position:bottom center;}
to {background-position:90% 100%;}
}

@-webkit-keyframes mymove_center_right /*Safari and Chrome*/
{
from {background-position:bottom center;}
to {background-position:90% 100%;}
}

.move_right_center_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_center 3s ;
    -webkit-animation:mymove_right_center 3s; /*Safari and Chrome*/
}

.move_right_center_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_center 2s ;
    -webkit-animation:mymove_right_center 2s; /*Safari and Chrome*/
}

.move_right_center_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_center 1s ;
    -webkit-animation:mymove_right_center 1s; /*Safari and Chrome*/
}

@keyframes mymove_right_center
{
from {background-position:90% 100%;}
to {background-position:bottom center;}
}

@-webkit-keyframes mymove_right_center /*Safari and Chrome*/
{
from {background-position:90% 100%;}
to {background-position:bottom center;}
}

.move_right_left_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_left 3s ;
    -webkit-animation:mymove_right_left 3s; /*Safari and Chrome*/
}

.move_right_left_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_left 2s ;
    -webkit-animation:mymove_right_left 2s; /*Safari and Chrome*/
}

.move_right_left_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_right_left 1s ;
    -webkit-animation:mymove_right_left 1s; /*Safari and Chrome*/
}

@keyframes mymove_right_left
{
from {background-position:90% 100%;}
to {background-position:10% 100%;}
}

@-webkit-keyframes mymove_right_left /*Safari and Chrome*/
{
from {background-position:90% 100%;}
to {background-position:10% 100%;}
}

.move_center_left_slow{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_left 3s ;
    -webkit-animation:mymove_center_left 3s; /*Safari and Chrome*/
}

.move_center_left_medium{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_left 2s ;
    -webkit-animation:mymove_center_left 2s; /*Safari and Chrome*/
}

.move_center_left_quick{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    animation:mymove_center_left 1s ;
    -webkit-animation:mymove_center_left 1s; /*Safari and Chrome*/
}

@keyframes mymove_center_left
{
from {background-position:bottom center;}
to {background-position:10% 100%;}
}

@-webkit-keyframes mymove_center_left /*Safari and Chrome*/
{
from {background-position:bottom center;}
to {background-position:10% 100%;}
}



.black{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0);
    text-align: center;
    z-index: 99;
}

.frame{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    background: white; 
    z-index: 100;
}


.starts,.starts ul{float:left;}

.starts{
    position: absolute;
    left: 26%;
    top: 60%;
    width:57%;
    padding-left:16px;
    padding-top:7px;
}
.starts ul{
    height: 100%;
    width: 100%;
}

.starts ul li{
    width:13%;
    height:38px;
    float:left;
    background: url("../resources/common/star0.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
    padding-right:5px;
}

.starts ul li.on{
    background: url("../resources/common/star1.png") no-repeat;
    background-size: auto 100%;
    background-position: center;
    padding-right:5px;
}

.starts ul span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}


.background{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px;
}
.white{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px;
    background: white;
    z-index: 10000;
    display: none;
}
.bgm{
    display: none;
}
.dialog{
    position: absolute;
    bottom: 1%;
    left: 5%;
    width: 90%;
    height: 25%;
    z-index: 210;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid rgb(101,101,101);
    border-radius: 10px;
    color: white;
    font-family: YouYuan;
}
.dialog-text{
    font-size: 1rem;
    padding:12px 30px;
    font-family: YouYuan;
    text-align: left;
}

.dialog-chara{
    position: absolute;
    bottom: 30%;
    left: 5%;
    width: auto;
    height: auto;
    z-index: 215;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid rgb(101,101,101);
    border-radius: 10px;
    padding: 7px 30px;
    font-size: 1rem;
    color: white;
    font-family: YouYuan;
}

.charactor-left{
    position: absolute;
    left: 0%;
    top:0%;
    height: 100%;
    width: 100%;
}
.charactor-center{
    position: absolute;
    left: 0%;
    top:0%;
    height: 100%;
    width: 100%;
}
.charactor-right{
    position: absolute;
    left: 0%;
    top:0%;
    height: 100%;
    width: 100%;
}

.shake{
    -moz-animation: fadeInOut 0.2s infinite;
    -ms-animation: fadeInOut 0.2s infinite;
    -webkit-animation:shake 0.2s infinite;
    animation:shake 0.2s infinite;
}
 @-ms-animation shake {
    0%{
       -webkit-transform:translate(2px, 2px);
    }
    25%{
       -webkit-transform:translate(-2px, -2px);
    }
    50%{
       -webkit-transform:translate(0px, 0px);
    }
    75%{
        -webkit-transform:translate(2px, -2px);
    }
    100%{
        -webkit-transform:translate(-2px, 2px);
    }
} 
@-moz-animation shake {
    0%{ 
       -webkit-transform:translate(2px, 2px);
    }
    25%{
       -webkit-transform:translate(-2px, -2px);
    }
    50%{
       -webkit-transform:translate(0px, 0px);
    }
    75%{
        -webkit-transform:translate(2px, -2px);
    }
    100%{
        -webkit-transform:translate(-2px, 2px);
    }
}

 @-webkit-keyframes shake {
    0%{
       -webkit-transform:translate(2px, 2px);
    }
    25%{
       -webkit-transform:translate(-2px, -2px);
    }
    50%{
       -webkit-transform:translate(0px, 0px);
    }
    75%{
        -webkit-transform:translate(2px, -2px);
    }
    100%{
        -webkit-transform:translate(-2px, 2px);
    }
}
@keyframes shake {
    0%{
       transform:translate(2px, 2px);
    }
    25%{
        transform:translate(-2px, -2px);
    }
    50%{
        transform:translate(0px, 0px);
    }
    75%{
        transform:translate(2px, -2px);
    }
    100%{
        transform:translate(-2px, 2px);
    }
}


.choice_list{
    position: absolute;
    z-index: 200;
    top: 15%;
    left: 28%;
    width: 46%;
    height: 60%;
    z-index: 220;
    font-size: 1rem;
}
.cg{
    position:absolute;
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px;
    z-index: 999999;
    display:none;

}
/*
     FILE ARCHIVED ON 10:55:53 Dec 20, 2020 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 16:45:56 Nov 01, 2024.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.494
  exclusion.robots: 0.019
  exclusion.robots.policy: 0.009
  esindex: 0.009
  cdx.remote: 10.437
  LoadShardBlock: 314.499 (3)
  PetaboxLoader3.resolve: 302.913 (4)
  PetaboxLoader3.datanode: 94.641 (4)
  load_resource: 112.815
*/