html,body{
  padding:0px;
  margin:0px;
  width: 100% !important;
  height: 100% !important;
  background: #ecedee;
  -webkit-overflow-scrolling: touch !important;
  overflow: hidden !important;
  -ms-overflow-style: none;

  -webkit-text-size-adjust:none;
  -ms-text-size-adjust:none;
  -moz--text-size-adjust:none;
  text-size-adjust:none;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background:  none;
}
::-webkit-scrollbar-thumb:hover {
  background:  none;
}

@font-face {
  font-family: XM_None;
}

@font-face {
  font-family: XM_JP;
  src: url(../JS/MPLUS1p-Medium.ttf);
}

@font-face {
  font-family: XM_Medium;
  src: url(../JS/CamphorProForXiaoMi-Medium.otf);
}

*{
  font-family: XM_Medium;
}

@font-face {
  font-family: XM_Light;
  src: url(../JS/CamphorProForXiaoMi-Light.otf);
}
@font-face {
  font-family: XM_Bold;
  src: url(../JS/CamphorProForXiaoMi-Bold.otf);
}

@font-face {
  font-family: XM_Regular;
  src: url(../JS/CamphorProForXiaoMi-Regular.otf);
}




/*realibox ................................*/
#canvasx {
    width: 100% !important;
    height: calc(100% - 90px) !important;
    background: red;
}

/*Loading..............................*/

/*-------------------------------------------------*/





#point_box{
  position: fixed;
  right: 0px;
  transform: translate(0px,-50%);
  width: 100%;
  height: 20px;
  background: black;
  mix-blend-mode: multiply;

}

#pointx{
  position: relative;
  width: 20px;
  height:10px;
  border-radius:5px;
  background: white;
  left: 0%;
  transform: translate(-50%,-25%);

}

#loadimgbar{
  width: 100%;
  position: fixed;
  transform: translate(0px,-80px);
}

#loadimg2int{
  transform: translate(-35%,10%);
  margin: auto;
  width: 150px;
  height: auto;
  opacity: 1;
  animation-name: imgint;
  animation-duration: 1s;
  animation-fill-mode:  forwards;
}
@keyframes imgint{
  from{opacity: 0;}
  to{opacity: 1;}
}

#application-canvas{
  position: fixed;
  z-index: 0;
}
/****************************************************************************************************************************/

#ALL{
  position: fixed;
  z-index: 100;
  width: 0%;
  height: 0%;
  top: 0px;
  left: 0px;
}

#btn_box{
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%,0px);
  display: flex;
  justify-content: space-between;
}
.btn_color{
  background: white;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  opacity: 0.8;
  margin: 20px;
  transition: 0.25s;
  transform: scale(1);
}
.btn_color:hover{
  opacity: 1;
  transform: scale(1.2);
  cursor: pointer;
}

#home_boxs{
  position: fixed;
  height:80px;
  width: 88%;
  max-width: 400px;
  left: 50%;
  bottom: -90px;
  transform: translate(-50%,0%);
  background: black;
  border-radius: 30px 30px  0px 0px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
  font-size: 10px;
  color:black;
  display: flex;
  justify-content: space-around;
  padding-left: 25px;
  padding-right: 25px;
  transition: 0.25s;
}

#pg1_text{
  position: fixed;
  top:45px;
  width: 100%;
  text-align: center;
  font-size: 30px;
  opacity: 0;
  transition: 0.25s;
}

#pg1_click{
  position: fixed;
  top: 0px;
  left: 0px;
  transform: translate(-0px,-35px);
  width: 70px;
  opacity: 0;
  transition: 0.25s;
  display: none;
}

.home_btn{
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 8px;
  transition: 0.25s;
  transform: scale(1);
}
.home_btn:hover{
  cursor: pointer;
  transform: scale(1.05);
}
.home_btn:active{
  cursor: default;
  transform: scale(1);
}

#home_btn2{
  transform: translate(0px,15px);
}
#home_btn3{
  transform: translate(10px,15px);
}

.home_text{
  width: 100%;
  text-align: center;
  margin-top: 0px;
  transform: scale(0.8);
  letter-spacing:0px;
  font-family: XM_Light;
  white-space: nowrap;
}

.home_img{
  position: fixed;
  top: 8px;
  left:50%;
  transform: translate(-50%, 0px);
  width: 25px;
  opacity: 1;
  height: 25px;
}
#home_middle{
  width: 60px;
  height: 20px;
}
.home_color{
  height: 50px;
  width:65px;
  border-radius: 15px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
  transform: translate(0px,15px);
  font-size: 10px;
  transition: 0.25s;
  opacity: 1;

}
.home_color:hover{
  cursor: pointer;
}

#home_color_1{
  width: 50px;
  overflow: hidden;
}
.home_icon{
  width: 80px;
  height: 80px;
  margin: -15px;
  opacity: 0;
  animation: homeani 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.home_white{
  position: fixed;
  background: white;
  border-radius: 12px;
  top: 5px;
  left: 5px;
  width: 40px;
  opacity: 0;
  height: 40px;
}

@keyframes homeani
{
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg)}
}

.home_text{
  position: fixed;
  width: 65px;
  height:  50px;
  top: 50%;
  line-height:  50px;
  text-align: center;
  transform: translate(0px,-50%)scale(0.8);
  font-size: 10px;
  color: white;
  margin-top: 15px;

}


#appointment{
  display: none;
  position: fixed;
  width: 110px;
  height: 42px;
  left: 50%;
  bottom: 110px;
  transform: translate(-50%,-20px) scale(1);
  background: #2e2e2e;
  font-size: 16px;
  color: white;
  text-align: center;
  transition: 0.25s;
  opacity: 0;
  border-radius: 50px;
  line-height: 42px;
}

#appointment:hover{
  cursor: pointer;
  transform: translate(-50%,-20px) scale(1.05);
}
#appointment:active{
  cursor: default;
  transform: translate(-50%,-20px) scale(1);
}
/*---------------------------------------------------------*/

.homebox{
  position: fixed;
  height:31px;
  width: 68px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.06);
  border-radius: 17px;
  transition: 0.25s;
}
.homebox:hover{
  cursor: pointer;
}

#homebox_1{
  left:2%;
  top: 50%;
  transform: translate(0px,-95px) scale(1);
}
#homebox_1:hover{
  transform: translate(0px,-95px) scale(1.05);
}
#homebox_1:active{
  transform: translate(0px,-95px) scale(1);
}
#homebox_2{
  left: 2%;
  top: 50%;
  transform: translate(0px,95px) scale(1);
}
#homebox_2:hover{
  transform: translate(0px,95px) scale(1.05);
}
#homebox_2:active{
  transform: translate(0px,95px) scale(1);
}
#homebox_3{
  right: 2%;
  top: 50%;
  transform: translate(0px,-95px) scale(1);
}
#homebox_3:hover{
  transform: translate(0px,-95px) scale(1.05);
}
#homebox_3:active{
  transform: translate(0px,-95px) scale(1);
}
#homebox_4{
  right: 2%;
  top: 50%;
  transform: translate(0px,95px) scale(1);
}
#homebox_4:hover{
  transform: translate(0px,95px) scale(1.05);
}
#homebox_4:active{
  transform: translate(0px,95px) scale(1);
}

.btn_text{
  font-size: 13px;
  padding-top:15px;
  text-align: center;
}
.btn_point{
  position: fixed;
  top: 12px;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 100%;
}
#btn_point_1{
  right: 10px;
}
#btn_point_2{
  right: 10px;
}
#btn_point_3{
  left: 10px;
}
#btn_point_4{
  left: 10px;
}

#homebutton{
  position: fixed;
  bottom: 20px;
  left: 50%;
  width: calc(100% - 20px);
  max-width: 500px;
  height: 76px;
  transform: translate(-50%,0px);
  background: #FFFFFF;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.03);
  border-radius: 24px;
  transition: 0.25s;
}

#hb_1{
  position: fixed;
  top: 50%;
  left: 10px;
  transform: translate(0px,-50%) scale(1);
  width: fit-content;
  height: fit-content;
  transition: 0.25s;
}
#hb_1:hover{
  cursor: pointer;
  transform: translate(0px,-50%) scale(1.025);
}
#hb_1:active{
  cursor: default;
  transform: translate(0px,-50%) scale(1);
}
#hb_circle{
  display: inline-block;
  height: 44px;
  width: 44px;
  border-radius: 100%;
  background-image: url("../Img/hb_circle.jpg") ;
  background-repeat: no-repeat;
  background-size: cover;
}

#hb_text{
  display: inline-block;
  font-size: 13px;
  transform: translate(0px,-100%);
}
#hb_2{
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translate(0px,-50%) scale(1);
  font-size: 13px;
  color: white;
  text-align: center;
  padding-top: 14px;
  background: #2E2E2E;
  border-radius: 11.5px;
  height: 30px;
  width: 113px;
  transition: 0.25s;
}

#hb_2:hover{
  cursor: pointer;
  transform: translate(0px,-50%) scale(1.025);
}
#hb_2:active{
  cursor: default;
  transform: translate(0px,-50%) scale(1);
}

#closex{
  display: none;
  position: fixed;
  z-index: 200;
  top: 10px;
  right: 10px;
  width:50px;
  height: 50px;
  background-image: url("../Img/close.png");
  background-size: cover;
  opacity: 0;
  transition: 0.25s;
  transform: scale(1);
}
#closex:hover{
  transform: scale(1.05);
  cursor: pointer;
  opacity: 1;
}
#closex:active{
  cursor: default;
  opacity: 0.8;
  transform: scale(1);
}
.bg_blank{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transition: 0.25s;
  opacity: 0;
}

#bg_blank1{
}
#pg5{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  color: white;
  background: black;
}
#head_black{
  position: fixed;
  width: 100%;
  height: 150px;
  top: 0px;
  left: 0px;
  transition: 0.25s;
  opacity: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 50%);
  mix-blend-mode: multiply;
}
#bg_white{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #ecedee;
  transition: 0.5s;
  opacity: 0;
  display: none;
}
#bg_gradient{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(135deg, #b2caef, #ede1f3);
  transition: 0.5s;
  opacity: 0;
  display: none;
}
.xtiao_box{
  position: fixed;
  left: 30px;
  top: 50%;
  transform: translate(0px,-110%);
  width: 15px;
  height:50px;
}
.xtiao{
  width: 8px;
  height: 3px;
  border-radius:10px;
  opacity: 0.5;
  background: #2E2E2E;
  margin-bottom: 3px;
  transition: 0.25s;
}

#xtiao_1{
  opacity: 1;
  width: 13px;
}
#xtiao2_1{
  opacity: 1;
  width: 13px;
}



.xtiao2{
  width: 8px;
  height: 3px;
  border-radius:30%;
  opacity: 0.4;
  background:white;
  margin-bottom: 3px;
  transition: 0.25s;
}
.slideup{
  position: fixed;
  bottom:25px;
  left: 50%;
  transform: translate(-50%,0px);
  font-size: 15px;
  color: #bdbdbd ;
  width: 100%;
  text-align: center;
  transition: 0.25s;
  animation:upanimation 0.5s ;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-timing-function:ease-in-out;
}

.slideup:hover{
  cursor: pointer;
}
#slide_bg:hover{
  cursor: pointer;
}

#slideup3{
}

#slideup4{
  animation:upanimation 0.5s infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
}
#textx_10{
  font-family: XM_Bold;
}

#upx{
  width: 40px;
  transform: translate(-50%, -30px);
  opacity: 0.8;
}
#slide_bg{
  position: fixed;
  bottom: 0px;
  height:80px;
  background: black;
  border-radius: 30px 30px 0px 0px;
  width: 100%;
  left: 50%;
  transform: translate(-50%,0px);
  max-width: 500px;
  transition: 0.25s;
}
.up_img{
  position: fixed;
  left: 50%;
  transform: translate(-50%,-130%);
  width: 18px;

}
@keyframes upanimation
{
  0%   { transform: translate(-50%,0px);}
  100% { transform: translate(-50%,5px);}
}

.bg_float{
  position: fixed;
  opacity: 0;
  transition: 0.5s;
}
#bg_float2{
  opacity: 0;
  width: 90%;
  max-width: 700px;
  bottom: 80px;
  right: -50px;
}
#bg_float3{
   opacity: 0;
   width: 100%;
   max-width: 800px;
   bottom: -20px;
   left: 50%;
   transform: translate(-50%,0px);
 }
#float3_1{
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

#float3_2{
  position: fixed;
  width: 28.75%;
  left: 50%;
  bottom: 150px;
  opacity: 0;
  transition: 0.5s;
  transform: translate(-50%,0px);
}
#float3_3{
  position: fixed;
  width: 29.375%;
  left: 50%;
  bottom: 200px;
  opacity: 0;
  transition: 1s;
  transform: translate(-50%,0px);
}
.float4{
  position: fixed;
  opacity: 0;
  top:-3vh;
  right: 0px;
  width: 38vh;
  max-width:500px;
  transition: 0.5s;
}
#float4_1{
  right: -100px;
}

.float5{
  position: fixed;
  opacity: 0;
  width: 80%;
  max-width:500px;
  transition: 0.5s;
}

#float5_1{
  left: -50px;
  top:  0px;
}

#float5_2{
  right: -50px;
  bottom: 0px;
}
.pg_tittle{
  font-size: 32px;
  color: #2E2E2E;
  letter-spacing: -2px;
  line-height: 38px;
  transition: 0.25s;
  opacity: 0;
  transform: translate(0px,20px);
  font-weight: 500;
}

#floattext{
  display: none;
  position: fixed;
  left:30px;
  font-size: 10px;
  color: #414141;
  bottom: 15px;
  transform: translate(-15%,0px) scale(0.8);
}

#tittle_2{
  margin-left: -5px;
}


.pg_text{
  margin-top: 18px;
  font-size: 15px;
  color: #656565;
  letter-spacing: 0.14px;
  line-height: 20px;
  transition: 0.25s;
  opacity: 0;
  transform: translate(0px,20px);
}
.pg_text2{
  margin-top: 10px;
  font-size: 15px;
  color: #656565;
  letter-spacing: 0.14px;
  line-height: 25px;
  transition: 0.25s;
  opacity: 0;
  transform: translate(0px,20px);
}
#tittle_1{
  opacity: 1;
  transform: translate(0px,0px);
}
#text_1{
  opacity: 1;
  transform: translate(0px,0px);
}
#tittle2_1{
  font-size: 18px;
  line-height:25px;
  opacity: 1;
  transform: translate(0px,0px);
  letter-spacing: 1px;
  color: white;
  font-family:XM_Bold;
}
#tittle2_1_2{
  line-height: 32px;
  opacity: 1;
  font-size: 30px;
  white-space: nowrap;
  color: #e6e6e6;
  transform: translate(0px,20px);
  letter-spacing: 0px;
}

#text2_1{
  font-size: 15px;
  margin-top: 30px;
  color: #9e9e9e;
  opacity: 1;
  transform: translate(0px,0px);
  text-align: center;

}
#bg2_box1{
  position: fixed;
  top: 120px;
  width: 90%;
  max-width: 500px;
  left: 50%;
  transform: translate(-50%,0%);
  text-align: center;

}
#bg2_box2{
  position: fixed;
  top: 50%;
  width: 75%;
  max-width: 500px;
  right: 30px;
  transform: translate(0%,-90%);
  text-align: right;
}
#bg_box1{
  position: fixed;
  bottom:95px;
  left: 30px;
  width: 85%;
  max-width: 500px;
}
#bg_box2{
  position: fixed;
  top: 75px;
  width: 70%;
  max-width: 500px;
  left: 30px;
  transition: 0.25s;
  text-align: left;
}
#bg_box3{
  position: fixed;
  top: 155px;
  width: 80%;
  max-width: 500px;
  left: 50%;
  transform: translate(-50%,0px);
  transition: 0.25s;
  text-align: center;
}
#bg_box4{
  position: fixed;
  top:74%;
  width:70%;
  max-width: 500px;
  left: 30px;
  transition: 0.25s;
  text-align: left;
}
#bg_box5{
  position: fixed;
  top: 74%;
  width:70%;
  max-width: 500px;
  left: 30px;
  transition: 0.25s;
  text-align: left;
}
#bg_box6{
  position: fixed;
  top: 74%;
  width:80%;
  max-width: 500px;
  left: 30px;
  transition: 0.25s;
  text-align: left;
}

.pgs{
  display: none;
  opacity: 0;
  transition: 0.25s;
}


#pg3_img1{
  position: fixed;
  left: 50%;
  transform: translate(-50%,0%);
  margin-top: 35px;
  width: 90%;
  max-width: 500px;
  opacity: 0;
  transition: 0.25s;
}

#pg3_img2{
  position: fixed;
  left: 50%;
  transform: translate(-50%,0%);
  width:90%;
  margin-top: 65px;
  max-width: 500px;
  opacity: 0;
  transition: 0.25s;
}

#pg3_box_frame{
  opacity: 1;
  transition: 0.25s;
}
.pg3_box{
  position: fixed;
  left: 50%;
  transform: translate(-50%,0px);
  width: 80%;
  max-width: 400px;
  height: 90px;
  bottom: 20px;
  justify-content: space-around;
  display: flex;
}
.pg3_box_in{
  height: 100%;
  width: 50%;
}
.pg3_in_tittle{
  font-size: 28px;
  font-weight: bold;
  color: #2E2E2E;
  text-align: center;
}
.pg3_in_text{
  color:#656565;
  font-size: 10px;
  text-align: center;

}
#pg4_tittle{
  position: fixed;
  top: 70px;
  left: 30px;
  text-align: left;
}
#pg4_btn{
  position: fixed;
  z-index: 100;
  background: #2E2E2E;
  border-radius: 22px;
  width: 185px;
  height: 40px;
  top: 135px;
  left: 30px;
  font-size: 16px;
  line-height: 40px;
  color: white;
  opacity: 0;
  text-align: center;
  transform: translate(0px,20px) scale(1);
  transition: 0.25s;
}
#pg4_btn:hover{
  cursor: pointer;
  transform: translate(0px,0px) scale(1.05);
}
#pg4_btn:active{
  cursor: default;
  transform: translate(0px,0px) scale(1);
}

#pg4_box{
  position: fixed;
  left: 28%;
  top: 50%;
  height: 500px;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  transform: translate(-50%, -50%) scale(0.85);
  text-align: center;

}
.p4_line{
  position: fixed;
  left: 80px;
  top: 50px;
  width: 20%;
  border: 1px solid #202020;
  transform: scaleY(0.1);
  display: none;
}

.pg4_box_in{
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.8);
  transition: 0.25s;
}
.pg4_in_img{
  margin: auto;
  width: 55px;
  height: 55px;
  background-size: cover;
}
.pg4_in_tittle{
  color: #2E2E2E;
  margin-top: 5px;
  font-size:20px;
  font-family: XM_Bold;

}
.pg4_in_text{
  color: #2c2c2c;
  line-height: 18px;
  margin-top: 5px;
  font-size:10px;
  font-family: XM_Regular;

}
#pg4_text{
  position: fixed;
  bottom: 30px;
  width: 100%;
  font-size:15px;
  color: #2E2E2E;
  text-align: center;
}
#pg4Canvas{
  position: fixed;
  z-index: 50;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: 0.25s;
  display: none;
}


#P4_1{
  position: fixed;
  width: 100%;
  height: 100%;
  transition: 0.25s;
  background: black;
  opacity: 0;
  color: white;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}

#P4_1_tiitle{
  margin-top: 65px;
  font-size: 24px;
  width:100%;
  text-align: center;
  font-family: XM_Bold;
}

#P4_1_text{
  margin-top:5px;
  font-size:14px;
  width:100%;
  text-align: center;
  font-family: XM_Bold;
}
#P4_1_cont{
  font-size:14px;
  margin-left: 5%;
  margin-top: 30px;
  width:90%;
  text-align: center;
  line-height: 25px;
  font-family: XM_Regular;
}
#P4_1_img{
  position: fixed;
  bottom: 0px;
  height:60%;
  left: 50%;
  transform: translate(-50%,0px);
  max-height: 800px;
}

#pg5_tittle{
  display: none;
  position: fixed;
  top: 70px;
  left: 30px;
  color: white;
  text-align: left;
}

#pg5_box{
  position: fixed;
  top: 100px;
  transform: translate(0px,0%);
  width: 100%;
}
.pg5_box_in{
  transform: translate(0px, 0px);
  opacity: 0;
  transition: 0.1s;
  margin-bottom: 35px;
  font-size:15px;
}

.pg5_box_in:hover{
  cursor: pointer;
}
/*
.pg5_box_in:active{
  cursor: default;
}*/


.pg5_in_tittle{
  width: 100%;
  text-align: center;
  opacity: 1;
  transition: 0s;
  font-family: XM_Bold;
}
.pg5_in_text{
  color: white;
  opacity: 0.8;
  margin-top: 5px;
  font-size:10px;
  line-height: 20px;
  text-align: left;
}

#P5_P1{
  position: fixed;
  left: -100%;
  opacity:0 ;
  bottom: 12%;
  width:35%;
  transition: 0.25s;
  max-width: 300px;
  display: none;
}

#P5_P2{
  position: fixed;
  right: -100%;
  opacity: 0;
  bottom: 12%;
  width:50%;
  transition: 0.25s;
  max-width: 300px;
  display: none;
}
.P5_bgimg{
  position: fixed;
  bottom: 0px;
  height: 100%;
  left: 50%;
  opacity: 0;
  transition: 0.25s;
  transform: translate(-50%,0px);
}

#pg6{
  opacity: 0;
  display: none;
  transition: 0.25s;
}
#pg6_box{
  position: fixed;
  left: 50%;
  bottom: 50px;
  width: 90%;
  max-width: 200px;
  transform: translate(-50%,0px);
  justify-content: space-between;
  display: flex;
}
.pg6_text{
  opacity: 0;
  font-size: 18px;
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translate(-50%,0px);
  width: 100%;
  text-align: center;
}
.pg6_box_in{
  width: 40px;
  height: 40px;
  background-size: cover;
  opacity: 0;
  transition: 0.25s;
  transform:translate(1000%,0px) scale(1);
}
.pg6_box_in:hover{
  cursor: pointer;
}


/**------------------------------*/

#img_page{
  display: none;
  width: 90%;
  margin-top: 40px;
  margin-left: 5%;
  margin-bottom: 30px;
  opacity: 1;
  transition: 0.25s;
}

.img_box{
  float: left;
  width: 48%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;

}
#img_box_right{
  float: right;
}
.img_source{
  width: 100%;
}
.img_text{
  color: white;
  transform: translate(10%,-200%);
}

#img_up{
  display: none;
  top: 0px;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  transition: 0.25s;
}
.img_frame{
  opacity: 1;
  transition: 0.25s;
  font-size: 15px;
}
.img_frame:hover{
  opacity: 0.9;
  cursor: pointer;
}
.img_frame_up{
  max-width: 700px;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 90%;
  transform: translate(-50%,-50%);
  font-size: 20px;
}
.img_frame_up:hover{
  cursor: pointer;
}