* {box-sizing: border-box;}
body {width: 100vw; position: relative; overflow-x:hidden;-ms-overflow-style: none; cursor: none;} 
::-webkit-scrollbar { display: none; }
a { text-decoration: none; color: #000; cursor: none;}
body > div.grid {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; display: flex; z-index: -1; }
body > div.grid > div { flex:1; border-right: 1px solid #70707041;}
body > div.grid > div:last-child { border-right: none;}

header {width: 100%; position: fixed; top: 0;left: 0; background-color: #fff; overflow:hidden; z-index: 9999;}
header > div.header-grid {width: 100vw; height: 100%; display: flex; position: absolute; top: 0; left: 0; z-index: 9; }
header > div.header-grid > div {flex:1;  border-right: 1px solid #70707041;}
header > div.header-grid > div:last-child {border-right: none;}
nav.main-nav {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 22px 44px; z-index:10; font-family: 'Noto Sans CJK KR';}
nav.main-nav > h1 {font-size: 16px;}

.hamburger { transition: .3s ease-in-out; width: 22px; height: 12px;
    z-index: 100; position: fixed; right: 50px; top: 35px; padding: 20px; }
.hamburger span { position: absolute; top: 0; width: 100%; height: 2px; background-color: #000; transition: transform .2s ease-in-out, opacity .2s ease-in-out; text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;}
.hamburger span:nth-child(1) { top: 0px; width: 25px;}
.hamburger span:nth-child(2) { top: 8px; width: 25px;}
.hamburger.active span { background-color: #000; }
.hamburger.active span:nth-child(1) { transform: rotate(-45deg); top: 8px; }
.hamburger.active span:nth-child(2) { transform: rotate(45deg); top: 8px; }

/* meun */
.menu { position: fixed; top: 0px; left: 0; width: 0%; height: 0%; background-color: #fff; overflow: hidden; text-decoration: none; opacity: 0; z-index: 20; }
.menu-list { width: 100%; height: 100vh; display: flex; flex-direction:column; }
.menu-list li { height: 100%; flex: 1; font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; font-size: 128px; line-height: 190px; border: 2px solid #000; padding-left: 53px; color: #000000;}
.menu-list > a { flex: 1;}
.menu-list li:hover { font-family: 'NeuePixelGrotesk'; background-color: #000000; font-style: italic;  color: #fff; }
/* overlay */
.menu.visible { opacity: 1; height: 100vh; width: 100vw; }
/* nav.main-nav > div.hamburger {width: 20px; height: 20px; position: relative; cursor: pointer;}
nav.main-nav > div.hamburger > div {width: 100%; height: 2px; background-color: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
nav.main-nav > div.hamburger > div:first-child {top:30%;}
nav.main-nav > div.hamburger > div:last-child {top:70%;}
nav.main-nav > div.hamburger > div.toBlack {background-color: #fff;} */

nav.sub-nav{display: flex; align-items:center; width: 100%; border-bottom: 1px solid #707070; padding: 30px 0; position: relative; z-index:10;}
nav.sub-nav > div.search-wrap {flex: 1; display: flex; justify-content: center;}
nav.sub-nav > div.search-wrap > div.search {position: relative; display: flex; width: calc(100% - 88px); border: 1px solid #000;}
nav.sub-nav > div.search-wrap > div.search > input {width: 100%; height: 40px;  outline: 0; font-size: 20px; padding-left: 8px; border:none;}
input::-ms-clear,
input::-ms-reveal{ display:none;width:0;height:0; }
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{ display:none;}


nav.sub-nav > div.search-wrap > div.search > input.toBlack {border: 1px solid #fff; background-color: #000; color: #fff;}
nav.sub-nav > div.search-wrap > div.search > button {width: 2rem; height: 100%; outline: none; border: none; background: transparent; position: absolute; top: 0; right: 10px;}
nav.sub-nav > div.search-wrap > div.search > button > img.buttonImg{width: 100%;}

div.title {flex:3; font-family: 'NONNaturalGrotesk_TrialVersion-Regular';}
div.title > h2 {padding: 0 44px; font-size: 40px;}
div.list-type {flex: 1; display : flex; justify-content: flex-end; align-items:center; height: 40px;}
div.list-type > ul {display: flex; padding: 0 44px;position: fixed;}
div.list-type > ul > li {margin-left: 30px; display: flex; justify-content: center; align-items: center; /* cursor: pointer;  */opacity:.5;}
div.list-type > ul > li > img {width: 20px;}

nav.sub-nav > div.list-type > ul > li.list-select {opacity: 1;}

section.students-content { width: 100vw; display: flex; margin-top: 177px;}
article.side-nav { font-family: 'NONNaturalGrotesk_TrialVersion-Regular'; flex: 1; width: 20vw; position: relative;}
article.side-nav > ul {padding: 44px 0 0 44px; position: fixed;}
article.side-nav > ul > li {width:fit-content; height:22px; font-size: 22px; color: #AAAAAA; margin-bottom: 40px; /* cursor: pointer; */}
article.side-nav > ul > li:hover {color:#000; border-bottom: 1px solid black; font-weight: 700;}
article.side-nav > ul > li.side-active {color:#000; border-bottom: 1px solid black; font-weight: 700; font-family: 'NONNaturalGrotesk_TrialVersion-Regular';}
article.side-nav > ul > li.toBlack:hover {color: #fff; border-bottom: 1px solid #fff;}
article.side-nav > ul > li.toBlack.side-active {color:#fff; border-bottom: 1px solid #fff; font-weight: 700;}

article.side-nav > button.top-btn {height:100px; background-color: #000; width: 20vw; border: none; position: fixed; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; outline: 0; /* cursor: pointer; */}
article.side-nav > button.top-btn > img {height: 60px; }

article.list-area {flex: 4; display: flex; width: 80vw; flex-direction: column; position: relative; font-family: 'Noto Sans CJK KR';}
article.list-area > ul.students-list {display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
article.list-area > ul.students-list > li { display: flex; justify-content: center; flex-direction: column; width: 20vw; padding: 0 2.5vw; margin: 44px 0; position: relative;}
article.list-area > ul.students-list > li > a > img {width: 15vw; height: 15vw; /* cursor: pointer; */}
article.list-area > ul.students-list > li > a > p:nth-child(2) {font-size: 18px; font-weight: 700; margin: 20px 0 10px; /* cursor: pointer; */ width: fit-content;}
article.list-area > ul.students-list > li > a > p:nth-child(3) {font-size: 14px;}

article.list-area > ul.students-list > li.type-active > a > img:nth-child(1){display: none;}
article.list-area > ul.students-list > li.type-active > a > p:nth-child(2){width: fit-content; font-size: 4vw; padding: 10px 10px 15px 10px; }
.Pline { width: fit-content;
    font-size: 4vw;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    border: 1px solid black;
    padding: 10px 10px 15px 10px; }
.PlineB { width: fit-content;
    font-size: 4vw;
    color: #000;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    border: 1px solid #fff;
    padding: 10px 10px 15px 10px; }
article.list-area > ul.students-list > li.type-active > a > p:nth-child(3){display: none;}

article.list-area > ul.students-list > li > img.live {position: absolute; left:100%; top: 0; width: 20vw; height: 20vw; z-index:10;}
article.list-area > ul.students-list > li > img.live.right {left: -100%;}

/* .right {left: -100%;} */


footer {width: 100%; display: flex; justify-content: space-between; margin: 130px 0 34px; font-family: 'NONNaturalGrotesk_TrialVersion-Regular';}
footer > div.footer-left {padding-left: 44px;}
footer > div.footer-left > h2 {font-size: 16px; font-weight: 700; margin-bottom: 10px; }
footer > div.footer-left > p {font-size: 14px;line-height: 1.4em; font-family: 'Noto Sans CJK KR';}

footer > div.footer-right {padding-right: 44px; display: flex;}
footer > div.footer-right > ul.sns {margin-right: 50px;}
footer > div.footer-right > ul.sns > li {font-size: 16px; font-weight: 700; line-height: 1.3em;}
footer > div.footer-right > ul.contact > li {font-size: 16px; font-weight: 700; line-height: 1.3em;}