@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: #111111;
    --white: #FFFFFF;
    --gray: #888888;
    --popup_login_dark_brown: #635E59;
    --popup_login_middle_brown: #96877B;
    --popup_login_light_brown: #E2DAD5;
    --popup_login_light_yellow: #FAEED5;
    --popup_login_light_red: #F8A594;
    --popup_login_middle_red: #D6987D;
    --header_gray: #C4C4C4;
    --header_yellow: #FFF799;
    --header_wheat: #AE8F72;
    --text-brown: #492A01;
    --s4_light_gray: #E4E4E4;
    --s4_dark_blue: #002E58;
    --s4_blue: #3277B7;
    --s5_light_gray: #D2D2D2;
    --s5_dark_gray: #747474;
    --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;
}

* {
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    box-sizing: border-box;
}

html,body {
    padding: 0px !important;
    margin: 0px !important;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    scroll-snap-type: y mandatory;
}

div {
    box-sizing: border-box;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

img.bg {
    object-fit: cover;
}

a {
    cursor: pointer;
    text-decoration: none;
    color: var(--white);
}

button {
    background: transparent;
    border: 0px;
    cursor: pointer;
    padding: 0px;
    margin: 0px;
}

button:disabled {
    cursor: not-allowed;
}

button.scale:hover,
a.scale:hover {
    transform: scale(1.1);
    transition: all 0.6s ease;
}

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

.pc {
    display: block;
}

.sp {
    display: none;
}

.hidden {
    opacity: 0 !important;
}

::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

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

/* Start of Select */
.select {
    width: 200px;
    height: 40px;
    background: var(--white);
    border: 2px solid var(--gray);
    border-radius: 6px;
    white-space: nowrap;
    position: relative;
    z-index: 10;
}

.select .custom_select {
    width: 100%;
    height: 100%;
    color: var(--black);
    font-size: 1rem;
    padding: 10px 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.select .custom_select img {
    height: auto;
    width: 14px;
    transform: rotate(0deg);
    transition: all 0.7s ease;
}

.select .custom_option {
    display: none;
    width: 100%;
    border-radius: 6px;
    background: var(--white);
    margin-top: 4px;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);
}

.select .custom_option ul {
    padding: 4px 0px;
    margin: 0;
}

.select .custom_option ul li {
    color: var(--black);
    list-style: none;
    padding: 4px 10px;
    box-sizing: border-box;
}

.select .custom_option ul li:hover {
    background: var(--light_blue);
    color: var(--black);
    cursor: pointer;
}
/* End of Select */

input {
    width: 200px;
    height: 40px;
    font-size: 1rem;
    padding: 4px 12px;
    border: 0px;
    border-radius: 6px;
    box-sizing: border-box;
}

input:disabled {
    background: var(--white) !important;
}

.input_shake {
    animation: input_shake 0.3s ease-in-out;
    animation-delay: 0.01s;
}

@keyframes input_shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(0.5rem);
    }

    75% {
        transform: translateX(-0.5rem);
    }

    100% {
        transform: translateX(0);
    }
}



/* Loading */
#page_loading {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    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(--s4_blue);
	}

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

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

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

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

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

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

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

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

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



/* Main */
header {
    width: 100%;
    position: fixed;
    left: 0%;
    top: 0%;
    z-index: 99;
}

header .row {
    width: 100%;
    height: 85%;
    padding: 0% 5%;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

header .row img.logo {
    width: 23%;
}

header .menu {
    width: 70%;
    height: 100%;
    padding: 0% 5% 0% 0%;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    justify-content: space-between;
}

header .menu button {
    width: 10%;
    height: 100%;
    color: var(--header_gray);
    font-size: 1.4rem;
    white-space: nowrap;
    position: relative;
}

header .menu button.active,
header .menu button:hover {
    color: var(--header_yellow);
}

header .menu button::after {
    opacity: 0;
    content: "";
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    width: 100%;
    height: 4px;
    background: var(--header_yellow);
}

header .menu button.active::after,
header .menu button:hover::after {
    opacity: 1;
}

button.float {
    width: 7%;
    position: fixed;
    right: 3%;
    bottom: 10%;
    z-index: 99;
}

section {
    position: relative;
    scroll-snap-align: center;
}

section .main_title {
    width: 28%;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
}

section .content .text {
    width: 100%;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-brown);
    text-align: center;
    white-space: nowrap;
}

#s1 .box {
    width: 30%;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
}

#s1 .box .content {
    width: 100%;
    height: 100%;
    padding: 5%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: grid;
    grid-template-areas: "left-top middle right-top" "left-bottom middle right-bottom";
    grid-template-columns: 0.9fr 0.7fr 1.5fr;
    grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
    align-items: center;
    grid-gap: 0% 3%;
}

#s1 .box .content .apple { 
    grid-area: left-top;
    grid-row: 1 / 3;
}

#s1 .box .content .google {
    grid-area: left-bottom;
    grid-row: 3 / 5;
}

#s1 .box .content #qr { 
    grid-area: middle;
    grid-row: 1 / 5;
}

#s1 .box .content #order { 
    grid-area: right-top;
    grid-row: 1 / 4;
}

#s1 .box .content #title { 
    grid-area: right-bottom;
    grid-row: 4 / 5;
}

#s1 a.pc.ad {
    width: 8%;
    position: absolute;
    right: 3%;
    bottom: 40%;
}

#s2,#s3,#s4,#s5,#s6 {
    scroll-margin-top: 25vh;
}

#s2 .content {
    width: 65%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%);
    display: grid;
    grid-template-columns: 0.45fr 0.1fr 0.5fr 1fr;
    grid-template-rows: repeat(4, 0.5fr) 0.2fr;
    align-items: end;
}

#s2 .content .ch {
    grid-column: 1 / 3;
    grid-row: 1 / 5;
    z-index: 10;
}

#s2 .content .ad {
    grid-column: 2 / 4;
    grid-row: 1 / 5;
}

#s2 .content .task1 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    position: relative;
}

#s2 .content .task2 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    position: relative;
}

#s2 .content .task3 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

#s2 .content a.task3.scale:hover,
#s2 .content a.task4.scale:hover {
    transform: scale(1.03);
}

#s2 .content .task4 {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
}

#s2 .content .text {
    grid-column: 1 / 5;
    grid-row: 5 / 6;
}

#s2 .content .task1 a.apple {
    width: 18%;
    position: absolute;
    left: 18%;
    bottom: 16%;
}

#s2 .content .task1 a.google {
    width: 18%;
    position: absolute;
    left: 38%;
    bottom: 16%;
}

#s2 .content .task2 button.phone {
    width: 22%;
    position: absolute;
    left: 16%;
    bottom: 18%;
}

#s2 .content .task2 a.login {
    width: 22%;
    position: absolute;
    left: 39%;
    bottom: 18%;
}

#s2 .content .task2 a.logout.phone {
    display: none;
    width: 22%;
    position: absolute;
    left: 16%;
    bottom: 18%;
}

#s2 .content .task2 a.logout.ican {
    display: none;
    width: 60%;
    position: absolute;
    left: 8%;
    bottom: 18%;
}

#s3 .content {
    width: 65%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    display: grid;
    grid-template-columns: repeat(15,1fr);
    grid-template-rows: 5fr 3fr 0.5fr;
    grid-gap: 0% 2%;
    justify-content: center;
    align-items: end;
}

#s3 .content .item1 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}

#s3 .content .item2 {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}

#s3 .content .item3 {
    grid-column: 7 / 10;
    grid-row: 1 / 2;
}

#s3 .content .item4 {
    grid-column: 10 / 13;
    grid-row: 1 / 2;
}

#s3 .content .item5 {
    grid-column: 13 / 16;
    grid-row: 1 / 2;
}

#s3 .content .ad {
    grid-column: 3 / 14;
    grid-row: 2 / 3;
}

#s3 .content .text {
    grid-column: 1 / 16;
    grid-row: 3 / 4;
}

#s3 .content .item {
    position: relative;
}

#s3 .content .item::after {
    opacity: 0;
    content: '';
    width: 60%;
    height: 40%;
    background-image: url(/event_ob/images/all/all_ok_mark.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#s3 .content .item.active::after {
    opacity: 1;
}

#s4 .content {
    width: 65%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 4fr 1fr 0.5fr;
    grid-gap: 0% 2%;
    justify-content: center;
    align-items: end;
}

#s4 .content .item1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

#s4 .content .item2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#s4 .content .item3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

#s4 .content .item4 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

#s4 .content .share_box {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

#s4 .content .share_box button {
    width: 6%;
    margin: 0% 0.3%;
}

#s4 .content .share_box button.login {
    width: 16%;
}

#s4 .content .share_box .url_box {
    min-width: 42%;
    justify-content: space-between;
    display: none;
    background: var(--s4_light_gray);
    border: 1px solid var(--s4_dark_blue);
}

#s4 .content .share_box .url_box .url {
    white-space: nowrap;
    padding: 0.5% 1%;
}

#s4 .content .share_box .url_box button.copy {
    width: 14%;
    margin: 0%;
    background: var(--s4_blue);
    color: var(--white);
    white-space: nowrap;
}

#s4 .content .text {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
}

#s4 .content .text span.count {
    font-size: 1.7rem;
    font-weight: 600;
}

#s4 .content .item {
    position: relative;
}

#s4 .content .item::after {
    opacity: 0;
    content: '';
    width: 60%;
    height: 40%;
    background-image: url(/event_ob/images/all/all_ok_mark.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#s4 .content .item.active::after {
    opacity: 1;
}

#s5 .swiper {
    width: 45%;
    height: 55%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    z-index: 10;
}

#s5 .swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--s5_light_gray);
    border: 0px;
    border-radius: 50%;
    margin: 0px 10px;
    opacity: 1;
}

#s5 .swiper .swiper-pagination-bullet-active {
    background: var(--s5_dark_gray);
}

#s5 button.prev,
#s5 button.next {
    width: 3%;
    position: absolute;
    bottom: 47%;
    z-index: 11;
}

#s5 button.prev:active {
    animation: bounceLeft 1s ease-in infinite alternate;
}

#s5 button.next:active {
    animation: bounceRight 1s ease-in infinite alternate;
}

@keyframes bounceRight {
    0% { transform: translateX(0); }
    30% { transform: translateX(50px) scaleX(1.3); } /* 向右拉長 */
    50% { transform: translateX(15px) scaleX(0.5); } /* 撞擊回縮 */
    100% { transform: translateX(0); }
}

@keyframes bounceLeft {
    0% { transform: translateX(0); }
    30% { transform: translateX(-50px) scaleX(1.3); } /* 向左拉長 */
    50% { transform: translateX(-15px) scaleX(0.5); } /* 撞擊回縮 */
    100% { transform: translateX(0); }
}

#s5 button.prev {
    left: 22%;
}

#s5 button.next {
    right: 22%;
}

#s5 .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

#s6 .content {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
}

#s6 .content ol {
    width: 70%;
    max-height: 80%;
    font-size: 1.2rem;
    line-height: 1.5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    overflow-y: auto;
}

#s6 .content ol li {
    padding-bottom: 1%;
}

#s6 .content ol li a {
    color: var(--s4_blue);
}

footer {
    width: 100%;
    min-height: 90px;
    background: var(--black);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    scroll-snap-align: end;
}

footer .ican, footer .logo, footer .age-15 {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .ican {
    width: 12%;
    flex-direction: column;
}

footer .ican img {
    width: 93%;
    margin-bottom: 2%;
}

footer .ican span {
    font-size: 0.6rem;
    text-align: center;
}

footer .logo {
    width: 9%;
}

footer .age-15 {
    width: 25.5%;
    justify-content: space-between;
}

footer .age-15 img {
    width: 9.5%;
}

footer .age-15 ol {
    font-size: 0.65rem;
    padding-left: 4%;
    line-height: 1.5;
}



/* Popup */
.popup {
    width: 100vw;
    height: 100vh;
    background: rgba(7, 0, 0,0.7);
    z-index: 30;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: all 1s ease;
}

.popup .popup_content {
    width: 25%;
    position: relative;
}

.popup .popup_content img.bg {
    object-fit: cover;
}

.popup .popup_content button.close {
    width: 11%;
    position: absolute;
    right: 1%;
    top: -6%;
    z-index: 11;
}

.popup .popup_content button.close:hover {
    transform: rotate(360deg);
    transition: all 1s ease;
}

.popup.login_ok .popup_content button.close,
.popup.please_login .popup_content button.close {
    width: 13.4%;
    right: -5%;
    top: -1%;
}

.popup.login .popup_content,
.popup.awards .popup_content {
    width: 30%;
}

.popup.login .popup_content .content {
    width: 80%;
    position: absolute;
    bottom: 24%;
    left: 46%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup.login .popup_content .content .row {
    width: 100%;
    margin-bottom: 12px;
    justify-content: center;
}

    /* Custom Radio Start */
    .popup.login input[type="radio"] {
        font-size: var(--font_size_sm);
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .popup.login label {
        background: var(--popup_login_middle_brown);
        color: var(--white);
        width: 180px;
        height: 35px;
        position: relative;
        border: 2px solid var(--popup_login_light_brown);
        border-radius: 20px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popup.login label.con .text {
        padding-left: 20px;
    }

    .popup.login label.privacy {
        background: transparent;
        width: inherit;
        height: inherit;
        border: 0px;
    }

    .popup.login .radiomark {
        position: absolute;
        top: 52%;
        left: 40%;
        transform: translateY(-50%);
        height: 16px;
        width: 16px;
        border: 2px solid var(--white);
        border-radius: 50%;
    }

    .popup.login label.ios .radiomark {
        left: 35%;
    }
    .popup.login label.android .radiomark {
        left: 23%;
    }

    .popup.login label.con:has(input:checked) {
        background: var(--popup_login_middle_red);
        color: var(--white);
        box-shadow: inset 0px 0px 0px 2px var(--popup_login_light_yellow);
        border: 2px solid var(--popup_login_dark_brown);
    }

    .popup.login label.con input:checked ~ .radiomark {
        background: var(--white);
        box-shadow: inset 0px 0px 0px 3px var(--popup_login_middle_red);
        border: 2px solid var(--white);
    }

    .popup.login label.privacy .radiomark {
        left: -2%;
        border: 2px solid var(--gray);
    }

    .popup.login label.privacy input:checked ~ .radiomark {
        background: var(--gray);
        box-shadow: inset 0px 0px 0px 2px var(--header_gray);
        border: 2px solid var(--gray);
    }
    /* Custom Radio End */

.popup.login select,.popup.login input[type="text"],button.captcha {
    background: var(--popup_login_middle_brown);
    color: var(--white);
    font-size: var(--font_size_sm);
    width: 180px;
    height: 35px;
    border-radius: 20px;
    border: 0px;
    padding: 0px 16px;
    box-sizing: border-box;
}

.popup.login input::placeholder {
    color: var(--white);
}

.popup.login .row label.ios {
    margin-right: 20px;
}

.popup.login .row select {
    border-radius: 20px 0px 0px 20px;
    width: 160px;
}

.popup.login .row input#phone {
    border-radius: 0px 20px 20px 0px;
    width: 220px;
}

.popup.login .row input#captcha {
    margin-right: 20px;
}

.popup.login .row button.captcha {
    background: var(--popup_login_light_red);
    color: var(--popup_login_light_yellow);
    box-shadow: inset 0px 0px 0px 2px var(--popup_login_light_yellow);
    border: 2px solid var(--popup_login_dark_brown);
    -webkit-font-smoothing: unset;
    font-weight: 600;
}

.popup.login .notice,
.popup.login .privacy {
    color: var(--gray);
    font-size: var(--font_size_sm);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 12px;
    -webkit-font-smoothing: unset;
    font-weight: 600;
}

.popup.login .notice a,
.popup.login .privacy a {
    color: var(--popup_login_light_red);
    border-bottom: 1px solid var(--popup_login_light_red);
}

.popup.login .popup_content button.ok {
    width: 30%;
}

.popup.login .popup_content button.close,
.popup.awards .popup_content button.close {
    width: 8.1%;
    position: absolute;
    right: 4%;
    top: -3%;
}

.popup.login .popup_content button.close:hover, 
.popup.awards .popup_content button.close:hover {
    transform: rotate(360deg);
    transition: all 1s ease;
}

.popup.phone_ok .popup_content a.apple,
.popup.ican_ok .popup_content a.apple,
.popup.phone_ok .popup_content a.google,
.popup.ican_ok .popup_content a.google {
    width: 27%;
    position: absolute;
    left: 41%;
    bottom: 18%;
}

.popup.phone_ok .popup_content a.apple.both,
.popup.ican_ok .popup_content a.apple.both {
    width: 22%;
    position: absolute;
    left: 31%;
    bottom: 18%;
}

.popup.phone_ok .popup_content a.google.both,
.popup.ican_ok .popup_content a.google.both {
    width: 22%;
    position: absolute;
    left: 58%;
    bottom: 18%;
}

.popup.login_ok .popup_content,
.popup.please_login .popup_content {
    width: 20%;
}

.popup.follow_ok .popup_content a.follow {
    width: 35%;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-40%);
}

.popup.awards .list {
    width: 80%;
    height: 75%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-56%, -43%);
    overflow-y: auto;
}

.popup.awards .list .box {
    position: relative;
}

.popup.awards .list .box .row {
    width: 60%;
    font-size: 0.9rem;
    position: absolute;
    right: 4%;
    bottom: 15%;
    justify-content: end;
}

.popup.awards .list .box .row button.copy {
    width: 32%;
    margin-left: 2%;
}

.popup.awards .list .box .row button.not_yet {
    width: 32%;
    cursor: not-allowed;
}

.popup.please_verify .text {
    width: 65%;
    font-size: 1.2rem;
    text-align: center;
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translateX(-53%);
}

.popup.please_verify a {
    width: 35%;
    position: absolute;
    left: 50%;
    transform: translateX(-62%);
    top: 70%;
}



@media (max-width: 1600px) {
    /* Main */
    section .main_title {
        width: 25%;
        top: 12%;
    }

    #s2 .content,
    #s3 .content,
    #s4 .content {
        width: 60%;
    }

    /* Popup */
    .popup .popup_content {
        width: 28%;
    }

    .popup.login .popup_content,
    .popup.awards .popup_content {
        width: 38%;
    }

    .popup.login label.privacy .radiomark {
        left: -4%;
    }

    .popup.login_ok .popup_content,
    .popup.please_login .popup_content {
        width: 23%;
    }
}



@media (max-width: 1500px) {
    /* Main */
    #s4 .content .share_box .url_box {
        min-width: 45%;
    }
}



@media (max-width: 1300px) {
    /* Popup */
    .popup.login .popup_content .content {
        bottom: 20%;
    }
}



@media (max-width: 1200px) {
    /* Main */
    header .menu button {
        font-size: 1.2rem;
    }

    section .content .text {
        font-size: 1.1rem;
    }

    #s4 .content .share_box .url_box {
        min-width: 60%;
    }

    #s4 .content .text span.count {
        font-size: 1.6rem;
    }

    /* Popup */
    .popup.login .popup_content,
    .popup.awards .popup_content {
        width: 45%;
    }
}



@media (orientation: portrait) and (max-width: 1024px) {
    /* Basic */
    .pc {
        display: none !important;
    }
    
    .sp {
        display: block;
    }

    button.scale:hover,
    a.scale:hover {
        transform: scale(1);
        transition: all 0s ease;
    }

    /* Main */
    header img.pc.header_bg {
        display: block !important;
    }

    header img.sp.header_bg {
        display: none;
    }

    header .row img.logo {
        width: 32%;
    }

    header .row button.toggle {
        width: 3.5%;
    }

    header .menu {
        width: 100%;
        height: 0px;
        background: rgb(8 24 59 / 70%);
        padding: 0%;
        position: absolute;
        left: 0%;
        top: 100%;
        flex-direction: column;
        justify-content: flex-start;
        border-top: 1px solid var(--header_wheat);
        transition: all 0.5s ease;
    }
    
    header .menu.active {
        height: calc(100vh - 100vw * 0.0645);
        padding: 10% 0%;
        transition: all 0.5s ease;
    }
    
    header .menu button {
        width: 30%;
        height: 0px;
        font-size: 2rem;
        padding: 0%;
        overflow: hidden;
    }

    
    header .menu button.active::after,
    header .menu button:hover::after {
        opacity: 0;
    }
    
    header .menu.active button {
        height: auto;
        padding: 3% 0%;
        overflow: visible;
        transition: all 0.5s ease;
    }

    header .menu .bottom {
        width: 0%;
        display: flex;
        justify-content: space-between;
        margin-top: 30%;
    }

    header .menu.active .bottom {
        width: 35%;
        transition: all 0.5s ease;
    }

    header .menu .bottom a {
        width: 23%;
    }

    button.float {
        width: 15%;
        bottom: 22%;
    }

    section .content .text {
        font-size: 2rem;
        white-space: inherit;
    }

    section .main_title {
        width: 65%;
        top: 6%;
    }

    #s1 .box {
        bottom: 35%;
    }

    #s1 .box .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0%;
    }

    #s1 .box .content #order {
        margin-bottom: 2%;
    }

    #s1 .box .content #order img {
        width: 300px;
    }

    #s1 a.sp.ad {
        width: 60%;
        position: absolute;
        right: unset;
        bottom: 21%;
        left: 50%;
        transform: translateX(-50%);
    }

    #s2 .content {
        width: 60%;
        transform: translate(-50%, -62%);
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 0.8fr) 2fr 0.2fr;
    }

    #s2 .content .ad {
        grid-column: 1 / 1;
        grid-row: 5 / 6;
    }

    #s2 .content .task1 {
        grid-column: 1 / 1;
        grid-row: 1 / 2;
    }

    #s2 .content .task2 {
        grid-column: 1 / 1;
        grid-row: 2 / 3;
    }

    #s2 .content .task3 {
        grid-column: 1 / 1;
        grid-row: 3 / 4;
    }

    #s2 .content .task4 {
        grid-column: 1 / 1;
        grid-row: 4 / 5;
    }

    #s2 .content .text {
        grid-column: 1 / 1;
        grid-row: 6 / 7;
    }

    #s3 .content {
        width: 60%;
        transform: translate(-50%, -61%);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 3fr 3fr 2fr 0.8fr;
        grid-gap: 2% 2%;
    }

    #s3 .content .item1 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    #s3 .content .item2 {
        grid-column: 3 / 5;
        grid-row: 1 / 2;
    }

    #s3 .content .item3 {
        grid-column: 5 / 7;
        grid-row: 1 / 2;
    }

    #s3 .content .item4 {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }

    #s3 .content .item5 {
        grid-column: 4 / 6;
        grid-row: 2 / 3;
    }

    #s3 .content .ad {
        grid-column: 1 / 7;
        grid-row: 3 / 4;
    }

    #s3 .content .text {
        grid-column: 1 / 7;
        grid-row: 4 / 5;
    }

    #s4 .content {
        width: 55%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 3fr 3fr 0.5fr 0.5fr;
        transform: translate(-50%, -50%);
    }

    #s4 .content .item1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    #s4 .content .item2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    #s4 .content .item3 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    #s4 .content .item4 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    #s4 .content .share_box {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        flex-wrap: wrap;
    }

    #s4 .content .share_box button {
        width: 12%;
    }

    #s4 .content .share_box button.login {
        width: 35%;
    }

    #s4 .content .share_box .url_box {
        width: 100%;
    }

    #s4 .content .text {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }

    #s4 .content .text span.count {
        font-size: 3rem;
    }

    #s5 .swiper {
        width: 53%;
        height: 56%;
        transform: translate(-50%, -56%);
    }

    #s5 .swiper .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
        margin: 0px 20px;
    }

    #s5 button.prev,
    #s5 button.next {
        width: 6%;
        bottom: 54%;
    }

    #s5 button.prev {
        left: 12%;
    }

    #s5 button.next {
        right: 12%;
    }

    #s5 .swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #s6 .content {
        width: 100%;
        height: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -66%);
    }

    #s6 .content ol {
        width: 80%;
        font-size: 1.6rem;
    }

    footer {
        padding: 3% 0%;
        flex-direction: column;
    }

    footer .ican {
        width: 25%;
    }

    footer .ican span {
        font-size: 0.7rem;
        white-space: nowrap;
    }

    footer .logo {
        width: 16%;
    }

    footer .age-15 {
        width: 100%;
        justify-content: center;
    }

    footer .age-15 img {
        width: 6%;
    }

    footer .age-15 ol {
        width: auto;
    }

    /* Popup */
    .popup .popup_content {
        width: 55%;
    }

    .popup.login .popup_content,
    .popup.awards .popup_content {
        width: 60%;
    }

    .popup.login .popup_content .content {
        bottom: 20%;
        left: 46%;
    }

    .popup.login label,.popup.login input[type="text"],button.captcha {
        width: 200px;
        font-size: var(--font_size_md);
    }

    .popup.login .row select {
        width: 180px;
    }

    .popup.login .row input#phone {
        width: 240px;
    }

    .popup.login_ok .popup_content,
    .popup.please_login .popup_content {
        width: 45%;
    }
}

@media (max-width: 820px) {
    /* Main */
    section .content .text {
        font-size: 1.6rem;
    }

    #s1 .box {
        width: 35%;
    }

    #s1 .box .content #order img {
        width: 260px;
    }

    #s3 .content {
        grid-template-rows: 3fr 3fr 2fr 0.8fr;
    }

    #s4 .content .text span.count {
        font-size: 2.4rem;
    }

    #s6 .content ol {
        font-size: 1.3rem;
    }
    
    /* Popup */
    .popup.login label.privacy .radiomark {
        left: -6%;
    }
}

@media (max-width: 768px) {
    /* Popup */
    .popup.login .popup_content .content {
        bottom: 17%;
    }

    .popup.awards .list .box .row {
        font-size: 0.8rem;
    }

    /* Main */
    #s3 .content {
        grid-template-rows: 1fr 1fr 0.8fr 0.2fr;
    }
}

@media (max-width: 576px) {
    /* Popup */
    .popup .popup_content {
        width: 85%;
    }

    .popup.login .popup_content,
    .popup.awards .popup_content {
        width: 90%;
    }

    .popup .popup_content button.close {
        right: 2%;
        top: -10%;
    }

    .popup.login .popup_content,
    .popup.awards .popup_content {
        width: 100%;
    }

    .popup.login .popup_content .content {
        bottom: 16%;
    }

    .popup.login .popup_content button.close,
    .popup.awards .popup_content button.close {
        right: 5%;
        top: -7%;
    }

    .popup.login .popup_content .content .row {
        margin-bottom: 8px;
    }

    .popup.login label {
        height: 28px;
    }

    .popup.login label.con input:checked ~ .radiomark {
        box-shadow: inset 0px 0px 0px 2px var(--popup_login_middle_red);
    }

    .popup.login .radiomark {
        height: 12px;
        width: 12px;
    }

    .popup.login input[type="radio"] {
        font-size: var(--font_size_xs);
    }

    .popup.login label,.popup.login input[type="text"],button.captcha {
        width: 120px;
        font-size: var(--font_size_xs);
    }

    .popup.login .row select {
        width: 120px;
        font-size: var(--font_size_xs);
    }

    .popup.login .row input#phone {
        width: 140px;
    }

    .popup.login .notice, .popup.login .privacy {
        font-size: var(--font_size_xxs);
    }

    .popup.login .popup_content button.ok {
        width: 40%;
    }

    .popup.login select,.popup.login input[type="text"],button.captcha {
        height: 28px;
    }

    .popup.login_ok .popup_content,
    .popup.please_login .popup_content {
        width: 60%;
    }

    .popup.follow_ok .popup_content a.follow {
        width: 40%;
    }

    /* Main */
    header img.pc.header_bg {
        display: none !important;
    }

    header img.sp.header_bg {
        display: block;
    }

    header .row img.logo {
        width: 60%;
    }

    header .row button.toggle {
        width: 7%;
    }

    header .menu {
        background: rgb(8 24 59 / 90%);
    }
    
    header .menu.active {
        height: calc(100vh - 100vw * 0.163);
    }

    header .menu button {
        font-size: 1.35rem;
    }

    header .menu.active button {
        transition: all 0.3s ease;
    }

    header .menu.active .bottom {
        width: 45%;
        transition: all 0.3s ease;
    }

    header .menu .bottom a {
        width: 27%;
    }

    button.float {
        width: 22%;
    }

    section .main_title {
        top: 3.5%;
    }

    section .content .text {
        font-size: 0.9rem;
    }

    #s1 .box {
        bottom: 20%;
        width: 45%;
    }

    #s1 .box .content #order img {
        width: 170px;
    }

    #s1 a.sp.ad {
        width: 90%;
        bottom: 1%;
    }

    #s2 .content {
        width: 80%;
        transform: translate(-50%, -49%);
        grid-template-rows: repeat(4, 0.2fr) 0.5fr 0.01fr;
    }

    #s3 .content {
        width: 75%;
        transform: translate(-50%, -51%);
    }

    #s4 .content {
        width: 70%;
        transform: translate(-50%, -44%);
    }

    #s4 .content .text span.count {
        font-size: 1.5rem;
    }

    #s4 .content .share_box .url_box .url {
        font-size: 0.62rem;
    }

    #s5 .swiper {
        width: 65%;
        height: 75%;
        transform: translate(-50%, -45%);
    }

    #s5 .swiper .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0px 10px;
    }

    #s5 button.prev,
    #s5 button.next {
        width: 8%;
        bottom: 47%;
    }

    #s5 button.prev {
        left: 8%;
    }

    #s5 button.next {
        right: 8%;
    }

    #s6 .content ol {
        font-size: 0.9rem;
    }

    footer .ican {
        width: 30%;
    }

    footer .ican span {
        font-size: 0.4rem;
    }

    footer .logo {
        width: 20%;
    }

    footer .age-15 img {
        width: 7%;
    }

    footer .age-15 ol {
        font-size: 0.4rem;
    }
}