@charset 'utf-8';

@font-face {
    font-family: 'KccChaSaem';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

*{margin: 0;padding: 0;box-sizing: border-box;}
ul li{list-style: none;}
a{text-decoration: none;display: block;color: inherit;}

body{width: 100%;font-family: 'KccChaSaem';}
header{
    width: 100%;
    color: #333;
    display: flex;
    line-height: 60px;
    
}

#logo{
    font-size: 22px;
    padding-left: 24px;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    width: 50%;
    height: 100px;
    line-height: 100px;
}
.nav{width: 50%;text-align: center;}
.menu{
    display: flex;
}
.menu>li{
    font-size: 18px;
    width: calc(100% / 3);
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    height: 100px;
    line-height: 100px;
}
.menu>li:hover{background-color: tomato;color: #fff;}



/*본문*/
.box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.box>li{
    width: 50%;
}
.box>li>p{
    height:70px;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
}
.box>li>p:hover{
    background-color: tomato;
}
.subbox{
    display: none;
    
}
.subbox>li>a{
    width: 100%;
    height:50px;
    text-align: center;
    line-height: 50px;
    background-color: #fff;
    font-size: 14px;
}
.subbox>li>a:hover{
    color: tomato;
}


main{
    width: 100%;
    height: 80%;
    background-color: wheat;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #333;
}


/*학생 포플 페이지*/

#student{
    text-align: center;
    background-color: rgb(255, 255, 255);

}
#student>h3{
    font-size: 24px;
    padding: 40px 0 20px 0;
}
#student img{
    width: 80%;
    box-shadow: 1px 1px 5px #a4a4a4;
}
#btnBox{
    padding: 16px;
}
.home{
    margin: 16px auto;
    text-align: center;
    width: 100%;
    height: 80px;
    background-color: rgb(255, 255, 255);
    line-height: 82px;
    color: #333;   
    font-size: 24px;
    border: 1px solid #333;
}

.home:hover{
    background-color: tomato;
    color: #fff;
}



/*cnd 페이지*/




#cdnbox>div:last-child{
    padding-bottom: 40px;
}
.cdn_list{
    text-align: center;
    background-color: wheat;
    padding-top: 40px;
}

.cdn_title{
    padding: 20px;
    font-size: 20px;
}

.cdn_text{color:tomato}
.cdn_text:hover{color:red}


section>p{text-align: center;padding: 50px 0 20px 0;font-size: 24px;}
.content{width: 100%; display: flex; flex-wrap: wrap; border: 1px solid #333; margin-bottom: 10px;}
.content>a{width: 50%; text-align: center;line-height: 100px;background-color: wheat;}
.content>a:hover{background-color: tomato; color: #fff;}




footer{
    width: 100%;
    height: auto;
    background-color: #fff;
  
    text-align: center;
    padding: 20px;
    font-size: 16px;
}
footer>p{
    margin-bottom: 10px;
    font-size: 14px;
}
.sns{display: flex;justify-content: center;gap: 10px;}
.sns>a:hover{color: #666;}



@media screen and (max-width:800px){

    header{
        display: block;
        text-align: center;
    }
    #logo{width: 100%;padding-left: 0;}
    .nav{width: 100%;}
    .box>li{width: 100%;}

    #student img{
    width: 100%;}

    .content>a{width: 100%;}
}