.intro { margin: 160px 0 60px 0; }
.intro p { font-size: 18px; line-height: 26px; color: #767676; margin-top: 16px; }


.collection { height: 937px; position: relative; }
.collection .collection_image { position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: url('../../../../images/product/automatic/collections/auto-l-b-l-w.jpg') no-repeat center / cover; z-index: -1; }
.collection .inner-container { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.collection .inner-container > div { width: 50%; }
.collection .inner-container > div h3 { font-size: 36px; line-height: 48px; padding-bottom: 16px; border-bottom: 1px solid #505050; font-weight: 700; }
.collection .inner-container > div p { font-size: 18px; line-height: 26px; color: #767676; padding-top: 16px; }

.collection-event { margin-top: 32px; }
.collection-event h4 { font-size: 26px; line-height: 36px; }
.collection-event .btn-box + .btn-box { margin-top: 24px; }
.collection-event .type .btns { display: flex; margin-top: 8px; }
.collection-event .type .btn { border: 2px solid #E1E1E4; margin: 0; display: block; font-size: 18px; line-height: 26px; color: #767676; cursor: pointer; }
.collection-event .type .btn.active { border: 2px solid var(--main); color: var(--main); }
.collection-event .type .btn + .btn { margin-left: 40px; }

.collection-event .type .btn:disabled {
    border: 2px solid #E1E1E4;
    color: #767676;
}


.lock { margin: 160px 0; }
.lock ul { display: flex; justify-content: center; margin-top: 60px; }
.lock ul li + li { margin-left: 40px; }
.lock ul li p { margin-top: 16px; font-size: 18px; line-height: 26px; color: #767676; }


.ass-lock { background: #F8F8F8; padding: 120px 0; }
.ass-lock .inner-container { display: flex; justify-content: center; align-items: end; }
.ass-lock .inner-container .right { margin-left: 40px; }
.ass-lock .inner-container .right h3 { font-size: 30px; line-height: 42px; }
.ass-lock .inner-container .right h3 strong { font-weight: 700; }
.ass-lock .inner-container .right p { font-size: 18px; line-height: 28px; color: #767676; margin: 16px 0 32px 0; }
.ass-lock .inner-container .right .img-box { display: flex; }
.ass-lock .inner-container .right .img-box div + div { margin-left: 20px; }


.handle { margin: 160px 0; }
.handle .icons { display: flex; justify-content: center; margin-top: 70px; }
.handle .icons li img { width: 80px; }
.handle .icons li + li { margin-left: 126px; }
.handle .icons li p { font-size: 20px; line-height: 30px; margin-top: 16px; font-weight: 700; }
.handle ol { display: flex; justify-content: center; margin-top: 60px; }
.handle ol li,
.lock ul li { width: 43.75rem; }
.handle ol li + li { margin-left: 40px; }
.handle ol li p { font-size: 18px; line-height: 26px; color: #767676; margin-top: 16px; }

.part { display: flex; width: 946px; margin: 60px auto 0 auto; flex-wrap: wrap; justify-content: space-between; }
.part li { text-align: center; }
.part li:nth-of-type(n + 5):nth-of-type(-n + 9) { margin-top: 60px; }
.part li p { font-size: 14px; line-height: 22px; }

.anti { margin-top: 7.5rem;}
.anti ul { display: flex; align-items: flex-end; margin: 60px 0 200px 0; }
.anti ul h3 { font-size: 30px; line-height: 42px; }
.anti ul h3 strong { font-weight: 700; }
.anti ul p { font-size: 18px; line-height: 26px; color: #767676; margin: 16px 0 42px 0; }
.anti ul li { width: 50%; }
.anti ul li + li { margin-left: 40px; }

@media (max-width: 1440px){
    .intro { margin: 10rem 0 3.75rem 0; }
    .intro p { font-size: 1.125rem; line-height: 1.625rem; margin-top: 1rem; }


    .collection { height: 58.5625rem; }
    .collection .inner-container > div h3 { font-size: 2.25rem; line-height: 3rem; padding-bottom: 1rem; }
    .collection .inner-container > div p { font-size: 1.125rem; line-height: 1.625rem; padding-top: 1rem; }

    .collection-event { margin-top: 2rem; }
    .collection-event h4 { font-size: 1.625rem; line-height: 2.25rem; }
    .collection-event .btn-box + .btn-box { margin-top: 1.5rem; }
    .collection-event .type .btns { margin-top: 0.5rem; }
    .collection-event .type .btn { font-size: 1.125rem; line-height: 1.625rem; }
    .collection-event .type .btn + .btn { margin-left: 2.5rem; }

    .lock { margin: 10rem 0; }
    .lock ul { margin-top: 3.75rem; }
    .lock ul li + li { margin-left: 2.5rem; }
    .lock ul li p { margin-top: 1rem; font-size: 1.125rem; line-height: 1.625rem; }


    .ass-lock {padding: 7.5rem 0; }
    .ass-lock .inner-container .right { margin-left: 2.5rem; }
    .ass-lock .inner-container .right h3 { font-size: 1.875rem; line-height: 2.625rem; }
    .ass-lock .inner-container .right p { font-size: 1.125rem; line-height: 1.75rem; margin: 1rem 0 2rem 0; }
    .ass-lock .inner-container .right .img-box div + div { margin-left: 1.25rem; }


    .handle { margin: 10rem 0; }
    .handle .icons { display: flex; justify-content: center; margin-top: 4.375rem; }
    .handle .icons li img { width: 5rem; }
    .handle .icons li + li { margin-left: 7.875rem; }
    .handle .icons li p { font-size: 1.25rem; line-height: 1.875rem; margin-top: 1rem; }
    .handle ol { width: 95%; max-width: 1440px; margin: 3.75rem auto 0 auto; }
    .lock ul li { width: 95%; max-width: 1440px; margin: 1.25rem auto 0 auto; }


    .handle ol li + li { margin-left: 2.5rem; }
    .handle ol li p { font-size: 1.125rem; line-height: 1.625rem; margin-top: 1rem; }

    .part {width: 59.125rem; margin: 3.75rem auto 0 auto; }
    .part li:nth-of-type(n + 5):nth-of-type(-n + 9) { margin-top: 3.75rem; }
    .part li p { font-size: 0.875rem; line-height: 1.375rem; }

    .anti ul { margin: 3.75rem 0 12.5rem 0; }
    .anti ul h3 { font-size: 1.875rem; line-height: 2.625rem; }
    .anti ul p { font-size: 1.125rem; line-height: 1.625rem; margin: 1rem 0 2.625rem 0; }    
    .anti ul li + li { margin-left: 2.5rem; }
}


@media (max-width: 1024px){
    .inner-container { width: 100%; }
    .intro { margin: 3.75rem 0 0 0; padding: 0 1rem; }
    .intro p { font-size: 0.875rem; line-height: 1.375rem; margin-top: 0.3125rem; }
    .intro p br { display: none; }
    .intro .title { margin-bottom: 1.25rem; }

    .handle .big-title,
    .parts .big-title,
    .lock .big-title,
    .anti .big-title { font-size: 1.125rem; line-height: 1.625rem; margin-top: 0; }

    .handle .small-title,
    .parts .small-title,
    .lock .small-title,
    .anti .small-title { font-size: 0.875rem; line-height: 1.375rem; }
    
    .collection { height: auto; }
    .collection .collection_image { position: relative; height: 23.6875rem; background-position: 7% center; }

    .collection .inner-container { display: block; margin-top: 1.25rem; }
    .collection .inner-container > div { width: 100%; }
    .collection .inner-container > div h3 { padding-bottom: 0.125rem; font-size: 1.125rem; line-height: 1.625rem; }
    .collection .inner-container > div p { padding-top: 0.125rem; font-size: 0.875rem; line-height: 1.375rem; }
    .collection-event { margin-top: 1.25rem; }
    .collection-event .type .btn { width: 9.625rem; height: 2.25rem; }
    .collection-event .type .btn + .btn { margin-left: 0; }
    .collection-event .type .btns { margin-top: 0.3125rem; justify-content: space-between; }
    .collection-event .type .handle-btns { flex-wrap: wrap; }
    .collection-event .type .handle-btns .btn:last-of-type { margin-top: 0.625rem; }
    .collection-event .btn-box + .btn-box { margin-top: 0.625rem;  }
    
    .lock { margin: 3.75rem 0 2.5rem 0; }
    .lock ul { display: block; margin-top: 1.25rem; }
    .lock ul li { width: 100%; }
    .lock ul li + li { margin-top: 1.25rem; margin-left: 0; }
    .lock ul li p { margin-top: 0.3125rem; font-size: 0.875rem; line-height: 1.375rem; }

    .ass-lock { padding: 2.5rem 0; }
    .ass-lock .inner-container { flex-direction: column-reverse; }
    .ass-lock .inner-container .right { margin-left: 0; text-align: center; }
    .ass-lock .inner-container .right h3 { font-size: 1.125rem; line-height: 1.625rem; }
    /* .ass-lock .inner-container .right h3 br, */
    .ass-lock .inner-container .right p br { display: none; }
    .ass-lock .inner-container .right p { font-size: 0.875rem; line-height: 1.375rem; margin: 0.3125rem 0 0 0; margin-bottom: 0.625rem; }
    .ass-lock .inner-container .right .img-box > div { width: 50%; }
    .ass-lock .inner-container .right .img-box div + div { margin-left: 0.1875rem; }
    .ass-lock .inner-container .left { width: 100%; margin-top: 0.1875rem; }
    
    .handle { margin: 3.75rem 0; }
    .handle .icons { margin-top: 1.25rem; }
    .handle .icons li + li { margin-left: 3.75rem; }
    .handle .icons li img { width: 3.125rem; }
    .handle ol { display: block; padding: 0 1rem; margin: 1.25rem 0 0 0; width: 100%; }
    .handle ol li { width: 100%; }
    .handle ol li p { font-size: 0.875rem; line-height: 1.375rem; margin: 0.3125rem 0 0 0; }
    .handle ol li + li { margin-left: 0; margin-top: 1.25rem; }

    .part { width: 100%; }
    .part li { width: 9.625rem; }
    .part li p { font-size: 0.875rem; line-height: 1.375rem; margin-top: 0.5rem; }


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



    .handle .icons {
        justify-content: space-between;
        padding: 0 1rem;
    }

    .handle .icons li p {
        text-align: center;
    }

    .handle .icons li {
        width: 6rem;
    }

    .handle .icons li img {
        margin: 0 auto;
    }

    .handle .icons li + li {
        margin-left: 0;
    }
}