* {
    box-sizing: border-box;margin:0;padding:0;
}

body {
    height: 100vh;
    width: 100%;
    line-height: 25px;
    font-size: 14px;
    font-family:"微软雅黑", 'Gill Sans', 'Gill Sans MT';
    background:#222;
    position: relative;
}

body {
    margin: 0;
    padding: 0;
	
}

ul,li{list-style-type: none;}
nav {
    overflow: hidden;
    position: fixed;
    transform: translateX(-320px);
    height: 100vh;
    width: 400px;
    transition: all 800ms cubic-bezier(.8, 0, .33, 1);
    border-radius: 0% 0% 100% 50%;
    z-index: 999;
}

nav.nav-open {
    transform: translateX(0px);
    border-radius: 0% 0% 0% 0%;
	 background: rgba(255, 255, 255, 1);
}

nav .menu-btn {
    position: absolute;
    top: 40px;
    right: 5%;
    padding: 0;
    width: 30px;
    cursor: pointer;
    z-index: 2;
}

nav .menu-btn .line {
    padding: 0;
    width: 30px;
    background: #fff;
    height: 3px;
    margin: 5px 0;
    transition: all 700ms cubic-bezier(.9, 0, .33, 1);
}

nav .menu-btn .line.line--1 {
    width: 30px;
    transform: rotate(0) translateY(0);
}

nav .menu-btn .line.line--1.line-cross {
    width: 28px;
    transform: rotate(45deg) translateY(11px);
	 background: rgba(0,0,0,0.6);
}

nav .menu-btn .line.line--2 {
    width: 30px;
    transform: translateX(0);
}

nav .menu-btn .line.line--2.line-fade-out {
    width: 30px;
    transform: translate(30px);
    opacity: 0;
}

nav .menu-btn .line.line--3 {
    width: 20px;
    transform: rotate(0) translateY(0);
}

nav .menu-btn .line.line--3.line-cross {
    width: 28px;
    transform: rotate(-45deg) translateY(-11px);
	 background: rgba(0,0,0,0.6);
}

nav .nav-links {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 900ms cubic-bezier(.9, 0, .33, 1);
}

nav .nav-links.fade-in {
    opacity: 1;
    transform: translateX(0px);
}

nav .nav-links .link {
    margin: 20px 0;
    text-decoration: none;
    color: rgba(0,0,0,0.9);
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: normal;
    transition: all 300ms cubic-bezier(.9, 0, .33, 1);
    font-family:Arial, Helvetica, sans-serif;
}

nav .nav-links .link:hover {
    color:#d75672;
}

.inform{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, 0.8);
	font-size: 2rem;
	font-family:Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-shadow: 0 0 20px rgba(0,0,0,0.6);
}

a{
	
	color: #fff;
	transition: all 0.5s ease;
    text-decoration: none;
}

a:hover{
	color: #ffffff;
}
nav .logo{position: absolute;left:60px;top:10vh;}
nav .logo h1{font-size:16px;}
nav  p.contact{color:#999;position:absolute;bottom:10vh;left:60px;font-size:12px;line-height: 20px;}


.main{width:100vw;height:100vh;position: relative;}
.main iframe{ width: 100vw;height: 100vh;position: absolute;left: 0;top: 0;}


/* header */
.indexheader{position: fixed;top:0;left:0;z-index:99;padding:30px;width: 100%;}
.header{position: fixed;top:0;left:0;z-index:99;padding:30px;width: 100%;background:#222;}
.link{float: right;}
@media only screen and (max-width: 500px) {
    .header .link{display: none;}
}
.link a{color:#999;margin:0 5px;}
.link a img{border-radius: 50%;width:36px;height:36px;transition: all 0.5s ease;filter: grayscale(100%);}
.link a:hover img{transform: scale(1.1);filter: grayscale(0%);}


/* footer */
.footer{position: fixed;bottom:0;left:0;z-index:99;padding:30px 5%;width: 100%;background:#222;}
.footer p{color:#666;text-align: center;}
.indexfooter{position: fixed;bottom:0;left:0;z-index:99;padding:30px 5%;width: 100%;}
.indexfooter p{color:#666;text-align: center;}
.footer-3d{position: fixed;bottom:0;left:0;z-index:99;padding:30px 5%;width: 100%;}
.footer-3d p{color:rgba(255, 255, 255, 0.6);text-align: center;}
.ad {position: fixed;bottom: 50px;left: 0;z-index: 99}

/* pages */
.submain{padding: 15vh 5% 10vh 5%;}
.submain h1{color:#fff;font-size:4rem;line-height:4rem;font-family:Arial, Helvetica, sans-serif;padding:20px 0;font-weight: normal;z-index: 10;position:relative;}
.submain h2{color:#fff;font-size:3rem;padding:20px 0;font-weight: normal;line-height: 4rem;width:60%;margin:0 auto;}
.submain h4{color:#fff;font-size:1.5rem;padding-top:20px;font-weight: normal;line-height: 3rem;width:60%;margin:0 auto;font-family:Arial, Helvetica, sans-serif;}
.submain p{color:#999;position:relative;z-index: 10;}
.submain .intro{display: flex;flex-direction: row;width:60%;margin:0 auto;border-top:solid 1px #666;padding:30px 0;border-bottom:solid 1px #666;padding:30px 0;}
@media only screen and (max-width:750px) {
    .submain .intro {display: flex;flex-direction:row;flex-wrap:wrap;width:100%;}
    .submain .intro .intro-content{width:50%;padding:0 10px;}
}
@media only screen and (min-width:751px) {
    .submain .intro .intro-content{color: #999;line-height:1.5rem;width:25%;padding:0 20px;}
}

.submain .intro .intro-content h5{font-size:14px;color:#666;padding:10px 0;}
.submain .intro .intro-content p{font-size:18px;color:#fff;padding:10px 0;}

.submain .content {color: #999;line-height: 2rem;padding: 30px 0;font-size:1rem;width:60%;text-align: justify;margin:0 auto;border-bottom:solid 1px #666;}
@media only screen and (max-width: 1280px){
    .submain .content,.submain .intro,.submain h2,.submain h4,.submain .show,.aids,.skill,.email{
        width: 100%;
    }
}

/* subpage banner */
.submain .show{width: 100%;height:600px;margin:40px 0;}
.show-app3{background-image: url(../img/app3/1.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position:center center;-webkit-background-size: cover;background-size: cover;}
.show-iptv2{background-image: url(../img/iptv2/iptv2.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position:center center;-webkit-background-size: cover;background-size: cover;}
.show-iptv1{background-image: url(../img/iptv1/iptv1.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position:center center;-webkit-background-size: cover;background-size: cover;}
.show-app5{background-image: url(../img/app5/app5-1.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position:center center;-webkit-background-size: cover;background-size: cover;}
.show-iwatch2{background-image: url(../img/iwatch2/3.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position:center center;-webkit-background-size: cover;background-size: cover;}



.submain .content-pic{width:100%;margin:30px auto;}
@media only screen and (min-width: 1280px) {
    .aids{width:60%;margin:30px auto;display: flex;flex-direction: column;}
}
.aidsbox{display: flex;flex-direction: row;padding: 30px 0;border-top: solid 1px #666;}
.aidsbox:last-child{border-bottom: solid 1px #666;}
.aids img{border-radius: 50%;margin-right:30px;}
.aids h6{color:#fff;font-size: 18px;font-weight: normal;display: block;}

/* about */
.about-banner{height:400px;margin:40px 0;position:relative;}
.show-about {
    background-image: url(../img/bg-about.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
.about-banner h3{color: #fff;font-size: 24px;position:absolute;top:120px;left:0;font-weight:normal;width:100%;text-align: center;}
.about-banner p{color: #fff;position: absolute;top: 160px;left:0;width: 100%;text-align: center;}
.about-banner a{color: #fff;position: absolute;top: 220px;left:42%;padding:15px 0;width:16%;background:rgba(0,0,0,0.6);border-radius: 99px;text-align: center;}
@media only screen and (max-width:751px){
    .about-banner a{width:40%;left:30%;}
}
.about-banner a:hover {background: rgba(255, 255, 255, 0.6);color:#d75672}
.skill{margin:0 auto;padding:30px 0;display: flex;flex-wrap: wrap;justify-content: center;}
@media only screen and (min-width:1281px){
    .skill{width:60%;}
}
.circle {width: 160px;height: 160px;border-radius: 50%;position: relative;}
@media only screen and (min-width:1601px){
    .circle{margin:20px 3%;}
}
@media only screen and (min-width:1441px) and (max-width:1600px){
    .circle{margin:20px 2%;}
}
@media only screen and (min-width:751px) and (max-width:1440px){
    .circle{margin:20px 1%;}
}
@media only screen and (max-width:750px){
    .circle{margin:20px 3%;}
}
.circle:before{content: '';position: absolute;top:50%;left:50%;width:156px;height:156px;background:#222;border-radius: 50%;transform: translate(-50%,-50%);} 
.circle1{background:conic-gradient(#ffffff 0deg 342deg,#666 180deg 360deg);}
.circle2{background:conic-gradient(#ffffff 0deg 316deg,#666 180deg 360deg);}
.circle3{background:conic-gradient(#ffffff 0deg 324deg,#666 180deg 360deg);}
.circle4{background:conic-gradient(#ffffff 0deg 342deg,#666 180deg 360deg);}
.circle5{background:conic-gradient(#ffffff 0deg 342deg,#666 180deg 360deg);}
.circle6{background:conic-gradient(#ffffff 0deg 324deg,#666 180deg 360deg);}
.circle p{width: 160px;height:160px;position:absolute;top:55px;left:0;color:#fff;font-size:2.5rem;text-align: center;font-weight: 100;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
.circle h6{width: 160px;height:160px;position:absolute;top:95px;left:0;color:#d75672;font-size:1rem;text-align: center;font-weight:normal;}
.email{padding:40px 0;border-top:solid 1px #666;border-bottom:solid 1px #666;text-align: center;font-family: '微软雅黑';margin:0 auto;font-size:1.2rem;color:#fff;line-height: 30px;}
@media only screen and (min-width:1280px){
    .email{width:60%}
}
.email button{color: #fff;padding:16px 0;width:16%;background:#3f9787;border-radius:30px;text-align: center;border:none;margin-top:30px;transition: 0.5s;}
@media only screen and (max-width:751px){
    .email button{width:40%;left:30%;}
}
.email button:hover {background: rgba(255, 255, 255, 0.6);color:#222;background:#fff;}


/* contact */
.contact-banner{height:60vh;margin:40px 0;position:relative;}
@media only screen and (min-width:1281px){
    .contact-banner  .title{width:30%;position:absolute;top:0;left:0;font-size:3rem;line-height: 3rem;text-align:left;color:#fff;z-index: 10;}
    .contact-banner  .contact-text{width:30%;position:absolute;top:70px;left:0;font-size:1.5rem;line-height: 2.5rem;text-align:left;color:#999;font-family:Arial, Helvetica, sans-serif;z-index: 10;}
}
@media only screen and (max-width:1280px){
    .contact-banner  .title{width:100%;position:absolute;top:0;left:0;font-size:3rem;line-height: 3rem;text-align:center;color:#fff;z-index: 10;}
    .contact-banner  .contact-text{width:80%;position:absolute;top:70px;left:10%;font-size:1rem;line-height:2rem;text-align:center;color:#999;z-index: 10;}
}
@media only screen and (min-width:1281px){
    .contact-banner ul{position:absolute;left:0;bottom:0;width:20%;z-index: 10;}
}
@media only screen and (min-width:751px) and (max-width:1280px){
    .contact-banner ul{position:absolute;left:20%;bottom:0;width:60%;z-index: 10;}
}
@media only screen and (max-width:750px){
    .contact-banner ul{position:absolute;left:0;bottom:0;width:100%;z-index: 10;}
}
.contact-banner ul li{color:#999;border-top:solid 1px #666;padding:15px 0;display: flex;align-items: center;}
.contact-banner ul li:last-child{border-bottom:solid 1px #666;}
.contact-banner ul li img{margin-right:20px;width:20px;height: 20px;}
@media only screen and (max-width:1280px){
    .service{display: none;}
}
@media only screen and (min-width:1281px) and (max-width:1920px){
    .service{width:30%}
}
@media only screen and (min-width:1921px){
    .service{width:20%}
}
.service{height:100%;position:absolute;top:0;right:0;display: flex;flex-wrap: wrap;z-index: 10;}
.service-list{width:50%;height:50%;border-left: solid 1px #666;padding:0 20px;}
.service-list:nth-child(2n){border-right: solid 1px #666;}
.service-list .sort{font-size:1rem;margin:0 auto;padding:5% 0;border-bottom:solid 1px #666;color:#d75672;}
.service-list .price{font-size:2rem;margin:0 auto;padding:10% 0;color:#fff;font-weight: 100;font-family:Arial, Helvetica, sans-serif;}
.service-list .price p{font-size:14px;margin-bottom:10px;color:#666;font-weight: normal;font-family: "微软雅黑";}
.service-list .info{font-size:14px;margin-bottom:10px;color:#666;font-weight: normal;padding:20px 0;}
@media only screen and (max-width:1280px){
    .service{display: none;}
}
@media only screen and (min-width:1281px) and (max-width:1920px){
    .service{width:30%}
}
@media only screen and (min-width:1921px){
    .service{width:20%}
}

.submain .title-3d{color:#fff;font-size:3rem;line-height:4rem;padding:20px 0;font-weight: normal;z-index: 10;position:relative;}
@media only screen and (max-width:1280px){
    .intro-3d{display: none;}
}
@media only screen and (min-width:1281px) and (max-width:1920px){
    .intro-3d{width:15%}
}
@media only screen and (min-width:1921px){
    .intro-3d{width:10%}
}
.intro-3d{height:100%;position:absolute;top:0;left:0;display: flex;flex-direction: column;z-index: 10;}
.intro-3d-list{height:100%;border-left: solid 1px #fff;border-right: solid 1px #fff;padding:0 20px;}
.intro-3d .sort{font-size:1rem;margin:0 auto;padding-top:10px;color:#fff;}
.intro-3d .design-aids{font-size:1rem;margin:0 auto;padding-top:10px;color:#fff;}
.intro-3d .info{font-size:14px;margin-bottom:10px;color:rgba(255,255,255,0.8);font-weight: normal;padding-top:5px;}
.intro-3d .icon{}
.intro-3d .icon img{border-radius:50%;}