@charset "utf-8";

/************************************************************************ 공통 ************************************************************************/
body{position:relative;padding:70px 0 40px 0;background:#f2f0f0;overflow-y:scroll;}
.coverDisplay{position:absolute;left:0;top:0;z-index:1000;width:100%;height:100%;display:none;text-indent:-9999px;overflow:hidden;background:rgba(0,0,0,0.5)}
.coverDisplay.on{display:block;}

/************************************************************************ 레이아웃 ************************************************************************/
header{
    position:fixed;
    top:0;
    left:0;
    z-index:1001;
    width:100%;
    background-color: #fff;
    border-bottom: 5px solid #fecf00;
}
header .upper {
    display:flex;justify-content:space-between;
}
header #trigger, header #btnSrch {
    padding: 20px;
}
header h1 {
    order: 2;
    align-self: center;
}
header h1 a {
    display: block;
}
header h1 a img {
    max-height: 50px;
}
header #trigger {
    order: 1;
}
header #btnSrch {
    order: 3;
}
header .lowwer {
    display: none;
}
footer {
    background-color: #dcdcdd;
    padding: 20px 0;
}
footer p {
    text-align: center;
}
footer .conv_pc a {
    display:inline-block;
    background-color: #fff;
    font-size: 14px;
    line-height: 27px;
    padding: 0 15px;
    border: 1px solid #ebebeb;
    border-radius: 5px;
}
footer .copyright {
    margin: 15px 0;
    color: #494949;
    font-size: 13px;
}
#container:after{content:"";display:block;clear:both;}
#container section:first-child {
    margin-top: 0!important;
}
#container section{margin:10px;background:#fff;}
#container section>article{border-top:1px solid #ccc;}
#container section>article:first-child{border-top:none;}
#container section>article>h1{padding:10px;font:bold 1em/1em "Malgun Gothic",sans-serif;letter-spacing:-1px;}
#container section>article>h1.titleList{color:#222222;border-bottom:1px solid #ccc;background:#f6f6f6;}
#container section>article>h1.titleSkin{color:#222222;border-top:2px solid #ae0d11;border-bottom:1px solid #ccc;}
article .title {
    font: 400 1em/1.2em "Malgun Gothic",sans-serif;
    letter-spacing: -0.1rem;
}

/* Mobile */
@media all and (max-width:639px){
#container section{margin:0;}
#container .contents{width:100%;}
#container .aside{width:100%;}
}

/* Pc */
@media all and (min-width:640px){
#container .contents{float:left;width:60%;}
#container .aside{float:right;width:40%;}
#container .aside section{margin-left:0;}
}

/************************************************************************ 메뉴 ************************************************************************/
.menu {
    background-color: #fff;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.menu > li:nth-child(n + 4) {
    display: none;
}
.menu .parent {
    display: block;
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.menu .parent + ul {
    display: none;
}
/************************************************************************ 검색창 ************************************************************************/
#srch{position:fixed;left:0;top:15px;width:100%;}
.searchFieldset, .searchFieldset button {
    border: 0;
    padding: 0;
    margin: 0;
}
.searchFieldset {
    background-color: #8d97a1;
    padding: 10px;
    box-sizing: border-box;
}
.searchFieldset:after {
    content: '';
    display: block;
    clear: both;
}
.searchFieldset > * {
    float: left;
}
.searchFieldset input[type="text"] {
    width: calc(100% - 70px);
    height: 30px;
    line-height: 20px;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 14px;
    border: 0;
    margin: 0;
}
.searchFieldset button {
    width: 70px;
    height: 30px;
    line-height: 30px;
    background-color: #5d6b78;
    color: #fff;
    border: 0;
}
/************************************************************************ 컨트롤러 ************************************************************************/
#controller{position:fixed;left:0;bottom:0;z-index:1001;width:100%;background:#fff;}
#controller.middle{bottom:0;background:none;}
#controller:after{content:"";display:block;clear:both;}
#controller a{float:left;width:20%;padding:10px 0;border-top:2px solid #a5a5a5;}
#controller a img{display:block;width:20px;height:20px;margin:0 auto;}
#controller .urlWrap{width:100%;display:none;background:#e5e5e5;border-top:2px solid #a5a5a5;}
#controller .urlWrap.on{display:block;}
#controller .urlWrap p{padding:10px;padding-bottom:0;}
#controller .urlWrap em{display:block;padding:10px;}
#controller .urlWrap em span{display:block;padding:0 10px;border:1px solid #ccc;border-radius:5px;overflow:hidden;background:#fff;}
#controller .urlWrap em span input[type="text"]{display:block;width:100%;height:2em;font:bold 1em/2em "Malgun Gothic",sans-serif;letter-spacing:-1px;border:none;border-radius:0;}
#controller .urlWrap em span input[type="text"]:focus{outline:none;}
.info-wrap {
    margin-top: 10px;
    text-align: center;
    padding: 0 15px;
}
.info-wrap p {
    display: inline-block;
    font-size: 12px;
    line-height: 15px;
    padding:3px 0;
    letter-spacing: -1px;

}
.info-wrap p span:nth-child(2) {
    margin-left: 15px;
}