body {font-size: 14px;  font-family:"microsoft yahei", Arial, Helvetica, sans-serif;  margin:0;  padding:0;  -webkit-tap-highlight-color:rgba(0,0,0,0);  }
div,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {  margin:0;  padding:0;  border:none;  list-style:none;  }
input {border:none;outline: none;list-style:none;}
img{border:none; vertical-align:top;outline:none;}
em{ font-style:normal;  }
.lf   {float:left;}
.rt  {float:right;}
.clear  {clear:both;}
a { color:#333333; text-decoration:none;}
a:hover { text-decoration:none;}

.container{overflow: hidden;height: 100vh;width: 100%;max-width: 56.25vh;margin: 0 auto;
    background: url(../images/bg.jpg) no-repeat center;background-size: cover;
    position: relative;
    box-sizing: border-box;padding-top: 7.35vh;
}
.logo{width: 21.1%;opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.title2{width: 85.77%;display: block;margin:3.3% auto 0;opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.main{width: 90%;margin: 0 auto;}
.section_1{position: absolute;top:0;left: 0;z-index: 99;
    width: 100%;height:100%;background: url(../images/bg_hj.jpg) no-repeat center;
    background-size: cover;box-sizing: border-box;padding-top: 10.625%;
}
.section_1 .logo{width: 26.44%;opacity: 1;}
.section_1 .title{width: 76.32%;display: block;margin:11.5% auto 0;opacity: 1;}
.btn{position: absolute;bottom:5%;left: 50%;margin-left: -19.6%;width: 39.2%;cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.section_2{position: absolute;top:0;left: 0;z-index: 90; display: none;
    width: 100%;height:100%;box-sizing: border-box;padding-top: 31.9%;
}
.section_2 img{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.age,.tit_bg{margin-bottom:1.85%;}
.age img{width: 9.05%;}
.tit_bg img{width: 6.38%;}
.male>img{width: 6.38%;margin-right: 1.7%;
    display: inline-block;padding-top: 1%;
}

.select_box{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-wrap: wrap ;
    justify-content: space-between;

}
.choose_item{width: 15.33%;text-align: center;  cursor: pointer; display: inline-block;
    margin-bottom: 1.85%;
}
.choose_item input{display: none;}
.choose_item.no_sel{cursor:auto;}
.male .choose_item{width: 12.264%;margin-right: 1.7%}
.choose_item img{width: 100%;
    transform: scale(1);
    filter: grayscale(50%);
    opacity: 0.95;
    border: 2px solid transparent;
}
.choose_item.sel img{
    filter: none;
    transform: scale(1.03);
    opacity: 1;
}


.sel_tit{text-align: center;}
.sel_tit img{ width: 68.2%; }
.section_3{position: absolute;top:0;left: 0;z-index: 50;
    width: 100%;height:100%;box-sizing: border-box;padding-top: 18.28%;
    display: none;
}
.hj_box{
    position: absolute;background: url(../images/bg_hk.png) no-repeat center;top:18%;left: 50%;margin-left: -40%;
    width:80%;height:68.28% ;box-sizing: border-box;background-size: cover;
    padding: 14.4% 4.455% 14.54% 4.755%;text-align: center;
}
.hj_box img{width: 23%;padding-top: 40%;}

:root {
    --coco-scale: 1; /* Ĭ�ϷŴ��� */
}
.coco-msg-stage{
    transform: scale(var(--coco-scale)) translate(-50%, 0);
    transform-origin: top left;
}