#intro_1 { top: 0; left: 0; width: 100%; z-index: 11; padding: 20px;
  background: rgb(255,255,255);
background: linear-gradient(360deg, rgba(255,255,255,1) 0%, rgba(222,240,252,1) 100%);}
#intro_1 .theme_gra {position: absolute; top:0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);}
#intro_1.editor {position: absolute;  height: 700px;}
#intro_1.card {position: fixed;  height: 100vh; width: 420px; left: 50%; transform: translateX(-50%);}
#intro_1 .inner {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 12}
#intro_1 .title {opacity: 0; transform: translateY(20px); animation: up 1s 1s forwards;}
#intro_1 .title p {display: inline-block; }
#intro_1 .title span {display: inline-block; vertical-align: middle; color: #d1e1f5;}
#intro_1 .title span i {color: #d1e1f5;}
#intro_1 p.point {margin:10px 0 0 0; color: #777; opacity: 0; transform: translateY(20px); animation: up 1s 2s forwards;}

@keyframes up {
  0%{opacity: 0; transform: translateY(20px);}
  100%{opacity: 1; transform: translateY(0px);}
}

@media screen and (max-width:1700px){
  #intro_1.editor {height: 600px;}
}
@media screen and (max-width:767px){
  #intro_1.card {width:100%;}
}