﻿


h3,p,span{
    word-break: keep-all;
}

/*설정 초기화*/
.wrap>div{
    max-width: unset;
    padding: 0;
}

.page_tit, .b_scro, .qna, .faq, .other, .download{
    padding: 0 1.5rem;
    width: 1000px;
    margin: 0 auto;
}

@media (max-width:1200px) {
    
.page_tit, .b_scro, .qna, .faq, .other, .download{
        width: 100%;
    }

}


.wrap>div>div{
    margin-bottom: 4rem;
}

@media (max-width:768px) {

    .wrap>div>div{
    margin-bottom: 3rem;
}

}



.page_tit{
    margin-bottom: 3rem;
}


/*탭메뉴*/
.wrap div .b_scro {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 3rem;
}
@media (max-width:768px) {
.wrap div .b_scro {
    margin-bottom: 2rem;
}
}
.b_scro .opt_obj input[type="radio"] + span:hover{
    background: #000;
    color: #fff;
    transition: all 0.3s ease;
}
/*검색창*/
.search_wrap{
    width: 100%;
    background: #F9F9F9;
    text-align: center;
    padding: 4.5rem 0;
}

.search_wrap h3{
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto;
    margin-bottom: 2rem;
    width: 1000px;
    padding: 0 1.5rem;
}

.searchbox{
    width: 70%;
    height: 52px;
    margin: 0 auto;
    column-gap: 1rem;
    width: 750px;
    padding: 0 1.5rem;
}
.search_board{
    box-sizing: border-box;
    width: 100%;
    height:100%;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #E2E7EE;
}
.searchon{
    position: unset;
    width: 40%;
    height: 52px;
    background: #000;
    color: #fff;
    border-radius: 15px;
    cursor:pointer;
}



@media (max-width:1200px) {

    .search_wrap h3,
    .searchbox {
        width: 100%;
    }

}

@media (max-width:580px) {

    .search_board,
    .searchon{
        height: 48px;
    }

}





/*자주묻는질문*/
.faq_tit{
    font-weight: 700;
    font-size: 1.25rem;
}
.qna>div{
    padding: 0 0.5rem;
    padding-bottom: 1rem;
}

.qna>div>div{
    justify-content: flex-start;
    column-gap: 0.8rem;
}

.view{
    color: #9C9C9C;
    font-weight: 500;
    display: flex;
    flex: 1 1 auto;
    flex-shrink: 0; /*너비 안줄어들게*/
}

@media (max-width:580px){

    .qna>div>div img{
        height: 25px;
    }

    .qna>div>div h3{
        font-size: 1.13rem;
    }

    .view{
        font-size: 0.87rem;
    }

}




/*내용*/
.noti{
    height: auto;
    max-height: 85px;
     border-bottom: 1px solid #E2E7EE;
}
.notiopen{
    max-height: 500px;
    transition: max-height .8s linear;
}
.n_tit .c_arrow{
    margin-left: 50px;
}
.noti h3 img{
    width:40px;
    margin-right:15px;
}
.n_box{
    padding: 1.5rem 1rem;
}
.n_box>div:first-child,.n_pro>div:first-child{
    width: 45px;
}
.noti>div>div:first-child h3{
    font-size: 1.63rem;
    font-weight: 600;
}
.n_box>div:last-child{
    position: relative;
    left: 0;
    margin-left: auto;
}
.n_tit p{
    font-size:1rem;
    line-height: 155%;
}
.n_tit p span{
    line-height: 155%;
    font-size: 1rem;
}
.n_tit:nth-of-type(2)>h3{
    font-size:1.13rem;
}


.n_pro{
    width: 100%;
    min-height: 85px;
    height: auto;
    text-align: start;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    margin-bottom: 1rem;
    color: #353535;
    background: var(--bg-color);
    overflow: auto;
}

.n_pro .n_tit h3{
    color: var(--main-color);
    height: 180px;
}

.n_pro>div:nth-child(2){
    width: calc(100% - 23px);
    max-height: 220px;
}
.n_pro>div:nth-child(2)>h3 {
    font-weight:lighter;
}
.morebtn{
    border-radius: 50px;
    border: 1px solid #58A9FF;
    background: #58A9FF;
    font-size:0.75rem;
    color:white;
    width:auto;
    height:auto;
    padding: 3px 10px;
    margin-left: 10px;
}



/*고객센터*/
/*공통*/
.customer .flex,
.contact .flex{
    justify-content: unset;
    margin-bottom: 0.5rem;
}

.customer,
.contact{
    width: 49%;
}

.customer .flex p,
.contact .flex p{
    font-weight: 700;
    font-size: 1.25rem;
}




.faq{
    align-items: flex-start;
    column-gap: 1.5rem;
    margin-bottom: 1.5rem !important;
}
.faq .flex img{
    height: 40px;
}

.box{
    border: 1px solid #E4E4E4;
    border-radius: 25px;
    padding: 3rem;
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box_con:first-of-type{
    margin-bottom: 1.5rem;
}

.box_con p{
    color: var(--main-color);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
}

.box_con span{
    color: var(--g-color);
    font-weight: 500;
    line-height: 140%;
}

@media (max-width:984px) {
    .box{
        height: 250px;
    }
}

@media (max-width:768px) {
    .box{
        padding: 2rem;
        height: 220px;
    }
}


@media (max-width:580px){

    .faq{
        flex-direction: column;
        gap: 1.5rem;
    }

    .customer,
    .contact {
        width: 100%;
    }

    .box{
        height: auto;
        text-align: center;
    }

    .customer .flex img,
    .contact .flex img{
        height: 32px;
    }

    .customer .flex p,
    .contact .flex p{
        font-size: 1.13rem;
    }

}





.contact{
    text-align: center;
}

.headline{
    color: #484848 !important;
    font-weight: 500 !important;
    font-size: 1.31rem !important;
    margin-bottom: 0 !important;
}


@media (max-width:580px) {

    .headline{
        font-size: 1.19rem !important;
    }

}



/*고객센터 하단*/
.other>div{
    border: 1px solid #E4E4E4;
    border-radius: 25px;
    padding: 3rem;
}

.other h3{
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.button{
    column-gap: 1rem;
}

.other button{
    border-radius: 25px;
    background: #F5F5F5;
    padding: 0.6rem 1.5rem;
    transition: all 0.3s ease-in-out;
}

.other button:hover{
    background: var(--main-color);
    transition: all 0.3s ease-in-out;
}

.other button p{
    font-size: 1rem;
}

.other button:hover p{
    color: #fff;
}

.other button:hover > img{
    content: url(/common/img/company/w_next.svg);
}


/*버튼 별 이미지 변경*/
.chat:hover div img{
    content: url(/common/img/company/w_chat.svg);
}

.consult:hover div img{
    content: url(/common/img/company/w_consult.svg);
}

.email:hover div img{
    content: url(/common/img/company/w_email.svg);
}


.other button>div{
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
}




@media (max-width:1200px) {

    .other button p{
        font-size: 0.94rem;
    }
    
}


@media (max-width:984px) {

    .button{
        display: block;
    }

    .other button p{
        font-size: 1rem;
    }

    .chat,
    .consult{
        width: 100%;
        margin-bottom: 1rem;
    }

    .email{
        width: 100%;
    }


}


@media (max-width:580px) {

    .other>div{
        padding: 2rem;
    }

    .other h3{
        font-size: 1.13rem;
    }

}


@media (max-width:480px) {

    .other button{
        display: block!important;
        padding: 1rem;
    }

    .other button>div{
        justify-content: center;
        margin-bottom: 0.2rem;
    }

    .other button>img{
        display: none;
    }

}



/*서식지 다운*/
.download .dl{
    justify-content: flex-start;
    padding-bottom: 0.5rem;
}

.download .dl p{
    font-size: 1.25rem;
    font-weight: 700;
}

.txt_doc{
    padding: 2rem 0.5rem;
    column-gap: 1rem;
}

.txt_doc span{
    color: var(--g-color);
}

.doc_download{
    background: #EEEEEE;
    font-weight: 500;
    display: flex;
    flex-shrink: 0;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    color: #222;
    transition: all 0.3s ease-in-out;
}

.doc_download:hover{
    background: var(--main-color);
    color: #fff;
    transition: all 0.3s ease-in-out;
}


@media (max-width:580px) {

    .download .dl img{
        height: 32px;
    }

    .download .dl p{
        font-size: 1.13rem;
    }

}

@media (max-width:480px) {

    .txt_doc{
        flex-direction: column;
        gap: 1rem;
    }

    .doc_download{
        width: 85%;
        justify-content: center;
    }

}