.hw-freelace-container {
    letter-spacing: calc(-.037em + .526px);
    background-color: #fff;
    font-weight: 400;
    --a: 139px;
    --circle: 1.82291667vw;
}

.hw-freelace-container * {
    margin: 0;
    padding: 0;
}

.hw-freelace-container sup {
    font-size: .6em;
    cursor: pointer;
}

.hw-freelace-container a {
    color: inherit;
    text-decoration: none;
}

.hw-freelace-container img {
    width: 100%;
    display: block;
    border: none;
    vertical-align: middle;
}

.hw-freelace-container .nr {
    white-space: nowrap;
    display: inline-block;
}

.hw-freelace-container .show-pc {
    display: inline-block;
}

.hw-freelace-container .show-mob {
    display: none;
}

/* hw-freelace-kv start */
.hw-freelace-container .hw-freelace-kv {
    margin: 0 auto;
    position: relative;
}

.hw-freelace-container .hw-freelace-kv .kv-banner {
    text-align: center;
    position: absolute;
    top: 17.70833333vw;
    left: 54.16666667vw;
    width: 36.97916667vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hw-freelace-container .hw-freelace-kv .banner-img {
    width: 100%;
}

.hw-freelace-container .hw-freelace-kv .kv-banner .banner-title {
    letter-spacing: 0.01302083vw;
    margin-top: 1.5625vw;
    color: #000000;
    font-size: 1.45833333vw;
    line-height: 1.6;
    width: 110%;
}

.hw-freelace-container .hw-freelace-kv .kv-banner .section-pic-center {
    color: #000;
    font-size: 1.46vw;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 1.5625vw;
}

.hw-freelace-container .hw-freelace-kv .kv-banner .section-pic-center span {
    font-size: 0.677083vw;
    font-weight: 500;
}

.hw-freelace-container .hw-freelace-kv .kv-banner .section-pic-center .section-slogan-botton {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    display: inline-block;
    padding: 10px 26px;
    border: 2px solid #000;
    background-color: #000;
    transition: 0.3s ease-out;
    margin: 24px 0 60px 0;
    cursor: pointer;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.hw-freelace-container .hw-freelace-kv .kv-banner .section-pic-center .section-slogan-botton:hover {
    opacity: 0.8;
}


.hw-freelace-container .mark-img-folat,
.hw-freelace-container .mark-right-folat,
.hw-freelace-container .bg-folat,
.hw-freelace-container .mark-3-folat,
.hw-freelace-container .mark-4-folat,
.hw-freelace-container .mark-5-folat {
    will-change: transform;
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -ms-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
}


.hw-freelace-container .blur-up {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: -webkit-filter 400ms;
    transition: -webkit-filter 400ms;
    transition: filter 400ms;
    transition: filter 400ms, -webkit-filter 400ms;
}

.hw-freelace-container .blur-up.lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .show-mob {
        display: inline-block;
    }

    .hw-freelace-container .show-pc {
        display: none;
    }

    .hw-freelace-container .hw-freelace-kv .kv-banner {
        top: 111.1111111vw;
        left: 7.22222222vw;
        width: 84.305555555vw;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .hw-freelace-container .hw-freelace-kv .kv-banner .banner-title {
        margin-top: 4.166666666vw;
        font-size: 3.33333333vw;
        text-align: center;
        letter-spacing: 0.03166667vw;
    }

    .hw-freelace-container .hw-freelace-kv .kv-banner .section-pic-center {
        font-size: 5.56vw;
        margin-top: 4.16666667vw;
    }

    .hw-freelace-container .hw-freelace-kv .kv-banner .section-pic-center span {
        font-size: 3.611111111vw;
    }

}

/* hw-freelace-kv end */
/* hw-freelace-sec2 start */
.hw-freelace-container .hw-freelace-sec2 {
    height: 100vh;
    position: relative;
}

.hw-freelace-container .hw-freelace-sec2 .sec2-video {
    width: 100%;
    height: 100vh;
}

.hw-freelace-container .hw-freelace-sec2 .sec2-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-freelace-container .hw-freelace-sec2 .sec2-text {
    width: 50.47916667vw;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    color: #ffffff;
    font-size: 2.5vw;
    line-height: 1.6;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 5;
}

.hw-freelace-container .hw-freelace-sec2 .sec2-text .sec2-t2 {
    margin: 3.95833333vw auto;
}

.hw-freelace-container .hw-freelace-sec2 .sec2-icon {
    display: flex;
    position: absolute;
    bottom: 3.125vw;
    right: 3.125vw;
    color: #ffffff;
    font-size: 1.66666667vw;
    line-height: 1.6;
    z-index: 5;
    align-items: center;
}

.hw-freelace-container .hw-freelace-sec2 .sec2-icon img {
    margin-right: 0.52083333vw;
    width: 2.08333333vw;
    display: inline-block;
}

.hw-freelace-sec2 .masking {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .hw-freelace-sec2 {
        width: 100%;
        height: 100vw;
    }

    .hw-freelace-container .hw-freelace-sec2 .sec2-video {
        height: 100%;
    }

    .hw-freelace-container .hw-freelace-sec2 .sec2-text {
        width: 72.222222222vw;
        font-size: 4.4444444vw;
    }

    .hw-freelace-container .hw-freelace-sec2 .sec2-text .sec2-t2 {
        margin: 7.083333333vw auto;
    }

    .hw-freelace-container .hw-freelace-sec2 .sec2-icon {
        right: 8.33333333vw;
        bottom: 8.33333333vw;
        font-size: 4.4444444vw;
        width: auto;
    }

    .hw-freelace-container .hw-freelace-sec2 .sec2-icon img {
        margin-right: 1.3888888vw;
        width: 5.555555555vw;
    }
}

/* hw-freelace-sec2 end */
/* sec3 container start */
.hw-freelace-container .sec3-container {
    padding: 10.41666667vw 0 0;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap {
    width: 68.75vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: flex-start;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart {
    cursor: pointer;
    position: relative;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart .heart-title {
    position: absolute;
    top: 1.5625vw;
    left: 1.5625vw;
    line-height: 1.25;
    font-weight: 500;
    color: #000000;
    font-size: 1.6666666vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart1 .heart-title {
    color: #ffffff;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart1 {
    width: 45.3125vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart {
    background: #edf5f3;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 {
    width: 21.875vw;
    height: 34.375vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 .heart-titleTime {

    font-weight: 700;
    color: #8fbfaf;
    font-size: 3.8541666vw;
    line-height: 1.6;
    padding-left: 2.5vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 .heart-titleTime .blod {
    font-size: 14.47916667vw;
    color: #8fbfaf;
    line-height: 1.25;
    margin-top: 5.20833333vw;
    margin-bottom: -2.44791667vw;
    font-weight: 800;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 .heart-titleTime .hang {
    padding-left: 0.65vw;
    font-size: 5.20833333vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart3 {
    width: 22.91666667vw;
    background-color: #fafcfa;
    margin: 1.5625vw 0 0;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart3 .heart-img {
    display: flex;
    align-items: flex-start;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart3 img.heart-Hwa {
    width: 8.95833333vw;
    margin-right: 2.08333333vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart3 img.heart-Hires {
    width: 7.13541667vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart4 {
    width: 24.47916667vw;
    margin-top: -14.58333333vw;
    margin-left: 24.570833vw;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart5 {
    width: 24.47916667vw;
    margin: 1.5625vw 0 0;
}

.hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart6 {
    width: 18.22916667vw;
    margin: 1.5625vw 0 0;
}

.sec3-container .sec3-heart-wrap .sec3-heart .arrow-container {
    position: absolute;
    right: 1.5625vw;
    bottom: 1.5625vw;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    overflow: hidden;
}

.sec3-container .sec3-heart-wrap .sec3-heart .arrow-container .arrow-wrap {
    width: 100%;
    transition: transform 0.5s linear;
    -webkit-transition: transform 0.5s linear;
    -moz-transition: transform 0.5s linear;
    -ms-transition: transform 0.5s linear;
    -o-transition: transform 0.5s linear;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.sec3-container .sec3-heart-wrap .sec3-heart:hover .arrow-container .arrow-wrap {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec3-container {
        padding-top: 27.7777777vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap {
        width: 83.3333333vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart {
        width: 83.3333333vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart6 {
        order: 2;
        width: 37.5vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart4 {
        width: 41.66666666vw;
        margin-left: 0;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart:nth-child(n+2) {
        margin-top: 4.1666666vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart .heart-title {
        top: 5.5555555vw;
        left: 5.5555555vw;
        font-size: 4.4444444vw;
        width: 84.333333%;
    }

    .sec3-container .sec3-heart-wrap .sec3-heart .arrow-container {
        width: 6.66666666vw;
        height: 6.66666666vw;
        right: 4.1666666vw;
        bottom: 4.1666666vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart3 img.heart-Hwa {
        width: 22.777777vw;
        margin-right: 8.3333333vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart3 img.heart-Hires {
        width: 18.0555555vw;
    }



    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 {
        height: 58.33333333vw;

    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 .heart-titleTime {
        padding-left: 0;
        font-size: 8.8888888vw;
        text-align: center;
        display: flex;
        align-items: baseline;
        padding-left: 6.25vw;
        margin-top: 5.555555555vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 .heart-titleTime .hang {
        padding-left: 0;
        display: flex;
        font-size: 11.111111111vw;
    }

    .hw-freelace-container .sec3-container .sec3-heart-wrap .sec3-heart2 .heart-titleTime .blod {
        font-size: 29.1666666vw;
        display: inline-block;
        margin-top: 9.166666666vw;
    }
}

/* sec3 container end */
/* sec4 container start */
.sec4-container {
    margin-top: 10.41666667vw;
}

.sec4-container .sec4-container-box .sub-title {
    margin-left: 10.41666667vw;
    width: 78vw;
}

.sec4-container .sec4-container-box .sub-title p.sec4-title1 {
    color: #000000;
    font-size: 2.5vw;
    line-height: 1.25;
    opacity: 0.5;
}

.sec4-container .sec4-container-box .sub-title .sec4-title2 {
    color: #8fbfaf;
    font-size: 8.3333333vw;
    line-height: 1.25;
    margin-top: 1.04166667vw;
    font-weight: 500;
}

.sec4-container .sec4-container-box .sub-title .sec4-title-br {
    padding-left: 12.8125vw;
    color: #8fbfaf;
    font-size: 8.3333333vw;
    line-height: 1.25;
    margin-bottom: 3.125vw;
    font-weight: 500;
}

.sec4-container .sec4-container-box .sec4-bot {
    width: 75vw;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
}

.sec4-container .sec4-container-box .sec4-bot .pigination-box {
    margin-bottom: 4.01041667vw;
    z-index: 10;
}

.sec4-container .sec4-container-box .sec4-bot .pigination:not(:last-child) {
    margin-bottom: 1.82291667vw;
}

.sec4-container .sec4-container-box .swiper-box {
    width: 63.33333333vw;
}

.sec4-container .sec4-container-box .swiper-box .swiper-slide .slide-img {
    display: flex;
    justify-content: space-between;
}

.sec4-container .sec4-container-box .swiper-box .swiper-slide .imgl {
    width: 35.6vw;
    padding-bottom: 4.01041667vw;
}

.sec4-container .sec4-container-box .swiper-box .swiper-slide.swiper-slide-active .imgl {
    width: 35.788888vw;
    margin-left: -1px;
    margin-top: -1px;
}
.sec4-container .sec4-container-box .swiper-box .swiper-slide .slide-2 .imgr{
    margin-right: -1.2px;
}
.sec4-container .sec4-container-box .swiper-box .swiper-slide .imgr {
    width: 26.14583333vw;
    padding-top: 5.20833333vw;
}

.sec4-container .sec4-container-box .swiper-box .swiper-slide.swiper-slide-active .imgr {
    width: 26.2vw;
    margin-right: 0;
}

.sec4-container .sec4-container-box .swiper-box .sec4-swiper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.sec4-container .sec4-container-box .pigination-box .pigination {
    display: flex;
    cursor: pointer;
    align-items: center;
}

.sec4-container .sec4-container-box .pigination-box .pigination .svg {
    width: 2.5vw;
    height: 2.5vw;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    display: none;
}

.sec4-container .sec4-container-box .pigination-box .pigination .circle_process .svg {
    display: block;
}

.sec4-container .sec4-container-box .pigination-box .pigination .circle_process .progress {
    animation: rotate 3000ms linear both;
    -webkit-animation: rotate 3000ms linear both;
    stroke-width: 0.10416667vw;
}

@keyframes rotate {
    from {
        stroke-dashoffset: var(--a);
    }

    to {
        stroke-dashoffset: 0px;
    }
}

.sec4-container .sec4-container-box .pigination-box .pigination .title {
    margin-left: 1.04166667vw;
    font-size: 1.6666666vw;
    line-height: 1.25;
    font-weight: 500;
}

.sec4-container .sec4-container-box .pigination-box .pigination-1 .title {
    color: #8fbfaf;
}

.sec4-container .sec4-container-box .pigination-box .pigination-2 .title {
    color: #000000;
}

.sec4-container .sec4-container-box .pigination-box .pigination-3 .title {
    color: #2f4dbc;
}

.hw-freelace-container .circle_process {
    width: 2.5vw;
    height: 2.5vw;
}

.hw-freelace-container .active {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6vw;
    height: 2.5vw;

}

.hw-freelace-container .active::after {
    content: "";
    position: absolute;
    width: var(--circle);
    height: var(--circle);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.sec4-container .pigination-1 .active::after {
    background: linear-gradient(180deg, #cee1d9 0%, #8eb5a6 100%);
}

.sec4-container .pigination-2 .active::after {
    background: linear-gradient(180deg, #717171 0%, #000000 100%);
}

.sec4-container .pigination-3 .active::after {
    background: linear-gradient(180deg, #9fc8ff 0%, #1d3ab1 100%);
}

.hw-freelace-container .circle_process .wrapper {
    width: 1.206041666vw;
    height: 2.552083333vw;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.hw-freelace-container .circle_process .right {
    right: 0.15416667vw;
}

.hw-freelace-container .circle_process .left {
    left: 0.12208333vw;
}

.hw-freelace-container .circle_process .circle {
    width: 2.5vw;
    height: 2.5vw;
    border: 0.15625vw solid transparent;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    transform: rotate(-135deg);
}

.sec4-container .pigination-1 .circle_process .rightcircle {
    border-top: 0.15625vw solid #8fbfaf;
    border-right: 0.15625vw solid #8fbfaf;
    right: 0;
    animation: circle_right 3s linear infinite;
    -webkit-animation: circle_right 3s linear infinite;
}

.sec4-container .pigination-1 .circle_process .leftcircle {
    border-bottom: 0.15625vw solid #8fbfaf;
    border-left: 0.15625vw solid #8fbfaf;
    left: 0;
    animation: circle_left 3s linear infinite;
    -webkit-animation: circle_left 3s linear infinite;
}

.sec4-container .pigination-2 .circle_process .rightcircle {
    border-top: 0.15625vw solid #000000;
    border-right: 0.15625vw solid #000000;
    right: 0;
    animation: circle_right 3s linear infinite;
    -webkit-animation: circle_right 3s linear infinite;
}

.sec4-container .pigination-2 .circle_process .leftcircle {
    border-bottom: 0.15625vw solid #000000;
    border-left: 0.15625vw solid #000000;
    left: 0;
    animation: circle_left 3s linear infinite;
    -webkit-animation: circle_left 3s linear infinite;
}

.sec4-container .sec4-bot .swiper-box .swiper-slide-active .slide-inner {
    animation: clipPath7 0.6s linear forwards;
    -webkit-animation: clipPath7 0.6s linear forwards;
}

.sec4-container .sec4-bot .swiper-box .swiper-slide-next .slide-inner {
    animation: clipPath8 0.6s linear forwards;
    -webkit-animation: clipPath8 0.6s linear forwards;
    background: #fff;
}

@keyframes clipPath7 {
    0% {
        clip-path: inset(0 0 0 73.6666666%);
    }

    100% {
        clip-path: inset(0 0 0 0%);
    }
}

@keyframes clipPath8 {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}


@keyframes circle_right {
    0% {
        -webkit-transform: rotate(-135deg);
    }

    50%,
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes circle_left {

    0%,
    50% {
        -webkit-transform: rotate(-135deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}

@media screen and (max-aspect-ratio: 136/100) {
    .sec4-container {
        margin-top: 27.7777777vw;
    }

    .sec4-container .sec4-container-box .sub-title {
        margin: 0 auto;
        width: 83.333333333vw;
    }

    .sec4-container .sec4-container-box .sub-title p.sec4-title1 {
        font-size: 4.4444444vw;
    }

    .sec4-container .sec4-container-box .sub-title .sec4-title2 {
        font-size: 13.3333333vw;
        margin-top: 2.7777777vw;
    }

    .sec4-container .sec4-container-box .sub-title .sec4-title-br {
        font-size: 13.3333333vw;
        margin-bottom: 8.33333333vw;
        padding-left: 0;
    }

    .sec4-container .sec4-container-box .swiper-box {
        width: 100%;
    }

    .sec4-container .sec4-container-box .sec4-bot {
        width: 100%;
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }

    .sec4-container .sec4-container-box .swiper-box .swiper-slide .slide-img {
        display: flex;
        flex-direction: column;
    }

    .sec4-container .sec4-container-box .swiper-box .swiper-slide .slide-img.slide-3 {
        flex-direction: column;
    }

    .sec4-container .sec4-container-box .swiper-box .swiper-slide.swiper-slide-active .imgr {
        width: 50vw;
        margin-right: 0;
    }

    /* .sec4-container .sec4-container-box .swiper-box .sec4-swiper .slide-2 .imgr img {
        height: 125vw;
    } */

    .sec4-container .sec4-container-box .swiper-box .swiper-slide .imgr {
        width: 50vw;
        padding-top: 0;
        margin-left: 41.6666666vw;
        margin-top: -27.7777777vw;
        z-index: 50;
    }

    .sec4-container .sec4-container-box .swiper-box .swiper-slide.swiper-slide-active .imgl {
        width: 100%;
        /* margin-left: 41.6666666vw;
        margin-top: -29.8611111vw; */
        margin: 0;
    }

    .sec4-container .sec4-container-box .swiper-box .swiper-slide .imgl {
        z-index: 20;
        width: 100%;
        padding: 0;
        /* margin-left: 41.6666666vw;
        margin-top: -29.8611111vw; */
    }
    

    .sec4-container .sec4-container-box .swiper-box .swiper-slide .slide-3 .imgl {
        width: 100%;
        padding-top: 0;
        margin: 0;
    }

    .sec4-container .sec4-container-box .swiper-box .swiper-slide .slide-3 .imgr {
        z-index: 20;
        width: 50vw;
        padding: 0;
        margin-left: 41.6666666vw;
        margin-top: -27.7777777vw;
    }

    .sec4-container .sec4-container-box .pigination-box .pigination .circle_process .progress {
        stroke-width: 0.27777777vw;
    }

    .sec4-container .sec4-container-box .sec4-bot .pigination-box {
        position: absolute;
        left: 8.3333333vw;
        bottom: 0vw;
        margin-bottom: 0;
    }

    .sec4-container .sec4-container-box .pigination-box .pigination .svg {
        width: 6.666666666vw;
        height: 6.666666666vw;
    }

    .hw-freelace-container .active::after {
        width: 5.27777777vw;
        height: 5.27777777vw;
    }

    .hw-freelace-container .circle_process {
        width: 6.66666666vw;
        height: 6.66666666vw;
    }

    .hw-freelace-container .circle_process .wrapper {
        width: 3.4933333vw;
        height: 6.86666666vw;
    }

    .hw-freelace-container .circle_process .circle {
        width: 6.86666666vw;
        height: 6.66666666vw;
        border: 0.41666666vw solid transparent;
    }

    .hw-freelace-container .active {
        width: 6.6666666vw;
        height: 6.6666666vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sec4-container .sec4-container-box .pigination-box .pigination .title {
        margin-left: 2.7777777777vw;
        font-size: 4.444444vw;
    }

    .sec4-container .sec4-container-box .pigination-box .pigination .right,
    .sec4-container .sec4-container-box .pigination-box .pigination .left {
        top: 0.11111111vw
    }

    .sec4-container .sec4-bot .swiper-box .swiper-slide-active .slide-inner {
        animation: none;
        -webkit-animation: none;
    }

    .sec4-container .pigination-1 .circle_process .rightcircle {
        border-top: 0.41666666vw solid #8fbfaf;
        border-right: 0.41666666vw solid #8fbfaf;
    }

    .sec4-container .pigination-1 .circle_process .leftcircle {
        border-bottom: 0.41666666vw solid #8fbfaf;
        border-left: 0.41666666vw solid #8fbfaf;
    }

    .sec4-container .pigination-2 .circle_process .rightcircle {
        border-top: 0.41666666vw solid #000000;
        border-right: 0.41666666vw solid #000000;
    }

    .sec4-container .pigination-2 .circle_process .leftcircle {
        border-bottom: 0.41666666vw solid #000000;
        border-left: 0.41666666vw solid #000000;
    }

    .sec4-container .sec4-container-box .sec4-bot .pigination:not(:last-child) {
        margin-bottom: 2.777777777vw;
    }

    .hw-freelace-container .circle_process .right {
        right: 0.147222222vw;
    }

    .hw-freelace-container .circle_process .left {
        left: 0.15208333vw
    }

    .sec4-container .sec4-bot .swiper-box .swiper-slide-prev .slide-inner img {
        animation: none;
    }

    .sec4-container .sec4-bot .swiper-box .swiper-slide-active .slide-inner img {
        animation: none;
    }
    .sec4-container .sec4-container-box .swiper-box .swiper-slide .slide-2 .imgr{
        margin-right: 0;
    }

}


/* sec4 container end */
/* sec5 start*/
.hw-freelace-container .sec5-container {
    width: 100%;
    margin-top: 15.625vw;
    position: relative;
}

.sec5-container .sec5-img-snap {
    position: absolute;
    width: 29.16666667vw;
    top: 45.67708333vw;
    left: 59.89583333vw;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
}

.sec5-container .sec5-img-snap .snap-img {
    height: 29.16666667vw;
}

.sec5-container .sec5-img-water {
    position: absolute;
    width: 100%;
    top: 100.48958333vw;
    left: 0;
    transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
}

.sec5-container .sec5-img-water .sec5-waterimg {
    margin-top: -7.177083vw;
}

.sec5-container .se5-title5 {
    width: 30.416667vw
}

.sec5-container .sec5-tit {
    position: absolute;
    line-height: 1.6;
    font-weight: 400;
    color: #5a5a5a;
    font-size: 1.458333333vw;
}

.sec5-container .sec5-title1 {
    width: 24.11458333vw;
    left: 30.98958333vw;
    top: 4.0625vw;
    transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -ms-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
}

.sec5-container .sec5-title2 {
    width: 21.82291667vw;
    top: 27.03125vw;
    left: 28.4375vw;
    transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -ms-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
}

.sec5-container .sec5-title3 {
    width: 27.96875vw;
    position: static;
    margin: 3.125vw auto 0;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
}

.sec5-container .sec5-title4 {
    z-index: 10;
    margin-top: 0.1vw;
    width: 28.64583333vw;
    margin-left: 29.9375vw;

}

.sec5-container .sec5-title5 {
    width: 35.10416667vw;
    margin-left: 29.47916667vw;
    line-height: 1.6;
    font-weight: 400;
    color: #5a5a5a;
    font-size: 1.458333333vw;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
}

.sec5-container .sec5-bold {
    color: #000000;
    font-weight: 500;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec5-container {
        margin-top: 27.777777vw;
    }

    .sec5-container .sec5-img-snap {
        width: 79.8611111111vw;
        top: 90.405556vw;
        left: 12.77777777vw;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }

    .sec5-container .sec5-img-snap .snap-img {
        height: 36.80555555vw;
        width: 36.80555555vw;
    }

    .sec5-container .sec5-tit {
        font-size: 3.3333333vw;
    }

    .sec5-container .sec5-title1 {
        width: 50.30555555vw;
        left: 11.944444444vw;
        top: 5.1388888888vw;
    }

    .sec5-container .sec5-title2 {
        width: 44.44444444vw;
        top: 52.5vw;
        left: 36.66666666vw;
    }

    .sec5-container .sec5-title3 {
        width: 40.277777777vw;
        top: 95.277777777vw;
        left: 8.33333333vw;
        margin: 0 2.7777777777vw 0 0;
    }

    .sec5-container .sec5-title4 {
        width: 62.5vw;
        margin: 10.9vw 0 0 17.288889vw;

    }

    .sec5-container .sec5-title5 {
        width: 64.85555555vw;
        margin: 4vw 0 0 23.333333333vw;
        font-size: 3.3333333vw;
    }

    .sec5-container .sec5-img-water {
        top: 130.5vw;
        display: flex;
    }
}

/* sec5 end*/
/* sec6 start*/
.hw-freelace-container .sec6-container {

    margin: 15.625vw auto 0;
    text-align: center;
}

.sec6-container .sec6-showbox {
    display: none;
    overflow: hidden;
}

.sec6-container .sec6-imgBox {
    width: 75vw;
    margin: 0 auto;
    transition: all 0.6s linear;
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
}

.sec6-container .sec6-text {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.sec6-container .sec6-text .sec6-title {
    line-height: 1.25;
    font-size: 2.5vw;
    font-weight: 500;
    color: #3e3e3e;
}

.sec6-container .sec6-text .sec6-showBtn {
    width: 2.08333333vw;
    height: 2.08333333vw;
    margin-left: 1.04166667vw;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.sec6-container .sec6-text .sec6-showBtn .sec6-showcolumn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    width: 1.25vw;
    height: 0.20833333vw;
    background-color: #ffffff;
    border-radius: 0.20833333vw;
    -webkit-border-radius: 0.20833333vw;
    -moz-border-radius: 0.20833333vw;
    -ms-border-radius: 0.20833333vw;
    -o-border-radius: 0.20833333vw;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.sec6-container .sec6-imgBox {
    display: flex;
    justify-content: space-between;
    margin-top: 3.125vw;
}

.sec6-container .sec6-imgBoxL {
    width: 39.58333333vw;
    opacity: 0;
    transition: all 0.3s 0.4s linear;
    -webkit-transition: all 0.3s 0.4s linear;
    -moz-transition: all 0.3s 0.4s linear;
    -ms-transition: all 0.3s 0.4s linear;
    -o-transition: all 0.3s 0.4s linear;
}

.sec6-container .sec6-imgBox .sec6-tran1 {
    opacity: 1;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.sec6-container .sec6-imgBox .sec6-Rtop {
    width: 33.85416667vw;
    opacity: 0;
    transition: all 0.3s 0.2s linear;
    -webkit-transition: all 0.3s 0.2s linear;
    -moz-transition: all 0.3s 0.2s linear;
    -ms-transition: all 0.3s 0.2s linear;
    -o-transition: all 0.3s 0.2s linear;
}

.sec6-container .sec6-imgBox .sec6-imgBoxR .sec6-tran2 {
    opacity: 1;
    transition: all 0.3s 0.2s linear;
    -webkit-transition: all 0.3s 0.2s linear;
    -moz-transition: all 0.3s 0.2s linear;
    -ms-transition: all 0.3s 0.2s linear;
    -o-transition: all 0.3s 0.2s linear;
}

.sec6-container .sec6-imgBox .sec6-Rbot {
    margin-top: 1.5625vw;
    width: 33.85416667vw;
    opacity: 0;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.sec6-container .sec6-imgBox .sec6-imgBoxR .sec6-tran3 {
    opacity: 1;
    transition: all 0.3s 0.4s linear;
    -webkit-transition: all 0.3s 0.4s linear;
    -moz-transition: all 0.3s 0.4s linear;
    -ms-transition: all 0.3s 0.4s linear;
    -o-transition: all 0.3s 0.4s linear;
}

.sec6-container .sec6-controlbox {
    width: 2.5vw;
    display: flex;
    flex-shrink: 0;
}

.sec6-container .sec6-img {
    position: relative;
}

.sec6-container .sec6-control-title {
    position: absolute;
    display: flex;
    align-items: center;
    text-align: left;
}

.sec6-container .sec6-imgBoxL .sec6-title {
    top: 8.07291667vw;
    left: 2.08333333vw;
}

.sec6-container .sec6-imgBoxR .sec6-Rtop-title {
    top: 4.16666667vw;
    left: 2.08333333vw;
    width: 18.272917vw;
}

.sec6-container .sec6-Rbot .sec6-Rbot-title {
    top: 2.08333333vw;
    left: 2.08333333vw;
}

.sec6-container .sec6-controlbox {
    margin-right: 1.04166667vw;
}

.sec6-container .sec6-control-title {
    color: #3e3e3e;
    font-size: 1.6666666vw;
    line-height: 1.25;
    font-weight: 500;
}

.sec6-container .sec6-fun-box {
    position: absolute;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    color: #5a5a5a;
    font-size: 1.25vw;
    line-height: 1.6;
    width: 21.71875vw;
}

.sec6-container .sec6-fun-box .sec6-fun-text {
    text-align: left;
    display: inline-block;
}
.sec6-container .sec6-fun-box .sec6-fun-text-1{
    width: 110%;
}
.sec6-container .sec6-fun-box .sec6-fun-text-2 {
    margin: 3.125vw 0;
    width: 110%;
}

.sec6-container .sec6-fun-box .sec6-fun-text-3 {
    margin-bottom: 3.125vw;
}

.sec6-container .sec6-l-fun {
    left: 5.625vw;
    top: 13.17708333vw;
}

.sec6-container .sec6-imgBoxR .sec6-rt-touch {
    position: absolute;
    bottom: 1.82291667vw;
    width: 21.71875vw;
    left: 5.625vw;
    color: #5a5a5a;
    font-size: 1.25vw;
    line-height: 1.6;
    text-align: left;
}

.sec6-container .sec6-rb-ele {
    position: absolute;
    left: 5.625vw;
    top: 6.14583333vw;
}

.sec6-container .sec6-rb-ele img {
    width: 3.125vw;
    margin-right: 1.30208333vw;
    display: inline;

}

.sec6-container .sec6-rb-ele .ele {
    width: 19.11458333vw;
    color: #5a5a5a;
    font-size: 1.25vw;
    line-height: 1.6;
    text-align: left;
}

.sec6-container .sec6-rb-ele .ele2 {
    margin-top: 2.08333333vw;
}

.sec6-container .sec6-control1 {
    border-color: #3e3e3e;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec6-container {
        margin-top: 27.77777777vw;
    }

    .sec6-container .sec6-imgBox {
        flex-direction: column;
    }

    .sec6-container .sec6-imgBox .sec6-imgBoxL {
        width: 83.3333333vw;
        margin: 0 auto;
    }

    .sec6-container .sec6-imgBox .sec6-imgBoxR .sec6-Rtop {
        width: 83.3333333vw;
        margin: 0 auto ;
    }

    .sec6-container .sec6-imgBox .sec6-imgBoxR .sec6-Rbot {
        width: 83.3333333vw;
        margin: 0 auto;
    }

    .sec6-container .sec6-controlbox {
        width: 6.6666666vw;
        margin-right: 2.7777778vw;
    }

    .sec6-container .sec6-control-title {
        font-size: 4.4444444vw;
    }

    .sec6-container .sec6-imgBoxL .sec6-title {
        left: 5.5555556vw;
        top: 6.52777777vw;
    }

    .sec6-container .sec6-fun-box {
        font-size: 3.333333vw;
        left: 15vw;
        top: 17.91666666vw;
        width: 62.0833333333vw;
    }

    .sec6-container .sec6-imgBoxR .sec6-Rtop-title {
        left: 5.55555555vw;
        top: 5.55555555vw;
        width: 48.75vw;

    }

    .sec6-container .sec6-imgBoxR .sec6-rt-touch {
        font-size: 3.333333vw;
        left: 15vw;
        bottom: 6.66666666vw;
        width: 56.066667vw;
    }

    .sec6-container .sec6-Rbot .sec6-Rbot-title {
        left: 5.5555555vw;
        top: 5.5555555vw;
    }

    .sec6-container .sec6-rb-ele .ele {
        font-size: 3.3333333vw;
        width: 45vw;
    }

    .sec6-container .sec6-rb-ele {
        width: 43.61111111vw;
        left: 15vw;
        bottom: auto;
        top: 15vw;
    }

    .sec6-container .sec6-rb-ele .ele2 {
        margin-top: 5.5555555vw;
    }

    .sec6-container .sec6-rb-ele img {
        margin-right: 2.7777777777vw;
        width: 8.333333333vw;
    }

    .sec6-container .sec6-imgBox {
        margin-top: 8.3333333333vw;
    }

    .sec6-container .sec6-text .sec6-title {
        font-size: 4.4444444vw;
        width: 46.572222vw;
        text-align: left;
    }

    .sec6-container .sec6-text .sec6-showBtn {
        width: 5.555555vw;
        height: 5.555555vw;
        margin-left: 2.7777777vw;
    }

    .sec6-container .sec6-text .sec6-showBtn .sec6-showcolumn {
        width: 3.333333333vw;
        height: 0.5555555vw;
        border-radius: 0.5555555vw;
        -webkit-border-radius: 0.5555555vw;
        -moz-border-radius: 0.5555555vw;
        -ms-border-radius: 0.5555555vw;
        -o-border-radius: 0.5555555vw;
    }

    .sec6-container .sec6-imgBox .sec6-imgBoxR .sec6-Rbot {
        margin-top: 4.16666666vw;
    }

    .sec6-container .sec6-imgBox .sec6-imgBoxL {
        margin-bottom: 4.16666666vw;
    }

    .sec6-container .sec6-imgBox {
        width: auto;
    }
    .sec6-container .sec6-fun-box .sec6-fun-text-2 {
        margin: 4.16666666vw 0;
    }
    
    .sec6-container .sec6-fun-box .sec6-fun-text-3 {
        margin-bottom: 4.16666666vw;
    }
}

/* sec6 end*/
/* sec7 start*/
.hw-freelace-container .sec7-container {
    margin-top: 10.41666667vw;
}

.hw-freelace-container .text-gray {
    opacity: 50%;
    color: #000000;
    font-size: 2.5vw;
    line-height: 1.25;
    font-weight: 400;
}

.hw-freelace-container .text-green {
    color: #8fbfaf;
    font-size: 8.3333333vw;
    line-height: 1.25;
    font-weight: 500;
}

.hw-freelace-container .s7-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.hw-freelace-container .s7-box .s7-val {
    margin-top: 3.125vw;
}

.sec7-container .s7-p1 {
    margin-top: 1.04166667vw;
}

.sec7-container .s7-p2 {
    padding-left: 7.29166667vw;
}

.sec7-container .s7-val .s7-val-img {
    display: flex;
    justify-content: space-between;
}
.sec7-container .s7-val .s7-img1 {
    width: 55.72916667vw;
}

.sec7-container .s7-val .s7-img2 {
    width: 21.875vw;
    position: relative;
}

.sec7-container .s7-val .s7-img2 .s7-img2-title {
    width: 16.66666667vw;
    color: #8fbfaf;
    font-size: 3.125vw;
    line-height: 1.25;
    text-align: center;
    position: absolute;
    font-weight: 500;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
.hw-freelace-container .bold {
    color: #000000;
    font-weight: 500;
}

.sec7-container .s7-val .s7-val-text {
    margin-top: 3.125vw;
    color: #5a5a5a;
    font-weight: normal;
    font-size: 1.458333333vw;
    line-height: 1.6;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec7-container {
        margin-top: 27.77777777vw;
    }

    .hw-freelace-container .s7-box {
        width: 100%;
    }

    .sec7-container .s7-val .s7-val-img {
        flex-direction: column;
    }

    .hw-freelace-container .text-gray {
        font-size: 4.4444444vw;
    }

    .hw-freelace-container .text-green {
        font-size: 13.33333333vw;
    }

    .sec7-container .s7-p2 {
        padding-left: 0;
    }

    .sec7-container .s7-p3 {
        margin-top: 2.777777777vw;
    }

    .hw-freelace-container .s7-box .s7-text {
        margin-left: 8.3333333vw;
        width: 85.2777777777vw;
    }

    .sec7-container .s7-val .s7-img1,
    .sec7-container .s7-val .s7-img2 {
        width: 100%;
    }
    .sec7-container .s7-val .s7-img2 .s7-img2-title {
        width: 45.122222vw;
        font-size: 8.333333333vw;
        top: 50%;
    }

    .hw-freelace-container .s7-box .s7-val {
        margin-top: 8.3333333vw;
    }

    .sec7-container .s7-val .s7-val-text {
        width: 83.33333333vw;
        font-size: 3.8888888vw;
        margin: 8.33333333vw auto 0;
    }

    .sec7-container .s7-p1 {
        margin-top: 2.77777777vw;
    }
}

/* sec7 end*/
/* sec8 start*/
.hw-freelace-container .sec8-container {
    margin-top: 5.20833333vw;
}

.sec8-container .s8-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.sec8-container .s8-box .s8-val-img {
    display: flex;
    justify-content: space-between;
}

.sec8-container .s8-box .s8-val1 {
    width: 39.58333333vw;
    background: linear-gradient(135.49deg, #fafcfa 0%, #e8f1f0 100%);
    position: relative;
}

.sec8-container .s8-box .s8-val2 {
    width: 38.02083333vw;
}

.sec8-container .s8-box .s8-val1 .s8-val1-t1 {
    position: absolute;
    width: auto;
    color: #5a5a5a;
    font-size: 1.66666667vw;
    line-height: 1.25;
    top: 4.16666667vw;
    left: 4.16666667vw;
}

.sec8-container .s8-box .s8-val1 .s8-val1-t2 {
    position: absolute;
    top: 5.427083vw;
    left: 4.16666667vw;
    font-weight: 700;
    color: #8fbfaf;
    font-size: 4.16666666vw;
    line-height: 1.25;
}

.sec8-container .s8-box .s8-val1 .s8-val1-t3 {
    width: 30.20833333vw;
    position: absolute;
    top: 24.94791667vw;
    left: 4.16666667vw;
    color: #5a5a5a;
    font-size: 1.458333333vw;
    line-height: 1.6;
}

.sec8-container .s8-box .s8-val1 .s8-val1-t2 .time {
    font-size: 16.35416667vw;
    color: #8fbfaf;
    font-weight: 800;
}
.sec8-container .s8-box .s8-val1 .s8-val1-t2 .hours{
    font-weight: 700;
}
.sec8-container .s8-box .s8-shot {
    position: relative;
    margin-top: 5.20833333vw;
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -ms-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
}

.sec8-container .s8-box .s8-shot .s8-shot-text {
    position: absolute;
    top: 6.04166667vw;
    left: 5.20833333vw;
    width: 51.82291667vw;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 1.6;
    font-size: 1.458333333vw;
}

.sec8-container .s8-box .s8-shot .s8-shot-text .bold {
    color: #000000;
    font-weight: 500;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec8-container {
        margin-top: 27.7777777vw;
    }

    .sec8-container .s8-box {
        width: 100%;
    }

    .sec8-container .s8-box .s8-val1,
    .sec8-container .s8-box .s8-val2 {
        width: 100%;
    }

    .sec8-container .s8-box .s8-val1 {
        height: 92.477778vw;
    }

    .sec8-container .s8-box .s8-val-img {
        flex-direction: column-reverse;
    }

    .sec8-container .s8-box .s8-val1 .s8-val1-t1 {
        font-size: 4.4444444vw;
        left: 8.3333333vw;
        top: 8.3333333vw;

    }

    .sec8-container .s8-box .s8-val1 .s8-val1-t2 {
        font-size: 11.1111111vw;
        top: 6.427083vw;
        left: 9.02777777vw;
    }

    .sec8-container .s8-box .s8-val1 .s8-val1-t2 .time {
        font-size: 43.6111111vw;
    }

    .sec8-container .s8-box .s8-val1 .s8-val1-t3 {
        width: 83.33333333vw;
        font-size: 3.8888888vw;
        top: 59.02777777vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .sec8-container .s8-box .s8-shot .s8-shot-text {
        margin: 3.75vw 0 8.333333333vw 0;
        position: static;
        width: 83.33333333vw;
        font-size: 3.8888888vw;
    }

    .sec8-container .s8-box .s8-shot {
        padding-top: 0.833333333vw;
        margin-top: 13.8888888vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        background:linear-gradient(135.49deg,#fafcfa 0%,#e8f1f0 100%);
    }
}

/* sec8 end*/
/* sec9 start*/
.hw-freelace-container .sec9-container {
    margin-top: 10.41666667vw;
}

.sec9-container .s9-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.sec9-container .s9-box .s9-title {
    font-weight: 500;
    margin-bottom: 3.125vw;
}

.sec9-container .s9-box .s9-title .s9-title2 {
    margin-top: 1.04166667vw;
}

.sec9-container .s9-box .s9-title .s9-title3 {
    padding-left: 8.54166667vw;
    white-space: nowrap;
}

.sec9-container .s9-box .s9-imgbox {
    display: flex;
}

.sec9-container .s9-box .s9-imgbox .s9-bg {
    width: 23.22916667vw;
    height: 26.35416667vw;
    background: #edf5f3;
}

.sec9-container .s9-box .s9-imgbox .s9-img1 {
    width: 64.84375vw;
    margin-left: -8.90625vw;
    margin-top: 6.92708333vw;
}

.sec9-container .s9-box .s9-iconbox {
    display: flex;
    justify-content: space-between;
    margin-top: 3.125vw;
    align-items: flex-start;
}

.sec9-container .s9-box .s9-iconbox .s9-icon {
    display: flex;
    z-index: 10;
    align-items: flex-start;
}

.sec9-container .s9-box .s9-iconbox .s9-icon .s9-icon1 {
    width: 7.29166667vw;
    margin-right: 3.07291667vw;
}

.sec9-container .s9-box .s9-iconbox .s9-icon .s9-icon2 {
    width: 5.78125vw;
}

.sec9-container .s9-box .s9-iconbox .s9-icon-title {
    width: 59.47916667vw;
    color: #5a5a5a;
    font-size: 1.458333333vw;
    line-height: 1.6;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec9-container {
        margin-top: 27.7777777vw;
    }

    .sec9-container .s9-box {
        width: 100%;
    }

    .sec9-container .s9-box .s9-title {
        margin: 0 0 8.3333333333vw 8.3333333333vw;
        width: 80vw;
    }

    .sec9-container .s9-box .s9-title .s9-title3 {
        padding-left: 0;
        white-space: normal;
    }

    .sec9-container .s9-box .s9-title .s9-title2 {
        margin-top: 2.7777777vw;
    }

    .sec9-container .s9-box .s9-imgbox .s9-bg {
        display: none;
    }

    .sec9-container .s9-box .s9-imgbox,
    .sec9-container .s9-box .s9-imgbox .s9-img1 {
        margin: 0;
    }

    .sec9-container .s9-box .s9-imgbox .s9-img1 {
        width: 100%;
    }

    .sec9-container .s9-box .s9-iconbox .s9-icon{
        height: 25.8333333vw;
        overflow: hidden;
    }
    .sec9-container .s9-box .s9-iconbox .s9-icon .s9-icon1 {
        width: 25.833333vw;
        margin-left: 11.52777777vw;
        margin-right: 11.1111111vw;
    }

    .sec9-container .s9-box .s9-iconbox .s9-icon .s9-icon2 {
        width: 20.5555555vw;
        height: 25.972222222vw;
    }

    .sec9-container .s9-box .s9-iconbox {
        width: 83.3333333vw;
        margin: -36.422222vw auto 0;
        flex-direction: column;
    }

    .sec9-container .s9-box .s9-iconbox .s9-icon-title {
        width: 83.33333333vw;
        font-size: 3.8888888vw;
        margin-top: 17.2222222vw;
    }


}

/* sec9 end*/
/* sec10 start*/
.hw-freelace-container .sec10-container {
    margin-top: 10.41666667vw;
}

.sec10-container .s10-box {
    width: 79.16666667vw;
    margin: 0 auto;
    position: relative;
}

.sec10-container .s10-box .s10-listen-title {
    position: absolute;
    top: 4.16666667vw;
    left: 5.20833333vw;
    width: 29.375vw;
}

.sec10-container .s10-box .s10-listen-title .s10-t1 {
    width: 100%;
    font-weight: 500;
    color: #3e3e3e;
    font-size: 3.33333333vw;
    line-height: 1.25;
}

.sec10-container .s10-box .s10-listen-title .s10-t2 {
    margin-top: 1.5625vw;
    width: 100%;
    color: #5a5a5a;
    font-weight: 400;
    font-size: 1.458333333vw;
    line-height: 1.6;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec10-container {
        margin-top: 27.777777777vw;
    }

    .sec10-container .s10-box .s10-listen-title {
        top: 8.3333333vw;
        left: 5.5555555vw;
        width: 72.22222222vw;
    }

    .sec10-container .s10-box {
        width: 83.333333vw;
        margin: 0 auto;
    }

    .sec10-container .s10-box .s10-listen-title .s10-t1 {
        font-size: 8.8888888vw;
    }

    .sec10-container .s10-box .s10-listen-title .s10-t2 {
        width: 100%;
        font-size: 3.8888888vw;
        margin-top: 4.1666666vw
    }
}

/* sec10 end*/
/* sec11 start*/
.hw-freelace-container .sec11-container {
    margin-top: 10.41666667vw;
}

.sec11-container .s11-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.sec11-container .s11-box .s11-imgbox {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.sec11-container .s11-box .s11-imgbox .s11-title {
    margin-top: 5.20833333vw;
    width: 32.29166667vw;
}

.sec11-container .s11-box .s11-imgbox .s11-img {
    width: 42.70833333vw;
}

.sec11-container .s11-box .s11-t1 {
    font-weight: 500;
    color: #3e3e3e;
    font-size: 3.3333333vw;
    width: 58.8064516%;
    line-height: 1.25;
}

.sec11-container .s11-box .s11-t2 {
    font-weight: 400;
    color: #5a5a5a;
    font-size: 1.458333333vw;
    line-height: 1.6;
    width: 100%;
    margin-top: 1.5625vw;
}

.sec11-container .s11-box .s11-style {
    width: 32.29166667vw;
    margin-top: -28.38541667vw;
    margin-left: 46.875vw;
    position: relative;
}

.sec11-container .s11-box .s11-style .s11-style-title {
    position: absolute;
    width: 28.33333333vw;
    color: #5a5a5a;
    font-size: 1.45833333vw;
    line-height: 1.6;
    top: 3.125vw;
    left: 2.5vw;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec11-container {
        margin-top: 27.7777777vw;
    }

    .sec11-container .s11-box {
        width: 83.33333333vw;
    }

    .sec11-container .s11-box .s11-imgbox {
        flex-direction: column;
    }

    .sec11-container .s11-box .s11-style {
        width: 100%;
        margin: 0;
    }

    .sec11-container .s11-box .s11-t1 {
        font-size: 8.8888888vw;
        width: 100%;
    }

    .sec11-container .s11-box .s11-t2 {
        width: 83.3333333vw;
        margin-top: 4.1666666vw;
        font-size: 3.8888888vw;
    }

    .sec11-container .s11-box .s11-imgbox .s11-img {
        width: 100%;
        margin-top: 8.3333333vw;
    }

    .sec11-container .s11-box .s11-style .s11-style-title {
        top: 8.3333333vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        font-size: 4.4444444vw;
        width: 72.2222222vw;
    }

    .sec11-container .s11-box .s11-imgbox .s11-title {
        margin-top: 0;
        width: 100%;
    }
}

/* sec11 end*/
/* sec12 start*/
.hw-freelace-container .sec12-container {
    margin-top: 10.41666667vw;
}

.sec12-container .s12-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.sec12-container .s12-box .s12-bg {
    width: 21.61458333vw;
    height: 29.11458333vw;
    background: #edf5f3;
    flex-shrink: 0;
    margin-top: -4.16666667vw;
    margin-left: -7.55208333vw;
}

.sec12-container .s12-box .s12-img {
    width: 65.10416667vw;
    position: relative;
    flex-shrink: 0;
}

.sec12-container .s12-box .s12-img .s12-img-title {
    position: absolute;
    font-weight: 500;
    color: #3e3e3e;
    font-size: 1.25vw;
    line-height: 1.6;
    text-align: center;
}

.sec12-container .s12-box .s12-img .s12-img-t1 {
    top: 11.30208333vw;
    left: 4.63541667vw;
    width: 8.64583333vw;
}

.sec12-container .s12-box .s12-img .s12-img-t2 {
    top: 2.60416667vw;
    left: 25.72916667vw;
    width: 11.08125vw;
    text-align: left;
}

.sec12-container .s12-box .s12-img .s12-img-t3 {
    width: 7.066667vw;
    top: 28.64583333vw;
    left: 28.22916667vw;
}

.sec12-container .s12-box .s12-img .s12-img-t4 {
    top: 2.60416667vw;
    left: 42.96875vw;
    width: 8.64583333vw;
}

.sec12-container .s12-box .s12-imgbox {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 6.25vw;
}

.sec12-container .s12-box .s12-text {
    color: #5a5a5a;
    font-size: 1.458333333vw;
    margin-top: 3.125vw;
    width: 65.10416667vw;
    line-height: 1.6;
}

.sec12-container .s12-box .t2 {
    margin-top: 1.04166667vw;
    font-weight: 500;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .sec12-container {
        margin-top: 27.7777777vw;
    }

    .sec12-container .s12-box {
        width: 100%;
    }

    .sec12-container .s12-box .s12-title {
        width: 80vw;
        margin-left: 8.33333333vw;
    }

    .sec12-container .s12-box .s12-bg {
        display: none;
    }

    .sec12-container .s12-box .s12-img {
        width: 100%;
    }

    .sec12-container .s12-box .s12-img .s12-img-t1 {
        top: 72.6388888vw;
        left: 3.6111111111vw;
        width: 23.0555555vw;
    }

    .sec12-container .s12-box .s12-img .s12-img-t2 {
        top: 8.05vw;
        left: 36.111111111vw;
        width: 18.0555555555vw;
    }

    .sec12-container .s12-box .s12-img .s12-img-t3 {
        top: 72.638888888vw;
        left: 41.1111111vw;
        width: 18.777778vw;
    }

    .sec12-container .s12-box .s12-img .s12-img-t4 {
        top: 11.388888888vw;
        left: 68.75vw;
        width: 23.0555555vw;
    }

    .sec12-container .s12-box .s12-img .s12-img-title {
        font-size: 3.3333333vw;
    }

    .sec12-container .s12-box .t2 {
        margin-top: 2.7777778vw;
    }

    .sec12-container .s12-box .s12-text {
        width: 83.333333333vw;
        font-size: 3.8888888vw;
        margin: 8.3333333vw auto 0;
    }

    .sec12-container .s12-box .s12-imgbox {
        margin-top: 8.33333333vw;
    }
}

/* sec12 end*/
/* sec13 start*/
.hw-freelace-container .hw-freelace-sec13 {
    margin-top: 10.41666667vw;
}

.hw-freelace-sec13 .s13-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.hw-freelace-sec13 .s13-box .s13-swiper-box {
    display: flex;
}

.hw-freelace-sec13 .s13-box .s13-swiper-box .design-colors-slider {
    position: relative;
    width: 41.66666667vw;
    height: 41.66666667vw;
    overflow: hidden;
    z-index: 3;
}

.hw-freelace-sec13 .s13-box .color-slide {
    position: absolute;
    top: 0;
    left: 0;

    transition: none;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
    will-change: clip-path, transform;
    opacity: 0;
}

.hw-freelace-sec13 .s13-box .color-slide.is-current {
    opacity: 1;
    animation: design-color-open 0.8s ease-in-out forwards;
    z-index: 20;
}

.hw-freelace-sec13 .s13-box .color-slide.is-previous {
    opacity: 1;
    z-index: 15;
}

@keyframes design-color-open {
    0% {
        clip-path: inset(0 0 0 100%);
    }

    100% {
        clip-path: inset(0 0 0 0%);
    }
}

@keyframes design-color-close {
    0% {
        transform: translateX(0);
        opacity: 0;

    }

    100% {
        transform: translateX(-7.3626373626%);
        opacity: 1;

    }
}



.hw-freelace-sec13 .s13-box .s13-swiper-control {
    margin-left: 8.33333333vw;
    width: 29.16666667vw;
    padding-top: 7.34375vw;
}

.hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina img {
    width: 3.125vw;
}

.hw-freelace-sec13 .s13-box .s13-swiper-control .s13-control-text {
    font-weight: 400;
    color: #5a5a5a;
    font-size: 1.458333333vw;
    line-height: 1.6;
    width: 26.71875vw;
}

.hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina {
    display: flex;
    align-items: baseline;
    width: 18.75vw;
    font-size: 1.145833333vw;
    line-height: 1.6;
    padding: 0 0.20833333vw;
    justify-content: space-between;
    background: #f5f5f5;
    border-radius: 2.29166666vw;
    -webkit-border-radius: 2.29166666vw;
    -moz-border-radius: 2.29166666vw;
    -ms-border-radius: 2.29166666vw;
    -o-border-radius: 2.29166666vw;
    color: #5a5a5a;
    box-sizing: border-box;
    margin-top: 5.20833333vw;
}

.hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina-btn {
    text-align: center;
    width: 6.25vw;
    height: 4.16666667vw;
    margin: 0.20833333vw 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    line-height: 1.25;
    font-weight: 400;
    color: #5a5a5a;

}

.hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina-imgbox {
    height: 1.45833333vw;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 0.52083333vw;
}

.hw-freelace-sec13 .s13-box .s13-produ {
    position: relative;
    margin-top: 1.5625vw;
}

.hw-freelace-sec13 .s13-box .s13-produ ul li {
    list-style: none;
    color: #5a5a5a;
    font-size: 1.25vw;
    line-height: 1.6;
    font-weight: 400;
    width: 27.65625vw;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}

.hw-freelace-sec13 .s13-box .s13-produ ul li.s13-text-active {
    opacity: 1;
    pointer-events: all;
}


.hw-freelace-sec13 .s13-box .s13-pigina {
    position: relative;
}

.hw-freelace-sec13 .s13-box .s13-pigina-bg {
    width: 33%;
    position: absolute;
    height: 4.16666667vw;
    position: absolute;
    background-color: #fff;
    border-radius: 2.08333333vw;
    left: 0.20833333vw;
    top: 0.20833333vw;
    -webkit-border-radius: 2.08333333vw;
    -moz-border-radius: 2.08333333vw;
    -ms-border-radius: 2.08333333vw;
    -o-border-radius: 2.08333333vw;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.hw-freelace-sec13 .s13-box .s13-text[data-index="0"] {
    position: static;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .hw-freelace-sec13 {
        margin-top: 27.77777777vw;
    }

    .hw-freelace-sec13 .s13-box {
        width: 100%;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-box {
        flex-direction: column;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control {
        position: relative;
        padding-top: 0;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina-imgbox {
        display: none;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control {
        display: flex;
        flex-direction: column-reverse;
        margin-left: 0;
        z-index: 5;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control {
        width: 100%;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina {
        width: 83.333333333vw;
        font-size: 4.4444444vw;
        margin: -32.966667vw auto 0;
        background: none;
        order: 1;
        padding: 0;
        justify-content: center;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina-btn {
        width: auto;
        padding: 0 2.5vw;
        height: auto;
        color: #ffffff;
        opacity: 0.5;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina-btn.s13-pigina-mod {
        margin: 0 7.22222222vw;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina-btn.text-active {
        color: #ffffff;
        opacity: 1;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-box .design-colors-slider {
        width: 100%;
        height: 125vw;
    }

    .hw-freelace-sec13 .s13-box .s13-produ ul li {
        color: #ffffff;
        font-size: 3.3333333vw;
        width: 83.33333333vw;
        min-height: 13.88888888vw;
    }

    .hw-freelace-sec13 .s13-box .s13-produ {
        margin: 5.833333333vw auto 0;
        text-align: left;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .s13-control-text {
        margin: 13.88888888vw 0 0 8.333333333vw;
        width: 84.7222222vw;
        font-size: 3.8888888vw;
    }

    .hw-freelace-sec13 .s13-box .s13-pigina-bg {
        display: none;
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .s13-pigina-rollbox {
        position: absolute;
        top: -25.666667vw;
        width: 83.33333333vw;
        left: 50%;
        transform: translateX(-50%);
        height: 1px;
        background-color: #ffffff
    }

    .hw-freelace-sec13 .s13-box .s13-swiper-control .swiper-rollbox-move {
        height: 4px;
        background-color: #fff;
        margin-top: -3px;
        transition: all 0.6s ease;
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
    }

    .hw-freelace-sec13 .s13-box .color-slide.is-current {
        transform: translateX(0);
        animation: design-color-open 0.8s ease-in-out forwards;
        -webkit-animation: design-color-open 0.8s ease-in-out forwards;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }

    .hw-freelace-sec13 .s13-box .color-slide.swiper-slide-next {
        transform: translateX(0);
        animation: design-color-close 0.8s ease-in-out forwards;
        -webkit-animation: design-color-close 0.8s ease-in-out forwards;
    }

    @keyframes design-color-open {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes design-color-close {
        0% {

            opacity: 1;
        }

        100% {

            opacity: 0;
        }
    }

}

/* sec13 end*/
/* sec14 start*/
.hw-freelace-container .hw-freelace-sec14 {
    margin-top: 10.41666667vw;
}

.hw-freelace-sec14 .s14-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.hw-freelace-sec14 .s14-box .s14-t1 {
    padding-left: 0.52083333vw;
}

.hw-freelace-sec14 .s14-box .s14-t2 {
    margin-top: 1.04166667vw;
}

.hw-freelace-sec14 .s14-box .s14-t3 {
    padding-left: 9.01041667vw;
}

.hw-freelace-sec14 .s14-box .s14-imgbox {
    display: flex;
    margin-top: 3.125vw;
    position: relative;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group {
    position: absolute;
    left: 38.4375vw;
    top: 25.83333333vw;
    color: #fff;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items {
    display: flex;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item {
    min-width: 5.20833333vw;
    text-align: right;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item:not(:last-child) {
    margin-right: 3.125vw;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item .switch-play {
    display: block;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item .switch-stop {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item.sound-active .switch-play {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item.sound-active .switch-stop {
    display: block;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .morganf-sec24-audio-btn {
    font-size: 1.25vw;
    height: 1.875vw;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.25;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .morganf-sec24-audio-btn .sec24-auido-img {
    position: relative;
    width: 1.875vw;
    height: 1.875vw;
    display: flex;
    flex-shrink: 0;
    margin-right: 0.52083333vw;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .morganf-sec24-audio-btn .sec24-audio-switch {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound {
    position: relative;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-img {
    width: 11.5625vw;
    margin: 1.04166667vw auto 0;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave .s14-sound-wave-img {
    width: 11.5625vw;
    height: 3.125vw;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave-btn {
    display: flex;
    text-align: center;
    margin-top: 1.04166667vw;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.25vw;
    line-height: 1.25;
    cursor: pointer;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .sound-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.625vw;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave-btn img {
    width: 3.54166667vw;
    height: 1.45833333vw;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-box {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave .s14-sound-img-on {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .sound-on {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-img {
    width: 62.5vw;
    flex-shrink: 0;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave.show {
    display: block;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave.sound-active .s14-sound-img-on {
    display: block;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave.sound-active .s14-sound-img-off {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave.show+.s14-sound-box {
    display: block;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave.sound-active+.s14-sound-box .sound-on {
    display: flex;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave.sound-active+.s14-sound-box .sound-off {
    display: none;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-bg {
    flex-shrink: 0;
    width: 19.53125vw;
    height: 26.45833333vw;
    background: #edf5f3;
    margin-right: -2.86458333vw;
    margin-top: 17.76041667vw;
}

.hw-freelace-sec14 .s14-box .s14-noise-text {
    width: 56.51041667vw;
    color: #5a5a5a;
    font-size: 1.458333333vw;
    line-height: 1.6;
    margin-top: -4.63541667vw;
    float: right;
}

.hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .sound-switch-img {
    position: relative;
    display: flex;
}

.hw-freelace-sec14 .s14-box .sound-switch-img .sound-circle {
    position: absolute;
    left: 0.729167vw;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25vw;
    height: 1.25vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    background-color: #ffffff;
    transition: all 0.6s linear;
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .hw-freelace-sec14 {
        margin-top: 27.7777777vw;
    }

    .hw-freelace-sec14 .s14-box {
        width: 100%;
    }

    .hw-freelace-sec14 .s14-box .s14-title {
        width: 80vw;
        margin-left: 8.33333333vw;
    }

    .hw-freelace-sec14 .s14-box .s14-t2 {
        margin-top: 2.77777777vw;
    }

    .hw-freelace-sec14 .s14-box .s14-t3,
    .hw-freelace-sec14 .s14-box .s14-t1 {
        padding-left: 0;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-bg {
        display: none;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox {
        margin-top: 8.33333333vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-img {
        width: 100%;
    }

    .hw-freelace-sec14 .s14-box .s14-noise-text {
        margin: 8.33333333vw auto 0;
        width: 83.333333333vw;
        font-size: 3.8888888vw;
        float: none;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group {
        width: 80%;
        top: 83.3333333vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .morganf-sec24-audio-btn {
        font-size: 4.44444444vw;
        background-size: 6.666666666vw 6.666666666vw;
        height: 6.666666666vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .morganf-sec24-audio-btn .sec24-auido-img {
        width: 6.66666666vw;
        height: 6.66666666vw;
        margin-right: 2.777777777vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items {
        display: flex;
        justify-content: center;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-img {
        margin: 4.16666666vw auto 0;
        width: 36.66666666vw;
        height: auto;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave .s14-sound-wave-img {
        width: 36.66666666vw;
        height: auto;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave .s14-sound-wave-btn {
        margin-top: 2.91666666vw;
        height: auto;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave .s14-sound-wave-btn span {
        width: 32.36111111vw;
        box-sizing: border-box;
        font-size: 4.44444444vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item.sound-active .morganf-sec24-audio-btn {
        background-size: 6.666666666vw 6.666666666vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave span {
        padding-right: 11.8055555vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave .sound-off,
    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave .sound-on {
        background-position: right center;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave-btn {
        font-size: 4.44444444vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .s14-sound-wave-btn img {
        width: 13.8888888vw;
        height: 5.55555555vw;
    }

    .hw-freelace-sec14 .s14-box .sound-switch-img .sound-circle {
        width: 5vw;
        height: 5vw;
        left: 3.606667vw;
    }

    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-sound .sound-switch {
        margin-left: 3.05555555vw;
    }
    .hw-freelace-sec14 .s14-box .s14-imgbox .s14-group .s14-items .s14-item:not(:last-child){
        margin-right: 8.333333333vw;
    }

}

/* sec14 end*/
/* sec15 end*/
.hw-freelace-container .hw-freelace-sec15 {
    margin-top: 10.41666667vw;
}

.hw-freelace-sec15 .s15-box {
    width: 79.16666667vw;
    margin: 0 auto;
}

.hw-freelace-sec15 .s15-box .s15-t2 {
    margin-top: 1.04166667vw;
}

.hw-freelace-sec15 .s15-box .s15-t3 {
    padding-left: 34.53125vw;
}

.hw-freelace-sec15 .s15-box .s15-img {
    display: flex;
    justify-content: space-between;
    margin-top: 5.20833333vw;
}

.hw-freelace-sec15 .s15-box .s15-img .s15-imgbox {
    position: relative;
}


.hw-freelace-sec15 .s15-box .s15-img .s15-imgl {

    width: 42.70833333vw;
}

.hw-freelace-sec15 .s15-box .s15-img .s15-imgr {
    width: 34.89583333vw;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
}

.hw-freelace-container .hw-freelace-sec15 .s15-box .s15-img .s15-show-1 {
    opacity: 1;
}

.hw-freelace-container .hw-freelace-sec15 .s15-box .s15-img .s15-show-2 {
    opacity: 1;
}

.hw-freelace-container .hw-freelace-sec15 .s15-box .s15-img .s15-show-3 {
    opacity: 1;
}

.hw-freelace-sec15 .s15-box .s15-img .s15-text {
    position: absolute;
    color: #5a5a5a;
    font-weight: 400;
    font-size: 1.458333333vw;
    line-height: 1.6;
    text-align: left;
    width: 35.83333333vw;
    top: 3.125vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.hw-freelace-sec15 .s15-box .s15-img .s15-imgl-text {
    width: 35.83333333vw;
}

.hw-freelace-sec15 .s15-box .s15-img .s15-imgr .s15-imgt-text {
    width: 29.58333333vw;
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .hw-freelace-sec15 {
        margin-top: 27.7777777vw;
    }

    .hw-freelace-sec15 .s15-box {
        width: 100%;
    }

    .hw-freelace-sec15 .s15-box .s15-title {
        margin-left: 8.33333333vw;
    }

    .hw-freelace-sec15 .s15-box .s15-img {
        width: 83.333333333vw;
        margin: 8.3333333333vw auto 0;
        display: flex;
        flex-direction: column;
    }

    .hw-freelace-sec15 .s15-box .s15-img .s15-imgbox,
    .hw-freelace-sec15 .s15-box .s15-img .s15-imgr {
        width: 100%;
    }

    .hw-freelace-sec15 .s15-box .s15-img .s15-text {
        font-size: 3.8888888vw;
        width: 72.2222222vw;
        top: 8.33333333vw;
    }

    .hw-freelace-sec15 .s15-box .s15-t3 {
        padding-left: 0;
    }

    .hw-freelace-sec15 .s15-box .s15-t2 {
        margin-top: 2.777777777vw;
    }

    .hw-freelace-sec15 .s15-box .s15-img .s15-imgl-text,
    .hw-freelace-sec15 .s15-box .s15-img .s15-imgr .s15-imgt-text {
        width: 72.22222222vw;
    }

    .hw-freelace-sec15 .s15-box .s15-img .s15-imgr {
        margin-top: 4.166666666vw;
    }
}

/* sec15 start*/
/* footer start*/
.hw-freelace-container .footer-list {
    width: 79.16666667vw;
    margin: 10.41666667vw auto 0;
    padding-bottom: 10.41666667vw;

}

.hw-freelace-container .footer-list ul {
    padding-left: 1.041767vw
}

.hw-freelace-container .footer-list ul a {
    color: #1f71ff;
    word-break: break-all;
}

.hw-freelace-container .footer-list li {
    list-style-type: decimal;
    color: #7f7f7f;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

.hw-freelace-container .footer-list li.footer-active {
    color: #000;
}

.hw-freelace-container .footer-list li.price {
    position: relative;
    list-style-type: none;
}

.hw-freelace-container .footer-list li.price::before {
    content: "*";
    position: absolute;
    top: 0;
    left: -9px;
}

@media screen and (min-width: 1920px) {
    .hw-freelace-container .footer-list li {
        font-size: 0.625vw;
    }

    .circle_process .right {
        right: 0.15416667vw;
    }

    .circle_process .left {
        left: 0.12208333vw;
    }
}

@media screen and (max-aspect-ratio: 136/100) {
    .hw-freelace-container .footer-list {
        width: 83.333333333vw;
        margin: 27.77777777vw auto 0;
        padding-bottom: 27.77777777vw;
    }

    .hw-freelace-container .footer-list li {
        font-size: 3.33333333vw;
    }

    .hw-freelace-container .footer-list ul {
        padding-left: 5.277778vw
    }
}

/* footer end*/
@media screen and(-ms-high-contrast:active),
(-ms-high-contrast: none) {
    .hw-freelace-sec15 .s15-box .s15-img .s15-imgr {
        display: block;
    }

    .hw-freelace-container .hw-freelace-sec2 .sec2-video {
        overflow: hidden;
    }

    .hw-freelace-container .hw-freelace-sec2 .sec2-video video {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
    }

    .hw-freelace-container .hw-freelace-kv {
        margin: 30px auto 0;
    }

    .hw-freelace-sec15 .s15-box .s15-img .s15-imgl {
        opacity: 1;
    }

    .hw-freelace-sec15 .s15-box .s15-img .s15-imgr {
        opacity: 1;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px) and (orientation: landscape) {
    .hw-freelace-container .hw-freelace-kv .kv-banner {
        top: 16.308333vw;
    }
    .sec12-container .s12-box .s12-img .s12-img-t2{
        width: 11.28125vw;
    }
    .hw-freelace-sec14 .s14-box .sound-switch-img .sound-circle{
        width: 1.2vw;
        height: 1.2vw;
    }
    .sec6-container .sec6-rb-ele .ele{
        width: 20.94583vw;
    }
    
}

@media screen and (min-width: 374px) and (max-width: 375px) {
    .hw-freelace-container .hw-freelace-kv .kv-banner .banner-title {
        letter-spacing: 0.006875vw;
    }
}
@media screen and (min-width: 833px) and (max-width: 835px){
    .sec4-container .sec4-container-box .pigination-box .pigination .svg{
        height: 6.76666667vw;
    }
}
@media screen and (width : 346px) {
    .sec4-container .sec4-bot .swiper-box .swiper-slide-active .imgl {
        width: 50vw;
        height: 59.0277777777vw;


    }

    .sec4-container .sec4-bot .swiper-box .swiper-slide-prev .imgl {
        width: 50vw;
        height: 59.0277777777vw;

    }

}

.hw-freelace-container .mark-right-folat {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}