@charset "utf-8";

.m1 {padding-top: 37%;/* background: url('/images/02jbeducation/main/m_main_bg.jpg') no-repeat; */background: url('/upload_data/board_data/BBS_CONTENT_FILE/178185805377686.jpg')no-repeat;background-size: 100%;}
.m_calendar {width: 95%; margin: 0 auto;}
.main_cal {padding: 20px;background: var(--color1);border-radius: 30px;color: #fffffd;}
.main_cal a {color: #fffffd;}
.main_cal .m_calTop {display: flex;flex-direction: row-reverse;justify-content: space-between;align-items: center;padding: 0 5px;}
.main_cal .m_calTop h2 {font-family: 'Hakgyoansim Undongjang';font-weight: normal;font-size: 28px;}
.main_cal .m_calTop>div {display: flex;}
.main_cal .m_calTop strong {display: block;font-size: 34px;line-height: 32px;color: var(--color3);}
.main_cal .m_calTop>div>p:last-child {margin-top: 15px;}
.main_cal .m_calTop button {padding: 0 3px;background: url('/images/02jbeducation/common/ico_main.png') no-repeat;color: var(--wh);font-family: 'Paperlogy';font-weight: 300;background-size: 350px;}
.main_cal .m_calTop button span {display: block; margin-top: 20px;}
.main_cal .m_calTop button.prev {background-position: 4px -4px;}
.main_cal .m_calTop button.next {background-position: -60px -4px;}
.main_cal .calendar {margin-top: 20px;}
.main_cal .calendar table {width: 100%;text-align:center;color: #fffffd;}
.main_cal .calendar th a, .main_cal .calendar td a {font-weight: 300;}
.main_cal .calendar td a {display: block;padding: 8px 0;}
.main_cal .calendar th.sat, .main_cal .calendar td.sat a{color: #9ac9f5;}
.main_cal .calendar th.sun, .main_cal .calendar td.sun a{color: #eb9ca1;}
.main_cal .calendar th{padding: 10px 0;font-weight: 300;}
.main_cal .calendar td, .main_cal .calendar td a{position:relative;}
.main_cal .calendar td.holiday a {color: #eb9ca1 !important;}
.main_cal .calendar td.have:after {display: block;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 25px;height: 4px;border-radius: 50px;background: var(--color3);content:'';}
.main_cal .calendar td.today a {font-weight: 500; color: var(--color1);}
.main_cal .calendar td.today:before {display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: var(--wh);border-radius: 5px;content:'';}
.main_cal .calendar td.select a {color: var(--color1); font-weight: 500;}
.main_cal .calendar td.select:before {display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: var(--color3);border-radius: 5px;content:'';}
.main_cal .calendar td a:hover:before,
.main_cal .calendar td a:active:before,
.main_cal .calendar td a:focus:before{display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: var(--color3);border-radius: 5px;content:'';z-index: -1;}
.main_cal .calendar td a:hover,
.main_cal .calendar td a:active,
.main_cal .calendar td a:focus {color: var(--color1); font-weight: 500;}
.cal_info {border-radius: 30px;padding: 15px;margin: 20px 0;background: var(--color2);}
.cal_info .info_wrap {position: relative;padding: 20px; background: var(--wh); border-radius: 30px;}
.cal_info .i_tit {font-size: 18px;font-weight: 600;color: var(--txt);}
.cal_info ul {margin-top: 15px;}
.cal_info li {line-height: 1.9;}
.cal_info li a {display: block;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 500;color: var(--txt);font-size: 16px;}
.cal_info li a:hover, .cal_info li a:focus {text-decoration: underline;}
.cal_info li a:before {display: inline-block;width: 27px;height: 27px;background: url('/images/02jbeducation/common/ico_main.png') no-repeat -200px -6px;content: '';vertical-align: middle;}
.cal_info .more a {display: block;position: absolute;top: 18px;right: 17px;width: 25px;height: 25px;background: url('/images/02jbeducation/common/ico_main.png') no-repeat -142px -4px;}
.cal_info .more a span {position: absolute; top: -100000px; left: -100000px;}
.cal_info .more a:hover, .cal_info .more a:active, .cal_info .more a:focus {transform: rotate(180deg);}

.m_sns {display: flex;width: 95%;margin: 0 auto;padding: 20px;border-radius: 30px;border: 2px solid var(--color2);box-sizing: border-box;flex-wrap: wrap;justify-content: space-between;align-items: center;}
.m_sns h2 {display: inline-block;margin: 0 0 10px 0;font-family: 'Hakgyoansim Undongjang';color: var(--bk);font-weight: normal;font-size: 28px;}
.m_sns ul {display: flex;width: 260px;}
.m_sns li {margin: 0 2px;}
.m_sns a {display: block;width: 100%;width: 48px;height: 45px;background: url('/images/02jbeducation/common/ico_main.png') no-repeat;}
.m_sns a span {position: absolute; top: -100000px; left: -100000px;}
.m_sns .blog a {background-position: -72px -56px;}
.m_sns .face a {background-position: -138px -56px;}
.m_sns .you a {background-position: -205px -56px;}
.m_sns .ins a {background-position: -272px -56px;}
.m_sns .nband a {background-position: -339px -56px;}

.m2_wrap {padding: 50px 10px;}
.m2_wrap h2 {text-align: right; font-family: 'Hakgyoansim Undongjang';font-weight: normal;font-size: 32px;}
.m2_wrap h2 span {color: var(--color1);}
.m2_wrap h2 strong {display: block; color: var(--color2); font-weight: normal;}
.m_imgList {position: relative;margin: 30px 0;/* padding-top: 50px; */}
.m_imgList li {display: block;margin: 20px auto;width: 100%;text-align:center;}
.m_imgList li.no_data{text-align:center;width:100%;background:var(--line);padding:30px 0;border-radius:30px;}
.m_imgList a {display: block;position: relative;width: 100%;height: 100%;}
.m_imgList .img {position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: 30px;}
.m_imgList .img:before {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #0000008a;content: '';z-index: 1; opacity: 0;}
.m_imgList .img img {width: 100%;height: 100%;}
.m_imgList .img_inoTxt {position: absolute;bottom: -30px;left: -10px;z-index: 9;width: 70%;background: var(--wh);padding: 20px;border-radius: 30px;box-shadow: -5px 5px 5px #ededed;opacity: 0;}
.m_imgList .img_inoTxt span {display: block;}
.m_imgList .img_inoTxt .tit {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 19px;font-weight: 500;}
.m_imgList .img_inoTxt .date {text-align: right;margin-top: 5px;color: var(--txt3);font-size: 16px;}
.m_imgList a:hover .img:before, .m_imgList a:focus .img:active, .m_imgList a:focus .img:before,
.m_imgList a:hover .img_inoTxt, .m_imgList a:active .img_inoTxt, .m_imgList a:focus .img_inoTxt {opacity: 1;transition-duration: 700ms;}
.m_imgList .more {position: absolute;top: -40px;right: 10px;}
.m_imgList .more a {display: flex;height: 50px;align-items: center;}
.m_imgList .more a:after {display: inline-block;width: 50px;height: 50px;background: url('/images/02jbeducation/common/ico_main.png') no-repeat -5px -132px;content: '';}
.m_imgList .more a span {font-weight: 500;}
.m_imgList .more a:hover:after, .m_imgList .more a:active:after, .cal_info .more a:focus:after {transform: translate(15px, -15px); transition-duration: 300ms;}

@media (min-width: 500px) {
.m_imgList {display: flex;}
.m_imgList ul:first-child {margin-right: 15px;}
}

/* tablet */
@media (min-width: 768px) {
.main_cal {position: relative;padding: 35px;z-index: 1;}
.main_cal .m_calTop h2 {font-size: 35px;}
.main_cal .m_calTop p {font-size: 20px;}
.main_cal .m_calTop strong {font-size: 42px; line-height: 40px;}
.main_cal .m_calTop button {font-size: 14px;background-size: auto;}
.main_cal .m_calTop>div>p:last-child {margin: 15px 0 0 15px;}
.main_cal .m_calTop button.prev {background-position: 2px -9px;}
.main_cal .m_calTop button.next {background-position: -71px -9px;}
.m_calendar {position: relative;width: 445px;height: 660px;}
.main_cal .calendar {margin-top: 25px;font-size: 18px;}
.cal_info {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 525px;margin: -150px 0 0 0;padding: 170px 35px 35px;box-sizing: border-box;background: var(--color2) url('/images/02jbeducation/main/calinfo_bg.png') no-repeat bottom right -28px;}
.cal_info .info_wrap {width: 445px;min-height: 220px;box-sizing: border-box;margin: 0 auto;padding: 25px 30px;}
.cal_info li a {font-size: 17px;}
.cal_info .more a {top: 32px;right: 35px;}
.m_sns {width: 525px;padding: 25px;margin: 30px auto;}
.m_sns h2 {margin: 0;font-size: 31px;}
.m_sns ul {width: calc(100% - 210px);}

.m2_wrap {padding: 50px 20px;}
.m2_wrap h2 {font-size: 55px;}
.m_imgList {display: block;}
.m_imgList ul:first-child {margin: 0;}
.m_imgList li {display: inline-block;width: 31.2%;margin: 40px 5px 0 5px;}
.m_imgList .img img {height:150px;}
}

/* desktop*/
@media (min-width: 1023px) {
.m1 {background: none;padding: 35px 0 0 0;}
.m1:before {display: block;position: absolute;z-index: -9;top: 0;left: 0;width: 100%;height: 900px;/* background: url('/images/02jbeducation/main/main_bg1.jpg') no-repeat; */content: '';background: url('/upload_data/board_data/BBS_CONTENT_FILE/178185805378156.jpg');}
.m_calendar {margin: 0 0 0 62px;}
.m_sns {margin: 30px 0 30px 20px;}
.m2 {background: url('/images/02jbeducation/main/main_bg2.png') no-repeat center top;}
.m2_wrap {background: url('/upload_data/board_data/BBS_CONTENT_FILE/178468634701812.png') no-repeat 50px 70px;background-size:400px;}
.m_imgList {padding: 0;margin: 40px 0 0 0;}
.m_imgList h3{padding-left: 20px;}
.m_imgList ul:first-child {margin-right: 100px;}
.m_imgList ul:nth-child(2) {/* margin-left: 100px; */}
.m_imgList .more {top: 0px;}
.m_imgList .img img {height:180px;}
}

@media (min-width: 1400px) {
.m_imgList .img img {height:260px;}
.m_imgList .more {right:30px;}
}

/* 와이드 */
@media (min-width: 1500px) {
.m2 {background-position: left top;}
.m2_wrap {background-position: 50px 100px;background-size:700px;}
.m2_wrap h2 {font-size: 65px;}
.m2_wrap h2 strong {font-size: 70px;margin: 10px 0 0 0;}  
.m_imgList h3{font-size:36px;}
.m_imgList ul:first-child {margin-right: 150px;}
.m_imgList ul:nth-child(2) {/* margin-left: 150px; */}
.m_imgList li {margin: 45px 15px; width: 30%;}
.m_imgList .img_inoTxt {left: -35px;bottom: -45px;padding: 20px 30px;}
.m_imgList .img img {height: 340px;}
}
@media (min-width: 1750px) {
.m1_wrap, .m2_wrap {width: 1750px; margin: 0 auto;}
.m_imgList li {margin: 30px 20px 20px 20px;}
}