/* 공통 */
.wrap {
    height: 100vh;
}
.wrap .cnt-area {
    height: calc(100vh - 60px);
}

/* ------------------------------------------------------------------------------- */

/* 인풋 타입-1 */
.input-type-1 {
    width: 100%;
    height: 44px;
}
.input-type-1 input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #dbdbdb;
    padding: 0 12px;
    background: #fff;
    font-size: 14px;
    color: #000;
    border-radius: 4px;
}
.input-type-1 input::placeholder {
    color: #999;
}

/* ------------------------------------------------------------------------------- */

/* 체크 텍스트 타입 */

/* 체크 텍스트 타입-1 */
.check-text-type-1 input {
    display: none;
}
.check-text-type-1 input + label {
    display: inline-block;
    cursor: pointer;
    padding-left: 20px;
    line-height: 20px;
    position: relative;
}
.check-text-type-1 input + label::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url(../img/ico-check-1.svg) no-repeat center center/cover;
}
.check-text-type-1 input:checked + label::before {
    background: url(../img/ico-check-1-active.svg) no-repeat center center/cover;
}
.check-text-type-1 input + label .text {
    font-size: 12px;
}

/* ------------------------------------------------------------------------------- */

/* 헤더 영역 */
.header-area {
	position:relative; 
    height: 60px;
    background: #EEF2FB;
}
.header-area .btn_prev{position:absolute; left:10px; top:50%; transform:translateY(-50%); display:block; width:35px; height:35px;}
.header-area .btn_prev a{display:block; width:100%; height:100%;}
.header-area .btn_prev img{max-height:100%;}
.header-area .btn_login{position:absolute; right:20px; top:50%; transform:translateY(-50%); text-decoration:underline; font-size:14px; color:#000;}

/* ------------------------------------------------------------------------------- */

/* 로그인 영역 */
.login-area {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-area .login-box {
    width: 360px;
}
.login-area .login-box h1 {
    font-size: 36px;
}
.login-area .login-box .input-box-1 {
    margin-top: 32px;
}
.login-area .login-box .input-box-2 {
    margin-top: 8px;
}
.login-area .login-box .id-save-btn {
    margin-top: 8px;
}
.login-area .login-box .login-btn {
    margin-top: 12px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    border-radius: 4px;
}

@media (max-width:767px) {
    .login-area .login-box {
        width: 320px;
    }
    .login-area .login-box h1 {
        font-size: 28px;
    }
    .login-area .login-box .input-box-1 {
        margin-top: 24px;
    }
}

/* ------------------------------------------------------------------------------- */

/* 메뉴 리스트 영역 */
.menu-list-area {
    overflow-y: auto;
}
.menu-list-area::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.menu-list-area::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #A6A4A4;
}
.menu-list-area::-webkit-scrollbar-track {
    background: #ddd;
}
.menu-list-area .list-box > li {
    box-sizing: border-box;
    padding: 20px;
    border-bottom: 1px solid #dbdbdb;
    cursor: pointer;
}
.menu-list-area .list-box > li:last-child {
    border-bottom: none;
}
.menu-list-area .list-box > li .ico-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 16px;
}
.menu-list-area .list-box > li .ico-box > .img-box {
    width: 36px;
}
.menu-list-area .list-box > li .text-box {
    width: calc(100% - 96px);
}
.menu-list-area .list-box > li .text-box h3 {
    font-size: 18px;
}
.menu-list-area .list-box > li .text-box .file-infor-box {
    margin-top: 8px;
}
.menu-list-area .list-box > li .text-box .file-infor-box .file-type {
    font-size: 16px;
    margin-right: 8px;
}
.menu-list-area .list-box > li .text-box .file-infor-box .file-size {
    font-size: 14px;
}
.menu-list-area .list-box > li .text-box .file-infor-box .line {
    width: 1px;
    height: 10px;
    margin: 0 6px;
    background: #999;
}
.menu-list-area .list-box > li .text-box .file-infor-box .date {
    font-size: 14px;
}


/* 오디오 플레이어 영역 */
.contents{min-height:calc(100vh - 60px);}
.audio_box{box-sizing:border-box; display: flex; justify-content: center; align-items: center; }
.audio_con{text-align:center; }
.audio_con .tit_audio{font-size:28px; }
.audio_con .audio_player{margin-top:20px;}
.audio_con .btns_audio{margin:20px 0 15px; font-size:0;}
.audio_con .btns_audio .btn{display:inline-block; height:30px; margin:0 5px; padding:0 25px; background:#2461D7; border-radius:30px; font-size:14px; color:#fff;}
.audio_con .btns_audio .btn-disabled{display:inline-block; height:30px; margin:0 5px; padding:0 25px; background:#9f9f9f; border-radius:30px; font-size:14px; color:#fff;}
.audio_con .btns_audio .radio_wrap{display:block; margin-bottom:10px; }
.audio_con .btns_audio .radio_wrap input{display:none;}
.audio_con .btns_audio .radio_wrap input + label{position:relative; display:block; line-height:30px; font-size:14px; }
.audio_con .btns_audio .radio_wrap input + label span{position:relative; display:inline-block; vertical-align:top; width:50px; margin-left:10px; font-size:14px; height:30px; background:#ddd; border-radius:30px; transition:0.3s;}
.audio_con .btns_audio .radio_wrap input + label span:after{content:''; position:absolute; left:4px; top:4px; display:block; width:22px; height:22px; background:#fff; border-radius:50%; transition:0.3s;}
.audio_con .btns_audio .radio_wrap input:checked + label span{background:#2461D7; transition:0.3s;}
.audio_con .btns_audio .radio_wrap input:checked + label span:after{left:auto; right:4px; transition:0.3s;}
.audio_con .txt1{font-size:15px; color:#000;}

@media (max-width:767px) {
	.header-area .btn_login{font-size:13px;}
    .menu-list-area .list-box > li {
        padding: 16px;
    }
    .menu-list-area .list-box > li .ico-box {
        width: 60px;
        height: 60px;
        margin-right: 12px;
    }
    .menu-list-area .list-box > li .ico-box > .img-box {
        width: 28px;
    }
    .menu-list-area .list-box > li .text-box {
        width: calc(100% - 72px);
    }
    .menu-list-area .list-box > li .text-box h3 {
        font-size: 16px;
    }
    .menu-list-area .list-box > li .text-box .file-infor-box .file-type {
        font-size: 14px;
    }
    .menu-list-area .list-box > li .text-box .file-infor-box .file-size {
        font-size: 12px;
    }
    .menu-list-area .list-box > li .text-box .file-infor-box .line {
        height: 8px;
        margin: 0 4px;
    }
    .menu-list-area .list-box > li .text-box .file-infor-box .date {
        font-size: 12px;
    }

	.audio_con .tit_audio{font-size:24px; }
}

.blue{
  color: blue;
}

.header-area .text_path{top:50%; padding-top : 20px; font-size:14px; color:#000; text-align:center;}