* {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body, html {
  margin: 0px;
  padding: 0px;
  font-weight: 200;
  color: #2B2B2B;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

.row {
  margin: 0px; }

h1, h2, h3, h4, h5, h6 {
  margin: 0px; }

.test_block {
  padding: 5px;
  position: fixed;
  right: 0px;
  width: 200px;
  height: 30px;
  background-color: #fff;
  z-index: 100; }

.scroll_position {
  top: 0px; }

.divce_width {
  top: 30px; }

.wrapper {
  width: 100%;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden; }

.logo_block {
  width: 100%;
  height: 600px; }
  .logo_block .logo {
    width: 226px;
    height: 162px;
    margin: 70px 0 0 50px; }
  .logo_block .worklist {
    width: 300px;
    margin: 70px 0 0 50px; }
    .logo_block .worklist a {
      text-decoration: none;
      color: #6cc6ff; }
    .logo_block .worklist h2 {
      pointer-events: none;
      font-weight: 200;
      font-size: 40px;
      margin-bottom: 10px; }
    .logo_block .worklist h2:nth-last-child() {
      margin-bottom: 0px; }

.mouse_icon {
  position: absolute;
  left: 50%;
  bottom: 40px;
  border: 2px solid #2B2B2B;
  border-radius: 16px;
  height: 40px;
  width: 24px;
  margin-left: -15px;
  display: block;
  z-index: 100; }
  .mouse_icon .wheel {
    position: relative;
    border-radius: 10px;
    background: #2B2B2B;
    width: 2px;
    height: 6px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
    -webkit-animation: wheelAnimate1 1s infinite;
    animation: wheelAnimate1 1s infinite; }

@-webkit-keyframes wheelAnimate1 {
  0% {
    top: 4px;
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    top: 20px;
    opacity: 0; } }

@keyframes wheelAnimate1 {
  0% {
    top: 4px;
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    top: 20px;
    opacity: 0; } }

@-webkit-keyframes wheelAnimate2 {
  0% {
    top: 20px;
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    top: 4px;
    opacity: 0; } }

@keyframes wheelAnimate2 {
  0% {
    top: 20px;
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    top: 4px;
    opacity: 0; } }

.w_list h2 {
  pointer-events: none;
  font-weight: 200;
  font-size: 30px;
  margin-bottom: 10px; }

.w_list h2:nth-Child(1) {
  font-size: 40px;
  font-weight: 300; }

.w_list .arrow_btn {
  width: 60px;
  height: 50px;
  background-image: url(../images/arrow_btn.svg);
  background-repeat: no-repeat;
  background-position: right bottom;
  cursor: pointer;
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s; }
  .w_list .arrow_btn:hover {
    margin-left: 10px; }

.app_block {
  width: 100%;
  height: 1400px; }
  .app_block .app_banner_block {
    width: 100%;
    height: 900px;
    background-color: #EFEFEF;
    overflow: hidden; }
    .app_block .app_banner_block .app_banner {
      width: 100%;
      height: 1000px;
      background-image: url(../images/app_banner.png);
      background-size: cover;
      background-position: center; }
  .app_block .app_list {
    position: absolute;
    bottom: 0px;
    right: 100px; }

.website_block {
  width: 100%;
  height: 1620px;
  margin-top: 400px; }
  .website_block .w_banner1 {
    width: 1375px;
    height: 950px;
    background-image: url(../images/website_banner1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    right: 0px;
    top: 100px; }
  .website_block .w_banner2 {
    width: 920px;
    height: 600px;
    background-image: url(../images/website_banner2.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 50px;
    top: 900px;
    z-index: 10; }
  .website_block .w_banner3 {
    width: 600px;
    height: 420px;
    background-image: url(../images/website_banner3.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    right: 5vw;
    top: 1200px; }
  .website_block .website_list {
    position: absolute;
    top: 0px;
    left: 50px; }

.otherwork_block {
  width: 100%;
  margin-top: 400px; }
  .otherwork_block .other_list {
    margin-bottom: 150px;
    margin-left: 50px; }
  .otherwork_block .other_list:nth-last-child() {
    margin-bottom: 0px; }

.footer {
  width: 100%; }
  .footer .copyright_block {
    width: 600px;
    margin: 0 auto;
    margin-top: 1000px;
    margin-bottom: 50px; }
    .footer .copyright_block .footer_logo {
      width: 100%;
      height: 210px;
      background-image: url(../images/footer_logo.svg);
      background-repeat: no-repeat;
      margin-bottom: 50px; }
    .footer .copyright_block .fb_icon {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      background-image: url(../images/fb_icon.svg);
      background-repeat: no-repeat;
      margin-bottom: 50px;
      cursor: pointer;
      -webkit-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s; }
      .footer .copyright_block .fb_icon:hover {
        width: 100px;
        height: 100px; }
    .footer .copyright_block h6 {
      text-align: center;
      font-weight: 200; }

@media screen and (max-width: 1440px) {
  .app_block {
    width: 100%;
    height: 1200px; }
    .app_block .app_banner_block {
      width: 100%;
      height: 700px; }
      .app_block .app_banner_block .app_banner {
        width: 100%;
        height: 800px; }
  .website_block {
    width: 100%;
    height: 1480px;
    margin-top: 400px; }
    .website_block .w_banner1 {
      width: 1200px;
      height: 750px;
      top: 200px; }
    .website_block .w_banner2 {
      width: 600px;
      height: 400px;
      left: 50px;
      top: 900px; }
    .website_block .w_banner3 {
      width: 420px;
      height: 320px;
      right: 50px;
      top: 1100px; }
    .website_block .website_list {
      position: absolute;
      top: 0px;
      left: 50px; } }

@media screen and (max-width: 1024px) {
  .app_block {
    width: 100%;
    height: 1000px; }
    .app_block .app_banner_block {
      width: 100%;
      height: 500px; }
      .app_block .app_banner_block .app_banner {
        width: 100%;
        height: 600px; }
    .app_block .app_list {
      bottom: 0px;
      right: 50px; }
  .website_block {
    width: 100%;
    height: 1380px;
    margin-top: 400px; }
    .website_block .w_banner1 {
      width: 100%;
      height: 650px;
      right: 0px;
      top: 290px; }
    .website_block .w_banner2 {
      width: 600px;
      height: 350px;
      left: 50px;
      top: 900px; }
    .website_block .w_banner3 {
      width: 300px;
      height: 220px;
      right: 50px;
      top: 1100px; }
    .website_block .website_list {
      top: 0px;
      left: 50px; }
  .footer .copyright_block {
    width: 500px; }
    .footer .copyright_block .footer_logo {
      width: 100%;
      height: 180px; }
    .footer .copyright_block .fb_icon {
      width: 80px;
      height: 80px; } }

@media screen and (max-width: 768px) {
  .app_block {
    width: 100%;
    height: 900px; }
    .app_block .app_banner_block {
      width: 100%;
      height: 400px; }
      .app_block .app_banner_block .app_banner {
        width: 100%;
        height: 500px; }
    .app_block .app_list {
      bottom: 0px;
      right: 50px; }
  .website_block {
    width: 100%;
    height: 1380px;
    margin-top: 400px; }
    .website_block .w_banner1 {
      width: 100%;
      height: 40%;
      right: 0px;
      top: 320px; }
    .website_block .w_banner2 {
      width: 50%;
      height: 20%;
      left: 0px;
      top: 860px; }
    .website_block .w_banner3 {
      width: 50%;
      height: 20%;
      right: 0px;
      top: 860px; }
    .website_block .website_list {
      top: 0px;
      left: 50px; }
  .footer .copyright_block {
    width: 400px; }
    .footer .copyright_block .footer_logo {
      width: 100%;
      height: 140px; } }

@media screen and (max-width: 425px) {
  .logo_block {
    width: 100%;
    height: 600px; }
    .logo_block .logo {
      margin: 50px 0 0 30px; }
    .logo_block .worklist {
      margin: 70px 0 0 30px; }
  .app_block {
    width: 100%;
    height: 850px; }
    .app_block .app_banner_block {
      width: 100%;
      height: 300px; }
      .app_block .app_banner_block .app_banner {
        width: 100%;
        height: 400px; }
    .app_block .app_list {
      width: 330px;
      left: 30px; }
  .website_block {
    width: 100%;
    height: 1380px;
    margin-top: 400px; }
    .website_block .w_banner1 {
      width: 100%;
      height: 25%;
      right: 0px;
      top: 0px; }
    .website_block .w_banner2 {
      width: 50%;
      height: 15%;
      left: 0px;
      top: 340px; }
    .website_block .w_banner3 {
      width: 50%;
      height: 15%;
      right: 0px;
      top: 340px; }
    .website_block .website_list {
      top: 700px;
      left: 30px; }
  .otherwork_block .other_list {
    margin-left: 30px; }
  .footer .copyright_block {
    width: 300px; }
    .footer .copyright_block .footer_logo {
      width: 100%;
      height: 110px; } }

@media screen and (max-width: 360px) {
  .w_list h2 {
    font-weight: 200;
    font-size: 26px;
    margin-bottom: 5px; }
  .w_list h2:nth-Child(1) {
    font-size: 40px;
    font-weight: 300; }
  .w_list .arrow_btn {
    width: 50px;
    height: 30px;
    margin-top: 20px; }
  .app_block {
    width: 100%;
    height: 750px; }
    .app_block .app_banner_block {
      width: 100%;
      height: 300px; }
      .app_block .app_banner_block .app_banner {
        width: 100%;
        height: 400px; }
    .app_block .app_list {
      width: 300px;
      left: 30px; }
  .website_block {
    width: 100%;
    height: 1180px;
    margin-top: 350px; }
    .website_block .w_banner1 {
      width: 100%;
      height: 23%; }
    .website_block .w_banner2 {
      width: 50%;
      height: 13%;
      top: 270px; }
    .website_block .w_banner3 {
      width: 50%;
      height: 13%;
      top: 270px; }
    .website_block .website_list {
      top: 500px;
      left: 30px; }
  .otherwork_block {
    margin-top: 200px; }
  .footer .copyright_block {
    width: 260px; }
    .footer .copyright_block .footer_logo {
      width: 100%;
      height: 95px; } }