/* common */
        .text-primary {color: #181818;}
        .text-gray-1 {color: #888888;}
        .text-gray-2 {color: #555555;}

        .banner-text-1 {font-size: 14px; line-height: 1.7;}
        .h1-title {font-size: 55px;line-height: 1;}
        .h2-title {font-size: 38px;line-height: 1;}
        .h3-title {font-size: 24px; line-height: 1;}
        .h4-title {font-size: 16px; line-height: 1;}
        .btn-banner {font-size: 14px;line-height: 1;border-radius: 40px;border: none;margin: 0;font-weight:500;width: 152px;height: 44px; display: inline-flex; justify-content: center; align-items: center; transition: 0.3s;}
        .btn-banner:hover {
            text-decoration: none;
            transform: perspective(1px) scale(1.05, 1.05);
            transition: all .2s ease-in;
            position: relative;
            z-index: 1;
            color: inherit;
        }
        .bottom-section-title {font-size: 30px;line-height: 1.33;}
        @media (min-width: 768px) {
            .banner-text-1 {font-size: 18px; line-height: 1.45;}
            .h1-title {font-size: 65px;}
            .h2-title {font-size: 55px;}
            .h3-title {font-size: 32px; line-height: 1.1;}
            .h4-title {font-size: 20px; line-height: 1;}
            .btn-banner {font-size: 16px;border-radius: 50px;width: 185px;height: 54px;}
            .bottom-section-title {font-size: 45px;}
        }
        @media (min-width: 1280px) {
            .banner-text-1 {font-size: 24px; line-height: 1;}
            .h1-title {font-size: 76px;}
            .h2-title {font-size: 76px;}
            .h3-title {font-size: 42px; line-height: 1.1;}
            .h4-title {font-size: 24px; line-height: 1;}
            .btn-banner {font-size: 20px;border-radius: 60px; width: 220px;height: 64px;}
            .bottom-section-title {font-size: 60px;}
        }
        /* common */

        /* codex字体大小自适应 */
        @media (max-width: 1279px) {
            .display-1 {font-size: 3.5rem;}
            .font-size-super {font-size: 18px;}
            .font-size-huge {font-size: 16px;}
            .font-size-normal {font-size: 14px;}
            main p {font-size: 14px;}


        }
        @media (max-width: 991px) {
            .display-1 {font-size: 2.75rem;}
            .font-size-super {font-size: 16px;}
            .font-size-huge {font-size: 14px;}
        }
        @media (max-width:767px) {
            .display-1 {font-size: 2rem;line-height: 1.25;}
            .font-size-super {font-size: 12px;}
            .font-size-huge {font-size: 12px;}
            .font-size-normal {font-size: 12px;}
            main p {font-size: 12px;}
            .font-size-small {font-size: 12px;}
        }

        /* codex字体大小自适应 */

        /* banner背景图（默认为原型页面的背景图，需自行覆盖） */
        .banner-img {filter: drop-shadow(0px 80px 50px rgba(0, 64, 138, 0.5));}
        .banner-bg {
            background-color: #fefcf7;
           
            background-repeat:  no-repeat;
            background-position: center bottom;
            background-size: 100% auto;
            padding-bottom: 185px;
            padding-top: 30px;
        }
        @media (min-width: 375px) {
            .banner-bg { padding-bottom: 225px;}
        }
        @media (min-width: 768px) {
            .banner-bg { padding-bottom: 400px;}
        }
        @media (min-width: 992px) {
            .banner-bg {
                padding-bottom: 0;
                padding-top: 60px;
                background-image: url('../picture/banner-bg.jpg');
                background-position: center bottom;
                background-size: auto 100%;
                background-repeat:  no-repeat;
            }
        }
        @media (min-width: 1280px) {
            .banner-bg {
                background-size: auto;
            }
        }
        /* banner背景图 */

        /* bottom-section背景图（默认为原型页面的背景图，需自行覆盖） */
        .bottom-section {
            background-image: url('../picture/bottom-section-bg-mobile-1.svg');
            background-size: cover;
            background-position: center;
            background-repeat: repeat;
        }
        @media (min-width: 768px) {
            .bottom-section {
                background-image: url('../picture/bottom-section-bg-1.svg');
            }
        }
        /* bottom-section背景图 */

        /* custom list-style（默认为原型页面的样式，需自行覆盖） */
        .aside_list {line-height: 250%;padding-left: 15px;margin-bottom: 0;}
        .aside_list .aside_item {position: relative;list-style: none;}
        .aside_list .aside_item::before {content: '';width: 7px;height: 7px;background: linear-gradient(265.5deg, #32E2E2 1.04%, #0C99FF 21.36%, #007BFF 69.11%, #916DDC 87.91%, #FF867B 98.58%);border-radius: 50%;position: absolute;right: calc(100% + 0.5rem);top: 50%;transform: translateY(-50%);}
        @media (min-width: 768px) {
            .aside_list .aside_item::before {width: 11px;height: 11px;}
        }
        @media (min-width: 1280px) {
            .aside_list {padding-left: 28px;}
            .aside_list .aside_item::before {width: 14px;height: 14px;right: calc(100% + 0.75rem);}
        }
        /* custom list-style */
		
		#wsc-main .btn { border-radius: 7.5rem; line-height: 1; }
		#wsc-main .btn-outline-black { border-color: #2E3546; color: #2E3546; padding: 1rem 3.6875rem; }
		#wsc-main .btn-outline-black:hover { background-color: #2E3546; color: #FFFFFF; }
		#wsc-main .btn-gradient { border: 0; background: linear-gradient(107.94deg, #FFBB6A -4.82%, #FF4949 12.1%, #FF365A 72.7%, #FF6838 100%); box-shadow: 0px 0.9375rem 2.0625rem rgba(209, 27, 58, 0.25) !important; color: #FFFFFF; padding: 1.125rem 3.8125rem; }
		#wsc-main { background: #F1F4FA; }
		#wsc-main .section { height: calc(100vh - 142px); }
		.line-height-100 { line-height: 100%; }
		.font-size-60 { font-size: 3.75rem; }
		.part-banner::before { padding-top: calc(100vh - 72px); }
		.part-banner .banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; transform: scale(1.2); opacity: 0.3; }
		.part-banner .main-content { width: 100%; height: 100%; top: 0; left: 0; }
		.part-banner .main-content .lottie-banner { max-width: 640px; }
		.part-banner .fade-up { opacity: 0; }
		.part-banner .logged { display: none; }
		.part-banner .input-group { max-width: 530px; padding: 0.5rem; border-radius: 7.5rem; background: rgba(255, 255, 255, 0.8); }
		.part-banner .input-group .form-control { border: 0; box-shadow: none !important; border-radius: 7.5rem; background: transparent; font-size: 1.125rem; line-height: 1; }
		.part-banner .input-group .form-control::placeholder { color: #9A9FAD; }
		.part-banner .input-group .input-group-append .btn-gradient { border-radius: 7.5rem; padding: 1.25rem 2.875rem; font-size: 1.5rem; line-height: 1; }
		.part-banner.active .banner-img { animation: banner-bg 2s ease-in-out forwards; }
		.part-banner.active .main-content .lottie-banner { animation: json 1s ease-in-out forwards; }
		.part-banner.active .fade-up { animation: fade-up 0.7s ease-in-out 0.7s forwards; }
		.swiper-bar li { min-height: 78px; padding: 0.5rem; }
		.swiper-bar li div { font-size: 1rem; color: rgba(88, 94, 109, .7); transition: all .2s ease-in-out; }
		.swiper-bar li img { border: 1px solid #FFFFFF; transition: all .2s ease-in-out; }
		.swiper-bar li.active img { border-color: #007BFF; transform: scale(1.25); }
		.swiper-bar li.active div { font-size: 1.125rem; font-weight: 700; color: #2E3546; }
		.swiper-bar li.active div .text-gradient { font-size: 1.875rem; font-weight: 900; background: linear-gradient(135.56deg, #4CD3FE 1.98%, #188CFC 53.67%, #BF38FF 129.24%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
		.ball { border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); opacity: .2; transition: all 1s ease-in-out; pointer-events: none; z-index: -1; }
		.ball1 { right: 0; width: 744px; height: 744px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(135.56deg, #4CF3FE 1.98%, #18AAFC 53.67%, #3C38FF 129.24%); }
		.ball2 { right: -10%; width: 846px; height: 846px; background: linear-gradient(135.56deg, #D5E0FF 1.98%, #DECEFF 53.67%, #FFC0F9 129.24%); }
		.ball3 { left: -10%; width: 744px; height: 744px; background: linear-gradient(135.56deg, #FCD5FF 1.98%, #FFCEE9 53.67%, #FFDCD5 129.24%); }
		.ball4 { left: 20%; width: 740px; height: 740px; background: linear-gradient(135.56deg, #D5E0FF 1.98%, #DECEFF 53.67%, #FFC0F9 129.24%); }
		.ball5 { max-width: 0; width: 1284px; height: 1284px; background: linear-gradient(135.56deg, #D5E0FF 1.98%, #CEDCFF 53.67%, #C0F4FF 129.24%); left: 50%; transform: translate(-50%, -50%); }
		.section6.active .ball5 { animation: scale 1s ease-in-out forwards; }
		.section .container.position-relative { z-index: 0; }
		.part-banner .btn-outline-black, .part-banner .btn-gradient { min-height: 60px; }
		@keyframes banner-bg {
		    form { transform: scale(1.2); opacity: 0.3; }
		    to { transform: scale(1); opacity: 1; }
		}
		@keyframes json {
		    form { max-width: 640px; }
		    to { max-width: 320px; }
		}
		@keyframes fade-up {
		    form { opacity: 0; }
		    to { opacity: 1; }
		}
		@keyframes scale {
		    form { max-width: 0; }
		    to { max-width: 100%; }
		}
		@media (max-width: 2200px) {
		    .section6 img { max-width: 800px; }
		}
		@media (max-width: 1599.98px) {
		    .font-size-60, .display-2 { font-size: 2.75rem; }
		    #wsc-main .section { height: auto; padding: 6rem 0; }
		    .part-banner .main-content .lottie-banner { max-width: 440px; }
		    @keyframes json {
		        form { max-width: 440px; }
		        to { max-width: 220px; }
		    }
		}
		@media (max-width: 1279.98px) {
		    .swiper-bar { max-width: fit-content; }
		    .section6 img { max-width: 100%; }
		    .part-banner .btn-outline-black, .part-banner .btn-gradient { min-height: 52px; }
		}
		@media (max-width: 767.98px) {
		    .font-size-60, .display-2 { font-size: 2.5rem; }
		    #wsc-main .section { padding: 3rem 0; }
		    .part-banner::before { padding-top: 85vh!important; padding: 0; }
		    .part-banner .main-content .lottie-banner { max-width: 300px; }
		    .swiper-bar { min-height: 160px; }
		    .swiper-bar li { min-height: auto; }
		    .swiper-bar li img { width: 30px; }
		    .ball5 { width: 500px; height: 500px; }
		    .part-banner .btn-outline-black, .part-banner .btn-gradient { min-height: 52px; }
		    @keyframes json {
		        form { max-width: 300px; }
		        to { max-width: 180px; }
		    }
		}