body {
    font-family: 'Theinhardt Mono', 'Pretendard'; /* 영문, 숫자, 한글 폰트 */
    font-weight: 400;
    word-break: keep-all;

    color: #fff;
    overflow: hidden;
    height: 100vh;

    user-select: none; /* 텍스트 드래그 방지 */

    margin: 0;
    padding: 0;

    background-color: #000;
}

.main-container {
    height: 100vh;
    position: relative;

    padding: 1.875rem;
}

/* =================== 배경 bulge effect canvas 관련 속성 ==================== */

.bulge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    margin: 0;

    display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

    opacity: 0;

  	transition: opacity 0.5s ease-in-out;
}
  
.bulge_canvas {
	width: 100%;
	height: 100%;

	position: relative;
	overflow: hidden;

	transform: scale(0.2); /* 실행하면 크기 변화를 통해 캔버스가 나옴 */
  
	transition: transform 1.2s cubic-bezier(0.22, 1.45, 0.36, 1) 0s;
}

.is-visible {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

.is-visible .bulge_canvas {
    transform: none; /* .is-visible일 때 transform을 none으로 설정 */
}

/* ==================================== */

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#sm-nav {
    display: none;
    z-index: 1;
}

#sm-HSDW {
    pointer-events: none;
}

#sm-WFF, .sm-footer {
    display: none;
    z-index: 1;

    pointer-events: none;
}

#ex-sm-nav {
    display: none;
    z-index: 1;
}

#WFF {
    margin-top: -1.75rem;
    mix-blend-mode: overlay;
}

#WFF a {
    color: #fff;
    text-decoration : none;
}

#WFF:hover {
    mix-blend-mode: difference;
}

#WFF > a > h1 {
    font-size: 11.25rem;
    line-height: 85%; /* 9.5625rem */

    padding-top: 4px;

    margin-block-start: 0rem;
    margin-block-end: 0rem;
}

#HSDW {
    display: flex;
    flex-direction: row;

    z-index: 1;
    pointer-events: none;
}

#HSDW h3 {
    font-size: 1.82813rem;
    font-weight: 400;
    line-height: 140%;

    margin: -0.6rem 0 0 0;
}

.info-kor {
    font-size: 1.6rem;
    font-weight: 500;
}

.HSDW-logo {
    margin-left: 2rem;

    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.HSDW-logo img {
    align-self: baseline;
    width: 3.8555rem;
}

footer {
    background-image: url("./img/main_background.png");
    background-clip: text;
    -webkit-background-clip: text;
    mix-blend-mode: exclusion;

    display: flex;
    flex-direction: row;

    pointer-events: none;
}

.date {
    position: absolute;
    bottom: -0.7rem;
    line-height: 1;
}

.date h5 {
    font-family: 'Theinhardt Mono';
    font-size: 6rem;
    letter-spacing: .05em;

    margin: 0 0 -2.625rem -0.4rem;
}

.date h6 {
    font-size: 6rem;
    letter-spacing: .02em;

    margin: 0 0 1.2rem 12.25rem;
}

.place {
    font-size: 1.82813rem;
    line-height: 140%;

    position: absolute;
    bottom: 0.25rem;
    right: 1.875rem;
    padding: 0;

    display: flex;
    flex-direction: row-reverse;
}


/* ============================================================ */

.popup-wrap {

    /* 모든 방향에 0을 주면 화면에 꽉차게 된다. */
    top: 0;
    right: 2rem;
    bottom: 0;

    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;

    z-index: 1;

    pointer-events: none;
}

.popup {
    width: 80%;
    height: 60%;
    color: #fff;
    overflow-y: scroll;
    overflow-x: hidden;

    padding: 1rem;

    background-image: url("../img/timetable_background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-content: space-between;

    z-index: 1;
    pointer-events:all;
  }

.popup-header{
    width: 100%;

    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid #fff;

    flex-grow: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header-title {
    font-size: 2rem;
}

.pop-btn-close {
    font-size: 2rem;
    line-height: 0;
}

.popup-body{
    width: 100%;

    flex-grow: 1;
}

.popup-body > img {
    width: 100%;
}

@media (max-width: 1200px) and (min-width: 992px) {
    body {
        overflow: hidden;
    }

    #WFF > a > h1 {
        font-size: 10rem;
        line-height: 85%;
    
        padding-top: 4px;
    
        margin-block-start: 0rem;
        margin-block-end: 0rem;
    }

    #HSDW h3 {
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 140%;
    
        margin: -0.4rem 0 0 0;
    }
    
    .info-kor {
        font-size: 1.1rem;
        font-weight: 500;
    }

    .HSDW-logo {
        margin-left: 2rem;
    
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .HSDW-logo img {
        align-self: baseline;
        width: 2.75rem;
    }

    .date {
        position: absolute;
        bottom: -0.7rem;
        line-height: 200%;

        display: flex;
        flex-direction: row;
    }

    .date h5 {
        font-family: 'Theinhardt Mono';
        font-size: 4rem;
        letter-spacing: .05em;
    
        margin: 0 0 1.2rem -0.4rem;
    }
    
    .date h6 {
        font-family: 'Theinhardt Mono';
        font-size: 4rem;
        letter-spacing: .02em;
    
        margin: 0 0 1.2rem 1rem;
    }
    
    .place {
        font-size: 1.25rem;
        line-height: 140%;
    
        position: absolute;
        bottom: 0.25rem;
        right: 1.875rem;
    }

    .header-title {
        font-size: 1.75rem;
    }
    
    .pop-btn-close {
        font-size: 1.75rem;
        line-height: 0;
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    body {
        overflow: hidden;
    }

    .main-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    
        margin: 0;
    }

    #WFF {
        margin-top: -1.75rem;

        mix-blend-mode: overlay;
    }

    #WFF > a > h1 {
        font-size: 8rem;
        line-height: 85%;
    
        padding-top: 4px;
    
        margin-block-start: 0rem;
        margin-block-end: 0rem;
    }

    #HSDW h3 {
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 140%;
    
        margin: -0.4rem 0 0 0;
    }
    
    .info-kor {
        font-size: 1rem;
        font-weight: 500;
    }

    .HSDW-logo {
        margin-left: 1rem;
    
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .HSDW-logo img {
        align-self: baseline;
        width: 2.4rem;
    }

    .date {
        position: absolute;
        bottom: -0.7rem;
        line-height: 200%;

        display: flex;
        flex-direction: row;
    }

    .date h5 {
        font-family: 'Theinhardt Mono';
        font-size: 3rem;
        letter-spacing: .05em;
    
        margin: 0 0 1.2rem -0.4rem;
    }
    
    .date h6 {
        font-family: 'Theinhardt Mono';
        font-size: 3rem;
        letter-spacing: .02em;
    
        margin: 0 0 1.2rem 0.5rem;
    }
    
    .place {
        font-size: 1rem;
        line-height: 140%;
    
        position: absolute;
        bottom: 0.25rem;
        right: 1.875rem;
    }

    .popup-wrap {

        /* 모든 방향에 0을 주면 화면에 꽉차게 된다. */
        top: 30%;
        left: 0;
        right: 0;
        bottom: 0.5rem;
    
        display: none;
        justify-content: center;
        align-items: center;
        position: fixed;
    }
}

@media (max-width: 768px) and (min-width: 576px) {
    body {
        font-family: 'Theinhardt Mono', 'Pretendard'; /* 영문, 숫자, 한글 폰트 */
        font-weight: 400;
    
        color: #fff;
        overflow: hidden;
        height: 100vh;
    
        user-select: none; /* 텍스트 드래그 방지 */
    
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
    }

    .main-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    
        margin: 0;
    }

    .main-container {
        position: relative;
        
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    header #WFF, header #HSDW {
        display: none;
    }

    #sm-WFF {
        display: block;
        width: 100%;

        position: absolute;
        transform: translateY(-40%);

        top: 37.5%;
        right: 0;
        bottom: 0;
        left: 0;

        mix-blend-mode: exclusion;
    }

    #sm-WFF h1 {
        font-size: 6rem;
        line-height: 95%;
        text-align: center;
    }

    #sm-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #sm-nav > a > img {
        width: 3.75rem;
        align-self: baseline;
    }

    #sm-nav > a > img:hover {
        opacity: 80%;
    }

    #sm-HSDW {
        display: flex;
        flex-direction: row;
    }

    #sm-HSDW h3 {
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 140%;
    
        margin: -0.3rem 1rem 0 0;
    }
    
    .info-kor {
        font-size: 0.8rem;
        font-weight: 500;
    }

    #sm-HSDW img {
        width: 2rem;
        align-self: baseline;
    }

    footer, .date, .place {
        display: none;
    }

    .sm-footer {
        display: flex;
        flex-direction: column;
        justify-self: flex-end;

        margin-bottom: 0.75rem;

        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .sm-date {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .sm-date h5 {
        font-family: 'Theinhardt Mono';
        font-size: 2.5rem;
        letter-spacing: .05em;
    
        margin: 0 0 0 0;
    }
    
    .sm-place {
        font-size: 0.95rem;
        line-height: 120%;
    }

    .popup-wrap {

        /* 모든 방향에 0을 주면 화면에 꽉차게 된다. */
        top: 35%;
        left: 40%;
        right: 0;
        bottom: 0.5rem;
    
        display: none;
        justify-content: center;
        align-items: center;
        position: fixed;
    }

    .header-title {
        font-size: 1.5rem;
    }
    
    .pop-btn-close {
        font-size: 1.5rem;
        line-height: 0;
    }
}

@media (max-width: 576px) and (min-width: 500px) {
    body {
        font-family: 'Theinhardt Mono', 'Pretendard'; /* 영문, 숫자, 한글 폰트 */
        font-weight: 400;
    
        color: #fff;
        overflow: hidden;
        height: 100vh;
    
        user-select: none; /* 텍스트 드래그 방지 */
    
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
    }

    .main-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    
        margin: 0;
    }

    .main-container {
        position: relative;
        
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    header #WFF, header #HSDW {
        display: none;
    }

    #sm-WFF {
        display: block;
        width: 100%;

        position: absolute;
        transform: translateY(-40%);

        top: 37.5%;
        right: 0;
        bottom: 0;
        left: 0;

        mix-blend-mode: exclusion;
    }

    #sm-WFF h1 {
        font-size: 4.5rem;
        line-height: 95%;
        text-align: center;
    }

    #sm-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #sm-nav > a > img { /* 바꿈 */
        width: 3.75rem;
        align-self: baseline;
    }

    #sm-nav > a > img:hover {
        opacity: 80%;
    }

    #sm-HSDW {
        display: flex;
        flex-direction: row;
    }

    #sm-HSDW h3 {
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 140%;
    
        margin: -0.3rem 1rem 0 0;
    }
    
    .info-kor {
        font-size: 0.8rem;
        font-weight: 500;
    }

    #sm-HSDW img {
        width: 2rem;
        align-self: baseline;
    }

    footer, .date, .place {
        display: none;
    }

    .sm-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-self: flex-end;

        margin: 0 0 0.75rem 0;

        position: fixed;
        left: 2rem;
        right: 2rem;
        bottom: 0;
    }

    .sm-date {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .sm-date h5 {
        font-family: 'Theinhardt Mono';
        font-size: 2rem;
        letter-spacing: .05em;
    
        margin: 0 0 0rem 0;
    }
    
    .sm-place {
        font-size: 0.95rem;
        line-height: 120%;
    }

    .popup-wrap {
        top: 30%;
        left: 1.875rem;
        right: 1.875rem;
        bottom: 1.875rem;
    
        display: none;
        justify-content: center;
        align-items: end;
        position: fixed;
    }

    .popup {
        width: 100%;
        height: 70%;
        color: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
    
        padding: 1rem;
    
        background-image: url("../img/timetable_background.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    
        display: flex;
        flex-direction: column;
        align-content: space-between;
    }


    .header-title {
        font-size: 1.5rem;
    }
    
    .pop-btn-close {
        font-size: 1.5rem;
        line-height: 0;
    }
}

@media (max-width: 500px) {
    body {
        font-family: 'Theinhardt Mono', 'Pretendard'; /* 영문, 숫자, 한글 폰트 */
        font-weight: 400;
    
        color: #fff;
        overflow: hidden;
        height: 100vh;
    
        user-select: none; /* 텍스트 드래그 방지 */
    
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
    }

    .main-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    
        margin: 0;
    }

    .main-container {
        position: relative;
        
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    header #WFF, header #HSDW {
        display: none;
    }

    #sm-WFF {
        display: block;
        width: 100%;

        position: absolute;
        transform: translateY(-40%);

        top: 37.5%;
        right: 0;
        bottom: 0;
        left: 0;

        mix-blend-mode: exclusion;
    }

    #sm-WFF h1 {
        font-size: 3.5rem;
        line-height: 95%;
        text-align: center;
    }

    #sm-nav {
        display: none;
    }

    #ex-sm-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #ex-sm-nav > a {
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
    }

    #ex-sm-nav > a > img { /* 바꿈 */
        width: 3.75rem;
        margin: 0 0 0 0;
        padding: 0;
    }

    #ex-sm-nav > a > img:hover {
        opacity: 80%;
    }

    .ex-sm-HSDW h3 {
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 120%;

        text-align: center;
    
        margin: -0.25rem 1rem 0 0;
    }
    
    .info-kor {
        font-size: 0.8rem;
        font-weight: 500;
    }

    #ex-sm-nav img {
        width: 1.9rem;
        align-self: baseline;
    }

    footer, .date, .place {
        display: none;
    }

    .sm-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-self: flex-end;

        margin: 0 0 0.75rem 0;

        position: fixed;
        left: 2rem;
        right: 2rem;
        bottom: 0;
    }

    .sm-date {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .sm-date h5 {
        text-align: center;
        font-family: 'Theinhardt Mono';
        font-size: 2rem;
        letter-spacing: .05em;
    
        margin: 0 0 0.5rem 0;
    }
    
    .sm-place {
        text-align: center;
        font-size: 0.95rem;
        line-height: 120%;

        padding: 0 0.5rem 0;
    }

    .popup-wrap {
        top: 30%;
        left: 1.875rem;
        right: 1.875rem;
        bottom: 1.875rem;
    
        display: none;
        justify-content: center;
        align-items: end;
        position: fixed;
    }

    .popup {
        width: 100%;
        height: 70%;
        color: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
    
        padding: 1rem;
    
        background-image: url("../img/timetable_background.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    
        display: flex;
        flex-direction: column;
        align-content: space-between;
    }

    .header-title {
        font-size: 1.5rem;
    }
    
    .pop-btn-close {
        font-size: 1.5rem;
        line-height: 0;
    }
}



/* LEGAL DISCLAIMER
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * wowff2023.com
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Optimo webfonts are protected by copyright law and provided under license. To modify, alter, translate, convert, decode or reverse engineer in any manner whatsoever, including converting the Font Software into a different format is strictly prohibited. The webfont files are not to be used for anything other than web font use.
 *
 * optimo.ch
 */

/* INSTRUCTIONS
 *
 * Copy the Legal Disclaimer, the domains name and the @font-faces statements to your regular CSS file. The fonts folder(s) should be placed relative to the regular CSS file.
 */

 @font-face {
    font-family: 'Theinhardt Mono';
    src: url('Theinhardt-Mono-Regular.eot');
    src: url('Theinhardt-Mono-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Theinhardt-Mono-Regular/Theinhardt-Mono-Regular.woff2') format('woff2'),
         url('../fonts/Theinhardt-Mono-Regular/Theinhardt-Mono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; /* 영어 대문자, 영어 소문자, 숫자 */
}


/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

/* unicode-range: 한글, 특수문자 */

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-Black.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-Black.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-ExtraBold.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-Bold.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-Bold.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-SemiBold.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-Medium.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-Medium.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-Regular.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-Regular.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-Light.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-Light.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-ExtraLight.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(../fonts/Pretendard-1.3.9/woff2/Pretendard-Thin.woff2) format('woff2'), url(../fonts/Pretendard-1.3.9/woff/Pretendard-Thin.woff) format('woff');
    unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}