*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
    margin: 0;
    overflow-x: hidden;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
}
.pc {
    display: block;
}
.sp {
    display: none;
}
.mg50 {
    margin: 50px 0;
}
.mgt20 {
    margin-top: 20px;
}
.mgt50 {
    margin-top: 50px!important;
}
.mgt100 {
    margin-top: 100px!important;
}
.mgt160 {
    margin-top: 160px!important;
}
.center {
    text-align: center;
}
.black {
    background-color: #000000;
}
.red {
    background-color: #C8161D;
}
.bg-black {
    background-color: #000000;
    padding: 50px 0;
}
.bg-white {
    position: relative;
    overflow: hidden;
    display: flex;
    background-color: rgba(255, 255, 255, .6);
    height: 100%;
}
    canvas {
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        /* max-width: 600px; */
        height: 100%;
    }
    #bg {
        position: absolute;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        z-index: -1;
    }
    .top {
        height: 100svh;
    }
        .top-wrapper {
            width: 100%;
            height: 100svh;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }
            .top-title {
                position: absolute;
                color: white;
                top:40%;
                transform: translateY(-40%);
            }
                .top-title h1 {
                    line-height: 1em;
                    margin: 0;
                }
                    .top-title h1 svg {
                        width: 500px;
                    }
                .top-title h2 {
                    font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
                    font-weight: normal;
                    line-height: 1em;
                    margin: 15px 0 0;
                }
            .top-text {
                position: absolute;
                color: white;
                bottom:60px;
            }
                .top-text p {
                    font-size: 1.35rem;
                    margin: 0;
                }
                    .top-text p span {
                        font-size: 2rem; 
                    }
#ella-logo path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawLogo 3s ease-in-out forwards, fillIn 3s ease-in-out forwards;
  fill: white;
  fill-opacity: 0;
  stroke: white;
  stroke-width: 1;
}

@keyframes drawLogo {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillIn {
  to {
    fill-opacity: 1;
  }
}

/******************************main*******************************/
.contents-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.cont-title {
    font-size: clamp(3rem, 2.636rem + 1.82vw, 4rem);
    font-weight: bold;
    text-align: center;
}
.cont-title2 {
    font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}
.cont-title3 {
    font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
    font-weight: bold;
    margin: 0 0 10px;
}
.cont-subTitle {
    text-align: center;
}
.video-title {
    text-align: center;
    font-size: clamp(2.25rem, 1.614rem + 3.18vw, 4rem);
    font-weight: bold;
}
.video-box {
    margin: 10px auto 0;
}
.video-box video {
    width: 100%;
}
.video-text {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    line-height: 2em;
    margin-top: 10px;
    padding: 15px 0;
}
.comparison-box,
.speed-box {
    position: relative;
    border-radius: 25px;
    background-color: #FFFFFF;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
.comparison-padding {
    padding: 100px 20px 20px;
}
.comparison-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 520px;
    height: 97px;
    font-size: 22px;
    color: #FFFFFF;
    text-align: center;
    padding: 5px 20px;
}
.graph-box {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.graph-box img {
    width: 100%;
}
.graph-coution {
    font-size: 10px;
    text-align: center;
    display: block;
    margin: 0 auto;
}
.sub-title,
.cont-title,
.cont-title2,
span {
    opacity: 0;
    transform: translateX(-50px);
    will-change: transform, opacity;
}
.cont-title3.center,
.cont-title.center,
.trans-title {
  opacity: 0;
  transform: translateY(50px);
}
/********************************flex*******************************/
.header-flex {
    position: relative;
    right: 10px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
    gap: 10px;
    z-index: 999;
}
    .top-logo {
        position: relative;
        top: 10px;
        left: 25px;
    }
        .top-logo img {
            width: 200px;
        }
    .header-box {
        margin-top: 15px;
    }
    .header-box select {
        width: 150px;
        height: 30px;
        font-size: 1rem;
        border-radius: 25px;
        padding: 2px 15px;
        background-color: #000000;
        color: #FFFFFF;
    }
.two-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
    gap: 20px;
    position: relative;
}
    .flex-box {
        flex: 1;
        min-width: 0;
    }
        .flex-box p.sub-title {
            font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
            font-weight: bold;
            margin: 0 0 40px;
        }
        .flex-box .sub-text {
            font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
            margin: 0;
        }
        .flex-box .img-box img {
            width: 100%;
        }
        .flex-box span {
            display: inline-block;
            position: absolute;
            background-color: #000000;
            color: #FFFFFF;
            font-size: clamp(2rem, 1.273rem + 3.64vw, 4rem);
            padding: 0 20px 5px;
            z-index: 2;
        }
        .flex-box video {
            width: 100%;
            height: 360px;
        }
        .speed-text {
            padding: 30px 0;
            text-align: center;
            font-weight: bold;
            font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
        }
        .badge {
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-block;
            padding: 2px 10px;
            border-radius: 25px;
            color: #FFFFFF;
        }

.three-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
    gap: 40px;
}
    .three-flex .flex-box .img-box img {
        border-radius: 15px;
    }
    .three-title {
        color: #FFFFFF;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }
    .three-text {
        color: #FFFFFF;
        font-size: .85rem;
        line-height: 1.6em;
    }

.btn-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; 
    gap: 30px;  
}
    .btn-flex a {
        background-color: #FFFFFF;
        color: #000000;
        text-decoration: none;
        border-radius: 25px;
        border: 1px solid #000000;
        width: 200px;
        text-align: center;
        padding: 5px 0;
        transition: background-color 0.3s, color 0.3s;
    }
        .btn-flex a:hover {
            background-color: transparent;
            color: #000000;
        }

.table-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
    gap: 100px;
}
.table-flex .table-box {
	width: calc(auto - 25px);
}

.company-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
    gap: 20px;
}
.company-flex .company-box {
    width: calc(50% - 10px);
    text-align: center;
}
.company-flex .company-box .company-photo img {
    width: 100%;
}
.company-flex .company-box .company-logo img {
    width: 100%;
    max-width: 400px;
}
.company-flex .company-box p {
    padding: 0 20px;
    text-align: justify;
    line-height: 1.6em;
}
/*******************************table*******************************/
.language-table {
  border-collapse: collapse;
  width: auto;
  min-width: 300px;
}
.language-table thead tr {
  background-color: #FAFAFA;
  color: #535862;
  font-weight: bold;
  border-top: 1px solid #E9EAEB;
  border-bottom: 1px solid #E9EAEB;
}
.language-table th {
  padding: 12px 20px;
  text-align: left;
  font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);
  font-weight: bold;
}
.language-table th:first-child {
    color: #717680;
}
.language-table tbody tr {
  border-top: 1px solid #E9EAEB;
  border-bottom: 1px solid #E9EAEB;
}
.language-table td {
  color: #555;
  padding: 15px 20px;
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
}
/*******************************button*******************************/
 :root {
--shiny-cta-bg: #C8161D;
--shiny-cta-fg: #ffffff;
--shiny-cta-hover-bg: #ffffff;
--shiny-cta-hover-fg: #ff4b4b;
--shiny-cta-highlight: #FF0B0B;
}
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@property --scale-size {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.shiny-cta {
    --animation-duration: 3s;
    --animation: gradient-rotate var(--animation-duration) linear infinite,
    scale-up var(--animation-duration) ease-in-out infinite;
    position: relative;
    padding: 1.25rem 8rem;
    font-size: 1.125rem;
    line-height: 1.2;
    border: 3px solid transparent;
    border-radius: 360px;
    color: var(--shiny-cta-fg);
    background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
    padding-box,
    conic-gradient(
    from var(--gradient-angle),
    transparent,
    var(--shiny-cta-highlight) 10%,
    transparent 30%
    )
    border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transform: scale(var(--scale-size));
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
    animation: var(--animation);
    text-decoration: none;
    display: inline-block; 
    text-align: center;
}
.shiny-cta:hover {
    background: linear-gradient(var(--shiny-cta-hover-bg), var(--shiny-cta-hover-bg)) padding-box,
    conic-gradient(
    from var(--gradient-angle),
    transparent,
    var(--shiny-cta-highlight) 10%,
    transparent 30%
    ) border-box;
    color: var(--shiny-cta-hover-fg);
    box-shadow: inset 0 0 0 2px var(--shiny-cta-hover-fg);
}
@keyframes gradient-rotate {
    0% {
    --gradient-angle: 0deg;
    }
    100% {
    --gradient-angle: 360deg;
    }
}
@keyframes scale-up {
    0%, 100% {
    --scale-size: 1;
    }
    50% {
    --scale-size: 1.1;
    }
}

/**********************************footer********************************/
footer {
    background-color: #000000;
    padding: 30px 0 10px;
    text-align: center;
}
    footer p {
        color: #FFFFFF;
        font-size: 1rem;
    }
    footer img {
        width: 400px;
    }
@media (min-width: 1025px) and (max-width: 1199px) {
    .contents-wrapper {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px;
        box-sizing: border-box;
        overflow: hidden;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    canvas {
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        pointer-events: none;
    }
    #bg {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100vh;
        object-fit: cover;
        z-index: -1;
    }
    .top-title {
        text-align: center;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
        .top-title h1 svg {
            width: 300px;
        }
        .top-text {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 35%;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            padding: 0 10px;
        }
            .top-text p {
                font-size: 1rem; 
            }
                .top-text p span {
                    font-size: 1.6rem; 
                }
/******************************main*******************************/
.contents-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
}
.cont-title {
    font-size: clamp(3rem, 2.636rem + 1.82vw, 4rem);
    font-weight: bold;
    text-align: center;
}
.cont-title2 {
    font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}
.cont-title3 {
    font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
    font-weight: bold;
    margin: 0 0 10px;
}
.cont-subTitle {
    text-align: center;
}
.video-title {
    text-align: center;
    font-size: clamp(2.25rem, 1.614rem + 3.18vw, 4rem);
    font-weight: bold;
}
.video-box {
    margin: 10px auto 0;
}
.video-box video {
    width: 100%;
}
.video-text {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    line-height: 2em;
    text-align: justify;
    margin-top: 10px;
    padding: 15px 0;
}
.comparison-box,
.speed-box {
    position: relative;
    border-radius: 25px;
    background-color: #FFFFFF;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
.comparison-padding {
    padding: 30px 20px 20px;
}
.comparison-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 350px;
    height: auto;
    font-size: 14.5px;
    color: #FFFFFF;
    text-align: center;
    padding: 5px 20px;
}
.graph-box {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.graph-box img {
    width: 100%;
}
.graph-coution {
    font-size: 10px;
    text-align: center;
    display: block;
    margin: 0 auto;
}
.sub-title,
.cont-title,
.cont-title2,
span {
    opacity: 0;
    transform: translateX(-50px);
    will-change: transform, opacity;
}
.cont-title3.center,
.cont-title.center,
.trans-title {
  opacity: 0;
  transform: translateY(50px);
}
/********************************flex*******************************/
.header-flex {
    position: relative;
    right: 10px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
    gap: 10px;
    z-index: 999;
}
    .top-logo {
        position: relative;
        top: 10px;
        left: 25px;
    }
        .top-logo img {
            width: 200px;
        }
    .header-box {
        margin-top: 15px;
    }
    .header-box select {
        width: 150px;
        height: 30px;
        font-size: 1rem;
        border-radius: 25px;
        padding: 2px 15px;
        background-color: #000000;
        color: #FFFFFF;
    }
.two-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
    gap: 20px;
    position: relative;
}
    .flex-box {
        flex: 1;
        min-width: 0;
    }
        .flex-box p.sub-title {
            font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
            font-weight: bold;
            margin: 0 0 40px;
        }
        .flex-box .sub-text {
            font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
            margin: 0;
        }
        .flex-box .img-box img {
            width: 100%;
        }
        .flex-box span {
            display: inline-block;
            position: absolute;
            background-color: #000000;
            color: #FFFFFF;
            font-size: clamp(2rem, 1.273rem + 3.64vw, 4rem);
            padding: 0 20px 5px;
            z-index: 2;
        }
        .flex-box video {
            width: 100%;
            height: 360px;
        }
        .speed-text {
            padding: 15px 0;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
        }
        .badge {
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-block;
            font-size: .8rem;
            padding: 2px 10px;
            border-radius: 25px;
            color: #FFFFFF;
        }

.three-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
    gap: 20px;
}
    .three-flex .flex-box .img-box img {
        border-radius: 15px;
    }
    .three-title {
        color: #FFFFFF;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
    }
    .three-text {
        color: #FFFFFF;
        font-size: .85rem;
        line-height: 1.6em;
    }

.btn-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; 
    gap: 30px;  
}
    .btn-flex a {
        background-color: #FFFFFF;
        color: #000000;
        text-decoration: none;
        border-radius: 25px;
        border: 1px solid #000000;
        width: 200px;
        text-align: center;
        padding: 5px 0;
        transition: background-color 0.3s, color 0.3s;
    }
        .btn-flex a:hover {
            background-color: transparent;
            color: #000000;
        }

.table-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
    gap: 50px;
}
.table-flex .table-box {
	width: calc(auto - 25px);
}

.company-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
    gap: 20px;
}
.company-flex .company-box {
    width: 100%;
    text-align: center;
}
.company-flex .company-box .company-photo img {
    width: 100%;
}
.company-flex .company-box .company-logo img {
    width: 100%;
    max-width: 400px;
}
.company-flex .company-box p {
    padding: 0 20px;
    text-align: justify;
    line-height: 1.6em;
}
/*******************************table*******************************/
.language-table {
  border-collapse: collapse;
  width: auto;
  min-width: 300px;
}
.language-table thead tr {
  background-color: #FAFAFA;
  color: #535862;
  font-weight: bold;
  border-top: 1px solid #E9EAEB;
  border-bottom: 1px solid #E9EAEB;
}
.language-table th {
  padding: 12px 20px;
  text-align: left;
  font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);
  font-weight: bold;
}
.language-table th:first-child {
    color: #717680;
}
.language-table tbody tr {
  border-top: 1px solid #E9EAEB;
  border-bottom: 1px solid #E9EAEB;
}
.language-table td {
  color: #555;
  padding: 15px 20px;
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
}
/*******************************button*******************************/
 :root {
--shiny-cta-bg: #C8161D;
--shiny-cta-fg: #ffffff;
--shiny-cta-hover-bg: #ffffff;
--shiny-cta-hover-fg: #ff4b4b;
--shiny-cta-highlight: #FF0B0B;
}
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@property --scale-size {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.shiny-cta {
    --animation-duration: 3s;
    --animation: gradient-rotate var(--animation-duration) linear infinite,
    scale-up var(--animation-duration) ease-in-out infinite;
    position: relative;
    padding: 1.25rem 8rem;
    font-size: 1.125rem;
    line-height: 1.2;
    border: 3px solid transparent;
    border-radius: 360px;
    color: var(--shiny-cta-fg);
    background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
    padding-box,
    conic-gradient(
    from var(--gradient-angle),
    transparent,
    var(--shiny-cta-highlight) 10%,
    transparent 30%
    )
    border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transform: scale(var(--scale-size));
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
    animation: var(--animation);
    text-decoration: none;
    display: inline-block; 
    text-align: center;
}
.shiny-cta:hover {
    background: linear-gradient(var(--shiny-cta-hover-bg), var(--shiny-cta-hover-bg)) padding-box,
    conic-gradient(
    from var(--gradient-angle),
    transparent,
    var(--shiny-cta-highlight) 10%,
    transparent 30%
    ) border-box;
    color: var(--shiny-cta-hover-fg);
    box-shadow: inset 0 0 0 2px var(--shiny-cta-hover-fg);
}
@keyframes gradient-rotate {
    0% {
    --gradient-angle: 0deg;
    }
    100% {
    --gradient-angle: 360deg;
    }
}
@keyframes scale-up {
    0%, 100% {
    --scale-size: 1;
    }
    50% {
    --scale-size: 1.1;
    }
}

/**********************************footer********************************/
footer {
    background-color: #000000;
    padding: 30px 0 10px;
    text-align: center;
}
    footer p {
        color: #FFFFFF;
        font-size: 1rem;
    }
    footer img {
        width: 400px;
    }
}

@media screen and (max-width: 767px) {
.mg50 {
    margin: 25px 0;
}
.mgt20 {
    margin-top: 20px;
}
.mgt50 {
    margin-top: 50px!important;
}
.mgt100 {
    margin-top: 50px!important;
}
.mgt160 {
    margin-top: 90px!important;
}
.sp-mgb50 {
    margin-bottom: 50px;
}
.pc {
    display: none;
}
.sp {
    display: block;
}
    canvas {
      /* width: 100%; */
      display: none;
    }
    .top-title {
        text-align: center;
        position: absolute;
        top: 40%;
        left: 40%;
        transform: translate(-40%, -40%);
        -webkit-transform: translate(-40%, -40%);
        -ms-transform: translate(-40%, -40%);
    }
        .top-title h1 svg {
            width: 300px;
        }
        .top-text {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            padding: 0 10px;
        }
            .top-text p {
                font-size: 1rem; 
            }
                .top-text p span {
                    font-size: 1.6rem; 
                }
            .top-logo {
                position: absolute;
                bottom: 5px;
                right: 5px;
            }
                .top-logo svg {
                    width: 200px;
                }
/******************************main*******************************/
.contents-wrapper {
    padding: 0 10px;
}
.cont-title {
    font-size: clamp(3rem, 2.636rem + 1.82vw, 4rem);
    font-weight: bold;
}
.cont-title2 {
    font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
    font-weight: bold;
    color: #FFFFFF;
}
.cont-subTitle {
    text-align: center;
    font-weight: bold;
}
.comparison-box,
.speed-box {
    position: relative;
    border-radius: 25px;
    background-color: #FFFFFF;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
.comparison-padding {
    padding: 60px 20px 20px;
}
.comparison-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 400px;
    height: auto;
    font-size: 1rem;
    color: #FFFFFF;
    text-align: center;
    padding: 5px 20px;
}
.video-text {
    text-align: center;
    font-size: 14px;
    padding: 5px 0;
}
.graph-box {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.graph-box img {
    width: 100%;
}
.graph-title {
    display: inline-block;
    color: #FFFFFF;
    font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);
    margin-bottom: 50px;
    padding: 0 20px 5px;
}
.graph-coution {
    font-size: 10px;
    text-align: center;
    display: block;
}
    .graph-coution p {
        text-indent: -1em;
        padding-left: 1em;
    }

/********************************flex*******************************/
.header-flex {
    position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
    z-index: 999;
}
    .top-logo {
        position: relative;
        top: 5px;
        left: 15px;
    }
        .top-logo svg {
            width: 200px;
        }
    .header-box {
        margin-top: 15px;
    }
    .header-box select {
        border-radius: 25px;
        padding: 2px 10px;
        background-color: #000000;
        color: #FFFFFF;
    }
.two-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
    gap: 20px;
    position: relative;
}
    .flex-box {
        flex: 100%;
        min-width: 0;
    }
        .flex-box p.sub-title {
            font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
            font-weight: bold;
            margin: 0 0 20px;
        }
        .flex-box .sub-text {
            font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
            margin: 0;
        }
        .flex-box .img-box img {
            width: 100%;
        }
        .flex-box span {
            display: inline-block;
            position: absolute;
            background-color: #000000;
            color: #FFFFFF;
            padding: 0 20px 5px;
            z-index: 2;
        }
        .flex-box video {
            width: 100%;
            height: 300px;
        }
        .speed-text {
            padding: 15px 0;
        }
        .badge {
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-block;
            padding: 2px 10px;
            border-radius: 25px;
            color: #FFFFFF;
        }

.three-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
    gap: 40px;
}
    .three-title {
        color: #FFFFFF;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }
    .three-text {
        color: #FFFFFF;
        font-size: 14px;
        line-height: 2em;
        text-align: center;
    }

.btn-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; 
    gap: 30px;  
}
    .btn-flex a {
        background-color: #FFFFFF;
        color: #000000;
        text-decoration: none;
        border-radius: 25px;
        border: 1px solid #000000;
        font-size: .8rem;
        width: 150px;
        text-align: center;
        padding: 5px 0;
        transition: background-color 0.3s, color 0.3s;
    }
        .btn-flex a:hover {
            background-color: transparent;
            color: #000000;
        }
.company-flex .company-box {
    width: 100%;
    text-align: center;
}
.company-flex .company-box .company-photo img {
    width: 100%;
}
.company-flex .company-box .company-logo img {
    width: 100%;
    max-width: 300px;
}
.company-flex .company-box p {
    padding: 0 10px;
    text-align: center;
    line-height: 1.6em;
    font-size: 14px;
}
/*******************************button*******************************/
 :root {
--shiny-cta-bg: #C8161D;
--shiny-cta-fg: #ffffff;
--shiny-cta-hover-bg: #ffffff;
--shiny-cta-hover-fg: #ff4b4b;
--shiny-cta-highlight: #FF0B0B;
}
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@property --scale-size {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}
.button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.shiny-cta {
    --animation-duration: 3s;
    --animation: gradient-rotate var(--animation-duration) linear infinite,
    scale-up var(--animation-duration) ease-in-out infinite;
    position: relative;
    width: 80%;
    padding: 1rem 0;
    font-size: 1rem;
    line-height: 1.2;
    border: 3px solid transparent;
    border-radius: 360px;
    color: var(--shiny-cta-fg);
    background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
    padding-box,
    conic-gradient(
    from var(--gradient-angle),
    transparent,
    var(--shiny-cta-highlight) 10%,
    transparent 30%
    )
    ;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transform: scale(var(--scale-size));
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
    animation: var(--animation);
    text-decoration: none;
    display: inline-block; 
    text-align: center;
}
.shiny-cta:hover {
    background: linear-gradient(var(--shiny-cta-hover-bg), var(--shiny-cta-hover-bg)) padding-box,
    conic-gradient(
    from var(--gradient-angle),
    transparent,
    var(--shiny-cta-highlight) 10%,
    transparent 30%
    ) border-box;
    color: var(--shiny-cta-hover-fg);
    box-shadow: inset 0 0 0 2px var(--shiny-cta-hover-fg);
}
@keyframes gradient-rotate {
    0% {
    --gradient-angle: 0deg;
    }
    100% {
    --gradient-angle: 360deg;
    }
}
@keyframes scale-up {
    0%, 100% {
    --scale-size: 1;
    }
    50% {
    --scale-size: 1.1;
    }
}

/**********************************footer********************************/
footer {
    background-color: #000000;
    padding: 30px 0 10px;
    text-align: center;
}
    footer p {
        color: #FFFFFF;
        font-size: 12px;
    }
    footer img {
        width: 300px;
    }
}