#wrap{width:100%; max-width:64rem; margin:0 auto; overflow:hidden;}
header, main, footer, .foot_m_list{width: 100%; max-width:64rem;}
body.noscroll{background:rgba(0,0,0,0.5);}
body.noscroll::after{position:fixed; top:0; left:0; right:0; bottom:0px;}

main{background:#fff;}

/* Login */
.login_wrap{height:100vh;}
.login_logo_area{background-color:#eee; display: flex; justify-content: center; align-items: center; color:#fff; font-size:4rem; font-weight:500; height:30rem;}
.login_logo_area > img{max-width:20rem;}

.login_wrap .writeform{padding:2rem;}
.login_wrap .writeform > .form_box .t{font-size:1.5rem; font-weight: 500;}
.login_wrap .writeform > .form_box:not(:first-child){margin-top:2.5rem;}
.login_wrap .writeform > .email{display:none;}
.login_wrap .writeform > .email > input{width:calc(100% - 97px);}
.login_wrap .writeform > .sms > select{padding-right:30px;}
.login_wrap .writeform > .userId > input{width:calc(100% - 97px); max-width:300px;}
.login_wrap .writeform > .sms > input{width:calc(100% - 97px);}

.agree_login{padding-top:1.5rem;}
.agree_login > .setting_list > li:first-of-type{border-top: 1px solid #c4c4c4;}
.agree_login > .setting_list > li:last-of-type{border-bottom: 0px;}

.reUserPw{margin-top:0.5rem;}

.loginBtnArea{display:flex; justify-content:space-between; margin-top:1rem;}
.loginBtnArea > a{width:calc((100% - 5px) / 2);}
.loginBtnArea > a + a{margin-left:5px;}

.form_box.btn_list{text-align:center; margin-top:1.5rem !important;}
.form_box.btn_list > ul > li{display:inline-block; font-weight:500;}
.form_box.btn_list > ul > li + li:before{content:''; display:inline-block; background:#ccc; width:1px; height:10px; margin:0 10px;}

/* header */
header{position:fixed; box-shadow: 0px 2px 2px rgba(204, 204, 204, 0.5); z-index: 3;}
header > .header{padding:0 15px; background:#fff;}
.header > .main{height:6rem; display:flex; align-items: center; justify-content:space-between;}
.header > .main > .logo{height: 50%;}
.header > .main > .logo > a{font-size:20px; font-weight:500; display:inline-block; height: 100%;}
.header > .main > .logo > a > img{height:100%; object-fit: contain;}
.header > .sub > .logo{height: 50%;}
.header > .sub > .logo > a{font-size:20px; font-weight:500; display:inline-block; height: 100%;}
.header > .sub > .logo > a > img{height:100%; object-fit: contain;}
.header .menu_btn{width:30px; height:30px;}
.header .menu_btn > .fontIcons.google{font-size:3rem; font-weight: 300;}
.header .back_btn{width:40px; height:40px;}
.header .back_btn > .fontIcons.google{font-size:4rem; font-weight: 300;}

.header > .sub{height:6rem; display:flex; align-items: center; justify-content: space-between; font-size:2rem;}


/* top_navi */
.topNavi{width:100%; max-height:calc(100% - 6rem); overflow-y: auto; position:fixed; top:6rem; background:#fff; max-width:64rem; box-shadow: 0px 2px 2px rgba(204, 204, 204, 0.5); display:none; z-index: 3;}
.topNavi > .user_info{text-align: center; padding:0 1.5rem 3rem;}
.topNavi > .user_info .user_photo{ width:120px; height:120px; border-radius: 50%; overflow:hidden; margin:0 auto;}
.topNavi > .user_info .user_photo > img{width:100%; height:100%; object-fit: cover;}
.topNavi > .user_info .uName{font-size:2rem; font-weight:600; margin-top:2rem;}
.topNavi > .user_info ul{display:flex; align-items: center; justify-content: center; margin-top:1rem;}
.topNavi > .user_info ul li > button,
.topNavi > .user_info ul li > a{font-size:1.5rem;}
.topNavi > .user_info ul > li + li:before{content:''; display:inline-block; margin:0 10px; width:1px; height: 10px; background:#999;}

.topNavi > .navi li > a{width:100%; font-size:1.5rem; padding:1rem 1.5rem; display: inline-block;}
.topNavi > .navi li + li{border-top:1px solid #ccc;}

.login_notice{text-align:left; font-size:2rem; font-weight:600; margin-top:2rem;}
.login_btn{width:100%; margin-top:1rem; display:inline-block;}

/* foot_m_list */
.pop_bg{background:rgba(0,0,0,0.5); position:fixed; top:0; bottom:0; right:0; left:0; display:none; z-index: -1;}
.pop_bg.on{display:inline-block;}

.foot_m_list{position:fixed; bottom:0px; z-index: 3; background:#fff;}
.foot_menu_list{display:flex; justify-content: space-between; width:100%; height: 100%; align-items: center; background:#fff; box-shadow: 0px -2px 2px rgba(204, 204, 204, 0.5); height:6rem; position:relative; z-index:2;}
.foot_menu_list li{width:calc(100% / 5); text-align: center;}
.foot_menu_list li > button,
.foot_menu_list li > a{display:inline-block;}
.foot_menu_list li > button > .fontIcons.google,
.foot_menu_list li > a > .fontIcons.google{font-size:2.5rem; font-weight: 400;}
.foot_menu_list li > button > p,
.foot_menu_list li > a > p{font-size:1.2rem; font-weight: 500;}
.foot_menu_list li > button:hover,
.foot_menu_list li > a:hover{color:var(--mainColor);}

.top_btn_area li > button,
.top_btn_area li > a{display:inline-block; width:100%; height:100%;}

.top_btn_area li:hover > button,
.top_btn_area li:hover > a{color:var(--mainColor);}
.top_btn_area li:not(:first-child){margin-left:5px;}

.foot_m_list > .btn_list{width:100%; height:6rem; padding:1rem; box-shadow: 0px -2px 2px rgba(204, 204, 204, 0.5);}
.foot_m_list > .btn_list > button{width:100%; height:100%; display:inline-block; font-size:1.7rem;}

/* contentArea */
.conArea{padding:6rem 0 23.3rem; position:relative; min-height:100vh;}
.conArea section{background:#efefef;}
.conArea section .con_wrap{padding:1.5rem; background:#fff;}
.conArea section .con_wrap > h2{margin-bottom:1.5rem;}
.conArea section .org_wrap {display:flex;flex-direction: column;gap:4rem 0;}
.conArea section:not(:first-of-type){padding-top:10px;}

.con_wrap > .con_top{display:flex; justify-content: space-between; align-items: center; padding-bottom:1rem;}
.con_wrap > .con_top .con_eq{font-weight:600;}
.con_wrap > .con_top > select{border:none; height: auto; background-position: right -142px top -174px; padding-right:22px; text-align: right;}
.con_wrap > .con_top > select:hover{background-position: right -142px top -200px;}

/* footer */
footer{position:absolute; bottom:6rem;}
.foot_wrap{padding:1.5rem; text-align:center; font-size:13px; font-weight:600; color:#999; background:#efefef;}

.foot_btn{display:flex; justify-content: center; margin-bottom:2rem;} 
.foot_btn > li{width:150px; color:#111; font-weight: 500;}
.foot_btn > li > a:hover{font-weight:600;}
.foot_btn > li:not(:last-child){border-right:1px solid #ccc;}

.foot_info_list{margin-bottom:2rem;}
.foot_info_list > li{width:100%; margin-bottom:0.5rem; color:#111;}
.foot_info_list > li > span:not(:last-child){padding-right:10px; margin-right:10px; border-right:1px solid #999;}
.foot_info_list > li > span:not(b){font-weight: 500;}


/* searchbox */
.search_wrap{padding:1.5rem 1.5rem 7.5rem; position:absolute; bottom:0; background:#cccccc; width:100%; z-index: 1; border:1px solid #dfe2ed; border-radius: 10px 10px 0; display:none;}
.serarch_box{display:flex;}
.serarch_box > input{width:calc(100% - 46px); border-right:0px; border-radius: 10px 0 0 10px; box-sizing: border-box;}
.serarch_box > button{border:1px solid var(--subColor); color:#fff; background:var(--subColor); padding:0 1rem; border-radius: 0 10px 10px 0;}

/* 팝업 폼 */
.mform_box.ckform{display:flex; align-items: center; margin-bottom:15px;}
.mform_box.ckform input{width:80%;}
.mform_box.ckform a{font-weight: 500; text-decoration: underline; width:20%; text-align: center; display: inline-block;}
.swal2-html-container > p{color:#999999;}

/* quick_menu */
.quick_menu{position:absolute; bottom:70px; right:10px; display:none;}
.quick_menu > li{background:#fff; width:5rem; height:5rem; border-radius: 50%; box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.5);}
.quick_menu > li > a{display:inline-block; width:100%; height:100%; text-align: center;}
.quick_menu > li > a > .fontIcons.google{height:20px; margin-top:4px;}
.quick_menu > li > a > p{margin-top:-5px; font-size:13px; font-weight:500;}

/* modal */
.modal_wrap{position:fixed; left:0; right:0; top:0; bottom:0; z-index:999999; overflow-y:auto; display:none;}
.modal_wrap > .modal{width: 100%; min-height:100%; max-width: 64rem; margin: 0 auto; overflow: hidden;}
.modal_wrap > .modal > .header{
	box-shadow: 0px 2px 2px rgba(204, 204, 204, 0.5); 
	padding:0 15px; 
	background:#fff; 
	position:fixed; 
	width: 100%; 
	max-width: 64rem; 
	margin: 0 auto; 
	height:6rem;
	display:flex; align-items: center; font-size:2rem; justify-content:center;
	z-index:2;
	}
.modal_wrap > .modal > .header > .modal_close{position:absolute; right:15px; top:50%; transform:translateY(-50%);}

.modal_wrap > .modal > .conArea{min-height: var(--vh); padding:6rem 0 0 0 !important; background:#fff;}



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////  */
/* membership css */

/* Login */
.membership .login_wrap{display:flex; justify-content: center; align-items: center;}
.membership .login_wrap .loginArea{padding:3rem; width:100%;}
.membership .login_logo_area{background:#fff; text-align: center; display:block; margin:0 auto; height:auto; margin-bottom:5rem;}
.membership .login_logo_area .s_tit{color:#8b8b8b; font-size:2.5rem; letter-spacing: 0.5rem;}
.membership .login_logo_area .m_tit{color:#101010; font-weight:700; font-size:5rem; letter-spacing: 1rem; font-family:'Poppins';}

.membership .writeform.login{border-top:1.5px solid #101010; padding:0px;}
.membership .writeform.login > .form_box{margin:0px !important;}
.membership .writeform.login > .form_box > input{border:0px; margin:1rem 0;}
.membership .writeform.login > .form_box:not(:first-child){border-top:1px solid #ccc;}

/* header */
.membership header{box-shadow: none;}
.membership header .back_btn{color:#fff; width:3rem; height:3rem;}
.membership header .back_btn > .fontIcons.google{font-size:3rem;}
.membership .headWrap{height:6rem; display:flex; background:#000; justify-content: space-between; align-items: center; padding:0 2rem; color:#fff;}
.membership .headWrap > h1{max-width:100px; height:4.1rem;}
.membership .headWrap > h1 > a{display:inline-block; height:4.1rem;}
.membership .headWrap > h1 > a > img{object-fit: cover; width:100%;}
.membership .headWrap .user_icon{position:relative; width:3rem; height:3rem; display:inline-block;}
.membership .headWrap .user_icon::after{content:'\ea2a'; font-family: 'xeicon'; display:inline-block; color:#fff; font-size:3rem;}

.membership .headWrap .userSch_sch{position:relative; width:3rem; height:3rem; display:inline-block; margin-left: 1rem;}
.membership .headWrap .userSch_sch::after{content:'\e97a'; font-family: 'xeicon'; display:inline-block; color:#fff; font-size:3rem;}

.membership .headWrap .navBtn{width:3rem; height:100%; font-size:3rem; display:flex; align-items:center; justify-content:center;}


/* popNavi */
.membership .userIcon_area{position:relative; height:100%; display: flex; align-items: center;}
.membership .userIcon_area .menu_list.on{display:inline-block;}
.membership .userIcon_area .menu_list{display:none; position:absolute; background:#fff; color:#101010; border-radius: 0.5rem; right:3.5rem; bottom:-65px; box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.3);}
.membership .userIcon_area .menu_list::after{content:''; display:inline-block; border:10px solid transparent; border-bottom-color:#fff; position:absolute; top:-20px; right:10px;}
.membership .userIcon_area .menu_list > li{padding:0.5rem 1rem; text-align: center;}
.membership .userIcon_area .menu_list > li + li{border-top:1px solid #ccc;}
.membership .userIcon_area .menu_list > li > a{font-weight:500;}

/* content */
.membership .conArea section{background:#fff; padding:0px; text-align: left;}
.membership .con_wrap > h2{font-size:3rem;}
.membership .con_wrap > .txt{font-size:1.5rem;}

.membership .conArea{padding-bottom:0px; width:100%; display:inline-block;}
.membership .conArea.useBtn{padding-bottom:6rem;}

.membership .foot_btn_list{max-width: 64rem; position:fixed; bottom:0px; z-index: 3; background:#fff; width:100%; display:flex; justify-content: space-between; padding:1rem; height:6rem; box-shadow: 0px -2px 2px rgb(204 204 204 / 50%);} 
.membership .foot_btn_list > button{border-radius: 0px;}
.membership .foot_btn_list > button:first-child{width:100%;}

.pagination_wrap{max-width: 64rem; position:relative;}
.pagination{
	position: absolute;
    top: 65px;
    bottom: auto !important;
    z-index: 2;
    left: auto !important;
    right: 1rem;
    display: inline;
    width: auto !important;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 10px;
}



/* nav */
.modalNavWrap{visibility: hidden; transition: all 0.5s; position:fixed; top:0; bottom:0; width:100%; max-width: 64rem; z-index:10; overflow:hidden;}
.modalNavWrap.view{visibility: visible; transition: all 0.5s;}
.modalNavWrap.view > .header,
.modalNavWrap.view > .con{transform:translateX(0%); transition: transform 0.5s;}
.modalNavWrap > .header{background:#fff; padding:15px; width:80%; float:right; transform:translateX(100%); transition: transform 0.5s;}
.modalNavWrap > .header > .top{display:flex; justify-content:space-between;}
.modalNavWrap > .header > .top > .userInfo{display:flex; align-items:center; gap:5px;}
.modalNavWrap > .header > .top > .userInfo > .user_icon {width:5rem; height:5rem; display:inline-block;}
.modalNavWrap > .header > .top > .userInfo > .user_icon::after{content: "\e9f2"; font-family: 'xeicon'; display:inline-block; color:#ddd; font-size:5rem;}
.modalNavWrap > .header > .top > .userInfo > .text > .name{font-size:18px; font-weight:800;}
.modalNavWrap > .header > .top > .userInfo > .text > .position{font-size:13px; color:#bbb; margin-top:2px;}
.modalNavWrap > .header > .top > .navClose{font-size:2.5rem; font-weight:600;}

.modalNavWrap > .header > .bottom{margin-top:1rem; display:flex; justify-content:center; gap:5px;}

.modalNavWrap > .con{background:#eee; padding:15px 20px; overflow-Y:auto; height:calc(100dvh - 12.2rem); width:80%; float:right; transform:translateX(100%); transition: transform 0.5s;}
.modalNavWrap > .con > ul > li > a{display:inline-block; width:100%; padding:10px 0; font-size:1.5rem; font-weight:600;}