@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none; color: inherit;}
body{font-family: 'Gothic A1', sans-serif;}

.wrap{
    width: 940px; margin: auto; 
    /*border: 1px solid red;*/
}
a{text-decoration: none; color: inherit;}
.hide{display: none;}

/*로그인*/
.top1{
    background-color: #f7f8f3; 
    text-align: right; 
    color: #898e88; font-size: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeec;
}

/*메뉴*/
.top2{
    /*overflow: auto; */ /*hidden은 주면 나중에 sub를 넣어줄때 안보이게 된다.*/
    height: 64px;
    position: relative;
} 
.top2 h1{width: 240px; float: left; padding-top: 15px;}

.top2 nav{width: 615px; float: left;}
.top2 nav .main{font-size: 14px;}
.top2 nav .main>li{float: left; padding: 0 25px;}
.top2 nav .main>li>a{
    padding: 24px 6px; display: block;
    border-bottom: 4px solid #fff;
    font-weight: bold;
}
.top2 nav .main>li:hover>a{border-bottom: 4px solid #e65e72; color: #e65e72;}
.top2 nav .main>li:last-child>a{color: #9b9484;}
.bg{
    width: 100%; height: 270px; background-color: #fff;
    box-shadow: 0 5px 5px rgba(200,200,200,0.5);
    /*box-shadow: 0 5px 5px rgba(100,100,100,0.2);*/
    position: absolute; top: 98px; left: 0;
    display: none;
}
.top2 nav .sub{
    display: none;
    position: absolute; top: 66px; left: 0; padding-left: 180px;
    background-color: #fff; width: 100%; box-sizing: border-box;
    height: 250px; 
    padding-top: 30px; /*border: 1px solid blue;*/  
    z-index: 10;
}
.top2 nav .sub>li{width: 148px; float: left; font-weight: bold;}

.top2 nav .sub2{padding-top: 16px;}
.top2 nav .sub2>li>a{display: block; padding: 8px 2px 8px 0; font-weight: normal;}
.top2 nav .sub2>li>a:hover{color: #e65e72; font-weight: 700;}
.top2 button{
    float: right; font-size: 0; 
    background-color: transparent;
    border: 0; cursor: pointer;
    padding: 10px; margin-top: 10px;
}

#con{clear: both;}

/*슬라이드 영역*/
.art1{
    background-image: url(../img/img_main_kn2.png); 
    height: 360px;
}
.art1 ul{
    background-color: rgba(255,255,255,0.4); 
    padding: 12px; overflow: auto;
    width: 683px; margin: auto; 
    position: relative; top: 296px; 
}
.art1 ul li{
    background-color: #fff; 
    width: 167px; float: left;
    margin-right: 5px;
    
}
.art1 ul li:last-child{margin-right: 0;}
.art1 ul li a{
    display: block; padding: 12px 0; 
    text-align: center;
}
.art1 ul li a:hover{background-color: #979088; color: #fff;}
.art1 ul li a i{margin-right: 10px;}

/*게시판들*/
.art2{overflow: auto;}
.art2 section{
    float: left; width: 33.33%; 
    margin-top: 60px; padding: 0 19px;
    box-sizing: border-box;
}
.art2 h3{margin-bottom: 24px;}
.art2 ul{color: #4d4b4e;}
.art2 ul li{margin-bottom: 28px;}
.art2 ul li span{color: #8f9396; font-size: 12px; letter-spacing: 2px; }
.art2 ul li a{
    display: block; 
    text-overflow: ellipsis; white-space: nowrap; 
    overflow: hidden;
    margin-top: 6px;
} /* 말줄임 처리 : text-overflow: ellipsis; white-space: nowrap; 
    overflow: hidden; (4개가 한세트이다.) */
.art2 section{position: relative; height: 304px;}
.art2 section ul li:last-child{position: absolute; top: 0; right: 20px; color: #928d87; font-size: 12px;}

.sec2{border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;}
.sec2 h3{color: #1f8cab;}

.art3{margin-top: 60px;}
.art3 a{display: inline-block; width: 49%; float: left;}
.art3 a img{width: 100%; float: left;}
.art3 a:last-child img{margin-left: 20px;}

footer{clear: both; background-color: #454d5a; margin-top: 104px; color: #fff; overflow: auto;}
footer .f1{width: 760px; float: left;}
footer .f2{float: right;}

footer .f1 .f1-1{padding-top: 28px;}
footer .f1 .f1-1 span{padding: 0 10px;}
footer .f1 .f1-1 span:last-child::before{content: '|'; padding-right: 20px; font-size: 11px; position: relative; top: -2px;}
footer .f1 .f1-2{clear: both; font-size: 12px; color: #8793ab; padding-top: 14px;}
footer .f1 .f1-3{padding-top: 28px; line-height: 1.3;}
footer .f1 .f1-3 img{float: left; margin-right: 8px; padding-bottom: 64px;}
footer .f1 ul{padding-top: 28px;}
footer .f1 ul li{float: left; padding-right: 12px; border-right: 1px solid #fff; margin-right: 12px; font-size: 12px;}
footer .f1 ul li:last-child{border: 0;}

footer .f2 a img{margin-top: 28px; margin-left: 8px; }

#popup{
    position: fixed; top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.3);
    display: none;
}
#popup .box{
    width: 500px; height: 650px; 
    background-color: #fff; 
    margin: 220px auto;
    border: 1px solid #aec4f3;
    position: relative;
}
#popup .box h4{
    font-size: 20px; padding: 18px; 
    border-bottom: 1px solid #c7c9d6;
}
#popup .box ul{}
#popup .box ul li{
    float: left; 
    width: 33.33%; color: #8291a4;
    border-bottom: 1px solid #8291a4;
    height: 51px;
}
#popup .box ul li a{
    display: block; padding: 18px 0 15px;
    text-align: center; 
}
#popup .box ul li a.on{
    color: #eb5875; 
    border-bottom: 3px solid #eb5875;
    font-weight: bold;
}

#popup .box .tabcon{clear: both;}
#popup .box .tabcon > div{padding: 10px; padding-bottom: 16px;}
#popup .box .tabcon .tab1{
    background-color: #e3e3e3; 
    position: relative;
}
#popup .box .tabcon .tab1 input{
    background-color: #8291a4; 
    color: #fff; padding: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 0;
}
#popup .box .tabcon .tab1 input::placeholder{color: #fff;} /* ::가상선택자 */
#popup .box .tabcon .tab1 button{
    border: 0; background-color: transparent;
    position: absolute; top: 20px; right: 20px;
}
#popup .box .tabcon .tab1 p{
    color: #8a9e9c; font-size: 13px;
    padding: 18px; padding-bottom: 5px;
}

#popup .box .tabcon .tab2{background-color: #b9adad; display: none;}
#popup .box .tabcon .tab3{background-color: #ddc7c7; display: none;}

#popup .box button.close{
    position: absolute; top: 0; right: 0; 
    padding: 10px; font-size: 2em; 
    border: 0; background-color: transparent; 
    cursor: pointer;
}