@charset "UTF-8";

/********** 자주하는 질문 페이지 **********/
button {
    padding: 0; margin: 0; border: 0; background: transparent; font-family: 'Noto Sans KR', Dotum, Helvetica, AppleGothic, Sans-serif;
}

#container {
    padding:133px 0 95px; background-color:#F2F4F6;
}

#notice_wrap {
    width:1045px; margin:0 auto; text-align:center; font-family: 'Noto Sans KR', Dotum, Helvetica, AppleGothic, Sans-serif;
}

#notice_wrap .notice_tit {
    color:#101010; font-size:39px; font-weight:400; letter-spacing:-1.17px; line-height:45px; margin-bottom:57px;
}

#notice_wrap .notice_list_wrap .notice_list_row {
    border:1px solid #D3D3D3; background-color:#fff; margin-bottom:8px;
}
#notice_wrap .notice_list_wrap .notice_list_row:last-child {
    margin-bottom:0;
}
#notice_wrap .notice_list_row .notice_list_tit_wrap {
    display: flex; justify-content: space-between; align-items: center; padding:20px 30px; position:relative;
}

#notice_wrap .notice_list_row .notice_list_tit_wrap .left_box {
    display: flex; align-items: center; width: calc(100% - 39px);
}

#notice_wrap .notice_list_row .notice_list_tit_wrap .right_box {
    width: 100px; text-align: right;
}

#notice_wrap .notice_list_row .notice_list_tit_wrap .notice_important_name {
    display: flex; justify-content: center; align-items: center; width: 77px; height: 30px; font-size: 14px; font-weight: 500; text-align: center; border-radius: 5px; margin-right: 35px;
}

#notice_wrap .notice_list_row .notice_list_tit_wrap .notice_list_tit_name {
    display: flex; align-items: center; color: #101010; font-size: 17px; font-weight: 400; letter-spacing: -0.85px;
}
#notice_wrap .notice_list_row .notice_list_tit_wrap .notice_date {
    color: #8D8D8D;
}
#notice_wrap .notice_list_row .notice_list_tit_wrap .notice_list_tit_arrow {
    display: block; width:29px; height:15px; text-indent:-99999px; background:url('/img/path_2.png') 50% no-repeat; background-size:29px 15px; transition:all 0.3s; float:right; margin-top:5px;
}
#notice_wrap .notice_list_row .notice_list_tit_wrap .right_box.on .notice_list_tit_arrow {
    transform: rotate(180deg); -webkit-transform: rotate(180deg);
}

#notice_wrap .notice_list_row .notice_list_contents_wrap {
    display:none; padding:16px 30px; color:#606060; font-size:17px; font-weight:400; letter-spacing:-0.85px; line-height:26px; border-top:1px solid #D3D3D3; text-align:justify;
}

#notice_wrap .notice_list_row .notice_list_contents_wrap .notice_link_btn {
    color:#29C4BE; padding-right:25px; position:relative;
}
#notice_wrap .notice_list_row .notice_list_contents_wrap .notice_link_btn::after {
    content:'?'; display:block; clear:both; width:20px; height:20px; position:absolute; top:50%; right:1px; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); border:1px solid #101010; border-radius:50%; box-sizing:border-box; padding-left:4px; line-height:1.0; color:#101010;
}

div.notice_list_contents_wrap img {
    max-width: 980px;
}



@media screen and (max-width: 1050px) {
    #container {
        padding: 83px 0 61px; background-color: #FFF;
    }

    #notice_wrap {
        width: auto; margin: 0;
    }

    #notice_wrap .notice_tit {
        display: none;
    }

    #notice_wrap .notice_list_wrap {
        margin: 0 26px;
    }

    #notice_wrap .notice_list_wrap .notice_list_row {
        border: 0; border-bottom: 1px solid #D7DCE0; margin-bottom: 0;
    }

    #notice_wrap .notice_list_wrap .notice_list_row:first-child {
        border-top: 1px solid #D7DCE0;
    }

    #notice_wrap .notice_list_row .notice_list_tit_wrap {
        padding: 18px 0;
    }

    #notice_wrap .notice_list_row .notice_list_tit_wrap .right_box {
        width: 130x; font-size: 13px;
    }

    #notice_wrap .notice_list_row .notice_list_tit_wrap .notice_list_tit_arrow {
        width: 17px; height: 9px; background: url('/img/notice/m_arrow.png') 50% no-repeat; background-size: 17px 9px;
    }

    #notice_wrap .notice_list_row .notice_list_tit_wrap .notice_important_name {
        width: 58px; height: 22px; font-size: 10px; font-weight: 400; margin-right: 11px;
    }

    #notice_wrap .notice_list_row .notice_list_tit_wrap .notice_list_tit_name {
        width: calc(100% - 69px); font-size: 13px; letter-spacing: -0.65px;
    }

    #notice_wrap .notice_list_row .notice_list_contents_wrap {
        border-top: 0; padding: 0 0 18px 0px; font-size: 13px; letter-spacing: -0.65px;
    }

    div.notice_list_contents_wrap img {
        max-width: 80vw;
    }

    .no_mobile {
        display: none;
    }
}

/**** 카테고리별 css ****/
/* 중요공지 */
#notice_wrap .notice_list_row .notice_list_tit_wrap .notice_important_name.important {background-color:#29C4BE; color:#FFFFFF;}

/* 일반공지 */
#notice_wrap .notice_list_row .notice_list_tit_wrap .notice_important_name .notice_id {color:#8D8D8D;}
/**** 카테고리별 css END ****/
/********** 자주하는 질문 페이지 END **********/

#notice_list_paging_wrap {
    display: flex; justify-content: center; align-items: center; margin-bottom: 100px; font-family: "Pretendard", sans-serif; padding-top: 50px;
}

#notice_list_paging_wrap .arrow_btn {
    display: flex; width: 20px; height: 20px; background-color: transparent; background-position: 50%; background-size: 10px 10px; background-repeat: no-repeat; text-indent: -99999px; cursor: pointer;
}

#notice_list_paging_wrap .arrow_btn.first {
    background-image: url('/img/icon_first.png'); margin-right: 20px;
}
#notice_list_paging_wrap .arrow_btn.prev {
    background-image: url('/img/icon_prev.png');
}
#notice_list_paging_wrap .arrow_btn.next {
    background-image: url('/img/icon_next.png');
}
#notice_list_paging_wrap .arrow_btn.last {
    background-image: url('/img/icon_last.png'); margin-left: 20px;
}

#notice_list_paging_wrap .paging_btn_wrap {
    display: flex; align-items: center; padding: 0 15px;
}

#notice_list_paging_wrap .paging_btn_wrap .number_btn {
    display: flex; justify-content: center; align-items: center; padding: 5px 10px; font-family: "Pretendard", sans-serif; color: #AAAAAA; font-size: 15px; font-weight: 400; margin-right: 20px; background: transparent; cursor: pointer;
}

#notice_list_paging_wrap .paging_btn_wrap .number_btn.on {
    color: #FFFFFF; background-color: #29C4BE; font-weight: 700; border-radius: 100%; width:40px; height: 40px;
}

#notice_list_paging_wrap .paging_btn_wrap .number_btn:last-child {
    margin-right: 0;
}

@media screen and (max-width: 1050px) {
    #notice_list_paging_wrap .arrow_btn.first {
        margin-right: 10px;
    }

    #notice_list_paging_wrap .arrow_btn.last {
        margin-left: 10px;
    }

    #notice_list_paging_wrap .paging_btn_wrap {
        padding: 0 10px;
    }

    #notice_list_paging_wrap .paging_btn_wrap .number_btn {
        margin-right: 10px;
    }
}