@charset "utf-8";

/* 강의실 Intro */
.class_intro{position: relative;height: 100vh;}
.class_intro{content: '';position: absolute;position: absolute;top: 0; left: 0; right: 0; bottom: 0;min-height: 100vh;background:url(/images/front/00001/common/main_visual.jpg) no-repeat center center;background-size: cover;}
.class_intro .header_top{display: flex;align-items: center;max-width: 1920px;height: 92px;padding: 0 35px;border-bottom: 1px solid rgba(255, 255, 255, 0.2);}       
.class_intro .header_top .logo_area{display: flex;align-items: center;}
.class_intro .header_top .logo_area h1{display: inline-block;}
.class_intro .header_top .logo_area h1 img{width: auto;height: 48px;object-fit: contain;vertical-align: inherit;}
.class_intro .header_top .logo_area .mylecture{display: inline-block;width: 162px;height: 30px;background: url(/images/front/00001/common/tit_mylecture_w.png) no-repeat;background-size: cover;text-indent: -9999px;overflow: hidden;margin-left: 13px;}
.class_intro .box_area{position: absolute;top: 50%;left:50%;transform: translateX(-50%) translateY(-50%);transition: top .3s, transform .3s;width: 100%;max-width: 1440px;z-index: 99;}
.class_intro .box_in{position: relative;display: flex;justify-content: center;flex-wrap: wrap;gap:20px;width: 100%;}
.class_intro .box_in .box{position: relative;height: 260px;border-radius: 20px;padding: 35px 45px;color: #fff;box-sizing: border-box;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);}
.class_intro .box_in .box > .tit{margin-bottom: 10px;font-size: 26px;font-weight: 600;}
.class_intro .box_in .box > .text{margin-bottom: 15px;display: block;font-size: 18px;font-weight: 200;}
.class_intro .box_in .box a{color: #fff;}
.class_intro .box_in .box .golink{position: relative;display: inline-block;width: 40px;height: 40px;font-size: 0;}
.class_intro .box_in .box .golink::before{content: '';position: absolute;top:50%;left:50%;width: 15px;height: 11px;background:url('/images/front/00001/icon/icon_arrow01.png') no-repeat 0 0;background-size: cover;border-radius: 50%;transform: translate(-50%, -50%)}
.class_intro .box_in .box .golink::after{content: '';position: absolute;top:0;left:0;width: 40px;height: 40px;border: 2px #fff solid;border-radius: 50%;box-sizing: border-box;}
.class_intro .box_in .box:hover .golink::before{width: 15px;height: 11px;background:url('/images/front/00001/icon/icon_arrow02.png') no-repeat 0 0;background-size: cover;z-index: 99;}
.class_intro .box_in .box:hover .golink::after{background: #fff;}

.class_intro .box_in .box.info{width: 685px;backdrop-filter: blur(0);-webkit-backdrop-filter: blur(0);padding: 20px 0 0 20px;}
.class_intro .box_in .box.info .tit_area{position: relative;padding-left: 150px;}
.class_intro .box_in .box.info .tit_area::before{content: '';position: absolute;top:20px;left:0;width: 134px;height: 144px;background: url(/images/front/00001/common/icon_intro.png) no-repeat;}
.class_intro .box_in .box.info .tit{font-family: 'Paperlogy';font-size: 50px;font-weight: 500;letter-spacing: 0;}
.class_intro .box_in .box.info .tit strong{font-weight: 800;}
.class_intro .box_in .box.info .text{font-family: 'Paperlogy';font-size: 20px;font-weight: 200;letter-spacing: 0;}

.class_intro .box_in .box.customer{position: relative;width: 365px;background-color: rgba(20, 68, 165, 0.5);}
.class_intro .box_in .box.customer::before{content: '';position: absolute;bottom: 20px;right: 20px;width: 95px;height: 65px;background: url(/images/front/00001/common/icon_service01.png) no-repeat;}
.class_intro .box_in .box.customer.type2{margin-top: -110px;background-color: rgba(17, 35, 85, 0.5);}
.class_intro .box_in .box.customer.type2::before{content: '';position: absolute;bottom: 5px;right: 10px;width: 102px;height: 90px;background: url(/images/front/00001/common/icon_service02.png) no-repeat;}
.class_intro .box_in .box.customer:hover{background-color: rgba(20, 68, 165, 0.9);}
.class_intro .box_in .box.customer.type2:hover{background-color: rgba(17, 35, 85, 0.9);}

.class_intro .box_in .box.notice{width: 685px;margin-top: -110px;}
.class_intro .box_in .box.notice .notice_list li a{position: relative;display: flex;align-items: center;width: 100%;padding: 3px 0;}
.class_intro .box_in .box.notice .notice_list li a .tit{position: relative;display: inline-block;max-width: 450px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-left:13px;}
.class_intro .box_in .box.notice .notice_list li a .tit::before{content: "";display: inline-block;position: absolute;top:9px;left:0px;width: 5px;height: 5px;background: #f4aa24;border-radius: 80%;}
.class_intro .box_in .box.notice .notice_list li a .date{position: absolute;top:3px;right:0;font-size: 14px;}
.class_intro .box_in .box.notice .more{position: absolute;top:35px;right:40px;font-size: 0;}
.class_intro .box_in .box.notice .more::before{content: "";display: inline-block;position: absolute;top:0;right:0;width: 20px;height: 20px;background:url('/images/front/00001/icon/icon_more_w.png') no-repeat 0 0;}
.class_intro .box_in .box.notice:hover{background-color: rgba(255, 255, 255, 1);}
.class_intro .box_in .box.notice:hover > .tit{color: #222;}
.class_intro .box_in .box.notice:hover li a{color: #222;}
.class_intro .box_in .box.notice:hover .more::before{content: "";display: inline-block;position: absolute;top:0;right:0;width: 20px;height: 20px;background:url('/images/front/00001/icon/icon_more.png') no-repeat 0 0;}

.class_intro .box_in .box.login{width: 345px;height: 370px;padding: 30px;background-color: rgba(255, 255, 255, 0.9);color: #111;}
.class_intro .box_in .box.login > .tit{margin-bottom: 0;font-weight: 700;}
.class_intro .box_in .box.login > .text{font-size: 16px;color: #666;font-weight: 500;}
.login_box .login_input_box > div p{margin-bottom: 5px;font-weight: 500;}
.login_box .login_input_box > div input{width: 100%;height: 48px;margin-bottom: 10px;border: none;font-size: 15px}
.login_box .btn_login{display: block;width: 100%;height: 50px;margin-top: 7px;font-size: 18px;font-weight: 500;color: #fff;background: #2951c5;border-radius: 10px;}
.class_intro .box_in .box.login:hover{background-color: rgba(255, 255, 255, 1);}
.class_intro .box_in .box.login:hover .login_box .login_input_box > div input{background: #eaeaec;}
.class_intro .box_in .box.login:hover .login_box .btn_login{background: #0e35a8;}

.class_intro .box_in .box.member{width: 345px;height: 150px;padding: 20px 30px;background-color: rgba(255, 255, 255, 0.9);}
.class_intro .box_in .box.member ul{padding-top: 20px;}
.class_intro .box_in .box.member li{border-bottom: 1px #ddd solid;}
.class_intro .box_in .box.member li:last-child{border-bottom: none;}
.class_intro .box_in .box.member li a{position: relative;display: inline-block;width: 100%;padding: 6px 0;font-weight: 500;color: #111;padding-left: 12px;}
.class_intro .box_in .box.member li a::before{content: "";display: inline-block;position: absolute;top:15px;left:0px;width: 4px;height: 4px;background: #ababab;border-radius: 80%;}
.class_intro .box_in .box.member li a::after{content: "";display: inline-block;position: absolute;top:13px;right:5px;width: 6px;height: 11px;background: url(/images/front/00001/icon/icon_dot.png) no-repeat;}
.class_intro .box_in .box.member:hover{background-color: rgba(255, 255, 255, 1);}

.class_intro .footer{position: fixed;bottom: 0;left: 0;width: 100%;padding: 35px;font-weight: 200;color: #fff;text-align: center;}
.class_intro .footer .tel{display: inline-block;padding-left: 30px;}

/* main */
.class_all{text-align: right;margin-bottom: 10px;}
.class_all .btn_all{position: relative;padding-right: 25px;font-weight: 500;}
.class_all .btn_all::before{content:"";position:absolute;top: -3px;right:0;width:25px;height:25px;background:url('/images/front/icon/arr_down02.png') no-repeat center center;background-size: cover;transition:transform .5s;}
.class_all .btn_all.active::before{transform: rotate(180deg);}
.class_wrap{padding: 30px 40px;margin-bottom: 40px;border: 1px #444 solid;border-radius: 10px;}
.class_wrap .class_info{position: relative;display: flex;align-items: center;gap:20px;}
.class_wrap .class_info .photo_area{overflow: hidden;width: 60px;height: 60px;background: #ddd;border-radius: 50%;}
.class_wrap .class_info .photo_area img{width: 100%;height: 100%;}
.class_wrap .class_info ul{display: flex;align-items: center;gap:30px;}
.class_wrap .class_info li{display: flex;align-items: center;gap: 6px;position: relative;font-size: 17px;font-weight: 600;color: #222;}
.class_wrap .class_info li::before{content: '';position: absolute;right: -15px;width: 1px;height: 19px;background: #ddd;}
.class_wrap .class_info li:last-child::before{display: none;}
.class_wrap .class_info .btn_my{position: absolute;top:15px;right:0;}
.class_wrap .class_in{position: relative;padding-top: 30px;}
.class_wrap .class_in .btn_more{position: absolute;top:5px;right:0;padding-right: 20px;font-size: 15px;}
.class_wrap .class_in .btn_more::before{content:"";position:absolute;top:0;right:0;width:20px;height:20px;background:url('/images/front/icon/arr_down02.png') no-repeat center center;background-size: cover;transform: rotate(-90deg);}
.class_wrap .list_table_area{margin-bottom: 10px;}
.class_wrap{ overflow:hidden;}/* 부모도 부드럽게 */
.class_wrap .class_in{overflow:hidden; will-change: height, opacity, padding; transition: height .36s ease, padding .36s ease, opacity .24s ease;}

.newsboard_wrap{display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: space-between;gap: 30px;}
.newsboard_wrap .box{position: relative;width: 48.5%;height: 200px;padding: 30px 30px 25px 30px;border: 1px #ddd solid;border-radius: 15px;}
.newsboard_wrap .box h3{margin-bottom: 15px;font-size:20px;color: #002a70;}
.newsboard_wrap .box li a{display: flex;align-items: flex-start;justify-content: space-between;padding: 5px 0;}
.newsboard_wrap .box li .tit{position: relative;display: inline-block;width: 80%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-left: 10px;font-weight: 600}
.newsboard_wrap .box:nth-child(3) li .tit{width: 70%;}
.newsboard_wrap .box li .tit:before{content: '';position: absolute;top:9px;left:0;width: 3px;height: 3px;background: #1d78cc;border-radius: 50px;}
.newsboard_wrap .box li .date{font-size: 15px;color: #777;}
.newsboard_wrap .btn_more{position: absolute;top:20px;right:30px;font-size: 0;}
.newsboard_wrap .btn_more::before{content:'';position: absolute;top:0;right:0;width:20px;height:20px;background:url('/images/front/icon/icon_more.png') no-repeat;background-size: cover;}
.newsboard_wrap .non_text{display: flex;align-items: center;justify-content: space-around;height: 100px;}

/* 회원가입 */
.pop_policy_box{margin-bottom: 10px; padding: 40px;background: #fafafa;line-height: 1.4;}
.pop_policy_box .tit{font-size: 15px;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ddd;}
.pop_policy_box .tit.icon{position: relative;font-weight:500;padding-left:10px;}
.pop_policy_box .tit.icon:before{content: ''; position: absolute;top:8px;left:0;width: 4px;height: 4px;border-radius: 50%;background-color: #555;}
.pop_policy_box .tit strong{font-weight: 500;color:#243574;}
.pop_policy_box .policy_con > ul > li{padding: 10px 0;}
.pop_policy_box .policy_con li p{font-size: 16px;font-weight: 500;color: #222;margin-bottom: 5px;}
.pop_policy_box .policy_con > ul > li > ul > li{position: relative;padding: 3px 0 2px 20px;}
.pop_policy_box .policy_con > ul > li > ul > li::before {content: ''; position: absolute;top:12px;left:10px;width: 4px;height: 4px;border-radius: 50%;background-color: #999;}
.pop_policy_box .policy_con .policy_help{position:relative;border-top: 1px #ddd solid;margin-top: 20px;padding: 20px 0 0 15px;}
.pop_policy_box .policy_con .policy_help::before{content: '※';position: absolute;top: 20px;left: 0;color: #ed2727;}

.member_wrap{max-width: 750px;margin: 0 auto;}
.member_wrap.w450{max-width: 450px;}
.member_wrap.w750 .box{padding: 30px;}
.member_wrap .box{padding: 30px;border: 1px #ddd solid;}
.member_wrap .box.type2{padding: 110px 20px;}
.member_wrap .box.form_wrap{padding: 60px 30px 40px 30px;}
.member_wrap .box .box-sec{max-width: 500px;margin: 0 auto;}
.member_wrap .btn_wrap{margin: 50px 0 0 0;}
.member_wrap .tit_area{margin-bottom: 40px;text-align: center;}
.member_wrap .tit_area .tit{margin-bottom: 15px;font-size: 1.125rem;font-weight: 600;color: #222;}
.member_wrap .tit_area .text{font-size: 1.125rem;color: #777;}
.member_wrap .tit_area02{overflow: hidden;margin-top: 40px;text-align: center;}
.member_wrap .tit_area03{margin-bottom: 15px;}
.member_wrap .tit_area03 .text{color: #777;}
.member_wrap .tit_point02{font-weight: 600;}
.member_wrap .btn_select{ margin-top: 30px;}
.member_wrap .btn_select button{width: 100%;margin: 6px 0;font-weight: 700;}

.step_list{width: 62%;margin: 0 auto 40px auto;}
.step_list ul{position: relative;display: flex;justify-content: space-between;}
.step_list ul::before{content:"";position:absolute;top:17px;left:30px;display: block;width: 80%;height: 1px;background: #ccc;}
.step_list li{position: relative;margin: 0 10px;text-align: center;}
.step_list li .num{display: inline-block;height: 35px;padding: 0 23px;margin-bottom: 10px;border-radius:30px;background:#ececec;font-size: 0.875rem;text-align: center;line-height: 35px;}
.step_list li p{font-weight: 700;}
.step_list li.on .num{background: #4f47b8;font-weight: 700;color: #fff;}
.step_list li.on p{font-weight: 700;color: #333;}

.form_wrap .form-group{margin-bottom: 10px;}
.form_wrap .form-tit{font-weight: 700;color: #222;}
.form_wrap .form-conts {display: flex;flex-direction: column;gap: 1rem;width: 100%;}
.form_wrap .form-conts.gep0{gap: 0rem;}
.form_wrap .input-group {position: relative;display: flex;align-items: center;gap: 0.5rem;width: 100%;}
.form_wrap input{width: 100%;height: 50px;margin: 10px 0;border-radius: 8px;font-size: 1rem;}
.form_wrap select{height: 50px;}
.form_wrap .btn.secondary{min-width: 105px;height: 50px;padding: 0px 5px;border: 1px #2951c5 solid;border-radius: 5px;}
.form_wrap .btn.secondary span{font-size: 1rem;font-weight: 600;color: #2951c5;}
.form_wrap .form-group .togglePassword{width:20px;height:20px;position: absolute;top:25px;right:20px;font-size: 0;background: url(../../images/front/icon/icon_pw_view_on.png) no-repeat 0 0;}
.form_wrap .form-group .togglePassword.off{background: url(../../images/front/icon/icon_pw_view_off.png) no-repeat 0 0;}
#timer{margin-top: -22px;font-size: 14px;font-weight: 600;}

@media screen and (max-width:1440px){
    /* 강의실 Intro */
    .class_intro .box_in{gap: 1rem;}
    .class_intro .box_in .box.info {width: 46%;}
    .class_intro .box_in .box.customer{width: 24%;}
    .class_intro .box_in .box.login{width: 24%;}
    .class_intro .box_in .box.notice{width: 46%;}
    .class_intro .box_in .box.member {width: 25%;}
    .class_intro .box_in .box > .text br{display: none;}
    .class_intro .box_in .box.notice .notice_list li a .tit {max-width: 300px;}
}
@media screen and (max-width:1240px){
    /* 강의실 Intro */
    .class_intro .box_in .box{padding: 30px;}
    .class_intro .box_in .box > .text {font-size: 16px;}
    .class_intro .box_in .box.info {padding: 40px 0 0 20px;}
    .class_intro .box_in .box.info .tit_area::before {top: 10px;}
    .class_intro .box_in .box.info .tit_area {padding-left: 130px;}
    .class_intro .box_in .box.info .tit{font-size: 41px;}
    .class_intro .box_in .box.info .text{font-size: 19px;}
    
    /* main */
    .newsboard_wrap .box {width: 48.3%;}
    .newsboard_wrap .box li .tit {width: 70%;} 
}
@media screen and (max-width:1024px){
    /* 강의실 Intro */
    .class_intro{content: '';height: 180vh;background:url(/images/front/00001/common/main_visual02.jpg) no-repeat center center;background-size: cover;}
    .class_intro .header_top{height: 70px;padding: 0 20px;}
    .class_intro .header_top .logo_area h1{height: 48px;}
    .class_intro .header_top .logo_area h1 img{height: 48px;}
    .class_intro .box_area{position: relative;top:0;transform: translateX(-50%);width: 80%;height: 1455px;}
    .class_intro .box_in{height: 500px;}
    .class_intro .box_in .box{position: absolute;left:0;border-radius: 15px;}
    .class_intro .box_in .box.info {top:0;width: 100%;height: auto;}
    .class_intro .box_in .box.customer{top:1030px;width: 100%;height: 200px;}
    .class_intro .box_in .box.customer.type2{top:1000px;margin-top:0;}
    .class_intro .box_in .box.login{top:200px;width: 100%;}
    .class_intro .box_in .box.notice{top:740px;width: 100%;margin-top:0;}
    .class_intro .box_in .box.notice .more{top:33px;right:30px;}
    .class_intro .box_in .box.member ul {padding-top: 0;}
    .class_intro .box_in .box.member{top:600px;width: 100%;height: auto;}
    .class_intro .footer {position: static;}
    
    /* main */
    .newsboard_wrap .box {width: 100%;}
}
@media screen and (max-width:800px){  
    /* 강의실 Intro */
    .class_wrap{margin-bottom: 30px;}
    .class_wrap .class_info ul {display: block;}
    .class_wrap .class_info li{padding-left: 13px;}
    .class_wrap .class_info li::before{content: '';position: absolute;top:12px;left:0;right:auto;width: 3px;height: 3px;border-radius: 50%;background: #999;}
    .class_wrap .class_info li:last-child::before{display: block;}
}
/* 화면 해상도 width 640px 이하 Design --------------------------------------*/
@media screen and (max-width: 640px){
    /* 강의실 Intro */
    .class_intro{height: 200vh;}
    .class_intro .header_top{height: 55px;padding: 0 20px;}
    .class_intro .header_top .logo_area h1{height: 32px;}
    .class_intro .header_top .logo_area h1 img{height: 32px;}
    .class_intro .header_top .logo_area .mylecture{width: 110px;height: 20px;margin-left: 10px;background-size: cover;}
    
    .class_intro .box_area{width: 90%;}
    .class_intro .box_in .box{padding: 20px;border-radius: 10px;}
    .class_intro .box_in .box > .tit {font-size: 20px;}
    .class_intro .box_in .box > .text{font-size: 15px;}
    .class_intro .box_in .box.info{padding: 30px 0 0 10px;}
    .class_intro .box_in .box.info .tit {font-size: 32px;}
    .class_intro .box_in .box.info .text{font-size: 15px;}
    .class_intro .box_in .box.info .tit_area{padding-left: 0;}
    .class_intro .box_in .box.info .tit_area::before{display: none;}
    
    .class_intro .box_in .box.login {top: 150px;height: 340px;}
    .class_intro .box_in .box.login > .text{font-size: 14px;}
    .login_box .btn_login {height: 46px;font-size: 16px;}
    .login_box .login_input_box > div input {height: 42px!important}
    .class_intro .box_in .box.member{top: 510px;}
    .class_intro .box_in .box.notice{top: 637px;height: 360px;}
    .class_intro .box_in .box.notice .notice_list li a{display: block;}
    .class_intro .box_in .box.notice .notice_list li a .date{position: static;display: block;padding-left: 14px;}
    .class_intro .box_in .box.notice .notice_list li a .tit {max-width: 100%;}
    .class_intro .box_in .box.notice .more{top:20px;right:20px;}
    .class_intro .box_in .box.customer{top: 1010px;}
    .class_intro .box_in .box.customer.type2 {top:970px;}
    .class_intro .box_in .box .golink{width: 35px;height: 35px;}
    .class_intro .box_in .box .golink::after{width: 35px;height: 35px;}
    
    /* main */
    .class_wrap{padding: 20px;}
    .class_wrap .class_info{display: block;}
    .class_wrap .class_info li{font-size: 15px;}
    .class_wrap .class_info li::before{top:10px;}
    .newsboard_wrap .box{height: auto;padding: 20px;}
    .newsboard_wrap .box h3{font-size: 18px;}
    .newsboard_wrap .box li a {display: block;}
    .newsboard_wrap .box li .tit{width: 100%;}
    .newsboard_wrap .box:nth-child(3) li .tit{width: 100%;}
    .newsboard_wrap .box li .date{display: inline-block;width: 100%;padding-left: 13px;}
    .newsboard_wrap .btn_more{right:20px;}
    
    /* 회원가입 */
    .member_wrap .box.form_wrap{padding: 0;border: none;}
    .form-conts.email_form .input-group{display: block;}
    .form-conts.email_form .input-group select{width: 100%;margin-bottom: 3px;}
    .form_wrap input{height: 38px;border-radius: 5px;}
    .form_wrap .input-group{display: block;}
    .form_wrap .btn.secondary {min-width: 80px;height: 40px;}
    .member_wrap .tit_area {margin-bottom: 10px;}
}