@charset "utf-8";
@import url(../fonts/font_css/font.css);

body {
    font-family: 'Pretendard';
    font-size:18px;
    color:#222;
    line-height:normal;
    overflow-x:hidden;
}
#container_wr {
    min-height:60vh;
    margin-top:141px;
}
.mircenter {
    width:100%;
    max-width:1440px;
    padding:0 20px;
    margin:0 auto;
}
#container_title {
    font-size:1.55rem;
    font-weight:700;
    text-align:center;
    padding:50px 20px;
}
#wrapper #subpage_container {
    display:flex;
    flex-direction:row-reverse;
    align-items: flex-start;
    gap:50px;
}
#wrapper #subpage_container .subpage {
    flex:1;
    width:100%;
}


/* header */
#header {
    border-bottom:1px solid #D9D9D9;
    background-color:#fff;
    width:100%;
    position:fixed;
    top:0;
    z-index: 999;
}
#header .header_top {
  overflow: hidden;
  transition:
    height 0.3s ease,
    opacity 0.3s ease;
  height: auto;
  opacity: 1;
}

#header .header_top.hide,
#header .header_bottom.hide {
  height: 0;
  opacity: 0;
}
#header .header_top .mircenter{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:80px;
}
#header .header_top .logo a {
    display:flex;
    align-items:center;
    gap:20px;
}
#header .header_top .convenience {
    display:flex;
    align-items:center;
    gap:20px;
}
#header .header_top .convenience .user {
    display:flex;
    align-items:center;
    gap:20px;
}
#header .header_top .convenience .user li a {
    display:block;
    padding:7px 15px;
    border:1px solid #CACACA;
    border-radius:999px;
    font-size:0.88rem;
    font-weight:500;
    letter-spacing:-0.48px;
    color:#555;
}
#header .header_top .convenience .user li a.write_apply {
    border-color:#774C9E;
    color:#774C9E;
    background-color:#F6EDFF;
}
#header .header_top .convenience .user li a svg {
    display:none;
}
#header .header_top .convenience .mo_user {
    display:none;
}
#header .header_top .convenience .gnb_menu_btn {
    background:transparent;
    display:none;
}


/* gnb */
#gnb {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:60px;
}
#gnb .global {
    flex:1;
}
#gnb .global .depth1 {
    display:flex;
    align-items:center;
    gap:50px;
}
#gnb .global .depth1 li a {
    font-size:0.92rem;
    font-weight:600;
    letter-spacing:-0.54px;
}
#gnb .gnb_menu_btn {
    background:transparent;
    display:flex;
    align-items:center;
    gap:10px;
    
}
#gnb .gnb_menu_btn p {
    font-size:1rem;
    font-weight:600;
    letter-spacing:-0.54px;
}




/* gnb_all 전체메뉴 */
#gnb_all {
    border:1px solid #CACACA;
    background-color:#fff;
    padding:30px 30px 50px;
    border-radius:20px;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:999;
    width:100%;
    max-width:730px;
    display:none;
}
#gnb_all .header_user {
    display:none;
}
#gnb_all .mo_login_btns {
    display:flex;
    align-items:stretch;
    gap:20px;
}
#gnb_all .mo_login_btns a {
    background-color:#fff;
    border-radius:10px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
    padding:10px;
    flex:1;
    font-size:0.77rem;
    font-weight:600;
    letter-spacing:-0.42px;
    text-align:center;
    display:none;
}
#gnb_all .mo_profile {
    display:flex;
    flex-direction:column;
    gap:15px;
    background-color:#fff;
    border-radius:20px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
    padding:20px 10px;
    display:none;
    margin-top:20px;
} 
#gnb_all .mo_profile .my_profile {
    display:flex;
    align-items:center;
    gap:20px;
}
#gnb_all .mo_profile .my_profile .profile_img {
    display:flex;
    align-items:center;
    gap:10px;
}
#gnb_all .mo_profile .my_profile .profile_img .profile_name {
    font-size:0.88rem;
    font-weight:400;
    letter-spacing:-0.48px;
}
#gnb_all .mo_profile .my_profile .mypage_go {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    font-weight: 400;
    letter-spacing:-0.36px;
    color:#8E8E8E;
}
#gnb_all .mo_profile .profile_btns {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}
#gnb_all .mo_profile .profile_btns a {
    font-size:0.88rem;
    font-weight:-0.48px;
    font-weight:600;
}


#gnb_all .gnb_al_ul {
    display:flex;
    align-items:flex-start;
    gap:30px;
}
#gnb_all .gnb_al_ul .gnb_al_li {
    flex:1;
    width:110px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}
#gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a {
    display:block;
    font-size:1rem;
    font-weight:600;
    letter-spacing:-0.54px;
    text-align:center;
}
#gnb_all .gnb_al_ul .gnb_al_li .gnb_al_li_point {
    width:50px;
    height:1px;
    background-color:#CACACA;
}
#gnb_all .gnb_al_ul .gnb_al_li .gnb_al_dep2 {
    display: flex;
    flex-direction:column;
    text-align:center;
    gap:5px;
}
#gnb_all .gnb_al_ul .gnb_al_li .gnb_al_dep2 li a {
    font-size:0.88rem;
    font-weight:400;
    letter-spacing:-0.48px;
    color:#8E8E8E;
    text-align:center;
}


#gnb_all .gnb_menu_btn .icon-close { 
    display: none; 
}
#gnb_all .gnb_menu_btn.is-open .icon-open { 
    display: none; 
}
#gnb_all .gnb_menu_btn.is-open .icon-close { 
    display: block;
}


#gnb_all .more_user_btns {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:43px;
    padding-top:20px;
    margin-top:20px;
    border-top:1px solid #E2E2E2;
}
#gnb_all .more_user_btns a {
    font-size:1rem;
    font-weight:600;
    letter-spacing:-0.54px;
    position: relative;
}
#gnb_all .more_user_btns a::before {
    content:'';
    width:3px;
    height:3px;
    background-color:#E2E2E2;
    border-radius:999px;
    position:absolute;
    left:-23px;
    top:50%;
    transform:translateY(-50%);
}
#gnb_all .more_user_btns a:first-child::before {
    display:none;
}

#gnb_all .allmenu_close {
    width:68px;
    height:25px;
    background-color:#222;
    border-radius:5px 5px 0 0;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:0.77rem;
    font-weight:800;
    letter-spacing:-0.42px;
    position: absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
}





/* footer */
#footer {
    margin-top:100px;
    background-color:#555;
}
#footer .footer_top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 0;
    border-bottom:1px solid #CACACA;
}
#footer .footer_top .footer_btns {
    display:flex;
    align-items:center;
    gap:40px;
}
#footer .footer_top .footer_btns a {
    font-size:0.75rem;
    font-weight:500;
    line-height:214%;
    color:#fff;
    position: relative;
}
#footer .footer_top .footer_btns a::before {
    content:'';
    width:1px;
    height:14px;
    background-color:#CACACA;
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
}
#footer .footer_top .footer_btns a:last-child::before {
    display:none;
}
#footer .footer_top .footer_btns a.privacy {
    font-weight:700;
}
#footer .footer_top .logo a {
    display:flex;
    align-items:center;
    gap:20px;
}
#footer .footer_bottom {
    padding:20px 0;
}
#footer .footer_bottom .footer_info_wrap {
    display:flex;
    align-items:center;
    gap:8px;
}
#footer .footer_bottom .footer_info_wrap .footer_info {
    font-size:0.77rem;
    font-weight:400;
    line-height:157%;
    color:#CACACA;
    position: relative;
}
#footer .footer_bottom .footer_info_wrap .footer_info::before {
    content:'/';
    color:#CACACA;
    font-size:0.77rem;
    line-height:157%;
    position:absolute;
    left:-5px;
    top:0;
}
#footer .footer_bottom .footer_info_wrap .footer_info:first-child::before {
    display:none;
}
#footer .footer_bottom .footer_info_wrap .footer_info a {
    color:#CACACA;
    text-decoration:underline;
}


/* 메인 분활 */
#division {
    display:flex;
    align-items:flex-start;
    gap:50px;
}
#division #index_container {
    flex:1;
    max-width:1190px;
}
#aside {
    width:160px;
    position:sticky;
    top:25%;
}
#aside .aside_cont {
    display:flex;
    flex-direction:column;
    gap:40px;
}
#aside .aside_cont .go_writer {
    display:block;
    background-color:#774C9E;
    border-radius:5px;
    padding:5px;
    font-size:0.88rem;
    font-weight:500;
    letter-spacing:-0.48px;;
    color:#fff;
    text-align:center;
    margin-bottom:20px;
} 
#aside .aside_cont .profile {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}
#aside .aside_cont .profile .profile_img {
    width:100px;
    height:100px;
    background-color:#EDEDED;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}
#aside .aside_cont .profile .profile_name {
    font-size:1rem;
    font-weight:600;
    letter-spacing:-0.54px;
    color:#777;
    line-height:133%;
    text-align:center;
}
#aside .aside_cont .my_pages {
    display: flex;
    flex-direction:column;
    gap:20px;
    margin-top:20px;
} 
#aside .aside_cont .my_pages a {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1rem;
    font-weight:600;
    letter-spacing:-0.54px;
}
#aside .aside_cont .member {
    display:flex;
    flex-direction:column;
    gap:20px;
}
#aside .aside_cont .member li a {
    display:block;
    padding:7px 15px;
    border:1px solid #ddd;
    border-radius:999px;
    font-size:0.88rem;
    font-weight:500;
    letter-spacing:-0.48px;
    color:#555;
    text-align:center;
}
#aside .aside_cont .useway {
    display:flex;
    flex-direction:column;
    gap:20px;
    position: relative;
}
#aside .aside_cont .useway::before {
    content:'';
    width:100%;
    height:1px;
    background-color:#CACACA;
    position:absolute;
    left:0;
    top:-20px;
}
#aside .aside_cont .useway a {
    font-size:0.88rem;
    font-weight:500;
    letter-spacing:-0.48px;
    color:#777;
}




/* 반응형 미디어쿼리 css */
@media (max-width:1440px) {
    #division #index_container {
        flex:none;
        width:calc(100% - 210px);
    }
}
@media (max-width:1200px) {
    #division {
        margin-top:50px;
    }
}
@media (max-width:1024px) {
    #division #index_container {
        width:calc(100% - 170px);
    }
    #aside {
        width:120px;
    }
    #aside .aside_cont .profile .profile_img {
        width:80px;
        height:80px;
    }
    #aside .aside_cont .profile .profile_img svg {
        width:80px;
        height:80px;
    }
    #aside .aside_cont .my_pages li {
        font-size:0.88rem;
    }
    #aside .aside_cont .my_pages li svg {
        width:20px;
        height:20px;
    }
}
@media (max-width:991px) {
    body {
        font-size:16px;
    }
    #container_wr {
        margin-top:131px;
    }

    #gnb .global .depth1 .pc {
        display:none;
    }

    #division #index_container {
        width:100%;
    }

    #aside {
        display:none;
    }

    #header .header_top {
        height:70px;
    }
    #header .header_top .convenience .user {
        display:none;
    }
    #header .header_top .convenience .mo_user {
        display:block;
    }
    #header .header_top .convenience .gnb_menu_btn {
        display:block;
    }

    #header .header_bottom #gnb .pc_all_menu {
        display:none;
    }
    /* #gnb .gnb_menu_btn {
        display:none;
    } */
    
    
    
    #gnb_all {
        max-width:320px;
        padding:20px;
        left:auto;
        right:0;
        top:0;
        transform:unset;
        border-radius: 30px 0px 0px 30px;
        border:none;
        background-color:#F9F9F9;
    }
    #gnb_all .header_user {
        display:flex;
        gap:20px;
        align-items:center;
        justify-content: flex-end;
    }
    #gnb_all .mo_profile {
        display: flex;
    }
    #gnb_all .allmenu_close {
        display:none;
    }
    #gnb_all .allmenu_close.header_user_close {
        display:block;
    }
    #gnb_all .header_user .allmenu_close {
        width: auto;
        height:auto;
        background:transparent;
        position:unset;
        transform:unset;
        display:block;
    }

    #gnb_all .gnb_al_ul {
        flex-direction:column;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
        border-radius:30px;
        padding:20px;
        margin-top:20px;
        background-color:#fff;
        gap:10px;
    }
    #gnb_all .gnb_al_ul .gnb_al_li {
        width:100%;
        flex:none;
    }
    #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_li_point {
        display:none;
    }
    #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a {
        width:100%;
        text-align:left;
        font-weight: 800;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11' fill='none'%3E%3Cg clip-path='url(%23clip0_2380_85)'%3E%3Cpath d='M1.79818 6.42859L7.35279 10.2313C7.60932 10.407 7.86778 10.5 8.08261 10.5C8.49796 10.5 8.75488 10.1667 8.75488 9.60869L8.75488 1.39002C8.75488 0.832694 8.49828 0.5 8.08391 0.5C7.86875 0.5 7.61442 0.59309 7.35733 0.769312L1.80013 4.5719C1.44274 4.81684 1.24483 5.14646 1.24483 5.50044C1.24474 5.85418 1.44039 6.18372 1.79818 6.42859Z' fill='%23CACACA'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2380_85'%3E%3Crect width='10' height='10' fill='white' transform='translate(10 10.5) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 20px center;
    }
    #gnb_all .gnb_al_ul .gnb_al_li.active .gnb_al_a {
        color:#774C9E;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11' fill='none'%3E%3Cg clip-path='url(%23clip0_2380_80)'%3E%3Cpath d='M5.92859 8.70167L9.73125 3.14705C9.90699 2.89053 10 2.63207 10 2.41723C10 2.00189 9.66666 1.74496 9.10869 1.74496L0.890017 1.74496C0.332694 1.74496 -1.12165e-08 2.00157 -2.93292e-08 2.41594C-3.8734e-08 2.6311 0.09309 2.88543 0.269312 3.14252L4.0719 8.69972C4.31684 9.05711 4.64646 9.25502 5.00045 9.25502C5.35419 9.2551 5.68372 9.05945 5.92859 8.70167Z' fill='%23774C9E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2380_80'%3E%3Crect width='10' height='10' fill='white' transform='translate(10 0.5) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

    }
    #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_dep2 {
        width:100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        text-align:left;
    }
    #gnb_all .gnb_al_ul .gnb_al_li.active .gnb_al_dep2 {
        overflow: visible;
        background-color:#F9F9F9;
        border-radius:10px;
        text-align:left;
        gap:20px;
        padding:20px;
    }
    #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_dep2 li a {
        font-weight:600;
        color:#555;
    }

    

    #gnb_overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998; /* #gnb_all보다 하나 낮게 */
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 어두운 반투명 */
    }
    #gnb_all {
        z-index: 999; /* 메뉴가 위에 나오도록 */
    }

   #gnb_all .more_user_btns {
        border-top:none;
        padding-top:0;
        gap:33px;
    }
    #gnb_all .more_user_btns a::before {
        left:-18px;
    }


    #footer .footer_top .footer_btns {
        gap:20px;
    }
    #footer .footer_top .logo a img {
        height:30px;
    }
    #footer .footer_top .footer_btns a::before {
        right:-10px;
    }
    #footer .footer_bottom .footer_info_wrap {
        flex-direction:column;
        align-items:flex-start;
    }
    #footer .footer_bottom .footer_info_wrap .footer_info::before {
        display:none;
    }

}
@media (max-width:768px) {}
@media (max-width:640px) {
    
    .mircenter {
        padding:0 10px
    }
    
    #division {
        margin-top:0;
        padding-right:0;
    }

    #header .header_top .logo a {
        gap:10px;
    }
    #header .header_top .logo a img {
        height:25px;
    }
    #gnb .global .depth1 {
        gap:20px;
    }


    #footer .footer_top {
        flex-direction:column;
        align-items: flex-start;
        gap:10px;
    }
}
@media (max-width:480px) {
    #footer .footer_bottom .footer_info_wrap .footer_info {
        font-size:0.64rem;
    }
}