/*免费名片模板-MP126.COM*/
@charset "utf-8";
* {word-wrap: break-word; padding:0px; margin: 0px;}
html {background:#f7f7f7; width:100%; height:100%; margin:0px; font:15px Gotham-Book, Helvetica, Arial, sans-serif; color:#000;}
p {margin:10px 0;}
ul,li {list-style:none;}
form, img {margin:0; border:0px; padding:0; vertical-align:top;}
a {color: #000; transition: all 0.2s; text-decoration: none; -webkit-tap-highlight-color:rgba(0,0,0,0); blr:expression(this.onFocus=this.blur()); outline:none; }
a:hover {color: #1bc26c; text-decoration:none;}
select,input,textarea{font:18px Helvetica, sans-serif;}
.clear {clear:both;}
.b {font-weight:bold;}
.xt {font-style:italic;}
.s1 {color:#000;}
.s1 a{color:#000;}
.s1 a:hover{color:#000;}
.s2 {color:#666;}
.s2 a{color:#666;}
.s2 a:hover{color:#000;}
.s3 {color:#999;}
.s3 a{color:#999;}
.s3 a:hover{color:#000;}
.s4 {color:#fff;}
.s4 a{color:#fff;}
.s4 a:hover{color:#fff;}
.s5 {color:#1bc26c;}
.s5 a{color:#1bc26c;}
.s5 a:hover{color:#1bc26c;}

.f12 {font-size:12px;}
.f14 {font-size:14px;}
.f16 {font-size:16px;}
.f18 {font-size:18px;}
.f22 {font-size:22px;}

@font-face {
	font-family: 'Gotham-Book';
	src: url('../font/Gotham-Book.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
  font-family: 'mpfont';
  src: url('../font/mpfont.woff2?t=1688515173500') format('woff2'),
       url('../font/mpfont.woff?t=1688515173500') format('woff'),
       url('../font/mpfont.ttf?t=1688515173500') format('truetype');
}

.mpfont {font-family:"mpfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*****************************************************************************************************************************************************************/
/************************************************************************ PC端 ***********************************************************************************/
/*****************************************************************************************************************************************************************/
@media screen and (min-width: 1200px) {

/*壳子*/
#shell {position:fixed; width:400px; height:800px; background:#fff; top:50px; left:50%; transform: translate(-50%, 0); border-radius:30px; box-shadow:0 10px 10px rgba(170, 170, 170, .1);}
#qrcode {position:fixed; background:#fff; top:100px; z-index:333; right:-200px; text-align:center; line-height:150%; padding:10px;}
#qrcode img {width:115px; height:115px;}
#card {background:#f7f7f7; width:380px; height:780px; margin:10px; border-radius:25px; overflow:auto;}
#card .content {position:relative; z-index:0; overflow:hidden; background:linear-gradient( to bottom, #d1d9f0, #f3f5fb 400px, #f7f7f7) no-repeat;}
#card .avatar {margin:50px auto 0 auto; width:120px; height:120px; background:linear-gradient( to top, #d1d9f0, #f3f5fb) no-repeat; border-radius:100px; padding:5px; box-shadow:0 5px 10px rgba(25, 66, 182, .2);}
#card .avatar img {background:linear-gradient( to bottom, #1942b6, #4667c4) no-repeat; border-radius:100px; width:120px; height:120px;}
#card .name {margin-top:20px; text-align:center;}
#card .ename {margin-top:10px; text-align:center;}

#card .menu {margin:30px 0;}
#card .menu ul {text-align:center; margin-left:-4%;}
#card .menu li {display:inline-block; width:24%; padding:10px 0; margin-left:4%; border-radius:100px; box-shadow:0 5px 10px rgba(25, 66, 182, .1);}
#card .menu li a {color:#fff; display:block;}
#card .menu .phone {background:#1942b6; color:#fff;}
#card .menu .phone:hover {background-color:rgba(25,66,182,0.9);}
#card .menu .weixin {background:#1bc16b; color:#fff;}
#card .menu .weixin:hover {background-color:rgba(27,193,107,0.9);}
#card .menu .email {background:#ff9600; color:#fff;}
#card .menu .email:hover {background-color:rgba(255,150,0,0.9);}

#card .list {background:#fff; border-radius:15px; margin:0 10px;}
#card .list ul {margin:0 10px; color:#8d96ae; padding-bottom:10px;}
#card .list li {border-bottom:1px #f4f5fa solid; padding:15px 5px;}
#card .list .icon {float:left; width:28px; height:28px; line-height:28px; text-align:center; border-radius:100px; background:#d1d9f0; color:#fff;}
#card .list .detail {float:left; width:75%; margin:3px 0 0 15px; line-height:150%;}
#card .list .more a {float:right; width:28px; height:28px; line-height:28px; text-align:right; color:#bcc2d0;}

#card .footer {margin:15px 0; text-align:center; transform:scale(0.9);}
#card .detail {margin:10px 0;}
#card .powered {margin-top:10px; line-height:12px; transform:scale(0.8);}
#card .powered img {height:12px;}

#card .link a {position:absolute; top:10px; right:10px; background-color:rgba(0,0,0,.2); color:#fff; padding:6px 12px; border-radius:100px;}
#card .link a:hover {background-color:rgba(0,0,0,.3); color:#fff;}
#card .link .copyurl {width:0; height:0; position:absolute; z-index:-999;}

}


/*****************************************************************************************************************************************************************/
/************************************************************************ 其他端 ***********************************************************************************/
/*****************************************************************************************************************************************************************/
@media screen and (min-width: 1px) and (max-width:1199px) {

/*壳子*/
#shell {margin:0;}
#qrcode {display:none;}
#card {margin:0;}
#card .content {position:relative; z-index:0; overflow:hidden; background:linear-gradient( to bottom, #d1d9f0, #f3f5fb 400px, #f7f7f7) no-repeat;}
#card .avatar {margin:50px auto 0 auto; width:120px; height:120px; background:linear-gradient( to top, #d1d9f0, #f3f5fb) no-repeat; border-radius:100px; padding:5px; box-shadow:0 5px 10px rgba(25, 66, 182, .2);}
#card .avatar img {background:linear-gradient( to bottom, #1942b6, #4667c4) no-repeat; border-radius:100px; width:120px; height:120px;}
#card .name {margin-top:20px; text-align:center;}
#card .ename {margin-top:10px; text-align:center;}

#card .menu {margin:30px 0;}
#card .menu ul {text-align:center; margin-left:-4%;}
#card .menu li {display:inline-block; width:24%; padding:10px 0; margin-left:4%; border-radius:100px; box-shadow:0 5px 10px rgba(25, 66, 182, .1);}
#card .menu li a {color:#fff; display:block;}
#card .menu .phone {background:#1942b6; color:#fff;}
#card .menu .phone:hover {background-color:rgba(25,66,182,0.9);}
#card .menu .weixin {background:#1bc16b; color:#fff;}
#card .menu .weixin:hover {background-color:rgba(27,193,107,0.9);}
#card .menu .email {background:#ff9600; color:#fff;}
#card .menu .email:hover {background-color:rgba(255,150,0,0.9);}

#card .list {background:#fff; border-radius:15px; margin:0 10px;}
#card .list ul {margin:0 10px; color:#8d96ae; padding-bottom:10px;}
#card .list li {border-bottom:1px #f4f5fa solid; padding:15px 5px;}
#card .list .icon {float:left; width:28px; height:28px; line-height:28px; text-align:center; border-radius:100px; background:#d1d9f0; color:#fff;}
#card .list .detail {float:left; width:75%; margin:3px 0 0 15px; line-height:150%;}
#card .list .more a {float:right; width:28px; height:28px; line-height:28px; text-align:right; color:#bcc2d0;}

#card .footer {margin:15px 0; text-align:center; transform:scale(0.9);}
#card .detail {margin:10px 0;}
#card .powered {margin-top:10px; line-height:12px; transform:scale(0.8);}
#card .powered img {height:12px;}

#card .link a {position:absolute; top:10px; right:10px; background-color:rgba(0,0,0,.2); color:#fff; padding:6px 12px; border-radius:100px;}
#card .link a:hover {background-color:rgba(0,0,0,.3); color:#fff;}
#card .link .copyurl {width:0; height:0; position:absolute; z-index:-999;}

}