@charset "utf-8";

@media screen and (max-width: 1120px) {
	html{font-size: 12px}
	header .header_wrap{flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0; padding:10px}
	header h1.logo{order: 1; margin: 0; flex-shrink: 0; width: 85px; height: 30px}
	header .topmenu_set{order: 3; margin-left: auto; display: flex; align-items: center; flex-shrink: 0; gap: 10px}
	header .search_set{order: 4; width: 100%; flex: none; margin-top: 10px}
	main, #customer_set, #sub_banner{padding:0 10px}
}

/*메뉴*/
@media screen and (max-width: 1120px){
	nav.gnb{order: 2; padding: 0 0 0 6px; flex-shrink: 0}
	nav.gnb .sub_menu_wrap{height:100vh; height:100dvh; position: fixed; top:0; border:0; border-radius: 0; z-index: 200}
	nav.gnb .sub_menu_step1{max-height:100vh; max-height:100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none}
	nav.gnb .sub_menu_step1::-webkit-scrollbar{display: none}
	nav.gnb .sub_menu_step2{display: flex; flex-direction: column; height: 100vh; height: 100dvh}
	nav.gnb .sub_menu_step2 .sub_menu_step2_list_padd{flex: 1; overflow: hidden; display: flex; flex-direction: column}
	nav.gnb .sub_menu_step2 ul.sub_menu_step2_list{flex: 1; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none}
    nav.gnb .sub_menu_step2 ul.sub_menu_step2_list::-webkit-scrollbar{display: none}
	nav.gnb .bblank{width: 100%; height: 100vh; height: 100dvh; display: none; position: fixed; top: 0; left: 0; background: rgba(0,0,0,.4); z-index: 11}
    nav.gnb .bblank.on{display: block}
	#sub_banner{height:150px; margin:120px 0 0 0}
}

/*알림*/
@media screen and (max-width: 1120px){header .bell_set {flex-shrink: 0; white-space: nowrap}}
@media screen and (max-width: 600px){header .bell_set {display: none}}

/*로그인*/
@media screen and (max-width: 1120px){header .login_set .mem_info{top:45px}}

/*신규강좌*/
@media screen and (max-width: 800px){
	main .count_set{gap:10px}
	main .count_set .count_title{font-size: 0.85rem}
	main .count_set .count_badge{height:40px; font-size: 1.2rem}
	main .count_set .count_badge > em{padding:0 0 0 3px}
	main .count_set .count_badge.left{width:100%; border-radius: var(--box-radius) var(--box-radius) 0 0; justify-content: center; padding:0}
	main .count_set .count_badge.right{width:100%; border-radius: 0 0 var(--box-radius) var(--box-radius); justify-content: center; padding:0}
}

/*추천강좌 시리즈*/
@media screen and (max-width: 800px){main .recseries_set ul.recseries_list{grid-template-columns: repeat(1, 1fr)}}

/*고객센터*/
@media screen and (max-width: 800px){
	#customer_set .customer_center{display: block}
	#customer_set .customer_center ul.customer_center_time{padding:0}
	#customer_set .bank{display: block; flex:1; border-left:var(--border); margin:0 0 0 10px}
	#customer_set .bank ul.bank_name{padding:0}
}

/*카피라이트*/
@media screen and (max-width: 800px){
	footer .family_site{display: none}
	footer .copyright span{font-size: 0.85rem; }
}

/*자유이용권*/
@media screen and (max-width: 940px){
	main .freepass_set{justify-content: space-between}
	main .freepass_set .freepass_title_wrap{display: none}
	main .freepass_set .freepass_6m, main .freepass_set .freepass_24m{margin:0}
}
@media screen and (max-width: 666px){
	main .freepass_set{flex-wrap: wrap; gap:10px}
	main .freepass_set .freepass_box{width:100%; height:auto; border-radius: var(--box-radius); padding:20px}
	main .freepass_set .freepass_3m{background: url(../images/freepass_3m_mobile.jpg) no-repeat}
	main .freepass_set .freepass_6m{background: url(../images/freepass_6m_mobile.jpg) no-repeat}
	main .freepass_set .freepass_12m{background: url(../images/freepass_12m_mobile.jpg) no-repeat}
	main .freepass_set .freepass_24m{background: url(../images/freepass_24m_mobile.jpg) no-repeat}
}

/*서브배너*/
@media screen and (max-width: 940px){
	#sub_banner{display: none}
	header{position: relative; height:90px}
}