@charset "utf-8";
/* CSS Document */
html,body{ font-size: 15px; word-break: keep-all; color: #313131} 
@media only screen and (max-width: 1023px){	
	html,body{ font-size: 14px;}
}
@media only screen and (max-width:767px){	
	html,body{ font-size: 13px; letter-spacing: 0}
}
/* 휴면계정 */
.sleeping_bx{ height: calc(100vh - 350px); position: relative;max-width: 1260px;margin: 0 auto;padding: 0px 0; text-align: center; min-height: 300px} 
.sleeping_bx .container{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; font-size: 1rem} 

.sleeping_bx h2.tit{ text-align: center; z-index: 2; position: relative} 
.sleeping_bx p{ word-break: keep-all} 
.sleeping_bx p + p{ margin-top: 20px} 
.sleeping_bx h2.tit:before{ content: "";  display: block; background: url("../img/web-security.svg") no-repeat 0 0; width: 110px; height: 110px; background-size: 100%; margin: 0 auto 30px auto; z-index: 3; display: none} 
.sleeping_bx .container:before{content: "";  display: block; position: absolute; left: 50%; top: 0; width: 140px; height: 140px; border-radius: 100%; background: rgba(216,223,248,0.5); z-index: 1; margin:10px 0 0 -40px; display: none}


/* 약관동의 */
.agree_bx{ margin: 0 auto; width: 520px}

.page_header{ padding-bottom: 30px; border-bottom: 2px solid #222; text-align: center;padding-top: 0px; width: 100%; max-width: 1260px;    margin: 0 auto;} 
.page_header h2{ text-align: center} 
.page_header p{font-size: 1.0666rem; color: #666}
.agree_bx .page_header h2{ padding-bottom: 10px}

.agree_box{ padding: 30px 30px; border-bottom: 1px solid #ddd;width: 100%; max-width: 1260px;    margin: 0 auto;} 
.agree_box li{ margin-top: 15px; font-size: 1rem; color: #666; line-height:34px} 
.agree_box li .fr a:after{font-family: 'remixicon';speak: none;font-style: normal;font-weight: normal;font-variant: normal; text-transform: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; content: "\EA6E"; padding-left: 5px; vertical-align: middle; font-size: 1.0666rem} 
.agree_box li strong{ font-weight: 400} 

.agree_bx .container{ padding-bottom: 0} 


/* 회원 탈퇴 */
.drop_bx .container{ padding-bottom: 0} 
.drop_bx .page_header{ padding: 30px 0 0 0; text-align: left; border: none } 
.drop_bx .page_header h2{ text-align: left} 
.drop_bx .info_box{background: #f3f4f9; box-shadow: none; font-size: 1rem;  padding:30px 80px; } 
.drop_bx .info_box h3{ font-size:1.466rem;margin-bottom: 15px;padding-bottom: 0;border-bottom: 0;width: 100%; max-width: 1260px;    margin: 0 auto; }
.drop_bx .info_box ul{width: 100%; max-width: 1260px; margin: 0 auto;  }
.drop_bx .info_box li{ margin-top:10px; padding-left:40px; position: relative; line-height: 24px;} 
.drop_bx .info_box li:first-of-type{ margin-top: 20px} 
.drop_bx .info_box li em{ position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: #222; border-radius: 100%; color: #fff; text-align: center; font-style: normal; line-height:24px} 
.drop_bx .agree_box{ padding: 30px 0 30px 0} 
.drop_bx .agree_box:first-of-type{ padding-top: 0} 
.drop_bx .agree_box li{ margin-top: 0px} 
.drop_bx .agree_box em{ font-style: normal} 
.drop_bx .agree_box input[type="password"]{ margin-left:26px; margin-top: 5px; max-width: calc(100% - 30px) } 
@media only screen and (max-width: 1290px){	
	.drop_bx .page_header,.container{ padding-left: 20px; padding-right: 20px} 
}
@media only screen and (max-width:1023px){
	.sleeping_bx{ height: auto; margin-top: 0px}
	.sleeping_bx .container{ position: relative; left: auto; top: auto; transform: none; padding-bottom: 0; padding-top: 40px }
	
}
@media only screen and (max-width:768px){
	.agree_bx .container{ padding-top: 40px; padding-left: 0; padding-right: 0} 
	.content-wrapper .container > div.btn_bottom{ margin-top: 30px} 
}
@media only screen and (max-width:767px){
	.sleeping_bx .container, .drop_bx .page_header, .agree_bx .container{ padding-top: 30px} 
}

@media only screen and (max-width:600px){
	.agree_bx{ max-width: 90%} 	
	.page_header{ padding-bottom: 30px; padding-top: 0} 
	.agree_box{ padding-left: 0; padding-right: 0} 
	.drop_bx .info_box{ padding-left: 20px; padding-right: 20px} 
	.drop_bx .info_box li{ line-height: 1.6} 
	.drop_bx .info_box li em{ width: 25px; height: 25px; line-height: 25px} 
	.sleeping_bx .container{ width: 90%} 
	.sleeping_bx .btn_bottom .buttons { width: auto	} 
}

/* 마이페이지 */
.bi-wrp.bi-default-theme .bi-mlst-innerLine, .bi-wrp.bi-default-theme.bi-horizontal .bi-mlst-label, .bi-wrp.bi-default-theme.bi-horizontal .bi-milestone{ display: none !important} 
.bi-wrp.bi-default-theme .bi-bar{ border-radius: 10px !important} 
.mypage_bx{width: 100%;margin: 0 auto;padding: 40px 0;position: relative;max-width: 1260px; } 
.mypage_bx h2{display: block; width: 100%; font-size: 2rem;line-height: 35px;color: #000;letter-spacing: -1px;padding: 0px 0 0px;text-align: left;
font-weight: 700; margin-bottom: 20px} 
.mypage_bx h3{font-size: 1.466rem;line-height: 35px;font-weight: 700;color: #2D2F39;letter-spacing: -0.5px;margin-bottom: 10px;} 

.marking_d .chart{ display: flex; align-items: center; flex-direction: row-reverse; width: 160px !important; margin: 0 auto !important} 
.marking_d .bar{ display: block; } 
.marking_d.micro_degree_chart .bar{ display: inline-block; }
.bi-hor-topLeft .bi-label, .bi-hor-left .bi-label{ float: none !important; font-size: 13px; padding-bottom: 0 !important; padding-left: 5px !important; width: 50px !important; text-align: right; color: #666} 
.bi-horizontal .bi-bar{ float: none !important; width: 100px !important} 
table tbody td a:hover{ text-decoration: underline !important} 
.table_list{border-bottom: 1px solid #d2d6e1;}
.table_list .state{ line-height: 34px} 
.table_list .state button{padding: 10px 10px;border-radius: 5px;background-color: #fff;color: #6a737b !important;border: 1px solid #6a737b !important;height: 34px;margin-left: 5px;font-size: 13px;line-height: 1;}

.mypage_bx .container{ padding: 0; } 
.mypage_bx .container +  .container{ margin-top: 30px} 
.mypage_bx header{ margin-bottom: 20px} 
.mypage_bx header h3{ margin-bottom: 0} 

.consult_bx{ border: 1px solid #ddd; height: 380px; overflow: hidden} 
.consult_bx > div{ float: left} 
.consult_bx > div.lec_box{ float: right } 
.mypage_bx .chart_box{ width:calc(100% - 390px); height:380px; padding: 30px 60px; border-right: 1px solid #ddd} 
.mypage_bx .chart_box .chart2{ width: 100%; height: 100%; margin: 0 auto} 


/* 강좌카드 */
.your_b.swiper-container{padding: 0px 0px 20px 0px;    width: 300px;margin: 0 auto;} 
.your_b .wrapper-header-courses{padding: 0;    flex: none;width: 100%;max-width: 1260px;margin: 0 auto;padding: 0px 0 20px 0;position: relative;} 
.your_b.swiper-container .swiper-button{ position: absolute; right:0px;  top: 0px; z-index: 2; font-size: 0 } 
.your_b .swiper-button .swiper-button-next, .your_b .swiper-button .swiper-button-prev{ position: relative; left:auto; top: auto; background: none; right: auto; margin: 0; display: inline-block; line-height: 44px; text-align: right; border: 1px solid rgba(106,115,123,0.43); width: 35px; height: 35px; text-align: center; line-height: 35px; border-radius: 0 18px 18px 0; background:#fff; color: #000; border-left-width: 0; vertical-align: top} 
.your_b .swiper-button .swiper-button-prev{ margin-right: -1px; border-radius: 18px 0 0 18px;border-left-width: 1px} 
.your_b .swiper-button .swiper-button-next:after{ content: ""; width: 1px; height: 15px; background:rgba(106,115,123,0.3); position: absolute; left: 0; top: 8px } 
.thumlist{display: flex; flex-wrap: nowrap; } 
.thumlist li .img{  overflow: hidden; margin-bottom: 20px;} 
.thumlist li .img img{ max-width: 100%;width: 100%; position: absolute; left: 0; top: 0;  height: 100%; } 
ul.thumlist li{  display: block; padding: 0 !important; border: none; flex-basis: auto ; width: 30% ;    flex-wrap: wrap;  overflow: hidden; }
.pc ul.thumlist li{ width: 30% }

ul.thumlist li:nth-of-type(4n+1){}
ul.thumlist li div.box{margin: 0 0px ;padding: 0 15px 20px; display: flex; flex-wrap: wrap; overflow: hidden; position: relative; background: #fff;} 
ul.thumlist li .img{margin: 0 -15px 10px;  overflow: hidden; background:#fff; border: 1px solid #ddd;width: calc(100% + 30px);
    padding-top: calc(100% / 60 * 40) !important;    position: relative;}
.thumlist li .tit{ line-height: 1.5; font-size: 1.0666rem; word-break: keep-all; overflow: hidden; font-weight:500; padding-top: 10px;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;word-wrap:break-word; -webkit-line-clamp:3; color: #6a737b; width: 100%} 
ul.thumlist li div.txt{ height:40px; color: #6a737b; font-size: 13px; line-height: 1.3; width: 100%} 
ul.thumlist li div.txt > span + span{ position: relative; padding-left: 15px } 
ul.thumlist li div.txt > span + span:before{ position: absolute; left: 7px; top: 4px; width: 1px; height: 11px; background: #ddd; content: ""; display: block}


.mypage_bx ul.thumlist li{ height: auto} 
.mypage_bx .lec_box{ padding: 30px 40px} 
.mypage_bx .lec_box ul.thumlist li div.box{ border: none; border-radius: 0; margin-bottom: 0} 

.mypage_bx h4{ font-size: 1.1rem; margin-bottom: 20px; line-height: 35px} 
.mypage_bx h4 span{ font-size: 13px; font-weight: 400} 
.mypage_bx .lec_box ul.thumlist li{ border-radius: 0} 
.mypage_bx .lec_box ul.thumlist li .img{ height: auto} 
.mypage_bx .lec_box .thumlist li .tit{ height:5.46rem} 
p.consult_cmt{ background: rgba(0, 105, 217,0.08); padding: 15px 20px; color: rgba(0, 105, 217,1); font-size: 1.1rem; border: 1px solid rgba(0, 105, 217,0.08); position: relative; z-index: 2; margin-bottom: -1px} 
p.consult_cmt strong{ font-weight: normal; font-size: 1rem; display: inline-block; background: rgba(0, 105, 217,1); color: #fff; padding: 0 10px; border-radius: 20px} 
p.consult_cmt strong:before{font-family: 'remixicon';speak: none;font-style: normal;font-weight: normal;font-variant: normal; text-transform: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; content: "\EF44"; padding-right: 5px; vertical-align: middle; } 
.mypage_bx h3 +.nodata{ border:  1px solid #ddd; padding: 30px; text-align: center; font-size: 1rem}

.your_best ul{ justify-content: space-between; margin: 0 } 
.chart_box rect[stroke-opacity], .chart_box rect[fill-opacity]{stroke-width:0 !important;}
.chart_box .tip{ padding:10px; font-size: 0.9rem; min-width: 120px} 
.chart_box .tip *{ font-style: normal} 
.chart_box .tip > strong{ display: block; margin-bottom: 5px; } 

.chart_box .tip {left: 0px !important;}



@media only screen and (max-width: 1290px){	
	.mypage_bx{ padding-left: 20px; padding-right: 20px} 
}


@media only screen and (max-width: 767px){	
	.mypage_bx{ padding: 30px 20px 0 20px}
	.mypage_bx table thead{ display: none	} 	
	.mypage_bx table tbody, .mypage_bx table tr{ display: block} 
	.mypage_bx table tr{ border-bottom: 1px solid #ddd; padding: 10px 0} 
	.mypage_bx table tr td{ border: none; display: inline-block; padding: 0; text-align: left} 
	.mypage_bx table tr td[data-tit="강좌명"]{ display: block; font-size: 14px; font-weight: 500} 
	.marking_d .chart{ justify-content: space-between 	} 
	.bi-hor-topLeft .bi-label, .bi-hor-left .bi-label{ padding-left: 0; font-size: 12px} 
	.marking_d .chart{ width: 140px !important} 
	.mypage_bx table tr td[data-tit="수강기간"]{ display: block; font-size: 11px}
	.mypage_bx table tr td[data-tit="수료여부"]{ float: right} 
	.mypage_bx table tr:after{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
	.mypage_bx table tr td[data-tit="진도율"]{ line-height: 35px} 
	p.consult_cmt{ word-break: break-all; position: relative; padding: 15px 10px; padding-left: 80px} 
	p.consult_cmt strong{ position: absolute; left: 10px; top: 15px} 
	.mypage_bx .chart_box, .consult_bx > div.lec_box{ width: 100%; float: none; border: none; height: auto; padding: 20px 10px} 
	.consult_bx{ height: auto} 
	.mypage_bx .chart_box .chart2{ height: auto} 
	.your_b.swiper-container{ width: auto; padding-bottom: 0} 
	ul.thumlist li div.box{ padding: 0} 
	ul.thumlist li .img{ margin-bottom: 0; margin-left: 0px; margin-right: 0px} 
	.thumlist li .tit{ word-break: break-all; height: auto;  } 
	.mypage_bx h4{ font-size: 15px} 
}



.about_bx{ margin:30px 0 10px} 
.about_bx .container{ padding-top: 0}
.about_bx .edit_img img{ max-width:100%} 
.about_bx .edit_img{ margin-bottom: 30px; border-radius: 30px; overflow: hidden}

.about_bx .edit_txt p + p{ margin-top: 1.6rem}

@media only screen and (max-width: 767px){	
   
}

@media only screen and (max-width: 500px){	 
    .about_bx .edit_img{ margin-left: -20px; border-radius: 0; width: calc(100% + 40px);  position: relative } 
   /* .about_bx .edit_img img{ max-width: none; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}  */
    .about_bx .edit_img img{ }
    .about_bx{ margin-top: 0}    
    
}

.attend_list .marking_d > div{ display: flex; align-items: center; font-size: 17px; }
.attend_list .marking_d > div > span { margin-right: 10px; }
.attend_list .marking_d .bar{ padding: 5px 0; }
.attend_list .marking_d .chart{ width: 350px !important; }
.attend_list .bi-horizontal .bi-bar{ width: 350px !important; }
.attend_list .bi-hor-topLeft .bi-label{ font-size: 17px;}

@media only screen and (max-width:780px){
	.attend_list .marking_d .chart{ width: 250px !important; }
	.attend_list .bi-horizontal .bi-bar{ width: 250px !important; }
}

@media only screen and (max-width:425px){
	.attend_list .marking_d .chart{ width: 200px !important; }
	.attend_list .bi-horizontal .bi-bar{ width: 200px !important; }
}

/** 마이크로디그리 상세 페이지*/
.micro_degree_about .pass_bx .info_box .micro_degree_chart.marking_d .bi-horizontal .bi-bar{ 
	width: 200px !important;
} 
.micro_degree_about .pass_bx .info_box .micro_degree_chart.marking_d .chart{
	width: 260px !important;
}