#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;}

/* 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:15rem;}

.login_wrap.type2{width:100%; max-width:500px;}
.login_wrap.type2 > .login_logo_area{background-color:#fff; height:auto; margin-bottom:3rem; display:inline-block; width:100%; text-align:center;}
.login_wrap.type2 > .login_logo_area > img{width: 80%; max-width: 30rem;}
.login_wrap.type2 .btnArea{padding:0 2rem;}
.login_wrap.type2 .writeform > .form_box:not(:first-child){margin-top:1rem;}
.login_wrap.type2 .notice{padding:0 2rem; margin-top:2rem; font-size:1.4rem; font-weight:600; color:#cc3333; text-align:center;}

.writeform{padding:2rem; background:#fff;}
.writeform > .form_box .t{font-size:1.5rem; font-weight: 500;}
.writeform > .form_box:not(:first-child){margin-top:2.5rem;}
.writeform > .email{display:none;}
.writeform > .email > input{width:calc(100% - 97px);}
.writeform > .sms > select{padding-right:30px;}
.writeform > .userId > input{width:calc(100% - 97px); max-width:300px;}
.writeform > .sms > input{width:calc(100% - 97px);}

.agree_login{padding-top:1.5rem; background:#fff;}
.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;}

.nvLogin{background:#1fc800; color:#fff !important; display:flex; align-items:center; justify-content:center;}
.nvLogin > i{font-size:16px !important;}
.kaLogin{background:#ffeb00; color:#37181f !important; display:flex; align-items:center; justify-content:center;}
.kaLogin > i{font-size:20px !important;}

.loginBtnArea{display:flex; justify-content:space-between; margin-top:1rem;}
.loginBtnArea > a{width:calc((100% - 5px) / 2);}
.loginBtnArea > a + a{margin-left:5px;}

.loginBtnArea.type2 > a{width:100%;}

.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;}

.form_box.flex_btn{display:flex; justify-content:space-between;}
.form_box.flex_btn.cols2 > input{width:calc((100% / 2) - 5px);}

/* 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-top:6rem; 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: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;}

.conArea.type2{padding-top:0px; padding-bottom:0px !important; display:flex; align-items:center; justify-content:center;}

/* 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.view{display:inline-block;}
.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;}


/* noticePop */
.noticePop_wrap.view{display:flex;}
.noticePop_wrap{position:fixed; left:0; right:0; top:0; bottom:0; z-index:999999; overflow-y:auto; display:none; background:rgba(0,0,0,0.5); align-items:center; justify-content:center;}
.noticePop_wrap > .modal{background:#fff; width:90%; max-width:400px; border-radius:20px; overflow:hidden;}
.noticePop_wrap > .modal > .imgArea{min-height:150px; margin-bottom:-4px;}
.noticePop_wrap > .modal > .imgArea > img{width:100%; object-fit:contain;}
.noticePop_wrap > .modal > .footer{background:#ddd; padding:10px 15px; display:flex; justify-content:space-between; align-items:center;}
.noticePop_wrap > .modal > .footer > .ntPopCloseBtn{padding:5px 10px; background:#111; color:#fff; border-radius:5px;}

/* 메뉴 */
.topmn_wrap{padding: 1rem 0; }
.mn_list{ width: 100%; overflow: hidden; overflow-x: auto; white-space: nowrap; font-size: 0}
.mn_list li{text-align: center; display: inline-block;  background: yellow; min-width: 20%;  padding: 0 2.5rem;  position: relative; background: var(--mainColor);}
.mn_list li:after{ content: ""; display: block; width: 1px; background: rgba(255,255,255,0.3); height: 1rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%) }
.mn_list li:nth-last-child(1):after{display: none;}
.mn_list li a{ padding: 1.5rem 0; color: #fff; display: block; font-size: 1.5rem;}
.mn_list[data-category-size='2'] li{width: 50%;}
.mn_list[data-category-size='3'] li{width: calc( 100% / 3 );}
.mn_list[data-category-size='4'] li{width: 25%;}
.mn_list[data-category-size='2'] li,
.mn_list[data-category-size='3'] li,
.mn_list[data-category-size='4'] li{ min-width: unset; padding: 0; }
