@charset "utf-8";
.pc{display:block;}
.phone{display:none}
#tp-banner {background:#1c222e url(images/banner-bg.jpg) no-repeat center top/cover;color:#fff;position:relative;padding:185px 0 410px;transition:all linear .2s}
#tp-banner:after {content:'';width:100%;height:6px;background-image:linear-gradient(135deg,#FFAC88 0%,#FF6D63 100%);position:absolute;bottom:0;left:0}
#tp-banner .title {position:relative;z-index:0;width:240px;height:43px}
#tp-banner .title:after {content:'';width:100%;height:100%;background:#ff612e;position:absolute;left:0;top:0;border-radius:2px;transform:skewX(-12deg);opacity:.9}
#tp-banner .title svg {position:relative;z-index:1;width:100%;height:100%}
#tp-banner .tip {font-size:48px;margin-top:20px;font-weight:400}
#hover-wrap ul {transform:translateY(-100%);position:absolute;width:100%;top:0px;left:0}
#hover-wrap li {width:32.9%;background-color:#363636;position:relative;padding-bottom:20px;}
#hover-wrap li a {padding:0;height:auto;background:transparent;color:#fff;transition:all ease .4s;text-align:center}
.protext{width:96%;height:auto;overflow:hidden;position:relative;z-index:103;padding:0 2% 20px 0;}
#hover-wrap li img{max-width:100%;width:auto;margin:0 auto;display:block;padding:30px 0 5px 0;position:relative;z-index:103;}
#hover-wrap li em{display:block;text-align:center;font-size:24px;color:#ffffff;}
.protext p{display:block;text-align:center;font-size:15px;color:#ffffff;line-height:20px;display:none;}
#hover-wrap span{display:block;text-align:center;font-size:16px;color:#0889d4;width:45%;margin:10px auto;background:#fff;border-radius:30px;z-index: 103;opacity:0;height:0;line-height:37px;}
.zhezaobg{background:rgba(22,168,242,0.9);width:100%;height:100%;position:absolute;left:0;top:0;z-index:102;}
.zhezaobg2{background:rgba(50,124,224,0.9);width:100%;height:100%;position:absolute;left:0;top:0;z-index:102;}
#hover-wrap li:hover .protext p{display:block;}
#hover-wrap li:hover .protext span{display:block;}


#hover-wrap li:hover a,#hover-wrap li.actived a {height:auto;}
#hover-wrap .sub {font-size:24px;line-height:1.4em;z-index: 103;font-weight:normal;}
#hover-wrap p {visibility:hidden;opacity:0;transition:all ease .2s;line-height:20px;font-size:0;padding-top:5px;height:0;}
#hover-wrap li:hover p,#hover-wrap li.actived p {margin-top:10px;visibility:visible;opacity:1;font-size:15px;z-index:103;width:94%;margin:0 3%;height:auto;}
#hover-wrap li.actived span {visibility:visible;opacity:1;line-height:37px;height:37px;}
#hover-wrap li.first {background:url(../images/probg1.png) no-repeat center center;}
#hover-wrap li.second {background:url(../images/probg2.png) no-repeat center center;}
#hover-wrap li.third {background:url(../images/probg3.png) no-repeat center center;}
#no-one {position:relative;padding:20px 0 100px;overflow:hidden}
#no-one .lft {width:42%}
#no-one .lft .cell p {color:#777;font-size:18px}
#no-one .lft .more {margin-top:10px;font-weight:400}
#no-one .lft .swiper-pagination {left:0;transform:translate(0,50%);padding:0 5px}
#no-one .lft .sub {margin-top:60px;font-size:16px;margin-bottom:25px}
#no-one .bands a {margin-bottom:30px;width:25%;text-align:center;transition:all linear .2s;display:block}
#no-one .bands a:hover {filter:drop-shadow(0 4px 2px rgba(0,0,0,0.3))}
.device-iphone-x {height:852px;width:412px;position:absolute;z-index:1;transform:scale(.78);right:0;top:-30px;filter:drop-shadow(1px 4px 32px rgba(0,0,0,0.1));transform-origin:right center;transition:all ease 1.2s}
.device-iphone-x .device-frame {background:#fff;border-radius:58px;height:852px;padding:20px;width:412px}
.device-iphone-x .device-content {border-radius:40px;height:812px;width:375px;background:#f9fafc}
.device-iphone-x .device-content .time {font-size:16px;font-weight:700;display:inline-block;position:absolute;left:50px;top:31px;color:#000}
.device-iphone-x .device-content svg {position:absolute;right:40px;top:35px}
.device-iphone-x .device-header {background:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;height:30px;left:50%;margin-left:-102px;position:absolute;top:20px;width:204px}
.device-iphone-x .device-header::after,.device-iphone-x .device-header::before {content:"";height:10px;position:absolute;top:0;width:10px}
.device-iphone-x .device-header::after {background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#fff 75%,#fff 100%);left:-10px}
.device-iphone-x .device-header::before {background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#fff 75%,#fff 100%);right:-10px}
.device-iphone-x .device-btns {background:#fff;height:32px;left:-3px;position:absolute;top:115px;width:3px}
.device-iphone-x .device-btns::after,.device-iphone-x .device-btns::before {background:#fff;content:"";height:62px;left:0;position:absolute;width:3px}
.device-iphone-x .device-btns::after {top:60px}
.device-iphone-x .device-btns::before {top:140px}
.device-iphone-x .device-power {background:#fff;height:100px;position:absolute;right:-3px;top:200px;width:3px}
.device-iphone-x.bt {z-index:0;filter:none}
.device-iphone-x.bt .device-frame .device-content {background-image:linear-gradient(145deg,#FFAC88 0%,#FF6D63 100%)}
#no-one .rgt {padding:120px 0;position:relative}
#no-one .title {font-size:48px;line-height:1.4em;margin-bottom:40px;font-weight:700}
#no-one .rgt ul {position:relative;z-index:1;width:290px;transition:all ease 1.2s}
#no-one .rgt li {width:260px;margin-bottom:10px;position:relative;transition:all ease .4s}
#no-one .rgt li:hover {transform:scale(1.08) translate3d(0,0,0) translateY(-10px)}
#no-one .rgt li.first a {background-image:linear-gradient(90deg,#FFAC88 0%,#FF6D63 100%)}
#no-one .rgt li.second a {background-image:linear-gradient(90deg,#00F0AB 0%,#00D0E7 100%)}
#no-one .rgt li.third a {background-image:linear-gradient(90deg,#7FDBFF 0%,#8C98FF 100%)}
#no-one .rgt li.fourth a {background-image:linear-gradient(90deg,#A4D100 0%,#009D00 100%)}
#no-one .rgt li::after,#no-one .rgt li::before {position:absolute;content:"";bottom:30px;left:10px;width:50%;height:20px;transform:rotate(-8deg);z-index:-1;opacity:0;transition:all linear .2s;visibility:hidden}
#no-one .rgt li::after {transform:rotate(8deg);right:10px;left:auto}
#no-one .rgt li:hover::after,#no-one .rgt li:hover::before {opacity:1;visibility:visible}
#no-one .rgt li.first::before,#no-one .rgt li.first::after {box-shadow:0 35px 20px #da5c53}
#no-one .rgt li.second::before,#no-one .rgt li.second::after {box-shadow:0 35px 20px #00b8cc}
#no-one .rgt li.third::before,#no-one .rgt li.third::after {box-shadow:0 35px 20px #7883dd}
#no-one .rgt li.fourth::before,#no-one .rgt li.fourth::after {box-shadow:0 35px 20px #080}
#no-one .rgt li svg {position:absolute;right:15px;bottom:15px}
#no-one .rgt li a {display:block;color:#fff;padding:20px 20px 55px;font-size:22px;font-weight:600;position:relative;border-radius:8px}
#no-one .rgt li a:after {content:'';width:18px;height:2px;background:#fff;position:absolute;bottom:35px;left:20px}
#no-one .rgt.actived ul {transform:translateX(-50px)}
#no-one .rgt.actived .device-iphone-x.tp {transform:scale(.78) translateX(-16%)}
#no-one .bg {position:absolute;bottom:-8%;right:0}
#no-one .hot-latest .cell {box-shadow:0 5px 46px 0 rgba(68,4,4,.13);background:#fff;padding:38px 24px;width:32%;min-height:400px}
#no-one .hot-latest .title {font-size:24px;text-transform:uppercase;font-weight:700;padding-bottom:10px;margin-bottom:20px;border-bottom:2px solid #dcd5cf}
#no-one .hot-latest .sub {font-size:18px;margin-bottom:6px}
#no-one .latest p {color:#777}
#no-one .latest svg {width:18%}
#no-one .latest .txt {width:80%}
#no-one .latest li:not(:last-child) {margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #dcd5cf}
#no-one .latest li a {transition:all linear .2s}
#no-one .latest li:hover a {transform:translateX(5px)}
#no-one .search a {color:#777;padding:4px 18px;background:#eee;border-radius:50px;margin-right:10px;margin-bottom:10px;display:inline-block}
#no-one .search a:hover,#no-one .search li.actived a {color:#fff;background:#ff612e}
#no-one .safe li {padding-bottom:10px;margin-bottom:15px;border-bottom:1px solid #dcd5cf}
#no-one .safe svg {width:18%}
#no-one .safe .txt {width:80%}
#no-one .safe p {color:#777}
@media(max-width:769px) {#hover-wrap {margin-top:-30%}
#hover-wrap li.first {background-image:url(images/mb-banner-first-bg.jpg)}
#hover-wrap li.second {background-image:url(images/mb-banner-second-bg.jpg)}
#hover-wrap li.third {background-image:url(images/mb-banner-third-bg.jpg)}
#hover-wrap li.fourth {background-image:url(images/mb-banner-fourth-bg-4ukey.jpg)}
#tp-banner {background:#303941 url(images/banner-bg-mb.jpg) no-repeat center top/cover;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 10px;min-height:667px}
#tp-banner p.tip {font-size:calc(24px + 2vw)}
#hover-wrap ul {position:static;transform:translateY(0);display:block;margin-top:20px}
#tp-banner .hover-wrap {position:relative;left:auto;top:auto}
#tp-banner .tip {font-size:calc(24px + 2vw)}
#no-one {padding:20px 0 55px}
#no-one .title {font-size:calc(24px + 2vw)}
#no-one .bg {display:none}
#no-one .software {background:#f5f5f5;padding:45px 10px 40px;margin-bottom:30px}
#no-one .lft {text-align:center}
#no-one .switch-tab {justify-content:center}
#no-one .rgt {padding:0}
.device-iphone-x {display:none}
#no-one .rgt ul {padding:25px 10px 0;width:100%}
#no-one .rgt.actived ul {transform:none}
#no-one .rgt li {width:100%}
#no-one .hot-latest,#no-one .software,#tp-banner .hover-wrap ul {display:block}
#no-one .hot-latest .cell,#no-one .lft,#no-one .rgt,#tp-banner .hover-wrap li,#hover-wrap ul li {width:100%}
#no-one .hot-latest .cell {min-height:auto}
#no-one .hot-latest .cell:not(:last-child) {margin-bottom:40px}
#no-one .lft .swiper-pagination {left:50%;transform:translate(-50%,50%)}
#hover-wrap li a {height:300px}
#hover-wrap li:not(:last-child) {margin-bottom:15px}
#hover-wrap li p {visibility:visible;opacity:1;font-size:14px;margin-top:15px}
#hover-wrap .sub {position:static}
}


@media screen and (max-width:1400px) {
.wrap2{width:98%;}
#hover-wrap .sub{font-size:20px;}
#hover-wrap li img{padding-top:20px;}
#hover-wrap li{padding-bottom:10px;}
}

@media screen and (max-width:1300px) {
#hover-wrap li:hover p, #hover-wrap li.actived p{font-size:13px}
#hover-wrap li.actived span{margin:5px auto;line-height:30px;height:30px;}
}

@media screen and (max-width:1199px) {
#hover-wrap ul{position:relative;transform:none;padding-top:20px;}
#hover-wrap li:hover p, #hover-wrap li.actived p{height:40px;overflow:hidden;}
}

@media screen and (max-width:900px) {
#hover-wrap li{width:100%;float:none;display:block;}
.pc{display:none;}
.phone{display:block}
}