#intro_3 { top: 0; left: 0; width: 100%;  z-index: 12;
  background: rgb(255,255,255);
background: linear-gradient(360deg, rgba(255,255,255,1) 0%, rgba(244,223,223,1) 48%, rgba(232,190,190,1) 100%);
}
#intro_3 .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_3.editor {position: absolute;  height: 700px;}
#intro_3.card {position: fixed;  height: 100vh; width: 420px; left: 50%; transform: translateX(-50%);}
#intro_3 .frame {width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.5); z-index: 13;}
#intro_3 .inner {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 14;}
#intro_3 .title p {color: #c36c6c;}
#intro_3 .title p:nth-of-type(1) {font-size: 16px;}
#intro_3 .title p:nth-of-type(2) {margin:10px 0; font-size: 13px; color: #d69696;}
#intro_3 .title p:nth-of-type(3) {font-size: 16px;}
#intro_3 .title span {display: inline-block; vertical-align: middle; color: #c36c6c;}
#intro_3 p.point {margin:10px 0 0 0; color: #c36c6c;}

/* @keyframes up {
  0%{opacity: 0; transform: translateY(20px);}
  100%{opacity: 1; transform: translateY(0px);}
} */
@media screen and (max-width:1700px){
  #intro_3.editor {height: 600px;}
}
@media screen and (max-width:767px){
  #intro_3.card {width:100%; left:0; transform:none;}
  #intro_3.editor {height: calc(100vh - 60px)}
}
#intro_3 .title p,
#intro_3 .point {
  visibility: hidden;
}