@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='date'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input[type='date']::-webkit-calendar-picker-indicator {position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;color:transparent;background:transparent;}
input:checked[type='checkbox'] {background-color:#666;-webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
strong {font-weight:normal;}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:14px;line-height:1.42857143;font-family:'Noto Sans KR', sans-serif;color:#333}
a {color:#333;text-decoration:none;cursor:pointer;}
address,caption,cite,code,dfn,em,var,label {font-style:normal;}
legend, caption, .hidden {clip:rect(0,0,0,0);position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;}
button:focus {outline:none;}
button:disabled {cursor:default;}
.mt-0 {margin-top:0 !important;}
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* layout */
.wrap .inner {max-width:1200px;margin:0 auto;overflow:hidden;}
.stitle {font-size:22px;margin:25px 0 20px;font-weight:500;}

/* header */
.header {position:absolute;top:0;width:100%;}
.header .inner {position:relative;}
.header .logo {display:flex;align-items:flex-end;width:200px;height:80px;margin:0 auto;}
.header .logo img {width:100%;}
.header .topUtilButtons {position:absolute;right:0;top:35px;}
.header .topUtilButtons .abtn {margin:0 0 0 5px;padding:0 20px;background:transparent;border:1px solid #fff;height:38px;font-size:14px;color:#fff;font-weight:600;border-radius:5px;}

/* footer */
.footer {background:#F5F5F5;}
.footer .address-area {border-top:1px solid #ddd;padding:20px 0 80px;}
.footer .address-area .address {padding:0 30px;}
.footer .address-area .address .title {margin-bottom:20px;font-size:15px;color:#54595F;font-weight:500;letter-spacing:1px;line-height:1;}
.footer .address-area .address .address-list li {margin-bottom:5px;font-size:15px;color:#a1a1a1;font-weight:300;letter-spacing:-0.5px;line-height:1.5;}
.footer .address-area .address .copyrights {margin-top:30px;font-size:15px;color:#a1a1a1;font-weight:400;letter-spacing:0.6px;line-height:24px;}

/* visual-wrap */
.visual-wrap {position:relative;z-index:-1;display:flex;align-items:center;min-height:200px;padding-top:80px;background:url('/assets/images/layout/mypage_banner_bg.jpg') no-repeat center center / cover;}
.visual-wrap:before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.75;}
.visual-wrap .inner {position:relative;}
.visual-wrap .title {display:block;font-size:40px;color:#fff;font-family:"Poppins", Sans-serif;text-align:center;}
.visual-wrap .sub-title {display:block;font-size:40px;color:#cc2ca7;font-family:"Poppins", Sans-serif;text-align:center;}


/* container */
.container {padding:50px 0 100px;}

/* page-tabs */
.page-tabs {display:flex;flex-wrap:wrap;padding:0 0 50px;}
.page-tabs .item {flex:1;}
.page-tabs .item a {display:flex;justify-content:center;align-items:center;height:58px;font-size:16px;color:#303030;text-align:center;border:2px solid #fff;font-weight:500;white-space:nowrap;}
.page-tabs .item.on a {color:#cc2ca7;border:2px solid #cc2ca7;}
.page-tabs .item:hover a {color:#cc2ca7;}

/* tab-list */
.tab-list {display:flex;margin-bottom:20px;border-bottom: 1px solid #dee2e6;}
.tab-list button {position:relative;padding:0 10px;color: #303030;height: 40px;font-size: 15px;}
.tab-list button.on:after {content: "";position: absolute;left: 0;bottom: -1px;width: 100%;height: 3px;background: #000}
.tab-list button.on {font-weight: 500}
.tab-content {display: none;}
.tab-content.active {display: block;}

/* 성적현황 */
.record-list {display:flex;flex-wrap:wrap;margin:-10px;}
.record-list .item {flex:0 0 33.3%;padding:10px;box-sizing:border-box;}
.record-list .item button {display:block;width:100%;height:68px;text-align:center;border:1px solid #ddd;background:#f2f2f2;font-size:16px;color:#222;}

/* 수강정보 */
.my-lecture-box {display:flex;flex-wrap:wrap;background:#f9f9f9;margin-left:-1px;}
.my-lecture-box .item {flex:1;padding:40px;border-left:1px solid #e8e8e8;box-sizing:border-box;}
.my-lecture-box .item:first-child {border-left:0;}
.my-lecture-box .item .lbl {display: inline-block;font-size: 14px;color: #fff;padding: 2px 30px 4px;background-color: #cc2ca7;border-radius: 15px;}
.my-lecture-box .item .txt {padding:20px 0 0 0;font-size: 24px;color: #333;}
.my-lecture-box .item .txt.nowrap {white-space:nowrap;}

/* 강사정보 */
.my-teacher-box {display:flex;flex-wrap:wrap;background:#f9f9f9;margin-bottom:-1px;}
.my-teacher-box .item {display:flex;flex:0 0 50%;box-sizing:border-box;padding:40px 50px;border-bottom:1px solid #e8e8e8;}
.my-teacher-box .item:nth-child(odd) {border-right:1px solid #e8e8e8;}
.my-teacher-box .item .picture {flex:0 0 160px;}
.my-teacher-box .item .picture img {width:160px;height:160px;display:block;max-width:100%;overflow:hidden;border-radius:50%;}
.my-teacher-box .item .infos {flex:1;padding:0 0 0 30px;}
.my-teacher-box .item .infos li {display:flex;padding:14px 0;font-size:15px;color:#333;border-top:1px solid #e8e8e8;word-break:break-word;}
.my-teacher-box .item .infos li:first-child {border:0;}
.my-teacher-box .item .infos li .lbl {flex:0 0 75px;color:#7a7a7a;}
.my-teacher-box .item .infos li .link {text-decoration:underline;color:#337ab7;}

/* 결제정보 */
.table-search {margin:30px 0 0 0;text-align:center;}
.table-search input {height:38px;border:1px solid #aaa;padding:0 15px;border-radius:3px;}
.table-search input::placeholder {color:#999;}

/* table */
.data-list {width:100%;border-collapse:collapse !important;}
.data-list thead tr th {border:1px solid #000;}
.data-list tbody tr td {border:1px solid #e5e5e5;}
.data-list thead tr th {padding:12px 15px;background:#303030;font-size:16px;font-weight:500;text-align:center;color:#fff;}
.data-list tbody tr td {padding:12px 15px;font-size:14px;text-align:center;color:#333;}
.data-list tbody tr td.text-left {text-align:left;}
.data-list tbody tr td .link {text-decoration:underline;}
.data-list tbody tr:nth-child(2n) td {background-color:#f2f2f2;}
.dataTables_wrapper .dataTables_paginate {float: inherit;text-align: center;margin: 10px 0;}
.dataTables_wrapper .dataTables_filter {width: 100%;text-align: center;}
.dataTables_wrapper .dataTables_filter label {font-size:14px;color:#333;font-weight:700;}
.dataTables_wrapper .dataTables_filter input {height:38px;border:1px solid #aaa;padding:8px;border-radius:3px;margin-left:3px;}
.dataTables_wrapper .dataTables_info {display:none;}
/*
.dataTables_wrapper .dataTables_paginate .paginate_button.current {color: #303030 !important;background: #eaeaea !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button {display: inline-block;margin: 0 2px;width: 30px;line-height: 1;height: 30px;padding: 5px 10px;text-align: center;background: #fff;vertical-align: top;color: #303030 !important;background: #fff !important;border: 0 !important;}
*/
/* description */
.desc-star {position:relative;margin:10px 0 0 0;padding:0 0 0 10px;font-size:13px;color:#333;line-height:20px;}
.desc-star:before {content:'*';position:absolute;left:0;top:3px;}

/* login */
.login-wrap {max-width:400px;margin:60px auto 0;}
.login-wrap .logo {text-align:center;}
.login-wrap .login-cont {margin:40px 0 0 0;}
.login-wrap .login-cont .login-input li {margin:10px 0 0 0;}
.login-wrap .login-cont .login-input li:first-child {margin:0;}
.login-wrap .login-cont .login-input li input {width:100%;border:1px solid #d9d9d9;border-radius:5px;height:46px;padding:0 12px;font-size:14px;color:#444;box-sizing:border-box;}
.login-wrap .login-cont .save-id {margin:10px 0 0 0;font-size:14px;color:#7a7a7a;}
.login-wrap .login-cont .save-id input,
.login-wrap .login-cont .save-id label {vertical-align:middle;}
.login-wrap .login-cont .btn-login {margin:15px 0 0 0;}
.login-wrap .login-cont .btn-login button {width:100%;background:#cc2ca7;height:46px;font-size:15px;color:#fff;font-weight:600;border-radius:5px;}
.login-wrap .login-cont .desc-list {margin:40px 0 0 0;}
.login-wrap .login-cont .desc-list li {font-size:13px;color:#333;line-height:20px;}

/* 비밀번호 변경 */
.pw-wrap {max-width:400px;margin:0 auto;}
.pw-wrap .logo {text-align:center;}
.pw-wrap .pw-cont {margin:40px 0 0 0;}
.pw-wrap .pw-cont .pw-input li {margin:10px 0 0 0;}
.pw-wrap .pw-cont .pw-input li:first-child {margin:0;}
.pw-wrap .pw-cont .pw-input li input {width:100%;border:1px solid #d9d9d9;border-radius:5px;height:46px;padding:0 12px;font-size:14px;color:#444;box-sizing:border-box;}
.pw-wrap .pw-cont .btn-area {display:flex;margin:15px 0 0 -5px;}
.pw-wrap .pw-cont .btn-area button {flex:1;width:100%;height:46px;margin:0 0 0 5px;font-size:15px;font-weight:600;border-radius:5px;}
.pw-wrap .pw-cont .btn-area .btn-ok {background:#cc2ca7;color:#fff;border:1px solid #cc2ca7;}
.pw-wrap .pw-cont .btn-area .btn-cancel {background:#fff;color:#cc2ca7;border:1px solid #cc2ca7;}

@media (max-width: 1229px) {
	/* layout */
	.wrap .inner {padding:0 15px;}
	.stitle {font-size:18px;margin:20px 0 18px;}
	
	/* header */
	.header .topUtilButtons {right:15px;}

	/* footer */
	.footer .address-area .address {padding:0;}
}

@media (max-width: 991px) {
	/* 성적현황 */
	.record-list .item {flex:0 0 50%;}

	/* 수강정보 */
	.my-lecture-box {position:relative;}
	.my-lecture-box:before {content:'';position:absolute;left:0;top:0;width:100%;height:1px;background:#f9f9f9;}
	.my-lecture-box .item {flex:0 0 50%;padding:20px;border-top:1px solid #e8e8e8;}
	.my-lecture-box .item:nth-child(odd) {border-left:0;}
	.my-lecture-box .item .lbl {font-size: 13px;}
	.my-lecture-box .item .txt {padding:15px 0 0 0;font-size: 20px;}

	/* 강사정보 */
	.my-teacher-box .item {flex:0 0 100%;padding:20px 25px;border-right:0 !important;}
}

@media (max-width: 767px) {
	/* header */
	.header .logo {margin:0;}
	.header .logo img {display:block;width:80%;}
	.header .topUtilButtons {bottom:0;top:auto;}
	.header .topUtilButtons .abtn {font-size:12px;padding:0 10px;height:35px;font-weight:500;}

	/* container */
	.container {padding:20px 0 70px;}

	/* visual-wrap */
	.visual-wrap {min-height:200px;}
	.visual-wrap .title {font-size:30px;}
	.visual-wrap .sub-title {font-size:30px;}

	/* page-tabs */
	.page-tabs {padding:0 0 30px;}
	.page-tabs .item {flex:0 0 33.3%;}
	.page-tabs .item a {height:40px;font-size:14px;}

	/* 성적현황 */
	.record-list .item {flex:0 0 100%;padding-top:0;}
	.record-list .item button {height:50px;font-size:14px;}

	/* 강사정보 */
	.my-teacher-box .item {flex-wrap:wrap;}
	.my-teacher-box .item .picture {flex:0 0 100%;display:flex;justify-content:center;margin-bottom:20px;}
	.my-teacher-box .item .infos {padding:0;}
	.my-teacher-box .item .infos li {border:0;padding-bottom:0;}
}

@media (max-width: 575px) {
	/* login */
	.login-wrap {max-width:none;}

	/* 비밀번호 변경 */
	.pw-wrap {max-width:none;}

	/* 수강정보 */
	.my-lecture-box .item {flex:0 0 100%;border-left:0 !important;}
	.my-lecture-box .item .txt {padding:10px 0 0 0;font-size: 16px;}
}