/* Turning Reset */


.title { text-align: center; }
img { width: 100%; display: block; }

.intro { position: relative; height: 100vh; display: flex; align-items: center; }
.intro .img-box { position: absolute; width: 100%; top: 0; left: 0; z-index: -1; height: 100%; }
.intro .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro .inner-intro { width: 1063px; text-align: end; margin-right: 41.5vw; }
.intro .inner-intro > p { font-size: 22px; line-height: 32px; color: #767676; margin: 16px 0 32px 0; }
.intro .inner-intro ul { display: flex; justify-content: flex-end; }
.intro .inner-intro ul li { text-align: center; color: #505050; }
.intro .inner-intro ul li img { width: 5.1875rem; margin: 0 auto; }
.intro .inner-intro ul li + li { margin-left: 40px; }
.intro .inner-intro ul li p { font-size: 18px; line-height: 26px; margin-top: 8px; }

.type { padding: 160px 0; text-align: center; }
.type ul { display: flex; justify-content: center; margin-top: 60px; }
.type ul li + li { margin-left: 119px; }
.type ul li img { height: 25rem; }
.type ul li p { margin-top: 24px; font-size: 26px; line-height: 36px; }


.fn { background-color: #F8F8F8; padding: 120px 0; }
.fn ul { display: flex; justify-content: center; margin-top: 60px; }
.fn ul li { width: 50%; }
.fn ul li + li { margin-left: 38px; }
.fn ul li p { font-size: 18px; line-height: 26px; color: #505050; margin-top: 16px; }


.parts { padding: 160px 0 200px 0; }
.parts .parts-img { display: flex; justify-content: center; align-items: center; margin-top: 60px; }
.parts .parts-img .part { margin-left: 120px; display: flex; flex-wrap: wrap; width: 700px; }
.parts .parts-img .part li + li { margin-left: 40px; }
.parts .parts-img .part li p { position: relative; padding-left: 33px; font-size: 18px; line-height: 28px; margin-bottom: 18px; color: #505050; }
.parts .parts-img .part li p:before { 
    position: absolute;
    content: '1';
    width: 23px;
    height: 23px;
    box-sizing: border-box;
    background: var(--main);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
 }
 .parts .parts-img .part li:nth-of-type(2) p:before { content: '2' ;}
 .parts .parts-img .part li:nth-of-type(3) p:before { content: '3' ;}
 .parts .parts-img .part li:nth-of-type(4) p:before { content: '4' ;}
 .parts .parts-img .part li:nth-of-type(5) p:before { content: '5' ;}

 .parts .parts-img .part li:nth-of-type(4) { margin-left: 0; }
 .parts .parts-img .part li:nth-of-type(4),
 .parts .parts-img .part li:nth-of-type(5) {
     margin-top: 48px;
}

@media (max-width: 1440px){
    .intro .inner-intro { width: 66.4375rem; text-align: end; }
    .intro .inner-intro > p { font-size: 1.375rem; line-height: 2rem; margin: 1rem 0 2rem 0; }
    .intro .inner-intro ul li + li { margin-left: 2.5rem; }
    .intro .inner-intro ul li p { font-size: 1.125rem; line-height: 1.625rem; margin-top: 0.5rem; }

    .type { padding: 10rem 0; }
    .type ul { margin-top: 3.75rem; }
    .type ul li + li { margin-left: 7.4375rem; }
    .type ul li p { margin-top: 1.5rem; font-size: 1.625rem; line-height: 2.25rem; }


    .fn { padding: 7.5rem 0; }
    .fn ul { margin-top: 3.75rem; }
    .fn ul li + li { margin-left: 2.375rem; }
    .fn ul li p { font-size: 1.125rem; line-height: 1.625rem; margin-top: 1rem; }


    .parts { padding: 10rem 0 12.5rem 0; }
    .parts .parts-img {margin-top: 3.75rem; }
    .parts .parts-img .part { margin-left: 7.5rem; width: 43.75rem; }
    .parts .parts-img .part li + li { margin-left: 2.5rem; }
    .parts .parts-img .part li p { padding-left: 2.0625rem; font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 1.125rem; }
    .parts .parts-img .part li p:before {
        width: 1.4375rem;
        height: 1.4375rem;
    }
    .parts .parts-img .part li:nth-of-type(2) p:before { content: '2' ;}
    .parts .parts-img .part li:nth-of-type(3) p:before { content: '3' ;}
    .parts .parts-img .part li:nth-of-type(4) p:before { content: '4' ;}
    .parts .parts-img .part li:nth-of-type(5) p:before { content: '5' ;}

    .parts .parts-img .part li:nth-of-type(4) { margin-left: 0; }
    .parts .parts-img .part li:nth-of-type(4),
    .parts .parts-img .part li:nth-of-type(5) {
        margin-top: 3rem;
    }
}
 

@media (max-width: 1024px){
    .intro { display: block; height: auto; margin: 3.75rem 0 0 0; }
    .intro .inner-intro { text-align: center; width: 100%; padding: 0 1rem; }
    .intro .inner-intro > p { font-size: 0.875rem; line-height: 1.375rem; margin: 0.3125rem 0 1.25rem 0; }
    .intro .inner-intro p br { display: none; }
    .intro .inner-intro ul { justify-content: center; margin-bottom: 1.25rem; }
    .intro .inner-intro ul li + li { margin-left: 1.25rem; }
    .intro .inner-intro ul li p{ font-size: 0.875rem; font-weight: 700; line-height: 1.375rem; margin-top: 0.3125rem; }
    .intro .img-box { position: static; }

    .type { padding: 3.75rem 0; }
    .type ul { margin-top: 1.25rem; }
    .type ul li { width: 8.375rem; }
    .type ul li img { height: auto; }
    .type ul li + li { margin-left: 0.8125rem; }
    .type ul li p { font-size: 0.875rem; line-height: 1.5rem; }


    .fn { background: none; padding: 0; }
    .fn ul { margin-top: 1.25rem; display: block; }
    .fn ul li { width: 100%; }
    .fn ul li + li { margin-left: 0; margin-top: 1.25rem; }
    .fn ul li p { font-size: 0.875rem; line-height: 1.375rem; margin-top: 0.3125rem; }
    

    .parts { padding: 3.75rem 0; }
    .parts .parts-img { display: block; }
    .parts .parts-img .door { width: 9.625rem; margin: 0 auto; }
    .parts .parts-img .part { margin-left: 0; width: 100%; justify-content: space-between; margin-top: 2.5rem; }
    .parts .parts-img .part li { width: 9.625rem; }
    .parts .parts-img .part li + li { margin-left: 0; }
    .parts .parts-img .part li p { font-size: 0.875rem; line-height: 1.375rem; padding-left: 1.5625rem; margin-bottom: 0.625rem; }
    .parts .parts-img .part li p:before { width: 1rem; height: 1rem; }
    .parts .parts-img .part li:nth-of-type(3), 
    .parts .parts-img .part li:nth-of-type(4),
    .parts .parts-img .part li:nth-of-type(5) { margin-top: 1.25rem; }
    .parts .parts-img .part li:nth-of-type(5) { width: 100%; }

    .btn { margin-top: 2.5rem; }
    
    .type .big-title,
    .fn .big-title,
    .parts .big-title { font-size: 1.125rem; line-height: 1.625rem; }

    .type .small-title,
    .fn .small-title,
    .parts .small-title { font-size: 0.875rem; line-height: 1.375rem; }
}