#intro_2 { top: 0; left: 0; width: 100%;  z-index: 11;
  background: rgb(255,255,255);
background: linear-gradient(360deg, rgba(255,255,255,1) 0%, rgba(244,223,223,1) 48%, rgba(231,190,232,1) 100%);
}
#intro_2 .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%); padding: 20px; z-index: 12;}
#intro_2.editor {position: absolute;  height: 700px;}
#intro_2.card {position: fixed;  height: 100vh; width: 420px; left: 50%; transform: translateX(-50%);}
#intro_2 .frame {width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.5); z-index: 13;}
#intro_2 .inner {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 14;}
#intro_2 .title p {color: #c36c6c;}
#intro_2 .title p:nth-of-type(1) {opacity: 0; transform: translateY(20px); animation: up 1.5s .5s forwards; font-size: 16px;}
#intro_2 .title img {width: 70px; margin: 15px auto; animation: up 1.5s .1s forwards; opacity: 0;}
#intro_2 .title span {display: inline-block; vertical-align: middle; color: #a30c5f;}
#intro_2 p.point {margin:20px 0 0 0; color: #a30c5f; opacity: 0; transform: translateY(20px); animation: up 1s .8s forwards;}

@keyframes up {
  0%{opacity: 0; transform: translateY(20px);}
  100%{opacity: 1; transform: translateY(0px);}
}
@media screen and (max-width:1700px){
  #intro_2.editor {height: 600px;}
}
@media screen and (max-width:767px){
  #intro_2.card {width:100%;}
  #intro_2.editor {height: calc(100vh - 60px)}
}