/*
** Fonts
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@font-face {
    font-family: 'Noto Sans KR';
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GounBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
 /*
 **
 */

h1{font-size: 20px;}
h2, h3, h4{
    color:rgb(0, 0, 0);
    /* line-height: 0.1em; */
}

html,body { 
    margin: 0px;
    padding: 0px;
    color: rgb(0, 0, 0);
    background-color: #ffffff;
    width:100%;
    overflow-x:hidden;
    overflow-y:auto;
     -ms-overflow-style: none;
}

.container { 
    text-align:center;
     top:0;
     width:100%;
}
header{
    position: fixed;
    padding-top: 0px;
    top: 0px;
    width:100%; 
    text-align:center; 
    justify-content: space-between;
    background-color: rgb(0, 0, 0);
    z-index:3;
    display: flex;
    align-items: center;
    height:50px;
}

.main-logo {
    /* align-items:right; */
    /* display:inline-block; */
    position:fixed;
        text-align:right;
    right: 15px;
    /* text-align:right; */
     width:100%;    
     top:10px;
    /* transform: translate(-50%, -50%); */

}
main {
    font-size:15px;  color: rgb(0, 0, 0);
    text-decoration-line: none;
    margin-top:70px;
    margin-left:0px;
    padding: 0 0px;
    font-size: 1.5rem; line-height: 1.2;
    font-family: 'Noto Sans KR', img-libri, Arial, sans-serif;;
}
.index-main {
    margin-top:-4px;
}

ul { list-style: none; width:100%; 
     padding-left:0px;
}
a:-webkit-any-link {
    cursor: pointer;
    /* text-decoration-line: none; */
}

nav{
    width:100%;
    position:absolute;
    text-decoration:none;
    justify-content: center;

    /* background-color: transparent; */
    /* z-index:1; */
    /* font-size:20px;
    font-weight: normal; 
    display: inline-block;  */
    /* height: 70px; */
    /* top: 0px;
    padding: 0 0px;
    line-height: 20px; */
    /* text-align: center; */

}
nav a { 
     color:#292929; 
    text-decoration: none;
}
.page-nav {
    color:#87df54;
}

.logo, .page-logo, .hidden-logo { 
    padding-top:0px;margin-left:0px;
    width:100%; height:auto; clear:both; left: 50%; transform: translate(-50%, 0%);
    text-align:center;  position:absolute;}
    /* z-index: 3;  */
    /* margin-top: 5px;

/* .page-logo { margin-top: -105px; margin-left:0px;}
.hidden-logo { display:none;} */

a,
a:visited {
  text-decoration: none;
}

a.button {
  display: block;
  margin: auto;
  width: 160px;
  height:50px;
  padding: 20;
  /* margin: 20px 20px 20px 20; */
  text-align: center;
  line-height: 50px;
  color: #FFF;
  border-radius: 5px;
  transition: all 0.2s ;
}

.btnBlueGreen {
  background: #000;
}

nav ul {float:center; }

/*right-nav*/

.right-nav, .page-right-nav {
    background-color: transparent;
    z-index:1;
    /* margin-top: -60px; padding-right: 30px;
    width: 100%; */
    text-align: right;
    position:absolute;
    height:auto; clear:both; right: 1%; transform: translate(-1%, 0%);
     position:absolute;
    margin-top: 20px;
    margin-right:20px;
}
/*dropdown menu */

.btn1,.btn2,.btn3,.btn4,.btn5,.btn6,.btn7,.btn6_loggedin,.btn7_loggedin {
    z-index:1;
    position:absolute;
    padding-top: 25px;
    padding-bottom:25px;
    display:block;
    text-align:center;
    clear:both;
    /* height:110px; */
    transform: translate(-50%, 0%);
    transition-duration:1s;
}

.btn1 {left: 23%; }
.btn2 {left: 32%; }
.btn3 {left: 40%; }
.btn4 {left: 60%; }
.btn5 {left: 67%; }
.btn6, .btn6_loggedin {left: 74%; }
.btn7, .btn7_loggedin {left: 81%; }

/* .btn1 a, .btn2 a, .btn3 a {border-left: solid 1px #b8b8b8;}
.btn4 a, .btn5 a, .btn6 a, .btn6_loggedin a, .btn7 a, .btn7_loggedin a {border-left: solid 1px #bbbbbb;} */
.dropdown { overflow: hidden; display:inline-block; width:100%;height:auto;}

.btn1-hover, .btn2-hover, .btn3-hover, .btn4-hover, .btn6-hover
{ 
    font-size:16px;
    color:#585a5d;
    display: none;
    position: absolute;
    -webkit-transform: translate3d(0,0,0);
    line-height:2em;
    margin-top:20px;
    /* float: center; */
    text-align: center;
    /* transition:opacity 200ms ease-out 0ms; */
    z-index:1;
    /* background-image:url('../img/menu_bg.png'); */
    /* background-image:url('../img/menuBg.png'); */
    /* background-repeat:no-repeat;
    background-size:100% 90%; */
    height:0px;
    /* background-color: rgba(254, 255, 255, 0.829);  */
    /* left: 130%; transform: translate(-50%, 0%); */
    
}

.btn1-hover {width:8em;}
.btn2-hover {width:8em; margin-left: -25px;}
.btn3-hover {width:8em; margin-left: -25px; padding-top:10px;}
.btn4-hover {width:8em; margin-left:-20px; padding-top:10px;}
.btn6-hover {width:8em; margin-left: -15px;}
.btn2-smol {font-size:13px;}
.btn1-hover ul, .btn2-hover ul, .btn3-hover ul, .btn4-hover ul, .btn6-hover ul { margin-left:-5px; margin-top:3px;padding-left:-10px;}
.btn3-hover ul, .btn4-hover ul {margin-top:-6px;}
.btn1-hover ul li, .btn2-hover ul li, .btn3-hover ul li, .btn4-hover ul li , .btn6-hover ul li{
    padding-left:0px;
}
.beaker.upper{
    background-repeat: no-repeat;
    background-size:100% 100%;
    width:128px;
    background-image:url('../img/menuBg0.png');
}
.beaker.middle{
    width:128px;

    background-size:100% 100%;
    background-repeat: no-repeat;
    background-image:url('../img/menuBg1.png');
}
.beaker.lower{
    width:128px;

    background-repeat: no-repeat;
    background-size:100% 100%;
    background-image:url('../img/menuBg2.png');

}
.btn1-hover a, .btn2-hover a, .btn3-hover a, .btn4-hover a, .btn6-hover a {
     color: #585a5d;
     border-left:none; 
     border-right:none;
     opacity:1;
}

li:hover {cursor:pointer;}


/* .btn1:hover .btn1-hover {display:block;}

.btn2:hover .btn2-hover, .btn3:hover .btn3-hover, .btn4:hover .btn4-hover, .btn6:hover .btn6-hover  {display:block;}
.btn6_loggedin:hover .btn6-hover {display:block;} */
/* when logged in */
/* .btn6_loggedin { display:none; 
.btn7_loggedin { display:none; } */

.preview {
    position:relative;
    float: center;
    z-index:1;
    font-family:'Noto Sans KR';
    margin-top: 50vh;
    padding: 0px 50px;
    width: 1000px;
    height: 200px;
    background-color: gray;
}

#the-gap {
        height:96px;
}
#main-image{
    width: 100%; 
    margin-left:auto;
    margin-right:auto; 
    text-align:left;

    /* padding-top:96px; */
}

#text-box{
    margin-left:auto;
    margin-right:auto; 
    width: 70%;
    line-height: 30px;    
}

#memberbox{
    display:block;

    text-align:left;
    padding-top:20px;
    padding-bottom:20px;
    /* background-color: #ccc; */
    margin-left:auto;
    margin-right:auto;
    width: 70%;
    line-height: 1.5em;
}
/*
** menutoggle
*/


#menuToggle {
  /* display: none; */
  position: relative;
  top:0px;
  left:15px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  opacity:95%;
}

#menuToggle a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease;
}

#menuToggle a:hover { color: #ffffff; }
 
#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
  opacity: 0;
  z-index: 2; /* hamburger */
  -webkit-touch-callout: none;
}

/* hamburger */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background:  #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span.page-toggle{background: #164097;}

#menuToggle span:first-child { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background:rgb(0, 0, 0);
}
#menuToggle input:checked ~ span:nth-last-child(3){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/* menu toggle content */
#menu {
  position: absolute;
  width: 250px;
  padding-left:0px;
  padding-right:0px;
  /* padding-bottom:32px; */
  margin: -50px 0 0 -30px;
  /* padding: 50px; */
  padding-top: 61px;
  color:rgb(0, 0, 0);
  background-color : #ffffff;
  /* background: rgb(240, 240, 240); */
  list-style-type: none;
  -webkit-font-smoothing: antialiased; /*사파리*/
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  font-weight:800;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.go-to-main{
    text-align:right;
    top:40px;
    left:130px;
    padding-bottom:10px;
    padding-right:10px;
}
.go-to-main a {color:#b9d7ff;}
#menu li {
    font-family:"Nanum Gothic";
    background-color:rgb(0, 0, 0);
    color: #ffffff;
    padding: 0px 0;
    padding-left:0px;
    line-height: 2.5em;
    font-size: 16px;
    /* border-bottom:1px solid rgb(199, 199, 199); */
}
#menu ul.click li{
    /* border-top:1px solid rgba(199, 199, 199, 0.7); */
    border-bottom:1px solid  #ffffff;
    border-collapse:collapse;
}
#menu ul.sub {
    margin-left:0px;
    padding:0px 0px 0px 0px;
    padding-left:0px;
}
#menu ul.sub li { 
    border-bottom:1px solid rgb(0, 0, 0);;
    background-color: #ffffff;
}
#menu ul.sub li a {color: #ffffff;}
#menu .ham-a {
    font-size: 15px;
    color: #232323;
    line-height: 0.7em;
}
/*  * slide from the left */
#menuToggle input:checked ~ ul {  transform: none; }

/*
** blockquotes
*/

/*
** blockquotes
*/

.intro-banner{
    padding: 0 0 px; margin:0 0px;
    margin-top:-10px;
  font-family: 'Gowun Batang', 'Special Elite';
  background-color:  #ffffff;
  height:210px; 
}

.quote-space {
    align-items:center;
    justify-content: center;
    display: flex;
           font-family: 'Noto Sans KR', 'Special Elite';
    text-align :center;
} 

blockquote {
    position:relative;
    float:center;
    /* margin-top:30px; */
   margin-bottom:55px;
    /* font-size: 1.1rem; */
    /* line-height: 1.4em; */
    color: rgb(0, 0, 0);
    /* text-decoration:underline; */
}
blockquote:before,blockquote:after {
    z-index:0;
    position: relative;
    line-height:0.5em; 
    color: rgb(0, 0, 0);
       font-family: 'Noto Sans KR', 'Special Elite';
   position:absolute;
	font-size: 8rem;
} 

 blockquote:before {
    content: '“';
    top:48%;
    left:-20%;
 }
 blockquote:after {
    content: '”';
	top: 72%;
    right: -20%;
}

/* middle */
 
.middle-banner {
    padding-top: 28px; 
    margin:0px 0px;
    padding-bottom: 270px;
    height: 40px;
    background-color: #ffffff;
    /* padding: 2em 5em 3em 5em; */
}

.middle-banner .banner-space {
    margin-left:auto;margin-right:auto;
}
.middle-banner .banner-space .direct-01 > p, 
.middle-banner .banner-space .direct-02 > p  {
    display: block;
    float:left;
    font-family: 'Nanum Gothic';
    width:50%;
    height:100%;
    padding: 0 25px;
    box-sizing: border-box;
}
.middle-banner .banner-space .direct-01 a {
    background-color:rgb(175, 226, 255);
    background-image:url('../img/direct1.png');
    color:rgb(100, 100, 100);
    font-size:17px;
    background-repeat:no-repeat;
    background-position:90% 80%;
    text-decoration-line: none;
}
.middle-banner .banner-space .direct-02 a {
    background-color: #ffffff;
    color:rgb(100, 100, 100);
    font-size:17px;
    background-repeat:no-repeat;
    background-image:url('../img/direct2.png');
    color:rgb(100, 100, 100);
    background-position:90% 80%;
    font-size:17px;
    text-decoration-line: none;
}
.middle-banner .banner-space > div a {
    overflow:hidden;
    display:block;
    min-height:220px; 
    padding:40px 50px;
    vertical-align: top;
    font-size:17px;
    line-height:1.5em;
    box-sizing: border-box;
    letter-spacing: -0.5px;
    border-radius:55px;
    height:100%;
} 

.title {
    font-family: 'Noto Sans KR';
    font-weight:100;
    font-size:18px;   
}

/* popular lectures*/
.popular-lectures{
    max-width:1280px;
    text-align:left;
    margin:0 auto; 
    padding: 2em 5em 3em 5em;
    /* font-family: 'Noto Sans KR', img-libri, Arial, sans-serif;;
    font-size:15px; */
}

/*calendar*/
.first-row { background-color:#c4e9ff;}
.monthly-table-shortcut {
    background-color: #ffffff;

    margin: 0 auto;
    padding: 2em 5em 3em 5em;
}
.table-cont {
    max-width:1280px;
    margin: 0 auto;
}
.monthly-table-shortcut h1, .popular-lectures h1 {
    line-height:2.5em;
    margin: 0 auto;
    /* padding: 2em 2em 0em 2em; */
    color: rgb(100,100,100);
  }
.calendar-text { 
    color: rgb(100,100,100);
    text-align:right;
    font-size:15px;
}
.table-cont a {text-decoration-line: none;}
.scriptCalendar { 
    text-align:center; 
    width:100%;
    font-size:15px;
    text-decoration-line: none;
    color:#7e7e80;
  }
  .scriptCalendar > thead > tr > td { width:5vw;height:7vh;text-decoration-line: none;}
  .scriptCalendar > thead > tr:first-child > td { font-weight:bold;text-decoration-line: none; }
  .scriptCalendar > thead > tr:last-child > td { background-color:rgb(255, 251, 193); text-decoration-line: none;}
  .scriptCalendar > tbody > tr > td { 
    text-align:left;
    padding:5px;
    vertical-align:top;
    width:5vw;
    height:12vh;
    text-decoration-line: none;  
  }
  .cal-text {text-decoration-line: none;  }
/*
** media query
*/ 

@media screen and (min-width:1200px) 
{
    .container{
        text-align:center;
    }
    #main-image {
        width:800px;

    }
}
@media screen and (max-width: 1278px) {
    #main-image {
        width:800px;
    }
    /* .right-nav, .page-right-nav { display:none;} */
    nav { 
        text-decoration:none;
        background-color: transparent;
        /* position: absolute; */
        width:50%;
        z-index:1;
        font-size:0.9em;
        display: inline-block; 
        padding: 0 0px;
        line-height: 25px;
        text-align: center;
    }
    .btn1-hover, .btn2-hover, .btn3-hover, .btn4-hover, .btn6-hover{
        height:170px;margin-top:16px;width:7.4em;font-size:13px;
        margin-left:-10px;
    }
    .btn3-hover, .btn4-hover{margin-top:13px;}
    .btn1-hover ul li, .btn2-hover ul li, .btn3-hover ul li, .btn4-hover ul li, .btn6-hover ul li{
        margin-top:0px;
    }
    .btn2-hover, .btn3-hover{margin-left:-30px;}
    .btn4-hover {margin-left:-24px;}
    .btn6-hover {margin-left:-25px;}
}

/* modification*/
nav {
    position:absolute;
    z-index:1;
    width:100%;
    margin-left:0;
    left:0;
    background-color :#ffffff;;
    /* box-shadow:0px 0px 6px gray; */
    opacity:.8;
}

@media screen and (max-width: 767px) {
    #main-image {
        width:100%;
    }
    .logo, .page-logo, .hidden-logo {
        display:block;
        text-align:center;
        width:80px;
        left:50%;
    }
    .main-logo {
    /* align-items:right; */
    /* display:inline-block; */
    position:fixed;
    text-align:right;
    right: 15px;
    width:100%;    
     top:10px;
    /* transform: translate(-50%, -50%); */
    }
    .logo img, .page-logo img { width:80px; height: auto;}
    #menu {
        /* z-index:1; */
        position: absolute;
        /* width: 100%; */
    }
    #menuToggle {display:block;}
    .container .slider {
        position: absolute;
        overflow: clip;
        top: 0;left: 0; width: 500%; height: 40vh;
        animation: animate 10s linear infinite;
    }
    .preview { margin-top: 40vh;}
    footer h2{font-size: 12px;}
    .copyrights {font-size:9px;}

    blockquote:before {
       
        left:-15%;
     }
     blockquote:after {
       top:80%;
        right: -15%;
    }
    blockquote {font-size:18px;}
}
.middle-banner .banner-space .direct-01 a {background-size: auto 50px; font-size:16px;}
.middle-banner .banner-space .direct-02 a {background-size: auto 60px; font-size:16px;}
.middle-banner .banner-space .direct-01 > p, 
.middle-banner .banner-space .direct-02 > p  {
    display: block;
    float:left;
    font-family: 'Noto Sans KR';
    width:100%;
    height:100%;
    padding: 25 25px;
    box-sizing: border-box;
}
.middle-banner {
    width:100%;
    height: 100%;
    /* background-color: rgb(255, 255, 242); */
    margin:0 auto;
    text-align:center;
    padding-bottom:540px;
}
.middle-banner .banner-space > div a { 
    padding:40px;
    height:100%;
    vertical-align: top;
    text-align:left;
    font-size:17px;
}

.popular-lectures {
    padding: 1em 1em 1em 1em;
}