@charset "utf-8";  

:root {
	--bookImgSize: 1/1;  /* CSS 전역 변수 선언 */
	--courseImgSize: 257/191;  /* CSS 전역 변수 선언 */
	
	
	/*   없으면
	 aspect-ratio: var(--bookImgSize, 1/1);  
	 aspect-ratio: var(--courseImgSize);  
  */
}

div {
	color: var(--main-font-color);   /* CSS 변수 사용 */
}


.item_label{display:flex;gap:4px;}
.item_label .label{display:block;line-height: 20px;height: 22px;box-sizing:border-box;font-size:14px;font-weight:600;border-radius:4px;background-color:#fff;padding:0 5px 0 4px;border:1px solid #256EF4;color:#fff;}
.item_label .label.label_0{color:#7A13F8;border-color:#7A13F8;}


.item_status{display:flex;gap:4px;}
.item_status .label{display:block;line-height: 18px;height: 20px;box-sizing:border-box;font-size:14px;font-weight:500;border-radius:4px;background-color:#256EF4;padding:0 5px 0 4px;border:1px solid #256EF4;color:#fff;}
.item_status .label.status_0{border-color:#256EF4;background-color:#256EF4;}
.item_status .label.status_1{border-color:#223A58;background-color:#223A58;}


.board.btn{display:flex;gap:8px;justify-content: center;}
#mypage_wrap{background-color:#EEF2F7;min-height:100vh;}
#mypage_wrap header{padding:16px 24px;}
.mypage_container{display:flex;}
.mypage_container .left_area{width:272px;}
.mypage_container .mypage_lnb{width:272px;background-color:#223A58;padding:24px 19px;border-radius:0 8px 0 0;box-sizing:Border-box;min-height: calc(100vh - 75px);height: calc(100% - 75px);}
.mypage_container .content_area{width: calc(100% - 272px);padding:0 32px 32px 32px;box-sizing:Border-box;}
.mypage_container .mypage_lnb .u_info{display:flex;align-items: center;justify-content: space-between;}
.mypage_container .mypage_lnb .u_info p{font-size:16px;color:#fff;}
.mypage_container .mypage_lnb .u_info p strong{font-weight:600;}
.mypage_container .mypage_lnb .btn_classroom{display:flex;align-items: center;justify-content: center;gap:4px;width:136px;height:44px;background-color: rgba(97, 117, 143, 0.5);border-radius:8px;color:#fff;font-size:16px;font-weight:600;}
.mypage_container .mypage_lnb .btn_classroom:after{content:'';display:block;width:24px;height:24px;background: url(/html/images/mypage/btn_classroom.png) no-repeat 50% 50% / 100% auto;}
.mypage_container .mypage_lnb .lnb_area{margin-top:24px;}
.mypage_container .mypage_lnb .lnb_area li{padding:12px 8px;}
.mypage_container .mypage_lnb .lnb_area li + li{margin-top:8px;}
.mypage_container .mypage_lnb .lnb_area li > a{display:block;position:relative;font-weight:600;font-size:18px;line-height:27px;color:#fff;padding-left:36px;}
.mypage_container .mypage_lnb .lnb_area li > a:before{content:'';position:absolute;left:0;top:2px;display:block;width:24px;height:24px;background: url(/html/images/mypage/ico_mypage01.png) no-repeat 50% 50% / 100% auto;}
.mypage_container .mypage_lnb .lnb_area li > a.ico02:before{background: url(/html/images/mypage/ico_mypage02.png) no-repeat 50% 50% / 100% auto;}
.mypage_container .mypage_lnb .lnb_area li > a.ico03:before{background: url(/html/images/mypage/ico_mypage03.png) no-repeat 50% 50% / 100% auto;}
.mypage_container .mypage_lnb .lnb_area li > a.ico04:before{background: url(/html/images/mypage/ico_mypage04.png) no-repeat 50% 50% / 100% auto;}
.mypage_container .mypage_lnb .lnb_area li > a.ico05:before{background: url(/html/images/mypage/ico_mypage05.png) no-repeat 50% 50% / 100% auto;}
.mypage_container .mypage_lnb .lnb_area li > a.ico06:before{background: url(/html/images/mypage/ico_mypage06.png) no-repeat 50% 50% / 100% auto;}
.mypage_container .sys_area{padding:8px;margin-top:32px;}
.mypage_container .mypage_logout{position:relative;padding-left:24px;font-size:14px;font-weight:400;color:#fff;}
.mypage_container .mypage_logout:before{content:'';position:absolute;left:0;top:0;display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_logout.png) no-repeat 50% 50% / 100% auto;}

.con_top .breadcrumb{padding:16px 0}
.con_top .breadcrumb {}
.con_top .breadcrumb .breadcrumb_list{display:flex;padding:6px 20px;height:40px;border-radius:20px;background-color:#D6E0EB;align-items: center;width:fit-content;}
.con_top .breadcrumb .breadcrumb_list > li{position:Relative;font-size:15px;color:#223A58;padding:0 0 0 20px;font-weight:600;}
.con_top .breadcrumb .breadcrumb_list > li + li:before{content:'';position:absolute;left:4px;top:4px;display:block;width:12px;height:12px;background: url(/html/images/mypage/ico_breadcrumb_arr.png) no-repeat 50% 50% / 100% auto;}
.con_top .breadcrumb .breadcrumb_list > li:first-child{}
.con_top .breadcrumb .breadcrumb_list > li:first-child:before{content:'';position:absolute;left:0;top:2px;display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_breadcrumb_home.png) no-repeat 50% 50% / 100% auto;}
.mypage_content .content_title{padding-top:32px;font-weight:700;color:#131416;font-size:24px;}

.mypage_info{display:flex;gap:24px;margin-top:8px;}
.mypage_info .info_con{position:relative;background-color:#D6E0EB;border-radius:8px;width: calc((100% - 72px) / 3);height:108px;padding:24px 32px;}
.mypage_info .info_con p{font-weight:600;font-size:16px;color:#131416;}
.mypage_info .info_con span{font-weight:500;font-size:20px;color:#131416;display:flex;gap:4px;align-items: baseline;margin-top:8px;}
.mypage_info .info_con span strong{font-weight:700;font-size:40px;color:#131416;line-height:28px;}
.mypage_info .info_con.info_con01:after{content:'';position:absolute;right:32px;top:26px;display:block;width:56px;height:56px;background: url(/html/images/mypage/ico_info_con01.png) no-repeat 50% 50% / 100% auto;}
.mypage_info .info_con.info_con02:after{content:'';position:absolute;right:32px;top:26px;display:block;width:56px;height:56px;background: url(/html/images/mypage/ico_info_con02.png) no-repeat 50% 50% / 100% auto;}
.mypage_info .info_con.info_con03:after{content:'';position:absolute;right:32px;top:26px;display:block;width:56px;height:56px;background: url(/html/images/mypage/ico_info_con03.png) no-repeat 50% 50% / 100% auto;}
.mypage_info .info_con.info_con04:after{content:'';position:absolute;right:32px;top:26px;display:block;width:56px;height:56px;background: url(/html/images/mypage/ico_info_con04.png) no-repeat 50% 50% / 100% auto;}
.module_box{}
.module_box + .module_box{margin-top:32px;}
.module_half{width: calc(50% - 12px);}
.flex_box{display:flex;justify-content:space-between;gap:24px;}
.module_box .module_title{font-weight:700;font-size:24px;color:#131416;}
.module_board{padding:8px 16px;background-color:#fff;border-radius:10px;margin-top:8px;height:209px;}
.module_board .list_top{}
.module_board .list_top li{padding:12px 0;}
.module_board .list_top li a{font-weight:600;font-size:16px;color:#131416;}
.module_board .list_top li + li{margin:0;border-top:1px solid #D9D9D9;}
.module_board .nodata{display: flex;align-items: center;justify-content: center;height: 100%;font-size:16px;}
.module_box .module_header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px;}
.module_box .module_course{display:flex;flex-wrap: wrap;gap:32px 24px;padding:24px 16px;background-color:#fff;border-radius:10px;margin-top:8px;}
.module_box .module_course .item{width: calc(50% - 28px);}
.module_box .module_course .item	.item_con{display:flex;gap:16px;}
.module_box .module_course .item .item_img{width:194px;}
.module_box .module_course .item .item_img img{width:100%;aspect-ratio:194/144;}
.module_box .module_course .item .item_tt{display:flex;flex-direction:column;justify-content:space-between;width:320px;}
.tt_top .item_label{display:flex;gap:4px;}
.module_box .module_course .item .item_tt .subject{display:-webkit-box;font-weight:600;font-size:18px;color:#131416;overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;height:54px;margin-top:4px;}
.module_box .module_course .item .item_tt .tt_bot p{font-size:14px;color:#33363D;}
.module_box .module_course .item .item_btn{display: flex;align-items: center;}
.module_box .module_course .item .item_btn .btn_class_in{display:flex;align-items: center;justify-content: center;gap:4px;border:1px solid #86AFF9;color:#86AFF9;border-radius:4px;width:124px;height:44px;box-sizing:border-box;padding:0;width:600;font-size:16px;color:#256EF4;background-color:#fff;}
.module_box .module_course .item .item_btn .btn_class_in:after{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_classin.png) no-repeat 50% 50% / 100% auto;}
.module_box .module_course .item .item_info{background-color:#F3F4F5;border-radius:6px;margin-top:16px;padding:4px 16px;display:flex;gap:24px;line-height:20px;}
.module_box .module_course .item .item_info .ii_progress{display:flex;align-items: center;gap:4px;font-weight:500;font-size:15px;color:#33363D;}
.module_box .module_course .item .item_info .ii_progress:before{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_cinfo_progress.png) no-repeat 50% 50% / 100% auto;}
.module_box .module_course .item .item_info .ii_score{display:flex;align-items: center;gap:4px;font-weight:500;font-size:15px;color:#33363D;}
.module_box .module_course .item .item_info .ii_score:before{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_cinfo_score.png) no-repeat 50% 50% / 100% auto;}
.module_box .module_course .item .item_info .ii_status{display:flex;align-items: center;gap:4px;font-weight:500;font-size:15px;color:#33363D;}
.module_box .module_course .item .item_info .ii_status:before{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_cinfo_status.png) no-repeat 50% 50% / 100% auto;}
.module_box .module_course .item .item_info .ii_status .label{height:20px;line-height:20px;padding:0 4px;font-weight:500;}
.module_box .module_course .nodata{width: 100%;height:191px;display:flex;align-items:center;justify-content:center;}
.module_box .module_course .nodata span{font-size:16px;color:#33363D;}
.mypage_lnb .cs_box{margin:48px 6px 6px 6px;background-color:rgba(97, 117, 143, 0.3);border-radius:6px;padding:16px;}
.mypage_lnb .cs_box .cs_tt{font-weight:700;font-size:18px;color:#fff;display: flex;align-items: center;gap:8px;}
.mypage_lnb .cs_box .cs_tt:before{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_cs.png) no-repeat 50% 50% / 100% auto;}
.mypage_lnb .cs_box .cs_tel{font-size:20px;font-weight:700;color:#B1CEFB;margin-top:8px;}
.mypage_lnb .cs_box .cs_tx{font-size:14px;font-weight:400;color:#E6E8EA;}
.mypage_lnb .cs_box .cs_info{margin-top:12px;font-size:15px;font-weight:500;line-height:1.4;color:#fff;padding:8px 12px;border-radius:4px;background-color:rgba(97, 117, 143, 0.7);}

.mypage_content{}
.mypage_content .tab_top{}
.mypage_content .course_tab{display:block;width:auto;height:auto;margin:0;float:none;}
.mypage_content .tab_tt{display:flex;gap:8px;}
.mypage_content .tab_tt li{width:auto;}
.mypage_content .tab_tt li a{position:relative;top: unset;width: 100%;height:auto;padding:8px 16px;font-weight:500;font-size:16px;line-height:1.5;background-color:#fff;border:1px solid #CDD1D5;border-radius:20px;}
.mypage_content .tab_tt li.on a{background-color:#33363D;}
.mypage_content .type_list{border:1px solid #D6E0EB;background-color:#fff;border-radius:10px;overflow:hidden;}
.mypage_content .type_list thead th{background-color:#fff;font-weight:600;font-size:16px;color:#58616A;}
.mypage_content .type_list tbody tr:nth-child(odd) td{background-color:#ECF2FE;}
.mypage_content .item_wrap{display:flex;flex-wrap: wrap;gap:32px 24px;padding:24px 16px;background-color:#fff;border-radius:10px;margin-top:8px;}
.mypage_content .item_wrap .item{width: calc(50% - 28px);}
.mypage_content .item_wrap .item	.item_con{display:flex;gap:16px;}
.mypage_content .item_wrap .item .item_img{width:194px;}
.mypage_content .item_wrap .item .item_img img{width:100%;aspect-ratio:194/144;}
.mypage_content .item_wrap .item .item_tt{display:flex;flex-direction:column;justify-content:space-between;width:320px;}
.mypage_content .item_wrap .item .item_tt .item_label{display:flex;gap:4px;}
.mypage_content .item_wrap .item .item_tt .subject{display:-webkit-box;font-weight:600;font-size:18px;color:#131416;overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;max-height:54px;margin-top:4px;}
.mypage_content .item_wrap .item .item_tt .tt_bot p{font-size:14px;color:#33363D;}
.mypage_content .item_wrap .item .item_btn{display: flex;align-items: center;}
.mypage_content .item_wrap .item .item_btn .btn_class_in{display:flex;align-items: center;justify-content: center;gap:4px;border:1px solid #86AFF9;color:#86AFF9;border-radius:4px;width:124px;height:44px;box-sizing:border-box;padding:0;width:600;font-size:16px;color:#256EF4;background-color:#fff;}
.mypage_content .item_wrap .item .item_btn .btn_class_in:after{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_classin.png) no-repeat 50% 50% / 100% auto;}

.mypage_content .item_wrap .item .certi_btn{display:flex;align-items:center;flex-direction: column;justify-content: center;gap:8px;}
.mypage_content .item_wrap .item .certi_btn .btn{background-color:#fff;border-radius:4px;width:116px;height:40px;box-sizing:border-box;padding:0;font-weight:500;font-size:16px;}
.mypage_content .item_wrap .item .certi_btn .btn_blue{color:#256EF4;border:1px solid #4C87F6;}
.mypage_content .item_wrap .item .certi_btn .btn_black{color:#223A58;border:1px solid #98ACC5;}
.mypage_content .item_wrap .item .certi_btn .btn_certi{color:#fff;border:1px solid #223A58;background-color:#223A58;}
.mypage_content .item_wrap .item .item_info{background-color:#F3F4F5;border-radius:6px;margin-top:16px;padding:4px 16px;display:flex;gap:24px;}
.mypage_content .item_wrap .item .item_info .ii_progress{display:flex;align-items: center;gap:4px;font-weight:500;font-size:15px;color:#33363D;}
.mypage_content .item_wrap .item .item_info .ii_progress:before{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_cinfo_progress.png) no-repeat 50% 50% / 100% auto;}
.mypage_content .item_wrap .item .item_info .ii_score{display:flex;align-items: center;gap:4px;font-weight:500;font-size:15px;color:#33363D;}
.mypage_content .item_wrap .item .item_info .ii_score:before{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_cinfo_score.png) no-repeat 50% 50% / 100% auto;}
.mypage_content .item_wrap .item .item_info .ii_status{display:flex;align-items: center;gap:4px;font-weight:500;font-size:15px;color:#33363D;}
.mypage_content .item_wrap .item .item_info .ii_status:before{content:'';display:block;width:16px;height:16px;background: url(/html/images/mypage/ico_cinfo_status.png) no-repeat 50% 50% / 100% auto;}

		
.pw_box{width:100%;background-color:#fff;border-radius:10px;padding:160px 0;}
.pw_box .pw_check{position:relative;padding-top:54px;}
.pw_box .pw_check:before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);display:block;width:65px;height:37px;background: url(/html/images/new/pw_img.png) no-repeat 0 0 / 100% auto;}
.pw_box .pw_check .pw_tt{font-weight:600;font-size:20px;color:#131416;}
.pw_box .pw_check .pw_tx{font-weight:600;font-size:14px;color:#131416;margin-top:4px;}
.pw_box .box_login{margin:24px auto 0;width: min(416px , 100%);display:flex;align-items: center;gap:8px;}
.pw_box .box_login .t_box{width:calc(100% - 96px);height:48px;line-height:46px;;box-sizing:border-box;border:1px solid #CDD1D5;background-color:#fff;font-size:14px;border-radius:4px;padding:0 16px;}
.pw_box .box_login .btn_confirm{width:88px;height:48px;line-height:46px;box-sizing:border-box;border:1px solid #223A58;background-color:#223A58;color:#fff;font-weight:500;font-size:16px;border-radius:4px;}
	
.mypage_inbox{background-color:#fff;padding:16px;border-radius:16px;box-sizing:border-box;}