@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
/* Basic */
:root {
    --black: #111;
    --white: #fff;
    --gray: #8E8E8E;
    --transparent: rgba(0,0,0,0);
    --transparent_black: rgba(14, 17, 32, 0.4);
    --transparent_white: rgba(246, 246, 246, 0.2);
    --line_green: #08d25e;
    --dark_green: #077535;
    --hover_green: #06622c;
    --light_gray: #f7f6f6;
    --transparent_light_gray: rgba(247, 246, 246, 0.9);
    --text_gray: #6e6c6c;
    --typography-noto_sans: "Noto Sans";
    --typography-nunito: Nunito, sans-serif;
    --font_size_xxs: 11px;
    --font_size_xs: 12px;
    --font_size_sm: 14px;
    --font_size_md: 16px;
    --font_size_lg: 18px;
    --font_size_xl: 20px;
    --font_size_xxl: 24px;
    --font_size_title: 26px;
    --pc_start_top: 0%;
    --pc_s1_height: 11.9%;
    --pc_s2_height: 10.9%;
    --pc_s3_height: 21.4%;
    --pc_s5_height: 23.55%;
    --pc_s6_height: 14.5%;
    --pc_s7_height: 17.7%;
    --sp_start_top: 0%;
    --sp_s1_height: 8.09%;
    --sp_s2_height: 13.05%;
    --sp_s3_height: 22.3%;
    --sp_s5_height: 28%;
    --sp_s6_height: 10.4%;
    --sp_s7_height: 18.2%;
    --pc_countdown_radius: 0.3rem;
    --pad_countdown_radius: 1rem;
    --mb_countdown_radius: 0.5rem;
}

html, body {
    background: var(--white);
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
}

#main img {
    width: 100%;
    height: auto;
}

#main img.bg {
    object-fit: cover;
}

#main a {
    cursor: pointer;
    text-decoration: none;
    color: var(--black);
}

#main button {
    background: var(--transparent);
    border: 0px;
    cursor: pointer;
    padding: 0px;
    margin: 0px;
}

#main a.effect:hover,
#main button.effect:hover {
    filter: brightness(0.8);
    transition: all 0.1s ease;
}

#main button:disabled {
    filter: saturate(0%) opacity(0.8);
}

#main .row {
    display: flex;
    justify-content: center;
    align-items: center;
}

#main .pc {
    display: block;
}

#main .sp {
    display: none;
}

#main .hidden {
    opacity: 0 !important;
}

#main ::-webkit-scrollbar {
    width: 6px;
    background: var(--transparent);
}

#main ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--gray);
}



/* Loading */
#page_loading {
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#page_loading {
    display: flex;
}

.floating_circles{
    position:relative;
    width:125px;
    height:125px;
    transform:scale(0.6);
    -o-transform:scale(0.6);
    -ms-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
}

.f_circle{
	position:absolute;
	background-color:rgba(255, 255, 255, 0.1);
	height:22px;
	width:22px;
	border-radius:12px;
	-o-border-radius:12px;
	-ms-border-radius:12px;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	animation-name:f_fade;
	-o-animation-name:f_fade;
	-ms-animation-name:f_fade;
	-webkit-animation-name:f_fade;
	-moz-animation-name:f_fade;
	animation-duration:1.2s;
	-o-animation-duration:1.2s;
	-ms-animation-duration:1.2s;
	-webkit-animation-duration:1.2s;
	-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	-ms-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-direction:normal;
	-o-animation-direction:normal;
	-ms-animation-direction:normal;
	-webkit-animation-direction:normal;
	-moz-animation-direction:normal;
}

.f_rotate1{
	left:0;
	top:51px;
	animation-delay:0.45s;
	-o-animation-delay:0.45s;
	-ms-animation-delay:0.45s;
	-webkit-animation-delay:0.45s;
	-moz-animation-delay:0.45s;
}

.f_rotate2{
	left:15px;
	top:15px;
	animation-delay:0.6s;
	-o-animation-delay:0.6s;
	-ms-animation-delay:0.6s;
	-webkit-animation-delay:0.6s;
	-moz-animation-delay:0.6s;
}

.f_rotate3{
	left:51px;
	top:0;
	animation-delay:0.75s;
	-o-animation-delay:0.75s;
	-ms-animation-delay:0.75s;
	-webkit-animation-delay:0.75s;
	-moz-animation-delay:0.75s;
}

.f_rotate4{
	right:15px;
	top:15px;
	animation-delay:0.9s;
	-o-animation-delay:0.9s;
	-ms-animation-delay:0.9s;
	-webkit-animation-delay:0.9s;
	-moz-animation-delay:0.9s;
}

.f_rotate5{
	right:0;
	top:51px;
	animation-delay:1.05s;
	-o-animation-delay:1.05s;
	-ms-animation-delay:1.05s;
	-webkit-animation-delay:1.05s;
	-moz-animation-delay:1.05s;
}

.f_rotate6{
	right:15px;
	bottom:15px;
	animation-delay:1.2s;
	-o-animation-delay:1.2s;
	-ms-animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
	-moz-animation-delay:1.2s;
}

.f_rotate7{
	left:51px;
	bottom:0;
	animation-delay:1.35s;
	-o-animation-delay:1.35s;
	-ms-animation-delay:1.35s;
	-webkit-animation-delay:1.35s;
	-moz-animation-delay:1.35s;
}

.f_rotate8{
	left:15px;
	bottom:15px;
	animation-delay:1.5s;
	-o-animation-delay:1.5s;
	-ms-animation-delay:1.5s;
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
}

@keyframes f_fade{
	0%{
		background-color: var(--line_green);
	}

	100%{
		background-color:rgba(255, 255, 255, 0.1);
	}
}

@-o-keyframes f_fade{
	0%{
		background-color: var(--line_green);
	}

	100%{
		background-color:rgba(255, 255, 255, 0.1);
	}
}

@-ms-keyframes f_fade{
	0%{
		background-color: var(--line_green);
	}

	100%{
		background-color:rgba(255, 255, 255, 0.1);
	}
}

@-webkit-keyframes f_fade{
	0%{
		background-color: var(--line_green);
	}

	100%{
		background-color:rgba(255, 255, 255, 0.1);
	}
}

@-moz-keyframes f_fade{
	0%{
		background-color: var(--line_green);
	}

	100%{
		background-color:rgba(255, 255, 255, 0.1);
	}
}



/* Main */
#main .popup {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#main .popup .popup_content {
    width: 20%;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    overflow: hidden;
}

#main .popup .popup_content button.close {
    width: 7%;
    position: absolute;
    right: 2%;
    top: 1%;
    padding: 5%;
    box-sizing: content-box;
}

#main .popup .popup_content a.download {
    width: 60%;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
}

#main .popup.d7 .popup_content {
    width: 55%;
}

#main .popup.d7 .popup_content .swiper {
    padding-bottom: 6%;
}

#main .popup.d7 .popup_content .swiper-slide {
    filter: brightness(0.35);
    transform: scale(0.85);
}

#main .popup.d7 .popup_content .swiper-slide-active {
    filter: brightness(1);
    transform: scale(1);
    animation: spring_up 520ms cubic-bezier(.22,1,.36,1) forwards;
}

#main .popup.d7 .popup_content .swiper-slide a.signin {
    width: 75%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
}

#main .popup.d7 .popup_content .swiper-pagination-bullet,
#main .popup.d7 .popup_content .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;
    background: var(--white);
    opacity: 1;
    margin: 0px 8px !important;
}

#main .popup.d7 .popup_content .swiper-pagination-bullet-active {
    background: var(--line_green);
    transform: scale(1.1);
}



#main {
    position: relative;
    margin-top: 88px;
}

#main section {
    width: 100%;
    position: absolute;
    left: 0%;
}

#main #s1 {
    height: var(--pc_s1_height);
    top: var(--pc_start_top);
}

#main #features {
    height: var(--pc_s2_height);
    top: calc(var(--pc_start_top) + var(--pc_s1_height));
    scroll-margin-top: 90px;
}

#main #rule {
    height: var(--pc_s3_height);
    top: calc(var(--pc_start_top) + var(--pc_s1_height) + var(--pc_s2_height));
    scroll-margin-top: 90px;
}

#main #present {
    height: var(--pc_s5_height);
    top: calc(var(--pc_start_top) + var(--pc_s1_height) + var(--pc_s2_height) + var(--pc_s3_height));
    scroll-margin-top: 90px;
}

#main #drawing {
    height: var(--pc_s6_height);
    top: calc(var(--pc_start_top) + var(--pc_s1_height) + var(--pc_s2_height) + var(--pc_s3_height) + var(--pc_s5_height));
    scroll-margin-top: 90px;
}

#main #collaboration {
    height: var(--pc_s7_height);
    top: calc(var(--pc_start_top) + var(--pc_s1_height) + var(--pc_s2_height) + var(--pc_s3_height) + var(--pc_s5_height) + var(--pc_s6_height));
    scroll-margin-top: 90px;
}

#main .fixed_btn {
    width: 9%;
    position: fixed;
    right: 2%;
    bottom: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

#main .fixed_btn a.float_btn {
    width: 90%;
}

#main .fixed_btn button.top {
    width: 60%;
    margin-top: 5%;
}

#main #s1 .btns_group {
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

#main #s1 .btns_group button {
    background: var(--white);
    font-size: var(--font_size_sm);
    font-family: var(--typography-nunito);
    white-space: nowrap;
    padding: 1% 2%;
    margin: 0% 0.8%;
    border-radius: 20px;
    box-sizing: border-box;
}

#main #s1 .btns_group button:hover,
#main #s1 .btns_group button.active {
    background: var(--line_green);
}

#main #features a.bubble {
    width: 11.5%;
    position: absolute;
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(.2, 1.5, .5, 1);
}

#main #features a.bubble:nth-child(1) {
    left: 15%;
    top: 41%;
}

#main #features a.bubble:nth-child(2) {
    left: 15%;
    top: 31%;
}

#main #features a.bubble:nth-child(3) {
    left: 28.5%;
    top: 21%;
}

#main #features a.bubble:nth-child(4) {
    left: 42.3%;
    top: 31%;
}

#main #features a.bubble:nth-child(5) {
    left: 42.3%;
    top: 41%;
}

#main #features .cont {
    width: 28%;
    height: 38.5%;
    padding-bottom: 3%;
    position: absolute;
    left: 56%;
    bottom: 8.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
}

#main #features .cont .text {
    font-size: 1.4vw;
    font-family: var(--typography-noto_sans);
    font-weight: 700;
}

#main #features .cont .text:nth-child(1),
#main #features .cont .text:nth-child(2) {
    margin-bottom: 0.5%;
}

#main #features .cont .text span {
    font-family: var(--typography-nunito);
    font-weight: 900;
}

#main #features .cont .text span.green {
    color: var(--dark_green);
    font-size: 2vw;
}

#main #rule .chart_group {
    width: 32%;
    height: 28.6%;
    position: absolute;
    left: 16.5%;
    top: 16%;
}

#main #rule .chart_group .chart {
    width: 95%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
}

#main #rule .chart_group .chart #myChart {
    height: 65% !important;
}

#main #rule .chart_group .num {
    font-size: 5vw;
    font-family: var(--typography-nunito);
    font-weight: 800;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
}

#main #rule .chart_group .title {
    font-size: 1.4vw;
    font-family: var(--typography-noto_sans);
    font-weight: 700;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translateX(-50%);
}

#main #rule .chart_group .title span.green {
    color: var(--dark_green);
    font-family: var(--typography-nunito);
    font-weight: 900;
}

#main #rule .count_group {
    width: 32%;
    height: 28.6%;
    position: absolute;
    left: 51.5%;
    top: 16%;
}

#main #rule .count_group .countdown {
    width: 58%;
    position: absolute;
    left: 50%;
    top: 31%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#main #rule .count_group .countdown .time-section {
    width: 100%;
    text-align: center;
    color: var(--white);
}

#main #rule .count_group .countdown .time-section#days {
    margin-right: 4%;
}

#main #rule .count_group .countdown .time-section#hours {
    margin-left: 4%;
}

#main #rule .count_group .countdown .dot {
    color: var(--white);
    font-size: 2rem;
    font-family: var(--typography-nunito);
    font-weight: 800;
}

#main #rule .count_group .countdown .time-group {
    width: 100%;
    display: flex;
    gap: 10px;
}

#main #rule .count_group .countdown .time-segment {
    width: 100%;
    display: block;
    font-size: 4.2rem;
    font-family: var(--typography-nunito);
    font-weight: 800;
    border-radius: var(--pc_countdown_radius);
}

#main #rule .count_group .countdown .segment-display {
    position: relative;
    height: 100%;
    border-radius: var(--pc_countdown_radius);
}

#main #rule .count_group .countdown .segment-display__top,
#main #rule .count_group .countdown .segment-display__bottom {
    overflow: hidden;
    text-align: center;
    font-family: var(--typography-nunito);
    width: 100%;
    height: 50%;
    position: relative;
}

#main #rule .count_group .countdown .segment-display__top {
    line-height: 1.5;
    color: var(--line_green);
    background-color: var(--white);
    border-top-right-radius: var(--pc_countdown_radius);
    border-top-left-radius: var(--pc_countdown_radius);
}

#main #rule .count_group .countdown .segment-display__bottom {
    line-height: 0;
    color: var(--line_green);
    background-color: var(--white);
    border-bottom-right-radius: var(--pc_countdown_radius);
    border-bottom-left-radius: var(--pc_countdown_radius);
}

#main #rule .count_group .countdown .segment-overlay {
    width: 100%;
    position: absolute;
    top: 0;
    perspective: 600px;
    height: 100%;
    border-radius: var(--pc_countdown_radius);
}

#main #rule .count_group .countdown .segment-overlay__top,
#main #rule .count_group .countdown .segment-overlay__bottom {
    position: absolute;
    overflow: hidden;
    text-align: center;
    font-family: var(--typography-nunito);
    width: 100%;
    height: 50%;
    backface-visibility: hidden;
}

#main #rule .count_group .countdown .segment-overlay__top {
    top: 0;
    line-height: 1.5;
    color: var(--line_green);
    background-color: var(--white);
    transform-origin: bottom;
    border-top-right-radius: var(--pc_countdown_radius);
    border-top-left-radius: var(--pc_countdown_radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

#main #rule .count_group .countdown .segment-overlay__bottom {
    bottom: 0;
    line-height: 0;
    color: var(--line_green);
    background-color: var(--white);
    transform-origin: top;
    border-bottom-right-radius: var(--pc_countdown_radius);
    border-bottom-left-radius: var(--pc_countdown_radius);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

#main #rule .count_group .countdown .segment-overlay.flip .segment-overlay__top {
    animation: flip-top 0.8s linear;
}

#main #rule .count_group .countdown .segment-overlay.flip .segment-overlay__bottom {
    animation: flip-bottom 0.8s linear;
}

@keyframes flip-top {
    0% {
        transform: rotateX(0deg);
    }

    50%,100% {
        transform: rotateX(-90deg);
    }
}

@keyframes flip-bottom {
    0%,50% {
        transform: rotateX(90deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

#main #rule .count_group a.signin {
    width: 50%;
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
}

#main #rule button {
    width: 4.1%;
    position: absolute;
}

#main #rule button.d4 {
    left: 38.25%;
    bottom: 34%;
}

#main #rule button.d7 {
    left: 57.2%;
    bottom: 34%;
}

#main #rule button.d10 {
    left: 76.3%;
    bottom: 33.5%;
}

#main #rule button.d13 {
    left: 63.45%;
    bottom: 23.5%;
}

#main #rule button.d19 {
    left: 25.6%;
    bottom: 23.5%;
}

#main #rule button.d21 {
    left: 19.25%;
    bottom: 13%;
}

#main #rule button.d28 {
    left: 63.4%;
    bottom: 13%;
}

#main #rule button.d29 {
    left: 69.7%;
    bottom: 13%;
}

#main #rule button.d30 {
    left: 76%;
    bottom: 13%;
}

#main #rule button.wobble_btn {
    animation: wobble 3.5s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes wobble {
    0%, 90%, 100% { transform: rotate(0deg); }
    92% { transform: rotate(-10deg); }
    96% { transform: rotate(12deg); }
    98% { transform: rotate(-2deg); }
}

#main #drawing .cont {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#main #drawing .cont .item {
    width: 30%;
    position: relative;
    margin: 0% 2%;
    border-radius: 22px;
    overflow: hidden;
}

#main #drawing .cont .item:hover {
    transform: scale(1.05);
    box-shadow: -12px 12px var(--hover_green);
    transition: all 0.5s ease;
    cursor: pointer;
}

#main #drawing .cont .item a.signin {
    width: 75%;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
}

#main #present .cont {
    width: 70%;
    height: 65%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 11%;
    display: flex;
    flex-wrap: wrap;
}

#main #present .cont .item {
    width: 23%;
    margin: 1%;
    position: relative;
}

#main #present .cont .item .remaining {
    color: var(--gray);
    font-size: 1.1rem;
    position: absolute;
    left: 7%;
    bottom: 10.5%;
}

#main #present a.info {
    width: 16%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5%;
}

#main #collaboration a.ch {
    width: 66.5%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 63.5%;
    -webkit-mask: linear-gradient(-60deg,#000 40%,rgba(0, 0, 0, 0.6),#000 50%) right/300% 100%;
    animation: shine 2.8s infinite;
}

@keyframes shine {
    100% {
        -webkit-mask-position: left;
    }
}

#main #collaboration a.order {
    width: 16%;
    position: absolute;
    left: 42.5%;
    bottom: 15.5%;
}



@media (max-width: 1400px) {
    /* Main */
    #main #rule .count_group .countdown .dot {
        font-size: 1.5rem;
    }
}

@media (max-width: 1280px) {
    /* Main */
    #main #rule .count_group .countdown .time-segment {
        font-size: 3.6rem;
    }

    #main #present .cont .item .remaining {
        font-size: 0.9rem;
    }
}

@media (max-width: 1100px) {
    /* Main */
    #main #rule .count_group .countdown .dot {
        font-size: 1.2rem;
    }

    #main #rule .count_group .countdown .time-segment {
        font-size: 3rem;
    }
}



@media (max-width: 991px) {
    /* Main */
    #main {
        margin-top: 170px;
    }

    #main .pc {
        display: none !important;
    }

    #main .sp {
        display: block;
    }

    #main .popup.d7 .popup_content {
        width: 100%;
        height: 70%;
    }

    #main .popup.d7 .popup_content .swiper {
        padding: 8% 0% 16% 0%;
        width: 150%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #main .popup.d7 .popup_content .swiper-pagination-bullet,
    #main .popup.d7 .popup_content .swiper-pagination-bullet-active {
        width: 20px;
        height: 20px;
    }

    #main .bar {
        width: 100%;
        height: 7%;
        background: var(--white);
        position: fixed;
        top: 88px;
        display: flex;
        align-items: center;
        z-index: 999;
        overflow-x: auto;
        scrollbar-width: none;   /* Firefox */
        -ms-overflow-style: none; /* IE / Edge 舊版 */
    }
    
    #main .bottom {
        width: 100%;
        background: var(--transparent_light_gray);
        padding: 2% 0%;
        position: fixed;
        bottom: 0%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
    }

    #main .bottom a {
        width: 50%;
    }

    .bar::-webkit-scrollbar {
        display: none; /* Chrome / Safari / Edge (新版) */
    }

    #main .bar button {
        color: var(--text_gray);
        font-size: var(--font_size_lg);
        font-family: var(--typography-nunito);
        white-space: nowrap;
        padding: 1% 2%;
        margin: 0% 0.8%;
        border-radius: 20px;
        box-sizing: border-box;
        margin: 0% 2%;
    }

    #main .bar button.active {
        background: var(--light_gray);
        color: var(--line_green);
        scroll-margin-left: 20px;
    }

    #main #s1 {
        height: var(--sp_s1_height);
        top: var(--sp_start_top);
    }

    #main #features {
        height: var(--sp_s2_height);
        top: calc(var(--sp_start_top) + var(--sp_s1_height));
        scroll-margin-top: 170px;
    }

    #main #rule {
        height: var(--sp_s3_height);
        top: calc(var(--sp_start_top) + var(--sp_s1_height) + var(--sp_s2_height));
        scroll-margin-top: 170px;
    }

    #main #present {
        height: var(--sp_s5_height);
        top: calc(var(--sp_start_top) + var(--sp_s1_height) + var(--sp_s2_height) + var(--sp_s3_height));
        scroll-margin-top: 170px;
    }

    #main #drawing {
        height: var(--sp_s6_height);
        top: calc(var(--sp_start_top) + var(--sp_s1_height) + var(--sp_s2_height) + var(--sp_s3_height) + var(--sp_s5_height));
        scroll-margin-top: 170px;
    }

    #main #present .cont .item .remaining {
        font-size: 1.4rem;
    }

    #main #collaboration {
        height: var(--sp_s7_height);
        top: calc(var(--sp_start_top) + var(--sp_s1_height) + var(--sp_s2_height) + var(--sp_s3_height) + var(--sp_s5_height) + var(--sp_s6_height));
        scroll-margin-top: 170px;
    }

    #main #features a.bubble {
        width: 32%;
    }

    #main #features a.bubble:nth-child(1) {
        left: 5.5%;
        top: 53.5%;
    }

    #main #features a.bubble:nth-child(2) {
        left: 5.5%;
        top: 46.3%;
    }

    #main #features a.bubble:nth-child(3) {
        left: 34%;
        top: 40%;
    }

    #main #features a.bubble:nth-child(4) {
        left: 62%;
        top: 46.3%;
    }

    #main #features a.bubble:nth-child(5) {
        left: 62%;
        top: 53.5%;
    }

    #main #features .cont {
        width: 86%;
        height: 20.7%;
        padding-bottom: 4%;
        left: 50%;
        bottom: 4.3%;
        transform: translateX(-50%);
    }

    #main #features .cont .text {
        font-size: 4.3vw;
    }

    #main #features .cont .text span.green {
        font-size: 5vw;
    }

    #main #rule .chart_group {
        width: 86%;
        height: 22%;
        left: 50%;
        transform: translateX(-50%);
        top: 13%;
    }

    #main #rule .chart_group .chart {
        width: 100%;
        height: 90%;
        top: 14%;
    }

    #main #rule .chart_group .num {
        font-size: 16vw;
    }

    #main #rule .chart_group .title {
        font-size: 4.2vw;
        top: 77%;
    }

    #main #rule .count_group {
        width: 86%;
        height: 20.7%;
        left: 50%;
        top: 35%;
        transform: translateX(-50%);
    }

    #main #rule .count_group .countdown {
        width: 93%;
    }

    #main #rule .count_group .countdown .time-section#days {
        margin-right: 7%;
    }

    #main #rule .count_group .countdown .time-section#hours {
        margin-left: 7%;
    }

    #main #rule .count_group .countdown .dot {
        font-size: 3rem;
    }

    #main #rule .count_group .countdown .time-segment {
        font-size: 8rem;
        border-radius: var(--pad_countdown_radius);
    }

    #main #rule .count_group .countdown .segment-display,
    #main #rule .count_group .countdown .segment-overlay {
        border-radius: var(--pad_countdown_radius);
    }

    #main #rule .count_group .countdown .segment-display__top,
    #main #rule .count_group .countdown .segment-overlay__top {
        border-top-right-radius: var(--pad_countdown_radius);
        border-top-left-radius: var(--pad_countdown_radius);
    }

    #main #rule .count_group .countdown .segment-display__bottom,
    #main #rule .count_group .countdown .segment-overlay__bottom {
        border-bottom-right-radius: var(--pad_countdown_radius);
        border-bottom-left-radius: var(--pad_countdown_radius);
    }

    #main #rule .count_group a.signin {
        bottom: 9%;
    }

    #main #rule button {
        width: 8.5%;
    }

    #main #rule button.d4 {
        left: 52.2%;
        bottom: 32.6%;
    }

    #main #rule button.d7 {
        left: 80%;
        bottom: 27.3%;
    }

    #main #rule button.d10 {
        left: 38.7%;
        bottom: 27.3%;
    }

    #main #rule button.d13 {
        left: 11.2%;
        bottom: 21.8%;
    }

    #main #rule button.d19 {
        left: 80%;
        bottom: 16.4%;
    }

    #main #rule button.d21 {
        left: 52.25%;
        bottom: 16.4%;
    }

    #main #rule button.d28 {
        left: 52.4%;
        bottom: 10.9%;
    }

    #main #rule button.d29 {
        left: 66%;
        bottom: 10.9%;
    }

    #main #rule button.d30 {
        left: 80%;
        bottom: 10.9%;
    }

    #main #drawing .content {
        width: 90%;
        height: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 33%;
    }

    #main #drawing .content .swiper {
        padding: 8% 0% 16% 0%;
        width: 190%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #main #drawing .content .swiper-slide {
        filter: brightness(0.35);
        transform: scale(0.85);
    }

    #main #drawing .content .swiper-slide-active {
        filter: brightness(1);
        transform: scale(1);
        animation: spring_up 520ms cubic-bezier(.22,1,.36,1) forwards;
    }

    @keyframes spring_up {
        0%   { transform: translateY(0) scale(1); }
        40%  { transform: translateY(-18px) scale(1.04); }
        100% { transform: translateY(0) scale(1); }
    }

    #main #drawing .content .swiper-slide a.signin {
        width: 75%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10%;
    }

    #main #drawing .swiper-pagination-bullet,
    #main #drawing .swiper-pagination-bullet-active {
        width: 20px;
        height: 20px;
        background: var(--white);
        opacity: 1;
        margin: 0px 8px !important;
    }

    #main #drawing .swiper-pagination-bullet-active {
        background: var(--line_green);
        transform: scale(1.1);
    }

    #main #present .cont {
        width: 90%;
        height: auto;
        top: 7%;
    }

    #main #present .cont .item {
        width: 46%;
        margin: 2%;
    }

    #main #present a.info {
        width: 46%;
        bottom: 2%;
    }

    #main #collaboration a.ch {
        width: 87.5%;
        bottom: 57.2%;
    }

    #main #collaboration a.order {
        width: 46%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 8.7%;
    }
}

@media (orientation: portrait) {
    #main .popup .popup_content {
        width: 40%;
        margin-bottom: 20%;
    }
}



@media (max-width: 820px) and (orientation: portrait) {
    /* Main */
    #main .bar {
        height: 7%;
    }
}



@media (max-width: 768px) and (orientation: portrait) {
    /* Main */
    #main .bar {
        height: 8%;
    }
}



@media (max-width: 576px) and (orientation: portrait) {
    /* Main */
    #main .popup .popup_content {
        width: 60%;
        margin-bottom: 35%;
    }

    #main .popup.d7 .popup_content {
        height: 60%;
    }

    #main .popup.d7 .popup_content .swiper {
        width: 160%;
    }

    #main .popup.d7 .popup_content .swiper-pagination-bullet,
    #main .popup.d7 .popup_content .swiper-pagination-bullet-active {
        width: 10px;
        height: 10px;
    }
    
    #main {
        margin-top: 150px;
    }

    #main #features,
    #main #rule,
    #main #drawing,
    #main #present,
    #main #collaboration,
    #main #download {
        scroll-margin-top: 140px;
    }

    #main .bar {
        height: 9.2%;
        top: 64px;
    }

    #main .bar button {
        font-size: var(--font_size_md);
    }

    #main .bottom a {
        width: 70%;
    }

    #main #rule .count_group .countdown {
        width: 90%;
    }

    #main #rule .count_group .countdown .time-section#days {
        margin-right: 5%;
    }

    #main #rule .count_group .countdown .time-section#hours {
        margin-left: 5%;
    }

    #main #rule .count_group .countdown .dot {
        font-size: 1.8rem;
    }

    #main #rule .count_group .countdown .time-segment {
        font-size: 3.7rem;
        border-radius: var(--mb_countdown_radius);
    }

    #main #rule .count_group .countdown .segment-display,
    #main #rule .count_group .countdown .segment-overlay {
        border-radius: var(--mb_countdown_radius);
    }
    
    #main #rule .count_group .countdown .segment-display__top,
    #main #rule .count_group .countdown .segment-overlay__top {
        border-top-right-radius: var(--mb_countdown_radius);
        border-top-left-radius: var(--mb_countdown_radius);
    }
    
    #main #rule .count_group .countdown .segment-display__bottom,
    #main #rule .count_group .countdown .segment-overlay__bottom {
        border-bottom-right-radius: var(--mb_countdown_radius);
        border-bottom-left-radius: var(--mb_countdown_radius);
    }

    #main #drawing .swiper-pagination-bullet,
    #main #drawing .swiper-pagination-bullet-active {
        width: 12px;
        height: 12px;
    }

    #main #present .cont .item .remaining {
        font-size: 0.85rem;
    }
}