/******************************************
      成都讯维信息技术有限公司 版权所有

       www.xunwei.tm    400-6269-808
******************************************/

#section-kv {
    width: 100%;
    background: #000;
    height: calc(100vh - var(--oh-nav-height) + 2px);
height:calc((100 * var(--vh, 1vh)) - var(--oh-nav-height) + 2px);
    overflow: hidden
}
#section-kv .container {
    width: 100vw
}
#section-kv .bg {
    width: 100%;
    height: 100%;
    object-fit: cover
}
#section-kv .title {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-variation-settings: 'wght' 1000;
    line-height: 1.25
}

@media (min-width: 1800px) {
#section-kv .title {
    font-size: 80px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-kv .title {
    font-size: 67px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-kv .title {
    font-size: 55px
}
}

@media (max-width:1023px) {
#section-kv .title {
    line-height: 1.53;
    font-size: 30px
}
}
#section-kv .title .title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: translateY(100%)
}
#section-kv .title.show .title-wrapper {
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    opacity: 1;
    transform: translateY(0)
}
#section-kv .indicator {
    width: 1px;
    overflow: hidden;
    position: absolute;
    left: auto;
    max-height: 60px;
    height: 10vh;
height:calc(10 * var(--vh, 1vh));
    bottom: 10vh;
bottom:calc(10 * var(--vh, 1vh))
}

@media (min-width:721px) and (max-width:1023px) {
#section-kv .indicator {
    bottom: 5vh;
bottom:calc(5 * var(--vh, 1vh))
}
}

@media (min-width:1024px) {
#section-kv .indicator {
}
}

@media (min-width: 1800px) {
#section-kv .indicator {
    max-height: 80px;
    bottom: 40px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-kv .indicator {
    max-height: 67px;
    bottom: 34px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-kv .indicator {
    max-height: 55px;
    bottom: 27px
}
}
#section-kv .indicator .inner {
    background: #fff;
    transform: translateY(-100%)
}
#section-kv .indicator .inner.show {
    -webkit-animation: indicator-moving 1.6s ease-in-out 1s infinite forwards;
    animation: indicator-moving 1.6s ease-in-out 1s infinite forwards
}
@-webkit-keyframes indicator-moving {
from {
transform:translateY(-100%)
}
to {
transform:translateY(100%)
}
}
@keyframes indicator-moving {
from {
transform:translateY(-100%)
}
to {
transform:translateY(100%)
}
}
:root {
--oh-nav-height:80px
}

@media (min-width:1024px) and (max-width:1399px) {
:root {
--oh-nav-height:64px
}
}

@media (max-width:1023px) {
:root {
--oh-nav-height:48px
}
}
.g--container, .g--container-ls, .g--container-pt, .g--wrapper {
    margin: 0 auto
}
.g--container, .g--container-ls {
}

@media (min-width: 1800px) {
.g--container, .g--container-ls {
    width: 1312px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--container, .g--container-ls {
    width: 1100px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--container, .g--container-ls {
    width: 896px
}
}
.g--container, .g--container-pt {
}

@media (max-width: 720px) {
.g--container, .g--container-pt {
    width: 88.889vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--container, .g--container-pt {
    width: 83.333vw
}
}

@media (max-width:1023px) {
.g--pt-hidden {
    display: none !important
}
}

@media (min-width:1024px) {
.g--ls-hidden {
    display: none !important
}
}

@media (max-width:720px) {
.g--mb-hidden {
    display: none !important
}
}

@media not screen and (max-width:720px) {
.g--mb-show {
    display: none !important
}
}
body.no-scroll {
    overflow-y: hidden
}
.zn--wrapper {
    font-size: 16px;
    font-variation-settings: 'wght' 550;
    font-family: OPPOSans-Ver2-Regular, OPPOSans-Regular, 'PingFang SC', 'Hiragino Sans GB', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
}
.zn--wrapper * {
    box-sizing: border-box
}
.zn--wrapper a {
    text-decoration: none
}
.zn--wrapper img {
    display: block;
    max-width: initial
}
.zn--wrapper canvas img {
    display: none
}
.zn--wrapper video {
    display: block;
    max-width: initial
}
.zn--wrapper br {
    font-family: 'Open Sans', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Jhenghei', 'sans-serif'
}
.zn--wrapper h1 {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(0 0 99.9%);
    clip-path: inset(0 0 99.9%)
}

@media (min-width:721px) and (max-width:1023px) {
#oc-header {
    overflow: hidden
}
}

@media (max-width:1023px) {
#oc-header.fixed {
    visibility: hidden
}
}
#oc-wrapper {
    overflow: visible
}
#footer {
    overflow-x: hidden
}
.zn--wrapper .center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-self: center
}
.zn--wrapper .center-content {
    display: flex;
    justify-content: center;
    align-items: center
}
.zn--wrapper .abs.center-hor {
    left: 50%;
    transform: translateX(-50%)
}
.zn--wrapper .abs.center-ver {
    top: 50%;
    transform: translateY(-50%)
}
.zn--wrapper .flex.center-ver {
    align-items: center
}
.zn--wrapper .flex.center-ver > .wrapper {
    width: 100%
}
.zn--wrapper .flex.center-hor {
    justify-content: center
}
.zn--wrapper .flex.center-hor > .wrapper {
    height: 100%
}
.zn--wrapper .g--sticky-container, .zn--wrapper .sticky-container {
    position: relative
}
.zn--wrapper .g--sticky-item, .zn--wrapper .sticky-item, .zn--wrapper .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}
.zn--wrapper .black {
    color: #000
}
.zn--wrapper .white {
    color: #fff
}
.zn--wrapper .grey {
    color: rgba(255,255,255,0.56)
}
.zn--wrapper .grey-light {
    color: rgba(255,255,255,0.2)
}
.zn--wrapper .grey {
    color: rgba(0,0,0,0.7)
}
.zn--wrapper .grey-light {
    color: rgba(0,0,0,0.32)
}
.zn--wrapper .bg-black {
    background-color: #000
}
.zn--wrapper .bg-white {
    background-color: #fff
}
.zn--wrapper .full {
    width: 100%;
    height: 100%
}
.zn--wrapper .full-w {
    width: 100%
}
.zn--wrapper .full-h {
    height: 100%
}
.zn--wrapper .full-screen {
    height: 100vh;
height:calc(100 * var(--vh, 1vh))
}
.zn--wrapper .full-screen-nav {
    height: calc(100vh - 121px);
height:calc((100 * var(--vh, 1vh)) - 121px)
}

@media (max-width:768px) {
.zn--wrapper .full-screen-nav {
    height: calc(100vh - 101px);
height:calc((100 * var(--vh, 1vh)) - 101px)
}
}
.zn--wrapper .flex {
    display: flex
}
.zn--wrapper .flex.align-center {
    align-items: center
}
.zn--wrapper .flex.content-center {
    justify-content: center
}
.zn--wrapper .rel {
    position: relative
}
.zn--wrapper .abs {
    position: absolute
}
.zn--wrapper .abs.clip {
    top: 0;
    left: 0
}
.zn--wrapper .fixed {
    position: fixed
}
.zn--wrapper .fixed.clip {
    top: 0;
    left: 0
}
.zn--wrapper .clickable {
    cursor: pointer
}
.zn--wrapper .g--cover {
    object-fit: cover
}
.zn--wrapper img:not([src]):not([srcset]) {
    visibility: hidden
}
.zn--wrapper .g--popup-user {
    display: none
}
.g--popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
height:calc(100 * var(--vh, 1vh));
    z-index: 9999;
    transform: translateY(100vh);
transform:translateY(calc(100 * var(--vh, 1vh)))
}
.g--popup.show {
    transform: translateY(0);
    transition: transform .5s
}
.g--popup.disappear {
    transition: transform .5s
}
.g--popup .g--popup-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%
}

@media (max-width:1023px) {
.g--popup .g--popup-container {
    padding: 0
}
}
.g--popup .g--video-wrapper {
    position: relative;
    margin-top: -12px;
    width: 75%;
    height: auto
}

@media (min-width:2400px) {
.g--popup .g--video-wrapper {
    margin-top: -24px
}
}

@media (max-width:1023px) {
.g--popup .g--video-wrapper {
    width: 100vw
}
}
.video-portrait.g--popup .g--video-wrapper {
    width: 100%;
    height: 100%;
    padding: 32px 0;
    margin-top: 0
}
.g--popup .g--video-wrapper video {
    width: 100%;
    height: 100%;
    outline: none
}
.video-portrait.g--popup .g--video-wrapper video {
    object-fit: contain
}
.g--popup .g--video-wrapper video[src=''] {
    display: none
}
.g--popup .g--popup-close {
    top: -32px;
    right: 0;
    width: 12px;
    height: 12px;
    position: absolute;
    margin-left: auto;
    cursor: pointer;
    z-index: 2
}

@media (max-width:1023px) {
.g--popup .g--popup-close {
    width: 24px;
    height: 24px
}
}

@media (max-width: 720px) {
.g--popup .g--popup-close {
    right: 4.444vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--popup .g--popup-close {
    right: 4.167vw
}
}
.video-portrait.g--popup .g--popup-close {
    top: 8px
}
.g--popup .g--popup-close .inner {
    width: 100%;
    height: 100%
}

@media (max-width:1023px) {
.g--popup .g--popup-close .inner {
    transform: scale(.5)
}
}
.g--popup-container {
    background: #000
}
.g--popup-close polygon {
    fill: #fff
}
[data-theme = 'white'] .g--popup-container {
    background: #fff
}
[data-theme = 'white'] .g--popup-close polygon {
    fill: #000
}
#section-news {
    position: relative;
    overflow: hidden;
    background: #f5f5f7
}
#section-news .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

@media (max-width:1023px) {
#section-news .container {
}
}

@media (max-width: 720px) {
#section-news .container {
    margin-bottom: 22.222vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-news .container {
    margin-bottom: 20.833vw
}
}
#section-news .container .news-box {
    width: 31%;
    display: flex;
    flex-direction: column;
    transition: opacity 1s;
    opacity: 1
}

@media (min-width:1024px) {
#section-news .container .news-box {
    margin-bottom: 2.5vw
}
}

@media (max-width:1023px) {
#section-news .container .news-box {
    width: 100%;
    margin-bottom: 30px
}
}
#section-news .container .news-box .img-box {
    width: 100%;
    object-fit: cover
}

@media (min-width: 1800px) {
#section-news .container .news-box .img-box {
    height: 222px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .news-box .img-box {
    height: 186px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .news-box .img-box {
    height: 152px
}
}

@media (max-width:1023px) {
#section-news .container .news-box .img-box {
}
}

@media (max-width: 720px) {
#section-news .container .news-box .img-box {
    height: 52.083vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-news .container .news-box .img-box {
    height: 48.828vw
}
}
#section-news .container .news-box:not(.bigger) .text-box {
}

@media (min-width: 1800px) {
#section-news .container .news-box:not(.bigger) .text-box {
    margin-top: 20px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .news-box:not(.bigger) .text-box {
    margin-top: 17px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .news-box:not(.bigger) .text-box {
    margin-top: 14px
}
}

@media (max-width:1023px) {
#section-news .container .news-box .text-box {
    margin-top: 12px
}
}
#section-news .container .news-box .text-box span {
    display: block;
    font-variation-settings: 'wght' 550
}

@media (min-width: 1800px) {
#section-news .container .news-box .text-box span {
    margin-top: 16px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .news-box .text-box span {
    margin-top: 13px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .news-box .text-box span {
    margin-top: 11px
}
}

@media (max-width:1023px) {
#section-news .container .news-box .text-box span {
    margin-top: 10px
}
}
#section-news .container .news-box .text-box .title {
    font-variation-settings: 'wght' 750;
    line-height: 1.44;
    letter-spacing: -.0061em
}

@media (min-width: 1800px) {
#section-news .container .news-box .text-box .title {
    font-size: 18px;
    font-size: 18px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .news-box .text-box .title {
    font-size: 15px;
    font-size: 15px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .news-box .text-box .title {
    font-size: 12px;
    font-size: 12px
}
}

@media (max-width:1023px) {
#section-news .container .news-box .text-box .title {
    line-height: 1.44;
    font-size: 16px;
    letter-spacing: -.0056em
}
}
#section-news .container .news-box .text-box .date {
    color: #636569;
    line-height: 1.44;
    letter-spacing: -.0056em
}

@media (min-width: 1800px) {
#section-news .container .news-box .text-box .date {
    font-size: 16px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .news-box .text-box .date {
    font-size: 13px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .news-box .text-box .date {
    font-size: 11px
}
}

@media (max-width:1023px) {
#section-news .container .news-box .text-box .date {
    color: rgba(0,0,0,0.5);
    line-height: 1.43;
    font-size: 14px;
    letter-spacing: -.0057em
}
}
#section-news .container .news-box-hidden {
    display: none
}
#section-news .container .to-remove {
    opacity: 0
}
#section-news .container .to-add {
    opacity: 0
}

@media (min-width:1024px) {
#section-news .container .bigger {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}
}

@media (min-width: 1800px) {
#section-news .container .bigger {
    height: 437px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .bigger {
    height: 366px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .bigger {
    height: 298px
}
}

@media (min-width:1024px) {
#section-news .container .bigger .img-box {
    width: 50%
}
}

@media (min-width: 1800px) {
#section-news .container .bigger .img-box {
    height: 437px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .bigger .img-box {
    height: 366px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .bigger .img-box {
    height: 298px
}
}

@media (min-width:1024px) {
#section-news .container .bigger .text-box {
    width: 45%
}
}
#section-news .container .bigger .text-box span {
}

@media (min-width: 1800px) {
#section-news .container .bigger .text-box span {
    margin-top: 30px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .bigger .text-box span {
    margin-top: 25px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .bigger .text-box span {
    margin-top: 20px
}
}

@media (min-width:1024px) {
#section-news .container .bigger .text-box .title {
    margin-top: 0;
    line-height: 1.25;
    letter-spacing: -.0059em
}
}

@media (min-width: 1800px) {
#section-news .container .bigger .text-box .title {
    font-size: 32px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .bigger .text-box .title {
    font-size: 27px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .bigger .text-box .title {
    font-size: 22px
}
}

@media (min-width:1024px) {
#section-news .container .bigger .text-box .detail {
    color: rgba(0,0,0,0.8);
    line-height: 1.44;
    letter-spacing: -.0061em
}
}

@media (min-width: 1800px) {
#section-news .container .bigger .text-box .detail {
    font-size: 18px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .bigger .text-box .detail {
    font-size: 15px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .bigger .text-box .detail {
    font-size: 12px
}
}
#section-news .container .btn-box {
    width: 100%;
    text-align: center
}

@media (min-width: 1800px) {
#section-news .container .btn-box {
    margin-top: 20px;
    margin-bottom: 120px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .btn-box {
    margin-top: 17px;
    margin-bottom: 101px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .btn-box {
    margin-top: 14px;
    margin-bottom: 82px
}
}
#section-news .container .btn-box span {
    cursor: pointer;
    display: inline-block;
    font-variation-settings: 'wght' 550;
    line-height: 1.75;
    letter-spacing: -.01em
}

@media (min-width: 1800px) {
#section-news .container .btn-box span {
    font-size: 16px;
    border-bottom: 1px solid #111
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-news .container .btn-box span {
    font-size: 13px;
    border-bottom: 1px solid #111
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-news .container .btn-box span {
    font-size: 11px;
    border-bottom: 1px solid #111
}
}

@media (max-width:1023px) {
#section-news .container .btn-box span {
}
}

@media (max-width: 720px) {
#section-news .container .btn-box span {
    font-size: 3.889vw;
    border-bottom: 0.278vw solid #111
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-news .container .btn-box span {
    font-size: 3.646vw;
    border-bottom: 0.26vw solid #111
}
}
.title-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

@media (min-width: 1800px) {
.title-box {
    margin: 180px auto
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.title-box {
    margin: 151px auto
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.title-box {
    margin: 123px auto
}
}

@media (max-width:1023px) {
.title-box {
    margin: 80px auto
}
}
.title-box .canvas-box {
    object-fit: cover
}

@media (min-width: 1800px) {
.title-box .canvas-box {
    width: 250px;
    height: 250px;
    margin-bottom: 15px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.title-box .canvas-box {
    width: 210px;
    height: 210px;
    margin-bottom: 13px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.title-box .canvas-box {
    width: 171px;
    height: 171px;
    margin-bottom: 10px
}
}

@media (max-width:1023px) {
.title-box .canvas-box {
    width: 150px;
    height: 150px;
    margin-bottom: 15px
}
}
.title-box .title {
    font-variation-settings: 'wght' 1000;
    line-height: 1.14;
    letter-spacing: 0;
    background-image: linear-gradient(110deg, #59e686, #1b8fe2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
    text-align: center
}

@media (min-width: 1800px) {
.title-box .title {
    font-size: 70px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.title-box .title {
    font-size: 59px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.title-box .title {
    font-size: 48px
}
}

@media (max-width:1023px) {
.title-box .title {
    line-height: 1.44;
    font-size: 36px;
    letter-spacing: -.0047em;
    text-align: center
}
}
.g--td-title, .g-td-desc {
    display: flex;
    justify-content: center;
    align-items: center
}
.g--h2-title {
    font-variation-settings: 'wght' 750
}

@media (min-width:1024px) {
.g--h2-title {
    line-height: 1.52;
    font-size: 42px;
    letter-spacing: -.0048em
}
}

@media (max-width:1023px) {
.g--h2-title {
    line-height: 1.57;
    font-size: 28px
}
}
#zn-starry-star {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}
#section-carefree {
    background-color: #000
}
#section-carefree .container-box {
    position: relative
}

@media (min-width: 1800px) {
#section-carefree .container-box {
    height: 738px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .container-box {
    height: 619px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .container-box {
    height: 504px
}
}
#section-carefree .container-box .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center
}

@media (max-width:1023px) {
#section-carefree .container-box .container .info-box {
    position: absolute;
    top: 100%;
    width: 100%
}
}

@media (min-width:1024px) {
#section-carefree .container-box .container .info-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}
}

@media (min-width:1024px) {
#section-carefree .container-box .container .info-box .info-container {
    display: flex;
    flex-direction: column
}
}
#section-carefree .container-box .container .info-box .info-container .detail {
    font-variation-settings: 'wght' 550
}

@media (min-width:1024px) {
#section-carefree .container-box .container .info-box .info-container .detail {
}
}

@media (min-width: 1800px) {
#section-carefree .container-box .container .info-box .info-container .detail {
    margin-top: 20px;
    font-size: 28px;
    line-height: 40px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .container-box .container .info-box .info-container .detail {
    margin-top: 17px;
    font-size: 23px;
    line-height: 34px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .container-box .container .info-box .info-container .detail {
    margin-top: 14px;
    font-size: 19px;
    line-height: 27px
}
}

@media (max-width:1023px) {
#section-carefree .container-box .container .info-box .info-container .detail {
    text-align: center;
    color: rgba(255,255,255,0.8);
    margin: auto;
    margin-top: 32px;
    line-height: 1.45;
    font-size: 22px;
    letter-spacing: -.01em
}
}

@media (min-width:1024px) {
#section-carefree .container-box .container .info-box .info-container .detail span {
    display: block
}
}
#section-carefree .container-box .container .btn-box {
    display: inline-block;
    position: relative;
    background-color: #fff;
    color: #000
}

@media (min-width: 1800px) {
#section-carefree .container-box .container .btn-box {
    top: -100px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .container-box .container .btn-box {
    top: -84px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .container-box .container .btn-box {
    top: -68px
}
}

@media (max-width:1023px) {
#section-carefree .container-box .container .btn-box {
    margin-top: 85%
}
}
#section-carefree .container-box .container .btn-box img {
    display: inline-block
}

@media (max-width: 720px) {
#section-carefree .container-box .container .btn-box img {
    padding: 4.167vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-carefree .container-box .container .btn-box img {
    padding: 3.906vw
}
}

@media (min-width: 1800px) {
#section-carefree .container-box .container .btn-box img {
    padding: 14px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .container-box .container .btn-box img {
    padding: 12px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .container-box .container .btn-box img {
    padding: 10px
}
}
#section-carefree .container-box .container .btn-box span {
    font-variation-settings: 'wght' 550
}

@media (max-width: 720px) {
#section-carefree .container-box .container .btn-box span {
    padding-right: 4.167vw;
    font-size: 3.889vw;
    line-height: 6.944vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-carefree .container-box .container .btn-box span {
    padding-right: 3.906vw;
    font-size: 3.646vw;
    line-height: 6.51vw
}
}

@media (min-width: 1800px) {
#section-carefree .container-box .container .btn-box span {
    padding-right: 14px;
    font-size: 14px;
    line-height: 24px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .container-box .container .btn-box span {
    padding-right: 12px;
    font-size: 12px;
    line-height: 20px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .container-box .container .btn-box span {
    padding-right: 10px;
    font-size: 10px;
    line-height: 16px
}
}
#section-carefree .section-two {
    position: relative;
    color: #fff
}

@media (min-width:1024px) {
#section-carefree .section-two {
    height: 140vh;
height:calc(140 * var(--vh, 1vh))
}
}

@media (min-width:1024px) {
#section-carefree .section-two {
    text-align: center
}
}

@media (min-width: 1800px) {
#section-carefree .section-two {
    margin-top: 180px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two {
    margin-top: 151px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two {
    margin-top: 123px
}
}

@media (max-width:1023px) {
#section-carefree .section-two {
    margin-top: 270px;
    margin-bottom: 80px
}
}
#section-carefree .section-two .title {
    font-variation-settings: 'wght' 750
}

@media (min-width:1024px) {
#section-carefree .section-two .title {
    line-height: 1.52;
    letter-spacing: -.0048em
}
}

@media (min-width: 1800px) {
#section-carefree .section-two .title {
    font-size: 42px;
    margin-bottom: 129px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .title {
    font-size: 35px;
    margin-bottom: 108px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .title {
    font-size: 29px;
    margin-bottom: 88px
}
}

@media (max-width:1023px) {
#section-carefree .section-two .title {
    line-height: 1.57;
    font-size: 28px;
    text-align: center
}
}
#section-carefree .section-two .section-two-container {
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    height: 100vh;
height:calc(100 * var(--vh, 1vh));
    top: 0;
    overflow: hidden
}
#section-carefree .section-two .section-two-container .left-mask, #section-carefree .section-two .section-two-container .right-mask {
    z-index: 4;
    background: #000;
    height: 100%
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .left-mask, #section-carefree .section-two .section-two-container .right-mask {
    width: 303px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .left-mask, #section-carefree .section-two .section-two-container .right-mask {
    width: 254px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .left-mask, #section-carefree .section-two .section-two-container .right-mask {
    width: 207px
}
}
#section-carefree .section-two .section-two-container .left-mask {
    position: absolute;
    left: 0;
    top: 0
}
#section-carefree .section-two .section-two-container .right-mask {
    position: absolute;
    right: 0;
    top: 0
}
#section-carefree .section-two .section-two-container .img-box-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
    height: 100%
}
#section-carefree .section-two .section-two-container .img-box-wrapper .img-box {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s linear
}
#section-carefree .section-two .section-two-container .img-box-wrapper .img-act {
    opacity: 1
}
#section-carefree .section-two .section-two-container .container-text {
    overflow: hidden;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}
#section-carefree .section-two .section-two-container .container-text.clickable {
    pointer-events: auto
}

@media (min-width:1024px) {
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 {
    width: 36%
}
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text {
    height: auto
}
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text .des-title {
    opacity: 0;
    transition: opacity .3s linear
}
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text .details {
    opacity: 1
}
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text .details .det-title {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text .details .detail {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text .details .learn-more {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 {
    width: 36%
}
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text {
    height: auto
}
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text .des-title {
    opacity: 0;
    transition: opacity .3s linear
}
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text .details {
    opacity: 1
}
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text .details .det-title {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text .details .detail {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text .details .learn-more {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 {
    width: 36%
}
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text {
    height: auto
}
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text .des-title {
    opacity: 0;
    transition: opacity .3s linear
}
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text .details {
    opacity: 1
}
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text .details .det-title {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text .details .detail {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text .details .learn-more {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 {
    width: 36%
}
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text {
    height: auto
}
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text .des-title {
    opacity: 0;
    transition: opacity .3s linear
}
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text .details {
    opacity: 1
}
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text .details .det-title {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text .details .detail {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text .details .learn-more {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 {
    width: 36%
}
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text {
    height: auto
}
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text .des-title {
    opacity: 0;
    transition: opacity .3s linear
}
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text .details {
    opacity: 1
}
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text .details .det-title {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text .details .detail {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text .details .learn-more {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 {
    width: 36%
}
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text {
    height: auto
}
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text .des-title {
    opacity: 0;
    transition: opacity .3s linear
}
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text .details {
    opacity: 1
}
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text .details .det-title {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text .details .detail {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text .details .learn-more {
    opacity: 1;
    transform: translateY(0)
}
}
#section-carefree .section-two .section-two-container .container-text .model {
    position: relative;
    width: 16%;
    transition: width .6s cubic-bezier(.25, .1, .25, 1)
}
#section-carefree .section-two .section-two-container .container-text .model .line {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background: rgba(255,255,255,0.2);
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.25, .1, .25, 1)
}
#section-carefree .section-two .section-two-container .container-text .model .line.up {
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text .model .model-text {
    position: absolute;
    opacity: 0;
    transition: transform 1s cubic-bezier(.25, .1, .25, 1), opacity 1.5s linear
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text {
    bottom: 100px;
    transform: translateY(300px)
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text {
    bottom: 84px;
    transform: translateY(252px)
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text {
    bottom: 68px;
    transform: translateY(205px)
}
}
#section-carefree .section-two .section-two-container .container-text .model .model-text.up {
    opacity: 1;
    transform: translateY(0)
}
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title {
    position: absolute;
    font-variation-settings: 'wght' 750;
    line-height: 1.21;
    letter-spacing: -.01em
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title {
    bottom: 100px;
    margin-bottom: -100px;
    margin-left: 40px;
    font-size: 28px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title {
    bottom: 84px;
    margin-bottom: -84px;
    margin-left: 34px;
    font-size: 23px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title {
    bottom: 68px;
    margin-bottom: -68px;
    margin-left: 27px;
    font-size: 19px
}
}

@media (min-width:1024px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title {
    opacity: 1;
    transition: opacity .3s .2s linear
}
}

@media (min-width:1024px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title.des-title-act {
    opacity: 0;
    transition: opacity .4s ease-in-out
}
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title.des-title-act {
    margin-left: 40px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title.des-title-act {
    margin-left: 34px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title.des-title-act {
    margin-left: 27px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .des-title {
    width: 120px
}
}

@media (min-width:1024px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details {
    opacity: 0;
    text-align: left
}
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details {
    margin-left: 40px;
    margin-bottom: -25px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details {
    margin-left: 34px;
    margin-bottom: -21px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details {
    margin-left: 27px;
    margin-bottom: -17px
}
}
#section-carefree .section-two .section-two-container .container-text .model .model-text .details span {
    display: block
}
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .det-title {
    font-variation-settings: 'wght' 750;
    opacity: 0;
    line-height: 1.21;
    letter-spacing: -.01em;
    transition: transform .4s .2s cubic-bezier(.25, .1, .25, 1), opacity .4s .15s linear
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .det-title {
    font-size: 28px;
    transform: translateY(50px)
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .det-title {
    font-size: 23px;
    transform: translateY(42px)
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .det-title {
    font-size: 19px;
    transform: translateY(34px)
}
}

@media (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .det-title {
    width: 120px
}
}
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .detail {
    opacity: 0;
    font-variation-settings: 'wght' 550;
    line-height: 1.75;
    letter-spacing: -.01em;
    color: rgba(255,255,255,0.8);
    transition: transform .4s .2s cubic-bezier(.25, .1, .25, 1), opacity .4s .15s linear
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .detail {
    font-size: 16px;
    margin-top: 14px;
    margin-bottom: 24px;
    width: 480px;
    transform: translateY(70px)
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .detail {
    font-size: 13px;
    margin-top: 12px;
    margin-bottom: 20px;
    width: 402px;
    transform: translateY(59px)
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .detail {
    font-size: 11px;
    margin-top: 10px;
    margin-bottom: 16px;
    width: 328px;
    transform: translateY(48px)
}
}
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .learn-more {
    opacity: 0;
    display: inline-block;
    color: rgba(255,255,255,0.8);
    font-variation-settings: 'wght' 550;
    line-height: 1.71;
    letter-spacing: -.01em;
    transition: transform .4s .2s cubic-bezier(.25, .1, .25, 1), opacity .4s .15s linear
}

@media (min-width: 1800px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .learn-more {
    border-bottom: 1px solid rgba(255,255,255,0.8);
    font-size: 14px;
    transform: translateY(80px)
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .learn-more {
    border-bottom: 1px solid rgba(255,255,255,0.8);
    font-size: 12px;
    transform: translateY(67px)
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .learn-more {
    border-bottom: 1px solid rgba(255,255,255,0.8);
    font-size: 10px;
    transform: translateY(55px)
}
}
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .detail-act {
    opacity: 1;
    transform: translateY(0);
    transition: all .2s ease-in-out
}
#section-carefree .section-two .section-two-container .container-text .model .model-text .details .learn-more-act {
    opacity: 1;
    transform: translateY(0);
    transition: all .3s ease
}

@media (min-width:1024px) {
#section-carefree .section-two .section-two-container .container-text .model .model-text .details-act {
    opacity: 1;
    transform: translateY(0);
    transition: all .4s ease-in-out .5s
}
}
#section-carefree .section-two .section-two-container .container-text .model:last-child {
    border: none
}
#section-carefree .section-two .section-two-container .container-text .model-act {
    width: 40%
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text .des-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="0"] .model-0 .model-text .details .det-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text .des-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="1"] .model-1 .model-text .details .det-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text .des-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="2"] .model-2 .model-text .details .det-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text .des-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="3"] .model-3 .model-text .details .det-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text .des-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="4"] .model-4 .model-text .details .det-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text .des-title {
    width: 120px
}
}

@media (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (min-width:1024px) and (max-width:1399px) {
#section-carefree .section-two .section-two-container .container-text[data-active="5"] .model-5 .model-text .details .det-title {
    width: 120px
}
}
#section-carefree .section-two .section-two-mo {
    margin: 40px 15px 0
}
#section-carefree .section-two .section-two-mo .container-box {
    background-color: #392118
}

@media (max-width:1023px) {
#section-carefree .section-two .section-two-mo .container-box {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 40px
}
}
#section-carefree .section-two .section-two-mo .container-box .img-box {
}

@media (max-width: 720px) {
#section-carefree .section-two .section-two-mo .container-box .img-box {
    padding: 11.111vw 8.333vw 0
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-carefree .section-two .section-two-mo .container-box .img-box {
    padding: 10.417vw 7.813vw 0
}
}
#section-carefree .section-two .section-two-mo .container-box .det-title {
    font-variation-settings: 'wght' 750;
    line-height: 1.6;
    font-size: 20px;
    letter-spacing: -.01em
}

@media (max-width:1023px) {
#section-carefree .section-two .section-two-mo .container-box .det-title {
    margin-top: 24px
}
}
#section-carefree .section-two .section-two-mo .container-box .det-title span {
    display: block
}
#section-carefree .section-two .section-two-mo .container-box .detail {
    font-variation-settings: 'wght' 550;
    color: rgba(255,255,255,0.8)
}

@media (max-width:1023px) {
#section-carefree .section-two .section-two-mo .container-box .detail {
    line-height: 1.54;
    font-size: 13px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 14px
}
}
#section-carefree .section-two .section-two-mo .container-box .detail span {
    display: block
}
#section-carefree .section-two .section-two-mo .container-box .learn-more {
    display: inline-block;
    color: #fff;
    font-variation-settings: 'wght' 550
}

@media (max-width: 720px) {
#section-carefree .section-two .section-two-mo .container-box .learn-more {
    border-bottom: 0.278vw solid #fff
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-carefree .section-two .section-two-mo .container-box .learn-more {
    border-bottom: 0.26vw solid #fff
}
}

@media (max-width:1023px) {
#section-carefree .section-two .section-two-mo .container-box .learn-more {
    line-height: 1.54;
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 40px
}
}
#section-carefree .section-two .section-two-mo .container-box:nth-child(2) {
    background-color: #322a2f
}
#section-carefree .section-two .section-two-mo .container-box:nth-child(3) {
    background-color: #1a2d24
}
#section-carefree .section-two .section-two-mo .container-box:nth-child(4) {
    background-color: #2d2f3e
}
#section-carefree .section-two .section-two-mo .container-box:nth-child(5) {
    background-color: #2c343c
}
.patent {
    background: linear-gradient(180deg, #fff 0, #f5f5f7 100%)
}

@media (max-width: 720px) {
.patent {
    padding-top: 33.333vw;
    padding-bottom: 5.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.patent {
    padding-top: 31.25vw;
    padding-bottom: 5.208vw
}
}

@media (min-width: 1800px) {
.patent {
    padding-bottom: 182px;
    padding-top: 220px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.patent {
    padding-bottom: 153px;
    padding-top: 184px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.patent {
    padding-bottom: 124px;
    padding-top: 150px
}
}
.patent .second-row {
    display: flex;
    justify-content: space-between
}

@media (min-width: 1800px) {
.patent .second-row {
    margin-top: 82px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.patent .second-row {
    margin-top: 69px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.patent .second-row {
    margin-top: 56px
}
}
.wrapper {
    display: flex;
    flex-direction: column
}

@media (max-width: 720px) {
.wrapper {
    width: 88.889vw;
    margin-bottom: 16.667vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.wrapper {
    width: 83.333vw;
    margin-bottom: 15.625vw
}
}

@media (min-width: 1800px) {
.wrapper {
    width: 600px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.wrapper {
    width: 503px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.wrapper {
    width: 410px
}
}
.wrapper .num {
    font-variation-settings: 'wght' 750;
    line-height: 1.44;
    letter-spacing: -.0058em
}

@media (max-width: 720px) {
.wrapper .num {
    margin-bottom: 2.778vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.wrapper .num {
    margin-bottom: 2.604vw
}
}

@media (min-width: 1800px) {
.wrapper .num {
    font-size: 36px;
    margin-bottom: 13px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.wrapper .num {
    font-size: 30px;
    margin-bottom: 11px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.wrapper .num {
    font-size: 25px;
    margin-bottom: 9px
}
}

@media (max-width:1023px) {
.wrapper .num {
    line-height: 1.42;
    font-size: 26px;
    letter-spacing: -.0058em
}
}
.wrapper .desc {
}

@media (min-width: 1800px) {
.wrapper .desc {
    width: 600px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.wrapper .desc {
    width: 503px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.wrapper .desc {
    width: 410px
}
}

@media (max-width:1023px) {
.wrapper .desc {
    line-height: 1.42;
    font-size: 12px;
    letter-spacing: -.0058em
}
}
.milestone {
}

@media (min-width: 1800px) {
.milestone {
    padding-top: 128px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone {
    padding-top: 107px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone {
    padding-top: 87px
}
}

@media (max-width:1023px) {
.milestone {
    padding-top: 80px
}
}
.milestone .title-row {
    display: flex;
    justify-content: space-between
}

@media (min-width: 1800px) {
.milestone .title-row {
    margin-bottom: 82px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .title-row {
    margin-bottom: 69px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .title-row {
    margin-bottom: 56px
}
}

@media (max-width:1023px) {
.milestone .title-row {
    margin-bottom: 44px
}
}
.milestone .title-row .arrows {
    display: flex
}
.milestone .title-row .arrows .left .normal {
    transform: rotate(180deg)
}
.milestone .title-row .arrows .right {
}

@media (min-width: 1800px) {
.milestone .title-row .arrows .right {
    margin-left: 20px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .title-row .arrows .right {
    margin-left: 17px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .title-row .arrows .right {
    margin-left: 14px
}
}
.milestone .title-row .arrows .left, .milestone .title-row .arrows .right {
    cursor: pointer
}

@media (min-width: 1800px) {
.milestone .title-row .arrows .left, .milestone .title-row .arrows .right {
    width: 55px;
    height: 55px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .title-row .arrows .left, .milestone .title-row .arrows .right {
    width: 46px;
    height: 46px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .title-row .arrows .left, .milestone .title-row .arrows .right {
    width: 38px;
    height: 38px
}
}
.milestone .title-row .arrows .left img, .milestone .title-row .arrows .right img {
    width: 100%;
    height: 100%
}
.milestone .title-row .arrows .left.no-active, .milestone .title-row .arrows .right.no-active {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .5
}
.milestone .box-list {
    display: flex
}

@media (max-width:1023px) {
.milestone .box-list {
    flex-direction: column
}
}

@media (min-width:1024px) {
.milestone .box-list {
    transition: .4s ease
}
}
.milestone .box-list .box {
    position: relative
}
.milestone .box-list .box .row-line {
    height: 1px;
    width: 100%;
    background: rgba(86,86,86,0.4)
}

@media (min-width: 1800px) {
.milestone .box-list .box .row-line {
    top: 433px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .box-list .box .row-line {
    top: 363px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .box-list .box .row-line {
    top: 296px
}
}
.milestone .box-list .box .column-line {
    width: 1px;
    height: 100%;
    background: rgba(86,86,86,0.4)
}

@media (max-width:1023px) {
.milestone .box-list .box .column-line {
}
}

@media (max-width: 720px) {
.milestone .box-list .box .column-line {
    left: 13.056vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.milestone .box-list .box .column-line {
    left: 12.24vw
}
}
.milestone .box-list .box:not(:last-child) {
}

@media (min-width: 1800px) {
.milestone .box-list .box:not(:last-child) {
    padding-right: 54px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .box-list .box:not(:last-child) {
    padding-right: 45px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .box-list .box:not(:last-child) {
    padding-right: 37px
}
}

@media (max-width:1023px) {
.milestone .box-list .box:not(:last-child) {
    padding-bottom: 40px
}
}
.milestone .box-list .box .pic {
}

@media (min-width: 1800px) {
.milestone .box-list .box .pic {
    width: 673px;
    height: 340px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .box-list .box .pic {
    width: 564px;
    height: 285px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .box-list .box .pic {
    width: 460px;
    height: 232px
}
}
.milestone .box-list .box .text-content {
}

@media (min-width: 1800px) {
.milestone .box-list .box .text-content {
    margin-top: 40px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .box-list .box .text-content {
    margin-top: 34px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .box-list .box .text-content {
    margin-top: 27px
}
}

@media (max-width:1023px) {
.milestone .box-list .box .text-content {
    display: flex
}
}
.milestone .box-list .box .text-content .year {
    font-variation-settings: 'wght' 750;
    line-height: 1.42;
    font-size: 24px;
    letter-spacing: -.0058em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

@media (max-width: 720px) {
.milestone .box-list .box .text-content .year {
    margin-right: 9.167vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.milestone .box-list .box .text-content .year {
    margin-right: 8.594vw
}
}

@media (min-width: 1800px) {
.milestone .box-list .box .text-content .year {
    margin-bottom: 20px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .box-list .box .text-content .year {
    margin-bottom: 17px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .box-list .box .text-content .year {
    margin-bottom: 14px
}
}

@media (max-width:1023px) {
.milestone .box-list .box .text-content .year {
    line-height: 1;
    font-size: 16px;
    letter-spacing: -.005em
}
}
.milestone .box-list .box .text-content .td-wrapper img {
}

@media (max-width: 720px) {
.milestone .box-list .box .text-content .td-wrapper img {
    width: 51.111vw;
    height: 28.611vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.milestone .box-list .box .text-content .td-wrapper img {
    width: 47.917vw;
    height: 26.823vw
}
}

@media (min-width: 1800px) {
.milestone .box-list .box .text-content .td-wrapper img {
    margin-bottom: 24px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .box-list .box .text-content .td-wrapper img {
    margin-bottom: 20px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .box-list .box .text-content .td-wrapper img {
    margin-bottom: 16px
}
}

@media (max-width:1023px) {
.milestone .box-list .box .text-content .td-wrapper img {
    margin-bottom: 14px
}
}
.milestone .box-list .box .text-content .td-wrapper .desc {
    line-height: 1.56;
    font-size: 18px;
    letter-spacing: -.0061em
}

@media (min-width: 1800px) {
.milestone .box-list .box .text-content .td-wrapper .desc {
    width: 580px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.milestone .box-list .box .text-content .td-wrapper .desc {
    width: 486px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.milestone .box-list .box .text-content .td-wrapper .desc {
    width: 396px
}
}

@media (max-width:1023px) {
.milestone .box-list .box .text-content .td-wrapper .desc {
    line-height: 1.5;
    font-size: 12px;
    letter-spacing: -.01em
}
}
.cooperation {
    background: linear-gradient(180deg, #fff 0, #f5f5f7 20%, #f5f5f7 100%)
}

@media (min-width: 1800px) {
.cooperation {
    padding-top: 256px;
    padding-bottom: 182px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation {
    padding-top: 215px;
    padding-bottom: 153px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation {
    padding-top: 175px;
    padding-bottom: 124px
}
}

@media (max-width:1023px) {
.cooperation {
    text-align: center;
    background: linear-gradient(180deg, #fff 0, #f5f5f7 10%);
    padding-top: 96px;
    padding-bottom: 81px
}
}

@media (min-width:1024px) {
.cooperation .td-container {
    text-align: center
}
}
.cooperation .td-container .desc {
    line-height: 1.4;
    font-size: 20px
}

@media (min-width: 1800px) {
.cooperation .td-container .desc {
    margin-top: 20px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .td-container .desc {
    margin-top: 17px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .td-container .desc {
    margin-top: 14px
}
}

@media (max-width:1023px) {
.cooperation .td-container .desc {
    line-height: 1.75;
    font-size: 16px;
    letter-spacing: -.01em;
    margin-top: 6px
}
}

@media (min-width:1024px) {
.cooperation .box-list {
    display: flex;
    justify-content: center;
    flex-direction: column
}
}
.cooperation .box-list .wrapper {
    display: flex;
    flex-direction: column
}

@media (min-width: 1800px) {
.cooperation .box-list .wrapper {
    margin-top: 40px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .wrapper {
    margin-top: 34px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .wrapper {
    margin-top: 27px
}
}

@media (max-width:1023px) {
.cooperation .box-list .wrapper {
    margin-top: 32px
}
}
.cooperation .box-list .first-row, .cooperation .box-list .second-row {
    display: flex;
    width: 100%;
    justify-content: space-between
}

@media (min-width:1024px) {
.cooperation .box-list .first-row .slick-dots, .cooperation .box-list .second-row .slick-dots {
    display: flex;
    justify-content: center
}
.cooperation .box-list .first-row .slick-dots li.slick-active .dot, .cooperation .box-list .second-row .slick-dots li.slick-active .dot {
    background: #111
}
.cooperation .box-list .first-row .slick-dots li:not(:last-child) .dot, .cooperation .box-list .second-row .slick-dots li:not(:last-child) .dot {
}
.cooperation .box-list .first-row .slick-dots .dot, .cooperation .box-list .second-row .slick-dots .dot {
    background: #d8d8d8;
    border-radius: 50%
}
}

@media (min-width: 1800px) {
.cooperation .box-list .first-row .slick-dots .dot, .cooperation .box-list .second-row .slick-dots .dot {
    width: 10px;
    height: 10px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .first-row .slick-dots .dot, .cooperation .box-list .second-row .slick-dots .dot {
    width: 8px;
    height: 8px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .first-row .slick-dots .dot, .cooperation .box-list .second-row .slick-dots .dot {
    width: 7px;
    height: 7px
}
}

@media (min-width: 1800px) {
.cooperation .box-list .first-row .slick-dots li:not(:last-child) .dot, .cooperation .box-list .second-row .slick-dots li:not(:last-child) .dot {
    margin-right: 20px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .first-row .slick-dots li:not(:last-child) .dot, .cooperation .box-list .second-row .slick-dots li:not(:last-child) .dot {
    margin-right: 17px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .first-row .slick-dots li:not(:last-child) .dot, .cooperation .box-list .second-row .slick-dots li:not(:last-child) .dot {
    margin-right: 14px
}
}

@media (min-width: 1800px) {
.cooperation .box-list .first-row .slick-dots, .cooperation .box-list .second-row .slick-dots {
    margin-top: 40px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .first-row .slick-dots, .cooperation .box-list .second-row .slick-dots {
    margin-top: 34px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .first-row .slick-dots, .cooperation .box-list .second-row .slick-dots {
    margin-top: 27px
}
}

@media (max-width:1023px) {
.cooperation .box-list .first-row, .cooperation .box-list .second-row {
    flex-wrap: wrap
}
}
.cooperation .box-list .first-row .box, .cooperation .box-list .second-row .box {
}

@media (max-width: 720px) {
.cooperation .box-list .first-row .box, .cooperation .box-list .second-row .box {
    margin-bottom: 3.333vw;
    width: 42.778vw;
    height: 22.778vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.cooperation .box-list .first-row .box, .cooperation .box-list .second-row .box {
    margin-bottom: 3.125vw;
    width: 40.104vw;
    height: 21.354vw
}
}

@media (min-width: 1800px) {
.cooperation .box-list .first-row .box, .cooperation .box-list .second-row .box {
    width: 305px;
    height: 164px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .first-row .box, .cooperation .box-list .second-row .box {
    width: 256px;
    height: 137px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .first-row .box, .cooperation .box-list .second-row .box {
    width: 208px;
    height: 112px
}
}
.cooperation .box-list .first-row {
}

@media (max-width: 720px) {
.cooperation .box-list .first-row {
    margin-top: 8.889vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.cooperation .box-list .first-row {
    margin-top: 8.333vw
}
}

@media (min-width: 1800px) {
.cooperation .box-list .first-row {
    margin-top: 64px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .first-row {
    margin-top: 54px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .first-row {
    margin-top: 44px
}
}

@media (min-width:1024px) {
.cooperation .box-list .second-row {
    display: block
}
.cooperation .box-list .second-row .slick-list {
}
.cooperation .box-list .second-row .slick-list .box img {
}
}

@media (min-width: 1800px) {
.cooperation .box-list .second-row .slick-list .box img {
    width: 305px;
    height: 164px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .second-row .slick-list .box img {
    width: 256px;
    height: 137px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .second-row .slick-list .box img {
    width: 208px;
    height: 112px
}
}

@media (min-width: 1800px) {
.cooperation .box-list .second-row .slick-list {
    margin-right: -30px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .second-row .slick-list {
    margin-right: -25px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .second-row .slick-list {
    margin-right: -20px
}
}
.cooperation .box-list .title {
    line-height: 1.52;
    font-size: 42px
}

@media (min-width: 1800px) {
.cooperation .box-list .title {
    margin-top: 80px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-list .title {
    margin-top: 67px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-list .title {
    margin-top: 55px
}
}

@media (min-width:1024px) {
.cooperation .box-list .title {
    text-align: center
}
}

@media (max-width:1023px) {
.cooperation .box-list .title {
    line-height: 1.57;
    font-size: 28px;
    margin-top: 42px
}
}
.cooperation .box-wrapper {
    width: 100vw;
    height: 100vh;
height:calc(100 * var(--vh, 1vh));
    position: relative
}
.cooperation .box-wrapper .black-box {
    height: 100vh;
height:calc(100 * var(--vh, 1vh));
    display: flex;
    justify-content: center;
    align-items: center
}

@media (min-width: 1800px) {
.cooperation .box-wrapper .black-box {
    margin-top: 182px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-wrapper .black-box {
    margin-top: 153px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-wrapper .black-box {
    margin-top: 124px
}
}

@media (max-width:1023px) {
.cooperation .box-wrapper .black-box {
    margin-top: 80px
}
}
.cooperation .box-wrapper .text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center
}
.cooperation .box-wrapper .text-wrapper .text {
    color: #fff;
    line-height: 1.92;
    font-size: 24px;
    letter-spacing: -.0046em;
    text-align: center
}

@media (min-width: 1800px) {
.cooperation .box-wrapper .text-wrapper .text {
    width: 780px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .box-wrapper .text-wrapper .text {
    width: 654px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .box-wrapper .text-wrapper .text {
    width: 533px
}
}

@media (max-width:1023px) {
.cooperation .box-wrapper .text-wrapper .text {
    line-height: 1.78;
    font-size: 18px;
    letter-spacing: -.005em
}
}

@media (max-width: 720px) {
.cooperation .box-wrapper .text-wrapper .text {
    width: 77.778vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.cooperation .box-wrapper .text-wrapper .text {
    width: 72.917vw
}
}
.cooperation .learn-more-list {
    display: flex;
    justify-content: space-between
}

@media (min-width: 1800px) {
.cooperation .learn-more-list {
    margin-top: 128px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .learn-more-list {
    margin-top: 107px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .learn-more-list {
    margin-top: 87px
}
}

@media (max-width:1023px) {
.cooperation .learn-more-list {
    text-align: left;
    margin-top: 80px
}
}

@media (max-width:1023px) {
.cooperation .learn-more-list {
    flex-direction: column
}
}
.cooperation .learn-more-list .learn-more .title {
    line-height: 1.6;
    font-size: 20px;
    font-variation-settings: 'wght' 750
}

@media (min-width: 1800px) {
.cooperation .learn-more-list .learn-more .title {
    margin-top: 14px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .learn-more-list .learn-more .title {
    margin-top: 12px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .learn-more-list .learn-more .title {
    margin-top: 10px
}
}

@media (max-width:1023px) {
.cooperation .learn-more-list .learn-more .title {
    line-height: 1.56;
    font-size: 18px;
    margin-top: 16px
}
}
.cooperation .learn-more-list .learn-more .button {
    line-height: 1.71;
    font-size: 14px;
    border-bottom: 1px solid #000
}

@media (min-width: 1800px) {
.cooperation .learn-more-list .learn-more .button {
    margin-top: 2px;
    padding-bottom: 4px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .learn-more-list .learn-more .button {
    margin-top: 2px;
    padding-bottom: 3px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .learn-more-list .learn-more .button {
    margin-top: 1px;
    padding-bottom: 3px
}
}

@media (max-width:1023px) {
.cooperation .learn-more-list .learn-more .button {
    line-height: 1.71;
    font-size: 14px;
    padding-bottom: 4px
}
}

@media (max-width: 720px) {
.cooperation .learn-more-list .learn-more .button {
    margin-top: 0.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.cooperation .learn-more-list .learn-more .button {
    margin-top: 0.521vw
}
}

@media (max-width:1023px) {
.cooperation .learn-more-list .learn-more-0 {
    margin-bottom: 50px
}
}
.cooperation .learn-more-list .learn-more-0 img {
}

@media (min-width: 1800px) {
.cooperation .learn-more-list .learn-more-0 img {
    width: 374px;
    height: 556px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .learn-more-list .learn-more-0 img {
    width: 314px;
    height: 466px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .learn-more-list .learn-more-0 img {
    width: 255px;
    height: 380px
}
}

@media (max-width:1023px) {
.cooperation .learn-more-list .learn-more-0 img {
    width: 100%
}
}

@media (max-width: 720px) {
.cooperation .learn-more-list .learn-more-0 img {
    height: 68.889vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.cooperation .learn-more-list .learn-more-0 img {
    height: 64.583vw
}
}
.cooperation .learn-more-list .learn-more-1 img {
}

@media (min-width: 1800px) {
.cooperation .learn-more-list .learn-more-1 img {
    width: 828px;
    height: 556px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.cooperation .learn-more-list .learn-more-1 img {
    width: 694px;
    height: 466px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.cooperation .learn-more-list .learn-more-1 img {
    width: 565px;
    height: 380px
}
}

@media (max-width:1023px) {
.cooperation .learn-more-list .learn-more-1 img {
    width: 100%
}
}

@media (max-width: 720px) {
.cooperation .learn-more-list .learn-more-1 img {
    height: 68.889vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.cooperation .learn-more-list .learn-more-1 img {
    height: 64.583vw
}
}
.net {
    position: relative
}
.net .learn-more {
    display: inline-block;
    margin-top: 12px;
    border-bottom: 1px solid #000
}

@media (min-width: 1800px) {
.net .learn-more {
    margin-top: 20px;
    padding-bottom: 1px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.net .learn-more {
    margin-top: 17px;
    padding-bottom: 1px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.net .learn-more {
    margin-top: 14px;
    padding-bottom: 1px
}
}
.text-container {
}

@media (min-width: 1800px) {
.text-container {
    margin-bottom: 82px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.text-container {
    margin-bottom: 69px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.text-container {
    margin-bottom: 56px
}
}
.text-container .title {
    line-height: 1.52;
    letter-spacing: -.0048em;
    font-variation-settings: 'wght' 750
}

@media (min-width: 1800px) {
.text-container .title {
    font-size: 42px;
    margin-bottom: 20px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.text-container .title {
    font-size: 35px;
    margin-bottom: 17px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.text-container .title {
    font-size: 29px;
    margin-bottom: 14px
}
}

@media (max-width:1023px) {
.text-container .title {
    line-height: 1.57;
    font-size: 28px;
    margin-bottom: 14px
}
}
.text-container .desc {
    line-height: 1.6;
    letter-spacing: 0
}

@media (min-width: 1800px) {
.text-container .desc {
    font-size: 20px;
    width: 490px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.text-container .desc {
    font-size: 17px;
    width: 411px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.text-container .desc {
    font-size: 14px;
    width: 335px
}
}

@media (max-width:1023px) {
.text-container .desc {
    line-height: 1.75;
    font-size: 16px;
    letter-spacing: -.01em
}
}
.rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (min-width: 1800px) {
.rows {
    height: 540px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows {
    height: 453px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows {
    height: 369px
}
}
.rows .row {
}

@media (min-width: 1800px) {
.rows .row {
    width: 480px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row {
    width: 402px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row {
    width: 328px
}
}
.rows .row .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

@media (min-width: 1800px) {
.rows .row .title-wrapper {
    width: 480px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row .title-wrapper {
    width: 402px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row .title-wrapper {
    width: 328px
}
}
.rows .row .title-wrapper.active .icons span:first-of-type {
    transform: rotate(180deg)
}
.rows .row .title-wrapper.active .icons span:last-of-type {
    transform: rotate(0) translateY(-2px)
}
.rows .row .title-wrapper.active .title {
    opacity: 1
}
.rows .row .title-wrapper .title {
    font-variation-settings: 'wght' 750;
    pointer-events: none;
    line-height: 1.21;
    letter-spacing: 0;
    opacity: .6
}

@media (min-width: 1800px) {
.rows .row .title-wrapper .title {
    font-size: 28px;
    margin: 24px 0
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row .title-wrapper .title {
    font-size: 23px;
    margin: 20px 0
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row .title-wrapper .title {
    font-size: 19px;
    margin: 16px 0
}
}
.rows .row .title-wrapper .icons {
    pointer-events: none
}
.rows .row .title-wrapper .icons span {
    display: block;
    background: #000
}

@media (min-width: 1800px) {
.rows .row .title-wrapper .icons span {
    width: 18px;
    height: 2px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row .title-wrapper .icons span {
    width: 15px;
    height: 2px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row .title-wrapper .icons span {
    width: 12px;
    height: 1px
}
}
.rows .row .title-wrapper .icons span:last-of-type {
    transform: rotate(90deg) translateX(-2px)
}
.rows .row .desc-box {
    border-bottom: 1px solid rgba(0,0,0,0.3)
}
.rows .row .desc-box .desc-padding {
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
    transition: padding-bottom .5s ease, opacity .2s linear;
    opacity: 0
}
.rows .row .desc-box .desc-padding.active {
    opacity: 1;
    transition: opacity .5s linear, padding-bottom .5s ease
}

@media (min-width: 1800px) {
.rows .row .desc-box .desc-padding.active {
    margin-bottom: 24px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row .desc-box .desc-padding.active {
    margin-bottom: 20px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row .desc-box .desc-padding.active {
    margin-bottom: 16px
}
}
.rows .row .desc-box .desc-padding .desc {
    position: absolute;
    line-height: 1.75;
    letter-spacing: -.01em
}

@media (min-width: 1800px) {
.rows .row .desc-box .desc-padding .desc {
    width: 480px;
    font-size: 16px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row .desc-box .desc-padding .desc {
    width: 402px;
    font-size: 13px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row .desc-box .desc-padding .desc {
    width: 328px;
    font-size: 11px
}
}
.rows .row .pic-wrapper {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0
}

@media (min-width: 1800px) {
.rows .row .pic-wrapper {
    width: 720px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row .pic-wrapper {
    width: 604px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row .pic-wrapper {
    width: 492px
}
}
.rows .row .pic-wrapper.active .pic {
    opacity: 1;
    transition: opacity .3s linear
}
.rows .row .pic-wrapper .pic {
    width: 100%;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%)
}

@media (min-width: 1800px) {
.rows .row .pic-wrapper .pic {
    height: 540px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.rows .row .pic-wrapper .pic {
    height: 453px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.rows .row .pic-wrapper .pic {
    height: 369px
}
}
.column-content {
    position: relative
}

@media (max-width:1023px) {
.column-content {
    margin-top: 64px
}
}
.column-content[data-active="0"] .box .box-content-0 .pic-wrapper .pic {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="0"] .box .box-content-0 .content {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="0"] .box .box-content-0 .content .show-more {
    display: block;
    z-index: 2
}
.column-content[data-active="0"] .column-list .title-0 {
    opacity: 1
}
.column-content[data-active="1"] .box .box-content-1 .pic-wrapper .pic {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="1"] .box .box-content-1 .content {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="1"] .box .box-content-1 .content .show-more {
    display: block;
    z-index: 2
}
.column-content[data-active="1"] .column-list .title-1 {
    opacity: 1
}
.column-content[data-active="2"] .box .box-content-2 .pic-wrapper .pic {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="2"] .box .box-content-2 .content {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="2"] .box .box-content-2 .content .show-more {
    display: block;
    z-index: 2
}
.column-content[data-active="2"] .column-list .title-2 {
    opacity: 1
}
.column-content[data-active="3"] .box .box-content-3 .pic-wrapper .pic {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="3"] .box .box-content-3 .content {
    opacity: 1;
    transition: opacity .5s linear
}
.column-content[data-active="3"] .box .box-content-3 .content .show-more {
    display: block;
    z-index: 2
}
.column-content[data-active="3"] .column-list .title-3 {
    opacity: 1
}
.column-content .column-list {
    display: flex;
    overflow: scroll
}
.column-content .column-list::-webkit-scrollbar {
display:none
}
.column-content .column-list .title {
    font-variation-settings: 'wght' 750;
    white-space: nowrap;
    opacity: .6;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    z-index: 1
}

@media (max-width: 720px) {
.column-content .column-list .title {
    padding-right: 8.889vw;
    font-size: 5vw;
    line-height: 7.778vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.column-content .column-list .title {
    padding-right: 8.333vw;
    font-size: 4.688vw;
    line-height: 7.292vw
}
}

@media (max-width:1023px) {
.column-content .column-list .title {
    padding-bottom: 14px
}
}
.column-content .column-list .title.title-3 {
    padding-right: 0
}
.column-content .column-list .indicator {
    position: absolute;
    background: #EE7700;
    left: 0;
    transform: translateX(0);
    bottom: 0;
    height: 3px;
    transition: .4s;
    z-index: 2
}

@media (min-width:721px) and (max-width:1023px) {
.column-content .box width 100% {
height:800px
}
}
.column-content .box .box-content {
    display: flex;
    flex-direction: column
}

@media (max-width:1023px) {
.column-content .box .box-content {
    margin-top: 30px
}
.column-content .box .box-content:first-of-type {
    position: relative
}
}
.column-content .box .box-content .pic-wrapper {
}

@media (max-width: 720px) {
.column-content .box .box-content .pic-wrapper {
    width: 88.889vw;
    height: 66.667vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.column-content .box .box-content .pic-wrapper {
    width: 83.333vw;
    height: 62.5vw
}
}

@media (max-width:1023px) {
.column-content .box .box-content .pic-wrapper {
    margin-bottom: 30px
}
}
.column-content .box .box-content .pic-wrapper .pic {
    opacity: 0
}
.column-content .box .box-content .content {
    opacity: 0;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.57;
    font-size: 14px;
    letter-spacing: -.01em
}
.g--modal {
    display: none;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 4;
    justify-content: center;
    align-items: center
}
.g--modal .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10
}
.g--modal .block {
    position: relative;
    background: #fff;
    z-index: 11
}

@media (max-width: 720px) {
.g--modal .block {
    width: 88.889vw;
    margin-top: 5.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--modal .block {
    width: 83.333vw;
    margin-top: 5.208vw
}
}

@media (min-width: 1800px) {
.g--modal .block {
    width: 960px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--modal .block {
    width: 805px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--modal .block {
    width: 656px
}
}

@media (min-width:1024px) {
.g--modal .block {
    height: calc(100vh - 20vh);
height:calc((100 * var(--vh, 1vh)) - (20 * var(--vh, 1vh)))
}
}

@media (max-width:1023px) {
.g--modal .block {
    height: calc(100vh - 30vh);
height:calc((100 * var(--vh, 1vh)) - (30 * var(--vh, 1vh)))
}
}
.g--modal .block .icon {
    cursor: pointer;
    position: absolute
}

@media (min-width:1024px) {
.g--modal .block .icon {
}
}

@media (min-width: 1800px) {
.g--modal .block .icon {
    top: 30px;
    right: 30px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--modal .block .icon {
    top: 25px;
    right: 25px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--modal .block .icon {
    top: 20px;
    right: 20px
}
}

@media (max-width:1023px) {
.g--modal .block .icon {
}
}

@media (max-width: 720px) {
.g--modal .block .icon {
    top: 5.556vw;
    right: 5.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--modal .block .icon {
    top: 5.208vw;
    right: 5.208vw
}
}
.g--modal .block .icon img {
    width: 100%;
    height: 100%
}
.g--modal .block .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

@media (max-width: 720px) {
.g--modal .block .content {
    padding: 11.111vw 0 0 8.333vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--modal .block .content {
    padding: 10.417vw 0 0 7.813vw
}
}

@media (min-width: 1800px) {
.g--modal .block .content {
    padding: 80px 0 0 80px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--modal .block .content {
    padding: 67px 0 0 67px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--modal .block .content {
    padding: 55px 0 0 55px
}
}
.g--modal .block .content .title {
    font-variation-settings: 'wght' 750;
    line-height: 1.44;
    font-size: 36px
}

@media (max-width:1023px) {
.g--modal .block .content .title {
    line-height: 1.42;
    font-size: 26px
}
}
.g--modal .block .content .details {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto
}

@media (max-width: 720px) {
.g--modal .block .content .details {
    margin-top: 5vw;
    padding-right: 8.333vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--modal .block .content .details {
    margin-top: 4.688vw;
    padding-right: 7.813vw
}
}

@media (min-width: 1800px) {
.g--modal .block .content .details {
    margin-top: 47px;
    padding-right: 80px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--modal .block .content .details {
    margin-top: 39px;
    padding-right: 67px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--modal .block .content .details {
    margin-top: 32px;
    padding-right: 55px
}
}
.g--modal .block .content .details::-webkit-scrollbar {
}

@media (max-width: 720px) {
.g--modal .block .content .details::-webkit-scrollbar {
width:1.667vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--modal .block .content .details::-webkit-scrollbar {
width:1.563vw
}
}

@media (min-width: 1800px) {
.g--modal .block .content .details::-webkit-scrollbar {
width:6px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--modal .block .content .details::-webkit-scrollbar {
width:5px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--modal .block .content .details::-webkit-scrollbar {
width:4px
}
}
.g--modal .block .content .details::-webkit-scrollbar-thumb {
background:#d6d6d6;
border-radius:6px
}
.g--modal .block .content .details .detail {
    flex-shrink: 0;
    border-top: 1px solid #EE7700;
    display: flex;
    justify-content: space-between
}

@media (max-width: 720px) {
.g--modal .block .content .details .detail {
    padding: 8.333vw 0
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--modal .block .content .details .detail {
    padding: 7.813vw 0
}
}

@media (min-width: 1800px) {
.g--modal .block .content .details .detail {
    padding: 40px 0
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--modal .block .content .details .detail {
    padding: 34px 0
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--modal .block .content .details .detail {
    padding: 27px 0
}
}

@media (max-width:1023px) {
.g--modal .block .content .details .detail {
    flex-direction: column
}
}
.g--modal .block .content .details .detail .d-title {
    font-variation-settings: 'wght' 750;
    line-height: 1.4;
    font-size: 20px;
    white-space: nowrap
}

@media (max-width: 720px) {
.g--modal .block .content .details .detail .d-title {
    margin-bottom: 3.889vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
.g--modal .block .content .details .detail .d-title {
    margin-bottom: 3.646vw
}
}

@media (max-width:1023px) {
.g--modal .block .content .details .detail .d-title {
    line-height: 1.44;
    font-size: 16px
}
}
.g--modal .block .content .details .detail .d-desc {
    line-height: 1.71;
    font-size: 14px
}

@media (min-width: 1800px) {
.g--modal .block .content .details .detail .d-desc {
    width: 493px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
.g--modal .block .content .details .detail .d-desc {
    width: 413px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
.g--modal .block .content .details .detail .d-desc {
    width: 337px
}
}

@media (max-width:1023px) {
.g--modal .block .content .details .detail .d-desc {
    line-height: 1.69;
    font-size: 13px
}
}
#section-ecology {
    background: #fff;
    overflow: hidden
}

@media (max-width: 720px) {
#section-ecology {
    padding-top: 22.222vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology {
    padding-top: 20.833vw
}
}

@media (min-width: 1800px) {
#section-ecology {
    padding-top: 164px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology {
    padding-top: 137px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology {
    padding-top: 112px
}
}
#section-ecology .title-box {
    margin: 0 auto
}
#section-ecology .smart-5g {
}

@media (min-width: 1800px) {
#section-ecology .smart-5g {
    margin-top: 180px;
    margin-bottom: 256px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .smart-5g {
    margin-top: 151px;
    margin-bottom: 215px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .smart-5g {
    margin-top: 123px;
    margin-bottom: 175px
}
}

@media (max-width:1023px) {
#section-ecology .smart-5g {
    margin-top: 78px;
    margin-bottom: 96px
}
}
#section-ecology .smart-5g .arrows {
    display: flex
}

@media (min-width: 1800px) {
#section-ecology .smart-5g .arrows {
    height: 566px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .smart-5g .arrows {
    height: 475px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .smart-5g .arrows {
    height: 387px
}
}

@media (max-width:1023px) {
#section-ecology .smart-5g .arrows {
    position: absolute;
    margin-top: -5px;
    right: 0
}
}
#section-ecology .smart-5g .arrows .arrow {
    cursor: pointer
}

@media (min-width: 1800px) {
#section-ecology .smart-5g .arrows .arrow {
    width: 55px;
    height: 55px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .smart-5g .arrows .arrow {
    width: 46px;
    height: 46px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .smart-5g .arrows .arrow {
    width: 38px;
    height: 38px
}
}

@media (max-width:1023px) {
#section-ecology .smart-5g .arrows .arrow {
    width: 42px;
    height: 42px
}
}

@media (min-width:1024px) {
#section-ecology .smart-5g .arrows {
    position: absolute;
    top: 0;
    left: 0;
    align-items: center
}
#section-ecology .smart-5g .arrows .right {
}
#section-ecology .smart-5g .arrows .left {
}
}

@media (min-width: 1800px) {
#section-ecology .smart-5g .arrows .left {
    margin-left: -88px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .smart-5g .arrows .left {
    margin-left: -74px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .smart-5g .arrows .left {
    margin-left: -60px
}
}

@media (min-width: 1800px) {
#section-ecology .smart-5g .arrows .right {
    margin-left: 916px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .smart-5g .arrows .right {
    margin-left: 768px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .smart-5g .arrows .right {
    margin-left: 626px
}
}
#section-ecology .smart-5g .left .normal {
    transform: rotate(180deg)
}

@media (max-width:1023px) {
#section-ecology .smart-5g .left {
}
}

@media (max-width: 720px) {
#section-ecology .smart-5g .left {
    margin-right: 5.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .smart-5g .left {
    margin-right: 5.208vw
}
}
#section-ecology .smart-5g .left.no-active, #section-ecology .smart-5g .right.no-active {
    pointer-events: none;
    opacity: .5
}
#section-ecology .container {
    position: relative
}
#section-ecology .container .button {
    cursor: pointer;
    display: inline-block;
    object-fit: contain;
    border: 1px solid #000;
    line-height: 1.25;
    font-size: 16px
}

@media (min-width: 1800px) {
#section-ecology .container .button {
    margin-top: 60px;
    padding: 10px 21px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .button {
    margin-top: 50px;
    padding: 8px 18px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .button {
    margin-top: 41px;
    padding: 7px 14px
}
}

@media (min-width:1024px) {
#section-ecology .container .button {
    position: absolute
}
}

@media (max-width:1023px) {
#section-ecology .container .button {
    line-height: 1.25;
    font-size: 16px;
    padding: 10px 21px;
    margin-top: 60px
}
}
#section-ecology .container .img-text-wrapper {
    position: relative
}

@media (min-width: 1800px) {
#section-ecology .container .img-text-wrapper {
    margin-top: 81px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .img-text-wrapper {
    margin-top: 68px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .img-text-wrapper {
    margin-top: 55px
}
}

@media (max-width:1023px) {
#section-ecology .container .img-text-wrapper {
    margin-top: 40px
}
}
#section-ecology .container .img-text-wrapper .img-wrapper {
    overflow: hidden
}

@media (max-width: 720px) {
#section-ecology .container .img-text-wrapper .img-wrapper {
    width: 83.333vw;
    height: 55.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .container .img-text-wrapper .img-wrapper {
    width: 78.125vw;
    height: 52.083vw
}
}

@media (min-width: 1800px) {
#section-ecology .container .img-text-wrapper .img-wrapper {
    width: 850px;
    height: 566px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .img-text-wrapper .img-wrapper {
    width: 713px;
    height: 475px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .img-text-wrapper .img-wrapper {
    width: 580px;
    height: 387px
}
}
#section-ecology .container .img-text-wrapper .img-wrapper img {
}

@media (max-width: 720px) {
#section-ecology .container .img-text-wrapper .img-wrapper img {
    width: 83.333vw;
    height: 55.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .container .img-text-wrapper .img-wrapper img {
    width: 78.125vw;
    height: 52.083vw
}
}

@media (min-width: 1800px) {
#section-ecology .container .img-text-wrapper .img-wrapper img {
    width: 850px;
    height: 566px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .img-text-wrapper .img-wrapper img {
    width: 713px;
    height: 475px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .img-text-wrapper .img-wrapper img {
    width: 580px;
    height: 387px
}
}
#section-ecology .container .img-text-wrapper .mo-img-wrapper {
    display: flex
}

@media (max-width: 720px) {
#section-ecology .container .img-text-wrapper .mo-img-wrapper {
    width: 260vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .container .img-text-wrapper .mo-img-wrapper {
    width: 243.75vw
}
}
#section-ecology .container .img-text-wrapper .mo-img-wrapper .slick-list {
    pointer-events: none
}
#section-ecology .container .img-text-wrapper .mo-img-wrapper .slick-list .slick-slide {
}

@media (max-width: 720px) {
#section-ecology .container .img-text-wrapper .mo-img-wrapper .slick-list .slick-slide {
    width: 86.667vw;
    height: 55.556vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .container .img-text-wrapper .mo-img-wrapper .slick-list .slick-slide {
    width: 81.25vw;
    height: 52.083vw
}
}
#section-ecology .container .img-text-wrapper .mo-img-wrapper .image {
}

@media (max-width: 720px) {
#section-ecology .container .img-text-wrapper .mo-img-wrapper .image {
    padding-right: 3.333vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .container .img-text-wrapper .mo-img-wrapper .image {
    padding-right: 3.125vw
}
}
#section-ecology .container .img-text-wrapper .middle-img-wrapper {
    position: relative
}
#section-ecology .container .img-text-wrapper .details {
    display: flex
}

@media (min-width: 1800px) {
#section-ecology .container .img-text-wrapper .details {
    margin-top: 20px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .img-text-wrapper .details {
    margin-top: 17px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .img-text-wrapper .details {
    margin-top: 14px
}
}

@media (max-width:1023px) {
#section-ecology .container .img-text-wrapper .details {
    margin-top: 35px
}
}
#section-ecology .container .img-text-wrapper .details[data-active="0"] .detail-0 {
    transition: opacity 1s linear;
    opacity: 1
}
#section-ecology .container .img-text-wrapper .details[data-active="1"] .detail-1 {
    transition: opacity 1s linear;
    opacity: 1
}
#section-ecology .container .img-text-wrapper .details[data-active="2"] .detail-2 {
    transition: opacity 1s linear;
    opacity: 1
}
#section-ecology .container .img-text-wrapper .details .detail {
    opacity: 0
}

@media (min-width:1024px) {
#section-ecology .container .img-text-wrapper .details .detail:nth-child(3) {
    position: relative
}
}
#section-ecology .container .img-text-wrapper .details .detail .title {
    font-variation-settings: 'wght' 750;
    line-height: 1.45;
    letter-spacing: -.01em
}

@media (max-width: 720px) {
#section-ecology .container .img-text-wrapper .details .detail .title {
    width: 77.778vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .container .img-text-wrapper .details .detail .title {
    width: 72.917vw
}
}

@media (min-width: 1800px) {
#section-ecology .container .img-text-wrapper .details .detail .title {
    font-size: 22px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .img-text-wrapper .details .detail .title {
    font-size: 18px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .img-text-wrapper .details .detail .title {
    font-size: 15px
}
}

@media (max-width:1023px) {
#section-ecology .container .img-text-wrapper .details .detail .title {
    line-height: 1.6;
    font-size: 20px;
    letter-spacing: 0
}
}
#section-ecology .container .img-text-wrapper .details .detail .desc {
    font-variation-settings: 'wght' 550;
    line-height: 1.75;
    letter-spacing: -.01em
}

@media (max-width: 720px) {
#section-ecology .container .img-text-wrapper .details .detail .desc {
    width: 77.778vw
}
}

@media (min-width: 721px) and (max-width: 1023px) {
#section-ecology .container .img-text-wrapper .details .detail .desc {
    width: 72.917vw
}
}

@media (min-width: 1800px) {
#section-ecology .container .img-text-wrapper .details .detail .desc {
    width: 850px;
    margin-top: 10px;
    font-size: 16px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .img-text-wrapper .details .detail .desc {
    width: 713px;
    margin-top: 8px;
    font-size: 13px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .img-text-wrapper .details .detail .desc {
    width: 580px;
    margin-top: 7px;
    font-size: 11px
}
}

@media (max-width:1023px) {
#section-ecology .container .img-text-wrapper .details .detail .desc {
    line-height: 1.75;
    font-size: 16px;
    letter-spacing: -.01em;
    margin-top: 16px
}
}
#section-ecology .container .right-img-wrapper, #section-ecology .container .left-img-wrapper {
    position: absolute;
    top: 0
}
#section-ecology .container .right-img-wrapper {
}

@media (min-width: 1800px) {
#section-ecology .container .right-img-wrapper {
    left: 970px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .right-img-wrapper {
    left: 813px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .right-img-wrapper {
    left: 662px
}
}
#section-ecology .container .left-img-wrapper {
}

@media (min-width: 1800px) {
#section-ecology .container .left-img-wrapper {
    left: -970px
}
}

@media (min-width: 1400px) and (max-width: 1799px) {
#section-ecology .container .left-img-wrapper {
    left: -813px
}
}

@media (min-width: 1024px) and (max-width: 1399px) {
#section-ecology .container .left-img-wrapper {
    left: -662px
}
}
body {
    background: #000
}
.zn--wrapper .g--popup-user {
    display: none
}