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

    .pc_hide {
        display:none !important;
    }

    .mobile_show {
        display:none !important;
    }

    .tablet_show {
        display:none !important;
    }

    .pc_show {
    }

}

@media screen and (min-width:768px) and (max-width:1399px) {

    .tablet_hide {
        display:none !important;
    }

    .mobile_show {
        display:none !important;
    }

    .tablet_show {
    }

    .pc_show {
        display:none !important;
    }

}

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

    .mobile_hide {
        display:none !important;
    }

    .mobile_show {
    }

    .tablet_show {
        display:none !important;
    }

    .pc_show {
        display:none !important;
    }
}

/*input, textarea{*/
/*    outline: none;*/
/*}*/
/*input:focus, input:focus-visible,*/
/*button:focus, button:focus-visible{*/
/*    border: none;*/
/*    outline: none;*/
/*}*/


/*공용*/
.check_box{
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.check_box input{
    display: none;
}
.check_box .check_btn{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/res/home/publish/img/common/icon_check.svg");
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.check_box input:checked ~ .check_btn{
    background-image: url("/res/home/publish/img/common/icon_checked.svg");
}
.check_box .check_text{
    font-family: pretendard-medium;
    cursor: pointer;
    color: #5A5A5A;
    font-size: 14px;
    line-height: 20px;
}

.radio_box{
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.radio_box input{
    display: none;
}
.radio_box .radio_btn{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/res/home/publish/img/common/icon_circle_check.svg");
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.radio_box input:checked ~ .radio_btn{
    background-image: url("/res/home/publish/img/common/icon_circle_checked.svg");
}
.radio_box input:disabled:checked ~ .radio_btn{
    background-image: url("/res/home/publish/img/common/icon_circle_check_disabled.svg");
}
.radio_box .radio_text{
    font-family: pretendard-medium;
    cursor: pointer;
    color: #5A5A5A;
    font-size: 14px;
    line-height: 20px;
}
.btn-large-primary{
    border-color: #3283DC !important;
    background-color: #3283DC !important;
}
.common_text_list{
    display: flex;
    flex-direction: column;
}
.common_text_list > li{
    position: relative;
    font-family: pretendard-medium;
    color: #333333;
}
.common_text_list > li:after{
    content: "";
    position: absolute;
    background-color: #1A1A1A;
    border-radius: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
}
@media screen and (min-width:1400px) {
    .container{
        padding-bottom: 150px;
    }
    .common_text_list{
        gap: 8px;
    }
    .common_text_list > li{
        font-size: 18px;
        line-height: 28px;
        padding-left: 20px;
    }
    .common_text_list > li:after{
        left: 6px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .container{
        padding-bottom: 80px;
    }
    .common_text_list{
        gap: 4px;
    }
    .common_text_list > li{
        font-size: 16px;
        line-height: 24px;
        padding-left: 20px;
    }
    .common_text_list > li:after{
        top: 10px;
        left: 6px;
    }
}

@media screen and (max-width:767px) {
    .container{
        padding-bottom: 80px;
    }
    .common_text_list{
        gap: 4px;
    }
    .common_text_list > li{
        font-size: 16px;
        line-height: 24px;
        padding-left: 20px;
    }
    .common_text_list > li:after{
        top: 10px;
        left: 6px;
    }
}


/*header*/
#wrapper{
    position: relative;
}
.header{
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    border-bottom: none;
}
.header.type2{
    background-color: transparent;
}
.header.hover{
    background-color: white !important;
}

.header {
    border-bottom: 1px solid #E3E4E8;
}

.header.hover, .header.type2.hover{
    border-bottom: 2px solid #E3E4E8;
}

.header.type2 {
    border-bottom: 2px solid transparent;
}

/*.header.hover > .inner{*/
/*    border-bottom: 1px solid #E3E4E8;*/
/*}*/
/*.header:not(.type2) > .inner{*/
/*    border-bottom: 1px solid #E3E4E8;*/
/*}*/
.header > .inner .logo{
    background-image: url("/res/home/publish/img/common/logo.svg");
}
.header.type2 > .inner .logo{
    background-image: url("/res/home/publish/img/common/logo_white.svg");
}
.header.hover > .inner .logo{
    background-image: url("/res/home/publish/img/common/logo.svg") !important;
}

.header .btn_search{
    background-image: url("/res/home/publish/img/common/icon_search.svg");
}
.header .btn_mypage{
    background-image: url("/res/home/publish/img/common/icon_mypage.svg");
}
.header .btn_menu{
    background-image: url("/res/home/publish/img/common/icon_menu.svg");
}
.header.type2 .btn_search{
    background-image: url("/res/home/publish/img/common/icon_search_white.svg");
}
.header.type2 .btn_mypage{
    background-image: url("/res/home/publish/img/common/icon_mypage_white.svg");
}
.header.type2 .btn_menu{
    background-image: url("/res/home/publish/img/common/icon_menu_white.svg");
}
.header.hover .btn_search{
    background-image: url("/res/home/publish/img/common/icon_search.svg") !important;
}
.header.hover .btn_mypage{
    background-image: url("/res/home/publish/img/common/icon_mypage.svg") !important;
}
.header.hover .btn_menu{
    background-image: url("/res/home/publish/img/common/icon_menu.svg") !important;
}

.header .gnb_list > li{
    cursor: pointer;
    color: #1a1a1a;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.header.type2 .gnb_list > li{
    color: white;
}
.header.hover .gnb_list > li{
    color: #1a1a1a !important;
}
.header .gnb_list > li:hover{
    border-bottom: 2px solid #3283DC;
    border-top: 2px solid transparent;
}
.header .header_icon_box a{
    color: #333;
}
.header .header_icon_box a{
    background-size: cover;
}





.header > .inner{
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header > .inner .logo{
    margin-top: 0;
    float: none;
}
.header_box .gnb_list{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header_box .gnb_list li{
    font-family: pretendard-bold;
}
.header_icon_box{
    display: flex;
}
.header_icon_box > a{

}


.gnb_total_list{
    top:2px;
    position: relative;
    background-color: white;
    z-index: 1;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.14);
}
.gnb_total_list > .inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(10px, 5vw, 32px);
}
.depth1_list{
    display: flex;
    flex-direction: column;
}
.depth1_list .depth1_menu{
    text-align: center;
    font-family: pretendard-medium;
    border: 1px solid #C1C3C7;
    border-radius: 8px;
    color: #333;
    box-sizing: border-box;
}
.depth1_list .depth2_list{
    display: flex;
    flex-direction: column;
}
.depth1_list .depth2_list .depth2_menu{
    font-family: pretendard-medium;
    position: relative;
    cursor: pointer;
}
.depth1_list .depth2_list .depth2_menu:after{
    content: "";
    position: absolute;
    border-radius: 1px;
    background-color: #333;
}


.search_area{
    position: absolute;
    background-color: white;
    display: none;
    z-index: 2;
    width: 100%;
    left: 0;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.14);
}
.search_area > .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.search_box{
    box-sizing: border-box;
    border: 2px solid #446AD6;
    width: 100%;
}
.search_box > label {
    display: flex;
    width: 100%;
    align-items: center;
}
.search_input{
    font-family: pretendard-bold;
    border: none;
    padding: 0;
    width: 100%;
    color: #333;
    cursor: text;
}
.search_input::placeholder{
    color: #C1C3C7;
}
.search_btn_inner{
    background-size: cover;
    background-image: url("/res/home/publish/img/common/icon_search.svg");
    cursor: pointer;
}
.popular_word{
    display: flex;
    align-items: flex-start;
    width: 100%;
}
.popular_word .popular_title{
    font-family: pretendard-medium;
    color: black;
    flex-shrink: 0;
}
.popular_word .popular_word_list{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}
.popular_word .popular_word_list li{
    cursor: pointer;
    border: 1px solid #BBD9F5;
    background-color: #E7F3FF;
    color: #3060BB;
    font-family: pretendard-medium;
    box-sizing: border-box;
    border-radius: 8px;
}
@media screen and (min-width:1400px) {
    .inner, .container-inner{
        width: 1400px;
        max-width: 1400px;
    }
    .header{
        height: 100px;
    }
    .page1{
        padding-top: 100px;
    }
    .header > .inner{
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        max-width: 1920px;
        padding: 0 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header > .inner .logo{
        height: 40px;
        width: 236px;
    }
    .header_box .gnb_list{
        gap: 50px;
    }
    .header_box .gnb_list li{
        height: 100px;
        font-size: 20px;
        line-height: 28px;
    }
    .header_icon_box{
        gap: 16px;
    }
    .header_icon_box > a{
        width: 32px;
        height: 32px;
        font-size: 32px;
    }

    .gnb_total_list{
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .gnb_total_list.active{
        max-height: 700px;
    }
    .gnb_total_list > .inner{
        padding: 50px 0;
    }
    .depth1_list{

    }
    .depth1_list .depth1_menu{
        width: 220px;
        padding: 12px 0;
        font-size: 18px;
        line-height: 28px;
    }
    .depth1_list .depth1_menu:hover,
    .depth1_list .depth1_menu.hover{
        border: 1px solid #3283DC;
        background-color: #3283DC;
        color: white;
    }
    .depth1_list .depth2_list{
        /*gap: 12px;*/
        padding-top: 20px;
    }
    .depth1_list .depth2_list .depth2_menu{
        padding-left: 16px;
        font-size: 18px;
        line-height: 24px;
    }
    .depth1_list .depth2_list .depth2_menu:after{
        width: 4px;
        height: 4px;
        left: 4px;
        top: 10px;
    }
    .depth1_list .depth2_list .depth2_menu:hover{
        color: #3283DC;
    }
    .depth1_list .depth2_list .depth2_menu:hover:after{
        background-color: #3283DC;
    }

    .search_area{
        top: 100px;
        padding: 50px 0;
    }
    .search_area > .inner {
        width: 536px;
        gap: 24px;
    }
    .search_box{
        height: 72px;
        border-radius: 56px;
        padding: 20px 32px;
    }
    .search_box > label {

    }
    .search_input{
        font-size: 20px;
        height: 28px;
    }
    .search_btn_inner{
        width: 32px;
        height: 32px;
    }
    .popular_word{
        gap: 16px;
    }
    .popular_word .popular_title{
        font-size: 18px;
        line-height: 40px;
    }
    .popular_word .popular_word_list{

    }
    .popular_word .popular_word_list li{
        font-size: 16px;
        padding: 7px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1399px) {
    .header{
        height: 60px;
    }
    .page1{
        padding-top: 60px;
    }
    .header > .inner{
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header > .inner .logo{
        height: 22px;
        width: 130px;
        margin-left: 20px;
    }
    .header_box .gnb_list{
        display: none;
    }
    .header_box .gnb_list li{
        /*height: 100px;*/
        /*font-size: 20px;*/
        /*line-height: 28px;*/
    }
    .header_icon_box{
        margin-right: 24px;
        gap: 16px;
    }
    .header_icon_box > a{
        width: 24px;
        height: 24px;
    }

    .gnb_total_list{
        display: none;
        box-sizing: border-box;
        position: fixed;
        top: 206px;
        left: 0;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100 - 208px);
        border-top: 5px solid #EEEFF2;
        overflow-y: auto;
    }
    .gnb_total_list.on{
        display: block;
    }
    .gnb_total_list > .inner{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .depth1_list{
        width: 100%;
    }
    .depth1_list .depth1_menu{
        width: 100%;
        border: none;
        font-size: 16px;
        line-height: 24px;
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
        border-radius: 0;
    }
    .depth1_list .depth1_menu > img{
        transform: rotate(180deg);
        width: 24px;
        height: 24px;
    }
    .depth1_list .depth2_list{
        padding: 0px 24px;
        background-color: #F6F7FA;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .depth1_list.on .depth2_list{
        max-height: calc(var(--vh, 1vh) * 100 - 208px);
    }
    .depth1_list.on .depth1_menu > img{
        transform: rotate(0);
    }
    .depth1_list .depth2_list .depth2_menu:first-child{
        margin-top: 6px;
    }
    .depth1_list .depth2_list .depth2_menu:last-child{
        margin-bottom: 6px;
    }
    .depth1_list .depth2_list .depth2_menu{
        padding: 12px 0;
        font-size: 14px;
        line-height: 20px;
        padding-left: 16px;
    }
    .depth1_list .depth2_list .depth2_menu:after{
        width: 4px;
        height: 4px;
        left: 0;
        top: 20px;
    }

    .search_area{
        top: 60px;
        padding: 24px 0;
    }
    .search_area > .inner {
        gap: 20px;
    }
    .search_box{
        height: 58px;
        border-radius: 56px;
        padding: 10px 24px;
    }
    .search_box > label {

    }
    .search_input{
        font-size: 16px;
        height: 34px;
    }
    .search_btn_inner{
        width: 32px;
        height: 32px;
    }
    .popular_word{
        gap: 16px;
    }
    .popular_word .popular_title{
        font-size: 16px;
        line-height: 28px;
    }
    .popular_word .popular_word_list{

    }
    .popular_word .popular_word_list li{
        font-size: 14px;
        padding: 7px;
    }
}

@media screen and (max-width: 767px) {
    .header{
        height: 60px;
    }
    .page1{
        padding-top: 60px;
    }
    .header > .inner{
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header > .inner .logo{
        height: 22px;
        width: 130px;
        margin-left: 20px;
    }
    .header_box .gnb_list{
        display: none;
    }
    .header_box .gnb_list li{
        /*height: 100px;*/
        /*font-size: 20px;*/
        /*line-height: 28px;*/
    }
    .header_icon_box{
        margin-right: 24px;
        gap: 16px;
    }
    .header_icon_box > a{
        width: 24px;
        height: 24px;
    }

    .gnb_total_list{
        display: none;
        box-sizing: border-box;
        position: fixed;
        top: 206px;
        left: 0;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100 - 208px);
        border-top: 5px solid #EEEFF2;
        overflow-y: auto;
    }
    .gnb_total_list.on{
        display: block;
    }
    .gnb_total_list > .inner{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .depth1_list{
        width: 100%;
    }
    .depth1_list .depth1_menu{
        width: 100%;
        border: none;
        font-size: 16px;
        line-height: 24px;
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
        border-radius: 0;
    }
    .depth1_list .depth1_menu > img{
        transform: rotate(180deg);
        width: 24px;
        height: 24px;
    }
    .depth1_list .depth2_list{
        padding: 0px 24px;
        background-color: #F6F7FA;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .depth1_list.on .depth2_list{
        max-height: calc(var(--vh, 1vh) * 100 - 208px);
    }
    .depth1_list.on .depth1_menu > img{
        transform: rotate(0);
    }
    .depth1_list .depth2_list .depth2_menu:first-child{
        margin-top: 6px;
    }
    .depth1_list .depth2_list .depth2_menu:last-child{
        margin-bottom: 6px;
    }
    .depth1_list .depth2_list .depth2_menu{
        padding: 12px 0;
        font-size: 14px;
        line-height: 20px;
        padding-left: 16px;
    }
    .depth1_list .depth2_list .depth2_menu:after{
        width: 4px;
        height: 4px;
        left: 0;
        top: 20px;
    }

    .search_area{
        top: 60px;
        padding: 24px 0;
    }
    .search_area > .inner {
        gap: 20px;
    }
    .search_box{
        height: 58px;
        border-radius: 56px;
        padding: 10px 24px;
    }
    .search_box > label {

    }
    .search_input{
        font-size: 16px;
        height: 34px;
    }
    .search_btn_inner{
        width: 32px;
        height: 32px;
    }
    .popular_word{
        gap: 16px;
    }
    .popular_word .popular_title{
        font-size: 16px;
        line-height: 28px;
    }
    .popular_word .popular_word_list{

    }
    .popular_word .popular_word_list li{
        font-size: 14px;
        padding: 7px;
    }
}




/*footer*/
.footer{
    background-color: #EEEFF2;
}
.footer > .inner{
    position: relative;
}
.footer .logo{
    background-image: url("/res/home/publish/img/common/logo_gray.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.footer_link_list{
    display: flex;
    align-items: center;
}
.footer_link_list .footer_link{
    font-family: pretendard-medium;
    color: #5a5a5a;
    cursor: pointer;
}
.footer_info_list{
    display: flex;
}
.footer_info_list .footer_info{
    position: relative;
    display: flex;
    align-items: center;
}
.footer_info_list .footer_info:after{
    content: "";
    background-color: #5a5a5a;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
}


.footer_info_list .footer_info .title{
    font-family: pretendard-semibold;
    color: #5a5a5a;
}
.footer_info_list .footer_info .body{
    font-family: pretendard-medium;
    color: #5a5a5a;
}
.footer_family_link_list{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.footer_family_link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.footer_family_icon{
    cursor: pointer;
}
.footer_family_text{
    cursor: pointer;
    font-family: pretendard-medium;
    color: #5a5a5a;
}
.footer_copyright{
    font-family: pretendard-medium;
    color: #8A8A8A;
}
.family_site {
    position: absolute;
}
#familySite {
    border-radius: 8px;
    background-color: white;
    border: none;
    width: 100%;
}
.btn_top{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #3283DC;
    border-radius: 8px;
}
.btn_top span{
    font-family: pretendard-medium;
    color: white;
}
@media screen and (min-width:1400px) {
    .footer{
        padding: 80px 0;
    }
    .footer .logo{
        width: 236px;
        height: 40px;
        margin-bottom: 40px;
    }
    .footer_link_list{
        gap: 32px;
        margin-bottom: 24px;
    }
    .footer_link_list .footer_link{
        font-size: 18px;
        line-height: 24px;
    }
    .footer_info_list{
        gap: 24px;
        margin-bottom: 12px;
    }
    .footer_info_list .footer_info{
        gap: 4px;
        font-size: 16px;
        line-height: 22px;
    }
    .footer_info_list .footer_info:after{
        height: 14px;
        right: -13px;
    }
    .footer_info_list .footer_info:nth-child(3n):after{
        content: none;
    }
    .footer_family_link_list{
        gap: 32px;
        padding-top: 40px;
        margin-top: 40px;
        margin-bottom: 80px;
        border-top: 1px solid rgba(0, 0, 0, 0.20);
    }
    .footer_family_link{
        gap: 12px;
    }
    .footer_family_text{
        font-size: 14px;
        line-height: 20px;
    }
    .footer_copyright{
        font-size: 14px;
        line-height: 20px;
    }
    .family_site {
        width: 250px;
        top: 2px;
        right: 56px;
    }
    .btn_top{
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;
        height: 48px;
    }
    .btn_top span{
        font-size: 12px;
        line-height: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1399px) {
    .footer{
        padding: 50px 0;
    }
    .footer > .inner{
        text-align: center;
    }
    .footer .logo{
        display: block;
        width: 142px;
        height: 24px;
        margin: 20px auto;
    }
    .footer_link_list{
        justify-content: center;
        gap: 8px 16px;
        margin-bottom: 24px;
    }
    .footer_link_list .footer_link{
        font-size: 13px;
        line-height: 18px;
    }
    .footer_info_list{
        justify-content: center;
        gap: 5px 10px;
        margin-bottom: 5px;
    }
    .footer_info_list .footer_info{
        gap: 4px;
        font-size: 11px;
        line-height: 15px;
    }
    .footer_info_list .footer_info:after{
        height: 10px;
        right: -6px;
    }
    .footer_family_link_list{
        justify-content: center;
        gap: 24px;
        padding-top: 32px;
        margin-top: 32px;
        margin-bottom: 32px;
        border-top: 1px solid rgba(0, 0, 0, 0.20);
    }
    .footer_family_link{

    }
    .footer_family_text{
        font-size: 0;
    }
    .footer_copyright{
        font-size: 10px;
        line-height: 14px;
    }
    .family_site {
        position: relative;
        width: 230px;
        top: auto;
        right: auto;
    }
    .btn_top{
        position: absolute;
        right: 0;
        top: -100px;
        width: 40px;
        height: 40px;
    }
    .btn_top span{
        font-size: 12px;
        line-height: 18px;
    }
}

@media screen and (max-width: 767px) {
    .footer{
        padding: 50px 0;
    }
    .footer > .inner{
        text-align: center;
    }
    .footer .logo{
        display: block;
        width: 142px;
        height: 24px;
        margin: 20px auto;
    }
    .footer_link_list{
        justify-content: center;
        gap: 8px 16px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }
    .footer_link_list .footer_link{
        font-size: 13px;
        line-height: 18px;
    }

    .footer_link_list .footer_link:last-child{
        width:100%;
    }

    .footer_info_list{
        justify-content: center;
        gap: 5px 10px;
        margin-bottom: 5px;
        flex-wrap: wrap;
    }
    .footer_info_list .footer_info{
        gap: 4px;
        font-size: 11px;
        line-height: 15px;
    }
    .footer_info_list .footer_info:after{
        height: 10px;
        right: -6px;
    }

    .footer_info_list.footer_info_list_last .footer_info:last-child:after {
        display: none;
    }

    .footer_family_link_list{
        justify-content: center;
        gap: 24px;
        padding-top: 32px;
        margin-top: 32px;
        margin-bottom: 32px;
        border-top: 1px solid rgba(0, 0, 0, 0.20);
    }
    .footer_family_link{

    }
    .footer_family_text{
        font-size: 0;
    }
    .footer_copyright{
        font-size: 10px;
        line-height: 14px;
    }
    .family_site {
        position: relative;
        width: 230px;
        top: auto;
        right: auto;
    }
    .btn_top{
        position: absolute;
        right: 0;
        top: -100px;
        width: 40px;
        height: 40px;
    }
    .btn_top span{
        font-size: 12px;
        line-height: 18px;
    }
}









.mypage_info_box{
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: white;
    z-index: 3;
}
.mypage_info_box .mypage_info_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mypage_info_box .mypage_info_header .user_name span{
    font-family: pretendard-medium;
    color: #5a5a5a;
}
.mypage_info_box .mypage_info_header .user_name .name{
    font-family: pretendard-bold;
    color: #3283DC;
}
.mypage_info_box .mypage_info_header .logout_btn{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.mypage_info_box .mypage_info_header .logout_btn span{
    font-family: pretendard-medium;
    color: #5A5A5A;
}
.mypage_info_box .mypage_info_body .mypage_info_link_list{
    display: flex;
    flex-direction: column;
}
.mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link{
    display: flex;
    cursor: pointer;
}
.mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link .text{
    font-family: pretendard-medium;
    color: #333333;
    cursor: pointer;
}
.mypage_info_box .mypage_info_body .btn_myclass{
    width: 100%;
    border-radius: 8px;
    background-color: #3283DC;
    color: white;
    font-family: pretendard-medium;
    text-align: center;
    cursor: pointer;
}
.mypage_info_box .mypage_info_header .gnb_close_btn{
    background-image: url("/res/home/publish/img/common/icon_close.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (min-width:1400px) {
    .mypage_info_box{
        display: none;
        box-shadow: 0 2px 21px 0 rgba(0, 0, 0, 0.14);
        border-radius: 16px;
        right: 40px;
        top: 85px;
        padding: 24px 20px 20px 20px;
        width: 286px;
    }
    .mypage_info_box.on{
        display: block;
    }
    .mypage_info_box:after{
        content: "";
        position: absolute;
        top: -12px;
        right: 47px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 12px solid white;
    }
    .mypage_info_box .mypage_info_header{
        padding-bottom: 20px;
        border-bottom: 1px solid #E3E4E8;
    }
    .mypage_info_box .mypage_info_header .user_name span{
        font-size: 16px;
        line-height: 24px;
    }
    .mypage_info_box .mypage_info_header .user_name .name{
        font-size: 20px;
        line-height: 28px;
    }
    .mypage_info_box .mypage_info_header .logout_btn{
        gap: 4px;
    }
    .mypage_info_box .mypage_info_header .logout_btn img{
        width: 24px;
        height: 24px;
    }
    .mypage_info_box .mypage_info_header .logout_btn span{
        font-size: 16px;
        line-height: 24px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list{
        padding-left: 8px;
        padding-top: 20px;
        gap: 16px;
        margin-bottom: 20px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link .icon{
        display: none;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link .text{
        font-size: 16px;
        line-height: 24px;
    }
    .mypage_info_box .mypage_info_body .btn_myclass{
        height: 48px;
        line-height: 48px;
        font-size: 16px;
    }
    .mypage_info_box .mypage_info_header .gnb_close_btn{
        display: none;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .mypage_info_box{
        box-sizing: border-box;
        position: fixed;
        z-index: 5;
        left: 0 !important;
        top: 0;
        padding: 16px 20px;
        width: 100%;
        display: none;
    }
    .mypage_info_box.on{
        display: block;
    }
    .mypage_info_box:after{
        content: none;
    }
    .mypage_info_box .mypage_info_header{
        padding-bottom: 24px;
    }
    .mypage_info_box .mypage_info_header .user_name span{
        font-size: 14px;
        line-height: 20px;
    }
    .mypage_info_box .mypage_info_header .user_name .name{
        font-size: 18px;
        line-height: 28px;
    }
    .mypage_info_box .mypage_info_header .logout_btn{
        gap: 4px;
        margin-left: auto;
    }
    .mypage_info_box .mypage_info_header .logout_btn img{
        width: 24px;
        height: 24px;
    }
    .mypage_info_box .mypage_info_header .logout_btn span{
        font-size: 14px;
        line-height: 24px;
    }
    .mypage_info_box .mypage_info_header .gnb_close_btn{
        width: 24px;
        height: 24px;
        margin-left: 12px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list{
        flex-direction: row;
        justify-content: space-around;
        gap: 12px;
        margin-bottom: 24px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link .icon{
        width: 24px;
        height: 24px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link .text{
        font-size: 14px;
        line-height: 21px;
    }
    .mypage_info_box .mypage_info_body .btn_myclass{
        width: 100%;
        height: 46px;
        line-height: 46px;
        font-size: 14px;
    }

}

@media screen and (max-width:767px) {
    .mypage_info_box{
        box-sizing: border-box;
        position: fixed;
        z-index: 5;
        left: 0 !important;
        top: 0;
        padding: 16px 20px;
        width: 100%;
        display: none;
    }
    .mypage_info_box.on{
        display: block;
    }
    .mypage_info_box:after{
        content: none;
    }
    .mypage_info_box .mypage_info_header{
        padding-bottom: 24px;
    }
    .mypage_info_box .mypage_info_header .user_name span{
        font-size: 14px;
        line-height: 20px;
    }
    .mypage_info_box .mypage_info_header .user_name .name{
        font-size: 18px;
        line-height: 28px;
    }
    .mypage_info_box .mypage_info_header .logout_btn{
        gap: 4px;
        margin-left: auto;
    }
    .mypage_info_box .mypage_info_header .logout_btn img{
        width: 24px;
        height: 24px;
    }
    .mypage_info_box .mypage_info_header .logout_btn span{
        font-size: 14px;
        line-height: 24px;
    }
    .mypage_info_box .mypage_info_header .gnb_close_btn{
        width: 24px;
        height: 24px;
        margin-left: 12px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list{
        flex-direction: row;
        justify-content: space-around;
        gap: 12px;
        margin-bottom: 24px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link .icon{
        width: 24px;
        height: 24px;
    }
    .mypage_info_box .mypage_info_body .mypage_info_link_list .mypage_info_link .text{
        font-size: 14px;
        line-height: 21px;
    }
    .mypage_info_box .mypage_info_body .btn_myclass{
        width: 100%;
        height: 46px;
        line-height: 46px;
        font-size: 14px;
    }
}


/*로그인*/
.user_frame_inner{
    text-align: center;
}
.user_frame{
    display: inline-block;
    background-color: white;
}
.user_frame_header{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.user_frame_header .title{
    font-family: pretendard-bold;
    color: #1A1A1A;
    text-align: center;
}
.user_frame_header .sub_title{
    font-family: pretendard-medium;
    color: #5A5A5A;
    text-align: center;
}
.user_frame .login_body{
    display: flex;
    flex-direction: column;
}
.user_frame .login_body input{
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid #C1C3C7;
    font-family: pretendard-medium;
    color: #5A5A5A;
    cursor: text;
}
.user_frame .login_body input::placeholder{
    color: #8A8A8A
}
.login_option_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login_option_box > label{
    margin-right: auto;
}
.login_option_box .find_btn{
    position: relative;
    font-family: pretendard-medium;
    color: #5A5A5A;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}
.login_option_box .find_btn:last-child:after{
    content: "";
    width: 1px;
    height: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #A9A9A9;
}
.user_frame .login_btn_box{
    display: flex;
    flex-direction: column;
}
.user_frame .login_btn_box .login_btn{
    background-color: #3283DC;
    color: white;
    font-family: pretendard-bold;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
}
.user_frame .login_btn_box .join_btn{
    font-family: pretendard-medium;
    border-radius: 12px;
    border: 1px solid #3283DC;
    color: #3283DC;
    width: 100%;
    cursor: pointer;
}
@media screen and (min-width:1400px) {
    .user_frame{
        border: 1px solid #EEEFF2;
        border-radius: 16px;
        box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.07);
        margin-top: 150px;
        padding: 50px 32px;
    }
    .user_frame_header{
        gap: 12px;
        margin-bottom: 50px;
    }
    .user_frame_header .title{
        font-size: 32px;
        line-height: 45px;
    }
    .user_frame_header .sub_title{
        font-size: 16px;
        line-height: 24px;
    }
    .user_frame .login_body{
        gap: 16px;
        margin-bottom: 40px;
    }
    .user_frame .login_body input{
        padding: 16px;
        line-height: 24px;
        height: 56px;
        font-size: 16px;
        width: 400px;
    }
    .login_option_box{
        gap: 16px;
    }
    .login_option_box .find_btn:last-child:after{
        left: -8px;
    }
    .user_frame .login_btn_box{
        gap: 12px;
    }
    .user_frame .login_btn_box .login_btn{
        height: 56px;
        line-height: 54px;
        font-size: 18px;
    }
    .user_frame .login_btn_box .join_btn{
        height: 56px;
        line-height: 54px;
        font-size: 16px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .user_frame{
        margin-top: 60px;
    }
    .user_frame_header{
        gap: 12px;
        margin-bottom: 32px;
    }
    .user_frame_header .title{
        font-size: 24px;
        line-height: 34px;
    }
    .user_frame_header .sub_title{
        font-size: 14px;
        line-height: 20px;
    }
    .user_frame .login_body{
        gap: 16px;
        margin-bottom: 20px;
    }
    .user_frame .login_body input{
        padding: 16px;
        line-height: 20px;
        height: 52px;
        font-size: 14px;
        width: 100%;
    }
    .login_option_box{
        gap: 8px;
    }
    .login_option_box .find_btn:last-child:after{
        left: -4px;
    }
    .user_frame .login_btn_box{
        gap: 12px;
    }
    .user_frame .login_btn_box .login_btn{
        height: 52px;
        line-height: 50px;
        font-size: 16px;
    }
    .user_frame .login_btn_box .join_btn{
        height: 52px;
        line-height: 50px;
        font-size: 14px;
    }
}

@media screen and (max-width:767px) {
    .user_frame{
        margin-top: 60px;
        width : 100%;
    }
    .user_frame_header{
        gap: 12px;
        margin-bottom: 32px;
    }
    .user_frame_header .title{
        font-size: 24px;
        line-height: 34px;
    }
    .user_frame_header .sub_title{
        font-size: 14px;
        line-height: 20px;
    }
    .user_frame .login_body{
        gap: 16px;
        margin-bottom: 20px;
    }
    .user_frame .login_body input{
        padding: 16px;
        line-height: 20px;
        height: 52px;
        font-size: 14px;
        width: 100%;
    }
    .login_option_box{
        gap: 8px;
    }
    .login_option_box .find_btn:last-child:after{
        left: -4px;
    }
    .user_frame .login_btn_box{
        gap: 12px;
    }
    .user_frame .login_btn_box .login_btn{
        height: 52px;
        line-height: 50px;
        font-size: 16px;
    }
    .user_frame .login_btn_box .join_btn{
        height: 52px;
        line-height: 50px;
        font-size: 14px;
    }
}



.user_frame_header .sign_up_step_box{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.sign_up_step_box::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    background-color: #E3E4E8;
    z-index: 1;

    width: calc(100% - 57px);
    top: 8px;
}
.user_frame_header .sign_up_step_box .step_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.user_frame_header .sign_up_step_box .step_item .icon{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("/res/home/publish/img/common/icon_circle_off.svg");
}
.user_frame_header .sign_up_step_box .step_item.active .icon{
    background-image: url("/res/home/publish/img/common/icon_circle_on.svg");
}
.user_frame_header .sign_up_step_box .step_item .text{
    font-family: pretendard-medium;
    color: #8A8A8A;
}
.user_frame_header .sign_up_step_box .step_item.active .text{
    color: #3060BB;
}
.user_frame_body .terms_header{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #C1C3C7;
}
.user_frame_body .terms_header .check_text{
    color: #1A1A1A;
}
.user_frame_body .terms_body{
    display: flex;
    flex-direction: column;
}
.user_frame_body .terms_body .terms_item{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.user_frame_body .terms_body .terms_item .check_text{
    color: #1A1A1A;
}
.user_frame_body .terms_body .terms_item .essential{
    color: #3060BB;
}
.user_frame_body .terms_body .terms_item .terms_item_content{
    font-family: pretendard-medium;
    color: #454545;
    border-radius: 12px;
    border: 1px solid #C1C3C7;
    overflow-y: auto;
    text-align: left;
}
.user_frame_btn_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user_frame_btn_wrap .cancel_btn{
    font-family: pretendard-medium;
    border-radius: 10px;
    border: 1px solid #454545;
    color: #454545;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}
.user_frame_btn_wrap .confirm_btn{
    font-family: pretendard-bold;
    border-radius: 10px;
    border: 1px solid #3283DC;
    color: white;
    background-color: #3283DC;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}
@media screen and (min-width:1400px) {
    .user_frame.sign_up_page{
        width: 700px;
    }
    .user_frame_header .sign_up_step_box{
        gap: 57px;
    }
    .user_frame_header .sign_up_step_box .step_item{
        gap: 6px;
    }
    .user_frame_header .sign_up_step_box .step_item .icon{
        width: 16px;
        height: 16px;
    }
    .user_frame_header .sign_up_step_box .step_item .text{
        font-size: 16px;
        line-height: 24px;
    }
    .user_frame_body .terms_header{
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    .user_frame_body .terms_header .check_text{
        font-size: 18px;
        line-height: 28px;
    }
    .user_frame_body .terms_body{
        gap: 24px;
    }
    .user_frame_body .terms_body .terms_item{
        gap: 16px;
    }
    .user_frame_body .terms_body .terms_item .check_text{
        font-size: 16px;
        line-height: 24px;
    }
    .user_frame_body .terms_body .terms_item .terms_item_content{
        height: 230px;
        padding: 16px;
    }
    .user_frame_btn_wrap{
        gap: 12px;
        margin-top: 50px;
    }
    .user_frame_btn_wrap .cancel_btn{
        height: 56px;
        font-size: 16px;
        line-height: 54px;
        width: calc(50% - 6px);
    }
    .user_frame_btn_wrap .confirm_btn{
        height: 56px;
        font-size: 18px;
        line-height: 54px;
        width: calc(50% - 6px);
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .user_frame_header .sign_up_step_box{
        gap: 57px;
    }
    .user_frame_header .sign_up_step_box .step_item{
        gap: 6px;
    }
    .user_frame_header .sign_up_step_box .step_item .icon{
        width: 16px;
        height: 16px;
    }
    .user_frame_header .sign_up_step_box .step_item .text{
        font-size: 14px;
        line-height: 20px;
    }
    .user_frame_body .terms_header{
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .user_frame_body .terms_header .check_text{
        font-size: 16px;
        line-height: 24px;
    }
    .user_frame_body .terms_body{
        gap: 16px;
    }
    .user_frame_body .terms_body .terms_item{
        gap: 12px;
    }
    .user_frame_body .terms_body .terms_item .check_text{
        font-size: 14px;
        line-height: 20px;
    }
    .user_frame_body .terms_body .terms_item .terms_item_content{
        height: 180px;
        padding: 16px;
    }
    .user_frame_btn_wrap{
        gap: 12px;
        margin-top: 24px;
    }
    .user_frame_btn_wrap .cancel_btn{
        height: 46px;
        font-size: 14px;
        line-height: 44px;
        width: calc(50% - 6px);
    }
    .user_frame_btn_wrap .confirm_btn{
        height: 46px;
        font-size: 14px;
        line-height: 44px;
        width: calc(50% - 6px);
    }
}

@media screen and (max-width:767px) {
    .user_frame_header .sign_up_step_box{
        gap: 57px;
    }
    .user_frame_header .sign_up_step_box .step_item{
        gap: 6px;
    }
    .user_frame_header .sign_up_step_box .step_item .icon{
        width: 16px;
        height: 16px;
    }
    .user_frame_header .sign_up_step_box .step_item .text{
        font-size: 14px;
        line-height: 20px;
    }
    .user_frame_body .terms_header{
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .user_frame_body .terms_header .check_text{
        font-size: 16px;
        line-height: 24px;
    }
    .user_frame_body .terms_body{
        gap: 16px;
    }
    .user_frame_body .terms_body .terms_item{
        gap: 12px;
    }
    .user_frame_body .terms_body .terms_item .check_text{
        font-size: 14px;
        line-height: 20px;
    }
    .user_frame_body .terms_body .terms_item .terms_item_content{
        height: 180px;
        padding: 16px;
    }
    .user_frame_btn_wrap{
        gap: 12px;
        margin-top: 24px;
    }
    .user_frame_btn_wrap .cancel_btn{
        height: 52px;
        font-size: 16px;
        line-height: 52px;
        width: calc(50% - 6px);
    }
    .user_frame_btn_wrap .confirm_btn{
        height: 52px;
        font-size: 16px;
        line-height: 52px;
        width: calc(50% - 6px);
    }
}

@media screen and (max-width:400px) {
    .user_frame_header .sign_up_step_box {
        gap: 30px;
    }
}




.sign_info_item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sign_info_item .title{
    position: relative;
    font-family: pretendard-medium;
    color: #1A1A1A;
}
.sign_info_item .title.essential:after{
    content: "*";
    position: absolute;
    top: 0;
    color: #3283DC;
}
.sign_input{
    width: 100%;
}
.sign_input input{
    border-radius: 12px;
    width: 100%;
    border: 1px solid #C1C3C7;
    font-family: pretendard-medium;
    color: #1A1A1A;
    box-sizing: border-box;
}
.sign_input input::placeholder{
    color: #8A8A8A;
}
.sign_input input:disabled,
.sign_info_item .body select:disabled{
    background-color: #EEEFF2;
    color: #C1C3C7;
}
.sign_info_item .body{
    display: flex;
    align-items: center;
    width: 100%;
}
.sign_info_item .body select{
    border-radius: 12px;
    width: 100%;
    border: 1px solid #C1C3C7;
    font-family: pretendard-medium;
    color: #1A1A1A;
    box-sizing: border-box;
}
.sign_info_item .body.email_box .middle{
    text-align: center;
    font-family: pretendard-medium;
}
.sign_info_item .body.address_box{
    flex-wrap: wrap;
}
.sign_info_item .body.address_box .address_btn{
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #454545;
    font-family: pretendard-medium;
    color: #454545;
    cursor: pointer;
    text-align: center;
}
@media screen and (min-width:1400px) {
    .sign_info_item{
        gap: 8px;
        margin-bottom: 32px;
    }
    .sign_info_item .title{
        font-size: 16px;
        line-height: 24px;
    }
    .sign_info_item .title.essential:after{
        right: -12px;
        font-size: 16px;
        line-height: 24px;
    }
    .sign_info_item .sign_input{
        width: 100%;
    }
    .sign_info_item .sign_input input{
        width: 100%;
        padding: 16px;
        font-size: 16px;
        line-height: 22px;
        height: 56px;
    }
    .sign_info_item .body{
        gap: 8px 12px;
    }
    .sign_info_item .body select{
        padding: 16px;
        font-size: 16px;
        line-height: 22px;
        height: 56px;
    }
    .sign_info_item .body.birthday_box > select{
        width: calc((100% - 24px) / 3);
    }
    .sign_info_item .body.gender_box > label{
        width: 50%;
    }
    .sign_info_item .body.email_box .sign_input,
    .sign_info_item .body.email_box .email_select{
        width: calc((100% - 52px) / 3);
    }
    .sign_info_item .body.email_box .middle{
        width: 16px;
    }
    .sign_info_item .body.address_box .address_input{
        width: calc(100% - 132px);
    }
    .sign_info_item .body.address_box .address_btn{
        height: 56px;
        width: 120px;
        font-size: 16px;
        line-height: 54px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .sign_info_item{
        gap: 8px;
        margin-bottom: 20px;
    }
    .sign_info_item .title{
        font-size: 14px;
        line-height: 20px;
    }
    .sign_info_item .title.essential:after{
        right: -12px;
        font-size: 14px;
        line-height: 20px;
    }
    .sign_info_item .sign_input{
        width: 100%;
    }
    .sign_info_item .sign_input input{
        width: 100%;
        padding: 12px;
        font-size: 14px;
        line-height: 21px;
        height: 45px;
    }
    .sign_info_item .body{
        gap: 12px;
    }
    .sign_info_item .body select{
        padding: 12px;
        font-size: 14px;
        line-height: 21px;
        height: 45px;
    }
    .sign_info_item .body.birthday_box > select{
        width: calc((100% - 24px) / 3);
    }
    .sign_info_item .body.gender_box > label{
        width: 50%;
    }
    .sign_info_item .body.email_box .sign_input,
    .sign_info_item .body.email_box .email_select{
        width: calc((100% - 50px) / 3);
    }
    .sign_info_item .body.email_box .middle{
        width: 14px;
    }
    .sign_info_item .body.address_box .address_input{
        width: calc(100% - 132px);
    }
    .sign_info_item .body.address_box .address_btn{
        height: 45px;
        width: 120px;
        font-size: 14px;
        line-height: 43px;
    }
}

@media screen and (max-width:767px) {
    .sign_info_item{
        gap: 8px;
        margin-bottom: 20px;
    }
    .sign_info_item .title{
        font-size: 14px;
        line-height: 20px;
    }
    .sign_info_item .title.essential:after{
        right: -12px;
        font-size: 14px;
        line-height: 20px;
    }
    .sign_info_item .sign_input{
        width: 100%;
    }
    .sign_info_item .sign_input input{
        width: 100%;
        padding: 16px;
        font-size: 14px;
        line-height: 20px;
        height: 52px;
    }
    .sign_info_item .body{
        gap: 12px;
    }
    .sign_info_item .body select{
        padding: 12px;
        font-size: 14px;
        line-height: 20px;
        height: 52px;
    }
    .sign_info_item .body.birthday_box > select{
        width: calc((100% - 24px) / 3);
    }
    .sign_info_item .body.gender_box > label{
        width: 50%;
    }
    .sign_info_item .body.email_box{
        flex-wrap: wrap;
    }
    .sign_info_item .body.email_box .sign_input{
        width: calc((100% - 38px) / 2);
    }
    .sign_info_item .body.email_box .email_select{
        width: 100%;
    }
    .sign_info_item .body.email_box .middle{
        width: 14px;
    }
    .sign_info_item .body.address_box .address_input{
        width: calc(100% - 132px);
    }
    .sign_info_item .body.address_box .address_btn{
        height: 45px;
        width: 120px;
        font-size: 14px;
        line-height: 43px;
    }
}



.complete_page{
    text-align: center;
}
.complete_page .complete_title{
    font-family: pretendard-bold;
    text-align: center;
    color: #1A1A1A;
}
.complete_page .complete_body{
    font-family: pretendard-medium;
    text-align: center;
    color: #454545;
}
.complete_page .complete_btn{
    font-family: pretendard-bold;
    color: white;
    cursor: pointer;
    background-color: #3283DC;
    border-radius: 12px;
}
.complete_page .complete_title .id_result{
    color: #3060BB;
    text-decoration: underline;
}
.find_tab_box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.find_tab_box .find_tab_item{
    font-family: pretendard-bold;
    text-align: center;
    color: #C1C3C7;
    border-bottom: 1px solid #C1C3C7;
    box-sizing: border-box;
    width: 50%;
    cursor: pointer;
}
.find_tab_box .find_tab_item.on{
    color: #3283DC;
    border-bottom: 2px solid #3283DC;
}
@media screen and (min-width:1400px) {
    .complete_page .complete_icon{
        width: 68px;
        height: 68px;
        margin-bottom: 32px;
    }
    .complete_page .complete_title{
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 16px;
    }
    .complete_page .complete_body{
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 50px;
    }
    .complete_page .complete_btn{
        width: 310px;
        height: 56px;
        line-height: 56px;
        font-size: 18px;
    }
    .find_tab_box{
        margin-bottom: 50px;
    }
    .find_tab_box .find_tab_item{
        padding: 16px 24px;
        font-size: 20px;
        line-height: 28px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .complete_page .complete_icon{
        width: 44px;
        height: 44px;
        margin-bottom: 24px;
    }
    .complete_page .complete_title{
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 16px;
    }
    .complete_page .complete_body{
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 32px;
    }
    .complete_page .complete_btn{
        width: 310px;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
    }
    .find_tab_box{
        margin-bottom: 32px;
    }
    .find_tab_box .find_tab_item{
        padding: 12px;
        font-size: 18px;
        line-height: 24px;
    }
}

@media screen and (max-width:767px) {
    .complete_page .complete_icon{
        width: 44px;
        height: 44px;
        margin-bottom: 24px;
    }
    .complete_page .complete_title{
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 16px;
    }
    .complete_page .complete_body{
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 32px;
    }
    .complete_page .complete_btn{
        width: 100%;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
    }
    .find_tab_box{
        margin-bottom: 32px;
    }
    .find_tab_box .find_tab_item{
        padding: 12px;
        font-size: 18px;
        line-height: 24px;
    }
}

.course_category_box{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #F6F7FA;
    border-radius: 12px;
}
.course_category_box .course_category_tag{
    display: flex;
    align-items: flex-start;
}
.course_category_box .course_category_tag .title{
    font-family: pretendard-bold;
    color: #333333;
    flex-shrink: 0;
}
.course_category_box .course_category_tag .category_list{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.course_category_box .course_category_tag .category_list li{
    text-align: center;
    font-family: pretendard-medium;
    border: 1px solid #E3E4E8;
    color: #5A5A5A;
    background-color: white;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
}
.course_category_box .course_category_tag .category_list li.on,
.course_category_box .course_category_tag .category_list li:hover{
    font-family: pretendard-bold;
    color: white;
    background-color: #3283DC;
    border: 1px solid #3283DC;
}
.course_list_box{

}
.course_list_box .total_text{
    font-family: pretendard-medium;
    color: #333333;
    display: flex;
    align-items: center;
}
.course_list_box .total_text .number{
    font-family: pretendard-bold;
}
.course_list_box .course_list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid black;
    border-bottom: 1px solid #C1C3C7;
    box-sizing: border-box;
}

.course_list_box .course_list.empty_list {
    justify-content: center;
}


.course_list_box .course_list .course_item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.course_list_box .course_list .course_item .thumbnail{
    /*background-size: cover;*/
    background-size: contain;
    background-color: #F2F2F2;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-bottom: 66.8%;
    position: relative;
    border-radius: 16px;
}
.course_list_box .course_list .course_item .thumbnail .favorite_course{
    position: absolute;
    content: "";
    background-image: url("/res/home/publish/img/common/icon_star_gray.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    right: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
}
.course_list_box .course_list .course_item .thumbnail .favorite_course.on{
    background-image: url("/res/home/publish/img/common/icon_star_yellow.svg");
}
.course_list_box .course_list .course_item .course_item_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
}
.course_list_box .course_list .course_item .course_item_info * {
    cursor: pointer;
}
.course_list_box .course_list .course_item .tag{
    font-family: pretendard-medium;
    color: white;
    box-sizing: border-box;
}
.course_list_box .course_list .course_item .tag .type1{
    background-color: #F79412;
    border-radius: 8px;
    display: inline-block;
}
.course_list_box .course_list .course_item .title{
    font-family: pretendard-bold;
    color: #454545;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.course_list_box .course_list .course_item .price{
    font-family: pretendard-bold;
    color: #454545;
}
.course_list_box .course_list .course_item .period{
    display: flex;
    align-items: center;
    font-family: pretendard-medium;
    color: #5A5A5A;
    background-color: #EEEFF2;
    border-radius: 4px;
}

@media screen and (min-width:1400px) {
    .course_category_box{
        gap: 16px;
        padding: 32px;
        margin-bottom: 32px;
    }
    .course_category_box .course_category_tag{
        gap: 24px;
    }
    .course_category_box .course_category_tag .title{
        font-size: 18px;
        line-height: 44px;
    }
    .course_category_box .course_category_tag .category_list{
        gap: 8px 16px;
    }
    .course_category_box .course_category_tag .category_list li{
        width: 150px;
        height: 44px;
        font-size: 16px;
        line-height: 42px;
        padding: 0;
    }
    .course_list_box{

    }
    .course_list_box .total_text{
        font-size: 16px;
        line-height: 24px;
        gap: 8px;
        margin-bottom: 16px;
    }
    .course_list_box .course_list{
        gap: 32px;
        padding: 50px 0;
        margin-bottom: 80px;
    }
    .course_list_box .course_list .course_item{
        width: calc((100% - 96px) / 4);
    }
    .course_list_box .course_list .course_item .thumbnail{
        margin-bottom: 20px;
    }
    .course_list_box .course_list .course_item .tag{
        margin-bottom: 12px;
    }
    .course_list_box .course_list .course_item .tag .type1{
        font-size: 14px;
        line-height: 28px;
        padding: 0 8px;
        margin-left: 12px;
    }
    .course_list_box .course_list .course_item .title{
        font-size: 20px;
        line-height: 28px;
        height: 56px;
        margin-bottom: 12px;
        margin-left: 12px;
    }
    .course_list_box .course_list .course_item .price{
        font-size: 24px;
        line-height: 34px;
        margin-bottom: 16px;
        margin-left: 12px;
    }
    .course_list_box .course_list .course_item .period{
        font-size: 14px;
        line-height: 28px;
        gap: 8px;
        padding: 0 8px;
        margin-left: 12px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .course_category_box{
        gap: 16px;
        padding: 24px;
        margin-bottom: 24px;
    }
    .course_category_box .course_category_tag{
        gap: 24px;
    }
    .course_category_box .course_category_tag .title{
        font-size: 16px;
        line-height: 40px;
    }
    .course_category_box .course_category_tag .category_list{
        gap: 8px 16px;
    }
    .course_category_box .course_category_tag .category_list li{
        min-width: 100px;
        height: 40px;
        font-size: 14px;
        line-height: 38px;
        padding: 0px 12px;
    }
    .course_list_box{

    }
    .course_list_box .total_text{
        font-size: 14px;
        line-height: 20px;
        gap: 8px;
        margin-bottom: 16px;
    }
    .course_list_box .course_list{
        gap: 24px;
        padding: 30px 0;
        margin-bottom: 40px;
        align-items: flex-start;
    }
    .course_list_box .course_list .course_item{
        width: calc((100% - 48px) / 3);
    }
    .course_list_box .course_list .course_item .thumbnail{
        margin-bottom: 12px;
    }
    .course_list_box .course_list .course_item .tag{
        margin-bottom: 8px;
    }
    .course_list_box .course_list .course_item .tag .type1{
        font-size: 14px;
        line-height: 24px;
        padding: 0 8px;
        margin-left: 8px;
    }
    .course_list_box .course_list .course_item .title{
        font-size: 16px;
        line-height: 24px;
        height: 48px;
        margin-bottom: 8px;
        margin-left: 8px;
    }
    .course_list_box .course_list .course_item .price{
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 10px;
        margin-left: 8px;
    }
    .course_list_box .course_list .course_item .period{
        font-size: 13px;
        line-height: 24px;
        gap: 8px;
        padding: 0 8px;
        margin-left: 8px;
    }
}

@media screen and (max-width:767px) {
    .course_category_box{
        gap: 16px;
        padding: 24px;
        margin-bottom: 24px;
    }
    .course_category_box .course_category_tag{
        gap: 24px;
    }
    .course_category_box .course_category_tag .title{
        font-size: 16px;
        line-height: 40px;
    }
    .course_category_box .course_category_tag .category_list{
        gap: 8px 16px;
    }
    .course_category_box .course_category_tag .category_list li{
        min-width: 100px;
        height: 40px;
        font-size: 14px;
        line-height: 38px;
        padding: 0px 12px;
    }
    .course_list_box{

    }
    .course_list_box .total_text{
        font-size: 14px;
        line-height: 20px;
        gap: 8px;
        margin-bottom: 16px;
    }
    .course_list_box .course_list{
        gap: 24px;
        padding: 30px 0;
        margin-bottom: 40px;
        align-items: flex-start;
    }
    .course_list_box .course_list .course_item{
        width: 100%;
    }
    .course_list_box .course_list .course_item .thumbnail{
        margin-bottom: 12px;
    }
    .course_list_box .course_list .course_item .tag{
        margin-bottom: 8px;
    }
    .course_list_box .course_list .course_item .tag .type1{
        font-size: 14px;
        line-height: 24px;
        padding: 0 8px;
        margin-left: 8px;
    }
    .course_list_box .course_list .course_item .title{
        font-size: 16px;
        line-height: 24px;
        height: 48px;
        margin-bottom: 8px;
        margin-left: 8px;
    }
    .course_list_box .course_list .course_item .price{
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 10px;
        margin-left: 8px;
    }
    .course_list_box .course_list .course_item .period{
        font-size: 13px;
        line-height: 24px;
        gap: 8px;
        padding: 0 8px;
        margin-left: 8px;
    }
}



/*과정 상세*/
.course_detail_top{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
    margin-bottom: 20px;
    padding-top: 44px;
}
.course_detail_top .list_page_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;

    gap: 4px;
}
.course_detail_top .list_page_btn *{
    cursor: pointer;
}
.course_detail_top .list_page_btn img{
    width: 24px;
    height: 24px;
}
.course_detail_top .list_page_btn span{
    font-family: pretendard-bold;
    color: #333333;

    font-size: 20px;
    line-height: 28px;
}
.course_detail_top .detail_btn{
    cursor: pointer;

    width: 40px;
    height: 40px;
}

.course_detail_body{
    display: flex;
    justify-content: space-between;

    gap: 60px;
}
.course_detail_body .course_detail_content{
    width: calc(100% - 450px);
}
.course_detail_body .course_detail_content .tag_box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 8px;
}
.course_detail_body .course_detail_content .tag_box li{
    font-family: pretendard-medium;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;

    font-size: 16px;
    padding: 0 8px;
    min-width: 100px;
    line-height: 30px;
    margin-bottom: 18px;
}
.course_detail_body .course_detail_content .tag_box li.type1{
    background-color: #F79412;
    border: 1px solid #F79412;
    color: white;
}
.course_detail_body .course_detail_content .tag_box li.type2{
    background-color: white;
    border: 1px solid #3060BB;
    color: #3060BB;
}
.course_detail_body .course_detail_content .course_title{
    font-family: pretendard-bold;
    color: black;
    word-break: keep-all;

    font-size: 44px;
    line-height: 62px;
    margin-bottom: 32px;
}
.course_detail_body .course_detail_content .course_sub_btn_box{
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 16px;
    margin-bottom: 32px;
}
.course_detail_body .course_detail_content .course_sub_btn_box .favorite_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #C1C3C7;
    color: black;
    cursor: pointer;

    border-radius: 44px;
    padding: 0px 15px;
    gap: 8px;
    font-size: 18px;
    line-height: 42px;
}
/*.course_detail_body .course_detail_content .course_sub_btn_box .favorite_btn span{*/
/*    font-size: 18px;*/
/*    line-height: 42px;*/
/*}*/
.course_detail_body .course_detail_content .course_sub_btn_box .favorite_btn .favorite_icon{
    background-image: url("/res/home/publish/img/common/icon_star_gray.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 24px;
    height: 24px;
}
.course_detail_body .course_detail_content .course_sub_btn_box .favorite_btn.on .favorite_icon{
    background-image: url("/res/home/publish/img/common/icon_star_yellow.svg");
}
.course_detail_body .course_detail_content .course_sub_btn_box .sample_course_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    cursor: pointer;
    border: 2px solid #3060BB;

    border-radius: 44px;
    padding: 0px 15px;
    gap: 8px;
    font-size: 18px;
    line-height: 40px;
}
.course_detail_body .course_detail_content .course_sub_btn_box .sample_course_btn .sample_icon{
    background-image: url("/res/home/publish/img/common/icon_media.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 24px;
    height: 24px;
}
.course_detail_body .course_detail_content .course_info_body .course_info_tab{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid #C1C3C7;
}
.course_detail_body .course_detail_content .course_info_body .course_info_tab .tab_item{
    cursor: pointer;
    font-family: pretendard-bold;
    color: #C1C3C7;

    padding: 0 24px;
    font-size: 24px;
    line-height: 66px;
}
.course_detail_body .course_detail_content .course_info_body .course_info_tab .tab_item.on{
    color: #3283DC;
    border-bottom: 2px solid #3283DC;

    line-height: 64px;
}
.course_detail_body .course_detail_content .course_info_body .course_info_content .content_item{
    padding: 32px 0;
    border-bottom: 1px solid #C1C3C7;
}
.course_detail_body .course_detail_content .course_info_body .course_info_content .content_item:last-child{
    padding-bottom: 0;
    border-bottom: none;
}
.course_detail_body .course_detail_content .course_info_body .course_info_content .content_item .title{
    font-family: pretendard-bold;
    color: black;

    font-size: 20px;
    line-height: 28px;
    margin-bottom: 20px;
}
/*기본정보*/
.course_info_body .course_info_content .content_item .body.basic_info{
    display: flex;
    align-content: center;
    flex-wrap: wrap;

    gap: 16px;
}
.course_info_body .course_info_content .content_item .body.basic_info .basic_item{
    border-radius: 14px;
    background-color: #F6F7FA;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    padding: 20px 24px;
    gap: 8px;
    width: calc((100% - 32px) / 3);
}
.course_info_body .course_info_content .content_item .body.basic_info .basic_item .basic_item_title{
    position: relative;
    font-family: pretendard-medium;
    color: #333333;

    padding-left: 24px;
    font-size: 14px;
    line-height: 20px;
}
.course_info_body .course_info_content .content_item .body.basic_info .basic_item .basic_item_title:before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: no-repeat center / cover;
    background-image: url("/res/home/publish/img/common/icon_info.svg");

    width: 16px;
    height: 16px;
}
.course_info_body .course_info_content .content_item .body.basic_info .basic_item .basic_item_text p{
    font-family: pretendard-medium;
    color: #1A1A1A;

    font-size: 16px;
    line-height: 24px;
    margin-bottom: 4px;
}
.course_info_body .course_info_content .content_item .body.basic_info .basic_item .basic_item_text p.additional_info{
    color: #3081EA;

    font-size: 13px;
    line-height: 18px;
}
.course_info_body .course_info_content .content_item .body.basic_info .basic_item .basic_item_text p:last-child{
    margin-bottom: 0;
}

/*상세소개*/
.course_info_body .course_info_content .content_item .body.detail_info .detail_text1{
    font-family: pretendard-bold;
    color: #333333;

    font-size: 18px;
    line-height: 28px;
    margin-bottom: 12px;
}
.course_info_body .course_info_content .content_item .body.detail_info .detail_text2{
    font-family: pretendard-medium;
    color: #333333;

    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
}
.course_info_body .course_info_content .content_item .body.detail_info p{
    margin-bottom: 0;
}

/*학습목차*/
.course_info_body .course_info_content .content_item .body.module_info{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    gap: 12px;
}
.course_info_body .course_info_content .content_item .body.module_info .module_item{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    border: 2px solid #EEEFF2;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    border-radius: 14px;

    padding: 20px;
    padding-left: 98px;
    min-height: 116px;
    gap: 6px;
}
.course_info_body .course_info_content .content_item .body.module_info .module_item .module_step{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 12px;
    background-color: #3283DC;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    left: 20px;
    width: 62px;
    height: 72px;
}
.course_info_body .course_info_content .content_item .body.module_info .module_item:nth-child(2n) .module_step{
    background-color: #7AB5EE;
}
.course_info_body .course_info_content .content_item .body.module_info .module_item .module_step span{
    font-family: pretendard-medium;
    color: white;

    font-size: 13px;
    line-height: 18px;
}
.course_info_body .course_info_content .content_item .body.module_info .module_item .module_step span.number{
    font-family: pretendard-bold;
    color: white;

    font-size: 20px;
    line-height: 28px;
}
.course_info_body .course_info_content .content_item .body.module_info .module_item .module_type{
    font-family: pretendard-medium;
    color: #3060BB;

    font-size: 14px;
    line-height: 20px;
}
.course_info_body .course_info_content .content_item .body.module_info .module_item .module_title{
    font-family: pretendard-bold;
    color: #1A1A1A;

    font-size: 18px;
    line-height: 28px;
}
.course_detail_body .course_detail_navi{
    width: 390px;
}
.course_detail_body .course_detail_navi .course_detail_navi_box{
    border-radius: 20px;
    border: 1px solid #EEEFF2;
    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.07);
}
.course_detail_body .course_detail_navi .course_thumbnail{
    /*background-size: cover;*/
    background-size: contain;
    background-color: #F2F2F2;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-bottom: 66.8%;
    position: relative;
    border-radius: 16px;
}
.course_detail_body .course_detail_navi .course_navi_info{
    box-sizing: border-box;

    padding: 24px;
}
.course_detail_body .course_detail_navi .course_navi_info .course_navi_info_list{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
}
.course_detail_body .course_detail_navi .course_navi_info .course_navi_info_list li{
    display: flex;
    flex-wrap: wrap;

    gap: 24px;
}
.course_detail_body .course_detail_navi .course_navi_info .course_navi_info_list li span{
    font-family: pretendard-medium;
    color: black;

    font-size: 18px;
    line-height: 28px;
}
.course_detail_body .course_detail_navi .course_navi_info .course_navi_info_list li span:first-child{
    width: 65px;
}
.course_detail_body .course_detail_navi .course_navi_info .course_navi_info_list li span:last-child{
    width: calc(100%- 89px);
}
.course_detail_body .course_detail_navi .enroll_btn{
    width: 100%;
    background-color: #3283DC;
    color: white;
    font-family: pretendard-bold;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;

    font-size: 18px;
    line-height: 56px;
    margin-top: 24px;
}
@media screen and (min-width:1400px) {

}

@media screen and (min-width:768px) and (max-width:1399px) {

}

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

}

/*결제페이지*/
.course_payment_title{
    font-family: pretendard-bold;
    color: black;
}
.course_payment{
    display: flex;
    flex-wrap: wrap;
}
.course_payment .left{
    display: flex;
    flex-direction: column;
}
.course_payment .payment_title{
    font-family: pretendard-bold;
    color: black;
}
.course_payment .left .payment_info{
    border: 1px solid #C1C3C7;
    border-radius: 20px;
}
.course_payment .left .payment_info .payment_info_box{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.course_payment .left .payment_info .payment_info_box .box_item{
    border-bottom: 1px solid #C1C3C7;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.course_payment .left .payment_info .payment_info_box .box_item.long{
    width: 100%;
}
.course_payment .left .payment_info .payment_info_box .box_item .box_tag{
    font-family: pretendard-medium;
    color: #8A8A8A;
}
.course_payment .left .payment_info .payment_info_box .box_item .box_content{
    font-family: pretendard-medium;
    color: #333333;
}
.course_payment .left .payment_method{
    border: 1px solid #C1C3C7;
    border-radius: 20px;
}
.course_payment .left .payment_method .payment_method_tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.course_payment .left .payment_method .payment_method_tab li{
    font-family: pretendard-medium;
    color: #333333;
    border-radius: 10px;
    background-color: #F6F7FA;
    text-align: center;
    cursor: pointer;
}
.course_payment .left .payment_method .payment_method_tab li.on{
    background-color: #3283DC;
    color: white;
}
.course_payment .left .payment_method .payment_method_box .method_info{
    display: none;
}
.course_payment .right .payment_result{
    border-radius: 20px;
    border: 1px solid #C1C3C7;
}
.course_payment .right .payment_result .payment_result_info_box{
    display: flex;
    flex-direction: column;
}
.course_payment .right .payment_result .payment_result_info_box .payment_amount{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_text{
    font-family: pretendard-bold;
    color: #8A8A8A;
}
.course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_number{
    font-family: pretendard-bold;
    color: black;
}
.course_payment .right .payment_result .payment_result_info_box .payment_agree{
    box-sizing: border-box;
    background-color: #F4F9FF;
    border-radius: 8px;
}
.course_payment .right .payment_result .payment_result_info_box .payment_agree .check_text{
    color: #333;
}
.course_payment .right .payment_result .payment_result_info_box .payment_agree .check_text .essential_text{
    color: #3081EA;
}
.course_payment .right .payment_result .payment_result_info_box .payment_term{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.course_payment .right .payment_result .payment_result_info_box .payment_term p{
    font-family: pretendard-medium;
    color: #5A5A5A;
}
.course_payment .right .payment_result .payment_result_info_box .payment_term .more_btn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.course_payment .right .payment_result .payment_result_info_box .payment_term .more_btn *{
    cursor: pointer;
}
.course_payment .right .payment_result .payment_result_info_box .payment_term span{
    flex-shrink: 0;
    color: #5A5A5A;
}
.course_payment .right .payment_result .payment_result_info_box .payment_term img{
    width: 20px;
    height: 20px;
    transform: rotate(180deg);
}
.course_payment .right .payment_result .payment_btn{
    width: 100%;
    cursor: pointer;
    font-family: pretendard-bold;
    color: #C1C3C7;
    background-color: #E3E4E8;
    text-align: center;
}
.course_payment .right .payment_result .payment_btn.on{
    background-color: #3283DC;
    color: white;
}
@media screen and (min-width:1400px) {
    .course_payment_title{
        font-size: 44px;
        line-height: 62px;
        margin-bottom: 32px;
        padding-top: 44px;
    }
    .course_payment{
        gap: 32px;
    }
    .course_payment .left{
        gap: 32px;
        width: calc(100% - 422px);
    }
    .course_payment .payment_title{
        font-size: 24px;
        line-height: 34px;
        margin-bottom: 24px;
    }
    .course_payment .left .payment_info{
        padding: 32px 32px 12px 32px;
    }
    .course_payment .left .payment_info .payment_info_box .box_item{
        width: 50%;
        padding: 20px 0;
    }
    .course_payment .left .payment_info .payment_info_box .box_item .box_tag{
        font-size: 18px;
        line-height: 27px;
        width: 96px;
    }
    .course_payment .left .payment_info .payment_info_box .box_item .box_content{
        width: calc(100% - 96px);
        font-size: 18px;
        line-height: 27px;
    }
    .course_payment .left .payment_method{
        padding: 28px 23px;
    }
    .course_payment .left .payment_method .payment_method_tab{
        gap: 10px;
        margin-bottom: 24px;
    }
    .course_payment .left .payment_method .payment_method_tab li{
        font-size: 16px;
        line-height: 48px;
        width: calc((100% - 20px) / 3);
    }
    .course_payment .right{
        width: 390px;
    }
    .course_payment .right .payment_result{
        padding: 32px 24px;
    }
    .course_payment .right .payment_result .payment_result_info_box{
        gap: 16px;
        margin-bottom: 32px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_text{
        font-size: 18px;
        line-height: 34px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_number{
        font-size: 24px;
        line-height: 34px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_agree{
        padding: 16px 13px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_agree .check_text{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term p{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term .more_btn{
        gap: 4px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term span{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment .right .payment_result .payment_btn{
        border-radius: 12px;
        font-size: 18px;
        line-height: 56px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .course_payment_title{
        font-size: 32px;
        line-height: 45px;
        margin-bottom: 20px;
    }
    .course_payment{
        gap: 20px;
    }
    .course_payment .left{
        gap: 20px;
        width: 100%;
    }
    .course_payment .payment_title{
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 8px;
    }
    .course_payment .left .payment_info{
        padding: 24px;
    }
    .course_payment .left .payment_info .payment_info_box .box_item{
        width: 100%;
        padding: 20px 0;
    }
    .course_payment .left .payment_info .payment_info_box .box_item .box_tag{
        font-size: 16px;
        line-height: 24px;
        width: 72px;
        flex-shrink: 0;
    }
    .course_payment .left .payment_info .payment_info_box .box_item .box_content{
        width: calc(100% - 72px);
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment .left .payment_method{
        padding: 24px;
    }
    .course_payment .left .payment_method .payment_method_tab{
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }
    .course_payment .left .payment_method .payment_method_tab li{
        font-size: 14px;
        line-height: 45px;
        width: 100%;
    }
    .course_payment .right{
        width: 100%;
    }
    .course_payment .right .payment_result{
        padding: 24px;
    }
    .course_payment .right .payment_result .payment_result_info_box{
        gap: 16px;
        margin-bottom: 16px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_text{
        font-size: 16px;
        line-height: 28px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_number{
        font-size: 20px;
        line-height: 28px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_agree{
        padding: 16px 13px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_agree .check_text{
        font-size: 14px;
        line-height: 20px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term p{
        font-size: 14px;
        line-height: 20px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term .more_btn{
        gap: 4px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term span{
        font-size: 14px;
        line-height: 20px;
    }
    .course_payment .right .payment_result .payment_btn{
        border-radius: 12px;
        font-size: 16px;
        line-height: 56px;
    }
}

@media screen and (max-width:767px) {
    .course_payment_title{
        font-size: 32px;
        line-height: 45px;
        margin-bottom: 20px;
    }
    .course_payment{
        gap: 20px;
    }
    .course_payment .left{
        gap: 20px;
        width: 100%;
    }
    .course_payment .payment_title{
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 8px;
    }
    .course_payment .left .payment_info{
        padding: 24px;
    }
    .course_payment .left .payment_info .payment_info_box .box_item{
        width: 100%;
        padding: 20px 0;
    }
    .course_payment .left .payment_info .payment_info_box .box_item .box_tag{
        font-size: 16px;
        line-height: 24px;
        width: 72px;
        flex-shrink: 0;
    }
    .course_payment .left .payment_info .payment_info_box .box_item .box_content{
        width: calc(100% - 72px);
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment .left .payment_method{
        padding: 24px;
    }
    .course_payment .left .payment_method .payment_method_tab{
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }
    .course_payment .left .payment_method .payment_method_tab li{
        font-size: 14px;
        line-height: 45px;
        width: 100%;
    }
    .course_payment .right{
        width: 100%;
    }
    .course_payment .right .payment_result{
        padding: 24px;
    }
    .course_payment .right .payment_result .payment_result_info_box{
        gap: 16px;
        margin-bottom: 16px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_text{
        font-size: 16px;
        line-height: 28px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_amount .payment_amount_number{
        font-size: 20px;
        line-height: 28px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_agree{
        padding: 16px 13px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_agree .check_text{
        font-size: 14px;
        line-height: 20px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term p{
        font-size: 14px;
        line-height: 20px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term .more_btn{
        gap: 4px;
    }
    .course_payment .right .payment_result .payment_result_info_box .payment_term span{
        font-size: 14px;
        line-height: 20px;
    }
    .course_payment .right .payment_result .payment_btn{
        border-radius: 12px;
        font-size: 16px;
        line-height: 56px;
    }
}


.course_payment_completed_section{
    margin: auto;
    text-align: center;
    box-sizing: border-box;
}
.course_payment_completed_title{
    font-family: pretendard-bold;
    color: #1A1A1A;
    text-align: center;
}
.course_payment_completed_icon{
    margin: auto;
}
.course_payment_completed_text1{
    font-family: pretendard-bold;
    color: #1A1A1A;
}
.course_payment_completed_text2{
    font-family: pretendard-medium;
    color: #454545;
}
.course_payment_completed_box{
    border: 1px solid #C1C3C7;
    border-radius: 16px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    box-sizing: border-box;
}
.course_payment_completed_box .box_row{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.course_payment_completed_box .box_row .tag{
    font-family: pretendard-medium;
    color: #5A5A5A;
}
.course_payment_completed_box .box_row .content{
    font-family: pretendard-medium;
    color: #1A1A1A;
}
.course_payment_completed_section .confirm_btn{
    background-color: #3283DC;
    color: white;
    font-family: pretendard-bold;
    cursor: pointer;
}
@media screen and (min-width:1400px) {
    .course_payment_completed_section{
        padding-top: 94px;
        width: 480px;
    }
    .course_payment_completed_title{
        font-size: 32px;
        line-height: 45px;
        margin-bottom: 50px;
    }
    .course_payment_completed_icon{
        width: 68px;
        height: 68px;
    }
    .course_payment_completed_text1{
        margin-top: 32px;
        margin-bottom: 16px;
        font-size: 20px;
        line-height: 28px;
    }
    .course_payment_completed_text2{
        font-size: 18px;
        line-height: 28px;
    }
    .course_payment_completed_box{
        padding: 24px;
        gap: 20px;
        margin-top: 50px;
    }
    .course_payment_completed_box .box_row .tag{
        font-size: 18px;
        line-height: 28px;
    }
    .course_payment_completed_box .box_row .content{
        font-size: 18px;
        line-height: 28px;
    }
    .course_payment_completed_section .confirm_btn{
        border-radius: 12px;
        font-size: 18px;
        line-height: 56px;
        width: 312px;
        margin-top: 50px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .course_payment_completed_section{
        padding-top: 20px;
        width: 480px;
    }
    .course_payment_completed_title{
        font-size: 24px;
        line-height: 34px;
        margin-bottom: 32px;
    }
    .course_payment_completed_icon{
        width: 44px;
        height: 44px;
    }
    .course_payment_completed_text1{
        margin-top: 24px;
        margin-bottom: 16px;
        font-size: 18px;
        line-height: 25px;
    }
    .course_payment_completed_text2{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment_completed_box{
        padding: 20px;
        gap: 12px;
        margin-top: 32px;
    }
    .course_payment_completed_box .box_row .tag{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment_completed_box .box_row .content{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment_completed_section .confirm_btn{
        border-radius: 10px;
        font-size: 14px;
        line-height: 54px;
        width: 312px;
        margin-top: 32px;
    }
}

@media screen and (max-width:767px) {
    .course_payment_completed_section{
        padding-top: 20px;
        width: 100%;
    }
    .course_payment_completed_title{
        font-size: 24px;
        line-height: 34px;
        margin-bottom: 32px;
    }
    .course_payment_completed_icon{
        width: 44px;
        height: 44px;
    }
    .course_payment_completed_text1{
        margin-top: 24px;
        margin-bottom: 16px;
        font-size: 18px;
        line-height: 25px;
    }
    .course_payment_completed_text2{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment_completed_box{
        padding: 20px;
        gap: 12px;
        margin-top: 32px;
    }
    .course_payment_completed_box .box_row .tag{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment_completed_box .box_row .content{
        font-size: 16px;
        line-height: 24px;
    }
    .course_payment_completed_section .confirm_btn{
        border-radius: 10px;
        font-size: 14px;
        line-height: 54px;
        width: 100%;
        margin-top: 32px;
    }
}


.board_list_header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.board_list_header .total_count{
    font-family: pretendard-medium;
    color: black;
}
.board_list_header .board_search{
    display: flex;
    align-items: center;
    justify-content: center;
}
.board_list{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-top: 1px solid #333333;
}
.board_list .board_row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #C1C3C7;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.board_list .board_row *{
    cursor: pointer;
}
.board_list .board_row:hover {
    background-color: #fafafa;
}


.board_list .board_row .board_item.count{
    font-family: pretendard-medium;
    color: #5A5A5A;
    text-align: center;
    margin-bottom: auto;
}
.board_list .board_row.always_on_top{
    background-color: #F4F9FF;
}
.board_list .board_row.always_on_top .board_item.count{
    font-family: pretendard-bold;
    color: #3283DC;
}
.board_list .board_row .board_item.title{
    font-family: pretendard-medium;
    color: #1A1A1A;
    text-align: left;
}
.board_list .board_row .board_item.title .icon_clip{
    vertical-align: top;
    margin-right: 6px;
}
.board_list .board_row .board_item.date{
    font-family: pretendard-medium;
    color: #8A8A8A;
}
.board_list .board_row .board_item.view{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: pretendard-medium;
    color: #8A8A8A;
    text-align: center;
}

.board_list .board_row .board_item.view span {
    width:40px;
}

.board_list .board_row .board_item.download{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: pretendard-medium;
    color: #8A8A8A;
    text-align: center;
}


.basic_select{
    border-radius: 10px;
    border: 1px solid #C1C3C7;
    appearance: none;
    background: no-repeat right 16px center/24px 24px;
    background-image: url("/res/home/publish/img/common/arrow_down.svg");
    color: #333333;
    box-sizing: border-box;
    font-family: pretendard-medium;
}
.basic_input input{
    border-radius: 10px;
    border: 1px solid #C1C3C7;
    appearance: none;
    background: no-repeat right 16px center/24px 24px;
    background-image: url("/res/home/publish/img/common/icon_search.svg");
    color: #333333;
    box-sizing: border-box;
    cursor: text;
    font-family: pretendard-medium;
}
.basic_input input::placeholder{
    color: #8A8A8A;
}
@media screen and (min-width:1400px) {
    .board_list_header{
        margin-bottom: 24px;
    }
    .board_list_header .total_count{
        font-size: 16px;
        line-height: 28px;
    }
    .board_list_header .total_count .number{
        font-size: 18px;
    }
    .board_list_header .board_search{
        gap: 12px;
    }
    .board_list .board_row{
        padding: 32px;
        gap: 32px;
    }
    .board_list .board_row .board_item.count{
        font-size: 16px;
        line-height: 24px;
        min-width: 60px;
    }
    .board_list .board_row .board_item.title{
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .board_list .board_row .board_item.title span{
        font-size: 18px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.date{
        font-size: 16px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.view{
        gap: 8px;
        font-size: 16px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.view > img{
        width: 24px;
        height: 24px;
    }
    .basic_select{
        width: 140px;
        height: 48px;
        font-size: 16px;
        line-height: 46px;
        padding: 0px 15px;
    }
    .basic_input input{
        height: 48px;
        font-size: 16px;
        line-height: 46px;
        padding: 11px 15px;
        width: 320px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .board_list_header{
        margin-bottom: 16px;
        flex-direction: column-reverse;
        gap: 16px;
    }
    .board_list_header .total_count{
        font-size: 14px;
        line-height: 24px;
        margin-right: auto;
    }
    .board_list_header .total_count .number{
        font-size: 16px;
    }
    .board_list_header .board_search{
        width: 100%;
        gap: 12px;
    }
    .board_list_header .board_search .basic_input{
        width: calc(100% - 122px);
    }
    .board_list .board_row{
        padding: 16px;
        gap: 4px 8px;
    }
    .board_list .board_row .board_item.count{
        display: none;
    }
    .board_list .board_row.always_on_top .board_item.count{
        display: block;
        font-size: 14px;
        line-height: 24px;
        width: 25px;
    }
    .board_list .board_row .board_item.title{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        width: calc(100% - 33px);
    }
    .board_list .board_row .board_item.title img{
        display:none;
    }
    .board_list .board_row .board_item.title span{
        font-size: 16px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.title .icon_clip{
        display: none;
    }
    .board_list .board_row .board_item.date{
        font-size: 14px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.view{
        gap: 8px;
        font-size: 14px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.view > img{
        width: 24px;
        height: 24px;
    }
    .basic_select{
        width: 110px;
        height: 45px;
        font-size: 14px;
        line-height: 43px;
        padding: 0px 15px;
    }
    .basic_input input{
        height: 45px;
        font-size: 14px;
        line-height: 43px;
        padding: 0px 15px;
        width: 100%;
    }
}

@media screen and (max-width:767px) {
    .board_list_header{
        margin-bottom: 16px;
        flex-direction: column-reverse;
        gap: 16px;
    }
    .board_list_header .total_count{
        font-size: 14px;
        line-height: 24px;
        margin-right: auto;
    }
    .board_list_header .total_count .number{
        font-size: 16px;
    }
    .board_list_header .board_search{
        width: 100%;
        gap: 12px;
    }
    .board_list_header .board_search .basic_input{
        width: calc(100% - 122px);
    }
    .board_list .board_row{
        padding: 16px;
        gap: 4px 8px;
    }
    .board_list .board_row .board_item.count{
        display: none;
    }
    .board_list .board_row.always_on_top .board_item.count{
        display: block;
        font-size: 14px;
        line-height: 24px;
        width: 25px;
    }
    .board_list .board_row .board_item.title{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        width: calc(100% - 33px);
    }

    .board_list .board_row .board_item.title img{
        display:none;
    }

    .board_list .board_row .board_item.title span{
        font-size: 16px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.title .icon_clip{
        display: none;
    }
    .board_list .board_row .board_item.date{
        font-size: 14px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.view{
        gap: 8px;
        font-size: 14px;
        line-height: 24px;
    }
    .board_list .board_row .board_item.view > img{
        width: 24px;
        height: 24px;
    }
    .basic_select{
        width: 110px;
        height: 45px;
        font-size: 14px;
        line-height: 43px;
        padding: 0px 15px;
    }
    .basic_input input{
        height: 45px;
        font-size: 14px;
        line-height: 43px;
        padding: 0px 15px;
        width: 100%;
    }
}

.board_list .no_data_message {
    font-family: pretendard-regular;
    font-size : 16px;
    padding-top:150px;
    padding-bottom:100px;
    text-align: center;
}


.board_detail{
    text-align: center;
}
.board_detail_header{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-top: 1px solid #1A1A1A;
    border-bottom: 1px solid #C1C3C7;
    flex-direction: column;
}
.board_detail_header .board_detail_title{
    font-family: pretendard-bold;
    color: #222222;
    text-align: center;
}
.board_detail_header .board_detail_header_sub{
    display: flex;
    align-items: center;
    justify-content: center;
}
.board_detail_header .board_detail_header_sub .date{
    font-family: pretendard-medium;
    color: #777777;
}
.board_detail_header .board_detail_header_sub .view{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: pretendard-medium;
    color: #777777;
}

.board_detail_header .board_detail_header_sub .view span{
    margin-left:8px;
}
.board_detail .board_detail_body{
    font-family: pretendard-medium;
    color: #222222;
    border-bottom: 1px solid #C1C3C7;
    text-align: left;
    font-size: 18px;
}
.board_detail_attach{
    border-bottom: 1px solid #C1C3C7;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.board_detail_attach > .title{
    font-family: pretendard-medium;
    color: black;
    flex-shrink: 0;
}
.board_detail_attach .board_detail_attach_list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}
.board_detail_attach .board_detail_attach_list .board_detail_attach_item{
    display: flex;
    align-items: center;
    background-color: #F4F9FF;
}
.board_detail_attach .board_detail_attach_list .board_detail_attach_item a{
    display: flex;
    align-items: center;
    width: 100%;
}
.board_detail_attach .board_detail_attach_list .board_detail_attach_item *{
    cursor: pointer;
}
.board_detail_attach .board_detail_attach_list .board_detail_attach_item .title{
    font-family: pretendard-medium;
    color: black;
}
.board_detail .list_btn{
    background-color: #3283DC;
    border-radius: 10px;
    font-family: pretendard-medium;
    color: white;
    margin: auto;
    cursor: pointer;
}
@media screen and (min-width:1400px) {
    .board_detail{
        margin-top: 60px;
    }
    .board_detail_header{
        gap: 24px;
        padding: 40px;
    }
    .board_detail_header .board_detail_title{
        font-size: 32px;
        line-height: 45px;
    }
    .board_detail_header .board_detail_header_sub{
        gap: 20px;
    }
    .board_detail_header .board_detail_header_sub .date{
        font-size: 16px;
        line-height: 24px;
    }
    .board_detail_header .board_detail_header_sub .view{
        font-size: 16px;
        line-height: 24px;
    }
    .board_detail .board_detail_body{
        padding: 40px 32px;
    }
    .board_detail_attach{
        padding: 24px 32px;
        gap: 24px;
    }
    .board_detail_attach > .title{
        font-size: 16px;
        line-height: 48px;
    }
    .board_detail_attach .board_detail_attach_list{
        gap: 10px;
        width: calc(100% - 80px);
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item{
        padding: 10px 28px;
        border-radius: 50px;
        max-width: 100%;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .clip{
        width: 24px;
        height: 24px;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .title{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 16px;
        line-height: 28px;
        margin-left: 8px;
        margin-right: 24px;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .down{
        width: 20px;
        height: 20px;
    }
    .board_detail .list_btn{
        font-size: 16px;
        line-height: 48px;
        width: 240px;
        margin-top: 32px;
    }
}

@media screen and (min-width:768px) and (max-width:1399px) {
    .board_detail{
        margin-top: 20px;
    }
    .board_detail_header{
        gap: 12px;
        padding: 24px 12px;
    }
    .board_detail_header .board_detail_title{
        font-size: 24px;
        line-height: 34px;
    }
    .board_detail_header .board_detail_header_sub{
        gap: 8px;
    }
    .board_detail_header .board_detail_header_sub .date{
        font-size: 14px;
        line-height: 20px;
    }
    .board_detail_header .board_detail_header_sub .view{
        font-size: 14px;
        line-height: 20px;
    }
    .board_detail .board_detail_body{
        padding: 20px 12px;
    }
    .board_detail_attach{
        padding: 24px 12px;
        gap: 16px;
        flex-direction: column;
        align-items: center;
    }
    .board_detail_attach > .title{
        font-size: 14px;
        line-height: 20px;
    }
    .board_detail_attach .board_detail_attach_list{
        gap: 10px;
        flex-direction: column;
        width: 100%;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item{
        padding: 10px 12px;
        border-radius: 50px;
        width: 100%;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .clip{
        width: 24px;
        height: 24px;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .title{
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        line-height: 28px;
        margin-left: 8px;
        margin-right: 24px;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .down{
        width: 20px;
        height: 20px;
        margin-left: auto;
    }
    .board_detail .list_btn{
        font-size: 14px;
        line-height: 45px;
        width: 240px;
        margin-top: 24px;
    }
}

@media screen and (max-width:767px) {
    .board_detail{
        margin-top: 20px;
    }
    .board_detail_header{
        gap: 12px;
        padding: 24px 12px;
    }
    .board_detail_header .board_detail_title{
        font-size: 24px;
        line-height: 34px;
    }
    .board_detail_header .board_detail_header_sub{
        gap: 8px;
    }
    .board_detail_header .board_detail_header_sub .date{
        font-size: 14px;
        line-height: 20px;
    }
    .board_detail_header .board_detail_header_sub .view{
        font-size: 14px;
        line-height: 20px;
    }
    .board_detail .board_detail_body{
        padding: 20px 12px;
    }
    .board_detail_attach{
        padding: 24px 12px;
        gap: 16px;
        flex-direction: column;
        align-items: center;
    }
    .board_detail_attach > .title{
        font-size: 14px;
        line-height: 20px;
    }
    .board_detail_attach .board_detail_attach_list{
        gap: 10px;
        flex-direction: column;
        width: 100%;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item{
        padding: 10px 12px;
        border-radius: 50px;
        width: 100%;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .clip{
        width: 24px;
        height: 24px;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .title{
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        line-height: 28px;
        margin-left: 8px;
        margin-right: 24px;
    }
    .board_detail_attach .board_detail_attach_list .board_detail_attach_item .down{
        width: 20px;
        height: 20px;
        margin-left: auto;
    }
    .board_detail .list_btn{
        font-size: 14px;
        line-height: 45px;
        width: 240px;
        margin-top: 24px;
    }
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* 배경색 변경: white 부분을 원하는 배경색 코드로 변경하세요 */
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;

    /* 텍스트 색상 변경: 자동완성 시 글자색도 강제로 검정으로 변하므로 설정 필요 */
    -webkit-text-fill-color: #000 !important;

    /* (선택사항) 폰트 크기나 스타일 유지 */
    transition: background-color 5000s ease-in-out 0s;
}