/* 
    공통 레이아웃
*/
/* .title { text-align: center; } */


.intro { position: relative; }
.intro .inner-container { height: 500px; margin: 60px auto 120px auto; display: flex; justify-content: center; align-items: center; }
.intro .inner-container .big-title strong { font-weight: 700; }
.intro .inner-container > div { text-align: center; color: #fff; }
.intro .inner-container > div .big-title { font-weight: 400; }
.intro .inner-container > div > p { margin: 6px 0 40px 0; font-size: 18px; line-height: 26px; }
.intro .inner-container > div ul { display: flex; justify-content: center; }
.intro .inner-container > div ul li + li { margin-left: 50px; }
.intro .inner-container > div ul li img { margin: 0 auto; width: 100px; }
.intro .inner-container > div ul li p { margin-top: 12px; font-size: 20px; line-height: 30px; }
.intro .img-box { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; max-width: 1440px; width: 100%; }


.system .video { width: 100%; max-width: 986px; margin: 40px auto 0 auto; }
.system .video iframe { width: 100%; max-height: 514px; height: 32.125rem; }

.fn { margin: 160px 0 0 0; }
.fn .fn-layout + .fn-layout { margin-top: 120px; }
.fn .fn-layout span { display: block; padding-bottom: 24px; border-bottom: 2px solid #505050; }
.fn .fn-layout h3 { padding-top: 24px; font-size: 30px; line-height: 42px; font-weight: 400; }
.fn .fn-layout h3 strong { font-weight: 700; }
.fn .fn-layout ul { margin-top: 60px; display: flex; }
.fn .fn-layout ul li { width: 50%; }
.fn .fn-layout ul li p { margin-top: 16px; font-size: 18px; line-height: 26px; color: #767676; }
.fn .fn-layout ul li + li { margin-left: 40px; }
.fn .fn-2 ul li,
.fn .fn-3 ul li { width: 100%; text-align: center; }


.banner { background: url('../../../../images/product/horizontal/banner.jpg') no-repeat center / cover; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; height: 450px; margin: 160px 0; }
.banner h3 { font-size: 36px; line-height: 54px; font-weight: 700; }
.banner p { font-size: 18px; line-height: 26px; margin-top: 10px; }


.parts ul { display: flex; flex-wrap: wrap; width: 986px; justify-content: space-between; margin: 60px auto 0 auto; }
.parts ul li { text-align: center; width: 302px; }
.parts ul li p { margin-top: 16px; font-size: 18px; line-height: 26px; color: #505050; }
.parts ul li:nth-of-type(4),
.parts ul li:nth-of-type(5),
.parts ul li:nth-of-type(6),
.parts ul li:nth-of-type(7),
.parts ul li:nth-of-type(8),
.parts ul li:nth-of-type(9) {
    margin-top: 60px;
}


.reports { padding: 160px 0 200px 0; }
.reports ul { display: flex; justify-content: center; margin-top: 60px; }
.reports ul li + li { margin-left: 40px; }

.intro .inner-container .big-title strong { margin-right: 10px; }



@media (max-width: 1440px){
    .intro .inner-container { height: 31.25rem; margin: 3.75rem auto 7.5rem auto; }
    .intro .inner-container .big-title strong { margin-right: 0.625rem; }
    .intro .inner-container > div > p { margin: 0.375rem 0 2.5rem 0; font-size: 1.125rem; line-height: 1.625rem; }
    .intro .inner-container > div ul li + li { margin-left: 3.125rem; }
    .intro .inner-container > div ul li img { width: 6.25rem; }
    .intro .inner-container > div ul li p { margin-top: 0.75rem; font-size: 1.25rem; line-height: 1.875rem; }
    .intro .img-box { max-width: 1440px; width: 95%; }


    .system .video { width: 61.625rem; max-width: 986px; margin: 2.5rem auto 0 auto; }


    .fn { margin: 10rem 0 0 0; }
    .fn .fn-layout + .fn-layout { margin-top: 7.5rem; }
    .fn .fn-layout span { padding-bottom: 1.5rem; border-bottom: 2px solid #505050; }
    .fn .fn-layout h3 { padding-top: 1.5rem; font-size: 1.875rem; line-height: 2.625rem; }
    .fn .fn-layout ul { margin-top: 3.75rem; }
    .fn .fn-layout ul li p { margin-top: 1rem; font-size: 1.125rem; line-height: 1.625rem; }
    .fn .fn-layout ul li + li { margin-left: 2.5rem; }

    .banner { height: 28.125rem; margin: 10rem 0; }
    .banner h3 { font-size: 2.25rem; line-height: 3.375rem; }
    .banner p { font-size: 1.125rem; line-height: 1.625rem; margin-top: 0.625rem; }


    .parts ul { margin: 3.75rem auto 0 auto; }
    .parts ul li { text-align: center; }
    .parts ul li p { margin-top: 1rem; font-size: 1.125rem; line-height: 1.625rem; }
    .parts ul li:nth-of-type(4),
    .parts ul li:nth-of-type(5),
    .parts ul li:nth-of-type(6),
    .parts ul li:nth-of-type(7),
    .parts ul li:nth-of-type(8),
    .parts ul li:nth-of-type(9) {
        margin-top: 3.75rem;
    }


    .reports { padding: 10rem 0 12.5rem 0; }
    .reports ul { margin-top: 3.75rem; }
    .reports ul li + li { margin-left: 2.5rem; }
    .intro .inner-container .big-title strong { margin-right: 0.625rem; }
}


@media (max-width: 1024px){
    

    .intro { display: flex; flex-direction: column-reverse; }
    .intro .inner-container { margin: 0; height: auto; }
    .intro .inner-container > div { color: #111; }
    .intro .inner-container > div .big-title { margin-top: 1.25rem; }
    .intro .inner-container > div .big-title strong { font-weight: 700; }
    .intro .inner-container > div > p { font-size: 0.875rem; line-height: 1.375rem; margin-top: 0.625rem; }
    .intro .inner-container > div > p br { display: none; }
    .intro .inner-container > div ul { margin-top: 1.25rem; }
    .intro .img-box { position: static; transform: translate(0, 0); width: 100%; }
    .intro .inner-container > div ul { justify-content: space-between; }
    .intro .inner-container > div ul li p { margin-top: 0.3125rem; font-size: 0.875rem; line-height: 1.375rem; }
    .intro .inner-container > div ul li img { width: 4.375rem; }
    .intro .inner-container > div ul li + li { margin-left: 0; }
    /* .intro .inner-container > div ul li p */
    .title { padding: 0 1rem; }
    .system { margin-top: 3.75rem; }
    .system .video { width: 100%; margin: 1.25rem auto 0 auto; }
    .system .video iframe { height: 11.5rem; }

    .fn { margin: 3.75rem 0; }
    .fn .fn-layout span { padding-bottom: 0.125rem; }
    .fn .fn-layout h3 { padding-top: 0.125rem; font-size: 1.125rem; line-height: 1.625rem; }
    .fn .fn-layout ul { margin-top: 1.25rem; display: block; }
    .fn .fn-layout ul li { width: 100%; }
    .fn .fn-layout ul li p { font-size: 0.875rem; line-height: 1.375rem; margin-top: 0.3125rem; }
    .fn .fn-layout ul li p br { display: none; }
    .fn .fn-layout ul li + li { margin-left: 0; margin-top: 1.25rem; }
    .fn .fn-layout + .fn-layout { margin-top: 2.5rem; }

    .fn-3 h3 br { display: none; }

    .banner { margin: 3.75rem 0; height: 12rem; }
    .banner h3 { font-size: 1rem; line-height: 1.5rem; }
    .banner p { margin-top: 0; font-size: 0.875rem; line-height: 1.625rem; }

    .parts .big-title { font-size: 1.125rem; line-height: 1.625rem; }
    .parts ul { width: 100%; justify-content: space-between; }
    .parts ul li { width: 9.625rem; }
    .parts ul li p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.375rem; }
    
    .parts ul li:nth-of-type(3),
    .parts ul li:nth-of-type(4),
    .parts ul li:nth-of-type(5),
    .parts ul li:nth-of-type(6),
    .parts ul li:nth-of-type(7),
    .parts ul li:nth-of-type(8),
    .parts ul li:nth-of-type(9) {
        margin-top: 1.625rem;
    }

    .reports { padding: 3.75rem 0; }
    .reports .big-title { font-size: 1.125rem; line-height: 1.625rem; }
    .reports ul { margin-top: 1.25rem; }
    .reports ul img { width: 7rem; }
    .reports ul li + li { margin-left: 0.625rem; }
}