/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* XEION CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');

/* Web Fonts - Source Sans Pro */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
/* Firacode & Lato */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Trispace:wght@300;400;500;600;700&display=swap');
/* font-family: 'Source Sans Pro', sans-serif; */
/* font-family: 'Fira Code', monospace;
font-family: 'Trispace', sans-serif; */



/* Web Fonts - NoonNoo */
@font-face {
  font-family: 'Source Sans Pro', sans-serif;;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root{
  --color-white: #f9f9f9;;
  --color-white2: #cdd8f8;
  --color-grey: #505050;
  --color-font: #15191a;
  --color-cream: #f7f1e3;
  --color-blue: #007dd6;
  --color-blue2: #0090fa;
  --color-purple: #8653f7;
  --color-line: #dcdce3;
  --color-navy: #194569;
  --color-pink: #AC8181;
  --color-font2: #374151;
  --color-red: rgb(207, 63, 91);
  --color-bgc: rgb(240, 245, 251);
  --color-selected : rgb(239, 243, 248);
  --font-main: 'Trispace', sans-serif;
  --font-sub: 'Fira Code', monospace;
}

/* Reset CSS */
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #222;
}
button, input {
  outline: none;
}
h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
  font-weight: normal;
  line-height: 1.5em;
}

/* Default CSS */
html {
  /* scroll-behavior: smooth; */
}

body {
  font-family: 'Trispace', sans-serif;
  font-size: 18px;
  line-height: 1.7em;
  margin: 0;
  background-color: #fff;
  color: #222;
  width: 100%;
}

section {
  padding: 130px 0;
}

/* ####################### Header ####################### */
header {
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: 0.5s;
  border-bottom: 1px solid var(--color-line);


}
header.active {
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}
.header-inner {
  width: 1300px;
  margin: auto;
  margin-bottom:0;
  /* overflow: hidden; */
  background-color:white;
  padding-top: 15px;
  padding-bottom: 0px;
  
  display: flex;
  align-items:center;
  justify-content: space-between;
}
.logo {

}
.logo img {
  height: 60px;
}
.gnb {
}
.gnb a {
  margin: 10px;
  font-size: 16px;
  font-weight: 500;
}
.gnb a:hover{
  color: var(--color-blue);
}
.login a{
  /* display:inline-block; */
  width: 100px;
  padding:6px;
  border: 1px solid var(--color-line);
  border-radius: 25px;
  font-size: 15px;
  font-weight: 500;
  text-align:center;
  transition: 0.3s;
}
.loginBtn:hover{
  background-color: var(--color-line);
}

.loginBtn.none{
  display:none;
}
.signupBtn{
  background-color: royalblue;
  color:var(--color-white);
  border: none;
}
.signupBtn:hover{
  background-color: var(--color-blue);
}
.signoutBtn{
  display:none;
}
.signoutBtn.display{
  display:inline-block;
}
.signupBtn, .loginBtn{
  /* display:display; */
  display: inline-block;
}
.signupBtn.none{
  display:none;
}
.profileBtn{
  display:none;
}
.profileBtn.display{
  display:inline-block;
}
.signoutBtn{
  background-color: rgb(207, 63, 91);
  color: var(--color-white);
}

/* *********************** Main ********************************** */
main .home-info{
  /* margin-top: 150px; */
  /* margin-top: 100px; */
  width:1000px;
  margin:auto;
  padding-top: 150px;
  display: flex;
  flex-wrap: wrap;
  position:relative;
  justify-content: center;
}
.home-info a{
  margin: 16px;
  font-size: 16px;
  /* transition: 0.3s; */
}
.home-info a:hover{
  color: var(--color-blue);
}
.home-content{
  margin: auto;
  display: flex;
  width: 1000px;
  margin-top: 80px;
  justify-content: space-around;
}
.home-course, .home-comm{
  width: 40%;

}
.course-bg, .comm-bg{
  width: 100%;
  height: 76px;
  filter:opacity(60%);
  border-radius: 10px;
}
.course-banner, .home-comm{
  position: relative;
  /* margin-top: 40px; */
}
.course-img, .course-header, .comm-img, .comm-header{
  position: absolute;

}
.course-img, .comm-img{
  right: 10px;
  width: 150px;
  top: -20px;
}
.comm-header, .course-header{
  left: 40px;
  top: 5px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-white);
}
.home-comm-item, .home-course-item{
  padding-left: 14px;
  border-bottom: 1px solid var(--color-line);

}
.home-comm-item p , .home-course-item p{
  /* display: inline-block; */
  font-size: 14px;
  
}
.home-course-item h3{
  font-size: 16px;
  font-weight:500;
  margin-bottom: 10px;
}
.home-comm-top, .home-course-top{
  display: flex;
  justify-content: space-between;
}
.home-comm-top .name{
  font-weight:500;
}

.likes::before{
  /* \ea11 */
  font-weight: 600;
  color: var(--color-blue);
  font-family: xeicon;
  content: '\ea11';
}



/* **********************  Information ************************************ */
#info{
  width: 100%;
  font-family: var(--font-sub);
}
.info__container{
  width: 1300px;
  margin: auto;
}
.info__container h2{
  text-align:center;
  font-size: 32px;
}
.language-tab{
  display: flex;
  justify-content: center;
}

.language-tab .active{
  background-color: var(--color-blue);
  color:white;
  /* padding: 10px */
}
.language-tab p{
  margin : 10px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.lanKor{
  display: none;
}
.info-inner{
  display: flex;
  margin-bottom:0;
}
.info-menu{
  margin-left:30px;
}
.info-menu .active{
  /* color: var(--color-blue); */
  font-weight: 700;
  color: royalblue;
}
.info-menu p{
  font-size: 16px;
  font-weight: 600;
  margin-bottom:10px;
  padding-bottom: 16px;
  cursor: pointer;
  position:relative;
  transition: 0.3s;
  overflow:hidden;
}
.info-menu p:after{
  content: '';
  position:absolute;
  width: 50px;
  left: -50px;
  /* border-top: 1px dotted var(--color-blue); */
  border-top: 2px dotted royalblue;
  bottom: 10px;
  /* opacity: 0; */
  transition: 0.3s;
}
.info-menu p:hover{
  /* color: var(--color-blue); */
  color: royalblue;
}
.info-menu p:hover:after{
  left:0;
  /* opacity: 1; */
}
.info-contents{
  
  position:relative;
  /* overflow: auto; */
  width: 100%;
  overflow:hidden;
  /* height: 320px; */
  padding-top: 10px;
  opacity: 1;
  animation: rtl 0.5s linear both;
  /* height: 310px; */
  /* height: auto; */
  height:2300px;
}
.info-items{
  position: absolute;
  box-sizing: border-box;
  /* display:flex; */
  padding-left: 80px;
  padding-right: 30px;
  width: 100%;
  left: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  /* height: auto; */
  /* height:100%; */
}
.info-contents{
  /* font-size: ; */
}
.info-contents p, .info-contents ul, .info-contents ol {
  font-size: 15px;
  line-height: 1.8em;
  font-weight:500;
}
.info-contents li a{
  color:crimson;
}

.info-items p a{
  color: crimson;
}
.info-items.active{
  left: 0;
  opacity: 1;
  visibility: visible;
}
/* *************  community edit page*****************c */

.btn .edit-btn{
  width: 80px;
  padding: 8px;
  border: none;
  border-radius: 5px;
  background-color: var(--color-blue);
  color:var(--color-white);

}

/**************************** community ***********************************/
.posts_body{
  margin: auto;
  max-width: 1300px;
}
.posts {
  width: 840px;
  margin: auto;
  padding: 0;
}
.posts_bar{
  width: 840px;
  padding-top: 30px;
  padding-bottom: 20px;
  margin: auto;
  display: flex;
  align-items: center;
}
.write{
  margin-left: 10px;
  flex-grow: 1;
  
}
.categories{
  display: flex;
  flex-grow:6;
  text-align:center;
  justify-content: center;
  align-items:center;
  
}

.categories p{
  padding: 10px 14px;
  margin: 0 6px;
  cursor: pointer;
  border-radius: 10px;
}
.categories .active{
  background-color: var(--color-selected);
}

.search{
  width: 840px;
  margin: auto;
  padding: 0 30px;
}
.search_form{
  text-align:center;
}

.post{
  padding: 0 10px 0 10px;
  width: 840px;
  margin: auto;
  border-bottom: 1px solid rgb(187, 187, 187);
}
.name {
  margin-right: 10px;
}
.name, .title, .post-bottom p{
  margin-bottom: 10px;
  margin-left: 
}
.post-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.post-bottom p{
  margin-top: 0;
}
.amount span{
  margin: 0 4px 0 4px;
}
.write-btn{
  background-color: royalblue;
  padding: 10px;
  color:var(--color-white);
  border-radius: 10px;
}
/* .write-btn::before{
  font-family: xeicon;
  content: '\e9c4';

} */

.title{
  font-weight: 600;
  font-size: 16px;
}
.post >a > p{
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
}
.post .date{
  font-size: 12px;
  margin-right: 20px;
  font-weight: 700;

  color: var(--color-grey)
}
.post .name { 
  font-weight: 700;
  color : var(--color-font2);
}

.post-bottom .category, .post-bottom .amount{
  font-weight: 500;
  font-size: 14px;
}
.post-bottom .category{
  color: royalblue;
  line-height: 10px;
  border: 1px solid var(--color-line);
  padding: 6px 8px;
  border-radius: 5px;
  align-items: center;
}

.mainText .section1{
  color: royalblue;
  display: flex;
  font-weight: 600;
  font-size: 16px;
}
.mainText .section2{
  margin-bottom: 20px
}


/************************* posting page *****************************/
.post.announcement{
  background-color: var(--color-bgc);

}


.posting-form{
  width: 840px;
  margin:auto;
  text-align:center;
}
.posting-form select{
  width: 800px;
  display: block;
  margin:auto;
  border: 1px solid var(--color-line);
  padding: 8px;
  font-size: 14px;
  border-radius: 5px;
}
.posting-form > div{
  margin-bottom: 10px;
}
.posting-form label, .posting-form input{
  display: block;
}
.posting-form label{
  text-align:left;
  margin-left: 20px
}
.posting-form input{
  margin:auto;
  width: 800px;
  border: 1px solid var(--color-line);
  border-radius: 5px;
  padding: 8px;
}
.posting-form .comm-text textArea{
  border-radius: 5px;
  width: 800px;
  resize: none;
  border: 1px solid var(--color-line);
  padding: 8px;
}
.posting-form .comm-text textArea:focus{
  outline: 0;
}
.submit-post, .cancel-btn{
  padding: 8px;
  width: 80px;
  border:none;
  border-radius: 5px;
  color:var(--color-white);
}
.submit-post{
  background-color: var(--color-blue2);
}
.cancel-btn{
  background-color: rgb(207, 63, 91);
  
}
.cancel-btn a {
  color:var(--color-white);
}


.postBox, .commentsBox{
  width: 840px;
  margin:auto;
  /* text-align:center; */
  overflow:hidden;
}
.postBox p{
  font-size: 14px;
}

.post-head{
  position:relative;
  padding-left: 40px;
}
.post-head:before{
  content:'';
  width: 30px;
  display:inline-block;
  position:absolute;
  border-top: 1px solid rgb(190, 190, 190);
  left: 0;
  top: 50%;
}
.post-head:after{
  content: '';
  width: 100%;
  position:absolute;
  border-top: 1px solid rgb(190, 190, 190);
  margin-left: 10px;
  top: 50%;
}
.post-head .category{
  color:royalblue;
}
.mainText{
  position:relative;
}
.mainText:after{
  margin-top: 100px;
  content: '';
  position:absolute;
  display:block;
  width: 100%;
  border-bottom: 1px solid rgb(190, 190, 190);
}
.commentsBox{
  padding-top: 30px;
}
.comment-form{
}
.commentArea{
  justify-content: center;
  display: flex;
  padding: 20px;
  margin-bottom:20px;
}
.commentArea textarea{
  width: 80%;
  height: 80px;
  resize:none;
  outline:none;
  border-radius: 10px 0 0 10px;
  padding: 10px;
}
.commentBtn{
  background-color: #364759;
  height: 80px;
  width: 120px;
  color:white;
  border:none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}



.comments{
  padding: 10px;
}
.comments .info{
  background-color: #f1f1f1;
  display: flex;
}
.comment {
  display:none;
}
.comment.active{
  display:block;
}
.info p{
  font-size: 14px;
  margin: 2px 10px;
}
.content{
  font-size:14px;
  margin: 4px;
  margin-bottom: 12px;
}



/* **************  community post ******************* */
.postBtns{
  display:none;
}
.postBtns.display{
  display:block;
}
.post-info{
  display: flex;
  align-items: center;
}
.postInfo .author{
  margin-bottom : 0px;
}
.postInfo .dateP{
  margin-top: 0;
}
.postInfo .view::before{
  color: var(--color-blue);
  font-family: xeicon;
  content: '\e950';
}
.postBox .title{
  font-size: 24px;

}
.postBox .editBtn, .postBox .postDelete{
  width: 60px;
  padding: 8px;
  border: none;
  color:white;
  border-radius: 10px;
}
.postBox .editBtn{
  background-color: var(--color-navy);
}
.postBox .postDelete{
  background-color: var(--color-pink);
}

/*************** Community comment************************ */

.com-cmts{
  padding: 10px;
}
.com-cmts .info{
  background-color: #f1f1f1;
  display: flex;
  justify-content: space-between;
}
.revise{
  margin-right: 20px;
  display :none;
}
.revise.display{
  display:block;
}
.cmt > .content.none{
  display:none;
}
.info .data p {
  display: inline-block;
}
.editArea{
  display:none;
}

.editArea.display{
  display: flex;
  justify-content: center;
}
.editArea .editBox{
  width: 80%;
  resize:none;
  height: 100px;
}
.editBtns button{
  display:block;
}


.views::before{
  /* display:inline-block; */
  font-weight: 600;
  font-family: xeicon;
  content: '\e950';
  color: var(--color-blue);
  /* width: 20px; */
}
.comments::before{
  /* \ea11 */
  font-weight: 600;
  color: var(--color-blue);
  font-family: xeicon;
  content: '\e9d8';
}


/* registration */
.regi-header h2{
  font-family: var(--font-sub);
  font-weight: 700;
}
.regi-header h2, .regi-header p{
  text-align:center;
}
.regi-header p{
  font-size: 16px;
}
.registration{
  width: 1300px;
  margin: auto;
}
.registration form{
  width: 600px;
  margin: auto;
}
.registration form div{
  width: 600px;
  text-align:cneter;
}
.opt{
  display:none;
}
.opt.display{
  display:block;
}
.user-info{
  padding: 20px 0 ;
  display:none;
}
.user-info.display{
  display:block;
}
/* .reg-form{
  width: 600px;
  margin: auto;
} */
.reg-form label{
  font-weight:500;
  font-size: 16px;
  /* left:0; */
  text-align:left;
  margin-left: 100px;
  display: block;
}
.reg-form input{
  border: 1px solid var(--color-line);
  padding: 8px;
  border-radius: 5px;
  width: 400px;
  margin: auto;
  display: block;
}
.reg-form button{
  background-color: var(--color-navy);
  color:var(--color-white);
  padding: 4px;
  border:none;
  border-radius: 5px;
  display: inline-block;
  margin-top: 10px;
  margin-left:100px;
}
.email-msg.success, .opt-msg.success{
  color: royalblue;
}
.email-msg.fail, opt-msg.fail{
  color: crimson;
}
.user-info div{
  margin-bottom: 10px;
}
.reg-form .sign-up{
  width: 400px;
  padding: 8px 10px;
  /* font-size: 1; */
  background-color: var(--color-blue);
  font-size: 18px;
}
.user-info .err-msg{
  color:crimson;
  text-align:center;
  
}



/* login */
.section-login{
  width: 1300px;
  margin: auto;
}
.login-form{
  width: 600px;
  margin: auto;
}
.forgotPwd{
  margin-left: 100px;

}
.forgotPwd a{
  font-size: 14px;
}
.section-login form div{
  width: 600px;
  text-align:cneter;
  margin-bottom: 10px;
}
.login-form label{
  margin-left: 100px;
  font-weight: 500;
  font-size: 14px;
  display: block;
}
.login-form input{
  border: 1px solid var(--color-line);
  padding: 8px;
  margin: auto;
  display: block;
  border-radius: 5px;
  width: 400px;
}
.login-form .login-btn{
  /* display: flex; */
  display: block;
  margin: auto;
  border: 1px solid var(--color-line);
  color:var(--color-white);
  text-align:center;
  width: 400px;
  padding: 8px 10px;
  border-radius: 5px;
  /* font-size: 1; */
  background-color: var(--color-blue);
  font-size: 18px;
}
.login-form .reg{
  color: royalblue;
  text-decoration: underline;
}

@media(max-width: 768px){
  .logo img{
    height : 50px;
  }
  .login a{
    width: 80px;
    padding: 4px;
    font-size: 13px;
    border-radius: 20px;
  }
  .info__container{
    width: 100%;
  }
  .header-inner{
    width: 100%;
    /* display: block; */
    overflow: hidden;
    padding-top:15px;
    padding-bottom:10px;
  }
  .header-inner.dark{
    padding-top: 15px;
    padding-bottom: 10px;
  }
  .gnb {
    float: none;
    background-color: white;
    position: fixed;
    height: 200px;
    width: 100% ;
    /* transform: translateX(-50px); */
    /* top: -100vh; */
    top: -200px;
    /* box-shadow: 3px 0 3px rgba(249, 249, 249, 0.1); */
    box-shadow: 3px 0 3px rgba(249, 249, 249, 0.1);
    /* padding-top: 70px; */
    padding-left: 15px;
    opacity: 0;
    transition: 0.5s;
  }
  .gnb.active {
    top: 100px;
    opacity: 1;
  }
  
  .gnb a{
    display: block;
    text-align: center;
  }
  .trigger {
    /*border: 1px solid red;*/
    width: 30px;
    height: 30px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-30px);
    font-size: 28px;
    text-align: center;
    /*cursor: pointer;*/
  }
  .trigger:before {
    content: '\e91c';
    font-family: xeicon;
  }
  .trigger.active:before {
    content: '\e9af';
  }
  /* \eb45 */
  .info-menu{
    padding-top:0;
    z-index:10;
    float: none;
    /* background-color: #211f1fd8; */
    position: fixed;
    /* height: 100%; */
    width: 250px;
    height: 880px;
    top: 230px;
    left: -280px;
    background-color: white;
    box-shadow: 3px 0 3px rgba(0, 0, 0, 0.1);
    /* padding-top: 70px; */
    padding-left: 15px;
    transition: 0.5s;
  }
  .info-menu.active{
    left: 0;
  }
  .infoTrigger{
    /* position:fixed; */
    z-index:10;
    width: 30px;
    height: 30px;
    position: fixed;
    top: 250px;
    left: 0px;
    font-size: 28px;
    text-align: center;
  }
  .infoTrigger:before {
    color: crimson;
    content: '\eb45';
    font-family: xeicon;
  }
  .infoTrigger.active:before {
    font-weight:500;
    content: '\eb46';
  }
  .info-items{
    padding-left: 50px;
  }
  

  /* ****************** Home *********************************** */

  main .home-info{
    width: 100%;
  }
  .home-content{
    display: block;
    width: 100%;
  }
 
  .home-course, .home-comm{
    width: 400px;
    margin: auto;
    padding-bottom: 60px;
  }

  /* **************    community   ********************** */
  .posts_body{
    width: 100%;
  }
  .categories{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .categories p{
    font-size: 14px;
    padding: 8px 12px;
  }
  .posts_bar{
    width: 100%;
    flex-direction: column;
  }
  .posts{
    width: 100%;
  }
  .post{
    width: 100%;
  }
  .search{
    width: 100%;

  }
  /* ******************** community posting **************************** */
  .posting-body, .posting-form, .posting-form select, .posting-form input, .posting-form .comm-text textArea, .postBox, .commentsBox {
    width: 100%;
  }

  .posting-form input{
    /* margin: 10px; */
  }
  /* ****************** sign In ********************* */
  .section-login, .login-form, .section-login form div, .regi-header{
    width: 100%;
  }
  .section-login h2{    
    text-align:center;
  }
  .login-form label{
    text-align:center;
    margin: 0;
  }
  .forgotPwd{
    display:block;
    margin: auto;
  }
  .forgotPwd a{
    text-align:center;
    display: block;
    margin:auto;
  }

  /* ************ Registration *************************** */
  .registration{
    width: 100%;
  }
  .registration form, .registration form div {
    width: 100%;
  }
  .reg-form label{
    text-align:center;
    margin:0;

  }
  .reg-form button {
    display: block;
    margin: 10px auto;
    /* text-align:center; */
    /* margin:0; */
  }
  .email-msg.success, .opt-msg.success{
    display: block;
    text-align:center;
  }
}
@media (max-width: 400px){
  .reg-form input, .login-form input, .login-form .login-btn, .reg-form .sign-up{
    width: 100%;
  }
  .home-course, .home-comm{
    width: 100%;
    
  }
}