@import "common.css";

.font-color{color: var(--color);}
.bg-color{background-color: var(--color);}

/* 案例轮播 */
.case-banner{height: 680px;}
.case-banner .info{height: 600px;}
.case-banner .info .left{width: 58%;}
.case-banner .info .left h3{font-size: 58px; link: 58px;}
.case-banner .info .left h4{font-size: 22px; link: 22px;}
.case-banner .info .left .qr-button,.case-banner .info .left .doc-button{width: 168px; height: 50px; line-height: 50px; color: var(--color);}
.case-banner .info .left .qr-button .qr{width: 180px; height: 180px; transform: translateY(-260px); opacity: 0; visibility: hidden;}
.case-banner .info .left .qr-button:hover{color: var(--color);}
.case-banner .info .left .qr-button:hover .qr{transform: translateY(-200px); opacity: 1; visibility: visible;}
.case-banner .info .right:after{width: 100%; height: 2px; background: #FFFFFF; position: absolute; right: 0; bottom: -5px; content: '';transition: all 0.3s ease-in-out;}
.case-banner .info .right p{font-size: 18px; link: 18px;}
.case-banner .info .right i{width: 22px; height: 22px;animation: right-i 1s linear infinite;}
.case-banner .info .right:hover:after{width: 0;}
.case-banner .info .marketing-img{height: 600px; margin-top: 20px;}
@-webkit-keyframes right-i {
    0%   {transform: translateX(0);}
    50%  {transform: translateX(30%);}
    100% {transform: translateX(0);}
}

/* 标题 */
.detail-title{width: 1200px; z-index: 2;}
.detail-title h3{font-size: 45px; line-height: 45px;}
.detail-title span{font-size: 58px; z-index: -1; color: #F2F5F8;}
.detail-title em{font-size: 58px; z-index: -1; color: rgba(255,255,255,0.18);}
.detail-title p{font-size: 58px; z-index: -1; color: rgba(0,0,0,0.028);}

/* 颜色 */
.detail-color li{width: 25%; height: 180px; padding: 28px 30px;}
.detail-color li:nth-child(2){background-color: rgb(58,58,58);}
.detail-color li:nth-child(3){background-color: rgb(108,108,108);}
.detail-color li:nth-child(4){background-color: rgb(158,158,158);}
.detail-color li p span{font-size: 14px;}
.detail-color li p span:first-child{min-width: 18px; color: rgba(255,255,255,0.68);}
.detail-color li p span:last-child{color: #FFFFFF;}

/* 字体 */
.detail-fonts h3{font-size: 28px; line-height: 28px;}
.detail-fonts img{width: 518px;}
.detail-fonts ul{border-top: #EEEEEE 1px solid;}
.detail-fonts ul li{width: 25%; height: 180px; border-right: #EEEEEE 1px solid; border-bottom: #EEEEEE 1px solid; padding-left: 50px;}
.detail-fonts ul li:nth-child(4n){border-right: 0;}

/* 设计 */
.detail-design{padding-bottom: 100px;}
.detail-design-detailed{width: 750px; border-radius: 20px; border: #FFFFFF 5px solid;}
.detail-design-detailed img{max-width: 750px;}
.detail-design-detailed p:first-child img{border-radius: 15px 15px 0 0;}
.detail-design-detailed p:last-child img{border-radius: 0 0 15px 15px;}

/* 电脑 */
.pc{max-width: 1210px; border-radius: 20px; box-shadow: 0 45px 80px -24px #8591a0; border: #333333 5px solid; background: #333333;}
.pc img{max-width: 1200px;}

/* 手机 */
.h5{width: 310px; border-radius: 20px; box-shadow: 0 45px 80px -24px #8591a0; border: #333333 5px solid; background: #333333; margin-right: 140px; position: relative;}
.h5:after{width: 28%; height: 5px; background: #282828; border-radius: 4px; position: absolute; bottom: 8px; content: '';}
.h5:nth-child(3n){margin-right: 0;}
.h5 img{max-width: 300px;}

/* 小程序 */
.applets-detailed img{max-width: 1200px;}

/* 感谢 */
.thank{border-radius: 18px; padding: 0 50px;}
.thank h3{font-size: 50px; line-height: 50px;}
.thank h4{font-size: 28px; line-height: 28px;}
.thank ul{height: 118px; padding: 0 50px; border-top: #EEEEEE 1px solid;}
.thank ul li i{font-size: 26px;}

/* 下一篇 */
.next{height: 198px;}
.next:after{width: 100%; height: 100%; background-color: rgba(0,0,0,0.58); left: 0; top: 0; content: ''; z-index: 2;}
.next h3{font-size: 32px; line-height: 32px;}
.next h4{font-size: 20px; line-height: 20px;}
.next a{color: #FFFFFF;}