/* responsive */
@media screen and (max-width: 1400px) {
    /*오픈전 헤더*/
    header .header-inner {
        padding: 0 20px;
    }

    .section-wrap h2 {
        font-size: 1.75rem;
        font-weight: 500;
        margin: 120px 0 30px 0;
        padding:0 20px;
    }

    .medical-wrap h2
    {
        padding-left: 20px;
    }

    .sc1 .mental-main-text-wrap {
        left: 20px;
        top: 50px;
    }
    .sc1 h2 {
        font-size: 3rem;
        line-height: 60px;
    }
    .sc1 .mental-main-text-wrap p {
        font-size: 1rem;
        line-height: 26px;
    }

    .mental-contents-area {
        flex-direction: column;
    }

    .sc2 {
        padding: 0 20px;
    }

    .sc2 .news-title-wrap {
        padding: 0 15px 15px 15px;
        box-sizing: border-box;
    }
    .sc2 .news-title-wrap ul {
        display: none;
    }

    .sc2 .news-article-wrap {
        flex-direction: column;
    }
    .sc2 .news-article-wrap a {
        width: 100%;
        height: 120px;
        border-top: 1px solid var(--gray-1);
    }
    .sc2 .news-article-wrap a:last-child {
        border-bottom: 1px solid var(--gray-1);
    }
    .sc2 .news-article-wrap article {
        padding: 20px 10px;
        box-sizing: border-box;
    }
    .sc2 .news-article-wrap article h4, .sc2 .news-article-wrap article p {
        -webkit-line-clamp: 1;
    }
    .sc2 .news-article-wrap article p {
        margin: 15px 0 10px 0;
    }

    .sc2 .mental-event-area {
        width: 100%;
        margin-top: 15px;
    }
    .sc2 .mental-event-info strong {
        font-size: 2rem;
        line-height: 40px;
    }
    .sc2 .mental-event-info button {
        width: 180px;
    }

    .sc3 .mental-info-area {
        flex-direction: column;
    }
    .sc3 .info-title-area {
        margin-bottom: 25px;
    }
    .sc3 .info-title-area strong {
        font-size: 1.6rem;
        line-height: 34px;
    }

    .sc3 .info-icon-area {
        width: 100%;
        justify-content: center;
    }
    .sc3 .info-icon-area .info-icon-line {
        margin: 0 15px;
    }
    .sc3 .info-icon-area .info-icon-wrap {
        width: 100%;
    }
    .sc3 .info-icon-area .info-icon-wrap img {
        width: 30px;
        height: 30px;
    }
    .sc3 .info-icon-area .info-icon-wrap h5 {
        font-size: 0.85rem;
    }


    .mental-health-category {
        padding: 0 20px;
    }

    .all-reserved-area {
        padding: 0 20px 10px 20px;
    }
    .section-wrap table tr td {
        text-align: center;
    }

    .news-detail-wrap article {
        margin: 40px 0 60px 0;
        padding: 0 20px;
    }

    ul.news-detail-btn-view li a span{
        padding-left: 20px;
    }
    .reserve-list-img-area {
        padding-left: 20px;
    }

    .mental-layout {
        padding: 65px 0px 5px 0px;
    }

    .mypage-layout {
        padding-left: 20px;
    }
    section.mypage-area {
        font-size: 1.75rem;
        font-weight: 500;
        margin-top: 120px;
    }

    .dc-title-area {
        margin: 120px 0 80px 0;
    }

    .reserved-calender-area .reserved-calender-text-wrap p,
    .medical-calendar-wrap {
        padding: 0 20px;
    }

    .medical-form-title-area {
        margin-left: 50px;
    }

}

@media screen and (max-width: 1200px) {
    header ul.gnb {
        /*display: none;*/
    }
}

/* 모바일 헤더/메뉴 */
@media screen and (max-width: 1200px) { /* 768에서 아이패드 때문에 변경 */

    /*오픈전 헤더*/
    header .header-inner {
        height: 60px;
    }

    header .header-inner:hover .hidden-gnb-area {
        display: none;
    }
    header .header-inner .gnb,
    header .header-inner .gnb-btn-area {
        display: none;
    }

    /*오픈후 헤더*/
    header .header-inner.open {
        position: fixed;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100vh;
        background-color: #F8FDFE;
        z-index: 2001;
    }

    header .header-inner.open .header-inner-wrap {
        display: block;
        padding-left: 44px;
        overflow: hidden;
    }

    header .header-inner.open .header-inner-wrap .nav-wrap {
        display: block;
        padding: 2.5rem 0;
        /*height: 60vh;*/
        overflow-x: hidden;
        overflow-y: auto;
    }

    header .header-inner.open .header-inner-wrap .nav-wrap .gnb-mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 3rem;
        gap: 1.25rem;
    }

    header .header-inner.open .header-inner-wrap .nav-wrap .gnb-mobile  > li > a {
        font-size: 1.150rem;
        font-weight: 900;
    }

    header .header-inner.open .header-inner-wrap .nav-wrap > ul > li ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.1rem;
        margin-left: 1.1rem;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
    }

    header .header-inner.open .header-inner-wrap > ul > li ul li {
        position: relative;
    }

    header .header-inner.open .header-inner-wrap > ul > li ul li a::before {
        content: '';
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin-right: 0.5rem;
        width: 8px;
        height: 3px;
        border-radius: 8px;
        vertical-align: middle;
        background-color: var(--main_color);
    }

    /* 모바일 메뉴창 아래 버튼 */
    header .header-inner.open .gnb-btn-area {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 170px;
        height: 40px;
        background-color: var(--main_color);
        border-radius: 20px;
        margin: 0 auto;
    }
    header .header-inner.open .gnb-btn-area a {
        font-weight: 500;
        font-size: 0.875rem;
        color: #FFF;
    }
    header .header-inner.open .gnb-btn-area a:hover {
        text-decoration: underline;
    }
    header .header-inner.open .gnb-btn-area .divided-bar {
        width: 1px;
        height: 18px;
        background-color: #FFF;
        margin: 0 15px;
    }

    .section-wrap h2 {
        font-size: 1.75rem;
        font-weight: 500;
        margin: 20px 0 30px 0;
        padding:0 20px;
    }

    section.mypage-area {
        margin-top: 60px;
    }
    .dc-title-area {
        margin: 60px 0 80px 0;
    }

}

@media screen and (max-width: 1200px) { /* 768에서 아이패드 때문에 변경 */

    .sc1 .mental-main-url-wrap a span {
        font-size: 1.4rem;
    }

    .m_show {
        display:block;
        font-size:0.9rem;
        color: var(--gray-2);
    }
    .m_hidden {
        display:none;
    }

    .mental-layout .sc-prep .nav-wrap {
        display:none;
    }

    .all-reserved-area {
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid #333;
    }
    .all-reserved-area p {
        font-size: 1.1rem;
        font-weight: 500;
        color: #333;
    }
    .all-reserved-area p strong {
        font-weight: 700;
        color: var(--main_color);
    }


    .section-wrap table {
        width: 100%;
        color: #333;
    }
    .section-wrap table tr {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid var(--gray-1);
    }
    .section-wrap table tr th {
        height: 40px;
        line-height: 40px;
        font-weight: 500;
    }

    .section-wrap table tr td:nth-child(2) {
        text-align: start;
    }

    .section-wrap table tr th:nth-child(1) {
        width: 10%;
    }
    .section-wrap table tr th:nth-child(2) {
        width: 80%;
    }

    .section-wrap table tr td a {
        width: 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 15px;
    }
    .section-wrap table tr td a:hover {
        text-decoration: underline;
    }
    .section-wrap table tr td a span {
        margin-left: 7px;
    }



    .medical-wrap h2 {
        font-size: 1.75rem;
        font-weight: 500;
        margin: 20px 0 30px 0;
    }


    .medical-wrap table {
        width: 100%;
        color: #333;
    }
    .medical-wrap table tr {
        height: 50px;
        line-height: 20px;
        border-bottom: 1px solid var(--gray-1);
    }
    .medical-wrap table tr th {
        height: 40px;
        line-height: 40px;
        font-weight: 500;
    }
    .medical-wrap table tr td {
        text-align: start;
    }

    .medical-wrap table tr td a {
        width: 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 15px;
    }
    .medical-wrap table tr td a:hover {
        text-decoration: underline;
    }
    .medical-wrap table tr td a span {
        margin-left: 7px;
    }

    .news-detail-before {
        display: none;
    }
    .detail-title-area {
        padding: 35px 0;
    }

    .btn-gnb-toggle {
        position: fixed;
        top: 10px;
        right: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-width: 1.875rem;
        width: 1.875rem;
        height: 1.875rem;
        border: none;
        border-radius: 0.625rem;
        background-color: var(--btn-action-bg);
        -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1);
        z-index: 2001;
    }

    .btn-gnb-toggle:hover, .btn-gnb-toggle:focus {
        border: none;
        outline: none;
    }

    .btn-gnb-toggle span:not(.sr-only) {
        display: block;
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%22665299' d='M21 11H3c-.6 0-1 .4-1 1s.4 1 1 1h18c.6 0 1-.4 1-1s-.4-1-1-1zM3 7h18c.6 0 1-.4 1-1s-.4-1-1-1H3c-.6 0-1 .4-1 1s.4 1 1 1zM21 17H3c-.6 0-1 .4-1 1s.4 1 1 1h18c.6 0 1-.4 1-1s-.4-1-1-1z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }

    .btn-gnb-toggle span.close {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%22665299' d='m13.4 12 5.3-5.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L12 10.6 6.7 5.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l5.3 5.3-5.3 5.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3l5.3-5.3 5.3 5.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z'/%3E%3C/svg%3E");
    }

    /*.mental-layout .mypage-area {*/
    /*    font-size: 2.5rem;*/
    /*    margin-top: 20px;*/
    /*}*/

}



@media screen and (max-width: 700px) {
    .reserve-list section {
        height: auto;
        flex-direction: column;
        padding: 15px;
        box-sizing: border-box;
    }
    .reserve-list section .reserve-list-doc-wrap {
        margin-bottom: 15px;
    }
    .reserve-list-text-area p {
        -webkit-line-clamp: 1;
    }
    .reserve-list-btn-area {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    header h1 {
        width: 100px;
        height: 40px;
    }

    section.mental-login {
        width: 300px;
        height: 530px;
    }

    section.mental-login .mental-login-contents {
        width: 100%;
        max-width: 280px;
    }

    section.mental-login .login-input-container {
        width: 100%;
        max-width: 280px;
        margin-top: 35px;
    }

    section.mental-login h2 {
        font-weight: 700;
        font-size: 2.0rem;
    }

    section.mental-login .mental-login-btn {
        height: 45px;
        margin-top: 40px;
    }
    section.mental-login .mental-login-btn button {
        font-size: 1.0rem;
    }

    ul.selfcheck-list .check-btn-right {
        padding: 10px 5px;
        min-width: 70px;
    }

    .sc2 .mental-event-info {
        margin-left: 15px;
    }

    .sc2 .mental-event-info {
        padding-right: 10px;
    }

    .sc2 .mental-event-info strong {
        font-size: 1.6rem;
        line-height: 30px;
    }

    .sc2 .mental-event-info button {
        width: 150px;
    }

    footer .footer-info-wrap:first-child {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px;
    }
    footer .footer-info-wrap .footer-line {
        display: none;
    }
    footer .footer-info-wrap h6 {
        margin-bottom: 8px;
    }
}

@media screen and (max-width: 400px) {
    .sc1 .mental-main-url-wrap {
        width: 100%;
    }

    .sc3 .info-title-area {
        text-align: center;
    }
    .sc3 .info-icon-area {
        flex-direction: column;
    }
    .sc3 .info-icon-area .info-icon-wrap {
        margin: 15px 0;
    }
    .sc3 .info-icon-area .info-icon-line {
        display: none;
    }

    .mental-health-category span {
        font-size: 1rem;
        padding: 6px;
    }

    .section.selfcheck-area {
        margin: 0;
    }
    .dc-title-area {
        margin: 60px 0 80px 0;
    }

    ul.selfcheck-list li button h4.check-btn-title {
        font-weight: 700;
        font-size: 0.9rem;
        margin: 0;
    }
    ul.selfcheck-list .check-btn-right {
        padding: 10px 5px;
        min-width: 70px;
    }

    ul.selfcheck-list li button strong {
        font-size: 0.9rem;
    }
}