@charset "utf-8";
/* CSS Document */

/*通用页面样式、顶部*/
* { margin:0; padding:0; list-style-image: none;list-style-type: none;}
html {-webkit-text-size-adjust:none;}
body {background-color: #d5d5d5;font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", "Hiragino Sans GB", '微软雅黑', STHeiti, "WenQuanYi Micro Hei", Arial, SimSun, sans-serif;}
img {border:none;}
.fix {clear:both;height: 1px;font-size: 0px;background-color: #d5d5d5;}
::selection {color: #F0F0F0;background: #444;}/*内容选中效果*/

.zhezhao {background: radial-gradient(circle at center, #F6F6F6 0%, #d5d5d5 80%);width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;z-index: -10;animation: zhezhao 2s 1;}
@keyframes zhezhao {
	0% {opacity: 0;}
	100% {opacity: 1;}
} 

/* Scrollbar appearance is shared through scrollbars.css. */

/*首页顶部导航*/
.top {padding-top: 70px;width: 2000px;height: 76px;margin-right: auto;margin-left: auto;}
.logo {height: 76px;width: 76px;float: left;animation:logo 3s 1;}
.logo a {text-decoration: none;display: block;height: 76px;width: 76px;background-image: none;background-size: 100%;background-repeat: no-repeat;transition: all 0.3s ease-in-out;background-position: center;}
.logo a:hover {opacity:0.60;}
.nav {float: right;}
.nav ul {display: flex;gap: 55px;align-items: center;height: 76px;float: right;}
.nav a {text-decoration:none;display: block;height: 36px;width: 36px;background-size: 100%;background-repeat: no-repeat;transition:all 0.3s ease-in-out;transform:rotate(0deg);opacity:0.4;}
.nav a:hover {opacity:1;}
.nav_design {background-image: none;}
.nav_book {background-image: none;}
.visually-hidden {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}

/* LOGO动画 */
@keyframes logo {
	0% {opacity: 0;transform: translateY(-30px);}	
	100% {opacity: 1;transform: translateY(0);}
}

/*首页欢迎slogan*/
.slogan {width: 2000px;margin-right: auto;margin-left: auto;container-type: inline-size;padding-top: 3.5%;padding-bottom: 4.5%;}
.line {font-family: BrandonText-Medium;margin-right: auto;margin-left: auto;font-size: max(10px, min(11vw, 240px));letter-spacing: -0.7vw;color: #FFF;line-height: max(25px, min(13cqw, 250px));text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.03);text-indent: -1%;}
.char {display: inline-block;opacity: 0;filter: blur(20px);transition: opacity 1s ease-out, filter 1s ease-out;}
.char.visible {opacity: 1;filter: blur(0);}

/*字体*/



/*设计作品、互动客厅*/
.central {width: 2000px;margin-right: auto;margin-left: auto;padding-top: 20px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 2%;}
.design_book {border-radius: 20px;}
.design_book a {position: relative;text-decoration: none;display: block;height: 170px;transition: all 0.5s ease-in-out;padding-top: 30px;padding-left: 30px;padding-right: 30px;border-radius:20px;box-shadow: 0 10px 30px rgba(0,0,0,.02);background: rgba(255, 255, 255, 0.6);border: 1px solid #fff;}
.design_book a:hover {background: rgba(255, 255, 255, 0.8);box-shadow: 0 10px 30px rgba(0,0,0,.07);transform:translateY(-5px);}
.design_book_b {font-family: BrandonText-Black;font-size: 40px;color: #111;line-height: 35px;letter-spacing:-2px;}
.design_book_s {font-size: 14px;color: #111;line-height: 35px;padding-left: 2px;}
.design_book_sj {height: 40px;font-family: BrandonText-Black;font-size: 40px;color: #111;position: absolute;right: 25px;bottom: 18px;opacity: 0.3;line-height: 40px;letter-spacing: -3px;}
.design_book_sj_k {margin-right: 2px;}
.nav-iframe {border: none;border-width: 0;outline: none;overflow: hidden;width: 100px;height: 40px;vertical-align: top;}

/* 频道入口动画 */
@keyframes design_book {
	0% {opacity: 0;transform: translateY(-30px);}	
	100% {opacity: 1;transform: translateY(0);}
}
.design_book:nth-child(1){ 
    animation-name: design_book ; /*动画名称，需要跟@keyframes定义的名称一致*/
    animation-duration: 1s;/*动画持续的时间长*/
    animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
} 
.design_book:nth-child(2){ animation:design_book 1.5s 1} /* 简写 */

/*工作室*/
.studio {width: 2000px;margin-right: auto;margin-left: auto;padding-top: 80px;height: 100px;}
.studio_me {font-size: 14px;height: 60px;float: left;}

.studio_me a {padding-right: 30px;display: flex;align-items: center;text-decoration: none;height: 60px;transition: all 0.5s ease-in-out;box-shadow: 0 10px 10px rgba(0,0,0,.02);color: #111;border-radius: 30px;background-color: rgba(255, 255, 255, 0.6);border: 1px solid #fff;box-sizing: border-box;}
.studio_me a:hover {background: rgba(255, 255, 255, 0.8);box-shadow: 0 10px 20px rgba(0,0,0,.07);transform:translateY(-5px);}

.studio_img {width: 90px;height: 70px;float: left;background-image: none;background-size: 83px;background-repeat: no-repeat;background-position: 10px bottom;padding-right: 20px;margin-top: -10px;border-radius: 0 0 0 30px;}
.studio_about {display: none;font-size: 14px;font-family: BrandonText-Medium;height: 60px;float: left;border-radius: 30px;margin-left: 25px;}
.studio_about a {padding-right: 25px;padding-left: 25px;display: flex;align-items: center;text-decoration: none;height: 60px;transition: all 0.3s ease-in-out;color: #111;border-radius: 30px;background-color: rgba(0, 0, 0, 0.04);}
.studio_about a:hover {background: rgba(0, 0, 0, 0.08);}

.contact_email {font-size: 16px;font-family: BrandonText-Medium;height: 60px;float: left;color: #111;background-image: none;background-size: 16px;background-repeat: no-repeat;background-position: 22px center;border-radius: 30px;background-color: rgba(0, 0, 0, 0.04);display: flex;align-items: center;padding-right: 30px;padding-left: 55px;margin-left: 25px;}
.contact_phone {font-size: 16px;font-family: BrandonText-Medium;height: 60px;float: left;color: #111;background-image: none;background-size: 16px;background-repeat: no-repeat;background-position: 22px center;border-radius: 30px;background-color: rgba(0, 0, 0, 0.04);display: flex;align-items: center;padding-right: 30px;padding-left: 55px;margin-left: 25px;}
.contact_phone a {text-decoration: none;color: #111;}

.about_me {height: 60px;float: left;}
.about_me dd.weixin {float: left;margin-left: 25px;position: relative;}
.about_me dd.weixin a {display: block;height: 60px;width: 60px;background-image: none;background-size: 22px;background-repeat: no-repeat;background-position: center center;border-radius: 30px;transition: all 0.3s ease-in-out;background-color: rgba(0, 0, 0, 0.04);}
.about_me dd.weixin a:hover {background-color: rgba(0, 0, 0, 0.08);}
.about_me dd.weixin .pic {position: absolute;left: -50px;top: -180px;width: 160px;height: 160px;background-image: none;background-size: 134px;background-repeat: no-repeat;background-position: center center;border-radius: 20px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); opacity: 0;visibility: hidden;transform: translateY(5px);transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;-webkit-backdrop-filter: saturate(100%) blur(20px);backdrop-filter: saturate(100%) blur(20px);background-color: rgba(255, 255, 255, 0.5);border: 1px solid #fff;pointer-events: none;}
.about_me dd.weixin a.cart:hover ~ .pic {opacity: 1; visibility: visible;transform: translateY(0);}
.about_me dd.weixin .cart {cursor: pointer;transition: all 0.3s ease-in-out;transform: rotate(0deg);}

.about_me dd.weibo {float: left;margin-left: 25px;}
.about_me dd.weibo a {display: block;height: 60px;width: 60px;background-image: none;background-size: 22px;background-repeat: no-repeat;background-position: center center;border-radius: 30px;transition: all 0.3s ease-in-out;background-color: rgba(0, 0, 0, 0.04);}
.about_me dd.weibo a:hover {background-color: rgba(0, 0, 0, 0.08);}
.about_me dd.qq {float: left;margin-left: 25px;}
.about_me dd.qq a {display: block;height: 60px;width: 60px;background-image: none;background-size: 17px;background-repeat: no-repeat;background-position: center center;border-radius: 30px;transition: all 0.3s ease-in-out;background-color: rgba(0, 0, 0, 0.04);}
.about_me dd.qq a:hover {background-color: rgba(0, 0, 0, 0.08);}

.wechat {float:right;}
.wechat dd.xcx {font-size: 14px;float: left;margin-right: 35px;position: relative; }
.wechat dd.xcx a {color: #111;display: block;height: 60px;background-image: none;background-size: 16px;background-repeat: no-repeat;background-position: 0px center;transition: all 0.3s ease-in-out;display: flex;align-items: center;padding-left: 20px;text-decoration: none;}
.wechat dd.xcx a:hover {opacity: 0.50;}
.wechat dd.xcx .pic {position: absolute;left: -50px;top: -180px;width: 160px;height: 160px;background-image: none;background-size: 134px;background-repeat: no-repeat;background-position: center center;border-radius: 20px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); opacity: 0;visibility: hidden;transform: translateY(5px);transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;-webkit-backdrop-filter: saturate(100%) blur(20px);backdrop-filter: saturate(100%) blur(20px);background-color: rgba(255, 255, 255, 0.5);border: 1px solid #fff;pointer-events: none;}
.wechat dd.xcx a.cart:hover ~ .pic {opacity: 1; visibility: visible;transform: translateY(0);}
.wechat dd.xcx .cart {cursor: pointer;transition: all 0.3s ease-in-out;transform: rotate(0deg);}

.wechat dd.gzh {font-size: 14px;float: left;position: relative;}
.wechat dd.gzh a {color: #111;display: block;height: 60px;background-image: none;background-size: 15px;background-repeat: no-repeat;background-position: 0px center;transition: all 0.3s ease-in-out;display: flex;align-items: center;padding-left: 20px;text-decoration: none;}
.wechat dd.gzh a:hover {opacity: 0.50;}
.wechat dd.gzh .pic {position: absolute;right: 0px;top: -180px;width: 160px;height: 160px;background-image: none;background-size: 134px;background-repeat: no-repeat;background-position: center center;border-radius: 20px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); opacity: 0;visibility: hidden;transform: translateY(5px);transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;-webkit-backdrop-filter: saturate(100%) blur(20px);backdrop-filter: saturate(100%) blur(20px);background-color: rgba(255, 255, 255, 0.5);border: 1px solid #fff;pointer-events: none;}
.wechat dd.gzh a.cart:hover ~ .pic {opacity: 1; visibility: visible;transform: translateY(0);}
.wechat dd.gzh .cart {cursor: pointer;transition: all 0.3s ease-in-out;transform: rotate(0deg);}

/*版权信息*/
.copyright {width: 2000px;margin-right: auto;margin-left: auto;height: 100px;padding-top: 10px;}
.copyright_z {float: left;}
.copyright_z dd.copyright_wz {font-size: 12px;color: #CCC;float: left;}
.copyright_z dd.copyright_wz a {margin-right: 30px;transition: all 0.3s ease-in-out;font-size: 12px;color: #111;line-height: 50px;text-decoration: none;opacity: 0.5;}
.copyright_z dd.copyright_wz a:hover {opacity:1;}
.copyright_z dd.hda {font-size: 12px;color: #666;float: left;line-height: 50px;}
.copyright_z dd.hda a {padding-left: 25px;text-decoration: none;color: #111;background-image: none;background-size: 18px;background-repeat: no-repeat;background-position: left center;display: block;transition: all 0.3s ease-in-out;opacity: 0.5;}
.copyright_z dd.hda a:hover {opacity:1;}
.copyright_y {float: right;line-height: 50px;}
.copyright_y dd.icp {font-size: 12px;float: left;padding-right: 30px;}
.copyright_y dd.icp a {transition: all 0.3s ease-in-out;font-size: 12px;color: #111;line-height: 50px;text-decoration: none;opacity: 0.5;}
.copyright_y dd.icp a:hover {opacity:1;}
.copyright_y dd.c1 {font-size: 12px;color: #111;float: left;padding-right: 30px;opacity: 0.5;}
.copyright_y dd.c1 a {transition: all 0.3s ease-in-out;font-size: 12px;color: #111;line-height: 50px;text-decoration: none;}
.copyright_y dd.c1 a:hover {opacity:1;}
.copyright_y dd.c2 {font-size: 12px;float: left;opacity: 0.5;}

/* 圆圈动画 */
@keyframes circle1 {
	from {transform: translateY(-50px) rotate(0deg);}
	50% {transform: translateY(0px) rotate(180deg);}
	to {transform: translateY(-50px) rotate(360deg);}
} 
@keyframes circle2 {
	from {transform: translateY(0px) rotate(0deg);}
	50% {transform: translateY(100px) rotate(180deg);}
	to {transform: translateY(0px) rotate(360deg);}
}
@keyframes circle3 {
	from {transform: translateY(0px) rotate(0deg);}
	50% {transform: translateY(30px) rotate(180deg);}
	to {transform: translateY(0px) rotate(360deg);}
} 
@keyframes circle4 {
	from {transform: translateY(30px) rotate(0deg);}
	50% {transform: translateY(0px) rotate(180deg);}
	to {transform: translateY(30px) rotate(360deg);}
}
.circle1 {display: block;width: 5%;top: 40%;left: 65%;aspect-ratio: 1 / 1;border-radius: 50%;position: fixed;z-index: -7;background: linear-gradient(to bottom, #dedede, #ffffff);animation: circle1 15s infinite forwards;transform: translateZ(0);}
.circle2 {display: block;width: 35%;bottom: -10%;left: -5%;aspect-ratio: 1 / 1;border-radius: 50%;position: fixed;z-index: -8;background: linear-gradient(to bottom, #dedede, #ffffff);animation: circle2 20s infinite forwards;transform: translateZ(0); filter: blur(20px);}
.circle3 {display: block;width: 45%;top: -15%;left: 65%;aspect-ratio: 1 / 1;border-radius: 50%;position: fixed;z-index: -9;background: linear-gradient(to bottom, #dedede, #ffffff);animation: circle3 25s infinite forwards;transform: translateZ(0); filter: blur(15px);}
.circle4 {display: block;width: 10%;top: -8%;left: 35%;aspect-ratio: 1 / 1;border-radius: 50%;position: fixed;z-index: -7;background: linear-gradient(to bottom, #dedede, #ffffff);animation: circle4 10s infinite forwards;transform: translateZ(0); }


/*自适应解决方案*/
@media screen and (max-width: 2200px) {
.top {width: 92%;}
.slogan {width: 92%;}
.central {width: 92%;}
.studio {width: 92%;}
.copyright {width: 92%;}
}
@media screen and (max-width: 1350px) {
.copyright_y dd.c1 {display: none;}
}
@media screen and (max-width: 1210px) {
.copyright_y dd.icp {display: none;}
}
@media screen and (max-width: 1050px) {
.copyright_y dd.c2 {display: none;}
}
@media screen and (max-width: 1160px) {
.wechat {display: none;}
}
@media screen and (max-width: 960px) {
.about_me dd.qq {display: none;}
}
@media screen and (max-width: 875px) {
.about_me dd.weibo {display: none;}
}
@media screen and (max-width: 768px) {
* {user-select:none; -webkit-user-select:none;-webkit-tap-highlight-color: transparent;}
body {overflow: hidden;}
.top {width: 88%;padding-top: 0px;position: fixed;top: 5%;left: 50%;transform: translateX(-50%);}
.logo {height: 48px;width: 48px;}
.logo a {height: 48px;width: 48px;}
.nav {display: none;}
.slogan {width: 88%;position: fixed;top: 17%;left: 50%;transform: translateX(-50%);padding-top: 0px;padding-bottom: 0px;}
.line {font-size: max(10px, min(20vw, 250px));line-height: 21vw;letter-spacing: -1.4vw;text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.06);}

/* 频道入口动画 */
@keyframes design_book {
	0% {opacity: 0;transform: translateY(-50px);}	
	100% {opacity: 1;transform: translateY(0);}
}
.design_book:nth-child(2){ 
    animation-name: design_book ; /*动画名称，需要跟@keyframes定义的名称一致*/
    animation-duration: 1s;/*动画持续的时间长*/
    animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
} 
.design_book:nth-child(1){ -webkit-animation:design_book 1.5s 1} /* 简写 */
	
/*设计作品、互动客厅*/
.central {gap: 5%;width: 88%;height: 34%;padding-top: 0px;grid-template-columns: repeat(1, 2fr);position: fixed;bottom: 155px;left: 50%;transform: translateX(-50%);}
.design_book a {height: 85%;padding-top: 19px;padding-left: 17px;padding-right: 17px;border: 0.7px solid #fff;border-radius: 18px;}
.design_book a:hover {transform:none;}
.design_book_b {font-size: 30px;line-height: 20px;}
.design_book_s {font-size: 12px;font-family: PingFangSC-Light;padding-left: 1px;line-height: 0px;vertical-align: 3px;}
.design_book_sj {font-size: 30px;right: 15px;bottom: 7px;opacity: 0.2;}
.nav-iframe {width: 80px;height: 40px;}

/*工作室*/
.studio {width: 88%;padding-top: 20px;position: fixed;bottom: 75px;left: 50%;height: auto;transform: translateX(-50%);}
.studio_me {height: 45px;}
.studio_me a {font-family: PingFangSC-Light;font-size: 12px;height: 45px;padding-right: 18px;border: 0.7px solid #fff;}
.studio_me a:hover {transform:none;}
.studio_img {width: 60px;height: 55px;background-size: 60px;background-repeat: no-repeat;background-position: 5px bottom;padding-right: 5px;margin-top: -10px;border-radius: 0 0 0 20px;}
.studio_about {font-family: PingFangSC-Light;font-size: 12px;display:block;height: 45px;margin-left: 15px;margin-right: 10px;}
.studio_about a {padding-right: 18px;padding-left: 18px;height: 45px;}

.contact_email {display: none;}
.contact_phone {display: none;}
.about_me {display: none;}
	
.wechat {display: block;}
.wechat dd.xcx {font-family: PingFangSC-Light;font-size: 12px;float: left;margin-right: 20px;}
.wechat dd.xcx a {height: 45px;background-size: 14px;padding-left: 18px;}
.wechat dd.xcx .pic {display: none;}
.wechat dd.gzh {font-family: PingFangSC-Light;font-size: 12px;}
.wechat dd.gzh a {height: 45px;background-size: 13px;padding-left: 18px;}
.wechat dd.gzh .pic {display: none;}

/*版权信息*/
.copyright {width: 88%;height: auto;position: fixed;bottom: 15px;left: 50%;transform: translateX(-50%);}
.copyright_z {display: none;}
.copyright_y {width: 100%;}
.copyright_y dd.c1 {display: block;font-size: 9px;font-family: PingFangSC-Light;float: right;padding-right: 0px;}
.copyright_y dd.c1 a {font-size: 9px;}
.copyright_y dd.c2 {display: block;font-family: PingFangSC-Light;font-size: 9px;}
	
.circle1 {width: 5%;top: 40%;left: 85%;}
.circle2 {width: 70%;bottom: 1%;left: -20%;filter: blur(5px);}
.circle3 {width: 80%;top: 10%;left: 45%;filter: blur(10px);}
.circle4 {width: 25%;top: 1%;left: 55%;}
}

@media (max-height: 736px) and (max-width: 414px) {
.line {font-size: max(10px, min(16vw, 250px));line-height: 16vw;letter-spacing: -1vw;}
}