@media screen and (max-width: 1400px){
  .wrapper, #header_nav_wrap {
    max-width: 1200px;
  }
  .inview2 .phone{ margin-right: 10%;}
  .inview6 .items{ width: 350px;}
  .inview7 .desc{ padding-right: 0; margin-left: 45%;}
}
@media screen and (max-width: 1250px){
  .wrapper, #header_nav_wrap {max-width: 1100px;}
  .inview6 .items{ width: 320px;}
  .inview1 .phone .desc{ right:-400px;}
  .inview2 .phone{ margin-right: 5%;}
  .inview3 .desc p{ width: 480px;}

}
@media screen and (max-width: 1150px){
  .wrapper, #header_nav_wrap {max-width: 1000px;}
  .inview1 .phone .phone-wrapper { left: -100px;}
  .inview1 .phone .desc{ right:-250px;}
  .inview1 .device img{ width: 290px;}
  .inview1 .device_mini{ left: 280px;}
  .inview1 .device_mini img{ width: 380px;}
  .inview1 .phone .desc{ width: 420px; height: 500px; bottom: 100px;}
  .inview1 .phone .desc p{ padding: 100px 50px 80px 80px;}
  .inview2{ background-size: auto 100%;}
  .inview2 .phone{ width: 300px; height: 531px; top: 0; margin-left: 0; margin-right: 0;}
  .inview2 .phone .phone-shell{ width: 100%;}
  .inview2 .swiper-container{ top: 32px; width: 212px;}
  .inview2 .swiper-slide img{ width: 212px; height: 458px;}
  .inview2 .swiper-container {width: 212px;top: 32px;}

  .inview3 .desc p{ width: 400px;}
  .inview5 .video-list{ width: 100%;}
  .inview5 .video-list ul{ margin-left: -50px;}
  .inview5 .video-list .video-item{ margin-left: 50px;}

  .inview6 .phone{ width: 300px; height: 531px; top: 350px; margin-left: -150px;}
  .inview6 .phone .phone-shell{ width: 100%;}
  .inview6 .swiper-container{ top: 32px; width: 212px;}
  .inview6 .swiper-slide img{ width: 212px; height: 458px;}
  .inview6 .swiper-container {width: 212px;top: 32px;}
  .inview7 .dowmload img{ width: 240px;}

}

@media screen and (max-width: 1100px){
  .wrapper, #header_nav_wrap {max-width: 900px;}
  .inview1 .phone .phone-wrapper { left: -100px;}
  .inview1 .phone .desc{ right:-220px;}

  .inview1 .phone .desc{ width: 420px; height: 500px; bottom: 100px;}
  .inview1 .phone .desc p{ padding: 100px 50px 80px 80px;}
  .inview3 .desc p{ width: 380px;}
  .inview4 .desc p{ float: right; width: auto;}
  .inview4 .phone img{ width: 100%;}

  .inview6 .items{ width: 280px;}

  .inview7 .dowmload img{ width: 200px;}

}
@media screen and (max-width: 900px){
  .desktop{ display: none !important;}
  .mobile{ display: block !important;}
  /* header */
  #main{ max-width: 640px; position: relative; overflow:hidden;}
  #header_nav_wrap{ top: 0; max-width: 640px;  height: 65px;}
  #header_nav_wrap.active{ background: rgba(255,255,255,.95);}
  #header_nav_wrap .logo{ float: left; margin-left: 15px; margin-top: 15px;}
  #header_nav_wrap .logo img{ height: 40px;}
  #header_nav_wrap .nav_menu_btn {
    position: relative;
    top:25px;
    margin-left:10%;
    width: 30px;
    height: 22px;
  }
  #header_nav_wrap .nav_menu_btn::before,
  #header_nav_wrap .nav_menu_btn::after {
      height: 3px;
  }
  #header_nav_wrap .nav_menu_btn span {
      margin-top: -1.5px;
      width: 100%;
      height: 3px;

  }
  #menu ul{ text-align: center; padding-top: 100px;}
  #menu ul li{ padding-top: 30px}
  #menu ul a{font-size: 18px;}
  .submenu{ padding-top: 18px;}
  .submenu p{ padding: 10px 0;}
  .submenu a{ color: #a6a5a5; font-size: 16px;}


  /* inview1 */
  .inview1 .content{background-image: url(../images/640/item1-bg.jpg); background-size: 100% auto;}
  .inview1 .content .title{ text-align: center; padding-top: 80px;}
  .inview1 .content .title img{ display: block; margin: auto; width: 80%;}
  .inview1 .content .title p{ width: 80%; padding-top: 30px; padding-bottom: 40px; margin: auto; font-size: 18px;  line-height: 30px;}

  .inview1 .phone{ width: 100%; }

  .inview1 .phone .phone-wrapper{left: 0; }
  .inview1 .phone .desc{ position:relative;  width: 80%;  height: auto; margin-top: -70px; left: 15px; right:0; bottom: 0; z-index: 1;}
  .inview1 .phone .desc p{ padding: 100px 50px 80px 50px;  font-size: 18px; line-height: 30px;}
  .inview1 .phone .desc p span{ padding-bottom: 20px; font-size: 24px;}
  .inview1 .phone .desc p span::before{ display: none;}

  .inview1 .phone .device-box{ width: 320px; margin: auto; position: relative; z-index: 2;}
  .inview1 .device {top: 13px; left: -10px; width: auto; height: auto;}
  .inview1 .device img{ width: 140px; display: block;}
  .inview1 .device_mini { left: 130px;  top: -50px;}
  .inview1 .device_mini img{ width: 180px;}

  .inview1 .arrowWapper { position:absolute; left: 10px; top: 50px; width: 100%; height: 200px; overflow: hidden; }
  .inview1 .arrowWapper .arrow { position: absolute; left: 140px; top: 70px; width: 70px; height: 55px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
  .inview1 .arrowWapper .arrow img { width: 100%; }

  /* inview2 */
  .inview2{ width: 100%; margin-top: -100px; background-image: url(../images/640/item2-wave.png); background-size: 100% auto;}
  .inview2 .wrapper{ padding-top: 100px;}
  .inview2 .desc{ width: 80%;float: none; margin: auto;}
  .inview2 .desc .content{ width: 100%; padding-top: 50px; font-size: 18px; line-height: 30px;}
  .inview2 .desc .content span{ padding-bottom: 20px; font-size: 24px;}
  .inview2 .desc .content span::before{ border-top:6px solid #adadad; height: 20px; width: 80px;}
  .inview2 .phone{ width: 260px; height: 460px; position:relative; left: 0; top: 0; margin: auto; margin-top: 0; float: none;}
  .inview2 .phone .phone-shell{ position:absolute; width: 260px; height: 460px; left: 0; top: 0; z-index: 1}
  .inview2 .swiper-container {
    width: 186px;
    height: 398px;
    position:relative;
    top: 29px;
  }
  .inview2 .swiper-slide img{ width: 184px; height: 396px;}


  /* inview3 */
  .inview3{ background-image: url(../images/640/item3-bg.jpg); height: auto; margin-top: 50px; background-size: 100% auto;}
  .inview3 .stars .cup{ width: 150px;}
  .inview3 .desc{ position: relative; width: 80%;  margin: auto; padding-top: 0;}
  .inview3 .desc p{ float: none; width: 100%; padding-top: 300px; font-size: 18px; line-height: 30px;}
  .inview3 .desc p span{padding-bottom: 20px; font-size: 24px;}
  .inview3 .desc p span::before{ content: ''; display: block; border-top:6px solid #adadad; height: 20px; width: 80px;}
  .inview3 .desc p em{display: block; font-size: 14px; padding-top: 10px;}

  .stars { left: 50%; top: 80px; margin-left: 0;}
  .stars .cup{ position: relative; left: -40px; top: 10px;}
  .stars div {left: 0px; }



  /* inview4 */
  .inview4{margin-top: 0;}
  .inview4 .wrapper{ height: auto;  padding-top: 40px; padding-bottom: 50px;}
  .inview4 .desc{ width: 80%; float: none; margin: auto;}
  .inview4 .desc p{ float: none; width: 100%; padding-top: 60px;  font-size: 18px; line-height: 30px;}
  .inview4 .desc p span{ display: block; padding-bottom: 20px; font-size: 24px;}
  .inview4 .desc p span::before{ content: ''; display: block; border-top:6px solid #adadad; height: 20px; width: 120px;}
  .inview4 .desc p em{display: block; font-size: 14px; padding-top: 10px;}
  .inview4 .phone{ width: 100%; float: none; text-align: center;}
  .inview4 .phone img{ top: 0; width: 80%; display: block; margin: auto; margin-right: 80px;}

  /* inview5 */
  .inview5{ height: auto; background-image: url(../images/640/item5-bg.jpg); background-size: 100% 100%;}
  .inview5 .title{ padding-top: 80px; font-size: 18px; width: 80%; margin: auto; line-height: 30px;}
  .inview5 .title p:nth-child(1){ padding-bottom: 20px; font-size: 24px;}
  .inview5 .title p:nth-child(2){ font-size: 18px; }
  .inview5 .title p span{ display: block;}
  .inview5 .video-list{width: 80%;  padding-top: 30px; padding-bottom: 100px;}
  .inview5 .video-list ul{ margin-left: 0;}
  .inview5 .video-list li{ width: 100%; float: none; margin-top: 30px;}
  .inview5 .video-list .video-item{ margin-left: 0;}
  .inview5 .video-list .video-item .btn-play{ width: 60px; height: 60px; margin: -50px 0 0 -30px; background-size: cover;}
  .inview5 .video-list .video-item p{  padding:10px 0 10px 15px; font-size: 16px;}

  /* inview6 */
  .inview6{ height: auto;  background-image: url(../images/640/item6-bg.jpg); background-size: 100% 100%; padding-bottom: 50px;}
  .inview6 .title{ padding-top: 80px;}
  .inview6 .title img{ display: block; margin: auto; width: 80%;}
  .inview6 .items{ width: 80%; margin: auto; padding-top: 20px;}
  .inview6 .items h3{ font-size: 24px; padding: 20px 0 30px;}
  .inview6 .items .content{ font-size: 18px; line-height: 30px;}
  .inview6 .item1{ float:none;}
  .inview6 .item2{ float:none;}

  .inview6 .phone{ width: 320px; height: 567px; position:relative; left: 0; top: 0; margin: auto;}
  .inview6 .phone .phone-shell{ position:absolute; width: 320px; height: 567px; left: 0; top: 0; z-index: 1}
  .inview6 .swiper-container {
    width: 230px;
    height: 100%;
    position:relative;
    top: 35px;
  }
  .inview6 .swiper-slide img{ width: 228px; height: 492px;}

  .swiper-slide img{ width: 230px; height: 576px;}

  /* inview7 */
  .inview7{ height: auto; background-image: url(../images/640/item7-bg.jpg); background-repeat:repeat-x; background-position: top left;}
  .inview7 .item7-magic{ padding-top: 40px;}
  .inview7 .item7-magic img{ display: block; width: 100%;}
  .inview7 .desc{ margin-left: 10%; margin-right: 10%; line-height: 30px; font-size: 18px; padding-right: 0;}
  .inview7 .desc span{ padding-bottom: 10px; padding-top: 10px; font-size: 24px;}
  .inview7 .dowmload{ padding-top: 40px;}
  .inview7 .dowmload a{ display: block; margin-top: 10px;}
  .inview7 .dowmload a:nth-child(2){ margin-left: 0;}
  .inview7 .dowmload a img{ width: 250px; display: block;}
  .inview7 .copyright{ position:relative; left: 0; bottom: 0;  padding: 50px 0 80px; font-size: 14px;}
  .inview7 .copyright span{ display: block;}

  /* footer */
  .footer{ height: 46px; max-width: 640px; left: 0; right: 0; margin: auto;}
  .footer .submit{ width: 100%; height: 100%; right: 0; }
  .footer .button{ width: auto; height: 44px; line-height: 44px; font-size: 18px; float: none;}

  .toTop{ display:block; right:20px; bottom: 70px; position: fixed; z-index: 5}
  .toTop::before{ content: ''; display: block;  width:30px;height:30px; background-image: url(../images/gototop.png); background-color: #333; background-position: center center; background-repeat: no-repeat; background-size: 50% 50%;}
  .toTop::before:hover{ background-color: #8b7921;}


  /* video player */
  .modalInner {
    width: 100%;
  	height: 240px;
  }
  .modalInner .btn-close{width: 30px; height: 30px; top: -45px; right: 15px;}
  .tc{ z-index: 11}
  .tc .content{ width: 90%; height: 90%; margin: auto; padding-top: 30px; padding-bottom: 40px; overflow-y: auto;}
  .tc .tc-header{ padding-bottom: 50px; }
  .tc	.tc-close{ width: 24px; height: 24px;}
  .tc .tc-header img{left: 40px; top: -15px; width: 50px;}
  .tc .title{ font-size: 18px; font-weight: bold;}
  .tc .item-title{ font-size: 16px; margin-top: 20px;}
  .tc ul{ margin-left: 40px; letter-spacing: 0;}
  .tc ul li{ margin-top: 8px; font-size: 14px;}

  /* 640 end */

}