@charset "utf-8";

/* Reset */
html,
body {
    width: 100%;
    height: 100%;
    font-size: 1rem;
    color: #000;
    line-height: 1;
    -webkit-text-size-adjust: none;
}

body,
div,
form,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
em,
p,
span,
textarea,
pre,
label,
fieldset,
th,
td,
button,
a,
input,
select,
hr,
figure {
    margin: 0;
    padding: 0;
    font-family: "Myriad Pro", ns, Arial, sans-serif;
    word-break: break-all;
    vertical-align: top;
}

#wrap {
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}

/* 원본 소스 영역 768px >= && 1920px 기준 s */
#container.main .intro_motion {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("./images/main/bg_intro_base.png") 50% 0;
    animation: intro_dimmde 0.5s ease-in 1 normal;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    z-index: 90;
}
#container.main .intro_motion .overLogo,
#container.main .intro_motion .overLogo span {
    display: block;
    position: fixed;
    top: 260px;
}
#container.main .intro_motion .overLogo {
    left: calc(50% - 400px);
    width: 800px;
    height: 470px;
    background-color: #000;
    animation: intro_logo_base 0.5s ease-in 1 normal;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
#container.main .intro_motion .overLogo span {
    left: calc(50% - 357px);
    width: 715px;
    height: 396px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 715px 396px;
}
#container.main .intro_motion .overLogo span.logo1:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    animation: intro_logo2 0.5s ease-in 1 normal;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
#container.main .intro_motion .overLogo span.logo1 {
    background-image: url("./images/main/bg_intro_logo.png");
    animation: intro_logo1 2s ease-in 1 normal;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    opacity: 0;
    z-index: 1;
}
#container.main .intro_motion .overLogo span.logo2 {
    width: 0;
    margin-top: -1px;
    background-image: url("./images/main/bg_intro_logo_line01.png");
    animation: intro_logo_line1 1s ease-in 1 normal;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    z-index: 1;
}
#container.main .intro_motion .overLogo span.logo3 {
    width: 0;
    margin-top: -1px;
    background-image: url("./images/main/bg_intro_logo_line02.png");
    animation: intro_logo_line1 1s ease-in 1 normal;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    z-index: 1;
}
#container.main .intro_motion .overLogo span.logo4 {
    width: 0;
    margin-top: -1px;
    background-image: url("./images/main/bg_intro_logo_line03.png");
    animation: intro_logo_line1 1s ease-in 1 normal;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    z-index: 1;
}
@keyframes intro_dimmde {
    0% {
        opacity: 1;
        transform: scale(1);
        z-index: 90;
    }
    100% {
        opacity: 0;
        transform: scale(3);
        z-index: -1;
    }
}
@keyframes intro_logo_base {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes intro_logo1 {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        height: 396px;
        margin-top: 0;
        opacity: 1;
    }
    100% {
        height: 0;
        margin-top: 0;
        opacity: 1;
    }
}
@keyframes intro_logo2 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes intro_logo_line1 {
    0% {
        width: 0;
        opacity: 0;
    }
    30% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}

.video_wrap {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.visual {
    width: 100%;
    display: block;
    position: relative;
    /* height: 1080px; */
}
.visual_video {
    width: auto;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* width: calc(100% - 7px); */
    /* height: 1080px; */
}
.visual:after {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, #000, transparent);
}
.visual .linearGrap {
    position: absolute;
    top: 260px;
    left: calc(50% - 357px);
    width: 715px;
    height: 396px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 0;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.visual .line01 {
    width: 0;
    background-image: url("./images/main/img_logoobj_line01.png");
    animation-name: drawImg1;
    animation-delay: 3.7s;
    animation-fill-mode: backwards;
}
.visual .line02 {
    width: 0;
    background-image: url("./images/main/img_logoobj_line02.png");
    animation-name: drawImg1;
    animation-delay: 3.9s;
    animation-fill-mode: backwards;
}
.visual .line03 {
    width: 0;
    background-image: url("./images/main/img_logoobj_line03.png");
    animation-name: drawImg1;
    animation-delay: 4.1s;
    animation-fill-mode: backwards;
}
.visual .white01 {
    width: 0;
    background-image: url("./images/main/img_logoobj_white01.png");
    animation-name: drawImg2;
    animation-delay: 4.4s;
}
.visual .white02 {
    width: 0;
    background-image: url("./images/main/img_logoobj_white02.png");
    animation-name: drawImg2;
    animation-delay: 4.6s;
}
.visual .desc {
    position: absolute;
    bottom: 345px;
    left: 0;
    width: 100%;
    font-family: "Myriad Pro", sans-serif;
    font-weight: 400;
    font-size: 26px;
    color: #fafafa;
    text-align: center;
    letter-spacing: 2.6px;
    z-index: 1;
    opacity: 0;
    animation: desc_move 4.6s ease-in 1 normal;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
}

@media screen and (max-width: 767px) {
    #container.main .intro_motion {
        display: block;
        background: url("./images/main/bg_intro_base_m.png") 50% 0;
        background-size: 1000px auto;
    }
    #container.main .intro_motion .overLogo,
    #container.main .intro_motion .overLogo span {
        top: 235px;
    }
    #container.main .intro_motion .overLogo span {
        left: calc(50% - 178px);
        width: 357px;
        background-size: 357px auto !important;
    }
    .visual_video {
        /* left: calc(50% - 960px);
        width: 1920px; */
        /* height: 760px; */
    }
    .visual {
        /* height: 760px; */
        background-position: 50% 0;
        background-size: 100% auto;
    }
    .visual:after {
        /* height: 465px; */
    }
    .visual .linearGrap {
        top: 190px;
        left: calc(50% - 100px);
        width: 200px;
        height: 126px;
        background-size: 200px auto;
    }
    .visual .desc {
        bottom: auto;
        top: 322px;
        font-size: 19px;
    }
}
/* 320px ~  320 기준 vw */

img {
    width: 100%;
}

.mo-show {
    display: block !important;
}

.pc-show {
    display: none !important;
}

#header {
    position: absolute;
    top: 19.375vw;
    left: 9.375vw;
    z-index: 10;
}

#container {
    padding-bottom: 17.5vw;
    box-sizing: border-box;
}

.logo {
    width: 85.625vw;
    height: 10.938vw;
    background: url("./images/hanwha-eagles-logo-3x.png") no-repeat center / 100% auto;
    text-indent: -9999px;
    overflow: hidden;
}

.logo + p {
    margin-top: 0.938vw;
    font-family: "Myriad Pro";
    font-size: 7.188vw;
    font-weight: 300;
    color: #fff;
    line-height: 8.125vw;
}

.launch {
    display: flex;
    position: absolute;
    left: 9.375vw;
    bottom: 21.875vw;
    z-index: 10;
}

.launch > span {
    display: block;
    margin-right: 3.125vw;
    font-family: "Myriad Pro";
    font-size: 5.625vw;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.34);
    line-height: 1.5;
    letter-spacing: 0.563vw;
}

.launch > strong {
    font-family: "Myriad Pro";
    font-size: 5.625vw;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.section {
    padding: 31.25vw 9.375vw 0;
    box-sizing: border-box;
}

.section h2 {
    font-family: "Myriad Pro";
    font-size: 11.25vw;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.13;
    letter-spacing: 2.813vw;
}

.head-01 {
    font-family: ns;
    font-size: 6.875vw;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 7.188vw;
    word-break: keep-all;
}

.head-02 {
    font-family: ns;
    font-size: 6.25vw;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    letter-spacing: -0.275vw;
}

.head-h1-03 {
    font-family: "Myriad Pro";
    font-size: 5.625vw;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 5.938vw;
}

.head-03 {
    font-family: ns;
    font-size: 5vw;
    font-weight: 100;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.625;
    word-break: keep-all;
}

.head-04 {
    font-family: ns;
    font-size: 4.375vw;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.71;
    letter-spacing: -0.109vw;
    word-break: keep-all;
}

.head-02 + [class*="head-0"] {
    margin-top: 5vw;
}

[class*="head-0"] .hl {
    color: rgba(255, 255, 255, 0.8);
}

.head-02 > .h1 {
    font-family: ns;
    font-weight: 500;
    font-size: 6.25vw;
}

.head-03 > .h1 {
    font-family: ns;
    font-weight: 400;
    font-size: 5vw;
}

.belt-txt {
    display: inline-block;
    position: relative;
}

.belt-txt .belt {
    width: 100%;
    height: 0.875rem;
    display: block;
    position: absolute;
    left: 0.375vw;
    bottom: 8px;
    background-color: #f37321;
    transform-origin: 0 50%;
    transform: scaleX(0);
}

.belt-txt > em {
    display: inline-block;
    margin: 0 0.5rem;
    position: relative;
    z-index: 2;
    font-size: 6.25vw;
    font-weight: 500;
    color: #fff;
}

.card {
    width: 100%;
    padding: 13.438vw 7.813vw;
    box-sizing: border-box;
    background-color: #292929;
    border-radius: 3.125vw;
}

.card + .card {
    margin-top: 6.25vw;
}

.card [class*="head"] {
    margin-top: 4.375vw;
}

.section1 .flex_container .flex_container .flex_item:last-child,
.section2 .flex_container .flex_item:last-child,
.section3 .flex_container .flex_container .flex_item:last-child {
    margin-top: 8.125vw;
}

.section1 .flex_container .flex_item:last-child .card {
    transform: translateY(50%);
    opacity: 0;
}

.section1 .flex_container .flex_item:last-child .card > span {
    width: 15.625vw;
    height: 15.625vw;
    display: block;
    margin-bottom: 4.375vw;
}

.section1 .flex_container .flex_item:last-child .card:nth-child(1) {
    margin-top: 7.5vw;
}

.section1 .flex_container .flex_item:last-child .card:nth-child(1) > span {
    background: url("./images/ic_01@3x.png") no-repeat center / 100% auto;
}

.section1 .flex_container .flex_item:last-child .card:nth-child(2) > span {
    background: url("./images/ic_02@3x.png") no-repeat center / 100% auto;
}

.section1 .flex_container .flex_item:last-child .card:nth-child(3) > span {
    background: url("./images/ic_03@3x.png") no-repeat center / 100% auto;
}

.section3 .flex_container .flex_item:last-child > img {
    display: block;
    margin-top: 9.375vw;
}

.section4 .flex_container .flex_item:last-child .flex_container .flex_container {
    display: flex;
    flex-wrap: wrap;
}

.section4 .flex_container .flex_item:last-child .flex_container > .flex_item:first-child {
    margin-top: 5vw;
}

.section4 .flex_container .flex_item:last-child .flex_container > .flex_item:first-child .card {
    width: 100%;
    height: 113.75vw;
    position: relative;
    overflow: hidden;
    transform: translateY(50%);
    opacity: 0;
}

.section4 .flex_container .flex_item:last-child .flex_container > .flex_item:first-child .head-03 {
    margin-top: 0;
    position: absolute;
    top: 5.625vw;
    left: 5.625vw;
    z-index: 10;
}

.section4 .flex_container .flex_item:last-child .flex_container > .flex_item:first-child .head-01 {
    margin-top: 0;
    position: absolute;
    bottom: 5.625vw;
    right: 5.625vw;
    z-index: 10;
}

.section4 .flex_container .flex_item:last-child .flex_container > .flex_item:last-child {
    margin-top: 6.25vw;
}

.section4 .flex_container .flex_item:last-child .flex_container .flex_container > .flex_item:nth-child(1) {
    width: 100%;
    height: 88.75vw;
    margin-top: 0;
    margin-bottom: 6.25vw;
    background: url(./images/font@3x.png) no-repeat center / 100% auto;
}

.section4 .flex_container .flex_item:last-child .flex_container .flex_container > .flex_item:nth-child(2) {
    width: 50%;
    height: 62.5vw;
    flex: 1;
    margin-top: 0;
    margin-right: 6.25vw;
    background: url(./images/color@3x.png) no-repeat center / 100% auto;
}

.section4 .flex_container .flex_item:last-child .flex_container .flex_container > .flex_item:nth-child(3) {
    width: 50%;
    height: 62.5vw;
    flex: 1;
    margin-top: 0;
    background: url(./images/big_type@3x.png) no-repeat center / 100% auto;
}

.section4 .flex_container .flex_item:last-child .flex_container .flex_container .card {
    transform: translateY(50%);
    opacity: 0;
}

.section4 video {
    width: auto;
    height: 113.75vw;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section5 {
    margin-top: 31.25vw;
    padding-bottom: 37.5vw;
    background: url(./images/bg@3x.png) no-repeat 0 0 / 100% 140.625vw;
    position: relative;
    overflow: hidden;
}

.section5 h2 {
    color: rgba(0, 0, 0, 0.6);
}

.section5 .head-02 {
    margin-top: 9.063vw;
    font-weight: 100;
}

.section5 dl {
    margin-top: 9.375vw;
}

.section5 dt {
    letter-spacing: 2.522vw;
}

.section5 dd {
    margin-top: 9.375vw;
}

.section5 dd + dt {
    margin-top: 25vw;
}

.section5 .swiper-container {
    margin: 0 -9.375vw;
    padding: 0 9.375vw;
    box-sizing: border-box;
}

.section5 .swiper-wrapper {
    font-size: 0;
    white-space: nowrap;
}

.section5 .swiper-slide {
    width: 100%;
    display: inline-block;
}

.section5 [class*="swiper-pagination"] {
    margin-top: 7.5vw;
    text-align: center;
}

.section5 .swiper-pagination-bullet {
    width: 2.5vw;
    height: 2.5vw;
    display: inline-block;
    margin-right: 3.125vw;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.section5 .swiper-pagination-bullet-active {
    background-color: #fff;
}

.section6 {
    padding-top: 0;
}

.section6 .head-h1-03 + * {
    margin-top: 9.375vw;
}

.section6 .head-h1-03 + .head-h1-03 {
    font-size: 4.375vw;
    color: rgba(255, 255, 255, 0.3);
}

.section6 th {
    font-family: "Myriad Pro";
    font-size: 4.375vw;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    line-height: 10vw;
}

.section6 td {
    font-family: "Myriad Pro";
    font-size: 4.375vw;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 10vw;
}

.section6 ul li + li {
    margin-top: 20vw;
}

@media screen and (min-width: 1100px) {
    /* 1920px 기준 vw */

    /* scroll bar */
    ::-webkit-scrollbar {
        width: 0.636vw;
    }

    body *::-webkit-scrollbar {
        width: 0.364vw;
    }
    ::-webkit-scrollbar-track {
        background-color: #333;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 0.182vw;
        background-color: #b3b3b3;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #b3b3b3;
    }
    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
        width: 0.364vw;
        height: 0.364vw;
        background-color: #333;
    }

    .mo-show {
        display: none !important;
    }

    .pc-show {
        display: block !important;
    }

    #header {
        top: 6.25vw;
        left: 14.844vw;
    }

    .logo {
        width: 23.75vw;
        height: 3.021vw;
        background: url(./images/hanwha_eagles.png) no-repeat center / 100% auto;
    }

    .logo + p {
        font-size: 2.344vw;
        line-height: 2.656vw;
    }

    .launch {
        left: auto;
        bottom: auto;
        top: 7.083vw;
        right: 14.844vw;
    }

    .launch > span,
    .launch > strong {
        font-size: 1.042vw;
    }

    .launch > span {
        margin-right: 0.625vw;
        letter-spacing: 0.104vw;
    }

    .video_wrap {
        height: auto;
        line-height: 0;
    }

    .visual_video {
        width: 100vw;
        height: auto;
        position: relative;
        left: 0;
        transform: translateX(0);
    }

    .section {
        width: 100%;
        padding: 10.417vw 14.844vw 0;
    }

    .section h2 {
        font-size: 2.344vw;
        line-height: 1.13;
        letter-spacing: 0.586vw;
    }

    .belt-txt .belt {
        width: 97.5%;
    }

    .belt-txt > em {
        font-size: 1.823vw;
    }

    .head-01 {
        font-size: 1.302vw;
        line-height: 1.302vw;
    }

    .head-02 {
        font-size: 1.823vw;
        line-height: 3.021vw;
        word-break: keep-all;
    }

    .head-03 {
        font-size: 1.042vw;
        font-weight: 600;
        line-height: 1.042vw;
    }

    .head-04 {
        font-size: 0.833vw;
        line-height: 1.458vw;
        letter-spacing: -0.003vw;
    }

    .head-02 + [class*="head-0"] {
        margin-top: 0.938vw;
    }

    .head-h1-03 {
        font-size: 1.25vw;
        line-height: 1.25vw;
    }

    .card {
        padding: 2.604vw 2.344vw 2.5vw;
        border-radius: 0.521vw;
    }

    .card + .card {
        margin-top: 0;
        margin-left: 0.677vw;
    }

    .card [class*="head"] {
        margin-top: 0.729vw;
    }

    .card .head-03 {
        font-size: 0.938vw;
        font-weight: 100;
        line-height: 1.55;
    }

    .section1 {
        padding-top: 5.208vw;
    }

    .section1 .flex_container .flex_container,
    .section2 .flex_container,
    .section3 .flex_container .flex_container,
    .section4 .flex_container .flex_container {
        display: flex;
    }

    .section1 .flex_container .flex_container > .flex_item:nth-child(1),
    .section2 .flex_container > .flex_item:nth-child(1),
    .section3 .flex_container .flex_container > .flex_item:nth-child(1),
    .section4 .flex_container .flex_container > .flex_item:nth-child(1) {
        flex: none;
        margin-right: 9.74vw;
    }

    .section1 .flex_container .flex_container .flex_item:last-child,
    .section2 .flex_container .flex_item:last-child,
    .section3 .flex_container .flex_container .flex_item:last-child {
        margin-top: 0;
    }

    .section1 .flex_container .flex_item:last-child .flex_container {
        width: 100%;
        margin-top: 2.188vw;
    }

    .section1 .flex_container .flex_item:last-child .card {
        width: 33%;
        flex: 1;
    }

    .section1 .flex_container .flex_item:last-child .card > span {
        width: 2.604vw;
        height: 2.604vw;
        margin-bottom: 0;
    }

    .section1 .flex_container .flex_item:last-child .card:nth-child(1) {
        margin-top: 0;
    }

    .section1 .flex_container .flex_item:last-child .card:nth-child(1) > spna {
        background: url(./images/ic_01.png) no-repeat center / 100% auto;
    }

    .section1 .flex_container .flex_item:last-child .card:nth-child(2) > spna {
        background: url(./images/ic_02.png) no-repeat center / 100% auto;
    }

    .section1 .flex_container .flex_item:last-child .card:nth-child(3) > spna {
        background: url(./images/ic_03.png) no-repeat center / 100% auto;
    }

    .section3 .pc-show {
        height: 46.146vw;
        position: relative;
    }

    .section3 .background {
        padding: 0.833vw 0.938vw;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    .section3 .pc {
        position: absolute;
        top: 6.823vw;
        left: 0;
    }

    .section3 .pc .background {
        width: 46.979vw;
        height: 33.438vw;
    }

    .section3 .pc .background:before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 15;
        background: url(./images/frame.png) no-repeat center / 100% auto;
    }

    .section3 .pc .background > img {
        border-radius: 2.031vw;
    }

    .section3 .grid {
        width: 30.052vw;
        position: absolute;
        top: 0.833vw;
        left: 50%;
        z-index: 10;
        margin-left: -15vw;
    }

    .section3 .grid .grid_txt {
        width: 100%;
        position: absolute;
        top: -4.427vw;
        left: 0;
    }

    .section3 .grid > img {
        display: block;
        transform-origin: 50% 0;
        transform: scaleY(0);
    }

    .section3 .grid .grid_txt > span {
        display: block;
        font-family: "Myriad Pro";
        font-size: 0.99vw;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        line-height: 0.99vw;
        opacity: 0;
    }

    .section3 .grid .grid_txt .grid_line {
        width: 0;
        height: 0.052vw;
        margin-top: 0.521vw;
        position: relative;
        background-color: #fff;
        opacity: 0.7;
    }

    .section3 .grid .grid_txt .grid_line:before {
        content: "";
        width: 0.052vw;
        height: 0.521vw;
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.7);
    }

    .section3 .grid .grid_txt .grid_line:after {
        content: "";
        width: 0.052vw;
        height: 0.521vw;
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.7);
    }

    .section3 .mo {
        position: absolute;
        top: 12.24vw;
        left: 51.719vw;
    }

    .section3 .mo .background {
        width: 18.698vw;
        height: 34.74vw;
    }

    .section3 .mo .background:before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 15;
        background: url(./images/frame_mo.png) no-repeat center / 100% auto;
    }

    .section3 .mo .background > img {
        border-radius: 1.51vw;
    }

    .section3 .mo .grid {
        width: 16.823vw;
        margin-left: -8.411vw;
    }

    .section4 > .flex_container > .flex_item:last-child > .flex_container {
        margin-top: 3.75vw;
    }

    .section4 .flex_container .flex_item:last-child .flex_container .flex_item:nth-child(1) {
        flex: 1;
        width: 50%;
        margin-top: 0;
        margin-right: 1.563vw;
    }

    .section4 .flex_container .flex_item:last-child .flex_container .flex_item:nth-child(1) .card {
        height: 41.667vw;
        position: relative;
        overflow: hidden;
    }

    .section4 .flex_container .flex_item:last-child .flex_container .flex_item:last-child {
        flex: 1;
        margin-top: 0;
    }

    .section4 .flex_container .flex_item:last-child .flex_container .flex_item:last-child .flex_item:nth-child(1) {
        flex: none;
        width: 100%;
        height: 18.542vw;
        margin-bottom: 1.563vw;
        background: url(./images/font.png) no-repeat center / 100% auto;
    }

    .section4 .flex_container .flex_item:last-child .flex_container .flex_item:last-child .flex_item:nth-child(2) {
        flex: 1;
        width: 50%;
        height: 21.563vw;
        margin-left: 0;
        margin-right: 0;
        background: url(./images/color.png) no-repeat center / 100% auto;
    }

    .section4 .flex_container .flex_item:last-child .flex_container .flex_item:last-child .flex_item:nth-child(3) {
        flex: 1;
        width: 50%;
        height: 21.563vw;
        margin-left: 1.563vw;
        background: url(./images/trend.png) no-repeat center / 100% auto;
    }

    .section4 .flex_container .flex_item:last-child .flex_container > .flex_item:first-child .head-03 {
        top: 1.771vw;
        left: 1.771vw;
    }

    .section4 .flex_container .flex_item:last-child .flex_container > .flex_item:first-child .head-01 {
        bottom: 1.771vw;
        right: 1.771vw;
    }

    .section4 video {
        height: 41.667vw;
    }

    .section5 {
        margin-top: 10.417vw;
        padding: 7.292vw 14.844vw;
        box-sizing: border-box;
        position: relative;
        background: url(./images/tit_bg.png) no-repeat 0 0 / 100% 48.073vw;
    }

    .section5:before {
        content: "";
        width: 100%;
        height: 176.51vw;
        position: absolute;
        top: 48.073vw;
        left: 0;
        background-color: #2a2a2a;
    }

    .section5 .head-02 {
        margin-top: 3.75vw;
    }

    .section5 dl {
        margin-top: 3.125vw;
    }

    .section5 dt {
        font-size: 1.771vw;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        line-height: 2.135vw;
        letter-spacing: 0.65vw;
    }

    .section5 dd {
        margin-top: 3.125vw;
        position: relative;
    }

    .section5 dd + dt {
        margin-top: 7.292vw;
    }

    .section5 dt:first-child + dd {
        height: 199.427vw;
    }

    .section5 dt:first-child + dd:before {
        content: "";
        width: 67.708vw;
        height: 30.365vw;
        position: absolute;
        top: 67.865vw;
        left: 1.198vw;
        z-index: 1;
        background-image: linear-gradient(to bottom, rgba(42, 42, 42, 0), rgba(42, 42, 42, 0.65) 72%, #2a2a2a);
    }

    .section5 dd img[src*="players_view"] {
        border-radius: 1.042vw;
        box-shadow: 0 0.573vw 3.333vw 0 rgba(0, 0, 0, 0.7);
    }

    .section5 dd [class*="picture"] {
        width: 33.333vw;
        position: absolute;
        left: 0.729vw;
        transform: translateY(5.208vw);
        opacity: 0;
        border-radius: 1.042vw;
        box-shadow: 0 0.573vw 3.333vw 0 rgba(0, 0, 0, 0.7);
    }

    .section5 dd .picture_01 {
        top: 159.427vw;
        z-index: 1;
    }

    .section5 dd .picture_02 {
        top: 170.365vw;
        left: 16.042vw;
        z-index: 3;
    }

    .section5 dd .picture_03 {
        top: 155.625vw;
        left: 37.708vw;
    }

    .section5 dt:nth-of-type(2) + dd {
        height: 86.563vw;
    }

    .section5 dt:nth-of-type(2) + dd [class*="picture"] {
        width: 17.188vw;
        transform: translateY(5.208vw);
        opacity: 0;
    }

    .section5 dd .picture_04 {
        top: 3.073vw;
        left: 26.979vw;
    }

    .section5 dd .picture_04:after {
        content: "";
        width: 100%;
        height: 47.917vw;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.64) 82%, #000000);
    }

    .section5 dd .picture_05 {
        top: 13.438vw;
        left: 0;
    }

    .section5 dd .picture_05:after {
        content: "";
        width: 100%;
        height: 7.656vw;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 49%, #000000);
    }

    .section5 dd .picture_06 {
        top: 21.094vw;
        left: 53.021vw;
    }

    .section5 dd .picture_06:after {
        content: "";
        width: 100%;
        height: 66.667vw;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 45%, #000000);
    }

    .section6 {
        padding-top: 0;
    }

    .section6 .head-h1-03 + * {
        margin-top: 1.563vw;
    }

    .section6 ul {
        display: flex;
    }

    .section6 ul li:first-child {
        flex: none;
        width: 20.99vw;
        margin-right: 10.781vw;
    }

    .section6 ul li + li {
        margin-top: 0;
    }

    .section6 ul li:last-child .head-h1-03:last-child {
        font-size: 0.938vw;
    }

    .section6 th {
        font-size: 0.938vw;
        line-height: 2.344vw;
    }

    .section6 td {
        font-size: 0.938vw;
        line-height: 1.771vw;
    }
}