/**
 * 基本还是原来coding_pm.css的代码，就是原来用jquery实现的功能换成vue后，代码稍有变化。
 * 主要是原来用jquery，页面的动态变化全靠jquery做css操作。但vue有v-show和v-if条件渲染，原来coding_pm.css的代码中默认的display:none的代码就要去掉。
 * 另外vue的class和style css样式绑定可能不能出现横杠。所以类似codingPM-nav-close就需要改成codingPMnavClose。
 */


body,html{padding:0;margin:0;font-family:myFont,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
*{-webkit-box-sizing:border-box;box-sizing:border-box}


/* 自定义公共样式 */
.codingPM-bold{font-weight: 500;}
.codingPM-link{color: #E1A83F;text-decoration: underline;}


/* 整个页面容器 */
.codingPM-container{width:100%;padding:0;display:flex;flex-direction:column;align-items:center;min-height:100vh}


/* 导航栏 */
.codingPM-nav{width:100%;z-index:3}
.Nav-container{position:fixed;top:0;left:0;flex-direction:column;justify-content:center;box-shadow:0 1px 0 0 rgba(0,0,0,.06);background-color:hsla(0,0%,94.1%,.5);transition:background-color .1s}
.Nav-container,.Nav-body{width:100%;height:64px;display:flex;align-items:center}
.Nav-body{justify-content:space-between;max-width:1256px;padding:0 48px}
.Nav-body-logo{display: flex;align-items: center;}
.Nav-body-logo-img{height:38px}
.Nav-body-logo-title{padding: 0 3px;letter-spacing:1px}
.Nav-body .Nav-body-items{list-style:none;display:flex;align-items:center;height:100%;margin:0;padding:0}
.Nav-body .Nav-body-items .Nav-body-item{width:-moz-fit-content;width:fit-content;margin-right:40px;min-height:24px;font-size:16px;line-height:24px;letter-spacing:.27px;text-align:center;cursor:pointer;-webkit-transition:visibility 0s linear .3s,opacity .3s;transition:visibility 0s linear .3s,opacity .3s}
.Nav-body .Nav-body-items .Nav-body-item.Nav-mobile{margin-right:0}
/* .Nav-body .Nav-body-items .Nav-body-item.codingPM-nav-buy{display:none;opacity:1;width:124px;divne-height:36px;color:white;background-color:#E1A83F;border-radius:18px;margin-right:0} */
.Nav-body .Nav-body-items .Nav-body-item.codingPM-nav-buy{opacity:1;width:124px;divne-height:36px;color:white;background-color:#E1A83F;border-radius:18px;margin-right:0}
.Nav-mobile{display:none;cursor:pointor;}
.Nav-mobile img{width:32px;height:32px}
.Nav-body-mobile{display:none;position:fixed;top:64px;left:0;width:100%;height:100vh;z-index:2;background-color:#fff;opacity:1;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}
.Nav-body-mobile .Nav-body-items{list-style:none;padding:42px 32px;margin:0}
.Nav-body-mobile .Nav-body-items .Nav-body-item{display:block;cursor:pointer;line-height:56px;height:56px;font-size:20px;font-weight:500;background-position:100%;background-repeat:no-repeat;background-size:auto 30%;border-bottom: 1px solid #dee0e3;background-image:url(../../images/home/icon/right.svg)}
@media screen and (max-width:756px){
	.Nav-body-logo-img{height:32px}
	.Nav-body-mobile{display:block;transform:translateX(0)}
	/* .Nav-body-mobile.codingPM-nav-close{transform:translateX(100%)} */
	.Nav-body-mobile.codingPMnavClose{transform:translateX(100%)}
	.Nav-body{padding:0 40px}
	.Nav-hide{display:none!important}
	.Nav-mobile{display:block;}
	/* .Nav-mobile .codingPM-nav-hide{display:none} */
	/* .Nav-container.codingPM-nav-mobile{background-color:white !important;opacity:0.9 !important;} */
	.Nav-container.codingPMnavMobile{background-color:white !important;opacity:0.9 !important;}
}
@media screen and (max-width:428px){
	.Nav-body{padding:0 32px}
}


/* 页面主体主视图背景 */
.Home-back{position:absolute;top:0;left:0;height:1000px;z-index:0;background-position:top;background-repeat:no-repeat;width:100%;background-image:linear-gradient(to bottom, rgba(241, 241, 241, 1) 70%, rgba(241, 241, 241, 0) 100%)}
@media screen and (max-width:696px){
	.Home-back{z-index:1;height:1000px}
}


/* 页面主体 */
.codingPM-main{position:relative;padding:0;flex:1 1;display:flex;flex-direction:column;align-items:center;width:100%;z-index:2;opacity:1}
.codingPM-main-item{margin-bottom:200px;max-width:100%;z-index:2}
.codingPM-main-feature{margin-bottom:167px}
@media screen and (max-width:696px){
	.codingPM-main-item{margin-bottom:88px}
}
/* 页面主体-主视图区 */
.View-container{width:1256px;max-width:100%;padding:0 48px;display:flex;flex-direction:column}
.codingPM-home {display: flex;justify-content: space-between;}
.codingPM-home-left {}
.View-title{margin:216px 0 0;width:-moz-fit-content;width:fit-content;line-height:63px;letter-spacing:9.24px;font-size:45px;font-weight:700;color:rgba(0,0,0,.9);background:-webkit-gradient(linear,left top,right top,from(#323d3a),to(#4e5b54));background:-webkit-linear-gradient(left,#323d3a,#4e5b54);background:linear-gradient(90deg,#323d3a,#4e5b54);color:transparent;-webkit-background-clip:text;background-clip:text}
.View-subtitle{margin:23px 0 0;line-height:28px;font-size:20px;letter-spacing:2.9px;opacity:.6}
.View-button{margin:40px 0 0;height:48px;width:213px;line-height:48px;border-radius:24px;text-align:center;font-size:20px;font-weight:500;color:#fff;background:-webkit-gradient(linear,left top,right top,from(#e1a83fdb),to(#E1A83F));background:-webkit-linear-gradient(left,#e1a83fdb,#E1A83F);background:linear-gradient(90deg,#e1a83fdb 0,#E1A83F);-webkit-transition:opacity .3s;transition:opacity .3s}
.View-button:active{background-color:#E1A83F}
.View-a{display:block;width:100%;height:100%;cursor: pointer;}
.codingPM-home-right {display: flex;justify-content: center;align-items: center;}
.codingPM-home-right img {max-width: 100%;max-height: 100%;}
@media screen and (min-width:696px){
	.codingPM-home {flex-direction: row;}
	.codingPM-home-right {margin-top: 180px;}
}
@media screen and (max-width:696px){
	.codingPM-home{flex-direction: column;}
	.codingPM-home-right {margin-top:20px;}
}
@media screen and (max-width:428px){
	.View-container{padding:0 32px}
	.View-title{margin:135px 0 0;width:-moz-fit-content;width:fit-content;line-height:40px;letter-spacing:3.65px;font-size:28px;font-weight:700}
	.View-subtitle{margin:16px 0 0;line-height:17px;font-size:12px;letter-spacing:1.74px}
}
/* 页面主体-特色视图区 */
.Feature-container{width:1256px;max-width:100%;padding:0 48px;display:flex;justify-content:space-between}
.Feature-card{width:260px;padding-right:10px}
.Feature-card:last-child{padding-right:0}
.Feature-title{display:flex;align-items:center;font-size:20px;font-weight:500;letter-spacing:1px;line-height:27.2px;margin-bottom:16px;opacity:.7}
.Feature-line{display:inline-block;width:3px;height:17px;margin:0 15px 0 0;background:#E1A83F}
.Feature-content{font-size:14px;letter-spacing:0;line-height:22.4px;color:rgba(0,0,0,.9);opacity:.5;text-align: justify;}
@media screen and (max-width:696px){
	.codingPM-main-feature{margin-bottom:88px}
	.Feature-container{flex-direction:column;padding:0 32px}
	.Feature-card{width:100%;display:flex;align-items:center}
	.Feature-content{margin:0 0 0 16px;line-height:27px}
}
@media screen and (max-width:651px){
	.Feature-card{flex-direction:column;align-items:start}
	.Feature-content{margin:0}
}
/* 页面主体-标签页视图区 */
.Swiper-container{width:1256px;max-width:100%;padding:0 48px}
.Swiper-title{margin:0;font-size:28px;font-weight:500;line-height:34px}
.Swiper-back{background-size: 400px;background-position: 100px 0px;background-repeat: no-repeat;background-image: url(../../images/home/backgroundSwicher.png);}
@media screen and (max-width: 428px) {
	.Swiper-back{background-image: none;background-color: white;}
}
.Swiper-body{min-width:100%;height:560px;margin-top:48px;border-radius:18px;background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.02)),to(rgba(0,0,0,.01)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.02),rgba(0,0,0,.01));background-image:linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.01))}
.Swiper-switchers{list-style:none;display:flex;padding:32px 0 0 40px;margin:0}
.Swiper-switcher{display:flex;flex-direction:column;align-items:center;margin-right:28px;font-size:14px;line-height:23px;cursor:pointer;opacity:0.15}
/* .Swiper-switcher.codingPM-swiper-on{opacity:0.5} */
.Swiper-switcher.codingPMSwiperOn{opacity:0.5}
.Swiper-lineBack{margin:4px 10% 0;width:80%;height:2px;border-radius:3.5px;background-color:rgba(0,0,0,.2);align-self:flex-start;visibility:hidden}
/* .codingPM-swiper-on .Swiper-lineBack{visibility:visible} */
.codingPMSwiperOn .Swiper-lineBack{visibility:visible}
.Swiper-line{display:block;height:2px;background-color:#E1A83F;border-radius:3.5px}
/* .Swiper-content{display:none;}
.Swiper-content.codingPM-active-txt{display: flex;width:100%;height:calc(100% - 60px)} */
.Swiper-content{display: flex;width:100%;height:calc(100% - 60px)}
.Swiper-left{width:45%;height:100%;padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.Swiper-subtitle{margin:10px 0;line-height:40px;font-size:28px;font-weight:500;width:360px;max-width:100%}
.Swiper-info{margin:6px 0;font-size:16;line-height:25.6px;max-width:360px;}
.Swiper-info.codingPM-fixedWidth{width: 360px;max-width: 100%;}
.Swiper-right{width:55%;padding:20px;display:flex;justify-content:center;align-items:center}
.Swiper-image{max-width:80%;}
@media screen and (max-width:696px){
	.Swiper-container{padding:0 32px}
	.Swiper-title{font-size:22px}
	.Swiper-body{height:-moz-fit-content;height:fit-content}
	/* .Swiper-content.codingPM-active-txt{flex-direction:column} */
	.Swiper-content{flex-direction:column}
	.Swiper-left{width:100%;margin:71px 0 66px;padding:0 40px}
	.Swiper-subtitle{width:460px;max-width:100%;font-size:22px}
	.Swiper-info{margin:6px 0;font-size:16;line-height:25.6px;max-width:460px}
	.Swiper-right{width:100%;margin-bottom:54px}
}
@media screen and (max-width:428px){
	.Swiper-body{background-image:none}
	.Swiper-switchers{padding:0}
	.Swiper-left{width:100%;padding:0;margin:45px 0 32px}
	.Swiper-right{padding:0;margin-bottom:0}
	.Swiper-image{max-width:100%}
}


/* 页面底部 */
.codingPM-footer{padding:99px 0 48px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fbfbfb}
.codingPM-footer-info{font-size:14px;line-height:20px;opacity:.3}
.codingPM-footer-info-title{}
.codingPM-footer-info-subtitle{display: flex;justify-content: center;}
.codingPM-footer-link{display: flex;align-items: center;padding: 0 5px;}
@media screen and (max-width:428px){
	.codingPM-footer-info{font-size:12px}
}