@charset "utf-8";
html { font-size: 100px; background: #F9F9F9; }
.pw1400 { max-width: 14rem; width: 96%; margin: 0 auto; }
.pw1020 { max-width: 10.2rem; width: 96%; margin: 0 auto; }
.dsn { display: none; }
.ft52 { font-size: 0.52rem; }
.ft40 { font-size: 0.4rem; }
.ft36 { font-size: 0.36rem; }
.ft30 { font-size: 0.3rem; }
.ft28 { font-size: 0.28rem; }
.ft26 { font-size: 0.26rem; }
.ft20 { font-size: 0.2rem; }
.ft22 { font-size: .22rem; }
.ft14 { font-size: 0.14rem; }
.mt100 { margin-top: 1rem; }
.mt80 { margin-top: 0.8rem; }

/* section1 */
.banner { background: url(../img/resources-banner-bgimg.png) top center no-repeat; background-size: 100% 140%; padding: 0.9rem 0 1rem; }
.banner-info { text-align: center; }
.banner-title { color: #FFF; font-weight: 600; }
.banner-des { color: #FFF; margin-top: 0.2rem;}
.banner-cont { margin-top: 1rem; border-radius: .3rem; background: rgba(255, 255, 255, 0.90); box-shadow: 0 4px 38.4px 0 rgba(0, 0, 0, 0.25);
backdrop-filter: blur(100px); padding: 0.4rem 0.8rem 0.6rem; box-sizing: border-box; }
.special-font img { vertical-align: bottom; }
.banner-item { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.article-title { color: #000; font-weight: 600; }
.article-title a { text-decoration: none; color: inherit; }
.article-title a:hover { color: #2C67FF; }
.banner-item-text { max-width: 6.4rem; width: 49%; }
.banner-item-img { max-width: 5.1rem; width: 49%; border-radius: 0.2rem; overflow: hidden; }
.banner-item-img img { vertical-align: bottom; }
.article-author-info { display: flex; align-items: center; margin-top: 0.2rem; }
.article-author-info img { margin-right: 0.15rem; width: 0.58rem; }
.author-name { font-weight: 500; color: #000; }
.article-time { font-weight: inherit; color: #666; }

/* swiper */
.swiper-page { position: relative; text-align: center; display: none; left: 0; }
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { position: relative; display: inline-block; bottom: auto; width: auto; border-radius: 0.36rem; background: #EAEAEA; padding: 0.1rem 0.2rem; }
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { border-radius: 0.2rem; background: #fff; opacity: 1; }
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active { width: 0.36rem; border-radius: 0.3rem; position: relative; overflow: hidden; }
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active::after { content: ""; position: absolute; width: 0%; top: 0; height: 100%; left: 0; background: #343434; }
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active::after{animation: activity 10s linear infinite;}

@keyframes activity {0%{width: 0%;}100%{width: 100%;}}

/* section2 */
.top-item-moimg { display: none; }
.swiper-lists { border-bottom: 1px solid #E2E2E2; }
.tab-lists { display: flex; }
.tab-lists p {color: #333; font-weight: 600; padding-bottom: 0.2rem; width: 2rem; text-align: center; position: relative; cursor: pointer;}
.tab-lists p.act { color: #2C67FF; }
.tab-lists p::after { content: ""; display: block; height: 2px; width: 0%; background: #2C67FF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.tab-lists p:hover { color: #2C67FF; }
.tab-lists p:hover::after { width: 100%; transition: width .4s ease-in-out; }
.top-article-title { color: #000; text-align: center; font-weight: 500; }
.top-article-lists { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 0.4rem; margin-top: 0.4rem; }
.top-article-lists.dsn { display: none; }
.top-article-item { max-width: 4.4rem; width: 30%; border-radius: .16rem; border: 1px solid #DDE5F3; background: #FFF; box-sizing: border-box; padding: 0.2rem 0.19rem; transition: transform .3s ease-in-out;}
.top-article-item:hover { transform: translateY(-0.1rem); transition: transform .3s ease-in-out; }
.top-article-item:hover h4 { color: #2C67FF; }
.top-article-item a { text-decoration: none; }
.top-article-item-des { color: #000; font-weight: 500; }
.top-article-item-des { color: #333; margin: 0.1rem auto 0.26rem; }
.top-article-item-info { display: flex; justify-content: space-between; align-items: center; }
.top-article-item-info img { vertical-align: middle; border-radius: 50%; margin-right: 0.1rem;}
.top-article-item-title { font-weight: 500; }
.top-article-author-info { color: #000; font-weight: 600; }
.top-article-update-time { color: #2C67FF; display: inline-block; border-radius: 4px; background: #E6EDFF; padding: 0.04rem 0.1rem; }

/* section3 */
.joy-article h3 { color: #000; text-align: center; font-weight: 500; }
.joy-article-lists { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.joy-article-lists.dsn { display: none; }
.joy-article-item { max-width: 6.8rem; width: 48%; box-sizing: border-box; padding: 0.16rem 0.2rem; border-radius: .1rem; background: #FFF; }
.joy-article-title { color: #000; font-weight: 500; }
.joy-article-title a { color: inherit; text-decoration: none; }
.joy-article-title:hover a { color: #2C67FF; }
.joy-article-des { color: #333; margin: 0.1rem auto 0.2rem; }
.joy-article-info { display: flex; align-items: center; }
.joy-article-info img { vertical-align: bottom; margin-right: 0.1rem; border-radius: 50%; }
.joy-article-name { color: #000; font-weight: 600; }
.joy-article-time::before { display: inline-block; content: "|"; margin: 0 0.16rem; color:#D0D0DB; }
.joy-article-time { color: #999; font-weight: 400; }

/* section4 */
.hot-topics h3 { color: #000; text-align: center; font-weight: 500; }
.topics-lists { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; }
.topics-lists a { display: block; font-weight: 500; color: #000; text-decoration: none; padding: 0.2rem 0.6rem; border-radius: .16rem; border: 1px solid #E6E6E6; background: #FFF; }
.topics-lists a:hover { border: 1px solid transparent; background: url(../img/resources-topics-bgimg.png) top center no-repeat; background-size: 100% 100%; box-shadow: 0 8px 20px 0 rgba(158, 98, 255, 0.20); }

/* section5 */
.sec5 {text-align: center;padding: 1rem 0;background: url(../img/resources-product-bgimg.png) top center no-repeat #000; background-size: cover; }
.banner_btns .down_btn { display: inline-block; border-radius: .1rem; font-weight: 600; color: #fff; text-decoration: none; box-sizing: border-box; max-width: 2.2rem; width: 100%; padding: .15rem 0; margin: .4rem .1rem .1rem; background: linear-gradient(90deg, #2C67FF 0%, #9E62FF 100%);overflow: hidden;}
.banner_btns .down_btn svg,.banner_btns .buy_btn svg{display: inline-block;vertical-align: middle;margin-left: 5px;}
.banner_btns .buy_btn { display: inline-block; border: 2px solid #FFF;  border-radius: .1rem; font-weight: 600; color: #fff; text-decoration: none; box-sizing: border-box; max-width: 2.2rem; width: 100%; padding: .13rem 0;  margin: .4rem .1rem .1rem; overflow: hidden;}
.banner_btns>a> svg{transform: translateY(-1px);}
.banner_btns em { font-style: normal; color: #707070; display: block; }
.banner_btns .down_btn span::after{ content: 'Free Download'; display: block; width: 100%; position: absolute; left: -0.11rem; bottom: 0; transform: translateY(.39rem); -webkit-transform: translateY(.39rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6662 1.5C11.6662 1.22386 11.4423 1 11.1662 1H6.09952C5.82338 1 5.59952 1.22386 5.59952 1.5V8.3C5.59952 8.57614 5.37567 8.8 5.09952 8.8H4.27835C3.8232 8.8 3.60476 9.35868 3.93921 9.6674L8.29372 13.6869C8.48525 13.8637 8.78047 13.8637 8.972 13.6869L13.3265 9.6674C13.661 9.35868 13.4425 8.8 12.9874 8.8H12.1662C11.89 8.8 11.6662 8.57614 11.6662 8.3V1.5Z' fill='white'/%3E%3Cpath d='M3.5 17C3.5 16.4477 3.94772 16 4.5 16H12.5C13.0523 16 13.5 16.4477 13.5 17C13.5 17.5523 13.0523 18 12.5 18H4.5C3.94772 18 3.5 17.5523 3.5 17Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right 5%;}
.banner_btns .buy_btn span::after{ content: 'See Pricing'; display: block; width: 100%; position: absolute; left: -0.11rem; bottom: 0; transform: translateY(.39rem); -webkit-transform: translateY(.39rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M7.42857 4H16L13.8571 12H3.14286V3H1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='5' cy='16' r='2' fill='white'/%3E%3Ccircle cx='12' cy='16' r='2' fill='white'/%3E%3Cpath d='M3 8H15L14 12H3V8Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center right 14%;}
.banner_btns .down_btn span,.banner_btns .buy_btn span{display: block;transition: all .6s }
.banner_btns .down_btn div,.banner_btns .buy_btn div{height: .3rem;overflow: hidden;}
.banner_btns .buy_btn:hover span,.banner_btns .down_btn:hover span { transform: translateY(-0.39rem); }   
.resources-product {max-width: 8.7rem;margin: 0 auto;}
.resources-product p{color: #FFF; font-weight: 600;}
.resources-product p img{display: inline-block;vertical-align: middle;margin-right: 0.2rem;}
.resources-product h3{color: #FFF; font-weight: 600; margin: .2rem auto 0rem;}
.resources-product .banner_btns .down_btn{margin-top: .3rem;margin-bottom: 0;vertical-align: bottom;}
.resources-product .banner_btns .buy_btn{margin-top: .3rem;margin-bottom: 0;vertical-align: bottom;}
.resources-product .banner_btns em{margin-top: .2rem;max-width: 80%;margin-left: auto;margin-right: auto;}

@media screen and (max-width: 1200px) {
    .top-article-lists { gap: 0.4rem 0.15rem; }
    .top-article-item { width: 32%; padding: 0.2rem 0.1rem; }
    .joy-article-lists { gap: 0.4rem 2%; }
    .banner-cont { padding: 0.4rem; }
}

@media screen and (max-width: 980px) {
    .banner-item { flex-direction: column; gap: 0.4rem; }
    .top-article-lists { gap: 0.4rem 0.2rem; }
    .top-article-item { width: 48%; padding: 0.2rem; }
    .joy-article-item { max-width: 100%; width: 100%; }
    .banner-item-text { width: 100%; max-width: 100%; margin-top: 0.3rem; }
    .banner-item-img { width: auto; }
}

@media screen and (max-width: 750px) {
    .banner { background-size: cover; }
    .tab-lists p { font-size: clamp(16px, 0.22rem, 22px); }
    .top-article-item { width: 100%; max-width: 100%; padding: 0.4rem; text-align: center; }
    .ft36 { font-size: clamp(28px, 0.36rem, 36px); }
    .ft20 { font-size: clamp(18px, 0.2rem, 20px); }
    .ft14 { font-size: clamp(14px, 0.14rem, 14px); }
    .ft28 { font-size: clamp(24px, 0.28rem, 28px); }
    .ft40 { font-size: clamp(30px, 0.4rem, 40px); }
    .ft52 { font-size: clamp(36px, 0.52rem, 52px); }
    .ft22 { font-size: clamp(16px, 0.22rem, 22px); }
    .article-title.ft30 { font-size: clamp(26px, 0.3rem, 30px); }
    .banner_btns .down_btn{max-width: 295px;font-size: 19px; padding: 15px 0;}
    .banner_btns .buy_btn{max-width: 295px;font-size: 19px;  padding: 15px 0;}
    .banner_btns .down_btn div, .banner_btns .buy_btn div { height: 30px; }
    .resources-product .banner_btns .buy_btn{ padding: 13px 0; }
    .banner_btns .buy_btn span::after, .banner_btns .down_btn span::after { display: none; }
    .banner_btns .buy_btn:hover span, .banner_btns .down_btn:hover span { transform: translateY(0); }
    .banner-item-img { width: 100%; max-width: 100%; }
    .banner-item-img img { width: 100%; }
    .banner-des.ft20 { font-size: 14px; }
    .tab-lists p { max-width: none; width: auto; padding: 0 0.2rem 0.1rem; }
    .tab-lists p:first-child { padding-left: 0; }
    .tab-lists p:last-child { padding-right: 0; }
    .top-item-moimg { display: block; margin: 0.4rem auto; }
    .top-item-pcimg { display: none; }
}