/* 桌面端样式小号屏幕 */
@media (min-width: 768px) and (max-width: 991.98px) {
    
    .particleMaskDot {
        width: 60vh;
        height: 60vh;
    }
    .homeOneTheMoth {
        font-size: 9.2vw;
        padding-bottom: 4px;
    }
    #VirginianTigerMoth > span:first-child {
        font-weight: 200;
        font-size: 9vw;
    }
    #White-dottedProminent > span:first-child {
        font-weight: 100;
        letter-spacing: -3px;
        font-size: 8.4vw;
    }
    #BombyxMori > span:first-child{
        font-weight: 800;
        font-size: 9.8vw;
    }
    #AcherontiaAtropos > span:first-child {
        font-weight: 400;
        font-size: 9vw;
    }

    .homeOneMothDetail {
        left: 16px;
        bottom: 16px;
        gap: 6px;
        font-size: 0.45rem;
    }
    .homeOneMothDetailName {
        padding-bottom: 4px;
        font-size: 0.5rem;
    }
    .homeOneMothDetailCocon {
        padding: 1px 5px;
        border-radius: 20px;
        font-size: 0.45rem;
        transform: translateX(-2px);
    }
    .homeOneMothDetailInfo {
        width: 240px;
    }

    .homeOneMothUnicode {
        left: 24px;
        top: 64px;
        font-size: 0.45rem;
    }
    .homeOneMothUnicodeLine {
        gap: 3px;
    }
    .homeOneMothUnicodeTag {
        left: -16px;
        top: -8px;
        width: 8px;
        height: 8px;
    }

    .homeParticleSwitch {
        right: 20px;
        bottom: 20px;
        padding: 8px 20px;
        font-size: 0.7rem;
    }

    .homeScrollDownBox {
        bottom: 20px;
    }
    .homeScrollDownBg {
        width: 132px;
        height: 32px;
    }
    .homeScrollDownGroup {
        width: 132px;
        height: 32px;
    }
    .homeScrollDownCircles {
        bottom: 8px;
    }
    .homeScrollDownCircle {
        width: 16px;
        height: 16px;
    }
    .homeScrollDownText {
        font-size: 0.7rem;
        letter-spacing: 0.px;
    }

    .homeVAR {
        padding-bottom: 44px;
        gap: 20px;
        line-height: 1.12;
    }
    .homeVARLine1A, .homeVARLine1B, .homeVARLine2A, .homeVARLine2B {
        gap: 8px;
        font-size: 8.4vw;
    }
    .homeVARLine1.homeVARLine1 {
        gap: 40px;
    }
    .homeVARLine2.homeVARLine2 {
        gap: 40px;
    }
    .homeVARUnicode {
        left: 24px;
        top: 64px;
        font-size: 0.45rem;
    }
    .TGroup {
        margin-left: -3px;
        margin-right:  -3px;
    }
    .aGroup {
        margin-right: -3px;
    }
    .rGroup {
        margin-right: -4px;
    }
    .nGroup {
        margin-right: -2px;
    }

    .homeVARLine1Data, .homeVARLine2Data {
        width: 100px;
        gap: 6px;
        right: -40px;
        top: -18px;
        align-items: center;
    }
    .homeVARLine1Data > div:first-child, .homeVARLine2Data > div:first-child {
        width: 8px;
        height: 8px;
        border-left: 0px solid var(--darkGrey);
        border-right: 1px solid var(--darkGrey);
        border-bottom: 1px solid var(--midGrey);
    }
    .homeVARLine1Width, .homeVARLine2Width {
        font-size: 0.6rem;
    }

    #homeVARBarADotThin::before {
        top: 12px;
        font-size: 0.5rem;
    }
    #homeVARBarADotLight::before {
        top: 12px;
        font-size: 0.5rem;
    }
    #homeVARBarADotNormal::before {
        top: 12px;
        font-size: 0.5rem;
    }
    #homeVARBarADotRegular::before {
        top: 12px;
        font-size: 0.5rem;
    }
    #homeVARBarADotMedium::before {
        top: 12px;
        font-size: 0.5rem;
    }
    #homeVARBarADotSemibold::before {
        top: 12px;
        font-size: 0.5rem;
    }
    #homeVARBarADotBold::before {
        top: 12px;
        font-size: 0.5rem;
    }
    #homeVARBarADotHeavy::before {
        top: 12px;
        font-size: 0.5rem;
    }
    .homeVARBar {
        width: 7px;
        height: 7px;
    }

    .homeCards {
        width: 82vw;
        padding-top: 800px;
        gap: 20px;
    }
    .homeSlot {
        gap: 12px;
    }
    .homeSlot > div {
        border-radius: 12px;
    }
    .item {
        border-radius: 12px;
    }
    .homeSlotBtn > span {
        padding: 6px 24px;
        font-size: 0.7rem;
    }
    .homeCardsWelcome {
        border-radius: 12px;
    }
    .homeO {
        width: 82vw;
        border-radius: 12px;
    }
    .homeBriefBracketBox > div {
        width: 24px;
        height: 360px;
    }
    .homeBriefText {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .footerOver {
        bottom: -320px;
        left: -600px;
        letter-spacing: -200px;
        font-size: 1200px;
    }

    .footer {
        height: 340px;
    }
    .footerTags {
        padding: 28px 32px 0px;
        gap: 8px;
        justify-content: flex-start;
    }
    .footerTags.footerTagsRu {
        gap: 28px;
    }
    .footerTagColumn {
        width: 76px;
        height: 160px;
        gap: 6px;
    }
    .footerTagColumn.footerTagColumnRu {
        width: 76px;
        font-size: 0.5rem;
    }
    .footerTagColumn1 {
        gap: 6px;
    }
    .footerTagColumn1Box {
        width: 12px;
        height: 12px;
        border-top: 2px solid var(--white);
        border-right: 1px solid var(--white);
    }
    .footerTagColumn1Box.footerTagColumn1BoxRu {
        width: 12px;
        height:12px;
        border-top: 2px solid var(--white);
        border-right: 1px solid var(--white);
        bottom: -12px;
        left: 0;
    }
    .footerTagColumnHead {
        font-size: 0.7rem;
        margin-bottom: 12px;
        letter-spacing: 0.4px;
    }
    .footerTagColumnBody {
        font-size: 0.5rem;
        letter-spacing: 0.5px;
    }
    #footerTagColumnHome {
        margin-right: -8px;
    }
    #footerTagColumnHome.footerTagColumnRu {
        margin-right: 20px;
    }
    #footerTagColumnAbout {
        margin-right: -12px;
    }
    #footerTagColumnAbout.footerTagColumnRu {
        margin-right: -30px;
    }

    .footerDesigner {
        height: 40px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 0.5rem;
    }
    .footerDesignerLeft {
        gap: 16px;
    }
    .footerDesignerLeftHead {
        gap: 2px;
    }
    .footerDesignerLeftBody {
        gap: 6px;
    }
    .footerDesignerLeftBodyDesign {
        margin-left: 2px;
    }
}


/* 桌面端样式中号屏幕 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    
    .particleMaskDot {
        width: 50vh;
        height: 50vh;
    }
    .homeOneTheMoth {
        font-size: 8.8vw;
        padding-bottom: 8px;
    }
    #VirginianTigerMoth > span:first-child {
        font-size: 8.6vw;
    }
    #White-dottedProminent > span:first-child {
        letter-spacing: -4px;
        font-size: 8vw;
    }
    #BombyxMori > span:first-child{
        font-size: 9.4vw;
    }
    #AcherontiaAtropos > span:first-child {
        font-size: 8.6vw;
    }

    .homeOneMothDetail {
        left: 20px;
        bottom: 24px;
        gap: 8px;
        font-size: 0.5rem;
    }
    .homeOneMothDetailName {
        padding-bottom: 6px;
        font-size: 0.55rem;
    }
    .homeOneMothDetailCocon {
        padding: 2px 6px;
        border-radius: 20px;
        font-size: 0.5rem;
        transform: translateX(-3px);
    }
    .homeOneMothDetailInfo {
        width: 280px;
    }
    
    .homeOneMothUnicode {
        left: 32px;
        top: 68px;
        font-size: 0.5rem;
    }
    .homeOneMothUnicodeLine {
        gap: 4px;
    }
    .homeOneMothUnicodeTag {
        left: -20px;
        top: -8px;
        width: 10px;
        height: 10px;
    }

    .homeParticleSwitch {
        right: 20px;
        bottom: 20px;
        padding: 8px 20px;
        font-size: 0.75rem;
    }

    .homeScrollDownBox {
        bottom: 20px;
    }
    .homeScrollDownBg {
        width: 140px;
        height: 34px;
    }
    .homeScrollDownGroup {
        width: 140px;
        height: 34px;
    }
    .homeScrollDownCircles {
        bottom: 9px;
    }
    .homeScrollDownCircle {
        width: 17px;
        height: 17px;
    }
    .homeScrollDownText {
        font-size: 0.75rem;
        letter-spacing: 0.2px;
    }

    .homeVAR {
        padding-bottom: 44px;
        gap: 24px;
        line-height: 1.12;
    }
    .homeVARLine1A, .homeVARLine1B, .homeVARLine2A, .homeVARLine2B {
        gap: 10px;
        font-size: 8.4vw;
    }
    .homeVARLine1.homeVARLine1 {
        gap: 46px;
    }
    .homeVARLine2.homeVARLine2 {
        gap: 46px;
    }
    .homeVARUnicode {
        left: 32px;
        top: 68px;
        font-size: 0.5rem;
    }
    .TGroup {
        margin-left: -3.5px;
        margin-right:  -3.5px;
    }
    .aGroup {
        margin-right: -3.4px;
    }
    .rGroup {
        margin-right: -4.8px;
    }
    .nGroup {
        margin-right: -3.4px;
    }

    .homeVARLine1Data, .homeVARLine2Data {
        width: 100px;
        gap: 8px;
        right: -40px;
        top: -22px;
        align-items: center;
    }
    .homeVARLine1Data > div:first-child, .homeVARLine2Data > div:first-child {
        width: 9px;
        height: 9px;
        border-left: 0px solid var(--darkGrey);
        border-right: 1px solid var(--darkGrey);
        border-bottom: 1px solid var(--midGrey);
    }
    .homeVARLine1Width, .homeVARLine2Width {
        font-size: 0.65rem;
    }

    #homeVARBarADotThin::before {
        top: 14px;
        font-size: 0.55rem;
    }
    #homeVARBarADotLight::before {
        top: 14px;
        font-size: 0.55rem;
    }
    #homeVARBarADotNormal::before {
        top: 14px;
        font-size: 0.55rem;
    }
    #homeVARBarADotRegular::before {
        top: 14px;
        font-size: 0.55rem;
    }
    #homeVARBarADotMedium::before {
        top: 14px;
        font-size: 0.55rem;
    }
    #homeVARBarADotSemibold::before {
        top: 14px;
        font-size: 0.55rem;
    }
    #homeVARBarADotBold::before {
        top: 14px;
        font-size: 0.55rem;
    }
    #homeVARBarADotHeavy::before {
        top: 14px;
        font-size: 0.55rem;
    }
    .homeVARBar {
        width: 7px;
        height: 7px;
    }

    .homeCards {
        width: 80vw;
        padding-top: 800px;
        gap: 22px;
    }
    .homeSlot {
        gap: 16px;
    }
    .homeSlot > div {
        border-radius: 14px;
    }
    .item {
        border-radius: 14px;
    }
    .homeSlotBtn > span {
        padding: 6px 28px;
        font-size: 0.75rem;
    }
    .homeCardsWelcome {
        border-radius: 14px;
    }
    .homeO {
        width: 80vw;
        border-radius: 14px;
    }
    .homeBriefBracketBox > div {
        width: 24px;
        height: 360px;
    }
    .homeBriefText {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .footerOver {
        bottom: -380px;
        left: -640px;
        letter-spacing: -200px;
        font-size: 1400px;
    }

    .footer {
        height: 380px;
    }
    .footerTags {
        padding: 36px 40px 0px;
        gap: 10px;
        justify-content: flex-start;
    }
    .footerTags.footerTagsRu {
        gap: 28px;
    }
    .footerTagColumn {
        width: 84px;
        height: 200px;
        gap: 8px;
    }
    .footerTagColumn.footerTagColumnRu {
        width: 84px;
        font-size: 0.55rem;
    }
    .footerTagColumn1 {
        gap: 8px;
    }
    .footerTagColumn1Box {
        width: 14px;
        height: 14px;
        border-top: 2px solid var(--white);
        border-right: 1px solid var(--white);
    }
    .footerTagColumn1Box.footerTagColumn1BoxRu {
        width: 14px;
        height:14px;
        border-top: 2px solid var(--white);
        border-right: 1px solid var(--white);
        bottom: -14px;
        left: 0;
    }
    .footerTagColumnHead {
        font-size: 0.75rem;
        margin-bottom: 14px;
        letter-spacing: 0.6px;
    }
    .footerTagColumnBody {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
    }
    #footerTagColumnHome {
        margin-right: -8px;
    }
    #footerTagColumnHome.footerTagColumnRu {
        margin-right: 20px;
    }
    #footerTagColumnAbout {
        margin-right: -14px;
    }
    #footerTagColumnAbout.footerTagColumnRu {
        margin-right: -30px;
    }

    .footerDesigner {
        height: 44px;
        padding-left: 24px;
        padding-right: 24px;
        font-size: 0.55rem;
    }
    .footerDesignerLeft {
        gap: 22px;
    }
    .footerDesignerLeftHead {
        gap: 3px;
    }
    .footerDesignerLeftBody {
        gap: 8px;
    }
    .footerDesignerLeftBodyDesign {
        margin-left: 3px;
    }
}


/* 桌面端样式大号屏幕 */
@media (min-width: 1200px) and (max-width: 1439.98px) {

    .particleMaskDot {
        width: 50vh;
        height: 50vh;
    }
    .homeOneTheMoth {
        font-size: 8.6vw;
        padding-bottom: 12px;
    }
    #VirginianTigerMoth > span:first-child {
        font-size: 8.4vw;
    }
    #White-dottedProminent > span:first-child {
        letter-spacing: -4.5px;
        font-size: 7.8vw;
    }
    #BombyxMori > span:first-child{
        font-size: 9.2vw;
    }
    #AcherontiaAtropos > span:first-child {
        font-size: 8.4vw;
    }

    .homeOneMothDetail {
        left: 22px;
        bottom: 32px;
        gap: 10px;
        font-size: 0.55rem;
    }
    .homeOneMothDetailName {
        padding-bottom: 8px;
        font-size: 0.6rem;
    }
    .homeOneMothDetailCocon {
        font-size: 0.55rem;
    }
    .homeOneMothDetailInfo {
        width: 320px;
    }

    .homeOneMothUnicode {
        left: 42px;
        top: 74px;
        font-size: 0.55rem;
    }
    .homeOneMothUnicodeLine {
        gap: 4px;
    }
    .homeOneMothUnicodeTag {
        left: -22px;
        top: -8px;
        width: 11px;
        height: 11px;
    }

    .homeParticleSwitch {
        right: 26px;
        bottom: 26px;
        padding: 10px 28px;
        font-size: 0.8rem;
    }

    .homeScrollDownBox {
        bottom: 26px;
    }
    .homeScrollDownBg {
        width: 148px;
        height: 36px;
    }
    .homeScrollDownGroup {
        width: 148px;
        height: 36px;
    }
    .homeScrollDownCircles {
        bottom: 10px;
    }
    .homeScrollDownCircle {
        width: 18px;
        height: 18px;
    }
    .homeScrollDownText {
        font-size: 0.8rem;
    }

    .homeVAR {
        padding-bottom: 44px;
        gap: 28px;
        line-height: 1.12;
    }
    .homeVARLine1A, .homeVARLine1B, .homeVARLine2A, .homeVARLine2B {
        gap: 12px;
        font-size: 8.4vw;
    }
    .homeVARLine1.homeVARLine1 {
        gap: 52px;
    }
    .homeVARLine2.homeVARLine2 {
        gap: 52px;
    }
    .homeVARUnicode {
        left: 42px;
        top: 74px;
        font-size: 0.55rem;
    }
    .TGroup {
        margin-left: -4.2px;
        margin-right:  -4.2px;
    }
    .aGroup {
        margin-right: -5px;
    }
    .rGroup {
        margin-right: -5px;
    }
    .nGroup {
        margin-right: -4px;
    }

    .homeVARLine1Data, .homeVARLine2Data {
        width: 100px;
        gap: 10px;
        right: -116px;
        top: -14px;
        align-items: center;
    }
    .homeVARLine1Data > div:first-child, .homeVARLine2Data > div:first-child {
        width: 10px;
        height: 10px;
    }
    .homeVARLine1Width, .homeVARLine2Width {
        font-size: 0.7rem;
    }

    #homeVARBarADotThin::before {
        top: 16px;
        font-size: 0.6rem;
    }
    #homeVARBarADotLight::before {
        top: 16px;
        font-size: 0.6rem;
    }
    #homeVARBarADotNormal::before {
        top: 16px;
        font-size: 0.6rem;
    }
    #homeVARBarADotRegular::before {
        top: 16px;
        font-size: 0.6rem;
    }
    #homeVARBarADotMedium::before {
        top: 16px;
        font-size: 0.6rem;
    }
    #homeVARBarADotSemibold::before {
        top: 16px;
        font-size: 0.6rem;
    }
    #homeVARBarADotBold::before {
        top: 16px;
        font-size: 0.6rem;
    }
    #homeVARBarADotHeavy::before {
        top: 16px;
        font-size: 0.6rem;
    }
    .homeVARBar {
        width: 9px;
        height: 9px;
    }

    .homeCards {
        width: 78vw;
        padding-top: 800px;
        gap: 24px;
    }
    .homeSlot {
        gap: 20px;
    }
    .homeSlot > div {
        border-radius: 16px;
    }
    .item {
        border-radius: 16px;
    }
    .homeSlotBtn > span {
        padding: 8px 30px;
        font-size: 0.8rem;
    }
    .homeCardsWelcome {
        border-radius: 16px;
    }
    .homeO {
        width: 78vw;
        border-radius: 16px;
    }
    .homeBriefBracketBox > div {
        width: 24px;
        height: 400px;
    }
    .homeBriefText {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .footerOver {
        bottom: -400px;
        left: -680px;
        letter-spacing: -200px;
        font-size: 1500px;
    }

    .footer {
        height: 420px;
    }
    .footerTags {
        padding: 44px 60px 0px;
        gap: 12px;
        justify-content: flex-start;
    }
    .footerTags.footerTagsRu {
        gap: 28px;
    }
    .footerTagColumn {
        width: 96px;
        height: 240px;
        gap: 8px;
    }
    .footerTagColumn.footerTagColumnRu {
        width: 96px;
        font-size: 0.6rem;
    }
    .footerTagColumn1 {
        gap: 10px;
    }
    .footerTagColumn1Box {
        width: 16px;
        height: 16px;
        border-top: 2px solid var(--white);
        border-right: 1px solid var(--white);
    }
    .footerTagColumn1Box.footerTagColumn1BoxRu {
        width: 16px;
        height:16px;
        border-top: 2px solid var(--white);
        border-right: 1px solid var(--white);
        bottom: -16px;
        left: 0;
    }
    .footerTagColumnHead {
        font-size: 0.8rem;
        margin-bottom: 15px;
        letter-spacing: 0.8px;
    }
    .footerTagColumnBody {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }
    #footerTagColumnHome {
        margin-right: -8px;
    }
    #footerTagColumnHome.footerTagColumnRu {
        margin-right: 20px;
    }
    #footerTagColumnAbout {
        margin-right: -14px;
    }
    #footerTagColumnAbout.footerTagColumnRu {
        margin-right: -30px;
    }

    .footerDesigner {
        height: 48px;
        padding-left: 28px;
        padding-right: 28px;
        font-size: 0.6rem;
    }
    .footerDesignerLeft {
        gap: 26px;
    }
    .footerDesignerLeftHead {
        gap: 4px;
    }
    .footerDesignerLeftBody {
        gap: 10px;
    }
    .footerDesignerLeftBodyDesign {
        margin-left: 4px;
    }
}