/*===========================================================================
	CSS 초기화
============================================================================*/
* {box-sizing:border-box; margin:0; padding:0; }
/* html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, i, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, menu, nav, section, video, a {border:0; outline:0; font-size:100%;  line-height:1;}
body {line-height:1;} */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul, ol, li {list-style:none;}
strong {display: inline-block;}
a {margin:0; padding:0; font-size:100%; }
table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}
p {line-height:1.5;}
img {object-fit: cover;}
span {display: inline-block;}
input {padding:8px; outline:none;}
label {font-size:18px;}
button {cursor:pointer; border:0; border-radius:8px; background:#283f75; color:#fff}
a {text-decoration: none;}
input[type="text"], input[type="password"],input[type="email"], button, textarea {border:1px solid #e1e1e1; appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
textarea {resize: none; padding:14px; font-size: 16px;}
::placeholder {color:#bdbdbd}
section{margin-bottom: 50px;}
.col-group {display:flex; align-items: center;}
.onlinegrab{max-width: 1260px; margin: 0 auto;}
.main .content{padding: unset;}
.main .right{float: unset;}
@media ( max-width: 1024px ) {
	.onlinegrab{min-width: 100%; padding: 0 10px;}
	.main img {width: 100%;}
}


/*===========================================================================
	공통요소
============================================================================*/

body {background-color: #eff3f8;}
h3{font-size: 17px; color: #283f75; font-weight: bold; padding: 30px 0; line-height: 1.5;}
.btn-blue{padding: 0 27px; height: 35px; background-color: #283f75; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold;}
.btn-black{padding: 0 27px; height: 35px; background-color: #707070; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold;}
.footer{background-color: #fafafa;}

/*===========================================================================
	온라인강의 메인
============================================================================*/
.main .section01 .left {width: 1015px; height: 523px; overflow: hidden; position: relative; margin-right: 10px;}
.main .section01 .left .swiper-button-next{width: 24px; height: 24px; margin: 0; right: 13px; top: 12px; background-image: url("../../images/online/arrow_forward_ios_black_24dp\ \(2\).svg");}
.main .section01 .left .swiper-button-prev{width: 24px; height: 24px; margin: 0; right: 69px; top: 12px; left: auto; background-image: url("../../images/online/arrow_back_ios_black_24dp\ \(2\).svg");}
.main .section01 .left .swiper-button-play{position: absolute; width: 24px;  height: 24px; margin: 0; right: 41px; top: 12px; background-image: url("../../images/online/pause_black_24dp.svg"); z-index: 9999;}
.main .section01 .left .swiper-button-play.pause{background-image: url("../../images/online/arrow_right_black_24dp.svg");}
.main .section01 .right {width: calc(100% - 1015px - 10px); height: 523px; text-align: unset;}
.main .section01 .right .banner{width: 100%; height: 116px; }
.main .section01 .right .box.box2{background-color: #fff;}
/***boxWrap-center중간박스***/
.boxWrap-center{width:230px; margin-right:10px;}
/*banner1*/
.boxWrap-center .banner1 {position: relative; margin-top: 0; height: 116px;}
.boxWrap-center .banner1 .slideItem { height: 115px;/* background-size: cover; */background-repeat: no-repeat; background-position: center;}
.boxWrap-center .banner1 .slideItem.bg01 img {background-size:cover; background-repeat:no-repeat; width: 100%;}
.boxWrap-center .banner1 .slideItem.bg02 img {background-size:cover; background-repeat:no-repeat;}
.boxWrap-center .banner1 .controls {width: 100%; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/*box2*/
.boxWrap-center .box2,.boxWrap-right .box2{height:397px;}
.boxWrap-center .box2 {position: relative;}
.boxWrap-center .box2 .inner-tit-wrap {display: block;height: 46px; border-bottom: 1px solid #ddd; padding: 12px 17px;}
.boxWrap-center .box2 .inner-tit-wrap strong {display: inline-block;margin-right: 3px;}
.boxWrap-center .box2 ul {height: 350px;overflow: hidden;} /*  */
.boxWrap-center .box2 ul li {height: 35px;  position: relative; cursor: pointer; line-height:1;}
.boxWrap-center .box2 ul li a {display: block;padding: 10px 17px;text-decoration: none;transition:all 0s ease;}
.boxWrap-center .box2 ul li a  span {display: inline-block;text-overflow: ellipsis; overflow: hidden;max-height: 50px;width: calc(100% - 71px);white-space: nowrap;}
.boxWrap-center .box2 ul li:hover a,.boxWrap-center .box2 ul li:focus a  {background: #edf5fe; text-decoration: none; color: #0078f6; transition:all 0s ease; }
.boxWrap-center .box2 ul li em {position: absolute; right: 17px;}
.boxWrap-center .box2 ul li em i { display: inline-block;padding-left: 8px;vertical-align: middle;} 
.boxWrap-center .box2 .dDayRank-controls {position: absolute; right: 17px;z-index: 50;top: 12px;}
.boxWrap-center .box2 .dDayRank-controls .btn {padding: 2px 3px;border: 1px solid #ddd;width: 25px;height: 25px;vertical-align: middle;float: left;margin-left: -1px;}
.boxWrap-center .box2 .dDayRank-controls  .pagenation { font-size: 14px; display: inline-block;padding-right: 7px;float: left;}


/*  */
.main .section02 input{width: 1050px; height: 70px; margin-right: 10px; font-size: 20px;}
.main .section02 button{width: calc(100% - 1050px - 10px); height: 70px; font-size: 20px; justify-content: center;}
.main .section02 button img{width: 25px; height: 25px; margin-left: 10px;}

.main .section03 .tab ul li{width: calc(100% / 8); height: 71px;  display: flex; align-items: center; justify-content: center; background-color: #e3e3e3; color: #a8a8a8; border-right: solid 1px #c2c2c2; font-weight: bold; cursor: pointer;}
.main .section03 .tab ul li:last-child{border-right: unset;}
.main .section03 .tab ul li.current{background-color: #fff; color: #325283; border: unset; border-top: 2px solid #325283;}

.main .section03 .tap-contents{background-color: #fff; padding: 60px 0;}
.main .section03 .tap-content{display: none;}
.main .section03 .tap-content.current{display: block;}

.main .section03 .tap-content ul.col-group{flex-wrap: wrap; gap: 24px;}
.main .section03 .tap-content ul li{width: calc((100% - (24px * 3)) / 4); position: relative;}
.main .section03 .tap-content ul li img{margin-bottom: 12px;}
.main .section03 .tap-content ul li strong{margin-bottom: 6px; font-size: 14px;}
.main .section03 .tap-content ul li p{margin-bottom: 25px;}
.main .section03 .tap-content ul li .bookmark{position: absolute; background-image: url("../../images/online/star.png"); width: 20px; height: 20px; top: 7px; right: 7px; cursor: pointer;}
.main .section03 .tap-content ul li .bookmark.current{background-image: url("../../images/online/star_yellow.png");}
.main .section03 .see-more{justify-content: center;}
.main .section03 .see-more button{width: 200px; height: 70px; font-size: 20px; color: #fff;}
.main .section03 .see-more button i{color: #fff;}

@media ( max-width: 768px ) {
	.main .section01 {display: none;}

	.main .section02 input{width: calc(100% - 70px); height: 38px; margin: 0; font-size: 16px;}
	.main .section02 button{width: 140px; height: 38px; color: #fff; font-size: 16px;}

	.main .section03 .tab {display: block; opacity: 1;}
	.main .section03 .tab ul{flex-wrap: wrap;}
	.main .section03 .tab ul li{width: calc(100% / 4);}
	.main .section03 .tab ul li:nth-child(4n){border-right: unset;}

	.main .section03 .tap-contents{padding-top: 24px;}
	.main .section03 .tap-content ul li{width: calc((100% - (10px)) / 2);}
	.main .section03 .see-more button{height: 38px; font-size: 16px;}
	.main .section03 .tap-content ul.col-group{flex-wrap: wrap; gap: 10px;}

}
/*===========================================================================
	온라인강의 디테일
============================================================================*/
.main.details h3 span{margin-right: 20px; position: relative; color: #828282;}
.main.details h3 span::after{content: ''; position: absolute; width: 17px; height: 100%; background-image: url(../../images/online/arrow.png);}


.main.details > .side{position: sticky; left: 50%; top: 77px; width: 300px; transform: translateX(655px); background-color: #fff; box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.16);}
.main.details > .side .information{padding: 20px; height: 270px;}
.main.details > .side h4{font-size: 20px; line-height: 1.5; letter-spacing: -2px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid #707070;}
.main.details > .side ul li{margin-bottom: 10px;}
.main.details > .side ul li h5{width: 90px; color: #333; font-size: 15px;}
.main.details > .side ul li span{letter-spacing: -2px; margin-right: 5px;}
.main.details > .side ul li span i {color: #ffc400;}
.main.details > .side ul li p{font-size: 15px;}

.main.details > .side .btn-group {height: 50px; display: flex;}
.main.details > .side .btn-group a{display: flex; align-items: center; justify-content: center;}
.main.details > .side .btn-group .btn-blue{width: 250px; height: 100%; background-color: #283f75; font-size: 15px; font-weight: bold;}
.main.details > .side .btn-group .share{width: 50px; height: 100%; background-color: #7b7b7b;}
.main.details > .side .btn-group .share img{width: 20px; height: 20px;}

.main.details .section01 {margin-top: -523px;}
.main.details .section01 .pst{position: relative;}
.main.details .section01 .left {width: 100%; }

.main.details .section02 strong{font-size: 40px; letter-spacing: -2px; color: #283f75; margin-bottom: 30px;}
.main.details .section02 p{letter-spacing: -0.75px; color: #acacac; margin-bottom: 20px;}
.main.details .section02 ul {gap: 7px;}
.main.details .section02 ul li{padding: 9px 28px; background-color: #fff; border-radius: 17px;}
.main.details .section02 ul li a{color: #828282;}

.main.details .section03 .tab{position: sticky; top: 0; z-index: 9999;}
.main.details .section03 .tab.as{position: fixed; top: 0; z-index: 9999;}
.main.details .section03 .tab ul li{width: calc(100% / 4); font-size: 20px;}
.main.details .section03 .tap-contents .content > div{margin-bottom: 50px;}
.main.details .section03 .tap-contents .lecture > div{padding-bottom: 50px; border-bottom: 1px dashed #cbcbcb; margin-bottom: 50px;}
.main.details .section03 .tap-contents .content h4{width: 100%; height: 60px; line-height: 60px; background-color: #283f75; color: #fff; font-size: 30px; padding-left: 20px; margin-bottom: 50px;}
.main.details .section03 .tap-contents .lecture img{margin-bottom: 30px;}
.main.details .section03 .tap-contents .lecture h5{font-size: 30px; margin-bottom: 30px;}
.main.details .section03 .tap-contents .lecture p{color: #333; font-size: 15px;}

.main.details .section03 .tap-contents .teacher img{width: 370px; height: 400px; margin: 0; margin-right: 50px;}
.main.details .section03 .tap-contents .teacher h5{font-size: 30px; letter-spacing: -1.5px; margin-bottom: 20px;}
.main.details .section03 .tap-contents .teacher p{font-size: 15px; letter-spacing: -0.75px; line-height: 2;color: #333; padding-top: 20px; border-top:1px solid #cbcbcb; margin-bottom: 30px;}
.main.details .section03 .tap-contents .teacher ul{background-color: #f8f8f8; padding: 32px; padding-right: unset;}
.main.details .section03 .tap-contents .teacher ul li{list-style:inside; font-size: 15px; color: #333; margin-bottom: 10px;}
.main.details .section03 .tap-contents .teacher ul li:last-child{margin: 0;}

.main.details .section03 .tap-contents .lecture_table ul{border-top: 1px solid #4d4d4d; border-bottom: 1px solid #4d4d4d;}
.main.details .section03 .tap-contents .lecture_table ul li{width: 100%; height: 60px; border-bottom: 1px dashed #cbcbcb; justify-content: space-between;}
.main.details .section03 .tap-contents .lecture_table ul li:last-child{border: unset;}
.main.details .section03 .tap-contents .lecture_table ul li span{padding-left: 20px; font-weight: bold; font-size: 17px;}
.main.details .section03 .tap-contents .lecture_table ul li p{padding-left: 25px; font-size: 17px;}
.main.details .section03 .tap-contents .lecture_table ul li .btn-blue{background: #283f75; color: #fff;}

.main.details .section03 .tap-contents .postscript .guide{background-color: #fbfbfb; padding: 30px;}
.main.details .section03 .tap-contents .postscript .guide h5{font-size: 25px; color: #283f75; margin-bottom: 25px;}
.main.details .section03 .tap-contents .postscript .top{margin-bottom: 10px; align-items: center; justify-content: space-between;}
.main.details .section03 .tap-contents .postscript .name{position: relative; font-size: 18px; font-weight: bold; padding-right: 20px;}
.main.details .section03 .tap-contents .postscript .name::after{position: absolute; content: ''; height: 21px; width: 2px; background-color: #a8a8a8; right: 10px; top: 50%; transform: translateY(-50%);}
.main.details .section03 .tap-contents .postscript span {letter-spacing: -2px;}
.main.details .section03 .tap-contents .postscript span i{color: #ffc400; font-size: 18px;}
.main.details .section03 .tap-contents .postscript .register{padding: 20px; border-radius: 10px; border: solid 1px #283f75;}
.main.details .section03 .tap-contents .postscript .register  textarea{width: 100%; height: 109px; background-color: #f9f9f9; border: unset; outline: unset; margin-bottom: 19px;}
.main.details .section03 .tap-contents .postscript .register .btn-blue{width: 137px; height: 40px; font-weight: unset; margin: 0 auto; border-radius: 20px; background: #283f75; color: #fff;}
.main.details .section03 .tap-contents .postscript .register2{position: relative; padding: 20px; border-radius: 10px; border: solid 1px #bebebe;}
.main.details .section03 .tap-contents .postscript .register2 p{margin-bottom: 40px; color: #333;}
.main.details .section03 .tap-contents .postscript .register2 .date{display: flex; justify-content: flex-end; color: #a8a8a8;}
.main.details .section03 .tap-contents .postscript .register2 .btn-group{gap: 10px;}
.main.details .section03 .tap-contents .postscript .register2 .btn-group a{width: 30px; height: 30px; background-color: #6d6d6d; display: flex; align-items: center; justify-content: center;}
.main.details .section03 .tap-contents .postscript .register2 .btn-group a img{width: auto; width: 11px; height: 11px;}

.main.details .mb{display: none;}

@media ( max-width: 768px ) {
	.main.details .mb{display: block;}
	.main.details .mb .thumbnail{margin-bottom: 23px;}
	.main.details > .side{display: none;}

	.main.details .section02 strong{font-size: 20px;}
	.main.details .section02 ul {flex-wrap: wrap;}

	.main.details .section03 .tap-contents .content > div{flex-wrap: wrap;}
	.main.details .section03 .tap-contents .teacher img{margin: 0 auto 20px;}
	
	.main.details .section03 .tap-contents .lecture_table ul li p {font-size: 14px;}
	.main.details .section03 .tap-contents .content ul div{width: calc(100% - 118px);}

	.main.details .section03 .tap-contents .lecture_table ul li{height: auto;}
	.main.details .section03 .tap-contents .lecture_table ul li span{width: 70px;}
}


/*===========================================================================
	온라인강의 2 미리보기
============================================================================*/
.main.details .section03 .tap-contents .register_btn a{width: 230px; height: 76px; margin: 0 auto; font-size: 28px; font-weight: 500; background-color: #283f75;}

/*===========================================================================
	온라인강의 등록하기
============================================================================*/
.register nav{background: linear-gradient( to right, #283f75 50%, #ffffff 50%); border: solid 1px #283f75; margin-bottom: 50px;}
.register nav ul {width: 100%; height: 103px;}
.register nav ul li{width: calc(100% / 4); text-align: center; height: 100%; transform: skew(-50deg); background: #fff; border-left: 2px solid #283f75; display: flex; align-items: center; justify-content: center;}
.register nav ul li a {transform: skew(50deg); font-size: 32px; font-weight: bold; color: #a6b0c6;}
.register nav ul li a span{font-size: 12px;; width: 41px; height: 17px; line-height: 17px; margin-right: 13px; background-color: #a6b0c6; color: #fff;}
.register nav ul li.now{background-color: #283f75;}
.register nav ul li.now a{color: #fff;}
.register nav ul li.now a span{background-color: #fff; color: #283f75;}
.register nav ul li.now.past {border-right: 2px solid #fff;}
.register nav ul li.now.past a {opacity: 0.41;}
.register nav ul li.now.past a span{color: #fff; background-color: transparent; border: 1px solid #fff;}


.register .page{position: fixed; width: 100%;}
.register .page a{position: absolute; width: 100px; height: 100px; display: flex;}
.register .page .prev{left: 0; top: 300px;}
.register .page .next{right: 0; top: 300px;}



.register .top {height: 40px; margin-bottom: 12px;}
.register .top a{width: 137px; height: 40px; background-color: #707070; color: #fff; float: right;}

.register section .onlinegrab{background-color: #fff; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.16); padding: 50px 65px 65px;}
.register section h3 {text-align: center; font-size: 38px; letter-spacing: -1.5px; margin-bottom: 50px;}
.register section ul li{display: flex;  padding-bottom: 30px;}
.register section ul li .left {width: 150px; border-top: 2px solid #333;}
.register section ul li .left h4{margin-top: 20px; padding-left: 20px; font-size: 15px;}
.register section ul li .left h4 span{color: #ff0000;}
.register section ul li .right {width: calc(100% - 150px); border-top: 2px solid #e5e5e5; padding: 10px 10px 0;}
.register section ul li .right input{background-color: #f9f9f9; border: unset; font-size: 15px;}
.register section .deletion-btn{width: 38px; height: 40px; display: flex;}

/* 1 */
.register.report .section01 input{height: 40px;}
.register.report .section01 ul li:first-child input{width: 100%;}
.register.report .section01 ul li:nth-child(2n) .right{padding-top: 15px;}
.register.report .section01 ul li:nth-child(2n) input{display: none;}
.register.report .section01 ul li:nth-child(2n) label{font-size: 15px; color: #c9c9c9; font-weight: bold; margin-right: 50px;}
.register.report .section01 ul li:nth-child(2n) label div{position: relative; width: 20px; height: 20px; margin-right: 10px; border-radius: 100%; border: 2.5px solid #c9c9c9;}
.register.report .section01 ul li:nth-child(2n) label div span{position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%);}

.register.report .section01 ul li:nth-child(2n) input:checked + label{color: #333;}
.register.report .section01 ul li:nth-child(2n) input:checked + label div{border: 2.5px solid #333;}
.register.report .section01 ul li:nth-child(2n) input:checked + label div span{width: 70%; height: 70%; background-color: #333; border-radius: 100%;}

.register.report .section01 ul li:nth-child(3) p{margin-bottom: 15px;}
.register.report .section01 ul li:nth-child(3) input{width: 300px;}
.register.report .section01 ul li:nth-child(3) .right span{height: 26px; margin-left: 20px; background-color: #eff2f7; padding: 0 10px; border-radius: 50px; color: #828282; font-size: 14px;}
.register.report .section01 ul li:nth-child(3) .right span img{width: 16px; height: 16px; margin-left: 5px;}
.register.report .section01 ul li:nth-child(3) .right .btn-blue{height: 40px;}

.register.report .section01 ul li:nth-child(5) h5{width: 70px; margin-right: 10px;}
.register.report .section01 ul li:nth-child(5) .right div:first-child{margin-bottom: 10px;}
.register.report .section01 ul li:nth-child(5) .right div:first-child input{width: calc(100% - 80px);}

.register.report .section01 ul li:nth-child(5) .right .num{margin-right: 46px;}
.register.report .section01 ul li:nth-child(5) .right .num input {width: 100px; text-align: center;}
.register.report .section01 ul li:nth-child(5) .right .num span {margin: 0 10px;}
.register.report .section01 ul li:nth-child(5) .right .email input{width: 144px;}
.register.report .section01 ul li:nth-child(5) .right .email select{width: 214px; height: 40px; background-color: #f9f9f9; border: none; outline: none;}
.register.report .section01 ul li:nth-child(5) .right .email span{margin: 0 10px;}

/* 2 */
.register.report2 .section01 .onlinegrab > .col-group{align-items: unset;}
.register .teacher-img{position: relative; width: 300px; height: 330px; background-color: #f9f9f9; flex-direction: column; justify-content: center}
.register .teacher-img .deletion-btn{position: absolute; right: 0; top: 0;}
.register .teacher-img .addition-btn{width: 120px; height: 120px; display: flex; cursor: pointer;}
.register .teacher-img .addition-btn img{object-fit: contain;}
.register .teacher-img p {text-align: center; font-size: 15px; margin-top: 20px; letter-spacing: -1.75px; color: #aeaeae;}
.register .teacher-img p span{font-weight: bold; color: #aeaeae;}
.register .teacher-img p label{font-size: 15px; color: #003cff; font-weight: bold; cursor: pointer; text-decoration:underline;}
.register .teacher-img p input{display: none;}

.register.report2 .section01 .content {width: calc(100% - 300px); padding-left: 20px;}
.register.report2 .section01 .content .right input{width: 100%; height: 40px;}
.register.report2 .section01 .content .right textarea{width: 100%; height: 100px; background-color: #f9f9f9; border: unset; outline: unset; padding: 8px;}
.register .add{width: 100%; background-color: #8b8b8b; height: 40px; justify-content: center; margin-top: 10px;}
.register .add img{ width: 20px; height: 20px;}

.register.report2 .section02 .teacher-img {width: 100%; height: 263px;}
.register.report2 .section02 .right input{width: 100%; height: 40px;}
.register.report2 .section02 .right textarea{width: 100%; height: 242px; background-color: #f9f9f9; border: unset; outline: unset; padding: 8px;}
.register.report2 .section02 .add{height: 50px;}

/* 3 */
.register.report3 .top{margin-bottom: 50px;}
.register.report3 .top .onlinegrab{position: relative; justify-content: center; }
.register.report3 .top a{position: absolute; float: unset; right: 0;}
.register.report3 .top h3{padding: unset;  font-size: 40px; color: #283f75;}
.register.report3 section .right input{width: 100%;}

.register.report3 .section01 .tab.onlinegrab{padding: unset;}
.register.report3 .section01 .tab ul li{width: 50%; justify-content: center; align-items: center; height: 65px; padding: unset; color: #fff; background-color: #ababab; font-size: 17px; font-weight: bold; cursor: pointer;}
.register.report3 .section01 .tab ul li.current{background-color: #fff; border-top: 5px solid #283f75; color: #283f75;}
.register.report3 .section01 .tap-contents .tap-content{display: none;}
.register.report3 .section01 .tap-contents .tap-content.current{display: block;}
.register.report3 .section01 .teacher-img {height: 88px; width: 100%; margin: 10px 0 30px;}
.register.report3 .section01 .teacher-img label{ color: #505050;}
.register.report3 .section01 .link{margin: 10px 0 30px;}

.register.report3 .section02 .right .teacher-img{width: 400px; height: 267px;}
.register.report3 .section02 .right .teacher-img .addition-btn{width: 165px; height: 160px;}
.register.report3 .section02 .right {display: flex;}
.register.report3 .section02 .right > div:nth-child(2){width: calc(100% - 400px); padding: 20px;}

.register.report3 .section02 .right p input{display: none;}
.register.report3 .section02 .right p {font-size: 15px; color: #aeaeae; margin-bottom: 20px;}
.register.report3 .section02 .right p span {font-size: 15px;color: #aeaeae; font-weight: bold;}
.register.report3 .section02 .right p label{font-size: 15px; color: #002da8; font-weight: bold; text-decoration: underline; cursor: pointer;}

.register.report3 .section02 .right .btn-group .btn-blue{width: 120px; height: 40px; padding: 0; font-size: 15px; margin-right: 12px; cursor: pointer;}
.register.report3 .section02 .right .btn-group a.btn-blue{background-color: #8b8b8b;}

.register.report3 .section03 .left p{padding-left: 20px;}
.register.report3 .section03 .right .teacher-img{width: 100%; height: 263px;}

.register.report3 .bottom{justify-content: center; gap: 10px; margin-bottom: 100px;}
.register.report3 .bottom a{width: 120px; height: 50px; font-size: 15px; color: #fff;}
.register.report3 .bottom a.btn-blue{background-color: #283f75;}

/* 4 */
.register.report4 nav{margin-bottom: 145px;}

.register.report4 .section01 .onlinegrab{width:836px; height: 362px;}
.register.report4 .section01 .col-group{flex-direction: column;}
.register.report4 .section01 img{width: 40px; height: 40px; margin-bottom: 20px;}

.register.report4 .section01 strong{color: #283f75; font-size: 25px; margin-bottom: 20px;}

.register.report4 .section01 p{font-size: 15px; text-align: center; color: #b1b1b1; margin-bottom: 50px;}
.register.report4 .section01 p span{color: #b1b1b1; font-weight: bold;}

.register.report4 .section01 .btn-group{display: flex; gap: 10px;}
.register.report4 .section01 .btn-group a{width: 120px; font-size: 15px; padding: 0; height: 50px; color: #fff;}
.register.report4 .section01 .btn-group a.btn-blue{background-color: #283f75;}

.register.report4 nav{background: #283f75;}

/* 수강자 마이페이지*/
.student { width: calc( 100% - 180px ); }
.student .tit-wrap .tit { padding: 0; }
.student .leftSide a{line-height: 1.5;}
.student .leftSide strong{line-height: 1.5;}
/* .student .right{float: unset;}
.student section > .col-group{align-items: unset;}
.student section .left {width: 180px; margin-right: 22px;}
.student section .left h4{width: 100%; height: 66px; background-color: #f39730; color: #fff; justify-content: center; font-size: 20px;}
.student section .left h4.free {background-color: #057baf;}
.student section .left .menu{width: 100%; padding: 20px 10px; background-color: #fff; border-bottom: 1px solid rgba(204, 214, 226, 0.3);}
.student section .left .menu h5{color: #222; font-size: 15px; margin-bottom: 20px;}
.student section .left .menu ul{display: flex; width: 100%; flex-wrap: wrap;}
.student section .left .menu ul li{width: 50%; margin-bottom: 8px; position: relative;}
.student section .left .menu ul li a{font-size: 13px; font-weight: 500; color: #4e4e4e;}
.student section .left .menu ul li:nth-child(2n)::after{content: ''; position: absolute; background-color: #c2c2c2; width: 2px; height: 100%; left: -10px; top: 50%; transform: translateY(-50%);}
.student section .left .menu.my ul{flex-direction: column;}
.student section .left .menu.my ul li:nth-child(2n)::after{display: none;}
.student section .left .freelancer-btn{width: 100%; height: 57px; margin-top: 20px; background-color: #057baf; color: #fff; font-size: 17px; font-weight: bold; justify-content: center;}
.student section .left .freelancer-btn.my-btn{background-color: #f39730;} */
.student .grab > .onlinegrab{width: 100%; align-items: unset; justify-content: space-between;}
.student .con-wrap{ text-align: unset; margin-bottom: 100px;}
.student .con-wrap h4{margin: 22px 0 15px; font-size: 17px; color: #283f75; letter-spacing: -0.85px;}
.student .con-wrap ul{padding: 60px; background-color: #fff; border-top: solid 3px #283f75; flex-wrap: wrap; gap: 24px;}
.student .con-wrap ul li{width: calc((100% - (24px * 2)) / 3);	position: relative; margin-bottom: calc(50px - 24px);}
.student .con-wrap ul li img {margin-bottom: 12px;}
.student .con-wrap ul li strong {margin-bottom: 6px;}
.student .con-wrap ul li .bookmark{position: absolute; background-image: url(../../images/online/star.png); width: 20px; height: 20px; top: 7px; right: 7px; cursor: pointer;}
.student .con-wrap ul li .bookmark.current{background-image: url(../../images/online/star_yellow.png);}

/* 프리랜서 마이페이지 */

.student.freelancer .left .menu ul li a{font-size: 11px; letter-spacing: -0.55px;}

/* 학습화면 */
.study {background-color: #fff;}
.study section{margin: unset;}
.study section > .col-group{align-items: unset; width: 100%;}
.study .mb{display: none;}
.study .left {height: 100vh; width: 370px;}
.study .left .big_subject{width: 100%; height: 228px; background-color: #283f75; display: flex; align-items: flex-end; padding: 0 34px;}
.study .left .big_subject h3{padding: 0; color: #fff; font-size: 25px; letter-spacing: -1.25px; margin-bottom: 39px; line-height: 1.5;}
.study .left ul {height: calc(100% - 228px); overflow: auto; background-color: #f8f8f8;}
.study .left ul li{border-bottom: dashed 1px #d9d9d9; width: 100%; height: 60px; display: flex; align-items: center;padding-left: 20px;}
.study .left ul li {font-size: 17px; width: 100%;}
.study .left ul li span{color: #333; margin-right: 10px; font-weight: bold;}
.study .left ul li a{color: #333; display: inline-block; letter-spacing: -0.85px; width: 280px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.study .left ul li.past span , .study .left ul li.past a{opacity: 0.5;}

.study .aright{width: calc(100% - 370px);}
.study .aright .onlinegrab {max-width: 1277px;}
.study .aright .btn-group{display: flex; justify-content: flex-end; margin:45px 0 20px}
.study .aright .btn-group .btn-black{ width: 137px; color: #fff;}

.study .aright .title {background-color: #f5f5f5; margin-bottom: 50px;}
.study .aright .title span {width: 70px; background-color: #283f75;color: #fff; line-height: 70px; text-align: center; font-weight: bold; font-size: 30px;}
.study .aright .title h3{color: #333; font-size: 30px; padding: 0; padding-left: 20px; font-weight: unset;}
.study .aright .video {width: 100%; height: 674px; background-image:url(../../images/online/oneimg.png); background-repeat: no-repeat; background-size: 100% 100%; position: relative;}
.study .aright .video .player{position: absolute; left: 0; top: 0; overflow: hidden; }


.study .aright .video .player .video-top{justify-content: space-between; height: 58px; padding: 20px 10px 10px 20px; transform: translateY(-100%); transition: all 1s; opacity: 0; background: linear-gradient( to bottom, rgba(40, 40, 40, 0.2), transparent);}
.study .aright .video .player .video-top img{width: 30px; height: 100%; margin-right: 10px; cursor: pointer;}
.study .aright .video:hover .player .video-top{transform: translateY(0); opacity: 1;}
.study .aright .video .player .video-top h5{font-size: 20px; color: #ddd; cursor: pointer; margin-left: 10px;}
.study .aright .video .player .video-top h5:hover{text-decoration: underline; color: #fff;}

.study .aright .video .player .video-center{justify-content: space-around;}
.study .aright .video .player .video-center i{animation: xi-spin 2s infinite linear; font-size: 80px; color: #fff;}
.study .aright .video .player .video-bottom{position: relative; transform: translateY(100%); transition: all 1s; height: 58px; display: flex; padding: 10px 10px 20px; justify-content: space-between; background: linear-gradient( to top, rgba(40, 40, 40, 0.2), transparent);}
.study .aright .video:hover .player .video-bottom{transform: translateY(0);}

.study .aright .video .player .video-bottom .bar{position: absolute;left: 0; bottom: 110%; height: 5px; width: 98%; background-color: turquoise; margin: 0 1%; cursor: pointer;}
.study .aright .video .player .video-bottom .bar::after{content: ''; position: absolute; left: 0; top: 50%; transform: translate(-50% , -50%); width: 20px; height: 20px; border-radius: 100%; background-color: #fff;}

.study .aright .video .player .video-bottom .you-left{display: flex;}
.study .aright .video .player .video-bottom .you-right{display: flex;}
.study .aright .video .player .video-bottom span{color: #ddd; margin-left: 20px;}
.study .aright .video .player .video-bottom p{color: #ddd; margin-left: 10px;}

.study .aright .video .player {opacity: 0; transition: all 1s; display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: space-between;}
.study .aright .video:hover .player{opacity: 1; background-color: rgba(0, 0, 0, 0.3);}

.study .aright .video .player .video-center img{height: 120px; width: 120px; cursor: pointer;}
.study .aright .video .player .video-bottom img{height: 100%; width: 30px; margin: 0 10px; cursor: pointer;}
.study .mbtn-group .btn-black{width: 150px; margin: 0 auto; margin-top: 50px;}

@media ( max-width: 768px ) {
	.study .mb{display: block; padding-bottom: 40px;}
	.study .left{display: none;}
	.study .aright{width: 100%;}
	.study .aright .title{margin: 30px 0; height: 40px;}
	.study .aright .title h3{font-size: 17px;}
	.study .aright .title span{height: 40px; font-size: 17px; line-height: 40px;}
	.study .aright .btn-group{display: none;}
	.study .aright .video{margin-bottom: 50px;}
	.study .aright .btn-group{justify-content: unset;}
	.study .mb-left .big_subject h3{background-color: #283f75; color: #fff; padding-left: 20px; height: 47px; padding: 0; line-height: 47px; padding-left: 20px;}

	.study .mb-left ul{ background-color: #f8f8f8;}
	.study .mb-left ul li {padding: 15px 0; border-bottom: solid 1px #d9d9d9; display: flex;}
	.study .mb-left ul li span{padding: 0 20px;}
	.study .mb-left ul li a{color: #333; display: inline-block; letter-spacing: -0.85px; width: calc(100% - 58px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
	.study .mb-left ul li.past a{color: #d4d4d4;}

	.student { width: 100%; }
	.student .con-wrap { margin-bottom: 0; }
	.student .con-wrap ul { padding: 0; background: none; border: 0; gap: 10px; }
	.student .con-wrap ul li { width: calc( ( 100% - 10px ) / 2 ); margin-bottom: 0; }
}