.main-title-list:hover:after ,.main-title-list.active:after {
    width: 100%;
}

.warranty-box{

    width: 100%;

    position: relative;

    display: block;

    min-height: 100vh;

    box-sizing: border-box;

    padding: 70px 0;

}

.warranty-all-box{

    width: 1200px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    font-size: 0;

    box-sizing: border-box;

    padding: 80px 0;

}

.warranty-main_img-box{

    margin-top: 60px;

}

.warranty-main_img{

    width: 100%;

    height: 600px;

    display: block;

}

.warranty-info-box{

    width: 800px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 20px;

    background-color: rgba(250, 240, 208, 0.8);

    position: relative;

    top: -105px;

}

.warranty-info{

    width: 100%;

    display: block;

    background-color: #fff;

    text-align: center;

    box-sizing: border-box;

    padding: 0 20px;

    padding-top: 45px;

    padding-bottom: 40px;

}

.warranty-info-title{

    font-size: 18px;

    color: #000;

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.06em;

    margin-top: 40px;

    margin-bottom: 20px;

}

.warranty-info-text{

    font-size: 18px;

    color: #555;

    letter-spacing: 0.06em;

    line-height: 40px;

}



.warranty-process-h3{

    font-size: 24px;

    color: #000;

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.06em;

    margin-bottom: 15px;

}



.warranty-process-info-box{

    box-sizing: border-box;

    position: relative;

    margin: 80px 0;

}

.warranty-process-info-box::before{

    content: '';

    width: 1px;

    height: 100%;

    position: absolute;

    top: 40px;

    left: 50px;

    background-color: #d1d1d1;

    z-index: 0;

}

.warranty-process-info{

    margin-top: 50px;

    position: relative;

    z-index: 1;

}

.warranty-process-info:first-child{

    margin-top: 0;

}

.warranty-process-info-number-box{

    width: 100px;

    text-align: center;

    display: inline-block;

    vertical-align: top;

}

.warranty-process-info-number{

    width: 50px;

    display: inline-block;

    font-size: 20px;

    border-radius: 50%;

    background-color: #a62a32;

}

.warranty-process-info-number span{

    font-family: 'roboto';

    font-weight: 700;

    font-style: italic;

    color: #fff;

    letter-spacing: 0.06em;

    line-height: 50px;

    padding-left: 0.06em;

}

.warranty-process-info-right-box{

    width: calc(100% - 100px);

    display: inline-block;

    vertical-align: top;

}

.warranty-process-info-name{

    font-size: 22px;

    color: #000;

    font-family: "Noto Sans TC";

    font-weight: 700;

    letter-spacing: 0.06em;

    line-height: 50px;

    margin-bottom: 20px;

}

.warranty-process-info-img{

    width: 360px;

    height: calc((180/260) * 360px);

    display: inline-block;

    vertical-align: top;

    overflow: hidden;

}

.warranty-process-info-text{

    width: calc(100% - 380px);

    box-sizing: border-box;

    margin: 15px 0;

    margin-left: 20px;

    font-size: 18px;

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-inline-box;

    -webkit-line-clamp: 6;

    -webkit-box-orient: vertical;

    color: #555;

    letter-spacing: 0.06em;

    line-height: 2;

}



.warranty-service-h3{

    width: 100%;

    display: block;

    background-color: #f5f5f5;

    font-size: 24px;

    line-height: 60px;

    color: #000;

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.06em;

    text-align: center;

}

.warranty-service-info-box{

    width: 1000px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 50px 0;

}

.warranty-service-info-img{

    text-align: center;

}

.warranty-service-edit-box{

    font-size: 16px;

    color: #555;

    line-height: 2;

    letter-spacing: 0.06em;

    margin-top: 80px;

}


.warranty-certification-info-box .warranty-process-info-number-box,
.warranty-certification-info-box.warranty-process-info-box::before{
    display: none;
}
.warranty-certification-info-box .warranty-process-info-img{
    height: 360px;
}
.warranty-certification-info-box .warranty-process-info-right-box{
    width: 100%;
}






@media only screen and (max-width: 1200px){

    .warranty-all-box{

        width: 1000px;

    }

    .warranty-main_img{

        height: calc((600 / 1200) * 1000px);

    }

}

@media only screen and (max-width: 1000px){

    .warranty-box{

        padding: 64px 0;

    }

    .warranty-all-box{

        width: 750px;

    }

    .warranty-main_img{

        height: calc((600 / 1200) * 750px);

    }

    .warranty-info-box{

        width: 650px;

    }

}

@media only screen and (max-width: 750px){

    .warranty-all-box{

        width: 95%;

        padding: 40px 0;

    }

    .warranty-main_img{

        height: calc((600 / 1200) * 95vw);

    }

    .warranty-main_img-box{

        margin-top: 40px;

    }

    .warranty-info-box{

        width: 100%;

        top: 0;

        margin: 20px 0;

    }

    .warranty-info{

        text-align: left;

    }

    .warranty-info-img{

        text-align: center;

    }

    .warranty-process-info-box{

        margin: 40px 0;

    }

    .warranty-process-info-text{

        width: 100%;

        margin: 0;

        margin-top: 10px;

        display: block;

    }

    .warranty-service-h3{

        font-size: 20px;

    }

}

@media only screen and (max-width: 550px){

    .warranty-box{

        padding: 50px 0;

    }

    .warranty-all-box{

        width: 95%;

        padding: 20px 0;

    }

    .warranty-info{

        padding: 20px 10px;

    }

    .warranty-main_img-box{

        margin-top: 20px;

    }

    .warranty-info-title{

        font-size: 14px;

        margin-top: 20px;

        margin-bottom: 10px;

    }

    .warranty-info-text{

        font-size: 14px;

        line-height: 1.6;

    }

    .warranty-info-box{

        padding: 15px ;

    }

    .warranty-process-h3{

        font-size: 18px;

    }

    .warranty-process-info-number-box{

        width: 40px;

    }

    .warranty-process-info-number{

        width: 30px;

        font-size: 14px;

    }

    .warranty-process-info-number span{

        line-height: 30px;

    }

    .warranty-process-info-box::before{

        left: 20px;

    }

    .warranty-process-info-img{

        width: 100%;

        height: calc((180 / 260) * (95vw - 40px));

    }

    .warranty-process-info-name{

        font-size: 16px;

        line-height: 30px;

        margin-bottom: 10px;

    }

    .warranty-process-info-right-box{

        width: calc(100% - 40px);

    }

    .warranty-process-info-text{

        font-size: 14px;

    }

    .warranty-service-h3{

        font-size: 18px;

        line-height: 40px;

    }

    .warranty-service-edit-box{

        font-size: 14px;

        line-height: 1.8;

    }

    .warranty-certification-info-box .warranty-process-info-img{
        height: calc(95vw - 40px);
    }
}









/*animation*/

/*<-------------動畫------------->*/

@media only screen and (min-width: 1001px){

    .warranty-main_img-box,

    .warranty-info-box,

    .warranty-process-info,

    .warranty-service-h3,

    .warranty-service-info-img,

    .warranty-service-edit-box{

        opacity: 0;

    }

    .warranty-main_img-box.anima{

        animation: fadeInDown 1s ease 0s 1 both;

    }

    .warranty-info-box.anima{

        animation: fadeInUp 1s ease 0s 1 both;

    }

    /* .warranty-process-box.anima .warranty-process-h3{

        animation: fadeInUp 1s ease 0s 1 both;

    }

    .warranty-process-box.anima .warranty-process-info-box::before{

        transform-origin: 50% 0%;

        animation: line2 1s ease 0s 1 both;

    } */

    .warranty-process-info.anima{

        animation: fadeInUp 1s ease 0s 1 both;

    }

    .warranty-service-box.anima .warranty-service-h3{

        animation: fade 1s ease 0s 1 both;

    }

    .warranty-service-box.anima .warranty-service-info-img{

        animation: fadeInDown 1s ease 0s 1 both;

    }

    .warranty-service-box.anima .warranty-service-edit-box{

        animation: fadeInUp 1s ease 0s 1 both;

    }

}