html {
    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;
    letter-spacing: 0.05rem;
    line-height: 1.15;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;

    font-family: 'Microsoft Yahei', PingFangSC-Regular, 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB',
        'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;

    line-height: 1.42857143;

    font-size: 14px;

    background: #fff;

    color: #333;
    position: relative;
    z-index: -10;
    overflow-x: hidden;
}

h1 {
    font-size: 2em;

    margin: 0.67em 0;
}

figure {
    margin: 1em 40px;
}

hr {
    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    height: 0;

    overflow: visible;
}

a {
    -webkit-text-decoration-skip: objects;

    background-color: transparent;
}

abbr[title] {
    border-bottom: none;

    -webkit-text-decoration: underline dotted;

    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

dfn {
    font-style: italic;
}

mark {
    background-color: #ff0;

    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

audio:not([controls]) {
    display: none;

    height: 0;
}

img {
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
    line-height: 1.42857143;

    margin: 0;

    outline: none;
}

body,
button,
input,
select,
textarea {
    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    -moz-font-feature-settings: 'liga', 'kern';
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,

html [type=button],



/* 1 */



[type=reset],

[type=submit] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;

    padding: 0;
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    color: inherit;

    display: table;

    max-width: 100%;

    padding: 0;

    white-space: normal;
}

progress {
    display: inline-block;

    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type='checkbox'],
[type='radio'] {
    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    padding: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto;
}

[type='search'] {
    -webkit-appearance: textfield;

    outline-offset: -2px;
}

[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;

    font: inherit;
}

summary {
    display: list-item;
}

article,

aside,

footer,

header,

nav,

section,

figcaption,

figure,

main,

details,



/* 1 */



menu {
    display: block;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;

    font-size: 1em;
}

audio,
video,
canvas {
    display: inline-block;
}

template,
[hidden] {
    display: none;
}

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;

    line-height: 0;

    content: '';
}

.clearfix:after {
    clear: both;
}

a {
    color: #333;

    text-decoration: none;
}

/* a:hover {
    color: #ffa903;
} */

ul {
    margin: 0;

    list-style: none;

    padding: 0;
}

.img-center {
    text-align: center;

    font-size: 0;
}

.img-center img {
    display: inline-block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

    vertical-align: middle;
}

.img-cover {
    overflow: hidden;
}

.img-cover span {
    display: block;

    width: 100%;

    background: no-repeat center / cover;

    -webkit-transition: all 0.5s;

    transition: all 0.5s;
}

.container {
    max-width: 1200px;

    margin: 5% auto;

    width: 90%;
}

/* news */
.header_logo {
    position: fixed;
    top: 0;
    left: 5%;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 0 0 20px 20px;
    z-index: 999;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
}
.header_logo img {
    width: 250px;
    height: 100%;
    object-fit: contain;
}
.news_banner_bg {
    background-image: url(../images/banner.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner_flex {
    padding: 2rem 2rem 0 2rem;
}
.banner_top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}
.banner_top > h1 {
    margin: 0;
    background: linear-gradient(to bottom, #b70b0d 0%, #680606 100%);
    color: #fff;
    padding: 10px 25px 10px 50px;
    font-size: 20px;
    margin-left: -25px;
    border-radius: 0 5px 5px 0;
    font-weight: normal;
}
.banner_top_cir {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}
.banner_top_cir::before {
    content: '';
    width: 35px;
    height: 35px;
    background: linear-gradient(to bottom, #b70b0d 0%, #680606 100%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.news_banner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.banner_box_a {
    width: 48%;
    height: 400px;
    text-align: center;
    background-image: url(../images/banner_pic.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem;
    border: 0.5rem solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    margin: 0 1%;
}
.banner_pic {
    width: 48%;
    margin: 0 1%;
    max-width: 400px;
    position: relative;
}
.banner_pic > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
}
.banner_box > h2 > span:nth-child(1) {
    background-color: #fff;
    color: #010c4a;
    padding: 10px 20px;
    display: block;
    font-size: 45px;
}
.banner_box > h2 > span:nth-child(2) {
    background-color: #94080b;
    color: #fff;
    padding: 10px 20px;
    display: block;
    font-size: 36px;
}
.news_banner_light {
    position: relative;
}
.banner_light_txt {
    background-color: #fff;
    font-size: 24px;
    padding: 5px 10%;
    line-height: 1.8em;
    box-shadow: 1px 1px 2px 5px #0000000d;
}
.banner_light_txt > p:nth-child(1) {
    font-size: 28px;
    font-weight: 600;
}
.banner_light_txt > p {
    margin: 0;
}
.banner_light_more {
    width: 25%;
    background: linear-gradient(to bottom, #b70b0d 0%, #680606 100%);
    font-size: 30px;
    font-weight: 600;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2rem 2rem 2rem 4rem;
    text-align: center;
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
}
.banner_light_more a {
    color: #fff;
    text-shadow: 0 0 1.5rem #fff, 0 0 150px #fff, 0 0 20px #fff;
    animation: text-shadow 1.5s ease-in-out infinite alternate;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
@keyframes text-shadow {
    0%,
    100% {
        text-shadow: 0 0 0.5rme #fff, 0 0 0.8rem #fff, 0 0 0.5rme #fff;
    }
    50% {
        text-shadow: 0 0 1.5rem #fff, 0 0 2rem #fff, 0 0 1.5rem #fff;
    }
}
.banner_light_more a > span {
    font-size: 18px;
    background-color: #000000;
    padding: 10px 30px;
    margin-left: 15px;
    text-shadow: none;
}
.banner_light_more a > span > em {
    transform: rotate(180deg);
}
.banner_sTxt {
    position: absolute;
    bottom: 20px;
    left: -60%;
    padding: 0px;
    animation: fadeInOut 8s infinite;
    z-index: 999;
    display: inline-block;
    width: auto;
}
.banner_sTxt img {
    pointer-events: none;
}
.banner_sTxt a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}
.banner_sTxt span {
    position: absolute;
    width: 50px;
    bottom: 8px;
    display: inline-block;
    right: 60px;
    height: 20px;
    overflow: hidden;
}
.banner_sTxt span.simg2{
    position: absolute;
    width: 187px;
    height: 109px;
    top: 1px;
    left: 12px;
    display: inline-block;
    z-index:5;
}
.banner_sTxt span.simg2 img{
    animation: tada33 3s infinite
}
@keyframes tada33 {
    0% {-webkit-transform: scale(1);transform: scale(1);} 
    2%, 4% {-webkit-transform: scale(0.9) rotate(-3deg);transform: scale(0.9) rotate(-3deg);} 
    6%, 15%, 25%, 45% {-webkit-transform: scale(1) rotate(3deg);transform: scale(1) rotate(3deg);} 
    8%, 20%, 35% {-webkit-transform: scale(1) rotate(-3deg);transform: scale(1) rotate(-3deg);} 
    55% {-webkit-transform: scale(1) rotate(0);transform: scale(1) rotate(0);}  
 } 
 
.banner_sTxt span.simg3 img{
    animation: moveArrow 2s linear infinite;
    position: absolute!important;
    z-index: 1;
}
.banner_sTxt span img:nth-child(1) { animation-delay: 0s; }
        .banner_sTxt span img:nth-child(2) { animation-delay: 0.5s; }
        .banner_sTxt span img:nth-child(3) { animation-delay: 1s; }
@keyframes moveArrow {
    0% { left: -50px; }
    100% { left: 100%; }
}
@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}
@media screen and (max-width:768px) {
    .banner_sTxt {
        position: relative;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
/**/
.exposure_bg {
    background-image: url(../images/exposure_bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -2;
    position: relative;
    padding: 5% 0;
    overflow: hidden;
}
.exposure_bg > .container {
    margin: 0 auto;
}
.exposure {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    padding-bottom: 5%;
}
.exposure_left {
    width: 48%;
    position: relative;
}
.exposure_left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}
.exposure_left::after {
    content: '';
    width: 120%;
    height: 80%;
    background: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 1em 25em 1em 1em;
}
.exposure_right_a {
    width: 48%;
}
.exposure_title {
    font-size: 36px;
    font-weight: 600;
    transform: skewX(-15deg);
}

.exposure_subtitle > p {
    padding: 10px 20px;
    font-size: 24px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 1px 1px 2px 3px #00000008;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    align-content: center;
}
.exposure_subtitle > p > em {
    margin-right: 10px;
    color: transparent;
    background: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    -webkit-background-clip: text;
    font-size: 30px;
}
.exposure_right > p {
    transform: translateX(15%);
    font-size: 18px;
    line-height: 1.8em;
}
.scroll {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    animation: scroll 1.5s ease-in-out infinite alternate;
}
.scroll img {
    height: 100px;
}
@keyframes scroll {
    0%,
    100% {
        transform: translateX(15%) translateY(0);
    }
    50% {
        transform: translateX(15%) translateY(20px);
    }
}
.exposure2 {
    text-align: center;
}
.exposure2_title {
    position: relative;
    display: inline-block;
}
.exposure2_title::before {
    content: url(../images/exposure2_arrow.webp);
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 2;
}
.exposure2_title::after {
    content: url(../images/exposure2_arrow.webp);
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%) rotateY(180deg) scale(0.6);
    z-index: 2;
}
.exposure2_title > span {
    font-size: 28px;
    font-weight: 600;
}
.exposure2_title > p {
    font-size: 36px;
    margin-top: 0;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    -webkit-background-clip: text;
}
.exposure2 > p {
    font-size: 18px;
    margin: 0;
    line-height: 2em;
}
.exposure2 > p > a > span {
    font-size: 24px;
    color: #ff0004;
}
.news_plan_bg {
    background:
        url('../images/news-plan-section-bg.webp') center top / cover no-repeat,
        linear-gradient(180deg, #fff 0%, #eef3ff 100%);
    padding: 6% 0;
    position: relative;
    z-index: 1;
}
.news_plan_bg > .container {
    margin: 0 auto;
}
.news_plan_deco {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: -18px auto 18px;
    max-width: 560px;
    position: relative;
}
.news_plan_deco::before {
    background: linear-gradient(90deg, rgba(183, 11, 13, 0), rgba(183, 11, 13, 0.22), rgba(1, 12, 74, 0.2), rgba(183, 11, 13, 0));
    content: '';
    height: 1px;
    left: -80px;
    position: absolute;
    right: -80px;
    top: 50%;
    z-index: -1;
}
.news_plan_deco > span,
.news_plan_deco > b {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(183, 11, 13, 0.16);
    border-radius: 99px;
    box-shadow: 0 10px 24px rgba(10, 23, 72, 0.08);
    color: #010c4a;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    padding: 10px 18px;
}
.news_plan_deco > span:nth-child(2),
.news_plan_deco > b:nth-child(2) {
    border-color: rgba(1, 12, 74, 0.18);
    color: #b70b0d;
    transform: translateY(-8px);
}
.news_plan_deco > span::before,
.news_plan_deco > b::before {
    background: #b70b0d;
    border-radius: 99px;
    box-shadow: 0 0 0 4px rgba(183, 11, 13, 0.1);
    content: '';
    height: 6px;
    margin-right: 8px;
    width: 6px;
}
.news_plan_title {
    text-align: center;
    margin-bottom: 35px;
}
.news_plan_title > span,
.news_plan_title > .news_plan_kicker {
    color: #b70b0d;
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0 0 6px;
    text-transform: uppercase;
}
.news_plan_title > h2 {
    color: #010c4a;
    font-size: 36px;
    line-height: 1.3;
    margin: 0;
}
.news_plan_title > p {
    color: #555;
    font-size: 18px;
    line-height: 1.8;
    margin: 12px auto 0;
}
.news_plan_cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.news_plan_card {
    --plan-color: #d71434;
    --plan-color-dark: #a50520;
    background: #fff;
    border: 1px solid #e2e8f6;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(10, 23, 72, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: 0.3s;
}
.news_plan_card_02 {
    --plan-color: #7d35e8;
    --plan-color-dark: #3c16b5;
}
.news_plan_card_03 {
    --plan-color: #167df1;
    --plan-color-dark: #064bc4;
}
.news_plan_card_04 {
    --plan-color: #17bfa7;
    --plan-color-dark: #078774;
}
.news_plan_card:hover {
    box-shadow: 0 24px 48px rgba(10, 23, 72, 0.16);
    transform: translateY(-6px);
}
.news_plan_card_hot {
    border-color: var(--plan-color);
    overflow: visible;
}
.news_plan_card_hot::before {
    background: url('../images/news-plan-hot-badge.webp') center / contain no-repeat;
    content: '';
    height: 58px;
    position: absolute;
    right: -11px;
    top: -14px;
    width: 100px;
    z-index: 6;
}
.news_plan_card_hot::after {
    content: none;
}
.news_plan_card_hot .news_plan_card_head {
    border-radius: 8px 8px 0 0;
}
.news_plan_card_head {
    background-color: var(--plan-color);
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto, 100% auto;
    box-shadow: inset 0 -1px 0 #fff;
    color: #fff;
    overflow: hidden;
    padding: 24px 28px 20px;
    position: relative;
}
.news_plan_card_01 .news_plan_card_head {
    background-image: url('../images/news-plan-bg-01.webp'), url('../images/news-plan-bg-whitebg.webp');
}
.news_plan_card_02 .news_plan_card_head {
    background-image: url('../images/news-plan-bg-02.webp'), url('../images/news-plan-bg-whitebg.webp');
}
.news_plan_card_03 .news_plan_card_head {
    background-image: url('../images/news-plan-bg-03.webp'), url('../images/news-plan-bg-whitebg.webp');
}
.news_plan_card_04 .news_plan_card_head {
    background-image: url('../images/news-plan-bg-04.webp'), url('../images/news-plan-bg-whitebg.webp');
}
.news_plan_meta {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 7px;
    z-index: 2;
}
.news_plan_meta > span,
.news_plan_meta > strong {
    border-bottom: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 0;
    display: inline-flex;
    font-size: 36px;
    font-weight: 700;
    height: auto;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding-bottom: 9px;
    width: auto;
}
.news_plan_meta > em {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 14px;
    font-style: normal;
    margin-top: 5px;
    padding: 3px 10px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}
.news_plan_card_head > h3 {
    position: relative;
    font-size: 28px;
    line-height: 1.25;
    margin: 20px 0 6px;
    z-index: 2;
}
.news_plan_card_head > p {
    position: relative;
    align-items: flex-end;
    display: flex;
    font-size: 15px;
    gap: 5px;
    line-height: 1.6;
    margin: 0;
    min-height: 42px;
    white-space: nowrap;
    z-index: 2;
}
.news_plan_card_head > p > strong {
    font-size: 38px;
    line-height: 1;
}
.news_plan_summary {
    background: #fff;
    border-bottom: 1px solid #eef1f8;
    padding: 16px 22px 17px;
    position: relative;
    z-index: 3;
}
.news_plan_summary > span,
.news_plan_summary > p {
    align-items: center;
    color: #010c4a;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    gap: 8px;
    line-height: 1.5;
    margin: 0;
}
.news_plan_summary > span > em,
.news_plan_summary > p > em {
    color: var(--plan-color);
}
.news_plan_btn {
    background: #fff;
    border-radius: 99px;
    box-shadow: 0 12px 24px rgba(20, 26, 70, 0.15);
    color: var(--plan-color);
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    padding: 14px 18px;
    text-align: center;
    transition: 0.3s;
}
.news_plan_head_btn {
    margin-top: 14px;
    position: relative;
    width: 82%;
    z-index: 2;
}
.news_plan_head_btn::after {
    content: '\f105';
    font-family: FontAwesome;
    margin-left: 10px;
}
.news_plan_btn:hover {
    color: var(--plan-color);
    transform: translateY(-2px);
}
.news_plan_media {
    padding: 18px 22px;
}
.news_plan_media + .news_plan_media {
    border-top: 1px solid #eef1f8;
}
.news_plan_media > h4 {
    color: var(--plan-color);
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 10px;
}
.news_plan_media > p {
    color: #555;
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}
.news_plan_link_bridge {
    background: #fff;
    height: 0;
    padding: 0;
    z-index: 6;
}
.news_plan_link_bridge::before {
    background: #fff;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    content: '';
    height: 68px;
    left: 0;
    position: absolute;
    right: 0;
    top: -34px;
}
.news_plan_link_bridge > .container {
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.news_plan_link_panel {
    align-items: center;
    background:
        radial-gradient(circle at 9% 50%, rgba(183, 11, 13, 0.1) 0, rgba(183, 11, 13, 0.1) 44px, transparent 45px),
        linear-gradient(135deg, #fff 0%, #f7fbff 100%);
    border: 1px solid rgba(22, 125, 241, 0.16);
    border-radius: 99px;
    box-shadow: 0 18px 42px rgba(10, 23, 72, 0.12);
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 780px;
    overflow: hidden;
    padding: 16px 18px 16px 30px;
    position: relative;
    transform: translateY(-50%);
}
.news_plan_link_text {
    position: relative;
    z-index: 1;
}
.news_plan_link_text > span,
.news_plan_link_text > em {
    color: #b70b0d;
    display: block;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 6px;
}
.news_plan_link_text > strong {
    color: #010c4a;
    display: block;
    font-size: 21px;
    line-height: 1.35;
}
.news_plan_link_actions {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.news_plan_link_actions > a {
    align-items: center;
    background: #010c4a;
    border-radius: 99px;
    color: #fff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    gap: 8px;
    line-height: 1;
    padding: 14px 18px;
    white-space: nowrap;
}
.news_plan_link_actions > a > img {
    flex: 0 0 18px;
    height: 18px;
    object-fit: contain;
    width: 18px;
}
.news_plan_link_actions > a:first-child {
    background: linear-gradient(135deg, #16bf52 0%, #069b39 100%);
}
.news_plan_link_actions > a:hover {
    color: #fff;
    transform: translateY(-2px);
}
.product_title {
    font-size: 36px;
    font-weight: 600;
    position: relative;
}
.product_title::after {
    content: 'Portfolio';
    position: absolute;
    top: 10px;
    right: -20px;
    font-size: 36px;
    text-transform: uppercase;
    z-index: -1;
    color: #e9e9e9;
}
.portfolio {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: center;
    margin: 0 auto;
}
.portfolio_bg {
    background-image: url(../images/note_bg.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7.5% 0 10% 0;
    filter: drop-shadow(2px 2px 2px #00000055);
    position: relative;
}

.product {
    margin: 0;
    width: calc(100% - 300px);
}
.product_list_img {
    width: 100%;
    height: 270px;
    position: relative;
}
.product_list_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product_list_img > span {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    align-content: center;
    width: 30px;
    height: 40px;
    background-color: #fafafa;
    position: absolute;
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    padding: 5px 0 5px 10px;
    font-style: italic;
    font-weight: 600;
}
.product_list {
    width: 33.3% !important;
}
.product_list p {
    font-size: 18px;
    margin: 15px 0 25px 0;
}
.swiper-pagination {
    bottom: 0px !important;
}
.publish {
    overflow: hidden;
}
.publish_title {
    text-align: center;
    margin-bottom: 20px;
}
.publish_title > h2 > a {
    font-size: 24px;
    margin: 0;
}
.publish_title > p > a {
    font-size: 36px;
    font-weight: 600;
    margin: 10px 0;
    position: relative;
    display: inline-block;
    color: #fff;
}
.publish_title > p > a::before {
    content: '';
    width: 120%;
    height: 100%;
    background: linear-gradient(135deg, #6386f2 0%, #1b2cf1 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    clip-path: polygon(0 20%, 100% 0, 100% 71%, 0 100%);
}
.publish_title > p > a::after {
    content: '';
    width: 120%;
    height: 85%;
    background: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 99% 100%, 5% 90%);
}
.publish_txt > p {
    font-size: 18px;
    margin: 0;
    line-height: 1.8em;
}
.publish_img {
    width: 75%;
    margin: 0 auto;
}
.publish_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.publish_left {
    margin-bottom: 2.5%;
}
.publish_news_logo {
    font-size: 16px;
}
.publish_news_logo > P {
    font-size: 22px;
    font-weight: 600;
}
.publish_news_logo > a > img {
    height: 25px;
}
.publish_news_notice {
    border-top: 1px dashed #333;
    padding-top: 15px;
    margin-top: 15px;
}
.publish_news_notice {
    font-size: 14px;
    color: red;
}
.publish_news_notice > span {
    font-weight: 600;
}
.publish_news_notice > p {
    margin: 5px 0 0 0;
}
.publish_box {
    position: relative;
}
.publish_box::after {
    content: '';
    width: 100%;
    height: 25vh;
    background: linear-gradient(135deg, #00bbff 0%, #00db99 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -3;
}
.publish_right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-bottom: 5%;
}
.publish_list {
    width: 32%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.publish_list > span {
    font-size: 10em;
    -webkit-text-stroke: 1px #e9e9e9;
    color: transparent;
    margin-bottom: -15%;
    position: relative;
    z-index: -2;
}
.publish_list_txt {
    width: 100%;
}
.publish_list > p {
    text-align: center;
    display: inline-block;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: #fff;
    background: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    padding: 5px 20px;
    margin-bottom: -25px;
}
.publish_right > .publish_list:nth-child(2) > p {
    background: linear-gradient(135deg, #02b1f0 0%, #0264c9 100%);
}
.publish_right > .publish_list:nth-child(3) > p {
    background: linear-gradient(135deg, #01c0dd 0%, #03c299 100%);
}
.publish_list_txt > p {
    padding: 50px;
    height: 240px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    line-height: 1.8em;
    margin: 0;
    border-radius: 15px;
    box-shadow: 2px 2px 10px 2px #0000000f;
    position: relative;
    z-index: -2;
    background-color: #fff;
}

.publish_list_txt > p::after {
    content: '';
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid transparent;
    border-image: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    border-image-slice: 1;
    z-index: 1;
}
.publish_right > .publish_list:nth-child(2) .publish_list_txt > p::after {
    border-image: linear-gradient(135deg, #02b1f0 0%, #0264c9 100%);
    border-image-slice: 1;
}
.publish_right > .publish_list:nth-child(3) .publish_list_txt > p::after {
    border-image: linear-gradient(135deg, #01c0dd 0%, #03c299 100%);
    border-image-slice: 1;
}
.publish_list_icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    margin-top: -48px;
}
.publish_list_icon::after {
    content: '';
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    background: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
}
.publish_right > .publish_list:nth-child(2) .publish_list_icon::after {
    background: linear-gradient(135deg, #02b1f0 0%, #0264c9 100%);
}
.publish_right > .publish_list:nth-child(3) .publish_list_icon::after {
    background: linear-gradient(135deg, #01c0dd 0%, #03c299 100%);
}
.publish_list_icon > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}
.advan_bg {
    padding: 5% 0;
}
.advan {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.advan_title {
    width: 50%;
    font-size: 18px;
    line-height: 1.8em;
}
.advan_title > span > a {
    font-size: 36px;
    font-weight: 600;
}
.advan_title .scroll {
    animation: scroll2 1.5s ease-in-out infinite alternate;
}
.advan_pic {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.advan_pic > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 300px;
}
@keyframes scroll2 {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}
.vs_bg {
    padding: 5% 0;
    background-color: #fffff5;
    overflow: hidden;
}
.vs {
    margin: 0 auto;
}
.vs > .table_box {
    text-align: center;
    width: 90%;
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    border-radius: 30px;
    padding: 30px;
    padding-top: 0;
    box-shadow: -5px 5px 20px rgb(0 0 0 / 30%);
    background-color: #fff;
}
.vs > .table_box::after,
.vs > .table_box::before {
    content: '';
    position: absolute;
    width: 30%;
    height: 100%;
    pointer-events: none;
}
.vs > .table_box::after {
    left: 0;
    bottom: 0;
    background: url(../images/vs_img1.webp) left bottom no-repeat;
    background-size: contain;
    transform: translate(-50%, 10%);
}
.vs > .table_box::before {
    right: 0;
    bottom: 0;
    background: url(../images/vs_img2.webp) right bottom no-repeat;
    background-size: contain;
    transform: translate(50%, 10%);
}
.vs > .table_box > .top_title {
    display: inline-block;
    background: #0087e0;
    color: #fff;
    top: -20px;
    letter-spacing: 2px;
    padding: 10px 1.5em;
    position: relative;
    font-size: 36px;
    border-radius: 0 0 20px 20px;
}
.vs > .table_box > .top_title::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-bottom: 20px solid #0069c4;
    border-right: 15px solid transparent;
    top: 0;
    right: 0;
    transform: translateX(100%);
}
.vs > .table_box > .top_title::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-bottom: 20px solid #0069c4;
    border-left: 15px solid transparent;
    top: 0;
    left: 0;
    transform: translateX(-100%);
}
.vs > .table_box > .top_title > p {
    margin: 0;
}
.vs > .table_box > .top_title > p > span {
    font-size: 24px;
    margin: 0 10px;
}
.vs > .table_box > .inline_box {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    background: #f4f4f4;
    margin: 10px auto;
    color: #150035;
    font-size: 16px;
}
.vs > .table_box > :nth-child(2) {
    font-size: 24px;
    background: #150035;
    color: #fff;
}
.vs > .table_box > .inline_box > p {
    width: 15%;
    margin: 0;
    line-height: 2em;
}
.vs > .table_box > .inline_box > .red::after {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    background: url(../images/crown.webp) center center no-repeat;
    background-size: contain;
    transform: rotate(45deg) translateX(-50%);
}
.vs > .table_box > .dec::before {
    content: '';
    width: 50px;
    height: 10px;
    background: #0069c4;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px 20px 0 0;
}
.vs > .table_box > .dec::after {
    content: '';
    width: 10%;
    height: 40%;
    position: absolute;
    right: 0;
    top: 0;
    background: url(../images/vs_img3.webp) left bottom no-repeat;
    background-size: contain;
    transform: translate(0, -60%);
    pointer-events: none;
}
.whatelse {
    overflow: hidden;
    margin: 0 auto;
    padding: 5%;
}
.whatelse_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.whatelse_title_pic {
    width: 50px;
    height: 50px;
    background: linear-gradient(to bottom, #a87bf3 0%, #8d55f1 100%);
    padding: 5px;
    border-radius: 15px;
    margin-right: 15px;
    box-sizing: border-box;
}
.whatelse_title_pic > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.whatelse_title > p {
    font-size: 36px;
    font-weight: 600;
    margin: 0;
}
.whatelse_box {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, #a87bf3 0%, #8d55f1 100%);
    border-radius: 20px;
    margin-top: 5%;
    border: 15px solid #fff;
    filter: drop-shadow(2px 4px 6px #22005c30);
}
.whatelse_list {
    width: 33.3%;
    position: relative;
}
.whatelse_list > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-direction: column;
    padding: 30px 10px;
    box-sizing: border-box;
    color: #fff;
}

.whatelse_icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(to bottom, #a87bf3 0%, #8d55f1 100%);
    padding: 10px;
    border-radius: 15px;
    box-sizing: border-box;
    border: 1px solid #ffffff65;
    position: relative;
}
.whatelse_icon::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #22005c30;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
}
.whatelse_icon > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.whatelse_list > a > p {
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0;
}
.whatelse_list > a > span > em {
    transform: rotate(180deg);
}
.whatelse_list > .whatelse_list {
    position: absolute;
    bottom: -2000px;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #f5ca78 0%, #f5b12f 100%);
    z-index: 2;
    padding: 20px 0;
    border-radius: 15px 15px 0 0;
}
.whatelse_list > .whatelse_list .whatelse_icon {
    background: linear-gradient(to bottom, #f5ca78 0%, #f5b12f 100%);
}
.whatelse_list > .whatelse_list .whatelse_icon::after {
    background-color: #ffb11b63;
}
.whatelse_list > .whatelse_list .whatelse_icon > img {
    filter: brightness(1.1);
}
.whatelse_list > a > span {
    animation: move 1s;
    animation-iteration-count: infinite;
}
@keyframes move {
    0% {
        transform: translateX(px);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0px);
    }
}
.what_top:hover > .whatelse_list {
    animation: what_top 0.2s;
    animation-fill-mode: forwards;
    bottom: 0;
}
@keyframes what_top {
    0% {
        opacity: 0;
        bottom: -2000px;
    }

    100% {
        opacity: 1;
        bottom: 0px;
    }
}
.message {
    margin: 5% auto 0 auto;
    background-color: #fff;
}
.message_txt {
    text-align: center;
    margin-bottom: 2.5%;
}
.message_txt > p {
    font-size: 36px;
    font-weight: 600;
    margin: 0 0 20px 0;
    position: relative;
}
.message_txt > p::after {
    content: '';
    width: 10%;
    min-width: 100px;
    height: 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1b2cf1 0%, #6386f2 100%);
    position: absolute;
    bottom: -12.5px;
    left: 50%;
    transform: translate(-50%, 0);
}
.message_txt > span {
    font-size: 24px;
}
.message > form {
    padding: 2.5%;
    box-shadow: 2px 2px 15px 2px #0000000f;
}
div.form-group {
    margin-bottom: 25px;
}
div.form-group > p {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
}
label.form-label {
    font-size: 16px;
    line-height: 2em;
}
input.form-control {
    border: 1px solid #e4e4e4;
    padding: 10px 20px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}
.form-checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.member_input > .checkbox {
    margin-bottom: 5px;
}
.checkbox > span {
    margin-left: 5px;
    font-size: 16px;
}
.checkbox_inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.checkbox_inner > .checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    margin: 5px 15px 5px 0;
}
.checkbox_inner > .checkbox > span {
    font-size: 14px;
}
.checkbox_else {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
.checkbox_else input.form-control {
    width: auto;
    padding: 0px 10px;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-left: 10px;
}
.form-content.yzm {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
::placeholder {
    color: #bebebe;
}
.form-button {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}
.form-content > button {
    border: 0;
    width: 150px;
    padding: 5px 15px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    cursor: pointer;
}
.form-content > button:nth-child(1) {
    background-color: #0069c4;
}
.form-content > button:nth-child(2) {
    background-color: #00dbc9;
}
.form-content > button::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 60px;
    transform: rotate(30deg);
    background: #f6f6f6;
    opacity: 0.5;
    left: -35px;
    top: -10px;
    transition: 0.3s;
}
.form-content > button:hover::before {
    left: calc(100% + 30px);
}
.footer_bg {
    background-color: #212121;
    padding: 10% 0 5% 0;
    margin-top: -5%;
    position: relative;
    z-index: -1;
}
.footer {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
}
.footer_txt {
    width: 50%;
    color: #fff;
}
.footer_txt > a > h2 {
    font-size: 30px;
    margin: 0;
    color: #fff;
}
.footer_txt > a > h3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    font-size: 20px;
    color: #fff;
}
.footer_txt > a > h3 > span {
    width: 50px;
    height: 50px;
    display: inline-block;
    position: relative;
}
.footer_txt > a > h3 > span::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #ffffff55;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.footer_txt > a > h3 > span::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #ffffff55;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.social_list {
    width: 50%;
}
.footer_social:hover > a > img {
    animation: tada 1.5s ease-in-out infinite alternate;
}
.copy {
    background-color: #212121;
    text-align: center;
    padding: 5px 5%;
    color: #ffffff3b;
    font-size: 12px;
}
.copy a {
    color: #ffffff3b;
}
.copy a:hover {
    color: #fff;
}
.footer_link > p {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    cursor: pointer;
}
.footer_link > p > span {
    width: 15px;
    height: 15px;
    display: inline-block;
    background-color: #fff;
    border-radius: 50%;
    margin-left: 5px;
    position: relative;
}
.footer_link > p > span::after {
    content: '';
    width: 10px;
    height: 6px;
    background-color: #252523;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.link {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.link a {
    border-left: 1px solid;
    padding: 0 10px;
    margin: 5px 0;
}
.link a:last-child {
    border-right: 1px solid;
}
.footer_social > a {
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 10px 0;
    cursor: pointer;
    line-height: 1.8em;
}
.footer_social > a > img {
    width: 40px;
    margin-right: 10px;
}
.aside_button {
    position: fixed;
    right: 10px;
    z-index: 9999;
    bottom: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
}
.aside_button > .aside_icon:hover {
    animation: tada 1s;
}
.aside_button > .aside_icon:nth-child(1) {
    width: 75px;
    height: 75px;
}
.payinfo_lightbox {
    width: 100%;
    height: 100%;
    background-color: #0000008f;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
div#spgateway_box {
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2.5% 5%;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 750px;
    box-sizing: border-box;
}
div#spgateway_box form {
    width: 48%;
}
.spgateway_box_title {
    color: black;
}
#spgateway_box_text > div {
    margin: 15px 0;
}
#spgateway_box input {
    border: 1px solid #dfdfdf;
    padding: 5px 15px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
}
#spgateway_button {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    margin-top: 35px;
}
#spgateway_button input {
    font-size: 16px;
    border: none;
    cursor: pointer;
}
#spgateway_button input:nth-child(1) {
    margin-right: 10px;
    background-color: #333;
    color: #fff;
}
#spgateway_box > img {
    width: 48%;
    max-width: 250px;
}
@media (max-width: 1024px) {
    div#spgateway_box {
        padding: 25px;
        flex-direction: column;
        justify-content: center;
    }
    div#spgateway_box form {
        width: 100%;
    }
    #spgateway_box > img {
        max-width: 120px;
        width: 100%;
    }
    #spgateway_box input {
        width: 100%;
    }
}
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

.aside_icon {
    width: 50px;
    height: 50px;
    margin: 5px 0;
}
.aside_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media screen and (max-width: 1440px) {
    .exposure_right > p {
        transform: translateX(0);
    }
    @keyframes scroll {
        0%,
        100% {
            transform: translateX(0) translateY(0);
        }
        50% {
            transform: translateX(0) translateY(20px);
        }
    }
    .banner_light_txt {
        padding: 5px 25% 5px 5%;
    }
}
@media screen and (max-width: 1080px) {
    .banner_box > h2 > span:nth-child(1),
    .exposure_title,
    .exposure2_title > p,
    .news_plan_title > h2,
    .product_title,
    .product_title::after,
    .publish_title > p > a,
    .advan_title > span > a,
    .message_txt > p,
    .whatelse_title > p {
        font-size: 30px;
    }
    .banner_box > h2 > span:nth-child(2),
    .banner_light_txt > p:nth-child(1),
    .banner_light_more,
    .exposure2_title > span,
    .publish_title > h2 > a,
    .vs > .table_box > .top_title > p,
    .footer_txt > a > h2 {
        font-size: 24px;
    }
    .banner_light_txt,
    .exposure2 > p > a > span,
    .news_plan_title > p,
    .publish_news_logo > P,
    .publish_list > p,
    .vs > .table_box > :nth-child(2),
    .message_txt > span,
    div.form-group > p,
    .whatelse_list > a > p {
        font-size: 18px;
    }
    .banner_top > h1,
    .banner_light_more a > span,
    .exposure_subtitle > p,
    .publish_txt > p,
    .vs > .table_box > .top_title > p > span,
    .footer_txt > a > h3 {
        font-size: 16px;
    }
    .exposure_right > p,
    .exposure2 > p,
    .product_list p,
    .publish_list_txt > p,
    .advan_title,
    label.form-label {
        font-size: 14px;
    }
    .banner_box_a {
        width: 100%;
        height: auto;
        margin: 0;
    }
    .banner_pic {
        max-width: 300px;
    }
    .banner_light_more {
        padding: 10px 10px 10px 20px;
    }
    .scroll img {
        height: 75px;
    }
    .publish_news_logo > a > img {
        height: 20px;
    }
    .news_plan_cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer_txt > a > h3 > span {
        width: 35px;
        height: 35px;
    }
    .product_list {
        width: 50% !important;
    }
    .publish_list_txt > p {
        height: 270px;
    }
}
@media screen and (max-width: 900px) {
    .header_logo {
        left: 50%;
        transform: translate(-50%, 0);
    }
    .header_logo img {
        width: 200px;
    }
    .banner_flex {
        padding: 5rem 2rem 0 2rem;
    }
    .vs > .table_box > :nth-child(2) {
        display: none;
    }
    .vs > .table_box > .inline_box {
        flex-direction: column;
    }
    .vs > .table_box > .inline_box > p {
        width: 100%;
        padding: 5px;
        position: relative;
        box-sizing: border-box;
        font-size: 14px;
    }
    .vs > .table_box > .inline_box > p + p {
        border-top: 1px solid #150035;
    }
    .vs > .table_box > .inline_box :first-child {
        background: #150035;
        color: #fff;
        font-size: 16px;
    }
    .vs > .table_box > .inline_box :first-child::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        border-radius: 3px;
        border-bottom: 3px solid #fff;
        border-right: 3px solid #fff;
        transform: rotate(45deg) translate(-100%, 0);
        right: 20%;
        top: 50%;
        transition: 0.3s;
    }
    #Dropdown {
        max-height: 0;
        opacity: 0;
        padding: 0;
        transition: 0.3s;
    }
    #Dropdown.c {
        padding: 5px;
        max-height: unset;
        opacity: 1;
    }
    .vs > .table_box > .inline_box > .toggle.c::after {
        transform: rotate(225deg) translate(50%, -50%);
    }
    .vs > .table_box > .inline_box :nth-child(2)::before,
    .vs > .table_box > .inline_box :nth-child(3)::before,
    .vs > .table_box > .inline_box :nth-child(4)::before {
        position: absolute;
        left: 15%;
        color: #150035;
    }
    .vs > .table_box > .inline_box :nth-child(2)::before {
        content: '網路廣告';
    }
    .vs > .table_box > .inline_box :nth-child(3)::before {
        content: '網路新聞';
    }
    .vs > .table_box > .inline_box :nth-child(4)::before {
        content: '電視廣告';
    }
    .vs > .table_box > .inline_box > .red::after {
        right: 25%;
        transform: rotate(0) translateX(50%);
    }
    .banner_light_txt {
        padding: 5px 5%;
        width: 100%;
        box-sizing: border-box;
    }
    .news_banner_light {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: flex-end;
        align-content: center;
        margin-top: -100px;
    }

    .banner_light_more.click_contact {
        max-width: 300px;
        width: auto;
        padding: 10px 10px 10px 45px;
        position: unset;
    }
    .publish_right {
        justify-content: center;
    }
    .publish_list {
        width: 48%;
        margin: 0 1%;
    }
    .whatelse_list > .whatelse_list {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .banner_box > h2 > span:nth-child(1),
    .exposure_title,
    .exposure2_title > p,
    .news_plan_title > h2,
    .product_title,
    .product_title::after,
    .publish_title > p > a,
    .advan_title > span > a,
    .message_txt > p,
    .whatelse_title > p {
        font-size: 24px;
    }
    .banner_box > h2 > span:nth-child(2),
    .banner_light_txt > p:nth-child(1),
    .banner_light_more,
    .exposure2_title > span,
    .publish_title > h2 > a,
    .vs > .table_box > .top_title > p,
    .footer_txt > a > h2 {
        font-size: 20px;
    }
    .product_list {
        width: 100% !important;
    }
    .exposure {
        flex-direction: column-reverse;
    }
    .exposure_right_a {
        width: 100%;
    }
    .exposure_left {
        margin-top: 20px;
    }
    .exposure_title > p {
        margin: 10px 0;
    }
    .scroll {
        justify-content: center;
    }
    .portfolio {
        flex-wrap: wrap;
    }
    .product {
        width: 100%;
    }
    .advan {
        flex-direction: column-reverse;
    }
    .advan_pic {
        max-width: 250px;
    }
    .advan_title {
        width: 100%;
        text-align: center;
        margin: 20px 0;
    }
    .footer_txt,
    .social_list {
        width: 100%;
    }
    .publish_list {
        width: 100%;
        margin: 0;
    }
    .publish_list_txt > p {
        height: auto;
        padding: 10% 7% 15% 7%;
    }
    .publish_list > span {
        font-size: 6em;
        margin-bottom: -5%;
    }
    .publish_box::after {
        height: 15vh;
    }
    .whatelse_title_pic {
        width: 35px;
        height: 35px;
        margin-right: 5px;
    }
    .whatelse_icon {
        width: 65px;
        height: 65px;
    }
    .news_plan_bg {
        padding: 12% 0;
    }
    .news_plan_deco {
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 auto 18px;
        max-width: 320px;
    }
    .news_plan_deco::before {
        left: 8px;
        right: 8px;
    }
    .news_plan_deco > span {
        font-size: 12px;
        padding: 9px 12px;
    }
    .news_plan_deco > b {
        font-size: 12px;
        padding: 9px 12px;
    }
    .news_plan_deco > span:nth-child(2) {
        transform: none;
    }
    .news_plan_deco > b:nth-child(2) {
        transform: none;
    }
    .news_plan_cards {
        grid-template-columns: 1fr;
    }
    .news_plan_card_head,
    .news_plan_summary,
    .news_plan_media {
        padding-left: 18px;
        padding-right: 18px;
    }
    .news_plan_head_btn {
        width: 78%;
    }
    .news_plan_link_bridge {
        height: auto;
        padding: 24px 0;
    }
    .news_plan_link_bridge::before {
        content: none;
    }
    .news_plan_link_bridge > .container {
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 96px);
    }
    .news_plan_link_panel {
        align-items: stretch;
        border-radius: 28px;
        flex-direction: column;
        gap: 14px;
        padding: 20px;
        transform: none;
    }
    .news_plan_link_text > strong {
        font-size: 20px;
    }
    .news_plan_link_actions {
        flex-direction: column;
    }
    .news_plan_link_actions > a {
        justify-content: center;
        padding: 14px 16px;
    }
}
@media screen and (max-width: 500px) {
    .vs > .table_box {
        padding: 0 15px;
        border-radius: 10px;
    }
    .vs > .table_box > .top_title {
        font-size: 26px;
    }
    .vs > .table_box > .top_title > p > span {
        font-size: 18px;
    }
    .vs > .table_box > .inline_box :first-child::after {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        border-bottom: 2px solid #fff;
        border-right: 2px solid #fff;
    }
    .vs > .table_box > .inline_box :nth-child(2)::before,
    .vs > .table_box > .inline_box :nth-child(3)::before,
    .vs > .table_box > .inline_box :nth-child(4)::before {
        font-size: 14px;
        left: 5%;
        top: 50%;
        transform: translate(0, -50%);
    }
    .news_banner {
        margin-top: 1rem;
    }
    .banner_top_cir {
        display: none;
    }
    .banner_pic {
        width: 70%;
    }
    .banner_top > h1 {
        margin-left: 0px;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    .banner_light_more {
        font-size: 20px;
    }
    .banner_light_more a > span {
        padding: 5px 10px;
    }
    .banner_box > h2 > span:nth-child(2),
    .banner_light_txt > p:nth-child(1),
    .exposure2_title > span,
    .publish_title > h2 > a,
    .vs > .table_box > .top_title > p,
    .footer_txt > a > h2 {
        font-size: 16px;
    }
    .banner_top > h1,
    .banner_light_more a > span,
    .exposure_subtitle > p,
    .publish_txt > p,
    .vs > .table_box > .top_title > p > span,
    .footer_txt > a > h3 {
        font-size: 14px;
    }
    .banner_light_txt,
    .exposure2 > p > a > span,
    .news_plan_title > p,
    .publish_news_logo > P,
    .publish_list > p,
    .vs > .table_box > :nth-child(2),
    .message_txt > span,
    div.form-group > p {
        font-size: 16px;
    }
    .exposure_left {
        width: 80%;
        margin-bottom: 10px;
    }
    .exposure_left::after {
        left: 50%;
        transform: translate(-50%, 0);
    }
    .exposure2_title::before {
        transform: translate(-50%, -50%) scale(0.4);
    }
    .exposure2_title::after {
        transform: translate(50%, -50%) rotateY(180deg) scale(0.4);
    }
    .publish_list_icon {
        width: 60px;
        height: 60px;
        margin-top: -38px;
    }
    .footer_social > a > img {
        width: 30px;
        margin-right: 5px;
    }
    .aside_button > .aside_icon:nth-child(1) {
        width: 55px;
        height: 55px;
    }
    .aside_icon {
        width: 40px;
        height: 40px;
        margin: 5px 0;
    }
    .footer_bg {
        padding: 15% 0 5% 0;
    }
    .footer_txt > a > h3 > span {
        width: 25px;
        height: 25px;
    }
    .form-content > button {
        font-size: 14px;
    }
    .publish_img {
        width: 100%;
    }
    .publish_title > p > a {
        padding: 10px 0;
    }
    .banner_flex {
        padding: calc(5% + 60px) 5% 0 5%;
    }
    .banner_box_a {
        padding: 10px;
    }
    .whatelse_list {
        width: 100%;
    }
}
@media screen and (max-width: 360px) {
    .vs > .table_box > .top_title {
        padding: 10px 20px;
        font-size: 22px;
    }
}