.portfolio-text p,
.portfolio-text p a {
  color: #333333;
}

.portfolio-text p a:hover {
  text-decoration: none;
  color: #ef4b6c;
}

.portfolio-text p strong {
  font-weight: 600;
}

h3.lined-title {
  position: relative;
  margin: 0;
  padding: 16px 0 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  color: #1C0637;
}

h3.lined-title.text-white {
  color: #FFFFFF;
}

h3.lined-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background-color: #E07BFF;
}

/* Hero */

.section-dongengin-hero {
  padding: 147px 0 330px;
  background-image: linear-gradient(2.71deg, #E1D3FF 19.41%, #F8E0FE 42.02%, #EEF1F6 88.59%);
}

.dongengin-hero-wrapper {
  position: relative;
}

.dongengin-hero-title h1 {
  margin: 0;
  font-weight: 700;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: -1px;
  color: #1C0637;
}

.dongengin-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  grid-gap: 30px;
  margin: 10px 0 0;
}

.dongengin-hero-description {
  width: 100%;
}

.dongengin-hero-description p {
  margin: 0;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0.65px;
  color: #333333;
}

.dongengin-hero-info {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-gap: 100px;
}

.dongengin-hero-group h2 {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 25px;
  color: #1C0637;
}

.dongengin-hero-group ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.dongengin-hero-group h2+ul {
  margin: 5px 0 0;
}

.dongengin-hero-group ul li {
  font-size: 13px;
  line-height: 21px;
  color: #333333;
}

.dongengin-bg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dongengin-bg-wave {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 3602px;
}

.dongengin-hero-desktop {
  position: absolute;
  bottom: -38px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 720px;
}

.dongengin-hero-mobile {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 451px;
}

.dongengin-top-bg {
  position: absolute;
  top: 0;
  left: auto;
  right: -60px;
  transform: translateX(-0%);
  display: block;
  width: 640px;
}

/* Goal */

.section-dongengin-goal {
  padding: 50px 0;
}

.dongengin-goal-image {
  display: flex;
  grid-gap: 8px;
  width: calc(100% + 40px);
  margin: 48px 0 0;
}

.dongengin-goal-image img {
  display: block;
  object-fit: cover;
}

.dongengin-goal-image img:nth-child(1) {
  width: calc(60% - 4px);
  height: 116px;
}

.dongengin-goal-image img:nth-child(2) {
  width: calc(40% - 4px);
  height: 116px;
}

/* Research */

.section-dongengin-research {
  position: relative;
  padding: 50px 0;
  background-image: linear-gradient(173.53deg, rgba(243, 210, 253, 0.2) -3.44%, rgba(202, 176, 248, 0.2) 99.27%);
}

.dongengin-research-ornament {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dongengin-research-ornament img {
  position: absolute;
  top: 106px;
  left: calc(50% + 50px);
  height: 120px;
}

.dongengin-research-title {
  max-width: 908px;
}

.dongengin-research-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  margin: 38px 0 0;
}

.dongengin-research-item {
  position: relative;
}

.dongengin-research-item img {
  display: block;
  width: 95px;
  height: 95px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0px 20px 40px 0px #AC8BD333;
}

.dongengin-research-item h3 {
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0.5px;
  text-align: center;
  color: #18173C;
}

.dongengin-research-item img+h3 {
  margin: 16px 0 0;
}

/* Flow */

.section-dongengin-flow {
  padding: 50px 0;
  background-color: #FAF6FF;
}

.dongengin-flow-group p {
  margin: 0;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0.63px;
  color: #333333;
}

.dongengin-flow-group h3+p {
  margin: 20px 0 0;
}

.dongengin-flow-group p+p {
  margin: 20px 0 0;
}

.dongengin-flow-group+.dongengin-flow-group {
  margin: 130px 0 0;
}

.dongengin-flow-image {
  margin: 72px 0 0;
}

.dongengin-flow-image img {
  display: block;
  width: 100%;
}

/* Mascot */

.section-dongengin-mascot {
  padding: 50px 0 0;
}

.section-dongengin-mascot::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 54px;
  background-color: #66368B;
}

.dongengin-mascot-image {
  margin: 28px 0 0;
}

.dongengin-mascot-image img {
  display: block;
  width: 100%;
  max-width: 778px;
  margin: 0 auto;
}

.dongengin-mascot-result {
  position: relative;
  margin: 71px 0 0;
  background-image: linear-gradient(168.7deg, #E1D3FF -5.62%, #F8E0FE 15.39%, #FBF0FF 67.18%);
  border-radius: 12px;
}

.dongengin-mascot-label {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background-color: #66368B;
  border-radius: 100px;
}

.dongengin-mascot-label p {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  color: #EDEDED;
}

.dongengin-mascot-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 16px;
  padding: 32px;
  border-radius: 12px;
}

.dongengin-mascot-wave {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
}

.dongengin-mascot-icon {
  position: relative;
  z-index: 1;
}

.dongengin-mascot-icon img {
  display: block;
  width: 68px;
}

.dongengin-mascot-text h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 700;
  font-size: 25px;
  line-height: 120%;
  color: #AB3ECD;
}

.dongengin-mascot-text p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 8px;
  line-height: 13px;
  color: #252424;
}

.dongengin-mascot-text h3+p {
  margin: 8px 0 0;
}

/* UI */

.section-dongengin-ui {
  padding: 57px 0 43px;
  background-color: #66368B;
  background-image: url('../images/dongengin/ui-design.png'), url('../images/dongengin/multi-devices-support.png');
  background-repeat: no-repeat;
  background-position: center top, center bottom;
  background-size: 576px auto, 750px auto;
}

.dongengin-ui-design {
  display: grid;
  align-items: flex-end;
  grid-template-columns: 88px 252px;
  grid-gap: 20px;
  margin: 30px auto 0;
}

.dongengin-ui-phone {
  position: relative;
  width: 100%;
  padding: 221.53% 0 0;
}

.dongengin-ui-phone::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 16px;
}

.dongengin-ui-phone-rear {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-image: url('../images/dongengin/ui-phone-list-placeholder.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  animation-name: uiPhone;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-phone-front {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-image: url('../images/dongengin/ui-phone-list-text.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  animation-name: uiPhoneFront;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-tablet {
  position: relative;
  width: 100%;
  padding: 70.7% 0 0;
}

.dongengin-ui-tablet::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 16px;
}

.dongengin-ui-tablet-rear {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-image: url('../images/dongengin/ui-tablet-list-placeholder.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  animation-name: uiTablet;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-tablet-front {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-image: url('../images/dongengin/ui-tablet-list-text.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  animation-name: uiTabletFront;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-devices {
  margin: 80px 0 0;
}

.dongengin-ui-devices p {
  margin: 0;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0.63px;
}

.dongengin-ui-devices h3+p {
  margin: 20px 0 0;
}

.flower-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-image: url('../images/dongengin/flower.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.flower-animation.flower-1 {
  display: none;
  top: 227px;
  left: calc(50% + 608px);
  animation-name: uiFlower1;
  animation-duration: 6s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotateZ(0deg);
  opacity: 0;
}

.flower-animation.flower-2 {
  display: none;
  top: 489px;
  left: calc(50% - 373px);
  width: 20px;
  height: 20px;
  animation-name: uiFlower2;
  animation-duration: 6s;
  animation-delay: 0.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotateZ(0deg);
  opacity: 0;
}

.flower-animation.flower-3 {
  display: none;
  top: 1179px;
  left: calc(50% + 604px);
  width: 20px;
  height: 20px;
  animation-name: uiFlower3;
  animation-duration: 6s;
  animation-delay: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotateZ(0deg);
  opacity: 0;
}

.flower-animation.flower-4 {
  top: 214px;
  left: calc(50% - 60px);
  width: 16px;
  height: 16px;
  animation-name: uiFlower4;
  animation-duration: 6s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotateZ(0deg);
  opacity: 0;
}

.flower-animation.flower-5 {
  top: 281px;
  left: calc(50% + 120px);
  width: 8px;
  height: 8px;
  animation-name: uiFlower5;
  animation-duration: 6s;
  animation-delay: 0.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotateZ(0deg);
  opacity: 0;
}

.flower-animation.flower-6 {
  top: 500px;
  left: calc(50% - 120px);
  width: 12px;
  height: 12px;
  animation-name: uiFlower6;
  animation-duration: 6s;
  animation-delay: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotateZ(0deg);
  opacity: 0;
}

.star-animation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 66px;
  height: 66px;
  background-image: url('../images/dongengin/star.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.star-animation.star-1 {
  bottom: 480px;
  left: calc(50% + 160px);
  width: 12px;
  height: 12px;
  animation-name: uiStar1;
  animation-duration: 6s;
  animation-delay: 0.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0;
}

.star-animation.star-2 {
  bottom: 350px;
  left: calc(50% - 180px);
  width: 17px;
  height: 17px;
  animation-name: uiStar2;
  animation-duration: 6s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0;
}

.star-animation.star-3 {
  bottom: 320px;
  left: calc(50% + 120px);
  width: 33px;
  height: 33px;
  animation-name: uiStar3;
  animation-duration: 6s;
  animation-delay: 0.75s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.star-animation.star-4 {
  bottom: 210px;
  left: calc(50% - 150px);
  width: 33px;
  height: 33px;
  animation-name: uiStar4;
  animation-duration: 6s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.star-animation.star-5 {
  bottom: 200px;
  left: calc(50% + 170px);
  width: 17px;
  height: 17px;
  animation-name: uiStar5;
  animation-duration: 6s;
  animation-delay: 1.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  opacity: 0;
}

.dongengin-ui-animation {
  position: relative;
  width: 100%;
  max-width: 928px;
  height: 320px;
  margin: 40px auto 0;
}

.dongengin-ui-multi-device {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.375);
  padding: 8px;
  background-color: #FFFFFF;
  border-radius: 44px;
  animation-name: multiDevices;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-multi-device-bg {
  width: 100%;
  height: 100%;
}

.dongengin-ui-multi-device-bg>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
}

.dongengin-ui-multi-device-home {
  position: absolute;
  top: 20px;
  left: 20px;
  animation-name: multiDevicesButtonTop;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-multi-device-home>img {
  display: block;
  width: 100%;
}

.dongengin-ui-multi-device-progress {
  position: absolute;
  top: 41px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 3px;
  width: calc(100% - 176px);
  animation-name: multiDevicesProgress;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-multi-device-progress div {
  width: calc(calc(100% - 42px) / 15);
  height: 6px;
  background-color: #E07BFF;
  border-radius: 3px;
  opacity: 0.3;
}

.dongengin-ui-multi-device-progress div:first-child {
  opacity: 1;
}

.dongengin-ui-multi-device-translate {
  position: absolute;
  top: 20px;
  right: 20px;
  animation-name: multiDevicesButtonTop;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-multi-device-translate>img {
  display: block;
  width: 100%;
}

.dongengin-ui-multi-device-story {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  padding: 18px 44px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 46px;
  animation-name: multiDevicesStory;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-multi-device-story p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  color: #211E1E;
  animation-name: multiDevicesStoryText;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-multi-device-story img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
}

.dongengin-ui-multi-device-story img:nth-child(2) {
  left: -25px;
  animation-name: multiDevicesStoryPrev;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-multi-device-story img:nth-child(3) {
  right: -25px;
  animation-name: multiDevicesStoryNext;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dongengin-ui-ornament {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dongengin-ui-ornament img {
  position: absolute;
}

.dongengin-ui-ornament img:nth-child(1) {
  bottom: -10px;
  left: -155px;
}

.dongengin-ui-ornament img:nth-child(2) {
  right: -168px;
  bottom: -45px;
}

/* Animation */

.section-dongengin-animation {
  padding: 50px 0;
  background-color: #9B62C8;
}

.dongengin-animation-wrapper p {
  margin: 0;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0.63px;
}

.dongengin-animation-wrapper h3+p {
  margin: 20px 0 0;
}

.dongengin-animation-image {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  margin: 46px 0 0;
}

.dongengin-animation-video {
  position: relative;
}

.dongengin-animation-video img {
  display: block;
  width: 100%;
}

.dongengin-lottie {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.dongengin-lottie.dongengin-lottie-owl {
  width: 75%;
  height: 75%;
}

.dongengin-animation-ornament {
  position: absolute;
}

.dongengin-animation-ornament.mirror {
  top: -18px;
  left: -15px;
  width: 63px;
}

.dongengin-animation-ornament.butterfly {
  top: -34px;
  right: -20px;
  width: 69px;
}

.dongengin-animation-ornament.leaf-left {
  top: -10px;
  left: -60px;
  width: 120px;
}

.dongengin-animation-ornament.leaf-right {
  top: -10px;
  right: -60px;
  width: 120px;
}

.dongengin-animation-images {
  position: relative;
  margin: 64px 0 0;
}

.dongengin-animation-mobile {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 9px;
}

.dongengin-animation-mobile-frame {
  position: relative;
  width: 100%;
  padding: 206.81818181% 0 0;
}

.dongengin-animation-mobile-frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 16px;
}

.dongengin-animation-mobile-frame img {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px) !important;
  object-fit: cover;
}

.dongengin-animation-mobile-video {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  overflow: hidden;
  border-radius: 16px;
}

.dongengin-animation-mobile-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

.dongengin-animation-mobile img {
  display: block;
  width: 100%;
}

/* Illustration */

.section-dongengin-illustration {
  padding: 50px 0;
}

.dongengin-illustration-image {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin: 120px 0 0;
}

.dongengin-illustration-image img {
  position: relative;
  display: block;
  width: 100%;
}

.dongengin-illustration-image img:nth-child(1) {
  top: -47px;
}

/* Development */

.section-dongengin-development {
  padding: 50px 0 86px;
}

.dongengin-development-image {
  position: relative;
  margin: 60px 0 0;
}

.dongengin-development-image img {
  display: block;
  width: 100%;
}

.dongengin-development-image img:nth-child(1) {
  border-radius: 10px;
  box-shadow: 0px 17.97px 35.95px 0px #00000040;
}

.dongengin-development-image img:nth-child(2) {
  position: absolute;
  top: -50px;
  left: 50px;
  width: 78px;
  height: 78px;
  border-radius: 100%;
  box-shadow: 32.64px 32.64px 65.28px 0px #233E5724;
}

.dongengin-development-image img:nth-child(3) {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  box-shadow: 45.76px 45.76px 91.52px 0px #233E5724;
}

.dongengin-development-image img:nth-child(4) {
  position: absolute;
  top: -24px;
  right: -8px;
  width: 58px;
  height: 58px;
  border-radius: 100%;
  box-shadow: 26.63px 26.63px 53.27px 0px #233E5724;
}

.dongengin-development-image img:nth-child(5) {
  position: absolute;
  right: 45px;
  bottom: -12px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  box-shadow: 25.68px 25.68px 51.36px 0px #233E5724;
}

/* Footer */

.section-dongengin-footer {
  padding: 88px 0 50px;
  background-image: linear-gradient(193.83deg, rgba(254, 252, 255, 0.5) -3.04%, rgba(209, 189, 242, 0.5) 67.45%, rgba(189, 162, 237, 0.5) 90.12%);
}

.dongengin-footer {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dongengin-footer-wave {
  position: absolute;
  bottom: 264px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 281px;
}

.dongengin-download-wrapper {
  position: relative;
  overflow: hidden;
  padding: 60px 30px 120px;
  background-image: url('../images/dongengin/dongengin-download.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
}

.dongengin-download-bg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dongengin-download-bg img {
  position: absolute;
}

.dongengin-download-bg img:nth-child(1) {
  top: 0;
  left: 0;
  width: 100px;
}

.dongengin-download-bg img:nth-child(2) {
  top: 0;
  right: 0;
  width: 100px;
}

.dongengin-download-bg img:nth-child(3) {
  bottom: 0;
  left: 0;
  width: 100px;
}

.dongengin-download-bg img:nth-child(4) {
  bottom: 0;
  right: 0;
  width: 100px;
}

.dongengin-download-wrapper>img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100px;
  margin: 0 auto;
}

.dongengin-download-wrapper h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 700;
  font-size: 32px;
  line-height: 120%;
  text-align: center;
}

.dongengin-download-wrapper h3 span {
  color: #AB3ECD;
}

.dongengin-download-wrapper>img+h3 {
  margin: 32px 0 0;
}

.dongengin-download-wrapper p {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 778px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0.63px;
  text-align: center;
}

.dongengin-download-wrapper h3+p {
  margin: 24px auto 0;
}

.dongengin-download-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-gap: 12px;
  margin: 48px 0 0;
}

.dongengin-download-buttons .btn-download {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 298px;
  padding: 18px 20px;
  border-radius: 100px;
  box-shadow: none;
}

.dongengin-download-buttons .btn-download img {
  display: block;
  max-height: 24px;
}

.dongengin-contact {
  margin: 175px 0 0;
}

.btn.btn-dongengin {
  height: auto;
  padding: 22px;
  color: #FFFFFF;
  background-color: #DF80FC;
  border-radius: 100px;
  box-shadow: none;
}

.projects-item.dongengin {
  width: 100%;
  padding: 30px 30px 320px;
  background-image: url(../images/projects-dongengin-image-mobile.png), linear-gradient(244.47deg, #E1D3FF 16.65%, #F8E0FE 43.56%, #EEF1F6 98.99%);
  background-repeat: no-repeat;
  background-size: auto 360px, 100%;
  background-position: center bottom, center;
  box-shadow: 0px 10px 30px rgba(91, 111, 137, 0.05);
}

.projects-item.dongengin .projects-logo {
  height: 35px;
}

.projects-item.dongengin .projects-detail {
  max-width: 100%;
}

.projects-item.dongengin .projects-button .btn {
  background-color: #AF2EFC;
}

.portfolio-footer-left h3 {
  text-align: center;
}

.portfolio-footer-left p {
  justify-content: center;
}

.modal.modal-user-flow .modal-dialog {
  width: 100%;
  max-width: 1190px;
  margin: 0 auto;
}

.modal.modal-user-flow .modal-content {
  background-color: transparent;
  border: 0;
  padding: 0 20px;
}

.modal-flow {
  position: relative;
  width: 100%;
  max-width: 1150px;
  height: auto;
  max-height: calc(100vh - 160px);
  margin: 80px 0;
  background-color: #FFFFFF;
  border-radius: 24px;
}

.modal-flow-wrapper {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 160px);
  padding: 40px 20px;
  border-radius: 24px;
}

.modal-flow-wrapper::-webkit-scrollbar {
  display: none;
}

.modal-flow-wrapper > img {
  max-width: 1110px;
}

.modal-flow-close {
  cursor: pointer;
  position: absolute;
  top: -42px;
  right: 0;
  width: 30px;
  height: 30px;
}

.modal-flow-close img {
  display: block;
  width: 30px;
}

@media (min-width: 576px) {
  .dongengin-hero-desktop {
    display: block;
  }

  .dongengin-hero-mobile {
    display: none;
  }

  .dongengin-top-bg {
    left: 50%;
    transform: translateX(-50%);
    width: 112.777778%;
  }

  .dongengin-goal-image {
    grid-gap: 20px;
    margin: 70px 0 0;
  }

  .dongengin-goal-image img:nth-child(1) {
    width: calc(60% - 10px);
    height: 220px;
  }

  .dongengin-goal-image img:nth-child(2) {
    width: calc(40% - 10px);
    height: 220px;
  }

  .dongengin-ui-design {
    grid-template-columns: 130px 372px;
    margin: 60px auto 0;
  }

  .dongengin-ui-devices {
    margin: 120px 0 0;
  }
}

@media (min-width: 768px) {
  .projects-item.dongengin {
    padding: 30px 30px 90px;
    background-image: url(../images/projects-dongengin-image.png), linear-gradient(244.47deg, #E1D3FF 16.65%, #F8E0FE 43.56%, #EEF1F6 98.99%);
    background-size: auto 100%, 100%;
    background-position: right center, center;
  }

  .projects-item.dongengin .projects-detail {
    max-width: 50%;
  }

  .section-dongengin-hero {
    padding: 147px 0 530px;
  }

  .section-dongengin-ui {
    padding: 120px 0 60px;
    background-size: 960px auto, 1200px auto;
  }

  .dongengin-hero-title h1 {
    font-size: 105px;
    line-height: 105px;
    letter-spacing: -3px;
  }

  .dongengin-hero-text {
    margin: 50px 0 0;
  }

  .dongengin-hero-description p {
    font-size: 20px;
    line-height: 36px;
  }

  .dongengin-hero-group h2 {
    font-size: 25px;
  }

  .dongengin-hero-group h2+ul {
    margin: 15px 0 0;
  }

  .dongengin-hero-group ul li {
    font-size: 20px;
    line-height: 30px;
  }

  .dongengin-hero-desktop {
    bottom: -62px;
    width: 1200px;
  }

  .dongengin-goal-image {
    width: calc(100% + 60px);
  }

  .dongengin-goal-image img:nth-child(1) {
    height: 256px;
  }

  .dongengin-goal-image img:nth-child(2) {
    height: 256px;
  }

  .dongengin-research-wrapper {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 50px;
    margin: 112px 0 0;
  }

  .section-dongengin-mascot::before {
    height: 161px;
  }

  .dongengin-mascot-image {
    margin: 112px 0 0;
  }

  .dongengin-mascot-result {
    margin: 146px 0 0;
    border-radius: 32px;
  }

  .dongengin-mascot-wrapper {
    grid-gap: 32px;
    padding: 48px;
    border-radius: 32px;
  }

  .dongengin-mascot-wave {
    width: 2519px;
  }

  .dongengin-mascot-icon img {
    width: 128px;
  }

  .dongengin-mascot-text h3 {
    font-size: 40px;
    line-height: 48px;
  }

  .dongengin-mascot-text p {
    font-size: 20px;
    line-height: 32px;
  }

  .dongengin-mascot-text h3+p {
    margin: 16px 0 0;
  }

  .dongengin-animation-image {
    grid-gap: 32px;
    margin: 118px 0 0;
  }

  .dongengin-download-wrapper {
    padding: 68px 150px 188px;
  }

  .dongengin-download-wrapper>img {
    max-width: 194px;
  }

  .dongengin-download-wrapper h3 {
    font-size: 50px;
    line-height: 60px;
  }

  .dongengin-download-wrapper p {
    font-size: 20px;
    line-height: 35px;
  }

  .dongengin-download-wrapper h3+p {
    margin: 30px auto 0;
  }

  .dongengin-download-buttons {
    flex-direction: row;
  }

  .dongengin-download-buttons .btn-download {
    padding: 20px;
  }
  
  .dongengin-download-buttons .btn-download img {
    max-height: 32px;
  }

  .dongengin-animation-mobile {
    grid-gap: 18px;
  }

  .dongengin-animation-mobile-frame::before {
    border-radius: 24px;
  }

  .dongengin-animation-mobile-frame img {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
  }

  .dongengin-animation-mobile-video {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 16px;
  }

  .dongengin-development-image img:nth-child(1) {
    border-radius: 18px;
  }

  .dongengin-download-bg img:nth-child(1) {
    width: auto;
  }

  .dongengin-download-bg img:nth-child(2) {
    width: auto;
  }

  .dongengin-download-bg img:nth-child(3) {
    width: auto;
  }

  .dongengin-download-bg img:nth-child(4) {
    width: auto;
  }

  .dongengin-development-image img:nth-child(2) {
    top: -64px;
    left: 77px;
    width: 128px;
    height: 128px;
  }

  .dongengin-development-image img:nth-child(3) {
    bottom: -82px;
    left: 354px;
    width: 118px;
    height: 118px;
  }

  .dongengin-development-image img:nth-child(4) {
    top: -66px;
    right: 23px;
    width: 76px;
    height: 76px;
  }

  .dongengin-development-image img:nth-child(5) {
    right: -29px;
    bottom: 94px;
    width: 72px;
    height: 72px;
  }

  .dongengin-ui-design {
    grid-template-columns: 160px 458px;
    margin: 90px auto 0;
  }

  .dongengin-ui-phone::before {
    border-radius: 26px;
  }

  .dongengin-ui-phone-rear {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 18px;
  }

  .dongengin-ui-phone-front {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 18px;
  }

  .dongengin-ui-tablet::before {
    border-radius: 26px;
  }

  .dongengin-ui-tablet-rear {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 18px;
  }

  .dongengin-ui-tablet-front {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 18px;
  }

  .dongengin-research-ornament img {
    position: absolute;
    left: calc(50% + 128px);
  }

  .dongengin-ui-devices {
    margin: 160px 0 0;
  }

  .dongengin-ui-animation {
    height: 480px;
  }

  .dongengin-ui-multi-device {
    transform: translate(-50%, -50%) scale(0.5);
  }

  .star-animation.star-1 {
    bottom: 640px;
    left: calc(50% + 320px);
    width: 18px;
    height: 18px;
  }

  .star-animation.star-2 {
    bottom: 480px;
    left: calc(50% - 240px);
    width: 24px;
    height: 24px;
  }

  .star-animation.star-3 {
    bottom: 450px;
    left: calc(50% + 240px);
    width: 44px;
    height: 44px;
  }

  .star-animation.star-4 {
    bottom: 320px;
    left: calc(50% - 367px);
    width: 44px;
    height: 44px;
  }

  .star-animation.star-5 {
    bottom: 300px;
    left: calc(50% + 320px);
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 992px) {
  .section-dongengin-hero {
    padding: 200px 0 626px;
  }

  .section-dongengin-goal {
    padding: 120px 0;
  }

  .section-dongengin-research {
    padding: 160px 0 120px;
  }

  .section-dongengin-flow {
    padding: 130px 0 135px;
  }

  .section-dongengin-mascot {
    padding: 120px 0 0;
  }

  .section-dongengin-animation {
    padding: 120px 0 112px;
  }

  .section-dongengin-development {
    padding: 120px 0 192px;
  }

  .section-dongengin-ui {
    padding: 120px 0;
    background-size: 1440px auto, 1440px auto;
  }

  .section-dongengin-illustration {
    padding: 120px 0;
  }

  .dongengin-hero-description {
    max-width: 520px;
  }

  h3.lined-title {
    font-size: 40px;
    line-height: 50px;
  }

  .projects-item.dongengin {
    padding: 50px;
  }

  .dongengin-hero-text {
    flex-direction: row;
  }

  .dongengin-research-item img {
    width: 150px;
    height: 150px;
  }

  .dongengin-research-item h3 {
    font-size: 16px;
    line-height: 24px;
  }

  .dongengin-research-item img+h3 {
    margin: 25px 0 0;
  }

  .dongengin-animation-ornament.mirror {
    top: 21px;
    left: -62px;
    width: 125px;
  }

  .dongengin-animation-ornament.butterfly {
    top: -34px;
    right: -52px;
    width: 95px;
  }

  .dongengin-animation-ornament.leaf-left {
    top: -69px;
    left: -179px;
    width: 286px;
  }

  .dongengin-animation-ornament.leaf-right {
    top: -58px;
    right: -200px;
    width: 358px;
  }

  .dongengin-ui-design {
    grid-gap: 50px;
    grid-template-columns: 200px 572px;
    margin: 120px auto 0;
  }

  .dongengin-research-ornament img {
    position: absolute;
    top: 246px;
    left: calc(50% + 336px);
    height: 180px;
  }

  .dongengin-ui-devices {
    margin: 200px 0 0;
  }

  .dongengin-ui-animation {
    height: 693px;
  }

  .dongengin-ui-multi-device {
    transform: translate(-50%, -50%) scale(0.75);
  }

  .star-animation.star-1 {
    bottom: 860px;
    left: calc(50% + 480px);
    width: 24px;
    height: 24px;
  }

  .star-animation.star-2 {
    bottom: 720px;
    left: calc(50% - 320px);
    width: 30px;
    height: 30px;
  }

  .star-animation.star-3 {
    bottom: 640px;
    left: calc(50% + 360px);
    width: 56px;
    height: 56px;
  }

  .star-animation.star-4 {
    bottom: 400px;
    left: calc(50% - 400px);
    width: 56px;
    height: 56px;
  }

  .star-animation.star-5 {
    bottom: 360px;
    left: calc(50% + 400px);
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 1200px) {
  .section-dongengin-ui {
    padding: 120px 0 200px;
    background-size: 1440px auto, 2130px auto;
  }

  .projects-item.dongengin {
    background-size: cover, 100%;
    background-position: center;
  }

  .projects-item.dongengin .projects-detail {
    max-width: 589px;
  }

  .projects-item.dongengin .projects-detail p {
    max-width: 432px;
  }

  .dongengin-hero-desktop {
    bottom: -75px;
    width: 1440px;
  }

  .dongengin-goal-image {
    width: 1275px;
    margin: 70px 0 0;
  }

  .dongengin-goal-image img:nth-child(1) {
    width: 753px;
    height: 418px;
  }

  .dongengin-goal-image img:nth-child(2) {
    width: 502px;
    height: 418px;
  }

  .dongengin-animation-wrapper p {
    font-size: 20px;
    line-height: 35px;
  }

  .dongengin-animation-wrapper h3+p {
    margin: 44px 0 0;
  }

  .dongengin-flow-group p {
    font-size: 20px;
    line-height: 35px;
  }

  .dongengin-flow-group h3+p {
    margin: 44px 0 0;
  }

  .dongengin-flow-group p+p {
    margin: 35px 0 0;
  }

  .dongengin-ui-devices p {
    font-size: 20px;
    line-height: 35px;
  }

  .dongengin-ui-devices h3+p {
    margin: 44px 0 0;
  }

  .portfolio-footer-left h3 {
    text-align: left;
  }

  .portfolio-footer-left p {
    /* justify-content: flex-start; */
  }

  .dongengin-mascot-wrapper {
    grid-gap: 48px;
    padding: 66px;
  }

  .dongengin-mascot-label {
    top: -30px;
    padding: 14px 50px;
    border-radius: 100px;
  }

  .dongengin-mascot-label p {
    font-size: 24px;
    line-height: 36px;
  }

  .dongengin-mascot-icon img {
    width: 218px;
  }

  .dongengin-mascot-text h3 {
    font-size: 80px;
    line-height: 96px;
  }

  .dongengin-mascot-text p {
    font-size: 24px;
    line-height: 42px;
  }

  .dongengin-mascot-text h3+p {
    margin: 24px 0 0;
  }

  .dongengin-contact {
    margin: 335px 0 0;
  }

  .dongengin-illustration-image {
    grid-gap: 80px;
    margin: 272px 0 0;
  }

  .dongengin-illustration-image img:nth-child(1) {
    top: -200px;
  }

  .dongengin-animation-mobile {
    grid-gap: 27px;
  }

  .dongengin-animation-mobile-frame::before {
    border-radius: 32px;
  }

  .dongengin-animation-mobile-video {
    border-radius: 24px;
  }

  .dongengin-development-image {
    margin: 130px 0 0;
  }

  .dongengin-development-image img:nth-child(2) {
    top: -166px;
    left: 77px;
    width: 278px;
    height: 278px;
  }

  .dongengin-development-image img:nth-child(3) {
    bottom: -82px;
    left: 354px;
    width: 218px;
    height: 218px;
  }

  .dongengin-development-image img:nth-child(4) {
    top: -66px;
    right: 23px;
    width: 126px;
    height: 126px;
  }

  .dongengin-development-image img:nth-child(5) {
    right: -29px;
    bottom: 94px;
    width: 122px;
    height: 122px;
  }

  .dongengin-ui-design {
    grid-template-columns: 260px 744px;
    margin: 170px auto 0;
  }

  .dongengin-research-ornament img {
    position: absolute;
    top: 246px;
    left: calc(50% + 336px);
    height: auto;
  }

  .dongengin-ui-devices {
    margin: 240px 0 0;
  }

  .dongengin-ui-animation {
    height: 693px;
  }

  .dongengin-ui-multi-device {
    transform: translate(-50%, -50%) scale(1);
  }

  .flower-animation.flower-1 {
    display: block;
  }

  .flower-animation.flower-2 {
    display: block;
  }

  .flower-animation.flower-3 {
    display: block;
  }

  .flower-animation.flower-4 {
    display: none;
  }

  .flower-animation.flower-5 {
    display: none;
  }

  .flower-animation.flower-6 {
    display: none;
  }

  .star-animation.star-1 {
    bottom: 1103px;
    left: calc(50% + 405px);
    width: 34px;
    height: 34px;
  }

  .star-animation.star-2 {
    bottom: 843px;
    left: calc(50% - 576px);
    width: 34px;
    height: 34px;
  }

  .star-animation.star-3 {
    bottom: 728px;
    left: calc(50% + 470px);
    width: 66px;
    height: 66px;
  }

  .star-animation.star-4 {
    bottom: 621px;
    left: calc(50% - 367px);
    width: 66px;
    height: 66px;
  }

  .star-animation.star-5 {
    bottom: 458px;
    left: calc(50% + 613px);
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 1440px) {
  h3.lined-title {
    font-size: 50px;
    line-height: 60px;
  }

  h3.lined-title::before {
    width: 64px;
    height: 6px;
    border-radius: 3px;
  }

  .dongengin-top-bg {
    width: 1624px;
  }
}

/* Keyframes */

@keyframes multiDevices {
  0% {
    width: 944px;
    height: 672px;
  }

  5% {
    width: 944px;
    height: 672px;
  }

  20% {
    width: 500px;
    height: 709px;
  }

  30% {
    width: 500px;
    height: 709px;
  }

  45% {
    width: 312px;
    height: 666px;
  }

  55% {
    width: 312px;
    height: 666px;
  }

  70% {
    width: 801px;
    height: 381px;
  }

  80% {
    width: 801px;
    height: 381px;
  }

  95% {
    width: 944px;
    height: 672px;
  }

  100% {
    width: 944px;
    height: 672px;
  }
}

@keyframes multiDevicesButtonTop {
  0% {
    top: 20px;
    width: 48px;
  }

  5% {
    top: 20px;
    width: 48px;
  }

  20% {
    top: 20px;
    width: 42px;
  }

  30% {
    top: 20px;
    width: 42px;
  }

  45% {
    top: 42px;
    width: 39px;
  }

  55% {
    top: 42px;
    width: 39px;
  }

  70% {
    top: 20px;
    width: 48px;
  }

  80% {
    top: 20px;
    width: 48px;
  }

  95% {
    top: 20px;
    width: 48px;
  }

  100% {
    top: 20px;
    width: 48px;
  }
}

@keyframes multiDevicesProgress {
  0% {
    top: 41px;
    width: calc(100% - 176px);
  }

  5% {
    top: 41px;
    width: calc(100% - 176px);
  }

  20% {
    top: 38px;
    width: calc(100% - 164px);
  }

  30% {
    top: 38px;
    width: calc(100% - 164px);
  }

  45% {
    top: 24px;
    width: calc(100% - 48px);
  }

  55% {
    top: 24px;
    width: calc(100% - 48px);
  }

  70% {
    top: 41px;
    width: calc(100% - 176px);
  }

  80% {
    top: 41px;
    width: calc(100% - 176px);
  }

  95% {
    top: 41px;
    width: calc(100% - 176px);
  }

  100% {
    top: 41px;
    width: calc(100% - 176px);
  }
}

@keyframes multiDevicesStory {
  0% {
    bottom: 64px;
    width: 640px;
    padding: 18px 44px;
    border-radius: 44px;
  }

  5% {
    bottom: 64px;
    width: 640px;
    padding: 18px 44px;
    border-radius: 44px;
  }

  20% {
    bottom: 45px;
    width: 400px;
    padding: 24px 48px;
    border-radius: 22px;
  }

  30% {
    bottom: 45px;
    width: 400px;
    padding: 24px 48px;
    border-radius: 22px;
  }

  45% {
    bottom: 24px;
    width: 236px;
    padding: 46px 18px;
    border-radius: 30px;
  }

  55% {
    bottom: 24px;
    width: 236px;
    padding: 46px 18px;
    border-radius: 30px;
  }

  70% {
    bottom: 26px;
    width: 680px;
    padding: 36px 42px;
    border-radius: 26px;
  }

  80% {
    bottom: 26px;
    width: 680px;
    padding: 36px 42px;
    border-radius: 26px;
  }

  95% {
    bottom: 64px;
    width: 640px;
    padding: 18px 44px;
    border-radius: 44px;
  }

  100% {
    bottom: 64px;
    width: 640px;
    padding: 18px 44px;
    border-radius: 44px;
  }
}

@keyframes multiDevicesStoryText {
  0% {
    font-size: 15px;
  }

  5% {
    font-size: 15px;
  }

  20% {
    font-size: 12px;
  }

  30% {
    font-size: 12px;
  }

  45% {
    font-size: 15px;
  }

  55% {
    font-size: 15px;
  }

  70% {
    font-size: 13px;
  }

  80% {
    font-size: 13px;
  }

  95% {
    font-size: 15px;
  }

  100% {
    font-size: 15px;
  }
}

@keyframes multiDevicesStoryPrev {
  0% {
    left: -25px;
    width: 62px;
  }

  5% {
    left: -25px;
    width: 62px;
  }

  20% {
    left: -318x;
    width: 36px;
  }

  30% {
    left: -318x;
    width: 36px;
  }

  45% {
    left: -318x;
    width: 36px;
  }

  55% {
    left: -318x;
    width: 36px;
  }

  70% {
    left: -256x;
    width: 42px;
  }

  80% {
    left: -256x;
    width: 42px;
  }

  95% {
    left: -25px;
    width: 62px;
  }

  100% {
    left: -25px;
    width: 62px;
  }
}

@keyframes multiDevicesStoryNext {
  0% {
    right: -25px;
    width: 62px;
  }

  5% {
    right: -25px;
    width: 62px;
  }

  20% {
    right: -18px;
    width: 36px;
  }

  30% {
    right: -18px;
    width: 36px;
  }

  45% {
    right: -18px;
    width: 36px;
  }

  55% {
    right: -18px;
    width: 36px;
  }

  70% {
    right: -26px;
    width: 42px;
  }

  80% {
    right: -26px;
    width: 42px;
  }

  95% {
    right: -25px;
    width: 62px;
  }

  100% {
    right: -25px;
    width: 62px;
  }
}

@keyframes uiPhone {
  0% {
    background-image: url('../images/dongengin/ui-phone-list-placeholder.png');
    opacity: 1;
  }

  6.25% {
    background-image: url('../images/dongengin/ui-phone-list-placeholder.png');
    opacity: 0.5;
  }

  12.5% {
    background-image: url('../images/dongengin/ui-phone-list-placeholder.png');
    opacity: 1;
  }

  18.75% {
    background-image: url('../images/dongengin/ui-phone-list-placeholder.png');
    opacity: 0.5;
  }

  25% {
    background-image: url('../images/dongengin/ui-phone-list-image.png');
    opacity: 1;
  }

  31.25% {
    background-image: url('../images/dongengin/ui-phone-list-image.png');
  }

  37.5% {
    background-image: url('../images/dongengin/ui-phone-list-image.png');
  }

  43.75% {
    background-image: url('../images/dongengin/ui-phone-list-image.png');
    opacity: 1;
  }

  50% {
    background-image: url('../images/dongengin/ui-phone-detail-placeholder.png');
    opacity: 1;
  }

  56.25% {
    background-image: url('../images/dongengin/ui-phone-detail-placeholder.png');
    opacity: 0.5;
  }

  62.5% {
    background-image: url('../images/dongengin/ui-phone-detail-placeholder.png');
    opacity: 1;
  }

  68.75% {
    background-image: url('../images/dongengin/ui-phone-detail-placeholder.png');
    opacity: 0.5;
  }

  75% {
    background-image: url('../images/dongengin/ui-phone-detail-image.png');
    opacity: 1;
  }

  81.25% {
    background-image: url('../images/dongengin/ui-phone-detail-image.png');
  }

  87.5% {
    background-image: url('../images/dongengin/ui-phone-detail-image.png');
  }

  93.75% {
    background-image: url('../images/dongengin/ui-phone-detail-image.png');
  }

  100% {
    background-image: url('../images/dongengin/ui-phone-list-placeholder.png');
  }
}

@keyframes uiPhoneFront {
  0% {
    opacity: 1;
  }

  6.25% {
    opacity: 0.5;
  }

  12.5% {
    opacity: 1;
  }

  18.75% {
    opacity: 0.5;
  }

  25% {
    opacity: 1;
  }

  43.75% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  93.75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes uiTablet {
  0% {
    background-image: url('../images/dongengin/ui-tablet-list-placeholder.png');
    opacity: 1;
  }

  6.25% {
    background-image: url('../images/dongengin/ui-tablet-list-placeholder.png');
    opacity: 0.5;
  }

  12.5% {
    background-image: url('../images/dongengin/ui-tablet-list-placeholder.png');
    opacity: 1;
  }

  18.75% {
    background-image: url('../images/dongengin/ui-tablet-list-placeholder.png');
    opacity: 0.5;
  }

  25% {
    background-image: url('../images/dongengin/ui-tablet-list-image.png');
    opacity: 1;
  }

  31.25% {
    background-image: url('../images/dongengin/ui-tablet-list-image.png');
  }

  37.5% {
    background-image: url('../images/dongengin/ui-tablet-list-image.png');
  }

  43.75% {
    background-image: url('../images/dongengin/ui-tablet-list-image.png');
    opacity: 1;
  }

  50% {
    background-image: url('../images/dongengin/ui-tablet-detail-placeholder.png');
    opacity: 1;
  }

  56.25% {
    background-image: url('../images/dongengin/ui-tablet-detail-placeholder.png');
    opacity: 0.5;
  }

  62.5% {
    background-image: url('../images/dongengin/ui-tablet-detail-placeholder.png');
    opacity: 1;
  }

  68.75% {
    background-image: url('../images/dongengin/ui-tablet-detail-placeholder.png');
    opacity: 0.5;
  }

  75% {
    background-image: url('../images/dongengin/ui-tablet-detail-image.png');
    opacity: 1;
  }

  81.25% {
    background-image: url('../images/dongengin/ui-tablet-detail-image.png');
  }

  87.5% {
    background-image: url('../images/dongengin/ui-tablet-detail-image.png');
  }

  93.75% {
    background-image: url('../images/dongengin/ui-tablet-detail-image.png');
  }

  100% {
    background-image: url('../images/dongengin/ui-tablet-list-placeholder.png');
  }
}

@keyframes uiTabletFront {
  0% {
    opacity: 1;
  }

  6.25% {
    opacity: 0.5;
  }

  12.5% {
    opacity: 1;
  }

  18.75% {
    opacity: 0.5;
  }

  25% {
    opacity: 1;
  }

  43.75% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  93.75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes uiFlower1 {
  0% {
    top: 67px;
    left: calc(50% + 608px);
    transform: rotateZ(0deg);
    opacity: 0;
  }

  25% {
    top: 147px;
    left: calc(50% + 628px);
    transform: rotateZ(180deg);
    opacity: 1;
  }

  50% {
    top: 227px;
    left: calc(50% + 608px);
    transform: rotateZ(360deg);
  }

  75% {
    top: 307px;
    left: calc(50% + 588px);
    transform: rotateZ(540deg);
    opacity: 1;
  }

  100% {
    top: 387px;
    left: calc(50% + 608px);
    transform: rotateZ(720deg);
    opacity: 0;
  }
}

@keyframes uiFlower2 {
  0% {
    top: 369px;
    left: calc(50% - 373px);
    transform: rotateZ(0deg);
    opacity: 0;
  }

  25% {
    top: 429px;
    left: calc(50% - 393px);
    transform: rotateZ(-180deg);
    opacity: 1;
  }

  50% {
    top: 489px;
    left: calc(50% - 373px);
    transform: rotateZ(-360deg);
  }

  75% {
    top: 549px;
    left: calc(50% - 353px);
    transform: rotateZ(-540deg);
    opacity: 1;
  }

  100% {
    top: 609px;
    left: calc(50% - 373px);
    transform: rotateZ(-720deg);
    opacity: 0;
  }
}

@keyframes uiFlower3 {
  0% {
    top: 1059px;
    left: calc(50% + 604px);
    transform: rotateZ(0deg);
    opacity: 0;
  }

  25% {
    top: 1119px;
    left: calc(50% + 584px);
    transform: rotateZ(180deg);
    opacity: 1;
  }

  50% {
    top: 1179px;
    left: calc(50% + 604px);
    transform: rotateZ(360deg);
  }

  75% {
    top: 1239px;
    left: calc(50% + 624px);
    transform: rotateZ(540deg);
    opacity: 1;
  }

  100% {
    top: 1299px;
    left: calc(50% + 604px);
    transform: rotateZ(720deg);
    opacity: 0;
  }
}

@keyframes uiFlower4 {
  0% {
    top: 154px;
    left: calc(50% - 60px);
    transform: rotateZ(0deg);
    opacity: 0;
  }

  25% {
    top: 184px;
    left: calc(50% - 70px);
    transform: rotateZ(-180deg);
    opacity: 1;
  }

  50% {
    top: 214px;
    left: calc(50% - 60px);
    transform: rotateZ(-360deg);
  }

  75% {
    top: 244px;
    left: calc(50% - 50px);
    transform: rotateZ(-540deg);
    opacity: 1;
  }

  100% {
    top: 274px;
    left: calc(50% - 60px);
    transform: rotateZ(-720deg);
    opacity: 0;
  }
}

@keyframes uiFlower5 {
  0% {
    top: 241px;
    left: calc(50% + 120px);
    transform: rotateZ(0deg);
    opacity: 0;
  }

  25% {
    top: 261px;
    left: calc(50% + 130px);
    transform: rotateZ(180deg);
    opacity: 1;
  }

  50% {
    top: 281px;
    left: calc(50% + 120px);
    transform: rotateZ(360deg);
  }

  75% {
    top: 301px;
    left: calc(50% + 110px);
    transform: rotateZ(540deg);
    opacity: 1;
  }

  100% {
    top: 321px;
    left: calc(50% + 120px);
    transform: rotateZ(720deg);
    opacity: 0;
  }
}

@keyframes uiFlower6 {
  0% {
    top: 460px;
    left: calc(50% - 120px);
    transform: rotateZ(0deg);
    opacity: 0;
  }

  25% {
    top: 480px;
    left:calc(50% - 110px);
    transform: rotateZ(-180deg);
    opacity: 1;
  }

  50% {
    top: 500px;
    left: calc(50% - 120px);
    transform: rotateZ(-360deg);
  }

  75% {
    top: 520px;
    left: calc(50% - 130px);
    transform: rotateZ(-540deg);
    opacity: 1;
  }

  100% {
    top: 540px;
    left: calc(50% - 120px);
    transform: rotateZ(-720deg);
    opacity: 0;
  }
}

@keyframes uiStar1 {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  25% {
    transform: scale(1.25);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0;
  }

  75% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes uiStar2 {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  25% {
    transform: scale(1.5);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0;
  }

  75% {
    transform: scale(1.25);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes uiStar3 {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  25% {
    transform: scale(0.75);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  75% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes uiStar4 {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  25% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  75% {
    transform: scale(0.75);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes uiStar5 {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  25% {
    transform: scale(1.25);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 0;
  }

  75% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}