@charset "utf-8";

/* 서브페이지 공통 요소 */

/* intro */
.intro{
    width: 100%;
    height: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 70% center;
    padding: 0;
}
.intro h5{
    font-family: "roboto", sans-serif;
    font-weight: 300;
    letter-spacing: 0.06em;
    margin-top: 75px;
    color: #D9D9D9;
}


/* worry */ 
.worry{
    padding-bottom: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.worry .boxs{
    width: 100%;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}
.worry .boxs>div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.worry .boxs>div.r_p{
    flex-direction: row-reverse;
    align-items: flex-end;
}
.worry .boxs>div img{
    width: 13%;
    max-width: 92px;
    object-fit: contain;
}
.worry .boxs>div .bubble{
    flex: 1;
    background-image: url(../img/bubble1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 3%;
}
.worry .boxs>div.r_p .bubble{
    background-image: url(../img/bubble2.png);
    padding-left: 0;
    padding-right: 3%;
}
.worry .boxs>div .bubble h5{
    font-weight: 400;
    color: #555;
    padding: 3.8rem 0;
}
.worry hr{
    height: 14rem;
    border: 0;
    border-left: 1px solid #d9d9d9;
    margin-top: 10rem;
}


/* main */
main{
    padding-bottom: 0;
}
main .content_card{
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid #D9D9D9;
    border-radius: 2.4rem;
    overflow: hidden;
}
main .content_card>img{
    width: 42.37%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
main .content_card .text_box{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
main .content_card .text_box .tit{
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    text-wrap: nowrap;
}
main .content_card .text_box .tit p{
    margin-left: 1rem;
    color: #A9A9A9;
}
main .content_card .text_box p{
    color: #555;
}
main .content_card .text_box p:nth-of-type(2){
    margin-top: 1.2rem;
}
main .content_card .text_box small{
    color: #A9A9A9;
}
main .content_card .text_box small:first-of-type{
    margin-top: 4rem;
}



@media (max-width: 1440px) {
    main .content_card.st2{ /* st2는 1440px에서 세로 정렬*/
        width: 85%;
        flex-direction: column;
        justify-content: flex-start;
    }
    main .content_card.st2 img{
        width: 100%;
        height: auto;
        max-height: 400px;
    }
    main .content_card.st1 .text_box p br{
        display: none;
    }
}

@media (max-width: 1024px) {
    main .content_card.st1{ /* st1는 1024px에서 세로 정렬*/
        width: 85%;
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
    }
    main .content_card.st1 img{
        width: 100%;
        height: auto;
        max-height: 400px;
    }
    main .content_card.st2 .text_box p br{
        display: none;
    }
}

@media (max-width: 768px) {
    .intro h5{
        margin-top: 65px;
    }
    .worry .boxs>div .bubble h5{
        font-size: 2.1rem;
        line-height: 3.36rem;
        padding: 3.3rem 0;
    }
    main .content_card.st1, main .content_card.st2{
        width: 95%;
    }
    main .content_card.st1 img, main .content_card.st2 img{
        max-height: 340px;
    }
}

@media (max-width: 480px) {
     .intro h5{
        font-size: 16px;
        line-height: 26.4px;
    }
    .intro h2{
        font-size: 3.9rem;
        line-height: 5.9rem;
    } 
    .worry{
        padding: 10rem 0;
    }
    .worry .boxs{
        gap: 4rem;
    }
    .worry .boxs>div img{
        display: none;
    }
    main .content_card.st1, main .content_card.st2{
        width: 100%;
    }
    main .content_card.st1 img, main .content_card.st2 img{
        max-height: 240px;
    }
    main .content_card .text_box small:first-of-type{
        margin-bottom: 5px;
    }
}