@charset "utf-8";
/* CSS Document */

/* [메인화면 업로드 일자 25.02.12 - PM 19:00] */
/* com2zoa design KYJ - c2zafter 3.0*/
/**** keyframe ****/
@keyframes blink{
  0% {opacity: .6}
  100% {opacity: 1}
}
@keyframes effect{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(5px)}
}

/******** Common ********/
#wrap {position: relative; min-height: calc(100vh); min-width: 320px}
.clear_fix::after{content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.header_wrap{font-family: 'Gmarket Sans'}

/*상단버튼-PC용*/
.top_titbx .top_btn{position: absolute; top:17px; right:17px}
.top_titbx .top_btn::after{content: ""; display: block; clear: both}
.top_titbx .top_btn > p{float: left; margin-left:7px}
/*로그아웃버튼*/
.top_titbx .top_btn p.btn_logout a{display: block; padding: 6px 18px; border-radius: 50px; background: #fff; font-size: 15px; box-shadow:0 3px 3px rgba(0, 0, 0, 0.1); transition: all .3s}
.top_titbx .top_btn p.btn_logout a span{display: block; padding: 3px 0 1px 25px; background:url(../../images/main/btn_logout.png) no-repeat left center}
.top_titbx .top_btn p.btn_logout a:hover{background: #3e5060; color:#fff}
.top_titbx .top_btn p.btn_logout a:hover span{background:url(../../images/main/btn_logout_a.png) no-repeat left center}
/* .top_titbx .top_btn p.btn_schome{margin: -3px 0 0 15px}
.top_titbx .top_btn p.btn_schome a{display: block; height: 37px; width: 37px; border-radius: 50%; border:2px solid #fff; background:url(../../images/main/btn_schome.png) no-repeat center center; box-sizing: border-box; font-size: 0; transition: all .3s; opacity: 0.4; box-shadow:0 3px 3px rgba(0, 0, 0, 0.3)}
.top_titbx .top_btn p.btn_schome a:hover{opacity: 1; box-shadow:0 3px 3px rgba(0, 0, 0, 0.1)} */
/*학교홈, 늘봄홈, 관리자홈*/
.top_titbx .top_btn p.btn_schome a,
.top_titbx .top_btn p.btn_afterhome a,
.top_titbx .top_btn p.btn_adminhome a{display: block; padding: 4px 13px; border-radius: 50px; border:2px solid #fff; color:#fff; font-size: 15px; opacity: 0.5; box-shadow:0 3px 3px rgba(0, 0, 0, 0.2); transition: all .3s}
.top_titbx .top_btn p.btn_schome a span,
.top_titbx .top_btn p.btn_afterhome a span,
.top_titbx .top_btn p.btn_adminhome a span{display: block; padding: 3px 0 1px 25px; background:url(../../images/main/btn_schome.png) no-repeat left center}
.top_titbx .top_btn p.btn_schome a:hover,
.top_titbx .top_btn p.btn_afterhome a:hover,
.top_titbx .top_btn p.btn_adminhome a:hover{opacity: 1; box-shadow:0 3px 3px rgba(0, 0, 0, 0.1)}

/**레이아웃**/
/*방과후상단(fix)*/
.top_titbx{position: fixed; left:0; top:0; width: 100%; height: 64px; background:linear-gradient(100deg, #3f9aef , #c097fd); z-index: 100}
/*방과후이름*/
.top_titbx h1.aft_name{margin-left: 265px}
.top_titbx h1.aft_name a{position: relative; display: block; padding:0 0 0 25px; line-height: 64px; color:#fff; font-size: 20px; text-shadow:0 1px 2px rgba(0, 0, 0, 0.12)}
/* .top_titbx h1.aft_name a::after{display: block; content: ''; clear: both;position: absolute; top:17px; left:28px; width:43px; height:22px; background:url(../../images/main/back_home.png) no-repeat center center; border-radius:50px; border:1px solid #fff; opacity: 0.4; box-shadow:0 3px 3px rgba(0, 0, 0, 0.1); transition: all .3s}
.top_titbx h1.aft_name a:hover::after{opacity: 1} */

/*왼쪽 정보 및 메뉴영역(fix)*/
/*학교이름*/
.header_wrap .sch_name{position: fixed; left:0; top:0; width: 265px; height: 65px; line-height: 65px; background: #f3f3f3; font-size: 18px; text-align: center; box-shadow:0 -5px 5px rgba(0, 0, 0, 0.1); z-index: 100}
/**로그인영역**/
.fix_header .allbtn_close{display: none}
.fix_menu{overflow-y: auto; padding-bottom:20px}
.fix_menu::-webkit-scrollbar {width: 7px}
.fix_menu::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0px 0px 0px white}
.fix_menu::-webkit-scrollbar-thumb {background-color: #82868b; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent}

/*버튼스타일*/
.login_box .logtab{position: absolute; top:10px; width: 50%; z-index: 10}
.login_box .logtab.logtab01{left:10px}
.login_box .logtab.logtab02{right:10px}
.login_box .logtab a{display: block; width:88%; height: 32px; line-height: 32px; border-radius: 50px; background: #eaeaea; font-size: 14px; text-align: center; transition:  all .5s; box-sizing: border-box}
.login_box .logtab.logtab02 a{float: right}
.login_box .logtab a:hover, .login_box .on .logtab a{color:#fff}
.login_box .logtab.logtab01 a:hover, .login_box .on .logtab.logtab01 a{background: #55a6f3}
.login_box .logtab.logtab02 a:hover, .login_box .on .logtab.logtab02 a{background: #a471f4}
/*로그인 정보 입력*/
.login_box input::placeholder{color: #c5c5c5; font-weight: 400; font-size: 13px; font-family: 'Gmarket Sans'; letter-spacing:-0.5px}
.login_box input.log_input{width: 100%; height: 36px; padding: 5px; border-radius: 5px; border:1px solid #d3d3d3; box-sizing: border-box}
.login_box .logmid_box{padding: 52px 0 0}
.login_box .logmid_box .login_bx{position: relative; margin:0 10px; padding: 10px 0; border-top:1px solid #e9e9e9}
.login_box .input_wrap{margin: 20px 135px 35px}
/*학생 학년,반,번호 입력*/
.login_box .grade_input{margin-bottom: 7px}
.login_box .grade_input ul{display:flex; flex-wrap: wrap; justify-content: space-between}
.login_box .grade_input ul li{width: calc(100%/3 - 5px)}
/*공통 로그인정보입력*/
.login_box .login_input{position: relative; padding-right: 82px}
.login_box .login_input li:first-child{margin-bottom: 7px}
.login_box .login_input button.btn_log{position: absolute; bottom:0; right:0; width:75px; height: 79px; padding-top: 28px; background:#777f8b; border-radius: 6px; font-size: 14px; color:#fff; box-sizing: border-box; font-family: 'Gmarket Sans'; transition:all .7s}
.login_box .login_input button.btn_log span{padding-top: 30px; background: url(../../images/main/ico_login.png) no-repeat center top}
.login_box .login_input button.btn_log:hover{background-color: #3a4049}
/*아이디저장*/
.login_input .inputRow{position: relative; margin-bottom:6px}
.login_input .inputRow input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0}
.login_input .inputRow input[type="checkbox"] + label {display: inline-block; position: relative; padding-left:18px; cursor: pointer; font-family: 'Gmarket Sans'}
.login_input .inputRow input[type="checkbox"] + label:before {display: block; content: ""; position: absolute; top: -1px; left: 0; width: 13px; height: 13px; text-align: center; background: url(../../images/main/check_off.gif) no-repeat; box-sizing: border-box}
.login_input .inputRow input[type="checkbox"]:checked + label:after {display: block; content: ""; position: absolute; top:-1px; left: 0; width: 13px; height: 13px; background: url(../../images/main/check_on.gif) no-repeat; background-position: center center}

/*로그인 하단버튼*/
.logfoot_btn{display:flex; flex-wrap: wrap; justify-content: space-between}
.logfoot_btn > p{width: 100%}
.logfoot_btn > p a{display: block; height: 50px; line-height: 50px; background-color: #4c5460; color:#fff; text-align: center; font-size: 14px; font-family: 'Gmarket Sans'; transition: all .5s; letter-spacing: -0.5px}
.logfoot_btn > p a:hover{background-color: #5fb850}
.logfoot_btn > p:nth-child(2) a{background-color: #777f8b}
.logfoot_btn > p:nth-child(2) a:hover{background-color: #5fb850}
.logfoot_btn > p.lfbtn_v2 a{background-color: #2fa4ff}/*학생- 나의수강강좌, 학부모- 내자녀수강강좌 색상고정*/
.logfoot_btn > p.lfbtn_v2 a:hover{background-color: #ff6151}/*학생- 나의수강강좌, 학부모- 내자녀수강강좌 색상고정-오버*/
.logfoot_btn > p a span{display: inline-block; padding-left: 23px; background-repeat: no-repeat; background-position: left 16px}
/*비밀번호변경-아이콘*/
.logfoot_btn > p.lfbtn_v1 a span{background-image:url(../../images/main/lfbtn_v1.png)}/*로그인전- 기본*/
.logfoot_btn > p.lfbtn_v2 a span{background-image:url(../../images/main/lfbtn_v2.png)}/*학생- 나의수강강좌, 학부모- 내자녀수강강좌*/
.logfoot_btn > p.lfbtn_v3 a span{background-image:url(../../images/main/lfbtn_v3.png)}/*학생- 정보변경*/
.logfoot_btn > p.lfbtn_v4 a span{background-image:url(../../images/main/lfbtn_v4.png)}/*강사- 강좌관리*/
.logfoot_btn > p.lfbtn_v5 a span{background-image:url(../../images/main/lfbtn_v5.png)}/*강사- 수강생관리*/
.logfoot_btn > p.lfbtn_v6 a span{background-image:url(../../images/main/lfbtn_v6.png)}/*관리자- 관리자화면가기*/
.logfoot_btn > p.lfbtn_v7 a span{background-image:url(../../images/main/lfbtn_v7.png)}/*관리자- 관리자화면나가기*/
.logfoot_btn > p.lfbtn_v9 a span{background-image:url(../../images/main/lfbtn_v6.png)}/*강사- 관리자홈 가기*/

/*로그인 후 스타일*/
.login_box .mem_view .logmid_box{padding: 0; background: #fff}
.login_box .mem_view .login_bx{padding:20px 10px; border-top:none}
.login_box .mem_view .name{position: relative; min-height:64px; padding-left: 85px; color:#989898; line-height: 130%; font-size: 14px; text-align: left; align-content:center}
.login_box .mem_view .logimg{display: block; position: absolute; top:50%; left:7px; width:60px; height: 60px; margin-top: -53px; border-radius: 50%; border:2px solid #e7e7e7; text-align: center; align-content: space-around}
.login_box .mem_view .name span{display: block; margin-bottom: 7px; color:#000; font-size: 15px}
.login_box .logfoot_btn {display: flex}
.login_box .logfoot_btn > p{flex: 1}

/*관리자- 관리자 화면 나가기 단독*/
p.lfbtn_v8 a{display: block; height: 50px; line-height: 50px; background-color: #4c5460; color:#fff; text-align: center; font-size: 14px; font-family: 'Gmarket Sans'; transition: all .5s; letter-spacing: -0.5px}
p.lfbtn_v8 a span{display: inline-block; padding-left: 23px; background:url(../../images/main/lfbtn_v7.png) no-repeat left 16px}
p.lfbtn_v8 a:hover{background-color: #5fb850}

/*관리자화면로그인 후 스타일*/
.adm_type .login_box .mem_view .logimg{margin-top:-33px}

/*로그아웃버튼-로그인 영역 포함*/
.login_bx p.btn_logout{padding:10px 0 0}
.login_bx p.btn_logout a{display: block; padding: 6px 15px; border-radius: 50px; background: #fff; font-size: 13px; border:1px solid #d9d9d9; transition: all .3s}
.login_bx p.btn_logout a span{display: block; padding: 3px 0 1px 25px; text-align:center; background:url(../../images/main/btn_logout.png) no-repeat left center}
.login_bx p.btn_logout a:hover{background: #3e5060; color:#fff}
.login_bx p.btn_logout a:hover span{background:url(../../images/main/btn_logout_a.png) no-repeat left center}

/**관리자**/
/*하단버튼-메인*/
.logfoot_btn > p.lfbtn_v6 a{background: #ff6d5e}
.logfoot_btn > p.lfbtn_v6 a:hover{background: #ce392a}
/*하단버튼-관리자 메인*/
.logfoot_btn > p.lfbtn_v7 a{background: #767b84}
.logfoot_btn > p.lfbtn_v7 a:hover{background: #2d3037}

/*왼쪽메뉴*/
.header_wrap .fix_header{overflow-y:auto; width: 265px; height: 100%}
.header_wrap .fix_wrap{position: fixed; left: 0; top:64px; width: 265px; height: 100%; background:#fff; z-index: 10; box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}
.header_wrap .fix_wrap .gnb_list > li > a{display: block; padding:17px 15px; background: url(../../images/main/btn_gnblst.png) no-repeat right 10px center; border-bottom: 1px solid #d9d9d9; font-size: 17px}
.header_wrap .fix_wrap .gnb_list > li > a:hover, .header_wrap .fix_wrap .gnb_list > li.on > a{background: url(../../images/main/btn_gnblst_a.png) no-repeat right 10px center; color:#42a0f9; font-weight: 600}
/*왼쪽메뉴-관리자화면*/
.header_wrap .adm_type .fix_wrap{background: #46494e}
.header_wrap .adm_type .gnb_list > li > a{color:#fff; border-bottom-color: #717376}
.header_wrap .adm_type .gnb_list > li > a:hover, .header_wrap .adm_type .gnb_list > li.on > a{background: url(../../images/main/adm_gnblst_a.png) no-repeat right 10px center #46494e; color:#ffb71c}

/*두번째 메뉴*/
.header_wrap .gnb_list .subMn .submn{padding:3px 13px; background: #f1f1f1}
.header_wrap .gnb_list .subMn .submn li{border-bottom: 1px solid #ccc}
.header_wrap .gnb_list .subMn .submn li:last-child{border-bottom: none}
.header_wrap .gnb_list .subMn .submn li a{position: relative; display: block; padding:9px 9px 9px 17px; color:#000; font-size: 15px}
.header_wrap .gnb_list .subMn .submn li a::after{display: block; clear: both; content: ''; position: absolute; top:15px; left:0; width: 7px; height: 2px; background: #acacac}
.header_wrap .gnb_list .subMn .submn li a:hover, .header_wrap .gnb_list .submn li.on a{color:#ff392f; font-weight: 600}
.header_wrap .gnb_list .subMn .submn li a:hover::after, .header_wrap .gnb_list .subMn .submn li.on a::after{background: #5a5a5a}

/*모바일 버튼*/
.top_menu{display: none}

/*메인컨텐츠*/
#content{margin: 0 0 0 265px; padding:64px 0px; padding-bottom: 120px}
.content_area{margin:25px; box-sizing: border-box; font-family:Malgun Gothic; font-size: 14px}

/*수강신청알림*/
.request_time{padding: 3px; margin-bottom: 25px; border-radius: 5px; background:linear-gradient(100deg, #3f9aef , #c097fd); font-family: 'Gmarket Sans'}
.request_time .timebx{padding: 10px; border-radius: 3px; background: #fff; text-align: center}
.request_time .timebx .reqtit{display: inline-block; padding: 10px 10px 15px 35px; background: url(../../images/main/ico_reqtit.gif) no-repeat left 6px; font-size: 20px; font-weight: 600}
.request_time .timebx .reqtit span{color: #ff2116}
.request_time .reqdate{display: flex; flex-wrap:wrap; justify-content:center; padding: 10px; background: #4c5460; border-radius: 5px; font-weight: 600}
.request_time .reqdate dt{width: 80px; height: 26px; line-height: 26px; border-radius: 50px; background: #fff; font-size: 15px}
.request_time .reqdate dd {margin: 3px 0 0 15px; align-content: space-around; font-size:16px; color:#fff; letter-spacing: 1px}
.request_time .reqdate dd span{color:#ffe762}
.request_time .reqdate dd br{display: none}
.request_time .reqdate dd span{display: inline-block; margin: 0 3px; animation: blink 0.6s ease-in-out infinite alternate}
/*수강신청알림-수강신청 아닐 때*/
.request_time.not_period .timebx .reqtit{padding-bottom:8px}
.request_time.not_period .timebx .reqtit span{display: none}
.request_time.not_period .reqdate{display: none}

/*수강신청 유의사항*/
.request_info{display: flex; gap:15px; padding: 10px; margin-bottom: 25px; border:2px solid #e7e7e7; border-radius: 5px}
.request_info dt{width:15%; padding: 10px; border-radius: 5px; background: #4c5460; box-sizing:border-box; text-align: center; font-size: 16px; line-height: 150%; color:#fff; font-weight: 600; align-content: space-around}
.request_info dt span{position: relative; display:inline-block; padding:5px 0 0 49px; font-family: 'Gmarket Sans'}
.request_info dt span::after{content: ""; display: block; clear: both; position: absolute; top:0; left:0; width:46px; height: 31px; background: url(../../images/main/ico_infotxt.gif) no-repeat left top}
.request_info dd{width:85%; align-content: space-around}
.request_info dd ol{margin: 5px 0}
.request_info dd li{padding-left: 13px; margin-bottom: 10px; background: url(../../images/main/blt_lst.png) no-repeat left 3px; line-height: 130%; font-size: 15px; font-family:NSK}
.request_info dd li:last-child{margin-bottom: 0}
.request_info dd li span{color:#ff5e49; font-weight:bold}
.request_info dd li strong{color:#000; font-weight:bold}

/********************메인컨텐츠********************/
.content_area .conline .more a{display: block; position: absolute; top:0; right:0; width: 35px; height: 35px; padding: 10px 0; border-radius: 50%; background: #f2f2f2; text-align: center; transition: all .3s; box-sizing: border-box}
.content_area .conline .more a:hover{background: #ccc; transform: rotate(180deg)}
.content_area .conline h3{margin-bottom: 20px; font-size: 20px; font-family: 'Gmarket Sans'; font-weight: 500}

/*고정컨텐츠*/
.content_area .conline .fix_conbx{position: relative; display: flex; gap:30px; margin:50px 0}
/*공지사항*/
#after_notice{min-width: 43%; width: 100%}
#after_notice .af_notice{position: relative}
.af_notice h3 span{display:block; padding:3px 40px 1px 40px; background: url(../../images/main/ico_noti.gif) no-repeat left center; line-height:130%}
/* .af_notice h3 span{padding:3px 0 3px 40px; background: url(../../images/main/ico_noti.gif) no-repeat left 0} */
/*공지목록*/
.af_notice .notice_tb{overflow: hidden; height:260px; border-top:1px solid #ebebeb}
.af_notice .notice_tb::after{content: ""; display: block; clear: both; position: absolute; bottom:0; width: 100%; height:160px; border-radius:10px; background: #f3f5f7; box-sizing: border-box}
.af_notice .notice_tb ul{position: relative; padding:0; z-index: 1}
.af_notice .notice_tb ul li{position:relative; height:30px; line-height: 150%; padding-left:15px; margin:0 0 0 23px;  background:url(../../images/main/blt_lst.png) no-repeat 0 7px; z-index: 1}
.af_notice .notice_tb ul li a{color:#000; font-size:16px; font-weight: 500}
.af_notice .notice_tb ul li:hover{background:url(../../images/main/blt_lst_a.png) no-repeat 0 7px}
.af_notice .notice_tb ul li:hover a{font-weight:700}
.af_notice .notice_tb ul li:nth-child(5){margin-bottom: 30px}
.af_notice .notice_tb p.tit {width:auto; margin:0}
.af_notice .notice_tb p.tit a {display:block; overflow:hidden; width:70%; text-overflow:ellipsis; white-space:nowrap}
.af_notice .notice_tb p.date {position:absolute; top:-3px; right:23px; width:65px; height:30px; line-height:30px; text-align:right; font-size:13px; color:#939393; font-weight: 400}
.af_notice .notice_tb li:hover p.date {font-weight: 500}
/*공지사항_첫번째 리스트*/
.af_notice .notice_tb ul li:first-child{position: relative; height:100px; padding:0 0 20px; margin:0 0 23px; line-height: 180%; background: none; box-sizing: border-box}
.af_notice .notice_tb ul li:first-child::after{display: block; clear: both; content: ""; position: absolute; top:15px; left:12px; width: 70px; height:70px; background:url(../../images/main/img_noti.png) no-repeat center center #f9f9f9; box-shadow:2px 2px 2px rgba(0, 0, 0, 0.1); border-radius: 50%}
.af_notice .notice_tb ul li:first-child:hover{background:none}
.af_notice .notice_tb ul li:first-child .tit{padding: 25px 0 5px 105px; margin: 0}
.af_notice .notice_tb ul li:first-child .tit a{width: 90%; font-size: 18px; font-weight:600; color:#000}
.af_notice .notice_tb ul li:first-child .txt{padding: 0 0 25px 105px}
.af_notice .notice_tb ul li:first-child .txt a{font-size: 16px; color:#292929}
.af_notice .notice_tb ul li:first-child .txt a{display:block; overflow:hidden; width:60%; text-overflow:ellipsis; white-space:nowrap}
.af_notice .notice_tb ul li:first-child:hover .txt a{color:#000}
.af_notice .notice_tb ul li:first-child .date{position: absolute; top:53px; right:30; color:#333; font-weight: 500}
.af_notice .notice_tb li:first-child:hover .date{font-weight: 700}
/*공지 더보기*/
.content_area .conline .af_notice .more a{top:-4px}

/*방과후 설문조사*/
#after_survey{/*position: absolute; top:0; right:0;*/ min-width: 55%; width: 100%}
#after_survey .af_survey{position: relative}
.af_survey h3 span{display:block; padding:1px 40px 1px 40px; background: url(../../images/main/ico_survey.gif) no-repeat left center; line-height:130%}
/* .af_survey h3 span{padding:3px 0 3px 40px; background: url(../../images/main/ico_survey.gif) no-repeat left center} */
/*내가 참여할 설문*/
.af_survey .my_survey{position: absolute; top:-9px; right:45px; width: 245px}
.af_survey .my_survey dl{position: relative; padding: 3px 10px; border-radius: 50px; border:2px solid #f0ecec; font-size: 15px; font-weight: 500; font-family: 'Gmarket Sans'}
.af_survey .my_survey dl dt{padding: 7px 0 5px 28px; background: url(../../images/main/my_survey.gif) no-repeat left 5px}
.af_survey .my_survey dl dd{position: absolute; top:8px; right:17px}
.af_survey .my_survey dl dd a{display: inline-block; font-size:18px; font-weight: 600; color:#ff2222; text-underline-offset:3px}
.af_survey .my_survey dl dd a:hover{text-decoration: underline}
/*설문목록*/
.af_survey .survey_tb{overflow: hidden; height: 260px; font-size: 15px}
.af_survey .survey_tb ul li{position: relative; height: 78px; padding: 9px; margin-bottom: 13px; border-radius:10px; border:1px solid #e2e2e2; box-sizing: border-box; transition: all .5s}
.af_survey .survey_tb div.sv_cate span{display: inline-block; width: 65px; height: 25px; line-height: 25px; margin: 0 10px 7px 0; border-radius: 50px; background: #e9e9e9; font-weight:600; text-align: center}
.af_survey .survey_tb div.sv_cate p:last-child{margin-bottom: 0}
.af_survey .survey_tb div.sv_cate p {display:block; overflow:hidden; width:80%; text-overflow:ellipsis; white-space:nowrap}
.af_survey .survey_tb .sv_btn{position: absolute; top:11px; right:11px}
.af_survey .survey_tb .sv_btn a{display: block; width: 96px; height: 55px; border-radius: 8px; background: #e7e7e7; text-align: center; font-size: 14px; font-weight:600; transition: all .5s}
.af_survey .survey_tb .sv_btn a span{display: block; padding-top: 30px; background: url(../../images/main/btn_survey.png) no-repeat center 10px}
.af_survey .survey_tb ul li:hover{border-color:#2892d5}
.af_survey .survey_tb ul li:hover div.sv_cate p:first-child span{background: #5cabdd; color:#fff}
.af_survey .survey_tb ul li:hover div.sv_cate p:first-child{font-weight: 600}
.af_survey .survey_tb ul li:hover a{background: #2892d5; color:#fff}
.af_survey .survey_tb ul li:hover a span{background: url(../../images/main/btn_survey_a.png) no-repeat center 10px}
/*설문조사 더보기*/
.content_area .conline .af_survey .more a{top:-4px}

/*유동적 컨텐츠 (앨범,부서별홈페이지는 학교별로 노출상이함)*/
/*활동모습*/
#after_album .af_album {position: relative}
#after_album .af_album h3 span{display:block; padding:1px 40px 1px 40px; background: url(../../images/main/ico_album.gif) no-repeat left 0; line-height:130%}
/* #after_album .af_album h3 span{padding:5px 0 2px 40px; background: url(../../images/main/ico_album.gif) no-repeat left center} */
/*앨범 내용*/
.af_album .photo_area {overflow:hidden; position: relative; padding:25px 0 10px; border-top:1px solid #ebebeb; border-bottom:2px solid #ebebeb}
.af_album .photo_item {float:left; width:248px; margin: 0 auto; padding:0}
.af_album .photo_item .photo_box {width:248px; margin:0 auto; }
.af_album .photo_item .photo{position: relative; overflow: hidden; width: 248px; height: 157px; margin: 0 auto; border-radius:5px; background:url(../images/main/none_img.png) no-repeat center center #d9d9d9; box-shadow:0 2px 3px rgba(0, 0, 0, 0.1)} 
.af_album .photo_item .photo img{width: 248px; height: 157px; border-radius:5px; background: #fff}
.af_album .photo_item .tit a{display:block; overflow: hidden; height:43px; line-height: 43px;  margin: 0 auto; font-size:14px; color:#000; font-weight: 500; text-align:center; text-overflow:ellipsis; white-space:nowrap}
.af_album .photo_item .tit:hover a, .af_album .photo_item:hover .tit a{color:#000; font-weight: 700}
.af_album .photo_item .photo a::after{content: ""; display: block; clear: both; position:absolute; left:0; bottom:100%; width:100%; height:100%; background:rgba(0,0,0,0.6) url(../../images/main/ico_view.png) no-repeat 50% 50%; transition:all .8s}
.af_album .photo_box:hover .photo a::after{bottom:0}
.af_album .photo_item .photo a:focus img,
.af_album .photo_item .photo a:active img{display:block; width: 248px; height: 157px; border:2px solid #000; box-sizing:border-box}
/*앨범_버튼*/
.af_album .album_btnbx{position: absolute; top:-6px; right:45px}
.af_album .btns li {float: left; margin-left: 10px}
.af_album .btns li button{display: block; width: 35px; height: 35px; padding: 13px 0; border-radius: 50%; background: #f2f2f2; text-align: center; transition: all .3s; box-sizing: border-box; cursor: pointer}
.af_album .btns li button:hover{background: #ccc}
/*비공개 게시물*/
.af_album .secret_post .photo_box .photo{position: relative}
.af_album .secret_post .photo_box a{pointer-events: none}
.af_album .secret_post .photo_box .photo img{filter: blur(11px)}
.af_album .secret_post .photo_box .photo::after{content: ""; display: block; clear: both; position:absolute; left:0; bottom:0; width:100%; height:100%; background:rgba(255,255,255,0.2) url(../../images/main/secret_img.png) no-repeat 50% 50%; transition:all .8s}
.af_album .secret_post .photo_item .photo a::after{display: none !important}
/*앨범 더보기*/
.content_area .conline .af_album .more a{top:-6px}

/*부서별홈페이지*/
#after_depart .af_depart {position: relative; margin: 60px 0 0}
#after_depart .af_depart h3 span{display:block; padding:3px 40px 1px 40px; background: url(../../images/main/ico_depart.gif) no-repeat left 2px; line-height:130%}
/*부서별홈페이지 내용*/
.af_depart .depart_area {overflow:hidden; position: relative; min-height:172px; padding:25px 0 18px; border-top:1px solid #ebebeb; z-index:1}
.af_depart .depart_area::after{display: block; content: ''; clear: both; position: absolute; bottom:0; left:0; width: 100%; height: 80px; background: #f2f2f2; border-radius: 40px 40px 10px 10px; z-index: 1}
.af_depart .depart_area .depart_lst{position: relative; overflow: hidden; margin:0 70px; z-index: 100}
.af_depart .depart_area .depart_lst::after{display: block; content: ''; clear: both}
.af_depart .depart_item {float:left; margin: 0 auto; margin:0 15px}
.af_depart .depart_item .depart_box {margin:0 auto; text-align: center}
.af_depart .depart_item .depart a{display: block; position: relative; overflow: hidden; width: 115px; height: 115px; margin: 0 auto 10px; border-radius:50%; border:2px solid #e9e9e9; background:#fff; box-shadow:0 2px 3px rgba(0, 0, 0, 0.1); transition: all .5s} 
.af_depart .depart_item .depart img{width: 80px; height: 80px; padding: 18px 0}
.af_depart .depart_item .tit a{display:block; height:43px; line-height: 150%;  margin: 0 auto; font-size:13px; color:#232323; font-weight: 500; align-content: space-around; transition: all .5s}
.af_depart .depart_item .tit a strong{display:block; font-size:14px}
.af_depart .depart_item .depart_box:hover .depart a{border-color:#777f8b; animation:effect 3s ease infinite}
.af_depart .depart_item .depart_box:hover .tit a, .af_depart .depart_item:hover .tit a{color:#000; font-weight: 700}
/*부서별홈페이지_버튼*/
.af_depart .depart_btnbx{position: relative; z-index: 10}
.af_depart .btns li {position: absolute; bottom:15px; right:18px}
.af_depart .btns li.depart_left{left:18px}
.af_depart .btns li button{display: block; width: 45px; height: 45px; padding: 17px 0; border-radius: 50%; background: #fff; text-align: center; transition: all .3s; box-sizing: border-box; cursor: pointer; box-shadow:0 2px 2px rgba(0, 0, 0, 0.1)}
.af_depart .btns li button:hover{background: #ccc}
/*부서별홈페이지 더보기*/
.content_area .conline .af_depart .more a{top:-6px}


/********************풋터********************/
#footwrap{position: absolute; bottom:0; left:0; width: 100%; height: 120px; background: url(../../images/main/ft_logo.gif) no-repeat right 40px center #36383c; font-family: 'Gmarket Sans'}
#footwrap .footer_wrap{margin-left: 265px; padding:40px 0 0 28px; color:#fff; line-height: 120%}
#footwrap .footer_wrap .copy{margin-top: 10px}
#footwrap .footer_wrap .copy, #footwrap .footer_wrap .copy a{color:#979797}


/*======================== MOBILE LAYOUT ========================*/
@media only screen and (max-width:1199px) {
/*방과후상단(fix)*/
.top_titbx{height: 40px}
/*방과후이름*/
.top_titbx h1.aft_name{min-width: 320px; margin-left:0}
.top_titbx h1.aft_name a{padding:0; line-height: 40px; font-size:18px; text-align: center}
.top_titbx h1.aft_name a::after{display: none}

/*학교이름(fix)*/
.header_wrap .sch_name{width:100%; min-width: 320px; height: 37px; padding-top: 15px; margin-top: 40px; line-height:160%; background: #fff; border-bottom: 1px solid #e7e7e7; font-size: 16px; box-shadow:none}

/*상단버튼-MB용*/
.top_titbx{min-width: 320px; z-index:1000}
.top_titbx .top_btn{position: absolute; top:52px; right:17px}
.top_titbx .top_btn > p{float:none}
.top_titbx .top_btn p.btn_logout a{display: block; min-width: 65px; padding: 8px 6px 7px; background: #77868d; color:#fff; border-radius: 50px; text-align: center; box-sizing: border-box; font-size: 12px; box-shadow:none}
.top_titbx .top_btn p.btn_logout a span{display: block; padding:0; background:none}
.top_titbx .top_btn p.btn_logout a:hover{background:#364045; color:#fff}
.top_titbx .top_btn p.btn_logout a:hover span{background:none}

/*학교홈, 늘봄홈, 관리자홈*/
.top_titbx .top_btn p.btn_schome a,
.top_titbx .top_btn p.btn_afterhome a,
.top_titbx .top_btn p.btn_adminhome a{display:none}

/*모바일 버튼*/
.top_mubx .top_menu{display: block; position: fixed; width: 100%; min-width: 320px; z-index: 1000}
.top_menu > p{position: absolute; top:52px; z-index: 1000}
.top_menu > p.loginbtn{right:12px}
.top_menu > p.allbtn{left:12px}
.top_menu > p a{display: block; min-width: 65px; padding:7px 6px 6px; border-radius: 50px; text-align: center; box-sizing: border-box; font-size: 12px}
.top_menu > p.loginbtn a{padding: 8px 6px 7px; background: #ffd43e}
.top_menu > p.allbtn a{border:1px solid #dadada}
.top_menu > p.allbtn a span{display: inline-block; padding-left: 15px; background:url(../../images/main/ico_mu.gif) no-repeat left 1px}
    
/**로그인영역**/
.fix_header.header_wrap .fix_wrap{min-width: 320px}
/*닫기버튼*/
.fix_header .allbtn_close{display: block}
.fix_header .allbtn_close a{display: block; padding: 10px; background: #4c5460; border-radius: 0 0 20px 20px; text-align: center; font-size: 14px; color:#fff}
.fix_header .allbtn_close a span{padding-left: 18px; background:url(../../images/main/ico_close.png) no-repeat left 1px}
/*버튼스타잍*/
.login_box .logtab{top:45px}
.login_box .logtab a{padding: 5px 0; width:85%; height: auto; margin: 0 auto}
.login_box .logtab.logtab02 a{float: none}
/*로그인 정보 입력*/
.login_box .logmid_box{padding: 65px 0 0}

/*모바일 메뉴*/
.header_wrap .fix_header{position: relative; display: none; z-index: 1000}
.header_wrap .fix_wrap{position: fixed; left: 0; top:0; width: 100%; min-width: 280px; height: 100%; background:#fff; z-index: 10; box-shadow:0 5px 5px rgba(0, 0, 0, 0.1)}
    
/*메인컨텐츠*/
#content{padding: 93px 0 87px; margin: 0 15px}
.content_area{margin:15px 0}

/*풋터*/
#footwrap{height: auto; background-image: none}
#footwrap .footer_wrap{margin-left:0; padding: 15px; text-align: center}
}


/*======================== PC LAYOUT ========================*/
@media only screen and (min-width:1690px) {

/*메인컨텐츠*/
.content_area{margin: 35px 130px}   
}

/*======================== LOWSET FIX ========================*/
@media only screen and (min-width:1200px) and (max-width:1689px){
/*방과후이름*/
.top_titbx h1.aft_name{margin-left: 230px}
/*학교이름(fix)*/
.header_wrap .sch_name{width: 230px}
/*왼쪽메뉴(fix)*/
.header_wrap .fix_header{width: 230px}
.header_wrap .fix_wrap{width: 230px}
/*로그인 하단버튼*/
.logfoot_btn > p a{font-size:13px}
.logfoot_btn > p a span{padding-left:20px}
/*로그인 정보 입력*/
.login_box input::placeholder{font-size: 12px; letter-spacing:-0.6px}

/*메인컨텐츠*/
#content{margin: 0 0 0 230px}
.header_wrap .fix_wrap .gnb_list > li > a{padding:17px 12px; font-size:16px; letter-spacing:-0.3px}
/*로그인 후 스타일*/
.login_box .mem_view .login_bx{padding:15px 0}
.login_box .mem_view .name{font-size: 14px}
.login_box .mem_view .name span{font-size: 14px}
}

@media only screen and (max-width:1000px) {
/*수강신청알림*/
.request_time{margin-bottom: 15px}
.request_time .timebx .reqtit{font-size: 17px}
.request_time .reqdate{padding: 7px}
.request_time .reqdate dt{width: 60px; height: 24px; font-size: 14px}
.request_time .reqdate dd {margin: 2px 0 0 10px; font-size:14px}
.request_time .reqdate dd br{display: none}
    
/*수강신청 유의사항*/
.request_info{display:inherit }
.request_info dt{width: 100%; margin-bottom: 10px}
.request_info dt br{display: none}
.request_info dt span{padding:0 0 0 50px}
.request_info dt span::after{top:-2px}
.request_info dd{width:100%; margin-left: 0}
.request_info dd li{background-position: left 5px; font-size: 14px}

/********************메인컨텐츠********************/
.content_area .conline .more a{width: 30px; height: 30px; padding: 7px 0}
.content_area .conline h3{margin-bottom: 20px; font-size: 16px}
    
/*고정컨텐츠*/
.content_area .conline .fix_conbx{position: relative; display:inherit; margin:30px 0}
    
/*공지사항*/
#after_notice{width:100%; margin-bottom: 30px}
/*공지목록*/
.af_notice .notice_tb ul li a{font-size:14px}
.af_notice .notice_tb p.date {top:-5px; right:20px; font-size:12px}
.af_notice .notice_tb{height: 240px}
.af_notice .notice_tb::after{height: 144px}
/*공지사항_첫번째 리스트*/
.af_notice .notice_tb ul li:first-child{height:90px}
.af_notice .notice_tb ul li:first-child::after{top:15px; left:8px; width: 65px; height:65px}
.af_notice .notice_tb ul li:first-child .tit{padding: 20px 0 5px 90px}
.af_notice .notice_tb ul li:first-child .tit a{font-size: 16px}
.af_notice .notice_tb ul li:first-child .txt{padding: 0 0 20px 90px}
.af_notice .notice_tb ul li:first-child .txt a{font-size: 16px}

/*방과후 설문조사*/
#after_survey{position:inherit; width: 100%}
/*설문목록*/
.af_survey .survey_tb{ font-size: 14px}
.af_survey .survey_tb .sv_btn a{width: 70px}

/*활동모습*/
/*앨범_버튼*/
.af_album .album_btnbx{top:-5px; right:35px}
.af_album .btns li {margin-left: 5px}
.af_album .btns li button{width: 30px; height: 30px; padding: 10px 0}
.content_area .conline .af_album .more a{top: -5px}

/*부서별홈페이지*/
#after_depart .af_depart { margin: 30px 0 0}
/*부서별홈페이지_버튼*/
.af_depart .btns li {bottom:20px; right:15px}
.af_depart .btns li.depart_left{left:15px}
.af_depart .btns li button{width: 35px; height: 35px; padding: 12px 0}
}

@media only screen and (max-width:520px) {
/*수강신청알림*/
.request_time .timebx .reqtit{background: none; padding:10px 0 15px; line-height: 150%}
.request_time .timebx .reqtit span{display: block}
.request_time .reqdate{ padding: 10px}
.request_time .reqdate dt{display: block; width:70%; margin-bottom: 10px}
.request_time .reqdate dd {margin: 2px 0 0 10px; font-size:14px}
.request_time .reqdate dd br{display: block}

/********************메인컨텐츠********************/
/*방과후 설문조사*/
#after_survey .af_survey{position: relative}
.af_survey h3 span{padding-left: 40px; background: url(../../images/main/ico_survey.gif) no-repeat left 2px}
/*내가 참여할 설문*/
.af_survey .my_survey{position: inherit; top:0; right:0; width: 100%; margin-bottom: 10px}
/*설문목록*/
.af_survey .survey_tb{height: 117px}
.af_survey .survey_tb ul li{height: auto}
.af_survey .survey_tb div.sv_cate p {width:95%}
.af_survey .survey_tb .sv_btn{position: inherit; top:0; right:0}
.af_survey .survey_tb .sv_btn a{width: 100%; height: 33px; line-height: 33px}
.af_survey .survey_tb .sv_btn a span, .af_survey .survey_tb ul li:hover a span{display:inline-block; padding:0 30px 0 0; background-position: right center}
/*설문조사 더보기*/
.content_area .conline .af_survey .more a{top:-8px}
}

/*25.01.24 수강신청 알림 리스트 추가*/
.request_timebx{padding: 3px; margin-bottom: 25px; border-radius: 5px; background:#f1f1f1; font-family: 'Gmarket Sans'; text-align: center}
.request_timebx .reqtit{display: inline-block; padding: 10px 10px 15px 35px; background: url(../../images/main/ico_reqtit.gif) no-repeat left 6px; font-size: 18px; font-weight: 600}
.request_timebx .time_line{padding: 10px; border-radius: 3px; background: #fff}
.request_timebx .time_line > ul{display: flex; gap:10px; justify-content: space-between}
.request_timebx .time_line > ul > li{flex: 1; width: 33.3%; border:2px solid #65b3ee; border-radius: 5px; box-sizing: border-box}
.use_period{padding: 10px; text-align: center; box-sizing: border-box}
.use_period .period_tit{display: inline-block; margin-bottom: 15px; padding: 5px 0 0 0; font-size: 18px; font-weight: 600; line-height: 140%}
.use_period .period_tit span{color:#3984bd}
.use_period .period_time{display: flex; flex-wrap:wrap; justify-content:center; padding: 5px; margin-bottom: 10px; background: #3984bd; border-radius: 5px; font-weight: 600}
.use_period .period_time dt{width: 80px; height: 23px; line-height: 26px; border-radius: 50px; margin: 5px 0; background: #fff; font-size: 14px; font-weight: 500}
.use_period .period_time dd {margin: 5px 0 5px 10px; align-content: space-around; font-size:15px; color:#fff; letter-spacing: 1px}
.use_period .period_time dd span{color:#fff; font-weight: 500}
.use_period .period_time dd br{display: none}
.request_timebx ul > li:nth-child(2) {border-color: #ffc445}
.request_timebx ul > li:nth-child(2) .use_period .period_tit span{color:#ff9f37}
.request_timebx ul > li:nth-child(2) .use_period .period_time{background: #ff9f37}
.request_timebx ul > li:nth-child(3) {border-color: #e397ff}
.request_timebx ul > li:nth-child(3) .use_period .period_tit span{color:#b751dc}
.request_timebx ul > li:nth-child(3) .use_period .period_time{background: #b751dc}
.request_timebx .period_go a{position: relative; display: block; width:300px; margin:0 auto; padding: 10px; border-radius: 50px; background: #d7ebfa; text-align: left; font-size: 15px; box-sizing:border-box; transition: all .3s}
.request_timebx .period_go a::after{display: block; content: 'GO'; clear: both; position: absolute; top:5px; right:5px; width: 50px; padding: 7px 0 3px; border-radius: 50px; background: #3984bd; color:#fff; text-align: center}
.request_timebx .period_go a:hover{background:#3984bd; color:#fff}
.request_timebx .period_go a:hover::after{background: #fff; color:#000}
.request_timebx ul > li:nth-child(2) .period_go a{background:#ffe5ad}
.request_timebx ul > li:nth-child(2) .period_go a::after{background: #ff9f37}
.request_timebx ul > li:nth-child(2) .period_go a:hover{background:#ff9f37; color:#fff}
.request_timebx ul > li:nth-child(2) .period_go a:hover::after{background: #fff; color:#000}
.request_timebx ul > li:nth-child(3) .period_go a{background:#f4d7ff}
.request_timebx ul > li:nth-child(3) .period_go a::after{background: #b751dc}
.request_timebx ul > li:nth-child(3) a:hover{background:#b751dc; color:#fff}
.request_timebx ul > li:nth-child(3) .period_go a:hover::after{background: #fff; color:#000}
/*수강신청 기간이 아닐 때*/
.request_timebx.not_period{display:none}

@media only screen and (max-width:1720px) {
.request_timebx .reqtit{font-size: 17px}
.use_period{padding: 8px}
.use_period .period_tit{margin-bottom: 10px; font-size: 16px; letter-spacing: -0.5px}
.use_period .period_time dd {font-size:14px}
}
@media only screen and (max-width:1360px) {
.request_timebx .time_line > ul{display:inherit}
.request_timebx .time_line > ul > li{width: 100%; margin-bottom: 10px} 
.request_timebx .time_line > ul > li:last-child{margin-bottom: 0}
}
@media only screen and (max-width:550px) {
.request_timebx .period_go a{width:100%}
}