/* common */
.mainTitle01_main_color {
    background-image: linear-gradient(to left, #1dc8b9 0%, #1dc8b9 100%);
    ;
}

.mainTitle01_text {
    color: #fff;
}

.specTable .specifications table th,
.specTable .ordering_info table th {
    text-transform: none;
}

/* banner */
.banner {
    display: block;
    width: 100%;
    background: #010c14;
    overflow: hidden;
}

.banner_bg {
    position: absolute;
    top: 0;
    left: max(0px, calc(50% - 960px));
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 1920px;
}

.banner_bg img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner_content {
    position: relative;
    display: block;
    width: calc(100% - 120px);
    margin: 95px auto 0 auto;
    z-index: 20;
}

.banner_content_logo {
    position: relative;
    display: block;
    width: 100%;
    max-width: 671.2px;
    margin: 0 auto 25px auto;
    text-align: center;
}

.banner_content_logo img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.banner_content_sub {
    position: relative;
    display: block;
    width: 100%;
    font-size: 24px;
    line-height: 1.5;
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    opacity: .6;
}

.banner_content_slogan {
    position: relative;
    display: block;
    width: 100%;
    margin: 20px auto 0 auto;
}

.banner_content_slogan_item {
    position: relative;
    display: block;
    width: 100%;
    font-size: 35px;
    line-height: 1.35;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
}

.banner_content_slogan_item:nth-child(even) {
    padding: 0 0 0 4em;
}

.banner_product {
    position: absolute;
    bottom: 20%;
    left: max(10%, calc(50% - 300px));
    display: block;
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
}

.banner_product img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

/* speed */
.speed {
    position: relative;
    display: block;
    width: 100%;
    padding: 150px 0 140px 0;
    background: #061a28;
    overflow: hidden;
}

.speed .mainTitle01_text {
    text-align: justify;
}

#container .contents[data-lang="en"] .speed .mainTitle01_text,
#container .contents[data-lang="jp"] .speed .mainTitle01_text,
#container .contents[data-lang="ko"] .speed .mainTitle01_text {
    text-align: left;
}

#container .contents[data-lang="sc"] .speed .mainTitle01_text {
    max-width: 635px;
}

#container .contents[data-lang="jp"] .speed .mainTitle01_text {
    max-width: 450px;
}

#container .contents[data-lang="ko"] .speed .mainTitle01_text {
    max-width: 645px;
}

#container .contents[data-lang="tw"] .speed .mainTitle01_text {
    max-width: 635px;
}

.speed_logo {
    position: absolute;
    top: 45px;
    left: max(60px, calc(50% - 850px));
    display: block;
    width: 120px;
    z-index: 10;
}

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

.speed_content {
    position: static;
    width: calc(100% - 120px);
    max-width: 1450px;
    margin: 0 auto;
    overflow: visible;
}

.speed_content_inner {
    position: static;
    width: 60%;
    max-width: 740px;
    margin: 0 0 0 auto;
}

.speed_content_inner_title {
    text-align: left;
    z-index: 10;
}

.speed_content_inner_text {
    position: relative;
    display: block;
    width: 100%;
    margin: 35px 0 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(207, 210, 211, .8);
    font-family: inherit;
    text-align: left;
    z-index: 10;
}

.speed_content_inner_bg {
    position: absolute;
    top: 0;
    left: max(min(-170px, -14%), calc(50% - 960px));
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 1920px;
    height: 100%;
}

.speed_content_inner_bg img {
    position: relative;
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.speed_content_inner_group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin: 60px 0 0 0;
}

.speed_content_inner_group_box {
    position: relative;
    display: block;
    width: calc(50% - 35px);
    margin: 0 0 30px 0;
}

.speed_content_inner_group_box:first-child:last-child {
    width: 100%;
    max-width: 660px;
}

.speed_content_inner_group_box_sub {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    text-align: left;
}

.speed_content_inner_group_box_title {
    position: relative;
    display: block;
    width: 100%;
    font-size: 27px;
    line-height: 1.2;
    color: #00abc7;
    font-family: inherit;
    font-weight: 700;
    text-align: left;
}

.speed_content_inner_group_box_title_bg {
    position: relative;
    font-size: inherit;
    line-height: inherit;
    color: #fff;
    background: linear-gradient(to right, #69a9e5 10%, #69a9e5 100%);
    text-align: inherit;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    z-index: 10;
}

.speed_content_inner_group_box_title_bg::before {
    content: attr(data-text);
    text-align: inherit;
}

.speed_content_inner_group_box_title_bg_text {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.speed_content_inner_group_box_count {
    position: relative;
    display: block;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 15px 0 0 0;
    border-top: 1px solid rgba(155, 163, 165, .28);
}

.speed_content_inner_group_box_count_item {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto 20px auto;
}

.speed_content_inner_group_box_count_item_head {
    position: relative;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    justify-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 7px 0;
}

.speed_content_inner_group_box_count_item_head_title {
    position: relative;
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1;
    color: #d5d5d5;
    font-family: inherit;
    text-align: left;
    flex: 0 1 auto;
}

.speed_content_inner_group_box_count_item_head_num {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    font-size: 18px;
    line-height: 1;
    color: #d5d5d5;
    font-family: inherit;
    font-weight: 500;
    text-align: right;
    flex: 0 0 auto;
}

.speed_content_inner_group_box_count_item_head_num_unit {
    position: relative;
    width: auto;
    max-width: 100%;
    font-size: 15px;
    line-height: 1;
    color: #d5d5d5;
    font-family: inherit;
    font-weight: 400;
}

.speed_content_inner_group_box_count_item_bar {
    position: relative;
    display: block;
    width: 100%;
    height: 9px;
    background: linear-gradient(to right, #876e5d 45%, #675447 65%, #876e5d 85%);
    overflow: hidden;
}

.speed_content_inner_group_box_count_item_bar::before {
    content: '';
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(to right, #3bc9b7 0%, #3bc9b7 100%);
}

.speed_content_inner_group_box_count_item_bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #1a1715 0%, #3b312a 90%) top left / 100% 2px no-repeat, linear-gradient(to right, #1a1715 0%, #3b312a 90%) bottom left / 100% 2px no-repeat, linear-gradient(to left, #1a1715 0%, #1a1715 100%) center left / 2px 100% no-repeat, linear-gradient(to left, #3b312a 0%, #3b312a 100%) center right / 2px 100% no-repeat;
    z-index: 10;
}

.speed_content_inner_notice {
    position: relative;
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(213, 213, 213, .5);
    font-family: inherit;
    text-align: left;
}

.speed_content_inner_group_box_count_item_bar[data-percentage="100"]::before {
    width: 100%;
}

.speed_content_inner_group_box_count_item_bar[data-percentage="96"]::before {
    width: 96%;
}

.speed_content_inner_group_box_count_item_bar[data-percentage="27"]::before {
    width: 27%;
}

#container .contents[data-lang="en"] .speed_content_inner_notice {
    max-width: 705px;
}

/****intro****/
.intro {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    min-height: 630px;
    padding: 150px 0;
    background: #000;
    overflow: hidden;
}

.intro .mainTitle01_text {
    text-align: justify;
}

#container .contents[data-lang="en"] .intro .mainTitle01_text,
#container .contents[data-lang="ko"] .intro .mainTitle01_text {
    text-align: left;
}

.intro_bg {
    position: absolute;
    top: 0;
    right: max(0px, calc(50% - 960px));
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    min-width: 1920px;
    pointer-events: none;
    overflow: hidden;
}

.intro_bg img {
    position: relative;
    object-fit: contain;
    object-position: center;
    display: block;
    width: auto;
    height: 100%;
    user-select: none;
}

.intro_content {
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: flex-start;
    justify-content: flex-start;
    width: calc(100% - 120px);
    max-width: 1450px;
    margin: 0 auto;
}

.intro_content_inner {
    position: relative;
    display: block;
    width: 50%;
    max-width: 800px;
}

/**** self style ****/
/* storage */
.intro[data-style="storage"] {
    background: #8e93a2;
}

/* 國際標準 */
.includes .mainTitle01_main_text {
    color: #fff;
}

.includes .mainTitle01_main_color {
    background-image: linear-gradient(to right, #1dc8b9 0%, #1dc8b9 100%);
}

.includes .mainTitle01_text {
    color: rgba(207, 210, 211, .8);
}

.includes_top_content {
    max-width: 755px;
}

.includes_bottom {
    padding: 395px 0 145px 0;
    background: #f5f5f5;
}

.includes_bottom_icon_item {
    background: #e6e6e6;
}

.includes_bottom_icon_item img {
    opacity: .7;
}

/* 商品規格 */
.specTable {
    padding: 115px 0 100px 0;
}

@media all and (min-width:1921px) {

    /* banner */
    .banner_bg img {
        -webkit-mask: linear-gradient(to right, #00000000 0%, #000 10%, #000 90%, #00000000 100%) center / 100% 100% no-repeat;
        mask: linear-gradient(to right, #00000000 0%, #000 10%, #000 90%, #00000000 100%) center / 100% 100% no-repeat;
    }

    /* speed */
    .speed_content_inner_bg img {
        -webkit-mask: linear-gradient(to right, #00000000 0%, #000 10%, #000 90%, #00000000 100%) center / 100% 100% no-repeat;
        mask: linear-gradient(to right, #00000000 0%, #000 10%, #000 90%, #00000000 100%) center / 100% 100% no-repeat;
    }

    /* intro */
    .intro_bg img {
        -webkit-mask: linear-gradient(to right, #00000000 0%, #000 10%, #000 90%, #00000000 100%) center / 100% 100% no-repeat;
        mask: linear-gradient(to right, #00000000 0%, #000 10%, #000 90%, #00000000 100%) center / 100% 100% no-repeat;
    }
}

@media (max-width: 1550px) {

    /* speed */
    .speed_content_inner_bg img {
        -webkit-mask: linear-gradient(130deg, #000 36%, rgba(0, 0, 0, .5) 38.5%, #00000000 100%) center / 100% 100% no-repeat;
        mask: linear-gradient(130deg, #000 36%, rgba(0, 0, 0, .5) 38.5%, #00000000 100%) center / 100% 100% no-repeat;
    }

}

@media (max-width: 1300px) {

    /* storage */
    .intro[data-style="storage"] .mainTitle01 {
        filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, .3)) drop-shadow(-1px -1px 5px rgba(0, 0, 0, .3));
    }
}

@media all and (min-width:1201px) and (min-height:1000px) {
    .banner_bg img {
        top: -2%;
        height: 104%;
    }
}

@media all and (min-width:1201px) {

    /* intro */
    .intro:nth-child(even) .intro_content {
        justify-items: flex-end;
        justify-content: flex-end;
    }

    /**** self style ****/
    /* upgrade */
    .intro[data-style="upgrade"] .intro_bg {
        right: max(-11%, calc(50% - 960px));
    }

    /* usage */
    .intro[data-style="usage"] .intro_bg {
        right: auto;
        left: max(-15%, calc(50% - 960px));
    }

    /* quick */
    .intro[data-style="quick"] .intro_bg {
        right: max(-23%, calc(50% - 960px));
    }

    /* storage */
    .intro[data-style="storage"] .intro_bg {
        right: auto;
        left: max(-14%, calc(50% - 960px));
    }

    /* boost */
    .intro[data-style="boost"] .intro_bg {
        right: max(-27%, calc(50% - 960px));
    }
}

@media all and (min-width:641px) {

    /**** self style ****/
    /* upgrade */
    #container .contents[data-lang="sc"] .intro[data-style="upgrade"] .mainTitle01_text {
        max-width: 595px;
    }

    #container .contents[data-lang="en"] .intro[data-style="upgrade"] .mainTitle01_text {
        max-width: 695px;
    }

    #container .contents[data-lang="jp"] .intro[data-style="upgrade"] .mainTitle01_text {
        max-width: 695px;
    }

    #container .contents[data-lang="ko"] .intro[data-style="upgrade"] .mainTitle01_text {
        max-width: 620px;
    }

    #container .contents[data-lang="tw"] .intro[data-style="upgrade"] .mainTitle01_text {
        max-width: 595px;
    }

    /* usage */
    #container .contents[data-lang="en"] .intro[data-style="usage"] .mainTitle01_text {
        max-width: 600px;
    }

    #container .contents[data-lang="jp"] .intro[data-style="usage"] .mainTitle01_text {
        max-width: 580px;
    }

    #container .contents[data-lang="ko"] .intro[data-style="usage"] .mainTitle01_text {
        max-width: 600px;
    }

    #container .contents[data-lang="tw"] .intro[data-style="usage"] .mainTitle01_text {
        max-width: 580px;
    }

    /* quick */
    #container .contents[data-lang="sc"] .intro[data-style="quick"] .mainTitle01_text {
        max-width: 610px;
    }

    #container .contents[data-lang="en"] .intro[data-style="quick"] .mainTitle01_text {
        max-width: 640px;
    }

    #container .contents[data-lang="jp"] .intro[data-style="quick"] .mainTitle01_text {
        max-width: 615px;
    }

    #container .contents[data-lang="tw"] .intro[data-style="quick"] .mainTitle01_text {
        max-width: 595px;
    }

    /* storage */
    #container .contents[data-lang="sc"] .intro[data-style="storage"] .mainTitle01_text {
        max-width: 640px;
    }

    #container .contents[data-lang="en"] .intro[data-style="storage"] .mainTitle01_text {
        max-width: 625px;
    }

    #container .contents[data-lang="jp"] .intro[data-style="storage"] .mainTitle01_text {
        max-width: 575px;
    }

    #container .contents[data-lang="ko"] .intro[data-style="storage"] .mainTitle01_text {
        max-width: 625px;
    }

    #container .contents[data-lang="tw"] .intro[data-style="storage"] .mainTitle01_text {
        max-width: 640px;
    }

    /* boost */
    #container .contents[data-lang="sc"] .intro[data-style="boost"] .mainTitle01_text {
        max-width: 600px;
    }

    #container .contents[data-lang="en"] .intro[data-style="boost"] .mainTitle01_text {
        max-width: 650px;
    }

    #container .contents[data-lang="jp"] .intro[data-style="boost"] .mainTitle01_text {
        max-width: 545px;
    }

    #container .contents[data-lang="ko"] .intro[data-style="boost"] .mainTitle01_text {
        max-width: 580px;
    }

    #container .contents[data-lang="tw"] .intro[data-style="boost"] .mainTitle01_text {
        max-width: 600px;
    }

}

@media all and (max-width:1200px) {
    article {
        width: 100%;
        padding-left: 2%;
        padding-right: 2%
    }

    /* banner */
    .banner_bg {
        left: calc(50% - 600px);
        width: 1200px;
    }

    .banner_content {
        width: calc(100% - 60px);
        /* margin: 210px auto 0 auto; */
    }

    .banner_content_sub {
        font-size: 20px;
    }

    .banner_content_slogan_item {
        font-size: 34px;
    }

    .banner_product {
        bottom: 18%;
    }

    /* speed */
    .speed {
        padding: 0;
    }

    .speed .mainTitle01_text {
        max-width: 865px;
        margin: 15px auto 0 auto;
    }

    #container .contents[data-lang="en"] .speed .mainTitle01_text {
        letter-spacing: .05em;
    }

    #container .contents[data-lang="cn"] .speed .mainTitle01_text,
    #container .contents[data-lang="en"] .speed .mainTitle01_text,
    #container .contents[data-lang="jp"] .speed .mainTitle01_text,
    #container .contents[data-lang="ko"] .speed .mainTitle01_text,
    #container .contents[data-lang="tw"] .speed .mainTitle01_text {
        max-width: none;
    }

    .speed_logo {
        top: 40px;
        left: 50px;
        width: 85px;
    }

    .speed_content {
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0 auto;
        overflow: visible;
    }

    .speed_content_inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-items: flex-start;
        justify-content: space-between;
        width: calc(100% - 100px);
        height: 1227px;
        max-width: none;
        margin: 0 auto;
        padding: 100px 0;
    }

    .speed_content_inner_title {
        text-align: center;
    }

    .speed_content_inner_text {
        max-width: 900px;
        margin: 35px auto;
        text-align: left;
    }

    div:not([data-lang="en"]) .speed_content_inner_text .c-inlineBlock {
        display: inline;
    }

    .speed_content_inner_bg {
        left: 0;
        display: flex;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
        width: 100%;
        overflow: visible;
    }

    .speed_content_inner_bg img {
        object-fit: fill;
        width: 1200px;
        height: auto;
        -webkit-mask: none;
        mask: none;
    }

    .speed_content_inner_group {
        margin: auto auto 0 auto;
    }

    .speed_content_inner_group_box:first-child:last-child {
        max-width: none;
    }

    .speed_content_inner_notice {
        font-size: 14px;
    }

    #container .contents[data-lang="cn"] .speed_content_inner_notice,
    #container .contents[data-lang="en"] .speed_content_inner_notice,
    #container .contents[data-lang="jp"] .speed_content_inner_notice,
    #container .contents[data-lang="ko"] .speed_content_inner_notice,
    #container .contents[data-lang="tw"] .speed_content_inner_notice {
        max-width: none;
    }

    /* intro */
    .intro {
        align-items: flex-end;
        align-content: flex-end;
        min-height: 927px;
        padding: 0 0 90px 0;
    }

    .intro_bg {
        right: calc(50% - 600px);
        display: flex;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
        width: 1200px;
        height: 100%;
        min-width: 0;
    }

    .intro_bg img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: auto;
    }

    .intro_content_inner {
        width: 100%;
        max-width: none;
        margin: 5px 0 0 0;
    }

    .intro .mainTitle01_text {
        letter-spacing: .05em;
    }

    /**** self style ****/
    /* storage */
    .intro[data-style="storage"] {
        min-height: 927px;
    }

    /* boost */
    .intro[data-style="boost"] {
        min-height: 883px;
    }
}

@media all and (max-width:990px) {

    /* 商品規格 */
    .specTable {
        padding: 85px 0 60px 0;
    }
}

@media all and (max-width:812px) {

    /* banner */
    .banner_content_logo {
        max-width: 520.9px;
    }

    .banner_bg img {
        object-fit: fill;
        width: auto;
        height: 100%;
    }

    /* intro */
    .intro_content {
        width: calc(100% - 100px);
    }

}

@media all and (max-width:640px) {

    /* banner */
    .banner {
        height: 523px;
    }

    .banner_bg {
        left: calc(50% - 320px);
        width: 640px;
    }

    .banner_content {
        width: calc(100% - 40px);
        margin: 105px auto 0 auto;
    }

    .banner_content_logo {
        max-width: 308.6px;
        margin: 0 auto 10px auto;
    }

    .banner_content_sub {
        font-size: 12px;
    }

    .banner_content_slogan {
        margin: 5px auto 0 auto;
    }

    .banner_content_slogan_item {
        font-size: 18px;
    }

    .banner_product {
        left: max(10%, calc(50% - 150px));
        max-width: 300px;
    }

    /* features */
    .features article li>p {
        position: relative;
        left: -10px;
        width: calc(100% + 20px);
    }

    .features article li>p br {
        display: none;
    }

    /* speed */
    .speed .mainTitle01_text br {
        display: none;
    }

    .speed_logo {
        top: 60px;
        left: 25px;
        width: 50px;
    }

    .speed_content_inner {
        width: calc(100% - 50px);
        height: 800px;
        padding: 60px 0;
    }

    .speed_content_inner_bg img {
        width: 640px;
    }

    .speed_content_inner_group_box {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .speed_content_inner_text {
        margin: 5px 0 0 0;
        font-size: 12px;
    }

    div:not([data-lang="en"]) .speed_content_inner_text .c-inlineBlock {
        display: inline;
    }

    .speed_content_inner_notice {
        font-size: 12px;
    }

    /* intro */
    .intro {
        min-height: 570px;
        padding: 0 0 55px 0;
    }

    .intro_bg {
        left: calc(50% - 320px);
        width: 640px;
    }

    .intro .mainTitle01_text .c-inlineBlock {
        display: inline;
    }

    .intro .mainTitle01_text br {
        display: none;
    }

    #container .contents[data-lang="cn"] .intro .mainTitle01_text,
    #container .contents[data-lang="en"] .intro .mainTitle01_text,
    #container .contents[data-lang="jp"] .intro .mainTitle01_text,
    #container .contents[data-lang="ko"] .intro .mainTitle01_text,
    #container .contents[data-lang="tw"] .intro .mainTitle01_text {
        max-width: none;
    }

    .intro_content {
        width: calc(100% - 40px);
    }

    /**** self style ****/
    /* quick */
    .intro[data-style="quick"] {
        min-height: 505px;
    }

    /* storage */
    .intro[data-style="storage"] {
        min-height: 594px;
    }

    /* boost */
    .intro[data-style="boost"] {
        min-height: 597px;
    }

    #container .contents[data-lang="en"] .intro[data-style="boost"] .mainTitle01_text {
        width: calc(100% - 5px);
    }

    /* 國際標準 */
    .includes .mainTitle01_text br {
        display: none;
    }

    .includes_bottom {
        padding: 260px 0 80px 0;
    }

    /* 商品規格 */
    .specTable {
        padding: 70px 0 20px 0;
    }
}