/* common style */
.hw-hagen *,
.hw-hagen *:before,
.hw-hagen *:after {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}

.hw-hagen *:focus,
.hw-hagen *:active {
    outline: none;
}

.hw-hagen {
    background-color: #000;
    width: 100%;
    overflow: hidden;
}

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

.hw-hagen video,
.hw-hagen picture,
.hw-hagen img {
    width: 100%;
    display: block;
}

.hw-hagen .blur-up {
    filter: blur(20px);
    -webkit-filter: blur(20px);
    transition: filter 0.2s;
    -webkit-transition: filter 0.2s;
    -moz-transition: filter 0.2s;
    -ms-transition: filter 0.2s;
    -o-transition: filter 0.2s;
    will-change: filter;
}

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

.hw-hagen .lazyload:not([src]) {
    display: none;
}

.hw-hagen .nr {
    white-space: nowrap;
}

.hw-hagen sup {
    font-size: 0.6em;
    cursor: pointer;
}



.hw-hagen .is-cover {
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-hagen .learn-more-btn {
    word-break: break-word;
    word-wrap: break-word;
}

.hw-hagen .show-mob {
    display: none;
}


.hw-hagen .subtitle {
    font-weight: 500;
    color: #ffffff;
    font-size: 2.5vw;
    line-height: 1.25;
}

.hw-hagen .sub-point {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.66666667vw;
    line-height: 1.25;
}

.hw-hagen .sub-text {
    color: #ffffff;
    font-size: 1.25vw;
    line-height: 1.6;
    font-weight: 400;
}



.hw-hagen .pb-40 {
    padding-bottom: 2.08333333vw;
}

.hw-hagen .pb-60 {
    padding-bottom: 3.125vw;
}

.hw-hagen .pb-300 {
    padding-bottom: 15.625vw;
}


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

    .hw-hagen .show-pc {
        display: none;
    }

    .hw-hagen .pb-40 {
        padding-bottom: 5.55555556vw;
    }

    .hw-hagen .pb-60 {
        padding-bottom: 8.33333333vw;
    }

    .hw-hagen .subtitle {
        font-size: 6.6666666vw;
    }

    .hw-hagen .sub-text {
        font-size: 3.33333333vw;
    }

    .hw-hagen .pb-300 {
        padding-bottom: 27.7777777vw;
    }
}

/* kv */
.hw-hagen .hagen-kv-container {
    padding-bottom: 10.41666667vw;
}



.hagen-kv-container .product-img {
    width: 39.16666667vw;
    flex-shrink: 0;
}

.hagen-kv-container .kv-text {
    margin: 14.84375vw 0 0 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.hagen-kv-container .kv-text img {
    width: 46.61458333vw;
}

.hagen-kv-container .kv-text p {
    color: #ffffff;
    line-height: 1.6;
    font-size: 1.45833333vw;
    padding-top: 1.5625vw;
    font-weight: 400;
    text-align: center;
    width: 48vw;
    max-width: 49vw;
}

.hagen-kv-container .kv-content {
    display: flex;
    padding: 3.85416667vw 0 3.85416667vw 5.20833333vw;
}

@media screen and (max-aspect-ratio:136/100) {
    .hw-hagen .hagen-kv-container {
        padding-bottom: 27.777777778vw;
    }

    .hagen-kv-container .kv-content {
        flex-direction: column-reverse;
        padding: 25vw 0 0 0;
    }

    .hagen-kv-container .product-img {
        width: 83.3333333vw;
        margin: 0 auto 13.19444444vw auto;
    }

    .hagen-kv-container .kv-text {
        margin: 0 auto;

        font-size: 4.4444444vw;
    }

    .hagen-kv-container .kv-text img {
        width: 85vw;
    }

    .hagen-kv-container .kv-text p {
        font-size: 4.4444444vw;
        text-align: center;
        padding: 4.16666667vw 0 13.8888888vw 0;
        white-space: normal;
        width: 85vw;
        max-width: 90vw;
    }
}


/* section2 */
.hagen-section2 .hagen-sec2-container {
    margin: 0 4.16666667vw 0 13.54166667vw;
    display: flex;
}

.hagen-sec2-container .sub-point {
    display: flex;
    justify-content: space-between;
}

.hagen-sec2-container .subtitle {
    padding-bottom: 1.04166667vw;
}

.hagen-sec2-container .content {
    width: 34.01041667vw;
}

.hagen-sec2-container .sub-text {
    padding-bottom: 2.08333333vw;
}

.hagen-sec2-container .color-txt {
    font-weight: 900;
    color: #43b7ff;
    font-size: 1.66666667vw;
    line-height: 1.25;
    width: 34.01041667vw;
}

.hagen-sec2-container .color-txt span {
    margin: 0 1.97916667vw 0 0;
    display: inline-block;
}

.hagen-sec2-container .color-txt span:last-child {
    margin: 0;
}

.hagen-sec2-container .picturebox {
    width: 39.16666667vw;
    margin: 7.29166667vw 0 0 3.4375vw;
}

@media screen and (max-aspect-ratio:136/100) {
    .hagen-section2 .hagen-sec2-container {
        flex-direction: column;
        margin: 0;
    }

    .hagen-sec2-container .content {
        width: 100%;
        padding: 0 8.3333333vw;
    }

    .hagen-sec2-container .sub-point {
        font-size: 4.44444444444vw;
        padding-bottom: 5.55555555vw;
    }

    .hagen-sec2-container .subtitle {
        padding-bottom: 2.77777778vw;
    }

    .hagen-sec2-container .color-txt {
        font-size: 6.666666666vw;
        width: 83.33333333vw;
    }

    .hagen-sec2-container .color-txt span {
        margin: 0 3.88888888vw 0 0;
    }

    .hagen-sec2-container .sub-text {
        padding-bottom: 8.3333333vw;
    }

    .hagen-sec2-container .picturebox {
        width: 83.0555555vw;
        margin: 8.33333333vw auto auto 8.61111111vw;
    }
}

/* section4 */

.hagen-section4 .hagen-sec4-container {
    position: relative;
    z-index: 1;
}

.hagen-sec4-container .picturebox {
    width: 100vw;
    overflow: hidden;

}

.hagen-sec4-container .content {
    position: absolute;
    z-index: 2;
    left: 55.41666667vw;
    top: 16.66666667vw;
    width: 31.25vw;
}

@media screen and (max-aspect-ratio:136/100) {
    .hagen-sec4-container .content {
        margin-left: 8.33333vw;
        text-align: left;
        position: static;
        width: 83.88888888vw;
    }

    .hagen-sec4-container .sub-text {
        padding-bottom: 8.3333333vw;
    }
}

/* section5 */
.hagen-sec5-container .content {
    text-align: center;
    width: 65.3125vw;
    margin: 0 auto;
}

.hagen-sec5-container .picturebox {
    width: 79.16666667vw;
    margin: 0 auto;
    position: relative;
}

.hagen-sec5-container .img-note {
    color: #ffffff;
    font-size: 1.14583333vw;
    line-height: 1.25;
    text-align: center;
    font-weight: 400;
}

.hagen-sec5-container .img-note .note {
    width: 10.41666667vw;
}

.hagen-sec5-container .img-note .note1 {
    position: absolute;
    top: 13.69791667vw;
    left: 0;
}

.hagen-sec5-container .img-note .note2 {
    position: absolute;
    top: 13.69791667vw;
    left: 12.34375vw;
}

.hagen-sec5-container .img-note .note3 {
    position: absolute;
    top: 13.69791667vw;
    left: 44.89583333vw;
}

.hagen-sec5-container .img-note .note4 {
    position: absolute;
    top: 13.69791667vw;
    left: 56.82291667vw;
}

.hagen-sec5-container .img-note .note5 {
    position: absolute;
    top: 13.69791667vw;
    left: 68.75vw;
}

.hagen-sec5-container .small-desc {
    color: #ffffff;
    font-size: 0.83333333vw;
    line-height: 1.6;
    font-weight: 400;
    margin: 3.125vw 9.97395833vw 0 auto;
    width: 64.16666667vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.hagen-sec5-container .small-desc .icon-img img {
    width: 0.98958333vw;
    height: 0.98958333vw;
    margin: 0.171875vw 0;
    margin-right: 0.41666667vw;
}

@media screen and (max-width: 1919px) {
    .hagen-sec5-container .small-desc {
        font-size: 12px;
    }

    .hagen-sec5-container .small-desc .icon-img img {
        margin: 2px 0;
        margin-right: 0.41666667vw;
        width: 15px;
        height: 15px;
    }
}



@media screen and (max-aspect-ratio:136/100) {
    .hagen-section5 .hagen-sec5-container {
        padding-bottom: 0vw;
    }

    .hagen-sec5-container .content {
        width: 87.77777777vw;
        text-align: left;
        margin: 0 auto 0 8.33333333vw;
    }

    .hagen-sec5-container .img-note1,
    .hagen-sec5-container .img-note2 {
        font-size: 3.88888888vw;
        color: #ffffff;
        line-height: 1.25;
        text-align: center;
        font-weight: 400;
    }

    .hagen-sec5-container .img-note1 {
        width: 80.27777777vw;
        margin: 0 auto 2.77777778vw auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .hagen-sec5-container .img-note2 {
        width: 93vw;
        margin: 2.77777778vw auto 5.55555556vw 4.7222222vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .hagen-sec5-container .img-note1 .note1 {
        width: 22.222222vw;
    }

    .hagen-sec5-container .img-note2 .note2 {
        width: 32.77777777vw;
    }

    .hagen-sec5-container .img-note2 .note3 {
        width: 37.5vw;
    }

    .hagen-sec5-container .content .sub-text {
        padding-bottom: 8.3333333vw;
    }

    .hagen-sec5-container .picturebox {
        width: 100%;
    }

    .hagen-sec5-container .picturebox img {
        width: 80.277777777vw;
        margin: 0 auto;
    }

    .hagen-sec5-container .small-desc {
        font-size: 3.33333333vw;
        margin: 0 8.333333vw 0 6.944444vw;
        align-items: baseline;
        text-align: left;
        justify-content: flex-start;
        width: 84.722222222vw;

    }

    .hagen-sec5-container .small-desc .icon-img img {
        width: 3.47222222vw;
        height: 3.47222222vw;
        display: inline-block;
        box-sizing: content-box;
        margin: 0;
        margin-right: 1.3888888vw;
    }

    .hagen-sec5-container .small-desc .icon-img {
        flex-shrink: 0;
    }

}

/* section6 */
.hagen-sec6-container .content {
    text-align: center;
    width: 74.16666667vw;
    margin: 0 auto;
}

.hagen-sec6-container .picturebox {
    display: flex;
    justify-content: space-between;
    width: 77.08333333vw;
    margin: 0 auto;
}

.hagen-sec6-container .card-left {
    width: 44.27083333vw;
    border-radius: 1.04166667vw;
}

.hagen-sec6-container .card-right {
    width: 31.25vw;
    border-radius: 1.04166667vw;
}

.hagen-sec6-container .small-desc {
    color: #ffffff;
    font-size: 0.83333333vw;
    font-weight: 400;
    line-height: 1.6;
    margin: 3.125vw 11.45833333vw 0 30.45833333vw;
    text-align: right;
}

@media screen and (max-width: 1919px) {
    .hagen-sec6-container .small-desc {
        font-size: 12px;
    }
}

@media screen and (max-aspect-ratio:136/100) {
    .hagen-sec6-container .content {
        width: 100%;
        text-align: left;
        padding: 0 8.33333333vw;
    }

    .hagen-sec6-container .picturebox {
        flex-direction: column;
        width: 83.333333333vw;
    }

    .hagen-sec6-container .card-left {
        width: 83.333333333vw;
        margin-bottom: 5.55555555vw;
        border-radius: 2.77777777vw;
    }

    .hagen-sec6-container .card-right {
        width: 83.333333333vw;
        border-radius: 2.77777777vw;
    }

    .hagen-sec6-container .small-desc {
        font-size: 3.33333333vw;
        margin: 5.55555555vw 8.33333333vw 0 8.33333333vw;
    }

}

/* section7 */
.hagen-sec7-container .content {
    text-align: center;
    width: 67.70833333vw;
    margin: 0 auto;
}

.hagen-sec7-container .picturebox {
    width: 53.95833333vw;
    margin: 0 auto;
}

.hagen-sec7-container .sub-text {
    padding-bottom: 5.20833333vw;
}

@media screen and (max-aspect-ratio:136/100) {
    .hagen-sec7-container .content {
        width: 100%;
        text-align: left;
        padding: 0 8.33333333vw;
    }

    .hagen-sec7-container .picturebox {
        width: 83.33333vw;
    }

    .hagen-sec7-container .sub-text {
        padding-bottom: 13.888888vw;
    }

}

/* section8 */
.hagen-sec8-container .content {
    text-align: center;
    width: 67.91666667vw;
    margin: 0 auto;
}

.hagen-sec8-container .picturebox {
    width: 77.08333333vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.hagen-sec8-container .card-left {

    width: 31.25vw;
    background: #151515;
    border-radius: 1.04166667vw;
    -webkit-border-radius: 1.04166667vw;
    -moz-border-radius: 1.04166667vw;
    -ms-border-radius: 1.04166667vw;
    -o-border-radius: 1.04166667vw;
}

.hagen-sec8-container .inner {
    margin: 3.125vw 1.5625vw auto 3.125vw;
}

.hagen-sec8-container .card-left .img-box {
    display: flex;
}

.hagen-sec8-container .card-right {
    width: 43.75vw;
    background: #151515;
    border-radius: 1.04166667vw;
    -webkit-border-radius: 1.04166667vw;
    -moz-border-radius: 1.04166667vw;
    -ms-border-radius: 1.04166667vw;
    -o-border-radius: 1.04166667vw;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 3.125vw;
}

.hagen-sec8-container .card-right .card-item p {
    color: #ffffff;
    font-size: 0.83333333vw;
    line-height: 1.6;
    margin-top: 1.04166667vw;
    font-weight: 400;
    text-align: center;
    width: 10.41666667vw;
}

.hagen-sec8-container .card-right .card-item {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    width: 12.5vw;
}

.hagen-sec8-container .card-right .card-item:not(:last-child) {
    margin-bottom: 2.08333333vw;
}


.hagen-sec8-container .card-right .card-item img {
    width: 4.16666667vw;
    flex-shrink: 0;
}

.hagen-sec8-container .card-left .subtitle {
    font-weight: 700;
    color: #ffffff;
    font-size: 2.5vw;
    line-height: 1.25;
    padding-bottom: 6.25vw;
}

.hagen-sec8-container .img-box img {
    width: 5.20833333vw;
    padding-bottom: 1.5625vw;
}

.hagen-sec8-container .img-box .imgbox1 {
    width: 6.25vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 6.25vw 0 2.60416667vw;
}

.hagen-sec8-container .img-box .imgbox2 {
    width: 6.875vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hagen-sec8-container .img-box p {
    color: #ffffff;
    font-size: 1.25vw;
    line-height: 1.6;
    text-align: center;
    font-weight: 400;
}

.hagen-sec8-container .imgbox1 p {
    width: 12.5vw;

}

.hagen-sec8-container .imgbox2 p {
    width: 11.5vw;

}


.hagen-sec8-container .color-txt {
    padding-bottom: 6.25vw;
    padding-left: 0.44739583vw;
    line-height: 1.25;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.hagen-sec8-container .color-txt .number {
    width: 18.17708333vw;
    flex-shrink: 0;
}

.hagen-sec8-container .color-txt .info {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.66666667vw;
    line-height: 1.25;
    margin: 0 0 0 1.04166667vw;
}

@media screen and (max-aspect-ratio:136/100) {
    .hagen-sec8-container .content {
        width: 85.138889vw;
        text-align: left;
        margin: 0 0 0 8.333333vw;
    }

    .hagen-sec8-container .picturebox {
        flex-direction: column;
    }

    .hagen-sec8-container .picturebox {
        width: 83.3333333vw;
    }

    .hagen-sec8-container .card-left {
        width: 83.3333333vw;
        height: auto;
        border-radius: 2.777777777vw;
        -webkit-border-radius: 2.777777777vw;
        -moz-border-radius: 2.777777777vw;
        -ms-border-radius: 2.777777777vw;
        -o-border-radius: 2.777777777vw;
        margin-bottom: 5.55555555vw;
    }

    .hagen-sec8-container .card-right {
        width: 83.33333333vw;
        height: auto;
        align-content: flex-start;
        border-radius: 2.777777777vw;
        -webkit-border-radius: 2.777777777vw;
        -moz-border-radius: 2.777777777vw;
        -ms-border-radius: 2.777777777vw;
        -o-border-radius: 2.777777777vw;
        padding: 8.33333333vw 0;
    }

    .hagen-sec8-container .card-left .subtitle {
        font-size: 6.666666666vw;
        padding-bottom: 8.33333333vw;
    }

    .hagen-sec8-container .inner {
        margin: 8.33333333vw 5.555555555vw 7.7777777vw 5.555555555vw;
    }

    .hagen-sec8-container .color-txt {
        padding-bottom: 11.1111111vw;
        padding-left: 4.02777777vw;
    }

    .hagen-sec8-container .img-box p {
        font-size: 3.33333333vw;
    }

    .hagen-sec8-container .img-box img {
        width: 13.88888888vw;
        padding-bottom: 2.777777777vw
    }

    .hagen-sec8-container .img-box .imgbox1 {
        width: 13.8888888vw;
        margin: 0 11.11111111vw;
    }

    .hagen-sec8-container .img-box .imgbox2 {
        width: 13.8888888vw;
        margin: 0 11.11111111vw;
    }

    .hagen-sec8-container .imgbox1 p {
        width: 33vw;
        position: relative;
    }

    .hagen-sec8-container .imgbox2 p {
        width: 31vw;
        position: relative;
    }

    .hagen-sec8-container .color-txt .info {
        font-size: 4.444444vw;
        margin: 0 0 0 2.777778vw;
        width: 25%;
    }

    .hagen-sec8-container .card-right .card-item img {
        width: 11.11111111vw;
        flex-shrink: 0;
        margin-bottom: 1.3888888vw;
    }

    .hagen-sec8-container .card-right .card-item p {
        font-size: 3.33333333vw;
        position: relative;
        width: 37.5vw;
        text-align: center;
    }

    .hagen-sec8-container .card-right .card-item {
        width: 11.1111111vw;
        justify-content: flex-start;
    }

    .hagen-sec8-container .card-right .card-item:nth-child(odd) {
        margin: 0 13.888889vw 5.55555555vw 16.666667vw;
    }

    .hagen-sec8-container .card-right .card-item:nth-child(even) {
        margin: 0 16.666667vw 5.55555555vw 13.888889vw;
    }

    .hagen-sec8-container .card-right .card-item:nth-last-child(-n+2) {
        margin-bottom: 0;
    }


    .hagen-sec8-container .color-txt .number {
        width: 48.51527777vw;
        height: auto;
    }
}

/* section9 */
.hagen-section9 .hagen-sec9-container {
    display: flex;
    margin: 0 auto 0 13.54166667vw;
}

.hagen-sec9-container .content {
    width: 38.54166667vw;
}

.hagen-sec9-container .content .subtitle {
    padding-top: 2.60416667vw;
}


.hagen-sec9-container .picturebox {
    width: 36.45833333vw;
}

@media screen and (max-aspect-ratio:136/100) {
    .hagen-sec9-container .content {
        width: 100%;
        text-align: left;
        padding: 0 8.33333333vw;
    }

    .hagen-sec9-container .sub-text {
        padding-bottom: 8.3333333vw;
    }

    .hagen-sec9-container .content .subtitle {
        padding-top: 0;
    }

    .hagen-section9 .hagen-sec9-container {
        flex-direction: column;
        margin: 0;
    }

    .hagen-sec9-container .picturebox {
        width: 86.1111111vw;
        width: 100%;
    }



}

/* section10 */
.hagen-section10 .hagen-sec10-container {
    display: flex;
}

.hagen-sec10-container .picturebox {
    width: 31.25vw;
}

.hagen-sec10-container .content {
    width: 34.79166667vw;
    margin: 5.9375vw 4.79166667vw 0 13.54166667vw;
}

@media screen and (max-aspect-ratio:136/100) {
    .hagen-section10  .hagen-sec10-container {
        flex-direction: column;
    }

    .hagen-sec10-container .content {
        padding: 0 8.333333vw;
        margin: 0;
        width: 100%;
        text-align: left;
    }

    .hagen-sec10-container .sub-text {
        padding-bottom: 8.3333333vw;
    }

    .hagen-sec10-container .picturebox {
        width: 83.33333333vw;
        margin: 0 auto;
    }
}


/* footer */
.hw-hagen .footer {
    overflow: hidden;
}

.hw-hagen .footer .footer-item {
    width: 70.57291667vw;
    margin: 10.41666667vw auto 10.41666667vw 14.84375vw;
}

.hw-hagen .footer ul {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    list-style: decimal;
    color: #7F7F7F;
    padding-left: 1.34em;
}

.hw-hagen .footer ul>li.active {
    color: #fff;
}

@media screen and (min-width: 1920px) {
    .hw-hagen .footer ul {
        font-size: 0.625vw;
    }
}

@media screen and (max-aspect-ratio:136/100) {
    .hw-hagen .footer .footer-item {
        width: 85vw;
        margin: 27.77777777vw 6.666667vw 27.77777777vw 8.333333vw;
    }

    .hw-hagen .footer ul {
        font-size: 3.33333333vw;
        padding-left: 1.325em;
    }
}



/* footer end*/